..

JavaScriptの入門とサンプル集
■JavaScript入門−基本編−繰り返し処理、条件分岐　　　　　■戻る　　　　　■次へ　　　　　■Home
■繰り返し処理と条件分岐

　JavaScriptで繰り返し処理と条件分岐を使ってみましょう。これらを組み合わせることによって、より複雑なプログラムやゲームなどを作りだすことができます。このあたりは、CやC++、VBを使える人には楽勝ですね。
★繰り返し処理

　　　for(繰り返しパラメータの初期値；繰り返し条件；繰り返しパラメータの加減算方法)
　　　{
　　　　　　　　 〔繰り返し処理する内容〕
　　　}

　　　break　　《繰り返し処理から抜け出します》

　【参照】「while」「do〜while」「continue」「label」についてはリファレンスマニュアルを参照してください。

<html>
<head>
<title>繰り返し処理</title>
</head>

<body>

<script language="JavaScript"><!--

for(i=0;i<5;i++) //　繰り返し条件が「i<5」の場合
{
document.write(i+" ");
}
document.write("<br>");

for(i=0;i<=5;i++)document.write(i+" ");
//　↑これは繰り返し条件が「i<=5」の場合

document.write("<br>");
for(i=5;i>=0;i--)document.write(i+" ");
//　↑大きい数値から小さい数値への繰り返しも可能です
// --></script>

</body>
</html>

 〜sample4_1.html〜のリスト









「i」の初期値0で、「i<5」の間、「i」を１加算しながら
「{ 〜 }」間の処理を繰り返します。
「i」の値の表示


改行

繰り返す処理が短い場合は、「{ 」「} 」を使わずに同
じ行に書くこともできます。

改行
大きい数値から小さい数値への繰り返しも可能です


行末は「；」でくぎります。
「//」はJavaScriptでのコメント文を意味します。

　　　■sample4_1.htmlを実行する
　sample4_1.htmlを実行すると、下記のような結果になります。繰り返し条件が、「i<5」の場合は０〜４なのに対して、「i<=5」の場合は０〜５になっていることに注意してください。
0 1 2 3 4
0 1 2 3 4 5
5 4 3 2 1 0
sample4_1.htmlの実行画面

..


　次は繰り返し処理と条件分岐を使って簡単な数字当てゲームを作ってみましょう。１〜２０の範囲の数字を５回以内に当てるゲームです。外れた場合はコンピューターから大きいか小さいかヒントが出ます。少しプログラムらしくなってきました。
★条件分岐

　　　if(条件式)
　　　{
　　　　　　〔条件が成立したときの処理〕
　　　}else{
　　　　　　〔条件が不成立だった時の処理〕
　　　}

　【参照】「switch、case」についてはリファレンスマニュアルを参照してください。


<html>
<head>
<title>条件分岐</title>
</head>

<body>

 <br><br><br><br><br>
<b>★数字当てゲーム★</b><br><br>
５回以内で数字を当ててね！<br>

<script language="JavaScript"><!--

a=Math.floor(Math.random()*20)+1; //　答えの設定
f=false; //　フラグの設定

for(i=1;i<6;i++) //　５回繰り返し処理
{
document.write(i+"回目　");
b=prompt("１から２０の範囲で数字を入れてください","");






if(a==b)
{
document.write("正解！！");
f=true;
break; //　正解の場合は繰り返し処理から抜ける
}else{
if(a<b)
{
document.write("大きいよ！<br>");
}else{
document.write("小さいよ！<br>");
}
}
}
if(f==false)document.write("正解は"+a+"でした。");
//　↑フラグが「false」のままなら正解を表示
// --></script>

</body>
</html>

〜sample4_2.html〜のリスト







〔IEで実行すると数値を入力するプロンプトが左上に表示されて
 邪魔なんで<br>で文字の表示位置を下げています( ・ω・；)〕



１〜２０の乱数を代入
フラグを「false」に設定

５回の繰り返し処理


プロンプトを使って数字の入力
■補足
　　　window.prompt("説明","初期値")
　　　文字列入力ダイアログを表示します
　　　入力された文字列は関数の戻り値として返される
　　　キャンセルボタンが押されると特殊値nullを返す
　　　windowと"初期値は"省略可
正解かどうかの判定

正解だった場合は「正解」と表示しフラグを「true」
に設定
繰り返し処理から抜ける
正解じゃなかった場合
答えの方が小さければ

「大きいよ！」と表示

答えの方が大きい場合は「小さいよ！」と表示



繰り返し処理が終了してフラグが「false」のままなら
正解を表示する。



行末は「；」でくぎります。
「//」はJavaScriptでのコメント文を意味します。

　　　■sample4_2.htmlを実行する　（再読込ボタンで何度も遊べます）


sample4_2.htmlの実行画面


　サンプルプログラムのように繰り返し処理と条件分岐を使うとより複雑なプログラムを組むことができます。下記にJavaScriptでの比較演算子の種類をあげておきます。
《　比較演算子の種類　》
a == b


a != b

a < b

a <= b

a > b

a >= b

a === b




a !== b




A && B


A || B


! A


A ? B:C		 等しいとき真「true」、等しくないとき偽「false」
代入演算子「=」と意味が違うので注意！

等しいとき偽「false」、等しくないとき真「true」

aがb未満のとき真「true」、aがb以上のとき偽「false」

aがb以下のとき真「true」、aがb超のとき偽「false」

aがb超のとき真「true」、aがb以下のとき偽「false」

aがb以上のとき真「true」、aがb未満の時偽「false」

等しいとき真「true」、等しくないとき偽「false」
　ただし、文字列と数値を比較したときは偽「false」を返す
   123 == "123"　　　　true・・・文字列を暗黙に数値に変換するので真
　 123 === "123"　　　false・・・文字列と数値を区別するので偽

等しいとき偽「false」、等しくないとき真「true」
　ただし、文字列と数値を比較した時は偽「true」を返す
　　123 != "123"　　　　false・・・文字列を暗黙に数値に変換するので偽
　　123 !== "123"　　　true・・・文字列と数値を区別するので真

Aが真でかつBも真のとき真「true」
 　　if((x==0)&&(y==0))alert("true");　・・・xyともに0のとき

Aが真またはBが真のとき真「true」
　　if((x==0)||(y==0))alert("true");　・・・xyいずれかが0のとき

Aが真でなければ真「true」
　　if(!(x==0))alert("true");　・・・xが0以外のとき

Ａが真であればB、偽の場合はCを代入する
　tx=(x<10)?"小さい":"大きい";　・・・xが10未満なら「小さい」、10以上なら「大きい」



..
■JavaScript入門−基本編−繰り返し処理、条件分岐　　　　　■戻る　　　　　■次へ　　　　　■Home

..