Javascript文法ノート

分析するコード

function pullDown(){

  // 変数の定義
  const pullDownButton = document.getElementById("lists")
  const pullDownParents = document.getElementById("pull-down")
  const pullDownChild = document.querySelectorAll(".pull-down-list")
  const currentList = document.getElementById("current-list")

    // イベント発火の条件定義①
  pullDownButton.addEventListener('mouseover', function(){
    this.setAttribute("style", "background-color:#FFBEDA;")
  })


  // イベント発火の条件定義②
  pullDownButton.addEventListener('mouseout', function(){
    this.removeAttribute("style", "background-color:#FFBEDA;")
  })

    // イベント発火の条件定義③
  pullDownButton.addEventListener('click', function() {
    if (pullDownParents.getAttribute("style") == "display:block;") {
      pullDownParents.removeAttribute("style", "display:block;")
    } else {
      pullDownParents.setAttribute("style", "display:block;")
    }
  })

    // イベント発火の条件定義④
  pullDownChild.forEach(function(list) {
    list.addEventListener('click', function() {
      value = list.innerHTML
      console.log(value)
      currentList.innerHTML = value
    })
  })
}

window.addEventListener('load', pullDown)
// メソッドの使用によるイベント発火
// Rubyのように、メソッド使用（発動）してから前に戻って参照する構造

以下、上記コードの分解分析

##分解分析

window.addEventListener('load', pullDown)

最上位のWindowオブジェクトを起点としてブラウザオブジェクトは階層構造になっている。
省略を行う事ができる。
このコードでは、ページが読み込まれた後にJavaScriptのコードを実行するように、loadイベントを用いて書かれている。
「イベント名＝'load'」と 「関数＝pullDown」を

function pullDown(){

       〜省略〜
 
}

「pullDown」という関数を定義する。
仮引数は無し。
javascriptでは、仮引数が存在していなくても( )を記述する決まり。

  // 変数の定義
  const pullDownButton = document.getElementById("lists")            // イベント発火の条件を変数として定義①　「pullDownButton」

  const pullDownParents = document.getElementById("pull-down")       // イベント発火の条件を変数として定義②　「pullDownParents」

  const pullDownChild = document.querySelectorAll(".pull-down-list") // イベント発火の条件を変数として定義③　「pullDownChild」

  const currentList = document.getElementById("current-list")        // イベント発火の条件を変数として定義④　「currentList」
 

イベント発火の条件を「変数」として定義する。
　・「①pullDownButton」
　・「②pullDownParents」
　・「③pullDownChild」
　・「④currentList」

■getElementById（①②④）　
→DOMツリーから特定のHTMLの要素を取得するためのメソッドの1つ。
　引数に渡したidを持つ要素を取得する。

■querySelectorAll（③）
→セレクタ名とは、CSSでスタイルを適用するために指定している要素。
　セレクタ名を指定して取得する場合、本メソッドを使用する。

   // イベント発火の条件定義①
  pullDownButton.addEventListener('mouseover', function(){
    this.setAttribute("style", "background-color:#FFBEDA;")
  })　

「pullDownButton」を要素として、mouseover時にイベント発火する。
そして発火内容を関数内に書いていく。
id="test" 　style="color: red;" が取得できる。

  // イベント発火の条件定義②
  pullDownButton.addEventListener('mouseout', function(){
    this.removeAttribute("style", "background-color:#FFBEDA;")
  })

「pullDownButton」を要素として、mouseout時にイベント発火する。
そして発火内容を関数内に書いていく。
id="style" 　style="background-color:#FFBEDA;" が取得できる。

  // イベント発火の条件定義③
  pullDownButton.addEventListener('click', function() {
    if (pullDownParents.getAttribute("style") == "display:block;") {
      pullDownParents.removeAttribute("style", "display:block;")
    } else {
      pullDownParents.setAttribute("style", "display:block;")
    }
  })

「 pullDownButton」を要素として、click時にイベント発火する。
そして発火条件と処理内容は以下の通り。
【if】
pullDownParents.getAttribute("style") == "display:block;"ならば
→pullDownParents.removeAttribute("style", "display:block;"とする。

【else】
pullDownParents.getAttribute("style") == "display:block;"じゃなければ
pullDownParents.setAttribute("style", "display:block;")とする。

    // イベント発火の条件定義④
  pullDownChild.forEach(function(list) {
    list.addEventListener('click', function() {
      value = list.innerHTML
      console.log(value)
      currentList.innerHTML = value
    })
  })

「pullDownChild」を要素として、mouseout時にイベント発火する。
listをvaluとして

　　value = list.innerHTML
console.log(value)
currentList.innerHTML = value

を処理する。

※前提知識

関数

function 関数名(引数) {
  // 処理
}

関数式

// 関数式
変数 = function( 引数 ){
  // 関数内の処理
}

無名関数

// 関数宣言
function hello(){
  console.log('hello')
}

//↕比較

// 関数式（無名関数）
const hello = function(){
  console.log('hello')
}

即時関数

// 無名関数
const countNum = function(num) {
  console.log(num)
}
countNum(1)

//↕比較

// 即時関数
(function countNum(num) {
  console.log(num)
})(1)

アロー関数

// 無名関数
const 変数名 = function(){
  処理
}

//↕比較


// アロー関数
const 変数名 = () => {
  処理
}

addEventListener

要素.addEventListener('イベント名', 関数)

DOMツリーからのHTML取得方法

document.getElementById("id名")

document.getElementById("id名")

document.getElementsByClassName("class名")

document.getElementsByClassName("class名")

document.querySelectorAll("セレクタ名")

document.querySelectorAll("セレクタ名")

イベント

| イベント名| 発火条件 |
| ------------ | ------- | ------------- |
| load|ページ全体が全て読み込まれた時。|
| click | 指定された要素がクリックされた時。|
| mouseover| マウスカーソルが指定された要素上に乗った時。|
| mouseout | マウスカーソルが指定された要素上から外れた時。|

↓（例）

window.alert("ブラウザオブジェクトの取得に成功！")

プロパティとは？

変数名 = {キー:バリュー}

//右辺をプロパティと呼ぶ

オブジェクトとは？

let human = {
     name: "Jhon",
     gender: "man",
     age: 24
}

//=以降の{}をオブジェクト（=プロパティの集合体）と呼ぶ

条件分岐

if (条件式1) {
  // 条件式1がtrueのときの処理
} else if (条件式2) {
  // 条件式1がfalseで条件式2がtrueのときの処理
} else {
  // 条件式1も条件式2もfalseのときの処理
}

繰り返し処理

for ([①初期化式]; [②条件式]; [③加算式]) {
  // 繰り返す処理の内容
}


配列.forEach( function(value){
  // 処理の記述
})