GO BACK

JavaScript教室　その３

「HTMLオブジェクトの利用方法」



■オブジェクトへのアクセス

　インタラクティブなプログラムを作成するためには、ユーザーインターフェイスとプログラムとのやりとりを行なう必要があります。単にボタンをクリックすると動いて終わりというのではなく、例えばテキストフィールドから値を取り出したり、結果をフィールドに書き出したりという作業ができないといけません。この「HTMLオブジェクトとのやりとり」が、実はJavaScriptをやる上で一番わかりにくく面倒なところでしょう。

　では、簡単な例として、「テキストフィールドに入力した数字を元に計算をする」というプログラムを作ってみましょう。

　まず、入力のためのテキストフィールドから説明しましょう。これは「Text」というHTMLのフォームを使います。


●テキストフィールドのタグ●

<INPUT TYPE="text" NAME=《名前》 VALUE=《初期値》>


TYPE：INPUTのタイプ。textでテキストフィールドになる。

NAME：名前。JavaScriptからこれを参照するのに使う。

VALUE：最初にフィールドに表示しておくテキストや数字。


　これがテキストフィールドの基本タグです。この他、横幅を設定するSIZEなどのオプションがありますが、とりあえずこれだけ覚えておけばつけるようになるでしょう。

　では、このテキストフィールドとボタンを使って、計算をするプログラムを作成してみましょう。

<SCRIPT LANGUAGE="JavaScript">
<!--

function KEISAN () {
	X = 0
	Y = document.MyForm.MyText.value
	for (i = 1; i <= Y; i = i + 1) {
		X = X + i
	}
	alert ("1から" + Y + "までの合計：" + X)
}

//-->
</SCRIPT>

<HTML>
	<HEAD></HEAD>
	<BODY>
		<p>数字を入力してください。</p>
		<FORM NAME="MyForm">
			<INPUT TYPE="text" NAME="MyText" VALUE="0">
			<INPUT TYPE="Button" NAME="MyBtn" VALUE= "計算" onClick="KEISAN ()">
		</FORM>
	</BODY>
</HTML>
　これをNetScapeなどで実行してみましょう。画面にテキストフィールドと「計算」というボタンが表示されますね。フィールドに適当な数字を入力し、「計算」ボタンを押すと、１からその数字までの合計が表示されます。

　では、プログラムを見ましょう。−−まず、テキストフィールドとボタンを作成しているフォームの部分からです。これは、こんな形をしています。

<FORM NAME="MyForm">
	<INPUT TYPE="text" NAME="MyText" VALUE="0">
	<INPUT TYPE="Button" NAME="MyBtn" VALUE= "計算" onClick="KEISAN ()">
</FORM>
　<FORM>タグの中に、textとbuttonの２つのINPUTが記述されています。HTMLのインターフェイスは、全て<FORM>タグの中に書くと説明しましたね？　このように、複数の部品を使うときは、それらを全て１つの<FORM>タグの中にまとめて記述することができます。

　これで、「MyForm」という名前のフォームの中に、「MyText」「MyBtn」という２つのINPUTが組み込まれたことになりました。そしてMyBtnボタンには、クリックされたらKEISAN ()という関数を呼び出すように設定されています。

　では、その関数部分を見てみましょう。

function KEISAN () {
	X = 0
	Y = document.MyForm.MyText.value
	for (i = 1; i <= Y; i = i + 1) {
		X = X + i
	}
	alert ("1から" + Y + "までの合計：" + X)
}
これが関数です。まず最初にXとYにそれぞれ値を代入していますね。Yへの代入を見ると、


document.MyForm.MyText.value


このようになっています。これは「ドキュメントのMyFormの中のMyTextの中のvalueプロパティ」を示しています。

　JavaScriptでは、フォームやボタンなどは全てオブジェクトとして扱われます。そしてオブジェクトは、そのオブジェクトがどれかわかるように、置かれている場所をピリオドで指定して記述するのです。MyFormならば「document.MyForm」となりますし、MyBtnならば「document.MyForm.MyBtn」と書くわけです。

　それぞれのオブジェクトには、さまざまなプロパティが用意されています。valueは、テキストフォームに入力された値を示すプロパティです（MyTextタグで「VALUE」というオプションを設定していることを思い出してください）。オブジェクト名の最後にプロパティ名をピリオドでつなげて記述することで、このようにオブジェクトの値を参照することができるようになっているのです。



■選択式ラジオボタンと配列

　テキストフィールドは、このように比較的簡単なアクセスが可能ですが、オブジェクトの中にはちょっと面倒なものもあります。例えば、ラジオボタンです。

　ラジオボタンというのは、いくつかの選択項目の中から１つを選ぶのに使われるものです。これは、以下のように記述します。


●ラジオボタンのタグ●

<INPUT TYPE="Radio" NAME=《名前》 VALUE=《値》>


TYPE：Radioはラジオボタンを示す。

