央视新闻节目聚焦十三届全国人大一次会议重要议程

JavaScript
百度 谁能比我惨！勇士队客场以75-89不敌马刺，在库里、杜兰特和汤普森休战的情况下，球队的唯一全明星格林也在第二节因伤离场，他们在最后一节还领先4分的情况下遭遇痛揍，这样的残阵实在有点让人心酸。 // Beispiel JavaScript function halloWelt() { alert('Hello World'); } window.addEventListener('load', halloWelt);
Basisdaten
Paradigmen:	multiparadigmatisch
Erscheinungsjahr:	1995
Designer:	Brendan Eich
Entwickler:	Brendan Eich
Aktuelle Version:	ECMAScript 2023  (Juni 2023)
Typisierung:	schwach, dynamisch, duck
Wichtige Implementierungen:	SpiderMonkey, Rhino, JavaScriptCore, V8
Beeinflusst von:	Self, C, Scheme, Perl, Python, Java, Lua
Beeinflusste:	ActionScript, Haxe, CoffeeScript, Dart, TypeScript
Lizenz:	BSD
www.ecma-international.org/publications-and-standards/standards/ecma-262/

JavaScript (kurz JS) ist eine Skriptsprache, die ursprünglich 1995 von Netscape für dynamisches HTML in Webbrowsern entwickelt wurde, um Benutzerinteraktionen auszuwerten, Inhalte zu ver?ndern, nachzuladen oder zu generieren und so die M?glichkeiten von HTML zu erweitern. Heute wird JavaScript auch au?erhalb von Browsern angewendet, etwa auf Servern und in Microcontrollern.

Der heutige Name der ursprünglich LiveScript genannten Sprache entstand 1996 aus einer Kooperation von Netscape mit Sun Microsystems. Deren Java-Applets, erstellt mit der gleichfalls 1995 ver?ffentlichten Programmiersprache Java, wurden mithilfe von LiveScript in den Netscape Navigator integriert. Um die Popularit?t von Java zu nutzen, wurde LiveScript in JavaScript umbenannt, obwohl die beiden Sprachen voneinander unabh?ngig entwickelt wurden und v?llig unterschiedliche Grundkonzepte aufweisen.

Der als ECMAScript (ECMA 262) standardisierte Sprachkern von JavaScript beschreibt eine dynamisch typisierte, objektorientierte, aber klassenlose Skriptsprache. Sie wird allen objektorientierten Programmierparadigmen unter anderem auf der Basis von Prototypen gerecht, deren Deklaration ab ECMAScript 6 mit einer Syntax erm?glicht wird, wie sie ?hnlich auch bei klassenbasierten Programmiersprachen üblich ist. In JavaScript l?sst sich je nach Bedarf objektorientiert, prozedural oder funktional programmieren.

Entwicklung

Die Syntax von JavaScript ?hnelt C-Abk?mmlingen. Trotz der Namens- und syntaktischen ?hnlichkeit hat JavaScript nur geringe Gemeinsamkeiten mit Java. So wird in JavaScript Vererbung nicht durch Klassen, sondern durch Prototypen unterstützt.

JavaScript wurde früher haupts?chlich clientseitig eingesetzt. JavaScript bzw. die ECMAScript-Implementierungen erm?glichen aber beispielsweise mit dem Framework Node.js und als JScript bzw. JScript .NET in einer ASP- bzw. ASP.NET-Umgebung auf Microsoft Internet Information Services auch serverseitige Anwendungen. Weitere Beispiele für serverseitige JavaScript-Programmierung sind POW und Jaxer, die auf der Mozilla-JavaScript-Engine SpiderMonkey aufsetzen, V8CGI, welches auf der JavaScript-Implementierung V8 aufbaut und in den Apache HTTP Server integriert wird, sowie QML, eine erweiterte Form von JavaScript zum Zeichnen von Oberfl?chen und Animationen.

Die Sprache wird auch als Skriptsprache für Spiele und Anwendungsprogramme eingesetzt, da der Sprachkern nur wenige Objekte enth?lt und dadurch der zur Ausführung von in JavaScript formulierten Skripten erforderliche Interpreter relativ klein gehalten werden kann.

Au?erdem wird JavaScript als Verkehrssprache in der Datenbank MongoDB sowie in Microcontrollern eingesetzt.

Verwendung

Typische Anwendungsgebiete

Typische Anwendungsgebiete von JavaScript im Webbrowser sind:

• dynamische Manipulation von Webseiten über das Document Object Model
• Plausibilit?tsprüfung (Datenvalidierung) von Formulareingaben noch vor der übertragung zum Server
• Anzeige von Dialogfenstern
• Senden und Empfangen von Daten, ohne dass der Browser die Seite neu laden muss (Ajax)
• Vorschlagen von Suchbegriffen w?hrend der Eingabe
• Werbebanner oder Laufschriften
• Verschleierung von E-Mail-Adressen zur Bek?mpfung von Spam
• mehrere Frames auf einmal wechseln oder die Seite aus dem Frameset l?sen
• Schreib- und Lesezugriff auf Cookies und den Web Storage innerhalb des Browsers

Missbrauch

Einige Anwendungen, die mit JavaScript m?glich sind, agieren teilweise gegen den Wunsch des Benutzers oder widersprechen dem Prinzip der geringsten überraschung. Einige Browser bieten daher Funktionen an, die derartige JavaScript-Funktionen unterdrücken.

Beispiele:

Hinweis im Firefox-Browser bei vielen Dialogfenstern

• Verschleiern der Internetadresse, auf die ein gegebener Link verweist
• Deaktivieren des Kontextmenüs, um zu erschweren, dass Bilder oder die gesamte Seite abgespeichert werden k?nnen
• Deaktivieren der Kopierfunktion, um zu erschweren, dass Texte oder Bilder kopiert werden k?nnen
• Unaufgeforderte (Werbe-)Pop-ups oder Pop-unders oder aufeinanderfolgende Dialogfenster, die den Benutzer behindern
• Ungewolltes Schlie?en des Browserfensters
• Ungewollte Gr??en?nderung des Browserfensters
• Barrierearme Webseiten zeichnen sich dadurch aus, dass sie auch bei abgeschaltetem JavaScript m?glichst uneingeschr?nkt nutzbar bleiben. Teilweise schr?nkt das deaktivierte JavaScript die Benutzbarkeit einer Webseite ein.
• Ma?nahmen, die an den Sicherheitseinstellungen des Browsers vorbei ein Wiedererkennen eines Benutzers bei einem sp?teren Besuch einer Website erlauben (siehe Anonymit?t im Internet)
• Bei anf?lligen Webanwendungen kann JavaScript auch von Dritten missbraucht werden, etwa per XSS (Codeeinschleusung).

