制御文は 目的によって いくつか種類がありますが、今回は if 文 についてまとめてみます。
if 文
if 文はある条件を満たす場合と、満たさない場合で 処理を変えたい場合に使う命令です。最も基本的な書き方は下のようになります。
if (条件1) {
条件1が成り立つ時に実行する処理;
}
if と書いてあるすぐ後の( ) の中に 条件を書きます。条件の書き方には、比較演算子がよく使われます。
「条件1 が成り立つ時に実行する処理」には、{ } の中に ; で区切って、実行する処理を複数書くことができます。実際に書いたものの方が判りやすいかも知れません。
ex.1
var num = 10;
if (num > 5) {
document.write('5よりも大きい。');
}
実行すると 下のように表示されました。
 |
| ex.1の実行結果 |
この例でやっているのはとても単純です。1行目で 変数 num に 10 を代入しています。
2行目で if が出てきますが、( ) の中に書いてあるのが num > 5 ですが、今 num には 10 が入っていますので、10 > 5 となります。これは正しいので、 { } で囲まれた 処理が実行されています。( ) 内が 条件を満たさないように変えて、実行結果を見てみます。
ex.2
var num = 10;
if (num < 5) {
document.write('5よりも大きい。');
}
 |
| ex.2 の実行結果 |
今度は 比較演算子を < にしました。その他は同じなので、条件が 10 < 5 になってこれは正しくないので、{ } 内の処理は 実行されなかったため、画面に何も表示されなかったわけです。これで ある条件を満たす場合にだけ 処理を実行することができるようになりました。次は 条件を満たす場合と 満たさない場合で 違う処理をさせる書き方です。
if / else 文
if (条件1) {
条件1が成り立つ時に実行する処理;
}else {
条件1が成り立たない時に実行する処理;}
最も基本的な if 文 の書き方に続けて else と書いて 2つ目の { } 内に条件を満たさなかった場合に実行する処理を書きます。これも実際に試してみます。
ex.3
var num = 5;
if (num > 5) {
document.write('5よりも大きい。');
document.write('5と同じか、又は小さい。');
}
 |
| ex.3 の実行結果 |
今度は 変数 num に 5 を代入して、5 よりも大きいかどうかを判定しています。 つまり 5 > 5 を判定しています。これは 正しくありませんので、条件が 成り立つ場合の処理は行われずに、else の後の { } 内の処理が実行されています。
これで 条件によって 実行する処理を 2つに分岐させることができましたが、もっと分岐させる事もできます。次は その方法を試してみます。
if (条件1) {
これで 条件によって 実行する処理を 2つに分岐させることができましたが、もっと分岐させる事もできます。次は その方法を試してみます。
if / else if / else 文
if (条件1) {
条件1が成り立つ時に実行する処理;
}else if (条件2){
条件2が成り立つ時に実行する処理;
}else {
条件1 も条件2 も成り立たない時に実行する処理;
読む時には else / if 文 と言うようです。全部読んでいたら さすがにちょっと長過ぎます。
さっきの if / else の後にさらに if / else をつなげて書いた状態です。最後の else の後の処理は 条件1 も 条件2 も成り立たなかった場合に 実行されます。また else / if はいくつでもつなげて書くことができます。
ex.4
var num = 1;
if (num > 5) {
document.write('5よりも大きい。');
}else if(num < 5){
document.write('5よりも小さい。');
}else {
document.write('5と等しい。');
}
 |
| ex.4 の実行結果 |
ここでは else / if の後に書いた 条件が成り立つように、num の値を 1 にして試してみましたが、他の数値 を代入しても、ちゃんと正しく表示されました。
if 文は 比較演算子を使って条件を書くことの練習にとても良かったので、色々試してみるのも良さそうです。次回のまとめは 繰り返しの制御文にしようと思います。
0 件のコメント:
コメントを投稿