☰
kazugramming Let's program together

DOM3

Javascript

こんにちはkazutoです。今回は、DOMのノード上にイベントを追加していきましょう。

イベントとは❓

イベントとは、webページで起きた動作の事を指します。例えば

  • ユーザーが要素をクリック
  • ユーザーがキー入力をした
  • サブミットボタンが押された時

などです。

JavaScrptは、イベント駆動という概念に基づいて設計されています。要するに,イベントが発火したら、JavaScrpt内のプログラムが実行されるように開発された言語という事です。

いきなりイベントと言われても困ると思うので、イメージができるように実際にイベントが発火している場面をみてみましょう。

上記は、ドロップダウンメニューと言って、選択したメニュー欄を

  • クリックイベント
  • マウスオーバーイベント

というイベントが発火する事で、メニューが垂れ下がるように表示がされていきます。（今回は、マウスオーバーの方で実装しました。）

なんとなくイベントという概念の大枠は把握ができたと思います。なので、実際にJavaScrpt内でイベントを実装をしていきましょう。

イベントを実装する手順は

  1. ノードを取得
  2. addEventListenerメソッドでイベントを登録
  3. イベントが発火した際に必要な処理を記述

という流れになります。

addEventListenerメソッド

addEventListenerメソッドは、イベントを登録する際に必要なメソッドです。イベントを実装する際によく使うので覚えておきましょう。
構文を確認をしてみましょう。

イベントターゲット.addEventListener("イベント名",コールバック関数)

構文を確認をした所で、実際のコード書き換えた場合、どのような記述になるか確認をしてみましょう。

//通常バージョン
html.addEventListener("click",function(){
console.log("イベントが発火しました")
})
//アロー関数
html.addEventListener("click",()=>{
console.log("イベントが発火しました")
})

※コールバック関数がわからない方は下記の記事を参照してください。

コールバック関数

事前準備

[イメージ]

まずは、事前準備をしましょう。下記のソースコードをコピペしてください

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <script src="index.js"defer></script>
</head>
<body>
  <h1>クリックイベント</h1>
  <main>
    <div class="bulock1">
      <p>カウント数</p>
      <div id = countNum>
        0
      </div>
      <div class="box">
      <button id ="count">カウント</button>
    </div>
    </div>
    <div class="bulock2">
      <img class ="element" id = element src="kazugramming.png">
      <div class="box">
       <button id="toggleElement">追加削除</button>
        </div>
    </div>
    <div class="bulock3">
      <div class="addElement">
        <p>今日の運勢は</p>
      </div>
      <div class="box">
        <button id="omikuzi">おみくじ</button>
        </div>
    </div>
  </main>
</body>
</html>
h1{
    text-align: center;
    font-size: 80px  ;
    background-color: royalblue;
    font-size: 50px;
    border-radius: 300px;
    color: white;
    width: 500px;
    margin: auto;
    margin-top: 60px;
    font-weight: bold;
  }

main{
  width: 1000px;
  height: 500px;
  margin: auto;
  margin-top: 40px;
  display: flex;  
}

#countNum{
  width: 100%;
  height: 23%;
  font-size: 50px;
  text-align: center;
  padding-top: 20px;
  color: red;
}

.bulock1{
  width: 300px;
  height: 300px;
  margin: 10px 20px;
}

img{
  width: 80%;
  height: 100%;
}
 .bulock1.box{
  width: 100%;
  height: 5%;
   background-color: violet; 
 } 


#count{
  width: 80%;
  height: 60%;
  border-radius: 30px;
  background-color: royalblue;
  color: white;
  margin: 42px;
  margin-top: 81px;
  font-size: 25px;
}

p{
  font-size: 30px;
  text-align: center;
  font-weight: bold;
}

.bulock2{
  width: 300px;
  height: 300px;
  margin: 10px 20px;
}

 .bulock2.box{
  width: 100%;
  height: 30%;
  } 

 .element{
  padding-top: 38px;
  width: 100%;
  height: 180px;
  opacity: 0;
  margin: auto;
  transition: 1s; 
 } 

 #toggleElement{
  width: 80%;
  height: 60%;
  border-radius: 30px;
  background-color: royalblue;
  color: white;
  margin: 30px;
  margin-top: 50px;
  font-size: 25px;
} 


