GO BACK

JavaScript教室　その４

「JavaScriptで利用可能なHTMLオブジェクト」



前回でオブジェクトアクセスの基本的な方法についてわかったことと思います。あとは、利用可能なオブジェクトを少しでも多く覚えるのがJavaScript活用の早道でしょう。そこで今回は、HTMLオブジェクトの主だったものを全てまとめておくことにします。


●<INPUT TYPE="Button">

既に登場しましたが、ボタンのオブジェクトです。クリックしてプログラムを呼び出すのに利用します。


HTMLオプション：

NAME=《オブジェクトの名前》

VALUE=《ボタンに表示されるテキスト》


JavaScriptプロパティ：

name：オプションのNAMEで設定したもの

value：オプションのVALUEで設定したもの

type：オブジェクトのタイプを示すもの。「button」という文字列が得られる

form：ボタンのあるフォームを示すもの


●<INPUT TYPE="text">

これも既に登場しました。１行だけのテキストフィールドです。簡単なデータの入力に利用します。


HTMLオプション：

NAME=《オブジェクトの名前》

VALUE=《テキストフィールドに表示されるテキスト》

SIZE=《表示できる文字数。これで横幅を調整する》


JavaScriptプロパティ：

name：オプションのNAMEで設定したもの

value：オプションのVALUEで設定したもの

type：オブジェクトのタイプを示すもの。「text」という文字列が得られる

form：テキストフィールドのあるフォームを示すもの

defaultValue：初期状態のテキスト。valueと同じ値になる


●<TEXTAREA>

複数行のテキストを入力できる広いフィールドです。INPUTではなく、独立したタグとなっています。


HTMLオプション：

NAME=《オブジェクトの名前》

VALUE=《テキストエリアに表示されるテキスト》

ROWS=《行数。これで縦幅を調整する》

COLS=《文字数。これで横幅を調整する》

WRAP= off/virtual/physical

（行の折り返しを設定する。offで折り返しなし、virtualは見かけは折り返すがデータはそのまま。physicalは送られるデータも折り返した状態となる）


JavaScriptプロパティ：

name：オプションのNAMEで設定したもの

value：オプションのVALUEで設定したもの

type：オブジェクトのタイプを示すもの。「textarea」という文字列が得られる

form：テキストエリアのあるフォームを示すもの

defaultValue：初期状態のテキスト。valueと同じ値になる


●<INPUT TYPE="checkbox">

ON／OFF式のチェックボックスです。ON／OFFは自動で行なってくれます。


HTMLオプション：

NAME=《オブジェクトの名前》

VALUE=《チェックがONのときに送られる値》

CHECKED

（これをオプションに記述しておくとチェックされた状態で表示される）


JavaScriptプロパティ：

name：オプションのNAMEで設定したもの

value：オプションのVALUEで設定したもの

type：オブジェクトのタイプを示すもの。「checkbox」という文字列が得られる

form：チェックボックスのあるフォームを示すもの

checked：ONになっているかどうか示すもの。trueならばON、falseならばOFF

defaultChecked：初期状態でチェックされているかどうかを示すもの


●<INPUT TYPE="Radio">

既に登場しましたが、ラジオボタンです。これはグループとして働き、同じグループのラジオボタンは全て配列として扱われるので注意が必要です。


HTMLオプション：

NAME=《ラジオボタングループの名前》

VALUE=《チェックがONのときに送られる値》

CHECKED

（これをオプションに記述しておくとチェックされた状態で表示される）


JavaScriptプロパティ：

name：オプションのNAMEで設定したもの

value：オプションのVALUEで設定したもの

type：オブジェクトのタイプを示すもの。「radio」という文字列が得られる

form：ラジオボタンのあるフォームを示すもの

checked：ONになっているかどうか示すもの。trueならばON、falseならばOFF

defaultChecked：初期状態でチェックされているかどうかを示すもの


※ラジオボタンは複数のオブジェクトが１つのグループとして扱われる。個々のラジオボタンを利用するには、グループの配列を参照する。例えば、Frmというフォーム内にcbというNAMEのラジオボタンを複数作成した場合、

document.Frm.cb[番号]

という形で呼び出す。番号は０より始まる。例えば１つ目のボタンのチェック状態を調べる場合は、「document.Frm.cb[0].checked」となる。


●<INPUT TYPE="password">

TYPE="text"と同様に１行だけのテキストフィールドを作成しますが、こちらは入力されたテキストが表示されません。パスワードの入力などに利用されるものです。


HTMLオプション：

NAME=《オブジェクトの名前》

VALUE=《パスワードフィールドに表示されるテキスト》

