Überblick über JavaScript-Technologien

Während HTML die Struktur und den Inhalt einer Webseite definiert und CSS das Format und das Erscheinungsbild festlegt, fügt JavaScript einer Webseite Interaktivität hinzu und erstellt umfangreiche Webanwendungen.

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

JavaScript, die Kernsprache (ECMAScript)

Die Kernsprache von JavaScript ist 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 synonym verwendet werden.

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

Was fällt unter den Geltungsbereich von ECMAScript?

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 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 von der ECMA-Generalversammlung genehmigt und als Standard veröffentlicht. Die gesamte Entwicklung ist ö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 allgemein nach 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 jeweils nächste Version bezieht. ESNext-Funktionen werden korrekterweise als Vorschläge bezeichnet, da die Spezifikation per Definition noch nicht finalisiert ist.

Der aktuelle, vom Komitee genehmigte Schnappschuss von ECMA-262 ist in PDF- und HTML-Format auf der ECMA-262-Sprachspezifikationsseite von Ecma International verfügbar. ECMA-262 und ECMA-402 werden kontinuierlich von den Spezifikationsherausgebern 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 normalerweise von JavaScript-Engines in Stufe 3 oder Stufe 4 implementiert und ist somit für die Öffentlichkeit zugänglich.

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

Internationalisierungs-API

Die ECMAScript Internationalization API Specification ist eine Ergänzung zur ECMAScript Language Specification, ebenfalls von Ecma TC39 standardisiert. Die Internationalisierungs-API bietet Sortierfunktionen (Zeichenfolgenvergleich), Zahlenformatierung und Datums- und Zeitformatierung für JavaScript-Anwendungen, sodass die Anwendungen die Sprache auswählen und die Funktionalität an ihre Bedürfnisse anpassen können. Der anfä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 die Browser verbessern ständig ihre Implementierung.

Verwandte Ressourcen

Es gibt verschiedene Möglichkeiten, wie Sie an der Arbeit an der ECMAScript-Sprachspezifikation und der ECMAScript Internationalization API Specification teilnehmen oder sie einfach verfolgen können:

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, um Objekte in HTML-, XHTML- und XML-Dokumenten zu repräsentieren und mit ihnen zu interagieren. Objekte im DOM-Baum können über Methoden an den Objekten adressiert und manipuliert werden. Heutzutage wird die DOM-Kern-Spezifikation von WHATWG gepflegt (die die Version des W3C überschreibt). Sie definiert sprachunabhängige Schnittstellen, die HTML- und XML-Dokumente als Objekte abstrahieren und auch Mechanismen zur Manipulation dieser Abstraktion definieren. Dies umfasst: Node, Element, DocumentFragment, Document, DOMImplementation, Event, EventTarget und mehr.

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

HTML DOM

HTML, die Markup-Sprache des Web, ist in Bezug auf das DOM spezifiziert. Über die abstrakten Konzepte, die im DOM-Kern definiert sind, hinaus, definiert HTML auch die Bedeutung von Elementen. Das HTML DOM umfasst Dinge wie die className-Eigenschaft bei HTML-Elementen oder APIs wie Document.body.

Die HTML-Spezifikation definiert auch Einschränkungen für Dokumente; sie verlangt beispielsweise, dass alle Kinder eines <ul>-Elements, das eine ungeordnete Liste darstellt, <li>-Elemente sind, da diese Listeneinträge darstellen. Im Allgemeinen verbietet sie auch die Verwendung von Elementen und Attributen, die nicht in einem Standard definiert sind.

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

Andere bemerkenswerte APIs

Nicht-browserbasierte Umgebungen (wie Node.js) haben oft keine DOM-APIs — da sie nicht mit einem Dokument interagieren —, aber sie implementieren normalerweise viele Web-APIs, wie fetch() und setTimeout().

JavaScript-Implementierungen

JavaScript-Engines, die in aktuellen Webbrowsern verwendet werden, sind unter anderem:

  • Mozillas SpiderMonkey, verwendet in Firefox, Servo und Flow. Andere nicht-browserbasierte Anwendungen umfassen MongoDB, CouchDB und mehr. Dies war die erste jeweils 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 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 Markenrechtsprobleme zu vermeiden). Frühere Versionen von Edge verwendeten eine andere JavaScript-Engine, verwirrenderweise auch Chakra, bevor es ein Chromium-basierter Browser wurde.

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

  • 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 auf GraalVM aufgebaut.
  • Moddable XS, für IoT/embedded Systeme vorgesehen.
  • QuickJS, vorgesehen, um klein und leichtgewichtig zu sein.

JavaScript-Engines bieten eine öffentliche API, die Anwendungsentwickler verwenden können, um JavaScript in ihre Software zu integrieren. Die bei weitem häufigste Host-Umgebung für JavaScript sind Webbrowser. Webbrowser verwenden typischerweise die öffentliche API, um Host-Objekte zu erstellen, die für die Spiegelung des DOM in JavaScript verantwortlich sind.

Eine weitere häufige 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 dynamisch Webseiten zu generieren. Node.js ist ein beliebtes Beispiel dafür.

Shells

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

Unabhängige 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 - Portable 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 Mehrzeilenbearbeitung unterstützt.
  • Babel REPL - Ein browserbasierter REPL, um mit zukünftigen JavaScript zu experimentieren.
  • TypeScript playground — Ein browserbasiertes Spielzimmer für Experimente 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 aufstrebende 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 kleine Einmalzahlung erhältlich.

TogetherJS

Zusammenarbeit leicht gemacht. Indem Sie TogetherJS zu Ihrer Website hinzufügen, können Ihre Nutzer sich gegenseitig 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 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-Collaborative-Web-Entwicklung-Fehlersuchwerkzeug.

CodePen

CodePen ist ein weiteres Kollaborationstool für Webentwicklung, das als Live-Resultat-Spielwiese genutzt wird.

StackBlitz

StackBlitz ist ein weiteres Online-Spielplatz-/Fehlersuchwerkzeug, das vollständige 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.