LiveScript

JavaScript ist eine Skriptsprache, die hauptsächlich für das DOM-Scripting in Web-Browsern eingesetzt wird. Dabei ist unter JavaScript die Gesamtheit aus den Eigenschaften des Browsers (beziehungsweise Clients oder Scripting-Hosts) sowie des Document Object Models (DOM) und des Sprachkerns zu verstehen.

Der als ECMAScript (ECMA 262) standardisierte Sprachkern von JavaScript beschreibt eine moderne, schlanke, dynamisch typisierte, objektorientierte aber klassenlose Skriptsprache, die dennoch allen objektorientierten Programmierparadigmen unter anderem auch – aber eben nicht ausschließlich – auf der Basis von Prototypen gerecht wird. In JavaScript lässt sich sowohl prozedural als auch rein funktional bzw. objektorientiert programmieren.

Entwicklung

Die Syntax von JavaScript ähnelt jener der C-Abkömmlinge, wozu auch Java gehört. Trotz der Namensähnlichkeit hat JavaScript außer der syntaktischen Ähnlichkeit nur geringe Gemeinsamkeiten mit Java, beispielsweise wird Objektorientierung in JavaScript anders als in Java nicht durch Klassen, sondern durch Prototypen unterstützt.

Von Brendan Eich ursprünglich für den Netscape Navigator entwickelt, finden sich mittlerweile in praktisch allen grafischen Browsern weitgehend kompatible JavaScript-Interpreter wie z. B. SpiderMonkey für Mozilla/Gecko oder der JScript-Interpreter von Microsoft. Teilweise erhebliche Unterschiede bei der Unterstützung von dynamischen Inhalten wie ActiveX waren Teil der Ursachen für den sogenannten Browserkrieg. Mittlerweile ist der Sprachkern von JavaScript unter dem Namen ECMAScript durch Ecma International standardisiert. Der in Java implementierte JavaScript-Interpreter Rhino wird ab Version 6.0 als Teil der Java-Laufzeitumgebung standardmäßig mitgeliefert.^[1]

Von Eich ursprünglich „Mocha“ genannt, wurde die Sprache aus Marketinggründen erst in „LiveScript“ und letztendlich in „JavaScript“ umbenannt: Um dem damals aktuellen Java-Trend zu entsprechen, sollte mit LiveConnect eine Schnittstelle zwischen Java und „LiveScript“ entstehen, was sich im neuen Namen „JavaScript“ ausdrücken sollte.^[2] „JavaScript“ ist eine Marke der Firma Sun Microsystems.^[3]

Inzwischen hat sich die Sprache auch neue Anwendungsgebiete erschlossen. Unter anderem können z. B. PDF-Dokumente dadurch (ähnlich wie HTML) interaktiv verändert werden, und populäre Anwendungsprogramme wie Photoshop und InDesign lassen sich damit automatisieren. JavaScript wird auch gerne als Skriptsprache für Spiele 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.

Im Folgenden wird die Anwendung von JavaScript in DHTML behandelt.

Überblick

JavaScript wird im Unterschied zu überwiegend serverseitig eingesetzten Sprachen wie zum Beispiel Perl oder PHP überwiegend clientseitig eingesetzt. JavaScript bzw. die ECMAScript-Implementationen finden jedoch beispielsweise auf Netscape Enterprise Servern (NES), und als JScript bzw. JScript.NET in einer ASP- bzw. ASP.NET-Umgebung auf Microsoft Internet Information Services auch serverseitig Anwendung. Weitere Beispiele für serverseitige Javascript-Programmierung sind POW und Jaxer, die auf der Mozilla-Javascript-Engine Spidermonkey aufsetzen.

Mit clientseitigem JavaScript können Inhalte generiert werden, deren Erscheinungsbild sich bei Nutzerinteraktion ändert – beispielsweise die Farbe eines Hyperlinks, während sich der Mauszeiger über dem Link befindet. Dadurch lassen sich Webseiten realisieren, die herkömmlichen Desktop-Applikationen in Funktionalität und Bedienungskomfort nicht nachstehen.

JavaScript wurde ursprünglich von Sun Microsystems und Netscape in Kooperation entwickelt. Trotz des ähnlichen Namens und einer ähnlichen Syntax ist JavaScript grundlegend verschieden von der Programmiersprache Java, die von Sun Microsystems stammt. Die Namensgleichheit erklärt sich wohl vor allem aus der Absicht, aus Marketinggründen eine Verbindung mit den damals sehr populären Java-Applets herzustellen. Die Syntax wurde auch aus diesem Grund weitgehend der von Java angeglichen.

