JavaScriptの勉強６　〜基礎の基礎　イベントハンドラ（イベント処理）

イベントハンドラとは

イベントとは、ページに対してユーザが特定の操作をすること。
イベントハンドラとは、イベントが起きたとき、特定のプログラムをブラウザに実行させること。イベントハンドラは「on〜」で始まり、このイベントメッセージを受け取り、プログラムを起動させる。

一般的には、以下のように記述する。

<タグ名 イベントハンドラ名 = 実行プログラム>

例）
  <input type="button" onClick="alert('ボタンが押されました')">
  ※ タグ名             ：input type="button"
     イベントハンドラ名 ：onClick
     実行プログラム     ：alert('ボタンが押されました')

ちなみにイベントハンドラの一覧は、JavaScriptの勉強２　〜基礎の基礎 JavaScript概要と基本文法を参照。

イベントハンドラを用いたプログラムの例

ボタンを押すとアラートが出るようなプログラムを作る。
以下のようなコードで実現できる。

<html>
<head>
<title>イベントハンドラ</title>
</head>
<body>
<form>
<input type="button" onClick="alert('ボタンが押されました')">
</form>
</body>
</html>

このプログラムでは、ボタンをクリックすると、「ボタンが押されました」というアラートメッセージが表示される。

ブラウザ上でのデータの入力　〜formタグ

ブラウザでデータを入力するには、formタグを使う。
簡単な例を以下に示す。

<form name="fName">
<input type="text" name="tName">
</form>

このプログラムの意味は、
「formの名前はfNameで、フォーム（入力欄）にはテキスト（文字）を入力できる。
テキストフィールド（テキストを入力するスペース）の名前はtName。」
である。

inputは入力という意味。

typeには入力形式を入れる。

typeの入力形式は以下のようなものがある。

typeの種類	typeの意味
text	テキスト(文字)を入力する。
password	テキストを入力するが、入力した文字は見れない。
button	ただのボタン
submit	送信ボタン。入力した情報を指定場所へ送信する。
reset	入力した内容をリセットするボタン。
hidden	隠しフィールド。入力内容はプログラムに渡されるが、結果をブラウザに出さない。
checkbox	チェックボックス式のボタン。チェックを複数つけることができる。
radio	ラジオボタン。選択肢の中から一つにチェックをつけることができる。

フォームを用いたプログラムの例

仕様

フォームに入力した値に、「http://」が含まれていなければ、リターン(Enter)キーを押したとき「URLが含まれていません」と警告文を出すプログラムを作る。

コードの例

例えば以下のようなコードが書ける。

<html>
<head>
<title>イベントハンドラ</title>
<script language="javascript">
function urlCheck(url){
  if(-1 == url.indexOf("http://")){
    alert('URLに「http://」が含まれていません')
  }
}
</script>
</head>

<body>
URLを入力して、リターンキーを押して下さい。<br />
<form>
<input type="text" size=50 onChange="urlCheck(this.value)">
</form>
</body>
</html>

これで、入力欄に「http://」が含まれていなければ、リターン(Enter)キーを押したとき「URLが含まれていません」と警告文が出る。

コード解説

まず、urlCheckという関数を定義している。
- indexOf()は、()内の文字が含まれていない場合、-1を返す。
- 従って、urlにhttp://が含まれていなければ、-1となり、ifが真になり、alertが実行される。

次に、実際にブラウザに出される部分。
- formタグでフォームを作っている。
- inputタグの中にjavascriptが使われている。テキストフィールドの幅はsizeで指定できる。
- onChangeは、フォームの内容を変化させた時という意味。
- 変化が起きたとき、urlCheck関数が実行される。
- urlCheckの引数のthis.valueは、このテキストフィールドに入力された値、という意味。

お読み頂きありがとうございます。
少しでもお役に立てたらクリックお願いします↓。