東京都で開催する初心者向けのJavaScriptとjQueryを使ってホームページ制作の1日集中セミナーです。 JavaScript・jQueryの入門講座なら、神田ITスクール!

7.3 while文を使ってみよう

while文を使ってみよう

7.3 while文を使ってみよう

 前項で学習したfor文では、主にループする回数を指定して繰り返し処理を行っていました。本項ではfor文とは性質の異なるループ処理構文「while文」について解説していきます。
 while文に似たdo-while文がありますが、for文とwhile文を知っておけば十分なので本テキストでは割愛しています。

7.3.1 while文の基本構文

 while文は、指定された条件式が成立する間だけ同じ処理を繰り返します。
 while文の基本構文は下記のようになります。

書式:while基本構文

 while文はfor文と違い、指定する式は条件式の1つだけです。while文では、「条件が成立している間」ブロック文内の処理を繰り返します。
 この流れをフローチャートで表すと、図 7.3.1のようになります。

図 7.3.1 : while文のフローチャート

 while文の基本的な構文の中には、繰り返しの回数をカウントする変数の初期化やその変数へのインクリメント(値を1つだけ増やす)などの操作は含まれていません。そのため、for文と同じようにカウンタ変数を使って繰り返し回数を制御する場合は、別に記述をする必要があります。これについては次のプログラムを作成しながら確認していきましょう。

7.3.1 while文の基本構文

 同じメッセージを複数回表示するプログラムを、while文を用いて作成し、結果を確認します。

①ソースフォルダ    :javascript/ch07
②ファイル名      :while_loop.html

➢ While_loop.html

<html>
	<head>
		<title>while文を用いて同じメッセージを繰り返すプログラム</title>
	</head>
	<body>
		<h1>while文を用いて同じメッセージを繰り返すプログラム</h1>
		<script type="text/javascript">
                   
                 // while文を制御するための変数iを宣言し、0で初期化
			var i = 0;

			while(i <= 4){
				document.write("入門WhileLoop!<br>");
				i++;
			}

		</script>
	</body>
</html>

実行結果

解説

 このプログラムでは、5回の繰り返し処理を行なっています。while文の記述は10~15行目になります。この部分の流れを順に追っていきましょう。

   10: var i = 0;
   12: while (i <= 4) {
   13:   document.write ("入門WhileLoop!<br>");
   14:   i++;
   15: }

カウンタ変数の宣言と初期化
 while文に入る前に、あらかじめ10行目でカウンタ変数の宣言と初期化を行います。

   10: var i = 0;

 6回目に条件式の判定を行う時、変数iの値は5で条件は満たされないため、while文を抜けます。
 この処理をフローチャートで表すと、図 7.3.2のようになります。

図 7.3.2 : while_loop.htmlのフローチャート

 このプログラムでは、while文を使って繰り返し処理を行いましたが、同じ処理をfor文で記述することもできます。下記のwhile文とfor文は全く同じ処理を行いますので、while文とfor文のどちらで書いてもかまいません。

for文とwhile文の違い

for文は1行で簡潔に記述でき、また、どのような制御がされているかもわかりやすいです。ではなぜ、while文というものがあるのでしょうか。
 for文とwhile文は、どちらも同じ処理を作ることはできますが、for文は主にループ回数が最初からわかっている場合に使います。それに対してwhile文の場合は、主に回数が決まっていなく、ある条件を満たす間繰り返すときによく使います。

NEXT>> 7.4 break文とcontinue文を使ってみよう

ご不明点はお問い合わせフォームからご連絡ください。

セミナー一覧

法人向けプログラミング研修

Java、PHPの社員研修|新人研修

chromeデベロッパーツール

他のJavaScript講座・スクールのご紹介

ホームページ制作・保守

ホームページ制作・保守

HTML&CSSセミナーも人気!

HTML&CSSセミナーも人気!

まずはHTMLとCSSの知識が必要な方は、こちらのセミナーがおすすめです。
HTML&CSSセミナーはこちら

当JavaScript講座を受講前に受講するHTML講座

ホームページ制作・保守

ホームページ制作・保守

セミナー講師

セミナー講師

主席インストラクター
早稲田大学大学院 理工学部卒業
SanJose 州立大学、コンピューター工学部卒業
アメリカのシリコンバレーでは、プログラマー・SEとして活躍
講師の詳細はこちら

PAGETOP
Copyright © 株式会社FusionOne 神田ITスクール All Rights Reserved.
Powered by WordPress & BizVektor Theme by Vektor,Inc. technology.