Geschichte

Am 18. September 1995 ver?ffentlichte Netscape mit der Vorversion des Navigators 2.0 einen Browser mit einer eingebetteten Skriptsprache, die zu diesem Zeitpunkt LiveScript hie? und von Brendan Eich entwickelt worden war. Die Sprache konnte u. a. Formulareingaben des Benutzers vor dem Absenden überprüfen. Am 4. Dezember 1995 verkündeten Netscape und Sun Microsystems eine Kooperation, die die Interaktion von LiveScript direkt mit Java-Applets zum Ziel hatte. Sun entwickelte die n?tigen Java-Klassen, Netscape die Schnittstelle LiveConnect und benannte die Sprache in JavaScript um (JavaScript 1.0). JavaScript ist seit der übernahme von Sun Microsystems eine Marke des Unternehmens Oracle.

Mit der ersten Beta-Version des Navigators 3.0 führte Netscape am 29. April 1996 JavaScript 1.1 ein. In selbiger Version gab es die Neuerungen, auf Bilder zugreifen und sogenannte Rollover-Grafiken erstellen zu k?nnen. LiveConnect war jetzt fester Bestandteil des Browsers. Mit der Beta-Version des Internet Explorers 3 stellte Microsoft im Mai 1996 seinen ersten JScript-f?higen Browser vor. Dies war der Beginn des Browserkriegs.

Mit der Ankündigung des Netscape Communicators wurde JavaScript 1.2 am 15. Oktober 1996 ver?ffentlicht; der Netscape Communicator 4.0 mit JavaScript 1.2 erschien jedoch erst am 4. Juni 1997. Ebenfalls im Juni 1997 ver?ffentlichte die European Computer Manufacturers Association ihren Standard ECMA-262 (ECMAScript), der zusammen mit Netscape entwickelt worden war und die Grundelemente einer Skriptsprache standardisieren sollte. Diese wurde im April 1998 zur ISO-Norm ISO/IEC 16262:1998 Information technology – ECMAScript language specification. Am 1. Oktober 1997 kam der Internet Explorer 4 heraus, der den Sprachumfang von JavaScript 1.1 abdeckte. Darüber hinaus wurden eigene Erweiterungen ver?ffentlicht, die zu Kompatibilit?tsunterschieden zwischen Navigator und Internet Explorer führten und eine DOM-?hnliche Syntax zur Verfügung stellten, die es erm?glichte, auf alle Elemente der Webseite zuzugreifen und diese beliebig ver?ndern zu k?nnen.

Der in Java implementierte JavaScript-Interpreter Rhino wurde ab Version 6.0 als Teil der Java-Laufzeitumgebung standardm??ig mitgeliefert. Im Juli 1998 wurde mit der Beta-Version des Netscape Communicators 4.5 JavaScript 1.3, welche schon in der Version 4.06 des Netscape Communicators vorhanden war, ver?ffentlicht. Im Oktober 1998 stellte Netscape JavaScript 1.4 vor. Diese Version war vollst?ndig kompatibel mit ECMA-262. Ein Browser mit der Unterstützung dieser Version erschien jedoch nicht. Im April 2000 kam mit der Preview Release 1 des Navigators 6 JavaScript 1.5 und DOM Level 1. Am 5. Juni 2002 erschien Mozilla 1.0 mit JavaScript 1.5 (JavaScript in der Version 1.5 entspricht ECMA-262 Version 3), am 29. November 2005 Mozilla Firefox 1.5 mit JavaScript 1.6, am 12. Juli 2006 Mozilla Firefox 2.0b1 mit JavaScript 1.7 und am 18. Dezember 2007 Mozilla Firefox 3.0b2 mit JavaScript 1.8.

Versionsgeschichte von JavaScript

Versionsgeschichte

Version	Ver?ffentlichung	Entsprechung	Netscape Navigator	Mozilla Firefox	Internet Explorer	Opera	Safari	Google Chrome
?ltere Version; nicht mehr unterstützt: 1.0.0	M?rz 1996		2.0		3.0
?ltere Version; nicht mehr unterstützt: 1.1.0	August 1996		3.0
?ltere Version; nicht mehr unterstützt: 1.2.0	Juni 1997		4.0–4.05
?ltere Version; nicht mehr unterstützt: 1.3.0	Oktober 1998	ECMA-262 1st edition / ECMA-262 2nd edition	4.06–4.7x		4.0
?ltere Version; nicht mehr unterstützt: 1.4.0			Netscape Server
?ltere Version; nicht mehr unterstützt: 1.5.0	November 2000	ECMA-262 3rd edition	6.0	1.0	5.5 (JScript 5.5) 6 (JScript 5.6) 7 (JScript 5.7) 8 (JScript 6)	6.0 7.0 8.0 9.0
?ltere Version; nicht mehr unterstützt: 1.6.0	November 2005	1.5 + Array extras + Array & String generics + E4X		1.5			3.0 3.1
?ltere Version; nicht mehr unterstützt: 1.7.0	Oktober 2006	1.6 + Pythonic generators + Iterators + let + destructuring assignments		2.0			3.2 4.0	1.0
?ltere Version; nicht mehr unterstützt: 1.8.0	Juni 2008	1.7 + Generator expressions + Expression closures		3.0
?ltere Version; nicht mehr unterstützt: 1.8.1	Juni 2009	1.8 + geringfügige Updates		3.5
Aktuelle Version: 1.8.2	Januar 2010	1.8.1 + geringfügige Updates		3.6
Aktuelle Version: 1.8.5	Juli 2010	1.8.1 + ECMAScript 5 Compliance		4	9.0 (JScript 9.0)

Versionsgeschichte von ECMAScript (ECMA-262)

Die aktuelle Version ist die Version 2022, die im Juni 2022 als ?ECMAScript 2022“ ver?ffentlicht wurde. Dieser sollen j?hrliche Updates folgen. Die Entwicklung der Standards erfolgt auf GitHub.

