script要素
Updated / Published
script
要素(script statements)はページ内にクラインアントサイド・スクリプト(client-side script)を組み込みます。head
要素内、または body
要素内のどちらに何度でも定義可能です。src
属性でスクリプトファイルを外部から参照させることも、また直接 script
要素内にスクリプトコードを書くこともできます。UA はスクリプトの種類に応じたスクリプトエンジンにそのスクリプト情報を受け渡し、返ってきた結果を出力します。
HTML では script
要素の内容は解析されない文字データ(Character DATA)だったのですが、XHTML では script
要素の内容は解析対象となる文字データ (Processed Character DATA) になったため、マークアップ区切り文字は意味を持ち、文字実体参照などは展開されます。たとえば、script
要素内に直接スクリプトコードを記述する場合、HTML4 では script
要素に対応していない古い UA(script
要素には Netscape Navigater 2.0, Internet Explorer 3.0 より対応)のための後方互換として "<!-- -->
" のコメント宣言を使うことが常套手段とされていましたが、現在では script
要素に対応していないような環境で閲覧しているユーザは皆無なので、"<!-- -->
" を使ってコメント・アウトする必要はありません。
XHTML では "<!-- -->
" を使ってスクリプトコードをコメント・アウトしてしまうと、現行の主要ブラウザにおいてはありませんが、本当に仕様通りに解釈するUAであればコメントとみなして、スクリプトは実行されないことになります。XHTML では script
要素内に記述するスクリプトコードは "<![CDATA[ ]>
" の CDATAセクションを使うことで解析されない文字データ(Character DATA)にすることが可能ですが、古いUAへの互換性への配慮として、CDATAセクションを使用するXHTML では script
要素に直接スクリプトコードを記述するのではなく、別にスクリプトコードを記述したファイルを用意して外部から参照させる手法で用いることが推奨されています。
なお、スクリプトで重要な役割を提供している場合は、スクリプトに対応していない、またはスクリプトの設定がオフになっているなど、スクリプトの実行が不可能な環境のために noscript
要素でスクリプトの表現している情報の代替となる内容を提供するようにします。
スクリプト言語には、主に JavaScript が使用されています。JavaScript というと JavaScript の標準規格であるECMA が策定した ECMAScript のことを指します。そして、ECMAScript に Microsoft社が自社技術を追加して拡張した Windowsスクリプト言語に JScriptや 、またMicrosoft社が同社のブラウザである Internet Explorer 上でのみ動作する独自開発言語に VBScript などがあります。
script
要素を body
要素内で使う場合、要素型は body
要素の子孫要素としてインライン要素に分類されますが、body
要素やブロックレベル要素のみを内包できる要素の直接の子要素として、その直下に置くこともできます。
- バージョン
- HTML4.01(S,T,F)
- XHTML1.0(S,T,F)
- XHTML1.1
- 要素型
- 開始タグ
- 必須
- 終了タグ
- 必須
- 非推奨
- -
- 内容モデル
- スクリプト
charset属性
- バージョン
- HTML4.01(S,T,F)
- XHTML1.0(S,T,F)
- XHTML1.1
- 指定要素
- script
- 必須
- -
- 非推奨
- -
- 属性値
- 文字コード
スクリプトコードが記述されているファイルの文字コード(符号化方法)を指定します。スクリプトコードを記述したファイルを外部から参照させる場合にのみ有効です。たとえば、検索エンジンのキャッシュなどではスクリプトコードを記述したファイルが異なる文字コードで記述されていたりすると、内容を生成するスクリプトを使っている場合に出力された文字列が文字化けを起こすため、積極的に指定しておいた方が良いでしょう。日本語の文字コードには "Shift_JIS
", "EUC-JP
", "ISO-2022-JP
", "UTF-8
" などがあります。文字コードは半角アルファベットの大文字・小文字が区別されません(case-insensitive)。
defer属性
- バージョン
- HTML4.01(S,T,F)
- XHTML1.0(S,T,F)
- XHTML1.1
- 指定要素
- script
- 必須
- -
- 非推奨
- -
- 属性値
- defer
- defer="defer"(XHTML)
スクリプトに内容生成を含まないことを宣言します(内容生成とは、JavaScriptではdocument
オブジェクトに write
メソッドを使うことで文書内に指定した内容を書き出すことができます)。
UA は上から順にソースコードを解析していくため、たとえば、head
要素やbody
要素の途中に膨大なスクリプトが存在する場合、defer
属性を指定することで、UA はそのスクリプトコード部分の解釈を後回しにして、以降のbody
要素の内容を先に解析することで文書全体が表示され、結果的にレンダリング速度の体感的な向上が期待できます。
HTML4.01 では defer
、XHTML では属性値を省略できないので defer="defer"
と記述します。
仕様書の「スクリプトに内容生成を含まないことを宣言する」という解説は不親切であり、JavaScriptのdocument.write
は即座に文書への書き込みを行うため、defer
属性を入れて解析を後回しにしているのに、document.write
を使うことはJavaScriptの仕様としてできないというニュアンスとも読み取れます。
defer
属性はもともとはInternet Explorer4.0で独自に採用された機能ですが、HTML4より正式に仕様としても採用・公認され、現在ではすべての主要ブラウザが対応しています(Operaは旧Presto版Operaは非サポート、Blink版Operaからサポート)。すべての主要ブラウザが対応していることから、DOMContentLoaded
(IEは9から対応)やwindow.onload
よりもパフォーマンスの良いスクリプトの実行方法として活用がなされています。そのため、文書のレンダリングを終えてから実行させる関数のみを含んでいるスクリプトファイル(HTML5ではsrc
属性が与えられている場合に限り指定できる)であることを宣言するというのが活用目的にあったわかりやすいdefer
属性の解釈になるかと思います。
参考:script要素のdefer属性でパフォーマンスを向上-スマートフォンなどのシェア状況なども考慮した使い方を掲載しています。
language属性
- バージョン
- HTML4.01(T,F)
- XHTML1.0(T,F)
- 指定要素
- script
- 必須
- -
- 非推奨
- 非推奨
- HTML4.01 strict 廃止
- XHTML1.0 strict 廃止
- XHTML1.1 廃止
- 属性値
- スクリプト言語バージョン
使用するスクリプト言語のバージョンを指定します(例:language="JavaScript1.2"
)。値はスクリプト言語の識別子ですが標準規格でないため、type
属性を指定することが推奨されています。たとえば、JavaScript の言語バージョンには次のようなものがあります。言語バージョンは半角アルファベットの大文字・小文字が区別されません(case-insensitive)。
- JScript
- 対応する最新バージョンとして解釈(対応:Internet Explorer 3.0 以上)
- JavaScript
- 対応する最新バージョンとして解釈(対応:Netscape Navigator 2.0 以上, Internet Explorer 3.0 以上)
- JavaScript1.1
- バージョン1.1(対応:Netscape Navigator 3.0 以上)
- JavaScript1.2
- バージョン1.2(対応:Netscape Navigator 4.0 以上, Internet Explorer 4.0 以上)
- JavaScript1.3
- バージョン1.3 (対応:Netscape Navigator 4.06 以上, Internet Explorer 5.0 以上)
- JavaScript1.5
- バージョン1.5 (対応:Netscape 6.0 以上, Firefox 1.0 以上)
- JavaScript1.6
- バージョン1.6 (対応:Firefox 1.5 以上)
- JavaScript1.7
- バージョン1.7 (対応:Firefox 2.0 以上)
UA が搭載しているスクリプトエンジンの振る舞いは、スクリプト言語バージョンに依存します。なお、言語バージョンの指定が省略されても、どの UA も JavaScript のスクリプトコードとして認識し、言語バージョンがない場合は自動的に最新バージョンとして振舞います。ただし、言語バージョンを指定しても UA によっては正しく判別しない場合があります。また、HTML4 より language
属性の指定は標準規格から外されたため、スクリプトを利用するには type
属性を指定する必要があります。
なお、HTML5では、language
属性は廃止され、省略があっても、どの UA も JavaScript のスクリプトコードとして認識することから、スクリプト言語に JavaScript を使用する場合は、type
属性の指定も不要(省略可能)になりました。
src属性
- バージョン
- HTML4.01(S,T,F)
- XHTML1.0(S,T,F)
- XHTML1.1
- 指定要素
- script
- 必須
- -
- 非推奨
- -
- 属性値
- URI
外部から参照させるスクリプトコードを記述したファイルの所在を URI で指定します。外部からの参照には Netscape Navigator 3.0, Internet Explorer 4.0 のバージョンより対応しています。
type属性
- バージョン
- HTML4.01(S,T,F)
- XHTML1.0(S,T,F)
- XHTML1.1
- 指定要素
- script
- 必須
- 必須属性
- 非推奨
- -
- 属性値
- MIME
スクリプト言語の種類を MIMEで指定します。script
要素の必須属性です。UA がスクリプト情報を正しく解釈するための情報となります。JavaScript を使用する場合は "text/javascript
"、JScript を使用する場合は "text/jscript
"、VBScript を使用する場合は "text/vbscript
" の MIMEをそれぞれ指定します。
なお、HTML5では、省略があっても、どの UA も JavaScript のスクリプトコードとして認識することから、スクリプト言語に JavaScript を使用する場合は、type
属性の指定も不要(省略可能)になりました。