Entdecke bedingte Verzweigung in JavaScript

Einführung

In diesem Lab werden die Teilnehmer tief in die Welt der bedingten Verzweigung in JavaScript eintauchen und verschiedene Techniken zur Entscheidungsfindung und Steuerung des Programmfusses erkunden. Das Lab behandelt essentielle Konzepte wie einfache Verzweigung mit if-Anweisungen, if...else-Logik, mehrbedingte Anweisungen und switch-Anweisungen und bietet praktische Erfahrungen mit verschiedenen bedingten Strukturen.

Durch praktische Codebeispiele werden die Teilnehmer Fähigkeiten erwerben, bedingte Logik umzusetzen, verschiedene Verzweigungs-techniken zu vergleichen und zu verstehen, wie man den passendsten Ansatz für spezifische Programmier-Szenarien wählt. Durch die Bearbeitung von Schritt-für-Schritt-Beispielen zur Altersverifizierung, Notendurchschnittsberechnung und Fallbearbeitung werden die Teilnehmer eine solide Grundlage in den bedingten Programmierfähigkeiten von JavaScript entwickeln.

Einfache Verzweigung mit if-Anweisung verstehen

In diesem Schritt lernst du die grundlegende einfache Verzweigung mit der if-Anweisung in JavaScript kennen, die es dir ermöglicht, Code bedingt auf Grundlage einer bestimmten Bedingung auszuführen.

Zunächst erstellen wir eine JavaScript-Datei, um die einfache Verzweigung mit der if-Anweisung zu erkunden. Öffne die WebIDE und erstelle eine neue Datei mit dem Namen conditional-basics.js im Verzeichnis ~/project.

// Erstelle ein einfaches Beispiel zur Altersverifizierung
let age = 18;

// Einfache Verzweigung mit if-Anweisung
if (age >= 18) {
  console.log("You are eligible to vote!");
}

In diesem Beispiel prüft die if-Anweisung, ob das age größer oder gleich 18 ist. Wenn die Bedingung wahr ist, wird der Codeblock innerhalb der geschweiften Klammern {} ausgeführt.

Lassen wir das Skript ausführen, um das Ergebnis zu sehen:

node ~/project/conditional-basics.js

Beispielausgabe:

You are eligible to vote!

Jetzt versuchen wir ein weiteres Beispiel, um zu zeigen, wie die if-Anweisung funktioniert, wenn die Bedingung falsch ist:

// Ändere die vorherige Datei
let temperature = 15;

if (temperature < 10) {
  console.log("It's cold outside. Wear a jacket!");
}

In diesem Fall, da die Temperatur 15 ist (was nicht weniger als 10 ist), wird nichts ausgegeben, wenn du das Skript ausführst.

Implementiere die if...else-Bedingungslogik

In diesem Schritt lernst du die if...else-Bedingungslogik in JavaScript kennen, die es dir ermöglicht, unterschiedliche Codeblöcke auszuführen, je nachdem, ob eine Bedingung wahr oder falsch ist.

Öffne die WebIDE und erstelle eine neue Datei mit dem Namen conditional-else.js im Verzeichnis ~/project. Wir werden ein einfaches Beispiel erstellen, das zeigt, wie if...else funktioniert:

// Erstelle ein einfaches Beispiel zur Notendurchschnittsberechnung
let score = 75;

if (score >= 60) {
  console.log("Congratulations! You passed the exam.");
} else {
  console.log("Sorry, you did not pass the exam.");
}

In diesem Beispiel prüft die if...else-Anweisung, ob der score größer oder gleich 60 ist. Wenn die Bedingung wahr ist, wird eine Bestehensmeldung ausgegeben. Andernfalls wird eine Nicht-Bestehensmeldung ausgegeben.

Lassen wir das Skript ausführen, um das Ergebnis zu sehen:

node ~/project/conditional-else.js

Beispielausgabe:

Congratulations! You passed the exam.

Jetzt ändern wir das Skript, um den else-Teil zu demonstrieren, indem wir den Score ändern:

// Ändere die vorherige Datei
let score = 45;

if (score >= 60) {
  console.log("Congratulations! You passed the exam.");
} else {
  console.log("Sorry, you did not pass the exam.");
}

Wenn du dieses Skript ausführst, wirst du eine andere Ausgabe sehen:

Beispielausgabe:

Sorry, you did not pass the exam.

Lassen wir ein weiteres Beispiel erstellen, um zu zeigen, wie if...else mit verschiedenen Arten von Bedingungen verwendet werden kann:

// Füge ein weiteres Beispiel zur Datei hinzu
let isRaining = true;

