JavaScript 3通り以上の分岐処理をする方法

シェアする

  • このエントリーをはてなブックマークに追加
  • 0

あーりーです。

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入門」にまとめてあります。よろしければご覧ください。

A8 JavaScript

おまけ

JavaScriptを一人で勉強していてわからないことがあれば、teratailで質問することをおすすめします。

プログラミングに特化したYahoo!知恵袋のようなサイトです。

超・初心者のぼくにも優しく教えてくれました。

とても感謝しています。

関連記事コンテンツ



シェアする

  • このエントリーをはてなブックマークに追加

フォローする

自己紹介

あーりーと申します。アクセスありがとうございます。布団でぬくぬくしながら本を読んだりスマホでテレビを見たり、のんびり過ごすのが好きです。

ブログ村

ブログランキング・にほんブログ村へ

グロースファクター 毛髪再生