script要素
概要
HTML文章中にスクリプトを埋め込む。大抵の場合JavaScriptが埋め込まれ、埋め込み方式はこの要素の内容として記述するか、外部ファイルから読み込むかのどちらかになる。
スクリプトに対応しているブラウザでは、スクリプトのコードを要素の内容としてそのまま書いて構わない。未対応ブラウザでは内容を表示してしまう恐れがあるため、コードをコメントで囲うのが通例になっている(コメント終了前の//はJavaScriptのコメント記号)。ただし、現在ではそのようなブラウザはほとんど存在しないため、実用上というよりも慣習に近い状態になっている。
XHTMLではブラウザの対応の如何によらず、HTMLで扱うデータとして取り扱われるため<![CDATA[]]>を使って表示を禁止しなければいけない。しかし、こちらは逆に対応しているブラウザが少なく、更にXHTMLではコメントをスクリプトとして処理せず切り捨ててしまう可能性もあるため、こちらでは実用上、外部ファイルとして読み込むことが推奨される。
JavaScriptを直接記述する際、無難な書き方はHTML4.01とXHTMLではそれぞれ以下のようになる。XHTMLに関して言えば最も無難なのは外部ファイルである。
- HTML4.01
-
<script type="text/javascript"> <!-- ...JavaScriptコード //--> </script>
- XHTML
-
<script type="text/javascript"> <!--<![CDATA[ ...JavaScriptコード //]]>--> </script>
| バージョン | HTML4.01(STF),XHTML1.0(STF),XHTML1.1 |
|---|---|
| 開始/終了タグ | 必須/必須 |
| 要素種 | インライン |
| 非推奨 | NO |
| 必須 | -- |
| 内容となるもの | スクリプト |
用例
head属性内に外部ファイルとしてスクリプトを読み込み、body要素にもHTMLを書き出すスクリプトを書いている。さらにスクリプトが動作しない環境向けのnoscript要素を記述している。
head要素部分。スクリプトをコメントで囲うのはHTMLとして処理される危険を取り除くものなので、元々そのようなことが起こらない外部スクリプトはコメントで囲わなくても良い。
<script charset="Shift_JIS" type="text/javascript" src="./frame_event.js"></script>
body要素部分。
<script type="text/javascript">
<!--
var i,evTmp,syTmp;
var txt_list = ["script","div","span"];
var box_obj = new Array();
document.write('<div id="textbox" style="width:300px;text-align:center;"> </div>');
document.write('<div style="height:100px;position:relative;">');
for(i=0; i<3; i++)
{
evTmp = 'onmouseover="isOver('+i+',1)" onmouseout="isOver('+i+',0)" onclick="tJump('+i+')"';
document.write('<span id="box0',i,'" title="',txt_list[i],'要素" ',evTmp,' >■</span>');
box_obj[i] = document.getElementById("box0"+i);
syTmp = box_obj[i].style;
syTmp.cursor = "pointer";syTmp.color = "#999";
syTmp.fontSize = "20px";syTmp.padding = "40px";
syTmp.position = "absolute";syTmp.top = "0px";syTmp.left = 100*i+"px";
}
box_obj[4] = document.getElementById("textbox");
document.writeln('</div>');
Frame();
//-->
</script>
<noscript>
<p><a href="../tag_script.html">script要素</a>|
<a href="../tag_div.html">div要素</a>|
<a href="../span.html">span要素</a></p>
</noscript>
関連要素
属性
- charset
-
src属性で指定された外部スクリプトの文字コードを指定する。
属性仕様 バージョン HTML4.01(STF),XHTML1.0(STF),XHTML1.1 対象要素 script 非推奨 NO 必須 -- 値 文字コード - defer
-
スクリプトがページ内容を生成しないことを明示する。通常スクリプトは実行されながら読み込まれるが、この属性を指定するとスクリプトを実行せずに読み込むようになる。
論理属性のため、記述はdefer又はdefer="defer"とする。
属性仕様 バージョン HTML4.01(STF),XHTML1.0(STF),XHTML1.1 対象要素 script 非推奨 NO 必須 -- 値 defer - language
-
スクリプトの言語名を指定する。非推奨属性であり、言語の種類の指定は必須属性のtype属性を使用すべき。
属性仕様 バージョン HTML4.01(TF),XHTML1.0(TF) 対象要素 script 非推奨 YES 必須 -- 値 文字列(大小区別なし) - src
-
外部スクリプトファイルを指定し、スクリプトを読み込む。このときscript要素は空で良い。
script要素の内容をコメントで囲む理由は、前述の通り未対応ブラウザが内容を表示しないための処置である。したがって、対応していなければ外部から読み込まれることもない外部スクリプトは、コメントで囲まなくても良い。
属性仕様 バージョン HTML4.01(STF),XHTML1.0(STF),XHTML1.1 対象要素 script 非推奨 NO 必須 -- 値 URL - type
-
スクリプト言語の種類をMIMEタイプで指定する、必須属性。
属性仕様 バージョン HTML4.01(STF),XHTML1.0(STF),XHTML1.1 対象要素 script 非推奨 NO 必須 YES 値 MIMEタイプ - その他