Übersicht über JavaScript-Technologien

Die Kernsprache von JavaScript wird vom ECMA TC39-Komitee als eine Sprache namens ECMAScript standardisiert. "ECMAScript" ist der Begriff für den Sprachstandard, aber "ECMAScript" und "JavaScript" können austauschbar verwendet werden.

Diese Kernsprache wird auch in Nicht-Browser-Umgebungen verwendet, beispielsweise in Node.js.

ECMAScript definiert unter anderem:

• Sprachsyntax (Parsing-Regeln, Schlüsselwörter, Kontrollfluss, Objektliteralinitialisierung, ...)
• Fehlerbehandlungsmechanismen (throw, try...catch, Fähigkeit zur Erstellung benutzerdefinierter Error-Typen)
• Typen (boolean, number, string, function, object, ...)
• Ein prototypenbasiertes Vererbungsmechanismus
• Eingebaute Objekte und Funktionen, einschließlich JSON, Math, Array-Methoden, parseInt, decodeURI usw.
• Strikter Modus
• Ein Modulsystem
• Grundlegendes Speichermodell

ECMAScript-Ausgaben werden jährlich von der ECMA-Generalversammlung als Standard genehmigt und veröffentlicht. Alle Entwicklungen sind öffentlich auf der Ecma TC39 GitHub-Organisation einsehbar, die Vorschläge, den offiziellen Spezifikationstext und Sitzungsprotokolle hostet.

Vor der 6. Ausgabe von ECMAScript (bekannt als ES6) wurden Spezifikationen einmal alle paar Jahre veröffentlicht und werden üblicherweise mit ihren Hauptversionsnummern bezeichnet — ES3, ES5 usw. Nach ES6 wird die Spezifikation nach dem Veröffentlichungsjahr benannt — ES2017, ES2018 usw. ES6 ist synonym mit ES2015. ESNext ist ein dynamischer Name, der sich auf die jeweils nächste Version zur Zeit des Schreibens bezieht. ESNext-Features werden korrekterweise als Vorschläge bezeichnet, da die Spezifikation per Definition noch nicht abgeschlossen ist.

Der derzeit von der Kommission genehmigte Schnappschuss von ECMA-262 ist im PDF- und HTML-Format auf der ECMA-262 Sprachspezifikationsseite von Ecma International verfügbar. ECMA-262 und ECMA-402 werden kontinuierlich von den Spezifikationsredakteuren gepflegt und aktualisiert; die TC39-Website hostet die neueste, aktuelle ECMA-262 und ECMA-402 Versionen.

Neue Sprachfeatures, einschließlich der Einführung neuer Syntaxen und APIs sowie der Überarbeitung bestehender Verhaltensweisen, werden in Form von Vorschlägen diskutiert. Jeder Vorschlag durchläuft einen 4-stufigen Prozess und wird normalerweise von JavaScript-Engines in der Stufe 3 oder Stufe 4 implementiert und ist somit der Öffentlichkeit zugänglich.

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

Die ECMAScript Internationalization API Specification ist eine Ergänzung zur ECMAScript Language Specification, die ebenfalls von Ecma TC39 standardisiert wurde. Die Internationalization API bietet Kollation (Zeichenfolgenvergleich), Zahlenformatierung und Datums- und Zeitformatierung für JavaScript-Anwendungen, sodass die Anwendungen die Sprache auswählen und die Funktionalität an ihre Bedürfnisse anpassen können. Der ursprüngliche Standard wurde im Dezember 2012 genehmigt; der Status der Implementierungen in Browsern wird in der Dokumentation des Intl-Objekts nachverfolgt. Die Internationalisierungsspezifikation wird heutzutage ebenfalls jährlich ratifiziert und Browser verbessern ständig ihre Implementierung.

Es gibt verschiedene Möglichkeiten, wie Sie an der aktuellen Arbeit zur ECMAScript-Sprachspezifikation und zur ECMAScript-Internationalisierungs-API-Spezifikation teilnehmen oder diese einfach verfolgen können:

• ECMAScript Language Specification Repo
• ECMAScript Internationalization API Specification Repo
• ECMAScript Proposals Repo
• ECMAScript Conformance Test Suite Repo
• TC39 Meeting Notes
• Diskussion über die ECMAScript-Spezifikation; aktuelle Mailingliste
• Diskussion über die ECMAScript-Spezifikation; historische Mailing-Listen-Archive (bis März 2021)

