# JavaScript leicht gemacht: Der Einstieg für Anfänger

Dieses Buch vermittelt die Grundlagen von JavaScript in kleinen, verständlichen Schritten. Anfänger lernen, wie sie Webseiten mit Variablen, Bedingungen, Schleifen, Funktionen und Ereignissen lebendig machen. Praktische Beispiele und Übungen fördern das sichere eigene Ausprobieren.

# JavaScript kennenlernen

Dieses Kapitel erklärt, was JavaScript ist und welche Rolle die Sprache auf modernen Webseiten spielt. Du richtest eine einfache Arbeitsumgebung ein, bindest JavaScript in eine HTML-Seite ein und nutzt die Entwicklerwerkzeuge des Browsers, um erste Ausgaben zu erzeugen und Fehler zu entdecken.

# Was ist JavaScript?

## JavaScript macht Webseiten lebendig

**JavaScript** ist eine Programmiersprache, mit der Webseiten auf Eingaben reagieren und Inhalte verändern können. Sie läuft meist direkt im Browser der Besucherin oder des Besuchers.

HTML beschreibt die Struktur einer Seite, CSS gestaltet ihr Aussehen und JavaScript sorgt für **Verhalten und Interaktion**.

Stell dir eine Webseite wie ein kleines Geschäft vor:

- **HTML** ist das Gebäude mit Türen, Regalen und Schildern.
- **CSS** bestimmt Farben, Größen und das Erscheinungsbild.
- **JavaScript** reagiert darauf, wenn jemand eine Tür öffnet, einen Knopf drückt oder etwas in ein Formular schreibt.

Ohne JavaScript ist eine Webseite oft hauptsächlich statisch: Texte und Bilder werden angezeigt, aber die Seite reagiert kaum auf Aktionen.

## Typische Aufgaben von JavaScript

JavaScript kann sehr unterschiedliche Aufgaben übernehmen. Zum Beispiel kann es:

- auf Klicks auf Schaltflächen reagieren,
- Formulare prüfen, bevor sie abgeschickt werden,
- Texte auf einer Seite ändern,
- Menüs ein- und ausblenden,
- Bildergalerien steuern,
- Berechnungen durchführen,
- Daten von einem Server nachladen,
- kleine Spiele oder interaktive Lernaufgaben umsetzen.

Ein Beispiel: Eine Schaltfläche soll nach einem Klick eine Begrüßung anzeigen.

```html
<button id="grussButton">Begrüßung anzeigen</button>
<p id="ausgabe"></p>
```

Mit JavaScript kann später festgelegt werden: Wenn jemand auf die Schaltfläche klickt, erscheint ein Text im Absatz. Wie das genau funktioniert, lernst du im Kapitel über interaktive Webseiten.

## JavaScript im Zusammenspiel mit HTML und CSS

Moderne Webseiten bestehen häufig aus drei wichtigen Bausteinen:

| Technik | Aufgabe | Beispiel |
|---|---|---|
| HTML | Inhalt und Struktur | Überschriften, Absätze, Schaltflächen |
| CSS | Gestaltung | Farben, Abstände, Schriftgrößen |
| JavaScript | Verhalten und Interaktion | Klicks verarbeiten, Inhalte ändern |

Ein einfaches Beispiel:

```html
<h1>Willkommen</h1>
<button>Mehr erfahren</button>
```

```css
button {
  background-color: steelblue;
  color: white;
}
```

```js
console.log("Die Seite wurde geöffnet.");
```

HTML erzeugt die Überschrift und die Schaltfläche. CSS gestaltet die Schaltfläche. JavaScript kann im Hintergrund eine Nachricht ausgeben oder auf einen Klick reagieren.

> **Merke:** JavaScript ersetzt HTML und CSS nicht. Die drei Technologien ergänzen sich.

## JavaScript läuft im Browser

Die meisten Browser können JavaScript direkt ausführen. Dazu gehören beispielsweise:

- Google Chrome
- Mozilla Firefox
- Microsoft Edge
- Safari

Im Browser befindet sich eine sogenannte **JavaScript-Engine**. Sie liest deinen JavaScript-Code und führt die Anweisungen aus.

Wenn eine Webseite JavaScript enthält, lädt der Browser normalerweise zuerst die Seite. Anschließend führt er den JavaScript-Code aus. Dadurch kann sich die Seite verändern, ohne dass sie vollständig neu geladen werden muss.

Ein Beispiel aus dem Alltag: Du klickst bei einem Online-Shop auf „In den Warenkorb“. Die Zahl am Warenkorb-Symbol erhöht sich sofort. Häufig passiert das mit JavaScript.

## JavaScript ist nicht Java

Die Namen sind ähnlich, aber **JavaScript und Java sind unterschiedliche Programmiersprachen**.

| JavaScript | Java |
|---|---|
| Wird sehr häufig für Webseiten verwendet | Wird unter anderem für große Anwendungen und Android-Apps eingesetzt |
| Läuft direkt im Browser | Wird meist in einer eigenen Laufzeitumgebung ausgeführt |
| Einstieg oft direkt mit HTML und einem Browser möglich | Benötigt üblicherweise zusätzliche Werkzeuge |
| Ist eine eigene Sprache mit eigener Syntax | Ist keine „größere Version“ von JavaScript |

Die Namensähnlichkeit ist historisch entstanden. Für dieses Buch gilt: Wenn von JavaScript die Rede ist, ist **nicht Java** gemeint.

## JavaScript außerhalb des Browsers

JavaScript wurde zunächst vor allem für Webseiten entwickelt. Heute kann die Sprache aber auch außerhalb des Browsers eingesetzt werden.

Mit einer Laufzeitumgebung wie **Node.js** kann JavaScript zum Beispiel auf einem Server laufen. Damit lassen sich unter anderem:

- Webserver erstellen,
- Daten verarbeiten,
- Dateien lesen und schreiben,
- Programmierskripte ausführen.

Für den Einstieg konzentrierst du dich jedoch auf JavaScript **im Browser**. Das ist besonders praktisch, weil du nur einen Texteditor und einen Browser brauchst.

## Was JavaScript nicht automatisch kann

JavaScript im Browser arbeitet aus Sicherheitsgründen nicht uneingeschränkt. Ein Skript auf einer Webseite darf zum Beispiel nicht einfach alle Dateien auf deinem Computer lesen oder verändern.

Der Browser schützt Besucherinnen und Besucher davor, dass Webseiten zu viel Zugriff erhalten. Wenn eine Webseite etwa auf Kamera, Mikrofon oder Standort zugreifen möchte, muss sie normalerweise zuerst um Erlaubnis fragen.

Das ist ein wichtiger Grundsatz:

> JavaScript kann viel, aber der Browser setzt Sicherheitsgrenzen.

## Ein erstes JavaScript-Beispiel

JavaScript besteht aus Anweisungen. Eine sehr einfache Anweisung sieht so aus:

```js
console.log("Hallo, JavaScript!");
```

Diese Zeile gibt den Text `Hallo, JavaScript!` in der **Browser-Konsole** aus. Die Konsole ist ein Bereich in den Entwicklerwerkzeugen des Browsers. Sie ist besonders nützlich, um Code zu testen und Fehler zu finden.

Die Bestandteile der Anweisung:

| Bestandteil | Bedeutung |
|---|---|
| `console` | Ein Bereich des Browsers für Entwicklerausgaben |
| `log` | Gibt eine Nachricht aus |
| `"Hallo, JavaScript!"` | Der auszugebende Text |
| `;` | Beendet die Anweisung; in JavaScript oft optional, aber erlaubt |

Die Anführungszeichen zeigen: Hier handelt es sich um einen Text. Solche Textwerte werden später **Strings** genannt.

## Warum JavaScript lernen?

JavaScript ist eine gute erste Programmiersprache für Webseiten, weil du Ergebnisse schnell sehen kannst. Du schreibst eine kleine Änderung, lädst die Seite neu und beobachtest direkt, was passiert.

Beim Lernen von JavaScript übst du außerdem allgemeine Programmierideen:

- Informationen speichern,
- Entscheidungen treffen,
- Aufgaben wiederholen,
- Code in Funktionen ordnen,
- auf Ereignisse wie Klicks reagieren.

Diese Grundlagen helfen dir später auch bei anderen Programmiersprachen.

## Zusammenfassung

- JavaScript ist eine Programmiersprache für **interaktive Webseiten**.
- HTML liefert die Struktur, CSS das Aussehen und JavaScript das Verhalten.
- JavaScript wird häufig direkt im Browser ausgeführt.
- JavaScript und Java sind verschiedene Programmiersprachen.
- Mit `console.log()` kannst du erste Ausgaben erzeugen.
- Der Browser begrenzt JavaScript aus Sicherheitsgründen.

## Kleine Selbstkontrolle

1. Welche Aufgabe übernimmt JavaScript auf einer Webseite?
2. Worin unterscheiden sich HTML, CSS und JavaScript?
3. Ist JavaScript dasselbe wie Java?
4. Wo wird die Ausgabe von `console.log()` angezeigt?

**Musterantworten**

1. JavaScript sorgt unter anderem dafür, dass eine Webseite auf Aktionen reagieren und Inhalte verändern kann.  
2. HTML strukturiert Inhalte, CSS gestaltet sie und JavaScript steuert Verhalten und Interaktion.  
3. Nein. JavaScript und Java sind unterschiedliche Programmiersprachen.  
4. Die Ausgabe erscheint in der Browser-Konsole.

# JavaScript im Browser einbinden

## JavaScript mit einer HTML-Seite verbinden

Damit JavaScript im Browser ausgeführt wird, muss dein HTML-Dokument wissen, *wo* sich der JavaScript-Code befindet. Dafür verwendest du das HTML-Element `<script>`.

Es gibt zwei gebräuchliche Möglichkeiten:

1. JavaScript direkt in die HTML-Datei schreiben
2. JavaScript in einer eigenen Datei speichern und diese einbinden

Für kleine Tests ist die erste Variante praktisch. In echten Projekten solltest du JavaScript jedoch fast immer in einer **separaten Datei** schreiben. Das hält HTML, CSS und JavaScript übersichtlich getrennt.

---

## JavaScript direkt in HTML schreiben

Mit einem `<script>`-Element kannst du JavaScript unmittelbar in eine HTML-Datei einfügen:

```html
<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Mein erstes JavaScript</title>
  </head>
  <body>
    <h1>Willkommen!</h1>

    <script>
      console.log("JavaScript funktioniert!");
    </script>
  </body>
</html>
```

Der Bereich zwischen `<script>` und `</script>` enthält JavaScript-Code.

Wenn du diese Datei im Browser öffnest, siehst du die Ausgabe nicht direkt auf der Webseite. Öffne stattdessen die **Entwicklerwerkzeuge** und wechsle zur Konsole. Dort erscheint:

```text
JavaScript funktioniert!
```

> **Merke:** `console.log()` gibt Informationen in der Browser-Konsole aus. Es ist besonders hilfreich, um Code zu testen und Fehler zu suchen.

---

## JavaScript in einer eigenen Datei speichern

Bei mehr als wenigen Zeilen Code wird eine separate Datei deutlich übersichtlicher.

Lege zunächst einen Ordner für dein Projekt an. Darin speicherst du zum Beispiel diese beiden Dateien:

```text
mein-projekt/
├── index.html
└── script.js
```

Die Datei `index.html` enthält die Struktur der Webseite. In `script.js` steht ausschließlich dein JavaScript-Code.

### Die HTML-Datei

```html
<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>JavaScript einbinden</title>
  </head>
  <body>
    <h1>Meine erste Webseite mit JavaScript</h1>

    <script src="script.js"></script>
  </body>
</html>
```

Das Attribut `src` steht für *source*, also Quelle. Es teilt dem Browser mit, welche Datei geladen werden soll:

```html
<script src="script.js"></script>
```

### Die JavaScript-Datei

Schreibe in `script.js`:

```js
console.log("Die Datei script.js wurde geladen.");
```

Öffne anschließend `index.html` im Browser und kontrolliere die Konsole. Wenn alles stimmt, erscheint dort:

```text
Die Datei script.js wurde geladen.
```

---

## Warum separate Dateien sinnvoll sind

Die Aufteilung in HTML- und JavaScript-Dateien hat mehrere Vorteile:

- **Bessere Übersicht:** HTML beschreibt den Inhalt der Seite, JavaScript ihr Verhalten.
- **Leichtere Pflege:** Änderungen am JavaScript betreffen nicht direkt die HTML-Struktur.
- **Wiederverwendung:** Dieselbe JavaScript-Datei kann auf mehreren HTML-Seiten eingebunden werden.
- **Sauberer Code:** Größere Projekte bleiben einfacher verständlich.

Eine übliche Grundstruktur sieht so aus:

```text
mein-projekt/
├── index.html
├── css/
│   └── style.css
└── js/
    └── script.js
```

Dann muss der Pfad in der HTML-Datei angepasst werden:

```html
<script src="js/script.js"></script>
```

Der Schrägstrich bedeutet: Die Datei `script.js` liegt im Unterordner `js`.

---

## Wo gehört das `<script>`-Element hin?

Ein `<script>`-Element kann grundsätzlich im `<head>` oder im `<body>` stehen. Die Position ist wichtig, weil der Browser HTML und JavaScript nicht unabhängig voneinander verarbeitet.

### Möglichkeit 1: Am Ende des `<body>`

Für den Einstieg ist dies eine sehr einfache und sichere Lösung:

```html
<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Beispiel</title>
  </head>
  <body>
    <h1 id="ueberschrift">Hallo!</h1>

    <script src="script.js"></script>
  </body>
</html>
```

Das Skript steht **nach** dem sichtbaren HTML-Inhalt. Dadurch wurden Überschrift, Absätze und Buttons bereits geladen, bevor JavaScript darauf zugreift.

Das ist besonders wichtig, wenn du später Elemente der Seite verändern möchtest.

---

### Möglichkeit 2: Im `<head>` mit `defer`

Eine moderne und sehr verbreitete Variante ist das Attribut `defer`:

```html
<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Beispiel</title>
    <script src="script.js" defer></script>
  </head>
  <body>
    <h1 id="ueberschrift">Hallo!</h1>
  </body>
</html>
```

`defer` bedeutet sinngemäß: „Lade die Datei schon jetzt, führe sie aber erst aus, wenn das HTML vollständig verarbeitet wurde.“

Das hat zwei Vorteile:

- Das JavaScript kann frühzeitig geladen werden.
- Der Code wird erst ausgeführt, wenn die HTML-Elemente verfügbar sind.

> **Empfehlung:** Verwende für externe JavaScript-Dateien häufig `<script src="script.js" defer></script>` im `<head>`. Alternativ kannst du das Skript ohne `defer` direkt vor `</body>` einfügen.

---

## Ein erstes sichtbares Ergebnis

Bisher hast du JavaScript nur über die Konsole überprüft. JavaScript kann aber auch den Inhalt einer Webseite verändern.

Erstelle diese `index.html`:

```html
<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Meine Begrüßung</title>
    <script src="script.js" defer></script>
  </head>
  <body>
    <h1 id="begrüßung">Willkommen!</h1>
  </body>
</html>
```

Schreibe dann in `script.js`:

```js
const überschrift = document.querySelector("#begrüßung");

überschrift.textContent = "Hallo, JavaScript!";
```

Nach dem Neuladen der Webseite verändert sich der Text der Überschrift zu:

```text
Hallo, JavaScript!
```

Noch musst du nicht jedes Detail dieses Codes verstehen. Wichtig ist zunächst:

- `document` steht für die aktuelle HTML-Seite.
- `querySelector()` sucht ein HTML-Element.
- `#begrüßung` meint das Element mit `id="begrüßung"`.
- `textContent` verändert den Text eines Elements.

Mit dem DOM und `querySelector()` beschäftigst du dich später ausführlich.

---

## Häufige Fehler beim Einbinden

### Der Dateiname stimmt nicht

Wenn deine Datei `script.js` heißt, muss der Eintrag exakt so aussehen:

```html
<script src="script.js" defer></script>
```

Diese Varianten funktionieren nicht, wenn es keine passende Datei gibt:

```html
<script src="skript.js" defer></script>
```

```html
<script src="script.js.txt" defer></script>
```

Achte besonders darauf, dass dein Editor die Datei wirklich als `.js` speichert und nicht unbemerkt `.txt` anhängt.

---

### Der Pfad zur Datei ist falsch

Liegt die JavaScript-Datei in einem Unterordner, muss dieser Teil des Pfads angegeben werden:

```text
mein-projekt/
├── index.html
└── js/
    └── script.js
```

Richtig wäre dann:

```html
<script src="js/script.js" defer></script>
```

Ein falscher Pfad führt dazu, dass der Browser die JavaScript-Datei nicht findet.

---

### Die Datei wurde nicht gespeichert

Wenn Änderungen keine Wirkung zeigen:

1. Speichere `index.html`.
2. Speichere `script.js`.
3. Lade die Webseite im Browser neu.
4. Prüfe die Browser-Konsole auf Fehlermeldungen.

Eine typische Fehlermeldung könnte so aussehen:

```text
Uncaught SyntaxError: Unexpected token
```

Sie weist darauf hin, dass JavaScript an einer Stelle nicht korrekt geschrieben wurde. In den nächsten Lektionen lernst du, solche Meldungen besser zu lesen.

---

### Das Skript wird zu früh ausgeführt

Dieses Beispiel kann Probleme verursachen:

```html
<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Zu früh</title>
    <script src="script.js"></script>
  </head>
  <body>
    <h1 id="begrüßung">Willkommen!</h1>
  </body>
</html>
```

Ohne `defer` versucht der Browser, JavaScript bereits im `<head>` auszuführen. Das Element mit der ID `begrüßung` wurde zu diesem Zeitpunkt möglicherweise noch nicht geladen.

Besser:

```html
<script src="script.js" defer></script>
```

Oder du setzt das Skript ans Ende des `<body>`.

---

## Inline-Skript und externe Datei im Vergleich

| Variante | Beispiel | Geeignet für |
|---|---|---|
| JavaScript direkt im HTML | `<script>console.log("Test");</script>` | Sehr kurze Experimente |
| Externe JavaScript-Datei | `<script src="script.js" defer></script>` | Praktisch alle eigenen Projekte |

Für dein weiteres Lernen empfiehlt sich die zweite Variante: Lege eine Datei namens `script.js` an und binde sie mit `defer` im `<head>` ein.

---

## Mini-Übung

Erstelle einen Projektordner mit diesen Dateien:

```text
übung-javascript/
├── index.html
└── script.js
```

### Aufgabe

1. Erstelle eine HTML-Seite mit einer Überschrift.
2. Binde `script.js` mit `defer` ein.
3. Gib in `script.js` deinen Namen mit `console.log()` aus.
4. Öffne die HTML-Datei im Browser und überprüfe die Ausgabe in der Konsole.

### Mögliche Lösung

**index.html**

```html
<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Meine JavaScript-Übung</title>
    <script src="script.js" defer></script>
  </head>
  <body>
    <h1>Ich lerne JavaScript</h1>
  </body>
</html>
```

**script.js**

```js
console.log("Mein Name ist Alex.");
```

Ersetze „Alex“ durch deinen eigenen Namen.

---

## Das Wichtigste auf einen Blick

- Mit `<script>` bindest du JavaScript in eine HTML-Seite ein.
- JavaScript kann direkt im HTML oder in einer eigenen `.js`-Datei stehen.
- Eine externe Datei bindest du mit `src` ein.
- Mit `defer` wird das Skript erst ausgeführt, nachdem das HTML geladen wurde.
- `console.log()` hilft dir, schnell zu prüfen, ob dein JavaScript funktioniert.
- Bei Problemen kontrollierst du Dateinamen, Pfade, gespeicherte Änderungen und die Browser-Konsole.

# Die Browser-Konsole verwenden

## Was ist die Browser-Konsole?

Die **Browser-Konsole** ist ein Bereich in den Entwicklerwerkzeugen deines Browsers. Dort kannst du JavaScript direkt ausprobieren, Ausgaben lesen und Fehlermeldungen untersuchen.

Stell sie dir wie ein kleines Testfeld für JavaScript vor:

- Du schreibst einen Befehl.
- Der Browser führt ihn sofort aus.
- Du siehst direkt ein Ergebnis oder eine Fehlermeldung.

Das ist besonders praktisch, wenn du gerade lernst. Du musst nicht für jeden kleinen Versuch eine komplette HTML-Datei anlegen.

> **Wichtig:** Die Konsole ist vor allem ein Werkzeug zum Ausprobieren und Fehlersuchen. JavaScript-Code für deine Webseite schreibst du später normalerweise in eine JavaScript-Datei oder in ein `<script>`-Element.

---

## Entwicklerwerkzeuge öffnen

Die Konsole ist Teil der **Entwicklerwerkzeuge**. Fast alle modernen Browser besitzen sie, zum Beispiel Chrome, Edge, Firefox und Safari.

### Tastenkürzel

| Betriebssystem | Entwicklerwerkzeuge öffnen |
|---|---|
| Windows / Linux | `F12` oder `Strg` + `Umschalt` + `I` |
| macOS | `Cmd` + `Option` + `I` |

Danach erscheint meist ein Bereich rechts neben oder unter der Webseite.

Wähle dort den Tab **Console** oder **Konsole** aus.

> Je nach Browser kann die Sprache der Entwicklerwerkzeuge Englisch sein. Suche dann nach dem Begriff **Console**.

### Über das Browser-Menü

Falls ein Tastenkürzel nicht funktioniert, kannst du die Entwicklerwerkzeuge auch über das Menü öffnen:

1. Öffne eine beliebige Webseite.
2. Klicke mit der rechten Maustaste auf einen freien Bereich der Seite.
3. Wähle **Untersuchen**, **Element untersuchen** oder **Inspect**.
4. Klicke auf den Bereich **Console**.

---

## Deinen ersten Befehl eingeben

Am unteren Rand der Konsole findest du meist eine Zeile mit einem Zeichen wie `>` oder `>>`. Das ist die Eingabezeile.

Klicke in diese Zeile, schreibe folgenden Ausdruck und drücke die Eingabetaste:

```js
2 + 3
```

Die Konsole zeigt direkt das Ergebnis:

```js
5
```

Du hast gerade JavaScript im Browser ausgeführt. Der Ausdruck `2 + 3` wird berechnet, und das Ergebnis erscheint darunter.

Probiere weitere Rechnungen aus:

```js
10 * 4
```

```js
20 / 5
```

```js
8 - 11
```

JavaScript kann also unter anderem als Taschenrechner verwendet werden. Natürlich kann die Sprache viel mehr — aber dieses unmittelbare Ausprobieren bleibt auch bei komplexeren Aufgaben sehr hilfreich.

---

## Mit Texten arbeiten

Du kannst in der Konsole auch Texte eingeben. In JavaScript müssen Texte in Anführungszeichen stehen:

```js
"Hallo JavaScript"
```

Nach dem Drücken der Eingabetaste zeigt die Konsole den Text an.

Auch einfache Textverknüpfungen funktionieren:

```js
"Hallo " + "Welt"
```

Das Ergebnis lautet:

```js
"Hallo Welt"
```

Der Operator `+` kann bei Texten also zwei Texte zusammensetzen. Solche Texte werden in JavaScript später **Strings** genannt.

> Schreibe Text immer mit passenden Anführungszeichen: entweder `"..."` oder `'...'`. Öffnest du einen Text mit einem Anführungszeichen, musst du ihn auch mit derselben Art schließen.

---

## Befehle ausführen und Ergebnisse lesen

Wenn du etwas in die Konsole eingibst, passieren zwei Dinge:

1. JavaScript versucht, deinen Code auszuführen.
2. Die Konsole zeigt ein Ergebnis, eine Ausgabe oder einen Fehler.

Ein erfolgreicher Versuch könnte so aussehen:

```js
"Mein Alter: " + 20
```

Die Konsole gibt dann etwa Folgendes zurück:

```js
"Mein Alter: 20"
```

Das Ergebnis steht üblicherweise direkt unter deinem eingegebenen Befehl.

### Mehrzeiligen Code schreiben

Kurze Befehle kannst du direkt mit der Eingabetaste ausführen. Für mehrere Zeilen gilt in vielen Browsern:

- `Umschalt` + `Enter` erzeugt eine neue Zeile.
- `Enter` führt den fertigen Code aus.

Das brauchst du später beispielsweise bei Bedingungen oder Funktionen. Am Anfang reichen jedoch einzelne Zeilen völlig aus.

---

## Frühere Befehle wiederverwenden

Mit den Pfeiltasten `↑` und `↓` kannst du durch bereits eingegebene Befehle blättern.

Das ist nützlich, wenn du einen Befehl leicht verändern möchtest. Du musst ihn dann nicht vollständig neu schreiben.

Beispiel:

1. Gib diesen Befehl ein:

   ```js
   5 * 5
   ```

2. Drücke die Pfeiltaste `↑`.
3. Ändere den Befehl zu:

   ```js
   5 * 10
   ```

4. Drücke erneut `Enter`.

So kannst du schnell Varianten ausprobieren.

---

## Fehlermeldungen verstehen

Fehler gehören zum Programmieren dazu. Die Konsole hilft dir, sie zu entdecken.

Gib zum Beispiel diesen unvollständigen Text ein:

```js
"Hallo
```

JavaScript kann nicht erkennen, wo der Text endet. Deshalb erscheint eine Fehlermeldung, oft rot markiert.

Oder probiere diesen Namen aus:

```js
meinName
```

Wenn `meinName` noch nicht definiert wurde, meldet JavaScript in etwa:

```text
Uncaught ReferenceError: meinName is not defined
```

Diese Meldung bedeutet: JavaScript kennt den Namen `meinName` noch nicht.

### Fehlermeldungen lesen

Eine Fehlermeldung wirkt am Anfang oft kompliziert. Suche zunächst nach diesen Informationen:

- **Art des Fehlers:** zum Beispiel `SyntaxError` oder `ReferenceError`
- **Beschreibung:** Was genau ist nicht in Ordnung?
- **Zeile:** Wo ist der Fehler aufgetreten?

Du musst nicht jede Meldung sofort vollständig verstehen. Wichtig ist, dass du erkennst: *Hier ist etwas schiefgegangen — und die Konsole liefert Hinweise.*

> **Merke:** Eine rote Meldung ist kein Grund zur Sorge. Sie ist eine hilfreiche Rückmeldung des Browsers.

---

## Die Konsole leeren

Nach mehreren Versuchen kann die Konsole schnell unübersichtlich werden. Du kannst ihre bisherigen Inhalte löschen.

Dafür gibt es meist ein Symbol mit einem durchgestrichenen Kreis oder Mülleimer. Häufig funktioniert auch dieses Tastenkürzel:

| Betriebssystem | Konsole leeren |
|---|---|
| Windows / Linux | `Strg` + `L` |
| macOS | `Cmd` + `K` |

Das Leeren entfernt nur die sichtbaren Meldungen aus der Konsole. Es verändert nicht deine Webseite und löscht keinen Code aus deinen Dateien.

---

## Konsole und Webseite gehören zusammen

Die Konsole arbeitet immer im Zusammenhang mit der gerade geöffneten Webseite.

Wenn du beispielsweise die Konsole auf einer Suchmaschine öffnest und dort JavaScript eingibst, wird der Code in dieser geöffneten Seite ausgeführt. Öffnest du anschließend deine eigene HTML-Datei, gehört die Konsole zu deiner eigenen Seite.

Das ist später wichtig, wenn du Fehler in deinem Projekt suchst:

