JavaScriptのswitch文を利用した条件分岐処理を紹介します。
書式
switch文の書式は次の通りです。
switch(判定する変数)
{
case 条件1:
...(処理);
break;
case 条件2:
...(処理);
break;
...
default:
...(処理);
break;
}
「判定する変数」の値をcase文で判定し、条件と一致する場合はcaseに続く処理を実行します。どの条件にも当てはまらなかった場合は、default:ブロック内の処理を実行します。
JavaScriptではcaseブロックの中にbreak,returnといったswitch文から抜ける記述は必須ではありません。(C#では必須)
break,returnがない場合は次のcase文を実行する動作になります(下記コード例参照)。
コード例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" language="javascript">
function onButtonClick() {
var target = document.getElementById("output");
var value = Number(document.form1.textBox1.value);
target.innerHTML = "";
switch (value) {
case 1:
target.innerHTML = "りんご";
break;
case 2:
target.innerHTML = "みかん";
break;
case 3:
target.innerHTML = "ぶどう";
break;
case 4:
target.innerHTML = "なし";
break;
case 5:
target.innerHTML = "すいか";
break;
default:
target.innerHTML = "値が範囲外です！";
break;
}
}
</script>
</head>
<body>
<form name="form1" action="">
<div>1～5を入力して下さい</div>
<input name="textBox1" type="text" value="" />
<input type="button" value="Exec" onclick="onButtonClick();" />
</form>
<div id="output"></div>
</body>
</html>
実行結果
ページ表示直後の画面です。
テキストボックスに3を入力して、[Exec]ボタンをクリックしたときの実行結果です。「ぶどう」が表示されます。
テキストボックスに3を入力して、[Exec]ボタンをクリックしたときの実行結果です。defaultのswitchセレクタが実行され「値が範囲外です」のメッセージが表示されます。
breakが無い場合
caseにbreak文が無い場合の例です。
コード例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" language="javascript">
function onButtonClick() {
var target = document.getElementById("output");
var value = Number(document.form1.textBox1.value);
target.innerHTML = "";
switch (value) {
case 1:
target.innerHTML = target.innerHTML + "りんご";
case 2:
target.innerHTML = target.innerHTML + "みかん";
case 3:
target.innerHTML = target.innerHTML + "ぶどう";
case 4:
target.innerHTML = target.innerHTML + "なし";
case 5:
target.innerHTML = target.innerHTML + "すいか";
default:
target.innerHTML = target.innerHTML + "値が範囲外です！";
}
}
</script>
</head>
<body>
<form name="form1" action="">
<div>1～5を入力して下さい</div>
<input name="textBox1" type="text" value="" />
<input type="button" value="Exec" onclick="onButtonClick();" />
</form>
<div id="output"></div>
</body>
</html>
実行結果
break文がない場合は、該当したcaseから下をすべて実行する動作になります。
著者
iPentecのメインプログラマー
C#, ASP.NET の開発がメイン、少し前まではDelphiを愛用
最終更新日: 2023-12-09
作成日: 2011-06-13