.element.active{
  opacity: 1;
}


.bulock3{
  width: 300px;
  height: 300px;
  margin: 10px 20px;
}

.bulock3.box{
  width: 100%;
  height: 40%;
}

#omikuzi{
  width: 80%;
  height: 60%;
  border-radius: 30px;
  background-color: royalblue;
  color: white;
  margin: 38px;
  margin-top: 23px;
  font-size: 25px;
}


 #text{
  font-size: 50px;
  text-align: center; 
} 

.cahnge{
  opacity: 0.4;
}

今回、実装していくイベントは、クリックイベントです。名の通りクリックをしたらイベントが発火します。

※imgタグがあると思いますが、ご自身で適当な画像を拾ってきてください。

[実装内容]

  • クリックしたカウント数を表示する
  • 画像をフェードイン&フェードアウトさせよう
  • おみくじゲーム

クリックしたカウント数を表示する

まず初めにカウントボタンのイベントを登録をしていきます。

[実装内容]

  • ボタンを押した回数をカウントをする
  • 20回ボタンを押したらアラートを出してリセットをする

[手順]

  • ノードを取得
  • addEventListenerメソッドでイベントを登録
  • イベントが発火した際に必要な処理を記述

ノードを取得

まず、必要なノードをquerySelectorメソッドを用いて取得をしましょう。

const countNum = document.querySelector("#countNum")
const count    = document.querySelector("#count")
  • 定数countNum
    →カウント数を挿入をするノード
  • 定数count
    →ボタン

ボタンをクリックをしたら定数countNumにカウント数を挿入をするイメージです。

let numCount = 0;

このタイミングで、実際にカウント数を保持して置く変数numCountを定義をしておきましょう。
今回、定義した変数・定数の関係は以下の通りになります。

  1. 定数countをクリック
  2. 変数numCount+1
  3. 定数countNumに変数numCount挿入をする

処理内容を言語化できたので後は、プログラムに落とし込むだけですね。続いて、addEventListenerメソッドでイベントを登録をします。

addEventListenerメソッドでイベントを登録

イベントに使う、ノードを取得できたのでaddEventListenerメソッドを用いてイベントを登録をしていきます

count.addEventListener("click",()=>{ })

上記の記述で定数countにクリックイベントを登録をできましたが、イベントが本当に登録できたか確認できていません。なのでconsol.logを用いてデバックをしましょう。

count.addEventListener("click",()=>{console.log("test") })

問題無くtestという文字列を出力ができていますので、定数countにイベントが登録ができた事が確認できました。イベントが登録できたのでイベントが発火した時に起こる処理を実装をしていきましょう。

イベントの中身を実装しよう

最後にイベントの中身を実装をしていきます。

  • ボタンを押した回数をカウントをする
  • 20回ボタンを押したらアラートを出してリセットをする

言語化した実装内容をプログラムに落とし込むと下記のようなソースコードになります。

count.addEventListener("click",()=>{
    if (numCount=== 20 ){
     alert("カウント数20になりましたリセットします")
     numCount=0
     return countNum.textContent = `${numCount}`
    }
    numCount++
    countNum.textContent = `${numCount}`
  })
  })

それでは、解説をしていきます。

 if (numCount=== 20 ){
     alert("カウント数20になりましたリセットします")
     numCount=0
     return countNum.textContent = `${numCount}`
    }

こちらはif文を用いて変数numCountに格納されている数が２０と等しくなったら初期化するというコードになります。

alert("カウント数20になりましたリセットします")
numCount=0
return countNum.textContent = `${numCount}`

変数numCountに格納されいる数が２０になったら,alertメソッドで警告をします。

その後、変数numCountの初期化をして、textContentメソッドを用いて初期化した変数numCountを定数countNumに挿入をしています。returnメソッドを用いる理由は、if文のブロック内で処理を終わらせたいためです。

 numCount++
 countNum.textContent = `${numCount}`

if文の条件に該当しない場合は、上記のコードが読み込まれます。