1. Öffne deine HTML-Datei im Browser.
2. Öffne die Entwicklerwerkzeuge.
3. Wechsle zur Konsole.
4. Lade die Seite bei Bedarf neu.
5. Prüfe, ob Meldungen oder Fehler erscheinen.

### Seite neu laden

Wenn du Änderungen an einer HTML- oder JavaScript-Datei gespeichert hast, musst du die Webseite normalerweise neu laden. Nutze dafür:

- den Aktualisieren-Button im Browser,
- `F5` unter Windows/Linux,
- `Cmd` + `R` unter macOS.

Danach zeigt die Konsole die Meldungen der neu geladenen Seite an.

---

## Ein sinnvoller Arbeitsablauf

Beim Lernen kannst du die Konsole auf zwei Arten verwenden:

### Zum Ausprobieren

Du möchtest wissen, was ein kurzer JavaScript-Ausdruck macht:

```js
7 > 3
```

```js
"Rot" + "Blau"
```

Gib ihn direkt in die Konsole ein und sieh dir das Ergebnis an.

### Zum Fehlersuchen

Du hast JavaScript in deine Webseite eingebunden, aber etwas funktioniert nicht wie erwartet:

1. Öffne deine Seite im Browser.
2. Öffne die Konsole.
3. Suche nach roten Fehlermeldungen.
4. Lies die genannte Datei und Zeilennummer.
5. Korrigiere den Code und lade die Seite neu.

Diese Gewohnheit spart dir später viel Zeit.

---

## Häufige Anfängerfehler

### Die Konsole zeigt nichts Neues an

Prüfe, ob du wirklich die Eingabetaste gedrückt hast. Achte außerdem darauf, dass der Cursor in der Eingabezeile der Konsole steht.

### Die Eingabe ist rot markiert

Oft fehlt ein Anführungszeichen, eine Klammer oder ein anderes Zeichen. Vergleiche Anfang und Ende deines Befehls sorgfältig.

Zum Beispiel ist dieser Text korrekt:

```js
"Ich lerne JavaScript"
```

Dieser Text ist nicht korrekt:

```js
"Ich lerne JavaScript
```

### Ich sehe eine rote Fehlermeldung, obwohl ich nichts eingegeben habe

Nicht jede Meldung stammt zwingend von deinem Code. Manche Webseiten, Browser-Erweiterungen oder eingebundenen Dienste erzeugen selbst Meldungen.

Wenn du an deiner eigenen Übungsdatei arbeitest, sind Fehlermeldungen aber oft ein wichtiger Hinweis auf einen Fehler in deinem JavaScript.

### Ich habe die Konsole geschlossen

Kein Problem. Öffne die Entwicklerwerkzeuge einfach erneut mit `F12` oder `Strg` + `Umschalt` + `I`.

---

## Übung: Die Konsole erkunden

Öffne die Konsole in deinem Browser und führe diese Eingaben nacheinander aus:

```js
4 + 6
```

```js
12 * 3
```

```js
"Java" + "Script"
```

```js
100 / 4
```

Beantworte anschließend diese Fragen:

1. Welches Ergebnis liefert `4 + 6`?
2. Was passiert bei `"Java" + "Script"`?
3. Welche Fehlermeldung erscheint, wenn du einen unbekannten Namen wie `lieblingsFarbe` eingibst?
4. Wie kannst du einen früheren Befehl erneut anzeigen?

### Lösungen

1. Das Ergebnis ist `10`.
2. Die beiden Texte werden zu `"JavaScript"` verbunden.
3. Meist erscheint ein `ReferenceError`, weil der Name noch nicht definiert wurde.
4. Mit der Pfeiltaste `↑` kannst du zu vorherigen Eingaben zurückkehren.

---

## Das Wichtigste auf einen Blick

- Die **Browser-Konsole** gehört zu den Entwicklerwerkzeugen.
- Du kannst dort JavaScript direkt ausführen und Ergebnisse sofort sehen.
- Mit `F12` oder `Strg` + `Umschalt` + `I` öffnest du meist die Entwicklerwerkzeuge.
- Rote Fehlermeldungen helfen dir beim Finden von Fehlern.
- Die Konsole ist ein ideales Werkzeug, um kurze Ideen schnell auszuprobieren.

Im nächsten Schritt lernst du, wie du mit `console.log()` gezielt eigene Nachrichten aus deinem JavaScript-Code in der Konsole ausgibst.

# Erste Ausgabe mit `console.log()`

## Deine erste JavaScript-Ausgabe

Mit `console.log()` kannst du Werte und Texte in der **Browser-Konsole** anzeigen. Das ist besonders hilfreich, um JavaScript auszuprobieren, Zwischenergebnisse zu prüfen und Fehler zu finden.

Die Ausgabe erscheint **nicht auf der Webseite selbst**, sondern nur in den Entwicklerwerkzeugen des Browsers.

```js
console.log("Hallo Welt!");
```

Wenn du diesen Code ausführst, siehst du in der Konsole:

```text
Hallo Welt!
```

> 💡 `console` steht für die Browser-Konsole. `log()` ist eine Funktion, die etwas dort hineinschreibt.

---

## Texte ausgeben

Texte werden in JavaScript als *Strings* bezeichnet. Ein String steht zwischen Anführungszeichen.

```js
console.log("Willkommen bei JavaScript!");
console.log('Auch einfache Anführungszeichen funktionieren.');
```

Beide Varianten sind gültig. Verwende am besten innerhalb eines Projekts möglichst einheitlich entweder doppelte oder einfache Anführungszeichen.

Bei einem Satz mit einem Apostroph kann es sinnvoll sein, die andere Art von Anführungszeichen zu verwenden:

```js
console.log("Heute lernen wir JavaScript.");
console.log('Das ist Annas erstes Programm.');
```

---

## Zahlen ausgeben

Zahlen brauchen keine Anführungszeichen:

```js
console.log(42);
console.log(3.14);
console.log(-7);
```

Die Konsole zeigt:

```text
42
3.14
-7
```

Der Unterschied ist wichtig:

```js
console.log(25);
console.log("25");
```

Die erste Ausgabe ist eine **Zahl**, die zweite Ausgabe ist ein **Text**. In der Konsole sehen beide zunächst ähnlich aus, aber JavaScript behandelt sie unterschiedlich.

---

## Rechenaufgaben direkt prüfen

`console.log()` kann nicht nur feste Werte ausgeben. Du kannst damit auch Berechnungen überprüfen:

```js
console.log(5 + 3);
console.log(10 - 4);
console.log(6 * 7);
console.log(20 / 5);
```

Die Konsole zeigt:

```text
8
6
42
4
```

JavaScript berechnet zuerst den Ausdruck und gibt anschließend das Ergebnis aus.

```js
console.log(2 + 3 * 4);
```

Das Ergebnis lautet:

```text
14
```

Wie in der Mathematik wird die Multiplikation vor der Addition ausgeführt.

---

## Mehrere Ausgaben schreiben

Du kannst `console.log()` beliebig oft verwenden. Jede Anweisung steht üblicherweise in einer eigenen Zeile:

```js
console.log("Mein erstes JavaScript-Programm");
console.log("Ich übe die Konsole.");
console.log(10 + 5);
```

In der Konsole erscheinen dann drei getrennte Zeilen:

```text
Mein erstes JavaScript-Programm
Ich übe die Konsole.
15
```

Das Semikolon am Ende ist in vielen Fällen nicht zwingend erforderlich. Für den Einstieg ist es aber eine gute Gewohnheit, jede JavaScript-Anweisung mit einem Semikolon abzuschließen.

---

## Werte beschreiben

Bei mehreren Ausgaben ist es manchmal nicht sofort klar, was eine Zahl bedeutet. Schreibe deshalb eine erklärende Ausgabe dazu:

```js
console.log("Punkte:");
console.log(120);
```

Noch übersichtlicher ist es, Text und Wert gemeinsam auszugeben:

```js
console.log("Punkte:", 120);
console.log("Temperatur:", 21);
```

Die Konsole zeigt beispielsweise:

```text
Punkte: 120
Temperatur: 21
```

Zwischen den Argumenten von `console.log()` steht ein Komma. So kannst du mehrere Werte in einer Ausgabe prüfen.

---

## Kommentare für Menschen

Kommentare helfen dir und anderen Menschen, den Code zu verstehen. JavaScript ignoriert Kommentare beim Ausführen.

Ein einzeiliger Kommentar beginnt mit `//`:

```js
// Begrüßung in der Konsole ausgeben
console.log("Hallo!");
```

Du kannst Kommentare auch hinter eine Anweisung schreiben:

```js
console.log(18 + 4); // Ergebnis einer kleinen Rechnung
```

Nutze Kommentare vor allem dann, wenn ein Codeabschnitt nicht sofort verständlich ist. Sehr einfache Zeilen wie `console.log("Hallo");` brauchen meist keinen Kommentar.

---

## Häufige Fehler

### Anführungszeichen vergessen

Ein Text ohne Anführungszeichen führt zu einem Fehler:

```js
console.log(Hallo Welt);
```

Richtig ist:

```js
console.log("Hallo Welt");
```

### Unterschiedliche Anführungszeichen mischen

Öffnende und schließende Anführungszeichen müssen zusammenpassen:

```js
console.log("Hallo');
```

Richtig:

```js
console.log("Hallo");
```

Oder:

```js
console.log('Hallo');
```

### Klammern vergessen

`log` muss mit runden Klammern aufgerufen werden:

```js
console.log "Hallo";
```

Richtig:

```js
console.log("Hallo");
```

### Groß- und Kleinschreibung verwechseln

JavaScript unterscheidet Groß- und Kleinbuchstaben. Deshalb funktioniert diese Schreibweise nicht:

```js
Console.log("Hallo");
```

Richtig ist ausschließlich:

```js
console.log("Hallo");
```

---

## Praktisches Beispiel: Ein kleiner Konsolen-Steckbrief

Erstelle mehrere Ausgaben, die einen kurzen Steckbrief darstellen:

```js
console.log("Name: Mia");
console.log("Alter: 16");
console.log("Lieblingsfach: Informatik");
console.log("Lieblingszahl:", 7);
```

Du kannst die Angaben natürlich durch deine eigenen ersetzen.

> ✅ Öffne nach dem Speichern die Browser-Konsole und aktualisiere die Seite. Erst dann wird dein JavaScript-Code erneut ausgeführt.

---

## Übung

Schreibe ein JavaScript-Programm mit mindestens vier `console.log()`-Ausgaben:

1. Gib eine Begrüßung aus.
2. Gib deinen Vornamen aus.
3. Lass JavaScript eine Rechnung lösen, zum Beispiel `12 * 8`.
4. Gib einen Text und eine Zahl gemeinsam aus, zum Beispiel deine Lieblingszahl.

Eine mögliche Lösung:

```js
console.log("Hallo, Konsole!");
console.log("Mein Name ist Alex.");
console.log(12 * 8);
console.log("Meine Lieblingszahl ist:", 9);
```

---

## Das Wichtigste auf einen Blick

- Mit `console.log()` gibst du Informationen in der Browser-Konsole aus.
- Texte stehen in Anführungszeichen, Zahlen nicht.
- JavaScript kann Berechnungen direkt in `console.log()` ausführen.
- Mehrere Werte trennst du mit einem Komma.
- Achte genau auf Schreibweise, Klammern und Anführungszeichen.

`console.log()` wird dich während des gesamten JavaScript-Lernens begleiten. Es ist eines der wichtigsten Werkzeuge, um zu verstehen, was dein Programm gerade macht.

# Variablen, Werte und Operatoren

Hier lernst du, Informationen in Variablen zu speichern und mit verschiedenen Datentypen zu arbeiten. Zahlen, Texte, Wahrheitswerte und einfache Berechnungen bilden die Grundlage fast aller Programme. Außerdem erfährst du, wie Vergleichs- und Rechenoperatoren eingesetzt werden.

# Variablen mit `let` und `const`

## Wozu dienen Variablen?

Variablen sind **benannte Speicherplätze** für Werte. Stell dir eine Variable wie eine beschriftete Box vor: Du legst einen Wert hinein und kannst ihn später über ihren Namen wieder verwenden.

```js
let name = "Mira";
let alter = 16;

console.log(name);
console.log(alter);
```

Die Konsole zeigt:

```text
Mira
16
```

Statt denselben Wert immer wieder direkt in den Code zu schreiben, gibst du ihm also einen aussagekräftigen Namen.

```js
console.log("Mira");
console.log("Mira");
console.log("Mira");
```

Praktischer ist:

```js
const name = "Mira";

console.log(name);
console.log(name);
console.log(name);
```

Wenn sich der Name ändern soll, musst du ihn dann nur an **einer Stelle** anpassen.

---

## Eine Variable mit `let` erstellen

Mit `let` erstellst du eine Variable, deren Wert sich später ändern darf.

```js
let punkte = 0;

console.log(punkte);
```

Zunächst enthält `punkte` den Wert `0`. Später kannst du einen neuen Wert zuweisen:

```js
let punkte = 0;

punkte = 10;

console.log(punkte);
```

Die Ausgabe lautet:

```text
10
```

Wichtig: Beim ersten Erstellen steht `let` vor dem Variablennamen. Wenn du den Wert später nur änderst, schreibst du **kein** `let` mehr.

```js
let punkte = 0;

// richtig
punkte = 10;
```

Dieser Code wäre falsch:

```js
let punkte = 0;

let punkte = 10;
```

JavaScript meldet hier einen Fehler, weil die Variable `punkte` im gleichen Bereich bereits erstellt wurde.

### Wert schrittweise verändern

Eine Variable kann auch mit ihrem bisherigen Wert weitergerechnet werden.

```js
let punkte = 5;

punkte = punkte + 3;

console.log(punkte);
```

Die Variable enthält danach den Wert `8`.

Das kommt häufig vor, etwa bei Punkteständen, Warenkörben oder Zählern.

```js
let besucher = 0;

besucher = besucher + 1;
besucher = besucher + 1;

console.log(besucher);
```

Ausgabe:

```text
2
```

---

## Eine Konstante mit `const` erstellen

Mit `const` erstellst du eine **Konstante**. Ihr Wert darf nach dem Erstellen nicht durch einen neuen Wert ersetzt werden.

```js
const geburtsjahr = 2008;

console.log(geburtsjahr);
```

Dieser Code funktioniert nicht:

```js
const geburtsjahr = 2008;

geburtsjahr = 2009;
```

Der Browser meldet einen Fehler, weil eine mit `const` erstellte Variable nicht neu zugewiesen werden darf.

Verwende `const`, wenn ein Wert in deinem Programm gleich bleiben soll:

```js
const seitentitel = "Mein Profil";
const maximaleTeilnehmerzahl = 20;
const istEingeloggt = true;
```

Ein besonders häufiger Fall sind Texte, die sich nicht ändern sollen:

```js
const begruessung = "Willkommen auf meiner Webseite!";

console.log(begruessung);
```

---

## `let` oder `const`?

Die wichtigste Frage lautet:

> **Soll dieser Wert später ersetzt werden?**

- Verwende `const`, wenn der Wert gleich bleibt.
- Verwende `let`, wenn sich der Wert ändern kann.

```js
const spielName = "Zahlenraten";
let punktestand = 0;

punktestand = 1;

console.log(spielName);
console.log(punktestand);
```

In diesem Beispiel bleibt der Spielname immer gleich. Der Punktestand kann sich dagegen während des Spiels ändern.

Eine gute Gewohnheit ist:

> Verwende zuerst `const`. Wechsle nur zu `let`, wenn du den Wert später wirklich verändern musst.

Dadurch wird dein Code leichter verständlich. Andere Personen sehen sofort, welche Werte feststehen und welche sich im Ablauf ändern können.

---

## Variablen ohne Anfangswert

Du kannst eine Variable mit `let` auch zunächst ohne Wert erstellen:

```js
let lieblingsfarbe;

console.log(lieblingsfarbe);
```

Die Ausgabe ist:

```text
undefined
```

`undefined` bedeutet: Es wurde noch kein Wert gespeichert.

Später kannst du einen Wert zuweisen:

```js
let lieblingsfarbe;

lieblingsfarbe = "Blau";

console.log(lieblingsfarbe);
```

Bei `const` ist das nicht erlaubt. Eine Konstante braucht **sofort** einen Wert.

```js
// falsch
const lieblingsfarbe;
```

Richtig wäre:

```js
const lieblingsfarbe = "Blau";
```

---

## Gute Namen für Variablen

Der Name einer Variable sollte erklären, **welchen Wert** sie enthält.

Weniger verständlich:

```js
let x = 18;
let a = "Lea";
```

Besser:

```js
let alter = 18;
const vorname = "Lea";
```

Bei längeren Namen wird in JavaScript üblicherweise die **camelCase-Schreibweise** verwendet: Das erste Wort beginnt klein, jedes weitere Wort beginnt mit einem Großbuchstaben.

```js
let anzahlDerBesucher = 42;
const aktuellerBenutzername = "LeaM";
let istMenueGeoeffnet = false;
```

Diese Schreibweise erinnert mit den „Höckern“ an einen Kamelrücken – daher der Name *camelCase*.

### Regeln für Variablennamen

Ein Variablenname darf:

- Buchstaben enthalten,
- Zahlen enthalten, aber **nicht am Anfang**,
- `_` und `$` enthalten.

```js
let spieler1 = "Noah";
let _intern = "Test";
let $preis = 9;
```

Für gut lesbaren Code solltest du `$` und `_` jedoch nur verwenden, wenn es einen klaren Grund gibt.

Ein Variablenname darf nicht mit einer Zahl beginnen:

```js
// falsch
let 1spieler = "Noah";
```

Außerdem sind bestimmte Wörter bereits von JavaScript reserviert. Diese darfst du nicht als Variablennamen verwenden:

```js
// falsch
let const = 5;
let if = true;
```

---

## Groß- und Kleinschreibung beachten

JavaScript unterscheidet zwischen Groß- und Kleinschreibung. `name`, `Name` und `NAME` sind drei unterschiedliche Bezeichnungen.

```js
const name = "Mira";
const Name = "Jonas";

console.log(name);
console.log(Name);
```

Die Ausgabe lautet:

```text
Mira
Jonas
```

Achte deshalb genau darauf, einen Variablennamen überall gleich zu schreiben.

```js
const lieblingsEssen = "Pizza";

console.log(lieblingsessen);
```

Dieser Code erzeugt einen Fehler: `lieblingsessen` ist nicht dasselbe wie `lieblingsEssen`.

---

## Ein vollständiges Beispiel

Im folgenden Beispiel werden feste Angaben mit `const` gespeichert. Der Punktestand darf sich ändern und wird deshalb mit `let` erstellt.

```js
const spielername = "Aylin";
const zielPunkte = 10;

let punktestand = 0;

punktestand = punktestand + 4;

console.log("Spielerin: " + spielername);
console.log("Punktestand: " + punktestand);
console.log("Ziel: " + zielPunkte);
```

Die Konsole zeigt:

```text
Spielerin: Aylin
Punktestand: 4
Ziel: 10
```

Der Teil mit `+` verbindet hier Texte und Werte zu einer gemeinsamen Ausgabe. Wie du mit Texten und Zahlen noch genauer arbeitest, lernst du in den nächsten Abschnitten.

---

## Typische Fehler

### `const` neu zuweisen

```js
const anzahl = 3;
anzahl = 4;
```

**Problem:** Eine Konstante darf nicht neu zugewiesen werden.

**Lösung:** Wenn sich der Wert ändern soll, verwende `let`.

```js
let anzahl = 3;
anzahl = 4;
```

### Variable versehentlich erneut erstellen

```js
let nachricht = "Hallo";
let nachricht = "Guten Morgen";
```

**Problem:** `nachricht` wurde im gleichen Bereich bereits erstellt.

**Lösung:** Beim Ändern nur den Namen schreiben.

```js
let nachricht = "Hallo";
nachricht = "Guten Morgen";
```

### Namen unterschiedlich schreiben

```js
const benutzerName = "Sam";
console.log(benutzername);
```

**Problem:** `benutzerName` und `benutzername` sind unterschiedliche Namen.

**Lösung:** Schreibe den Namen exakt gleich.

```js
const benutzerName = "Sam";
console.log(benutzerName);
```

---

## Merke dir

- Variablen speichern Werte unter einem Namen.
- Mit `let` erstellst du Werte, die später verändert werden können.
- Mit `const` erstellst du Werte, die nicht neu zugewiesen werden dürfen.
- Verwende verständliche Namen wie `punktestand` oder `istEingeloggt`.
- JavaScript unterscheidet Groß- und Kleinschreibung.
- Erstelle eine Variable nur einmal mit `let` oder `const`. Danach weist du neue Werte ohne diese Wörter zu.

---

## Übung: Mein Profil

Erstelle Variablen für ein kleines Profil:

1. Speichere einen Namen, ein Alter und eine Lieblingsfarbe.
2. Entscheide für jeden Wert, ob `let` oder `const` besser passt.
3. Gib alle Werte mit `console.log()` aus.
4. Ändere anschließend das Alter um eins.

Eine mögliche Lösung:

```js
const name = "Emil";
let alter = 14;
const lieblingsfarbe = "Grün";

console.log(name);
console.log(alter);
console.log(lieblingsfarbe);

alter = alter + 1;

console.log(alter);
```

**Zusatzaufgabe:** Erstelle einen Punktestand mit dem Anfangswert `0`. Erhöhe ihn dreimal und gib nach jeder Änderung den neuen Wert in der Konsole aus.

# Zahlen, Strings und Booleans

## Drei wichtige Datentypen

Variablen speichern Werte. In JavaScript kann ein Wert unterschiedliche Arten haben. Drei besonders wichtige Datentypen sind:

- **Zahlen** für Mengen, Rechnungen oder Messwerte
- **Strings** für Texte
- **Booleans** für Wahrheitswerte: wahr oder falsch

```js
let alter = 18;
let name = "Mira";
let istAngemeldet = true;
```

JavaScript erkennt automatisch, welche Art von Wert in einer Variablen gespeichert ist. Du musst den Datentyp normalerweise nicht vorher festlegen.

---

## Zahlen

Zahlen werden in JavaScript ohne Anführungszeichen geschrieben.

```js
let punkte = 42;
let temperatur = -3;
let preis = 19.99;
```

Mit Zahlen kannst du rechnen:

```js
let a = 10;
let b = 5;

let summe = a + b;
console.log(summe); // 15
```

Auch negative Zahlen und Dezimalzahlen sind möglich:

```js
let kontostand = -25;
let breite = 12.5;

console.log(kontostand);
console.log(breite);
```

> **Wichtig:** JavaScript verwendet für Dezimalzahlen einen Punkt, kein Komma.

```js
let richtig = 3.14;
let falsch = 3,14;
```

Die zweite Zeile speichert nicht die Dezimalzahl `3.14`. Verwende deshalb immer einen Punkt.

### Zahlen prüfen

Mit `typeof` kannst du herausfinden, welchen Datentyp ein Wert hat:

```js
let anzahl = 7;

console.log(typeof anzahl); // "number"
```

Der Datentyp für Zahlen heißt in JavaScript immer `number` — sowohl für ganze Zahlen als auch für Dezimalzahlen.

---

## Strings: Texte speichern

Ein **String** ist eine Zeichenkette, also Text. Strings stehen in Anführungszeichen.

```js
let vorname = "Lea";
let stadt = "Hamburg";
let begruessung = "Guten Morgen!";
```

Du kannst für Strings doppelte oder einfache Anführungszeichen verwenden:

```js
let text1 = "Hallo";
let text2 = 'Willkommen';

console.log(text1);
console.log(text2);
```

Beide Varianten funktionieren. Wichtig ist nur: Ein String muss mit derselben Art von Anführungszeichen beginnen und enden.

```js
let korrekt = "Das ist ein Text.";
let auchKorrekt = 'Das ist ebenfalls ein Text.';
```

### Anführungszeichen im Text

Möchtest du Anführungszeichen *innerhalb* eines Textes verwenden, kannst du außen eine andere Variante wählen:

```js
let zitat = 'Mira sagt: "JavaScript macht Spaß."';

console.log(zitat);
```

Oder umgekehrt:

```js
let frage = "Hast du heute schon 'Hallo' gesagt?";

console.log(frage);
```

### Strings verbinden

Mit dem Pluszeichen `+` lassen sich Strings zusammenfügen. Das nennt man **Verkettung**.

```js
let vorname = "Noah";
let nachname = "Schmidt";

let vollerName = vorname + " " + nachname;

console.log(vollerName); // Noah Schmidt
```

Das Leerzeichen zwischen den Namen musst du selbst als String `" "` ergänzen.

Auch feste Texte und Variablen können verbunden werden:

```js
let name = "Aylin";
let begruessung = "Hallo, " + name + "!";

console.log(begruessung); // Hallo, Aylin!
```

### Moderne Schreibweise mit Template Strings

Template Strings sind besonders praktisch, wenn du Variablen in einen Text einsetzen möchtest. Sie verwenden umgekehrte Anführungszeichen, sogenannte Backticks:

```js
let name = "Aylin";
let alter = 16;

let text = `Hallo, ich heiße ${name} und bin ${alter} Jahre alt.`;

console.log(text);
```

Innerhalb von `${...}` kannst du Variablen und sogar einfache Berechnungen einsetzen:

```js
let punkte = 8;

console.log(`Du hast ${punkte + 2} Punkte erreicht.`);
```

Für Anfänger reicht zunächst das Verbinden mit `+`. Template Strings wirst du aber in modernem JavaScript sehr häufig sehen.

### String oder Zahl?

Die Anführungszeichen machen einen entscheidenden Unterschied:

```js
let zahl = 12;
let text = "12";

console.log(typeof zahl); // "number"
console.log(typeof text); // "string"
```

`zahl` ist eine echte Zahl. Mit ihr kannst du rechnen. `text` besteht nur aus den Zeichen `1` und `2`.

```js
let ergebnis1 = 12 + 3;
let ergebnis2 = "12" + "3";

console.log(ergebnis1); // 15
console.log(ergebnis2); // 123
```

JavaScript verbindet zwei Strings, statt sie zu addieren.

---

## Booleans: wahr oder falsch

Ein **Boolean** kann nur zwei Werte haben:

- `true` bedeutet *wahr*
- `false` bedeutet *falsch*

Booleans werden **ohne** Anführungszeichen geschrieben.

```js
let istOnline = true;
let istFertig = false;
```

Diese Werte sind besonders wichtig, wenn ein Programm Entscheidungen treffen soll.

```js
let hatTicket = true;

console.log(hatTicket); // true
```

Später kannst du mit `if` prüfen, ob ein Boolean wahr oder falsch ist:

```js
let istAngemeldet = true;

if (istAngemeldet) {
  console.log("Willkommen!");
}
```

Die genaue Schreibweise von `if` lernst du im nächsten Kapitel. Entscheidend ist hier: Die Variable `istAngemeldet` speichert eine einfache Ja-oder-Nein-Information.

### `true` und `"true"` sind nicht dasselbe

Wie bei Zahlen gilt auch hier: Anführungszeichen verändern den Datentyp.

```js
let richtig = true;
let falsch = "true";

console.log(typeof richtig); // "boolean"
console.log(typeof falsch); // "string"
```

`true` ist ein Boolean. `"true"` ist ein String, also Text.

> **Merke:** Die JavaScript-Schreibweise ist immer klein: `true` und `false`.  
> `True` oder `False` funktionieren nicht.

---

## Datentypen mit `typeof` untersuchen

Der Operator `typeof` zeigt dir den Datentyp eines Werts oder einer Variablen an.

```js
let punkte = 100;
let nachricht = "Geschafft!";
let spielLaeuft = true;

console.log(typeof punkte);       // "number"
console.log(typeof nachricht);    // "string"
console.log(typeof spielLaeuft);  // "boolean"
```

