20200729 while文 ブロック内分岐 for文 配列との組み合わせ 「無限処理の恐怖」
〇while文
while（条件式）{
条件式がtrueの時に処理する内容
}
var num;//繰り返し回数の管理
var star;//３回目で使用する☆を管理
console.log('１回目の出力');
num = 0;
while (num < 10) {
console.log(num);
num++;
}
console.log('２回目の出力');
num = 0;
while (num < 3) {
console.log('★');
num++;
}
console.log('３回目の出力');
star = '';//←初期値として空文字を入れる必要がある。型変換
num = 0;//カウント変数
while (num < 3) {//繰り返し条件
//条件true時の繰り返し対象処理
star += '★';
num++;//カウント変数のカウントアップ
//カウントアップを忘れると無限ループになる。
}
console.log(star);
document.getElementById('display1').innerHTML = star;
〇while文 ブロック内で分岐処理
var num;
var message;
var star;
console.log('１回目の出力');
num = 0;//カウント変数初期化
//↓カウント変数を使った繰り返し条件
while (num < 30) {//３０回繰り返される
if (num % 5 == 0) {
console.log(num);
}
num++;//カウント変数をカウントアップさせる
}
console.log('while文終了後：' + num);
console.log('２回目の出力');
message = '';
num = 0;
while (num < 30) {
if (num % 5 == 0) {
message += num + '<br>\n';
//のちにブラウザで表示する文字列を変数messageに連結代入
// \n＝<br> コンソール上に表示する際に見やすくするために使う
}
num++;
}
console.log('while文終了後：' + num);
console.log(message);
document.getElementById('display1').innerHTML = message;
//問題 ★☆・・・交互に表示されるようにプログラムを組むこと。
console.log('★☆交互表示');
star = '';
num = 0;
while (num < 7) {
if (num % 2 == 0) {
star += '★';
} else {
star += '☆';
}
num++;
}
console.log('while文終了後：' + num);
console.log(star);
document.getElementById('display2').innerHTML = star;
//問題 ★☆・・・別解
console.log('★☆交互表示');
star = '';
num = 0;
while (num < 7) {
if (num % 2) {
//余り算の結果は1もしくは0
//1だった時→true
//0だった時→false
star += '☆';//trueだった時
} else {
star += '★';//falseだった時
}
num++;
}
/追加問題
//☆〇◇を表示させること
console.log('☆〇◇を表示');
star = '';
num = 0;
while (num < 7) {
if (num % 3 == 0) {
star += '☆';
} else if (num % 3 == 1) {
star += '〇';
} else {
star += '◇';
}
num++;
}
console.log('while文終了後：' + num);
console.log(star);
document.getElementById('display2').innerHTML = star;
〇ここから無限処理の恐怖を味わう
〇for文
for・・カウント変数の初期化式；カウント変数の条件式；カウント変数の増減式（操作とも呼ばれる）
{
条件式true時の繰り返し対象処理
}
この式は指定された回数繰り返し処理を実行させるときに使用するもの。
--- 例題-- -
var star;//３回目で使用するためのもの
console.log('１回目の出力');
var num = 0;//カウント変数を初期化（初期化式）
while (num < 3) {//（条件式）
console.log(num);
num++;//←これがないと無限に繰り返してしまうので要注意。カウント変数を増やす（増減式）
}
//while文は条件に処理に使用するデータがあるか確認するプログラムを記述
//データがある場合に処理をしてデータがなくなったら繰返し処理をやめるような時に使用する。
console.log('２回目の出力');
for (var i = 0; i < 3; i++) {
//初期化式;+条件式;+増減式;
console.log(i);
}//for文は↑この形を覚えておくこと！！
//カウント変数に関する処理をすべて（）内に記述することができる。
//for文はカウント変数を使って数をかぞえながら処理することに向いている。
console.log('３回目の出力');
star = '';
for (var i = 0; i < 3; i++) {
star += '★';
}
console.log(star);
document.getElementById('display1').innerHTML = star;
//※「i」はカウント変数として使うことが多いようだ。
//追加問題 0-5回表示させろ
console.log('５回表示させろ');
for (var i = 0; i <= 5; i++) {
console.log(i);
}
//追加問題2 5-0表示させろ
console.log('5-0表示させろ');
for (var i = 5; i >= 0 < 5; i--) {
console.log(i);
}
//追加問題3 0-10の間で偶数のみ表示させろ
console.log('0-10の間で偶数のみ表示させろろ');
for (var i = 0; i < 11; i += 2) {
console.log(i);
}
〇for文と配列
for文と配列は相性がよく、下記の例題ように活用できる。
--- 例題-- -
var itemList = [
'いちご',//0
'みかん',//1
'りんご',//2
];
console.log('１回目の出力');
for (var i = 0; i < itemList.length; i++) {
//配列lengthプロパティを条件に使用することで部屋数分繰り返し処理させる。
console.log(itemList[i]);
}
console.log('２回目の出力');
//ブラウザでリストで表示させる方法
var code = '<ul>\n';
for (var i = 0; i < itemList.length; i++) {
code += '<li>' + itemList[i] + '</li>\n';
}
code += '</ul>\n';
console.log(code);
document.getElementById('display1').innerHTML = code;
//JSファイルで書き込んだul liタグがHTMLではリスト表記として
//読み込まれる
