JavaScript - フォームイベント：初級者のガイド

こんにちは、将来の開発者さんたち！コンピュータサイエンスの教師として多くの経験を積んでいる私は、JavaScriptのフォームイベントのエキサイティングな世界をあなた们に案内するのがとても楽しみです。プログラミングが初めてであっても心配しないでください。基本から始めて、少しずつ進んでいきます。コーヒーを淹れて、リラックスして、一緒にど深深めましょう！

フォームイベントとは？

本題に入る前に、フォームイベントとは何かを理解しましょう。ウェブ開発では、フォームはデジタルな書類のようなものです。ユーザーから情報を収集します。フォームイベントは、ユーザーがこれらのフォームと interact する際に起こる特別な出来事です。就職活動中进行っている履歴書を書いているとき、受付があなたがペンを持ち上げたり置いたりするたびに気づくようなものです。それがデジタル世界でのフォームイベントの役割です！

一般的なフォームイベント

以下是一些最常见的 forms events you'll encounter:

イベント名	説明
submit	フォームが送信されたときにトリガーされる
reset	フォームがリセットされたときにトリガーされる
focus	要素がフォーカスを受け取ったときにトリガーされる
blur	要素がフォーカスを失ったときにトリガーされる
change	入力要素の値が変わったときにトリガーされる
input	入力要素の値が変わったときにトリガーされる（各キーストロークごとに）

これらの各イベントについて、いくつかの実践的な例で見ていきましょう！

フォームイベントの実例

1. サブミットイベント

サブミットイベントは、最も一般的なフォームイベントの1つです。ユーザーがフォームを送信しようとしたときにトリガーされます。

<form id="myForm">
<input type="text" id="name" placeholder="あなたの名前を入力してください">
<button type="submit">送信</button>
</form>

<script>
document.getElementById("myForm").addEventListener("submit", function(event) {
event.preventDefault(); // フォームが実際に送信されるのを防ぐ
var name = document.getElementById("name").value;
alert("こんにちは、" + name + "さん！あなたのフォームが送信されました。");
});
</script>

この例では、フォームのサブミットイベントをリスening しています。イベントが発生すると、デフォルトの動作を阻止し、名前の入力値を取得して、挨拶のアラートを表示します。

2. リセットイベント

リセットイベントは、フォームがデフォルト値にリセットされたときに起こります。フォームの「 undo 」ボタンを押したようなものです！

<form id="myForm">
<input type="text" id="name" placeholder="あなたの名前を入力してください">
<button type="reset">リセット</button>
</form>

<script>
document.getElementById("myForm").addEventListener("reset", function(event) {
alert("フォームがリセットされました！");
});
</script>

ここでは、リセットボタンがクリックされるたびに、アラートが表示されてフォームがリセットされたことを知らせます。

3. フォーカスとブラーイベント

フォーカスとブラーイベントは、フォームのスpotlight です。フォーカスは要素が注目を浴びるとき、ブラーは注目を失うときです。

<input type="text" id="myInput" placeholder="ここをクリック！">

<script>
var input = document.getElementById("myInput");

input.addEventListener("focus", function() {
this.style.backgroundColor = "yellow";
});

input.addEventListener("blur", function() {
this.style.backgroundColor = "";
});
</script>

この例では、入力にクリック（フォーカス）すると背景色が黄色に変わり、クリックアウェイ（ブラー）すると元に戻ります。入力が控え目で、あなたに注意を払うと赤面するようなものです！

4. チェンジイベント

チェンジイベントは、入力要素の値が変わってフォーカスを失ったときにトリガーされます。

<select id="colorSelect">
<option value="">色を選んでください</option>
<option value="red">赤</option>
<option value="blue">青</option>
<option value="green">緑</option>
</select>

<script>
document.getElementById("colorSelect").addEventListener("change", function() {
document.body.style.backgroundColor = this.value;
});
</script>

このスクリプトは、選択した色に基づいてページの背景色を変更します。まるで魔法の杖で whole room!を描くようなものです！

5. インプットイベント

インプットイベントは、チェンジイベントと似ていますが、値が変わった直後に発火します。

<input type="text" id="textInput" placeholder="何かを入力してください...">
<p id="output"></p>

<script>
var input = document.getElementById("textInput");
var output = document.getElementById("output");

input.addEventListener("input", function() {
output.textContent = "あなたが入力したのは: " + this.value;
});
</script>

この例では、入力するたびにリアルタイムでフィードバックが表示されます。まるで友達があなたの言葉を繰り返すようなものです！

すべてを合わせる

これらのイベントを見てきたので、複数のイベントを使ったより複雑な例を作ってみましょう：

<form id="registrationForm">
<input type="text" id="username" placeholder="ユーザー名">
<input type="password" id="password" placeholder="パスワード">
<input type="email" id="email" placeholder="メール">
<button type="submit">登録</button>
<button type="reset">消去</button>
</form>

<script>
var form = document.getElementById("registrationForm");
var username = document.getElementById("username");
var password = document.getElementById("password");
var email = document.getElementById("email");

// サブミットイベント
form.addEventListener("submit", function(event) {
event.preventDefault();
alert("登録が送信されました: " + username.value);
});

// リセットイベント
form.addEventListener("reset", function() {
alert("フォームが消去されました！");
});

// フォーカスイベント
[username, password, email].forEach(function(element) {
element.addEventListener("focus", function() {
this.style.backgroundColor = "#e6f3ff";
});
});

// ブラーイベント
[username, password, email].forEach(function(element) {
element.addEventListener("blur", function() {
this.style.backgroundColor = "";
});
});

// インプットイベント
email.addEventListener("input", function() {
if (this.value.includes("@")) {
this.style.borderColor = "green";
} else {
this.style.borderColor = "red";
}
});
</script>

この登録フォームは、私たちが学んだすべてのイベントを使っています：

• サブミットイベントは、フォームが実際に送信されるのを防ぎ、代わりにアラートを表示します。
• リセットイベントは、フォームがリセットされたときに通知します。
• フォーカスとブラーイベントは、入力が選択されたときと選択が外れたときに背景色を変更します。
• メールフィールドのインプットイベントは、入力に「 @ 」が含まれているかどうかに基づいて境界色を変更します。

結論

おめでとうございます！あなたは刚刚 JavaScriptのフォームイベントの世界に初めて踏み出しました。これらのイベントは、あなたのウェブページの「感覚」のようなものです。ユーザーが何をしているか「見」たり「感じ」たりする助けになります。練習を重ねることで、インタラクティブで反応の良いフォームを作れるようになります。

実験を続け、コーディングを続け、最も重要なのは楽しむことです！千マイルの旅は一歩から始まります。あなたは大きな一歩を踏み出しました。未来の開発者たち、幸せなコーディングをお祈りします！

Credits: Image by storyset