if (isRaining) {
  console.log("Take an umbrella with you.");
} else {
  console.log("Enjoy the sunny day!");
}

Dieses Beispiel zeigt, wie if...else auch mit booleschen Bedingungen funktionieren kann.

Erstelle if...else if...else-Anweisungen mit mehreren Bedingungen

In diesem Schritt lernst du, wie du in JavaScript mehrere Bedingungen mit if...else if...else-Anweisungen verwenden kannst, um komplexere Entscheidungsszenarien zu behandeln.

Öffne die WebIDE und erstelle eine neue Datei mit dem Namen multi-condition.js im Verzeichnis ~/project:

// Erstelle ein Beispiel zur Notenklassifizierung
let score = 85;

if (score >= 90) {
  console.log("Excellent! You got an A grade.");
} else if (score >= 80) {
  console.log("Great job! You got a B grade.");
} else if (score >= 70) {
  console.log("Good work! You got a C grade.");
} else if (score >= 60) {
  console.log("You passed. You got a D grade.");
} else {
  console.log("Sorry, you failed the exam.");
}

In diesem Beispiel prüft die if...else if...else-Anweisung mehrere Bedingungen nacheinander. Die erste Bedingung, die als wahr ausgewertet wird, wird ihren Codeblock ausgeführt, und die verbleibenden Bedingungen werden übersprungen.

Lassen wir das Skript ausführen, um das Ergebnis zu sehen:

node ~/project/multi-condition.js

Beispielausgabe:

Great job! You got a B grade.

Jetzt ändern wir den Score, um zu sehen, wie verschiedene Bedingungen funktionieren:

// Versuche verschiedene Score-Szenarien
let score = 55;

if (score >= 90) {
  console.log("Excellent! You got an A grade.");
} else if (score >= 80) {
  console.log("Great job! You got a B grade.");
} else if (score >= 70) {
  console.log("Good work! You got a C grade.");
} else if (score >= 60) {
  console.log("You passed. You got a D grade.");
} else {
  console.log("Sorry, you failed the exam.");
}

Wenn du dieses Skript ausführst, wirst du eine andere Ausgabe sehen:

Beispielausgabe:

Sorry, you failed the exam.

Lassen wir ein weiteres Beispiel erstellen, um die Mehrbedingungenlogik mit einem anderen Szenario zu demonstrieren:

// Beispiel für das Wetter
let temperature = 25;

if (temperature > 30) {
  console.log("It's very hot outside.");
} else if (temperature > 20) {
  console.log("The weather is warm and pleasant.");
} else if (temperature > 10) {
  console.log("It's a bit cool today.");
} else {
  console.log("It's cold outside.");
}

Dieses Beispiel zeigt, wie if...else if...else verwendet werden kann, um mehrere Bedingungen mit unterschiedlichen Ergebnissen zu behandeln.

Verwende die switch-Anweisung für die Behandlung mehrerer Fälle

In diesem Schritt lernst du die switch-Anweisung in JavaScript kennen, die eine alternative Möglichkeit bietet, mehrere Bedingungen für eine einzelne Variable zu behandeln.

Öffne die WebIDE und erstelle eine neue Datei mit dem Namen switch-statement.js im Verzeichnis ~/project:

// Erstelle ein Beispiel für den Wochentag mit der switch-Anweisung
let day = 3;

switch (day) {
  case 1:
    console.log("Monday");
    break;
  case 2:
    console.log("Tuesday");
    break;
  case 3:
    console.log("Wednesday");
    break;
  case 4:
    console.log("Thursday");
    break;
  case 5:
    console.log("Friday");
    break;
  case 6:
    console.log("Saturday");
    break;
  case 7:
    console.log("Sunday");
    break;
  default:
    console.log("Invalid day");
}

In diesem Beispiel prüft die switch-Anweisung den Wert von day. Jeder case repräsentiert einen bestimmten Wert, und der entsprechende Codeblock wird ausgeführt, wenn der Wert übereinstimmt. Die break-Anweisung verhindert das Durchlaufen in den nächsten Fall.

Lassen wir das Skript ausführen, um das Ergebnis zu sehen:

node ~/project/switch-statement.js

Beispielausgabe:

Wednesday

Jetzt erstellen wir ein weiteres Beispiel, um den default-Fall zu demonstrieren:

// Notenklassifizierung mit der switch-Anweisung
let grade = "B";

switch (grade) {
  case "A":
    console.log("Excellent performance!");
    break;
  case "B":
    console.log("Good job!");
    break;
  case "C":
    console.log("Satisfactory performance.");
    break;
  case "D":
    console.log("Needs improvement.");
    break;
  default:
    console.log("Invalid grade.");
}

