Javascriptの記述場所

Webデザインの勉強

JavaScriptを記述する場所

bodyタグの間に記述

HTML文書内に実行結果を表示したいとき。

属性に記述

イベントハンドラから直接呼び出すとき。
「input」などHTMLタグの属性に記述します。
*1

headタグの間に関数を記述

イベントハンドラに指定した関数を呼び出すときなどは、「head」内に関数部分を記述します。
《winsize.html》

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>外部ファイルを読み込む</title>
<script type="text/javascript" src="winsize.js"></script>
</head>
<body>
</body>
</html>

《winsize.js》

document.write ("「winsize.js」を呼び出しました。");
HTML内部に記述
<script type="text/javascript">
<!--
　ここにコードを記述
//-->
</script>

《XHTMLの場合》
CDATAで記述 *2

<script type="text/javascript">
<![CDATA[
　ここにコードを記述
]]>
</script>
外部ファイルに記述

「JavaScriptファイル」を別に作成し、「script要素」でそのファイルの場所を指定。
スクリプトファイルは「src属性」で呼び出します。

<script type="text/javascript" src="jsファイル名"></script>

2012年-主流の記述

  • 正しくは「」内に記述するのが望ましいのですが、現在では「」直前に記述することが流行となっています
  • 表示速度を優先するため、その位置によって速度の検証がおこなわれた結果最後に読み込むことが優先されています
  • 内容は、シングルクオートで囲む（HTMLの記述にダブルクオートが使われることから）

参考 WordPressの表示速度

Web Design Recipes
WordPressで作られたWebサイトの表示速度を早くするためにできること

*1:キーボードのボタンが押された」とか「マウスが移動した」等の、 コンピュータ上で発生するなんらかの事象のことをイベント（event）といい、 イベントが発生したときに行う処理のことをイベントハンドラ（event handler）と呼びます。

*2:「<!--」はコメントとして無視される場合があり、「<」「&」は、実体参照で記述する必要があります。そのため、XHTMLでJavaScriptを使うときは、Character DATA（文字データ）として記述します。CDATAとして定義されている区間では、&（文字実体参照）やa（数値文字参照）等が解釈されず、そのままの表記で扱われます。