あーりーです。
JavaScriptで遊んでいます。
突然ですが…
あなたはファンタジーの世界の「勇者」です。
悪者にさらわれた「お姫様」を助けに行こうとしています。
前回手に入れた伝説の剣をたずさえて、いよいよ冒険の旅がはじまります。
目指すは、お姫様がとらわれている悪者の城です。
が。
ここで一つ問題が。
悪者の城がどこにあるのか、わかりません。
ファンタジーの世界は広いです。
この広い世界のどこかに、お姫様はとらわれています。
お姫様を探す
あなたはとりあえず、町の周辺をウロウロしてみることにしました。
といっても、この辺の地理にくわしくないので（そういう設定）どっちに行けば何があるのか、よくわかりません。
そこで…
あなたは、町の人にたずねました。
「旅の者です。町を出てウロウロしたいんですが、周辺の地理はどんな感じですか？」
町の人は言いました。
「東西南北、どの方角に行くつもり？」
さて。
あなたは何と答えますか？
東、西、南、北、どれかを答えると、それに応じて町の人が情報をくれます。
東西南北 どこに向かう？
仮に…
あなたが「東」と答えれば、町の人は「海があるよ」という情報をくれるとします。
あなたが「西」と答えれば、町の人は「山があるよ」という情報をくれるとします。
あなたが「南」と答えれば、町の人は「砂漠があるよ」という情報をくれるとします。
あなたが「北」と答えれば、町の人は「草原があるよ」という情報をくれるとします。
JavaScriptでやってみよう
これをJavaScriptでやってみますね。
実現したいのは以下の内容です。
- 「どの方角に行く？」という質問とともに入力欄が出てくる。
- 入力欄に「東」「西」「南」「北」のいずれかを入力すると、それに応じた情報が表示される。
- 「東」「西」「南」「北」以外の文字を入力すると、「もう1回言って」と聞き返される。
switch
今回は、switchを使って分岐処理を行います。
switchを使えば、変数の中身に応じて処理を変えることができます。
構造
switchの構造は、以下のとおりです。
switch(変数){ case 値1: 変数が値1のときの処理 break; case 値2: 変数が値2のときの処理 break; default: どれにも一致しないときの処理 }
変数の中身が「値1」なら、値1のときの処理が行われます。
変数の中身が「値2」なら、値2のときの処理が行われます。
上の例では「値2」までですが、「値3」「値4」と、どんどん処理を増やすことができます。
最終的に、変数の中身がどの値にも一致しないときは、一番最後の「どれにも一致しないときの処理」が行われます。
スクリプト
switchを組み込んだスクリプトがこちらです。
<html>
<head>
</head>
<body>
<script>
var x;
x=prompt("どの方角に行く？","");
switch(x){
case "東":
document.write("海があるよ");
break;
case "西":
document.write("山があるよ");
break;
case "南":
document.write("砂漠があるよ");
break;
case "北":
document.write("草原があるよ");
break;
default:
document.write("もう1回言って");
}
</script>
</body>
</html>
緑色の部分がJavaScriptです。
それ以外の部分は究極にあっさりと書いています。
実行すると？
上の内容をメモ帳などのエディタにコピペしてHTML形式で保存し、そのファイルを開くと…
「どの方角に行く？」という質問とともに、入力ダイアログが表示されます。
入力ダイアログの欄に「東」「西」「南」「北」のいずれかの文字を入力してOKをクリックすると、入力した方角の情報が表示されます。
解説
では、どんな仕組みか確認しておきますね。
変数「x」の準備
まずこの行をご覧ください。
var x;
ここで、変数「x」を使う宣言をしています。
入力ダイアログの表示
つぎの行です。
x=prompt("どの方角に行く？","");
この行によって、「どの方角に行く？」という入力ダイアログが表示されます。
入力ダイアログに入力された情報は、変数「x」に代入されます。
変数「x」の中身が「東」の場合
つぎをご覧ください。
switch(x){ case "東": document.write("海があるよ"); break;
ここでswitchが登場します。
switchのうしろのカッコ内に、変数「x」がありますね。
わかりやすく赤くします。
switch(x){ case "東": document.write("海があるよ"); break;
この変数「x」の中身が「東」なら、画面に「海があるよ」と表示されます。
breakで処理から脱出
よく見ると、breakと書かれています。
わかりやすく赤くします。
switch(x){ case "東": document.write("海があるよ"); break;
breakは、処理からの脱出を意味します。
つまり…
画面に「海があるよ」と表示されたあとは、switchの処理から脱出します。
脱出するので、それ以降の「山があるよ」「砂漠があるよ」「草原があるよ」「もう1回言って」などは表示されません。
「西」「南」「北」の場合
変数「x」の中身が「西」「南」「北」の場合も同じです。
それぞれ「山があるよ」「砂漠があるよ」「草原があるよ」という文字が、画面に表示されます。
どれにも一致しない場合
最後がこちら。
default: document.write("もう1回言って"); }
変数「x」の中身が「東」「西」「南」「北」のどれにも一致しない場合は、「もう1回言って」と表示されます。
以上が、switchを使った分岐処理でした～。
今回はこれでおしまいです。
JavaScriptの記事は、この記事も含めて「初心者のための超わかりやすいJavaScript入門」にまとめてあります。よろしければご覧ください。
