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

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

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('/>');
		}
	}

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

コメントをどうぞ

メールアドレス (必須・公開されません)
コメント本文

  • スパム・迷惑コメント投稿防止のため、メールアドレスの入力が必須ですが、公開はされません。何卒ご協力のほどお願いいたします。
  • 投稿いただいたコメントは管理者のチェック後掲載しておりますので、即時には反映されません。
  • 記載内容に関する批判や間違いの指摘などはそのまま掲載する方針ですが、投稿内容と無関係な誹謗中傷、一方的な罵詈雑言の場合は削除させていただく可能性があります。
  • 通常業務の合間にコメントチェックをしておりますので、すべてのコメントへのお返事が出来ない場合もございます。あらかじめご了承ください。
  • 管理人個人への連絡等は、コメント欄ではなくコンタクトフォームをご利用ください。

書籍を執筆しました

WordPress 標準デザイン講座【Version 4.x対応】


翔泳社さんより、2015/02/27発売しました。2年経ちますのでもう賞味期限切れだとは思いますが、一応実績として...

寄付歓迎(・ω<)☆

当ブログの記事があなたの役に立ったら、気が向いたらでいいのでドネーションいただけると更新の励みになります!
気が向いた方はこちらから

ブログ内検索