*JavaScriptの有りがちなミス


 JavaScriptのソース上に問題があった場合、問題の種類と問題があった場所を示したエラー表示のウインドウが開きます。
しかしながら、このウインドウで指摘されている問題があった場所は、実際にはこの場所と別の場所に不具合があったため、エラーが引き起こされる場合もありますので気を付けてください。

error.gif

また、自分の経験上でスクリプト作成時に起こしやすいミスをまとめてみました、ブラウザでチェックする前に以下の項目をもう一度確認してみてください。

-記述上のミス-

・名称のスペルミス
 関数名や変数名はユーザーが、規定の範囲内で自由に定義出来ますが、スクリプトを書いている途中で、スペルを間違えたり抜かしてしまうことがよくあります、また大文字小文字も区別するのでその点にも注意が必要です。

・オブジェクトの階層のミス
 ナビゲータオブジェクトにはオブジェクトに階層関係があり、それらのオブジェクトを使用するときはその階層関係を間違えずに記述して使用する必要があります。特にTextオブジェクトなど、階層の下のほうにあるオブジェクトでは、途中のオブジェクトの記述忘れや、順番違いに気を付けて下さい。

・関数名.変数名のとり違え
 長いスクリプトを書いている時、特に変数名などは、値の代入を繰り返して行くうちに、どの変数にどの値が代入されたかがこんがらがってしまいうことがあります、これらの名称は、自分自身が見て解りやすい名称を設定することをお進めします、また複雑な処理をしているところでは、どういう処理をしているかをコメントに書いておくのも良いでしょう。

・関数名のダブり
 1つのHTMLファイル内に同名の複数の関数がある場合、一番最後に記述された関数のみ動作し他の関数は無効になってしまいます。

・「{}」などの括弧や「"」の閉じ忘れ
 処理文が長くなったり、なん重にもネスト(入れ子)させていると、処理文を閉じる"}"を付け忘れたり、間違った所に付けてしまうことがよくあります。各階層ごとに段落を下げたり、コメントを付けるなど工夫することをお進めします。また、文字列を閉じる"なども、文字列が長くなったり、変数と一緒に使ったりしていると、うっかり付け忘れてしまいがちです。

・"と'のネスト(入れ子)の間違い
 ""で括られた文字列内では、"を使わず'使用します、うっかり"を使ってしまうと、JavaScriptは、そこで文字列が終わったと判断し、エラーになってしまいます。特にイベントハンドラー内で、文字列等を設定するときに間違えてしまいがちですので注意が必要です。

・"="ではなく"=="
 JavaScriptでは、左右の値を評価して値が同じであることを表わす時は、"値A = 値B"ではなく"値A == 値B"と記述します。

-文字コード上の問題-

・「表示」「予定」などの文字化けする文字によるエラー
 "document.write()"で文字を書き出したとき、文字化けするだけでなく文字の組み合わせによってはエラーになってしまう場合があります。

・スペースなのに「不正な"@"があります」と言われたとき
 スペースの表現に、半角スペースや全角スペースやタブを混在して使用している時、何も問題がないはずなのに文字コードの関係で「不正な@があります(英文)」というエラーが出る時があります。この問題を回避するため、スペースをあけるときには半角英数のスペースに統一して使用することをお進めします、また不要なスペースは極力削除しておくこともお進めします。

-レイアウト上の問題-

・大きめの画像の後にJavaScriptを記述したとき
 Netscape2.xでは、大きな画像ファイルやカウンターなど表示に時間がかかるものがあると、それ以降のJavaScriptが動かない場合があります。この問題は、画像ファイルの前にスクリプトを記述したり、"WIDTH","HEIGHT"を指定することによってほぼ解決されます。

・テーブルの中、テーブルの後ろにJavaScriptを記述したとき
 テーブル内、あるいはテーブルのすぐ後にJavaScriptを記述した時も、スクリプトが動かない場合があります。この問題は、Netscape2.x,3.xで見られ、テーブルのサイズに余裕を持たせたり、テーブルより前にスクリプトを記述することによって、ほぼ解決されます。

・アニメーションGIFと同時使用時注意
 Netscape2.xで、アニメーションGIFとJavaScriptを同時に使用しているページを見た場合、ページの読み込みが途中で止まったり、ブラウザが不安定になってシステムエラー等を引き起こす場合があります。この問題は、Netscape3.0では解決していますが、それ以前のブラウザを対象にしたページでは、アニメーションGIFとJavaScriptの同時使用は避けたほうが良いでしょう。

-window.open()使用時の注意-

・開いたウインドウに文字が記述されない、最後の1行が表示されない
 "window.open()"で開いたウインドウに"document.write()"で文字を書き出した時、"document.close()"でドキュメントストリームを明示的に閉じていないと、全く表示されなかったり、最後の1行が表示されなかったりする場合があります。

・window.open()で開いたウインドウ内の画像はフルパスで
 "window.open()"で開いたウインドウに画像ファイルを表示させる時、Netscape2.xなど一部のブラウザでURLをフルパスで指定していないと、画像が表示されない場合があります。

-デバック時のTIP-

・"setTimeout()"は時間設定を大きめにしてテストする
 リアルタイムの時間表示やアニメーションするJavaScriptのような、一定時間に処理を繰り返すスクリプト中ににミスがあると、エラーを表示するウインドウが繰り返し出てどうしようも無い状態になる時があります。このようなスクリプトをデバックする時には、繰り返し時間の設定を長めにして、問題が無くなってから設定時間を短くすることをお進めします。

・ブラウザは1度終了させてから
 キャッシュ機能が働くため、ブラウザの「Reload]ボタンを押しただけでは、HTMLファイルが更新されない場合があります。もし記述ミスや構文ミスがなにもないのにまだエラーが出る時には、一度ブラウザを終了させてからファイルを読み込み直してみてください。


[コラムのページへ...]