Javascript hat sich zu einer der wichtigsten Programmiersprachen entwickelt. Wer die Grundlagen beherrscht, hat im Handumdrehen das Web 2.0 gemeistert.

Bei den meisten Webanwendungen und dynamischen Webseiten sitzt die Programmlogik auf dem Server: Ein in PHP, Java, Python, oder Perl geschriebenes Skript erzeugt auf Benutzeranfragen zugeschnittene HTML-Seiten. Doch die Browser selbst enthalten mit ihren Javascript-Interpretern eine vollständige und dazu sehr leistungsfähige Laufzeitumgebung.

Javascript-Programme reagieren auf Eingaben des Benutzers und greifen über eine DOM genannte API auf die geöffnete HTML-Seite zu. Diese Schnittstelle von Javascript zu HTML erlaubt es, Attribute für jedes Tag auf der Seite (Farbe, Größe oder Sichtbarkeit) zu ändern. Darüber hinaus bietet sie die Möglichkeit, Bereiche der Seite zu entfernen oder beliebige HTML-Elemente an jeder Stelle der Seite einzufügen (Abbildung 1).

Abbildung 1: Die Javascript-Laufzeitumgebung, die über die DOM-Schnittstelle in beide Richtungen mit der HTML-Seite kommuniziert, reagiert auf Eingaben des Benutzers wie Mausklicks und verändert Inhalt und Eigenschaften von HTML-Tags.

Alte Bekannte

Abgesehen von der Objektorientierung ähnelt Javascript der Programmiersprache C. Viele andere Sprachen, von Java bis Perl, teilen diese Grundstrukturen (Schleifen, Bedingungen, Operatoren) ebenfalls. Darum fällt der Umstieg leicht, solange Sie nur ausschließlich die prozeduralen Elemente der Sprache einsetzt, was das Gliedern des Quellcodes in Routinen für bestimmte Aufgabe umfasst.

Für kleinere Anwendungen funktioniert dies gut. Die für größere Programme unverzichtbare Objektorientierung setzt Javascript allerdings sehr eigenwillig um. Die zweite Hälfte des Artikels widmet sich deshalb dieser speziellen Variante des Kapselns von Daten und Vererbung.

Die Wahl des Namens Javascript folgte eher Marketingüberlegungen als sachlichen Gründen: Außer einem Grundinventar, das Java ohnehin mit C und weiteren Sprachen teilt, übernimmt Javascript nur die Dot-Notation Objekt.Attribut vom großen Bruder. Anders als bei Java handelt es sich bei Javascript jedoch nicht um eine streng objektorientierte Sprache.

Außerdem integriert Javascript Elemente des funktionalen Programmierens, die Java bis heute fehlen. Funktionale Programmiersprachen basieren im Kern auf namenlosen, an Variablen gebundene Funktionen (anonyme Funktionen, Lambda-Funktionen), die Sie auch als Parameter für Funktionen verwenden dürfen. Einen vollständigen Überblick über die Sprachelemente von Javascript, mit Ausnahme der Objektorientierung, finden Sie im Web [2].

Nachhilfe gefragt

Kaum ein Programmierer spricht die DOM-API heute noch direkt an: Zu sehr unterscheidet sich die Implementation von Browser zu Browser, obwohl die Zahl der Unterschiede in den letzten Jahren abgenommen hat. Abgesehen von solchen Problemen das DOM für sich gesehen als unhandlich und sperrig. Deswegen nutzen die meisten Programmierer die Bibliothek JQuery [3] als Zwischenschicht. Dieser einführende Artikel konzentriert sich ausschließlich auf diesen Ansatz.

