学習のアウトプット（JavaScript3）

【script要素】

HTMLのタグの1つで、headタグの中に記述する。

JavaScriptだけで使うものでは無いようだが、基本的にはJavaScriptのコードを埋め込んだり参照したりするのに使うらしい。

<script src=ファイル名></script>

とする事で、ファイル（今回は○○.jsという名称のJavaScriptファイル）を読み込める。

この記述をした後に、jsファイルを編集していく。

（JavaScriptは、編集後にブラウザのリロードをしないと反映しない）

---------------------------------------------------------------------------------

【イベント】

JavaScriptは「何かが起きたらコードを実行する」という仕組みになっている。

この「何かが起きる」ことを『イベント』と呼ぶ。

また、イベントによってJavaScriptのコード（関数など）が起動することを

『イベント発火』と表現する。

・イベント例

ボタンをクリックする、カーソルを乗せるなど

・イベント発火の例

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

---------------------------------------------------------------------------------

【addEventListener】

イベント発火の時に起動する関数を定義するメソッド。

要素.addEventListener('イベント名', 関数）と記述する。

※Listenerはリスナー

※要素はgetElement○○のメソッドで取得する

---------------------------------------------------------------------------------

【loadイベント】

JavaScriptのコードは、そのままではHTMLのコードより先に読み込まれる。

その為、例えば上記のgetElementメソッドをそのまま用いると、

ブラウザにHTMLが読み込まれる前に指定の要素を取得しようとする。

（→取得できず、結果がnullとなってしまう）

これを避けるために、loadイベントを使う。

loadによって、順番がページの読み込み→JavaScriptのコード実行

となる。

・書き方

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

　関数の内容

}

例えば「○○の要素を取得して、この要素にカーソルが乗った時に色を変える」というような内容が関数の中身に入る。

（詳しくは後述）

---------------------------------------------------------------------------------

【インラインスタイル】

HTMLの開始側のタグに、CSSを直接書き込む方法。

インラインスタイルの追加：setAttributeメソッド

インラインスタイルの削除：removeAttributeメソッド

を用いて記述する。

---------------------------------------------------------------------------------

【setAttributeメソッド】

指定した要素に新しい属性を追加（または上書き）するメソッド。

※attributeは「属性」という意味。

要素.setAttribute(name, value)

nameは属性の名前、valueは属性に指定したい値を記述する。

例）

const sample = document.getElementById("test")

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

→「idがtestである要素に対して、styleがcolor redの状態で取り出す」という意味。

【removeAttributeメソッド】

指定した要素から、特定の属性を取り除くメソッド。

書き方はsetAttributeと同じ。

---------------------------------------------------------------------------------

【カーソルを乗せると色が変わり、外すと色が戻る実装】

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

loadイベントによって、ページが読み込まれてからJavaScriptコードが実行される

  const pullDownButton = document.getElementById("lists")

  listsというid名の要素を取得して、pullDownBottunという変数に代入する

  pullDownButton.addEventListener('mouseover', function(){

  pullDownButtonにマウスを乗せるとイベント発火する

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

    pullDownButtonにstyle→背景色#FFBEDAを属性追加する

    }

  pullDownButton.addEventListener('mouseout', function(){

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

    マウスを外すとstyle→背景色#FFBEDAが解除される

    }

})

---------------------------------------------------------------------------------

【プルダウンメニューの実装】

プルダウンメニューは、単にプルダウンメニューを記述しただけでは表示されたままになるので、予めdisplay: none;を仕込んでおき、クリックした時にdisplay: blockに変わるようにすればよい。

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

  const pullDownButton = document.getElementById("lists")

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

  pull-downというid名の要素を取得して、pullDownParentsという変数に代入する

  pullDownButton.addEventListener('mouseover', function(){

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

    }

  pullDownButton.addEventListener('mouseout', function(){

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

    }

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

  pullDownButtonをクリックするとイベント発火する

    pullDownParents.setAttribute("style", "display: block;")

    pullDownParentsにstyle→display: block;を属性追加する

  }

})