NAME：ラジオボタンのグループ名を示す。

VALUE：サーバーに送られる値。CGIなどで利用するためのもの。


　形はテキストフィールドとほぼ同じですね。ただし、ラジオボタンはいくつかの項目から１つを選ぶので、NAMEはそのグループの名前となります。同じグループのラジオボタンをいくつか作ると、それらが仲間と認識され、常に１つだけがONになるのです。例えば、

<FORM NAME="Sample">
	<INPUT TYPE="Radio" NAME="Test">その１
	<INPUT TYPE="Radio" NAME="Test">その２
	<INPUT TYPE="Radio" NAME="Test">その３
</FORM>
−−このようにすると、「その１」「その２」「その３」という３つのラジオボタンが表示され、その内の１つだけがONになるように表示されるわけです。

　では、JavaScriptのプログラムからONになっているラジオボタンを調べるにはどうすればいいのでしょう？　テキストフィールドの例を思い出して考えるなら、上のサンプルならば、


X = document.Sample.Test.value


という形でONになっている項目のVALUEが取り出せそうな気がします。

　ところが、実際にはこれではうまくいきません。ラジオボタンのグループのVALUEを取り出すことはできないのです。ではどうすればいいかというと、ラジオボタンがチェックされているかどうかを調べないといけません。

　ラジオボタンは、JavaScriptの内部では「配列」として記憶されています。配列というのは、いくつかの値を１まとめにしたものです。これは、


《配列名》[番号]


このような形で、特定の番号の値を取り出すことができます。配列はプログラミングになれていない人には少々難しいでしょうから、そういうものがある、という程度に覚えておけばいいでしょう。

　先のプログラム例を思い出してみて下さい。Testというラジオボタングループは、このようになっているのです。


document.Sample.Test[0]　→　「その１」が入っている

document.Sample.Test[1]　→　「その２」が入っている

document.Sample.Test[2]　→　「その３」が入っている


　配列は０から始まるので、３つの場合は０，１，２番目に入っていることになります。

　では、各項目がONかどうかを調べるにはどうすればいいか。それは「checked」というプロパティを調べます。これはONであればtrue、OFFであればfalseを返すプロパティです。プログラム例で「その２」がONになっていた場合、このcheckedの値は、


document.Sample.Test[0].checked　→　false

document.Sample.Test[1].checked　→　true

document.Sample.Test[2].checked　→　false


このようになります。つまり、こうしてグループ内の各項目のcheckedプロパティを調べれば、どの項目がONになっているかわかるというわけです。

　では、ラジオボタンを使った簡単なサンプルを作ってみましょう。

<SCRIPT LANGUAGE="JavaScript">
<!--

function SayHello () {
	NAMAE = document.MyForm.MyName.value
	if (document.MyForm.sex[0].checked == true) {
		YOBIKATA = "くん"
	} else {
		YOBIKATA = "ちゃん"
	}
	alert ("こんにちは、" + NAMAE + YOBIKATA)
}

//-->
</SCRIPT>

<HTML>
	<HEAD></HEAD>
	<BODY>
		<p>名前を入力して下さい。</p>
		<FORM NAME="MyForm">
			<INPUT TYPE="Text" NAME="MyName">
			<BR>
			<INPUT TYPE="Radio" NAME="sex" VALUE="Man">男
			<INPUT TYPE="Radio" NAME="sex" VALUE="Women">女
			<BR>
			<INPUT TYPE="Button" NAME="MyBtn" VALUE= "クリック！" onClick="SayHello ()">
		</FORM>
	</BODY>
</HTML>
　これは、男性と女性で違う挨拶をするプログラムです。−−例えば、テキストフィールドに「つやの」と名前を書き、「男」ラジオボタンをONにしてからボタンをクリックすると、「こんにちは、つやのくん」と表示されます。「女」をONにしてあると、「こんにちは、つやのちゃん」と表示されます。

　では、プログラムを見てみましょう。

function SayHello () {
	NAMAE = document.MyForm.MyName.value
	if (document.MyForm.sex[0].checked == true) {
		YOBIKATA = "くん"
	} else {
		YOBIKATA = "ちゃん"
	}
	alert ("こんにちは、" + NAMAE + YOBIKATA)
}
　まず、変数NAMAEに、document.MyForm.MyName.valueを入れています。MyNameは、テキストフィールドのことですね。

　そして次のIF文で、「document.MyForm.sex[0].checked」をチェックしています。sex [0]というのはsexグループの最初の項目、つまり「男」ラジオボタンのことです。これがtrueであれば、変数YOBIKATAに「くん」と代入し、そうでなければ「ちゃん」と代入しているわけです。そして最後にalertで画面に表示して終わりです。

　このように、ラジオボタンは値を調べるのが少々面倒です。同じHTMLのオブジェクトでも、種類によって値の取り出し方が違っていたり、参照方法が異なっていたりします。そのことをよく頭に入れておいてください。


GO NEXT

GO HOME