読者です 読者をやめる 読者になる 読者になる
スポンサーリンク

JavaScriptの動かないコード(中級編)正規表現をwhile内で定義すると無限ループで固まるエラー (execでグローバルなマッチだと,処理がフリーズ)

連載目次へ 以下のJavaScriptコードが,意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: 複数の文字列がある。 それぞれの文字列から,URLのトップレベルドメイン(TLD)を全て抜き出す。 抽出のために,RegExp.exec() メソッドで,正…

JavaScriptの動かないコード(中級編) 正規表現の括弧キャプチャを,グローバルで繰り返しmatchできない (gオプションを付けると部分文字列の抽出が無効)

連載目次へ 以下のJavaScriptコードが,意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: (試行1)では,文字列からトップレベルドメインを1つだけ抽出する。 これは上手くいく。 (試行2)では,文字列からトップレベルドメインを…

JavaScriptの動かないコード(中級編) forループ内でイベントリスナを定義したら,動作がおかしい。(クロージャや関数オブジェクトの性質を理解していないために発生するエラー)

連載目次へ 以下のJavaScriptコードが,意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: ・ボタンごとに,0, 1, 2 という異なる数を表示したい。 <h3>ボタンごとに異なる数字をアラート表示するサンプル</h3> <input type="button" id="id0" value="0"> <input type="button" id="id1" value="1"> <input type="button" id="id2" value="2"> <script> for (var i = 0; i < 3; i ++ …

JavaScriptの動かないコード(中級編) 配列のsort結果がおかしい …評価関数が正数か負数以外の値を返す場合の挙動のエラー

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分)やりたい事: オブジェクトの配列を,年齢の若い順に並び替える。 // WSHの場合はalertを定義しておく if( typeof alert == "undefined" ){ var alert = functio…

