スクリプトは,ページが読まれたときに動作するばかりでなく,ユーザの反応にしたがって動作するインタラクティビティを提供する。
<SCRIPT> に書かれたスクリプトは,関数(プロシージャ)として宣言されただけのものでない限り,ページが読まれたときに 1 度だけ実行されるが,イベント属性を用いるとユーザの反応に応じてスクリプトが実行され,インタラクティブなページを作成することができる。
スクリプト処理では,ユーザの反応はすべてイベントという形に集約される。たとえば,あるところでマウスのボタンが押されたとか,マウスポインタがどう動いたとかである。そういったイベントに対するスクリプトはすべてイベント属性として記述される。
基本的なイベント属性は,ほとんどの要素が持っている。
属性 | 値 | 解説 |
---|---|---|
onClick | スクリプト | 要素がクリックされたときに実行される。 |
onDblClick | スクリプト | 要素がダブルクリックされたときに実行される。 |
onMouseDown | スクリプト | 要素内でマウスボタンが押下された瞬間に実行される。 |
onMouseUp | スクリプト | 要素内でマウスボタンがはなされた瞬間に実行される。 |
onMouseOver | スクリプト | マウスポインタが要素内へ入ってきたときに実行される。 |
onMouseMove | スクリプト | マウスポインタが要素内で動いたときに実行される。 |
onMouseOut | スクリプト | マウスポインタが要素外へ出ていったときに実行される。 |
onKeyPress | スクリプト | 要素内でキーが押され,離されたときに実行される。 |
onKeyDown | スクリプト | 要素内でキーが押下された瞬間に実行される。 |
onKeyUp | スクリプト | 要素内でキーがはなされた瞬間に実行される。 |
今まで紹介てきた HTML 要素の中で,このイベント属性を持たないのは
<BR>,<HEAD>,<HTML>,<META>,<SCRIPT>,<STYLE>,<TITLE>。また,フレーム定義に関連して <FRAMESET>,<FRAME>
である。持たないというより持ちようがないといったほうがよいかもしれない。
さらに,要素の中には独自のイベント属性を持つものがある。たとえば,<BODY> は基本的なものに加えて次のイベント属性を持つ。フレーム定義の <FRAMESET> はこの 2 つのイベント属性のみを持つ。
属性 | 値 | 解説 |
---|---|---|
onLoad | スクリプト | 文書(すべてのフレーム)が読み込まれたときに実行される。 |
onUnload | スクリプト | その文書(すべてのフレーム)から離れるときに実行される。 |
また,<A> は次のような独自のイベント属性を持っている。
属性 | 値 | 解説 |
---|---|---|
onFocus | スクリプト | 要素がフォーカスを得たときに実行される。 |
onBlur | スクリプト | 要素がフォーカスを失ったときに実行される。 |
ここで,フォーカスを得るというのはその要素を操作しようとマウスやタブを使って選択することである。
フォームに関連した要素も固有のイベント属性を持ち,今まで CGI でないと困難だったフォームの扱いを,スクリプトでもひととおりどうにかすることができる。ただし,スクリプトはセキュリティに関わる操作は原則できないので用途は限定されるだろう。スクリプト処理には Cookie という手段もあるが,これもセキュリティから敬遠する人がいることも忘れてはならない。
イベント属性を使用した,ダイナミックな効果を実現する簡単なスクリプトを見てみよう。ここで用意したのは,GIF ファイル“f_static.gif”と,アニメーション GIF ファイル“f_roll.gif”である。
スクリプトは,次のように記述した。
<SCRIPT TYPE="text/javascript">
<!--
function rollStart() {
document.images.bullet.src = "f_roll.gif";
}
function roolStop() {
document.images.bullet.src = "f_static.gif";
}
// -->
</SCRIPT>
このスクリプトに対して,次のような HTML を作成する。
<P><IMG SRC="f_static.gif" NAME="bullet" WIDTH="36" HEIGHT="36" ALT="Put the pointer here!" onMouseOver="rollStart();" onMouseOut="roolStop();"> 画像にマウスポインタを乗せてください。</P>
画像にマウスポインタを乗せてください。
スクリプトを使ってページを装飾したりすることも多くなってきた。だが,よかれと思って書いたスクリプトが実際は見る人にとってはひじょうに煩わしいものだったということも少なくない。私見で申し訳ないのだが,通常マウスのポインタがリンク文字列に当てられるとブラウザのステータスバーにはそのジャンプ先の URI が表示されるのだが,それをスクリプトでジャンプ先のページの説明に書き換えてしまうところがある。これだとどこに飛ばされるかわからないのでひじょうに困る。
また,スクリプトは便利な反面,クリティカルな操作は制限されているものの,閲覧者を“不快”にさせることも簡単であるという面があることを忘れてはならない。
WWW で情報を公開するときに,自分は何を見てもらいたいのかという点を明確にし,どんなサービス,アクセシビリティを提供するのかを考えれば,おのずとスクリプトを使うべき点が見えてくるだろう。