Version	publiziert am	Unterschiede zur Vorg?ngerversion	Editor
?ltere Version; nicht mehr unterstützt: 1	Juni 1997	erste Version	Guy L. Steele, Jr.
?ltere Version; nicht mehr unterstützt: 2	Juni 1998	?nderungen zwecks Kompatibilit?t zum internationalen Standard ISO/IEC 16262	Mike Cowlishaw
?ltere Version; nicht mehr unterstützt: 3	Dez. 1999	Neu sind regul?re Ausdrücke, bessere Verarbeitung von Zeichenketten, Kontrollfluss, Fehlerbehandlung mit try/catch, bessere Fehlerbehandlung, bessere Formatierung bei der Ausgabe von Zahlen usw.	Mike Cowlishaw
?ltere Version; nicht mehr unterstützt: 4	abgebrochen	Wegen Uneinigkeit in Bezug auf die Zukunft der Sprache wurde die weitere Entwicklung des komplexen Entwurfes zu ECMAScript 4 eingestellt. Einige Ideen werden in ES6 wieder aufleben.
?ltere Version; nicht mehr unterstützt: 5	Dez. 2009	Im ?strict mode“ wird eine erweiterte Fehlerprüfung eingeschaltet. Unklare Sprachkonstrukte von ECMAScript 3 werden entsch?rft und neue Features wie getter- und setter-Methoden, Unterstützung von JSON usw. hinzugefügt.	Pratap Lakshman, Allen Wirfs-Brock
?ltere Version; noch unterstützt: 5.1	Juni 2011	Entspricht dem internationalen Standard ISO/IEC 16262:2011, Version 3	Pratap Lakshman, Allen Wirfs-Brock
?ltere Version; noch unterstützt: 2015	Juni 2015	Neue Syntax für komplexe Applikationen wie Klassen und Module, die aber mit ?hnlicher Terminologie wie in ECMAScript 5 (strict mode) definiert werden k?nnen. Neue Sprachbestandteile wie for/of-Schleifen, teilweise an Python angelehnte Syntax usw. Der Codename lautet “Harmony” und wurde bis kurz vor Verabschiedung als ?ECMAScript 6“ bezeichnet, also ?ES6“.	Allen Wirfs-Brock
?ltere Version; noch unterstützt: 2016	Juni 2016	** (Potenzfunktion), Array.prototype.includes, diverse Anpassungen an Generatoren, destruktiven Zuweisungen	Brian Terlson
?ltere Version; noch unterstützt: 2017	Juni 2017	async/await, diverse Object-Funktionen	Brian Terlson
?ltere Version; noch unterstützt: 2018	Juni 2018	global, import(), Rest/Spread Properties, for-await-of (Asynchronous Iterators), String-Padding, …	Brian Terlson
?ltere Version; noch unterstützt: 2019	Juni 2019	Array#{flat,flatMap}, Object.fromEntries, String#{trimStart,trimEnd}, Symbol#description, …	Brian Terlson, Bradley Farias, Jordan Harband
?ltere Version; noch unterstützt: 2020	Juni 2020	String.matchAll, BigInt, import(), …	Jordan Harband, Kevin Smith
?ltere Version; noch unterstützt: 2021	Juni 2021	String.prototype.replaceAll, WeakRefs, Logical Assignment Operators, …	Jordan Harband, Shu-yu Guo, Michael Ficarra, Kevin Gibbons
?ltere Version; noch unterstützt: 2022	Juni 2022	Private Methoden und Felder in Klassen, Statische Initialisierungs-Bl?cke in Klassen, await au?erhalb von async-Funktionen, …	Shu-yu Guo, Michael Ficarra, Kevin Gibbons
Aktuelle Version: 2023	Juni 2023	Hashbang-Grammar, Symbole für WeakMaps, neue Array-Funktionen

Sicherheit

Sandbox-Prinzip

JavaScript wird im Browser in einer sogenannten Sandbox ausgeführt. Dies soll bewirken, dass man in JavaScript nur Zugriff auf die Objekte des Browsers hat und nicht auf das Dateisystem zugreifen kann. Eine Ausnahme stellt der Lesezugriff auf eine Datei dar, die per Dateiauswahl-Dialog, gestartet mit dem HTML-Element <input type="file">, vom Benutzer ausgew?hlt wurde.

Um Sicherheitsprobleme wie das sogenannte Cross-Site-Scripting zu verhindern, wird jede Website oder Webanwendung innerhalb des Browsers isoliert ausgeführt und ein Datenaustausch unterbunden. Ohne diesen Schutz w?re es m?glich, über eine Seite Schadcode auszuführen, der beispielsweise Bank- oder Logindaten in anderen parallel ge?ffneten Browserfenstern ausliest oder manipuliert.

Auch bestimmte sicherheitsrelevante Browserfunktionen wie das Schlie?en des Browserfensters, das Aus- und Einblenden von Symbolleisten, das ?ndern der Browserstartseite, der Zugriff auf die Zwischenablage oder das Auslesen der zuletzt besuchten Webseiten des Anwenders werden durch obligatorische Nutzereingaben geschützt.

Standardm??ig wird ein Skript innerhalb eines Browsers in Form eines einzigen Threads ausgeführt. Warteschleifen oder lange Berechnungen sind daher in JavaScript-Programmen zu vermeiden. Mit Worker-Objekten ist es m?glich, weitere Threads zu erzeugen.

Deaktivieren von JavaScript

In vielen JavaScript-f?higen Browsern l?sst sich JavaScript abschalten oder lassen sich einzelne Aktionen wie die ?nderung des Textes in der Statusleiste oder die Manipulation von Browserfenstern deaktivieren. Dies kann bei einigen Browsern mittels Erweiterungen, die JavaScript anhand von White- und Blacklists gezielt auf Seiten ein- und ausschalten, auch automatisiert werden. Daher k?nnen sich Entwickler nicht darauf verlassen, dass JavaScript-Programme sich in jeder Umgebung gleich verhalten bzw. überhaupt funktionieren.

Siehe auch: Unobtrusive JavaScript

Sprachelemente

Datentypen

JavaScript ist dynamisch typisiert. Das bedeutet, dass die Zuweisung von Werten an Variablen keinen typbasierten Einschr?nkungen unterliegt. Allerdings gibt es diverse Erweiterungen von JavaScript, die eine statische Typisierung optional beziehungsweise zwingend erfordern, zum Beispiel TypeScript von Microsoft.

