イベントによる処理

マンガで分かる JavaScriptプログラミング講座

マンガで分かる JavaScriptプログラミング講座 第2版



第3部 Webページのプログラミング
第18話:イベントによる処理

目次



マンガ










マンガ台詞

【1Page】
先生:さて 今回は 前回の続きだ
    『イベント』を利用して インタラクティブに Webページを操作するぞ
遊:イベント?
    運動会とか 文化祭とか 創立記念日みたいに 授業がない日のこと?
先生:あー まあ そんなところだ
麗:先生 投げやり ですね
先生:(気を取り直して)
    今回扱う『イベント』は ある条件が起きると 実行される処理のことだ
遊:ある条件?
守:どんな条件が あるんですか?
【2Page】
先生:Webページで よく利用される条件を 挙げてみるぞ
        Webページが読み込まれた直後
        ボタンがクリックされた時
        リンクや画像の上にマウスが乗った時
麗:そういえば クリックで 画面が変化したり しますね
先生:ああ
    実は JavaScriptの プログラムを書ける場所は 『<script>』タグ以外にもある
    それが タグの 『on〜』で始まる 属性部分になる
        イベント系属性  使用場所      対応イベント
        onLoad="〜"    通常はbodyタグ   ファイルが読み込まれた直後
        onClick="〜"   ボタンやリンクなど オブジェクトがクリックされた時
        onMouseOver="〜" 様々な場所     オブジェクトにマウスが乗った時
    この属性を書いた オブジェクトで 対応するイベントが 発生すると
    プログラムが発動する
    というわけで プログラムを 書いてみるぞ
【3Page】
        <html>
            <head>
                <script type="text/javascript">
                <!--
                function action0() {
                    // 『body』の読み込みが終わった直後に実行
                    alert("実行開始!");
                }

                var count1 = 1;
                function action1() {
                    // 『<div id="target1">』がクリックされた時に実行
                    var ele = document.getElementById("target1");
                    ele.innerHTML = count1 + "回クリック";
                    count1 ++;
                }

                var count2 = 1;
                function action2(ele) {
                    // 『<div onMouseOver="〜">』にマウスが乗った時に実行
                    // 引数『this』は2番目の『<div>』
                    ele.innerHTML = count2 + "回マウスオーバー";
                    count2 ++;
                }
                // -->
                </script>
            </head>
            <body onLoad="action0();">
                <div id="target1" onClick="action1();">目標1</div>
                <div onMouseOver="action2(this);">目標2</div>
            </body>
        </html>
        イベント発生で 関数を呼び出し
        『on〜』の属性部分に プログラムを記述
    『<body>』のロードが終われば 『実行開始!』と表示されて
    『目標1』を クリックすれば 『1回クリック』と 書き換わり
    『目標2』に マウスを重ねると 『1回マウスオーバー』と変化する
【4Page】
先生:どうだ
    『イベント』を使うと インタラクティブな ページが作れるだろう
遊:なんだか自分が すごいプログラマに なった気がするわ!
先生:ついでに
    もう1ヶ所 プログラムを書ける 場所があるので 教えておく
    リンクを クリックすれば 処理が行われる
        <a href="javascript:alert('クリック!')">クリックしてね</a>
    (画面とダイアログの表示)
        クリックしてね
        クリック!
先生:というわけで 今回は ユーザーの操作によって 処理を行う方法を 紹介した
    いろいろと試して 遊んでみてくれ



説明

この章では、『イベントによる処理』について学びます。

WebページのJavaScriptでは、ページの読み込み時にプログラムを実行するだけでなく、ボタンやリンクをクリックしたタイミングなどで、プログラムを開始させることができます。こういった方法を利用することで、ユーザーの操作に従ったインタラクティブな処理や、ムービーやゲームといった時間とともに進行していく処理を実現できます。

本章では、そういった『特定のタイミングで処理を実行する方法』として、『イベント』を学んでいきます。



『イベント』

『イベント』は、HTMLタグ内の、『イベントハンドラ』というところに書きます。この『イベントハンドラ』は、『on〜』という名前の属性になっています。そして、『イベントハンドラ』に対応した『イベント』が起こると、その処理が実行されます。

以下、簡単な例です。

<div onClick="alert('クリックしたよ!');alert('もっとクリックして!');">
    クリックしてね
</div>

このように、タグに『onClick』属性を設定して、属性の値としてプログラムを書きます。こうすれば、そのオブジェクトがクリックされた際に、プログラムを実行することができます。

この時、『onClick="〜"』の中に、『"』(ダブルクォーテーション)が書けないことに注意してください。

