第9回 繰り返し

変数の値の変化

現在の値を使った計算

変数には代入によってデータを記憶させることができます。

データは何かの式を計算した結果の値なわけですが、その式の中に、代入する先の変数の「現在の」値を使うことができます。例えば、変数xに対して、次のような代入を考えます。

  • x = x + 1;

「現在の」xの値が2だとすると、まずx+1を計算して3になります。それから、それをxに代入するので「次の瞬間の」xの値は3になります。

練習問題 09-1(☆)
  1. コンソールで次の式を順に計算してみなさい。
    • var x = 3;
    • x = x + 1;
    • x = x + 1;
    • x = x + 1;
  2. コンソールで次の式を順に計算してみなさい。
    • var x = 1;
    • x = x * 2;
    • x = x * 2;
    • x = x * 2;
    • x = x * 2;
練習問題 09-2a(☆☆)
  1. ファイルex09-2.htmlを次のように書きなさい。
  2. ファイルex09-2.jsを次のように書きなさい。
  3. ボタンを何回かクリックしてみなさい。数字はどのように変わるでしょうか?

「今の値に○○する」というのはよく使うのですが、同じ変数名を2回書くのは無駄です。それで、「今の値に○○を足す」という+=演算子や、「今の値から○○を引く」という-=演算子が用意されています。例えば、 x = x - 2;x -= 2; と書いても同じです。
さらに、「1を足す」と「1を引く」はすごくよく使うので、++演算子と--演算子もあります。 x = x + 1;x += 1;++x; は同じ意味です。なお、 x++; と書いても1を足せますが、意味が微妙に違います(次の資料を参照)。

デバッガの使い方

プログラムが複雑になってくると、今どこを実行しているのか、変数はどんな値になっているか分からなくなることがあります。そんな時は、デバッガを使って調べることができます。

デバッガを使うと、次のようなことができます。

一時停止・ステップ実行・実行再開
プログラムを実行する前に、あらかじめ停止させたい場所(ブレークポイントと呼びます)を設定しておきます。プログラムの実行が順に進んでいって、ブレークポイントのところまで来ると、実行が一時停止します。そこから実行を再開することもできますし、1ステップだけ実行してまた停止させることもできます。
変数の値の表示・変更
ブレークポイントで停止している状態で、変数の現在の値を表示できます。また、値を書き換えてから実行を再開することができます。
練習問題 09-2b(☆☆☆☆)
  1. 練習問題09-2aの続きです。ここからは下の動画を見ながらやりなさい。字が小さいので全画面表示にした方がいいです(そうすると自分の操作ができなくなりますが…)。
  2. Firefoxでex09-2.htmlを表示し、メニュー【ツール】→【Web開発】→【デバッガ】を選択すると、下半分にデバッガが表示されます。
  3. 左側に、このページで使われているファイルが表示されるので、ex09-2.jsをクリックすると、JavaScriptのプログラムが右側に表示されます。
  4. プログラムの行番号が表示されているところをクリックすると、その行を実行する直前で停止するようにブレークポイントを設定できます。5行目をクリックして、alertの直前で停止するようにしなさい。
  5. 上半分にある「実行ボタン」をクリックして、関数addCount()を呼び出しなさい。下半分の表示はどう変わるでしょうか?
  6. 変数の値はプログラムの右側に表示されます。「スコープ」については難しいのでこの授業では説明しませんが、変数宣言関数定義の外にあればグローバルスコープ、中にあればfunctionスコープになります。グローバルスコープの横の三角をクリックして変数一覧を表示し、countの値が何になっているか調べなさい。
  7. 実行を再開するには、ファイルリストの上にある右向き三角をクリックします。再開して、countの値とダイアログボックスに表示される数字が同じであることを確認しなさい。
  8. プログラムの4行目をクリックして、count = count + 1の直前でも停止するようにしなさい。
  9. 上半分にある「実行ボタン」をクリックして、関数addCount()を呼び出し、4行目で停止したらcountの値を調べなさい。
  10. 実行を再開させなさい。5行目でも停止しますが、countの値はどうなっているでしょうか?
  11. 実行を再開し、ダイアログボックスに表示される数字を確認しなさい。
  12. 設定されているブレークポイントをクリックすると、解除できます。4行目と5行目のブレークポイントを解除しなさい。

参考資料

HTMLの属性を変化させる

練習問題08-8では、ボタンを押すと画像の横幅を800に設定しましたが、これを「ボタンを押すと画像の横幅を今の値より10増やす」にしてみましょう。

練習問題 09-3(☆☆☆)
  1. ファイルex09-3.htmlを次のように書きなさい。
  2. ファイルex09-3.jsを次のように書きなさい。
  3. ブラウザで表示してボタンをクリックしてみなさい。
  4. ex09-3.jsの先頭にwという名前の変数宣言を追加し、最初の値として100を代入しなさい。
  5. setAttributeのカッコの中にある幅の指定を'800'ではなく、変数wにしなさい。
  6. 関数changeの中に、「変数wの値を10増やす」という文を書き、ボタンをクリックするたびに画像が大きくなっていくようにしなさい。
