【学習43日】JavaScriptで画面を動かす【応用6日】

■Javascriptでサイト上の画面を変える_大きな流れ

①DOMオブジェクトをHTMLの中から取得

②イベントリスナーでイベントと処理を紐づける

③画面でイベント発動→イベントリスナで紐づいた処理が実行

■語句説明

DOM（document object model）

HTMLの要素をJavascriptで扱えるようにする仕組み

HTMLのひとつひとつに対応するオブジェクトのことをDOMオブジェクトという。

①DOMオブジェクトをHTMLの中から取得

（1）IDで取得

Document.getElementById(“ID名”)

（2）クラスで取得

Document.getElementsByClsss(“クラス名”)

（3）セレクタで取得

Document.querySelector(“セレクタ名”)

そのID塊、そのクラスの塊、そのセレクタが適応された塊を

DOMオブジェクト（JSで扱えるオブジェクト）として取得することで

Javascriptの処理ができるようになる。

②イベントリスナーでイベントと処理を紐づける

• イベントとは

クリック、マウスオーバーなど画面上で起きる出来事。

マウスオーバーしてメニューが表示されるのもイベントの1つ。

• イベントリスナーとは

イベントとJavascriptの処理（関数）を紐づけること。

処理（関数）の数だけイベントリスナーが必要。

• 基本の書き方

DOMオブジェクト.addEventlistener(“イベント名”,関数);

• 実践的な書き方（関数をいちいち宣言するのは冗長）

DOMオブジェクト.addEventlistener(“イベント名”, function{

処理〜〜〜〜

});

• 画面がロードされてからの処理

Javascriptの順番によってはエラーになることもある。

→画面をロード（読み込み表示）させてから各種処理を動かす。

Window.addEventListener(“load”, function(){

ここに動かしたい処理を書く

});

※windowオブジェクトは、元から用意されているブラウザの情報を持つオブジェクト

②イベントリスナーでイベントと処理を紐づける_処理も色々

• innerHTML

HTMLの中の値を取得する

  changeText.innerHTML = '変更されました';

• classList.add

DOMオブジェクトにクラスを追加する

btn3.addEventListener("click", function() {
  changeText.classList.add("red");
  console.log(changeText.classList); // ここに追加
});

• classList.remove

DOMオブジェクトからクラスを削除する

// Button4を取得して、変数で定義
let btn4 = document.querySelector("#Button4");

// div要素を取得して、変数で定義
let obj = document.querySelector("div");

// クラス削除を押したらblueクラスが削除される
btn4.addEventListener("click", function() {
  obj.classList.remove("blue");
});

〜〜最終的なコード〜

window.addEventListener("load", function() {
  let btn = document.querySelector("button#Button");

  btn.addEventListener("click", function() {
    console.log("Hello world");
  });

  // テキストの要素を取得し、変数で定義
  let btn2 = document.querySelector("button#Button2");
  let changeText = document.querySelector("p");

  // ボタン2をクリックしたらテキストが置換される
  btn2.addEventListener("click", function() {
    changeText.innerHTML = '変更されました';
  });

  // Button3を取得して、変数で定義
  let btn3 = document.querySelector("#Button3");

  // クラス追加を押したらredクラスが追加される
  btn3.addEventListener("click", function() {
    changeText.classList.add("red");
  });

  // Button4を取得して、変数で定義
  let btn4 = document.querySelector("#Button4");
  // div要素を取得して、変数で定義
  let obj = document.querySelector("div");

  // クラス削除を押したらblueクラスが削除される
  btn4.addEventListener("click", function() {
    obj.classList.remove("blue");
  });
});