今回は、ホームページで、メールアドレスを入力する時に、
入力したものが、メールの形式かどうかをチェックしたい時、
JavaScriptを使うと、それができる、という内容です。
布袋先生
布袋じゃよ。
まずは、JavaScriptっていうものを具体的に見てみようではないか。
メールアドレスの入力フォームで、入力したものが、メールアドレスの形式なのかどうかを
チェックするプログラムを見てもらいたい。
どんな感じでコードを書いているのか、HTMLやCSSとどのあたりがちがうのか、などなど
色々と感じてもらいたいわい。
HTML
<input id="form" type="text" value="メールアドレスを入力してください" />JavaScript
/* 入力フォームだよ～ん */
var form=document.getElementById("form");
/* 結果出力するよ～ん */
var result=document.getElementById("result");
/* メールアドレスのパターンは、正規表現で見るよ～ん */
var pattern = /^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]+.[A-Za-z0-9]+$/;
/* フォーム入力のイベントハンドラだよ～ん */
form.addEventListener("input", (e) => {
/* メールアドレスのパターンにマッチするかチェックするよ～ん */
if (pattern.test(form.value)) {
/* (正規表現で)パターンにマッチした場合だよ～ん */
result.textContent = "これは、メールアドレスです";
} else {
/* パターンにマッチしない場合は、こっちを返すよ～ん */
result.textContent = "これは、メールアドレスではありません";
}
})布袋先生の解説
JavaScriptは、ま、こういう風に書くんじゃよ。
HTMLやCSSとは、ちと違うだろ?
このプログラムの中で、
var pattern = /^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]+.[A-Za-z0-9]+$/;
ちゅうのがあるじゃろ? これ、プログラムでよく使う「正規表現」ちゅうやつやねん。
正規表現ちゅうのは、JavaScriptの中で、文字順のパターンを表現する記述方法のことを言うねん。
JavaScriptだけでなく、他のプログラミングでも、よー使われとるんや。
例えば、文章が、このパターンに合致するかチェックしたり、このパターンを検索したり、置換したりするんや。
正規表現は、プログラムではよー使われとるのは、実に便利やからなんや。
今、正規表現について解説すると、もう何がなんやらわからんよーになったらあかんさかい、
今日は、プログラムでは「正規表現」ちゅうやつを使うんやな、と覚えといてくれ。
今日は、ここまでにしとこうと思う。
どや、ちっとはプログラマーになってきたとか思わんか? まだか?
慌てることない、しっかりと勉強したら、ホームページに動きを付けることのできるプログラマーになれるぞ。
今日の話、ちょっとでもわかれば、上出来じゃ。ふぉっふぉっふぉっふぉふぉ。
コメント