解説・結果

ヨッシーの”ホームページを作ろう（JavaScript編）”Vol.9

問題１

<HEAD>
<SCRIPT language="JavaScript">
function tasu1(a,b){
         c=0;
         for(i=a;i<=b;i++){
                   c=c+i;
         }
         document.write("１から10まで足すと　"+c);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" VALUE="1〜10まで足す" onClick="tasu1(1,10)">
</FORM>
</BODY>

《結果》

《解説》

<HEAD>
<SCRIPT language="JavaScript">
function tasu1(a,b){                                                                          ←関数tasu1を作る
         c=0;                                                                                       ←cは数の合計
         for(i=a;i<=b;i++){                                                                        ←i が a(=1) から b(=10) まで
                   c=c+i;                                                                             ←今の合計に i を足す
         }
         document.write("１から10まで足すと　"+c);                                    ←for文が終わったらここで答え(c)を書く
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" VALUE="1〜10まで足す" onClick="tasu1(1,10)">
↑ボタンを押したときにtasu1という関数を呼ぶ。
</FORM>
</BODY>

まず元のプログラムなんだけどこれはわかるよね。
onClickでボタンが押されたときの処理を決めているんだ。
ボタンが押されたときの処理はtasu1(1,10)だね。
じゃあ、はじめに作られているtasu1(a,b)という関数について見ていこう。
≪関数tasu1(a,b)≫
まず、関数と引数の関係についてだけど、呼び出し元（onClick）と関数を比較すると、
        tasu1(1,10)  →　tasu1(a,b)
という関係だね。
つまり、a=1 b=10 が代入されたことになるんだ。
だから a=1 b=10 として関数の中身を見ていくね。
（今回のaとbの役割は、aからbまで足すという役割）

function tasu1(1,10){
         c=0;
         for(i=1;i<=10;i++){
                   c=c+i;
         }
         document.write("１から10まで足すと　"+c);
}
(※変数には a=1 b=10 を入れて赤で示した)

まず、新しい変数として合計を入れておくための c 、for文で使うための i を用意した。
考え方としては、空の箱（c）を作っておいて、そこに１から１０までの数字を順番に入れていけばいいんだね。
順番に入れるというのはfor文を使うのがいいよね。
まず、空の箱 c=0 を用意する。
そのあとfor文は
１回目  i = 1  c=c(=0)+1  c=1になった      ２回目  i = 2  c=c(=1)+2  c=3になった
３回目  i = 3  c=c(=3)+3  c=6になった       ４回目  i = 4  c=c(=6)+4  c=10になった
　　　　　　　・
　　　　　　　・
１０回目  i = 10  c=c(=45)+10  c=55になった（b=10回目で終わり）
このような感じになっているね。
（読むだけでなくわからない人は一度自分で考えてみよう）
そして、c=55（１から10までの合計）が出てきたところで、
最後に、document.write("１から10まで足すと　"+c);で表示するんだよ。

　

問題２

<HEAD>
<SCRIPT language="JavaScript">
function tasu3(a,b){
          c=0;
          for(i=a;;i++){
                   c=c+i;
                   document.write(c+"<br>");
                   if(c>=b){
                              document.write("100を超えました");
                              return;
                   }
          }
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" VALUE="押して" onClick="tasu3(1,100)">
</FORM>
</BODY>

《結果》

《解説》

<HEAD>
<SCRIPT language="JavaScript">
function tasu3(a,b){
          c=0;
          for(i=a;;i++){
                   c=c+i;
                   document.write(c+"<br>");
                   if(c>=b){
                              document.write("100を超えました");
                              return;
                   }
          }
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" VALUE="押して" onClick="tasu3(1,100)">
</FORM>
</BODY>

これは上の問題１とある程度考え方は似ている。
最後の部分で合計が１００以上かどうかを判別できればいいんだ。
まず、ここもボタンを押したとき(onClick)の関数と引数の関係を見てみよう。
≪関数tasu3(a,b)≫
関数と引数の関係を見てみよう。呼び出し元（onClick）と関数を比較すると、
        tasu3(1,100)  →　tasu3(a,b)
という関係だね。
つまり、a=1 b=100 が代入されたことになるんだ。
だから a=1 b=100 として関数の中身を見ていくね。
（今回のaとbの役割は、aからはじめてbを超えるまで足すという役割）

function tasu3(1,100){
          c=0;
          for(i=1;;i++){
                   c=c+i;
                   document.write(c+"<br>");
                   if(c>=100){
                              document.write("100を超えました");
                              return;
                   }
          }
}

今回のaとbの役割はさっきとちょっと違うよ。
まず c=0 で合計の箱cを作っているね。
次にfor(i=1;;i++)なんだけど真中の項目が抜けてるよね。
これはどこまでという指定がないんだ。
つまり、i=1 からずっと i++ をして続けていくことになるんだ。
でもそれだといつまでたっても終わらない（無限ループという）事になってしまうので、どこまでこのfor文を続けるかはあとのif文で決めてやるんだね。
ループについては問題１をもう一度読んでね。
document.write(c+"<br>");は毎回足されるごとに現在の数字を表示しているんだよ。
※<br>は改行のしるし。document.writeは画面に直接文字を書くのではなく、ソース文に文字を書くようになっている。
じゃあ、forの中にあるif文についてやろう。
これはそんなに難しくないよ。
cというのは今までの合計なので、forのなかに書くことによって、回ってくるごとにc>=100かどうかを判別しているんだ。
もし(if)これを満たしていたらdocument.write("100を超えました")を書くんだね。
最後、この関数を終わらせるためにreturnを使ってもとのプログラムに戻してやるんだ。
（returnは忘れないように！忘れたら無限ループになっちゃうよ。）