WährendHTML die Struktur und den Inhalt einer Webseite definiert undCSS das Format und das Aussehen festlegt, fügtJavaScript einer Webseite Interaktivität hinzu und ermöglicht die Erstellung von umfangreichen Webanwendungen.

Der Begriff "JavaScript" umfasst im Kontext eines Webbrowsers jedoch mehrere sehr unterschiedliche Elemente. Eines davon ist die Kernsprache (ECMAScript), ein anderes ist die Sammlung derWeb-APIs, einschließlich des DOM (Document Object Model).

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 inNode.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 benutzerdefinierterError-Typen)
• Typen (boolean, number, string, function, object, ...)
• Ein prototypenbasiertes Vererbungssystem
• Eingebaute Objekte und Funktionen, einschließlichJSON,Math,Array-Methoden,parseInt,decodeURI, usw.
• Strict mode
• EinModulsystem
• 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 derEcma 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 derECMA-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, aktuellenECMA-262 undECMA-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 einen4-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 imWikipedia-Eintrag zu ECMAScript.

Internationalisierungs-API

DieECMAScript 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 desIntl-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

DieWebIDL-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 imDOM-Baum können durch Methoden an den Objekten angesprochen und manipuliert werden. Heutzutage wird dieDOM-Core-Spezifikation vonWHATWG verwaltet (und ersetzt dieW3C-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 dieBedeutung von Elementen. Das HTML DOM umfasst solche Dinge wie dieclassName-Eigenschaft auf HTML-Elementen oder APIs wieDocument.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 demDocument-Objekt, demWindow-Objekt und den anderen DOM-Elementen? Lesen Sie dieDOM-Dokumentation.

Weitere bemerkenswerte APIs

• Die FunktionensetTimeout() undsetInterval() wurden zuerst auf derWindow-Schnittstelle im HTML-Standard spezifiziert.
• XMLHttpRequest ermöglicht das Senden asynchroner HTTP-Anfragen.
• DieFetch API bietet eine ergonomischere Abstraktion für Netzwerk-Anfragen.
• DasCSS 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>.
• DieWebAssembly-Schnittstelle bietet Werkzeuge zur Kommunikation zwischen JavaScript-Code undWebAssembly-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() undsetTimeout().

JavaScript-Implementierungen

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

• MozillasSpiderMonkey, 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.
• GooglesV8, verwendet in Chrome und Chromium-basierten Browsern wie Opera, Edge und Brave. Andere nicht-browserbasierte Anwendungen umfassenNode.js,Deno,Electron und mehr.
• ApplesJavaScriptCore (auch bekannt als SquirrelFish/Nitro), verwendet in Safari und anderen WebKit-basierten Browsern. Andere nicht-browserbasierte Anwendungen umfassenBun.
• LibJS, verwendet inLadybird.

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

• Carakan, verwendet in Opera, bevor es ein Chromium-basierter Browser wurde.
• MicrosoftsChakra, 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 ebenfallsChakra, 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.
• MetasHermes, optimiert fürReact Native.
• MozillasRhino, in Java geschrieben.
• OraclesGraalJS, 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, umHost-Objekte zu erstellen, die dafür verantwortlich sind, dasDOM 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 eineeingebaute JavaScript-Konsole, die die Bearbeitung über mehrere Zeilen unterstützt.
• Babel REPL - Ein browserbasiertesREPL, 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.