ywork2020.com

Title

任意に設定した複数の条件で実行処理を制御する

目次 (INDEX)

switch制御文の概要

switch とは次ような意味の単語です。
switch
読み: スイッチ
意味: 電気回路の開閉器

switch制御文は複数の任意の状況を設定しておき、その状況にマッチした結果があれば、それに続くコードを実行するための制御文です。

目次に戻る

switch制御文の解説

上記の概要のように一言で説明すると分かりにくいので少しずつ説明します。
まず、はじめに構文を見ていきましょう。

switch (key) {
	case value1:
		処理コード;
		break;
	
	case value2:
		処理コード;
		break;
	...
	case valueN:
		処理コード;
		break;
	default:
		どのケースにも当てはまらない場合の処理コード;
		break;
}

switch(key)でスイッチ文を書き始めるわけですが、keyの部分に判定対象の値、または式を書きます。

次に{}内のブロックにcase valueがありますが、valueの部分がkeyと一致するか判定する値となります。 keyの値とvalueの値が一致すれば、それ以降のコードを順次実行していきます。

任意の処理の終りで、switch文を抜ける場合にはbreak文を書いておき、switch文を終了する必要があります。 break文を無くした場合、その後のcase節からの判定は実行されず、その後のコードが順次、実行されていきます。 この特性を利用して、複数のcase節を連続して記述しておき、複数の条件で同じ処理を実行するなどの技法が可能となります。

最後のdefault節は、どのcase節にも当てはまらなかった場合に実行されるコードを書いておきます。 これは習慣的に最後に記述することが一般的ですが、どの場所に記述しても問題ありません。

目次に戻る

実機サンプル

このサンプルではselect要素のリストから選択された項目に見合った参考書の画像を表示します。

実行: id="idSelect"

答え: id="idAnswer"
セレクトボックスで項目を選択して下さい。

目次に戻る

サンプルコード

<body>
	<select id="idSelect" onchange="evtName(this.value)">
		<option>項目を選択して下さい</option>
		<option>HTML</option>
		<option>CSS</option>
		<option>javascript</option>
	</select>
	<output id="idAnswer">セレクトボックスで項目を選択して下さい。</output>
	<script>...</script>
</body>
<script>
	document.open();
	let elmSelect = document.getElementById("idSelect");
	let elmAnswer = document.getElementById("idAnswer");
	function evtName(value){
		switch(value){
			case "HTML":
				elmAnswer.innerHTML = img要素1;
				break;
			case "CSS":
				elmAnswer.innerHTML = img要素2;
				break;
			case "javascript":
				elmAnswer.innerHTML = img要素3;
				break;
			default:
				elmAnswer.innerHTML = 'セレクトボックスで項目を選択して下さい。';
				break;
		}
	}
	document.close();
</script>

目次に戻る

サンプルコードの要点

  1. select要素にid="idSelect"で識別子を設定しています。
  2. 同じく、select要素にonchange="evtName(this.value)"でチェンジイベントを設定しています。
    関数名evtNameの引数にthis.valueでselect要素の選択された値を設定しています。
  3. switch文の引数には前項のthis.valueの値が使われます
  4. case節に一致した画像がoutput要素の id="idAnswer"に出力されます。

目次に戻る