vorheriges KapitelInhaltsverzeichnisStichwortverzeichnisFeedbacknächstes Kapitel


Tag 8

Wozu JavaScript?

Wer sich als Webautor überlegt, wie er mehr Interaktivität in seine Webseiten einbauen könnte, der wird nicht gleich an CGI oder Java denken. Die erste und meist die einfachste Option ist üblicherweise die Einbindung von JavaScript-Skripten. Was aber ist ein JavaScript-Skript? Was ist überhaupt JavaScript? Wie kann man JavaScript-Skripte in Webseiten einbinden, und was kann man eigentlich mit JavaScript so alles machen? Diesen Fragen wollen wir am heutigen Tag nachgehen.

Die Themen im Einzelnen:

8.1 Was ist JavaScript?

JavaScript ist eine Skriptsprache. Das soll heißen, dass JavaScript-Programme nicht kompiliert, sondern interpretiert werden.

Kompilation versus Interpretation

Der erste Schritt beim Programmieren besteht immer darin, den Quelltext des Programms aufzusetzen. Der Quelltext ist ein einfacher, unformatierter ASCII-Text, in dem man die Befehle niederschreibt, die der Rechner bei Ausführung des Programms abarbeiten soll - natürlich unter Verwendung der für die jeweils verwendete Programmiersprache üblichen Syntax.

Listing 8.1: Beispielquelltext für ein C++-Programm

#include <iostream>
using namespace std;

int main()
{
cout << "Hallo Welt!" << endl;
return 0;
}

Mit diesem Quelltext kann der Rechner allerdings nichts anfangen. Dazu ist ein zweiter Schritt erforderlich, nämlich die Umwandlung des Quelltextes in Maschinencode (Maschinencode ist binärcodiert (Folge von Nullen und Einsen) und verwendet einen kleinen Satz elementarer Befehle, die der Prozessor des Rechners versteht).

Zur Umwandlung eines Quelltextes in Maschinencode gibt es zwei unterschiedliche Konzepte:

Kompilation

Hierzu wird ein spezielles Programm (der Compiler) aufgerufen, das den Quelltext des Programms in Maschinencode übersetzt. Das Ergebnis ist eine ausführbare Datei (EXE- Datei). Diese kann als eigenständiges Programm direkt aufgerufen und ausgeführt werden.

Interpretation

Hier fallen Übersetzung und Ausführung des Programms zusammen. Dies leistet der Interpreter. Er liest das Programm Zeile für Zeile ein, erzeugt entsprechenden Maschinencode und lässt diesen direkt ausführen.

Clientseitig versus serverseitig

Bei der Programmierung für Webseiten muss man zwischen serverseitiger und clientseitiger Programmierung unterscheiden. Vor JavaScript kannte man nur die serverseitige Programmierung, bei der die Programme auf dem Webserver-Rechner ausgeführt werden, auf dem auch die Webseiten liegen. Dies sah und sieht dann beispielsweise so aus:

Abbildung 8.1:  Ausführung eines serverseitigen Programms

  1. Der Webbesucher füllt ein Formular aus und klickt auf den Abschicken-Schalter des Formulars. Der Autor der Webseite hat den Abschicken-Schalter des Formulars mit dem URL eines serverseitigen Programms verbunden.
  2. Der Webbrowser schickt dem Webserver, der in dem URL angegeben ist, eine Aufforderung, dass Programm aufzurufen und diesem die Formulardaten zu übergeben.
  3. Der Webserver ruft das Programm auf. Das Programm wird auf dem Server-Rechner ausgeführt und verarbeitet die Formulardaten. Als Ergebnis erzeugt es beispielsweise den HTML-Code einer Antwortseite.
  4. Der Webserver schickt die vom Programm generierte Webseite an den Browser zurück.
  5. Der Webbesucher sieht in seinem Browser die Bestätigung, dass seine Formulardaten angekommen sind und verarbeitet wurden.

Diese Form der Webseitenunterstützung durch Programme ist äußerst mächtig und aus der heutigen Webtechnologie nicht mehr wegzudenken, und dennoch gibt es auch Nachteile, die mit ihr verbunden sind.

Kurz gesagt: Die serverseitige Programmierung ist schwerfällig und sehr technisiert. Viele Webdesigner suchen hingegen das genaue Gegenteil: einen Weg, wie man Webseiten ohne jahrelange Programmiererfahrung und großen technischen Aufwand dynamischer und lebendiger machen kann. Sie finden ihn in der clientseitigen Programmierung mit JavaScript.

Bei der Programmierung mit JavaScript schreibt der Webdesigner den Programmcode direkt in den HTML-Code der Webseite (oder in eine externe Datei, die über einen src- Verweis eingebunden wird). Der JavaScript-Code wird mit der Webseite auf die Rechner der Webbesucher (zur Unterscheidung vom Server-Rechner spricht man in diesem Falle von den Client-Rechnern) heruntergeladen und dort mit Hilfe eines Interpreters ausgeführt. Da der Programmcode direkt auf den Client-Rechnern ausgeführt wird, ist die Ausführung viel schneller, der Webserver wird nicht weiter belastet und, weil die Programme auch kein Sicherheitsrisiko mehr für den Webserver darstellen, entfällt der ganze Verwaltungsaufwand, der mit der serverseitigen Programmierung verbunden ist.

Abbildung 8.2:  Ausführung eines clientseitigen Programms

Offensichtlich ist JavaScript der serverseitigen Programmierung gerade in den Punkten überlegen, die dieser zum Nachteil gereichen. Da könnte sich die Frage aufdrängen, ob man nicht ganz zugunsten der clientseitigen Programmierung mit JavaScript auf die serverseitige Programmierung verzichten sollte? Die klare Antwort ist: nein, clientseitige Programmierung mit JavaScript ist kein Ersatz für die serverseitige Programmierung, sondern eine Ergänzung. Die clientseitige und die serverseitige Webprogrammierung beruhen auf grundverschiedenen technischen Voraussetzungen, die jeweils eigene Vor- und Nachteile und Einsatzgebiete mit sich bringen. Für dynamische Effekte und schnelle Interaktion mit dem Webbesucher eignet sich vor allem die clientseitige Programmierung mit JavaScript, für anspruchsvollere Aufgaben oder das Zurückliefern von Daten an den Webserver (beispielsweise Bestellungen und Aufträge in E-Commerce-Systemen) ist die serverseitige Programmierung unersetzlich.

JavaScript und der Browser

Da JavaScript eine interpretierte Sprache ist, bedarf es zur Ausführung von JavaScript- Code eines Interpreters. Anders ausgedrückt: Wenn jemand, der auf seinem System keinen JavaScript-Interpreter installiert hat, in seinem Browser Ihre mit JavaScript aufgepeppte Webseite anschaut, kann er von den ganzen dynamischen JavaScript-Effekten rein gar nichts sehen.