Die ursprüngliche Grundfunktionalität von JavaScript ist heute als ECMAScript oder ECMA-262 standardisiert und wird von den meisten Browsern weitgehend unterstützt (JavaScript in der Version 1.5 entspricht ECMA-262 Version 3).

Geschichte

18. September 1995	Mit der Vorversion des Navigator 2.0 veröffentlicht Netscape einen Browser mit einer eingebetteten Skriptsprache, die zu diesem Zeitpunkt LiveScript heißt und von Brendan Eich entwickelt wurde. Die Sprache soll u. a. Formulareingaben des Benutzers vor dem Absenden überprüfen können.
4. Dezember 1995	Netscape und Sun Microsystems verkünden eine Kooperation. LiveScript soll als Scriptsprache direkt mit Java-Applets interagieren können. Sun Microsystems entwickelt die nötigen Java-Klassen, Netscape die JavaScript-Schnittstelle LiveConnect und benennt die Sprache in JavaScript um (JavaScript 1.0).
29. April 1996	Mit der ersten Beta-Version des Navigator 3.0 führt Netscape JavaScript 1.1 ein. Neu ist die Möglichkeit, auf Bilder zuzugreifen und so genannte Rollover-Grafiken zu erstellen. LiveConnect ist jetzt Bestandteil des Browsers.
Mai 1996	Microsoft stellt mit der Beta-Version des Internet Explorer 3 seinen ersten JScript-fähigen Browser vor. Beginn des Browserkriegs.
15. Oktober 1996	Mit der Ankündigung des Netscape Communicators wird JavaScript 1.2 veröffentlicht.
4. Juni 1997	Der Netscape Communicator 4.0 mit JavaScript 1.2 erscheint.
Juni 1997	Die „European Computer Manufacturers Association“ veröffentlicht ihren Standard ECMA-262 (ECMAScript), der zusammen mit Netscape entwickelt wurde und die Grundelemente einer Skriptsprache standardisieren soll.
1. Oktober 1997	Microsoft gibt den Internet Explorer 4 heraus, der den Sprachumfang von JavaScript 1.1 abdeckt. Darüber hinaus werden eigene Erweiterungen veröffentlicht, die zu Kompatibilitätsunterschieden zwischen Navigator und Internet Explorer führen und eine DOM-ähnliche Syntax zur Verfügung stellen, die es ermöglicht, auf alle Elemente der Webseite zuzugreifen und diese beliebig zu verändern.
23. Februar 1998	Die neue Mozilla Application Suite wird mit der Freigabe des Quelltextes des Netscape Communicators auf den Weg gebracht.
April 1998	ECMAScript ist nun ISO-Norm: ISO/IEC 16262:1998 Information technology – ECMAScript language specification.
Juli 1998	Eine Beta-Version des Netscape Communicators 4.5 wird veröffentlicht. JavaScript trägt nun die Versionsnummer 1.3. Erstmals zu finden war diese JavaScript-Version schon in der Version 4.06 des Netscape Communicators.
Oktober 1998	Netscape stellt JavaScript 1.4 vor. Diese Version ist vollständig kompatibel mit ECMA-262. Ein Browser mit der Unterstützung dieser Version erscheint jedoch nicht.
April 2000	Netscape gibt die Preview Release 1 des Navigator 6 heraus, welcher auf der sich in der Entwicklung befindlichen Programmsammlung Mozilla M18 beruht. Diese Version implementiert erstmals JavaScript 1.5 und das DOM Level 1.
5. Juni 2002	Mozilla 1.0 erscheint mit JavaScript 1.5.
29. November 2005	Mozilla Firefox 1.5 erscheint mit JavaScript 1.6.
12. Juli 2006	Mozilla Firefox 2.0b1 erscheint mit JavaScript 1.7.
18. Dezember 2007	Mozilla Firefox 3.0b2 erscheint mit JavaScript 1.8.

Typische Anwendungsgebiete von JavaScript

• Plausibilitätsprüfung (Validierung) von Formulareingaben beim Absender
• Mehrere Frames auf einmal wechseln oder die Seite aus dem Frameset „befreien“
• Banner oder Laufschriften
• Dynamische Manipulation von Webseiten über das Document Object Model
• Senden und Empfangen von Daten, ohne dass der Browser die Seite neu laden muss (Ajax)

Missbrauch

