JSチュートリアル

JSホーム JSの紹介 JSどこへ JS出力 JSステートメント JS構文 JSコメント JS変数 JS Let JSConst JSオペレーター JS算術 JS割り当て JSデータ型 JS関数 JSオブジェクト JSイベント JS文字列 JS文字列メソッド JS文字列検索 JS文字列テンプレート JS番号 JS番号メソッド JSアレイ JS配列メソッド JS配列ソート JSアレイの反復 JSアレイ定数 JSの日付 JSの日付形式 JS DateGetメソッド JS日付設定メソッド JS数学 JSランダム JSブール値 JSの比較 JS条件 JSスイッチ JSループFor JSループフォーイン JSループの JSループWhile JSブレイク JSIterables JSセット JSマップ JS Typeof JS型変換 JSビット単位 JS RegExp JSエラー JSスコープ JSホイスト JS厳密モード JSこのキーワード JSアロー関数 JSクラス JS JSON JSデバッグ JSスタイルガイド JSのベストプラクティス JSの間違い JSパフォーマンス JS予約語

JSバージョン

JSバージョン JS 2009(ES5) JS 2015(ES6) JS 2016 JS 2017 JS 2018 JS IE /エッジ JSの歴史

JSオブジェクト

オブジェクト定義 オブジェクトのプロパティ オブジェクトメソッド オブジェクト表示 オブジェクトアクセサー オブジェクトコンストラクター オブジェクトのプロトタイプ オブジェクト反復可能 オブジェクトセット オブジェクトマップ オブジェクトリファレンス

JS関数

関数の定義 関数パラメーター 関数の呼び出し 関数呼び出し 機能適用 関数クロージャ

JSクラス

クラスイントロ クラス継承 クラス静的

JS非同期

JSコールバック JS非同期 JSの約束 JS Async / Await

JS HTML DOM

DOMイントロ DOMメソッド DOMドキュメント DOM要素 DOM HTML DOMフォーム DOM CSS DOMアニメーション DOMイベント DOMイベントリスナー DOMナビゲーション DOMノード DOMコレクション DOMノードリスト

JSブラウザBOM

JSウィンドウ JS画面 JSロケーション JSの歴史 JSナビゲーター JSポップアップアラート JSタイミング JSクッキー

JS Web API

WebAPIイントロ WebフォームAPI Web履歴API WebストレージAPI WebワーカーAPI Web Fetch API Web Geolocation API

JS AJAX

AJAXイントロ AJAX XMLHttp AJAXリクエスト AJAX応答 AJAXXMLファイル AJAX PHP AJAX ASP AJAXデータベース AJAXアプリケーション AJAXの例

JS JSON

JSONイントロ JSON構文 JSONとXML JSONデータ型 JSON解析 JSON文字列化 JSONオブジェクト JSON配列 JSONサーバー JSON PHP JSON HTML JSON JSONP

JSとjQuery

jQueryセレクター jQuery HTML jQuery CSS jQuery DOM

JSグラフィックス

JSグラフィックス JSキャンバス JSPlotly JS Chart.js JSグーグルチャート JS D3.js

JSの例

JSの例 JS HTML DOM JSHTML入力 JSHTMLオブジェクト JSHTMLイベント JSブラウザ JSエディター JS演習 JSクイズ JS証明書

JSリファレンス

JavaScriptオブジェクト HTMLDOMオブジェクト


JavaScriptSwitchステートメント_


ステートメントは、switchさまざまな条件に基づいてさまざまなアクションを実行するために使用されます。


JavaScriptSwitchステートメント

switchステートメントを使用して、実行する多くのコードブロックの1つを選択します。

構文

switch(expression) {
  case x:
    // code block
    break;
  case y:
    // code block
    break;
  default:
    // code block
}

仕組みは次のとおりです。

  • スイッチ式は1回評価されます。
  • 式の値は、各ケースの値と比較されます。
  • 一致するものがある場合、関連するコードブロックが実行されます。
  • 一致するものがない場合、デフォルトのコードブロックが実行されます。

このgetDay()メソッドは、平日を0から6までの数値として返します。

(日曜日= 0、月曜日= 1、火曜日= 2 ..)

この例では、曜日番号を使用して曜日名を計算します。

switch (new Date().getDay()) {
  case 0:
    day = "Sunday";
    break;
  case 1:
    day = "Monday";
    break;
  case 2:
     day = "Tuesday";
    break;
  case 3:
    day = "Wednesday";
    break;
  case 4:
    day = "Thursday";
    break;
  case 5:
    day = "Friday";
    break;
  case 6:
    day = "Saturday";
}

1日の結果は次のようになります。

Saturday


休憩キーワード

JavaScriptがbreak キーワードに到達すると、スイッチブロックから抜け出します。

これにより、スイッチブロック内の実行が停止します。

スイッチブロックの最後のケースを壊す必要はありません。とにかく、ブロックはそこで壊れます(終了します)。

注: breakステートメントを省略すると、評価がケースと一致しなくても、次のケースが実行されます。


デフォルトのキーワード

defaultキーワードは、大文字と小文字が一致しない場合に実行するコードを指定します

このgetDay()メソッドは、平日を0から6までの数値として返します。

今日が土曜日(6)でも日曜日(0)でもない場合は、デフォルトのメッセージを記述します。

switch (new Date().getDay()) {
  case 6:
    text = "Today is Saturday";
    break;
  case 0:
    text = "Today is Sunday";
    break;
  default:
    text = "Looking forward to the Weekend";
}

テキストの結果は次のようになります。

Today is Saturday

ケースは、スイッチブロックの最後のdefaultケースである必要はありません。

switch (new Date().getDay()) {
  default:
    text = "Looking forward to the Weekend";
    break;
  case 6:
    text = "Today is Saturday";
    break;
  case 0:
    text = "Today is Sunday";
}

defaultがスイッチブロックの最後のケースでない場合は、デフォルトのケースをブレー​​クで終了することを忘れないでください。


一般的なコードブロック

場合によっては、異なるスイッチケースで同じコードを使用する必要があります。

この例では、ケース4と5は同じコードブロックを共有し、0と6は別のコードブロックを共有します。

switch (new Date().getDay()) {
  case 4:
  case 5:
    text = "Soon it is Weekend";
    break;
  case 0:
  case 6:
    text = "It is Weekend";
    break;
  default:
    text = "Looking forward to the Weekend";
}

切り替えの詳細

複数のケースがケース値と一致する場合、最初のケースが選択されます。

一致するケースが見つからない場合、プログラムはデフォルトのラベルに進みます。

デフォルトのラベルが見つからない場合、プログラムは切り替え後のステートメントに進みます。


厳密な比較

スイッチケースは厳密な比較を使用します(===)。

一致させるには、値が同じタイプである必要があります。

厳密な比較は、オペランドが同じタイプの場合にのみ真になります。

この例では、xに一致するものはありません。

let x = "0";
switch (x) {
  case 0:
    text = "Off";
    break;
  case 1:
    text = "On";
    break;
  default:
    text = "No value found";
}

エクササイズで自分をテストする

エクササイズ:

が「バナナ」の場合は「こんにちは」、 「リンゴ」の場合は「ようこそ」switchを警告するステートメントを作成します。fruitsfruits

(fruits) {
  "Banana":
    alert("Hello")
    break;
  "Apple":
    alert("Welcome")
    break;    
}