Sollten wir also beim Einsatz von JavaScript Vorsicht walten lassen und eventuell gar auf das Skripting verzichten? Nein, denn schon seit mehreren Generationen werden die gängigsten Browser mit integriertem JavaScript-Interpreter ausgeliefert. Es dürfte also kaum noch Internet-Nutzer geben, die mit Browsern ohne JavaScript-Unterstützung surfen.

Über mangelnde Unterstützung seitens der Browser können wir uns also nicht beklagen, wohl aber über mangelnde Einheitlichkeit, denn JavaScript im Internet Explorer ist nicht dasselbe wie JavaScript im Netscape Navigator (oder irgendeinem anderen Browser). Dies hat unter anderem historische Gründe.

Geschichte

JavaScript wurde von Netscape Communications Corp. entwickelt und 1995 zum ersten Mal vorgestellt (damals noch unter dem Namen LiveScript). Durch die Integration des JavaScript-Interpreters in den damals marktführenden Netscape Navigator 2 sorgte Netscape für eine schnelle und weite Verbreitung - Grundvoraussetzung dafür, dass die Sprache auch von den Webdesignern akzeptiert wurde. Diese musste man denn auch nicht lange bitten, sie stürzten sich begierig auf die (damals noch recht beschränkte) neue Technologie, mit deren Hilfe man zum ersten Mal in der Geschichte des Webs clientseitigen Code zur Unterstützung von Webseiten aufsetzen konnte.

Angesichts der wachsenden Popularität und des Potentials, das in dieser Technologie steckte, dauerte es nicht lange, bis Microsoft zusammen mit den Internet Explorer 3 seinen eigenen JavaScript-Dialekt präsentierte (der aus lizenzrechtlichen Gründen JScript heißt). Beide Browser-Hersteller entwickelten Ihre JavaScript-Dialekte beständig weiter, immer hin- und hergerissen zwischen der Unterstützung des jeweils anderen Dialekts und der Einführung eigener, proprietärer Erweiterungen.

Um zu verhindern, dass die beiden Dialekte zu weit auseinander driften, begann das europäische ECMA-Institut bereits Ende 1996 damit, auf der Grundlage von Netscape- JavaScript und Microsoft-JScript einen allgemeinen Skript-Standard zu erarbeiten. Dieser wurde 1997 zum offiziellen ECMA-Standard, 1998 wurde er zudem als ISO/IEC-Standard anerkannt. Seitdem wurden sowohl die Dialekte als auch der Standard stetig verbessert und erweitert, der Kern der Sprache ist mittlerweile aber recht stabil und einheitlich.

Der ECMA-Standard regelt nur die Syntax der Sprache, mindestens ebenso wichtig für den Webdesigner und JavaScript-Programmierer1 ist allerdings der Zugriff von JavaScript- Programmen aus auf die HTML-Elemente der Webseiten. Für diese Schnittstelle wurde erst im Oktober 1998 eine offizielle Empfehlung ausgesprochen (DOM 1-Referenz des W3C), und so ist es nicht verwunderlich, dass es hier gravierende Unterschiede zwischen den Browsern gibt. Wir werden uns an gegebener Stelle noch ausführlicher damit beschäftigen müssen.

8.2 JavaScript-Code in Webseiten einbinden

JavaScript-Code kann über das Tag <script> oder eines der in HTML definierten Ereignisattribute (onload, etc.) eingebunden werden.

Das <script>-Tag

Wie bereits erwähnt, kann man JavaScript-Code direkt in den HTML-Code der Webseite schreiben, man muss den Code lediglich in <script>-Tags einbinden, um dem Browser mitzuteilen, dass nun kein anzuzeigender Text, sondern ein Skript folgt.

<script type="text/javascript">
. . . hier steht der Skript-Code ...
</script>

Das Attribut type="text/javascript" ist übrigens für jedes <script>-Tag zwingend vorgeschrieben, da es neben JavaScript noch andere Skriptsprachen für die clientseitige Programmierung gibt. Über das type-Attribut teilen wir dem Browser mit, welche Skriptsprache wir verwenden und welchen Interpreter er zur Ausführung des Skript-Codes aufrufen muss. Mögliche Werte für das type-Attribut sind: text/javascript, text/vbscript und text/tcl.

Früher wurde zu diesem Zweck meist das language-Attribut verwendet, doch ist dessen Gebrauch mittlerweile »deprecated«.

JavaScript-Code kann man übrigens überall im HTML-Code einfügen - im Header- wie im Body-Abschnitt. Für welchen Ort man sich entscheidet, hängt meist davon ab, was man mit dem JavaScript-Code machen will (siehe nachfolgender Abschnitt).

Ausführung und Ort der Deklaration

Es gibt drei Wege wie JavaScript-Code ausgeführt werden kann:

Automatische Ausführung beim Laden der Webseite

Lädt der Browser eine Webseite mit Skriptcode geht er sämtliche <script>-Tags durch und schaut, ob diese ausführbaren Code enthalten. Wenn ja, führt er diesen aus. Man kann dies auf unterschiedliche Weise nutzen.

Eine Möglichkeit ist zum Beispiel per JavaScript HTML-Code in die Webseite einzufügen. In diesem Fall fügt man den Skriptcode im Body-Abschnitt an der Stelle ein, wo später die HTML-Ausgabe des Skripts stehen soll.

Listing 8.2: script1.html - automatische Ausführung von Skriptcode

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>JavaScript</title>
</head>

<body>

<h1>Und jetzt der JavaScript-Code:</h1>

<script type="text/javascript">

document.write("<p>Hier spricht Ihr <em>JavaScript!<em><p>");

</script>

</body>
</html>

Abbildung 8.3:  JavaScript-generierte Ausgabe

Man kann die automatische Ausführung aber auch dazu nutzen, beim Laden der Webseite irgendwelche Arbeiten zu erledigen, die keine direkt sichtbare Ausgabe erzeugen, beispielsweise Cookies einzurichten oder vorab schon einmal die Bilder für eine später auszuführende JavaScript-Animation zu laden. In diesem Falle empfiehlt es sich, den Skript-Code der besseren Übersicht wegen in den Header-Abschnitt einzufügen.

In JavaScript wird streng zwischen Groß- und Kleinschreibung unterschieden. Wenn wir in obigem Beispiel Document statt document schreiben würden, wäre der Code fehlerhaft!

Ausführung bei Eintritt eines bestimmten Ereignisses

Neben der automatischen Ausführung gibt es die Möglichkeit, JavaScript-Code bei Eintritt eines bestimmten Ereignisses ausführen zu lassen. Die HTML-Spezifikation definiert zu diesem Zweck eine ganze Reihe von Ereignissen, beispielsweise:

Aufgabe des Browser ist es, alle diese Ereignisse zu überwachen. Tritt eines dieser Ereignisse ein, prüft der Browser, ob das Ereignis vom Autor der Webseite mit JavaScript- Code verbunden wurde. Wenn ja, führt er diesen aus.

Ein Ereignis mit JavaScript-Code zu verbinden, ist nicht schwer. Man muss nur wissen, wie das zugehörige HTML-Attribut heißt und auf welche HTML-Tags man es anwenden kann. Das Attribut zu dem Laden-Ereignis der Webseite heißt beispielsweise onload und ist nur für das <body>-Tag definiert.

Eine Übersicht über die von HTML definierten Ereignis-Attribute, die übrigens alle mit »on« anfangen, finden Sie in Kapitel 10.1.

Möchte man beispielsweise per JavaScript den Hintergrund einer Webseite beim Laden blau einfärben, schreibt man:

<body onload="document.bgColor = 'blue';">

Möchte man umfangreicheren Code mit einem Ereignis verbinden, ist die obige Syntax allerdings recht unbequem und unübersichtlich. Als Ausweg lagert man den Skriptcode in <script>-Tags aus und schließt ihn in eine Funktionsdeklaration ein:

<script type="text/javascript">

function fkt_name()
{
document.bgColor = "cyan"; // zyanblauer Seitenhintergrund
}

</script>

Die Funktionsdeklaration sorgt dafür, dass der Code - obwohl er jetzt in <script>-Tags steht - nicht automatisch beim Laden der Webseite ausgeführt wird. Gleichzeitig wird der Code mit einem Funktionsnamen verbunden und kann über diesen aufgerufen beziehungsweise mit einem Ereignis verbunden werden.

<body onload="fkt_name()">

Wenn Sie JavaScript-Code mit einem Ereignis verbinden, sollten Sie zwei Dinge beherzigen:

Grundsätzlich ist es zu empfehlen, den Skriptcode einer Webseite so weit es geht, zentral im <head>-Abschnitt zu verwalten. Dies vereinfacht die Bearbeitung und Wartung der Webseite. Verbindlich ist diese Regel allerdings nicht, und im Falle von Skripten, die eine HTML-Ausgabe erzeugen (siehe oben), meist auch gar nicht möglich.

Listing 8.3: script2.html - Skriptcode zur Ereignisbehandlung

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<title>JavaScript</title>
<meta http-equiv="Content-Script-Type" content="text/javascript" />

<script type="text/javascript">

function farbe_setzen()
{
document.bgColor = "cyan";
}

</script>
</head>

<body onload="farbe_setzen()">

<h1>JavaScript</h1>

<p>Wenn Sie eine schwarze Schrift vor zyanblauem Hintergrund sehen, wurde der JavaScript-Code korrekt ausgeführt.</p>

</body>
</html>

Abbildung 8.4:  Mit JavaScript gesetzte Farben

JavaScript-Code als Ziel eines Hyperlinks

Schließlich besteht die Möglichkeit, einen Hyperlink statt mit einer neuen Webseite mit einer JavaScript-Funktion zu verbinden. Sie müssen dazu als Wert für das href-Attribut lediglich das Schlüsselwort javascript: und den Funktionsnamen angeben.

Nicht den Doppelpunkt hinter javascript vergessen!

Listing 8.4: script3.html - Hyperlink mit JavaScript-Funktion verbinden

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<title>JavaScript</title>
<meta http-equiv="Content-Script-Type" content="text/javascript" />

<script type="text/javascript">

function farbe_setzen()
{
document.bgColor = "cyan";
}

</script>
</head>

<body>

<h1>JavaScript</h1>

<p>Wenn Sie <a href="javascript: farbe_setzen()">hier klicken</a> wird der Hintergrund zyanblau.</p>

</body>
</html>

