JavaScript　１０日目

/*
◆while文の基本形◆
while文（繰返し条件）{
  繰返し対象処理
}

データがあるかないか確認しながら
繰返し処理することに向いている
while文（データがあるか判定）{
  繰り返し対象処理
}

◆for文◆
for (初期化式; 繰返し条件; 増減式) {
  繰返し対象処理
}

～ 基本形 ～
for (var i = 0; i < 繰返し回数; i++) {
  繰返し対象処理
}

・カウント変数を使って数を数えながらの
繰返し処理に向いている
・カウント変数は主に「i」「j」「k」・・・が使われる
*/

console.log('２回目の出力');
for (var i = 0; i < 3; i++) {
  console.log(i);
}

// 問題
// ★を5個出力する
// 「★」と「☆」を交互に表示する
// ※for文とif文を使う
console.log('解答：星出力');
for (var i = 0; i < 5; i++) {
  if (i % 2) {
    console.log('☆');
  } else {
    console.log('★');
  }
}

console.log('おもしろ別解答');
for (var i = 0; i < 5; i++) {
  if (i < 5) {
    console.log(i % 2 ? '☆' : '★');
  }
}
// コレでも出力されるけど・・・
// 条件「i < 5」が二重だからムダ？？

// 【改善版】：if取る（問題文は「if文を使う」だけどネ）
for (var i = 0; i < 5; i++) {
  console.log(i % 2 ? '☆' : '★');
}

console.log('３回目の出力');
// 表示する内容を貯めておく変数
// 文字列連結代入で追記していくので
// 空文字を最初に代入
star = '';
for (var i = 0; i < 3; i++) {
  star += '★';
}
console.log(star);
document.getElementById('display1').innerHTML = star;

console.log('３回目の出力');
// 問題：☆★☆★☆★☆
// ☆から交互に★  7回表示
// 【if文】
star = '';
for (var i = 0; i < 7; i++) {
  if (i % 2) {
    star += '★';
  } else {
    star += '☆';
  };
}

// 【三項演算子】
star = '';
for (var i = 0; i < 7; i++) {
  star += (i % 2 ? '★' : '☆')
}

console.log(star);
document.getElementById('display1').innerHTML = star;

var itemList = [
  'いちご', // 部屋番号[0]
  'みかん', // 部屋番号[1]
  'りんご', // 部屋番号[2]
];  // 部屋番号 = カウント変数「i」 ⇒ itemList[i]
// 1.配列の部屋数分、繰返し処理をする
//   繰返し条件に「itemList.length」= 部屋数(3)
// 2.繰返し対象処理内で配列の値を１つずつ使用して処理する

console.log('１回目の出力');
for (var i = 0; i < itemList.length; i++) {
  console.log(itemList[i]);
}

/*
◆配列と組み合わせるfor文の基本形◆
for (var i = 0; i < 配列.length; i++) {
  配列内の値を利用する際は
  配列[i]を使って処理する
}
*/

// ◆画面の表示を変更する場合は
//  1.変更したい文字列を貯めていく
//  2.画面内の特定の場所に出力する

console.log('２回目の出力');
var code = '<ul>\n';    // コード管理変数
for (var i = 0; i < itemList.length; i++) {
  code += '<li>' + itemList[i] + '</li>\n';
}
code += '</ul>\n';
/*
<ul> ← 繰返さない
▼for文内の処理はココから▼
  <li>いちご</li> ← 繰返し
  <li>みかん</li> ← 繰返し
  <li>りんご</li> ← 繰返し
▲ココまで▲
</ul> ← 繰返さない
*/

// 「\n」は改行コード
// 確認時にコードを見やすくする

console.log(code);  // 確認用
document.getElementById('display1').innerHTML = code;

console.log('問題２：SMAP');
var member = [
  '中居',
  '草彅',
  '香取',
  '稲垣',
  '木村',
];
var leader = member[0];  // リーダーが変わったらココを変える
// var leader = '中居';　　←名前でもOK

smap = '<ol>\n';
for (var i = 0; i < member.length; i++) {
  if (member[i] === leader) {
    smap += '<li>★' + member[i] + 'くん</li>\n';
  } else {
    smap += '<li>' + member[i] + 'くん</li>\n';
  }
}
smap += '</ol>\n';

console.log(smap);
document.getElementById('display2').innerHTML = smap;

var code;

console.log('１回目の出力');
code = '';
for (var i = 0; i < 3; i++) {  // 3回繰返す
  code += '★★★';  // 繰返し処理にできる
  code += '<br>\n';
}
console.log(code);
document.getElementById('display1').innerHTML = code;

console.log('２回目の出力');
code = '';
for (var j = 0; j < 3; j++) {　// 3回繰返す
  code += '★';
}
console.log(code);
document.getElementById('display2').innerHTML = code;

console.log('３回目の出力');  // 2回目の出力を3回繰返す
code = '';
for (var i = 0; i < 3; i++) {　// 3回繰返す
  for (var j = 0; j < 3; j++) {  // 3回繰返す
    code += '★';
  }
  code += '<br>\n';
}
// for文を入れ子にするときのカウント変数は
// 基本的に、外側のforと内側のforで別の変数を使う

console.log(code);
document.getElementById('display3').innerHTML = code;

【if文】
code = '';
// 行担当カウント変数mで3回繰返す
for (var m = 0; m < 3; m++) {
  // 列担当カウント変数nで4回繰返す 
  for (var n = 0; n < 4; n++) { 
    // 偶数列判定
    if (n % 2) {
      // 偶数列は'★'
      code += '★';
    } else {
      // 偶数じゃない(奇数)列は'☆'
      code += '☆';
    }
  }
  code += '<br>\n';
}

console.log('追加問題');
code = '';
for (var m = 0; m < 3; m++) {
  for (var n = 0; n < 4; n++) {
    if (m % 2) {
      n % 2 ? code += '★' : code += '☆';
    } else {
      n % 2 ? code += '☆' : code += '★';
    }
  }
  code += '<br>\n';
}

console.log(code);
document.getElementById('display6').innerHTML = code;