記述のルール
Webブラウザはオブジェクトの集まり
- windowオブジェクト
- documentオブジェクト
- imageオブジェクト
JavaScriptとDOM
- 初期のJavaScriptでは、オブジェクトとして扱えるHTML要素は多くありませんでした
- HTMLドキュメントの任意の要素をオブジェクトとして扱えるようにした技術が「DOM(Document Object Model)」
記述のルール
- シングルコーテーションもダブルコーテーションも同じ扱いです
- Google JavaScript Style Guide ではシングルコーテーションの使用を推奨しています
行の終わりには必ずセミコロンを付ける
<script> window.alert( 'セミコロンは必ず記述しましょう' ); </script>
大文字・小文字について
JavaScriptは大文字と小文字を区別します。
コメントの記述法
コメントを1行で記述する
// コメントです。日本語で記述できます。
コメントを複数行で記述する
/* 複数行のコメントです。 日本語で記述できます。*/
記述する場所
bodyタグの間に記述する
HTML文書内に実行結果を表示したいとき。
属性に記述する
イベントハンドラから直接呼び出すとき。
「input」などHTMLタグの属性に記述します。
headタグの間に関数を記述する
イベントハンドラに指定した関数を呼び出すときなどは、「head」内に関数部分を記述します。
HTML内部に記述する
- 「</body>」の前に記述します
<script> ここにコードを記述 </script>
《XHTMLの場合》
<script type="text/javascript"> <![CDATA[ ここにコードを記述 ]]> </script>
HTMLファイルから外部JavaScriptファイルを読み込む
「JavaScriptファイル」を別に作成し、「script要素」でそのファイルの場所を指定します。
スクリプトファイルは「src属性」で呼び出します。
<script src="jsファイル名"></script>
meta要素
<meta http-equiv="Content-Script-Type" content="text/javascript">
エラー
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Hello!</title> </head> <body> <script> window.alert( 'Hello World!! ); </script> </body> </html>
Dreamweaverでは「エラー」表示されます。
ブラウザでは表示されません。
Firefoxの「エラーコンソール」
JavaScript開発においての注意点
- JavaScriptは無効にできる
- JavaScriptが無効の場合を視野に入れておく
- サーバー側でも入力漏れがあるかどうかチェックする仕組みをつける。
- たとえばサーバー側のPHPなどのサーバーサイドプログラムで、
エラーを検知して先に進まないようにする。
《JavaScript有効》
《JavaScript無効》
JavaScriptでのメニュー表示
JavaScriptを使った動的メニューの場合、JavaScriptを無効にすると表示されない可能性があります。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>JavaScriptメニューがオフの場合</title> </head> <body> <script> メニューを生成するJavaScriptのコード </script> <noscript> 代替えメニューを表示するHTMLのコード </noscript> </body> </html>