Javascript: Bedingungen und Fallunterscheidungen - Artikel von www.it-academy.cc

- - - Javascript: Bedingungen und Fallunterscheidungen

Javascript: Bedingungen und Fallunterscheidungen

Ein Tutorial das zeigt wie die Ausführung von Javascript-Code von bestimmten Bedingungen abhängig gemacht werden kann. Obowhl dieser Artikel auf Javascript basiert, kann er eigentlich für jede Programmiersprache angewendet werden.

Autor:	Patrick Faes (dreamer)
Datum:	18-10-2005, 20:58:14
Referenzen:	keine
Schwierigkeit:	Anfänger
Ansichten:	4808x
Rating:	7 (1x bewertet)

Hinweis:

Für den hier dargestellte Inhalt ist nicht der Betreiber der Plattform, sondern der jeweilige Autor verantwortlich.
Falls Sie Missbrauch vermuten, bitten wir Sie, uns unter missbrauch@it-academy.cc zu kontaktieren.

[Druckansicht] [Als E-Mail senden] [Kommentar verfassen]

Einführung

Auch Sie haben bestimmt schon folgendes Problem erlebt: Sie wollen auf Ihrer Seite ein Script das jemanden Glück wünscht zum Geburtstag. Sie haben den vollständigen Code, nur eins fehlt da: wie bekomme ich es hin, dass der Code nur ausgeführt wird wenn der Besucher auch wirklich Geburtstag hat.

Für solche und ähnliche Fälle sind sogenannte Wenn-Dann-Bedingungen gedacht. Damit kann erreicht werden dass ein bestimmter Code nur ausgeführt wird wenn eine bestimmte Bedingung erfüllt ist.

In diesem Tutorial werden Sie folgende Formen sehen (lassen Sie sich nicht von den Namen abschrecken):

Wenn-Dann-Bedingungen
Wenn-Dann-Ansonsten-Bedingungen
Wenn-Dann-Ansonsten-Wenn-Dann-Ansonsten-Bedingungen
Fallunterscheidungen

Am Ende sehen Sie dann noch wie Sie mehrere Bedingungen gleichzeitig stellen können.

Wenn-Dann-Bedingungen

Dies ist die einfachste Form um eine Bedingung zu stellen. Sie stellen eine Bedingung indem Sie zuerst das englische Schlüsselwort if (deutsch: wenn) schreiben und dahinter, zwischen runden Klammern, die Bedingung. Danach schreiben Sie dann den Code der ausgeführt werden soll.

Code-Beispiel:

  var a = 7;
  if (a > 3) alert('Die Zahl ' + a + ' ist größer als 3');

In der Variable a wird die Zahl 7 gespeichert. Danach wird getestet ob dieser variable Wert größer ist als 3. Wenn das so ist, dann wird eine Meldung ausgegeben.

Wenn Sie wollen, können Sie das mal selber ausprobieren. Geben Sie dazu in folgendem Feld eine Zahl ein und betätigen Sie dann den Knopf daneben. Nur wenn die Zahl die Sie eingegeben haben größer ist als 3 wird eine Meldung ausgegeben.

Geben Sie eine Zahl ein:

Wie Sie sehen, haben Sie jetzt zum ersten Mal eine Code-Ausführung von einer Bedingung abhängig gemacht. Allerdings können Sie auch komplette Code-Blöcke davon abhängig machen. Dazu schreiben Sie jeden Code der davon abhängig gemacht werden soll zwischen geschweiften Klammern, jeweils getrennt von einem ';'-Zeichen.

Code-Beispiel:

  var a = 7;
  if (a > 3) {alert('Die Zahl ' + a + ' ist größer als 3'); alert('Gut so');}

Wenn Sie wollen, können Sie auch dies testen.

Geben Sie eine Zahl ein:

Wenn-Dann-Ansonsten-Bedingungen

Nachdem Sie jetzt gesehen haben wie Sie eine Bedingung stellen, fragen Sie sich bestimmt:"Und wie erzähle ich den Browser was er machen soll wenn die Bedingung nicht erfüllt wurde?" Dazu schreiben Sie das englische Schlüsselwort else (deutsch: ansonsten) und dahinter eine zweiter Code-Block. Beachten Sie dass wenn Sie einen alternativen Code-Block erstellen, Sie beide Code-Blöcke immer zwischen geschweiften Klammern schreiben müssen!

Code-Beispiel:

  var a = 7;
  if (a > 3) {alert('Die Zahl ' + a + ' ist größer als 3');}
  else {alert('Die Zahl ' + a + ' ist nicht größer als 3');}

Testen Sie es ruhig mal aus.

Geben Sie eine Zahl ein:

Wenn-Dann-Ansonsten-Wenn-Dann-Ansonsten-Bedingungen

Bisher haben Sie gesehen wie Sie eine Bedingung stellen und wie Sie eine alternative Code-Ausführung ermöglichen. Da bleibt nur noch die Frage:"Und wie kann ich mehrere Bedingung stellen?" Dazu verwenden Sie die englische Schlüsselwort-Kombination else if (deutsch: ansonsten wenn).

