Übersicht der JavaScript-Technologien

JavaScript, die Kernsprache (ECMAScript)

Die Kernsprache von JavaScript wird vom ECMA TC39-Komitee als Sprache mit dem Namen 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, zum Beispiel in Node.js.

Was fällt unter den ECMAScript-Bereich?

Unter anderem definiert ECMAScript:

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

Standardisierungsprozess

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

Vor der 6. Ausgabe von ECMAScript (bekannt als ES6) wurden Spezifikationen nur alle paar Jahre veröffentlicht und werden allgemein mit ihren 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 nächste Version bezieht, die zum Zeitpunkt des Schreibens aktuell ist. ESNext-Funktionen werden korrekterweise als Vorschläge bezeichnet, da die Spezifikation per Definition noch nicht abgeschlossen ist.

Der aktuelle vom Komitee genehmigte Schnappschuss von ECMA-262 steht in PDF- und HTML-Format auf der ECMA-262 Sprachspezifikationsseite von Ecma International zur Verfügung. ECMA-262 und ECMA-402 werden kontinuierlich von den Spezifikationsredakteuren gepflegt und aktualisiert; 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 typischerweise von JavaScript-Engines in Stufe 3 oder Stufe 4 implementiert und steht somit der Öffentlichkeit zur Verfügung.

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

Internationalisierungs-API

Die ECMAScript Internationalization API Specification ist eine Ergänzung zur ECMAScript-Sprachspezifikation, die ebenfalls von Ecma TC39 standardisiert wurde. Die Internationalisierungs-API bietet Kollation (Zeichenfolgenvergleich), Zahlenformatierung und Datums-/Zeitformatierung für JavaScript-Anwendungen, sodass die Anwendungen die Sprache wählen und die Funktionalität auf ihre Bedürfnisse zuschneiden 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 Internationalisierungs-Spezifikation wird heutzutage auch jährlich ratifiziert und Browser verbessern ihre Implementierung ständig.

Verwandte Ressourcen

Es gibt verschiedene Möglichkeiten, wie Sie an der Arbeit an der ECMAScript-Sprachspezifikation, der ECMAScript Internationalisierung API-Spezifikation und verwandten Ressourcen teilnehmen oder sie einfach 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)

DOM-APIs

WebIDL

Die WebIDL-Spezifikation bildet die Brücke zwischen den DOM-Technologien und ECMAScript.

Der Kern des DOM

Das Document Object Model (DOM) ist eine plattformübergreifende, sprachenunabhängige Konvention zur Darstellung und zum Umgang mit Objekten in HTML-, XHTML- und XML-Dokumenten. Objekte im DOM-Baum können durch Methoden an den Objekten angesprochen und manipuliert werden. Heutzutage wird die DOM-Core-Spezifikation von WHATWG verwaltet (und ersetzt die W3C-Version). Sie definiert sprachunabhängige Schnittstellen, die HTML- und XML-Dokumente als Objekte abstrahieren und zudem Mechanismen definieren, um diese Abstraktion zu manipulieren. Dazu gehören: Node, Element, DocumentFragment, Document, DOMImplementation, Event, EventTarget, und mehr.

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

HTML DOM

HTML, die Markup-Sprache des Webs, wird im Hinblick auf das DOM spezifiziert. Über den abstrakten Konzepten, die im DOM-Core definiert sind, definiert HTML auch die Bedeutung von Elementen. Das HTML DOM umfasst solche Dinge wie die className-Eigenschaft auf HTML-Elementen oder APIs wie Document.body.

Die HTML-Spezifikation legt auch Einschränkungen für Dokumente fest; beispielsweise verlangt 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 nicht in einem Standard definierten Elementen und Attributen.

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

Weitere bemerkenswerte APIs

• 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 Object Model abstrahiert CSS-Regeln als Objekte.
• WebWorkers ermöglichen 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 zur Kommunikation zwischen JavaScript-Code und WebAssembly-Modulen.

