広告
【プログラミング入門】【JavaScript】9日目 枝分かれ「switch」
ホームページにアニメーションなどの動きをつける時に使われるJavaScript(ジャバスクリプト)というプログラミング言語を使って初心者・入門者向けにプログラミングのキホンを解説していきます！
難しい設定などはほとんどなく手軽に本格的なプログラミングを学ぶ事ができます。
簡単なホームページの作り方も解説しますのでホームページ作りに興味がある方もぜひご覧ください。
枝分かれ「switch」
今回はさらっといきましょう！わかりやすいし便利な命令です！
その１ 数字で分岐
■9日目 プログラム１■
<script>
/*jspgm9_1*/
/*9日目 プログラム１*/
var suji = 3;
switch(suji){
case 1:
alert("case1に枝分かれしました");
break;
case 2:
alert("case2に枝分かれしました");
break;
case 3:
alert("case3に枝分かれしました");
break;
default:
alert("全てのcaseに当てはまりません");
break;
}
</script>
■実行結果■
■説明■
枝分かれをさせる「switch(スイッチ)」命令です。前回のスイッチの話とは何の関係もないのでごっちゃにならないでくださいね。
数字または文字を「switch」命令で判断・枝分かれさせる事ができます。
switch(変数)
ここに入れた変数の内容によって枝分かれをします。
switch(suji){
case 1:
alert("case1に枝分かれしました");
break;
case 2:
alert("case2に枝分かれしました");
break;
case 3:
alert("case3に枝分かれしました");
break;
default:
alert("全てのcaseに当てはまりません");
break;
}
さきほどのプログラムの場合は変数「suji」の内容は「3」だったので「case 3」に枝分かれをしました。
「case 1、case 2、case 3・・・」と順番通りに並んでますが、別に順番どおりに並べる必要はなく
switch(suji){
case 13:
alert("case13に枝分かれしました");
break;
case 255:
alert("case255に枝分かれしました");
break;
case 322:
alert("case322に枝分かれしました");
break;
default:
alert("全てのcaseに当てはまりません");
break;
}
のように順番がとびとびでバラバラでも大丈夫です。
最後の「default」っていうのはすべてのケースに当てはまらない場合に実行されます。
注意
カッコを抜ける「break」命令
それぞれの「case」のあとにある「break」というのは{}カッコを抜ける命令になります。
この場合は「switch」命令のカッコを抜けております。
なのでこれを書き忘れるとそのあと「break」が現れるまで「switch」命令の中のすべての「case」が実行されてしまうので注意してください。
「case」のお尻は「:」コロン
「case」や「default」のお尻は「:」コロンになります。
「;」セミコロンではないので気を付けましょう！
広告
その２ 「文字」や「文章」で分岐
■9日目 プログラム２■
<script>
/*jspgm9_2*/
/*9日目 プログラム２*/
var moji = prompt("yかnを入力してね！");
switch(moji){
case "y":
alert("yを入力しましたね！");
break;
case "n":
alert("nを入力しましたね！");
break;
default:
alert("全てのcaseに当てはまりません");
break;
}
</script>
■実行結果■
続けて文章の場合も見ていきましょう！
■9日目 プログラム３■
<script>
/*jspgm9_3*/
/*9日目 プログラム３*/
var fruit = prompt("らっしゃい！\nどちらの果物になさいますか？\n(みかん・りんご・もも)");
switch(fruit){
case "みかん":
alert("100円になります！");
break;
case "りんご":
alert("120円になります！");
break;
case "もも":
alert("すいやせん。ももは品切れです！");
break;
default:
alert("ちょっと何言ってるかわからない・・・。");
break;
}
</script>
■実行結果■
■説明■
文字や文章で枝分かれをさせる事もできます。
caseに文字や文章を使う時は「"」で囲みます！
入力してもらう時の注意
■9日目 プログラム４■
<script>
/*jspgm9_4*/
/*9日目 プログラム４*/
var suji = prompt("1か2か3を入力してください！");
switch(Number(suji)){
case 1:
alert("1を選びましたね！");
break;
case 2:
alert("2を選びましたね！");
break;
case 3:
alert("3を選びましたね！");
break;
default:
alert("全てのケースに当てはまりません！");
break;
}
</script>
■実行結果■
■説明■
数字を入力してもらい枝分かれするプログラムになります。
6日目「入力してみよう！」の後半でも少し説明しましたが「prompt」命令は入力されたものを「文字列型」として認識するので数字として入力してもらう場合は「Number」命令をつけて変数を数字として認識してもらいます。
あと、たとえば「case "カレーぱん"」の時に全部カタカナにして「カレーパン」と入力されてしまうとひらがなとカタカナは別のものに判断されてしまって思い通りに枝分かれできないので注意しましょう！
「switch」命令や「if」命令を組み合わせれば簡単なノベルゲームなど作れそうですね！
いろいろ工夫して試してみてください！
次回はいよいよくり返しの命令に入ります！
次回
広告
広告
Copyright 2016 K.N/petitetech.com