これは、『"〜"〜"〜"』と書くと、2番目の『"』のところで『"〜"』『〜"〜"』のように切れて、属性の値が終わってしまうためです。上記の例のように、『"〜'〜'〜"』と、『'』(シングルクォーテーション)を使うことで、この問題を避けることができます。

この、属性の値には、HTMLファイル内の別の場所に書いた関数を指定することもできます。また、外部JavaScriptファイルを読み込んでいる場合は、そのファイル内の関数を使うこともできます。



マンガ中のプログラムの解説

以下、マンガ中に出てきた、『イベントハンドラ』から関数を呼び出すプログラムの解説を行います。

<html>
    <head>
        <script type="text/javascript">
        <!--
        function action0() {
            // 『body』の読み込みが終わった直後
            alert("実行開始!");
        }

        var count1 = 1;
        function action1() {
            // 『<div id="target1">』がクリックされた時
            var ele = document.getElementById("target1");
            ele.innerHTML = count1 + "回クリック";
            count1 ++;
        }

        var count2 = 1;
        function action2(ele) {
            // 『<div onMouseOver="〜">』にマウスが乗った時
            // 引数『this』は2番目の『<div>』
            ele.innerHTML = count2 + "回マウスオーバー";
            count2 ++;
        }
        // -->
        </script>
    </head>
    <body onLoad="action0();">
        <div id="target1" onClick="action1();">目標1</div>
        <div onMouseOver="action2(this);">目標2</div>
    </body>
</html>

このプログラムでは、3つのタグの『イベントハンドラ』に関数を指定することで、『<head>』タグ内の『<script>』タグに書いた関数を呼び出しています。

3種類のタグ
<body onLoad="action0();">
<div id="target1" onClick="action1();">目標1</div>
<div onMouseOver="action2(this);">目標2</div>

最初の『<body onLoad="">』は、『<body>』タグ部分の読み込みが終了した際に呼び出される処理です。ここでは『action0』関数を呼び出しています。

次の『<div id="target1" onClick="">目標1</div>』は、『<div>』要素内にある文字列『目標1』がクリックされた際に呼び出される処理です。ここでは『action1』関数を呼び出しています。

『action1』関数内では、『id』属性が『target1』の要素(ここではクリックした要素自身の『id』を指定)の中身を書き換えています。結果として、『目標1』という文字列が書き換わっています。

最後の『<div onMouseOver="">目標2</div>』は、『<div>』要素内にある文字列『目標2』の上にマウスが乗った際に呼び出される処理です。ここでは『action2』関数を呼び出しています。

この関数は『action2(this)』と『this』を引数に取っています。この際の『this』は、イベントが呼び出された『<div>』タグ自身の要素を表します。

そのため、『function action2(ele)』という関数の引数『ele』は、イベント呼び出し元の『<div>』タグと同じになります。そして、この変数『ele』のプロパティ『innerHTML』を変更することで、『目標2』という文字列を書き換えています。



『イベント』の詳細な使い方

よく使う『イベントハンドラ』

『イベントハンドラ』の中で、よく使うものを以下に示します。

属性発生タイミング
onClickクリックされた時
onMouseOverマウスカーソルが乗った時
onMouseOutマウスカーソルが離れた時
onLoadWebページが読込まれた直後
onUnload他のページに移動する直前
onFocusフォームの部品などが操作対象になった時
onBlurフォームの部品などが操作対象から外れた時
onChangeフォームの部品の内容が変更された時
onSubmitフォームの実行がなされた時

『イベント』をプログラムから発生させる

これらの『イベント』は、プログラムから発生させることもできます。よく使うものを、以下に示します。

発生イベント
element.click()クリック
element.focus()オブジェクトを操作対象にする
element.blur()オブジェクトを操作対象から外す
(フォーム).submit()フォームを実行する

『イベント』の詳しい情報を得る

『イベント』が発生したタイミングで、イベントの詳しい情報を入手することもできます。『イベント』の情報は、『(window.)event』オブジェクトに格納されています。

以下、よく使うプロパティを示します。

意味
event.typeイベントの種類(例:クリック時は『click』)
event.clientXイベントが発生したX座標(Webページ内)
event.clientYイベントが発生したY座標(Webページ内)
event.screenXイベントが発生したX座標(デスクトップ内)
event.screenYイベントが発生したY座標(デスクトップ内)

『イベント』情報取得の実例と、リンクのキャンセル

以下、プログラムの例を示します。

<html>
    <head>
    </head>
    <body>
        <a href="#" onclick="alert(event.type); return false;">
            イベント種類
        </a><br>
        <a href="#" onclick="alert(event.clientX + ' ' + event.clientY); return false;">
            クライアント座標
        </a><br>
        <a href="#" onclick="alert(event.screenX + ' ' + event.screenY); return false;">
            スクリーン座標
        </a><br>
    </body>
