Websiteentwicklung: JavaScript: Bedingte Anweisungen

<< Funktionen | Inhaltsverzeichnis | Index | Schleifen >>

Wikipedia hat einen Artikel zum Thema:

JavaScript

Bedingte Anweisungen

Bedingte Anweisungen werden eingesetzt, wenn eine Anweisung (oder ein Block von Anweisungen) nur dann ausgeführt werden soll, wenn eine bestimmte Bedingung erfüllt ist.

if

Die Abfrage der Bedingung mit if handelt nur einen einzigen Fall ab.

Syntax

if(Bedingung)
        {
        Anweisung 1;
        Anweisung 2;
           ...
        Anweisung n;
        }

Wenn die Bedingung innerhalb der beiden runden Klammern „()“ hinter if erfüllt ist, wird der Anweisungsblock zwischen den beiden geschweiften Klammern „{....}“ ausgeführt – eine Alternativ-Anweisung gibt es nicht. Wenn die Bedingung nicht erfüllt ist, geschieht gar nichts.

if / else

Die Abfrage der Bedingung mit if / else handelt eine Bedingung und die Alternative ab.

Syntax

if(Bedingung)
     {
     Anweisung 1;
     Anweisung 2;
        ...
     Anweisung n;
     }
else
     {
     Alternativ-Anweisung 1;
     Alternativ-Anweisung 2;
           ...
     Alternativ-Anweisung n;
     }

Wenn die Bedingung innerhalb der beiden runden Klammern „()“ hinter „if“ erfüllt ist, wird der Anweisungsblock zwischen den beiden geschweiften Klammern „{....}“ ausgeführt. Wenn die Bedingung nicht erfüllt ist, wird der Anweisungsblock hinter „else“ ausgeführt.

Die Kurzschreibweise für diesen Befehl gibt es auch in JavaScript, so wie es sie auch in C/C++ gibt:

(Bedingung) ? Wert1 : Wert2;

Es ist zulässig, die Bedingung nicht einzuklammern oder statt den Werten eine (ungeklammerte) Berechnung anzugeben:

left = ightToLeft == true ? imageHorizSpace : this.tree.itemWidth - itemPadding*2;

Auch ist noch kurz hinzuzufügen, dass die letzte Anweisung in einem Block auch ohne Strichpunkt/Semicolon sein kann. Im obigen Beispiel könnte man also die n-te Anweisung einfach ohne ';' beenden:

if(Bedingung) {
     Anweisung 1;
     Anweisung 2;
        ...
     Anweisung n
}
else {
     Alternativ-Anweisung 1;
     Alternativ-Anweisung 2;
           ...
     Alternativ-Anweisung n
}

Beispiel: Teilbarkeit einer Zahl

<html>
   <head>
      <title>Teiler</title>
   </head>
   <body>
      <script type="text/javascript">

           function fTeiler(iZ,iT)
           // Prüft die Teilbarkeit von iZ durch iT
           // gibt bei Teilbarkeit true zurück
           // bei Nichtteilbarkeit und bei iT=0
           // (Division durch 0 ist verboten!)
           // wird false zurückgegeben
              {
              var iR =0;
              var bTeilbar=false;
              // wir benutzen die Modulo-Division (Division mit Rest!)
              // wenn Rest ungleich 0 liegt keine Teilbarkeit vor!
              iR=iZ%iT;
              if(iR==0)
                {
                bTeilbar=true;
                }
              return bTeilbar;
              }
           function fPruefen()
              // wertet die beiden Textfelder aus
              // wandelt die Texte in Zahlen
              // und ruft die Funktion fTeiler() auf.
              {
              var iZahl1=parseInt(document.frmTeiler.txtZahl1.value);
              document.frmTeiler.txtZahl1.value=iZahl1;
              var iZahl2=parseInt(document.frmTeiler.txtZahl2.value);
              document.frmTeiler.txtZahl2.value=iZahl2;
              var bTeiler=fTeiler(iZahl1,iZahl2);
              if(bTeiler)
                 {
                 alert(iZahl1 + " ist teilbar durch " + iZahl2);
                 }
              else
                 {
                 alert(iZahl1 + " ist nicht teilbar durch " + iZahl2);
                 }
              }

      </script>
      <form method="get" name="frmTeiler">
         <h2>Feststellung der Teilbarkeit einer Zahl n durch eine Zahl m</h2>
         <b>Zahl: Gib eine ganze Zahl n > 1 ein:</b>
         <input type="text" name="txtZahl1"><br>
         <b>Teiler: Gib eine ganze Zahl m <> 0 ein:</b>
         <input type="text" name="txtZahl2"><br>
         <input type="button" name="btnStart" value="Teilbarkeit prüfen"
          onClick="fPruefen()">
      </form>
   </body>
