webページのつくり方 | 学びの道

webページのつくり方、web制作、web作成、学びの道を歩み中!フェリカテクニカルアカデミー「東京・池袋」にてWeb作成を勉強中です。学んだ事をメモしていきます。

JavaScript while 反復処理(繰り返し)を行います

本日は、JavaScript while 反復処理(繰り返し)について勉強してまいりました。

【while文】

  1. while文は、()によって指定されている条件が真の間中括弧内{ }で囲まれた処理ブロックが繰り返し実行される。                      注意!)つまり、真(true)で有り続ける繰り返し条件を記述してしまった場合、無限ループとなり、最悪メモリーを使い果たしてPCがダウンする可能性有り。
  2. while文は、for文と違い、条件を( )中に全て書くわけでは無い。

  3. 繰り返しの条件を微妙に変えられるので、for文と違い、変数は自分で決める事が出来る。(for文はⅰのみを使用。)

 

    変数の初期値;

     while(繰り返し条件;){

       実行される処理

     変数の変更

     }

                                      

例題1】下記のように表示させなさい。(3月26日のfor文の例題3と同じ結果です。)

f:id:kaoru01-05:20140402150920g:plain

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>while文の練習</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>

 

上記赤字は、下記①もしくは②でもOK

①document.write('<tr><td>' + i + '</td>'); 

 document.write('<td>' +(i + 1988)+'</tr></td>');

 

②document.write('<tr><td>' + i + '</td>'+'<td>' +( i + 1988) +'</tr></td>');

 

                                     

例題2】下記のように表示させなさい。

f:id:kaoru01-05:20140403034628g:plain

 

<!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;
       
  maxNum = prompt('数字を入力してください。', '半角数字');
       
  while (i <= maxNum){
    ans = ans + i;
    i++;
  }

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