ばけらの HTML リファレンス(未完成)

bakera.jp > 鳩丸リファレンス > ばけらの HTML リファレンス(未完成) > 要素一覧 > script要素

script要素

要素名バージョン開始タグ終了タグ分類/親中身
script4.0, X1.0, X1.1必須必須body, blockquote, form, %head.misc;, %special;CDATA
属性名バージョン属性値既定値備考
type4.0, X1.0, X1.1%ContentType;#REQUIREDcontent type of script language
src4.0, X1.0, X1.1%URI;#IMPLIEDURI for an external script
charset4.0, X1.0, X1.1%Charset;#IMPLIEDchar encoding of linked resource
defer4.0, X1.0(defer)#IMPLIEDUA may defer execution of script
language(4.0), (X1.0)%Text;#IMPLIEDpredefined script language name
eventCDATA#IMPLIEDreserved for possible future use
forCDATA#IMPLIEDreserved 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となっています。そのため、「<」などをそのまま書くとマークとして認知されてしまいます。

それを回避するためにはCDATA区間を使用すれば良いのですが、ブラウザがXHTMLを理解せずにHTMLとしてパースした場合、マーク区間の開始・終了の区切り子がそのままスクリプトエンジンに渡ってエラーとなってしまいます。互換性を考えると、こんなふうにする必要があります。

<script type="text/javascipt">
//<![CDATA[
……「<」を含むスクリプト……
//]]>
</script>

ただし、CDATA区間では「]]>」という文字列がマークとして認知されてしまいます。これをエスケープする方法は存在しませんので、「<」も「]]>」も出現する可能性がある場合には非常に面倒なことになります。

「<」が含まれていない事が確実であれば、CDATA区間なしにそのまま書いてしまっても良いでしょう。ただし、前述の通り、#PCDATAではコメントを認知することに注意する必要があります。

また、script要素を知らない古いブラウザのために、script要素の中身を <!-- --> で括るということがよく行われますが、#PCDATAではそれが本当にコメントとみなされ、スクリプトエンジンに渡されなくなるかもしれません。

※個人的には、もはや script要素の中身を <!-- --> で括る必要はないと思っていますが……。

何かと面倒ですので、XHTMLではscript要素の中身にスクリプトを直接記述することは避け、外部ファイルをsrc属性で参照するようにした方が賢明かもしれません。

人気のページ

最近の日記

関わった本など

デザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチコーディングWebアクセシビリティ - WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション体系的に学ぶ 安全なWebアプリケーションの作り方 脆弱性が生まれる原理と対策の実践ウェブの仕事力が上がる標準ガイドブック 5 WebプログラミングWeb Site Expert #13Dreamweaver プロフェッショナル・スタイル [CS3対応] (Style for professional)

その他サイト