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

　４．合計・平均計算のページ作成

　合計と平均を計算するページを作成する。ちょっとしたアプリケーション？である。
　まずは合計の計算だけとし、データの個数は最大5個とする。

(1) フォームの準備

　フォームを1つ用意し、次の入力部品を配置（左図参照）する。
　フォームはname="fk"とする。

　・1行テキスト　…　size="20" type="text" name="d1"
　・1行テキスト　…　size="20" type="text" name="d2"
　・1行テキスト　…　size="20" type="text" name="d3"
　・1行テキスト　…　size="20" type="text" name="d4"
　・1行テキスト　…　size="20" type="text" name="d5"
　・1行テキスト　…　size="20" type="text" name="sum"
　・ボタン　…　type="button" value="計算開始" イベント:OnClick

　関数のプログラム
　関数goukeiを作成して合計計算をする。引数として5つのデータを受け取り、合計を返却する。
　　　　引数：データ1〜5
　　　　返却値：データ1〜5の合計

プログラムリスト
function goukei(x1,x2,x3,x4,x5){
    a=parseInt(x1)+parseInt(x2)+parseInt(x3)+parseInt(x4)+parseInt(x5);
    return a;
}

　5つのデータをx1,x2,x3,x4,x5で受け取る。受け取ったデータは文字列なので、関数parseIntで整数に変換している。（実数に変換するには、関数parseFloatを使う。）
　整数に変換しないで加算(x1+x2+x3+x4+x5)を行うと文字列の連結になる。
　例えば、x1=1,x2=2,x3=3,x4=4,x5=5の場合、次のようになる。
　　　　計算　parseInt(x1)+parseInt(x2)+parseInt(x3)+parseInt(x4)+parseInt(x5) → 15
　　　　連結　x1+x2+x3+x4+x5 → 12345

　イベントのアクション
　1行テキストに入力された値はvalueプロパティで参照できる。例えば、テキストd1の値は、document.fk.d1.valueと表す。結果はテキストsumに表示する。
　イベントのアクションは次のようになる。

onclick="document.fk.sum.value=
 goukei(document.fk.d1.value,document.fk.d2.value,document.fk.d3.value,
 document.fk.d4.value,document.fk.d5.value)"

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

<HTML>
<HEAD>
<TITLE>合計計算</TITLE>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
<!--
function goukei(x1,x2,x3,x4,x5){
    a=parseInt(x1)+parseInt(x2)+parseInt(x3)+parseInt(x4)+parseInt(x5);
    return a;
}
//-->
</SCRIPT>
<H3>合計計算のページ</H3>
<FORM name="fk">データ<BR>
1.<INPUT size="20" type="text" name="d1"><BR>
2.<INPUT size="20" type="text" name="d2"><BR>
3.<INPUT size="20" type="text" name="d3"><BR>
4.<INPUT size="20" type="text" name="d4"><BR>
5.<INPUT size="20" type="text" name="d5"><BR>
合計 = <INPUT size="20" type="text" name="sum">
<INPUT type="button" value="計算開始" onclick="document.fk.sum.value=
goukei(document.fk.d1.value,document.fk.d2.value,document.fk.d3.value,
document.fk.d4.value,document.fk.d5.value);">
</FORM>
</BODY>
</HTML>

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


改良１　オブジェクトの配列
　関数呼び出し時の引数が長く、データの個数を増やすときも不便である。

　データ入力用の1行テキストの名前を次のようにすべて同じにする。

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>

　1つ目のデータを参照するには、document.fk.dat[0].value とする。すなわち、同じ名前にすると入力部品は配列として参照することができる。上のようにした場合、dat[0]〜dat[4]でそれぞれの1行テキストを参照できる。
　このままでは、関数呼び出し時の引数は短くならない。ここで、次のように引数としてオブジェクトだけを渡すようにする。
　　　　

onclick="document.fk.sum.value = goukei(document.fk.dat)"

　関数goukeiも次のように変更する。

function goukei(xx){
    a = 0;
    for(n = 0; n < 5; ++n)
        a = a + parseInt(xx[n].value);
    return a;
}

　引数xxにはオブジェクト(document.fk.dat)が格納されているので、各データを参照するには xx[n].value と表す。

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

<HTML>
<HEAD>
<TITLE>合計計算</TITLE>
</HEAD>
<BODY><SCRIPT language="JavaScript">
<!--
function goukei(xx){
    a = 0;
    for(n = 0; n < 5; ++n)
        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>

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


改良２　エラーチェック
　5つのデータをすべて入力しないで計算すると、"NaN"と表示される。つまり、エラーである。また、数字以外の文字を入力してもエラーになる。

　関数goukei内でデータのチェックを行う。

function goukei(xx){
    a = 0;
    for(n = 0; n < 5; ++n)
        if(isNaN(parseInt(xx[n].value)) == false)
            a = a + parseInt(xx[n].value);
    return a;
}

　関数isNaNは、引数が数値でないことをチェックする。数値、または数値として解釈可能な文字列であれば偽、それ以外は真を返す。NaN は Not a Number の意味である。
　if文は否定(!)の演算子を使用して次のように書くこともできる。
　　　　if(!isNaN(parseInt(xx[n].value)))

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

<HTML>
<HEAD>
<TITLE>合計計算</TITLE>
</HEAD>
<BODY><SCRIPT language="JavaScript">
<!--
function goukei(xx){
    a = 0;
    for(n = 0; n < 5; ++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>

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


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

 

 

inserted by FC2 system