Überblick über JavaScript-Technologien

Die Kernsprache von JavaScript wird durch das ECMA TC39 Komitee als eine Sprache namens ECMAScript standardisiert. "ECMAScript" ist der Begriff für die Sprachstandardisierung, aber "ECMAScript" und "JavaScript" können austauschbar verwendet werden.

Diese Kernsprache wird auch in nicht-browserbasierten Umgebungen verwendet, zum Beispiel in Node.js.

Unter anderem definiert ECMAScript:

• Sprachsyntax (Parserregeln, Schlüsselwörter, Kontrollfluss, Initialisierung von Objektliteralen, ...)
• Mechanismen zur Fehlerbehandlung (throw, try...catch, Möglichkeit zur Erstellung benutzerdefinierter Error-Typen)
• Typen (boolean, number, string, function, object, ...)
• Ein auf Prototypen basierendes Vererbungssystem
• Eingebaute Objekte und Funktionen, einschließlich JSON, Math, Array-Methoden, parseInt, decodeURI usw.
• Strict mode
• Ein Modulsystem
• Grundlegendes Speicherverwaltungsmodell

ECMAScript-Editionen werden jährlich von der Generalversammlung der ECMA genehmigt und als Standard veröffentlicht. Die gesamte Entwicklung ist öffentlich auf der Ecma TC39 GitHub-Organisation, die Vorschläge, den offiziellen Spezifikationstext und Sitzungsprotokolle hostet.

Vor der 6. Edition von ECMAScript (bekannt als ES6) wurden Spezifikationen alle paar Jahre veröffentlicht und häufig durch ihre Hauptversionsnummern bezeichnet — ES3, ES5 usw. Nach ES6 wird die Spezifikation nach dem Veröffentlichungsjahr benannt — ES2017, ES2018 usw. ES6 ist gleichbedeutend mit ES2015. ESNext ist ein dynamischer Name, der sich auf die jeweils nächste Version bezieht. ESNext-Features werden korrekterweise als Vorschläge bezeichnet, da die Spezifikation per Definition noch nicht finalisiert ist.

Der aktuell vom Komitee genehmigte Schnappschuss der 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 gepflegt und von den Spezifikationseditoren aktuell gehalten; die TC39-Website hostet die neuesten, aktuellen ECMA-262 und ECMA-402 Versionen.

Neue Sprachfunktionen, 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 in der Regel von JavaScript-Engines in Stufe 3 oder Stufe 4 implementiert und steht somit für die öffentliche Nutzung zur Verfügung.

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

Die ECMAScript Internationalization API Specification ist eine Ergänzung zur ECMAScript Language Specification, die ebenfalls von Ecma TC39 standardisiert wird. Die Internationalization API bietet Sortierung (Zeichenfolgenvergleich), Zahlenformatierung und Datums- und Zeitformatierung für JavaScript-Anwendungen, sodass die Anwendungen die Sprache wä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 verfolgt. Die Internationalization-Spezifikation wird heutzutage ebenfalls jährlich ratifiziert und Browser verbessern ständig ihre Implementierung.

Es gibt verschiedene Möglichkeiten, wie Sie sich an der aktuellen Arbeit an der ECMAScript Language Specification und der ECMAScript Internationalization API Specification beteiligen oder diese verfolgen können:

• ECMAScript Language Specification repo
• ECMAScript Internationalization API Specification repo
• ECMAScript proposals repo
• ECMAScript conformance test suite repo
• TC39 meeting notes
• ECMAScript spec discussion; current mailing list
• ECMAScript spec discussion; historical mailing-list archives (until March 2021)

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

Das Document Object Model (DOM) ist eine plattformübergreifende, sprachenunabhängige Konvention zur Darstellung und Interaktion mit Objekten in HTML-, XHTML- und XML-Dokumenten. Objekte im DOM-Baum können durch Methoden an den Objekten angesprochen und manipuliert werden. Das W3C standardisiert den Core Document Object Model, der sprachenunabhängige Schnittstellen definiert, die HTML- und XML-Dokumente als Objekte abstrahieren, sowie Mechanismen zur Manipulation dieser Abstraktion definiert. Zu den vom DOM definierten Dingen gehören:

• Die Dokumentstruktur, ein Baumodell, und die Architektur des DOM-Ereignisses im DOM-Kern: Node, Element, DocumentFragment, Document, DOMImplementation, Event, EventTarget, …
• Eine weniger strenge Definition der DOM-Ereignisarchitektur sowie spezifische Ereignisse in DOM-Ereignissen.
• Andere Dinge wie DOM Traversal und DOM Range.

Aus Sicht von ECMAScript werden Objekte, die in der DOM-Spezifikation definiert sind, als "Host-Objekte" bezeichnet.

HTML, die Markup-Sprache des Webs, wird in Bezug auf das DOM spezifiziert. Über die im DOM-Kern definierten abstrakten Konzepte hinaus definiert HTML auch die Bedeutung von Elementen. Das HTML DOM umfasst Dinge wie die className-Eigenschaft von 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 ungeordnete Liste darstellt, <li>-Elemente sind, da diese Listenelemente darstellen. Im Allgemeinen 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 das Senden asynchroner HTTP-Anfragen.
• Die Fetch API bietet eine ergonomischere Abstraktion für Netzwerkrequests.
• Das CSS Object Model abstrahiert CSS-Regeln als Objekte.
• WebWorkers erlauben 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 Utilities für die Kommunikation zwischen JavaScript-Code und WebAssembly-Modulen.

Nicht-browserbasierte Umgebungen (wie Node.js) haben oft keine DOM-APIs, da sie nicht mit einem Dokument interagieren, aber dennoch viele Web-APIs implementieren, wie beispielsweise fetch() und setTimeout().

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

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

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

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

Es gibt einige Engines, die speziell für nicht-browserbasierte Zwecke ausgelegt sind:

• Engine262, eine JavaScript-Engine, die in JavaScript geschrieben ist. Sie wird für JavaScript-Entwickler erstellt, um neue Sprachfunktionen 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 auf React Native optimierte Engine.
• Oracles GraalJS, eine leistungsstarke Implementierung auf der GraalVM von Oracle Labs.

JavaScript-Engines stellen eine öffentliche API zur Verfügung, die Anwendungsentwickler nutzen können, um JavaScript in ihre Software zu integrieren. Bei weitem die häufigste Host-Umgebung für JavaScript sind Webbrowser. Webbrowser verwenden in der Regel die öffentliche API, um Host-Objekte zu erstellen, die dafür verantwortlich sind, das DOM in JavaScript zu reflektieren.

Eine weitere häufige Anwendung für JavaScript ist als (Web-) serverseitige Skriptsprache. Ein JavaScript-Webserver stellt Host-Objekte dar, die ein HTTP-Request- und Response-Objekte repräsentieren, die dann von einem JavaScript-Programm manipuliert werden können, um Webseiten dynamisch zu generieren. Node.js ist ein beliebtes Beispiel hierfür.

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

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

• Node.js - Node.js ist eine Plattform zum einfachen Aufbau von schnellen, skalierbaren Netzwerk-Anwendungen.
• ShellJS - Tragbare Unix-Shell-Befehle für Node.js.

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

• Firefox verfügt über eine eingebaute JavaScript-Konsole, die Mehrzeilenbearbeitung unterstützt.
• Babel REPL - Ein browserbasiertes REPL zum Experimentieren mit zukünftigen JavaScript.
• TypeScript Playground — Ein browserbasierter Spielplatz zum Experimentieren mit neuen JavaScript-Funktionen (über den tsc-Compiler) und TypeScript-Syntax.

Hilfreiche Werkzeuge zum Schreiben und Debuggen Ihres JavaScript-Codes.

Firefox Developer Tools

Webkonsole, JavaScript-Profiler, Debugger und mehr.

Learn JavaScript

Eine ausgezeichnete 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, und der komplette Kurs ist gegen eine geringe Einmalgebühr verfügbar.

TogetherJS

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

Stack Overflow

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

JSFiddle

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

Plunker

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

JS Bin

JS Bin ist ein Open-Source-Kollaborations-Webentwicklungs-Debugging-Tool.

CodePen

CodePen ist ein weiteres kollaboratives Webentwicklungs-Tool, 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/Kratzblock-Tool, das Live-Ergebnisse und Zugriff auf sowohl Node als auch Browser-APIs bietet.