JavaScript勉強会

JavaScriptの学習日記

3.3 動作のバリエーションを増やす 《条件分岐(else if)》 【JavaScript超入門】

JavaScriptの学習メモ。

今日は『確かな力が身につくJavaScript「超」入門』の第3章を読んでみます。

 

jsstudy.hatenablog.com

 

 

3.3 動作のバリエーションを増やす

構造化プログラミングの基本動作は、

  1. 順次
  2. 選択(条件分岐)
  3. 反復(繰り返し)

の3つです。

(参考)JavaScript学習 準備編 - JavaScript勉強会

 

選択(条件分岐)は「if」で書きますが、場合分けを増やしたいとき「else if」という書き方が用意されています。

 

else if

(p.81)

if文の条件式がfalseになると、else以降が実行されます。

elseの後ろにまた別のif文をつけ加えることができます。

 

サンプルコード

<html>
<head>
    <meta charset="UTF-8">
    <title>3-03 else if</title>
</head>
<body>
    <p>「if」「else」「else if」の使い方テスト</p>
    <script>
        var answer = window.prompt('ヘルプを見ますか?');  
        if (answer === 'yes') {
            window.alert('処理1');
        } else if(answer === 'no') {
            window.alert('処理2');
        } else {
            window.alert('処理3');
        }
    </script>
</body>
</html>

 

上記のコードは、

(1) まず、「answer === 'yes'」の条件式が評価されます。

 変数answerに保存されているデータが'yes'かどうかを判断して、その評価結果がtrueであれば続くブロック {~} 内の処理1が実行されます。

 falseであればelse以降に進みます。

(2) ここにもifがあって、今度は「answer === 'no'」の条件式が評価されます。

 変数answerに保存されているデータが'no'かどうかを判断して、その評価結果がtrueであれば続くブロック {~} 内の処理2が実行されます。

 falseであればelse以降に進みます。

(3) もうif文がないので、処理3が実行されます。

 

if文は必要なだけ追加して、場合分けを増やすことができます。

2番目以降のifは、elseの後に続ける形=「else if」と書きます。

(elseとifの間に半角スペースを入れる。)

 

JavaScript以外のプログラミング言語でも、この「else if」に相当する機能はたいてい用意されています。

 

(参考)

PHP:「else if」または「elseif」と書く。

PHP: elseif/else if - Manual

Ruby:「elsif」と書く。ちょっと略したスペルですね?

複数の条件分岐(if...elsif...else...end) - 条件分岐 - Ruby入門

Python:「elif」と書く。Rubyよりもさらに略したスペルですねw

複数の条件分岐(if...elif...else) - 条件分岐 - Python入門