- はじめに この章では、JavaScriptでのイベントハンドリングについて学びます。イベントハンドリングにより、アプリケーションがクリックやキー押下などのユーザーアクションに対応できるようになります。楽しく魅力的な形でコンセプトを案内してくれる、GeekとGalと一緒に、この興味深いトピックに飛び込んでいきましょう！
イベントハンドリングについて学ぶ準備はできてる？
もちろん！自分のウェブページをインタラクティブにする方法を知りたいんだ。
いいね！イベントハンドリングは、ユーザーアクションに反応することがすべて。JavaScriptでは、「イベントハンドラ」と呼ばれる関数を使って、これらのインタラクションを管理するわよ。
- イベントハンドラの作成
まずはイベントハンドラを作ってみましょう。クリックするとアラートが表示されるシンプルなボタンを作るわ。この例を見て！
<!DOCTYPE html>
<html>
<head>
<title>イベントハンドリングの例</title>
<script>
function handleClick() {
alert('ボタンがクリックされました！');
}
</script>
</head>
<body>
<button onclick="handleClick()">クリックしてね！</button>
</body>
</html>
ああ、わかった！「handleClick」という関数を定義してアラートを表示させ、その関数をボタンの"onclick"属性に割り当てているんだね。
その通り！ボタンがクリックされると、「handleClick」関数が呼び出され、アラートが表示されるわ。
- ユーモラスな例
イベントハンドリングを使った面白い例はどんなものかな？
もちろん！クリックするとランダムなジョークが表示されるボタンがあるウェブページを作ってみましょう！
<!DOCTYPE html>
<html>
<head>
<title>イベントハンドリング: ジョークジェネレータ</title>
<script>
function tellJoke() {
const jokes = [
"なぜ科学者は原子を信用しないの？だって、すべてを作り出してしまうから！",
"なぜかかしは賞を受賞したの？だって、彼は自分の分野で目立っていたから！",
"なぜトマトは赤くなったの？だって、サラダドレッシングを見てしまったから！"
];
const randomJoke = jokes[Math.floor(Math.random() * jokes.length)];
alert(randomJoke);
}
</script>
</head>
<body>
<button onclick="tellJoke()">ジョークを教えて！</button>
</body>
</html>
ハハ、素晴らしい！ボタンをクリックするとランダムなジョークが表示されるジョークジェネレータを作ったね！
気に入ってくれてうれしいわ！イベントハンドリングを使って、ウェブページをインタラクティブにする練習を続けてね！
- おわりに JavaScriptでのイベントハンドリングを使うことで、ユーザーアクションに応答するインタラクティブなウェブページを作成できます。イベントハンドラを使用して、魅力的な体験を提供し、ウェブアプリケーションを活気づけましょう！学びと実験を続けて、素晴らしいウェブアプリを作成しましょう！😄