Du kannst `typeof` auch direkt mit einem Wert verwenden:

```js
console.log(typeof 25);        // "number"
console.log(typeof "Hallo");   // "string"
console.log(typeof false);     // "boolean"
```

Das ist hilfreich, wenn du unsicher bist, warum eine Rechnung oder ein Vergleich nicht wie erwartet funktioniert.

---

## Werte sinnvoll benennen

Der Name einer Variablen sollte erkennen lassen, welche Information sie enthält:

```js
let produktName = "Trinkflasche";
let lagerBestand = 24;
let istAusverkauft = false;
```

Diese Namen sind verständlicher als:

```js
let a = "Trinkflasche";
let b = 24;
let c = false;
```

Bei Booleans helfen Namen, die wie eine Frage gelesen werden können:

```js
let istSichtbar = true;
let hatGewonnen = false;
let kannSpeichern = true;
```

So ist sofort klar, dass die Variable einen Wahrheitswert enthält.

---

## Typischer Fehler: Zahl als Text

Daten aus Eingabefeldern oder von einer Webseite liegen häufig als String vor. Dann kann eine Rechnung überraschend aussehen:

```js
let alter = "16";
let naechstesJahr = alter + 1;

console.log(naechstesJahr); // 161
```

JavaScript verbindet hier Text: `"16"` und `1` werden zu `"161"`.

Wenn du wirklich rechnen möchtest, wandelst du den String mit `Number()` in eine Zahl um:

```js
let alter = "16";
let naechstesJahr = Number(alter) + 1;

console.log(naechstesJahr); // 17
```

`Number()` brauchst du noch nicht in jedem Detail zu beherrschen. Merke dir aber: Steht eine Zahl in Anführungszeichen, ist sie zunächst Text.

---

## Zusammenfassung

| Datentyp | Beispiel | Bedeutung |
|---|---|---|
| `number` | `42`, `3.14`, `-5` | Zahlen für Berechnungen |
| `string` | `"Hallo"` | Texte und Zeichen |
| `boolean` | `true`, `false` | Wahrheitswerte |
| `typeof` | `typeof name` | Prüft den Datentyp |

Die Anführungszeichen sind besonders wichtig:

```js
let echteZahl = 5;
let textMitZahl = "5";

let wahrheitswert = true;
let textMitTrue = "true";
```

`echteZahl` und `wahrheitswert` haben andere Datentypen als `textMitZahl` und `textMitTrue`.

---

## Übung: Ein kleines Profil

Lege Variablen für ein Profil an:

1. einen Namen als String,
2. ein Alter als Zahl,
3. eine Information, ob die Person JavaScript lernt, als Boolean,
4. eine Begrüßung, die alle Informationen ausgibt.

Eine mögliche Lösung:

```js
let name = "Samira";
let alter = 21;
let lerntJavaScript = true;

console.log(`Hallo, ich bin ${name}.`);
console.log(`Ich bin ${alter} Jahre alt.`);
console.log(`Lerne ich JavaScript? ${lerntJavaScript}`);
```

Prüfe anschließend die Datentypen in der Konsole:

```js
console.log(typeof name);
console.log(typeof alter);
console.log(typeof lerntJavaScript);
```

Ändere zum Testen einmal `alter` zu `"21"` und beobachte, wie sich die Ausgabe von `typeof alter` verändert.

# Rechenoperatoren

Rechenoperatoren ermöglichen es dir, mit Zahlen zu rechnen. Du kannst Werte addieren, abziehen, multiplizieren, dividieren und sogar prüfen, was bei einer Division übrig bleibt.

## Die wichtigsten Rechenoperatoren

| Operator | Bedeutung | Beispiel | Ergebnis |
|---|---|---:|---:|
| `+` | Addition | `4 + 3` | `7` |
| `-` | Subtraktion | `9 - 2` | `7` |
| `*` | Multiplikation | `5 * 3` | `15` |
| `/` | Division | `12 / 4` | `3` |
| `%` | Rest einer Division | `10 % 3` | `1` |
| `**` | Potenz | `2 ** 3` | `8` |

Du kannst Berechnungen direkt in der Konsole ausprobieren:

```js
console.log(8 + 2);
console.log(10 - 4);
console.log(6 * 5);
console.log(20 / 4);
```

Die Konsole gibt aus:

```text
10
6
30
5
```

## Mit Variablen rechnen

Besonders nützlich werden Operatoren, wenn du Werte in Variablen speicherst.

```js
let preis = 12;
let anzahl = 3;

let gesamtpreis = preis * anzahl;

console.log(gesamtpreis);
```

Die Ausgabe lautet:

```text
36
```

JavaScript nimmt den Wert aus `preis`, multipliziert ihn mit dem Wert aus `anzahl` und speichert das Ergebnis in `gesamtpreis`.

Ein weiteres Beispiel:

```js
const aktuellesJahr = 2025;
const geburtsjahr = 2008;

const alter = aktuellesJahr - geburtsjahr;

console.log(alter);
```

## Division und Dezimalzahlen

Mit `/` teilst du eine Zahl durch eine andere.

```js
const strecke = 150;
const stunden = 3;

const geschwindigkeit = strecke / stunden;

console.log(geschwindigkeit);
```

Ergebnis:

```text
50
```

Eine Division kann auch eine Dezimalzahl ergeben:

```js
console.log(7 / 2);
```

Ausgabe:

```text
3.5
```

In JavaScript werden Dezimalzahlen immer mit einem **Punkt** geschrieben, nicht mit einem Komma:

```js
const temperatur = 21.5;
```

Nicht so:

```js
const temperatur = 21,5;
```

Das Komma hat in JavaScript eine andere Bedeutung und führt hier nicht zum gewünschten Ergebnis.

> **Achtung:** Eine Division durch `0` erzeugt in JavaScript normalerweise keinen klassischen Fehler. Das Ergebnis ist `Infinity`.

```js
console.log(10 / 0);
```

## Der Restoperator `%`

Der Operator `%` wird *Restoperator* oder *Modulo-Operator* genannt. Er liefert den Rest einer Division zurück.

```js
console.log(10 % 3);
```

Die `3` passt dreimal in die `10`:

```text
3 * 3 = 9
```

Es bleibt `1` übrig. Deshalb lautet die Ausgabe:

```text
1
```

Weitere Beispiele:

```js
console.log(8 % 2);
console.log(9 % 2);
console.log(15 % 4);
```

Ergebnisse:

```text
0
1
3
```

Der Restoperator ist später sehr praktisch, um gerade und ungerade Zahlen zu erkennen:

```js
const zahl = 14;

console.log(zahl % 2);
```

Ist das Ergebnis `0`, ist die Zahl ohne Rest durch `2` teilbar — also gerade.

## Potenzen berechnen

Mit `**` berechnest du Potenzen.

```js
console.log(2 ** 3);
```

Das bedeutet:

$$
2^3 = 2 \cdot 2 \cdot 2 = 8
$$

Weitere Beispiele:

```js
console.log(5 ** 2);
console.log(10 ** 3);
```

Ausgabe:

```text
25
1000
```

## Die Reihenfolge der Berechnung

JavaScript beachtet bei Berechnungen eine feste Reihenfolge:

1. Klammern
2. Potenzen
3. Multiplikation, Division und Restoperator
4. Addition und Subtraktion

Betrachte dieses Beispiel:

```js
console.log(2 + 3 * 4);
```

Das Ergebnis ist:

```text
14
```

Zuerst wird `3 * 4` berechnet, danach wird `2` addiert.

$$
2 + 3 \cdot 4 = 2 + 12 = 14
$$

Mit Klammern kannst du die Reihenfolge bewusst ändern:

```js
console.log((2 + 3) * 4);
```

Jetzt lautet das Ergebnis:

```text
20
```

$$
[2 + 3] \cdot 4 = 5 \cdot 4 = 20
$$

> **Tipp:** Verwende Klammern, wenn eine Rechnung auf den ersten Blick verständlich sein soll. Das macht deinen Code leichter lesbar.

## Einen Wert verändern

Oft möchtest du den aktuellen Wert einer Variable verändern. Das geht ausführlich so:

```js
let punkte = 10;

punkte = punkte + 5;

console.log(punkte);
```

Die Variable `punkte` enthält danach den Wert `15`.

Dafür gibt es auch Kurzschreibweisen:

```js
let punkte = 10;

punkte += 5;
console.log(punkte);

punkte -= 2;
console.log(punkte);

punkte *= 3;
console.log(punkte);

punkte /= 2;
console.log(punkte);
```

Die einzelnen Anweisungen bedeuten:

| Kurzform | Entspricht |
|---|---|
| `punkte += 5` | `punkte = punkte + 5` |
| `punkte -= 2` | `punkte = punkte - 2` |
| `punkte *= 3` | `punkte = punkte * 3` |
| `punkte /= 2` | `punkte = punkte / 2` |

Für solche Veränderungen brauchst du `let`, denn der Wert wird neu gesetzt. Mit `const` ist das nicht erlaubt:

```js
const leben = 3;

// Fehler:
leben = leben - 1;
```

## Zahlen und Text nicht verwechseln

Der Operator `+` kann Zahlen addieren, aber auch Texte verbinden. Das kann anfangs verwirrend sein.

```js
console.log(4 + 5);
```

Ergebnis:

```text
9
```

Wenn mindestens ein Wert ein String ist, verbindet JavaScript die Werte als Text:

```js
console.log("4" + 5);
```

Ergebnis:

```text
45
```

Auch dieses Beispiel erzeugt Text:

```js
const name = "Mila";
const begruessung = "Hallo, " + name + "!";

console.log(begruessung);
```

Ausgabe:

```text
Hallo, Mila!
```

Bei den anderen Rechenoperatoren versucht JavaScript oft, Text in Zahlen umzuwandeln:

```js
console.log("10" - 2);
console.log("10" * 3);
```

Ausgabe:

```text
8
30
```

Verlasse dich als Anfänger aber nicht darauf. Speichere Zahlen am besten immer als Zahlen — also ohne Anführungszeichen:

```js
const richtigeZahl = 10;
```

Statt:

```js
const textStattZahl = "10";
```

## Praxisbeispiel: Kosten einer Bestellung

In diesem Beispiel berechnest du den Preis für mehrere Artikel und addierst Versandkosten.

```js
const preisProArtikel = 8.5;
const anzahlArtikel = 4;
const versandkosten = 3.99;

const artikelkosten = preisProArtikel * anzahlArtikel;
const gesamtbetrag = artikelkosten + versandkosten;

console.log("Artikelkosten: " + artikelkosten);
console.log("Gesamtbetrag: " + gesamtbetrag);
```

Die Ausgabe ist:

```text
Artikelkosten: 34
Gesamtbetrag: 37.99
```

Der Rechenweg lautet:

$$
4 \cdot 8{,}5 = 34
$$

$$
34 + 3{,}99 = 37{,}99
$$

## Häufige Fehler

### `*` statt `x` verwenden

Für eine Multiplikation verwendest du in JavaScript ein Sternchen:

```js
const ergebnis = 4 * 7;
```

Das Zeichen `x` funktioniert nicht als Rechenoperator:

```js
// Falsch:
const ergebnis = 4 x 7;
```

### Variablenname richtig schreiben

JavaScript unterscheidet genau zwischen verschiedenen Schreibweisen:

```js
const preis = 10;
const gesamt = preis * 2;
```

Das wäre ein Fehler:

```js
const preis = 10;
const gesamt = Preis * 2;
```

`preis` und `Preis` sind für JavaScript unterschiedliche Namen.

### Ergebnis nicht speichern

Diese Rechnung funktioniert, aber ihr Ergebnis wird nur in der Konsole ausgegeben:

```js
console.log(6 * 7);
```

Wenn du das Ergebnis später weiterverwenden möchtest, speichere es in einer Variable:

```js
const ergebnis = 6 * 7;

console.log(ergebnis);
```

## Übung

1. Erstelle zwei Variablen `breite` und `hoehe`. Berechne die Fläche eines Rechtecks und gib sie aus.
2. Eine Pizza kostet `9.5`. Berechne den Preis für `3` Pizzen.
3. Setze `punkte` auf `20`. Ziehe anschließend `7` Punkte ab und gib den neuen Wert aus.
4. Prüfe mit `%`, welchen Rest die Division von `25` durch `4` hat.
5. Berechne zuerst `5 + 3 * 2` und danach `(5 + 3) * 2`. Vergleiche die Ergebnisse.

## Mögliche Lösungen

```js
const breite = 8;
const hoehe = 5;

const flaeche = breite * hoehe;

console.log(flaeche);
```

```js
const pizzaPreis = 9.5;
const anzahlPizzen = 3;

const gesamtpreis = pizzaPreis * anzahlPizzen;

console.log(gesamtpreis);
```

```js
let punkte = 20;

punkte -= 7;

console.log(punkte);
```

```js
console.log(25 % 4);
```

```js
console.log(5 + 3 * 2);
console.log((5 + 3) * 2);
```

**Merke:** Rechenoperatoren arbeiten mit Zahlen und erzeugen neue Werte. Speichere wichtige Ergebnisse in Variablen, nutze Klammern für klare Berechnungen und achte darauf, Zahlen nicht versehentlich als Text zu speichern.

# Vergleiche und logische Operatoren

## Vergleiche: Werte gegenüberstellen

Mit Vergleichsoperatoren prüfst du, wie zwei Werte zueinander stehen. Das Ergebnis eines Vergleichs ist immer ein Boolean:

- `true` bedeutet: Die Aussage stimmt.
- `false` bedeutet: Die Aussage stimmt nicht.

```js
console.log(5 > 3);    // true
console.log(5 < 3);    // false
console.log(5 === 5);  // true
```

Vergleiche sind wichtig, weil ein Programm damit später Entscheidungen treffen kann, etwa: „Ist die Person alt genug?“ oder „Ist ein Eingabefeld leer?“

## Die wichtigsten Vergleichsoperatoren

| Operator | Bedeutung | Beispiel | Ergebnis |
|---|---|---|---|
| `===` | gleich | `5 === 5` | `true` |
| `!==` | nicht gleich | `5 !== 3` | `true` |
| `>` | größer als | `10 > 7` | `true` |
| `<` | kleiner als | `4 < 2` | `false` |
| `>=` | größer oder gleich | `18 >= 18` | `true` |
| `<=` | kleiner oder gleich | `12 <= 10` | `false` |

Schreibe die Ergebnisse testweise in die Konsole:

```js
const alter = 16;

console.log(alter >= 18); // false
console.log(alter < 18);  // true
console.log(alter === 16); // true
```

> **Merke:** Ein einzelnes Gleichheitszeichen `=` weist einer Variablen einen Wert zu. Drei Gleichheitszeichen `===` vergleichen zwei Werte.

```js
const punkte = 10; // Wert zuweisen

console.log(punkte === 10); // Werte vergleichen
```

## Strenger Vergleich mit `===`

In JavaScript gibt es zwei Arten, Gleichheit zu vergleichen:

```js
console.log(5 == "5");  // true
console.log(5 === "5"); // false
```

Der Unterschied:

- `==` vergleicht Werte recht locker. JavaScript versucht dabei, Datentypen umzuwandeln.
- `===` vergleicht **Wert und Datentyp**. Zahl und Text sind also nicht gleich.

Im ersten Beispiel wird der String `"5"` automatisch in die Zahl `5` umgewandelt. Beim strengen Vergleich mit `===` passiert das nicht.

```js
const alterAlsZahl = 18;
const alterAlsText = "18";

console.log(alterAlsZahl === alterAlsText); // false
```

Für Anfänger und in modernem JavaScript gilt eine klare Empfehlung:

> Verwende fast immer `===` und `!==` statt `==` und `!=`.

Das macht deinen Code zuverlässiger und leichter verständlich.

## Zahlen vergleichen

Zahlen lassen sich mit den Größenvergleichen prüfen.

```js
const temperatur = 22;

console.log(temperatur > 20);  // true
console.log(temperatur < 30);  // true
console.log(temperatur >= 22); // true
console.log(temperatur <= 21); // false
```

Auch Rechnungen dürfen Teil eines Vergleichs sein:

```js
const preis = 40;
const rabatt = 10;

console.log(preis - rabatt < 35); // true
```

JavaScript berechnet zunächst `preis - rabatt`. Danach wird geprüft, ob das Ergebnis kleiner als `35` ist.

## Strings vergleichen

Strings kannst du mit `===` auf genau gleiche Inhalte prüfen.

```js
const farbe = "blau";

console.log(farbe === "blau"); // true
console.log(farbe === "rot");  // false
```

Bei Strings zählen Groß- und Kleinschreibung:

```js
console.log("Hallo" === "hallo"); // false
console.log("JavaScript" === "JavaScript"); // true
```

Auch Leerzeichen sind Teil des Textes:

```js
console.log("Anna" === "Anna "); // false
```

Der zweite String enthält am Ende ein zusätzliches Leerzeichen. Solche kleinen Unterschiede können später bei Eingaben von Nutzern wichtig sein.

## Booleans vergleichen

Booleans haben bereits einen Wahrheitswert. Du kannst sie trotzdem vergleichen:

```js
const istAngemeldet = true;

console.log(istAngemeldet === true);  // true
console.log(istAngemeldet === false); // false
```

Oft ist der direkte Wert aber besser lesbar:

```js
const istAngemeldet = true;

console.log(istAngemeldet); // true
```

Sobald du Bedingungen mit `if` verwendest, kannst du Booleans besonders praktisch einsetzen.

## Logische Operatoren: Aussagen verbinden

Logische Operatoren verbinden mehrere Vergleiche zu einer größeren Aussage. Die drei wichtigsten Operatoren sind:

| Operator | Bedeutung | Gesprochen als |
|---|---|---|
| `&&` | und | „und“ |
| `\|\|` | oder | „oder“ |
| `!` | nicht | „nicht“ |

## `&&`: Beide Aussagen müssen stimmen

Der Operator `&&` bedeutet „und“. Das Gesamtergebnis ist nur dann `true`, wenn **beide** Aussagen `true` sind.

```js
const alter = 20;
const hatTicket = true;

console.log(alter >= 18 && hatTicket === true); // true
```

Hier werden zwei Fragen geprüft:

1. Ist die Person mindestens 18 Jahre alt?
2. Hat sie ein Ticket?

Nur wenn beide Antworten `true` sind, ergibt auch der gesamte Ausdruck `true`.

```js
console.log(true && true);   // true
console.log(true && false);  // false
console.log(false && true);  // false
console.log(false && false); // false
```

Ein weiteres Beispiel:

```js
const benutzername = "Mira";
const passwortLaenge = 10;

const eingabeIstGueltig = benutzername !== "" && passwortLaenge >= 8;

console.log(eingabeIstGueltig); // true
```

Der Benutzername darf nicht leer sein **und** das Passwort muss mindestens acht Zeichen lang sein.

## `||`: Mindestens eine Aussage muss stimmen

Der Operator `||` bedeutet „oder“. Das Ergebnis ist `true`, wenn mindestens eine der Aussagen stimmt.

```js
const istWochenende = false;
const hatUrlaub = true;

console.log(istWochenende || hatUrlaub); // true
```

Es reicht hier, wenn Wochenende **oder** Urlaub ist.

```js
console.log(true || true);   // true
console.log(true || false);  // true
console.log(false || true);  // true
console.log(false || false); // false
```

Ein praktisches Beispiel:

```js
const rolle = "admin";

const darfBearbeiten = rolle === "admin" || rolle === "redaktion";

console.log(darfBearbeiten); // true
```

Eine Person darf Inhalte bearbeiten, wenn sie die Rolle `"admin"` oder `"redaktion"` besitzt.

## `!`: Einen Wahrheitswert umkehren

Das Ausrufezeichen `!` bedeutet „nicht“. Es dreht einen Boolean um:

```js
console.log(!true);  // false
console.log(!false); // true
```

Beispiel mit einer Variablen:

```js
const istLeer = false;

console.log(!istLeer); // true
```

Du kannst damit auch prüfen, ob etwas *nicht* gleich ist. Meist ist dafür aber `!==` besser lesbar:

```js
const status = "offen";

console.log(!(status === "erledigt")); // true
console.log(status !== "erledigt");    // true
```

Beide Zeilen liefern dasselbe Ergebnis. Die zweite Variante ist meist klarer.

## Mehrere Operatoren kombinieren

Du darfst Vergleiche und logische Operatoren verbinden:

```js
const alter = 17;
const hatBegleitung = true;

const darfTeilnehmen = alter >= 18 || hatBegleitung === true;

console.log(darfTeilnehmen); // true
```

Die Person ist noch nicht volljährig, hat aber eine Begleitung. Weil eine der beiden Aussagen stimmt, ist das Ergebnis `true`.

Bei komplexeren Ausdrücken helfen Klammern. Sie machen deutlich, welche Teile zusammengehören:

```js
const alter = 20;
const hatTicket = true;
const istMitglied = false;

const darfEintritt =
  (alter >= 18 && hatTicket === true) || istMitglied === true;

console.log(darfEintritt); // true
```

Die Klammern bedeuten hier:

- Volljährig **und** Ticket vorhanden  
  **oder**
- Mitgliedschaft vorhanden

> **Tipp:** Setze Klammern, wenn ein Ausdruck nicht sofort eindeutig lesbar ist. Das verhindert Fehler und erleichtert anderen Personen das Verstehen deines Codes.

## Reihenfolge der Auswertung

JavaScript beachtet bei logischen Operatoren eine feste Reihenfolge:

1. `!` wird zuerst ausgewertet.
2. `&&` wird danach ausgewertet.
3. `||` wird zuletzt ausgewertet.

Dieses Beispiel:

```js
const ergebnis = true || false && false;

console.log(ergebnis); // true
```

wird so verstanden:

```js
const ergebnis = true || (false && false);

console.log(ergebnis); // true
```

Für Einsteiger ist es sinnvoll, bei gemischten Operatoren Klammern zu verwenden:

```js
const ergebnis = true || (false && false);

console.log(ergebnis); // true
```

## Kurzschlussauswertung

JavaScript wertet logische Ausdrücke häufig nicht vollständig aus, wenn das Ergebnis schon feststeht. Das nennt man *Kurzschlussauswertung*.

Bei `&&` reicht ein `false`, damit der gesamte Ausdruck `false` wird:

```js
const istEingeloggt = false;
const hatNachrichten = true;

console.log(istEingeloggt && hatNachrichten); // false
```

Bei `||` reicht ein `true`, damit der gesamte Ausdruck `true` wird:

```js
const istAdmin = true;
const istRedaktion = false;

console.log(istAdmin || istRedaktion); // true
```

Dieses Verhalten wird später nützlich, um Prüfungen sicher und effizient zu formulieren.

## Typische Fehler

### `=` statt `===` verwenden

```js
const name = "Lea";

console.log(name = "Tom");
```

Das ist kein Vergleich. Der Wert von `name` wird hier auf `"Tom"` gesetzt.

Richtig:

```js
const name = "Lea";

console.log(name === "Tom"); // false
```

### String und Zahl verwechseln

```js
const punkte = "10";

console.log(punkte === 10); // false
```

`punkte` ist ein String, weil der Wert in Anführungszeichen steht. Wenn du eine Zahl speichern möchtest, lasse die Anführungszeichen weg:

```js
const punkte = 10;

console.log(punkte === 10); // true
```

### Groß- und Kleinschreibung übersehen

```js
const land = "Deutschland";

console.log(land === "deutschland"); // false
```

JavaScript unterscheidet genau zwischen `"Deutschland"` und `"deutschland"`.

### Unnötig komplizierte Boolean-Vergleiche

Dieser Code funktioniert:

```js
const hatBezahlt = true;

console.log(hatBezahlt === true);
```

Meist genügt jedoch:

```js
const hatBezahlt = true;

console.log(hatBezahlt);
```

Für den umgekehrten Fall:

```js
const hatBezahlt = false;

console.log(!hatBezahlt);
```

## Praxisbeispiel: Teilnahme prüfen

Stell dir vor, eine Veranstaltung ist für Personen ab 16 Jahren. Jüngere Personen dürfen nur mit einer Begleitperson teilnehmen.

```js
const alter = 14;
const hatBegleitung = true;

const darfTeilnehmen = alter >= 16 || hatBegleitung;

console.log(darfTeilnehmen); // true
```

Teste verschiedene Werte:

```js
const alter = 15;
const hatBegleitung = false;

const darfTeilnehmen = alter >= 16 || hatBegleitung;

console.log(darfTeilnehmen); // false
```

Ändere `alter` und `hatBegleitung` und beobachte die Ergebnisse in der Browser-Konsole.

## Übung

Lege die folgenden Variablen an:

```js
const temperatur = 28;
const regnet = false;
const istWochenende = true;
```

Erstelle anschließend Variablen für diese Aussagen:

1. Die Temperatur ist mindestens 25.
2. Es regnet nicht.
3. Es ist warm und es regnet nicht.
4. Es ist Wochenende oder die Temperatur liegt über 30.
5. Es ist nicht Wochenende.

Gib jede Variable mit `console.log()` aus.

### Mögliche Lösung

```js
const temperatur = 28;
const regnet = false;
const istWochenende = true;

const istWarm = temperatur >= 25;
const istTrocken = !regnet;
const istGutesWetter = temperatur >= 25 && !regnet;
const istAusflugstag = istWochenende || temperatur > 30;
const istKeinWochenende = !istWochenende;

console.log(istWarm);           // true
console.log(istTrocken);        // true
console.log(istGutesWetter);    // true
console.log(istAusflugstag);    // true
console.log(istKeinWochenende); // false
```

## Zusammenfassung

- Vergleichsoperatoren liefern immer `true` oder `false`.
- Verwende `===` für einen sicheren Vergleich von Wert **und** Datentyp.
- Mit `!==` prüfst du, ob zwei Werte verschieden sind.
- `&&` verlangt, dass beide Aussagen wahr sind.
- `||` verlangt, dass mindestens eine Aussage wahr ist.
- `!` kehrt einen Wahrheitswert um.
- Klammern machen komplexe logische Ausdrücke verständlicher.

Mit diesen Grundlagen kannst du im nächsten Kapitel Bedingungen formulieren: Dein Programm wird dann abhängig von Vergleichen unterschiedliche Aktionen ausführen.

# Entscheidungen und Wiederholungen

Programme sollen auf unterschiedliche Situationen reagieren und Aufgaben wiederholt ausführen können. Dieses Kapitel zeigt dir, wie du mit Bedingungen Entscheidungen formulierst und mit Schleifen Listen, Zahlenfolgen oder wiederkehrende Abläufe verarbeitest. Dabei übst du verständlichen Programmcode.

# Bedingungen mit `if` und `else`

## Lernziel

Mit `if` und `else` kann dein Programm **Entscheidungen treffen**. Es prüft eine Bedingung und führt je nach Ergebnis unterschiedlichen Code aus.

Beispielsweise:

- Ist ein Nutzer angemeldet?
- Ist eine Zahl größer als 10?
- Ist das Passwort korrekt?
- Regnet es gerade?

Am Ende dieser Lektion kannst du Bedingungen formulieren und damit den Ablauf deines Programms steuern.

---

## Die Grundidee einer Bedingung

Eine Bedingung hat immer zwei mögliche Ergebnisse:

- `true` bedeutet: Die Aussage ist wahr.
- `false` bedeutet: Die Aussage ist falsch.

Schau dir dieses Beispiel an:

```js
let alter = 20;

if (alter >= 18) {
  console.log("Du bist volljährig.");
}
```

JavaScript prüft hier:

> Ist `alter` größer oder gleich 18?

