In dieser Einführung geht es um die Nutzung und Ausführung von JavaScript auf dem Client-Rechner im Browser.
Um dies zu verstehen, müssen wir uns das Client-Server-Modell in Erinnerung rufen: Daten im Web werden mittels HTTP übertragen (englisch Hypertext Transfer Protocol = Hypertext-Übertragungsprotokoll). Dieses Protokoll nutzt ein Anfrage-Antwort-Modell. Der Rechner des Anwenders, genannt Client (englisch für Kunde) stellt eine Verbindung zum Server (englisch für Anbieter) her und schickt eine Anfrage. Dies kann z.B. die Anweisung sein, ihm eine bestimmte Adresse zu liefern. Der Webserver antwortet darauf in der Regel mit einer Bestätigung und sendet z.B. ein HTML-Dokument zurück.
Der Client kontaktiert den Server nicht direkt, um JavaScript anzufordern. JavaScript wird in ein HTML-Dokument eingebettet oder mit ihm verknüpft. Sobald der Browser eine solche Verknüpfung sieht, fordert er auch das JavaScript in einer gesonderten Anfrage an. Das JavaScript wird also erst aktiv, wenn das HTML-Dokument zumindest teilweise beim Client angekommen ist und der Browser das Dokument verarbeitet.
Ein häufiges Missverständnis ist, dass clientseitiges JavaScript mit serverseitigen Programmiersprachen gemischt werden kann. Die Ausführung von Serverprogrammen (wie z.B. PHP-Scripten) und die Ausführung von JavaScripten finden jedoch streng nacheinander und voneinander getrennt statt. Serverseitiger PHP-Code kann nicht direkt clientseitigen JavaScript-Code ausführen und umgekehrt, wie folgender Ablauf zeigen soll.
Der Webserver nimmt die Anfrage entgegen. Das Serverprogramm wird gestartet und generiert üblicherweise ein HTML-Dokument, welches JavaScript enthalten kann. Dieser JavaScript-Code kann dynamisch durch das Serverprogramm zusammengesetzt werden.
Das Serverprogramm läuft meistens nicht mehr als ein paar Sekunden und beendet sich dann. Damit endet der Wirkungsbereich des Serverprogramms: Es startet, wenn eine Client-Anfrage empfangen wird, und endet, bevor das generierte HTML-Dokument zum Client übertragen wird.
Dies soll zeigen, wie server- und clientseitige Programme zusammenarbeiten, aber doch getrennt sind – denn sie laufen nacheinander auf verschiedenen Rechnern, wirken in einer unterschiedlichen Umgebung und erfüllen andere Aufgaben.
Zu allem Überfluss ist JavaScript nicht auf dem Client eingeschlossen, sondern kann von sich aus mit Serverprogrammen interagieren. JavaScripte können allerdings nicht direkt Programmcode auf dem Server aufrufen. Die einzige Möglichkeit ist, eine HTTP-Anfrage im Hintergrund zu starten. Diese Technik werden wir später unter dem Begriff Ajax kennenlernen.
Nachdem wir die Übertragung von HTML-Dokumenten vom Webserver zum Browser betrachtet haben, müssen wir uns vor Augen führen, wie der Browser das Dokument verarbeitet.
Der HTML-Code liegt dem Browser zunächst als bloßer Text vor. Noch während der Browser den Code über das Netz empfängt, verarbeitet er ihn Stück für Stück. Diese Aufgabe übernimmt der sogenannte Parser (englisch parse = einen Satz in seine grammatikalischen Einzelteile zerlegen). Der Parser überführt den HTML-Code in eine Objektstruktur, die dann im Arbeitsspeicher vorgehalten wird. – Mit Objekt ist hier ein Bündel von Informationen im Speicher gemeint. – Diese Objektstruktur besteht aus verschachtelten Knoten, allen voran Elementknoten und Textknoten, die in einer Baumstruktur angeordnet sind.
Der Browser nutzt für alle weiteren Operationen diese Objektstruktur, nicht den HTML-Quellcode, an dem der Webautor üblicherweise arbeitet. Insbesondere CSS und JavaScript beziehen sich nicht auf den HTML-Code als Text, sondern auf den entsprechenden Elementbaum im Speicher. Wie diese Objektstruktur aufgebaut ist, ist im besagten Document Object Model geregelt.
Wie kommen nun JavaScripte ins Spiel? Entweder bettet das HTML-Dokument direkt JavaScript-Code ein. Oder das HTML-Dokument verweist auf eine externe JavaScript-Dateien. Der Browser fordert die JavaScript-Datei ebenfalls vom Server an und führt ihn aus. Das passiert noch während das Dokument Stück für Stück verarbeitet (geparst) und dargestellt wird. Dazu verfügen die heutigen Browser über einen eingebauten JavaScript-Interpreter.
Doch nicht alle Browser verfügen über einen JavaScript-Interpreter. Schon gar nicht alle Programme, die in irgendeiner Weise Webseiten verarbeiten. Zudem verfügen die jeweiligen Interpreter über sehr unterschiedliche Fähigkeiten.
Selbst wenn der Browser einen JavaScript-Interpreter besetitzt, so gibt es viele Gründe, warum JavaScript nicht ausgeführt wird oder nicht alle Techniken nutzen kann: Der Anwender kann den Interpreter für alle oder für bestimmte Webseiten deaktivieren. Die Ausführung von JavaScripten kann aus Sicherheitsgründen gesperrt oder beschränkt sein. Oder ein sogenannter Proxy, ein vermittelnder Rechner zwischen Client und Server, kann den Code während der Übertragung herausfiltern.
JavaScript basiert auf sogenannten Objekten, die die Umgebung abbilden, in der ein Script arbeitet. Der Zugriff auf das Browserfenster und das Dokument erfolgt über Objekte, die nach bestimmten Regeln aufgebaut sind. Diese Regeln für den Aufbau von Objekten werden auch Objekt-Typen genannt.
JavaScript-Objekte sind Schachteln für weitere Informationen. Ein Objekt funktioniert wie eine Zuordnungsliste, die unter einem Namen einen bestimmten Wert speichert. Die Namen werden Eigenschaften, im Englischen Properties oder Member genannt. Die Werte heißen im Englischen Values. In einer Eigenschaft kann wieder ein Objekt gespeichert sein. Objekte können somit beliebig verschachtelt werden.
Wie gesagt besteht das HTML-Dokument aus Sicht des DOM aus Knoten. Diese Knoten werden im JavaScript ebenfalls als Objekte angesprochen. Wir haben es also mit Knotenobjekten zu tun, die häufigsten sind Elementobjekte.
Eines sei vorweggenommen: Wenn wir eine Eigenschaft eines Objekts ansprechen wollen, so notieren wir im JavaScript-Code den Namen des Objekts, dann einen Punkt und schließlich den Namen der Eigenschaft. Beispielsweise: objekt.eigenschaft.
JavaScripte werden immer im Kontext eines Browserfensters ausgeführt. Dieses Browserfenster wird in JavaScript durch ein Objekt abgebildet. Es trägt den Namen window und wird globales Objekt genannt. Es ist in der Rangordnung von JavaScript das oberste und wichtigste Objekt.
Daran hängt das Objekt document als Unterobjekt. Es bildet das HTML-Dokument ab, das im Fenster dargestellt wird.
Mit Fenster ist in der Regel ein gewöhnliches Browserfenster gemeint. In einem Browserfenster können aber auch mehrere HTML-Dokumente dargestellt werden. Das ist der Fall bei Frames, Inner Frames (iframes) und Popup-Fenstern. Jedes dieser verschachtelten Fenster hat seine eigenen window- und document-Objekte.
Mit JavaScript haben Sie also Zugriff auf das Fensterobjekt. Das bedeutet nicht, dass Sie den gesamten Browser unter Ihrer Kontrolle haben. Das Fensterobjekt ist bloß eine Repräsentation und ist eine Ansammlung ausgewählter Funktionen und Eigenschaften.
Ein JavaScript wird immer im Kontext genau eines Fensters und genau eines Dokuments ausgeführt. Wenn der Browser mehrere Dokumente gleichzeitig anzeigt, wie etwa bei Frames, kann ein JavaScript jedoch auch auf andere Fenster und Dokumente zugreifen – zumindest prinzipiell, denn es gibt bestimmte Sicherheitshürden.
Dies sind nur die Grundlagen der beiden zentralen JavaScript-Konzepte. Genaueres erfahren Sie im Kapitel über Fenster und Dokumente sowie im Kapitel über Sicherheit.
JavaScripte arbeiten nicht im leeren Raum, sondern wie gesagt im Rahmen eines Browserfensters, in dem ein HTML-Dokument dargestellt wird. Wie erfolgt nun die Verbindung von HTML und JavaScript? Wann wird ein Script aktiv?
In dem Moment, in dem der Browser den HTML-Code einliest, in die besagte Objektstruktur überführt und die Darstellung berechnet, werden auch alle mit dem Dokument verknüpften Scripte ausgeführt.
Ihre Hauptarbeit leisten Scripte aber nicht in diesem Moment des Ladens der Seite. Sie werden zwar kurz aktiv, legen sich dann üblicherweise wieder schlafen. Sie werden erst wieder aktiv, wenn etwas im Dokument passiert. Denn JavaScript arbeitet nach dem Prinzip der Überwachung und Behandlung von Ereignissen (im Englischen event handling). Ein Ereignis kann vieles sein. Es geht dabei vor allem um Benutzereingaben. Beispielsweise:
keypress)click)Neben diesen Ereignissen, die direkt auf Benutzereingaben wie Tastendrücke und Mausklicks zurückgehen, gibt es solche, die sich auf die Interaktion mit Formularen beziehen:
focus)change)submit)Schließlich können auch Ereignisse überwacht werden, die sich auf das ganze Fenster oder das Dokument beziehen:
load)resize)Ein solches Ereignis lässt sich nun mit der Ausführung einer JavaScript-Funktion verbinden. (Eine Funktion ist einen wiederverwendbarer Teil des Programmes - dazu später mehr im entsprechenden Kapitel.) Immer wenn das Ereignis eintritt, wird dann die angegebene Funktion ausgeführt. Auf diese Weise folgt auf eine Aktion des Anwenders eine JavaScript-Reaktion folgen.
Um ein Ereignis zu überwachen, sind drei Bestandteile nötig:
click, das bedeutet alle Mausklicks.Mit JavaScript können wir nun solche Regeln formulieren: Wenn das Ereignis click beim Element mit der ID button eintritt, führe die Handler-Funktion begrüßung aus. Klickt der Benutzer auf das besagte Element, wird die Funktion begrüßung ausgeführt und darin kann auf die Benutzereingabe reagiert werden.
Mit Fug und Recht kann behauptet werden, dass das event handling das wichtigste Konzept von JavaScript ist: Die Programmierung von JavaScript besteht zum größten Teil aus dem Entwerfen von Abläufen, die durch Ereignisse gesteuert werden. Gleichzeitig bringt dieser Bereich große Herausforderungen mit sich, die die Praxis ungemein erschweren.
Genaueres zum Thema können Sie im Kapitel Grundlagen der Ereignis-Verarbeitung erfahren.