Das erste kleine Übungsprogramm fügt mithilfe einer Schleife vier farbige Boxen in eine leere Seite ein. Als Beispiel für Interaktivität öffnet ein Klick auf eine der Boxen einen Dialog mit einem abhängig von der Farbe wechselnden Text. Die Zeilen aus Listing 1 zeigen bereits viele Grundzüge der Javascript-Programmierung. In Abbildung 2 sehen Sie das Ergebnis.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){ //ausführen, wenn Anzeige fertig
  var colors = ["red", "green", "blue", "yellow"];
  var names =["rot", "grün", "blau", "gelb"];
  var sayings = {
    "rot":"Rot steht für die Liebe.",
    "grün":"Grün sind die Bäume im Mai.",
    "blau":"Auch roter Wein macht blau.",
    "gelb":"Das Angesicht des Neids ist gelb."
  };
  for (var i in colors){
    var div = $("<div>");
    div.css({"height":"50px", "width":"150px", "background-color":colors[i]});
    div.addClass("colorbox");
    div.html(names[i]);
    $("body").append(div);
  }
  $(".colorbox").on("click", function(){
    var clicked = $(this);
    var farbe = clicked.text();
    alert(sayings[farbe]);
  });
});
</script>

Abbildung 2: Was wie eine simpler, statischer Inhalt aussieht hat der Browser per Javascript dynamisch in eine leere Seite geschrieben. Auf einen Mausklick reagieren die farbigen Felder außerdem mit einem zur Farbe passenden Text-Popup.

Zeile 1 bindet die JQuery-Bibliothek ein, die beim Manipulieren des HTML-Codes zum Einsatz kommt. Enthält das Tag <script> ein Attribut src, verweist es auf eine externe Javascript-Datei. In unserem Fall deutet die URL auf die von Google gehostete Version von JQuery, was den Download der Bibliothek erspart. Der zweite Script-Tag enthält kein entsprechendes Attribut. Dafür umschließt er direkt eingebetteten Programmcode. Der Typ text/javascript verweist in beiden Fällen auf die Sprache der eingebetteten Skripte.

Im Zeichen des Dollars

Gleich als erstes Zeichen des Javascript-Codes springt das Dollarzeichen ins Auge. Über dieses sprechen Sie alle Funktionen von JQuery an. Die erste Zeile erweist sich für Neulinge oft als große Hürde in Bezug auf das Verständnis: Sie öffnet den JQuery-Aufruf $(), der erst vor dem schließenden Script-Tag endet.

Damit hat es folgende Bewandtnis: Der Browser führt Javascript-Code, auf den er beim Parsen der HTML-Seite stößt, immer sofort aus. Dabei passiert es jedoch mitunter, dass der Browser mit der Anzeige der Seite noch nicht fertig ist. Wenn ein Skript dann versucht, auf Elemente der Seite zuzugreifen, scheitert es.

Um dieses Problem zu vermeiden, kapselt die Funktion $() den Teil des Codes, den JQuery erst dann ausführt, wenn der Browser mit der Anzeige des HTML-Codes fertig ist. In unserem Beispiel umfasst $() den gesamten Code. Genau genommen umschließt es den Code nicht selbst, es erhält vielmehr als Parameter eine Funktion ohne Namen (anonyme Funktion, Lambda-Funktion), die den eigentlichen Programmcode enthält.

Abgesehen von der Tatsache, dass der von der anonymen Funktion umschlossene Code garantiert erst dann abläuft, wenn der Browser die Seite aufgebaut hat, ändert sich nichts an dessen Funktionalität.

Anonym und doch präsent

Anonyme Funktionen gehören zu den unverzichtbaren Bestandteilen von Javascript. Event-Handler, die auf die Eingabe von Benutzern reagieren, funktionieren ohne sie nicht (siehe Listing 1, Zeile 22). “Funktion ohne Namen” ist ganz wörtlich zu verstehen: Nach dem Schlüsselwort function folgen gleich die Parameter in runden Klammern (im Beispiel leer, weil es keine Parameter gibt). Lambda-Funktion verhalten sich genau wie einfache Werte (Zahlen oder Strings): Sie dürfen sie einer Variablen zuweisen oder einer Funktion als Parameter übergeben.