Da `alter` den Wert `20` hat, ist die Bedingung wahr. Deshalb wird die Ausgabe innerhalb der geschweiften Klammern ausgeführt:

```text
Du bist volljährig.
```

---

## Aufbau einer `if`-Anweisung

Eine `if`-Anweisung besteht aus drei Teilen:

```js
if (bedingung) {
  // Dieser Code läuft nur bei true.
}
```

Dabei gilt:

1. Nach `if` folgt die Bedingung in runden Klammern.
2. Der auszuführende Code steht in geschweiften Klammern.
3. Der Codeblock wird nur ausgeführt, wenn die Bedingung `true` ergibt.

Ein weiteres Beispiel:

```js
let punktzahl = 85;

if (punktzahl >= 50) {
  console.log("Du hast bestanden.");
}
```

Die Punktzahl ist mindestens 50. Die Bedingung ist also wahr und die Meldung erscheint in der Konsole.

---

## Was passiert bei `false`?

Wenn eine Bedingung falsch ist, überspringt JavaScript den Codeblock.

```js
let temperatur = 12;

if (temperatur > 20) {
  console.log("Es ist warm.");
}

console.log("Die Temperatur wurde geprüft.");
```

Die Ausgabe lautet:

```text
Die Temperatur wurde geprüft.
```

`temperatur > 20` ist falsch. Deshalb erscheint „Es ist warm.“ nicht. Der Code *nach* dem `if`-Block wird jedoch ganz normal ausgeführt.

---

## Alternative mit `else`

Mit `else` legst du fest, was passieren soll, wenn die Bedingung falsch ist.

```js
let alter = 16;

if (alter >= 18) {
  console.log("Du darfst wählen.");
} else {
  console.log("Du bist noch nicht wahlberechtigt.");
}
```

Da `alter` kleiner als 18 ist, lautet die Ausgabe:

```text
Du bist noch nicht wahlberechtigt.
```

Der Aufbau sieht allgemein so aus:

```js
if (bedingung) {
  // Code für true
} else {
  // Code für false
}
```

Bei einer `if`-`else`-Anweisung wird **genau einer** der beiden Codeblöcke ausgeführt.

---

## Vergleiche in Bedingungen

Für Bedingungen nutzt du häufig Vergleichsoperatoren.

| Operator | Bedeutung | Beispiel |
|---|---|---|
| `===` | genau gleich | `farbe === "blau"` |
| `!==` | nicht gleich | `farbe !== "blau"` |
| `>` | größer als | `zahl > 10` |
| `<` | kleiner als | `zahl < 10` |
| `>=` | größer oder gleich | `alter >= 18` |
| `<=` | kleiner oder gleich | `punkte <= 100` |

Beispiel mit einem Textwert:

```js
let lieblingsfarbe = "grün";

if (lieblingsfarbe === "grün") {
  console.log("Grün ist auch eine schöne Farbe.");
} else {
  console.log("Du magst eine andere Farbe.");
}
```

> **Wichtig:** Verwende für Vergleiche normalerweise `===` statt `==`.  
> `===` prüft sowohl den Wert als auch den Datentyp und vermeidet dadurch viele unerwartete Fehler.

---

## Der Unterschied zwischen `=` und `===`

Diese beiden Zeichenfolgen sehen ähnlich aus, haben aber völlig unterschiedliche Aufgaben:

```js
let name = "Mira";
```

Ein einzelnes Gleichheitszeichen `=` **weist einen Wert zu**.

```js
name = "Sam";
```

Nun enthält die Variable `name` den Wert `"Sam"`.

Drei Gleichheitszeichen `===` **vergleichen Werte**:

```js
if (name === "Sam") {
  console.log("Hallo Sam!");
}
```

Ein häufiger Anfängerfehler ist dieser:

```js
if (name = "Sam") {
  console.log("Hallo!");
}
```

Das ist kein Vergleich. JavaScript versucht hier, `"Sam"` erneut zuzuweisen. Verwende in Bedingungen daher immer `===`, wenn du auf Gleichheit prüfen möchtest.

---

## Mit Boolean-Werten arbeiten

Eine Variable vom Typ Boolean enthält bereits `true` oder `false`. Du kannst sie direkt in einer Bedingung verwenden.

```js
let istEingeloggt = true;

if (istEingeloggt) {
  console.log("Willkommen zurück!");
} else {
  console.log("Bitte melde dich an.");
}
```

Du musst nicht schreiben:

```js
if (istEingeloggt === true) {
  console.log("Willkommen zurück!");
}
```

Das funktioniert zwar, ist aber unnötig lang. Die kürzere Variante ist üblicher und besser lesbar.

### Eine Bedingung verneinen

Mit `!` drehst du einen Boolean-Wert um:

```js
let istEingeloggt = false;

if (!istEingeloggt) {
  console.log("Bitte melde dich an.");
}
```

`!istEingeloggt` bedeutet: „ist **nicht** eingeloggt“.

---

## Mehrere Anweisungen in einem Block

In geschweiften Klammern können beliebig viele Anweisungen stehen.

```js
let kontostand = 120;

if (kontostand >= 50) {
  console.log("Zahlung möglich.");
  kontostand = kontostand - 50;
  console.log("Neuer Kontostand: " + kontostand);
} else {
  console.log("Nicht genug Guthaben.");
}
```

Die Ausgabe ist:

```text
Zahlung möglich.
Neuer Kontostand: 70
```

Die geschweiften Klammern machen deutlich, welche Anweisungen zu `if` oder `else` gehören. Auch wenn ein Block nur aus einer Zeile besteht, solltest du sie verwenden. Das macht deinen Code übersichtlicher und sicherer.

---

## Praktisches Beispiel: Rabatt prüfen

Stell dir einen kleinen Online-Shop vor. Ab einem Bestellwert von 50 erhält ein Kunde kostenlosen Versand.

```js
let bestellwert = 64;

if (bestellwert >= 50) {
  console.log("Der Versand ist kostenlos.");
} else {
  console.log("Es fallen Versandkosten an.");
}
```

Ändere den Wert von `bestellwert` und beobachte, wie sich die Ausgabe verändert:

```js
let bestellwert = 35;
```

Nun wird der `else`-Block ausgeführt.

---

## Praktisches Beispiel: Passwort prüfen

Auch Texte lassen sich vergleichen:

```js
let passwort = "sonne123";

if (passwort === "sonne123") {
  console.log("Zugang erlaubt.");
} else {
  console.log("Passwort ist falsch.");
}
```

In einer echten Anwendung würdest du Passwörter selbstverständlich nicht so direkt im Browser-Code speichern oder vergleichen. Für das Lernen zeigt dieses Beispiel aber gut, wie eine Text-Bedingung funktioniert.

---

## Häufige Fehler

### Semikolon direkt nach `if`

Dieses Semikolon beendet die Anweisung zu früh:

```js
if (alter >= 18); {
  console.log("Volljährig");
}
```

Der Codeblock wird dadurch immer ausgeführt — unabhängig von der Bedingung.

Richtig ist:

```js
if (alter >= 18) {
  console.log("Volljährig");
}
```

---

### Text ohne Anführungszeichen

Textwerte müssen in Anführungszeichen stehen:

```js
let land = "Deutschland";

if (land === "Deutschland") {
  console.log("Willkommen!");
}
```

Ohne Anführungszeichen würde JavaScript `Deutschland` als Variablennamen interpretieren:

```js
if (land === Deutschland) {
  console.log("Willkommen!");
}
```

Das führt zu einem Fehler, wenn keine Variable namens `Deutschland` existiert.

---

### Groß- und Kleinschreibung beachten

JavaScript unterscheidet genau zwischen Groß- und Kleinbuchstaben:

```js
let benutzername = "Mira";

if (benutzername === "mira") {
  console.log("Gefunden");
} else {
  console.log("Nicht gefunden");
}
```

Die Bedingung ist hier falsch: `"Mira"` und `"mira"` sind unterschiedliche Texte.

---

## Übung 1: Wetterhinweis

Erstelle eine Variable `regnetEs` mit dem Wert `true`. Gib bei Regen „Nimm einen Regenschirm mit.“ aus. Andernfalls soll „Heute brauchst du keinen Regenschirm.“ erscheinen.

<details>
<summary>Lösung anzeigen</summary>

```js
let regnetEs = true;

if (regnetEs) {
  console.log("Nimm einen Regenschirm mit.");
} else {
  console.log("Heute brauchst du keinen Regenschirm.");
}
```

</details>

---

## Übung 2: Altersprüfung

Erstelle eine Variable `alter`. Wenn die Person mindestens 16 Jahre alt ist, soll „Du darfst dich anmelden.“ ausgegeben werden. Andernfalls soll „Du bist noch zu jung.“ erscheinen.

<details>
<summary>Lösung anzeigen</summary>

```js
let alter = 14;

if (alter >= 16) {
  console.log("Du darfst dich anmelden.");
} else {
  console.log("Du bist noch zu jung.");
}
```

</details>

---

## Übung 3: Lieblingszahl

Erstelle eine Variable `lieblingszahl`. Prüfe, ob sie genau `7` ist.

- Bei `7`: „Das ist auch meine Lieblingszahl!“
- Bei jeder anderen Zahl: „Eine interessante Wahl.“

<details>
<summary>Lösung anzeigen</summary>

```js
let lieblingszahl = 7;

if (lieblingszahl === 7) {
  console.log("Das ist auch meine Lieblingszahl!");
} else {
  console.log("Eine interessante Wahl.");
}
```

</details>

---

## Zusammenfassung

- Mit `if` führst du Code nur aus, wenn eine Bedingung wahr ist.
- Mit `else` definierst du eine Alternative für den Fall, dass sie falsch ist.
- Bedingungen ergeben immer `true` oder `false`.
- Für Gleichheitsvergleiche verwendest du `===`.
- `=` weist Werte zu und ist kein Vergleich.
- Geschweifte Klammern zeigen klar, welcher Code zu einer Bedingung gehört.

Im nächsten Schritt lernst du, wie du mit `else if` **mehr als zwei Fälle** unterscheiden kannst.

# Mehrere Fälle mit `else if`

## Wenn eine Entscheidung mehr als zwei Möglichkeiten hat

Mit `if` und `else` kannst du zwischen **zwei Fällen** unterscheiden:

- Bedingung ist wahr
- Bedingung ist nicht wahr

Oft gibt es aber mehr Möglichkeiten. Zum Beispiel soll ein Programm je nach Punktzahl eine andere Rückmeldung geben:

- ab 90 Punkten: „Sehr gut“
- ab 75 Punkten: „Gut“
- ab 50 Punkten: „Bestanden“
- darunter: „Leider nicht bestanden“

Dafür verwendest du `else if`.

## Die Grundstruktur

```js
if (bedingung1) {
  // Dieser Code läuft, wenn bedingung1 wahr ist.
} else if (bedingung2) {
  // Dieser Code läuft, wenn bedingung1 falsch
  // und bedingung2 wahr ist.
} else {
  // Dieser Code läuft, wenn keine Bedingung wahr ist.
}
```

JavaScript prüft die Bedingungen **von oben nach unten**:

1. Ist die erste Bedingung wahr? Dann wird ihr Code ausgeführt.
2. Andernfalls prüft JavaScript die nächste `else if`-Bedingung.
3. Sobald eine Bedingung wahr ist, werden die übrigen Fälle übersprungen.
4. Wenn keine Bedingung zutrifft, läuft der Code im `else`-Block.

> **Wichtig:** Von einer `if`-`else if`-`else`-Kette wird immer nur **ein** Block ausgeführt.

---

## Beispiel: Eine Punktzahl auswerten

```js
const punkte = 82;

if (punkte >= 90) {
  console.log("Sehr gut!");
} else if (punkte >= 75) {
  console.log("Gut gemacht!");
} else if (punkte >= 50) {
  console.log("Bestanden.");
} else {
  console.log("Leider nicht bestanden.");
}
```

Die Variable `punkte` enthält den Wert `82`.

JavaScript prüft nun nacheinander:

1. Ist `82 >= 90`? Nein.
2. Ist `82 >= 75`? Ja.

Deshalb erscheint in der Konsole:

```text
Gut gemacht!
```

Die folgenden Fälle werden nicht mehr geprüft, weil JavaScript bereits einen passenden Fall gefunden hat.

---

## Die Reihenfolge ist entscheidend

Bei mehreren Bedingungen muss die **genaueste oder höchste Bedingung zuerst** stehen.

Dieses Beispiel ist korrekt:

```js
const alter = 17;

if (alter >= 18) {
  console.log("Du bist volljährig.");
} else if (alter >= 16) {
  console.log("Du darfst bestimmte Angebote nutzen.");
} else {
  console.log("Du bist noch unter 16.");
}
```

Für `alter = 17` ist die erste Bedingung falsch, die zweite aber wahr. Die Ausgabe lautet:

```text
Du darfst bestimmte Angebote nutzen.
```

### Ein häufiger Fehler

Schau dir diese vertauschte Reihenfolge an:

```js
const punkte = 95;

if (punkte >= 50) {
  console.log("Bestanden.");
} else if (punkte >= 75) {
  console.log("Gut gemacht!");
} else if (punkte >= 90) {
  console.log("Sehr gut!");
}
```

Die Ausgabe ist:

```text
Bestanden.
```

Das ist zwar technisch korrekt, aber vermutlich nicht gewollt. Denn `95` ist bereits größer oder gleich `50`. JavaScript führt deshalb den ersten Block aus und prüft die restlichen Bedingungen nicht mehr.

**Besser:** Beginne bei solchen Wertebereichen mit dem höchsten Wert.

```js
const punkte = 95;

if (punkte >= 90) {
  console.log("Sehr gut!");
} else if (punkte >= 75) {
  console.log("Gut gemacht!");
} else if (punkte >= 50) {
  console.log("Bestanden.");
} else {
  console.log("Leider nicht bestanden.");
}
```

Jetzt lautet die Ausgabe:

```text
Sehr gut!
```

---

## Mehrere konkrete Werte prüfen

`else if` eignet sich auch, wenn eine Variable verschiedene feste Werte annehmen kann.

```js
const wochentag = "Samstag";

if (wochentag === "Montag") {
  console.log("Die Woche beginnt.");
} else if (wochentag === "Freitag") {
  console.log("Fast Wochenende!");
} else if (wochentag === "Samstag" || wochentag === "Sonntag") {
  console.log("Wochenende!");
} else {
  console.log("Ein normaler Wochentag.");
}
```

Hier wird zusätzlich der logische Operator `||` verwendet. Er bedeutet **„oder“**.

Die Bedingung

```js
wochentag === "Samstag" || wochentag === "Sonntag"
```

ist wahr, wenn mindestens eine der beiden Teilbedingungen wahr ist.

---

## `else` ist optional

Ein abschließendes `else` musst du nicht immer schreiben. Es ist sinnvoll, wenn dein Programm auch für alle übrigen Fälle eine Reaktion zeigen soll.

Ohne `else`:

```js
const temperatur = 24;

if (temperatur < 0) {
  console.log("Es friert.");
} else if (temperatur < 15) {
  console.log("Es ist kühl.");
} else if (temperatur > 30) {
  console.log("Es ist heiß.");
}
```

Bei `24` erscheint keine Ausgabe, denn keine Bedingung trifft zu.

Mit einem abschließenden `else` kannst du diesen normalen Bereich auffangen:

```js
const temperatur = 24;

if (temperatur < 0) {
  console.log("Es friert.");
} else if (temperatur < 15) {
  console.log("Es ist kühl.");
} else if (temperatur > 30) {
  console.log("Es ist heiß.");
} else {
  console.log("Die Temperatur ist angenehm.");
}
```

---

## Verschachtelte Bedingungen vermeiden

Du könntest mehrere Bedingungen auch ineinander schreiben:

```js
const rolle = "admin";

if (rolle === "admin") {
  console.log("Du hast alle Rechte.");
} else {
  if (rolle === "mitglied") {
    console.log("Du bist angemeldet.");
  } else {
    console.log("Du bist ein Gast.");
  }
}
```

Das funktioniert, ist aber unnötig unübersichtlich. Mit `else if` ist derselbe Code klarer:

```js
const rolle = "admin";

if (rolle === "admin") {
  console.log("Du hast alle Rechte.");
} else if (rolle === "mitglied") {
  console.log("Du bist angemeldet.");
} else {
  console.log("Du bist ein Gast.");
}
```

Verwende `else if`, wenn die Fälle **alternativ** sind: Es soll genau eine passende Antwort ausgewählt werden.

---

## Typische Fehlerquellen

### `=` statt `===` verwenden

Für Vergleiche brauchst du meistens `===`.

```js
const farbe = "blau";

if (farbe === "blau") {
  console.log("Die Farbe ist blau.");
}
```

Ein einzelnes `=` weist dagegen einen Wert zu:

```js
farbe = "rot";
```

In einer Bedingung führt das oft zu Fehlern oder unerwartetem Verhalten.

### Überlappende Bedingungen falsch sortieren

Bei Zahlenbereichen überschneiden sich Bedingungen häufig. Zum Beispiel trifft bei einer Punktzahl von `90` sowohl `punkte >= 50` als auch `punkte >= 75` und `punkte >= 90` zu.

Darum gilt:

- höchste Grenze zuerst
- niedrigste Grenze zuletzt
- einen Restfall mit `else` ergänzen, wenn nötig

### `else if` nach `else` schreiben

Ein `else` muss immer am Ende stehen. Das wäre falsch:

```js
if (alter >= 18) {
  console.log("Volljährig");
} else {
  console.log("Minderjährig");
} else if (alter >= 16) {
  console.log("16 oder älter");
}
```

Sobald JavaScript bei `else` angekommen ist, gibt es keinen weiteren Bedingungsfall mehr. Schreibe `else if` daher immer **vor** `else`.

---

## Praxisbeispiel: Versandkosten bestimmen

In einem Online-Shop hängen die Versandkosten vom Bestellwert ab:

- ab 50: kostenloser Versand
- ab 25: Versand kostet 2,99
- darunter: Versand kostet 4,99

```js
const bestellwert = 32;

if (bestellwert >= 50) {
  console.log("Der Versand ist kostenlos.");
} else if (bestellwert >= 25) {
  console.log("Der Versand kostet 2,99 Euro.");
} else {
  console.log("Der Versand kostet 4,99 Euro.");
}
```

Für einen Bestellwert von `32` wird ausgegeben:

```text
Der Versand kostet 2,99 Euro.
```

Ändere den Wert von `bestellwert` und beobachte, wie sich die Ausgabe verändert.

---

## Übung: Ticketpreis berechnen

Schreibe ein Programm mit einer Variable `alter`.

Die Regeln lauten:

- Kinder unter 6 Jahren fahren kostenlos.
- Personen unter 18 Jahren zahlen den Jugendpreis.
- Personen ab 65 Jahren erhalten einen Seniorenpreis.
- Alle anderen zahlen den normalen Preis.

Gib jeweils einen passenden Text in der Konsole aus.

**Teste zum Beispiel diese Werte:** `4`, `15`, `30` und `70`.

### Eine mögliche Lösung

```js
const alter = 15;

if (alter < 6) {
  console.log("Dein Ticket ist kostenlos.");
} else if (alter < 18) {
  console.log("Du zahlst den Jugendpreis.");
} else if (alter >= 65) {
  console.log("Du zahlst den Seniorenpreis.");
} else {
  console.log("Du zahlst den normalen Preis.");
}
```

Beachte die Reihenfolge:

- Zuerst wird geprüft, ob die Person noch ein Kind ist.
- Danach folgt der Jugendpreis.
- Anschließend wird der Seniorenpreis geprüft.
- Das abschließende `else` gilt für alle Erwachsenen zwischen 18 und 64 Jahren.

---

## Merke dir

- Mit `else if` kannst du **mehrere alternative Fälle** formulieren.
- JavaScript prüft die Bedingungen von **oben nach unten**.
- Sobald eine Bedingung wahr ist, wird nur ihr Codeblock ausgeführt.
- Bei überlappenden Zahlenbereichen steht die **höchste Grenze zuerst**.
- Ein `else` fängt alle Fälle auf, die zu keiner vorherigen Bedingung passen.

# Schleifen mit `for`

## Lernziele

Nach dieser Lektion kannst du:

- eine `for`-Schleife schreiben und lesen,
- Code eine bestimmte Anzahl von Malen wiederholen,
- einen Zähler mit `let` verwenden,
- typische Fehler wie eine Endlosschleife oder einen falschen Startwert erkennen.

---

## Was ist eine `for`-Schleife?

Eine Schleife wiederholt einen Codeblock. Eine `for`-Schleife ist besonders praktisch, wenn du schon weißt, *wie oft* etwas passieren soll.

Stell dir vor, du möchtest fünfmal „Hallo!“ in der Konsole ausgeben. Ohne Schleife müsstest du denselben Befehl fünfmal schreiben:

```js
console.log("Hallo!");
console.log("Hallo!");
console.log("Hallo!");
console.log("Hallo!");
console.log("Hallo!");
```

Mit einer `for`-Schleife geht das kürzer und übersichtlicher:

```js
for (let i = 1; i <= 5; i++) {
  console.log("Hallo!");
}
```

Die Konsole zeigt:

```text
Hallo!
Hallo!
Hallo!
Hallo!
Hallo!
```

---

## Der Aufbau einer `for`-Schleife

Eine `for`-Schleife besteht aus drei Teilen:

```js
for (Startwert; Bedingung; Veränderung) {
  // Code, der wiederholt wird
}
```

Ein konkretes Beispiel:

```js
for (let i = 1; i <= 5; i++) {
  console.log(i);
}
```

Die drei Teile bedeuten:

| Teil | Beispiel | Bedeutung |
|---|---|---|
| Startwert | `let i = 1` | Die Zählvariable `i` beginnt bei `1`. |
| Bedingung | `i <= 5` | Die Schleife läuft, solange `i` kleiner oder gleich `5` ist. |
| Veränderung | `i++` | Nach jedem Durchlauf wird `i` um `1` erhöht. |

`i` ist ein üblicher Name für einen Zähler. Du darfst aber auch einen verständlicheren Namen wählen:

```js
for (let nummer = 1; nummer <= 5; nummer++) {
  console.log(nummer);
}
```

---

## Schritt für Schritt: Was passiert in der Schleife?

Sieh dir diese Schleife an:

```js
for (let i = 1; i <= 3; i++) {
  console.log("Durchlauf: " + i);
}
```

JavaScript arbeitet sie so ab:

1. `let i = 1` erstellt den Zähler mit dem Wert `1`.
2. JavaScript prüft: Ist `i <= 3`?
3. Ja. Der Code im Block wird ausgeführt.
4. `i++` erhöht `i` auf `2`.
5. Die Bedingung wird erneut geprüft.
6. Sobald `i` den Wert `4` hat, ist `i <= 3` falsch. Die Schleife endet.

Die Ausgabe lautet:

```text
Durchlauf: 1
Durchlauf: 2
Durchlauf: 3
```

> **Merke:** Der Code innerhalb der geschweiften Klammern wird bei jedem Durchlauf ausgeführt.

---

## Zählen von 1 bis 10

Ein häufiger Anwendungsfall ist das Hochzählen:

```js
for (let i = 1; i <= 10; i++) {
  console.log(i);
}
```

Ausgabe:

```text
1
2
3
4
5
6
7
8
9
10
```

Achte auf den Vergleichsoperator `<=`:

- `i <= 10` bedeutet: Die `10` wird noch ausgegeben.
- `i < 10` bedeutet: Die Schleife endet bereits bei `9`.

```js
for (let i = 1; i < 10; i++) {
  console.log(i);
}
```

Diese Schleife gibt nur die Zahlen von `1` bis `9` aus.

---

## Bei 0 beginnen

In JavaScript beginnt man häufig bei `0` zu zählen. Das ist später besonders wichtig bei Arrays.

```js
for (let i = 0; i < 5; i++) {
  console.log(i);
}
```

Ausgabe:

```text
0
1
2
3
4
```

Die Schleife läuft insgesamt fünfmal:

- beim Wert `0`,
- beim Wert `1`,
- beim Wert `2`,
- beim Wert `3`,
- beim Wert `4`.

Obwohl die letzte Zahl `4` ist, gibt es fünf Durchläufe.

---

## Rückwärts zählen

Du kannst einen Zähler auch verkleinern. Dafür verwendest du `--`.

```js
for (let i = 5; i >= 1; i--) {
  console.log(i);
}
```

Ausgabe:

```text
5
4
3
2
1
```

Hier gilt:

- Start bei `5`
- Wiederholung, solange `i` größer oder gleich `1` ist
- Nach jedem Durchlauf wird `i` um `1` kleiner

Das Gegenstück zu `i++` ist `i--`:

```js
i++; // erhöht um 1
i--; // verringert um 1
```

---

## In größeren Schritten zählen

Die Veränderung muss nicht immer genau `1` sein. Du kannst beispielsweise in Zweierschritten zählen:

```js
for (let i = 0; i <= 10; i += 2) {
  console.log(i);
}
```

Ausgabe:

```text
0
2
4
6
8
10
```

`i += 2` bedeutet: Addiere bei jedem Durchlauf `2` zu `i`.

Auch andere Schrittgrößen sind möglich:

```js
for (let i = 10; i >= 0; i -= 2) {
  console.log(i);
}
```

Ausgabe:

```text
10
8
6
4
2
0
```

---

## Texte mit einem Zähler ausgeben

Der Zähler kann innerhalb der Schleife verwendet werden. So kannst du beispielsweise nummerierte Begrüßungen erzeugen:

```js
for (let i = 1; i <= 3; i++) {
  console.log("Begrüßung Nummer " + i);
}
```

Ausgabe:

```text
Begrüßung Nummer 1
Begrüßung Nummer 2
Begrüßung Nummer 3
```

Mit einem Template Literal ist die Schreibweise oft gut lesbar:

```js
for (let i = 1; i <= 3; i++) {
  console.log(`Begrüßung Nummer ${i}`);
}
```

---

## Berechnungen in einer Schleife

Schleifen sind nützlich, um wiederholt Berechnungen durchzuführen.

Dieses Beispiel gibt die Einmaleins-Reihe für die Zahl `4` aus:

```js
for (let i = 1; i <= 10; i++) {
  let ergebnis = 4 * i;
  console.log(`4 mal ${i} ist ${ergebnis}`);
}
```

Ausgabe:

```text
4 mal 1 ist 4
4 mal 2 ist 8
4 mal 3 ist 12
...
4 mal 10 ist 40
```

Die Variable `ergebnis` wird bei jedem Durchlauf neu berechnet.

---

## Einen Wert aufsummieren

Eine Schleife kann auch Werte sammeln. Zum Beispiel möchtest du alle Zahlen von `1` bis `5` addieren.

```js
let summe = 0;

for (let i = 1; i <= 5; i++) {
  summe = summe + i;
}

console.log(summe);
```

Ausgabe:

```text
15
```

So verändert sich `summe`:

| Durchlauf | `i` | Neue Summe |
|---|---:|---:|
| Start | – | `0` |
| 1 | `1` | `1` |
| 2 | `2` | `3` |
| 3 | `3` | `6` |
| 4 | `4` | `10` |
| 5 | `5` | `15` |

Die Zeile

```js
summe = summe + i;
```

kann auch kürzer geschrieben werden:

```js
summe += i;
```

Beide Varianten haben dieselbe Bedeutung.

---

## Der Gültigkeitsbereich des Zählers

Wird der Zähler mit `let` in der `for`-Schleife erstellt, existiert er nur innerhalb der Schleife:

```js
for (let i = 0; i < 3; i++) {
  console.log(i);
}

console.log(i);
```

