JavaScriptのコードのよくある問題を解決する
JavaScript のコードが正しく動作しないので修正したい、というような場合にみられる、よくある問題の解決方法へのリンクを以下に示します。
初学者がよく陥る誤り
スペル、大文字小文字を訂正する
コードが正しく動かない場合や、何かが未定義であるとブラウザーがエラーを出した場合、変数名や関数名のスペルが正しいか確認してください。
ブラウザーの組み込み関数についての正誤例:
| 正 | 誤 |
|---|---|
getElementsByTagName() |
getElementbyTagName() |
getElementsByName() |
getElementByName() |
getElementsByClassName() |
getElementByClassName() |
getElementById() |
getElementsById() |
セミコロンの位置
セミコロンの位置に誤りがないか確認してください。
例:
| 正 | 誤 |
|---|---|
elem.style.color = 'red'; |
elem.style.color = 'red;' |
関数
関数についての誤りは何点かあります。
よくある誤りの一つとして、関数を定義したがどこからも呼び出していない、というものがあります。
例:
function myFunction() {
alert('This is my function.');
};
上記のコードで定義した関数は、例えば以下のように呼び出さないかぎり何もしません。
myFunction();
関数のスコープ
関数は関数自身のスコープを持ちます。変数をグローバルに（関数の外で）定義するか、戻り値として変数の値を関数の外に返さないかぎり、関数の外から関数の中で定義された変数にアクセスすることはできません。
return 文の後ろのコードの実行
return 文で関数から値を返したとき、JavaScript のインタプリタはその関数を終了します。return 文の後ろのコードは実行されません。
Firefox などのいくつかのブラウザーは、return 文の後ろにコードが存在する場合、開発者ツールのコンソールにエラーメッセージを出力します。Firefox が出力するメッセージは "unreachable code after return statement" です。
オブジェクトリテラル記法 vs 代入
通常、JavaScript で代入する場合、等号を使います。
例:
var myNumber = 0;
オブジェクトの場合は、メンバー名とその値をコロンで区切り、メンバー間をカンマで区切る必要があります。
例:
var myObject = {
name : 'Chris',
age : 38
}
基本的な定義
初級のユースケース
全般
変数
- 変数を宣言するには
- 変数を値で初期化するには
- 変数の値を変更するには(代入演算子についても参照してください)
- JavaScript のデータ型とは
- 「弱い型付け」とは
数学
文字列
配列
JavaScript のデバッグ
JavaScript のデバッグに関する詳細については、JavaScript のよくある問題を扱うを参照してください。よくあるエラーの説明についてはその他のよくあるエラーを参照してください。
コード内での決定
ループ/イテレーション
- 同一のコード片を繰り返し実行するには
- 終了条件にマッチする前に、ループを終了させるには
- 次の繰り返し処理にスキップするには
- while ループ、do ... while ループを使用するには
- 配列内の要素を反復処理する方法
- 多次元配列の要素を反復処理する方法
- オブジェクト内のメンバーを反復処理する方法
- 配列内にネストされたオブジェクトのメンバーを反復処理する方法