はじめに

初めてのJavaScript(オライリー本)が筆者にとって少しとっつきにくかったです。
そこで、本書のサポートページにあるコラム『JavaScriptで学ぶ文系の人にもわかるプログラミング入門』から学び始めることにしました。その学習記録です。

学習すること

第4章条件分岐

①条件により処理を変えるーif文
②if文の形式
③条件の条件
④さらにif文ーif文の入れ子
⑤いろいろな「場合分け」

①条件により処理を変えるーif文

午前4時から午前10時直前までは「おはようございます」
午後10時以降、午後7時までは。「こんにちは」
それ以外の場合は「こんばんは」

example04-01.html(条件分岐|if文)


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello</title>
<script type="text/javascript">
function sayHello(){
	var today;	// 日付に関する「オブジェクト」を保持する変数todayを宣言
	var hour;     // 時刻を保持する変数hourを宣言
	today = new Date();  // Dateオブジェクトを作りtodayに「代入」
	hour = today.getHours(); // todayから時刻を取り出してhourに代入

	if (4 <= hour && hour <10) {   //  午前4時以降10時前まで
	  alert("おはようございます。");
	}
	else if(10 <= hour && hour <19){　// 午前10時以降午後7時前まで
	  alert("こんにちは。");
	}
	else {  //  その他の場合。つまり、午後7時以降、翌朝7時まで
	  alert("こんばんは。");
	}
}
</script>
</head>

<body onload="sayHello();">
<p>ごあいさつです。</p
</body>
</html>

②if文の形式

if (<条件1>){
   <処理部1>
}
else if  (<条件2>) {
   <処理部2>
}
else if  (<条件3>) {
    <処理部3>
}
...
else {
  <処理部n>
}

③条件の条件

if (i+j){
   <実行部>
}

④さらにif文ーif文の入れ子

さて、夏と冬で暗くなる時間はだいぶ違います。冬には6時頃には真っ暗で、午後6時30分に「こんにちは」はちょっと変な感じです。そこで、上のプログラムを「改良」して、4月から9月までは上と同じ、これ以外の月については、1時間早めて午後6時までは「こんにちは」としてみましょう。

example04-02.html(季節で分ける)


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello</title>
<script type="text/javascript">
function sayHello() {
  var today;
  var hour; 
  var month; // 月を保持する変数monthを宣言
  today = new Date();  // Dateオブジェクトを作りtodayに代入
  hour = today.getHours(); 
  month = today.getMonth()+1;  // todayから月を取り出してmonthに代入
  
  if (4 <= month && month <= 9) {   //4月から9月まで
    if (4 <= hour && hour < 10) {
      alert("おはようございます。");
    }
    else if (10 <= hour && hour < 19) {
      alert("こんにちは。");
    }
    else { // 午後7時以降，翌朝4時より前まで
      alert("こんばんは。");
    }
  }
  else {   // 1ー3月と10ー12月
    if (4 <= hour && hour < 10) {
      alert("おはようございます。");
    }
    else if (10 <= hour && hour < 18) {
      alert("こんにちは。");
    }
    else { // 午後6時以降，翌朝4時より前まで
      alert("こんばんは。");
    }
  }
}
</script>
</head>

<body onload="sayHello();">
<p>ごあいさつです。</p>
</body>
</html>

⑤いろいろな「場合分け」

さて、上のプログラムでは、最初に「4月から9月まで」と「それ以外の月」と分けて、
さらに時刻によって処理を分けましたが、時刻のほうに最初に注目してもよいのです。そうした場合、たとえば次のように処理をしても結果は同じになります。

  
    if(4 <= hour && hour < 10){
        alert("おはようございます。");
    }
    else if(10 <= hour && hour < 18){
        alert("こんにちは。");
    }
    else if(18 <= hour && hour < 19){
        if(4<=month && month<=9){
            alert("こんにちは。");
        }
        else{
            alert("こんばんは。");
        }
    }
    else {
        alert("こんばんは。");
    }
}

まとめ

この章では、条件によって行う処理をかえるif...else if...elseの構文ー条件分岐ーについて説明しました。

if文（条件分岐、ひとつ目の「else if」以降は省略可）

if (<条件1>) {
	...
} else if (<条件2>) {
	...
} else if (<条件2>) {
	...
}
...
...
else {
	...
}