Einige Anwendungen, die mit JavaScript möglich sind, verärgern meistens den Benutzer und werden als „schlechter Stil“ angesehen:

• Quelltext „verschleiern“, um diesen vor dem Besucher zu verstecken
• Verschleiern von Internetadressen, auf die ein 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
• Ungewolltes Öffnen von Fenstern, teilweise auch Öffnen beliebig vieler Fenster
• Ungewolltes Schließen des Browserfensters
• Ungewollte Größenänderung des Browserfensters
• Blockieren der Anwender mit zahllosen aufeinanderfolgenden Dialogfenstern

Bei anfälligen Webanwendungen kann JavaScript auch von Dritten missbraucht werden, etwa per XSS (Codeeinschleusung). Verschleierungsmaßnahmen, insbesondere soweit sie E-Mail-Adressen betreffen, können allerdings auch der Bekämpfung von Spam dienen (siehe den betreffenden Artikel).

Sicherheit

Das Sandbox-Prinzip

JavaScript wird in einer so genannten Sandbox ausgeführt, die sich im Browser befindet. Dieses bewirkt, dass JavaScript im Allgemeinen nur Zugriff auf die Objekte des Browsers hat und somit nicht auf das Dateisystem zugreifen und Dateien lesen oder schreiben kann. Es ist jedoch zumindest im Microsoft Internet Explorer möglich, bei entsprechenden Sicherheitseinstellungen, durch die Nutzung von ActiveX diese Beschränkungen zu umgehen. Die Möglichkeiten sind daher mit VBScript von Microsoft vergleichbar.

Es bewirkt ferner, dass Aktionen wie das Schließen des Browserfensters, das Aus- und Einblenden von Symbolleisten, das Ändern der im Browser eingestellten Startseite oder das Auslesen der zuletzt besuchten Webseiten des Anwenders die explizite Erlaubnis des Benutzers erfordern.

Deaktivieren von JavaScript

In fast allen 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.

Barrierearme Webseiten zeichnen sich dadurch aus, dass sie auch bei abgeschaltetem JavaScript möglichst uneingeschränkt navigierbar bleiben. Oft schränkt das nicht aktivierte JavaScript die Benutzbarkeit einer Webseite ein. Einige Web-basierte Anwendungen, wie zum Beispiel das sofortige Vorschlagen von Suchbegriffen, sind wiederum ohne JavaScript gar nicht realisierbar.

Sprachelemente

Vordefinierte Objekte

JavaScript kennt mehrere eingebaute Objekte, die von ECMAScript definiert werden.

• Das namenlose globale Objekt, das alle Variablen und Objekte enthält.
• Object als allgemeiner Prototyp, von dem alle Objekte abgeleitet sind
• Function als Prototyp für Funktionen
• Array als Prototyp für Arrays
• String als Prototyp für Zeichenketten
• Boolean als Prototyp für Boolesche Variablen
• Number als Prototyp für Zahlen (64-Bit-Gleitkommazahlen gemäß IEEE 754)
• Math stellt Konstanten und Methoden für mathematische Operationen bereit. Math kann nicht als Konstruktor dienen.
• Date für Operationen mit Daten bzw. Zeitpunkten und Datumsformaten
• RegExp für reguläre Ausdrücke

Die restlichen 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.

Datentypen

Die vordefinierten Prototypen korrespondieren teilweise mit grundlegenden Datentypen. Zeichenketten haben den Typ String, numerische Werte den Typ Number und boolesche Werte den Typ Boolean. Des Weiteren gibt es die Typen null und undefined. Dieses sind sogenannte einfache Werte (primitive values). Alle anderen Werte sind Objekte (objects) und haben den Typ Object. Funktionen, Arrays, Datumsobjekte und reguläre Ausdrücke sind so gesehen spezielle Objekte.

Beim direkten Notieren von Zeichenketten, Zahlen oder booleschen Variablen entstehen einfache Werte (zum Beispiel bei var variable = "Beispieltext";). Beim Nutzen der jeweiligen Konstruktorfunktionen hingegen entstehen Objekte (z. B. bei var variable = new String("Beispieltext");).

JavaScript ist dynamisch typisiert, d. h. der Datentyp einer Variablen kann sich während der Ausführung eines Scripts ändern, was manchmal zu Fehlern bzw. unerwünschten Effekten führt.

Zugriff auf Objekteigenschaften und -methoden

Eigenschaften und Methoden von Objekten werden über folgende Notation angesprochen:

objekt.eigenschaft

bzw.