Aufgrund der dynamischen Typisierung ist der Datentyp keine Eigenschaft einer Variablen, sondern Laufzeit-bezogen die Eigenschaft ihres aktuellen Wertes (oder auch die Eigenschaft eines Literals). Der Datentyp eines Wertes l?sst sich mit dem un?ren Operator typeof ermitteln.

Primitive Datentypen

Zu den primitiven Datentypen in JavaScript geh?ren Zahlen, Zeichenketten, boolesche Werte, Symbole, null und undefined.

• Numerische Werte k?nnen entweder den Typ Number (angezeigt durch typeof als "number") oder BigInt haben (angezeigt durch typeof als "bigint"). W?hrend der Datentyp Number für Gleitkommazahlen verwendet wird, erm?glicht der Datentyp BigInt die Darstellung ganzer Zahlen beliebiger Gr??e, die den Bereich überschreiten, den Number abdecken kann.
• Zeichenketten haben den Typ String (angezeigt durch typeof als "string").
• Boolesche Werte haben den Typ Boolean (angezeigt durch typeof als "boolean")
• Symbole haben den Typ Symbol (angezeigt durch typeof als "symbol") und fungieren als eindeutige Identifikatoren, werden jedoch seltener verwendet.
• Der Typ Null hat nur den Wert null (typeof liefert "object", was historisch bedingt ist).
• Der Typ Undefined hat nur den Wert undefined (typeof liefert "undefined").

Nicht primitive Datentypen

Funktionen sind kein primitiver Typ (typeof liefert "function"). Für alle anderen Werte – regul?re Ausdrücke, Arrays und den Wert null inbegriffen – liefert typeof den Zeichenketten-Wert "object" zurück. Es ist zu beachten, dass null ein primitiver Datentyp ist, auch wenn typeof für null aus historischen Gründen den Wert "object" liefert. Im Gegensatz zu anderen Programmiersprachen gibt es in JavaScript keine echten assoziativen Arrays.

Objekte, die durch die vordefinierten Konstruktorfunktionen String(), Number() und Boolean() erzeugt werden, verhalten sich ?hnlich wie Werte der entsprechenden primitiven Datentypen. Allerdings gibt der typeof-Operator für solche Objekte den Wert "object" zurück. Diese Art von Objekten wird als Wrapper-Objekte bezeichnet. Für den Datentyp Symbol existiert keine gleichnamige Konstruktorfunktion. Im Folgenden finden wir ein Beispiel einer Variablen und dem entsprechenden Wrapper-Objekt:

let simpleString = "Beispieltext";
// Die Funktion "alert" gibt das Ergebnis "string" in einem Fenster aus.
alert(typeof simpleString);

let stringObject = new String("Beispieltext");
alert(typeof stringObject); // ergibt "object"

Umgekehrt werden Werte der primitiven Typen Number, Boolean und String bei Bedarf automatisch in Objekte der entsprechenden Konstruktorfunktion umgewandelt:

let simpleString = "Beispieltext";
alert(simpleString.length); // ergibt 12

In diesem Beispiel wird die Eigenschaft length aufgerufen, obwohl simpleString ein primitiver String ist. JavaScript wandelt automatisch den primitiven String in ein tempor?res String-Objekt um, um die Eigenschaft length abzurufen.

Kontrollstrukturen

JavaScript kennt die üblichen Kontrollstrukturen. Sollen diese mehr als eine Anweisung enthalten, so muss ein in geschweifte Klammern eingeschlossener Block eingesetzt werden. Anweisungen werden mit einem Semikolon abgeschlossen. Dies ist aber in den meisten F?llen optional; durch die automatic semicolon insertion wird es meist automatisch erg?nzt.

if-else (Bedingte Anweisung)

if (bedingung) {
    anweisungen;
} else {
    anweisungen;
}

Kurzschreibweise für bedingte Wertzuweisungen:

variable = bedingung ? wertWennWahr : wertWennFalsch;

switch-Kontrollstruktur

switch (variable) {
    case wert1:
        anweisungen;
        break;
    case wert2:
        anweisungen;
        break;
    default:
        anweisungen;
}

while-Schleife

while (bedingung) {
    anweisungen;
}

do-while-Schleife

do {
    anweisungen;
} while (bedingung);

for-Schleife

for (startausdruck; bedingung; iterationsausdruck) {
    anweisungen;
}

for … in-Schleife

Mit dieser Anweisung werden alle eigenen und ererbten Eigenschaften eines Objektes durchlaufen, die das interne Attribut Enumerable aufweisen. Dieses Attribut wurde in ECMA Script 5 eingeführt und ist für bestimmte eingebaute Eigenschaften (wie z. B. die Funktion toString des Prototyps Object) nicht gesetzt, es kann allerdings im Regelfall vom Benutzer gesetzt (und entfernt) werden. Bei jedem Schleifendurchgang wird einer angegebenen Variable der Eigenschaftsname zugewiesen.

for (let eigenschaftsname in objekt) {
    anweisungen;
}

for … of-Schleife

Diese Kontrollstruktur funktioniert wie eine for … in-Schleife, mit dem Unterschied, dass hier der angegebenen Variable nicht der Eigenschaftsname, sondern der Eigenschaftswert zugewiesen wird.

for (let wert of objekt) {
    anweisungen;
}

Variablen

Variablen sollten in JavaScript mit let oder var deklariert werden und sind dann innerhalb des Scopes gültig, in dem sie deklariert wurden, wobei let den Scope weiter eingrenzt als var. Verwendet man Variablen ohne sie vorher explizit zu deklarieren, werden diese implizit als Eigenschaften des globalen Objekts (im Browser window) deklariert; dieses Verhalten kann man durch die Anweisung "use strict"; unterbinden. Eine Besonderheit von JavaScript ist das Hoisting von Variablen, das dafür sorgt, dass s?mtliche in einem Codeabschnitt deklarierten Variablen und Funktionen bei der Abarbeitung automatisch direkt an den Anfang vorgezogen werden (nur die Deklaration, nicht aber deren Wertzuweisung).

Geltungsbereich von Variablen

In JavaScript gibt es globale und lokale Variablen abh?ngig davon, wo sie deklariert werden und wie sie verwendet werden.

• Globale Variablen:

Variablen, die au?erhalb von Funktionen deklariert werden, sind global gültig. Im Browser bedeutet global, dass solche Variablen auf der gesamten Webseite und in allen aktiven JavaScript-Dateien zug?nglich sind. Dies kann zu unerwünschten Nebeneffekten führen, insbesondere wenn andere Skripte wie Drittanbieter-Plugins, Web Analytics oder Werbebannern eingebunden sind. Daher sollten globale Variablen nach M?glichkeit vermieden werden.

let explicit; // Explizite Deklaration einer globalen Variable
explicit = "explizit deklariert"; // Definition einer globalen Variable
console.log(explicit); // Ausgabe: explizit deklariert

Implizit deklarierte Variablen sind immer global. Auch wenn eine Variable innerhalb einer Funktion implizit ohne let oder var deklariert wurde, wird sie automatisch zu einer globalen Variable.

function foo() {
    implicit = "implizit deklariert"; // Definition einer globalen Variable
}

foo();
console.log(implicit); // Ausgabe: implizit deklariert

Eine implizit deklarierte Variable wird automatisch zu einer Eigenschaft des globalThis-Objekts. Das trifft bei explizit deklarierten globalen Variablen nicht zu.

console.log(globalThis.implicit); // Ausgabe: implizit deklariert
console.log(typeof globalThis.explicit); // Ausgabe: undefined

• Lokaler Geltungsbereich:

Variablen, die innerhalb von Funktionen deklariert oder als Funktionsparameter verwendet werden, haben einen lokalen Geltungsbereich. Das bedeutet, dass sie nur innerhalb der Funktion sichtbar und zug?nglich sind.

function bar(parameter) { // Deklaration eines Funktionsparameters
    let variable = "lokale Variable" // Deklaration einer lokalen Variablen

    console.log(parameter);
    console.log(variable); // Ausgabe: lokale Variable
}

bar("lokaler Parameter");
console.log(typeof parameter); // Ausgabe: undefined
console.log(typeof variable); // Ausgabe: undefined

Konstanten

Konstanten sollen mit const deklariert werden, bei der Initialisierung muss ihnen ein Wert zugewiesen werden. Für den Gültigkeitsbereich gelten dieselben Bedingungen wie bei Variablendeklarationen mit let. Konstanten k?nnen nicht durch erneute Zuweisung ver?ndert werden, allerdings k?nnen – wenn es sich bei der Konstanten um Objekte handelt – einzelne Eigenschaften der Konstanten ge?ndert werden.

Funktionen

In JavaScript sind Funktionen vollwertige Objekte mit eigenen Methoden und Eigenschaften. Sie k?nnen erstellt, überschrieben, als Argumente an andere Funktionen übergeben und von diesen erzeugt und zurückgegeben werden.

Im letzteren Fall entsteht eine Closure, auch Funktionsabschluss genannt, die beispielsweise Datenkapselung erm?glicht:

function createGreeting(name) {
    let message = "Hallo, " + name + "!";

    return function() {
        return message;
    };
}

// 'greetAda' ist eine Funktion, die von 'createGreeting' zurückgegeben wird
let greetAda = createGreeting("Ada Lovelace");
console.log(greetAda()); // Ausgabe: Hallo, Ada Lovelace!

// 'greetAlan' ist eine Funktion, die von 'createGreeting' zurückgegeben wird
let greetAlan = createGreeting("Alan Turing");
console.log(greetAlan()); // Ausgabe: Hallo, Alan Turing!

// Der Zugriff auf den Wert 'message' ist von au?en nicht m?glich
console.log(typeof message); // Ausgabe: undefined

Nicht jedes Argument einer Funktion muss beim Aufruf angegeben werden. Fehlende Argumente erhalten den Wert undefined. Seit ECMAScript 2015 k?nnen Parameter auch mit Standardwerten definiert werden. Au?erdem erm?glicht das arguments-Objekt den Zugriff auf die Argumente innerhalb der Funktion.

Erzeugung

Es gibt mehrere M?glichkeiten, in JavaScript Funktionen zu erzeugen:

• Funktionsdeklarationen (?Function Declarations“):

function f(x, y) {
    return x + y;
}

• Funktionsausdrücke (?Function Expressions“):

let f = function(x, y) {
    return x + y;
};

• Sofort ausgeführte Funktionsausdrücke (?Immediately-Invoked Function Expressions“):

Anonyme Funktionen k?nnen auch direkt ausgeführt werden, ohne sie vorher einer Variable zuzuweisen. Das kann zur Kapselung des Gültigkeitsbereichs von Variablen verwendet werden.

(function(x, y) {
    return x + y;
})(2, 3);

• Benannte Funktionsausdrücke (?Named Function Expressions“):

Der Variablen f wird eine Funktion mit Bezeichner g zugewiesen. Au?erhalb der Funktion ist sie mit f ansprechbar, innerhalb mit f und g.

let f = function g(x, y) {
    return x + y;
};

• Funktionskonstruktor (?Function Constructors“):

let f = new Function('x', 'y', 'return x + y;');

• Pfeilfunktionen (?Arrow Functions“):

Die runden Klammern sind optional, falls die Funktion genau ein Argument hat. Werden die geschweiften Klammern weggelassen, muss man genau einen Ausdruck ohne return als Rückgabewert angeben. Mit geschweiften Klammern kann man beliebigen Code angeben, muss aber für Rückgabewerte return verwenden.

(x, y) => x + y;
(x, y) => { return x + y; };
x => x + 1;
x => { return x + 1; };

// Eine so erzeugte Funktion kann man natürlich auch einer Variablen zuweisen
let f = (x, y) => x + y;

Beispiel

Eine funktionale und rekursive Implementierung des Euklidischen Algorithmus mit zwei Argumenten sieht folgenderma?en aus:

function euklid(a, b) {
    if (b === 0)
        return a;

    return euklid(b, a % b);
}

Implementierung des Euklidischen Algorithmus mit beliebig vielen Argumenten durch Reduzierung von numbers auf einen einzigen Wert, indem jeweils zwei Elemente von links nach rechts mit euklid ausgewertet werden:

function ggT(...numbers) {
    let reduce = 0;

    for (element of numbers)
        reduce = euklid(element, reduce);

    return reduce;
}

console.log(ggT());           // 0
console.log(ggT(4));          // 4
console.log(ggT(24, 36, 84)); // 12

Implementierung des Euklidischen Algorithmus mit partieller Anwendung:

function ggT(reduce) {
    if (reduce === undefined)
        return 0;

    return function(element) {
        if (element === undefined)
            return reduce;

        return ggT(euklid(element, reduce));
    };
}

