【jQuery】入門10. if文による条件分岐

こんにちは（・∀・）

jQuery入門、今回は条件分岐についてです。

「もし今の時間が午前中なら「眠い」、それ以外なら「早く帰りたい」。」

条件分岐とは？

「もし、なんちゃらだったら、こうする」。

というような条件によって実行する動作を決めるというような動作をプログラムではよくします。

そのような動きのことを条件分岐といいます。JavaScriptもプログラムの一つなのでif文とswitch文いう条件分岐を使うことができます。

理屈は簡単なので例を使って覚えちゃいましょう。

今の気分、「もし今の時間が午前中なら「眠い」、それ以外なら「早く帰りたい」。」と表示したい場合、この文章をJavaScriptで置き換えてみましょう。

この文章では午前とそれ以外で気分が違っています。よくわかりますがここでは置いておきます。ということは今の気分は時間によって変わるということです。なので表示する文字列も時間によって変えないといけません。午前とそれ以外、まあ午後ですね。ではどうするのか...

午前とそれ以外を調べるために時間を取得します。時間の取得は前にやったので覚えていると思います。

それではとりあえず現在時刻を表示してみます。

HTML

<p class="demo1"></p>

JavaScript

$(function(){
var now = new Date();
var h = now.getHours();
$(".demo1").text("現在" + h + "時台です。");
});

Result

new Date()で現在日時を取得して変数nowに入れる。

取得した現在日時からgetHours()で時間を取得して時間を変数hに入れる。

ここまでは以前やりました現在日時の表示のおさらいです、大丈夫でしょうか。

if文

それでは条件分岐を使ってみましょう。if文を使って条件分岐してみます。

もし(if)条件が合えばこうする。それ以外(else)ならこうする。を式にすると次のようになります。

if(条件){
条件が合えばこうする
}else{
それ以外ならこうする
}

条件が合えば「眠い」というメッセージを表示させます。それ以外ならば「早く帰りたい」というメッセージを表示させます。条件のところに比較演算子と倫理演算子が記述されています。それらを使って条件を指定します。

if( 0 < h && h < 12 ){
var mess = "眠い";
}else{
var mess = "早く帰りたい";
}

条件の「0 < h && h < 12」ですが、hにはDate()メソッドで取得した現在の時間が入っています。初めに0とhを「小なり」で比較しています。0がhに入っている現在時刻未満ならtrueを返します。それと併せて&&でもう一つ比較しています。hと12を「小なり」で比較しています。hに入っている現在時刻が12未満であればtrueを返します。これで何時から何時までを求めることができます。0時から12時までは午前で「眠い。」、12時から23時までを午後で「早く帰りたい。」です。

HTML

<p class="demo2"></p>

JavaScript

$(function(){
var now = new Date();
var h = now.getHours();
if( 0 < h && h < 12 ){
var mess = "眠い。";
}else{
var mess = "早く帰りたい。";
}
$(".demo2").text(mess);
});

Result

ちなみに、条件を増やすこともできます。

if(条件1){
条件1が合えばこうする
}else if(条件2){
条件2が合えばこうする
}else if(条件3){
条件3が合えばこうする
}else{
それ以外ならこうする
}

条件はいくつでも増やすこともできますし、最後else文はなしでelse if文で終わることもできます。ただし、記述する順番としてif文は絶対最初に記述し、else文は最後に記述します。else if文の後にif文を記述するとか、else文の後にelse if文を記述するとかはできません。

以上がif文による条件分岐です。それ程難しくないでしょう？！

if文による条件分岐はよく使いますので覚えておくと良いと思います。if文と同じ条件分岐のswitch文はまた後程やりたいと思っております。お待ちください。

関連リンク

JavaScript入門
jQuery入門