ImpressCMS
HOME  >  JSCRIPT  > 制御文 > Switch文

 5 - 6 : Switch文

条件分岐の中で、ある変数の値によってそれぞれ別の処理をすることがあります。
例えば、セレクトボックスの中から色を選び、その色にしたがって、背景の色を変化させるスクリプトを記述する場合、if~else文だと非常に煩雑になります。
YESかNOだけでなく、複数の選択肢の中から条件にあったものを選ぶスクリプトがあればすごく便利です。
それがswitch文です。
switch文は、複数のcaseという選択肢の中から、値に合うものを選択し、その処理を実行します。
値に合うものがなかった場合は、defaultという選択肢の部分に進んで処理を行います。
それぞれのcaseの処理の最後にはbreak文(switch文を終了する意味合い)を記述します。
それぞれの項目の処理の最後にbreak文を入れない場合は、次に進んでしまいます(次の選択肢の処理をしてしまいます)。

switch文の形は以下のようになります。
 
 switch(式または変数) {
    case 値1:
        値1の時の処理
        break;
    case 値2:
        値2の時の処理
        break;
    ・・・
    case 値x:
        値xの時の処理
        break;
    default:
        どれにも当てはまらないときの処理
        break; // 最後はどうせ終わるので、break文は必ずしも必要ではない
}

となります。
switch文の練習ということで、今回は占いのプログラムを作ってみましょう。
占いは、ブラウザでファイルを開いたら、そこでランダムの数字を選び、その数字に従って結果を表示させる そんなイメージになります。
占いの結果は 大吉・吉・中吉・小吉・凶 の5つとし、それぞれ選んだランダムの数字が
0=大吉 1=吉 2=中吉 3=小吉 4=凶 となるものとします。

さて、ここで、ランダムな数字を選ぶ関数が必要です。
ランダムな数字のことを「乱数」といいます。
0以上1未満の乱数を作ってくれる関数は、後述する数値に関する関数が入っているライブラリ「Mathオブジェクト」の中にあります。
乱数=Math.random();

これで、乱数のところに0以上1未満の実数が入ります。
今回は0〜4の整数がランダムに出てほしいわけなので、
出た乱数の値を5倍します。そうしますのと、0以上5未満の実数となります。
この実数を切り捨てすると、0か1か2か3か4の5種類の整数を得ることが出来ます。
切り上げや切り捨てを行う関数もMathオブジェクトの中にあります。
切り上げが
Math.ceil( 実数 );
切り捨てが
Math.floor( 実数 );
ちなみに、四捨五入は
Math.round( 実数 );
です。ceilは天井、floorは床の英語なので、意味がわかったら覚えやすいですね。
Mathオブジェクトには他にもたくさんの関数が準備されていますが、それは6-4章で紹介します。

ということで、占いのスクリプトに戻ります。

スクリプトの流れは、以下の通りになります。
  1.  運勢の種類に当てはまる値をランダム関数で取得する
  2.  出た数字にしたがって、運勢を決定する
  3.  決まった運勢を表示する

という形になります。この流れに従ってスクリプトを作ります。jsbase.htmlをpractice7.htmlにコピーして開きましょう。そしてscriptタグの中で
 
var unsei; // 運勢を格納する変数
var unsei_num = Math.floor( Math.random() * 5 ); // 0,1,2,3,4のいずれかが入る

switch(unsei_num){ // unsei_numの値に従って分岐
    case 0:
        unsei = "大吉";
        break;
    case 1:
        unsei = "吉";
        break;
    case 2:
        unsei = "中吉";
        break;
    case 3:
        unsei = "小吉";
        break;
    case 4:
        unsei = "凶";
        break;
    default:
        unsei = "?????";
        break;
}
// 結果をプラウザに表示する
document.write("あなたの運勢は"+unsei+"です!<br>");
と入力し、ブラウザでファイルを開いてみましょう、
運勢がちゃんと表示ましたか?
ブラウザの更新ボタンを押すと結果が変わりますので確認してみて下さい。
 
Publish : 5214 bytes - updated 2024-08-01 by 管理人