JavaScriptによるクライアントサイドプログラミング

統計処理ページを作ってみよう


CGI による平均点計算プログラム

 web ページ http://hands.ei.tuat.ac.jp/yorifuji/jikken/ave.html を開いてみてください.点数を入力するセルが10個あり,ここに点数を入力し,計算と書かれたボタンを押すと平均点を表示してくれる web ページです.この web ページは CGI を用いていますが,これも JavaScript を使うことで,サーバと通信することなく,このようなデータ処理を行うことができます.

 次に示すのは JavaScript を使ったコードの雛形です.関数 calc の中に平均点を計算し,表示するコードを書けばよいだけです.なお,結果はフォーム部品(ans)に表示するようにしています.

<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!--
function calc()
{
}
-->
</SCRIPT>
</HEAD>
<BODY>
<FORM name="point">
<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="計算" onClick="calc()">
<P>
<input type="text" value="" size=50 name="ans">
</FORM>
</BODY>
</HTML>

合計点を計算する

 平均点を計算させるにはまず合計点が必要です.合計点の計算は,先の注文webページと同様に

parseInt( document.point.cel1.value ) 
+ parseInt( document.point.cel2.value ) 
+...

とすればよいのはすぐにわかると思います.しかし,このコードを書くのはけっこう大変です.もし,データが100個くらい入力できるようにすると,さらに大変になります.なにかいい方法はないでしょうか.

 先に,data1 という名前のオブジェクトの値は

document.all.item( "data1" ).value

で取得できることを説明しました.ここで item の引数には文字列を渡していることに注目してください.この文字列を制御してあげれば,何かうまいことできそうな気がしませんか.名前が data1, data2, data3 のオブジェクトの値を加算する場合は,

sum = parseInt( document.all.item( "data1" ).value ) + 
      parseInt( document.all.item( "data2" ).value ) +
      parseInt( document.all.item( "data3" ).value );

と書きます.この三行で異なっているのはオブジェクト名の最後の一文字の部分だけです.そこで,for 文でループを作り,オブジェクト名を生成しながら,オブジェクトにアクセスするということができます.具体的には,

var i, sum = 0;
for( i = 1 ; i <= 3 ; i++ )
{
  str = 'data' + i;
  sum += parseInt( document.all.item( str ).value );
}

と書くことができるのです.


エラーチェック

 注文webページのときと同じように異常値が入力されたときの処理を追加してみましょう.入力されるのは点数なので,0点以上100点以下を正常値としましょう.この範囲外の値や文字が入力されたときには異常を知らせたいと思います.今回は赤字で-1を表示させて見ましょう.

 さて,フォームの中の文字を赤字にするにはどうしたらよいのでしょうか.フォームの中の文字の色を変化させたい場合は,オブジェクトの style プロパティを操作します.たとえば,cel01 の文字を赤色にしたい場合は,

document.point.cel1.style.color = "red";

または

document.all.item( "cel1" ).style.color = "red";

とします.style プロパティには色以外にも,大きさ(fontSize),フォントスタイル(fontStyle),フォントの太さ(fontWeight)など様々なものがあります.スタイルシートで設定できるものはほとんど JavaScript から操作可能と思ってよいでしょう.


結果を違うウィンドウへ

 計算結果をフォーム部品(テキスト)に表示させる場合,計算をさせるたびに前の計算結果は消えてしまいます(実は履歴を残しておく方法もありますが,ここではできないということにしておきます).計算結果をとっておきたいこともあるので,計算結果を新しく開いたウィンドウへ表示するようにしてみましょう.

 新しいウィンドウを生成したいときには次のようなコードを書きます.

infowin = window.open("", "_blank", "width=200,height=200");

一つ目の引数に URL を書くと,ウィンドウが開かれた後,その URL が示す web ページが表示されます.二番目の引数はウィンドウの名前を書きます.ここに _blank を指定すると新しいウィンドウが開かれることになります.三番目の引数はウィンドウのスタイルを指定するためのもので,ここでは横幅と縦幅を指定しています.他にも様々なウィンドウのスタイルを指定することができます.

 そして,開いたウィンドウへ表示を行うためには,自分自身のウィンドウに表示を行うのと同様に document.write を使います.具体的には次のような HTML コードになります.

infowin.document.open();
infowin.document.write( '<HTML><BODY>' );
infowin.document.write( 'Hello<BR>' );
infowin.document.write( '</BODY></HTML>' );
infowin.document.close();

infowin というのは,先程新しく開いたウィンドウオブジェクトです.そのウィンドウのドキュメントへ書き込みを行うわけです.今まで単に

document.write(...)

と書いていたのは,ウィンドウを省略した書き方であり,省略をすると自動的に自分自身のウィンドウを指定することになっていたわけです.document.open と document.close は,document.write を正常に動かすためのおまじないのようなものです.なくてもよいのですが,正式には書き始めに open を,最後に close を呼び出します.


演習

 では,ここまで説明したことを利用して,次のコードにいくつかの処理を書き加えて,平均点と標準偏差を表示するコードを書いてみてください.具体的には,

  • 点数が入力された際に異常値(0より小さかったり,100より大きかったり,数以外のもの)が入力された場合には,赤字で-1を表示する
  • 計算と書かれたボタンが押されたら,新しいウィンドウが開き,そこにデータ一覧と平均点を表示する
  • なお,何も入力されていないセルは無視する
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!--
function calc()
{
}
-->
</SCRIPT>
</HEAD>
<BODY>
<FORM name="point">
<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="計算" onClick="calc()">
</FORM>
</BODY>
</HTML>