JavaScript-Technologien Übersicht

Die Kernsprache von JavaScript wird durch das 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-browserbasierten Umgebungen verwendet, beispielsweise in Node.js.

Unter anderem definiert ECMAScript:

• Sprachsyntax (Parsing-Regeln, Schlüsselwörter, Kontrollfluss, Initialisierung von Objektliteralen, ...)
• Fehlerbehandlungsmechanismen (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, etc.
• Strikten Modus
• Ein Modulsystem
• Grundlegendes Speichermodell

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

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

Der aktuelle, vom Komitee 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 gepflegt und von den Spezifikations-Redakteuren auf dem neuesten Stand gehalten; die TC39-Website hostet die neuesten, aktuellen Versionen von ECMA-262 und ECMA-402.

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 ist somit für die Öffentlichkeit zugänglich.

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

Die ECMAScript Internationalization API Specification ist eine Ergänzung zur ECMAScript-Sprachspezifikation, die ebenfalls von Ecma TC39 standardisiert wurde. Die Internationalisierungs-API bietet Collation (Zeichenfolgenvergleich), Zahlenformatierung und Datums- und Zeitformatierung für JavaScript-Anwendungen, sodass 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 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 und verwandte Ressourcen einsehen können:

• ECMAScript Language Specification Repository
• ECMAScript Internationalization API Specification Repository
• ECMAScript Proposal Repository
• ECMAScript Konformitätstest-Suite Repository
• TC39 Sitzungsnotizen
• ECMAScript Spec Diskussion; aktuelle Mailingliste
• ECMAScript Spec Diskussion; historische Mailing-Listen-Archive (bis März 2021)

Die WebIDL-Spezifikation fungiert als Bindeglied 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 mit ihnen zu interagieren. Objekte im DOM-Baum können durch Methoden auf den Objekten angesprochen und manipuliert werden. Das W3C standardisiert das Core Document Object Model, das sprachanagnostische Schnittstellen definiert, die HTML- und XML-Dokumente als Objekte abstrahieren und außerdem Mechanismen zur Manipulation dieser Abstraktion definiert. Zu den vom DOM definierten Dingen gehören:

• Die Dokumentstruktur, ein Baum-Modell und die DOM-Ereignisarchitektur im DOM-Kern: Node, Element, DocumentFragment, Document, DOMImplementation, Event, EventTarget, …
• Eine weniger rigorose Definition der DOM-Ereignisarchitektur sowie spezifische Ereignisse in DOM-Ereignissen.
• Weitere Dinge wie DOM Traversal und DOM Range.

Aus der Sicht von ECMAScript werden die 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 an HTML-Elementen oder APIs wie Document.body.

Die HTML-Spezifikation definiert auch Einschränkungen für Dokumente; zum Beispiel 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 in keinem 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 zuerst 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 Netzwerk-Anfragen.
• Das CSS-Objektmodell abstrahiert CSS-Regeln als Objekte.
• Web-Worker ermöglichen parallele Berechnungen.
• WebSockets ermöglichen eine bidirektionale Kommunikation auf niedriger Ebene.
• Der Canvas 2D Context ist eine Zeichen-API für <canvas>.
• Die WebAssembly-Schnittstelle bietet Hilfsprogramme zur Kommunikation zwischen JavaScript-Code und WebAssembly-Modulen.

Nicht-browserbasierte Umgebungen (wie Node.js) haben häufig keine DOM-APIs – da sie nicht mit einem Dokument interagieren – implementieren aber immer noch viele Web-APIs, wie z.B. fetch() und setTimeout().

Es gibt drei Haupt-JavaScript-Implementierungen, die in Browserumgebungen und darüber hinaus verwendet werden:

• Mozillas SpiderMonkey, verwendet in Firefox. Dies war die erste jemals 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 weitere beliebte JavaScript-Engines wie:

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

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

• Engine262, eine in JavaScript geschriebene JavaScript-Engine. Sie wurde erstellt, um JavaScript-Entwicklern die Erkundung neuer Sprachfunktionen zu ermöglichen 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 für React Native optimierte Engine.
• Oracles GraalJS, eine leistungsstarke Implementierung, die auf der GraalVM von Oracle Labs basiert.

JavaScript-Engines bieten eine öffentliche API, die Anwendung Entwickler verwenden können, um JavaScript in ihre Software zu integrieren. Bei weitem das häufigste Host-Umgebung für JavaScript sind Webbrowser. Webbrowser verwenden normalerweise die öffentliche API, um Host-Objekte zu erstellen, die das DOM in JavaScript spiegeln.

Eine weitere übliche Anwendung für JavaScript ist als (Web-)Server-seitige Skriptsprache. Ein JavaScript-Webserver bietet Host-Objekte, die HTTP-Anfrage- und Antwortobjekte darstellen, die dann von einem JavaScript-Programm manipuliert werden können, um dynamisch Webseiten zu generieren. Node.js ist ein beliebtes Beispiel dafür.

Ein JavaScript-Shell ermöglicht es Ihnen, schnell Code-Snippets in JavaScript zu testen, ohne eine Webseite neu laden zu müssen. Sie sind äußerst nützlich für die Entwicklung und das Debuggen 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 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 Mehrzeilenbearbeitung unterstützt.
• Babel REPL - Ein browserbasiertes REPL zum Experimentieren mit zukünftigen JavaScript-Features.
• TypeScript Playground — Ein browserbasiertes Playground zum Experimentieren sowohl mit neuen JavaScript-Features (über den tsc-Compiler) als auch mit 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, geleitet durch eine automatisierte Bewertung. Die ersten 40 Lektionen sind kostenlos, und der komplette Kurs ist für eine kleine einmalige Zahlung erhältlich.

TogetherJS

Zusammenarbeit leicht gemacht. Durch Hinzufügen von TogetherJS auf Ihrer Seite können sich Ihre Nutzer gegenseitig in Echtzeit auf einer Website helfen!

Stack Overflow

Stack Overflow Fragen mit dem Tag "JavaScript".

JSFiddle

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

Plunker

Plunker ist eine Online-Community, um Ihre Ideen zur Webentwicklung zu erstellen, zusammenzuarbeiten und zu teilen. Bearbeiten Sie Ihre JavaScript-, CSS- und HTML-Dateien und erhalten Sie Live-Ergebnisse und Dateistruktur.

JSBin

JS Bin ist ein quelloffenes kollaboratives Werkzeug zum Debuggen von Webentwicklung.

Codepen

Codepen ist ein weiteres kollaboratives Webentwicklungswerkzeug, das als Live-Resultate-Playground dient.

StackBlitz

StackBlitz ist ein weiteres Online-Playground/Debugging-Tool, das Full-Stack-Anwendungen mit React, Angular usw. hosten und bereitstellen kann.

RunJS

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