イベントはページの上で起きる出来事
イベントは、クリックや入力のように、ページの上で起きる出来事です。JavaScript は、イベントが起きたときに関数を呼び、フォームに入れた値が正しいかを確かめます。
学園祭の座席予約フォームを例に、クリックの処理と、入力の検証を学びます。
このレッスンのゴール
メモ
イベントで入力を受け取り、フォームの値が正しいかを確かめられる。
重要な言葉
| ことば | いみ | れい |
|---|---|---|
| イベント | クリックや入力など、ページの上で起きる出来事 | click |
| リスナー | イベントが起きたとき呼ばれる関数 | |
| preventDefault | ブラウザの初めの動きを止める命令 | |
| value | 入力欄に入っている文字 | |
| 検証 | 入力が決まりに合うか確かめること |
学生が入力するセルは、このプレビューでは空白です。
クリックでリスナーが呼ばれる
イベントが起きると、登録した関数が呼ばれます。この関数をリスナーと呼びます。
リスナーは、起きたことを、書いた順に1つずつ処理します。変数に値を覚えさせると、押した回数のような、前の状態を使えます。
例: 押した回数を数える
<button id="like">いいね</button>
<p id="total">0 回</p>
フォームの値は value で読む
入力欄の中の文字は、value で読みます。数字を入れても、値は文字列として返ります。
数として使うなら、Number(...) で変えます。前後の空白は、trim() で取ります。
例: 人数に1を足す
<form id="f">
<label for="seats">人数</label>
<input id="seats" type="text">
<button type="submit">計算する</button>
</form>
<p id="msg"></p>
送信を止めて、自分で確かめる
フォームの送信ボタンを押すと、ブラウザは、ページを読み込み直します。event.preventDefault() は、この初めの動きを止めます。
そのうえで JavaScript が値を確かめ、正しいときだけ先に進めます。誤りがあれば、どの欄かを利用者に伝えます。
検証は決まりを順に調べる
検証は、入力が決まりに合うかを調べることです。空でないか、数字か、範囲に入っているかを、順に確かめます。
誤りは、どの欄が、なぜ誤りかを、利用者に伝えます。短く、直し方が分かる言葉にします。
例: 席の予約フォームの決まり
| 欄 | 決まり | 誤りの例 |
|---|---|---|
| 名前 | 空でない | 空白だけ |
| メール | @ が1つあり、後ろに . がある | mori@ |
| 人数 | 1から4の整数 | 5 や abc |
学生が入力するセルは、このプレビューでは空白です。
練習: 人数を検証する
<p id="msg"></p>
よくある間違い
注意
ページで検証したから、安全だと考える人がいます。ブラウザの検証は、利用者への親切です。誰でもそれを避けて、サーバーに直接送れます。だから、サーバーでも必ず検証します。
ラボのフォームを確かめる
ラボのページにも、フォームがあります。grep で、ページに入力欄とラベルがいくつあるかと、送信を止める行を探します。
-c は、その言葉を含む行の数を出し、-n は行の番号を付けて出します。ラボのページを変えていなければ、ラベルも入力欄も1つずつです。
label の行を数える
docker exec jupyter grep -c "<label" site/index.htmlここでは表示のみで、実行されません。無料アカウントを作成すると、実行ボタンで自分のラボのターミナルに入力できます。
input の行を数える
docker exec jupyter grep -c "<input" site/index.htmlここでは表示のみで、実行されません。無料アカウントを作成すると、実行ボタンで自分のラボのターミナルに入力できます。
送信を止める行を探す
docker exec jupyter grep -n preventDefault site/app.jsここでは表示のみで、実行されません。無料アカウントを作成すると、実行ボタンで自分のラボのターミナルに入力できます。