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.

JavaScript kennenlernen

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:

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:

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

<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:

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

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

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:

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:

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:

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:

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

Zusammenfassung

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 kennenlernen

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:

<!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:

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:

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

<!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:

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

Die JavaScript-Datei

Schreibe in script.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:

Die Datei script.js wurde geladen.

Warum separate Dateien sinnvoll sind

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

Eine übliche Grundstruktur sieht so aus:

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

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

<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:

<!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:

<!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:

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:

<!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:

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

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

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

Hallo, JavaScript!

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

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:

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

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

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

<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:

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

Richtig wäre dann:

<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:

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:

<!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:

<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:

ü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

<!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

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

Ersetze „Alex“ durch deinen eigenen Namen.

Das Wichtigste auf einen Blick

JavaScript kennenlernen

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:

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:

2 + 3

Die Konsole zeigt direkt das Ergebnis:

5

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

Probiere weitere Rechnungen aus:

10 * 4

20 / 5

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:

"Hallo JavaScript"

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

Auch einfache Textverknüpfungen funktionieren:

"Hallo " + "Welt"

Das Ergebnis lautet:

"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:

"Mein Alter: " + 20

Die Konsole gibt dann etwa Folgendes zurück:

"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:

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:

    5 * 5

  2. Drücke die Pfeiltaste ↑.

  3. Ändere den Befehl zu:

    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:

"Hallo

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

Oder probiere diesen Namen aus:

meinName

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

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:

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:

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:

7 > 3

"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:

"Ich lerne JavaScript"

Dieser Text ist nicht korrekt:

"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:

4 + 6

12 * 3

"Java" + "Script"

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

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

JavaScript kennenlernen

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.

console.log("Hallo Welt!");

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

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.

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:

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

Zahlen ausgeben

Zahlen brauchen keine Anführungszeichen:

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

Die Konsole zeigt:

42
3.14
-7

Der Unterschied ist wichtig:

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:

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

Die Konsole zeigt:

8
6
42
4

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

console.log(2 + 3 * 4);

Das Ergebnis lautet:

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:

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

In der Konsole erscheinen dann drei getrennte Zeilen:

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:

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

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

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

Die Konsole zeigt beispielsweise:

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 //:

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

Du kannst Kommentare auch hinter eine Anweisung schreiben:

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:

console.log(Hallo Welt);

Richtig ist:

console.log("Hallo Welt");

Unterschiedliche Anführungszeichen mischen

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

