MENU
未経験から実務レベルのWeb制作スキルを学ぶ基礎講座 見てみる
  1. ホーム
  2. Web制作
  3. 【もりけん塾】 JavaScriptを勉強して未経験からエンジニアを目指す！11

【もりけん塾】 JavaScriptを勉強して未経験からエンジニアを目指す！11

広告
Web制作
つるぴよ
つるぴよ
もりけん塾に入塾しました！

JavaScriptを勉強してフロントエンジニアを目指しています！
今回は学習ロードマップの１番目「マンガJavaScript」を読んでのまとめ、アウトプットを記事にしています。
あわせて読みたい
【もりけん塾】 JavaScriptを勉強して未経験からエンジニアを目指す！⑩ JavaScriptを勉強してフロントエンジニアを目指しています！ 今回は学習ロードマップの１番目「マンガJavaScript」を読んでのまとめ、アウトプットを記事にしています。...

 

 

目次

マンガJavaScript第１８話　イベントによる処理

つるぴよ
つるぴよ
ボタンやリンクをクリックしたタイミングでプログラムを開始させる「イベント」の処理を学んでいこう！

イベント

「イベントハンドラ」とは？
・HTML内の「イベント」を書く場所。
・「on〜」という名前の属性になっている。
・「イベントハンドラ」に対応した「イベント」が起こると、その処理が実行される。

コードで書いてみるとこんな感じです。

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

①「onClick」属性を設定する。
②属性の値としてプログラムを書く。
③そのオブジェクトがクリックされる。
④プログラムを実行

onClick = “〜”　の中には「’」シングルクォーテンションしか使えない

マンガに登場する長めのプログラムをみてみよう

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

３種類のタグ
①<body onLoad=”action0();”>
②<div id=”target1″ onClick=”action1();”>目標1</div>
③<div onMouseOver=”action2(this);”>目標２</div> 
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <script>
        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>

 

[解説]
①「<body onLoad=””>」の場合
「<body>」タグ部分の読み込みが終了した際呼び出しています。
今回は「action0」関数を呼び出しています。②「<div id=”target1″ onClick=””>目標１</div> 」の場合
「div」要素内の文字列「目標１」がクリックされた際呼び出しています。
今回は「action1」関数を呼び出しています。
「action1」関数内では
「id」属性が「target1」の要素の中身を書き換えています。
（ここではクリックした要素自身の「id」を指定）
結果として「目標１」という文字列が書き換わっています。③「<div id=onMouseOver=”action2(this);”>目標２</div>」の場合
「div」要素内の文字列「目標２」がの上にマウスが乗った際呼び出しています。
今回は「action2」関数を呼び出しています。
「action2」関数内では
引数に「this」をとっています。この際の「this」はイベントが呼び出された「<div>」タグ自身の要素をを表します。
「<function action2(ele)」という関数の引数「(ele)」はイベント呼び出し元の「<div>」タグと同じになります。
変数「ele」のプロパティ「innerHTML」を変更することによって「目標２」という文字列を書き換えています。

イベントの詳細や使い方について

つるぴよ
つるぴよ
「イベントハンドラ」の中でよく使うものを表にしたよ！
属性 発生タイミング
onClick クリックされた時
onMouseOver マウスカーソルが乗った時
onMouseOut マウスカーソルが離れた時
onLoad Webページが読み込まれた直後
onUnload 他のページに移動する直前
onFocus フォームの部品などが操作対象になった時
onBlur フォームの部品などが操作対象から外れた時
onChange フォームの部品の内容が変更された時
onSubmit フォームの実行がなされた時

 

「イベント」をプログラムから発生させる時によく使うものを表にしました

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

「イベント」の詳しい情報を得る

「(window.)event」オブジェクトとは？
→イベントの情報が格納されている場所
「イベント」が発生したタイミングで「イベント」の情報を入手できます。
よく使うプロパティを表にまとめました。

式 意味
event.type イベントの種類（例：クリック時は「click」）
event.clientX イベントが発生したY座標(Webページ内)
event.clientY イベントが発生したX座標(Webページ内)
event.screenX イベントが発生したX座標(デスクトップ内)
event.screenY イベントが発生したY座標(デスクトップ内)
つるぴよ
つるぴよ
イベントの情報取得の実例をみていこう！

プログラムを書いていきます。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
    </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>

 

解説
・1番目の「イベント種類」をクリックすると「イベント」の種類と表示されます。（この場合は「click」）
・２番目の「クライアント座標」をクリックするとWebページ内でのイベントが発生した、「Y座標」「X座標」が表示されます。
・３番目の「スクリーン座標」をクリックするとデスクトップ内でのイベントが発生した、「Y座標」「X座標」が表示されます。

ちなみに上のプログラム内で「returen false;」と書いているのはなんでなの？？
ねこまる
ねこまる
つるぴよ
つるぴよ
これは「」タグ本来の処理（リンクを開く）をキャンセルしているんだよ！

フォームのキャンセル

「return false;」は、フォームによるデータの送信処理をキャンセルする場合にも使用します。

実際にプログラム内で使用してみましょう！
フォームの入力内容を確認し、フォームが空の場合にフォームの実行を停止するプログラムを書いていきます。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <form
            method="get"
            action="https://www.google.com/search"
            onSubmit="return checkValue(this.q);"
        >
            検索文字列：
            <input type="text" name="q" value="" size=30>
            <input type="hidden" name="ie" value="UTF-8">
            <input type="submit" value="実行">
        </form>
 
        <script>
        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」の値が「return checkValue(this.q)」になっていることに注意してね！

「onSubmit」の実体が、以下のようになっているので「return」が抜けていると動作しません。

// 「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);」の場合
「checkValue」関数の戻り値を、「onSubmit」メソッドの「return」の値として利用しています。
「onSubmit」の戻り値は「checkValue」関数の戻り値になります。

①、②の理由があるため「return」をつけた場合のみ「onSubmit」の戻り値として「false」を戻せることになります。

<a>タグに記述するJavaScript

「href」属性にも「on」で始まるイベント系の属性と同じようにプログラムを直接かけます。

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

上記のようなプログラムを書くと、「クリックしてね」をクリックした際にダイアログが出てくるようになります。

マンガJavaScript１８話まとめ

ここまで学んだ内容をまとめます！
・イベントについて
　詳細や使い方
・フォームのキャンセル
・<a>タグに記述するJavaScript

 

もりけん塾を運営している森田賢二さんのブログはこちらから👇

武骨日記

Twitterフロントエンジニア（@terrace_tech）のフォローは👇

フォローはこちら

Web制作

関連記事

目次