JavaScriptで画面上の表示を変える

・まずはHTMLファイルにJavaScriptファイルを読み込む。

・script要素

実行できるコードを埋め込んだり参照したりするために使用されるHTML。
一般的には、JavaScriptのコードの埋め込みや参照に使用される。

# JavaScriptファイルを読み込む記述  （index.jsファイルが読み込まれる）

<script src="index.js"></script>

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

・JavaScriptのコードが実行される仕組み

JavaScriptは「何かが起きたら（＝イベント）、コードを実行する」という概念に基づいて設計されている。

・イベント
HTMLに対して行われた処理の要求のこと。
例えば「ユーザーがブラウザ上のボタンをクリックした」「テキストフィールドでキー入力をした」「要素の上にマウスカーソルを乗せた」など。

また、イベントを認識してJavaScriptのコード（特に関数）が動き出すことを「イベント発火」と言う。

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

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

・addEventListener

イベント発火の際に実行する関数を定義するためのメソッド。

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

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

使い方

HTMLファイルでidを指定。index.htmlに以下のように追記しましょう。

# index.htmlに記述

<header>
# 中略
     <li class="background-red" id="lists">リスト
     </li>
# 中略
</header>

idを指定した要素を取得。index.jsに記述する。
ただし、ページ全体がブラウザに読み込まれた後にJavaScriptのコードが読み込まれるようにする必要がある。(loadイベント)

# index.jsに記述

window.addEventListener('load', function(){             # ページが読み込まれた後にJavaScriptのコードを実行する

const pullDownButton = document.getElementById("lists")
console.log(pullDownButton)

})

・マウスカーソルが要素の上に乗った時にイベント発火させたい時
mouseoverイベント：マウスカーソルが指定の要素上に乗った時に、イベントが発火する

# index.jsに記述

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

 const pullDownButton = document.getElementById("lists")

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

同様に・・・
○マウスカーソルが要素から外れた時にイベント発火させたい時
　　　　　　　　　　　　　　　　　　・・・mouseoutイベント
○クリックすることでイベント発火させたい時・・・clickイベント

window.addEventListener('load', function(){
 const pullDownButton = document.getElementById("lists")

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

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

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

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

・JavaScriptでスタイルを操作するには

・インラインスタイル
HTML要素の開始タグの中に、直接CSSのソースコードを記述するプロパティの指定方法。

インラインスタイルの追加と削除はそれぞれsetAttributeとremoveAttributeというメソッドを使用する。

・setAttributeメソッド

指定した要素上に新しい属性を追加、または既存の属性の値を変更できるメソッド。

要素.setAttribute(name, value)

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

例えば、

# HTMLで下記記述の場合、
<div id="test">テスト</div>


# setAttributeメソッドを使うと、
const sample = document.getElementById("test")

sample.setAttribute("style", "color: red;")


# => <div id="test" style="color: red;">テスト</div> が取得（付与）できる

・removeAttributeメソッド

指定した要素から、特定の属性を削除できるメソッド。

要素.removeAttribute(name, value)

# name・・・属性の名前を、文字列で指定。
# value・・・属性の中の、削除したい値を指定。

例えば、

# HTMLで下記記述の場合、
<div class="contents" id="apple">りんご</div>


# removeAttributeメソッドを使うと、
const apple = document.getElementById("apple")

apple.removeAttribute("class", "contents")


# => <div id="apple">りんご</div> として取得できる。

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

・イベントが発火した要素を取得するには

・this

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

thisは、使用する場面によって取得できるものが異なる。ここでは「イベント発火元となった要素を取得することができる」と捉えている。

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

現状の属性状態（表示/非表示など）を確認するためには、付与されているインラインスタイルを取得する必要がある。
・・・属性の取得はgetAttributeメソッドを使用する。

・getAttributeメソッド

要素上の指定した属性の値を戻り値として返す。

要素.getAttribute('属性名')

例えば、

# HTMLで下記記述の場合、
<div class="contents" id="apple">りんご</div>


# getAttributeメソッドを使うと、
const apple = document.getElementById("apple")

apple.getAttribute("class")


# => contents というclass名が取得できる。

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

・debugger

ソースコードに処理を一旦停止させる場所を指定できる。
指定したブレークポイントまで処理が進み、処理が一時的に停止する。

処理が停止している状態で、特定の変数の値を確認したり、1行だけ処理を進めたりなど、幅広いデバッグが可能になる。

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

# 中略

 pullDownButton.addEventListener('click', function() {
   debugger                                            # ここで処理を止める

                                                       # プルダウンメニューの表示と非表示の設定
   if (pullDownParents.getAttribute("style") == "display:block;") {
     pullDownParents.removeAttribute("style", "display:block;")
   } else {
     pullDownParents.setAttribute("style", "display:block;")
   }
 })

})

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

・innerHTML

指定したHTML要素（の文字列）を取得したり、書き換えを行ったりすることができる。

# HTMLで下記記述の場合、
<div class="contents" id="apple">りんご</div>


# innerHTMLで取得
const apple = document.getElementById("apple")
console.log(apple.innerHTML)

# => りんご


# innerHTMLで書き換え
apple.innerHTML = "青リンゴ"
console.log(apple.innerHTML)

# => 青リンゴ

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

window.addEventListenerを設置して、ページが読み込まれた後にその中の処理を実行していた。
その中の処理に名前をつけることができない、というデメリット。

冒頭に関数を設けてみると、

function pullDown() {
                        # 何らかの処理
}

window.addEventListener('load', pullDown)

window.addEventListenerが呼ばれたら、関数pullDownが実行される仕組みが取れる。

2020/11/13