Die ersten zwei Zeilen der anonymen Funktion definieren Arrays, die mehrere Strings aufnehmen. Array[Index] greift auf den Inhalt zu. Als Schlüssel eines Arrays sind nur Null sowie positive Ganzzahlen erlaubt. Container mit Strings als Schlüssel, auch als assoziative Array oder in Perl als Hashes bekannt, heißen in Javascript Objekt. Zum Definieren solcher Objekte kommt die JSON-Schreibweise zum Einsatz (“Javascript Object Notation”), die inzwischen auch viele andere Sprachen nutzen.

In JSON umschließen geschweifte Klammern eine mit Komma separierte Liste von Schlüssel-Werte-Paaren (Listing 1, Zeile 7). Der Zugriff erfolgt in der von Java bekannten Dot-Notation: Objekt.Attributname. Immer dann, wenn der Attributname in einer Variablen steckt, funktioniert die ebenfalls erlaubte Array-Schreibweise:

var Name = "Attribut";
var Wert = Objekt[Name]

Variablen gilt es in Javascript übrigens immer mit dem Schlüsselwort var zu deklarieren – nur dann weist der Interpreter sie einem Gültigkeitsbereich zu. Auf diesem Weise bleiben innerhalb von Funktionen deklarierte Variablen außerhalb der Funktion unsichtbar.

Der Beispielcode speichert in den zwei Arrays die Farbcodes der Boxen in für den Browser lesbarer englischer Form und, unter dem gleichen Array-Schlüssel, auf Deutsch. Das in der nächsten Zeile definierte Objekt enthält unter dem Schlüssel des deutschen Namens einen Satz, den das Programm beim Klick auf einen Kasten anzeigt.

Aus dem Nichts

Zunächst gilt es, die Kästen in die leere Seite einzufügen. Das geschieht in der Schleife (Listing 1, Zeile 14). Eine For-Schleife der vorliegenden Form iteriert über die Elemente eines Containers. Die Schleifenvariable enthält in Javascript allerdings nicht die Werte, sondern die Schlüssel des Containers. Den Wert lesen Sie mittels Container[Schleifenvariable] aus (Listing 1, Zeile 16 und Zeile 18).

In der ersten Zeile der Schleife findet sich die zu JQuery gehörige Methode mit dem Dollarzeichen in ihrer einfachsten Form: Übergeben Sie $() HTML-Code, so erzeugt JQuery ein gültiges, aber noch nicht angezeigtes HTML-Fragment. Dabei ergänzt der Browser automatisch den fehlenden schließenden Div-Tag. JQuery kapselt das HTML-Fragment allerdings vor der Rückgabe noch in ein JQuery-Objekt, über das Sie bei Bedarf alle Methoden aufrufen.

Zu diesen Methoden gehört css() in Zeile 16: Sie fügt dem eben erzeugten div ein Style-Attribut hinzu. Als Parameter erwartet css() ein Javascript-Objekt mit Paaren aus Attributname und Wert. So entsteht im Beispiel das folgende Attribut:

style="height:50px; width:150px; background-color: red"

Die nächste Zeile bettet den deutschen Farbnamen aus dem aktuellen Schleifendurchlauf als Text in das Div-Element ein, die übernächste fügt noch eine Klasse zum Element hinzu:

class="colorbox"

Bei $(Selektor).append(Element) handelt es sich um die wohl am häufigsten genutzte Methode in JQuery. Besonders die Selektoren aus dem ersten Teil des Aufrufs erleichtern Entwicklern das Leben ungemein. Hier finden größtenteils die gleichen Ausdrücke Verwendung, mit denen auch CSS [4] Style-Definitionen an HTML-Elemente bindet: Ein Tag-Name greift alle Elemente mit dem Tag eines bestimmten Typs heraus, ein .Klassenname alle Elemente mit class="Klassenname", #Id das Element mit id="Id".

Direkt an den $(Selektor) dürfen Sie beliebig viele Filter-Methoden wie first(), last() oder parent() anhängen. Die ganze Bandbreite zeigt die übersichtliche JQuery-Dokumentation ([5],[6]). Mit diesen Selektoren picken Sie selbst aus komplexen HTML-Seiten jedes Element mit einer einzigen Codezeile heraus, die auf allen gängigen Browsern zuverlässig funktioniert – das macht JQuery so beliebt.

