|
||||
|
|
10章 JavaScriptとHTMLの連携 ( 後編 )
|
|
|
コントロール参照の仕方
前ページまででイベントの概念が分かったら今度はテキストボックスなどのコントロールを参照するやり方をみてみましょう。 今回は例として [ タグを使用してテキストボックスを作成してそれを参照したい ] というケースを考えてみます。
まず HTMLでテキストボックスを作成するには <input type=text name=txt1> こんなような記述になります。注目して頂きたいのは赤で記述してあるname属性です。この属性によってどのコントロールを参照するのかを指定する事が出来ます。 [ sample ] [ source ]
<script language="JavaScript"> <!-- function func9_3(){ alert(document.frm9_3.txt1.value); } //--> </script> <form name=frm9_3> <input type=text name=txt1><br><br> <input type=button value=" ♂ " onClick=func9_3()> </form> [ document.frm9_3.txt1.value ] を説明すると感じになります。
この文章 └ この文章にあるfrm9_3と言うフォーム └ frm9_3にあるtxt1と言うコントロール └ そのコントロールの内容 このようにフォーム名 -> コントロール名と言った感じで [ 何処に含まれる何々、、 ] と記述してあげる必要があります。こんな記述は面倒くさいと思われるかもしれませんが、いきなり [ txt1.value ] と記述しても、その [ txt1 ] が何処に存在するコントロールなのか JavaScript 側からでは分かりません。 ちょっと説明するのを忘れてしまいましたが valueとはテキストボックスが持つプロパティで、そのテキストボックスの内容を表わします。 ちょっと高度なコントロール参照方法
コントロールを参照するやり方を少しやってみましたね。何処に含まれる何々、、と名称を指定していくやり方です。では、そのやりかたで下記の要件に対応してみましょう。
一つのページに 10個のテキストボックスが存在するページで、テキストボックスの横にあるボタンをクリックすれば横にあるテキストボックスの内容がメッセージボックスで表示される。
鋭い方はとても面倒くさいのに気がついたと思います。 1〜2つ程度のテキストボックスでしたら上のような記述で簡単に記述する事が出来ますが、それが 10個となると、対応するテキストボックスの内容を表示する関数を 10個も記述したり、、、と気が重くなってしまいます。 そんな面倒くさい事にならない記述方法を見てみましょう。 [ sample ] [ source ]
<script language="JavaScript"> <!-- function func1(obj){ alert(obj.value); } //--> </script> <form name=frm1> <input type=text name=txt1> <input type=button value=" ♂ " onClick=func1(txt1)><br><br> <input type=text name=txt2> <input type=button value=" ♂ " onClick=func1(txt2)><br><br> <input type=text name=txt3> <input type=button value=" ♂ " onClick=func1(txt3)><br><br> <input type=text name=txt4> <input type=button value=" ♂ " onClick=func1(txt4)><br><br> <input type=text name=txt5> <input type=button value=" ♂ " onClick=func1(txt5)><br><br> <input type=text name=txt6> <input type=button value=" ♂ " onClick=func1(txt6)><br><br> <input type=text name=txt7> <input type=button value=" ♂ " onClick=func1(txt7)><br><br> <input type=text name=txt8> <input type=button value=" ♂ " onClick=func1(txt8)><br><br> <input type=text name=txt9> <input type=button value=" ♂ " onClick=func1(txt9)><br><br> <input type=text name=txt10> <input type=button value=" ♂ " onClick=func1(txt10)><br><br> </form> 先ず関数を呼び出す側で func1(txt1)となっていまね、これは引数にtxt1というオブジェクトを渡しています。関数にこのオブジェクトが持っているプロパティ、メソッドを含めた情報を提供しています。
func1(txt1)
func1(obj)関数の定義部分ですがfunc1(txt1)と呼び出されていますので変数objは通常のように値だけを保持しているのではなく、オブジェクト自体が格納されています。つまりobj = txt1となりこの変数を使ってテキストボックスへアクセスできます。
function func1(obj)
上までの解説でなんとなくわかってきたと思います。これは document.frm1.txt1.valueと同じ動作をします。
obj.value
※ ただしここまでの解説は関数の引数としてテキストボックスオブジェクトを指定したと仮定しての話です。例えば 10を引数に渡すと当然実行時エラーになってしまいます。 複数のテキストボックス
今回は一つのテキストボックスを参照して、もう一つのテキストボックスの内容を変化させるようなスクリプトを作ってみます。
[ sample ] [ source ]
<script language="JavaScript"> <!-- function func2(){ document.frm2.txtPrice.value=document.frm2.txtKosuu.value * 100; } //--> </script> <form name=frm2> 林檎 100円 * <input type=text name=txtKosuu>個 <input type=button value="計算" onClick=func2()><br><br> 合計金額は<input type=text name=txtPrice>円になります( ̄〜 ̄)ξ<br><br> </form> テキストボックスに入っている値を参照する時は、右辺にオブジェクト名.プロパティと記述しました。値を代入する場合は単純に左辺にオブジェクト名.プロパティと記述します。
document.frm2.txtPrice.value
ラジオボタン
今回はラジオボタンの利用法を見てみます。ラジオボタンとはそのグループ内では1つしか選択する事が出来ないコントロールで、その選択肢のなかでどれか一つだけを選択させたいと言う特に使用します。
[ sample ] [ source ]
<script language="JavaScript"> <!-- var msg; function rdo_Change(obj){ msg = obj.value; } function func3(obj){ alert("好きな食べ物は" + msg + "です。"); } //--> </script> <form name=frm3> 好きな食べ物を選択して下さい。<br><br> <input type="radio" name="rdo1" value="林檎" onClick=rdo_Change(this)>林檎<br> <input type="radio" name="rdo1" value="蜜柑" onClick=rdo_Change(this)>蜜柑<br> <input type="radio" name="rdo1" value="洋梨" onClick=rdo_Change(this)>洋梨<br> <input type="radio" name="rdo1" value="野苺" onClick=rdo_Change(this)>野苺<br><br> <input type="button" value=" ♂ " onClick=func3(rdo1)><br> </form> thisとは何でしょう!?簡単に言ってしまうと自分自身を指すオブジェクトの事です。例えば野苺というvalueプロパティを持つラジオボタンをクリックすると関数rdo_Changeへジャンプしますがこの時引数で渡しているのが自分自身、つまりvalueプロパティに野苺を持っている自分自身が関数に渡されます。
this
この関数はラジオボタンがクリックされるたびに呼ばれる関数で、クリックされたラジオボタンのvalueプロパティを取得します。
function rdo_Change(obj)
この関数はボタンが押された時に起動する関数でrdo_Changeによって取得しているラジオボタンの内容を表示します。
function func3(obj)
チェックボックス T
今回は簡単なチェックボックスの利用法を見てみます。 チェックボックスとはラジオボタンと異なりそのいくつでも選択する事が可能なコントロールで、複数選択して良い選択肢に良く利用されています。今回は一つの時の参照方法を見てみます。
[ sample ] [ source ]
<script language="JavaScript"> <!-- function func4(obj){ if(obj.checked){ alert("選択されています!!"); }else{ alert("未選択です!!"); } } //--> </script> <form name=frm4> <input type="checkbox" name="chk1">自分でオタクだな〜と思う事がある<br> <input type="button" value=" ♂ " onClick=func4(chk1)><br> </form> .checkedプロパティ ちょっと高度なコントロール参照方を見て頂ければ関数に渡された引数はチェックボックスオブジェクトと言う事が分かるとおもいます。オブジェクト名.checkedとありますがこれは checkedプロパティを参照しているのです。checkedプロパティとはあまり聞きなれないですね、、valueプロパティはそのコントロールに入力された内容を参照する事が出来ますが、このプロパティはそのコントロールが選択されているかを調べる事が出来ます。
チェックボックス U
今回はちょっと手の込んだ!?なチェックボックスの利用法を見てみます。チェックボックスはラジオボタンと異なり複数選択できるという事を前回お話しましたが、複数のチェックボックスを実践してみましょう。
[ sample ] [ source ]
<script language="JavaScript"> <!-- function func5(){ var cnt=0; var i; for(i =0; i< document.frm5.elements.length;i++){ if(document.frm5.elements[i].checked) cnt++; } alert("チェックしてあるのは" + cnt + "項目です。"); } //--> </script> <form name=frm5> <input type=checkbox name=chk>チェック1<br> <input type=checkbox name=chk>チェック2<br> <input type=checkbox name=chk>チェック3<br> <input type=checkbox name=chk>チェック4<br><br> <input type=button value=" ♂ " onClick=func5()> </form> エレメントとはフォームに存在する全てのオブジェクトを要素に持っている配列の事です。各要素へのアクセスは配列同様添字を使用してアクセスします。lengthプロパティでそのフォームにいくつコントロールが存在するかを参照する事が出来ます。※この例ではボタンも入りますので5になります。 → Visual Basicではコレクションと考えると分かり易いかもしれません。
document.frm5.elements.length
添字を使用してアクセスする事でフォームにある各要素へアクセスしています。ここでいくつチェックされているかを確認します。
document.frm5.elements[i].checked
|