JavaScript/Verzweigung

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Kontrollstrukturen sind Anweisungen, die wiederum Anweisungsblöcke enthalten. Dadurch ist es möglich, die Ausführung der in den Blöcken enthaltenen Anweisungen entsprechend bestimmter Regeln zu kontrollieren.

Man unterscheidet grundsätzlich zwei Arten von Kontrollstrukturen: Verzweigungen und Schleifen. Mittels Verzweigungen ist es möglich, die Ausführung einer oder mehrerer Anweisungs-Blöcke von Bedingungen abhängig zu machen (Fallunterscheidung). Schleifen ermöglichen, einen Anweisungs-Block wiederholt ausführen zu lassen.


Inhaltsverzeichnis

[Bearbeiten] Wenn-Dann-Bedingungen mit "if"

Sie können die Ausführung von Anweisungen von Bedingungen abhängig machen. In einer Verzweigung (bedingte Anweisung) wird ein Anweisungsblock nur durchlaufen, wenn eine Bedingung erfüllt ist. Alternativ kann beim Nichterfüllen der Bedingung ein zweiter Anweisungsblock durchlaufen werden.

  • JavaScript 1.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Beispiel: allgemeines Schema
    if (Ausdruck) {
        //Anweisungsblock des True-Zweigs (wird ausgeführt, wenn Bedingung erfüllt ist)
        Anweisung;
        Anweisung;
    } else {
        //Anweisungsblock des False-Zweigs (wird ausgeführt, wenn Bedingung nicht erfüllt ist)
        Anweisung;
        Anweisung;
    }


Mit if leiten Sie eine Wenn-Dann-Bedingung ein (if = wenn). Dahinter folgt, in Klammern stehend, die Formulierung der Bedingung. Um solche Bedingungen zu formulieren, brauchen Sie Vergleichsoperatoren und in den meisten Fällen auch Variablen. Für Fälle, in denen die Bedingung nicht erfüllt ist, können Sie einen "andernfalls"-Zweig definieren. Dies geschieht durch else (else = sonst). Der Else-Zweig ist nicht zwingend erforderlich.

Beachten Sie, wenn mehrere Anweisungen unterhalb und abhängig von if oder else folgen, diese immer in geschweifte Klammern eingeschlossen werden müssen (siehe auch den Abschnitt über Anweisungsblöcke).


Beispiel ansehen …
  function Geheim () {
    var Passwort = 'Traumtaenzer';
    var Eingabe = window.prompt('Bitte geben Sie das Passwort ein', '');
 
    if (Eingabe != Passwort) {
        alert('Falsches Passwort!');
    } else {
        location.href = 'geheim.htm';
    }
  }
Das Beispiel stellt eine einfache Passwortabfrage dar.

Das Script ist in einer Funktion namens Geheim() notiert, die aufgerufen wird, sobald die HTML-Datei vollständig geladen ist. Dazu ist im einleitenden <body>-Tag das onload Event-Attribut notiert. Innerhalb der Funktion fordert ein Dialogfenster (window.prompt()) den Anwender auf, das Passwort einzugeben. Der Rückgabewert von window.prompt(), das eingegebene Passwort, wird in der Variablen Eingabe gespeichert.

Mit if (Eingabe != Passwort) fragt das Script ab, ob die Eingabe anders lautet als der der Variablen Passwort zuvor zugewiesene Wert Traumtaenzer. Ist dies der Fall, sind also beide Werte nicht gleich, dann war die Eingabe falsch. In diesem Fall wird mit alert() eine entsprechende Meldung ausgegeben. Im anderen Fall (else), wenn Eingabe und Passwort den gleichen Wert haben, wird mit location.href eine andere Seite aufgerufen, nämlich die "geschützte" Seite.


Beachten Sie: Eine solche Passwortabfrage ist keine sinnvolle Möglichkeit, um Zugriffe auf eine Webseite zu kontrollieren. Denn das Passwort steht für jeden lesbar im Quelltext und die „geschützte“ Seite kann unter Umgehung der Passwortabfrage aufgerufen werden. Verwenden Sie deshalb in der Praxis zuverlässige Schutzmechanismen Zugriffsschutz auf Webseiten.