Im Beispiel-Skript genügt ein einfacher Selektor $("body"), der auf den einzigen Body-Tag der Seite passt. Die Methode append(div) fügt den inzwischen mit einem Style, Text und dem Klassenattribut colorbox versehenen Div-Tag am Ende des Seitenkörpers ein. In vier Schleifendurchläufen über das Array colors entstehen also die vier unterschiedlich gefärbten Boxen.

Ereignisreich

Nun fehlt nur noch der Event-Handler, der beim Klick auf eine Box einen Dialog mit dem zur Farbe passenden Eintrag aus dem Objekt sayings öffnet: $(".colorbox") wählt alle Tags der Klasse colorbox aus, also alle eben eingefügten Divs.

Zum Setzen von Event-Handlern bringt die JQuery die Methode on() mit, die – wie schon die Selektoren – Eigenheiten der Browser ausbügelt. Sie erwartet als ersten Parameter den Namen des Events, hier click, als zweiten eine Lambda-Funktion, die bei Eintreten des Events abläuft. Der Lambda-Funktion gibt JQuery ein Objekt mit, das viele Informationen über das aktuelle Event enthält [7].

Für das Beispiel spielt das allerdings keine Rolle. Es genügt zu wissen, dass Javascript-Event-Handler im Kontext jenes DOM-Elements ablaufen, welches das Event auslöst. Hinter this verbirgt sich ein aus vielen Programmiersprachen bekannter Zeiger auf das aktuelle Objekt. Er deutet hier also auf die angeklickte farbige Box.

Um das Element in this zu bearbeiten, rufen Sie die Grundfunktion $() mit this als Parameter auf und binden das Resultat an die Variable clicked. Nun haben Sie die Möglichkeit, mit clicked.Methode() jede Funktion von JQuery auf die angeklickte Box anzuwenden. In vorliegenden Fall kommt text() zum Einsatz, das Sie bereits beim Setzen des Text innerhalb eines Tags kennen gelernt haben.

Parameterlos aufgerufen gibt es den im Tag enthaltenen Text zurück, im Beispiel also den deutschen Farbnamen. Unter diesem Schlüssel hält das Objekt sayings für jede Farbe einen Satz bereit. Mittels sayings[farbe] übergeben Sie diesen an die Methode alert() des Browsers, der ein Dialogfeld mit dem zur Farbe passenden Satz öffnet.

Die höheren Weihen

Private und öffentliche Attribute, Objekte einer Klasse in beliebig vielen Instanzen, sowie Vererbung: All das lässt sich in Javascript umsetzen. Allerdings funktioniert das völlig anders als in klassischen objektorientierten Sprachen. Diese erzeugen Klassen mit dem class-Schlüsselwort, new sorgt für Objektinstanzen, die alle die gleichen Methoden und Datenattribute aus der Klassendefinition enthalten. Javascript kennt ein new-Schlüsselwort, doch für class springt das für eine ganz andere Rolle bekannte Schlüsselwort function ein.

In den letzten beiden Zeilen von Listing 2 kommt die Methode sayHello() zweier unterschiedlicher Instanzen von Greeter zum Einsatz. Beide Instanzen kapseln verschiedene, von außen nicht zugängliche Werte für die Begrüßung – klassische Objektorientierung wie aus dem Lehrbuch.

var Greeter = function(who){
  var toGreet = who;
   this.sayHello = function(){
    alert("Hello, "+ toGreet + "!");
  }
};
var greeter1 = new Greeter("World");
var greeter2 = new Greeter("John");
greeter1.sayHello(); //-> Hello World!
greeter2.sayHello(); //-> Hello John!

Um das kurze Codebeispiel auszuführen, müssen Sie es übrigens nicht in eine Datei schreiben und diese im Browser öffnen: Alle modernen Browser bringen eine Konsole mit, die direkt eingegeben Code zum Testen ausführt (Abbildung 3). Bei Firefox ab Version 4 öffnen Sie diese über [Umschalt]+[Strg]+[K].

