■

JavaScriptでのweb表示変えをするには

前提知識

・イベント　

　　HTMLに対して行われた処理の要求のこと

・イベントの発火　

　イベントを認識してJavaScriptのコードが動き出すこと

・addEventListener()　

　イベント発火時に実行する関数を定義　　　　　　　　　　　　　

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

機能の実装の流れ

1:イベントを発火させる要素の指定(HTMLのファイルに記述)

↓

2:指定した要素を取得し、変数に取得した要素を代入   

　記述例/const pullDownButton = document.getElementById("lists")

↓

3:取得した要素をaddEventListenerメソッドを使ってイベントを発火 　

　記述例/pullDownButton.addEventListener('mouseover', function(){    　　　処理　　　  })
   代表的なイベント名　

　　loadイベント ページ全体が全て読み込まれた後　

　　clickイベント 指定された要素がクリックされた時　

　　mouseoverイベント　マウスカーソルが指定された要素上に乗った時　

　　mouseoutイベント マウスカーソルが指定された要素上から外れた時

他必要な知識

・script要素　

　<script src="JavaScriptのファイル名"></script>    

　HTMLに記述　　　　

　JavaScriptのコードの埋め込みや参照に使用

・プルダウンメニューを表示する方法

・this　

　イベント発火元となった要素を取得

・要素の属性を取得・指定・取り除く方法

・インラインスタイル　

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

　　setAttributeメソッド

　　removeAttributeメソッド

・innerHTML　

     HTML要素の取得や書き換えを行う

・getAttributeメソッド　

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

・debugger　

     ソースコードに処理を一旦停止させる場所を指定することができる