JavaScriptの書き方

JavaScriptの基本的な書き方

JavaScriptの書き方には2つの方法があり、HTMLのhead要素またはbody要素にscript要素内に直接コードを書く方法と、外部ファイルに書きそれを読ませる方法があります。

JavaScriptを利用するため、meta要素でスクリプト言語の指定が必要になります。
なお、HTML5ではmeta要素によるスクリプト言語の指定はデフォルトとなり、省略することができます。

HTML

<meta http-equiv="content-script-type" content="text/javascript" />

script要素内に直接コードを書く方法

head要素（またはbody要素）内でscript要素を設置し、その中でコードを書きます。

HTML

<head>
	...
	<script type="text/javascript">
		// JavaScriptのコード
		alert('hello world !');
	</script>
	...
</head>

外部ファイルに書きそれを読ませる方法

JavaScriptのコードが書かれたファイルを用意し、head要素内でscript要素のsrc属性でその用意したJavaScriptファイル（拡張子は.js）を読み込みます。

HTMLとの役割わけられる、他のページに同じコードを書かずに済む、ブラウザにキャッシュされページの表示速度を向上させることができる、管理がしやすくなるといったメリットがあるので、こちらの方法を推奨しています。

JavaScriptのコードが書かれたファイル（hello-world.js）：

JavaScript

alert('hello world !');

HTML側に読み込むJavaScriptファイルを指定：

HTML

<head>
	...
	<script type="text/javascript" src="hello-world.js"></script>
	...
</head>

JavaScriptの実行順序

JavaScriptは記述場所とページの解析状況で実行されるタイミングが異なります。
実行順序は次の通りです。

head要素（即時実行の場合）
body要素（即時実行の場合）
DOMContentLoadedイベントハンドラー
loadイベントハンドラー

HTML

<head>
	...
	<script type="text/javascript">
		// head要素での即時実行
		alert(1);

		// DOMContentLoadedイベントハンドラー
		window.addEventListener('DOMContentLoaded', function() {
			alert(3);
		}, false);

		// loadイベントハンドラー
		window.addEventListener('load', function() {
			alert(4);
		}, false);
	</script>
...
</head>
<body>
	...
	<script type="text/javascript">
		// body要素での即時実行
		alert(2);
	</script>
	...
</body>

JavaScriptが動作しない環境への配慮

JavaScriptはブラウザの設定により無効にすることが可能で、設定が無効な場合はJavaScriptは動作しません。
そうした場合の配慮としてnoscript要素を使用します。
この要素はJavaScriptがオフに設定されている場合に表示される要素です。

HTML

<body>
	...
	<noscript>
		<p>JavaScriptが有効になっていません。</p>
	</noscript>
	...
</body>

文や式の終了と自動挿入

文や式の終了はセミコロンを使って表します。
このセミコロンは省略できる場合がありますが、行末にセミコロンがない場合は次の行も文や式の続きと解釈するので、書き方によってはエラーとなってしまう場合がありますので、文や式の終了はセミコロンを省略しないほうが無難といえます。
ただし、制御構文（do…while文を除く）やコメント文、関数文の終わりにはセミコロンを記述しません。

JavaScript

var foo = function() {
	...
}; // 式の終了

セミコロンの自動挿入

JavaScriptでは文や式の終わりである箇所を予想して、自動的に挿入する仕組みがあります。

JavaScript逆引きリファレンス一覧へ戻る