あーりーです。
JavaScriptの勉強をしています。
前回は「if文」について書きました。
「if文」を使うと、プログラムの流れを2通りに分岐させることができました。
今回はそれをちょっと発展させて…
3通り以上に分岐させる方法をやってみます。
else if（エルス イフ）
プログラムの流れを3通り以上に分岐させるための秘密兵器が「else if」です。
「エルス イフ」と読みます。
これを「if文」に組み込みます。
構造
「if文」に「else if」を組み込んだときの構造が、こちらです。
if(条件式その1){ 条件式その1が成立する場合の処理 }else if(条件式その2){ 条件式その2が成立する場合の処理 }else if(条件式その3){ 条件式その3が成立する場合の処理 }else if(条件式その4){ 条件式その4が成立する場合の処理 }else{ どれも成立しない場合の処理 }
こんなふうに、「else if」でどんどん条件式を追加して、分岐を増やしていくことができます。
上の例では、最終的に5パターンの処理に分岐しています。
もっと少なくてもいいし、もっと多くてもOKです。
あと…
上の例では、見やすいように空白行を入れています。
この空白行は、あってもなくてもOKです。
では、実際に「else if」を使ってみましょ～。
10点満点のテスト
10点満点のテスト結果に対して、「優秀です」や「頑張ろう」などとにコメントをするサンプルを作ってみました。
テストの点数は、ランダムに作成しています。
こちらです。
<html> <head> </head> <body> <script> var a; a=Math.floor(Math.random()*11); document.write(a+"点<br>"); if(a==10){ document.write("完璧です"); }else if(a>=8){ document.write("優秀です"); }else if(a>=5){ document.write("頑張ろう"); }else if(a>=3){ document.write("ヤバいよ！"); }else{ document.write("どうした？"); } </script> </body> </html>
緑色の部分がJavaScriptです。
点数に応じてコメント
上の内容をメモ帳などのエディタにコピペしてHTML形式で保存し、そのファイルを開くと…
9点 優秀です
というように、「点数」とそれに応じた「コメント」が表示されます。
仕組み
では、どんな仕組みになっているのか、1行ずつ見ていきますね。
点数をランダムに決める
まず、最初のこの部分をご覧ください。
var a; a=Math.floor(Math.random()*11);
ここでは、「0」から「10」までのランダムな整数を、「a」という変数に代入しています。
※ランダムな整数をつくる方法はコチラをご覧ください。
点数を画面に表示
つぎの行です。
document.write(a+"点<br>");
「a」に代入されているランダムな整数を、10点満点のテストの点数に見立てます。
整数のうしろに「点」という文字を付けて、画面に表示します。
画面には、こんな感じで表示されます。
9点
これで点数の表示は終わりました。
あとはコメントです。
10点満点なら「完璧です」と表示
つぎの行です。
if(a==10){ document.write("完璧です");
ここでは「a==10」という条件式が用意されています。
この条件式が成立する場合（つまり「a」が「10」のとき）は、画面に「完璧です」と表示されます。
この条件式が成立しない場合は、つぎへ進みます。
8点以上なら「優秀です」
つぎがこちらです。
}else if(a>=8){ document.write("優秀です");
「else if」のうしろに、つぎの条件式が書かれています。
この条件式が成立する場合（つまり「a」が「8」以上のとき）は、画面に「優秀です」と表示されます。
ちなみに…
「a」が「8」以上といっても、この場合考えられるのは、「8」か「9」です。
「10」はありえません。
「a」が「10」なら、そもそもこの条件式まで進んで来ません。
この一つ前の条件式に当てはまるので、そこで処理されます。
5点以上なら…
あとはこの繰り返しです。
「a」が「5」以上のとき、つまり5点、6点、7点なら、画面に「頑張ろう」と表示されます。
「a」が「3」以上のとき、つまり3点、4点なら、画面に「ヤバいよ！」と表示されます。
どの条件式にも当てはまらないとき、つまり0点、1点、2点なら、画面に「どうした？」と表示されます。
以上が「else if」を使って3通り以上にプログラムの流れを分岐させる方法です。
今回はこれでおしまい。
JavaScriptの記事は、この記事も含めて「初心者のための超わかりやすいJavaScript入門」にまとめてあります。よろしければご覧ください。
