TECH EXPERT 26日目　JavaScript　　画面上の表示を変える　自由度の高いブラウザ基本表現

①HTMLファイルにJavaScriptファイルを読み込む記述をする

JavaScriptは「何かが起きたらコードを実行する」という概念に基づいて設計されてる

「何かが起きたら」の代表的な例　（イベントと呼ばれる）

loadイベント 　　　　＃ページ全体が全て読み込まれた後に、イベント発火する
clickイベント 　　　　＃指定された要素がクリックされた時に、イベントが発火する
mouseoverイベント ＃マウスカーソルが指定された要素上に乗った時に、イベントが発火する
mouseoutイベント 　＃マウスカーソルが指定された要素上から離れた時に、イベントが発火する

JavaScriptではイベントを発火させるためには、addEventListenerというメソッドを使用する

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

②イベント発火のための要素を取得

htmlファイルでidを指定します。

リストidを指定した要素を取得するため、index.jsを編集。

const pullDownButton = document.getElementById("lists")

※　console.log(pullDownButton)　一応確認しとく

③ページ読み込み後にJavaScript　が表されるように　lordイベントを使う

index.jsを編集。

window.addEventListener('load', function(){

const pullDownButton = document.getElementById("lists")
console.log(pullDownButton)　　＃表示の確認
}

④イベントを発火させる

マウスカーソルが指定の要素上に存在している時だけ、イベントが発火するように実装

mouseoverイベントを用いて実装

window.addEventListener('load', function(){

const pullDownButton = document.getElementById("lists")

pullDownButton.addEventListener('mouseover', function(){　
console.log("mouseover OK")　　＃表示の確認　カーソルを併せたときだけ出る
})
})

マウスカーソルが指定の要素から出た場合に、イベントが発火するように実装

mouseoutイベントを用いて実装

pullDownButton.addEventListener('mouseout', function(){
console.log("mouseout OK")
})

クリックすることでイベントが発火するように実装

clickイベントを用いて実装

pullDownButton.addEventListener('click', function() {
console.log("click OK")
})

次はイベントが発火した後の処理を決める。　①〜④　は下記の作業内でも繰り返す

⑤カーソルを要素上に載せるor離すと、色が変わるようにしよう。

これはmouseoverイベントが発火した際にインラインスタイルを追加し、mouseoutイベントが発火した際にインラインスタイルを取り除くことによって実現しています。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

インラインスタイル：要素の開始タグの中に直接CSSのソースコードを記述するプロパティの指定方法。インラインスタイルの追加と削除はそれぞれsetAttributeとremoveAttributeというメソッドを使用する。

setAttribute：指定した要素上に新しい属性を追加、また既存の属性の値を変更ができる。

要素.setAttribute(name,value);　

nameは属性の名前を文字列で指定
valueは属性に設定したい値を指定

（例）

const sample = document.getElementById("test")　＃要素の取得

sample.setAttribute("style", "color: red;")　＃属性（の値と名前）を追加

removeAttributeを用いることで、指定した要素から、特定の属性を削除できる。

要素.removeAttribute(name,value);　　＃書き方は　setAttribute　と同じ

nameは属性の名前を文字列で指定。
valueは属性に削除したい値を指定。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

mouseoverイベントで属性を追加

pullDownButton.setAttribute("style", "background-color:#FFBEDA;");

mouseoutイベントで属性を削除

pullDownButton.removeAttribute("style", "background-color:#FFBEDA;");

ここまでで、要素上にマウスカーソルを持っていくと、色が変化し、マウスカーソルが要素から出ると色が元に戻るように実装。

⑥要素をクリックすることでのプルダウンメニューの表示をしよう

事前準備として　リストのクラスをクラスタにCSSファイルにdisplay: none; を使って

非表示状態にしておく。ブラウザ上でのプルダウンメニューの非表示状態

発火させる要素のidの指定　HTMLファイル編集

指定したidの取得　　JSファイル編集

const pullDownParents = document.getElementById("pull-down")

HTML要素はdisplay:none;を指定しているので、非表示の状態。この指定をdisplay:block;にすることで画面上に表示させる　　Jsファイル編集

pullDownButton.addEventListener('click', function() {＃イベント、要素をクリック時に
pullDownParents.setAttribute("style", "display:block;");　＃display:block　にする
})

これで指定の要素をクリックすることで、プルダウンメニューを表示することができる

番外：発火元の要素の取得

this
関数の中でthisを使うと、イベント発火元となった要素を取得できる。

イベントで記述してる　pullDownButton　を　this に書き換えられる。

見やすいコードを意識する上でthisを用いる。

⑦　要素をクリックすることでプルダウンメニューの表示・非表示が自由に行えるようにしよう

今のままだとクリックしたら出しっぱなので、条件分岐と　getAttribute　を使って編集

指定の要素をクリックした時に、プルダウンメニューにdisplay:block;が付与されているかどうかで分岐を決める。

getAttributeメソッド
要素上の指定した属性の値を返り値として返す

要素.getAttribute(‘属性名’);

例

<div class="contents" id="apple">りんご</div>　＃classは属性名　contentsは属性値

const apple = document.getElementById("apple")　＃要素の取得

apple.getAttribute("class")
// => contents　　　＃返り値に属性値

pullDownButton.addEventListener('click', function() {
// プルダウンメニューの表示と非表示の設定
if (pullDownParents.getAttribute("style") == "display:block;") {
// pullDownParentsにdisplay:block;が付与されている場合（つまり表示されている時）実行される
pullDownParents.removeAttribute("style", "display:block;");
} else {
// pullDownParentsにdisplay:block;が付与されていない場合（つまり非表示の時）実行される
pullDownParents.setAttribute("style", "display:block;");
}
})

⑧　デバックして条件分岐の処理が問題ないか確かめよう

debbuger
debuggerを用いることで、ソースコードに処理を一旦停止させる場所を指定することが可能。指定したブレークポイントまで処理が進むことで、処理を一時的に停止することができ、処理が停止している状態で、特定の変数の値を確認したり、１行だけ処理を進めたりなど、幅広いデバッグができる。

とりまバインデングプレイ？

ifの前に記述して検証で確認する。

pullDownParents.getAttribute("style") == "display:block;"　

＃要素に　"display:block;" 　が指定されてるか。

検証が終わったら　debbuger　の記述は消しとく。

⑨プルダウンメニューのリストの文字列を取得し、その文字列を画面上に表示させる実装をしよう　（リスト１を表示してるとわかるように）

リストをイベント発火させるのでclass を指定　　　index.htmlを編集

　　　　　　　：

要素の取得　JSファイル

const pullDownChild = document.querySelectorAll(".pull-down-list")

pullDownChild（配列になっている）に格納されている要素1つひとつに対して処理forEachを用いて記述

pullDownChild.forEach(function(list) {
})

イベント発火させる記述　

list.addEventListener('click', function() {

※console.log(list)　で要素それぞれに発火できてるか確認しとくと良い

要素の文字列を取得するためには　innnerHTML　というメソッドを使う

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
innerHTMLを使用するとHTML要素の中身を取得や書き換えを行うことができる。

変数sample1 = 要素名.innerHTML　変数に指定要素のhtmlコードを代入

要素.innerHTML = 変数sample2　　指定要素に変数の値を代入

const apple = document.getElementById("apple")

console.log(apple.innerHTML)　＃要素の中身を取得
// => りんご

apple.innerHTML = "青リンゴ"　　＃青リンゴ　とブラウザ上で表示（書き換え）
console.log(apple.innerHTML)
// => 青リンゴ

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

HTMLファイルを編集、　表示させたい場所のid設定

<span id="current-list">選択されていません</span>

JSファイル編集　　　idの取得

const currentList = document.getElementById("current-list")

pullDownChild.forEach(function(list) {
list.addEventListener('click', function() {

value = list.innerHTML
currentList.innerHTML = value

動作が問題なければ実装完了！