読者です 読者をやめる 読者になる 読者になる

ハロートレーニングWebデザインの勉強 Webデザイン フェリカテクニカルアカデミーWebサイト制作科

条件が成立している間処理を繰り返す - while文

while文

  • 反復処理(繰り返し)を行います
  • 同じ事を繰り返すことを「ループ」と呼びます
  • for文との違いは、ループのカウンタとして使用する制御変数の扱い
  • for文の場合は、制御変数の初期化や増減の式をforの直後の「( )」内に記述
  • while文の「( )」では、条件式のみを記述し、制御変数の初期化や増減は別に命令する

while(継続条件式) {
   繰り返す処理
}

  • 継続条件式には、if文と同様に結果が論理値となる式を記述します
  • 継続条件式の結果が、trueの間はブロック内の処理を繰り返し、falseになると繰り返しを終了します
  • 継続条件式は1回分の繰り返し処理の最初のタイミングで検証されます

  while(true) {
    繰り返す処理を繰り返す
  }

  while(false) {
   繰り返す処理を抜ける
  }

  • while文の「( )」では、条件式のみを記述し、制御変数の初期化や増減は別に命令する

変数の初期値;
while ( 繰り返し条件; ) {
  実行される処理
変数の変更 ;
}


《while文の利用》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>while文の利用</title>
<script>
  var a = 1;
  while (a <= 100) {
    a *= 2;
    console.log(a);
  }
  console.log('終了');
</script>
</head>
<body>
</body>
</html>


《実行結果》

  1. 変数awどんどん倍にしていき、100を超えたら繰り返しを終了する
  2. aが100を超えると、次の繰り返し処理へ進んだタイミングで継続条件式の結果がfalseと判定され、繰り返しを抜けます

和暦(平成)と西暦を並べて表示

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>for文の練習(3)</title>
</head>
<body>
<table>
<tr><th>和暦(平成)</th><th>西暦</th></tr>
<script>
var i;
for (i = 1; i <= 25; i = i +1) {
  document.write('<tr>');
  document.write('<td>', i, '</td>');
  document.write('<td>', i + 1988,  '</td>');
  document.write('</tr>');
}
</script>
</table>
</body>
</html>
  • for文との違いを比較する
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>while文の練習(1)</title>
</head>
<body>
<table>
<tr><th>和暦(平成)</th><th>西暦</th></tr>
<script>
var MAX = 25;
var i =1;
while(i <= MAX) {
  document.write('<tr>');
  document.write('<td>', i, '</td>');
  document.write('<td>', i + 1988,  '</td>');
  document.write('</tr>');
  i++;
}
</script>
</table>
</body>
</html>


入力した数字までの合計をダイアログで表示

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>繰り返し処理</title>
</head>
<body>
<h3>合計</h3>
<p>以下のボタンをクリックすると、<br>
入力した数字までの合計を求めて表示しす。</p>
<p><button onclick="total()">数字を入力する</button></p>
<script>
function total(){
  var ans = 0;
  var i = 1;
  var maxNum;
		
  maxNum = prompt('数字を入力してください。', '半角数字');
		
  while (i <= maxNum){
    ans = ans + i;
    i++;
  }

  alert('1~' + maxNum + 'の合計は' + ans+ 'です');
}
</script>
</body>
</html>

まとめ

  • for文だけでなく、while文でも処理を繰り返すことができる
  • while文では、制御変数の設定を個別に行う必要がある
  • ループの回数などは、変数で設定すほうがわかりやすくなる