[Bearbeiten] Häufiges Problem

Oft passiert es, dass eine If-Abfrage nicht so funktioniert, wie erwartet. Egal auf welchen Wert geprüft wird, es wird immer in den If-Zweig gegangen und nicht wie vorhergesehen in den Else-Zweig. Das liegt mit hoher Wahrscheinlichkeit daran, dass man statt eines Vergleiches eine Zuweisung notiert hat.

Wenn Sie statt if(x == 1) die Zuweisung if(x = 1) notieren, wird diese erfolgreich mit true beantwortet.

Diesen Fehler können Sie mit der Vertauschung if(1 == x) vermeiden, da einer Zahl keine Variable zugewiesen werden kann.

[Bearbeiten] Einfache Entweder-Oder-Abfrage

Für einfache Entweder-Oder-Bedingungen gibt es eine spezielle Syntax, die Sie alternativ zur if/else-Anweisung verwenden können.

  • JavaScript 1.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Beispiel ansehen …
    function Antwort () {
      var Ergebnis = (document.Formular.Eingabe.value == '42') ? 'RICHTIG!' : 'FALSCH!';
      var text = 'Die Antwort ist ' + Ergebnis;
      var ausgabe = document.getElementById('ausgabe');
      ausgabe.innerHTML = text;
    }


Das Beispiel enthält eine JavaScript Funktion namens Antwort(). Aufgerufen wird diese Funktion, wenn der Anwender in dem Formular auf den Klick-Button mit der Aufschrift OK klickt, und zwar mit dem click-Event. Die Funktion prüft, ob der Wert des Eingabefeldes im Formular (document.Formular.Eingabe.value) den Wert 42 hat. Abhängig davon wird der Variablen Ergebnis entweder der Wert RICHTIG! oder FALSCH! zugewiesen. Anschließend wird ein entsprechender Satz zusammengesetzt (siehe dazu auch Operator für Zeichenkettenverknüpfung) und ausgegeben.

Eine einfache Entweder-Oder-Abfrage wird mit einer Bedingung eingeleitet. Die Bedingung muss in Klammern stehen, im Beispiel (document.Formular.Eingabe.value == "42"). Dahinter wird ein Fragezeichen notiert. Hinter dem Fragezeichen wird ein Wert angegeben, der aktuell ist, wenn die Bedingung erfüllt ist. Dahinter folgt ein Doppelpunkt, und dahinter ein Wert für den Fall, dass die Bedingung nicht erfüllt ist. Da es sich um Werte handelt, die für die Weiterverarbeitung nur sinnvoll sind, wenn sie in einer Variablen gespeichert werden, wird einer solchen Entweder-Oder-Abfrage in der Regel eine Variable vorangestellt, im Beispiel die Variable Ergebnis. Der Variablen wird durch diese Art von Anweisung das Ergebnis der Entweder-Oder-Abfrage zugewiesen.

Um Bedingungen zu formulieren, brauchen Sie Vergleichsoperatoren.

[Bearbeiten] Fallunterscheidung mit "switch"

Mit if und else können Sie genau zwei Fälle unterscheiden. Wenn Sie feiner differenzieren, also zwischen mehreren Fällen unterscheiden wollen, können Sie zwar mehrere if-Abfragen hintereinander notieren, aber es gibt noch eine elegantere Möglichkeit: die Fallunterscheidung mit "switch".

  • JavaScript 1.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Beispiel ansehen …
var Eingabe = window.prompt('Geben Sie eine Zahl zwischen 1 und 4 ein:', ''),
    text = '';
 
switch (Eingabe) {
    case "1":
        text = 'Sie sind sehr bescheiden!';
        break;
    case "2":
        text = 'Sie sind ein aufrichtiger Zweibeiner!';
        break;
    case "3":
        text = 'Sie haben ein Dreirad gewonnen!';
        break;
    case "4":
        text = 'Gehen Sie auf allen Vieren und werden Sie bescheidener!';
        break;
    default:
        text = 'Sie bleiben leider dumm!';
        break;
}
 
