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

while文

for文との違いは、ループのカウンタとして使用する制御変数の扱い
for文の場合は、制御変数の初期化や増減の式をforの直後の「( )」内に記述
while文の「( )」では、条件式のみを記述し、制御変数の初期化や増減は別に命令する

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

和暦（平成）と西暦を並べて表示

<!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文では、制御変数の設定を個別に行う必要がある
ループの回数などは、変数で設定すほうがわかりやすくなる