処理の適用(3)　～イベント処理を行うHTML要素

【本節の目的】
イベント処理を行うHTML要素（a、form）について理解し、利用方法を学習します。

イベント処理を行なうHTML要素

前章の説明により、JavaScriptによる処理の2つめの起動タイミングである「閲覧者の特定の操作による起動」は、イベントハンドラにより管理すれば良いことが分りましたね。では、実際にどのように記述すれば良いのでしょう？

イベントハンドラを用いて処理を起動させるには、 HTMLの開始タグ中に、イベントハンドラ名を属性名とし、起動する処理名をそのイベントハンドラの属性値として書くことで実現できます。

イベントを扱うHTML要素には、２つあります。それは、a要素とform関連要素です。 form関連要素はまだ説明していませんが、機能が豊富ですので、必要な機能だけを紹介します。

a要素を利用した場合

a要素は、ハイパーリンクを作る要素ですが、考えてみると「ハイパーリンクを作る」という処理は、以下のようになっています。

a要素の内容の文字列(もしくは画像)を表示し、表示した文字列(もしくは画像)部分でクリックされたら、 hrefで指定されているURIの内容を表示する。
　例：<a href="http://www.kumamoto-u.ac.jp"> 熊本大学</a>

上記の例では、「熊本大学」という文字列をクリックすると、「熊本大学のWebページへ飛ぶ」ということです。前節で示した3つのイベントハンドラのうち「onClick」が働いていることが分りますね。

(註) それ以外にa要素では、CSSの :hover 擬似クラスでその性質が変えられたように、「表示された要素部分にマウスポインタが来たときその領域の表示プロパティを変える」という、「onMouseOver」のイベント処理も行なわれています。

form関連要素を利用した場合

form要素やそれに関連するHTML要素は、以下の機能をもっています。

選択肢をチェックするためのボタンや文字入力の箱などを準備し(表示し)、 Webページ閲覧者が、選択肢のチェックや文字入力などをすると、 WWWサーバにそのデータを送る

これもイベント処理をしていることが分りますね。

ただ、ここでは、サーバへデータを送る本来の機能は利用せず、 Webページ閲覧者になんらかの入力をしてもらう機能のみを利用することにします。更に、入力機能の中で、最も直感的に分りやすい「ボタン」についてだけ説明します。

form要素には必ずinput要素が必要であり、input要素の type属性に button を指定すると、ボタンになります。ボタンに表示する文字は、value属性値として指定します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <script type="text/javascript" src="./myscript.js"></script>
    <title>
      第11回　サンプルHTML
    </title>
  </head>

  <body>
    <form>
      <input type="button" value=" クリックして！ ">
    </form> 
  </body>

</html>

上記を、Webブラウザで表示すると、以下のようなボタンになります。 value属性値が、ボタンの中に表示されていることが分りますね。

上記のボタンをクリックすると、押されたような動作(画像の変化)をしますが、単にそれだけで、何も変化は起こりません！ (上記のHTMLには、処理内容が書かれていませんから当然といえば当然ですが。)
それは、input要素は、ボタンを作ることと、「そのボタンがクリックされたら画像を変化させる」というイベント処理のみの機能しかもっていないからです。それ以外の処理を行なうには、イベントハンドラと組み合わせて利用する必要があるのです。

例えば、「ボタンをクリックして、oshita()というJavaScript処理が起動する」ようにするには、以下のように書きます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <script type="text/javascript" src="./myscript.js"></script>
    <title>
      第11回　サンプルHTML
    </title>
  </head>

  <body>
    <form>
       <input type="button" value="クリックして！" onClick="oshita()"> 
    </form> 
  </body>

</html>

input要素に、赤字の部分が追加されています。 onClickがイベントハンドラ名で、「指定された領域でマウスがクリックされた時に、指示された処理を行なう」という働きをします。その「指示された処理」というのが、イベントハンドラの値である「oshita()」で指定されています。

上記をHTMLファイル中に書くと、以下のように表示されます。

ボタンをクリックすると、ウィンドウが開き、「どうもありがとう。今日が素晴しい日でありますように！」と表示されます。

このメッセージは、myscript.js 中の oshita() の定義で決まっています。 oshita()の入力 (引数) のメッセージを変えると、ここで現われるメッセージもそれに従って変わります。例えば、下のように変更すると、「こんにちは。」と表示されます。

function oshita() {
  window.alert('こんにちは。');
}

また、上記のボタン中の文字は、inputタグ中の value属性値ですので、

<input type="button" value="push me!" onClick="oshita()">

とすれば、ボタンは以下のように変わります。 (ついでに、oshita()も、上記のように変更してみました。)

処理の適用(3) ～イベント処理を行うHTML要素

イベント処理を行なうHTML要素

a要素を利用した場合

form関連要素を利用した場合

処理の適用(3)　～イベント処理を行うHTML要素