JS-zelfstudie

JS HOME JS Introductie JS Waarheen? JS-uitgang JS-verklaringen JS-syntaxis JS-opmerkingen JS-variabelen JS Let JS Const JS-operators JS Rekenen JS-opdracht JS-gegevenstypen JS-functies JS-objecten JS-evenementen JS-snaren JS String-methoden JS String zoeken JS String-sjablonen JS-nummers JS-nummermethoden JS-arrays JS-array-methoden JS-array sorteren JS-array-iteratie JS Array Const JS-datums JS-datumnotaties JS Datum Ophaalmethoden Methoden voor het instellen van JS-datum JS Math JS Willekeurig JS Booleans JS-vergelijkingen JS-voorwaarden JS-schakelaar JS Loop For JS-lus voor binnen JS Loop For Of JS-lus terwijl JS Break JS-iteraties JS-sets JS-kaarten JS Typeof JS Type conversie JS Bitwise JS RegExp JS-fouten JS-bereik JS Hijsen JS strikte modus JS dit trefwoord JS-pijlfunctie JS-lessen JS JSON JS-foutopsporing JS-stijlgids JS-best practices JS-fouten JS-prestaties JS Gereserveerde Woorden

JS-versies

JS-versies JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Edge JS-geschiedenis

JS-objecten

Objectdefinities Objecteigenschappen Objectmethoden Objectweergave Objectaccessoires Objectconstructeurs Objectprototypes Object-Iterables Objectsets Objectkaarten Objectreferentie

JS-functies

Functiedefinities Functieparameters: Functie-aanroep Functie-oproep: Functie Toepassen Functie Sluitingen

JS-lessen

Klas Intro Klasse Overerving Klasse Statisch

JS Asynchrone

JS-callbacks JS asynchroon JS belooft JS Async/Wachten

JS HTML DOM

DOM Intro DOM-methoden DOM-document DOM-elementen DOM HTML DOM-formulieren DOM-CSS DOM-animaties DOM-evenementen DOM-gebeurtenisluisteraar DOM-navigatie DOM-knooppunten DOM-collecties DOM-knooppuntlijsten

JS-browserstuklijst

JS-venster JS-scherm JS-locatie JS-geschiedenis JS-navigator JS pop-upwaarschuwing JS-timing JS-koekjes

JS Web API's

Introductie web-API Web Forms API Webgeschiedenis-API Webopslag-API Web Worker-API Web Fetch-API Webgeolocatie-API

JS AJAX

Ajax-intro AJAX XMLHttp Ajax-verzoek Ajax-reactie AJAX XML-bestand AJAX PHP Ajax ASP AJAX-database AJAX-toepassingen Ajax-voorbeelden

JS JSON

JSON-intro JSON-syntaxis JSON versus XML JSON-gegevenstypen JSON ontleden JSON Stringify JSON-objecten JSON-arrays JSON-server JSON PHP JSON HTML JSON JSONP

JS versus jQuery

jQuery-kiezers jQuery HTML jQuery CSS jQuery DOM

JS-graphics

JS-graphics JS Canvas JS Plotly JS Chart.js JS Google-kaart JS D3.js

JS-voorbeelden

JS-voorbeelden JS HTML DOM JS HTML-invoer JS HTML-objecten JS HTML-evenementen JS-browser JS-editor JS-oefeningen JS-quiz JS-certificaat

JS-referenties

JavaScript-objecten HTML DOM-objecten


JavaScript - schakelverklaring


De switchverklaring wordt gebruikt om verschillende acties uit te voeren op basis van verschillende voorwaarden.


De JavaScript Switch-verklaring

Gebruik de switchinstructie om een ​​van de vele codeblokken te selecteren die moeten worden uitgevoerd.

Syntaxis

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

Dit is hoe het werkt:

  • De switch-expressie wordt één keer geëvalueerd.
  • De waarde van de uitdrukking wordt vergeleken met de waarden van elk geval.
  • Als er een overeenkomst is, wordt het bijbehorende codeblok uitgevoerd.
  • Als er geen overeenkomst is, wordt het standaard codeblok uitgevoerd.

Voorbeeld

De getDay()methode retourneert de weekdag als een getal tussen 0 en 6.

(zondag=0, maandag=1, dinsdag=2 ..)

In dit voorbeeld wordt het weekdagnummer gebruikt om de naam van de weekdag te berekenen:

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";
}

Het resultaat van de dag zal zijn:

Saturday


De pauze Trefwoord

Wanneer JavaScript een break trefwoord bereikt, breekt het uit het schakelblok.

Dit stopt de uitvoering binnen het schakelblok.

Het is niet nodig om het laatste geval in een schakelblok te breken. Het blok breekt (eindigt) daar toch.

Opmerking: Als u de break-instructie weglaat, wordt de volgende case uitgevoerd, zelfs als de evaluatie niet overeenkomt met de case.


Het standaard trefwoord

Het defaultsleutelwoord specificeert de code die moet worden uitgevoerd als er geen case match is:

Voorbeeld

De getDay()methode retourneert de weekdag als een getal tussen 0 en 6.

Als het vandaag noch zaterdag (6) noch zondag (0) is, schrijf dan een standaardbericht:

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";
}

Het resultaat van tekst is:

Today is Saturday

Het defaultgeval hoeft niet het laatste geval in een schakelblok te zijn:

Voorbeeld

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";
}

Als defaultdit niet het laatste geval in het schakelblok is, vergeet dan niet om het standaardgeval met een pauze te beëindigen.


Gemeenschappelijke codeblokken

Soms wilt u dat verschillende schakelkasten dezelfde code gebruiken.

In dit voorbeeld delen 4 en 5 hetzelfde codeblok en delen 0 en 6 een ander codeblok:

Voorbeeld

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";
}

Overstapdetails

Als meerdere casussen overeenkomen met een casuswaarde, wordt de eerste casus geselecteerd.

Als er geen overeenkomende gevallen worden gevonden, gaat het programma verder naar het standaardlabel .

Als er geen standaardlabel wordt gevonden, gaat het programma verder met de instructie(s) na de switch .


Strikte vergelijking:

Schakelkasten gebruiken strikte vergelijking (===).

De waarden moeten van hetzelfde type zijn om overeen te komen.

Een strikte vergelijking kan alleen waar zijn als de operanden van hetzelfde type zijn.

In dit voorbeeld is er geen match voor x:

Voorbeeld

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

Test jezelf met oefeningen

Oefening:

Maak een switchstatement dat "Hallo" waarschuwt als fruitshet "banaan" is en "Welkom" als fruitshet "appel" is.

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