以上で、「クリックしたカウント数を表示する」の実装を終わります下記が完成したソースコードになります。

// カウント
const countNum = document.querySelector("#countNum")
const count    = document.querySelector("#count")
let numCount = 0;
// クリックイベント
  count.addEventListener("click",()=>{
    if (numCount=== 20 ){
      alert("カウント数20になりましたリセットします")
     numCount=0
     return countNum.textContent = `${numCount}`
    }
    numCount++
    countNum.textContent = `${numCount}`
  })

画像をフェードイン&フェードアウトさせよう

続いて画像をフェードイン&フェードアウトさせてみましょう。

[実装内容]

  • activeクラスを追加をする
  • activeクラスを削除をする

[手順]

  1. ノードを取得
  2. addEventListenerメソッドでイベントを登録
  3. イベントが発火した際に必要な処理を記述

ノードを取得

まず、ノードを取得をしましょう。

const element = document.querySelector("#element")
const toggleElement =document.querySelector("#toggleElement")
  • 定数element
    →acitveクラスを追加&削除
  • 定数toggleElement
    →ボタン

addEventListenerメソッドでイベントを登録

定数toggleElementにイベントを登録をしていきます。

toggleElement.addEventListener("click",()=>{})

上記の記述で定数toggleElementにクリックイベントを登録をできましたが、イベントが本当に登録できたか確認できていません。なのでconsol.logを用いてデバックをしましょう。

toggleElement.addEventListener("click",()=>{console.log("test")})

問題無くtestという文字列を出力ができていますので、定数toggleElementにイベントが登録ができた事が確認できました。イベントが登録できたのでイベントが発火した時に起こる処理を実装をしていきましょう。

イベントの中身を実装しよう

最後にイベントの中身を実装をしていきます。

  • activeクラスを追加をする
  • activeクラスを削除をする

クラスの追加はaddメソッド、クラス削除は、removeメソッドを用いればできますが、今回のような、表示、非表示を繰り返す場合は、toggleメソッドを用いた方が処理を簡単にコーディングできます。

toggleメソッドとは,クラスの追加＆削除を行える便利なメソッドです。

toggleElement.addEventListener("click",()=>{element.classList.toggle("active")})

上記のソースコードで

  • フェードイン
  • フェードアウト

の実装ができました。

toggleメソッドを用いた場合,if文や真偽値を使わなくとも

  • フェードイン
  • フェードアウト

ができるのがとても便利です。

以上で、「画像をフェードイン&フェードアウトさせよう」の実装が終わりです。完成版のソースコードは下記です。

const element = document.querySelector("#element")
const toggleElement =document.querySelector("#toggleElement")
toggleElement.addEventListener("click",()=>{element.classList.toggle("active")})

おみくじゲーム

最後におみくじゲームを作りましょう。

[実装内容]

  • ボタンをクリックしたらランダムで占い結果が出る
  • 運勢によって色を変える

[手順]

  • ノードを取得
  • addEventListenerメソッドでイベントを登録
  • イベントが発火した際に必要な処理を記述

ノードを取得

まずは、ノードを取得をしましょう。

const omikuziButton = document.querySelector("#omikuzi")
const  addElement = document.querySelector(".addElement")
  • 定数omikuziButton
    →ボタン
  • 定数addElement
    →占い結果を挿入をする

また、運勢に関しては、配列で管理をします。定数omikuziを定義をしましょう。

const  omikuzi = ["大吉","中吉","小吉","凶","大凶"]

最後に占い結果を挿入をするため、JavaScript内でpタグを生成をしてみましょう。JavaScript内でHTML 要素を生成したい場合は、createElementメソッドを用います。

createElementメソッド

createElementメソッドは、HTML 要素を生成をするメソッドです。構文は、下記です。

document.createElement("タグ名")

構文を確認をした所で、実際にHTML要素を生成をしてみましょう。今回は、pタグを生成をします。

const el = document.createElement("p")

上記のコードで、pタグを生成をする事ができました。実際にconsole.log()を用いて、確認をしてみましょう。

const el = document.createElement("p")
console.log(el)

無事、pタグを生成をする事ができました。今度は、pタグにid属性を付与してみましょう。

