JavaScript Katana

JavaScript-Bedingungsanweisungen erklärt: So verwenden Sie if, else if und switch

JavaScript-Grundlagen & Einführung
佐川 直弘 | Naohiro Sagawa
By 佐川 直弘 | Naohiro Sagawa (運営者)
※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　
目次

1. Einführung: Bedingte Verzweigung in JavaScript und die Rolle von „else if“

JavaScript ist eine Programmiersprache, die weit verbreitet verwendet wird, um dynamische Funktionalität in der Webentwicklung umzusetzen. Unter ihren vielen Funktionen ist bedingte Verzweigung ein wesentlicher Mechanismus, der es ermöglicht, verschiedene Prozesse basierend auf spezifischen Bedingungen auszuführen.

In diesem Artikel konzentrieren wir uns auf eine Art der bedingten Verzweigung: die „else if“-Anweisung. Wir erklären ihre grundlegende Syntax und Verwendung im Detail und verwenden konkrete Beispiele, um es Anfängern leicht verständlich zu machen.

Die Bedeutung der bedingten Verzweigung in JavaScript

In der Programmierung ist es oft notwendig, unterschiedliche Aktionen je nach bestimmten Bedingungen auszuführen. Zum Beispiel kann auf einer Online-Shopping-Seite der Versand je nach Kaufsumme kostenlos werden, oder Gutscheincodes werden nur angewendet, wenn spezifische Bedingungen erfüllt sind.

In solchen Situationen ermöglichen JavaScripts if...else– und else if-Anweisungen die Definition flexibler bedingter Logik.

Was ist die „else if“-Anweisung?

Die else if-Anweisung ist eine Syntax, die verwendet wird, um mehrere Bedingungen sequentiell zu bewerten. Sie wird wie folgt verwendet:

if (condition1) {
  // Process executed when condition1 is true
} else if (condition2) {
  // Process executed when condition2 is true
} else {
  // Process executed when all conditions above are false
}

Diese Struktur ist besonders nützlich, wenn mehrere Bedingungen überprüft werden müssen. Zum Beispiel kann sie verwendet werden, um Zugriffsrechte basierend auf dem Alter eines Benutzers zu ändern oder einen Rang basierend auf einer Punktzahl zu bestimmen.

Überblick über den Artikel

Dieser Artikel behandelt die folgenden Themen in dieser Reihenfolge:

  1. Grundlegende Syntax und Verwendung von „if“- und „else“-Anweisungen
  2. Syntax und praktische Beispiele der „else if“-Anweisung
  3. Angewandte Techniken mit Beispielen aus der realen Code-Welt
  4. Ein Vergleich zwischen „else if“- und „switch“-Anweisungen
  5. Häufige Fehler und Tipps zur Fehlerbehebung

Durch das Lernen dieser Themen werden Sie Ihre Fähigkeiten in der bedingten Verzweigung in JavaScript stärken und in der Lage sein, fortgeschrittenere Programme zu schreiben.

Im nächsten Abschnitt werfen wir einen genaueren Blick auf die grundlegende Syntax der „if“- und „else“-Anweisungen.

2. Grundlagen: Syntax und Verwendung von „if“- und „else“-Anweisungen

Die bedingte Verzweigung in JavaScript kann einfach mit if– und else-Anweisungen implementiert werden. In diesem Abschnitt erklären wir ihre grundlegende Syntax und konkrete Verwendung.

Was ist die „if“-Anweisung?

Die if-Anweisung ist eine Syntax, die Code nur ausführt, wenn eine angegebene Bedingung zu true ausgewertet wird. Die grundlegende Struktur ist unten gezeigt.

if (condition) {
  // Code executed when the condition is true
}

Beispiel für eine „if“-Anweisung

Das folgende Beispiel verzweigt die Verarbeitung basierend auf dem Alter des Benutzers.

let age = 20;

if (age >= 18) {
  console.log("You are an adult.");
}

In diesem Code wird die Nachricht „You are an adult.“ angezeigt, wenn die Variable age 18 oder älter ist. Wenn die Bedingung nicht erfüllt ist, wird nichts ausgeführt.

Was ist die „else“-Anweisung?

Die else-Anweisung definiert den Prozess, der ausgeführt wird, wenn die „if“-Bedingung falsch ist. Sie wird in Kombination mit if verwendet.