Code-Beispiel:

  var a = 7;
  //ist die Zahl kleiner als 3?
  if (a < 3) {alert('Die Zahl ' + a + ' ist kleiner als 3');}
  //die Zahl ist schon mal nicht kleiner als 3, aber ist sie kleiner als 6?
  else if (a < 6) {alert('Die Zahl ' + a + ' ist größer als 3, aber nicht größer als 6');}
  //die Zahl ist größer als 6
  else {alert('Die Zahl ' + a + ' ist größer als 6');}

Versuchen Sie es selbst.

Geben Sie eine Zahl ein:

Sie können soviele else if-Bedingungen aufnehmen wie Sie wollen.
von den Moment an wo eine Bedingung erfült wurde, werden die folgenden Bedingungen nicht mehr geprüft.
der Teil else ist keine Pflicht, Sie können ihn auch weglassen.

Fallunterscheidungen

Mit einer switch (deutsch: umschalten) können Sie für eine bestimmte Reihe von Fällen aufnehmen. So können Sie z.B. verschiedene Ausgaben machen je nachdem ob die Zahl 2, 3 oder 4 eingegeben wurde. Zusätzlich können Sie noch eine Standard-Ausgabe definieren.

Code-Beispiel:

  var a = 3;
  switch (a)
  {
    case "2": alert('Sie haben die Zahl 2 eingegeben'); break;
    case "3": alert('Sie haben die Zahl 3 eingegeben'); break;
    case "4": alert('Sie haben die Zahl 4 eingegeben'); break;
    default: alert('Die Zahl die Sie eingegeben haben, kommt nicht vor in der Reihe "2, 3 und 4"');
  }

Versuchen Sie es mal:

Geben Sie eine Zahl ein:

Um eine Fallunterscheidung zu verwenden, schreiben Sie zuerst das Schlüsselwort switch und dahinter zwischen runden Klammern den Namen der Variablen auf den die Fallunterscheidung Bezug hat (in diesem Fall die Variable a). Dann schreiben Sie für jeden zu unterscheidenden Fall das englische Schlüsselwort case (deutsch: Fall) und dahinter zwischen Anführungszeichen den Wert auf den der Fall Bezug hat (ausgenommen davon sind die boolische oder Wahrheitswerte, true und false, bzw. wahr und unwahr). Nach einem ':'-Zeichen schreiben Sie dann alle Code-Teile die ausgeführt werden sollen, jeweils getrennt von einen ';'-Zeichen.
Am Ende schreiben Sie dann noch das englische Schlüsselwort break (englisch: abbrechen). Dies verhindert dass alle nachfolgende Code-Teile ausgeführt werden. Wenn Sie dies im obigen Beispiel nicht getan hätten, dann würde im Falle dass die Zahl gleich zwei ist alle Meldungen ausgegeben werden. Dies kann aber manchmal schon nützlich sein.

Stellen Sie sich vor, Sie wollen für eine Zahl eine Meldung ausgeben wenn diese kleiner ist als eine andere Zahl. An sich kein Problem, es sei denn Sie möchten dies tun für jede größere Zahl. Mit einer normalen Wenn-Dann-Anweisung müsten Sie den Code jedesmal wiederholen, wie im folgenden Beispiel:

  var a = 1;
  if (a < 2)
  {
    alert('Die Zahl ' + a + ' ist kleiner als 2');
    alert('Die Zahl ' + a + ' ist kleiner als 3');
    alert('Die Zahl ' + a + ' ist kleiner als 4');
  }
  else if (a < 3)
  {
    alert('Die Zahl ' + a + ' ist kleiner als 3');
    alert('Die Zahl ' + a + ' ist kleiner als 4');
  }
  else if (a < 4)
  {
    alert('Die Zahl ' + a + ' ist kleiner als 4');
  }

Wie Sie sehen, müssen Sie im obigen Beispiel alle Code-Teile jedemal wiederholen. Mit einer Fallunterscheidung mittels switch geht das viel kürzer.

Code-Beispiel:

  var a = 2;
  switch (a)
  {
    case "1": alert('Die Zahl ist kleiner als 2');
    case "2": alert('Die Zahl ist kleiner als 3');
    case "3": alert('Die Zahl ist kleiner als 4');
    case "4": alert('Die Zahl ist kleiner als 5');
  }

Der Code wird ausgeführt von da an wo ein Fall zutrifft.

Optional können Sie, wie im ersten Beispiel gezeigt, einen default-Fall erstellen. Der englische Begriff default bedeutet etwa soviel wie "im Fehlerfall, wenn kein anderer Fall zutrifft". Der Code der dahinter steht, wird also nur ausgeführt wenn alle vorherige Fällen nicht zutreffen. Um syntaxtisch korrekt zu sein, muss der default-Fall am Ende der Fallunterscheidung stehen.

Wie Sie vielleicht schon bemerkt haben, können in einer Fallunterscheidung mit switch nur exacte Werte verwendet werden. Es können keine Vergleichsoperatoren verwendet werden und auch keine variablen Werte (obwohl es sein kann dass manche Browser es dennoch unterstützen). Dies können Sie lösen mit einer sogenannten Callback-Funktion. Eine solche Funktion gibt einen Wert zurück.