Die WebIDL-Spezifikation bildet die Schnittstelle zwischen den DOM-Technologien und ECMAScript.

Das Document Object Model (DOM) ist eine plattformübergreifende, sprachenunabhängige Konvention, um Objekte in HTML-, XHTML- und XML-Dokumenten darzustellen und zu manipulieren. Objekte im DOM-Baum können durch Methoden auf den Objekten angesprochen und manipuliert werden. Die W3C standardisiert das Core Document Object Model, das sprachenunabhängige Schnittstellen definiert, die HTML- und XML-Dokumente als Objekte abstrahieren, und außerdem Mechanismen zur Manipulation dieser Abstraktion definiert. Zu den Dingen, die vom DOM definiert werden, gehören:

• Die Dokumentstruktur, ein Baum-Modell und die DOM-Event-Architektur in DOM Core: Node, Element, DocumentFragment, Document, DOMImplementation, Event, EventTarget, ...
• Eine weniger strenge Definition der DOM-Event-Architektur sowie spezifische Ereignisse in DOM Events.
• Weitere Dinge wie DOM Traversal und DOM Range.

Aus der Sicht von ECMAScript werden in der DOM-Spezifikation definierte Objekte als "Host-Objekte" bezeichnet.

HTML, die Markup-Sprache des Webs, wird in Bezug auf das DOM spezifiziert. Über die abstrakten Konzepte, die in DOM Core definiert sind, wird in HTML auch die Bedeutung von Elementen festgelegt. Das HTML DOM umfasst solche Dinge wie die className-Eigenschaft bei HTML-Elementen oder APIs wie Document.body.

Die HTML-Spezifikation definiert auch Einschränkungen für Dokumente; beispielsweise erfordert sie, dass alle Kinder eines <ul>-Elements, das eine unsortierte Liste darstellt, <li>-Elemente sind, da diese Listenelemente darstellen. Generell verbietet sie auch die Verwendung von Elementen und Attributen, die nicht in einem Standard definiert sind.

Suchen Sie nach dem Document-Objekt, dem Window-Objekt und den anderen DOM-Elementen? Lesen Sie die DOM-Dokumentation.

• Die Funktionen setTimeout() und setInterval() wurden erstmals auf der Window-Schnittstelle im HTML-Standard spezifiziert.
• XMLHttpRequest ermöglicht es, asynchrone HTTP-Anfragen zu senden.
• Die Fetch API bietet eine ergonomischere Abstraktion für Netzwerkabfragen.
• Das CSS Object Model abstrahiert CSS-Regeln als Objekte.
• WebWorkers ermöglicht parallele Berechnungen.
• WebSockets ermöglichen eine bidirektionale Kommunikation auf niedriger Ebene.
• Canvas 2D Context ist eine Zeichen-API für <canvas>.
• Die WebAssembly-Schnittstelle bietet Werkzeuge für die Kommunikation zwischen JavaScript-Code und WebAssembly-Modulen.

Nicht-Browser-Umgebungen (wie Node.js) haben oft keine DOM-APIs, da sie nicht mit einem Dokument interagieren, implementieren jedoch in der Regel viele Web-APIs, wie fetch() und setTimeout().

Es gibt drei Hauptimplementierungen von JavaScript, die in Browserumgebungen und darüber hinaus verwendet werden:

• Mozillas SpiderMonkey, verwendet in Firefox. Dies war die erste überhaupt JavaScript-Engine, erstellt von Brendan Eich bei Netscape.
• Googles V8, verwendet in Google Chrome, Opera, Edge, Node.js, Deno, Electron und mehr.
• Apples JavaScriptCore (auch bekannt als SquirrelFish/Nitro), verwendet in WebKit-Browsern wie Apple Safari und Bun.

Neben den oben genannten Implementierungen gibt es andere beliebte JavaScript-Engines wie:

• Carakan, verwendet in älteren Versionen von Opera.
• Microsofts Chakra-Engine, verwendet im Internet Explorer (obwohl die implementierte Sprache formal als "JScript" bezeichnet wird, um Markenprobleme zu vermeiden). Frühere Versionen von Edge verwendeten eine neue JavaScript-Engine, die verwirrenderweise auch Chakra genannt wurde.
• LibJS, verwendet in der Browserimplementierung von SerenityOS.
• Mozillas Rhino-Engine, eine in Java geschriebene JavaScript-Implementierung, hauptsächlich erstellt von Norris Boyd (ebenfalls bei Netscape).

