<script>要素を記述場所
<script>要素を記述する場所は、大きく以下の3つに分類できる。
(1) <body>要素の配下 (任意の位置)
<script>要素で処理結果をページに直接出力するために利用する。コンテンツとコードが混在するのは、可読性と保守性の観点からすると望ましくない。
現在ではほとんど使われることはないので、一部の例外を除いては使うべきではない。
実行結果を文書内に埋め込みたい
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript...</title>
</head>
<body>
<!-- 任意のコンテンツ -->
<script src="src/script.js">
<!-- JavaScriptのコード -->
</script>
<!-- 任意のコンテンツ -->
</body>
</html>
(2) <body>要素の配下 (</body>閉じタグの直前)
一般的なブラウザではスクリプトの読み込みや実行が完了するまで以降のコンテンツを描画しない。このため、読み込みや実行に時間かかるスクリプトは、そのままページ描画の遅れの原因となる。
そこで、ページ高速化の手法として</body>の直前(ページの末尾)に、<script>要素を配置することがよく行われる。これによって、ページの描画を終えたあと、スクリプトを読み込み/実行できるので、見た目の描画速度が改善される。
一般的に、JavaScriptによる処理は、ページがすべて準備できてから開始すべきものであるはずので、これによる弊害を受けることはほぼない。
ページを操作するコードを定義したい
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript...</title>
</head>
<body>
<!-- 任意のコンテンツ -->
<script src="src/script.js">
<!-- JavaScriptのコード -->
</script>
</body>
</html>
(3) <head>要素の配下
ただし、(2)でまかなえないケースがある。関数を呼び出すための<script>要素よりも、関数定義の<script>要素を先に記述しなければならない。例えば、<body>要素の配下で呼ぼ出す必要があるような関数は、<head>要素の配下で事前に読み込んでおく必要がある。
また、スクリプトからスタイルシートを出力するような状況でも、<head>要素の配下で<script>要素を記述すべき。
<body>配下で直接呼び出すための関数を定義したい
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript...</title>
<script src="src/script.js">
<!-- JavaScriptのコード -->
</script>
</head>
<body>
<!-- 任意のコンテンツ -->
</body>
</html>
優先順位
まずは、(2) を基本とし、それでまかなえない場合にだけ(3)を利用する。
(1)を利用する状況は、外部のウィジェットを埋め込むなどの状況を除けば、ほとんどない。(1)を使いたくなったら、まずはほかの方法でまかなえないかを検討すべき。
<script>要素は、htmlファイルの中に何度記述しても良い。ページとしては、最終的に<script>要素をすべてひとまとめにしたもので解釈する。