Überblick über JavaScript-Technologien

JavaScript, die Kernsprache (ECMAScript)

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

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

Was fällt unter den ECMAScript-Bereich?

Unter anderem definiert ECMAScript:

• Sprachsyntax (Parsing-Regeln, Schlüsselwörter, Kontrollfluss, Initialisierung von Objektliteralen, ...)
• Fehlerbehandlungsmethoden (throw, try...catch, Möglichkeit zur Erstellung benutzerdefinierter Error-Typen)
• Typen (boolean, number, string, function, object, ...)
• Ein prototypbasiertes Vererbungsmechanismus
• Eingebaute Objekte und Funktionen, einschließlich JSON, Math, Array-Methoden, parseInt, decodeURI, usw.
• Strikter Modus
• Ein Modulsystem
• Grundlegendes Speichermodell

Standardisierungsprozess

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

Vor der 6. Ausgabe von ECMAScript (bekannt als ES6) wurden Spezifikationen alle paar Jahre veröffentlicht und werden häufig anhand ihrer 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 zum Zeitpunkt des Schreibens bezieht. ESNext-Funktionen werden korrekterweise als Vorschläge bezeichnet, da die Spezifikation per Definition noch nicht abschließend ist.

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

Neue Sprachfunktionen, einschließlich Einführung neuer Syntaxe und APIs sowie Überarbeitung bestehender Verhaltensweisen, werden in Form von Vorschlägen diskutiert. Jeder Vorschlag durchläuft einen 4-Stufen-Prozess und wird typischerweise von JavaScript-Engines in Stufe 3 oder Stufe 4 implementiert und ist somit für die öffentliche Nutzung verfügbar.

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

Internationalisierungs-API

