ywork2020.com

Title

フォー制御文を使えば、プログラムコードを指定回数で繰り返し処理出来る

for制御文の概要

同じプログラムコードを指定回数繰り返す時に使用するプログラムの制御文です。
同じと言っても少しずつ変化を付けながら処理も出来るので利用頻度は高いです。

制御文のことをステートメントと言ったりしますのでforステートメントとも言われます。

実機サンプル

ここでは掛け算九九の計算をfor制御文を使い処理しています。
以下のボタンをクリックすると実機サンプルの結果を表示します。

ここにプログラムの実行結果が表示されます。

サンプルコード

for制御文の構文

for(変数宣言 = 初期値; 繰り返し条件; 変数増減処理){繰り返すコード処理の記述} 

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset = "utf-8">
		<title>JavaScript : for ステートメント</title>
		<style>
			table{
				width: 90%;
			}
			td{
				padding: 3px;
				text-align: right;
			}
			table,td{
				border: 1px;
				border-color:black;
				border-style:solid;
				border-collapse:collapse;
			}
		</style>
	</head>
	<body>
		<p>各ボタンで結果を表示します</p>
		<!-- #1 -->
		<p><input type="button" value="掛け算九九の処理結果のみ表示" onclick="onClick1()"></p>
		<!-- #2 -->
		<p><input type="button" value="掛け算九九にテーブル要素を追加して表示" onclick="onClick2()"></p>
		<p id="idAnswer">(ここに結果が表示されます。)</p><!-- #elm -->
		<script>
			document.open();
			let elmAnswer = document.getElementById("idAnswer");	//<!-- #elm -->
			/***********************************************************************/
			function onClick1(){	//<!-- #1 -->
				let strA = '';
				for(let numY = 1; numY<10; numY++){	//for(let numY = 1; numY<10; numY = numY + 1)でも良い
					for(let numX = 1; numX<10; numX++){
						strA = strA + (numY * numX);
					}
					strA = strA + '<br>';
				}
				elmAnswer.innerHTML = strA;
			}
			/***********************************************************************/
			function onClick2(){	//<!-- #2 -->
				let strA = '<table><tr>';
				for(let numY = 1; numY<10; numY++){	//for(let numY = 1; numY<10; numY = numY + 1)でも良い
					for(let numX = 1; numX<10; numX++){
						strA = strA + '<td>' + (numY * numX) + '</td>';
					}
					strA = strA + '</tr><tr>';
				}
				elmAnswer.innerHTML = strA + '</tr></table>';
			}
			/***********************************************************************/
			document.close();
		</script>
	</body>
</html>
CSSの当て方も参考になるかもしれませんのでサンプルコードに残します。

サンプルコードの要点

  1. for制御文は(入れ子)処理ができる
  2. 繰り返し回数が決まっている処理で利用する
  3. 要素なども連続で作成できるので要素のid属性の連番処理などにも使用できる