JavaScript-Verzweigungen

Gibt es bei einer Fallunterscheidung mehrere Möglichkeiten, den Code abhängig von Bedingungen auszuführen, spricht man von einer Verzweigung. Eine Verzweigung legt fest, welcher von zwei oder mehreren Programmabschnitten (Anweisungen), abhängig von einer oder mehreren Bedingungen, ausgeführt wird. Die Anweisungen in einem JavaScript-Programm werden chronologisch linear nach ihrem Auftreten abgearbeitet. In einem Programm gibt es aber auch Anweisungen, die nur dann ausgeführt werden sollen, wenn eine oder mehrere Bedingungen erfüllt bzw. nicht erfüllt sind. Verzweigungen genauso wie Schleifen dienen der Programmsteuerung.

Aufbau einer einfache WENN-DANN-Anweisung (if)

Die Bedingung ist ein Bool’scher Ausdruck. Ist die Bedingung wahr, dann wird die Anweisung ausgeführt, andernfalls wird sie übergangen.

<script>
  if (Bedingung){
    Anweisung  
  }
    else {
      Anweisung
  }
<script>

Hier ein kleines Beispiel:

<script>
  if (Alter < 18){
     ausgabe = "Minderjährig";
  }
    else {
  ausgabe = "Volljährig";
  }
<script>

Syntax

• if leitet die Anweisung ein,
• die Bedingung steht in runden Klammern und ist ein logischer Ausdruck, der Vergleichsoperatoren verwendet.
• Es wird überprüft, ob der Ausdruck true oder false ist
• Wenn der Wert true ist, werden die Anweisungen, die von geschwungenen Klammern eingerahmt sind, ausgeführt, sonst nicht.
• Alle Anweisungen nach der letzten geschweiften Klammer (Ende des Anweisungsblocks) werden unabhängig von der Bedingung ausgeführt.

Die verschachtelte Bedingung (if - else)

Die Ziele von if und else sind einzelne Anweisungen oder Anweisungsblöcke. Die else-Klausel ist optional. Hat die Bedingung des Ausdrucks den Wert true, dann wird der Anweisungsblock von if ausgeführt, andernfalls wird, falls vorhanden, der Anweisungsblock von else ausgeführt. Beide werden niemals gleichzeitig ausgeführt. Als verschachtelte if-Bedingung wird sie dann bezeichnet, wenn nach dem else gleich wieder ein if kommt.

Die Bedingungen sind auch hier Bool’sche Ausdrücke. Ist die Bedingung wahr, wird die Anweisung ausgeführt, andernfalls wird sie übergangen.

<script>
  if(Bedingung) {
	Anweisung;
} else if(Bedingung) {
	Anweisung;
} else {
	Anweisung;
}
<script>

Hier ein kleines Beispiel:

<script>
  if(alter < 18){
     ausgabe = "Minderjährig";
  }
    else if(alter < 67) {
  ausgabe = "Volljährig";
  }
    else {
  ausgabe = "Rentenalter"
  }
<script>

Bedinungen prüfen mit switch & case

Anstelle von if-Abfragen kann in JavaScript auch switch case verwendet werden. Diese Konstruktion kann übersichtlicher in der Verwendung sein –je nach Anwendungsfall. Der grundsätzliche Aufbau von switch case in JavaScript:

<script>
  switch(Ausdruck) {
  case Wert1:
    // Anweisungsblock 1
    break;
  case Wert2:
    // Anweisungsblock 2
    break;
  default:
    // Anweisungsblock alternativ
}
<script>

Es wird also einen Ausdruck (meistens eine Variable) in der Anweisung switch übergeben, die dann in den einzelnen Fällen (case) überprüft werden. Trifft ein Fall zu, werden die nach dem Doppelpunkt enthaltenen Anweisungen ausgeführt, bis das Ende des Falles über break erreicht ist. Anhand von Beispielen wird es verständlich. Wir wollen die Jahreszeit ausgeben. Zur Vereinfachung beginnt der Frühling am 1. März und nicht um den 21. März, unser Sommer startet ab dem Juni, Herbst beginnt am September und Winter ab Dezember. Wir speichern unseren Monat in einer Variablen mit dem Namen „monat“. Für einen guten Vergleich die Abfrage als erstes mit der schon bekannten if-Konstruktion:

<script>
  var monat = 6;
if (monat >= 3 && monat < 6) {
    console.log('Es ist Fruehling');
} else if ( monat >= 6 && monat < 9 ) {
    console.log('Es ist Sommer');
} else if ( monat >= 9 && monat < 12 ) {
    console.log('Es ist Herbst');
} else {
    console.log('Es ist Winter');
}
<script>

Das ganze Programm wollen wir nun mit switch anstelle von if schreiben.

<script>
var monat = 6;
switch (monat) {
  case (3):
  case (4):
  case (5):
   console.log('Es ist Fruehling');
    break;
  case (6):
  case (7):
  case (8):
    console.log('Es ist Sommer');
    break;
  case (9):
  case (10):
  case (11):
    console.log('Es ist Herbst');
    break;
  default:
  console.log('Es ist Winter');
  <script>

Der Bereich default wird i.d.R. als letzte Anweisung stehen, da es so logisch ist und übersichtlich bleibt – muss es aber technisch nicht, sondern könnte z.B. auch als erste Anweisung kommen.

Übungsaufgaben zu LE03

Hinweis: Alle Ergebnisse und Zwischenergebnisse müssen in Moodle abgegeben werden.