Computer Programing

2004-11


平均点計算プログラムを拡張しよう

 前回作成した平均点計算プログラムを次に示します.今回は,さらにこのプログラムを改良していきます.

<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!--
function calc()
{
  var i, sum = 0, point, count = 0;
  for( i = 0 ; i <= 9 ; i++ )
  {
    str = 'cel' + i;
    point = parseInt( document.all.item( str ).value );
    if( isNaN( point ) == false )
    { 
      sum += point;
      count++;
    }
  }
  if( count != 0 ) document.all.item( "ans" ).value = sum/count;
              else document.all.item( "ans" ).value = "";
}
-->
</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="計算" onclick="calc()">
<P>
平均点は <input type="text" value="" size=50 name="ans"> 点です
</FORM>
</BODY>
</HTML>

リアルタイムエラーチェック

 前回,点数を入力させるためのテキストボックスに数以外のものが入力された場合は合計点に加えないようにする処理をさせています.しかし,空白はよいのですが,数以外のものがテキストボックスに表示されているのは,なにか気持ち悪いです.そこで,数以外のものが入力されたら,その入力を無効にして消してしまうようにしてみましょう.

 このようにするためには,テキストボックスに入力されたことを知る必要があります.このタイミングを知るためには input タグに次のような記述を追加します.

<input type="text" size=10 name="cel0" onchange="change()">

このようにすると cel0 という名前のテキストボックスの値が変更されると関数 change が呼び出されますので,その関数の中で入力されているものが数以外だったら,値を消してしまうという処理をすればよいわけです.

function change()
{
  var point = parseInt( document.all.item( 'cel0' ).value );
  if( isNaN( point ) == true )
  {
    document.all.item( 'cel0' ).value = '';
  }
}

 上記のエラーチェックに加えて,入力された数値の上限下限チェックをするようにしましょう.入力されるのは点数なので,上限は 100 点,下限は 0 点にしてよいと思います.もし,入力された点数がこの範囲を超えていたら,上記のエラーと同様に入力をキャンセルするようにします.

  if( point < 0 || point > 100 )
  {
    document.all.item( 'cel0' ).value = '';
  }

 ただ,このままだとテキストボックスの数だけ関数 change と同様の処理をする関数を作らなければなりません.なぜなら,値が数であるかを調べるテキストボックスの名前が,cel0, cel1, cel2,... と違うからです.そこで,関数を一つで済ますように,テキストボックスの名前を引数で受け取るようにします.つまり,

function change( name )
{
}

として,名前が name であるテキストボックスを対象にした処理を行うようにすればよいわけです.そして,cel0 が変更されたときには change( 'cel0' )を,cel1 が変更されたときには change( 'cel1' )を呼び出すようにすればよいわけです.


結果とデータを別ウィンドウに表示する

 現在のプログラムでは計算ボタンを押すたびに前の結果は消されてしまいます.前の結果をとっておきたいことがあるでしょう.また,そのときのデータを残しておきたいこともあると思います.そこで,結果とデータを別のウィンドウに表示するようにしてみます.

 別のウィンドウを開くには,

var infowin;
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 を呼び出します.

 なお,データを表示するときは,

infowin.document.write( document.all.item('cel0').value, '<BR>' );
infowin.document.write( document.all.item('cel1').value, '<BR>' );
infowin.document.write( document.all.item('cel2').value, '<BR>' );

とせずに,前回合計を計算するときのように for 文を使ってスマートなコードにしましょう.


演習

 ここまで説明したことを組み込んだ,平均点計算プログラムを作ってみましょう.