console.log("Hallo');

Richtig:

console.log("Hallo");

Oder:

console.log('Hallo');

Klammern vergessen

log muss mit runden Klammern aufgerufen werden:

console.log "Hallo";

Richtig:

console.log("Hallo");

Groß- und Kleinschreibung verwechseln

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

Console.log("Hallo");

Richtig ist ausschließlich:

console.log("Hallo");

Praktisches Beispiel: Ein kleiner Konsolen-Steckbrief

Erstelle mehrere Ausgaben, die einen kurzen Steckbrief darstellen:

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:

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

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, Werte und Operatoren

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.

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

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

Die Konsole zeigt:

Mira
16

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

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

Praktischer ist:

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.

let punkte = 0;

console.log(punkte);

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

let punkte = 0;

punkte = 10;

console.log(punkte);

Die Ausgabe lautet:

10

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

let punkte = 0;

// richtig
punkte = 10;

Dieser Code wäre falsch:

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.

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.

let besucher = 0;

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

console.log(besucher);

Ausgabe:

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.

const geburtsjahr = 2008;

console.log(geburtsjahr);

Dieser Code funktioniert nicht:

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:

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

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

const begruessung = "Willkommen auf meiner Webseite!";

console.log(begruessung);

let oder const?

Die wichtigste Frage lautet:

Soll dieser Wert später ersetzt werden?

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:

let lieblingsfarbe;

console.log(lieblingsfarbe);

Die Ausgabe ist:

undefined

undefined bedeutet: Es wurde noch kein Wert gespeichert.

Später kannst du einen Wert zuweisen:

let lieblingsfarbe;

lieblingsfarbe = "Blau";

console.log(lieblingsfarbe);

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

// falsch
const lieblingsfarbe;

Richtig wäre:

const lieblingsfarbe = "Blau";

Gute Namen für Variablen

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

Weniger verständlich:

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

Besser:

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.

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:

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:

// falsch
let 1spieler = "Noah";

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

// 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.

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

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

Die Ausgabe lautet:

Mira
Jonas

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

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.

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:

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

const anzahl = 3;
anzahl = 4;

Problem: Eine Konstante darf nicht neu zugewiesen werden.

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

let anzahl = 3;
anzahl = 4;

Variable versehentlich erneut erstellen

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

Problem: nachricht wurde im gleichen Bereich bereits erstellt.

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

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

Namen unterschiedlich schreiben

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

Problem: benutzerName und benutzername sind unterschiedliche Namen.

Lösung: Schreibe den Namen exakt gleich.

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

Merke dir

Ü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:

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.

Variablen, Werte und Operatoren

Zahlen, Strings und Booleans

Drei wichtige Datentypen

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

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.

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

Mit Zahlen kannst du rechnen:

let a = 10;
let b = 5;

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

Auch negative Zahlen und Dezimalzahlen sind möglich:

let kontostand = -25;
let breite = 12.5;

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

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

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:

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.

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

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

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.

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:

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

console.log(zitat);

Oder umgekehrt:

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.

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:

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:

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:

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:

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.

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:

Booleans werden ohne Anführungszeichen geschrieben.

let istOnline = true;
let istFertig = false;

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

let hatTicket = true;

console.log(hatTicket); // true

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

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.

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.

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:

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:

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

Diese Namen sind verständlicher als:

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

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

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:

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:

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:

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:

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:

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.

Variablen, Werte und Operatoren

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:

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

Die Konsole gibt aus:

10
6
30
5

Mit Variablen rechnen

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

let preis = 12;
let anzahl = 3;

let gesamtpreis = preis * anzahl;

console.log(gesamtpreis);

Die Ausgabe lautet:

36

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

Ein weiteres Beispiel:

const aktuellesJahr = 2025;
const geburtsjahr = 2008;

const alter = aktuellesJahr - geburtsjahr;

console.log(alter);

Division und Dezimalzahlen

Mit / teilst du eine Zahl durch eine andere.

const strecke = 150;
const stunden = 3;

const geschwindigkeit = strecke / stunden;

console.log(geschwindigkeit);

Ergebnis:

50

Eine Division kann auch eine Dezimalzahl ergeben:

console.log(7 / 2);

Ausgabe:

3.5

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

const temperatur = 21.5;

Nicht so:

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.

console.log(10 / 0);

Der Restoperator %

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

console.log(10 % 3);

Die 3 passt dreimal in die 10:

3 * 3 = 9

Es bleibt 1 übrig. Deshalb lautet die Ausgabe:

1

Weitere Beispiele:

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

Ergebnisse:

0
1
3

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

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.

console.log(2 ** 3);

Das bedeutet:

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

Weitere Beispiele:

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

Ausgabe:

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:

console.log(2 + 3 * 4);

Das Ergebnis ist:

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:

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

Jetzt lautet das Ergebnis:

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:

let punkte = 10;

punkte = punkte + 5;

console.log(punkte);

Die Variable punkte enthält danach den Wert 15.

Dafür gibt es auch Kurzschreibweisen:

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:

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.

console.log(4 + 5);

Ergebnis:

9

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

console.log("4" + 5);

Ergebnis:

45

Auch dieses Beispiel erzeugt Text:

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

console.log(begruessung);

Ausgabe:

Hallo, Mila!

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

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

Ausgabe:

8
30

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

const richtigeZahl = 10;

Statt:

const textStattZahl = "10";

Praxisbeispiel: Kosten einer Bestellung

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

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:

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:

const ergebnis = 4 * 7;

Das Zeichen x funktioniert nicht als Rechenoperator:

// Falsch:
const ergebnis = 4 x 7;

Variablenname richtig schreiben

JavaScript unterscheidet genau zwischen verschiedenen Schreibweisen:

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

Das wäre ein Fehler:

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:

console.log(6 * 7);

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

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

const breite = 8;
const hoehe = 5;

const flaeche = breite * hoehe;

console.log(flaeche);

const pizzaPreis = 9.5;
const anzahlPizzen = 3;

const gesamtpreis = pizzaPreis * anzahlPizzen;

console.log(gesamtpreis);

let punkte = 20;

punkte -= 7;

console.log(punkte);

console.log(25 % 4);

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.

Variablen, Werte und Operatoren

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:

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:

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.

const punkte = 10; // Wert zuweisen

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

Strenger Vergleich mit ===

In JavaScript gibt es zwei Arten, Gleichheit zu vergleichen:

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

Der Unterschied:

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

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.

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:

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.

const farbe = "blau";

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

Bei Strings zählen Groß- und Kleinschreibung:

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

Auch Leerzeichen sind Teil des Textes:

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:

const istAngemeldet = true;

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

Oft ist der direkte Wert aber besser lesbar:

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.

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.

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

Ein weiteres Beispiel:

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.

const istWochenende = false;
const hatUrlaub = true;

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

Es reicht hier, wenn Wochenende oder Urlaub ist.

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

Ein praktisches Beispiel:

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:

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

Beispiel mit einer Variablen:

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:

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:

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:

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:

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:

const ergebnis = true || false && false;

console.log(ergebnis); // true

wird so verstanden:

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

console.log(ergebnis); // true

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

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:

const istEingeloggt = false;
const hatNachrichten = true;

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

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

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

const name = "Lea";

console.log(name = "Tom");

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

Richtig:

const name = "Lea";

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

String und Zahl verwechseln

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:

const punkte = 10;

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

Groß- und Kleinschreibung übersehen

const land = "Deutschland";

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

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

Unnötig komplizierte Boolean-Vergleiche

Dieser Code funktioniert:

const hatBezahlt = true;

console.log(hatBezahlt === true);

Meist genügt jedoch:

const hatBezahlt = true;

console.log(hatBezahlt);

Für den umgekehrten Fall:

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.

const alter = 14;
const hatBegleitung = true;

const darfTeilnehmen = alter >= 16 || hatBegleitung;

console.log(darfTeilnehmen); // true

Teste verschiedene Werte:

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:

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

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

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.

Entscheidungen und Wiederholungen

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:

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:

Schau dir dieses Beispiel an:

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:

Du bist volljährig.

Aufbau einer if-Anweisung

Eine if-Anweisung besteht aus drei Teilen:

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:

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.

let temperatur = 12;

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

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

Die Ausgabe lautet:

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.

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:

Du bist noch nicht wahlberechtigt.

Der Aufbau sieht allgemein so aus:

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:

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:

let name = "Mira";

Ein einzelnes Gleichheitszeichen = weist einen Wert zu.

name = "Sam";

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

Drei Gleichheitszeichen === vergleichen Werte:

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

Ein häufiger Anfängerfehler ist dieser:

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.

let istEingeloggt = true;

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

Du musst nicht schreiben:

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:

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.

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:

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.

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:

let bestellwert = 35;

Nun wird der else-Block ausgeführt.

Praktisches Beispiel: Passwort prüfen

Auch Texte lassen sich vergleichen:

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:

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

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

Richtig ist:

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

Text ohne Anführungszeichen

Textwerte müssen in Anführungszeichen stehen:

let land = "Deutschland";

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

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

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:

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.

Lösung anzeigen 
let regnetEs = true;

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

Ü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.

Lösung anzeigen 
let alter = 14;

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

Übung 3: Lieblingszahl

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

Lösung anzeigen 
let lieblingszahl = 7;

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

Zusammenfassung

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

Entscheidungen und Wiederholungen

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:

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

Dafür verwendest du else if.

Die Grundstruktur

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

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:

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:

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:

Du darfst bestimmte Angebote nutzen.

Ein häufiger Fehler

Schau dir diese vertauschte Reihenfolge an:

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:

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.

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:

Sehr gut!

Mehrere konkrete Werte prüfen

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

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

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:

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:

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:

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:

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 ===.

const farbe = "blau";

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

Ein einzelnes = weist dagegen einen Wert zu:

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:

else if nach else schreiben

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

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:

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:

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:

Gib jeweils einen passenden Text in der Konsole aus.

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

Eine mögliche Lösung

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:

Merke dir

Entscheidungen und Wiederholungen

Schleifen mit `for`

Lernziele

Nach dieser Lektion kannst du:

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:

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:

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

Die Konsole zeigt:

Hallo!
Hallo!
Hallo!
Hallo!
Hallo!

Der Aufbau einer for-Schleife

Eine for-Schleife besteht aus drei Teilen:

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

Ein konkretes Beispiel:

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:

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

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

Sieh dir diese Schleife an:

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:

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:

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

Ausgabe:

1
2
3
4
5
6
7
8
9
10

Achte auf den Vergleichsoperator <=:

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.

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

Ausgabe:

0
1
2
3
4

Die Schleife läuft insgesamt fünfmal:

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 --.

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

Ausgabe:

5
4
3
2
1

Hier gilt:

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

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:

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

Ausgabe:

0
2
4
6
8
10

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

Auch andere Schrittgrößen sind möglich:

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

Ausgabe:

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:

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

Ausgabe:

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

Mit einem Template Literal ist die Schreibweise oft gut lesbar:

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:

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

Ausgabe:

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.

let summe = 0;

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

console.log(summe);

Ausgabe:

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

summe = summe + i;

kann auch kürzer geschrieben werden:

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:

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

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:

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

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

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:

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:

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

Falsch wäre:

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:

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

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

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:

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

console.log("Los!");

Ausgabe:

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.

Lösung ansehen 
for (let i = 1; i <= 20; i++) {
  console.log(i);
}

Übung 2: Gerade Zahlen

Gib alle geraden Zahlen von 2 bis 20 aus.

Lösung ansehen 
for (let i = 2; i <= 20; i += 2) {
  console.log(i);
}

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

Erstelle einen Countdown von 10 bis 0.

Lösung ansehen 
for (let i = 10; i >= 0; i--) {
  console.log(i);
}

Übung 4: Kleine Rechenreihe

Gib die Ergebnisse der 7er-Reihe von 7 mal 1 bis 7 mal 10 aus.

Lösung ansehen 
for (let i = 1; i <= 10; i++) {
  let ergebnis = 7 * i;
  console.log(`7 mal ${i} ist ${ergebnis}`);
}

Zusammenfassung

Eine for-Schleife wiederholt Code, solange ihre Bedingung wahr ist:

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

Dabei gilt:

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.

Entscheidungen und Wiederholungen

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.

let zahl = 1;

while (zahl <= 5) {
  console.log(zahl);
  zahl = zahl + 1;
}

Die Konsole zeigt:

1
2
3
4
5

Der Aufbau einer while-Schleife

Eine while-Schleife besteht aus drei wichtigen Teilen:

while (bedingung) {
  // Code, der wiederholt wird
}

Schau dir dieses Beispiel Schritt für Schritt an:

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:

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.

let zaehler = 1;

while (zaehler <= 4) {
  console.log("Durchlauf Nummer: " + zaehler);
  zaehler++;
}

zaehler++ ist eine Kurzschreibweise für:

zaehler = zaehler + 1;

Die Schleife gibt Folgendes aus:

Durchlauf Nummer: 1
Durchlauf Nummer: 2
Durchlauf Nummer: 3
Durchlauf Nummer: 4

Du kannst einen Zähler auch rückwärts laufen lassen:

let countdown = 5;

while (countdown > 0) {
  console.log(countdown);
  countdown--;
}

console.log("Los!");

countdown-- bedeutet:

countdown = countdown - 1;

Ausgabe:

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:

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:

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.

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.

const farben = ["Rot", "Blau", "Grün"];
let index = 0;

while (index < farben.length) {
  console.log(farben[index]);
  index++;
}

Ausgabe:

Rot
Blau
Grün

Dabei bedeutet:

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:

for (let zahl = 1; zahl <= 5; zahl++) {
  console.log(zahl);
}

Eine while-Schleife passt gut, wenn eine Bedingung entscheidet, wann Schluss ist:

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

let alter = 10;

while (alter < 18) {
  console.log("Noch nicht volljährig.");
}

Diese Schleife endet nie. Die Lösung:

let alter = 10;

while (alter < 18) {
  console.log("Noch nicht volljährig.");
  alter++;
}

Die Bedingung ist von Beginn an falsch

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

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 <=:

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:

2
4
6
8
10

let zahl = 2;

while (zahl <= 10) {
  console.log(zahl);
  zahl = zahl + 2;
}

Übung: Begrüßungen zählen

Schreibe eine Schleife, die dreimal „Hallo!“ in der Konsole ausgibt. Verwende dafür eine Variable namens anzahl.

let anzahl = 1;

while (anzahl <= 3) {
  console.log("Hallo!");
  anzahl++;
}

Das Wichtigste auf einen Blick

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 und Datenstrukturen

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.

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:

begruessen();

Ausgabe in der Konsole:

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:

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:

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:

function zeigeUhrzeit() {
  console.log("Es ist Zeit für eine Pause.");
}

zeigeUhrzeit();

Wichtig sind die Klammern beim Aufruf:

zeigeUhrzeit();

Ohne Klammern schreibst du nur den Namen der Funktion hin:

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:

function klatschen() {
  console.log("👏 Klatsch!");
}

klatschen();
klatschen();
klatschen();

Die Konsole zeigt dann dreimal:

👏 Klatsch!
👏 Klatsch!
👏 Klatsch!

Code wiederverwenden

Der größte Vorteil von Funktionen ist die Wiederverwendung. Ohne Funktion müsstest du denselben Code kopieren:

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:

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:

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.

function starteProgramm() {
  console.log("Programm wird gestartet.");
  console.log("Daten werden geladen.");
  console.log("Programm ist bereit.");
}

starteProgramm();

Ausgabe:

Programm wird gestartet.
Daten werden geladen.
Programm ist bereit.

Du kannst in Funktionen auch Variablen verwenden:

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.

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:

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:

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

function spielen() {
  console.log("Das Spiel läuft.");
}

spielen;

Hier erscheint keine Ausgabe, weil spielen nicht aufgerufen wurde.

Richtig:

spielen();

Den Funktionsnamen unterschiedlich schreiben

JavaScript unterscheidet Groß- und Kleinschreibung. zeigeText und ZeigeText sind zwei unterschiedliche Namen.

function zeigeText() {
  console.log("Ein Text");
}

ZeigeText();

Das führt zu einem Fehler, weil ZeigeText nicht definiert wurde.

Richtig:

zeigeText();

Geschweifte Klammern vergessen

Der Funktionskörper braucht öffnende und schließende geschweifte Klammern:

function testeFunktion() {
  console.log("Test");
}

Nicht so:

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:

function zeigeInfo() {
  console.log("Information");
}

Ein Semikolon nach console.log(...) ist dagegen üblich:

console.log("Information");

Beispiel: Ein einfaches Mini-Programm

Dieses Beispiel bündelt verschiedene Aufgaben in Funktionen:

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:

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:

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

Im nächsten Schritt lernst du, wie Funktionen Parameter entgegennehmen und mit return Ergebnisse zurückgeben können.

Funktionen und Datenstrukturen

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.

function begrüße(name) {
  console.log("Hallo, " + name + "!");
}

begrüße("Mira");
begrüße("Jonas");

Die Ausgabe lautet:

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:

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:

function begrüße(name) {
  console.log("Hallo, " + name + "!");
}

Diese Funktion kann nun für beliebig viele Namen verwendet werden.

begrüße("Aylin");
begrüße("Ben");
begrüße("Chris");

Mehrere Parameter verwenden

Eine Funktion kann auch mehrere Parameter haben. Sie werden durch Kommas getrennt.

function addiere(zahl1, zahl2) {
  console.log(zahl1 + zahl2);
}

addiere(4, 7);

Die Ausgabe ist:

11

JavaScript ordnet die Argumente der Reihenfolge nach zu:

addiere(4, 7);

Ein weiteres Beispiel berechnet den Preis mehrerer gleicher Artikel:

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:

function berechneGesamtpreis(preis, anzahl) {
  console.log(preis * anzahl);
}

Weniger verständlich:

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.

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:

Du bist volljährig.
Du bist noch nicht volljährig.

Der Parameter alter existiert nur innerhalb der Funktion prüfeAlter.

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.

function begrüße(name = "Gast") {
  console.log("Hallo, " + name + "!");
}

begrüße("Lea");
begrüße();

Die Ausgabe lautet:

Hallo, Lea!
Hallo, Gast!

Wird kein Argument angegeben, verwendet JavaScript den Standardwert "Gast".

Auch mehrere Parameter können Standardwerte besitzen:

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.

function addiere(zahl1, zahl2) {
  return zahl1 + zahl2;
}

let ergebnis = addiere(4, 7);

console.log(ergebnis);

Die Ausgabe ist:

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:

console.log(addiere(10, 5));

Oder ihr Ergebnis für weitere Berechnungen nutzen:

let summe = addiere(8, 2);
let verdoppelteSumme = summe * 2;

console.log(verdoppelteSumme);

Die Ausgabe lautet:

20

Der Unterschied zwischen console.log() und return

Diese beiden Anweisungen werden leicht verwechselt, haben aber unterschiedliche Aufgaben.

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.

let ergebnis = zeigeSumme(2, 3);

console.log(ergebnis);

Die Konsole zeigt:

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:

function berechneSumme(zahl1, zahl2) {
  return zahl1 + zahl2;
}

let ergebnis = berechneSumme(2, 3);

console.log(ergebnis);

Die Ausgabe:

5

Merke:

return beendet die Funktion

Sobald JavaScript auf return trifft, wird die Funktion sofort beendet. Code darunter wird nicht mehr ausgeführt.

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:

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:

4
Division durch null ist nicht möglich.

Rückgabewerte mit Bedingungen

Funktionen können abhängig von einer Bedingung unterschiedliche Werte zurückgeben.

function istVolljährig(alter) {
  if (alter >= 18) {
    return true;
  } else {
    return false;
  }
}

console.log(istVolljährig(21));
console.log(istVolljährig(16));

Die Ausgabe:

true
false

Da der Vergleich alter >= 18 selbst bereits true oder false liefert, kann die Funktion noch kürzer geschrieben werden:

function istVolljährig(alter) {
  return alter >= 18;
}

Du kannst diese Funktion direkt in einer Bedingung einsetzen:

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.

function berechneRabattPreis(preis, rabattProzent) {
  let rabatt = preis * rabattProzent / 100;
  return preis - rabatt;
}

let neuerPreis = berechneRabattPreis(80, 25);

console.log(neuerPreis);

Die Ausgabe lautet:

60

Die Funktion erhält zwei Werte:

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.

function stelleVor(name, alter) {
  console.log(name + " ist " + alter + " Jahre alt.");
}

stelleVor("Mara", 14);

Das ergibt:

Mara ist 14 Jahre alt.

Wenn du die Werte vertauschst, entsteht ein unpassender Satz:

stelleVor(14, "Mara");

Ausgabe:

14 ist Mara Jahre alt.

return mit console.log() verwechseln

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:

function quadriere(zahl) {
  return zahl * zahl;
}

let fläche = quadriere(6);

console.log(fläche);

Code nach return erwarten

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:

let temperatur = celsiusZuFahrenheit(20);

console.log(temperatur);

Die Ausgabe soll sein:

68
Lösung anzeigen 
function celsiusZuFahrenheit(celsius) {
  return celsius * 1.8 + 32;
}

let temperatur = celsiusZuFahrenheit(20);

console.log(temperatur);

Übung: Größere Zahl finden

Schreibe eine Funktion größereZahl, die zwei Zahlen entgegennimmt und die größere Zahl zurückgibt.

Beispiel:

console.log(größereZahl(12, 7));

Erwartete Ausgabe:

12

Eine mögliche Lösung:

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

Im nächsten Abschnitt nutzt du Arrays, um mehrere Werte gemeinsam in einer geordneten Liste zu speichern.

Funktionen und Datenstrukturen

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:

const farbe1 = "Rot";
const farbe2 = "Blau";
const farbe3 = "Grün";

kannst du alle Farben in einem Array zusammenfassen:

const farben = ["Rot", "Blau", "Grün"];

Ein Array speichert seine Werte zwischen eckigen Klammern []. Die einzelnen Einträge werden durch Kommas getrennt.

const tiere = ["Hund", "Katze", "Kaninchen"];
const punkte = [12, 8, 20, 15];
const antworten = [true, false, true];

In einem Array können unterschiedliche Datentypen stehen:

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.

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:

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.

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.

const einkaufsliste = ["Brot", "Milch", "Äpfel"];

console.log(einkaufsliste.length); // 3

.length ist keine Funktion. Deshalb stehen hier keine runden Klammern dahinter.

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.

const tage = ["Montag", "Dienstag", "Mittwoch"];

tage[1] = "Dienstagabend";

console.log(tage);

Ausgabe:

["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.

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.

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.

const musikrichtungen = ["Rock", "Pop"];

musikrichtungen.push("Jazz");

console.log(musikrichtungen);

Ausgabe:

["Rock", "Pop", "Jazz"]

Du kannst auch mehrere Werte gleichzeitig hinzufügen:

const zahlen = [1, 2, 3];

zahlen.push(4, 5);

console.log(zahlen);

Ausgabe:

[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.

const warteschlange = ["Mia", "Noah", "Emma"];

warteschlange.pop();

console.log(warteschlange);

Ausgabe:

["Mia", "Noah"]

Außerdem gibt .pop() den entfernten Wert zurück. Das ist nützlich, wenn du ihn noch weiterverwenden möchtest.

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

const plaetze = ["Mitte", "Hinten"];

plaetze.unshift("Vorne");

console.log(plaetze);

Ausgabe:

["Vorne", "Mitte", "Hinten"]

Mit shift() den ersten Wert entfernen

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.

const obst = ["Apfel", "Banane", "Birne"];

for (let index = 0; index < obst.length; index++) {
  console.log(obst[index]);
}

Ausgabe:

Apfel
Banane
Birne

Schauen wir uns die Schleife genauer an:

for (let index = 0; index < obst.length; index++) {
  console.log(obst[index]);
}

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.

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:

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:

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:

Sehr gutes Ergebnis: 15

Mehrdimensionale Arrays kurz kennengelernt

Ein Array kann selbst weitere Arrays enthalten. Das nennt man ein mehrdimensionales Array.

const sitzplan = [
  ["Anna", "Ben"],
  ["Clara", "David"]
];

Der erste Wert enthält ein Array:

console.log(sitzplan[0]);

Ausgabe:

["Anna", "Ben"]

Um auf einen einzelnen Namen zuzugreifen, verwendest du zwei Indizes:

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

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

const namen = ["Lea", "Tom"];

console.log(namen.length());

Das führt zu einem Fehler. Richtig ist:

console.log(namen.length);

Einen nicht vorhandenen Index verwenden

const monate = ["Januar", "Februar"];

console.log(monate[2]); // undefined

Das Array hat nur die Indizes 0 und 1.

Bei Schleifen <= verwenden

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 <:

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:

const aufgaben = ["Hausaufgaben machen", "Zimmer aufräumen", "Einkaufen"];

aufgaben.push("E-Mail schreiben");
aufgaben.shift();

console.log(aufgaben);

Ausgabe:

["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:

const namen = ["Aylin", "Jonas", "Mara"];

for (let index = 0; index < namen.length; index++) {
  console.log("Hallo, " + namen[index] + "!");
}

Ausgabe:

Hallo, Aylin!
Hallo, Jonas!
Hallo, Mara!

Das Wichtigste auf einen Blick

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.

Funktionen und Datenstrukturen

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.

const person = {
  name: "Mira",
  alter: 24,
  email: "mira@example.de"
};

Das Objekt person beschreibt eine Person mit drei Eigenschaften.

Eigenschaften auslesen

Um auf eine Eigenschaft zuzugreifen, verwendest du meist die Punktnotation:

const person = {
  name: "Mira",
  alter: 24,
  email: "mira@example.de"
};

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

Die Konsole gibt aus:

Mira
24

Du kannst Eigenschaften auch direkt in Texten verwenden:

console.log("Hallo, " + person.name + "!");

Ausgabe:

Hallo, Mira!

Mit einem Template-String wirkt derselbe Code oft übersichtlicher:

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:

const spieler = {
  name: "Noah",
  punkte: 10
};

spieler.punkte = 15;

console.log(spieler.punkte);

Ausgabe:

15

Auch neue Eigenschaften lassen sich nachträglich hinzufügen:

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:

const buch = {
  titel: "JavaScript leicht gemacht",
  seiten: 180
};

buch.seiten = 200;

Das wäre dagegen ein Fehler:

const buch = {
  titel: "JavaScript leicht gemacht"
};

buch = {
  titel: "Ein anderes Buch"
};

Eigenschaften mit eckigen Klammern auswählen

Neben der Punktnotation gibt es die Klammernotation:

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:

const profil = {
  name: "Lea",
  hobby: "Zeichnen"
};

const eigenschaft = "hobby";

console.log(profil[eigenschaft]);

Ausgabe:

Zeichnen

Mit Punktnotation würde JavaScript nach einer Eigenschaft namens eigenschaft suchen:

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.

const tier = {
  art: "Katze",
  name: "Luna"
};

console.log(tier.alter);

Ausgabe:

undefined

Du kannst das in einer Bedingung prüfen:

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.

const farben = ["Rot", "Grün", "Blau"];

console.log(farben[0]);

Ein Objekt speichert Werte unter aussagekräftigen Namen.

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:

const lieblingsObst = ["Apfel", "Banane", "Erdbeere"];

Verwende Objekte, wenn verschiedene Informationen eine Sache beschreiben:

const lieblingsFilm = {
  titel: "Die Reise zum Mond",
  jahr: 2024,
  gesehen: true
};

Objekte mit verschiedenen Datentypen

Die Werte eines Objekts können unterschiedliche Datentypen haben:

const kurs = {
  titel: "JavaScript für Anfänger",
  lektionen: 20,
  aktiv: true,
  beschreibung: null
};

In diesem Objekt ist:

Auch Arrays und andere Objekte können als Werte gespeichert werden.

const rezept = {
  name: "Obstsalat",
  portionen: 2,
  zutaten: ["Apfel", "Banane", "Trauben"]
};

console.log(rezept.zutaten[1]);

Ausgabe:

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.

const benutzer = {
  name: "Sofia",
  kontakt: {
    email: "sofia@example.de",
    stadt: "Köln"
  }
};

Um die Stadt auszugeben, verbindest du die Zugriffe:

console.log(benutzer.kontakt.stadt);

Ausgabe:

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.

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:

console.log(produkte[0].name);
console.log(produkte[2].preis);

Ausgabe:

Notizbuch
39.99

Mit einer for-Schleife kannst du alle Produkte ausgeben:

for (let i = 0; i < produkte.length; i++) {
  console.log(`${produkte[i].name}: ${produkte[i].preis} Euro`);
}

Ausgabe:

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.

const hund = {
  name: "Bello",
  begruessen: function () {
    console.log("Wuff! Ich heiße " + this.name + ".");
  }
};

hund.begruessen();

Ausgabe:

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:

Häufige Fehler

Eigenschaftsnamen vergessen

Zwischen Eigenschaft und Wert muss ein Doppelpunkt stehen:

const person = {
  name: "Mira",
  alter: 24
};

Das wäre falsch:

const person = {
  name = "Mira"
};

Komma zwischen Eigenschaften vergessen

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:

const konto = {
  inhaber: "Emil",
  kontostand: 250
};

const auswahl = "kontostand";

console.log(konto[auswahl]);

Nicht:

console.log(konto.auswahl);

Auf ein nicht vorhandenes Objekt zugreifen

Dieser Code führt zu einem Fehler, weil adresse nicht existiert:

const person = {
  name: "Mira"
};

console.log(person.adresse.stadt);

Prüfe zunächst, ob die Eigenschaft vorhanden ist:

if (person.adresse !== undefined) {
  console.log(person.adresse.stadt);
}

Übung: Ein Filmobjekt erstellen

Erstelle ein Objekt namens film. Es soll diese Eigenschaften enthalten:

Gib anschließend einen Satz in dieser Form aus:

Der Film ... erschien im Jahr ....

Ändere danach den Wert von gesehen auf true und ergänze eine Eigenschaft bewertung.

Mögliche Lösung

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

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.

Webseiten interaktiv machen

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:

<body>
  <h1>Willkommen</h1>
  <p>JavaScript macht Webseiten interaktiv.</p>
</body>

entsteht gedanklich eine Baumstruktur:

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.

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:

Du kannst beispielsweise den Seitentitel auslesen:

console.log(document.title);

Der Titel stammt aus dem <title>-Element im <head>:

<head>
  <title>Meine erste Webseite</title>
</head>

Ändere nun den Titel per JavaScript:

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:

<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:

<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.

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:

<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:

<button class="kaufen-button">Jetzt kaufen</button>

JavaScript könnte später:

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:

<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:

Warum die Baumstruktur wichtig ist

Die Baumstruktur bestimmt, welche Elemente zu welchem Bereich gehören. Das ist besonders bei größeren Webseiten hilfreich.

<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:

<!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:

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:

Das Attribut defer im <script>-Element ist hier wichtig:

<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:

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

Übungen

1. Das Dokument erkunden

Öffne eine beliebige Webseite und gib in der Konsole diese Befehle ein:

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:

document.title = "Mein DOM-Training";

Aufgabe: Beobachte, wo sich der Titel im Browser ändert.

3. Die Baumstruktur erkennen

Betrachte diesen HTML-Code:

<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.

Webseiten interaktiv machen

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:

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:

<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.

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:

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.

<p>Das ist ein Absatz.</p>

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:

<p>Erster Absatz</p>
<p>Zweiter Absatz</p>

const absatz = document.querySelector("p");

console.log(absatz);

Das Ergebnis ist:

<p>Erster Absatz</p>

Auswahl über eine CSS-Klasse

Klassen beginnen in CSS und JavaScript mit einem Punkt ..

<p class="wichtig">Diese Information ist wichtig.</p>

const wichtigeInfo = document.querySelector(".wichtig");

console.log(wichtigeInfo);

Hier bedeutet .wichtig: „Suche ein Element mit der Klasse wichtig.“

Ein Element darf mehrere Klassen besitzen:

<p class="hinweis wichtig">Bitte beachte die Regeln.</p>

Du kannst es weiterhin über eine einzelne Klasse auswählen:

const text = document.querySelector(".wichtig");

Oder du verlangst, dass beide Klassen vorhanden sind:

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 #.

<button id="speichern">Speichern</button>

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.

<input id="benutzername" type="text">

const eingabeFeld = document.querySelector("#benutzername");

Auswahl genauer beschreiben

CSS-Selektoren können genauer festlegen, welches Element gesucht wird.

Element mit einer bestimmten Klasse

<p class="meldung">Eine Nachricht</p>
<div class="meldung">Ein Bereich</div>

const absatzMeldung = document.querySelector("p.meldung");

Dieser Selektor sucht nur nach einem <p>-Element mit der Klasse meldung.

Ein Element innerhalb eines anderen Elements

<section class="profil">
  <h2>Mein Profil</h2>
  <p>Angemeldet als Lea.</p>
</section>

const profilTitel = document.querySelector(".profil h2");

Das Leerzeichen bedeutet: „Suche ein <h2> innerhalb eines Elements mit der Klasse profil.“

Ein bestimmtes Eingabefeld

<input type="email" id="email">
<input type="password" id="passwort">

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.

<h1 id="titel">Hallo!</h1>

const titel = document.querySelector("#titel");

console.log(titel.textContent);

Die Konsole zeigt:

Hallo!

textContent enthält den Text eines Elements. Du kannst ihn auch ändern:

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.

<button class="farbe-button">Farbe ändern</button>

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.

const nichtVorhanden = document.querySelector(".gibt-es-nicht");

console.log(nichtVorhanden);

Ausgabe:

null

Das bedeutet: JavaScript hat kein passendes Element gefunden.

Wenn du anschließend versuchst, dieses nicht vorhandene Element zu verändern, entsteht ein Fehler:

const nichtVorhanden = document.querySelector(".gibt-es-nicht");

nichtVorhanden.textContent = "Hallo";

Typischerweise erscheint dann in der Konsole eine Fehlermeldung wie:

Cannot set properties of null

Prüfe deshalb bei Fehlern immer:

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.

<!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:

const titel = document.querySelector("#titel");
titel.textContent = "JavaScript funktioniert!";

Alternativ kannst du das Attribut defer im <head> verwenden:

<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.

<li class="aufgabe">HTML lernen</li>
<li class="aufgabe">JavaScript lernen</li>
<li class="aufgabe">Projekt bauen</li>

const ersteAufgabe = document.querySelector(".aufgabe");

console.log(ersteAufgabe.textContent);

Ausgabe:

HTML lernen

Wenn du alle passenden Elemente benötigst, gibt es document.querySelectorAll():

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:

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.

<!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>

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:

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.

Webseiten interaktiv machen

Inhalte und CSS-Klassen ändern

Lernziele

Auf dieser Seite lernst du, wie du mit JavaScript sichtbare Inhalte einer Webseite veränderst. Danach kannst du:

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.

<p class="nachricht">Willkommen!</p>
<button class="aendern-button">Text ändern</button>

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.

nachricht.textContent = "<strong>Hallo</strong>";

Im Browser erscheint dann tatsächlich:

<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.

<p class="info"></p>

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:

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:

<p class="status">Die Lampe ist aus.</p>
<button class="licht-button">Licht einschalten</button>

Und dieses 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.

const status = document.querySelector(".status");

status.classList.add("an");

Danach hat der Absatz beide Klassen:

<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:

status.classList.add("an", "hervorgehoben");

Eine Klasse entfernen: classList.remove()

Mit classList.remove() entfernst du eine Klasse wieder.

status.classList.remove("an");

Das Element besitzt anschließend nur noch die Klasse status.

Auch hier sind mehrere Klassen möglich:

status.classList.remove("an", "hervorgehoben");

Eine Klasse umschalten: classList.toggle()

Besonders praktisch ist classList.toggle(). Die Methode prüft automatisch:

status.classList.toggle("an");

Damit eignet sich toggle() hervorragend für Schalter, Menüs, Akkordeons oder einen Dark Mode.

Beispiel: Dunklen Modus umschalten

<button class="modus-button">Dunklen Modus umschalten</button>

<main class="seite">
  <h2>Meine Webseite</h2>
  <p>Dieser Bereich kann sein Aussehen ändern.</p>
</main>

.seite {
  padding: 24px;
  background-color: white;
  color: #222222;
}

.dunkel {
  background-color: #222222;
  color: white;
}

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.

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.

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

<button class="hinweis-button">Hinweis anzeigen</button>

<p class="hinweis versteckt">
  JavaScript wird direkt im Browser ausgeführt.
</p>

CSS

.hinweis {
  margin-top: 16px;
  padding: 12px;
  border-left: 4px solid #2c7a7b;
  background-color: #e6fffa;
}

.versteckt {
  display: none;
}

JavaScript

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.

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:

box.classList.add("erfolg");

oder:

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

<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

.rueckmeldung {
  margin-top: 16px;
  padding: 12px;
  font-weight: bold;
}

.richtig {
  background-color: #d9f7df;
  color: #176b2c;
}

.falsch {
  background-color: #ffe0e0;
  color: #9b1c1c;
}

JavaScript

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

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:

const box = document.querySelector(".box");

Bei classList.add() schreibst du den Klassennamen ohne Punkt:

box.classList.add("aktiv");

Das hier wäre falsch:

box.classList.add(".aktiv");

JavaScript findet das Element nicht

Wenn dieses Ergebnis erscheint:

Cannot read properties of null

wurde das Element wahrscheinlich nicht gefunden. Prüfe:

Eine einfache Lösung ist, das <script>-Element am Ende des <body> einzubinden:

<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:

rueckmeldung.classList.remove("richtig", "falsch");

Danach fügst du die gewünschte Klasse hinzu:

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:

Mögliche Lösung

<button class="details-button">Details anzeigen</button>

<p class="details versteckt">
  Diese zusätzlichen Informationen sind zunächst verborgen.
</p>

.versteckt {
  display: none;
}

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:

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.

Webseiten interaktiv machen

Ereignisse mit `addEventListener()`

Lernziele

Nach dieser Lektion kannst du:

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:

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:

element.addEventListener("ereignis", funktion);

Dabei bedeutet:

Ein einfaches Beispiel:

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:

<button id="hallo-button">Begrüßung anzeigen</button>
<p id="ausgabe">Noch kein Klick.</p>

Nun wählst du beide Elemente mit JavaScript aus:

const halloButton = document.querySelector("#hallo-button");
const ausgabe = document.querySelector("#ausgabe");

Danach fügst du den Event Listener hinzu:

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:

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:

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.

halloButton.addEventListener("click", function () {
  ausgabe.textContent = "Hallo! Schön, dass du da bist.";
});

Oft wird dafür die kürzere Pfeilfunktion verwendet:

halloButton.addEventListener("click", () => {
  ausgabe.textContent = "Hallo! Schön, dass du da bist.";
});

Für kurze Reaktionen ist diese Schreibweise sehr praktisch.

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

<button id="zaehl-button">Klick mich</button>
<p>Anzahl der Klicks: <span id="anzahl">0</span></p>

JavaScript

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:

anzahlKlicks++;

Die Funktion könnte dann so aussehen:

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

<label for="name">Wie heißt du?</label>
<input id="name" type="text" placeholder="Dein Name">
<p id="begrüßung"></p>

JavaScript

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:

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.

button.addEventListener("click", (event) => {
  console.log(event);
});

Der Name event ist frei wählbar. Häufig werden auch e oder ereignis verwendet:

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.

<button class="farbe-button">Blau</button>
<button class="farbe-button">Grün</button>
<button class="farbe-button">Rot</button>

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:

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

<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

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

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

<button id="design-button">Design wechseln</button>

<p id="text">Dieser Text kann hervorgehoben werden.</p>

CSS

.hervorgehoben {
  background-color: gold;
  color: black;
  font-weight: bold;
  padding: 8px;
}

JavaScript

const designButton = document.querySelector("#design-button");
const text = document.querySelector("#text");

designButton.addEventListener("click", () => {
  text.classList.toggle("hervorgehoben");
});

classList.toggle() funktioniert in zwei Richtungen:

Jeder Klick schaltet das Aussehen also um.

Mehrere Ereignisse für ein Element

Ein Element kann auf mehrere Ereignisse reagieren.

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:

Du kannst auch mehrere Listener für dasselbe Ereignis registrieren:

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

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:

Eine gute Lösung ist, das Script mit defer einzubinden:

<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:

button.addEventListener(click, starte);

Richtig:

button.addEventListener("click", starte);

Der Ereignisname ist ein String und braucht deshalb Anführungszeichen.

Die Funktion wird zu früh ausgeführt

Falsch:

button.addEventListener("click", starte());

Richtig:

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:

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

<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

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

<button id="info-button">Information anzeigen</button>

<p id="info-text">
  JavaScript kann auf Benutzeraktionen reagieren.
</p>

Vorgabe: 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

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:

element.addEventListener("click", () => {
  // Code für den Klick
});

Wichtige Punkte sind:

Damit kennst du die zentrale Verbindung zwischen Benutzeraktionen und JavaScript-Code — eine wichtige Grundlage für jede interaktive Webseite.