Code-Beispiel:

  var a = 1;
  var b = 3;

  function Berechnen()
  {
    if (a < b) var c = a + b;
    return c;
  }

  var d = Berechnen();

  switch (d)
  {
    case "4": alert('Die Zahl hat den Wert 4');
  }

In dieses simple Beispiel bekommt die Variable d den Wert der von der Funktion Berechnen() zurückgegeben wird mittels das Statement return (deutsch: zurückgeben). Der Wert der zurückgegeben wird, ist die Variable c. Diese wird errechnet aus der Addition der Variablen a und b. Dies geschieht aber nur wenn a kleiner ist als b. In diesem Beispiel ist das natürlich unsinnig, soll es aber nur die Möglichkeiten demonstrieren.

Mehrere Bedingungen auf einmal

Zuletzt möchten Sie bestimmt noch wissen ob es möglich ist mehrere Bedingungen für die Ausführung eines Code-Teils zu stellen. Das ist möglich mit sogenannte "logische Operatoren".

Javascript kennt, wie alle anderen Programmiersprachen auch, folgende logische Operatoren:

und (AND): &&
oder (OR): ||
nicht (NOT): !

Diese Operatoren werden verwendet um die Bedingungen mit einander zu verknöpfen. Sie werden syntaxtisch repräsentiert von den Symbolen die nach den jeweiligen Operator stehen. Es ist wohl einfacher diese einfach mit einigen Beispielen zu erklären.

Code-Beispiel:

  var a = 2;
  var b = 3;
  var c = 4;
  var d = 5;
  var e = 8;

  if ( (a * c == e) && (c + d > e) ) alert('a mal c ist gleich e UND c plus d ist größer als e');
  if ( (a + b == d) || (e < a) ) alert('a + b ist gleich d ODER e ist kleiner als a');
  if ( !(a + e < b) ) alert('a + e ist nicht kleiner als b');

Wie Sie sehen, müssen die Bedingungen jeweils zwischen runden Klammern stehen und alle Bedingungen zusammen müssen auch nochmal zwischen runden Klammern stehen. Ich nehme an dass die obigen Beispiele keine weitere Erklärungen benötigen.

Jetzt folgen einige schwierigere Beispiele. Hierbei werden Sie merken dass mit vielen Klammern schon schnell die übersicht verloren geht.

Code-Beispiel:

  var a = 1;
  var b = 2;
  var c = 3;
  var d = 4;
  var e = 5;
  var f = 6;
  var g = 7;
  var h = 8;
  var i = 9;
  var j = 10;

  if ( ( (a + b == c) && (j / e == b) ) || (h < i) )
  {alert('a + b ist gleich c UND j geteilt durch e ist gleich b ODER h ist kleiner als i');}

  if ( ( !(a + b == c) || !(i < g) ) && (d < f) )
  {alert('a + b ist NICHT c ODER i ist NICHT kleiner als g UND d ist kleiner als f');}

Sie können die Bedingungen beliebig kombinieren. Dabei werden die Bedingungen gruppiert je nachdem zwischen welchen gemeinsamen Klammernpaar sie stehen.

Im ersten Beispiel z.B. sind die ersten beiden Bedingungen gruppiert. Der Code wird nur ausgeführt wenn die ersten beiden Bedingungen erfüllt sind oder wenn die dritte Bedingung erfüllt wurde.
Im zweiten Beispiel wird der Code ausgeführt wenn einer der ersten beiden Bedinguen nicht erfüllt wurde und wenn die dritte Bedingung erfüllt wurde.

dreamer
Expert

Beitrag vom:
28-01-2006, 14:48:34

Typumwandlung

Manchmal könnte es sein dass die zwei Werte die verglichen werden nicht denselben Typ haben. So sind "1 == '1'" und "1 == 1" nicht unbedingt dasselbe. Um einen numerischen Wert aus einem String zu bekommen, verwenden Sie die Funktion Number(), oder umgekehrt die Funktion String()

-----------------------------------------------------

dreamer
Expert

Beitrag vom:
28-01-2006, 14:46:51

Typengleichheit bedingen

Normalerweise testet man die Gleichheit zweier Variablen mit dem Operator "==". Das könnte manchmal zu Problemen führen. So z.B. kann der Vergleich "zahl == 1" falsch interpretiert werden. "Gleich 1" kann auch als Boolean (Wahrheitswert) interpretiert werden, wodurch der Vergleich immer true ergibt wenn zahl einen Wert hat. Um zu bedingen dass der rechte Wert auch als Zahl interpretiert wird, verwenden Sie den Operator "===". Das obige Beispiel wird also "zahl === 1" (ergibt true wenn zahl den numerischen Wert "1" hat). Ungleichheit testen Sie dann mit "!==".

-----------------------------------------------------

[back to top]

User nicht eingeloggt

Autoren:03760
Artikel:00815
Glossar:04618
News:08554
Userbeiträge:16077
Queueeinträge:00024

Ihre Anforderungen an ein Online-Zeiterfassungs-Produkt?