Die letzte Zeile führt zu einem Fehler, weil `i` außerhalb der Schleife nicht bekannt ist.

Das ist sinnvoll: Der Zähler wird meist nur für die Schleife benötigt. Verwende deshalb in der Regel `let` direkt im Schleifenkopf.

---

## Häufige Fehler

### Die Bedingung endet zu früh

```js
for (let i = 1; i < 5; i++) {
  console.log(i);
}
```

Diese Schleife gibt `1` bis `4` aus, nicht bis `5`.

Wenn die `5` dazugehören soll, brauchst du:

```js
for (let i = 1; i <= 5; i++) {
  console.log(i);
}
```

---

### Der Zähler wird in die falsche Richtung verändert

```js
for (let i = 1; i <= 5; i--) {
  console.log(i);
}
```

Hier wird `i` immer kleiner: `1`, `0`, `-1` und so weiter. Gleichzeitig bleibt die Bedingung `i <= 5` wahr. Das kann zu einer **Endlosschleife** führen.

Korrekt ist:

```js
for (let i = 1; i <= 5; i++) {
  console.log(i);
}
```

> **Achtung:** Wenn eine Webseite oder die Konsole scheinbar nicht mehr reagiert, könnte eine Endlosschleife die Ursache sein. Prüfe dann besonders die Bedingung und die Veränderung des Zählers.

---

### Ein Semikolon vergessen

Im Kopf einer `for`-Schleife stehen zwei Semikolons:

```js
for (let i = 0; i < 5; i++) {
  console.log(i);
}
```

Falsch wäre:

```js
for (let i = 0 i < 5 i++) {
  console.log(i);
}
```

JavaScript kann die drei Bereiche dann nicht mehr voneinander unterscheiden.

---

### Geschweifte Klammern weglassen

Bei nur einer Anweisung kann JavaScript zwar ohne Klammern arbeiten:

```js
for (let i = 1; i <= 3; i++)
  console.log(i);
```

Für Einsteiger ist es aber besser, die Klammern immer zu schreiben:

```js
for (let i = 1; i <= 3; i++) {
  console.log(i);
}
```

So ist klar erkennbar, welcher Code zur Schleife gehört. Außerdem kannst du später leichter weitere Anweisungen ergänzen.

---

## Praktisches Beispiel: Countdown

Ein Countdown lässt sich mit einer rückwärts laufenden Schleife umsetzen:

```js
for (let sekunden = 5; sekunden >= 1; sekunden--) {
  console.log(`${sekunden} ...`);
}

console.log("Los!");
```

Ausgabe:

```text
5 ...
4 ...
3 ...
2 ...
1 ...
Los!
```

Wichtig: Die Ausgaben erscheinen hier sehr schnell hintereinander. Ein echter Countdown mit einer Sekunde Pause benötigt später zusätzliche Funktionen wie `setInterval()`.

---

## Übungen

### Übung 1: Zahlen ausgeben

Schreibe eine `for`-Schleife, die alle Zahlen von `1` bis `20` in der Konsole ausgibt.

<details>
<summary>Lösung ansehen</summary>

```js
for (let i = 1; i <= 20; i++) {
  console.log(i);
}
```

</details>

### Übung 2: Gerade Zahlen

Gib alle geraden Zahlen von `2` bis `20` aus.

<details>
<summary>Lösung ansehen</summary>

```js
for (let i = 2; i <= 20; i += 2) {
  console.log(i);
}
```

</details>

### Übung 3: Rückwärts zählen

Erstelle einen Countdown von `10` bis `0`.

<details>
<summary>Lösung ansehen</summary>

```js
for (let i = 10; i >= 0; i--) {
  console.log(i);
}
```

</details>

### Übung 4: Kleine Rechenreihe

Gib die Ergebnisse der 7er-Reihe von `7 mal 1` bis `7 mal 10` aus.

<details>
<summary>Lösung ansehen</summary>

```js
for (let i = 1; i <= 10; i++) {
  let ergebnis = 7 * i;
  console.log(`7 mal ${i} ist ${ergebnis}`);
}
```

</details>

---

## Zusammenfassung

Eine `for`-Schleife wiederholt Code, solange ihre Bedingung wahr ist:

```js
for (let i = 0; i < 5; i++) {
  console.log(i);
}
```

Dabei gilt:

- Der **Startwert** legt fest, wo gezählt wird.
- Die **Bedingung** entscheidet, ob ein weiterer Durchlauf erfolgt.
- Die **Veränderung** passt den Zähler nach jedem Durchlauf an.
- `i++` erhöht einen Wert um `1`, `i--` verringert ihn um `1`.
- Achte darauf, dass Bedingung und Veränderung zusammenpassen, damit keine Endlosschleife entsteht.

Im nächsten Schritt lernst du die `while`-Schleife kennen. Sie eignet sich besonders für Wiederholungen, bei denen die Anzahl der Durchläufe vorher noch nicht feststeht.

# Schleifen mit `while`

## Wiederholen, solange eine Bedingung wahr ist

Eine `while`-Schleife wiederholt Code, **solange** eine Bedingung `true` ergibt. Sie ist besonders nützlich, wenn du vorher nicht genau weißt, wie oft sich etwas wiederholen muss.

Zum Beispiel: Eine Zahl soll so lange erhöht werden, bis sie 5 erreicht hat.

```js
let zahl = 1;

while (zahl <= 5) {
  console.log(zahl);
  zahl = zahl + 1;
}
```

Die Konsole zeigt:

```text
1
2
3
4
5
```

## Der Aufbau einer `while`-Schleife

Eine `while`-Schleife besteht aus drei wichtigen Teilen:

```js
while (bedingung) {
  // Code, der wiederholt wird
}
```

- `while` bedeutet auf Englisch „solange“.
- In den runden Klammern steht eine Bedingung.
- Der Code im Block `{ ... }` wird ausgeführt, solange die Bedingung wahr ist.

Schau dir dieses Beispiel Schritt für Schritt an:

```js
let punktzahl = 0;

while (punktzahl < 3) {
  console.log("Noch nicht genug Punkte.");
  punktzahl = punktzahl + 1;
}

console.log("Ziel erreicht!");
```

So läuft das Programm ab:

1. `punktzahl` startet bei `0`.
2. Die Bedingung `punktzahl < 3` ist wahr.
3. Der Text wird ausgegeben.
4. `punktzahl` wird um `1` erhöht.
5. Die Bedingung wird erneut geprüft.
6. Sobald `punktzahl` den Wert `3` hat, ist die Bedingung falsch.
7. Die Schleife endet.

Die Ausgabe lautet:

```text
Noch nicht genug Punkte.
Noch nicht genug Punkte.
Noch nicht genug Punkte.
Ziel erreicht!
```

> **Merke:** Die Bedingung wird *vor jedem Durchlauf* geprüft. Ist sie schon am Anfang `false`, wird der Schleifenblock kein einziges Mal ausgeführt.

## Einen Zähler verändern

Damit eine `while`-Schleife irgendwann endet, muss sich meist eine Variable innerhalb der Schleife verändern. Diese Variable nennt man oft **Zähler**.

```js
let zaehler = 1;

while (zaehler <= 4) {
  console.log("Durchlauf Nummer: " + zaehler);
  zaehler++;
}
```

`zaehler++` ist eine Kurzschreibweise für:

```js
zaehler = zaehler + 1;
```

Die Schleife gibt Folgendes aus:

```text
Durchlauf Nummer: 1
Durchlauf Nummer: 2
Durchlauf Nummer: 3
Durchlauf Nummer: 4
```

Du kannst einen Zähler auch rückwärts laufen lassen:

```js
let countdown = 5;

while (countdown > 0) {
  console.log(countdown);
  countdown--;
}

console.log("Los!");
```

`countdown--` bedeutet:

```js
countdown = countdown - 1;
```

Ausgabe:

```text
5
4
3
2
1
Los!
```

## Achtung vor Endlosschleifen

Wenn die Bedingung immer wahr bleibt, endet eine `while`-Schleife nie. Das nennt man **Endlosschleife**. Sie kann dazu führen, dass der Browser nicht mehr reagiert.

Dieses Beispiel ist problematisch:

```js
let zahl = 1;

while (zahl <= 5) {
  console.log(zahl);
}
```

Die Variable `zahl` wird nie verändert. Sie bleibt immer `1`, deshalb ist `zahl <= 5` immer wahr.

Die richtige Version erhöht `zahl` innerhalb der Schleife:

```js
let zahl = 1;

while (zahl <= 5) {
  console.log(zahl);
  zahl++;
}
```

> **Prüffrage:** Wird mindestens eine Variable verändert, sodass die Bedingung irgendwann `false` werden kann?

Falls du versehentlich eine Endlosschleife startest, kannst du das Laden der Seite im Browser abbrechen oder den Tab schließen. Speichere deinen Code am besten regelmäßig.

## Ein praktisches Beispiel: Guthaben abbauen

Stell dir vor, ein Spielzug kostet 2 Punkte. Solange genügend Punkte vorhanden sind, darf weitergespielt werden.

```js
let guthaben = 10;

while (guthaben >= 2) {
  console.log("Eine Runde wird gespielt.");
  guthaben = guthaben - 2;
  console.log("Verbleibendes Guthaben: " + guthaben);
}

console.log("Nicht genug Guthaben für eine weitere Runde.");
```

Die Bedingung lautet `guthaben >= 2`. Eine Runde startet also nur, wenn noch mindestens 2 Punkte verfügbar sind.

## Werte in einem Array mit `while` ausgeben

Auch Arrays kannst du mit einer `while`-Schleife durchgehen. Dafür benötigst du einen Index, der bei `0` beginnt.

```js
const farben = ["Rot", "Blau", "Grün"];
let index = 0;

while (index < farben.length) {
  console.log(farben[index]);
  index++;
}
```

Ausgabe:

```text
Rot
Blau
Grün
```

Dabei bedeutet:

- `farben.length`: Anzahl der Elemente im Array
- `farben[index]`: Element an der aktuellen Stelle
- `index++`: Zum nächsten Element wechseln

Die Bedingung `index < farben.length` ist wichtig. Der größte gültige Index liegt immer **eins unter** der Länge des Arrays.

Bei drei Elementen sind die gültigen Indizes `0`, `1` und `2`.

## `while` oder `for`?

Viele Aufgaben lassen sich sowohl mit `for` als auch mit `while` lösen.

Eine `for`-Schleife passt gut, wenn die Anzahl der Wiederholungen von Anfang an klar ist:

```js
for (let zahl = 1; zahl <= 5; zahl++) {
  console.log(zahl);
}
```

Eine `while`-Schleife passt gut, wenn eine Bedingung entscheidet, wann Schluss ist:

```js
let temperatur = 18;

while (temperatur < 22) {
  temperatur++;
  console.log("Temperatur: " + temperatur);
}
```

Hier ist nicht die Anzahl der Durchläufe entscheidend, sondern das Ziel: Die Temperatur soll 22 erreichen.

| Verwende … | Wenn … |
|---|---|
| `for` | die Anzahl der Durchläufe klar feststeht |
| `while` | eine Bedingung bestimmt, wann die Wiederholung endet |

## Häufige Fehler

### Die Zählvariable wird nicht verändert

```js
let alter = 10;

while (alter < 18) {
  console.log("Noch nicht volljährig.");
}
```

Diese Schleife endet nie. Die Lösung:

```js
let alter = 10;

while (alter < 18) {
  console.log("Noch nicht volljährig.");
  alter++;
}
```

### Die Bedingung ist von Beginn an falsch

```js
let versuche = 5;

while (versuche < 3) {
  console.log("Neuer Versuch");
  versuche++;
}
```

Hier erscheint keine Ausgabe, denn `5 < 3` ist direkt am Anfang falsch.

### Falscher Vergleichsoperator

```js
let nummer = 1;

while (nummer < 5) {
  console.log(nummer);
  nummer++;
}
```

Diese Schleife gibt nur `1` bis `4` aus. Soll auch die `5` erscheinen, brauchst du `<=`:

```js
let nummer = 1;

while (nummer <= 5) {
  console.log(nummer);
  nummer++;
}
```

## Übung: Gerade Zahlen ausgeben

Gib alle geraden Zahlen von 2 bis 10 mit einer `while`-Schleife aus.

**Erwartete Ausgabe:**

```text
2
4
6
8
10
```

<details>

```js
let zahl = 2;

while (zahl <= 10) {
  console.log(zahl);
  zahl = zahl + 2;
}
```

</details>

## Übung: Begrüßungen zählen

Schreibe eine Schleife, die dreimal „Hallo!“ in der Konsole ausgibt. Verwende dafür eine Variable namens `anzahl`.

<details>

```js
let anzahl = 1;

while (anzahl <= 3) {
  console.log("Hallo!");
  anzahl++;
}
```

</details>

## Das Wichtigste auf einen Blick

- Eine `while`-Schleife wiederholt Code, solange ihre Bedingung `true` ist.
- Die Bedingung wird vor jedem Durchlauf geprüft.
- Eine Zählvariable muss sich meistens innerhalb der Schleife ändern.
- Ohne Veränderung kann eine Endlosschleife entstehen.
- Verwende `while`, wenn nicht die feste Anzahl der Wiederholungen, sondern eine Bedingung im Mittelpunkt steht.

Im nächsten Schritt kannst du Bedingungen und Schleifen zusammen einsetzen, um Programme flexibel auf unterschiedliche Situationen reagieren zu lassen.

# Funktionen und Datenstrukturen

Funktionen helfen dir, Code zu ordnen und wiederzuverwenden. Du lernst, eigene Funktionen zu schreiben, Werte zu übergeben und Ergebnisse zurückzugeben. Zusätzlich arbeitest du mit Arrays und Objekten, um mehrere zusammengehörige Informationen übersichtlich zu speichern und auszuwerten.

# Funktionen definieren und aufrufen

## Warum Funktionen wichtig sind

In Programmen tauchen oft Aufgaben auf, die mehrmals benötigt werden: einen Nutzer begrüßen, einen Preis berechnen oder eine Meldung ausgeben. Statt denselben Code immer wieder zu schreiben, kannst du ihn in einer **Funktion** bündeln.

Eine Funktion ist ein benannter Codeblock, der erst ausgeführt wird, wenn du ihn aufrufst.

```js
function begruessen() {
  console.log("Hallo! Schön, dass du da bist.");
}
```

Der Code innerhalb der geschweiften Klammern wird noch nicht automatisch ausgeführt. Zuerst wurde die Funktion nur **definiert**.

Um sie auszuführen, rufst du sie mit ihrem Namen und runden Klammern auf:

```js
begruessen();
```

Ausgabe in der Konsole:

```text
Hallo! Schön, dass du da bist.
```

> **Merke:** Eine Funktion definieren bedeutet, ihre Anleitung zu schreiben. Eine Funktion aufrufen bedeutet, diese Anleitung auszuführen.

---

## Eine Funktion definieren

Eine Funktionsdefinition besteht aus mehreren Teilen:

```js
function zeigeNachricht() {
  console.log("JavaScript macht Webseiten lebendig.");
}
```

| Teil | Bedeutung |
|---|---|
| `function` | Das Schlüsselwort zeigt: Hier beginnt eine Funktion. |
| `zeigeNachricht` | Der Name der Funktion. Du wählst ihn selbst. |
| `()` | Hier können später Werte für die Funktion stehen. |
| `{ ... }` | In diesen geschweiften Klammern steht der auszuführende Code. |

Ein Funktionsname sollte möglichst deutlich machen, **was die Funktion tut**. Gute Namen beginnen häufig mit einem Verb:

```js
function starteSpiel() {
  console.log("Das Spiel beginnt.");
}

function berechneSumme() {
  console.log(5 + 8);
}

function aendereFarbe() {
  console.log("Farbe wurde geändert.");
}
```

Weniger verständlich wäre dagegen ein Name wie `test()` oder `sache()`. Zwar funktioniert der Code, aber andere Personen — und auch dein zukünftiges Ich — verstehen dann schwerer, wofür die Funktion gedacht ist.

---

## Funktionen aufrufen

Damit JavaScript den Code in einer Funktion ausführt, musst du sie aufrufen:

```js
function zeigeUhrzeit() {
  console.log("Es ist Zeit für eine Pause.");
}

zeigeUhrzeit();
```

Wichtig sind die Klammern beim Aufruf:

```js
zeigeUhrzeit();
```

Ohne Klammern schreibst du nur den Namen der Funktion hin:

```js
zeigeUhrzeit;
```

Damit wird die Funktion **nicht ausgeführt**. Für Anfänger gilt daher als einfache Regel:

> Wenn eine Funktion jetzt etwas tun soll, schreibe ihren Namen mit `()`.

Du darfst eine Funktion auch mehrfach aufrufen:

```js
function klatschen() {
  console.log("👏 Klatsch!");
}

klatschen();
klatschen();
klatschen();
```

Die Konsole zeigt dann dreimal:

```text
👏 Klatsch!
👏 Klatsch!
👏 Klatsch!
```

---

## Code wiederverwenden

Der größte Vorteil von Funktionen ist die Wiederverwendung. Ohne Funktion müsstest du denselben Code kopieren:

```js
console.log("Willkommen im Lernprogramm!");
console.log("Viel Erfolg beim Üben!");

console.log("Willkommen im Lernprogramm!");
console.log("Viel Erfolg beim Üben!");
```

Mit einer Funktion ist der Code ordentlicher:

```js
function zeigeWillkommen() {
  console.log("Willkommen im Lernprogramm!");
  console.log("Viel Erfolg beim Üben!");
}

zeigeWillkommen();
zeigeWillkommen();
```

Falls du später den Begrüßungstext ändern möchtest, musst du ihn nur **an einer Stelle** anpassen:

```js
function zeigeWillkommen() {
  console.log("Willkommen beim JavaScript-Kurs!");
  console.log("Lerne Schritt für Schritt.");
}
```

Alle Aufrufe von `zeigeWillkommen()` verwenden automatisch die neue Version.

---

## Funktionen können mehrere Anweisungen enthalten

In einer Funktion darf mehr als eine Zeile stehen. JavaScript führt die Anweisungen von oben nach unten aus.

```js
function starteProgramm() {
  console.log("Programm wird gestartet.");
  console.log("Daten werden geladen.");
  console.log("Programm ist bereit.");
}

starteProgramm();
```

Ausgabe:

```text
Programm wird gestartet.
Daten werden geladen.
Programm ist bereit.
```

Du kannst in Funktionen auch Variablen verwenden:

```js
function zeigePunktestand() {
  const punkte = 120;
  console.log("Dein Punktestand: " + punkte);
}

zeigePunktestand();
```

---

## Funktionen und andere Funktionen

Eine Funktion kann auch eine andere Funktion aufrufen. Das hilft dabei, größere Aufgaben in kleine, gut verständliche Schritte aufzuteilen.

```js
function begruessen() {
  console.log("Hallo!");
}

function erklaereAufgabe() {
  console.log("Heute üben wir Funktionen.");
}

function starteLektion() {
  begruessen();
  erklaereAufgabe();
  console.log("Los geht's!");
}

starteLektion();
```

Beim Aufruf von `starteLektion()` passiert Folgendes:

1. `begruessen()` wird ausgeführt.
2. `erklaereAufgabe()` wird ausgeführt.
3. Die letzte Nachricht wird ausgegeben.

So kannst du Programme übersichtlich strukturieren.

---

## Die Reihenfolge von Definition und Aufruf

Bei normalen Funktionsdefinitionen kannst du eine Funktion in JavaScript oft schon vor ihrer Definition aufrufen:

```js
sageHallo();

function sageHallo() {
  console.log("Hallo!");
}
```

Der Code funktioniert. Für gut lesbaren Anfänger-Code ist es trotzdem meist übersichtlicher, zuerst die Funktion zu definieren und sie danach aufzurufen:

```js
function sageHallo() {
  console.log("Hallo!");
}

sageHallo();
```

Dadurch erkennt man beim Lesen sofort, was die Funktion macht, bevor sie verwendet wird.

---

## Häufige Fehler

### Klammern beim Aufruf vergessen

```js
function spielen() {
  console.log("Das Spiel läuft.");
}

spielen;
```

Hier erscheint keine Ausgabe, weil `spielen` nicht aufgerufen wurde.

**Richtig:**

```js
spielen();
```

### Den Funktionsnamen unterschiedlich schreiben

JavaScript unterscheidet Groß- und Kleinschreibung. `zeigeText` und `ZeigeText` sind zwei unterschiedliche Namen.

```js
function zeigeText() {
  console.log("Ein Text");
}

ZeigeText();
```

Das führt zu einem Fehler, weil `ZeigeText` nicht definiert wurde.

**Richtig:**

```js
zeigeText();
```

### Geschweifte Klammern vergessen

Der Funktionskörper braucht öffnende und schließende geschweifte Klammern:

```js
function testeFunktion() {
  console.log("Test");
}
```

Nicht so:

```js
function testeFunktion()
  console.log("Test");
```

### Semikolon nach dem Funktionsnamen

Nach der Definition einer klassischen Funktion setzt du kein Semikolon direkt hinter die schließende Klammer des Namens:

```js
function zeigeInfo() {
  console.log("Information");
}
```

Ein Semikolon nach `console.log(...)` ist dagegen üblich:

```js
console.log("Information");
```

---

## Beispiel: Ein einfaches Mini-Programm

Dieses Beispiel bündelt verschiedene Aufgaben in Funktionen:

```js
function zeigeTitel() {
  console.log("=== Zahlenraten ===");
}

function erklaereRegeln() {
  console.log("Rate eine Zahl zwischen 1 und 10.");
}

function verabschiedeDich() {
  console.log("Danke fürs Spielen!");
}

zeigeTitel();
erklaereRegeln();
verabschiedeDich();
```

Die Funktionen machen das Programm klar gegliedert:

- `zeigeTitel()` kümmert sich um die Überschrift.
- `erklaereRegeln()` zeigt die Spielregel.
- `verabschiedeDich()` beendet das Programm freundlich.

Später könntest du jede Funktion verändern oder erweitern, ohne den restlichen Code stark umzubauen.

---

## Übung: Eigene Funktionen schreiben

Schreibe drei Funktionen:

1. `zeigeName()` gibt deinen Namen in der Konsole aus.
2. `zeigeLieblingsfarbe()` gibt deine Lieblingsfarbe aus.
3. `starteVorstellung()` ruft die beiden anderen Funktionen auf und begrüßt die Person.

Rufe am Ende `starteVorstellung()` auf.

Eine mögliche Lösung:

```js
function zeigeName() {
  console.log("Mein Name ist Alex.");
}

function zeigeLieblingsfarbe() {
  console.log("Meine Lieblingsfarbe ist Blau.");
}

function starteVorstellung() {
  console.log("Hallo, ich stelle mich vor:");
  zeigeName();
  zeigeLieblingsfarbe();
}

starteVorstellung();
```

---

## Zusammenfassung

- Eine **Funktion** ist ein benannter Codeblock für eine bestimmte Aufgabe.
- Mit `function` definierst du eine Funktion.
- Mit `funktionsName()` rufst du sie auf.
- Funktionen helfen dir, wiederholten Code zu vermeiden und Programme besser zu ordnen.
- Aussagekräftige Namen wie `zeigeMenue()` oder `starteSpiel()` machen Code leichter verständlich.
- Eine Funktion kann mehrere Anweisungen und auch Aufrufe anderer Funktionen enthalten.

Im nächsten Schritt lernst du, wie Funktionen **Parameter** entgegennehmen und mit `return` Ergebnisse zurückgeben können.

# Parameter und Rückgabewerte

## Werte an Funktionen übergeben

Bisher können Funktionen feste Aufgaben ausführen. Häufig sollen sie aber mit *unterschiedlichen Daten* arbeiten. Dafür gibt es **Parameter**.

Ein Parameter ist ein Platzhalter in der Funktionsdefinition. Beim Aufruf erhält dieser Platzhalter einen konkreten Wert. Dieser konkrete Wert heißt **Argument**.

```js
function begrüße(name) {
  console.log("Hallo, " + name + "!");
}

begrüße("Mira");
begrüße("Jonas");
```

Die Ausgabe lautet:

```text
Hallo, Mira!
Hallo, Jonas!
```

`name` ist der Parameter. `"Mira"` und `"Jonas"` sind die Werte, die beim jeweiligen Funktionsaufruf übergeben werden.

---

## Parameter machen Funktionen wiederverwendbar

Ohne Parameter müsste für jede Begrüßung eine eigene Funktion geschrieben werden:

```js
function begrüßeMira() {
  console.log("Hallo, Mira!");
}

function begrüßeJonas() {
  console.log("Hallo, Jonas!");
}
```

Das funktioniert, ist aber unpraktisch. Mit einem Parameter reicht eine einzige Funktion:

```js
function begrüße(name) {
  console.log("Hallo, " + name + "!");
}
```

Diese Funktion kann nun für beliebig viele Namen verwendet werden.

```js
begrüße("Aylin");
begrüße("Ben");
begrüße("Chris");
```

---

## Mehrere Parameter verwenden

Eine Funktion kann auch mehrere Parameter haben. Sie werden durch Kommas getrennt.

```js
function addiere(zahl1, zahl2) {
  console.log(zahl1 + zahl2);
}

addiere(4, 7);
```

Die Ausgabe ist:

```text
11
```

JavaScript ordnet die Argumente der Reihenfolge nach zu:

```js
addiere(4, 7);
```

- `zahl1` erhält den Wert `4`.
- `zahl2` erhält den Wert `7`.

Ein weiteres Beispiel berechnet den Preis mehrerer gleicher Artikel:

```js
function berechneGesamtpreis(preis, anzahl) {
  console.log(preis * anzahl);
}

berechneGesamtpreis(3.5, 4);
```

Die Funktion gibt in der Konsole `14` aus.

> **Wichtig:** Die Namen der Parameter kannst du frei wählen. Sie sollten aber klar beschreiben, welche Werte erwartet werden.

Gut lesbar:

```js
function berechneGesamtpreis(preis, anzahl) {
  console.log(preis * anzahl);
}
```

Weniger verständlich:

```js
function berechneGesamtpreis(a, b) {
  console.log(a * b);
}
```

---

## Parameter sind lokale Variablen

Innerhalb einer Funktion verhalten sich Parameter wie Variablen. Du kannst mit ihnen rechnen, sie vergleichen oder in Texten verwenden.

```js
function prüfeAlter(alter) {
  if (alter >= 18) {
    console.log("Du bist volljährig.");
  } else {
    console.log("Du bist noch nicht volljährig.");
  }
}

prüfeAlter(20);
prüfeAlter(15);
```

Die Ausgabe:

```text
Du bist volljährig.
Du bist noch nicht volljährig.
```

Der Parameter `alter` existiert nur innerhalb der Funktion `prüfeAlter`.

```js
function zeigeZahl(zahl) {
  console.log(zahl);
}

zeigeZahl(8);

console.log(zahl);
```

Die letzte Zeile führt zu einem Fehler, weil `zahl` außerhalb der Funktion nicht bekannt ist.

---

## Standardwerte für Parameter

Manchmal wird beim Aufruf kein Wert übergeben. Dann kann ein **Standardwert** hilfreich sein.

```js
function begrüße(name = "Gast") {
  console.log("Hallo, " + name + "!");
}

begrüße("Lea");
begrüße();
```

Die Ausgabe lautet:

```text
Hallo, Lea!
Hallo, Gast!
```

Wird kein Argument angegeben, verwendet JavaScript den Standardwert `"Gast"`.

Auch mehrere Parameter können Standardwerte besitzen:

```js
function zeigeNachricht(text = "Keine Nachricht", dauer = 3) {
  console.log(text + " – Anzeige für " + dauer + " Sekunden");
}

zeigeNachricht("Gespeichert", 5);
zeigeNachricht();
```

