HTMLページにJavaScriptのコードを組み込む
JavaScriptのコードをHTMLページに組み込むには、<script>
要素を利用する。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>タイトル</title> </head> <body> ・・・ページ本文・・・ <script type="text/javascript"> console.log('Hoge'); </script> </body> </html>
type属性は、スクリプトの種類を表す。ただし、HTML5でのデフォルト値は「text/javascript」なので、省略可。
「メモ」
language属性
昔のコードでは「language="JavaScript"」のような指定をしているものもあるが、現在は非推奨の扱いとなっている。古いブラウザとの互換性のために、language属性とtype属性を併記するようなケースもあるが、現存するブラウザのほとんどはtype属性に対応しているので、あえてそのようにする意味はない。
<script>
要素そのものは、<body>
閉じタグの直前に記述するとGood。一般的なブラウザではスクリプトの読み込み&実行が完了するまで、以降の描画をブロックする。そのため、巨大なスクリプトがページの最初(たとえば<head>
要素の配下)にあることは、そのまま描画速度が劣化する一因ともなる。
<body>
閉じタグの直前に<script>
要素を記述することで、そのような遅延を解消できる。一般的に、JavaScriptによる処理はページの読み込みを完了してから行うため、末尾に記述することによる弊害もない(特殊な例外がある場合も、そのコードだけをページの先頭に記述するようにすると良い)。