Es ist allerdings verpönt, Hyperlinks mit JavaScript-Funktionen zu verbinden, die - wie in obigem Beispiel - nur kleine Veränderungen oder Manipulationen vornehmen. Dies liegt daran, dass Websurfer beim Klick auf einen Hyperlink üblicherweise erwarten, dass eine neue Seite geladen wird. Diese Erwartung sollte man respektieren und nicht mutwillig enttäuschen (Ausnahmen bestätigen die Regel). Nutzen Sie diese Form des JavaScript-Codeaufrufs also vornehmlich, um den Aufruf einer Webseite mit der Ausführung von JavaScript-Code zu verbinden (beispielsweise um je nach Browser unterschiedliche Webseiten zu laden, siehe Kapitel 10.5, oder um intern zu zählen, wie oft der Hyperlink angeklickt wird, etc. Am Ende des Codes der JavaScript-Funktion laden Sie dann die neue Webseite: location.href ="neueWebseite.html" (siehe Kapitel 9.6.2).

JavaScript in Browsern ohne JavaScript-Unterstützung

Mittlerweile dürfte der Anteil an Websurfern, die mit Browsern ohne JavaScript- Unterstützung durchs Internet surfen, ziemlich gering sein, doch früher war dies anders. Aus diesem Grunde wurden verschiedene Techniken entwickelt, wie man sicherstellen kann, dass Webseiten mit JavaScript in solchen Browsern wenigstens halbwegs adäquat dargestellt werden.

Skriptcode verbergen

Das erste Problem ist, dass ein Browser ohne Skriptunterstützung auch das <script>-Tag nicht erkennen wird. Wie aber verfährt ein anständiger Browser mit Tags, die er nicht kennt? Er versucht einfach, den Inhalt des Tags irgendwie darzustellen. Im Falle der <script>-Tags bedeutet dies, dass er den Skript-Code als einfachen Text in der Webseite ausgeben wird.

Dies ist natürlich überhaupt nicht erwünscht und als Ausweg ist man dazu übergegangen, Skript-Code auszukommentieren.

<script type="text/javascript">
<!--
function fkt_name()
{
document.bgColor = "cyan";
}
// -->
</script>

Die Zeichenfolge <!-- leitet einen HTML-Kommentar ein. Browser ohne Skriptunterstützung werden den nachfolgenden Inhalt also ignorieren. Browser mit Skriptunterstützung stoßen dagegen gar nicht erst auf das Kommentarzeichen, weil sie zur Bearbeitung des Inhalts der <script>-Tags ja den Skript-Interpreter aufrufen (und dieser wiederum ignoriert das HTML-Kommentarzeichen).

Am Ende des Skripts wird der HTML-Kommentar mit --> beendet. Wichtig ist, dass diese Zeichenfolge mit Hilfe von // vor dem Skript-Interpreter verborgen wird (// leitet einen einzeiligen JavaScript-Kommentar ein, /* und */ schließen in JavaScript mehrzeilige Kommentare ein).

Wer seine Webseiten in Hinblick auf die fortschreitende Bedeutung von XML nach dem XHTML-Standard aufsetzen möchte (siehe Kapitel 21), stößt hier auf ein Problem. HTML-Kommentare können von XML-Parsern nicht nur ignoriert, sondern unter Umständen ganz entfernt werden - der Skriptcode würde auf diese Weise verloren gehen. Zudem interpretiert der XML-Parser die Zeichen < und & als HTML-Zeichen und nicht als Skript-Code. Letzteres kann man verhindern, indem man den Skriptcode in die Zeichenfolgen <![CDATA[ und ]]> einschließt, doch geht dadurch die Kompatibilität zu HTML verloren. Die beste Alternative für Autoren, die beiden Standards gerecht werden wollen, ist daher die Verwendung externer Skripts (siehe unten).

Alternativen HTML-Text anzeigen

Ein anderes Problem entsteht, wenn Sie im <body>-Abschnitt Skripte verwenden, die dynamische HTML-Elemente erzeugen und ausgeben (siehe Listing 8.2). In Browsern ohne Skriptunterstützung würden diese Ausgaben fehlen, und der Besucher Ihrer Website wird sich über den konfusen Aufbau und Text der Webseite wundern.

Für solche Fälle sieht der HTML-Standard das <noscript>-Tag vor, mit dem Sie einen alternativen Text, einen Link zu einer alternativen Webseite oder einen Hinweis ausgeben können, dass zur korrekten Darstellung dieser Webseite ein Browser mit JavaScript- Unterstützung benötigt wird.

<body>

<h1>Und jetzt der JavaScript-Code:</h1>

<script type="text/javascript">
document.write("<p>Hier spricht Ihr <em>JavaScript!<em><p>");
</script>

<noscript>
<p>Für diese Webseite ist ein Browser mit JavaScript-Unterstützung
erforderlich! </p>
</noscript>
</body>

Manche Browser/Browser-Versionen kann man so konfigurieren, dass sie trotz vorhandenen JavaScript-Interpreters keinen JavaScript-Code ausführen sollen. Solchermaßen konfigurierte Browser werden ebenfalls den Inhalt der <noscript>-Tags anzeigen.

Externe Skripte

Skripte können auch als eigene Dateien mit der Extension .js auf dem Server abgelegt werden. Den URL des Skripts geben Sie dann im <script>-Tag an:

<script type="text/javascript" src="farben.js"></script>

Unter Verwendung einer JS-Datei würde der Code der Webseite aus Listing 8.3 beispielsweise wie folgt aussehen:

Listing 8.5: script4.html - Webseite, die JavaScript-Code aus einer Datei lädt

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<title>JavaScript</title>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="farben.js"></script>
</head>

<body onload="farben_setzen()">

<h1>JavaScript</h1>

<p>Wenn Sie eine schwarze Schrift vor zyanblauem Hintergrund sehen, wurde der JavaScript-Code korrekt ausgeführt.</p>

</body>
</html>

Die dazugehörige JavaScript-Datei sehen Sie in Listing 8.6. Sie wird wie die Webseiten als reine Textdatei aufgesetzt und mit der Extension .js abgespeichert (wenn Sie Probleme mit dem Abspeichern haben, schauen Sie noch einmal in Kapitel 1.2 rein).

Listing 8.6: farben.js - einfache Textdatei mit JavaScript-Code

function farben_setzen()
{
document.bgColor = "cyan";
}

Die Verwendung externer Skripte ist zwar mit etwas mehr Verwaltungsarbeit verbunden, bringt aber auch einige Vorteile mit sich:

Manche Webserver müssen erst für .js konfiguriert werden (MIME-Typ setzen).

8.3 Was kann man mit JavaScript anfangen - ein Schnupperkurs

Der folgende Programmierkurs ist als Schnupperkurs für den Einstieg in die JavaScript- Programmierung gedacht und soll Sie anhand einiger kleinerer Beispiele mit den wichtigsten JavaScript-Techniken und -Möglichkeiten vertraut machen. Die Beispiele sind möglichst einfach gehalten, damit man sie auch als Einsteiger ohne grundlegende Kenntnisse der JavaScript-Syntax nachvollziehen kann. Später, wenn wir uns mit der JavaScript-Syntax vertraut gemacht haben, werden wir viele der hier vorgestellten Techniken wieder aufgreifen und in praxisnahen Beispielen einsetzen.

Dynamischen Text ausgeben

Wie man mit Hilfe der JavaScript-Methode document.write einen HTML-Code in eine Webseite schreiben kann, haben Sie bereits gesehen:

Listing 8.7: text.html - dynamischen Text ausgeben

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Dynamischer Text</title>
</head>

<body>
<script type="text/javascript">

document.write("<h2>Hallo</h2>");
document.write("<p style='padding-left: 2em'>Hier spricht Ihr
¬<em>JavaScript!</em><p>");

</script>

</body>
</html>

Schauen wir uns diesen Skriptcode ein wenig genauer an. Zur Ausgabe wird hier die Konstruktion document.write verwendet. document ist ein JavaScript-Objekt, das die aktuelle Webseite repräsentiert. Es wird vom Browser erzeugt und verfügt über verschiedene Eigenschaften und Methoden2, über die man auf die Webseite Einfluss nehmen kann. Eine dieser Methoden ist write(), mit deren Hilfe man HTML-Code in die Webseite einfügen kann.

Den auszugebenden HTML-Code kann man direkt in den runden Klammern der write- Methode übergeben, muss ihn aber dann in Anführungszeichen setzen. Komplikationen gibt es, wenn der auszugebende Text ebenfalls Anführungszeichen enthalten muss, beispielsweise wenn man wie in obigem Beispiel ein Attribut (dessen Wert ja gemäß HTML 4 in Anführungszeichen stehen soll) mit ausgeben will. In so einem Fall kann man sich dadurch behelfen, dass man im auszugebenden HTML-Code einfache statt doppelte Anführungszeichen verwendet, den Anführungszeichen das Escape-Zeichen \ voranstellt oder den auszugebenden HTML-Code zuerst in einem String-Objekt ablegt (siehe Kapitel 9.6.1) und dann der write-Methode das String-Objekt übergibt.

Der Navigator 4 verarbeitet übrigens obigen Code nicht ganz korrekt. Er bezieht die style-Information aus unerfindlichen Gründen auf die Inline-Passage statt auf den ganzen <p>-Absatz. Im Netscape 6-Browser tritt dieser Fehler nicht auf.

JavaScript lediglich zur Ausgabe von HTML-Code in eine Webseite zu benutzen, ist ziemlich unnütz. Gepaart mit anderen JavaScript-Techniken ergeben sich aber interessante Möglichkeiten:

Aktuelles Datum ausgeben

Die Ausgabe von Text mit JavaScript wird erst so richtig interessant, wenn der Text dynamische Inhalte widerspiegelt - beispielsweise das aktuelle Datum. JavaScript definiert hierzu die Klasse Date.

Listing 8.8: datum.html - Ausgabe des aktuellen Datums

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Datumausgabe</title>
</head>

<body>

<p>Es ist

<script type="text/javascript">
var Datumsobjekt = new Date();
var datum = Datumsobjekt.toLocaleString();
document.write(datum);
</script>

, und draußen ist ein schöner Tag.
</p>

</body>
</html>

Im vorangehenden Abschnitt haben Sie bereits das document-Objekt kennen gelernt, dass die aktuelle Webseite präsentiert. JavaScript-Objekte kommen nicht aus dem Nichts, vielmehr gehen Sie auf eine formale Klassendefinition zurück. In der Klassendefinition ist festgelegt, welche Eigenschaften und Methoden zu den Objekten der Klasse gehören. Die Klasse ist also so etwas wie der Bauplan für die Erzeugung ihrer Objekte.

Man kann dies mit der Errichtung von Fertighäusern vergleichen. Ein Architekt entwirft den Bauplan für das Fertighaus. Nach diesem Bauplan können dann jederzeit wirkliche Fertighäuser errichtet werden. Alle nach dem Bauplan errichteten Fertighäuser sehen grundsätzlich gleich aus, können sich aber durch individuelle Merkmale (Anstrich, Carport, Heizungssystem) unterscheiden. Übertragen auf JavaScript entspricht der Bauplan der Definition einer Klasse und die einzelnen Fertighäuser den Objekten der Klasse. Individualität erhalten die Objekte einer Klasse dadurch, dass ihre Eigenschaften unterschiedliche Werte annehmen können3.

Im Falle des document-Objekts sehen wir nichts von der zugehörigen Klasse, weil uns das document-Objekt fertig vom Browser zur Verfügung gestellt wird. Wenn wir auf das aktuelle Datum zugreifen wollen, müssen wir uns dagegen zuerst ein eigenes Objekt der Klasse Date erzeugen.

var Datumsobjekt = new Date();

Hier wird mit Hilfe des Schlüsselworts new ein neues Date-Objekt erzeugt. Das neue Objekt wird mit der Variablen Datumsobjekt verbunden, über die wir im Skript-Code weiter auf das Objekt zugreifen können.

Wenn ein neues Objekt erzeugt wird, werden in ihm automatisch das aktuelle Datum und die aktuelle Uhrzeit abgespeichert - allerdings nicht in Textform, sondern als binäre Bitfolgen. Will man Datum und Uhrzeit ausgeben, muss man sie sich also zuerst in Textform konvertieren lassen. Dies macht die Methode toLocaleString().

var datum = Datumsobjekt.toLocaleString();

Das Ergebnis speichern wir wieder in einer Variablen, deren Wert wir schließlich ausgeben können.

document.write(datum);

Abbildung 8.5:  Aktuelles Datum anzeigen

Meldungsfenster anzeigen

Mit JavaScript können Sie auch Meldungsfenster anzeigen.

Listing 8.9: meldungen.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Meldungen</title>

<script type="text/javascript">
alert("Hallo!\nDiese Webseite enthält JavaScript-Code.");
</script>

</head>

<body>
<p>Hallo!</p>

</body>
</html>

Diese Webseite begrüßt den Webbesucher jedes Mal mit einem Meldungsfenster, dass ihn darauf hinweist, dass man nur mit einem JavaScript-fähigen Browser in den vollständigen Genuss dieser Webseite kommt. Das Beispiel demonstriert noch einmal die Verknüpfung einer JavaScript-Funktion mit einem Ereignis, in diesem Fall das Laden-Ereignis der Webseite (<body>-Tag).

Das Meldungsfenster wird über die Methode alert()aufgerufen. Dieser muss man nur noch den im Meldungsfenster anzuzeigenden Text übergeben. Der anzuzeigende Text wird übrigens automatisch umgebrochen. Möchte man an einer speziellen Stelle selbst einen Zeilenumbruch vorgeben, braucht man nur den Escape-Code \n einzufügen.

Wenn Sie den Text in den Anführungszeichen durch Drücken der (Return)-Taste umbrechen, wird der Umbruch nicht nur bei der Anzeige übergangen, er führt sogar dazu, dass Ihr Skript-Code fehlerhaft ist. Wenn Sie dennoch zur besseren Lesbarkeit des Quellcodes Umbrüche in einen String-Text einfügen wollen, müssen Sie als letztes Zeichen in der Zeile \ eintippen und dann die (Return)-Taste drücken.

Vielleicht wundert es Sie, dass ich hier von der Methode alert() spreche, obwohl es sich doch augenscheinlich um eine Funktion handelt. Schließlich müssen Methoden ja über Objekten aufgerufen werden, und dies ist hier nicht der Fall. Nun, alert() ist tatsächlich eine Methode und das zugehörige Objekt lautet window. Das window-Objekt wird vom Browser eingerichtet und repräsentiert das aktuelle Browser-Fenster, in dem eine Webseite angezeigt wird. Es ist sozusagen, der äußerste Rahmen für all unsere JavaScript-Aktivitäten und nimmt insofern eine Sonderstellung ein, als man in den meisten Fällen auf die explizite Voranstellung des window-Objekts verzichten kann.

So handelt es sich bei dem document-Objekt im Grunde um eine Eigenschaft des window-Objekts und statt document.write müssten wir eigentlich schreiben: window.document.write.

Noch etwas sollte dieses Beispiel demonstrieren. Das Aufrufen von Meldungsfenstern, insbesondere das automatische Aufrufen beim Laden einer Webseite, kann für den Webbesucher recht nervig sein.

Auf Ereignisse reagieren

Die Grundlagen der Ereignisbehandlung in Webseiten, haben Sie bereits in Abschnitt 8.2.2 kennen gelernt. In diesem Abschnitt werden wir diese Technik mit der Anzeige eines Meldungsfensters verbinden.

Die folgende Webseite zeigt ein Bild des Uranus. Klickt der Besucher der Webseite auf das Bild des Uranus erscheint ein Meldungsfenster mit Informationen zu dem Planeten.

Listing 8.10: onlick1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>JavaScript</title>
<style type="text/css">
body { background-color: black }
h1 { color: white }
img { margin: 50px }
</style>

<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript">

function hinweis()
{
alert("Der gekippte Planet.\n\nMan nimmt an, dass seine Drehachse \
durch einen Zusammenprall mit einem anderen Himmelskörper umgekippt \
wurde.");
}

</script>
</head>

<body>

<h1>Der Uranus</h1>

<img src="uranus.gif" width="100" height="100" onclick="hinweis()"/>

</body>
</html>

Abbildung 8.6:  Meldungsfenster auf Mausklick

In diesem Beispiel haben wir die Funktion hinweis() mit dem onclick-Ereignis eines <img>-Tags verbunden. Obwohl dies laut HTML 4-Standard absolut korrekt ist, klappt es nicht im Navigator 4, da dieser keine onclick-Ereignisse für Bilder unterstützt. Man steht nun vor der Wahl, auf Unterstützung des Navigator 4 zu verzichten (der mittlerweile verfügbare Netscape 6-Browser unterstützt ja das onclick-Ereignis, siehe Abbildung 8.6), oder den HTML-Code entsprechend umzuschreiben. Entschließt man sich für Letzteres kann man so vorgehen, dass man

  1. das Bild in ein Anker-Element einschließt
  2. als Wert für href die JavaScript-Funktion angibt (mit javascript als »Protokoll«)
  3. im <img>-Tag das deprecated-Attribut border auf 0 setzt.

Listing 8.11: Auszug aus onclick2.html

<a href="javascript:hinweis()">
<img border="0" src="uranus.gif" width="100" height="100" />
</a>

Etwas unschön an diesem Beispiel ist, dass unsere Zusatzinformation in einem Meldungsfenster angezeigt wird, dass den Titel »Warnung« trägt oder ein Warnzeichen enthält. Man könnte dies durch Öffnen eines eigenen Browserfenster zum Anzeigen des Textes vermeiden.

Neues Browserfenster öffnen

Mit Hilfe der open-Methode des window-Objekts kann man ein neues Browserfenster öffnen. Wir wollen dies in nachfolgenden Beispiel dazu nutzen, den Informationstext zum Planeten Uranus (siehe vorangehender Abschnitt) in einem eigenen kleinen Fenster statt in einem Meldungsfenster auszugeben.

Listing 8.12: fenster.html - mit JavaScript ein neues Browserfenster öffnen

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>JavaScript</title>
<style type="text/css">
body { background-color: black }
h1 { color: white }
img { margin: 50px }
</style>

<meta http-equiv="Content-Script-Type" content="text/javascript" />

<script type="text/javascript">

function hinweis()
{
var neuesFenster = open("", "Uranus", "height=150,width=200");
neuesFenster.document.open();

neuesFenster.document.write("<html><head>");
neuesFenster.document.write("<title>Uranus</title></head>");
neuesFenster.document.write("<body><p>Man nimmt an, dass seine \
¬Drehachse durch einen Zusammenprall mit einem anderen \
¬Himmelskörper umgekippt wurde.</p>");
neuesFenster.document.write("</body></html>");
neuesFenster.document.close();
}

</script>
</head>

<body>

<h1>Der Uranus</h1>

<img src="uranus.gif" width="100" height="100" onclick="hinweis()"/>

</body>
</html>

Abbildung 8.7:  Mit JavaScript generiertes Browserfenster

Erzeugt wird das neue Browserfenster mit Hilfe der Methode window.open:

var neuesFenster = open("", "Uranus", "height=150,width=200");

Das Objekt window muss wie gesagt nicht explizit angegeben werden, da der Browser es automatisch ergänzt.

Das erste Argument zu der Methode ist der URL der Webseite, die in dem Browserfenster angezeigt werden soll. Da wir den HTML-Code der Webseite nachfolgend im JavaScript- Code generieren werden, brauchen wir keinen URL anzugeben. Das zweite Argument ist der Name des Browserfensters. Dieser Name kann beispielsweise zusammen mit dem target-Attribut von Hyperlinks verwendet werden (siehe Kapitel 3.2.4). Beachten Sie, dass dieser Name keine Leerzeichen enthalten sollte, da diese vom Internet Explorer nicht korrekt verarbeitet werden. Das letzte Argument ist eine Liste von Fenstereigenschaften. Wir beschränken uns an dieser Stelle darauf, die Höhe und Breite des Fensters vorzugeben.

Danach erzeugen wir in dem Browserfenster eine neue Webseite...

    neuesFenster.document.open();

... und geben den HTML-Code der Webseite aus:

    neuesFenster.document.write("<title>Uranus</title></head>");
neuesFenster.document.write("<body><p>Man nimmt an, dass seine \
¬Drehachse durch einen Zusammenprall mit einem anderen \
¬Himmelskörper umgekippt wurde.</p>");
neuesFenster.document.write("</body></html>");

Zum guten Schluss rufen wir die close-Methode des document-Objekts auf, wodurch dem Browser mitgeteilt wird, dass die Webseite fertig ist und angezeigt werden kann.

    neuesFenster.document.close();

In die Statusleiste des Browsers schreiben

Man kann mit JavaScript auch in die Statusleiste des Browsers schreiben.

window.status="Dieser Text erscheint in der Statusleiste des Browsers." 

Von dieser Technik sollte man allerdings möglichst wenig Gebrauch machen, überlassen Sie die Statusleiste dem Browser.

Das Erscheinungsbild einer Webseite ändern

Mit JavaScript können Sie auch auf die Gestaltung oder den Aufbau einer Webseite Einfluss nehmen.

Als einfaches Beispiel dazu haben Sie bereits gesehen, wie man über die Eigenschaft bgcolor des document-Objekts den Hintergrund einer Webseite einfärben kann.

Listing 8.13: hintergrundfarbe.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>JavaScript</title>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
</head>

<body onload="document.bgColor='cyan';">

<h1>JavaScript</h1>

<p>Wenn Sie eine schwarze Schrift vor zyanblauem Hintergrund sehen, wurde der JavaScript-Code korrekt ausgeführt.</p>

</body>
</html>

Das Erscheinungsbild einer Webseite kann aber nicht nur über die Eigenschaften des document-Objekts verändert werden. Mit JavaScript können Sie auch auf die Attribute und Stylesheet-Eigenschaften der einzelnen HTML-Elemente zugreifen. Die Art und Weise, in der man auf die HTML-Elemente und ihre Attribute und Stileigenschaften zugreifen kann, ist allerdings etwas komplizierter und - leider - von Browser zu Browser verschieden. Wir werden uns in Kapitel 10 ausführlicher mit diesem Thema befassen.

Formulare bearbeiten und Benutzeroberflächen aufbauen

Eine der Haupteinsatzgebiete für JavaScript ist die clientseitige Bearbeitung von Formulareingaben. So kann man beispielsweise mit Hilfe von JavaScript sicherstellen, dass ein Formular vollständig und korrekt ausgefüllt wurde, bevor man es an ein serverseitiges CGI-Programm weiterreicht (siehe Kapitel 11).

Man kann aber auch Benutzeroberflächen implementieren, über die der Websurfer mit einer Webseite interagieren kann. Als kleines Beispiel zeigen wir Ihnen hierzu eine Webseite deren Hintergrundfarbe vom Besucher der Webseite eingestellt werden kann.

Listing 8.14: optionsfelder.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>JavaScript</title>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
</head>

<body text="maroon" style="color: red">

<h1>JavaScript</h1>

<form>
<input type="radio" name="R1" value="V1"
onclick="document.bgColor='white'">Weiß
<input type="radio" name="R1" value="V2"
onclick="document.bgColor='blue'">Blau
<input type="radio" name="R1" value="V3"
onclick="document.bgColor='black'">Schwarz</p>
</form>

<p>Nutzen Sie obige Optionsfelder um eine Ihnen zusagende Hintergrundfarbe einzustellen.</p>

</body>
</html>

Abbildung 8.8:  Formulare als aktive Elemente der Benutzeroberfläche

Wenn Ihnen die Arbeit mit Formularen und Steuerelementen nicht mehr gegenwärtig ist, lesen Sie noch einmal in Kapitel 3 nach. Mehr zur Programmierung von Benutzeroberflächen mit Hilfe von JavaScript und Formularen/Steuerelementen erfahren Sie in Kapitel 11.

DHTML und Animationen

Last but not least können Sie mit JavaScript auch HTML-Elemente frei bewegen und Animationen implementieren. Wie dies geht, erfahren Sie in Kapitel 16.3.

Der Begriff DHTML, dynamisches HTML, wird in der Literatur unterschiedlich weit gefasst. Im engeren Sinne steht DHTML für die dynamische Änderung der Sichtbarkeit und Positionierung von HTML-Elementen. Im weiteren Sinne steht DHTML für jede Art von JavaScript-Zugriff auf HTML-Elemente. Im Laufe dieses Buches werden wir beide Formen von DHTML erläutern und Beispiele dazu zeigen.

8.4 Fehler im JavaScript-Code finden

Egal, ob Sie in die Webseitenprogrammierung mit JavaScript neu einsteigen oder schon ein gewiefter JavaScript-Fuchs sind, Fehler werden Sie immer machen. Nun, das ist nicht weiter schlimm, man muss nur wissen, wie man die Fehler ausfindig machen und beheben kann.

Grundsätzlich ist dabei zwischen zwei Arten von Fehlern zu unterscheiden:

Syntaxfehler

Ein Syntaxfehler liegt vor, wenn der von Ihnen aufgesetzte JavaScript-Code nicht den JavaScript-Syntaxregeln entspricht und daher vom Interpreter nicht verstanden wird. Solche Fehler entstehen meist durch Unwissenheit (»hieß die Eigenschaft nun hgColor oder bgColor?«), durch Vergesslichkeit (Sie haben vergessen, eine JavaScript-Funktion mit einer geschweiften Klammern abzuschließen) oder durch Tippfehler (Sie haben bgcolor statt bgColor eingetippt).

Manchmal braucht man das Skript nur noch einmal sorgsam anzuschauen, um den Fehler zu entdecken. Es gibt aber auch Fälle, in denen man förmlich wie der Ochse vorm Berg steht und den Fehler selbst beim hundertsten Drüberlesen nicht sieht, oder eine Webseite enthält einfach viel zu viel Code, als dass man diesen aufmerksam Zeile für Zeile durchgehen wollte. Betrachten Sie doch einmal das Listing 8.15. Sehen Sie, wo der Fehler liegt?

Listing 8.15: debuggen.html - Webseite mit Fehler im Skriptcode

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Datumausgabe</title>

<script type="text/javascript">
alert("Hallo!
Diese Webseite enthält JavaScript-Code.");
</script>

</head>

<body>

<p>Hallo!</p>

</body>
</html>

Sie meinen, dass das Problem mit dem Zeilenumbruch in dem Text der alert-Methode zu tun hat? Absolut richtig. JavaScript erlaubt keine Umbrüche in String-Konstanten (Text in Anführungszeichen). Um den Fehler zu beheben, könnten Sie den Code auf eine der folgenden Weisen ändern:

Gut, nun haben wir noch einmal das Thema Zeilenumbrüche in JavaScript- Stringkonstanten aufgefrischt. Was uns aber in diesem Kapitel vor allem interessiert, ist, wie uns der Browser beim Auffinden solcher Syntaxfehler unterstützen kann.

Webseiten im Browser testen

Wenn Sie obige, fehlerbehaftete Webseite in einen Browser laden, wird der JavaScript- Interpreter über den fehlerhaften Umbruch stolpern. Wie er danach weiter verfährt, ist von Browser zu Browser unterschiedlich. Der Netscape 6-Browser zeigt beispielsweise Hallo als Inhalt der Webseite an und bricht dann ab (siehe Abbildung 8.9).

Abbildung 8.9:  Fehlerhaft dargestellte Webseite

Man kann sich aber in den meisten Browsern Hinweise auf die mögliche Fehlerquelle anzeigen lassen.

Beachten Sie, dass der Browser nur Hinweise auf die mögliche Fehlerursache geben kann. Manchmal führt Sie ein solcher Hinweis direkt zu dem wirklichen Fehler, manchmal ist der Fehler schon etwas weiter oben passiert und der Browser hat es nur etwas später bemerkt.

Internet Explorer

Damit Sie der Internet Explorer auf die mögliche Quelle von Syntaxfehlern in Ihrem JavaScript-Code hinweist, müssen Sie die Option Skriptfehler anzeigen aktivieren. Rufen Sie dazu den Befehl Extras/Internetoptionen auf und markieren Sie auf der Registerkarte Erweitert die Option (siehe Abbildung 8.10).

Abbildung 8.10:  Anzeige von Skriptfehlern aktivieren

Tritt danach beim Ausführen eines Skripts ein Fehler auf, stoppt der Browser die Ausführung des Skripts und zeigt Ihnen ein Meldungsfenster4 mit einen Hinweis auf die mögliche Fehlerquelle an.

Abbildung 8.11:  Hinweis auf Skriptfehler im Internet Explorer

Netscape Communicator 4

Im Navigator 4 müssen Sie nach dem Laden der Webseite im Adressenfeld

javascript:

eingeben und die (Return)-Taste betätigen. Der Browser ruft daraufhin die Communicator-Konsole auf, in der Hinweise auf die mögliche Fehlerursache angezeigt werden.

Abbildung 8.12:  Hinweis auf Skriptfehler im Netscape Navigator

Netscape 6-Browser

Im Netscape 6-Browser rufen Sie nach dem Laden der Webseite den Menübefehl Aufgaben/Extras/JavaScript-Konsole auf. In dieser können Sie sich dann über die möglichen Fehler informieren.

Abbildung 8.13:  Hinweis auf Skriptfehler im Netscape 6-Browser

In der Konsole werden unter Umständen auch ältere Fehler angezeigt. Achten Sie nur auf die letzten Fehler oder Löschen Sie die Anzeige, wechseln Sie zurück in den Browser und lassen Sie die Webseite neu laden.

Logische Fehler

Logische Fehler liegen vor, wenn der Skript-Code syntaktisch korrekt ist, aber bei der Ausführung (Programmierer sagen »zur Laufzeit«) nicht das macht, was wir von ihm erwarten. Bei solchen Fehlern kann der JavaScript-Interpreter nicht helfen. Es bleibt uns daher nichts anderes übrig als selbst zu analysieren, was schief läuft und wo der Fehler liegen könnte.

Helfen kann Ihnen dabei ein Debugger. Ein Debugger ist ein spezielles Programm zur Lokalisierung von Laufzeitfehlern. Mit seiner Hilfe kann man den Code eines Programms Schritt für Schritt ausführen lassen und dabei die Ausgabe und die Werte der Variablen des Programms verfolgen.

Für die meisten Browser gibt es passende JavaScript-Debugger, die man bei der Installation mit einrichten lassen kann (Netscape 4: http://developer.netscape.com:80/software/ jsdebug.html; IE: http://msdn.microsoft.com/scripting/debugger/default.htm).

8.5 Zusammenfassung

Heute haben wir unsere ersten JavaScript-Programme zur Unterstützung von Webseiten geschrieben. JavaScript ist eine einfache und dennoch mittlerweile äußerst leistungsfähige Sprache zur clientseitigen Programmierung.

JavaScript-Code kann man mit Hilfe von <script>-Tags und/oder einem Ereignisattribut direkt in eine Webseite einfügen oder auch aus einer Datei laden.

<script type="text/javascript" src="farben.js"></script>

Wichtig ist, dass man nie vergisst, dem Browser die verwendete Skriptsprache anzuzeigen, damit er weiß, welchen integrierten Interpreter er aufrufen muss. Abgesehen davon, dass man für jedes <script>-Tag eine eigene Skriptsprache angeben kann, ist es auch möglich im Header eine Standardskriptsprache vorzugeben:

<meta http-equiv="Content-Script-Type" content="text/javascript" />

Nach den Formalitäten haben wir ein wenig in die Praxis hinein geschnuppert und uns verschiedene Techniken und Einsatzmöglichkeiten für JavaScript angeschaut:

Dabei haben Sie auch schon ein wenig über Objekte, Klassen und Strings in JavaScript erfahren.

Zum Schluss haben wir uns angeschaut, wie man sich vom Browser Hinweise auf syntaktische Fehler im Skriptcode anzeigen lassen kann.

8.6 Fragen und Antworten

Frage:
Welche anderen clientseitigen Skriptsprachen gibt es?

Antwort:
Neben JavaScript sind die wichtigsten Skriptsprachen tcl (unter UNIX/Linux) und VBScript (Microsoft-Plattform), denen allerdings bei weitem nicht die Bedeutung und breite Unterstützung seitens der großen Browser zuteil wird, die JavaScript erfährt.

Frage:
Welche Beziehung besteht zwischen Java und JavaScript?

Antwort:
Praktisch keine, obwohl man mit beiden Sprachen Programmcode für Webseiten aufsetzen kann, der clientseitig ausgeführt wird. Doch damit hören die Gemeinsamkeiten fast schon auf.

Frage:
Serverseitige Programmierung bedeutet stets ein gewisses Sicherheitsrisiko für den Server-Rechner. Die clientseitige Programmierung mit JavaScript verschont den Webserver, aber stellt sie nicht ein Risiko für die Client-Rechner dar, also die Rechner der Websurfer, die sich die mit JavaScript versehenen Webseiten herunterladen?

Antwort:
Ja und nein! Natürlich stellt die Ausführung eines fremden Programmcodes (und nichts anderes ist JavaScript-Code) ein Sicherheitsrisiko für den Client-Rechner dar. Andererseits ist die Sprache so konzipiert, dass man mit JavaScript keinen Code aufsetzen kann, der dem Client-Rechner schaden könnte. So ist es üblicherweise nicht möglich, von dem JavaScript-Code einer Webseite auf den Inhalt von Webseiten eines anderen Webs zuzugreifen, die in einem zweiten Browserfenster (Websurfer surfen nicht selten parallel mit mehreren Browsern) angezeigt werden. Genauso wenig ist es JavaScript-Code erlaubt, auf die Festplatte des Client-Rechners zuzugreifen (das größte Sicherheitsrisiko überhaupt). JavaScript-Skripte die dies versuchen, müssen sich zuvor eine Erlaubnis beim Websurfer einholen (durch Dialogfenster oder Nachweis einer Authentifizierung (signierte Skripte)). Wir werden uns mit diesen Techniken allerdings nicht weiter beschäftigen, da wir der Meinung sind, dass man sie am besten gar nicht nutzen sollte. Kontrolliert werden diese Sicherheitsmaßnahmen letztendlich nur durch den Browser und seinen JavaScript-Interpreter. Wenn Sie also Vertrauen in Ihren Browser haben, können Sie auch Vertrauen in den JavaScript-Code haben. ;-)

Frage:
Ich habe Probleme mit der Nachprogrammierung der Beispiele aus diesem Kapitel. Woran könnte dies liegen?

Antwort:
Es kann hierfür natürlich eine Reihe von Gründen geben. Meist werden Sie sich einfach irgendwo vertippt haben. Oder Sie unterscheiden nicht zwischen Groß- und Kleinschreibung. Denken Sie daran: Für den JavaScript-Interpreter ist bgColor korrekt, bgcolor nicht. Wenn Sie den Fehler gar nicht entdecken können, laden Sie die Webseiten von der Buch-CD.

8.7 Workshop

Der Workshop enthält Quizfragen, die Ihnen helfen sollen, Ihr Wissen zu festigen, und Übungen, die Sie anregen sollen, das eben Gelernte umzusetzen und eigene Erfahrungen zu sammeln. Versuchen Sie, das Quiz und die Übungen zu beantworten und zu verstehen, bevor Sie zur Lektion des nächsten Tages übergehen.

Quiz

  1. Was ist der Unterschied zwischen clientseitiger und serverseitiger Programmierung?
  2. Was ist ein Interpreter?
  3. Wie bettet man Skriptcode in eine Webseite ein?
  4. Wie lädt man Skriptcode aus einer Skriptdatei?
  5. Welche Extension haben JavaScript-Dateien?
  6. Wie lautet das JavaScript-Objekt, das eine Webseite repräsentiert?
  7. Wie lautet das JavaScript-Objekt, welches das Browserfenster repräsentiert?

Übungen

  1. Suchen Sie sich ein Beispiel aus diesem Kapitel aus, programmieren Sie es nach und testen Sie es in Ihrem Browser. Wenn alles funktioniert, bauen Sie zwei, drei Fehler in den JavaScript-Code ein und spüren Sie die Fehler mit Hilfe Ihres Browsers auf.


vorheriges KapitelInhaltsverzeichnisStichwortverzeichnisFeedbackKapitelanfangnächstes Kapitel


1234

© Markt+Technik Verlag, ein Imprint der Pearson Education Deutschland GmbH