JavaScript: Grundlegende Konzepte

Clientseitige Scriptsprache

Bei JavaScript handelt es sich um eine Programmiersprache, die auf dem Client-Rechner direkt im Browser ausgeführt wird.

Um dies zu verstehen, müssen wir uns das Client-Server-Modell in Erinnerung rufen: Daten im Web werden mittels HTTP (englisch Hypertext Transfer Protocol = Hypertext-Übertragungsprotokoll) übertragen. Dieses Protokoll funktioniert nach einem Anfrage-Antwort-Schema. Der Rechner des Anwenders, genannt Client (englisch Kunde) stellt eine Verbindung zum Server (englisch Diener, 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.

JavaScript ist der Datenübertragung zwischen Anwender-Rechner und Webserver nachgeordnet. Scripte werden in ein HTML-Dokument eingebettet oder mit ihm verknüpft. Sie werden erst aktiv, wenn das HTML-Dokument beim Client-Rechner (zumindest teilweise) angekommen ist und der Web-Browser das Dokument samt Scripten verarbeitet.

Zusammenarbeit zwischen server- und clientseitigen Programmen

Ein häufiges Missverständnis ist, dass 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 strikt nacheinander und voneinander getrennt statt. Serverseitiger PHP-Code kann nicht direkt clientseitigen JavaScript-Code ausführen und umgekehrt, wie folgender Ablauf zeigen soll.

  1. Der Client sendet eine HTTP-Anfrage an den Server, wenn der Anwender einen Hyperlink aktiviert oder ein Formular absendet.
  2. 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, um eine Client-Anfrage zu verarbeiten, und endet, bevor das generierte HTML-Dokument zum Client übertragen wird.

  3. Der Browser auf dem Client empfängt den HTML-Code und verarbeitet ihn. In diesem Moment werden mit dem Dokument verknüpfte JavaScripte ausführt.

Dies soll zeigen, wie server- und clientseitige Programme zusammenarbeiten, aber doch getrennt sind – denn sie laufen nacheinander auf verschiedenen Rechnern, operieren in einer unterschiedlichen Umgebung und erfüllen andere Aufgaben.

Zu allem Überfluss ist JavaScript nach der Darstellung des HTML-Dokuments im Browser 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.

Dokument-Objektmodell (DOM), Elementobjekte und Knoten

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, Attributknoten 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 Elementenbaum im Speicher. Wie diese Objektstruktur aufgebaut ist, ist im besagten Document Object Model geregelt.

JavaScript-Interpreter

Wie kommen nun JavaScripte ins Spiel? JavaScript-Code wird direkt in HTML-Dokumente eingebettet oder indirekt mit externen Dateien eingebunden. Der Browser ruft den JavaScript-Code ebenfalls vom Web-Server ab und führt ihn aus, noch während das Dokument Stück für Stück analysiert (geparst) und dargestellt wird. Dazu verfügen die heutigen Web-Browser über einen eingebauten JavaScript-Interpreter.

Doch nicht alle Browser verfügen über einen solchen, schon gar nicht alle Programme, die in irgendeiner Weise Webseiten verarbeiten. Zudem verfügen die jeweiligen Interpreter über sehr unterschiedliche Fähigkeiten. Nicht zuletzt gibt es viele Gründe, warum ein JavaScript trotz vorhandenem Interpreter nicht ausgeführt wird oder nicht alle JavaScript-Techniken nutzen kann: Der Anwender kann den Interpreter für alle Websites oder für eine bestimmte abschalten. 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.

Objektbasierung

JavaScript basiert auf sogenannten Objekten, die die Umgebung repräsentieren, in der ein Script arbeitet. Der Zugriff auf das Browserfenster sowie das Dokument erfolgt über Objekte, die nach ganz bestimmten Regeln (Objekt-Typen) aufgebaut sind.

JavaScript-Objekte sind allgemein gesprochen Container für weitere Informationen. Ein Objekt funktioniert wie eine Zuordnungsliste, die unter einem Namen einen bestimmten Wert speichert. Diese Einträge werden Eigenschaften, im Englischen Properties oder Member genannt. Objekte können auf diese Weise beliebig verschachtelt werden, sodass ein Objekt Unterobjekte als Eigenschaften enthält.

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 bzw. ein Unterobjekt eines Objektes ansprechen wollen, so notieren wir im JavaScript-Code den Namen des einen Objektes, dann einen Punkt und schließlich den Namen der Eigenschaft. Beispielsweise: objekt.eigenschaft.

Fenster und Dokumente

JavaScripte werden immer im Kontext eines HTML-Dokuments ausgeführt, das in Form eines Objektes namens document vorliegt. Zu jedem solchen Dokumentobjekt gehört immer ein Fensterobjekt. Es trägt den Namen window und wird globales Objekt genannt, weil es in der Objekthierarchie von JavaScript das oberste und wichtigste ist. Daran hängt das Dokumentobjekt document als Unterobjekt.

Mit Fenster ist in der Regel ein gewöhnliches Browserfenster gemeint – lediglich im Falle von Frames, Inner Frames und Popup-Fenstern werden in einem Browserfenster mehrere Dokumente mit mehreren Fensterobjekten dargestellt. Dass Sie mit JavaScript Zugriff auf das Fensterobjekt haben, bedeutet nicht, dass Sie den gesamten Browser unter Ihrer Kontrolle haben. Das Fensterobjekt ist bloß eine Repräsentation und dient als ordnendes Objekt, um darin gewisse Funktionen und Eigenschaften unterzubringen.

Ein JavaScript wird immer im Kontext genau eines Dokuments und genau eines Fensterobjekts ausgeführt. Wenn mehrere zusammenhängende Dokumente parallel im Browser angezeigt werden, wie etwa bei Frames, kann ein JavaScript jedoch auch auf andere Fensterobjekte 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 Kapital über Sicherheit.

Ereignisse (Events)

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:

Neben diesen Ereignissen, die direkt auf Benutzereingaben wie Tastendrücke und Mausklicks zurückgeben, gibt es unter anderem solche, die sich auf die Interaktion mit Formularen beziehen:

Schließlich können auch Ereignisse überwacht werden, die sich auf das ganze Dokument oder das zugehörige Fenster beziehen:

Ein solches Ereignis lässt sich nun mit der Ausführung einer JavaScript-Funktion verbinden (Teilprogramme werden in JavaScript in sogenannten Funktionen gruppiert - dazu später mehr im entsprechenden Kapitel). Immer wenn das Ereignis eintritt, wird dann die angegebene Funktion ausgeführt. Auf diese Weise kann auf eine Aktion des Anwenders eine JavaScript-Reaktion folgen.

Um ein Ereignis zu überwachen, sind drei Bestandteile nötig:

  1. Die Stelle, wo das Ereignis überwacht werden soll: Fensterweit, dokumentweit oder nur an einem bestimmten Element im Dokument.
  2. Der Typ des Ereignisses. Zum Beispiel click, das bedeutet alle Mausklicks.
  3. Die JavaScript-Funktion, die beim Ereignis ausgeführt werden soll. Diese Funktion wird auch Handler oder Handler-Funktion genannt (englisch handle = verarbeiten, abwickeln).

Mit JavaScript können wir nun solche Regeln formulieren: Überwache das Ereignis click beim Element mit der ID button und führe die Handler-Funktion begrüßung aus, wenn das Ereignis eintritt. 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 folgenreichste Konzept von JavaScript ist: Die heutige Programmierung von JavaScripten besteht zum allergrößten Teil aus dem Entwerfen Ereignis-gesteuerter Abläufe. Gleichzeitig bringt dieser Bereich große Herausforderungen mit sich, die die Praxis ungemein erschweren.

Genaueres zum Thema können Sie im Kapitel Grundlagen zur Ereignisverarbeitung erfahren.