基礎プログラミング演習 第７回 繰り返し.

Presentation on theme: "基礎プログラミング演習 第７回 繰り返し."— Presentation transcript:

1 基礎プログラミング演習 第７回 繰り返し

2 今日の目標 繰り返しを使ったプログラムを書けるようになる while文（とfor文）を書けるようになる
繰り返しの繰り返し（繰り返しの入れ子）を使ったプログラムを書けるようになる

3 繰り返しを勉強する前に・・（１） 練習問題08-1をやってみましょう var x = 3; //変数xに３を代入する
x = x + 1; //変数xの値を1増やす x の値はどうなるか？

4 繰り返しを勉強する前に・・（２） デバッガを使う 練習問題08-2

5 繰り返しを勉強する前に・・（３） 変数を使ってHTMLの属性を変化させる 練習問題08-3（練習問題07-6の応用）

6 繰り返しを勉強する前に・・（４） 練習問題08-4
document.getElementById(‘biscuit’).innerHTML; は、id=‘biscuit’で指定された<ul>タグの要素、即ち、<li>ポケットを～</li>を取得する（１行目） それを、変数xに連結したものを変数xに代入（３行目）するので、xには<li>タグが２つ（<li>・・・</li><li>・・・</li>）代入される そいつを<ul>タグの要素（getElementById(‘biscuit’).innerHTML）に代入するので、HTMLファイルの<li>タグが結果として一つ増える（箇条書きが一つ増える）

7 繰り返し（１） 数を一つずつ増やしながらブラウザに出力するには？ <script type="text/javascript">
document.write("0 <br />"); document.write("1 <br />"); document.write("2 <br />"); document.write("3 <br />"); document.write("4 <br />"); document.write("5 <br />"); document.write("6 <br />"); document.write("7 <br />"); document.write("8 <br />"); document.write("9 <br />"); document.write("10 <br />"); </script>

8 繰り返し（２） 繰り返し文を使うと楽 コンピュータは繰り返しが得意 条件式が成り立つ間処理を繰り返す

9 繰り返し（３） 繰り返し文(while文)を使って書くと・・・ <script type="text/javascript">
var i = 0; //変数iの初期値を0にする while(i <= 10){ //iが10以下ならば、{}内を順番に実行 document.write(i + “<br />”);　//iの値と改行を連結して表示 i = i + 1; //iの値を1増やす } </script> ・変数名は何を使ってもよい。iの変わりにxと書いても同じ ・変数の初期値を必ず決めること ・条件式の書き方はif文と同じ ・i=i+1はiの値を1つ増やすという意味 ・条件が成立しなければ（偽ならば）while文のループから抜ける（{}内は実行しない）

10 繰り返し（４） いろいろな例（どのような実行結果になるか予想せよ） var i = 0; while(i < 100){
document.write(i + “<br/>”); i = i + 10; } var i = 0; while(i > 100){ document.write(i + “<br/>”); } while(i < 10){ var i = 100; while(i > 10){ document.write(i + “<br/>”); i = i – 5; }

11 繰り返し（５） for文（while文と等価、少し短く書ける） <script type="text/javascript">
for(var i=0 ; i<=10 ; i=i+1){ document.write(i + "<br />"); } </script> ・変数の初期化、条件式、変数の値の増加を()内にまとめて書ける。 ・while文とfor文両方とも書けるようになること

12 練習問題１ helloという文字列を50個表示するプログラムを作れ（while文、for文両方のバージョンを作ること）
上記のプログラムを修正して、０，２，４，８・・のように0から100までの偶数を表示するようにせよ。改行すること。 同様に100までの奇数を表示するようにせよ 同様に100までの3の倍数を表示するようにせよ(%を使う) １から１００までの数を表示しなさい。ただし３で割り切れる場合はFIZZを、５で割り切れる場合はBUZZを、両者で割り切れる場合はFIZZBUZZを、数字の代わりに表示するようにしなさい。改行すること。

13 練習問題１ 6. 一日目は100円、二日目は200円、三日目は400円・・・というように毎日前日の倍額を貯金するとする。この時、貯金総計が100万円を越える日を下記の実行結果のように表示させるプログラムを書け(ひんと：日と合計金額を記憶する変数をそれぞれ作り、初期値に注意すること）

14 繰り返しの入れ子（１） 右下のような出力結果を得たい document.write(“P”);を10回繰り返せば横一列を描ける
10回繰り返したら改行し、・・・ ・・・以上を10回繰り返す

15 繰り返しの入れ子（２） スタート 条件１ F T 条件２ F T 処理 終了

16 繰り返しの入れ子（３） while文やfor文は入れ子にすることができる
<script type="text/javascript"> var i = 0; while(i < 10){ var j = 0; while(j < 10){ document.write("P"); j = j + 1; } document.write("<br />"); i = i + 1; </script> ・外側のループが一周する度にjの値が0にリセットされている点に注意 実行結果

17 練習問題２ 先ほどのプログラムを改良して、以下のような模様を描くプログラムを作れ（ヒント：割り算の余りを求める%を使った条件分岐(if文)を使い、２で割り切れれば一方の模様を、割り切れなかったら他方の模様を表示する） 模様は適宜変えてよい（’や”等の特殊文字を使う場合は直前に\を付けてエスケープシーケンスすること）

18 innerHTML（１） 例えば、以下のような実行結果を得たい場合、document.write();ではうまくいかない
後から出力する内容を変えたい場合、innnerHTMLを用いる（詳細は教材参照）

19 innerHTML（２） <script type="text/javascript"> function sfc(){ //ボタンがクリックされたら実行される関数 var n = document.getElementById(‘form1’);//フォームと変数nをひもづける //<div>で確保した描画領域と変数ansをひもづける var ans = document.getElementById('answerArea'); var i = 0; //繰り返しのカウンタ用変数（初期値は0） while(i < n.value){ //iがフォームに入力された値未満の場合以下を繰り返す ans.innerHTML += “SFC <br />”; //描画領域に文字列とHTMLを代入 i = i + 1; //iの値を1増やす } </script> <form> <input type=“text” id=“form1”> //フォームの設置 <input type=“button” value=“OK” onclick=“sfc()”> //ボタンの設置 </form> <div id=“answerArea”></div> //描画領域を確保してidをつけておく

20 練習問題３ 繰り返しの入れ子とinnerHTMLを使って以下のような実行結果を得るプログラムを作れ

21 配列（１） 変数名は１つのまま、それに番号をつけて複数の値を記憶できるようにしたもの
変数が一軒家とすれば、アパート（ただし、部屋番号は0から始まる）

22 配列（２） 配列の生成方法 var name = [“佐藤”, “田中”, “鈴木”, “加藤”]; 配列の参照 var n = 3;
インデックスは0から始まるので注意 var n = 3; document.write(name[n]); 「加藤」と出力される 配列名　　　　要素

23 配列（３） for文と組み合わせることが多い
var array = ["佐藤", "鈴木", "田中", "渡辺", "伊藤", "山本"]; var i; for (i = 0; i < array.length; i++) {   document.write(i + “番目: ” + array[i] + “<br　/>"); } ＊配列名.lengthは配列の要素数を表す。この場合は、6