条件分岐 - switch文 - web-0127のブログ

switch文

値に応じて処理を分岐する
「（）」の値に対応する case文にジャンプし、break文でブロックを抜けます

文字列を数値に変換するNumber関数

入力ダイアログボックスを表示する promptメソッドの戻り値は文字列です
戻り値を数値として扱うには、文字列を数値に変換する必要があります
通常は「Number関数（Numberはオブジェクトですが、関数として扱うことができます）」を使用します
関数は、ひとまとまりの処理を名前（関数名）で呼び出せるよにしたもの
関数は、メソッドと同じ様に引数を処理して値を返します

変数の値が文字列のままでも、switch文で扱うことができます。

switch(month) {
  case '12':
  case '1':
  case '2':
　　…

JavaScriptでは、比較演算子で数を表す文字列を比較しようとすると、自動的に数値に変換された上で比較されます。

default;

どのcase文の値にも一致しない場合は「default;」へジャンプ

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>switch文で月を判定する</title>
</head>
<body>
<script>
var month;

function season() {
month = prompt('月を入力してください', '1から12の値を半角数字を入力');

month = Number(month);
switch(month) {
  case 12:
  case 1:
  case 2:
    document.write("<h1>冬です。</h1>");
  break;
		
  case 3:
  case 4:
  case 5:
    document.write("<h1>春です。</h1>");
  break;

  case 6:
  case 7:
  case 8:
    document.write("<h1>夏です。</h1>");
  break;
		
  case 9:
  case 10:
  case 11:
    document.write("<h1>秋です。</h1>");
  break;
		
  default:
    document.write("<h1>1から12の値を入力してください</h1>");
}

}
</script>
<h1>月別に季節を判別</h1>
<p>ボタンをクリックすると月を入力するウインドウが表示されます。</p>
<p><button onclick='season()'>月別に季節を判別する</button></p>
</body>
</html>

繰り返し処理

「i++」を記述

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>繰り返し処理</title>
<script>
var i = 1;
function ans(){
  switch (i){
    case 1:
      alert("【ヒント】北海道は県ではありません");
      break;
    case 2:
      alert("【ヒント】東北地方にある県です");
      break;
    default:
      alert("答えは岩手県です");
  }
i++;
}
</script>
</head>
<body>
<h3>（問題）</h3>
<p>日本で最も面積が大きい“県”は何県でしょう？</p>
<p><button onclick="ans()">答えを見る</button></p>
<p>
※ボタンのクリックが2回までの間はヒントが表示されます。<br>
※ボタンを3回以上クリックすると、答えが表示されます。
</p>
</body>
</html>

まとめ

値に応じて対応する case文にジャンプする switch文
switch文のブロックを抜けるには、break文を使う
文字列を数値に変換する Number関数