---

## Werte mit `return` zurückgeben

Eine Funktion kann nicht nur etwas in der Konsole ausgeben. Sie kann auch ein Ergebnis an die Stelle zurückgeben, an der sie aufgerufen wurde. Dafür verwendest du `return`.

```js
function addiere(zahl1, zahl2) {
  return zahl1 + zahl2;
}

let ergebnis = addiere(4, 7);

console.log(ergebnis);
```

Die Ausgabe ist:

```text
11
```

Hier passiert Folgendes:

1. Die Funktion `addiere(4, 7)` wird aufgerufen.
2. Sie berechnet `4 + 7`.
3. `return` gibt das Ergebnis `11` zurück.
4. Das Ergebnis wird in der Variablen `ergebnis` gespeichert.
5. `console.log(ergebnis)` gibt den gespeicherten Wert aus.

Du kannst die Funktion auch direkt in `console.log()` verwenden:

```js
console.log(addiere(10, 5));
```

Oder ihr Ergebnis für weitere Berechnungen nutzen:

```js
let summe = addiere(8, 2);
let verdoppelteSumme = summe * 2;

console.log(verdoppelteSumme);
```

Die Ausgabe lautet:

```text
20
```

---

## Der Unterschied zwischen `console.log()` und `return`

Diese beiden Anweisungen werden leicht verwechselt, haben aber unterschiedliche Aufgaben.

```js
function zeigeSumme(zahl1, zahl2) {
  console.log(zahl1 + zahl2);
}
```

Diese Funktion zeigt das Ergebnis nur in der Konsole an. Das Ergebnis kann danach nicht weiterverwendet werden.

```js
let ergebnis = zeigeSumme(2, 3);

console.log(ergebnis);
```

Die Konsole zeigt:

```text
5
undefined
```

Warum erscheint `undefined`? Die Funktion hat keinen Wert zurückgegeben. Ohne `return` endet eine Funktion automatisch mit dem Rückgabewert `undefined`.

Mit `return` funktioniert es:

```js
function berechneSumme(zahl1, zahl2) {
  return zahl1 + zahl2;
}

let ergebnis = berechneSumme(2, 3);

console.log(ergebnis);
```

Die Ausgabe:

```text
5
```

**Merke:**

- `console.log()` zeigt einen Wert zur Kontrolle in der Konsole.
- `return` gibt einen Wert aus einer Funktion zurück.
- Einen Rückgabewert kannst du speichern, weiterrechnen oder an eine andere Funktion übergeben.

---

## `return` beendet die Funktion

Sobald JavaScript auf `return` trifft, wird die Funktion sofort beendet. Code darunter wird nicht mehr ausgeführt.

```js
function prüfeZahl(zahl) {
  if (zahl < 0) {
    return "Die Zahl ist negativ.";
  }

  console.log("Diese Ausgabe erfolgt nur bei null oder positiven Zahlen.");
  return "Die Zahl ist null oder positiv.";
}

console.log(prüfeZahl(-3));
console.log(prüfeZahl(5));
```

Für `-3` wird die `console.log()`-Zeile innerhalb der Funktion übersprungen. Die Funktion endet direkt bei `return`.

Dieses Verhalten ist besonders nützlich, um Fälle früh zu behandeln:

```js
function teile(dividend, divisor) {
  if (divisor === 0) {
    return "Division durch null ist nicht möglich.";
  }

  return dividend / divisor;
}

console.log(teile(12, 3));
console.log(teile(12, 0));
```

Die Ausgabe:

```text
4
Division durch null ist nicht möglich.
```

---

## Rückgabewerte mit Bedingungen

Funktionen können abhängig von einer Bedingung unterschiedliche Werte zurückgeben.

```js
function istVolljährig(alter) {
  if (alter >= 18) {
    return true;
  } else {
    return false;
  }
}

console.log(istVolljährig(21));
console.log(istVolljährig(16));
```

Die Ausgabe:

```text
true
false
```

Da der Vergleich `alter >= 18` selbst bereits `true` oder `false` liefert, kann die Funktion noch kürzer geschrieben werden:

```js
function istVolljährig(alter) {
  return alter >= 18;
}
```

Du kannst diese Funktion direkt in einer Bedingung einsetzen:

```js
if (istVolljährig(19)) {
  console.log("Zugang erlaubt.");
} else {
  console.log("Zugang nicht erlaubt.");
}
```

---

## Ein praktisches Beispiel: Rabatt berechnen

Die folgende Funktion berechnet einen neuen Preis nach einem prozentualen Rabatt.

```js
function berechneRabattPreis(preis, rabattProzent) {
  let rabatt = preis * rabattProzent / 100;
  return preis - rabatt;
}

let neuerPreis = berechneRabattPreis(80, 25);

console.log(neuerPreis);
```

Die Ausgabe lautet:

```text
60
```

Die Funktion erhält zwei Werte:

- `preis`: der ursprüngliche Preis
- `rabattProzent`: der Rabatt in Prozent

Sie berechnet zunächst den Rabatt und gibt anschließend den verminderten Preis zurück.

---

## Häufige Fehler

### Argumente in der falschen Reihenfolge übergeben

Bei mehreren Parametern ist die Reihenfolge wichtig.

```js
function stelleVor(name, alter) {
  console.log(name + " ist " + alter + " Jahre alt.");
}

stelleVor("Mara", 14);
```

Das ergibt:

```text
Mara ist 14 Jahre alt.
```

Wenn du die Werte vertauschst, entsteht ein unpassender Satz:

```js
stelleVor(14, "Mara");
```

Ausgabe:

```text
14 ist Mara Jahre alt.
```

---

### `return` mit `console.log()` verwechseln

```js
function quadriere(zahl) {
  console.log(zahl * zahl);
}
```

Diese Funktion gibt zwar etwas aus, liefert aber kein Ergebnis zurück. Wenn du später mit dem Ergebnis rechnen möchtest, brauchst du `return`:

```js
function quadriere(zahl) {
  return zahl * zahl;
}

let fläche = quadriere(6);

console.log(fläche);
```

---

### Code nach `return` erwarten

```js
function teste() {
  return "Fertig";
  console.log("Diese Zeile wird nie ausgeführt.");
}
```

Alles nach `return` innerhalb desselben Funktionsblocks ist nicht erreichbar.

---

## Übung: Temperatur umrechnen

Schreibe eine Funktion `celsiusZuFahrenheit`, die eine Temperatur in Celsius erhält und die passende Temperatur in Fahrenheit zurückgibt.

Zur Umrechnung gilt:

$$
\text{Fahrenheit} = \text{Celsius} \cdot 1{,}8 + 32
$$

Ein möglicher Aufruf soll so aussehen:

```js
let temperatur = celsiusZuFahrenheit(20);

console.log(temperatur);
```

Die Ausgabe soll sein:

```text
68
```

<details>
<summary>Lösung anzeigen</summary>

```js
function celsiusZuFahrenheit(celsius) {
  return celsius * 1.8 + 32;
}

let temperatur = celsiusZuFahrenheit(20);

console.log(temperatur);
```

</details>

---

## Übung: Größere Zahl finden

Schreibe eine Funktion `größereZahl`, die zwei Zahlen entgegennimmt und die größere Zahl zurückgibt.

Beispiel:

```js
console.log(größereZahl(12, 7));
```

Erwartete Ausgabe:

```text
12
```

Eine mögliche Lösung:

```js
function größereZahl(zahl1, zahl2) {
  if (zahl1 > zahl2) {
    return zahl1;
  } else {
    return zahl2;
  }
}

console.log(größereZahl(12, 7));
```

Was passiert, wenn beide Zahlen gleich sind? Passe die Funktion so an, dass sie in diesem Fall beispielsweise den Text `"Beide Zahlen sind gleich."` zurückgibt.

---

## Zusammenfassung

- **Parameter** sind Platzhalter für Werte, die eine Funktion beim Aufruf erhält.
- Eine Funktion kann einen oder mehrere Parameter besitzen.
- Mit **Standardwerten** bleibt eine Funktion sinnvoll nutzbar, auch wenn ein Argument fehlt.
- `return` gibt ein Ergebnis aus einer Funktion zurück.
- Rückgabewerte können in Variablen gespeichert, weiterverarbeitet oder in Bedingungen verwendet werden.
- `console.log()` zeigt Werte nur in der Konsole an und ersetzt kein `return`.
- Nach einem `return` wird der restliche Code der Funktion nicht mehr ausgeführt.

Im nächsten Abschnitt nutzt du **Arrays**, um mehrere Werte gemeinsam in einer geordneten Liste zu speichern.

# Arrays erstellen und nutzen

## Was sind Arrays?

Ein **Array** ist eine geordnete Liste von Werten. Es eignet sich immer dann, wenn du mehrere zusammengehörige Informationen speichern möchtest.

Statt für jede Lieblingsfarbe eine eigene Variable anzulegen:

```js
const farbe1 = "Rot";
const farbe2 = "Blau";
const farbe3 = "Grün";
```

kannst du alle Farben in einem Array zusammenfassen:

```js
const farben = ["Rot", "Blau", "Grün"];
```

Ein Array speichert seine Werte zwischen eckigen Klammern `[]`. Die einzelnen Einträge werden durch Kommas getrennt.

```js
const tiere = ["Hund", "Katze", "Kaninchen"];
const punkte = [12, 8, 20, 15];
const antworten = [true, false, true];
```

In einem Array können unterschiedliche Datentypen stehen:

```js
const gemischteWerte = ["Hallo", 42, true];
```

Für übersichtlichen Code ist es aber meistens sinnvoll, ähnliche Werte gemeinsam zu speichern: also zum Beispiel nur Namen, nur Zahlen oder nur Wahrheitswerte.

---

## Einträge über ihren Index auswählen

Jeder Eintrag in einem Array besitzt eine feste Position. Diese Position heißt **Index**.

Wichtig: Der erste Eintrag hat immer den Index `0`, nicht `1`.

```js
const staedte = ["Berlin", "Hamburg", "Köln"];
```

| Index | Wert |
|---:|---|
| 0 | `"Berlin"` |
| 1 | `"Hamburg"` |
| 2 | `"Köln"` |

Du greifst mit eckigen Klammern auf einen bestimmten Eintrag zu:

```js
const staedte = ["Berlin", "Hamburg", "Köln"];

console.log(staedte[0]); // Berlin
console.log(staedte[1]); // Hamburg
console.log(staedte[2]); // Köln
```

Wenn du einen Index verwendest, der nicht existiert, erhältst du `undefined`.

```js
console.log(staedte[5]); // undefined
```

> 💡 **Merke:** Bei Arrays beginnt das Zählen bei `0`. Das ist anfangs ungewohnt, aber in JavaScript und vielen anderen Programmiersprachen üblich.

---

## Die Anzahl der Einträge ermitteln

Mit der Eigenschaft `.length` findest du heraus, wie viele Werte ein Array enthält.

```js
const einkaufsliste = ["Brot", "Milch", "Äpfel"];

console.log(einkaufsliste.length); // 3
```

`.length` ist keine Funktion. Deshalb stehen hier **keine runden Klammern** dahinter.

```js
const zahlen = [4, 8, 15, 16];

console.log(zahlen.length); // 4
```

Die Länge eines Arrays ist besonders praktisch, wenn du mit Schleifen arbeitest.

---

## Einträge verändern

Ein Array, das mit `const` erstellt wurde, darf verändert werden. Du kannst also einzelne Werte ersetzen.

```js
const tage = ["Montag", "Dienstag", "Mittwoch"];

tage[1] = "Dienstagabend";

console.log(tage);
```

Ausgabe:

```js
["Montag", "Dienstagabend", "Mittwoch"]
```

`const` bedeutet hier: Die Variable `tage` darf nicht auf ein komplett neues Array zeigen. Der Inhalt des vorhandenen Arrays kann jedoch geändert werden.

```js
const tage = ["Montag", "Dienstag"];

// Das ist erlaubt:
tage[0] = "Sonntag";

// Das führt zu einem Fehler:
tage = ["Mittwoch", "Donnerstag"];
```

Wenn du das Array später vollständig ersetzen möchtest, verwendest du `let`.

```js
let aufgaben = ["Lernen", "Aufräumen"];

aufgaben = ["Einkaufen", "Kochen"];

console.log(aufgaben);
```

---

## Werte am Ende hinzufügen: `push()`

Mit der Methode `.push()` fügst du einen oder mehrere Werte am **Ende** eines Arrays hinzu.

```js
const musikrichtungen = ["Rock", "Pop"];

musikrichtungen.push("Jazz");

console.log(musikrichtungen);
```

Ausgabe:

```js
["Rock", "Pop", "Jazz"]
```

Du kannst auch mehrere Werte gleichzeitig hinzufügen:

```js
const zahlen = [1, 2, 3];

zahlen.push(4, 5);

console.log(zahlen);
```

Ausgabe:

```js
[1, 2, 3, 4, 5]
```

`.push()` verändert das vorhandene Array direkt.

---

## Den letzten Wert entfernen: `pop()`

Mit `.pop()` entfernst du den letzten Eintrag eines Arrays.

```js
const warteschlange = ["Mia", "Noah", "Emma"];

warteschlange.pop();

console.log(warteschlange);
```

Ausgabe:

```js
["Mia", "Noah"]
```

Außerdem gibt `.pop()` den entfernten Wert zurück. Das ist nützlich, wenn du ihn noch weiterverwenden möchtest.

```js
const warteschlange = ["Mia", "Noah", "Emma"];

const entferntePerson = warteschlange.pop();

console.log(entferntePerson); // Emma
console.log(warteschlange);   // ["Mia", "Noah"]
```

---

## Werte am Anfang hinzufügen und entfernen

Manchmal soll ein Wert nicht am Ende, sondern am Anfang eines Arrays stehen.

### Mit `unshift()` vorne hinzufügen

```js
const plaetze = ["Mitte", "Hinten"];

plaetze.unshift("Vorne");

console.log(plaetze);
```

Ausgabe:

```js
["Vorne", "Mitte", "Hinten"]
```

### Mit `shift()` den ersten Wert entfernen

```js
const plaetze = ["Vorne", "Mitte", "Hinten"];

const ersterPlatz = plaetze.shift();

console.log(ersterPlatz); // Vorne
console.log(plaetze);     // ["Mitte", "Hinten"]
```

| Methode | Aufgabe |
|---|---|
| `.push()` | Wert am Ende hinzufügen |
| `.pop()` | Letzten Wert entfernen |
| `.unshift()` | Wert am Anfang hinzufügen |
| `.shift()` | Ersten Wert entfernen |

---

## Arrays mit einer `for`-Schleife durchlaufen

Arrays werden sehr häufig mit einer `for`-Schleife verarbeitet. So kannst du jeden Eintrag nacheinander ausgeben.

```js
const obst = ["Apfel", "Banane", "Birne"];

for (let index = 0; index < obst.length; index++) {
  console.log(obst[index]);
}
```

Ausgabe:

```js
Apfel
Banane
Birne
```

Schauen wir uns die Schleife genauer an:

```js
for (let index = 0; index < obst.length; index++) {
  console.log(obst[index]);
}
```

- `let index = 0`: Die Schleife beginnt beim ersten Index.
- `index < obst.length`: Sie läuft nur, solange ein Eintrag vorhanden ist.
- `index++`: Nach jedem Durchlauf wird der Index um `1` erhöht.
- `obst[index]`: Der aktuelle Wert wird aus dem Array gelesen.

Die Bedingung `index < obst.length` ist wichtig. Bei drei Werten sind die gültigen Indizes `0`, `1` und `2`. Der Wert `3` wäre bereits außerhalb des Arrays.

---

## Ein praktisches Beispiel: Punkteliste auswerten

Stell dir vor, du speicherst die Punkte einer Person in mehreren Runden.

```js
const punkte = [12, 8, 15, 10];
let gesamtPunkte = 0;

for (let index = 0; index < punkte.length; index++) {
  gesamtPunkte = gesamtPunkte + punkte[index];
}

console.log("Gesamtpunkte: " + gesamtPunkte);
```

Ausgabe:

```js
Gesamtpunkte: 45
```

Die Variable `gesamtPunkte` startet mit `0`. Dann wird in jedem Schleifendurchlauf der aktuelle Wert aus dem Array addiert.

Du kannst auch prüfen, ob ein bestimmter Punktwert erreicht wurde:

```js
const punkte = [12, 8, 15, 10];

for (let index = 0; index < punkte.length; index++) {
  if (punkte[index] >= 15) {
    console.log("Sehr gutes Ergebnis: " + punkte[index]);
  }
}
```

Ausgabe:

```js
Sehr gutes Ergebnis: 15
```

---

## Mehrdimensionale Arrays kurz kennengelernt

Ein Array kann selbst weitere Arrays enthalten. Das nennt man ein **mehrdimensionales Array**.

```js
const sitzplan = [
  ["Anna", "Ben"],
  ["Clara", "David"]
];
```

Der erste Wert enthält ein Array:

```js
console.log(sitzplan[0]);
```

Ausgabe:

```js
["Anna", "Ben"]
```

Um auf einen einzelnen Namen zuzugreifen, verwendest du zwei Indizes:

```js
console.log(sitzplan[0][1]); // Ben
console.log(sitzplan[1][0]); // Clara
```

Für den Einstieg reichen einfache Arrays meistens aus. Mehrdimensionale Arrays begegnen dir später zum Beispiel bei Spielbrettern, Tabellen oder Stundenplänen.

---

## Häufige Fehler

### Beim Index bei `1` beginnen

```js
const farben = ["Rot", "Blau", "Grün"];

console.log(farben[1]); // Blau
```

Wer den ersten Wert erwartet, wird überrascht sein: `farben[1]` ist bereits der zweite Eintrag. Der erste Eintrag ist `farben[0]`.

### `.length` mit Klammern schreiben

```js
const namen = ["Lea", "Tom"];

console.log(namen.length());
```

Das führt zu einem Fehler. Richtig ist:

```js
console.log(namen.length);
```

### Einen nicht vorhandenen Index verwenden

```js
const monate = ["Januar", "Februar"];

console.log(monate[2]); // undefined
```

Das Array hat nur die Indizes `0` und `1`.

### Bei Schleifen `<=` verwenden

```js
const namen = ["Lea", "Tom"];

for (let index = 0; index <= namen.length; index++) {
  console.log(namen[index]);
}
```

Diese Schleife gibt am Ende zusätzlich `undefined` aus. Verwende stattdessen `<`:

```js
for (let index = 0; index < namen.length; index++) {
  console.log(namen[index]);
}
```

---

## Übung: Eine einfache To-do-Liste

Erstelle ein Array mit drei Aufgaben. Gib zunächst alle Aufgaben aus. Füge dann eine weitere Aufgabe hinzu und entferne anschließend die erste Aufgabe.

**Aufgabe:**

1. Erstelle ein Array namens `aufgaben`.
2. Speichere mindestens drei Texte darin.
3. Füge mit `.push()` eine Aufgabe hinzu.
4. Entferne mit `.shift()` die erste Aufgabe.
5. Gib das fertige Array in der Konsole aus.

Eine mögliche Lösung:

```js
const aufgaben = ["Hausaufgaben machen", "Zimmer aufräumen", "Einkaufen"];

aufgaben.push("E-Mail schreiben");
aufgaben.shift();

console.log(aufgaben);
```

Ausgabe:

```js
["Zimmer aufräumen", "Einkaufen", "E-Mail schreiben"]
```

---

## Übung: Namen begrüßen

Erstelle ein Array mit mehreren Namen. Schreibe eine `for`-Schleife, die jede Person einzeln begrüßt.

Eine mögliche Lösung:

```js
const namen = ["Aylin", "Jonas", "Mara"];

for (let index = 0; index < namen.length; index++) {
  console.log("Hallo, " + namen[index] + "!");
}
```

Ausgabe:

```js
Hallo, Aylin!
Hallo, Jonas!
Hallo, Mara!
```

---

## Das Wichtigste auf einen Blick

- Arrays speichern mehrere Werte in einer geordneten Liste.
- Arrays werden mit eckigen Klammern erstellt: `["Wert 1", "Wert 2"]`.
- Der erste Eintrag hat den Index `0`.
- Mit `.length` erhältst du die Anzahl der Einträge.
- Mit `.push()` und `.pop()` bearbeitest du das Ende eines Arrays.
- Mit `.unshift()` und `.shift()` bearbeitest du den Anfang.
- Eine `for`-Schleife hilft dir, alle Werte eines Arrays nacheinander zu verarbeiten.

Im nächsten Abschnitt lernst du **Objekte** kennen. Während Arrays mehrere Werte in einer Reihenfolge speichern, helfen Objekte dabei, Informationen mit klaren Eigenschaften wie Name, Alter oder Farbe zu ordnen.

# Objekte für strukturierte Daten

## Was sind Objekte?

Ein **Objekt** fasst mehrere Informationen zusammen, die zu einer Sache gehören. Jede Information erhält dabei einen eindeutigen Namen.

Stell dir ein Benutzerprofil vor: Es hat einen Namen, ein Alter und vielleicht eine E-Mail-Adresse. Statt für jede Information eine eigene Variable anzulegen, kannst du sie gemeinsam in einem Objekt speichern.

```js
const person = {
  name: "Mira",
  alter: 24,
  email: "mira@example.de"
};
```

Das Objekt `person` beschreibt eine Person mit drei Eigenschaften.

- `name`, `alter` und `email` heißen **Eigenschaften** oder *Properties*.
- Die Werte rechts vom Doppelpunkt gehören jeweils zu einer Eigenschaft.
- Die Eigenschaften werden durch Kommata getrennt.
- Das gesamte Objekt steht zwischen geschweiften Klammern `{}`.

## Eigenschaften auslesen

Um auf eine Eigenschaft zuzugreifen, verwendest du meist die **Punktnotation**:

```js
const person = {
  name: "Mira",
  alter: 24,
  email: "mira@example.de"
};

console.log(person.name);
console.log(person.alter);
```

Die Konsole gibt aus:

```text
Mira
24
```

Du kannst Eigenschaften auch direkt in Texten verwenden:

```js
console.log("Hallo, " + person.name + "!");
```

Ausgabe:

```text
Hallo, Mira!
```

Mit einem Template-String wirkt derselbe Code oft übersichtlicher:

```js
console.log(`Hallo, ${person.name}! Du bist ${person.alter} Jahre alt.`);
```

## Eigenschaften verändern und ergänzen

Die Werte eines Objekts können verändert werden:

```js
const spieler = {
  name: "Noah",
  punkte: 10
};

spieler.punkte = 15;

console.log(spieler.punkte);
```

Ausgabe:

```text
15
```

Auch neue Eigenschaften lassen sich nachträglich hinzufügen:

```js
spieler.level = 2;

console.log(spieler);
```

Das Objekt enthält nun `name`, `punkte` und `level`.

> **Wichtig:** Ein Objekt kann mit `const` erstellt werden, obwohl seine Eigenschaften später noch geändert werden dürfen. `const` verhindert nur, dass die Variable selbst auf ein vollständig anderes Objekt zeigt.

Das ist erlaubt:

```js
const buch = {
  titel: "JavaScript leicht gemacht",
  seiten: 180
};

buch.seiten = 200;
```

Das wäre dagegen ein Fehler:

```js
const buch = {
  titel: "JavaScript leicht gemacht"
};

buch = {
  titel: "Ein anderes Buch"
};
```

## Eigenschaften mit eckigen Klammern auswählen

Neben der Punktnotation gibt es die **Klammernotation**:

```js
const wetter = {
  stadt: "Hamburg",
  temperatur: 18
};

console.log(wetter["stadt"]);
```

Das Ergebnis ist dasselbe wie bei `wetter.stadt`.

Die Klammernotation ist besonders nützlich, wenn der Name einer Eigenschaft in einer Variablen gespeichert ist:

```js
const profil = {
  name: "Lea",
  hobby: "Zeichnen"
};

const eigenschaft = "hobby";

console.log(profil[eigenschaft]);
```

Ausgabe:

```text
Zeichnen
```

Mit Punktnotation würde JavaScript nach einer Eigenschaft namens `eigenschaft` suchen:

```js
console.log(profil.eigenschaft);
```

Da diese Eigenschaft nicht existiert, erhältst du `undefined`.

## Fehlende Eigenschaften

Wenn du auf eine Eigenschaft zugreifst, die nicht vorhanden ist, entsteht normalerweise kein Fehler. JavaScript gibt stattdessen `undefined` zurück.

```js
const tier = {
  art: "Katze",
  name: "Luna"
};

console.log(tier.alter);
```

Ausgabe:

```text
undefined
```

Du kannst das in einer Bedingung prüfen:

```js
if (tier.alter === undefined) {
  console.log("Das Alter ist nicht bekannt.");
}
```

## Objekte und Arrays vergleichen

Ein **Array** speichert mehrere Werte in einer Reihenfolge. Du greifst über einen Zahlenindex darauf zu.

```js
const farben = ["Rot", "Grün", "Blau"];

console.log(farben[0]);
```

Ein **Objekt** speichert Werte unter aussagekräftigen Namen.

```js
const auto = {
  marke: "Volkswagen",
  modell: "ID.3",
  baujahr: 2023
};

console.log(auto.marke);
```

Verwende Arrays, wenn die **Reihenfolge** wichtig ist oder wenn du eine Liste gleichartiger Werte hast:

```js
const lieblingsObst = ["Apfel", "Banane", "Erdbeere"];
```

Verwende Objekte, wenn verschiedene Informationen eine Sache **beschreiben**:

```js
const lieblingsFilm = {
  titel: "Die Reise zum Mond",
  jahr: 2024,
  gesehen: true
};
```

## Objekte mit verschiedenen Datentypen

Die Werte eines Objekts können unterschiedliche Datentypen haben:

```js
const kurs = {
  titel: "JavaScript für Anfänger",
  lektionen: 20,
  aktiv: true,
  beschreibung: null
};
```

In diesem Objekt ist:

- `titel` ein String,
- `lektionen` eine Zahl,
- `aktiv` ein Boolean,
- `beschreibung` hat momentan den Wert `null`.

Auch Arrays und andere Objekte können als Werte gespeichert werden.

```js
const rezept = {
  name: "Obstsalat",
  portionen: 2,
  zutaten: ["Apfel", "Banane", "Trauben"]
};

console.log(rezept.zutaten[1]);
```

Ausgabe:

```text
Banane
```

Hier greifst du zuerst auf die Eigenschaft `zutaten` zu. Sie enthält ein Array. Anschließend wählst du mit `[1]` das zweite Element des Arrays aus.

## Verschachtelte Objekte

Ein Objekt kann wiederum ein anderes Objekt enthalten. Das nennt man ein **verschachteltes Objekt**.

```js
const benutzer = {
  name: "Sofia",
  kontakt: {
    email: "sofia@example.de",
    stadt: "Köln"
  }
};
```

Um die Stadt auszugeben, verbindest du die Zugriffe:

```js
console.log(benutzer.kontakt.stadt);
```

Ausgabe:

```text
Köln
```

Die Struktur lässt sich so lesen:

1. Nimm das Objekt `benutzer`.
2. Daraus nimm die Eigenschaft `kontakt`.
3. Daraus nimm die Eigenschaft `stadt`.

## Eine Liste von Objekten

Sehr häufig werden **Arrays und Objekte kombiniert**. Zum Beispiel kann ein Array mehrere Produkte enthalten. Jedes Produkt ist dabei ein eigenes Objekt.

```js
const produkte = [
  {
    name: "Notizbuch",
    preis: 4.99
  },
  {
    name: "Stift",
    preis: 1.5
  },
  {
    name: "Rucksack",
    preis: 39.99
  }
];
```

