Während HTML die Struktur und den Inhalt einer Webseite definiert und CSS ihre Formatierung und ihr Erscheinungsbild festlegt, macht JavaScript Webseiten interaktiv und ermöglicht umfangreiche Webanwendungen.

Der Oberbegriff „JavaScript“ umfasst im Kontext eines Webbrowsers jedoch mehrere sehr unterschiedliche Bestandteile. Einer davon ist die Kernsprache (ECMAScript), ein anderer die Sammlung der Web-APIs, einschließlich des DOM (Document Object Model).

JavaScript, die Kernsprache (ECMAScript)

Die Kernsprache von JavaScript wird vom ECMA-TC39-Komitee unter dem Namen ECMAScript standardisiert. „ECMAScript“ bezeichnet den Sprachstandard, doch „ECMAScript“ und „JavaScript“ können auch synonym verwendet werden.

Diese Kernsprache wird auch außerhalb von Browsern verwendet, beispielsweise in Node.js.

Was gehört zum Umfang von ECMAScript?

ECMAScript definiert unter anderem:

• Die Sprachsyntax (Parsing-Regeln, Schlüsselwörter, Kontrollfluss, Initialisierung von Objektliteralen, ...)
• Mechanismen zur Fehlerbehandlung (throw, try...catch, die Möglichkeit, benutzerdefinierte Error-Typen zu erstellen)
• Typen (Boolean, Number, String, Function, Object, ...)
• Einen prototypbasierten Vererbungsmechanismus
• Integrierte Objekte und Funktionen, darunter JSON, Math, Array-Methoden, parseInt, decodeURI usw.
• Den Strict Mode
• Ein Modulsystem
• Ein grundlegendes Speichermodell

Standardisierungsprozess

ECMAScript-Ausgaben werden jährlich von der ECMA-Generalversammlung als Standard verabschiedet und veröffentlicht. Die gesamte Entwicklung ist in der GitHub-Organisation von Ecma TC39 öffentlich zugänglich. Dort finden sich Vorschläge, der offizielle Spezifikationstext und Sitzungsprotokolle.

Vor der 6. Ausgabe von ECMAScript (bekannt als ES6) wurden Spezifikationen nur alle paar Jahre veröffentlicht und üblicherweise mit ihren Hauptversionsnummern bezeichnet – ES3, ES5 usw. Seit ES6 wird die Spezifikation nach ihrem Veröffentlichungsjahr benannt – ES2017, ES2018 usw. ES6 ist gleichbedeutend mit ES2015. ESNext ist eine dynamische Bezeichnung für die zum Zeitpunkt der Abfassung jeweils nächste Version. ESNext-Funktionen werden genauer als Vorschläge bezeichnet, da die Spezifikation für sie definitionsgemäß noch nicht abgeschlossen ist.

Die aktuelle, vom Komitee verabschiedete Fassung von ECMA-262 ist auf der Seite zur Sprachspezifikation ECMA-262 von Ecma International im PDF- und HTML-Format verfügbar. ECMA-262 und ECMA-402 werden von den Herausgebern der Spezifikationen kontinuierlich gepflegt und aktualisiert. Auf der TC39-Website stehen die neuesten Fassungen von ECMA-262 und ECMA-402 bereit.

Neue Sprachfunktionen, darunter neue Syntax und APIs sowie Änderungen an bestehendem Verhalten, werden in Form von Vorschlägen diskutiert. Jeder Vorschlag durchläuft einen mehrstufigen Prozess und wird üblicherweise in Stufe 3 oder 4 von JavaScript-Engines implementiert und damit öffentlich nutzbar.

Weitere Informationen zur Geschichte von ECMAScript finden Sie im Wikipedia-Artikel zu ECMAScript.

Internationalization API

Die ECMAScript Internationalization API Specification ergänzt die ECMAScript-Sprachspezifikation und wird ebenfalls von Ecma TC39 standardisiert. Die Internationalization API stellt JavaScript-Anwendungen Funktionen für die Kollation (den Vergleich von Zeichenfolgen) sowie für die Formatierung von Zahlen, Datumsangaben und Uhrzeiten bereit. Anwendungen können dabei die Sprache wählen und die Funktionen an ihre Anforderungen anpassen. Der erste Standard wurde im Dezember 2012 verabschiedet; der Implementierungsstand in Browsern wird in der Dokumentation des Intl-Objekts erfasst. Die Internationalisierungsspezifikation wird inzwischen ebenfalls jährlich verabschiedet, und Browser verbessern ihre Implementierungen fortlaufend.

Weiterführende Ressourcen

Es gibt verschiedene Möglichkeiten, an der Arbeit an der ECMAScript-Sprachspezifikation und der ECMAScript Internationalization API Specification mitzuwirken oder sie und die zugehörigen Ressourcen zu verfolgen:

• Repository der ECMAScript-Sprachspezifikation
• Repository der ECMAScript Internationalization API Specification
• Repository für ECMAScript-Vorschläge
• Repository der ECMAScript-Konformitätstestsuite
• TC39-Sitzungsprotokolle
• Diskussion über die ECMAScript-Spezifikation; aktuelle Mailingliste
• Diskussion über die ECMAScript-Spezifikation; historische Mailinglistenarchive (bis März 2021)

DOM-APIs

WebIDL

Die WebIDL-Spezifikation stellt die Verbindung zwischen den DOM-Technologien und ECMAScript her.

Der Kern des DOM

Das Document Object Model (DOM) ist eine plattformübergreifende, sprachunabhängige Konvention zur Darstellung von und Interaktion mit Objekten in HTML-, XHTML- und XML-Dokumenten. Objekte im DOM-Baum können mithilfe ihrer Methoden angesprochen und verändert werden. Die Spezifikation des DOM-Kerns wird heute von WHATWG gepflegt und hat die Version des W3C abgelöst. Sie definiert sprachunabhängige Schnittstellen, die HTML- und XML-Dokumente als Objekte abstrahieren, sowie Mechanismen zur Bearbeitung dieser Abstraktion. Dazu gehören Node, Element, DocumentFragment, Document, DOMImplementation, Event, EventTarget und weitere.

Aus Sicht von ECMAScript werden die in der DOM-Spezifikation definierten Objekte als „Host-Objekte“ bezeichnet.

HTML-DOM

HTML, die Auszeichnungssprache des Webs, wird mithilfe des DOM spezifiziert. Aufbauend auf den abstrakten Konzepten des DOM-Kerns definiert HTML auch die Bedeutung von Elementen. Das HTML-DOM umfasst APIs wie Document.body und Schnittstellen für HTML-Elemente.

Die HTML-Spezifikation definiert außerdem Einschränkungen für Dokumente. Beispielsweise verlangt sie, dass alle Kindelemente eines <ul>-Elements, das eine ungeordnete Liste darstellt, <li>-Elemente sind, da diese Listeneinträge darstellen. Im Allgemeinen untersagt sie auch die Verwendung von Elementen und Attributen, die in keinem Standard definiert sind.

Suchen Sie das Document-Objekt, das Window-Objekt oder andere DOM-Elemente? Lesen Sie die DOM-Dokumentation.

Weitere wichtige APIs

• Die Funktionen setTimeout() und setInterval() wurden erstmals im HTML-Standard für die Window-Schnittstelle spezifiziert.
• XMLHttpRequest ermöglicht das Senden asynchroner HTTP-Anfragen.
• Die Fetch API bietet eine einfacher zu verwendende Abstraktion für Netzwerkanfragen.
• Das CSS Object Model abstrahiert CSS-Regeln als Objekte.
• WebWorkers ermöglichen parallele Berechnungen.
• WebSockets ermöglichen bidirektionale Kommunikation auf niedriger Ebene.
• Canvas 2D Context ist eine Zeichen-API für <canvas>.
• Die WebAssembly-Schnittstelle stellt Hilfsmittel für die Kommunikation zwischen JavaScript-Code und WebAssembly-Modulen bereit.

Umgebungen außerhalb von Browsern (wie Node.js) verfügen häufig nicht über DOM-APIs, da sie nicht mit einem Dokument interagieren. In der Regel implementieren sie aber dennoch viele Web-APIs, etwa fetch() und setTimeout().

JavaScript-Implementierungen

Zu den JavaScript-Engines aktueller Webbrowser gehören:

• Mozillas SpiderMonkey, verwendet in Firefox, Servo und Flow. Außerhalb von Browsern wird sie unter anderem in MongoDB und CouchDB eingesetzt. Sie war die allererste JavaScript-Engine und wurde von Brendan Eich bei Netscape entwickelt.
• Googles V8, verwendet in Chrome und Chromium-basierten Browsern wie Opera, Edge und Brave. Außerhalb von Browsern wird sie unter anderem in Node.js, Deno und Electron eingesetzt.
• Apples JavaScriptCore (auch bekannt als SquirrelFish/Nitro), verwendet in Safari und anderen WebKit-basierten Browsern. Außerhalb von Browsern wird sie unter anderem in Bun eingesetzt.
• LibJS, verwendet in Ladybird.

Zu den JavaScript-Engines, die in früheren Browsern verwendet wurden, gehören:

• Carakan, verwendet in Opera, bevor der Browser auf Chromium umgestellt wurde.
• Microsofts Chakra, verwendet in Internet Explorer (obwohl die implementierte Sprache offiziell „JScript“ heißt, um markenrechtliche Probleme zu vermeiden). Frühere Versionen von Edge verwendeten eine andere JavaScript-Engine, die verwirrenderweise ebenfalls Chakra hieß, bevor der Browser auf Chromium umgestellt wurde.