console.log(ggT());             // 0
console.log(ggT(4)());          // 4
console.log(ggT(24)(36)(84)()); // 12

Objekte

Objekte in JavaScript bestehen aus Eigenschaften, die als Name/Wert-Paar realisiert werden. Dabei wird nicht zwischen Attributen und Methoden des Objektes unterschieden (eine Eigenschaft, deren Wert den Typ Function besitzt, fungiert als Methode). Jedes Objekt – auch durch Literale erzeugte Objekte – erbt vom Prototyp des globalen Objekt-Konstruktors.

Vordefinierte Objekte

JavaScript kennt mehrere eingebaute Objekte und Objekttypen, die im Standard ECMAScript definiert sind. Dabei wird ein Objekttyp durch eine namensgleiche Konstruktorfunktionen repr?sentiert, die zur Erzeugung von Objekten des entsprechenden Typs verwendet werden kann und zugleich einen Verweis auf den Prototyp des Objekttyps beinhaltet.

• Das namenlose globale Objekt, das alle Variablen und Objekte enth?lt.
• Der Objekttyp Object, von dem alle Objekte abgeleitet sind.
• Der Objekttyp Function von Funktionen.
• Der Objekttyp Array von Arrays.
• Der Objekttyp String von Zeichenketten.
• Der Objekttyp Boolean von boolesche Variablen.
• Der Objekttyp Number von Zahlen (64-Bit-Gleitkommazahlen gem?? IEEE 754).
• Der Objekttyp Date für Datumsformate (Daten bzw. Zeitpunkte).
• Der Objekttyp RegExp für regul?re Ausdrücke.
• Der Objekttyp Error zur Charakterisierung (und ggf. nachfolgenden Ausl?sung mittels throw) von Laufzeitfehlern.
• Das Objekt Math stellt Konstanten und Methoden für mathematische Operationen bereit.
• Das Objekt JSON stellt zwei Methoden für die Serialisierung von Objekten ins JSON-Format und umgekehrt bereit.
• Das Objekt Reflect stellt Methoden für die Ermittlung und ?nderung der Metadaten eines Objekts bereit.

Weitere Objekte, die beim clientseitigen JavaScript verwendet werden, entstanden historisch vor allem durch die Netscape-Spezifikationen (window, document usw.). Das window-Objekt selbst ist dabei de facto das globale Objekt, indem einfach einer Variablen window das globale Objekt zugewiesen wurde. Zahlreiche Unterobjekte von document wurden mittlerweile durch DOM HTML standardisiert (title, images, links, forms usw.). Aktuelle Browser unterstützen zudem DOM Core und andere W3C-DOM-Standards sowie Erweiterungen von Microsoft JScript.

Zugriff auf Objekteigenschaften und -methoden

Eigenschaften von Objekten (auch Methoden sind Eigenschaften) k?nnen wie folgt angesprochen werden:

Punkt-Notation (mit statischen Bezeichnern)

objekt.eigenschaft;

objekt.methode(parameter1, parameter2);

Klammer-Notation (mit dynamischen Bezeichnern)

objekt["eigenschaft"];

objekt["methode"](parameter1, parameter2);

// Eigenschaftsname, der in Punktnotation illegal w?re
objekt["methode 1"]();

// So k?nnen auch alle Eigenschaften des Objekts durchlaufen werden
for (let eigenschaftsName in objekt) {
    console.log(eigenschaftsName, " = ", objekt[eigenschaftsName]);
}

Zu allen Objekten k?nnen zur Laufzeit neue Eigenschaften hinzugefügt oder mit delete bestehende entfernt werden:

// Statisch bzw. dynamisch benannte Eigenschaften hinzufügen:
objekt.eigenschaftA = "ein Wert";
objekt["eigenschaftB"] = "ein anderer Wert";

// Statisch bzw. dynamisch benannte Eigenschaften entfernen:
delete objekt.eigenschaftA;
delete objekt["eigenschaftB"];

Objektliterale

Objekte k?nnen in JavaScript direkt anhand ihrer Eigenschaften definiert werden:

let meinObjekt = {
    zahl: 42,
    gibZahl: function() {
        return this.zahl;
    }
};

alert(meinObjekt.gibZahl()); // 42

Eine spezielle Notation gibt es für regul?re Ausdrücke:

// mit Konstruktorfunktion
(new RegExp("a")).test("ab"); // true

// als Literal
/a/.test("ab"); // true

Konstruktor-Funktionen

Eine Funktion kann dazu genutzt werden, um ein mit new erstelltes Objekt zu initialisieren. In diesem Fall spricht man von einem Konstruktor oder einer Konstruktor-Funktion. Innerhalb dieser Funktion kann das neue Objekt über die Variable this angesprochen werden.

function MeinObjekt(x) { // Konstruktor
    this.zahl = x;
}

let objekt = new MeinObjekt(3); // Instanz erzeugen
alert(objekt.zahl); // per Meldefenster ausgeben (3)

?Private“ Eigenschaften

Private Eigenschaften und Methoden sind nicht explizit Teil der Sprache.

Mit Hilfe von Closures (siehe Funktionen) lassen sich dennoch private Eigenschaften von Objekten realisieren:

let erschaffeKatze = function() {
    let lebensZahl = 7;

    let maunz = function() {
        return (lebensZahl > 0) ? "miau" : "?rks";
    };

    // gibt neues Objekt zurück
    return {
        toeten: function() {
            lebensZahl -= 1;
            alert(maunz());
        }
    };
};

let otto = erschaffeKatze();
otto.toeten(); // miau

Lediglich die toeten-Methode von otto kennt die Variable lebensZahl. Der Effekt gleicht dem einer privaten Eigenschaft, wenn alle Methoden der Katze in der erzeugenden Funktion erschaffeKatze definiert werden. lebensZahl ist dann für alle Methoden (privilegierte Methoden, im Beispiel toeten) und inneren Funktionen der erzeugenden Funktion (private Methoden, im Beispiel maunz) sichtbar, nicht jedoch von au?en oder von nachtr?glich an das Objekt geh?ngten Methoden.

Vererbung über Prototypen

