HTMLへのスクリプトの埋め込み

スクリプトを埋め込むには、次の方法があります。

HTMLでの利用時の注意

HTMLでJavaScriptを利用するときには、次の理念に従います。

控えめなJavaScript (Unobtrusive JavaScript)
  1. HTMLマークアップとJavaScriptコードを分離する。 → 外部スクリプト
  2. JavaScriptコードがなくとも、コンテンツを利用可能とする。
  3. JavaScriptによって、HTMLページのアクセシビリティを低下させない。
控えめな JavaScript と Ajax を作成するためのガイド | IBM developerWorks Joe Lennon (2010/11/02)

インライン スクリプト (inline script)

HTML文書内のscript要素に記述する方法です。

<script type="text/javascript">

// ここにスクリプトを記述

</script>

スクリプトをコメントで囲むのは古いブラウザへの対応であって、もはや不要です。またCDATAセクションはXMLにおいて使用すべきであり、HTMLでは不要です。

スクリプトでscript要素自身を取得する方法

'</script>'の記述

インラインの スクリプトのコード内に、'</script>'の文字列をそのまま含めることはできません。なぜならそれはスクリプトの終了を意味するタグであり、これをそのまま記述すると以降はただの文字列と解釈されます。たとえば次のコードを実行すると、

<script type="text/javascript">
var a = 'AA</script>BB';
var b = 123;
</script>

ブラウザにはBB'; var b = 123;と出力されます。この問題を回避するには'</sc' + 'ript>'のように文字を分割して記述するか、「<」をASCIIコードで「\x3c」と表現し'\x3c/script>'のように文字をエスケープします。javascript - Why split the <script> tag when writing it with document.write()? - Stack Overflow

外部スクリプト (external script)

スクリプトを別ファイルに記述する方法で、HTMLマークアップと分離できます。それにはHTML文書のscript要素のsrc属性で、スクリプトを記述したファイルを読み込むように指示します。

<script type="text/javascript" src="sample.js"></script>

スクリプトはこのscript要素の位置に読み込まれるため、スクリプトから外部のリソースを参照するときには、このHTML文書のURLが基準となります。たとえばスクリプトでwindow.alert(window.location)と実行すれば、HTML文書のURLが表示されます。

記述位置

特別な理由がなければ、ページの描画に影響しないように</body>の直前に記述します。2/2 外部CSSと外部JavaScriptで表示速度の低下を防ぐには [ホームページ作成] All About 西村文宏 (2011/05/27)

Webサイトを高速化する方法

スクリプト ファイルの文字エンコーディング

外部スクリプトとする場合には、文字化けを防ぐためにスクリプトが記述されたファイルの文字エンコーディングに配慮する必要があります。

簡単には、スクリプトのファイルをHTML文書と同じ文字エンコーディングとします。こうすれば文字エンコーディングに気を煩わされることはありません。ファイルを編集できないならば、charset属性でファイルの文字セットを明示します。

<script type="text/javascript" charset="utf-8" src="sample.js"></script>
このHTML文書のエンコーディング:UTF-8
スクリプトのエンコーディング charset属性 読み込み例
UTF-8 ""
UTF-8 "utf-8"
UTF-8 "shift_jis"
Shift_JIS ""
Shift_JIS "utf-8"
Shift_JIS "shift_jis"

HTTP HeaderのContent-Type文字セットが指定されていると、charset属性の指定は無視されます。html - What's the default value of the charset attribute of a script tag? - Stack Overflow

Google Chromeでは、charset属性の指定が無視されることがあります。

イベントハンドラ (event handler)

onclickなどのハンドラ内に、スクリプトを記述する方法です。

<a onclick="alert('ABC')">Click Me!</a>

HTML属性としてのイベントハンドラの明記

参考

参考書

  • JavaScript 第5版 [オライリー・ジャパン] David Flanagan
    13章「Webブラウザに組み込まれたJavaScript」
JavaScriptのドキュメントから検索