script要素
| 要素名 | バージョン | 開始タグ | 終了タグ | 分類/親 | 中身 |
|---|---|---|---|---|---|
| script | 4.0, X1.0, X1.1 | 必須 | 必須 | body, blockquote, form, %head.misc;, %special; | CDATA |
| 属性名 | バージョン | 属性値 | 既定値 | 備考 |
|---|---|---|---|---|
| type | 4.0, X1.0, X1.1 | %ContentType; | #REQUIRED | content type of script language |
| src | 4.0, X1.0, X1.1 | %URI; | #IMPLIED | URI for an external script |
| charset | 4.0, X1.0, X1.1 | %Charset; | #IMPLIED | char encoding of linked resource |
| defer | 4.0, X1.0 | (defer) | #IMPLIED | UA may defer execution of script |
| language | (4.0), (X1.0) | %Text; | #IMPLIED | predefined script language name |
| event | CDATA | #IMPLIED | reserved for possible future use | |
| for | CDATA | #IMPLIED | reserved for possible future use |
scriptの解説
JavaScript などのスクリプト言語を記述します。script要素内にスクリプトを直接記述することもできますし、src属性を指定して外部のファイルから読み込むこともできます。
いずれの場合も type属性が必須です。type="text/javascript" のように言語の MIME タイプを指定します。language="JavaScript" がお馴染みかも知れませんが、こちらの方法は非推奨となっています。言語名の標準規格ができていないことなどが理由です。
defer属性を指定すると、スクリプトの実行を後回しにします。たとえば、
<head>
<script type="text/javascript">
function func(){
……うんざりするほど長大な関数定義……
}
</script>
</head>
<body>
<p>長々とした文章……</p>
<button onclick="func()">
などという構造になっていたとき、読み込む端から JavaScript を解釈していたのでは文書の表示が後回しになってしまいます。そんなとき、defer属性を指定しておくと、先に文書を表示しておき、ユーザーがそれを読んでいる間にスクリプトの関数定義を解釈することができます。ただし、defer属性を指定したスクリプトの中で document.write のように文書そのものを書き換える文を実行することはできません。おそらくスクリプトエラーになることでしょう。
HTML4 では、この要素の中身は CDATA です。<!-- --> を書いてもその中は無視されませんし、& を書いてもそのままの形で解釈されます。唯一SGML 的に扱われるのは終了タグ開始区切り子 </ で、これは SCRIPT 要素の終了タグと解釈されます (SCRIPT の終了タグは </SCRIPT> とは限らないことに注意。短縮タグ機構に従って </> と略記されているかも知れません)。
言うまでもありませんが、スクリプトが実行できない環境や、スクリプトを無効にしているユーザが存在します。スクリプト無効環境で代替内容を出したい場合には、noscript要素を使うことができます。
余談ですが、この要素の登場は意外に遅く、HTML4 で初登場です。それまではブラウザ独自拡張としての運用でした。ただし HTML3.2 では script という名前の予約だけがされていて、これを勘違いしたのか、HTML3.2 から script要素があったかのような解説をしている本もありました。
XHTMLでの注意
XMLでは要素の内容モデルをCDATAとすることができないため、XHTMLでは、script要素の内容モデルも#PCDATAとなっています。そのため、「<」などをそのまま書くとマークとして認知されてしまいます。
それを回避するためには
<script type="text/javascipt">
//<![CDATA[
……「<」を含むスクリプト……
//]]>
</script>
ただし、CDATA区間では「]]>」という文字列がマークとして認知されてしまいます。これをエスケープする方法は存在しませんので、「<」も「]]>」も出現する可能性がある場合には非常に面倒なことになります。
「<」が含まれていない事が確実であれば、CDATA区間なしにそのまま書いてしまっても良いでしょう。ただし、前述の通り、#PCDATAではコメントを認知することに注意する必要があります。
また、script要素を知らない古いブラウザのために、script要素の中身を <!-- --> で括るということがよく行われますが、#PCDATAではそれが本当にコメントとみなされ、スクリプトエンジンに渡されなくなるかもしれません。
※個人的には、もはや script要素の中身を <!-- --> で括る必要はないと思っていますが……。
何かと面倒ですので、XHTMLではscript要素の中身にスクリプトを直接記述することは避け、外部ファイルをsrc属性で参照するようにした方が賢明かもしれません。
- 「script要素」にコメントを書く
