押すと、変わるページ
いいねボタンを押すと、数がふえます。メニューを押すと、一覧が開きます。
こうした動きは、HTMLやCSSだけでは作れません。ページに「動き」をつけるのが、JavaScriptです。
今日は、ボタンを押すと、文字が変わるページを作ります。
今日のキーワード
| ことば | いみ | れい |
|---|---|---|
| JavaScript | ページに動きをつける、プログラムの言葉です。 | ボタンで文字を変える |
| イベント | ボタンを押すなど、ページで起きる出来事です。 | click(クリック) |
| 関数 | まとめて名前をつけた、ひとかたまりの命令です。 | function change() { ... } |
| id | ページの部品につける、ほかと重ならない名前です。 | id="message" |
| 変数 | 数や文字を入れておく、名前つきの箱です。 | let count = 0; |
学生が入力するセルは、このプレビューでは空白です。
やってみよう: 文字を変える
<p id="message">まだ押されていません。</p>
<button id="btn">押してください</button>
三つの部分
先ほどのプログラムは、三つの部分でできています。
一つ目は、部品を探すことです。getElementById に、id を渡します。
二つ目は、イベントを待つことです。三つ目は、文字を書きかえることです。textContent が、部品の文字を表します。
プログラムの部分と役目
| 書き方 | 役目 |
|---|---|
| document.getElementById("btn") | idが btn の部品を探す |
| addEventListener("click", ...) | 押されるのを待つ |
| function () { ... } | 押されたときにする、ひとまとまりの命令 |
| textContent = "..." | 部品の文字を書きかえる |
学生が入力するセルは、このプレビューでは空白です。
小さな確認: どの部分?
やってみよう
小さな確認: どの部分?
4問挑戦してみましょう。回答はここで採点され、その後は保存されません。点数を残したい場合や、続きから再開したい場合はログインしてください。ログインして点数を保存
答えはここで採点され、保存されません。アカウントがあれば、結果が残ります。
数をふやす
数えるには、変数を使います。変数は、数を入れておく、名前つきの箱です。
let count = 0; で、count という箱に、0を入れます。
count = count + 1; で、箱の中身に、1を足します。押すたびに、数がふえます。
やってみよう: 押した回数
<p>押した回数: <span id="count">0</span></p>
<button id="btn">いいね</button>