JavaScript プログラミング
前へ 目次へ 次へ 

　２．イベントのアクションとして書く

　Webページ上には入力領域やボタンなどを配置することができる。これらのことをここでは「入力部品」と呼ぶことにする。（一般的には「フォーム」と呼ぶようである。）
　これらの入力部品をクリックする等のイベントによって処理されるアクションにもスクリプトが書ける。
　次のHTMLファイルを作成する。

[[ jsrei3.html ]]

<HTML>
<HEAD>
<TITLE>イベントのアクション</TITLE>
</HEAD>
<BODY>
<FORM name="rei3">
  <INPUT size="25" type="text" name="jikan">
  <INPUT type="button" value="最終更新日">
</FORM>
</BODY>
</HTML>

　入力部品は<FORM>〜</FORM>タグ内に書く。
　<INPUT size="25" type="text" name="jikan"> は、横幅が25文字分(size="25")の文字入力用のテキスト(type="text")である。この部品にはjikanという名前を付けている(name="jikan")。
　<INPUT type="button" value="最終更新日"> は、ボタン(type="button")であり、最終更新日と表示される(value="最終更新日")。

表示結果　

　このままでは、ボタンをクリックしても何も起こらない。ボタンのタグを次のようにする。

<INPUT type="button" value="最終更新日" onclick="document.rei3.jikan.value = document.lastModified;">

　追加された onclick="document.rei3.jikan.value = document.lastModified;" がイベントとそのアクションである。イコールの左辺がイベントである。ここではonclick、すなわちボタンがクリックされたときを表している。イコールの右辺がイベントが発生したときに処理されるスクリプトである。

onclick  =  "document.rei3.jikan.value = document.lastModified;"
イベント     アクション

　アクションの右辺(document.lastModified)はこのページの最終更新日、左辺(document.rei3.jikan.value)はこのページのrei3というフォームのjikanという部品のvalueプロパティを表している。テキストのvalueプロパティに格納した文字が表示される（月/日/年　時間）。

document.rei3.jikan.value  =  document.lastModified;
このページのテキストボックスの
値を表すプロパティ		 このページの最終更新日を表すプロパティ

表示結果　

　アクション（スクリプト）にあまり複雑な処理を書くとわかりにくくなるので、関数として用意すると良い。

　ホームページビルダー(HPB)では、次のようにする。

　メニューから　［挿入(I)］ → ［入力部品(F)］ → ［フォーム(F)］　と選択する。カーソル位置に波線の四角形が挿入される。これがフォームである。
　四角形内をダブルクリックするとフォームの属性を設定するダイアログが開く（左図）。このダイアログでは、名前だけを rei3 と設定する。
　<FORM name="rei3">　となる。

　この四角形の中にカーソルを移動すると下図のようなツールボックスが現れる。

　次に、「1行テキスト」をクリックすると左図のようなダイアログが開く。

　このダイアログでは、名前はjikanを設定し、入力タイプはテキストにチェックし、カラム数は25に設定する。
　<INPUT size="25" type="text" name="jikan">　となる。

 

　次に、「ボタン」（どちらでも良い）をクリックすると左図のようなダイアログが開く。

　このダイアログでは、ボタンに表示するラベルは最終更新日を設定し、ボタンの種類はプッシュボタンにチェックする。
　<INPUT type="button" value="最終更新日">　となる。

 

　さらに、［イベント(E)...］ボタンをクリックすると左図のようなダイアログが開く。

　イベントから OnClick を選択し、スクリプトに次のプログラムを入力し、［登録(A)］をクリックする。
　　　document.rei3.jikan.value=document.lastModified;

　<INPUT type="button" value="最終更新日" onclick="document.rei3.jikan.value = document.lastModified;">　となる。

　登録したイベントはスクリプトの上にあるイベントとアクションの部分に表示される。変更する場合は、変更したいものをここから選択する。変更結果を有効にするためには［置換(P)］をクリックする。

 


前へ 目次へ 次へ 
 JavaScript プログラミング Copyright © 2003 Hiroshi Masuda 

 

 

inserted by FC2 system