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

 4.合計・平均計算のページ作成 2

改良3 配列の個数
 データの個数を増やしたり減らしたりしたとき、関数goukeiのfor文を変更する必要がある。

 配列の個数はlengthプロパティで知ることができる。
 関数goukei内でオブジェクトdocument.fk.datは、引数(変数)xxで参照できる。このxxのlengthプロパティが配列の個数を表す。

 全体のHTMLリストを次に示す。 [[ jsrei6d.html ]]

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

 データ入力用の1行テキスト(名前は"dat"とすること)の個数を増減させて、ブラウザで表示させて計算してみよう。



改良4 平均処理の追加
 関数goukeiに平均の処理を追加する。しかし、関数は1つの値しか返却できない
 合計値はフォームの1行テキストsumに表示している。平均値を表示するため、次図のようにフォームに1行テキストaveを追加し、関数goukeiの中で合計値と平均値を表示することにする。

 関数を呼び出すとき、イベントのアクションで document.fk.sum.value=goukei(document.fk.dat) としている。引数の document.fk.dat は5個ある1行テキストdatオブジェクトのことである。この引数を document.fk に変更するとフォームオブジェクトを関数に渡すことができる。
 関数goukeiではfunction goukei(xx)で、引数をxxで受け取っている。関数goukeiの中で1行テキストのdat、sum、aveの値は次のようにして参照することができる。
    xx.dat[0].value
    xx.sum.value
    xx.ave.value
 関数goukeiの中で計算結果を表示するので、返却値は不要になるので関数の呼び出しは次のようになる。

onclick="goukei(document.fk)"

 全体のHTMLリストを次に示す。 [[ jsrei6e.html ]]

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

 ブラウザで表示させて計算してみよう。


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

 

 

inserted by FC2 system