</html>

最初の『イベント種類』をクリックすると、『イベント』の種類(この場合は『click』)と表示されます。

2番目の『クライアント座標』をクリックすると、Webページ内での、イベントが発生したX座標、Y座標が表示されます。

3番目の『スクリーン座標』をクリックすると、デスクトップ内での、イベントが発生したX座標、Y座標が表示されます。

さて、このコード中で『return false;』と書いてあるのはなぜでしょうか?

この『return false;』は、『<a>』タグの本来の処理(リンクを開く)を、『キャンセルする』という意味になります。

フォームのキャンセル

『return false;』は、フォームによるデータの送信処理をキャンセルする場合にも使用します。以下、フォームの入力内容を確認して、入力が空の場合に、フォームの実行を停止させるプログラムです。

<html>
    <head>
    </head>
    <body>
        <form
            method="get"
            action="http://www.google.com/search"
            onSubmit="return checkValue(this.q);"
        >
            検索文字列:
            <input type="text" name="q" value="" size=30>
            <input type="hidden" name="ie" value="Shift-JIS">
            <input type="submit" value="実行">
        </form>

        <script type="text/javascript">
        <!--
        function checkValue(element) {
            if (element.value == "") {
                alert("文字列が空です");
                return false;
            }
        }
        // -->
        </script>
    </body>
</html>

『submit』(実行)ボタンがクリックされると、送信処理の前に『form』タグの『onSubmit="〜"』が実行されます。

『this.q』は、『this』(ここではフォーム)の子要素の中で、『name』属性の値が『q』の要素という意味です。この『this.q』の『value』属性の値が空の場合は、『return false;』で処理をキャンセルさせています。

このプログラムでは、『onSubmit』の値が『checkValue(this.q);』ではなく、『return checkValue(this.q);』になっていることに注意してください。『return』が抜けていると、正しく動作しません。

これは、『onSubmit』の実体が、以下のようになっているからです。

// 『checkValue(this.q);』の場合
form.onSubmit = function(){checkValue(this.q);}

// 『return checkValue(this.q);』の場合
form.onSubmit = function(){return checkValue(this.q);}

『checkValue(this.q);』の場合は、『onSubmit』の戻り値はありません。この場合、『onSubmit』の中で処理が行われるだけで、戻り値が何も設定されていないからです。

対して、『return checkValue(this.q);』の場合は、『onSubmit』の戻り値は『checkValue』関数の戻り値になります。こちらでは、『checkValue』関数の戻り値を、『onSubmit』メソッドの『return』の値として利用しています。

そのため、2番目の例のように『return』を付けた場合のみ、『onSubmit』の戻り値として『false』を戻せることになります。

『イベント』や『イベントハンドラ』を、さらに詳しく知りたい方は、以下も参考にしてください。


参考:とほほのJavaScriptリファレンス - イベントハンドラ
参考:とほほのJavaScriptリファレンス - イベント



『<a>』タグに記述するJavaScript

『on』で始まるイベント系の属性以外にも、プログラムを直接書ける属性部分があるので紹介しておきます。それは、リンクを行うための『<a>』タグ内の『href』属性です。通常、この場所には、リンク先のフィル名やパス、URLなどを書きます。

<a href="http://crocro.com/">クリックしてね</a>

この『href』属性の先頭に『javascript:』と書くことで、プログラムを実行させることができます。以下、プログラムを書いた例です。

<a href="javascript:alert('クリック!')">クリックしてね</a>

この場合『クリックしてね』というリンク部分をクリックすることで、ダイアログが表示されて、『クリック!』という文字列が現れます。



『イベント』への動的な追加

これまで説明した方法では、HTMLタグの『イベントハンドラ』に、『イベント』発生時の処理を直接書き込んでいました。

しかし、状況によっては、プログラムの中からイベント時の処理を追加したいこともあるでしょう。

その際の書き方を紹介しておきます。

以下は、少し高度な話になるので、読み飛ばしても構わないです。ある程度学習が進んでから、再度読み直すとちょうどよいでしょう。

<html>
    <head>
        <script type="text/javascript">
        <!--
        // イベントの追加関数
        function addEvent(element, eventType, func){
            try{
                // FireFox、Google Chrome
                element.addEventListener(eventType, func, false);
            }catch(e){
                // IE
                element.attachEvent("on" + eventType, func);
            }
        }

        // イベントの追加
        addEvent(window, "load", init);

        // 初期化処理
        function init() {
            // イベントの追加
            var target = document.getElementById("target");
            addEvent(target, "click", function(){alert("クリック!");});
        }
        // -->
        </script>
    </head>
    <body>
        <div id="target">クリックしてね!</div>
    </body>
</html>

