Javaスクリプトの基礎 JavaとJavaスクリプト目次 Javaコンパイラ

formとの連動

formを使えばHTMLのページにボタンや入力欄を作ることができることは第4章で詳しく説明しました。そこで書いたとおり今までサーバ側へ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)">
	× 2 = <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>
	
	
左側に数値を入力してリターンを押して下さい。
× 2 =

onChange引数の「change(this.form, this)」は、「this」が左側のフィールド自体を指し、「this.form」はフィールドが含まれるフォーム全体を指定しています。数値を入力すると関数change()が呼び出され、まずフィールドの値をval.value、つまり変数valの指すフィールドのvalueで取り出し、それを2倍してform.ans.value、つまりformのansというフィールドのvalueへ格納します。

フォームや<input>には、それぞれname引数で名前をつけておかないとスクリプトの中から参照できないので注意して下さい。

その他、<input>タグのtype属性(オプション)にimageを用いることで、ボタンの代わり画像を使った次のような例も考えられます。

	
	
	<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()という関数を起動するよう指定し、これでボタンを押すとそれぞれ1ページ前、2ページ前、3ページ前まで戻る仕組みです。
	
	
	<script>
	function back(num){
	num=num * (-1); //戻る場合はマイナス値
	history.go(num);}
	</script>
	
	これらのボタンを押すと、ブラウザの<br>
	「戻る」ボタンのような働きをします。<p>
	<form method="post">
	<input type="button" value="1頁戻る" onClick="back(1)">
	<input type="button" value="2頁戻る" onClick="back(2)">
	<input type="button" value="3頁戻る" onClick="back(3)">
	</form>
	
	
これらのボタンを押すと、ブラウザの
「戻る」ボタンと同じような働きをします。

ボタンのonClickでback()関数を呼び出しスクリプトが実行され、ページを戻す操作はhistory.go()で行います。

ラジオボックスへの連動 (radio)

ラジオボックスに連動する場合、次のフォームでは選択されたラジオボックスの内容(valueフィールドの値)が下の欄へ表示されます。
	
	
	<script>
	function check(radio){
	form=radio.form;
	form.val.value=radio.value;}
	</script>
	
	<form method="post">
	<input type="radio" name="r" value="それは1番です。" checked onclick="check(this)">1番<br>
	<input type="radio" name="r" value="それは2番です。" onclick="check(this)">2番<br>
	<input type="radio" name="r" value="それは3番です。" onclick="check(this)">3番<br>
	<input type="val" size="30">
	</form>
	
	
1番
2番
3番

セレクトへの連動 (<select>)

<select>タグではonChange引数が使え、メニューを選んだ時にイベントを捕まえられます。

	
	
	<form method="post" name="f">
	<select name="sel" onChange="ChangeSelection(this.form, this)">
	<option value="0" selected>次の中から選んで下さい。
	<option value="1">スキー
	<option value="2">ビリヤード
	<option value="3">射撃
	<option value="4">音楽
	<option value="5">コンピュータ
	</select>
	メニューの<input name="num" size="1">番目の項目が選択されました。
	</form><p>
	
	<script>
	function ChangeSelection(form, selection){
	v=selection.selectedIndex; //valueフィールドではなく
				   //何番目のものが選ばれたか
	form.num.value=v;}
	
	</script>
	
	

メニューの番目の項目が選択されました。

メニューを選択すると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

いま選択されている
番目のメニュー項目です。

最後にじっさいのリンクを張った作例として、筆者の小説タイトル・メニューをご紹介しておきましょう(リンク先の小説が掲載されたページは「ハリウッド最前線」です)。

横井康和著
オンライン・ノベル


ご希望の小説タイトルを選び
下のボタンを押して下さい




Copyright (C) 1996-2003 by Yasukazu Yokoi. All Rights Reserved.