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

Was ist JavaScript?
JavaScript macht Webseiten lebendig
JavaScript ist eine Programmiersprache, mit der Webseiten auf Eingaben reagieren und Inhalte verändern können. Sie läuft meist direkt im Browser der Besucherin oder des Besuchers.
HTML beschreibt die Struktur einer Seite, CSS gestaltet ihr Aussehen und JavaScript sorgt für Verhalten und Interaktion.
Stell dir eine Webseite wie ein kleines Geschäft vor:
HTML ist das Gebäude mit Türen, Regalen und Schildern.
CSS bestimmt Farben, Größen und das Erscheinungsbild.
JavaScript reagiert darauf, wenn jemand eine Tür öffnet, einen Knopf drückt oder etwas in ein Formular schreibt.
Ohne JavaScript ist eine Webseite oft hauptsächlich statisch: Texte und Bilder werden angezeigt, aber die Seite reagiert kaum auf Aktionen.
Typische Aufgaben von JavaScript
JavaScript kann sehr unterschiedliche Aufgaben übernehmen. Zum Beispiel kann es:
auf Klicks auf Schaltflächen reagieren,
Formulare prüfen, bevor sie abgeschickt werden,
Texte auf einer Seite ändern,
Menüs ein- und ausblenden,
Bildergalerien steuern,
Berechnungen durchführen,
Daten von einem Server nachladen,
kleine Spiele oder interaktive Lernaufgaben umsetzen.
Ein Beispiel: Eine Schaltfläche soll nach einem Klick eine Begrüßung anzeigen.
<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:
Google Chrome
Mozilla Firefox
Microsoft Edge
Safari
Im Browser befindet sich eine sogenannte JavaScript-Engine. Sie liest deinen JavaScript-Code und führt die Anweisungen aus.
Wenn eine Webseite JavaScript enthält, lädt der Browser normalerweise zuerst die Seite. Anschließend führt er den JavaScript-Code aus. Dadurch kann sich die Seite verändern, ohne dass sie vollständig neu geladen werden muss.
Ein Beispiel aus dem Alltag: Du klickst bei einem Online-Shop auf „In den Warenkorb“. Die Zahl am Warenkorb-Symbol erhöht sich sofort. Häufig passiert das mit JavaScript.
JavaScript ist nicht Java
Die Namen sind ähnlich, aber JavaScript und Java sind unterschiedliche Programmiersprachen.
JavaScript
Java
Wird sehr häufig für Webseiten verwendet
Wird unter anderem für große Anwendungen und Android-Apps eingesetzt
Läuft direkt im Browser
Wird meist in einer eigenen Laufzeitumgebung ausgeführt
Einstieg oft direkt mit HTML und einem Browser möglich
Benötigt üblicherweise zusätzliche Werkzeuge
Ist eine eigene Sprache mit eigener Syntax
Ist keine „größere Version“ von JavaScript
Die Namensähnlichkeit ist historisch entstanden. Für dieses Buch gilt: Wenn von JavaScript die Rede ist, ist nicht Java gemeint.
JavaScript außerhalb des Browsers
JavaScript wurde zunächst vor allem für Webseiten entwickelt. Heute kann die Sprache aber auch außerhalb des Browsers eingesetzt werden.
Mit einer Laufzeitumgebung wie Node.js kann JavaScript zum Beispiel auf einem Server laufen. Damit lassen sich unter anderem:
Webserver erstellen,
Daten verarbeiten,
Dateien lesen und schreiben,
Programmierskripte ausführen.
Für den Einstieg konzentrierst du dich jedoch auf JavaScript im Browser. Das ist besonders praktisch, weil du nur einen Texteditor und einen Browser brauchst.
Was JavaScript nicht automatisch kann
JavaScript im Browser arbeitet aus Sicherheitsgründen nicht uneingeschränkt. Ein Skript auf einer Webseite darf zum Beispiel nicht einfach alle Dateien auf deinem Computer lesen oder verändern.
Der Browser schützt Besucherinnen und Besucher davor, dass Webseiten zu viel Zugriff erhalten. Wenn eine Webseite etwa auf Kamera, Mikrofon oder Standort zugreifen möchte, muss sie normalerweise zuerst um Erlaubnis fragen.
Das ist ein wichtiger Grundsatz:
JavaScript kann viel, aber der Browser setzt Sicherheitsgrenzen.
Ein erstes JavaScript-Beispiel
JavaScript besteht aus Anweisungen. Eine sehr einfache Anweisung sieht so aus:
console.log("Hallo, JavaScript!");
Diese Zeile gibt den Text 
Hallo, JavaScript! in der Browser-Konsole aus. Die Konsole ist ein Bereich in den Entwicklerwerkzeugen des Browsers. Sie ist besonders nützlich, um Code zu testen und Fehler zu finden.
Die Bestandteile der Anweisung:
Bestandteil
Bedeutung
console
Ein Bereich des Browsers für Entwicklerausgaben
log
Gibt eine Nachricht aus
"Hallo, JavaScript!"
Der auszugebende Text
;
Beendet die Anweisung; in JavaScript oft optional, aber erlaubt
Die Anführungszeichen zeigen: Hier handelt es sich um einen Text. Solche Textwerte werden später Strings genannt.
Warum JavaScript lernen?
JavaScript ist eine gute erste Programmiersprache für Webseiten, weil du Ergebnisse schnell sehen kannst. Du schreibst eine kleine Änderung, lädst die Seite neu und beobachtest direkt, was passiert.
Beim Lernen von JavaScript übst du außerdem allgemeine Programmierideen:
Informationen speichern,
Entscheidungen treffen,
Aufgaben wiederholen,
Code in Funktionen ordnen,
auf Ereignisse wie Klicks reagieren.
Diese Grundlagen helfen dir später auch bei anderen Programmiersprachen.
Zusammenfassung
JavaScript ist eine Programmiersprache für interaktive Webseiten.
HTML liefert die Struktur, CSS das Aussehen und JavaScript das Verhalten.
JavaScript wird häufig direkt im Browser ausgeführt.
JavaScript und Java sind verschiedene Programmiersprachen.
Mit 
console.log() kannst du erste Ausgaben erzeugen.
Der Browser begrenzt JavaScript aus Sicherheitsgründen.
Kleine Selbstkontrolle
Welche Aufgabe übernimmt JavaScript auf einer Webseite?
Worin unterscheiden sich HTML, CSS und JavaScript?
Ist JavaScript dasselbe wie Java?
Wo wird die Ausgabe von 
console.log() angezeigt?
Musterantworten
JavaScript sorgt unter anderem dafür, dass eine Webseite auf Aktionen reagieren und Inhalte verändern kann.
HTML strukturiert Inhalte, CSS gestaltet sie und JavaScript steuert Verhalten und Interaktion.
Nein. JavaScript und Java sind unterschiedliche Programmiersprachen.
Die Ausgabe erscheint in der Browser-Konsole.

JavaScript im Browser einbinden
JavaScript mit einer HTML-Seite verbinden
Damit JavaScript im Browser ausgeführt wird, muss dein HTML-Dokument wissen, wo sich der JavaScript-Code befindet. Dafür verwendest du das HTML-Element 
<script>.
Es gibt zwei gebräuchliche Möglichkeiten:
JavaScript direkt in die HTML-Datei schreiben
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:
Bessere Übersicht: HTML beschreibt den Inhalt der Seite, JavaScript ihr Verhalten.
Leichtere Pflege: Änderungen am JavaScript betreffen nicht direkt die HTML-Struktur.
Wiederverwendung: Dieselbe JavaScript-Datei kann auf mehreren HTML-Seiten eingebunden werden.
Sauberer Code: Größere Projekte bleiben einfacher verständlich.
Eine übliche Grundstruktur sieht so aus:
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:
Das JavaScript kann frühzeitig geladen werden.
Der Code wird erst ausgeführt, wenn die HTML-Elemente verfügbar sind.
Empfehlung: Verwende für externe JavaScript-Dateien häufig 
<script src="script.js" defer></script> im 
<head>. Alternativ kannst du das Skript ohne 
defer direkt vor 
</body> einfügen.
Ein erstes sichtbares Ergebnis
Bisher hast du JavaScript nur über die Konsole überprüft. JavaScript kann aber auch den Inhalt einer Webseite verändern.
Erstelle diese 
index.html:
<!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:
document steht für die aktuelle HTML-Seite.
querySelector() sucht ein HTML-Element.
#begrüßung meint das Element mit 
id="begrüßung".
textContent verändert den Text eines Elements.
Mit dem DOM und 
querySelector() beschäftigst du dich später ausführlich.
Häufige Fehler beim Einbinden
Der Dateiname stimmt nicht
Wenn deine Datei 
script.js heißt, muss der Eintrag exakt so aussehen:
<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:
Speichere 
index.html.
Speichere 
script.js.
Lade die Webseite im Browser neu.
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
Erstelle eine HTML-Seite mit einer Überschrift.
Binde 
script.js mit 
defer ein.
Gib in 
script.js deinen Namen mit 
console.log() aus.
Ö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
Mit 
<script> bindest du JavaScript in eine HTML-Seite ein.
JavaScript kann direkt im HTML oder in einer eigenen 
.js-Datei stehen.
Eine externe Datei bindest du mit 
src ein.
Mit 
defer wird das Skript erst ausgeführt, nachdem das HTML geladen wurde.
console.log() hilft dir, schnell zu prüfen, ob dein JavaScript funktioniert.
Bei Problemen kontrollierst du Dateinamen, Pfade, gespeicherte Änderungen und die Browser-Konsole.

Die Browser-Konsole verwenden
Was ist die Browser-Konsole?
Die Browser-Konsole ist ein Bereich in den Entwicklerwerkzeugen deines Browsers. Dort kannst du JavaScript direkt ausprobieren, Ausgaben lesen und Fehlermeldungen untersuchen.
Stell sie dir wie ein kleines Testfeld für JavaScript vor:
Du schreibst einen Befehl.
Der Browser führt ihn sofort aus.
Du siehst direkt ein Ergebnis oder eine Fehlermeldung.
Das ist besonders praktisch, wenn du gerade lernst. Du musst nicht für jeden kleinen Versuch eine komplette HTML-Datei anlegen.
Wichtig: Die Konsole ist vor allem ein Werkzeug zum Ausprobieren und Fehlersuchen. JavaScript-Code für deine Webseite schreibst du später normalerweise in eine JavaScript-Datei oder in ein 
<script>-Element.
Entwicklerwerkzeuge öffnen
Die Konsole ist Teil der Entwicklerwerkzeuge. Fast alle modernen Browser besitzen sie, zum Beispiel Chrome, Edge, Firefox und Safari.
Tastenkürzel
Betriebssystem
Entwicklerwerkzeuge öffnen
Windows / Linux
F12 oder 
Strg + 
Umschalt + 
I
macOS
Cmd + 
Option + 
I
Danach erscheint meist ein Bereich rechts neben oder unter der Webseite.
Wähle dort den Tab Console oder Konsole aus.
Je nach Browser kann die Sprache der Entwicklerwerkzeuge Englisch sein. Suche dann nach dem Begriff Console.
Über das Browser-Menü
Falls ein Tastenkürzel nicht funktioniert, kannst du die Entwicklerwerkzeuge auch über das Menü öffnen:
Öffne eine beliebige Webseite.
Klicke mit der rechten Maustaste auf einen freien Bereich der Seite.
Wähle Untersuchen, Element untersuchen oder Inspect.
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:
JavaScript versucht, deinen Code auszuführen.
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:
Umschalt + 
Enter erzeugt eine neue Zeile.
Enter führt den fertigen Code aus.
Das brauchst du später beispielsweise bei Bedingungen oder Funktionen. Am Anfang reichen jedoch einzelne Zeilen völlig aus.
Frühere Befehle wiederverwenden
Mit den Pfeiltasten 
↑ und 
↓ kannst du durch bereits eingegebene Befehle blättern.
Das ist nützlich, wenn du einen Befehl leicht verändern möchtest. Du musst ihn dann nicht vollständig neu schreiben.
Beispiel:
Gib diesen Befehl ein:
5 * 5
Drücke die Pfeiltaste 
↑.
Ändere den Befehl zu:
5 * 10
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:
Art des Fehlers: zum Beispiel 
SyntaxError oder 
ReferenceError
Beschreibung: Was genau ist nicht in Ordnung?
Zeile: Wo ist der Fehler aufgetreten?
Du musst nicht jede Meldung sofort vollständig verstehen. Wichtig ist, dass du erkennst: Hier ist etwas schiefgegangen — und die Konsole liefert Hinweise.
Merke: Eine rote Meldung ist kein Grund zur Sorge. Sie ist eine hilfreiche Rückmeldung des Browsers.
Die Konsole leeren
Nach mehreren Versuchen kann die Konsole schnell unübersichtlich werden. Du kannst ihre bisherigen Inhalte löschen.
Dafür gibt es meist ein Symbol mit einem durchgestrichenen Kreis oder Mülleimer. Häufig funktioniert auch dieses Tastenkürzel:
Betriebssystem
Konsole leeren
Windows / Linux
Strg + 
L
macOS
Cmd + 
K
Das Leeren entfernt nur die sichtbaren Meldungen aus der Konsole. Es verändert nicht deine Webseite und löscht keinen Code aus deinen Dateien.
Konsole und Webseite gehören zusammen
Die Konsole arbeitet immer im Zusammenhang mit der gerade geöffneten Webseite.
Wenn du beispielsweise die Konsole auf einer Suchmaschine öffnest und dort JavaScript eingibst, wird der Code in dieser geöffneten Seite ausgeführt. Öffnest du anschließend deine eigene HTML-Datei, gehört die Konsole zu deiner eigenen Seite.
Das ist später wichtig, wenn du Fehler in deinem Projekt suchst:
Öffne deine HTML-Datei im Browser.
Öffne die Entwicklerwerkzeuge.
Wechsle zur Konsole.
Lade die Seite bei Bedarf neu.
Prüfe, ob Meldungen oder Fehler erscheinen.
Seite neu laden
Wenn du Änderungen an einer HTML- oder JavaScript-Datei gespeichert hast, musst du die Webseite normalerweise neu laden. Nutze dafür:
den Aktualisieren-Button im Browser,
F5 unter Windows/Linux,
Cmd + 
R unter macOS.
Danach zeigt die Konsole die Meldungen der neu geladenen Seite an.
Ein sinnvoller Arbeitsablauf
Beim Lernen kannst du die Konsole auf zwei Arten verwenden:
Zum Ausprobieren
Du möchtest wissen, was ein kurzer JavaScript-Ausdruck macht:
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:
Öffne deine Seite im Browser.
Öffne die Konsole.
Suche nach roten Fehlermeldungen.
Lies die genannte Datei und Zeilennummer.
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:
Welches Ergebnis liefert 
4 + 6?
Was passiert bei 
"Java" + "Script"?
Welche Fehlermeldung erscheint, wenn du einen unbekannten Namen wie 
lieblingsFarbe eingibst?
Wie kannst du einen früheren Befehl erneut anzeigen?
Lösungen
Das Ergebnis ist 
10.
Die beiden Texte werden zu 
"JavaScript" verbunden.
Meist erscheint ein 
ReferenceError, weil der Name noch nicht definiert wurde.
Mit der Pfeiltaste 
↑ kannst du zu vorherigen Eingaben zurückkehren.
Das Wichtigste auf einen Blick
Die Browser-Konsole gehört zu den Entwicklerwerkzeugen.
Du kannst dort JavaScript direkt ausführen und Ergebnisse sofort sehen.
Mit 
F12 oder 
Strg + 
Umschalt + 
I öffnest du meist die Entwicklerwerkzeuge.
Rote Fehlermeldungen helfen dir beim Finden von Fehlern.
Die Konsole ist ein ideales Werkzeug, um kurze Ideen schnell auszuprobieren.
Im nächsten Schritt lernst du, wie du mit 
console.log() gezielt eigene Nachrichten aus deinem JavaScript-Code in der Konsole ausgibst.

Erste Ausgabe mit `console.log()`
Deine erste JavaScript-Ausgabe
Mit 
console.log() kannst du Werte und Texte in der Browser-Konsole anzeigen. Das ist besonders hilfreich, um JavaScript auszuprobieren, Zwischenergebnisse zu prüfen und Fehler zu finden.
Die Ausgabe erscheint nicht auf der Webseite selbst, sondern nur in den Entwicklerwerkzeugen des Browsers.
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:
Gib eine Begrüßung aus.
Gib deinen Vornamen aus.
Lass JavaScript eine Rechnung lösen, zum Beispiel 
12 * 8.
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
Mit 
console.log() gibst du Informationen in der Browser-Konsole aus.
Texte stehen in Anführungszeichen, Zahlen nicht.
JavaScript kann Berechnungen direkt in 
console.log() ausführen.
Mehrere Werte trennst du mit einem Komma.
Achte genau auf Schreibweise, Klammern und Anführungszeichen.
console.log() wird dich während des gesamten JavaScript-Lernens begleiten. Es ist eines der wichtigsten Werkzeuge, um zu verstehen, was dein Programm gerade macht.