Computer Programing

2004-10


フォームを使った平均点の計算

 前に作成した平均点計算プログラムはダイアログで点数を入力するものでした.ダイアログ形式の場合,何度もダイアログが表示され,目がチラチラします.また,入力の訂正も難しいです.そこで,今回はフォームを用いて点数を入力できるようにしてみます.

次に示すのは10個のテキストボックスが表示されるwebページのHTMLコードです.これに手をつけていき,テキストボックスに入力された点数の平均点を表示するプログラムにしていきましょう.

<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!--
-->
</SCRIPT>
</HEAD>
<BODY>
<FORM name="points">
<input type="text" size=10 name="cel0"><BR>
<input type="text" size=10 name="cel1"><BR>
<input type="text" size=10 name="cel2"><BR>
<input type="text" size=10 name="cel3"><BR>
<input type="text" size=10 name="cel4"><BR>
<input type="text" size=10 name="cel5"><BR>
<input type="text" size=10 name="cel6"><BR>
<input type="text" size=10 name="cel7"><BR>
<input type="text" size=10 name="cel8"><BR>
<input type="text" size=10 name="cel9"><BR>
<input type="button" value="計算">
<P>
平均点は <input type="text" value="" size=50 name="ans"> 点です
</FORM>
</BODY>
</HTML>

フォームに入力された値をゲット

 平均点を計算するためにはフォーム要素のテキストボックスに入力された点数を得る必要があります.テキストボックスにアクセスするためには,たとえば,

a = document.points.cel0.value
または
a = document.all.item("cel0").value

と書きます.ここで points はフォーム全体につけられた名前で,cel0 はフォーム要素につけられた名前です.この文が実行されると一番上に表示されているテキストボックスに入力されている値が変数 a に格納されます.

 逆に,テキストボックスに入力されている値をプログラムで変更したい場合は,

document.points.cel0.value = '10'
または
document.all.item("cel0").value = '10'

と書くことでできます.

 なお,テキストボックスから得られる値は文字列ですので,計算処理を施したい場合は parseInt などを用いて数値に変換する必要があります.


平均点を計算するタイミング

 平均点を計算するのは「計算」と書かれたボタンを押したときにしましょう.フォーム要素のボタンが押されたときを知るためには,input タグを次のようにします.

<input type="button" value="計算" onclick="calc()">

このようにすると,ボタンが押されると関数 calc が呼び出されます.

 あとは,この関数の中で平均点を計算して,結果を表示するためのテキストボックスに

document.all.item( "ans" ).value = 結果;

と,その結果を入れればよいだけです.


平均点の計算

 ただ単にすべてのテキストボックスの値を加算するコードを書くのは,

sum = parseInt( document.all.item( "cel0" ).value ) + 
      parseInt( document.all.item( "cel1" ).value ) +
      parseInt( document.all.item( "cel2" ).value ) + ...;

と面倒です.ここで,テキストボックスの名前は最後の1文字だけが異なり,その1文字は0からの順序数になっていることに目をつけると,次のようにすっきり書くことができます.

var i, sum = 0, name;
for( i = 0 ; i <= 9 ; i++ )
{
  name = 'cel' + i;
  sum += parseInt( document.all.item( name ).value );
}

 また,空白や数字列が入力されていないテキストボックスは無視する必要があります.そこで,きちんと数値に変換された場合だけ,合計に足すという処理にします.この判定はどのようにすればよいのでしょうか.parseInt で数字列でないものを数値に変換しようとすると,NaN という値が返されます.そして,値が NaN であるかどうかは関数 isNaN を使います.値が NaN だと true が,NaN ではないと false が返ります.テキストボックスに入力されているものが数のときだけ加算するようにしたコードを次に示します.

  point = parseInt( document.all.item( name ).value );
  if( isNaN( point ) == false )
  {
    sum += point;
  }

 また,平均点を計算するためには,足した点数の数を数えておく必要があるので,

  if( isNaN( point ) == false )
  {
    sum += point;
    count++;
  }

と,合計に値を足すたびに,変数 count に 1 を足しておきます.なお,最初に count に 0 を入れておかないとうまく動かないので気をつけましょう.

 なお,どのテキストボックスにも数が入力されていないとき,count が 0 のときは,平均点の計算 sum/count を実行しないようにすることを考慮してください.これは 0 による除算を行わないようにするためです.


演習

 ここまでに説明したことをあわせて,平均点を計算するプログラムを完成させましょう.