No6.if文を使ってみる

if文??

if文を使うと、もし~ならという条件をプログラムの中に書いて処理を分岐させることができます。

基本構文

下記のように書きます。条件式が等しい(true)になるときに中括弧の中の処理を行います。
条件式に合わない(false)になる場合は、処理は行われません。

if (条件式) {
  処理
}

else を使うと条件式に合わなかった場合の処理を書くことができます。

if (条件式) {
  等しい時の処理
} else {
  等しくない時の処理
}

else if を使うと、if文の条件が合わなかったときに
さらに条件を付けることができます。else ifは複数書くこともできます。

if (条件式1) {
  等しい時の処理
} else if(条件式2){
  等しい時の処理
} else if(条件式3) {
  等しい時の処理
} else {
  等しくない時の処理
}

使ってみよう

下記をファイルに書き込んで、iftest.html などの名前で書き込みましょう。

<html>
  <head>
    <meta charset="UTF-8" />
    <title>if文をつかってみた</title>
    <script>
      function main(){
        let number = 1;

        if (number == 1) {
          console.log("number 1:" + number);
        }

        if (number == 2) {
          console.log("number 2:" + number);
        }

        if (number == 3) {
          console.log("number 3:" + number);
        } else if (number == 1){
          console.log("else if number 1:" + number);
        } else {
          console.log("else number:" + number);
        }

        if (number == 4) {
        } else {
          console.log("else!!!:" + number);
        }

      }
    </script>
  </head>
  <body onload="main();">
  </body>
</html>

結果は下記のようになります。デベロッパーコンソールで確認しましょう。

number 1:1
else if number 1:1
else!!!:1

変数(number)には1を設定しています。
最初のif文は条件があうので上記1行目が出力されます。次の”number == 2″は条件が合わないので出力されません。
“number == 3″は条件に合いませんが次の行の”else if(number == 1)”にあうので、2行目が出力されます。
最後は”number == 4″に合わないのでelseに入って、3行目が出力されます。