Jetzt anmelden...

Login
Passwort
Registrieren

JavaScript Tutorial #5

Switch case in JavaScript einsetzen

Mehrfachverzweigungen sind in der Programmierung nicht nur mit else if möglich. Gerade bei der Unterscheidung nach vielen Fällen lohnt sich aus Gründen der Übersicht der Einsatz einer switch-case-Anweisung.

Kommentare [0] 57 Views

Stefan 05.12.2019

Infos zum Artikel

Kategorie JavaScript
Autor Stefan
Datum 05.12.2019

Thema in Kurzform

  • Beispiel für eine switch-case-Anweisung in JavaScript:
    var zahl = 2;
    
    switch(zahl){
        case 1:
            document.write("Eins");
            break;
    
        case 2:
            document.write("Zwei");
            break;
    
        // usw.
    
    }
    

Erklärung switch-case-Kontrollstruktur

Um eine switch-case-Kontrollstruktur aufzubauen, benötigen wir die beiden Schlüsselbegriffe switch und case und setzen sie wie folgt ein:

var zahl = 2;

switch(zahl){
    case 1:
        document.write("Eins");
        break;

    case 2:
        document.write("Zwei");
        break;

    case 3:
        document.write("Drei");
        break;

    case 4:
        document.write("Vier");
        break;

}

Das Ganze läuft nun so ab:

Wir übergeben die Variable zahl in runden Klammern dem switch-Codeblock. Dieser switch-Wert wird nun nacheinander mit mehreren anderen Werten verglichen.

Jeder Vergleich wird mit dem Schlüsselwort case (engl. "Fall") beschrieben. Stimmt der switch-Wert mit einem case-Wert überein, wird die entsprechende Anweisung ausgeführt.

In unserem Beispiel wird also das zweite case "getroffen" und es wird die Anweisung document.write("Zwei"); ausgeführt.

  • JavaScript ebook

break

Sicherlich ist Ihnen das Schlüsselwort break schon aufgefallen. Dieses ist zwar optional, doch für einen erwartungsgemäßen Ablauf unserer Programme in der Regel notwendig.

Was bewirkt break?

  • Die break-Anweisung bewirkt das sofortige Ende der gesamten switch-case-Kontrollstruktur.

Das heißt für unser Beispiel: Sobald ein case "getroffen" wird, werden alle dazugehörenden Anweisungen bis zum nächsten break ausgeführt.

Ohne den Einsatz von break, würde der Code also einfach weiterlaufen.

Modifizieren wir unser Beispiel einmal und entfernen das break beim zweiten case. Was wird nun am Bildschirm angezeigt?

var zahl = 2;

switch(zahl){
    case 1:
        document.write("Eins");
        break;

    case 2:
        document.write("Zwei");

    case 3:
        document.write("Drei");
        break;

    case 4:
        document.write("Vier");
        break;

}

Die Anweisung von case 2 wird ausgeführt. Da hier aber nun die break-Anweisung fehlt, wird der switch-case-Block nicht beendet, sondern bei case 3 einfach fortgeführt. Erst hiernach stoppt die Kontrollstruktur, da case 3 am Ende ein break besitzt.

Im Browser wird also angezeigt:

ZweiDrei

default

Trifft keiner der Fälle zu, kann man mit default: alle restlichen Fälle abfangen:

    var zahl = 5;

    switch(zahl){
        case 1:
            document.write("Eins");
            break;

        case 2:
            document.write("Zwei");
            break;

        case 3:
            document.write("Drei");
            break;

        case 4:
            document.write("Vier");
            break;

        default:
            document.write("Alle anderen");

    }

Da der switch-Wert 5 mit keinem case-Vergleichswert übereinstimmt, wird der Code nach default ausgeführt.

Das Nassi-Shneiderman-Diagramm zu unserer switch-case-Struktur inkl. default-Anweisung sieht dann so aus:

Switch case Diagramm

Übungen

einfach

Was wird am Ende des Codes im Browser angezeigt?

var name = "Marcus";

switch(name){
    case "Paul":
        document.write("A");
        break;

    case "Albert":
        document.write("B");
        break;

    case "Peter":
        document.write("C");
        break;

    default:
        document.write("D");

}
Lösung ein-/ausblenden

mittel

Welchen Wert hat die Variable x am Ende des Codes?

var a = "A";
var x = 0;


switch (a){
    case "A":
    case "B": x++;
    case "C": x++; break;
    case "D":
    case "E": x++;
}
Lösung ein-/ausblenden

Falconbyte unterstützen

Kommentar schreiben

Nur angemeldete und aktivierte Benutzer können kommentieren.

Alle Kommentare

Es gibt bislang noch keine Kommentare zu diesem Thema.

Variablen in JavaScript

Lernen sie heute, wie Sie Variablen in JavaScript erstellen und einsetzen.

FALCONBYTE.NET

Handmade with 🖤️

© 2018-2020 Stefan E. Heller

Impressum | Datenschutz

facebook programmieren lernen twitter programmieren lernen youtube programmieren lernen