条件分岐-1
JavaScriptでは、指定した条件を満たす場合のみ処理を実行するなど、条件ごとに別の処理を用意することが可能です。ステップ10では、if文を用いて処理を条件分岐させる方法を学習します。
10.1 条件分岐とは…？
条件分岐を利用すると、指定した条件に応じて実行する処理を分けることが可能となります。たとえば、変数「x」が3の場合のみ「正解！」という文字を表示し、そうでない場合（x≠3）は「不正解！」と表示する、といった処理をJavaScriptで実現することも可能です。
（問題）
次の一次方程式を満たす解を求め、そのボタンをクリックしなさい。x+6=9
このホームページでは、どのボタンをクリックしても関数「hatei( )」が実行されます。そして、「３」のボタンをクリックした場合のみ「正解！」という文字が表示されます。
10.2 if文の記述方法
条件分岐を行う場合は、if文を以下のように記述します。
if（条件式）{････････}
条件式の部分には、STEP8.3に示した比較演算子を用いて、処理を実行するために満たすべき条件を記述します。また、{････････}の部分には、条件が満たされている場合にのみ実行される処理を記述します。
たとえば、以下のようにif文を記述すると、変数「x」が３の場合のみ「正解！」というメッセージウインドウが表示されます。変数「ｘ」が3でなかった場合は、何も実行されません。
ワンポイント
if文の条件式に文字の変数を利用することも可能です。たとば、変数「str」の値が”日本”という条件分岐は以下のように記述します。
なお、文字が等しい（または等しくない）を条件とする場合は、その文字を「”」（ダブルクォーテーション）または「’」（シングルクォーテーション）で挟むのを忘れないでください。
10.3 if～elseで処理を2つに分岐させる
先ほど解説したif文だけでは、変数「x」が３でなかった場合に「不正解！」と表示することができません。このような場合は、else文を追加し、条件を満たさなかった場合の処理も記述します。これで条件に応じて処理を2つに分けることが可能となります。
if（条件式）{
【条件を満たす場合の処理】（真の処理）
} else {
【条件を満たさない場合の処理】（偽の処理）
}
なお、JavaScriptでは、条件を満たす場合を真（true）、条件を満たさない場合を偽（false）といいます。これらの用語もよく利用されるので覚えておいて下さい。
10.4 if～elseのサンプルプログラム
最後に、ステップ10のまとめとして、図10-1に示したホームページのHTMLファイルを紹介しておきましょう。
▼Sample10_1.html
このHTMLファイルのポイントは次のとおりです。
・27行目～31行目
このホームページでは、どのボタンをクリックした場合も「hantei( )」という関数が実行されます。また、ボタンに表示されている数値が引数として関数「hantei( )」に渡されます。
・10行目
関数「hantei( )」では、引数が変数「x」に代入されます。このため、変数「x」の値により条件を行うことになります。
・11行目
if文で条件分岐行います。条件式は「x==3」なので、変数「x」の値が3の場合のみ{ }内の処理が実行されます。
・12行目
条件を満たす場合の処理（真の場合の処理）です。alert( )で「正解！」という文字を表示します。
・13行目
変数「x」が条件式「x==3」を満たさなかった場合の処理を指定するために、else文を記述しています。
・14行目
条件を満たさない場合の処理（偽の場合の処理）alert( )で「不正解！」という文字を表示します。
演習
（１）if～elseを利用し、以下のようなホームページを作成してみましょう。
問題
日本で最も面積が大きい“県”は何県でしょうか?
※ボタンを1回クリックすると、ヒントが表示されます。
※ボタンを2回以上クリックすると、答えが表示されます。
※ボタンをクリックすると、関数「kotae( )」を実行します。
※関数「kotae( )」では、ボタンをクリックした回数に応じて表示するメッセージを変化させます。
※ボタンをクリックした回数を数えるために変数「i」を用意し、変数「i」の値に応じて条件分岐を行います。
※ここに直接入力できます。↓↓(テキストボックスのサイズは、右下の角をドラッグすると調節できます。)
→STEP09へ
→STEP11へ