Posted at

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


はじめに

初めての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 {
...
}