【プログラミング入門】【JavaScript】11日目 繰り返し「while」命令

ホームページにアニメーションなどの動きをつける時に使われるJavaScript(ジャバスクリプト)というプログラミング言語を使って初心者・入門者向けにプログラミングのキホンを解説していきます！

難しい設定などはほとんどなく手軽に本格的なプログラミングを学ぶ事ができます。

簡単なホームページの作り方も解説しますのでホームページ作りに興味がある方もぜひご覧ください。

今回はもう一つの繰り返し命令「while(フォワイル)」についてみていきましょう！

■11日目　プログラム１■

<script>

	/*jspgm11_1*/
	/*11日目　プログラム１*/

	var suji = 0;

	while(suji < 5){
		document.write("おはよう！<br>");

		suji++;
	}

</script>

■実行結果■

■説明■

前回と同じ「おはよう」を５回表示するプログラムになります！

「while」命令の場合は

while(suji < 5)

と最初に条件を決めるだけで「for」命令の時にあった「初期化」と「進み方」は別の場所に書くという違いがあります。

でも書き方が違うだけでやってる事は一緒な気がしますよね！

気がしますが！「while」命令をあなどってはいけません。何気に良く使われます。というか「for」命令より使われている感じがしない事もないです。

そんなワケでよく見かける「while」命令のカタチを見てみましょう！

■11日目　プログラム２■

<script>

	/*jspgm11_2*/
	/*11日目　プログラム２*/

	var suji = 0;

	while(true){
		if(suji == 100){
			alert("suji = " + suji + "\n変数sujiが100になりました！");
		}

		if(suji == 200)break;
		suji++;
	}

	alert("suji = " + suji + "\n変数sujiが200になったので終了します！");

</script>

■実行結果■

■説明■

while(true)

これはよく見かけます。「if」命令の時に学んだ条件が「true」・・・合っている状態です。なのでずっと繰り返す無限ループになります。

ここで登場するのが「switch」命令の時に見かけた

break;

「break」命令です！{}カッコを抜ける命令ですね！

そうです。これを書くと一番近い繰り返しループから途中で脱出できるのです！

「while(true)」で無限ループ→条件が達成された時に「break」命令で脱出というやり方ですね！

「while」命令だけではなく「for」命令でも同じように途中で繰り返しを脱出できます。

■11日目　プログラム３■

<script>

	/*jspgm11_3*/
	/*11日目　プログラム３*/

	var password;

	while(true){
		
		password = prompt("パスワードを入力してね！\n(aiueoと入力するまで繰り返されます)");

		if(password == "aiueo")break;
		else{
			alert("パスワードが間違っています！\n入力をやりなおしてください！");
			continue;
		}

	}

	alert("パスワードを受付ました！");

</script>

■実行結果■

■説明■

さきほどと同じく条件が達成されるまでの無限ループ系ですね！

パスワードを入力してもらってパスワードが合うまで無限ループします。

continue;

この「continue」命令は繰り返し命令の最初に戻る命令になります。

もし「continue」命令のあとのループ内に何か命令があった場合は「continue」命令が実行された時点でループの先頭に戻るので実行されません。

■11日目　プログラム４■

<script>

	/*jspgm11_4*/
	/*11日目　プログラム４*/

	var flag = true;
	var count = 0;

	while(flag){
		
		if(count == 100){
			flag = false;
		}

		count++;
	}

	alert("カウントが１００になったので\nフラグを切り替え終了します！");

</script>

■実行結果■

■説明■

今度はif命令の時に学んだフラグの役目をする変数を用意して、「while」命令の条件に当てはめ切り替える事によって「while」命令を脱出しております。

最後に「while」命令の仲間である「do～while」命令をご紹介します。

これは「while」の部分の条件が合っても、合わなくても必ず一度は中身の命令が実行されるという命令になります。

プログラムで確認してみましょう！

■11日目　プログラム５■

<script>

	/*jspgm11_5*/
	/*11日目　プログラム５*/

	var suji = 100;

	do{

		alert("必ず一回は実行されます！");

	}while(suji < 50);

</script>

■実行結果■

■説明■

使い方は最初に

do

と書いて{}カッコ内に実行する内容を書きます。そしてお尻に

while(suji < 50)

条件を書きます。最初に変数「suji」には「100」が入ったので条件が合わなくても最初の一回が実行されているのがわかりますね！

「while」命令、「do～while」命令はいろいろなプログラムを組まないと「for」命令との違いやどこで使うのかイマイチわかりづらいと思います。

でもそのウチなんとなくわかってくると思いますので今は軽く心にとめておきましょう！

12日目 配列の使い方