この記事はHTML 4/XHTML 1での<script>要素についての解説記事です。
HTML 5での<script>要素に関する解説記事は、HTML 5 リファレンス内のHTML 5での<script>要素をご覧ください。
クライアントサイドスクリプトである<script>要素についての解説です。
<script>要素は、クライアントサイドスクリプトです。
クライアントサイドスクリプト(通常はJAVAスクリプト)で書かれたコードを<script>要素の内容として記述したり、後述のsrc属性で別に用意しているスクリプトのコードをリンクしたりします。
クライアントサイドスクリプトに対応している環境であれば、これらのスクリプトが実行される事となります。
<script>要素は、以下の文書型で利用出来ます。
<script>要素はスクリプティングモジュールに属します。
<script>要素はインライン要素です。
但し、<body>要素や<blockquote>要素など、インライン要素を直下に記述出来ない要素の直下に記述する事も出来ます。
また、<script>要素は<head>要素内に書く事も出来ます。
<script>要素の内容は、実行すべきスクリプトとなります。
HTML 4.01では、以下のように内容を注釈宣言にしても、スクリプトは認識されます。
<script type="text/javascript"><!--(スクリプト)// --></script>
アイドルをモデルにした制作者のオリジナルキャラクタを用いた作品の一例// はJAVAスクリプトの一行注釈です。これが無いと注釈宣言の終わりの --> をスクリプトの一部と認識し文法エラーを惹き起こしてしまいます。しかしながら、XHTML 1.0及びXHTML 1.1では、内容を注釈宣言にした場合、内容となっているスクリプトは認識されなくなります。
XHTMLで問題が起こらないようにするには、以下のように注釈宣言の代わりに<![CDATA[ ]]>マーク宣言を行う必要があります。
<script type="text/javascript"><![CDATA[//(スクリプト)//]]></script>
]]> をスクリプト中に含める事は出来ません。<script>要素には、以下の属性が定められております。
実行すべきスクリプトのMIMEタイプを指定します。
JAVAスクリプトの場合はtype="text/javascript"属性となります。
application/x-javascript が仮のものとして使われております)、HTMLでは text/javascript と記述する事となっております。文書外のスクリプトを読み込んで実行する場合は、src属性で実行したいスクリプトのURIを指定します。
この場合、<script>要素の内容は無視されます。
src属性で読み込むスクリプトの文字コードを指定します。
例えばシフトJISコードならcharset="shift_jis"属性となります。
実行するスクリプトがHTMLを書き出さない場合に指定する事が出来ます。
尚、XHTMLでは属性値だけの記述は出来ないため、defer="defer"属性を与えます。
実行するスクリプト言語(とそのヴァージョン)を指定します。
JAVAスクリプトならlanguage="javascirpt"属性となります。
また、かつてはJAVAスクリプトのヴァージョンを含めて指定する事で、当該ヴァージョンのスクリプトに対応していない旧ヴァージョンのネットスケープでスクリプトエラーが出る事を回避すると言う遣い方もありましたが、現在では他ブラウザでも独自にJAVAスクリプト互換言語を実装している事などから余り意味はないものとなりました。
尚、src属性を指定した場合にはlanguage属性でのヴァージョン指定は無視されるようです。
クライアントサイドスクリプトは多くのグラフィカルなユーザエージェントが実装しておりますが、必須の機能ではありません。
つまり、クライアントサイドスクリプトを実行出来ない環境があり得ると言う事です。
スクリプト実行の可否がサイトの利用に大きな影響を与えない場合ならともかく、そうでない場合、すなわちスクリプトが実行できないと何も出来なくなるような場合は<noscript>要素で代替となるHTMLを記述する必要があります。
本来、HTML文書に記述される以上、スクリプト内の <, >, & などは全て文字参照で書かれるべきです。
HTML 4.01では余り問題にされませんが、ユーザエージェントの中にはスクリプト中の < 及び > をそれぞれHTMLのタグの始まり、注釈宣言の終わりと誤認するものがあるなど、スクリプトの実行で問題が生じる事があります。
またXHTMLでは<script>要素の内容を<![CDATA[ ]]>マーク宣言にしない場合、 <, >, & などを文字参照にしないとXMLパースエラーになってしまいます。
一方で、旧式のユーザエージェントには<![CDATA[ ]]>マーク宣言が正常に認識されない場合もあります。
このように、HTML文書中にスクリプトを記述するのは実は非常に問題が多いのです。
スクリプトの保守を容易にするためにも、外部から呼ぶようにしましょう。
ネットスケープ 4.xでは、CSSを利用している文書で<script>要素の直後から余白などのスタイルが崩れる事があります。
好ましくはありませんが、テーブルで囲むと崩れなくなります。
ポップアップメニューをJAVAスクリプトで表示させる場合の記述です。
ここでは、<noscript>要素でポップアップメニューが表示出来ない環境向けの代替メニューも記述しております。
<div class="menu"><script type="text/javascript" src="popUpMenu.js"></script><noscript><h2>メニュー</h2><ul><li><a rel="next" href="about.html">このサイトについて</a></li>…<li><a rel="appendix" href="http://…/bbs.cgi">掲示板</a></li><li><a rel="bookmark" href="link.html">リンク</a></li></ul></noscript></div>
