指定した回数だけ処理を繰り返す - for文

反復

処理を繰り返す

for文

繰り返し文
英語で輪を意味する「loop（ループ）」とも呼ばれます
指定した回数だけ処理を繰り返す（回数が決まった繰り返し）
変数「i」の初期値（「i」は、indexの意）
処理を１回実行するたびに、変数「i」の値をどのように変更するか

変数の値を１ずつ増やす演算子

「++」
「i++」は、「i = i + 1;」と同じ

《for文の利用》

カウンタ変数名は「i」（indexの意）とすることが慣例です

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>for文の利用</title>
<script>
for (let i = 1 ; i <= 5 ; i++) {
  console.log( i + '回目' );
}
</script>
</head>
<body>
</body>
</html>

《実行結果》

変数 i に１が代入される（初期化式）
i が５以下かどうか検証される（継続条件式）
i の値がコンソールに表示される
i に１加算される（増減式）
継続条件式の結果がfalseになるまで（2～4）を繰り返す

年齢の選択肢をドロップダウンに表示

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>for文の練習（2）</title>
</head>
<body>
<p>年齢を選択してください。</p>
<select>
<script>
for (let i=20; i<=70; i++) {
	document.write('<option value=" i ">' + i + '歳</option>');
}
</script>
</select>
</body>
</html>

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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>for文の練習（3）</title>
</head>
<body>
<table>
<tr><th>和暦（平成）</th><th>西暦</th></tr>
<script>
for (let i = 1; i <= 25; i = i +1) {
  document.write('<tr><td>' + i + '</td>');
  document.write('<td>' + (i + 1988) + '</td></tr>');
}
</script>
</table>
</body>
</html>

2の倍数を合計してダイアログで表示

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>繰り返し処理</title>
</head>
<body>
<h3>偶数の合計</h3>
<p>以下のボタンをクリックすると、<br>
2、4、6、8、…、100を全て合計した結果を表示できます。</p>
<button onclick="total()">計算結果</button>
<script>
function total() {
  const ans = 0;
  for (let i=2 ; i<=100 ; i+=2) {
    ans += i;
  }
  alert('2、4、6、8、…、100の合計は、' + ans+ 'です');
}
</script>
</body>
</html>

演習問題

1～100までの合計をダイアログボックスに表示させなさい

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>繰り返し処理</title>
</head>
<body>
<h3>合計</h3>
<p>以下のボタンをクリックすると、<br>
1～100を全て合計した結果を表示できます。
</p>
<button onclick="total()">計算結果</button>
<script>
function total(){
  const ans = 0;
  for (let i=1 ; i<=100 ; i++){
    ans += i;
  }
  alert('1~100の合計は、' + ans+ 'です');
}
</script>
</body>
</html>

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

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

for文の応用例

カウントダウン

for (let i = 5 ; i >= 1 ; i--) { }

まとめ

処理を繰り返すには、for文を使用する
制御変数は、ループのカウンタとして使用する変数
変数の値を１増やすのは「++」演算子、１減らすのは「--」演算子

例題（数字の合計を求めて表示）

DOMの操作でブラウザ上に表示
1以下の数字の時と全角が入力されたときには、「計算できません」と表示

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>for文を繰り返し</title>
</head>
<body>
<h1>数字の合計を求めるプログラム</h1>
<p>ボタンを押して数字を入力してください。</p>
<p><button onclick="result()">合計を求める</button></p>
<h2 id="ans">ここに結果を表示</h2>
<script>
function result() {
  let maxNum = prompt('1以上の整数を半角数字で入力してください。');
  maxNum = parseInt(maxNum);
  let total = 0;
  const element = document.getElementById('ans');
  
  if (maxNum < 1 || isNaN(maxNum)) {
    element.textContent = '計算できません。';
  } else {
    for (let i=1; i<=maxNum; i++) {
      total = total + i;
    }
    element.textContent = '0に入力された数字「' +maxNum+ '」までを1から加算した合計は「' +total+ '」です。'
  }
}
</script>
</body>
</html>