Zu den JavaScript-Engines, die speziell für den Einsatz außerhalb von Browsern entwickelt wurden, gehören:

• Engine262, in JavaScript geschrieben und im Wesentlichen als Referenzimplementierung der Sprache gedacht.
• Hermes von Meta, optimiert für React Native.
• Rhino von Mozilla, in Java geschrieben.
• GraalJS von Oracle, in Java geschrieben und auf GraalVM aufgebaut.
• Moddable XS, für IoT- und eingebettete Systeme gedacht.
• QuickJS, auf geringe Größe und Ressourcennutzung ausgelegt.

JavaScript-Engines stellen eine öffentliche API bereit, mit der Anwendungsentwickler JavaScript in ihre Software integrieren können. Die mit Abstand häufigste Host-Umgebung für JavaScript sind Webbrowser. Webbrowser nutzen die öffentliche API üblicherweise, um Host-Objekte zu erstellen, die das DOM in JavaScript abbilden.

Ein weiterer verbreiteter Einsatzbereich für JavaScript ist die serverseitige Skriptprogrammierung für das Web. Ein JavaScript-Webserver stellt Host-Objekte bereit, die eine HTTP-Anfrage und HTTP-Antwortobjekte repräsentieren. Diese können anschließend von einem JavaScript-Programm bearbeitet werden, um Webseiten dynamisch zu erzeugen. Node.js ist ein bekanntes Beispiel dafür.

Shells

Mit einer JavaScript-Shell können Sie JavaScript-Code schnell testen, ohne eine Webseite neu laden zu müssen. Shells sind bei der Entwicklung und beim Debuggen von Code äußerst nützlich.

Eigenständige JavaScript-Shells

Die folgenden JavaScript-Shells sind eigenständige Umgebungen, ähnlich wie Perl oder Python.

• Node.js – Eine auf V8 basierende JavaScript-Laufzeitumgebung.
• Bun – Eine auf JavaScriptCore basierende JavaScript-Laufzeitumgebung.

Browserbasierte JavaScript-Shells

Die folgenden JavaScript-Shells führen Code über die JavaScript-Engine des Browsers aus.

• Firefox verfügt über eine integrierte JavaScript-Konsole, die die mehrzeilige Bearbeitung unterstützt.
• Babel REPL – Eine browserbasierte REPL zum Experimentieren mit künftigen JavaScript-Funktionen.
• TypeScript Playground – Eine browserbasierte Umgebung zum Experimentieren mit neuen JavaScript-Funktionen (über den tsc-Compiler) und der TypeScript-Syntax.

Werkzeuge und Ressourcen

Nützliche Werkzeuge zum Schreiben und Debuggen Ihres JavaScript-Codes.

Firefox-Entwicklerwerkzeuge

Web-Konsole, JavaScript-Profiler, Debugger und weitere.

Learn JavaScript

Eine ausgezeichnete Ressource für angehende Webentwickler: Lernen Sie JavaScript in einer interaktiven Umgebung mit kurzen Lektionen und interaktiven Tests, begleitet von automatisierter Bewertung. Die ersten 40 Lektionen sind kostenlos; der gesamte Kurs ist gegen eine geringe einmalige Zahlung erhältlich.

TogetherJS

Zusammenarbeit leicht gemacht. Wenn Sie TogetherJS in Ihre Website einbinden, können sich Ihre Nutzer dort in Echtzeit gegenseitig helfen!

Stack Overflow

Fragen auf Stack Overflow mit dem Tag „JavaScript“.

JSFiddle

Bearbeiten Sie JavaScript, CSS und HTML und sehen Sie die Ergebnisse sofort. Nutzen Sie externe Ressourcen und arbeiten Sie online mit Ihrem Team zusammen.

Plunker

Plunker ist eine Online-Community, in der Sie Ihre Ideen für die Webentwicklung erstellen, gemeinsam bearbeiten und teilen können. Bearbeiten Sie Ihre JavaScript-, CSS- und HTML-Dateien und sehen Sie die Ergebnisse und die Dateistruktur sofort.

JS Bin

JS Bin ist ein kollaboratives Open-Source-Werkzeug zum Debuggen bei der Webentwicklung.

CodePen

CodePen ist ein weiteres Werkzeug für die gemeinsame Webentwicklung, mit dem Sie Ergebnisse sofort ansehen können.

StackBlitz

StackBlitz ist eine weitere Online-Umgebung zum Experimentieren und Debuggen, in der sich Full-Stack-Anwendungen mit React, Angular usw. hosten und bereitstellen lassen.

RunJS

RunJS ist eine Desktop-Umgebung zum Experimentieren und Ausprobieren von Code, die Ergebnisse sofort anzeigt und Zugriff auf Node- und Browser-APIs bietet.