Bedingte Anweisungen – Programmieren lernen mit JavaScript – Thytos
Nächstes Video startet in 3 Sekunden.
Programmieren lernen mit JavaScript

Bedingte Anweisungen

Ein es­sen­tiel­ler As­pekt in der Pro­gram­mierung ist das Fest­le­gen des Kon­troll­flus­ses. Ob eine An­wei­sung aus­ge­führt wird oder nicht, soll durch eine Be­din­gung fest­ge­legt werden.

Manche Anweisungen sollen nur ausgeführt werden, wenn eine bestimmte Bedingung erfüllt ist. Dafür gibt es in der Programmierung Kontrollstrukturen, die nach folgendem Schema aufgebaut sind:

Falls eine Bedingung erfüllt ist, sollen entsprechende Anweisungen ausgeführt werden

In JavaScript sieht das konkret so aus:

if (…) { // Nach dem Schlüsselwort if folgt die Bedingung in runden Klammern// Eine oder mehrere Anweisungen steht zwischen geschweiften Klammern
} // Mit geschweiften Klammern wird ein Code-Block definiert

Es gibt auch die Möglichkeit, Anweisungen auszuführen, falls die Bedingung nicht erfüllt ist. Dafür wird ein else hinter die schließende geschweifte Klammer geschrieben, gefolgt vom Block mit den Anweisungen, die stattdessen ausgeführt werden sollen. if ist Englisch für Falls und else für ansonsten. Das heißt, vervollständigt sieht das Schema so aus:

Falls Bedingung erfüllt, führe Anweisungen aus, ansonsten führe andere Anweisungen aus

Konkret in JavaScript lautet die Kontrollstruktur inklusive else:

if (…) {
  … // Falls Bedingung erfüllt, führe diese Anweisungen aus
} else {
  … // Falls Bedingung nicht erfüllt, führe diese Anweisungen aus
}

Im Fall einer einzelnen Anweisung müssen die geschweiften Klammern nicht gesetzt werden.

if (…) … // Einzelne Anweisung


if (…) … else// Gilt auch für else

Beispielfall: Länge des Namens

Im folgenden Beispiel soll die Länge zweier Namen miteinander verglichen werden. Je nachdem, ob der erste Name länger oder kürzer als der zweite ist, soll die Ausgabe entweder lauten:

Mein Name ist kürzer als dein Name.

Oder, falls der erste Name länger als der zweite ist:

Mein Name ist länger als dein Name.

Wie kann diese Unterscheidung erreicht werden?

Öffnet eure Browser-Konsole, um mitzumachen.
Zu allererst werden zwei Namen benötigt, die verglichen werden können. Dafür werden die beiden Variablen name1 und name2 angelegt. Ihre Werte könnten durch die prompt-Funktion vom Nutzer abgefragt werden, der Einfachheit halber werden sie hier aber fest definiert.

var name1 = "Oli", name2 = "Anders";

Um festzustellen, ob der eine Name länger oder kürzer als der andere Name ist, muss die Länge der beiden Strings verglichen werden. Das passiert durch die length-Eigenschaft.

name1.length; // name1 === "Oli"
// => 3

name2.length; // name2 === "Anders"
// => 6

Zum Vergleichen der beiden Längen wird ein Vergleichsoperator genutzt. Ist name1.length kleiner als name2.length?

name1.length < name2.length
// => true

Der Vergleich ergibt true, was bedeutet, dass dies der Fall ist, dass also die formulierte Bedingung erfüllt ist.

Dadurch ist klar, wie die Namen verglichen werden, um herauszufinden, welcher Name kürzer ist. Nun muss abhängig davon die Ausgabe unterschieden werden. Wie geht das?

Hier wird nun die if … else-Kontrollstruktur benötigt. Eine Bedingung ist alles, was zu true oder false aufgelöst werden kann, was in JavaScript sämtliche Werte sind (da auch nicht-boolsche Werte truthy oder falsy sind, ein Konzept auf das später in der Serie eingegangen wird). Der Vergleich der beiden Namenslängen kann deswegen direkt als Bedingung für das if benutzt werden:

if (name1.length < name2.length) …

Zur Ausgabe kann mit alert ein Dialogfenster erstellt werden. Der Aufruf der alert-Funktion wird in den Code-Block zwischen die geschweiften Klammern geschrieben. Mit else kann festgelegt werden, was ausgegeben wird, falls name1 nicht kürzer als name2 ist.

if (name1.length < name2.length) {
  alert("Mein Name ist kürzer als dein Name");
} else {
  alert("Mein Name ist länger als dein Name");
}

Führt den Code aus. Es müsste sich ein Dialogfenster mit der Meldung öffnen, dass der Name kürzer ist als der andere.
Setzt die Werte von name1 und name2 auf unterschiedliche Namen und führt den Code aus. Ihr werdet sehen, dass je nachdem, welcher Name kürzer ist, sich die Ausgabe unterscheidet.

Verschachtelung

Es ist auch möglich, eine if…else-Kontrollstruktur im Code-Block einer anderen zu schreiben:

if (object === "Teletubby") {
  if (color === "purple") alert("Tinky-Winky");
  if (color === "green") alert("Dipsy");
  if (color === "yellow") alert("Laa-Laa");
  if (color === "red") alert("Po");
}

else if

Wenn eine Bedingung nicht erfüllt ist, kann es sein, dass eine andere Bedingung überprüft werden soll. Das kann zum einen über Verschachtelung gelöst werden.

if (…) { // Bedingung 1// Wird ausgeführt, wenn Bed. 1 zutrifft
} else {
  if (…) { // Bedingung 2// Wird ausgeführt, wenn Bed. 1 nicht, dafür aber Bed. 2 zutrifft
  } else {
    … // Wird ausgeführt, wenn sowohl Bed. 1 als auch Bed. 2 nicht zutreffen
  }
}

Einfacher ist es, dieses Konstrukt mit einem else if zu lösen. Es können beliebig viele else if hintereinander geschrieben werden.

if (…) { // Bedingung 1// Bed. 1 trifft zu
} else if (…) { // Bedingung 2// Bed. 1 trifft nicht zu, aber Bed. 2
} else if (…) { // Bedingung 3// Bed. 1 und 2 treffen nicht zu, aber Bed. 3
} else {
  … // Keine der Bedingungen trifft zu
}

Dadurch kann zum Beispiel eine Begrüßung festgelegt werden, wenn Sprache und Anrede bekannt sind.

if (language === "de") { // Sprache ist Deutsch
  if (salutation === "m") { // Anrede ist männlich
    alert("Hallo, der Herr!");
  } else { // Anrede ist nicht männlich
    alert("Hallo, die Frau!");
  }
} else if (language === "en") { // Sprache ist Englisch
  if (salutation === "m") { // Anrede ist männlich
    alert("Hello, sir!");
  } else { // Anrede ist nicht männlich
    alert("Hello, ma'am!");
  }
} else { // Sprache ist weder Deutsch noch Englisch
  alert("Language isn't supported");
}

Beispielfall: Gerade oder ungerade Zahl

Mit den Kenntnissen, die ihr bis hierhin in der Serie erlangt habt, ist es euch möglich, festzustellen, ob eine Zahl gerade oder ungerade ist, und diese Feststellung auszugeben. Überlegt einmal selbst, wie das umgesetzt werden könnte, bevor ihr weiterlest.

Die Ausgabe sollte an dieser Stelle kein Problem sein. Mit einem alert kann der entsprechende Satz ausgegeben werden. Auch die Eingabe, ob über prompt gesetzt oder einfach als fester Wert in einer Variablen zugeordnet, ist keine Herausforderung. Mit if…else kann zwischen der Ausgabe für die gerade und für die ungerade Zahl unterschieden werden. Der kritische Punkt ist: Wonach soll unterschieden werden?

var nr = 42; // beliebiger Wert
if (nr ?????) { // Wie kann auf die Parität der Zahl überprüft werden?
  alert("Die Zahl ist gerade");
} else {
  alert("Die Zahl ist ungerade");
}

Wie kann die Bedingung formuliert werden, um herauszufinden, ob die Zahl gerade oder ungerade ist?
Gerade Zahlen sind durch 2 teilbar. Oftmals hilft es, verschiedene Werte manuell zu testen und nach einem Muster in den Ergebnissen zu suchen.

2 / 2
// => 1

4 / 2
// => 2

6 / 2
// => 3

8 / 2
// => 4

Wie sehen im Vergleich ungerade Zahlen aus, die durch 2 geteilt werden?

1 / 2
// => 0.5

3 / 2
// => 1.5

5 / 2
// => 2.5

7 / 2
// => 3.5

Zu beobachten ist, dass die geraden Zahlen Ganzzahlen sind und die ungeraden Kommazahlen. Darauf aufbauend kann eine Lösung entwickelt werden.

Es gibt verschiedene Ansätze, die hier verfolgt werden können. Einer ist, die parseInt-Funktion zu nutzen. Dieser Funktion können nicht nur Strings, sondern auch Zahlen übergeben werden:

parseInt(1);
// => 1

parseInt(1.5);
// => 1

Die Funktion gibt nur Ganzzahlen zurück. Wird eine Kommazahl übergeben, werden einfach die Nachkommastellen abgezogen. Wird dagegen eine Ganzzahl übergeben, wird diese genauso zurückgegeben.
Daraus ergibt sich die Idee: Wenn das Ergebnis aus der Division durch 2 parseInt übergeben wird und gleich bleibt, dann ist die betreffende Zahl gerade, ansonsten nicht.

1 === parseInt(1);
// => true

1.5 === parseInt(1.5);
// => false

// Mit Rechnung

2/2 === parseInt(2/2);
// => true

3/2 === parseInt(3/2);
// => false

Dies kann nun als Bedingung in die if-Struktur geschrieben werden.

var nr = 42;
if (nr/2 === parseInt(nr/2)) {
  alert("Die Zahl ist gerade");
} else {
  alert("Die Zahl ist ungerade");
}