Abbildung 3: Obwohl Firefox ab Version 4 von sich aus eine Javascript-Konsole (oben) zum Testen kurzer Codeblöcke mitbringt, leistet das Addons Firebug (unten) wesentlich mehr, zum Beispiel über einen Debugger, der das Programm auf Wunsch anhält.

Besser als die in Firefox eingebaute Konsole ist allerdings nach wie vor das Addon Firebug [8], das einen für größere Projekte hilfreichen Debugger integriert. Der hält das Programm an vorher markierten Stellen an und zeigt den Wert aller Variablen bei den Breakpoints an. Mittels console.log(Wert) geben Sie einen Wert für die Fehlersuche auf der Konsole aus. Bei Objekten zeigt das Addon die Attribute in JSON-Notation an.

Funktionell

Wer Javascript nicht näher kennt, der stellt sich vermutlich die Frage, auf welche Weise eine Funktion die Rolle der Klassendefinition übernimmt. Die Antwort lautet: Funktionen sind in Javascript immer zugleich Objekte. Genau wie bei in JSON-Schreibweise definierten Objekten haben Sie die Möglichkeit, ihnen mit Objektname.Attributname neue Attribute zuweisen. Zum Auslesen kommt die gleiche Notation zum Einsatz.

Dass diese Attribute sowohl einfache Werte als auch Funktionen aufnehmen (im Beispiel sayHello()), ergibt sich ganz natürlich aus der Tatsache, dass Javascript beide Typen grundsätzlich gleich behandelt. Attribute vom Typ “Funktion” verhalten sich genau wie Methoden in anderen objektorientierten Sprachen:

Objekt.Name(Parameter)

Auch das Schlüsselwort this verhält sich im Beispielcode wie in anderen Sprachen: Es deutet auf das Objekt, in dem es steht. this.sayHello setzt also einen Wert für das Attribut sayHello der Funktion. sayHello() verhält sich dann in mit new Greeter gebildeten Objektinstanzen wie eine öffentliche Methode in C++- oder Java-Objekten.

Eingeschlossen

Etwas mehr Kopfzerbrechen bereitet die Zeile var toGreet = who;. Vorab: In Javascript dürfen innerhalb einer anderen Funktion definierte Funktionen (innere Funktionen) stets auf Variablen der sie umgebenden Funktion zugreifen, die äußere Funktion aber natürlich nicht auf die der inneren: Das würde zu einem einzigen durchgängigen Variablen-Gültigkeitsbereich führen.

Die beiden Aufrufe von greeter1.sayHello() und greeter2.sayHello() zeigen außerdem, dass der Wert aus dem Parameter who in toGreet gespeichert bleibt, obwohl die Funktion Greeter schon durchgelaufen ist.

Das liegt daran, dass an Variablen gebundene Funktion in Javascript sozusagen ihre Laufzeitumgebung mit einpacken. Konkret heißt das: Alle Variablen aus der Umgebung von sayHello, auf die die Funktion zugreift, verweilen im Speicher, solange die Funktion selbst an eine Variable gebunden bleibt. Hierfür zeichnen greeter1 und greeter2 verantwortlich, die sayHello() als Attribut enthalten. Diese Technik nennt sich Closure (Einschluss).

Das Prinzip des Closure ist an sich einfach: Der Javascript-Interpreter geht den Code vor dem Ausführen einmal durch und notiert sich, welche Stellen des Programms auf welche Variablen zugreifen. Bei der Frage, wie lange Variablen im Speicher bleiben, gilt die einfache Regel: Alles, was noch gebraucht wird, bleibt im Speicher.

Eltern und Kind

Nun bleibt nur noch das Schlüsselwort new zu erläutern, das aus der Funktionsdefinition Greeter die zwei Objektinstanzen greeter1 und greeter2 macht, die verschiedene Werte für toGreet beherbergen. new Funktion() bewirkt zweierlei: Es erzeugt ein Objekt und es führt function() aus.

Dabei sind function() und das Objekt identisch. Die Funktion verändert sich also bei der Attributzuweisung this.Attributname selbst. Nach dem Ausführen der Funktion bindet der Aufruf new das Funktionsobjekt (das mit der Funktion identische Objekt) an die Variable greeter1 oder greeter2, gerade so, als würde die Funktion mit return this enden.

