SELFHTML: JavaScript / Sprachelemente / Bedingte Anweisungen (if-else/switch)
Author: Redaktion SELFHTML, selfhtml81@selfhtml.org
Description: Welche Aufgaben bedingte Anweisungen haben und wie Sie solche Anweisungen in JavaScript notieren.
Keywords: SELFHTML, JavaScript, if, else, switch, case, bedingte Anweisungen
Date: 2005-09-20T06:02:21+02:00

| # Bedingte Anweisungen (if-else/switch)
| Wenn-Dann-Bedingungen mit "if" Einfache Entweder-Oder-Abfrage Fallunterscheidung mit "switch"

## Wenn-Dann-Bedingungen mit "if"

Sie können die Ausführung von Anweisungen von Bedingungen abhängig machen.

### Beispiel:

Anzeigebeispiel: So sieht's aus (Passwort = Traumtaenzer)

    <html><head><title>Test</title>
    <script type="text/javascript">
    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";
      }
    }
    </script>
    </head><body onload="Geheim()">
    <h1>Hier kommen Sie nur mit Passwort rein ;-)</h1>
    </body></html>

### Erläuterung:

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 der Event-Handler `onload` 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.

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. Wenn Sie mehr als eine Anweisung unterhalb und abhängig von `if` oder `else` notieren wollen, müssen Sie die Anweisungen in geschweifte Klammern einschließen (siehe auch den Abschnitt über Anweisungsblöcke).

### Beachten Sie:

Eine Passwortabfrage wie im Beispiel stellt keine zuverlässige Möglichkeit dar, 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 "richtige" Schutzmechanismen wie beispielsweise eine Zugriffskontrolle mit .htaccess.

## 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.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <html><head><title>Test</title>
    <script type="text/javascript">
    function Antwort () {
      var Ergebnis = (document.Formular.Eingabe.value == "42") ? "RICHTIG!" : "FALSCH!";
      document.Formular.Eingabe.value = "Die Antwort ist " + Ergebnis;
    }
    </script>
    </head><body>
    <h1>Der Sinn des Lebens</h1>
    <form name="Formular">
    <p>Was ist der Sinn des Lebens?</p>
    <input type="text" name="Eingabe" size="40">
    <input type="button" value="OK" onclick="Antwort()">
    </form>
    </body></html>

### Erläuterung:

Das Beispiel enthält eine JavaScript- Funktion namens `Antwort()`. Aufgerufen wird diese Funktion, wenn der Anwender in dem weiter unten notierten HTML-Formular auf den Klick-Button mit der Aufschrift `OK` klickt, und zwar mit dem Event-Handler `onclick`. 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 in dem Textfeld des Formulars, das zur Eingabe diente, ein entsprechender Satz zusammengesetzt (siehe dazu auch Operator für Zeichenkettenverknüpfung).

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.

## 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". Diese Syntax, die der Programmiersprache C entlehnt ist, gibt es in JavaScript aber erst seit der Sprachversion 1.2 - ältere Browser quittieren solche Anweisungen mit einer Fehlermeldung.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <html><head><title>Test</title>
    </head><body>
    <script type="text/javascript">
    var Eingabe = window.prompt("Geben Sie eine Zahl zwischen 1 und 4 ein:", "");
    switch (Eingabe) {
      case "1":
        alert("Sie sind sehr bescheiden");
        break;
      case "2":
        alert("Sie sind ein aufrichtiger Zweibeiner");
        break;
      case "3":
        alert("Sie haben ein Dreirad gewonnen");
        break;
      case "4":
        alert("Gehen Sie auf allen Vieren und werden Sie bescheidener");
        break;
      default:
        alert("Sie bleiben leider dumm");
        break;
    }
    </script>
    </body></html>

### Erläuterung:

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.

| Schleifen (while/for/do-while)
| Operatoren

© 2007 Impressum