el.id =`text`

id属性を付与する理由としてCSSのスタイルを適用をするためです。

addEventListenerメソッドでイベントを登録

定数omikuziButtonにイベントを登録をしていきます。

omikuziButton.addEventListener("click",()=>{}

上記の記述で定数omikuziButtonにクリックイベントを登録をできましたが、イベントが本当に登録できたか確認できていません。なのでconsol.logを用いてデバックをしましょう。

omikuziButton.addEventListener("click",()=>{console.log("test")}

問題無くtestという文字列を出力ができていますので、定数omikuziButtonにイベントが登録ができた事が確認できました。イベントが登録できたので、イベントが発火した時に起こる処理を実装をしていきましょう。

イベントが発火した際に必要な処理を記述

  • ボタンをクリックしたらランダムで占い結果が出る
  • 運勢によって色を変える
function changeColor(cr){
  el.style.color=cr
}

omikuziButton.addEventListener("click",()=>{
  el.textContent = omikuzi[Math.floor(Math.random()*omikuzi.length)]
  addElement.appendChild(el)
  if(document.getElementById("text").textContent ==="大吉"){
    changeColor("red")
  }
  else if( document.getElementById("text").textContent ==="中吉"|| document.getElementById("text").textContent ==="小吉"){
    changeColor("black")
  }
  else if(  document.getElementById("text").textContent ==="凶"||  document.getElementById("text").textContent ==="大凶"){ 
    changeColor("rebeccapurple")
  }  
})
 el.textContent = omikuzi[Math.floor(Math.random()*omikuzi.length)]
 addElement.appendChild(el)

まず、先ほど生成したpタグ (el)に占い結果を挿入をします。その後
appendChildメソッドを用いて,定数addElementの末尾にpタグを追加をしましょう。

appendChildメソッドは、親ノードの末尾に子ノードを追加をするメソッドです。特定の親ノードの子ノードリストの末尾にノードを追加します。

親ノード.appendChild("追加をしたいノード")

最後にい占い結果事に色を変えてみましょう。

  • 占い結果が大吉な場合
    →red
  • 占い結果が中吉＆小吉な場合
    →black
  • 占い結果が凶＆大凶な場合
    →rebeccapurple
・・・省略
if(document.getElementById("text").textContent ==="大吉"){
    changeColor("red")
  }
  else if( document.getElementById("text").textContent ==="中吉"|| document.getElementById("text").textContent ==="小吉"){
    changeColor("black")
  }
  else if(  document.getElementById("text").textContent ==="凶"||  document.getElementById("text").textContent ==="大凶"){ 
    changeColor("rebeccapurple")
  }

条件分岐自体は、シンプルなので解説は省略します。

function changeColor(cr){
  el.style.color=cr
}
changeColor("red")

こちらのchangeColorは、独自で作成した関数です。今回、色を変える処理を3回、繰り返します。プログラミングは、重複したコードをなるべく無くすというルールがあるので、「色を変える関数」を作成しました。

以上で、「おみくじゲーム」の実装を終了します。完成コードは、下記に貼り付けておきます。

function changeColor(cr){
  el.style.color=cr
}

omikuziButton.addEventListener("click",()=>{
  el.textContent = omikuzi[Math.floor(Math.random()*omikuzi.length)]
  addElement.appendChild(el)
  if(document.getElementById("text").textContent ==="大吉"){
    changeColor("red")
  }
  else if( document.getElementById("text").textContent ==="中吉"|| document.getElementById("text").textContent ==="小吉"){
    changeColor("black")
  }
  else if(  document.getElementById("text").textContent ==="凶"||  document.getElementById("text").textContent ==="大凶"){ 
    changeColor("rebeccapurple")
  }  
})

まとめ：DOM3

今回は、イベント、クリックイベントについて解説をしていきました。

  • クリックしたカウント数を表示する
  • 画像をフェードイン&フェードアウトさせよう
  • おみくじゲーム

イベントは、とても数が多く覚えるのが大変だと思いますが、使う度に調べながら少しずつ覚えていきましょう。
以上、kazutoでした。

関連記事

HOME >  Javascript >  DOM3