繰り返し同じ処理をさせるには ~for文

2010年10月9日

プログラミングをするメリットとして、
「人間が手作業でやると面倒な動作を一瞬で完了させられる
という点があると思います。

for文はそんなニーズに応えてくれます。
同じ処理を、こちらが指定した回数だけ繰り返してくれます。

そのfor文を使ったわかりやすい例を作りました。
<img src=”images/img**.jpg” alt=”写真” /> というxhtmlのタグを9回、自動で書き出してくれるコードです。

まぁ、簡単なフォトギャラリーでしょうか。
別に普通にHTMLを書いても同じことなんですが、仮に今後写真が一気に増えたときも、JS内の数字を1ヶ所変えて、決めたルールの通りに画像をリネームして指定フォルダに入れればHTML側をいじることなく写真を増やすことが出来ます。

事前準備として・・・

1.’images’というフォルダの中に、ギャラリーで使いたい写真を入れておく。
2.写真のファイル名は、あらかじめ’img1.jpg,img2.jpg,….img9.jpg’というように通し番号付きの名前にしておく
3.あとは、写真の枚数に合わせてJavaScript内の変数を書き換える!

9枚の写真を並べる簡単な即席フォトギャラリー


	var  filename; // ファイル名を出力するための変数
	var loopCount = 9; // ループする回数※画像の数が変わったときはここの数字を変える!
	for (var i=1; i<=loopCount; i++) {
		filename = 'img' + i + '.jpg'; //画像ファイル名を変数filenameに代入
		document.write('<img src="images/', filename, '" alt="写真" />');
	}

注意としては、3行目で、i<=loopCount っていう式を書いてる点で、つまりループが9回目以下の場合に処理が実行されるということです。

自分はここを最初、i<loopCount って書いたので(つまりループが9回目未満の場合に処理が実行される)、写真が8枚しか出力されなくて、一瞬「おやおや?」って思っちゃいました。
「以下/未満」はプログラム以前の、基本中の基本の部分でしたね。うっかり。

document.writeなどで書き出すHTMLタグの中に” “(ダブルクオーテーション)が含まれる場合は、JavaScriptの記述自体では’ ‘(シングルクオーテーション)を使うなど、ごっちゃにならないように使い分けが必要です。
上記コード内では、文字列内のクオーテーションでは” “を、外側は’ ‘を使っています。

上はすごくシンプルなループ文ですが、いろいろな処理に応用できそうな感じがします。

※おまけif文と組み合わせて、3枚ごとに写真の周りの枠の色が変わるようにしました。
CSS側に、.mThreeというクラス名でborder-colorの指定をしてます。


	var	filename; // ファイル名を出力するための変数
	var loopCount = 10; // ループする回数(画像の枚数+1) ※画像の数が変わったときはここの数字を変える!
	for (var i=1; i<loopCount; i++) {
		filename = 'img' + i + '.jpg'; //画像ファイル名を変数filenameに代入
		document.write('<img src="images/', filename, '" alt="写真" ');

		if ((i%3)==0) { // 条件判定:iが3の倍数の場合
			document.write('class="mThree" />');
		} else {
			document.write('/>');
		}
	}

うん、これは大事そうな内容だ!!