JavaScriptの記述場所

JavaScriptの記述場所や読み込み方法を説明します。

JavaScriptを記述する場所は、大きく分けて２つあります。

１．HTMLファイル

２．JavaScriptファイル（外部ファイル）

１，２どう使い分けるかの定義はありませんが、「２．JavaScriptファイル」に記述することが多いです。

HTMLファイルにJavaScriptを記述する

HTMLファイルにJavaScrirtを記述する場合、<script>タグの中にコードを書きます。

一般的に、</ body>タグ(<body>タグの終了タグ）の直前に<script>タグを記述します。

理由は、HTMLにJavaScriptの記述があると、そのJavaScriptの処理が完了するまで、ウェブページのレンダリング(描画)が止まります。

そのため、HTMLの先頭で読み込ませると、そのJavaScriptの処理が完了するまでページの描画が始まらなくなってしまいます。

しかし、HTMLの末尾で実行すると、ページの描画が全て終わってからJavaScriptが実行されるため、描画が止まることはありません。

ページの描画に直接影響するようなスクリプトでなければ、HTMLの最後(</body>タグの直前)に記述するのが良いでしょう。

記述例１

<html>

<head>

（省略）

</head>

<body>

（省略）

　（ここにJavaScriptを記述します）

　</script>

</body>

</html>

サンプルコードです。

■sample1.html

<head>
<title>かいけつプログラム</title>
</head>
<body>
<p>JavaScript</p>
<button type=”button” onclick=”sampleButton()”>クリックして下さい
</button>
<script>
function sampleButton() {
alert(“JavaScript!”);
}
</script>

</body>
</html>

■ブラウザの表示

■「クリックして下さい」ボタンをクリックする

JavaScriptファイルにJavaScriptを記述する

JavaScriptファイルにコードを記述する場合は、JavaScriptを記述するファイルを作成し、そのファイルをHTMLから呼び出す必要があります。

JavaScriptファイルは「test.js」のように拡張子を「.js」とし、任意の名前を付けて保存します。

記述例２

<html>

<head>

（省略）

</ head>

<body>

（省略）

　</ script>

</ body>

</ html>

サンプルコードです。

■sample2.html

<head>
<title>かいけつプログラム</title>
</head>
<body>
<p>JavaScript2</p>
<button type=”button” onclick=”sampleButton()”>クリックして下さい
</button>
<script src=”sample2.js”>
</script>
</body>
</html>

■sample2.js

function sampleButton() {
alert(“JavaScript2!”);
}

JavaScriptファイルには、<script>タグを書く必要はありません。

■ブラウザの表示