JavaScriptをファイルに書く
script要素
- script要素とは、実行できるコードを埋め込んだり参照するために使用するHTMLです。
一般的には、JavaScriptのコードの埋め込みや参照に使用します。 index.html
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="index.css"> <script src="index.js"></script> <meta charset="UTF-8"> // 省略
- をhtmlファイルに記述をします。
JavaScriptのコードが実行される仕組み
- JavaScriptは「何かが起きたらコードを実行する」という概念で設計されています。
この「何かが起きたら」は「イベント」と呼ばれます。
イベントの発火
- JavaScriptにおけるイベントは、HTMLに対して行われた処理の要求のことを言います。
- 例えば、「ユーザーがブラウザ上のボタンをクリックした」「テキストフィールドでキー入力をした」「要素の上にマウスカーソルを乗せた」などがイベントです。
- イベントを認識してJavaScriptのコードが動き出すことを「イベント発火」と言います。
イベント発火の例
| イベント名 | 説明 |
|---|---|
| loadイベント | ページ全体がすべて読み込まれたあとに、イベント発火する |
| clickイベント | 指定された要素がクリックされたときにイベント発火する |
| mouseoverイベント | マウスカーソルが指定された要素上に乗ったときに、イベント発火する |
| mouseoutイベント | マウスカーソルが指定された要素上から外れたときに、イベント発火する |
addEventListener()メソッド
- JavaScriptを発火させるために使用するメソッドです。
要素.addEventListener('イベント名',関数)
- ページ全体がブラウザに読み込まれたあとに、JavaScriptのコードを読み込ませるようにします。
window.addEventListener('load', function(){ const pullDownButton = document.getElementById("lists") })
※html上にlistsというidを設定しています。
//省略 <li class = "background-red" id = "lists">リスト</li> //省略
マウスカーソルが要素の上に乗ったときにイベント発火
window.addEventListener('load', function(){ const pullDownButton = document.getElementById("lists") pullDownButton = .addEventListener('mouseover', function(){ console.log("mouseover OK") }) })
- こちらはlistsにマウスオーバーをするとコンソール上で「mouseover OK」と表示されれば、イベント発火されています。
マウスカーソルが要素から外れたときにイベント発火
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") }) })
- こちらはlistsから、マウスが外れるとコンソール上で「mouseout OK」と表示されれば、イベント発火されています。
クリックするごとにイベント発火
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") }) })
- こちらはlistsをクリックするとコンソール上で「Click OK」と表示されれば、イベント発火されています。
以上がイベントの内容になります。
