本節の目的
プログラミング言語としてのJavaScriptの学習の続きを行います。
ほとんどのプログラム言語にある条件や条件による分岐の方法などについて学習します。
例えば、成績の合否判定では、 60点以上なら「合格」、そうでなければ「落第」ですよね。 この時の「60点以上ならば」とか「そうでなければ（60点未満なら）」とかいうのが、 いわゆる「条件」です。 もし、この「条件」がなければ、上の例では点数に関係なく一定の表示をするだけになります。
更にこの「条件」によって処理を変化させることを、 「条件分岐」と呼びます。 もし、この条件による分岐を行う機能が無ければ、成績の結果を目で確認しながら、 「合格」とか「落第」の文字をキーボードから一々入力する必要があります。
（10人くらいの成績なら手で入力も可能ですが、 例えば、2,000人分の成績表に「合格」や「落第」の文字を入力したくないでしょう？）
プログラミング言語でも、この条件による分岐を行うことができるため、 上から下に順に処理をするという基本的な処理の流れに変化を付けることができます。
分岐点を設けて必要な処理をいくつも用意しておくことができるので、 いろいろな局面に対応することができるようになるのです。
条件 （比較演算子）
条件は、次の表に示しますように比較演算子と呼ばれる大小関係を表す処理で記述します。
| 利用例 | 内容 |
|---|---|
| a == b | a と b が等しければ真(注意) |
| a != b | a と b が等しくなければ真 |
| a > b | a が b よりも大きければ真 |
| a < b | a が b よりも小さければ真 |
| a >= b | a が b 以上であれば真 |
| a <= b | a が b 以下であれば真 |
等しいかどうかを判定する演算子は、 「=」ではなく「==」(イコールが2つ)であることに、 注意して下さい。具体的な使い方は、「条件分岐」の説明まで待って下さい。ここでは、ざっと上の表を見てもらえば結構です。
条件の組み合わせ （論理演算）
上記の比較演算子で作った条件を、複数組み合わせて利用することができます。
例えば、『「国語の点数が80点以上」で、かつ 「理科の点数が80点以上」であれば...』というような組み合わせです。
このような組み合わせた条件を、「論理演算」と呼びます。 以下のような3つの論理演算が代表的です。
| 論理演算名 | 論理演算子の利用例 | 内容 |
|---|---|---|
| 論理積 （AND） | 条件式 A && 条件式 B | A と B が同時に成立すれば真 |
| 論理和 （OR） | 条件式 A || 条件式 B | A か B のどちらかが成立すれば真 |
| 否定 （NOT） | ! 条件式 A | A が真の場合は偽，A が偽の場合は真 |
論理演算の結果は、一つの条件として利用できます。
条件による分岐 （条件分岐）
上記の単純な条件や、条件を組み合わせた論理演算の結果を一つの条件として、 その条件によって処理を変えるのが、 「条件分岐」です。
条件分岐の一番単純な形は、次のように記述します。
if (条件) { 処理1 ; 処理2 ; ・・・ ; }
上記の記述は、「もし(if)、条件が成り立てば（真になれば）、 処理1、処理2, ...と順に処理をする」と読めば意味が分るでしょう。
ですから、上の条件分岐の場合、もし、 条件が成り立たなければ、処理1、処理2などは、処理（実行）されません。
次に、二者択一で、どちらかの処理（の集まり）を実行したいときは、 以下のように記述します。
if (条件) { 処理1 ; 処理2 ; ・・・ ; } else { 処理A ; 処理B ; ・・・ ; }
上記は、「もし、条件が成り立てば、処理1、処理2, ...と順に処理し、 そうでなければ(else)、処理A、処理B, ...と順に処理する」 という意味になります。ですから、処理1、処理2, ...のグループの処理か、 処理A、処理B, ...のグループの処理の、 どちらか一方の処理グループが実行されることになります。
最後に、複数の条件があり、その条件により処理が異なる場合は、 以下のように記述します。
if (条件1) { 処理1.1 ; 処理1.2 ; ・・・ ; } else if (条件2) { 処理2.1 ; 処理2.2 ; ・・・ ; } else if (条件3) { ・・・ ; ・・・ ; } else { 処理N.1 ; 処理N.2 ; ・・・ ; }
上記は次のように動作します。 もし、条件1が成り立てば、処理1.1、処理1.2, ... を順に処理し、この条件分岐処理を終わります（他の条件も調べません）。 もし、条件1が成り立たなければ、 条件2を調べ条件２が成り立てば、処理2.1、処理2.2, ... を順に処理し、この条件分岐処理を終了します。以下同様に行い、 最後にどの条件も成り立たなければ、処理N.1、処理N.2, ... を順に処理して終了します。
条件分岐ができると、プログラミングに必要な「繰り返し処理」についても 理解できるのですが時間の関係で取り扱いません。 興味がある人は、「JavaScript 繰り返し処理」等のキーワードで、 検索すると、繰り返し処理に関するテキストが見付かると思いますので、 自学してください。
演習：条件分岐に関する演習
年齢によって異なる表示がされるようなJavaScriptを動かしてみましょう。
以下の指示に従い、 JavaScriptの最も基本的な機能である代入と四則演算の演習を行い、 これらの記述方法と動作を確認してください。
- エディタで「myscript2.js」を開き、 以下のJavaScriptによるの処理の定義をコピー＆ペーストし、 上書き保存して下さい。
function agebranch () { age = 18 ; if (age <= 30) { document.write(age + "才ですか。 若いですね。") ; } else if (age > 30 && age < 45 ) { document.write(age + "才ですか。 働き盛りですね。") ; } else { document.write(age + "才ですか。 健康に気をつけましょうね。") ; } }
- 上記で定義した agebranch という処理を実行すると、どのように表示されるでしょう？ 次の中から正解を考え、「正解は？」のボタンをクリックして、 a から i の記号で答えてください。 もし間違ったら、正解が得られるまで何度も挑戦してください。
- 才ですか。若いですね。
- 才ですか。働き盛りですね。
- 才ですか。健康に気をつけましょうね。
- age 才ですか。若いですね。
- age 才ですか。働き盛りですね。
- age 才ですか。健康に気をつけましょうね。
- 18才ですか。若いですね。
- 18才ですか。働き盛りですね。
- 18才ですか。健康に気をつけましょうね。
- 「学生番号exjs1.html」のbody要素の最後に（</body>の上に）、 次のHTMLをコピー＆ペーストした後、上書き保存して下さい。
<p> <script type="text/javascript"> agebranch(); </script> </p>
- 上記の学生番号exjs1.htmlをWebブラウザで表示すると、どのように表示されるでしょう？ 次の中から正解を考え、「表示は？」のボタンをクリックして、 a から d の記号で答えてください。 もし間違ったら、正解が得られるまで何度も挑戦してください。
- ボタンが表示されるので、それをクリックすることで、 上記 2. の正解を表示したウィンドウが現れる。
- 年齢を入力する枠が表示されるので、そこに年齢を入力することで、 上記 2. の正解を表示したウィンドウが現れる。
- 年齢範囲の選択が表示されるので、そのうちの一つを選択することで 上記 2. の正解を表示したウィンドウが現れる。
- 上記 2. の正解がそのままブラウザ内に表示される。
- 上記の学生番号exjs1.htmlをWebブラウザで表示して、 age=18に対するメッセージがちゃんと表示されることを確認して下さい。
どのように表示されるかの正解は、上の 2. 及び 4. の正解を参照してください。
- 「myscript2.js」中の、age の値を適当に変えて （例えば、「age = 18 ;」を「age = 35 ;」に変えて）、 学生番号exjs1.htmlをWebブラウザで再読み込みさせて、 表示が所望のものに変わることを確認して下さい。
上の演習では、JavaScriptのもつ以下の機能を使っています。
- 文字の並び（文字列）は、ダブルクォーテーション（"）もしくは シングルクォーテーション（'）で囲みます。
- 複数の文字列をつないで一つの文字列にする（「文字列の連結」と呼ぶ）には、 「+」を間に置きます。
（例1）"熊本市" + "黒髪" ---> "熊本市黒髪"
（例2）「year」という変数に、 「2010」が代入された後であれば、次のようになります。
"今年は" + year + "年です。" ---> "今年は2010年です。"