（画面表示は全て＊で表示されるが値は入力されたテキストとなる）

SIZE=《表示できる文字数。これで横幅を調整する》


JavaScriptプロパティ：

name：オプションのNAMEで設定したもの

value：オプションのVALUEで設定したもの

type：オブジェクトのタイプを示すもの。「password」という文字列が得られる

form：テキストフィールドのあるフォームを示すもの

defaultValue：初期状態のテキスト。valueと同じ値になる


●<SELECT>

<OPTION ……>《項目名》

<OPTION ……>《項目名》

…………

</SELECT>

ポップアップメニューとして動作するオブジェクトです。一般に「選択リスト」と呼ばれています。OPTIONで項目を複数設定しておき、クリックするとそれらの項目がポップアップで現われます。これはINPUTとは異なり、独立したタグとして用意されています。また、Radioと同様に、これも設定したOPTIONは配列として参照されます。配列は、例えばFrmフォーム内にstというSELECTがあった場合、その中の項目へは、

document.Frm.st[番号]

という形でアクセスします。例えば、２番目のOPTIONの選択状態を調べる場合は、「document.Frm.st[2].selected」となります。


HTMLオプション：（<SELECT>タグ）

NAME=《オブジェクトの名前》

SIZE=《表示できる文字数。これで横幅を調整する》

MULTIPLE

（これを記述すると、複数の項目を選択できるようになる）


HTMLオプション：（<OPTION>タグ）

VALUE=《その項目が選択されたときに送られる値》

SELECTED

（これを記述すると、その項目が選択された状態で表示される）


JavaScriptプロパティ：（SELECT）

name：オプションのNAMEで設定したもの

type：オブジェクトのタイプを示すもの。MULTIPLEの状況に応じて、「select-one」または「select-multiple」のいずれかの文字列が得られる

form：選択リストのあるフォームを示すもの

length：オプションの数を示す

selectedIndex：選択されている項目を示す。MULTIPLEで複数が選択されている場合は、最初のものだけを返す。


JavaScriptプロパティ：（SELECTの配列，OPTION）

value：オプションのVALUEで設定したもの

text：テキストとして項目に表示されているテキストを示すもの

selected：その項目が選択されているかどうかを示す。true/falseのいずれか

defaultSelected：初期状態で選択されているかどうかを示す。true/falseのいずれか



■SELECTオブジェクト利用の実際

　以上のオブジェクトの中で一番やっかいなのはSELECTで定義される選択リストです。これはSELECTオブジェクトの中に更にOPTIONという小さなオブジェクトをもった構造になっているため、使い方がわかりにくいのです。そこで、簡単なサンプルをあげておきましょう。

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

function checkColor () {
	KOUMOKU = document.MyForm.MySt.selectedIndex
	str = document.MyForm.MySt[KOUMOKU].text
	alert ("あなたは「" + str + "」を選びましたね！")
}

//-->
</SCRIPT>

<HTML>
	<HEAD></HEAD>
	<BODY>
		<p>選択して下さい。</p>
		<FORM NAME="MyForm">
			<SELECT NAME="MySt">
				<OPTION>赤
				<OPTION>青
				<OPTION>黄
			</SELECT>
			<INPUT TYPE="Button" NAME="MyBtn" VALUE= "クリック！" onClick="checkColor ()">
		</FORM>
	</BODY>
</HTML>
　これは、選択リストとボタンの２つからなるプログラムです。選択リストは「赤」「青」「黄」という３つの項目があります。ここから１つを選択し、ボタンをクリックすると、選んだ色が表示されます。

　ここでのプログラムを見て下さい。

function checkColor () {
	KOUMOKU = document.MyForm.MySt.selectedIndex
	str = document.MyForm.MySt[KOUMOKU].text
	alert ("あなたは「" + str + "」を選びましたね！")
}
　このようになってますね。最初の変数KOUMOKUに代入している部分は、SELECTのselectedIndexを調べ、何番目の項目が選択されているか調べて変数に収めているのです。そして次の変数strに代入する部分は、document.MyForm.MySt[KOUMOKU].textという形で、選択されている番号の配列のtextプロパティを取り出し、変数に代入しています。こうすることで、現在選択されている項目のテキストを取り出せるというわけです。

　このようにオブジェクト内に更にいくつかの小さなオブジェクトが入れ子になっていると、何がどこにアクセスすれば得られるのかわかりにくいため、プログラミングが難しくなりがちです。オブジェクトの構造をよく理解して、どれに何のプロパティがあるのかしっかり確認しておきましょう。


GO NEXT

GO HOME