Objektinstanzen aus einer gemeinsamen Definition entstehen also in Javascript durch den Aufruf new Funktionsvariable(Parameter). Innerhalb der in Funktionsvariable gespeicherten Funktion verhalten sich Variablen wie private Datenfelder oder – wenn ihr Inhalt eine Funktion ist – wie private Methoden. Dagegen erzeugt this.Attributname öffentlich zugängliche Attribute oder Methoden.

Schwieriges Erbe

Stellen Sie sich vor, Sie haben eine Klasse mit fünf Methoden definiert und möchten nun eine neue Klasse bilden, die vier davon übernimmt, die fünfte aber verändert: Ein klarer Fall für Vererbung. Wie das in Javascript geht, demonstriert Listing 3. Darin erhält die von Greeter() abgeleitete Klasse zusätzlich den bayrischen Gruß.

var Greeter = function(who){
  this.toGreet = who;
   this.sayHello = function(){
    alert("Hello, "+ this.toGreet + "!");
  }
};
var extendedGreeter = function() {
  this.bavarianHello = function(){
    alert("Pfiat' Di," + this.toGreet + "!");
  }
};
extendedGreeter.prototype = new Greeter("Vroni");
greeter3 = new extendedGreeter('Vroni');
greeter3.sayHello(); //-> Hello, Vroni!
greeter3.bavarianHello(); //-> Pfiat' Di, Vroni!

Der Code definiert zwei Funktion, Greeter und extendedGreeter. In Greeter haben wir im Vergleich zur früheren Version toGreet in ein öffentliches Attribut verwandelt. extendedGreeter() definiert eine Methode bavarianHello(), die einen bajuwarischen Begrüßungstext ausgibt.

Sie greift dabei auf das in Greeter definierte Attribut toGreet zu. Das funktioniert, weil die erste Zeile nach den Funktionsdefinitionen Greeter und extendedGreeter kombiniert. Diese Zeile bindet eine Instanz von Greeter an das prototype-Attribut der Klassendefinition von extendedGreeter.

Alle Javascript-Objekte enthalten ohne explizite Definition ein prototype-Attribut mit fester Aufgabe: Alle mit new extendedGreeter() erzeugten Instanzen erben die Attribute des an prototype gebundenen Objekts.

Allerdings gilt dies nur für die öffentlichen, mit this.Attributname definierten Attribute. Darum gilt es die Klasse Greeter zu verändern, um diese zu erweitern. Abbildung 4 zeigt einen Object-Dump der Firebug-Konsole mit der geerbten Methode sayHello() und dem neu hinzugefügten bavarianHello().

greeter3 in die Firebug-Konsole (zweite, grüne Zeile links) zeigt, dass das Vererben aus dem Beispiel funktioniert: Das Objekt enthält das Attribut toGreet sowie die Methoden bavarianHello() und sayHello().” width=”300″ height=”89″ /> Abbildung 4: Ein Dump des Objekts greeter3 in die Firebug-Konsole (zweite, grüne Zeile links) zeigt, dass das Vererben aus dem Beispiel funktioniert: Das Objekt enthält das Attribut toGreet sowie die Methoden bavarianHello() und sayHello().

Kollateralschaden

Ein Vererben privater Attribute funktioniert in Javascript nur über Umwege – mit unterschiedlichen Auswirkungen auf die Performance ([9],[10]). Dass keine Kombination der beiden mächtigsten Features von Javascript – dem Erzeugen von Objektinstanzen mit new und einer Closure sowie dem Vererben auf Basis des Prototype-Attributs – möglich ist, hat der Sprache viel Kritik eingebracht.

Die Objektorientierung in Javascript wirkt unausgegoren. Sie ist, wie viele Webstandards, vom Browser-Krieg zwischen Netscape und Microsoft gezeichnet: In dem Streben, den Konkurrenten auszustechen, hat Netscape die Sprache wohl zu hastig zum Standard erhoben.