JavaScript

JavaScript macht Webseiten interaktiv, etwa mit Menüs, die sich öffnen, Formularen, die Eingaben prüfen, und Inhalten, die sich ohne Neuladen aktualisieren. Über Node.js läuft JavaScript auch auf Servern und treibt viele mobile und Desktop-Apps an. Jeder moderne Browser führt JavaScript direkt aus.

JavaScript und Java sind zwei verschiedene Programmiersprachen, die nur einen Teil des Namens teilen. JavaScript läuft vor allem im Browser und ist dynamisch typisiert, Java ist statisch typisiert und wird in Bytecode für die Java Virtual Machine übersetzt. Der ähnliche Name geht auf eine Marketingentscheidung in den 1990er Jahren zurück.

Das DOM, das Document Object Model, ist der Objektbaum, den ein Browser aus einer HTML-Seite aufbaut, damit JavaScript die Seite lesen und verändern kann. Über das DOM findet JavaScript Elemente, ändert Text, fügt Klassen hinzu und erzeugt neue Elemente. Jede sichtbare Änderung, die ein Skript an einer Seite vornimmt, läuft über das DOM.

Sie binden JavaScript mit einem script-Tag ein, das den Code direkt enthält oder über das Attribut src auf eine eigene JavaScript-Datei verweist. Steht das script-Tag am Ende des body oder trägt es das Attribut defer, lädt zuerst das HTML. Separate JavaScript-Dateien lassen sich leichter zwischenspeichern und pflegen.

In JavaScript gelten let und const nur innerhalb ihres Blocks, während var innerhalb der Funktion gilt und erneut deklariert werden kann. Eine const-Variable lässt sich nicht neu zuweisen, ein darin gespeichertes Objekt kann sich innen aber trotzdem ändern. Modernes JavaScript nutzt standardmäßig const, let für veränderliche Werte und verzichtet auf var.

Events in JavaScript sind Signale, die der Browser sendet, wenn etwas passiert, etwa ein Klick, ein Tastendruck, das Absenden eines Formulars oder das fertige Laden einer Seite. Ein Skript reagiert darauf, indem es mit addEventListener eine Listener-Funktion anhängt. Über Event-Listener reagiert eine Seite auf den Nutzer.

Event Delegation bedeutet, einen einzigen Event-Listener an ein Elternelement zu hängen statt je einen an jedes Kindelement. Der Listener prüft das Ziel des Events, um zu erkennen, welches Kind angeklickt wurde. Das spart Speicher und funktioniert auch für Elemente, die erst später zur Seite hinzukommen.

Mit der Funktion fetch fragen Sie Daten bei einer API an und lesen den Inhalt dann mit der Methode json der Antwort. Da fetch ein Promise zurückgibt, wartet der Code meist mit async und await auf das Ergebnis. Wer den Antwortstatus prüft und Fehler abfängt, hält die Seite auch bei Netzwerkproblemen funktionsfähig.

Ein Promise ist ein Objekt, das einen Wert darstellt, der erst später bereitsteht, etwa das Ergebnis einer Netzwerkanfrage. Ein Promise ist entweder ausstehend (pending), erfüllt (fulfilled) oder abgelehnt (rejected). Der Code reagiert auf das Ergebnis mit then und catch oder mit async und await.

Mit async und await wartet JavaScript-Code auf ein Promise und liest sich dabei wie gewöhnlicher Schritt-für-Schritt-Code. Eine mit async markierte Funktion gibt immer ein Promise zurück, und await hält diese Funktion an, bis das Promise erledigt ist. Fehler in async-Funktionen behandelt man mit einem normalen try-catch-Block.

ES6, auch ECMAScript 2015 genannt, ist das große Update des JavaScript-Standards aus dem Jahr 2015. Es brachte let und const, Arrow Functions, Klassen, Template-Literale, Destrukturierung, Module und Promises. Jeder moderne Browser unterstützt ES6, und seitdem kommen jedes Jahr neue Sprachfunktionen hinzu.

Arrow Functions sind eine kürzere Schreibweise für Funktionen mit der Syntax =>. Eine Arrow Function hat kein eigenes this, sodass this den Wert aus dem umgebenden Code behält. Arrow Functions sind für kurze Callbacks üblich, etwa bei map und filter.

JSON, die JavaScript Object Notation, ist ein Textformat, um Daten als Schlüssel und Werte zu speichern und auszutauschen. JavaScript wandelt ein Objekt mit JSON.stringify in JSON-Text um und mit JSON.parse wieder zurück in ein Objekt. Die meisten Web-APIs senden und empfangen Daten als JSON.

