- イベント（押されたら動く）が、どういうものか分かる
- ボタンに動きをつけて、押すとはんのうするようにできる
- 関数で「やること」を1つにまとめられる
いままで分けて学んだ JS と HTML が、ここで合体します。20〜25分。
イベントってなに？
これまでのコードは、上から下へ1回だけ動いていたね。でも本物のページは「ボタンを押したとき」「マウスがのったとき」など、何かがおきたときに動いてほしい。
この「ボタンが押された！」のような出来事を イベント といいます。プログラムは「このイベントが起きたら、これをやって」と書いておく。押されたら ○○する。これがページに動きをつける合言葉です。
ボタンに動きをつける
まずボタンのタグはこれ。<button> ではさんだ文字が、ボタンの見た目になる。
<button>おす</button>
ここに onclick（オンクリック＝クリックされたら）を足すと、押されたときにやることを指定できる。下の例は、押すと 関数 aisatsu() を呼ぶよ、という意味。
<button onclick="aisatsu()">おす</button>
関数：やることのまとまり
関数は「やること」をひとまとめにして、名前をつけたもの。名前を呼ぶだけで、中身がぜんぶ動く。下は1まいの HTML だけで動くかんぜんな例。1ファイルの中に <script> で JS を書けるんだ。
<button onclick="aisatsu()">おす</button>
<script>
// aisatsu という名前の「やること」
function aisatsu() {
alert("こんにちは！")
}
</script>
▼ ボタンを押すと…「こんにちは！」のおしらせが ぴょこんと出る
alert( ) は、カッコの中の文字をおしらせの小さい窓で出す命令。ボタン → onclick → 関数 → alert。じゅんばんに「押されたら、これをやる」がつながっているね。
テキストエディタで新しい HTML ファイルを作って、ためしてみよう。
- ボタンが1つだけの HTML を作る（
<button>おす</button>） onclickと<script>の関数を足して、押すとalertが出るようにする- 出るメッセージを、自分のことばに変えてみる（例：「やったね！」）
- （よゆうがあれば）ボタンを2つにして、それぞれ別のメッセージを出す
うまく出ないとき： ボタンの onclick="aisatsu()" の名前と、function aisatsu() の名前がそっくり同じかたしかめよう。1文字でもちがうと、コンピューターは別のものだと思ってしまう。
💡 つぎへの宿題：
alert だと、おしらせの窓が出るだけ。じゃあ「ページの中の文字そのものを書きかえたい」ときは、どう書けばいい？ AI に聞いてみよう（これが次回のテーマだよ）。
- イベントって何？（→ 「ボタンが押された」などの出来事。これが起きたら動く）
onclickには何を書く？（→ 押されたときに呼ぶ関数の名前）- 関数は何のため？（→ 「やること」を1つにまとめて名前をつけるため）
つぎの回（だい13・DOMと状態）では、おしらせ窓ではなく、ページの中の文字を直接書きかえます。