Es gibt einige Engines, die speziell für Nicht-Browser-Zwecke entwickelt wurden:

• Engine262, eine in JavaScript geschriebene JavaScript-Engine. Sie ist für JavaScript-Entwickler erstellt, um neue Sprachfeatures zu erkunden und Fehler in der Spezifikation zu finden.
• Moddable XS, verwendet in eingebetteten Systemen wie IoT.
• QuickJS, eine kleine und einbettbare JavaScript-Engine.
• Metas Hermes-Engine, eine optimierte Engine für React Native.
• Oracles GraalJS, eine leistungsstarke Implementierung, entwickelt auf der GraalVM von Oracle Labs.

JavaScript-Engines stellen eine öffentliche API bereit, die Anwendungsentwickler nutzen können, um JavaScript in ihre Software zu integrieren. Mit Abstand die häufigste Host-Umgebung für JavaScript sind Webbrowser. Webbrowser verwenden typischerweise die öffentliche API, um Host-Objekte zu erstellen, die dafür verantwortlich sind, das DOM in JavaScript widerzuspiegeln.

Eine weitere gängige Anwendung von JavaScript ist als (Web-)Server-seitige Skriptsprache. Ein JavaScript-Webserver stellt Host-Objekte bereit, die ein HTTP-Anfrage- und Antwortobjekt repräsentieren, das dann von einem JavaScript-Programm manipuliert werden kann, um Webseiten dynamisch zu generieren. Node.js ist ein beliebtes Beispiel dafür.

Eine JavaScript-Shell ermöglicht es Ihnen, schnell JavaScript-Code-Schnipsel zu testen, ohne eine Webseite neu laden zu müssen. Sie sind äußerst nützlich für die Entwicklung und das Debugging von Code.

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

• Node.js - Node.js ist eine Plattform zum einfachen Erstellen schneller, skalierbarer Netzwerk-Anwendungen.
• ShellJS - Tragbare Unix-Shell-Befehle für Node.js.

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

• Firefox hat eine eingebaute JavaScript-Konsole, die Multi-Line-Bearbeitung unterstützt.
• Babel REPL - Ein browserbasierter REPL zum Experimentieren mit zukünftigen JavaScript-Versionen.
• TypeScript playground — Eine browserbasierte Spielwiese zum Experimentieren mit neuen JavaScript-Features (über den tsc-Compiler) und TypeScript-Syntax.

Nützliche Werkzeuge zum Schreiben und Debuggen von JavaScript-Code.

Firefox Developer Tools

Web Console, 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, geführt durch automatisierte Beurteilungen. Die ersten 40 Lektionen sind kostenlos, und der komplette Kurs ist gegen eine geringe einmalige Zahlung verfügbar.

TogetherJS

Kollaboration leicht gemacht. Indem Sie TogetherJS zu Ihrer Website hinzufügen, können Ihre Benutzer sich gegenseitig in Echtzeit helfen!

Stack Overflow

Stack Overflow-Fragen, die mit "JavaScript" getaggt sind.

JSFiddle

Bearbeiten Sie JavaScript, CSS und HTML und erhalten Sie Live-Ergebnisse. Nutzen Sie externe Ressourcen und arbeiten Sie online mit Ihrem Team zusammen.

Plunker

Plunker ist eine Online-Community zum Erstellen, Zusammenarbeiten und Teilen Ihrer Webentwicklungs-Ideen. Bearbeiten Sie Ihre JavaScript-, CSS- und HTML-Dateien und erhalten Sie Live-Ergebnisse und Dateistrukturen.

JS Bin

JS Bin ist ein Open-Source-Webentwicklungstool zur kollaborativen Fehlerbehebung.

CodePen

CodePen ist ein weiteres kollaboratives Webentwicklungstool, das als Live-Ergebnis-Spielwiese verwendet wird.

StackBlitz

StackBlitz ist ein weiteres Online-Spielplatz-/Debugging-Tool, das vollständige Anwendungen mit React, Angular, usw. hosten und bereitstellen kann.

RunJS

RunJS ist ein Desktop-Spielplatz/Notizblock-Tool, das Live-Ergebnisse und Zugriff auf sowohl Node- als auch Browser-APIs bietet.