久保清隆のブログ

ライフハック、健康、旅行など、役立つ情報を書きます。

JavaScriptの勉強6 〜基礎の基礎 イベントハンドラ(イベント処理)

イベントハンドラとは

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

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

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

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

ちなみにイベントハンドラの一覧は、JavaScriptの勉強2 〜基礎の基礎 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は、このテキストフィールドに入力された値、という意味。



お読み頂きありがとうございます。
少しでもお役に立てたらクリックお願いします↓。
ブログランキング・にほんブログ村へにほんブログ村 IT技術ブログへにほんブログ村 IT技術ブログ プログラム・プログラマへ