Nicht-Browser-Umgebungen (wie Node.js) verfügen oft nicht über DOM-APIs — da sie nicht mit einem Dokument interagieren — aber sie implementieren normalerweise viele Web-APIs, wie z.B. fetch() und setTimeout().

JavaScript-Implementierungen

Zu JavaScript-Engines, die in aktuellen Webbrowsern verwendet werden, gehören:

• Mozillas SpiderMonkey, verwendet in Firefox, Servo und Flow. Andere nicht-browserbasierte Anwendungen umfassen MongoDB, CouchDB und mehr. Dies war die erste überhaupt entwickelte 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 Anwendungen 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 Anwendungen umfassen Bun.
• LibJS, verwendet in Ladybird.

Einige der in früheren Browsern verwendeten JavaScript-Engines sind:

• Carakan, verwendet in Opera, bevor es ein Chromium-basierter Browser wurde.
• Microsofts Chakra, verwendet in Internet Explorer (obwohl die Sprache, die es implementiert, formell "JScript" genannt wird, um Markenprobleme zu vermeiden). Frühere Versionen von Edge verwendeten eine andere JavaScript-Engine, verwirrenderweise ebenfalls Chakra, bevor es ein Chromium-basierter Browser wurde.

Einige JavaScript-Engines, die speziell für nicht-browserbasierte Zwecke entwickelt wurden, sind:

• 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 basiert auf GraalVM.
• Moddable XS, vorgesehen für IoT/eingebettete Systeme.
• QuickJS, soll klein und leichtgewichtig sein.

JavaScript-Engines stellen eine öffentliche API bereit, die Anwendungsentwickler verwenden können, um JavaScript in ihre Software zu integrieren. Bei weitem die häufigste Host-Umgebung für JavaScript sind Webbrowser. Webbrowser nutzen typischerweise 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-)Server-Skript-Sprache. Ein JavaScript-Webserver stellt Host-Objekte dar, die HTTP-Anfrage- und Antwortobjekte repräsentieren, die dann von einem JavaScript-Programm manipuliert werden können, um Webseiten dynamisch zu generieren. Node.js ist ein beliebtes Beispiel dafür.

Shells

Eine JavaScript-Shell ermöglicht es Ihnen, JavaScript-Code-Snippets schnell 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.

Eigenständige JavaScript-Shells

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

• Node.js - Node.js ist eine Plattform, um einfach schnelle und skalierbare Netzwerkanwendungen zu bauen.
• ShellJS - Tragbare Unix-Shell-Befehle für Node.js.

Browserbasierte JavaScript-Shells

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

• Firefox verfügt über eine eingebaute JavaScript-Konsole, die die Bearbeitung über mehrere Zeilen unterstützt.
• Babel REPL - Ein browserbasiertes REPL, um mit zukünftigen JavaScript zu experimentieren.
• TypeScript-Spielplatz — Ein browserbasierter Spielplatz, um sowohl mit neuen JavaScript-Funktionen (über den tsc-Compiler) als auch mit TypeScript-Syntax zu experimentieren.

Werkzeuge & Ressourcen

Hilfreiche Werkzeuge zur Erstellung und Fehlerbehebung Ihres JavaScript-Codes.

Firefox-Entwicklerwerkzeuge

Web-Konsole, JavaScript-Profiler, Debugger und mehr.

Lernen Sie 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 Bewertung. Die ersten 40 Lektionen sind kostenlos, und der komplette Kurs ist gegen eine geringe einmalige Zahlung verfügbar.

TogetherJS

Zusammenarbeit leicht gemacht. Indem Sie TogetherJS zu Ihrer Seite hinzufügen, können Ihre Nutzer einander auf einer Website 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 eine Dateistruktur.

JS Bin

JS Bin ist ein Open-Source-Webentwicklungs-Debugging-Tool zur Zusammenarbeit.

CodePen

CodePen ist ein weiteres kollaboratives Webentwicklungs-Tool, das als Live-Resultat-Spielplatz verwendet wird.

StackBlitz

StackBlitz ist ein weiteres Online-Spielplatz-/Debugging-Tool, das Full-Stack-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.