求職者支援訓練Webサイト制作科 4月18日開講クラス 漂泊

初心者がプロになるための勉強 フェリカテクニカルアカデミーWebサイト制作科 4月18日開講クラス授業補足ブログ

条件分岐 - if文

 **ifで枝分かれ

  • ユーザーが入力したパスワードが正しかったらこの処理をさせ、間違っていたらこの処理をさせたいなど、ある判定の結果によって処理を枝分かれを作るときに「if」を使います

if(判定したいこと) {
  判定結果が正しいときにやりたい処理;判定結果が正しいときにやりたい処理2;
  …
}

ifの基本ルール

var a = 5;

if( a < 10 ) {
    console.log( 'aは10より小さい' );
}
  1. 数値型の変数 a を宣言し、初期値として 5 を入れる
  2. a が10より小さいとき、「{}」で囲まれたところが実行される
  3. 結果を出力パネルに表示する
ifの処理の流れ

https://cdn-ak.f.st-hatena.com/images/fotolife/w/web-css-design/20111009/20111009192514.jpg

もちろん、実際にこの文を使う場合、判定の結果はtrace文ではなく、もっと具体的な演出になります。

さまざまな条件
var a;
a < 10    a が10より小さい
a > 10    a が10より大きい
a <= 10  a が10以下(10も含む)
a >= 10  a が10以上(10も含む)
a == 10  a が10と一致
a != 10   a が10ではない

この中で特に間違えやすいのは「==」という記号です。
等しいかどうか調べるときには必ず2つ必要です。

if( password != 'abc123' ) {
    console.log( 'パスワードが間違っています。' );
}
else
  • 条件が成立しない場合に何かを実行したいときに、「そうではないとき」という処理を実行します
var a = 15;

if( a < 10 ) {
    console.log( 'a は10より小さい' );
} else {
    console.log( 'a は10より小さくはない' );
}

https://cdn-ak.f.st-hatena.com/images/fotolife/w/web-css-design/20111009/20111009215402.jpg

else if
  • if と else を使えば、条件が成立するときの処理も、成立しないときの処理も書けるので充分のように思えますが、もうひとつ if と else の間に書く「else if」には、if 文と同じように条件を書くことができ、「そうでなくて、もし〜ならば」という処理をつくります。
var a = 10;

if( a < 10 ) {
    trace( 'a は10より小さい' );
} else if( a == 10 ) {
    trace( 'a はずばり10' );
} else {
    trace( 'a は10以上' );
}

https://cdn-ak.f.st-hatena.com/images/fotolife/w/web-css-design/20111009/20111009215422.jpg

論理演算子

developer.mozilla.org

ANDで条件を組み合わせる
  • if 文では、いくつかの条件を並べることができます
  • 条件を並べるときには「AND(&&)」か「OR(||)」を使って、条件どおしをつなぎます
  • 両方の条件が成立するときだけ処理を実行したいときには、AND(&&)を使います
var a = 5;

if( a > 0 && a < 10 ) {
    trace( 'a は1から9までの数値です。' );
}
条件A:a > 0  a が0より大きい
条件B:a < 10  a が10より小さい

この例では条件A、Bの両方が成立する(true)ので、出力パネルには「a は1から9までの数値です。」と表示されます。

ORで条件を組み合わせる
  • どちらかの条件が成立するだけで処理を実行したいときは、OR(||)記号を使います
var a= 5;

if( a < 0 || a > 10 ) {
    trace( 'a は0より小さいか、10より大きい数値です。' );
}
条件A:a < 0  a が0より小さい
条件B:a > 10  a が10より大きい

この例では条件A、Bのどちらも成立しない(false)ので、出力パネルにはなにも表示されません。

求職者支援訓練 フェリカテクニカルアカデミー