Wenn du dieses Skript ausführst, wirst du sehen:

Beispielausgabe:

Good job!

Lassen wir demonstrieren, wie mehrere Fälle den gleichen Codeblock teilen können:

// Wochenenderkennung mit der switch-Anweisung
let day = 6;

switch (day) {
  case 6:
  case 7:
    console.log("It's the weekend!");
    break;
  default:
    console.log("It's a weekday.");
}

Dieses Beispiel zeigt, wie du mehrere Fälle mit der gleichen Aktion behandeln kannst.

Vergleiche und wähle zwischen if- und switch-Anweisungen

In diesem Schritt lernst du die wichtigsten Unterschiede zwischen if-Anweisungen und switch-Anweisungen und verstehst, wann du jede Methode verwenden sollst.

Öffne die WebIDE und erstelle eine neue Datei mit dem Namen conditional-comparison.js im Verzeichnis ~/project:

// Vergleiche if und switch für verschiedene Szenarien

// Szenario 1: Einfache Gleichheitsüberprüfung
let fruit = "apple";

// Verwendung der if-Anweisung
if (fruit === "apple") {
  console.log("If Statement: It's an apple.");
} else if (fruit === "banana") {
  console.log("If Statement: It's a banana.");
} else {
  console.log("If Statement: Unknown fruit.");
}

// Verwendung der switch-Anweisung
switch (fruit) {
  case "apple":
    console.log("Switch Statement: It's an apple.");
    break;
  case "banana":
    console.log("Switch Statement: It's a banana.");
    break;
  default:
    console.log("Switch Statement: Unknown fruit.");
}

// Szenario 2: Komplexe Bedingungen
let score = 85;

// Die if-Anweisung eignet sich besser für komplexe Bedingungen
if (score >= 90 && score <= 100) {
  console.log("Excellent grade (A)");
} else if (score >= 80 && score < 90) {
  console.log("Good grade (B)");
} else if (score >= 70 && score < 80) {
  console.log("Satisfactory grade (C)");
} else {
  console.log("Needs improvement");
}

// Switch eignet sich weniger für bedingte oder komplexe Bedingungen

Lassen wir das Skript ausführen, um die Ausgaben zu sehen:

node ~/project/conditional-comparison.js

Beispielausgabe:

If Statement: It's an apple.
Switch Statement: It's an apple.
Good grade (B)

Wichtige Unterschiede, die du im Kopf behalten sollst:

1. if-Anweisungen sind flexibler und können komplexe Bedingungen behandeln
2. switch-Anweisungen eignen sich am besten für exakte Wertübereinstimmungen
3. if kann verschiedene Typen vergleichen und komplexe logische Operatoren verwenden
4. switch ist auf strikte Gleichheitsüberprüfungen beschränkt

Lassen wir ein letztes Beispiel erstellen, um diese Punkte zu veranschaulichen:

// Wähle zwischen if und switch

function recommendConditional(input) {
  // Verwende switch für einfache, exakte Wertübereinstimmungen
  switch (input) {
    case "red":
    case "blue":
    case "green":
      console.log("Use switch for simple value checks");
      break;

    // Verwende if für komplexere Bedingungen
    default:
      if (typeof input === "number" && input > 0 && input < 100) {
        console.log("Use if for range and type checking");
      } else {
        console.log("Complex conditions are better with if statements");
      }
  }
}

recommendConditional("blue");
recommendConditional(50);

Zusammenfassung

In diesem Lab haben die Teilnehmer konditionale Verzweigungstechniken in JavaScript untersucht, wobei sich auf verschiedene Arten von bedingten Anweisungen konzentriert wurde. Das Lab begann mit dem Verständnis von einfachen Zweigen if-Anweisungen, indem gezeigt wurde, wie man Code auf der Grundlage spezifischer Bedingungen wie Altersprüfung und Temperaturprüfungen ausführt. Die Teilnehmer übten das Erstellen einfacher bedingter Logik, die es ermöglicht, dass der Code nur dann ausgeführt wird, wenn eine bestimmte Bedingung wahr ist.

Das Lab ging dann zu fortgeschritteneren bedingten Techniken über, darunter if...else-Anweisungen für die Behandlung von Zweigungen, mehrbedingte if...else if...else-Anweisungen für komplexe Entscheidungen und switch-Anweisungen für die Behandlung mehrerer Fall-Szenarien. Die Teilnehmer lernten, wie verschiedene bedingte Ansätze verglichen werden, und verstanden die Syntax und praktischen Anwendungen jeder Methode in der JavaScript-Programmierung.