JavaScript-Technologien im Überblick

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

Unter anderem definiert ECMAScript:

• Sprachsyntax (Parsing-Regeln, Schlüsselwörter, Kontrollfluss, Objektliteral-Initialisierung, ...)
• Mechanismen zur Fehlerbehandlung (throw, try...catch, Möglichkeit 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, etc.
• Strikte Modus
• Ein Modulsystem
• Grundlegendes Speicher-Management-Modell

ECMAScript-Ausgaben werden jährlich von der ECMA General Assembly als Standard genehmigt und veröffentlicht. Die gesamte Entwicklung ist öffentlich auf der Ecma TC39 GitHub-Organisation einsehbar, welche Vorschläge, den offiziellen Spezifikationstext und Sitzungsnotizen hostet.

Vor der 6. Ausgabe von ECMAScript (bekannt als ES6) wurden Spezifikationen einmal alle paar Jahre veröffentlicht und sind gemeinhin unter ihren Hauptversionsnummern bekannt — ES3, ES5, etc. Nach ES6 wird die Spezifikation nach dem Veröffentlichungsjahr benannt — ES2017, ES2018, etc. ES6 ist synonym 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 abgeschlossen ist.

Der aktuelle von dem Komitee genehmigte Schnappschuss von ECMA-262 ist im PDF- und HTML-Format auf der ECMA-262-Seite der Ecma International verfügbar. ECMA-262 und ECMA-402 werden kontinuierlich gepflegt und aktualisiert von den Spezifikationseditoren; die TC39-Webseite hostet die neuesten, aktualisierten Versionen von ECMA-262 und ECMA-402.

Neue Sprachfunktionen, einschliesslich 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-Phasen-Prozess und wird in der Regel von JavaScript-Engines in Phase 3 oder Phase 4 implementiert und steht somit der Öffentlichkeit 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 der ECMAScript-Sprachspezifikation und ebenfalls von Ecma TC39 standardisiert. Die Internationalisierungs-API bietet Kollation (Zeichenfolgenvergleich), Zahlenformatierung und Datums- und Zeitformatierung für JavaScript-Anwendungen und ermöglicht es den Anwendungen, die Sprache zu wählen und die Funktionalität an ihre Bedürfnisse anzupassen. Der initiale Standard wurde im Dezember 2012 genehmigt; der Status der Implementierungen in Browsern wird in der Dokumentation des Intl-Objekts nachverfolgt. Heutzutage wird die Internationalisierungsspezifikation ebenfalls jährlich ratifiziert und die Browser verbessern ständig ihre Implementierung.

Es gibt eine Vielzahl von Möglichkeiten, wie Sie an der aktuellen Arbeit an der ECMAScript-Sprachspezifikation und der ECMAScript Internationalization API Specification 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
• ECMAScript spec discussion; aktuelle Mailingliste
• ECMAScript spec discussion; historische Mailinglisten-Archive (bis März 2021)

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

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 auf den Objekten adressiert und manipuliert werden. Der W3C standardisiert das Core Document Object Model, welches sprachenunabhängige Schnittstellen definiert, die HTML- und XML-Dokumente als Objekte abstrahieren, und auch Mechanismen zur Manipulation dieser Abstraktion definiert. Unter den Dingen, die vom DOM definiert sind, finden wir:

• Die Dokumentstruktur, ein Baum-Modell und die DOM-Event-Architektur im DOM-Core: Node, Element, DocumentFragment, Document, DOMImplementation, Event, EventTarget, …
• Eine weniger strenge Definition der DOM-Event-Architektur sowie spezifische Events in DOM-Events.
• Weitere Themen wie DOM-Traversierung und DOM-Bereich.

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

HTML, die Markup-Sprache des Webs, ist in Bezug auf das DOM spezifiziert. Über die abstrakten Konzepte definiert im DOM-Core 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; sie erfordert zum Beispiel, dass alle Kinder eines <ul>-Elements, welches eine ungeordnete Liste darstellt, <li>-Elemente sein müssen, da diese Listenelemente darstellen. Im Allgemeinen verbietet sie auch die Verwendung von Elementen und Attributen, die nicht in einem Standard definiert sind.

Suchen Sie das Document-Objekt, das Window-Objekt und die anderen DOM-Elemente? 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 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 ermöglichen eine Low-Level-bidirektionale Kommunikation.
• Das 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 —, aber sie implementieren in der Regel viele Web-APIs, wie fetch() und setTimeout().

JavaScript-Engines, die in aktuellen Webbrowsern verwendet werden, umfassen:

• Mozillas SpiderMonkey, verwendet in Firefox, Servo und Flow. Andere nicht-browserbezogene Verwendungen umfassen MongoDB, CouchDB und mehr. Dies war die erste je entwickelte JavaScript-Engine, erstellt von Brendan Eich bei Netscape.
• Googles V8, verwendet in Chrome und auf Chromium basierenden Browsern wie Opera, Edge und Brave. Andere nicht-browserbezogene 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-browserbezogene 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 auf 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, bevor es ein auf Chromium basierter Browser wurde.

Einige JavaScript-Engines, die speziell für nicht-browserbezogene Zwecke programmiert 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 aufgebaut auf GraalVM.
• Moddable XS, gedacht für IoT/Embedded-Systeme.
• QuickJS, gedacht, um klein und leichtgewichtig zu sein.

JavaScript-Engines bieten eine öffentliche API, 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 zu spiegeln.

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

Eine JavaScript-Shell ermöglicht es Ihnen, schnell JavaScript-Codefragmente 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, wie Perl oder Python.

• Node.js - Node.js ist eine Plattform zum einfachen Erstellen von schnellen, skalierbaren Netzwerk-Anwendungen.
• ShellJS - Portierbare 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 das Editieren von mehreren Zeilen unterstützt.
• Babel REPL - Eine browserbasierte REPL zum Experimentieren mit zukünftigen JavaScript-Versionen.
• TypeScript playground — Eine browserbasierte Spielwiese zum Experimentieren sowohl mit neuen JavaScript-Funktionen (über den tsc-Compiler) als auch mit TypeScript-Syntax.

Hilfreiche Werkzeuge zum Schreiben und Debugging Ihres JavaScript-Codes.

Firefox Entwicklerwerkzeuge

Webkonsole, JavaScript Profiler, Debugger und mehr.

Learn JavaScript

Eine exzellente Ressource für angehende Webentwickler — Lernen Sie JavaScript in einer interaktiven Umgebung, mit kurzen Lektionen und interaktiven Tests, guided by automated assessment. Die ersten 40 Lektionen sind kostenlos, und der komplette Kurs ist für eine kleine einmalige Zahlung erhältlich.

TogetherJS

Zusammenarbeit leicht gemacht. Durch das Hinzufügen von TogetherJS zu Ihrer Website können sich Ihre Nutzer 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-Webentwicklungs-Debugging-Tool zur Zusammenarbeit.

CodePen

CodePen ist ein weiteres Werkzeug zur kollaborativen Webentwicklung, das als Live-Ergebnis-Spielwiese verwendet wird.

StackBlitz

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

RunJS

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