objekt.methode([Parameter])

Allen Objekten können zur Laufzeit neue Eigenschaften und Methoden hinzugefügt werden. In diesem Beispiel wird eigenschaftA mit 1 belegt:

objekt.eigenschaftA = 1;

Eigenschaften können auch in der folgenden Form angesprochen werden, wobei der Eigenschaftsname als Zeichenkette angegeben wird:

objekt["eigenschaftA"] = 1;

Durch diese Schreibweise können alle Eigenschaften eines Objektes in einer For … in-Schleife durchlaufen werden. In diesem Beispiel wird „objekt.eigenschaftA = 1“ ausgegeben.

for (var eigenschaftsname in objekt) {
   window.alert("objekt." + eigenschaftsname + " = " + objekt[eigenschaftsname]);
}

Entfernen lassen sich Eigenschaften mit dem Operator delete:

delete objekt.eigenschaftA;

Kontrollstrukturen

If … else (Bedingte Anweisung)

if (Bedingung) {
    Anweisungen;
} else {
    Anweisungen;
}

In JavaScript gibt es im Gegensatz zu anderen Programmiersprachen keine Kontrollstruktur if … elseif …. Stattdessen verwendet man zwei If-Anweisungen, von denen die erste die zweite als Else-Block aufnimmt.

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]; [Iterations-Ausdruck]) {
     Anweisungen;
 }

For … in-Schleife

Mit dieser Anweisung werden alle eigenen und ererbten Eigenschaften eines Objektes durchlaufen, die nicht die interne Eigenschaft DontEnum aufweisen. DontEnum gilt für bestimmte eingebaute Eigenschaften und kann nicht vom Benutzer gesetzt werden.^[4] Bei jedem Schleifendurchgang wird einer angegebenen Variable der Eigenschaftsname zugewiesen.

for (var eigenschaftsname in objekt) {
    Anweisungen;
}

For Each … in-Schleife

Die For Each … in-Schleife gleicht der For … in-Schleife, mit dem Unterschied, dass die Eigenschaftswerte des Objekts durchlaufen werden und nicht deren Namen. Sie ist erst ab JavaScript 1.6 verfügbar. ^[5]

for each (var eigenschaftswert in objekt) {
    Anweisungen;
}

Funktionen

Eine Funktion ist ein Block mit Anweisungen, dem ein Name zugewiesen wird. Eine Funktion hat eine Liste von Parametern, die auch leer sein kann, und kann einen Resultatwert zurückgeben.

function meineFunktion (Parameter1, Parameter2, Parameter3) {
    Anweisungen;
    return Ausdruck;
}

Funktionen können auch ineinander verschachtelt werden. Die inneren Funktionen sind dabei nur innerhalb der äußeren verfügbar.

Seit JavaScript 1.8 müssen Funktionen keinen Block mehr besitzen und benötigen keine return-Anweisung für Rückgabewerte, entsprechend dem Lambda-Kalkül.

Neben der obigen gängigen Notation kann alternativ eine sogenannte Function Expression verwendet werden:

var Addieren = function (zahl1, zahl2) {
    return zahl1 + zahl2;
};

Alle Funktionen (auch solche die mit der Schreibweise oben deklariert wurden) werden im Endeffekt auf diese Notation zurückgeführt. Daher ist es nicht möglich, eine Variable mit dem gleichen Namen wie eine Funktion zu haben, da sie beide das gleiche Objekt bezeichnen.

Da alle Funktionen vom Prototyp-Objekt Function abgeleitet sind, kann eine Funktion zudem mithilfe des Function-Konstruktors notiert werden. Das Besondere an dieser Schreibweise ist, dass sowohl Parameternamen als auch der Code des Funktionskörpers als Strings notiert werden.

var Addieren = new Function("zahl1", "zahl2", "return zahl1 + zahl2;");

Beispiel: Der ursprüngliche Algorithmus von Euklid zur Ermittlung des größten gemeinsamen Teilers: Es ist eine geometrische Lösung; die kleinere Strecke wird jeweils von der größeren abgezogen. (Heutzutage wird üblicherweise die weitaus effizientere Version mit Division mit Rest statt Subtraktion verwendet.)

function gcd (a, b) {
    while (a != b) {
        if (a > b) {
            a = a - b;
        } else {
            b = b - a;
        }
    }
    return a;
}