Vererbung kann in JavaScript durch Prototypen realisiert werden. Dies erfordert, dass der prototype-Eigenschaft einer Konstruktor-Funktion ein als Prototyp dienendes Objekt zugewiesen wird. Wenn mit der Konstruktor-Funktion nun ein Objekt erzeugt wird, wird beim Zugriff auf eine nicht-existierende Eigenschaft des neuen Objekts die entsprechende Eigenschaft des Prototyps (wenn vorhanden) zurückgegeben. Beispiel:

let fisch = {
    augen: 2
};

let Mutantenfisch = function() {
    this.augen = 3;
};

Mutantenfisch.prototype = fisch;

let blinky = new Mutantenfisch();

// eigene Eigenschaft von blinky
alert(blinky.augen); // 3

// blinkys eigene Eigenschaft wird gel?scht
delete blinky.augen;

// blinky hat die Eigenschaft selbst nicht mehr,
// es schimmert die Eigenschaft des Prototyps durch
alert(blinky.augen); // 2

Um festzustellen, ob ein Objekt eine Eigenschaft selbst besitzt oder vom Prototyp geerbt hat, hat jedes Objekt (automatisch durch Vererbung von Object) die hasOwnProperty-Methode:

blinky.hasOwnProperty('augen'); // false

Fixierung von Objektstruktur und -inhalten

Die in JavaScript im Regelfall v?llig dynamische Struktur eines Objekts obj kann in verschiedener Hinsicht fixiert werden: Nach dem Methodenaufruf Object.preventExtensions(obj) k?nnen keine weiteren Attribute und Methoden mehr erg?nzt werden. Object.seal(obj) verhindert sowohl die Erweiterung wie die Streichung von Attributen und Methoden. Der Aufruf Object.freeze(obj) fixiert sowohl die Objektstruktur wie auch die Attributwerte inklusive der Methoden gegen nachfolgende Ver?nderungen. Die betreffenden Status eines Objekts obj k?nnen mit Object.isExtensible(obj), Object.isSealed(obj) und Object.isFrozen(obj) ermittelt werden.

Es ist auch m?glich, nur ein einzelnes Attribut eines Objekts obj zu fixieren. Beispielsweise wird mit dem Aufruf

Object.defineProperty(obj, "vorname", {writable:false});

das Attribut obj.vorname schreibgeschützt.

Delegationsprinzipien

JavaScript ist eine Delegationssprache mit sowohl selbstausführendem als auch direktem Delegationsmechanismus.

Funktionsobjekte als Rollen (Traits und Mixins)

JavaScript unterstützt schon auf der Ebene des Sprachkerns verschiedene auf Funktionsobjekten aufbauende Implementierungen des Rollen-Musters wie z. B. Traits und Mixins. Zus?tzliches Verhalten wird bereitgestellt, indem mindestens eine Methode über das Schlüsselwort this im Rumpf eines function-Objekts gebunden wird. Ben?tigt ein Objekt zus?tzliches Verhalten, welches ihm nicht über die Prototypenkette zur Verfügung gestellt werden kann, l?sst sich eine Rolle direkt über call bzw. apply an dieses Objekt delegieren.

Objektkomposition und Vererbung durch Delegation

W?hrend Komposition in JavaScript über diese direkte Delegation abgedeckt werden kann, kommt automatische Delegation immer dann zur Anwendung, wenn der Interpreter die Prototypenkette eines Objekts nach oben hin abwandern muss, um z. B. eine mit diesem Objekt assoziierte Methode zu finden, die diesem nicht unmittelbar geh?rt. Sobald die Methode gefunden ist, wird sie im Kontext dieses Objekts aufgerufen. Demzufolge wird Vererbung in JavaScript über einen selbstausführenden Delegationsmechanismus abgebildet, der an die prototype-Eigenschaft von Konstruktorfunktionen gebunden ist.

Fehlerbehandlung

Ab Version 3 verfügt ECMAScript über eine von Java übernommene Fehlerbehandlung. Die Anweisung try … catch … finally f?ngt Ausnahmen (exceptions) ab, die aufgrund eines Fehlers oder einer throw-Anweisung auftreten. Die Syntax lautet:

try {
    // Anweisungen, in denen Ausnahmen auftreten oder ausgel?st werden k?nnen
} catch (exception) {
    // Anweisungsfolge, die im Ausnahmefall ausgeführt wird.
    // In diesem Teil kann die Fehlerbehandlung erfolgen.
} finally {
    // Anweisungsfolge, die anschlie?end in jedem Fall ausgeführt wird.
}

throw "sample exception"; // wenn verfügbar, besser: Error-Objekt (siehe unten)

Zu Beginn werden die Anweisungen im try-Block ausgeführt. Falls eine Ausnahme auftritt, wird der Kontrollfluss sofort zum catch-Block mit dem Ausnahmeobjekt als Parameter umgeleitet.

Im Normalfall wird der Ausnahmeblock übersprungen. Nach der Ausführung des try-Blocks (auch teilweise) und gegebenenfalls des catch-Blocks werden in jedem Fall die Anweisungen im finally-Block ausgeführt. Der finally-Teil kann weggelassen werden, alternativ der catch-Teil.

Einige Laufzeitumgebungen wie V8 (und somit Node.js) und auch viele Webbrowser stellen gesonderte Error-Objekte zur Verfügung, die neben der Fehlermeldung auch einen Stacktrace und weitere Zusatzinformationen transportieren k?nnen. Um diese Vorteile zu nutzen, ?ndert man im einfachsten Anwendungsfall den throw-Befehl von throw "Meldungstext"; zu throw new Error("Meldungstext");.

Klammern um den Parameter des throw-Befehls sind im Allgemeinen nicht notwendig. Sollten sie in Ausnahmef?llen ben?tigt werden, um beispielsweise einen auf mehrere Zeilen verteilten Parameter zusammenzufassen, kann die m?gliche Verwechslung mit einem Funktionsaufruf dennoch vermieden werden, indem man ein Leerzeichen zwischen throw und die ?ffnende Klammer einfügt.

JavaScript-Bibliotheken

Um die Erstellung von Webanwendungen mit Hilfe von JavaScript zu erleichtern, gibt es diverse Bibliotheken und Frameworks. Eine Bibliothek ist eine Sammlung von Funktionen, die der Programmierer nutzen kann. Ein Framework fordert darüber hinaus durch ein besonderes Ma? an Abstraktion eine bestimmte Struktur der Programmierung.

