JavaScriptの基本を学んだ後は、イベントハンドリングとDOM操作の応用を理解することで、よりインタラクティブなWebページを作成できるようになります。本記事では、これらの技術を具体例を用いてわかりやすく解説します。
イベントハンドリングとは？
イベントの概要
Webページ上で発生するユーザーの操作やシステムの動作を「イベント」と呼びます。
主なイベント例
- クリック（
click） - キー入力（
keydown、keyup） - マウス移動（
mousemove） - フォーム送信（
submit）
イベントハンドラー
イベントが発生した際に実行される関数のことを「イベントハンドラー」と呼びます。
DOM操作とは？
DOM（Document Object Model）の概要
DOMは、HTML文書をプログラムで操作できるようにしたモデルです。
主な操作例
- 要素の取得
- 要素の追加や削除
- 要素の属性や内容の変更
イベントハンドリングの応用
1. クリックイベントの処理
コード例
以下の例では、ボタンをクリックするとメッセージが表示されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>クリックイベントの例</title>
</head>
<body>
<button id="myButton">クリックしてメッセージを表示</button>
<p id="message"></p>
<script>
const button = document.getElementById('myButton');
const message = document.getElementById('message');
button.addEventListener('click', function() {
message.textContent = 'ボタンがクリックされました！';
});
</script>
</body>
</html>
実行結果
- ボタンをクリックすると、
<p>要素に「ボタンがクリックされました！」というメッセージが表示されます。
2. マウスオーバーイベント
コード例
以下の例では、画像にマウスを乗せると説明が表示されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>マウスオーバーイベントの例</title>
</head>
<body>
<img id="myImage" src="example.jpg" alt="Example Image" style="width:200px;">
<p id="description"></p>
<script>
const image = document.getElementById('myImage');
const description = document.getElementById('description');
image.addEventListener('mouseover', function() {
description.textContent = 'これはサンプル画像です。';
});
image.addEventListener('mouseout', function() {
description.textContent = '';
});
</script>
</body>
</html>
実行結果
- 画像にマウスを乗せると説明が表示され、マウスを離すと説明が消えます。
DOM操作の応用
1. 要素の追加と削除
コード例
以下の例では、ボタンをクリックするとリストアイテムを追加または削除します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>要素の追加と削除</title>
</head>
<body>
<ul id="myList">
<li>アイテム1</li>
<li>アイテム2</li>
</ul>
<button id="addButton">アイテムを追加</button>
<button id="removeButton">アイテムを削除</button>
<script>
const list = document.getElementById('myList');
const addButton = document.getElementById('addButton');
const removeButton = document.getElementById('removeButton');
addButton.addEventListener('click', function() {
const newItem = document.createElement('li');
newItem.textContent = `アイテム${list.children.length + 1}`;
list.appendChild(newItem);
});
removeButton.addEventListener('click', function() {
if (list.children.length > 0) {
list.removeChild(list.lastElementChild);
}
});
</script>
</body>
</html>
実行結果
- 「アイテムを追加」ボタンをクリックするとリストに新しいアイテムが追加されます。
- 「アイテムを削除」ボタンをクリックすると最後のアイテムが削除されます。
2. クラス操作
コード例
以下の例では、ボタンをクリックするとテキストの色が変わります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>クラス操作の例</title>
<style>
.highlight {
color: red;
}
</style>
</head>
<body>
<p id="myText">このテキストの色を変えます。</p>
<button id="toggleButton">色を変更</button>
<script>
const text = document.getElementById('myText');
const toggleButton = document.getElementById('toggleButton');
toggleButton.addEventListener('click', function() {
text.classList.toggle('highlight');
});
</script>
</body>
</html>
実行結果
- ボタンをクリックすると、テキストの色が赤に変わり、もう一度クリックすると元に戻ります。
学習のポイント
- イベントの種類を把握する:
- よく使うイベント（クリック、フォーム送信、マウスオーバーなど）を中心に学ぶ。
- DOM操作を繰り返し練習:
- 要素の取得、追加、削除、属性の変更など基本的な操作を試す。
- ブラウザのデベロッパーツールを活用:
- コンソールを使ってエラーを確認しながら開発を進める。
まとめ
JavaScriptのイベントハンドリングとDOM操作は、動的でインタラクティブなWebページを作るための重要なスキルです。これらの技術を使いこなすことで、ユーザー体験を大幅に向上させることができます。
次回は「シンプルなフレームワークの導入（例：Reactの基本）」について解説します。お楽しみに！
コメント