クロピグログ

職業訓練で学んだことまとめ

【JavaScript授業七日目】while文・do while文、for文

重要なやつまとめ(忘れた時用)

元のデータ型 元の値 真偽値型変換

数値型

0 FALSE
数値型 NaN FALSE
数値型 10 TRUE
文字列型 ”(空文字) FALSE
文字列型 ”0” TRUE
文字列型 ”あいう” TRUE
未定義型 undefined FALSE
Null型 null FALSE

 

while文・do while文

●while(ホワイル)

while(条件式){

 条件式がtrueの時に処理する内容

}

f:id:chromiumpig:20200729113104p:plain 

var num;//繰り返し回数を管理
var star;//★を管理
 
star = '';
↑後々文字列を連結代入する場合は
空文字やなにかの文字を初期値として入れておく
入れ忘れると「undefined」が先頭に表示される
num = 0;//カウント変数(配列スタートと同じ)
while (num < 3) {
  star += '★';//star = star + '★';
  num++;//カウント変数のカウントアップ(これないと無限ループ)
}

 

クロスサイトスクリプティング

無限ループを悪用したりすること。詳細は下記

https://cybersecurity-jp.com/security-measures/18427

 

var num;//カウント変数
 
num = 0;//カウント変数初期値
//↓カウント変数を使った繰返し条件
while (num < 30) {//30回繰返される (0~29)
  if (num % 5 == 0) {//今回だと0.5.10.15.20.25が引っかかる
    console.log(num);
  }
  num++;
}
console.log('while文終了後:' + num);

これをフローチャートにすると...

f:id:chromiumpig:20200729113143p:plain

message += '<strong>' + num + '</strong><br>\n';

・後でブラウザに表示する文字列を変数messageに連結代入

・ブラウザ上<br>タブで改行され、<strong>タグで太字になる

・コンソール上は\nで改行される

・\nの改行や\tのタブ記号はブラウザに表示されない

 

●ループ2つ

star = '';
num = 0;
while (num < 7) {
  if (num % 2) {
    star += '☆';
  } else {
    star += '★';
  }
  num++;
}
console.log('while文終了後:' + num);
console.log(star);
document.getElementById('display2').innerHTML = star;

三項演算子ver

console.log('問題10-3別解');
star = '';
num = 0;
while (num < 10) {
  (num % 2) ? (star += '☆') : (star += '★');
  // star += (num % 2) ? ("☆") : ("★");
//こっちのほうが短く記述できるけど、上のほうがわかりやすい?
  num++;
}
console.log('while文終了後:' + num);
console.log(star);
document.getElementById('display3').innerHTML = star;

 

●ループ3つ

console.log('追加問題');
star = '';
num = 0;
while (num < 15) {
  if (num % 3 == 0) {
    star += '☆';
  } else if (num % 3 == 1) {
    star += '〇';
  } else {
    star += '◇';
  }
  num++;
}
console.log('while文終了後:' + num);
console.log(star);
document.getElementById('display4').innerHTML = star;

●配列ver

star = '';
starList = [
  "☆",//0
  "〇",//1
  "◇",//2
]
num = 0;
while (num < 15) {
  star += starList[num % starList.length] ←配列の数で割る
  num++;
}
console.log('while文終了後:' + num);
console.log(star);
document.getElementById('display5').innerHTML = star;

 

・今回はわかりすいようにカウントで確認した

・本来、while文は条件にの処理に使用するデータがあるか確認するプログラミングを記述する

・データがある場合に処理をしてデータがなくなったら繰り返し処理をやめるようなときに使う

for文

for ( カウント変数の初期化 ; カウント変数の条件式 ; カウント変数の増減式(操作) )  {

  条件式true時の繰り返し対象処理

}

 

while文ver
var num = 0;//カウント変数を初期化
while (num < 3) {//条件式
  console.log(num);
  num++;//カウント変数を増やす
}

for文ver
for (var i = 0i < 3i++) {←この一行でカウント変数に関する処理を
  console.log(i);       すべて()内に記述可能
}

・for文はカウント変数を使って数をかぞえながら処理することに向いている

 

※カウント変数「i」はプログラミング言語FORTRANで使用されていた整数型変数「i」~「n」の1文字変数名が由来(I-Ntegerからきているという説あり)

 

・カウント変数は「i」は「index(順番・添え字)」や「integer(整数)」で覚えておくとわかりやすい

 

 ●配列と相性がいいfor文

var itemList = [
  'いちご',←0
  'みかん',←1
  'りんご',←2
];
 
for (var i = 0i < itemList.lengthi++) {
 配列のlengthプロパティを条件に
 使用することで部屋数分繰り返し処理させる
  console.log(itemList[i]);
}