プログラミングをするメリットとして、
「人間が手作業でやると面倒な動作を一瞬で完了させられる
という点があると思います。
for文はそんなニーズに応えてくれます。
同じ処理を、こちらが指定した回数だけ繰り返してくれます。
そのfor文を使ったわかりやすい例を作りました。
<img src=”images/img**.jpg” alt=”写真” /> というxhtmlのタグを9回、自動で書き出してくれるコードです。
まぁ、簡単なフォトギャラリーでしょうか。
別に普通にHTMLを書いても同じことなんですが、仮に今後写真が一気に増えたときも、JS内の数字を１ヶ所変えて、決めたルールの通りに画像をリネームして指定フォルダに入れれば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('/>');
}
}
うん、これは大事そうな内容だ！！