Die Anzahl der Parameter beim Aufruf muss nicht zwingend mit der Anzahl der Parameter in der Funktionsdefinition übereinstimmen. Wenn beim Aufruf weniger Parameter angegeben werden, dann wird für die übrigen Parameter einfach der Wert undefined eingesetzt. Weiter kann innerhalb der Funktion auch über das arguments-Array auf die Parameter zugegriffen werden.

Funktionales Programmieren

Da Funktionen in JavaScript vollwertige Objekte sind, sind sie Funktionen höherer Ordnung und können auch als Parameter an andere Funktionen übergeben werden.

Beispiel für das funktionale Programmieren:

Array.prototype.fold = function (initial, functor) {
    var result = initial;
    for (var i = 0; i < this.length; i++) {
        result = functor(result, this[i]);
    }
    return result;
};
var array = [ 21,33,17,12 ];
var addition = function (a, b) { return a + b; };
var sum = array.fold(0, addition);

Ebenso ist es möglich curried functions zu schreiben:

function add (a, b) {
    if (arguments.length < 1)
        return add;
    if (arguments.length < 2) {
        return function (c) { return a + c; };
    } else {
        return a + b;
    }
}

Eigene Objekte definieren

Konstruktor-Funktionen

Eine JavaScript-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. Darüber können dem Objekt Eigenschaften angehängt werden.

function meinObjekt() {
    this.zahl = 1;
}

Neue Instanz erstellen:

var objekt = new meinObjekt();

Zugriff auf die Eigenschaft zahl, es wird „1“ ausgegeben:

window.alert(objekt.zahl);

Im Beispiel wurde dem Objekt eine Eigenschaft vom Typ Number, d. h. eine Zahl angehängt. Erlaubt sind Eigenschaften jedes möglichen Typs, darunter auch Funktionen. Objektmethoden sind somit nur spezielle Eigenschaften vom Typ function.

Öffentliche und private Methoden und Eigenschaften

Beim Definieren eigener Prototypen können Eigenschaften und Methoden entweder als öffentlich oder als privat notiert werden. Diese Unterscheidung bezieht sich auf ihre Verfügbarkeit, das heißt aus welchem Kontext der Zugriff erlaubt ist. Private Eigenschaften können nur aus der Konstruktor-Funktion und aus objekteigenen Methoden heraus gelesen und geschrieben werden. Der Zugriff von außerhalb des Objekts ist nur bei öffentlichen Eigenschaften möglich. Dementsprechend können öffentliche Methoden – die letztlich nur besondere Eigenschaften sind – aus jedem Kontext heraus, in dem das Objekt verfügbar ist, ausgeführt werden. Private Methoden sind analog nur objektintern aufrufbar.

Methoden werden zudem anhand ihrer Zugriffsrechte auf objekteigene Eigenschaften und Methoden unterschieden. Private Methoden haben prinzipiell Zugriff auf alle öffentlichen und privaten Eigenschaften und Methoden. Dasselbe gilt für sogenannte privilegierte öffentliche Methoden. Nicht-privilegierte öffentliche Methoden können nur auf öffentliche Eigenschaften und Methoden zugreifen. Erstgenannte werden innerhalb der Konstruktor-Funktion definiert, letztgenannte werden von außen über die Eigenschaft prototype der Konstruktor-Funktion hinzugefügt (siehe den folgenden Abschnitt).

Im folgenden Beispiel werden die verschiedenen Eigenschafts- und Methodentypen demonstriert.

function meinObjekt (parameter) {
    /* parameter ist eine private Eigenschaft */
 
    /* Speichere eine Referenz auf das aktuelle Objekt in
       der privaten Eigenschaft self */
    var self = this;
 
    /* private Eigenschaft */
    var private_eigenschaft = "privat";
 
    /* öffentliche Eigenschaft */
    this.oeffentliche_eigenschaft = "öffentlich";
 
    /* private Methode */
    var private_methode = function () {
        window.alert(private_eigenschaft + " " + self.oeffentliche_eigenschaft);
    };
 
    /* privilegierte öffentliche Methode */
    this.privilegierte_methode = function () {
        window.alert(private_eigenschaft + " " + this.oeffentliche_eigenschaft);
        private_methode();
    };
}
 
/* nicht-privilegierte öffentliche Methode */
meinObjekt.prototype.oeffentliche_methode = function () {
    window.alert(typeof(private_eigenschaft) + " " + typeof(private_methode));
    window.alert(this.oeffentliche_eigenschaft);
};

Neue Instanz erstellen:

var objekt = new meinObjekt();

