Webデザイナーを目指す人のブログ

Webサイト作成時に勉強したことの備忘録

JavaScript サイト構築

【Javascript】ループ処理

投稿日:

                                                                                                                                 

while文

今日は繰り返し処理(ループ)について調べたことをまとめていきます。
最初はwhile文についてです。
ある条件が真である間は処理を続けるという命令になります。

<script>
var i = 0; // iは0だよ。
while (i < 10) { // iが10未満のときはこの処理を繰り返してね。
	console.log(i); // iの値をコンソールに書き出すよ。
	i++; // iを1ずつ足していこう!
}
</script>

そうすると1〜9までの値が書き出されます。

do while文

while文に似ているdo while文です。

<script>
var i = 0; // iは0だよ。
do { // ループ処理スタート!
	console.log(i); // iの値をコンソールに書き出すよ。
	i++; // iを1ずつ足していこう!
} while (i < 10); // iが10未満のときはこの処理を繰り返すよ。
</script>

while文とどう違うかというとdo while文では条件が最後に来ています。
i = 0;
の場合はwhile文と結果が一致しますが、
i = 20;
のように10以上が指定されていた場合、
while文では何も書き出されないのに対し、do while文では0が書き出されます。

while文は最初から全てを指定してくれているのでその通りに作業をすすめる感じ。
do while文は作業を始めたあとに、「そういえばこういう条件下でやってね。え?もう始めちゃってるの?じゃあいいよ。今やってる部分はそのままにして残りはこの条件下でやってね。」って言われる感じ。

for文

さきほど書いたコードをfor文で表すこともできます。

<script>
	for (var i = 0; i < 10; i++) {
		console.log(i);
	}
</script>

さっきより簡潔に書くことができますね。

ループを抜ける処理

ループを抜けたいときはbreakもしくはcontinueを使います。

breakを使うときはループ処理を抜けたい時
continueを使うときはループ処理を1回スキップする時

<script>
	for (var i = 0; i < 10; i++) {
		if (i === 5) {
			break;
		}
		console.log(i);
	}
</script>

iが5の時にループを抜ける

<script>
	for (var i = 0; i < 10; i++) {
		if (i === 5) {
			continue;
		}
		console.log(i);
	}
</script>

iが5の時はスキップする。
つまり1,2,3,4,6,7,8,9と書き出されます。

きっと使えると便利そうなスキップ。
使う場面と出会ってみたいです。

今日はここまでです。
また明日!

-JavaScript, サイト構築

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

CSS基礎編 vol.3

今日はCSS3が採用されたことによって使えるようになったプロパティについて書いていきます。 rem 先日もremについて書きましたが、腑に落ちない部分があったので再度調べてみました。 そもそもどこが腑 …

no image

a要素の中にブロック要素

今日結構衝撃的なことを知りました。 それは a要素の中にdivやpなどのブロック要素を入れても良いということ。 今日までは a要素はインライン要素で divはブロック要素だから 塊全体にリンクを貼りた …

Retinaディスプレイと対策

こんにちは! 今日はRetinaディスプレイについて書いていきたいと思います。 Retinaディスプレイって何者なの?? Retinaディスプレイについて考えるとき、解像度の話が必ず出てきます。 ・解 …

no image

【Javascript】変数や条件分岐について

変数とは 変数とはデータにつけるラベルのことです。 ラベル名は自分で決めることができます。 たとえば「こんちには!」は”x”というラベルにするときは var x; x = &q …

no image

WordPress オリジナルテーマを作る〜ヘッダー〜

今回から実際にサイトをつくっていこうと思います。 サイトのデザインがないので、今このブログを表示しているSTINGER8と同じデザインになるように作っていきたいと思います。 headerを作る 今回か …