script要素

概要

script要素はスクリプトを記述するための要素です。

要素の内容

script要素の内容はスクリプトです。HTMLではCDATA、XHTMLでは#PCDATAと定義されています。

属性

固有属性

非推奨とされている属性はHTML4.01 Transitional/Frameset、XHTML1.0 Transitional/Framesetのみで利用できます。

属性名 属性値 説明
type ContentType 必須属性。このスクリプトの言語を指定します。例えば、Javascriptであれば"text/javascript"を指定します。この属性は必ず指定する必要があります。
src URI 外部スクリプトのURIを指定できます。
charset Charset src属性で指定された外部スクリプトの文字コードを指定できます。
defer (defer) このスクリプトが何も出力しないことを明示できます。HTMLの場合は単にdeferとだけ記述し、XHTMLの場合はdefer="defer"とします。この属性が指定されている場合、ブラウザはスクリプトの実行結果を待たずにページのレンダリング(描画)を継続できます。
event CDATA HTMLのみ。将来の拡張に備えて予約されている属性です。DTDで定義されているだけで、利用できません。
for URI HTMLのみ。将来の拡張に備えて予約されている属性です。DTDで定義されているだけで、利用できません。
xml:space preserve XHTMLのみ。要素内の空白文字の処理に関する属性です。値は"preserve"に固定されていて変更することはできません。
language CDATA 非推奨属性。このスクリプトの言語を指定できます。スクリプト言語はtype属性で明示するので、この属性は非推奨とされています。

汎用属性

id(XHTML1.0のみ), xmlns(XHTML1.1のみ)

説明

script要素はスクリプトを記述するための要素です。要素の内容としてスクリプトを記述するか、src属性を用いて外部スクリプトを指定することができます(src属性がある場合は、外部スクリプトが優先され、要素の内容は無視されます)。

<!-- 要素内にスクリプトを記述 -->
<script type="text/javascript">
  // ここにスクリプトを記述
</script>
<!-- 外部スクリプト(例えばscript.js)の読み込み -->
<script type="text/javascript" src="script.js"></script>

古いブラウザへの対処

script要素をサポートしているブラウザではscript要素の内容が表示されることはありません。しかし、script要素を知らない古いブラウザの場合、script要素の内容をそのまま表示してしまう可能性があります。そこで、HTMLではscript要素の内容をコメントアウトします(スクリプトの誤作動を防ぐため、コメント終了の-->をスクリプト言語の形式でコメントアウトします)。


<script type="text/javascript">
<!--
  // ここにスクリプトを記述
//-->
</script>

ただし、XHTMLではこの方法を用いることはできません(後述)。

XHTMLでの注意点

XHTMLではscript要素の内容がCDATAから#PCDATAに変更されました。そのため、XHTMLではscript要素内であっても"<"はタグの始まり、"&"は実体参照の始まりとして認識されることになります。これらの文字は、それぞれ"&lt;"、"&amp;"とする必要があります。

ただし、従来のブラウザはscript要素の内容をCDATAとして扱います。そのため、"&lt;"といった表記をするとスクリプトが正常に作動しなくなる可能性があります。この問題はスクリプトを外部スクリプトにするか(#PCDATAとして処理されるのは要素の内容だけです)、要素の内容をCDATAセクションにすることで解決します。

<!-- CDATAセクションを用いる例 -->
<script type="text/javascript">
<![CDATA[
  // ここにスクリプトを記述
//]]>

もう一つ注意する必要があるのは、コメント(<!-- ... -->)もコメントとして扱われるということです。HTMLでは古いブラウザへの対処としてscript要素の内容をコメントアウトしました。しかし、XHTMLの場合、コメントアウトすると本当にコメントとしてブラウザに無視される可能性があります(コメントとして無視するのが正しい挙動)。古いブラウザを無視して要素の内容をコメントアウトしないのも一つの手ですが、"<"や"&"といった文字の問題もあるため、XHTMLではスクリプトをすべて外部スクリプトにするのが無難です。

関連要素