Auf private_eigenschaft und private_methode kann von außen nicht zugegriffen werden. Daher wird zweimal „undefined“ ausgegeben:

window.alert(objekt.private_eigenschaft + " " + objekt.private_methode);

Der Zugriff auf oeffentliche_eigenschaft hingegen ist von außen möglich. Es wird „öffentlich“ ausgegeben:

window.alert(objekt.oeffentliche_eigenschaft);

Ebenso können privilegierte_methode und oeffentliche_methode von außen aufgerufen werden:

objekt.privilegierte_methode();
objekt.oeffentliche_methode();

Diese Methoden demonstrieren die unterschiedlichen Zugriffsrechte.

privilegierte_methode gibt die Eigenschaften private_eigenschaft und oeffentliche_eigenschaft aus. Im Meldungsfenster wird „privat öffentlich“ ausgegeben. Danach ruft sie private_methode() auf, die noch einmal dasselbe demonstriert.

oeffentliche_methode hingegen hat keinen Zugriff auf private_eigenschaft und private_methode. Das Meldungsfenster zeigt zweimal „undefined“. Lediglich der Zugriff auf oeffentliche_eigenschaft gelingt.

Aufgrund eines Fehlers in der ECMAScript-Spezifikation ist das Ansprechen von öffentlichen Eigenschaften und Methoden in privaten Methoden schwierig, weil this nicht wie in öffentlichen Methoden auf das aktuelle Objekt verweist. Daher bedient man sich eines Tricks, indem man im Konstruktor this in einer privaten Eigenschaft speichert, gängigerweise self. Darüber gelingt der Zugriff auf öffentliche Eigenschaften und Methoden in privaten Methoden.

Vererbung (Die Eigenschaft ‚prototype‘)

Jede Funktion, d. h. jedes vom Function-Prototyp abgeleitete Objekt verfügt über eine Eigenschaft prototype. Diese übernimmt eine wichtige Aufgabe, wenn die Funktion als Konstruktor benutzt wird, um neue Objekte zu initialisieren. Die Eigenschaft prototype definiert in diesem Falle gemeinsame Eigenschaften aller Objekte, die mit dem Konstruktor erstellt werden. Man spricht von prototyp-basierter Vererbung. Auf diese Weise ermöglicht JavaScript mehrstufige Vererbung:

Konstruktor eines Prototyps erstellen:

function Kraftfahrzeug (Fabrikat) {
   this.Fabrikat = Fabrikat;
   this.Beispieleigenschaft = "Beispielwert";
}

Konstruktor des abgeleiteten Prototyps erstellen:

function PKW (Fabrikat) {
   this.constructor(Fabrikat);
   this.weitereEigenschaft = "Beispielwert";
}
PKW.prototype = new Kraftfahrzeug();

Eine neue Instanz des allgemeinen Prototyps Kraftfahrzeug dient als Muster des abgeleiteten Prototyps PKW. Dadurch werden die Eigenschaften des allgemeinen Prototyps an den abgeleiteten Prototyp vererbt: Jedes PKW-Objekt ist gleichzeitig ein Kraftfahrzeug-Objekt. (Achtung: durch PKW.prototype = new Kraftfahrzeug() wird die Funktion Kraftfahrzeug ausgeführt.) Über this.constructor kann im PKW-Konstruktor der Kraftfahrzeug-Konstruktor angesprochen werden. Dieses wird im Beispiel dazu genutzt, die Parameter an letztgenannten weiterzugeben. So muss this.Fabrikat = Fabrikat; nur im Kraftfahrzeug-Konstruktor notiert sein.

Instanz des Prototyps PKW erstellen:

var Golf = new PKW("Volkswagen Golf");
var Ente = new PKW("Citroen 2CV");

Über die Eigenschaft prototype der Konstruktorfunktion können einem Prototyp auch nachträglich Eigenschaften und Methoden hinzugefügt werden. Diese Änderungen wirken sich auf alle davon abgeleiteten Objekte aus:

PKW.prototype.Radanzahl = 4;
PKW.prototype.zeigeRadanzahl = function () {
   window.alert(this.Fabrikat + " hat " + this.Radanzahl + " Räder.");
};
Golf.zeigeRadanzahl(); // Ausgabe: „Volkswagen Golf hat 4 Räder.“
Ente.zeigeRadanzahl(); // Ausgabe: „Citroen 2CV hat 4 Räder.“

