JavaScriptをHTMLに書く
書き方のルール
- 基本的に「半角英数字と記号のみ」を使う
- 文字列を扱う場合は「シングルクォート」か「ダブルクォート」で囲む
- 大文字と小文字は区別される
- 命令文の末尾には「セミコロン」をつける
- 複数行にわたるまとまりの命令文は「{}波括弧」で囲む（囲まれた範囲をブロックと呼ぶ）
文字コード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ページタイトル</title> </head> <body> <div class="container"> <p>↑タブのタイトルを見て下さい</p> <p>↓コンソールを見て下さい</p> </div> <script> document.title = 'JavaScriptで書き換え'; console.log( 'JavaScriptで出力' ); </script> </body> </html>
コメント
- コメントとは、スクリプトの中に自由に記述できるメモ書きのようなもの
- 使用できない文字はありません
１行コメント
- 「//（スラッシュ２つ）」よりも後ろの文字がコメントになります
- 命令文の後ろに記述することもできます
複数行コメント
- 「/*」と「*/」で囲んだ範囲がコメントになります
/* コメントとして記述した内容は、 スクリプトには影響しません。 */
記述エラーの発見
- Adobe BracketsやDreamweaverの場合、エラーのある行を赤く明示するため記述途中で発見できます
Google Chrome の場合
- 要素の検証（コンテクストメニュー）
コンソールの利用
- alertは値を確認するには便利ですが、毎回ダイアログボックスが表示されるのもわずらわしいものです
- 以降は、ブラウザの拡張機能である「コンソール」を利用して値を表示します
console.log( '表示する値' );
コンソールでの発見
- エラーの行数も表示する
コメントを記述
/* タイトルに出力 */ document.title = 'JavaScriptで書き換え'; console.log( 'JavaScriptで出力' ); //コンソールに出力
JavaScriptを外部ファイル化する
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>ページタイトル</title> </head> <body> <div class="container"> <p>↑タブのタイトルを見て下さい</p> <p>↓コンソールを見て下さい</p> </div> <script src="js/script.js"></script> </body> </html>
《script.js》
document.title = 'JavaScriptで書き換え'; console.log( 'JavaScriptで出力' );
JavaScript開発においての注意点
- JavaScriptは無効にできる
- JavaScriptが無効の場合を視野に入れておく
- サーバー側でも入力漏れがあるかどうかチェックする仕組みをつける。
- たとえばサーバー側のPHPなどのサーバーサイドプログラムで、
エラーを検知して先に進まないようにする。
《JavaScript有効》
《JavaScript無効》
