onChange引数の｢change(this.form, this)｣は、｢this｣が左側のフィールド自体を指し、｢this.form｣はフィールドが含まれるフォーム全体を指定しています。数値を入力すると関数change()が呼び出され、まずフィールドの値をval.value、つまり変数valの指すフィールドのvalueで取り出し、それを２倍してform.ans.value、つまりformのansというフィールドのvalueへ格納します。
フォームや<input>には、それぞれname引数で名前をつけておかないとスクリプトの中から参照できないので注意して下さい。
その他、<input>タグのtype属性(オプション)にimageを用いることで、ボタンの代わり画像を使った次のような例も考えられます。
ボタンのonClickでback()関数を呼び出しスクリプトが実行され、ページを戻す操作はhistory.go()で行います。
formとの連動
formを使えばHTMLのページにボタンや入力欄を作ることができることは第４章で詳しく説明しました。そこで書いたとおり今までサーバ側へCGIを置いて使うのが普通だったのを、Javaスクリプトではformの<input>タグにonClickを設定し、Javaスクリプトの関数を呼び出すことが可能です。入力への連動
(<input>)
<input>タグにonChange引数を使ってformのinputフィールドが変更されたというイベントを捕まえられます。たとえば、次のフォームでは左側へ数字を入れると、答が計算されて右側へ表示されます。
左側に数値を入力してリターンを押して下さい。
<form method="post" name="f">
<input name="num" size="9" onChange="change(this.form, this)">
× ２ ＝ <input name="ans" size="10">
</form>
<script language="JavaScript">
function change(form, val){
in_val=val.value
out_val=in_val * 2;
form.ans.value=out_val;}
</script>
左側に数値を入力してリターンを押して下さい。
<script>
function back1(){
history.back();}
</script>
<form>
<input type="image" src"../images/joker.gif" border=0 onclick="back1()">
</form>
もともとtype属性(オプション)のimageは、画像の座標をnameで指定した名前に｢.x｣を付けX座標として、｢.y｣を付けY座標としてサーバへ送るための機能です。したがって、ネットスケープの場合、ただURLの最後へイメージの座標が加わるだけでhistoryオブジェクトは機能しません。 ボタンのクリックへの連動
(button)
下記の記述例ではボタンにback()という関数を起動するよう指定し、これでボタンを押すとそれぞれ１ページ前、２ページ前、３ページ前まで戻る仕組みです。
<script>
function back(num){
num=num * (-1); //戻る場合はマイナス値
history.go(num);}
</script>
これらのボタンを押すと、ブラウザの<br>
｢戻る｣ボタンのような働きをします。<p>
<form method="post">
<input type="button" value="１頁戻る" onClick="back(1)">
<input type="button" value="２頁戻る" onClick="back(2)">
<input type="button" value="３頁戻る" onClick="back(3)">
</form>
ラジオボックスへの連動
(radio)
ラジオボックスに連動する場合、次のフォームでは選択されたラジオボックスの内容(valueフィールドの値)が下の欄へ表示されます。
<script>
function check(radio){
form=radio.form;
form.val.value=radio.value;}
</script>
<form method="post">
<input type="radio" name="r" value="それは１番です。" checked onclick="check(this)">１番<br>
<input type="radio" name="r" value="それは２番です。" onclick="check(this)">２番<br>
<input type="radio" name="r" value="それは３番です。" onclick="check(this)">３番<br>
<input type="val" size="30">
</form>
セレクトへの連動 (<select>)
<select>タグではonChange引数が使え、メニューを選んだ時にイベントを捕まえられます。
メニューを選択するとChangeSelection()が実行され、何番目のメニューを選んだかはselectedIndexで分かります。最初のメニュー項目が0で、次から1、2、3･･･と続きます。
セレクトの応用 (<select>)
<select>タグからどのようなvalueの項目が選択されたか、それぞれの項目の値や表示文字列などの情報を取れます。
selection.options[i].text i番目の項目のテキスト selection.options[i].value i番目の項目のvalue引数の値 selection.options[i].selected i番目の項目が選択されていればtrue、そうでなければfalse
例
最後にじっさいのリンクを張った作例として、筆者の小説タイトル･メニューをご紹介しておきましょう(リンク先の小説が掲載されたページは｢ハリウッド最前線｣です)。
横井康和著オンライン･ノベル |