JavaScript プログラミング
前へ 目次へ 次へ 

　１０．ドキュメント

　ドキュメント、すなわちブラウザで表示されているホームページのことであり、正確にはドキュメントオブジェクトといい、document と表記す。ドキュメントオブジェクトによって、このページ（ドキュメント）の状態を参照したり、設定したりすることができる。一番最初に使った document.write("はじめてのjavascript"); はドキュメント(HTMLファイル)の記述された位置に文字列(はじめてのjavascript)を書き込むことを意味する。
　このように、ドキュメントオブジェクトはホームページに関すること全般について参照・設定できるので、すべてをここで扱うことはできない。ここでは、自学自習システムの作成を目標としているので、必要と思われるものだけを説明していくことにする。


(1) フォーム
　フォームは<FORM>〜</FORM>タグで範囲を指定し、1行テキストなどのオブジェクトはフォームの中に配置する。
　ホームページビルダーのページ編集では点線内の部分がフォームの範囲である（次図参照）。
　ホームページ内に複数のフォームがある、または必要である場合、ひとつひとつのフォームに名前(name属性)を付けて区別することができる。ここで次図のような場合を考える。
　4つのフォームのがあり、form1〜form4の名前が付けられている。
　form1〜form3それぞれで処理が行われ、結果（数値）が1行テキストtext1に表示されるようになっているものとする。
 
　form4の「計算」ボタンをクリックするとform1〜form3のtext1のデータの平均が計算されて、form4のtext1に表示されるようにする。
　「計算」ボタンがクリックされたときの処理は次のようになる。（documentを省略）
　　　　form4.text1.value = (parseInt(form1.text1.value) + parseInt(form2.text1.value) + parseInt(form3.text1.value)) / 3;

　ここで、フォームを増減しようとすると計算式を変更しなければならない。
　フォームが配列のように扱えれば、フォームの個数だけ加算して、フォームの個数で割れば平均が求められる。

formsオブジェクト ドキュメント内のフォームを参照・設定する。
フォームには配置した順に0から番号が付けられる。

　このformsオブジェクトを使うと平均の計算は次のようにプログラムできる。（documentは省略できない）

HTMLリスト　[[jsrei14b.html]]

<HTML>
<HEAD>
<TITLE>forms</TITLE>
</HEAD>
<BODY><SCRIPT language="JavaScript">
<!--
function keisan(){
    goukei = 0;
    for(n = 0; n < document.forms.length - 1; ++n)
        goukei = goukei + parseInt(document.forms[n].text1.value);
    document.forms[n].text1.value = goukei / (document.forms.length - 1);
}
//-->
</SCRIPT>
<FORM name="form1">form1<BR>
　　　　　　<INPUT size="8" type="text" name="text1" value="10"></FORM>
<FORM name="form2">form2<BR>
　　　　　　<INPUT size="8" type="text" name="text1" value="20"></FORM>
<FORM name="form3">form3<BR>
　　　　　　<INPUT size="8" type="text" name="text1" value="30"></FORM>
<FORM name="form4">form4<BR>
　　　<INPUT type="button" value=" 計 算 " onclick="keisan();">
　　<INPUT size="8" type="text" name="text1"></FORM>
</BODY>
</HTML>
・document.forms.length ： フォームの個数。ここでは、4個となる。
・document.forms[n] ： n番目のフォームを表す。document.forms[0]はform1、document.forms[1]はform2、・・・、document.forms[3]はform4のこと。

　各フォームをこのformsオブジェクトで参照・設定するのであれば、各フォームに付けた名前は省略することができる。

もう一つの方法
　配列として扱いたいフォームの名前をすべて同じにする。
　上のプログラムの場合、form1〜form3をすべてform1に変更する。プログラムは次のようになる。
goukei = 0;
for(n = 0; n < form1.length; ++n)
    goukei = goukei + parseInt(form1[n].text1.value);
form4.text1.value = goukei / form1.length;


問題　次のプログラム作成しなさい。

(a)　左図のようにフォームと入力部品を配置する。
 
(b)　正解数を入力して「計算」ボタンをクリックすると得点が表示される。プログラムはボタンのonclickイベントのアクションとして書く。
 
(c)　4つ目のフォームの「計算」ボタンをクリックすると各フォームの得点の平均を計算する。プログラムは関数keisanとして作成する。
 
(d)　得点を計算するフォームの数を増減させても平均を計算する関数keisanを変更しなくても良いようにすること。



(2) 入力部品
　フォームのときと同じように、フォーム内に配置した複数の入力部品も配列のように扱えると便利である。
　「合計・平均計算のページ作成」の「改良１　オブジェクトの配列」で示したように入力部品に同じ名前を付けると配列のように扱える。
　このほかに、入力部品に付ける名前に関係なく参照する方法がある。

elementsオブジェクト フォーム内のオブジェクト（入力部品）を参照・設定する。
オブジェクトには配置した順に0から番号が付けられる。

HTMLリスト　[[jsrei14e.html]]

<HTML>
<HEAD>
<TITLE>elements</TITLE>
</HEAD>
<BODY><SCRIPT language="JavaScript">
<!--
function goukei(xx){
    a = 0;
    cnt = 0;    // 個数用
    for(n = 0; n < xx.elements.length - 2; ++n)
        if(!isNaN(parseInt(xx.elements[n].value))){
            a = a + parseInt(xx.elements[n].value);
            ++cnt;    // 個数カウント
        }
    xx.sum.value = a;    // 合計
}
//-->
</SCRIPT>
<H3>合計計算のページ</H3>
<FORM="fk">データ<BR>
1.<INPUT size="20" type="text"><BR>    //←elements[0]
2.<INPUT size="20" type="text"><BR>    //←elements[1]
3.<INPUT size="20" type="text"><BR>    //←elements[2]
4.<INPUT size="20" type="text"><BR>    //←elements[3]
5.<INPUT size="20" type="text"><BR>    //←elements[4]
合計 = <INPUT size="20" type="text" name="sum">    //←elements[5]
  <INPUT type="button" value="計算開始" onclick="goukei(this.form);">    //←elements[6]
</FORM>
</BODY>
</HTML>

・this.form ： このフォーム(document.fk)のこと。
・xx.elements.length ： 入力部品の個数。ここでは、7個となる。


前へ 目次へ 次へ 
 JavaScript プログラミング Copyright © 2003 Hiroshi Masuda 

 

 

inserted by FC2 system