JavaScript ist für Anfänger leicht zu beginnen, denn ein Browser und ein Texteditor genügen. Die schwierigeren Themen kommen später, etwa asynchroner Code, Gültigkeitsbereiche und die vielen Werkzeuge rund um die Sprache. Die meisten Lernenden bauen nach wenigen Wochen regelmäßiger Übung nützliche interaktive Seiten.

Ja, wer zuerst reines JavaScript lernt, versteht React und Vue deutlich leichter. Beide Frameworks bauen auf Kernfunktionen von JavaScript wie Funktionen, Arrays, Objekten, Modulen und Promises auf. Wer die Grundlagen kennt, kann Framework-Code zudem gezielt debuggen, statt zu raten.

TypeScript ist JavaScript mit zusätzlichen statischen Typen, entwickelt von Microsoft und in reines JavaScript übersetzt. Dank der Typen erkennt der Editor viele Fehler, bevor der Code läuft. TypeScript ist in großen Projekten beliebt, in denen viele Entwickler denselben Code teilen.

JavaScript-Seiten laden schneller, wenn Sie weniger JavaScript ausliefern, Skripte mit defer oder async laden und große Bundles aufteilen, damit jede Seite nur lädt, was sie braucht. Minifizieren und Komprimieren verringert die Downloadgröße. Wer schwere Arbeit vom Hauptthread fernhält, hält die Seite reaktionsschnell bei Klicks und Eingaben.

In JavaScript vergleicht === sowohl Wert als auch Typ, während == die Typen vor dem Vergleich umwandelt. So ist 0 == "0" wahr, 0 === "0" aber falsch. Die Verwendung von === vermeidet überraschende Ergebnisse und ist die übliche Regel in modernem JavaScript.

JavaScript-Module sind separate Dateien, die Funktionen oder Werte exportieren und aus anderen Dateien importieren, was sie brauchen. Module halten Code geordnet, vermeiden globale Variablen und machen große Projekte leichter wartbar. Browser laden ein Modul über ein script-Tag, dessen Attribut type auf module gesetzt ist.

Sie debuggen JavaScript mit den Entwicklerwerkzeugen, die sich mit F12 oder per Rechtsklick auf die Seite und Untersuchen öffnen. Die Konsole zeigt Fehler und ausgegebene Werte, und im Bereich Quellen setzen Sie Haltepunkte und gehen den Code Zeile für Zeile durch. Der Netzwerk-Bereich zeigt jede Anfrage der Seite samt Antwort.

Die Event Loop ist der Mechanismus, mit dem das einsträngige JavaScript viele Aufgaben bewältigt, ohne einzufrieren. Langsame Arbeit wie Timer und Netzwerkanfragen wartet im Hintergrund, und die Event Loop führt jeden fertigen Callback aus, sobald der Aufrufstapel leer ist. Lang laufender Code blockiert die Event Loop trotzdem, deshalb machen schwere Schleifen eine Seite träge.

Ja, JavaScript läuft über Laufzeitumgebungen wie Node.js, Deno und Bun auf dem Server. Serverseitiges JavaScript kann APIs bauen, Dateien lesen und sich mit Datenbanken verbinden. Eine Sprache für Browser und Server erlaubt einem Team, Code und Wissen zu teilen.

Fügen Sie niemals nicht vertrauenswürdigen Text mit innerHTML in die Seite ein, prüfen Sie alle Eingaben noch einmal auf dem Server und halten Sie Geheimnisse aus dem Frontend-Code heraus. Alles, was an den Browser geht, können Nutzer lesen, auch API-Schlüssel. Eine Content Security Policy und aktuelle Abhängigkeiten wehren viele häufige Angriffe ab.

localStorage speichert Daten nur im Browser, während Cookies bei jeder Anfrage an den Server mitgeschickt werden. localStorage fasst mehr Daten und eignet sich für Einstellungen wie ein gewähltes Theme. Cookies mit den Merkmalen HttpOnly und Secure sind der sicherere Ort für Anmeldesitzungen, weil Skripte sie nicht lesen können.

Wartbaren JavaScript-Code schreiben Sie mit kleinen Funktionen, klaren Namen, Modulen, einheitlicher Formatierung und einem Linter wie ESLint. Vermeiden Sie globale Variablen und trennen Sie den Code, der das DOM verändert, von dem Code, der Daten verarbeitet. Automatisierte Tests machen spätere Änderungen sicher.