練習問題 09-4(☆☆☆☆)

新しくテキスト入力欄を作り、そこに数字を入れてからボタンを押すと、画像の横幅がその数だけ増えていくようにしてみましょう。

ページに内容を追加していく

練習問題06-8で、innerHTMLを使ってページの表示内容を変更することをやりました。変数の値を変えながらinnerHTMLに代入すると、ページの内容がだんだん変化していくようにできます。

練習問題 09-5(☆☆☆)
  1. ファイルex09-5.htmlを次のように書きなさい。
  2. ファイルex09-5.jsを次のように書きなさい。
  3. ブラウザで表示し、「ポケット」ボタンを1回クリックしてみなさい。表示はどう変わったでしょうか。
  4. ex09-5.jsの2行目と3行目で、変数xにはどのような値が代入されたでしょうか?
  5. 結果としてHTMLの構造(ul要素とli要素の関係)はどうなったでしょうか?
  6. 「ポケット」ボタンをさらに何回かクリックしてみなさい。ビスケットは増えますか?
  7. ビスケットの個数を増やすため、個数を保存しておく変数bex09-5.jsの先頭で宣言しなさい。最初の値として1を代入します。
  8. 「ビスケットが1つ」の数字の1の代わりに変数bの値を使うようにしなさい。文字列と数値の連結は+でできます。
  9. 関数knock()の中に「変数bを1増やす」という文を追加しなさい。
  10. ブラウザで表示し、「ポケット」ボタンをクリックして、ビスケットが増えていくか確認しなさい。

自動的な繰り返し

上の練習問題では、ボタンを1回クリックするたびに何かを1回実行するので、繰り返し実行するにはボタンを何回もクリックしないといけません。今度は、ボタンを1回クリックするだけで何回も繰り返して実行するようにします。

for文

命令を繰り返して実行するにはfor文を使います。for文は次のような形をしています。

  • for ( 初期化; 条件; 変化 ) { 処理 }

これは次のように実行されます。

  1. 「初期化」の部分を実行します。
  2. 「条件」の部分を計算します。
  3. 「条件」が成り立つ(値がtrueである)ならば「処理」の部分を実行します。
  4. 「変化」の部分を実行します。
  5. 再び「条件」の部分を計算し、成り立つならば、また「処理」と「変化」の部分を実行します。
  6. 「条件」が成り立たなくなる(値がfalseになる)と終了します。

練習問題 09-6(☆☆☆)
  1. ファイルex09-6.htmlを次のように書きなさい。
  2. ファイルex09-6.jsを次のように書きなさい。
  3. ブラウザで表示してボタンをクリックしてみなさい。
  4. 紙に次の図を描き、ex09-6.jsのプログラムのどの部分がどの箱に対応しているか書き込みなさい。
  5. ex09-6.jsの2行目のcount <= 5count >= 5に書き換えて再読み込みし、ボタンを押してみなさい。なぜこうなるのでしょうか?
  6. 今度はcount >= 0にに書き換えて再読み込みし、ボタンを押してみなさい。なぜこうなるのでしょうか?
練習問題 09-7(☆☆☆☆)

練習問題09-5のプログラムを改造し、「ポケット」を1回クリックすると、一気に「ポケットを叩くとビスケットが100つ」まで100行追加されるようにしなさい。

練習問題 09-8(☆☆☆☆)

新しくテキスト入力欄を作り、そこに数字を入力してからボタンを押すと、ビスケットの数がその値になるまで繰り返すようにしてみましょう。

同じようにして、練習問題09-3もfor文を使って画像がだんだん大きくなっていくようにできそうな気がしますが、これはうまくいきません。どうしてかというと、for文の繰り返しは一瞬のうちに実行されるので、実際に見えるのは最後の一番大きなサイズの画像だけだからです。画像をだんだん大きくする方法は、付録Aの「タイマーによる繰り返し」を見てください。

while文とdo-while文

繰り返し実行には、for文だけでなくwhile文やdo-while文を使うこともできます。どれを使ってもだいたい同じことが書けますので、書きやすいものを使ってかまいません。

while文は次のような形をしています。

  • while ( 条件 ) { 処理 }

do-while文は次のような形をしています。

  • do { 処理 } while ( 条件 )

while文と違い、まず処理をしてから条件を調べます。最初から条件が成り立たない場合、while文は処理を1回も実行しませんが、do-while文は必ず1回は処理を実行します。

for文と同じことをwhile文で書くと、次のようになります。

  • 初期化; while ( 条件 ) { 処理; 変化; }
練習問題 09-9(☆☆☆☆)

練習問題09-6練習問題09-7をwhile文を使って書いてみましょう。

チェックポイント
  • x = x * 2 はどういう意味でしょうか?
  • for文はどのような形をしているでしょうか?
  • for文の初期化を実行した時点で条件が成り立たたない場合はどうなるでしょうか?