var ausgabe = document.getElementById('ausgabe');
ausgabe.innerHTML = text;


Mit switch leiten Sie eine Fallunterscheidung ein (switch = Schalter). Dahinter folgt, in runde Klammern eingeschlossen, eine Variable oder ein Ausdruck, für dessen aktuellen Wert Sie die Fallunterscheidung durchführen. Im Beispiel ist das die Variable mit dem Namen Eingabe. Diese Variable wird vor der Fallunterscheidung mit einem Wert versorgt, denn ein Dialogfenster (window.prompt()) mit einem Eingabefeld fordert den Anwender auf, eine Zahl zwischen 1 und 4 einzugeben. Der eingegebene Wert wird in Eingabe gespeichert.

Die einzelnen Fälle, die Sie abfragen möchten, werden innerhalb geschweifter Klammern notiert. Jeden einzelnen Fall leiten Sie mit case ein (case = Fall). Dahinter folgt die Angabe des Wertes, auf den Sie prüfen wollen. Die Anweisung case "1": im obigen Beispiel bedeutet dann so viel wie: 'wenn die Variable Eingabe den Wert "1" hat'. Im Beispiel wird für jeden Fall eine individuelle Meldung ausgegeben.

Wichtig ist dabei auch das Wort break am Ende jedes Falls (break = abbrechen). Wenn Sie das Wort weglassen, werden nämlich alle nachfolgenden Fälle auch ausgeführt, aber das wollen Sie ja in der Regel nicht.

Für den Fall, dass keiner der definierten Fälle zutrifft, können Sie am Ende der Fallunterscheidung den Fall default: definieren. Die darunter stehenden Anweisungen werden ausgeführt, wenn keiner der anderen Fälle zutrifft.

[Bearbeiten] Besonderheit: gleiche Anweisungen

Manchmal soll für verschiedene Werte der Fallunterscheidung derselbe Code ausgeführt werden. Dazu setzen Sie einfach die entsprechenden Fälle untereinander.

Beispiel ansehen …
var Eingabe = window.prompt('Geben Sie eine Zahl zwischen 1 und 6 ein:', ''),
    text = 'Ihre Eingabe ist ';
 
switch (Eingabe) {
    case "1":
	text += 'weder eine Prim- noch eine zusammengesetzte Zahl.';
	break;
    case "2":
    case "3":
    case "5":
	text += 'eine Primzahl.';
	break;
    case "4":
    case "6":
	text += 'eine zusammengesetzte Zahl.';
	break;
    default:
	text = 'Ungültige Eingabe';
	break;
}


[Bearbeiten] Besonderheit: Wertebereiche

Soll anstelle eines exakten Wertes ein Wertebereich geprüft werden, muss der Code wie folgt aussehen:

  • JavaScript 1.2
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Beispiel
var Eingabe = window.prompt('Geben Sie eine Zahl zwischen 50 und 100 ein:', ''),
    text = '';
 
switch (true) {
    case (Eingabe < 50):
         text = 'Die Zahl ' + Eingabe + ' ist eindeutig zu klein.';
         break;
    case (Eingabe > 100):
         text = 'Die Zahl ' + Eingabe + ' ist eindeutig zu groß.';
         break;
    default:
         text = 'Na bitte, Sie haben die Aufgabe verstanden!';
         break;
}

Anders als in anderen Programmiersprachen, die einen Wertebereich in bedingten Anweisungen akzeptieren, sind in JavaScript zwei Dinge besonders auffällig:

1.) Die Variable, deren Wert man unterscheiden möchte, wird nicht in die runde Klammer hinter dem Wort switch geschrieben, sondern in runde Klammern hinter dem Wort case.
2.) Da die aufgeführten Fälle immer boolsche Ausdrücke überprüfen, muss in die runde Klammer hinter dem Wort switch das Wort true geschrieben werden, weil die Bedingung einer dieser Fälle erfüllt sein muss.


Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML