Was ist JavaScript?

JavaScript bringt Interaktivität

Ohne JavaScript ist eine Seite statisch. JavaScript kann den DOM verändern, auf Ereignisse reagieren und Daten von Servern nachladen — die Grundlage jeder modernen Web-App.

const button = document.querySelector("#cta");
button.addEventListener("click", () => {
  alert("Danke für dein Interesse!");
});

JavaScript auf dem Server

Mit Node.js läuft JavaScript auch außerhalb des Browsers. Dadurch lassen sich komplette Anwendungen — Frontend und Backend — in einer Sprache schreiben. Frameworks wie React und Next.js bauen darauf auf.

Was JavaScript im Browser leisten kann

JavaScript hat direkten Zugriff auf die Seite und den Nutzer. Es kann den DOM verändern, also Inhalte einfügen, ändern oder entfernen, ohne dass die Seite neu geladen werden muss. Es reagiert auf Ereignisse wie Klicks, Tastatureingaben oder Scrollen. Es validiert Formulare, bevor sie abgeschickt werden, blendet Menüs ein und aus und aktualisiert einen Warenkorb in Echtzeit. Kurz: Alles, was sich auf einer Seite bewegt oder auf Eingaben antwortet, läuft in der Regel über JavaScript.

Asynchroner Code: Daten nachladen

Eine zentrale Stärke ist das Nachladen von Daten, während die Seite bedienbar bleibt. Ruft JavaScript per fetch eine API auf, wartet es nicht blockierend auf die Antwort, sondern arbeitet weiter und reagiert, sobald die Daten da sind. Dieses asynchrone Verhalten wird mit Promises und der Schreibweise async/await gesteuert. Es ist der Grund, warum moderne Web-Apps sich flüssig anfühlen — Inhalte erscheinen nach und nach, statt die ganze Seite anzuhalten.

Ein riesiges Ökosystem

Rund um die Sprache ist eines der größten Software-Ökosysteme überhaupt gewachsen. Der Paketmanager npm bietet Hunderttausende fertiger Bausteine. Frameworks wie React, Vue und Svelte strukturieren große Oberflächen, Next.js ergänzt Server-Rendering und Routing. Weil JavaScript über Node.js auch auf dem Server läuft, lässt sich eine komplette Anwendung — Frontend wie Backend — in einer einzigen Sprache schreiben. Diese Reichweite macht JavaScript zur meistgenutzten Programmiersprache der Welt.

Variablen, Werte und Funktionen

Die Sprache selbst besteht aus wenigen Grundbausteinen. Werte werden in Variablen abgelegt: const für alles, was sich nicht mehr ändern soll, let für veränderliche Werte — das früher übliche var gilt heute als überholt. Als Datentypen gibt es unter anderem Zeichenketten, Zahlen, Wahrheitswerte, Objekte und Arrays. Funktionen bündeln wiederverwendbare Schritte und sind in JavaScript selbst Werte: Man kann sie in Variablen speichern und anderen Funktionen übergeben. Genau darauf beruht das Reagieren auf Ereignisse — beim Klick übergibt man dem Browser eine Funktion, die er später aufruft.

const preise = [19.9, 4.5, 12.0];
let summe = 0;

for (const preis of preise) {
  summe += preis;
}

const formatieren = (wert) => wert.toFixed(2) + " €";
console.log(formatieren(summe)); // "36.40 €"

Fehler finden statt raten

JavaScript meldet Fehler nicht beim Speichern, sondern erst, wenn der Code im Browser läuft. Die Konsole der Entwicklerwerkzeuge ist deshalb das wichtigste Werkzeug: Sie zeigt jede Fehlermeldung samt Datei und Zeilennummer. Mit console.log() lässt sich zwischendurch prüfen, welchen Wert eine Variable gerade hat. Wer tiefer schauen will, setzt im Debugger einen Haltepunkt und hält die Ausführung an genau der interessanten Stelle an. Fehler, mit denen man rechnen muss — etwa ein Server, der nicht antwortet — fängt man dagegen bewusst mit try/catch ab und zeigt dem Nutzer eine verständliche Meldung.

Code in Module aufteilen

Sobald ein Projekt über wenige Zeilen hinauswächst, verteilt man den Code auf mehrere Dateien. Mit export stellt eine Datei bereit, was andere nutzen dürfen, mit import holt man es sich — alles Übrige bleibt privat in der Datei. Diese Module sind heute Standard und funktionieren sowohl im Browser als auch in Node.js. In größeren Projekten schaltet sich zusätzlich ein Bundler dazwischen: Er verfolgt die Import-Kette, fasst die Dateien zusammen und lässt weg, was nirgends verwendet wird. So bleibt der Code für Menschen übersichtlich, während der Browser nur ein kompaktes Paket lädt.