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

導入

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

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

HTMLへの埋め込み方法

インライン スクリプト (inline 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>'のように文字を分割して記述するか、'\x3c/script>'のように一部の文字をエスケープします。なおこの文字列の「\x3c」の部分は、「<」をASCIIコードで表現したものです。javascript - Why split the <script> tag when writing it with document.write()? - Stack Overflow

外部スクリプト (external script)

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

記述位置

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

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

スクリプトの文字エンコーディング

外部スクリプトとする場合には、そのスクリプトの文字エンコーディングに配慮する必要があります。それは文字化けを抑えるためです。

簡単には、スクリプトをHTML文書と同じ文字エンコーディングで記述します。こうすれば文字エンコーディングに気を煩わされることはありません。

スクリプトを編集できないならば、charset属性で文字エンコーディングを明示します。

<script type="text/javascript" charset="utf-8" src="sample.js"></script>

イベントハンドラ

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

参考

参考書

  • JavaScript 第5版 [オライリー・ジャパン] David Flanagan
    13章「Webブラウザに組み込まれたJavaScript」