Webデザインの勉強と製作 | あかとんぼ

フェリカテクニカルアカデミーの学習をベースに、Webについての勉強と製作の過程をまとめています。

[JavaScript]⑤繰り返し文/while文、for文

JavaScript
  • while文
  • for文
  • 配列をカウント
  • for-in文
  • 例題：３の倍数でahoと表示するプログラム

while文

  • while文は反復処理（ループ）をおこなう
  • 繰り返し回数が決まっていない時に用いられることが多い
  • 継続条件式がtrueのとき継続、falseのとき処理を抜ける
例題：1*2繰り返し、100以内までコンソールに表示
var i = 1;
while( i <= 100){
     console.log(i);
     i *= 2;
}
</script>

for文

  1. 指定した回数だけ処理を繰り返す
  2. 変数i(iはindexの略、慣習名)の初期値
  3. 処理を1回実行するたびに、変数iの値を変更
  4. 実行文のなかにbreakがあれば処理を中断、ループを抜ける
  5. 実行文のなかにcontinueがあれば処理を中断、ループに戻る
　for(変数の初期値; 繰り返し条件; 変数の変更){
　　実行分
   }
例題：1から１０まで繰り返しコンソールに表示するプログラム、しかし偶数の場合はループに戻り、7で割り切れた時繰り返しから離脱
for( var i=1; i<=10; i++){
  if( i%7 == 0){
    break;
  }else if(i%2 == 0){
    continue;
  }
  console.log(i);
}
</script>

配列をカウント

例題：配列に順に格納した文字列りんご、みかん、バナナを逆から表示する
var fruits = ['りんご','みかん','バナナ'];
for( var i=(fruits.length-1); i>=0; i-- ){
  console.log(fruits[i]);
}
</script>

連想配列をカウント

  • for (var 変数名　in 連想配列名){ 連想配列名[変数名]で各要素を参照 }
  • 各要素を参照するごとに連想配列のキーのうちいずれかひとつが代入され
  • キーが取得される順番は保証されない
    例題：連想配列（user=forname山田、age25、height170）を一覧表示
var user = {
  name: '山田',
  age: 25,
  height: 170
}
for( var key in user){
  console.log(user[key]);
}
</script>

例題：3の倍数でahoとテーブルに表示するプログラム

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>aho</title>
<style>
table {
     margin: 0 auto;
     width: 200px;
     border-collapse:collapse;
}
table, th, td{
  border: 1px solid #333;
  text-align: center;
}
th{
  background-color: #ccc;
}
</style>
</head>
<body>
<table>
<th>count</th><th>!aho</th>
<script>
for( var i=1; i<=100; i++){
  if( i%3 == 0){
  document.write('<tr><th>'+i+'</th><td>aho</td></tr>');
  }else{
  document.write('<tr><th>'+i+'</th><td>-</td></tr>');
  }
}
</script>
</table>
</body>
</html>

d.hatena.ne.jp