はじめに
初めてのJavaScript(オライリー本)が筆者にとって少しとっつきにくかったです。
そこで、本書のサポートページにあるコラム『JavaScriptで学ぶ文系の人にもわかるプログラミング入門』から学び始めることにしました。その学習記録です。
学習すること
- ①条件により処理を変えるー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 {
...
}