JavaScriptの動かないコード(中級編)大きな数字を表示できないエラー (2の53乗を超えると,IEEE754の精度保証外なので計算もalertも不可能)

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: 2の55乗を計算する。(正しい値は 36028797018963968 ) <input type="button" value="2の55乗を計算して表示" onclick="f()"> <script> function f(){ alert( "「2の55乗は36028797018963968」と表示します。\n\n" + "「2…

JavaScriptの動かないコード(中級編)Aタグがリンクとして機能しないエラー (URL・hrefの%エンコードがRFC違反だと,IEで例外が発生)

連載目次へ 以下のJavaScriptコード(というよりHTMLそのもの)が意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: HTML上で,Aタグによりリンクを表示する。 そのリンクのURLを, JavaScriptから取得する。 <a href="http://google.com/?q=%" id="a1">ブラウザは, このHTMLリン</a>…

JavaScriptの動かないコード(初級編)textareaの内容を読み書きする方法は,innerHTMLとvalueのどちらか?

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: テキストエリアに入力されている文字列をアラート表示する。 <textarea id="hoge">ここの文字列を書きかえてください。</textarea> <input type="button" value="入力内容を確認" onclick="f()"> <script> function f(){ // textareaを取得 var elem…

JavaScriptの動かないコード(初級編)varで変数宣言する位置が,関数内の先頭以外だと起こる「変数の巻上げ(ホイスティング)」

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: 関数の内容をアラートしたあとで,1と表示する。 <script> function x(){ // この関数の中身を文字列として表示する alert( x ); } function y(){ // こ</script>…

JavaScriptの動かないコード(中級編)callで,コンテキスト引数にnull・undefinedや,falseなどプリミティブ型の値を渡した時のthisの挙動

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: 「真です。」と,一回だけ表示する。 関数オブジェクトをcallして,引数が真と評価されるものだけアラート。 <script> // 関数オブジェクト var func = fu…

JavaScriptの動かないコード (初級編) DOM要素の配列を,forループで順番に全削除できない

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: DOM操作により,div要素を全て削除する。 <body> <input type="button" value="DIV要素の削除を実行" onclick="f()"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <script> function f() { // 全要素を取得 var arr = document.getElementsByTagName("div"); for( </body>…

Android SDK の動かないコード(中級編) invalidate しても再描画されないエラー

AndroidプログラミングのTOPへ 以下のAndroidアプリのコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: ボタン押下時に,ImageView上に画像を2枚連続で表示する。表示のタイミングをずらす事により,疑似的にスライドのように…

Android SDK の動かないコード(中級編) ダイアログにsetTitleしないと,ダイアログのサイズが最小になってしまう

AndroidプログラミングのTOPへ 以下のAndroidアプリのコードが意図した動作をしないのは,なぜですか。(制限時間1分)やりたい事: 幅が300dpのダイアログを表示する。 ダイアログ内の横幅いっぱいに,テキストボックスやボタンを表示する。 アクティビテ…

Android SDK の動かないコード(初級編) ダイアログ上の要素にアクセスするとNullPointerExceptionになるエラー

AndroidプログラミングのTOPへ 以下のAndroidアプリのコードが意図した動作をしないのは,なぜですか。(制限時間1分)やりたい事: ダイアログを表示してから,ダイアログ上のボタンの文言を変更する。 package com.example; import android.app.Activity;…

Android SDK の動かないコード(中級編) 端末を「縦横切り替え」すると,ダイアログやアクティビティが死に WindowLeaked エラー

AndroidプログラミングのTOPへ 以下のAndroidアプリのコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: Facebook SDKを使って,ログイン用のダイアログを表示する。 package com.facebook.android; import android.app.Activit…

JavaScriptの動かないコード (中級編) 重いページで,onloadのイベントリスナが実行されない

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分)やりたい事: サーバサイドで、画面上のフォーム内に、大量のhiddenデータを描画する。 描画が終わったら、自動的にフォームを送信(submit)する。 <body> ↓このフォ</body>…

Ruby on Rails 1.2 での開発のはまり所

Ruby on Rails 1.2.6 でWebアプリケーションを開発する際,はまった事のまとめ。既に世の中では Rails 3.x以降のバージョンが出ているが, この情報はレガシーRailsアプリケーションの保守・メンテに役立つだろう。 (1) プラグイン関連 (1−1) acts_as…

CSSの動かないコード(中級編) Windowsのデスクトップテーマが「XP」の時,ボタンに背景画像を表示したい

クイズ… 下記の HTML+CSS が,意図した通りに表示されないのはどうしてですか。(制限時間1分) やりたい事: ボタンの背景に,画像を表示したい。 <style> input { /* ボタンの背景に画像を表示する */ background-image : url(fuga.PNG); /* 背景画像は繰り返さ</style>…

Rubyの動かないコード (中級編) Ruby on Railsで,スレッドごとにトランザクションを分離したい

以下のRuby on Railsのコードが,意図した動作をしないのはなぜですか。(制限時間1分) やりたい事 2つのスレッドを同時に動かす。 スレッド1では,レコードを登録後,ロールバックする。 スレッド2では,レコードを登録後,コミットする。 タイミング…

Rubyの動かないコード (中級編) ローカル変数の「暗黙の初期化」に関するエラー(ローカル変数のスコープが事前コンパイルで決まる)

以下のRubyのコードが,意図した動作をしないのはなぜですか。(制限時間1分)やりたい事: 画面に「1」と表示する。 # aに1を代入する eval "a = 1" # aを呼び出す p a

Rubyの動かないコード (初級編) ブロックとクロージャの性質

以下のRubyのコードが,意図した動作をしないのはなぜですか。(制限時間1分)やりたい事: 1から3までの各数値の2乗を計算する。 プログラム終了時点での,変数の状態を表示する。 # 「p」で日本語を出力するための設定 $KCODE = "sjis" # 1から3までの範…

Rubyの動かないコード (初級編) 同じクラス内なのに,privateメソッドを呼べない場合がある

以下のRubyのコードが,意図した動作をしないのはなぜですか。(制限時間1分)やりたい事: 1つのクラス内で定義されているメソッドを,順番に呼び出して実行する。 hoge.rb # クラス定義 class Hoge def self.main_method # このクラス中で定義されている…

JavaScriptの動かないコード (初級編) switch文で,数値以外の変数を評価した時のエラー

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: 氏名を選択して,ボタンを押す。 ⇒氏名に対応する苗字と,苗字に対応するメッセージが表示される。 <body> 氏名を選んでください。 <select id="hoge"> <option>鈴木</option> <option>鈴木 太郎</option> <option>鈴</option></select></body>…

Prototype.js + Script.aculo.us のはまり所

もはやレガシー*1となりつつある,時代を作ったJavaScriptフレームワーク Prototype.js の盲点,注意点を書きためてゆく。 ※「JavaScriptの動かないコード(JavaScriptエラー集)」のprototype.js版,という位置づけである。ただしネタは多くない。 Download P…

JavaScriptの動かないコード (中級編) ラジオボタンとプルダウンのonchangeイベントがおかしい

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: ラジオボタンのチェック状態によって,表示文言を切り替える。 <input type="radio" name="msg_type" id="radio1">Aと表示<br> <input type="radio" name="msg_type" id="radio2">Bと表示<br> <br> <div id="div_msg1" style="display:none">A</div> <div id="div_msg2" style="display:none">B</div>

JavaScriptの動かないコード (中級編) イベント強制発生までの遅延時間をなくしたい

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: 「フォーカスを外す(blur)とメッセージを表示する」という,テキストボックスがある。 このテキストボックスの動作テストをしたい。blurのイベ…

JavaScriptの動かないコード (中級編) clickイベントを強制的に発生させたい (fireEvent/createEventの使い方)

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: 「クリックするとメッセージを表示する」という,テキストボックスがある。 このテキストボックスの動作テストをしたい。クリックのイベントを自…

JavaScriptの動かないコード (中級編) nullが0以上0以下と認識されてしまう

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: ラジオボタンの中で,どれかボタンが選択されたかを検証する。 何も選択されていない場合,警告のメッセージを表示。 <body> どれか選択して下さい。<br> <input type="radio" name="hoge" value="0"> 0 <br></body>…

JavaScriptの動かないコード (中級編) innerHTMLを追記するとイベントハンドラが消える

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: 「追加」ボタンを押すと,「メッセージ表示」ボタンが追加される。 どの「メッセージ表示」ボタンを押しても,メッセージが表示される。 <body> <input type="button" onclick="f()" value="ボタンを追加する"> <br> <div id="hoge"><input type="button" id="btn1" value="メッセージ表示"></div> <style type="text/css"> .bl</body>…

JavaScriptの動かないコード (中級編) IEでスコープチェインにdocumentが補完されるように見える不思議

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: alertとかgetElementByIdなどの関数を,1文字の変数に代入して利用する。(つまり,ショートコーディングを試みる。) <html> <body> <input type="button" onclick="f()" value="1文字関数のテスト"> <div id="my_div">fuga</div> <script language="JavaScript"> function f(){ v</body></html>…

JavaScriptの動かないコード (中級編) オブジェクトのメソッドを変数代入でコピーできない

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: hello,world! と,2回表示したい。その際,出力用の処理を簡単に呼び出せるように,関数を変数に代入してから利用する。 <html> <body> <input type="button" onclick="f()" value="「hello,world」と2回表示"> <script language="JavaScript"> function f(){ var </body></html>…

JavaScriptの動かないコード (中級編) setTimeoutのタイマーが指定時刻に動かないエラー (JavaScriptがマルチスレッドだという誤解)

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: 0から20000までループする。 そのループの途中にタイマーを設定して,ループの進捗を表示する。 <input type="button" value="ループを開始する" onClick="f()"> <div id="div_counter"></div> <div id="div_comment"></div>

JavaScriptの動かないコード (初級編) parseIntで返り値が0になるエラー

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: 「2008年12月から何か月経ったか」を計算する。 <input type="button" value="期間を表示" onClick="f()"> 月を選択してください。 → 2009年の <select id="select_month"> <option value="01">01</option> <option value="02">02</option> <option value="03">03</option> <option value="04">04</option></select>

JavaScriptの動かないコード (中級編) オブジェクトのプロパティ定義にthisを使って失敗するエラー

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: 文字列が改行やスペースを含むかどうか,正規表現で調べる。 <input type="button" value="クリックして表示" onClick="f()"> <script language="JavaScript"> // 文字列が特殊文字を含むかどうか判定するためのオブジェクト。 var obj = { /* …

JavaScriptの動かないコード (中級編) iframe内のDOM要素を別フレームにコピーできないエラー

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: 同じフォルダにtenki.htmlがあり,天気が書いてある。その情報を,DOM要素ごと抜き出す。 index.html <body> <input type="button" value="クリックして表示" onClick="f()"><br> <iframe id="ifr" src="tenki.html"></iframe><br> <table> <tbody> <tr id="my_tr"> <td>上のページの情報によれば,今日の…</td></tr></tbody></table></body>

JavaScriptの動かないコード (初級編) 関数が返り値を return できないエラー (セミコロンの罠)

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: 現在時刻を表示する。 <input type="button" onclick="f()" value="現在時刻を表示"> <script language="JavaScript"> function f(){ alert( getNow() ); } // 現在時刻の文字列を返します。 function getNow(){ var d = new Date(); // 1:23…

JavaScriptの動かないコード (中級編) iframe内にDOMアクセスできないエラー

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: tenki.htmlの中に,天気が書かれている。 index.htmlのインラインフレーム内に tenki.html を表示して,その内容を解析する。 ※2つのHTMLは,同…

JavaScriptの動かないコード (中級編) 不要なイベントが連鎖で発生してしまう  (バブリングの対処)

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: 右図のような「クリックゲーム」を作る。 赤い部分をクリックしたらゲームオーバー。 <div id="jirai" style="background-color:red; width:200px; height:200px;" > 地雷源 <div id="goal" style="background-color:green; width:50px; height:50px; position:relative; top:50px; left:50px;" > 安全地帯 </div></div>

JavaScriptの動かないコード (中級編) イベントの詳細情報を第一引数で取得できない

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) 何かキーを押すと,キーコードを表示します。 <script language="JavaScript"> // キー押下時のイベントリスナを設定 document.onkeydown = f; function f( e ) { // キーコードを表示 alert( </script>…

JavaScriptの動かないコード (中級編) onKeydownイベントが認識されない

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: 画面を開いているとき,何かキーボードを押すと,別のページにジャンプする。 <body> 何かキーを押すと,Yahooにジャンプします。 <script language="JavaScript"> function f() { // </script></body>…

JavaScriptの動かないコード (中級編) DOMで子要素を指定する際のエラー

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) <body> <table border=1> <tbody id="my_tbody"> <tr><td>この行がコピーされます。</td></tr> </tbody> </table> <input type="button" value="行をコピー" onClick="f()"> <script language="JavaScript"> function f() { // tbody中の最初の行を取得 var old_element = my_tbody.childNodes[0]…</body>

JavaScriptの動かないコード (初級編) with文にまつわるエラー

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: 「はい」ボタンと「いいえ」ボタンの押下を区別して応答する。 ボタンのトータルの押下回数も表示する。 <input type="button" value="はい" onClick="f(1)"> <input type="button" value="いいえ" onClick="f(0)"> <script language="JavaScript"> function f( num ) // 引数が 1 :「は…

JavaScriptの動かないコード (中級編) jsonオブジェクトをevalできないエラー

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) <input type="button" value="「1」と表示" onClick="f()"> <script language="JavaScript"> function f() { var str = "{x:1}"; // JSONオブジェクトにする var obj = eval(str); // プロパティを表示 alert( obj.x ); } </script>

JavaScriptの動かないコード (中級編) イベントハンドラに同じ関数を2回以上追加したい

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: ボタン押下時に, 2 と表示する。 そのために,0に1足す操作を2回行なう。 <input type="button" value="「2」と表示" id="my_button"> <div id="my_div"></div> <script language="JavaScript"> // 初期化 var a = 0; // a に1足して表示 function f(){ a++;…

JavaScriptの動かないコード (中級編) 動的追加したイベントの実行順序 ( addEventListener vs attachEvent )

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: ボタンへ動的にイベントリスナを追加する。 ボタン押下時に,0, 1, 2 とアラート表示する。 <input type="button" value="「0, 1, 2」と表示" id="my_button"> <script language="JavaScript"> function f0(){ alert( 0 ); } function f1(){ aler…

JavaScriptの動かないコード (初級編) 配列とオブジェクトの宣言エラー

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) <input type="button" value="クリックして表示" onClick="f()"> <script language="JavaScript"> function f() { // 配列 var a = new Array( "H","e","l", "l","o",",", "w","o","r", "l","d","!", ); // Hello,world! と表示 alert( a.join("") ); // オ…

JavaScriptの動かないコード (中級編) Ajax読み込み時に「システムエラー -1072896658」

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: Ajaxを使って,a.htmlに外部ページ(b.php)を読み込む。 下の例ではjQueryを使っているが,べつにprototype.jsでも,素のXMLHttpRequestでもよい。…

JavaScriptの動かないコード (中級編) innerHTMLに閉じタグを書き込む時のエラー

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: innerHTMLに「終了タグ」と「開始タグ」を書き込むことにより,元からあったタグを2分割する。 <div id="div0"> <div id="div1"> 分割前 </div> </div> <input type="button" value="divを分割して2つに" onClick="f()"> <script language="JavaScript"> function f() { // タグを2つに分割…

JavaScriptの動かないコード (中級編) 正規表現で同じ文字の連続を検出したい - 置換前パターン中での後方参照

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: 同じアルファベットの連続した並びを,それぞれ1文字にまとめる。 例: "good apple" → "god aple" <script language="JavaScript"> function matomeru( str ) { // 正規表現を…

JavaScriptの動かないコード (中級編) cloneNodeで選択状態が変わるエラー

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) <input type="button" onClick="f()" value="「cが選択済みでチェック有りの状態」をコピー" > <div id="div0"> <div id="div1"> <select id="select1"> <option>a</option> <option>b</option> <option selected>c</option> </select> </div></div>

JavaScriptの動かないコード (中級編) splitで文字列を分割する時のエラー

連載目次へ 以下のJavaScriptコードが意図した動作をしないのは,なぜですか。(制限時間1分) やりたい事: 言葉の間に句読点の無い文章中に「。」をつけたい。 お早う今日は今晩は今日はお早う。 → お早う。今日は。今晩は。今日は。お早う。 <script language="JavaScript"> // split()</script>…