現役システムエンジニアの備忘録

技術スキルや用語などの記録を残していきます

基礎

JavaScriptの繰り返し処理について

投稿日:2019年4月15日 更新日:

処理を繰り返す構文には、繰り返す回数を指定するfor文と、条件が満たされている間繰り返すwhile文があります。処理を繰り返す回数が決まっているときはfor文、繰り返す回数が決まっていないときはwhile文を使用します。

スポンサーリンク

指定回数だけ処理を繰り返す(for文)

for(★;♦;▲){

}
★ 初期値
♦ 条件
▲ 変数の増減
● 処理
処理を指定回繰り返したいときに使用する構文です。まず変数に初期値★を設定し、条件♦がtrueの間、処理●を実行します。処理を1回実行するごとに、▲にある式に基づき変数の値が増減します。

1から5までの数を加算していくサンプルです。変数iの初期値を1とし、iが6より小さい間(5以下の間)、for文で処理を繰り返します。処理を1回行うごとにiは1増加(i++)していきますので、処理は5回行われることになります。
JavaScript

total = 0;
for(i=1;i<6;i++){ //処理を5回繰り返す
document.write(”

“+i+”回

“); //回数を書き出す
total = total + i;
document.write(”

“+total+””); //加算結果を書き出す
document.write(”

“+total-i+”+”, i+ “”);
}

すべての値に処理を繰り返す(for文)

for(★ in ♦){

}
★ 変数名
♦ オブジェクト名または配列名
▲ 処理
オブジェクト♦の持つ値または配列の値すべてに対して、それぞれ順番に▲を実行します。変数★にはオブジェクトや配列のインデックスが順番に格納されます。

Navigatorオブジェクトのすべてのプロパティとその値を書き出しています。ブラウザによって参照できるプロパティに違いがあるので、実行結果は異なりますが、for構文を使うと環境による差異にかかわらず繰り返し処理を実行できます。navigatorの部分をwindowやscreenなどほかのオブジェクトに書き換えれば、それぞれのオブジェクトで参照できるプロパティを調べることが可能です。

スポンサーリンク

JavaScript ※レイアウトは外部CSSで指定しています

for(i in navigator){ //Navigatorオブジェクト全体に処理を行う
val = navigator[i];
document.write(”

“+i+”
“+val+””);
}

条件が真の間、処理を繰り返す①(While文)

while(★){

}
★ 条件
♦ 処理

条件が満たされるまで、処理を繰り返す制御構文です。
条件★がtrue(真)の間、処理♦を繰り返します。最初から条件が満たされていなかった場合、処理♦は一度も行われません。

入力された名前を表示するサンプルです。サンプルでは、まず変数resの初期値を空の文字列(””)に設定しておきます。その後、文字入力ダイアログを表示して名前の入力を促し、[キャンセル]ボタンがクリックされた場合と何も入力されていない場合はwhile文で処理を繰り返しています。

JavaScript
res = “”; //変数に空の文字列を設定
while((res == “”)) || (res == null)) //入力値が空欄かキャンセルの間、処理を繰り返す
res = prompt(“名前を入力してください。”,””);
document.write(“ようこそ! ” + res + ““さん”);

条件が真の間、処理を繰り返す②(While文)

do {

} while(★)
★ 条件
♦ 処理
条件★がtrue(真)の間、処理♦を繰り返します。前項のwhile文では最初から条件が満たされていた場合は一度も処理が行われませんが、「do~while文」では処理の実行後に条件判断が行われるため、最初から条件が満たされていなかった場合でも最低一度は処理が実行されます。

まず文字入力ダイアログを表示して名前の入力を促し、[キャンセル]ボタンがクリックされた場合と何も入力されていない場合はdo~while文で処理を繰り返しています。
do{
res = prompt(“名前を入力してください。”,””);
} while((res == “”) || (res == null));
document.write(“ようこそ! ” + res + “さん”);

スポンサーリンク

-基礎
-

執筆者:


comment

メールアドレスが公開されることはありません。

関連記事

JavaScriptをHTML要素内に直接記述する方法

    JavaScriptをWebページに組み込むには次の方法があります。 ・HTML文書内に記述する方法 ・外部ファイルに記述して読み込む方法 ・HTML要 …

JavaScriptの演算子とは?

JavaScriptには計算や比較に利用するさまざまな演算子があります。大きく分けて、四則演算を行う算術演算子、数値をビットとして扱うビット演算子、if構文などで複数の条件を扱う際に使用する論理演算子 …

JavaScriptの条件分岐について

プログラムは通常上から下へ順番に処理されていきますが、複雑なプログラムではユーザの動作や環境などによって処理を分ける必要が生じます。条件によって処理を分ける条件分岐の構文には、2通りの処理に分岐する「 …

JavaScriptのHTML文書内への記述方法

    JavaScriptをWebページに組み込むには次の方法があります。 ・HTML文書内に記述する方法 ・外部ファイルに記述して読み込む方法 ・HTML要 …

JavaScript記述の注意点

    JavaScriptの基本書式や記述するときの注意点をまとめておきましょう。 スポンサーリンク