Überblick über JavaScript-Technologien

JavaScript, die Kernsprache (ECMAScript)

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

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

Was gehört zum Geltungsbereich 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 Ecma TC39 öffentlich einsehbar. 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 anhand ihrer 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 veränderliche Bezeichnung für die zum jeweiligen Zeitpunkt nächste Version. ESNext-Funktionen werden treffender als Vorschläge bezeichnet, da die Spezifikation für sie definitionsgemäß noch nicht fertiggestellt ist.

Der aktuelle, vom Komitee verabschiedete Stand 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 Verantwortlichen für die Spezifikationen kontinuierlich gepflegt und aktualisiert. Auf der TC39-Website stehen die neuesten Fassungen von ECMA-262 und ECMA-402 bereit.

Neue Sprachfunktionen, darunter die Einführung neuer 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, sodass er öffentlich genutzt werden kann.

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 Sortierung (Zeichenfolgenvergleiche), Zahlenformatierung sowie Datums- und Uhrzeitformatierung bereit. Anwendungen können dabei die Sprache auswählen und die Funktionen an ihre Anforderungen anpassen. Der erste Standard wurde im Dezember 2012 verabschiedet; der Stand der Browserimplementierungen wird in der Dokumentation des Intl-Objekts erfasst. Auch die Internationalization-Spezifikation wird inzwischen jährlich ratifiziert, und Browser verbessern ihre Implementierungen fortlaufend.

Verwandte Ressourcen

Es gibt verschiedene Möglichkeiten, an der Arbeit an der ECMAScript Language Specification, der ECMAScript Internationalization API Specification und verwandten Ressourcen mitzuwirken oder sie zu verfolgen:

• Repository der ECMAScript Language Specification
• Repository der ECMAScript Internationalization API Specification
• Repository für ECMAScript-Vorschläge
• Repository der ECMAScript-Konformitätstestsuite
• TC39-Sitzungsprotokolle
• Diskussionen zur ECMAScript-Spezifikation; aktuelle Mailingliste
• Diskussionen zur ECMAScript-Spezifikation; Archiv der früheren Mailingliste (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 über ihre Methoden angesprochen und verändert werden. Heute wird die Spezifikation des DOM-Kerns 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 der Elemente. Das HTML-DOM umfasst APIs wie Document.body und Schnittstellen für HTML-Elemente.

Die HTML-Spezifikation legt außerdem Einschränkungen für Dokumente fest. Beispielsweise müssen alle Kindelemente eines <ul>-Elements, das eine ungeordnete Liste darstellt, <li>-Elemente sein, da diese Listeneinträge darstellen. Generell 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 für die Window-Schnittstelle im HTML-Standard spezifiziert.
• XMLHttpRequest ermöglicht das Senden asynchroner HTTP-Anfragen.
• Die Fetch API bietet eine benutzerfreundlichere Abstraktion für Netzwerkanfragen.
• Das CSS Object Model bildet CSS-Regeln als Objekte ab.
• 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 des Browsers (wie Node.js) verfügen häufig nicht über DOM-APIs, da sie nicht mit einem Dokument interagieren. In der Regel implementieren sie aber viele Web-APIs, etwa fetch() und setTimeout().

JavaScript-Implementierungen

Zu den JavaScript-Engines, die in aktuellen Webbrowsern verwendet werden, 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 als SquirrelFish/Nitro bekannt), 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 es zu einem Chromium-basierten Browser wurde.
• Microsofts Chakra, verwendet in Internet Explorer (die implementierte Sprache heißt aus markenrechtlichen Gründen offiziell allerdings „JScript“). Frühere Versionen von Edge verwendeten eine andere JavaScript-Engine, die verwirrenderweise ebenfalls Chakra hieß, bevor Edge zu einem Chromium-basierten Browser 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.
• Metas Hermes, optimiert für React Native.
• Mozillas Rhino, in Java geschrieben.
• Oracles GraalJS, in Java geschrieben und auf GraalVM aufgebaut.
• Moddable XS, für IoT- und eingebettete Systeme gedacht.
• QuickJS, auf geringe Größe und niedrigen Ressourcenverbrauch ausgelegt.

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

Ein weiteres verbreitetes Einsatzgebiet von JavaScript ist die serverseitige Skripterstellung für (Web-)Server. Ein JavaScript-Webserver stellt Host-Objekte bereit, die HTTP-Anfragen und -Antworten repräsentieren. Ein JavaScript-Programm kann diese Objekte bearbeiten, um Webseiten dynamisch zu erzeugen. Node.js ist ein bekanntes Beispiel dafür.

Shells

Mit einer JavaScript-Shell können Sie JavaScript-Codefragmente schnell testen, ohne eine Webseite neu laden zu müssen. Sie sind äußerst nützlich, um Code zu entwickeln und Fehler zu beheben.

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 mehrzeilige Eingaben unterstützt.
• Babel REPL – Eine browserbasierte REPL, mit der Sie zukünftige JavaScript-Funktionen ausprobieren können.
• TypeScript Playground – Eine browserbasierte Umgebung zum Experimentieren sowohl mit neuen JavaScript-Funktionen (über den tsc-Compiler) als auch mit TypeScript-Syntax.

Werkzeuge und Ressourcen

Hilfreiche Werkzeuge zum Schreiben und Debuggen Ihres JavaScript-Codes.

Firefox-Entwicklerwerkzeuge

Webkonsole, JavaScript-Profiler, Debugger und mehr.

Learn JavaScript

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

TogetherJS

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

Stack Overflow

Mit „JavaScript“ gekennzeichnete Fragen auf Stack Overflow.

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 Ideen für die Webentwicklung erstellen, gemeinsam bearbeiten und teilen können. Bearbeiten Sie Ihre JavaScript-, CSS- und HTML-Dateien und sehen Sie Ergebnisse und Dateistruktur sofort.

JS Bin

JS Bin ist ein kollaboratives Open-Source-Werkzeug zur Fehlerbehebung in der Webentwicklung.

CodePen

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

StackBlitz

StackBlitz ist eine weitere Online-Umgebung zum Experimentieren und Debuggen, mit 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. Sie zeigt Ergebnisse sofort an und bietet Zugriff auf Node- und Browser-APIs.