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

for文

指定した回数だけ処理を繰り返す
変数「i」の初期値（「i」は、indexの意）
処理を１回実行するたびに、変数「i」の値をどのように変更するか

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

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

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

同じ文章を繰り返し表示

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>for文の練習（1）</title>
</head>
<body>
<script>
var i;
for (i = 0; i < 10; i++) {
	document.write('<p>JavaScript</p>');
}
</script>
</body>
</html>

※「for (i = 1; i <= 10; i++)」としても同じ

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

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>for文の練習（2）</title>
</head>
<body>
<p>年齢を選択してください。</p>
<form>
<select>
<script>
var i;
for (i=20; i<=70; i++) {
  document.write('<option value="' + i + '">' + i + '歳</option>');
}
</script>
</select>
</form>
</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>
var i;
for (i = 1; i <= 25; i++) {
	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>
<p><button onclick="total()">計算結果</button></p>
<script>
function total(){
  var ans = 0;
  for (i=2 ; i<=100 ; i=i+2){
    ans = ans + i;
  }
  alert('2、4、6、8、…、100の合計は' + ans+ 'です');
}
</script>
</body>
</html>

3の倍数を強調表示

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>3の倍数を強調表示</title>
<style>
<!--
#mulOfThree {
	font-size: 250%;
	color:red;
}
-->
</style>
</head>
<body>
<h1>3の倍数を強調表示</h1>
<p>
<script>
var Max = 15;	
for (var i = 1; i <= Max; i++) {	
	if ( (i % 3) == 0) {
		document.write('<span id="mulOfThree">', i, '</span>' , '&nbsp;');
	} else {
		document.write(i + '&nbsp;');
	}
}
</script>
</p>
</body>
</html>

《演習問題 1》

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

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

《演習問題 2》

for文のネスト

以下のような九九の対数表を表示させなさい。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>繰り返し処理</title>
<style>
table {
     border-collapse: collapse;
}
td,th {
     width: 50px;
     text-align: center;
}
th {
     background-color: #CCC;
}
</style>
</head>
<body>
<h3>九九表</h3>
<table width="500" border="1">
<tr>
<th>&nbsp;</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th><th>9</th>
</tr>
<script>
for (i=1 ; i<=9 ; i++) {
     document.write('<tr>');
     document.write('<th>', i , '</th>');

     for (j=1 ; j<=9 ; j++) {
          document.write('<td>', i*j , '</td>');
     }

     document.write('</tr>');
}
</script>
</table>
</body>
</html>

出力のポイント

document.write('引数１', 変数 , '引数２'); というふうに「カンマ区切り」で記述します（並べる）
alert('引数１' + 変数 + '引数２'); というふうに「+」でつないで記述します（文字列の演算）

まとめ

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