if (condition) {
  // Code executed when the condition is true
} else {
  // Code executed when the condition is false
}

Beispiel für eine „else“-Anweisung

Das nächste Beispiel zeigt eine andere Nachricht an, wenn der Benutzer unter 18 Jahren alt ist.

let age = 16;

if (age >= 18) {
  console.log("You are an adult.");
} else {
  console.log("You are a minor.");
}

In diesem Code wird „You are a minor.“ angezeigt, wenn age kleiner als 18 ist.

Zusammenfassung

In diesem Abschnitt haben wir die Syntax und Verwendung der grundlegenden bedingten Anweisungen in JavaScript gelernt: if und else. Diese Konstrukte bilden nicht nur die Grundlage für einfache Verzweigungen, sondern auch für den Aufbau komplexerer Logik.

Im nächsten Abschnitt werden wir uns die else if‑Anweisung genauer ansehen, die es Ihnen ermöglicht, mehrere Bedingungen zu behandeln. Wir werden praktische Beispiele und angewandte Techniken untersuchen.

3. Mittelstufe: „else if“-Syntax und Beispiele für Anfänger

In diesem Abschnitt erklären wir komplexe Verzweigungen mithilfe der „else if“-Anweisung. Durch die Verwendung von else if können Sie mehrere Bedingungen nacheinander auswerten und den entsprechenden Prozess ausführen.

Syntax der „else if“-Anweisung

Die else if‑Anweisung ist eine erweiterte Syntax zur Auswertung mehrerer Bedingungen. Die Grundstruktur sieht wie folgt aus.

if (condition1) {
  // Process when condition1 is true
} else if (condition2) {
  // Process when condition2 is true
} else {
  // Process when all conditions are false
}

Beispiel: Bewertung von Testergebnissen

Der folgende Code gibt eine Bewertung basierend auf einer Testergebnis‑Punktzahl aus.

let score = 75;

if (score >= 90) {
  console.log("Grade: A");
} else if (score >= 80) {
  console.log("Grade: B");
} else if (score >= 70) {
  console.log("Grade: C");
} else if (score >= 60) {
  console.log("Grade: D");
} else {
  console.log("Grade: F");
}

Zusammenfassung

In diesem Abschnitt haben wir die Syntax und Beispiele der „else if“-Anweisung erklärt. Die else if‑Anweisung ist ein leistungsstarkes Feature, das es ermöglicht, mehrere Bedingungen in Reihenfolge zu prüfen.

Im nächsten Abschnitt stellen wir weiterführende Beispiele und Fallstudien vor, um Ihnen praktische Fähigkeiten zu vermitteln.

4. Fortgeschrittene: Praktischer Code und Fallstudien mit „else if“

In diesem Abschnitt präsentieren wir praktische Code‑Beispiele mit der else if‑Anweisung. Durch das Durcharbeiten von Szenarien, die in realen Anwendungen häufig vorkommen, können Sie Ihre angewandten Fähigkeiten stärken.

Fall 1: Validierung von Formulareingaben

let username = "user123";
let password = "pass123";

if (username === "") {
  console.log("Please enter a username.");
} else if (password === "") {
  console.log("Please enter a password.");
} else if (password.length < 6) {
  console.log("Password must be at least 6 characters long.");
} else {
  console.log("The input is valid.");
}

Fall 2: Bewertung und Rangliste von Punktzahlen

let score = 72;

if (score >= 90) {
  console.log("Rank: S");
} else if (score >= 80) {
  console.log("Rank: A");
} else if (score >= 70) {
  console.log("Rank: B");
} else if (score >= 60) {
  console.log("Rank: C");
} else {
  console.log("Rank: D");
}

Zusammenfassung

In diesem Abschnitt haben wir angewandte Beispiele und praktischen Code mit der else if‑Anweisung vorgestellt.
Durch die Anwendung dieser Muster können Sie komplexere bedingte Logik handhaben.

Im nächsten Abschnitt vergleichen wir else if‑ und switch‑Anweisungen im Detail und erklären, wie Sie zwischen ihnen wählen.

5. „else if“ vs. „switch“: Welche sollten Sie verwenden?