Ausgel?st von neuen Konzepten wie Ajax entstand seit 2004 ein neues Interesse für JavaScript. JavaScript wird zunehmend für Rich-Client-Anwendungen benutzt, die das Aussehen und die Bedienung von herk?mmlichen Desktop-Programmen auf Web-gestützte Anwendungen übertragen. JavaScript spielt dabei eine Schlüsselrolle, wenn es darum geht, Statusinformationen ohne Laden einer vollst?ndigen Seite zwischen Browser und HTTP-Server zu übertragen. Im Zuge dieser neuen Anforderungen entstanden verschiedene Bibliotheken, die die Entwicklung solcher Anwendungen vereinfachen wollen. Neben Ajax-Funktionalit?ten bieten die meisten dieser Bibliotheken eine eigene Basis für objektorientierte Programmierung, eine Abstraktionsschicht für das komfortable Arbeiten mit dem DOM sowie grafische Effekte wie Animationen. Aber auch schon vor dem breiten Einsatz von Ajax existierten Funktionssammlungen zur Unterstützung der browserübergreifenden Programmierung.

Zu den bekannten JavaScript-Bibliotheken und Frameworks z?hlen AngularJS, Dojo Toolkit, Ext JS, jQuery, MooTools, Prototype, Qooxdoo, React, Vue.js und die Yahoo User Interface Library. Speziell mit grafischen Effekten besch?ftigen sich Moo.fx und Script.aculo.us. Für die serverseitige Programmierung mittels Node.js stehen eigene Bibliotheken und Frameworks bereit.

Einige Bibliotheken und insbesondere Frameworks erweitern die Sprache um zus?tzliche Funktionen, die h?ufig in sp?tere Versionen der Spezifikation einflie?en oder rüsten bei Bedarf ?ltere Implementierung per Polyfill nach.

Siehe auch: Kategorie:JavaScript-Bibliothek

JavaScript & Suchmaschinenoptimierung (SEO)

Suchmaschinen gehen unterschiedlich mit der Verarbeitung von Javascript-Inhalten um, wodurch es in den letzten Jahren immer wieder zu F?llen gekommen ist, dass Websites teilweise oder g?nzlich nicht in Suchmaschinen auffindbar waren. Der Suchmaschinenbetreiber Google kann laut eigenen Aussagen JavaScript-Inhalte crawlen, rendern und indexieren. Neben allgemeinen Empfehlungen wie z. B. die Verwendung von aussagekr?ftigen Titeln, eindeutigen Statuscodes und den sorgsamen Umgang mit Noindex-Direktiven gibt es im Hinblick auf JavaScript noch spezifischere Empfehlungen, welche helfen k?nnen, dass JavaScript-Webanwendungen optimal via Suchmaschinenoptimierung aufgefunden werden k?nnen. Dazu z?hlen serverseitiges Pre-Rendering oder der Verzicht von Fragmenten bei Links. Für das Debugging von JavaScript & SEO gibt es eine Reihe von offiziellen Empfehlungen seitens Google, um nachprüfen zu k?nnen, wie der Googlebot Webinhalte erfasst.

Siehe auch

• ActionScript – Bezeichnung für eine JavaScript-?hnliche Skriptsprache in Flash und Macromedia Director, wo es alternativ zu Lingo verwendet werden kann
• Aktive Inhalte
• Bookmarklet – kleine JavaScript-Programme im Browser
• Dart (Programmiersprache)
• TypeScript – Weiterentwicklung von Microsoft

Literatur

• David Flanagan: JavaScript – Das Handbuch für die Praxis. 7. Auflage. O’Reilly, Heidelberg 2021, ISBN 978-3-96009-157-8.
• Paul Fuchs: JavaScript Programmieren für Einsteiger: Der leichte Weg zum JavaScript-Experten. BMU Verlag, Landshut 2019, ISBN 978-3-96645-016-4
• J?rg Bewersdorff: Objektorientierte Programmierung mit JavaScript: Direktstart für Einsteiger. 2. Auflage. Wiesbaden 2018, ISBN 978-3-658-21076-2, doi:10.1007/978-3-658-21077-9. 
• Philip Ackermann: JavaScript. Das umfassende Handbuch. 3. Auflage. Rheinwerk Computing, Bonn 2021, ISBN 978-3-8362-8629-9.
• Nicholas Zakas: JavaScript objektorientiert: Verst?ndlicher, flexibler, effizienter programmieren. Heidelberg 2014, ISBN 978-3-86490-202-4. 
• Peter Kr?ner: ECMAScript 5 – Entwickeln mit dem aktuellen JavaScript-Standard. 1. Auflage. Open Source Press, München 2013, ISBN 978-3-95539-063-1.
• Christian Wenz: JavaScript und AJAX. Das umfassende Handbuch. 9. Auflage. Galileo Press, Bonn 2009, ISBN 978-3-89842-859-0 (openbook.galileocomputing.de).
• Stefan Koch: JavaScript. Einführung, Programmierung und Referenz. 6. Auflage. dpunkt-Verlag, Heidelberg 2011, ISBN 978-3-89864-731-1.
• Douglas Crockford: Das Beste an JavaScript. O’Reilly, K?ln 2008, ISBN 978-3-89721-876-5.

Weblinks

Commons: JavaScript – Sammlung von Bildern, Videos und Audiodateien

Wikibooks: Websiteentwicklung: JavaScript – Lern- und Lehrmaterialien

Wiktionary: JavaScript – Bedeutungserkl?rungen, Wortherkunft, Synonyme, übersetzungen

• Linkkatalog zum Thema JavaScript bei curlie.org (ehemals DMOZ)
• JavaScript – Geschichte, Struktur, Eigenschaften und die Zukunft der wichtigsten Programmiersprache des Webs. (MP3 97,5 MB) In: Chaosradio Express CRE146. 27. Februar 2010, abgerufen am 27. Februar 2010. 
• Addy Osmani: Learning JavaScript Design Patterns. Abgerufen am 24. Mai 2013 (englisch, Entwurfsmuster in JavaScript). 
• Lizenz

Spezifikationen

• ISO-genormte ECMAScript-Spezifikation (ISO/IEC 16262:2002) (englisch/franz?sisch)
• ECMAScript-Spezifikation (englisch, PDF; 3,1 MiB) (HTML-Version)
• Referenz von Mozilla (deutsch)

Dokumentationen

• JavaScript-Kapitel bei SELFHTML-Wiki
• Objektorientierung in JavaScript
• Eloquent JavaScript (Frei verfügbares E-Book, englisch)