Du kannst nun ein bestimmtes Produkt auswählen:

```js
console.log(produkte[0].name);
console.log(produkte[2].preis);
```

Ausgabe:

```text
Notizbuch
39.99
```

Mit einer `for`-Schleife kannst du alle Produkte ausgeben:

```js
for (let i = 0; i < produkte.length; i++) {
  console.log(`${produkte[i].name}: ${produkte[i].preis} Euro`);
}
```

Ausgabe:

```text
Notizbuch: 4.99 Euro
Stift: 1.5 Euro
Rucksack: 39.99 Euro
```

## Methoden in Objekten

Ein Objekt kann nicht nur Daten speichern, sondern auch eine Funktion enthalten. Eine Funktion innerhalb eines Objekts heißt **Methode**.

```js
const hund = {
  name: "Bello",
  begruessen: function () {
    console.log("Wuff! Ich heiße " + this.name + ".");
  }
};

hund.begruessen();
```

Ausgabe:

```text
Wuff! Ich heiße Bello.
```

Das Wort `this` bedeutet hier: *dieses Objekt*. In der Methode steht `this.name` also für `hund.name`.

Für den Einstieg genügt es, sich zu merken:

- Eigenschaften speichern Daten.
- Methoden führen eine Aktion aus, die zu diesem Objekt gehört.

## Häufige Fehler

### Eigenschaftsnamen vergessen

Zwischen Eigenschaft und Wert muss ein Doppelpunkt stehen:

```js
const person = {
  name: "Mira",
  alter: 24
};
```

Das wäre falsch:

```js
const person = {
  name = "Mira"
};
```

### Komma zwischen Eigenschaften vergessen

```js
const person = {
  name: "Mira",
  alter: 24
};
```

Zwischen den Eigenschaften steht ein Komma. Nach der letzten Eigenschaft ist kein Komma erforderlich.

### Punktnotation bei einer Variablen verwenden

Wenn der Eigenschaftsname in einer Variablen steckt, brauchst du eckige Klammern:

```js
const konto = {
  inhaber: "Emil",
  kontostand: 250
};

const auswahl = "kontostand";

console.log(konto[auswahl]);
```

Nicht:

```js
console.log(konto.auswahl);
```

### Auf ein nicht vorhandenes Objekt zugreifen

Dieser Code führt zu einem Fehler, weil `adresse` nicht existiert:

```js
const person = {
  name: "Mira"
};

console.log(person.adresse.stadt);
```

Prüfe zunächst, ob die Eigenschaft vorhanden ist:

```js
if (person.adresse !== undefined) {
  console.log(person.adresse.stadt);
}
```

## Übung: Ein Filmobjekt erstellen

Erstelle ein Objekt namens `film`. Es soll diese Eigenschaften enthalten:

- `titel` mit einem Filmtitel
- `jahr` mit dem Erscheinungsjahr
- `genre` mit einem Genre
- `gesehen` mit dem Wert `true` oder `false`

Gib anschließend einen Satz in dieser Form aus:

```text
Der Film ... erschien im Jahr ....
```

Ändere danach den Wert von `gesehen` auf `true` und ergänze eine Eigenschaft `bewertung`.

### Mögliche Lösung

```js
const film = {
  titel: "Sternenreise",
  jahr: 2022,
  genre: "Science-Fiction",
  gesehen: false
};

console.log(`Der Film ${film.titel} erschien im Jahr ${film.jahr}.`);

film.gesehen = true;
film.bewertung = 8;

console.log(film);
```

## Das Wichtigste auf einen Blick

- Objekte speichern mehrere zusammengehörige Werte in einer Struktur.
- Eigenschaften bestehen aus einem Namen und einem Wert, etwa `name: "Mira"`.
- Mit `objekt.eigenschaft` liest oder änderst du Eigenschaften.
- Mit `objekt["eigenschaft"]` kannst du Eigenschaften dynamisch auswählen.
- Objekte können Zahlen, Texte, Booleans, Arrays, Funktionen und weitere Objekte enthalten.
- Arrays mit Objekten sind ideal für Listen wie Produkte, Benutzer oder Filme.

# Webseiten interaktiv machen

Zum Abschluss verbindest du JavaScript mit sichtbaren Elementen einer Webseite. Du wählst HTML-Elemente aus, veränderst Texte und Klassen und reagierst auf Klicks oder Eingaben. In einem kleinen Praxisprojekt setzt du die bisherigen Grundlagen zu einer interaktiven Anwendung zusammen.

# Das DOM verstehen

## Lernziel

Nach dieser Lektion weißt du, was das **DOM** ist und warum JavaScript damit sichtbare Inhalte einer Webseite lesen und verändern kann. Du verstehst außerdem, dass eine HTML-Seite im Browser als Baumstruktur dargestellt wird.

---

## Was bedeutet DOM?

**DOM** steht für *Document Object Model*, auf Deutsch etwa: „Dokument-Objekt-Modell“.

Wenn der Browser eine HTML-Datei lädt, liest er deren Elemente ein und erstellt daraus eine Struktur im Speicher. Diese Struktur nennt man DOM. JavaScript kann auf sie zugreifen.

Aus diesem HTML-Code:

```html
<body>
  <h1>Willkommen</h1>
  <p>JavaScript macht Webseiten interaktiv.</p>
</body>
```

entsteht gedanklich eine Baumstruktur:

```text
document
└── html
    ├── head
    └── body
        ├── h1
        └── p
```

Jedes HTML-Element wird dabei zu einem Objekt im DOM. JavaScript kann diese Objekte untersuchen, verändern, hinzufügen oder entfernen.

> **Merke:** HTML beschreibt den ursprünglichen Aufbau der Seite. Das DOM ist die Version dieser Seite, mit der der Browser und JavaScript gerade arbeiten.

---

## Das globale Objekt `document`

JavaScript erhält über das Objekt `document` Zugriff auf die geladene Webseite.

```js
console.log(document);
```

Gib diesen Befehl in der Browser-Konsole ein. Du siehst die Struktur des aktuellen Dokuments.

`document` steht für die gesamte HTML-Seite. Es enthält unter anderem:

- das `<html>`-Element,
- den Bereich `<head>`,
- den sichtbaren Bereich `<body>`,
- alle Überschriften, Absätze, Bilder, Buttons und Formulare.

Du kannst beispielsweise den Seitentitel auslesen:

```js
console.log(document.title);
```

Der Titel stammt aus dem `<title>`-Element im `<head>`:

```html
<head>
  <title>Meine erste Webseite</title>
</head>
```

Ändere nun den Titel per JavaScript:

```js
document.title = "JavaScript üben";
```

Im Browser-Tab erscheint sofort der neue Titel.

---

## HTML und DOM sind nicht ganz dasselbe

HTML ist der Code, den du in einer Datei schreibst:

```html
<p>Hallo!</p>
```

Das DOM entsteht daraus erst, wenn der Browser die Datei verarbeitet. JavaScript verändert normalerweise das DOM — nicht direkt die gespeicherte HTML-Datei.

Schau dir dieses Beispiel an:

```html
<h1 id="ueberschrift">Willkommen</h1>
```

Wenn JavaScript später den Text verändert, sieht die Seite anders aus. Die ursprüngliche HTML-Datei auf deinem Computer bleibt jedoch unverändert.

```js
document.querySelector("#ueberschrift").textContent = "Schön, dass du da bist!";
```

Nach dem Neuladen der Seite wird wieder der ursprüngliche HTML-Code geladen, sofern du die HTML-Datei nicht selbst gespeichert und geändert hast.

---

## Elemente, Attribute und Inhalte

HTML-Elemente bestehen häufig aus mehreren Teilen:

```html
<a href="https://example.com" class="link">Mehr erfahren</a>
```

| Teil | Bedeutung |
|---|---|
| `<a>` | Das Element beziehungsweise der Elementtyp |
| `href` | Ein Attribut mit dem Ziel des Links |
| `class` | Ein Attribut für CSS oder JavaScript |
| `Mehr erfahren` | Der Textinhalt des Elements |

Im DOM kann JavaScript all diese Informationen lesen und später verändern.

Zum Beispiel hat ein Button einen Text und eine CSS-Klasse:

```html
<button class="kaufen-button">Jetzt kaufen</button>
```

JavaScript könnte später:

- den Text in „Bestellt“ ändern,
- eine Klasse ergänzen,
- den Button deaktivieren,
- auf einen Klick reagieren.

Wie du einzelne Elemente gezielt auswählst und veränderst, lernst du in den nächsten Lektionen.

---

## Die Seite im Browser untersuchen

Die Entwicklerwerkzeuge des Browsers helfen dir, das DOM sichtbar zu machen.

1. Öffne eine Webseite im Browser.
2. Drücke **F12** oder klicke mit der rechten Maustaste auf ein Element.
3. Wähle „Untersuchen“ oder „Element untersuchen“.
4. Öffne den Bereich **Elements** oder **Elemente**.

Dort zeigt der Browser die aktuelle DOM-Struktur an. Klappst du Elemente auf, erkennst du ihre Verschachtelung.

Angenommen, deine Seite enthält:

```html
<main>
  <h1>Meine Aufgaben</h1>
  <ul>
    <li>Einkaufen</li>
    <li>JavaScript lernen</li>
  </ul>
</main>
```

Dann liegt das `<h1>`-Element innerhalb von `<main>`. Die beiden `<li>`-Elemente liegen innerhalb der Liste `<ul>`.

Diese Beziehungen sind wichtig:

- `<main>` ist das **Elternelement** von `<h1>` und `<ul>`.
- `<h1>` und `<ul>` sind **Kindelemente** von `<main>`.
- Die beiden `<li>`-Elemente sind Kindelemente von `<ul>`.
- Die `<li>`-Elemente sind zueinander **Geschwisterelemente**.

---

## Warum die Baumstruktur wichtig ist

Die Baumstruktur bestimmt, welche Elemente zu welchem Bereich gehören. Das ist besonders bei größeren Webseiten hilfreich.

```html
<section class="produkt">
  <h2>Rucksack</h2>
  <p>Praktisch für Alltag und Reise.</p>
  <button>In den Warenkorb</button>
</section>
```

Der Button gehört hier zu einem bestimmten Produktbereich. Eine interaktive Webseite soll später beispielsweise genau diesen Bereich aktualisieren, wenn jemand auf den Button klickt.

Das DOM erlaubt JavaScript, solche Zusammenhänge zu erkennen und gezielt zu nutzen.

---

## Ein erstes vollständiges Beispiel

Lege eine Datei namens `index.html` an:

```html
<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>DOM-Beispiel</title>
    <script src="script.js" defer></script>
  </head>
  <body>
    <h1>Meine Lernseite</h1>
    <p>Ich lerne das DOM kennen.</p>
  </body>
</html>
```

Erstelle daneben die Datei `script.js`:

```js
console.log(document);
console.log(document.title);
console.log(document.body);
```

Öffne anschließend die HTML-Datei im Browser und rufe die Konsole auf.

Du solltest Folgendes beobachten:

- `document` repräsentiert das gesamte Dokument.
- `document.title` gibt den Seitentitel aus.
- `document.body` gibt den sichtbaren Inhaltsbereich aus.

Das Attribut `defer` im `<script>`-Element ist hier wichtig:

```html
<script src="script.js" defer></script>
```

Es sorgt dafür, dass der Browser zuerst das HTML verarbeitet und das JavaScript danach ausführt. So steht das DOM bereit, wenn dein Skript darauf zugreift.

---

## Veränderungen im DOM beobachten

Öffne in den Entwicklerwerkzeugen den Bereich **Elements**. Gib danach in der Konsole diesen Code ein:

```js
document.body.style.backgroundColor = "lightblue";
```

Die Hintergrundfarbe der Seite ändert sich sofort. Im Bereich „Elements“ kannst du sehen, dass der Browser eine Stilinformation zum `<body>`-Element ergänzt hat.

Du hast damit das DOM zur Laufzeit verändert.

Lade die Seite neu. Die Farbe verschwindet wieder, denn die Änderung war nur im aktuellen DOM vorhanden und wurde nicht in deine HTML-Datei geschrieben.

> **Wichtig:** Änderungen durch JavaScript bleiben normalerweise nur bestehen, bis die Seite neu geladen wird.

---

## Zusammenfassung

- Das **DOM** ist die Objektstruktur einer geladenen HTML-Seite im Browser.
- JavaScript greift über `document` auf diese Struktur zu.
- HTML-Elemente bilden im DOM eine Baumstruktur aus Eltern-, Kind- und Geschwisterelementen.
- Über das DOM kann JavaScript Inhalte, Attribute, Klassen und Styles verändern.
- Die Entwicklerwerkzeuge zeigen dir die aktuelle DOM-Struktur.
- Mit `defer` wird dein JavaScript ausgeführt, nachdem der Browser das HTML verarbeitet hat.

---

## Übungen

### 1. Das Dokument erkunden

Öffne eine beliebige Webseite und gib in der Konsole diese Befehle ein:

```js
console.log(document);
console.log(document.title);
console.log(document.body);
```

**Frage:** Was geben die drei Befehle jeweils aus?

---

### 2. Den Seitentitel ändern

Erstelle eine HTML-Seite mit einem `<title>`-Element. Ändere den Titel in deiner JavaScript-Datei:

```js
document.title = "Mein DOM-Training";
```

**Aufgabe:** Beobachte, wo sich der Titel im Browser ändert.

---

### 3. Die Baumstruktur erkennen

Betrachte diesen HTML-Code:

```html
<article>
  <h2>Neuigkeiten</h2>
  <p>Heute beginnt das JavaScript-Training.</p>
  <p>Viel Erfolg beim Lernen!</p>
</article>
```

**Fragen:**

1. Welches Element ist das Elternelement der beiden Absätze?
2. Welche Elemente sind Geschwister?
3. Welches Element enthält den Text „Neuigkeiten“?

**Lösungen:**

1. Das `<article>`-Element ist das Elternelement der Absätze.
2. `<h2>` sowie beide `<p>`-Elemente sind Geschwister, weil sie direkt innerhalb von `<article>` liegen.
3. Das `<h2>`-Element enthält den Text „Neuigkeiten“.

Im nächsten Schritt lernst du, wie du einzelne Elemente aus diesem DOM gezielt mit `querySelector()` auswählst.

# Elemente mit `querySelector()` auswählen

## Elemente gezielt auswählen

Damit JavaScript etwas auf einer Webseite verändern kann, muss es zuerst das passende HTML-Element finden. Dafür verwenden wir häufig:

```js
document.querySelector()
```

`querySelector()` durchsucht die HTML-Seite und gibt das **erste Element zurück**, das zu einem CSS-Selektor passt.

Die Schreibweise kennst du vielleicht schon aus CSS: Elemente können über ihren Namen, ihre Klasse oder ihre ID ausgewählt werden.

---

## Ein einfaches HTML-Beispiel

Stell dir vor, deine Webseite enthält diesen Code:

```html
<h1>Willkommen</h1>

<p class="hinweis">Bitte wähle eine Farbe aus.</p>

<button id="start-button">Starten</button>
```

JavaScript kann nun auf diese Elemente zugreifen.

```js
const ueberschrift = document.querySelector("h1");
const hinweis = document.querySelector(".hinweis");
const startButton = document.querySelector("#start-button");
```

Die drei Variablen enthalten danach jeweils ein HTML-Element:

- `ueberschrift` verweist auf das erste `<h1>`-Element.
- `hinweis` verweist auf das Element mit der Klasse `hinweis`.
- `startButton` verweist auf das Element mit der ID `start-button`.

> **Merke:** `document` steht für die gesamte HTML-Seite, die gerade im Browser geöffnet ist.

---

## Auswahl über den Elementnamen

Du kannst ein Element direkt über seinen HTML-Tag auswählen.

```html
<p>Das ist ein Absatz.</p>
```

```js
const absatz = document.querySelector("p");

console.log(absatz);
```

In der Browser-Konsole wird das gefundene `<p>`-Element angezeigt.

Wenn mehrere Absätze vorhanden sind, wird nur der **erste** gefunden:

```html
<p>Erster Absatz</p>
<p>Zweiter Absatz</p>
```

```js
const absatz = document.querySelector("p");

console.log(absatz);
```

Das Ergebnis ist:

```html
<p>Erster Absatz</p>
```

---

## Auswahl über eine CSS-Klasse

Klassen beginnen in CSS und JavaScript mit einem Punkt `.`.

```html
<p class="wichtig">Diese Information ist wichtig.</p>
```

```js
const wichtigeInfo = document.querySelector(".wichtig");

console.log(wichtigeInfo);
```

Hier bedeutet `.wichtig`: „Suche ein Element mit der Klasse `wichtig`.“

Ein Element darf mehrere Klassen besitzen:

```html
<p class="hinweis wichtig">Bitte beachte die Regeln.</p>
```

Du kannst es weiterhin über eine einzelne Klasse auswählen:

```js
const text = document.querySelector(".wichtig");
```

Oder du verlangst, dass **beide** Klassen vorhanden sind:

```js
const text = document.querySelector(".hinweis.wichtig");
```

Zwischen `.hinweis` und `.wichtig` steht kein Leerzeichen. Das bedeutet: *Dasselbe Element muss beide Klassen haben.*

---

## Auswahl über eine ID

Eine ID beginnt mit einer Raute `#`.

```html
<button id="speichern">Speichern</button>
```

```js
const speichernButton = document.querySelector("#speichern");
```

IDs sollten auf einer Webseite nur **einmal** vorkommen. Deshalb eignen sie sich besonders gut für eindeutige Elemente, etwa einen bestimmten Button oder ein Eingabefeld.

```html
<input id="benutzername" type="text">
```

```js
const eingabeFeld = document.querySelector("#benutzername");
```

---

## Auswahl genauer beschreiben

CSS-Selektoren können genauer festlegen, welches Element gesucht wird.

### Element mit einer bestimmten Klasse

```html
<p class="meldung">Eine Nachricht</p>
<div class="meldung">Ein Bereich</div>
```

```js
const absatzMeldung = document.querySelector("p.meldung");
```

Dieser Selektor sucht nur nach einem `<p>`-Element mit der Klasse `meldung`.

### Ein Element innerhalb eines anderen Elements

```html
<section class="profil">
  <h2>Mein Profil</h2>
  <p>Angemeldet als Lea.</p>
</section>
```

```js
const profilTitel = document.querySelector(".profil h2");
```

Das Leerzeichen bedeutet: „Suche ein `<h2>` innerhalb eines Elements mit der Klasse `profil`.“

### Ein bestimmtes Eingabefeld

```html
<input type="email" id="email">
<input type="password" id="passwort">
```

```js
const emailFeld = document.querySelector('input[type="email"]');
```

Solche Attribut-Selektoren sind nützlich, aber für den Einstieg reichen oft Klassen und IDs aus.

---

## Das ausgewählte Element verwenden

Nach der Auswahl kannst du Eigenschaften des Elements lesen oder verändern.

```html
<h1 id="titel">Hallo!</h1>
```

```js
const titel = document.querySelector("#titel");

console.log(titel.textContent);
```

Die Konsole zeigt:

```text
Hallo!
```

`textContent` enthält den Text eines Elements. Du kannst ihn auch ändern:

```js
titel.textContent = "Willkommen auf meiner Webseite!";
```

Nach dieser Zeile wird der sichtbare Text der Überschrift auf der Webseite geändert.

---

## Beispiel: Einen Button auswählen

In diesem Beispiel wird ein Button ausgewählt und in der Konsole ausgegeben.

```html
<button class="farbe-button">Farbe ändern</button>
```

```js
const farbeButton = document.querySelector(".farbe-button");

console.log(farbeButton);
```

Wichtig ist die Reihenfolge:

1. Das HTML-Element muss auf der Seite vorhanden sein.
2. JavaScript sucht das Element mit `querySelector()`.
3. Die Variable speichert den Verweis auf dieses Element.
4. Danach kann JavaScript damit arbeiten.

---

## Was passiert, wenn kein Element gefunden wird?

Wenn der Selektor zu keinem Element passt, liefert `querySelector()` den Wert `null`.

```js
const nichtVorhanden = document.querySelector(".gibt-es-nicht");

console.log(nichtVorhanden);
```

Ausgabe:

```text
null
```

Das bedeutet: JavaScript hat kein passendes Element gefunden.

Wenn du anschließend versuchst, dieses nicht vorhandene Element zu verändern, entsteht ein Fehler:

```js
const nichtVorhanden = document.querySelector(".gibt-es-nicht");

nichtVorhanden.textContent = "Hallo";
```

Typischerweise erscheint dann in der Konsole eine Fehlermeldung wie:

```text
Cannot set properties of null
```

Prüfe deshalb bei Fehlern immer:

- Ist der Klassenname korrekt geschrieben?
- Fehlt der Punkt `.` vor einer Klasse?
- Fehlt die Raute `#` vor einer ID?
- Existiert das Element wirklich im HTML?
- Wird das JavaScript vielleicht ausgeführt, bevor das HTML geladen wurde?

---

## JavaScript erst nach dem HTML laden

Wenn JavaScript zu früh ausgeführt wird, existieren die HTML-Elemente möglicherweise noch nicht. Dann kann `querySelector()` sie nicht finden.

Eine einfache Lösung: Binde die JavaScript-Datei am Ende des `<body>` ein.

```html
<!doctype html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <title>Meine Seite</title>
  </head>
  <body>
    <h1 id="titel">Hallo!</h1>

    <script src="script.js"></script>
  </body>
</html>
```

Wenn `script.js` geladen wird, wurde die Überschrift bereits vom Browser erstellt. Die Auswahl funktioniert dann:

```js
const titel = document.querySelector("#titel");
titel.textContent = "JavaScript funktioniert!";
```

Alternativ kannst du das Attribut `defer` im `<head>` verwenden:

```html
<script src="script.js" defer></script>
```

Mit `defer` wartet der Browser mit der Ausführung von JavaScript, bis das HTML vollständig eingelesen wurde.

---

## `querySelector()` und `querySelectorAll()`

`querySelector()` liefert immer nur das **erste passende Element**.

```html
<li class="aufgabe">HTML lernen</li>
<li class="aufgabe">JavaScript lernen</li>
<li class="aufgabe">Projekt bauen</li>
```

```js
const ersteAufgabe = document.querySelector(".aufgabe");

console.log(ersteAufgabe.textContent);
```

Ausgabe:

```text
HTML lernen
```

Wenn du **alle passenden Elemente** benötigst, gibt es `document.querySelectorAll()`:

```js
const alleAufgaben = document.querySelectorAll(".aufgabe");

console.log(alleAufgaben);
```

Das Ergebnis ist eine Sammlung aller Elemente mit der Klasse `aufgabe`.

Du kannst mit einem Index auf ein bestimmtes Element zugreifen:

```js
console.log(alleAufgaben[0].textContent);
console.log(alleAufgaben[1].textContent);
console.log(alleAufgaben[2].textContent);
```

Für viele gleichartige Elemente ist `querySelectorAll()` später besonders nützlich. Für einzelne Überschriften, Buttons oder Eingabefelder verwendest du meist `querySelector()`.

---

## Häufige Fehler

| Fehler | Ursache | Richtige Schreibweise |
|---|---|---|
| `document.querySelector("hinweis")` | Der Punkt für eine Klasse fehlt. | `document.querySelector(".hinweis")` |
| `document.querySelector("start-button")` | Die Raute für eine ID fehlt. | `document.querySelector("#start-button")` |
| `document.querySelector("#Start-Button")` | Groß- und Kleinschreibung stimmen nicht überein. | `document.querySelector("#start-button")` |
| `document.querySelector(".button")` | Die Klasse existiert nicht im HTML. | HTML und JavaScript vergleichen |
| `document.querySelector(".karte")` | Mehrere Karten existieren, aber nur die erste wird gefunden. | Bei Bedarf `querySelectorAll(".karte")` verwenden |

Klassen- und ID-Namen müssen exakt übereinstimmen. `start-button` ist nicht dasselbe wie `startButton` oder `Start-Button`.

---

## Vollständiges Mini-Beispiel

Die folgende Seite wählt eine Überschrift, einen Hinweistext und einen Button aus.

```html
<!doctype html>
<html lang="de">
  <head>
    <meta charset="UTF-8">
    <title>querySelector üben</title>
  </head>
  <body>
    <h1 id="seiten-titel">Willkommen</h1>

    <p class="hinweis">
      Klicke später auf den Button.
    </p>

    <button id="weiter-button">Weiter</button>

    <script src="script.js"></script>
  </body>
</html>
```

```js
const titel = document.querySelector("#seiten-titel");
const hinweis = document.querySelector(".hinweis");
const weiterButton = document.querySelector("#weiter-button");

console.log(titel.textContent);
console.log(hinweis.textContent);
console.log(weiterButton.textContent);
```

In der Konsole erscheinen die Texte der drei gefundenen Elemente.

---

## Merksatz

> Mit `document.querySelector()` findest du das **erste HTML-Element**, das zu einem CSS-Selektor passt.

Die wichtigsten Selektoren für den Anfang sind:

```js
document.querySelector("p");         // Elementname
document.querySelector(".hinweis");  // Klasse
document.querySelector("#menu");     // ID
```

Im nächsten Schritt kannst du die gefundenen Elemente verändern: Texte austauschen, CSS-Klassen hinzufügen oder entfernen und auf Klicks reagieren.

# Inhalte und CSS-Klassen ändern

## Lernziele

Auf dieser Seite lernst du, wie du mit JavaScript sichtbare Inhalte einer Webseite veränderst. Danach kannst du:

- Text in HTML-Elementen austauschen
- HTML-Inhalte gezielt einfügen
- CSS-Klassen hinzufügen, entfernen und umschalten
- den Zustand eines Elements prüfen
- eine kleine interaktive Oberfläche bauen

---

## Inhalte mit `textContent` ändern

Nachdem du ein Element mit `querySelector()` ausgewählt hast, kannst du seinen Text über die Eigenschaft `textContent` lesen oder verändern.

```html
<p class="nachricht">Willkommen!</p>
<button class="aendern-button">Text ändern</button>
```

```js
const nachricht = document.querySelector(".nachricht");
const aendernButton = document.querySelector(".aendern-button");

aendernButton.addEventListener("click", function () {
  nachricht.textContent = "Der Text wurde geändert.";
});
```

Beim Klick auf den Button wird der bisherige Inhalt des Absatzes ersetzt.

> **Merke:** `textContent` behandelt seinen Inhalt als reinen Text. HTML-Tags werden dabei nicht als HTML ausgeführt.

```js
nachricht.textContent = "<strong>Hallo</strong>";
```

Im Browser erscheint dann tatsächlich:

```text
<strong>Hallo</strong>
```

Das ist oft sinnvoll, weil Inhalte auf diese Weise sicher als Text ausgegeben werden.

---

## Inhalte mit `innerHTML` ändern

Mit `innerHTML` kannst du nicht nur Text, sondern auch HTML-Code in ein Element einsetzen.

```html
<p class="info"></p>
```

```js
const info = document.querySelector(".info");

info.innerHTML = "Heute ist <strong>ein guter Tag</strong>.";
```

Das Ergebnis im Browser lautet:

> Heute ist **ein guter Tag**.

Auch Listen oder mehrere Elemente lassen sich einsetzen:

```js
info.innerHTML = `
  <h2>Aufgaben</h2>
  <ul>
    <li>JavaScript üben</li>
    <li>Code testen</li>
  </ul>
`;
```

### Wann verwende ich was?

