script要素 スクリプト (script statements)

 
文書ヘッダ | インライン要素
ホーム > HTML Note > script要素
H3- ie3- N2-

説明

<script type="...">-</script> 開始タグ:必須 終了タグ:必須
script要素は、JavaScriptやVBScriptなどのスクリプトを記述するために用います。スクリプトはscript要素内に配置するか、src属性を使用して外部ファイルに配置することもできます。

script要素に対応していないブラウザにスクリプト内容が表示されるのを避けるために、JavaScriptではスクリプトを[<!--]と[//-->]で、VBScriptでは[<!--]と[' -->]で、Tclでは[<!--]と[# -->]で囲んで記述します。
 

属性 (W3C)

<scriptH3- ie3- N2-
charset="文字セット" H4- N7-
文字セット
"SHIFT_JIS" "EUC-JP" "ISO-2022-JP" "UTF-8"など。
type="MIMEタイプ" H4- ie4- N4-
[必須] MIMEタイプ
"text/javascript"、"text/vbscript"など。
language="スクリプト名" (非推奨) H4-x1 ie3- N2-
スクリプト名
src="URI" H4- ie3- N3-
外部ファイルURI  参照
defer H4- ie4-
文書中にスクリプトによる表示がないことを明示
この属性を指定することで、表示が速くなります。
event="CDATA" H4- ie4-
将来の利用に備えるための予約
for="URI" H4- ie4-
将来の利用に備えるための予約  参照
>%Script;</script>

ブラウザ独自の属性 (ie N)

archive="" ie4-
未調査
xml:lang x1-
未調査

文書中に記述する例

<script type="text/javascript"><!--
document.write((new Date()));
//--></script>
 

外部ファイルの使用

メモ帳などのテキストエディタで作成したfoo.jsというファイルに下記のような内容を書き込みます。
document.write((new Date()));

外部ファイルfoo.jsを呼び出すには、下記のように記述します。
<script src="foo.js" type="text/javascript"></script>
 
 

XHTMLにおけるscript要素の内容の記述方法



scirpt要素の要素内容は、HTML4.01まででは「CDATA」、XHTMLでは「#PCDATA」として定義されています。つまり、XHTMLでは、[<]はHTMLタグの開始、[&]は実体参照の開始と認識されてしまうのです。HTML4.01以前の場合には、script要素の内容全体をコメント開始マーカー[<!--]、Javascriptコメントマーカー[//]、コメント終了マーカー[-->]で囲ってコメントにする慣習がありましたが、XHTMLの場合には文字通りコメントとして認識され、スクリプトが無視されてしまう可能性があります。

上記問題の対応策として一番簡単なのが、外部ファイルを利用する方法です。こうすることで過去のブラウザでも問題なく利用できます。
<script src="foo.js" type="text/javascript"></script>

type属性に対応していない古いブラウザに配慮し、langage属性を指定するのもよいでしょう。

また、SGMLでは特定の範囲を"<![CDATA["と"]]>"で囲むことによって「#PCDATA」を「CDATA」に変更できる仕様となっています。XHTMLで推奨されている1つの方法ですが、ブラウザによってはサポートされていない場合もあります。
<script type="text/javascript">
<![CDATA[
...スクリプト...
]]>
</script>
 
 

日本語の日時のスクリプト




<script type="text/javascript"><!--
var y,d,w,c;
w = new Array("日", "月", "火","水","木","金","土");
d = new Date();
y = d.getFullYear() ? d.getFullYear() : d.getYear();
if(y>1980){} else if(y<100){y = y + 1900;} else if(y<1980) {y = y + 100;}
c = y + "年" + (d.getMonth()+1) + "月" + d.getDate() + "日(" + w[d.getDay()] + ") " + d.getHours() + "時" + d.getMinutes() + "分";
document.write(c);
//--></script>
 
関連要素: head > title | isindex | base | meta | style | script | noscript | link | object
トップページ HTML Note ページトップ
 2003/07/11発行 2008/01/01更新