Section 8 : スクリプティング(2)

 スクリプトを記述するための下準備ができたところで,ここではその記述方法についてみてみよう。

スクリプトの記述方法

 <SCRIPT>...</SCRIPT> にスクリプトを記述したとしよう。さて,この部分はスクリプトに対応していないブラウザにはどう見えるだろうか? <SCRIPT> という要素を知らないブラウザは <SCRIPT> のタグがあるのを無視してその中身を表示させてしまう。したがって,スクリプトもスタイルシート同様に HTML のコメントアウト <!-- ... --> で囲んでしまう。

 このとき注意しなくてはならないのは,スクリプト言語は <!-- を無視するが,--> は無視しないで実行するおそれがあるということ(当然,エラーが出るだろう)。だから,--> はスクリプト言語のコメントアウトをつけておく。これらを考えると,代表的な 3 種類のスクリプト言語を書く場合の定型は次のようになるはずである。

 まず,JavaScript。

<SCRIPT TYPE="text/javascript">
<!--
  ...(スクリプトを記述)...
// -->
</SCRIPT>

 次に,VBScript。

<SCRIPT TYPE="text/vbscript">
<!--
  ...(スクリプトを記述)...
' -->
</SCRIPT>

 そして,Tcl。

<SCRIPT TYPE="text/tcl">
<!--
  ...(スクリプトを記述)...
# -->
</SCRIPT>

 さらに,スクリプト中に“</”という文字の並びが(とくに文書をダイナミックに書き換えるときに)現れることがあるが,この並びをブラウザが見つけたとき“ここでスクリプトは終わりだ”と早合点するおそれがある。したがって,文書を書き換える命令の中でこの文字の並びが現れたときは,次のように対処しなくてはならない。

JavaScript・Tcl
円記号(バックスラッシュ)を使ってエスケープする。“<\/”のように。
VBScript
chr 関数を使ってエスケープする。半角スラッシュは chr(47) である。

 また,外部のスクリプトを参照する場合,たとえばそれが JavaScript で書かれている場合は次のようにする。

<SCRIPT TYPE="text/javascript" SRC="sample.js">
</SCRIPT>

 このチュートリアルは HTML のものであるから,それぞれのスクリプト言語について細かく扱うことはしない。JavaScript については Appendix A で簡単に触れてはおくが,それ以上のこと,またはほかの言語については WWW に多くの情報が公開されているのでそちらを参考にされたい。また,さらなる理解のためにも,Netscape Communications 社Microsoft 社のドキュメントを,英語ではあるが,一読することをおすすめする。

 それでは,能書きばかりでは飽きてしまうだろうから,ここでひじょうに簡単なスクリプトを見てみよう。このスクリプトは,あなたがこのページを開いた日時を表示するものである。

<SCRIPT TYPE="text/javascript">
<!--
  var today = new Date();
  document.write("<P>You've accessed this page : ", today.toLocaleString(), ".<\/P>");
// -->
</SCRIPT>
<NOSCRIPT>
  <P>JavaScript 対応ブラウザではアクセス日時が表示されます。</P>
</NOSCRIPT>

 通常の文書では,アクセス日時で変わらない。また,コメントアウトや,“</”を円記号を使ってエスケープしてしている点にも注目していただきたい。

 互換性についてふれておくと,同じ JavaScript でも,Netscape Navigator と Internet Explorer で若干異なる動作をする場合があるので注意が必要である。

スクリプトから HTML の参照

 スクリプトが HTML 文書中の要素を参照したりすることも出てくる(たとえば,フォームに書かれた内容が有効なものであるかサーバに送る前にチェックする,など)。この場合,参照に用いるのは Take off with CSS の Section 5 で簡単に説明した ID 属性や,NAME 属性である。すなわち,スクリプトによって参照・コントロールしたい文書中の要素には,前もって ID や名前をつけておく必要がある。

 ちなみに,ID 属性と NAME 属性が同時に指定されていた場合には,NAME 属性のほうが優先権を持つ。

 当然ながら,参照された要素に対してできる操作は,スクリプト言語の仕様や,その要素の性質によって決まってくる。

 ここで,<IMG> の NAME 属性を紹介しておく。これは,HTML 4.01 で,後方互換性のために導入されたものである。スクリプトは,この NAME 属性の値を用いて,画像の要素をコントロールすることができる。

<IMG> の NAME 属性
属性 解説
NAME 文字列 その要素に与える,一意な名前。