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 |