【初心者向け】JavaScript入門②「条件分岐(if文)」 |『文系の人にもわかるプログラミング入門』より

#はじめに
[初めてのJavaScript(オライリー本)](https://www.amazon.co.jp/%E5%88%9D%E3%82%81%E3%81%A6%E3%81%AEJavaScript-%E3%82%B7%E3%82%A7%E3%83%AA%E3%83%BC-%E3%83%91%E3%83%AF%E3%83%BC%E3%82%BA/dp/4873113229)が筆者にとって少しとっつきにくかったです。
そこで、本書のサポートページにあるコラム[『JavaScriptで学ぶ文系の人にもわかるプログラミング入門』](https://www.marlin-arms.com/jpn/column/js101/lesson03.html)から学び始めることにしました。その学習記録です。

# 学習すること
***[第4章 条件分岐](https://www.marlin-arms.com/jpn/column/js101/lesson04.html)***

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


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

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

```html: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文の形式

```html
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時までは「こんにちは」としてみましょう。


```html: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月まで」と「それ以外の月」と分けて、
さらに時刻によって処理を分けましたが、時刻のほうに最初に注目してもよいのです。そうした場合、たとえば次のように処理をしても結果は同じになります。

```html  
  
    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」以降は省略可）

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