本節の目的
イベント処理を行なうのに必要なHTML要素について学習します。
前節の説明により、JavaScriptによる処理の2つめの起動タイミングである 「Webページ閲覧者の特定の操作による起動」は、イベントハンドラにより管理すれば良いことが分りました。では、実際にどのように記述すれば良いのでしょう？
イベントを扱うHTML要素には、2つあります。それは、ハイパーリンクを指定する a要素と、これまで説明していなかった form関連要素です。 まずは、イベントを処理するという観点から、これらのHTML要素の働きを概観してみましょう。
form関連のHTML要素は、ボタンを作ったり、文字を入力させる箱を作ったりする機能をもっており、実際のWebページではよく利用されるHTML要素です。 ただ、イベント処理と関係が深いので、 これまで説明して来ませんでした。form関連のHTML要素は機能が豊富ですので、詳細な説明は次の回に行なうことにして、ここでは必要な機能だけを紹介します。
a要素を利用した場合
まずは、a要素です。a要素は、ハイパーリンクを作る要素ですが、考えてみると「ハイパーリンクを作る」という処理は、以下のようなイベント処理を行なう環境を作ることになります。
- a要素の内容の文字列(もしくは画像)を表示し、表示した文字列(もしくは画像)部分がクリックされたら、 hrefで指定されているURIの内容を表示する。
青色で記述した 「表示した文字列(もしくは画像)部分がクリックされたら」の部分が、対象となるイベントの種類で、緑色で記述した 「 hrefで指定されているURIの内容を表示する。」 の部分が、そのイベントにより起動する処理の内容です。ということは、a要素では、前節で示した3つのイベントハンドラのうち 「onClick」が働いていることになりますね。
それ以外にa要素では、CSSの :hover 擬似クラスでその性質が変えられたように、 「表示された要素部分にマウスポインタが来たとき その領域の表示プロパティを変える」という、 「onMouseOver」のイベント処理も行なわれています。
form関連要素を利用した場合
form要素やそれに関連するHTML要素は、以下の機能をもっています。
- 選択肢をチェックしてもらうためなどのボタンや文字入力の箱を準備し(表示し)、 Webページ閲覧者が、選択肢のチェックや文字入力などをすると、 WWWサーバにそのデータを送る
これもイベント処理をしていることが分りますね。
ただ、ここでは、サーバへデータを送る本来の機能は利用せず、 Webページ閲覧者になんらかの入力をしてもらう機能のみを利用することにします。更に、入力機能の中で、最も直感的に分りやすい「ボタン」についてだけ説明します。
ボタンは、以下のように input要素を利用します。 type属性に button を指定すると、ボタンになります。ボタンに表示する文字は、value属性値として指定します。
<input type="button" value=" クリックして！ ">
上記を、Webブラウザで表示すると、以下のようなボタンになります。 value属性値が、ボタンの中に表示されていることが分りますね。
それでは、早速クリックしてみて下さい。何か起きましたか？
上記のボタンをクリックすると、押されたような動作(画像の変化)をしますが、単にそれだけで、他には何の変化も起きません！
それは、input要素が、ボタンを作ることと、「そのボタンがクリックされたら画像を変化させる」というイベント処理の機能しかもっていないからです。それ以外の処理を行なうには、イベントハンドラと組み合わせて利用する必要があるのです。
利用の仕方は、次回で行ないます。