Wann man die switch-Anweisung benutzt, um HTML mit JavaScript zu programmieren - dummies

Obwohl die if-Anweisung häufig für einfache Auswahlen in JavaScript verwendet wird, wird die switch-Anweisung verwendet, um eine Reihe von Auswahlmöglichkeiten zu behandeln… Ein Schalter bietet eine elegante Möglichkeit, mit variablen Daten umzugehen. Es gibt zwei Arten von switch-Anweisungen.

Der erste bietet die Möglichkeit, mit einem vordefinierten Auswahlbereich zu arbeiten, und der zweite bietet die Möglichkeit, mit Daten zu arbeiten, die unerwartete Informationen enthalten könnten. Diese zweite Form macht die switch-Anweisung besonders nützlich, weil Benutzer unvorhersehbar sind, und diese zweite Form kann solche Benutzer berücksichtigen.

So erstellen Sie einen grundlegenden Schalter in JavaScript

Viele Entwickler bevorzugen switch-Anweisungen über geschachtelte if-Anweisungen, da die switch-Anweisungen leichter zu verstehen sind. Eine switch-Anweisung erfordert auch weniger Eingaben, um das gleiche Ergebnis zu erzielen.

Funktion CheckChoice (Option) {// Überprüfen Sie, ob die Eingabe eine Zahl ist. if (typeof (option)! = "number") {// Zeigt einen Fehlerdialog an. alert ("Bitte geben Sie eine numerische Eingabe ein!"); // Kehre zurück, ohne etwas mehr zu tun. return;} // Stellen Sie sicher, dass die Option tatsächlich eine ganze Zahl ist. var Wählen Sie = Mathematik. rund (Option); // Überprüfen Sie, ob die Eingabe im Bereich liegt. if ((Select 3)) {// Zeigt einen Fehlerdialog an. alert ("Der gelieferte Wert liegt außerhalb des gültigen Bereichs!"); // Kehre zurück, ohne etwas mehr zu tun. return;} // Eine Auswahl treffen. Schalter (Auswählen) {Fall 1: Dokument. getElementById ("Ergebnis"). innerHTML = "Sie haben Artikel A ausgewählt."; Unterbrechung; Fall 2: Dokument. getElementById ("Ergebnis"). innerHTML = "Sie haben Artikel B ausgewählt."; Unterbrechung; Fall 3: Dokument. getElementById ("Ergebnis"). innerHTML = "Sie haben Artikel C gewählt."; break;}}

Unabhängig davon, ob Sie eine switch-Anweisung oder eine geschachtelte if-Anweisung verwenden, müssen Sie eine Logik bereitstellen, um sicherzustellen, dass die Eingabe korrekt ist, andernfalls wird Ihre Anwendung höchstwahrscheinlich fehlschlagen. In diesem Fall ist der Fehler gleichbedeutend damit, dass die Anwendung gar nichts tut, aber das Konzept des Scheiterns ist das gleiche. Überprüfen Sie immer Ihre Eingaben auf korrekte Werte.

Manche Leute haben Schwierigkeiten zu verstehen, wo der Wahrheitswert in der switch-Anweisung liegt. Die switch-Anweisung erfordert eine Variable, die in diesem Fall Select ist. Jede case-Klausel führt einen Vergleich mit der Variablen durch. Infolgedessen können Sie die erste case-Klausel so sehen, dass case == 1 ist.

Wenn Sie mit switch-Anweisungen arbeiten, müssen Sie am Ende jedes Verarbeitungssegments auch eine break-Anweisung einfügen. Die break-Anweisung besagt lediglich, dass der Fall ausgewertet und bearbeitet wurde.

Wenn Sie die break-Anweisung verlassen, wird der Code im nächsten Fall mit der nächsten ausführbaren Anweisung fortgesetzt.Diese Bedingung ist bekannt als fall-through, , und einige Entwickler verwenden sie als Programmiertechnik, um Aufgaben zu kombinieren und die erforderliche Code-Menge zu reduzieren. Die Verwendung dieser Technik ist gefährlich, da andere Entwickler möglicherweise nicht erkennen, dass der Durchbruch erforderlich ist, und daher eine break-Anweisung für Sie hinzufügen können.

Verwendung der Standardoption von JavaScript

Die switch-Anweisung enthält eine weitere Klausel, die Standardklausel. Die Standardklausel ist wie die else-Klausel für die if-Anweisung. Wenn keine der case-Klauseln wahr ist, führt der Code den Code in der Standardklausel aus. Im folgenden Beispiel wird die Standardklausel verwendet, um die Funktionsweise des Beispiels zu ändern.

function MakeAChoice () {// Bitten Sie den Benutzer um Eingabe. var Selection = Eingabeaufforderung ("Eine Menüoption eingeben."); // Wandle die Zeichenfolge in eine Zahl um. var IntSelect = parseInt (Auswahl); // Überprüfen Sie, ob der Benutzer eine Nummer angegeben hat. if (isNaN (IntSelect)) {// Zeigt einen Fehlerdialog an. alert ("Bitte geben Sie eine numerische Eingabe ein!"); // Kehre zurück, ohne etwas mehr zu tun. return;} // Ruft die Auswahlfunktion auf. CheckChoice (IntSelect);}

Anstatt mehrere Schaltflächen bereitzustellen, verwendet dieses Beispiel das Dialogfeld Eingabeaufforderung (), um Eingaben vom Benutzer zu erhalten. Das Ergebnis ist die sauberere Schnittstelle. Wenn der Benutzer auf ein Menüelement auswählen klickt, zeigt die Anwendung eine Eingabeaufforderung () an, in der der Benutzer einen Wert eingeben kann.

Sie könnten denken, dass dies ein Rezept für eine Katastrophe ist, aber die Anwendung führt die gleichen Prüfungen für die Gültigkeit der Eingaben wie zuvor durch, verwendet aber eine andere Technik.

In diesem Fall verwendet die Anwendung partInt (), um zu überprüfen, ob es sich bei der Eingabe um eine Zahl handelt, und um die Zahl in einen ganzzahligen Wert umzuwandeln. Wenn die Eingabe nicht korrekt ist, wird IntSelect auf Not a Number (NaN) gesetzt. Im Beispiel wird dieses Problem mithilfe der Funktion isNaN () erkannt. Wenn ein Benutzer eine numerische Eingabe vornimmt, ruft die Anwendung CheckChoice () auf, was im folgenden Code gezeigt wird:

Funktion CheckChoice (Option) {// Eine Auswahl treffen. Schalter (Option) {Fall 1: Dokument. getElementById ("Ergebnis"). innerHTML = "Sie haben Artikel A ausgewählt."; Unterbrechung; Fall 2: Dokument. getElementById ("Ergebnis"). innerHTML = "Sie haben Artikel B ausgewählt."; Unterbrechung; Fall 3: Dokument. getElementById ("Ergebnis"). innerHTML = "Sie haben Artikel C gewählt."; Unterbrechung; Standard: // Zeigt einen Fehlerdialog an. alert ("Der gelieferte Wert liegt außerhalb des gültigen Bereichs!"); break;}}

Sie fragen sich vielleicht, wo der Rest des Codes ist, aber das ist alles, was Sie brauchen. Die switch-Anweisung sucht nach Werten von 1, 2 oder 3. Wenn die Werte außerhalb dieses Bereichs liegen, verwendet der Code die Standardklausel, die die Fehlermeldung außerhalb des gültigen Bereichs enthält. Wie Sie sehen können, erleichtern diese beiden Funktionen die Arbeit mit dem Menü für Entwickler und Benutzer erheblich.