『try {(領域A)} catch(e) {(領域B)}』は、エラーを回避して処理を継続するための書き方です。

通常では、処理の途中でエラーが発生すると、そのプログラムは終了します。しかし、時にはプログラムを終了せずに、処理を続けたい場合もあるでしょう。

『try {(領域A)}』の『領域A』でエラーが発生すると、プログラムの処理は『領域A』から抜けます。そして、エラーによって処理を停止せずに、『catch(e) {(領域B)}』の『領域B』の部分を実行します。エラーが発生しなかった場合は、『領域B』は実行されません。

WebブラウザのJavaScriptでは、ブラウザの種類によって、オブジェクトの内容に若干の違いがあります。『イベントを追加する処理』も、そういった違いの1つです。そして、ブラウザによって、特定のオブジェクトが、存在したり、存在しなかったりします。そして、存在しないオブジェクトを操作しようとすれば、エラーが発生してしまいます。

そこで、『try catch』文を利用して、存在しないオブジェクトを利用した時にエラーを発生させて、『catch』部分に飛ばすようにしています。こういった方法を使えば、複数のブラウザで、処理を分岐させることができます。



サンプルの入手

以下は、今回出てきたサンプルです。

ZIPでまとめてダウンロード (右クリックから保存してください)

sample1.html』(『イベント』の例)を表示

sample2.html』(『href』属性での実行)を表示

sample3.html』(『イベント』の利用)を表示

sample4.html』(『onSubmit』のキャンセル)を表示

sample5.html』(『イベント』の動的追加)を表示

プログラムの中身を見たい場合は、それぞれのHTMLファイルをブラウザで開いたあと、右クリックをして『ソースの表示』を選択してください。

メモ帳で、ファイルの中身を見ることができます。

≫ 「マンガで分かる JavaScriptプログラミング講座」トップに戻る


『柳井政和』 の初心者向け講座

『柳井政和』 のサイト

マンガで分かる Java入門講座
Javaのオブジェクト指向を解説するサイトです。
Webページ100ページ以上、マンガ800ページ以上で
解説を行っています。


PuzzleAndGame.com
JavaScriptで作ったゲームが中心のサイト。
タワーディフェンス、リバーシ、パズルゲームなどを公開。
Webブラウザ、PCアプリ、Androidアプリとして動作。


クロクロ・ツールズ
全てJavaScriptで作られた、ブラウザから利用できる各種アプリケーションです。
HTML5に対応しているモダンブラウザから使えます。
ブックマークに入れるなどして、ご利用ください。


『柳井政和』 執筆の本

「顔貌売人 ハッカー探偵 鹿敷堂桂馬」
文藝春秋より発売(2017年8月7日、予約可能)。
プログラマーが探偵役のエンタメ・ミステリー第2弾。
最先端の情報犯罪に安藤と鹿敷堂が挑みます。


「裏切りのプログラム ハッカー探偵 鹿敷堂桂馬」
文藝春秋より発売(2016年8月27日発売、予約注文可能です)。
2016年の松本清張賞で、最終候補に残った小説です。
プログラマー鹿敷堂桂馬が、女性社長の安藤裕美とともに、
IT業界で起きた事件の解決に挑みます。
プログラマーが探偵役のエンタメ・ミステリーです。


「マンガでわかるJavaScript」
本講座が書籍になりました。 本用に、より分かりやすく、読みやすく、再構成して書き直しました。
よければ、手にとっていただけると嬉しいです。
秀和システムより発売。


「プログラマのためのコードパズル〜JavaScriptで挑むコードゴルフとアルゴリズム」
コードゴルフやアルゴリズム問題、その解説、関連知識の紹介を行った本です。
プログラマーなら、楽しめる内容になっています。
技術評論社より発売。


「JavaScript 仕事の現場でサッと使える! デザイン教科書」
プログラミング初心者向けに、様々な利用例を元に、プログラムとJavaScriptを解説する本。
プログラム自体が初めての方にも、なるべく分かりやすいように書いています。
技術評論社より発売。


『柳井政和』 開発のWebアプリやソフトなど

PuzzleAndGame.com
全自動4コマ
全自動百科事典(オートペディア)
全自動似顔絵
新刊・新作カレンダー
EX リバーシ
全自動迷路
めもりーくりーなー
ラジオ・ブラウザ
PCソフト
マンガで分かる JavaScriptプログラミング講座
スクリーンセーバー「なう」
開発元:クロノス・クラウン




Cronus Crown(クロノス・クラウン)のトップページに戻る
(c)2002-2017 Cronus Crown (c)1997-2017 Masakazu Yanai
このWebPageに関するご意見・お問い合わせは
サイト情報 - 弊社への連絡 -
までお願いします。