| Eigenschaft | Geeignet für | Beispiel |
|---|---|---|
| `textContent` | normalen Text | Überschriften, Meldungen, Zahlen |
| `innerHTML` | HTML-Strukturen | Listen, Links, hervorgehobene Inhalte |

Verwende `textContent`, wenn du nur Text ändern möchtest. Es ist einfacher und sicherer.

Mit `innerHTML` solltest du besonders vorsichtig sein, wenn Inhalte von Nutzerinnen und Nutzern stammen. Ungeprüfte Eingaben können unerwünschten HTML- oder JavaScript-Code enthalten.

---

## CSS-Klassen mit `classList` verändern

CSS-Klassen bestimmen häufig das Aussehen eines Elements. JavaScript kann diese Klassen dynamisch ändern.

Betrachte zunächst dieses HTML:

```html
<p class="status">Die Lampe ist aus.</p>
<button class="licht-button">Licht einschalten</button>
```

Und dieses CSS:

```css
.status {
  padding: 12px;
  background-color: #eeeeee;
  color: #222222;
}

.an {
  background-color: #fff3a3;
  color: #7a4b00;
  font-weight: bold;
}
```

Die Klasse `status` sorgt für das normale Aussehen. Die Klasse `an` soll zusätzlich erscheinen, wenn die Lampe eingeschaltet ist.

---

## Eine Klasse hinzufügen: `classList.add()`

Mit `classList.add()` fügst du einem Element eine CSS-Klasse hinzu.

```js
const status = document.querySelector(".status");

status.classList.add("an");
```

Danach hat der Absatz beide Klassen:

```html
<p class="status an">Die Lampe ist aus.</p>
```

Die CSS-Regeln von `.an` werden nun angewendet.

Du kannst auch mehrere Klassen gleichzeitig hinzufügen:

```js
status.classList.add("an", "hervorgehoben");
```

---

## Eine Klasse entfernen: `classList.remove()`

Mit `classList.remove()` entfernst du eine Klasse wieder.

```js
status.classList.remove("an");
```

Das Element besitzt anschließend nur noch die Klasse `status`.

Auch hier sind mehrere Klassen möglich:

```js
status.classList.remove("an", "hervorgehoben");
```

---

## Eine Klasse umschalten: `classList.toggle()`

Besonders praktisch ist `classList.toggle()`. Die Methode prüft automatisch:

- Ist die Klasse noch nicht vorhanden? Dann wird sie hinzugefügt.
- Ist die Klasse schon vorhanden? Dann wird sie entfernt.

```js
status.classList.toggle("an");
```

Damit eignet sich `toggle()` hervorragend für Schalter, Menüs, Akkordeons oder einen Dark Mode.

### Beispiel: Dunklen Modus umschalten

```html
<button class="modus-button">Dunklen Modus umschalten</button>

<main class="seite">
  <h2>Meine Webseite</h2>
  <p>Dieser Bereich kann sein Aussehen ändern.</p>
</main>
```

```css
.seite {
  padding: 24px;
  background-color: white;
  color: #222222;
}

.dunkel {
  background-color: #222222;
  color: white;
}
```

```js
const modusButton = document.querySelector(".modus-button");
const seite = document.querySelector(".seite");

modusButton.addEventListener("click", function () {
  seite.classList.toggle("dunkel");
});
```

Bei jedem Klick wird die Klasse `dunkel` hinzugefügt oder wieder entfernt.

---

## Prüfen, ob eine Klasse vorhanden ist

Mit `classList.contains()` kannst du herausfinden, ob ein Element eine bestimmte Klasse besitzt.

```js
const dunkelAktiv = seite.classList.contains("dunkel");

console.log(dunkelAktiv);
```

Das Ergebnis ist entweder `true` oder `false`.

Diese Prüfung ist nützlich, wenn sich nicht nur das Aussehen, sondern auch ein Text ändern soll.

```js
modusButton.addEventListener("click", function () {
  seite.classList.toggle("dunkel");

  if (seite.classList.contains("dunkel")) {
    modusButton.textContent = "Hellen Modus einschalten";
  } else {
    modusButton.textContent = "Dunklen Modus einschalten";
  }
});
```

Nun passt der Buttontext immer zum aktuellen Zustand.

---

## Praxisbeispiel: Eine Hinweisbox ein- und ausblenden

In diesem Beispiel wird ein Hinweis zunächst verborgen. Ein Klick auf den Button zeigt ihn an. Beim nächsten Klick wird er wieder ausgeblendet.

### HTML

```html
<button class="hinweis-button">Hinweis anzeigen</button>

<p class="hinweis versteckt">
  JavaScript wird direkt im Browser ausgeführt.
</p>
```

### CSS

```css
.hinweis {
  margin-top: 16px;
  padding: 12px;
  border-left: 4px solid #2c7a7b;
  background-color: #e6fffa;
}

.versteckt {
  display: none;
}
```

### JavaScript

```js
const hinweisButton = document.querySelector(".hinweis-button");
const hinweis = document.querySelector(".hinweis");

hinweisButton.addEventListener("click", function () {
  hinweis.classList.toggle("versteckt");

  if (hinweis.classList.contains("versteckt")) {
    hinweisButton.textContent = "Hinweis anzeigen";
  } else {
    hinweisButton.textContent = "Hinweis ausblenden";
  }
});
```

### Was passiert hier?

1. Der Absatz startet mit der Klasse `versteckt`.
2. Diese Klasse setzt `display: none`.
3. Beim Klick schaltet `toggle("versteckt")` die Klasse um.
4. `contains("versteckt")` prüft anschließend den neuen Zustand.
5. Der Buttontext wird passend angepasst.

✨ So entsteht eine einfache, aber echte Interaktion.

---

## Alternative: Klassen vollständig ersetzen

Manchmal möchtest du die gesamte Klassenliste ersetzen. Dafür gibt es `className`.

```js
const box = document.querySelector(".box");

box.className = "box erfolg";
```

Danach besitzt das Element genau die Klassen `box` und `erfolg`.

Diese Schreibweise ist möglich, aber `classList` ist in vielen Situationen besser lesbar und sicherer. Wenn du nur eine einzelne Klasse ändern möchtest, verwende daher meist:

```js
box.classList.add("erfolg");
```

oder:

```js
box.classList.remove("fehler");
```

---

## Komplettes Beispiel: Richtige und falsche Antwort anzeigen

Dieses Beispiel verbindet Textänderungen und CSS-Klassen. Beim Klick auf einen Button erscheint eine Rückmeldung.

### HTML

```html
<h2>Kurze Frage</h2>
<p>Welche Sprache macht Webseiten interaktiv?</p>

<button class="antwort-button">JavaScript</button>
<button class="antwort-button">HTML</button>

<p class="rueckmeldung"></p>
```

### CSS

```css
.rueckmeldung {
  margin-top: 16px;
  padding: 12px;
  font-weight: bold;
}

.richtig {
  background-color: #d9f7df;
  color: #176b2c;
}

.falsch {
  background-color: #ffe0e0;
  color: #9b1c1c;
}
```

### JavaScript

```js
const antwortButtons = document.querySelectorAll(".antwort-button");
const rueckmeldung = document.querySelector(".rueckmeldung");

antwortButtons.forEach(function (button) {
  button.addEventListener("click", function () {
    rueckmeldung.classList.remove("richtig", "falsch");

    if (button.textContent === "JavaScript") {
      rueckmeldung.textContent = "Richtig! JavaScript macht Webseiten interaktiv.";
      rueckmeldung.classList.add("richtig");
    } else {
      rueckmeldung.textContent = "Noch nicht richtig. HTML beschreibt die Struktur einer Webseite.";
      rueckmeldung.classList.add("falsch");
    }
  });
});
```

### Wichtige Beobachtungen

- `querySelectorAll()` wählt beide Buttons aus.
- `forEach()` richtet für jeden Button einen Klick-Listener ein.
- Vor jeder neuen Rückmeldung werden die alten Klassen entfernt.
- Die neue Rückmeldung erhält entweder die Klasse `richtig` oder `falsch`.

Ohne das vorherige `remove()` könnte eine Rückmeldung gleichzeitig beide Klassen besitzen. Das führt leicht zu widersprüchlichem CSS.

---

## Häufige Fehler

### Die Klasse wird ohne Punkt geschrieben

Bei `querySelector()` benötigst du für eine Klasse einen Punkt:

```js
const box = document.querySelector(".box");
```

Bei `classList.add()` schreibst du den Klassennamen **ohne** Punkt:

```js
box.classList.add("aktiv");
```

Das hier wäre falsch:

```js
box.classList.add(".aktiv");
```

---

### JavaScript findet das Element nicht

Wenn dieses Ergebnis erscheint:

```text
Cannot read properties of null
```

wurde das Element wahrscheinlich nicht gefunden. Prüfe:

- Ist der Klassenname im HTML korrekt?
- Steht im Selektor ein Punkt vor dem Klassennamen?
- Wird das JavaScript erst ausgeführt, nachdem das HTML geladen wurde?

Eine einfache Lösung ist, das `<script>`-Element am Ende des `<body>` einzubinden:

```html
<body>
  <p class="nachricht">Hallo!</p>

  <script src="script.js"></script>
</body>
```

Dann existieren die HTML-Elemente bereits, wenn JavaScript gestartet wird.

---

### Die alte Klasse bleibt erhalten

Wenn ein Element nur eine von zwei Zustandsklassen haben soll, entferne zuerst beide möglichen Klassen:

```js
rueckmeldung.classList.remove("richtig", "falsch");
```

Danach fügst du die gewünschte Klasse hinzu:

```js
rueckmeldung.classList.add("richtig");
```

---

## Übung

Erstelle einen Button mit der Aufschrift „Details anzeigen“. Beim Klick soll ein Textabschnitt sichtbar werden. Der Button soll danach „Details ausblenden“ heißen. Beim nächsten Klick soll der Abschnitt wieder verschwinden.

Nutze dafür:

- `querySelector()`
- `addEventListener()`
- `classList.toggle()`
- `classList.contains()`
- `textContent`

### Mögliche Lösung

```html
<button class="details-button">Details anzeigen</button>

<p class="details versteckt">
  Diese zusätzlichen Informationen sind zunächst verborgen.
</p>
```

```css
.versteckt {
  display: none;
}
```

```js
const detailsButton = document.querySelector(".details-button");
const details = document.querySelector(".details");

detailsButton.addEventListener("click", function () {
  details.classList.toggle("versteckt");

  if (details.classList.contains("versteckt")) {
    detailsButton.textContent = "Details anzeigen";
  } else {
    detailsButton.textContent = "Details ausblenden";
  }
});
```

---

## Zusammenfassung

Mit JavaScript kannst du Inhalte und das Aussehen einer Webseite direkt verändern:

- `textContent` setzt oder liest reinen Text.
- `innerHTML` setzt HTML-Inhalte.
- `classList.add()` fügt eine Klasse hinzu.
- `classList.remove()` entfernt eine Klasse.
- `classList.toggle()` schaltet eine Klasse ein oder aus.
- `classList.contains()` prüft, ob eine Klasse vorhanden ist.

Damit hast du ein wichtiges Werkzeug für interaktive Webseiten: Du kannst auf Aktionen reagieren und sichtbares Feedback geben. Im nächsten Schritt lernst du, Ereignisse mit `addEventListener()` noch gezielter einzusetzen.

# Ereignisse mit `addEventListener()`

## Lernziele

Nach dieser Lektion kannst du:

- auf Benutzeraktionen wie Klicks und Eingaben reagieren,
- mit `addEventListener()` Ereignisse überwachen,
- Funktionen als Reaktion auf Ereignisse ausführen,
- Informationen über das Ereignis mit dem Event-Objekt nutzen,
- typische Fehler beim Arbeiten mit Ereignissen vermeiden.

---

## Was sind Ereignisse?

Eine Webseite reagiert nicht von allein auf Benutzerinnen und Benutzer. Erst durch JavaScript kann sie auf Aktionen eingehen.

Solche Aktionen heißen **Ereignisse** oder auf Englisch *Events*. Beispiele sind:

- Ein Button wird angeklickt: `click`
- Text wird in ein Eingabefeld geschrieben: `input`
- Ein Formular wird abgeschickt: `submit`
- Die Maus bewegt sich über ein Element: `mouseover`
- Eine Taste wird gedrückt: `keydown`

Mit `addEventListener()` sagst du JavaScript:

> „Wenn dieses Ereignis passiert, führe eine bestimmte Funktion aus.“

---

## Die Grundstruktur von `addEventListener()`

Die Methode wird auf einem HTML-Element aufgerufen:

```js
element.addEventListener("ereignis", funktion);
```

Dabei bedeutet:

- `element`: Das ausgewählte HTML-Element, zum Beispiel ein Button.
- `"ereignis"`: Der Name des Ereignisses als String, zum Beispiel `"click"`.
- `funktion`: Der Code, der beim Ereignis ausgeführt werden soll.

Ein einfaches Beispiel:

```js
const button = document.querySelector("button");

button.addEventListener("click", begruessen);

function begruessen() {
  console.log("Der Button wurde angeklickt.");
}
```

Sobald jemand auf den Button klickt, erscheint die Nachricht in der Browser-Konsole.

---

## Ein Button reagiert auf einen Klick

Erstelle zunächst eine HTML-Datei mit einem Button und einem Absatz:

```html
<button id="hallo-button">Begrüßung anzeigen</button>
<p id="ausgabe">Noch kein Klick.</p>
```

Nun wählst du beide Elemente mit JavaScript aus:

```js
const halloButton = document.querySelector("#hallo-button");
const ausgabe = document.querySelector("#ausgabe");
```

Danach fügst du den Event Listener hinzu:

```js
halloButton.addEventListener("click", zeigeBegruessung);

function zeigeBegruessung() {
  ausgabe.textContent = "Hallo! Schön, dass du da bist.";
}
```

**Ablauf:**

1. JavaScript sucht den Button über `#hallo-button`.
2. JavaScript wartet auf einen Klick auf diesen Button.
3. Beim Klick wird `zeigeBegruessung()` ausgeführt.
4. Der Text im Absatz wird verändert.

---

## Funktion übergeben, nicht sofort aufrufen

Ein häufiger Anfängerfehler sieht so aus:

```js
halloButton.addEventListener("click", zeigeBegruessung());
```

Das ist falsch, weil die Funktion durch die Klammern sofort ausgeführt wird — also schon beim Laden der Seite.

Richtig ist:

```js
halloButton.addEventListener("click", zeigeBegruessung);
```

Hier übergibst du die Funktion als Anweisung für später. JavaScript führt sie erst aus, wenn das Ereignis eintritt.

> **Merke:** Bei `addEventListener()` steht der Funktionsname normalerweise ohne Klammern.

---

## Eine anonyme Funktion verwenden

Du kannst die Funktion auch direkt in `addEventListener()` schreiben. Das nennt man eine **anonyme Funktion**, weil sie keinen eigenen Namen hat.

```js
halloButton.addEventListener("click", function () {
  ausgabe.textContent = "Hallo! Schön, dass du da bist.";
});
```

Oft wird dafür die kürzere Pfeilfunktion verwendet:

```js
halloButton.addEventListener("click", () => {
  ausgabe.textContent = "Hallo! Schön, dass du da bist.";
});
```

Für kurze Reaktionen ist diese Schreibweise sehr praktisch.

```js
const button = document.querySelector("#hallo-button");

button.addEventListener("click", () => {
  console.log("Klick erkannt!");
});
```

Wenn dieselbe Funktion an mehreren Stellen gebraucht wird oder der Code länger wird, ist eine benannte Funktion meist übersichtlicher.

---

## Einen Zähler bauen

Ein Klickzähler ist ein gutes erstes Beispiel für ein interaktives Element.

### HTML

```html
<button id="zaehl-button">Klick mich</button>
<p>Anzahl der Klicks: <span id="anzahl">0</span></p>
```

### JavaScript

```js
const zaehlButton = document.querySelector("#zaehl-button");
const anzahlAnzeige = document.querySelector("#anzahl");

let anzahlKlicks = 0;

zaehlButton.addEventListener("click", () => {
  anzahlKlicks = anzahlKlicks + 1;
  anzahlAnzeige.textContent = anzahlKlicks;
});
```

Die Variable `anzahlKlicks` speichert den aktuellen Wert. Bei jedem Klick wird sie um eins erhöht und anschließend im `<span>` angezeigt.

Du kannst die Kurzschreibweise `++` verwenden:

```js
anzahlKlicks++;
```

Die Funktion könnte dann so aussehen:

```js
zaehlButton.addEventListener("click", () => {
  anzahlKlicks++;
  anzahlAnzeige.textContent = anzahlKlicks;
});
```

---

## Auf Eingaben reagieren

Nicht nur Klicks können Ereignisse auslösen. Mit dem Ereignis `input` reagiert JavaScript auf jede Änderung in einem Eingabefeld.

### HTML

```html
<label for="name">Wie heißt du?</label>
<input id="name" type="text" placeholder="Dein Name">
<p id="begrüßung"></p>
```

### JavaScript

```js
const namensfeld = document.querySelector("#name");
const begruessung = document.querySelector("#begrüßung");

namensfeld.addEventListener("input", () => {
  const name = namensfeld.value;

  begruessung.textContent = "Hallo, " + name + "!";
});
```

Die Eigenschaft `.value` liefert den aktuellen Inhalt eines Eingabefelds.

Wenn im Feld noch nichts steht, wäre die Ausgabe „Hallo, !“. Das kannst du mit einer Bedingung verbessern:

```js
namensfeld.addEventListener("input", () => {
  const name = namensfeld.value;

  if (name === "") {
    begruessung.textContent = "";
  } else {
    begruessung.textContent = "Hallo, " + name + "!";
  }
});
```

---

## Das Event-Objekt

Wenn ein Ereignis passiert, übergibt JavaScript zusätzliche Informationen an deine Funktion. Diese Informationen stecken im **Event-Objekt**.

```js
button.addEventListener("click", (event) => {
  console.log(event);
});
```

Der Name `event` ist frei wählbar. Häufig werden auch `e` oder `ereignis` verwendet:

```js
button.addEventListener("click", (e) => {
  console.log(e);
});
```

Für Anfängerinnen und Anfänger ist `event` meist am verständlichsten.

---

## Das Element herausfinden, das geklickt wurde

Mit `event.target` erfährst du, welches Element das Ereignis ausgelöst hat.

```html
<button class="farbe-button">Blau</button>
<button class="farbe-button">Grün</button>
<button class="farbe-button">Rot</button>
```

```js
const farbButtons = document.querySelectorAll(".farbe-button");

farbButtons.forEach((button) => {
  button.addEventListener("click", (event) => {
    console.log(event.target.textContent);
  });
});
```

Klickst du auf „Grün“, gibt die Konsole aus:

```text
Grün
```

`event.target` ist also das Element, auf das tatsächlich geklickt wurde.

---

## Ein Formular abschicken

Bei Formularen ist das Ereignis `submit` besonders wichtig.

### HTML

```html
<form id="kontakt-formular">
  <label for="email">E-Mail-Adresse</label>
  <input id="email" type="email" required>
  <button type="submit">Absenden</button>
</form>

<p id="meldung"></p>
```

### JavaScript

```js
const formular = document.querySelector("#kontakt-formular");
const meldung = document.querySelector("#meldung");

formular.addEventListener("submit", (event) => {
  event.preventDefault();

  meldung.textContent = "Vielen Dank! Das Formular wurde verarbeitet.";
});
```

Normalerweise lädt der Browser nach dem Absenden eines Formulars die Seite neu oder wechselt zu einer anderen Adresse. Mit

```js
event.preventDefault();
```

verhinderst du dieses Standardverhalten.

Das ist hilfreich, wenn JavaScript die Eingaben zunächst prüfen oder direkt auf der Seite verarbeiten soll.

> **Wichtig:** Höre bei Formularen auf `submit`, nicht nur auf den Klick des Absende-Buttons. So funktioniert die Verarbeitung auch, wenn jemand die Eingabetaste drückt.

---

## Klassen beim Klick umschalten

Mit einem Ereignis kannst du auch das Aussehen eines Elements verändern.

### HTML

```html
<button id="design-button">Design wechseln</button>

<p id="text">Dieser Text kann hervorgehoben werden.</p>
```

### CSS

```css
.hervorgehoben {
  background-color: gold;
  color: black;
  font-weight: bold;
  padding: 8px;
}
```

### JavaScript

```js
const designButton = document.querySelector("#design-button");
const text = document.querySelector("#text");

designButton.addEventListener("click", () => {
  text.classList.toggle("hervorgehoben");
});
```

`classList.toggle()` funktioniert in zwei Richtungen:

- Ist die Klasse noch nicht vorhanden, wird sie hinzugefügt.
- Ist die Klasse bereits vorhanden, wird sie entfernt.

Jeder Klick schaltet das Aussehen also um.

---

## Mehrere Ereignisse für ein Element

Ein Element kann auf mehrere Ereignisse reagieren.

```js
const feld = document.querySelector("#name");

feld.addEventListener("focus", () => {
  console.log("Das Eingabefeld ist aktiv.");
});

feld.addEventListener("blur", () => {
  console.log("Das Eingabefeld wurde verlassen.");
});
```

Dabei bedeutet:

- `focus`: Das Element erhält den Fokus, etwa durch einen Klick ins Feld.
- `blur`: Das Element verliert den Fokus, etwa durch einen Klick außerhalb des Felds.

Du kannst auch mehrere Listener für dasselbe Ereignis registrieren:

```js
button.addEventListener("click", () => {
  console.log("Erste Reaktion");
});

button.addEventListener("click", () => {
  console.log("Zweite Reaktion");
});
```

Bei einem Klick werden beide Funktionen ausgeführt.

---

## Häufige Ereignisse im Überblick

| Ereignis | Wann passiert es? | Typisches Beispiel |
|---|---|---|
| `click` | Ein Element wird angeklickt | Button bedienen |
| `input` | Der Inhalt eines Felds ändert sich | Text beim Tippen anzeigen |
| `change` | Ein Wert wurde geändert und bestätigt | Auswahlfeld auswerten |
| `submit` | Ein Formular wird abgeschickt | Formulardaten prüfen |
| `keydown` | Eine Taste wird gedrückt | Tastenkürzel erkennen |
| `focus` | Ein Element wird aktiv | Eingabefeld hervorheben |
| `blur` | Ein Element verliert den Fokus | Eingabe prüfen |
| `mouseover` | Die Maus fährt über ein Element | Hinweis anzeigen |

---

## Typische Fehler und ihre Lösungen

### Das Element wurde nicht gefunden

```js
const button = document.querySelector("#mein-button");

button.addEventListener("click", () => {
  console.log("Hallo");
});
```

Wenn es kein Element mit der ID `mein-button` gibt, enthält `button` den Wert `null`. Dann entsteht ein Fehler.

Prüfe deshalb:

- Stimmt die ID im HTML genau mit dem Selektor überein?
- Wird das JavaScript erst ausgeführt, nachdem das HTML geladen wurde?

Eine gute Lösung ist, das Script mit `defer` einzubinden:

```html
<script src="script.js" defer></script>
```

Mit `defer` wartet der Browser, bis das HTML vollständig eingelesen wurde.

---

### Das Ereignis steht nicht in Anführungszeichen

Falsch:

```js
button.addEventListener(click, starte);
```

Richtig:

```js
button.addEventListener("click", starte);
```

Der Ereignisname ist ein String und braucht deshalb Anführungszeichen.

---

### Die Funktion wird zu früh ausgeführt

Falsch:

```js
button.addEventListener("click", starte());
```

Richtig:

```js
button.addEventListener("click", starte);
```

Die Klammern rufen eine Funktion sofort auf. Ohne Klammern wird die Funktion für den späteren Klick gespeichert.

---

### `preventDefault()` fehlt beim Formular

Wenn sich die Seite beim Absenden direkt neu lädt, fehlt wahrscheinlich diese Zeile:

```js
event.preventDefault();
```

Sie muss innerhalb der Funktion für das `submit`-Ereignis stehen.

---

## Praxisbeispiel: Eine Aufgabenliste mit Rückmeldung

Dieses kleine Beispiel verbindet Klicks, Eingaben und Bedingungen.

### HTML

```html
<label for="aufgabe">Neue Aufgabe</label>
<input id="aufgabe" type="text" placeholder="Zum Beispiel: JavaScript üben">

<button id="hinzufuegen">Hinzufügen</button>

<p id="meldung"></p>
<ul id="liste"></ul>
```

### JavaScript

```js
const aufgabenfeld = document.querySelector("#aufgabe");
const hinzufuegenButton = document.querySelector("#hinzufuegen");
const meldung = document.querySelector("#meldung");
const liste = document.querySelector("#liste");

hinzufuegenButton.addEventListener("click", () => {
  const aufgabe = aufgabenfeld.value;

  if (aufgabe === "") {
    meldung.textContent = "Bitte gib zuerst eine Aufgabe ein.";
  } else {
    const listenElement = document.createElement("li");

    listenElement.textContent = aufgabe;
    liste.append(listenElement);

    meldung.textContent = "Aufgabe wurde hinzugefügt.";
    aufgabenfeld.value = "";
  }
});
```

**Was passiert hier?**

1. Beim Klick liest JavaScript den Inhalt des Eingabefelds aus.
2. Ist das Feld leer, erscheint eine Hinweismeldung.
3. Andernfalls wird ein neues `<li>`-Element erstellt.
4. Die Aufgabe wird in die Liste eingefügt.
5. Das Eingabefeld wird wieder geleert.

`document.createElement("li")` erstellt ein neues HTML-Element. Mit `.append()` wird es an die Liste angehängt.

---

## Übung

Erstelle einen Button, der einen Absatz ein- und ausblendet.

### Vorgabe: HTML

```html
<button id="info-button">Information anzeigen</button>

<p id="info-text">
  JavaScript kann auf Benutzeraktionen reagieren.
</p>
```

### Vorgabe: CSS

```css
.versteckt {
  display: none;
}
```

### Aufgabe

1. Wähle Button und Absatz mit `querySelector()` aus.
2. Reagiere auf das `click`-Ereignis des Buttons.
3. Schalte beim Klick die Klasse `versteckt` am Absatz um.
4. Ändere den Button-Text passend:
   - Ist der Text sichtbar, soll der Button „Information ausblenden“ zeigen.
   - Ist der Text versteckt, soll der Button „Information anzeigen“ zeigen.

---

## Mögliche Lösung

```js
const infoButton = document.querySelector("#info-button");
const infoText = document.querySelector("#info-text");

infoButton.addEventListener("click", () => {
  infoText.classList.toggle("versteckt");

  if (infoText.classList.contains("versteckt")) {
    infoButton.textContent = "Information anzeigen";
  } else {
    infoButton.textContent = "Information ausblenden";
  }
});
```

`classList.contains("versteckt")` prüft, ob ein Element diese Klasse gerade besitzt. Das Ergebnis ist entweder `true` oder `false`.

---

## Zusammenfassung

Mit `addEventListener()` machst du Webseiten interaktiv:

```js
element.addEventListener("click", () => {
  // Code für den Klick
});
```

Wichtige Punkte sind:

- Ereignisse wie `click`, `input` und `submit` lösen JavaScript-Code aus.
- Die Funktion wird ohne Klammern an `addEventListener()` übergeben.
- Mit dem Event-Objekt erhältst du zusätzliche Informationen, etwa über `event.target`.
- `event.preventDefault()` verhindert das Standardverhalten, zum Beispiel beim Absenden eines Formulars.
- Mit `classList.toggle()` kannst du CSS-Klassen bequem ein- und ausschalten.

Damit kennst du die zentrale Verbindung zwischen Benutzeraktionen und JavaScript-Code — eine wichtige Grundlage für jede interaktive Webseite.