-Block, der über getElementById() angesprochen wird, da nur so eine stets aktuelle HTML-Ausgabe in einer Seite möglich ist. 194

 KOMPENDIUM 

JavaScript

Objekte von JavaScript

Kapitel 6

function uhrzeit() { var uhr = new Date(); document.getElementById("block").innerText = uhr.getHours() + ":" + uhr.getMinutes() + ":" + uhr.getSeconds();

} getElementById() ist eine Möglichkeit, über das DOM auf Elemente zurückzugreifen, funktioniert allerdings nicht in allen Browsern. Für den Netscape Navigator 4.x und den Internet Explorer 4 benötigen Sie andere Lösungen. Mehr dazu erfahren Sie in Kapitel 10 »Document Object Model«.

Nachfolgend der vollständige Code: <script language="JavaScript">
Listing 6.20: Die Uhrzeit laufend aktualisieren (uhrzeit_aktualisieren.html)

var uhr = new Date(); document.getElementById("block").innerText = uhr.getHours() + ":" + uhr.getMinutes() + ":" + uhr.getSeconds();

} var aufruf = window.setInterval("uhrzeit()", 500);

//--> Abbildung 6.32: Stets die aktuelle Uhrzeit auf der Seite

Countdown Ähnlich wird auch ein Countdown realisiert. Hier wird nur innerhalb der Funktion das aktuelle Datum vom angestrebten Zieldatum abgezogen. Wenn Sie es wünschen, können Sie noch eine etwas kompliziertere Umrechnung hinzufügen, die den zurückgegebenen Betrag von Millisekunden in Tage, Stunden, Minuten und Sekunden umrechnet:

 KOMPENDIUM 

JavaScript

195

Kapitel 6 Listing 6.21: Ein Counter bis 1.1.2003 (counter.html)

Objekte <script language="JavaScript">
} var aufruf = window.setInterval("counter()", 500); //--> Abbildung 6.33: Der Countdown zählt die Tage, Stunden, Minuten und Sekunden bis zum 1.1.2003 rückwärts.

Datum formatieren Die Daten in JavaScript werden – von den meisten Browsern – in englischer Form ausgegeben. Das heißt, nicht nur die Reihenfolge von Tag, Monat und Jahr ist ungewöhnlich, sondern auch die Monats- und Tagenamen passen nicht. Die Umformatierung des Datums ist allerdings nicht sehr aufwändig, wenn Sie die Methoden verwenden, um Elemente wie den Monat (getMonth()) einzeln auszugeben.

196

 KOMPENDIUM 

JavaScript

Objekte von JavaScript

Kapitel 6

Ein Beispiel zeigt dies. Ziel ist es, das Datum in normaler Form mit deutschem Monatsnamen auszugeben: 28. November 2002

Tag und Jahr sind kein Problem. Den Tag des Monats erhalten Sie mit getDate(), das vierstellige Jahr mit getFullYear().

Problematischer ist der Monat. getMonth() liefert den Monat als Zahl zwischen 0 (Januar) und 11 (Dezember). Für die Umwandlung gibt es zwei mögliche Wege: Eine switch- oder if-Fallunterscheidung, die alle Zahlen von 0 bis 11 durchprüft und entsprechend den Monatsnamen zurückliefert Ein Array mit den Monatsnamen Die zweite Lösung erscheint hier praktikabler, weil sie etwas einfacher und damit weniger fehleranfällig eingegeben werden kann. Das Beispiel verwendet Arrays, die in Kapitel 7 »Arrays und Strings« detaillierter besprochen werden. Das Array besteht aus den zwölf Monatsnamen. Die Indexnummern im Array entsprechen jeweils den Monatsnummern, die von getMonth() ausgegeben werden. <script language="JavaScript">

Die Umformatierung von Daten ist auf manchen Websites eine sehr häufige Aufgabe. Hier lohnt es sich, die Umwandlung in eine Funktion oder eine Objektmethode zu packen und sie in einer externen JavaScript-Datei zur Verfügung zu stellen. Wir zeigen in Kapitel 8 »OOP«, wie Sie das DateObjekt um eine solche Methode erweitern können. Abbildung 6.34: Das Datum im manuell erstellten Format

Verbinden Sie die Datumsformatierung nun noch mit der Fallunterscheidung aus dem Abschnitt »Das Jahr-2000-Problem«, und Sie erhalten die Jahreszahl in korrekter Form auch für Netscape 2 und 3 und die erste Version des Internet Explorers 3. Listing 6.23: (Ausschnitt aus: datum_formatieren _y2k.html)

function getJahr2000(datum) { var jahr = datum.getYear(); if (jahr < 200) { return jahr + 1900; } else { return jahr; } } . . . var datum = new Date(); . document.write(getJahr2000(datum));

Neue und spezielle Methoden Einige Methoden für das Date-Objekt sind erst in neueren Browsern hinzugekommen oder beschränken sich speziell auf den Internet Explorer. Tabelle 6.7 gibt einen Überblick und Tabelle 6.8 zeigt, in welchen Browsern die Methoden funktionieren. 198

 KOMPENDIUM 

JavaScript

Objekte von JavaScript

Kapitel 6 Abbildung 6.35: Mit der Jahr-2000Fallunterscheidung funktioniert das Skript sogar im Netscape Navigator 2.

Methode

Beschreibung

toDateString()

wandelt ein Date-Objekt in einen String um. Enthält nur das Datum, nicht die Zeit. Ist auf den Internet Explorer beschränkt.

toLocaleString()

gibt das Datum und die Uhrzeit als String zurück, wie auf dem lokalen System vorgesehen. Das Ergebnis ist vom Browser abhängig.

toLocaleDateString()

gibt nur das Datum im lokalen Format, abhängig vom Browser, zurück.

toLocaleTimeString()

gibt nur die Zeit in einem lokalen Format zurück. Das Aussehen ist vom Browser abhängig.

getVarDate()

liefert das Datum in dem Format VT_DATE, das bei der Interaktion mit ActiveX- und DOM-Objekten benötigt wird. Es ist auf den Internet Explorer beschränkt.

toTimeString()

liefert nur die Zeit als String.

Tabelle 6.7: Die neueren und speziellen Methoden des DateObjekts

Auf der CD-ROM finden Sie im Ordner code\kap06 für jede Methode ein Beispiel. Der Dateiname entspricht jeweils dem Namen der Methode.

NS4.x NS6

NS7

toDateString() toLocaleString()

 KOMPENDIUM 







JavaScript

IE4 IE5

IE5.5 IE6

O7



















M1

K3





Tabelle 6.8: Neue Methoden von Date




199

Kapitel 6 Tabelle 6.8: Neue Methoden von Date (Forts.)

Objekte

NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3

toLocaleDateString()






















toLocaleTimeString()














































getVarDate() toTimeString










Prinzipiell ist insbesondere der Einsatz der lokalen Datums- und Zeitstrings durchaus sinnvoll. Der Internet Explorer liefert sogar deutsche Tages- und Monatsnamen (siehe Abbildung 6.36). Das ist allerdings in der Praxis kaum verwertbar, da der Navigator auch in der deutschen Version 7 englische Namen und ein etwas anderes Format einsetzt (siehe Abbildung 6.37). Solange hier keine Einigkeit herrscht, bleibt dem Entwickler nichts anderes übrig, als das Datum selbst zu formatieren. Abbildung 6.36: Der Internet Explorer 6 verwendet deutsche Tagesund Monatsnamen.

Abbildung 6.37: Der Navigator kann nur Englisch – und das auf dem selben Rechner.

200

 KOMPENDIUM 

JavaScript

Objekte von JavaScript

Kapitel 6

Vorgefertigte Datumsobjekte Das Browserobjekt document besitzt drei Methoden, die Datumsformate zurückliefern: lastModified() – Zeitpunkt, an dem das Dokument zuletzt gespeichert

wurde fileCreatedDate() – Zeitpunkt, an dem das Dokument erstellt wurde. Beschränkt auf den Internet Explorer fileModifiedDate() – ebenfalls der Zeitpunkt, an dem das Dokument

zuletzt bearbeitet wurde, allerdings auf den Internet Explorer beschränkt. NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3

























fileCreatedDate()













fileModifiedDate()













lastModified()





Tabelle 6.9: Methoden mit vorgefertigten Datumsobjekten

Da die drei Methoden auf Informationen vom Server angewiesen sind, können die Ergebnisse sehr unpräzise sein. Diesen Funktionen sollten Sie daher nicht unbedingt trauen. Ein einfaches Beispiel gibt das Datum aus, an dem das aktuelle Dokument zuletzt geändert wurde. <script language="JavaScript">

 KOMPENDIUM 

JavaScript

201

Kapitel 6

Objekte

Boolean Wahrheitswerte tauchen in der Programmierung an allen Ecken und Enden auf. Normalerweise müssen Sie sich darum nicht kümmern. Zusätzlich gibt es in JavaScript allerdings noch ein Boolean-Objekt. Dieses Objekt wird ebenfalls mit dem Konstruktor new instanziiert. Als Parameter übergeben Sie einen Wahrheitswert: var wahr = new Boolean(true);

Dieses Objekt besitzt zwei Methoden: toString() – liefert einen String, der entweder "true" oder "false" enthält. Wenn Sie einen Wahrheitswert ausgeben, erfolgt diese Umwandlung automatisch. valueOf() – gibt den Wert – also true oder false – des Boolean-Objekts

zurück. Das Boolean-Objekt und seine Methoden gibt es seit Netscape Navigator 3 und der zweiten Version des Internet Explorers 3, also seit JavaScript 1.1. Sie können das Boolean-Objekt wie alle JavaScript-eigenen Objekte um Ihre eigenen Methoden erweitern. Mehr dazu erfahren Sie in Kapitel 8 »OOP«.

Number Auch Zahlen werden, wie Wahrheitswerte, in JavaScript grundsätzlich einfach verwendet. Das Number-Objekt besitzt allerdings einige zusätzliche Eigenschaften und Methoden. Ein Number-Objekt wird wie folgt instanziiert: var zahl = new Number(25);

In Tabelle 6.10 sehen Sie die Eigenschaften des Number-Objekts. Tabelle 6.10: Die Eigenschaften des NumberObjekts

202

Eigenschaft

Beschreibung

MAX_VALUE

Die größte mögliche Zahl in JavaScript

MIN_VALUE

Die kleinste mögliche Zahl in JavaScript

NaN

Alle Objekte, die keine Zahl sind. Dies geschieht vor allem beim Rechnen mit Strings oder bei der Umwandlung von Strings in Zahlen. Sie testen mit der globalen Funktion isNaN(), ob es sich um den Datentyp NaN handelt (siehe Kapitel 5 »Funktionen«).

 KOMPENDIUM 

JavaScript

Objekte von JavaScript

Kapitel 6 Tabelle 6.10: Die Eigenschaften des NumberObjekts (Forts.)

Eigenschaft

Beschreibung

POSITIVE_INFINITY

Positive Unendlichkeit (
; alle Zahlen, die größer als die größte mögliche Zahl in JavaScript sind

NEGATIVE_INFINITY

Negative Unendlichkeit (-
); alle Zahlen, die kleiner als die kleinste mögliche Zahl in JavaScript sind

Das Number-Objekt ist in JavaScript bereits eine lange Zeit enthalten. Nur Netscape 2 und der Internet Explorer 3 in Version 1 bleiben außen vor. Die Eigenschaften sind ebenfalls seit dieser Zeit integriert. Die Methoden sind teilweise neuer. Die folgende Tabelle gibt Ihnen eine Übersicht: NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

toExponential()



















toFixed()



















toLocaleString()



















toPrecission()



















K3

Tabelle 6.11: Die Methoden des Number-Objekts




toString()































valueOf()































Methode

Beschreibung

toExponential(Stellen)

wandelt das Number-Objekt in Exponentialschreibweisea um und gibt es als String zurück. Als Parameter können Sie die Zahl der Dezimalstellen angeben.

toFixed(Stellen)

wandelt eine Zahl in die Dezimalzahlschreibweise um. Die Zahl der Nachkommastellen wird dabei exakt festgelegt. Falls nötig, rundet der Interpreter. Dafür wird nur die Stelle als Referenz genommen, die genau hinter der erlaubten Stellenzahl liegt. Bei 44.3248 und einer Stellenzahl von 2 also die 4. Die Rückgabe erfolgt als String.

toLocaleString()

konvertiert die Zahl in das Standardformat auf dem lokalen System. Dies ist von Browser zu Browser unterschiedlich. Die Rückgabe erfolgt als String.

Tabelle 6.12: Die Methoden des Number-Objekts

77.777 wird im Internet Explorer 6 beispielsweise als 77.78 ausgegeben, im Netscape Navigator 7 dagegen als 77.777.

 KOMPENDIUM 

JavaScript

203

Kapitel 6 Tabelle 6.12: Die Methoden des Number-Objekts (Forts.)

Objekte

Methode

Beschreibung

toPrecision(Stellen)

gibt eine Zahl mit der exakten Stellenzahl an, und zwar auch vor dem Dezimalpunkt. 34.678 wird bei einer Präzision von 2 Stellen zu 35. Eine Präzision von 4 Stellen ergibt 34.68.

Auch bei dieser Funktion wird die Stelle nach der angestrebten Stellenzahl zum Runden verwendet. Stellen danach werden entfernt. Die Rückgabe erfolgt als String. toString()

wandelt eine Zahl in einen String um.

valueOf()

liefert den Wert eines Number-Objekts.

a.

zur Exponentialschreibweise siehe Kapitel 3 »Syntax und Variablen«

Ein einfaches Beispiel steht hier stellvertretend für die übrigen Methoden des Number-Objekts. Der Code gibt mit der Methode toExponential() die Zahl 700 in Exponentialschreibweise aus: Listing 6.25: toExponential()

(toexponential.html)

<script language="JavaScript">
//--> Abbildung 6.38: 700 in Exponentialschreibweise

Browser-spezifische Objekte Neben den allgemein verfügbaren Objekten gibt es auch Browser-spezifische Objekte. Sie sind allerdings nicht mit den Browserobjekten zu verwechseln, die Zugriff auf das Browserfenster und seinen Inhalt bieten. 204

 KOMPENDIUM 

JavaScript

Objekte von JavaScript

Kapitel 6

Die Browser-spezifischen Objekte bieten spezielle Funktionalitäten, die meist nur einer der großen Browser besitzt. Windows-Objekte Der Internet Explorer unter Windows unterstützt einige Objekte, die JavaScript die Arbeit mit dem Betriebssystem erlauben soll. Der Kontakt funktioniert hier hauptsächlich über so genannte ActiveX-Objekte. Hier handelt es sich wirklich nur um den Internet Explorer für Windows und nicht um den Mac. Da diese Objekte auf den Internet Explorer und noch enger auf Windows beschränkt sind und weniger JavaScript- (bzw. JScript-), sondern eher ActiveX-Programmierung erfordern, finden Sie in diesem Buch nur eine kurze Beschreibung. Folgende Objekte stehen zur Verfügung: ActiveXObject – dient zum Zugriff und zur Verwaltung der Internet

Explorer-ActiveX-Objekte Dictionary – speichert Werte mit ihrem Schlüssel. Da JavaScript assoziative Arrays unterstützt, die dasselbe können, ist dieses Objekt eigentlich überflüssig und wurde wohl hauptsächlich für VBScript-Programmierer eingeführt. Enumeration – erlaubt den Zugriff auf Kollektionen aus verschiedenen

Eigenschaften. Diese Eigenschaften können beispielsweise die Eigenschaften eines Browserobjekts sein. Da es in JavaScript allerdings den Direktzugriff über das DOM gibt, ist auch dieses Objekt in der Praxis kaum in Gebrauch. FileSystemObject – erlaubt den Zugriff auf das Dateisystem. Dateien

können geschrieben, geöffnet und gespeichert werden. Allerdings ist dies abhängig von den Sicherheitseinstellungen des Internet Explorers. Der Gedanke liegt nahe, diese praktische Funktionalität in einem Intranet zu verwenden, das auf Windows-Maschinen mit IE basiert. Das Problem besteht jedoch darin, dass die Sicherheitseinstellungen im IE recht lax sein müssen, damit der Zugriff auf das Dateisystem erlaubt ist. Da die Rechner im Intranet aber meistens auch am Internet hängen, damit die Mitarbeiter dort surfen können, erscheint dies vielen Administratoren als nicht empfehlenswert. VBArray – gestattet den Zugriff auf Visual Basic-Arrays, die nur gelesen werden können. Diese Arrays sind meist Rückgabewerte eines ActiveXObjekts.

 KOMPENDIUM 

JavaScript

205

Kapitel 6

Objekte Global Das Objekt Global ist ein merkwürdiger Geselle. Es ist eine Art Überobjekt. Alle Variablen und Funktionen, die Sie deklarieren, sind Teil des GlobalObjekts. Da es aber selbst nicht in Erscheinung tritt, brauchen Sie sich nicht darum zu kümmern. Wichtig ist nur, dass aufgrund dieses Objekts Variablen und Funktionen im gesamten Skript zur Verfügung stehen. Error Das Error-Objekt ist noch recht neu. Es dient zur Fehlerkontrolle. Sie können damit beispielsweise eigene Ausnahmen als Fehler definieren und entsprechend darauf reagieren.

Tabelle 6.13: Das Error-Objekt

NS4.x NS6


NS7


IE4 IE5


IE5.5 IE6

O7

M1

K3
















Mehr zum Fehlerhandling erfahren Sie in Kapitel 9 »Debugging«.

206

 KOMPENDIUM 

JavaScript

7

Arrays und Strings

Dieses Kapitel ist zwei der wichtigsten Datentypen gewidmet: Arrays und Strings. Arrays sind Sammlungen von Daten und daher bereits ein »fortgeschrittenes« Programmierkonstrukt. Aber was machen die bereits zur Genüge bekannten Strings hier? »Zur Genüge bekannt« stimmt nur halb. In diesem Kapitel finden Sie das String-Objekt und erfahren, wie Sie Teile eines Strings ausschneiden, eine Zeichenkette in Strings suchen und String-Formatierungen ändern.

7.1

Arrays

Ein Array speichert beliebig viele Daten.1 Diese Daten werden im Array nacheinander angeordnet. Sie können sich dies wie eine Perlenschnur vorstellen. Damit Daten auch wieder auffindbar sind, werden sie mit einem Index versehen. Der Index eines Arrays beginnt bei 0. Das erste Element hat also den Index 0, das zweite den Index 1 usw. Ein Array ist in JavaScript ein Objekt, daher wird es mit dem Konstruktor new instanziiert. var Arrayname = new Array();

Das Array-Objekt steht in JavaScript schon immer zur Verfügung. Nur im Netscape 2 und im Internet Explorer 3 in der ersten Version wird ein Array nicht als Objekt angesehen. Daher sind die Eigenschaften und Methoden nicht vorhanden. Erstellen und auslesen können Sie ein Array allerdings auch dort.

1

NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3































Tabelle 7.1: Das Array-Objekt

Ab einer gewissen Datenmenge leidet beim Eingeben und Auslesen die Performance. Dies ist allerdings in der Praxis kaum relevant.

 KOMPENDIUM 

JavaScript

207

Kapitel 7

Arrays und Strings Neue Elemente fügen Sie mit dem Array-Namen und dem Index hinzu: Arrayname[0] = Wert;

Diese Zeile weist also dem ersten Array-Element einen Wert zu. Der Index steht immer in eckigen Klammern hinter dem Array-Namen. Der Internet Explorer kommt auch mit einem Index in runden Klammern zurecht. Da hier aber bereits der Netscape Navigator scheitert, sollten Sie immer eckige Klammern verwenden. Dies gilt auch für ein Intranet, das vollständig mit Internet Explorern ausgestattet ist, denn wer weiß schon, wo das Skript überall eingesetzt werden muss und was auf hunderten oder tausenden von Rechnern installiert ist. Das folgende kleine Beispiel erzeugt ein Array und füllt danach die ersten drei Array-Elemente mit Strings: var namen = new Array(); namen[0] = "Carolin"; namen[1] = "Christine"; namen[2] = "Phillip";

Wenn Sie die Daten erst einmal im Array gespeichert haben, benötigen Sie natürlich Zugriff darauf. Eines der Elemente im Array sprechen Sie wie folgt an: Arrayname[Index]

Soll also aus dem Beispiel-Array der Name »Christine« ausgegeben werden, ist die folgende Zeile ausreichend: document.write(namen[1]); Abbildung 7.1: Der Browser zeigt das richtige Element aus dem Array.

208

 KOMPENDIUM 

JavaScript

Arrays

Kapitel 7

Alternativen und Kurzformen Die soeben gezeigte Möglichkeit, ein Array zu definieren und zu füllen, ist nicht die einzige. Als Parameter für das Array-Objekt können Sie auch gleich zu Beginn die Länge des Arrays angeben: var Arrayname = new Array(Laenge);

Wenn Sie ein Array ohne Länge erzeugen, hat es keine Elemente. Geben Sie dagegen am Anfang eine Länge an, wird gleich die entsprechende Anzahl an Elementen reserviert. Jedes der Elemente erhält den Wert undefined. Die Eigenschaft length (siehe Abschnitt »Elemente ändern«) des Array-Attributs erhält in diesem Fall den Wert, den Sie im Array-Objekt als Parameter angegeben haben. Die Angabe der Länge als einziger Parameter funktioniert in sehr alten Browsern, namentlich Netscape 2 und Internet Explorer 3 in der ersten Version nicht. Statt der Länge können Sie als Parameter für das Array-Objekt auch gleich die Array-Elemente eintragen: var Arrayname = new Array(Element1, Element2, ...);

In dieser Variante werden die Indexnummern automatisch zugewiesen. Element1 hat also Index 0, Element2 Index 1 usw. Die dritte Kurzform kommt ganz ohne new-Konstruktor und Array-Objekt aus, steht dafür aber in eckigen Klammern: var Arrayname = [Element1, Element2, Element3, ...];

Diese Variante heißt auch Array-Literal, da der Variablen direkt ein Literal mit dem Array zugewiesen wird. Das Array-Literal steht im Gegensatz zum Array-Objekt im Netscape Navigator 3 noch nicht zur Verfügung. Sie benötigen Browser ab Internet Explorer 4 und Netscape Navigator 4.x. Datentypen mischen In einem Array können Sie die Datentypen beliebig mischen. var mischen = new Array(1, "text", true);

 KOMPENDIUM 

JavaScript

209

Kapitel 7

Arrays und Strings Andere Programmiersprachen wie beispielsweise Java erlauben dies in dieser Form nicht. Da JavaScript aber nur schwach typisiert, also beispielsweise eine automatische Typänderung möglich ist, gibt es bei Datentypen in Arrays keine Beschränkungen. Arrays verschachteln Wenn beliebige Datentypen in einem Array speicherbar sind, warum dann nicht auch mehrere Arrays2? Folgender Code erstellt ein Array und weist es dann einem neuen Array als einzelnes Element zu: var namen = new Array(); namen[0] = "Carolin"; namen[1] = "Christine"; namen[2] = "Phillip"; var alle = new Array(namen, "Katrin");

Eine alternative Definitionsmethode von verschachtelten Arrays erfolgt mit eckigen Klammern: var alle = [["Carolin", "Christine", "Phillip"], "Katrin"];

Der Zugriff auf das Element erfolgt wie gewöhnlich. Geben Sie es beispielsweise direkt aus: document.write(alle[0]);

Mit dieser Zeile geben Sie das komplette erste Array aus (siehe Abbildung 7.2). Abbildung 7.2: Das Array liefert alle drei Elemente.

Dies ist häufig nicht der gewünschte Effekt. Daher dürfen Sie ein Element im verschachtelten Array auch direkt ansprechen. Dazu folgt der Indexwert des zweiten Arrays in eckigen Klammern nach dem ersten: document.write(alle[0][1]);

2

210

Verschachtelte Arrays heißen auch mehrdimensionale Arrays.

 KOMPENDIUM 

JavaScript

Arrays

Kapitel 7 Abbildung 7.3: Der doppelte Index gibt nur noch einen Namen zurück.

Wie tief Sie ein Array verschachteln, bleibt Ihnen überlassen. Auch eine dreifache Verschachtelung ist möglich, wie das folgende Beispiel zeigt. Allerdings wird es hier bereits sehr unübersichtlich. <script language="JavaScript">

Listing 7.1: Drei Arrays ineinander verschachteln (array_verschachteln_ drei.html)

Die Ausgabe bleibt das zweite Element aus dem Array namen (siehe Abbildung 7.4). Abbildung 7.4: Der zweite Eintrag aus dem ersten Array

Was hier mit Strings eher eine Lernübung ist, kann bei der Programmierung durchaus praktisch sein. Denken Sie nur an Zahlenmatrizen, die Sie mit mehrdimensionalen Arrays miteinander verknüpfen können.

 KOMPENDIUM 

JavaScript

211

Kapitel 7

Arrays und Strings

Elemente ändern Um Elemente in einem Array zu ändern, ist es ausreichend, dem Index einen anderen Wert zuzuweisen. Folgender Code ändert das dritte Element des Arrays von »Phillip« in »Steffi«: var namen = new Array("Carolin", "Christine", "Phillip"); namen[2] = "Steffi";

Bei Änderungen darf selbstverständlich auch der Datentyp wechseln.

Die Länge eines Arrays Die length-Eigenschaft enthält die Länge eines Arrays, also die Zahl der Elemente. Die Abfrage erfolgt sehr einfach in Punktnotation: var namen = new Array("Carolin","Christine","Phillip"); document.write(namen.length); Abbildung 7.5: Das Array besteht aus drei Elementen.

Zur Berechnung der Länge des Arrays verwendet die Eigenschaft length intern das letzte Array-Element und addiert 1. Sind dazwischen Array-Elemente leer geblieben, wird dies nicht berücksichtigt. Listing 7.2: Probleme mit der length-Eigenschaft (array_laenge_ problem.html)

<script language="JavaScript">
//-->

Dieses Listing gibt 4 als Länge aus, obwohl der Index 1 kein Element besitzt.

212

 KOMPENDIUM 

JavaScript

Arrays

Kapitel 7

for-in- und andere Schleifen Der for-in-Schleife wurde bisher in Kapitel 4 »Programmieren« nur wenig Platz eingeräumt. Das liegt nicht daran, dass sie so unwichtig wäre, sondern an ihrem speziellen Anwendungsgebiet. Die for-in-Schleife dient hauptsächlich dazu, Elemente aus Arrays und Eigenschaften von Objekten auszulesen. Die Syntax zeigt die Schlüsselrolle des Operators in: for (Variable in Array) { Anweisungen; }

Die Schleife wird so lange durchlaufen, wie sich Elemente im Array befinden. Bei jedem Schleifendurchlauf wird der Index des aktuellen Elements in der Variablen gespeichert. Wie nützlich dies ist, zeigt das folgende Beispiel: var namen = new Array("Carolin","Christine","Phillip"); for(var i in namen) { document.write("Index " + i + ": "); document.write(namen[i] + "
"); }

Listing 7.3: Ein Array mit for-in auslesen (array_forin.html)

Hier prüft die for-in-Schleife das Array namen. Solange Elemente darin enthalten sind, wird der Variablen i der Index des soeben durchlaufenen Objekts übergeben. In den Schleifenanweisungen greift die Ausgabe mit dem Index auf die Array-Elemente zu. Abbildung 7.6: Der Index und die Array-Elemente erscheinen im Browser.

Andere Schleifen Als Alternative zur for-in-Schleife verwenden Sie einfach eine andere Schleifenart und überprüfen in der Bedingung die Länge des Arrays. Achten Sie aber darauf, dass die Länge immer um 1 höher ist als der Index.

 KOMPENDIUM 

JavaScript

213

Kapitel 7

Arrays und Strings Das folgende Beispiel verwendet eine gewöhnliche for-Schleife:

Listing 7.4: Ein Array mit for auslesen (array_for.html)

<script language="JavaScript">"); }

//-->

Das Beispiel erzeugt dieselbe Ausgabe, wie in Abbildung 7.6 zu sehen. Achten Sie darauf, dass die Ausgabe mit der Prüfung von length auch die undefinierten Elemente mitliefert, wenn in einem Array nicht alle Elemente definiert sind. Listing 7.5: Die for-Ausgabe mit dem bekannten length-Problem (for_length_ problem.html)

var namen = new Array(); namen[0] = "Carolin"; namen[2] = "Christine"; namen[3] = "Phillip"; for(var i = 0; i < namen.length; i++ ) { document.write("Index " + i + ": "); document.write(namen[i] + "
"); }

Der Code aus Listing 7.5 liefert also für Index 1 den Wert undefined. Abbildung 7.7: Index 1 ist undefined.

214

 KOMPENDIUM 

JavaScript

Arrays

Kapitel 7

Eine for-in-Schleife vermeidet dies, da sie undefinierte Werte ignoriert: for(var i in namen) { document.write("Index " + i + ": "); document.write(namen[i] + "
"); }

Listing 7.6: Die for-in-Schleife gibt nur definierte Elemente aus (forin_problem. html) Abbildung 7.8: Der Index 1 wird nicht ausgegeben.

Array-Elemente löschen Um ein Array-Element zu löschen, ist es ausreichend, ihm einen leeren String oder den Datentyp null zuzuweisen. Dabei gibt es aber ein Problem: Das Element wird auch in einer for-in-Schleife ausgegeben. Es ist also noch als Array-Element vorhanden. Ab Netscape Navigator 4 und Internet Explorer 4 bietet JavaScript allerdings eine Alternative. Sie können mit dem Schlüsselwort delete einzelne Array-Elemente löschen. Das folgende Beispiel illustriert dies. Zuerst wird das Element mit Index 0 gelöscht, anschließend werden in einer for-in-Schleife alle übrig gebliebenen Elemente ausgegeben: <script language="JavaScript">
Listing 7.7: Mit delete ArrayElemente entfernen (delete.html)

delete namen[0]; for(var i in namen) { document.write("Index " + i + ": "); document.write(namen[i] + "
"); }

//-->

 KOMPENDIUM 

JavaScript

215

Kapitel 7

Arrays und Strings

Abbildung 7.9: Der Eintrag bei Index 0 wurde entfernt.

Assoziative Arrays Ein assoziatives Array ist ein Array, das statt eines numerischen Index einen Index mit Namen besitzt. Der Name hat den Datentyp String und muss daher in Anführungszeichen stehen. Listing 7.8: Ein assoziatives Array (assoziativ.html)

var namen = new Array(); namen["Carolin"] = 13; namen["Christine"] = 10; namen["Phillip"] = 8;

Die Elemente in einem assoziativen Array werden immer mit ihrem Indexnamen angesprochen, also beispielsweise namen["Phillip"]

Natürlich können Sie auch mit einer for-in-Schleife auf das assoziative Array zugreifen. Die Syntax gleicht der bei einem gewöhnlichen Array: for(var i in namen) { document.write("Index " + i + ": "); document.write(namen[i] + "
"); } Abbildung 7.10: Der Index ist eine Zeichenkette; damit werden die Elemente ausgegeben.

216

 KOMPENDIUM 

JavaScript

Arrays

Kapitel 7

In der Praxis dienen assoziative Arrays hauptsächlich dazu, Schlüssel/ Daten-Paare zu speichern. Länge Assoziative Arrays haben eine Schwäche: Die length-Eigenschaft berücksichtigt assoziative Elemente nicht. Daher können Sie assoziative Elemente nur mit der for-in-Schleife auslesen und nicht, wie bei gewöhnlichen Arrays (siehe Listing 7.4), mit einer anderen Schleife. Folgendes Beispiel zeigt dies. Die Ausgabe der Länge ergibt nur den Wert 1, da die drei assoziativen Array-Elemente ignoriert werden. <script language="JavaScript">
Listing 7.9: Assoziative Elemente zählen nicht zur Länge des Arrays. (assoziativ_length. html)

//--> Abbildung 7.11: Das Array hat nur eine Länge von 1.

Methoden für Arrays Das Array-Objekt bietet einige Methoden, um mit Arrays zu arbeiten. Darunter befinden sich Methoden, um Arrays zu sortieren, zu verbinden oder die Reihenfolge umzudrehen. Da die Methoden in der Praxis bedeutsam sind, finden Sie sie in den nächsten Abschnitten jeweils mit Beispiel erklärt.

 KOMPENDIUM 

JavaScript

217

Kapitel 7

Arrays und Strings Sortieren mit sort() Die Funktion sort() dient dazu, die Elemente eines Arrays zu sortieren. Die Funktion steht ab Netscape 3 und Internet Explorer 3 in der zweiten Version zur Verfügung.

Tabelle 7.2: sort()

NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3































Die Sortierung erfolgt standardmäßig alphabetisch. Allerdings werden zum Vergleich die ASCI-Codes der einzelnen Zeichen herangezogen. Das bedeutet, dass Kleinbuchstaben immer größer als Großbuchstaben sind. Dieses Problem kennen Sie bereits von den Vergleichsoperatoren in Kapitel 4.1 im Abschnitt »Vergleich von Strings«. Bei Zahlenwerten erfolgt die Sortierung mit sort() ebenfalls über die ASCIIWerte. Zahlen werden also in Strings umgewandelt. Bei diesem System ist 9 größer als 15, da immer zuerst das erste Zeichen verglichen wird. Ist das erste Zeichen also schon unterschiedlich, steht die Sortierreihenfolge fest. In der Praxis ist die Sortierung von Zahlenwerten mit sort() daher nicht verwendbar. Alternativ können Sie für die sort()-Methode eine Sortierfunktion definieren. Ein Wahrheitswert true oder false erfährt für die Sortierung ebenfalls eine Umwandlung in einen String. Anschließend wird also der String »true« oder »false« mit den anderen Array-Elementen als Strings verglichen. Auch dies hat in der Praxis meist keinen Wert. Einsetzbar ist die Methode sort() alleine also am besten für Strings, die beispielsweise einheitlich mit Groß- oder Kleinschreibung beginnen. Der folgende Beispiel-Code sortiert ein Array mit drei Namen in die alphabetische Reihenfolge: Listing 7.10: Mit sort() arbeiten (sort.html)

<script language="JavaScript">
for(var i in namen) { document.write("Index " + i + ": "); 218

 KOMPENDIUM 

JavaScript

Arrays

Kapitel 7

document.write(namen[i] + "
"); } //--> Abbildung 7.12: Die Array-Elemente haben die Reihenfolge und damit auch den Index getauscht.

Ein assoziatives Array können Sie nicht sortieren, da die Elemente keine festgelegte Reihenfolge haben (auf der CD-ROM zu finden unter code\kap07\sort_assoziativ.html) Sortieren mit Funktion sort() kann als optionalen Parameter eine Funktion übernehmen: sort(Funktion)

Die Funktion enthält Anweisungen für die Sortierung. Wie funktioniert das? sort() schickt nacheinander jedes mögliche Paar aus zwei Array-Elementen an diese Funktion. Die Funktion muss diese zwei Elemente miteinander vergleichen. Wenn das erste Element größer als das zweite ist, gibt die Funktion einen negativen Wert zurück, ist es kleiner, einen positiven. Aus diesem Wert erkennt sort() also, welches der beiden Elemente größer ist. Hat die Methode alle Werte für alle möglichen Zweierpaarungen von Elementen, kann daraus auf die Rangfolge geschlossen werden. Ein Beispiel zeigt dies. Das Array besteht aus drei Zahlenwerten: var zahlen = new Array(); zahlen[0] = 15; zahlen[1] = 42; zahlen[2] = 9;

Die Sortierung erfolgt mit sort(). Als Parameter wird die Funktion sort_funk aufgerufen, die die Sortieranweisungen enthält.

 KOMPENDIUM 

JavaScript

219

Kapitel 7

Arrays und Strings zahlen.sort(sort_funk);

Die Sortierfunktion übernimmt die zwei Parameter. Sie erinnern sich? Die sort()-Methode übergibt zwei der Array-Elemente immer als zwei Parameter. Diese Parameter werden voneinander subtrahiert und das Ergebnis ist der Rückgabewert. Er ist negativ, wenn y größer als x ist und positiv, wenn x größer als y ist. function sort_funk(x,y) { return x - y; }

Zuletzt gibt eine for-in-Schleife die Array-Elemente aus, um zu testen, wie sich die Sortierung ausgewirkt hat. for(var i in zahlen) { document.write("Index " + i + ": "); document.write(zahlen[i] + "
"); }

Nachfolgend das vollständige Beispiel: Listing 7.11: Eine Sortierfunktion einsetzen (zahlen.html)

<script language="JavaScript">"); }

//-->

Ein verbreiteter Irrtum ist, dass der Rückgabewert der Funktion +1 oder -1 sein müsste. Ein positiver oder negativer Wert ist ausreichend, wie das vorangegangene Beispiel zeigt. Häufig wird nur +1 oder -1 als vorgegebener Rückgabewert verwendet.

220

 KOMPENDIUM 

JavaScript

Arrays

Kapitel 7 Abbildung 7.13: Die Zahlen sind numerisch sortiert.

concat() Die Methode concat() verbindet zwei Arrays miteinander. Die Methode ist in der dritten Generation der Netscape- und Microsoft-Browser noch nicht integriert, in späteren Browsern aber verfügbar. NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3































Tabelle 7.3: concat()

Die Syntax von concat() ist einfach: var Array_gesamt = Array1.concat(Array2);

Dabei wird Array2 an Array1 angehängt. Natürlich kann Array_gesamt auch Array1 oder Array2 sein. In einem der beiden Arrays können also die Elemente beider zusammengefasst werden. Array1 = Array1.concat(Array2);

Das folgende Beispiel macht aus zwei Arrays mit Namen ein Array, das alle Namen enthält. <script language="JavaScript">
Listing 7.12: Der Einsatz von concat()

(concat.html)

var gesamt = namen.concat(namen2);

for(var i in gesamt) { document.write("Index " + i + ": "); document.write(gesamt[i] + "
"); } //-->

 KOMPENDIUM 

JavaScript

221

Kapitel 7

Arrays und Strings

Abbildung 7.14: Die zwei Arrays sind miteinander in einem verbunden.

Natürlich können auch assoziative Arrays und Arrays mit assoziativen Elementen zusammengelegt werden. join() join("Trennzeichen") gibt alle Elemente eines Arrays hintereinander als String

zurück. Als Trennzeichen können Sie einen beliebigen String angeben. join() ist in den gängigen Browsern vorhanden, nur Netscape 2 und Internet

Explorer 3 in der ersten Version (JavaScript 1.0) unterstützen es nicht, da sie auch das Array-Objekt nicht unterstützen. Tabelle 7.4: join()

NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3































Das folgende Beispiel zeigt, dass sogar der Einsatz von HTML-Tags möglich ist: Listing 7.13: join() (join.html)

<script language="JavaScript">");

document.write(text); //-->

222

 KOMPENDIUM 

JavaScript

Arrays

Kapitel 7

Abbildung 7.15: Die Elemente des Arrays mit Strichpunkten und Zeilenumbruch getrennt

Das Ausgangs-Array wird von der Methode join() nicht geändert. Wird der Rückgabewert von join() einer Variablen zugewiesen, hat diese Variable den Datentyp String und keine Verbindung mehr zum Original-Array. reverse() Die Methode reverse() dreht die Reihenfolge der Elemente in einem Array um.3 reverse() ist wie join() in den gängigen Browsern vorhanden. NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3































Tabelle 7.5: reverse()

Das folgende Skript sortiert die Namen aus dem Array in umgekehrter Reihenfolge: <script language="JavaScript">
Listing 7.14: reverse() im Einsatz (reverse.html)

namen = namen.reverse();

for(var i in namen) { document.write("Index " + i + ": "); 3

In einem assoziativen Array macht diese Methode keinen Sinn, da assoziative Indexnamen keine Reihenfolge vorgeben.

 KOMPENDIUM 

JavaScript

223

Kapitel 7

Arrays und Strings document.write(namen[i] + "
"); } //-->

Abbildung 7.16: Die Elemente im Array haben ihre Plätze getauscht.

slice() Die Methode slice() schneidet Elemente aus einem Array heraus und bildet daraus ein neues Array. Dabei wird als erster, verpflichtender Parameter das Startelement angegeben, ab dem ausgeschnitten wird. var Array_neu = Array.slice(2);

Die vorhergehende Zeile liefert ein neues Array, das alle Elemente des alten Arrays ab Indexnummer 2 besitzt. Als zweiten optionalen Parameter können Sie ein Element angeben, bei dem das Ausschneiden endet. Dieses Element wird nicht mehr ausgeschnitten. var Array_neu = Array.slice(2,3);

Diese Code-Zeile schneidet also nur das Element 2 aus dem alten Array aus und weist es dem neuen Array zu. slice() ist nicht in der dritten Generation des Internet Explorers und Net-

scape Navigators enthalten, dafür aber in allen neueren Versionen, wie der folgenden Tabelle zu entnehmen ist: Tabelle 7.6: slice()

224

NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3































 KOMPENDIUM 

JavaScript

Arrays

Kapitel 7

Das folgende Beispiel schneidet zwei Elemente aus einem Array aus und übergibt sie an ein neues Array (mit Namen neu), das anschließend ausgegeben wird: <script language="JavaScript">
Listing 7.15: Die Methode slice()

(slice.html)

var neu = namen.slice(1,3);

for(var i in neu) { document.write("Index " + i + ": "); document.write(neu[i] + "
"); } //--> Abbildung 7.17: Zwei Elemente aus dem alten Array wurden in das neue Array übernommen.

Mit assoziativen Arrays funktioniert die Methode slice() nicht, da hier Start- und Endposition nicht als Indexwert definierbar sind. Negative Werte für den zweiten Parameter wie bei String.slice() sind ebenfalls nicht möglich. slice() mit einer Funktion einfügen Das slice() nicht mit dem Netscape Navigator 3 funktioniert, ist meist unproblematisch. Wünschen Sie dagegen die größtmögliche Abwärtskompatibilität, können Sie slice() auch durch eine Funktion ersetzen, die dieselben Aufgaben bewerkstelligt:

 KOMPENDIUM 

JavaScript

225

Kapitel 7 Listing 7.16: Statt slice() eine selbst geschriebene Funktion verwenden (slice_funktion. html)

Arrays und Strings <script language="JavaScript">
var namen = new Array(); namen[0] = "Carolin"; namen[1] = "Christine"; namen[2] = "Phillip"; namen[3] = "Konstantin"; var neu = array_neu(namen, 1, 3);

for(var i in neu) { document.write("Index " + i + ": "); document.write(neu[i] + "
"); } //--> Abbildung 7.18: Mit einer Funktion lassen sich Elemente aus einem Array auch im Netscape 3 auslesen.

splice() Die splice()-Methode ist recht mächtig. Sie entfernt Elemente aus der Mitte eines Arrays und kann sie einem neuen Array zuweisen.

226

 KOMPENDIUM 

JavaScript

Arrays

Kapitel 7

splice() ist im Internet Explorer erst seit Version 5.5 enthalten. Der Navigator hat diese Methode seit Version 4.x. NS4.x NS6

NS7










IE4 IE5

IE5.5 IE6

O7

M1

K3
















Tabelle 7.7: splice()

Im Folgenden sehen Sie die Syntax: var Array_neu = Array.splice(Start, Elementzahl, Ersatz1, Ersatz2, ); splice() löscht ab dem bei Start angegebenen Index so viele Elemente, wie die Elementzahl vorgibt. Diese beiden Parameter sind verpflichtend, die wei-

teren Parameter nur optional. Sie erhalten jeweils einen Datensatz als Ersatz für die herausgelöschten Daten. Sind weniger Ersatzdaten als gelöschte Daten vorhanden, werden die Daten ab Start ersetzt und die letzten nur gelöscht. Wenn Sie mehr Daten einsetzen als herauslöschen, werden diese Daten hinzugefügt. Schalten Sie die zu löschende Elementzahl auf 0, fügt der JavaScript-Interpreter sogar nur Daten ein. Das folgende Beispiel löscht nur den Index Nummer 1, da als Elementzahl nur 1 angegeben ist: <script language="JavaScript">
Listing 7.17: splice() in Aktion (splice.html)

var neu = namen.splice(1,1);

for(var i in neu) { document.write("Index " document.write(neu[i] + } for(var j in namen) { document.write("Index " document.write(namen[j] } //-->

 KOMPENDIUM 

JavaScript

+ i + ": "); "
");

+ j + ": "); + "
");

227

Kapitel 7

Arrays und Strings

Abbildung 7.19: Das neue Array hat als Index 0 das Element aus dem alten Array. Im alten Array fehlt das Element.

push() und pop() push(Wert) fügt einen Wert am Ende des Arrays hinzu, pop() entfernt das

letzte Element des Arrays. Dabei müssen Sie nicht wissen, welche Indexposition das letzte Element besitzt. push() und pop() sind im Internet Explorer erst seit Version 5.5 enthalten. Der Navigator besitzt sie seit Version 4.x. Tabelle 7.8:

NS4.x NS6

NS7

push()







pop()







push() und pop()

IE4 IE5

IE5.5 IE6

O7

M1

K3





































Das folgende Beispiel zeigt push() und pop() im Einsatz: Ein HTML-Formular besteht aus einem großen Textbereich (), in dem das Skript den Inhalt des Arrays ausgibt, einem Textfeld für neue Namen und zwei Schaltflächen. Die erste Schaltfläche dient dazu, neue Elemente an das Array anzufügen. Im onclick-Event-Handler ruft sie die Funktion eintrag() auf. Die zweite Schaltfläche löscht das letzte Element des Arrays. Dazu ruft sie bei onclick die Funktion loeschen() auf. <form name="fo"> <textarea rows="5" name="ausgabe">

228

 KOMPENDIUM 

JavaScript

Arrays

Kapitel 7



Der <script>-Teil enthält zuerst das Array: hier das bekannte Beispiel mit Namen. var namen = new Array(); namen[0] = "Carolin"; namen[1] = "Christine"; namen[2] = "Phillip"; namen[3] = "Konstantin";

Anschließend folgt die Funktion ausgabe(), die von setInterval jede Sekunde (1.000 Millisekunden = 1 Sekunde) aufgerufen wird.4 Die Funktion gibt mit einer for-in-Schleife alle Elemente des Arrays aus. var zeit = setInterval(ausgabe, 1000); function ausgabe() { document.fo.ausgabe.value = ""; for(var j in namen) { document.fo.ausgabe.value+="Index " + j + ": "; document.fo.ausgabe.value+=namen[j] + "\n"; }

Die Funktion wird immer wieder aufgerufen, um neu an das Array angefügte Elemente mit auszugeben. Wenn sie nur am Anfang einmal aufgerufen würde oder wenn der Ausgabe-Code nicht in einer Funktion stünde, würde ein neuer oder gelöschter Eintrag nicht im mehrzeiligen Textfeld erscheinen. Der Konqueror 3 kommt mit diesem Beispiel nicht zurecht, da er mit setInterval() in diesem Kontext Schwierigkeiten hat. Als Alternative können Sie setTimeout() verwenden. Klickt der Nutzer auf die Schaltfläche EINTRAGEN, ruft er damit wie bereits beschrieben die Funktion eintrag() auf. Diese Funktion fügt mit push() den Wert des einzeiligen Textfeldes an das Ende des Arrays an: function eintrag() { namen.push(document.fo.name.value); }

Die zweite Schaltfläche LÖSCHEN entfernt das letzte Element des Arrays mit pop(). Dies kann ein neu hinzugefügtes, aber natürlich auch eines der per Skript definierten Elemente sein. 4

setInterval() verwendet hier die Funktionsreferenz. Dies erkennen Sie an den fehlenden

runden Klammern. Sie könnten alternativ auch den Funktionsnamen direkt verwenden.

 KOMPENDIUM 

JavaScript

229

Kapitel 7

Arrays und Strings function loeschen() { namen.pop(); }

Das komplette Beispiel sehen Sie hier: Listing 7.18: push() und pop()

(push_pop.html)

<script language="JavaScript">
//-->

Da das Skript auf Elemente aus dem Formular direkt zugreift, müssen diese bereits bestehen. Da ein <script>-Bereich im Kopf der HTML-Seite beim Laden gleich ausgeführt wird, kennt es aber unter Umständen5 die Elemente im Körper der Seite noch nicht. Schreiben Sie daher das Skript einfach in den -Bereich. 5

230

Wie der Ladevorgang abläuft, ist von verschiedenen Faktoren wie Cache, zuerst übertragene Daten der HTML-Seite usw. abhängig. Daher ist eine Prognose hier schwierig.

 KOMPENDIUM 

JavaScript

Arrays

Kapitel 7 Abbildung 7.20: Sie können einen Text eintragen ...

Abbildung 7.21: ... und der Text wird in das Array übernommen.

Im Allgemeinen sollten Sie die Funktion setInterval in der Praxis nur einsetzen, wenn Sie sie unbedingt benötigen, da sie im Browser doch einige Ressourcen verbraucht. Sie sehen, dass je nach Rechnerstärke die Anzeige der Array-Inhalte leicht flackert. Dies signalisiert das Neuladen. shift() und unshift() Was push(Wert) und pop() für das Ende eines Arrays sind, sind unshift(Wert) und shift() für den Anfang des Arrays. unshift(Wert) fügt einen Wert an der Indexstelle 0 ein, shift() entfernt das Element mit Index 0. unshift() und shift() sind ebenfalls erst ab Internet Explorer 5.5 und ab

Netscape Navigator 4.x eingebunden.

 KOMPENDIUM 

JavaScript

231

Kapitel 7

Arrays und Strings

Tabelle 7.9: unshift() und shift()

NS4.x NS6

NS7

unshift()







shift()







IE4 IE5

IE5.5 IE6

O7

M1

K3





































Listing 7.19 ist schnell umgeschrieben. Die beiden Funktionen eintrag() und loeschen() werden statt mit push(Wert) und pop() mit unshift(Wert) und shift() versehen: Listing 7.19: Elemente am Anfang des Arrays einfügen und entfernen (Ausschnitt aus: unshift_shift.html)

function eintrag() { namen.unshift(document.fo.name.value); } function loeschen() { namen.shift(); }

Abbildung 7.22: Den neuen Namen fügt das Skript am Anfang ein.

In Strings umwandeln Die Funktion toString() wandelt ein Array in einen String um. Das Ergebnis ist vorhersehbar. Die Array-Elemente werden durch Kommata getrennt6 ausgegeben. toLocaleString() dagegen richtet sich bei der Darstellung der Array-Elemente

nach den lokalen Browsereinstellungen. Die Auswirkungen wird ein kleines Beispiel zeigen. toString()ist wesentlich älter als toLocaleString(). Sie ist bereits im Netscape 3 und Internet Explorer 3 in der zweiten Variante vorhanden, toLocaleString() dagegen nur in den neueren Browsern (siehe Tabelle 7.10). 6

232

ohne Leerzeichen nach den Kommata!

 KOMPENDIUM 

JavaScript

Arrays

toString()

Kapitel 7

NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3

















































toLocaleString()




Tabelle 7.10: toString() und toLocaleString()

Zum Testen verwendet das folgende Beispiel beide Methoden toString() und toLocaleString(): <script language="JavaScript">
Listing 7.20: Ein Array in einen String umwandeln (toString_toLocale String.html)

document.write(namen.toString() + "
"); document.write(namen.toLocaleString()); //--> toLocaleString() ist wie bereits erwähnt von den lokalen Einstellungen, d.h.

vom Länder- bzw. Sprachcode und vom Browser selbst abhängig. So versieht der deutsche Internet Explorer (5.5 und 6) das Array mit Strichpunkt und Leerzeichen als Trennzeichen zwischen den Elementen (siehe Abbildung 7.23). Opera 7 und Konqueror 3 stellen es genauso dar wie mit toString(), also mit Kommata und ohne Leerzeichen getrennt. Netscape Navigator 6 und 7 sowie Mozilla 1 verwenden dagegen Kommata als Trennzeichen, geben aber ansonsten bei Strings und Wahrheitswerten als Array-Elemente nur den Datentyp aus (siehe Abbildung 7.24). Zahlen werden dagegen als Zahl ausgegeben. Die Umwandlung in Strings, insbesondere mit toLocaleString(), ist in der Praxis nicht sehr zweckmäßig, da die Ergebnisse sehr unterschiedlich sind. Verwenden Sie besser join().

 KOMPENDIUM 

JavaScript

233

Kapitel 7

Arrays und Strings

Abbildung 7.23: toLocaleString() erscheint

im Internet Explorer 6 mit Strichpunkt und Leerzeichen als Trennung.

Abbildung 7.24: Der Netscape Navigator (hier 7) und Mozilla geben die Array-Elemente als Datentyp aus.

Alternative Datenspeicherung mit eval() Die globale Funktion eval("String") verwendet einen String und führt ihn als JavaScript-Code aus. Diese Funktion kann auch zur Datenspeicherung eingesetzt werden. Die Erläuterungen zur eval()-Funktion finden Sie in Kapitel 5.3 im Abschnitt »eval()«. Für die Datenspeicherung setzt eval()Variablennamen zusammen. Es geht einfach los: Vier normale Variablen werden deklariert. Beachten Sie die einheitliche Namensgebung. Jede Variable beginnt mit namen und hat dann eine Nummer. var var var var

234

namen0 namen1 namen2 namen3

= = = =

"Carolin"; "Christine"; "Phillip"; "Konstantin";

 KOMPENDIUM 

JavaScript

Arrays

Kapitel 7

Wenn Sie sich dabei an den Index eines Arrays erinnert fühlen, sind Sie auf der richtigen Spur! Nun folgt eine for-Schleife. Sie wird so oft durchlaufen, wie es vorher Variablen gab (also viermal). for(var i = 0; i <= 3; i++) {

In der Ausgabe steht in der zweiten Zeile das eigentliche Highlight des Skripts. eval() übernimmt den immer gleichen Teil der Variablen namen als String. Die Zählervariable wird per Konkatenation angefügt. Sie stellt hier also den Index dar. document.write("Index " + i + ": "); document.write(eval("namen" + i) + "
"); }

Nachfolgend sehen Sie den vollständigen Code: <script language="JavaScript">
Listing 7.21: eval() als ArrayErsatz (eval_array.html)

for(var i = 0; i <= 3; i++) { document.write("Index " + i + ": "); document.write(eval("namen" + i) + "
"); } //-->

Natürlich ist die eval()-Funktion als Array-Ersatz nicht so praktisch wie ein Array selbst. Sonst wäre sie ja kein Ersatz. Beispielsweise lässt sie sich nicht mit einer for-in-Schleife auslesen und auch die Zahl der Objekte kann nicht über length bestimmt werden.

 KOMPENDIUM 

JavaScript

235

Kapitel 7

Arrays und Strings

Abbildung 7.25: Die Ausgabe ist nicht von der eines Arrays zu unterscheiden.

7.2

String

Mit Strings haben Sie bis hierher bereits häufig gearbeitet. Jetzt folgen noch ein paar Schmankerl. Das String-Objekt bietet eine Eigenschaft, die StringLänge mit length und einige Methoden, die die Arbeit mit Strings erleichtern. JavaScript unterstützt das String-Objekt seit Version 1.0. Es ist auch in den sehr alten Browsern wie Netscape ab Version 2 und Internet Explorer 3 in beiden Varianten vorhanden. Allerdings enthalten die frühen Versionen bei weitem noch nicht alle Methoden. Dazu finden Sie jedoch bei den einzelnen Methoden Übersichtstabellen. Tabelle 7.11: String-Objekt

NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3































String-Länge Die Eigenschaft length kennen Sie bereits von Arrays. Sie gibt die Länge einer Zeichenkette aus. Die Syntax ist einfach: String.length; length ist für das String-Objekt bereits in den ersten Browsern Netscape 2 und Internet Explorer 3 in beiden Varianten enthalten.

Tabelle 7.12: length

236

NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3































 KOMPENDIUM 

JavaScript

String

Kapitel 7

Die folgenden Zeilen geben die Länge des Wortes »Nilpferd« aus. var text = "Nilpferd"; document.write(text.length);

Listing 7.22: Die Länge einer Zeichenkette (string_length.html) Abbildung 7.26: »Nilpferd« besteht aus acht Buchstaben.

Die Eigenschaft length zählt jedes Zeichen zur Stringlänge hinzu, auch Leerund Sonderzeichen.

Formatieren Einige Methoden des String-Objekts dienen dazu, Text zu formatieren. Die Formatierung entspricht dabei dem jeweiligen HTML-Tag. Die Formatiermethoden des String-Objekts gelten bereits in den ersten Browsern Netscape 2 und Internet Explorer 3 in beiden Varianten. NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3































Tabelle 7.13: Formatiermethoden des StringObjekts

Der Einsatz der String-Methoden ist sehr einfach: var text = "Nilpferd"; document.write(text.bold());

Diese Zeilen geben den Text »Nilpferd« fett aus. Die folgende Tabelle gibt eine Übersicht über die Formatiermethoden.

 KOMPENDIUM 

JavaScript

237

Kapitel 7 Tabelle 7.14: Formatiermethoden des StringObjekts

Arrays und Strings

Methode

Beschreibung

anchor("Name")

legt einen Anker (-Tag) um den Text und vergibt ein nameAttribut.

big()

legt ein -Tag um den String und stellt den Text damit größer dar.

blink()

erzeugt mit dem -Tag einen blinkenden Text. Der Internet Explorer und der Konqueror kennen dieses Tag nicht und ignoriert es daher.

bold()

stellt den Text mit -Tag fett dar.

fixed()

erzeugt diktengleiche Schrift mit -Tags, das heißt Schrift, deren Buchstaben alle gleich breit sind. Diese Schrift verwendet man beispielsweise für Listings. Die bekannteste diktengleiche Schriftart ist Courier.

fontcolor(Farbe) gibt die Farbe des Strings als Hexadezimalwert (z.B. #000000

für Schwarz) oder als Farbname (black) an. Der Farbname wird vom Prinzip her in ein -Tag mit color-Attribut geschrieben. fontcolor(Größe) gibt die Größe der Farbe in den sieben aus HTML bekannten Größenstufen von 1 bis 7 an. Entspricht dem size-Attribut des -Tags. italics()

steht für kursive Schreibweise, also den Einschluss in Tags.

link(URL)

legt ein -Tag um den Text. Das href-Attribut für das LinkZiel übernimmt den Parameter URL der Methode.

small()

stellt den Text mit <small>-Tags kleiner dar.

strike()

streicht den Text mit <strike>-Tags durch.

sub()

stellt den Text tief; entspricht also <sub>-Tags.

sup()

stellt den Text hoch; entspricht also <sup>-Tags.

Das folgende Beispiel zeigt, wie mehrere Formatierungen auf einen Text angewendet werden: Listing 7.23: Ein Text lässt sich mit mehreren Methoden formatieren (formatieren.html).

238

<script language="JavaScript">
 KOMPENDIUM 

JavaScript

String

Kapitel 7 text = text.bold(); text = text.link("http://www.mut.de")

document.write(text); //--> Abbildung 7.27: Die Schrift ist als fetter Link formatiert.

Die Formatierung mit den Methoden des String-Objekts sind im Web recht selten zu finden. Dies ist eigentlich schade, da sie in allen Browsern gut funktionieren und häufig einfacher sind als umständliche Ausgaben mit den HTML-Tags.

Groß- und Kleinbuchstaben Die MethodentoLowerCase() und toUpperCase()7 dienen dazu, Strings in Kleinbzw. Großbuchstaben umzuwandeln. toLowerCase() und toUpperCase() sind bereits in den ersten Browsern Netscape

2 und Internet Explorer 3 in beiden Varianten vorhanden. NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3

toLowerCase()































toUpperCase()































7

Tabelle 7.15: toLowerCase() und toUpperCase()

case hier Englisch für Buchstaben.

 KOMPENDIUM 

JavaScript

239

Kapitel 7

Arrays und Strings Das folgende Beispiel wandelt einen Text zuerst in Klein- und dann in Großbuchstaben um:

Listing 7.24: toLowerCase() und toUpperCase()

(toLowerCase_toUp perCase .html)

<script language="JavaScript">"); document.write(text.toUpperCase());

//--> Abbildung 7.28: Das »Nilpferd« in Klein- und Großbuchstaben

Sonderzeichen bleiben von der Umwandlung verschont. Praxiseinsatz Sie sollten Strings immer dann in Klein- oder Großbuchstaben umwandeln, wenn Sie beispielsweise einen Vergleich durchführen möchten, der alphabetisch unabhängig von Groß- und Kleinschreibung sortiert. Das folgende Beispiel zeigt dies anhand einer Sortierfunktion für ein Array: Listing 7.25: Sortieren mit Kleinbuchstaben (sort_lowerCase. html)

<script language="JavaScript"> y.toLowerCase())

return +1; else return -1; }

240

 KOMPENDIUM 

JavaScript

String

Kapitel 7

var namen = new Array(); namen[0] = "arnold"; namen[1] = "Walter"; namen[2] = "Viktor"; namen.sort(sortieren); for(var i in namen) { document.write("Index " + i + ": "); document.write(namen[i] + "
"); } //-->

Die Sortierfunktion wandelt die Strings vor dem Vergleich erst in Kleinbuchstaben um, damit die unterschiedlichen ASCII-Codes von Groß- und Kleinbuchstaben keine Rolle mehr spielen. Natürlich wäre alternativ auch eine Umwandlung in Großbuchstaben möglich. Da die Umwandlung nur in der Funktion erfolgt, sind die Original-Strings nicht betroffen. Abbildung 7.29: Die Sortierung funktioniert.

Um Strings und numerische Werte gemischt zu sortieren, müssen Sie in die Sortierfunktion eine Fallunterscheidung einbauen, die zwischen Zahlen und Strings unterscheidet. toLocaleLowerCase() und toLocaleUpperCase() toLocaleLowerCase() und toLocaleUpperCase() sind neuere Alternativen. Sie beachten auch die lokale Sprache des Clients, da in manchen Sprachen Großbuchstaben nicht die direkten Entsprechungen von Kleinbuchstaben sind, wie wir dies aus unserem lateinischen Alphabet gewohnt sind. toLocaleLowerCase() und toLocaleUpperCase() sind sehr neue Methoden.

 KOMPENDIUM 

JavaScript

241

Kapitel 7

Arrays und Strings

Tabelle 7.16: toLocaleLowerCase() und toLocaleUpperCase()

NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

toLocaleLowerCase()



















toLocaleUpperCase()



















K3

Auf der CD-ROM finden Sie im Ordner code\kap07 ein Beispiel mit dem Namen toLocaleLowerCase_toLocaleUpperCase.html.

Methoden zum Arbeiten In diesem Abschnitt finden Sie einige Methoden, um sinnvoll mit StringObjekten arbeiten zu können. Tabelle 7.17: Arbeitsmethoden

NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3































Alle Arbeitsmethoden sind in den gängigen Browsern vorhanden. Nur in der Unterstützung der älteren Browser Netscape 2 und 3 sowie Internet Explorer 3 in beiden Versionen gibt es Unterschiede, die Sie bei den Methoden finden. concat() Die Methode concat() verbindet zwei Strings. Sie hat also dieselbe Funktion wie der Operator +. In der Syntax gleicht sie der concat()-Methode des ArrayObjekts: var String_gesamt = String1.concat(String2);

Die Methode concat() steht erst ab der vierten Generation von Netscape Navigator und Internet Explorer zur Verfügung. Ein kleines Beispiel zeigt die Funktionsweise: var text1 = "Nilpferd"; var text2 = " und Giraffe"; var gesamt = text1.concat(text2);

Die Variable gesamt enthält nun den Text »Nilpferd und Giraffe«.

242

 KOMPENDIUM 

JavaScript

String

Kapitel 7

slice() slice(Start, Ende) funktioniert für Strings ähnlich wie für Arrays. Als Parameter geben Sie einen Startpunkt an, ab dem die Zeichen des Strings an einen neuen String übergeben werden. Der Endpunkt ist optional und legt fest, bis zu welcher Stelle die Zeichen übernommen werden.

Die Methode slice() steht ebenfalls erst ab der vierten Browsergeneration von Netscape und Internet Explorer zur Verfügung. Folgendes Beispiel illustriert slice(): var text = "Nilpferde"; document.write(text.slice(3, 8));

Listing 7.26: (Ausschnitt aus: slice_string())

Das Beispiel liefert die Buchstaben von Position 3 (p) bis vor Position 8 (d an Position 7). Der Endpunkt (Position 8) wird also nicht in den neuen String übernommen. Abbildung 7.30: Die Zeichenkette von Position 3 bis (exklusive) 8 ist »pferd«.

Beachten Sie, dass der Index nicht mit 1, sondern mit 0 beginnt. Das erste Zeichen hat also die Position 0. Des Weiteren ist wichtig zu wissen, dass der Original-String bestehen bleibt und die in den neuen String übernommenen Zeichen nicht aus dem Original-String herausgelöscht werden. Wenn Sie für den Endpunkt einen negativen Wert angeben, wird er von rechts, also vom Ende des Skripts, gezählt. Ein Endpunkt von -1 ist also das vorletzte Zeichen. Alternativ können Sie auch die Eigenschaft length verwenden, um das Ende eines Strings herauszufinden. String.length - 2 ist also ebenfalls der vorletzte Buchstabe eines Strings. Beachten Sie, dass Sie als Endpunkt String.length -1 verwenden, wenn Sie nur bis zum vorletzten Buchstaben ausgeben wollen, denn der Endpunkt wird nicht mit in den neuen String übernommen.

 KOMPENDIUM 

JavaScript

243

Kapitel 7

Arrays und Strings split() split(Trennzeichen) teilt einen String in Einzelstrings, die alle als Elemente einem Array übergeben werden. Das Trennzeichen legt fest, an welchen Stellen der String geteilt wird.

Die Methode split() gibt es seit Netscape 3 und Internet Explorer 4. Ein Beispiel schafft Klarheit: Das Skript teilt den Namen beim Leerzeichen, da als Trennzeichen " " eingetragen ist. Dies können Sie beispielsweise bei Formulareingabefeldern nutzen, um Eingaben voneinander zu trennen. Listing 7.27: Einen String mit split() teilen (split_string.html)

<script language="JavaScript">
for(var i in text_array) { document.write("Index " + i + ": "); document.write(text_array[i] + "
"); } //--> Abbildung 7.31: Der Name besteht nun aus zwei ArrayElementen.

Ist das Trennzeichen ein leerer String (""), wird jeder Buchstabe geteilt: var text = "Nilpferd"; var text_array = text.split("");

244

 KOMPENDIUM 

JavaScript

String

Kapitel 7 Abbildung 7.32: Jeder Buchstabe ist ein Array-Element.

substring() und substr() substring(Start, Ende) liefert den String von der Startposition bis vor die Endposition. Das Zeichen an der Endposition ist nicht mehr eingeschlossen. Zudem beginnt die Zählung der Zeichen bei 0. substr(Start, Länge) arbeitet statt mit einer Endposition mit der Länge. In der Länge legen Sie also fest, wie viele Zeichen in den neuen String übernommen werden sollen. Die Länge ist allerdings optional. Wird sie weggelassen, nimmt der Interpreter alle Zeichen ab dem Start bis zum Ende des Strings. substr() ist nur in der vierten Generation von Netscape und Internet Explorer vorhanden, substring() dagegen bereits seit Netscape 2 und IE 3 in beiden Varianten.

Das folgende kleine Beispiel illustriert die Verwendung beider Methoden: var text = "Nilpferd"; document.write(text.substring(3, 8)); document.write("
"); document.write(text.substr(3, 5)); substring() ist slice() sehr ähnlich. Der einzige Unterschied besteht darin, dass Sie in substring() für die Endposition keine negativen Werte angeben dürfen, sondern in einem solchen Fall mit length arbeiten müssen. Sollten Sie aber gerade diese Funktion nicht benötigen, ist substring() zu bevorzugen, da sie auch in Uralt-Browsern vorhanden ist.

 KOMPENDIUM 

JavaScript

Listing 7.28: substring() und substr() im Ein-

satz (Ausschnitt aus: substring_substr. html)

245

Kapitel 7

Arrays und Strings

Abbildung 7.33: Beide Methoden erzeugen hier dieselbe Ausgabe.

Der Netscape Navigator und Mozilla haben Probleme mit substring(), wenn im <script>-Tag als Sprache JavaScript 1.2 angegeben ist. Liegt der Endpunkt dann vor dem Startpunkt, werden beide nicht umgewandelt. Stattdessen wird nur ein leerer String übergeben. Bei den anderen Browsern dagegen liefert eine Umkehrung von Start- und Endpunkt den String in normaler Reihenfolge. Es wird also nichts bewirkt. Für Netscape und Mozilla sollten Sie in diesem Fall JavaScript1.2 nicht als language-Attribut verwenden; dann funktioniert es. Auf dem Mac führt ein negativer Wert im Netscape Navigator 4.x für den Parameter Länge von substr() eventuell zu einem Absturz. Ein Beispielskript zum Testen finden Sie auf der CD-ROM unter code\kap07\substring_umgekehrt.html. charAt(), charCodeAt() und fromCharCode() charAt(Position) liefert das Zeichen des Strings an der als Parameter festgelegten Position. Die Entsprechung charCodeAt(Position) gibt nicht das Zei-

chen selbst zurück, sondern den ASCII-Code bzw. Unicode des Zeichens. fromCharCode(Code1, Code2) wandelt den ASCII-Code bzw. für darin nicht enthaltene Zeichen Unicode in das zugehörige Zeichen um. Als String-Objekt wird hier nicht ein instanziiertes Objekt, sondern String vorangestellt: String.fromCharCode(65);

Diese Zeile ergibt also das große A. Des Weiteren können Sie bei fromCharCode() auch optional mehrere Codes angeben. charAt() ist bereits in den alten Browsern ab Netscape 2 und Internet Explorer 3 in der ersten Version vorhanden. Die anderen beiden Methoden sind erst ab der vierten Browsergeneration enthalten.

246

 KOMPENDIUM 

JavaScript

String

Kapitel 7

Das folgende Beispiel zeigt alle drei Methoden im Einsatz: <script language="JavaScript">
Listing 7.29: Strings in ihrem Zeichencode (zeichencode.html)

document.write(text.charAt(3) + "
"); document.write(text.charCodeAt(3) + "
"); document.write(String.fromCharCode(112));

//--> Abbildung 7.34: Das Zeichen, der Zeichencode und das Zeichen aus dem Zeichencode werden ausgegeben.

Der Unicode von Zeichen wird meist in hexadezimaler Schreibweise angegeben. Diese müssen Sie erst in dezimale Schreibweise umwandeln, bevor Sie den Code in der Methode fromCharCode() einsetzen können.

Suchen Eine der häufigsten Anwendungen für Strings ist die Suche. Die Fragen: Wo befindet sich eine bestimmte Textstelle? Wie können verschiedene Strings abgeglichen werden? und viele andere Fragen lassen sich mit den Suchmethoden beantworten. Viele Suchmethoden erhalten mit regulären Ausdrücken erst all ihre Möglichkeiten. Reguläre Ausdrücke sind genau definierte Textmuster und Suchkriterien. Sie finden eine ausführliche Abhandlung mit Beispielen in Kapitel 21 »Vollständigkeitsüberprüfung und reguläre Ausdrücke«.

 KOMPENDIUM 

JavaScript

247

Kapitel 7

Arrays und Strings indexOf() und lastIndexOf() Die beiden Methoden indexOf(Suchstring, Start) und lastIndexOf(Suchstring, Start) sind hervorragend zum Suchen geeignet. indexOf() sucht den Suchstring vom Beginn des Strings bis zum Ende. Optional kann eine Startposition, ab der gesucht werden soll, als zweiter Parameter angegeben werden. lastIndexOf() sucht genau wie indexOf(), nur im String von hinten (rechts) nach vorne (links). Wird eine Startposition angegeben, sucht lastIndexOf() ab dieser Position nach links bis zum Anfang des Strings. Kommt der Suchstring im String nicht vor, geben beide Methoden den Wert -1 zurück. indexOf() und lastIndexOf() sind bereits seit den Anfängen (Netscape 2 und Internet Explorer 3 in der ersten Version) in die Browser integriert.

Tabelle 7.18: indexOf() und lastIndexOf()

NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3

indexOf()































lastIndexOf()































Im folgenden Beispiel suchen die Methoden nach dem ersten bzw. letzten »f« im String »Nilpferd und Giraffe«: Listing 7.30: Suchen mit indexOf() und lastIndexOf()

(indexOf_last IndexOf.html)

<script language="JavaScript">"); document.write("Letztes f: " + text.lastIndexOf("f")); //-->

Mehrmals suchen Beim letzten Beispiel hat das Skript das erste und das letzte »f« identifiziert. Das erste »f« aus »Giraffe« blieb dagegen unentdeckt. Wollen Sie alle Vorkommen eines Suchstrings aus einem String herausfinden, müssen Sie sich mit einer Schleife behelfen. Für unser Beispiel sieht sie wie folgt aus:

248

 KOMPENDIUM 

JavaScript

String

Kapitel 7 Abbildung 7.35: Die Positionen des ersten und letzten »f«

<script language="JavaScript">
Listing 7.31: Mehrmals suchen (mehrmals_suchen. html)

while (text.indexOf("f", pos + 1) != -1) { pos = text.indexOf("f", pos + 1); document.write(pos + "; "); }

//-->

Das Grundprinzip der Schleife ist einfach. In der indexOf-Funktion wird die Startposition der Suche um 1 erhöht, wenn der Suchstring gefunden wurde. Die Suche startet dann also nach dem ersten Fundort neu. Die Abbruchbedingung ist, wenn der Suchstring nicht mehr gefunden wird, indexOf() also -1 zurückliefert. Abbildung 7.36: Alle Fundstellen des »f« werden ausgegeben.

localeCompare() localeCompare() vergleicht zwei Strings miteinander. Die Syntax sieht folgen-

dermaßen aus: var Ergebnis = String1.localeCompare(String2);

 KOMPENDIUM 

JavaScript

249

Kapitel 7

Arrays und Strings Zum Vergleich werden die Unicode-Werte aller Zeichen der Strings nacheinander verglichen. Zusätzlich wird die Sprache des Browsers mit einbezogen. Dies hat im deutschsprachigen Raum keine Auswirkungen, kann aber beispielsweise bei einem arabischen oder türkischen Browser Änderungen hervorrufen.

Tabelle 7.19: localeCompare()

NS4.x NS6


NS7

IE4 IE5




IE5.5 IE6

O7

M1













K3

Sind die Strings in allen Werten gleich, wird 0 zurückgeliefert. Ist String1 kleiner als String2, wird also vor String2 einsortiert, liefert der Browser -1. Ist dagegen String2 vor String1 einsortiert, entspricht der Rückgabewert +1. Listing 7.32: localeCompare()

(Ausschnitt aus: localeCompare.html)

var text1 = "Nilpferd"; var text2 = "Giraffe"; var erg = text1.localeCompare(text2);

In diesem Beispiel sortiert sich »Giraffe« vor »Nilpferd« ein, der Rückgabewert ist also +1 (siehe Abbildung 7.1).

Abbildung 7.37: Die 1 besagt, dass String2 vor String1 einsortiert ist.

match(), replace() und search() Die drei Methoden in diesem Abschnitt haben vor allem eines gemeinsam. Sie arbeiten alle mit regulären Ausdrücken als Suchstring. match(RegExp) – liefert ein Array mit allen Strings, die auf das Muster des regulären Ausdrucks passen. Passt kein Teil des Strings, wird null

zurückgegeben. replace(RegExp, Ersatzstring) – diese Methode ersetzt den mittels des

regulären Ausdrucks gefundenen String durch den Ersatz-String. search(RegExp) – arbeitet wie indexOf(), nur mit regulärem Ausdruck. Liefert die Stelle zurück, an der der reguläre Ausdruck zum ersten Mal mit dem String übereingestimmt hat. Ist das Muster des regulären Ausdrucks nicht im String zu finden, liefert die Methode -1.

250

 KOMPENDIUM 

JavaScript

String

Kapitel 7

Alle drei Methoden sind in den aktuellen Browsern vorhanden (siehe Tabelle 7.20). Ältere Browser wie der Netscape Navigator 2 und 3 und der Internet Explorer 3 in beiden Varianten unterstützen sie nicht. NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3































Tabelle 7.20: match(), replace() und search()

Beispiele zu den regulären Ausdrücken finden Sie in Kapitel 21 »Vollständigkeitsüberprüfung und reguläre Ausdrücke«.

toString() und valueOf() Die beiden Methoden toString() und valueOf() gibt es auch für das StringObjekt. Hier sind sie in Ihrer Wirkung allerdings nicht sehr spannend. Sie geben einfach nur den String selbst zurück. NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3

toString()































valueOf()































Tabelle 7.21: toString() und valueOf()

Auf der CD-ROM finden Sie ein Beispiel unter code\kap07\toString_value Of.html.

 KOMPENDIUM 

JavaScript

251

8

OOP

Objekte in JavaScript nutzen die Beispiele in den letzten beiden Kapiteln bereits sehr fleißig. Arrays und Strings haben ein Objekt (siehe Kapitel 7 »Arrays und Strings«) und weitere JavaScript-eigene Objekte finden Sie in Kapitel 6.2 »Objekte von JavaScript«. Die objektorientierte Programmierung (OOP) in JavaScript geht noch einen Schritt weiter. Sie nutzt nicht nur die JavaScript-eigenen Objekte, sondern kann auch selbst Objekte erstellen und auf deren Eigenschaften und Methoden zugreifen. Die Grundlagen zur Objektorientierung können Sie in Kapitel 6.1 »Was sind Objekte?« nachlesen.

8.1

Eigene Objekte

Für Objekte bzw. Klassen gibt es in JavaScript kein eigenes Schlüsselwort. Stattdessen wird function verwendet. function Objektname() { Eigenschaften und Methoden }

Der Objektname folgt wie ein Funktionsname nach function. Die runden Klammern sind erforderlich. In den geschweiften Klammern stehen die Eigenschaften und Methoden, die wir in den folgenden Abschnitten behandeln. Wollen Sie das Objekt verwenden, müssen Sie es instanziieren. Dazu dient der bereits bekannte Konstruktor new: var Objektinstanz = new Objektname();

Diese Zeile erzeugt also eine Instanz des Objekts mit dem Namen Objektname.

 KOMPENDIUM 

JavaScript

253

Kapitel 8

OOP Eigene Objekte sind in dieser Form auch in alten Browsern wie Netscape ab Version 2 und Internet Explorer 3 möglich.

Tabelle 8.1: Eigene Objekte

NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3































Eigenschaften Eigene Objekte erhalten ihre Eigenschaften direkt im function-Block: function Objektname() { this.Eigenschaft1 = Wert; this.Eigenschaft2 = Wert; }

Das Schlüsselwort this besagt, dass die Eigenschaft genau für dieses Objekt definiert wird. Beachten Sie, dass Sie ohne dieses Schlüsselwort auf die Eigenschaft nicht zugreifen können! Der Zugriff auf eine Eigenschaft erfolgt über den Objektinstanznamen gefolgt von einem Punkt und dann dem Namen der Eigenschaft. var Ojektinstanz = new Objektname(); Objektinstanz.Eigenschaft1

Ein kleines Beispiel zeigt dies. Das Objekt Wuschl wird mit der Eigenschaft Laut definiert. Anschließend erhält das Objekt eine Instanz, deren Eigenschaft Laut dann abgefragt wird. Listing 8.1: Eine Objekteigenschaft definieren und abfragen (eigenschaft.html)

<script language="JavaScript">
//-->

254

 KOMPENDIUM 

JavaScript

Eigene Objekte

Kapitel 8

Sie kennen das Objekt Wuschl bereits aus Kapitel 6.1 »Was sind Objekte?«. Wuschl ist eine Meise. Die Klasse Vogel definieren wir an dieser Stelle nicht. Abbildung 8.1: Wuschl gibt »Tschiep« als Laut zurück.

Der Objektinstanz das Kürzel obj voranzustellen und dann den Objektnamen folgen zu lassen, ist gängige Praxis, aber natürlich nicht verpflichtend. Aber dennoch sollten Sie eine Namenskonvention wählen, die erkennen lässt, dass es sich um eine Instanz handelt und von welchem Objekt sie # abstammt.

Methoden Eine Methode in einem eigenen Objekt ist im Prinzip eine Funktion. Das heißt, die Methode wird wieder mit dem function-Schlüsselwort definiert.1 function Methode() { Anweisungen }

Im Objekt muss die Methode verankert sein. Dazu wird sie – wie eine Eigenschaft – mit ihrem Namen definiert: function Objektname() { this.Methodenname = Methode; }

Wichtig ist auch hier das Schlüsselwort this, damit die Methode dem Objekt zugewiesen wird, in dem sie steht. Die Methode wird später mit dem Methodennamen aufgerufen. Der Methodenname für den function-Aufruf (in der Syntax Methode genannt) erscheint außerhalb des Objekts nicht. Allerdings wird in der Praxis häufig derselbe Bezeichner für Methodenname und Methode verwendet.

1

Eine Methode hat hauptsächlich einen Unterschied zu einer Funktion: Sie kann mit this auf Eigenschaften und andere Methoden des Objekts zugreifen. Sie erbt also gewissermaßen die anderen Eigenschaften und Methoden des Objekts.

 KOMPENDIUM 

JavaScript

255

Kapitel 8

OOP Beachten Sie, dass der Methodenaufruf ohne runde Klammern erfolgt. Eigenschaften aus dem Objekt stehen in der Methode mit dem Schlüsselwort this zur Verfügung. Das folgende Beispiel definiert eine Methode Laut_geben(), die auf die Eigenschaft Laut zugreift. Die Methode hat für die interne Verwendung denselben Namen wie für die externe außerhalb des Objekts.

Listing 8.2: Eine Methode definieren und verwenden (methode.html)

<script language="JavaScript">
//--> Abbildung 8.2: Der Text wird nun mit einer Methode ausgegeben.

Sollten Sie Variablen in einem Objekt oder in einer Methode verwenden, sind die Variablen dort natürlich lokal (siehe Kapitel 5 »Funktionen«). Lokale Variablen in Objekten heißen auch privat, da JavaScript keine eigenen Schlüsselwörter besitzt, um Klassen oder ihre Elemente als privat oder öffentlich (private oder public) zu kennzeichnen.

Parameter Objekte können – wie Funktionen – auch Parameter erhalten, die dann in Eigenschaften und Methoden eingesetzt werden. Das Prinzip ist sehr einfach: 256

 KOMPENDIUM 

JavaScript

Eigene Objekte

Kapitel 8

function Objektname(Parameter1, Parameter2) { this.Eigenschaft1 = Parameter1; this.Eigenschaft2 = Parameter2 - Parameter1; }

Die Parameter werden übergeben und können dann in den Eigenschaften des Objekts genutzt werden. Der Aufruf der Objektinstanz sieht folgendermaßen aus: var Objektinstanz = new Objektname(Parameter1, Parameter2);

Etwas weniger theoretisch lässt sich das in einem Beispiel zeigen. Das Skript definiert ein Objekt Vogel. Als Parameter wird der Laut übergeben, den der Vogel gibt. Er wird dann von der Methode Laut_geben verwendet, um den Vogellaut auszugeben. <script language=»JavaScript«>
Listing 8.3: Einen Parameter übergeben (parameter.html)

this.Laut = laut;

this.Laut_geben = Laut_geben; } function Laut_geben() { document.write(this.Laut);

} var Wuschl = new Vogel(»TschiepTschiep«); Wuschl.Laut_geben(); //--> Abbildung 8.3: Der Vogel übernimmt den Laut aus dem Parameter.

 KOMPENDIUM 

JavaScript

257

Kapitel 8

OOP Standardwerte Der Fall, dass kein Parameter übergeben wird, obwohl er für eine Eigenschaft erforderlich wäre, ist natürlich sehr ärgerlich. Wenn beispielsweise im oberen Beispiel der Parameter laut nicht angegeben wird, gibt die Methode Laut_geben den Wert undefined zurück. var Wuschl = new Vogel(); Wuschl.Laut_geben();

Um dies zu vermeiden, können Sie in der Eigenschaft mit dem logischen ODER einen Alternativwert angeben: function Vogel(laut) { this.Laut = laut || "Kikeriki"; this.Laut_geben = Laut_geben; }

Nun verwendet der Funktionsaufruf den Standardwert »Kikeriki«, da der Parameter laut keinen Wert hat. Abbildung 8.4: Der Interpreter greift auf den Standardwert zurück.

Standardwerte funktionieren erst ab der vierten Generation von Netscape Navigator und Internet Explorer. In älteren Versionen erscheint zwar keine Fehlermeldung, der logische Operator wird allerdings tatsächlich geprüft. Ist ein Parameter angegeben, der nicht gleich dem Standardwert ist, erscheint also beispielsweise true. Tabelle 8.2: Standardwerte

NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3































Parameter in Methoden Natürlich können auch Methoden eigene Parameter haben. Dies macht allerdings eigentlich nur Sinn, wenn die Methode dennoch Eigenschaften vom Objekt erbt. Ansonsten besteht (fast) kein Unterschied mehr zu einer normalen Funktion mit Parametern.

258

 KOMPENDIUM 

JavaScript

Eigene Objekte

Kapitel 8

Das folgende Beispiel macht durchaus Sinn. Dort wird ein Parameter an das Objekt übermittelt (siehe Listing 8.3), den zweiten Parameter erhält die Methode dagegen direkt beim Aufruf. In der Methode werden die beiden Zeichenketten dann zusammengesetzt: <script language="JavaScript">
Listing 8.4: Einen Parameter direkt an die Methode übermitteln (parameter_ methoden.html)

document.write(this.Laut + laut2);

} var Wuschl = new Vogel("Tschiep"); Wuschl.Laut_geben("Tschierilip");

//--> Abbildung 8.5: Die beiden Parameter sind zu einer Ausgabe zusammengesetzt.

Sinn und Unsinn von eigenen Objekten Die objektorientierte Programmierung wird hauptsächlich dafür gerühmt, dass sie komplexe Zusammenhänge auf leicht verständliche Objekte überträgt. Die einfach strukturierbaren Beziehungen der Objekte zueinander und die wieder verwendbaren Eigenschaften und Methoden erleichtern dem Programmierer das Leben.2

2

Diese Analyse ist bewusst einfach gehalten. Es geht hier nicht um eine akademische Diskussion, sondern um des Pudels Kern, also die Konsequenzen für den aufstrebenden JavaScript-Programmierer.

 KOMPENDIUM 

JavaScript

259

Kapitel 8

OOP In JavaScript sind die Skripten und Programme meist nicht so komplex. In der Praxis kommt es relativ selten vor, dass ein Skript 100 oder 200 Zeilen überschreitet. Bei solchen Aufgabenstellungen ist es auch für professionelle JavaScript-Programmierer meist ausreichend, mit normalen Funktionen zu arbeiten. Daher werden Sie auch bei großen Websites selten objektorientiertes JavaScript sehen. Das heißt aber nicht, dass es prinzipiell nicht sinnvoll wäre, eigene Objekte zu verwenden. Wichtig ist, sich die Frage zu stellen, ob eigene Objekte die spezielle Anwendung einfacher machen.

8.2

for-in für Objekte

Die for-in-Schleife eignet sich nicht nur für Arrays3, sondern auch hervorragend, um auf die Eigenschaften und Methoden von Objekten zuzugreifen. Die Syntax ist sehr einfach: for (var Variable in Objekt) { Anweisungen }

Die Variable nimmt bei jedem Schleifendurchlauf einen Eigenschafts- oder Funktionsnamen aus dem Objekt auf, bis alle Schleifen durchlaufen sind. Auf den Inhalt des Objekts greifen Sie mit Objekt[Variable]

oder mit eval("Objekt.Variable");

zu. Die for-in-Schleife ist in den Browsern ab Netscape 2 und Internet Explorer 3 in der ersten Version verfügbar. Tabelle 8.3: Die for-in-Schleife

3

260

NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3































siehe Kapitel 7.1 im Abschnitt »for-in- und andere Schleifen«

 KOMPENDIUM 

JavaScript

with

Kapitel 8

Das folgende Beispiel liest alle Eigenschaften und Methoden des Objekts Wuschl und gibt sie auf dem Bildschirm aus: <script language="JavaScript">
Listing 8.5: Mit for-in auf ein Objekt zugreifen (forin_objekte.html)

var objWuschl = new Wuschl(); for (var i in objWuschl) { document.write(i + ": " + objWuschl[i]); document.write("
"); }

//-->

Bei der Ausgabe ist besonders interessant, dass bei der Methode die gesamte Funktion ausgegeben wird (siehe Abbildung 8.6). Abbildung 8.6: Die for-in-Schleife gibt Eigenschaften und Methoden aus.

8.3

with

Die with-Anweisung ist eine vereinfachte Schreibweise, wenn Sie auf mehrere Eigenschaften und Methoden eines Objekts zugreifen müssen. Sie schreiben das Objekt einmal in die with-Anweisung und können die Eigenschaften und Methoden dann ohne Objektnamen aufrufen:

 KOMPENDIUM 

JavaScript

261

Kapitel 8

OOP with(Objekt) { Eigenschaft Methode } with ist in den Browsern ab Netscape 2 und Internet Explorer 3 in der ersten Version integriert.

Tabelle 8.4: Die with-Anweisung

NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3































Als Ausgangspunkt für ein Beispiel dient Listing 8.2. Aus diesem Listing kommt das Objekt. Die Objektinstanz und der Eigenschaften- bzw. Methodenaufruf mit with sehen wie folgt aus: Listing 8.6: Die with-Anweisung (with.html)

var objWuschl = new Wuschl(); with(objWuschl) { document.write(Laut + "
"); document.write(Vorkommen + "
"); Laut_geben(); }

Abbildung 8.7: Die Eigenschaften und Methoden werden ausgegeben.

In der Praxis ist die Verwendung von with dann sinnvoll, wenn Sie Eigenschaften und Methoden eines Objekts öfter hintereinander benötigen. Der Tippaufwand und damit eine mögliche Fehlerquelle verringern sich.

8.4

prototype-Vererbung

JavaScript hat – wie bereits erwähnt – keine Vererbung über Klassen. Aus anderen Programmiersprachen kennen Sie vielleicht das Schlüsselwort inherits (erbt von). Diese Art von Vererbung gibt es in JavaScript nicht.

262

 KOMPENDIUM 

JavaScript

prototype-Vererbung

Kapitel 8

An die Stelle der normalen Vererbung tritt die prototype-Vererbung. Das Schlüsselwort prototype hat nur wenig mit dem Prototyp zu tun, den Sie vielleicht mit einem neuen Auto oder Computer in der Entwicklung verbinden. prototype ist eine Eigenschaft, die für jedes Objekt zur Verfügung steht, unabhängig davon, ob selbst definiert oder in JavaScript enthalten. Jedes Objekt hat also eine eigene Eigenschaft prototype. Die prototype-Eigenschaft ist wiederum ein Objekt. Klingt das verwirrend? Mit einem Beispiel wird es klarer. Eine Klasse Vogel enthält Eigenschaften und Methoden. Die Eigenschaft prototype ist immer vorhanden. Diese Eigenschaft verweist (referenziert) auf das zugehörige prototype-Objekt Vogel.prototype. Dieses Objekt wiederum kann eigene Eigenschaften und Methoden besitzen (siehe Abbildung 8.8). Abbildung 8.8: prototypeVererbung

Die Eigenschaften und Methoden des Objekts Vogel.prototype erbt das Objekt Vogel. Wenn Sie also die Eigenschaft Laut für das prototype-Objekt von Vogel definieren, sieht dies folgendermaßen aus: Vogel.prototype.Laut = "Tschiep";

Die Eigenschaft des prototype-Objekts erbt nun das Vogel-Objekt. Vogel.Laut;

liefert also den Wert »Tschiep«, der ursprünglich im prototype-Objekt definiert wurde. Wichtig bei dieser Vererbung ist, dass der JavaScript-Interpreter immer wissen muss, woher er die jeweilige Eigenschaft (oder Methode) nimmt. Wird eine Eigenschaft des Objekts, wie z.B. Vogel.Laut aufgerufen, prüft der Interpreter zuerst, ob das Objekt die Eigenschaft besitzt. Ist dies – wie in diesem Beispiel – nicht der Fall, überprüft er, ob das prototype-Objekt eine solche Eigenschaft besitzt. Erst, wenn dies auch nicht der Fall ist, gibt er undefined zurück.

 KOMPENDIUM 

JavaScript

263

Kapitel 8

OOP prototype steht seit Netscape Navigator 3 und Internet Explorer 4 zur Verfü-

gung. Tabelle 8.5: prototype

NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3































Das folgende Beispiel zeigt Abbildung 8.8 in ausprogrammierter Form: Listing 8.7: Vererbung mit prototype

(prototype.html)

<script language="JavaScript">
} var Wuschl = new Vogel("Europa"); Vogel.prototype.Laut = "Tschiep";

document.write(Wuschl.Vorkommen + "
"); Wuschl.Laut_geben(); //-->

Die Eigenschaft Laut wird im prototype-Objekt erst nach der Definition des Objekts Vogel und sogar erst nach der Objektinstanziierung von Wuschl festgelegt. Dennoch steht sie bereits nach ihrer Deklaration auch für die Objektinstanz Wuschl zur Verfügung.4 Die prototype-Vererbung gilt nur für das Lesen von Eigenschaften. Setzen Sie eine Eigenschaft, wird die Eigenschaft für das Objekt selbst deklariert, nicht aber für das prototype-Objekt. Vogel.Laut = "Krächz";

ändert also nicht die Eigenschaft Laut des prototype-Objekts.

4

264

Unabhängig davon steht eine prototype-Eigenschaft oder -Methode für alle Objektinstanzen des Objekts zur Verfügung.

 KOMPENDIUM 

JavaScript

Das Objekt Object und die Vererbungskette

Kapitel 8 Abbildung 8.9: Die zweite Eigenschaft wurde nachträglich per prototype-Vererbung zugewiesen und mit einer Methode des ursprünglichen Objekts ausgegeben.

8.5

Das Objekt Object und die Vererbungskette

JavaScript hat ein eigenes Objekt namens Object. Es spielt eine Sonderrolle: Dieses Objekt ist eine Art Überobjekt für alle anderen Objekte in JavaScript. Das Object-Objekt gibt es seit Netscape Navigator 3 und Internet Explorer 4. NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3































Tabelle 8.6: Das Object-Objekt

Mit dem Object-Objekt können Sie verschiedene Aktionen durchführen: Sie können ein eigenes Objekt auch mit Object definieren (siehe Abschnitt »Objekte mit Object definieren«). Außerdem stehen die Eigenschaften und Methoden von Object in allen anderen Objekten zur Verfügung (siehe Abschnitt »Eigenschaften und Methoden von Object«). Die interessanteste Möglichkeit ergibt sich allerdings für die prototype-Vererbung. Weisen Sie eine Eigenschaft oder Methode dem prototype-Objekt des Object-Objekts zu, steht sie in allen Objekten von JavaScript zur Verfügung.5 Das folgende Beispiel zeigt dies. Hier wird dem prototype-Objekt des ObjectObjekts die Eigenschaft Laut zugewiesen. Diese Eigenschaft kann nun von der Methode Laut_geben des Objekts Wuschl (Instanz von Vogel) verwendet werden. Aber nicht nur die macht davon Gebrauch: Auch als Eigenschaft des JavaScript-eigenen Date-Objekts ist Laut verfügbar:

5

Dieser Vorgang bildet in JavaScript eine so genannte Vererbungskette.

 KOMPENDIUM 

JavaScript

265

Kapitel 8 Listing 8.8: prototype-Vererbung mit Object

(prototype_object. html)

OOP <script language="JavaScript">" + Date.Laut);

//-->

Besitzt ein Objekt eine Eigenschaft mit dem gesuchten Namen, hier also Laut, wird diese verwendet. Dann wird im prototype-Objekt nachgesehen. Erst zum Schluss greift der Interpreter auf die Eigenschaft im prototypeObjekt des Object-Objekts zurück. Abbildung 8.10: Die Eigenschaft Laut ist für alle Objekte definiert.

In Kapitel 8.6 »Vorhandene Objekte erweitern« sehen Sie, wie JavaScripteigene Objekte mit prototype um neue Eigenschaften und Methoden erweitert werden.

Objekte mit Object definieren Wenn Sie ein neues Object-Objekt instanziieren, entsteht damit ein eigenes Objekt: var Objektname = new Object();

266

 KOMPENDIUM 

JavaScript

Das Objekt Object und die Vererbungskette

Kapitel 8

Diese Objektdefinition ist also eine Alternative zur Definition mit function. Da die Definition über function auch bereits in älteren Browsern wie Netscape Navigator 2 oder Internet Explorer 3 in beiden Versionen zur Verfügung steht, wird diese Variante in der Praxis häufig bevorzugt. Allerdings können diese beiden Browser mittlerweile ignoriert werden. Das folgende Skript zeigt eine Objektdeklaration mit Object: <script language="JavaScript"> Abbildung 8.11: Die Methode für das mit Object definierte Objekt liefert die richtige Ausgabe.

Eigenschaften und Methoden von Object Das Object-Objekt besitzt einige Eigenschaften und Methoden, die Sie in den nächsten Abschnitten beschrieben finden. Wie bereits erwähnt, stehen sie für alle Objekte in JavaScript zur Verfügung. Die Eigenschaften und Methoden des Object-Objekts sind neueren Datums (siehe Tabelle 8.7), fehlen also in älteren Browsern. NS4.x NS6


 KOMPENDIUM 

NS7


JavaScript

IE4 IE5

IE5.5 IE6

O7

M1













K3

Tabelle 8.7: Eigenschaften und Methoden von Object

267

Kapitel 8

OOP hasOwnProperty() Die Methode hasOwnProperty("Eigenschaft") überprüft, ob eine Objektinstanz eine Eigenschaft besitzt. Wenn dies der Fall ist, liefert sie true, sonst false. Der Name der Eigenschaft wird als Parameter übergeben. Beachten Sie, dass er ein String sein muss, also in Anführungszeichen steht. Das folgende Beispiel testet, ob die Eigenschaft Vorkommen in der Objektinstanz Wuschl vorhanden ist.

Listing 8.10: hasOwnProperty() im Einsatz

(hasOwnProperty.html)

<script language="JavaScript">

Die Methode hasOwnProperty() liefert im Beispiel true, da eine Eigenschaft mit dem Namen vorhanden ist (siehe Abbildung 8.12). Abbildung 8.12: Die Eigenschaft ist vorhanden.

Eine per prototype zugewiesene Eigenschaft wird in die Überprüfung nicht mit einbezogen: document.write(Wuschl.hasOwnProperty("Laut"));

liefert also false.

268

 KOMPENDIUM 

JavaScript

Das Objekt Object und die Vererbungskette

Kapitel 8

propertyIsEnumerable() propertyIsEnumerable("Eigenschaft") ist eigentlich eine Eigenschaft, die aber ähnlich wie die Methode hasOwnProperty("Eigenschaft") arbeitet.6 Sie geben eine Eigenschaft als Parameter an und propertyIsEnumerable() liefert zurück, ob das Objekt die Eigenschaft besitzt (true) oder nicht (false).

In Listing 8.10 ändert sich nur die Ausgabezeile mit dem Zugriff auf die Eigenschaft propertyIsEnumerable() statt hasOwnProperty(): document.write(Wuschl.propertyIsEnumerable("Vorkommen"));

Die Ausgabe ist dieselbe, wie in Abbildung 8.12 zu sehen.

Listing 8.11: propertyIsEnumerable() (property

IsEnumerable.html)

In den aktuellen Browserversionen gibt es keinen Unterschied zwischen propertyIsEnumerable() und hasOwnProperty(). propertyIsEnumerable() ist allerdings eigentlich dafür vorgesehen, in einer for-in-Schleife durchlaufen werden zu können. isPrototypeOf() Die Methode isPrototypeOf(Objekt) liefert als Ergebnis, ob ein Objekt in einer prototype-Verknüpfung mit dem aktuellen Objekt steht: Objekt.isPrototypeOf(Objekt);

Diese Methode wird in der Praxis recht selten benötigt. Nachfolgend finden Sie dennoch ein einfaches Beispiel: <script language="JavaScript">
Listing 8.12: isPrototypeOf()

(isPrototypeOf.html)

var Wuschl = new Vogel("Europa"); Vogel.prototype.Laut = "Tschiep"; document.write(Vogel.prototype.isPrototypeOf(Wuschl)); //--> 6

Microsoft nennt propertyIsEnumerable() eine Eigenschaft (beispielsweise http://msdn. microsoft.com/library/default.asp?url=/library/en-us/jscript7/html/jsproPropertyIs Enumerable.asp). Der Autor des Buches würde sie eher als Methode bezeichnen. Dies ist

allerdings eine in der Praxis nicht relevante Diskussion.

 KOMPENDIUM 

JavaScript

269

Kapitel 8

OOP

Das Skript prüft, ob das Objekt Vogel.prototype eine prototype-Verknüpfung mit der Objektinstanz Wuschl besitzt. Das Ergebnis ist true (siehe Abbildung 8.13). Dies entspricht natürlich auch den Erwartungen, da Wuschl eine Objektinstanz von Vogel ist und Vogel.prototype daher auch als prototypeObjekt für Wuschl verfügbar ist. Abbildung 8.13: true besagt, dass Wuschl eine prototype-Verbin-

dung mit dem Objekt Vogel.prototype besitzt.

toString(), toLocaleString() und valueOf() Die Funktionen toString(), toLocaleString() und valueOf() stehen über das Object-Objekt jedem Objekt zur Verfügung: toString()– wandelt das Objekt in eine Zeichenkette um. toLocaleString()– wandelt ebenfalls in eine Zeichenkette um, berück-

sichtigt aber lokale Einstellungen, die beispielsweise in der Sprachversion liegen können. Dies hat nur bei manchen Objekten wie Date (siehe Kapitel 6 »Objekte«) Auswirkungen. valueOf()– liefert den Wert eines Objekts. Bei einem Number-Objekt ist das eine Zahl, bei einem String-Objekt beispielsweise ein String.

Im folgenden Beispiel werden die drei Methoden auf ein eigenes Objekt angewendet: Listing 8.13: Objekt in String umwandeln (toString_toLocale String_valueOf.html)

270

function Vogel(vork) { this.Vorkommen = vork; } var Wuschl = new Vogel("Europa"); document.write(Wuschl.toString() + "
"); document.write(Wuschl.toLocaleString() + "
"); document.write(Wuschl.valueOf());

 KOMPENDIUM 

JavaScript

Vorhandene Objekte erweitern

Kapitel 8 Abbildung 8.14: Dreimal dieselbe Ausgabe

Die drei hier vorgestellten Methoden machen meist nur bei speziellen Objekten wie beispielsweise Date Sinn. Bei eigenen Objekten wird nur der Datentyp ausgegeben (siehe Abbildung 8.14).

8.6

Vorhandene Objekte erweitern

prototype bietet noch mehr Möglichkeiten, als nur die Vererbung in eigenen Objekten. Auch bestehende JavaScript-Objekte können so erweitert werden. Ein mögliches Anwendungsgebiet ist, Methoden für ältere Browserversionen selbst zu schreiben, die nur in neueren Browsern vorhanden sind. Dieser Abschnitt zeigt Ihnen, wie Sie ein bestehendes Objekt um eine eigene Funktionalität erweitern.

Als Beispiel dient das Date-Objekt. Es soll eine Methode erhalten, die das Datum in ein in Deutschland übliches Format umwandelt. Das Beispiel besteht aus zwei Teilen: Einer externen JavaScript-Datei mit der Endung .js. Sie enthält den Quellcode der Methode und definiert die Methode für das Date-Objekt. Einer HTML-Datei, die die externe JavaScript-Datei lädt und in einem weiteren Skript-Block die neue Methode von Date verwendet. Die externe Datei enthält zuerst eine Definition der neuen Methode: Date.prototype.deformat = de_format;

Die neue Methode heißt also deformat und wird als Methode des prototypeObjekts definiert. Sie könnten die Methode natürlich sofort bei der Zuweisung mit function beginnen lassen. Hier ist es allerdings günstiger, den Code über den Funktionsnamen (de_format) aufzurufen, da das Listing sonst unübersichtlich wird.

 KOMPENDIUM 

JavaScript

271

Kapitel 8

OOP Die Methode selbst ist eine Abwandlung der Datei datum_formatieren_ y2k.html aus Kapitel 6 »Objekte«. Sie finden Sie auf der CD-ROM im Ordner code\kap06. In der Funktion wurde hauptsächlich das aktuelle Datum durch das Schlüsselwort this ersetzt, denn die Methode soll ja immer auf das gerade aktuelle Datumsobjekt angewendet werden können. Darüber hinaus musste die Ausgabe mit document.write() der Rückgabe einer Ergebnisvariablen (return erg;) weichen. Hier der vollständige Code:

Listing 8.14: Die externe JavaScript-Datei (erweitern.js)

Date.prototype.deformat = de_format; function de_format() { function getJahr2000(datum) { var jahr = datum.getYear(); if (jahr < 200) { return jahr + 1900; } else { return jahr; } } var monat = new Array(12); monat[0] = "Januar"; monat[1] = "Februar"; monat[2] = "März"; monat[3] = "April"; monat[4] = "Mai"; monat[5] = "Juni"; monat[6] = "Juli"; monat[7] = "August"; monat[8] = "September"; monat[9] = "Oktober"; monat[10] = "November"; monat[11] = "Dezember"; var erg = this.getDate() + ". "; erg += monat[this.getMonth()] + " "; erg += getJahr2000(this); return erg; }

Nun zur HTML-Seite. Um die Methode dort anzuwenden, müssen Sie nur eines tun: Binden Sie die externe JavaScript-Datei in ein <script>-Tag ein. Auf die Methode wird ganz gewöhnlich mit dem Methodennamen zugegriffen. Das Objekt im Beispiel wurde vorher instanziiert.

272

 KOMPENDIUM 

JavaScript

Vorhandene Objekte erweitern

Kapitel 8

Nachfolgend sehen Sie den Code: <script src="erweitern.js" language="JavaScript">

<script language="JavaScript">

Listing 8.15: In der HTML-Seite wird die neue Methode des DateObjekts verwendet (erweitern.html).

In unserem Beispiel verwenden wir das Tagesdatum (siehe Abbildung 8.15). Sie können aber natürlich auch ein beliebiges Datum von der neuen Methode sauber formatieren lassen. Abbildung 8.15: Das Datum, sauber formatiert

Dieses Beispiel gibt einen kleinen Ausblick auf die Möglichkeiten, Objekte zu erweitern. Die Vorteile liegen auf der Hand: –

Sie müssen nur eine externe JavaScript-Datei einbinden. Dann können Sie alle darin definierten Eigenschaften und Methoden nutzen.

–

Die externe Datei lässt sich natürlich in beliebig vielen Seiten wieder verwenden. So schaffen Sie sich eine eigene kleine Eigenschaften- und Methoden-Bibliothek.

–

Methoden, die nur auf neueren Browsern laufen, können – selbst programmiert – auch auf älteren Browsern zur Mitarbeit bewegt werden.

Math erweitern Das Math-Objekt verhält sich beim Erweitern ein wenig anders. Hier verwenden Sie nicht das prototype-Objekt, sondern weisen die neue Methode direkt zu. Der Grund dafür: Math ist ein global verfügbares Objekt, das keine Objektinstanzen besitzt.

 KOMPENDIUM 

JavaScript

273

Kapitel 8

OOP Ein Beispiel erklärt dies. Ziel ist es, eine Methode zu definieren, die die Fakultät7 einer als Parameter übergebenen Zahl zurückliefert. Die Methode selbst befindet sich wieder in einer externen Datei. Dieses Mal wird sie dem Math-Objekt allerdings ohne prototype zugewiesen: Math.fak = fakultaet;

Hier sehen Sie den kompletten Code einschließlich der Funktion zur Berechnung der Fakultät: Listing 8.16:

Math.fak = fakultaet;

Math um eine

Methode zur Fakultätsberechnung erweitern (erweitern_math.js)

function fakultaet(x) { x = Math.round(x); var wert = 1; if(x > 0) { for (var i = x; i > 0; i--) { wert *= i; } } else { wert = "Zahl größer 0 angeben"; } return wert; }

Der Aufruf erfolgt, wie bereits im letzten Beispiel besprochen. Die externe JavaScript-Datei wird eingebunden, die Methode einfach verwendet. Das folgende Skript gibt also die Fakultät von 3 aus: Listing 8.17: Eine neue Methode des Math-Objekts verwenden (erweitern_mathe. html)

<script src="erweitern_math.js" language="JavaScript"> <script language="JavaScript">

7

274

Die Fakultät einer Zahl ist das Produkt aller ganzen Zahlen, die kleiner oder gleich der Zahl und größer 0 sind (n * [n-1] * [n-2] … * 1). Die Fakultät von 3 ist also 3*2*1 = 6. Geschrieben wird die Fakultät auch häufig mit nachgestelltem Ausrufezeichen, also n! bzw. 3!

 KOMPENDIUM 

JavaScript

Funktionen und Objekte

Kapitel 8 Abbildung 8.16: Die Fakultät von 3 ist 6.

8.7

Funktionen und Objekte

Eine Funktion kann in JavaScript selbst als Objekt definiert werden. Für das dazugehörige Objekt function gibt es auch eigene Eigenschaften und Methoden. Was sich nach keiner besonders tollen Nachricht anhört, bietet doch einige Möglichkeiten, wie Sie in den folgenden Abschnitten sehen werden. Der letzte Abschnitt dieses Kapitels beschäftigt sich mit Objekten, die als Parameter an Funktionen übergeben werden.

Funktionen als Objekt Um Funktionen als Objekte zu deklarieren, bietet JavaScript eigens das Function-Objekt. Eine neue Funktion wird als Variable zugewiesen und mit dem Konstruktor new initialisiert: var Name = new Function(Par1, Par2, ..., Anweisungen);

In runden Klammern folgen zuerst die Parameter der Funktion. Sie müssen als Strings übergeben werden, also in Anführungszeichen stehen. JavaScript erlaubt bis zu 255 Operanden für ein Function-Objekt. Nach den Parametern folgen die Funktionsanweisungen. Sie stehen ebenfalls in Anführungszeichen. Die Parameter sind optional, dürfen also alle fehlen. Die Anweisungen müssen dagegen vorhanden sein. Auch eine Funktion, die auf herkömmliche Art und Weise (siehe Kapitel 5 »Funktionen«) deklariert wurde, wird von JavaScript als eigenes FunctionObjekt angesehen. Sie können darauf also die Eigenschaften und Methoden anwenden (siehe die folgenden zwei Abschnitte).

 KOMPENDIUM 

JavaScript

275

Kapitel 8

OOP Das folgende Beispiel erzeugt ein Function-Objekt, das das Produkt zweier Zahlen zurückgibt:

Listing 8.18: Eine Funktion als Objekt (function_object. html)

<script language="JavaScript">
document.write(prod(3, 4)); //--> Abbildung 8.17: Das Produkt von 3 und 4

Das Function-Objekt ist in allen Browsern ab Netscape 3 und Internet Explorer 3 in der zweiten Version integriert. In den vorhergehenden Versionen gibt es das Objekt bereits theoretisch, allerdings ist die Implementation sehr unsauber. Tabelle 8.8: Function

NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3































Eigenschaften von Function Das Function-Objekt bietet natürlich noch einige nützliche Eigenschaften. In der folgenden Tabelle finden Sie eine Zusammenfassung und anschließend einige Beispiele: Tabelle 8.9: Eigenschaften des Function-Objekts

276

Eigenschaft

Beschreibung

arguments

Ein Array mit allen Parametern des Function-Objekts.

arguments.callee

Enthält die Anweisungen der aktuell aufgerufenen Funktion.

 KOMPENDIUM 

JavaScript

Funktionen und Objekte

Kapitel 8

Eigenschaft

Beschreibung

arguments.caller

Enthält den Namen der Funktion, die die aktuelle Funktion ausführt. Da nicht Teil des ECMAScript 262-Standards, wurde die Eigenschaft aus Netscape Navigator ab Version 6 verbannt.

arguments.length

Liefert die Zahl der übergebenen Parameter.

arity

Enthält die Zahl der von der Funktion erwarteten Parameter. Ist auf Netscape 4.x, 6 und 7 sowie Mozilla beschränkt. Daher sollte length verwendet werden.

length

Enthält die Zahl der von der Funktion erwarteten Parameter. Ist noch nicht in Netscape 3 enthalten; ersetzt heutzutage arity.

Tabelle 8.9: Eigenschaften des Function-Objekts (Forts.)

Die folgende Tabelle enthält die Browserkompatibilität der verschiedenen Eigenschaften des Function-Objekts. NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3

arguments































arguments. callee































arguments. caller

























arguments. length































arity










length










Tabelle 8.10: Eigenschaften des Function-Objekts























Das folgende Beispiel zeigt die Eigenschaften arguments und arguments.length im Einsatz: <script language="JavaScript">
Listing 8.19: Mit Eigenschaften von Function arbeiten (arguments.html)

for(var i=0; i<prod.arguments.length; i++) { erg += i + ": " + prod.arguments[i] + "
"; }

erg += "= " + x * y;

 KOMPENDIUM 

JavaScript

277

Kapitel 8

OOP return erg; } document.write(prod(3,4)); //-->

Abbildung 8.18: Der Browser gibt die einzelnen Argumente und das Ergebnis aus.

Auf der CD-ROM finden Sie zu jeder der nicht im Beispiel verwendeten Eigenschaften ein eigenes Beispiel im Ordner code\kap08. Die Datei trägt den Namen der Eigenschaft.

Methoden von Function Bei den Methoden des Function-Objekts sind vor allem zwei, apply() und call(), beachtenswert. Zu beiden Methoden finden Sie im Anschluss an die Übersichtstabelle ein Beispiel. Tabelle 8.11: Eigenschaften des Function-Objekts

278

Methode

Beschreibung

apply(Objekt, Parameter)

Erlaubt Ihnen, eine Funktion oder Methode innerhalb eines anderen Objekts (angegeben als Parameter Objekt) anzuwenden, ohne das eine direkte Verbindung besteht. Optional können Parameter in einem Array (wie ihn beispielsweise die Eigenschaft arguments liefert) für die Methode übergeben werden.

call(Objekt, Par1, Par2, ...)

Ruft innerhalb eines Objekts die Methode eines anderen Objekts auf. Der Name des anderen Objekts wird als Parameter übergeben. Optional können noch weitere Parameter an die Methode übergeben werden. Diese sind – und das ist der Unterschied zu apply – einzeln angegeben.

toSource()

Liefert die Anweisungen innerhalb einer Funktion als Quellcode.

 KOMPENDIUM 

JavaScript

Funktionen und Objekte

Kapitel 8

Methode

Beschreibung

toString()

Wandelt die Anweisungen einer Funktion in einen String um.

valueOf()

Liefert einen String mit den Anweisungen der Funktion. In der Praxis bestehen kaum Unterschiede zu toString().

Tabelle 8.11: Eigenschaften des Function-Objekts (Forts.)

In der folgenden Tabelle finden Sie die Browserkompatibilität der Methoden des Function-Objekts. NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3

apply()






















call()






















toSource()










toString()































valueOf()































Tabelle 8.12: Methoden des Function-Objekts




Der Einsatz von apply() und call() lässt sich am einfachsten mit einem Beispiel erklären: Im folgenden Code befindet sich ein Objekt Vogel und eine Funktion Laut_geben(). Die Funktion ist allerdings keine Methode von Vogel, da sie im Objekt nicht definiert wird. function Vogel(laut) { this.Laut = laut; } function Laut_geben() { document.write(this.Laut); }

Als zweiter Schritt entsteht eine Objektinstanz von Vogel. var objVogel = new Vogel("Kroarg");

Nun kommt apply() ins Spiel. Mit dem folgenden Aufruf wird die Funktion Laut_geben als Methode für das instanziierte Objekt objVogel angewendet. Laut_geben.apply(objVogel);

 KOMPENDIUM 

JavaScript

279

Kapitel 8

OOP call() hat hier die vollkommen gleiche Wirkung, da keine Parameter außer dem Objekt mit übergeben werden. Laut_geben.call(objVogel);

apply(Objekt, Parameter) übergibt optional ein Array mit Parametern an die aufgerufene Funktion. call(Objekt, Par1, Par2, ...) überträgt dagegen alle

Parameter nicht in ein Array, sondern einzeln. Hier der komplette Code für das Beispiel: Listing 8.20: apply() und call()

(apply_call.html)

<script language="JavaScript">
//--> Abbildung 8.19: apply() und call() ersetzen hier die Methodeneinbindung in das Objekt.

Auf der CD-ROM im Ordner code\kap08 finden Sie drei einfache Skripten für die anderen drei Methoden des Function-Objekts. Der Dateiname entspricht jeweils dem Funktionsnamen.

280

 KOMPENDIUM 

JavaScript

Funktionen und Objekte

Kapitel 8

Objekte an Funktionen übergeben Objekte übergibt JavaScript als Referenz an eine Funktion. Das heißt, die Funktion erhält nicht das komplette Objekt, sondern nur einen Verweis darauf. Die Funktion selbst wird also als Original verändert, wenn mit der Referenz gearbeitet wird. Dies hat im Allgemeinen allerdings keine praktischen Auswirkungen. Andere, einfachere Elemente wie Text, Zahlen und Wahrheitswerte werden nur als Wert übergeben. Das Original bleibt unverändert.

 KOMPENDIUM 

JavaScript

281

9

Debugging

Wer behauptet, keine Fehler zu machen, ist entweder der Bösewicht im neuen James Bond oder lügt. Dementsprechend unterlaufen auch dem JavaScript-Programmierer gelegentlich schlimmere und weniger schlimme Fehler. Dieses Kapitel hilft, nach den Fehlern zu suchen und sie zu beseitigen. Der englische Begriff für einen Software-(also Programmier-)Fehler ist Bug. Daher heißt der Prozess Debugging. Zum Debugging gibt es eine gute und eine schlechte Nachricht. Die gute: JavaScript-Code ist meist kürzer und relativ übersichtlich. Die schlechte: Die Fehlermeldungen der Browser helfen häufig nicht weiter und wenn Fehler nur in bestimmten Browsern (siehe Anhang A »Browser«) auftreten, sind sie ausgesprochen schwer zu finden. Sollten Sie beim Abtippen von Listings in diesem Buch einen Fehler erhalten, den Sie nicht nachvollziehen können, verwenden Sie einfach die Version auf der CD-ROM. Die Listings dort sind mehrmals getestet. Sollte sich hier tatsächlich noch ein Fehler eingeschlichen haben, werfen Sie einen Blick auf die Liste mit Errata unter http://www.hauser-wenz.de/support. Falls der Fehler dort noch nicht zu finden ist, schicken Sie bitte eine Mail.

9.1

Debugging mit Browsern

Bevor Sie sich die Debugging-Möglichkeiten der einzelnen Browser ansehen, zeigen wir Ihnen im Folgenden ein Beispielskript mit einem einfachen Fehler: <script language="JavaScript">

 KOMPENDIUM 

JavaScript

Listing 9.1: Skript mit einem einfachen Fehler (fehler.html)

283

Kapitel 9

Debugging

Haben Sie den Fehler erkannt? Das neue Objekt wird nicht mit Object instanziiert, sondern mit Objct. Ein einfacher Tippfehler also, den alle Browser korrekt erkennen sollten.

Internet Explorer Der Internet Explorer liefert eine Fehlermeldung, bei der Sie zusätzliche DETAILS EINBLENDEN können (siehe Abbildung 9.1). Ohne diese Details machen die allgemeinen Angaben (Probleme mit dieser Webseite …) natürlich auch keinen Sinn. Abbildung 9.1: Das Objekt wurde bisher noch nicht definiert.

Die Fehlermeldung ist für unser Beispiel sehr hilfreich. Sie enthält Zeile und Zeichen sowie eine ungefähre Beschreibung des Fehlers. An seine Grenzen stoßen die Fehlermeldungen des Internet Explorers, wenn beispielsweise eine Funktion oder ein Objekt einen Fehler enthält. Hier wird häufig nur der Funktions- oder Objektaufruf als Fehlerquelle angegeben. Sollten Sie die Fehlermeldung im Internet Explorer nicht sehen, können Sie sie über EXTRAS/INTERNETOPTIONEN auf der Registerkarte ERWEITERT mit dem Kontrollkästchen SKRIPTFEHLER ANZEIGEN einblenden. Aber auch wenn das Kontrollkästchen deaktiviert ist, haben Sie Zugriff auf die Fehlermeldung. Dazu muss die Statusleiste eingeblendet sein (ANSICHT/STATUSLEISTE). Das schwarze Ausrufezeichen auf dem gelben Warndreieck zeigt einen Fehler an. Klicken Sie es doppelt an, um die Fehlermeldung einzublenden (siehe Abbildung 9.2).

284

 KOMPENDIUM 

JavaScript

Debugging mit Browsern

Kapitel 9

Beim Surfen ist es übrigens sehr angenehm, nicht alle Skriptfehler auf den einzelnen Seiten zu sehen!

Abbildung 9.2: Ein Doppelklick auf das Fehlersymbol öffnet die Fehlermeldung.

Debugger Microsoft bietet einen eigenen Debugger als Erweiterung für den Internet Explorer, aber auch für serverseitige Skripte als Erweiterung zum IIS (Internet Information Service1) – Microsofts eigenem Webserver. Der Windows Scripting Debugger ist für Windows 98, ME, 2000 und XP erhältlich2 und debuggt natürlich nur JScript-Code, also die Microsoft-Variante von JavaScript. Ist der Scripting Debugger installiert, schaltet er sich bei dem Dokument mit dem Beispielfehler sofort ein (siehe Abbildung 9.3). Abbildung 9.3: Soll der Scripting Debugger gestartet werden?

Wird der Debugger gestartet, zeigt er den Quellcode und darin hervorgehoben die Zeile mit dem Fehler an (siehe Abbildung 9.4). Sie können das Skript nun kontrolliert im Debugger ablaufen lassen.

1 2

früher: Internet Information Server Download unter: http://msdn.microsoft.com/downloads/default.asp?url=/downloads/ topic.asp?url=/msdn-files/028/001/175/topic.xml.

 KOMPENDIUM 

JavaScript

285

Kapitel 9

Debugging Im Menü EXTRAS/INTERNETOPTIONEN auf der Registerkarte ERWEITERT gibt es eine Option SKRIPTDEBUGGING DEAKTIVIEREN. Mit ihr schalten Sie die Scripting Debugger-Nachfragen aus, auch wenn Sie den Debugger installiert haben. Wenn Sie das Skriptdebugging wieder aktivieren, muss im Internet Explorer 6 zuerst der Browser neu gestartet werden (beim Deaktivieren ist das nicht nötig).

Abbildung 9.4: Der Debugger zeigt den Quellcode mit der Problemstelle.

Ob Sie den Scripting Debugger in der Praxis einsetzen, ist zuallererst eine Geschmacksfrage. Der schnelle Blick in den Code ist praktisch. Allerdings sind die Dokumente im Debugger schreibgeschützt, wenn sie aus dem Browser geöffnet werden (was aus praktischen Gründen meist der Fall ist). Ein weiterer Nachteil des Debuggers: Er erweist sich als nicht allzu stabil und hat im Praxiseinsatz auch bereits öfter den Browser mit ins Taskmanager-Jenseits befördert.

Netscape Navigator Der Netscape Navigator hatte in den älteren Versionen ebenfalls ein Warnfenster für die Fehlermeldung. Sie sehen in Abbildung 9.5 das entsprechende Fenster zu Netscape 3. Daraus ist allerdings nicht wirklich klar zu erkennen, womit der Browser gerade Probleme hat.

286

 KOMPENDIUM 

JavaScript

Debugging mit Browsern

Kapitel 9 Abbildung 9.5: Fehlermeldung im Netscape Navigator 3

Ab Netscape Navigator 4.06 wurde das besser. Netscape verbannte die Fehlermeldungen in die JavaScript-Konsole, also einen eigenen Bereich. Sie rufen die Konsole auf, indem Sie JAVASCRIPT: in die Adressleiste des Browsers eingeben. Der Netscape Navigator 4 bis einschließlich 4.05 besitzt zwar bereits die Möglichkeit, eine JavaScript-Konsole aufzurufen. Sie dient allerdings nur zur Eingabe von JavaScript-Code. Fehler werden in diesen Versionen nach wie vor per Warnfenster angezeigt. Abbildung 9.6: Netscape Navigator 4.04 liefert noch eine gewöhnliche Warnmeldung.

Die Konsole hat sich in den folgenden Versionen des Navigators weiterentwickelt. Sie können nur noch bestimmte Meldungen anzeigen lassen und beispielsweise die Sortierreihenfolge ändern. Die Fehlermeldungen sind erfahrungsgemäß recht gut, meist sogar denen des Internet Explorers überlegen. In der Praxis hat sich bei hartnäckigen Fehlern allerdings bewährt, die Fehlermeldungen beider Browser auszuwerten. Eine weitere Besonderheit der JavaScript-Konsole ist, dass sie als eigenständiges Fenster geöffnet bleiben kann, während Sie im Browser weiterarbeiten. Was allerdings im Navigator fehlt, ist eine Anzeige, dass ein Fehler

 KOMPENDIUM 

JavaScript

287

Kapitel 9

Debugging aufgetreten ist. Daher empfiehlt es sich für Entwickler, die JavaScript-Konsole während der Arbeit immer geöffnet zu halten.

Abbildung 9.7: JavaScript-Konsole in Netscape 7

Wenn Sie JAVASCRIPT: nicht eintippen möchten, können Sie auch in Netscape 6 den Menübefehl AUFGABEN/EXTRAS/JAVASCRIPT-KONSOLE und in Netscape 7 EXTRAS/WEB-ENTWICKLUNG/JAVASCRIPT-KONSOLE verwenden.

Mozilla Der Mozilla besitzt die gleiche JavaScript-Konsole wie Netscape 7, was bei der Verwandtschaft der beiden Browser nicht überrascht. Zusätzlich gibt es im Mozilla allerdings noch einen JavaScript-Debugger, der auch in den offiziellen Releases integriert ist. Sie finden ihn im Menü TOOLS/WEB DEVELOPMENT/JAVASCRIPT DEBUGGER (englische Version). Sein Codename heißt Venkman (http://www.mozilla.org/projects/venkman). Venkman ist auf der Projekt-Homepage auch für Netscape 6 und 7 erhältlich. Er ging ursprünglich aus dem JavaScript Debugger 1.1 von Netscape für den Navigator 4.x hervor. Dieser ist ebenfalls immer noch erhältlich (http://developer.netscape.com/software/jsdebug-4x.html). Sie müssen den Debugger zuerst starten, bevor Sie das zu überprüfende Skript im Browser laden. Beachten Sie, dass das direkte Laden der Seite im Debugger nicht denselben Effekt hat! Die verschiedenen Ausgaben des Debuggers lassen sich im VIEW-Menü steuern. Am interessantesten ist das Fenster INTERACTIVE SESSION (Menü VIEW/SHOW/HIDE). Hier sehen Sie die Fehlermeldungen zu den geöffneten Skripten untereinander. In der Kommandozeile können Sie beispielsweise mit /break die Ergebnisse an den Breakpoints3 eines Skripts anzeigen. Mit /break, der anschließenden Angabe eines Dateinamens und einer Zeilennummer legen Sie selbst einen Breakpoint fest.

3

288

Dies sind Punkte, an denen ein Skript angehalten wird, um das bisher erzielte Ergebnis zu betrachten.

 KOMPENDIUM 

JavaScript

Debugging mit Browsern

Kapitel 9 Abbildung 9.8: Der JavaScript Debugger von Mozilla zeigt die richtige Fehlermeldung an.

Zum Testen finden Sie auf der CD-ROM ein leicht abgewandeltes – mit Fehler versehenes – Beispiel aus dem vorangegangenen Kapitel. Die Dateien heißen erweitern_math.html und erweitern_math.js, befinden sich im Ordner code\kap09 (nicht in kap08) und sollen eigentlich das Math-Objekt erweitern. Im Debugger können Sie mit folgender Zeile einen Breakpoint für das Skript definieren: /break erweitern_math.js 4

Die JavaScript-Datei erhält also einen Breakpoint auf Zeile 4. Hier wird das Skript angehalten. Werten Sie nun mit der Eingabe /break

in die Kommandozeile das Skript aus, erhalten Sie beispielsweise die lokalen Variablen an dieser Stelle (siehe Abbildung 9.9) und können so die Werte und das Vorgehen in Ihrem Skript überprüfen.

 KOMPENDIUM 

JavaScript

289

Kapitel 9

Debugging

Abbildung 9.9: Ein Breakpoint auf Linie 4 zeigt beispielsweise die aktuellen Werte der lokalen Variablen.

Es ist lohnend, sich mit dem JavaScript-Debugger von Mozilla zu beschäftigen. Er ist zwar nicht sehr eingängig zu bedienen, bietet allerdings sehr viele Möglichkeiten. Die Projekt-Homepage (http:www.mozilla.org/projects/ venkman) ist eine gute Anlaufstelle, um mehr Informationen zu erhalten.

Opera Opera 7 hat wie Netscape eine JavaScript-Konsole. Sie finden Sie in der englischen Sprachversion im Menü WINDOW/SPECIAL/JAVASCRIPT CONSOLE.4 Frühere Opera-Versionen besitzen keine JavaScript-Konsole. In den Einstellungen können Sie allerdings für JavaScript Fehlermeldungen aktivieren (in Opera 6 über das Menü DATEI/EINSTELLUNGEN/MULTIMEDIA/JAVASCRIPTFEHLERMELDUNGEN ANZEIGEN). Die JavaScript-Konsole von Opera 7 liefert gute Fehlermeldungen, bietet ansonsten allerdings nicht viele Möglichkeiten. Sie ist insbesondere bei DHTML-Programmierung interessant, wenn Sie wissen möchten, warum ein Skript überall läuft, nur nicht in Opera.

4

290

Die deutsche Version lautet vermutlich: FENSTER/SPEZIALFENSTER/JAVASCRIPT KONSOLE (analog zur Java-Konsole).

 KOMPENDIUM 

JavaScript

Editoren

Kapitel 9 Abbildung 9.10: Die JavaScript-Konsole von Opera 7

Der Konqueror besitzt keine besonderen Möglichkeiten zur Fehlerkorrektur und wird daher hier nicht gesondert behandelt.

9.2

Editoren

Wenn Sie auf einen Editor zum Programmieren von JavaScript setzen, ist auch dies eine Art Fehlervermeidung. Gutes Syntax-Highlighting – beispielsweise die farbliche Hervorhebung zusammengehöriger Code-Bestandteile – hilft, Fehler bereits beim Coden zu vermeiden. Manche Editoren enthalten außerdem eigene Debugger. Ein Beispiel ist Macromedia Dreamweaver MX (siehe Abbildung 9.11). Abbildung 9.11: Dreamweaver MX debuggt den Code; allerdings ist die Fehlermeldung bei diesem Beispiel nicht sehr aussagekräftig.

 KOMPENDIUM 

JavaScript

291

Kapitel 9

Debugging Eine Übersicht über verschiedene Editoren finden Sie in Anhang B »Tools«.

9.3

Fehler und Lösungen

Die Fehler, die ein JavaScript-Programmierer während seiner Arbeit macht, kann man grob in vier Kategorien einteilen: Tippfehler5 – Diese Fehler passieren immer wieder. Schnell gibt es einen Buchstabendreher oder eine Methode ist falsch geschrieben. Hier hilft entweder die Fehlermeldung oder ganz genaues Durchgehen des Codes. Schlimme Tippfehler6 – Wenn ein Tippfehler nicht sofort offensichtlich wird, handelt es sich um einen »schlimmen« Tippfehler. Ein Beispiel: JavaScript verlangt – dank strikter Trennung zwischen Groß- und Kleinschreibung –, dass die Methode getElementById() mit einem kleinem »d« am Ende geschrieben wird. getElementByID() funktioniert also nicht. Solche Fehler sind meist schwer herauszufinden. Sie sollten allerdings, wenn Sie Meldungen erhalten wie »Methode nicht vorhanden« auf jeden Fall erst die Schreibweisen überprüfen! Zu den »schlimmen« Tippfehlern zählt auch falsche Klammersetzung beispielsweise bei verschachtelten if-Anweisungen oder Funktionen. Hier hilft ein Editor, der auch die Klammersetzung berücksichtigt. Ebenfalls schlimme Auswirkungen hat, wenn Sie eine Variable falsch schreiben. JavaScript deklariert die Variable dann einfach neu: var test = 3; tast = 2;

Im diesem Code hat test immer noch den Wert 3 und tast wird neu definiert. Laufzeitfehler – Diese Fehler treten bei einer Operation auf, die nicht erlaubt ist. Das bekannteste Beispiel ist die Division durch 0. Sie ruft allerdings nicht direkt einen Fehler auf. Folgendes Skript gibt (in neueren Browsern) den Datentyp Infinity für unendlich zurück. Listing 9.2: Division durch Null (Ausschnitt aus: division_null.html)

function div(x, y) { return x / y; } document.write(div(4, 0));

5 6

292

Analog gilt der Begriff Syntaxfehler. Tippfehler und schlimme Tippfehler bezeichnet man auch als Fehler, die beim Laden des Skripts auftreten (im Gegensatz zu Laufzeitfehlern).

 KOMPENDIUM 

JavaScript

Fehler und Lösungen

Kapitel 9 Abbildung 9.12: Die Division durch null ergibt Infinity.

Ein Fehler wird provoziert, wenn einer der Operanden einer arithmetischen Operation keine Zahl ist: function prod(x, y) { return x * y; } document.write(prod(4, "text"));

Dieses Skript erzeugt die Meldung NaN. In sehr alten Browsern wie Netscape 2 und 3 erscheint allerdings eine Fehlermeldung.

Listing 9.3: Multiplikation mit einem String (Ausschnitt aus: multiplikation_ string.html)

Logikfehler – sind die gemeinste Fehlersorte. Diese Fehler schleichen sich irgendwo in die Programmlogik ein. Beispielsweise wird eine Bedingung nicht richtig geprüft oder eine Berechnung stimmt nicht. Diese Fehler sieht der Interpreter oder Debugger natürlich nicht. Dazu gibt es nur zwei sinnvolle Lösungsvorschläge: – Testen Sie Ihre Skripten ganz genau. Führen Sie sämtliche möglichen Aktionen aus und klicken Sie alles an. Beispielsweise könnte der Fehler im onclick-Ereignis der Schaltfläche zum Zurücksetzen der Formularergebnisse liegen – diese wurde aber nie getestet. – Wenn Sie Fehler finden, kreisen Sie sie ein. Lassen Sie die Ergebnisse von Variablen ausgeben7 oder verwenden Sie in einem Debugger Breakpoints, um zu erkennen, wo Variablen welchen Wert haben. Haben Sie erst einmal einen Code-Block, eine if-Anweisung oder eine Funktion als Übeltäter ausgemacht, gehen Sie diese sorgfältig durch.

Endlosschleifen Endlosschleifen sind eigentlich Laufzeitfehler. Da sie aber besonders tückisch sind, nehmen sie eine Sonderrolle ein. Bei einer Endlosschleife melden die meisten Browser, dass ein Skript sehr lange zum Ausführen benötigt und Sie können das Skript zwischenzeitlich abbrechen. 7

Hierzu eignen sich window.alert und document.write.

 KOMPENDIUM 

JavaScript

293

Kapitel 9

Debugging

Abbildung 9.13: Eine Endlosschleife kann im Browser abgebrochen werden.8

Da8der Abbruch einer Endlosschleife nicht bei allen Browsern funktioniert9 und insbesondere bei nicht so gut ausgestatteten Rechnern auch häufig der Browser abstürzt, sollten Sie Endlosschleifen natürlich auf jeden Fall vermeiden.

9.4

JavaScript Fehler-Handling

Der ECMAScript 262-Standard in Version 3 integriert einige neue Möglichkeiten des Fehler-Handlings. Sie können Fehler bereits in Ihrem JavaScriptCode abfangen.

Fehler abfangen Mit der try-catch-Anweisung können Sie Fehler abfangen und darauf reagieren. Die Syntax sieht wie folgt aus: try { Anweisungen; } catch(Ereignis) { Anweisungen; }

In dem try-Anweisungsblock stehen alle Anweisungen, die das Skript ausführen soll. Im Prinzip handelt es sich hier um das normale Skript. Nur, wenn in diesem Skript an irgendeiner Stelle ein Fehler auftritt, kommt catch ins Spiel. Bei einem Fehler bricht der JavaScript-Interpreter die try-Anweisungen sofort ab und führt die Anweisungen im catch-Block aus. Ein Fehler ist immer ein Ereignis und wird als Parameter an die catch-Anweisung übergeben. Meist verwendet man für diesen Parameter den Buchstaben e (für Event bzw. Ereignis). Die try-catch-Anweisung ist in den neueren Browsern enthalten (siehe Tabelle 9.1). 8 9

294

Kennen Sie die Abbildung noch aus dem Vorwort? Hier folgt also die versprochene Auflösung. Konqueror, Mozilla und ältere Netscapes bereiteten im Test einige Probleme. Opera beendet die Endlosschleife zwar nicht, bleibt aber stabil (Testdatei: code\kap09\endlosschleife.html).

 KOMPENDIUM 

JavaScript

JavaScript Fehler-Handling

NS4.x NS6


Kapitel 9

NS7

IE4 IE5







IE5.5 IE6

O7

M1

K3
















Tabelle 9.1: try-catch-Anweisung

Im folgenden Beispiel enthält die Anweisung einen Tippfehler: Statt window.alert steht im Skript window.alrt. Die catch-Anweisung wird aufgerufen und gibt den Text »Ein Fehler ist aufgetreten« aus: <script language="JavaScript"> Abbildung 9.14: Die catch-Anweisung meldet, dass ein Fehler aufgetreten ist.

Da ältere Browser mit der try-catch-Anweisung nichts anfangen können, sollten Sie sie nur in Verbindung mit einer Browser-Fallunterscheidung einsetzen (siehe Kapitel 12 »Browserunterscheidung«) oder den Nutzern älterer Browser Alternativen bieten. Natürlich können Sie sich auch dafür entscheiden, nicht mehr Netscape 4.x- und Internet Explorer 4-kompatibel zu programmieren. Dies ist allerdings nur bei wenigen Nutzerzielgruppen – beispielsweise in einem Intranet – sinnvoll. finally In einer try-catch-Anweisung müssen sowohl try- als auch catch-Block enthalten sein. Optional lässt sich allerdings am Ende noch ein finally-Block anfügen. Er wird ausgeführt, nachdem try- und catch-Block oder nur der try-Block abgearbeitet sind. Die Anweisungen im finally-Block kommen also auf jeden Fall zum Einsatz.

 KOMPENDIUM 

JavaScript

295

Kapitel 9

Debugging try { Anweisungen; } catch(Ereignis) { Anweisungen; } finally { Anweisungen; } finally ist bereits in allen Browsern enthalten, die die try-catch-Anweisung

unterstützen (siehe Tabelle 9.1). Das folgende Beispiel zeigt alle Anweisungen und die Reihenfolge, in der sie ausgeführt werden (siehe Abbildung 9.15). Listing 9.5: finally und die

Reihenfolge der Ausführung (finally.html)

<script language="JavaScript">
} catch(e) { document.write("catch");

} finally { document.write("
finally"); } document.write("
Nach dem Block");

function ausgabe() { document.write("try
"); } //-->

Error-Objekt Mit dem Ereignis, das in der catch-Anweisung als Parameter übergeben wird, können Sie noch einiges anfangen. Das Ereignis ist ein Error-Objekt. Wie andere Objekte auch hat es Eigenschaften (aber keine Methoden). Die wichtigste Eigenschaft ist name. Sie liefert den Namen des Fehlers. Die name-Eigenschaft ist im Internet Explorer noch nicht seit dem Bestehen von try-catch enthalten, da Version 5 sie nicht unterstützt.

296

 KOMPENDIUM 

JavaScript

JavaScript Fehler-Handling

Kapitel 9 Abbildung 9.15: An der Reihenfolge der Ausgaben wird klar, in welcher Reihenfolge die Blöcke abgearbeitet werden.

NS4.x NS6


NS7


IE4 IE5

IE5.5 IE6

O7

M1

K3
















Tabelle 9.2: name-Eigenschaft des Error-Objekts

Im folgenden Skript erweitern wir das Beispiel aus Listing 9.4 um eine Bestimmung der Fehlerart: <script language="JavaScript">
Listing 9.6: Die genaue Fehlerart lässt sich auslesen (fehlerart.html).

//--> Abbildung 9.16: Ein TypeError (ein Fehler im Typ) war der Übeltäter.

 KOMPENDIUM 

JavaScript

297

Kapitel 9

Debugging Neben dem TypeError gibt es natürlich noch eine Reihe weiterer Fehler in JavaScript. Die folgende Tabelle gibt Ihnen einen Überblick.

Tabelle 9.3: Fehlerarten des Error-Objekts

Fehler

Beschreibung

Error

Ein allgemeiner Fehler. Er kann vom Programmierer selbst mit dem Schlüsselwort throw ausgeworfen (Synonym für ausgegeben) werden.

EvalError

Ein Fehler beim Aufruf der eval()-Funktion. Allerdings werden Syntax- und Tippfehler in eval()-Funktionen auch bei fehlenden Klammern oder falschen Anführungszeichen als SyntaxError erkannt (siehe weiter unten).

RangeError

Überschreiten des zulässigen (Zahlen-) Bereichs. Beispielsweise wird für ein Array eine negative Länge angegeben.

ReferenceError

Eine Referenz ist nicht vorhanden. Dieser Fehler tritt beispielsweise auf, wenn eine Variable nicht definiert ist (Netscape 6 und 7, Mozilla). Dies wird in anderen Browsern (z.B. IE 6) allerdings als TypeError eingestuft.

RegExpError

Ein Fehler in einem regulären Ausdruck

SyntaxError

Ein Syntaxfehler; viele Syntaxfehler wie fehlende Klammern oder falsche Anführungszeichen erzeugen allerdings eine direkte Fehlermeldung, da auch der try-catch-Block so nicht mehr richtig angezeigt wird und durcheinander gerät. Gegen einige Syntax- und Tippfehler ist also kein Kraut gewachsen.

TypeError

Meldet einen Fehler des Datentyps. Ein Objekt ist also beispielsweise nicht als Typ definiert.

URIError

Fehler in einem Link oder einem Verweis

Sie können natürlich auch auf Fehler unterschiedlicher Art verschieden reagieren. Eine einfache if- oder switch-Fallunterscheidung differenziert hier zwischen verschiedenen Fehlerarten. Das Problem bleibt allerdings, dass die unterschiedlichen Browser die Fehlerarten auch unterschiedlich festlegen. Eine nicht deklarierte Variable ist bei Netscape beispielsweise ein ReferenceError, im IE dagegen ein TypeError. In den folgenden Zeilen ist nur Variable x deklariert, y nicht: var x = 2; x += y;

Der Internet Explorer gibt einen TypeError aus (siehe Abbildung 9.17). Netscape dagegen einen ReferenceError (siehe Abbildung 9.18).

298

 KOMPENDIUM 

JavaScript

JavaScript Fehler-Handling

Kapitel 9 Abbildung 9.17: Ein TypeError im IE 6

Abbildung 9.18: Im Netscape Navigator (hier 6.2) dagegen ein ReferenceError

Die verschiedenen Fehlerarten sind selbst eigene Objekte (ab Netscape 6). Dies wird in der Praxis allerdings erst mit JavaScript 2.0 von Bedeutung sein, denn dort soll das Fehler-Handling weiter verbessert werden (siehe Anhang C »JavaScript 2.0 und die Zukunft«. Eigenschaften Neben name hat das Error-Objekt noch weitere Eigenschaften, die Sie in der folgenden Tabelle zusammengefasst finden. Eigenschaft

Beschreibung

description

Beschreibung des Fehlers. Da sie nur im Internet Explorer verwendbar ist, wird die Eigenschaft meist von message ersetzt.

fileName

Name der Datei, in der der Fehler auftrat

lineNumber

Zeile, in der der Fehler auftrat

message

Beschreibungstext zur Fehlermeldung. Im Gegensatz zu description auch im Netscape Navigator ab Version 6, aber nicht im Internet Explorer 5 enthalten.

name

Der bereits bekannte Name des Fehlers

number

Die Nummer des Fehlers. Sie ist spezifisch für den Internet Explorer.

 KOMPENDIUM 

JavaScript

Tabelle 9.4: Eigenschaften des Error-Objekts

299

Kapitel 9

Debugging Die folgende Tabelle zeigt, für welche Browser die Eigenschaften des ErrorObjekts geeignet sind. Folgende Besonderheiten sind zu beachten: Beim Opera ist zusätzlich die Eigenschaft opera#sourceloc definiert. Sie gibt die Position des Fehlers im Skript-Code an. Der Mozilla kennt zusätzlich die Eigenschaft stack, die eine Kombination aus Dateiname und Zeile ausgibt. Im Konqueror heißt die Eigenschaft lineNumber lediglich line.

Tabelle 9.5: Eigenschaften des Error-Objekts

NS4.x NS6

NS7

IE4 IE5


description

IE5.5 IE6


O7

M1

K3




fileName










lineNumber










(
)

message






















name































number

Das folgende Beispiel liest alle Eigenschaften des Error-Objekts und gibt sie aus: Listing 9.7: Die Eigenschaften des Error-Objekts auslesen (eigenschaften.html)

<script language="JavaScript">"); }

} //-->

300

 KOMPENDIUM 

JavaScript

JavaScript Fehler-Handling

Kapitel 9

Der Opera 6 und 7 zeigt hier ein besonderes Verhalten. Er gibt mit dieser Schleife nur die message und seine eigene Eigenschaft opera#sourceloc aus, nicht aber die name-Eigenschaft, obwohl er sie kennt (Listing 9.6 funktioniert also im Opera). Abbildung 9.19: Eigenschaften des Error-Objekts im Internet Explorer 6 …

Abbildung 9.20: … im Mozilla …

throw Mit dem Schlüsselwort throw können Sie einen eigenen Fehler ausgeben. Programmierer machen ohnehin bereits genug Fehler, warum dann noch selbst welche erzeugen? Diese Frage ist berechtigt. Sehr häufig kommt throw nicht zum Einsatz, allerdings kann es sinnvoll sein, wenn beispielsweise bestimmte Eingaben verboten sind.

 KOMPENDIUM 

JavaScript

301

Kapitel 9

Debugging

Abbildung 9.21: … und im Konqueror

Tabelle 9.6: throw

NS4.x NS6


NS7


IE4 IE5

IE5.5 IE6

O7

M1

K3
















Das folgende Beispiel überprüft, ob der Nutzer eine Zahl größer gleich 5 eingibt. Wenn dies nicht der Fall ist, wird mit throw ein Fehler erzeugt. Nach dem Schlüsselwort throw folgt das Error-Objekt und in Klammern als String die Beschreibung (entspricht der Eigenschaft message). Listing 9.8: Einen Fehler mit throw auswerfen (throw.html)

<script language="JavaScript">
} catch(e) { document.write(e.message); } //-->

302

 KOMPENDIUM 

JavaScript

JavaScript Fehler-Handling

Kapitel 9 Abbildung 9.22: Die Ausgabe wird von der catchAnweisung vorgenommen.

Sie können throw auch in Kurzform ohne Error-Objekt schreiben: throw "Beschreibung"

Fehlerereignis Neben der try-catch-Anweisung gibt es auch einen eigenen Event-Handler für die Fehlerbehandlung: onerror. Dieses Ereignis ist Teil des window-Objekts (siehe Kapitel 10 »Document Object Model«). NS4.x NS6


NS7

IE4 IE5







IE5.5 IE6





O7

M1

K3







Tabelle 9.7: onerror

onerror ruft eine Funktion auf, die im Fehlerfall zum Einsatz kommt. Als Rückgabewert müssen Sie true zurückgeben, damit der Browser erkennt,

dass die Funktion sich um den Fehler gekümmert hat. Vergessen Sie diese Angabe, gibt der Browser eine JavaScript-Fehlermeldung aus. <script language="JavaScript">

 KOMPENDIUM 

JavaScript

303

Kapitel 9

Debugging

Abbildung 9.23: Die Fehlermeldung mit onerror

Wann ist Fehler-Handling sinnvoll? Eine gute Fehlerbehandlung ist aufwändig, funktioniert nicht in allen Browsern und vergrößert den Code. Sollten Sie sich dennoch darum kümmern? Ja, denn bei langen Listings und großen Anwendungen, bei denen Fehleingaben nicht auszuschließen sind, ist die try-catch-Anweisung sehr sinnvoll. Der Code wird dadurch strukturierter. Außerdem haben Sie so die eine Ausnahme unter 1.000 normalen Fällen abgefangen, die bei irgendeinem Nutzer eine Fehlermeldung auswerfen würde. Da die (abgedruckten) Beispiele in diesem Buch nicht so lang sind, wird meist auf die try-catch-Anweisung verzichtet. In der Praxis sollten Sie die Fehlerbehandlung heutzutage zusätzlich mit einer Browserunterscheidung verbinden, die insbesondere die zwei großen Browser der vierten Generation Netscape 4.x und Internet Explorer 4 aussortiert. Weniger sinnvoll erscheinen – zum aktuellen Zeitpunkt – die Eigenschaften des Error-Objekts. Sie werden von den Browsern einfach zu unterschiedlich umgesetzt. Ebenfalls nicht zu empfehlen ist das onerror-Event, da es auf dem Opera nicht läuft. try-catch ist die bessere Alternative, was die Kompatibilität betrifft.

304

 KOMPENDIUM 

JavaScript

10

Document Object Model

Die bisher in diesem Buch verwendeten Beispiele sind zwar alle darauf ausgelegt, in einem Browser zu laufen, stellen also clientseitiges JavaScript dar. Dennoch können sie sehr einfach in serverseitiges JavaScript umgewandelt werden, denn der Sprachkern und -umfang unterscheidet sich nicht. Dieses Kapitel beschäftigt sich ausschließlich mit der Client-Seite: dem Browser. Das DOM (Document Object Model) ist ein Modell aller Objekte im Browser. Dieses Modell zielt darauf ab, Zugriff auf alle Elemente einer Webseite (oder einer XML-Datei) zu gewähren1. Der Zugriff gibt Ihnen die Möglichkeit, Objekte zu verändern und neue Objekte hinzuzufügen. Ersteres kommt in Webseiten wesentlich häufiger vor. Um zu verstehen, was das DOM ist, macht ein einfaches Beispiel den Anfang. Die folgende HTML-Seite besteht aus einer Überschrift und einem Text mit einer Hervorhebung:

Überschrift

Text mit Hervorhebung

Listing 10.1: Eine HTML-Seite (dom.html)

Im Browser sieht dies sehr unspektakulär aus (siehe Abbildung 10.1). Diese Seite wird aber nun in einem Document Object Model abgebildet. Das führt der Browser automatisch aus, wenn er die Seite lädt. Das DOM der Seite enthält dann alle Elemente der Seite in hierarchischer Ordnung. Das oberste Objekt in der Seite ist immer document. Es steht gewissermaßen über allen anderen Elementen einer Webseite. Den vollständigen DOM-Baum aus Listing 10.1 sehen Sie in Abbildung 10.2. 1

Das DOM lässt sich also durchaus auch als API (Application Programming Interface) definieren.

 KOMPENDIUM 

JavaScript

305

Kapitel 10

Document Object Model

Abbildung 10.1: Die einfache HTMLSeite sieht im Browser sehr unspektakulär aus.

Das DOM umfasst in der allgemeinen Darstellung (siehe Kapitel 6.2 »Objekte von JavaScript«) die so genannten Browserobjekte. Dies sind Objekte, mit denen Sie auf spezielle Elemente einer Webseite zugreifen können. Sie finden sie in Kapitel 10.3 »Browserobjekte«. Das hier vorgeführte Beispiel ist ein DOM-Modell für eine einzelne Webseite. Unabhängig davon können in dieser Webseite auch Elemente wie beispielsweise Formulare oder Stilanweisungen vorhanden sein, auf die Sie mit Browserobjekten zugreifen können. Man kann also sagen: Das DOM-Modell einer einzelnen Webseite ist das hierarchische Abbild aller Elemente auf der Webseite, die Browserobjekte dagegen gestatten Zugriff auf bestimmte Objekte und bieten für diese Objekte zusätzliche Eigenschaften und Methoden. Abbildung 10.2: Der DOM-Baum der HTML-Seite

html head title Text:DOM body h1 Text:Überschrift p Text:Text mit b Text:Hervorhebung

306

 KOMPENDIUM 

JavaScript

Document Object Model

Kapitel 10

Der DOM-Baum2 besteht aus mehreren Ebenen. Die oberste Ebene ist in diesem Beispiel das -Element (übergeordnet ist noch das bereits erwähnte document-Objekt) und die zweite Ebene - und -Bereich. Jedes Element im DOM-Baum wird als Knoten bezeichnet. In Abbildung 10.2 fehlt noch einiges. Die Leerzeichen3, die zur Einrückung im Skript vorhanden sind, stellen nach strenger Auslegung der Regeln zur Bildung eines DOM ebenfalls Textelemente dar. Netscape Navigator und Mozilla sehen dies auch so (siehe Abbildung 10.3), der Internet Explorer dagegen ignoriert Leerzeichen und Tabs. Abbildung 10.3: Das DOM der HTML-Seite im Mozilla DOM Inspector wird mit Whitespaces angezeigt.

2 3

Die Bezeichnung Baum stammt von der hierarchischen Aufspaltung in mehrere Zweige. Die Leerzeichen zählen zu den so genannten Whitespaces. Ebenfalls in diese Kategorie fallen Tabs ((ÿ_)).

 KOMPENDIUM 

JavaScript

307

Kapitel 10

Document Object Model

10.1

W3C-DOM

Der DOM-Baum aus dem vorangegangenen Beispiel (siehe Abbildung 10.2) entspricht schon recht genau dem W3C-DOM. Das W3C hat sich mit dem DOM zum Ziel gesetzt, einen plattformübergreifenden und Programmiersprachen-unabhängigen Zugriff auf Inhalt, Struktur und Stil von Dokumenten zu erlauben.4 Der DOM-Standard ist nicht Teil von ECMAScript, da die ECMA nur den Sprachkern der Skriptsprache definiert, nicht aber den Zugriff auf Elemente in verschiedenen Umgebungen. Das W3C-DOM wird in drei Bereiche unterteilt: Core5, HTML und XML. Der Kernbereich Core enthält ein minimales Interface – eine Sammlung von Schnittstellen. Der HTML-Teil adressiert direkt HTML-Dokumente und XML dient für XML-Dokumente.6 Diese Modularisierung wird weiter vorangetrieben. DOM Level 2 enthält auch ein eigenes Modul für Stile. Das W3C unterscheidet zwischen verschiedenen Leveln7 der DOM-Standards: DOM Level 1 – ist der erste DOM-Standard, der es zu einer Empfehlung des W3C gebracht hat. Er basiert ursprünglich auf dem Objektmodell des Netscape Navigators 3 und ihn gab es seit der vierten Browsergeneration. Allerdings erreichten erst der Internet Explorer 6 und Netscape Navigator 6 und 7 eine komplette Umsetzung. Das besondere an DOM Level 1 ist, dass es noch kein Ereignismodell enthält. DOM Level 2 – ist eine Weiterentwicklung von Level 1. Komplett neu ist das Ereignismodell und ein eigenes Modell für Stile, also Stylesheets. Das DOM Level 2 ist bereits seit einiger Zeit eine Empfehlung (Recommendation) des W3C, hat also den höchsten Status erreicht. Allerdings ist die Umsetzung in den aktuellen Browsern nach wie vor nicht – oder noch nicht richtig – erfolgt. DOM Level 3 – ist im Moment eine der wichtigsten Aktivitäten des W3C. Die Modularisierung und Bereitstellung von weiteren DOMSchnittstellen für verschiedenste Dokumenttypen steht dabei im Vordergrund. DOM Level 3 soll allerdings auch zu DOM Level 2 komplett abwärtskompatibel sein. 4 5 6 7

308

siehe http://www.w3.org/DOM Kernbereich Für die XML-Sprachen MathML (für mathematische Dokumente) und SVG (für vektorbasierte Animation) erstellt das W3C jeweils ein eigenes DOM-Modul. Ebenen; hier allerdings verständlicher: Versionen.

 KOMPENDIUM 

JavaScript

W3C-DOM

Kapitel 10

Knoten Ein Dokument in der hierarchischen DOM-Baumdarstellung besteht aus einzelnen Knoten. In der Beispiel-HTML-Seite (siehe Abbildung 10.2) ist also jedes HTML-Tag und jeder Text dazwischen ein eigener Knoten. Die folgende Tabelle zeigt die verschiedenen Knotenarten, die für ein HTML-Dokument zur Verfügung stehen. Insgesamt gibt es zwölf Knotenarten, dabei sind jedoch nur sieben für HTML-Dokumente relevant. Der Rest dient zur Arbeit mit XML-Dokumenten. Art (numerisch)

Art

Name

Beschreibung

1

Element

Name des Tags

Ein HTML-Tag

2

Attribut

Name des Attributs

Ein HTML-Attribut

3

Text

#text

Ein Text (auch Whitespaces; wenn nicht ausgeschaltet)

8

Kommentar

#comment

Ein Kommentar (nur HTMLKommentar )

9

Dokument

#document

Das Dokument selbst

10

DocType

DOCTYPE

Die Document Type Declaration (DTD)

11

Fragment

#document

Ein Teil des Dokuments, der aus einem oder mehreren Knoten bestehen kann

Tabelle 10.1: Knoten-Arten für HTML-Dokumente

Zugriff Das Knoten-Konzept verrät bereits viel über den Zugriff per DOM. Jeder Knoten ist über das DOM adressierbar. Dafür gibt es zwei unterschiedliche Methoden: Direktzugriff auf ein Element – die häufiger in der Praxis eingesetzte Variante Zugriff über die Navigation durch die Knoten-Hierarchie Direktzugriff Der Direktzugriff erfolgt über zwei Methoden des document-Objekts:

 KOMPENDIUM 

JavaScript

309

Kapitel 10

Document Object Model getElementById("ID") – liefert ein Element mit der ID, die als Parameter

übergeben wird. getElementsByTagName("Name") – gibt ein Array mit allen Elementen mit

dem als Parameter übergebenen Tag-Namen zurück. Bei beiden Methoden gibt es häufig Verwirrungen bei der Schreibweise. Die heikelsten Stellen sind: Die Id in getElementById wird mit einem kleinen »d« geschrieben. getElementsByTagName verwendet den Plural (»Elements«). Der Direktzugriff ist daher nicht ganz unproblematisch, weil er erst in neueren Browsern möglich ist. getElementsByTagName() hat auch im Opera 6 und niedrigeren Versionen nicht funktioniert. Dort stand nur getElementById() zur Verfügung. Tabelle 10.2: Die zwei Funktionen für den Direktzugriff

NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3

getElementById

























getElementsByTagName

























getElementById() getElementById("ID") wird in der Praxis sehr häufig eingesetzt, da es den

Zugriff auf genau ein Element erlaubt. Die ID des HTML-Elements, das angesprochen werden soll, muss in Klammern als String – also in Anführungszeichen – stehen. Im HTML-Tag wird die ID als HTML-Attribut zugewiesen. Eine ID darf nur einmal im gesamten Dokument vergeben sein. Häufig kommen daher IDs mit Nummern, beispielsweise a01, a02 usw., zum Einsatz. Das folgende Beispiel zeigt den Einsatz von getElementById(). Das Skript überträgt die Eingabe von einem Formularfeld in ein anderes, sobald der Nutzer die Schaltfläche anklickt. Zuerst wird einer Variablen das Element mit der ID ein zugewiesen. var ele = document.getElementById("ein");

Anschließend greift document.getElementById() auf das Ausgabefeld zu und ändert den Wert in den Wert des Eingabefelds. document.getElementById("aus").value = ele.value;

310

 KOMPENDIUM 

JavaScript

W3C-DOM

Kapitel 10

Die zugehörige Funktion auslesen() ruft der Nutzer auf, wenn er auf die Schaltfläche klickt. <

Hier der komplette Quellcode: <script language="JavaScript">
Listing 10.2: Der Einsatz von getElementById() (getele-

mentbyid.html)

var ele = document.getElementById("ein"); document.getElementById("aus").value = ele.value;

} //-->

Eingabe

Ausgabe

Abbildung 10.4: Ein Klick auf die Schaltfläche übergibt den Text im oberen Textfeld in das untere Feld.

 KOMPENDIUM 

JavaScript

311

Kapitel 10

Document Object Model Für den Zugriff auf Objekte der Seite sollten Sie das Skript immer erst beim Laden (Attribut onload mit Funktionsaufruf) oder in einem auf der Seite auftretenden Ereignis (z.B. onclick) ausführen, da ansonsten das Skript bereits ausgeführt wird, bevor alle Objekte der Seite geladen sind. getElementsByTagName() Der große Unterschied von getElementsByTagName("Name") zu getElementById() besteht darin, dass nicht bekannt ist, wie viele Elemente mit dem TagNamen im Dokument vorhanden sind. Als Rückgabe liefert die Methode also nicht nur einen Variablenwert, sondern ein ganzes Array mit allen Knoten, die ein Tag mit dem Namen haben. Der direkte Zugriff auf ein einzelnes Element ist also mit getElementById() wesentlich einfacher zu bewältigen. getElementsByTagName("Name") ist insbesondere dann sinnvoll, wenn Sie eine bestimmte Art von Tags, beispielsweise alle

- oder alle

-Tags, gleichzeitig ändern möchten. Das folgende Beispiel macht sich dies zunutze und ändert die Schriftgröße für alle

-Tags, wenn der Nutzer auf die Schaltfläche klickt: Dazu dient eine Schleife, die mit length die Länge des Arrays überprüft und die ArrayElemente der Reihe nach ändert: Zuerst wird die Hilfsvariable elemente definiert. Sie erhält das Array mit allen

-Tags: var elemente = document.getElementsByTagName("p");

Hilfsvariablen dienen in den meisten Fällen dazu, den Code abzukürzen. In diesem Fall müssen Sie document.getElementsByTagName() nur einmal aufrufen. Ansonsten würde der Code in der Schleife wesentlich länger und unübersichtlicher. Die for-Schleife durchläuft nun alle Elemente des soeben erzeugten Arrays: for (var i = 0; i < elemente.length; i++) {

Eine Fallunterscheidung prüft die aktuelle Schriftgröße. Beträgt sie bereits 20 pt (Punkt), wird die Schrift auf 12 pt verkleinert. Ansonsten wird (else) auf 20 pt vergrößert. if(elemente[i].style.fontSize == "20pt") elemente[i].style.fontSize = "12pt"; else elemente[i].style.fontSize = "20pt";

312

 KOMPENDIUM 

JavaScript

W3C-DOM

Kapitel 10

Das style-Objekt erlaubt einen direkten Zugriff auf die Stileigenschaften des jeweiligen Tags. Es ist Teil des W3C-DOM-Standards und für jedes HTML-Objekt vorhanden. Mehr dazu erfahren Sie im Kapitel 19 »CSS und JavaScript«. Bei der Schaltfläche wird die Funktion zum Wechsel der Schriftgröße (groesse()) aufgerufen. Für einen Überblick hier das vollständige Beispiel: <script language="JavaScript">
Listing 10.3: getElementsByTagName()

im Einsatz (getElementsByTag Name.html)

} //-->

Erster Absatz

Zweiter Absatz

Größe ändern Abbildung 10.5: Die Schaltfläche wechselt zwischen kleiner …

 KOMPENDIUM 

JavaScript

313

Kapitel 10

Document Object Model

Abbildung 10.6: … und großer Schrift.

Das -Element hat den großen Vorteil, dass es gegenüber nicht in

-Tags stehen muss. Dafür ist es in älteren Browsern, beispielsweise Netscape 4.x, nicht verfügbar. Zugriff über Knoten-Hierarchie Der Zugriff über die Knoten-Hierarchie benötigt vor allem einen Startpunkt. Normalerweise ist dies das document-Objekt als oberstes Objekt der DOM-Hierarchie. Von diesem Objekt aus hangeln Sie sich dann in die Tiefe. Die hierarchische Struktur entspricht Verwandtschaftsgraden unseres Stammbaumsystems8. Ein übergeordneter Knoten ist also ein Parent (ein Eltern-Knoten) und ein untergeordneter ein Child (Kind-Knoten). Knoten auf einer Hierarchieebene werden als Siblings (Geschwister-Knoten) bezeichnet. Jedes Knoten-Element besitzt Eigenschaften, die den Zugriff auf benachbarte Elemente erlauben. Die Eigenschaft firstChild greift beispielsweise auf den ersten Kind-Knoten zu, parentNode auf den Eltern-Knoten und nextSibling auf den nächsten Geschwister-Knoten. Abbildung 10.7 veranschaulicht verschiedene Eigenschaften. Die Eigenschaft childNodes enthält alle KindKnoten eines Knotens in einem Array.

8

314

Es wird auch hawaiianisches System genannt.

 KOMPENDIUM 

JavaScript

W3C-DOM

Kapitel 10

k.firstChild

k

Abbildung 10.7: Die Verwandtschaftsverhältnisse zwischen Knoten

k.lastChild k[1].parentNode

childNodes:

k[0]

k[0].nextSibling

k[1]

k[2]

k[2].previousSibling

Eine Übersicht der Eigenschaften und Methoden finden Sie im Abschnitt »Eigenschaften und Methoden des W3C-DOM«. Alle Elemente auslesen Der Zugriff auf die Knoten des Dokuments kann beispielsweise dazu genutzt werden, die Hierarchie des Dokuments darzustellen. Das folgende Beispiel verwendet dazu eine Schleife und einen rekursiven Funktionsaufruf: Die Funktion zur Ausgabe (ausgabe()) wird beim Laden der Seite aufgerufen.

Der Zugriff auf den DOM-Baum kann immer erst nach dem Laden erfolgen, da erst zu diesem Zeitpunkt die DOM-Hierarchie vom Browser im Arbeitsspeicher hinterlegt ist. Sie speichert den Rückgabewert aus der Funktion schleife() in einer Variablen und gibt sie aus. Als erster Parameter wird das documentObjekt übergeben. Dies ist der Start in den Hierarchiezugriff. Der zweite Parameter ist ein leerer String. Er wird später verwendet, um tiefer in der Hierarchie liegende Elemente einzurücken. function ausgabe() { var erg = schleife(document, ""); document.write(erg); }

Die Funktion schleife() besteht aus einer Schleife. Sie führt Folgendes aus: – Als Anfangswert übernimmt sie den ersten Kind-Knoten des Parameters elemente der Funktion. – Anschließend durchläuft sie alle Geschwister-Knoten dieses Parameters (siehe Schleifenänderung ele = ele.nextSibling), bis keiner mehr vorhanden ist (Bedingung: ele != null).

 KOMPENDIUM 

JavaScript

315

Kapitel 10

Document Object Model for (var ele = elemente.firstChild; ele != null; ele = ele.nextSibling)

In der Schleife folgen die Anweisungen: Der Sammelvariablen string werden nur die Knoten-Namen (ele.nodeName) der Knoten hinzugefügt, die HTML-Tags sind (ele.nodeType==1). if (ele.nodeType == 1) { string += z + ele.nodeName + "
"; }

Nach der Ausgabe folgt der rekursive Aufruf der Funktion. Als neues Knoten-Objekt wird ele übergeben. Dies ist der Kind-Knoten des Knotens beim letzten Funktionsaufruf – er wurde in der Schleifenanfangsbedingung definiert. Der zweite Parameter erhält als Einrückung zwei HTML-Leerzeichen ( ). schleife(ele, z + "  "); }

Der rekursive Aufruf sorgt dafür, dass die Schleife in die tieferen Ebenen der Hierarchie gelangt. Die Hierarchie der Aufrufe sieht für das Beispiel wie folgt aus: Schleife // liefert HTML Funktionsaufruf Schleife // liefert HEAD Funktionsaufruf Schleife // liefert TITLE Funktionsaufruf Schleife // Abbruch, da ele == null Schleife // liefert SCRIPT Funktionsaufruf Schleife // Abbruch, da ele == null Schleife // Abbruch, da ele == null Schleife // liefert BODY . . .

Vergleichen Sie dies mit dem Ergebnis des Codes oder mit Abbildung 10.8. Nach dem letzten Schleifenabbruch wird die Sammelvariable string zurückgegeben. return string;

316

 KOMPENDIUM 

JavaScript

W3C-DOM

Kapitel 10

Hier sehen Sie den kompletten Code: 9 <script language="JavaScript">
Listing 10.4: Mit einer rekursiven Funktion lassen sich alle HTMLTags auslesen (knoten_zugriff. html).9

function schleife(elemente, z) { for (var ele = elemente.firstChild; ele != null; ele = ele.nextSibling) { if (ele.nodeType == 1) { string += z + ele.nodeName + "
"; } schleife(ele, z + "  ");

} return string; } //-->

Überschrift

Text mit Hervorhebung

Soll die DOM-Hierarchie beim Zugriff nicht verändert werden, müssen Sie von außerhalb zugreifen. Am einfachsten funktioniert dies über Frames. Zugriffsarten mischen In der Praxis treten oft beide Zugriffsarten gemischt auf. Der erste Zugriff auf ein Element erfolgt dabei meist mit getElementById, die weitere Arbeit übernehmen Methoden und Eigenschaften, um innerhalb der Knoten-Hierarchie zu arbeiten.

9

Dieses Beispiel funktioniert nur in Browsern, die mit dem W3C-DOM etwas anfangen können. Also nicht im Internet Explorer 4 und im Netscape Navigator 4.x. Der Konqueror hat Probleme mit der document.write()-Ausgabe. Geben Sie dort die Informationen beispielsweise in eine Textarea aus.

 KOMPENDIUM 

JavaScript

317

Kapitel 10

Document Object Model

Abbildung 10.8: Ein einfaches JavaScript zeigt die Hierarchie des Dokuments.

In Kapitel 10.1.3 »Eigenschaften und Methoden des W3C-DOM« finden Sie die Eigenschaften und Methoden näher erläutert. Das folgende Beispiel zeigt auf einfache Art die Mischung von direktem Zugriff und Zugriff über die Knoten-Hierarchie. Ziel ist, einen Knoten mit seinen Kind-Knoten zu duplizieren. Grundlage dieses Beispiels ist Listing 10.1. Zusätzlich wurde dem Textabsatz ein id-Attribut mit dem Wert absatz1 zugewiesen. Dieser Absatz soll nun im Skript im Kopf der Seite mit getElementById angesprochen und anschließend geklont werden: Der Zugriff auf den Absatz erfolgt, wie bereits erwähnt, über getElementById(). var ele = document.getElementById("absatz1");

Anschließend wird der Absatz mit cloneNode(Tiefe) geklont. Für die Tiefe können Sie true angeben, wenn alle darunter liegenden Knoten (Child Nodes oder Kind-Knoten) auch geklont werden sollen. var klon = ele.cloneNode(true);

Bisher sind die geklonten Knoten allerdings nur als Referenz, als eine Art Abbild, in der Variablen klon gespeichert. Um sie wieder einzufügen, benötigen Sie eine weitere Methode, beispielsweise appendChild(Knoten). Vorher muss in der Hierarchie allerdings einen Knoten nach oben gewandert werden, da die geklonten Knoten an das Ende des Dokuments angefügt werden sollen. ele = ele.parentNode; 318

 KOMPENDIUM 

JavaScript

W3C-DOM

Kapitel 10

Dann erst kommt appendChild(Knoten) zum Einsatz. Der Parameter Knoten enthält in diesem Beispiel die Referenz auf die geklonten Knoten: ele.appendChild(klon);

Hier im Überblick der vollständige Code: <script language="JavaScript">
Listing 10.5: Mischen von direktem Zugriff und Arbeit mit der Hierarchie (dom_zugriff.html)

} //-->

Überschrift

Text mit Hervorhebung

Abbildung 10.9: Der Absatz der Beispieldatei wurde zusammen mit den darunter liegenden Knoten geklont.

Die Mischung der Zugriffsarten ist in der Praxis eine der häufigsten Erscheinungsformen. Als Faustregel gilt: entweder wird getElementById() alleine genutzt oder in Verbindung mit dem hierarchischen Zugriff. Dabei müssen Sie allerdings immer beachten, dass der Zugriff über das W3CDOM nur in neueren Browsern funktioniert. Eine umfangreiche Diskussion dazu finden Sie in Kapitel 10.2 »DOM in verschiedenen Browsern«.

 KOMPENDIUM 

JavaScript

319

Kapitel 10

Document Object Model

Eigenschaften und Methoden des W3C-DOM In diesem Abschnitt finden Sie die Eigenschaften und Methoden gesammelt, die das W3C-DOM für alle Knoten-Arten definiert. Damit die Wirkungsweise der Eigenschaften aus Tabelle 10.3 nachvollziehbar wird, sehen Sie in der Tabelle jeweils ein Beispiel. Das Seitengerüst, auf das sich dieses Beispiel bezieht, sehen Sie hier: Listing 10.6: Die Arbeitsgrundlage für die Beispiele in Tabelle 10.3 (dom_id.html)

<script language="JavaScript">

Überschrift

Text mit Hervorhebung

Das Grundgerüst besteht aus einer einfachen HTML-Seite und einer Funktion, die nach dem Laden des Dokuments aufgerufen wird. In der Funktion greift getElementById("absatz") direkt auf den Knoten des

-Tags zu. Tabelle 10.3: Die Eigenschaften für Knoten

320

Eigenschaft

Beispiel

Beschreibung

attributes

Eine Beispielausgabe finden Sie auf der CD-ROM unter code\kap10\attributes.html.

Array mit allen Attribut-Knoten eines Dokuments

childNodes

ele = ele.childNodes; for (var i=0 ; i<ele.length ; i++) { string += ele[i].nodeName + "
"; } document.write(string);

Array mit allen Kind-Knoten eines Knotens. In unserem Beispiel sind das zwei TextKnoten und der ElementKnoten für das -Tag.

 KOMPENDIUM 

JavaScript

W3C-DOM

Kapitel 10

Eigenschaft

Beispiel

Beschreibung

firstChild

ele = ele.firstChild; document.write(ele.nodeValue);

Gibt den Verweis auf den ersten Kind-Knoten des aktuellen Knotens zurück.

lastChild

ele = ele.lastChild; document.write(ele.nodeName);

Liefert den Verweis auf den letzten Kind-Knoten des aktuellen Knotens.

nextSibling

ele = ele.nextSibling; document.write(ele);

Ergibt den nächsten Geschwister-Knoten. Ist kein Knoten vorhanden, wird null zurückgegeben.

 KOMPENDIUM 

JavaScript

Tabelle 10.3: Die Eigenschaften für Knoten (Forts.)

321

Kapitel 10 Tabelle 10.3: Die Eigenschaften für Knoten (Forts.)

322

Document Object Model

Eigenschaft

Beispiel

Beschreibung

nodeName

siehe Beispiel lastChild

Liefert den Namen eines Knotens. Bei HTML-Tags ist das der Tag-Bezeichner, bei TextKnoten #text (siehe Tabelle 10.1).

nodeType

document.write(ele.nodeType);

Liefert die Art des Knotens. Eine Übersicht finden Sie in Tabelle 10.1.

nodeValue

siehe Beispiel firstChild

Liefert den Wert eines Knotens. Bei einem Text-Knoten ist das beispielsweise der Text.

ownerDocument

ele = ele.ownerDocument;

Ergibt einen Verweis auf das document-Objekt der aktuellen DOM-Hierarchie.

parentNode

ele = ele.parentNode; document.write(ele.nodeName);

Liefert einen Verweis auf den übergeordneten Knoten des aktuellen Knotens; im Beispiel also das -Tag.

previousSibling

ele = ele.previousSibling; document.write(ele.nodeName);

Verweis auf den vorangehenden Geschwister-Knoten; im Beispiel also das

-Tag.

 KOMPENDIUM 

JavaScript

W3C-DOM

Kapitel 10

Die kompletten Beispiele zu den einzelnen Eigenschaften finden Sie unter dem Namen der Eigenschaft im Verzeichnis code\kap10. Die Eigenschaften für Knoten sind ebenso lange in Browsern integriert wie das W3C-DOM. Allerdings gibt es eine Schwierigkeit bei ownerDocument. Diese Eigenschaft besitzt der Internet Explorer 5 nur am Macintosh, nicht aber unter Windows!10 Unter Windows verwendet der Internet Explorer nur document. Und bei nodeType unterstützt der Internet Explorer 5 unter Windows nicht alle Typen. NS4.x NS6
a.

NS7

IE4 IE5







IE5.5 IE6

O7a

M1

K3
















Tabelle 10.4: Die Eigenschaften für Knoten

Opera 6 kommt mit den Eigenschaften von Knoten noch nicht zurecht.

Die Methoden für das W3C-DOM finden Sie in Tabelle 10.5. Methode

Beschreibung

appendChild(Knoten)

Fügt hinter einen Knoten den als Referenz im Parameter übergebenen Knoten an (siehe Listing 10.5).

cloneNode(Tiefe)

Klont den aktuellen Knoten. Die Tiefe gibt an, ob die Kind-Knoten mit geklont werden (true) oder nicht (false) (siehe Listing 10.5).

createElement("Tag")

Erstellt ein neues HTML-Tag-Element.

createTextNode("Text")

Erstellt einen neuen Text-Knoten.

getAttributeNode(Attribut)

Liefert einen Attribut-Knoten.

hasChildNodes()

Stellt fest, ob ein Knoten Kind-Knoten besitzt (true) oder nicht (false).

hasAttributes()

Liefert true, wenn ein Knoten Attribut-Knoten besitzt, ansonsten false.

insertBefore(neuer Knoten, Knoten)

Setzt vor einen Knoten einen neuen Knoten.

removeAttributeNode(Attribut)

Entfernt einen Attribut-Knoten.

Tabelle 10.5: Methoden für Knoten

10 Die Ursache dafür ist, dass der IE für Macintosh von einem anderen Entwicklerteam bei Microsoft weiterentwickelt wird als die Windows-Version. Das W3C-DOM wurde am Macintosh früher übernommen.

 KOMPENDIUM 

JavaScript

323

Kapitel 10 Tabelle 10.5: Methoden für Knoten (Forts.)

Document Object Model

Methode

Beschreibung

removeChild(Knoten)

Löscht einen Knoten. Der Knoten muss ein KindKnoten

replaceChild(neuer Knoten, alter Knoten)

Ersetzt den neuen Knoten durch einen alten Knoten.

setAttribute(Attribut, Knoten)

Setzt ein Attribut für einen Knoten.

setAttributeNode (Attribut)

Setzt einen Attribut-Knoten.

swapNode(Knoten)

Vertauscht den aktuellen Knoten mit dem als Parameter angegebenen Knoten. Diese Methode ist auf den Internet Explorer ab Version 5 beschränkt, aber nicht im Internet Explorer 5 am Mac integriert.

supports(Funktion, Version)

Stellt fest, ob ein Knoten eine bestimmte Funktion unterstützt. Diese Methode wird nur im Netscape Navigator ab Version 6 und im Mozilla unterstützt.

Spezielle Knoten-Arten können eigene Eigenschaften und Methoden besitzen. Wie Sie ein neues Element zur HTML-Seite hinzufügen, erklärt der Abschnitt »Neue Elemente hinzufügen«. Erklärungsbedürftig ist bei den Methoden insbesondere removeChild(Knoten). Mit dieser Methode entfernen Sie einen Knoten. Allerdings muss der aufrufende Knoten vor der Methode der Eltern-Knoten des zu löschenden Knotens sein. Das folgende Beispiel löscht den Absatz. Das Knoten-Objekt vor der Methode removeChild() muss also das -Tag sein. Listing 10.7: Einen Knoten mit removeChild()

entfernen (removeChild.html)

<script language="JavaScript">
} //-->

Überschrift

Text mit 324

 KOMPENDIUM 

JavaScript

W3C-DOM

Kapitel 10

Hervorhebung

Abbildung 10.10: Der Knoten und alle untergeordneten Knoten werden entfernt.

Andere, sehr spezielle Eigenschaften und Methoden, werden hier nicht beschrieben. So bleiben beispielsweise drei Eigenschaften für XML-Namespaces, namespaceURI, localName und prefix außen vor, da sie sich zum einen auf Netscape ab Version 6 beschränken und zum anderen dort auch nicht konsequent umgesetzt sind.11 Auf der CD-ROM finden Sie jedoch ein Beispiel unter code\kap10\namespace.html. Neue Elemente hinzufügen Wollen Sie komplett neue Elemente zur DOM-Hierarchie hinzufügen, gilt es, einiges zu beachten. Erstellen Sie zuerst ein Element mit createElement("Tag"). Als Parameter wird der Tag-Name in Großschreibung als String übergeben. Bis zu diesem Zeitpunkt ist das Element allerdings noch nicht in der DOM-Hierarchie verankert. Dazu müssen Sie es beispielsweise erst mit appendChild(Knoten) anfügen. Ähnlich ist das Vorgehen, wenn Sie einen Text-Knoten einfügen möchten. Hier benötigen Sie zuerst createTextNode("Text")und dann ebenfalls appendChild(). Im folgenden Beispiel wird beides kombiniert eingesetzt, um einen Text aus einem Textfeld beim Anklicken einer Schaltfläche in einen Absatz zu verwandeln: Zuerst erstellt createElement() einen neuen Absatz: var absatz = document.createElement("P"); 11 Unter anderem liefern namespaceURI und prefix als Ergebnis immer noch null, auch wenn ein anderes Ergebnis erwartet würde.

 KOMPENDIUM 

JavaScript

325

Kapitel 10

Document Object Model Für den Absatz können Sie in Punktnotation ein Attribut definieren. Für das Beispiel bietet sich die zentrierte Ausrichtung mit align an: absatz.align = "center";

Eine Variable nimmt den Wert des Textfeldes auf: var formular = document.formular.ein.value;

Der Text-Knoten wird mit dem Text aus dem Textfeld erstellt: var text = document.createTextNode(formular); appendChild() fügt den Text-Knoten als Kind an den Absatz an: absatz.appendChild(text);

Beachten Sie, dass der Absatz bisher immer noch nicht sichtbar ist, da er nicht in der DOM-Hierarchie verankert ist. Abschließend wird der Absatz-Knoten als letzter Kind-Knoten in das -Tag eingefügt: document.body.appendChild(absatz);

Einige Knoten-Arten, beispielsweise das -Tag, haben eigene Objekte. Sie können daher direkt angesprochen werden. Der vollständige Code sieht folgendermaßen aus: Listing 10.8: Neue Elemente hinzufügen (elemente_hinzu. html)

<script language="JavaScript">
} //-->

326

 KOMPENDIUM 

JavaScript

W3C-DOM

Kapitel 10

Abbildung 10.11: Durch Anklicken wird …

Abbildung 10.12: … ein neuer Absatz hinzugefügt.

W3C-DOM und DHTML Wann sollten Sie mit dem W3C-DOM arbeiten? Hier gibt es in JavaScript große Verwirrungen bei den Begrifflichkeiten. Zum einen ähneln die »alten« DOMs der Browser dem W3C-DOM in Teilbereichen (siehe folgendes Kapitel) und zum anderen ist das W3C-DOM in verschiedenen Browsern unterschiedlich umgesetzt. Bei DHTML – der Mischung von Stylesheets, HTML und JavaScript12 – ist der Zugriff auf Browserobjekte und damit ein DOM das absolut Entscheidende. Schließlich soll sich etwas bewegen und Interaktivität möglich sein. 12 Zu dieser Definition erfahren Sie mehr in Kapitel 20 »DHTML«.

 KOMPENDIUM 

JavaScript

327

Kapitel 10

Document Object Model Das W3C-DOM können Sie dazu durchaus auch verwenden, allerdings gilt es, die Unterschiede in den Browsern zu beachten und vor allem auf ältere Browser Rücksicht zu nehmen. Dies resultiert schließlich in einer notwendigen Browserunterscheidung. Die kann zu Beginn der kompletten Website getroffen werden, indem verschiedene Browsergruppen unterschiedliche Seiten sehen dürfen. Da dies aufwändig und häufig unpräzise sein kann, können Sie auch zuerst in der DHTML-Anwendung für verschiedene Browser eigenen Code programmieren. Eine Übersicht zu diesem Thema erhalten Sie in Kapitel 12 »Browserunterscheidung«. In der Praxis wird aus dem W3C-DOM meist getElementById() verwendet. Die übrigen Methoden und Eigenschaften kommen nur selten zum Einsatz. Dieses Verhältnis wird sich allerdings vermutlich verschieben, wenn auf die vierte Browsergeneration – Netscape Navigator 4.x und Internet Explorer 4 – keine Rücksicht mehr genommen werden muss.

10.2

DOM in verschiedenen Browsern

Objektmodelle funktionieren alle ähnlich und haben dasselbe Ziel: einfachen Zugriff auf Elemente in der Webseite. Was gut klingt, ist in der Praxis nicht ganz so schön. Tabelle 10.6 zeigt die Verwendung von verschiedenen DOMs in den aktuellen Browsern.13 Tabelle 10.6: Die DOMs in den aktuellen Browsern

Object Model

Browser

DOM Level 0

ab NS 2, IE 3 v1; alle aktuellen Browser

DOM Level 0 + Bilder

ab NS 3, IE 4; alle aktuellen Browser IE 3.01 am Mac

NS4 Erweiterungen (Layer)

NS 4.x

IE 4 Erweiterungen

ab IE 4 teilweise: ab Op 6

IE 5 Erweiterungen

ab IE 5 (Unterschiede Mac und Win) teilweise: ab Op 6

13 Diese Übersicht erhebt nicht den Anspruch, vollständig oder exakt zu sein. Da sich teilweise einzelne Funktionen in ihrer Wirkung unterscheiden, wäre das vermessen. Vielmehr dient die Tabelle dem schnellen Überblick, ersetzt aber nicht das Testen in allen Browsern.

328

 KOMPENDIUM 

JavaScript

DOM in verschiedenen Browsern

Object Model

Browser

W3C-DOM Level 1

IE 6, NS 6, Moz, Op 7a; K3

Kapitel 10 Tabelle 10.6: Die DOMs in den aktuellen Browsern (Forts.)

teilweise: IE 5, 5.5 (Unterschiede Mac und Win) W3C-DOM Level 2 a.

Teilweise: IE 6, NS 6, 7, Moz, Op 7, K3

nicht unterstützt: http://www.opera.com/docs/specs/opera07/#dom

DOM Level 0 Das DOM Level 0 war der Ausgangspunkt auch für das W3C-DOM. Dort geistert häufig noch ein – nie als Standard verabschiedetes – W3C-DOM Level 0 durch die Hallen, das dem DOM Level 0 aus Netscape 2 und 3 relativ genau entspricht. Das DOM Level 0 hat sich insbesondere um die Browserobjekte verdient gemacht. Die wichtigsten heute verwendeten wie window, document und location waren damals Teil des DOM Level 0. Allerdings gab es viele Eigenschaften und Methoden für Netscape 2 und 3 bzw. Internet Explorer 3 noch nicht. Sie sollten heute nicht mehr auf die Kompatibilität mit Netscape 2 und 3 bzw. Internet Explorer 3 achten. Wenn Sie sehr einfache Seiten haben, könnte dies eine Ausnahme sein. DHTML ist beispielsweise mit den alten Browsern nicht möglich, da die einzigen interaktiven Elemente in der Seite Formularfelder, Schaltflächen und Links waren und eine Änderung von CSS-Stilen noch nicht vorgesehen war.

DOM Level 0 mit Bild-Objekt In Netscape 3 wurde das DOM Level 0 ein wenig erweitert, und zwar um das Bild-Objekt für -Tags. Vielleicht ahnen Sie es? Damit lassen sich Rollover-Effekte realisieren, wenn der Nutzer mit der Maus über das Bild fährt und dieses ausgewechselt wird. Diese neue Funktion wurde von Webentwicklern sehr geliebt. Leider gab es sie nicht im Internet Explorer 3, da dieser kurz vor Netscape am Markt war. Microsoft konnte dieses Objekt erst im Internet Explorer 4 bzw. am Macintosh in Release 3.01 einbauen.

Netscape 4.x Netscape 4.x brachte dem DOM-Modell einige Neuerungen. Zum einen wurde ein verbessertes Event-Handling-Modell verwendet. Die Mausereignisse wurden zahlreicher und Tastatureingaben konnten erstmals als Ereig-

 KOMPENDIUM 

JavaScript

329

Kapitel 10

Document Object Model nisse abgefangen werden. Zum anderen gab es die Möglichkeit, Ereignisse nicht nur bei HTML-Elementen anzugeben, sondern auf Ereignisse auch bei Objekten wie document zu warten. Der Schlüssel dazu war die captureEvents()-Methode, die gewissermaßen ein Ohr auf die Schiene legt, ob der Nutzer etwas ausführt. Neben dem Ereignismodell führte Netscape die an sich gute Idee der Layer in die Browserwelt ein. Das -Tag erlaubte, verschiedene Bildebenen übereinander zu legen und mit JavaScript flexibel zu positionieren und einund auszublenden. Das große Problem mit den Layern bestand darin, dass sie es nicht zu einem W3C-Standard brachten. Microsoft setzte nicht auf das Layer-Konzept und in allen neueren Browsern werden die Positionierung und alle Aufgaben der Layer von CSS-Befehlen übernommen, die mit JavaScript gesteuert werden können. Layer gibt es nur in Netscape 4.x. In Netscape 6 und 7 sind sie wieder rausgeflogen. Stattdessen setzt auch Netscape nun auf die Positionierung und DHTML mit CSS. Wollen Sie Netscape 4.x-kompatible DHTML-Anwendungen programmieren, kommen Sie um Layer nicht herum. Mehr Informationen dazu finden Sie in Kapitel 20 »DHTML«.

Internet Explorer 4 Der Internet Explorer 4 machte einen großen Sprung nach vorne. Es war nun möglich, alle Elemente einer Webseite per Skript anzusprechen. Dazu diente allerdings leider kein Standard, sondern das »Sammelbecken«14 document.all. Es enthält alle Elemente einer Webseite. Soll Ihr DHTML also Internet Explorer 4-kompatibel sein, müssen Sie mit document.all arbeiten. Da dies allerdings auch dem Opera in den früheren Versionen vor 7 hilft, ist dies auch bei kleineren DHTML-Anwendungen durchaus sinnvoll. Mehr dazu in Kapitel 20 »DHTML«. Das Event-Handling-Modell des Internet Explorers 4 und auch der späteren Versionen unterscheidet sich allerdings von dem des Netscapes (siehe Netscape 4.x). Die Ereignisse sind alle Teil des window-Objekts. Sobald ein Nutzer beispielsweise auf eine Schaltfläche klickt, pflanzt sich das Ereignis bis hoch in das window-Objekt fort. Dies bezeichnet man als Event Bubbling. Netscape setzt dagegen auf das Hören auf Ereignisse ausgehend vom obersten Objekt.15 14 Der programmiertechnisch korrekte Begriff ist Kollektion oder Collection. 15 Dies wird auch als Top-down-Ansatz bezeichnet.

330

 KOMPENDIUM 

JavaScript

DOM in verschiedenen Browsern

Kapitel 10

Als dritte große Änderung (für Programmierer
) im Internet Explorer 4 wurde der CSS-Standard Version 1 zumindest größtenteils umgesetzt. Hier können Sie sich grob merken: Der Internet Explorer 4 setzt einen Großteil des Standards um, der Netscape Navigator 4.x etwas weniger. Einzelne Anwendungen zum Thema finden Sie ebenfalls in Kapitel 20 »DHTML«.

Internet Explorer 5 Der Internet Explorer 5 ist insbesondere in einer Hinsicht ein schwieriger Geselle. Auf dem Macintosh ist für ihn ein eigenes Entwicklerteam zuständig. Daher wurden dort beispielsweise die Fähigkeiten des W3C-DOM Level 1 etwas früher integriert. Aus Sicht des JavaScript- bzw. JScript-Interessierten brachte der Internet Explorer 5 und noch einmal in stärkerem Maße die Zwischenversion 5.5 viele neue Eigenschaften und Methoden für die bestehenden Objekte. Darunter sind zwar auch viele proprietäre – also dem Internet Explorer vorbehaltene – Eigenschaften, aber auch einige, die ihn näher an die Standards rücken. Darüber hinaus wurden ebenfalls zwei grundlegende Konzepte neu eingeführt: Verhalten oder auch DHTML Behavior. Dies sind kleine Code-Schnipsel, die extern gespeichert werden und einem beliebigen HTML-Element auf der Webseite Funktionen hinzufügen. HTML-Anwendungen (HTML Applications oder HTA). Sie dienen dazu, XML-Dateien mit der Dateiendung .hta in den Browser einzubinden.16 Diese speziell auf den Internet Explorer beschränkten Themen behandelt dieses Buch aus zwei Gründen nicht: –

Es ist nicht genug Platz vorhanden. Andere – standardkonforme oder Browser-übergreifende – Themen sind wichtiger.

–

Da die Erweiterungen Internet Explorer-spezifisch sind, könnten sie höchstens in einem Intranet zum Einsatz kommen. Allerdings können die Nutzer auch dort über eigene und andere Browser verfügen.

16 Weiterführende Informationen finden Sie unter http://msdn.microsoft.com/library/default. asp?url=/workshop/author/hta/overview/htaoverview.asp.

 KOMPENDIUM 

JavaScript

331

Kapitel 10

Document Object Model

W3C-DOM Level 1 Das DOM Level 1 ist in der sechsten Generation der großen Browser und auch bei den wichtigsten kleineren Konkurrenten – Mozilla, Konqueror 3 und Opera 7 – bereits weitgehend integriert. In Kapitel 20 »DHTML« arbeiten die Beispiele sehr fleißig damit.

W3C-DOM Level 2 Die Level 2-Unterstützung in den Browsern ist noch sehr unterschiedlich. Wo W3C-DOM Level 1 noch ohne Event-Handling auskam, ist es nun Teil des Standards geworden. Allerdings vertreten die Browser immer noch teilweise eigene Ansätze.

10.3

Browserobjekte

Die Browserobjekte sind der wichtigste Teil des DOM. Der Zugriff über Knoten und die Hierarchie ist zwar manchmal sinnvoll, in den meisten Fällen benötigen Sie aber die Eigenschaften und Methoden der Browserobjekte. Eines der wichtigsten Browserobjekte document haben wir bereits ausführlich verwendet. Dieses Objekt ist der DOM-Hierarchie übergeordnet. Eine einfache Ausgabe in JavaScript funktioniert beispielsweise mit diesem Objekt: document.write("Ausgabe");

Die folgenden Abschnitte geben Ihnen einen Überblick über die verschiedenen Browserobjekte. Im zweiten Teil dieses Buches, der mit »Webanwendungen« überschrieben ist, werden Sie diese Browserobjekte in allen erdenklichen Formen einsetzen. Die hier vorgestellten Browserobjekte gibt es auch in älteren Browsern. Die hier verwendeten Beispiele sind mit allen in diesem Buch getesteten Browser kompatibel.

window Das window-Objekt steht für das Browserfenster. Es ist für alle Elemente im Fenster das hierarchisch übergeordnete Objekt, also auch für das Dokument und damit das document-Objekt.

332

 KOMPENDIUM 

JavaScript

Browserobjekte

Kapitel 10

Um das document-Objekt anzusprechen, müssten Sie also theoretisch window.document

schreiben. Dies ist allerdings in der Praxis nicht notwendig. Sie müssen window nur dann davor schreiben, wenn Sie direkt eine Eigenschaft oder Methode aus dem window-Objekt verwenden. Die folgenden Anwendungsmöglichkeiten können nur einen kurzen Ausblick auf die folgenden Kapitel geben. Sie können mit dem window-Objekt Text in der Statusleiste ausgeben, eine Ausgabe in einem Warnfenster ausgeben; dies haben Sie bereits gesehen: window.alert("Ausgabe"); Abbildung 10.13: Eine Ausgabe mit window.alert

Statt window.alert können Sie window auch weglassen, also nur alert schreiben. ein neues Browserfenster öffnen oder schließen. <script language="JavaScript"> Fenster öffnen

 KOMPENDIUM 

JavaScript

333

Kapitel 10

Document Object Model

Abbildung 10.14: Ein neues Fenster mit den angegebenen Maßen wurde geöffnet.

Sie finden das window-Objekt hauptsächlich in Kapitel 14 »Navigationshilfen« und Kapitel 15 »Fenster«. window.frame Ein Unterobjekt von window ist window.frame. Es enthält den direkten Zugriff auf einzelne Frames. Ebenfalls per JavaScript steuerbar sind die so genannten <iframe>-Elemente. Sie sind zwar in sich abgeschlossene Frames, können aber auf der Seite flexibel positioniert werden; sie fließen also im HTML-Fluss mit. In Kapitel 18 »Frames« steht dieses Objekt im Mittelpunkt.

navigator Das navigator-Objekt wird vor allem zur Browsererkennung benötigt. Es liefert interessante Informationen über den Browser des Nutzers.

334

 KOMPENDIUM 

JavaScript

Browserobjekte

Kapitel 10

Mehr über die Browsererkennung mit dem navigator-Objekt erfahren Sie in Kapitel 12 »Browserunterscheidung« .

document Das document-Objekt ist allgegenwärtig. Ob für eine einfache Ausgabe mit document.write oder bei der Methode getElementById(), überall ist document als oberste Instanz der Objekt-Hierarchie mit von der Partie. Andere Objekte wie das form-Objekt sind document untergeordnet. Das document-Objekt verfolgt Sie im gesamten Buch. In der Referenz finden Sie seine Eigenschaften und Methoden vollständig dokumentiert. Ein Beispiel in diesem Kapitel ist Listing 10.8.

form Das form-Objekt repräsentiert alle Formulare und ihre Elemente. Sie können auf die Elemente entweder direkt mit Formularnamen und dann mit dem Elementnamen zugreifen oder Sie verwenden die Kollektion forms[]. Den Direktzugriff finden Sie in verschiedenen Beispielen in den vorangegangenen Kapiteln. Der Zugriff über die Kollektion forms[] erfolgt über den Namen des Formulars in eckigen Klammern, also forms[Formularname]. Zusätzlich werden alle Formulare in der Kollektion forms[] mit Index gespeichert; das erste Formular hat beispielsweise den Index 0. Der Zugriff sieht dann wie folgt aus: forms[0].Formularelement

Kapitel 16 »Formulare« beschäftigt sich ausführlich mit diesem Thema und dem JavaScript-Zugriff auf die Formulare.

history Das history-Objekt repräsentiert die History des Browsers, also die zuvor besuchten Seiten. Das folgende Beispiel verwendet die Methode back() des history-Objekts, um die ZURÜCK-Schaltfläche des Browsers als normalen Link zu simulieren: <script language="JavaScript">
 KOMPENDIUM 

JavaScript

Listing 10.10: Die ZURÜCK-Schaltfläche mit dem history-Objekt (history_back.html)

335

Kapitel 10

Document Object Model window.history.back();

} //--> Zurück Abbildung 10.15: Ein Klick auf Zurück …

Abbildung 10.16: … und Sie landen dort, wo Sie zuletzt gesurft sind.

In Kapitel 14 »Navigationshilfen« finden Sie weitere Details.

location Das location-Objekt enthält die aktuelle URL der Seite. Mit der Eigenschaft href können Sie außerdem auf andere Adressen weiterverweisen.

336

 KOMPENDIUM 

JavaScript

Browserobjekte

Kapitel 10

<script language="JavaScript">
Listing 10.11: Mit der hrefEigenschaft des location-Objekts umleiten (location_href.html)

} //--> Auf Markt+Technik umleiten Abbildung 10.17: Die Umleitung führt …

Abbildung 10.18: … auf die Markt+TechnikHomepage

Wie Sie zeitversetzte Umleitungen und Umleitungen beim Laden der Seite realisieren, erfahren Sie in Kapitel 14 »Navigationshilfen«.

 KOMPENDIUM 

JavaScript

337

11

Ereignisse und Event-Handler

Bei einem Ereignis geschieht etwas. Diese etwas laxe Beschreibung trifft trotz allem den Kern der Sache. Ein Ereignis ist, wenn der Nutzer auf eine Schaltfläche klickt, wenn er über ein Element fährt oder wenn die Seite geladen wird. Eine interaktive Anwendung reagiert auf diese Ereignisse.1 Um ein Ereignis abzufangen, verwenden Sie so genannte Event-Handler. Bei einem Event-Handler wird, meist in einer Funktion, festgeschrieben, was geschehen soll. In den vorangegangenen Kapiteln haben Sie das schon sehr häufig gesehen. Um Ereignisse korrekt abzufangen, benötigt jeder Browser intern ein Ereignis-Modell, das natürlich auch bestimmt, welche Zugriffsmöglichkeiten Ihnen zur Verfügung stehen. Folgende Ereignis-Modelle gibt es: Das Netscape Navigator-Modell. Eingeführt in Version 4.x des Browsers. Das Internet Explorer-Modell. Eingeführt wurde es in Version 4, verbessert in Version 5 des Browsers. Das W3C-DOM-Modell, das versucht, die beiden Modelle zu verbinden. Integriert wurde es erstmals in Netsape 6 und Mozilla. Das »alte« Ereignis-Modell, das auch in älteren Browsern funktioniert. Es ermöglicht, dass Event-Handler in HTML-Tags den Aufruf von Funktionen erlauben. Dieses Kapitel stellt zuerst die drei Modelle in der Theorie vor und zeigt dann, wie sich die Ereignisse anwenden lassen. Hier finden Sie auch das alte Ereignis-Modell.

1

Der Begriff Ereignis und sein englischsprachiges Pendant Event wird hier synonym verwendet.

 KOMPENDIUM 

JavaScript

339

Kapitel 11

Ereignisse und Event-Handler

11.1

Ereignis-Modelle

Die Ereignis-Modelle wurden in der vierten Version der beiden großen Browser Internet Explorer und Netscape Navigator geschaffen, um die bisher beschränkten Möglichkeiten2 mit einfachen Event-Handler für Objekte zu erweitern. In den Ereignis-Modellen sind vor allem zwei Dinge hinzugekommen, die auch gleichzeitig die Unterschiede zwischen allen drei Ereignis-Modellen darstellen: Ereignisse lassen sich nicht mehr nur bei einem Ereignis abfangen, sondern wandern über das DOM.3 Das heißt, ein Ereignis ist nicht nur beim Objekt abfangbar, sondern auch bei anderen Objekten der DOMHierarchie. Ereignisse sind Objekte mit Eigenschaften und Methoden.

Netscape Navigator-Modell Der Netscape Navigator verwendet das Event-Capturing-Prinzip, um Ereignisse abzufangen. Das heißt, das Ereignis beginnt von oben in der DOMHierarchie und wird durchgereicht. Von jedem Objekt kann das Ereignis abgefangen werden. Hat allerdings das window-Objekt bereits das Ereignis abgefangen, wird das Ereignis nicht zum document-Objekt weitergeleitet. Abbildung 11.1: Event-Capturing

Ereignis window document layer

2 3

340

Siehe Kapitel 11.2, Abschnitt »Die Standardmethoden«. Dieser Vorgang heißt auch Event Propagation.

 KOMPENDIUM 

JavaScript

Ereignis-Modelle

Kapitel 11

Event-Capturing Für das Event-Capturing muss das Ereignis zuerst mit der Methode captureEvents(Ereignis) abgefangen werden. Diese Methode folgt einer eindeutigen Syntax: Objekt.captureEvents(Event.EREIGNIS);

Für das Ereignis einer Mausbewegung sähe das so aus: document.captureEvents(Event.MOUSEMOVE);

In einem captureEvents()-Aufruf lassen sich auch mehrere Ereignisse mit dem bitweisen Operator für das logische ODER abfangen: document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);

Das Ereignis in captureEvents() muss immer groß geschrieben werden und besteht aus dem Ereignisnamen ohne on. Event immer mit großem Anfangsbuchstaben und dann klein. Soll das »Ausschau-halten« nach einem Ereignis wieder aufgehoben werden, verwenden Sie die Methode releaseEvents(). document.releaseEvents(Event.MOUSEMOVE);

Es reicht allerdings nicht, das Ereignis abzufangen. Danach muss bei dem Ereignis noch etwas geschehen: Sie rufen eine Funktion für ein Objekt bei dem Ereignis auf: Objekt.Ereignis = Funktion;

Die Funktion wird immer ohne Klammern geschrieben, da sie hier ein Event-Handler ist. In einem Beispiel sieht das so aus: document.onmousemove = bewegen;

Die Funktion übernimmt als Parameter dann das Ereignis. Dies wird meist mit dem Buchstaben e geschrieben. function bewegen(e) { Anweisungen; }

Neben den zwei wichtigen Methoden zum Abfangen bzw. Freigeben von Events gibt es noch zwei weitere.

 KOMPENDIUM 

JavaScript

341

Kapitel 11

Ereignisse und Event-Handler routeEvent(e) leitet ein Ereignis in der DOM-Hierarchie weiter nach unten. Das Ereignis muss als Parameter angegeben sein. routeEvent() wird meist in der Funktion, die das Ereignis übernimmt, verwendet. document.routeEvent(e) handleEvent(e) gibt es nur im Navigator 4.x. Die Methode leitet das

Ereignis nicht weiter, sondern auf ein anderes Objekt um. Das Objekt und sein Event-Handler übernehmen die Weiterverarbeitung. Objekt.handleEvent(e)

Das Abfangen von Ereignissen mit captureEvents() ist in den meisten Browsern außer dem Internet Explorer möglich. Tabelle 11.1: Event-CapturingMethoden im Navigator-Modell

NS4x

NS6

NS7

captureEvents()







releaseEvents()




routeEvent()




handleEvent()




IE4 IE5

IE5.5 IE6

O7

M1

K3





































Der Konqueror und der Safari besitzen eine Besonderheit: sie kennen document.captureEvents() nicht, sondern nur window.captureEvents().

event-Objekt Ein Ereignis wird im Event-Modell des Netscape Navigator an die Funktionsreferenz, die beim Ereignis aufgerufen ist, übergeben. Meist verwendet man hierzu den Parameter e. Listing 11.1: Das onclickEreignis wird abgefangen (klick.html)

<script language="JavaScript">
} function klicken(e) { alert("Geklickt"); } //-->

342

 KOMPENDIUM 

JavaScript

Ereignis-Modelle

Kapitel 11



Das Ereignis lässt sich in der Funktion auch verwenden. Sie greifen darauf einfach über den Parameter zu: function klicken(e) { alert(e.type); }

Listing 11.2: Im Netscape Navigator-Modell auf das event-Objekt zugreifen (e_objekt.html) Abbildung 11.2: Netscape 4 gibt hier den Ereignis-Typ zurück.

Mit dem Schlüsselwort event können Sie auch in einem Event-Handler als HTML-Attribut ein event-Objekt übergeben. onclick="klicken(event)"

Das event-Objekt im Netscape Navigator 4.x definiert noch einige weitere Eigenschaften. Verwirrend ist hier, dass viele dieser Eigenschaften in das neue Ereignis-Modell für Netscape 6 und 7 und Mozilla übernommen wurden. Auch Opera 7, der das W3C-DOM-Ereignis-Modell unterstützt, kennt einige dieser Eigenschaften.

 KOMPENDIUM 

JavaScript

343

Kapitel 11 Tabelle 11.2: Wichtige Eigenschaften des event-Objekts im Netscape Navigator 4.x

Ereignisse und Event-Handler

Eigenschaft

Beschreibung

which

Die gedrückte Maustaste: 1: die linke Maustaste 2: die mittlere, falls vorhanden 3: die rechte Maustaste, falls vorhanden. Bei Tastaturereignissen die gedrückte Taste! Koordinaten von Layern in Pixeln. Beschränkt auf Netscape 4.x, da nur dieser Layer unterstützt.

layerX layerY

Koordinaten im Dokument in Pixeln, an denen das Ereignis abgefangen wurde. Dies wird meist für Mausereignisse benötigt.

pageX pageY

Koordinaten auf dem Bildschirm in Pixeln, an denen das Ereignis auftrat.

screenX screenY target

Enthält eine Referenz auf das Ziel des Ereignisses, beispielsweise eine Grafik, die der Nutzer mit der Maus überquert hat.

type

Art des Ereignisses.

Internet Explorer-Modell Der Internet Explorer besitzt seit Version 4 ein eigenes Ereignis-Modell, das dem Netscape-Modell diametral entgegensteht. Hier tritt das Ereignis beim Objekt auf und wird dann in der DOM-Hierarchie nach oben durchgereicht. Abbildung 11.3: Event-Bubbling

Ereignis document body link

344

 KOMPENDIUM 

JavaScript

Ereignis-Modelle

Kapitel 11

Event-Bubbling Das Event-Bubbling-Konzept des Internet Explorer endet beim windowObjekt. Welche Objekte auf dem Weg nach oben beteiligt sind, können Sie sich einfach anhand der DOM-Architektur vergegenwärtigen. Für einen Link sind das auf jeden Fall link, body und document.4 Für ein Formularelement kommt noch das Formular selbst hinzu. Das Abfangen von Ereignissen ist sehr einfach: Objekt.Ereignis = Funktion;

Also beispielsweise: document.onclick = klicken;

Das kommt Ihnen bekannt vor? Richtig, das entspricht dem Aufruf eines Event-Handlers im Netscape-Modell. Allerdings fehlt beim Internet Explorer das Abfangen des Ereignisses, da es – einfach ausgedrückt – auf dem Weg von unten nach oben sowieso vorbeischaut. event-Objekt Das event-Objekt des Internet Explorer unterscheidet sich gravierend von dem des Netscape Navigator. Das Objekt ist ein Unterobjekt von window, kann also mit window.event

oder nur event

adressiert werden und steht immer bei einem Ereignis-Aufruf zur Verfügung. Sie müssen es nicht als Parameter übergeben. Das folgende Beispiel führt zum selben Ziel wie Listing 11.2. Beachten Sie aber genau die Unterschiede. Wenn Sie diese erkannt haben, sind Ihnen die Grundlagen der beiden Ereignis-Modelle klar geworden.

4

Eine Sonderrolle spielt das -Tag: Wenn Sie darauf mit einer ID zugreifen, können Sie im Internet Explorer sogar unter Windows Ereignisse abfangen. Am Mac ist das nicht möglich und in der Praxis auch nicht sinnvoll.

 KOMPENDIUM 

JavaScript

345

Kapitel 11

Ereignisse und Event-Handler

Listing 11.3: Das event-Objekt im Internet Explorer (e_objekt_ie.html)

<script language="JavaScript">
} //-->

Die Eigenschaft type gibt es sowohl für das event-Objekt von Netscape als auch für window.event im Internet Explorer. Darin erschöpfen sich allerdings die Gemeinsamkeiten. Wie Sie mit den Unterschieden der beiden Ereignis-Modelle und dem eventObjekt zurechtkommen, zeigt der Abschnitt »Browserübergreifend«. Die folgende Tabelle gibt eine Übersicht über die Eigenschaften des eventObjekts im Internet Explorer. Tabelle 11.3: Wichtige Eigenschaften des window.eventObjekts im Internet Explorer

Eigenschaft

IE Version

Beschreibung

cancelBubble

Ab 4

Beendet das Bubbling für ein Ereignis, wenn es auf true gesetzt wird. Standardeinstellung ist false. Dies ist besonders wichtig, um zu verhindern, dass oben in der Hierarchie auf ein Ereignis in einem Objekt reagiert werden soll.

button

Ab 4

Gibt an, welche Maustaste gedrückt wurde: 0: keine 1: die linke 2: die rechte 3: links und rechts 4: die mittlere 5: die linke und die mittlere 6: die mittlere und die rechte 7: alle drei.

toElement

346

Ab 4

Enthält das Objekt, über dem die Maus bei dem Ereignis war.

 KOMPENDIUM 

JavaScript

Ereignis-Modelle

Kapitel 11

Eigenschaft

IE Version

Beschreibung

wheelDelta

Ab 6

Enthält die Strecke, die der Nutzer das Rad an der Maus gedreht hat. Die Zahl wird in Vielfachen von 120 angegeben und kann positiv oder negativ sein. Sie korrespondiert mit dem Ereignis onmousewheel.

X

Ab 4

Die Position des Mauszeigers relativ zu einem übergeordneten Objekt.

Ab 4

Die Koordinaten innerhalb des sichtbaren Dokumentbereichs in Pixeln. Mehr zu den Koordinaten erfahren Sie in Kapitel 20 »DHTML«.

Ab 4

Koordinaten innerhalb des jeweiligen Objekts in Pixeln.

Ab 4

Koordinaten auf dem Bildschirm in Pixeln, an denen das Ereignis auftrat.

keyCode

Ab 4

Liefert den Code für die beim Ereignis gedrückte Taste. Mehr hierzu in Kapitel 11.4 »TastaturEreignisse«.

altKey

Ab 4

(Alt) ist gedrückt (true) oder nicht (false)

ctrlKey

Ab 4

(Alt) ist gedrückt (true) oder nicht (false).

repeat

Ab 5

Gibt true zurück, wenn ein onkeydown-Ereignis öfter ausgeführt wurde. Dies ist beispielsweise bei der Spieleentwicklung mit JavaScript von Bedeutung.

srcElement

Ab 4

Enthält das Element, das das Ereignis ausgelöst hat.

srcFilter

Ab 4

Y clientX clientY offsetX offsetY screenX screenY

Tabelle 11.3: Wichtige Eigenschaften des window.eventObjekts im Internet Explorer (Forts.)

Enthält das Filter-Element, das das Ereignis onfilterchange ausgelöst hat.

type

Ab 4

Art des Ereignisses.

W3C-Ereignis-Modell Das W3C-Ereignis-Modell5 verbindet Bubbling mit Event-Capturing. Bubbling ist standardmäßig aktiviert. Das heißt, ein einfacher Aufruf des Ereignisses reicht aus: 5

Das Ereignis ist Teil des DOM-2-Standards, der von den Browsern, namentlich dem IE 6, schon besser unterstützt wird als das zugehörige Ereignis-Modell (das gar nicht unterstützt wird).

 KOMPENDIUM 

JavaScript

347

Kapitel 11

Ereignisse und Event-Handler document.onmousemove = bewegen;

Im Gegensatz zum Bubbling im Internet Explorer reicht das W3C-EreignisModell in Netscape 6, 7 und Mozilla bis zum window-Objekt. Die Schreibweise window.onmousemove = bewegen;

ist also auch möglich. Der Opera 7 kennt dagegen nur maximal document, weswegen Sie auf window verzichten sollten. Event-Listener Das zweite interessante Konzept des W3C-Ereignis-Modells ist die der Event-Listener. Mit einem Event-Listener wird ein Ereignis ähnlich dem Event-Capturing abgefangen. Die zugehörige Methode addEventListener() bietet allerdings wesentliche Verbesserungen: document.addEventListener("Ereignis", Funktion, Modell) addEventListener() lässt sich jedem beliebigen Objekt zuweisen. Die Methode

gibt ein Ereignis an6, auf das »gehört« werden soll. Tritt es ein, ruft die Methode die Funktion auf (ohne Klammern, da Funktionsreferenz). Mit dem Boolean-Modell geben Sie an, welches Ereignis-Modell zur Verwendung kommt. true steht für Event-Capturing, false für Event-Bubbling. Das folgende Beispiel zeigt addEventListener() im Einsatz: Listing 11.4: Event-Listener im Praxiseinsatz (w3c.html)

<script language="JavaScript">
} function klicken(e) { alert(e.type); } //-->

6

348

In Kleinbuchstaben ohne on.

 KOMPENDIUM 

JavaScript

Ereignis-Modelle

Kapitel 11

Wollen Sie einen Event-Listener wieder aufheben, verwenden Sie removeEventListener("Ereignis", Funktion, Modell) mit denselben Parametern wie vorher bei addEventListener(), da sonst die Zuordnung verloren gehen kann. Die folgende Tabelle gibt nicht nur einen Überblick, welcher Browser die beiden Methoden unterstützt, sondern zeigt auch, welcher bisher das W3CEreignis-Modell unterstützt. NS4x

NS6

NS7

addEventListener()




removeEventListener()




a.

IE4 IE5

IE5.5 IE6

O7

M1

K3





a



















Tabelle 11.4: addEventListener() und removeEventListener()

Nur bis document, nicht window.

event-Objekt Wie Sie im Beispiel aus Listing 11.4 gesehen haben, wird im W3C-Verfahren das Ereignis im Gegensatz zum Internet Explorer-Modell als Parameter übergeben. Das Ereignis selbst unterscheidet sich deutlich von dem bei Netscape 4.x. Einige Eigenschaften wurden allerdings aus Kompatibilitätsgründen beibehalten. Sie sind in der folgenden Tabelle mit einem Sternchen gekennzeichnet. Eigenschaft

Beschreibung

cancelBubble

Hält den Bubbling-Vorgang an (true). Standard ist false.

bubbles

Gibt an, ob ein Ereignis-Bubbling aktiv ist (true) oder nicht (false).

button

Die gedrückte Maustaste:

Tabelle 11.5: Wichtige Eigenschaften des event-Objekts beim W3C-DOMModell (* schon in Netscape 4.x vorhanden)

1: die linke Maustaste 2: die mittlere, falls vorhanden 3: die rechte Maustaste, falls vorhanden.a layerX layerY* pageX pageY* screenX screenY*

Koordinaten von Layern in Pixeln. Beschränkt auf Netscape 4.x, da nur dieser Layer unterstützt. Koordinaten im Dokument in Pixeln, an denen das Ereignis abgefangen wurde. Dies wird meist für Mausereignisse benötigt. Koordinaten auf dem Bildschirm in Pixeln, an denen das Ereignis auftrat.

 KOMPENDIUM 

JavaScript

349

Kapitel 11 Tabelle 11.5: Wichtige Eigenschaften des event-Objekts beim W3C-DOMModell (* schon in Netscape 4.x vorhanden) (Forts.)

Ereignisse und Event-Handler

Eigenschaft

Beschreibung

charCode

Zeichencode der auf der Tastatur gedrückten Taste.

keyCode

Code der gedrückten Taste.

altKey

(Alt) ist gedrückt (true) oder nicht (false).

ctrlKey

(Ctrl) ist gedrückt (true) oder nicht (false).

shiftKey

(Shift) ist gedrückt (true) oder nicht (false).

target*

Enthält eine Referenz auf das Element, bei dem das Ereignis auftrat.

currentTarget

Enthält eine Referenz auf das Element, bei dem der Event-Listener definiert wurde.

type*

Art des Ereignisses.

timeStamp

Zeitpunkt des Ereignisses.

view

Enthält eine Referenz auf das window-Objekt, in dem das Ereignis aufgetreten ist.

a.

Tabelle 11.6: Browserkompatibilität der Eigenschaften

350

Opera 7 erkennt die Buttons hier mit anderen Nummern. Siehe hierzu Kapitel 22 »JavaScript und Sicherheit« und dort im Speziellen den Abschnitt »Rechte Maustaste unterbinden«.

NS4x

NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3

cancelBubble













bubbles













button













layerX layerY







pageX pageY













screenX screenY













charCode







keyCode













altKey
















ctrlKey
















shiftKey




























 KOMPENDIUM 

JavaScript

Ereignisse anwenden

Kapitel 11

NS4x

NS6

NS7

target




currentTarget

IE4 IE5

IE5.5 IE6

O7

M1

K3




























type
















timeStamp
















view
















Tabelle 11.6: Browserkompatibilität der Eigenschaften (Forts.)

Neben den Eigenschaften gibt es noch zwei Methoden. Methode

Beschreibung

preventDefault()

Stoppt die Standard-Aktion für einen Browser. Unterbindet bei einem Event mit Event-Listener also das Ausführen der Funktion.

stopPropagation()

Beendet das Bubbling und Event-Capturing mit Event-Listener.

Tabelle 11.7: Die Methoden des event-Objekts beim W3C-Modell.

Die Methoden sind in allen W3C- Modell-konformen Browsern vorhanden.

11.2

Ereignisse anwenden

Um Ereignisse für alle Browser anzuwenden, müssen nicht unbedingt die Funktionen der Ereignis-Modelle genutzt werden. Die Standardmethoden sowie den Hinweis auf Beispiele in diesem Buch finden Sie im nächsten Abschnitt. Wie Sie die vielen Möglichkeiten der drei Ereignis-Modelle in der Praxis auf einen Nenner bringen, zeigt der Abschnitt »Bowserübergreifend«. Den Abschluss bilden einige Besonderheiten beim Internet Explorer.

Die Standardmethoden Natürlich bietet die Arbeit mit den Ereignis-Modellen viel mehr Möglichkeiten. In Kapitel 20 »DHTML« werden Sie einige Beispiele sehen, die ohne Ereignis-Modell nicht möglich wären. Für viele einfache Aufgaben reichen allerdings die in allen Browsern vorhandenen Optionen zur Anwendung von Ereignissen aus: Ereignisse als HTML-Attribut. In der Praxis sicherlich am häufigsten anzutreffen, da hier der Event-Handler direkt als Attribut einem HTML-Element zugewiesen wird.

 KOMPENDIUM 

JavaScript

351

Kapitel 11

Ereignisse und Event-Handler Sie können die Ereignisse auch direkt im Code einem Element zuweisen. Im folgenden Beispiel weist das Skript der Schaltfläche ein onclickEreignis zu:

Listing 11.5: Ein Ereignis im Skript setzen (ereignis_code.html)

<script language="JavaScript">
} function ausgeben() { alert("Ausgabe"); } //-->

Der Funktionsaufruf erfolgt ohne runde Klammern. Als Parameter könnten Sie zusätzlich ein event-Objekt übergeben, dessen Eigenschaften Ihnen dann zur Verfügung stehen. Rückgabe mit return Bei einigen Ereignissen können Sie mit return true oder false zurückgeben und so eine Reaktion erzwingen. Besonders häufig gebraucht wird dies bei onreset und onsubmit in Formularen, wie ein einfaches Beispiel mit onreset aus Kapitel 16 »Formulare« zeigt. Hier wird der Nutzer gefragt, ob er ein Formular wirklich löschen möchte: Listing 11.6: Rückgabewerte bei Ereignissen (input_reset.html aus code\kap16)

<script language="JavaScript">
//-->

352

 KOMPENDIUM 

JavaScript

Ereignisse anwenden

Kapitel 11

Browserübergreifend Der Ansatz, mit verschiedenen Ereignis-Modellen Browser-übergreifend zu arbeiten, ist nicht allzu kompliziert. Ein einfaches Beispiel zeigt dies7: Sie prüfen über das Browserobjekt, das Sie danach verwenden, ob Capturing unterstützt wird. if(document.captureEvents) { document.captureEvents(Event.CLICK); }

Anschließend sieht der Funktionsaufruf bei dem Ereignis in allen Browsern gleich aus: document.onclick=ausgeben;

Die nächste Unterscheidung müssen Sie in den meisten Beispielen jetzt treffen, wenn es um die Verwendung des event-Objekts geht. Hier bietet sich eine Unterscheidung mit document.all an, da der Internet Explorer ein komplett anderes System einsetzt: function ausgeben(e) { if (document.all) {

if(event.srcElement.type == "button") alert("Button im IE angeklickt"); } else {

Listing 11.7: Browserunterscheidung beim eventObjekt (browseruebergreifend.html)

if(e.target.type == "button") alert("Button angeklickt"); }

}

Die obigen Zeilen prüfen die type-Eigenschaft und geben nur für alle Schaltflächen etwas aus. Analysiert man die Fallunterscheidung auch in den exotischeren Browsern, stellt sich heraus, dass der Konqueror das event-Objekt des Internet Explorer und dessen Eigenschaft srcElement verwendet und kennt. Der Grund dafür liegt darin, dass er document.all unterstützt. Allerdings kommt er genauso mit der Netscape- bzw. W3C-Variante klar.

7

Komplexere Beispiele finden Sie in Kapitel 20 »DHTML«

 KOMPENDIUM 

JavaScript

353

Kapitel 11

Ereignisse und Event-Handler In Kapitel 20 »DHTML« finden Sie noch weitere detaillierte Browserunterscheidungen bei Ereignissen. Im Einzelfall gilt allerdings immer, die Modelle parat zu haben (siehe oben) und zu testen.

Besonderheiten des Internet Explorer Der Internet Explorer kocht bei Ereignissen einige besondere Süppchen, die hier nur kurz vorgestellt werden, da sie für die Praxis nicht allzu viel Relevanz besitzen: Im <script>-Block kann mit dem for-Attribut ein Element festgelegt werden, mit event ein Event-Handler. Ein Beispiel dazu finden Sie in Kapitel 2.5 im Abschnitt »<script for>«. Da diese Variante den Code im <script>-Block bei Browsern, die <script for> nicht unterstützen, sofort ausführt, ist sie in der Praxis ungeeignet. Die Methode attachEvent("Ereignis", Funktion) fügt einem Objekt ein Ereignis hinzu, detachEvent("Ereignis", Funktion) entfernt es wieder. Als Rückgabewert erhält attachEvent() einen Boolean, ob die Anbindung geklappt hat. Allerdings sind die Methoden auf den Internet Explorer ab Version 5 beschränkt und entsprechen leider nicht dem W3C-Standard. Objekt.attachEvent("onclick", ausgabe); setCapture() dient dazu, alle Maus-Ereignisse für ein Objekt (onmousedown, onmouseup, onmousemove, onmouseover, onmouseout, onclick und ondblclick) abzufangen. Sie sehen ein Event-Capturing-Ansatz im Internet Explorer, allerdings nur ab Version 5. Das Gegenstück ist releaseCapture(), es hebt das Capturing wieder auf. Da immer nur eine Capturing-Aktion zur gleichen Zeit stattfinden kann, muss releaseCapture()

nicht mehr an das Objekt gebunden sein, sondern lässt sich auch als document.releaseCapture() verwenden.

11.3

Ereignisse

In älteren Browsern waren Ereignisse immer an bestimmte Elemente der Seite gebunden. Dies hat sich mit Internet Explorer 4 und Netscape Navigator 6 geändert. Mittlerweile gibt es Ereignisse für fast alle Elemente. Vor allem der Internet Explorer besitzt eine geradezu unüberschaubare Liste an Ereignissen. Um ein wenig Ordnung in das Chaos zu bringen, fasst die folgende Tabelle die wichtigsten Ereignisse zusammen. Die Bindung an bestimmte Objekte wird jeweils für den Netscape Navigator 4 und alle späteren Browser (»And.« für andere Browser) angegeben. Fehlt eine Angabe des Netscape Navigator 4.x, gibt es das Ereignis für diesen Browser noch nicht.

354

 KOMPENDIUM 

JavaScript

Ereignisse

Ereignis

Kapitel 11

Bindung NN4/And. (IE4+, NN 6+ etc)

Beschreibung

NN4: Link, Buttons

beim Mausklick

Tabelle 11.8: Wichtige Ereignisse in JavaScript

Maus onclick

And.: alles ondblclick

NN4: Link

beim Doppelklick

And.: alles onmousedown

NN4: Link, Buttons

beim Drücken der Maustaste

And.: alles onmouseup

NN4: Link, Buttons, Layer

beim Loslassen der Maustaste

And.: alles onmouseover

NN4: Link, Bilder, Layer And.: alles

onmouseout

onmousemove

NN4: Link, Bilder, Layer

beim Bewegen des Mauszeigers über ein Element

And.: alles

beim Verlassen eines Elements mit dem Mauszeiger

NN4: Event-Capturing

beim Bewegen der Maus

And.: alles Tastatur onkeypress

NN4: Textfelder

beim Drücken einer Taste

And.: Textfelder onkeydown

onkeyup

NN4: Textfelder And.: Textfelder

beim Herunterdrücken einer Taste

NN4: Textfelder

beim Loslassen einer Taste

And.: Textfelder Ändern onchange

NN4: Auswahlliste, Textfelder

beim Ändern eines Elements

And.: Formularelemente Formulare onsubmit

NN4: Formulare

beim Übertragen

And.: Formulare onreset

NN4: Formulare

beim Zurücksetzen

And.: Formulare

 KOMPENDIUM 

JavaScript

355

Kapitel 11 Tabelle 11.8: Wichtige Ereignisse in JavaScript (Forts.)

Ereignisse und Event-Handler

Ereignis

Bindung NN4/And. (IE4+, NN 6+ etc)

Beschreibung

Fokus und Auswählen onfocus

NN4: Formularelemente

beim Erhalt des Fokus

And.: Formularelemente onblur

NN4: Formularelemente

beim Verlieren des Fokus

And.: Formularelemente onselect

NN4: Textfelder, File-Upload

beim Auswählen

And.: Textfelder, File-Upload Bewegen und Skalieren (meist Fenster) onmove

NN4: Fenster

beim Bewegen (nur Netscape Navigator 4.x)

onresize

NN4: Fenster

beim Ändern der Größe

And.: Fenster onscroll

And.: Fenster

beim Scrollen

NN4: Layer, Fenster, Bilder

beim Laden

Laden onload

And.: Fenster, Frameset, Objekte onunload

NN4: Fenster And.: Fenster, Frameset

beim Entladen (meist beim Verlassen der Webseite)

Fehlerhandling onabort

NN4: Bilder

beim Abbrechen

And.: Objekt onerror

NN4: Bilder

bei einem Fehler

And.: Fenster, Frameset, Objekt

Für die vielen zusätzlichen Ereignisse des Internet Explorer finden Sie unter http://msdn.microsoft.com/workshop/author/dhtml/reference/events.asp eine ausführliche Referenz.

356

 KOMPENDIUM 

JavaScript

Tastatur-Ereignisse

11.4

Kapitel 11

Tastatur-Ereignisse

Tastatur-Ereignisse abzufangen, gehört zu den eher seltenen Aufgaben eines JavaScript-Programmierers. Wenn es aber doch vorkommt, lässt es sich relativ einfach bewerkstelligen. Kernstück sind zwei Elemente: Eine Browserunterscheidung zwischen Internet Explorer (und Konqueror), Netscape 4.x und dem Rest. Die Umwandlung des Tastencodes in den entsprechenden Buchstaben. Hierzu gibt es beim Internet Explorer eine Methode fromCharCode() des String-Objekts. Hier der vollständige Code: <script language="JavaScript">
Listing 11.8: Tastatur-Ereignisse (tastatur.html)

document.captureEvents(Event.KEYDOWN);

} document.onkeydown = ausgeben; } function ausgeben(e) { if (document.all) { alert(String.fromCharCode(event.keyCode)); } else if (document.layers) { alert(unescape("%"+e.which.toString(16))); } else if (document.getElementById) { alert(unescape("%"+e.charCode.toString(16))); }

} //-->

Taste drücken

Im Konqueror 3.1 funktioniert nur onkeydown, nicht aber onkeypress und onkeyup. In älteren Versionen funktioniert auch dies nicht. Den Bug-Report finden Sie aktuell unter http://bugs.kde.org/show_bug.cgi?id=42918.

 KOMPENDIUM 

JavaScript

357

Kapitel 11

Ereignisse und Event-Handler

Abbildung 11.4: Die Ausgabe liefert ein »g«

358

 KOMPENDIUM 

JavaScript

Teil 2 Webanwendungen

Kapitel 12: Browserunterscheidung

361

Kapitel 13: Bilder

395

Kapitel 14: Navigationshilfen

431

Kapitel 15: Fenster

459

Kapitel 16: Formulare

491

Kapitel 17: Cookies

537

Kapitel 18: Frames

553

Kapitel 19: CSS und JavaScript

581

Kapitel 20: DHTML

601

Kapitel 21: Vollständigkeitsüberprüfung und reguläre Ausdrücke

647

12

Browserunterscheidung

Browserübergreifend zu programmieren, stellt für den Webentwickler eine der größten Herausforderungen dar. Das traf vielleicht früher einmal zu? Nein, leider hat sich daran nicht viel geändert. Zwar muss im Allgemeinen auf Fossilien wie Netscape 2 und 3 oder Internet Explorer 3 keine Rücksicht mehr genommen werden, aber die vierte Generation macht genug Probleme und auch neuere Browser sind noch nicht so einheitlich und standardkonform, wie der Programmierer das gerne hätte.1 Was kann der motivierte Entwickler nun tun? Er muss sich bei jeder Methode, Eigenschaft oder Funktion, die er verwendet, Gedanken über die unterstützten Browser machen. Dabei hilft Ihnen dieses Buch, denn es bietet zu allen wichtigen Bereichen Übersichtstabellen mit den unterstützten Browsern. Müssen Sie also auf neuere Funktionalität verzichten und nur mit dem programmieren, was bereits in der vierten Generation von Netscape und Internet Explorer vorhanden war? Das geht natürlich nicht. Insbesondere bei DHTML werden auch alte Konzepte wie die Layer von Netscape nicht mehr unterstützt. Daher bleibt häufig kein anderer Ausweg, als Code für verschiedene Browser zu schreiben. Alle, die für ein Intranet produzieren, werden sich jetzt freuen. Wenn es nur einen Browser gibt, hat man alles im Griff. Die Praxis zeigt allerdings anderes. In den meisten Intranets dürfen die Nutzer auch andere Browser installieren. Bei mir nicht, werden manche Systemadministratoren sagen. Aber: Insbesondere bei Laptops ist das kaum zu kontrollieren und viele Firmen mit Kopfarbeitern wollen den Mitarbeitern diese Freiheit auch nicht nehmen. Wer von der Norm abweicht, also andere Browser verwendet, hätte also schon mal Pech gehabt.2 Wird das in Kauf genommen, gibt es aber weitere 1 2

Die Unterschiede in den DOM-Modellen finden Sie in Kapitel 10 »Document Object Model«. Und wer sagt, dass alle in der Firma Windows verwenden? Für Linux-Nutzer gibt es beispielsweise keinen Internet Explorer, am Mac sehen die Browser durchaus ein wenig anders aus …

 KOMPENDIUM 

JavaScript

361

Kapitel 12

Browserunterscheidung Probleme. Neue Browser halten Einzug und vielleicht wird eines Tages in der ganzen Firma der Browser gewechselt. Dann sind Browser-übergreifende Skripten meist schneller angepasst.3 Hat sich der Entwickler nach langem Hin und Her entschlossen, welche Browser er beliefern möchte (siehe Anhang A »Browser«), bleibt die Frage, welche Methode zur Browserunterscheidung am sinnvollsten ist. Zur Wahl stehen drei sehr unterschiedliche Methoden: Die Verwendung des language-Attributes, um die JavaScript-Version herauszufiltern Die Informationen aus dem navigator-Objekt, um Browser und Version zu unterscheiden Browserobjekte, die bestimmte Browser identifizieren Jede der drei Methoden wird hier besprochen und hat bestimmte Vor- und Nachteile. Sie finden nach der Vorstellung der Alternativen jeweils einen kurzen Absatz mit der Überschrift »Sinnvoll?«, der erläutert, für welche Anwendungen diese Art der Browserunterscheidung sinnvoll ist.

12.1

language-Attribut

Das language-Attribut haben Sie bereits in Kapitel 2 »JavaScript in HTML« kennen gelernt. Wie Sie es zur Versionsunterscheidung verwenden, wird in Kapitel 2.4 »Versionsunterscheidung« beschrieben. Wollen Sie mal nur den Internet Explorer ansprechen, verwenden Sie als language-Attribut einfach JScript. Sinnvoll? An dieser Stelle steht die Diskussion im Mittelpunkt, inwieweit das languageAttribut zur Browserunterscheidung sinnvoll ist. Kapitel 2.4 »Versionsunterscheidung« hat deutlich gezeigt, dass zum Beispiel der Internet Explorer 6 sich nur mit JavaScript 1.3 identifiziert. Daher ist natürlich in der Praxis diese JavaScript-Version das wählbare Maximum, da ansonsten die Browser mit den größten Marktanteilen ausgeschlossen würden. Bei den älteren Browsern schließen Sie damit einen Teil der vierten Generation – Netscape Navigator 4.0 bis 4.06 und Internet Explorer 4 – aus. Insbesondere Letzteres erscheint meist nicht sinnvoll.

3

362

In vielen Firmennetzwerken war dies beim Wechsel vom Netscape Navigator 4.x auf den Internet Explorer der Fall. Dieser Wechsel war qualitativ und technisch oft notwendig, änderte aber für den JavaScript-Programmierer alles.

 KOMPENDIUM 

JavaScript

Deaktiviertes JavaScript

Kapitel 12

JavaScript 1.2 hat einige Tücken. Sieht der Netscape Navigator 4.x diesen Wert für das language-Attribut, verwendet er seine eigene Interpretation von einigen Funktionen und Methoden. Beispielsweise funktioniert der genau gleich-Operator (===) exakt wie der Gleichheitsoperator (==). Weitere Probleme treten bei String- und Array-Methoden auf. Die Ursache dafür lag darin, dass die Netscape-Verbesserungen an JavaScript vor der ECMAScript-Standardisierung erfolgten. Daher entschlossen sich die Netscape-Programmierer, die eigenen Besonderheiten nur dann wirken zu lassen, wenn der Programmierer Version 1.2 explizit im languageAttribut aufruft. Aufgrund der Abwärtskompatibilität behielt man dieses Verhalten bei. In der Praxis gilt also die Empfehlung, nicht mit JavaScript 1.2, sondern mit einer höheren Version zu arbeiten. Wie bei allen Problemen, gibt es auch hier Lösungen: Sie könnten in einem Skript-Bereich mit JavaScript 1.2 nur eine Variable einführen, die besagt, dass der Browser JavaScript 1.2-kompatibel ist, und diese Variable dann in einer Fallunterscheidung in einem JavaScript 1.1-Bereich verwenden. Der Code hat dann nicht die unangenehmen Änderungen gegenüber dem Standard wie im JavaScript 1.2-Block, wird aber dennoch nur in JavaScript 1.2Browsern ausgeführt. Diese Option wird allerdings selten gewählt, da es wirksamere Methoden gibt und sie bereits einiges an Code erfordert. Eine frühere JavaScript-Version, also JavaScript 1.1, zu verwenden, macht nur dann Sinn, wenn nur sehr alte Browser ausgeschlossen werden sollen. Davon konkret betroffen sind der Internet Explorer 3 in der ersten Variante und Netscape 2, die beide nur JavaScript 1.0 (= JScript 1.0) unterstützen. Ob diese Browser aber ausgeschlossen werden oder nicht, ist weniger von Bedeutung, da die Verbreitung gegen 0 geht. Das Fazit fällt im Moment klar aus: JavaScript 1.2 und 1.1 sind unsinnige oder unnötige Angaben und JavaScript 1.3 schließt beinahe zu viel aus. Die Browserunterscheidung mit dem language-Attribut wird also nur dann zum Einsatz kommen, wenn Sie ganz bestimmte Code-Schnipsel nur für eine bestimmte Version und damit einen engen Kreis von Browsern schreiben möchten. Sie ist aber, beispielsweise in einer DHTML-Anwendung, nicht zur Browserunterscheidung geeignet.

12.2

Deaktiviertes JavaScript

Kapitel 2.1, Abschnitt »Alte Browser und deaktiviertes JavaScript« verrät Ihnen, wie Sie <noscript>-Bereiche hinzufügen, um Browser ohne oder mit deaktiviertem JavaScript abzufangen. Hier gilt noch eine zusätzliche Regel. Testen Sie so viel wie möglich! JavaScript können Sie bei allen hier verwen-

 KOMPENDIUM 

JavaScript

363

Kapitel 12

Browserunterscheidung deten Browsern deaktivieren (Ausnahme: Netscape Navigator 2 bis Unterversion 2.01). Ein nicht JavaScript-fähiger Browser ist beispielsweise der reine Textbrowser Lynx oder der NCSA Mosaic. Einige dieser Browser finden Sie in Anhang A »Browser«.

Abbildung 12.1: In einem Browser ohne JavaScript wird der Inhalt des <noscript>Bereichs ausgegeben.

Außer dem <noscript>-Bereich gibt es keine Möglichkeit, deaktiviertes JavaScript oder nicht JavaScript-fähige Browser festzustellen. Das wird verständlich, wenn Sie bedenken, dass diese Browser entweder keinen JavaScriptInterpreter haben, oder dieser abgeschaltet ist. Wie sollten Sie da per Skript feststellen können, ob JavaScript funktioniert …

12.3

navigator-Objekt

Das navigator-Objekt liefert eine beträchtliche Menge an Informationen über den Browser.4 Darunter fällt die Angabe der Browserversion, des Browsernamens und der Sprache des lokalen Systems. Der Internet Explorer ab Version 4 besitzt das Objekt clientInformation. Es enthält dieselben Eigenschaften und Methoden wie das navigator-Objekt, das der Internet Explorer ebenfalls besitzt. In den meisten Fällen verwenden Sie vermutlich navigator, da dies für alle Browser gilt. Benötigen Sie dagegen nur die Informationen vom Internet Explorer, können Sie auch clientInformation einsetzen.5

4 5

364

Navigator ist der englische Begriff für Browser. Andere Browser melden bei diesem Objekt natürlich, dass sie es nicht unterstützen.

 KOMPENDIUM 

JavaScript

navigator-Objekt

Kapitel 12

Welcher Browser? Das navigator-Objekt besitzt drei Eigenschaften, aus denen im Zusammenspiel der Browser und seine Version ausgelesen werden können: appName – der allgemein gültige Name des Browsers appVersion – die Browserversion userAgent – enthält Browser und Browserversion in detaillierterer Form.

Diese drei Eigenschaften müssen zusammen betrachtet werden, weil sich die Angaben – wen wundert es? – je nach Browser deutlich unterscheiden und nur mit allen dreien eine gute Filterwirkung gewährleistet ist. Alle drei Eigenschaften sind auch in Uralt-Browsern wie Netscape 2 und Internet Explorer 3 ab der ersten Version implementiert. NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3

appName































appVersion































userAgent































Tabelle 12.1: Die Eigenschaften zur Browsererkennung

Feststellen Der erste Schritt ist einfach. Die drei Eigenschaften werden für den Browser ausgelesen: <script language="JavaScript">

 KOMPENDIUM 

JavaScript

365

Kapitel 12

Browserunterscheidung

Abbildung 12.2: Der Internet Explorer 6 gibt an, wie er heißt und liefert gleich mit, dass das .NET Framework installiert ist.

Der Internet Explorer gibt auch eine Rückmeldung darüber, ob das .NET Framework installiert ist (.NET). Zusätzlich gibt er die Versionsnummer der Common Language Runtime (CLR) aus. Tabelle 12.2 enthält eine Sammlung der Ausgaben von den wichtigsten Browsern. Diese Sammlung ließe sich mit älteren Browserversionen und verschiedensten Betriebssystemen beliebig erweitern. Das Ziel ist allerdings zuerst einmal nicht, dass Sie die Tabelle auswendig können, sondern aus den Ergebnissen die Erkenntnisse für die Browserunterscheidung ziehen. Tabelle 12.2: Die Ausgaben der wichtigsten Browser

Browser

Wert

IE 4

appName

Microsoft Internet Explorer

appVersion 4.0 (compatible; MSIE 4.01; Windows NT)

IE 5

userAgent

Mozilla/4.0 (compatible; MSIE 4.01; Windows NT)

appName

Microsoft Internet Explorer

appVersion 4.0 (compatible; MSIE 5.01; Windows NT 5.0; .NET

CLR 1.0.3705)

IE 5.5

userAgent

Mozilla/4.0 (compatible; MSIE 5.01; Windows NT 5.0; .NET CLR 1.0.3705)

appName

Microsoft Internet Explorer

appVersion 4.0 (compatible; MSIE 5.5; Windows NT 5.0; .NET CLR

1.0.3705)

IE 6

userAgent

Mozilla/4.0 (compatible; MSIE 5.5; Windows NT 5.0; .NET CLR 1.0.3705)

appName

Microsoft Internet Explorer

appVersion 4.0 (compatible; MSIE 6.0; Windows NT 5.1; .NET CLR

1.0.3705) userAgent

366

Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; .NET CLR 1.0.3705)

 KOMPENDIUM 

JavaScript

navigator-Objekt

Kapitel 12

Browser

Wert

NN 4.x

appName

Netscape

appVersion 4.78 [de] (Windows NT 5.0; U)

NN 6.2

userAgent

Mozilla/4.78 [de] (Windows NT 5.0; U)

appName

Netscape

Tabelle 12.2: Die Ausgaben der wichtigsten Browser (Forts.)

appVersion 5.0 (Windows; de-DE)

NN 7

userAgent

Mozilla/5.0 (Windows; U; Windows NT 5.0; de-DE; rv:0.9.4.1) Gecko/20020508 Netscape6/6.2.3

appName

Netscape

appVersion 5.0 (Windows; de-DE)

Mo

userAgent

Mozilla/5.0 (Windows; U; Windows NT 5.1; de-DE; rv:1.0.2) Gecko/20021120 Netscape/7.01

appName

Netscape

appVersion 5.0 (Windows; en-US)

Ko 3

userAgent

Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.2.1) Gecko/20021130

appName

Konqueror

appVersion 5.0 (compatible; Konqueror/3; Linux) userAgent

Browser

Wert

Op 7

appName

Mozilla/5.0 (compatible; Konqueror/3; Linux)

Microsoft Internet Explorer

Tabelle 12.3: als Internet Explorer 6

appVersion 4.0 (compatible; MSIE 6.0; MSIE 5.5; Windows 2000) userAgent

Mozilla/4.0 (compatible; MSIE 6.0; MSIE 5.5; Windows NT 5.1) Opera 7.01 [en] Tabelle 12.4: als Opera

Browser

Wert

Op 7

appName

Opera

appVersion 7.0 (Windows 2000; U) userAgent

Opera/7.0 (Windows 2000; U) [en]

Opera Der Opera hat vor längerer Zeit eine Funktion eingeführt, die für den Nutzer praktisch, für den Entwickler dagegen problematisch ist. Opera kann sich als beliebiger anderer Browser identifizieren. Opera 7 identifiziert sich beispielsweise standardmäßig als Internet Explorer 6 (siehe Tabelle 12.2). Das Ziel dahinter ist offensichtlich: Viele Browserunterscheidungen trennen nur Netscape Navigator und Internet Explorer, Opera wurde – und wird –

 KOMPENDIUM 

JavaScript

367

Kapitel 12

Browserunterscheidung ignoriert. Damit Opera-Surfer aber nicht auf eine Seite ohne JavaScript geschickt werden, gibt sich Opera lieber als anderer Browser aus. Dies wirft zwei Probleme auf: Zum einen sind Browserstatistiken im Web für Opera meist nicht glaubwürdig, da nur wenige Opera sich auch als Opera identifizieren. Noch gravierender ist allerdings, dass es in einer Browserunterscheidung kaum möglich ist, den Opera von anderen Browsern zu unterscheiden. Die Identifizierung ändern Sie in Opera in den VOREINSTELLUNGEN unter NETZWERK.

Abbildung 12.3: Das Identifikationsverhalten von Opera ändern

Die einzige Unterscheidungsmöglichkeit liegt in der Zeichenkette Opera, die unter userAgent vorhanden ist. Konqueror Der Konqueror identifiziert sich zwar normal als Konqueror, Sie können allerdings unter EINSTELLUNGEN/KONQUEROR EINRICHTEN zusätzliche Angaben machen, wie er sich genau ausgeben soll.

368

 KOMPENDIUM 

JavaScript

navigator-Objekt

Kapitel 12 Abbildung 12.4: Die Einstellungen für den Konqueror

USER-AGENT-KENNUNG SENDEN zu deaktivieren, hat für JavaScript keine Auswirkung, sondern bezeichnet die Versendung der User-Agent-Identifizierung an den Webserver per HTTP. Unterscheiden Browser exakt voneinander zu unterscheiden ist sehr schwierig bis unmöglich. Zu viele Plattformen, Browserversionen und Besonderheiten sind zu beachten. Die einfachste Unterscheidung wäre nur mit dem Namen der Browser: <script language="JavaScript">
Listing 12.2: Unterscheidung mit appName

(name.html)

if (name == "Netscape") { ausgabe = "Netscape"; } else if (name == "Microsoft Internet Explorer") { ausgabe= "Internet Explorer"; } else { ausgabe= "Der Rest"; }

 KOMPENDIUM 

JavaScript

369

Kapitel 12

Browserunterscheidung document.write(ausgabe) //-->

Dieses Listing erkennt Netscape Navigator und Mozilla beide als Netscape. Der Internet Explorer wird sehr sicher erkannt. Opera landet je nach Identifikation beim Internet Explorer oder Netscape. Übrig bleibt der Opera, der sich als Opera identifiziert und beispielsweise der Konqueror. Ein weiteres Problem dieser ersten Unterscheidung: Die Versionsnummer des Browsers wird nicht festgelegt. Mit der Versionsnummer wird es gleich ein gutes Stück schwieriger. Sie lässt sich beispielsweise aus der Eigenschaft userAgent ziehen. Da dort allerdings auch Informationen zum Betriebssystem stehen und das Ganze bei den meisten Browsern mit Mozilla beginnt6, fällt das Filtern schwer. Einfacher erscheint da der Zugriff über appVersion, allerdings gibt beispielsweise Netscape ab Version 6 hier immer 5 als Versionsnummer an. Und auch die Versionsnummern von Konqueror und Opera sind versteckter. Das folgende Skript ist ein Versuch, dies alles zu berücksichtigen7: Listing 12.3: Eine umfangreiche Browserunterscheidung mit Versionsnummer (unterscheidung.html)

<script language="JavaScript">
name = navigator.appName; vers = navigator.appVersion; ua = navigator.userAgent; ausgabe = "";

function browser() { if (ua.indexOf("Opera") != -1) { ausgabe = "OP"; } else if (name == "Konqueror") { ausgabe = "KO"; } else if ((name == "Netscape") && (ua.indexOf("Netscape") == 1) && (parseFloat(vers) >= 5)) { ausgabe = "MO"; } else if (name == "Netscape") { ausgabe = "NN"; } else if (name == "Microsoft Internet Explorer") { ausgabe = "IE"; 6 7

370

Der historische Ursprung liegt im Ur-Browser Mosaic, auf dem die heutigen Browser basieren. Erklärung folgt am Ende des Skripts


 KOMPENDIUM 

JavaScript

navigator-Objekt

Kapitel 12

} else { ausgabe= "NB"; } var erg = eval("ver" + ausgabe + "()"); return ausgabe + " " + erg; } function verOP() { if (name == "Opera") { return parseFloat(vers); } else if (name == "Netscape") { if (parseFloat(vers) < 5) { return "Opera als NN " + parseFloat(vers); } else { return "Opera als NN 6+"; } } else { return "Opera als IE " + verIE(); } } function verKO() { var pos = ua.indexOf("Konqueror/"); var string = ua.substring(pos + 10, pos + 14); return parseFloat(string); } function verMO() { var pos = ua.indexOf("rv:"); var string = ua.substring(pos + 3, pos + 7); return parseFloat(string); } function verNN() { if (parseFloat(vers) < 5) { return parseFloat(vers) } else if (ua.indexOf("Netscape/") != -1) { var pos = ua.indexOf("Netscape/"); var string = ua.substring(pos + 9, pos + 13); return parseFloat(string); } else { var pos = ua.indexOf("Netscape"); var string = ua.substring(pos + 8, pos + 12); return parseFloat(string); } } function verIE() { var pos = ua.indexOf("MSIE"); var string = ua.substring(pos + 5, pos + 9); return parseFloat(string); } function verNB() { return parseFloat(vers); }

 KOMPENDIUM 

JavaScript

371

Kapitel 12

Browserunterscheidung document.write(browser()) //-->

Das Skript besteht aus zwei Teilen: Der Funktion browser(), die den Browsernamen identifiziert Vielen Funktionen, die für die einzelnen Browser die Versionsnummer extrahieren und ihr Ergebnis an browser() zurückliefern Am einfachsten lässt sich der Ablauf der Browserunterscheidung so darstellen: 1.

Zuerst wird in einer Fallunterscheidung in der Funktion browser() geprüft, um welchen Browser es sich handelt. Als Beispiel folgt eine Zeile für den Internet Explorer: else if (name == "Microsoft Internet Explorer") {

2.

Die Variable ausgabe nimmt das Ergebnis, in diesem Fall das Kürzel des Browsers, auf. ausgabe = "IE"; }

3.

Aus der Variablen, also dem Browserkürzel, und dem String ver wird per eval()-Anweisung ein Funktionsaufruf gemacht, der genau die Funktion für den erkannten Browser aufruft. Den Rückgabewert der Funktion zum Versionscheck speichert die Variable erg. var erg = eval("ver" + ausgabe + "()");

4.

Die Funktionen zum Versionscheck unterscheiden sich von Browser zu Browser deutlich. Beim Internet Explorer muss die Versionsnummer aus der Eigenschaft userAgent gezogen werden, da appVersion ab der fünften Generation immer noch 4 ist. In userAgent folgt die Versionsnummer dagegen immer nach der Zeichenkette "MSIE", auf deren Position Sie mit der String-Methode indexOf("String") zugreifen können. Die Methode substring(Start, Ende) schneidet dann die Versionsnummer heraus und parseFloat("String") wandelt sie in eine Zahl um: function verIE() { var pos = ua.indexOf("MSIE"); var string = ua.substring(pos + 5, pos + 9); return parseFloat(string); }

372

 KOMPENDIUM 

JavaScript

navigator-Objekt

Kapitel 12

Sie sollten statt substring() nicht slice() verwenden, da diese Methode in älteren Browsern wie Netscape 2 und 3 und Internet Explorer 3 nicht vorhanden ist. Eine Übersicht über die String-Methoden finden Sie in Kapitel 7 »Arrays und Strings«. 5.

Die Funktion zum Versionscheck liefert dann an die Variable erg in der Funktion browser() die Versionsnummer zurück. Dort werden dann Browserkürzel und Funktionsnummer gemeinsam zurückgeliefert. return ausgabe + " " + erg;

Bei einigen Fallunterscheidungen und Versionsüberprüfungen lohnt sich eine genauere Betrachtung. Hierzu finden Sie in den nächsten Abschnitten Details. Opera Der Opera ist bekanntlich flexibel und kann sich als beliebiger Browser identifizieren. Daher hilft appName auch nicht weiter. Allerdings gibt es, unabhängig davon, als welcher Browser sich Opera identifiziert, immer die Zeichenkette »Opera« in userAgent. Daher erfolgt die Identifikation auch über diese Zeichenkette. Die Methode indexOf("String")gibt an, ob die Zeichenkette in userAgent vorhanden8 ist. if (ua.indexOf("Opera") != -1) { ausgabe = "OP"; }

Beachten Sie, dass Opera vor den anderen Browsern geprüft werden muss. Wenn sich Opera als Netscape oder Internet Explorer identifiziert, wird die Fallunterscheidung bereits beendet, bevor sie zu Opera gelangt. Mozilla Mozilla ist ein schwer zu fassender Geselle. Er heißt Netscape (appName); dies ist aber nicht ausreichend. Er darf auch im userAgent nicht die Zeichenkette »Netscape« haben. Dies können Sie mit indexOf() prüfen. Solche Zeichenkette besitzen allerdings Netscapes vor Version 6, also 2, 3, 4.x, auch nicht. Um diese Browser auszuschließen, muss die Versionsnummer (appVersion) größer als 5 sein. else if ((name == "Netscape") && (ua.indexOf("Netscape") == -1) && (parseFloat(vers) >= 5)) { ausgabe = "MO"; }

8

Noch exakter prüft sie, ob sie nicht vorhanden ist. Das heißt, ob indexOf() nicht -1 ergibt. -1 würde bedeuten, dass die Zeichenkette nicht vorhanden ist.

 KOMPENDIUM 

JavaScript

373

Kapitel 12

Browserunterscheidung Sie können sich in der Praxis durchaus auch dafür entscheiden, nicht auf Mozilla zu prüfen, sondern ihn in eine Schublade mit Netscape zu stecken. Sie müssen dann lediglich die Versionsnummernüberprüfung anpassen. Version von Opera Die Version von Opera benötigt eine Fallunterscheidung, ob Opera sich als Opera, Netscape oder Internet Explorer ausgibt. Identifiziert er sich als Opera, ist es ausreichend, die Versionsnummer aus appVersion auszulesen. Als Netscape gibt er dagegen bei einer höheren Version in appVersion an, er sei Netscape 5. Dagegen hilft eine Fallunterscheidung für Netscape mit einer Version niedriger oder größer gleich 5. Für den Internet Explorer wird die Versionsnummer aus der Funktion zur Versionserkennung des Internet Explorers (verIE()) gewonnen. function verOP() { if (name == "Opera") { return parseFloat(vers); } else if (name == "Netscape") { if (parseFloat(vers) < 5) { return "Opera als NN " + parseFloat(vers); } else { return "Opera als NN 6+"; } } else { return "Opera als IE " + verIE(); } }

Version von Mozilla Die Version des Mozilla steht hinter der Zeichenkette »rv:«. Der Zugriff darauf erfolgt wie auf die Versionsnummer des Internet Explorer (siehe Seite 282). function verMO() { var pos = ua.indexOf("rv:"); var string = ua.substring(pos + 3, pos + 7); return parseFloat(string); }

Version von Netscape Der Netscape Navigator erfordert eine dreiteilige Fallunterscheidung: Zuerst werden die Versionen kleiner als 5, also 2, 3, 4.x, herausgefiltert und deren Versionsnummer aus appVersion direkt mit parseFloat() ausgelesen. 374

 KOMPENDIUM 

JavaScript

navigator-Objekt

Kapitel 12

function verNN() { if (parseFloat(vers) < 5) { return parseFloat(vers) }

Anschließend muss zwischen verschiedenen Schreibweisen unterschieden werden. Netscape 7 schreibt die Versionsnummer in userAgent immer nach dem String »Netscape/«, Netscape 6 dagegen nach »Netscape« ohne Schrägstrich. else if (ua.indexOf("Netscape/") != -1) { var pos = ua.indexOf("Netscape/"); var string = ua.substring(pos + 9, pos + 13); return parseFloat(string); } else { var pos = ua.indexOf("Netscape"); var string = ua.substring(pos + 8, pos + 12); return parseFloat(string); } }

Verbesserungen Nichts ist perfekt, leider auch nicht diese Fallunterscheidung. Entsprechend könnten Sie noch beliebige Verbesserungen vornehmen. Eine wäre, die Angaben der drei Eigenschaften des navigator-Objekts in Kleinbuchstaben oder Großbuchstaben zu verwandeln, und nur diese zu vergleichen. Dadurch umgehen Sie Verwechslungen bei der Groß- und Kleinschreibung, die eventuell in manchen Versionen auftauchen könnten. Diese Variante finden Sie unter dem Namen unterscheidung_gk.html im Ordner code\kap12 auf der CD-ROM. Eine weitere Verbesserungsmöglichkeit wäre, noch mehr Fehlerüberprüfungen einzubauen. Beispielsweise ließe sich jede parseFloat()-Anweisung für die Versionsnummer mit einer Fallunterscheidung versehen, die mit isNaN() überprüft, ob auch tatsächlich eine Zahl zurückgeliefert wird. Weiterleitung Eine Browserunterscheidung ist insbesondere dann sinnvoll, wenn Sie für verschiedene Browser auch unterschiedliche Seiten vorbereitet haben. Interessant ist dies in der Praxis vor allem, um ältere Browser auf eine eigene »Low-Level«-Seite umzuleiten. Als Basis für diese Beispielanwendung dient das Browserunterscheidungsskript aus dem letzten Abschnitt (siehe Listing 12.3). Verändert wird Folgendes:

 KOMPENDIUM 

JavaScript

375

Kapitel 12

Browserunterscheidung Bei der Überprüfung des Browsers kommt eine Fallunterscheidung hinzu. Sie bezieht die Versionsnummer aus den Funktionen zum Versionsnummerncheck, die Ihnen ja aus dem bereits gesehenen Beispiel bekannt sind. Sie können hier für jeden Browser flexibel die Versionsnummer wählen, ab der er auf die Seite für neue Browser umgeleitet wird. Ist die Versionsnummer groß genug, bei Netscape beispielsweise größer gleich 4, erhält die Variable ausgabe den Wert true. Die Wahl der Versionsnummern müssen Sie nicht aus dem Beispiel übernehmen, sondern Sie können beliebige eigene Einschränkungen machen. Im Allgemeinen gilt: je weniger Einschränkungen, desto besser. Die Browser, die Sie auf die anspruchsvollere Seite weiterleiten, müssen das JavaScript dort allerdings wirklich packen (testen!). Nach den Überprüfungen des Browsers prüft eine eigene Fallunterscheidung den Wert von ausgabe. Ist er true, handelt es sich um einen neuen Browser und das Skript leitet auf die Seite für neue Browser weiter. Ist er false, handelt es sich um einen alten Browser, und es wird auf alte_browser.html weitergeleitet. Nachfolgend sehen Sie diesen Teil des Skripts: var var var var

name = navigator.appName; vers = navigator.appVersion; ua = navigator.userAgent; ausgabe = false;

function browser() { if (ua.indexOf("Opera") != -1) { if (verOP() >= 6) { ausgabe = true; }

} else if (name == "Konqueror") { if (verKO() >= 3) { ausgabe = true; }

} else if ((name == "Netscape") && (ua.indexOf("Netscape") == -1) && (parseFloat(vers) >= 5)) { ausgabe = true;

} else if (name == "Netscape") { if (verNN() >= 4) { ausgabe = true; }

} else if (name == "Microsoft Internet Explorer") { if (verIE() >= 4) { ausgabe = true;

}

376

 KOMPENDIUM 

JavaScript

navigator-Objekt

Kapitel 12

} else { ausgabe= false;

} if (ausgabe) { window.location.href = "neue_browser.html"; } else { window.location.href = "alte_browser.html"; }

}

In den Funktionen zur Versionsüberprüfung ändert sich nur bei Opera etwas. Opera könnte sich ja theoretisch als Netscape 3 (Mozilla 3.0) ausgeben. Dann würde er vom Skript zu den alten Browsern gesteckt, was bei Opera 6 oder 7 keinen Sinn macht. Daher liest die Funktion zur Versionsüberprüfung (verOP()) die Versionsnummer aus userAgent, wo sie nach der Zeichenkette "Opera" und einem Leerzeichen folgt. function verOP() { var pos = ua.indexOf("Opera"); var string = ua.substring(pos + 6, pos + 9); return parseFloat(string); }

Natürlich ist die Frage, was Opera-Nutzer erreichen möchten, die sich als Mozilla 3 oder 4.78 ausgeben. Es werden die wenigsten sein – so viel sei verraten. Ihre wahren JavaScript-Fähigkeiten zu erkennen, macht Sinn, denn wenn sie JavaScript nicht wollten, könnten sie es auch deaktivieren. Abbildung 12.5: Opera 7 wird als neuer Browser erkannt, obwohl er sich als Mozilla 3.0 ausgibt.

Den vollständigen Code finden Sie auf der CD-ROM im Ordner code\kap12 mit dem Namen umleitung.html. Verbesserungen Verbesserungen sind natürlich immer möglich. Hier gilt wieder, dass zusätzliche Fehlerüberprüfungen eingebaut werden könnten. Des Weiteren sollten Sie Ihre Browserumleitung auf jedem nur verfügbaren Browser und Betriebssystem testen.

 KOMPENDIUM 

JavaScript

377

Kapitel 12

Browserunterscheidung

Abbildung 12.6: Netscape 2 dagegen landet bei den alten Browsern.

Wenn neue Browser am Markt erscheinen, sollten Sie auf jeden Fall überprüfen, ob der Test noch funktioniert. Bei Versionsüberprüfungen sollten Sie als Angabe natürlich immer größer als statt gleich verwenden, da anderenfalls spätestens in der nächsten Version, vielleicht aber nur beim MiniUpdate von 7 auf 7.01, die Umleitung nicht mehr funktioniert. Eine weitere sinnvolle Verbesserung in diesem Skript ist natürlich ein <noscript>-Container, der nicht JavaScript-fähige Browser oder Browser mit

deaktiviertem JavaScript abfängt.9 Auf der Seite alte_browser.html sollte ein Link der Art »Ihr Browser kann mehr, hier geht’s zur Super-Seite« integriert sein, falls die Versionsüberprüfung wirklich mal Mist baut oder Sie einen neuen Browser nicht schnell genug integriert haben.

Browser Sniffer Das Thema Browsererkennung wird in der Webentwickler-Community heiß diskutiert. Vertreter neuerer Ansichten gehen häufig davon aus, dass Browserunterscheidung an sich nicht sinnvoll ist und man besser Browser-übergreifend programmieren sollte10; andere sind Sniffer-Fans. Einer der bekanntesten Sniffer ist der Ultimate JavaScript Client Sniffer von Erik Krock, einem Netscape-Mitarbeiter und Mozilla-Entwickler (http:// www.mozilla.org/docs/web-developer/sniffer/browser_type.html). Er ist nicht mehr aktuell, unterstützt beispielsweise Win XP oder neuere Opera-Versionen noch nicht, bildet aber den Vater vieler anderer Sniffer, die durchs Netz geistern. Prinzipiell spricht nichts gegen den Einsatz dieser Sniffer, Sie sollten sie jedoch insbesondere mit aktuellen Browsern testen. Wenn dann neue 9 Eigentlich ist das ja ohnehin obligatorisch, oder?
10 beispielsweise: http://devedge.netscape.com/viewsource/2002/browser-detection/

378

 KOMPENDIUM 

JavaScript

navigator-Objekt

Kapitel 12

Browser hinzukommen, benötigen Sie häufig auch eine neue Sniffer-Version. Stehen die Änderungen dann nicht sofort im Netz zur Verfügung, ist dies ärgerlich, weil viele Nutzer am Anfang neue Browser ausprobieren. Abgesehen davon ist es nicht ganz einfach, Sniffer an die eigenen Bedürfnisse anzupassen. Sie liefern häufig zu viele Informationen. Als Fazit bleibt: Wer gerne auf die Rundumversorgung setzt, erreicht sein Ziel mit einem Sniffer schneller, wer dagegen flexibler sein und mit weniger Code auskommen möchte, sollte die Lösung selbst programmieren.

Sprache feststellen Die Sprache lässt sich relativ einfach feststellen. Sie besteht aus einem Kürzel aus zwei Buchstaben: de steht für Deutsch, en für Englisch, it beispielsweise für Italienisch. Allerdings gibt es hier wieder einen kleinen, aber ärgerlichen Unterschied bei den Browsern. Die Eigenschaft für das navigator-Objekt, um die Sprache (des Browsers) auszulesen, heißt im Internet Explorer browserLanguage, bei Netscape dagegen nur language. Lediglich Opera 7 versteht beides. NS4.x NS6

NS7

browserLanguage language







IE4 IE5

IE5.5 IE6

O7






















M1

K3







Tabelle 12.5: Eigenschaften zur Spracherkennung

Um dieses Problem zu umgehen, hilft bei der Wahl der Sprache eine Fallunterscheidung: <script language="JavaScript">
Listing 12.4: Die Sprache feststellen (sprache.html)

if (navigator.browserLanguage) { sprache = navigator.browserLanguage; } else if (navigator.language) { sprache = navigator.language; } else { sprache = "Nicht feststellbar"; }

document.write(sprache); //-->

 KOMPENDIUM 

JavaScript

379

Kapitel 12

Browserunterscheidung

Die Fallunterscheidung nutzt den Umstand, dass die Bedingung true ergibt, wenn eine Eigenschaft vorhanden ist, false dagegen, wenn der Browser die Eigenschaft nicht unterstützt. Der Netscape Navigator unterstützt navigator.browserLanguage beispielsweise nicht, liefert also false. navigator.language aus der else-if-Bedingung kennt er dagegen und gibt true zurück. Weiterleitung Eine einfache Weiterleitung ist schnell implementiert. Sie liest die Sprache aus und prüft mit indexOf(), ob de oder en vorkommt. Je nachdem wird der Nutzer dann entweder auf die deutsche oder englische Seite weitergeleitet. Hat der Browser eine andere Sprache, bleibt der Nutzer auf der Weiterleitungsseite und sieht die im HTML-Code angelegten Links auf die zwei vorhandenen Sprachversionen. Er kann sich dann selbst entscheiden. Listing 12.5: Je nach Sprache weiterleiten (sprache_umleitung .html)

<script language="JavaScript">
//-->

English (Englisch)
Deutsch (German)

Die Funktion indexOf() ist einem Vergleich mit == vorzuziehen, da bei einigen Länderkürzeln und Browsern noch Nachsätze folgen. So steht de-at zum Beispiel im Internet Explorer für Österreich, der Navigator gibt Deutschland als de-DE an. Im englischen Sprachraum wird zwischen en-GB und en-US (Netscape) bzw. en-gb und en-us zwischen Großbritannien (gb) und den USA (us) unterschieden.

380

 KOMPENDIUM 

JavaScript

navigator-Objekt

Kapitel 12 Abbildung 12.7: Die Weiterleitung hat funktioniert und der Nutzer ist auf der deutschen Seite gelandet.

Auch, wenn Sie die Sprache automatisch wählen, sollten Sie dem Nutzer immer die Möglichkeit geben, die Sprache auch zu wechseln. Vielleicht hat er beispielsweise nur einen englischen Browser, weil er die neueste Version ausprobieren möchte, ist aber deutschsprachig. In großen Webprojekten wird eine Sprachunterscheidung auch häufig serverseitig realisiert (siehe Kapitel 12.5 »Serverseitige Browserunterscheidung«), da je nach Sprachversion unterschiedliche Daten aus der Datenbank geholt werden. Dies funktioniert auch bei deaktiviertem JavaScript. Für eine kleinere Webseite ist allerdings auch die Umleitung auf verschiedene Seiten mit Sprachen sinnvoll. Internet Explorer spezial Die Grundlage der Sprachunterscheidung ist nicht das Betriebssystem, sondern die Sprachversion des Browsers. Dies kann unter Umständen unpräzise sein, wenn der Nutzer nur einen englischen Browser hat, aber Deutsch spricht. Microsoft hat dafür zwei Eigenschaften namens systemLanguage und userLanguage eingeführt, die auf die Sprachversion des Betriebssystems bzw. der Benutzereinstellungen zurückgreifen. NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

systemLanguage













userLanguage













O7

M1

K3

Tabelle 12.6: Internet ExplorerEigenschaften

Die zwei Eigenschaften werden genauso wie browserLanguage eingesetzt: if (navigator.systemLanguage) { document.write(navigator.systemLanguage); document.write("
"); document.write(navigator.userLanguage); }

 KOMPENDIUM 

JavaScript

Listing 12.6: Die Eigenschaften des Internet Explorers für die Systemsprache (Ausschnitt aus: sprache_ie.html)

381

Kapitel 12

Browserunterscheidung Die Systemsprache kann in manchen Betriebssystemen geändert werden. In Windows XP finden Sie dies im Menü SYSTEMSTEUERUNG/REGIONS- UND SPRACHOPTIONEN. Auf der Registerkarte REGIONALE EINSTELLUNGEN ändern Sie die Einstellungen per Auswahlliste. Diese Wahl beeinflusst die Eigenschaft userLanguage (nicht systemLanguage11).

Abbildung 12.8: userLanguage gibt

gl für Galizisch an – da kann doch etwas nicht stimmen?

Ältere Browser Für ältere Browser, die die Eigenschaften language oder browserLanguage nicht verstehen, vor allem Netscape 2 und 3 und Internet Explorer 4, können Sie die Angabe auch aus den Eigenschaften appVersion oder userAgent des navigator-Objekts ziehen. Dazu benötigen Sie Folgendes: Eine Variable mit dem Wert der Eigenschaft userAgent var ua = navigator.userAgent;

Eine Fallunterscheidung zwischen den Sprachen, die Sie unterstützen: if (navigator.userAgent.indexOf("de") != -1) { sprache = "de"; } else if (navigator.userAgent.indexOf("en") != -1) { sprache = "en"; }

Diesen Code können Sie nun in Listing 12.5 einfügen. Die Fallunterscheidung kommt in die else-Anweisung der dortigen Fallunterscheidung: Listing 12.7: Weiterleitung nach Sprache für ältere Browser (sprache_alt.html)

<script language="JavaScript">
382

 KOMPENDIUM 

JavaScript

navigator-Objekt

Kapitel 12

if (navigator.browserLanguage) { sprache = navigator.browserLanguage; } else if (navigator.language) { sprache = navigator.language; } else { //Ältere Browser: if (navigator.userAgent.indexOf("de") != -1) { sprache = "de"; } else if (navigator.userAgent.indexOf("en") != -1) { sprache = "en"; } }

if (sprache.indexOf("de") != -1) { window.location.href = "index_de.html"; } else if (sprache.indexOf("en") != -1) { window.location.href = "index_en.html"; } //-->

English (Englisch)
Deutsch (German)

Abbildung 12.9: Auch in Netscape 2 funktioniert die Weiterleitung.

Sprachversionen Die folgende Tabelle fasst die wichtigsten Sprachkürzel zusammen. Kürzel

Sprache

Kürzel

Sprache

ar

Arabisch

fi

Finnisch

bg

Bulgarisch

fr

Französisch

 KOMPENDIUM 

JavaScript

Tabelle 12.7: Einige wichtige Sprachkürzel

383

Kapitel 12 Tabelle 12.7: Einige wichtige Sprachkürzel (Forts.)

Browserunterscheidung

Kürzel

Sprache

Kürzel

Sprache

cs

Tschechisch

hu

Ungarisch

da

Dänisch

it

Italienisch

de

Deutsch

ja

Japanisch

de-at

Deutsch (Österreich)

ko

Koreanisch

de-ch

Deutsch (Schweiz)

nl

Niederländisch

de-li

Deutsch (Liechtenstein)

no

Norwegisch

de-lu

Deutsch (Luxemburg)

pl

Polnisch

el

Griechisch

pt

Portugiesisch

en

Englisch

ru

Russisch

en-au

Englisch (Australien)

sk

Slowakisch

en-ca

Englisch (Kanada)

sr

Serbisch

en-gb

Englisch (Großbritannien)

sv

Schwedisch

en-us

Englisch (USA)

tr

Türkisch

es

Spanisch

zh

Chinesisch

Um ein spezielles Sprachkürzel zu erhalten, können Sie dies auch mit dem Internet Explorer (userLanguage) und einem Betriebssystem testen, das Sprachwechsel erlaubt: Die Sprachkürzel der Browser gleichen im Übrigen nicht vollständig den entsprechenden Toplevels. en-gb steht beispielsweise für Großbritannien, während der Toplevel co.uk ist.

Plugins Das navigator-Objekt besitzt Eigenschaften (beispielsweise plugins), um festzustellen, welche Plugins auf dem Rechner des Nutzers installiert sind. Fehlt beispielsweise das Flash-Plugin oder der Windows-Media-Player, kann JavaScript automatisch nachfragen. Mehr Informationen zur Verwendung erhalten Sie in Kapitel 23 »Kommunikation mit der Außenwelt«.

384

 KOMPENDIUM 

JavaScript

Browserobjekte

Kapitel 12

Sinnvoll? Ist die Browserüberprüfung mit dem navigator-Objekt wirklich sinnvoll? Hier gibt es nur eine Antwort: Das kommt darauf an. Verwenden Sie sehr viel JavaScript und ist Ihre Website groß, sind zwei Versionen sinnvoll. Wichtig ist aber, dass es eine abgespeckte Version der Website tatsächlich geben muss. Ist Ihnen eine zweite Version zu viel Arbeit, sollten Sie auch auf eine – aufwändig zu aktualisierende – Browserunterscheidung verzichten. Sie müssen die Browserunterscheidung mit jedem neuen Browser testen. Sonst macht sie keinen Sinn. Haben Sie nur auf bestimmten Seiten eine DHTML-Anweisung, ist eine Browserüberprüfung mit den Browserobjekten besser geeignet, da die Browserunterscheidung kaum so genau werden kann und nie exakt feststellt, welches Objekt von einem Browser unterstützt wird. Das automatische Auslesen der Sprachversionen wird im Web aktuell immer mehr verwendet. Es handelt sich prinzipiell um eine gute Technik, die, in Verbindung mit einem <noscript>-Bereich für nicht JavaScript-fähige Browser ausreichend kompatibel ist, wenn der Nutzer jederzeit manuell die Sprachen wechseln kann.

12.4

Browserobjekte

Die Browserunterscheidung mit den Browserobjekten stellt nicht fest, um welchen Browser es sich handelt, sondern nur, ob der Browser ein bestimmtes Objekt verwendet. Ein ähnliches Beispiel haben Sie bereits in Kapitel 12.3 im Abschnitt »Sprache feststellen« gesehen. if (document.getElementById) { document.write("getElementById vorhanden!"); }

Die if-Bedingung aus Listing 12.8 ergibt nur true, wenn der Browser die Methode getElementById() unterstützt.

Listing 12.8: Ist das Browserobjekt vorhanden? (unterscheidung_ browserobjekte. html)

Diese Unterscheidung wird natürlich nicht dazu verwendet, freudig auszugeben, dass die Methode unterstützt wird. Aber in dieser Fallunterscheidung kann getElementById ab jetzt gefahrlos verwendet werden. Ältere Browser kennen getElementById nicht, geben der if-Bedingung false zurück und ignorieren die weiteren Anweisungen.

 KOMPENDIUM 

JavaScript

385

Kapitel 12

Browserunterscheidung

Abbildung 12.10: Browser und Nutzer freuen sich: getElementById wird unterstützt.

DHTML und Browserunterscheidung In der Praxis wird der Test der Browserobjekte meist in DHTML-Anwendungen eingesetzt.12 Ein einfaches Beispiel soll das hier zeigen. In den folgenden Kapiteln wird die Browserunterscheidung mit Objekten noch häufig verwendet. Das Beispiel blendet einen Text ein, wenn der Nutzer über einen Link fährt (onmouseover) und blendet ihn – in derselben Funktion – wieder aus, wenn er den Link verlässt (onmouseout). Die Browserunterscheidung wird notwendig, wenn auf den leeren Absatz (

-Tag) zugegriffen werden soll: Der W3C-konforme Zugriff per getElementById() funktioniert nur in neueren Browsern. Tabelle 12.8:

NS4.x NS6

getElementById()

getElementById




NS7


IE4 IE5


IE5.5 IE6

O7

M1

K3
















Der Internet Explorer 4 und ältere Operaversionen benötigen die Kollektion document.all, die alle Elemente der Seite enthält. Neuere Internet Explorer und Opera unterstützen sie immer noch. Der Netscape Navigator 4.x verwendet als einziger document.layers. Zudem ist für den Zugriff auf eine Stileigenschaft wie visibility (Sichtbarkeit) kein style-Objekt vorhanden. Daher bietet es sich an, nach diesen verschiedenen Objekten zu unterscheiden. Eine Variable nimmt bereits die Referenz auf das Absatzobjekt auf. Hier die drei Fälle: 12 Wenn man den DHTML-Begriff weiter fasst und jede Art von Interaktion mit einbezieht, verwenden fast ausschließlich DHTML-Anwendungen die Unterscheidung mit Browserobjekten (auch das Sprachbeispiel wäre dann DHTML).

386

 KOMPENDIUM 

JavaScript

Browserobjekte

Kapitel 12

if (document.getElementById) { absatz = document.getElementById("text1").style; } else if (document.all) { absatz = document.all("text1").style; } else if (document.layers) { absatz = document.text1; }

Der Rest ist nicht mehr schwierig. Eine weitere Fallunterscheidung fragt ab, ob der Absatz gerade sichtbar ist oder nicht. Je nachdem wird er aus- oder eingeblendet. if (absatz.visibility == "visible" || absatz.visibility == "show") { absatz.visibility = "hidden"; } else { absatz.visibility = "visible"; }

Hier der komplette Code (hervorgehoben ist die Browserunterscheidung): <script language="JavaScript">
Listing 12.9: Browserunterscheidung in einem praktischen Beispiel (dhtml.html)

if (document.getElementById) { absatz = document.getElementById("text1").style; } else if (document.all) { absatz = document.all("text1").style; } else if (document.layers) { absatz = document.text1; }

if (absatz.visibility == "visible" || absatz.visibility == "show") { absatz.visibility = "hidden"; } else { absatz.visibility = "visible"; } } //--> Anzeigen

Sichtbar!

 KOMPENDIUM 

JavaScript

387

Kapitel 12

Browserunterscheidung

Abbildung 12.11: Fährt der Nutzer mit der Maus über den Link, wird der Text »Sichtbar!« angezeigt.

Abbildung 12.12: Verlässt er den Link, wird der Text wieder ausgeblendet.

Der Netscape Navigator 4.x macht bereits in diesem einfachen Beispiel einige Schwierigkeiten: –

Im style-Attribut lässt sich ein Kasten nur unsichtbar schalten, wenn er auch per Stilanweisung positioniert wird.

–

Wollen Sie testen, ob ein Objekt eingeblendet ist, muss die visibilityEigenschaft den Wert show und nicht visible haben!13

Sinnvoll? Die Unterscheidung mit Objekten ist immer dann sehr sinnvoll, wenn Sie das Objekt anschließend verwenden möchten. Bei DHTML ist dies die bei weitem beste Methode, da eine allgemeine Browserunterscheidung Netscape 4.x und Internet Explorer 4 heute wohl noch nicht ausschließen sollte und Sie so für alle Browser auf einer Seite kompatibel programmieren können. Dies erkaufen Sie sich mit zusätzlichen Fallunterscheidungen und damit mehr Unübersichtlichkeit. Am besten lässt sich dieses Problem mit einem sinnvollen Einsatz von Funktionen und Sammelvariablen – die Referenzen allgemein verfügbar zwischenspeichern – lösen.

13 Unsichtbar ist im Netscape 4.x hide und nicht hidden. Bei der Zuweisung funktionieren visible und hidden jedoch.

388

 KOMPENDIUM 

JavaScript

Browserobjekte

Kapitel 12

Von einer Browser- und Versionsunterscheidung mittels Browserobjekten ist abzuraten. Da die Zuordnung meist nicht so einfach ist wie bei document.layers und Netscape 4.x, sind die Ergebnisse sehr unpräzise und mit einer Versionsfeststellung per navigator-Objekt nicht zu vergleichen. Zum Beleg hier ein kleines Fundstück aus dem Netz (in leicht abgewandelter und vereinfachter Form): <script language="JavaScript">
Listing 12.10: Bitte nicht verwenden! (browser_fest stellen_objekte. html)

document.write(b); //-->

Zum einen sind die Ergebnisse mit den Browsern – die eigentlich getestet werden sollen – schlecht. Der Internet Explorer 6 reagiert beispielsweise auf document.docType nicht. Zum anderen bleiben andere Browser wie der Internet Explorer 5.5 – ein wichtiger Zwischenschritt, Opera und Konqueror völlig außen vor. Abbildung 12.13: Der Opera 7 ist ein Internet Explorer 5?!

 KOMPENDIUM 

JavaScript

389

Kapitel 12

Browserunterscheidung

12.5

Serverseitige Browserunterscheidung

Im HTTP-Header, den der Browser an den Webserver sendet, steht die Browserversion und die Plattform. Die gängigen serverseitigen Programmiersprachen können darauf zugreifen. Sie könnten also auch diese Informationen verwenden, um zwischen den Browserversionen zu unterscheiden. Das einzige Problem ist, dass der HTTP-Header nicht übermittelt, ob JavaScript deaktiviert ist. Sie müssen also dennoch in Ihrem Code <noscript>Container vorsehen. Hier hat die clientseitige Browserüberprüfung Vorteile, da bereits in der Seite mit der Browserunterscheidung der <noscript>-Container integriert sein kann. Die übrigen Seiten benötigen ihn dann nicht mehr.14 Bei der DHTML-Versions- oder Objektüberprüfung kommen Sie ohnehin an clientseitiger JavaScript-Überprüfung mit Browserobjekten nicht vorbei. Bis hier war die serverseitige Browserüberprüfung graue Theorie. Es wird also Zeit, das Ganze in der Praxis näher zu beleuchten. Für das folgende Beispiel kommt JScript .NET zum Einsatz. JScript .NET ist die JavaScriptSprachvariante von Microsoft für den Einsatz mit der .NET-Plattform. .NET für das Internet heißt dabei ASP.NET. Mehr zu JScript .NET erfahren Sie in Kapitel 24 »JScript .NET«. JScript ist als ASP.NET-Programmiersprache nicht sehr weit verbreitet, bietet Ihnen allerdings die gute Gelegenheit, mit Ihrem JavaScript-Wissen serverseitig zu programmieren. ASP.NET besteht hauptsächlich aus dem .NET Framework. Dieses Framework enthält eine sehr große Klassenbibliothek. Die Klassen in dieser Bibliothek enthalten in den Eigenschaften und Methoden die komplette Funktionalität für Ihre Anwendungen. Für unser Beispiel ist die Rückgabe des Request-Objekts interessant. Es liefert die Antworten des Clients – also des Browsers – an den Server. Dieses Objekt enthält ein Unterobjekt Browser, das die Browserinformationen mit einer eigenen Datei, die Browserinformationen enthält, abgleicht und sie in Eigenschaften speichert.15 Folgende Eigenschaften sind hier (unter anderem) von Interesse:

14 wenn Ihre Seiten ab der ersten Seite nur mit JavaScript funktionieren sollen. 15 In der .NET-Klassenbibliothek ist das Browser-Objekt im Namespace System.Web.HttpBrowserCapabilities gespeichert.

390

 KOMPENDIUM 

JavaScript

Serverseitige Browserunterscheidung

Kapitel 12

Browser – liefert einen String mit dem Browsernamen. MajorVersion – liefert die ganzzahlige Versionsnummer des Browsers,

beim Internet Explorer 5.5 also 5. MinorVersion – liefert die Versionsnummer nach dem Komma, beim Netscape Navigator 2.02 also 02. Version – gibt die komplette Versionsnummer zurück. EcmaScriptVersion – prüft die Versionsnummer des unterstützten ECMAScript-Standards. Etwas verwirrend ist, dass diese Version in JavaScriptVersionsnotation – 1.1, 1.2, 1.316 – ausgegeben wird. 1.4 gibt es natürlich noch nicht, da ECMAScript erst drei Versionen hat.

Um die Klassenbibliothek zu erkunden und beispielsweise alle Eigenschaften des Browser-Objekts zu sehen, verwenden Sie am besten den Class-Browser, der beim .NET Framework SDK (und nur SDK, nicht die kleine Variante Redistributable) in den Quickstart-Tutorials mitgeliefert wird. Sie finden eine Beschreibung in Kapitel 24 »JScript .NET«. Abbildung 12.14: Die Klasse mit den Browserinformationen im .NET Framework

16 Die Version 1.3 entspricht also JavaScript 1.5.

 KOMPENDIUM 

JavaScript

391

Kapitel 12

Browserunterscheidung Das folgende Beispiel verwendet die fünf Eigenschaften und gibt die Ergebnisse in einem ASP.NET Web Control () aus:

Listing 12.11: Serverseitige Browserunterscheidung (browserpruefung.aspx)

<%@ Page Language="jscript" %> <script runat="server"> function Ausgabe(o: Object, e: EventArgs) { var var var var var

bro = Request.Browser.Browser; maj = Request.Browser.MajorVersion; min = Request.Browser.MinorVersion; vers = Request.Browser.Version; ecma = Request.Browser.EcmaScriptVersion;

ausgabe.Text ausgabe.Text ausgabe.Text ausgabe.Text ausgabe.Text

= bro + "
"; += "MajorVersion: " + maj + "
"; += "MinorVersion: " + min + "
"; += "Version: " + vers + "
"; += "ECMAScript:" + ecma;

}

Sie können das Beispiel nur testen, wenn Sie unter Windows den Internet Information Service (in früheren Windows-Versionen Internet Information Server) installiert haben17 und das .NET Framework besitzen. Wie die Installation funktioniert, erfahren Sie in Kapitel 24 »JScript .NET«, das einen Einstieg in die serverseitige Programmierung mit ASP.NET bietet. Des Weiteren erfahren Sie dort, was Sie bei der serverseitigen Programmierung beachten müssen und wie Sie am besten vorgehen.

17 Er wird bei Windows NT, 2000 und XP Professional auf der CD-ROM mitgeliefert. Unter anderen Windows-Betriebssystemen müssen Sie darauf verzichten.

392

 KOMPENDIUM 

JavaScript

Serverseitige Browserunterscheidung

Kapitel 12 Abbildung 12.15: Der Netscape Navigator meldet sich mit Version 5, ist aber ein Navigator 7.

Abbildung 12.16: Opera 7 wird gut erkannt.

Abbildung 12.17: Der Internet Explorer 6 traut sich nur ECMAScript v2 zu.

 KOMPENDIUM 

JavaScript

393

13

Bilder

Als Netscape 3 ein eigenes Bildobjekt besaß1, begann der Rollover-Boom im Internet. Jede bessere (heute auch jede schlechtere) Website schmückt sich mit einer Schaltfläche, die Farbe oder Form wechselt. Bilder haben allerdings noch mehr Power. In Formularen können Sie Schaltflächen oder Kontrollkästchen ersetzen. Darüber hinaus lassen sich Bilder sehr einfach animieren. Dies fällt zwar in den Bereich DHTML, ist aber ohne CSS-Stilanweisungen und auch in sehr alten Browsern möglich. In den Browsern ab Netscape 3 und Internet Explorer 4 ist das image-Objekt komplett integriert. Der Internet Explorer 3 besitzt es eigentlich nicht, weil es in der Macintosh-Version 3.01 des Internet Explorers noch mit heißer Nadel in abgespeckter Form implementiert wurde.

13.1

NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3































Tabelle 13.1: Das image-Objekt

Rollover

Als Rollover-Effekt bezeichnet man den Austausch von einem Bild durch ein anderes. Dieser Bildaustausch erfolgt bei den Ereignissen onmouseover (wenn der Nutzer die Grafik mit der Maus überfährt) und onmouseout (wenn der Mauszeiger die Grafik wieder verlässt). Sie benötigen für einen Rollover-Effekt zwei Bilder mit unterschiedlichen Zuständen. Die folgenden Beispiele verwenden die Dateien schalt1.gif (blaue Schaltfläche) und schalt2.gif (dieselbe Schaltfläche in Rot). Der Zugriff auf das Bild erfolgt über das document-Objekt und den Namen des Bildes. Der Name muss im name-Attribut des -Tags angegeben sein. Um das Bild zu ändern, verwenden Sie die Eigenschaft src des imageObjekts. Damit weisen Sie die Bildquelle neu zu.2 1 2

entspricht JavaScript 1.1 src steht für source (Quelle)

 KOMPENDIUM 

JavaScript

395

Kapitel 13 Listing 13.1: Rollover-Effekt im HTML-Attribut (rollover.html)

Bilder

Die Zeilen aus Listing 13.1 erledigen Folgendes: Im onmouseover-Attribut wird direkt die Bildquelle in schalt2.gif geändert. Das onmouseout-Attribut setzt wieder auf Bild schalt1.gif zurück. Wenn Sie den Objektaufruf direkt in die Ereignisattribute schreiben, müssen die Anführungszeichen innerhalb der JavaScript-Anweisung andere sein als beim Attribut. Im Beispiel steht der Attributwert in doppelten Anführungszeichen. Die JavaScript-Anweisung darin verwendet einfache Anführungszeichen. Abbildung 13.1: Rechts: Der Nutzer fährt über die Schaltfläche. Diese wechselt die Farbe (im Druck: die Graustufe).

Rollover-Funktion Der Rollover-Effekt lässt sich auch sehr einfach in Funktionen auslagern. Dadurch wird der Code übersichtlicher: Listing 13.2: Rollover-Effekt mit zwei Funktionen (rollover_funktion. html)

<script language="JavaScript">
//-->

396

 KOMPENDIUM 

JavaScript

Rollover

Kapitel 13





Automatisiert Wollen Sie die Funktionen für den Rollover-Effekt mehrmals verwenden, bietet es sich an, mit Parametern beim Funktionsaufruf zu arbeiten, die zeigen, welches Bild jeweils geändert werden soll. Das folgende Beispiel nutzt dies: Zuerst übergibt es eine Nummer an die Funktion. onmouseover="over('1')"

Diese wird als Parameter z in der Funktion übernommen. function over(z) {

Aus dem Parameter und einem Text, der bei allen Schaltflächen gleich ist, wird der Name des Bildes erstellt: var name = "schalt" + z;

Nun kommt eine weitere Art des Bildzugriffs ins Spiel: die Kollektion3 images[]. Sie ist im Prinzip ein Array mit allen Bildern der Webseite. Die Bilder können entweder mit ihrem Index, z.B. images[0] oder mit ihrem Namen, images["Bildname"], angesprochen werden. Für das Beispiel wird der Bildname durch die Variable name ersetzt: document.images[name].src="schalt2.gif";

Ein Direktzugriff über document.name ist hier nicht möglich, da die Variable name nicht als image-Objekt angesehen wird. Der Interpreter sucht, statt den Wert der Variablen zu verwenden, nach einem Bild mit dem name-Attribut name.

3

Eine Kollektion ist ein, von JavaScript zur Verfügung, gestellter Container für Elemente. Funktional entspricht eine Kollektion einem Array.

 KOMPENDIUM 

JavaScript

397

Kapitel 13

Bilder Hier sehen Sie das vollständige Beispiel:

Listing 13.3: Ein automatisiertes Rollover (rollover_automatisch.html)

<script language="JavaScript">
//-->

Abbildung 13.2: Jeweils eine Funktion erledigt das Mouseover bzw. Mouseout für alle Schaltflächen.

Ältere Browser Ältere Browser, sogar Netscape 4.x, unterstützen die Ereignisse onmouseover und onmouseout im -Tag nicht. Hier müssen Sie sie stattdessen in einen Link packen. Tabelle 13.2: onmouseover und onmouseout im -Tag

398

NS4.x NS6


NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3

























 KOMPENDIUM 

JavaScript

Rollover

Kapitel 13

Wollen Sie auf sehr alten Browsern, also Netscape 2 und Internet Explorer 3 (Windows), eine Fehlermeldung aufgrund des nicht vorhandenen imageObjekts vermeiden, müssen Sie auch eine Fallunterscheidung einbauen, die testet, ob das Objekt vorhanden ist. if (document.images) { Anweisungen; }

Das folgende Beispiel wandelt Listing 13.3 ab und macht es auch für ältere Browser kompatibel: <script language="JavaScript">

Listing 13.4: Rollover in einem Link (rollover_ aeltere.html)







Denken Sie daran, das Attribut border = "0" in das -Tag zu packen, wenn Sie einen Link außen herum legen. Anderenfalls wird das Bild automatisch mit Rahmen in der Linkfarbe angezeigt. Wollen Sie keinen Verweis im Link einfügen, ersetzen Sie die URL in href durch ein Doppelkreuz (#)4. Damit scrollen allerdings manche Browser bei langen Seiten mit Ankern nach oben.

4

auch Hash

 KOMPENDIUM 

JavaScript

399

Kapitel 13

Bilder

Abbildung 13.3: Auch Netscape 4.x kann nun mit Rollover umgehen.

Zufall Der Zufall ist ein gutes Instrument, um Interaktivität interessant zu machen. Der Nutzer weiß nie, was als Nächstes kommt. Diese Ungewissheit wirkt abwechslungsreich. Auf der CD-ROM zum Buch finden Sie im Ordner code\kap13 die Beispielbilder dio.gif und dio1.gif bis dio5.gif. Eine Zufallszahl zwischen 0 und 1 erzeugen Sie mit Math.random(). Sie lässt sich mit einer einfachen Rechnung in jeden beliebigen Zahlenbereich umwandeln.5 In diesem Beispiel soll beim Rollover eines aus fünf verschiedenen Bildern zufällig aufgerufen werden. Der Trick ist, den Namen der Grafik aus einer Zeichenkette ("dio") und der Zufallszahl zwischen 1 und 5 zu bilden. Diese Anweisungen werden in eine Funktion verpackt und nur noch in den bereits bekannten Funktionen over() und out() aufgerufen. Nachfolgend der vollständige Code: Listing 13.5: Mit Zufall lassen sich schöne Effekte erzielen. (rollover_zufall. html)

<script language="JavaScript">
400

siehe Kapitel 6.2 unter »Math« im Abschnitt »Zufallszahlen«

 KOMPENDIUM 

JavaScript

Rollover

Kapitel 13

}

function over(z) { var name = "dio" + z; document.images[name].src = zufall(); } function out(z) { var name = "dio" + z; document.images[name].src = "dio.gif"; } //--> Abbildung 13.4: Welche Diode erscheint, ist purer Zufall.

Experimentieren Sie ein wenig mit dem Zufall. In diesem Buch wird er Ihnen noch häufiger begegnen, beispielsweise in diesem Kapitel unter 13.4 »Animation?«.

Tipps und Tricks Sie können natürlich bei den onmouseover- und onmouseout-Ereignissen auch ein beliebiges Bild austauschen. Warum sollte sich nicht die Farbe der Überschrift ändern, wenn der Nutzer über eine Schaltfläche fährt? Oder es tauchen zusätzliche Menüpunkte auf. So lässt sich sogar eine Navigation mit Bildern erzeugen.

 KOMPENDIUM 

JavaScript

401

Kapitel 13

Bilder Ebenfalls sehr praktisch ist die Möglichkeit, mehrere Bilder gleichzeitig zu tauschen. So können Sie sogar kompliziertere Schaubilder nur mit Bildern erstellen. Bei anderen Ereignissen können Sie natürlich auch Bilder ändern. Ein Beispiel wäre ein Bildwechsel bei onclick. Der Nutzer klickt auf eine Schaltfläche und irgendwo ändert sich ein Bild.

13.2

Vorladen

Die bisher verwendeten Grafiken waren allesamt sehr einfach und klein. Das muss allerdings nicht immer so sein. Wenn Sie viele Grafiken auf der Seite haben oder die Grafiken sehr groß werden, muss der Nutzer auf einen Rollover-Effekt unter Umständen eine Weile warten. Das ist natürlich optisch nicht akzeptabel. Daher können Sie Grafiken vorladen. Dieser Vorgang heißt auch Precaching6 oder Preloading. Precaching ist insbesondere bei Animationen sinnvoll, damit die Animation runder abläuft. Laden Sie Ihre Webseiten auf jeden Fall zum Testen auf den Webserver und probieren Sie dann aus, wie schnell die Seite lädt, wenn Sie eine langsame (also keine DSL- und möglichst keine ISDN-) Verbindung haben. Das Precaching folgt einer ganz einfachen Idee. Zuerst legen Sie ein neues image-Objekt an: var bild = new Image();

Anschließend weisen Sie der Objektinstanz mit der Eigenschaft src als Quelle das Bild zu, das Sie vorladen möchten. bild.src = "schalt2.gif";

Diese zwei Zeilen können Sie nun einfach in eines der Rollover-Beispiele aus dem letzten Abschnitt einfügen. Natürlich ist es auch erlaubt, das Vorladen in einer Funktion zu erledigen. Sie sollten die Funktion allerdings schon im Skript-Teil und nicht erst beim onload-Ereignis aufrufen, damit das oder die Bilder sofort vorgeladen werden.

6

402

Dieser Begriff stammt von dem Wort Cache, dem Zwischenspeicher des Browsers, in den das Bild vorgeladen wird.

 KOMPENDIUM 

JavaScript

Vorladen

Kapitel 13

Für das folgende Beispiel ist Listing 13.2 die Grundlage. Abgeändert wurde, dass in der Funktion over die Objektinstanz bild statt der Bildquelle angesprochen wird: <script language="JavaScript">

Ganz alte Browser, die das image-Objekt noch nicht unterstützen, erlauben dennoch eine Art Vorladen: Sie können Grafiken einfach mit 1*1 Pixel Größe in den HTML-Quellcode schreiben:

Das Image-Objekt erlaubt zusätzlich zwei Parameter: die Breite und die Höhe des Bildes in Pixeln. var bild = new Image(Breite, Höhe);

Mehrere Bilder vorladen Bei mehreren Bildern ist das soeben beschriebene Verfahren recht aufwändig. Hier lässt sich ein einfacher Automatismus mit einer Schleife implementieren. Die Bildquellen geben Sie als Array an, die vorgeladenen Bilder landen ebenfalls in einem Array: var bilder = new Array("dio1", "dio2", "dio3", "dio4", "dio5"); var vorgeladen = new Array(); for (bild in bilder) { vorgeladen[bild] = new Image(); vorgeladen[bild].src = bilder[bild] + ".gif"; }

 KOMPENDIUM 

JavaScript

Listing 13.7: Mehrere Bilder vorladen (Ausschnitt aus: vorladen_viele. html)

403

Kapitel 13

Bilder Dieses Skript arbeitet folgendermaßen: 1.

Zuerst nimmt das Array bilder alle Bildnamen auf. Im Beispiel wird die Dateiendung erst in der Schleife hinzugefügt. Sie könnte natürlich auch bereits im Array angegeben werden, insbesondere dann, wenn sich die Dateiformate der Bilddateien unterscheiden.

2.

Im zweiten Schritt definiert der Code ein neues Array (vorgeladen).

3.

Die Schleife geht alle Bildnamen im Array bilder durch.

4.

Für jeden Bildnamen wird im Array vorgeladen ein neues image-Objekt instanziiert.

5.

Als Quelle erhält dieses Bild den Bildnamen aus dem Array bilder. Angefügt wird die Dateiendung .gif.

In unserem letzten Beispiel könnten Sie das Array auch mit einer Schleife füllen und nur in einer Variable angeben, wie viele Bilder es denn sein sollen. Sie sehen also, dass der Automatisierung in JavaScript kaum Grenzen gesetzt sind!

Alles geladen? Wollen Sie eine komplexere Animation mit JavaScript realisieren, sollten Sie vor ihrem Start überprüfen können, ob bereits alle Bilder geladen sind. Dafür gibt es zwei wichtige Komponenten: Die Eigenschaft complete. Sie ergibt true, wenn ein Bild geladen ist und kann für jedes Bild überprüft werden. Das Ereignis onload für ein Bild. Es wird aufgerufen, sobald das Bild fertig geladen ist. Diese Eigenschaft muss im Bild selbst stehen, um auch zu älteren Browsern kompatibel zu sein.7 Daher werden die Bilder in der Größe 1*1 Pixel auf die Seite eingefügt und zusätzlich mit einer Stylesheet-Klasse ausgeblendet. Aus diesen zwei Komponenten besteht die folgende Überprüfung. Sind alle Bilder geladen, wird auf die Seite index.html weitergeleitet. Listing 13.8: Das Vorladen testen (vorladen_prüfen. html)

<style type="text/css"> .hidden {visibility:hidden}

<script language="JavaScript">
404

Alternativ könnte das Ereignis als Event-Handler im Skript aufgerufen werden.

 KOMPENDIUM 

JavaScript

Vorladen

Kapitel 13

var vorgeladen = new Array(); for (bild in bilder) { vorgeladen[bild] = new Image(); vorgeladen[bild].src = bilder[bild] + ".gif"; } function geladen() { var zaehler = 0; for (bild in vorgeladen) { if (vorgeladen[bild].complete) zaehler++; } if (zaehler == 5) window.location.href = "index.html"; }

//-->

width="1" height="1" width="1" height="1" width="1" height="1" width="1" height="1" width="1" height="1"



Wenn Sie das Attribut lowsrc verwenden, um ein Bild mit niedrigerer Qualität zuerst zu laden, prüft complete nur, ob dieses Bild geladen wurde. Auch onload tritt bereits ein, wenn das niedrig auflösende Bild fertig geladen ist!

Fehler beim Laden Das im letzten Absatz geschilderte Verfahren ist allerdings noch nicht ganz perfekt. Zusätzlich können Sie auch die zwei Ereignisse onabort und onerror einsetzen. onabort tritt ein, wenn der Nutzer das Laden anhält, onerror wird bei einem Ladefehler aufgerufen, beispielsweise aufgrund eines fehlerhaften Bildverweises. Die beiden Ereignisse existieren seit es das image-Objekt gibt, also ab Netscape 3 bzw. Internet Explorer 4.

 KOMPENDIUM 

JavaScript

405

Kapitel 13

Bilder

Tabelle 13.3: onabort und onerror

NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3

onabort































onerror































Das folgende Beispiel ergänzt die zwei Ereignisse zu Listing 13.8: Listing 13.9: Im -Attribut sind die zwei Ereignisse schnell eingefügt (Ausschnitt aus: vorladen_pruefen_ fehler.html).



Natürlich können Sie für das Vorladen auch eigene Funktionen anlegen. In Abbildung 13.5 fehlte eine Grafik. Daher gibt der Browser die Fehlermeldung des onerror-Ereignisses aus. Abbildung 13.5: Ein Fehler beim Laden ist aufgetreten.

13.3

Bilder als Formularelemente

Die HTML-Formulare sind vor allem eines – langweilig. Wer die Radiobuttons und Checkboxen schon hunderte oder tausende Male gesehen hat, findet sie früher oder später ziemlich trist.

406

 KOMPENDIUM 

JavaScript

Bilder als Formularelemente

Kapitel 13

Eine Alternative ist, die Formularelemente durch Bilder zu ersetzen. Bei Schaltflächen können Sie dies durch das Tag

erreichen. Alternativ reicht eine normale Grafik mit onclick oder bei älteren Browsern mit Link außen herum. Schaltflächen sind aber nicht die einzigen Elemente, die durch eine Grafik ersetzt werden können. Auch Checkboxen und Radiobuttons lassen sich so frei gestalten. Allerdings ist dazu ein wenig mehr Programmierung nötig, wie das folgende Beispiel zeigt. Insbesondere unerfahrene Nutzer haben mit Formularen, die »sehr anders« aussehen, Schwierigkeiten. Achten Sie immer auf gute Usability8. In dem Beispiel sollen zwei Radiobuttons erzeugt werden, die dem Nutzer die Wahl zwischen Kontakt per E-Mail oder per Telefon lassen. Dazu wird eine selbst erstellte Grafik eines leuchtenden roten Buttons erstellt. Ist die Option ausgewählt, soll er grün erscheinen. Radiobuttons haben die Besonderheit, dass immer nur eine Option gleichzeitig ausgewählt sein kann. Für unser Beispiel sollen beide Optionen auch wieder abwählbar sein.9 Die zwei Zustände des Buttons finden Sie auf der CD-ROM unter opt.gif und opt_on.gif im Ordner code\kap13. Das Kernproblem dieser Aufgabe ist, dass der aktuelle Zustand der zwei Radiobuttons (welcher ist ausgewählt?) gespeichert werden muss. Er sollte außerdem so gespeichert sein, dass er beim Versenden des Formulars als Formularelement an eine serverseitige Programmiersprache wie beispielsweise PHP, ein CGI oder eine ASP.NET-Anwendung weitergegeben werden kann. Dies funktioniert allerdings nur über einen Umweg, da das Bild selbst kein Formularelement ist. Sie müssen dazu den aktuellen Zustand in ein verstecktes Formularfeld () schreiben. Dieses Formularfeld wird mit dem Formular verschickt und die serverseitige Programmiersprache kann auf den Wert des versteckten Formularfelds zugreifen.

8 9

Anglizismus für Benutzerfreundlichkeit. Der Nutzer soll sich schnell zurecht finden und die Seite einfach und ohne Hilfe bedienen können. Dies ist bei per HTML-Formular erstellten Radiobuttons nicht der Fall.

 KOMPENDIUM 

JavaScript

407

Kapitel 13

Bilder Folgende Schritte sind notwendig: Ein leeres, verstecktes Formularfeld enthält den Wert der angeklickten Option.

Im onclick-Ereignis der beiden Radiobuttons wird die Funktion check mit dem Namen des Bildes als Parameter aufgerufen.  Wollen Sie einen Anruf?

Diese Funktion prüft zuerst, ob der Wert im versteckten Formularfeld dem angeklickten Wert (Parameter, also Name des Bildes) entspricht. Wenn dies nicht der Fall ist, wird das versteckte Formularfeld auf diesen Wert gesetzt, anderenfalls wird es gelöscht. Der zweite Fall tritt also dann ein, wenn der Nutzer ein zweites Mal auf denselben Radiobutton klickt. function check(opt) { if (document.formular.kontakt.value != opt) { document.formular.kontakt.value = opt; } else { document.formular.kontakt.value = ""; }

Abschließend ruft die Funktion check() die Funktion aktualisieren() auf. aktualisieren(); }

Diese Funktion ändert zuerst beide Bilder auf den Normalzustand. Anschließend wird der Wert des versteckten Textfelds geprüft. Ist es nicht leer, wird das Bild mit dem Bild für den aktivierten Zustand (grüner Button) ausgetauscht. function aktualisieren() { document.email.src = "opt.gif"; document.tele.src = "opt.gif"; var wert = document.formular.kontakt.value; if (wert != "") { document.images[wert].src = "opt_on.gif"; } }

408

 KOMPENDIUM 

JavaScript

Bilder als Formularelemente

Kapitel 13

Hier der vollständige Code: <script language="JavaScript">

 Informationen per E-Mail?

 Wollen Sie einen Anruf?

Das Aussehen von Auswahllisten und Textfeldern aller Art lässt sich nur über Stylesheet-Anweisungen – die nur in neueren Browsern funktionieren – ändern.

 KOMPENDIUM 

JavaScript

409

Kapitel 13

Bilder

Abbildung 13.6: Der Nutzer klickt den Radiobutton an …

Abbildung 13.7: … und die Farbe ändert sich.

13.4

Animation?

Die einfachste Art der Animation ist die Animation durch Bildwechsel. Diese Form der Animation machen sich beispielsweise GIF-Animationen zunutze. Ist es aber einmal notwendig, statt GIFs JPEGs zu verwenden – weil mehr Farben erforderlich sind oder Fotos animiert werden sollen –, hilft JavaScript weiter.

Dateiformate Das praktische an Bildanimationen mit JavaScript ist, wie bereits erwähnt, dass das Dateiformat keine Rolle spielt. Sie können also eine Animation mit allen drei im Web verbreiteten Bildformaten durchführen: GIF (Compuserve Graphics Interchange Format) ist das älteste Webformat. Es unterstützt eine Farbtiefe von 8 Bit (entspricht 256 Farben) und komprimiert verlustfrei. Das GIF-Format komprimiert insbesondere 410

 KOMPENDIUM 

JavaScript

Animation?

Kapitel 13

flächige Grafiken sehr gut, ist also für Schaltflächen und Ähnliches sehr gut geeignet. Als besondere Funktionen können Sie Teile der GIF-Grafik transparent schalten und eine GIF-Datei als Animation speichern, also mit mehreren Bildern, die hintereinander ablaufen. Das JPEG-Format (Joint Photographic Experts Group) hat eine größere Farbtiefe von 16 Bit (entspricht über 16,77 Mio. Farben), komprimiert allerdings verlustbehaftet; das heißt, je niedriger die Dateigröße werden soll, desto niedriger muss die Qualität gewählt werden. Die Qualitätsverluste äußern sich in Treppenbildung.10 Das PNG-Format (Portable Network Graphics) gibt es in mehreren Varianten. Als PNG-8 mit 8 Bit und 256 Farben oder als PNG-24 mit 16 Bit und über 16,77 Mio. Farben. Das PNG-Format komprimiert verlustfrei, bietet ebenfalls Transparenz, aber keine Animation. Das PNG-24 erreicht deutlich höhere Dateigrößen als JPEG, da es nicht verlustbehaftet komprimiert.

Bildertausch Im Prinzip ist der Bildertausch in der Animation nur eine Fortsetzung des Rollover-Effekts. Die einzige Komponente, die neu hinzukommt, ist der Zeitabstand, in dem die Bilder getauscht werden. Dafür sorgt die Methode setTimeout("Funktion()", Zeit) des window-Objekts. Sie ruft eine Funktion zeitverzögert auf. Die Verzögerung wird im zweiten Parameter Zeit in Millisekunden angegeben. setTimeout() gibt es bereits in den Uralt-Browsern Netscape Navigator 2 und

Internet Explorer 3 in beiden Versionen. NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3































Tabelle 13.4: Die Methode setTimeout() des window-Objekts

Ein einfaches Beispiel illustriert dies: Beim Laden der Seite wird nach 1.000 Millisekunden mit setTimeout() eine Animationsfunktion aufgerufen. Als Parameter wird 0 übergeben. Dieser Parameter legt fest, welches Bild aus dem Bilder-Array zuerst aufgerufen wird. onload="setTimeout('ani(0)', 1000)"

10 Das Bild wirkt so, als hätte es viereckige Punkte; das nennt man auch pixelig.

 KOMPENDIUM 

JavaScript

411

Kapitel 13

Bilder setTimeout() erlaubt die Parameterübergabe von einem oder mehreren Para-

metern auf zwei Arten: Innerhalb des Funktionsaufrufs, wie in diesem Beispiel gesehen. Wollen Sie hier Variablenwerte verwenden, müssen Sie diese mit dem Namen der Funktion konkatenieren, da dieser ein String ist: setTimeout("ani(" + i + ")", 1000);

Als weitere Parameter. Dazu wird die Funktion nicht als String und ohne Klammern übergeben: setTimeout(ani, 1000, i);

Die zweite Variante ist allerdings auf den Netscape Navigator ab Version 4.x und Mozilla beschränkt, wird also in der Praxis kaum verwendet. Im nächsten Schritt wird in der Animationsfunktion (ani()) geprüft, ob das letzte Bild bereits erreicht ist. Ist dies nicht der Fall, wird die Bildquelle auf das nächste Bild geändert, i um eins erhöht und die Funktion über setTimeout() nach 1.000 Millisekunden erneut aufgerufen. function ani(i) { if (i < bilder.length) { document.dio.src = bilder[i]; i++; setTimeout("ani(" + i + ")", 1000); } }

Haben Sie es bemerkt? Hier handelt es sich um einen rekursiven Funktionsaufruf (siehe Kapitel 5.1, Abschnitt »Rekursion«). Natürlich können Sie die Zeitverzögerung, in der die Animation ausgeführt wird, frei wählen und dem Array mehr oder weniger Bilder hinzufügen. Nachfolgend sehen Sie den vollständigen Code: Listing 13.11: Eine einfache Animation (animation.html)

<script language="JavaScript">
412

 KOMPENDIUM 

JavaScript

Animation?

Kapitel 13 i++; setTimeout("ani(" + i + ")", 1000);

} }

//--> Abbildung 13.8: Die Animation hüpft von Bild zu Bild.

Bei Animationen sollten Sie die Bilder vorladen (siehe Kapitel 13.2 »Vorladen«). Der Übersichtlichkeit halber fehlt das Vorladen bei diesen Arbeitsbeispielen. Die soeben realisierte Animation ließe sich auch mit einer Schleife konstruieren. Einen Ansatz hierzu finden Sie auf der CD-ROM unter animation_ schleife.html. Endlose Animation Bis jetzt war die Animation auf einen Durchlauf beschränkt. Aus Listing 13.11 lässt sich allerdings schnell eine Endlosanimation machen. Eine einfache if-Fallunterscheidung setzt den Zähler (i) wieder auf 0, wenn das letzte Bild ausgegeben wurde: <script language="JavaScript">
Listing 13.12: Eine endlose Animation (animation_endlos. html)

function ani(i) { if (i < bilder.length) { document.dio.src = bilder[i]; i++ } if (i == bilder.length) {

 KOMPENDIUM 

JavaScript

413

Kapitel 13

Bilder i = 0; }

setTimeout("ani("+i+")", 1000); } //-->

Beachten Sie, dass setTimeout() einmal zu viel aufgerufen wird, wenn Sie für die zweite Fallunterscheidung eine else-Anweisung verwenden. if (i < bilder.length) { document.dio.src = bilder[i]; i++ } else () { i = 0; }

Der Grund: Nach der Erhöhung von i um 1 wird die Fallunterscheidung verlassen, der else-Fall also nicht mehr überprüft. Beim letzten Bild der Animation wäre i also zuerst 4 und würde dann um 1 erhöht. Erst beim nächsten setTimeout()-Aufruf wäre die Bedingung nicht mehr erfüllt. setInterval() setTimeout() ist nicht die einzige Methode des window-Objekts, die sich für Animationen eignet. Die zweite wichtige Methode ist setInterval(Funktion, Zeit). Sie ruft eine Funktion regelmäßig nach einer über den Parameter Zeit angegebenen Zeitspanne in Millisekunden auf. setInterval() ist ein wenig jünger als setTimeout(), da sie erst in der vierten Generation von Netscape und Internet Explorer integriert wurde. Die Methode steht allerdings heute in allen wichtigen Browsern zur Verfügung. Tabelle 13.5: Die Methode setInterval() des window-

NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3































Objekts

Die endlose Animation aus dem letzten Abschnitt lässt sich auch mit setInterval() realisieren. Dazu wird eine Funktion eingefügt, die den setInterval()-Aufruf enthält.

414

 KOMPENDIUM 

JavaScript

Animation?

Kapitel 13

<script language="JavaScript">
Listing 13.13: Die Animation mit setInterval()

endlos abspielen (animation_endlos_ setinterval.html)

function ani(i) { if (i < bilder.length) { document.dio.src = bilder[i]; i++ setTimeout("ani("+i+")", 1000); } } function start() { ani(0); setInterval("ani(0)", 5000); }

//-->

Überschneiden sich Zeitintervalle wie in diesem Beispiel, kann es zu Fehlern kommen, da der JavaScript-Interpreter zum Abarbeiten der Funktionsaufrufe eine – zwar sehr kurze, aber dennoch vorhandene – Zeitspanne benötigt. Dies ist bei einem kleinen Beispiel wie diesem belanglos, kann aber bei umfangreicherem Code problematisch werden. Mehrmals ablaufen lassen Eine endlos ablaufende Animation ist natürlich noch nicht der Weisheit letzter Schluss. Besser wäre es, flexibel wählen zu können, wie oft eine Animation abläuft. Um dies zu zeigen, wird Listing 13.12 ein wenig umgearbeitet: Eine neue Zählervariable z speichert, wie oft die Animation bisher ablief. Immer, wenn i wieder auf 0 gesetzt wird, erhöht sich z um 1, da ein Schleifendurchlauf beendet ist. Die setTimeout()-Anweisung wird nur ausgeführt, wenn z kleiner als 4 ist, also nur bis zum vierten Schleifendurchlauf.

 KOMPENDIUM 

JavaScript

415

Kapitel 13

Bilder Hier sehen Sie das komplette Beispiel:

Listing 13.14: Eine Animation mehrmals abspielen (animation_mehrmals.html)

<script language="JavaScript">
function ani(i) { if (i < bilder.length) { document.dio.src = bilder[i]; i++ } if (i == bilder.length) { i = 0; z++;

} if (z < 4) { setTimeout("ani("+i+")", 1000); }

} //-->

Bildertausch mit der Funktion Zufall Um ein wenig mehr Pep in Animationen zu bringen, kommt nun der Zufall ins Spiel. Die Methode zur Gewinnung einer Zufallszahl zwischen 0 und 1, Math.random(), haben Sie bereits kennen gelernt.11 Sie bildet die Basis jeder zufallsgesteuerten Animation. Im folgenden Beispiel verwenden wir die Methode, um fünf Leuchtdioden in zufälliger Reihenfolge in verschiedenen Farben aufleuchten zu lassen. Zuerst wird beim Laden des Dokuments nach einer Zeitverzögerung von 5 Sekunden (= 5.000 Millisekunden) die Animationsfunktion aufgerufen. onload="setTimeout('ani()', 5000)"

11 siehe Kapitel 6.2 unter »Math« im Abschnitt »Zufallszahlen«

416

 KOMPENDIUM 

JavaScript

Animation?

Kapitel 13

Diese Funktion ruft mit setInterval() alle 200 Millisekunden die Funktion zufall() auf. function ani() { setInterval('zufall()', 200); }

Die Funktion zufall() gewinnt zwei Zufallszahlen zwischen 1 und 5. Eine Zahl ist für den Dateinamen und die zweite für das Bild im HTML-Code vorgesehen. So wird also bei jedem Aufruf der Funktion eines der fünf Bilder dio1.gif bis dio5.gif zufällig ausgewählt und im nächsten Schritt der Name des Bildes, das ausgetauscht werden soll (dio1 bis dio5). function zufall() { var x = 1 + (Math.round(Math.random() * 4)); var z = 1 + (Math.round(Math.random() * 4)); var neu = "dio" + x + ".gif"; var name = "dio" + z; document.images[name].src = neu; }

Nachfolgend sehen Sie den kompletten Code: <script language="JavaScript">
Listing 13.15: Eine einfache Animation mit Zufall (zufall_animation. html)

//-->

 KOMPENDIUM 

JavaScript

417

Kapitel 13

Bilder

Abbildung 13.9: Die Lämpchen leuchten fröhlich nacheinander.

Besonderheiten setTimeout() und setInterval() sind praktisch zu handhaben. Dennoch gilt es einiges zu beachten:

Alle Anweisungen nach setTimeout() und setInterval() werden sofort und nur einmal ausgeführt. Nur der Code in der aufgerufenen Funktion wird zeitverzögert oder mehrmals aufgerufen. setTimeout() und setInterval() können so genannte Identifier erhalten.

Dazu müssen Sie nur einer Variablen zugewiesen werden. Die Variable enthält dann den Identifier. Er wird verwendet, um die beiden Methoden zu beenden. Dafür gibt es die Methoden clearTimeout() und clearInterval(). var id = setTimeout("Funktion", 1000); clearTimeout(id); clearTimeout() und clearInterval() gibt es bereits ebenso lange wie ihre Gegenstücke setTimeout() und setInterval(). Beispiele zu den beiden Metho-

den finden Sie in den folgenden Abschnitten. Alle vier sind Methoden des window-Objekts. clearTimeout() Das folgende Beispiel verwendet clearTimeout(), um eine endlos ablaufende Animation zu beenden. Klickt der Nutzer auf die Schaltfläche, wird die Funktion ende() aufgerufen. Sie verwendet clearTimeout() mit der Variablen id als Parameter. Diese globale Variable enthält den Identifier der setTimeout()-Anweisung aus der Animationsfunktion. Beachten Sie, dass id tatsächlich als globale Variable deklariert sein muss. Listing 13.16: Mit clearTimeout() eine Animation stoppen (clearTimeout.html)

418

<script language="JavaScript">
 KOMPENDIUM 

JavaScript

Animation?

Kapitel 13

var id;

function ani(i) { if (i < bilder.length) { document.dio.src = bilder[i]; i++; } if (i == bilder.length) { i = 0; } id = setTimeout("ani("+i+")", 1000);

} function ende() { clearTimeout(id); }

//-->

Beenden

Abbildung 13.10: Die Animation ist angehalten.

clearInterval() Das folgende Beispiel verwendet clearInterval(), um die zufallsgesteuerte Animation abzubrechen. Hier wurde der setInterval()-Aufruf nicht in einer Funktion, sondern direkt im Skript ausgeführt. Daher steht die Variable id automatisch als globale Variable zur Verfügung. <script language="JavaScript">
 KOMPENDIUM 

JavaScript

Listing 13.17: Eine Animation mit clearInterval()

beenden (clearInterval())

419

Kapitel 13

Bilder document.images[name].src = neu; } var id = setInterval('zufall()', 200); function ende() { clearInterval(id); }

//-->
/> /> /> /> />

Beenden

Abbildung 13.11: Die Schaltfläche hält nun die Animation an.

Größenänderung Die Änderung der Bildgröße ist mit Vorsicht zu genießen. GIF, PNG und JPEG-Bilder sind so genannte Bitmap- oder Pixelbilder. Sie bestehen aus einzelnen Bildpunkten oder auch Pixeln.12 Jeder Bildpunkt hat eine Farbe und durch das Aneinanderreihen sehr vieler Bildpunkte entsteht das Bild. Nehmen Sie beispielsweise an, ein Bild hat 200 (Breite) * 100 (Höhe) Pixel. Würden Sie Breite und Höhe verdoppeln, hätte das Bild die Maße 400 * 200 Pixel. Der Haken daran: Irgendwo müssen die zusätzlichen Pixel herkommen. Bei einer Verkleinerung auf 100 * 50 Pixel gibt es ebenfalls einen Haken: Welche Pixel sollen gelöscht werden? Bildbearbeitungsprogramme verwenden dafür die so genannte Interpolation, eine mathematische Berechnung der zusätzlichen oder wegfallenden Bildpixel. Vergrößern Sie dagegen ein Bild im Browser mit den HTML-Attributen width und height oder mit 12 Da Bilder, die für das Internet produziert werden, meist dieselbe Auflösung wie der Bildschirm haben, entspricht ein Pixel des Bildes einem Pixel des Bildschirms. Bilder, die gedruckt werden sollen, benötigen höhere Auflösungen.

420

 KOMPENDIUM 

JavaScript

Animation?

Kapitel 13

JavaScript, behält das Bild seine Originalgröße und nur die dargestellte Größe wird geändert. Dies geschieht ebenfalls durch Interpolation. Allerdings interpolieren Browser meist wesentlich schlechter als Bildprogramme. Außerdem ist eine nachträgliche Korrektur durch Scharfzeichnen (schärfen) oder Ähnliches nicht möglich. Das ist verständlich, wenn Sie bedenken, dass Bildbearbeitungsprogramme Spezialisten und Browser eher Mädchen für alles sind. Vektorgrafiken haben das Skalierproblem13 nicht. Da sie aus Punkten, deren Verbindungen und Füllungen bestehen, können sie mathematisch exakt größer oder kleiner gerechnet werden. Allerdings sind Vektorgrafiken auch selten so detailliert wie Pixelbilder. Das bekannteste Vektorgrafikund Animationsformat im Netz ist Flash (bzw. SWF). Ein neueres standardisiertes und herstellerunabhängiges Format ist SVG (Scalable Vector Graphics). Sollten Sie nun Größenänderungen im Browser grundsätzlich unterlassen? Wenn es sich vermeiden lässt, auf jeden Fall. Eine Ausnahme bildet die Animation von flächigen und geometrischen Pixelgrafiken. Das folgende Skript ändert die Höhe (Eigenschaft height des image-Objekts) eines 1-Pixel großen Balkens. Der Netscape Navigator 4.x unterstützt height und width zwar, kann sie allerdings nur lesen und nicht setzen. Die folgende Animation funktioniert dort also nicht. NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3

height

(
)




























width

(
)




























Tabelle 13.6: Die Eigenschaften height und width des image-Objekts

Den Balken finden Sie unter balken.gif auf der CD-ROM. Die Animationsfunktion wird mit setInterval() alle 100 Millisekunden aufgerufen. Soll es schneller gehen oder die Animation zügiger ablaufen, wählen Sie einen kleineren Wert, ansonsten einen größeren. Viele Programmiersprachen animieren mit einem kleinen Flackern zwischen den Bildern, weil erst das alte gelöscht und dann das neue Bild innerhalb einer Millisekunde eingefügt werden muss. Da JavaScript dies vermeidet, sieht eine Animation mit setInterval() »sauber« aus.

13 Unter Skalieren versteht man die Änderung der Bildgröße.

 KOMPENDIUM 

JavaScript

421

Kapitel 13

Bilder In der Animationsfunktion ändert sich die Höhe des Bildes um 1. Wählen Sie einen größeren Wert, wenn die Animation schneller ablaufen soll. i++; document.balken.height = i;

Die Breite muss ebenfalls gesetzt werden, auch wenn sie gleich bleibt. Ansonsten würde der Balken proportional in Höhe und Breite skaliert. document.balken.width = 4;

Die if-Anweisung testet, wie hoch die Grafik bereits ist. Als Maß verwendet das Skript die Eigenschaft availHeight und zieht von ihr 200 Pixel ab. availHeight gibt die Größe des Platzes auf dem Bildschirm an, den der komplette Browser (inklusive Leisten) einnehmen kann. Elemente wie die Windows- oder KDE-Taskleiste werden abgezogen. if (i >= screen.availHeight-200)

Im Netscape Navigator 4.x ist screen ein eigenständiges Objekt und muss daher ohne vorangehendes window. geschrieben werden. Da Sie window in den anderen Browsern einfach weglassen können, sollten Sie dies also auf jeden Fall tun. Eine Alternative wäre window.innerHeight. Diese Eigenschaft gibt die Höhe des Raumes im Browser an, der für das Dokument reserviert ist. Allerdings gibt es diese Eigenschaft nur für Netscape ab Version 4.x. Ist i, die Zählervariable, bereits zu hoch, löscht clearInterval() das Animationsintervall. clearInterval(id);

Hier der komplette Code: Listing 13.18: Eine einfache Größenanimation (animation_groesse .html)

<script language="JavaScript">= screen.availHeight-200) clearInterval(id);

422

 KOMPENDIUM 

JavaScript

Animation?

Kapitel 13

} function start() { id = setInterval('ani()', 100);

} //-->

Abbildung 13.12: Die Bildgröße wird erhöht und die Animation läuft von oben nach unten.

Auf der CD-ROM finden Sie unter dem Namen code\kap13\animation_ groesse_setTimeout.html das Skript mit derselben Funktionalität nur unter Verwendung von setTimeout(). Wollen Sie auf Ihrer Seite Thumbnails (kleine Bilder) anbieten, die beim Anklicken größer gezoomt werden, sollten Sie nicht die Größenskalierung verwenden. Sie sollten vor allem nicht die Bilder für die Übersicht verklei-

 KOMPENDIUM 

JavaScript

423

Kapitel 13

Bilder nern, da die große Variante dennoch geladen werden muss. Tauschen Sie stattdessen bei einem Mausklick das größere mit dem kleineren Bild und geben Sie für das neue Bild die (großen) Originalmaße an.

Tipps und Tricks Es gibt auch eine dritte Art der Animation: die Positionsänderung. Sie erfolgt – auch für Bilder – über Stilanweisungen (CSS) und fällt unter den Oberbegriff DHTML. Mehr dazu erfahren Sie in Kapitel 19 »CSS und JavaScript« und in Kapitel 20 »DHTML«. Die verschiedenen Animationsarten lassen sich natürlich auch mischen. So können Sie beispielsweise eine Größenanimation mit einem Bildtausch verbinden oder den Nutzer Bilder per Drag&Drop platzieren lassen, die beim Anklicken die Farbe wechseln.

13.5

Formatierung und Verschönerung

Das -Tag besitzt einige Attribute, die das Aussehen und das »Drumherum« steuern. Vier davon sind besonders interessant, da sie auf mehreren Browsern verfügbar sind: align – erlaubt, die Ausrichtung von Text an einem Bild zu ändern. Die Eigenschaft entspricht dem align-Attribut des -Tags. border – gibt die Rahmendicke in Pixeln an. hspace – bestimmt den horizontalen Abstand neben dem Bild. vspace – legt den vertikalen Abstand fest.

In Netscape 4.x sind all diese Attribute nur les- und nicht schreibbar. Tabelle 13.7: Weitere Eigenschaften des image-Objekts

NS4.x NS6 align

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3




























border

(
)




























hspace

(
)




























vspace

(
)




























Das folgende Beispiel setzt alle vier Eigenschaften ein. Sie sehen die Ausgangssituation in Abbildung 13.13. Der Code besteht nur aus einem Bild mit zugehörigem Text:

424

 KOMPENDIUM 

JavaScript

Formatierung und Verschönerung

Kapitel 13 Abbildung 13.13: Das Ausgangsbild

Drück mich

Als erste Änderung wird im onload-Ereignis eine Funktion format() aufgerufen. Sie ändert nun die vier Eigenschaften: <script language="JavaScript">

Listing 13.19: Bildattribute ändern (attribute.html)

function format() { document.schalt.align = "middle"; document.schalt.border = 2; document.schalt.hspace = 6; document.schalt.vspace = 10; }

Drück mich Abbildung 13.14: Das Ausgangsbild wurde kräftig durcheinander gewirbelt.

 KOMPENDIUM 

JavaScript

425

Kapitel 13

Bilder Die vier Eigenschaften lassen sich auch dann mit JavaScript ändern, wenn sie bereits im -Tag definiert sind.

Alternativ-Text Der Alternativ-Text steht in HTML immer im alt-Attribut. Der Text wird angezeigt, wenn eine Grafik nicht dargestellt werden kann14 oder als Hilfetext-Kasten, wenn der Nutzer mit der Maus über die Grafik fährt. In JavaScript greifen Sie mit der Eigenschaft alt des image-Objekts auf den Alternativ-Text zu und können ihn auch ändern. Sie sollten diesen Text immer angeben, da sich ansonsten insbesondere Nutzer mit deaktivierten Grafiken ärgern. In Netscape 4.x ist die alt-Eigenschaft nur les- und nicht schreibbar. Tabelle 13.8: Die alt-Eigenschaften des image-Objekts

NS4.x NS6


NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3

























Das folgende Beispiel fügt nachträglich einen Alternativ-Text hinzu: Listing 13.20: Alternativ-Text mit JavaScript (alt.html)

<script language="JavaScript"> function alt() { document.schalt.alt = "Klick mich!"; }



Wenn Sie bei einer Animation aus mehreren Bildern für jedes Bild einen eigenen Alternativ-Text wünschen, hilft die alt-Eigenschaft weiter. Sie können die Alternativ-Texte ebenso wie die Bildnamen in einem Array speichern und mit einer Schleife auslesen.

14 Mögliche Gründe sind meist deaktivierte Grafiken oder ein fehlerhafter Link.

426

 KOMPENDIUM 

JavaScript

Imagemaps und JavaScript

13.6

Kapitel 13

Imagemaps und JavaScript

Für Imagemaps gibt es drei interessante JavaScript-Anwendungen: In href-Attributen der <area>-Tags können Sie auch JavaScript-Funktionen aufrufen. Dies funktioniert genauso wie bei gewöhnlichen Links und wird daher hier nicht erläutert. In Imagemap-Bereichen, also <area>-Tags, stehen auch Ereignisse wie onmouseover und ommouseout zur Verfügung. Sie können also beispielsweise beim Überfahren eines Imagemap-Bereichs das komplette Bild ändern. Opera in Version 6 und frühere Versionen hatten beim onmouseout-Ereignis einen Bug, sodass Rollover-Effekte nicht mehr funktionieren. Mit der Eigenschaft useMap des image-Objekts weisen Sie einem Bild eine Imagemap zu. Der Name der Imagemap folgt in Klammern mit vorangestelltem Doppelkreuz (#)15. In Opera kann useMap nicht gesetzt, sondern nur gelesen werden. NS4.x NS6


NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3










(
)













Tabelle 13.9: Die Eigenschaft useMap des imageObjekts

Das folgende Beispiel verwendet ein einfaches Bild grafik.gif, das aus zwei Farbflächen besteht. Sie finden es auf der CD-ROM im Ordner code\kap13. Dieses Bild soll mit einer Imagemap versehen werden. Der rote Bereich links verweist auf die Webadresse von Markt+Technik (oder eine beliebige andere Seite), der rechte blaue auf Hauser & Wenz. Diese Zuordnung soll sich drehen, wenn der Nutzer eine Schaltfläche anklickt. Der Lösungsansatz ist so gut wie einfach: Sie legen zwei Imagemaps an und wechseln mit useMap die Imagemap. Dazu ist eine einfache Fallunterscheidung mit einer if-Anweisung ausreichend: function map() { if (document.grafik.useMap == "#karte") { document.grafik.useMap = "#karte_gedr"; } else { document.grafik.useMap = "#karte";

15 auch Hash

 KOMPENDIUM 

JavaScript

427

Kapitel 13

Bilder } }

Hier der komplette Code: Listing 13.21: Mit useMap Imagemaps tauschen (usemap.html)

<script language="JavaScript">
//--> Drehen <map name="karte"> <area shape="rect" coords="0,0 50, 100" href="http://www.mut.de" / > <area shape="rect" coords="50,0 100, 100" href="http://www.hauserwenz.de" /> <map name="karte_gedr"> <area shape="rect" coords="0,0 50, 100" href="http://www.hauserwenz.de" /> <area shape="rect" coords="50,0 100, 100" href="http://www.mut.de" />



Um den Effekt des Beispiels zu überprüfen, müssen Sie natürlich wissen, wohin der Link führt. Sie sehen ihn in der Statusleiste des Browsers.

428

 KOMPENDIUM 

JavaScript

Imagemaps und JavaScript

Kapitel 13 Abbildung 13.15: Links ist der Link auf Markt+Technik (siehe Statusleiste).

Abbildung 13.16: Nach Anklicken der Schaltfläche DREHEN ist links nun der Link auf Hauser & Wenz.

 KOMPENDIUM 

JavaScript

429

14

Navigationshilfen

In diesem Kapitel sind kleine, aber wertvolle Skripten versammelt, die alle dabei helfen, Ihre Seiten besser nutzbar zu machen. Als wichtige Objekte kommen gleich zu Beginn das history-Objekt für die Browser-History und das location-Objekt für Weiterleitungen zum Einsatz. Den Links und dem link-Objekt ist ein eigener Abschnitt gewidmet. Anschließend geben Sie Text in der Statusleiste aus, erfahren, wie Laufschriften für Newsticker funktionieren und integrieren eine Druckfunktion mit JavaScript.

14.1

history-Objekt

Das history-Objekt enthält die History des Browsers, also die zuletzt besuchten Seiten. Es ist ein Unterobjekt von window; richtig heißt es also: window.history

Allerdings kann window auch problemlos weggelassen werden.1 Mit den Methoden dieses Objekts können Sie die ZURÜCK- und VORWÄRTS-Schaltflächen2 Ihres Browsers per JavaScript simulieren: back() – die zuletzt besuchte Seite forward() – die nächste Seite in der History. Diese Seite ist immer dann vorhanden, wenn Sie vorher mit back() oder der Browser-Schaltfläche ZURÜCK in der History nach hinten gegangen sind. go(Ort) – springt auf eine bestimmte Seite in der History, die bei Ort

angegeben ist. Die Angabe erfolgt als ganze Zahl. 1 geht also eine Seite in der History nach vorne, -1 eine Seite nach hinten. Alternativ kann auch eine URL oder der Seitentitel angegeben werden. Wenn und nur wenn er in der History vorhanden ist, springt der Browser dorthin.

1

2

In manchen Fällen, beispielsweise beim screen-Objekt, ist dies sogar sinnvoll, da der Netscape Navigator 4.x screen nur als eigenes Objekt kennt. Bei anderen Objekten wie document kann ein Weglassen dagegen zu Fehlern führen. Die Bezeichnungen für diese Schaltflächen variieren. Der Netscape Navigator verwendet beispielsweise WEITERLEITEN statt VORWÄRTS.

 KOMPENDIUM 

JavaScript

431

Kapitel 14

Navigationshilfen Mit go(0) laden Sie die aktuelle Seite neu. Allerdings je nach Browser entweder aus dem Cache (Zwischenspeicher) oder durch erneutes Anfordern vom Server. Letzteres finden Sie häufig beim Internet Explorer. length – gibt an, wie viele Elemente in der History sind. Daraus lässt

sich leider nicht viel schließen, da der Nutzer beliebig mit dem Browser, über die Schaltflächen VORWÄRTS und ZURÜCK und mit Menübefehlen, in der History navigieren kann. Der Ausgangspunkt, das heißt die aktuelle Position in der History, ist also nicht feststellbar. Einzige Ausnahme: Wenn die Länge der History 1 ist, handelt es sich um die erste, in der History geladene Seite. Das folgende Beispiel setzt die drei Methoden ein, um per Link die Navigationsschaltflächen des Browsers nachzubauen: Listing 14.1: Eine selbst gebaute Browsernavigation (history.html)

<script language="JavaScript">
//--> Zurück
Vorwärts
Zwei zurück



In der Praxis wird die selbst definierte History nur selten verwendet, da die meisten Nutzer die Browser-Schaltflächen gewohnt sind.

Bei Frames geht der Internet Explorer nur mit den URLs in der Adressleiste zurück. Mehr dazu erfahren Sie in Kapitel 18 »Frames«.

432

 KOMPENDIUM 

JavaScript

history-Objekt

Kapitel 14 Abbildung 14.1: Die Browsernavigation in der HTMLSeite

Netscape Navigator Der Netscape Navigator ab Version 4 und der Mozilla besitzen drei Eigenschaften, die den anderen Browsern fehlen: current – die URL der aktuellen Seite next – die URL der Seite, die sich als nächste Seite (Schaltfläche VORWÄRTS)

in der History befindet

previous – die URL der zuletzt besuchten Seite

Diese Eigenschaften wirken auf den ersten Blick recht unsicher. Oder können Sie sich vorstellen, dass es erbaulich ist, wenn eine beliebige Website immer erfährt, von welchem Ort der Nutzer auf diese Seite surft? Allzu große Sorge ist allerdings unbegründet. Diese Informationen werden nur an so genannte Signed Scripts, also Skripten mit Zertifikat, oder nach der Bestätigung eines Browserdialogs ausgegeben. Der Nutzer muss also auf jeden Fall zustimmen. Abbildung 14.2: Der Browser verweigert die Erlaubnis.

Mehr zum Thema Sicherheit erfahren Sie in Kapitel 22 »JavaScript und Sicherheit«.

 KOMPENDIUM 

JavaScript

433

Kapitel 14

Navigationshilfen

14.2

Weiterleitung und das location-Objekt

Das location-Objekt dient hauptsächlich zur Weiterleitung auf eine andere Seite, weil das Objekt eigentlich alles rund um die URL der aktuell im Fenster geöffneten Seite enthält. Zur Weiterleitung dient nur eine Eigenschaft des Objekts: href. Sie erhält als Wert die neue Adresse, die relativ oder absolut angegeben werden kann. Die Umleitung erfolgt sofort: Listing 14.2: Umleiten mit href (href.html)

<script language="JavaScript">
} //--> Auf Markt+Technik umleiten

Alternativ zu href können Sie auch die Methode assign("URL") verwenden. Sie hat dieselbe Wirkung, ist aber in der Praxis weniger in Gebrauch.3 window.location.assign("http://www.mut.de");

Die Eigenschaft href und die Methode assign() gibt es bereits in den sehr alten Browsern Netscape 2 und Internet Explorer 3 in beiden Varianten. Tabelle 14.1:

NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3

href































assign()































href und assign()

3

434

Der Grund hierfür wurde noch nie wirklich geklärt. Eine Vermutung ist, dass sich href an das href-Attribut eines HTML-Links anlehnt und deswegen beliebter ist. Eine zweite, dass assign() als Methode natürlich nicht gelesen, sondern nur gesetzt werden kann. Aber wahrscheinlich hat nur irgendjemand einmal mit href begonnen und alle anderen haben abgeschrieben.

 KOMPENDIUM 

JavaScript

Weiterleitung und das location-Objekt

Kapitel 14

Zeitversetzt umleiten Um erst nach einer festlegbaren Zeitspanne umzuleiten, eignet sich am besten setTimeout(). Im folgenden Beispiel startet ein Anklicken der Schaltfläche die Umleitung. Im Textfeld wird die Wartezeit durch eine kleine Animation verkürzt, indem jede Sekunde (setInterval()) ein Punkt ausgegeben wird: <script language="JavaScript">
Listing 14.3: Zeitversetzt umleiten (umleitung_ zeitversetzt.html)

//-->

Wartezeit

Abbildung 14.3: Die Wartezeit wird mit einer Anzeige der bereits vergangenen Sekunden »belohnt«.

 KOMPENDIUM 

JavaScript

435

Kapitel 14

Navigationshilfen

Anker usw. Einige Eigenschaften des location-Objekts liefern nützliche Informationen über die URL bzw. lassen sich auch einzeln setzen: hash – enthält den Teil der URL nach dem Doppelkreuz (#, auch Hash). Damit haben Sie direkten Zugriff auf den Anker. hostname – liefert den Namen des Hosts ohne Port, beispielsweise

www.mut.de. host – gibt den Host mit Port zurück, beispielsweise www.beispiel. de:80. port – enthält nur den Port, beispielsweise den Standard-Webport 80. pathname – steht für den Pfad einer Adresse, beispielsweise /daten/

index.html. protocol – enthält das Protokoll, also http:, ftp: oder Ähnliches. search – liefert den Suchstring hinter dem Fragezeichen (?) in der URL.

Alle Eigenschaften sind bereits in sehr alten Browsern ab Netscape 2 und Internet Explorer 3 in beiden Varianten verfügbar. Tabelle 14.2: Eigenschaften des location-Objekts

NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3































Neu laden Die Methode reload() des location-Objekts sieht auf den ersten Blick sehr praktisch aus. Sie besitzt zusätzlich einen Parameter, der angibt, ob die Seite vom Server oder aus dem Browsercache geladen werden soll. reload(true);

gibt an, dass die Seite vom Server neu angefordert werden soll. Eine Version im Cache soll ignoriert werden. reload(false);

holt die Seite aus dem Browsercache, wenn sie dort vorhanden ist – ansonsten vom Server. Diese Methode wird auch verwendet, wenn der Parameter fehlt.

436

 KOMPENDIUM 

JavaScript

Weiterleitung und das location-Objekt

Kapitel 14

Das Problem mit reload() ist, dass das Verhalten des Browsercache nicht standardisiert ist. Daher ist es nahezu unvorhersagbar, ob der Browser tatsächlich so reagieren wird, wie per reload() gewünscht. Die Methode replace("URL") leitet den Nutzer auf eine neue Seite weiter, ohne dass die alte in der History verbleibt. reload() und replace() sind in älteren Browsern ab Netscape 3 und Internet Explorer 4 verfügbar. NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3































Tabelle 14.3: reload() und replace()

Die Methode go() des history-Objekts lädt mit history.go(0);

die Seite neu, ohne Scroll-Position und Einträge in Formularelemente zu verlieren. Nur globale Variablen und Funktionsaufrufe, beispielsweise mit setInterval() oder setTimeout, werden gestoppt. Zum Testen fügen Sie folgenden Code in Listing 14.3 ein: function los() { setTimeout("umleiten()", 10000); id = setInterval("ausgeben()", 1000);

Listing 14.4: Neu laden mit go() (go.html)

setInterval("neu laden()", 3000);

} . . . function neu laden() { history.go(0); } Abbildung 14.4: Das Skript wird bei drei Punkten gestoppt.

 KOMPENDIUM 

JavaScript

437

Kapitel 14

Navigationshilfen

14.3

Links

Links dienten in den bisherigen Kapiteln hauptsächlich dazu, JavaScriptCode aufzurufen. Neben dieser Möglichkeit können Sie allerdings auch noch auf einige Eigenschaften von Links zugreifen. Der Zugriff auf einen Link erfolgt meist auf einem der drei folgenden Wege: Über die ID per getElementById(ID). Dies funktioniert nur in neueren Browsern. Tabelle 14.4: getElementById()

NS4.x NS6


NS7

IE4 IE5







IE5.5 IE6

O7

M1

K3
















Über document.all.ID für den Internet Explorer 4 (und höher) Über die Kollektion document.links[Index], die alle Links eines Dokuments beinhaltet. Sie enthält entweder den Index oder den Namen (name-Attribut) des Links. Dies funktioniert auch in älteren Browsern. Tabelle 14.5: document.links

NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3































Linkziel ändern Die zwei Eigenschaften href und target für -Tags sind besonders interessant. Allerdings ist hier Vorsicht geboten, da diese Eigenschaften nur für echte Links gelten, also -Tags mit href-Attribut, nicht aber für Anker, die ohne href-Attribut auskommen. Die href-Eigenschaft des link-Objekts gibt es bereits in sehr alten Browsern ab Netscape 2 und Internet Explorer 3 in beiden Versionen. Tabelle 14.6: href-Eigenschaft

NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3































Das folgende Beispiel greift mit document.links[] auf den ersten Link im Skript mit dem Index 0 zu und ändert dann – je nach vorher angegebener URL – mit href das Ziel des Links.

438

 KOMPENDIUM 

JavaScript

Links

Kapitel 14

<script language="JavaScript"> Wechselnder Link

Link ändern Abbildung 14.5: Zuerst geht der Link auf Hauser & Wenz …

Abbildung 14.6: … und dann auf Markt+Technik.

 KOMPENDIUM 

JavaScript

439

Kapitel 14

Navigationshilfen Informationen über die URL, auf die verwiesen wird, erhalten Sie mit denselben Eigenschaften wie beim location-Objekt (siehe Seite 330). target Die target-Eigenschaft entspricht dem target-Attribut aus HTML. Sie steuert, in welchem Fenster ein Link geöffnet wird. Folgende Werte sind möglich: _top – öffnet den Link im obersten Fenster. Alle Frames und Framesets werden verlassen. _blank – öffnet den Link in einem neuen, leeren Fenster. _parent – öffnet den Link im übergeordneten Fenster. Bei einem ver-

schachtelten Frameset muss das nicht das oberste Fenster sein. _self – öffnet den Link in demselben Fenster oder Frame.

Beliebiger Name – gibt es bereits ein Fenster oder einen Frame mit diesem Namen, wird der Link darin geöffnet. Beliebiger Name – gibt es noch kein Fenster oder keinen Frame mit diesem Namen, öffnet sich der Link in einem neuen Fenster, das diesen Namen erhält.

Anker Für Anker gibt es wesentlich weniger Eigenschaften. Die einzig wirklich interessante und in verschiedenen Browsern verfügbare ist das name-Attribut. Hiermit können Sie den Namen eines Ankers ändern. Anker befinden sich allerdings nicht in der Kollektion document.links[]. Daher müssen Sie für den Zugriff getElementById() oder document.all verwenden. Das heißt, das name-Attribut ist zwar im Netscape 4.x vorhanden, kann aber nur für Links verwendet werden, da die anderen Zugriffsarten auf Anker scheitern. In den älteren Browsern Netscape 2 und 3 sowie im Internet Explorer 3 in beiden Varianten ist name nicht vorhanden. Tabelle 14.7: name-Eigenschaft

NS4.x NS6 (
)

440




NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3

























 KOMPENDIUM 

JavaScript

Links

Kapitel 14

Das folgende Beispiel liest die name-Eigenschaft für einen Anker aus. Dabei hilft eine einfache Fallunterscheidung der unterstützten Browserobjekte: <script language="JavaScript">
Listing 14.6: Die anker-Eigenschaft eines Ankers auslesen (anker.html)

//--> Anker Abbildung 14.7: Der Ankername wird korrekt ausgegeben.

Eine sinnvolle Anwendung der name-Eigenschaft von Ankern in der Praxis könnte sein, bei längeren HTML-Dokumenten die Rücksprungmöglichkeiten mit JavaScript zu verwalten. Allerdings bleibt hier das Problem, dass Netscape 4.x ausgeschlossen wird.

 KOMPENDIUM 

JavaScript

441

Kapitel 14

Navigationshilfen

14.4

Statusleiste

Die Statusleiste finden Sie im Browser (meist) ganz unten.4 Ist die Statusleiste ausgeblendet, finden Sie sie im Menü ANSICHT (Internet Explorer, Opera), ANZEIGEN/EIN-/AUSBLENDEN (Netscape Navigator ab Version 6, Mozilla) oder in englischen Versionen des Browsers in der jeweiligen englischen Entsprechung. Die Statusleiste enthält normalerweise nützliche Informationen über Elemente auf der HTML-Seite. Hauptsächlich handelt es sich hierbei um das Linkziel, wenn der Nutzer über einen Hyperlink fährt.5 In JavaScript ist die Statusleiste eine Eigenschaft von window, nämlich status. Mit ihr können Sie den Text in der Statusleiste ändern: window.status = "Neuer Text";

Die Eigenschaft status-Eigenschaftgibt es bereits seit Netscape 2 und Internet Explorer 3 in beiden Versionen. Tabelle 14.8: status-Eigenschaft

NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3































Dies führte zur Idee, beim Überfahren von Links die Adresse durch einen beschreibenden Text in der Statusleiste zu ersetzen. Viele Nutzer bevorzugen es, wenn Sie sehen, wohin ein Link führt. So können sie beispielsweise entscheiden, ob sie den Link in einem neuen Fenster öffnen können oder, weil es ein JavaScript-Link auf ein Popup-Fenster ist, dies nicht möglich ist. Im folgenden Beispiel ändert sich die Statusleiste, wenn der Nutzer mit der Maus über den Link fährt: Listing 14.7: Die Statusleiste ändern (status.html)


442

Meist, weil die Statusleiste im Opera oben oder unten angezeigt werden kann. Wird das Fenster sehr klein, zeigt der Internet Explorer den Text in der Statusleiste nicht mehr an. Der Netscape Navigator blendet die Statusleiste bei einem zu kleinen Browserfenster automatisch aus.

 KOMPENDIUM 

JavaScript

Statusleiste

Kapitel 14

true;">Markt+Technik



Im Listing fällt Ihnen sicher die Anweisung return true nach der Änderung der Statusleiste auf. Da der Link seine URL direkt in die Statusleiste schreiben würde, dies in der Rangfolge aber erst nach dem Ereignis ausgeführt wird, würde der Text in der Statusleiste nach sehr kurzer Zeit durch die URL überschrieben. Dies verhindert return true. Abbildung 14.8: Der Text wird unten in der Statusleiste angezeigt.

Der Netscape Navigator 6 zieht die URL des Links dem Text in der Statusleiste vor. Dieses Verhalten ist nicht vollständig reproduzierbar. Sie müssen allerdings damit rechnen, dass Netscape 6-Nutzer Ihren Text in der Statusleiste nicht sehen, auch wenn sie eingeblendet ist.

Automatisieren Benötigen Sie die Statusleisten-Änderung für mehrere Links6, können Sie sie natürlich auch komfortabel in eine Funktion packen. Hier ist allerdings return true in der Funktion wichtig. function ausgeben(text) { window.status = text; return true; }

Beim Aufruf muss das Rückgabeergebnis der Funktion (true) noch einmal mit return zurückgegeben werden. 6

Die Anwendung ist natürlich nicht auf Links beschränkt. Sie könnten die Funktion auch im onload-Ereignis, von einem Bild usw. aufrufen.

 KOMPENDIUM 

JavaScript

443

Kapitel 14

Navigationshilfen

Wenn Sie dies vergessen, überschreibt die URL den Text in der Statusleiste! Hier der komplette Code: Listing 14.8: Den Text in der Statusleiste automatisiert über eine Funktion ändern (status_funktion. html)

<script language="JavaScript">
//--> Markt+Technik

Hauser und

Wenz Abbildung 14.9: Auch die Änderung über eine Funktion funktioniert reibungslos.

444

 KOMPENDIUM 

JavaScript

Statusleiste

Kapitel 14

Laufschrift Der Begriff Laufschrift steht für bewegten Text, der von links nach rechts oder von rechts nach links in der Statusleiste läuft. Laufschriften waren bei ihrem ersten Auftauchen – wie so vieles – große Mode, später allerdings sehr out. Die große Zeit der Laufschriften ist also sicherlich vorbei, aber gerade weil sie nur noch so selten zum Einsatz kommen, können Laufschriften bei passender Gelegenheit ein Ausrufezeichen setzen. Im Netz kursieren eine Reihe von Skripten zu Laufschriften. Das Grundprinzip ist jedoch überall gleich. Mit setTimeout() oder setInterval() wird die Funktion, die den Text der Statusleiste setzt, immer wieder in regelmäßigen Abständen aufgerufen. Bei jedem Aufruf ändert sich die Ausgabe in der Statusleiste, sodass der Eindruck von Bewegung entsteht. Das folgende Beispiel illustriert dies praktisch. Dabei wird ein Text unablässig in der Statusleiste von links nach rechts bewegt: Zu Beginn stehen immer einige Variablendefinitionen. Der Text steht in einer eigenen Variablen text. Die Länge des Textes wird ebenfalls in einer eigenen Variablen (laenge) aufbewahrt. Als Nächstes folgt eine Arbeitsvariable ausgabe, die immer die aktuelle Ausgabe in der Statusleiste aufnehmen soll. Den Abschluss bildet die Variable id, die den Identifier von setTimeout() aufnehmen wird. var "; var var var

text = " --Kursfeuerwerk des DAX--

--Wachstumsmarkt JavaScript--

laenge = text.length; ausgabe = text; id;

Theoretisch käme dieses Beispiel auch nur mit der Variablen für den Text aus, könnte die Länge direkt daraus ziehen und sie auch als Variable für die Ausgabe verwenden. Dies ist allerdings ein wenig unübersichtlicher. Die Funktion für die Laufschrift teilt den Text. Das erste Zeichen (Position 0) wird vorne mit substring(1, laenge) ausgeschnitten und hinten wieder angefügt.7 Dies sorgt für die Bewegung. function laufschrift() { ausgabe = ausgabe.substring(1, laenge) + ausgabe.substring(0,1);

7

Wenn Sie – wie in diesem Fall – bis zum Ende des Strings schneiden möchten, reicht auch ausgabe.substring(1), die längere Variante ist allerdings etwas leichter zu lesen.

 KOMPENDIUM 

JavaScript

445

Kapitel 14

Navigationshilfen Der geänderte Text landet in der Statusleiste: window.status = ausgabe;

Nun ruft sich die Funktion mit setTimeout() selbst wieder auf. Den Zeitabstand und damit die Geschwindigkeit der Laufschrift können Sie flexibel ändern. id = setTimeout("laufschrift()", 80); }

Die Funktion laufschrift() muss nun noch im onload-Ereignis des -Tags aufgerufen werden.

An dieser Stelle ist das Beispiel eigentlich bereits komplett, wenn die Seite keine Links hat, die einen eigenen Text in der Statusleiste ausgeben möchten. Da dies allerdings meist der Fall ist, besitzt das Skript auch eine Funktion anhalten(), die die Laufschrift anhält und durch einen anderen Text für die Statusleiste ersetzt. Die Funktion wird im onmouseover-Ereignis aufgerufen. Verlässt der Nutzer den Link mit der Maus, soll natürlich wieder die Laufschrift starten. Dazu wird die laufschrift()-Funktion erneut aufgerufen. Da die Variablen gespeichert wurden, macht sie an der Position weiter, an der sie aufgehört hatte. Markt+Technik

Die Funktion zum Anhalten unterbricht mit clearTimeout() das erneute Aufrufen der laufschrift()-Funktion. Daher ist es wichtig, dass der Identifier von setTimeout() vorher einer Variablen (hier id) zugewiesen wurde. function anhalten(linktext) { clearTimeout(id);

Anschließend gibt die Funktion den als Parameter übermittelten Text zum Link aus und liefert true zurück, damit der Text nicht von der URL überschrieben wird. window.status = linktext; return true; }

446

 KOMPENDIUM 

JavaScript

Statusleiste

Kapitel 14

Wenn Sie in der Statusleiste die URL des Links anzeigen möchten, setzen Sie sie statt auf einen Text auf einen leeren String: window.status = "";

Hier der komplette Quellcode im Überblick: <script language="JavaScript">
--Wachstumsmarkt

Listing 14.9: Eine einfache Laufschrift (status_laufschrift. html)

function laufschrift() { ausgabe = ausgabe.substring(1, laenge) + ausgabe.substring(0,1); window.status = ausgabe; id = setTimeout("laufschrift()", 80); } function anhalten(linktext) { clearTimeout(id); window.status = linktext; return true; }

//--> Markt+Technik

Abbildung 14.10: Die Laufschrift läuft durch …

 KOMPENDIUM 

JavaScript

447

Kapitel 14

Navigationshilfen

Abbildung 14.11: … und wird nur angehalten und ersetzt, wenn der Nutzer über einen Link fährt.

Die ruckelige Animation rührt daher, dass verschiedene Buchstaben und Leerzeichen in den meisten Schriften unterschiedlich breit sind. Da sich die Schrift der Statusleiste nicht ändern lässt, gibt es hier keine Abhilfe. Wollen Sie es ruckelfrei, müssen Sie stattdessen Laufschrift in einem Textfeld einsetzen (siehe Kapitel 14.5 »Laufschrift«). Laufschrift umkehren Möchten Sie, dass die Laufschrift statt von rechts nach links lieber genau umgekehrt, also von links nach rechts läuft, müssen Sie nur statt den ersten Buchstaben immer den letzten hinten anhängen. Im Beispiel aus Listing 14.9 müssen Sie nur eine Zeile ändern: Listing 14.10: Die Laufschrift in der Gegenrichtung (status_laufschrift_ andersherum.html)

ausgabe = ausgabe.substring(laenge-1,laenge) + ausgabe.substring(0, laenge1);

Laufschrift komplex Die letzten Beispiele waren angenehm einfach. Dafür erscheint derselbe Laufschrifttext auch mehrmals und läuft nicht sehr lange durch. Um das zu beheben, könnten Sie in der Ausgabe zusätzlich Leerzeichen vor den Text einfügen. Im folgenden Beispiel soll der Text von links nach rechts laufen. Dazu sind folgende Programmelemente notwendig: Bei der Variablendefinition ist die Variable leer hinzugekommen. Sie nimmt die eingefügten Leerzeichen auf. Die Variable pos speichert die Startposition, ab der der Text noch sichtbar ist. Ganz zu Anfang soll der Text komplett unsichtbar sein, daher entspricht die Startposition der Textlänge. Die Variablen ausgabe und id sind noch nicht initialisiert, haben also noch keinen Wert. Sie sollen später den auszugebenden Text beziehungsweise den Identifier von setTimeout() aufnehmen.

448

 KOMPENDIUM 

JavaScript

Statusleiste var var var var var

Kapitel 14

text = "--Kursfeuerwerk des DAX-leer = ""; pos = text.length; ausgabe; id;

--Wachstumsmarkt JavaScript--";

Der ausgegebene Text (Variable ausgabe) besteht aus allen Buchstaben des Textes von der Startposition (pos) bis zum Ende. Die Startposition wird flexibel geändert und ergibt die Bewegung im Text. function laufschrift() { ausgabe = text.substring(pos, text.length);

Nun gilt es, zwei Fälle zu unterscheiden. Wenn der komplette Text dargestellt wird, hat pos den Wert 0. Dies ist erst der Fall, wenn der Text komplett aufgetaucht ist. In diesem Fall muss die Ausgabe in der Statusleiste zum Füllen Leerzeichen enthalten. if (pos == 0) { window.status = leer + ausgabe; leer += " ";

Die Leerzeichen werden so lange erhöht, bis 149 Stück eingefügt wurden. Dieses Auffüllen mit Leerzeichen bei jedem Funktionsaufruf erzeugt die Bewegung von links nach rechts. if (leer.length >= 150) { pos = text.length; leer = ""; }

Der zweite Fall tritt dann ein, wenn der Text auf der linken Seite noch nicht komplett sichtbar ist. Dies ist beispielsweise zu Beginn der Animation der Fall. Hier wird nur der Text ohne Leerzeichen ausgegeben und anschließend die Startposition um 1 nach links verschoben, bis sie 0 erreicht und der erste Fall eintritt. } else { window.status = ausgabe; pos--; }

Damit diese Animation läuft, ruft setTimeout() die Funktion nach 80 Millisekunden erneut auf. id = setTimeout("laufschrift()", 80); }

 KOMPENDIUM 

JavaScript

449

Kapitel 14

Navigationshilfen Die Funktion zum Anhalten der Laufschrift, wenn der Nutzer über den Link fährt, gleicht der aus Listing 14.9 und ist dort erklärt. Im Folgenden sehen Sie den vollständigen Code:

Listing 14.11: Eine etwas komplexere Variante einer Laufschrift (status_laufschrift. html)

<script language="JavaScript">
--Wachstumsmarkt

function laufschrift() { ausgabe = text.substring(pos, text.length); if (pos == 0) { window.status = leer + ausgabe; leer += " "; if (leer.length >= 150) { pos = text.length; leer = ""; } } else { window.status = ausgabe; pos--; } id = setTimeout("laufschrift()", 80); }

function anhalten(linktext) { clearTimeout(id); window.status = linktext; return true; } //--> Markt+Technik

Diese Laufschrift mit Leerzeichen dazwischen lässt sich natürlich auch von rechts nach links realisieren. Allerdings ist dies ein wenig schwieriger, da die Leerzeichen nicht subtrahiert werden können. Stattdessen muss die Zahl der Leerzeichen mit einer Schleife und einer Zählervariablen realisiert werden. Sie finden dieses Beispiel unter dem Namen status_laufschrift_komplex_ andersherum.html auf der CD-ROM im Ordner code\kap14.

450

 KOMPENDIUM 

JavaScript

Statusleiste

Kapitel 14 Abbildung 14.12: Der Text läuft nur einmal und wesentlich länger durch.

Tipps & Tricks Es muss nicht immer die Standardlaufschrift sein. Lassen Sie beispielsweise zufällig Buchstaben auftauchen, bis am Schluss alle Buchstaben des Textes sichtbar sind. So eine Animation ist einfach realisierbar, aber noch nicht auf jeder x-beliebigen Webseite zu finden. Das folgende Beispiel verwendet zwei Grundzüge der Animation: Eine Zufallszahl (Variable z) – Mit ihr wird festgestellt, ob ein Buchstabe angezeigt werden soll. Die Zufallszahl von JavaScript, die Math.random() liefert, liegt zwischen 0 und 1. Sie müssen sie also nur mit Math.round() runden und schon haben Sie 0 oder 1. Bei 0 wird in den String dann ein Leerzeichen eingefügt und bei 1 der Buchstabe selbst. Die Verzögerung (Variable verz) – Die Funktion mit dem zufälligen Ein- und Ausblenden der Buchstaben wird mittels setTimeout() immer wieder aufgerufen. Allerdings erhöht sich bei jedem Durchlauf die Verzögerung um 10 Millisekunden, sodass die Animation immer langsamer wird. Ist die Verzögerung dann größer gleich 300 Millisekunden, wird die Animation abgebrochen und (clearTimeout()) sowie der vollständige Text in der Statusleiste angezeigt. Hier sehen Sie den kompletten Code: <script language="JavaScript">
Listing 14.12: Eine einfache Textanimation (status_textanimation.html)

var ausgabe = ""; var verz = 80; var z; function textani() { for (var i = 0; i <= text.length; i++) { z = Math.round(Math.random());

 KOMPENDIUM 

JavaScript

451

Kapitel 14

Navigationshilfen if (z == 0) ausgabe += " "; else ausgabe += text.charAt(i); } window.status = ausgabe; ausgabe = ""; verz += 10; id = setTimeout("textani()", verz); if (verz >= 300) { clearTimeout(id); window.status = text; } }

//-->

Eine einfache Textanimation

Abbildung 14.13: Die Textanimation wird immer langsamer …

Abbildung 14.14: … und kommt zum Schluss zum Stillstand.

Textanimationen und Ähnliches können Sie natürlich auch in einem Textfeld eines Formulars ausgeben (siehe folgendes Kapitel).

452

 KOMPENDIUM 

JavaScript

Laufschrift

14.5

Kapitel 14

Laufschrift

Wundern Sie sich nicht, diese Überschrift heißt genauso wie die Überschrift auf Seite 445. Dort wurde die Laufschrift allerdings nur in der Statusleiste verwendet. Nun zeigen wir Ihnen, wie Sie die Laufschrift auch in einem Textfeld ausgeben können. Laufschrift in einem Textfeld hat gegenüber der Statusleiste zwei Vorteile: Die Angaben zur URL in der Statusleiste werden nicht überschrieben. Die Statusleiste bleibt frei. Sie können für die Laufschrift eine diktengleiche Schrift8 wie beispielsweise Courier verwenden. Die Änderungen gegenüber der Laufschrift in der Statusleiste halten sich sehr in Grenzen. Als Grundlage dient hier Listing 14.11. Folgende Anpassungen müssen Sie vornehmen: Zuerst benötigen Sie ein Formular mit Formularfeld. Im style-Attribut können Sie eine diktengleiche Schrift wie Courier angeben.

Statt mit window.status in der Statusleiste geben Sie die Laufschrift als Wert des Formularfelds aus. Ein Formularfeld wird Browser-übergreifend am besten mit document.Formularname.Feldname.value angesprochen: document.formular.feld.value = leer + ausgabe;

Mehr zu Formularen erfahren Sie in Kapitel 16 »Formulare«.

Entsprechend der Feldgröße (size-Attribut) sollte die Zahl der maximal möglichen Leerzeichen begrenzt werden. if (leer.length >= 60) { pos = text.length; leer = ""; }

8

Als diktengleich wird eine Schrift bezeichnet, deren Buchstaben und Leer- sowie Sonderzeichen alle gleich breit sind.

 KOMPENDIUM 

JavaScript

453

Kapitel 14

Navigationshilfen Bei Formularfeldern sollte die Laufschrift nicht ganz so schnell ablaufen. Setzen Sie daher den Zeitwert für setTimeout() ein wenig nach oben. id = setTimeout("laufschrift()", 120);

Hier das Listing: Listing 14.13: Laufschrift in einem Textfeld (formular_laufschrift.html)

<script language="JavaScript">
--Wachstumsmarkt JavaScript--";

function laufschrift() { ausgabe = text.substring(pos, text.length); if (pos == 0) { document.formular.feld.value = leer + ausgabe;

leer += " "; if (leer.length >= 60) { pos = text.length; leer = ""; } } else { document.formular.feld.value = ausgabe;

pos--; } id = setTimeout("laufschrift()", 120); } //-->

Mit dem <marquee>-Tag können Sie auch mit HTML eine Laufschrift realisieren. Allerdings ist dieses Tag auf den Internet Explorer, den Netscape Navigator 7 und den Mozilla9 beschränkt. Die übrigen Browser stellen nur den Text dar. Konqueror 3 ignoriert den Text sogar. 9

454

Mozilla kann mit einigen Attributen nichts anfangen.

 KOMPENDIUM 

JavaScript

Laufschrift

Kapitel 14 Abbildung 14.15: Auch Uralt-Browser wie hier Netscape 2 kommen mit der Laufschrift zurecht.

<marquee align="middle" behaviour="scroll" bgcolor="orange" scrolldelay="120" width="400">--Kursfeuerwerk des DAX-- --Wachstumsmarkt JavaScript--

Listing 14.14: Eine Laufschrift mit HTML (marquee.html) Abbildung 14.16: Eine Laufschrift mit <marquee>

NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6
















O7

M1

K3

Tabelle 14.9: <marquee>




Laufschrift schützen Ein Textfeld mit Laufschrift sollte im Allgemeinen schreibgeschützt sein. Dafür rufen Sie einfach im onfocus-Ereignis für das Textfeld (Referenz mit this) die Methode blur() auf.

Der Focus bezeichnet das zurzeit aktive Formularfeld. Die Methode blur() entfernt den Focus. Sobald also das Textfeld aktiv ist, verliert es diesen Status sofort wieder, bevor der Nutzer etwas ausführen kann. Für neuere Browser können Sie alternativ das HTML-Attribut disabled verwenden. Allerdings wird damit auch meist das Textfeld ein wenig anders –

 KOMPENDIUM 

JavaScript

455

Kapitel 14

Navigationshilfen meist aber mit grauer Schrift – dargestellt.10 Wenn Sie dies nicht stört, können Sie auch beide Möglichkeiten gemeinsam verwenden.

Ein Beispiel hierzu finden Sie auf der CD-ROM unter dem Namen formular_laufschrift_gesperrt.html im Verzeichnis code\kap14. Abbildung 14.17: Laufschrift mit der Option disabled

Netscape 2 und 3 sowie Internet Explorer 3 in beiden Versionen unterstützen blur() ebenfalls. Tabelle 14.10: blur()-Methode

und HTML-Attribut disabled im Vergleich

blur()

NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3























































disabled

14.6

Drucken mit JavaScript

Für das Drucken mit JavaScript gibt es mit print() eine eigene Methode des window-Objekts. Sie ruft den Druckerdialog des Browsers auf. Ein automatischer Start des Druckers ist aus Sicherheitsgründen nicht möglich. Tabelle 14.11: Die Methode print() des window-Objekts

NS4.x NS6

NS7










IE4 IE5


IE5.5 IE6

O7

M1

K3
















Da nicht nur die alten Browser Netscape 2 und 3 und Internet Explorer 3 (beide Versionen), sondern auch der Internet Explorer 4 print() nicht unterstützen, sollten Sie entweder eine Browserunterscheidung verwenden oder prüfen, ob das Objekt vorhanden ist (siehe Kapitel 12 »Browserunterscheidung«):

10 Opera 6 und Mozilla verwenden neben der grauen Schrift zusätzlich einen dunkelgrauen Hintergrund, was für Laufschriften nicht sehr gut aussieht.

456

 KOMPENDIUM 

JavaScript

Drucken mit JavaScript

Kapitel 14

if (window.print) { window.print(); }

Im folgenden Skript findet die Methode in der Praxis Anwendung. Ein Link wird mit Druckfunktion belegt: <script language="JavaScript"> Drucken

Abbildung 14.18: Das Dialogfeld DRUCKEN erscheint.

 KOMPENDIUM 

JavaScript

457

Kapitel 14

Navigationshilfen In einer Seite mit Frames kann der Druckbefehl für jeden Frame einzeln gegeben werden.11 Um alle Frames zu drucken, können Sie im Frameset den Druckbefehl aufrufen. Unter Windows scheitert allerdings der Netscape Navigator 4.x an dieser Aufgabe. Hier müssen Sie alle Frames einzeln ansprechen – am besten mit der frames[]-Kollektion – und drucken. Der Internet Explorer besitzt zwei eigene Ereignisse für das Drucken. onbeforeprint vor dem Druck und onafterprint nach dem Druck. Im Internet Explorer 4 unter Windows12 können Sie auch über ActiveX-Objekte drucken.

11 Die Grundlagen zu Frames finden Sie in Kapitel 18 »Frames«. 12 nur Win32, also kein Win 3.1

458

 KOMPENDIUM 

JavaScript

15

Fenster

In manchen Bereichen des Internets springen dem ahnungslosen Nutzer beim Aufrufen – zugegebenermaßen meist zweifelhafter – Webseiten dutzende von neuen Browserfenstern entgegen. Die Begeisterung über diesen Angriff ist natürlich meistens begrenzt. Die sich öffnenden Fenster – auch Popups genannt – sind aber nicht nur auf unseriösen Seiten zu finden, sondern werden auch für Navigationsleisten, Sitemaps oder seriöse Werbemeldungen verwendet. Dieses Kapitel erklärt die Hintergründe von Popups, zeigt zuerst welche Dialogfelder mit JavaScript aufrufbar sind und bietet zuletzt einige besondere Funktionen, beispielsweise wie sich der Fensterinhalt scrollen und das Fenster selbst – allerdings nur in manchen Browsern – bewegen lässt. Die hier verwendeten Methoden und Eigenschaften gehören alle zum window-Objekt. Das ist natürlich logisch, da es sich als Oberobjekt aller Browserobjekte um das Browserfenster kümmert.

15.1

Dialogfelder

Dialogfelder sind kleine Fenster, bei denen der Nutzer in irgendeiner Form reagieren muss. Er tritt mit dem Browser und damit mit der Webseite in einen Dialog.

Warnmeldung Das einfachste Dialogfenster, das in diesem Buch oft zum Einsatz kam, ist die Warnmeldung: window.alert("Meldung");

Listing 15.1: alert()

(alert.html)

 KOMPENDIUM 

JavaScript

459

Kapitel 15

Fenster Diese Zeile erzeugt eine Warnmeldung mit dem Text »Meldung«. Der Nutzer kann dies nur bestätigen. Die Meldung selbst ist zwar normalerweise ein String, kann aber auch ein beliebiger anderer Datentyp sein.

Abbildung 15.1: Die Warnmeldung

alert() gibt es bereits in Uralt-Browsern wie Netscape 2 und 3 und Internet

Explorer 3 in beiden Versionen. Tabelle 15.1: alert()

NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3































Abbildung 15.2: Uralt-Browser wie hier Netscape 2 fügen leider noch ein, dass es sich um einen JavaScript-Aufruf handelt. Neuere Netscape-Browser und Mozilla schreiben das in die Titelleiste.

In der Praxis wird diese Meldung hauptsächlich verwendet, um den Nutzer auf einen Fehler, beispielsweise ein falsch ausgefülltes Formularelement, aufmerksam zu machen. In der Entwicklungsphase eignet sich die Warnmeldung hervorragend, um zwischendurch Werte von Variablen zu testen und auszugeben.1 Vorsicht ist allerdings bei der Verwendung in Schleifen geboten. Ist die Schleife endlos und Sie haben darin eine Warnmeldung, hilft es nur noch, den Browser gewaltsam zu beenden. alert() hält normalerweise das JavaScript-Skript an. In den Netscape Navi-

gator-Versionen 3 und 4 für Linux/Unix tritt allerdings ein anderes Verhalten auf. Hier wird das Skript weiter ausgeführt.

1

460

vor allem, da alert() alle Datentypen ausgeben kann!

 KOMPENDIUM 

JavaScript

Dialogfelder

Kapitel 15

Bestätigung Ein Dialogfeld mit window.confirm("Frage") erlaubt dem Nutzer bereits mehr Interaktion als alert(). Sie stellen in der Meldung eine Frage, die der Nutzer dann mit OK bestätigen oder mit ABBRECHEN verneinen kann. JavaScript liefert bei OK das Ergebnis true, bei ABBRECHEN false. Wenn das Bestätigungsdialogfeld erscheint, wird das Skript angehalten und wartet auf die Nutzereingabe. var erg = window.confirm("Haben Sie einen Führerschein?"); if (erg) { window.alert("Ein Mietwagen ist reserviert."); } else { window.alert("Sie können leider keinen Wagen mieten!"); }

Listing 15.2: confirm()

(confirm.html)

Listing 15.2 fragt den Nutzer, ob er einen Führerschein hat. Je nach Antwort erhält er eine Meldung. Abbildung 15.3: Klickt der Nutzer an, dass er einen Führerschein hat …

Abbildung 15.4: … wird ihm bestätigt, dass er einen Mietwagen erhält.

confirm() ist bereits genauso lange enthalten wie alert(), also seit Netscape 2

beziehungsweise Internet Explorer 3 in der ersten Version. NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3































Tabelle 15.2: confirm()

In Opera 6 kann der Nutzer angeben, dass er künftig nicht mehr von dem Bestätigungs- oder Ausgabefenster gefragt werden soll. Opera merkt sich dann die Antwort. Dies gilt, wenn das Dokument mit NEULADEN neu aufgerufen wird, nicht aber bei einem »harten« Neuladen (z.B. mit (Enter) in der Adressleiste).

 KOMPENDIUM 

JavaScript

461

Kapitel 15

Fenster

Abbildung 15.5: Im Opera kann der Nutzer die Nachfrage deaktivieren.

In der Praxis wird confirm() hauptsächlich zum Bestätigen von Bedingungen verwendet, die der Website-Betreiber nicht selbst prüfen muss. Ein Beispiel ist die bekannte Frage, ob die AGBs gelesen wurden. Allerdings bleibt hier das Problem, dass der Nutzer JavaScript deaktiviert haben könnte. Dann müssen Sie eine Alternative bieten.

Eingabefenster Das dritte Browser-übergreifende Dialogfeld ist das Eingabefenster. window.prompt("Beschreibung", Voreinstellung)

Dieses Fenster bittet den Nutzer in einem Beschreibungstext, etwas in das Textfeld einzugeben. Die Voreinstellung zeigt bereits einen Wert im Textfeld an, kann aber auch weggelassen werden. Allerdings erscheint dann in manchen Browsern undefined als Vorausfüllung. Verwenden Sie also besser einen leeren String, wenn Sie das Feld freilassen möchten. prompt() gibt es seit Netscape 2 und Internet Explorer 3 in der ersten Ver-

sion. Tabelle 15.3: prompt()

NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3































Das folgende Beispiel fragt den Nutzer in zwei Eingabefeldern nach zwei Zahlen und addiert diese anschließend: Listing 15.3: prompt()

(prompt.html)

462

var x = window.prompt("Erste Zahl?", ""); var y = window.prompt("Zweite Zahl?", ""); var erg = parseFloat(x) + parseFloat(y); alert(erg);

 KOMPENDIUM 

JavaScript

Dialogfelder

Kapitel 15 Abbildung 15.6: Geben Sie eine Zahl ein.

Abbildung 15.7: Das Ergebnis wird mit alert() ausgegeben.

Beachten Sie, dass der Rückgabewert von prompt()immer ein String ist. Benötigen Sie eine Zahl, sollten Sie den String in eine Zahl verwandeln, ansonsten kann es bei einer Addition wie im letzten Beispiel zu einer StringKonkatenation kommen. Wollten Sie dieses Beispiel in der Praxis einsetzen, müssten Sie zusätzlich eine Überprüfung einfügen, falls der Nutzer keine Zahl eingibt. In der Praxis kommt prompt() relativ selten zum Einsatz, da nur genau eine Eingabe abgefragt werden kann. Mit einem Formular – das eventuell noch in einem kleinen neuen Browserfenster geöffnet werden kann – haben Sie als Entwickler mehr Freiheiten.

Dialogfelder im Internet Explorer Der Internet Explorer bietet noch einige Besonderheiten, was Dialogfelder betrifft: Die Methode window.showModalDialog("URL", Parameterarray, "Einstellungen") ruft ein Dialogfeld auf, dass der Nutzer verlassen muss, bevor es im Browserfenster weitergeht (daher modal). Dieses Dialogfeld hat noch weitere Optionen. Als Parameter müssen Sie eine URL angeben. Die dort angegebene Seite ist der Inhalt des Dialogfeldes. Optional können Sie an das Dialogfeld mit einem Array Werte übergeben. Diese Werte werden dann im Skript des Dialogfelds (im mit URL aufgerufenen Dokument) mit dialogArguments[] ausgelesen. Ebenfalls optional können Sie noch weitere Optionen für das Dialogfeld angeben. Hier die wichtigsten: – dialogWidth – Breite des Dialogfelds in Pixeln (px) – dialogHeight – Höhe des Dialogfelds in Pixeln (px)

 KOMPENDIUM 

JavaScript

463

Kapitel 15

Fenster – dialogLeft – Position des Dialogs von links (auf dem Bildschirm relativ zur linken oberen Ecke des Dialogs). Angabe in Pixeln (px) – dialogTop – Position des Dialogs von oben (auf dem Bildschirm relativ zur linken oberen Ecke des Dialogs). Angabe in Pixeln (px) – center – richtet den Dialog mittig im Fenster aus, wenn der Wert yes oder 1 ist. Dies ist auch die Standardeinstellung. – resizable – gibt an, ob die Größe des Dialogs änderbar ist (yes oder 1) oder nicht (no oder 0). – scroll – legt fest, ob im Dialogfeld gescrollt werden darf (yes oder 1) oder nicht (no oder 0). – status – erlaubt dem Dialog eine Statusleiste (yes oder 1) oder lässt sie weg (no oder 0). Die Methode window.showModelessDialog("URL", Parameterarray, "Einstellungen") arbeitet genau wie showModalDialog(), allerdings muss das Dialogfeld nicht beendet werden, um ins Hauptfenster zurückzukehren. window.createPopup() erzeugt ein kleines Popup, das direkt über der Seite liegt. Es wird erst mit der Methode show(x, y, Breite, Höhe, Objekt)2 angezeigt und muss komplett per Skript gefüllt werden. Des Weiteren besitzt es keinen Fensterrahmen oder sonstige Fenstereigenschaften. Eine externe URL wie bei den anderen beiden Methoden ist also nicht möglich.

Tabelle 15.4: Die besonderen Dialogfenster des Internet Explorers

NS4.x NS6 showModalDialog() showModelessDialog() createPopup a.

NS7

IE4 IE5

IE5.5 IE6













(
)a













O7

M1

K3

showModelessDialog() ist im Internet Explorer 5.x beim Mac nicht vorhanden.

showModalDialog() Das folgende Beispiel speichert die Namenseingabe des Nutzers (mit prompt()) in einem Array. Das Array wird bei showModalDialog() als Parameter-Array übergeben:

2

464

Das Objekt ist ein optionaler Parameter. Er gibt ein Objekt an, zu dem die x- und y-Koordinate in Relation stehen.

 KOMPENDIUM 

JavaScript

Dialogfelder

Kapitel 15

<script language="JavaScript">
Listing 15.4: Ein Dialogfeld mit showModalDialog() (showModal-

Dialog.html)

//-->

Die Datei inhalt.html, die im Dialogfeld dargestellt wird, greift über die Eigenschaft dialogArguments[] auf die Elemente des übergebenen Arrays zu:

Hallo <script language="JavaScript"> im Dialogfeld!

Listing 15.5: Die Datei mit dem Inhalt des Dialogfelds (inhalt.html)

Abbildung 15.8: Der Nutzer gibt seinen Namen ein …

Abbildung 15.9: … und das Dialogfeld kennt ihn.

 KOMPENDIUM 

JavaScript

465

Kapitel 15

Fenster Dieses Beispiel funktioniert mit showModelessDialog() analog. Sie finden das Beispiel unter showModelessDialog.html auf der CD-ROM im Ordner code\kap15. Wenn Sie die hier vorgestellten Methoden im Web verwenden, müssen Sie natürlich mit einer Browserunterscheidung sicherstellen, dass nur der Internet Explorer den Dialogfeldaufruf erhält. if (window.showModalDialog) { Aufruf; }

createPopup() Das folgende Beispiel für createPopup() lässt das Fenster erscheinen, wenn der Nutzer mit der Maus über einen Link fährt. Das Popup wird mit Stylesheet-Befehlen gefüllt, die von JavaScript aufgerufen werden.3 Zum Schluss zeigt die Methode show() das Popup an. Verlässt der Nutzer den Link mit der Maus, wird das Popup mit hide() wieder ausgeblendet; es ist aber immer noch vorhanden. Listing 15.6: Ein Popup für neuere Internet Explorer (create Popup.html)4

4 <script language="JavaScript">Die Homepage der Firma Hauser und Wenz"; dia.show(150, 150, 200, 60); } function ausblenden() { dia.hide(); }

//--> Hauser und Wenz 3 4

466

Mehr zu Stilanweisungen in JavaScript erfahren Sie in Kapitel 19 »CSS und JavaScript«. Dieses Beispiel besitzt der Einfachheit halber keine Browserunterscheidung, die bei einer proprietären Funktion wie dieser in der Praxis noch ergänzt werden muss.

 KOMPENDIUM 

JavaScript

Popups und andere neue Fenster

Kapitel 15 Abbildung 15.10: Wenn der Nutzer über den Link fährt, erscheint das Popup.

15.2

Popups und andere neue Fenster

Ein neues Fenster oder Popup öffnen Sie in JavaScript mit der Methode open(). Diese Methode und ihre Möglichkeiten verdienen eine ausführlichere Beschreibung. open() hat folgende Parameter: window.open("URL", "Name", "Einstellungen", Ersetzen);

Die Parameter sind alle optional. Werden sie alle weggelassen, öffnet der Browser ein leeres Fenster ohne Namen in den Standardeinstellungen des Browserbefehls für ein neues Fenster.5 URL – gibt die Adresse des Dokuments an, in der das Fenster geöffnet

werden soll. Name – steht für den Namen des Fensters. Dies entspricht der Angabe eines Namens im HTML-Attribut target. Für den Namen gibt es noch einige weitere Optionen, die den Werten des target-Attributs in HTML entsprechen:

– _blank – ein neues Fenster ohne Namen – _parent – das Dokument wird im übergeordneten Frameset geöffnet. – _self – das Dokument wird im aktuellen Fenster oder Frame geöffnet.

5

Internet Explorer: DATEI/NEU/FENSTER; Netscape Navigator DATEI/NEU/NAVIGATORFENSTER

 KOMPENDIUM 

JavaScript

467

Kapitel 15

Fenster – _top – das Dokument wird im aktuellen Fenster auf oberster Ebene geöffnet. Eventuell vorhandene Framesets verschwinden. – _media – das Dokument wird in der Explorer-Leiste MEDIEN des Internet Explorers abgelegt. Dies funktioniert nur im Internet Explorer 6 und ist hauptsächlich für Musik und Videos sinnvoll. – _search – das Dokument wird in der Explorer-Leiste SUCHEN abgelegt. Auch dies funktioniert nur im Internet Explorer, allerdings bereits ab Version 5. Einstellungen – enthält Konfigurationsmöglichkeiten für das neue

Browserfenster. Sie finden diese im Abschnitt »Einstellungen«. Ersetzen – enthält einen Boolean, der angibt, ob das neue Fenster das aufrufende Dokument in der History ersetzt (true) oder nicht (false, Standardeinstellung). window.open() sollte nicht in der Kurzform open() geschrieben werden, da auch document eine open()-Methode besitzt.

Das folgende Beispiel öffnet eine Seite in einem neuen Fenster. Zusätzliche Einstellungen werden nicht vorgenommen: Listing 15.7: Ein Fenster öffnen (open.html)

<script language="JavaScript">
//--> Hauser und Wenz open() gibt es seit Netscape 2 und Internet Explorer 3 in der ersten Version.

468

 KOMPENDIUM 

JavaScript

Popups und andere neue Fenster

Kapitel 15 Abbildung 15.11: Die neue Webseite wurde in einem neuen Fenster geöffnet.

NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3































Tabelle 15.5: window.open()

Einstellungen Bis jetzt war das Öffnen des neuen Fensters noch keine Kunst und hätte auch über das target-Attribut in HTML bewerkstelligt werden können. Erst die möglichen Einstellungen machen es richtig interessant. Die Einstellungen werden durch Kommata getrennt hintereinander angegeben.6 Eigenschaft und Wert sind durch ein Ist-Gleich (=) verbunden: window.open("http://www.hauser-wenz.de", "Fenster1", "width=750,height=500");

Diese Zeilen erzeugen ein neues Browserfenster mit einer Breite von 750 Pixeln und einer Höhe von 500 Pixeln. Viele Einstellungen erwarten Wahrheitswerte als Angabe. Wahrheitswerte werden hier allerdings nicht mit true oder false angegeben, sondern mit yes und no.

6

Sie sollten nach den Kommata keine Leerzeichen einfügen, da Netscape 4.x damit Probleme hat.

 KOMPENDIUM 

JavaScript

469

Kapitel 15

Fenster

Abbildung 15.12: Die Homepage öffnet sich in einem Fenster mit festgelegter Größe.

window.open("http://www.hauser-wenz.de", "Fenster1", "width=750,height=500,resizable=no");

Mit dieser Zeile wird ein Browserfenster erzeugt, das nicht in der Größe veränderbar ist. Alternativ zu yes kann auch die 1 und alternativ zu no die 0 verwendet werden. Wenn Sie den Wert weglassen, wird automatisch von yes ausgegangen. Folgende Zeile verhindert also auch, dass das Browserfenster eine variable Größe hat: window.open("http://www.hauser-wenz.de", "Fenster1", "width=750,height=500,resizable");

Sobald auch nur eine der Einstellungen in open() vorgenommen wird, werden alle anderen Einstellungen automatisch auf no geschaltet. Dies sehen Sie auch an dem Beispiel in Abbildung 15.12. Die folgende Tabelle zeigt alle möglichen Einstellungen. Bei Wahrheitswerten wird nur die Bedeutung von yes erklärt, no ist das Gegenteil. Die Kurzformen dürfen ebenfalls verwendet werden. Tabelle 15.7 gibt für die Einstellungen an, mit welchem Browser sie jeweils kompatibel sind.

470

 KOMPENDIUM 

JavaScript

Popups und andere neue Fenster

Einstellung

Beschreibung

alwaysLowered

Neues Fenster steht immer hinter anderen Browserfenstern (yes). Funktioniert nur mit einem signierten Skript im Netscape (siehe Kapitel 22 »JavaScript und Sicherheit«).

alwaysRaised

Neues Fenster steht immer vor anderen Browserfenstern (yes). Funktioniert nur mit einem signierten Skript im Netscape.

channelmode

Stellt den Internet Explorer ab Version 4 bei yes im ChannelModus dar, das heißt, Adressleiste und Menüleiste verschwinden und der Browser ist in der maximierten Ansicht. Standardeinstellung ist immer no.

dependent

Macht bei yes das neu geöffnete Fenster vom vorigen abhängig. Wird dies geschlossen, schließt sich auch das neu geöffnete.

directories

Blendet bei yes die Symbolleiste mit Links und Ähnlichem ein. Im Internet Explorer heißt sie beispielsweise LINKS, im Netscape Navigator und Mozilla PERSÖNLICHE SYMBOLLEISTE bzw. PERSONAL TOOLBAR. Ist im Netscape Navigator ab Version 6 die Symbolleiste im Originalfenster ausgeblendet, wird sie auch nicht im neuen Fenster angezeigt.

fullscreen

Zeigt bei yes im Internet Explorer ab Version 4 das neue Fenster in der maximierten Ansicht über den gesamten Bildschirm an.

height

Gibt die Höhe des neuen Fensters in Pixeln an. Dazu muss allerdings keine Angabe der Einheit erfolgen.

hotkeys

Deaktiviert bei no die meisten Tastenkürzel (außer beispielsweise zum Schließen des Browsers) für ein neues Fenster. Dies funktioniert allerdings nur bei signierten Skripten im Netscape Navigator.

innerHeight

Legt die innere Höhe, also die Höhe des Dokumentfensters im Netscape Navigator und Mozilla in Pixeln fest. Wird die Größe zu klein, benötigen Sie dazu ein signiertes Skript.

innerWidth

Legt die innere Breite, also die Breite des Dokumentfensters im Netscape Navigator und Mozilla in Pixeln fest. Wird die Größe zu klein, benötigen Sie dazu ein signiertes Skript.

left

Gibt die x-Koordinate in Pixeln von der linken oberen Ecke des Bildschirms aus an und ist auf den Internet Explorer ab Version 4 beschränkt.

location

yes blendet die Adressleiste des Browsers mit der URL ein.

menubar

yes zeigt die Menüleiste des Browsers an.

 KOMPENDIUM 

JavaScript

Kapitel 15 Tabelle 15.6: Einstellungen für Fenster

471

Kapitel 15 Tabelle 15.6: Einstellungen für Fenster (Forts.)

Fenster

Einstellung

Beschreibung

outerHeight

Legt die äußere Höhe, also die Höhe des Browserfensters im Netscape Navigator und Mozilla in Pixeln fest. Wird die Größe zu klein, benötigen Sie dazu ein signiertes Skript.

outerWidth

Legt die äußere Breite, also die Breite des Browserfensters im Netscape Navigator und Mozilla in Pixeln fest. Wird die Größe zu klein, benötigen Sie dazu ein signiertes Skript.

resizable

Gibt an, ob das Browserfenster vom Nutzer in der Größe geändert werden darf (yes), oder nicht (no).

screenX

Gibt die x-Koordinate in Pixeln von der linken oberen Ecke des Bildschirms aus an und ist auf Netscape ab Version 4 und Mozilla beschränkt.

screenY

Gibt die y-Koordinate in Pixeln von der linken oberen Ecke des Bildschirms aus an und ist auf Netscape ab Version 4 und Mozilla beschränkt.

scrollbars

yes zeigt die Scroll-Balken im Browser an.

status

yes zeigt die Statusleiste im Browser an.

titlebar

no blendet die Titelleiste des Browsers aus. Funktioniert nur mit

einem signierten Skript in Netscape ab Version 4. Im Internet Explorer muss es sich um eine HTML Applicationa (HTA) oder um ein sicheres Dialogfeld handeln. Mehr dazu erfahren Sie in Kapitel 22 »JavaScript und Sicherheit«. toolbar

Blendet bei yes die Werkzeugleiste mit Vor, Zurück, Neuladen usw. an. Im Internet Explorer heißt sie STANDARDSCHALTFLÄCHEN, im Netscape Navigator NAVIGATIONS-SYMBOLLEISTE.

top

Gibt die y-Koordinate in Pixeln von der linken oberen Ecke des Bildschirms aus an und ist auf den Internet Explorer ab Version 4 beschränkt.

width

Gibt die Breite des neuen Fensters in Pixeln an, ohne dass die Einheit angegeben sein müsste.

z-lock

Bei yes wird das neu geöffnete Browserfenster nicht über anderen Fenstern angezeigt, wenn es den Fokus erhält.

a.

Quelle zu HTA: http://msdn.microsoft.com/library/default.asp?url=/workshop/author/hta/overview/htaoverview.asp

472

 KOMPENDIUM 

JavaScript

Popups und andere neue Fenster

Kapitel 15

Auf der CD-ROM finden Sie zu den Einstellungen, die nicht in anderen Beispielen in diesem Kapitel verwendet werden, jeweils ein kurzes Beispiel. Die Dateien sind mit den Namen der Einstellungen bezeichnet, beispielsweise toolbar.html für die Einstellung toolbar, und befinden sich im Ordner code\kap15. NS4.x NS6

NS7

IE4 IE5

alwaysLowered













alwaysRaised














channelmode dependent










directories










fullscreen




IE5.5 IE6




O7

M1





















































hotkeys













innerHeight













innerWidth
































location




























menubar




























outerHeight













outerWidth













resizable










screenX













screenY













scrollbars




























status




























titlebar






















toolbar





































top

 KOMPENDIUM 

JavaScript

Tabelle 15.7: Browserkompatibilität der Einstellungen




height

left

K3

























473

Kapitel 15 Tabelle 15.7: Browserkompatibilität der Einstellungen (Forts.)

Fenster

NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3

width

























z-lock



















Die verschiedenen Browser-spezifischen Einstellungen behindern sich nicht gegenseitig, da die Browser die Einstellungen ignorieren, die sie nicht unterstützen. So geben Sie die Position des Fensters im Internet Explorer mit left und top an, im Netscape Navigator und Mozilla dagegen mit screenX und screenY. Der Opera kennt viele Einstellungen nicht, da das Fenster entkoppelt von der Oberfläche als frei schwebendes Fenster oder Register gehandhabt wird. Volle Kontrolle Mit einem signierten Skript erhalten Sie in Netscape bereits eine recht große Kontrolle über den Browser. Das folgende Beispiel erstellt ein neues Browserfenster, das sich immer im Vordergrund befindet (alwaysRaised), nicht in der Größe veränderbar (resizable) ist und ohne Titelleiste (titlebar) auskommt. Die Breite und Höhe wird nachträglich auf die Maße des Bildschirms eingestellt. Listing 15.8: Volle Kontrolle über den Netscape Navigator (kontrolle.html)

<script language="JavaScript">
} //--> Hauser und Wenz

474

 KOMPENDIUM 

JavaScript

Popups und andere neue Fenster

Kapitel 15 Abbildung 15.13: Der Nutzer muss Zugriffsrechte vergeben.

Abbildung 15.14: Die Webseite beherrscht den gesamten Bildschirm und hat nun keinen Rahmen mehr.

Unsignierte Skripte funktionieren nur dann, wenn Sie lokal darauf zugreifen oder eine Sicherheitseinstellung für den Browser ändern. Mehr dazu in Kapitel 22 »JavaScript und Sicherheit«. Opera Der Opera zeigt beim Fenster-Handling einige Eigenheiten. Im neuen Opera 7 werden Fenster mit open() automatisch in einem neuen Register, nicht aber in einem neuen Browserfenster geöffnet. Das Ausblenden von Leisten bewirkt also nichts.

Fokus Wenn Sie ein neues Fenster mit JavaScript aufrufen, erscheint es im Vordergrund, es erhält also den Fokus. Dieses Verhalten ist auch meist gewünscht. Rufen Sie dagegen aus einem Fenster das neue Fenster erneut auf und ein Fenster mit diesem Namen ist bereits geöffnet, erhält es nicht den Fokus. Das ist meist nicht gewünscht und insbesondere bei einer Sitemap oder einer Werbung sehr ärgerlich, da der Nutzer sie auch beim zweiten Laden noch sehen sollte.

 KOMPENDIUM 

JavaScript

475

Kapitel 15

Fenster In diesem Fall hilft die Methode focus() des window-Objekts. Sie gibt einem Fenster (oder Formularelement) den Fokus. In diesem Beispiel soll das neu aufgerufene Fenster beim Laden den Fokus erhalten. Dazu dient das onloadEreignis im -Tag: onload="this.focus()" this steht für das aktuelle Fenster.

Der Zugriff auf das Fenster kann jedoch auch aus dem aufrufenden Skript in Verbindung mit dem Fensternamen erfolgen. Dies ist beispielsweise bei einer externen URL sinnvoll. Listing 15.9: Den Fokus vergeben (focus.html)

<script language="JavaScript">
} //--> Hauser und Wenz

Das Gegenstück zu window.focus() ist blur(). Damit nehmen Sie einem Fenster den Fokus.

Popup unterdrücken Neuere Browser wie der Netscape Navigator 7.01 bieten dem Nutzer die Möglichkeit, Popup-Fenster zu unterdrücken. Für denselben Zweck gibt es auch – meist kostenlos erhältliche – Ergänzungen zu den wichtigsten Browsern. Im Fall des Netscape Navigators ändert der Nutzer das Verhalten unter BEARBEITEN/EINSTELLUNGEN/POPUP-FENSTER. Allerdings werden hier als Popups nur die Fenster blockiert, die im onload-Ereignis aufgerufen werden. Die per onclick aufgerufenen neuen Fenster bleiben davon unberührt. Das heißt, der böswillige Webentwickler könnte per onclick auch mehrere Fenster öffnen. Aber das sind Sie ja nicht …

476

 KOMPENDIUM 

JavaScript

Popups und andere neue Fenster

Kapitel 15 Abbildung 15.15: Popups unterdrücken

Eine ähnliche Popup-Kontrolle wie Netscape besitzen auch Mozilla und Opera. Im Opera 7 hat der Nutzer unter DATEI/VOREINSTELLUNGEN/FENSTER (engl. Version FILE/PREFERENCES/WINDOWS) sogar noch mehr Wahlmöglichkeiten: Er kann alle Popup-Fenster zurückweisen, auch solche, die per Klick aufgerufen wurden. Er kann nur die selbst angeforderten Popup-Fenster, d.h. die per Klick aufgerufenen, anzeigen. Er kann Popup-Fenster im Hintergrund öffnen lassen. Tools zur Popup-Unterdrückung arbeiten meist nach einem gemeinsamen Prinzip. Sie durchsuchen den Quellcode nach einer window.open()-Anweisung. Eine andere Vorgehensweise besteht darin, dass Sie window.open() mit eval() aus mehreren Strings zusammensetzen. Diese Vorgehensweise funktioniert bei Browsern nicht, da diese den Fensteraufruf selbst unterdrücken. Fazit Die entscheidende Frage wird zukünftig noch an Bedeutung gewinnen: Wie gehen Sie als Webentwickler mit geblockten Popups um. Hierauf gibt es zwei Antworten: Sie sollten nicht komplett auf teilweise sinnvolle Popups verzichten. Allerdings müssen Sie auf der anderen Seite Alternativlösungen bieten. Öffnet sich ein Fenster nicht, sollte der Nutzer also nicht im Regen stehen. Popups, die sich beim Anklicken öffnen, wie beispielsweise eine Sitemap, sind heute

 KOMPENDIUM 

JavaScript

477

Kapitel 15

Fenster noch weitgehend sicher, automatisch geladene Popups dagegen erzeugen beim Nutzer häufig bereits zwangsläufig ein merkwürdiges Gefühl, da sie mittlerweile als unseriös angesehen werden oder mit Werbung assoziiert werden.

In Popups schreiben In einem neu geöffneten Fenster können Sie ein neues Dokument oder einen externen Link laden. Alternativ lässt sich das Fenster allerdings auch komplett mit per Skript erstelltem Inhalt füllen. Im folgenden Beispiel enthält ein Text einen Begriff, der in einem PopupFenster näher erläutert werden soll. Der Begriff wird also in einen Link gepackt. Sobald der Nutzer darauf klickt, soll sich ein Fenster mit einem Beschreibungstext öffnen. In der Funktion oeffnen(), die beim Anklicken des Links aufgerufen wird, erhält zuerst die Variable fenster die Referenz auf das neu geöffnete Fenster. Die URL als erster Parameter erhält keine Angaben und es wird auch kein Fenstername vergeben. var fenster = window.open("", "", "width=300,height=200,resizable=no");

Eine Variable speichert nun den HTML-Quellcode für die neue Seite: var text = ""; text += "

Skriptsprache

Eine Scriptsprache führt "; text += "kleinere Programme, so genannte Skripten, aus.

"; text += "";

Die Variable wird mit document.write() in das neue Fenster geschrieben: fenster.document.write(text);

Der Optik halber ändert eine Stilanweisung auch die Hintergrundfarbe. Beachten Sie, dass sie in älteren Browsern – beispielsweise Netscape 4.x – nicht funktioniert. fenster.document.body.style.backgroundColor = "orange";

Zum Schluss schließt die document.close()-Anweisung das Schreiben in das neue Fenster. Fehlt die Anweisung, zeigen der Internet Explorer 4 und die neueren Netscape-Browser sowie Mozilla ein Wartesymbol7 als Mauszeiger, da für sie das Schreiben noch nicht abgeschlossen ist. fenster.document.close(); 7

478

je nach Betriebssystem und Cursor-Satz beispielsweise eine Sanduhr

 KOMPENDIUM 

JavaScript

Popups und andere neue Fenster

Kapitel 15

Hier der vollständige Code: <script language="JavaScript">
Listing 15.10: In ein neues Fenster schreiben (popup_schreiben. html)

var fenster = window.open("", "", "width=300,height=200,resizable=no"); var text = ""; text += "

Scriptsprache

Eine Skriptsprache führt "; text += "kleinere Programme, so genannte Skripten, aus.

"; text += ""; fenster.document.write(text); fenster.document.body.style.backgroundColor = "orange"; fenster.document.close();

} //--> JavaScript ist eine Scriptsprache. Abbildung 15.16: Das neue Fenster wird mit den Inhalten geöffnet, die im alten Fenster definiert wurden.

 KOMPENDIUM 

JavaScript

479

Kapitel 15

Fenster Auf älteren Browsern (z.B. Internet Explorer 4) oder langsameren Systemen kann es zu einem Fehler kommen, wenn das Fenster zu langsam geöffnet und bereits in das Fenster geschrieben wird. Um dies zu verhindern, schreiben Sie erst nach einer mit setTimeout() produzierten Zeitverzögerung in das neue Fenster:

Listing 15.11: Erst nach einer Zeitverzögerung das Dokument füllen (popup_schreiben_ timeout.html)

<script language="JavaScript">
} function schreiben() { var text = ""; text += "

Scriptsprache

Eine Scriptsprache führt "; text += "kleinere Programme, so genannte Skripten, aus.

"; text += ""; fenster.document.write(text); fenster.document.body.style.backgroundColor = "orange"; fenster.document.close(); }

//--> JavaScript ist eine Scriptsprache.

Beachten Sie, dass die Referenz auf das Fenster – hier die Variable fenster – global sein muss, also auch in der Funktion zum Schreiben zur Verfügung stehen muss.

Fenster schließen Das Gegenstück zu window.open() bildet window.close(), um ein beliebiges Browserfenster wieder zu schließen. close() gibt es seit Netscape 2 und Internet Explorer 3 in der ersten Version. Tabelle 15.8: window.close()

480

NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3































 KOMPENDIUM 

JavaScript

Popups und andere neue Fenster

Kapitel 15

In einem einfachen Beispiel wird zuerst ein neues Fenster geöffnet. var fenster = window.open("neu.html", "Fenster1", "width=300,height=200,resizable=no");

In der Datei neu.html für das neue Fenster befindet sich ein Link, der das neue Fenster schließt. Beachten Sie auch, dass das Fenster sich beim Laden automatisch selbst den Fokus gibt. <script language="JavaScript">
Listing 15.12: Ein neues Fenster öffnen (fenster_schliessen. html)

Listing 15.13: Das Fenster lässt sich direkt wieder schließen (neu.html).

//--> Fenster schließen

Alternativ können Sie das Fenster natürlich auch aus der aufrufenden Datei schließen. Für diesen Fall sollten Sie allerdings überprüfen, ob das Fenster bereits erstellt wurde oder aber bereits wieder geschlossen ist, da der Browser ansonsten einen Fehler liefert. Ob ein Fenster geschlossen ist, stellen Sie mit der Eigenschaft closed fest. <script language="JavaScript">
Listing 15.14: Ein neues Fenster im aufrufenden Fenster schließen (fenster_schliessen 2.html)

function schliessen() { if (fenster && !fenster.closed) { fenster.close(); } }

//--> Neues Fenster
Neues Fenster wieder

 KOMPENDIUM 

JavaScript

481

Kapitel 15

Fenster schließen

Abbildung 15.17: Das neue Fenster aus dem Ursprungsfenster schließen

closed gibt es seit Netscape 3 und Internet Explorer 4. Tabelle 15.9: closed

NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3































opener In vielen Fällen ist es nicht nur interessant, das neue Fenster fernzusteuern, sondern auch, aus dem neuen Fenster auf das Ursprungsfenster zuzugreifen. Dazu dient die Eigenschaft opener des window-Objekts. Sie verweist auf das Fenster, das ein Fenster per JavaScript geöffnet hat. In der Praxis wird diese Eigenschaft vor allem für Sitemaps8 verwendet.

8

482

Eine Sitemap zeigt die Struktur einer Webseite und verlinkt zu den wichtigsten Unterpunkten.

 KOMPENDIUM 

JavaScript

Popups und andere neue Fenster

Kapitel 15

Netscape 2 unterstützt opener noch nicht, die späteren Browser sind jedoch damit vertraut. NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3































Tabelle 15.10: opener

Eine Sitemap sehen Sie im folgenden Beispiel. Das Beispiel besteht aus zwei Dateien: der Homepage (home.html), von der aus die Sitemap aufgerufen wird. Ist sie bereits geöffnet, kann sie über denselben Link wieder geschlossen werden.9 Dazu prüft eine Fallunterscheidung, ob das Fenster mit der Sitemap aktuell geöffnet ist. <script language="JavaScript">
Listing 15.15: Die Homepage (home.html)

if (fenster && !fenster.closed) { fenster.close(); } else { fenster = window.open("site.html", "sitemap", "width=200,height=300,resizable=no"); }

} //--> Sitemap


Die Sitemap selbst besteht aus mehreren Links. Die Links rufen jeweils im onclick-Ereignis eine Funktion auf. Diese Funktion verwenden window.opener, um auf das Hauptfenster zu verweisen und ändern dessen Adresse mit location.href. <script language="JavaScript"> Hauptseite
alert()
prompt()
Fenster schließen

Abbildung 15.18: Mit den Links in der Sitemap steuern Sie, was im Ursprungsfenster geschieht.

15.3

Scrollen

Das Scrollen von Fenstern, im Prinzip ein Bewegen des Fensterinhalts, lässt sich nicht nur mit Ankern, sondern auch mit JavaScript bewerkstelligen. Dazu stehen drei Methoden des window-Objekts zur Verfügung: scroll(x, y) – scrollt zu den Koordinaten x und y. Wollen Sie nur hori-

zontal oder vertikal scrollen, sollten Sie die andere Koordinate auf 0 setzen.

484

 KOMPENDIUM 

JavaScript

Scrollen

Kapitel 15

scrollTo(x, y) – ersetzt scroll() in allen Browsern ab Netscape 4.x und

Internet Explorer 4. Da damit nur der Navigator 3 ausgeschlossen wird, ist diese Methode sinnvoll einsetzbar. scrollBy(x, y) – scrollt relativ von der aktuellen Scroll-Position aus.

Auch negative Werte sind möglich. scroll() ist bereits im Netscape Navigator 3 enthalten. NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3

scroll()































scrollTo()































scrollBy()































Tabelle 15.11: Methoden zum Scrollen

Im folgenden Beispiel werden alle drei Methoden eingesetzt, um verschiedene Links mit Scroll-Funktion zu versehen:

Listing 15.17: Scrollen (scrollen.html)

Scroll
















Scroll weiter
















Zurück zum Anfang



Der Aufruf zum Scrollen darf nicht im onclick-Ereignis eines Links stehen, da hier der Link ausgeführt würde. Dann wird, auch wenn der Link ins Leere läuft (Wert: #), die Scroll-Position zurückgesetzt. Der Internet Explorer ab Version 4 unterstützt das Ereignis onscroll, das eintritt, wenn im Fenster gescrollt wird. Der Netscape Navigator ab Version 6 und Mozilla unterstützen die Methoden scrollByLines() und scrollByPages(), um anzugeben, wie viele Linien oder Seiten gescrollt werden sollen. Allerdings sind diese Maßeinheiten sehr schwer einschätzbar.

 KOMPENDIUM 

JavaScript

485

Kapitel 15

Fenster

Abbildung 15.19: Ein Klick auf den Link …

Abbildung 15.20: … und der Browser scrollt.

Scrollen verhindern Wenn Sie das Scrollen des Nutzers komplett unterdrücken möchten, ist das Ausblenden der Scroll-Leisten bei einem neu geöffneten Fenster nicht ausreichend. Sie müssen zusätzlich gelegentlich (setTimeout) die Scroll-Position auf den Ursprung zurücksetzen (scrollTo(0, 0)), da mit einer Scroll-Maus auch ohne Scroll-Leisten gescrollt werden kann. Verwenden Ihre Nutzer ausschließlich den Internet Explorer ab Version 4, können Sie dazu auch das Ereignis onscroll verwenden, da dies zeitsparender als der ständige Aufruf von setTimeout() ist.

486

 KOMPENDIUM 

JavaScript

Fenster bewegen und skalieren

15.4

Kapitel 15

Fenster bewegen und skalieren

Zum Skalieren und Bewegen von Fenstern gibt es vier Methoden des windowObjekts: moveTo(x, y) – bewegt das Fenster zu den festgelegten x- und y-Koordi-

naten. moveBy(x, y) – bewegt das Fenster um die dort angegebene Zahl an

Pixeln. Ein positiver Wert bewegt nach rechts und unten, ein negativer nach links und oben. Die Änderung ist also relativ zur aktuellen Position. resizeTo(Breite, Höhe) – ändert die Größe des Fensters auf die angege-

bene Breite und Höhe. resizeBy(Breite, Höhe) – ändert die Größe des Fensters, indem es die angegebene Breite und Höhe addiert (positiver Wert) oder subtrahiert (negativer Wert). Die Änderung ist also relativ zur aktuellen Größe.

In älteren Browsern sind die vier Methoden nicht vorhanden. NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3

moveTo()































moveBy()































resizeTo()































resizeBy































Tabelle 15.12: Methoden zum Bewegen und Skalieren

Das folgende Beispiel verwendet die Methoden resizeTo() und moveTo(), um ein neu geöffnetes Fenster beim Anklicken eines Links zu vergrößern beziehungsweise zu bewegen: <script language="JavaScript">
Listing 15.18: Das neue Fenster in der Größe verändern und bewegen (fenster_skalieren_ bewegen.html)

function skalieren() { if (fenster && !fenster.closed) { fenster.resizeTo(400,300);

 KOMPENDIUM 

JavaScript

487

Kapitel 15

Fenster fenster.focus(); } } function bewegen() { if (fenster && !fenster.closed) { fenster.moveTo(200,250); fenster.focus(); } }

//--> Neues Fenster
Vergrößern
Bewegen Abbildung 15.21: Das neue Fenster im Original

Auf der CD-ROM finden Sie ein Beispiel, das ein Fenster mit moveBy() und resizeBy() relativ bewegt und skaliert. Es trägt den Namen fenster_ relativ_skalieren_bewegen.html und befindet sich im Ordner code\kap15. Beim relativen Skalieren können Sie natürlich die Informationen des screenObjekts auslesen, um auf die aktuelle Position und Größe des Browserfensters zu reagieren.

488

 KOMPENDIUM 

JavaScript

Fenster bewegen und skalieren

Kapitel 15 Abbildung 15.22: Das Fenster wird vergrößert …

Abbildung 15.23: … und nach unten bewegt.

 KOMPENDIUM 

JavaScript

489

16

Formulare

Ursprünglich waren Webformulare eines der wichtigsten und wenigen Einsatzgebiete von JavaScript. Das hat sich geändert, denn andere – ebenso wichtige und häufig verwendete Formulare – kamen hinzu. Allerdings wird JavaScript insbesondere für die Vollständigkeitsüberprüfung und den direkten Zugriff auf Formularelemente immer noch sehr häufig eingesetzt. JavaScript tritt hier nicht oder nur wenig in Konkurrenz mit serverseitigen Programmiersprachen wie PHP und ASP(.NET), sondern ergänzt sie eher. Dies wird noch eingehender in Kapitel 21 »Vollständigkeitsüberprüfung und reguläre Ausdrücke« diskutiert. Als Erstes lernen Sie jedoch den Zugriff auf die verschiedenen Formularelemente in HTML und die jeweiligen Besonderheiten kennen.

16.1

Zugriff

Den Zugriff auf Formulare und ihre Elemente verwendeten bereits einige Beispiele in den vorangegangenen Kapiteln dieses Buches. Er ist einfach und in allen wichtigen und JavaScript-fähigen Browsern integriert. Zuerst erfolgt der Zugriff auf das Formular: Die am häufigsten eingesetzte Variante ist der Zugriff mit dem nameAttribut. Hier wird dem Formular ein Name gegeben, beispielsweise Formularname. Damit kann das Formular dann angesprochen werden: document.Formularname

Die zweite Alternative ist die Kollektion forms[Index]. Sie enthält alle Formulare einer Seite. Die Formulare werden nach ihrem Auftauchen beginnend bei 0 mit einem Index versehen. Problematisch ist hier allerdings eine spätere Änderung der Reihenfolge der Formulare. document.forms[0]

 KOMPENDIUM 

JavaScript

491

Kapitel 16

Formulare Statt des Index können Sie auch in der forms-Kollektion den Namen des Formulars verwenden. Der direkte Zugriff ist allerdings kürzer und übersichtlicher. Die Formularelemente können ebenfalls auf verschiedene Arten angesprochen werden: direkt mit ihrem Namen (name-Attribut), document.Formularname.Elementname

über die Kollektion elements[Index], die alle Elemente eines Formulars enthält. Diese Zeile greift beispielsweise auf das erste Element im ersten Formular zurück: document.forms[0].elements[0]

Auch auf Formularelemente können Sie über elements["Name"] zugreifen. Dies ist beispielsweise sinnvoll, wenn der Name des Formularelements in einer Variablen gespeichert wird. Dann erfolgt der Zugriff über elements[Variable]. Den Formularzugriff über die hier beschriebenen Methoden gibt es bereits seit Netscape 2 und Internet Explorer 3 in beiden Varianten. Tabelle 16.1: Formularzugriff

NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3































Hat ein Formularelement eine ID, kann der Zugriff natürlich auch direkt über die ID per getElementById() erfolgen. Da dies allerdings auf neuere Browser beschränkt ist, wird es in der Praxis selten eingesetzt.

Zugriff mit name-Attribut Das folgende Beispiel illustriert den Zugriff über das name-Attribut: Der Wert eines Textfeldes wird mit dem value-Attribut nach Anklicken der Schaltfläche ausgelesen. Der Zugriff auf das Textfeld erfolgt nach dem Schema: document.Formularname.Elementname.value

Hier der vollständige Code:

492

 KOMPENDIUM 

JavaScript

Zugriff

Kapitel 16

<script language="JavaScript">

Listing 16.1: Formularzugriff über das nameAttribut (zugriff_name.html)

Abbildung 16.1: Die Ausgabe greift auf das Textfeld zu.

Zugriff mit forms-Kollektion Das Beispiel aus Listing 16.1 ist schnell umgeschrieben, um auch mit der forms-Kollektion zu funktionieren. Da der Zugriff über elements[Index] schnell sehr schwer verwaltbar wird, weil sich die Reihenfolge von Elementen verändern kann, wird er in der Praxis nur dazu verwendet, die Formularelemente per Schleife auszulesen. Daher können Sie, wie im folgenden Beispiel geschehen, auch den Zugriff per Kollektion und den Zugriff per Name mischen: <script language="JavaScript">
 KOMPENDIUM 

JavaScript

Listing 16.2: Zugriff auf Formularelement per forms-Kollektion (zugriff_kollektion. html)

493

Kapitel 16

Formulare alert(document.forms[0].eingabe.value); } //-->

Das Ergebnis dieses Codes ist dasselbe wie in Abbildung 16.1.

16.2

Formularelemente

HTML bietet Ihnen verschiedene Formularelemente, auf die Sie alle mit JavaScript zugreifen können. Die folgenden Abschnitte zeigen Ihnen, was es bei den einzelnen Elementen zu beachten gibt. Die hier vorgestellten Formularelemente stehen in HTML bereits in den ersten Browsern Netscape Navigator 2 und Internet Explorer 3 in der ersten Version zur Verfügung. Tabelle 16.2: Formularelemente

NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3































Textfeld Textfelder sind vielleicht die wichtigsten Formularelemente, denn sie erlauben die Eingabe von beliebigen Werten durch den Nutzer.

Der Zugriff auf den Inhalt des Textfeldes erfolgt über die Eigenschaft value. Mit ihr lesen und setzen Sie den Wert des Textfeldes. Besitzt das Textfeld ein HTML-Attribut value, gibt dies eine Vorausfüllung für das Textfeld an. Passwortfeld Das Passwortfeld ist auch ein Textfeld. Die eingegebenen Buchstaben werden jedoch auf der Webseite mit Sternchen (*)1 verdeckt, damit niemand bei 1

494

Der englische Begriff lautet: Asterisk.

 KOMPENDIUM 

JavaScript

Formularelemente

Kapitel 16

der Passworteingabe mitlesen kann. Passwortfelder werden genauso ausgelesen wie normale Textfelder. Das Passwort findet sich als normaler Wert im value-Attribut. Beachten Sie, dass Passwortabfragen mit JavaScript nicht sicher sind. Der Nutzer hat Zugriff auf den Quellcode des Skripts, auch wenn dieser als externe Datei gespeichert ist. Dort steht auch irgendwo das Passwort. Sie sehen dies an der folgenden beispielhaft dargestellten Prüffunktion, die Sie so oder ähnlich immer noch häufiger im Web finden: var pw = "JavaScript"; function pruefen() { if (document.formular.pass.value == pw) { document.write("Herzlich willkommen!"); } else { alert("Nicht autorisiert!"); } } Abbildung 16.2: Der Nutzer gibt das Passwort ein (links) und die JavaScriptÜberprüfung ergibt, dass es richtig ist. Allerdings kann der Nutzer das Passwort bereits im Quellcode auslesen!

Versteckte Textfelder Die zweite Art Textfeld ist das versteckte Textfeld. Es ist für den Nutzer nicht sichtbar, sondern nur im Quelltext und damit im DOM (Document Object Model) für den JavaScript-Programmierer vorhanden. Das wichtigste Einsatzgebiet von versteckten Textfeldern ist die Speicherung von Werten. Das folgende Beispiel liest den Inhalt eines Textfeldes ein und übergibt ihn mit einem Trennzeichen versehen2 an ein verstecktes Textfeld. Wurden drei Werte eingegeben, liest das Skript das versteckte Formularfeld aus, trennt die drei Werte daraus mit der String-Methode split("Trennzeichen") und gibt sie nacheinander aus:

2

Wählen Sie als Trennzeichen ein Zeichen, das der Nutzer nicht in seinem Text verwendet bzw. untersagen Sie ihm die Verwendung. Das Fragezeichen (?) ist eine zufällige Wahl und oft nicht die beste, falls der Nutzer auch Fragen eingeben darf. Andere gute Trennzeichen sind \t und \n, da der Nutzer sie nicht in das Textfeld eintragen kann.

 KOMPENDIUM 

JavaScript

495

Kapitel 16

Formulare

Listing 16.3: Werte in einem versteckten Formularfeld speichern (hidden.html)

<script language="JavaScript">"); } } i++; }

//-->

Geben Sie nacheinander drei Werte ein!

Abbildung 16.3: Der Nutzer kann drei Werte eingeben …

Die hier gezeigte Anwendung ist natürlich nur ein einfaches Beispiel. Versteckte Textfelder können allerdings in Verbindung mit Cookies oder einer Navigation über Frames noch in wesentlich komplexeren Anwendungen eingesetzt werden. Beispielsweise können Sie in versteckten Textfeldern, die in einem unsichtbaren, weil sehr kleinen Frame liegen, Daten über mehrere Webseiten hinweg speichern.

496

 KOMPENDIUM 

JavaScript

Formularelemente

Kapitel 16 Abbildung 16.4: ... und dann werden die Werte untereinander ausgegeben.

onchange Das onchange-Ereignis tritt ein, wenn der Nutzer in einem Textfeld eine Veränderung vornimmt. Das ist nicht die Eingabe jedes Buchstabens oder Zeichens, sondern tritt erst ein, wenn der Eingabe-Cursor aus dem Textfeld verschwindet. Dies geschieht normalerweise, wenn der Nutzer ein anderes Formularelement anwählt oder auf einen anderen Bereich der Seite klickt. Im folgenden Skript wird bei onchange der Text des Formularfelds ausgegeben: <script language="JavaScript">
Listing 16.4: Mit onchange Änderungen abfangen (onchange.html)

//-->

Betätigt der Nutzer die (Enter)-Taste und das Formular hat nur ein Textfeld, wird dies als Klick auf die Schaltfläche SUBMIT, also als Übertragung des Formulars angesehen. Dies ist auch der Fall, wenn keine SUBMIT-Schaltfläche vorhanden und keine URL für die Übertragung angegeben ist (actionAttribut, siehe Abschnitt »Submit«). Um den Tastendruck auf (Enter) kontrolliert zu berücksichtigen, verwenden Sie die zugehörigen Ereignisse wie beispielsweise onkeydown (siehe Kapitel 11 »Ereignisse und Event-Handler«).

 KOMPENDIUM 

JavaScript

497

Kapitel 16

Formulare

Abbildung 16.5: Wenn sich der Text ändert, wird er ausgegeben.

Auswählen Für das Auswählen von Text in einem Textfeld gibt es eine Methode und ein Ereignis. Die Methode select() wählt den gesamten Text des Textfelds aus. Das Ereignis onselect tritt ein, wenn der Nutzer einen Teil des Textes im Textfeld auswählt. select() gibt es bereits seit Netscape 3 und Internet Explorer 4, onselect erst

seit Netscape 6. Tabelle 16.3: Auswählen

select() onselect

NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3

















































(
)







Opera 7 verhält sich bei onselect nicht wie erwartet. Wird die Auswahl aufgehoben, bleibt der Text dennoch immer markiert. Opera 6 unterstützt onselect nicht. Das folgende Beispiel zeigt Ereignis und Methode im Zusammenspiel. Das Skript wählt mit select() den ganzen Text im Textfeld aus, sobald der Nutzer einen Teil davon auswählt: Listing 16.5: Text auswählen (select.html)

<script language="JavaScript">
498

 KOMPENDIUM 

JavaScript

Formularelemente

Kapitel 16

document.formular.eingabe.select(); }

//-->

Abbildung 16.6: Wählt der Nutzer einen Buchstaben, wird der gesamte Text ausgewählt.

Um die Auswahl von Text im Textfeld wieder aufzuheben, müssen Sie dem Feld mit der Methode blur() den Fokus nehmen. Browser-Besonderheiten Der Internet Explorer ab Version 4 bietet ein selection-Objekt. Mit der Methode createRange() dieses Objekts können Sie ein TextRange-Objekt aus der Auswahl erzeugen und es beispielsweise in ein anderes Textfeld kopieren. Der Netscape Navigator unterstützt in Version 4 die Methode document.getSelection(). Im Navigator 6 ist ein selection-Objekt hinzugekommen, das allerdings nicht mit den Methoden des Internet Explorers arbeitet und auch nicht für Formularelemente funktioniert. Art des Textfeldes Die Eigenschaft type liefert die Art des Textfeldes: text, password oder hidden. So können Sie beispielsweise die versteckten Textfelder identifizieren. type gibt es seit Netscape 3 und Internet Explorer 3 in der zweiten Version. NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3






















 KOMPENDIUM 




JavaScript







Tabelle 16.4: Die Eigenschaft type

499

Kapitel 16

Formulare Sonstiges Auch bei Textfeldern ist natürlich die Optik wichtig. Dafür gibt es zwei Eigenschaften: maxLength – liest und verändert die maximal mögliche Zahl an Zeichen eines Textfeldes. size – liefert und ändert die Größe des Textfeldes in Zeichen.

Tabelle 16.5: Die Eigenschaften maxLength und size

NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3


maxLength

























size

























Eine weitere Eigenschaft – readOnly – sorgt dafür, dass ein Textfeld nicht gelesen werden kann. Sie gleicht in der Wirkung disabled3, ohne dass allerdings der Feldhintergrund grau wird. Außerdem bleibt das Feld veränderbar. Tabelle 16.6: Die Eigenschaft

NS4.x NS6

readOnly




NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3

























Unter dem Namen size_maxLength_readOnly.html finden Sie im Ordner code\kap16 ein Beispiel für die drei Eigenschaften auf der CD-ROM (siehe Abbildung 16.7). Abbildung 16.7: Die drei Eigenschaften können über zwei Schaltflächen geändert werden.

3

500

Mehr Informationen zu diesem Thema erhalten Sie in Kapitel 14.5.1 »Laufschrift schützen«.

 KOMPENDIUM 

JavaScript

Formularelemente

Kapitel 16

Mehrzeilige Textfelder Mehrzeilige Textfelder4 haben gegenüber normalen Textfeldern den Vorteil, dass sie aus mehreren Zeilen bestehen. Die Breite eines mehrzeiligen Textfelds wird in Spalten angegeben. Eine Spalte entspricht dabei einem Zeichen. Beide können über die Eigenschaften rows (Zeilen) und cols (Spalten) geändert werden. Die übrigen Möglichkeiten für mehrzeilige Textfelder entsprechen denen der einzeiligen Textfelder. Die Abfrage oder Festlegung des Wertes erfolgt also beispielsweise über die value-Eigenschaft. document.Formularname.Feldname.value NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3

cols




























rows




























Tabelle 16.7: Die Eigenschaften cols und rows

Das folgende Beispiel ändert die Zahl der Zeilen und Spalten, wenn der Nutzer auf eine Schaltfläche klickt: <script language="JavaScript">
Listing 16.6: Zeilen und Spalten eines mehrzeiligen Textfelds ändern (textarea.html)

== 20) { 40; 10; 20; 5;

//-->

Vorgabewert

4

Mehrzeilige Textfelder werden auch nach dem HTML-Tag-Namen Textarea benannt.

 KOMPENDIUM 

JavaScript

501

Kapitel 16

Formulare

Abbildung 16.8: Klein und groß

Checkbox Checkboxen sind die kleinen Kästchen, die der Nutzer anklickt, um diese Option auszuwählen. Dementsprechend heißen Sie auch Optionen oder Optionskästchen.

502

 KOMPENDIUM 

JavaScript

Formularelemente

Kapitel 16

Der Zugriff erfolgt über den Namen. Mit der Eigenschaft checked stellen Sie fest, ob die Checkbox zurzeit aktiviert ist oder nicht. Diese Eigenschaft liefert einen Wahrheitswert, kann allerdings auch per JavaScript geändert werden. NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3































Tabelle 16.8: checked

Die Eigenschaft steht auch bereits in Uralt-Browsern wie Netscape 2 und Internet Explorer 3 in der ersten Version zur Verfügung. Das Beispiel hierzu überprüft, ob die Checkbox aktuell angewählt ist oder nicht und gibt entsprechend eine Meldung aus: <script language="JavaScript">

Zum Aufrufen der Funktion wird im Beispiel aus Listing 16.6 das onclickEreignis der Checkbox verwendet. Alternativ können Sie natürlich auch eine Schaltfläche anklicken oder den Formularversand5 verwenden. Die Eigenschaft defaultChecked überprüft, ob die Checkbox standardmäßig angeklickt ist (true), also das HTML-Attribut checked besitzt. Neben dieser Eigenschaft gibt es noch einige Eigenschaften, die ebenfalls Textfelder besitzen: type liefert beispielsweise den Typ, also checkbox, name enthält den Namen der Checkbox und value kann einen Wert enthalten, den serverseitige Skripten nutzen können. 5

Grundsätzliches zur Schaltfläche SUBMIT erfahren Sie im Abschnitt »Submit«.

 KOMPENDIUM 

JavaScript

503

Kapitel 16

Formulare

Abbildung 16.9: Die Checkbox wurde angewählt.

Tabelle 16.9: Weitere Eigenschaften von Checkboxen

NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3































In verschiedenen serverseitige Programmiersprachen werden in der Regel auch für Checkboxen (wie für Radiobuttons) gleiche Namen vergeben. Die Checkboxen stehen dann in einem Array zur Verfügung. In manchen Sprachen, beispielsweise PHP, müssen in diesem Fall nach dem Namen auch eckige Klammern erscheinen.

Radiobutton Radiobuttons sind ein wenig schwieriger zu behandeln als Checkboxen, da sie immer in Rudeln auftreten. Radiobuttons, die denselben Namen haben, bilden eine Gruppe. Aus dieser Gruppe darf per Definition nur eine der Optionen ausgewählt sein. Wenn das name-Attribut gleich ist, bleibt die Frage, wodurch die einzelnen Optionen voneinander unterschieden werden können. Eine Möglichkeit ist das value-Attribut. Jeder Radiobutton erhält einen eigenen Wert.6 value gibt es bereits in den ersten Browsern mit JavaScript-Unterstützung. Tabelle 16.10: value-Eigenschaft

6

504

NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3































Eine Alternative wäre die Verwendung des id-Attributs. Dies ist allerdings in der Praxis weniger gebräuchlich.

 KOMPENDIUM 

JavaScript

Formularelemente

Kapitel 16

Eine der Hauptanwendungen von Radiobuttons in Formularen besteht darin, den Nutzer aus mehreren Alternativen eine auswählen zu lassen. Das Paradebeispiel – nämlich das Geschlecht des Nutzers – wird auch im folgenden Skript verwendet. Das Skript übermittelt als Parameter mit dem Schlüsselwort this die Referenz auf den soeben angeklickten Radiobutton. this spielt bei Formularen eine große Rolle, da es einfach im Ereignis an eine Funktion übergeben werden kann und Sie sich die umständliche Adressierung des Formularelements über document.Formularname.Elementname sparen. <script language="JavaScript">

weiblich
männlich

In Kapitel 13 »Bilder« finden Sie ein Beispiel, wie Sie statt eines Radiobutton-Formularelements auch eine Grafik mit ähnlicher Funktionsweise programmieren können.

Auswahlliste Eine Auswahlliste7 besteht aus mehreren Optionen, aus denen der Nutzer eine oder mehrere auswählen kann. Dieses Formularelement ist vielleicht das komplizierteste, bietet dafür aber auch sehr viele Möglichkeiten.

7

Die Auswahlliste wird – nach dem HTML-Tag – auch Select-Element oder Select-Objekt genannt.

 KOMPENDIUM 

JavaScript

505

Kapitel 16

Formulare

Abbildung 16.10: Dieser Nutzer ist männlich.

Prinzipiell gilt es, zwei Arten von Auswahllisten zu unterscheiden: Auswahllisten, bei denen nur eine Option auswählbar ist, Auswahllisten, die das Auswählen von mehreren Optionen erlauben. Diese Auswahllisten besitzen im <select>-Tag das Attribut multiple. Sie finden sie im Abschnitt »Mehrere Optionen auswählen« erläutert. Zugriff auf Auswahllisten Der Zugriff auf eine Auswahlliste erfolgt natürlich bei einem Ereignis. Dies kann das Anklicken einer Schaltfläche im Formular oder auch das Versenden des Formulars sein. Hierbei handelt es sich jedoch um von außen angestoßene Ereignisse. Das sinnvollste Ereignis in der Auswahlliste selbst ist onchange. Es tritt ein, wenn der Nutzer die Option ändert und steht für Auswahllisten bereits in Uralt-Browsern ab Netscape 2 und Internet Explorer 3 zur Verfügung. <select name="auswahl" onchange="ausgabe()"> Option 1 Option 2 Option 3

Dieses Beispiel ruft eine Funktion auf. Natürlich wäre es auch möglich, den Code direkt in das onchange-Ereignis zu schreiben. Dies geschieht sehr oft, wenn Auswahllisten als Navigationselement verwendet werden.8 Der Zugriff auf die Auswahlliste erfolgt nun genau wie bei anderen Formularelementen entweder über die Kollektionen forms[] und elements[] oder über die Namen. var liste = document.formular.auswahl; 8

506

siehe Abschnitt »Auswahlliste als Navigationselement«

 KOMPENDIUM 

JavaScript

Formularelemente

Kapitel 16

Um festzustellen, welche Option ausgewählt ist, hilft die Eigenschaft selectedIndex. Sie enthält den Index (beginnend bei 0) des ausgewählten Optionselements. var index = liste.selectedIndex;

In der Kollektion options[Index] werden alle Optionen einer Auswahlliste gespeichert. Mit der Eigenschaft text ist der Text im jeweiligen -Tag abrufbar: alert(index + ": " + liste.options[index].text);

Das folgende Skript gibt den Index und den Text der ausgewählten Option aus: <script language="JavaScript">

<select name="auswahl" onchange="ausgabe()"> Option 1 Option 2 Option 3

Die hier verwendeten und einige andere wichtige Eigenschaften für Auswahllisten können Sie der folgenden Tabelle entnehmen. Darüber hinaus finden Sie in Tabelle 16.12 eine Übersicht über die Browserkompatibilität.

 KOMPENDIUM 

JavaScript

507

Kapitel 16

Formulare

Abbildung 16.11: Die Warnmeldung gibt Index und Text der Option aus.

Tabelle 16.11: Wichtige Eigenschaften für Auswahllisten

508

Eigenschaft

Beschreibung

options[Index]

Kollektion (Array) aus allen Optionen einer Auswahlliste. Ein Element wird mit der Indexnummer aufgerufen. Name oder ID funktionieren nicht.

defaultSelected

Ergibt true, wenn die Option standardmäßig ausgewählt ist. Kann nur gelesen, nicht gesetzt werden. Die Einstellung wird mit dem HTML-Attribut selected im -Tag vorgenommen.

index

Der Index eines Elements. Er kann nur ausgelesen werden. Dies ist meist nicht sehr sinnvoll, da Elemente vorher mit Index angesprochen werden müssen.

selectedIndex

Der Index der ausgewählten Option. Er kann auch geändert werden. In Auswahllisten, bei denen mehrere Optionen ausgewählt werden können, enthält er den Index der ersten ausgewählten Option. Ist kein Element ausgewählt, entspricht selectedIndex -1.

size

Gibt an, wie viele Zeilen der Auswahlliste sichtbar sind. Eine einzeilige Auswahlliste heißt auch Pulldown-Menü.

text

Der Text innerhalb der -Tags. Er kann auch geändert werden.

value

Der Wert, der im value-Attribut eines -Tags angegeben wurde. Er ist auch änderbar. Der Zugriff erfolgt wie bei text über die options-Kollektion.

 KOMPENDIUM 

JavaScript

Formularelemente

Kapitel 16

NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3

options































defaultSelected































index































selectedIndex


























































size text































value































Tabelle 16.12: Wichtige Eigenschaften für Auswahllisten (Browserkompatibilität)

Die drei Eigenschaften defaultSelected, text und value stehen für das <select>-Objekt9 und das -Objekt zur Verfügung. Dass dies programmiertechnisch nicht dasselbe ist, werden Sie im Abschnitt »Auswahllisten bearbeiten« sehen, in dem Methoden vorgestellt werden, die in verschiedenen Browsern unterschiedlichen Objekten zugeordnet werden. Mehrere Optionen auswählen Damit der Nutzer mehrere Optionen auswählen kann, müssen Sie das HTML-Attribut multiple in das <select>-Tag schreiben. Die gleichnamige Eigenschaft multiple erlaubt Ihnen in neueren Browsern, per JavaScript eine Auswahlliste von einer auf mehrere Optionen und zurück umzuschalten. Das folgende Skript liest alle ausgewählten Optionen einer Auswahlliste aus und bietet zusätzlich eine Schaltfläche, um multiple umzuschalten. Das Auslesen erfolgt mit einer Schleife, die mit length die Zahl der Elemente der Auswahlliste aufnimmt und über selected für jede Option prüft, ob sie ausgewählt ist (true) oder nicht (false). <script language="JavaScript">
Listing 16.10: Eine Auswahlliste mit mehreren Optionen auslesen (auswahlliste_ multiple.html)

Zugriff über options-Kollektion

 KOMPENDIUM 

JavaScript

509

Kapitel 16

Formulare function mehrere() { if (document.formular.auswahl.multiple == true) { document.formular.auswahl.multiple = false; } else { document.formular.auswahl.multiple = true; } }

//-->

<select name="auswahl" multiple> Option 1 Option 2 Option 3

Abbildung 16.12: Die Auswahlliste im Original

Abbildung 16.13: Ein Klick auf die Schaltfläche AUSGEBEN ruft die gleichnamige Funktion auf und gibt Index und Text der ausgewählten Optionen aus.

510

 KOMPENDIUM 

JavaScript

Formularelemente

Kapitel 16

Der Netscape Navigator 4 unterstützt multiple nicht. Sie können hier die Art der Auswahlliste an der type-Eigenschaft erkennen. Der type ist bei Mehrfachauswahl select-multiple und bei Einfachauswahl select-one.

length

NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3





















































































multiple selected




Tabelle 16.13: Weitere Eigenschaften für Auswahllisten (Browserkompatibilität)

Abbildung 16.14: Ein Klick auf die Schaltfläche MEHRERE? erlaubt dem Nutzer nur noch eine Option auszuwählen.

Auswahllisten bearbeiten Das Bearbeiten von Auswahllisten ist nicht ganz so unkompliziert wie das Abfragen. Sie haben mehrere Möglichkeiten: Sie können den Text einer bestehenden Option mit der Eigenschaft text ändern. document.formular.auswahl.options[0].text = "Markt+Technik"

Sie ändern den Wert einer bestehenden Option mit value. document.formular.auswahl.options[0].value = "http://www.mut.de"

Sie löschen eine Option. Dazu setzen Sie die Option auf null. Die Zahl der Optionen, also die length-Eigenschaft der Auswahlliste, verringert sich um 1. document.formular.auswahl.options[0] = null;

 KOMPENDIUM 

JavaScript

511

Kapitel 16

Formulare Sie erstellen ein neues Option-Objekt und fügen es hinzu (Beispiel siehe Listing 16.11). Das Objekt erhält als Parameter den Text10 und optional einen Wert11. Ebenfalls optional ist der Standardstatus, der angibt, ob die Option standardmäßig aktiviert (selected) ist (true) oder nicht (false). Die vierte Option gibt den aktuellen Status an: aktiviert ist true, nicht aktiviert false. var obj = new Option("Text", "Wert", Standardstatus, Status); liste.options[Index] = obj;

Sie verwenden die Methoden add() und remove(), um Elemente hinzuzufügen oder zu entfernen. Option-Objekt hinzufügen und löschen Das folgende Beispiel erstellt beim Anklicken der Schaltfläche HINZUFÜGEN eine neue Option, die als Text den Wert eines Textfelds erhält. Die neue Option wird an das Ende der Auswahlliste angefügt. Eine zweite Schaltfläche dient dazu, die aktuell ausgewählte Option zu entfernen. Die Funktion weg() setzt die Option mit dem Index auf null. Listing 16.11: Ein neues OptionObjekt hinzufügen und eine Option löschen (option_objekt.html)

<script language="JavaScript">
516

 KOMPENDIUM 

JavaScript

Formularelemente

Kapitel 16

else liste.add(obj, liste.selectedIndex);

} else { if (liste.options.add) liste.options.add(obj); else liste.add(obj);

} } function weg() { var liste = document.formular.auswahl; if(liste.options.remove) { liste.options.remove(liste.selectedIndex); } else { liste.remove(liste.selectedIndex); }

} //-->

<select name="auswahl" size="3"> Option 1 Option 2 Option 3 Option 4 Option 5

Die Wirkung dieses Beispiels gleicht Listing 16.13. Das Ergebnis sehen Sie in Abbildung 16.18. Es gäbe noch weitere Möglichkeiten, neue Optionen einzufügen. Beispielsweise ließe sich ein neues Element mit der Methode createElement() erstellen oder mit getElementById() in eine Option einfügen. Da dies allerdings nur auf neuere Browser beschränkt ist, wird diese Möglichkeit hier nicht behandelt. Auswahlliste als Navigationselement Einer der häufigsten Einsatzzwecke ist, Auswahllisten mit Links zu versehen und als Navigationselemente oder kleine Sitemaps zu verwenden. Die Methoden, die bei dieser Aufgabe angewendet werden, sind alle vergleich-

 KOMPENDIUM 

JavaScript

517

Kapitel 16

Formulare bar. Der einzige Unterschied liegt in der Art der Datenspeicherung. Folgende Möglichkeiten erscheinen sinnvoll: Ablegen der URLs in einem Array. Der Index der URL im Array sollte dem Index der Option entsprechen. Ablegen der URLs direkt in der Auswahlliste im value-Attribut. Weniger sinnvoll ist es, die URLs als Text der Auswahlliste zu verwenden, da sie meist entweder nichts sagend oder zu lang sind. In der Praxis ist die zweite Methode am häufigsten anzutreffen. Hier sehen Sie ein einfaches Beispiel:

Listing 16.15: Eine Auswahlliste mit Links (auswahlliste_ links.html)

<script language="JavaScript">
//-->

<select name="auswahl" size="3" onchange="verweis()"> Markt+Technik Hauser und Wenz Spiegel Online

Auf der CD-ROM finden Sie die erste Methode mit den URLs, die im Array gespeichert sind.13 Die Datei hat den Namen auswahlliste_links_array.html und befindet sich im Ordner code\kap16. Ihrer Fantasie sind – mal wieder – keine Grenzen gesetzt. Sie sollten noch eine Alternative einbauen, falls kein Element angeklickt wurde. Natürlich können Sie den Link auch in einem neuen Fenster öffnen oder auch relative Links verwenden. Sie sollten allerdings nicht Ihre ganze Navigation auf dieser Methode aufbauen, wenn Sie nicht sicher wissen oder anfänglich überprüfen, ob Ihre Nutzer JavaScript besitzen bzw. aktiviert haben.

13 Ein erweitertes Beispiel mit Arrays finden Sie auch im nächsten Absatz »Navigation über mehrere Ebenen«.

518

 KOMPENDIUM 

JavaScript

Formularelemente

Kapitel 16

Es ist natürlich auch möglich, den Code zum URL-Wechsel in das onchangeEreignis zu packen. Dies ist meist jedoch nicht sehr übersichtlich. Da die erste Option bei einer einzeiligen Auswahlliste (size="1") nicht von onchange berücksichtigt wird, müssten Sie hier eine Option ohne Link mit einem Text wie beispielsweise »Bitte wählen« einfügen. Navigation über mehrere Ebenen Auswahllisten lassen sich auch dazu verwenden, über mehrere Ebenen zu navigieren. Damit sind komplexere Navigationen möglich. Allerdings haben sich in der Praxis maximal zwei Ebenen bewährt, mehr sollten es nicht sein. Das folgende Beispiel verwendet eine Auswahlliste, die die Unterscheidung der Kategorie ermöglicht. Der Nutzer kann hier zwischen Verlagen oder Nachrichten wählen. Je nach Wahl wird die zweite Auswahlliste mit Verlags-Websites oder Nachrichtenportalen aus den Arrays verlage oder nachr gefüllt. Die Wahl erfolgt in der Funktion über den ausgewählten Index in der Kategorien-Auswahlliste. Die einzelnen Optionen werden in die zweite Auswahlliste mit einer for-Schleife aus dem jeweiligen Array eingelesen: function wechseln() { var kat = document.formular.kategorie; var ang = document.formular.angebot; if (kat.selectedIndex == 1) arr = verlage; else arr = nachr; for(var i in arr) { ang.options[i] = new Option(arr[i]); } }

Die Funktion für die zweite Auswahlliste funktioniert nach einem ähnlichen Prinzip. Wählt der Nutzer einen Eintrag, wird zuerst überprüft, ob ein Element ausgewählt wurde und ob die zweite Liste mehr als ein Element enthält. Ist dies der Fall, stellt eine Fallunterscheidung fest, welche Kategorie in der ersten Auswahlliste ausgewählt ist. Je nach Kategorie wird das richtige URL-Array für Verlage oder Nachrichtenportale verwendet. Die Umleitung erfolgt schließlich mit window.loction.href und der URL, deren Index mit dem in der Liste ausgewählten Eintrag übereinstimmt.

 KOMPENDIUM 

JavaScript

519

Kapitel 16 Listing 16.16: Zwei Auswahllisten bilden bereits eine komplette Navigation (auswahlliste_ navi.html).

Formulare function verweis() { var ang = document.formular.angebot; var kat = document.formular.kategorie; if (ang.selectedIndex != -1 && ang.length > 1) { if (kat.selectedIndex == 1) arr = v_url; else arr = n_url; window.location.href = arr[ang.selectedIndex]; } }

Hier sehen Sie den kompletten Code: <script language="JavaScript"> 1) { if (kat.selectedIndex == 1) arr = v_url; else

520

 KOMPENDIUM 

JavaScript

Formularelemente

Kapitel 16

arr = n_url; window.location.href = arr[ang.selectedIndex]; } }

//-->

<select name="kategorie" size="1" onchange="wechseln()"> Bitte wählen Verlage Nachrichten <select name="angebot" size="1" onchange="verweis()">                 

Abbildung 16.19: Der Nutzer wählt die Kategorie VERLAGE (links). Daraufhin erscheinen rechts die erhältlichen Verlage. Wenn sich der Nutzer einen Verlag aussucht …

Verwenden Sie das HTML-Tag , um Auswahllisten noch übersichtlicher zu formatieren. Das Attribut label im Tag enthält eine Beschreibung der Gruppe. Es steht auch als JavaScript-Eigenschaft ab Netscape Navigator 6 und Internet Explorer 6 zur Verfügung.

Datei-Upload Der Datei-Upload dient dazu, Dateien auf den Server zu laden. Er bietet dem Nutzer also die Möglichkeit, im Dateisystem des Computers eine Datei zu suchen und diese an den Server zu übertragen. Da der Server hier im Spiel ist, erfolgt die Kontrolle normalerweise über eine serverseitige Technologie wie PHP oder ASP.NET.

 KOMPENDIUM 

JavaScript

521

Kapitel 16

Formulare

Abbildung 16.20: ... gelangt er auf dessen Homepage.

Die einzige wirklich interessante Einstellung in JavaScript ist das value-Attribut. Es enthält den Namen der Datei, die hochgeladen werden soll. Diese Eigenschaft kann beispielsweise in JavaScript überprüft werden, um festzustellen, ob eine Datei angehängt wurde. Listing 16.17: Überprüfen, ob beim Datei-Upload eine Datei angehängt ist (dateiupload.html)

<script language="JavaScript">
//-->

522

 KOMPENDIUM 

JavaScript

Formularelemente

Kapitel 16

Abbildung 16.21: JavaScript testet und meldet, dass keine Datei angehängt wurde.

Mehr zur Vollständigkeitsüberprüfung für andere Formularelemente erfahren Sie in Kapitel 21 »Vollständigkeitsüberprüfung und reguläre Ausdrücke«.

Schaltflächen Gelegentlich – beispielsweise bei Auswahllisten als Navigationselementen14 – benötigt ein Formular keine Schaltfläche. Dies wird allerdings eher die Ausnahme sein. In den meisten Fällen muss der Nutzer nach dem Ausfüllen des Formulars eine Schaltfläche anklicken, die das Formular versendet, in eine Datenbank schreibt oder überprüft. Die nächsten Abschnitte zeigen die Funktionsweise der verschiedenen Schaltflächen: Button Das -Tag ist eine Schaltfläche, die unabhängig von einem Formular ist, also keine einschließenden

-Tags benötigt. Diesen Vorteil erkaufen Sie sich damit, dass diese Art von Schaltflächen erst in neueren Browsern ab Netscape 6 und Internet Explorer 4 funktioniert. NS4.x NS6


NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3

























Tabelle 16.16:

-Tag

Der Konqueror stellt die Schaltfläche über die gesamte Fensterbreite dar. Dies ist der optischen Wirkung natürlich nicht zuträglich. Abhilfe schafft nur die Angabe einer Breite per Stylesheet-Befehl mit width. 14 siehe Abschnitt »Bild «

 KOMPENDIUM 

JavaScript

523

Kapitel 16

Formulare

Abbildung 16.22: Der Konqueror zeigt die Schaltfläche zu breit an.

Heißt das, Sie sollten das -Tag meiden? In vielen Fällen kann es durchaus sinnvoll sein, da Sie darin jeden beliebigen HTML-Code (außer Formularelemente und Links) einschließen können. So lässt sich auch ein Bild auf die Schaltfläche legen. JavaScript ist die beste Möglichkeit, die Schaltfläche zum Leben zu erwecken. Denkbar sind verschiedene Ereignisse wie onmouseover oder onclick. Das folgende Beispiel setzt onclick ein, um zu zählen, wie oft der Nutzer die Schaltfläche betätigt: Listing 16.18: Eine Schaltfläche mit -Tag (button.html)

<script language="JavaScript">
//--> Klicken!

524

 KOMPENDIUM 

JavaScript

Formularelemente

Kapitel 16 Abbildung 16.23: Der Autor verwendet kostbare Zeit darauf, diese Schaltfläche achtmal anzuklicken …

Das -Tag kann auch die Funktionsweise eines Submit- oder ResetButtons annehmen. Ändern Sie dazu einfach das Attribut type auf submit oder reset. Die Standardeinstellung für type ist button. Diese muss allerdings nicht angegeben werden. Normale Schaltfläche Die normale Schaltfläche erhält ihre Funktionalität wie ebenfalls erst über JavaScript bei verschiedenen Ereignissen wie onclick und onmouseover. Da die Schaltfläche allerdings Teil des Formulars ist, können Sie darauf auch wie auf ein Formularfeld zugreifen. Also entweder mit Namen: document.Formularname.Schaltflächenname;

oder über die forms- und elements-Kollektionen. Dies benötigen Sie nicht, wenn Sie mit der Schaltfläche eine Funktion starten möchten, die sich um andere Formularelemente kümmert.15 Wollen Sie allerdings eine Eigenschaft der Schaltfläche selbst ändern, benötigen Sie den Zugriff. Im folgenden Beispiel wird die Eigenschaft value verwendet, um die Beschriftung einer Schaltfläche zu ändern, wenn der Nutzer sie anklickt. Die Beschriftung enthält, wie oft der Nutzer den Button angeklickt hat. <script language="JavaScript">
Listing 16.19: Die Eigenschaft einer Schaltfläche ändern (input_button.html)

15 In den letzten Abschnitten werden die normalen Schaltflächen sehr häufig so verwendet.

 KOMPENDIUM 

JavaScript

525

Kapitel 16

Formulare i++; document.formular.schalt.value = i + "ter Klick"; }

//--> Abbildung 16.24: Die Schaltflächenbeschriftung zeigt, wie oft der Nutzer den Button angeklickt hat.

Das onclick-Ereignis reagiert in diesem Beispiel in den Browsern zu langsam. Das heißt, der Nutzer kann mit der Maus öfter klicken, als die Funktion ausgeführt wird. In dieser Anwendung hat dies keine große Bedeutung. Wenn Sie allerdings eine Schaltfläche für ein Spiel verwenden wollen, sollten Sie diese Zeitverzögerung einkalkulieren, da sie nicht verhindert werden kann. Neben der value-Eigenschaft gibt es noch einige weitere Eigenschaften, die die folgende Tabelle zusammenfasst. Sie gelten nicht nur für die normale Schaltfläche mit type="button", sondern auch für Submit- und Reset-Buttons (siehe die folgenden beiden Abschnitte), nicht aber für -Schaltflächen. Tabelle 16.17: Wichtige Eigenschaften für Schaltflächen

526

Eigenschaft

Beschreibung

defaultValue

Standardwert und damit Standardbeschriftung einer Schaltfläche. Erscheint immer, wenn ein Formular mit einem Reset-Button zurückgesetzt wird. Kann auch geändert werden.

name

Der Name einer Schaltfläche im Code. Er kann geändert werden.

size

Die Breite einer Schaltfläche in Zeichen. Auch diese Eigenschaft kann per JavaScript geändert werden.

 KOMPENDIUM 

JavaScript

Formularelemente

Kapitel 16

Eigenschaft

Beschreibung

type

Art des Buttons. Kann die Ausprägungen button, submit oder reset annehmen. Kann nur gelesen werden.

value

Der Wert, der gleichzeitig die Beschriftung der Schaltfläche ist. Er kann ebenfalls geändert werden. Browser vor Internet Explorer 4, Netscape Navigator 6 und Opera 7 passen allerdings die Größe der Schaltfläche nicht automatisch an die neue Beschriftung an. Im Bild sehen Sie Netscape 4.78 beim 107. Klick:

NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3

defaultValue































name































size































type































value































Tabelle 16.18: Wichtige Eigenschaften für Schaltflächen (Browserkompatibilität)

Submit Der Submit-Button () hat zwar die gleichen Eigenschaften wie eine normale Schaltfläche, kann allerdings auch ohne JavaScript eine Handlung vornehmen. Er versendet das Formular.16

16 Da Browser tolerant sind, kann – oder besser sollte – ein Formular nur einen Submit-Button besitzen.

 KOMPENDIUM 

JavaScript

527

Kapitel 16

Formulare Die Informationen, die zum Versand benötigt werden, stehen als HTMLAttribute im

-Tag: method – steht für die Versandmethode. action – enthält die Adresse, an die versendet wird. Hier wird auch unterschieden, ob der Versand an ein serverseitiges Skript oder per E-Mail erfolgt.

In Kapitel 16.3 »Formular versenden …« zeigen wir Ihnen die verschiedenen Versandmethoden, Versandarten und den Versand per JavaScript. Neben der Möglichkeit des Versands gibt es allerdings noch ein Ereignis, das eintritt, wenn der Nutzer den Submit-Button anklickt. Dieses Ereignis heißt onsubmit und steht ebenfalls im -Tag. Dort muss es true zurückliefern, damit das Formular versendet wird.17 Tabelle 16.19: onsubmit

NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3































onsubmit wird in der Praxis dazu verwendet, zu überprüfen, ob das Formular

vollständig ausgefüllt wurde oder ob der Nutzer es tatsächlich abschicken möchte.18 Das folgende Beispiel fragt beim Nutzer noch einmal mit einem Bestätigungsdialog (window.conform) nach, ob die Daten übertragen werden sollen. Die Übertragung erfolgt dann an ein serverseitiges Skript (im action-Attribut): Listing 16.20: Vor der Weiterleitung nachfragen (input_submit.html)

<script language="JavaScript">
//-->
17 Diese Rückgabe ähnelt der, die für das Schreiben in die Statusleiste beim onmouseover- bzw. onmouseout-Ereignis notwendig ist (siehe Kapitel 14.4 »Statusleiste«). 18 Die Vollständigkeitsüberprüfung finden Sie in Kapitel 21 »Vollständigkeitsüberprüfung und reguläre Ausdrücke«.

528

 KOMPENDIUM 

JavaScript

Formularelemente

Kapitel 16

Abbildung 16.25: Vor der Übertragung wird der Nutzer gefragt.

Mit können Sie auch eine Grafik zur VERSENDEN-Schaltfläche machen. Für den JavaScript-Programmierer ändert sich dadurch nichts. Reset Die Reset-Schaltfläche setzt alle Formularelemente auf die Standardwerte zurück. Auch hier ist zuerst kein JavaScript erforderlich. Allerdings kann es sinnvoll sein, nachzufragen, ob der Nutzer seine Formularwerte tatsächlich vollständig löschen möchte. Hierfür gibt es das Ereignis onreset im

Tag. Es erwartet wie onsubmit eine Rückgabe von true. NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3































Tabelle 16.20: onreset

Das folgende Beispiel zeigt eine Überprüfung, bevor das Formular geleert wird: <script language="JavaScript">
 KOMPENDIUM 

JavaScript

Listing 16.21: Das Leeren des Formulars überprüfen (input_reset.html)

529

Kapitel 16

Formulare //-->

Abbildung 16.26: Der Nutzer muss bestätigen, ob er das Formular leeren will …

Abbildung 16.27: … und das Textfeld wird dann auf den Standardwert zurückgesetzt.

Trotz Überprüfung sind Reset-Schaltflächen nicht ganz ungefährlich, insbesondere bei längeren Formularen. Sie sollten auf jeden Fall die Reset-Schaltfläche optisch und lokal weit genug entfernt von der Submit-Schaltfläche positionieren (also anders als in unserem einfachen Beispiel
).

530

 KOMPENDIUM 

JavaScript

Formularelemente

Kapitel 16

Mit der Methode reset() des form-Objekts19 setzen Sie das Formular mittels JavaScript zurück: document.formular.reset();

Allerdings sollten Sie damit vorsichtig umgehen, um nicht das Formular zu löschen, ohne dass der Nutzer den Grund nachvollziehen kann.

fieldset, legend Die beiden Tags

und

bilden zusammen die Möglichkeit, ein Formular in mehrere Bereiche aufzuteilen, die jeweils optisch in einem Kasten liegen. Die einzige sinnvolle JavaScript-Eigenschaft für diese Elemente ist align, die die Ausrichtung enthält. Sie entspricht dem HTML-Attribut align. Beachten Sie, dass der Rahmen des

über die gesamte Fensterbreite verläuft, wenn Sie nicht per Stylesheet-Angabe eine feste Breite vergeben. NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3

align
















Ein Beispiel finden Sie auf der CD-ROM fieldset_legend.html im Ordner code\kap16.

unter

Tabelle 16.21:

,

und die zugehörige Eigenschaft align




dem

Namen

Den Text im

-Tag können Sie beispielsweise mit innerHTML und Zugriff über getElementById() ändern.

label Das -Tag verbindet mit dem HTML-Attribut for die Beschreibung für ein Formularelement mit dem Element selbst. Bei Radiobuttons oder Checkboxen hat dies den Vorteil, dass ein Klick auf die Beschreibung auch automatisch das Kästchen aktiviert. Aus Sicht des JavaScripters gibt es dafür nur eine Eigenschaft: htmlFor, mit der Sie die Verbindung der Beschriftung zu einem beliebigen Formularelement herstellen können. Als Wert muss nur die ID (nicht der Name!) des Formularelements übergeben werden. 19 Dieses Objekt gehört zum

-Tag. Die Methode ist in allen neueren Browsern enthalten.

 KOMPENDIUM 

JavaScript

531

Kapitel 16

Formulare

Abbildung 16.28: Ein Anklicken der Beschreibung aktiviert den zugehörigen Radiobutton20.

Tabelle 16.22:

20

NS4.x NS6

und die

zugehörige Eigenschaft htmlFor

NS7

IE4 IE5

IE5.5 IE6

O7

M1
























htmlFor






















K3

Browser, die das Tag nicht unterstützen, ignorieren es und stellen nur den Beschreibungstext neben dem Formularelement dar.

16.3

Formular versenden …

Mit einem Formular muss irgendetwas geschehen. Grundsätzlich haben Sie folgende Möglichkeiten: Das Formular an ein serverseitiges Skript übergeben. Ein Beispiel und nähere Informationen dazu erhalten Sie im Abschnitt »… an serverseitiges Skript«. Clientseitiges JavaScript erledigt hier häufig noch vor dem Versand die Vollständigkeitsüberprüfung (siehe Kapitel 21 »Vollständigkeitsüberprüfung und reguläre Ausdrücke«). Das Formular direkt per E-Mail versenden. Nähere Informationen erhalten Sie im Abschnitt »… per E-Mail«. Das Formular mit der JavaScript-Methode submit() versenden. Hierzu finden Sie mehr im Abschnitt »… per Methode«. Die Formularelemente in ein Cookie speichern und später per JavaScript wieder auslesen. So lässt sich ein Warenkorb mit JavaScript realisieren. Alternativ können Sie die Formularelemente in ein verstecktes Textfeld in einen unsichtbaren Frame speichern. Beide Methoden lernen Sie in Kapitel 17 »Cookies« kennen.

20 Das Beispiel finden Sie auf der CD-ROM unter dem Namen label.html im Ordner code\kap16.

532

 KOMPENDIUM 

JavaScript

Formular versenden …

Kapitel 16

… an serverseitiges Skript Serverseitigen Skripte dienen meist dazu, Formularinhalte auszuwerten, in Datenbanken zu schreiben oder per E-Mail zu verschicken. Um dies zu ermöglichen, benötigen Sie natürlich eine beliebige serverseitige Programmiersprache auf Ihrem Webserver. Im Formular selbst müssen Sie außerdem einige Einstellungen vornehmen: Die erste Wahl gilt der Versandmethode (method-Attribut des Tags). – GET verschickt die Daten nach einem Fragezeichen (?) an die URL angehängt. Die Namen der Formularelemente (name) und die Werte (value) werden paarweise durch kaufmännische Und (&) getrennt hintereinander gehängt. GET hat den Nachteil, dass die Zahl der Zeichen je nach Browser bzw. Webserver beschränkt ist. Spätestens bei 2.000 Zeichen ist Schluss. Außerdem wird die per GET modifizierte URL im Browser abgelegt, ist also unsicher. – POST sendet die Daten im HTTP-Header, also im Kopf des Webprotokolls HTTP (HyperText Transfer Protocol). Die Formatierung entspricht der bei GET mit Name-Werte-Paaren, die durch kaufmännische Und voneinander getrennt sind. Die Funktionen escape() und unescape() wandeln Strings in URLs um bzw. wieder zurück. Diese und einige neuere Funktionen finden Sie in Kapitel 5.3 im Abschnitt »URLs« erläutert. Als Nächstes geben Sie unter action das serverseitige Skript an. Dies kann als absolute URL oder relativ erfolgen. Beim Versand an den Server schaltet sich JavaScript im Ereignis onsubmit ein, um beispielsweise eine Vollständigkeitsüberprüfung durchzuführen oder eine Nachfrage abzusetzen. Listing 16.20 zeigt ein Beispiel für den serverseitigen Versand mit JavaScript-Nachfrage.

… per E-Mail Formulare können per E-Mail verschickt werden, indem Sie im action-Attribut mit mailto: eine E-Mail-Adresse angeben.

Die obige Zeile versendet das Formular an die E-Mail-Adresse des Autors. Zusätzlich haben Sie die Möglichkeit, einen Betreff anzugeben:

 KOMPENDIUM 

JavaScript

533

Kapitel 16

Formulare Der Betreff muss in URL-Kodierung angegeben sein.21 Mit dem Attribut enctype geben Sie zusätzlich die Art der versendeten Daten an. text/plain steht beispielsweise für puren Text. Wird dieses Attribut weggelassen, erfolgt der Versand als Attachment in URL-kodierter Form.

Beim Empfänger kommt die Mail als Name und Werte-Paar mit allen Formularelementen an. Hat das Formular nur ein Textfeld mit Namen eingabe und der Nutzer gibt test ein, erscheint also: eingabe=test

in der Mail. Bis hierher wirkt das hier geschilderte Verfahren – das häufig auch mailtoVerfahren genannt wird – wie der perfekte Weg, um Formulare zu mailen. Leider ist das nicht so. Folgende Probleme trüben das Bild: Der Internet Explorer 3 unterstützt den Befehl nicht. Das ist aufgrund des verschwindend geringen Marktanteils allerdings nicht allzu beunruhigend. Der zweite Nachteil wirkt schwerer: Den Versand erledigt nicht der Browser selbst. Er benötigt vielmehr ein E-Mail-Programm, das er zuerst aufrufen muss. Die schlechte Nachricht: Verschiedene E-MailProgramme verhalten sich sehr unterschiedlich. Manche übernehmen in Verbindung mit bestimmten Browsern den Betreff oder gar die Empfängeradresse nicht korrekt. Viele Nutzer wollen außerdem lieber von Ihren Freemail-Accounts eine E-Mail an Firmen schreiben, haben diese aber beispielsweise nicht als Versandadresse in den Mailprogrammen eingegeben. Abbildung 16.29: Auch wenn der Versand funktioniert, erhält der Nutzer vorher Warnmeldungen, die er bestätigen muss.

21 siehe Kapitel 5.3 im Abschnitt »URLs«

534

 KOMPENDIUM 

JavaScript

Formular versenden …

Kapitel 16

Unter dem Strich bleibt, dass der Versand mit mailto: auf einem nicht vernachlässigbaren Teil der Rechner (sicherlich 20%) Schwierigkeiten bereitet. Daher werden in der Praxis meist serverseitige Skripten zum Versand von Formularen verwendet. Die mailto-Methode gilt dagegen als eher unprofessionell und eignet sich maximal für kleinere, privat betriebene Websites.

… per Methode Mit der Methode submit() können Sie ein Formular per JavaScript übertragen. Damit lässt sich zum einen jedes beliebige anklickbare HTML-Element für den Versand verwenden und zum anderen können Sie bei einer Überprüfung selbst steuern, wann das Formular versendet wird und sind nicht mehr darauf beschränkt, beim Ereignis onsubmit true zurückzuliefern. NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3































Tabelle 16.23: Die Methode submit() des form-Objekts

Im folgenden Beispiel wird ein Formular versendet, wenn der Nutzer in das Textfeld »Sesam« eingibt. Dies ist natürlich kein guter Passwortschutz, da der gewünschte Text im Quellcode steht. Es illustriert allerdings die Verwendung von submit(): <script language="JavaScript">
Listing 16.22: Per Methode versenden (versand_methode. html)

//-->


 KOMPENDIUM 

JavaScript

535

Kapitel 16

Formulare

Abbildung 16.30: Nur das richtige Wort erlaubt den Versand.

Anweisungen direkt nach der submit()-Methode brechen die Übertragung ab. Das heißt, beispielsweise eine Umleitung auf eine Seite, auf der Sie sich für die E-Mail bedanken, ist auf diese einfache Art nicht möglich. Der Einsatz von setTimeout() ist hier sehr unsicher, da nicht klar ist, wie lange die Übermittlung dauern wird.

536

 KOMPENDIUM 

JavaScript

17

Cookies

Der Begriff Cookies ist älter als das World Wide Web. Bereits vor der Erfindung des HyperText-Prinzips durch Tim Berners-Lee und seine Arbeitsgruppe am CERN geisterten die Begriffe Cookie und MagicCookie durch die IT-Landschaft. Damals bezeichnete ein Cookie einen kleinen Datenblock, der meist zur Identifikation oder für Zugriffsrechte diente und durchaus auch im Hacker-Bereich gebräuchlich war. Mit dieser ursprünglichen Bedeutung haben Cookies im Web heute kaum mehr etwas zu tun. Dort ist ein Cookie eine kleine Textdatei bzw. ein Textfragement, das der Browser auf dem Rechner des Nutzers anlegt. Das heißt, der Browser hat die Kontrolle über die Datei. Der Inhalt kann allerdings mit einer Skriptsprache geändert werden. Dazu ist es wichtig, zu verstehen, warum Cookies eingeführt wurden. Das Webprotokoll HTTP dient zur Übermittlung der notwendigen Daten einer Webseite. Es unterliegt allerdings einer Beschränkung: Es ist ein statusloses Protokoll. Statuslos bedeutet, das Protokoll hat kein Gedächtnis, weiß also nicht, ob es Daten bereits einmal geschickt hat und es kann auch nicht zur Identifizierung des Nutzers herangezogen werden. An dieser Stelle kommen Cookies ins Spiel. Mit einer Skriptsprache kann der Webprogrammierer Informationen in das Cookie schreiben. Diese Informationen müssen aus reinem Text bestehen, da es sich um eine Textdatei handelt. Diese Informationen stehen dem Programmierer nun auch auf anderen Webseiten (derselben Website) zur Verfügung. Mit einer serverseitigen Skriptsprache funktioniert dies folgendermaßen: 1.

Der Browser schickt per HTTP die vorhandenen Cookies des Servers.1

2.

Mit der serverseitigen Skriptsprache können Sie ein neues Cookie setzen oder bestehende ändern und löschen.

3.

Die Änderungen werden per HTTP an den Browser geschickt.

1

Der Server erhält nur Cookies, die er selbst gesetzt hat. Damit wird das Ausspionieren des Nutzers verhindert (siehe Kapitel 17.1 im Abschnitt »Sicherheit«).

 KOMPENDIUM 

JavaScript

537

Kapitel 17

Cookies JavaScript erlaubt als clientseitige Skriptsprache ebenfalls den Zugriff auf Cookies. So können Sie häufig anfallende Aufgaben im Web – wie einen Login oder den Transport von Werten über mehrere Seiten – auch mit JavaScript bewältigen.

17.1

Geschichte

Bevor Sie die ersten Code-Zeilen in JavaScript zu sehen bekommen, finden Sie hier wichtige Details zur Geschichte, den Standards und insbesondere der Sicherheitsdiskussion rund um Cookies.2 Ins Leben gerufen wurden die Cookies von Netscape. Dementsprechend entstand die erste offizielle Dokumentation, die Sie heute noch unter http:// www.netscape.com/newsref/std/cookie_spec.html finden können. Diese Spezifikation ist allerdings nie ein offizieller Standard geworden. Andere Browser haben sie vielmehr stillschweigend übernommen. Cookies werden also von allen relevanten Browsern unterstützt. Tabelle 17.1: Cookies und ihr JavaScript-Zugriff

NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3































Die Cookie-Spezifikation hat mittlerweile die IETF (Internet Engineering Task Force) übernommen. Sie finden den offiziellen Standard unter http:// www.ietf.org/rfc/rfc2965.txt.

Beschränkungen Die Spezifikationen führen zu einigen Beschränkungen für Cookies, die in der Praxis von den meisten Browsern eingehalten werden und die dafür sorgen, dass mit Cookies kein Missbrauch betrieben werden kann: Ein Cookie darf nur 4 Kbyte groß sein. Dies entspricht 4.096 Byte und – da ein Byte einem ASCII-Zeichen entspricht – auch 4.096 ASCII-Zeichen. Ein Browser lässt nicht mehr als 300 Cookies zu. Sobald mehr Cookies vorhanden sind, werden die ältesten automatisch gelöscht.3

2 3

538

Ursprünglich angeheizt wurde diese Diskussion durch einen Artikel in einem amerikanischen Computermagazin, der Cookies verteufelt hat. Dies ist eine einfache Form des First-In/First-Out-Prinzips.

 KOMPENDIUM 

JavaScript

Geschichte

Kapitel 17

Nur die Domain, die ein Cookie gesetzt hat, darf es auslesen. Daher darf www.spiegel.de keine Cookies von www.focus.de lesen.4 Eine Domain oder ein Webserver darf maximal 20 Cookies setzen. Auch hier gilt das First-In/First-Out-Prinzip. Die ältesten Cookies werden also zuerst gelöscht. Cookies können an den Pfad gebunden werden, aus dem sie gesetzt wurden. Ist kein Pfad gesetzt, ist das Cookie für alle Pfade der Domain verfügbar. Als Alternative kann ein Pfad angegeben werden, aus dem eine Cookie ausgelesen wird. Der Originalpfad darf das Cookie dann allerdings weder ändern noch auslesen. Ein Beispiel wäre ein Cookie, das von www.hauser-wenz.de mit dem Pfad support gesetzt wurde. Es kann von www.hauser-wenz.de/publikationen nicht ausgelesen werden.

Sicherheit Bei den genannten5 Beschränkungen stellt sich die Frage, welches Sicherheitsproblem eigentlich bei Cookies besteht? Dass Cookies Viren einschleusen könnten oder böse Dateien enthalten, wird dadurch ausgeschlossen, dass der Browser sie kontrolliert und es sich wirklich nur um reine Textdateien handelt. Das Problem liegt eher im Bereich des Datenschutzes und insbesondere bei den Third Party Cookies6. Die ersten beiden Parteien sind der Nutzer und der Anbieter der Website, die der Nutzer aufruft. Meist hat der WebsiteAnbieter allerdings Werbebanner und als Partner einen Vermarkter. Dieser Vermarkter kann nun – von seinem Server aus – beim Nutzer ein Cookie setzen. Wenn ein Vermarkter genügend Partner hat, findet er über eine andere Webseite, die der Nutzer dann ansurft, diesen Nutzer wieder, da das Cookie vom Server des Vermarkters gesetzt wurde. Daraus ergibt sich – schrittweise – ein Abbild des Surfverhaltens. Auch wenn die Vermarkter damit noch keine persönlichen Informationen über den Nutzer erhält, da seine Identität nicht über das Cookie herausgefiltert werden kann, ist dies dennoch nicht unbedenklich. Die Browserhersteller haben größtenteils darauf reagiert und erlauben dem Nutzer, Cookies von Drittanbietern gesondert zu sperren.

4 5 6

Es gab eine Sicherheitslücke im Internet Explorer 5, die dies außer Kraft setzen konnte. Sie wurde jedoch schnell wieder geschlossen. Interessante und teilweise tendenziöse Artikel zum Thema finden Sie beispielsweise unter http://www.cookiecentral.com. Eine Eindeutschung ergibt in etwa: Cookies einer dritten Partei oder Cookies von Drittanbietern.

 KOMPENDIUM 

JavaScript

539

Kapitel 17

Cookies

Abbildung 17.1: Im Internet Explorer können Sie unter EXTRAS/INTERNETOPTIONEN auf der Registerkarte DATENSCHUTZ/ERWEITERT Cookies von Drittanbietern sperren.

Für den Webprogrammierer ist die Sicherheitsdiskussion daher von Bedeutung, da er damit rechnen muss, das einige Nutzer Cookies abschalten oder zumindest einzeln manuell bestätigen und nur Cookies akzeptieren, wenn sie von der Notwendigkeit und der Seriosität einer Website überzeugt sind. In Kapitel 17.3 »Cookietest« zeigen wir Ihnen, wie Sie feststellen können, ob ein Browser Cookies unterstützt. Sie sollten den Nutzer aber darauf hinweisen, dass und zu welchem Zweck Sie Cookies verwenden. Insbesondere bei Shop-Anwendungen, wo Cookies oft unumgänglich sind, sollten Sie das Thema offensiv angehen und Ihren Kunden reinen Wein einschenken.

Cookies im Browser Ein Webprogrammierer sollte den Spuren seiner Cookies auch im Browser folgen können, um die Anwendungen gut testen zu können. Daher finden Sie in diesem Abschnitt Informationen, wo die wichtigsten Browser Cookies speichern und wie sie eingesetzt werden können. Internet Explorer Der Internet Explorer legt ein eigenes Verzeichnis für die Cookies an. Dort werden die Cookies jedoch erst nach dem Ende der Browsersitzung, also wenn der Browser geschlossen wurde, gespeichert. Davor sind die Cookies nur im Hauptspeicher vorhanden. In älteren Windows-Versionen ist dieses Verzeichnis WINDOWS/COOKIES oder WINNT/COOKIES. Unter Windows 2000 und XP befinden sich die Cookies im Verzeichnis DOKUMENTE UND EINSTELLUNGEN/[NUTZERNAME]/ COOKIES. Jedes einzelne Cookie ist eine .txt-Datei.

540

 KOMPENDIUM 

JavaScript

Geschichte

Kapitel 17 Abbildung 17.2: Ein Cookie von Amazon

Die Sicherheitseinstellungen im Internet Explorer sind recht differenziert. Als Programmierer sollten Sie nie vergessen, dass der Nutzer Cookies sehr exakt steuern kann. Sie finden die Einstellungen im Menü EXTRAS/INTERNETOPTIONEN. Dort lassen sich unter ALLGEMEIN die COOKIES LÖSCHEN. Auf der Registerkarte DATENSCHUTZ kann die Cookie-Verwaltung sehr detailliert eingestellt werden. Das Sicherheitslevel lässt sich per Schieberegler steuern. Unter ERWEITERT hat der Nutzer die Möglichkeit, sämtliche Parameter einzeln einzustellen. Auch für einzelne Websites lassen sich Cookie-Einstellungen vornehmen. Die meisten Nutzer nehmen diese Einstellungen jedoch nicht vor oder kennen Sie nicht. Daher haben viele Nutzer die Einstellung MITTEL, die die Standardeinstellung ist. Wenn Sie im Internet Explorer Cookies ausschalten, also das höchste Sicherheitsniveau wählen, können Sie immer noch aus einer lokalen Datei Cookies anlegen. Netscape Navigator und Mozilla Der Netscape Navigator speichert Cookies in der Datei cookies.txt. Beim Mac heißt die Datei allerdings MagicCookie. In neueren Netscape-Versionen ab 6 steht ein eigener COOKIE-MANAGER zur Verfügung. Die Einstellungen für Cookies finden Sie unter BEARBEITEN/EINSTELLUNGEN. Im Register RIVATSPHÄRE & SICHERHEIT enthält der Eintrag COOKIES die verschiedensten Einstellungen. Durch Anklicken des Menüpunkts GESPEICHERTE COOKIES VERWALTEN öffnet sich der COOKIE-MANAGER, der es Ihnen ermöglicht, einzelne oder alle Cookies zu löschen. In Kapitel 22 »JavaScript und Sicherheit« erfahren Sie mehr zu den Privatsphärenstufen und wie Sie in JavaScript damit umgehen. Opera Opera legt die Cookies in einer .dat-Datei ab, die je nach Opera-Version und Betriebssystem unterschiedlich benannt ist. Mögliche Namen sind cookie.dat und cookie4.dat. Die .dat-Datei benötigt zum Bearbeiten einen eigenen Editor. Glücklicherweise stellt Opera bzw. Josef Segur den Opera File Explorer zur Verfügung, der diese Datei öffnen und ändern kann. Sie finden ihn unter http://www.opera. com oder direkt unter http://www.users.westelcom.com/jsegur/.

 KOMPENDIUM 

JavaScript

541

Kapitel 17

Cookies In Opera stellt der Nutzer die Sicherheitseinstellungen für Cookies unter DATEI/EINSTELLUNGEN/PRIVATSPHÄRE ein.7 Konqueror Im Konqueror sind die benötigten Sicherheitseinstellungen für Cookies unter EINSTELLUNGEN/KONQUEROR EINRICHTEN zu finden. Ein hübscher Kuchen neben dem Eintrag COOKIES weist den Weg. Auf der Registerkarte VERWALTUNG können Sie hier auch die bestehenden Cookies ändern.

17.2

Mit Cookies arbeiten

Für Cookies gibt es in JavaScript ein eigenes Objekt namens cookie8. Es ist ein Unterobjekt von document und steuert alle Cookies, die die Seite setzt oder ausliest.

Setzen und auslesen Ein Cookie ist schnell gesetzt. Weisen Sie document.cookie einfach ein Cookie als Wert zu. Die Syntax sieht wie folgt aus: document.cookie = "Cookiename=Wert";

Auf den Cookienamen folgt der Wert. Natürlich sind für ein Cookie auch weitere Angaben möglich, die Sie in den folgenden Abschnitten kennen lernen werden. Um das Cookie wieder auszulesen, müssen Sie erneut auf document.cookie zugreifen. Der Wert des Cookies muss allerdings immer in URL-kodierter Form vorliegen. Am einfachsten geschieht die Umwandlung mit der Funktion escape(). Für die Rückumwandlung steht unescape() zur Verfügung.9 Im folgenden Beispiel schreibt der Nutzer einen Text in ein Textfeld. Dieser Text wird beim Anklicken der Schaltfläche COOKIE SETZEN in einem Cookie mit dem Namen cookie1 abgelegt, nachdem er zuvor in URL-Codierung umgewandelt wurde. Klickt der Nutzer anschließend auf die Schaltfläche COOKIE AUSLESEN, wird das Cookie wieder ausgelesen und mit unescape() in den ursprünglichen Zustand umgewandelt.

7 8 9

542

oder in der englischen Version FILE/PREFERENCES/PRIVACY Beachten Sie, dass im Gegensatz zu vielen Kollektionen wie beispielsweise window.frames[] oder document.forms[] document.cookie im Singular verwendet wird. Diese Funktionen finden Sie in Kapitel 5.3 im Abschnitt »URLs«.

 KOMPENDIUM 

JavaScript

Mit Cookies arbeiten

Kapitel 17

<script language="JavaScript">

Abbildung 17.3: Der Klick auf den Button erzeugt ein neues Cookie.

Beim Auslesen (siehe Abbildung 17.5) erscheint allerdings nicht nur der Cookiewert, sondern auch der Cookiename. Um diesen abzuschneiden, können Sie mit der Methode substring() die Buchstaben aus dem Cookie auslesen, die nach dem Namen folgen:

 KOMPENDIUM 

JavaScript

543

Kapitel 17

Cookies

Abbildung 17.4: Im Netscape Navigator ist das Cookie im COOKIE-MANAGER zu sehen.

Abbildung 17.5: Das Cookie wieder auslesen

Listing 17.2: Den Namen abschneiden (cookie_wert.html)

544

function auslesen() { document.formular.ausgabe.value = unescape(cookie_ausgabe()); } function cookie_ausgabe() { return document.cookie.substring(8, document.cookie.length) }

 KOMPENDIUM 

JavaScript

Mit Cookies arbeiten

Kapitel 17

Dieses Skript ist von der Länge des Cookienamens abhängig. Abbildung 17.6: Nur der Wert des Cookies wird ausgelesen.

Mehr Informationen zu substring() und anderen Methoden für Strings finden Sie in Kapitel 7 »Arrays und Strings«. Mehrere Cookies Die Probleme beginnen jedoch, wenn vom Dokument mehrere Cookies gesetzt wurden. Beim Auslesen erscheinen mehrere Cookies hintereinander: document.cookie = "cookie1=Cookie1"; document.cookie = "cookie2=Cookie2";

ergibt cookie1=Cookie1; cookie2=Cookie2

als Ausgabe. Um die Werte der Cookies auszulesen, benötigen Sie also eine etwas umfangreichere Hilfsfunktion. Die folgende Funktion liest den Wert eines Cookies mit beliebigem Namen aus. Der Name des Cookies muss der Funktion als Parameter übergeben werden: function cookie_ausgabe(name) { var daten = document.cookie; for (i = 0; i < daten.length; i++) { if (daten.substring(i, i+name.length) == name) { var ende = daten.indexOf(";",i+name.length); if (ende == -1) ende = daten.length; }

 KOMPENDIUM 

JavaScript

545

Kapitel 17

Cookies return daten.substring(i+name.length+1, ende); } }

Die Hilfsfunktion besteht aus einer Schleife, die folgende Funktionen durchführt: In einer Schleife werden alle Positionen (Buchstaben) von document.cookie durchlaufen. Für jede Position wird überprüft, ob die nachfolgenden Zeichen dem gesuchten Cookienamen entsprechen. Ist dies der Fall, stellt eine Suche nach der Position des abschließenden Strichpunkts das Ende des Cookiewerts fest. Ist kein Strichpunkt vorhanden (ende also -1), folgt anschließend kein neuer Cookiename. Das Ende entspricht also dem Ende von document.cookie. Zurückgegeben wird dann der Text des Wertes, dessen Anfang eine Position hinter dem Cookienamen beginnt und dessen Ende vorher festgestellt wurde.

Auf der CD-ROM finden Sie im Ordner code\kap17 ein vollständiges Beispiel mit dieser Hilfsfunktion unter cookie_allgemein.html. Abbildung 17.7: Der Nutzer setzt zwei Cookies und nur der Wert von einem wird ausgelesen.

Sie sollten so wenig Cookies wie möglich verwenden, da Nutzer möglicherweise Cookies manuell bestätigen und von zu vielen Cookies gestört werden. Zudem unterstützt der Internet Explorer 3 nur ein Cookie pro Domain. Mehr zu diesem Thema erfahren Sie im Abschnitt »Mehrere Informationen in einem Cookie«.

546

 KOMPENDIUM 

JavaScript

Mit Cookies arbeiten

Kapitel 17

Temporäre oder persistente Cookies Ein Cookie kann – entsprechend seiner Beschränkungen – weitere Informationen enthalten. Der wichtigste Parameter ist sicherlich das Ablaufdatum: document.cookie = ("Cookiename=Cookiewert;expires=Zeitpunkt");

In den bisherigen Beispielen wurde das Ablaufdatum nicht angegeben. In diesem Fall handelt es sich um ein temporäres Cookie, das gelöscht wird, wenn der Nutzer den Browser schließt. Diese Art Cookie gelangt auch nie in die Textdatei (oder .dat-Datei) auf der Festplatte des Nutzers, da sie – während der Browser geöffnet ist – im Hauptspeicher verbleibt. Mit Ablaufdatum wird ein Cookie dagegen zu einem persistenten oder auch haltbaren Cookie. Der Zeitpunkt, an dem das Cookie abläuft, muss dabei als GMT-String angegeben werden.10 Dies erreichen Sie mit einem neuen Datumsobjekt, das mit toGMTString() in GMT umgewandelt wird. Die beste Methode für das Datum ist, das aktuelle Tagesdatum zu verwenden und eine beliebige Anzahl an Stunden oder Tagen zu addieren. Kürzere Zeitspannen sind nicht empfehlenswert, da das Cookie unter Umständen vor dem Ende der Nutzersitzung ausläuft. In der folgenden Funktion läuft das Cookie zwei Tage ab dem Zeitpunkt, an dem es gesetzt wurde: function setzen() { var datum = new Date(); datum.setTime(datum.getTime() + 2* 24 * 60 * 60 * 1000); document.cookie = "cookie1=" + escape(document.formular.eingabe.value) + ";expires=" + datum.toGMTString(); }

Listing 17.3: Ein Cookie mit Ablaufdatum in zwei Tagen (cookie_expires. html)

Wenn Sie ein Cookie anzeigen, wird das Ablaufdatum nicht mit angegeben. Das Ablaufdatum von Cookies kann in JavaScript nicht ausgelesen werden, da es keine Eigenschaft des cookie-Objekts ist. Dies funktioniert in serverseitigen Programmiertechniken wie ASP.NET oder PHP.

10 Mehr Informationen zur Arbeit mit Daten erhalten Sie in Kapitel 6.2 im Abschnitt »Date«.

 KOMPENDIUM 

JavaScript

547

Kapitel 17

Cookies

Abbildung 17.8: Der COOKIE-MANAGER von Netscape zeigt an, wann das Cookie abläuft.

Pfade, Domains und Sicherheitseinstellungen Die Beschränkungen für Cookies erlauben auch, Cookies für einen bestimmten Pfad oder eine Domain zu setzen. Entsprechend stehen drei weitere Parameter in document.cookie zur Verfügung: document.cookie = ("Cookiename=Cookiewert ;expires=Zeitpunkt ;path=Pfad ;domain=Domain ;secure");

Die Einstellungen funktionieren folgendermaßen: Ist kein Pfad angegeben, dürfen die Cookies aus dem Standardpfad gelesen werden, in dem sich das Dokument befindet, das die Cookies setzt. Sie sollten einen Pfad nur dann setzen, wenn Sie es mit einem Dokument in einem anderen Pfad bearbeiten wollen. Beachten Sie aber, dass das Originaldokument dann nach dem Setzen keinen Zugriff mehr auf das Cookie besitzt.

548

 KOMPENDIUM 

JavaScript

Mit Cookies arbeiten

Kapitel 17

Setzen Sie den Pfad auf path=/, um das Cookie für die gesamte Domain zugänglich zu machen. Die Domain muss zumindest zwei Elemente – Domain und Top-LevelDomain – enthalten, nur der Host kann weggelassen werden. .mut.de wäre also eine gültige Domain. Wenn Sie eine Domain setzen, kann das Cookie nur von Seiten innerhalb dieser Domain abgefragt werden. Allerdings wird es von vielen Browsern als Third Party Cookie behandelt. Die letzte Einstellung secure legt fest, dass das Cookie beispielsweise nicht von serverseitigen Skripten verändert werden darf, obwohl sie die korrekte Domain und den richtigen Pfad besitzen. Wenn Sie den Parameter weglassen, haben auch serverseitige Skripten Zugriff. Dies ist in der Praxis meist empfehlenswert (siehe Kapitel 17.4 »Serverseitige Datenhaltung im Vergleich«). Im Web gibt es viele Hilfsfunktionen und Klassen, um mit Cookies noch bequemer zu arbeiten. Die meisten gehen dabei auf Bill Dortch zurück, dessen eigene Seite jedoch nicht mehr existiert. Sie finden einen Ableger beispielsweise unter http://www.webdeveloper.com.

Ändern Ein Cookie zu ändern, ist sehr einfach. Sie setzen es unter dem gleichen Namen neu und das alte Cookie wird überschrieben. document.cookie = ("cookie1=Wert1"); document.cookie = ("cookie1=Wert2");

Nach diesen zwei Zeilen hat »cookie1« den Inhalt »Wert2«.

Löschen Auch das Löschen folgt einer einfachen Idee. Setzen Sie das Ablaufdatum des Cookies auf einen zurückliegenden Zeitpunkt: function loeschen() { var datum = new Date(); datum.setTime(datum.getTime() - 1); document.cookie = "cookie1=;expires=" + datum.toGMTString(); }

 KOMPENDIUM 

JavaScript

Listing 17.4: Das Cookie wird gelöscht (cookie_loeschen. html).

549

Kapitel 17

Cookies Alternativ zu einem Zeitpunkt direkt vor der aktuellen Uhrzeit können Sie natürlich auch ein fixes, zurückliegendes Datum verwenden. Damit wird ein Bug in Netscape 2.02 verhindert, der die Variante aus Listing 17.4 nicht akzeptiert hat.

Mehrere Informationen in einem Cookie Da die Zahl der Cookies beschränkt ist und Sie zu viele Cookies ohnehin vermeiden sollten, um die Nerven des Nutzers nicht unnötig zu strapazieren, besteht häufig die Notwendigkeit, mehrere Informationen in ein Cookie zu packen. Der einfachste Ansatz ist, aus den Informationen einen String zu bilden und die Informationen mit einem Trennzeichen zu trennen, das in den Infos selbst nicht vorkommt. Wenn Sie die Cookie-Verbindung beispielsweise in einem Warenkorb verwenden, können Sie überprüfen, ob der String eine Länge unter 4.096 Zeichen besitzt. Wenn dies nicht der Fall ist, sollten Sie ihn teilen und die weiteren Informationen in das nächste Cookie schreiben.

17.3

Cookietest

Wenn Ihre Anwendung auf Cookies angewiesen ist, sollten Sie testen, ob der Browser des Nutzers Cookies unterstützt. Eine Abfrage über das navigator-Objekt ist hier nicht möglich, da Cookies vom Nutzer auch deaktiviert werden können. Daher ist es am einfachsten, ein Testcookie zu setzen, zu überprüfen, ob es vorhanden ist und es anschließend zu löschen. Dies erledigt das folgende Skript: Listing 17.5: Ein einfacher Cookietest (cookie_test.html)

<script language="JavaScript">
if (document.cookie.indexOf("Test") != -1) { alert("Cookies werden unterstützt"); var datum = new Date(); datum.setTime(datum.getTime() - 1); document.cookie = "test=;expires=" + datum.toGMTString(); } else { alert("Keine Cookies möglich"); } } //-->

550

 KOMPENDIUM 

JavaScript

Serverseitige Datenhaltung im Vergleich

Kapitel 17

Dieses Skript testet, ob Cookies aktiviert sind...

Wenn Sie das Skript ausführen und alle Cookies sperren, müssen Sie zuvor die angelegten Cookies löschen, falls bereits ein Cookie mit dem Namen »Test« vorhanden ist. Abbildung 17.9: Der Cookietest hat ergeben, dass Cookies deaktiviert sind.

Entsprechend dem Ergebnis des Cookietests können Sie natürlich auch auf verschiedene Seiten weiterleiten. Ein entsprechendes Skript mit dem Namen cookie_test_weiter.html finden Sie auf der CD-ROM im Verzeichnis code\kap17.

17.4

Serverseitige Datenhaltung im Vergleich

Mit serverseitigen Programmiersprachen und -techniken wie PHP und ASP.NET können Sie natürlich auch Cookies setzen. Die Cookies werden dabei immer im Header des HTTP-Protokolls mitgeschickt. Diese Methode hat jedoch einen gravierenden Nachteil: Cookies können nicht sofort nachdem sie gesetzt wurden ausgelesen werden. Ein Cookietest funktioniert also nur über Umwege. Dafür bieten serverseitige Programmiersprachen häufig eigene Eigenschaften für die einzelnen Parameter von Cookies. Aus den Vor- und Nachteilen leiten sich folgende Empfehlungen ab: Ein Cookietest ist in JavaScript wesentlich einfacher.11 Sie müssen beim Nutzer jedoch JavaScript voraussetzen. 11 Sie umgehen nicht nur die soeben genannten Nachteile. Die Microsoft-Server PWS (Personal Web Server) und IIS (Internet Information Service, früher Internet Information Server) erlauben Ihnen in manchen Versionen nicht, ein Cookie zu setzen und im gleichen Schritt eine Weiterleitung einzufügen.

 KOMPENDIUM 

JavaScript

551

Kapitel 17

Cookies Sie können Cookies mit JavaScript einfach aus Formularen – oftmals nach einer Vollständigkeitsüberprüfung – anlegen und diese dann natürlich auch per serverseitiger Programmiersprache abfragen. Diese Mischung kommt in der Praxis recht häufig vor. Natürlich können Sie einen Warenkorb auch nur mit JavaScript realisieren oder einen Cookietest in einer serverseitigen Programmiersprache schreiben. Die Kombination liefert jedoch häufig die besten und schnellsten Resultate.

552

 KOMPENDIUM 

JavaScript

18

Frames

Frames1 sind eigentlich Fenster im Fenster. Die Struktur der Frames wird im Frameset definiert. Jeder Frame ist eine eigene HTML-Datei. Das folgende Beispiel zeigt ein Frameset mit zwei Frames, die als einzelne Spalten (cols) im -Tag mit einer Breite von 20% bzw. 80%2 angeordnet sind:

Listing 18.1: Ein HTML-Frameset mit zwei Frames (frameset.html)

Die Dateien für die zwei Frames navigation.html und inhalt.html finden Sie auf der CD-ROM im Ordner code\kap18. Die in diesem Beispiel gewählte Aufteilung ist in der Praxis häufig zu finden: links ein Navigationsframe und rechts der Inhaltsframe. Oftmals kommt als dritter Frame noch ein Frame oben oder unten hinzu. Frames sind zum übersichtlichen Organisieren, beispielsweise durch Trennen von Navigation und Inhalt, sehr praktisch und bereits in Uralt-Browsern wie Netscape 2 und Internet Explorer 3 verfügbar. Sie haben allerdings auch Nachteile:

1

2

Ein Beitrag zur Sprachverwirrung: Die deutsche Übersetzung von Frames ist Rahmen; es handelt sich dabei um einen Rahmen mit Inhalt. Der Rahmen selbst ist eigentlich eher ein Rand, was dem englischen Begriff border entspricht. Alternativ kann die Breite in Pixel angegeben werden. In diesem Fall ist keine Einheit notwendig.

 KOMPENDIUM 

JavaScript

553

Kapitel 18

Frames

Abbildung 18.1: Ein einfaches Frameset mit zwei Frames

In manchen Browsern (Netscape, Mozilla und Internet Explorer vor Version 5) können Nutzer Framesets nicht korrekt als Bookmark anlegen. Das übergeordnete Frameset wird »gebookmarkt«, der geänderte Inhalts-Frame bleibt unberücksichtigt. Frames erfordern mehrere HTML-Dateien, was die Struktur einer Website unübersichtlich werden lässt, wenn nicht auf vernünftige Namenskonventionen und Ordnerstrukturen geachtet wird. Größe und Positionierung von Frames variieren in den verschiedenen Browsern leicht und erfordern einige Tricks zum Ausbügeln.

18.1

Struktur und Zugriff

In jedem HTML-Dokument steht in JavaScript die Kollektion window.frames[Index]3 zur Verfügung. Diese Kollektion enthält alle Frames des aktuellen HTML-Dokuments. Das erste Frame erhält den Index 0. Die folgenden Frames werden der Reihe nach durchnummeriert. window.frames[2]

greift also auf den dritten Frame zu.

3

554

Beachten Sie, dass die Kollektion window.frames[]den englischen Plural verwendet, während document.cookie im Singular verwendet wird. Zwar handelt es sich bei document.cookie nicht um eine Kollektion im eigentlichen Sinn, dennoch ist die Fehlergefahr recht groß.

 KOMPENDIUM 

JavaScript

Struktur und Zugriff

Kapitel 18

Besitzt ein HTML-Dokument kein Frameset mit Frames, enthält die Kollektion auch keinen Wert und hat die Länge 0. Die Länge kann mit der Eigenschaft length ausgelesen werden: window.frames.length

ergibt also die Zahl der Elemente eines Dokuments. Ein Frame kann allerdings nicht nur über den Index angesprochen werden. Eine Alternative ist der Frame-Name, der im name-Attribut angegeben ist: window.navi

Obige Zeile greift auf einen Frame mit dem Namen »navi« zu. Als dritte Alternative lässt sich der Frame-Name auch in der Kollektion window.frames[] angeben. window.frames["navi"]4

Da diese Lösung die tippintensivste ist und Programmierer immer faul sind, kommt sie in der Praxis kaum zum Einsatz. Der bisher beschriebene Zugriff über window funktioniert nur in einem Skript in der Datei, die das Frameset enthält. Wie verhält es sich jedoch, wenn Sie beispielsweise aus einer Frame-Datei auf die Datei mit dem Frameset zugreifen möchten? Hier sollte man sich klar machen, dass Frames in einer Hierarchie angeordnet sind. Die Hierarchie des Framesets aus Listing 18.1 wird in Abbildung 18.2 dargestellt. Innerhalb dieser Hierarchie gibt es drei Eigenschaften, über die ein Zugriff möglich ist: parent – erlaubt den Zugriff aus dem Frame auf das übergeordnete Frameset. top – gestattet den Zugriff auf das oberste Frameset in der Hierarchie. self – verweist auf den aktuellen Frame.

4

Bei dieser Methode können Sie Frame-Namen verwenden, die normalerweise von JavaScript reserviert sind. Empfehlenswert ist dies jedoch nicht.

 KOMPENDIUM 

JavaScript

555

Kapitel 18

Frames

Abbildung 18.2: Die Hierarchie der Beispielseite

Frameset frameset.html oder:

window.frames[0] window.navi

parent

parent

Frame 0

oder:

window.frames[1] window.inhalt

Frame 1

name = navi

name = inhalt

navigation.html

inhalt.html

oder:

self window

oder:

self window

Wenn Sie auf das übergeordnete Frameset zugreifen wollen, sollten Sie auch bei der Verwendung von nur einem Frameset immer mit parent arbeiten. Anderenfalls kann es zu Fehlern kommen, wenn Ihr komplettes Frameset auf einer anderen Seite ebenfalls wieder in einem Frameset geladen wird.5 Kommen wir nun zu dem Beispiel aus Listing 18.1 und Abbildung 18.2 zurück. Wenn Sie von Frame 0 auf Frame 1 zugreifen wollen, funktioniert dies folgendermaßen: parent.frames[1]

oder parent.inhalt

Der Zugriff auf Frames über die Hierarchie funktioniert bereits seit Netscape 2 und Internet Explorer 3. Tabelle 18.1: Frames und ihr Zugriff

5

556

NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3































Das Laden der eigenen Seite in einem fremden Frameset ist häufig unerwünscht. Mehr zu diesem Thema erfahren Sie in Kapitel 18.3 »Frames erzwingen und vermeiden«.

 KOMPENDIUM 

JavaScript

Struktur und Zugriff

Kapitel 18

Ereignisse und Frames Für Frames hält JavaScript einige eigene Ereignisse bereit. Das wichtigste Ereignis ist onload. Es steht für das und das -Tag zur Verfügung und wird aktiv, wenn das gesamte Frameset oder der Inhalt des jeweiligen Frames geladen ist.

onload (Frameset)

NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3














































onload (Frames)




Tabelle 18.2: Das Ereignis onload für das Frameset und für einzelne Frames

Im folgenden Beispiel erscheint für jeden geladenen Frame und für das Frameset eine Meldung. Dies erlaubt auch einen Vergleich, wann welches Ereignis vom Browser abgefeuert wird.

Listing 18.2: Frameset mit Ereignissen (frameset_ ereignisse.html)

Wenn Sie die Ergebnisse dieses Beispiels vergleichen, ergibt sich zwischen verschiedenen Browsern eine unterschiedliche Ladereihenfolge: Der Internet Explorer zeigt zuerst an, dass das Frameset geladen wurde. Der Netscape Navigator lädt zuerst die beiden Frames. Die Reihenfolge, in der die Frames geladen werden, variiert. In der Praxis ist die Reihenfolge der Ereignisse also unvorhersehbar und kann nicht als Anhaltspunkt dienen. Das onload-Ereignis im Internet Explorer 4 wird leider auch dann gestartet, wenn der Nutzer den Ladevorgang abbricht.

 KOMPENDIUM 

JavaScript

557

Kapitel 18

Frames Die folgende Tabelle zeigt weitere Ereignisse:

Tabelle 18.3: Weitere Ereignisse für Frameset und Frames

Ereignis

Tag

Beschreibung

onunload



Tritt auf, wenn das Frameset verlassen wird.

onbeforeprint



Ereignis, wenn ein Frameset gedruckt wird oder gedruckt wurde. Existiert nur im Internet Explorer ab Version 5.

onbeforeupdate



Ereignis, bevor sich die im Frame eingebundenen Daten ändern.a Dies ist auf den Internet Explorer ab Version 4 beschränkt.

onafterupdate



Ereignis, nachdem sich die Daten geändert haben.b Es ist ebenfalls auf den Internet Explorer ab Version 4 beschränkt.

onerrorupdate



Ereignis, wenn in der Datenanbindung ein Fehler auftaucht und ebenfalls auf den Internet Explorer ab Version 4 beschränkt.

onafterprint

a.

Dieses Einbinden von Daten heißt auch Data Binding. Dabei werden Daten aus DSO-Elementen (Data Source Objects) an Elemente einer Webseite gebunden. Der Internet Explorer besitzt beispielsweise die MSHTML-Control, die Tabular Data Control (TDC) und die XML DSO. b. Diese Ereignisse gibt es auch für Textfelder (), die Data Binding verwenden. Tabelle 18.4: Kompatibilität der weiteren Ereignisse

NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3

























onbeforeprint







onafterprint







onunload







onbeforeupdate













onafterupdate













onerrorupdate













Frames formatieren Seit der W3C-Standard den Zugriff auf alle Elemente einer Website erlaubt, gibt es einige neue Möglichkeiten. Mit getElementById("ID") können Sie auch auf - und -Elemente zugreifen.6

6

558

Frameset und Frame sind hier Browserobjekte, auf die Sie per JavaScript zugreifen.

 KOMPENDIUM 

JavaScript

Struktur und Zugriff

Kapitel 18

Diese Elemente wiederum haben Eigenschaften, mit denen Sie beispielsweise das Aussehen der Frame-Rahmen ändern können. Die Eigenschaften in JavaScript gleichen meist den gleichnamigen HTML-Attributen. Diese Art von Zugriff greift nur auf die HTML-Elemente - und zu, nicht aber auf den Frame selbst mit seinen Inhalten, wie JavaScript-Funktionen, Stilangaben usw. Eigenschaften für Das -Tag besitzt vier Eigenschaften für die Rahmen der Frames. Diese Eigenschaften lassen sich zwar auch setzen, funktionieren jedoch im Internet Explorer ab Version 4 – dem einzigen Browser, der sie unterstützt – bei bereits geladenem Frameset und Frames nicht direkt.7 border – gibt die Dicke des Rahmens in Pixeln an. borderColor – gibt die Farbe des Framesets an. Dies entspricht dem HTML-Attribut bordercolor. frameBorder – gibt an, ob ein Rahmen vorhanden ist (»yes« bzw. 1 oder »no« bzw. 0). Dies entspricht dem HTML-Attribut frameborder. frameSpacing – setzt den Zwischenraum zwischen Frames in Pixeln. Dies entspricht dem HTML-Attribut framespacing. NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6










O7

M1

K3




Tabelle 18.5: border, borderColor, frameBorder und frameSpacing

Die Breite bzw. die Höhe von Frames ändern zwei weitere Eigenschaften des -Tags. cols – ändert die Spaltenverteilung. Als Wert tragen Sie einen Wert ein, den Sie auch dem cols-Attribut des -Tags zuweisen würden. cols ist natürlich nur sinnvoll, wenn Sie ein Frameset mit Spalten

ändern. rows – wird für ein Frameset mit Reihen verwendet. Hier tragen Sie den gewünschten Wert für die Reihengrößen ein.

7

Dieser Bug schränkt die Verwendbarkeit dieser vier Eigenschaften stark ein. Sie sehen die Änderung nur, wenn das Browserfenster nicht mehr im Vordergrund steht und anschließend erneut in den Vordergrund geholt wird. Vorher wirken sich die Änderungen nicht aus.

 KOMPENDIUM 

JavaScript

559

Kapitel 18

Frames Sollten Sie die Zahl der Frames erhöhen, wird ein leerer Frame hinzugefügt, verringern Sie die Zahl der Frames, fallen immer die letzten Frames zuerst heraus. In der Praxis werden die beiden Eigenschaften allerdings selten eingesetzt.

Tabelle 18.6: cols und rows

NS4.x NS6


NS7

IE4 IE5

IE5.5 IE6













O7




M1

K3







Das folgende Beispiel ändert die Breite der Frames mittels eines Buttons im Navigationsframe. Im Frameset muss gegenüber Listing 18.1 nicht viel geändert werden. Lediglich das Frameset benötigt eine ID. Listing 18.3: Das Tag besitzt hier eine ID (frameset_ eigenschaften.html)



Im Navigationsframe fügen Sie eine Schaltfläche ein und rufen eine Funktion auf, die die Breite der Spalten ändert: Listing 18.4: Das Skript ändert die Breite der Frames (navigation_ eigenschaften. html).

<script language="JavaScript">
//-->

Navigation

Breite ändern

560

 KOMPENDIUM 

JavaScript

Struktur und Zugriff

Kapitel 18 Abbildung 18.3: Ein Anklicken der Schaltfläche …

Abbildung 18.4: … verbreitert den Navigationsframe.

Um Internet Explorer 4-konform zu programmieren, müssten Sie im Skript aus Listing 18.4 zusätzlich document.all verwenden, um auf das FramesetObjekt zuzugreifen. Auf der CD-ROM im Ordner code\kap18 finden Sie unter navigation_eigenschaften_ie4.html das Listing mit dieser Erweiterung. Wenn Sie für eine Größenanpassung der Frames volle Browserkompatibilität benötigen, sollten Sie ein zweites Frameset mit geänderten Maßen verwenden und beim Anklicken der Schaltfläche oder eines Links das neue Frameset laden. Der Nachteil besteht darin, dass Sie beispielsweise in einem Navigationsframe nicht so einfach feststellen können, welche Inhaltsdatei aktuell geladen ist. Dies muss bei der Konzeption mit berücksichtigt werden. Eigenschaften für Für das Frame-Objekt gibt es mehr Eigenschaften als für Framesets. Hier ist die Browserunterstützung jedoch sehr unterschiedlich und in der Praxis werden cols und rows des Framesets am häufigsten eingesetzt. Die folgende Tabelle gibt eine Übersicht über die wichtigsten FrameObjekte.

 KOMPENDIUM 

JavaScript

561

Kapitel 18 Tabelle 18.7: Wichtige Eigenschaften des Frame-Objekts

Frames

Eigenschaft

Beschreibung

allowTransparency

Gibt als Wahrheitswert an, ob Transparenz erlaubt ist (true) oder nicht (false). Der Wert für die Hintergrundfarbe des Frames ist damit automatisch transparent. Die Hintergrundfarbe des Fensters scheint durch.

borderColor

Ändert die Rahmenfarbe (siehe Abschnitt »Eigenschaften für «). Funktioniert im Internet Explorer nicht sofort, wenn das Frameset bereits geladen ist. Dieses Objekt ist in der Praxis also nur eingeschränkt einsetzbar.a

frameBorder

Erlaubt Rahmen (»yes« bzw. 1) oder verbietet (»no« bzw. 0) sie. Funktioniert im Internet Explorer nicht sofort, wenn das Frameset bereits geladen ist. Es ist in der Praxis also nur eingeschränkt einsetzbar (siehe borderColor).

height

Enthält die nur lesbare Höhe des Frames. Wird häufig dazu verwendet, einen Pixelwert zu erhalten, der dann für rows verwendet werden kann.

width

Enthält die Breite. Nur auslesbar, nicht setzbar.

marginHeight

Gibt den Abstand zwischen Inhalt und Frame-Rahmen in der Vertikalen an.

marginWidth

Gibt den Abstand zwischen Inhalt und Frame-Rahmen in der Horizontalen an.

noResize

Verhindert bei true, dass der Nutzer den Frame in der Größe ändern kann. Dies entspricht dem noresize-Attribut.b Diese Eigenschaft hat jedoch keine Auswirkungen auf die Größenänderungen mit den Eigenschaften cols und rows des Frameset-Objekts.

scrolling

Erlaubt (»yes« bzw. 1) oder verbietet (»no« bzw. 0) Scrolling. auto lässt den Browser entscheiden. Er blendet Scroll-Balken ein, wenn der Inhalt über die Grenzen des Frames hinausragt.

src

Ändert die Quelle des Frames. Dies erlaubt Ihnen, das Dokument im Frame zu ändern.

a. Sie finden eine Beschreibung des Bugs in Fußnote 7. b. Das zugehörige Ereignis ist onresize. Für Frames existiert dieses Event ab Netscape Navigator 6 und Internet Explorer 4. Für das gesamte Fenster (window) ist das Ereignis bereits im Netscape Navigator 4.x enthalten.

562

 KOMPENDIUM 

JavaScript

Struktur und Zugriff

Kapitel 18

NS4.x NS6

NS7

IE4 IE5

allowTransparency

IE5.5 IE6





























height













width













borderColor frameBorder







O7

M1

K3










marginHeight




























marginWidth




























noResize




























scrolling




























src




















a







a.

Tabelle 18.8: Wichtige Eigenschaften des Frame-Objekts

enthält den absoluten Pfad

Das folgende Beispiel verwendet src, um die Quelle des Navigationsframes zu ändern: 8 <script language="JavaScript">
Listing 18.5: Die Breite mit src ändern (navigation_frame_ eigenschaften.html) 8

//-->

Navigation

Quelle ändern

8

Wegen der Verwendung von getElementById() funktioniert dieses Beispiel nicht im Netscape Navigator 4 und im Internet Explorer 4.

 KOMPENDIUM 

JavaScript

563

Kapitel 18

Frames

Abbildung 18.5: Ein Anklicken der Schaltfläche …

Abbildung 18.6: … ändert den Inhalt des linken Frames.

In der Praxis sollten Sie auf die Frames über die Frame-Hierarchie zugreifen, um die Quelle zu ändern, da die Methode über src in älteren Browsern wie Netscape 4.x nicht funktioniert.

Verschachtelte Framesets Wenn Sie Frames komplexer ineinander verschachteln wollen, gibt es zwei Lösungen: Sie können verschachtelte Framesets in einer Datei verwenden. Im folgenden Beispiel wird das Dokument mit einem Frameset vertikal zweigeteilt. Der zweite Frame ist jedoch wiederum ein Frameset, das eine horizontale Zweiteilung vornimmt: Listing 18.6: Ein verschachteltes Frameset in einer Datei (frameset_ verschachtelt.html)



564

 KOMPENDIUM 

JavaScript

Struktur und Zugriff

Kapitel 18



Abbildung 18.7: Ein verschachteltes Frameset

Mehrere verschachtelte Dateien mit Framesets. Im folgenden Beispiel wird dasselbe Frameset wie in Listing 18.6 realisiert – nur auf zwei Dateien verteilt.

Listing 18.7: Das obere Frameset (frameset_ verschachtelt_mehrere.html)





 KOMPENDIUM 

JavaScript

Listing 18.8: Das verschachtelte Frameset (frameset2.html)

565

Kapitel 18

Frames

Das Ergebnis dieser zweigeteilten Verschachtelung entspricht dem in Abbildung 18.7 dargestellten Frameset. JavaScript-Zugriff Für den JavaScript-Zugriff macht die Art der Verschachtelung durchaus einen Unterschied. Wollen Sie aus einem Frame auf das oberste Frameset zugreifen, ist bei einem verschachtelten Frameset in einer Datei die Angabe parent ausreichend. Dies illustriert das folgende Beispiel. Aus dem Frame werbung kann der Nutzer hier die Breite der vertikalen Frames ändern: Listing 18.9: Der Zugriff bei einem verschachtelten Frameset in einer Datei (werbung_js.html)

<script language="JavaScript">
breit = true; } else { parent.document.getElementById("fs1").cols = "20%,*";

breit = false; } } //-->

Werbung

Breite ändern

Wenn Sie stattdessen bei einem über zwei Dateien verteilten Frameset auf das oberste zugreifen wollen, sieht das Beispiel wie folgt aus: Listing 18.10: Ein verschachteltes Frameset mit mehreren Dateien (werbung_mehrere _js.html)

566

parent.parent.document.getElementById("fs1").cols = "40%,*";

Das Resultat der beiden Methoden (siehe Abbildung 18.8 und Abbildung 18.9) ist dasselbe. In der Praxis erweist sich ein verschachteltes Frameset in einer Datei meist als zweckmässig. Sie sollten jedoch darauf achten, allen Framesets und Frames unterschiedliche IDs zuzuteilen.

 KOMPENDIUM 

JavaScript

Struktur und Zugriff

Kapitel 18 Abbildung 18.8: Ein Anklicken des Buttons …

Abbildung 18.9: … vergrößert den linken Frame.

 KOMPENDIUM 

JavaScript

567

Kapitel 18

Frames Die kompletten Beispieldateien finden Sie auf der CD-ROM im Ordner code\kap18\verschachtelt. Als weitere Ausbaumöglichkeit können Sie die Internet Explorer 4-Kompatibilität mit document.all ergänzen (siehe Beispiel navigation_eigenschaften_ie4.html im Ordner code\kap18). Alternativ zu parent.parent. könnten Sie hier auch top verwenden. Dies funktioniert jedoch nicht, wenn das oberste Frameset – beispielsweise auf einer fremden Seite – in einem weiteren Frameset geladen wird. Wenn Sie top verwenden, sollten Sie also verhindern, dass das oberste Frameset in einem anderen Frame geladen werden kann (siehe Kapitel 18.3 »Frames erzwingen und vermeiden«).

18.2

Häufige Anwendungen und Tricks

Dieser Abschnitt enthält einige der wichtigsten Anwendungen von JavaScript für Frames und verrät interessante und beachtenswerte Tricks.

Frames und Links Mehrere Frames mit neuen Inhalten zu versehen, gehört zu den häufigsten und wichtigsten Anwendungen. Dazu ändern Sie lediglich die URLs für mehrere Frames in einem Skript. Das folgende Frameset zeigt dies beispielhaft: Listing 18.11: Das Frameset mit name-Attributen (frameset_link.html)





In der Navigationsleiste fügen Sie einen JavaScript-Link hinzu. Das zugehörige Skript übernimmt zwei – als Parameter übergebene – URLs und verwendet diese, um sie in den Frames neu zu öffnen:

568

 KOMPENDIUM 

JavaScript

Häufige Anwendungen und Tricks <script language="JavaScript">
Kapitel 18 Listing 18.12: Zwei Links in einem Fenster (navigation_link. html)

//-->

Navigation

Markt+Technik

Alle Beispieldateien finden Sie im Ordner code\kap18\link.

Abbildung 18.10: Ein Anklicken des Links …

 KOMPENDIUM 

JavaScript

569

Kapitel 18

Frames

Abbildung 18.11: … öffnet zwei neue Dokumente.

Das Skript aus Listing 18.12 funktioniert in allen Browsern, aber nur, wenn JavaScript aktiviert ist. Alternativ können Sie die Funktion auch beim onclick-Ereignis aufrufen, um eine Fehlermeldung zu vermeiden. Wenn Sie ganz ohne JavaScript auskommen möchten, müssen Sie ein komplett neues Frameset laden.

Unsichtbare Frames In HTML-Tabellen werden häufig 1*1 Pixel große transparente GIFDateien eingefügt und auf beliebige Abstände skaliert. Andere Grafiken können vorgeladen werden, wenn Sie mit der Größe von 1*1 Pixel in das HTML-Dokument eingefügt werden. Diese beiden Tricks finden eine Entsprechung bei Frames: Sie können mit einem nur 1 Pixel hohen9 Frame einen so genannten versteckten Frame erzeugen. In diesem Frame lassen sich Daten zwischenspeichern oder Skripte anlegen.

9

570

Manche Browser akzeptieren einen 0 Pixel hohen Frame nicht.

 KOMPENDIUM 

JavaScript

Häufige Anwendungen und Tricks

Kapitel 18

Ein Frameset mit verstecktem Frame könnte beispielsweise wie folgt aussehen:

Listing 18.13: Ein versteckter Frame (frame_versteckt. html)





Versteckte Frames sind auch ein möglicher Ersatz für Cookies. Sie können im versteckten Frame versteckte Textfelder () einfügen und dort Daten zwischenspeichern.

Frames füllen Bisher enthielt jeder Frame eine eigene HTML-Datei. Dies ist jedoch nicht zwingend erforderlich. Sie können einen Frame auch ausschließlich per Skript füllen. Das Füllen erfolgt am einfachsten mit einer leeren Seite10:

Wollen Sie dagegen mit JavaScript Inhalte in den Frame schreiben, verwenden Sie am besten eine JavaScript-URL mit javascript:. Dazu sind folgende Schritte notwendig: 1.

Die Funktion wird im Frame aufgerufen. Da das Skript im Frameset steht, erfolgt die Adressierung mit parent. src="javascript:parent.fuellen('Neuer Inhaltsframe')"

2.

Als Parameter übergibt der Funktionsaufruf einen Text, der in die neue Seite eingefügt werden soll.

3.

Das Skript enthält das HTML-Grundgerüst und übernimmt den Parameter.

4.

Abschließend gibt es mit return die HTML-Seite zurück.

10 Der Internet Explorer 3 kann mit dieser Methode nichts anfangen.

 KOMPENDIUM 

JavaScript

571

Kapitel 18

Frames Hier der vollständige Code:

Listing 18.14: Einen Frame mit JavaScript füllen (frame_fuellen.html)

<script language="JavaScript">"; inhalt += "

"; inhalt += text + "

" return inhalt; }

//--> Abbildung 18.12: Der rechte Frame wurde mit JavaScript gefüllt.

History und Frames Die History lässt sich auch über Frame-Grenzen hinweg steuern. Die häufigste Anwendung besteht darin, in einem Frame die Befehle für die History eines anderen – meist des Inhaltsframes – bereitzuhalten. Mit folgender Zeile gehen Sie aus einem anderen Frame im Inhaltsframe um einen Schritt in der History zurück: parent.inhalt.history.back();

572

 KOMPENDIUM 

JavaScript

Frames erzwingen und vermeiden

Kapitel 18

In Kapitel 14.1 »history-Objekt« erfahren Sie mehr über den Umgang mit der History in JavaScript.

18.3

Frames erzwingen und vermeiden

Der Nutzer hat im Browser die Möglichkeit, einen Frame in einem neuen Fenster zu öffnen. Eine eventuell vorhandene Navigationsleiste oder ein Frame mit Werbebanner verschwinden in diesem Fall. Wenn dies nicht gewünscht wird, können Sie in dem Frame, der immer im Frameset enthalten sein soll, folgenden Code bei onload im -Tag aufrufen: if(self == top) { top.location.href = "frameset.html"; }

Der Code prüft, ob der aktuelle Frame an oberster Stelle steht. Wenn dies der Fall ist, wird das Frameset stattdessen geladen. Bei der Anzeige gibt es eine kurze Verzögerung. Das heißt, der Nutzer sieht zunächst nur den Frame, bevor das Frameset geladen wird. Die Dauer der Ladezeit ist von der Geschwindigkeit der Internetverbindung abhängig. Der umgekehrte Fall ist genauso ärgerlich. Ihre Seite wird immer im Frameset einer anderen fremden Seite geladen. Abmahnen wäre eine Lösung. Noch eleganter ist folgender Code, der in Ihre Seite bei onload eingebaut werden sollte: if(self != top) { top.location.href = self.location.href; }

Sollte die aktuelle Seite nicht die oberste in der Hierarchie sein, wird Sie als oberste Seite neu geladen.

18.4

iFrames

Ein iFrame oder auch Floating Frame (fließender Frame) ist ein Dokument im Dokument. Er teilt im Gegensatz zum herkömmlichen Frame das Browserfenster nicht in einzelne Unterfenster auf, sondern ist direkt in ein HTML-Dokument integriert. iFrames fließen entweder im HTML-Fluss mit oder können per Stylesheet-Anweisung absolut positioniert werden.11

11 Funktional sind iFrames eng verwandt mit Layern in Netscape 4.x. Mehr zum praktischen Einsatz von Layern erfahren Sie in Kapitel 20 »DHTML«.

 KOMPENDIUM 

JavaScript

573

Kapitel 18

Frames iFrames sind nur in neueren Browsern ab Netscape 6 und Internet Explorer 4 integriert. Im Opera sind iFrames ab Version 4 vorhanden. Insbesondere die mangelnde Unterstützung des Netscapes 4.x kann unter Umständen problematisch sein.

Tabelle 18.9: iFrames

NS4.x NS6


NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3

























Das folgende Beispiel erstellt einen iFrame mit einer Größe von 300 * 100 Pixeln: Listing 18.15: Ein einfacher iFrame (iframe.html)

iFrames

<iframe src="inhalt.html" name="i1" id="iframe1" scrolling="auto" width="300" height="100">

Hier steht der Ersatztext, für Browser die keine iFrames anzeigen können. Kommentar neben dem iFrame Abbildung 18.13: Ein einfacher iFrame

574

 KOMPENDIUM 

JavaScript

iFrames

Kapitel 18

JavaScript-Zugriff Der Zugriff auf und aus iFrames erfolgt wie bei herkömmlichen Frames. Der iFrame wird ebenfalls Teil der Kollektion frames[] und kann über den Index window.frames[0]

oder über den Namen window.frames["i1"]

angesprochen werden. Die dritte Alternative ist der direkte Zugriff über den Namen: window.i1

Das folgende Beispiel ändert die Hintergrundfarbe des Dokuments im iFrame. Der Nutzer kann dazu im Textfeld einen Farbnamen oder den hexadezimalen Farbwert eingeben. Das Skript besteht aus folgenden Einzelschritten: 1.

Ein Anklicken der Schaltfläche ruft die Funktion farbe() auf.

2.

In der Funktion wird als Erstes geprüft, ob das Textfeld nicht leer ist.

3.

Ist dies der Fall, ist also eine Farbe eingetragen, erhält die Variable iframe den Zugriff auf den iFrame: var iframe = window.i1;

4.

Anschließend wird die Hintergrundfarbe des iFrames auf den Wert des Texteingabefeldes gesetzt.12 iframe.document.body.style.backgroundColor = document.formular.eingabe. value;

Hier der vollständige Code: <script language="JavaScript">
Listing 18.16: Die Farbe des iFrames wechseln (iframe_zugriff.html)

var iframe = window.i1;

12 Wie Sie mit Stilen arbeiten, erfahren Sie im folgenden Kapitel »CSS und JavaScript«.

 KOMPENDIUM 

JavaScript

575

Kapitel 18

Frames

Abbildung 18.14: Der Nutzer gibt eine Farbe ein und klickt auf die Schaltfläche (oben); das iFrame erhält daraufhin eine andere Hintergrundfarbe (unten).

576

 KOMPENDIUM 

JavaScript

iFrames

Kapitel 18

iframe.document.body.style.backgroundColor = document.formular.eingabe.value;

} } //-->

Farbe des iFrames ändern

<iframe src="inhalt.html" name="i1" scrolling="auto" width="300" height="100"> Hier steht der Ersatztext, für Browser die keine iFrames anzeigen können.

Farbname

iFrame-Objekt Der klassische Zugriff auf iFrames ist nicht die einzige Lösung. Das <iframe>-Tag stellt für JavaScript auch ein Browserobjekt dar, auf das der direkte Zugriff über den W3C-konformen Weg (document.getElementById) und für den Internet Explorer 4 über document.all möglich ist. Dies setzt jedoch voraus, dass Sie dem iFrame zuvor eine ID zugewiesen haben. Die Eigenschaften des iFrame-Objekts gleichen weitgehend denen des Frame-Objekts (siehe Abschnitt »Eigenschaften für «). Die folgende Tabelle gibt eine Übersicht über die wichtigsten Eigenschaften. Die meisten entsprechen den HTML-Attributen für iFrames. Eigenschaft

Beschreibung

align

Gibt die Ausrichtung des iFrames relativ zum vorhanden Platz im HTML-Fluss an. Möglich sind left (linksbündig), center (zentriert) oder right (rechtsbündig).

allowTransparency

Gibt als Wahrheitswert an, ob Transparenz erlaubt ist (true) oder nicht (false).

frameBorder

Erlaubt Rahmen (»yes« bzw. 1) oder verbietet (»no« bzw. 0) sie.

hspace

Horizontaler Abstand zwischen iFrame-Rahmen und Inhalt.

vspace

Vertikaler Abstand zwischen iFrame-Rahmen und Inhalt.

 KOMPENDIUM 

JavaScript

Tabelle 18.10: Wichtige Eigenschaften des iFrame-Objekts

577

Kapitel 18 Tabelle 18.10: Wichtige Eigenschaften des iFrame-Objekts (Forts.)

Tabelle 18.11: Wichtige Eigenschaften des iFrame-Objekts

Frames

Eigenschaft

Beschreibung

marginHeight

Abstand zwischen Inhalt und iFrame-Rahmen in der Vertikalen.

marginWidth

Abstand zwischen Inhalt und iFrame-Rahmen in der Horizontalen.

scrolling

Erlaubt (»yes« bzw. 1) oder verbietet (»no« bzw. 0) Scrolling. auto lässt den Browser entscheiden.

src

Ändert die Quelle des iFrames. Dies erlaubt Ihnen, das Dokument im iFrame zu ändern.

NS4.x NS6 align




NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3






































allowTransparency













hspace
















vspace
















frameBorder







marginHeight




























marginWidth




























scrolling




























src




















a







a.

enthält im Gegensatz zu den anderen Browsern, die den vollständigen Namen enthalten, nur den absoluten Pfad

iFrames verwenden? In der Praxis sind iFrames im Web (bisher) nicht sehr weit verbreitet. Stattdessen setzen die meisten Webprogrammierer auf

-Tags mit absoluter Positionierung über CSS. Der Vorteil besteht darin, dass der Netscape Navigator 4.x – der immer noch über einen beachtenswerten Marktanteil verfügt – mit

-Tags zurecht kommt, iFrames allerdings nicht kennt. Als reiner Ersatz sind iFrames hier also nicht geeignet. Ihre Stärke spielen sie aus, wenn umfangreichere Inhalte angezeigt werden sollen. Da iFrames Scroll-Balken erlauben, kann der Nutzer auch komplexere Dokumente im Dokument einfach durchscrollen.

578

 KOMPENDIUM 

JavaScript

iFrames

Kapitel 18

Dass die Inhalte von iFrames in eigenen Dateien abgelegt werden, kann sowohl als Vor- als auch als Nachteil angesehen werden. Dies macht die Dateiverwaltung zwar ein wenig komplizierter, dafür ist innerhalb der HTML-Seite besser aufgeräumt. Ein weiterer Vorteil von iFrames besteht darin, dass sie jede Art von Elementen, also Tabellen, Grafiken usw., problemlos aufnehmen können und dadurch kein unübersichtliches Chaos entsteht. Die Entscheidung zwischen iFrames und Layern oder herkömmlichen Frames sollte also immer dem Einsatzzweck entsprechen. Als Fazit bleibt, dass iFrames deutlich mehr Aufmerksamkeit verdient haben, als ihnen bisher zuteil wurde.

 KOMPENDIUM 

JavaScript

579

19

CSS und JavaScript

Die Zeiten, in denen Webdesigner dachten, sie müssten keine Stylesheets verwenden, da es das -Tag auch tut, sind – glücklicherweise – vorbei. Cascading Style Sheets (CSS) dienen dazu, HTML-Dokumente flexibel und vor allem dokumentübergreifend einheitlich zu formatieren. CSS wird in mehr oder weniger strikter Form von allen gängigen Browsern unterstützt. Der CSS-Standard obliegt der Obhut des W3C (World Wide Web Consortium). CSS ist eigentlich eine eigene Sprachsyntax, die Formatierungen für HTML-Elemente1 festlegt. Das W3C hat bereits mehrere Versionen des CSS-Standards herausgegeben. CSS1 – Dieser Standard ist bereits seit Dezember 1996 eine Recommendation, hat also den höchsten Rang eines verabschiedeten Standards erreicht. In CSS1 sind die meisten Befehle enthalten, die die Formatierung betreffen.2 CSS2 – ist seit Mai 1998 eine Empfehlung. Er erweitert CSS1 beispielsweise um die Verwendung für verschiedene Medientypen, um verbesserte Positionierung und um Tabellenformatierung.3 CSS3 – befindet sich zurzeit in der Entwicklung. Den aktuellen Entwicklungsstand finden Sie unter http://www.w3.org/Style/CSS/currentwork. Es wird jedoch noch einige Zeit dauern, bis der Standard Einzug in die Browserwelt nimmt. Unter den geplanten Änderungen sind außerdem wenig Formatierungsanpassungen. Da dieses Buch kein CSS-Buch ist, behandelt es keine CSS-Grundlagen und Befehle. Sie finden dazu allerdings sowohl online als auch offline viele Quellen. Erste Anlaufstelle ist die Spezifikation. Zusätzlich ist eine Browserunabhängige Quelle empfehlenswert, die auf die Browserunterschiede eingeht. Mehrere Beispiele von CSS und JavaScript im Zusammenspiel finden Sie in Kapitel 20 »DHTML«.

1 2 3

CSS ist nicht auf HTML beschränkt, sondern kann beispielsweise auch für XML verwendet werden. Die offizielle Quelle lautet: http://www.w3.org/TR/REC-CSS1 http://www.w3.org/TR/REC-CSS2

 KOMPENDIUM 

JavaScript

581

Kapitel 19

CSS und JavaScript

19.1

CSS

Als JavaScript-Programmierer müssen Sie nicht alle Stil-Befehle4 kennen. Es ist ausreichend, einige Grundlagen zu verstehen. Stylesheets lassen sich auf der Seite an verschiedenen Stellen unterbringen: Inline-Stylesheets befinden sich im style-Attribut eines HTML-Tags:

Text

Der <style>-Block befindet sich dagegen im Kopf der HTML-Seite. Hier können Sie Stil-Befehle für eine bestimmte Tag-Art definieren, beispielsweise alle Absätze (

-Tags). Alternativ oder zusätzlich lassen sich auch Klassen5 deklarieren, die anschließend einem HTML-Element mit dem Attribut class zugewiesen werden. Listing 19.1: Stylesheet im Kopf der Seite (css.html)

<style type="text/css"> .klasse {font-weight:bold}

CSS

Text

Als dritte Alternative können Sie Stylesheets in externe Dateien auslagern. Die externe Datei wird mit oder @import eingefügt. In der Praxis wird meist verwendet, da @import nicht im Netscape 4.x funktioniert.

Ein Testskript zu @import finden Sie unter import.html auf der CD-ROM im Ordner code\kap19.

4 5

582

Deutsch für Stylesheet-Befehl. Häufig werden die Begriffe Stil-Anweisung oder -Regeln synonym verwendet. Neben den selbst definierten Klassen gibt es so genannte Pseudo-Klassen, die Formatierungen für unterschiedliche Zustände vornehmen. a:hover ist beispielsweise die Pseudo-Klasse für das Aussehen eines Links, wenn der Nutzer mit der Maus darüber fährt.

 KOMPENDIUM 

JavaScript

CSS

Kapitel 19

Syntax Die CSS-Syntax selbst ist sehr einfach: Stil-Befehl und Wert sind durch einen Doppelpunkt getrennt. Mehrere Stil-Befehl/Wert-Paare werden durch Semikolon (Strichpunkte) abgeteilt:

Text

Der Stylesheet-Block im Kopf der Seite oder das externe Stylesheet enthalten zuerst den oder – durch Kommata getrennt – die Tags, für die die nachfolgenden Stil-Befehle gelten sollen. Fehlt ein Tag, gilt die Definition für alle Elemente mit der Klasse. Durch einen Punkt abgetrennt folgt die Klasse. Fehlt sie, gelten die Stil-Befehle für alle Tags. Ist beides vorhanden, gelten sie nur für die Tags mit der entsprechenden Klasse. Die Stil-Befehle selbst folgen in geschweiften Klammern: Tag.Klasse {Stil-Befehl:Wert}

Einheiten Bei den meisten HTML-Attributen, die Abstände oder Größen angeben, haben Sie nur die Wahl zwischen Pixel (Bildpunkten) und eventuell Prozent (%). Bei Stylesheets ist dies anders: Hier existieren viele verschiedene Einheiten, die Sie auch angeben können, wenn Sie die JavaScript-Eigenschaften der Stil-Befehle verwenden (siehe Kapitel 19.2 »Zugriff«). Die wichtigsten Einheiten sind: px – Pixel: Ein Pixel ist ein Bildpunkt. Wie viele Bildpunkte in einer Fläche vorhanden sind, gibt die Auflösung an. Die Auflösung von Monitoren wird in ppi, also Pixel pro Inch gemessen. Übliche Werte liegen zwischen 72 und 96 ppi. % – Prozent mm – Millimeter, cm – Zentimeter und in – Inch werden für die Bildschirmausgabe selten verwendet, da sie eigentlich für den Druckbereich gedacht sind. pt – Punkt: Ist die Einheit für den Druck (72 Punkt entsprechen 1 Inch), die jedoch häufig zur Angabe von Schriftgrößen verwendet wird.

Farben Die Angabe von Farben kann bei CSS nicht nur mit dem Farbnamen oder hexadezimaler Notierung erfolgen, sondern auch mit dem RGB-Farbwert (Rot, Grün, Blau). Die Farben des Monitors entstammen dem Farbraum

 KOMPENDIUM 

JavaScript

583

Kapitel 19

CSS und JavaScript und können alle über den Anteil der drei Grundfarben Rot, Grün und Blau angegeben werden. Die Notation sieht wie folgt aus: rgb(255,0,0)

Diese Farbe ist ein reines Rot (Anteil 255) ohne Grün- und Blauanteil. Die Browser speichern die Farbwerte auch entsprechend der Eingabe sehr unterschiedlich. Folgendes Beispiel verdeutlicht dies: Listing 19.2: Hintergrundfarbe ändern (farben.html)6

document.body.style.backgroundColor="#FF0000"; alert(document.body.style.backgroundColor);6

Die erste Zeile setzt die Hintergrundfarbe auf den hexadezimalen Wert der Farbe Rot. Die zweite gibt die Hintergrundfarbe aus. Der Internet Explorer gibt #ff0000 zurück, der Navigator rgb(255,0,0). Dies ist wichtig, wenn Sie beispielsweise mit den Farben rechnen oder die Rückgabe anders verwerten möchten.

Abbildung 19.1: Internet Explorer …

Abbildung 19.2: … und Netscape Navigator handhaben die Farben intern unterschiedlich.

19.2

Zugriff

Bevor sich Stile mit JavaScript ändern lassen, benötigen Sie als Erstes Zugriff darauf. Um die Verwirrung nicht zu groß werden zu lassen, ist es notwendig, verschiedene Zugriffsmöglichkeiten zu unterscheiden: Zugriff über das style-Objekt – In diesem Objekt sind die Stil-Befehle als Objekteigenschaften abgelegt und können geändert werden. Die 6

584

Dieses Beispiel ist nicht Netscape Navigator 4.x-kompatibel.

 KOMPENDIUM 

JavaScript

Zugriff

Kapitel 19

Referenz auf das Element erhalten Sie je nach Browser über den W3Ckonformen Weg (document.getElementById) oder für den Internet Explorer 4 über document.all.7 Element.style.Befehl

Der Netscape Navigator 4.x erlaubt keinen Scripting-Zugriff auf StilBefehle mit style. In seinem DOM existiert kein style-Objekt. Allerdings lassen sich einige Angaben, beispielsweise visibility, für ein

-Tag direkt ohne style-Objekt vornehmen. Eine Beschreibung der StylesheetImplementierung von Netscape 4 in JavaScript finden Sie im Abschnitt »Netscape Navigator 4.x«. Beispiele mit Browser-übergreifenden Lösungen sind in Kapitel 20 »DHTML« gesammelt. NS4.x NS6


NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3

























Tabelle 19.1: style-Objekt

Zugriff auf das <style>-Tag selbst – Der Zugriff erfolgt ebenfalls über den W3C-konformen Weg (document.getElementById) oder für den Internet Explorer 4 über document.all. Beachten Sie, dass das <style>-Tag eine ID haben muss. Der Zugriff ermöglicht mittels der Eigenschaft media den Wechsel des Ausgabemediums8 und über type die Art des Stylesheets9. Zugriff über das styleSheet-Objekt – Die styleSheets-Kollektion enthält alle Stylesheets einer Seite und erlaubt darüber den Zugriff. Damit können Sie das zugewiesene Stylesheet wechseln (siehe Abschnitt »Stylesheets wechseln«). Unterhalb der styleSheet-Objekte ist jede Stil-Regel ein eigenes Objekt, das in den verschiedenen Browsern jedoch unterschiedlich angesprochen wird. Mehr dazu erfahren Sie in Kapitel 19.4 »styleSheets-Kollektion und Regeln«.

Das style-Objekt und seine Eigenschaften Der eigentliche Zugriff auf Stil-Befehle erfolgt über das style-Objekt. Die beiden weiteren Alternativen sind in der Praxis weniger verbreitet und dienen eher dazu, mehrere Stil-Anweisungen gleichzeitig auszutauschen.

7 8 9

Für den Hintergrund existiert ein eigenes Objekt body. Der Zugriff erfolgt dann über document.body.style. In CSS2 können Sie Stylesheets für unterschiedliche Zielmedien wie Print (Druck) und Screen (Bildschirm) festlegen. Da die meisten Browser ausschließlich CSS verwenden, ist diese Änderung in der Praxis nicht notwendig.

 KOMPENDIUM 

JavaScript

585

Kapitel 19

CSS und JavaScript Aus der Sicht der Spezifikation gibt es neben dem herkömmlichen DOM, das den Zugriff auf verschiedene Elemente der Seite erlaubt, auch ein eigenes Objektmodell für CSS. Die Spezifikation dazu finden Sie unter http:// w3.org/TR/DOM-Level-2-Style. Das style-Objekt repräsentiert eigentlich nur das style-Attribut bei einem Inline-Stylesheet. Daraus ergeben sich die folgenden einfachen Schritte, um auf den Stil eines Elements zuzugreifen: 1.

Zunächst benötigen Sie eine Referenz auf das Objekt. Dies kann – wie im Fall von body – ein anderes Objekt sein oder Sie greifen mit document.getElementById("ID") bzw. für den Internet Explorer 4 document.all auf ein HTML-Element zu.

2.

Anschließend folgt das style-Objekt.

3.

Den Abschluss bildet der Stil-Befehl.

Der Stil-Befehl ist eine Eigenschaft des style-Objekts. Da in JavaScript die übliche Schreibweise von Stil-Befehlen in CSS mit Bindestrichen (Minus) als Trennzeichen jedoch nicht gut geeignet ist, werden die Stil-Befehle als JavaScript-Eigenschaften ohne Bindestrich geschrieben. Dafür beginnt das zweite Wort mit einem Großbuchstaben. Aus dem CSS-Befehl font-size

wird also die JavaScript-Eigenschaft fontSize

Wenn Sie in der Praxis eine style-Eigenschaft benötigen, sehen Sie in einer CSS-Referenz nach und wandeln den Befehl nach diesem Schema um. Sie sollten jedoch immer testen, da einige Befehle (häufig bereits in CSS) nicht auf allen Browsern die gewünschten Ergebnisse erzielen. Berüchtigt sind hier auch die Unterschiede zwischen dem Internet Explorer unter Windows und dem Mac. Das folgende Beispiel ändert das Aussehen der Schrift, wenn der Nutzer mit der Maus darüber fährt. Die Referenz auf das Element realisiert dieses Skript mit this im Funktionsaufruf. this übergibt die Referenz auf das Objekt, das aufruft. Als Stile werden Schriftgröße und Fettschreibung geändert:

586

 KOMPENDIUM 

JavaScript

Zugriff

Kapitel 19

<script language="JavaScript">
Listing 19.3: Ein mit CSS realisierter RolloverEffekt (rollover_css.html)

"20pt"; = "bold";

"12pt"; = "normal";

//-->

CSS

CSS-Homepage des W3C Abbildung 19.3: Der Link ist normal formatiert, aber …

Netscape Navigator 4.x Der Netscape Navigator 4.x spielt – was das Scripting von CSS betrifft – eine Sonderrolle. Da er das style-Attribut nicht unterstützt, ist der Skriptzugriff nicht wie in den anderen Browsern gewährleistet. Der Skriptzugriff fehlt jedoch nicht vollständig, sondern Netscape verfolgte zu dieser Zeit noch einem eigenen Weg und nannte ihn JavaScript-Stylesheets (JSSS).

 KOMPENDIUM 

JavaScript

587

Kapitel 19

CSS und JavaScript

Abbildung 19.4: … wenn der Nutzer mit der Maus darüber fährt, wird er hervorgehoben.

Für diesen Weg gibt es drei Kollektionen: classes[], id[] und tags[]. Sie können also Stile für Stil-Klassen, IDs oder Tags vergeben. Dies klingt an sich sehr sinnvoll. Das Problem besteht jedoch darin, dass ein Element sich nicht mehr ändern lässt, wenn es bereits gerendert ist. Daher ist DHTML hier nur eingeschränkt möglich. Ein Anwendungsbeispiel – das Ändern von Stilen beim Laden der Seite – finden Sie auf der CD-ROM unter nn4.html im Ordner code\kap19.

19.3

Klassen und Stylesheets wechseln

Über das style-Objekt können Sie zwar nahezu jeden Stil ändern, müssen dies allerdings immer einzeln erledigen. Wenn es einmal mehrere Änderungen gleichzeitig sein sollen, wechseln Sie am besten direkt die Klasse oder das komplette Stylesheet.

Klassen wechseln Das Wechseln von Klassen erfolgt über das className-Objekt. Dieses Objekt repräsentiert das class-Attribut für ein beliebiges HTML-Element. Normalerweise werden Objekte in JavaScript so wie die HTML-Attribute10 benannt, da class allerdings ein reserviertes (aber noch nicht verwendetes) Schlüsselwort ist, musste die Alternative className seine Stelle einnehmen. Tabelle 19.2: className-Objekt

NS4.x NS6


NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3

























10 beispielsweise style

588

 KOMPENDIUM 

JavaScript

Klassen und Stylesheets wechseln

Kapitel 19

Mit folgender Zeile weisen Sie einem Element eine neue Klasse zu: Element.className = "Klasse";

Ein Beispiel illustriert dies: Das Skript ändert die Klasse, wenn der Nutzer mit der Maus über den Link fährt (onmouseover). <style type="text/css"> .ueber {font-weight:bold;color:red;font-size:20pt} .raus {color:blue;font-size:14pt}

Listing 19.4: Die StylesheetKlasse ändern (klasse_wechseln. html)

<script language="JavaScript">
//-->

CSS

CSS-Homepage des W3C

Der Konqueror kommt hier mit den Klassenwechseln in den Ereignissen onmouseover und onmouseout nicht zurecht, obwohl er className unterstützt. Auch bei anderen Ereignissen ändert der Konqueror die Klasse erst, wenn der Nutzer das Objekt mit der Maus verlässt. IDs wechseln Neben den Klassen können Sie zum Zuweisen von Stilen auch IDs verwenden. Die Beschränkung für IDs ist, dass eine ID nur einmal verwendet werden darf. Sollten Sie eine einzelne ID mit Stylesheets mehrmals vergeben, erscheint im Browser allerdings keine Fehlermeldung. Die Festlegung, dass eine ID (Identifier) nur für ein Element gelten darf, bestimmt nur der Standard. Da es zusätzlich sehr unlogisch und unsauber wäre, einen Identifier mehrmals zu vergeben, sollten Sie auf jeden Fall darauf verzichten.

 KOMPENDIUM 

JavaScript

589

Kapitel 19

CSS und JavaScript

Abbildung 19.5: Der Konqueror verwendet bei onmouseover und onmouseout die falsche Klasse.

Das Wechseln der ID erfolgt analog zum Wechseln von Klassen (siehe voriger Abschnitt). Hier heißt das Objekt jedoch nicht idName, sondern lediglich id. Ein Beispielskript finden Sie auf der CD-ROM unter id_wechseln.html im Ordner code\kap19.

Stylesheets wechseln Externe und in <style>-Blöcken im Kopf der Seite befindliche Stylesheets sind auch so genannte styleSheet-Objekte.11 Sie werden in der Kollektion styleSheets bereitgehalten und erhalten – in der Reihenfolge des Erscheinens im Code – einen Index, beginnend bei 0. Der Zugriff auf ein styleSheet-Objekt erfolgt über den Index: document.styleSheets[Index]

Der Zugriff über die ID ist nur im Internet Explorer möglich. Der Grund ist, dass das styleSheet-Objekt eigentlich nicht dasselbe ist, wie das <style>-Element-Objekt des <style>-Tags. Der Internet Explorer gibt an, dass das styleSheet-Objekt die ID des <style>-Element-Objekts erbt, der Netscape Navigator und andere Browser gestatten dies nicht.12 document.styleSheets["ID"]

11 Inline-Stylesheet-Anweisungen sind keine styleSheet-Objekte, können also auch nicht alle gleichzeitig geändert werden. In diesem Fall müssen Sie mit Klassen arbeiten. 12 Dies gilt auch für mit eingebundene Stylesheets.

590

 KOMPENDIUM 

JavaScript

Klassen und Stylesheets wechseln

NS4.x NS6


Kapitel 19

NS7

IE4 IE5

IE5.5 IE6













O7




M1

K3







Tabelle 19.3: styleSheet-Objekt

disabled Um ein Stylesheet zu wechseln, gibt es mehrere Möglichkeiten: Die einfachste ist, das aktive Stylesheet zu deaktivieren und ein neues zu aktivieren. Dies erfolgt über die Eigenschaft disabled. NS4.x NS6


NS7

IE4 IE5

IE5.5 IE6
















O7

M1

K3




Tabelle 19.4: disabled-Eigenschaft

Diese Eigenschaft ist im Konqueror zwar vorhanden, wird allerdings nicht unterstützt. Ändern Sie den Wert per Skript, wird er zwar richtig ausgegeben, beide Stylesheets bleiben jedoch aktiv. Das HTML-Attribut disabled wird ebenfalls nicht unterstützt. Für Konqueror und Opera sollten Sie also das Standard-Stylesheet in der Reihenfolge als letztes anfügen, damit seine Stile die der anderen Stylesheets überschreiben. Dies vermeidet unschöne Effekte. Im folgenden Beispiel erhält der Nutzer über eine Schaltfläche die Möglichkeit, das aktive Stylesheet zu wechseln. Das eine stellt die Schrift in Arial, den Hintergrund rot und die Tabellenüberschriften fett dar. Das andere sorgt für einen blauen Hintergrund, weiße Farbe und kursiven Schriftschnitt: <style id="rot" type="text/css"> body {font-family:Arial;background-color:red} td {font-family:Arial;color:yellow} .tabueb {font-weight:bold} <style id="blau" disabled="true" type="text/css"> body {background-color:blue} td {color:white} .tabueb {font-style:italic} <script language="JavaScript">

CSS wechseln

Eigenschaft	Beschreibung
disabled	Deaktiviert ein Stylesheet.

Stylesheet wechseln Abbildung 19.6: Ein Anklicken der Schaltfläche wechselt …

Abbildung 19.7: … das aktive Stylesheet.

Die Eigenschaft disabled gibt es auch für <style>-Element-Objekte, wenn Sie darauf beispielsweise mit getElementById() zugreifen. Wesentlich gebräuchlicher ist allerdings der Zugriff über die styleSheets-Kollektion, da sie auch mit eingebundene Stylesheets enthält.

592

 KOMPENDIUM 

JavaScript

styleSheets-Kollektion und Regeln

Kapitel 19

Weitere Methoden Neben disabled gibt es einige alternative Methoden, die allerdings alle einen Haken haben: Für ein styleSheet-Objekt gibt es die Eigenschaft href, die die URL des Stylesheets enthält. Da diese Eigenschaft allerdings in den meisten Browsern mit Ausnahme des Internet Explorers ab Version 4 unter Windows (nicht beim Mac) nicht gesetzt werden kann, sollte sie in der Praxis nicht zum Einsatz kommen. Die Methode addImport(URL) des styleSheet-Objekts erlaubt die Angabe eines externen Stylesheets, das importiert werden soll. Die zugehörige – und nur lesbare – Eigenschaft imports enthält alle importierten styleSheet-Objekte als Array.13 Diese Methode ist allerdings auf den Internet Explorer ab Version 4 beschränkt. Die Methode createStyleSheet(URL) erzeugt ein neues styleSheet-Objekt, das auch direkt angewendet wird. Sie funktioniert nur im Internet Explorer ab Version 4.14 Das neue styleSheet-Objekt ist sofort Teil der styleSheets-Kollektion, also des DOM, und kann – auch wenn es leer erstellt wurde – mit anderen Methoden wie beispielsweise addRule()15 gefüllt werden. Da die hier vorgestellten Methoden auf einige wenige Browser oder Plattformen beschränkt sind, haben sie in der Praxis wenig Einsatzberechtigung.

19.4

styleSheets-Kollektion und Regeln

Die styleSheets-Kollektion16 hat noch mehr zu bieten, außer dem Wechsel von Stylesheets (siehe voriger Abschnitt). Ein styleSheet-Objekt aus der Kollektion enthält mehrere Stil-Befehle oder auch -Regeln. Diese Regeln wiederum sind ebenfalls Objekte und in einer eigenen Kollektion versammelt.

Regeln Haben Sie es bemerkt? Im letzten Abschnitt war der Name der Kollektion mit Regeln nicht zu finden. Dies ist keine Unterlassungssünde, sondern den unterschiedlichen Implementationen in den Browsern zu verdanken. In den verschiedenen Browsern haben die Kollektionen daher auch unterschiedliche Namen: 13 Formal-logisch ist jedes importierte Objekt wiederum ein styleSheet-Objekt und unterstützt auch die zugehörigen Eigenschaften wie disabled oder href. 14 nicht im IE 4 für Mac 15 siehe Kapitel 18.4, Abschnitt »JavaScript-Zugriff« 16 Der Name styleSheet-Objekt ist übrigens nicht vollständig regelkonform. Eigentlich müsste das Objekt CSSStyleSheet-Objekt heißen.

 KOMPENDIUM 

JavaScript

593

Kapitel 19

CSS und JavaScript cssRules – ist die Kollektion in Netscape, Mozilla und Konqueror. rules – heißt sie im Internet Explorer. Einzige Ausnahme ist der Inter-

net Explorer 5 beim Macintosh, denn er unterstützt beide Namen für die Kollektion. Tabelle 19.5: Regelkollektionen

NS4.x NS6 cssRules




NS7


rules a.

IE4 IE5

IE5.5 IE6

O7

(
)a








M1

K3










beim Mac ab Version 5

Der Zugriff erfolgt bei beiden direkt über den Index. Jede Regel (Block mit optionalem Tag, Klasse und den Stil-Befehlen in geschweiften Klammern) erhält eine Indexnummer, beginnend bei 0. Die erste Regel des ersten styleSheet-Objektes wird also wie folgt angesprochen: document.styleSheets[0].cssRules[0];

oder im Internet Explorer document.styleSheets[0].rules[0];

Setzen können Sie einen Stil-Befehl mit dem style-Objekt document.styleSheets[0].cssRules[0].style.color = "green";

bzw. document.styleSheets[0].rules[0].style.color = "green";

Die unterschiedlichen Namen der Kollektion zwingen den Programmierer in der Praxis dazu, eine Fallunterscheidung zu schreiben. Dazu sind, wie in Kapitel 12 »Browserunterscheidung« nachzulesen, verschiedene Ansätze möglich. Im folgenden Beispiel kommt document.all zum Einsatz, um die Internet Explorer herauszufiltern. Das Skript ändert die Schriftart in den zwei Regeln für den Körper der HTML-Seite (body) und für Tabellenzellen (td). Die neue Schriftart kann der Nutzer in ein Textfeld eingeben. Auf eine Überprüfung der korrekten Eingabe verzichtet das Skript, damit der Code nicht zu umfangreich wird. Hier der komplette Code.

594

 KOMPENDIUM 

JavaScript

styleSheets-Kollektion und Regeln <style type="text/css"> body {font-family:Arial;background-color:red} td {font-family:Arial;color:white}

Kapitel 19 Listing 19.6: Mit der Regelkollektion Browser-übergreifend arbeiten (regeln.html)

.tabueb {font-weight:bold} <script language="JavaScript">
//-->

CSS wechseln

Eigenschaft	Beschreibung
disabled	Deaktiviert ein Stylesheet.

Weitere Eigenschaften und Methoden Das styleSheet-Objekt hat noch weitere Eigenschaften und Methoden, die gelegentlich zum Einsatz kommen. Die folgende Tabelle gibt einen Überblick über ausgewählte Eigenschaften des styleSheet-Objekts.

 KOMPENDIUM 

JavaScript

595

Kapitel 19

CSS und JavaScript

Abbildung 19.8: Der Nutzer tippt die gewünschte Schriftart ein, klickt auf die Schaltfläche …

Abbildung 19.9: … und die Schrift wird über die Regelkollektionen geändert.

Tabelle 19.6: Einige weitere Eigenschaften des styleSheetObjekts

596

Eigenschaft

Beschreibung

cssText

String mit den Stylesheet-Regeln. Nur ab Internet Explorer 5.

media

Enthält und erlaubt das Setzen eines bestimmten Medientyps für ein Stylesheet. Dies entspricht dem HTML-Attribut media.

 KOMPENDIUM 

JavaScript

styleSheets-Kollektion und Regeln

Kapitel 19

Eigenschaft

Beschreibung

ownerNode

Alle drei Eigenschaften enthalten eine Referenz auf den Dokumentknoten des styleSheet-Objekts. Dies ist meist das <style>- oder -Element. ownerNode ist die Netscape Variante ab Version 6. owningElement die Internet ExplorerVariante ab Version 4 und owningNode die (falsche) Benennung im Internet Explorer 5 für den Mac.

owningElement owningNode

parentStyleSheet

Referenz auf das styleSheet-Objekt, das ein importiertes Stylesheet aufnimmt. Bei per @import eingebundenen Stylesheets ist das Ergebnis null, da sie direkt importiert werden.

readOnly

Zeigt an, ob ein Stylesheet extern (true) ist oder innerhalb eines <style>-Blocks definiert wurde (false). Funktioniert nur im Internet Explorer ab Version 4.

title

Wert des title-Attributs eines Stylesheets; setz- und lesbar.

NS4.x NS6

NS7

IE4 IE5

cssText media







ownerNode







owningElement




parentStyleSheet




readOnly




title a.







IE5.5 IE6




































































O7

M1

K3

























Tabelle 19.6: Einige weitere Eigenschaften des styleSheetObjekts (Forts.)

Tabelle 19.7: Weitere Eigenschaften des styleSheetObjekts

beim Mac owningNode

Die Methoden des styleSheet-Objekts dienen dazu, Regeln hinzuzufügen und zu entfernen. Wie die folgende Tabelle zeigt, sind die Methoden für Internet Explorer und Netscape Navigator unterschiedlich.

 KOMPENDIUM 

JavaScript

597

Kapitel 19 Tabelle 19.8: Weitere Methoden des styleSheetObjekts

Tabelle 19.9: Weitere Methoden des styleSheetObjekts

CSS und JavaScript

Methode

Beschreibung

addRule()

Fügt eine neue Regel hinzu. Ist der optionale Index angegebenen, wird die Regel an dieser Stelle eingefügt, anderenfalls am Ende; Internet Explorer ab Version 4.

insertRule("Rule", Index)

Fügt eine neue Regel ein; nur Netscape 6 und höher sowie Mozilla.

removeRule(Index)

Entfernt eine Regel; Internet Explorer ab Version 4.

deleteRule(Index)

Löscht eine Regel; Netscape Navigator ab Version 6 und Mozilla.

NS4.x NS6

NS7

addRule()

IE4 IE5

IE5.5 IE6










O7

M1

K3




insertRule()













deleteRule()













removeRule()

19.5













Stylesheets in der Praxis

Der Einsatz von Stylesheets ist heute für einen Webdesigner bereits selbstverständlich. Die Zugriffs- und Arbeitsmöglichkeiten mit JavaScript erfordern eine verstärkte Rücksichtnahme auf die Browserkompatibilität, liefern dafür aber sehr interessante Möglichkeiten. Verzichtet man auf Netscape 4.x-Kompatibilität, lassen sich die wichtigsten Elemente wie beispielsweise das style-Objekt bedenkenlos verwenden. Aber auch wenn Netscape 4.xKompatibilität von Bedeutung ist, lassen sich optische Effekte gut mit Stylesheets realisieren, wenn der Programmierer darauf achtet, dass Netscape 4.x-Nutzer nur auf Optik und Effekte, nicht aber auf Inhalt verzichten müssen. Dasselbe gilt für den Wechsel von ganzen Stylesheets beispielsweise mit disabled. Konqueror- und Opera-Nutzer sehen zwar den Effekt nicht, dürfen aber auch kein komplettes Chaos vorgesetzt bekommen. Testen Sie insbesondere auf den Browsern, die eine Funktion, ein Objekt usw. nicht unterstützen, um zu sehen, ob auch Nutzer dieser Browser mit Ihrer Seite noch etwas anfangen können. Wenn dies nicht der Fall ist, müssen Sie diesen Nutzern Alternativen anbieten.

598

 KOMPENDIUM 

JavaScript

Stylesheets in der Praxis

Kapitel 19

Dem Einsatz von Stylesheets sind auch Grenzen gesetzt, wenn der Nutzer eigene Stylesheets verwendet, die das Aussehen der Seite mit beeinflussen, oder Stylesheets komplett untersagt.17 Im Internet Explorer können Sie beispielsweise über das Menü EXTRAS/INTERNETOPTIONEN und die Schaltfläche EINGABEHILFEN eigene BENUTZERSTYLESHEETS vergeben.18 In manchen Browsern, beispielsweise Netscape 4.x lassen sich auch Stylesheets deaktivieren.

17 Beim Netscape Navigator 4.x ist dies sogar der Fall, wenn der Nutzer JavaScript deaktiviert, da die CSS-Engine direkt mit JavaScript integriert ist. 18 Ein Stylesheet, das den Rahmen von Tabellen oder

-Tags vergrößert, kann sehr praktisch sein, um komplexere Layouts von anderen Seiten genauer anzuschauen.

 KOMPENDIUM 

JavaScript

599

20

DHTML

Kaum eine DHTML-Abhandlung beginnt ohne eine Diskussion über die Begrifflichkeit. DHTML steht für Dynamic HTML. Der Begriff Dynamic ist schwammig. Da DHTML kein eigener technologischer Standard ist, haben sich daraus eine Vielzahl von Definitionen gebildet. Übrig geblieben sind zwei Ansätze: DHTML als Kombination der Technologien HTML, CSS und JavaScript unter Verwendung eines DOM (Document Object Model) DHTML als (clientseitig) programmierte Interaktion auf einer Website, die zumindest mit HTML arbeitet1 Die Wahrheit – das heißt die Praxis – liegt wohl irgendwo zwischen den beiden Definitionen, denn es scheint weder vollkommen logisch, dass alle drei Technologien inklusive DOM vorhanden sein müssen, noch ist es besonders sinnvoll, per mailto: versendete Formulareingaben als DHTML zu bezeichnen. Nun aber genug der akademischen Diskussionen. In diesem Kapitel erfahren Sie zunächst näheres über die Grundlagen von DHTML. Zum besseren Verständnis der Grundlagen ist es hilfreich in Kapitel 10 »Document Object Model« und Kapitel 12 »Browserunterscheidung« nachzuschlagen, denn dort werden die Grundlagen für DHTML gelegt. In diesem Kapitel finden Sie daher mehrere Verweise auf diese Kapitel. Anschließend finden Sie die DHTML-Beispiele nach Anwendungen sortiert, damit Sie direkt erkennen können, was Ihnen in der Praxis nutzt. Die Anwendungsbeispiele sind in folgende Bereiche unterteilt: Maus – Interaktionen mit der Maus, aber auch die Wandlung des Mauszeigers gehören in diesen Bereich. Navigation – Wie bessert DHTML optisch eine Navigation auf? Welche Lösungen sind möglich? Animation – DHTML und Bewegung auf der Webseite 1

Dies schließt beispielsweise Flash aus.

 KOMPENDIUM 

JavaScript

601

Kapitel 20

DHTML

20.1

Grundlagen

DHTML ist ab der vierten Generation des Netscape Navigators und Internet Explorers möglich. Dies schließt ältere Browser natürlich aus. Aber auch bei allen Browsern ab der vierten Generation müssen sehr viele Aspekte beachtet werden. Der Netscape Navigator 4.x hat ein komplett eigenes Objektmodell und für DHTML beispielsweise Layer, die kein anderer Browser, also auch keine spätere Netscape-Version, kennt. Der Internet Explorer verwendet ein Objektmodell, das auf document.all beruht. Erst die neueren Browser Internet Explorer 5 und Netscape 6 unterstützen das W3C-DOM.2 Auch im Konqueror, seinem Mac OS X-Ableger Safari und in Opera wird das W3C-DOM gut unterstützt. Wenn Sie mit DHTML arbeiten und auch die vierte Generation der Browser unterstützen möchten, müssen Sie also drei Objektmodelle berücksichtigen. Dazu ist eine effektive Browserunterscheidung notwendig. Im DHTMLBereich wird hier die Unterscheidung mit Browserobjekten bevorzugt.3 Mit dieser Unterscheidung erfahren Sie sofort, ob ein Browser ein Objekt direkt unterstützt. if (document.all)

prüft beispielsweise, ob der Browser document.all unterstützt. Ein Internet Explorer liefert etwas zurück, wodurch die Bedingung als erfüllt (true) gilt. Andere Browser geben undefined zurück, was für die Bedingung false bedeutet. Die Browserunterscheidung mittels navigator-Objekt kann für eine DHTML-Seite unangenehme Konsequenzen haben. Häufig werden nur einige wenige Browser abgeprüft. Neue Browser und »Rand-Browser« wie beispielsweise Safari, Konqueror oder Opera, die sich nicht als anderer Browser ausgeben, bleiben außen vor, obwohl sie das W3C-DOM gut unterstützen. Die Beispiele in diesem Kapitel verwenden die Browserunterscheidung mit Browserobjekten. Einige Beispiele funktionieren allerdings nicht in allen Browsern. In diesem Fall finden Sie jeweils Hinweise und Erklärungen. In den nächsten Abschnitten werden die Besonderheiten einiger Browser im Umgang mit DHTML grundlegend erläutert. Dies ist zum Verständnis der folgenden Beispiele hilfreich.

2 3

602

Nähere Informationen zu DOMs erhalten Sie in Kapitel 10 »Document Object Model«. siehe Kapitel 12.4 »Browserobjekte«

 KOMPENDIUM 

JavaScript

Grundlagen

Kapitel 20

Netscape 4.x und Layer Aus der Sicht des DHTML-Programmierers ist Netscape 4.x der Albtraum unter den Browsern. Er kocht in allen Bereichen sein eigenes Süppchen. Wie Sie in Kapitel 19 »CSS und JavaScript« nachlesen konnten, ist auch die CSSUnterstützung nur teilweise vorhanden und unterscheidet sich von den anderen Browsern. Beispielsweise besitzt der Netscape Navigator 4.x kein style-Objekt und verfügt über wesentlich weniger Möglichkeiten, Stile zu ändern. Die Ursache dieser Inkompatibilitäten und fehlenden Standardunterstützung liegt hauptsächlich darin, dass Netscape den Browser auf den Markt gebracht hat, bevor viele Konzepte standardisiert wurden. Der Bereich, wo dies am deutlichsten wird, sind Layer. Netscape entwickelte das Tag. Layer waren als frei platzierbare Ebenen gedacht, die auch übereinander geschichtet werden können. Leider ging dieses Konzept nie in den HTML-Standard ein und tauchte in der nächsten Netscape-Version 6 nicht mehr auf. Für DHTML-Programmierer gibt es den angenehmen Umstand, dass im Navigator 4.x auch

-Blöcke als Layer angesehen werden. Sie können auf diese Elemente also direkt mit document.ID

zugreifen.

Internet Explorer 4 Der Internet Explorer 4 hat zwar auch ein eigenes Objektmodell, macht es dem Programmierer aber nicht ganz so schwer. Die Kollektion document.all enthält alle Elemente. Mit document.all.ID

greifen Sie einfach auf ein Element zu. Alternativ können Sie document.all["ID"]

verwenden. Auch das style-Objekt ist im Internet Explorer 4 schon vorhanden.

Internet Explorer 4 und höher Der Internet Explorer besitzt einige eigene Funktionen, die von keinem anderen Browser genutzt werden und für DHTML eingesetzt werden können. Zum einen sind dies Stylesheet-Befehle für Filter wie beispielsweise

 KOMPENDIUM 

JavaScript

603

Kapitel 20

DHTML einen Transparenzfilter und zum anderen so genannte Behavior, also standardisierte Verhalten. Diese Funktionen werden in den folgenden Abschnitten beschrieben. Filter Der Internet Explorer ab Version 4 besitzt unter Windows (nicht beim Mac!) so genannte Filter. Vielleicht sind Ihnen Filter aus Grafikprogrammen bekannt. Es handelt sich dabei um kleine Hilfsprogramme, die Effekte auf ein Bild anwenden, deren Erstellung von Hand deutlich zeitaufwändiger wäre. Im Internet Explorer sind die Filter ein Teil der Stylesheet-Implementierung.4 Die Anwendung erfolgt mit filter und dem Filternamen. In runden Klammern folgen mögliche Attribute.

Beliebiger Text auch für Internet Explorer 4

Ab Internet Explorer 5.5 hat Microsoft eine neue Syntax für Filter eingeführt. Es muss genau angegeben werden, wo der Filter zu finden ist. Dazu folgt nach filter zunächst progid und anschließend der Name der Komponente, die die Filter enthält:

Beliebiger Text

Abbildung 20.1: Die Filtereffekte im Browser

4

604

Sie sind jedoch kein Bestandteil des Standards. Die CSS-Arbeitsgruppe des W3C hat die Vorschläge von Microsoft zurückgewiesen und wartet auf die Ergebnisse der SVG-Arbeitsgruppe, die sich mit Filtern in Verbindung mit Stylesheets beschäftigt.

 KOMPENDIUM 

JavaScript

Grundlagen

Kapitel 20

Damit bestimmte Filter in einem

-Block sichtbar werden, benötigen diese Breiten und/oder Höhenangaben im Stylesheet.

Eine Anleitung zu Filtern finden Sie bei Microsoft unter http://msdn. microsoft.com/workshop/filter/filters.asp. Unter http://msdn.microsoft. com/workshop/filter/reference/reference.asp finden Sie eine Auflistung aller zur Verfügung stehenden Filter. Der Skriptzugriff auf einen Filter erfolgt über das Objekt filter. In der filters[]-Kollektion kann entweder der Index oder der Name des Filters angegeben werden: document.all.ie4.filters["dropshadow"]5

Analog können Sie die Eigenschaften eines Filters ändern: document.all.ie4.filters["dropshadow"].offx = "10";

Die neue Syntax ab Internet Explorer 5.5 erfordert etwas mehr Tipparbeit, da der Name mit Komponente angegeben werden muss: document.all.ie55.filters["DXImageTransform.Microsoft.Glow"].color = "blue";

Das folgende Beispiel ändert beim Anklicken der Schaltfläche jeweils eine Eigenschaft eines Filters in der alten und der neuen Syntax: <script language="JScript">

Beliebiger Text auch für Internet Explorer 4

Beliebiger Text

5

Dieser Zugriff lässt sich mit item schreiben, also document.all.ie4.filters.item("dropshadow"). Das Ergebnis ist identisch.

 KOMPENDIUM 

JavaScript

605

Kapitel 20

DHTML

Filter ändern Abbildung 20.2: Die Filter vor (links) und nach (rechts) Anklicken der Schaltfläche

Mit der Eigenschaft enable können Sie Filter an- (true oder 1) und abschalten (false oder 0). Damit lassen sich beispielsweise Rollover-Effekte mit Filtern realisieren. Transitions sind mit den Filtern artverwandt. Man könnte sie als Überblendeffekte von einem Element zu Transparenz oder von mehreren Elementen ineinander beschreiben. Der JavaScript-Zugriff erfolgt wie bei Filtern über die ID des Elements mit Transition und anschließend filters. Behavior Die Behavior des Internet Explorers wurden zuerst in Version 5 für Windows (nicht für den Mac) des Browsers eingeführt. Sie sind (noch) kein Standard, Microsoft hat sie jedoch als Erweiterung von CSS eingereicht.6 Da eines der Ziele von Behaviors in der Trennung von Code und Content besteht, liegt ein Behavior immer in einer externen Datei mit der Dateiendung .htc. Behavior werden mit dem CSS-Befehl behavior:url(Behavior.htc) verlinkt. In der Behavior-Datei selbst wird ein selbst erstelltes Verhalten von einem -Block eingeschlossen. Innerhalb dieses Blocks kann das Verhalten mit einem Ereignis zugewiesen werden. 6

606

siehe http://www.w3.org/TR/becss

 KOMPENDIUM 

JavaScript

Grundlagen

Kapitel 20

Neben eigenen Behaviors bietet der Internet Explorer auch einige vorgefertigte. Standard-Behaviors werden mit #default#Name aufgerufen. .Klasse {behavior:url(#default#userdata)}

Diese Zeile weist das Standard-Behavior userdata einer Stylesheet-Klasse zu. Dieses Verhalten speichert Daten in einem Objekt. Auf eine ausführliche Beschreibung wird hier aufgrund des proprietären Charakters der Behaviors verzichtet. Außerdem handelt es sich hier ja nicht um ein HTML-Buch
. Eine ausführliche Anleitung finden Sie unter http:// msdn.microsoft.com/workshop/author/behaviors/overview.asp. Die einzelnen vorgefertigten Behaviors werden unter http://msdn.microsoft.com/workshop/author/ behaviors/reference/reference.asp vorgestellt. Mit den ab Internet Explorer 5 unter Windows zur Verfügung stehenden Methoden addBehavior("URL") und removeBehavior("ID") können Sie Verhalten auch mit JavaScript zuweisen bzw. entfernen. VML und Direct Animation Der Internet Explorer unterstützt zwei Techniken für Webgrafiken, die in anderen Browsern nicht vorhanden sind: VML (Vector Markup Language) ist eine Beschreibungssprache für Vektorgrafiken. Sie wird im Internet Explorer mit dem Standard-Behavior vml initialisiert. v\:* {behavior: url(#default#vml)}

VML ist jedoch bisher nur auf Microsoft beschränkt. Der offizielle, das heißt vom W3C herausgegebene, Standard für Vektorgrafiken im Netz ist SVG (Scalable Vector Graphics).7 Zurzeit ist nicht klar, ob Microsoft sich auf Dauer SVG zuwendet, VML weiter pushen möchte oder verstärkt mit dem Flash-Format von Macromedia (SWF) arbeitet. Direct Animation ist eine Animationstechnik, die auch komplexere Animationen erlaubt. Sie wurde erstmals im Internet Explorer 5 integriert, hat in der Praxis bisher jedoch kein Echo gefunden und scheint langsam auszusterben.

7

siehe http://www.w3.org/Graphics/SVG

 KOMPENDIUM 

JavaScript

607

Kapitel 20

DHTML Auf eine Beschreibung der beiden Technologien wird in diesem Buch verzichtet, da es viele nicht proprietäre und ebenso interessante technische Ansätze gibt, die den entsprechenden Platz verdient haben. Detaillierte Informationen über VML finden Sie bei Microsoft unter http://msdn. microsoft.com/workshop/author/vml/ref/default.asp.

Neuere DHTML-Ansätze Die Methode document.write() ist nicht besonders flexibel, wenn HTML oder Text dynamisch in eine Webseite geschrieben werden soll. Daher stellt dieser Abschnitt die für DHTML grundlegenden Alternativen vor. Den Alternativen haftet jedoch der Makel an, dass sie zumindest mit dem Netscape Navigator 4.x nicht funktionieren. innerHTML innerHTML erlaubt das Einfügen von HTML-Code in ein beliebiges Element, auf das Sie mit der ID zugreifen. innerHTML funktioniert in allen Browsern, außer im Netscape Navigator 4.x. document.getElementById("text1").innerHTML

Neben innerHTML gibt es drei weitere Alternativen, die nur im Internet Explorer und im Opera 78 vorhanden sind: innerText – fügt reinen Text ein und berücksichtigt HTML-Tags nicht. Diese Eigenschaft ist auch im Konqueror vorhanden. outerHTML – schließt zusätzlich zum HTML innerhalb des Elements auch die Tags des Elements selbst ein. So können Sie ein Element komplett austauschen. outerText – liefert den Text eines HTML-Elements. Tabelle 20.1: Eigenschaften zum Einfügen von HTML und Text

NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3

























innerText
















outerHTML
















outerText
















innerHTML

8

608







Opera 6 unterstützt bisher noch keine der Eigenschaften.

 KOMPENDIUM 

JavaScript

Grundlagen

Kapitel 20

Das folgende Beispiel fügt einen Text, den der Nutzer in das Textfeld eingibt, an das Ende des Absatzes ein. Das Beispiel beinhaltet eine Fallunterscheidung mit dem Browserobjekt document.all. <script language="JavaScript">
Listing 20.2: Mit innerHTML einen Absatz hinzufügen (innerhtml.html)

//-->

Ein beliebiger Text.

Abbildung 20.3: Der Text wird hinter dem vorherigen Text angefügt.

insertAdjacentHTML und insertAdjacentText Die beiden Methoden insertAdjacentHTML("Position", "Inhalt") und insertAdjacentText("Position", "Text") ermöglichen Ihnen, HTML-Code oder Text direkt an oder vor ein Element zu hängen. Leider sind beide Methoden nur im Internet Explorer und im Opera 7 verfügbar.

 KOMPENDIUM 

JavaScript

609

Kapitel 20

DHTML

Tabelle 20.2: insertAdjacentHTML und insertAdjacentText

NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

insertAdjacentHTML
















insertAdjacentText
















M1

K3

Die Position kann folgende vier Werte annehmen, in Relation zum Objekt, bei dem sie angewendet wird: BevorBegin – vor Beginn des Elements AfterBegin – nach Beginn des Elements BevorEnd – vor Ende des Elements AfterEnd – nach Ende des Elements

Das folgende Beispiel ist eine Abwandlung von Listing 20.2. Hier wird der im Textfeld eingegebene Text (mit HTML-Tags) nach dem Textabsatz eingefügt: Listing 20.3: insertAdjacentHTML in der

Praxis (insertAdjacentHTML.html)

<script language="JavaScript">"); } }

//-->

Ein beliebiger Text.

610

 KOMPENDIUM 

JavaScript

Grundlagen

Kapitel 20 Abbildung 20.4: Der Text wird immer unter dem ersten Absatz eingefügt.

Dynamische Tabellen In neueren Browsern sind auch Tabellen Objekte.9 Dies ermöglicht Ihnen, Tabellenzellen dynamisch zu erstellen und zu löschen. Das folgende Beispiel erzeugt mit den Methoden insertRow(Index) und insertCell(Index) eine neue Reihe und zwei neue Zellen unter den bereits bestehenden. Mit innerHTML werden die Zellen anschließend mit den Eingaben des Nutzers in ein Textfeld und ein mehrzeiliges Textfeld gefüllt. Und schon ist eine einfache, dynamisch gefüllte Linkliste fertig: <script language="JavaScript">
Listing 20.4: Tabellen in JavaScript dynamisch generieren (dynamic_tabellen. html)

var reihe = tab.insertRow(tab.rows.length); var zelle1 = reihe.insertCell(0); zelle1.innerHTML = link; var zelle2 = reihe.insertCell(1); zelle2.innerHTML = beschr; }

//--> 9

Präzise ausgedrückt bedeutet dies, dass Tabellen ein eigenes Objektmodell besitzen.

 KOMPENDIUM 

JavaScript

611

Kapitel 20

DHTML

Link	Beschreibung

Abbildung 20.5: Die Tabelle wird dynamisch gefüllt.

Auf der CD-ROM finden Sie unter dynamic_tabellen_link.html im Ordner code\kap20 eine Variante, in der die Links in der Tabelle direkt verlinkt sind. Bei der Linkliste besteht das Problem darin, dass die Daten nicht gespeichert werden. Wenn der Nutzer die Seite also verlässt oder neu lädt, gehen die Links und Beschreibungen verloren. Um dies zu verhindern, gibt es mehrere Lösungsmöglichkeiten: Sie können die Daten aus der Tabelle in einem Cookie speichern (siehe Kapitel 17 »Cookies«).

612

 KOMPENDIUM 

JavaScript

Grundlagen

Kapitel 20

Alternativ lassen sich die Daten in Formularfeldern innerhalb eines versteckten Frames ablegen. Zu guter Letzt können Sie natürlich auch eine serverseitige Programmiersprache verwenden, um die Daten in eine Datenbank oder XMLDatei zu schreiben. In diesem Fall würden Sie das Beispiel in der Praxis vermutlich komplett serverseitig realisieren. Weitere Methoden und Eigenschaften Neben den beiden hier verwendeten Methoden insertRow() und insertCell() können Sie mit deleteRow(Index) und deleteCell(Index) einzelne Reihen oder Zellen aus einer Tabelle entfernen. Die zugehörigen Kollektionen, die alle Reihen bzw. Zellen enthalten, heißen rows bzw. cells. Folgende Zeile fügt die erste Zelle der ersten Reihe mit der unmittelbar danebenliegenden zusammen: Tabelle.rows[0].cells[0].colSpan = 2;

Sie sollten das Tabellen-Design nur dann ändern, wenn Sie dies genau kontrollieren können. Anderenfalls bricht ein Tabellen-Layout sehr schnell in sich zusammen. Die folgende Tabelle gibt eine Übersicht über die Browserkompatibilität der vier Methoden. NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3

insertRow()




























deleteRow()




























insertCell()




























deleteCell()




























Tabelle 20.3: Methoden für table- und tr-Objekte

Die Eigenschaften des td-Objekts finden Sie in der folgenden Tabelle. Funktional entsprechen sie den HTML-Attributen. cellIndex ist die Nummer der Zelle in der Reihe. NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3

colspan




























rowspan




























cellIndex




























 KOMPENDIUM 

JavaScript

Tabelle 20.4: Eigenschaften für das td-Objekt

613

Kapitel 20 Tabelle 20.4: Eigenschaften für das td-Objekt (Forts.)

DHTML

NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3

width




























height




























noWrap




























Der Internet Explorer liefert für Tabellen ein weiteres Konzept namens Data Binding. Es handelt sich hierbei um Controls, die Daten aus einer Datenquelle in eine Website einbinden. Das Problem des Data Bindings gegenüber serverseitigen Lösungen mit ASP.NET oder PHP ist nicht nur, dass es lediglich im Internet Explorer funktioniert, sondern auch, dass die rein clientseitige Lösung nicht aktualisiert werden kann, da die Rückkopplung zum Server fehlt. Daher wird hier auf eine detaillierte Darstellung verzichtet.10

Kleine Fallen Die wichtigsten Browserunterschiede – insbesondere der unterschiedliche Zugriff, der aus den verschiedenen DOMs resultiert –, kennen Sie nun. Es bleiben kleine »Nickligkeiten«, die immer wieder in verschiedenen Browsern, Browserversionen oder Plattformen entstehen. Beispiele hierzu sind Probleme beim Ermitteln der Mauskoordinaten oder der Werte für visibility im Netscape Navigator 4.x (siehe Kapitel 20.3 im Abschnitt »Sichtbare und unsichtbare Elemente«). Sie werden in diesem Kapitel einigen Fallen begegnen, die jedoch sicherlich nicht das gesamte Spektrum abdecken. Daher besteht bei DHTML mehr als bei anderen JavaScript-Anwendungen der Hauptteil der Arbeit im Testen.

20.2

Maus

Die Maus als zweites wichtiges Steuerelement des Computers neben der Tastatur bietet einige interessante Möglichkeiten für DHTML. Sie können den Mauszeiger ändern oder auch Elemente per Drag&Drop verschieben.

Mauszeiger Für den Mauszeiger gibt es einen eigenen Stil-Befehl namens cursor, der dessen Änderung ermöglicht. Dieser Stil-Befehl ist ebenfalls eine Eigenschaft des style-Objekts und kann daher mit JavaScript geändert werden. 10 Weiterführende Informationen finden Sie unter http://msdn.microsoft.com/workshop/author/ databind/data_binding.asp.

614

 KOMPENDIUM 

JavaScript

Maus

Kapitel 20

NS4.x NS6


NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3

























Tabelle 20.5: cursor-Eigenschaft

Das folgende Beispiel ändert den Mauszeiger in eine Hand (Wert hand), wenn der Nutzer über eine Schaltfläche () fährt. Dies ist recht praktisch, da sich der Mauszeiger nicht ändert, wenn das -Element beispielsweise ein onclick-Ereignis besitzt. Verlässt der Nutzer den Button, wird der Mauszeiger auf default, also den Standardwert, zurückgesetzt. Abbildung 20.6: Der Mauszeiger ändert sich, wenn der Nutzer über den Button fährt.

<script language="JavaScript">
Listing 20.5: Den Mauszeiger ändern (mouse_cursor. html)

//-->
 KOMPENDIUM 

JavaScript

615

Kapitel 20

DHTML onmouseout="zeiger_aus(this)">Mauszeiger ändern



Die cursor-Eigenschaft erlaubt auch weitere Mauszeiger. Die folgende Tabelle listet die wichtigsten auf: Tabelle 20.6: Mögliche Mauszeiger der cursorEigenschaft

Zeiger

Beschreibung

pointer hand

pointer steht für den Mauszeiger, der erscheint, wenn der Nutzer über einen Link fährt. Meist ist dies eine zeigende Hand. hand aktiviert denselben Mauszeiger, funktioniert allerdings nicht mit Netscape Navigator 6 und 7 und Mozilla.

auto

Automatische Wahl des Mauszeigers

default

Standardcursor; meist der Pfeil

help

Cursor für die Hilfe; häufig Pfeil mit Fragezeichen

move

Mauszeiger für Bewegung

text

Textcursor zur Texteingabe

wait

Zeiger für Wartephasen; meist die omnipräsente Sanduhr

url("Datei")

Zeiger besteht aus einer GIF- oder JPEG-Datei. Dies ist in aktuellen Browsern nicht implementiert.a

n-resize ne-resize e-resize

Mauszeiger in Form von Richtungspfeilen. Die Buchstabenkombinationen geben jeweils die Richtungen mittels Himmelsrichtungen (Nord = n, Ost = e, Süd = s, West = w) an.

a.

Eine Testdatei für neuere Browser finden Sie unter mouse_cursor_bild.html auf der CDROM im Verzeichnis code\kap20.

Der Usability ist es wenig zuträglich, dem Nutzer eine Sanduhr, den typischen Mauszeiger für das Warten, anzuzeigen, wenn es nichts zu warten gibt. Daher sollten Sie auf unsinnige Mauszeiger zum falschen Zeitpunkt verzichten.

Auf den Spuren der Maus Kennen Sie den Effekt, wenn irgendein Objekt dem Mauszeiger folgt oder vor der Maus zurückweicht? Diesen Effekt gibt es in Flash, allerdings ist er durchaus auch mit DHTML möglich. Das Grundprinzip ist dabei ganz einfach: Sie müssen die Mauskoordinaten feststellen und das Objekt anschließend entsprechend positionieren. Wie sich später noch zeigen wird, liegt die Tücke im Detail.

616

 KOMPENDIUM 

JavaScript

Maus

Kapitel 20

Das folgende Beispiel zielt darauf ab, dass ein Objekt direkt über dem Mauszeiger liegt und sich immer mitbewegt. Das Skript besteht aus drei Teilen: einer Funktion, die beim Laden der Seite ausgeführt wird und die für die Ereignisbehandlung zuständig ist, einer Funktion, die die Koordinaten der Maus herausfindet, und einer Funktion, die das Bild – eingeschlossen in einen

-Block11 – an die Mauskoordinaten bewegt. Ereignisbehandlung Die Ereignisbehandlung startet mit einer Fallunterscheidung, ob window.Event im Browser vorhanden ist. function start() { if (window.Event) {

Innerhalb der ersten Fallunterscheidung folgt eine zweite, die den Konqueror und sein neues Gegenstück für Mac OS X, den Safari von Apple, aussortiert. Diese beiden Browser kommen nicht mit document.captureEvents() zurecht, sondern benötigen immer window.captureEvents().12 if(navigator.userAgent.indexOf(»Konqueror«) == -1 && navigator.userAgent.indexOf(»Safari«) == -1 ) { document.captureEvents(Event.MOUSEMOVE); } else { window.captureEvents(Event.MOUSEMOVE); } } document.onmousemove = koo; }

Mauskoordinaten Die zwei Variablen für die Mauskoordinaten wurden bereits vor dem Funktionsblock definiert: var x_koo; var y_koo;

Die Funktion koo() enthält die Zuweisung der Mauskoordinaten zu diesen Variablen für die verschiedenen Browser. Dazu wird an die Funktion als Parameter e das aktuelle Ereignis übergeben. 11 Dies ist für Netscape 4.x notwendig, da er nur Layer positionieren kann (siehe Kapitel 20.1, Abschnitt »Netscape 4.x und Layer«). 12 Nähere Informationen zu Ereignissen erhalten Sie in 11 »Ereignisse und Event-Handler«.

 KOMPENDIUM 

JavaScript

617

Kapitel 20

DHTML Für Netscape 4.x werden die Mauskoordinaten mit pageX und pageY ausgelesen: if(document.layers) { x_koo = e.pageX; y_koo = e.pageY; }

Der Internet Explorer verwendet den direkten Zugriff über event und zum Zugriff auf die Koordinaten clientX und clientY. else if (document.all) { x_koo = event.clientX; y_koo = event.clientY; }

Für die übrigen Browser erfolgt der Zugriff über e.clientX und e.clientY. else if (document.getElementById) { x_koo = e.clientX; y_koo = e.clientY; }

Abschließend wird die Funktion zum Positionieren aufgerufen und die Koordinaten als Parameter übergeben: bew(x_koo, y_koo);

Positionieren Die Funktion bew(x_koo, y_koo) weist – für die verschiedenen Browser einzeln – die Koordinaten zu und zieht davon jeweils 30 Pixel ab, damit sich der Ball in der Mitte unter dem Mauszeiger befindet. Der Unterschied zwischen den einzelnen Browser besteht im Zugriff auf den

-Block13: if (document.layers) { document.zeiger.left = x_koo - 30; document.zeiger.top = y_koo - 30; } else if (document.all) { document.all.zeiger.style.posLeft = x_koo - 30; document.all.zeiger.style.posTop = y_koo - 30; } else if (document.getElementById) { document.getElementById("zeiger").style.left = x_koo - 30; document.getElementById("zeiger").style.top = y_koo - 30; }

13 Der

-Block muss vorher absolut positioniert werden.

618

 KOMPENDIUM 

JavaScript

Maus

Kapitel 20

Komplett Nachfolgend sehen Sie den vollständigen Code. Die Funktionsaufrufe und Funktionsnamen14 sind hervorgehoben. <script language="JavaScript">

Listing 20.6: Ein Bild folgt dem Mauszeiger (mauszeiger.html)

14 Für die start()-Funktion hat sich in vielen Skripten auch der Name init() eingebürgert. Dieser Name ist allerdings keine Pflicht.

 KOMPENDIUM 

JavaScript

619

Kapitel 20

DHTML

Abbildung 20.7: Das Bild folgt dem Mauszeiger.

Verwenden Sie als Bild einfach einmal eine GIF-Animation, am besten mit transparenten Bereichen. Dies erzeugt weitere interessante Effekte. Das Skript selbst können Sie verfeinern, indem Sie den Ball beispielsweise von den Wänden zurückprallen oder ihn um den Mauszeiger kreisen lassen. Das Skript wird dann jedoch schnell sehr komplex.

Drag&Drop Die Königin der Maus-DHTML-Anwendungen ist das Drag&Drop (Ziehen und Loslassen) von Elementen auf der Website15. Es ist beispielsweise die Grundlage von JavaScript-Spielen.

15 Mit JavaScript ist Drag&Drop über Anwendungen hinweg natürlich nicht zu realisieren, da eine Systemprogrammierung erforderlich wäre.

620

 KOMPENDIUM 

JavaScript

Maus

Kapitel 20

Drag&Drop-Skripten lassen sich auf viele verschiedene Arten erstellen. Der Kern des Ganzen ist aber immer gleich und besteht aus drei Ereignissen: onmousedown – wenn der Nutzer auf das Element klickt. Der Vorgang geht bis zum Drückpunkt direkt vor dem Loslassen der Maustaste. onmousemove – dient dazu, die Bewegung des Elements abzufangen. Dieses Ereignis soll nur dann genutzt werden, wenn das Element zuvor mit der Maus angeklickt wurde (onmousedown). onmouseup – soll das Drag&Drop beenden.

Das Bild für dieses Beispiel finden Sie unter bild.gif auf der CD-ROM im Ordner code\kap20. Ereignisbehandlung Den Anfang macht onmousedown. Dieses Ereignis soll abgefangen werden. Daher wird beim onload-Ereignis im -Tag die Funktion start() aufgerufen. Für den Netscape Navigator 4.x und die W3C-konformen Browser wird das Ereignis für den Layer direkt mit captureEvents() abgefangen. Der Internet Explorer benötigt dies nicht. function start() { if (document.captureEvents) { document.captureEvents(Event.MOUSEDOWN);

}

Wenn Sie mit window.Event zu Beginn testen, ob der Browser die Ereignisbehandlung mit captureEvents() unterstützt, hätten Konqueror und Safari ein Problem mit dem Skript, da sie beide nicht document.captureEvents(), sondern window.captureEvents()16 verwenden. Da der captureEvents()-Aufruf in diesem Beispiel für die beiden Browser nicht erforderlich ist, ist keine weitere Fallunterscheidung nach Browserversionen notwendig. Sollten Sie eine Fallunterscheidung benötigen, verwenden Sie if (navigator.userAgent.indexOf("Konqueror") != -1 && navigator.userAgent.indexOf("Safari") != -1 )

oder testen Sie alternativ auf das Browserobjekt: if (window.captureEvents)

16 Dies gilt auch für document.releaseEvents() bzw. im Konqueror/Safari window.releaseEvents().

 KOMPENDIUM 

JavaScript

621

Kapitel 20

DHTML Als Nächstes erfolgt der Ereignisaufruf für das jeweilige Element: if (document.layers) { document.ele1.onmousedown = druecken;

} else if (document.all) { document.all.ele1.onmousedown = druecken;

} else if (document.getElementById) { document.getElementById("ele1").onmousedown = druecken;

} }

Der Ereignisaufruf über das Element startet das Ereignis nur, wenn der Nutzer es anklickt. Leider ist ein Bild immer rechteckig. Bei einem transparenten GIF – wie in diesem Fall – führt also auch ein Anklicken der Ecken zum Drag&Drop. Dies ist insbesondere bei mehreren überlappenden Objekten unangenehm. Um es zu verhindern, müssten Sie mittels einer mathematischen Formel den Kreis festlegen, um nur beim Klick auf Pixel im Kreis das Objekt zu ziehen. Alternativ können Sie den Kreis mit vielen kleinen Rechtecken approximieren. Dadurch wird der Code jedoch ausgesprochen komplex. Drücken Die Funktion »Drücken« trifft zuerst ein paar Vorbereitungen: In die globalen Variablen x_koo und y_koo wird die Differenz zwischen der Mausposition und der linken oberen Ecke des Elements gespeichert. Damit wird festgestellt, welche Stelle des Elements der Nutzer genau anklickt: function druecken(e) { if (document.layers) { document.ele1.offX = e.pageX - document.ele1.pageX; document.ele1.offY = e.pageY - document.ele1.pageY; } else if (document.all) { x_koo = event.clientX - document.all.ele1.style.pixelLeft; y_koo = event.clientY - document.all.ele1.style.pixelTop; } else if (document.getElementById) { x_koo = e.clientX - parseInt(document.getElementById("ele1").style.left); y_koo = e.clientY - parseInt(document.getElementById("ele1").style.top); }

Nun folgen die nächsten Schritte bei den Ereignissen. Für onmousemove und onmouseup ruft das Skript jeweils eine Funktion auf: if (document.captureEvents) document.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); document.onmousemove = ziehen;

622

 KOMPENDIUM 

JavaScript

Maus

Kapitel 20

document.onmouseup = aufheben; return false; }

Ziehen Das Ziehen besteht darin, das Element immer neu zu positionieren. Dies erfolgt für die verschiedenen Browser unterschiedlich: function ziehen(e) { if (document.layers) { document.ele1.pageX = e.pageX - document.ele1.offX; document.ele1.pageY = e.pageY - document.ele1.offY; } else if (document.all) { document.all.ele1.style.pixelLeft = event.clientX - x_koo; document.all.ele1.style.pixelTop = event.clientY - y_koo; } else if (document.getElementById) { document.getElementById("ele1").style.left = parseInt(e.clientX) - x_koo; document.getElementById("ele1").style.top = parseInt(e.clientY) - y_koo; } return false; }

Der Opera vor Version 7 verhält sich im Allgemeinen wie der Internet Explorer, unterstützt jedoch kein posLeft, daher verwendet das Beispiel pixelLeft. Die folgende Tabelle gibt Aufschluss über die Gewinnung von Mauszeigerkoordinaten und die Angabe von Positionierungen in den verschiedenen Browsern. Wirkung

Netscape 4.x

IE 4+

W3C-kompatible

Opera 5, 6

Maus- Ereignis.pageX event.clientX cursor Ereignis.pageY event.clientYa

Ereignis.clientX

event.clientX

Ereignis.clientX

event.clientY

Element

left

style.posLeft

style.left

style.pixelLeft

top

style.posTop

style.top

style.pixelTop

Tabelle 20.7: Unterschiede bei den Positionsangaben für Mauszeiger und

Elemente

style.pixelLeft style.pixelTop a.

Die Langform heißt window.event.clientX.

 KOMPENDIUM 

JavaScript

623

Kapitel 20

DHTML Aufheben Die Funktion zum Aufheben bei onmouseup ist recht einfach und hebt das Ereignis beim Bewegen der Maus wieder auf: function aufheben() { if (document.releaseEvents) document.releaseEvents(Event.MOUSEMOVE); document.onmousemove = null; return false; }

Komplett Das Beispiel ist nun fertig gestellt und funktioniert in den gängigen Browsern ab Netscape Navigator 4.x, Mozilla, Internet Explorer 4 sowie in den »Exoten« Opera, Konqueror und Safari. Im Folgenden sehen Sie den kompletten Code. Die Funktionsaufrufe sind fett hervorgehoben, um die Zusammenhänge zu verdeutlichen: Listing 20.7: Drag&Drop für alle Browser (dragdrop.html)

<script language="JavaScript">
624

 KOMPENDIUM 

JavaScript

Maus

Kapitel 20

x_koo = event.clientX - document.all.ele1.style.pixelLeft; y_koo = event.clientY - document.all.ele1.style.pixelTop; } else if (document.getElementById) { x_koo = e.clientX parseInt(document.getElementById("ele1").style.left); y_koo = e.clientY parseInt(document.getElementById("ele1").style.top); } if (document.captureEvents) document.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); document.onmousemove = ziehen; document.onmouseup = aufheben; return false; } function ziehen(e) { if (document.layers) { document.ele1.pageX = e.pageX - document.ele1.offX; document.ele1.pageY = e.pageY - document.ele1.offY; } else if (document.all) { document.all.ele1.style.pixelLeft = event.clientX - x_koo; document.all.ele1.style.pixelTop = event.clientY - y_koo; } else if (document.getElementById) { document.getElementById("ele1").style.left = parseInt(e.clientX) x_koo; document.getElementById("ele1").style.top = parseInt(e.clientY) y_koo; } return false; } function aufheben() { if (document.releaseEvents) document.releaseEvents(Event.MOUSEMOVE); document.onmousemove = null; return false; } //-->

 KOMPENDIUM 

JavaScript

625

Kapitel 20

DHTML

Abbildung 20.8: Anklicken …

Abbildung 20.9: … ziehen …

626

 KOMPENDIUM 

JavaScript

Maus

Kapitel 20 Abbildung 20.10: … und loslassen

Auch bei diesem Beispiel sind einige Erweiterungen möglich und teilweise auch sinnvoll. Zunächst sollten Sie Browser abfangen, die kein JavaScript unterstützen. Des Weiteren können Sie das Beispiel in größere Anwendungen wie Spiele integrieren und das Beispiel um mehrere – beispielsweise in einem Array gespeicherte – Elemente erweitern. Eine weitere Idee ist, den Mauszeiger zu einem Bewegen-Mauszeiger zu ändern (siehe Abschnitt »Mauszeiger«.

Mehr Drag&Drop Neben dem mit DHTML realisierten Drag&Drop erlauben einige Browser auch ein Drag&Drop von beispielsweise ausgewähltem Text in andere Anwendungen oder in Textfelder auf derselben Seite. Aus der Sicht des JavaScript-Programmierers gibt es hier im Internet Explorer ab Version 5 proprietäre Möglichkeiten: Einige Ereignisse wie onDrag, onDragStart und onDragOver, die verschiedene Stadien des Drag&Drop-Vorgangs umfassen. In der Praxis werden sie bisher aufgrund des proprietären Charakters und den beschränkten Einsatzmöglichkeiten kaum verwendet. Das Objekt dataTransfer. Ein solches Objekt tritt auf, wenn ein Element gezogen wird; es korreliert also mit den Ereignissen und kann bei ihnen einfach aufgerufen werden. Dieses Objekt ermöglicht Ihnen, über die Eigenschaft dropEffect zu steuern, wie der Cursor aussehen soll. Die

 KOMPENDIUM 

JavaScript

627

Kapitel 20

DHTML Eigenschaft effectAllowed legt fest, was mit den übermittelten Daten geschehen darf. Einige Methoden erlauben den Zugriff auf die Daten des Objekts. Da die Technologie auf den Internet Explorer ab Version 5 beschränkt ist, wird Sie hier nicht ausführlicher dargestellt. Informationen erhalten Sie unter http://msdn.microsoft.com/workshop/author/datatransfer/overview.asp.

20.3

Navigation

Die Navigation steht für den Webdesigner und den Webprogrammierer im Vordergrund. Sie muss gut aussehen, einfach anzuwenden sein – Stichwort »Usability« – und dem Nutzer alle Informationen zur Verfügung stellen. DHTML hilft hier nicht nur mit interessanten optischen Effekten, sondern kann die Navigation auch anders aufteilen.

Sichtbare und unsichtbare Elemente Die Grundlage aller Navigationselemente ist das Sichtbar- und Unsichtbarmachen von Elementen. Als Elemente sollten – bei Browserübergreifender Programmierung – nur die

-Blöcke verwendet werden, da der Netscape Navigator 4.x sie als Layer erkennt und den Zugriff darauf zulässt.17 Das folgende Beispiel ist eine kleine und sehr einfach gestaltete Werbeseite für dieses Buch18. Für jeden Buchteil gibt es einen Hilfetext, der eingeblendet wird, wenn der Nutzer mit der Maus über den Link fährt. Das Beispiel besteht aus drei Funktionen: Die Funktion check(kasten) übernimmt aus den onmouseover-Ereignissen als Parameter die Nummer des Elements, das überfahren wird. Auf diese Weise können Sie die Funktion für viele Hilfstexte flexibel verwenden. Anschließend realisiert die Funktion den Zugriff auf das jeweilige Objekt. Abschließend wird über eine Testvariable (test) festgestellt, ob ein Hilfetext aktuell eingefügt wurde. Dementsprechend wird die Funktion einblenden() oder ausblenden() aufgerufen und die Referenz auf das aktuelle Element übergeben.

17 siehe Kapitel 20.1 im Abschnitt »Netscape 4.x und Layer« 18 Da Sie dieses Buch bereits gekauft haben, ist dies noch nicht einmal Schleichwerbung
.

628

 KOMPENDIUM 

JavaScript

Navigation

Kapitel 20

Besondere Schwierigkeiten bereitet das dynamische Zusammensetzen des Namens div mit der Nummer des

-Elements. In anderen Browsern kann eine Variable mit der ID eingefügt werden, nur im Netscape Navigator 4.x muss die ID direkt angegeben werden. Dies erfordert eine aufwändigere Fallunterscheidung: else if (document.layers) { if (kasten == "div1") z = document.div1; else if (kasten == "div2") z = document.div2; else if (kasten == "div3") z = document.div3; }

Die Funktion einblenden(obj) übernimmt über den Parameter die Objektreferenz auf den

-Block mit dem Hilfetext und blendet ihn mit visibility ein. Die Funktion ausblenden(obj) blendet die Sichtbarkeit wieder aus. Hier der vollständige Code: <style type="text/css"> body, td {font-family: Arial,sans-serif} a:link {color: orange} div.kasten {background-color: orange; visibility: hidden; border-width: 2pt; border-style: solid; padding: 5px; border-color: black} <script language="JavaScript">

JavaScript-Kompendium

Dieses Buch behandelt alle wichtigen Aspekte von JavaScript und hilft, dynamische Anwendungen für das Web zu realisieren.

Die Teile des Buchs:
Teil I	JavaScript
Teil II	Webanwendungen
Teil III	Über den Tellerrand

Die Grundlagen und fortgeschrittene
Programmierung mit JavaScript.

630

 KOMPENDIUM 

JavaScript

Navigation

Kapitel 20

JavaScript-Anwendungen
von und für die Praxis.

Ein Blick über den Tellerrand.

Abbildung 20.11: Der Hilfetext im orangefarbenen Kasten

Browserschwierigkeiten Das Sichtbar- und Unsichtbarmachen von Elementen hat einige Haken. Das erste Problem – das fehlende style-Objekt im Netscape Navigator 4.x – lösen Sie am besten, indem Sie das Objekt direkt in den Zugriff integrieren, wie dies auch in den bisherigen Beispielen erfolgte (siehe Listing 20.8). Ein weiteres Problem entsteht, wenn Sie testen möchten, ob ein Element bereits sichtbar ist. Alle Browser liefern visible für sichtbar und hidden für unsichtbar zurück. Alle Browser? Der Netscape Navigator tanzt wieder aus der Reihe. Hier steht show für sichtbar und hide für unsichtbar. Eine Überprüfung für alle Browser muss also beide Browser überprüfen: if (absatz.visibility == "visible" || absatz.visibility == "show")

 KOMPENDIUM 

JavaScript

631

Kapitel 20

DHTML Sie finden ein Beispielskript mit dem Namen dhtml.html im Ordner code\kap20 auf der CD-ROM.

zIndex Wenn sich mehrere positionierte Elemente überlappen, entscheidet die Reihenfolge im HTML-Code darüber, welches Element höher liegt. Wollen Sie dagegen die Position selbst festlegen, können Sie in CSS den z-index als ganze Zahl angeben. Das Element mit dem größeren z-index befindet sich oben. Zum z-index bietet JavaScript eine eigene Eigenschaft, die in der JavaScriptSyntax zIndex geschrieben wird.19 Sie ist in den DHTML-fähigen Browsern vorhanden. Tabelle 20.8: zIndex

NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3































Das folgende Beispiel verwendet zIndex, um beim Anklicken des Buttons die Überlagerung der beiden Bilder zu ändern. Die Prüfung und Änderung des zIndex ist fett hervorgehoben. Der Zugriff auf die Bilder, die in

-Blöcke eingebaut sind, erfolgt wie gewöhnlich. Listing 20.9: Den zIndex dynamisch verändern (zindex.html)

<script language="JavaScript">
632

 KOMPENDIUM 

JavaScript

Navigation

Kapitel 20

} else { bild1.zIndex = 1; bild2.zIndex = 2; }

} //-->

Abbildung 20.12: Zuerst ist das eine (links) und dann das andere Buch im Vordergrund (rechts).

Die Positionierung von Formularelementen ist im Netscape Navigator 4.x und in älteren Versionen des Opera noch nicht möglich.

 KOMPENDIUM 

JavaScript

633

Kapitel 20

DHTML

Elemente permanent sichtbar machen Eine häufige Aufgabe, sowohl in der Navigation als auch in der Werbung besteht darin, dass ein Element der Seite erhalten bleiben soll, auch wenn der Nutzer in der Seite nach unten oder zur Seite scrollt. Die Positionierung mit CSS hat für dieses Problem eine Lösung: Sie können Elemente mit fixed positionieren, sodass sie auch beim Scrollen in ihrer Position relativ zum Browserfenster bleiben.

Das Problem bei dieser Lösung ist, dass weder Netscape Navigator 4.x noch Internet Explorer (in allen Versionen unter Windows20) fixed unterstützen. Tabelle 20.9:

NS4.x NS6

fixed


a.

NS7


IE4 IE5 (
)a

IE5.5 IE6

O7

M1

K3










beim Mac

JavaScript bietet hier einen Ausweg. Sie müssen lediglich feststellen, wie weit die Seite gescrollt wurde und dann die Position des Elementes anpassen. Damit die Überprüfung permanent erfolgt, ruft sich die zugehörige Funktion permanent() mit setTimeout() immer wieder selbst auf. Zunächst wird beim Laden der Seite die Funktion start() aufgerufen. In dieser Funktion wird zuerst die Position des Elements ausgelesen, das permanent angezeigt werden soll. Das Skript führt dabei eine einfache Browserunterscheidung mit Browserobjekten durch. function start() { if (document.layers) { x_pos = document.bild1.left; y_pos = document.bild1.top; } else if (document.all) { x_pos = document.all.bild1.style.pixelLeft; y_pos = document.all.bild1.style.pixelTop; } else if (document.getElementById) { document.getElementById("bild1").style.position = "fixed"; return; } permanent(); }

20 Beim Mac wird fixed unterstützt.

634

 KOMPENDIUM 

JavaScript

Navigation

Kapitel 20

Für Browser, die document.getElementById() unterstützen, wird die Positionierung direkt auf fixed gesetzt. Dieser Weg ist natürlich eine Abkürzung. Sie könnten auch für diese Browser die Position mit JavaScript setzen. Allerdings wird die fixierte Positionierung mit CSS im Browser wesentlich sanfter gerendert und sieht daher einfach flüssiger aus, wenn der Nutzer scrollt. Da auch der Internet Explorer document.getElementById() unterstützt, fixed jedoch nicht, müssen Sie die Überprüfung von document.all unbedingt vor der auf document.getElementById() durchführen. Nachdem die normale Position des Elements festgestellt wurde, dient die Funktion permanent() dazu, die Scroll-Position festzustellen: function permanent() { if(document.layers) { var x_scroll = window.pageXOffset; var y_scroll = window.pageYOffset; } else if (document.all) { var x_scroll = document.body.scrollLeft; var y_scroll = document.body.scrollTop; }

Das Feststellen der Scroll-Position ist – wie in diesem Code-Fragment zu sehen – von Browser zu Browser unterschiedlich. Die folgende Tabelle gibt eine Übersicht darüber, wie welcher Browser auf die Scroll-Position zugreift.21 Netscape 4.x

IE 4+ Opera 7Konqueror/Safari

Navigator 6+, Mozilla

window.pageXOffset

body.scrollLeft

window.scrollX

window.pageYOffset

a

window.scrollY

a.

body.scrollTop

Tabelle 20.10: Scroll-Position in verschiedenen Browsern feststellen

Für die Scroll-Position in einem Frame oder einem anderen Objekt referenzieren Sie einfach auf dieses Objekt. Ab Internet Explorer 5 liefert diese Eigenschaft für nahezu jedes Objekt einen Wert.

Im zweiten Schritt ruft das Skript die Funktion setzen() auf, die das Element anhand der Scroll-Position neu setzen soll. Anschließend wird die Funktion permanent() mit setTimeout() wieder aufgerufen, um die Scroll-Position zu aktualisieren.

21 Der Zugriff für Opera/Konqueror/Safari und Navigator/Mozilla wird in diesem Beispiel nicht benötigt, da in der Funktion start() für diese Browser die Positionierungsmethode auf fixed geändert wurde.

 KOMPENDIUM 

JavaScript

635

Kapitel 20

DHTML setzen(x_scroll, y_scroll); setTimeout("permanent()", 50); }

Die Funktion setzen() verwendet die Scroll-Position und die Ausgangsposition des Elements und errechnet daraus die neue Position: function setzen(x_scroll, y_scroll) { if (document.layers) { document.bild1.left = parseInt(x_pos) + parseInt(x_scroll); document.bild1.top = parseInt(y_pos) + parseInt(y_scroll); } else if (document.all) { document.all.bild1.style.pixelLeft = x_pos + x_scroll; document.all.bild1.style.pixelTop = y_pos + y_scroll; } }

Nachfolgend sehen Sie den vollständigen Code. Funktionsaufrufe und Namen sind fett hervorgehoben: Listing 20.10: Scrollen mit JavaScript verhindern (logo_permanent_js .html)

<script language="JavaScript">
} permanent();

} function permanent() { if(document.layers) { var x_scroll = window.pageXOffset; var y_scroll = window.pageYOffset; } else if (document.all) { var x_scroll = document.body.scrollLeft; var y_scroll = document.body.scrollTop; } setzen(x_scroll, y_scroll); setTimeout("permanent()", 50);

636

 KOMPENDIUM 

JavaScript

Navigation

Kapitel 20

} function setzen(x_scroll, y_scroll) { if (document.layers) { document.bild1.left = parseInt(x_pos) + parseInt(x_scroll); document.bild1.top = parseInt(y_pos) + parseInt(y_scroll); } else if (document.all) { document.all.bild1.style.pixelLeft = x_pos + x_scroll; document.all.bild1.style.pixelTop = y_pos + y_scroll; } } //-->

Abbildung 20.13: Nun scrollt das Logo auch im Internet Explorer mit.

Die Geschwindigkeit, mit der setTimeout() die Funktion wieder aufruft, entscheidet, wie schnell gescrollt wird. Zum Testen sollten Sie diese hochsetzen, später können Sie dann die richtige Geschwindigkeit wählen. Scrollen Das Feststellen der Scroll-Position ist nicht die einzige dynamische Möglichkeit beim Scrollen. Es gibt auch drei Methoden, die ein dynamisches Setzen der Scroll-Position per JavaScript erlauben:

 KOMPENDIUM 

JavaScript

637

Kapitel 20

DHTML window.scroll(x, y) – scrollt das Dokument absolut von der linken oberen Ecke nach links (x) und unten (y). Folgende Zeile setzt also die

Scroll-Position wieder zurück: window.scroll(0, 0); window.scrollBy(dx, dy) – scrollt das Dokument relativ zur aktuellen Position nach links (dx) und unten (dy). Die folgende Zeile scrollt 20

Pixel nach rechts und 40 Pixel nach oben: window.scrollBy(20, -40); window.scrollTo(x, y) – scrollt das Dokument absolut. Ersetzt die Methode window.scroll() ab den Browsern der vierten Generation. Die folgende Zeile scrollt horizontal auf die Anfangsposition und vertikal auf 100 Pixel: window.scrollTo(0, 100); scroll() existiert als einzige der drei Funktionen bereits im Netscape 3, die anderen beiden Funktionen sind erst ab der vierten Generation enthalten. Tabelle 20.11: Methoden zum Scrollen

NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3

scroll()































scrollBy()































scrollTo()































20.4

Animation

Eine der spannendsten Anwendungen von DHTML ist die Animation von Elementen. Vielleicht haben Sie schon einmal ein Werbebanner gesehen, das über die Webseite fliegt. Das war vermutlich DHTML. In diesem Abschnitt finden Sie ein umfangreicheres Beispiel mit einer zufallsgesteuerten Animation. Darüber hinaus werden die einzelnen Objekte dynamisch erstellt. Das Beispiel soll fallenden Schnee auf einer Webseite darstellen. Ein solcher Effekt ist normalerweise eine Domäne von Flash, aber auch DHTML kann das. Das Prinzip ist recht einfach: Das Skript gibt dynamisch

-Blöcke mit ebenfalls dynamisch vergebenen IDs und per Zufall gewählter Position aus, die ein Bild mit einer Schneeflocke enthalten.

638

 KOMPENDIUM 

JavaScript

Animation

Kapitel 20

Auf der CD-ROM finden Sie das Bild mit dem Namen flocke.gif im Ordner code\kap20. Wenn Sie andere Farben bevorzugen, finden Sie dort auch die original Photoshop-Datei flocke.psd. Nachdem die Schneeflocken über das gesamte Fenster zufallsgesteuert verteilt sind, wird eine Funktion, die die Flocken bewegen soll, mit setInterval() in regelmäßigen Abständen aufgerufen. Die Funktion zum Bewegen der Flocken erhöht bei jedem Aufruf die y-Koordinate um 5 Pixel, damit die Flocken nach unten fallen. Abbildung 20.14: Schneetreiben im Browser

Vorbereitungen Die Vorbereitungen bestehen – wie meistens – aus Variablendeklarationen.22 Die Variable name soll später die IDs der einzelnen Schneeflocken

-Blöcke aufnehmen. Die Variable ele enthält die Ausgabe und wird bereits als leere String-Variable vordefiniert.

22 Wenn Sie ein eigenes Skript programmieren, benötigen Sie häufig währenddessen zusätzliche globale Variablen. Deklarieren Sie diese dann einfach am Anfang und verwenden Sie sie später. So schaffen Sie auch während des kreativen Prozesses Ordnung im Skript. Denn um ehrlich zu sein, wenn sie einmal laufen, ändert ein Programmierer seine Skripten eher nicht mehr ab.

 KOMPENDIUM 

JavaScript

639

Kapitel 20

DHTML Die beiden Variablen f_hoehe und f_breite enthalten die Höhe und Breite des Browserfensters, wobei eine Fallunterscheidung feststellt, wie die Maße bei verschiedenen Browsern gemessen werden. Von der resultierenden Höhe zieht das Skript noch einmal 30 Pixel ab, da die Schneeflocke selbst ebenfalls eine Höhe hat. var name; var ele = ""; if (window.innerHeight) { var f_hoehe = window.innerHeight - 30; var f_breite = window.innerWidth - 30; } else if (document.body.clientHeight) { var f_hoehe = document.body.clientHeight - 30; var f_breite = document.body.clientWidth - 30; }

Die Messung der Höhe des Browserfensterinhalts ist in den verschiedenen Browsern unterschiedlich: Netscape 4.x, 6 und 7, Mozilla, Konqueror/Safari und Opera verwenden window.innerHeight und window.innerWidth. Der Internet Explorer verwendet stattdessen document.body.clientHeight und document.body.clientWidth. Sollten die Schneeflocken über die Höhe des Browserfensters hinauslaufen, werden in unschöner Abfolge immer wieder die Scroll-Balken eingeblendet. Ein ausreichender Spielraum ist also notwendig.

Dynamische Ausgabe Die dynamische Ausgabe besteht aus einer Schleife, die mittels der Zählervariablen i von 0 bis 20 läuft. i dient dazu, die flexible ID des

-Blocks festzulegen. Die Position der 20 auf diese Weise generierten

-Blöcke wird mittels einer Zufallszahl und der Höhe des Browserfensters bestimmt.23 for (var i = 0; i<20; i++) { name = "c"+i; ele += "\

<\/div>"; } 23 siehe Kapitel 6.2 unter »Math« im Abschnitt »Beliebige Zufallszahlen«

640

 KOMPENDIUM 

JavaScript

Animation

Kapitel 20

Das Ergebnis der Schleife wird abschließend mit document.write() in das Dokument geschrieben: document.write(ele);

Für die dynamische Ausgabe kommen natürlich noch viele andere Techniken in Frage, beispielsweise innerHTML24 oder die Generierung neuer Knoten mit dem W3C-DOM25. document.write() hat jedoch den unbestreitbaren Vorteil der besten Abwärtskompatibilität und wurde daher hier bevorzugt.

Funktionsaufruf Bisher wurden nur 20 Schneeflocken zufällig über den Bildschirm verteilt. Um sie alle zu bewegen, muss für jede Schneeflocke die Animationsfunktion schneien() in regelmäßigen Abständen aufgerufen werden. Die 20 Schneeflocken durchlaufen Sie mit einer for-Schleife. Für das regelmäßige Aufrufen ist setInterval() zuständig. for (var i = 0; i<20; i++) { setInterval("schneien("+i+")", 50); }

Wenn Sie die Aufruffrequenz erhöhen oder senken, verlangsamt bzw. beschleunigt sich der Fall der Schneeflocken. Der wiederholte Aufruf der Funktion schneien() für die 30 Schneeflocken ist durchaus ressourcenintensiv. Insbesondere bei Browsern mit einer langsameren JavaScript-Engine wie dem Konqueror kann sich dies bemerkbar machen. Wenn Sie die Zahl der Schneeflocken erhöhen, verbraucht dies natürlich deutlich mehr Ressourcen.

Animation Die eigentliche Animation erfolgt in der Funktion schneien(). Sie wird für jede Schneeflocke (i=0 bis i=19) in regelmäßigen Abständen aufgerufen und setzt die Schneeflocke jeweils um 5 Pixel nach unten, bis sie den unteren Rand des Bildschirms erreicht hat. Um dies zu realisieren, verwendet das Skript eine Fallunterscheidung, die überprüft, ob die Position des Elements bereits der Fensterhöhe entspricht. Von der Fensterhöhe werden zusätzlich 5 Pixel als Karenz abgezogen. Ist dies nicht der Fall, werden zur aktuellen

24 siehe Kapitel 20.1 unter »Neuere DHTML-Ansätze« im Abschnitt »innerHTML« 25 siehe Kapitel 10 »Document Object Model«

 KOMPENDIUM 

JavaScript

641

Kapitel 20

DHTML Position (in der Variablen rechnung) 5 Pixel addiert, ist dies aber der Fall, wird die Position der Flocke auf -5, also oberhalb des sichtbaren Bereiches, zurückgesetzt und sie beginnt ihre Wanderschaft erneut. function schneien(i) { var name = "c"+i; if (document.all) { if (parseInt(document.all(name).style.pixelTop) < f_hoehe - 5) { var rechnung = parseInt(document.all(name).style.pixelTop) + 5; document.all(name).style.pixelTop = rechnung; } else { document.all(name).style.pixelTop = -5; } } else if(document.getElementById) { if (parseInt(document.getElementById(name).style.top) < f_hoehe - 5) { var rechnung = parseInt(document.getElementById(name).style.top) + 5; document.getElementById(name).style.top = rechnung; } else { document.getElementById(name).style.top = -5; } } else if(document.layers) { if (parseInt(document.layers[name].pageY) < f_hoehe - 5) { var rechnung = parseInt(document.layers[name].pageY) + 5; document.layers[name].pageY = rechnung; } else { document.layers[name].pageY = -5; } } }

Was die Funktion im Beispiel komplex macht, ist hauptsächlich die erforderliche Browserunterscheidung beim Zugriff auf die Schneeflockenelemente. Sicherlich könnte man hier einzelne Teile vereinfachend zusammenfassen. Aus Gründen der Übersichtlichkeit wurde hier jedoch darauf verzichtet.

Komplett Nachfolgend sehen Sie den vollständigen Code. Hervorgehoben ist nur der Funktionsaufruf von schneien() in setInterval(). Der Code zum Erzeugen der Schneeflocke wird automatisch beim Laden der Seite ausgeführt: Listing 20.11: Ein zufallsgesteuertes Schneegestöber (zufall_animation. html)

642

<script language="JavaScript">
 KOMPENDIUM 

JavaScript

Animation

Kapitel 20

var ele = ""; if (window.innerHeight) { var f_hoehe = window.innerHeight - 30; var f_breite = window.innerWidth - 30; } else if (document.body.clientHeight) { var f_hoehe = document.body.clientHeight - 30; var f_breite = document.body.clientWidth - 30; } for (var i = 0; i<20; i++) { name = "c"+i; ele += "\

<\/div>"; } document.write(ele); for (var i = 0; i<20; i++) { setInterval("schneien("+i+")", 50); } function schneien(i) { var name = "c"+i; if (document.all) { if (parseInt(document.all(name).style.pixelTop) < f_hoehe - 5) { var rechnung = parseInt(document.all(name).style.pixelTop) + 5; document.all(name).style.pixelTop = rechnung; } else { document.all(name).style.pixelTop = -5; } } else if(document.getElementById) { if (parseInt(document.getElementById(name).style.top) < f_hoehe 5) { var rechnung = parseInt(document.getElementById(name).style.top) + 5; document.getElementById(name).style.top = rechnung; } else { document.getElementById(name).style.top = -5; } } else if(document.layers) { if (parseInt(document.layers[name].pageY) < f_hoehe - 5) { var rechnung = parseInt(document.layers[name].pageY) + 5; document.layers[name].pageY = rechnung; } else { document.layers[name].pageY = -5; } } }

 KOMPENDIUM 

JavaScript

643

Kapitel 20

DHTML //-->

Erweiterungen Wenn Sie die Grundlagen von DHTML verstanden haben, können Sie die Beispiele nahezu beliebig erweitern und verfeinern. Die Betonung liegt auf »verstanden«, denn ist selten ausreichend, sich einfach ein hübsches Skript aus dem Netz zu holen und es anzupassen. Wenn Sie nicht wissen, was das Skript macht, verlieren Sie sich schnell in Details und brauchen schließlich mehr Zeit, als Sie bei der Einarbeitung in die Grundlagen benötigt hätten. Dieses Animationsbeispiel lässt sich auch sehr vielseitig erweitern. Einige Erweiterungsvorschläge und -anregungen finden Sie hier: Sie können das Skript in eine beliebige Seite einbauen. Sie müssen dabei lediglich darauf achten, dass die Schneeflocken über allen anderen Elementen liegen, also einen höheren z-index haben. Dazu erhöhen Sie einfach den z-index bei der dynamischen Ausgabe. ele += "px\; left:" + Math.round(Math.random()*(f_breite)) + "px\; zindex:" + (i+5) + "\' "; Abbildung 20.15: Das Schneegestöber wurde in eine Seite eingebaut.

644

 KOMPENDIUM 

JavaScript

Animation

Kapitel 20

Auf der CD-ROM finden Sie unter zufall_animation_inseite.html ein Beispiel, bei dem das Schneegestöber in Listing 20.8 eingebaut wurde. Sie können auch bei der Bewegung einen Zufall mit einbauen und die Schneeflocken in unterschiedlichen Geschwindigkeiten nach unten fallen lassen. Ein Beispiel befindet sich unter zufall_animation_doppelt.html auf der CDROM. Dort wurde eine weitere Zufallsvariable namens bew eingeführt, die für jede Schneeflocke eine Fallgeschwindigkeit angibt. Sie können das Schneegestöber mit setTimeout() nach einer festgelegten Zeitspanne beenden. Dazu müssen Sie setInterval() allerdings einer Variablen zugewiesen haben.26 Wenn Sie die Flocke schon vorher als

-Blöcke einbauen, können Sie sie dann nur noch Platzieren. Diese Methode sorgt vor allem im Netscape Navigator 4.x für ein besseres Ergebnis. Die Animation muss natürlich nicht von oben nach unten laufen. Sie könnte auch von links nach rechts (x-Koordinate) oder schräg (x- und y-Koordinate) verlaufen. Auch die lineare Bewegung ist kein Muss. Verwenden Sie stattdessen beispielsweise eine Bewegung, die mit trigonometrischen Funktionen, beispielsweise Sinus oder Cosinus, ausgerechnet wird.

26 Mehr zu diesem Thema erfahren Sie in Kapitel 13 »Bilder«.

 KOMPENDIUM 

JavaScript

645

21

Vollständigkeitsüberprüfung und reguläre Ausdrücke

Eines der häufigsten Einsatzgebiete von JavaScript ist die Vollständigkeitsüberprüfung von Formularen. Dabei kann – je nach Aufwand und Anwendung – überprüft werden, ob Felder ausgefüllt und ob korrekte Eingaben erfolgt sind. Für umfangreichere Überprüfungen eignen sich insbesondere die regulären Ausdrücke. Es handelt sich hierbei um Muster, auf die Formularinhalte getestet werden können. Gewollte Falscheingaben wie der berühmte »Donald Duck« sind nicht vollständig zu verhindern. Sie können natürlich im Hintergrund mit einer Adress- oder Kundendatenbank arbeiten, dies ist allerdings recht aufwändig und für ein einzelnes Kontaktformular nicht sinnvoll. Bei einer Vollständigkeitsüberprüfung sollte eher der Service-Gedanke im Vordergrund stehen, vom Kunden alle tatsächlich notwendigen Daten zu erhalten. Das dabei schreibfaule Nutzer nach ein oder zwei Fehlversuchen mit Blindeinträgen auch gezwungen werden, Angaben korrekt vorzunehmen, ist ein angenehmer Nebeneffekt.

21.1

Vollständigkeitsüberprüfung

Die Vollständigkeitsüberprüfung kann an verschiedenen Stellen in einem Dokument erfolgen: Beim Abschicken des Formulars (onsubmit im

-Tag) Direkt nach der Eingabe eines Wertes in das Formularfeld (onchangeEreignis) Die einfachste und am häufigsten benötigte Überprüfung ist, ob ein Formularelement ausgefüllt wurde. Diese Möglichkeit finden Sie im nächsten Abschnitt für alle Formularelemente. Komplexere Überprüfungen von häufig vorkommenden Beispielen wie Postleitzahlen oder E-Mail-Adressen finden Sie in Kapitel 21.3 »Reguläre Ausdrücke«.

 KOMPENDIUM 

JavaScript

647

Kapitel 21

Vollständigkeitsüberprüfung und reguläre Ausdrücke Sie sollten mandatorische Felder, also verpflichtend auszufüllende Formularfelder, als solche kennzeichnen.

Formularelemente Alle Textfelder werden der gleichen Überprüfung unterzogen, unabhängig davon, ob es sich um mehrzeilige, einzeilige und versteckte Felder oder Passwortfelder handelt. Checkboxen und Radiobuttons sind etwas schwieriger zu prüfen. Auswahllisten müssen nur unter bestimmten Umständen getestet werden. Textfeld, mehrzeiliges Textfeld und andere Felder Die Überprüfung eines Textfelds ist ausgesprochen einfach. Sie müssen lediglich überprüfen, ob es leer ist oder nicht. Das folgende Beispiel zeigt dies: Listing 21.1: Vollständigkeitsüberprüfung für ein Textfeld (vollst_feld.html)

<script language="JavaScript">
//-->

Diese Überprüfung funktioniert nicht, wenn bereits ein Vorgabewert mit dem value-Attribut angegeben ist. In diesem Fall muss geprüft werden, ob das Feld den Vorgabewert oder einen leeren String enthält, denn beides wäre nicht korrekt.1 Wenn Sie es wünschen, können Sie zusätzlich vorher alle Leerzeichen entfernen, damit der Nutzer Sie nicht mit der Eingabe von Leerzeichen reinlegen kann.

1

648

Es sei denn, der Vorgabewert ist ein möglicher Wert. Dies sollten Sie jedoch im Allgemeinen vermeiden.

 KOMPENDIUM 

JavaScript

Vollständigkeitsüberprüfung function test() { var ele = document.formular.eingabe.value; return (ele.replace(" ", "") != ""); }

Kapitel 21 Listing 21.2: Vollständigkeitsüberprüfung ohne Leerzeichen (vollst_feld_ ohneleer.html)

Die hier gezeigte Überprüfung gilt für alle Arten von Textfeldern. Checkboxen Für eine Checkbox können Sie mit checked überprüfen, ob sie aktiviert wurde. Folgende Zeile liefert eine Überprüfung, ob eine Checkbox für die AGBs aktiviert wurde: return (document.formular.AGB.checked);

Listing 21.3: Eine Checkbox überprüfen (vollst_checkboxen. html)

Normalerweise ist die Überprüfung einer Checkbox nicht sinnvoll, da sie optionalen Charakter hat. Eine Ausnahme ist eine Checkbox, die eine Bestätigung erfordert: beispielsweise, dass der Nutzer die Lizenzbedingungen akzeptiert oder die AGBs gelesen hat. Wollen Sie überprüfen, ob aus einer Gruppe von Checkboxen2 eine ausgewählt ist, müssen Sie alle Elemente mit einer Schleife durchlaufen: function test() { var ele = document.formular.katalog; for (var i = 0; i < ele.length; i++) { if (ele[i].checked) return (true); } return false; }

Listing 21.4: Vollständigkeitsüberprüfung mit mehreren Checkboxen (vollst_checkboxen _mehrere.html)

Radiobuttons Radiobuttons treten immer in Gruppen auf, haben also dasselbe name-Attribut. Die Überprüfung erfolgt analog zu den Checkboxen:

2

Jede Checkbox einer Gruppe hat das gleiche name-Attribut.

 KOMPENDIUM 

JavaScript

649

Kapitel 21 Listing 21.5: Vollständigkeitsüberprüfung für eine Gruppe von Radiobuttons (vollst_radiobutton. html)

Vollständigkeitsüberprüfung und reguläre Ausdrücke function test() { var ele = document.formular.geschl; for (var i = 0; i < ele.length; i++) { if (ele[i].checked) return (true); } }

Auswahllisten Bei Auswahllisten unterscheidet sich die Vollständigkeitsüberprüfung für Listen mit nur einer und Listen mit mehreren Auswahlmöglichkeiten. Auswahlliste mit einer Option Wenn der Nutzer keine Option auswählt, ist automatisch die erste Option in einer Auswahlliste ausgewählt. Die Eigenschaft selectedIndex hat also den Wert 0.3 Daher steht häufig als erste Option nur ein Platzhalter wie »Bitte wählen« zur Verfügung. Bei einer Vollständigkeitsüberprüfung kann anschließend getestet werden, ob selectedIndex gleich 0 ist. In diesem Fall hat der Nutzer nichts ausgewählt. return (ele.selectedIndex != 0);

Wollen Sie nicht nur am Anfang, sondern auch zwischen den Optionen leere Optionen einfügen, sollten Sie eine andere Überprüfungsmethode wählen. Die Füllfelder sollten einen leeren String als value haben. Das Überprüfungsskript prüft dann die value-Eigenschaft der ausgewählten Option: Listing 21.6: Die Vollständigkeitsüberprüfung mittels eines leeren value-Attributs (vollst_auswahl_ value.html)

<script language="JavaScript">
} //-->

<select name="auswahl"> Option 1 Option 2 --- Option 3 3

650

siehe Kapitel 16.2 unter »Auswahlliste« im Abschnitt »Zugriff auf Auswahllisten«

 KOMPENDIUM 

JavaScript

Vollständigkeitsüberprüfung

Kapitel 21

Auswahlliste mit mehreren Optionen Bei einer Auswahlliste mit mehreren Optionen4 kann der Nutzer natürlich auch nur leere Optionen auswählen. Die Auswahl bleibt auch dann korrekt, wenn nur eine Option einen Wert hat. Daher muss die Überprüfungsfunktion alle Optionen durchgehen und überprüfen, ob sie ausgewählt sind und keinen leeren Wert haben. Nur, wenn beides für eine der Optionen zutrifft, wird von der Überprüfung true zurückgeliefert. function test() { var ele = document.formular.auswahl; for (var i = 0; i < ele.length; i++) { if (ele.options[i].value != "" && ele.options[i].selected) return true; } return false; }

Listing 21.7: Vollständigkeitsüberprüfung für eine Auswahlliste mit mehreren Optionen (vollst_auswahl_ mehrere.html)

Datei-Upload Die Überprüfung des Datei-Uploads erfolgt wie die Überprüfung eines Textfelds. Ist es leer, hat der Nutzer keine Datei angegeben. In Kapitel 16.2 im Abschnitt »Datei-Upload« finden Sie ein Beispiel für die Überprüfung des Datei-Uploads.

Automatisieren Die bisherigen Überprüfungen für die einzelnen Formularelemente benötigen eine direkte Referenz auf den Elementnamen. Dies ist bei größeren Formularen natürlich unpraktisch. Hier stellt sich die Frage, ob das ganze Formular – unabhängig davon, welche Elemente enthalten sind – nicht automatisch geprüft werden kann. Ein solcher Automatismus basiert immer auf demselben Aufbau, auch wenn er unterschiedlich realisiert werden kann: Alle Elemente des Formulars werden in einer Schleife durchgeprüft. Eine Fallunterscheidung testet den Typ (type-Eigenschaft) des Elements. Je nach Typ wird eine der Überprüfungsfunktionen aufgerufen.

4

HTML-Attribut multiple

 KOMPENDIUM 

JavaScript

651

Kapitel 21

Vollständigkeitsüberprüfung und reguläre Ausdrücke Die gesamte Überprüfung wird mit return false abgebrochen, wenn eine der Überprüfungsfunktionen false zurückliefert, ein Element also nicht ausgefüllt ist. Im Folgenden sehen Sie ein vollständiges Skript, das aus diesen Elementen besteht. Hervorgehoben sind die Funktionsaufrufe und die Rückgaben (return).

Listing 21.8: Automatisierte Vollständigkeitsüberprüfung (vollst.html)

<script language="JavaScript">
} else if (f.elements[i].type=="select-multiple") { if(!multiple(f.elements[i])) return false;

} else if (f.elements[i].type=="checkbox" || f.elements[i].type=="radio") { if(!radio_check(f, f.elements[i].name)) return false;

} } return true;

} function leer(ele) { var inhalt = ele.value; return (inhalt.replace(" ","") != "");

} function multiple(ele) { for (var i = 0; i < ele.length; i++) { if (ele.options[i].value != "" && ele.options[i].selected) return true;

} return false;

} function radio_check(f, ele) { if (f.elements[ele].length == null) { return true;

} else { for (var i = 0; i < f.elements[ele].length; i++) { if (f.elements[ele][i].checked) return true;

} } return false;

652

 KOMPENDIUM 

JavaScript

Vollständigkeitsüberprüfung

Kapitel 21

} //-->

Wohin soll die Reise gehen?

<select multiple name="auswahl"> Zypern --- Barcelona --- Moskau Reiseziel?
Sonderwunsch?

Weiblich
Männlich

Katalog senden

Die Überprüfungsfunktionen kennen Sie bereits von den einzelnen Formularelementen. Lediglich die Funktion für Checkboxen und Radiobuttons musste angepasst werden: Hier wird als Erstes überprüft, ob mehrere Elemente mit demselben Namen vorhanden sind. function radio_check(f, ele) { if (f.elements[ele].length == null) { return true;

Wenn dies nicht der Fall ist, wird sofort true zurückgeliefert. Das heißt, Checkboxen oder Radiobuttons, die alleine stehen, müssen nicht unbedingt aktiviert sein. Gibt es mehrere Checkboxen oder Radiobuttons mit einem Namen, werden alle Elemente der Gruppe durchlaufen und überprüft, ob eines der Elemente aktiviert ist. } else { for (var i = 0; i < f.elements[ele].length; i++) { if (f.elements[ele][i].checked) return true; } }

 KOMPENDIUM 

JavaScript

653

Kapitel 21

Vollständigkeitsüberprüfung und reguläre Ausdrücke Sollte dies nicht der Fall sein, wird am Ende der Funktion false zurückgegeben. return false; }

Optionale Felder Der Automatismus vereinfacht das Leben des JavaScript-Programmierers natürlich deutlich, macht allerdings auch ein wenig unflexibel. Was geschieht beispielsweise, wenn ein Formular optionale Felder haben soll? Natürlich könnte jedes Feld einzeln ausgeschlossen werden, allerdings ist dies recht umständlich. Daher können Sie auf einen Trick zurückgreifen: Geben Sie jedem Feld, das optional sein soll, einen eindeutigen Namenszusatz wie beispielsweise "_opt". Überprüfen Sie anschließend mit index Of()innerhalb der Schleife, ob der Namenszusatz enthalten ist.5 Nur, wenn dies nicht der Fall ist, wird das Element weitergeprüft: Listing 21.9: Optionale Elemente nicht testen (Ausschnitt aus: vollst_opt.html)

function test(f) { for (var i=0; i < f.elements.length; i++) { if (f.elements[i].name.indexOf("_opt") == -1) {

if (f.elements[i].type=="text" || f.elements[i].type=="password" || f.elements[i].type=="textarea") { if(!leer(f.elements[i])) return false; } else if (f.elements[i].type=="select-multiple") { if(!multiple(f.elements[i])) return false; } else if (f.elements[i].type=="checkbox" || f.elements[i].type=="radio") { if(!radio_check(f, f.elements[i].name)) return false; } }

} return true; } . . . Sonderwunsch?



Nachfragen Bisher erfolgte die Fehlermeldung ohne sinnvolle Ausgabe. Für eine Ausgabe benötigen Sie eine Fehlervariable, die die Namen der nicht vollständig ausgefüllten Formularfelder aufnimmt. 5

654

Wenn dies nicht der Fall ist, ergibt indexOf() den Wert -1 (siehe Kapitel 7.2 im Abschnitt »Suchen«).

 KOMPENDIUM 

JavaScript

Vollständigkeitsüberprüfung var fehler = "";

function test(f) { for (var i=0; i < f.elements.length; i++) { if (f.elements[i].type=="text" || f.elements[i].type=="password" || f.elements[i].type=="textarea") { if(!leer(f.elements[i]))

Kapitel 21 Listing 21.10: Vollständigkeitsüberprüfung mit Fehlermeldung (vollst_fehler.html)

fehler += f.elements[i].name + " ";

} else if (f.elements[i].type=="select-multiple") { if(!multiple(f.elements[i])) fehler += f.elements[i].name + " ";

} else if (f.elements[i].type=="checkbox" || f.elements[i].type=="radio") { if(!radio_check(f, f.elements[i].name)) fehler += f.elements[i].name + " ";

} } if (fehler != "") { alert("Folgende Felder fehlen:\n" + fehler); fehler = ""; return false; } else { return true; }

} Abbildung 21.1: Das Skript liefert eine Fehlermeldung.

Allerdings ist noch nicht alles perfekt. Ist die Radiobutton-Gruppe nicht ausgefüllt, erscheint die Fehlermeldung zweimal, weil sie aus zwei Radiobuttons besteht. Hier hilft eine einfache Überprüfung, ob das Feld bereits im fehler-String genannt wurde:

 KOMPENDIUM 

JavaScript

655

Kapitel 21 Listing 21.11: Für Gruppen von Radiobuttons und Checkboxen erscheint nun lediglich eine Fehlermeldung (vollst_fehler_ mehrere.html)

Vollständigkeitsüberprüfung und reguläre Ausdrücke } else if (f.elements[i].type=="checkbox" || f.elements[i].type=="radio") { if(!radio_check(f, f.elements[i].name)) { if (fehler.indexOf(f.elements[i].name) == -1) fehler += f.elements[i].name + " ";

} }

Wenn Sie etwas längere oder aussagekräftigere Fehlermeldungen verwenden möchten, sollten Sie nicht das name-Attribut heranziehen. Dann scheitert der Automatismus und Sie müssen für jedes Feld eine eigene Fehlermeldung anlegen. Als Erweiterung können Sie die Fehler auch auf einer neuen Seite6 oder mit innerHTML7 oben in der Seite ausgeben.

Ändern In der Regel kann der Nutzer nach der Vollständigkeitsüberprüfung das Formular neu ausfüllen. Wollen Sie etwas aufdringlicher nachfragen, können Sie auch window.prompt() verwenden und direkt nach einem Wert für das Feld nachfragen. Dies ist hauptsächlich bei Textfeldern sinnvoll, nicht aber bei Auswahllisten oder Checkboxen. Im Allgemeinen erscheint die Nachfrage nach einem Formularwert zu aufdringlich. Außerdem bietet sich hier eine Endlosschleife an, wenn der Nutzer das Feld nicht ausfüllen möchte.

Überprüfung bei der Eingabe Die Vollständigkeitsüberprüfung bei der Eingabe erfolgt über das Ereignis onchange. Neben dem Formularfeld muss dann dynamisch eine Fehlermeldung angezeigt werden. Eine Möglichkeit besteht darin, einen bereits vorhandenen <span>-Block einzublenden. Listing 21.12: Vollständigkeitsüberprüfung bei der Eingabe (vollst_eingabe. html)

<script language="JavaScript">
656

siehe Kapitel 21.2 »Formulardaten übernehmen« siehe Kapitel 20 »DHTML«, insbesondere Kapitel 20.1 unter »Neuere DHTML-Ansätze«.

 KOMPENDIUM 

JavaScript

Vollständigkeitsüberprüfung

Kapitel 21

}

//-->

<span id="eingabe_aus" style="visibility:hidden">Bitte ausfüllen

Das hier verwendete Skript kann für jedes Textfeld in der Seite verwendet werden. Die Referenz auf das aktuelle Textfeld wird mit this übergeben und der Name in der Funktion dynamisch zusammengesetzt: var name = e.name + "_aus";

Dies erfordert, dass die <span>-Blöcke nach einem bestimmten Schema benannt sind. In dem Beispiel heißen Sie immer wie das Textfeld, gefolgt von "_aus". Abbildung 21.2: Der Nutzer hat nur ein Leerzeichen eingetragen.

Das onchange-Ereignis hat den Nachteil, dass es nicht aufgerufen wird, wenn der Nutzer nur in das Feld klickt und nichts ändert. Für diesen Fall könnten Sie zusätzlich onclick verwenden, allerdings erscheint dann sofort eine Fehlermeldung, wenn der Nutzer in das Feld klickt. Um das vorherige Beispiel auch mit der vierten Generation von Netscape Navigator und Internet Explorer abwärtskompatibel zu machen, ist einiger Aufwand nötig. Der Netscape Navigator 4.x benötigt einen absolut positio-

 KOMPENDIUM 

JavaScript

657

Kapitel 21

Vollständigkeitsüberprüfung und reguläre Ausdrücke nierten

-Block für die Beschriftung und in die Funktion test() muss eine Fallunterscheidung für den Zugriff auf den

-Block eingefügt werden. Sie finden das abwärtskompatible Beispiel auf der CD-ROM unter vollst_ eingabe_komp.html im Ordner code\kap21. Um auch in Uralt-Browsern die höchste Abwärtskompatibilität zu erreichen, können Sie statt eines

-Blocks auch ein image-Objekt verwenden und das Bild von einem transparenten GIF in ein Symbol für fehlerhaftes Ausfüllen abändern.8

Auf dem Server? Gegenüber einer serverseitigen Vollständigkeitsüberprüfung hat die Überprüfung mit JavaScript Vor- und Nachteile. Zunächst die schlechte Nachricht: JavaScript kann deaktiviert werden. Das heißt, entweder entfällt die Vorausfüllung oder der Nutzer kann das Formular überhaupt nicht mehr verschicken. Letzteres sollte natürlich auf keinen Fall eintreten, wenn Sie keine Kunden verlieren möchten. Da aber auch der erste Fall nicht angenehm ist, bleibt zu überlegen, direkt zu überprüfen, ob der Nutzer JavaScript aktiviert hat und ihm nur dann das Formular mit Vollständigkeitsüberprüfung vorzusetzen. Allerdings halten Sie auch hier dem Nutzer ohne JavaScript Informationen vor. Bei diesem Dilemma sollten Sie überlegen, ob eher der Service-Gedanke oder die Filterung von Falscheingaben im Vordergrund steht. Für elektronische Zahlungssysteme – beispielsweise per Kreditkarte – stellen viele Dienstleister zusätzliche Überprüfungen zur Verfügung, sodass Sie den Zahlungsverkehr im Onlineshop gegenchecken können, ohne selbst programmieren zu müssen. Ein Vorteil von JavaScript gegenüber serverseitiger Überprüfung ist die Performance. Die JavaScript-Überprüfung wird direkt im Browser aufgebaut. Es ist keine Anfrage an den Server erforderlich. Bei der serverseitigen Überprüfung müssen die Daten dagegen zunächst an den Server geschickt werden, anschließend wird überprüft und eventuell auftretende Fehlermeldungen werden zurückgeliefert. Dies ist auch der Grund, warum ASP.NET serverseitige Überprüfungen mit Validation Controls für den Internet Explorer9 in JScript-Code umwandelt.

8 9

658

Mehr Informationen zum image-Objekt erhalten Sie in Kapitel 13 »Bilder«. Andere Browser müssen mit serverseitiger Überprüfung vorlieb nehmen.

 KOMPENDIUM 

JavaScript

Formulardaten übernehmen

21.2

Kapitel 21

Formulardaten übernehmen

Es gibt mehrere Möglichkeiten, um Daten aus einem Formular auf eine andere Seite zu übernehmen. Im Einzelnen erfolgt dies über: ein Cookie (siehe Kapitel 17 »Cookies«) versteckte Formularfelder (siehe Kapitel 16 »Formulare«), eventuell in einem versteckten, also nur 1 Pixel hohen Frame (siehe Kapitel 18 »Frames«). In einem versteckten Frame können Sie natürlich auch die Werte in Variablen ablegen. die Übergabe in der URL mit GET. Diese Methode verwenden wir in diesem Abschnitt, um eine Dankesseite und die Eingaben zu bestätigen. Im Dokument, das die Dankesseite aufruft, muss die URL der Seite unter action eingetragen werden. Als Methode ist GET zu wählen.

Listing 21.13: Aufruf der Dankesseite (vollst_danke.html)

Dieses Skript ist eine leichte Abwandlung von Listing 21.11. Sie finden die vollständige Datei unter vollst_danke.html im Ordner code\kap21 auf der CD-ROM. Die Formulardaten werden hinter einem Fragezeichen an die URL angehängt. Die einzelnen Name/Wert-Paare sind durch kaufmännische Und getrennt: danke.html?Reiseziel=Zypern&Sonderwunsch=Sitzplatz&Geschlecht=m&Katalog=on

Darauf können Sie in der Dankesseite mit dem location-Objekt zugreifen. location.search enthält den Teil des Strings mit dem Fragezeichen. Die Dankesseite ist folgendermaßen aufgebaut: Nach einigen Variablendeklarationen erhält die Variable ur_str den String vom Fragezeichen (inklusive) bis zum Ende. Ist der String nur ein Zeichen order keines, wurden keine Werte übergeben. Wenn jedoch Werte vorhanden sind, erhält der String statt des Fragezeichens am Anfang ein kaufmännisches Und, da so die Überprüfung der Namen/ Wert-Paare einfacher erfolgt. Anschließend wird die Funktion ausgeben() aufgerufen, die den String aus der URL zerlegen soll.

 KOMPENDIUM 

JavaScript

659

Kapitel 21

Vollständigkeitsüberprüfung und reguläre Ausdrücke var ur_str = location.search; if (ur_str.length > 2) { ur_str = "&" + ur_str.substring(1, ur_str.length); ausgeben(ur_str); } else { document.write("

Keine Werte übertragen

"); }

Diese Funktion geht in einer Schleife den gesamten String durch und schneidet die Namen und Werte heraus. Dazu werden anhand der Trennzeichen & und = jeweils Beginn (beg), Mitte (mit) und Ende (end) eines Name/Wert-Paares herausgefiltert. function ausgeben(ur_str) { for(var pos = 0; ur_str.indexOf("&", pos) != -1; pos=mit+1) { beg = ur_str.indexOf("&", pos)+1; mit = ur_str.indexOf("=", pos); if(ur_str.indexOf("&", mit+1) != -1) end = ur_str.indexOf("&", mit+1); else end = ur_str.length; feld = unescape(ur_str.substring(beg, mit)); wert = unescape(ur_str.substring(mit+1,end)); document.write("

"+feld+": "+wert+"

"); } }

Nachfolgend sehen Sie den vollständigen Code: Listing 21.14: Eine Dankesseite (danke.html)

Vielen Dank für das Interesse!

Sie haben folgendes ausgewählt:

<script language="JavaScript"> 2) { ur_str = "&" + ur_str.substring(1, ur_str.length); ausgeben(ur_str);

660

 KOMPENDIUM 

JavaScript

Formulardaten übernehmen

Kapitel 21

} else { document.write("

Keine Werte übertragen

"); } function ausgeben(ur_str) { for(var pos = 0; ur_str.indexOf("&", pos) != -1; pos=mit+1) { beg = ur_str.indexOf("&", pos)+1; mit = ur_str.indexOf("=", pos); if(ur_str.indexOf("&", mit+1) != -1) end = ur_str.indexOf("&", mit+1); else end = ur_str.length; feld = unescape(ur_str.substring(beg, mit)); wert = unescape(ur_str.substring(mit+1,end)); document.write("

"+feld+": "+wert+"

"); } } //--> Abbildung 21.3: Die Angaben werden noch einmal zusammengefasst.

Wenn Sie kein automatisiertes Skript wählen, sondern auf bekannte Formularelemente zurückgreifen, können Sie auch eigene Angaben machen und beispielsweise den Wert m aus dem value-Attribut mit »männlich« ersetzen. Ein weiterer Verbesserungsvorschlag wäre, das Skript zusätzlich mit einer Versandmöglichkeit zu verbinden.

 KOMPENDIUM 

JavaScript

661

Kapitel 21

Vollständigkeitsüberprüfung und reguläre Ausdrücke

21.3

Reguläre Ausdrücke

Reguläre Ausdrücke sind Muster, die in Strings gesucht werden können oder mit denen Strings verglichen werden. Natürlich können Sie auch mit den String-Methoden wie indexOf() in Strings suchen (siehe Kapitel 7 »Arrays und Strings«). Reguläre Ausdrücke haben allerdings eine eigene Syntax, die es ermöglicht, auch komplexe Überprüfungen sehr einfach durchzuführen. In JavaScript stehen reguläre Ausdrücke als eigenes Regular ExpressionObjekt zur Verfügung. Ein solches Objekt können Sie mit dem Konstruktor (new) erzeugen: var reg = new RegExp("\d{5}");

oder als Literal definieren: var reg = /\d{5}/;

In älteren Browsern – Netscape 2 und 3 und Internet Explorer 3 – stehen reguläre Ausdrücke nicht zur Verfügung. Standardisiert sind sie in ECMAScript v3.10 Der Opera unterstützt sie seit Version 5. Tabelle 21.1: Reguläre Ausdrücke und Regular Expression-Objekt

NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3































Beachten Sie, dass das Literal mit dem regulären Ausdruck immer in Schrägstriche (/) eingeschlossen ist. Der Unterschied zwischen beiden Methoden ist folgender: Per Konstruktor wird der reguläre Ausdruck erst kompiliert, wenn er aufgerufen wird. Dies erlaubt Ihnen, den regulären Ausdruck im Verlauf des Skripts zu ändern. Sie können den Ausdruck allerdings auch mit der Methode compile("Reg. Ausdr.", "Parameter") dazu zwingen, kompiliert zu werden. Diese Methode steht in allen Browsern zur Verfügung, die reguläre Ausdrücke enthalten. Per Literal wird der reguläre Ausdruck sofort kompiliert.

10 JavaScript 1.2 übernimmt einen Teil des Standards, während JavaScript 1.5 den kompletten Standard übernimmt. Die regulären Ausdrücke in ECMAScript v3 entsprechen funktional größtenteils Perl 5.

662

 KOMPENDIUM 

JavaScript

Reguläre Ausdrücke

Kapitel 21

Das Erstellen eines regulären Ausdrucks ist teilweise recht kompliziert, weil die Syntax sehr kurz und daher auch etwas unübersichtlich ist. Nachfolgend zeigen wir Ihnen eine kurze Übersicht über die wichtigsten grammatikalischen Regeln für reguläre Ausdrücke: Ziffern und Buchstaben des Alphabets entsprechen in regulären Ausdrücken sich selbst. Sonderzeichen werden mit Backslash (\) entwertet. var reg = /\\/

entspricht also einem Backslash. Zeichen mit besonderer Bedeutung – so genannte Metazeichen – sind: \|[]()^$*+-.? Ihre Bedeutung wird nachfolgend erläutert: Zeichenarten können in eckigen Klammern ([]) angegeben werden. Der reguläre Ausdruck /[136]/ prüft, ob eine Ziffer 1, 3 oder 6 ist. Mit dem Bindestrich können Sie Bereiche festlegen: /[a-z]/ steht für alle Kleinbuchstaben und /[a-z0-9]/ für alle Kleinbuchstaben und Ziffern. Für einige Zeichenarten gibt es Kürzel: \w steht für alle ASCII-Zeichen und \d für alle Ziffern. Der Punkt (.) steht für jedes beliebige Zeichen und \s für ein Whitespace. Wollen Sie eine Zeichenart bewusst ausschließen, schreiben Sie ein ^ an den Anfang in die eckigen Klammern: /[^136]/ steht also für »alles« außer 1, 3 und 6. Zum Ausschließen einiger Zeichenarten gibt es ebenfalls Kürzel: \W steht für alles außer ASCII-Zeichen und \D für alles außer Ziffern. \S steht für kein Whitespace. Die Häufigkeit des Auftretens eines Zeichens lässt sich in geschweiften Klammern festlegen: /\d{5}/ steht also für das fünfmalige Auftreten einer Ziffer. Sie können mit Komma getrennt auch Minimal- und Maximalanzahl des Auftretens festlegen: /\d{4,5}/ besagt, dass zwischen vier und fünf Ziffern vorkommen müssen. Wenn Sie die Stelle nach dem Komma freilassen, steht dies für »mindestens«: /\d{5,}/ verlangt also mindestens fünf Ziffern. Neben dieser Syntax gibt es noch einige Kurzformen: – ? steht für einmaliges oder kein Auftreten. Dies entspricht {0,1}. – + steht für einmaliges oder mehrmaliges Auftreten. Dies hat die gleiche Wirkung wie {1,}. – * für steht für mehrmaliges oder kein Auftreten. Dies ist dasselbe wie {0,}.

 KOMPENDIUM 

JavaScript

663

Kapitel 21

Vollständigkeitsüberprüfung und reguläre Ausdrücke Klammern dienen zur Zusammenfassung von Elementen. Der horizontale Strich (|) trennt Alternativen. /(01|12)|[4-9]/ liefert true, wenn das Zeichen entweder die Ziffer 4 bis 9 enthält oder 0 und 1 oder 1 und 2. Den Inhalt einer Klammer können Sie mit \Nummer wieder aufrufen, wobei die Nummer der Position der Klammer entspricht. Die erste Klammer heißt also \1, die zweite \2 usw. Auf diese Weise können Sie Konstrukte in regulären Ausdrücken wieder verwenden. Ankerzeichen: ^11 steht für den Anfang des Strings oder der Zeile, $ für das Ende. \b (Reguläre Ausdrücke) entspricht einer Wortgrenze. \B ist true, wenn es sich um keine Wortgrenze handelt. Flags regeln das Verhalten des regulären Ausdrucks und werden immer an das Ende geschrieben: /[a-d]/i oder per Konstruktor new RegExp ("[a-d]", "i"). Die für JavaScript wichtigen Flags sind: – g – ist ein Vergleich, der nicht nach der ersten Übereinstimmung abgebrochen wird. – i – ist ein Vergleich, der die Groß- und Kleinschreibung nicht berücksichtigt. – m – berücksichtigt Strings mit Zeilenumbrüchen (mit \n). Dieses Buch kann keine umfassende Einführung in reguläre Ausdrücke bieten. Das Standardwerk auf diesem Gebiet, in dem Sie weiterführende Informationen finden, heißt »Reguläre Ausdrücke« von Jeffrey E.F. Friedl und ist in der deutschen Fassung bei O’Reilly erschienen.

Mit regulären Ausdrücken arbeiten Um mit regulären Ausdrücken effektiv arbeiten zu können, müssen die verschiedenen Erscheinungsformen zunächst von den regulären Ausdrücken unterschieden werden. Dies erfolgt über: Drei String-Methoden – match(RegExp), replace(RegExp, Ersatzstring) und search(RegExp), die auf ein String-Objekt einen regulären Ausdruck anwenden.12 Die folgenden Zeilen ergeben a als Ausgabe, da der Buchstabe »a« in dem String »Mozilla« enthalten ist: var text = "Mozilla"; var reg = /[a-d]/; alert(text.match(reg));

11 Beachten Sie die unterschiedliche Bedeutung der Zeichen in verschiedenen Kontexten. 12 siehe auch Kapitel 7.2 unter»Suchen« im Abschnitt »match(), replace() und search()«

664

 KOMPENDIUM 

JavaScript

Reguläre Ausdrücke

Kapitel 21

Auch die String-Methode split(Reg. Ausdr.) kann einen regulären Ausdruck verwenden, um einen String zu unterteilen. Die folgenden Zeilen teilen »Mozilla« in »Moz« und »lla«. Das Trennzeichen im regulären Ausdruck verschwindet: var reg = /i/; text.split(reg);

Die Methoden eines Regular Expression-Objekts – Sie erlauben, mit dem per Literal oder Konstruktor geschaffenen Regular Expression-Objekt zu arbeiten. Mehr dazu erfahren Sie im nächsten Abschnitt. Das globale RegExp-Objekt mit seinen Eigenschaften – Dieses Objekt ist immer vorhanden. Es ist nicht gleichzusetzen mit dem Konstruktor RegExp. Dieser Konstruktor erzeugt ein bestimmtes Regular ExpressionObjekt. Das RegExp-Objekt ist dagegen global und enthält in seinen Eigenschaften Informationen über die zuletzt durchgeführten Operationen an einem (dem zuletzt erstellten oder geänderten) Regular Expression-Objekt.13 Die wichtigsten Eigenschaften dieses Objekts finden Sie nachfolgend zusammengefasst. Beachten Sie, dass alle Eigenschaften bis auf input nur lesbar sind: – $1, $2 … $9 – Diese neun Eigenschaften geben die Teile des regulären Ausdrucks an, die in runde Klammern gepackt sind. Sie können zwar im regulären Ausdruck beliebig viele Unterteilungen vornehmen, dieses Objekt speichert allerdings nur neun. – index – gibt die Position im String an, an der der reguläre Ausdruck zum ersten Mal zutraf. – input – enthält den String, auf den eine Suche mit dem regulären Ausdruck durchgeführt wurde und ist als einzige der Eigenschaften auch setzbar. Die Kurzform in Anlehnung an Perl lautet $_. Sie können sie statt des Eigenschaftsnamens einsetzen. – lastIndex – ist eine Position nach der Stelle, an der der reguläre Ausdruck zuletzt zutraf. – lastMatch – sind die zuletzt mit einem regulären Ausdruck gefundenen Zeichen. Die Kurzform lautet $&. – lastParen – liefert den letzten Teil eines regulären Ausdrucks, der zutraf. Da ein Teil in runden Klammern steht, heißt die Methode lastParen. Paren steht also für Parentheses (Klammern). – leftContext – enthält den Teil des Strings links neben einem Teil, der dem regulären Ausdruck entsprochen hat. 13 Diese Unterscheidung wird in vielen Quellen nur unsauber oder überhaupt nicht getroffen. Sie ist jedoch entscheidend, wenn Sie Eigenschaften richtig anwenden möchten.

 KOMPENDIUM 

JavaScript

665

Kapitel 21

Vollständigkeitsüberprüfung und reguläre Ausdrücke – rightContext – ist das Gegenstück zu leftContext. Die Eigenschaft enthält den rechten Teil neben dem zutreffenden Stück. – multiline – gibt an, ob der reguläre Ausdruck auf einen einzeiligen oder mehrzeiligen String (Flag m) angewendet wurde.

Tabelle 21.2: Methoden des RegExp-Objekts

$1, $2…

NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3























































index input











lastIndex







lastMatch



















lastParen



















leftContext



















rightContext



















multiline













Methoden des Regular Expression-Objekts Für ein Regular Expression-Objekt gibt es zwei wichtige Methoden: exec("String") – liefert ein Array mit der ersten übereinstimmenden

Stelle zwischen regulärem Ausdruck und String. Die weiteren Indizes des Arrays liefern eventuell vorhandene Unterergebnisse von ArrayTeilen in runden Klammern. Gibt es keine Übereinstimmung, lautet das Ergebnis null. Die Methode ähnelt in der Wirkung sehr stark der match()-Methode des String-Objekts. Diese speichert jedoch alle Übereinstimmungen in einem Array. var text = "JavaScript"; var reg = /[aeiou]/; var erg = reg.exec(text);

liefert »a«. Der Index 1 (erg[1]) ist nicht vorhanden, da der reguläre Ausdruck keine einzelnen Teile hat. Für das Ergebnis-Array gibt es drei Eigenschaften: input, index und lastIndex. Sie gleichen denen des RegExp-Objekts, denn die jeweils zuletzt ausgeführte Regular Expression-Suche vererbt ihre Werte an die Eigenschaften dieses Objekts. input enthält im vorherigen Beispiel also den String »Java-

666

 KOMPENDIUM 

JavaScript

Reguläre Ausdrücke

Kapitel 21

Script«, index die Position, an der der reguläre Ausdruck zutraf. Dies ist hier die 1 für das erste »a«. lastIndex ist die Position nach dem ersten Zutreffen, also 2. test("String") – prüft, ob der reguläre Ausdruck im String eine Übereinstimmung findet. Wenn dies der Fall ist, wird true zurückgeliefert, sonst false. Die Zahl der Übereinstimmungen ist irrelevant. Das Ergebnis der folgenden Zeilen ist also true, da in »JavaScript« Vokale vor-

kommen: var text = "JavaScript"; var reg = /[aeiou]/; var erg = reg.test(text); NS4.x NS6

NS7

IE4 IE5

IE5.5 IE6

O7

M1

K3

exec()































test()































Tabelle 21.3: exec() und test()

Anwendungen Nachdem Sie nun wissen, wie Sie in JavaScript reguläre Ausdrücke bilden, beschäftigen wir uns im Folgenden mit einigen Mustern, die die Vollständigkeitsüberprüfung wesentlich erleichtern. Zahl und Postleitzahl Das folgende Beispiel überprüft, ob in ein Formularfeld nur Zahlen eingefüllt wurden. Wenn dies nicht der Fall ist, wird das Formular nicht abgeschickt: <script language="JavaScript">
Listing 21.15: Überprüfung, ob nur Zahlen im Feld eingetragen wurden (reg.html)

var reg = /^\d*$/; return reg.test(document.formular.eingabe.value);

} //-->



 KOMPENDIUM 

JavaScript

667

Kapitel 21

Vollständigkeitsüberprüfung und reguläre Ausdrücke

Aus diesem einfachen Beispiel lässt sich sehr einfach eine Überprüfung für Postleitzahlen erarbeiten. Deutsche Postleitzahlen bestehen immer aus 5 Ziffern. Folgender regulärer Ausdruck prüft dies: var reg = /\d{5}/;

Darüber hinaus werden hier auch Buchstaben vor oder hinter den fünf Zahlen akzeptiert. Um diese auszuschließen, erlauben Sie zwischen Anfang und Ende des Strings nur fünf Zahlen: Listing 21.16: Deutsche Postleitzahlen prüfen (postleitzahl.html)

var reg = /^\d{5}$/;

Natürlich gibt es alternative Wege: Sie können das Feld auf fünf Stellen begrenzen und Anfangs- und Endankerzeichen im regulären Ausdruck weglassen oder Sie verwenden bei einem fünfstelligen Feld den Test mit isNaN(). Dies würde Sie allerdings nicht vor der Eingabe von Fließkommazahlen bewahren. Telefonnummern Telefonnummern sind schwierig zu prüfen. Sie müssen dazu für Ihr Formular ein vorgegebenes Eingabeformat erzwingen. Dies ist allerdings auch nicht ohne Risiko, da beispielsweise Nutzer aus dem Ausland eventuell noch die Auslandskennung mit vorangehendem Plus angeben möchten. Wenn Sie die Eingabe von Telefonnummern ohne sonstige Zeichen verlangen, können Sie sehr einfach überprüfen, ob genügend Ziffern angegeben sind: var reg = /^\d{7,}$/;

Wenn Sie das Format der Telefonnummer vollständig freigeben, können Sie prüfen, ob nur die üblichen Zeichen für Telefonnummern vorhanden sind. Hervorgehoben sind die Steuer- und Entwertungszeichen des regulären Ausdrucks: Listing 21.17: Telefonnummer prüfen (telefonnummer.html)

668

var reg = /^(\d|\+|\-|\.|\,|\/|\(|\))*$/;

 KOMPENDIUM 

JavaScript

Reguläre Ausdrücke

Kapitel 21

Datum Bei den Daten kommt es meist darauf an, ob es sich um ein gültiges Datum im richtigen Format handelt. Hier ist es besonders wichtig, ein Format vorzugeben. In Deutschland werden Daten beispielsweise in der Form TT.MM.JJ oder TT.MM.JJJJ angegeben, in Amerika dagegen in MM.TT.JJ oder MM.TT.JJJJ. Ein deutsches zwei- oder vierstelliges Datum mit Punkten als Trennzeichen können Sie beispielsweise auf diese Weise prüfen (die Steuerzeichen für reguläre Ausdrücke sind hervorgehoben): var reg = /^(0?[1-9]|[12][0-9]|3[01]).(0?[1-9]|1[0-2]).((19|20)?\d{2})$/;

Bei dieser Prüfung wird jedoch nicht berücksichtigt, dass die Monate unterschiedlich lang sein können.

Listing 21.18: Datum prüfen (datum.html)

E-Mail Die Überprüfung von E-Mail-Adressen mit regulären Ausdrücken gehört zu den schwierigsten Disziplinen. Der folgende reguläre Ausdruck erledigt diese Prüfung bereits relativ zuverlässig: var reg = /^([a-zA-Z0-9_\.\-])+@(\[)?([a-zA-Z0-9_\.\-])*([a-zA-Z09]{2,})\.([a-zA-Z]{2,4}|[0-9]{1,3}\])$/;

Der reguläre Ausdruck besteht aus folgenden Teilen (runde Klammern hervorgehoben):

Listing 21.19: Prüfen einer E-Mail-Adresse (email.html)

Vor dem Klammeraffen dürfen Ziffern, Zahlen, Unterstriche, Punkte und Minuszeichen stehen. Es muss jedoch mindestens ein Zeichen sein (dies gewährleistet das +): ([a-zA-Z0-9_\.\-])+

Dann folgt der Klammeraffe. Beachten Sie, dass dies der einzige Klammeraffe für die E-Mail-Adresse ist. @

Der nächste Abschnitt gibt an, dass an dieser Stelle optional (also keinmal oder einmal mit ?) eine eckige Klammer folgt. Dies fängt alle EMail-Adressen ein, die in dem gültigen Format name@[123.123.123.123] geschrieben sind. (\[)?

 KOMPENDIUM 

JavaScript

669

Kapitel 21

Vollständigkeitsüberprüfung und reguläre Ausdrücke Nun dürfen beliebig viele Zahlen, Ziffern, Unterstriche, Punkte und Minuszeichen folgen. ([a-zA-Z0-9_\.\-])*

Vor dem nächsten Punkt müssen jedoch mindestens zwei Zahlen oder Ziffern für die Second-Level-Domain stehen: ([a-zA-Z0-9]{2,})

Dann folgt der letzte Punkt: \.

und anschließend zwei bis vier Ziffern für die Top-Level-Domain: ([a-zA-Z]{2,4}

oder drei Ziffern für die letzte Zahl der IP-Adresse und die schließende eckige Klammer: |[0-9]{1,3}\])

Auch dieser bereits recht komplexe Ausdruck ist nicht zu umgehen. Er schließt jedoch zumindest keine gültigen E-Mail-Adressen aus und bietet ein meist ausreichendes Maß an Sicherheit.

21.4

Usability

Viele Probleme mit mandatorischen Feldern und der Vollständigkeitsüberprüfung können Sie vermeiden, wenn Sie beim Anlegen des Formulars auf gute Verwendbarkeit achten. Die wichtigsten Regeln sind: Nur tatsächlich notwendige Felder sollten mandatorisch sein. Trennen Sie Angaben, bei denen es Probleme mit dem Format geben könnte. Geburtsdaten lassen sich beispielsweise einfach auf drei Textfelder aufteilen, sodass es keine Verwechslungen mit englischem und deutschem Format, Punkten und Leerzeichen geben ka18. Wenn es nur einige wenige Optionen gibt, fassen Sie diese in einer Auswahlliste zusammen. Dies ist bei der Jahreszahl des Geburtstags sicherlich nicht sinnvoll, aber bei wenigen Optionen wie der Versandmethode nützlich. Beschriften Sie die Felder ausreichend und geben Sie deutlich an, welche mandatorisch sind. 670

 KOMPENDIUM 

JavaScript

Usability

Kapitel 21

Trennen Sie die Submit- und die Reset-Schaltfläche optisch und lokal weit genug voneinander, damit ein versehentliches Anklicken der Schaltflächen keine Folgen hat.14 Strukturieren Sie das Formular in logische Teile. Die Adresse sollte beispielsweise deutlich von bestellten Elementen oder angeforderten Katalogen abgehoben sein. Lassen Sie Platz bzw. Felder für eigene Anmerkungen des Nutzers. Manche Kunden möchten Ihnen weitere Mitteilungen zukommen lassen.

14 Sie können auch bei der Reset-Schaltfläche erst nachfragen (siehe Kapitel 16.2 unter »Schaltflächen« im Abschnitt »Reset« und Listing 16.20)

 KOMPENDIUM 

JavaScript

671

Teil 3 Über den Tellerrand …

Kapitel 22: JavaScript und Sicherheit

675

Kapitel 23: Kommunikation mit der Außenwelt

691

Kapitel 24: JScript .NET

713

22

JavaScript und Sicherheit

Das Thema Sicherheit gehört zu den Top 5 der Computerthemen in den nächsten beiden Jahren, vielleicht steht es sogar an erster Stelle. Das ist gut, sehr gut sogar. Allerdings muss die große Panikmache, die aus manchen Sicherheitsfragen entsteht, insbesondere im Bereich JavaScript relativiert werden. Hier drohen kaum große Sicherheitslecks wie bei Mail-Viren oder dem SQL-Slammer, der die Datenbank MS SQL Server in Massen befallen hat. Für den JavaScript-Programmierer gibt es zwei Bereiche, in denen Sicherheit wichtig ist: Sicherheitslecks in den Browsern und wie der Programmierer mit den Bedenken der Nutzer umgehen sollte. In dieses Themengebiet fallen auch die Zertifikate, denen Nutzer und manche Programmierer nach wie vor kritisch oder unsicher gegenüberstehen. Sicherheit für sein geistiges Eigentum, also für seine Skripten

22.1

Diskussionen und potenzielle Sicherheitslecks

Bei Sicherheitsproblemen muss zunächst geklärt werden, um welche Probleme es sich handelt. Eine einfache Dreiteilung stellt die Probleme im JavaScript- bzw. Browserumfeld bereits sehr gut dar: Das Sicherheitsproblem der Datenspionage, beispielsweise das Feststellen von Surfwegen Wesentlich gefährlicher sind Probleme die den Datenmissbrauch betreffen. Hier werden gewonnene Daten verwendet, beispielsweise Kreditkarteninformationen, um Konten zu plündern. Die gefährlichste Bedrohung ist die Zerstörung von Daten und Dateien auf dem Rechner des Nutzers. Sie ist über den Browser allerdings auch sehr selten anzutreffen.

 KOMPENDIUM 

JavaScript

675

Kapitel 22

JavaScript und Sicherheit

Lecks? Die dargestellten Sicherheitsprobleme schlagen sich in einigen – häufig diskutierten – potenziellen Sicherheitslecks nieder: Cookies1 – insbesondere Third Party Cookies – können es großen Vermarktern ermöglichen, das Surfverhalten zu verfolgen, ohne allerdings die Informationen personalisieren zu können. Der Nutzer kann jedoch in den meisten Browsern Third Party Cookies sperren. Fremdkontrollierte Fenster; wenn der Nutzer mehrere Websites geöffnet hat, könnte ein Skript einer »bösen« Website auf die Seiten von »guten« Anbietern zugreifen und beispielsweise die dort eingetragenen Informationen auslesen. Dies wird allerdings bereits vom Browser verhindert, da er Websites keinen Zugriff auf fremde Fenster – das heißt nicht von der Domain bzw. dem ersten Unterverzeichnis2 geöffnete Fenster – erlaubt. Dieses Prinzip heißt auch Same Origin (selber Ursprung). Zugriff über Java oder ActiveX-Controls. Dieser Zugriff wird über Zertifikate erlaubt und im folgenden Abschnitt ausführlicher behandelt. Viele Aspekte, die Sicherheitsfragen betreffen – wie der Zugriff auf Dateien auf der Festplatte, das Schließen von beliebigen Browserfenstern und das Ausspionieren der History – sind in JavaScript von Anfang an nicht möglich. Eine Sicherheitsdiskussion ist hier nicht erforderlich.3

22.2

Zertifikate

Das Hauptproblem der Zertifikatslösungen ist die unterschiedliche Umsetzung in verschiedenen Browsern. Das Grundprinzip ist immer gleich: Der Nutzer muss ein Zertifikat, also eine Nachfrage in einem modalen Fenster bestätigen, die dem JavaScript-Code erweiterten Zugriff erlaubt. Dieser Zugriff wird dann je nach Browser und benötigten Befehlen in Verbindung mit Java oder ActiveX realisiert. Das Konzept von Microsoft heißt Authenticode und das von Netscape Object Signing.

1 2

3

676

Eine ausführliche Diskussion der Problematik finden Sie in Kapitel 17.1 im Abschnitt »Sicherheit« Diese Regelung schließt Missbrauch bei Hostern aus, die keine Domainnamen, sondern nur Verzeichnisse vergeben. http://www.hostername.de/kunde1 hat also keinen Zugriff auf Fenster, die http://www.hostername.de/kunde2 geöffnet haben. Die einzige Ausnahme sind die Fähigkeiten, die sich mit Zertifikaten nachrüsten lassen.

 KOMPENDIUM 

JavaScript

Zertifikate

Kapitel 22

Die Zertifikatslösungen werden nicht nur für JavaScript-Skripten verwendet, sondern auch, um das Herunterladen von ausführbaren Dateien, Plugins und ActiveX-Controls zu gewährleisten.

Grundprinzip Das Grundprinzip der Zertifizierung ist bei beiden Technologien gleich und verläuft aus der Sicht des JavaScript-Programmierers in folgenden Schritten: 1.

Sie beantragen ein Zertifikat bei einer der Gesellschaften, die das Recht zum Zertifizieren haben. Eine solche Gesellschaft heißt Certificate Authority. Abbildung 22.1: VeriSign ist eine der bekanntesten Zertifizierungsfirmen, die für verschiedene Technologien Zertifikate vergibt (http://www.

verisign.com/ products/ signing/ index.html).

Im Netscape Navigator und im Mozilla finden Sie ein eigenes Register AUSSTELLER mit den CA-Unternehmen. Diese Zertifikate werden mit dem Browser mit installiert. Für die deutsche Variante ab Netscape 6 ist dies: BEAREITEN/EINSTELLUNGEN, PRIVATSPHÄRE & SICHERHEIT/ZERTIFIKATE und ein Anklicken der Schaltfläche ZERTIFIKATE VERWALTEN. In den anderen Registerkarten sehen Sie die übrigen Zertifikate.

 KOMPENDIUM 

JavaScript

677

Kapitel 22

JavaScript und Sicherheit

Abbildung 22.2: Zertifikate der Aussteller im Netscape Navigator 7

Im Internet Explorer 6 heißt die entsprechende Registerkarte VERTRAUENSWÜRDIGE STAMMZERTIFIZIERUNGSSTELLEN. 2.

Daraufhin erhalten Sie vom CA-Unternehmen ein Zertifikat in einem standardisierten Format. Es enthält eine digitale Unterschrift. Um das Zertifikat abzusichern, wird es verschlüsselt.

Zertifikate werden in vier Stufen, so genannten Classes vergeben. Die Stufen reichen von 1 (sehr schwach) bis 4 (extrem geprüft). Je höher die Stufe, desto mehr kostet die Zertifizierung. 3.

Der Zertifizierende, also Sie als Programmierer oder Firma, erhält einen Schlüssel, mit dem er mithilfe eines Werkzeugs sein Skript verschlüsseln ka18. Das Skript lässt sich nun nicht mehr ändern – jede Änderung macht es ungültig. Es ist nun ein signiertes Skript.

4.

Als Nächstes bauen Sie das Zertifikat in Ihre Webseite ein.

5.

Der Nutzer muss das Zertifikat bestätigen. Ob er Ihnen vertraut, lässt sich trotz Zertifizierung nicht vorhersagen.

Insbesondere in Deutschland herrscht nach wie vor eine große Unsicherheit bei den Nutzern. Vielen ist der Zertifizierungsprozess nicht klar und sie werden in den meisten Fällen ein Zertifikat – vor allem einer kleineren Firma – lieber zurückweisen, wenn Sie die Informationen für entbehrlich halten.

678

 KOMPENDIUM 

JavaScript

Zertifikate

Kapitel 22

Unterschiede gibt es in den folgenden Schritten vor allem dabei, was die Browser mit den Zertifikaten anstellen, welche Technologien zum Zertifizieren verwendet werden und wie die praktische Umsetzung aussieht.

Internet Explorer Der Internet Explorer verwendet für sein Sicherheitskonzept vier Standardsicherheitszonen (siehe EXTRAS/INTERNETOPTIONEN/SICHERHEIT):4 Internet mit höheren Sicherheitsstandards, lokales Internet mit geringeren Standards sowie vertrauenswürdige und eingeschränkte Sites. Kontrolle erhalten Sie über die Option STUFE ANPASSEN. Hier können Sie steuern, ob signierte ActiveX-Controls direkt ausgeführt werden und vieles mehr.5 Das Zertifizierungskonzept von Microsoft – vorhanden seit Internet Explorer 3 und ausgeweitet in Version 46 – dient allerdings nicht dem JavaScriptbzw. JScript-Programmierer, sondern anderen heruntergeladenen Elementen wie beispielsweise Applets oder ActiveX-Objekte. Eine vergleichbare Signierung von externen js-Dateien wie beim Netscape Navigator gibt es nicht. Die Signatur von ActiveX-Controls erfolgt mit dem ActiveX SDK, das unter http://msdn.microsoft.com/code/default.asp?url=/code/sample.asp?url=/msdnfiles/027/000/223/msdncompositedoc.xml erhältlich ist.

Da ActiveX-Objekte Teil der Windows- und nicht der JavaScript-Programmierung sind, verzichten wir hier auf eine Einführung. Der JavaScript-Zugriff auf ActiveX-Objekte funktioniert mit dem ActiveXObject, zu dem Sie unter http://msdn.microsoft.com/library/default.asp?url=/library/en-us/script56/ html/js56jsobjactivexobject.asp eine Beschreibung finden. Weitere Details zu Authenticode können Sie unter http://msdn.microsoft.com/library/?url=/ workshop/security/authcode/intro_authenticode.asp nachlesen. Die ActiveXControls werden unter http://www.microsoft.com/com/tech/activex.asp und in der MSDN unter http://msdn.microsoft.com/library/default.asp?url=/workshop/ components/activex/intro.asp beschrieben.

4

5 6

Weitere Einstellungen zu Zertifikaten und Sicherheit finden Sie in den Optionen unter ERWEITERT im Bereich SICHERHEIT. Hier können Sie beispielsweise einstellen, das geprüft werden soll, ob Zertifikate ungültig geworden sind. Eine ausführliche Beschreibung der Optionen finden Sie unter http://www.microsoft.com/technet/treeview/default.asp?url=/TechNet/prodtechnol/ie/reskit/ie5/part1/ch06digi.asp. und funktional in weiten Teilen auf Windows beschränkt, da viele der damit gestarteten Funktionalitäten sehr betriebssystemnah sind.

 KOMPENDIUM 

JavaScript

679

Kapitel 22

JavaScript und Sicherheit

Netscape Navigator und Mozilla Der Netscape Navigator 4.x hat die Technologie des signierten Skripts mit Zertifikat hoffähig gemacht. Nachdem das Zertifikat überprüft und vom Nutzer angenommen wurde, kann der JavaScript-Programmierer hier über Java-Methoden auf zusätzliche Funktionen zugreifen. Sogar die Verwendung von Java-Klassen ist direkt möglich. Warnmeldungen zu Sicherheitsfragen, beispielsweise beim Versenden eines E-Mail-Formulars mit mailto:, fallen weg und auch das Schließen eines Fensters ist nicht mehr an das Skript gebunden, von dem aus es geöffnet wurde. Signieren Signierte Skripten sind für Netscape und Mozilla jar-Archive. Die Umwandlung in die jar-Archive erfolgt mit von Netscape zur Verfügung gestellten Tools. Dazu benötigen Sie die Schlüssel, die Ihnen von der Zertifizierungsstelle zur Verfügung gestellt wurden. Netscape und Mozilla stellen für das Erzeugen von jar-Archiven das Werkzeug SignTool 1.3zur Verfügung.7 Die Verankerung im Quellcode erfolgt je nach Browser unterschiedlich. Der Netscape Navigator 4.x erfordert den Aufruf des Archivs mit dem Attribut archive im <script>-Tag. Der Skriptaufruf benötigt außerdem unbedingt eine ID: <script language="JavaScript" archive="verzeichnis/skript.jar" id="1">

Neuere Netscapes und der Mozilla verwenden dagegen folgende URL, um auf das signierte Skript zuzugreifen. jar:http://www.domain.de/verzeichnis/skript.jar!/index.html

Mehr Informationen erhalten Sie unter http://www.mozilla.org/projects/ security/components/signed-scripts.html.

Unsignierte Skripte testen Wenn Sie mit einer lokalen Datei arbeiten (file:), können Sie sie einfach in den Browser ziehen und dieser fragt dann nach, ob die Datei erweiterte Zugriffsrechte erhalten soll. Netscape 4.x gibt zusätzlich an, dass es sich um ein unsigniertes Skript handelt. Dies funktioniert nur, solange die Datei lokal aufgerufen wird. 7

680

siehe http://developer.netscape.com/software/signedobj/jarpack.html

 KOMPENDIUM 

JavaScript

Zertifikate

Kapitel 22

Bei einer Datei vom Server – auch einem Testserver (localhost) – funktioniert dies nicht. Hier können Sie mit Codebase principal diese Nachfrage auch für unsignierte Skripten erzwingen. Die Einstellung funktioniert für Netscape 4.x und neuere Versionen leicht unterschiedlich: 1.

Beenden Sie den Browser als Erstes.

2.

Suchen Sie bei Netscape Navigator 4.x nach einer Datei pref.js. Für den Netscape Navigator ab Version 6 heißt die Datei all.js.

3.

Öffnen Sie die Datei in einem Texteditor.

4.

Fügen Sie nun für den Netscape Navigator 4.x folgende Zeile an das Ende der Datei ein: user_pref("signed.applets.codebase_principal_support", true);

5.

Für den Netscape Navigator ab Version 6 suchen Sie nach folgender Zeile: pref("signed.applets.codebase_principal_support", false);

6.

und ändern false in true. Abbildung 22.3: Für den Netscape Navigator 7 Codebase principal ändern.

7.

Starten Sie anschließend den Browser neu. Beachten Sie, dass neuere Versionen des Netscape Navigators gelegentlich mit Quick Launch aktiv bleiben. Sie sollten den Browser zu Beginn komplett beenden, damit die Änderungen wirksam werden.

Mit diesen Einstellungen können Sie testen, ohne eine Signatur zu benötigen.

 KOMPENDIUM 

JavaScript

681

Kapitel 22

JavaScript und Sicherheit Das folgende Beispiel kennen Sie bereits aus Kapitel 15 »Fenster«. Es öffnet ein neues Fenster in voller Größe des Bildschirms ohne Taskleiste und Rahmen. Das Skript verlangt das Privileg UniversalBrowserWrite, das den Zugriff auf normalerweise unzugängliche Browsereinstellungen erlaubt. netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserWrite");

Diese Anweisungen sind Java-Klassen und Methoden. Dies hat auch einen Grund. Ursprünglich wurde das Sicherheitssystem mit signierten Skripten von Netscape für die Java-Unterstützung ins Leben gerufen, die damit gefährliche Aktionen wie Dateizugriffe problemlos unterstützt hätte. Auch heute noch können Sie mit signierten Skripten auf Java-Klassen und Methoden zugreifen. Damit ist beispielsweise ein Zugriff auf java.io.File für den Dateizugriff möglich. Die Bitte um Privilegien muss, nachdem sie genutzt wurde, wieder beendet werden: netscape.security.PrivilegeManager.disablePrivilege("UniversalBrowserWrite");

Halten Sie den Code-Bereich, für den Sie erweiterte Rechte beanspruchen, möglichst klein. Die Methode revertPrivilege() setzt ein Recht temporär außer Kraft. Hier der vollständige Code: Listing 22.1: Erweiterte Rechte mit signierten Skripten (rechte.html)

<script language="JavaScript">
//-->

682

 KOMPENDIUM 

JavaScript

Zertifikate

Kapitel 22

Hauser und Wenz Abbildung 22.4: Das Skript fordert Rechte an.

Abbildung 22.5: Werden diese verweigert, meldet die Konsole einen Fehler in der JavaMethode enablePrivilege.

Die folgende Tabelle gibt eine Übersicht über wichtige Rechte, die Sie beantragen können. Da für jedes Recht ein neuer Methodenaufruf und eine erneute Bestätigung des Nutzers notwendig ist, gibt es auch übergeordnete Privilegien wie UniversalBrowserAccess, das beispielsweise UniversalBrowserRead und UniversalBrowserWrite enthält. Privileg

Beschreibung

UniversalBrowserRead

Geschützte Browserinformationen auslesen. Risiko: mittel

UniversalBrowserWrite

Geschütze Browserinformationen setzen. Risiko: hoch

UniversalBrowserAccess

Voller Zugriff auf Browserinformationen. Risiko: hoch

UniversalXPConnect

Zugriff auf die Browser-APIs über XPConnect. Risiko: hoch

UniversalPreferencesRead

Auslesen der Voreinstellungen. Risiko: mittel

 KOMPENDIUM 

JavaScript

Tabelle 22.1: Zugriffsrechte für signierte Skripten

683

Kapitel 22 Tabelle 22.1: Zugriffsrechte für signierte Skripten (Forts.)

JavaScript und Sicherheit

Privileg

Beschreibung

UniversalPreferencesWrite

Setzen von Voreinstellungen. Risiko: hoch

UniversalFileRead

Auslesen von lokalen Dateien. Risiko: hoch

UniversalFileWrite

Schreiben von lokalen Dateien. Risiko: hoch

UniversalFileAccess

Voller Zugriff auf lokale Dateien. Risiko: hoch

UniversalSendMail

Mails frei aus dem Skript und ohne Fehlermeldung versendbar. Risiko: mittel

Andere Browser Opera unterstützt Zertifikate nach dem Standard X509, bietet allerdings keinen darüber hinausgehenden verbesserten Zugriff für JavaScript-Skripten und kein Konzept mit signierten Skripten. Ebenso verhält es sich im Konqueror.

Fazit Für JavaScript-Programmierer bieten signierte Skripten und Zertifikate zwar viele Möglichkeiten, von denen sie schon immer geträumt haben. Dies wird allerdings mit der Annahme erkauft, dass die Nutzer Ihren Sicherheitsbekundungen glauben werden. Dies und der erhebliche Aufwand, der zur Zertifizierung und für die unterschiedlichen Browser betrieben werden muss8, lässt diese Technologien nur für spezielle Anwendungen oder sonstige ausführbare Software, in den seltensten Fällen aber für JavaScriptSkripten sinnvoll erscheinen.

22.3

Skripten absichern

Jeder hat vermutlich schon einmal mit ANSICHT/QUELLCODE, ANZEIGEN/ QUELLTEXT oder der rechten Maustaste einen Blick in den Quellcode einer fremden Seite geworfen, sei es, weil ihm einige Effekte gefallen haben oder er irgendetwas besonders schlimm fand. Dieser Tatbestand an sich ist noch kein Problem, allerdings bekommen viele Programmierer – teils zu Recht – Schweißausbrüche, weil sie Tage in eine Anwendung investiert haben und andere sie in ein paar Minuten klauen.

8

Die Zertifikate selbst lassen sich allerdings relativ einfach »umrüsten« (siehe http://www. thawte.com/html/SUPPORT/devel/multi.html). Allein der Zugriff über signierte Skripten und Java- oder ActiveX-Objekte ist sehr unterschiedlich.

684

 KOMPENDIUM 

JavaScript

Skripten absichern

Kapitel 22

So einfach mag es zwar nicht sein, dennoch gibt es viele Gründe, die eigenen Skripten zu schützen. Dieser Abschnitt zeigt Ihnen, wie Sie sich schützen und warum es keinen perfekten Schutz gibt. Alle Schutzmethoden, die mit JavaScript funktionieren, lassen sich theoretisch ausschalten, indem JavaScript deaktiviert wird. Seiten ohne JavaScript sollten also theoretisch nicht in den Genuss »geschützter« Seiten kommen.

Rechte Maustaste unterbinden Eine Schutzidee ist, die rechte Maustaste zu unterbinden und stattdessen eine Meldung auszugeben. Dafür gibt es ein eigenes Ereignis onContextmenu. Wenn Sie diesem Ereignis den Wert false zurückliefern, wird das Kontextmenü nicht angezeigt.

Listing 22.2: onContextmenu

(oncontextmenu.html)

NS4.x NS6
a.

NS7

IE4 IE5







a

IE5.5 IE6





O7

M1

K3

Tabelle 22.2: onContextmenu




nicht beim Mac

Leider funktioniert onContextmenu nicht in allen Browsern. Daher müssen Sie für die anderen Browser einen komplizierteren Umweg basteln, der eine Warnmeldung ausgibt. Das Beispiel besteht aus drei Teilen: Die Funktion start() fängt beim Laden der Seite die entsprechenden Mausklickereignisse ab. Die Funktion meldung() gibt eine Meldung aus und liefert false zurück, wenn die Maustaste 2 oder höher gedrückt wurde. Das Ereignis onContextmenu unterstützt die Browser, die es verstehen. Wenn es fehlt, würden diese Browser trotz Warnmeldung ein Kontextmenü anzeigen. Hier der komplette Quellcode: <script language="JavaScript">
 KOMPENDIUM 

JavaScript

Listing 22.3: Unterdrückung der rechten Maustaste (rechte_maustaste. html)

685

Kapitel 22

JavaScript und Sicherheit window.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP) window.onmousedown=meldung; window.onmouseup=meldung; } else if (document.all) { document.onmouseup=meldung; window.onmouseup=meldung; } } function meldung(e) { if (document.all) { if (event.button >= 2) { alert("Kontext verboten"); return false; } } else if (window.captureEvents){ if (e.which >= 2) { alert("Kontext verboten"); return false; } } else { return true; } }

//-->

Dieses Skript scheitert im Opera 7, da er die linke und die rechte Maustaste beide mit der Nummer 1 versieht. Die Unterdrückung der rechten Maustaste ist leider nicht sehr wirksam. Die Menübefehle können zwar entfernt werden, indem das Fenster ohne Menüleiste geöffnet wird, dennoch bleibt das Skript im Browsercache. Das Tastenkürzel (Strg) + (U) ruft außerdem im Netscape Navigator direkt den Quellcode auf. Auch deaktiviertes JavaScript oder die Eingabe VIEWSOURCE:URL im Internet Explorer hebeln den Schutz aus.

Code in Frames auslagern Die Idee ist bestechend: Sie legen den JavaScript-Code in einen unsichtbaren Frame von einem oder null Pixel Höhe9 und greifen darauf von dem Hauptfenster aus zu (siehe Kapitel 18 »Frames«). Die rechte Maustaste geht nun ins Leere und auch der Aufruf des Seitenquelltextes bringt kein Resultat.

9

686

Nicht in allen Browsern, deswegen besser ein Pixel.

 KOMPENDIUM 

JavaScript

Skripten absichern

Kapitel 22

Einige Probleme bleiben allerdings bestehen. Jeder, der sich einigermaßen mit HTML auskennt, muss nur den Quelltext des Framesets betrachten und dann den unsichtbaren Frame getrennt öffnen. Aber auch hier fällt dem findigen JavaScript-Programmierer etwas ein. Er erzwingt das Laden einfach immer im Frameset (siehe Kapitel 18.3 »Frames erzwingen und vermeiden«). Dieser Ansatz ist bereits relativ Erfolg versprechend. Er kann allerdings ausgehebelt werden, wenn der Nutzer auf die Dateien im Browsercache zugreift. Der Browsercache befindet sich meist auf der Festplatte. Für den Internet Explorer sollten Sie nach einem Ordner Temporary Internet Files suchen. Der Netscape-Browser und Mozilla erlauben über die Angabe about:cache Zugriff auf die Inhalte des Caches. Dort können Sie auch das lokale Verzeichnis auf der Festplatte nachlesen. about:cache funktioniert außerdem im Opera. Wenn Sie verhindern wollen, dass ein Dokument in den Cache auf der Festplatte gelegt wird, gibt es zwei Wege: Sie setzen mit einer serverseitigen Programmiersprache den HTTP-Header mit folgender Angabe: Pragma: no-cahce

Sie verwenden die entsprechende Anweisung im <meta>-Tag, die jedoch nicht in allen Browsern funktioniert: <meta http-equiv="pragma" content="no-cache">

Dies hilft allerdings nur eingeschränkt, da der Netscape Navigator und der Opera dennoch erlauben, das Dokument aus dem Cache heraus abzuspeichern.

Externe Dateien Das Auslagern von Quellcode in externe Dateien10 macht den Code nicht nur modular auf verschiedenen Systemen verwendbar, sondern hält auch einige Nutzer davon ab, ihn direkt zu klauen. Eine externe JavaScript-Datei hat die Dateiendung .js und wer sie haben möchte, muss in den Quellcode, dort den Verweis auf die externe Datei suchen und den Pfad in die Adressleiste des Browsers eintippen. Der Internet Explorer fragt dann sofort, ob er die Datei speichern oder ausführen soll. Dies macht es dem Besucher sehr einfach. 10 siehe Kapitel 2 »JavaScript in HTML«, Abschnitt 2.1 unter »Externes JavaScript«

 KOMPENDIUM 

JavaScript

687

Kapitel 22

JavaScript und Sicherheit

Abbildung 22.6: Der Cache des Netscape Navigators 7

Netscape Navigator und Mozilla interpretieren die Datei in den meisten Fällen sofort. Dort finden Sie die Dateien im Browsercache.

Quellcode schwer lesbar machen Nehmen wir an, Sie haben guten und aufwändigen JavaScript-Code geschrieben und wollen nicht, dass er von jedermann geklaut wird. Ihnen ist aber klar, dass gewiefte JavaScript-Programmierer Ihren Quellcode auch bekommen, obwohl Sie Ihnen den Zugang mit den im vorhergehenden Abschnitt beschriebenen Methoden erschwert haben. In diesem Fall ist es nahe liegend, den Code so schwer lesbar wie möglich zu machen. Dazu gibt es einige Tricks, die Sie mit einem guten Texteditor sehr schnell ausführen können: Einrückungen entfernen Unnötige Leerzeichen entfernen Kommentare entfernen, die Sie zur Information und Übersicht im Code haben

688

 KOMPENDIUM 

JavaScript

Skripten absichern

Kapitel 22

Besonders gemeine Taktiker fügen zusätzlich Dummy-Funktionen ein und benennen Variablen, Funktionen und eigene Objekte sinnlos um. Hier sollten Sie vorsichtig sein und häufig testen, damit das Skript nicht unbrauchbar wird. Fügen Sie charakteristische Elemente oder unsichtbare Zeichenketten in den HTML-Code ein, die Sie dann über eine Suche in einer Suchmaschine wie Google (http://www.google.de) wieder finden können. Sie müssen natürlich die Originalversion des Dokuments behalten, sonst haben Sie sich selbst ausgetrickst.

Quellcode verschlüsseln Die Code-Verschlüsselung muss bei clientseitigem JavaScript natürlich auch clientseitig mit JavaScript erfolgen. Das Prinzip ist immer gleich: Der Code – meist inklusive HTML-Quellcode – wird mit einem bestimmten Algorithmus codiert. Sie fügen den codierten Code in eine Datei ein und decodieren diesen Code mit einer JavaScript-Funktion. Diese Codierung müssen Sie natürlich nicht von Hand vornehmen. Dafür gibt es Freeware und kommerzielle Software, beispielsweise HTML Guard (http:// www.aw-soft.de/htmlguard.html, 15 €), HTML Guardian (http://www.protware. com/, ca. 40 US $) und Webcrypt Pro (http://www.moonlight-software.com/ webcrypt.htm, ca. 30 US $), das beispielsweise auch Grafiken in Einzelteile zerlegt, damit sie nicht zusammen gespeichert werden können. Sogar von Microsoft gibt es eine eigene, kostenfreie Lösung, die allerdings nur mit dem Internet Explorer funktioniert. Es ist der Microsoft Script Encoder, der zur Microsoft Scripting Engine gehört. Die Beschreibung finden Sie unter http://msdn.microsoft.com/library/default.asp?url=/library/ en-us/script56/html/seconscriptencoderoverview.asp, die Engine unter http:// msdn.microsoft.com/downloads/default.asp?URL=/downloads/sample.asp?url=/msdnfiles/027/001/733/msdncompositedoc.xml.

Das Problem dabei ist, dass der Code irgendwie wieder in der Originalfassung in den Browser gelangen muss. Das heißt, es gibt eine zugehörige document.write()- oder eval()-Anweisung, in der der Code decodiert und ausgegeben wird. Wenn ein Programmierer das Skript an dieser Stelle umschreibt und die Ausgabe beispielsweise in ein Textfeld leitet, hat er die Codierung umgangen. Ein zweites Problem besteht darin, dass der Nutzer unbedingt JavaScript benötigt, damit er die Seite sehen kann.

 KOMPENDIUM 

JavaScript

689

Kapitel 22

JavaScript und Sicherheit

Sichern oder nicht? Lassen Sie sich Ihren Code klauen! Denn für jede Verschlüsselung gibt es eine Entschlüsselung. Und diejenigen, die diese Entschlüsselung nicht kennen, sind Ihnen – als mittlerweile versiertem JavaScript-Programmierer – ohnehin nicht gewachsen und können Ihren Quellcode sicherlich kaum auf die eigene Seite übertragen. Für die meisten JavaScript-Probleme gibt es im Netz hunderte von – mehr oder meist weniger – guten Lösungen. Das Besondere an Ihrer Lösung ist, dass Sie sie auf Ihre Bedürfnisse angepasst haben und das lässt sich nicht klauen. Sie können durchaus auch auf den Open Source-Gedanken in der Webgemeinschaft vertrauen. Wenn Sie ein gutes Skript unter Ihrem Namen zur Verfügung stellen und nur um eine Erwähnung bitten und Ihre Urheberschaft in einen Kommentar in den Quellcode schreiben, werden das die meisten Entwickler zu schätzen wissen und sich daran halten. Ein Copyright-Vermerk macht vielen erst klar, dass sie geistiges Eigentum vor sich haben.11 Von dieser Ansicht mag es Ausnahmen geben. Eine ist vielleicht ein aufwändig per JavaScript gestaltetes Spiel, das Sie exklusiv verwenden möchten. Sollte es sie tatsächlich stören, wenn es irgendwo in den Tiefen des Webs auftaucht, dann verwenden Sie am besten alle erwähnten Methoden, wobei für die Verschlüsselung ein automatisiertes Tool am besten geeignet ist. Sie sollten hier so wenig wie möglich Arbeitsschritte benötigen, Ihren Originalcode umzuwandeln, denn sonst werden Updates am Code zur Qual.

22.4

Passwortschutz mit JavaScript

Der clientseitige Passwortschutz mit JavaScript hat immer ein Problem. Irgendwo steht das Passwort und/oder die URL des geschützten Bereichs im Quellcode. Und wie Sie in Kapitel 22.3 »Skripten absichern« gesehen haben, kann der Code nicht vollständig geschützt werden. Speichert man das Passwort in ein Cookie, kann es auch dort vom Nutzer ausgelesen werden. Was bedeutet dies für eine Passwortüberprüfung in JavaScript? Sie ist immer knackbar. Das macht sie unsinnig. Sie sollten also auf eine serverseitige Passwortüberprüfung zurückgreifen. Serverseitig haben Sie außerdem die Möglichkeit das Sessionmanagement einzusetzen. Eine Session ist eine Sitzung. Der Nutzer kann anhand seiner Session-ID nach einem Login über den Verlauf einer Sitzung als eingeloggt festgestellt werden. Das Passwort kann in einer Datei oder Datenbank auf dem Server liegen. Es kann also vom Nutzer nicht ausgelesen werden. 11 Siehe hierzu auch den durchaus unterhaltsamen Link http://www.templetons.com/brad/ copymyths.html.

690

 KOMPENDIUM 

JavaScript

23

Kommunikation mit der Außenwelt

Bis jetzt stand JavaScript im Zentrum der Aufmerksamkeit. Das soll zwar auch in diesem Kapitel so bleiben. Dazu gesellt sich allerdings noch ein zweiter wichtiger Kommunikationspartner. Den Anfang macht Java. Java-Applets sind zwar lange nicht mehr so populär wie vor einigen Jahren, es bleibt dennoch interessant zu sehen, wie JavaScript auf Java-Klassen und -Methoden zugreifen und damit die eigenen Möglichkeiten erweitern kann. Die Steuerung von Sound und Multimedia ist immer eine Steuerung von Plugins in den Browsern, die für das Abspielen solcher Dateien notwendig sind. Diese Steuerung erlaubt zwar einiges, unterscheidet sich aber in den Browsern und auf verschiedenen Betriebssystemen stark. Zum Schluss sehen Sie, wie Flash mit JavaScript interagieren kann. Nicht nur dass die Skriptsprache von Flash, ActionScript, ebenfalls an ECMAScript angelehnt ist, es gibt auch Kommunikationsmöglichkeiten zwischen dem Flash-Player, also ActionScript, und JavaScript im Browser.

23.1

Java

Serverseitig, im Großrechnerbereich und bei Firmenkunden gewinnt Java, die Programmiersprache der Firma Sun, immer mehr an Bedeutung. Clientseitig sieht das ein wenig anders aus: Java-Applets benötigen eine Java Virtual Machine. Diese ist zwar bei vielen Plattformen und Betriebssystemen dabei1, allerdings sind die kleinen Applet-Fenster im Browserfenster nicht sehr flexibel und die Performance ist manchmal nicht so gut. Die Performance-Schwäche von gerade älteren Java-Versionen hat einen einfachen technischen Grund: Der Java-Code muss von der Virtual Machine noch zur Laufzeit kompiliert werden. Dieser Vorgang kostet einige Zeit. Dennoch sind Java-Applets für manche besondere Anwendungen durchaus eine Überlegung wert.

1

Eine Ausnahme ist hier beispielsweise Windows XP, da Sun und Microsoft diesbezüglich schon länger in einem Rechtsstreit liegen.

 KOMPENDIUM 

JavaScript

691

Kapitel 23

Kommunikation mit der Außenwelt Mit JavaScript haben Sie drei Kommunikationsmöglichkeiten mit Java2: Sie können Java-Klassen direkt aus JavaScript aufrufen. Dies funktioniert über die Technologie Liveconnect, die jedoch nur der Netscape Navigator und der Mozilla unterstützen. Sie haben die Möglichkeit, per JavaScript auf Methoden in Java-Applets zuzugreifen. Sie können aus Java auf JavaScript-Objekte, beispielsweise das Browserfenster, zugreifen. Diese drei Möglichkeiten finden Sie in den nächsten Abschnitten.

Liveconnect Liveconnect, vollständig integriert im Netscape Navigator 4.x, erlaubt den Zugriff auf Java-Klassen, die direkt in den Browser integriert sind. Der Zugriff erfolgt immer über die Basisklasse Packages.java, die in Kurzform auch java geschrieben werden kann. Liveconnect ist beschränkt auf den Netscape Navigator und Mozilla. Version 4.6 hat kein Liveconnect integriert, in Version 6 des Browsers gibt es keine Implementierung. Sie wurde mit der Unterversion 6.1 nachgeholt. Das folgende Beispiel zeigt, wie der Konstruktor new ein eigenes Java-Fenster als Objekt erzeugt: Listing 23.1: Auf Java ohne Applet zugreifen (java_ohne_applet. html)

<script language="JavaScript">
} //--> Java-Applet-Fenster öffnen

2

692

Ausgenommen ist hier serverseitiges Java, beispielsweise in Form von Enterprise Java Beans.

 KOMPENDIUM 

JavaScript

Java

Kapitel 23 Abbildung 23.1: Das Java-Fenster

Manche Klassen erlauben nur den Zugriff über signierte Skripte3. Dazu gehört java.io.file, das den Zugriff auf lokale Dateien ermöglicht. Hierzu ist das Privileg UniversalFileAccess notwendig.

Zugriff auf Java-Applets Der zweite Kommunikationsweg zwischen JavaScript und Java ist der Zugriff von JavaScript auf Methoden des Java-Applets. Liveconnect und ActiveX heißen hier die entsprechenden Technologien von Netscape bzw. Internet Explorer. Dankenswerterweise funktionieren beide sehr ähnlich, deswegen ist keine Browserunterscheidung notwendig. Ein Applet wird mit dem -Tag in den Code eingebunden: Kein Java vorhanden

Verwenden Sie ein Mini-Java-Applet mit einer Größe von 1*1 Pixel, wenn Sie Java-Klassen und -Methoden benötigen ohne ein sichtbares Applet auf der Seite. Der Zugriff darauf erfolgt entweder über die applets-Kollektion und den Index: document.applets[0]

oder über die Kollektion und den Namen:

3

Siehe Kapitel 22 »JavaScript und Sicherheit«

 KOMPENDIUM 

JavaScript

693

Kapitel 23

Kommunikation mit der Außenwelt document.applets["Applet1"]

oder direkt über den Applet-Namen. document.Applet1

Das eigentlich Interessante ist der Zugriff auf Methoden innerhalb des Applets: Mit document.Applet1.Methode();

erhalten Sie Zugriff auf alle Methoden des Applets, die als public definiert wurden. Dies sieht in Java folgendermaßen aus: public class { public void Methode() { Anweisungen; } }

Beim Methoden-Aufruf können durchaus auch Parameter übergeben werden: document.Applet1.Methode(Parameter1, Parameter2);

Bei Parametern erfolgt eine (automatische) Datentyp-Umwandlung, die in der Praxis meist problemlos abläuft: JavaScript-Objekte werden in JSObjectObjekte umgewandelt, Zahlen (Datentyp Number) in Float. Java-Applets steuern Ein Java-Applet muss kompiliert werden. Dazu benötigen Sie das Java SDK, das mittlerweile in der Version 1.4 vorliegt. Da allerdings die meisten Browser mit einer älteren Version (oder gar keiner) vorlieb nehmen müssen, sollten Sie auf Nummer sicher gehen. Am sichersten erscheint dabei das Java Development Kit 1.1.8. Sie finden es auf der CD-ROM im Ordner software/javasdk und unter http://www.sun.com im Download-Archiv. Im Folgenden sehen Sie ein Beispiel aus dem Java Development Kit. Sie finden es im Programmordner (meist jdk1.1.8) unter demo/clock. Die Uhr hat den Namen clock2.class.4 .class ist die Dateiendung für ein kompiliertes 4

694

Die Uhr findet sich auch in den neueren Versionen des Development-Kits im demo-Ordner. Allerdings besitzt sie teilweise unterschiedliche Namen, im SDK 1.4 beispielsweise nur Clock.class.

 KOMPENDIUM 

JavaScript

Java

Kapitel 23

Java-Applet. Der Quellcode ist ebenfalls vorhanden und hat immer die Endung .java. Natürlich können Sie auch auf ein eigenes Java-Applet zurückgreifen, dessen öffentliche Methoden Sie kennen. Die Uhr besitzt zwei öffentliche Methoden start() und stop(),deren Namen schon ihre Aufgabe verraten: Sie lassen die Uhr laufen und halten sie an. Die Verwendung dieser Methoden mit JavaScript ist also unproblematisch: <script language="JavaScript">
Listing 23.2: Ein Java-Applet steuern (java_applet.html)

document.uhr.start();

} function stop() { document.uhr.stop();

} //-->
Uhr starten
Uhr stoppen Abbildung 23.2: Das Java-Applet wird per JavaScript »ferngesteuert«.

 KOMPENDIUM 

JavaScript

695

Kapitel 23

Kommunikation mit der Außenwelt Java-Unterstützung Mit dem Zugriff auf Java-Applets gibt es zwei Probleme: Die Frage, ob eine Java Virtual Machine vorhanden ist. Die Java-Unterstützung prüft die Funktion navigator.javaEnabled(). Sie kann also zu einer Fallunterscheidung dienen, liefert allerdings nicht die Versionsnummer, sondern nur einen Boolean. Das zweite Problem ist, dass Methodenaufrufe ins Leere gehen, wenn das Applet noch nicht geladen ist. Auch dies kann über eine Prüfung abgefangen werden, denn das Applet liefert den Wert 0, wenn es noch nicht vollständig geladen ist. Folgende Zeile dient zur Überprüfung: if(document.Appletname != null) document.Appletname.Methode();

Java zu JavaScript Der andere Weg von Java zu JavaScript bedarf ebenfalls einiger vorbereitender Schritte: Java benötigt zusätzliche Pakete, um auf JavaScript zuzugreifen. Diese Pakete müssen Sie in Java importieren: import netscape.javascript.*;

Schwieriger ist es, die Pakete dem Compiler bekannt zu machen. Es gibt hier mehrere Wege, wovon nur einer beschrieben werden soll: 1.

Die zwei benötigten Klassen netscape.javascript.JSObject und netscape.javascript.JSException werden beispielsweise beim Netscape Navigator 4.x mitgeliefert. Sie sind im Paket java40.jar versteckt.

2.

Dieses Paket muss dem Compiler beim Kompiliervorgang angegeben werden. Am einfachsten erfolgt das mit dem classpath.

3.

Nehmen Sie beispielsweise an, Sie hätten das Paket in das Unterverzeichnis lib der JDK (jdk1.1.8) gelegt und die Datei befände sich im bin-Verzeichnis5: javac –classpath ..\lib\java40.jar ausgabe.java

5

696

Dies dient der Vereinfachung, normalerweise haben Sie längere Pfadangaben.

 KOMPENDIUM 

JavaScript

Java

Kapitel 23

Sollten Sie einen anderen Compiler oder eine andere Konfiguration verwenden, unterscheiden sich natürlich die Pfade. Egal, wo Sie die Bibliotheken für classpath abgelegt haben, der Browser findet sie beim Anwenden des Applets, wenn sie beim Browser mitgeliefert werden. Das Java-Applet benötigt die Erlaubnis für den Skript-Zugriff. Dieser wird über das Attribut mayscript des -Tags gesteuert. Kein Java vorhanden

Applet und Einbau Ein einfaches Beispiel verdeutlicht die Java-zu-JavaScript-Kommunikation. Das Herzstück ist die JSObject-Klasse in Java. Sie erlaubt den Zugriff auf alle JavaScript-Objekte. Der erste Schritt dazu ist immer die Methode getWindow(Applet), die das übergeordnete window-Objekt des Java-Applets liefert. Mit der Methode eval("String") kann dann JavaScript-Code ausgeführt werden. Im Beispiel wird sie verwendet, um eine einfache Ausgabe mit alert() zu starten. Mit der Funktion getMember(Eigenschaft) haben Sie die Möglichkeit, auf Eigenschaften von Objekten zuzugreifen. Folgende zwei Zeilen realisieren in Java den Zugriff auf ein Eingabefeld im HTML-Formular: JSOject feld = fenster.eval("document.formular.eingabe"); String inhalt = (String) feld.getMember("value");

Hier der vollständige Code des Applets: import java.awt.*; import java.lang.*; import java.applet.Applet; import netscape.javascript.*;

Listing 23.3: Ausgabe mit JSObject (ausgabe.java)

public class ausgabe extends java.applet.Applet { public void init() { JSObject fenster = JSObject.getWindow(this); fenster.eval("alert('Hallo von Java!')");

} }

Das Applet müssen Sie nun kompilieren. Sollte dies nach der Anleitung im letzten Abschnitt nicht klappen, finden Sie die kompilierte Datei mit dem Namen ausgabe.class auf der CD-ROM im Ordner code\kap23.

 KOMPENDIUM 

JavaScript

697

Kapitel 23

Kommunikation mit der Außenwelt Im nächsten Schritt bauen Sie das Applet in die Seite ein. Vergessen Sie dabei nicht das Attribut mayscript im -Tag:

Listing 23.4: Von Java zu JavaScript (java_javascript.html)




Abbildung 23.3: Das Java-Applet meldet sich in JavaScript.

Die Datentyp-Umwandlung von Java in JavaScript ist unter Umständen schwieriger als der umgekehrte Weg. Beispielsweise steht der Java-Datentyp long für einen 64 Bit-Integer, der sich in JavaScript aber nur mit 32 Bit abspeichern lässt. Auch die Rückumwandlung von Arrays und Objekten kann im Einzelfall Probleme bereiten.

23.2

Sound und Multimedia

Die Sound- und Video-Steuerung mit JavaScript ist vor allem eines: eine Plugin-Kontrolle. Skripten haben nur direkten Zugriff auf die in Browsern integrierten Plugins. Hier gibt es, wie Sie wohl schon vermutet haben, mehrere Ansätze:

698

 KOMPENDIUM 

JavaScript

Sound und Multimedia

Kapitel 23

Netscape LiveAudio. Ein Netscape-Plugin, das skriptfähig ist. Leider wird es bei vielen Browser-Versionen nicht mehr mitinstalliert. Microsoft Windows Media Player. Beim Media Player finden Sie leichte Unterschiede zwischen Version 6.4 und höheren Versionen. Für Windows 95 gibt es zusätzlich die ActiveX-Komponente ActiveMovie. Apples QuickTime ab Version 4.1 bietet ebenfalls JavaScript-Unterstützung, allerdings nur eingeschränkt. RealPlayer G2 und höher. Er bietet – als erster RealPlayer – volle Steuerbarkeit über JavaScript, die sogar Eingriffe in das Aussehen der Oberfläche des Players erlaubt. Die Aufgaben des JavaScript-Programmierers sind nun vielfältig: Er muss die Einbindung beherrschen und erkennen, ob das richtig Plugin vorhanden ist, um dann das Plugin über JavaScript zu steuern. Auf Grund der vier verschiedenen Ansätze haben wir folgende Lösung gewählt: Netscape LiveAudio und der Windows Media Player werden zusammen in einem Skript ausgewertet und jeweils verwendet. Apple QuickTime und RealPlayer stehen als Plugin für beide Browser zur Verfügung und werden deswegen einzeln abgehandelt.

In die Website einbinden Der erste Schritt beim Einbinden von Multimedia-Dateien ist die Einbindung in HTML. Zu diesem Zweck besaß der Netscape Navigator lange Zeit das <embed>-Tag, das es aber nie in den W3C-Standard geschafft hat. Microsoft hat stattdessen das