In JavaScript gibt es zwei häufig genutzte Ansätze für bedingte Verzweigungen: die else if‑Anweisung und die switch‑Anweisung. In diesem Abschnitt vergleichen wir deren Syntax und Eigenschaften und erläutern, wie Sie die passende Variante für Ihren Anwendungsfall auswählen.

Eigenschaften der „else if“-Anweisung

Syntax und Beispiel

let grade = "B";

if (grade === "A") {
  console.log("Excellent!");
} else if (grade === "B") {
  console.log("Good performance.");
} else if (grade === "C") {
  console.log("Pass level.");
} else {
  console.log("Retest required.");
}

Eigenschaften der „switch“-Anweisung

Syntax und Beispiel

let grade = "B";

switch (grade) {
  case "A":
    console.log("Excellent!");
    break;
  case "B":
    console.log("Good performance.");
    break;
  case "C":
    console.log("Pass level.");
    break;
  default:
    console.log("Retest required.");
}

Zusammenfassung

  • „else if“‑Anweisung: Geeignet für komplexe bedingte Ausdrücke und logische Operatoren.
  • „switch“‑Anweisung: Geeignet zur strukturierten Verzweigung basierend auf konkreten Werten.

6. Häufige Fehler und Tipps zur Fehlerbehandlung

In diesem Abschnitt erklären wir häufige Fehler bei der Verwendung der else if‑Anweisung und wie man sie durch richtige Fehlerbehandlung verhindern kann.

Häufige Fehler und Lösungen

Falsche Bedingungsbewertung

let age = 20;

if (age > 18) {
  console.log("You are an adult.");
} else if (age > 20) {
  console.log("You are over 20.");
} else {
  console.log("You are a minor.");
}

Fehlerbehandlung hinzufügen

try {
  let input = prompt("Please enter a score:");
  let score = parseInt(input);

  if (isNaN(score)) {
    throw new Error("Please enter a numeric value.");
  }

  if (score >= 90) {
    console.log("Grade: A");
  } else if (score >= 80) {
    console.log("Grade: B");
  } else {
    console.log("Grade: C");
  }
} catch (error) {
  console.error(error.message);
}

Zusammenfassung

Indem Sie Fehler in konditionalen Ausdrücken verhindern und Debugging‑ sowie Fehlerbehandlungstechniken einsetzen, können Sie sichereren und robusteren Code schreiben.

7. FAQ: Häufige Fragen beantworten

In diesem Abschnitt gehen wir auf häufige Fragen und Missverständnisse ein, die Leser oft zur JavaScript else if‑Anweisung haben.

F1. Was ist der Unterschied zwischen „else if“ und „if“?

if (score >= 90) {
  console.log("Grade: A");
} else if (score >= 80) {
  console.log("Grade: B");
} else {
  console.log("Grade: C");
}

F2. Wie oft kann man „else if“ verwenden?

Es gibt kein Limit, aber wenn Sie viele Bedingungen haben, sollten Sie die Verwendung einer switch‑Anweisung in Betracht ziehen.

F3. Was ist der Unterschied zwischen „else if“ und dem ternären Operator?

let score = 75;
console.log(score >= 60 ? "Passed!" : "Failed.");

8. Fazit: Beherrschen Sie JavaScript‑„else if“-Anweisungen

In diesem Artikel haben wir alles von den Grundlagen bis zu fortgeschrittenen Beispielen der JavaScript‑Bedingungsverzweigung mit der else if‑Anweisung behandelt.

Wichtige Lernpunkte

  • Grundsyntax: Erlernt, wie konditionale Ausdrücke den Programmablauf steuern.
  • Praktische Beispiele: Angewandte Fähigkeiten durch realen Code gestärkt.
  • Vergleich: Verstanden, wie man zwischen else if und switch wählt.
  • Fehlerbehandlung: Debugging‑Techniken erlernt, um Fehler zu verhindern.

Nächste Schritte

  • Logische Operatoren verwenden: Komplexere konditionale Ausdrücke lernen.
  • Ternäre Operatoren und Kurzschlussauswertung: Bedingungen vereinfachen.
  • Bedingungen mit Funktionen kombinieren: Code‑Wiederverwendbarkeit verbessern.

Beherrschen Sie die else if‑Anweisung und beginnen Sie, praktische, reale JavaScript‑Programme zu schreiben!

広告