</html>

Die Funktion „fPruefen“ wird durch Klicken des Buttons „btnStart“ aufgerufen. Diese Funktion wertet die beiden Textfelder aus, übergibt ihre Inhalte an zwei Variablen „iZahl1“ und „iZahl2“ und ruft damit die Funktion „fTeiler“ auf. In der Funktion „fTeiler“ finden wir eine einfache „if“-Bedingung. Die Funktion „fPruefen“ hat keinen Rückgabewert sondern startet eine alert-Box mit der Nachricht „teilbar“ / „nicht teilbar“. Zu diesem Zweck verwenden wir eine „if / else“-Bedingung.

switch

Mit switch...case...default, das es seit JavaScript 1.2 gibt, sind Sie in der Lage, mehr als zwei Fälle zu unterscheiden. Dies wäre zwar auch durch eine Aneinanderreihung von „if / else“-Konstruktionen möglich – switch bietet aber einen bequemeren Weg.

Syntax

switch (Variable oder Ausdruck)
   {
   case Wert_1:  
     Anweisungen;
     break;

   case Wert_2:  
     Anweisungen;
     break;

   ...

   case Wert_n:  
     Anweisungen;
     break;

   default:  
     Anweisungen;     /* Falls keiner der anderen Faelle erfuellt ist. */
     break;
   }

Auf switch folgt in runden Klammern eine Variable oder ein Ausdruck, der zur Fallunterscheidung dient. Danach folgt eine Auflistung von Fällen – eingeleitet mit dem Schlüsselwort case und einem konkreten Wert oder Ausdruck und einen Doppelpunkt; danach folgen Anweisungen, die durchzuführen sind. Hinter der letzten Anweisung erzwingt ein break den Abbruch der Switch-Case-Struktur. Lässt man das „break“ weg (was nur selten sinnvoll ist), werden alle noch folgenden Anweisungen bis zum nächsten break oder - falls gar kein break vorhanden - bis zum Ende der Switch-Case-Struktur ausgeführt. Kurze Beispiele für die Verwendung des break zum Abbruch von Schleifen stehen im Kapitel über Schleifen.

Beispiel

<html>
   <head>
      <title>Java-Script + switch / case</title>
   </head>
   <body>
      <script type="text/javascript">

           var Eingabe=prompt("Bitte geben Sie eine Zahl zwischen 1 und 3 ein!");
           switch(Eingabe)
              {
              case "1":
                   alert("Sie haben die Zahl eins eingegeben!");
                   break;
              case "2":
                   alert("Sie haben die Zahl zwei eingegeben!");
                   break;
              case "3":
                   alert("Sie haben die Zahl drei eingegeben!");
                   break;
              default:
                   alert("Sie haben sich nicht an die Regel gehalten!");
                   break;
              }

      </script>
      <h1>Java-Script + switch / case</h1>
   </body>
</html>

Aufgaben + Lösungen

<< Funktionen | Inhaltsverzeichnis | Index | Weblinks | Schleifen >>