スクリプトを埋め込むには、次の方法があります。
HTMLでJavaScriptを利用するときには、次の理念に従います。
控えめなJavaScript (Unobtrusive JavaScript)HTML文書内のscript要素に記述する方法です。
<script type="text/javascript">
// ここにスクリプトを記述
</script>
スクリプトをコメントで囲むのは古いブラウザへの対応であって、もはや不要です。またCDATAセクションはXMLにおいて使用すべきであり、HTMLでは不要です。
インラインの スクリプトのコード内に、'</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
スクリプトを別ファイルに記述する方法で、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)
外部スクリプトとする場合には、文字化けを防ぐためにスクリプトが記述されたファイルの文字エンコーディングに配慮する必要があります。
簡単には、スクリプトのファイルをHTML文書と同じ文字エンコーディングとします。こうすれば文字エンコーディングに気を煩わされることはありません。ファイルを編集できないならば、charset属性でファイルの文字セットを明示します。
<script type="text/javascript" charset="utf-8" src="sample.js"></script>
| スクリプトのエンコーディング | 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属性の指定が無視されることがあります。
onclickなどのハンドラ内に、スクリプトを記述する方法です。
<a onclick="alert('ABC')">Click Me!</a>