Die ECMAScript Internationalization API Specification ist eine Ergänzung zur ECMAScript Language Specification und wird ebenfalls von Ecma TC39 standardisiert. Die Internationalisierungs-API bietet Collation (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 nachverfolgt. Die Internationalisierungs-Spezifikation wird heutzutage ebenfalls jährlich ratifiziert und Browser verbessern ständig ihre Implementierung.

Verwandte Ressourcen

Es gibt verschiedene Möglichkeiten, sich an der aktuellen Arbeit an der ECMAScript-Language-Specification und der ECMAScript-Internationalisierungs-API-Specification sowie an verwandten Ressourcen zu beteiligen oder diese einfach nur zu verfolgen:

• ECMAScript Language Specification Repo
• ECMAScript Internationalization API Specification Repo
• ECMAScript Proposals Repo
• ECMAScript Conformance Test Suite Repo
• TC39-Sitzungsnotizen
• ECMAScript Spezifikationsdiskussion; aktuelle Mailingliste
• ECMAScript Spezifikationsdiskussion; historische Mailinglisten-Archive (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 und Interaktion mit Objekten in HTML-, XHTML- und XML-Dokumenten. Objekte im DOM-Baum können durch Methoden auf den Objekten angesprochen und manipuliert werden. Heutzutage wird die DOM Core-Spezifikation von WHATWG gepflegt (ersetzt die W3C-Version). Sie definiert sprachunabhängige Schnittstellen, die HTML- und XML-Dokumente als Objekte abstrahieren, und definiert auch Mechanismen, um diese Abstraktion zu manipulieren. Dazu gehören: Node, Element, DocumentFragment, Document, DOMImplementation, Event, EventTarget, und mehr.

Aus ECMAScript-Sicht werden die in der DOM-Spezifikation definierten Objekte als "Hostobjekte" bezeichnet.

HTML DOM

HTML, die Markup-Sprache des Webs, wird im Sinne des DOM spezifiziert. Oberhalb der im DOM Core definierten abstrakten Konzepte definiert HTML auch die Bedeutung der Elemente. 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 fordert sie, dass alle Kinder eines <ul>-Elements, das eine ungeordnete Liste darstellt, <li>-Elemente sein müssen, da diese Listeneinträge repräsentieren. Im Allgemeinen verbietet sie auch die Verwendung von Elementen und Attributen, die nicht in einem Standard definiert sind.

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

Andere bemerkenswerte APIs

• Die Funktionen setTimeout() und setInterval() wurden erstmals in der Window-Schnittstelle im HTML-Standard spezifiziert.
• XMLHttpRequest ermöglicht das Senden von asynchronen HTTP-Anfragen.
• Die Fetch API bietet eine ergonomischere Abstraktion für Netzwerk-Anfragen.
• Das CSS Object Model abstrahiert CSS-Regeln als Objekte.
• WebWorkers ermöglichen parallele Berechnungen.
• WebSockets erlauben bidirektionale Low-Level-Kommunikation.
• Canvas 2D Context ist eine Zeichen-API für <canvas>.
• Die WebAssembly-Schnittstelle bietet Werkzeuge zur 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 —, aber sie implementieren in der Regel viele Web-APIs, wie fetch() und setTimeout().

JavaScript-Implementierungen

In aktuellen Webbrowsern verwendete JavaScript-Engines umfassen:

• Mozillas SpiderMonkey, verwendet in Firefox, Servo und Flow. Andere nicht-browserbasierte Verwendungen umfassen MongoDB, CouchDB und mehr. Dies war die erste JavaScript-Engine, erstellt von Brendan Eich bei Netscape.
• Googles V8, verwendet in Chrome und Chromium-basierten Browsern wie Opera, Edge und Brave. Andere nicht-browserbasierte Verwendungen umfassen Node.js, Deno, Electron und mehr.
• Apples JavaScriptCore (auch bekannt als SquirrelFish/Nitro), verwendet in Safari und anderen WebKit-basierten Browsern. Andere nicht-browserbasierte Verwendungen umfassen Bun.
• LibJS, verwendet in Ladybird.

Einige JavaScript-Engines, die in früheren Browsern verwendet wurden, umfassen:

• Carakan, verwendet in Opera, bevor es ein Chromium-basierter Browser wurde.
• Microsofts Chakra, verwendet in Internet Explorer (obwohl die Sprache, die es implementiert, formal "JScript" genannt wird, um Markenprobleme zu vermeiden). Frühere Versionen von Edge verwendeten eine andere JavaScript-Engine, verwirrenderweise ebenfalls [Chakra](https://en.wikipedia.org/wiki/Chakra_(JavaScript_engine) genannt), bevor es ein Chromium-basierter Browser wurde.

Einige JavaScript-Engines, die speziell für nicht-browserbasierte Zwecke angepasst wurden, umfassen:

• Engine262, geschrieben in JavaScript und im Wesentlichen als Referenzimplementierung der Sprache gedacht.
• Metas Hermes, optimiert für React Native.
• Mozillas Rhino, geschrieben in Java.
• Oracles GraalJS, geschrieben in Java und basiert auf GraalVM.
• Moddable XS, gedacht für IoT/Embedded Systems.
• QuickJS, gedacht als klein und leichtgewichtig.

JavaScript-Engines bieten eine öffentliche API, die Anwendungsentwickler nutzen können, um JavaScript in ihre Software zu integrieren. Bei weitem die häufigste Hostumgebung für JavaScript sind Webbrowser. Webbrowser verwenden typischerweise die öffentliche API, um Hostobjekte zu erstellen, die dafür verantwortlich sind, das DOM in JavaScript zu reflektieren.

Eine weitere häufige Anwendung für JavaScript ist als (Web-)Server-seitige Skriptsprache. Ein JavaScript-Webserver stellt Hostobjekte bereit, die eine HTTP-Anfrage und Antwortobjekte darstellen, die dann von einem JavaScript-Programm manipuliert werden können, um dynamisch Webseiten zu erstellen. Node.js ist ein populäres Beispiel dafür.

Shells

Eine JavaScript-Shell ermöglicht es Ihnen, schnell JavaScript-Codeschnipsel zu testen, ohne eine Webseite neu laden zu müssen. Sie sind äußerst nützlich zum Entwickeln und Debuggen von Code.

Standalone JavaScript-Shells

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

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

Browserbasierte JavaScript-Shells

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

• Firefox verfügt über eine eingebaute JavaScript-Konsole, die Multiline-Bearbeitung unterstützt.
• Babel REPL - Eine browserbasierte REPL zum Experimentieren mit zukünftigen JavaScript-Versionen.
• TypeScript playground — Ein browserbasiertes Spielzimmer zum Experimentieren mit neuen JavaScript-Funktionen (über den tsc-Compiler) und TypeScript-Syntax.

Werkzeuge & Ressourcen

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 vollständige Kurs ist für eine kleine Einmalzahlung verfügbar.

TogetherJS

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

Stack Overflow

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

JSFiddle

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

Plunker

Plunker ist eine Online-Community zur Erstellung, Zusammenarbeit und zum 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-Kollaboratives-Webentwicklungs-Debugging-Tool.

CodePen

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

StackBlitz

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

RunJS

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