基盤的情報処理論

前のページの最初に示した3つの例の中で、 「ページを訪れた時刻を表示する」ものと、 後の2つではその動くきっかけ(契機)が異るのに気づきましたか？ (少し考えてみてください。 答えは、すぐ後で教えます。)

この「きっかけ(契機)」にどのようなものがあるのか、 そしてその「きっかけ(契機)」をPCはどのように扱っているのか、 更にその「きっかけ(契機)」を使ったWebページは、一般にどのようなことを頭にいれて記述する必要が有るのかなどを、まず学習します。 (これが理解できていないと、次ページ以降のサンプルを見ても、動作イメージが湧かないと思います。)

一口に動きのあるページと言っても、その動く契機で2つに分けられます。

「ページを訪れた時刻を表示する」場合は、 そのページを見る人が何もしなくてもそのページを表示しただけで、 (その時点の時刻を調べ、それを決められた書式でWebページ内に表示するという) 適切な処理を行なっています。

ところが、「鯛の絵が骨の絵に変わる」方は、ジッと待っていても何も変化しません。 ページを閲覧している人がマウス(ポインタ)を動かして、 鯛の絵のところにマウスポインタをもって行くことで、骨の絵に変わります。 その後、マウスポインタが骨の絵から離れると、再び鯛の絵に戻ります。 つまり、これらの処理は、Webページを閲覧して(見て)いる 「人の行なう特定の操作を契機として処理が始まる」のです。 ボタンをクリックして行う占いも同様に、「ボタンを押す」という「特定の操作を契機として処理(占いを行う)が始まる」ということになります。

これから分るように、動きのあるWebページには、 JavaScriptで記述した処理を起動する契機により、 以下の2つがあることになります。

1. Webページが表示されると同時に起動するもの
2. 閲覧者の特定の操作により起動するもの

これらの、起動方法の違いは、HTMLの中に記述する方法の違いによります。

1.の場合は、単に処理の名前を書くだけです。 ただし、HTMLファイル中に記述しますが、HTML要素では無く、 JavaScript言語ですので、それと分るように記述する必要があります。

そこで、このような場合のJavaScriptは、 以下のように script要素 とよばるHTML要素の内容として記述するということになっています。

<script type="text/javascript">
<!--
  alert('こんにちは！');
//-->
</script>

scriptタグ中のtype属性で、内容がJavaScriptであることを宣言します。

また、JavaScriptに対応していない古いWebブラウザでもエラーにならないように、 script要素の内容は、すべてコメントにしておきます。 上の例では、script要素の内容は、alert('こんにちは！'); ですが、これが <!-- と --> に囲まれ、HTMLとしてはコメントにされていますね。 (「//」は、JavaScriptでコメントをつくる記号です。)

次に、2.の場合、1.とは異りちょっとしたテクニックが必要となります。 なぜなら、皆さんの作ったWebページを見てくれている人が、 マウスを動かしたりクリックしたことを検知する必要があるからです。 これには「イベント」、「イベントハンドラ」並びに 「イベント処理」という概念が必要になりますので、 まずはそれについて次の節で説明します。