Eine nützliche Methode des Object-Prototyps ist hasOwnProperty(Eigenschaftsname). Sie gibt einen booleschen Wert, also true oder false zurück. Dadurch lässt sich ermitteln, ob eine bestimmte Eigenschaft durch dessen Konstruktor selbst oder durch seine Prototyp-Kette definiert wird. Im Beispiel ergibt Golf.hasOwnProperty("Radanzahl") false, ebenso wie Golf.hasOwnProperty("zeigeRadanzahl"). Beide Eigenschaften wurden nachträglich über PKW.prototype hinzugefügt. Golf.hasOwnProperty("Fabrikat") und Golf.hasOwnProperty("weitereEigenschaft") hingegen ergeben true, weil diese Eigenschaften durch die Konstruktoren Kraftfahrzeug und PKW belegt wurden.

Dialogmethoden / Benutzereingaben

Meistens erfolgt die Interaktion mit dem Benutzer über Änderungen an Inhalten des HTML-Dokuments, insbesondere über Formulare im Dokument, dabei greift JavaScript über das DOM (Document Object Model) auf die Elemente des HTML-Dokuments zu. Außerdem stehen drei Methoden des Window-Objektes bereit: alert(), confirm() und prompt(); mit jeder einzelnen dieser Methoden kann man den Benutzer auffällig ansprechen bzw. zu einer Eingabe auffordern. Dafür zeigt eine solche Methode ein modales Fenster an; modal bedeutet, der Benutzer muss dieses Fenster zunächst schließen, bevor er zum aufrufenden Dokument zurückkehren kann.

Alarm-Fenster

Zeigt einen Text in einem eigenen Meldungsfenster an. Beispiel:

window.alert("Hello World");

Bestätigungsfrage

Zeigt einen Dialog mit den Schaltflächen „OK“ und „Abbrechen“ an. Zurückgegeben wird einer der booleschen Werte true oder false, je nachdem welche Schaltfläche der Benutzer auswählt.

var bestaetigt = window.confirm("Bitte bestätigen");

Eingabeaufforderung

Es wird ein Dialog zur Texteingabe angezeigt. Beispiel:

var eingabe = window.prompt("Bitte geben Sie einen Text ein:", "");

Einsatzgebiete für die Dialogmethoden

In einem fertigen Script sind diese Methoden eher selten anzutreffen, während der Script-Entwicklung hingegen werden sie gerne benutzt, um Fehler auszumachen, um mit geringem Aufwand einen Variablenwert zu prüfen oder um festzustellen, ob eine bestimmte Stelle im Script überhaupt erreicht wird.

Fehlerbehandlung

Die neueren Versionen von ECMAScript, wie sie im Internet Explorer 5 und Netscape Navigator 6 eingebaut sind, verfügen über eine von Java übernommene Anweisung try … catch zur Fehlerbehandlung.

Die Anweisung try … catch … finally fängt Ausnahmen (exceptions), die aufgrund eines Fehlers oder einer throw-Anweisung auftreten, ab. Die Syntax ist wie folgt:

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");

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.

Anwendungsbeispiel: „Quadrat einer Zahl berechnen“

Ein einfaches Beispiel für den Einsatz von JavaScript ist die Berechnung des Quadrates einer Zahl. So könnte der Quelltext aussehen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="de">
<head><title>JavaScript-Beispiel: Quadratzahl berechnen</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript">
function Quadrat () {
  var Zahl = parseFloat(document.getElementById("zahl").value);
  if (isNaN(Zahl)) {
    document.getElementById("ergebnis").firstChild.data = "Bitte gib eine gültige Zahl ein!";
  } else {
    var Quadrat = Zahl * Zahl;
    document.getElementById("ergebnis").firstChild.data = "Ergebnis: Das Quadrat von " + Zahl + " ist " + Quadrat + "!";
  }
}
</script>
</head>
<body>
<h1>Quadrat berechnen!</h1>
<p><label>Zahl eingeben: <input type="text" id="zahl" size="4"></label></p>
<p><input type="button" value="Quadrat berechnen!" onclick="Quadrat()"></p>
<p id="ergebnis">Ergebnis: </p>
</body>
</html>

Im realen Einsatz sollte die Funktion zu Beginn prüfen, ob die angesprochenen Seitenelemente im HTML überhaupt existieren, ungefähr so:

function Quadrat () {
 var eingabeort = document.getElementById("zahl");
 var ausgabeort = document.getElementById("ergebnis");
 if (eingabeort && ausgabeort) {
  var Zahl = parseFloat(eingabeort.value);
   ...

JavaScript-Bibliotheken

Für die Erstellung von browserübergreifenden Webanwendungen mit Hilfe von JavaScript stehen JavaScript-Bibliotheken, sogenannte Toolkits bereit. Es handelt sich dabei um eine Sammlung von JavaScript-Funktionen, die den JavaScript-Programmierer in seiner Arbeit unterstützen sollen. Toolkits, die nicht nur häufig benutzte Standardfunktionen zur Verfügung stellen, sondern durch ein besonderes Maß an Abstraktion eine grundlegend andere Programmierung nach sich ziehen, werden auch Frameworks genannt.

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. 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 zählen Adobe Spry, Dojo Toolkit, Ext JS, jQuery, MooTools, Prototype, Qooxdoo, X Library und die Yahoo! UI Library. Speziell mit grafischen Effekten beschäftigen sich Moo.fx und Script.aculo.us.

Literatur

• David Flanagan: JavaScript – das umfassende Referenzwerk. 3. Auflage. O’Reilly, Köln 2007, ISBN 3-89721-491-1
• Danny Goodman: JavaScript, eine Sprache für alles. mitp-Verlag, Bonn 2003, ISBN 3-8266-0914-X
• Tobias Hauser: JavaScript Kompendium – Interaktives und dynamisches Webpublishing. Markt und Technik, München 2003, ISBN 3-82726-465-0
• Stefan Koch: JavaScript – Einführung, Programmierung, Referenz. 4. Auflage. dpunkt.verlag, Heidelberg 2006, ISBN 3-89864-395-6
• Mark Lubkowitz: Webseiten programmieren und gestalten – HTML, CSS, JavaScript, PHP, Perl, MySQL, SVG. 2. Auflage, Galileo Press, Bonn 2005, ISBN 3-89842-557-6
• Michael Seeboerger-Weichselbaum: Das Einsteigerseminar JavaScript. 4. Auflage. bhv, Bonn 2007, ISBN 3-82667-472-3
• Ralph Steyer: JavaScript. Einstieg für Anspruchsvolle. Addison-Wesley, München 2006, ISBN 3-82732-466-1
• Ralph Steyer: Das JavaScript Codebook. Addison-Wesley, München 2008, ISBN 3-82732-717-2
• Christian Wenz: JavaScript und AJAX. Das umfassende Handbuch. 7. Auflage. Galileo Press, Bonn 2006, ISBN 3-89842-859-1
• Jan Winkler: JavaScript. Franzis, Poing 2003, ISBN 3-7723-6007-6

Siehe auch

• Bookmarklet (kleine JavaScript-Programme im Browser)
• ActionScript (Bezeichnung für eine JavaScript-ähnliche Skriptsprache in Flash)
• Lingo (JavaScript in Macromedia Director)
• Aktive Inhalte

Weblinks

• Links zum Thema JavaScript im Open Directory Project

Spezifikationen

• ISO-genormte ECMAScript-Spezifikation (ISO/IEC 16262:2002)
• ECMAScript-Spezifikation (Englisch, PDF)
• ECMAScript-Spezifikation als HTML-Version (Englisch)
• Netscape JavaScript 1.3 Spezifikation von Mozilla (Englisch)
• Core JavaScript 1.5 Spezifikation von Mozilla (Englisch)
  • Übersicht über die Neuerungen in JavaScript 1.6 von Mozilla (Englisch)
  • Übersicht über die Neuerungen in JavaScript 1.7 von Mozilla (Englisch)
  • Übersicht über die Neuerungen in JavaScript 1.8 von Mozilla (Englisch)
• ECMAScript for XML Spezifikation (Englisch, PDF)

Dokumentationen

• JavaScript-Kapitel bei SELFHTML
• Ulrich Kritzner: JavaScript-Programmierhandbuch
• JavaScript und AJAX (Online-Fassung von Christian Wenz: JavaScript und AJAX. Das umfassende Handbuch. Galileo Press, Bonn 2006, ISBN 3-89842-859-1)
• JavaScript Workshop (alt, aber nützlich für Einsteiger)
• Webseiten erstellen mit Javascript Einführung zum Thema JavaScript unter der Creative-Commons-Lizenz

Quellen

1. ↑ Pressemitteilung von SUN zum Erscheinen der JRE 6.0, 11. Dezember 2006.
2. ↑ Brendan Eich: JavaScript at Ten Years, 2005.
3. ↑ Sun Trademarks
4. ↑ MDC: ECMAScript DontEnum attribute
5. ↑ MDC: for each...in