JavaScript: Das umfassende Referenzwerk

e-bol.net 491-0.book Seite I Mittwoch, 4. April 2007 9:55 09 e-bol.net JavaScript Das umfassende Referenzwerk 491-...

182 downloads 1757 Views 21MB Size Report

This content was uploaded by our users and we assume good faith they have the permission to share this book. If you own the copyright to this book and it is wrongfully on our website, we offer a simple DMCA procedure to remove your content from our site. Start by pressing the button below!

Report copyright / DMCA form

DOWNLOAD PDF

e-bol.net

491-0.book Seite I Mittwoch, 4. April 2007 9:55 09

e-bol.net

JavaScript Das umfassende Referenzwerk

491-0.book Seite II Mittwoch, 4. April 2007 9:55 09

e-bol.net

491-0.book Seite III Mittwoch, 4. April 2007 9:55 09

e-bol.net

3. AUFLAGE

JavaScript Das umfassende Referenzwerk

David Flanagan Deutsche Übersetzung von Lars Schulten & Ulrich Speidel

Beijing · Cambridge · Farnham · Köln · Paris · Sebastopol · Taipei · Tokyo

491-0.book Seite IV Mittwoch, 4. April 2007 9:55 09

e-bol.net

Die Informationen in diesem Buch wurden mit größter Sorgfalt erarbeitet. Dennoch können Fehler nicht vollständig ausgeschlossen werden. Verlag, Autoren und Übersetzer übernehmen keine juristische Verantwortung oder irgendeine Haftung für eventuell verbliebene Fehler und deren Folgen. Alle Warennamen werden ohne Gewährleistung der freien Verwendbarkeit benutzt und sind möglicherweise eingetragene Warenzeichen. Der Verlag richtet sich im wesentlichen nach den Schreibweisen der Hersteller. Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen. Kommentare und Fragen können Sie gerne an uns richten: O’Reilly Verlag Balthasarstr. 81 50670 Köln Tel.: 0221/9731600 Fax: 0221/9731608 E-Mail: [email protected] Copyright der deutschen Ausgabe: © 2007 by O’Reilly Verlag GmbH & Co. KG 1. Auflage 1997 2. Auflage 2002 3. Auflage 2007 Die Originalausgabe erschien 2006 unter dem Titel JavaScript: The Definitive Guide, 5th Edition im Verlag O’Reilly & Associates, Inc. Die Darstellung eines Nashorns im Zusammenhang mit dem Thema JavaScript ist ein Warenzeichen von O’Reilly & Associates, Inc. JavaScriptTM, JavaTM und alle auf Java basierenden Warenzeichen und Logos sind geschützte Warenzeichen von Sun Microsystems, Inc. in den USA und in anderen Ländern. O’Reilly & Associates, Inc. und der O’Reilly Verlag GmbH & Co. KG sind unabhängig von Sun Microsystems. Mozilla und Firefox sind Warenzeichen der Mozilla Foundation. Netscape, Navigator und die Netscape Communications Corporate Logos sind Warenzeichen von Netscape Communications Corporation. Internet Explorer und das Internet Explorer Logo sind Warenzeichen von Microsoft Corporation. Alle anderen Produktnamen und -logos sind Warenzeichen ihrer jeweiligen Eigentümer. Bibliografische Information Der Deutschen Bibliothek Die Deutsche Bibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über http://dnb.ddb.de abrufbar. Übersetzung und deutsche Bearbeitung: Lars Schulten, Köln & Ulrich Speidel, Auckland Lektorat: Inken Kiupel & Susanne Aping, Köln Korrektorat: Friederike Daenecke, Zülpich Satz: Tim Mergemeier, reemers publishing services gmbh, Krefeld; www.reemers.de Umschlaggestaltung: Edie Freedman, Boston & Michael Oreal, Köln Produktion: Andrea Miß, Köln Belichtung, Druck und buchbinderische Verarbeitung: Druckerei Kösel, Krugzell; www.koeselbuch.de ISBN 978-3-89721-491-0 Dieses Buch ist auf 100% chlorfrei gebleichtem Papier gedruckt.

491-0.book Seite V Mittwoch, 4. April 2007 9:55 09

e-bol.net

Dieses Buch ist allen gewidmet, die Frieden lehren und Gewalt Widerstand leisten.

491-0.book Seite VI Mittwoch, 4. April 2007 9:55 09

e-bol.net

491-0.book Seite VII Mittwoch, 4. April 2007 9:55 09

e-bol.net

Inhalt

Vorwort . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . XV 1

Einführung in JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 1.1 1.2 1.3 1.4 1.5

Teil I 2

Der JavaScript-Sprachkern

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

Lexikalische Struktur . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8

3

Was ist JavaScript? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 Versionen von JavaScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 Clientseitiges JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 JavaScript in anderen Kontexten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 JavaScript erkunden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10

Zeichensatz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 Groß- und Kleinschreibung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 Whitespace und Zeilenenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 Wahlweise Semikola . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 Kommentare . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 Literale. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 Bezeichner . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 Reservierte Wörter. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

Datentypen und Werte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 3.1 3.2 3.3 3.4 3.5 3.6

Zahlen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 Strings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 Boolesche Werte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 Funktionen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 Objekte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

| VII

491-0.book Seite VIII Mittwoch, 4. April 2007 9:55 09

e-bol.net 3.7 3.8 3.9 3.10 3.11 3.12 3.13 3.14 3.15

4

Variablen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 4.1 4.2 4.3 4.4 4.5 4.6 4.7

5

Ausdrücke . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 Übersicht über die Operatoren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64 Arithmetische Operatoren. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68 Gleichheitsoperatoren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70 Relationsoperatoren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 String-Operatoren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76 Logische Operatoren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77 Bit-Operatoren. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 Zuweisungsoperatoren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 Sonstige Operatoren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83

Anweisungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90 6.1 6.2 6.3 6.4 6.5 6.6 6.7 6.8 6.9

VIII

Typisierung von Variablen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 Deklaration von Variablen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 Der Geltungsbereich von Variablen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 Primitive Datentypen und Referenztypen . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 Garbage Collection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58 Variablen als Eigenschaften . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59 Noch einmal zum Geltungsbereich von Variablen . . . . . . . . . . . . . . . . . . . . . 61

Ausdrücke und Operatoren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 5.1 5.2 5.3 5.4 5.5 5.6 5.7 5.8 5.9 5.10

6

null. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 undefined. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 Das Date-Objekt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 Reguläre Ausdrücke. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 Fehlerobjekte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 Zusammenfassung der Typumwandlungen . . . . . . . . . . . . . . . . . . . . . . . . . . 41 Wrapper-Objekte für primitive Datentypen . . . . . . . . . . . . . . . . . . . . . . . . . . 41 Umwandlungen von Objekten in elementare Werte. . . . . . . . . . . . . . . . . . . . 43 by-value vs. by-reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45

| Inhalt

Anweisungen mit Ausdrücken. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90 Zusammengesetzte Anweisungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91 if . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 else if . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94 switch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95 while . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 do/while. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 for . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99 for/in . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101

491-0.book Seite IX Mittwoch, 4. April 2007 9:55 09

e-bol.net 6.10 6.11 6.12 6.13 6.14 6.15 6.16 6.17 6.18 6.19 6.20

7

Objekte und Arrays 7.1 7.2 7.3 7.4 7.5 7.6 7.7

8

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116

Objekte erzeugen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116 Objekteigenschaften . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117 Objekte als assoziative Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119 Universelle Objekteigenschaften und -methoden . . . . . . . . . . . . . . . . . . . . . 121 Arrays . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124 Array-Methoden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129 Array-artige Objekte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134

Funktionen 8.1 8.2 8.3 8.4 8.5 8.6 8.7 8.8 8.9

9

Markierungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102 break . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103 continue. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104 var . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106 return. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108 throw . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108 try/catch/finally . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109 with . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112 Die leere Anweisung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113 Zusammenfassung der JavaScript-Anweisungen. . . . . . . . . . . . . . . . . . . . . . 114

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136

Definition und Aufruf von Funktionen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136 Funktionsargumente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140 Funktionen als Datentypen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147 Funktionen als Methoden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149 Konstruktorfunktionen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150 Funktionseigenschaften und -methoden . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150 Beispiele für Hilfsfunktionen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153 Funktionsgeltung und Closures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155 Der Function( )-Konstruktor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163

Klassen, Konstruktoren und Prototypen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165 9.1 9.2 9.3 9.4 9.5 9.6 9.7 9.8

Konstruktoren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165 Prototypen und Vererbung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167 Klassen in JavaScript simulieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173 Allgemeine Objektmethoden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180 Superklassen und Subklassen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184 Erweitern, ohne zu erben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188 Den Objekttyp ermitteln . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191 Beispiel: Eine defineClass( )-Hilfsmethode . . . . . . . . . . . . . . . . . . . . . . . . . . 197

Inhalt

| IX

491-0.book Seite X Mittwoch, 4. April 2007 9:55 09

e-bol.net

10 Module und Namensräume . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202 10.1 Namensräume und Module erzeugen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203 10.2 Symbole aus Namensräumen importieren . . . . . . . . . . . . . . . . . . . . . . . . . . 209 10.3 Modulwerkzeuge . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212

11 Mustervergleich mit regulären Ausdrücken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220 11.1 Reguläre Ausdrücke definieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220 11.2 String-Methoden für den Mustervergleich . . . . . . . . . . . . . . . . . . . . . . . . . . 230 11.3 Das RegExp-Objekt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233

12 Java skripten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236 12.1 JavaScript einbetten. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236 12.2 Java skripten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245

Teil II

Clientseitiges JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259

13 JavaScript in Webbrowsern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261 13.1 13.2 13.3 13.4 13.5 13.6 13.7 13.8 13.9

Die Webbrowser-Umgebung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262 Skripten in HTML einbetten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268 Event-Handler in HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275 JavaScript in URLs. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277 Ausführung von JavaScript-Programmen . . . . . . . . . . . . . . . . . . . . . . . . . . . 280 Clientseitige Kompatibilität. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285 Zugänglichkeit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291 JavaScript-Sicherheit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292 Andere webbezogene JavaScript-Einbettungen . . . . . . . . . . . . . . . . . . . . . . . 298

14 Browserfenster skripten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300 14.1 14.2 14.3 14.4 14.5 14.6 14.7 14.8 14.9

X

| Inhalt

Timer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301 Die Location- und History-Objekte. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302 Window-, Screen- und Browser-Informationen abrufen . . . . . . . . . . . . . . . . 305 Fenster öffnen und manipulieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311 Einfache Dialogfenster. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317 Die Statusleiste skripten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319 Fehlerbehandlung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320 Mehrere Fenster und Frames. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 321 Beispiel: Eine Navigationsleiste in einem Frame . . . . . . . . . . . . . . . . . . . . . . 327

491-0.book Seite XI Mittwoch, 4. April 2007 9:55 09

e-bol.net

15 Dokumente skripten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331 15.1 15.2 15.3 15.4 15.5 15.6 15.7 15.8 15.9 15.10 15.11

Dynamischer Dokumentinhalt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333 Document-Eigenschaften . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335 Alt-DOM: Dokumentobjekt-Sammlungen . . . . . . . . . . . . . . . . . . . . . . . . . . 336 Überblick über das W3C DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 341 Ein Dokument durchqueren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 353 Elemente in einem Dokument finden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 355 Ein Dokument modifizieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 359 Einem Dokument Inhalt hinzufügen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 364 Beispiel: Ein dynamisch erzeugtes Inhaltsverzeichnis . . . . . . . . . . . . . . . . . . 373 Ausgewählten Text abfragen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 378 Das IE 4 DOM. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 379

16 Cascading Style Sheets und dynamisches HTML 16.1 16.2 16.3 16.4 16.5 16.6

. . . . . . . . . . . . . . . . . . . . . . . . . . 382

Überblick über CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 383 CSS für DHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 392 Eingebettete Styles per Skript steuern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 409 Berechnete Styles per Skript steuern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 419 CSS-Klassen per Skript steuern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 421 Stylesheets per Skript steuern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 422

17 Events und Event-Handling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 428 17.1 17.2 17.3 17.4 17.5 17.6 17.7

Grundlegendes Event-Handling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 429 Fortgeschrittenes Event-Handling mit dem DOM Level 2 . . . . . . . . . . . . . . 440 Das Event-Modell des Internet Explorers . . . . . . . . . . . . . . . . . . . . . . . . . . . 452 Maus-Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 463 Tasten-Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 469 Das onload-Event . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 478 Synthetische Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 479

18 Formulare und Formularelemente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 482 18.1 18.2 18.3 18.4

Das Form-Objekt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 483 Definition von Formularelementen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 484 Formularelemente skripten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 489 Ein Beispiel zur Überprüfung von Formularen . . . . . . . . . . . . . . . . . . . . . . . 497

19 Cookies und Persistenz auf der Clientseite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 502 19.1 Ein Überblick über Cookies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 502 19.2 Cookies speichern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 505

Inhalt

| XI

491-0.book Seite XII Mittwoch, 4. April 2007 9:55 09

e-bol.net 19.3 19.4 19.5 19.6

Cookies lesen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 507 Ein Cookie-Beispiel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 508 Cookie-Alternativen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 512 Persistente Daten und Sicherheit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 525

20 HTTP skripten. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 526 20.1 20.2 20.3 20.4

Verwendung von XMLHttpRequest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 527 XMLHttpRequest-Beispiele und Utilities . . . . . . . . . . . . . . . . . . . . . . . . . . . 534 Ajax und dynamisches Skripten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 542 Skriptgesteuertes HTTP mit -Tags. . . . . . . . . . . . . . . . . . . . . . . . . . 549

21 JavaScript und XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 552 21.1 21.2 21.3 21.4 21.5 21.6 21.7 21.8

XML-Dokumente beschaffen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 552 XML über die DOM API manipulieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 559 XML mit XSLT transformieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 563 XML mit XPath abfragen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 566 Serialisierung von XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 571 HTML-Templates mit XML-Daten erweitern . . . . . . . . . . . . . . . . . . . . . . . . 572 XML und Webservices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 576 E4X: ECMAScript für XML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 579

22 Skriptgesteuerte Grafiken auf der Clientseite 22.1 22.2 22.3 22.4 22.5 22.6 22.7

. . . . . . . . . . . . . . . . . . . . . . . . . . . . 582

Skriptgesteuerte Bilder. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 583 Grafiken mit CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 591 SVG: Scalable Vector Graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 600 VML: Vector Markup Language . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 607 Grafiken auf einem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 611 Grafiken mit Flash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 615 Grafiken mit Java. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 620

23 Java-Applets und Flash-Movies skripten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 628 23.1 23.2 23.3 23.4 23.5

XII |

Inhalt

Applets skripten. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 630 Skriptsteuerung des Java-Plug-ins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 632 Skriptsteuerung mit Java . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 633 Flash skripten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 638 Flash 8 skripten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 646

491-0.book Seite XIII Mittwoch, 4. April 2007 9:55 09

e-bol.net

Teil III

Referenz für den JavaScript-Sprachkern

. . . . . . . . . . . . . . . . . . . . . . . . . . . 649

Teil IV

Referenz für clientseitiges JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 779

Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1037

Inhalt | XIII

491-0.book Seite XIV Mittwoch, 4. April 2007 9:55 09

e-bol.net

491-0.book Seite XV Mittwoch, 4. April 2007 9:55 09

e-bol.net

Vorwort

Nachdem die vierte Auflage von JavaScript: Das umfassende Handbuch veröffentlicht wurde, wurde das Document Object Model – die grundlegende API für die clientseitige JavaScript™-Programmierung – zu großen Teilen, wenn auch nicht vollständig in Webbrowsern implementiert. Das bedeutete, dass Webentwickler eine stabile, reife Sprache (JavaScript 1.5) und eine gemeinsame API für die Manipulation von Webseiten auf dem Client hatten. Es folgten einige Jahre der Stabilität. Aber die Dinge haben begonnen, wieder interessant zu werden. Entwickler verwenden JavaScript jetzt, um HTTP zu skripten, um XML-Daten zu manipulieren und sogar um dynamische Grafiken in Webbrowsern zu zeichnen. Viele JavaScript-Entwickler haben auch begonnen, längere Programme zu schreiben und ausgefeiltere Programmiertechniken zu verwenden. Diese aktualisierte Auflage wurde vollständig für die neue Welt von Ajax und Web 2.0-Technologien überarbeitet.

Was in dieser Auflage neu ist In Teil I, Der JavaScript-Sprachkern, wurde das Kapitel zu Funktionen (Kapitel 8) erweitert. Ein Schwerpunkt liegt dabei auf eingebetteten Funktionen und Closures. Das Material zur Definition eigener Klassen wurde ebenfalls erweitert und in ein eigenes Kapitel (Kapitel 9) verschoben. Kapitel 10 ist ein weiteres neues Kapitel, das Namensräume behandelt, die grundlegend für das Schreiben von modularem, wiederverwendbarem Code sind. Schließlich zeigt Kapitel 12, wie man JavaScript einsetzt, um tatsächlich Java zu skripten. Es zeigt, wie man einen JavaScript-Interpreter in eine Java 6-Anwendung einbettet und wie man JavaScript verwendet, um Java-Objekte zu erstellen und auf diesen Objekten Methoden aufzurufen. In Teil II, Clientseitiges JavaScript, wurde die Behandlung des alten Document Object Models (Level 0) mit der Behandlung des W3C-Standard-DOMs verschmolzen. Weil das DOM jetzt universell implementiert ist, gibt es keinen Grund für zwei separate Kapitel

| XV

491-0.book Seite XVI Mittwoch, 4. April 2007 9:55 09

e-bol.net zur Manipulation von Dokumenten mehr. Die größte Veränderung in Teil II ist aber die Menge an neuem Material: • Kapitel 19, Cookies und Persistenz auf der Clientseite, hat die Behandlung von Cookies aktualisiert und schließt die Behandlung anderer Techniken für clientseitige Persistenz ein. • Kapitel 20, HTTP skripten, erklärt, wie man unter Verwendung des mächtigen XMLHttpRequest-Objekts geskriptete HTTP-Anfragen macht, die die Technologie für Ajax-artige Webanwendungen sind. • Kapitel 21, JavaScript und XML, zeigt, wie man JavaScript verwendet, um XMLDokumentinhalte zu erzeugen, zu laden, zu parsen, zu transformieren, abzufragen, zu serialisieren und herauszuziehen. Es führt außerdem in die E4X-Erweiterung der Kern-JavaScript-Sprache ein. • Kapitel 22, Skriptgesteuerte Grafiken auf der Clientseite, erklärt die Grafikfähigkeiten von JavaScript. Es behandelt einfache Image-Rollover und Animationen, erklärt aber auch fortgeschrittene geskriptete Grafiken mit dem brandneuen -Tag. Es zeigt auch andere Mittel, um dynamische, geskriptete clientseitige Grafiken mit SVG, VML, dem Flash-Plug-in und dem Java-Plug-in zu erzeugen. • In Kapitel 23, Java-Applets und Flash-Movies skripten, wurde die Behandlung des Java-Plug-ins um eine Behandlung des Flash-Plug-ins erweitert. Es erklärt jetzt, wie man Flash-Filme und Java-Applets skriptet. Teil III, der Referenzteil für die Kern-JavaScript-API, wurde im Vergleich zur vorangehenden Auflage nur wenig geändert, weil diese API stabil geblieben ist. Wenn Sie die vorangegangene Auflage verwendet haben, wird Ihnen dieser Teil des Buchs angenehm vertraut vorkommen. Die größte Änderung am Referenzmaterial ist, dass die Dokumentation der DOM API, die zuvor in einen eigenen Teil ausgelagert war, vollständig in Teil IV, die Referenz zu clientseitigem JavaScript, integriert wurde. Jetzt muss nur noch in einer clientseitigen Referenz nachgeschlagen werden. Es ist nicht mehr notwendig, das Document-Objekt in einem Referenzabschnitt nachzuschlagen und das HTMLDocument-Objekt dann in dem anderen. Referenzmaterial zu den DOM-Interfaces, die in Webbrowsern nie (sonderlich verbreitet) implementiert waren, wurde weggelassen. Das NodeIterator-Interface ist in Webbrowsern einfach nicht verfügbar und verstopft jetzt nicht mehr sinnlos dieses Buch. Die Perspektive wurde außerdem von den schrecklich formalen Interfaces, die von der DOM-Spezifikation definiert werden, zu den JavaScript-Objekten verschoben, die diese Interfaces tatsächlich implementieren. Beispielsweise ist getComputedStyle( ) jetzt als Methode des Window-Objekts dokumentiert, wo man sie auch erwarten würde, nicht mehr als Methode des Interfaces AbstractView. Für clientseitige JavaScript-Programmierer gibt es keinen Grund, sich über AbstractView Gedanken zu machen, deswegen wurde dieses Interface einfach aus der Referenz entfernt. All diese Änderungen führen zu einem einfacheren, leichter zu verwendenden clientseitigen Referenzteil.

XVI

| Vorwort

491-0.book Seite XVII Mittwoch, 4. April 2007 9:55 09

e-bol.net

Wie man dieses Buch verwendet Kapitel 1 bietet eine Einführung in JavaScript. Der Rest des Buchs ist in vier Teile eingeteilt. Teil I, der unmittelbar auf dieses Kapitel folgt, dokumentiert den Sprachkern von JavaScript. Die Kapitel 2 bis 6 behandeln etwas langweiliges, aber erforderliches Material. Diese Kapitel enthalten die grundlegenden Informationen, die man verstehen muss, wenn man eine neue Programmiersprache lernt: • Kapitel 2, Lexikalische Struktur, erklärt die Grundstruktur der Sprache. • Kapitel 3, Datentypen und Werte, dokumentiert die Datentypen, die von JavaScript unterstützt werden. • Kapitel 4, Variablen, behandelt Variablen, Geltungsbereiche von Variablen und verwandte Themen. • Kapitel 5, Ausdrücke und Operatoren, erklärt Ausdrücke in JavaScript und dokumentiert alle Operatoren, die von JavaScript unterstützt werden. Weil JavaScript an Java angelehnt ist, das seinerseits an C und C++ angelehnt ist, können erfahrene C-, C++- oder Java-Programmierer große Teile von diesem Kapitel überspringen. • Kapitel 6, Anweisungen, beschreibt die Syntax und Verwendung aller JavaScriptAnweisungen. Wieder können erfahrene C-, C++- und Java-Programmierer einiges, aber nicht alles, in diesem Kapitel überspringen. Die nächsten sechs Kapitel von Teil I werden interessanter. Sie behandeln immer noch den Kern der Sprache JavaScript, dokumentieren aber Teile der Sprache, mit denen man auch dann noch nicht vertraut ist, wenn man bereits C oder Java kennt. Diese Kapitel müssen Sie sorgfältig studieren, wenn Sie JavaScript wirklich verstehen wollen. • Kapitel 7, Objekte und Arrays, erklärt Objekte und Arrays in JavaScript. • Kapitel 8, Funktionen, zeigt, wie in JavaScript Funktionen definiert, aufgerufen und manipuliert werden. Es schließt außerdem fortgeschrittenes Material zu Closures ein. • Kapitel 9, Klassen, Konstruktoren und Prototypen, behandelt die OO-Programmierung in JavaScript, erklärt, wie man Konstruktordefinitionen für neue Klassen von Objekten definiert und wie die prototypbasierte Vererbung von JavaScript funktioniert. Dieses Kapitel zeigt auch, wie man traditionelle klassenbasierte OO-Idiome in JavaScript simuliert. • Kapitel 10, Module und Namensräume, zeigt, wie JavaScript-Objekte Namensräume definieren, und erklärt Programmierpraktiken, die Ihre Module mit JavaScript-Code vor Namensraumkollisionen schützen können. • Kapitel 11, Mustervergleich mit regulären Ausdrücken, erklärt, wie man in JavaScript reguläre Ausdrücke verwendet, um Mustervergleichs- und Suchen/Ersetzen-Operationen durchzuführen.

Vorwort |

XVII

491-0.book Seite XVIII Mittwoch, 4. April 2007 9:55 09

e-bol.net • Kapitel 12, Java skripten, zeigt, wie man einen JavaScript-Interpreter in eine JavaAnwendung einbettet, und erklärt, wie JavaScript-Programme, die in so einer Anwendung laufen, Java-Objekte skripten können. Dieses Kapitel ist nur für JavaProgrammierer interessant. Teil II erklärt JavaScript in Webbrowsern. Die ersten sechs Kapitel behandeln Kern-Features von clientseitigem JavaScript: • Kapitel 13, JavaScript in Webbrowsern, erklärt die Integration von JavaScript in Webbrowser. Es betrachtet den Webbrowser als eine Programmierumgebung und erklärt die verschiedenen Weisen, wie JavaScript in Webseiten integriert wird, damit es auf der Clientseite ausgeführt wird. • Kapitel 14, Browserfenster skripten, dokumentiert das zentrale Objekt von clientseitigem JavaScript – das Window-Objekt – und erklärt, wie Sie dieses Objekt verwenden können, um Webbrowser-Fenster zu steuern. • Kapitel 15, Dokumente skripten, behandelt das Document-Objekt und erklärt, wie JavaScript den Inhalt skripten kann, der in einem Webbrowser-Fenster angezeigt wird. Dies ist das wichtigste Kapitel in Teil II. • Kapitel 16, Cascading Style Sheets und dynamisches HTML, erklärt, wie JavaScript und CSS-Stylesheets interagieren. Es demonstriert, wie JavaScript den Style, das Erscheinungsbild und die Position der Elemente in einem HTML-Dokument manipulieren kann, um die visuellen Effekte hervorzubringen, die als DHTML bekannt sind. • Kapitel 17, Events und Event-Handling, behandelt JavaScript-Events und -EventHandler, die zentral für alle JavaScript-Programme sind, die mit dem Benutzer interagieren. • Kapitel 18, Formulare und Formularelemente, erklärt, wie JavaScript mit HTMLFormularen und -Formularelementen arbeiten kann. Das ist die logische Erweiterung von Kapitel 15, aber das Thema ist so wesentlich, dass es ein eigenes Kapitel verdient. Auf diese ersten sechs Kapitel von Teil II folgen fünf weitere, die fortgeschrittenere Themen von clientseitigem JavaScript behandeln. • Kapitel 19, Cookies und Persistenz auf der Clientseite, behandelt die clientseitige Persistenz, d.h. die Fähigkeit von Skripten, Daten auf dem Computer des Benutzers zu speichern, damit diese später abgerufen werden können. Dieses Kapitel erklärt, wie man HTTP-Cookies verwendet, um Daten persistent zu machen, und wie man Persistenz mit proprietären Features des Internet Explorer und des Flash-Plug-ins erzielt. • Kapitel 20, HTTP skripten, zeigt, wie JavaScript das HTTP-Protokoll skripten kann, indem es über das XMLHttpRequest-Objekt Anfragen an Webserver schickt und von ihnen Antworten erhält. Diese Fähigkeit ist der zentrale Punkt in der Webanwendungsarchitektur, die als Ajax bekannt ist.

XVIII

| Vorwort

491-0.book Seite XIX Mittwoch, 4. April 2007 9:55 09

e-bol.net • Kapitel 21, JavaScript und XML, demonstriert, wie man JavaScript verwendet, um Inhalte von XML-Dokumenten zu erzeugen, zu laden, zu parsen, abzufragen, zu serialisieren und herauszuziehen. • Kapitel 22, Skriptgesteuerte Grafiken auf der Clientseite, erklärt die Grafikfähigkeiten von JavaScript. Es behandelt einfache Image-Rollover und Animationen, erklärt aber auch fortgeschrittene grafische Techniken, die Scalable Vector Graphics (SVG), die Vector Markup Language (VML), das -Tag, das Flash-Plug-in und das Java-Plug-in verwenden. • Kapitel 23, Java-Applets und Flash-Movies skripten, erklärt, wie Sie JavaScript einsetzen können, um mit Java-Applets und Flash-Filmen zu kommunizieren und diese zu steuern. Es behandelt auch, wie Sie das Gegenteil tun können – also wie Sie JavaScript-Code aus Java-Applets und Flash-Movies aufrufen können. Die Teile III und IV enthalten Referenzmaterial, das Kern-JavaScript bzw. clientseitiges JavaScript behandelt. Diese Teile dokumentieren die wichtigsten Objekte, Methoden und Eigenschaften in alphabetischer Reihenfolge.

Die in diesem Buch verwendeten Konventionen In diesem Buch werden die folgenden Formatierungskonventionen verwendet: Fett Wird gelegentlich verwendet, um auf bestimmte Tasten auf einer Computer-Tastatur oder Teile einer Benutzerschnittstelle wie auf den Zurück-Button oder auf das Optionen-Menü zu verweisen. Kursiv Wird zur Hervorhebung genutzt und um die erste Verwendung eines Begriffs zu kennzeichnen. Kursiv wird ebenfalls für E-Mail-Adressen, Webseites, FTP-Sites, Datei- und Verzeichnisnamen und Newsgroups verwendet. Schließlich wird Kursiv in diesem Buch für die Namen von Java-Klassen verwendet, um sie leichter von JavaScript-Namen unterscheiden zu können. Nichtproportionalschrift

Wird in allen JavaScript-Code- und HTML-Text-Listings verwendet sowie allgemein für alles, das man beim Programmieren wörtlich eingeben würde. Nichtproportionalschrift fett

Wird verwendet, um Kommandozeilentext anzuzeigen, der vom Benutzer eingegeben werden soll. Nichtproportionalschrift kursiv

Wird für die Namen von Funktionsargumenten verwendet und allgemein als Platzhalter eingesetzt, um Elemente zu kennzeichnen, die in Ihren Programmen durch tatsächliche Werte ersetzt werden sollten.

Vorwort

| XIX

491-0.book Seite XX Mittwoch, 4. April 2007 9:55 09

e-bol.net

Verwendung der Codebeispiele Dieses Buch soll Ihnen bei der Arbeit helfen. Den Code, den wir hier zeigen, dürfen Sie generell in Ihren Programmen und Dokumentationen verwenden. Sie brauchen uns nicht um Genehmigung zu bitten, sofern Sie nicht große Teile des Codes reproduzieren. Wenn Sie zum Beispiel ein Programm schreiben, das mehrere Codeabschnitte aus diesem Buch wiederverwendet, brauchen Sie unser Einverständnis nicht. Doch wenn Sie eine CDROM mit Codebeispielen aus O’Reilly-Büchern verkaufen oder verteilen wollen, müssen Sie sehr wohl eine Erlaubnis einholen. Eine Frage mit einem Zitat aus diesem Buch und seinen Codebeispielen erfordert keine Erlaubnis, aber es ist nicht ohne Weiteres gestattet, große Teile unseres Texts oder Codes in eine eigene Produktdokumentation aufzunehmen. Wir freuen uns über eine Quellenangabe, verlangen sie aber nicht unbedingt. Zu einer Quellenangabe gehören normalerweise der Titel, der Autor, der Verlag und die ISBN, zum Beispiel: »David Flanagan: JavaScript – Das umfassende Referenzwerk. O’Reilly: 2007, ISBN 978-3-89721-491-0«. Wenn Sie das Gefühl haben, dass Ihr Einsatz unserer Codebeispiele über die Grenzen des Erlaubten hinausgeht, schreiben Sie uns bitte eine E-Mail an [email protected].

Website und Codebeispiele zu diesem Buch Auf deutschen Website zu diesem Buch finden Sie Errata, Codebeispiele und Zusatzinformationen: http://www.oreilly.de/catalog/jscript5ger Für Kommentare zu diesem Buch senden Sie uns eine E-Mail an: [email protected]

Danksagungen Brendan Eich von der Mozilla Foundation ist der Urheber und Haupterneuerer von JavaScript. Viele andere Webentwickler und ich schulden Brendan ungeheuere Dankbarkeit für die Entwicklung von JavaScript und dafür, dass er bei seinem verrückten Terminkalender immer noch Zeit findet, unsere Fragen zu beantworten, und uns sogar um Feedback bittet. Brendan hat nicht nur meine Fragen geduldig beantwortet, er hat auch die erste und die dritte Auflage dieses Buchs gelesen und sehr hilfreiche Hinweise gegeben.

XX

| Vorwort

491-0.book Seite XXI Mittwoch, 4. April 2007 9:55 09

e-bol.net Dieses Buch hatte das Glück, von erstklassigen Gutachtern gelesen zu werden, deren Kommentare viel dazu beigetragen haben, das Buch besser und genauer zu machen. Aristotle Pagaltzis (http://plasmasturm.org) hat das neue Material zu Funktionen und die in dieser Auflage neuen Kapitel über Klassen und Namensräume geprüft. Er hat einen besonders genauen Blick auf meinen Code geworfen und hat viele hilfreiche Hinweise gegeben. Douglas Crockford (http://www.crockford.com) hat das neue Material zu Funktionen und Klassen gelesen. Norris Boyd, der Schöpfer des Rhino JavaScript-Interpreters, hat das Kapitel zum Einbetten von JavaScript in Java-Anwendungen geprüft. Peter-Paul Koch (http://www.quirksmode.org), Christian Heilmann (http://www.wait-till-i.com) und Ken Cooper haben die Ajax-bezogenen Kapitel dieses Buchs geprüft. Ken war so nett, am Ende einzuspringen und beim neuen Material für die clientseitige Referenz auszuhelfen. Todd Ditchendorf (http://www.ditchnet.org) und Geoff Stearns (http://blog.deconcept. com) haben das Kapitel zu geskripteten clientseitigen Grafiken gelesen. Todd war so nett, für mich einen Bug zu finden und zu isolieren, und Geoff hat mir geholfen, Flash und ActionScript zu verstehen. Schließlich hat Sanders Kleinfeld das vollständige Buch mit bemerkenswerter Aufmerksamkeit gelesen. Seine Vorschläge und Korrekturen haben das Buch klarer und präziser gemacht. Mein aufrichtiger Dank gilt ihnen allen für ihre Sorgfalt. Alle verbleibenden Fehler sind natürlich meine. Auch den Gutachtern für die vierte englische Auflage bin ich dankbar. Waldemar Horwat von Netscape hat das neue Material zu JavaScript 1.5 geprüft. Das neue Material zum W3C DOM wurde von Philippe Le Hegaret vom W3C und von Peter-Paul Koch, Dylan Schiemann und Jeff Yates geprüft. Obwohl er kein Gutachter war, war Joseph Kesselman von IBM Research sehr hilfreich, indem er meine Fragen zum W3C DOM beantwortet hat. Die dritte englische Auflage dieses Buchs wurde von Brendan Eich, Waldemar Horwat und Vidur Apparao von Netscape, Herman Venter von Microsoft und zwei unabhängigen JavaScript-Entwicklern, Jay Hodges und Angelo Sirigos, geprüft. Dan Shafer hat einige Vorarbeiten für die dritte Auflage geleistet. Obwohl sein Material in dieser Auflage nicht verwendet wurde, waren seine Ideen und sein allgemeines Konzept sehr hilfreich. Norris Boyd und Scott Furman von Netscape haben ebenfalls hilfreiche Informationen für dieses Buch geliefert, und Vidur Apparao von Netscape und Scott Issacs von Microsoft haben sich beide die Zeit genommen, mit mir über den aufkommenden Document Object Model-Standard zu sprechen. Schließlich bot mir Dr. Tankred Hirschmann anspruchsvolle Einsichten in die Feinheiten von JavaScript 1.2. Die zweite englische Auflage hat sehr von der Hilfe und den Kommentaren von Nick Thompson und Richard Yaker von Netscape, Dr. Shon Katzenberger, Larry Sullivan und Dave C. Mitchell von Microsoft und Lynn Rollins von R&B Communications profitiert. Die erste Auflage wurde von Neil Berkman von Bay Networks und Andrew Schulman und Terry Allen von O’Reilly geprüft.

Vorwort

| XXI

491-0.book Seite XXII Mittwoch, 4. April 2007 9:55 09

e-bol.net Dieses Buch schöpft seine Stärke auch aus der Vielzahl von Lektoren, die es hatte. Deb Cameron ist die Lektorin der aktuellen Auflage und hat dafür gesorgt, dass das Buch eine gründliche Bearbeitung und eine höchst erforderliche Auffrischung erhalten hat, insbesondere in Bezug auf die Entfernung des veralteten Materials. Paula Ferguson hat die dritte und die vierte englische Auflage lektoriert. Frank Willison hat die zweite englische Auflage lektoriert und Andrew Schulman die erste. Abschließend mein Dank, wie immer aus so vielen Gründen, an Christie. —David Flanagan http://www.davidflanagan.com/ April 2006

XXII |

Vorwort

491-0.book Seite 1 Mittwoch, 4. April 2007 9:55 09

e-bol.net

KAPITEL 1

Einführung in JavaScript

JavaScript ist eine interpretierte Programmiersprache mit objektorientierten Fähigkeiten. Syntaktisch betrachtet hat der Sprachkern von JavaScript Ähnlichkeit mit C, C++ und Java; hier wie dort gibt es Programmierkonstrukte wie die if-Anweisung, die whileSchleife und den Operator &&. Die Ähnlichkeit ist jedoch auf diesen syntaktischen Bereich beschränkt. JavaScript ist eine lose typisierte Sprache, was bedeutet, dass für Variablen kein Typ angegeben werden muss. In JavaScript bilden Objekte Eigenschaftsnamen auf beliebige Werte ab. Deswegen ähneln sie eher Name/Wert-Listen oder assoziativen Arrays (wie in Perl) als Structs (wie in C) oder Objekten (wie in C++ oder Java). Der OOVererbungsmechanismus von JavaScript basiert auf Prototypen wie der der wenig bekannten Programmiersprache Self. Das ist ganz anders als die Vererbung in C++ und Java. Ebenso wie Perl ist JavaScript eine interpretierte Sprache, und in mancherlei Hinsicht wurde sie von Perl inspiriert. Dies ist zum Beispiel bei den regulären Ausdrücken und der Behandlung von Arrays der Fall. Der Sprachkern von JavaScript unterstützt Zahlen, Strings und Boolesche Werte als elementare Datentypen. Er bietet außerdem eingebaute Objekte für Arrays, Datumswerte und reguläre Ausdrücke. JavaScript wird am häufigsten in Webbrowsern verwendet. In diesem Kontext wird der allgemeine Kern mit Objekten erweitert, die es Skripten ermöglichen, mit dem Benutzer in Interaktion zu treten, den Webbrowser zu steuern und das Dokument zu ändern, das im Webbrowserfenster angezeigt wird. Diese eingebettete Version von JavaScript führt Skripten aus, die in HTML-Webseiten eingebaut sind. Sie wird üblicherweise als clientseitiges JavaScript bezeichnet, um zu betonen, dass die Skripten vom Clientrechner ausgeführt werden und nicht vom Webserver. Der JavaScript-Sprachkern und seine eingebauten Datentypen unterliegen internationalen Standards, und die Kompatibilität der verschiedenen Implementierungen ist sehr gut. Teile des clientseitigen JavaScripts sind formell standardisiert, andere Teile sind De-facto-Standards, und andere Teile sind browserspezifische Erweiterungen. Die browserübergreifende Kompatibilität ist für clientseitige JavaScript-Programmierer oft eine wichtige Sache.

| 1

491-0.book Seite 2 Mittwoch, 4. April 2007 9:55 09

e-bol.net Dieses Kapitel bietet einen groben Überblick über JavaScript. Es bietet die Hintergrundinformationen, die Sie benötigen, bevor Sie mit dem Studium der Sprache beginnen können. Als Motivation und Einführung schließt es einige einfache Beispiele mit clientseitigem JavaScript-Code ein.

1.1

Was ist JavaScript?

Über JavaScript kursieren viele irrige Annahmen. Bevor wir in unserer Beschreibung fortfahren, müssen wir mit zwei verbreiteten und hartnäckigen Irrtümern über diese Sprache aufräumen.

1.1.1

JavaScript ist nicht Java

Eines der häufigsten Missverständnisse bezüglich JavaScript ist der Glaube, es sei eine vereinfachte Version von Java, der Programmiersprache von Sun Microsystems. Abgesehen von einer teilweisen syntaktischen Ähnlichkeit und der Tatsache, dass sowohl Java als auch JavaScript in Webbrowsern ausführbare Inhalte bereitstellen können, haben die beiden Sprachen nichts miteinander gemein. Die Ähnlichkeit der Namen ist eine reine Marketingmaßnahme von Netscape und Sun (die Sprache hieß ursprünglich LiveScript, und der Name wurde erst in letzter Minute in JavaScript geändert). Allerdings kann JavaScript tatsächlich Java skripten (siehe Kapitel 12 und 23).

1.1.2

JavaScript ist nicht einfach

Weil JavaScript interpretiert statt kompiliert wird, wird es häufig als Skriptsprache und nicht als eine richtige Programmiersprache bezeichnet. Dabei wird unterstellt, dass Skriptsprachen einfacher sind, Programmiersprachen für Nichtprogrammierer gewissermaßen. Der Umstand, dass JavaScript nicht streng typisiert ist, macht es Fehlern gegenüber weniger empfindlich und für unerfahrene Programmierer leichter verwendbar. Und viele Webdesigner waren in der Lage, JavaScript für begrenzte, kochbuchartige Programmieraufgaben zu verwenden. Hinter dieser Fassade einer scheinbaren Einfachheit ist JavaScript jedoch eine vollständige Programmiersprache, die mindestens so komplex ist wie alle anderen Sprachen. Programmierer, die mit JavaScript schwierigere Aufgaben zu lösen versuchen, stellen häufig fest, dass die Arbeit mit JavaScript frustrierend ist, wenn man die Sprache nicht wirklich gut beherrscht. Da das vorliegende Buch JavaScript umfassend dokumentiert, gibt es Ihnen die Möglichkeit, die Sprache in all ihren Feinheiten zu verstehen. Wenn Sie kochbuchartige JavaScript-Anleitungen kennen, werden Sie vielleicht von der Tiefe und Informationsfülle der kommenden Kapitel überrascht sein.

2 | Kapitel 1: Einführung in JavaScript

491-0.book Seite 3 Mittwoch, 4. April 2007 9:55 09

e-bol.net

1.2

Versionen von JavaScript

Wie alle neuen Technologien hat sich JavaScript sehr schnell entwickelt, als es neu war. Vorangehende Versionen dieses Buchs haben diese Entwicklung Schritt für Schritt dokumentiert und genau erläutert, welche Sprachfeatures in welcher Version der Sprache eingeführt wurden. Mittlerweile hat sich die Sprache allerdings stabilisiert und wurde von der European Computer Manufacturer’s Association (ECMA) standardisiert.1 Implementierungen dieses Standards sind beispielsweise der JavaScript 1.5-Interpreter von Netscape und der Mozilla Foundation und der JScript 5.5-Interpreter von Microsoft. Alle Webbrowser, die neuer sind als Netscape 4.5 oder Internet Explorer 4, unterstützen die neueste Version der Sprache. In der Praxis ist es also unwahrscheinlich, dass Sie auf einen nicht-konformen Interpreter stoßen könnten. Beachten Sie, dass der offizielle Name der Sprache gemäß dem ECMA-262-Standard ECMAScript ist. Aber dieser umständliche Name wird normalerweise nur verwendet, wenn explizit auf den Standard verwiesen wird. Genau genommen verweist der Name »JavaScript« nur auf die Sprachimplementierungen von Netscape und der Mozilla Foundation. In der Praxis nennt allerdings jeder die Sprache JavaScript. Nach einer langen Phase der Stabilität gibt es jetzt einige Vorboten von Änderungen an JavaScript. Der Webbrowser Firefox 1.5 von der Mozilla Foundation schließt einen neuen JavaScript-Interpreter mit der Versionsnummer 1.6 ein, Firefox 2.0 wird sogar mit JavaScript 1.7 ausgeliefert. Diese Versionen schließen einige neue (nicht-standardisierte) Methoden zur Manipulation von Arrays ein, die in Abschnitt 7.6 beschrieben werden, und bieten außerdem Unterstützung für E4X, das im Folgenden erläutert wird. Zusätzlich zur ECMA-262-Spezifikation, die den JavaScript-Sprachkern standardisiert, hat die ECMA einen weiteren JavaScript-bezogenen Standard veröffentlicht. ECMA-357 standardisiert eine Erweiterung für JavaScript, die als E4X oder ECMAScript for XML bekannt ist. Diese Erweiterung fügt der Sprache einen XML-Datentyp sowie Operatoren und Anweisungen zur Manipulation von XML-Werten hinzu. Aktuell wird E4X nur von JavaScript 1.6 und Firefox ab Version 1.5 implementiert. E4X wird in diesem Buch nicht explizit dokumentiert, aber Kapitel 21 schließt eine ausführlichere Einführung in Tutorial-Form ein. Vorschläge für eine vierte Auflage der ECMA-262-Spezifikation zur Standardisierung von JavaScript 2.0 sind seit einigen Jahren auf dem Tisch. Diese Vorschläge beschreiben eine Generalüberholung der Sprache, die strenge Typisierung und eine echte klassenbasierte Vererbung einschließt. Bisher wurden aber nur wenige Fortschritte in Bezug auf eine Standardisierung von JavaScript 2.0 erzielt. Mit Microsofts JScript.NET-Sprache und den Sprachen ActionScript 2.0 und ActionScript 3.0, die vom Adobe (früher Macromedia) 1 Der Standard ist ECMA-262, Version 3 (verfügbar unter http://www.ecma-international.org/publications/files/ ecma-st/ECMA-262.pdf).

1.2 Versionen von JavaScript

| 3

491-0.book Seite 4 Mittwoch, 4. April 2007 9:55 09

e-bol.net Flash-Player verwendet werden, gibt es allerdings schon Implementierungen, die auf den Entwurfsvorschlägen basieren. Aktuell gibt es Anzeichen dafür, dass die Arbeit an JavaScript 2.0 wieder aufgenommen wird, und die Veröffentlichung von JavaScript 1.6 und 1.7 kann als erster Schritt in diese Richtung angesehen werden. Natürlich ist davon auszugehen, dass jede neue Version der Sprache rückwärtskompatibel mit der hier beschriebenen Version ist. Und auch wenn JavaScript 2.0 standardisiert ist, wird es noch einige Jahre dauern, bis es in Webbrowsern weit verbreitet ist.

1.3

Clientseitiges JavaScript

Wenn ein JavaScript-Interpreter in einen Webbrowser eingebettet wird, ist das Ergebnis clientseitiges JavaScript. Dies ist die bei weitem gebräuchlichste Variante von JavaScript: Die meisten Menschen meinen clientseitiges JavaScript, wenn sie von JavaScript sprechen. Dieses Buch dokumentiert clientseitiges JavaScript in Verbindung mit dem Sprachkern von JavaScript, der im clientseitigen JavaScript enthalten ist. Clientseitiges JavaScript kombiniert die Skripting-Fähigkeiten eines JavaScript-Interpreters mit dem von einem Webbrowser definierten Document Object Model (DOM). Dokumente können JavaScript-Skripten enthalten, und diese Skripten können das DOM nutzen, um das Dokument zu modifizieren oder den Webbrowser zu steuern, der das Dokument anzeigt. Man könnte auch sagen, dass clientseitiges JavaScript ansonsten statischen Webinhalten Verhalten hinzufügt. Clientseitiges JavaScript ist das Herz von Webentwicklungstechniken wie DHTML (siehe Kapitel 16) und Architekturen wie Ajax (siehe Kapitel 20). Die Einführung in Kapitel 13 enthält einen Überblick über die vielen Möglichkeiten von clientseitigem JavaScript. Genau wie die ECMA-262-Spezifikation eine Standardversion der JavaScript-Kernsprache definiert, hat das World Wide Web Consortium (W3C) eine DOM-Spezifikation veröffentlicht, die die Features standardisiert, die ein Browser in seinem DOM unterstützen muss. (In den Kapiteln 15, 16 und 17 werden Sie noch viel mehr zu diesem Standard lernen.) Die Kernteile des W3C DOM-Standards werden von den meisten wichtigen Browsern gut unterstützt. Eine wichtige Ausnahme ist Microsofts Internet Explorer, der den W3C-Standard für das Event-Handling nicht unterstützt.

1.3.1

Clientseitige JavaScript-Beispiele

Wenn ein Webbrowser um einen JavaScript-Interpreter erweitert wird, können ausführbare Inhalte als JavaScript-Skripten über das Internet verbreitet werden. Beispiel 1-1 zeigt, wie das aussieht: Es ist ein einfaches JavaScript-Programm oder -Skript, das in eine HTML-Datei eingebettet ist.

4 | Kapitel 1: Einführung in JavaScript

491-0.book Seite 5 Mittwoch, 4. April 2007 9:55 09

e-bol.net Beispiel 1-1: Ein einfaches JavaScript-Programm Fakultäten Fakultätstabelle var fact = 1; for(i = 1; i < 10; i++) { fact = fact*i; document.write(i + "! = " + fact + ""); }

Wenn dieses Skript in einen JavaScript-fähigen Browser geladen wird, liefert es die in Abbildung 1-1 gezeigte Ausgabe.

Abbildung 1-1: Eine Webseite, die mit JavaScript generiert wurde

Wie Sie in diesem Beispiel sehen, werden die Tags und dafür verwendet, JavaScript-Code in eine HTML-Datei einzubetten. Über das -Tag werden Sie in Kapitel 13 mehr erfahren. Das wichtigste JavaScript-Merkmal, das dieses Beispiel zeigt, ist die Methode document.write( ).2 Diese Methode wird verwendet, um dynamisch HTML-Text in ein HTML-Dokument auszugeben, während es in den Browser geladen wird. JavaScript kann nicht nur den Inhalt von HTML-Dokumenten, sondern auch das Verhalten dieser Dokumente steuern. Das heißt, ein JavaScript-Programm könnte auf bestimmte Weise reagieren, wenn Sie in ein Eingabefeld einen Wert eingeben oder die Maus über ihm 2 »Methode« ist der objektorientierte Begriff für eine Funktion oder Prozedur; dieser Begriff wird im ganzen Buch verwendet.

1.3 Clientseitiges JavaScript

| 5

491-0.book Seite 6 Mittwoch, 4. April 2007 9:55 09

e-bol.net schweben lassen. Dazu definiert JavaScript für das Dokument Event-Handler, d.h. JavaScript-Code, der dann ausgeführt wird, wenn ein bestimmtes Event eintritt, zum Beispiel wenn der Anwender einen Button anklickt. Beispiel 1-2 zeigt ein einfaches HTML-Fragment, das einen Event-Handler enthält, der ausgeführt wird, wenn auf einen Button geklickt wird. Beispiel 1-2: Ein HTML-Button, für den ein JavaScript-Event-Handler definiert ist Hier klicken

Abbildung 1-2 zeigt das Ergebnis nach dem Anklicken des Buttons.

Abbildung 1-2: Die JavaScript-Reaktion auf ein Event

Das in Beispiel 1-2 vorgeführte Attribut onclick enthält einen String mit JavaScript-Code, der ausgeführt wird, wenn der Benutzer auf den Button klickt. In diesem Fall ruft der Event-Handler onclick die Funktion alert( ) auf. Wie Sie in Abbildung 1-2 sehen, öffnet alert( ) ein Dialogfenster, um die angegebene Nachricht anzuzeigen. Die Beispiele 1-2 und 1-3 demonstrieren nur die einfachsten Features von clientseitigem JavaScript. Die wahre Macht von JavaScript auf der Clientseite besteht darin, dass Skripten Zugriff auf den Inhalt von HTML-Dokumenten haben. Beispiel 1-3 enthält ein vollständiges, nicht-triviales JavaScript-Programm. Das Programm berechnet die monatlichen Zahlungen für eine Immobilienhypothek oder für einen anderen Kredit, bei dem Kreditbetrag, Zinssatz und Zahlungszeitraum festgelegt sind. Es liest die Benutzereingaben aus HTMLFormularfeldern, führt anhand dieser Eingaben die Berechnungen durch und ändert dann das Dokument, um das Ergebnis der Berechnung anzuzeigen.

6 | Kapitel 1: Einführung in JavaScript

491-0.book Seite 7 Mittwoch, 4. April 2007 9:55 09

e-bol.net Abbildung 1-3 zeigt, wie das Programm aussieht, wenn es in einem Webbrowser angezeigt wird. Wie Sie sehen können, besteht es aus einem HTML-Formular und etwas zusätzlichem Text. Allerdings kann die Abbildung nur eine statische Momentaufnahme des Programms wiedergeben. Durch JavaScript-Code wird das Formular dynamisch: Jedes Mal, wenn der Anwender die Kreditsumme, den Zinssatz oder die Anzahl der Raten verändert, berechnet der JavaScript-Code die monatliche Rate, die Summe aller Raten und die Zinsen, die während der gesamten Laufzeit des Kredits gezahlt werden, neu.

Abbildung 1-3: Ein JavaScript-Rechner für eine Kreditrückzahlung

Die erste Hälfte von Beispiel 1-3 ist ein einfaches CSS-Stylesheet und ein HTML-Formular, das in einer HTML-Tabelle formatiert ist. Beachten Sie, dass Formularelemente die Event-Handler onchange oder onclick definieren. Der Webbrowser löst diese EventHandler aus, wenn der Anwender die Eingabe ändert oder den Button Berechnen anklickt, der auf dem Formular angezeigt wird. In beiden Fällen ist der Wert des EventHandler-Attributs ein String mit JavaScript-Code: berechnen( ). Wenn der Event-Handler ausgelöst wird, führt er diesen Code aus, der die Funktion berechnen( )aufruft. Die Funktion berechnen( ) ist in der zweiten Hälfte des Beispiels innerhalb der Tags definiert. Die Funktion liest die Benutzereingaben aus dem Formular, führt die Berechnungen aus, die erforderlich sind, um die monatliche Rate zu ermitteln, und fügt die Ergebnisse dieser Berechnungen in -Tags, denen extra mit id-Attributen ein Name gegeben wurde, in das Dokument ein. Beispiel 1-3 ist ein kurzes, aber gradliniges Beispiel, das es verdient, dass Sie es sich genau ansehen. Sie sollten nicht erwarten, dass Sie jetzt schon den ganzen Code verstehen, aber

1.3 Clientseitiges JavaScript

| 7

491-0.book Seite 8 Mittwoch, 4. April 2007 9:55 09

e-bol.net das HTML, CSS und JavaScript sind jeweils kommentiert, und eine genaue Betrachtung dieses Beispiels sollte Ihnen ein Gefühl für clientseitiges JavaScript vermitteln.3 Beispiel 1-3: Mit JavaScript Kreditraten berechnen JavaScript-Kreditrechner /* Dies ist ein CSS-Stylesheet: Es fügt der Programmausgabe Styles hinzu. */ .ergebnis { font-weight: bold; } /* Für Elemente mit class="ergebnis" */ #zahlung { text-decoration: underline; } /* Für das Element mit der id="zahlung" */

3 Wenn Ihr Gefühl Ihnen sagt, dass es keine gute Idee ist, HTML-Markup, CSS-Styles und JavaScript-Code auf diese Weise zu mischen, sind Sie nicht allein. Der Trend unter JavaScript-Programmierern und Webdesignern geht dahin, Inhalt, Darstellung und Verhalten in separate Dateien zu packen. Abschnitt 13.1.5 von Kapitel 13 erklärt, wie man das macht.

8 | Kapitel 1: Einführung in JavaScript

491-0.book Seite 9 Mittwoch, 4. April 2007 9:55 09

e-bol.net Beispiel 1-3: Mit JavaScript Kreditraten berechnen (Fortsetzung)

Geben Sie die Kreditinformationen an:
1) Kreditbetrag (in beliebiger Währung):
2) Jährlicher Zinssatz in Prozent:
3) Rückzahlungszeitraum in Jahren:

Zahlungsinformationen:
4) Ihre monatliche Raten:	€
5) Ingesamt zu zahlende Summe:	€
6) Ihre insgesamt zu zahlenden Zinsen:	€

/* * Das ist die JavaScript-Funktion, die bewirkt, dass das Beispiel funktioniert. Beachten * Sie, dass dieses Skript die Funktion berechnen( ) definiert, die von den Event-Handlern * im Formular aufgerufen wird. Die Funktion liest die Werte aus den -Feldern des * Formulars und verwendet dazu die im vorangehenden HTML-Code definierten Namen. Sie * gibt ihre Ergebnisse in den benannten -Elementen aus. */ function berechnen() { // Hole die Benutzereingabe aus dem Formular, und nimm an, dass alles // korrekt ist. Konvertiere die Zinsen von Prozenten in Dezimalform // und von einem Jahres- in einen Monatssatz sowie den Rückzahlungszeitraum // von Jahren in die Anzahl der Monatsraten. var betrag = document.kreditdaten.betrag.value; var zinssatz = document.kreditdaten.zinssatz.value / 100 / 12; var zahlungen = document.kreditdaten.jahre.value * 12; // Berechne die Höhe der Monatsrate mit esoterischen Matheregeln. var x = Math.pow(1 + zinssatz, zahlungen); var monatsrate = (betrag*x*zinssatz)/(x-1); // Die benannten -Elemente aus dem Formular abrufen. var zahlung = document.getElementById("zahlung"); var gesamt = document.getElementById("gesamt"); var gesamtzinsen = document.getElementById("gesamtzinsen"); // Prüfen, dass das Ergebnis eine endliche Zahl ist. Wenn das der Fall ist, wird // das Ergebnis angezeigt, indem der HTML-Inhalt der -Elemente gesetzt wird. if (isFinite(monatsrate)) { zahlung.innerHTML = monatsrate.toFixed(2); gesamt.innerHTML = (monatsrate * zahlungen).toFixed(2); gesamtzinsen.innerHTML = ((monatsrate*zahlungen)-betrag).toFixed(2); } // Andernfalls war die Benutzereingabe wahrscheinlich ungültig, und es wird nichts // angezeigt. else { zahlung.innerHTML = "";

1.3 Clientseitiges JavaScript

| 9

491-0.book Seite 10 Mittwoch, 4. April 2007 9:55 09

e-bol.net Beispiel 1-3: Mit JavaScript Kreditraten berechnen (Fortsetzung) gesamt.innerHTML = "" gesamtzinsen.innerHTML = ""; } }

1.4

JavaScript in anderen Kontexten

JavaScript ist eine Allzweck-Programmiersprache; ihre Verwendung ist nicht auf Webbrowser beschränkt. JavaScript wurde dafür entworfen, in eine Anwendung eingebettet zu werden und sie mit Skriptfähigkeiten auszustatten. Von Anfang an enthielten die Webserver von Netscape einen JavaScript-Interpreter, damit serverseitige Skripten in JavaScript geschrieben werden konnten. Auch Microsoft verwendet den JScript-Interpreter nicht nur im Internet Explorer, sondern auch im IIS-Webserver und im Windows Scripting Host. Adobe nutzt eine von JavaScript abgeleitete Sprache für das Scripting des Flash-Players. Und Sun bündelt seine Java 6.0-Distribution mit einem JavaScript-Interpreter, damit Java-Anwendungen problemlos Scripting-Fähigkeiten hinzugefügt werden können (wie das geht, zeigt Kapitel 12). Sowohl Netscape als auch Microsoft haben ihre JavaScript-Interpreter den Unternehmen und Programmierern zur Verfügung gestellt, die die Interpreter in ihre Anwendungen einbetten möchten. Netscapes Interpreter wurde als Open Source-Produkt veröffentlicht und steht nun über die Organisation Mozilla (http://www.mozilla.org/js/) zur Verfügung. Mozilla bietet zwei verschiedene Versionen des Interpreters für JavaScript 1.5 an. Eine ist in C geschrieben und heißt SpiderMonkey, die andere ist in Java geschrieben und heißt Rhino – eine schmeichelhafte Anspielung auf dieses Buch. Es wird zunehmend mehr Anwendungen geben, die JavaScript als eingebettete Skriptsprache verwenden. Wenn Sie Skripten für solche Anwendungen schreiben, ist der erste Teil dieses Buchs, der den Sprachkern dokumentiert, für Sie von Nutzen. Die Kapitel, die sich speziell auf Webbrowser beziehen, werden für Ihre Skripten wahrscheinlich weniger relevant sein.

1.5

JavaScript erkunden

Der beste Weg, eine neue Programmiersprache wirklich zu erlernen, besteht darin, Programme mit ihr zu schreiben. Ich möchte Sie dazu ermuntern, nicht nur das Buch zu lesen, sondern die Merkmale von JavaScript, die Sie dabei kennenlernen, auch gleich auszuprobieren. Mehrere Verfahren erleichtern das Experimentieren mit JavaScript.

10 | Kapitel 1: Einführung in JavaScript

491-0.book Seite 11 Mittwoch, 4. April 2007 9:55 09

e-bol.net Die nächstliegende Art, JavaScript zu erkunden, besteht darin, einfache Skripten zu schreiben. Eine der angenehmen Eigenschaften von JavaScript ist, dass jeder, der einen Webbrowser und einen einfachen Texteditor besitzt, über eine vollständige Entwicklungsumgebung verfügt. Sie können mit dem Schreiben von JavaScript-Skripten beginnen, ohne vorher spezielle Software kaufen oder herunterladen zu müssen. Beispielsweise könnten Sie Beispiel 1-1 so verändern, dass die Fibonacci-Folge anstelle von Fakultäten angezeigt wird: document.write("Tabelle der Fibonacci-Zahlen"); for (i=0, j=1, k=0, fib =0; i" ausgegeben werden: f1.document.write(""); f1.document.write("document.write('Dies ist das auszugebende Skript')"); f1.document.write("");

Stattdessen kann auch der Schrägstrich in durch einen Backslash maskiert werden: f1.document.write("");

In XHTML werden Skripten in CDATA-Abschnitte eingeschlossen. Das Problem mit den schließenden -Tags tritt dort deswegen nicht auf.

13.2.7 Skripten vor älteren Browsern verbergen Als JavaScript neu war, erkannten einige Browser das -Tag nicht und haben den Inhalt des entsprechenden Elements deswegen (richtigerweise) als Text dargestellt. Der Benutzer, der die Webseite besuchte, sah den JavaScript-Code dann formatiert als einen großen sinnlosen Abschnitt und als Webseiteninhalt dargestellt! Der Workaround für

274 | Kapitel 13: JavaScript in Webbrowsern

491-0.book Seite 275 Mittwoch, 4. April 2007 9:55 09

e-bol.net dieses Problem war ein einfacher Hack, der HTML-Kommentare innerhalb des Skriptelementes verwendet. JavaScript-Programmierer schrieben ihre Skripten üblicherweise wie hier:

clientseitiges JavaScript

Oder etwas kompakter auf diese Weise:

Damit das funktioniert, modifiziert clientseitiges JavaScript die JavaScript-Kernsprache leicht, damit sich die Zeichenfolge Das ist der normale HTML-Inhalt. Aber der IE zeigt ihn wegen der Kommentare darüber und darunter nicht an. Das ist normaler Inhalt, der von allen Browsern angezeigt wird.

Bedingte Kommentare werden auch im JavaScript-Interpreter des IE unterstützt, und für C- und C++-Programmierer werden sie Ähnlichkeit mit der #ifdef/#endif-Funktionalität des C-Präprozessors haben. Im IE beginnt ein bedingter JavaScript-Kommentar mit dem Text /*@cc_on und endet mit dem Text @*/. (Das cc in cc_on steht für bedingte Kompilierung, engl. conditional compilation.) Der folgende bedingte Kommentar schließt Code ein, der nur im IE ausgeführt werden soll: /*@cc_on @if (@_jscript) // Dieser Code befindet sich in einem JS-Kommentar, wird vom IE aber ausgeführt. alert("In IE"); @end @*/

290 | Kapitel 13: JavaScript in Webbrowsern

491-0.book Seite 291 Mittwoch, 4. April 2007 9:55 09

e-bol.net Innerhalb eines bedingten Kommentars begrenzen die Schlüsselwörter @if, @else und @end den Code, der vom JavaScript-Interpreter des IE bedingt ausgeführt werden soll. Meist brauchen Sie nur die oben gezeigte einfache Bedingung: @if (@_jscript). JScript ist Microsofts Name für den eigenen JavaScript-Interpreter, und die Variable @_jscript ist im IE immer true.

/*@cc_on @if (@_jscript) // Code in einem bedingten Kommentar, der auch ein gewöhnlicher // JavaScript-Kommentar ist. Der IE führt ihn aus, andere Browser ignorieren ihn. alert('Sie nutzen den Internet Explorer); @else*/ // Dieser Code befindet sich nicht mehr in einem JavaScript-Kommentar, // aber immer noch im bedingten IE-Kommentar. Das heißt, dass alle Browser außer // dem IE diesen Code ausführen. alert('Sie nutzen nicht den Internet Explorer'); /*@end @*/

Bedingte Kommentare sind sowohl in ihrer HTML- als auch ihrer JavaScript-Form vollkommen standardfremd. Aber gelegentlich können sie nützliche Mittel sein, um Kompatibilität mit dem IE zu erzielen.

13.7 Zugänglichkeit Das Web ist ein wunderbares Werkzeug für die Verbreitung von Informationen, und JavaScript-Programme können den Zugriff auf diese Informationen verbessern. JavaScript-Programmierer müssen allerdings aufpassen: Es passiert schnell, dass man JavaScript-Code schreibt, der Benutzern mit visuellen oder körperlichen Behinderungen unbeabsichtigterweise Informationen verweigert. Blinde Benutzer können eine Form von »Hilfstechnologie« einsetzen, die als Screenreader (auch Bildschirmleseprogramm) bezeichnet wird, um geschriebene Wörter in gesprochene Wörter umzuwandeln. Einige Screenreader berücksichtigen JavaScript, andere funktionieren am besten, wenn JavaScript abgeschaltet ist. Wenn Sie eine Website entwerfen, die zur Anzeige ihrer Informationen JavaScript benötigt, schließen Sie die Nutzer dieser Screenreader aus. (Und Sie haben auch jeden ausgeschlossen, der mit einem Mobilgerät wie einem Handy im Web ist, das keine JavaScript-Unterstützung bietet, und auch alle, die JavaScript in ihren Browsern absichtlich deaktivieren.) Die eigentliche Rolle von JavaScript ist es, die Darstellung der Informationen zu erweitern, und nicht, die Darstellung der Informationen zu übernehmen. Eine Grundregel der JavaScript-Zugäng-

13.7 Zugänglichkeit |

291

clientseitiges JavaScript

Durch eine geschickte Vermischung bedingter Kommentare und gewöhnlicher JavaScript-Kommentare können Sie einen Codeblock so einrichten, dass er im IE läuft, und einen anderen so, dass er in allen anderen Browsern läuft:

491-0.book Seite 292 Mittwoch, 4. April 2007 9:55 09

e-bol.net lichkeit ist es, Ihren Code so zu entwerfen, dass die Webseite, auf der er verwendet wird, immer noch (zumindest in gewisser Weise) funktioniert, wenn der JavaScript-Interpreter abgeschaltet ist. Weitere wichtige Zugänglichkeitsbedenken betreffen Benutzer, die die Tastatur, aber kein Zeigegerät wie eine Maus verwenden können (oder wollen). Wenn Sie JavaScriptCode schreiben, der von mausspezifischen Events abhängig ist, schließen Sie Benutzer aus, die die Maus nicht verwenden. Webbrowser ermöglichen eine Durchquerung und Aktivierung von Webseiten mit der Tastatur, und Ihr JavaScript-Code sollte das auch tun. Aber gleichermaßen sollten Sie auch keinen Code schreiben, der eine Tastatureingabe verlangt, oder Sie schließen Benutzer aus, die keine Tastatur verwenden können, sowie Benutzer vieler Tablet-PC- und Handy-Browser. Wie in Kapitel 17 gezeigt wird, unterstützt JavaScript geräteunabhängige Events wie onfocus und onchange neben geräteabhängigen Events wie onmouseover und onmousedown. Der Zugänglichkeit halber sollten Sie, wenn das möglich ist, die geräteunabhängigen Events vorziehen. Zugängliche Webseiten zu erstellen ist kein triviales Problem, für das es eindeutige Lösungen gibt. Aktuell dauern die Diskussionen an, wie man JavaScript am besten einsetzt, um die Zugänglichkeit zu befördern, anstatt sie zu beeinträchtigen. Eine vollständige Diskussion von JavaScript und der Zugänglichkeit von Webseiten geht über den Horizont dieses Buchs hinaus. Eine Internetsuche liefert Ihnen viele Informationen zu diesem Thema, von denen viele als Empfehlungen autoritativer Quellen verfasst sind. Denken Sie aber daran, dass sich die Praktiken der clientseitigen JavaScript-Programmierung und Hilfstechnologien in der Entwicklung befinden und Zugänglichkeitsrichtlinien damit nicht immer mithalten.

13.8 JavaScript-Sicherheit Die Internet-Sicherheit ist ein weites und komplexes Feld. Dieser Abschnitt konzentriert sich auf Fragen der clientseitigen JavaScript-Sicherheit.

13.8.1 Was JavaScript nicht machen kann Die Einführung von JavaScript-Interpretern in Webbrowser bedeutet, dass das Laden einer Webseite bewirken kann, dass auf Ihrem Rechner beliebiger JavaScript-Code ausgeführt wird. Sichere Webbrowser – und verbreitet verwendete moderne Browser, die relativ sicher zu sein scheinen – schränken Skripten auf verschiedene Weise ein, um bösartigen Code davon abzuhalten, vertrauliche Daten zu lesen, Ihre Daten zu verändern oder Ihre Privatsphäre zu kompromittieren. JavaScripts erste Verteidigungslinie gegen bösartigen Code ist, dass die Sprache bestimmte Funktionalitäten einfach nicht unterstützt. Beispielsweise bietet JavaScript keine Möglichkeit, Dateien oder Verzeichnisse auf dem Clientcomputer zu lesen, zu

292 | Kapitel 13: JavaScript in Webbrowsern

491-0.book Seite 293 Mittwoch, 4. April 2007 9:55 09

e-bol.net schreiben oder zu löschen. Ohne ein File-Objekt und ohne Funktionen für den Dateizugriff kann ein JavaScript-Programm die Daten eines Benutzers nicht löschen oder Viren in das System eines Benutzers einschleusen.

Die folgende Liste enthält Features, die eingeschränkt werden können. Beachten Sie, dass diese Liste nicht vollständig ist. Unterschiedliche Browser haben unterschiedliche Einschränkungen, und viele von diesen Einschränkungen können vom Benutzer konfiguriert werden: • Ein JavaScript-Programm kann neue Browserfenster öffnen, aber um Pop-up-Missbrauch durch Werbung zu verhindern, schränken viele Browser dieses Feature so ein, dass das nur in Reaktion auf ein vom Benutzer initiiertes Event wie einen MausKlick passieren kann. • Ein JavaScript-Programm kann Browserfenster schließen, die es selbst geöffnet hat, aber es darf ohne Benutzerbestätigung keine anderen Fenster schließen. Das verhindert, dass bösartige Skripten self.close( ) aufrufen, um das Browserfenster des Benutzers zu schließen und damit zu bewirken, dass das Programm beendet wird. • Ein JavaScript-Programm kann das Ziel eines Links nicht verschleiern, indem es den Statusleistentext verändert, wenn die Maus über dem Link schwebt. (In der Vergangenheit war es verbreitet, in der Statusleiste zusätzliche Informationen zu einem Link anzuzeigen. Missbrauch durch Phishing-Versuche hat viele Browserhersteller veranlasst, die Funktionalität zu deaktivieren.) • Ein Skript kann kein Fenster öffnen, das zu klein ist (üblicherweise weniger als 100 Pixel auf einer Seite), oder ein Fenster zu stark verkleinern. Gleichermaßen kann ein Skript kein Fenster aus dem Bildschirm schieben oder ein Fenster erzeugen, das größer als der Bildschirm ist. Das hält Skripten davon ab, Fenster zu öffnen, die der Benutzer nicht sehen oder leicht übersehen kann. Ein solches Fenster könnte Skripten enthalten, die weiterlaufen, nachdem der Benutzer denkt, dass sie beendet wurden. Außerdem kann ein Skript kein Browserfenster ohne Titelleiste oder Statusleiste erzeugen, weil ein solches Fenster ein Betriebssystemfenster vortäuschen und den Benutzer so austricksen könnte, dass er beispielsweise ein geheimes Passwort eingibt. • Die value-Eigenschaft von HTML-FileUpload-Elementen kann nicht gesetzt werden. Könnte diese Eigenschaft gesetzt werden, könnte ein Skript einen gewünschten Dateinamen einsetzen und das Formular veranlassen, den Inhalt einer beliebigen angegebenen Datei (wie einer Passwortdatei) auf den Server hochzuladen.

13.8 JavaScript-Sicherheit |

293

clientseitiges JavaScript

Die zweite Verteidigungslinie ist, dass JavaScript bestimmten Features, die es unterstützt, Einschränkungen auferlegt. Beispielsweise kann clientseitiges JavaScript das HTTP-Protokoll skripten, um Daten mit einem Webserver auszutauschen, und kann sogar Daten von FTP-Servern oder anderen Servern herunterladen. Aber JavaScript bietet keine allgemeinen Netzwerk-Grundfunktionen und kann kein Socket für einen anderen Host öffnen oder eine Verbindung von einem anderen Host annehmen.

491-0.book Seite 294 Mittwoch, 4. April 2007 9:55 09

e-bol.net • Ein Skript kann den Inhalt von Dokumenten nicht lesen, die von anderen Servern geladen wurden als das Dokument, das das Skript enthält. Gleichermaßen kann ein Skript keine Event-Listener auf Dokumenten von anderen Servern registrieren. Das verhindert, dass Skripten Benutzereingaben (wie die Tastendrücke, die ein Passwort bilden) für andere Seiten ausspioniert. Diese Einschränkung ist unter dem Namen Same Origin Policy bekannt und wird im folgenden Abschnitt ausführlicher beschrieben.

13.8.2 Die Same Origin Policy Die Same Origin Policy (Gleiche-Herkunft-Richtlinie) ist eine durchschlagende Sicherheitsbeschränkung für die Inhalte, mit denen JavaScript-Code interagieren kann. Üblicherweise kommt sie zum Tragen, wenn eine Webseite mehrere Frames verwendet, -Tags enthält oder andere Browserfenster öffnet. Dann steuert die Same Origin Policy die Interaktion von JavaScript-Code in einem Fenster oder Frame mit anderen Fenstern oder Frames. Sie bewirkt, dass ein Skript nur Eigenschaften von Fenstern und Dokumenten lesen kann, die die gleiche Herkunft wie das Dokument haben, das das Skript enthält (wie Sie JavaScript mit mehreren Fenstern oder Frames verwenden, erfahren Sie in Abschnitt 14.8). Die Same Origin Policy spielt auch eine Rolle, wenn HTTP mit dem XMLHttpRequestObjekt geskriptet wird. Dieses Objekt ermöglicht es clientseitigem JavaScript-Code, beliebige HTTP-Anfragen durchzuführen, allerdings nur an den Webserver, von dem das Dokument geladen wurde, das das Skript enthält (mehr Informationen zum XMLHttpRequest-Objekt finden Sie in Kapitel 20). Die Herkunft eines Dokuments wird über das Protokoll, den Host und den Port der URL definiert, von der das Dokument geladen wurde. Dokumente, die von unterschiedlichen Webservern geladen werden, sind unterschiedlicher Herkunft. Dokumente, die über unterschiedliche Ports auf dem gleichen Host geladen wurden, sind unterschiedlicher Herkunft. Und ein Dokument, das mit dem http:-Protokoll geladen wurde, hat eine andere Herkunft als ein Dokument, das mit dem https:-Protokoll geladen wurde, selbst wenn beide Dokumente vom gleichen Webserver geladen wurden. Es ist wichtig, dass man versteht, dass die Herkunft des Skripts selbst für die Same Origin Policy irrelevant ist: Es geht nur um die Herkunft des Dokuments, in das das Skript eingebettet ist. Nehmen wir beispielsweise an, dass ein Skript von Domain A (über das srcAttribut des -Tag) in eine Webseite von Domain B eingeschlossen ist. Das Skript hat vollständigen Zugriff auf den Inhalt des Dokuments, das es enthält. Wenn das Skript ein neues Fenster öffnet und ein zweites Dokument von Domain B lädt, hat das Skript auch vollständigen Zugriff auf den Inhalt des zweiten Dokuments. Aber wenn das Skript ein drittes Fenster öffnet und darin ein Dokument von Domain C (oder sogar von Domain A) lädt, tritt die Same Origin Policy auf den Plan und verhindert, dass das Skript auf dieses Dokument zugreift.

294 | Kapitel 13: JavaScript in Webbrowsern

491-0.book Seite 295 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Die Same Origin Policy ist erforderlich, um zu verhindern, dass Skripten persönliche Informationen stehlen. Bestände diese Einschränkung nicht, könnte ein bösartiges Skript (das durch eine Firewall hindurch in einen Browser in einem sicheren Unternehmensnetzwerk geladen wird) in der Hoffnung ein leeres Fenster öffnen, dass der Benutzer dieses Fenster verwendet, um Dateien aus dem Unternehmensnetzwerk zu lesen. Das bösartige Skript würde dann den Inhalt dieses Fensters lesen und an seinen eigenen Server zurücksenden. Die Same Origin Policy verhindert derartiges Verhalten. Unter bestimmten Umständen ist die Same Origin Policy zu streng. Insbesondere stellt sie größere Websites vor Probleme, die mehrere Server nutzen. Beispielsweise könnte ein Skript von home.example.com legitimerweise Eigenschaften eines von developer. example.com geladenen Dokuments lesen wollen oder könnten Skripten von orders. example.com Eigenschaften von einem Dokument aus catalog.example.com lesen müssen. Um große Websites dieser Art zu unterstützen, können Sie die domain-Eigenschaft des Document-Objekts einsetzen. Per Default enthält die Eigenschaft domain den Hostnamen des Servers, von dem das Dokument geladen wurde. Sie können diese Eigenschaft setzen, allerdings nur auf einen String, der selbst ein gültiges Domain-Suffix ist. Wenn domain ursprünglich der String »home.example.com« ist, können Sie es also auf den String »example.com« setzen, aber nicht auf »home.example« oder »ample.com«. Außerdem muss der domain-Wert mindestens einen Punkt enthalten. Sie können ihn nicht auf »com« oder eine andere Toplevel-Domain setzen. Wenn zwei Fenster (oder Frames) Skripten enthalten, deren domain auf den gleichen Wert gesetzt ist, wird die Same Origin Policy für diese beiden Fenster gelockert: Die beiden Fenster können dann miteinander interagieren. Beispielsweise können kooperierende Skripten, die von orders.example.com und catalog.example.com geladen wurden, ihre document.domain-Eigenschaften auf »example.com« setzen und es so scheinen lassen, dass sie die gleiche Herkunft haben, und es damit den beiden Dokumenten ermöglichen, die Eigenschaften des jeweils anderen zu lesen.

13.8.3 Plug-ins und ActiveX-Steuerelemente skripten Obwohl der JavaScript-Kernsprache und dem grundlegenden clientseitigen Objektsystem die Dateisystem- und Netzwerkfunktionalitäten fehlen, die bösartiger Code in der

13.8 JavaScript-Sicherheit |

295

clientseitiges JavaScript

Die Same Origin Policy gilt eigentlich nicht für alle Eigenschaften aller Objekte in einem Fenster von einer anderen Domain. Aber sie gilt für viele von ihnen und insbesondere für fast alle Eigenschaften des Document-Objekts (siehe Kapitel 15). Außerdem implementieren die einzelnen Browserhersteller diese Sicherheitsrichtlinie etwas unterschiedlich. (Beispielsweise erlaubt Firefox 1.0 einem Skript auf Fenstern mit anderer Herkunft history.back( ) aufzurufen, der IE 6 aber nicht.) Fenster, die Dokumente von einem anderen Server enthalten, sollten für Ihre Skripten also in jeder Hinsicht tabu sein. Wenn Ihr Skript ein Fenster geöffnet hat, kann Ihr Skript es wieder schließen, aber es kann auf keine Weise in es »hineinblicken«.

491-0.book Seite 296 Mittwoch, 4. April 2007 9:55 09

e-bol.net Regel benötigt, ist die Situation nicht so einfach, wie sie erscheint. In vielen Webbrowsern wird JavaScript als »Script-Engine« für andere Software-Komponenten wie die ActiveX-Steuerelemente des Internet Explorers und die Plug-ins anderer Browser eingesetzt. Das eröffnet clientseitigen Skripten wichtige und mächtige Features. In Kapitel 20 werden Sie Beispiele sehen, in denen ein ActiveX-Steuerelement verwendet wird, um HTTP zu skripten. Ähnliche Beispiele sehen Sie in den Kapiteln 19 und 22, in denen die Javaund Flash-Plug-ins verwendet werden, um Daten persistent zu machen und fortgeschrittene clientseitige Grafiken zu erstellen. Die Möglichkeit, ActiveX-Steuerelemente und Plug-ins zu skripten, hat Auswirkungen auf die Sicherheit. Beispielsweise haben Java-Applets Zugriff auf Lowlevel-Netzwerkfunktionalitäten. Die Java-Sicherheits-»Sandbox« verhindert, dass Applets mit einem anderen Server als dem Server kommunizieren, von dem sie geladen wurden. Das öffnet also keine Sicherheitslücke. Es zeigt aber ein grundlegendes Problem: Wenn Plug-ins geskriptet werden können, müssen Sie nicht nur der Sicherheitsarchitektur des Webbrowsers, sondern auch der Sicherheitsarchitektur des Plug-ins vertrauen. In der Praxis scheint es, als hätten die Java- und Flash-Plug-ins eine robuste Sicherheit, und sie scheinen in clientseitiges JavaScript keine Sicherheitsprobleme einzuführen. ActiveX-Scripting hat allerdings eine kontroversere Vergangenheit. Der IE-Browser hat Zugriff auf eine Vielzahl skriptbarer ActiveX-Steuerelemente, die Teil des Windows-Betriebssystems sind, und in der Vergangenheit hatten einige dieser skriptbaren Steuerelemente ausnutzbare Sicherheitslücken. Aktuell scheint es jedoch so, als wären diese Probleme gelöst worden.

13.8.4 Cross Site Scripting Cross Site Scripting oder XSS ist ein Begriff für eine Kategorie von Sicherheitsproblemen, bei denen ein Angreifer HTML-Tags oder Skripten in eine Ziel-Website einschleust. Der Schutz vor XSS-Angriffen ist normalerweise Aufgabe der serverseitigen Entwickler. Allerdings müssen sich clientseitige JavaScript-Programmierer des Problems Cross Site Scripting bewusst sein und ihren Code davor schützen. Eine Webseite ist für Cross Site Scripting empfänglich, wenn sie dynamisch Dokumentinhalte erzeugt und diese Inhalte auf Daten basieren, die von Benutzern eingegeben wurden und verwendet werden, ohne dass sie zuvor »gesäubert« wurden, indem alle eventuell darin enthaltenen HTML-Tags entfernt werden. Betrachten Sie als Beispiel die folgende Webseite, die JavaScript einsetzt, um den Benutzer mit seinem Namen zu begrüßen: var name = decodeURIComponent(window.location.search.substring(6)) || ""; document.write("Hallo " + name);

296 | Kapitel 13: JavaScript in Webbrowsern

491-0.book Seite 297 Mittwoch, 4. April 2007 9:55 09

e-bol.net Dieses zweizeilige Skript verwendet window.location.search, um einen Teil der eigenen URL zu erhalten, der mit ? beginnt. Dann nutzt es document.write( ), um dem Dokument dynamisch generierten Inhalt hinzuzufügen. Die Seite soll mit einer URL wie dieser aufgerufen werden: http://www.example.com/greet.html?name=David

http://www.example.com/greet.html?name=%3Cscript%3Ealert('David')%3C/script%3E

Mit dieser URL generiert das Skript ein weiteres Skript (%3C und %3E sind die Codes für die spitzen Klammern)! In diesem Fall zeigt das eingeschleuste Skript nur ein Dialogfenster an. Das ist relativ unkritisch. Aber sehen Sie sich folgenden Fall an: http://siteA/greet.html?name=%3Cscript src=siteB/evil.js%3E%3C/script%3E

Cross Site Scripting-Angriffe werden so genannt, weil mehrere Sites beteiligt sind. Die Site B (oder auch Site C) enthält einen besonders aufgebauten Link (wie den oben) auf Site A, der in Site A ein Skript von Site B einschleust. Das Skript evil.js befindet sich auf der bösartigen Site B, ist jetzt aber in Site A eingebettet und kann mit dem Inhalt von Site A absolut alles machen, was es machen will. Es könnte die Seite verunstalten oder bewirken, dass sie nicht mehr funktioniert (indem beispielsweise einer der Denial-of-ServiceAngriffe gestartet wird, die im nächsten Abschnitt beschrieben werden). Das wäre schlecht für die Kundenbeziehungen von Site A. Gefährlicher ist, dass ein bösartiges Skript Cookies lesen kann, die von Site A geschrieben wurden (die vielleicht Kontonummern und andere persönliche zuschreibbare Informationen enthalten), und diese Daten an Site B zurücksenden kann. Das eingeschleuste Skript kann sogar die Tastenbetätigungen des Benutzers aufzeichnen und diese Daten an Site B zurücksenden. Das Mittel zur Verhinderung von XSS-Angriffen ist in der Regel die Entfernung von HTML-Tags aus nicht vertrauenswürdigen Daten, bevor diese verwendet werden, um dynamische Dokumentinhalte zu erzeugen. Die zuvor gezeigte Datei greet.html können Sie reparieren, indem Sie die folgende Codezeile hinzufügen, um die spitzen Klammern zu entfernen, die das -Tag umgeben. name = name.replace(//g, ">");

Cross Site Scripting ermöglicht eine schädliche Schwachstelle, deren Wurzeln tief in die Architektur des Webs reichen. Es lohnt sich, diese Schwachstelle gründlich zu verstehen. Eine weitergehende Erörterung würde über den Horizont dieses Buchs hinausgehen. Es gibt viele Online-Quellen, die Ihnen helfen, sich vor Cross Site Scripting zu schützen. Eine wichtige Primärquelle ist das CERT Advisory zu diesem Problem: http://www.cert. org/advisories/CA-2000-02.html.

13.8 JavaScript-Sicherheit |

297

clientseitiges JavaScript

Wenn sie auf diese Weise verwendet wird, zeigt sie den Text »Hallo David« an. Aber überlegen Sie, wenn sie mit dieser URL aufgerufen wurde:

491-0.book Seite 298 Mittwoch, 4. April 2007 9:55 09

e-bol.net

13.8.5 Denial-of-Service-Angriffe Die Same Origin Policy und andere hier beschriebene Sicherheitsbeschränkungen leisten gute Arbeit, um zu verhindern, dass bösartiger Code versucht, Ihre Daten zu beschädigen oder Ihre Privatssphäre zu verletzen. Allerdings schützen Sie sie nicht vor Denial-of-Service-Angriffen mit brutaler Gewalt. Wenn Sie bei aktiviertem JavaScript eine bösartige Webseite besuchen, kann diese Website Ihren Browser mit einer Endlosschleife mit alert( )-Dialogfenstern lahmlegen und Sie beispielsweise zwingen, den Unix-Befehl kill oder den Windows Task Manager einzusetzen, um Ihren Browser zu schließen. Eine bösartige Website kann auch versuchen, Ihre CPU mit einer Endlosschleife oder sinnlosen Berechnungen lahmzulegen. Einige Browser (wie Firefox) entdecken lange laufende Skripten und geben Benutzern eine Möglichkeit, diese abzubrechen. Das verhindert versehentliche Endlosschleifen, aber bösartiger Code kann Techniken wie den Befehl window.setInterval( ) einsetzen, um zu verhindern, dass er heruntergefahren wird. Ein ähnlicher Angriff legt Ihr System lahm, indem er Massen an Speicherplatz reserviert. Es gibt kein Patentrezept dafür, wie Webbrowser derartige ungeschickte Angriffe verhindern können. In der Praxis ist das im Web aber kein verbreitetes Problem, weil niemand zu einer Site zurückkehrt, die derartigen Skriptmissbrauch treibt!

13.9 Andere webbezogene JavaScript-Einbettungen Neben clientseitigem JavaScript besitzt die Sprache JavaScript weitere webbezogene Einbettungen. Diese weiteren Einbettungen werden in diesem Buch nicht behandelt. Aber Sie sollten sie kennen, damit Sie sie nicht mit clientseitigem JavaScript verwechseln: Benutzer-Scripting Benutzer-Scripting ist eine Neuerung, bei der benutzerdefinierte Skripten auf HTMLDokumente angewendet werden, bevor sie im Webbrowser dargestellt werden. Anstatt allein vom Seitenautor kontrolliert zu werden, können Webseiten jetzt auch vom Besucher der Seite gesteuert werden. Das bekannteste Beispiel für Benutzer-Scripting wird durch die Greasemonkey-Erweiterung für den Firefox-Webbrowser (http:// greasemonkey.mozdev.org) ermöglicht. Die Benutzer-Skripten zur Verfügung gestellte Programmierumgebung ähnelt der Programmierumgebung von clientseitigem JavaScript, ist aber nicht mit ihr identisch. Dieses Buch wird Ihnen nicht zeigen, wie Sie Greasemonkey-Benutzer-Skripten schreiben, aber das Lernen von clientseitiger JavaScript-Programmierung kann als Voraussetzung für das Lernen von Benutzer-Scripting betrachtet werden. SVG SVG (Scalable Vector Graphics) ist ein XML-basiertes Grafikformat, das die Einbettung von JavaScript-Skripten ermöglicht. Clientseitiges JavaScript kann das HTMLDokument skripten, in das es eingebettet ist, und der JavaScript-Code, der in eine

298 | Kapitel 13: JavaScript in Webbrowsern

491-0.book Seite 299 Mittwoch, 4. April 2007 9:55 09

e-bol.net SVG-Datei eingebettet ist, kann die XML-Elemente dieses Dokuments skripten. Das Material der Kapitel 15 und 17 ist auf SVG-Scripting übertragbar, reicht aber nicht aus: Das DOM für SVG unterscheidet sich grundlegend vom HTML DOM.

XUL XUL ist eine XML-basierte Grammatik für die Beschreibung von Benutzerschnittstellen. Das GUI des Firefox-Webbrowsers wird über XUL-Dokumente definiert. Wie SVG gestattet die XUL-Grammatik die Verwendung von JavaScript. Wie bei SVG ist das Material in den Kapiteln 15 und 17 für die XUL-Programmierung relevant. Allerdings hat der JavaScript-Code in einem XUL-Dokument Zugriff auf andere Objekte und APIs und ist außerdem einem anderen Sicherheitsmodell unterworfen als clientseitiger JavaScript-Code. Mehr über XUL erfahren Sie unter http://www.mozilla.org/projects/xul und http://www.xulplanet.com. ActionScript ActionScript ist eine JavaScript-artige Sprache (die von der gleichen ECMAScript-Spezifikation abgeleitet ist, aber in eine objektorientierte Richtung entwickelt wurde), die in Flash-Filmen verwendet wird. Der größte Teil des JavaScript-Materials in Teil I dieses Buchs ist für die ActionScript-Programmierung relevant. Flash ist nicht XML- oder HTML-basiert, und die von Flash veröffentlichten APIs sind nicht mit denen verwandt, die in diesem Buch behandelt werden. Dieses Buch enthält in den Kapiteln 19, 22 und 23 Beispiele dazu, wie clientseitiges JavaScript Flash-Movies skripten kann. Diese Skripten werden notwendigerweise einige Fragmente von ActionScript-Code enthalten, aber der eigentliche Fokus liegt darauf, wie man gewöhnliches clientseitiges JavaScript verwendet, um mit diesem Code zu interagieren.

13.9 Andere webbezogene JavaScript-Einbettungen |

299

clientseitiges JavaScript

Die SVG-Spezifikation finden Sie unter http://www.w3.org/TR/SVG. Appendix B dieser Spezifikation definiert das SVG DOM. Kapitel 22 nutzt clientseitiges JavaScript, das in ein HTML-Dokument eingebettet ist, um ein SVG-Dokument zu erzeugen, das in ein HTML-Dokument eingebettet ist. Da sich der JavaScript-Code nicht im SVG-Dokument befindet, ist das eher ein Beispiel für gewöhnliches clientseitiges JavaScript statt ein Beispiel für die SVG-Einbettung von JavaScript.

491-0.book Seite 300 Mittwoch, 4. April 2007 9:55 09

e-bol.net

KAPITEL 14

Browserfenster skripten

In Kapitel 13 habe ich das Window-Objekt und die zentrale Rolle beschrieben, die es in clientseitigem JavaScript spielt: Es ist das globale Objekt für die clientseitige JavaScriptProgrammierung. In diesem Kapitel untersuchen wir die Eigenschaften und Methoden des Window-Objekts, die es Ihnen ermöglichen, den Browser und seine Fenster und Frames zu steuern. Sie werden hier lernen, wie Sie Folgendes tun: • JavaScript-Code registrieren, damit er später entweder einmal oder öfter ausgeführt wird • Die URL des Dokuments abrufen, das in einem Fenster angezeigt wird, und die Abfrageargumente aus dieser URL herausziehen • Den Browser dazu bringen, ein neues Dokument zu laden und anzuzeigen • Dem Browser sagen, dass er im Verlauf vor- oder zurückgehen und andere Browserfunktionen wie das Drucken aufrufen soll • Neue Browserfenster öffnen, manipulieren und schließen • Einfache Dialogfenster anzeigen • Ermitteln, in welchem Browser Ihr JavaScript-Code ausgeführt wird, und andere Informationen zur clientseitigen Umgebung erhalten • In der Statusleiste eines Browserfensters beliebigen Text anzeigen • Unbehandelte JavaScript-Fehler behandeln, die in einem Fenster auftreten • JavaScript-Code schreiben, der mit mehreren Fenstern oder Frames interagiert Ihnen wird aufgefallen sein, dass es in diesem Kapitel nur um die Manipulation von Browserfenstern geht und nichts zum Inhalt gesagt wird, der in diesen Fenstern angezeigt wird. Als JavaScript neu war, konnte der Dokumentinhalt nur auf sehr eingeschränkte Weise geskriptet werden, während die in diesem Kapitel beschriebenen Scripting-Techniken für Fenster aufregend und frisch waren. Heutzutage, mit vollständig skriptbaren

300 |

491-0.book Seite 301 Mittwoch, 4. April 2007 9:55 09

e-bol.net Dokumenten (siehe Kapitel 15), ist das Scripting des Browsers nicht mehr so topaktuell. Außerdem werden einige der in diesem Kapitel gezeigten Techniken durch Sicherheitsbeschränkungen behindert und funktionieren nicht mehr so gut, wie sie einmal funktioniert haben. Andere Techniken funktionieren noch, sind bei Webdesignern aber nicht mehr so beliebt und werden nicht mehr häufig verwendet.

14.1 Timer Ein wichtiges Feature jeder Programmierumgebung ist die Fähigkeit, Code zu terminieren, dass er zu einem späteren Zeitpunkt ausgeführt wird. Die JavaScript-Kernsprache bietet eine solche Funktionalität nicht, aber clientseitiges JavaScript bietet es in der Form der globalen Funktionen setTimeout( ), clearTimeout( ), setInterval( ) und clearInterval( ). Eigentlich haben diese Funktionen nichts mit dem Window-Objekt zu tun, aber sie werden in diesem Kapitel dokumentiert, weil das Window-Objekt das globale Objekt von clientseitigem JavaScript ist und diese globalen Methoden deswegen Methoden dieses Objekts sind. Die setTimeout( )-Methode des Window-Objekts terminiert eine Funktion so, dass sie ausgeführt wird, nachdem eine bestimmte Anzahl von Sekunden verstrichen ist. setTimeout( ) liefert einen opaken Wert zurück, der an die Funktion clearTimeout( ) übergeben werden kann, um die Ausführung der terminierten Funktion abzubrechen. setInterval( ) ist wie setTimeout( ), bewirkt aber, dass die angegebene Funktion mehr-

fach im Abstand der angegebenen Anzahl von Millisekunden aufgerufen wird. Wie setTimeout( ) liefert setInterval( ) einen opaken Wert zurück, der an clearInterval( )

übergeben werden kann, um weitere Aufrufe der terminierten Funktion abzubrechen. Obwohl empfohlen wird, setTimeout( ) und setInterval( ) so aufzurufen, dass eine Funktion als erstes Argument übergeben wird, ist es auch erlaubt, stattdessen einen String mit JavaScript-Code zu übergeben. Wenn Sie das tun, wird der String (einmal oder mehrfach) aufgerufen, nachdem die angegebene Zeit verstrichen ist. In älteren Browsern wie dem IE 4 werden keine Funktionen unterstützt. In ihnen müssen Sie diese Methode mit einem String als erstem Argument aufrufen. setTimeout( ) und setInterval( ) sind in einer Reihe von Situationen nützlich. Wenn Sie einen Tooltip anzeigen wollen, wenn der Benutzer die Maus länger als eine halbe Sekunde über einem Dokumentelement schweben lässt, können Sie setTimeout( ) ver-

14.1 Timer |

301

clientseitiges JavaScript

Obwohl dieses Kapitel heute weniger relevant ist, ist es nicht vollkommen irrelevant. Deswegen rate ich Ihnen nicht, es zu überspringen. Das Kapitel ist so aufgebaut, dass (der größte Teil) des wichtigsten Materials am Anfang kommt. Darauf folgen weniger wichtige und weniger häufig verwendete Techniken. Einen wichtigeren, aber komplizierteren Abschnitt dazu, wie man JavaScript verwendet, um mit mehreren Fenstern und Frames zu interagieren, spare ich mir bis zum Ende des Kapitels auf, und das Kapitel schließt mit einem nützlichen Beispiel.

491-0.book Seite 302 Mittwoch, 4. April 2007 9:55 09

e-bol.net wenden, um den Code zur Anzeige des Tooltips zu terminieren. Wenn sich die Maus wegbewegt, bevor der Code ausgelöst wird, können Sie clearTimeout( ) verwenden, um den terminierten Code abzubrechen. setTimeout( ) wird später in Beispiel 14-7 vorgeführt. Wenn Sie irgendwelche Animationen durchführen, verwenden Sie üblicherweise setInterval( ), um den Code zu terminieren, der die Animation durchführt. Anwendungen davon werden Sie in den Beispielen 14-4 und 14-6 sehen. Ein nützlicher Trick mit setTimeout( ) ist die Registrierung einer Funktion, die nach einer Verzögerung von 0 Millisekunden aufgerufen wird. Der Code wird nicht sofort aufgerufen, sondern »so bald wie möglich«. In der Praxis heißt das, dass setTimeout( ) dem Browser sagt, dass er die Funktion aufrufen soll, wenn die Ausführung der Event-Handler für die aktuell ausstehenden Events und die Aktualisierung des aktuellen Zustands des Dokuments abgeschlossen ist. Event-Handler (siehe Kapitel 17), die Dokumentinhalt abfragen oder verändern (siehe Kapitel 15), müssen gelegentlich zu diesem Trick greifen, um die Ausführung Ihres Codes hinauszuzögern, bis sich das Dokument wieder in einem stabilen Zustand befindet. Referenzinformationen zu diesen Timer-Funktionen des Window-Objekts finden Sie in Teil IV.

14.2 Die Location- und History-Objekte Dieser Abschnitt betrachtet die Location- und History-Objekte eines Fensters. Diese Objekte bieten Zugriff auf die URL des aktuell angezeigten Objekts und ermöglichen es Ihnen, neue Dokumente zu laden oder den Browser dazu zu bringen, zurück (oder vor) zu einem zuvor betrachteten Dokument zu gehen.

14.2.1 URLs parsen Die location-Eigenschaft eines Fensters (oder eines Frames) ist eine Referenz auf ein Location-Objekt. Es repräsentiert die URL des Dokuments, das aktuell in diesem Fenster angezeigt wird. Die href-Eigenschaft des Location-Objekts ist ein String, der den vollständigen Text der URL enthält. Die toString( )-Methode des Location-Objekts liefert den Wert der href-Eigenschaft zurück. Statt location.href können Sie also auch location verwenden. Andere Eigenschaften dieses Objekts – wie protocol, host, pathname und search – geben die verschiedenen einzelnen Bestandteile der URL an (vollständige Informationen finden Sie beim Location-Objekt in Teil IV). Die search-Eigenschaft des Location-Objekts ist interessant. Sie enthält einen eventuellen Teil einer URL, der auf ein Fragezeichen folgt (und dieses einschließt). Häufig ist das eine Art Abfragestring. Im Allgemeinen ist die Fragezeichensyntax in einer URL eine Technik, über die in eine URL Argumente eingebettet werden können. Während diese Argumente

302 | Kapitel 14: Browserfenster skripten

491-0.book Seite 303 Mittwoch, 4. April 2007 9:55 09

e-bol.net in der Regel für Skripten gedacht sind, die auf einem Server laufen, gibt es keinen Grund dafür, warum sie nicht auch in JavaScript-gesteuerten Webseiten verwendet werden sollen. Beispiel 14-1 zeigt die Definition einer allgemeinen getArgs( )-Funktion, die verwendet werden kann, um Argumente aus der search-Eigenschaft einer URL hinauszuziehen.

/* * * * * * *

clientseitiges JavaScript

Beispiel 14-1: Argumente aus einer URL herausziehen Diese Funktion parst durch Ampersands getrennte Name=Wert-Argumentpaare aus dem Abfragestring der URL. Sie speichert die Name=Wert-Paare in den Eigenschaften eines Objekts und liefert das Objekt zurück. Verwenden Sie sie folgendermaßen:

var args = getArgs( ); // Argumente aus der URL parsen var q = args.q || ""; // Argument verwenden, wenn es definiert ist, sonst einen // Default-Wert * var n = args.n ? parseInt(args.n) : 10; */ function getArgs( ) { var args = new Object( ); var abfrage = location.search.substring(1); // Abfragestring abrufen var paare = abfrage.split("&"); // Bei Ampersand-Zeichen zerlegen for(var i = 0; i < paare.length; i++) { var pos = paare[i].indexOf('='); // Nach "Name=Wert" suchen if (pos == -1) continue; // Wird keiner gefunden, überspringen var argname = paare[i].substring(0,pos); // Den Namen herausziehen var wert = paare[i].substring(pos+1); // Den Wert herausziehen value = decodeURIComponent(wert); // Den Wert, falls erforderlich, dekodieren args[argname] = wert; // Name/Wert-Paar als Eigenschaft speichern } return args; // Das Objekt zurückliefern }

14.2.2 Neue Dokumente laden Obwohl die location-Eigenschaft eines Fensters auf ein Location-Objekt verweist, können Sie der Eigenschaft einen Stringwert zuweisen. Wenn Sie das tun, interpretiert der Browser diesen String als eine URL und versucht, sie zu laden und das Dokument unter dieser URL anzuzeigen. Beispielsweise könnten Sie der Eigenschaft location folgendermaßen eine URL zuweisen: // Wenn der Browser die Funktion Document.getElementById nicht unterstützt, // zu einer statischen Seite umleiten, die diese Funktion nicht benötigt. if (!document.getElementById) location = "staticpage.html";

Beachten Sie, dass die der Eigenschaft location zugewiesene URL in diesem Beispiel eine relative URL ist. Relative URLs werden in Bezug auf die Seite interpretiert, in der sie erscheinen, genauso als würden sie in einem Hyperlink verwendet. Beispiel 14-7 am Ende dieses Kapitels nutzt die Eigenschaft location ebenfalls, um ein neues Dokument zu laden.

14.2 Die Location- und History-Objekte |

303

491-0.book Seite 304 Mittwoch, 4. April 2007 9:55 09

e-bol.net Es ist überraschend, dass das Window-Objekt keine Methode besitzt, die den Browser veranlasst, eine neue Seite zu laden und anzuzeigen. Früher war die Zuweisung einer URL zur location-Eigenschaft eines Fensters die unterstützte Technik zum Laden neuer Seiten. Das Location-Objekt hat allerdings zwei Methoden für verwandte Zwecke. Die Methode reload( ) lädt die aktuell angezeigte Webseite neu vom Webserver. Die Methode replace( ) lädt eine von Ihnen angegebene URL und zeigt sie an. Es hat allerdings andere Auswirkungen, wenn Sie die zweite Methode für eine bestimmte URL aufrufen, als wenn Sie der location-Eigenschaft eines Fensters eine neue URL zuweisen. Wenn Sie replace( ) aufrufen, ersetzt die angegebene URL die aktuelle URL im Verlauf des Browsers, anstatt einen neuen Eintrag in dieser Liste zu erzeugen. Wenn Sie replace( ) einsetzen, um ein Dokument mit einem anderen zu überschreiben, führt der Zurück-Button den Benutzer deswegen nicht zum ursprünglichen Dokument zurück, wie er es macht, wenn Sie ein neues Dokument laden, indem Sie der Eigenschaft location eine URL zuweisen. Bei Webseiten, die Frames einsetzen und viele (vielleicht von einem Serverskript generierte) temporäre Seiten laden, ist replace( ) oft nützlich. Da temporäre Seiten nicht im Verlauf gespeichert werden, ist der Zurück-Button für den Benutzer nützlicher. Verwechseln Sie außerdem die location-Eigenschaft des Window-Objekts, die auf ein Location-Objekt verweist, nicht mit der location-Eigenschaft des Document-Objekts, die einfach ein schreibgeschützter String ist, der keine der besonderen Funktionalitäten des Location-Objekts besitzt. document.location ist ein Synonym für document.URL, dem vorgezogenen Namen für diese Eigenschaft (weil er mögliche Verwirrungen vermeidet). In den meisten Fällen ist document.location mit location.href identisch. Aber wenn es eine Server-Umleitung gibt, enthält document.location die geladene URL, während location.href die URL enthält, die ursprünglich angefordert wurde.

14.2.3 Das History-Objekt Die history-Eigenschaft des Window-Objekts verweist auf das History-Objekt für das Fenster. Ursprünglich wurde das History-Objekt entworfen, um den Surfverlauf in einem Fenster als ein Array der zuletzt besuchten URLs zu modellieren. Es hat sich allerdings herausgestellt, dass das eine schlechte Entwurfsentscheidung war. Aus Gründen der Sicherheit und Privatsphäre ist es fast nie passend, einem Skript Zugriff auf die Liste der Webseiten zu geben, die der Benutzer zuvor besucht hat. Deswegen kann auf die ArrayElemente des History-Objekts über Skripten tatsächlich nie zugegriffen werden. Obwohl auf seine Array-Elemente nicht zugegriffen werden kann, unterstützt das History-Objekt drei Methoden. Die Methoden back( ) und forward( ) gehen im Verlauf eines Fensters (oder Frames) zurück und vor und ersetzen das aktuell angezeigte Dokument durch ein zuvor betrachtetes. Das ähnelt dem, was passiert, wenn der Benutzer auf die Zurück- und Vor-Buttons des Browsers klickt. Die dritte Methode, go( ), erwartet ein ganzzahliges Argument und kann im Verlauf eine beliebige Anzahl von Seiten vor (bei

304 | Kapitel 14: Browserfenster skripten

491-0.book Seite 305 Mittwoch, 4. April 2007 9:55 09

e-bol.net einem positiven Argument) oder zurück (bei einem negative Argument) gehen. Beispiel 14-7 am Ende dieses Kapitels führt die Verwendung der back( )- und forward( )-Methoden des History-Objekts vor.

14.3 Window-, Screen- und Browser-Informationen abrufen Skripten müssen sich manchmal auch Informationen zum Fenster, Desktop oder Browser verschaffen, in dem sie laufen. Dieser Abschnitt beschreibt Eigenschaften der Window-, Screen- und Navigator-Objekte, die es Ihnen ermöglichen, Dinge wie die Größe des Browserfensters, die Größe des Desktops und die Versionsnummer des Webbrowsers zu ermitteln. Diese Informationen ermöglichen es einem Skript, sein Verhalten auf Basis seiner Umgebung anzupassen.

14.3.1 Window-Geometrie Die meisten Browser (die bemerkenswerteste Ausnahme ist der Internet Explorer) unterstützen einen einfachen Satz von Eigenschaften auf dem Window-Objekt, die Informationen zur Größe und Position des Fensters enthalten: // Die Gesamtgröße des Browserfensters auf dem Desktop var windowWidth = window.outerWidth; var windowHeight = window.outerHeight; // Die Position des Browserfensters auf dem Desktop var windowX = window.screenX var windowY = window.screenY // Die Größe des Inhaltsbereichs, in dem das HMTL-Dokument angezeigt wird // Das ist die Fenstergröße abzüglich der Menü-, Werkzeug- und Bildlaufleisten usw. var viewportWidth = window.innerWidth; var viewportHeight = window.innerWidth; // Diese Werte geben die Positionen der horizontalen und vertikalen Bildlaufleisten an. // Sie werden zur Umwandlung zwischen Dokument- und Fensterkoordinaten verwendet. // Diese Werte geben an, welcher Bereich des Dokuments in der linken oberen Ecke // des Bildschirms erscheint. var horizontalScroll = window.pageXOffset; var verticalScroll = window.pageYOffset;

Beachten Sie, dass diese Eigenschaften schreibgeschützt sind. Methoden zur Fenstermanipulation, die es Ihnen ermöglichen, das Fenster zu verschieben, die Fenstergröße zu

14.3 Window-, Screen- und Browser-Informationen abrufen |

305

clientseitiges JavaScript

Netscape- und Mozilla-basierte Browser unterstützen back( )- und forward( )-Methoden auf dem Window-Objekt selbst. Diese nicht-portierbaren Methoden führen die gleichen Aktionen durch wie die Zurück- und Vor-Buttons des Browsers. Wenn Frames verwendet werden, kann es sein, dass window.back( ) eine andere Aktion durchführt als history.back( ).

491-0.book Seite 306 Mittwoch, 4. April 2007 9:55 09

e-bol.net ändern oder das Fenster zu scrollen, werden weiter unten in diesem Kapitel beschrieben. Beachten Sie auch, dass es unterschiedliche Koordinatensysteme gibt, derer Sie sich bewusst sein müssen. Bildschirmkoordinaten beschreiben die Position des Browserfensters auf dem Desktop. Sie werden in Bezug auf die linke obere Ecke des Desktops gemessen. Fensterkoordinaten beschreiben eine Position im Inhaltsbereich des Webbrowsers. Sie werden in Bezug auf die linke obere Ecke des Inhaltsbereichs gemessen. Dokumentkoordinaten beschreiben die Position innerhalb eines HTML-Dokuments. Sie werden in Bezug auf die linke obere Ecke des Dokuments gemessen. Wenn das Dokument länger oder breiter als der Inhaltsbereich ist (was bei Webseiten häufig der Fall ist), sind Dokumentkoordinaten und Fensterkoordinaten nicht identisch. Dann müssen Sie die Position der Bildlaufleisten berücksichtigen, wenn Sie zwischen diesen beiden Koordinatensystemen konvertieren. Mehr zu Dokumentkoordinaten erfahren Sie in den Kapiteln 15 und 16. Wie bereits gesagt wurde, sind die hier aufgeführten Eigenschaften des Window-Objekts im Internet Explorer nicht definiert. Aus irgendeinem Grund packt der IE die Eigenschaften für die Fenstergeometrie in den eines HTML-Dokuments. Und der IE 6 packt diese Eigenschaften, um die Sache noch etwas verwirrender zu machen, in das Element document.documentElement statt in document.body, wenn er ein Dokument mit einer -Deklaration anzeigt. Beispiel 14-2 liefert ausführliche Informationen dazu. Es definiert ein Geometry-Objekt mit Methoden, die eine portable Abfrage der Größe des Inhaltsbereichs, der Position der Bildlaufleiste und der Bildschirmposition ermöglichen. Beispiel 14-2: Portables Abfragen der Fenstergeometrie /** * Geometry.js: Portable Funktionen für die Geometrie von Fenster und Dokument. * * Dieses Modul definiert Funktionen für die Abfrage der Geometrie von Fenster und Dokument. * * getWindowX/Y( ): liefern die Position des Fensters auf dem Bildschirm zurück * getViewportWidth/Height( ): liefern die Größe des Inhaltsbereichs des Browser * getDocumentWidth/Height( ): liefern die Größe des Dokuments * getHorizontalScroll( ): liefert die Position der horizontalen Bildlaufleiste * getVerticalScroll( ): liefert die Position der vertikalen Bildlaufleiste * * Beachten Sie, dass es keine portable Möglichkeit gibt, die Gesamtgröße des Browserfensters * abzufragen. Deswegen gibt es keine getWindowWidth/Height( )-Funktionen. * * ACHTUNG: Dieses Modul muss in den eines Dokuments eingeschlossen werden, * nicht in den des Dokuments. */ var Geometry = {}; if (window.screenLeft) { // IE und andere Geometry.getWindowX = function( ) { return window.screenLeft; }; Geometry.getWindowY = function( ) { return window.screenTop; }; }

306 | Kapitel 14: Browserfenster skripten

491-0.book Seite 307 Mittwoch, 4. April 2007 9:55 09

e-bol.net Beispiel 14-2: Portables Abfragen der Fenstergeometrie (Fortsetzung) else if (window.screenX) { // Firefox und andere Geometry.getWindowX = function( ) { return window.screenX; }; Geometry.getWindowY = function( ) { return window.screenY; }; }

clientseitiges JavaScript

if (window.innerWidth) { // Alle Browsers außer dem IE Geometry.getViewportWidth = function( ) { return window.innerWidth; }; Geometry.getViewportHeight = function( ) { return window.innerHeight; }; Geometry.getHorizontalScroll = function( ) { return window.pageXOffset; }; Geometry.getVerticalScroll = function( ) { return window.pageYOffset; }; } else if (document.documentElement && document.documentElement.clientWidth) { // Funktionen für den IE 6, wenn es einen DOCTYPE gibt Geometry.getViewportWidth = function( ) { return document.documentElement.clientWidth; }; Geometry.getViewportHeight = function( ) { return document.documentElement.clientHeight; }; Geometry.getHorizontalScroll = function( ) { return document.documentElement.scrollLeft; }; Geometry.getVerticalScroll = function( ) { return document.documentElement.scrollTop; }; } else if (document.body.clientWidth) { // Funktionen für IE4, IE5 und IE6 ohne DOCTYPE Geometry.getViewportWidth = function( ) { return document.body.clientWidth; }; Geometry.getViewportHeight = function( ) { return document.body.clientHeight; }; Geometry.getHorizontalScroll = function( ) { return document.body.scrollLeft; }; Geometry.getVerticalScroll = function( ) { return document.body.scrollTop; }; } // Diese Funktionen liefern die Größe des Dokuments zurück. Sie sind nicht fensterbezogen, // sind aber trotzdem nützlich. if (document.documentElement && document.documentElemnet.scrollWidth) { Geometry.getDocumentWidth = function( ) { return document.documentElement.scrollWidth; }; Geometry.getDocumentHeight = function( ) { return document.documentElement.scrollHeight; }; } else if (document.body.scrollWidth) { Geometry.getDocumentWidth = function( ) { return document.body.scrollWidth; }; Geometry.getDocumentHeight = function( ) { return document.body.scrollHeight; }; }

14.3 Window-, Screen- und Browser-Informationen abrufen |

307

491-0.book Seite 308 Mittwoch, 4. April 2007 9:55 09

e-bol.net

14.3.2 Das Screen-Objekt Die screen-Eigenschaft eines Window-Objekts verweist auf ein Screen-Objekt, das Informationen zur Größe der Anzeige des Benutzers und der auf ihr verfügbaren Farben enthält. Die Eigenschaften width und height geben die Größe der Anzeige in Pixeln an. Sie könnten diese Eigenschaften beispielsweise nutzen, um zu entscheiden, welche Größe die Bilder haben sollen, die in ein Dokument eingeschlossen werden sollen. Die Eigenschaften availWidth und availHeight geben die tatsächlich verfügbare Anzeigegröße an. Sie schließen den Raum aus, der von Elementen wie einer Desktop-Taskleiste eingenommen wird. Firefox und verwandte Browser (aber nicht der IE) definieren außerdem availLeft- und availTop-Eigenschaften für das Screen-Objekt. Diese Eigenschaften geben die Koordinaten der ersten verfügbaren Position auf dem Bildschirm an. Wenn Sie ein Skript schreiben, das ein neues Browserfenster öffnet (wie Sie das tun, werden Sie später in diesem Kapitel erfahren), könnten Sie diese Eigenschaften verwenden, um es leichter auf dem Bildschirm zu zentrieren. Beispiel 14-4 weiter unten in diesem Kapitel führt die Verwendung des Screen-Objekts vor.

14.3.3 Das Navigator-Objekt Die navigator-Eigenschaft eines Window-Objekts verweist auf ein Navigator-Objekt, das Informationen zu einem Webbrowser als Ganzem enthält. Beispiele sind die Version und die Liste der Datenformate, die er anzeigen kann. Das Navigator-Objekt hat seinen Namen vom Netscape Navigator, wird aber auch von allen anderen Browsern unterstützt. (Als herstellerneutrales Synonym für navigator unterstützt der IE außerdem clientInformation. Leider haben andere Browser diese vernünftiger benannte Eigenschaft nicht übernommen.) In der Vergangenheit wurde das Navigator-Objekt von Skripten verbreitet verwendet, um zu ermitteln, ob sie im Internet Explorer oder in Netscape laufen. Dieses Verfahren zur Browserermittlung ist problematisch, weil es eine kontinuierliche Anpassung erfordert, wenn neue Browser oder neue Versionen vorhandener Browser eingeführt werden. Heutzutage wird ein Verfahren vorgezogen, das auf einer Funktionalitätsprüfung basiert. Anstatt Annahmen in Bezug auf bestimmte Browser und ihre Funktionalitäten zu machen, prüfen Sie einfach auf die Funktionalität (d.h. die Methode), die Sie benötigen. Als Beispiel sehen Sie hier, wie Sie ein Funktionalitätsprüfungsverfahren für die Methoden zur Event-Handler-Registrierung verwenden (die in Kapitel 17 betrachtet werden): if (window.addEventListener) { // Wenn die Methode addEventListener( ) unterstützt wird, wird diese verwendet. // Das deckt den Fall standardkonformer Browser wie Netscape/Mozilla/Firefox ab. } else if (window.attachEvent) { // Andernfalls wird die Methode attachEvent( ) verwendet, wenn sie existiert.

308 | Kapitel 14: Browserfenster skripten

491-0.book Seite 309 Mittwoch, 4. April 2007 9:55 09

e-bol.net // Das deckt den IE und alle nicht-standardmäßigen Browser ab, die ihn emulieren. } else { // Andernfalls ist keine der Methoden verfügbar. // Das passiert bei älteren Browsern, die kein DHTML unterstützen. }

Das Navigator-Objekt hat fünf Eigenschaften, die Versionsinformationen zu dem Browser liefern, der läuft: appName

Der einfache Name des Webbrowsers. Beim IE ist das »Microsoft Internet Explorer«. Bei Firefox und anderen Browsern, die von der Netscape-Codebasis abgeleitet sind (wie Mozilla und Netscape selbst), ist das »Netscape«. appVersion

Die Versionsnummer und/oder andere Versionsinformationen zu dem Browser. Beachten Sie, dass das als interne Versionsnummer betrachtet werden sollte, da sie nicht immer mit der Versionsnummer übereinstimmt, die für den Benutzer angezeigt wird. Beispielsweise melden Netscape 6 und alle nachfolgenden Versionen von Mozilla und Firefox die Versionsnummer 5.0. Gleichermaßen melden die IE-Versionen 4 bis 6 alle die Versionsnummer 4.0, um eine Kompatibilität mit der Basisfunktionalität dieser vierten Browsergeneration anzuzeigen. userAgent

Der String, den der Browser in seinem USER-AGENT-HTTP-Header sendet. Diese Eigenschaft enthält üblicherweise alle Informationen in appName und appVersion und kann oft noch weitere Informationen enthalten. Es gibt allerdings keine Standardformatierung für diese Informationen. Es ist also nicht möglich, sie auf browserunabhängige Weise zu parsen. appCodeName

Der Codename des Browsers. Netscape nutzt den Codenamen »Mozilla« als Wert dieser Eigenschaft. Aus Kompatibilitätsgründen macht der IE das Gleiche. platform

Die Hardware-Plattform, auf der der Browser läuft. Diese Eigenschaft wurde in JavaScript 1.2 eingeführt. Die folgenden Zeilen JavaScript-Code zeigen alle Eigenschaften des Navigator-Objekts in einem Dialogfenster an: var browser = "BROWSER-INFORMATIONEN:\n"; for(var eigenschaft in navigator) { browser += eigenschaft + ": " + navigator[eigenschaft] + "\n" } alert(browser);

14.3 Window-, Screen- und Browser-Informationen abrufen |

309

clientseitiges JavaScript

Browserermittlung ist manchmal aber trotzdem nützlich. Das ist beispielsweise der Fall, wenn Sie einen bestimmten Fehler umgehen wollen, der in einer bestimmten Version eines bestimmten Browsers auftritt. Das ermöglicht Ihnen das Navigator-Objekt.

491-0.book Seite 310 Mittwoch, 4. April 2007 9:55 09

e-bol.net Abbildung 14-1 zeigt das Dialogfenster, das angezeigt wird, wenn der Code in Firefox 1.5 ausgeführt wird.

Abbildung 14-1: Die Eigenschaften des Navigator-Objekts

Wie Sie auf Abbildung 14-1 sehen können, haben die Eigenschaften des Navigator-Objekts Werte, die manchmal komplexer als das sind, was Sie benötigen. Vielleicht interessieren Sie sich beispielsweise nur für die erste Ziffer der Eigenschaft appVersion. Wenn Sie das Navigator-Objekt verwenden, um Browserinformationen zu prüfen, können Sie Methoden wie parseInt( ) und String.indexOf( ) einsetzen, um nur die Informationen herauszuziehen, die Sie benötigen. Beispiel 14-3 zeigt etwas Code, der das macht: Er verarbeitet die Eigenschaften des Navigator-Objekts und speichert sie in einem Objekt namens browser.

310 | Kapitel 14: Browserfenster skripten

491-0.book Seite 311 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Beispiel 14-3: Browserhersteller und -version ermitteln /** * browser.js: Ein einfacher Client-Sniffer * * Dieses Modul definiert ein Objekt namens "browser", das sich leichter verwenden * lässt als das "navigator"-Objekt. */ var browser = { version: parseInt(navigator.appVersion), isNetscape: navigator.appName.indexOf("Netscape") != -1, isMicrosoft: navigator.appName.indexOf("Microsoft") != -1 };

Ein wichtiger Punkt, den Sie aus diesem Abschnitt mitnehmen sollten, ist, dass die Eigenschaften des Navigator-Objekts keine zuverlässige Browserbeschreibung liefern. Firefox 1.0, zum Beispiel, hat den appName »Netscape« und eine appVersion, die mit »5.0« beginnt. Safari, der nicht auf Mozilla-Code basiert, liefert die gleichen Werte zurück! Und der IE 6.0 hat den appCodeName »Mozilla« und eine appVersion, die mit der Zahl »4.0« beginnt. Der Grund dafür ist, dass früher in alten, bestehenden Webseiten so viel Browser-Sniffing-Code verwendet wurde, dass die Browserhersteller es sich nicht leisten können, die Rückwärtskompatibilität zu brechen, indem sie diese Eigenschaften aktualisieren. Das ist einer der Gründe dafür, dass das Browser-Sniffing weniger hilfreich geworden ist und vom Feature Testing überholt wurde.

14.4 Fenster öffnen und manipulieren Das Window-Objekt definiert eine Reihe von Methoden, die eine hochgradige Steuerung des Fensters selbst ermöglichen. Die folgenden Abschnitte untersuchen, wie diese Methoden es Ihnen ermöglichen, Fenster zu öffnen und zu schließen, die Fenstergröße und -position zu steuern, den Tastaturfokus anzufordern und freizugeben und den Inhalt eines Fensters zu scrollen. Dieser Abschnitt schließt mit einem Beispiel, das einige dieser Features vorführt.

14.4 Fenster öffnen und manipulieren |

311

clientseitiges JavaScript

In ihrer verarbeiteten Form sind diese Eigenschaften leichter zu verwenden als die rohen navigator-Eigenschaften. Der allgemeine Begriff für Code wie diesen ist Client-Sniffer. Komplexeren und allgemeineren Sniffer-Code können Sie im Internet finden. (Siehe beispielsweise http://www.mozilla.org/docs/web-developer/sniffer/browser_type. html.) Aber für viele Zwecke ist Code, der so einfach ist wie der in Beispiel 14-3 gezeigte, vollkommen ausreichend.

491-0.book Seite 312 Mittwoch, 4. April 2007 9:55 09

e-bol.net

14.4.1 Fenster öffnen Ein neues Webbrowserfenster können Sie mit der open( )-Methode des Window-Objekts öffnen. Window.open( ) ist die Methode, die verwendet wird, um über oder unter dem Browser-

fenster neue Fenster zu öffnen, während Sie im Web surfen. Aufgrund dieser Flut nervender Pop-ups haben die meisten Browserhersteller irgendeine Art Pop-up-Blocker integriert. Üblicherweise sind Aufrufe der open( )-Methode nur als Antwort auf eine Benutzeraktion erfolgreich, beispielsweise wenn der Benutzer auf einen Button oder einen Link klickt. JavaScript-Code, der versucht ein Pop-up-Fenster zu öffnen, wenn der Browser eine Seite zum ersten Mal lädt (oder entlädt), schlägt fehl. Window.open( ) erwartet vier optionale Argumente und liefert ein Window-Objekt zurück, das das neu geöffnete Fenster repräsentiert. Das erste Argument für open( ) ist die URL

des Dokuments, das in dem neuen Fenster angezeigt werden soll. Wird dieses Argument weggelassen (oder ist es null oder der leere String), bleibt das Fenster leer. Das zweite Argument für open( ) ist der Name des Fensters. Wie in diesem Kapitel bereits besprochen wurde, kann dieser Wert als Name des target-Attributs eines - oder -Tags nützlich sein. Wenn Sie den Namen eines Fensters angeben, das bereits geöffnet ist, liefert open( ) einfach eine Referenz auf das bestehende Fenster zurück und öffnet kein neues. Das dritte Argument für open( ) ist eine Liste mit Features, die die Fenstergröße und GUIDekorationen angeben. Wenn Sie dieses Argument weglassen, erhält das neue Fenster die Default-Größe und einen vollständigen Satz von Standard-Features: eine Menüleiste, eine Statusleiste, Werkzeugleisten und so weiter. Aber wenn Sie dieses Argument angeben, können Sie explizit die Größe des Fensters und die Features angeben, die es einschließen soll. Beispielsweise können Sie die folgende Zeile JavaScript verwenden, um ein kleines, größenveränderbares Fenster mit einer Statusleiste, aber ohne Menüleiste oder Adressleiste zu erzeugen: var w = window.open("smallwin.html", "Kleines Fenster", "width=400,height=350,status=yes,resizable=yes");

Beachten Sie, dass alle Features weggelassen werden, die Sie nicht explizit angeben, wenn Sie ein drittes Argument angeben. Bei Window.open( ) in Teil IV finden Sie eine vollständige Liste der verfügbaren Features und ihrer Namen. Aus unterschiedlichen Sicherheitsgründen besitzen Browser verschiedene Einschränkungen für die Features, die Sie angeben können. Üblicherweise wird Ihnen beispielsweise nicht gestattet, ein Fenster anzugeben, das zu klein ist oder außerhalb des Bildschirms positioniert wird. Und einige Browser erlauben Ihnen nicht, ein Fenster ohne Statusleiste zu erzeugen. Während Spammer, Phisher und andere Protagonisten der dunklen Seite des Webs immer wieder neue Möglichkeiten finden, Benutzer auszuspionieren, erlegen Browserhersteller der Verwendung der open( )-Methode mehr und mehr Einschränkungen auf.

312 | Kapitel 14: Browserfenster skripten

491-0.book Seite 313 Mittwoch, 4. April 2007 9:55 09

e-bol.net Das vierte Argument für open( ) ist nur dann nützlich, wenn das zweite Argument ein bestehendes Fenster angibt. Dieses vierte Argument ist ein Boolescher Wert, der angibt, ob die URL, die als erstes Argument angegeben wurde, den aktuellen Eintrag im Verlauf des Browserfensters ersetzen soll (true) oder ob ein neuer Eintrag im Verlauf des Browserfensters erzeugt werden soll (false). Das zweite Verhalten ist das Default-Verhalten.

14.4.2 Fenster schließen Genau wie die Methode open( ) ein neues Fenster öffnet, schließt die Methode close( ) ein Fenster. Wenn Sie ein Window-Objekt w erzeugt haben, können Sie es folgendermaßen schließen: w.close( );

JavaScript-Code, der in diesem Fenster selbst läuft, kann es folgendermaßen schließen: window.close( );

Beachten Sie die explizite Verwendung des Bezeichners window, um die close( )-Methode des Window-Objekts von der close( )-Methode des Document-Objekts zu unterscheiden. Die meisten Browser ermöglichen es Ihnen, nur die Fenster automatisch zu schließen, die Ihr eigener JavaScript-Code erzeugt hat. Wenn Sie versuchen, ein anderes Fenster zu schließen, schlägt die Anforderung entweder fehl oder es wird dem Benutzer ein Dialogfenster präsentiert, das ihn auffordert, die Anforderung, das Fenster zu schließen, zu bestätigen (oder abzubrechen). Diese Vorsichtsmaßnahme verhindert, dass unvorsichtige Skripter Code schreiben, der das Haupt-Surffenster schließt. Ein Window-Objekt besteht weiter, nachdem das Fenster geschlossen wurde, das es repräsentiert. Sie sollten allerdings nicht versuchen, eine seiner Eigenschaften zu verwenden. Nur die Eigenschaft closed können Sie prüfen. Diese Eigenschaft ist true, wenn das Fenster geschlossen wurde. Denken Sie daran, dass der Benutzer jedes Fenster jederzeit schließen kann. Es empfiehlt sich, regelmäßig zu prüfen, ob ein Fenster, das Sie zu verwenden versuchen, immer noch geöffnet ist.

14.4 Fenster öffnen und manipulieren |

313

clientseitiges JavaScript

Der Rückgabewert der open( )-Methode ist ein Window-Objekt, das das neu erzeugte Fenster repräsentiert. Sie können dieses Window-Objekt in Ihrem JavaScript-Code verwenden, um das neue Fenster zu referenzieren, wie Sie das implizite Window-Objekt window verwenden, um das Fenster zu referenzieren, in dem Ihr Code läuft. Aber wie ist das mit der umgekehrten Situation? Was ist, wenn JavaScript-Code im neuen Fenster das Fenster referenzieren will, durch das er geöffnet wurde? Die opener-Eigenschaft eines Fensters verweist auf das Fenster, durch das es geöffnet wurde. Wenn das Fenster vom Benutzer statt von JavaScript-Code geöffnet wurde, ist der Wert der opener-Eigenschaft null.

491-0.book Seite 314 Mittwoch, 4. April 2007 9:55 09

e-bol.net

14.4.3 Fenster manipulieren Das Window-Objekt definiert Methoden, die die Größe eines Fensters ändern und das Fenster bewegen. Die Verwendung dieser Methoden wird üblicherweise als sehr schlechter Stil betrachtet: Die Kontrolle über die Größe und Position aller Fenster auf dem Desktop sollte ausschließlich dem Benutzer überlassen bleiben. Moderne Browser haben üblicherweise eine Option, die verhindert, dass JavaScript Fenster bewegt oder ihre Größe ändert, und Sie sollten davon ausgehen, dass diese Option bei einem großen Prozentsatz der Browser aktiviert ist. Außerdem schränken Browser üblicherweise Ihre Möglichkeiten ein, Fenster aus dem Bildschirm zu schieben oder zu klein zu machen, um bösartigen Skripten entgegenzuwirken, die sich auf Code stützen, der in kleinen Fenstern oder Fenstern außerhalb des Bildschirms läuft, die vom Benutzer nicht bemerkt werden. Lesen Sie weiter, wenn Sie, nach all diesen Vorbehalten, immer noch die Größe von Fenstern ändern oder Fenster verschieben wollen. moveTo( ) verschiebt die linke obere Ecke des Fensters an die angegebenen Koordinaten. Gleichermaßen verschiebt moveBy( ) das Fenster um die angegebene Anzahl von Pixeln nach links oder rechts und nach oben oder unten. resizeTo( ) und resizeBy( ) ändern die

Fenstergröße um einen absoluten oder relativen Betrag. Ausführliche Informationen finden Sie in Teil IV.

14.4.4 Tastaturfokus und Sichtbarkeit Die Methoden focus( ) und blur( ) bieten ebenfalls hochgradige Steuerungsmöglichkeiten über ein Fenster. Ein Aufruf von focus( ) fordert, dass das System dem Fenster den Tastaturfokus gibt, und ein Aufruf von blur( ) gibt den Tastaturfokus frei. Außerdem sichert die Methode focus( ), dass das Fenster sichtbar ist, indem es in der Stapelreihenfolge nach oben verschoben wird. Wenn Sie die Methode Window.open( ) verwenden, um ein neues Fenster zu erzeugen, erzeugt der Browser dieses Fenster automatisch oben auf dem Stapel. Aber wenn das zweite Argument den Namen eines Fensters angibt, das bereits besteht, macht die Methode open( ) dieses nicht automatisch sichtbar. Deswegen ist es eine verbreitete Praxis, auf Aufrufe von open( ) einen Aufruf von focus( ) folgen zu lassen.

14.4.5 Scrollen Das Window-Objekt enthält außerdem Methoden, die das Dokument in einem Fenster oder Frame scrollen. scrollBy( ) scrollt das Dokument, das im Fenster angezeigt wird, um die angegebene Anzahl von Pixeln nach links oder rechts und nach oben oder unten. scrollTo( ) scrollt das Dokument zu einer absoluten Position. Es bewegt das Dokument so, dass sich die angegebenen Dokumentkoordinaten in der linken oberen Ecke des Dokumentbereichs des Fensters befinden.

314 | Kapitel 14: Browserfenster skripten

491-0.book Seite 315 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Eine andere Herangehensweise für das Scrolling ist es, die focus( )-Methode von Dokumentelementen (wie Formularfeldern und Buttons) aufzurufen, die den Tastaturfokus annehmen können. Wenn der Fokus auf das Element übertragen wird, wird das Dokument auch gescrollt, um das Element sichtbar zu machen. Beachten Sie, dass das das Element nicht notwendigerweise in die linke obere Ecke des Fensters bringt. Aber es sorgt dafür, dass das Element irgendwo im Fenster sichtbar ist. Die meisten modernen Browser haben eine weitere Scrolling-Methode: Auf einem beliebigen HTML-Dokument kann scrollIntoView( ) aufgerufen werden, um es sichtbar zu machen. Diese Methode versucht, das Element oben im Fenster zu positionieren, aber kann das natürlich nicht, wenn sich das Element in der Nähe des Dokumentendes befindet. scrollIntoView( ) ist nicht so weit verbreitet implementiert wie die Methode focus( ), funktioniert aber auf allen HTML-Elementen, nicht nur auf denen, die den Tastaturfokus annehmen. Mehr zu dieser Methode erfahren Sie im HTMLElementAbschnitt von Teil IV. Eine letzte Möglichkeit, ein Fenster mithilfe der Skriptsteuerung zu scrollen, besteht darin, an allen Orten, zu denen Sie das Dokument scrollen wollen, mit -Tags Anker zu definieren. Dann verwenden Sie die Ankernamen mit der hash-Eigenschaft des Location-Objekts. Wenn Sie am Anfang Ihres Dokuments einen Anker mit dem Namen »top« definieren, können Sie beispielsweise mit Code wie diesem wieder an den Anfang des Dokuments zurückspringen: window.location.hash = "#top";

Diese Technik ist eine wirksame Anwendung der Fähigkeit von HTML, über benannte Anker in einem Dokument zu navigieren. Sie macht die aktuelle Dokumentposition in der Adressleiste des Browsers sichtbar, ermöglicht es, Lesezeichen für diese Position zu setzen, und ermöglicht es dem Benutzer, mit dem Zurück-Button zu seiner vorangehenden Position zurückzugehen, was ein ansprechendes Feature sein kann. Andererseits kann es unter manchen Umständen als Ärgernis betrachtet werden, wenn man den Browserverlauf des Benutzers mit benannten Ankern verstopft, die von einem Skript generiert wurden. Um zu einem benannten Anker zu scrollen, ohne (in den meisten Browsern) einen neuen Verlaufseintrag zu erzeugen, verwenden Sie stattdessen die Methode Location.replace( ): window.location.replace("#top");

14.4 Fenster öffnen und manipulieren |

315

clientseitiges JavaScript

In modernen Browsern haben die HTML-Elemente eines Dokuments (siehe Kapitel 15) offsetLeft- und offsetTop-Eigenschaften, die die X- und Y-Koordinaten des Elements angeben (Methoden zur Ermittlung der Position aller Elemente werden in Abschnitt 16.2.3 behandelt). Nachdem Sie die Position eines Elements ermittelt haben, können Sie die Methode scrollTo( ) verwenden, um ein Fenster so zu scrollen, dass sich ein beliebiges angegebenes Element in der linken oberen Ecke des Fensters befindet.

491-0.book Seite 316 Mittwoch, 4. April 2007 9:55 09

e-bol.net

14.4.6 Beispiel zu Window-Methoden Beispiel 14-4 führt die open( )-, close( )- und moveTo( )-Methoden des Window-Objekts und eine Reihe weiterer Programmiertechniken für Fenster vor, die in diesem Kapitel behandelt wurden. Es erzeugt ein neues Fenster und verwendet dann setInterval( ), um wiederholt eine Funktion aufzurufen, die es über den Bildschirm bewegt. Es ermittelt über das Screen-Objekt die Größe des Bildschirms und verwendet diese Informationen dann, um das Fenster zurückspringen zu lassen, wenn es einen der Ränder des Bildschirms erreicht. Beispiel 14-4: Fenster erzeugen und manipulieren var abprallen = { x:0, y:0, w:200, h:200, dx:5, dy:5, intervall: 100, fenster: null, timer: null,

// // // // //

Fensterposition und Größe Fenstergeschwindigkeit Millisekunden zwischen Aktualisierungen Das Fenster, das wir erzeugen werden Der Rückgabewert von setInterval( )

// Die Animation beginnen. start: function( ) { // Mit dem Fenster im Zentrum des Bildschirms beginnen. abprallen.x = (screen.width - abprallen.w)/2; abprallen.y = (screen.height - abprallen.h)/2; // Das Fenster erzeugen, das wir herumbewegen werden. // Die javascript:-URL ist einfach ein Mittel, um ein kurzes Dokument anzuzeigen. // Das letzte Argument gibt die Fenstergröße an. abprallen.fenster = window.open('javascript:"ABPRALLEN!"', "", "left=" + abprallen.x + ",top=" + abprallen.y + ",width=" + abprallen.w + ",height=" +abprallen.h+ ",status=yes"); // setInterval( ) verwenden, um die Methode naechsterFrame( ) alle intervall // Millisekunden aufzurufen. Den Rückgabewert speichern, damit die Animation // angehalten werden kann, indem er an clearInterval( ) übergeben wird. abprallen.timer = setInterval(abprallen.naechsterFrame, abprallen.intervall); }, // Die Animation anhalten. stop: function( ) { clearInterval(abprallen.timer); // Timer abbrechen if (!abprallen.fenster.closed) abprallen.fenster.close( ); // Fenster schließen }, // Den nächsten Frame der Animation anzeigen. Wird von setInterval( ) aufgerufen. naechsterFrame: function( ) { // Wenn der Benutzer das Fenster geschlossen hat, wird die Animation beendet. if (abprallen.fenster.closed) {

316 | Kapitel 14: Browserfenster skripten

491-0.book Seite 317 Mittwoch, 4. April 2007 9:55 09

e-bol.net Beispiel 14-4: Fenster erzeugen und manipulieren (Fortsetzung) clearInterval(abprallen.timer); return; }

clientseitiges JavaScript

// Zurückspringen, wenn der rechte oder linke Rand erreicht wurde. if ((abprallen.x+abprallen.dx > (screen.availWidth - abprallen.w)) || (abprallen.x+abprallen.dx < 0)) abprallen.dx = -abprallen.dx; // Zurückspringen, wenn der obere oder untere Rand erreicht wurde. if ((abprallen.y+abprallen.dy > (screen.availHeight - abprallen.h)) || (abprallen.y+abprallen.dy < 0)) abprallen.dy = -abprallen.dy; // Die aktuelle Position des Fensters aktualisieren. abprallen.x += abprallen.dx; abprallen.y += abprallen.dy; // Schließlich das Fenster in die neue Position bewegen. abprallen.fenster.moveTo(abprallen.x,abprallen.y); // Die aktuelle Position in der Statusleiste des Fensters anzeigen. abprallen.fenster.defaultStatus = "(" + abprallen.x + "," + abprallen.y + ")"; } } Start Stop

14.5 Einfache Dialogfenster Das Window-Objekt bietet drei Methoden, um dem Benutzer einfache Dialogfenster anzuzeigen. alert( ) zeigt dem Benutzer eine Meldung an und wartet, dass der Benutzer das Dialogfenster schließt. confirm( ) fordert den Benutzer auf, auf einen OK- oder einen Abbrechen-Button zu klicken, um eine Operation zu bestätigen bzw. abzubrechen. Und prompt( ) fordert den Benutzer zur Eingabe eines Strings auf. Obwohl diese Methoden sehr einfach und leicht zu verwenden sind, verlangt gutes Design, dass Sie sie spärlich – am besten überhaupt nicht – einsetzen. Dialogfenster wie diese sind kein gewöhnliches Feature des Webparadigmas und werden mittlerweile immer seltener eingesetzt, da fähige Webbrowser das Scripting des Dokumentinhaltes selbst unterstützen. Die meisten Benutzer werden die Dialogfenster, die von den Methoden alert( ), confirm( ) und prompt( ) erzeugt werden, als Störung ihres Surferlebnisses empfinden. Heutzutage werden diese Methoden oft nur noch für das Debugging verwendet: JavaScript-Progammierer fügen in Code, der nicht funktioniert, häuft alert( )Methoden ein, um zu versuchen, das Problem zu diagnostizieren. (In Beispiel 15-9 finden Sie eine alternative Technik für das Debugging.)

14.5 Einfache Dialogfenster |

317

491-0.book Seite 318 Mittwoch, 4. April 2007 9:55 09

e-bol.net Beachten Sie, dass der Text, der von diesen Dialogfenstern angezeigt wird, Klartext ist, und nicht HTML-formatierter Text. Sie können den Text in diesen Dialogfenstern nur mit Leerzeichen, Zeilenumbrüchen und verschiedenen Interpunktionszeichen steuern. Einige Browser zeigen in der Titelleiste oder der linken oberen Ecke aller Dialogfenster, die mit alert( ), confirm( ) und prompt( ) erzeugt wurden, das Wort »JavaScript« an. Obwohl Designer das nervend finden, sollte das als Feature, nicht als Fehler betrachtet werden: Es dient dazu, dem Benutzer die Herkunft des Dialogfensters klarzumachen und verhindert, dass Hacker Trojaner-Code schreiben, der System-Dialogfenster vortäuscht und den Benutzer so austrickst, dass dieser sein Passwort eingibt oder andere Dinge tut, die er nicht tun sollte. Die Methoden confirm( ) und prompt( ) blockieren – das heißt, dass diese Methoden erst zurückkehren, wenn der Benutzer das Dialogfenster schließt, das von ihnen angezeigt wird. Das bedeutet, dass Ihr Code nicht mehr weiterläuft, wenn eines dieser Dialogfenster geöffnet wird, und dass das Laden des aktuell geladenen Dokuments (wenn es ein solches gibt) angehalten wird, bis der Benutzer die angeforderte Eingabe liefert. Diese Methoden müssen blockieren, weil ihr Rückgabewert die Eingabe des Benutzers ist und die Methoden deswegen auf den Benutzer warten müssen, bevor sie zurückkehren können. In den meisten Browsern blockiert auch die alert( )-Methode und wartet darauf, dass der Benutzer das Dialogfenster schließt. Beispiel 14-5 zeigt eine mögliche Verwendung der Methode confirm( ), die das in Abbildung 14-2 gezeigte Dialogfenster hervorbringt. Beispiel 14-5: Die confirm( )-Methode verwenden function sendeAbfrage( ) { // Das wollen wir den Benutzer fragen. Eine eingeschränkte Formatierung // kann mit Unterstrichen und Zeilenumbrüchen erreicht werden. var meldung = "\n\n\n\n" + "________________________________________________________\n\n" + "Bitte beachten Sie, dass komplexe Abfragen wie Ihre eine\n" + "Minute oder mehr an Suchzeit in Anspruch nehmen können.\n" + "________________________________________________________\n\n\n" + "Bestätigen Sie mit OK oder brechen Sie mit Abbrechen ab."; // Um Bestätigung bitten und abbrechen, wenn diese nicht erteilt wird. if (!confirm(meldung)) return; /* Hier kämme der Code zur Ausführung der Abfrage hin. */ }

318 | Kapitel 14: Browserfenster skripten

491-0.book Seite 319 Mittwoch, 4. April 2007 9:55 09

e-bol.net

clientseitiges JavaScript

Abbildung 14-2: Ein confirm( )-Dialogfenster

14.6 Die Statusleiste skripten Webbrowser zeigen am unteren Rand jedes Fensters üblicherweise eine Statusleiste an, in der der Browser Meldungen für den Benutzer anzeigen kann. Wenn der Benutzer die Maus über einen Hyperlink bewegt, zeigt ein Browser beispielsweise üblicherweise die URL an, auf die der Link zeigt. In alten Browsern können Sie die Eigenschaft status setzen, um Text anzugeben, den der Browser vorübergehend in der Statusleiste anzeigen soll. Die Eigenschaft wurde üblicherweise verwendet, wenn der Benutzer die Maus über einem Hyperlink schweben lies, um anstelle der für Maschinen gedachten URL des Dokuments eine für Menschen lesbare Beschreibung des verlinkten Elements anzuzeigen. Code, der das gemacht hat, sah üblicherweise so aus: Verwirrt? Versuchen Sie die Online-Hilfe.

Wenn sich die Maus über diesen Hyperlink bewegt, wird der JavaScript-Code im onmouseover-Attribut ausgewertet. Er setzt die status-Eigenschaft des Fensters und liefert dann true zurück, um dem Browser zu sagen, dass dieser seine Aktion nicht durchführen soll (d.h., nicht die URL des Hyperlinks anzeigen soll). Dieses Codefragment funktioniert nicht mehr. Häufig wurde Code wie dieser eingesetzt, um Benutzer vorsätzlich über das Ziel eines Links zu täuschen (beim Phishing-Betrug beispielsweise). Moderne Browser haben deswegen die Funktionalität zum Setzen der status-Eigenschaft deaktiviert. Das Window-Objekt definiert außerdem eine defaultStatus-Eigenschaft, die Text angibt, der in der Statusleiste angezeigt werden soll, wenn der Browser nichts anderes (wie Hyperlink-URLs) hat, die dort angezeigt werden sollen. In einigen Browsern funk-

14.6 Die Statusleiste skripten |

319

491-0.book Seite 320 Mittwoch, 4. April 2007 9:55 09

e-bol.net tioniert defaultStatus noch (aber nicht in allen: Firefox 1.0 deaktiviert die Eigenschaft defaultStatus beispielsweise gemeinsam mit der Eigenschaft status). Früher wurde die Eigenschaft defaultStatus beispielsweise verwendet, um StatusleistenAnimationen zu erzeugen. In der Vergangenheit, als Dokumentinhalte noch nicht skriptbar waren, aber die Eigenschaft defaultStatus und die Methode setInterval( ) verfügbar waren, konnten Webentwickler der Versuchung nicht wiederstehen, eine Vielzahl von ablenkenden und grellen Marquee-Animationen zu erzeugen, die eine Meldung über die Statusleiste gescrollt haben. Glücklicherweise sind diese Zeiten vorbei. Allerdings gibt es gelegentlich immer noch Gründe dafür, die Statusleiste zu verwenden, und sogar dafür, sie mit setInterval( ) zu verwenden, wie Beispiel 14-6 zeigt. Beispiel 14-6: Eine geschmackvolle Statusleisten-Animation var VergeudeteZeit = { start: new Date( ), // Die Anfangszeit festhalten zeigeVerstricheneZeit: function( ) { var jetzt = new Date( ); // Wie spät ist es jetzt? // die verstrichenen Minuten berechnen var verstrichen = Math.round((jetzt - VergeudeteZeit.start)/60000); // und versuchen, das in der Statusleiste anzuzeigen. window.defaultStatus = "Sie haben " + verstrichen + " Minuten vergeudet."; } } // Die Statusleiste minütlich aktualisieren. setInterval(VergeudeteZeit.zeigeVerstricheneZeit, 60000);

14.7 Fehlerbehandlung Die onerror-Eigenschaft eines Window-Objekts ist eine besondere Eigenschaft. Wenn Sie dieser Eigenschaft eine Funktion zuweisen, wird diese Funktion jedes Mal aufgerufen, wenn in diesem Fenster ein JavaScript-Fehler auftritt: Die Funktion, die Sie zuweisen, wird zu einem Error-Handler für das Fenster. (Beachten Sie, dass Sie auch einfach eine globale Funktion namens onerror( ) definieren können sollten, da das mit der Zuweisung einer Funktion zur onerror-Eigenschaft eines Window-Objekts äquivalent sein müsste. Im IE funktioniert die Definition einer globalen onerror( )-Funktion allerdings nicht.) Wenn ein JavaScript-Fehler auftritt, werden einem Error-Handler drei Argumente übergeben. Das erste ist eine Nachricht, die den Fehler beschreibt. Das könnte etwas sein wie »missing operator in expression«, »self is read-only« oder »meinname is not defined«. Das zweite Argument ist ein String, der die URL des Dokuments enthält, das den JavaScriptCode enthält, der den Fehler verursacht hat. Das dritte Argument ist die Nummer der Zeile im Dokument, auf der der Fehler aufgetreten ist. Ein Error-Handler kann diese Argumente für beliebige Zwecke verwenden. Ein typischer Error-Handler könnte dem Benutzer die Fehlermeldung anzeigen, den Fehler irgendwo protokollieren oder es erzwingen, dass der

320 | Kapitel 14: Browserfenster skripten

491-0.book Seite 321 Mittwoch, 4. April 2007 9:55 09

e-bol.net Fehler ignoriert wird. Vor JavaScript 1.5 kann der onerror-Handler auch als recht armseliger Ersatz für das try/catch-Exception-Handling dienen (siehe Kapitel 6).

Im Lauf der Zeit haben Browser die Art geändert, wie sie mit JavaScript-Fehlern umgehen. Als JavaScript neu und Webbrowser jung waren, haben Browser üblicherweise jedes Mal ein Dialogfenster aufspringen lassen, wenn ein JavaScript-Fehler aufgetreten ist. Für Entwickler sind diese Dialoge hilfreich, für Endbenutzer sind sie störend. Um zu verhindern, dass Endbenutzer bei einer Produktions-Website jemals einen Fehlerdialog sehen (viele Websites verursachen JavaScript-Fehler, zumindest in einigen Browsern), können Sie einfach einen Error-Handler schreiben, der alle Fehler stillschweigend ignoriert: // Den Benutzer nicht mit Fehlermeldungen belästigen window.onerror = function( ) { return true; }

Als schlecht geschriebener und inkompatibler JavaScript-Code im Web zu wuchern begann und JavaScript-Fehler alltäglich wurden, begannen Webbrowser, Fehler unaufdringlicher zu protokollieren. Das ist für Endbenutzer besser, aber schwerer für JavaScript-Entwickler, die (in Firefox beispielsweise) ein JavaScript-Konsolenfenster öffnen müssen, um zu sehen, welche Fehler aufgetreten sind. Um das während der Codeentwicklung zu vereinfachen, können Sie einen Error-Handler wie diesen definieren: // Fehlermeldungen in einem Dialogfenster anzeigen, aber nie mehr als 3. window.onerror = function(msg, url, line) { if (onerror.num++ < onerror.max) { alert("FEHLER: " + msg + "\n" + url + ":" + line); return true; } } onerror.max = 3; onerror.num = 0;

14.8 Mehrere Fenster und Frames Die meisten Webanwendungen laufen in einem einzelnen Fenster oder öffnen vielleicht kleine Zusatzfenster, um eine Hilfe anzuzeigen. Aber es ist auch möglich, Anwendungen zu erstellen, die zwei oder mehr Frames oder Fenster verwenden und JavaScript-Code einsetzen, um diese Fenster oder Frames miteinander interagieren zu lassen. Dieser Abschnitt erklärt, wie das gemacht wird.1 1 In den Anfangstagen von JavaScript waren Webanwendungen mit mehreren Frames oder Fenstern weit verbreitet. Mittlerweile hat sich der Webdesign-Konsens stark gegen die Verwendung von Frames (aber nicht von Inline-Frames, d.h. IFrames) gewandt, und man sieht auch nicht mehr so häufig Websites, die interagierende Fenster verwenden.

14.8 Mehrere Fenster und Frames |

321

clientseitiges JavaScript

Neben diesen drei Argumenten ist der Rückgabewert des onerror-Handlers wichtig. Wenn der onerror-Handler true zurückliefert, sagt er dem Browser, dass er den Fehler behandelt hat und keine weiteren Handlungen mehr erforderlich sind – anders gesagt, der Browser soll seine eigene Fehlermeldung nicht mehr anzeigen.

491-0.book Seite 322 Mittwoch, 4. April 2007 9:55 09

e-bol.net Bevor wir in die Betrachtung von mehreren Fenstern und Frames einsteigen, macht es Sinn, dass wir uns noch einmal die Implikationen der Same-Origin-Sicherheitsrichtlinie ansehen, die in Abschnitt 13.8.2 betrachtet wurde. Gemäß dieser Sicherheitsrichtlinie kann JavaScript-Code nur mit Inhalten von dem gleichen Webserver interagieren, von dem das Dokument stammt, in das der JavaScript-Code eingebettet ist. Jeder Versuch, Inhalte oder Eigenschaften eines Dokuments von einem anderen Webserver zu lesen, schlägt fehl. Das bedeutet beispielsweise, dass Sie ein JavaScript-Programm schreiben können, das seine eigene Website indiziert, um eine Liste aller Links zu erzeugen, die auf der Site erscheinen. Aber Sie können das Programm nicht so erweitern, dass es diesen Links folgt und die anderen Sites indiziert: Ihr Versuch, eine Liste der Links in einem externen Dokument zu erhalten, schlägt fehl. Später werden Sie in Beispiel 14-7 Code sehen, der aufgrund der Same Origin Policy nicht funktioniert.

14.8.1 Beziehungen zwischen Frames Sie werden sich sicher daran erinnern, dass die open( )-Methode des Window-Objekts ein neues Window-Objekt zurückliefert, das das neu erzeugte Fenster repräsentiert, und dass dieses neue Fenster eine opener-Eigenschaft hat, die auf das ursprüngliche Fenster zurückweist. Auf diese Weise können zwei Fenster aufeinander verweisen und jeweils die Eigenschaften des anderen lesen und die Methoden des anderen aufrufen. Das Gleiche ist mit Frames möglich. Jeder Frame in einem Fenster kann auf alle anderen Frames über die frames-, parent- und top-Eigenschaften des Window-Objekts zugreifen. Der JavaScript-Code in einem beliebigen Fenster oder Frame kann auf sein eigenes Fenster oder seinen eigenen Frame mit window oder self verweisen. Da jedes Fenster und jeder Frame das globale Objekt für den eigenen Code ist, ist eine Verwendung von window oder self nur dann erforderlich, wenn Sie auf das globale Objekt selbst verweisen müssen. Wenn Sie auf eine Methode oder eine Eigenschaft in diesem Fenster oder Frame verweisen möchten, ist es nicht erforderlich (aber in stilistischer Hinsicht manchmal hilfreich), dass Sie dem Eigenschafts- oder Methodennamen window oder self voranstellen. Jedes Fenster hat eine frames-Eigenschaft. Diese Eigenschaft verweist auf ein Array mit Window-Objekten, die jeweils einen Frame repräsentieren, der in dem Fenster enthalten ist. (Wenn ein Fenster keine Frames hat, ist das Array frames[] leer und frames.length gleich null.) Ein Fenster (oder ein Frame) kann seinen ersten Frame also mit frames[0] referenzieren, seinen zweiten Frame mit frames[1] und so weiter. Gleichermaßen kann JavaScript-Code, der in einem Fenster läuft, auf den dritten Subframe seines zweiten Frames folgendermaßen verweisen: frames[1].frames[2]

Jedes Window-Objekt hat außerdem eine parent-Eigenschaft, die auf das WindowObjekt verweist, in dem es enthalten ist. Der erste Frame in einem Fenster kann auf einen Geschwisterframe (hier den zweiten Frame im Fenster) also so verweisen: parent.frames[1]

322 | Kapitel 14: Browserfenster skripten

491-0.book Seite 323 Mittwoch, 4. April 2007 9:55 09

e-bol.net Wenn ein Window-Objekt ein Toplevel-Fenster und kein Frame ist, verweist parent einfach auf das Fenster selbst: parent == self;

// Gilt für jedes Toplevel-Fenster

Frames werden üblicherweise mit - und -Elementen erzeugt. In HTML 4 kann auch das -Element verwendet werden, um in einem Dokument einen Inline-Frame zu erzeugen. Aus JavaScript-Sicht sind Frames, die mit erzeugt wurden, mit Frames identisch, die mit und erzeugt wurden. Alles, was hier gesagt wird, gilt für beide Arten von Frames. Abbildung 14-3 illustriert diese Beziehungen zwischen Frames und zeigt, wie Code, der in einem beliebigen Frame läuft, auf jeden anderen Frame über die Eigenschaften frames, parent und top verweisen kann. Die Abbildung zeigt ein Browserfenster, das zwei Frames enthält, die aufeinandergestapelt sind. Der zweite Frame (der untere, größere) enthält seinerseits drei nebeneinanderliegende Subframes.

14.8.2 Fensternamen und Frame-Namen Das zweite, optionale Argument für die Methode Window.open( ), über das wir bereits gesprochen haben, ist ein Name für das neu erzeugte Fenster. Wenn Sie mit dem HTMLElement einen neuen Frame erzeugen, können Sie einen Namen mit dem Attribut name erzeugen. Ein wichtiger Grund, Namen für Fenster und Frames anzugeben, ist, dass diese Namen als Wert des target-Attributs von - und -Elementen verwendet werden können, um dem Browser zu sagen, wo das Ergebnis einer Link-Aktivierung oder einer Formular-Übermittlung angezeigt werden soll. Wenn Sie zwei Fenster haben, von denen das eine inhaltsverzeichnis und das andere hauptfenster heißt, könnten Sie im inhaltsverzeichnis-Fenster HTML wie das folgende haben: Kapitel 1, Einführung

Der Browser lädt die angegebene URL, wenn der Benutzer auf diesen Hyperlink klickt, aber anstatt die URL im gleichen Fenster wie den Link anzuzeigen, zeigt er sie in dem Fenster mit dem Namen hauptfenster an. Wenn es kein Fenster mit dem Namen hauptfenster gibt, erzeugt ein Klick auf den Link ein Fenster mit diesem Namen und lädt darin die angegebene URL.

14.8 Mehrere Fenster und Frames |

323

clientseitiges JavaScript

Wenn ein Frame in einem anderen Frame enthalten ist, der in einem Toplevel-Fenster enthalten ist, kann dieser Frame auf das Toplevel-Fenster über parent.parent verweisen. Die Eigenschaft top ist allerdings eine allgemeine Abkürzung: Egal wie tief ein Frame einbettet ist, verweist seine top-Eigenschaft auf das einschließende Fenster auf der obersten Ebene. Wenn ein Window-Objekt ein Toplevel-Fenster repräsentiert, verweist top einfach auf dieses Fenster selbst. Bei Frames, die unmittelbare Kinder eines Toplevel-Fensters sind, ist die Eigenschaft top mit der Eigenschaft parent identisch.

491-0.book Seite 324 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Abbildung 14-3: Beziehungen zwischen Frames

Die Attribute target und name sind Teil von HTML und funktionieren ohne die Intervention von JavaScript. Aber es gibt auch JavaScript-bezogene Gründe, Ihren Frames Namen zu geben. Erinnern Sie sich daran, dass jedes Window-Objekt ein frames[]-Array hat, das Referenzen auf jeden seiner Frames enthält. Dieses Array enthält alle Frames in einem Fenster (oder Frame), egal ob sie Namen haben oder nicht. Wenn Sie einem Frame einen Namen geben, wird jedoch auch eine Referenz auf diesen Frame in einer neuen Eigenschaft des Eltern-Window-Objekts gespeichert. Der Name der neuen Eigenschaft entspricht dem Namen des Frames. Deswegen können Sie einen Frame mit HTML wie diesem erzeugen:

Jetzt können Sie auf diesen Frame so aus einem anderen Geschwister-Frame verweisen: parent.inhaltsverzeichnis

324 | Kapitel 14: Browserfenster skripten

491-0.book Seite 325 Mittwoch, 4. April 2007 9:55 09

e-bol.net Das macht Ihren Code besser lesbar und verstehbar als die Verwendung (und das Verlassen auf) hartcodierte Array-Indizes, wie Sie es bei einem unbenannten Frame machen müssten: parent.frames[1]

14.8.3 JavaScript in interagierenden Fenstern In Kapitel 13 haben Sie gelernt, dass das Window-Objekt als das globale Objekt für clientseitigen JavaScript-Code dient und dass das Fenster als Ausführungskontext für den gesamten JavaScript-Code dient, den es enthält. Das gilt auch für Frames: Jeder Frame ist ein unabhängiger JavaScript-Ausführungskontext. Weil jedes Window-Objekt sein eigenes globales Objekt ist, definiert jedes Fenster seinen eigenen Namensraum und seine eigene Menge globaler Variablen. Betrachtet man sie aus der Perspektive mehrerer Frames oder Fenster, scheinen globale Variablen dann aber doch nicht mehr so global zu sein! Obwohl jedes Fenster und jeder Frame einen unabhängigen JavaScript-Ausführungskontext definiert, bedeutet das nicht, dass der JavaScript-Code, der in einem Fenster läuft, von Code isoliert ist, der in anderen Fenstern läuft. Code, der in dem einen Frame läuft, hat am Anfang seiner Geltungsbereichskette ein anderes Window-Objekt als Code, der in einem anderen Frame läuft. Aber der Code beider Frames wird vom gleichen JavaScript-Interpreter in der gleichen JavaScript-Umgebung ausgeführt. Wie Sie gesehen haben, kann ein Frame auf andere Frames über die Eigenschaften frames, parent und top verweisen. Obwohl der JavaScript-Code in separaten Frames also mit unterschiedlichen Geltungsbereichsketten ausgeführt wird, kann der Code in einem Frame trotzdem auf die Variablen und Funktionen zugreifen, die von Code in einem anderen Frame definiert werden. Nehmen Sie beispielsweise an, dass Code in Frame A eine Variable namens i definiert: var i = 3;

Diese Variable ist nichts anderes als eine Eigenschaft des globalen Objekts – eine Eigenschaft des Window-Objekts. Code in Frame A kann auf die Variable explizit mit einem der folgenden Ausdrücke verweisen: window.i self.i

Nehmen Sie jetzt an, dass Frame A einen Geschwister-Frame B hat, der den Wert der Variablen i setzen möchte, die vom Code in Frame A definiert wurde. Wenn Frame B einfach eine Variable i setzt, führt das einfach nur dazu, dass er eine neue Eigenschaft in

14.8 Mehrere Fenster und Frames |

325

clientseitiges JavaScript

Beispiel 14-7 am Ende dieses Kapitels verwendet diese Technik, um Frames zu referenzieren.

491-0.book Seite 326 Mittwoch, 4. April 2007 9:55 09

e-bol.net seinem eigenen Window-Objekt erzeugt. Stattdessen muss er also explizit mit Code wie diesem auf die Eigenschaft i in seinem Geschwister-Frame verweisen: parent.frames[0].i = 4;

Erinnern Sie sich daran, dass das Schlüsselwort function, das Funktionen definiert, genau wie das Schlüsselwort var nur eine Variable deklariert. Wenn JavaScript-Code in Frame A eine Funktion f deklariert, ist diese Funktion nur in Frame A definiert. Code in Frame A kann f folgendermaßen aufrufen: f( );

Aber Code in Frame B muss auf f als Eigenschaft des Window-Objekts von Frame A verweisen: parent.frames[0].f( );

Wenn der Code in Frame B diese Funktion häufig verwenden muss, könnte er die Funktion einer Variablen in Frame B zuweisen, damit er etwas bequemer auf sie verweisen kann: var f = parent.frames[0].f;

Jetzt kann Code in Frame B die Funktion als f( ) aufrufen, genau wie es der Code in Frame A macht. Wenn Sie Funktionen auf diese Weise zwischen Frames oder Fenstern teilen, ist es sehr wichtig, die Regeln der lexikalischen Geltung im Kopf zu behalten. Eine Funktion wird in dem Geltungsbereich ausgeführt, in dem sie definiert wurde, nicht in dem, in dem sie aufgerufen wurde. Unter den Voraussetzungen des vorangehenden Beispiels heißt das also, dass globale Variablen, wenn die Funktion f auf sie verweist, als Eigenschaften von Frame A nachgeschlagen werden, selbst wenn die Funktion aus Frame B aufgerufen wird. Wenn Sie darauf nicht sorgfältig achten, kann das dazu führen, dass sich Ihre Programme auf unerwartete und verwirrende Weise verhalten. Nehmen Sie beispielsweise an, Sie definieren die folgende Funktion im -Abschnitt eines Dokuments mit mehreren Frames und wollen sie zur Debugging-Unterstützung einsetzen: function debug(msg) { alert("Debugging-Meldung von Frame: " + name + "\n" + msg); }

Der JavaScript-Code in jedem Ihrer Frames kann auf diese Funktion über top.debug( ) verweisen. Aber jedes Mal, wenn diese Funktion aufgerufen wird, schlägt sie die Variable name im Kontext des Toplevel-Fensters nach, in dem die Funktion definiert wurde, und nicht im Kontext des Frames, in dem sie aufgerufen wurde. Deswegen hat die Debugging-Meldung immer den Namen des Toplevel-Fensters statt den Namen des Frames, der die Meldung gesendet hat, wie es beabsichtigt war. Denken Sie daran, dass Konstruktoren auch Funktionen sind. Wenn Sie also mit einer Konstruktorfunktion und einem damit verknüpften Prototyp-Objekt eine Klasse von

326 | Kapitel 14: Browserfenster skripten

491-0.book Seite 327 Mittwoch, 4. April 2007 9:55 09

e-bol.net Objekten definieren, ist diese Klasse nur für ein einziges Fenster definiert. Erinnern Sie sich an die Klasse Komplex, die in Kapitel 9 definiert wurde, und betrachten Sie folgendes HTML-Dokument mit mehreren Frames:

clientseitiges JavaScript

JavaScript-Code in den Dateien frame1.html und frame2.html kann Komplex-Objekte nicht mit einem Ausdruck wie diesem erzeugen: var c = new Komplex(1,2);

// Funktioniert in keinem der Frames

Stattdessen muss Code in diesen Daten die Konstruktorfunktion explizit referenzieren: var c = new top.Komplex(3,4);

Alternativ kann Code in beiden Frames eine eigene Variable definieren, um bequemer auf die Konstruktorfunktion verweisen zu können: var Komplex = top.Komplex; var c = new Komplex(1,2);

Im Unterschied zu benutzerdefinierten Konstruktoren sind vordefinierte Konstruktoren automatisch in allen Fenstern vordefiniert. Beachten Sie allerdings, dass jedes Fenster eine separate Kopie des Konstruktors und eine separate Kopie des Prototyp-Objekts des Konstruktors besitzt. Beispielsweise hat jedes Fenster eine eigene Kopie des String( )Konstruktors und des String.prototype-Objekts. Wenn Sie eine neue Methode für die Manipulation von JavaScript-Strings schreiben und diese dann zu einer Methode der Klasse String machen, indem Sie sie dem String.prototype-Objekt des aktuellen Fensters zuweisen, können alle Strings in diesem Fenster die neue Methode verwenden. Aber Strings, die in anderen Fenstern definiert werden, können nicht auf die neue Methode zugreifen. Beachten Sie allerdings, dass es keine Rolle spielt, welches Fenster die Referenz auf den String hält. Es zählt nur das Fenster, in dem der String tatsächlich erzeugt wurde.

14.9 Beispiel: Eine Navigationsleiste in einem Frame Dieses Kapitel schließt mit einem Beispiel, das viele der wichtigeren der hier beschriebenen Scripting-Techniken illustriert: • Die aktuelle URL mit location.href abfragen und neue Dokumente laden, indem die Eigenschaft location gesetzt wird • Die back( )- und forward( )-Methoden des History-Objekts verwenden • setTimeout( ) verwenden, um den Aufruf einer Funktion hinauszuschieben

14.9 Beispiel: Eine Navigationsleiste in einem Frame |

327

491-0.book Seite 328 Mittwoch, 4. April 2007 9:55 09

e-bol.net • Mit window.open( ) ein neues Browserfenster öffnen • JavaScript in einem Frame verwenden, um mit einem anderen Frame zu interagieren • Mit den Einschränkungen klarkommen, die die Same Origin Policy mit sich bringt Beispiel 14-7 ist ein Skript und ein einfaches HTML-Formular, das für die Verwendung in einem Dokument mit Frames gedacht ist. Es erzeugt eine einfache Navigationsleiste in einem Frame und verwendet diese Leiste, um den Inhalt eines anderen Frames zu steuern. Die Navigationsleiste schließt einen Zurück-Button, einen Vor-Button und ein Textfeld ein, in das der Benutzer eine URL eingeben kann. Sie können die Navigationsleiste am unteren Rand von Abbildung 14-4 sehen.

Abbildung 14-4: Eine Navigationsleiste

Beispiel 14-7 definiert JavaScript-Funktionen in einem -Element und Buttons und ein Textfeld für die URL-Eingabe in einem -Element. Es nutzt HTML-Event-Handler, um diese Funktionen aufzurufen, wenn die Buttons angeklickt werden. Event-Handler und HTML-Formulare habe ich noch nicht ausführlich behandelt. Aber diese Aspekte des Codes sind hier nicht wichtig. In diesem Beispiel werden Sie Anwendungen der Locationund History-Objekte sowie der Funktionen setTimeout( ) und Window.open( ) sehen. Sie werden sehen, wie der JavaScript-Code im Frame mit der Navigationsleiste über den

328 | Kapitel 14: Browserfenster skripten

491-0.book Seite 329 Mittwoch, 4. April 2007 9:55 09

e-bol.net Namen auf den anderen Frame verweist, und werden außerdem die Verwendung von try/catch-Blöcken an Orten sehen, wo die Same Origin Policy dafür verantwortlich sein könnte, dass der Code fehlschlägt. Beispiel 14-7: Eine Navigationsleiste clientseitiges JavaScript

Der Code in dieser Datei steuert den Inhalt im Frame namens "main". --> // Diese Funktion wird vom Zurück-Button der Navigationsleiste aufgerufen. function zurueck( ) { // Erst das Eingabefeld für die URL im Formular leeren. document.navbar.url.value = ""; // Dann das History-Objekt des Haupt-Frames verwenden, um zurückzugehen. // Es sei denn, die Same Origin Policy kommt uns in die Quere. try { parent.main.history.back( ); } catch(e) { alert("Same Origin Policy blockiert History.back( ): " + e.message); } // Die URL des Dokuments anzeigen, zu dem wir zurückgegangen sind, wenn das möglich ist. // Dieser Aufruf von updateURL( ) muss hinausgezögert werden, damit er funktioniert. setTimeout(updateURL, 1000); } // Diese Funktion wird vom Vor-Button der Navigationsleiste aufgerufen. function vor( ) { document.navbar.url.value = ""; try { parent.main.history.forward( ); } catch(e) { alert("Same Origin Policy blockiert History.forward( ): "+e.message);} setTimeout(updateURL, 1000); } // Diese private Funktion wird von back( ) und forward( ) eingesetzt, um das URL-Textfeld // des Formulars zu aktualisieren. In der Regel verhindert die Same Origin Policy, dass // wir die location-Eigenschaft des Haupt-Frames abfragen. function aktualisiereURL( ) { try { document.navbar.url.value = parent.main.location.href; } catch(e) { document.navbar.url.value = ""; } }

14.9 Beispiel: Eine Navigationsleiste in einem Frame |

329

491-0.book Seite 330 Mittwoch, 4. April 2007 9:55 09

e-bol.net Beispiel 14-7: Eine Navigationsleiste (Fortsetzung) // Hilfsfunktion: Wenn die URL nicht mit "http://" beginnt, fügen wir das hinzu. function repariere(url) { if (url.substring(0,7) != "http://") url = "http://" + url; return url; } // Diese Funktion wird vom Gehe-Button der Navigationsleiste aufgerufen und auch, // wenn der Benutzer das Formular abschickt. function gehe( ) { // Die angegebene URL in den Haupt-Frame laden. parent.main.location = repariere(document.navbar.url.value); } // Ein neues Fenster anzeigen und die vom Benutzer angegebene URL in ihm anzeigen. function zeigeInNeuemFenster( ) { // Wir öffnen ein gewöhnliches, unbenanntes, vollständiges Fenster, deswegen müssen // wir nur das URL-Argument angeben. Nachdem das Fenster geöffnet wurde, hat unsere // Navigationsleiste keine Kontrolle mehr darüber. window.open(repariere(document.navbar.url.value)); } URL:

330 | Kapitel 14: Browserfenster skripten

491-0.book Seite 331 Mittwoch, 4. April 2007 9:55 09

e-bol.net

KAPITEL 15

Dokumente skripten

Clientseitiges JavaScript dient dazu, statische HTML-Dokumente in interaktive Webanwendungen zu verwandeln. Das Scripting des Inhalts von Webseiten ist die Raison d’Être von JavaScript. Dieses Kapitel – das wichtigste in Teil II – erklärt, wie man das macht. Jedes Fenster (oder jeder Frame) eines Webbrowsers zeigt ein HTML-Dokument an. Das Window-Objekt, das dieses Fenster repräsentiert, hat eine document-Eigenschaft, die auf ein Document-Objekt verweist. Dieses Document-Objekt ist der Gegenstand dieses Kapitels, das mit einer Betrachtung der Eigenschaften und Methoden des DocumentObjekts selbst beginnt. Diese sind interessant, aber sie sind nur der Anfang. Interessanter als das Document-Objekt selbst sind die Objekte, die den Inhalt des Dokuments repräsentieren. HTML-Dokumente können Text, Bilder, Hyperlinks, Formularelemente und so weiter enthalten. JavaScript-Code kann auf die Objekte zugreifen, die die einzelnen Dokumentelemente repräsentieren, und sie manipulieren. Direkt auf die Objekte zugreifen zu können, die den Inhalt eines Dokuments repräsentieren, eröffnet sehr viele Möglichkeiten, aber das ist auch der Punkt, an dem die Sache beginnt, kompliziert zu werden. Ein Document Object Model (Dokumentobjektmodell) oder DOM ist eine API, die definiert, wie auf die Objekte zugegriffen wird, aus denen ein Dokument besteht. Das W3C definiert ein Standard-DOM, das von allen modernen Webbrowsern hinreichend gut unterstützt wird. Unglücklicherweise war das nicht immer der Fall. Die Geschichte der clientseitigen JavaScript-Programmierung ist eigentlich die Geschichte der (manchmal auf inkompatible Weise erfolgenden) Evolution des DOMs. In den Anfangstagen des Webs war Netscape der führende Browserhersteller und definierte die APIs für das clientseitige Scripting. Netscape 2 und 3 unterstützten ein einfaches DOM, das nur Zugriff auf besondere Dokumentelemente wie Links, Grafiken und Formularelemente bot. Dieses Alt-DOM wurde von allen Browser-Herstellern übernommen und als »Level 0 DOM« formell in den W3C-Standard integriert. Das Alt-DOM funktioniert immer noch in allen Browsern, und es ist das, das ich zuerst behandeln werde.

|

331

491-0.book Seite 332 Mittwoch, 4. April 2007 9:55 09

e-bol.net Mit dem Internet Explorer 4 übernahm Microsoft die Kontrolle des Webs. IE 4 hatte ein revolutionäres neues DOM: Es bot Zugriff auf alle Elemente in einem Dokument und ermöglichte es Ihnen, diese auf interessante Weise zu skripten. Es ermöglicht Ihnen sogar, den Text eines Dokuments zu ändern, und lässt die Absätze des Dokuments neu einfließen, wenn das erforderlich ist. Microsofts API ist als das IE 4 DOM bekannt. Es wurde nie standardisiert, und der IE 5 und spätere Versionen übernahmen das W3C DOM, bewahrten aber Unterstützung für das IE 4 DOM. Teile des IE 4 DOMs wurden von anderen Browsern übernommen und werden im Web immer noch verwendet. Ich werde es am Ende des Kapitels erklären, nachdem ich die standardmäßige Alternative behandelt habe. Netscape 4 wählte einen ganz anderen Ansatz für das DOM, der auf dynamisch positionierbaren skriptbaren Elementen basierte, die als Layer bezeichnet wurden. Dieses Netscape 4 DOM war eine Evolutionssackgasse. Es wurde nur in Netscape 4 unterstützt und in den Mozilla- und Firefox-Browsern fallengelassen, die sich aus der Netscape-Codebasis entwickelten. Die Behandlung des Netscape 4 DOMs wurde in dieser Auflage aus dem Buch entfernt. Der Hauptteil dieses Kapitels behandelt den W3C DOM-Standard. Beachten Sie allerdings, dass ich hier nur die Kernteile des Standards vorstelle. Das Scripting von Dokumentinhalten ist der Hauptgrund für clientseitiges JavaScript, und die meisten nachfolgenden Kapitel dieses Buchs sind eigentlich Fortsetzungen dieses Kapitels. Kapitel 16 behandelt den W3C DOM-Standard für die Arbeit mit CSS-Styles und -Stylesheets. Kapitel 17 behandelt den W3C DOM-Standard für das Event-Handling (sowie die alten und IE-spezifischen Techniken, diese Dinge zu erledigen). Kapitel 18 erklärt das DOM für die Interaktion mit HTML-Formularelementen, und Kapitel 22 erklärt, wie man die -Elemente eines HTML-Dokuments skriptet und clientseitigen Webseiten geskriptete Grafiken hinzufügt. Das Level 0 DOM definiert nur eine einzige Document-Klasse, und dieses Kapitel verweist häufig informell als Document-Objekt darauf. Das W3C DOM definiert jedoch eine Document API, die eine allgemeine Dokumentfunktionalität stellt, die auf HTMLund XML-Dokumente anwendbar ist, und definiert daneben eine spezialisierte HTMLDocument API, die HTML-spezifische Eigenschaften und Methoden hinzufügt. Das Referenzmaterial in Part IV dieses Buchs folgt der W3C-Konvention: Wenn Sie nach HTML-spezifischen Document-Features suchen, schauen Sie unter HTMLDocument nach. Die meisten der Features von Level 0 DOM sind HTML-spezifisch und müssen unter HTMLDocument nachgeschlagen werden, auch wenn dieses Kapitel auf sie als Eigenschaften und Methoden von Document verweist.

332 | Kapitel 15: Dokumente skripten

491-0.book Seite 333 Mittwoch, 4. April 2007 9:55 09

e-bol.net

15.1 Dynamischer Dokumentinhalt

var heute = new Date( ); document.write("

Dokumentzugriff um: " + heute.toString( ));

Achten Sie jedoch darauf, dass Sie mit der Methode write( ) nur HTML in das aktuelle Dokument ausgeben können, während das Dokument geparst wird. Das heißt, dass Sie document.write( ) nur aus Toplevel-Code in -Tags aufrufen können, weil diese Skripten als Teil des Parsing-Vorgangs für das Dokument ausgeführt werden. Wenn Sie einen document.write( )-Aufruf in eine Funktionsdefinition packen und diese Funktion dann von einem Event-Handler aus ausrufen, funktioniert das nicht wie erwartet – stattdessen löschen Sie das aktuelle Dokument und das Skript, das es enthält! (Warum das passiert, werden Sie in Kürze sehen.) document.write( ) fügt an der Stelle Text ein HTML-Dokument ein, an der sich das -Tag befindet, das den Aufruf der Methode enthält. Wenn ein -Tag das Attribut defer trägt, darf es überhaupt keine Aufrufe von document.write( ) enthalten. Das Attribut defer sagt dem Webbrowser, dass es sicher ist, die Ausführung des Skripts

so lange aufzuschieben, bis das Dokument vollständig geladen wurde. Und wenn das passiert ist, ist es zu spät, um mit document.write( ) Inhalt in das Dokument einzufügen, während es geparst wird. Mit der Methode write( ) Dokumentinhalt zu generieren, während das Dokument geparst wird, war eine sehr verbreitete JavaScript-Programmiertechnik. Das W3C DOM ermöglicht es Ihnen jetzt (unter Einsatz von Techniken, die Sie später kennenlernen werden), in einen beliebigen Teil des Dokuments Inhalte einzufügen, nachdem es geparst wurde. Trotzdem ist die Verwendung von document.write( ) immer noch sehr verbreitet. Sie können die write( )-Methode (in Verbindung mit den open( )- und close( )-Methoden) des Document-Objekts auch verwenden, um vollständig neue Dokumente in anderen Fenstern oder Frames zu erzeugen. Obwohl Sie aus einem Event-Handler heraus nicht brauchbar in das aktuelle Dokument schreiben können, gibt es keinen Grund, nicht in andere Fenster oder Frames schreiben zu können. Beispielsweise könnten Sie ein Pop-up-Fenster erzeugen und mit Code wie dem folgenden etwas HTML in es schreiben:

15.1 Dynamischer Dokumentinhalt |

333

clientseitiges JavaScript

Beginnen wir die Erforschung des Document-Objekts mit seiner write( )-Methode, die es Ihnen ermöglicht, Inhalt in das Dokument zu schreiben. Diese Methode ist Teil des AltDOMs und existiert seit den frühesten Versionen von JavaScript. document.write( ) kann auf zweierlei Weise verwendet werden. Die erste und einfachste Möglichkeit ist die Verwendung in einem Skript, um HTML in das Dokument auszugeben, das gerade geparst wird. Betrachten Sie den folgenden Code, der write( ) einsetzt, um einem ansonsten statischen HTML-Dokument das aktuelle Datum hinzuzufügen:

491-0.book Seite 334 Mittwoch, 4. April 2007 9:55 09

e-bol.net // Diese Funktion öffnet ein Pop-up-Fenster. Rufen Sie sie aus einem Event-Handler // auf, da das Pop-up ansonsten wahrscheinlich blockiert wird. function hallo( ) { var w = window.open( ); // Ein neues Fenster ohne Inhalt erzeugen var d = w.document; // Sein Document-Objekt abrufen d.open( ); // Ein neues Dokument beginnen (optional) d.write("Hallo Welt!"); // Den Dokumentinhalt ausgeben d.close( ); // Das Dokument beenden }

Um ein neues Dokument zu erzeugen, rufen Sie zunächst die open( )-Methode des Document-Objekts auf. Dann rufen Sie beliebig oft write( ) auf, um den Inhalt des Dokuments zu erzeugen. Abschließend rufen Sie die close( )-Methode des Document-Objekts auf, um anzuzeigen, dass Sie fertig sind. Dieser letzte Schritt ist wichtig. Wenn Sie vergessen, das Dokument zu schließen, beendet der Browser die Animation nicht, die er anzeigt, wenn er ein Dokument lädt. Außerdem kann es sein, dass der Browser das HTML puffert, das Sie geschrieben haben. Es ist nicht erforderlich, dass die gepufferte Ausgabe angezeigt wird, bis Sie das Dokument explizit beenden, indem Sie close( ) aufrufen. Im Unterschied zum close( )-Aufruf, der erforderlich ist, ist der open( )-Aufruf optional. Wenn Sie die Methode write( ) auf einem Dokument aufrufen, das bereits geschlossen wurde, öffnet JavaScript implizit ein neues HTML-Dokument, als hätten Sie die Methode open( ) aufgerufen. Das erklärt, was passiert, wenn Sie document.write( ) aus einem Event-Handler im gleichen Dokument aufrufen: JavaScript öffnet ein neues Dokument. Bei diesem Vorgang wird das aktuelle Dokument (und sein Inhalt einschließlich Skripten und Event-Handlern) aber verworfen. Eine allgemeine Faustregel ist deswegen, dass ein Dokument auf sich selbst nie write( ) aus einem Event-Handler aufrufen soll. Ein paar abschließende Bemerkungen zur write( )-Methode. Erstens wissen viele Leute nicht, dass die Methode write( ) mehrere Argumente akzeptiert. Wenn Sie mehrere Argumente übergeben, werden diese nacheinander ausgegeben – so, als wären sie verkettet worden. Statt document.write("Hallo, "

+ benutzer + " Willkommen bei meinem Blog!");

könnten Sie auch Folgendes schreiben: var begruessung = "Hallo, "; var willkommen = " Willkommen bei meinem Blog!"; document.write(begruessung, benutzer, willkommen);

Der zweite beachtenswerte Punkt zur Methode write( ) ist, dass das Document-Objekt auch eine writeln( )-Methode unterstützt, die mit der write( )-Methode in jeder Hinsicht identisch ist, allerdings nach Ausgabe der Argumente einen Zeilenumbruch anhängt. Das kann beispielsweise hilfreich sein, wenn man in einem -Element vorformatierten Text ausgibt. Bei HTMLDocument in Teil IV finden Sie vollständige Informationen zu den Methoden write( ), writeln( ), open( ) und close( ).

334 | Kapitel 15: Dokumente skripten

491-0.book Seite 335 Mittwoch, 4. April 2007 9:55 09

e-bol.net

15.2 Document-Eigenschaften Nachdem wir uns die Alt-Methoden des Document-Objekts angesehen haben, wenden wir uns jetzt seinen Alt-Eigenschaften zu: bgColor

cookie

Eine besondere Eigenschaft, die es JavaScript-Programmen ermöglicht, HTTPCookies zu lesen und zu schreiben. Diese Eigenschaft ist Gegenstand eines eigenen Kapitels, Kapitel 19. domain

Eine Eigenschaft, die es sich gegenseitig vertrauenden Webservern in der gleichen Internet-Domain ermöglicht, gemeinsam die Same Origin Policy-Sicherheitseinschränkung für Interaktionen zwischen ihren Webseiten zu lockern (siehe Abschnitt 13.8.2). lastModified

Ein String, der das Veränderungsdatum des Dokuments enthält. location

Ein veraltetes Synonym für die Eigenschaft URL. referrer

Die URL des Dokuments, das einen eventuellen Link enthielt, über den der Browser zum aktuellen Dokument gelangt ist. title

Der Text zwischen den - und -Tags dieses Dokuments. URL

Ein String, der die URL angibt, von der das Dokument geladen wurde. Der Wert dieser Eigenschaft entspricht dem Wert der location.href-Eigenschaft des WindowObjekts, es sei denn, es fand eine Serverumleitung statt. Einige dieser Eigenschaften bieten Informationen zum Dokument als Ganzem. Sie können Code wie den folgenden an das Ende jeder Ihrer Webseiten setzen, um eine nützliche automatische Fußzeile zu erzeugen, die es Benutzern ermöglicht zu beurteilen, wie aktuell (oder veraltet) ein Dokument ist, wenn es gedruckt wird: Dokument: document.write(document.title); URL: document.write(document.URL); Letzte Aktualisierung: document.write(document.lastModified);

referrer ist eine weitere interessante Eigenschaft: Sie enthält die URL des Dokuments,

von dem der Benutzer zum aktuellen Dokument gelangt ist. Sie können diese Eigenschaft

15.2 Document-Eigenschaften |

335

clientseitiges JavaScript

Die Hintergrundfarbe des Dokuments. Diese Eigenschaft entspricht dem (veralteten) bgcolor-Attribut des -Tags.

491-0.book Seite 336 Mittwoch, 4. April 2007 9:55 09

e-bol.net nutzen, um tiefe Links in Ihre Site zu verhindern. Wenn Sie wollen, dass all Ihre Besucher über Ihre Homepage ankommen, können Sie sie umleiten, indem Sie an den Anfang aller Seiten außer der Homepage folgenden Code stellen: // Bei einer Verlinkung durch eine externe Seite erst zur Homepage gehen if (document.referrer == "" || document.referrer.indexOf("meinesite.com") == -1) window.location = "http://home.meinesite.com";

Sie dürfen diesen Trick natürlich nicht als eine Sicherheitsmaßnahme betrachten. Offensichtlicherweise funktioniert er bei Benutzern nicht, die in ihren Webbrowsern JavaScript deaktiviert haben. Eine letzte interessante Document-Eigenschaft ist bgColor. Diese Eigenschaft entspricht einem HTML-Attribut, dessen Verwendung als veraltet gilt, hier aus historischen Gründen aber erwähnt wird. Die Änderung der Hintergrundfarbe eines Dokuments war eine der ersten Anwendungen von clientseitigem JavaScript. Selbst sehr, sehr alte Webbrowser ändern die Hintergrundfarbe eines Dokuments, wenn Sie document.bgColor auf einen HTML-Farbstring wie »pink« oder »#FFAAAA« setzen. Bei HTMLDocument in Teil IV finden Sie vollständige Informationen zu den Alt-Eigenschaften des Document-Objekts. Das Document-Objekt hat noch weitere wichtige Eigenschaften, deren Werte Arrays mit Dokumentobjekten sind. Diese Document-Sammlungen sind Gegenstand des nächsten Abschnitts.

15.3 Alt-DOM: Dokumentobjekt-Sammlungen Die Liste der Eigenschaften des Document-Objekts im vorangehenden Abschnitt hat eine wichtige Kategorie von Eigenschaften ausgespart: Dokumentobjekt-Sammlungen. Die Eigenschaften mit Array-Werten sind das Herz des Alt-DOMs. Das sind die Eigenschaften, die Ihnen Zugriff auf besondere Elemente im Dokument geben: anchors[]

Ein Array mit Anchor-Objekten, die die Anker in einem Dokument repräsentieren. (Ein Anker ist eine benannte Position im Dokument. Sie wird mit einem -Tag erzeugt, das ein name-Attribut anstelle eines href-Attributs hat.) Die name-Eigenschaft eines Anchor-Objekts enthält den Wert des name-Attributs. In Teil IV finden Sie vollständige Informationen zum Anchor-Objekt. applets[]

Ein Array mit Applet-Objekten, die die Java-Applets im Dokument repräsentieren. Applets werden in Kapitel 23 betrachtet.

336 | Kapitel 15: Dokumente skripten

491-0.book Seite 337 Mittwoch, 4. April 2007 9:55 09

e-bol.net forms[]

images[]

Ein Array mit Image-Objekten, die die -Elemente im Dokument repräsentieren. Die src-Eigenschaft eines Images kann gelesen und geschrieben werden. Wird dieser Eigenschaft eine URL zugewiesen, veranlasst das den Browser, diese neue Grafik zu lesen und anzuzeigen (in älteren Browsern muss die neue Grafik die gleiche Größe haben wie die alte). Das Scripting der src-Eigenschaft eines Image-Objekts ermöglicht Rollover-Effekte und einfache Grafiken. Sie werden in Kapitel 22 behandelt. links[]

Ein Array mit Link-Objekten, die die Hyperlinks im Dokument repräsentieren. Hyperlinks werden in HTML mit -Tags und gelegentlich mit -Tags in clientseitigen Imagemaps erzeugt. Die href-Eigenschaft eines Link-Objekts entspricht dem href-Attribut des -Tags: Sie enthält die URL des Links. Link-Objekte machen über verschiedene Eigenschaften wie protocol, hostname und pathname auch die verschiedenen Teile einer URL verfügbar. In dieser Hinsicht entsprechen LinkObjekte dem Location-Objekt, das in Kapitel 14 behandelt wurde. Ein Link-Objekt löst einen onmouseover-Event-Handler aus, wenn der Mauszeiger über ihm schwebt, und einen onmouseout-Handler, wenn sich der Mauszeiger von ihm wegbewegt. Es löst einen onclick-Handler aus, wenn über einem Link die Maus geklickt wird. Wenn der Event-Handler false zurückliefert, folgt der Browser dem Link nicht. Vollständige Informationen zu Link-Objekten finden Sie in Teil IV. Wie ihre Namen anzeigen, sind diese Eigenschaften Sammlungen aller Links, Grafiken, Formulare usw., die in einem Dokument erscheinen. Ihre Elemente stehen in der gleichen Reihenfolge wie im Quellcode des Dokuments. document.forms[0] verweist zum Beispiel auf das erste -Element in einem Dokument und document.images[4] auf das fünfte -Element. Die Objekte, die in diesen Alt-DOM-Sammlungen enthalten sind, können geskriptet werden. Aber es ist wichtig, dass man versteht, dass keines von ihnen es ermöglicht, die Struktur des Dokuments zu ändern. Sie können Linkziele untersuchen und ändern, die Werte von Formularelementen lesen und schreiben und sogar eine Grafik gegen eine andere austauschen, aber den Text des Dokuments können Sie nicht ändern. Ältere Browser wie Netscape 2, 3 und 4 und IE 3 waren nicht dazu in der Lage, ein Dokument neu einfließen zu lassen (oder neu aufzubauen), nachdem es einmal geparst und ange-

15.3 Alt-DOM: Dokumentobjekt-Sammlungen |

337

clientseitiges JavaScript

Ein Array mit Form-Objekten, die die -Elemente im Dokument repräsentieren. Jedes Form-Objekt hat eine eigene Sammlungseigenschaft namens elements[], die Objekte enthält, die die Formularelemente repräsentieren, die im Formular enthalten sind. Form-Objekte lösen einen onsubmit-Event-Handler aus, bevor das Formular abgeschickt wird. Dieser Handler kann eine clientseitige Formularvalidierung durchführen: Liefert er false zurück, schickt der Browser das Formular nicht ab. Die form[]-Sammlung ist mit Sicherheit die wichtigste des Alt-DOMs, und Formulare und Formularelemente sind Gegenstand von Kapitel 18.

491-0.book Seite 338 Mittwoch, 4. April 2007 9:55 09

e-bol.net zeigt wurde. Aus diesem Grund ließ (und lässt) das Alt-DOM keine Dokumentänderungen zu, die einen Neuaufbau des Dokuments erforderlich machen. Beispielsweise schließt das Alt-DOM eine API für das Hinzufügen neuer -Elemente zu einem -Element ein. Das kann es, weil HTML-Formulare -Elemente als Aufklappmenüs anzeigen und sich der Aufbau des restlichen Formulars nicht ändert, wenn solchen Menüs neue Elemente hinzugefügt werden. Es gibt im Alt-DOM aber keine API, die es ermöglicht, einem Formular einen neuen Radiobutton oder einer Tabelle eine neue Zeile hinzuzufügen, weil derartige Änderungen einen Neuaufbau des Dokuments erforderlich machen würden.

15.3.1 Dokumentobjekten Namen geben Das Problem mit numerisch indizierten Dokumentobjekt-Sammlungen ist, dass ihre positionsbasierten Indizes etwas zerbrechlich sind: Kleine Dokumentänderungen, die die Ordnung der Elemente im Dokument ändern, können Code zerbrechen, der sich auf ihre Ordnung stützt. Eine robustere Lösung ist es, wichtigen Dokumentelementen Namen zuzuweisen und auf diese Elemente über den Namen zu verweisen. Im Alt-DOM können Sie das über die name-Attribute von Formularen, Formularelementen, Grafiken, Applets und Links machen. Wenn das Attribut name vorhanden ist, wird sein Wert verwendet, um das entsprechende Objekt über den Namen zu veröffentlichen. Nehmen Sie beispielsweise an, ein HTMLDokument enthält das folgende Formular:

Wenn wir hier annehmen, dass das das erste im Dokument ist, kann Ihr JavaScript-Code auf das resultierende Form-Objekt mit jedem der drei folgenden Ausdrücke verweisen: document.forms[0] document.forms.f1 document.forms["f1"]

// Auf das Formular über die Position im Dokument verweisen // Auf das Formular über den Namen als Eigenschaft verweisen // Auf das Formular über den Namen als Array-Index verweisen

Tatsächlich ist es sogar so, dass ein Form-, Image- oder Applet-Objekt (aber nicht Linkoder Anchor-Objekt) als benannte Eigenschaft des Dokuments selbst verfügbar ist, wenn die name-Eigenschaft des entsprechenden -, - oder -Objekts gesetzt wird. Sie können auf das Formular also auch so verweisen: document.f1

Den Elementen in einem Formular können ebenfalls Namen gegeben werden. Wenn Sie das name-Attribut eines Formularelements setzen, wird das Objekt, das es repräsentiert, als Eigenschaft des Form-Objekts selbst verfügbar gemacht. Nehmen Sie an, Sie haben ein Formular, das so aussieht:

338 | Kapitel 15: Dokumente skripten

491-0.book Seite 339 Mittwoch, 4. April 2007 9:55 09

e-bol.net ... ...

document.lieferung.plz

Eine abschließende Bemerkung zur Bennenung von Dokumentelementen ist unter dem Alt-DOM erforderlich: Was passiert, wenn zwei Dokumentelemente name-Attribute mit dem gleichen Wert haben? Wenn ein - und -Tab beispielsweise beide den name-Wert »n« haben, wird die Eigenschaft document.n zu einem Array, das Referenzen auf beide Elemente enthält. Üblicherweise sollten Sie sich Mühe geben sicherzustellen, dass Ihre name-Attribute eindeutig sind, damit diese Situation nicht aufkommen kann. Sie ist in einem Fall aber verbreitet. Bei HTML-Formularen verlangt die Konvention, dass verwandte Gruppen von Radiobuttons und Checkboxes den gleichen Namen haben. Wenn Sie das tun, wird dieser Name zu einer Eigenschaft des Form-Objekts, das diese Elemente enthält, und der Wert dieser Eigenschaft ist ein Array, das Referenzen auf die verschiedenen Radiobuttonoder Checkbox-Objekte enthält. Mehr dazu werden Sie in Kapitel 18 lernen.

15.3.2 Event-Handler auf Document-Objekten Um interaktiv zu sein, müssen ein HTML-Dokument und die Elemente in ihm auf Benutzerereignisse reagieren. In Kapitel 13 haben Sie schon etwas zu Event-Handlern und Events gelernt, und Sie haben eine Reihe von Beispielen gesehen, die einfache EventHandler verwenden. In diesem Kapitel gibt es viele weitere Beispiele von Event-Handlern, weil sie die Verknüpfung zwischen Dokumentelementen und JavaScript-Code sind. Eine vollständige Diskussion von Events und Event-Handlern hebe ich mir bis Kapitel 17 auf. Denken Sie jetzt nur daran, dass Event-Handler durch Attribute von HTML-Elementen wie onclick und onmouseover definiert werden. Die Werte dieser Attribute sollten Strings mit JavaScript-Code sein. Dieser Code wird ausgeführt, wenn das angegebene Event auf dem HTML-Element auftritt. Dokumentobjekte, auf die über Sammlungen wie document.links zugegriffen wird, haben Eigenschaften, die den Attributen des HTML-Tags entsprechen. Ein Link-Objekt hat beispielsweise eine href-Eigenschaft, die das href-Attribut des -Tag widerspiegelt. Das gilt auch für Event-Handler. Sie können einen onclick-Event-Handler für einen Hyperlink definieren, indem Sie das onclick-Attribut auf dem -Tag setzen oder indem Sie die onclick-Eigenschaft des Link-Objekts definieren. Betrachten Sie als weiteres Beispiel das onsubmit-Attribut des -Elements. In JavaScript hat ein Form-Objekt eine entsprechende onsubmit-Eigenschaft. (Denken Sie daran, dass HTML keine Groß-/Kleinschrei-

15.3 Alt-DOM: Dokumentobjekt-Sammlungen |

339

clientseitiges JavaScript

Auf das Texteingabefeld-Element können Sie dann mit dieser intuitiven Syntax verweisen:

491-0.book Seite 340 Mittwoch, 4. April 2007 9:55 09

e-bol.net bung berücksichtigt und Attribute in Großbuchstaben, Kleinbuchstaben oder einer Mischung von beidem geschrieben werden können. In JavaScript müssen alle EventHandler-Eigenschaften in Kleinbuchstaben geschrieben werden.) In HTML werden Event-Handler definiert, indem einem Event-Handler-Attribut ein String mit JavaScript-Code zugewiesen wird. Aber in JavaScript werden sie definiert, indem einer Event-Handler-Eigenschaft eine Funktion zugewiesen wird. Betrachten Sie das folgende und seinen onsubmit-Event-Handler: ...

Anstatt einen einfachen String mit JavaScript-Code zu verwenden, der eine Funktion aufruft und ihr Ergebnis zurückliefert, weisen Sie in JavaScript die Funktion direkt folgendermaßen der Event-Handler-Eigenschaft zu: document.meinformular.onsubmit = validiereFormular;

Beachten Sie, dass auf den Funktionsnamen keine Klammern folgen. Das liegt daran, dass Sie die Funktion hier nicht aufrufen wollen. Sie wollen hier nur eine Referenz darauf zuweisen. Eine vollständige Betrachtung von Event-Handlern finden Sie in Kapitel 17.

15.3.3 Alt-DOM-Beispiele Beispiel 15-1 zeigt eine listeAnkerAuf( )-Funktion, die ein neues Fenster öffnet und document.write( ) einsetzt, um eine Liste mit allen Ankern im Ausgangsdokument auszugeben. Jeder Eintrag in der Liste ist ein Link mit einem Event-Handler, der bewirkt, dass das Fenster zum Ort des angegebenen Ankers scrollt. Der Code in diesem Beispiel ist besonders nützlich, wenn Sie Ihre HTML-Dokumente so schreiben, dass alle Abschnittsüberschriften in Anker wie diesen eingeschlossen sind: Das Anchor-Objekt

Beachten Sie, dass die Funktion listeAnkerAuf( ) die Methode Window.open( ) verwendet. Wie in Kapitel 14 gezeigt wurde, blockieren Browser üblicherweise Pop-up-Fenster, es sei denn, sie werden als Antwort auf eine Benutzeraktion geöffnet. Rufen Sie listeAnkerAuf( ) deswegen auf, wenn der Benutzer auf einen Link oder einen Button klickt. Aber tun Sie es nicht automatisch, wenn Ihre Webseite geladen wird. Beispiel 15-1: Alle Anker auflisten /* * * * * * *

listeAnkerAuf.js: Ein einfaches Inhaltsverzeichnis mit document.anchors[] erstellen. Der Funktion listeAnkerAuf( ) wird als Argument ein Dokument übergeben, und sie öffnet ein neues Fenster, das als "Navigationsfenster" für dieses Dokument dient. Das neue Fenster zeigt eine Liste aller Anker des Dokuments an. Klicken Sie auf einen Anker in der Liste, scrollt das Dokument zu diesem Anker.

340 | Kapitel 15: Dokumente skripten

491-0.book Seite 341 Mittwoch, 4. April 2007 9:55 09

e-bol.net Beispiel 15-1: Alle Anker auflisten (Fortsetzung)

clientseitiges JavaScript

*/ function listeAnkerAuf(d) { // Ein neues Fenster öffnen. var neuesfenster = window.open("", "navfenster", "menubar=yes,scrollbars=yes,resizable=yes," + "width=500,height=300"); // Ihm einen Titel geben. neuesfenster.document.write("Navigationsfenster: " + d.title + ""); // Alle Anker auflisten. for(var i = 0; i < d.anchors.length; i++) { // Für jedes Anchor-Objekt den anzuzeigenden Titel ermitteln. // Erst versuchen, den Text zwischen und über eine browserunabhängige // Eigenschaft abzurufen. Wird so kein Titel erhalten, wird stattdessen der Name // verwendet. var a = d.anchors[i]; var text = null; if (a.text) text = a.text; // Netscape 4 else if (a.innerText) text = a.innerText; // IE 4+ if ((text == null) || (text == '')) text = a.name; // Default // Jetzt diesen Text als Hyperlink ausgeben. Die href-Eigenschaft des Links // wird nie verwendet: Der onclick-Handler erledigt die Arbeit, indem er die // location.hash-Eigenschaft das Ausgangsfensters so setzt, dass dieses // Fenster den angegebenen Anker anzeigt. Siehe Window.opener, // Window.location und Location.hash und Link.onclick. neuesfenster.document.write(''); neuesfenster.document.write(text); neuesfenster.document.write(''); } neuesfenster.document.close( );

// Vergessen Sie nie, das Dokument zu schließen!

}

15.4 Überblick über das W3C DOM Nachdem wir uns das einfache Alt-DOM angesehen haben, können wir uns jetzt dem mächtigeren und standardisierten W3C DOM zuwenden, das es erweitert und ersetzt. Die API des W3C DOMs ist nicht sonderlich kompliziert, aber bevor wir uns ansehen, wie man mit dem DOM programmiert, sollten wir einige Punkte erwähnen, die Sie in Bezug auf die DOM-Architektur verstehen müssen.

15.4 Überblick über das W3C DOM |

341

491-0.book Seite 342 Mittwoch, 4. April 2007 9:55 09

e-bol.net

15.4.1 Dokumente als Bäume darstellen HTML-Dokumente haben eine hierarchische Struktur eingebetteter Tags, die im DOM als ein Baum von Objekten dargestellt werden. Die Baumdarstellung eines HTML-Dokuments enthält Knoten, die HTML-Tags oder -Elemente wie und

repräsentieren, und Knoten, die Textstrings repräsentieren. Ein HTML-Dokument kann auch Knoten enthalten, die HTML-Kommentare repräsentieren.1 Betrachten Sie folgendes einfaches HTML-Dokument: Beispieldokument Ein HTML-Dokument

Dies ist ein einfaches Dokument.

Die DOM-Darstellung dieses Dokuments entspricht dem Baum, der in Abbildung 15-1 gezeigt wird.

Abbildung 15-1: Die Baumdarstellung eines HTML-Dokuments

1 Das DOM kann auch verwendet werden, um XML-Dokumente darzustellen, die eine komplexere Syntax als HTML-Dokumente haben, und die Baumdarstellung eines solchen Dokuments kann Knoten enthalten, die XML-Entity-Referenzen, Verarbeitungsanweisungen, CDATA-Abschnitte und so weiter repräsentieren. Mehr zur Verwendung des DOMs mit XML finden Sie in Kapitel 21.

342 | Kapitel 15: Dokumente skripten

491-0.book Seite 343 Mittwoch, 4. April 2007 9:55 09

e-bol.net

15.4.2 Knoten Die DOM-Baumstruktur, die in Abbildung 15-1 illustriert wird, wird als ein Baum unterschiedlicher Typen von Node-Objekten dargestellt. Die Node-Schnittstelle2 definiert Eigenschaften und Methoden für die Durchquerung und Manipulation des Baums. Die childNodes-Eigenschaft eines Node-Objekts liefert die Liste der Kindknoten des Knotens zurück, und die Eigenschaften firstChild, lastChild, nextSibling, previousSibling und parentNode bieten eine Möglichkeit, den Knotenbaum zu durchqueren. Methoden wie appendChild( ), removeChild( ), replaceChild( ) und insertBefore( ) ermöglichen es Ihnen, dem Dokumentbaum Knoten hinzuzufügen oder Knoten aus dem Dokumentbaum zu entfernen. Beispiele für die Verwendung dieser Eigenschaften und Methoden sehen Sie später in diesem Kapitel.

15.4.2.1 Typen von Knoten Verschiedene Typen von Knoten im Dokumentbaum werden durch spezifische Subinterfaces von Node repräsentiert. Jedes Node-Objekt hat eine nodeType-Eigenschaft, die angibt, um was für eine Art von Knoten es sich handelt. Wenn die nodeType-Eigenschaft eines Knotens der Konstanten Node.ELEMENT_NODE entspricht, wissen Sie beispielsweise, dass das Node-Objekt auch ein Element-Objekt ist, und können auf ihm alle Methoden und Eigenschaften verwenden, die das Interface Element definiert. Tabelle 15-1 führt alle Knotentypen auf, auf die man häufiger in HTML-Dokumenten stößt, und gibt für jeden den nodeType-Wert an. Tabelle 15-1: Häufige Knotentypen Interface

nodeType-Konstante

nodeType-Wert

Element

Node.ELEMENT_NODE

1

Text

Node.TEXT_NODE

3

Document

Node.DOCUMENT_NODE

9

2 Der DOM-Standard definiert Interfaces, keine Klassen. Wenn Sie mit dem Begriff Interface in der objektorientierten Programmierung noch nicht vertraut sind, stellen Sie sich das als eine Art abstrakte Klasse vor. Später in diesem DOM-Überblick werde ich diesen Unterschied ausführlicher beschreiben.

15.4 Überblick über das W3C DOM |

343

clientseitiges JavaScript

Wenn Sie mit der Baumstruktur in der Computer-Programmierung noch nicht vertraut sind, ist es hilfreich zu wissen, dass sie ihre Terminologie von Stammbäumen ausleiht. Der Knoten direkt über einem Knoten ist der Elternknoten dieses Knotens. Die Knoten auf einer Stufe direkt unter einem anderen Knoten sind die Kindknoten dieses Knotens. Knoten auf der gleichen Ebene und mit dem gleichen Elternknoten sind Geschwister. Die Menge der Knoten, die sich auf irgendeiner Ebene unterhalb eines anderen Knotens befinden, sind die Nachfahren dieses Knotens. Und der Elternknoten, die Großelternknoten und alle anderen Knoten über einem Knoten sind die Vorfahren dieses Knotens.

491-0.book Seite 344 Mittwoch, 4. April 2007 9:55 09

e-bol.net Tabelle 15-1: Häufige Knotentypen (Fortsetzung) Interface

nodeType-Konstante

nodeType-Wert

Comment

Node.COMMENT_NODE

8

DocumentFragment

Node.DOCUMENT_FRAGMENT_NODE

11

Attr

Node.ATTRIBUTE_NODE

2

Das Node-Objekt an der Wurzel des DOM-Baums ist ein Document-Objekt. Die documentElement-Eigenschaft dieses Objekts verweist auf ein Element-Objekt, das das Wurzelelement des Dokuments repräsentiert. Bei HTML-Dokumenten ist das das Element, das entweder explizit oder implizit im Dokument enthalten ist. (Der Document-Knoten kann neben dem Wurzelelement noch weitere Kinder wie Comment-Knoten enthalten.) In HTML-Dokumenten interessieren Sie sich üblicherweise mehr für das -Element als für das -Element. Als Abkürzung können Sie document.body verwenden, um auf dieses Element zu verweisen. In einem DOM-Baum gibt es nur ein Document-Objekt. Die meisten Knoten im Baum sind Element-Objekte, die durch Tags wie und repräsentiert werden, und Text-Objekte, die Strings mit Text repräsentieren. Wenn der Dokument-Parser Kommentare bewahrt, werden diese Kommentare im DOM-Baum durch Comment-Objekte repräsentiert. Abbildung 15-2 zeigt eine partielle Klassenhierarchie für diese und andere DOM-Kern-Interfaces. HTMLHeadElement Document

HTMLDocument Text

CharacterData Comment Node

Element Attr

HTMLElement

HTMLBodyElement HTMLTitleElement HTMLParagraphElement HTMLInputElement HTMLTableElement . . . etc.

Abbildung 15-2: Eine partielle Klassenhierarchie der Core DOM API

15.4.2.2 Attribute Die Attribute eines Elements (wie die src- und width-Attribute eines -Tags) können mit den Methoden getAttribute( ), setAttribute( ) und removeAttribute( ) des Element-

344 | Kapitel 15: Dokumente skripten

491-0.book Seite 345 Mittwoch, 4. April 2007 9:55 09

e-bol.net Interfaces abgefragt, gesetzt und entfernt werden. Wie später gezeigt wird, sind die Standard-Attribute von HTML auch als Eigenschaften der Element-Knoten verfügbar, die diese Tags repräsentieren.

15.4.3 Die DOM HTML API Der DOM-Standard wurde gleichermaßen für die Verwendung mit XML- und HTMLDokumenten entwickelt. Die Core DOM API – die Interfaces Node, Element, Document und weitere Interfaces – ist relativ allgemein und auf beide Typen von Elementen anwendbar. Der DOM-Standard schließt auch Interfaces ein, die spezifisch für HTMLDokumente sind. Wie Sie in Abbildung 15-2 sehen können, ist HTMLDocument ein HTML-spezifisches Subinterface von Document und HTMLElement ein HTML-spezifisches Subinterface von Element. Weiterhin definiert das DOM tag-spezifische Interfaces für viele HTML-Elemente. Die tag-spezifischen Interfaces wie HTMLBodyElement und HTMLTitleElement definieren üblicherweise einen Satz von Eigenschaften, die die Attribute des HTML-Tags widerspiegeln. Das HTMLDocument-Interface definiert verschiedene Dokumenteigenschaften und -methoden, die von Browsern vor der W3C-Standardisierung unterstützt wurden. Dazu zählen die location-Eigenschaft, das forms[]-Array und die write( )-Methode, die weiter oben in diesem Kapitel beschrieben wurden. Das HTMLElement-Interface definiert die Eigenschaften id, style, title, lang, dir und className. Diese Eigenschaften ermöglichen einen bequemen Zugriff auf die Werte der Attribute id, style, title, lang, dir und class, die in HTML-Tags zulässig sind. (»class« ist in JavaScript ein reserviertes Wort; das HTML-Attribut class wird in JavaScript also zur Eigenschaft className.) Einige, in Tabelle 15-2 aufgeführte HTML-Tags akzeptieren keine anderen Attribute als diese sechs und werden durch das Interface HTMLElement deswegen vollständig dargestellt.

15.4 Überblick über das W3C DOM |

345

clientseitiges JavaScript

Ein anderer, etwas unbequemerer Weg, mit Attributen zu arbeiten, ist die Methode getAttributeNode( ), die ein Attr-Objekt zurückliefert, das ein Attribut und seinen Wert repräsentiert. (Ein Grund dafür, diese etwas unbequemere Technik zu verwenden, besteht darin, dass das Attr-Interface eine specified-Eigenschaft definiert, mit der Sie ermitteln können, ob das Attribut literal im Dokument angegeben wurde oder ob sein Wert ein Default-Wert ist.) Das Attr-Interface erscheint in Abbildung 15-2 und ist ein Knotentyp. Beachten Sie allerdings, dass Attr-Objekte nicht im childNodes[]-Array eines Elements erscheinen und nicht auf dieselbe Weise direkt Teil des Dokumentbaums sind, wie es Element- und Text-Knoten sind. Die DOM-Spezifikation erlaubt, dass auf AttrKnoten über das attributes[]-Array des Node-Interfaces zugegriffen wird, aber der Internet Explorer definiert ein anderes und inkompatibles attributes[]-Array, das es unmöglich macht, dieses Feature portabel zu verwenden.

491-0.book Seite 346 Mittwoch, 4. April 2007 9:55 09

e-bol.net Tabelle 15-2: Einfache HTML-Tags

<strong>

Alle anderen HTML-Tags haben eigene Interfaces, die vom HTML-Teil der DOM-Spezifikation definiert werden. Für viele HTML-Tags definieren diese Interfaces nur eine Menge von Eigenschaften, die ihre HTML-Attribute widerspiegeln. Beispielsweise gibt es für das

Den Knoten für diesen Absatz können Sie dann mit JavaScript-Code wie diesem suchen: var meinAbsatz = document.getElementById("besondererAbsatz");

4 Technisch gesehen liefert getElementsByTagName( ) eine NodeList zurück, die wie ein Array-artiges Objekt ist. In diesem Buch verwende ich die Array-Notation, um sie zu indizieren, und werde auf sie deswegen informell als »Array« verweisen.

356 | Kapitel 15: Dokumente skripten

491-0.book Seite 357 Mittwoch, 4. April 2007 9:55 09

e-bol.net Beachten Sie, dass die Methode getElementById( ) nicht wie getElementsByTagName( ) ein Array von Elementen zurückliefert. Weil der Wert jedes id-Attributs einzigartig ist (oder sein sollte), liefert getElementById( ) nur das eine Element mit dem passenden id-Attribut zurück. getElementById( ) ist eine wichtige Methode, und ihr Einsatz ist in der DOM-Program-

// Wenn x ein String ist, wird angenommen, dass es eine Element-ID ist, // und das benannte Element gesucht. Andernfalls wird angenommen, dass // x bereits ein Element ist, das dann einfach zurückgeliefert wird. function id(x) { if (typeof x == "string") return document.getElementById(x); return x; }

Wenn Sie eine solche Funktion definiert haben, können Ihre DOM-Manipulationsmethoden so geschrieben werden, dass sie Elemente oder Element-IDs als Argumente akzeptieren. Vor der Verwendung eines solchen Arguments x müssen Sie dann einfach nur einmal x = id(x) schreiben. Ein bekanntes clientseitiges JavaScript-Toolkit5 definiert eine derartige Hilfsmethode und gibt ihr einen sogar noch kürzeren Namen: $( ). getElementById( ) und getElementsByTagName( ) sind beides Methoden des DocumentObjekts. Element-Objekte definieren jedoch ebenfalls eine getElementsByTagName( )Methode. Diese Methode des Element-Objekts verhält sich genauso wie die Methode des Document-Objekts, liefert allerdings nur Elemente zurück, die Nachfahren des Elements sind, auf dem sie aufgerufen wurde. Anstatt das vollständige Dokument nach einem bestimmten Typen zu durchsuchen, sucht sie nur innerhalb des vorgegebenen Elements. Das ermöglicht es beispielsweise, getElementById( ) zu verwenden, um ein bestimmtes Element zu finden, und dann getElementsByTagName( ) zu finden, um alle Nachfahren eines bestimmten Typs in diesem Element zu finden. Zum Beispiel: // Ein bestimmtes Table-Element in einem Dokument finden und seine Zeilen zählen var inhaltsverzeichnis = document.getElementById("TOC"); var zeilen = tableOfContents.getElementsByTagName("tr"); var zeilenanzahl = rows.length;

Beachten Sie schließlich, dass das HTMLDocument-Objekt für HTML-Dokumente auch eine getElementsByName( )-Methode definiert. Diese Methode verhält sich wie getElementById( ), betrachtet aber das name-Attribut von Elementen anstelle des id-Attributs. Und weil beim name-Attribut nicht erwartet wird, dass es in einem Dokument eindeutig ist (beispielsweise haben Radiobuttons in HTML-Formularen üblicherweise gleiche name-Werte), liefert getElementsByName( ) ein Array mit Elementen anstatt eines einzelnen Elements zurück. Zum Beispiel: 5 Die Prototype-Bibliothek von Sam Stephenson, die unter http://prototype.conio.net verfügbar ist.

15.6 Elemente in einem Dokument finden |

357

clientseitiges JavaScript

mierung sehr gebräuchlich. Sie wird so häufig verwendet, dass Sie dafür vielleicht eine Hilfsfunktion mit einem kürzeren Namen definieren möchten. Zum Beispiel:

491-0.book Seite 358 Mittwoch, 4. April 2007 9:55 09

e-bol.net // suchen var link = document.getElementsByName("oben")[0]; // Alle -Elemente finden var auswahl = document.getElementsByName("lieferungsart");

Zusätzlich zur Auswahl von Dokumentelementen über den Tagnamen oder die ID ist es auch oft nützlich, Elemente auszuwählen, die Mitglieder einer Klasse sind. Das HTMLAttribut class und die entsprechende JavaScript-Eigenschaft className weisen einem Element eine oder mehrere benannte (und durch Leerzeichen getrennte) Klassen zu. Diese Klassen sind für die Verwendung mit CSS-Stylesheets (siehe Kapitel 16) gedacht, aber das muss nicht ihr einziger Zweck sein. Nehmen Sie an, Sie schreiben wichtige Hinweise in einem HTML-Dokument folgendermaßen: Dies ist ein Warnhinweis

Sie können dann ein CSS-Stylesheet einsetzen, um die Farben, Abstände, Rahmen und anderen Darstellungsattribute für diese Hinweise anzugeben. Aber was ist, wenn Sie auch JavaScript-Code schreiben wollen, der -Tags finden und bearbeiten kann, die Mitglieder der Klasse »warnung« sind? Beispiel 15-4 bietet eine Lösung. Dieses Beispiel definiert eine getElemente( )-Methode, die es Ihnen ermöglicht, Elemente anhand der Klasse und/oder des Tagnamens auszuwählen. Beachten Sie, dass die Eigenschaft className verzwickt ist, weil ein HTML-Element Mitglied mehrerer Klassen sein kann. getElemente( ) schließt eine eingebettete Methode isMitglied( ) ein, die prüft, ob ein angegebenes HTML-Element Mitglied einer angegebenen Klasse ist. Beispiel 15-4: HTML-Elemente nach Klasse und Tag-Namen auswählen /** * getElemente(klassenname, tagname, wurzel): * Liefert ein Array mit DOM-Elementen zurück, die Mitglied der angegebenen Klasse * sind, den angegebenen Tagnamen haben und Nachfahren der angegebenen Wurzel sind. * * Wird kein klassenname angegeben, werden die Elemente unabhängig von der Klasse * zurückgeliefert. * Wird kein tagname angegeben, werden die Elemente unabhängig vom tagname zurückgeliefert. * Wird keine Wurzel angegeben, wird das document-Objekt verwendet. Wenn die angegebene * Wurzel ein String ist, wird sie als Element-ID verwendet und das Wurzelelement * über getElementsById( ) nachgeschlagen. */ function getElemente(klassenname, tagname, wurzel) { // Wurde keine Wurzel angegeben, wird das vollständige Dokument verwendet. // Wurde ein String angegeben, wird er nachgeschlagen. if (!wurzel) wurzel = document; else if (typeof wurzel == "string") wurzel = document.getElementById(root); // Wurde kein Tagname angegeben, werden alle Tags verwendet. if (!tagname) tagname = "*";

358 | Kapitel 15: Dokumente skripten

491-0.book Seite 359 Mittwoch, 4. April 2007 9:55 09

e-bol.net Beispiel 15-4: HTML-Elemente nach Klasse und Tag-Namen auswählen (Fortsetzung) // Alle Nachfahren der angegebenen Wurzel mit dem angegebenen Tagnamen finden. var alle = wurzel.getElementsByTagName(tagname); // Wurde kein klassenname angegeben, werden alle Tags zurückgeliefert if (!klassenname) return alle;

clientseitiges JavaScript

// Andernfalls filtern wir die Elemente über klassenname var elemente = []; // Wir beginnen mit einem leeren Array for(var i = 0; i < alle.length; i++) { var element = alle[i]; if (isMitglied(element, klassenname)) // isMitglied( ) wird unten definiert elemente.push(element); // Klassenmitglieder dem Array hinzufügen } // Beachten Sie, dass wir immer ein Array zurückliefern, auch wenn es leer ist. return elemente; // Ermitteln, ob das angegebene Element Mitglied der angegebenen Klasse ist. // Diese Funktion ist für den häufigen Fall optimiert, dass die Eigenschaft // className nur einen Klassennamen enthält. Aber sie behandelt auch den Fall // einer durch Leerzeichen getrennten Liste von Klassennamen. function isMitglied(element, klassenname) { var klassen = element.className; // Eine Liste der Klassen abrufen if (!klassen) return false; // Keine Klassen definiert if (klassen == klassenname) return true; // Genauer Treffer // Kein genauer Treffer. Wenn es keine Leerzeichen gibt, ist dieses Element // also kein Mitglied der Klasse. var whitespace = /\s+/; if (!whitespace.test(klassen)) return false; // Wenn wir hier hinkommen, ist das Element Mitglied mehrerer Klassen, die // wir deswegen einzeln prüfen müssen. var c = klassen.split(whitespace); // Auf dem Leerraum-Begrenzer aufspalten for(var i = 0; i < c.length; i++) { // Die Klassen durchlaufen if (c[i] == klassenname) return true; // und auf Treffer prüfen } return false;

// Wenn keine der Klassen passt

} }

15.7 Ein Dokument modifizieren Die Durchquerung der Knoten eines Dokuments kann nützlich sein, aber die wahre Macht der Core DOM API liegt in den Features, des es Ihnen ermöglichen, JavaScript einzusetzen, um Dokumente dynamisch zu modifizieren. Die beiden folgenden Beispiele demonstrieren die grundlegenden Techniken der Modifikation von Dokumenten und illustrieren einige der Möglichkeiten.

15.7 Ein Dokument modifizieren |

359

491-0.book Seite 360 Mittwoch, 4. April 2007 9:55 09

e-bol.net Beispiel 15-5 schließt eine JavaScript-Funktion namens sortiereKinder( ), ein Beispieldokument und einen HTML-Button ein, der, wenn er angeklickt wird, die Funktion sortiereKinder( ) aufruft und ihr die ID eines

eins
zwei
drei
vier

Das ist Absatz #1.

Das ist Absatz #2.

-Tags überspringen, da in Absätzen keine Überschriften // erscheinen sollen. (Wir könnten auch Listen -Tags usw. überspringen, // aber

ist das am häufigsten vorkommende.) if (m.tagName == "P") continue; // Optimierung // Wird der Kindknoten nicht übersprungen, wird geprüft, ob er eine // Überschrift ist. Ist das der Fall, wird er dem Array hinzugefügt. // Andernfalls wird in ihn hinabgestiegen. Beachten Sie, dass das DOM // interface-basiert ist und nicht klassenbasiert. Wir können also nicht // einfach Folgendes prüfen (m instanceof HTMLHeadingElement). if (m.tagName.length==2 && m.tagName.charAt(0)=="H") sects.push(m); else findSections(m, sects); } } } // Das ist der Default-Text für die Links zurück zum Inhalt. maketoc.backlinkText = "Inhalt"; // maketoc( ) registieren, damit die Funktion automatisch ausgeführt wird, wenn // das Laden des Dokuments abgeschlossen ist. if (window.addEventListener) window.addEventListener("load", maketoc, false); else if (window.attachEvent) window.attachEvent("onload", maketoc);

15.9 Beispiel: Ein dynamisch erzeugtes Inhaltsverzeichnis |

377

491-0.book Seite 378 Mittwoch, 4. April 2007 9:55 09

e-bol.net

15.10 Ausgewählten Text abfragen Manchmal ist es nützlich, wenn man ermitteln kann, welchen Text der Benutzer in einem Dokument ausgewählt hat. Das ist ein Bereich, in dem wenige Standardisierungen zur Verfügung stehen, aber es ist in allen modernen Browsern möglich, den ausgewählten Text abzufragen. Beispiel 15-12 zeigt, wie das geht. Beispiel 15-12: Den aktuell ausgewählten Text abfragen function getSelectedText( ) { if (window.getSelection) { // Diese Technik wird am ehesten standardisiert werden. // getSelection( ) ruft ein Selection-Objekt ab, das wir nicht dokumentieren. return window.getSelection( ).toString( ); } else if (document.getSelection) { // Das ist eine ältere Technik, die einen String zurückliefert return document.getSelection( ); } else if (document.selection) { // Das ist eine IE-spezifische Technik. // Wir dokumentieren die IE-Eigenschaft selection oder TextRange-Objekte nicht. return document.selection.createRange( ).text; } }

Dem Code in diesem Beispiel müssen Sie in gewissem Maße einfach vertrauen. Die in diesem Beispiel verwendeten Selection- und TextRange-Objekte werden in diesem Buch nicht dokumentiert. Als dies geschrieben wurde, waren ihre APIs einfach zu komplex und zu wenig standardisiert, um sie hier zu behandeln. Aber da die Abfrage des ausgewählten Texts eine häufige und recht einfache Operation ist, ist es nützlich, sie hier zu illustrieren. Sie können sie einsetzen, um Bookmarklets zu erzeugen (siehe Abschnitt 13.4.1), die auf dem ausgewählten Text operieren, indem sie ein Wort in einer Suchmaschen oder auf einer Referenz-Site nachschlagen. Der folgende HTML-Link schlägt beispielsweise den aktuellen Text in Wikipedia nach. Wird für ihn ein Lesezeichen erzeugt, werden der Link und die darin enthaltene JavaScript-URL zu einem Bookmarklet: Ausgewählten Text in Wikipedia nachschlagen

Es gibt in Beispiel 15-12 eine kleinere Inkompatibilität. Die getSelection( )-Methoden der Window- und Document-Objekte liefern den ausgewählten Text nicht zurück, wenn

378 | Kapitel 15: Dokumente skripten

491-0.book Seite 379 Mittwoch, 4. April 2007 9:55 09

e-bol.net er sich in einem - oder -Formularelement befindet: Sie liefern nur ausgewählten Text aus dem Dokument selbst zurück. Die IE-Eigenschaft document.selection liefert jedoch ausgewählten Text von allen Stellen des Dokuments zurück.

function getTextFieldSelection(e) { if (e.selectionStart != undefined && e.selectionEnd != undefined) { var start = e.selectionStart; var end = e.selectionEnd; return e.value.substring(start, end); } else return ""; // In diesem Browser nicht unterstützt }

15.11 Das IE 4 DOM Obwohl der IE 4 das W3C DOM nicht implementiert, unterstützt er eine API, die viele Fähigkeiten bietet, die denen des Kern-W3C DOMs entsprechen. IE 5 und höher unterstützen das IE 4 DOM, und einige andere Browser bieten zumindest eine partielle Kompatibilität. Als dies geschrieben wurde, war der IE 4-Browser nicht mehr weit verbreitet. Neu geschriebener JavaScript-Code muss normalerweise nicht mit Kompatibilität zum IE 4 geschrieben werden. Deswegen wurden große Teile des Referenzmaterials für das IE 4 DOM in dieser Auflage des Buchs aus Teil IV gelöscht. Trotzdem gibt es immer noch eine große Menge bestehenden Codes, der immer noch das IE 4 DOM verwendet. Deswegen ist es nützlich, wenn man mit dieser API zumindest in ihren Grundzügen vertraut ist.

15.11.1 Ein Dokument durchqueren Das W3C DOM gibt vor, dass alle Node-Objekte, das Document-Objekt und alle Element-Objekte eingeschlossen, ein childNodes[]-Array haben, das die Kinder des Knotens enthält. Der IE 4 bietet keine Unterstützung für childNodes[], bietet aber ein ähnliches children[]-Array auf seinen Document- und HTMLElement-Objekten. Deswegen ist es leicht, eine rekursive Funktion wie die in Beispiel 15-2 gezeigte zu schreiben, um die vollständige Menge von HTML-Elementen in einem IE 4-Dokument zu durchqueren. Es gibt allerdings einen substanziellen Unterschied zwischen dem children[]-Array des IE 4 und dem childNodes[]-Array des W3C DOMs. Der IE 4 kennt keinen Text-Knotentyp und betrachtet Textstrings nicht als Kinder. Ein

-Tag, das nur Klartext ohne Markup enthält, hat im IE 4 also ein leeres children[]-Array. Wie Sie in Kürze sehen werden, steht der Textinhalt eines

-Tags über die IE 4-Eigenschaft innerText zur Verfügung.

15.11 Das IE 4 DOM |

379

clientseitiges JavaScript

In Firefox definieren Texteingabeelemente die Eigenschaften selectionStart und selectionEnd, die Sie einsetzen können, um den ausgewählten Text abzufragen (oder zu setzen). Zum Beispiel:

491-0.book Seite 380 Mittwoch, 4. April 2007 9:55 09

e-bol.net

15.11.2 Dokumentelemente finden IE 4 bietet keine Unterstützung für die getElementById( )- und getElementsByTagName( )Methoden des Document-Objekts. Stattdessen haben das Document-Objekt und alle Dokumentelemente eine Array-Eigenschaft namens all[]. Wie der Name andeutet, repräsentiert dieses Array alle Elemente in einem Dokument oder alle Elemente, die in einem anderen Element enthalten sind. Beachten Sie, dass all[] nicht einfach die Kinder des Document-Objekts oder eines Elements repräsentiert. Es repräsentiert alle Nachfahren, egal wie tief sie eingebettet sind. Das Array all[] kann auf mehrere Weisen verwendet werden. Wenn Sie es mit einem Integer n indizieren, liefert es das n+1. Element des Dokuments oder Elternelements zurück. Zum Beispiel: var e1 = document.all[0]; var e2 = e1.all[4];

// Das erste Element des Dokuments // Das fünfte Element von Element 1

Elemente werden in der Reihenfolge nummeriert, in der sie in der Dokumentquelle erscheinen. Beachten Sie einen wichtigen Unterschied zwischen der IE 4 API und dem DOM-Standard: Der IE kennt keine Text-Knoten. Das Array all[] enthält also nur Dokumentelemente, nicht den Text, der zwischen ihnen erscheint. In der Regel ist es viel praktischer, auf Dokumentelemente über einen Namen statt über eine Nummer zu verweisen. Das IE 4-Äquivalent zu getElementbyId( ) ist es, das Array all[] mit einem String statt mit einer Zahl zu indizieren. Wenn Sie das tun, liefert der IE 4 das Element zurück, dessen id- oder name-Attribut den angegebenen Wert hat. Wenn es mehrere derartige Elemente gibt (was passieren kann, weil es häufig vorkommt, dass mehrere Formularelemente wie Radiobutton das gleiche name-Attribut haben), ist das Ergebnis ein Array mit diesen Elementen. Zum Beispiel: var besondererAbsatz = document.all["besondererAbsatz"]; var buttons = form.all["lieferungsart"]; // Kann ein Array zurückliefern

JavaScript erlaubt Ihnen, diese Ausdrücke so zu schreiben, dass der Array-Index als Eigenschaftsname ausgedrückt wird: var besondererAbsatz = document.all.besondererAbsatz; var buttons = form.all.lieferungsart;

Wird das Array all[] auf diese Weise verwendet, stellt es die gleiche Grundfunktionalität wie getElementById( ) und getElementsByName( ) zur Verfügung steht. Der Hauptunterschied ist, dass das Array all[] die Features dieser beiden Methoden kombiniert. Das kann zu Problemen führen, wenn Sie aus Versehen die gleichen Werte für die id- und name-Attribute nicht verwandter Elemente verwenden. Das Array all[] hat eine ungewöhnliche Eigenart: Es kann eine tags( )-Methode verwenden, um ein Array mit Elementen mit diesem Tag-Namen zu erhalten. Zum Beispiel: var liste = document.all.tags("UL"); // Alle

-Tags im ersten

Name	Typ	Wert
Benutzername:[1] name="benutzername" size="15">	[9] [10] [11]
Dateiname: [4]
Angeschlossene Geräte: [5]DVD-Brenner [5]Drucker [5]Kartenleser		Mein Webbrowser: [6]Firefox [6]Internet Explorer [6]Anderer
Meine Hobbies:[7] JavaScript hacken Im Web surfen Kaffee trinken Meine Freunde nerven		Meine Lieblingsfarbe:[8] Rot Grün Blau Weiß Violett Pfirsich

Formularelemente	[1] Text	[2] Password	[3] Textarea	[4] File-Upload	[5] Checkbox
[6] Radio	[7] Select (list)	[8] Select (menu)	[9] Button	[10] Submit	[11] Reset

Sie waren schon ' + cookie.visits + '-mal hier.' + 'Vergiss mich');

Die Cookie-Klasse selbst ist in Beispiel 19-2 aufgelistet. Beispiel 19-2: Eine Cookie-Utility-Klasse /** * Das ist die Cookie( )-Konstruktorfunktion. * * Dieser Konstruktor sucht nach einem Cookie mit dem angegebenen Namen für das aktuelle * Dokument. Falls ein solcher vorhanden ist, parst er seinen Wert in eine Gruppe von * Name/Wert-Paaren und speichert diese Werte als Eigenschaften des neu erzeugten * Objekts. * * Um neue Daten im Cookie zu speichern, setzen Sie einfach die Eigenschaften des * Cookie-Objekts. Vermeiden Sie die Eigenschaftsnamen "store" und "remove", die für * Methodennamen reserviert sind. * * Um Cookie-Daten im lokalen Speicher des Webbrowsers zu speichern, rufen Sie store( ) auf. * Um Cookie-Daten aus dem Browserspeicher zu entfernen, rufen Sie remove( ) auf. * * Die statische Methode Cookie.enabled( ) gibt true aus, wenn Cookies * aktiviert sind, und false, wenn nicht. */ function Cookie(name) { this.$name = name; // Speichere den Namen dieses Cookies // Erzeuge zunächst eine Liste aller Cookies, die zu diesem Dokument gehören. // Wir lesen dazu die Eigenschaft Document.cookie ein. // Sind keine Cookies vorhanden, brauchen wir nichts zu machen. var alleCookies = document.cookie; if (alleCookies == "") return; // Unterteile den String aller Cookies in einzelne Cookie-Strings, // Durchlaufe dann die Cookie-Strings und suche nach unserem Namen. var cookies = alleCookies.split(';'); var cookie = null;

19.4 Ein Cookie-Beispiel |

509

491-0.book Seite 510 Mittwoch, 4. April 2007 9:55 09

e-bol.net Beispiel 19-2: Eine Cookie-Utility-Klasse (Fortsetzung) for(var i = 0; i < cookies.length; i++) { // Fängt dieser Cookie-String mit dem richtigen Namen an? if (cookies[i].substring(0, name.length+1) == (name + "=")) { cookie = cookies[i]; break; } } // Wenn wir keinen passenden Cookie fanden, dann brich ab if (cookie == null) return; // Der Cookie-Wert ist der Teil nach dem Gleichheitszeichen var cookieval = cookie.substring(name.length+1); // Wir haben den Wert des gesuchten Cookies gefunden und müssen // diesen nun in einzelne Namen und Werte von Zustandsvariablen // zerlegen. Die Paare von Namen und Werten sind voneinander // durch "&"-Zeichen getrennt, Name und Wert jeweils durch einen // Doppelpunkt. Wir verwenden die split()-Methode, // um alles zu parsen. var a = cookieWert.split('&'); // In ein Array von Name-Wert-Paaren zerlegen. for(var i=0; i < a.length; i++) // Zerlege jedes Paar in ein Array. a[i] = a[i].split(':'); // Nun haben wir den Wert des Cookies analysiert und können alle Namen und Werte // als Eigenschaften dieses Cookie-Objekts setzen. Beachte, dass wir den // Eigenschaftswert decodieren, da ihn die store( )-Methode codiert. for(var i = 0; i < a.length; i++) { this[a[i][0]] = decodeURIComponent(a[i][1]); } } /** * Diese Funktion ist die store( )-Methode des Cookie-Objekts. * * Argumente: * * daysToLive: die Lebensdauer des Cookies in Tagen. Wenn Sie diesen Wert auf * 0 setzen, wird der Cookie gelöscht. Wenn Sie ihn auf null setzen oder * das Argument weglassen, gilt der Cookie nur für die eine Sitzung und wird * nicht gespeichert, wenn der Browser beendet wird. Dieses Argument wird verwendet, um * das max-age-Attribut des Cookies festzulegen. * path: der Wert des path-Attributs des Cookies * domain: der Wert des domain-Attributs des Cookies * secure: wenn true, wird das secure-Attribut des Cookies gesetzt */ Cookie.prototype.store = function(daysToLive, path, domain, secure) { // Durchlaufe zunächst die Eigenschaften des Cookie-Objekts, und // setze den Wert des Cookies zusammen. Da Cookies das Gleichheitszeichen // und Semikola als Trenner verwenden, benutzen wir Doppelpunkte

510 | Kapitel 19: Cookies und Persistenz auf der Clientseite

491-0.book Seite 511 Mittwoch, 4. April 2007 9:55 09

e-bol.net Beispiel 19-2: Eine Cookie-Utility-Klasse (Fortsetzung)

clientseitiges JavaScript

// und das "&"-Zeichen für die einzelnen Zustandsvariablen, die // wir in einem einzelnen Cookie-Wert speichern. Beachte, dass wir den Wert // jeder Eigenschaft für den Fall codieren, dass er Sonder- oder andere // unzulässige Zeichen enthält. var cookieWert = ""; for(var eigenschaft in this) { // Ignoriere Eigenschaften, deren Namen mit '$' beginnen, sowie Methoden. if ((eigenschaft.charAt(0) == '$') || ((typeof this[eigenschaft]) == 'function')) continue; if (cookieWert != "") cookieWert += '&'; cookieval += prop + ':' + encodeURIComponent(this[prop]); } // Nachdem wir den Wert des Cookies haben, setzen wir nun den ganzen // Cookie-String zusammen, der auch den Namen und die einzelnen bei der // Erzeugung des Cookies-Objekts angegebenen Attribute enthält. var cookie = this.$name + '=' + cookieWert; if (daysToLive || daysToLive == 0) { cookie += "; max-age=" + (daysToLive*24*60*60); } if (path) cookie += "; path=" + path; if (domain) cookie += "; domain=" + domain; if (secure) cookie += "; secure"; // Nun speichern wir den Cookie durch Zuweisung an die Eigenschaft Document.cookie. document.cookie = cookie; } /** * Diese Funktion ist die remove( )-Methode des Cookie-Objekts; sie löscht die * Eigenschaften des Objekts und entfernt den Cookie aus dem * lokalen Browserspeicher. * * Die Argumente für diese Funktion sind alle optional. Um einen Cookie zu entfernen, * müssen Sie aber dieselben Werte übergeben, die Sie zuvor an store( ) übergeben haben. */ Cookie.prototype.remove = function(path, domain, secure) { // Lösche die Eigenschaften des Cookies for(var eigenschaft in this) { if (prop.charAt(0) != '$' && typeof this[prop] != 'function') delete this[prop]; } // Speichere dann den Cookie mit einer Lebensdauer von 0 this.store(0, path, domain, secure); } /** * Diese statische Methode versucht festzustellen, ob Cookies aktiviert sind.

19.4 Ein Cookie-Beispiel |

511

491-0.book Seite 512 Mittwoch, 4. April 2007 9:55 09

e-bol.net Beispiel 19-2: Eine Cookie-Utility-Klasse (Fortsetzung) * Sie gibt true zurück, wenn sie aktiviert erscheinen, und ansonsten false. * Ein Rückgabewert von true garantiert nicht, dass Cookies auch tatsächlich überleben. * Cookies für nicht-persistente Sitzungen können auch dann funktionieren, wenn diese * Methode false ausgibt. */ Cookie.enabled = function( ) { // Verwenden Sie navigator.cookieEnabled, wenn dieser Browser sie definiert if (navigator.cookieEnabled != undefined) return navigator.cookieEnabled; // Wenn wir bereits einen Wert im Cache haben, so verwende diesen Wert if (Cookie.enabled.cache != undefined) return Cookie.enabled.cache; // Erzeuge ansonsten einen Test-Cookie mit einer Lebensdauer document.cookie = "testcookie=test; max-age=10000"; // Setze den Cookie // Überprüfe jetzt, ob der Cookie gespeichert wurde var cookies = document.cookie; if (cookies.indexOf("testcookie=test") == -1) { // Der Cookie wurde nicht gespeichert return Cookie.enabled.cache = false; } else { // Cookie wurde gespeichert, wir müssen ihn also löschen, bevor wir zurückkehren document.cookie = "testcookie=test; max-age=0"; // Lösche den Cookie return Cookie.enabled.cache = true; } }

19.5 Cookie-Alternativen Die Verwendung von Cookies für clientseitige Persistenz hat es ein paar Nachteile: • Sie sind auf eine Datenmenge von 4 KB begrenzt. • Auch wenn Cookies nur für die Skriptsteuerung auf der Clientseite verwendet werden, werden sie trotzdem bei jedem Anfordern einer mit ihnen assoziierten Webseite an den Webserver geschickt. Braucht der Server die Cookies nicht, ist das eine Verschwendung von Bandbreite. Zu Cookies gibt es zwei Alternativen. Sowohl Internet Explorer von Microsoft als auch das Flash-Plug-in von Adobe definieren eigene Mechanismen für clientseitige Persistenz. Obwohl sie nicht standardisiert sind, sind beide weit verbreitetet. In der überwiegenden Mehrheit der Browser ist daher mindestens einer dieser Mechanismen vorhanden. Die Persistenzmechanismen von IE und Flash werden in den folgenden Abschnitten kurz beschrieben. Das Kapitel schließt mit einem fortgeschrittenen Beispiel, das persistenten Speicher über IE, Flash oder Cookies zur Verfügung stellt.

512 | Kapitel 19: Cookies und Persistenz auf der Clientseite

491-0.book Seite 513 Mittwoch, 4. April 2007 9:55 09

e-bol.net

19.5.1 IE userData-Persistenz Internet Explorer ermöglicht clientseitige Persistenz mit einem DHTML-Behavior (Verhalten). Um auf diesen Mechanismus zuzugreifen, wenden Sie ein spezielles Verhalten auf ein Element (wie z.B. ) Ihres Dokuments an. Das können Sie z.B. mit CSS erreichen: clientseitiges JavaScript

.persistent { behavior:url(#default#userData);}

Da behavior nicht dem CSS-Standard entspricht, ignorieren es andere Webbrowser einfach. Sie können behavior auch mit JavaScript an einem Element festlegen: var memory = document.getElementById("memory"); memory.style.behavior = "url('#default#userData')";

Ist ein HTML-Element mit diesem userData-Behavior assoziiert, so werden neue (vom Behavior definierte) Methoden für dieses Element verfügbar.2 Um Daten persistent zu speichern, setzen Sie die Attribute des Elements mit setAttribute( ) und speichern diese Attribute dann mit save( ): var memory = document.getElementById("memory"); // Hole das persistente Element memory.setAttribute("username", username); // Lege die Daten als Attribute fest memory.setAttribute("lieblingsfarbe", lieblingsfarbe); memory.save("meinePersistentenDaten"); // Speichere die Daten

Beachten Sie, dass die save( )-Methode ein String-Argument entgegennimmt: Das ist der (frei gewählte) Name, unter dem die Daten gespeichert werden sollen. Beim Abfragen der Daten müssen Sie den gleichen Namen verwenden. Daten, die mit Hilfe des IE-Persistenzmechanismus gespeichert werden, kann ein Verfallsdatum gegeben werden, wie das auch für Cookie-Daten möglich ist. Dazu legen Sie einfach die expires-Eigenschaft fest und rufen anschließend die save( )-Methode auf. Diese Eigenschaft sollte ein String in dem Format sein, das von Date.toUTCString( ) zurückgegeben wird. Beispielsweise können Sie die folgenden Zeilen zum vorhergehenden Code hinzufügen, um ein Verfallsdatum 10 Tage in der Zukunft festzulegen: var now = (new Date( )).getTime( ); // jetzt, in Millisekunden var expires = now + 10 * 24 * 60 * 60 * 1000; // 10 Tage von jetzt an, in ms memory.expires = (new Date(expires)).toUTCString( ); // in einen String konvertieren

2 Das userData-Behavior ist eine von vier möglichen Verhaltenweisen unter Internet Explorer, die sich auf die Persistenz beziehen. http://msdn.microsoft.com/workshop/author/persistence/overview.asp enthält weitere Einzelheiten über die Persistenz unter IE.

19.5 Cookie-Alternativen |

513

491-0.book Seite 514 Mittwoch, 4. April 2007 9:55 09

e-bol.net Um persistente Daten abzufragen, drehen Sie diese Schritte um und rufen load( ) auf, um gespeicherte Attribute zu laden, und dann getAttribute( ), um Attributwerte abzufragen: var memory = document.getElementById("memory"); // Hole das persistente Element memory.load("meinePersistentenDaten"); // Gespeicherte Daten über Namen abrufen var user = memory.getAttribute("username"); // Frage die Attribute ab var farbe = memory.getAttribute("lieblingsfarbe");

19.5.1.1 Hierarchische Daten speichern Das userData-Persistenzverhalten beschränkt sich nicht auf das Speichern und Abrufen von Attributwerten. Jedes Element, auf das dieses Behavior angewandt wird, wird mit einem vollständigen XML-Dokument assoziiert. Die Anwendung des Behaviors auf ein HTML-Element erzeugt eine XMLDocument-Eigenschaft am Element. Der Wert dieser Eigenschaft ist ein DOM-Document-Objekt. Sie können DOM-Methoden verwenden (siehe Kapitel 15), um diesem Dokument vor dem Aufruf von save( ) einen Inhalt hinzuzufügen bzw. nach dem Aufruf von load( ) Inhalte auszulesen. Hier ist ein Beispiel: var memory = document.getElementById("memory"); var doc = memory.XMLDocument; var root = doc.documentElement; root.appendChild(doc.createTextNode("Daten hier"));

// // // //

Beschaffe das persistente Element Beschaffe sein Dokument Root-Element des Dokuments Speichere den Text im Dokument

Durch die Verwendung eines XML-Dokuments können hierarchische Daten gespeichert werden; beispielsweise können Sie einen Datenbaum aus JavaScript-Objekten in einen Datenbaum aus XML-Elementen konvertieren.

19.5.1.2 Speicherlimits Mit dem Persistenzmechanismus von IE kann eine viel größere Datenmenge gespeichert werden als mit Cookies. Jede Seite kann bis zu 64 KB speichern und für jeden Webserver sind insgesamt 640 KB erlaubt. Für Seiten eines vertrauenswürdigen Intranets sind noch größere Mengen erlaubt. Es existiert keine Dokumentation darüber, wie ein Endbenutzer diese Speicherbegrenzungen ändern oder den Persistenzmechanismus völlig deaktivieren kann.

19.5.1.3 Persistente Daten gemeinsam benutzen Genau wie Cookies sind die mit dem IE-Persistenzmechanismus gespeicherten Daten für alle Webseiten im gleichen Verzeichnis zugänglich. Im Unterschied zu Cookies kann eine Webseite aber nicht über IE auf persistente Daten zugreifen, die von Seiten in ihren übergeordneten Verzeichnissen gespeichert wurden. Außerdem hat der IE-Persistenzmechanismus kein Äquivalent zu den Cookie-Attributen path und domain, sodass es keine Möglichkeit gibt, persistente Daten über eine größere Anzahl von Seiten gemeinsam zu verwenden. Persistente Daten lassen sich unter IE von verschiedenen Seiten auch nur gemeinsam benutzen, wenn die Seiten im gleichen Verzeichnis stehen und über das glei-

514 | Kapitel 19: Cookies und Persistenz auf der Clientseite

491-0.book Seite 515 Mittwoch, 4. April 2007 9:55 09

e-bol.net che Protokoll geladen wurden. Das bedeutet, dass eine Seite, die mit dem normalen http:-Protokoll geladen wird, nicht auf Daten in einer Seite zugreifen kann, die mit dem https:-Protokoll geladen wurde.

19.5.2 Flash-SharedObject-Persistenz

var so = SharedObject.getLocal("meinePersistentenDaten");

Im Gegensatz zum IE-Persistenzmechanismus definiert die SharedObject-Klasse keine load( )-Methode. Bei der Erstellung eines SharedObject werden die vorher unter dem angegebenen Namen gespeicherten Daten automatisch geladen. Jedes SharedObject hat eine data-Eigenschaft. Diese data-Eigenschaft bezieht sich auf ein reguläres ActionScriptObjekt, und über die Eigenschaften dieses Objekts kann auf die persistenten Daten zugegriffen werden. Um persistente Daten zu lesen oder zu schreiben, lesen oder schreiben Sie einfach die Eigenschaften des data-Objekts: var name = so.data.username; so.data.favoriteColor = "red";

// Beschaffe einige persistente Daten // Lege ein persistentes Feld fest

Die Eigenschaften, die Sie am data-Objekt setzen, müssen nicht unbedingt einfache Typen sein, wie z.B. Zahlen oder Strings. Arrays sind beispielsweise auch erlaubt. Das SharedObject hat auch keine save( )-Methode. Es hat eine flush( )-Methode, die den derzeitigen Status des SharedObjects sofort speichert. Allerdings ist der Aufruf dieser Methode nicht notwendig: Eigenschaften, die im data-Objekt eines SharedObjects festgesetzt sind, werden beim Entladen des Flash-Movies automatisch gespeichert. Beachten Sie, dass SharedObject keine Möglichkeit unterstützt, ein Verfallsdatum oder eine Lebensdauer für die persistenten Daten festzulegen. Denken Sie daran, dass der gesamte in diesem Abschnitt gezeigte Code ActionScriptCode ist, der unter dem Flash-Plug-in läuft, und nicht JavaScript-Code, der im Browser läuft. Wenn Sie den Flash-Persistenzmechanismus in Ihrem JavaScript-Code verwenden wollen, müssen Sie eine Möglichkeit für JavaScript finden, um mit Flash zu kommunizieren. Die Techniken für diesen Zweck werden in Kapitel 23 beschrieben. Beispiel 22-12 3 Vollständige Einzelheiten über die SharedObject-Klasse und Flash-basierte Persistenz finden Sie auf der AdobeWebsite unter http://www.adobe.com/support/flash/action_scripts/local_shared_object/. Ich habe von der Flashbasierten Persistenz durch Brad Neuberg erfahren, der die Pionierarbeit für ihre Verwendung in clientseitigem JavaScript in seinem AMASS-Projekts geleistet hat (http://codinginparadise.org/projects/storage/README. html). Als dieses Buch geschrieben wurde, war dieses Projekt noch in der Entwicklung. Weiterführende Informationen über die clientseitige Persistenz finden Sie unter Umständen auch in Brads Blog (http://codinginparadise.org).

19.5 Cookie-Alternativen |

515

clientseitiges JavaScript

Das Flash-Plug-in der Versionen 6 und höher ermöglicht clientseitige Persistenz über die Objektklasse Shared, die per ActionScript-Code in einem Flash-Movie skriptgesteuert werden kann.3 Dazu erzeugen Sie ein SharedObject mit ActionScript-Code wie z.B. dem folgenden. Beachten Sie, dass Sie einen Namen (entsprechend dem Cookie-Namen) für Ihre persistenten Daten angeben müssen:

491-0.book Seite 516 Mittwoch, 4. April 2007 9:55 09

e-bol.net zeigt die Verwendung der ExternalInterface-Klasse (die in Flash 8 und höher enthalten ist), die den Aufruf von ActionScript-Methoden von JavaScript aus spielend einfach macht. Die Beispiele 19-3 und 19-4 weiter unten in diesem Kapitel verwenden einen primitiveren Kommunikationsmechanismus zur Verbindung von JavaScript mit ActionScript. Mithilfe der GetVariable( )- und SetVariable( )-Methoden des Flash-Plug-inObjekts kann JavaScript ActionScript-Variablen abfragen und setzen, und die ActionScript-Funktion fscommand( ) sendet Daten an JavaScript.

19.5.2.1 Speicherlimits In der Standardeinstellung erlaubt der Flash-Player bis zu 100 KB persistente Daten pro Website. Der Benutzer kann diese Beschränkung bis auf 10 KB herunter- oder bis auf 10 MB heraufsetzen. Alternativerweise kann der Benutzer unbegrenzte oder überhaupt keine Speicherkapazität für persistente Daten zulassen. Versucht eine Website, die Beschränkung zu überschreiten, fordert Flash den Benutzer auf, eine erweiterte Speicherkapazität für Ihre Website zuzulassen oder zu verweigern.

19.5.2.2 Persistente Daten gemeinsam benutzen In der Standardeinstellung sind persistente Daten in Flash nur für das Movie zugänglich, das sie erzeugt hat. Es ist aber möglich, diese Einschränkung zu lockern und zuzulassen, dass zwei Movies im gleichen Verzeichnis oder an beliebigen Stellen auf dem gleichen Server Zugang zu den persistenten Daten haben. Das wird ähnlich wie beim path-Attribut eines Cookies gemacht. Wenn Sie ein SharedObjekt mit SharedObject.getLocal( ) erzeugen, können Sie einen Pfad als zweites Argument übergeben. Dieser Pfad muss ein Präfix des tatsächlichen Pfads in der URL des Movies sein. Jedes Movie, das den gleichen Pfad verwendet, kann die von diesem Movie gespeicherten persistenten Daten verwenden. Der folgende Code erzeugt beispielsweise ein SharedObject, das auch von jedem anderen Flash-Movie verwendet werden kann, das vom gleichen Webserver stammt: var so = SharedObject.getLocal("Meine/Gemeinsamen/Persistenten/Daten", // Objektname "/"); // Pfad

Wenn Sie die SharedObject-Klasse per Skript von JavaScript aus steuern, haben Sie wahrscheinlich kein Interesse daran, persistente Daten von mehreren Flash-Movies gemeinsam verwenden zu lassen. Wichtiger wird es für Sie sein, Daten zwischen Webseiten zu teilen, die das gleiche Movie per Skript steuern (siehe Beispiel 19-3 im nächsten Abschnitt).

19.5.3 Beispiel: Persistente Objekte Dieser Abschnitt schließt mit einem ausführlichen Beispiel, das eine gemeinsame API für die drei Persistenzmechanisms definiert, die Sie in diesem Kapitel studiert haben. Beispiel 19-3 definiert eine PObject-Klasse für persistente Objekte. Die PObject-Klasse funktio-

516 | Kapitel 19: Cookies und Persistenz auf der Clientseite

491-0.book Seite 517 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Nachdem Ihr onload-Handler aufgerufen wurde, können Sie die persistenten Daten einfach dadurch verwenden, dass Sie die Eigenschaften von PObject lesen. Das machen Sie wie bei jedem regulären JavaScript-Objekt. Um neue persistente Daten zu speichern, setzen Sie diese Daten als Eigenschaften (des Typs Boolean, Number oder String) des PObject. Rufen Sie dann die save( )-Methode von PObject auf, und geben optional eine Lebensdauer (in Tagen) für die Daten an. Um die persistenten Daten zu löschen, rufen Sie die forget( )-Methode des PObject auf. Die hier definierte PObject-Klasse verwendet die IE-basierte Persistenz, wenn der Code unter IE läuft. Ansonsten sucht sie nach einer passenden Version des Flash-Plug-ins und verwendet die Flash-basierte Persistenz, falls sie zur Verfügung steht. Sind beide Möglichkeiten nicht vorhanden, wird auf Cookies zurückgegriffen.4 Die PObject-Klasse speichert nur einfache Werte und konvertiert Zahlen und Boolesche Werte beim Auslesen in Strings. Array- und Objektwerte können als Strings serialisiert werden. Diese Strings können in Arrays und Objekte zurückgeparst werden (siehe z.B. http://www.json.org), auch wenn dieses Beispiel das nicht macht. Beispiel 19-3 ist lang, aber gut kommentiert und sollte einfach nachvollziehbar sein. Lesen Sie auf jeden Fall den ausführlichen Einführungskommentar, der die PObjectKlasse und ihre API dokumentiert. Beispiel 19-3: PObject.js: Persistente Objekte für JavaScript /** * PObject.js: JavaScript-Objekte, die über mehrere Browsersitzungen hinweg persistent sind * und von Webseiten mit gleichem Verzeichnis und Host gemeinsam verwendet werden können. * * Dieses Modul definiert einen PObject( )-Konstruktor zur Erzeugung eines persistenten * Objekts. * PObject-Objekte haben zwei öffentliche Methoden. save( ) speichert bzw. "persistiert" die * derzeitigen Eigenschaften des Objekts. forget( ) löscht die persistenten * Eigenschaften des Objekts. Um eine persistente Eigenschaft an einem PObject zu definieren, 4 Es besteht auch die Möglichkeit, eine Persistenzklasse zu definieren, die so weit wie möglich Cookies verwendet und auf eine auf IE oder Flash basierende Persistenz zurückgreift, falls Cookies deaktiviert wurden.

19.5 Cookie-Alternativen |

517

clientseitiges JavaScript

niert ähnlich wie die Cookie-Klasse in Beispiel 19-2. Mit dem PObject( )-Konstruktor wird ein persistentes Objekt erzeugt, an das der Name, die Standardwerte und eine onload-Handler-Funktion übergeben werden. Der Konstruktor erzeugt ein neues JavaScript-Objekt und versucht, die bereits unter dem von Ihnen angegebenen Namen gespeicherten persistenten Daten zu laden. Findet er diese Daten, parst er sie in einen Satz von Name/Wert-Paaren und setzt diese Paare als Eigenschaften des neu erstellten Objekts. Findet er keine bereits gespeicherten Daten, verwendet er die Eigenschaften der von Ihnen angegebenen Standardobjekte. In beiden Fällen wird die von Ihnen festgelegte onload-Handler-Funktion asynchron aufgerufen, sobald Ihre persistenten Daten für den Gebrauch bereitstehen.

491-0.book Seite 518 Mittwoch, 4. April 2007 9:55 09

e-bol.net Beispiel 19-3: PObject.js: Persistente Objekte für JavaScript (Fortsetzung) * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

setzen Sie die Eigenschaft am Objekt einfach so, als wäre es ein reguläres JavaScriptObjekt, und rufen dann die save( )-Methode auf, um den derzeitigen Status des Objekts zu speichern. Die Namen "save" und "forget" dürfen Sie nicht als Eigenschaftsnamen verwenden. Eigenschaftsnamen dürfen auch nicht mit $ beginnen. PObject ist für die Verwendung mit Eigenschaftswerten vom Typ String gedacht. Sie können auch Eigenschaften vom Typ Boolean und Number speichern, sie werden aber beim Auslesen zu Strings konvertiert. Wird ein PObject erzeugt, so werden die persistenten Daten gelesen und als reguläre JavaScript-Eigenschaften im neu erzeugten Objekt gespeichert. Das PObject wird genau wie ein reguläres JavaScript-Objekt verwendet. Allerdings sind persistente Eigenschaften nicht immer bereit, wenn der PObject( )-Konstruktor zurückkehrt. Sie sollten deshalb auf eine asynchrone Benachrichtigung warten, indem Sie eine onload-Handler-Funktion an den Konstruktor übergeben. Konstruktor: PObject(name, defaults, onload): Argumente: name

Ein Name, der dieses persistente Objekt identifiziert. Eine einzelne Seite kann mehrere PObject-Objekte enthalten, und PObjects sind allen Seiten im selben Verzeichnis zugänglich. Daher sollte dieser Name innerhalb des Verzeichnisses eindeutig sein. Ist dieses Argument null oder nicht angegeben, so wird der Dateiname (aber nicht das Verzeichnis) verwendet, der die Webseite enthält.

defaults

Ein optionales JavaScript-Objekt. Kann kein gespeicherter Wert für das persistente Objekt gefunden werden (was der Fall ist, wenn ein PObject zum ersten Mal erzeugt wird), werden die Eigenschaften dieses Objekts in das neu erzeugte PObject kopiert.

onload

Die (asynchron) aufzurufende Funktion, wenn persistente Werte in das PObject geladen wurden und bereitstehen. Diese Funktion wird mit zwei Argumenten aufgerufen: einer Referenz auf das PObject und dem PObject-Namen. Diese Funktion wird aufgerufen, *nachdem* der PObject( )-Konstruktor zurückkehrt. PObject -Eigenschaften sollten nicht vor diesem Schritt verwendet werden.

Method PObject.save(lebensdauerInTagen): Speichere die Eigenschaften eines PObjects. Diese Methode speichert die Eigenschaften des PObject und stellt sicher, dass sie mindestens für die angegebene Anzahl an Tagen persistent sind. Method PObject.forget( ): Lösche die Eigenschaften des PObject. Speichere dann das "leere" PObject in den persistenten Speicher und veranlasse, wenn möglich, das Ablaufen desselben.

518 | Kapitel 19: Cookies und Persistenz auf der Clientseite

491-0.book Seite 519 Mittwoch, 4. April 2007 9:55 09

e-bol.net Beispiel 19-3: PObject.js: Persistente Objekte für JavaScript (Fortsetzung)

// Das ist die KonstruktorFunktion PObject(name, defaults, onload) { if (!name) { // Wurde kein Name angegeben, verwende die letzte Komponente der URL name = window.location.pathname; var pos = name.lastIndexOf("/"); if (pos != -1) name = name.substring(pos+1); } this.$name = name; // Speichere unseren Namen // Delegiere das einfach an eine private, in der Implementierung definierte $init( )// Methode. this.$init(name, defaults, onload); }

19.5 Cookie-Alternativen |

519

clientseitiges JavaScript

* Implementierungshinweise: * * Dieses Modul definiert eine einzige PObject-API mit drei unterschiedlichen * Implementierungen dieser API. In Internet Explorer wird der IE-spezifische * "UserData"-Persistenzmechanismus verwendet. Auf allen anderen Browsern mit * Adobe-Flash-Plug-in wird der Flash-SharedObject-Persistenzmechanismus * verwendet. Nicht-IE-Browser, die kein Flash haben, greifen auf die * Implementierung mit Cookies zurück. Da die Flash-Implementierung * keine Verfallsdaten für gespeicherte Daten unterstützt, existieren Daten, die mit diesem * Mechanismus gespeichert werden, bis sie gelöscht werden. * * PObjects gemeinsam verwenden: * * Mit einem PObject in einer Seite gespeicherte Daten sind auch anderen Seiten * im gleichen Verzeichnis des gleichen Servers zugänglich. Wird die Cookie* Implementierung verwendet, können Seiten in Unterverzeichnissen die in übergeordneten * Verzeichnissen erzeugten Eigenschaften von PObjects lesen (aber nicht schreiben). Wird die * Flash-Implementierung verwendet, so kann jede Seite auf dem Webserver auf die gemeinsamen * Daten zugreifen, sofern sie mogelt und eine modifizierte Version dieses Moduls verwendet. * * Unterschiedliche Browseranwendungen speichern ihre Cookies getrennt und * persistente Daten, die mit Cookies in einem Browser gespeichert werden, sind mit * einem anderen Browser nicht zugänglich. Wenn zwei Browser allerdings die gleiche * Installation des Flash-Plug-ins verwenden, können diese Browser die mit dieser * Flash-Implementierung gespeicherten persistenten Daten gemeinsam benutzen. * * Sicherheitshinweise: * * Die über ein PObject gespeicherten Daten werden auf der Benutzerfestplatte unverschlüsselt * gespeichert. Auf dem Rechner laufende Anwendungen können auf die Daten zugreifen. PObject * ist also nicht für die Speicherung empfindlicher Informationen geeignet, wie z.B. von * Kreditkartennummern, Passwörtern, und Bankkontonummern. */

491-0.book Seite 520 Mittwoch, 4. April 2007 9:55 09

e-bol.net Beispiel 19-3: PObject.js: Persistente Objekte für JavaScript (Fortsetzung) // Speichere den aktuellen Status dieses PObject für mindestens so viele Tage wie angegeben. PObject.prototype.save = function(lebensdauerInTagen) { // Serialisiere die Eigenschaften des Objekts zuerst in einen einzigen String var s = ""; // Beginne mit einem leeren String for(var name in this) { // Durchlaufe die Eigenschaften if (name.charAt(0) == "$") continue; // Überspringe private $-Eigenschaften var wert = this[name]; // Beschaffe den Eigenschaftswert var typ = typeof wert; // Beschaffe den Eigenschaftstyp // Überspringe Eigenschaften vom Typ Object oder Function if (typ == "object" || typ == "function") continue; if (s.length > 0) s += "&"; // Trenne Eigenschaften mit & // Füge den Eigenschaftnamen und codierten Wert hinzu s += name + ':' + encodeURIComponent(wert); } // Delegiere das an eine private, in der Implementierung definierte Methode, die // die eigentliche Speicherung dieses serialisierten Strings durchführt. this.$save(s, lebensdauerInTagen); }; PObject.prototype.forget = function( ) { // Lösche zuerst die serialisierbaren Eigenschaften dieses Objekts mit Hilfe // der gleichen Eigenschaftsauswahlkriterien wie in save( ). for(var name in this) { if (name.charAt(0) == '$') continue; var wert = this[name]; var typ = typeof wert; if (typ == "function" || typ == "object") continue; delete this[name]; // Lösche die Eigenschaft } // Entferne alle vorher gespeicherten Daten, und lasse sie ablaufen, durch Speichern // des leeren Strings mit einer Lebensdauer von 0. this.$save("", 0); }; // Parse den String s in Name/Wert-Paare, und lege sie als Eigenschaften von this fest. // Ist der String null oder leer, kopiere stattdessen die Eigenschaften aus den Defaults. // Diese private Utility-Methode wird von der unten stehenden $init( )// Implementierung verwendet. PObject.prototype.$parse = function(s, defaults) { if (!s) { // Ist kein String vorhanden, so verwende stattdessen die Defaulteigenschaften if (defaults) for(var name in defaults) this[name] = defaults[name]; return; } // Die Name/Wert-Paare werden durch Ampersands voneinander getrennt und // die einzelnen Namen und Werte durch Doppelpunkte. // Wir verwenden die split( )-Methode, um alles zu parsen. var eigsn = s.split('&'); // Unterteile es in ein Array mit Name/Wert-Paaren for(var i = 0; i < eigsn.length; i++) { // Durchlaufe die Name/Wert-Paare

520 | Kapitel 19: Cookies und Persistenz auf der Clientseite

491-0.book Seite 521 Mittwoch, 4. April 2007 9:55 09

e-bol.net Beispiel 19-3: PObject.js: Persistente Objekte für JavaScript (Fortsetzung) var eig = eigsn[i]; var a = eig.split(':'); // Unterteile jedes Name/Wert-Paar am Doppelpunkt this[a[0]] = decodeURIComponent(a[1]); // Entschlüssele und speichere die Eigenschaft } };

clientseitiges JavaScript

/* * Den implementierungsspezifischen Teil des Moduls sehen Sie unten. * Für jede Implementierung definieren wir eine $init( )-Methode, die * persistente Daten lädt, und eine $save( )-Methode, die sie speichert. */ // Finde heraus, ob wir in IE sind. Falls nicht, schaue nach, ob wir ein Flash// Plug-in installiert haben und ob seine Version hoch genug ist var istIE = navigator.appName == "Microsoft Internet Explorer"; var hatFlash7 = false; if (!istIE && navigator.plugins) { // Wenn wir die Netscape-Plug-in-Architektur verwenden var flashplayer = navigator.plugins["Shockwave Flash"]; if (flashplayer) { // Wenn wir ein Flash-Plug-in haben // Extrahiere die Versionsnummer var flashversion = flashplayer.description; var flashversion = flashversion.substring(flashversion.search("\\d")); if (parseInt(flashversion) >= 7) hatFlash7 = true; } } if (istIE) { // Wenn wir uns in IE befinden // Der PObject( )-Konstruktor delegiert an diese Initialisierungsfunktion PObject.prototype.$init = function(name, defaults, onload) { // Erzeuge ein unsichtbares Element mit userData-Behavior zur Datenspeicherung var div = document.createElement("div"); // Erzeuge ein -Tag this.$div = div; // Speichere es div.id = "PObject" + name; // Gib ihm einen Namen div.style.display = "none"; // Mache es unsichtbar // Das ist der IE-spezifische Trick, mit dem die Persistenz funktioniert. // Das "userData"-Verhalten fügt diesem -Element die getAttribute( )-, // setAttribute( )-, load( )- und save( )-Methoden hinzu. Wir verwenden sie // weiter unten. div.style.behavior = "url('#default#userData')"; document.body.appendChild(div);

// Füge das Element ins Dokument ein

// Jetzt rufen wir ggf. bereits gespeicherte, persistente Daten ab. div.load(name); // Lade die unter unserem Namen gespeicherten Daten // Die Daten bestehen aus mehreren Attributen. Uns interessiert davon nur ein // Attribut. Der Name "daten" für das Attribut ist frei gewählt. var daten = div.getAttribute("daten");

19.5 Cookie-Alternativen |

521

491-0.book Seite 522 Mittwoch, 4. April 2007 9:55 09

e-bol.net Beispiel 19-3: PObject.js: Persistente Objekte für JavaScript (Fortsetzung) // Parse die abgerufenen Daten, und unterteile sie in Objekteigenschaften this.$parse(daten, defaults); // Wenn ein onload-Callback existiert, veranlasse einen asynchronen Aufruf // nach dem Zurückkehren des PObject( )-Konstruktors. if (onload) { var pobj = this; // In der eingebetteten Funktion kann "this" nicht verwendet // werden setTimeout(function( ) { onload(pobj, name);}, 0); } } // Speichere den aktuellen Stand des persistenten Objekts PObject.prototype.$save = function(s, lebensdauerInTagen) { if (lebensdauerInTagen) { // Etwaige Lebensdauer in ein Verfallsdatum konvertieren var jetzt = (new Date( )).getTime( ); var laeuftAb = jetzt + lebensdauerInTagen * 24 * 60 * 60 * 1000; // Lege das Verfallsdatum als Stringeigenschaft des -Tags fest this.$div.laeuftAb = (new Date(laeuftAb)).toUTCString( ); } // Speichere die Daten jetzt als persistente Daten this.$div.setAttribute("daten", s); // Setze Text als Attribut des -Tags this.$div.save(this.$name); // und mache das Attribut persistent }; } else if (hasFlash7) { // Das ist die Flash-basierte Implementierung PObject.prototype.$init = function(name, defaults, onload) { var moviename = "PObject_" + name; // id des -Tags var url = "PObject.swf?name=" + name; // URL der Movie-Datei // Wenn der Flash-Player läuft und unsere Daten bereithält, // benachrichtigt er uns mit einem FSCommand. Wir müssen einen // Handler definieren, der in diesem Fall aufgerufen wird. var pobj = this; // wird von der eingebetteten Funktion verwendet // Flash verlangt, dass wir unsere Funktion mit diesem globalen Symbol benennen window[moviename + "_DoFSCommand"] = function(kommando, args) { // Wir wissen, dass Flash bereit ist. Also fragen wir unsere persistenten Daten ab var daten = pobj.$flash.GetVariable("daten") pobj.$parse(daten, defaults); // Parse Daten oder kopiere Defaults if (onload) onload(pobj, name); // Rufe onload-Handler auf, falls vorhanden }; // Erzeuge ein -Tag zum Speichern unseres Flash// Movies. Die Verwendung eines // Tags entspricht dem Standard besser, scheint aber Probleme beim // Empfang des FSCommand zu machen. Wir werden Flash nie // unter IE verwenden, was die Sache stark vereinfacht. var movie = document.createElement("embed"); // Element, das das Movie enthält

522 | Kapitel 19: Cookies und Persistenz auf der Clientseite

491-0.book Seite 523 Mittwoch, 4. April 2007 9:55 09

e-bol.net Beispiel 19-3: PObject.js: Persistente Objekte für JavaScript (Fortsetzung)

document.body.appendChild(movie); this.$flash = movie;

clientseitiges JavaScript

movie.setAttribute("id", moviename); // Element-id movie.setAttribute("name", moviename); // und -Name movie.setAttribute("type", "application/x-shockwave-flash"); movie.setAttribute("src", url); // Das ist die URL des Movies // Setze das Movie unauffällig in die rechte obere Ecke movie.setAttribute("width", 1); // Mit einem Wert von 0 funktioniert es nicht movie.setAttribute("height", 1); movie.setAttribute("style", "position:absolute; left:0px; top:0px;"); // Füge das Movie ins Dokument ein // Und speichere es für später

}; PObject.prototype.$save = function(s, lebensdauerInTagen) { // Um die Daten persistent zu machen, setzen wir sie einfach als eine Variable am // Flash-Movie. Der ActionScript-Code im Movie macht die Daten persistent. // Beachte, dass die Flash-Persistenz keine Zeitbegrenzung unterstützt. this.$flash.SetVariable("daten", s); // Fordere Flash auf, den Text zu speichern }; } else { /* Wenn wir weder IE noch Flash 7 haben, nehmen wir Cookies */ PObject.prototype.$init = function(name, defaults, onload) { var alleCookies = document.cookie; // Beschaffe alle Cookies var daten = null; // Annehmen, dass keine Cookie// Daten vorhanden sind var start = alleCookies.indexOf(name + '='); // Suche nach dem Cookie-Start if (start != -1) { // Gefunden start += name.length + 1; // Cookie-Namen überspringen var ende = alleCookies.indexOf(';', start); // Ende des Cookies suchen if (ende == -1) ende = alleCookies.length; daten = alleCookies.substring(start, ende); // Extrahiere die Cookie-Daten } this.$parse(daten, defaults); // Parse den Cookie-Wert in Eigenschaften if (onload) { // Rufe den onload-Handler asynchron auf var pobj = this; setTimeout(function( ) { onload(pobj, name);}, 0); } }; PObject.prototype.$save = function(s, lebensdauerInTagen) { var cookie = this.$name + '=' + s; // Cookie-Name und -Wert if (lebensdauerInTagen != null) // Füge Verfallsdatum hinzu cookie += "; max-age=" + (lebensdauerInTagen*24*60*60); document.cookie = cookie; // Speichere den Cookie }; }

19.5 Cookie-Alternativen |

523

491-0.book Seite 524 Mittwoch, 4. April 2007 9:55 09

e-bol.net 19.5.3.1 ActionScript-Code für Flash-Persistenz Der Code in Beispiel 19-3 ist noch unvollständig. Die Flash-basierte Persistenzimplementierung braucht ein Flash-Movie namens PObject.swf. Das Movie ist nichts anderes als eine kompilierte ActionScript-Datei. Beispiel 19-4 zeigt den ActionScript-Code. Beispiel 19-4: ActionScript-Code für die Flash-basierte Persistenz class PObject { static function main( ) { // SharedObject ist in Flash 6 vorhanden, ist aber noch nicht gegen // Cross-Domain-Scripting geschützt. Also müssen wir die Flash 7 // -Version des Flash-Players haben. var version = getVersion( ); version = parseInt(version.substring(version.lastIndexOf(" "))); if (isNaN(version) || version < 7) return; // Erzeuge ein SharedObject zur Speicherung unserer persistenten Daten. // Der Name des Objekts wird in der Movie-URL wie folgt übergeben: // PObject.swf?name=name _root.so = SharedObject.getLocal(_root.name); // Rufe die ursprünglichen Daten ab, und speichere sie unter _root.data. _root.data = _root.so.data.data; // Beobachte die Datenvariable. Ändert sie sich, dann speichere ihren neuen Wert // persistent. _root.watch("daten", function(eigName, wertAlt, wertNeu) { _root.so.data.daten = wertNeu; _root.so.flush( ); }); // Benachrichtige JavaScript, dass es die persistenten Daten jetzt abrufen kann. fscommand("init"); } }

Der ActionScript-Code ist recht einfach. Er beginnt mit der Erzeugung eines SharedObjects und verwendet einen (von JavaScript) angegebenen Namen im URL-Abfrageteil des Movie-Objekts. Durch die Erzeugung dieses SharedObject werden die persistenten Daten geladen, die in diesem Fall einfach aus einem einzigen String bestehen. Dieser Datenstring wird mit der fscommand( )-Funktion an JavaScript zurückgegeben. Die Funktion ruft den in JavaScript definierten doFSCommand-Handler auf. Der ActionScript-Code legt ebenfalls eine Handler-Funktion fest, die immer dann aufgerufen wird, wenn sich die daten-Eigenschaft des root-Objekts ändert. Der JavaScript-Code verwendet SetVariable( ), um die datenEigenschaft festzulegen, und diese ActionScript-Handler-Funktion wird als Antwort aufgerufen, wodurch die Daten persistent werden.

524 | Kapitel 19: Cookies und Persistenz auf der Clientseite

491-0.book Seite 525 Mittwoch, 4. April 2007 9:55 09

e-bol.net Der in der PObject.as-Datei von Beispiel 19-4 gezeigte ActionScript-Code muss in eine PObject.swf-Datei kompiliert werden, bevor er mit dem Flash-Player verwendet werden kann. Das machen Sie mit dem Open Source-ActionScript-Compiler mtasc (erhältlich unter http://www.mtasc.org). Rufen Sie den Compiler wie folgt auf: mtasc -swf PObject.swf -main -header 1:1:1 PObject.as

19.6 Persistente Daten und Sicherheit Die Dokumentation am Anfang von Beispiel 19-3 zeigt Sicherheitsbedenken auf, die Sie bei der Verwendung clientseitiger Persistenz im Auge behalten sollten. Alle Daten, die auf der Festplatte des Benutzers gespeichert werden, stehen dort in unverschlüsseltem Format. Sie sind daher neugierigen Benutzern zugänglich, die ebenfalls auf den Rechner Zugriff haben, sowie böswilliger Software (wie z.B. Spyware), die auf dem Rechner liegt. Aus diesem Grund sollte keine Art der clientseitigen Persistenz zur Speicherung empfindlicher Informationen verwendet werden, also von Passwörtern, Bankkontonummern usw. Denken Sie daran: Nur weil ein Benutzer etwas in ein Formularfeld eintippt, während er mit Ihrer Website kommuniziert, bedeutet das nicht, dass er diese Werte auf seiner Festplatte speichern möchte. Nehmen wir beispielsweise eine Kreditkartennummer. Das ist eine empfindliche Information, die Leute in ihren Geldbörsen versteckt halten. Wenn Sie diese Informationen als persistente Daten auf der Clientseite speichern, ist es fast so, als würden Sie die Kreditkartennummer auf ein Stück Papier schreiben und es auf die Tastatur des Benutzers kleben. Da Spyware überall eindringt (zumindest auf Windows-Plattformen), können Sie die Nummer praktisch gleich im Internet bekannt geben. Denken Sie auch daran, dass viele Webbenutzer Websites misstrauen, die Cookies oder andere persistente Mechanismen verwenden, die irgendetwas in Richtung »Verfolgung« betreiben. Versuchen Sie die in diesem Kapitel besprochenen Persistenzmechanismen dazu zu verwenden, dem Benutzer auf Ihrer Site ein positives Erlebnis zu verschaffen; verwenden Sie Persistenzmechanismen nicht als Datensammelmechanismus.

19.6 Persistente Daten und Sicherheit |

525

clientseitiges JavaScript

mtasc erstellt eine SWF-Datei, die die PObject.main( )-Methode des ersten Frames im Movie aufruft. Wenn Sie stattdessen die Flash-IDE verwenden, müssen Sie PObject. main( ) ausdrücklich vom ersten Frame aus aufrufen. Die Alternative ist, einfach den Code aus der main( )-Methode zu kopieren und in das erste Frame einzufügen.

491-0.book Seite 526 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Chapter 1

KAPITEL 20

HTTP skripten

Das Hypertext Transfer Protocol (HTTP) legt fest, wie Webbrowser Dokumente von Webservern anfordern und Formularinhalte an diese übertragen und wie Webserver auf diese Anfragen und Übertragungen antworten. Webbrowser bewältigen natürlich jede Menge HTTP. Normalerweise wird HTTP allerdings nicht von Skripten aus kontrolliert, sondern hinter den Kulissen verwendet, wenn der Benutzer einen Link anklickt, ein Formular übermittelt oder eine URL eingibt. Normalerweise, aber nicht immer: JavaScriptCode kann in Skripten mit HTTP arbeiten. HTTP-Requests können initiiert werden, wenn ein Skript die location-Eigenschaft eines Window-Objekts festlegt oder die submit( )-Methode eines Form-Objekts aufruft. In beiden Fällen lädt der Browser eine neue Seite ins Fenster und überschreibt das dort laufende Skript. Diese triviale Art, HTTP per Skript zu betreiben, kann in einer Webseite mit mehreren Frames sinnvoll sein, ist aber nicht das Thema dieses Kapitels. Vielmehr betrachten wir hier, wie JavaScript-Code mit einem Webserver kommunizieren kann, ohne den Webbrowser zu veranlassen, die gerade angezeigte Seite neu zu laden. Die Tags , und haben src-Attribute. Setzt ein Skript diese Eigenschaften auf eine URL, wird ein HTTP GET-Request gestartet, um den Inhalt der URL herunterzuladen. Ein Skript kann also Informationen an einen Webserver übergeben, indem die Information in den Query-String-Teil einer Bild-URL codiert und das srcAttribut eines -Elements zu dieser URL gesetzt wird. Der Webserver muss zwar als Antwort ein Bild zurückgeben, aber das kann unsichtbar sein: beispielsweise ein transparentes Bild, das 1 Pixel hoch und 1 Pixel breit ist.1

1 Bilder dieser Art werden ab und zu Web Bugs genannt. Sie haben einen schlechten Ruf, da Datenschutzprobleme entstehen, wenn Web Bugs verwendet werden, um Informationen an einen anderen Server zu übermitteln als an den, von dem aus die Webseite geladen wurde. Eine übliche und legitime Verwendung des Web Bugs über einen dritten Server ist zur Trefferzählung und Verkehrsanalyse. Wenn das Skript der Webseite die src-Eigenschaft eines Bildes veranlasst, Informationen an den Server zurückzusenden, über den die Seite ursprünglich geladen wurde, brauchen Sie sich über Datenschutzprobleme keine Gedanken zu machen.

526 |

491-0.book Seite 527 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Selbst das -Tag hat ein src-Attribut, das gesetzt werden kann, um einen dynamischen HTTP-Request durchzuführen. Die Verwendung des -Tags zum Durchführen von HTTP-Requests ist besonders attraktiv, da kein Parsen notwendig ist, wenn die Serverantwort aus JavaScript-Code besteht: Der JavaScript-Interpreter führt die Serverantwort einfach aus. Das Steuern von HTTP über die Tags , und ist zwar möglich, aber recht schwierig, wenn das Skript portabel sein soll. Dieses Kapitel zeigt Ihnen eine andere, leistungsfähigere Möglichkeit, dies zu erreichen. Das XMLHttpRequest-Objekt wird von modernen Browsern gut unterstützt und gibt Ihnen vollen Zugang zum HTTPProtokoll. Neben normalen GET-Requests können Sie auch POST- und HEAD-Requests durchführen. XMLHttpRequest kann die Antwort des Webservers synchron oder asynchron zurückgeben und den Inhalt als Text- oder DOM-Dokument zur Verfügung stellen. Trotz seines Namens ist das XML-Objekt HttpRequest nicht auf XML-Dokumente beschränkt: Es kann jede Art von Text-Dokument abrufen. Das XMLHttpRequestObjekt ist der Hauptbaustein einer Webanwendungsarchitektur, die unter dem Namen Ajax bekannt ist. Wir werden Ajax-Anwendungen besprechen, nachdem wir gesehen haben, wie XMLHttpRequest funktioniert. Am Kapitelende werde ich auf das Thema HTTP per -Tags zurückkommen und Ihnen zeigen, wie Sie sie verwenden können, wenn kein XMLHttpRequest-Objekt verfügbar ist.

20.1 Verwendung von XMLHttpRequest HTTP per XMLHttpRequest läuft in drei Schritten ab: • Erzeugung eines XMLHttpRequest-Objekts • den HTTP-Request konfigurieren und ihn an einen Webserver übergeben • die Serverantwort synchron oder asynchron empfangen

20.1 Verwendung von XMLHttpRequest |

527

clientseitiges JavaScript

-Tags gibt es in HTML noch nicht so lange. Sie sind oft vielseitiger als Tags, da der Webserver ein Ergebnis zurückgeben kann, das – anders als eine binäre Bilddatei – durch das Skript gelesen werden kann. Um ein HTTP-Skript mit dem Tag zu schreiben, codiert das Skript zuerst Informationen für den Webserver in eine URL und setzt dann das Attribut src des auf diese URL. Der Server erzeugt ein HTML-Dokument mit der Antwort und sendet dieses an den Webbrowser zurück, der es im anzeigt. Das muss für den Benutzer nicht sichtbar sein. Es kann zum Beispiel mit CSS versteckt werden. Ein Skript hat zur Serverantwort Zugang, indem es das Document-Objekt des parst. Beachten Sie, dass diese Analyse den Beschränkungen der Same Origin Policy unterliegt, die in Abschnitt 13.8.2 beschrieben wird.

491-0.book Seite 528 Mittwoch, 4. April 2007 9:55 09

e-bol.net Die folgenden Abschnitte beschreiben jeden dieser Schritte ausführlich. Die Beispiele in diesem Abschnitt und im Rest des Kapitels sind Teil einer größeren Einheit. Sie definieren Utility-Funktionen im Namensraum HTTP (siehe Kapitel 10). Keines der folgenden Beispiele enthält jedoch den Code, der diesen Namensraum erzeugt. Im herunterladbaren Beispielcode auf der Webseite zu diesem Buch finden Sie die Datei http.js, die den Code enthält, der den Namensraum HTTP erzeugt, und Sie müssen dazu lediglich die Zeile var HTTP = {}; zu den hier gezeigten Beispielen hinzufügen.

20.1.1 Wie komme ich an ein Request-Objekt? Das XMLHttpRequest-Objekt wurde nie standardisiert, und seine Erzeugung unter dem Internet Explorer unterscheidet sich von anderen Plattformen. (Glücklicherweise ist die API zur Verwendung eines XMLHttpRequest-Objekts nach dessen Erstellung aber unter allen Plattformen dieselbe). Bei den meisten Browsern erzeugen Sie ein XMLHttpRequest-Objekt mit einem einfachen Konstruktor-Aufruf: var request = new XMLHttpRequest( );

In Versionen vor Internet Explorer 7 hat IE keine eingebaute Konstruktorfunktion namens XMLHttpRequest( ). Unter IE 5 und 6 ist XMLHttpRequest ein ActiveX-Objekt, das Sie durch die Übergabe des Objektnamens an den Konstruktor ActiveXObject( ) erzeugen müssen: var request = new ActiveXObject("Msxml2.XMLHTTP");

Leider ist der Objektname in verschiedenen Ausgaben der Microsoft XML-HTTP-Library unterschiedlich. Abhängig von der beim Client installierten Library müssen Sie eventuell stattdessen den folgenden Code verwenden: var request = new ActiveXObject("Microsoft.XMLHTTP");

Beispiel 20-1 ist eine plattformübergreifende Utility-Funktion mit dem Namen HTTP.newRequest( ) zur Erzeugung von XMLHttpRequest-Objekten. Beispiel 20-1: Die HTTP.newRequest( ) Utility // Eine Liste mit XMLHttpRequest-Factory-Funktionen zum Durchprobieren HTTP._factories = [ function( ) { return new XMLHttpRequest( ); }, function( ) { return new ActiveXObject("Msxml2.XMLHTTP"); }, function( ) { return new ActiveXObject("Microsoft.XMLHTTP"); } ]; // Wenn wir eine funktionierende Factory finden, speichern wir sie hier. HTTP._factory = null; // Erzeuge ein neues XMLHttpRequest-Objekt, und gib es zurück. // // Beim ersten Aufruf probieren wir die Factory-Funktionen aus, bis

528 | Kapitel 20: HTTP skripten

491-0.book Seite 529 Mittwoch, 4. April 2007 9:55 09

e-bol.net Beispiel 20-1: Die HTTP.newRequest( ) Utility (Fortsetzung) // wir eine finden, die einen Wert ungleich null zurückgibt und keine // Exception auslöst. Die funktionierende Factory merken wir uns für später. // HTTP.newRequest = function( ) { if (HTTP._factory != null) return HTTP._factory( );

clientseitiges JavaScript

for(var i = 0; i < HTTP._factories.length; i++) { try { var factory = HTTP._factories[i]; var request = factory( ); if (request != null) { HTTP._factory = factory; return request; } } catch(e) { continue; } } // Kommen wir hier an, dann haben wir keine passende Factory. // Löse jetzt und für alle zukünftigen Aufrufe eine Exception aus. HTTP._factory = function( ) { throw new Error("XMLHttpRequest wird nicht unterstützt"); } HTTP._factory( ); // Exception auslösen }

20.1.2 Einen Request übermitteln Nachdem ein XMLHttpRequest-Objekt erzeugt wurde, besteht der nächste Schritt darin, einen Request an den Webserver zu senden. Das ist wiederum selbst ein mehrstufiger Vorgang. Zuerst rufen Sie die Methode open( ) auf, um die von Ihnen gewünschte URL anzugeben, und dann die HTTP-Methode des Requests. Die meisten HTTP-Requests werden mit der Methode GET durchgeführt, die einfach den Inhalt der URL herunterlädt. Eine andere nützliche Methode ist POST, die von den meisten HTML-Formularen verwendet wird: Mit ihr können Werte von benannten Variablen in den Request aufgenommen werden. HEAD ist ebenfalls eine nützliche HTTP-Methode: Sie weist den Server an, lediglich die mit der URL assoziierten Header zurückzugeben. Dadurch kann beispielsweise das Änderungsdatum eines Dokuments überprüft werden, ohne den Dokumentinhalt selbst herunterzuladen. Geben Sie die Methode und URL Ihrer Anfrage mit der open( )-Methode an: request.open("GET", url, false);

In der Standardeinstellung führt die open( )-Methode einen asynchronen XMLHttpRequest durch. Die Übergabe von false als drittes Argument fordert eine synchrone Antwort vom Server an. Asynchrone Antworten werden im Allgemeinen vorgezogen, aber synchrone Antworten sind etwas einfacher, weswegen wir diesen Fall zuerst besprechen.

20.1 Verwendung von XMLHttpRequest |

529

491-0.book Seite 530 Mittwoch, 4. April 2007 9:55 09

e-bol.net Zusätzlich zum optionalen dritten Argument kann die open( )-Methode einen Namen und ein Passwort als optionale vierte und fünfte Argumente annehmen. Sie werden verwendet, wenn eine URL von einem Server abgefragt wird, der eine Autorisierung benötigt. Die open( )-Methode sendet den Request nicht wirklich an den Webserver. Sie speichert einfach ihre Argumente, um sie später zu verwenden, wenn der Request tatsächlich gesendet wird. Bevor Sie die Abfrage senden, müssen Sie alle notwendigen Request-Header setzen. Hier sehen Sie einige Beispiele:2 request.setRequestHeader("User-Agent", "XMLHttpRequest"); request.setRequestHeader("Accept-Language", "en"); request.setRequestHeader("If-Modified-Since", lastRequestTime.toString( ));

Beachten Sie, dass der Webbrowser automatisch relevante Cookies zu Ihrem Request hinzufügt. Sie müssen einen Cookie-Header nur dann ausdrücklich setzen, wenn Sie einen künstlichen Cookie an den Server senden wollen. Nachdem Sie das Request-Objekt erzeugt, die open( )-Methode aufgerufen und die Header festgelegt haben, senden Sie den Request an den Server: request.send(null);

Das Argument der send( )-Funktion ist der Body des Requests. Bei HTTP GET-Requests ist dieser immer null. Bei POST-Requests sollte er die an den Server zu sendenden Formulardaten enthalten (siehe Beispiel 20-5). Fürs Erste übergeben Sie einfach null. (Beachten Sie, dass das Argument null zwingend notwendig ist. XMLHttpRequest ist ein Objekt auf der Clientseite, und seine Methoden – zumindest unter Firefox – mögen keine ausgelassenen Argumente, anders als Funktionen im JavaScript-Sprachkern.)

20.1.3 Eine synchrone Antwort erhalten Das XMLHttpRequest-Objekt speichert nicht nur die Einzelheiten des durchgeführten HTTP-Requests, sondern repräsentiert auch die Antwort des Servers. Wenn Sie false als drittes Argument an open( ) übergeben, so ist die send( )-Methode synchron: Sie blockiert und gibt nichts zurück, bis die Serverantwort empfangen wurde.3 send( ) gibt keinen Statuscode zurück. Nach der Rückgabe können Sie den vom Server zurückgegebenen HTTP-Statuscode mit der Eigenschaft status des Request-Objekts über-

prüfen. Die möglichen Werte des Codes werden vom HTTP-Protokoll festgelegt. Der Status 200 bedeutet, dass die Anfrage erfolgreich war und die Antwort vorliegt. Der Status 404 zeigt einen »not found«-Fehler an, der auftritt, wenn die URL nicht vorhanden ist.

2 Einzelheiten zum HTTP-Protokoll sprengen den Umfang des Buches. Konsultieren Sie eine HTTP-Referenz für Details zu diesem und weiteren Headern, die bei HTTP-Requests gesetzt werden können. 3 XMLHttpRequest hat unheimlich leistungsfähige Features, aber seine API ist nicht besonders gut gestaltet. Beispielsweise sollte der Boolesche Wert, der synchrones oder asynchrones Verhalten festlegt, eigentlich ein Argument der Methode send( ) sein.

530 | Kapitel 20: HTTP skripten

491-0.book Seite 531 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Ist eine Anfrage synchron, sieht der auf send( ) folgende Code oft ungefähr so aus: if (request.status == 200) { // Wir haben die Serverantwort erhalten. Zeige den Antworttext an. alert(request.responseText); } else { // Etwas ist schiefgelaufen. Zeige Fehlercode und -meldung an. alert("Error " + request.status + ": " + request.statusText); }

Zusätzlich zum Statuscode und dem Antworttext oder -dokument stellt das XMLHttpRequest-Objekt auch den Zugriff auf die vom Webserver zurückgegebenen HTTP-Header bereit. getAllResponseHeaders( ) gibt die Antwort-Header als ungeparsten Textblock zurück, und getResponseHeader( ) gibt den Wert eines angegebenen Headers zurück. Ein Beispiel: if (request.status == 200) { // Stellen Sie sicher, dass es keine Fehler gab // Stellen Sie sicher, dass die Antwort ein XML-Dokument ist if (request.getResponseHeader("Content-Type") == "text/xml") { var doc = request.responseXML; // Machen Sie jetzt etwas mit dem Antwortdokument } }

Bei der synchronen Verwendung von XMLHttpRequest besteht ein ernstes Problem: Wenn der Webserver seine Antwort abbricht, blockiert die send( )-Methode eine lange Zeit. Die Ausführung von JavaScript hält an, und der Webbrowser kann so aussehen, als ob er sich aufgehängt hätte (das hängt natürlich von der Plattform ab). Hängt der Server sich während eines normalen Ladevorgangs auf, kann der Benutzer im Browserfenster einfach auf Stop klicken und es mit einem anderen Link oder einer anderen URL versuchen. Aber für XMLHttpRequest gibt es keine Stop-Schaltflächen. Die Methode send( ) bietet keine andere Möglichkeit an, die maximale Wartezeit anzugeben, und das Ausführungsmodell von JavaScript auf der Clientseite sieht nur einen Thread vor. Das verbietet dem Skript, einen synchronen XMLHttpRequest nach dessen Absenden zu unterbrechen. Diese Probleme lassen sich umgehen, indem Sie XMLHttpRequest asynchron verwenden.

20.1 Verwendung von XMLHttpRequest |

531

clientseitiges JavaScript

Das XMLHttpRequest-Objekt stellt die Serverantwort als String über die Eigenschaft responseText des Request-Objekts zur Verfügung. Wenn die Antwort ein XML-Dokument ist, können Sie auf das Dokument auch als DOM-Document-Objekt über die Eigenschaft responseXML zugreifen. Damit XMLHttpRequest die Antwort an ein Document-Objekt übergeben kann, muss der Server sein XML-Dokument mit dem MIMETyp »text/xml« identifizieren.

491-0.book Seite 532 Mittwoch, 4. April 2007 9:55 09

e-bol.net

20.1.4 Umgang mit einer asynchronen Response Um ein XMLHttpRequest-Objekt im asynchronen Modus zu verwenden, übergeben Sie true als drittes Argument der open( )-Methode (oder übergehen Sie einfach das dritte Argument: true ist der Default). Daduch sendet die send( )-Methode die Anfrage an den Server und kehrt sofort zurück. Wenn die Antwort des Servers ankommt, steht sie über das XMLHttpRequest-Objekt zur Verfügung. Dazu werden die gleichen Eigenschaften verwendet, die oben für die synchrone Verwendung beschrieben wurden. Eine asynchrone Antwort vom Server ist wie ein asynchroner Mausklick vom Benutzer: Wenn sie stattfindet, müssen Sie benachrichtigt werden. Das machen Sie mit einem Event-Handler. Bei XMLHttpRequest wird der Event-Handler über die Eigenschaft onreadystatechange festgelegt. Wie der Name der Eigenschaft schon sagt, wird die EventHandler-Funktion aufgerufen, wenn sich der Wert der Eigenschaft readyState ändert. readyState ist eine ganze Zahl, die den Status der HTTP-Anfrage angibt, und die möglichen Werte sind in Tabelle 20-1 aufgezählt. Das XMLHttpRequest-Objekt definiert keine symbolischen Konstanten für die in der Tabelle aufgeführten fünf Werte. Tabelle 20-1: Werte für XMLHttpRequest.readyState readyState

Bedeutung

0

open( ) wurde bis jetzt noch nicht aufgerufen.

1

open( ) wurde aufgerufen, aber send( ) noch nicht.

2

send( ) wurde aufgerufen, aber der Server hat noch nicht geantwortet.

3

Daten werden vom Server empfangen. readyState 3 unterscheidet sich in Firefox und Internet Explorer etwas; siehe Abschnitt 20.1.4.1.

4

Die Antwort des Servers ist vollständig.

Da XMLHttpRequest nur diesen einen Event-Handler hat, wird er für alle möglichen Events aufgerufen. Ein typischer onreadystatechange-Handler wird erst einmal beim Aufruf von open( ) und dann einmal beim Aufruf von send( ) aufgerufen. Wenn der erste Teil der Serverantwort eintrifft, erfolgt ein weiterer Aufruf, und ein letzter erfolgt, wenn die Antwort vollständig ist. Im Gegensatz zu den meisten Events in JavaScript auf der Clientseite wird an den onreadystatechange-Handler kein Objekt übergeben. Um festzustellen, warum Ihr Event-Handler aufgerufen wurde, müssen Sie sich die readyState-Eigenschaft des XMLHttpRequest-Objekts ansehen. Leider wird das XMLHttpRequest-Objekt auch nicht als Argument des Event-Handlers übergeben. Sie müssen die Event-Handler-Funktion also so definieren, dass sie auf das Request-Objekt zugreifen kann. Ein typischer Event-Handler einer asynchronen Anfrage sieht so aus: // Erzeuge mit der oben definierten Utility einen XMLHttpRequest var request = HTTP.newRequest( ); // Registriere einen Event-Handler für asynchrone Notifikationen. // Dieser Code schreibt vor, was mit der Antwort zu tun ist, und wird in eine

532 | Kapitel 20: HTTP skripten

491-0.book Seite 533 Mittwoch, 4. April 2007 9:55 09

e-bol.net // eingebettete Funktion gestellt, bevor der request.onreadystatechange = function( ) { if (request.readyState == 4) { // if (request.status == 200) // alert(request.responseText); // } }

Request überhaupt gesendet wird. Die Anfrage ist abgeschlossen Sie war erfolgreich Zeige die Antwort des Servers an

clientseitiges JavaScript

// Einen GET-Request für eine bestimmte URL ausführen. Ohne drittes Argument // ist das hier ein asynchroner Request request.open("GET", url); // Wenn nötig, können wir hier zusätzliche Request-Header angeben. // Jetzt den Request senden. Da es ein GET-Request ist, übergeben wir null als // Body. Da er asynchron ist, blockiert send( ) nicht, sondern // kehrt sofort zurück. request.send(null);

20.1.4.1 Hinweise für readyState 3 Das Objekt XMLHttpRequest wurde nie standardisiert und die Browser handhaben readyState 3 unterschiedlich. Beispielsweise ruft Firefox bei großen Downloads den onreadystatechange-Handler mehrmals in readyState 3 auf, um den derzeitigen Stand des Downloads mitzuteilen. Ein Skript kann diese mehrfachen Aufrufe verwenden, um dem Benutzer den Stand des Downloads anzuzeigen. Im Gegensatz dazu interpretiert Internet Explorer den Event-Handler im engeren Sinne und ruft ihn nur auf, wenn sich der readyState-Wert ändert. Das bedeutet, dass er für readyState 3 nur einmal aufgerufen wird, unabhängig davon, wie groß das heruntergeladene Dokument ist. Zusätzlich unterscheiden sich Browser darin, welcher Teil der Serverantwort in readyState 3 zur Verfügung steht. Obwohl Status 3 bedeutet, dass zumindest ein Teil der Antwort vom Server angekommen ist, sagt die Microsoft-Dokumentation für XMLHttpRequest ausdrücklich, dass eine Abfrage von responseText in diesem Status einem Fehler gleichkommt. Bei anderen Browsern scheint es ein undokumentiertes Feature zu sein, dass responseText den Teil der Serverantwort zurückgibt, der schon angekommen ist. Leider hat keiner der bekannten Browseranbieter sein XMLHttpRequest-Objekt ausreichend dokumentiert. Bis zum Erscheinen eines Standards oder zumindest einer eindeutigen Dokumentation ist es am sichersten, den Wert von readyState zu ignorieren, wenn er nicht 4 ist.

20.1.5 XMLHttpRequest Security Aufgrund der Same Origin Policy (siehe Abschnitt 13.8.2) kann das XMLHttpRequestObjekt HTTP-Requests nur an den Server senden, von dem das verwendete Dokument heruntergeladen wurde. Das ist eine vernünftige Einschränkung, die Sie aber zur Not

20.1 Verwendung von XMLHttpRequest |

533

491-0.book Seite 534 Mittwoch, 4. April 2007 9:55 09

e-bol.net umgehen können, indem Sie ein Skript auf der Serverseite als Proxy verwenden, das den Inhalt einer anderen URL für Sie holt. Diese Sicherheitsbeschränkung für XMLHttpRequest hat eine sehr wichtige Auswirkung: XMLHttpRequest führt HTTP-Requests aus und ist nicht mit anderen URL-Modellen kompatibel. Zum Beispiel funktioniert es nicht mit URLs, die das file://-Protokoll verwenden. Das bedeutet, dass Sie XMLHttpRequest-Skripte nicht von Ihrem lokalen Dateisystem aus testen können. Sie müssen das Testskript auf einem Webserver speichern (oder einen Server auf Ihrem Computer laufen lassen). Damit Ihre Testskripte ihre eigenen HTTP-Requests durchführen können, müssen sie über HTTP an Ihren Webbrowser übertragen werden.

20.2 XMLHttpRequest-Beispiele und Utilities Am Anfang dieses Kapitels habe ich Ihnen die Utility-Funktion HTTP.newRequest( ) vorgestellt, die für jeden beliebigen Browser ein XMLHttpRequest-Objekt beschaffen kann. Zusätzlich können Utility-Funktionen den Gebrauch von XMLHttpRequest vereinfachen. Die hier folgenden Unterabschnitte zeigen Beispiele von Utilities.

20.2.1 Einfache GET-Utilities Beispiel 20-2 ist eine sehr einfache Funktion, die den häufigsten Gebrauch von XMLHttpRequest abdecken kann: Übergeben Sie ihr einfach die zu holende URL und die Funktion, an die der Text der URL übergeben werden soll. Beispiel 20-2: Die HTTP.getText( )-Utility /** * Mit XMLHttpRequest holen Sie den Inhalt der angegebenen URL per * HTTP GET-Request. Kommt die Antwort an, übergeben Sie sie (als * Klartext) an die angegebene Callback-Funktion. * * Diese Funktion blockiert nicht und hat keinen Rückgabewert. */ HTTP.getText = function(url, callback) { var request = HTTP.newRequest( ); request.onreadystatechange = function( ) { if (request.readyState == 4 && request.status == 200) callback(request.responseText); } request.open("GET", url); request.send(null); };

Beispiel 20-3 ist eine triviale Variante, die XML-Dokumente holt und ihre geparste Repräsentation an eine Callback-Funktion übergibt.

534 | Kapitel 20: HTTP skripten

491-0.book Seite 535 Mittwoch, 4. April 2007 9:55 09

e-bol.net Beispiel 20-3: Die HTTP.getXML( )-Utility

clientseitiges JavaScript

HTTP.getXML = function(url, callback) { var request = HTTP.newRequest( ); request.onreadystatechange = function( ) { if (request.readyState == 4 && request.status == 200) callback(request.responseXML); } request.open("GET", url); request.send(null); };

20.2.2 Nur Header holen Ein Feature von XMLHttpRequest ist, dass es Sie die zu verwendende HTTP-Methode aussuchen lässt. Der HTTP HEAD-Request fordert beim Server die Header einer bestimmten URL an, ohne dabei den Inhalt der URL zurückzugeben. Das kann beispielsweise gemacht werden, um das Änderungsdatum einer Ressource vor dem Herunterladen zu überprüfen. Beispiel 20-4 zeigt Ihnen, wie Sie einen HEAD-Request ausführen. Es enthält eine Funktion zur Übergabe der HTTP-Header-Name/Wert-Paare und zum Speichern dieser Paare als Namen und Werte der Eigenschaften eines JavaScript-Objekts. Außerdem führt es eine Fehlerbehandlungsfunktion ein, die aufgerufen wird, wenn der Server 404 oder einen anderen Fehlercode zurückgibt. Beispiel 20-4: Die HTTP.getHeaders( )-Utility /** * Per HTTP HEAD-Request holen Sie sich die Header der angegebenen URL. * Eingehende Header werden mit HTTP.parseHeaders( ) geparst, und das * Rückgabeobjekt wird an die angegebene Callback-Funktion übergeben. * Schickt der Server einen Fehlercode, rufen Sie stattdessen die angegebene * errorHandler-Funktion auf. Ist kein Error-Handler angegeben, übergeben Sie null an die * Callback-Funktion. */ HTTP.getHeaders = function(url, callback, errorHandler) { var request = HTTP.newRequest( ); request.onreadystatechange = function( ) { if (request.readyState == 4) { if (request.status == 200) { callback(HTTP.parseHeaders(request)); } else { if (errorHandler) errorHandler(request.status, request.statusText); else callback(null); } } }

20.2 XMLHttpRequest-Beispiele und Utilities |

535

491-0.book Seite 536 Mittwoch, 4. April 2007 9:55 09

e-bol.net Beispiel 20-4: Die HTTP.getHeaders( )-Utility (Fortsetzung) request.open("HEAD", url); request.send(null); }; // Parse die Response-Header eines XMLHttpRequest-Objekts, und // gib die Header-Namen und -Werte als Eigenschaftsnamen und -werte // eines neuen Objekts zurück. HTTP.parseHeaders = function(request) { var headerText = request.getAllResponseHeaders( ); // Text vom Server var headers = {}; // Das ist unser Rückgabewert var ls = /^\s*/; // Regulärer Ausdruck für führende Leerzeichen var ts = /\s*$/; // Regulärer Ausdruck für Leerzeichen am Ende // Brich die Header in Zeilen auf var lines = headerText.split("\n"); // Zeilen durchlaufen for(var i = 0; i < lines.length; i++) { var line = lines[i]; if (line.length == 0) continue; // Leerzeilen überspringen // Jede Zeile am ersten Doppelpunkt trennen und Whitespace entfernen var pos = line.indexOf(':'); var name = line.substring(0, pos).replace(ls, "").replace(ts, ""); var value = line.substring(pos+1).replace(ls, "").replace(ts, ""); // Name/Wert-Paar des Headers in einem JavaScript-Objekt speichern headers[name] = value; } return headers; };

20.2.3 HTTP POST HTML-Formulare werden oft mit der HTTP POST-Methode an Webserver gesendet. Bei POST-Requests werden die Daten nicht in die URL codiert, sondern im Body des Requests an den Server übergeben. Da Request-Parameter in die URL eines GET-Requests codiert werden, ist die GET-Methode nur geeignet, wenn der Request beim Server keine Nebenwirkungen auslöst – also wenn von wiederholten GET-Requests für die gleiche URL mit den gleichen Parametern die Rückgabe der gleichen Ergebnisse erwartet werden kann. Verursacht ein Request Nebeneffekte (z.B. wenn der Server einige der Parameter in einer Datenbank speichert), sollte stattdessen ein POST-Request verwendet werden. Beispiel 20-5 zeigt, wie ein POST-Request mit Hilfe eines XMLHttpRequest-Objekts durchgeführt wird. Die HTTP.post( )-Methode verwendet die HTTP.encodeFormData( )Funktion, um die Eigenschaften eines Objekts in ein Stringformat zu konvertieren, das als Body eines POST-Requests verwendet werden kann. Der String wird dann an die XMLHttpRequest.send( )-Methode übergeben und wird zum Body des Requests. (Der von HTTP.encodeFormData( ) zurückgebene String kann auch an die GET-URL angehängt werden; verwenden Sie einfach ein Fragezeichen, um die URL von den Daten zu trennen.)

536 | Kapitel 20: HTTP skripten

491-0.book Seite 537 Mittwoch, 4. April 2007 9:55 09

e-bol.net Beispiel 20-5 verwendet außerdem die Methode HTTP._getResponse( ). Sie parst die Serverantwort abhängig von deren Typ und wird im nächsten Abschnitt implementiert. Beispiel 20-5: Die HTTP.post( )-Utility clientseitiges JavaScript

/** * Sende einen HTTP POST-Request an die angegebene URL. Verwende Namen * und Werte der Eigenschaften des values-Objekts als Body des Requests. * Parse die Serverantwort je nach Content-Type, und übergib das * Ergebnis an die Callback-Funktion. Tritt ein HTTP-Fehler auf, * so rufe die angegebene errorHandler-Funktion auf. * Ist kein Error-Handler vorhanden, übergib null an die Callback-Funktion. /** HTTP.post = function(url, values, callback, errorHandler) { var request = HTTP.newRequest( ); request.onreadystatechange = function( ) { if (request.readyState == 4) { if (request.status == 200) { callback(HTTP._getResponse(request)); } else { if (errorHandler) errorHandler(request.status, request.statusText); else callback(null); } } } request.open("POST", url); // Dieser Header informiert den Server, wie der Body des Requests // interpretiert werden soll. request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // Codiere die Eigenschaften des values-Objekts, und sende sie als // Body des Requests. request.send(HTTP.encodeFormData(values)); }; /** * Eigenschafts-Name/Wert-Paare eines Objekts so codieren, als ob sie von * einem HTML-Formular stammen, und zwar im Format application/x-www-form-urlencoded */ HTTP.encodeFormData = function(data) { var pairs = []; var regexp = /%20/g; // Ein regulärer Ausdruck für ein codiertes Leerzeichen for(var name in data) { var value = data[name].toString( ); // Erzeuge ein Name/Wert-Paar, aber codiere erst Namen und Wert, // Die globale Funktion encodeURIComponent ist fast perfekt dafür; // sie codiert Leerzeichen aber als %20 statt "+". Wir müssen das // mit String.replace( ) nachbessern

20.2 XMLHttpRequest-Beispiele und Utilities |

537

491-0.book Seite 538 Mittwoch, 4. April 2007 9:55 09

e-bol.net Beispiel 20-5: Die HTTP.post( )-Utility (Fortsetzung) var pair = encodeURIComponent(name).replace(regexp,"+") + '=' + encodeURIComponent(value).replace(regexp,"+"); pairs.push(pair); } // Alle Name/Wert-Paare mit & aneinander anhängen return pairs.join('&'); };

Beispiel 21-14 ist ein weiteres Beispiel, das mit einem XMLHttpRequest-Objekt einen POST-Request durchführt. In diesem Beispiel wird ein Webservice aufgerufen, und statt der Übergabe von Formularwerten im Body des Requests wird der Text eines XMLDokuments übergeben.

20.2.4 HTML, XML und JSON-codierte Responses Bei den meisten bisherigen Beispielen wird die Serverantwort auf einen HTTP-Request als Klartextwert behandelt. Das ist durchaus zulässig, und es ist nirgendwo vorgeschrieben, dass Webserver keine Dokumente mit einem Content-Type von »text/plain« zurückgeben dürfen. Ihr JavaScript-Code kann solche Responses mit den verschiedenen String-Methoden parsen und mit ihnen machen, was immer Sie wollen. Sie können die Serverantwort auch dann als Klartext behandeln, wenn sie einen anderen Content-Type aufweist. Wenn der Server beispielsweise ein HTML-Dokument zurückgibt, können Sie dessen Inhalt mit der Eigenschaft responseText abrufen und ihn dann zum Setzen der innerHTML-Eigenschaft eines Dokumentelements verwenden. Sie können die Serverantwort aber auch auf andere Arten verarbeiten. Wie am Anfang dieses Kapitels beschrieben, können Sie eine geparste Darstellung des XML-Dokuments über die responseXML-Eigenschaft abfragen, wenn der Server eine Response mit dem Content-Type »text/xml« sendet. Der Wert dieser Eigenschaft ist ein DOM-DocumentObjekt, das Sie mit DOM-Methoden durchsuchen und durchlaufen können. Beachten Sie jedoch, dass XML als Datenformat nicht immer die beste Lösung ist. Wenn der Server Daten zur Bearbeitung an das JavaSkript-Skript übergeben will, ist es ineffizient, diese Daten auf der Serverseite in XML-Format zu codieren, das XMLHttpRequestObjekt zu veranlassen, diese Daten in einen Baum von DOM-Knoten zu parsen und dann Ihr Script diesen Baum durchlaufen zu lassen, um die Daten wieder zu extrahieren. Es ist einfacher, den Server die Daten mit dem JavaScript-Objekt und Array als Text codieren zu lassen und den JavaScript-Quelltext an den Webbrowser zu übergeben. Dann »parst« das Skript die Antwort einfach, indem sie an die JavaScript-eval( )-Methode übergeben wird.

538 | Kapitel 20: HTTP skripten

491-0.book Seite 539 Mittwoch, 4. April 2007 9:55 09

e-bol.net Die Datencodierung als JavaScript-Objekt- und -Array-Literale wird als JSON oder JavaScript Object Notation4 bezeichnet. Hier sehen Sie XML- und JSON-Codierungen der gleichen Daten:

clientseitiges JavaScript

Wendell Berry The Unsettling of America What are People For? // JSON-codiert { "name": "Wendell Berry", "books": [ "The Unsettling of America", "What are People For?" ] }

Die HTTP.post( )-Funktion, die in Beispiel 20-5 gezeigt ist, ruft die HTTP._getResponse( )Funktion auf, die den Content-Type-Header untersucht, um das Format der Response zu bestimmen. Beispiel 20-6 ist eine einfache Implementierung von HTTP._getResponse( ), die XML-Dokumente als Document-Objekte zurückgibt, JavaScript- bzw. JSON-Dokumente mit eval( ) auswertet und sonstigen Inhalt als Klartext zurückgibt. Beispiel 20-6: HTTP._getResponse( ) HTTP._getResponse = function(request) { // Vom Server zurückgesandten Content-Type prüfen switch(request.getResponseHeader("Content-Type")) { case "text/xml": // Wenn es ein XML-Dokument ist, geparstes Document-Objekt verwenden. return request.responseXML; case case case case

"text/json": "text/javascript": "application/javascript": "application/x-javascript": // Wenn die Response JavaScript-Code oder ein JSON-codierter Wert ist, // den Text an eval( ) senden, um ihn in einen JavaScript-Wert zu parsen. // NB: Machen Sie das nur, wenn Sie dem Server trauen, von dem der JavaScript// Code kommt! return eval(request.responseText);

4 Weitere Einzelheiten zu JSON finden Sie unter http://json.org. Die Idee stammt von Douglas Crockford, und diese Website enthält Verweise auf JSON-Codierer und -Decodierer für verschiedene Programmiersprachen; sie kann zur Datencodierung nützlich sein, selbst wenn Sie JavaScript nicht verwenden.

20.2 XMLHttpRequest-Beispiele und Utilities |

539

491-0.book Seite 540 Mittwoch, 4. April 2007 9:55 09

e-bol.net Beispiel 20-6: HTTP._getResponse( ) (Fortsetzung) default: // In allen anderen Fällen: Response als Text ansehen und String zurückgeben. return request.responseText; } };

Die eval( )-Methode zum Parsen von JSON-codierten Daten, wie sie in Beispiel 20-6 gezeigt wird, sollten Sie nicht verwenden, wenn Sie sich nicht sicher sind, dass der Webserver niemals bösartigen ausführbaren JavaScript-Code statt korrekt codierten JSONDaten schickt. Eine sichere Alternative ist die Benutzung eines JSON-Decoders, der JavaScript-Objekt-Literale »von Hand« parst, ohne dabei eval( ) aufzurufen.

20.2.5 Zeitabbruch eines Requests Ein Mangel des XMLHttpRequest-Objekts ist das Fehlen eines Mechanismus, mit dem sich ein Timeout-Wert für einen Request angeben lässt. Im Fall von synchronen Requests ist das ein schwerer Mangel. Wenn sich des Server aufhängt, verbleibt der Webbrowser in der send( )-Methode, und alles friert ein. Asynchrone Requests können nicht zu einem Einfrieren führen, weil die send( )-Methode nicht blockiert und der Webbrowser damit weiter Benutzerevents verarbeiten kann. Ein Timeout-Problem haben Sie aber trotzdem. Nehmen wir mal an, Ihre Anwendung sendet einen HTTP-Request mit einem XMLHttpRequest-Objekt, wenn der Benutzer auf einen Button klickt. Um mehrfache Requests zu verhindern, empfiehlt es sich, den Button bis zum Eintreffen der Response zu deaktivieren. Was aber, wenn der Server ausfällt oder es aus irgendwelchen Gründen nicht schafft, den Request zu beantworten? Dann friert der Browser zwar nicht ein, aber Ihre Anwendung ist jetzt mit einem deaktivierten Button eingefroren. Um diese Art Problem zu verhindern, kann es nützlich sein, Ihre eigenen Timeouts mit der Window.setTimeout( )-Funktion festzulegen, wenn Sie HTTP-Requests starten. Normalerweise bekommen Sie Ihre Response, bevor Ihr Timeout-Handler ausgelöst wird; in diesem Fall verwenden Sie einfach die Window.clearTimeout( )-Funktion, um den Timeout abzubrechen. Wenn Ihr Timeout aber ausgelöst wird, bevor der XMLHttpRequest readyState 4 erreicht hat, können Sie den Request mit der XMLHttpRequest.abort( )Methode abbrechen. Danach werden Sie üblicherweise den Benutzer davon unterrichten, dass der Request fehlgeschlagen ist (beispielsweise mit Window.alert( )). Wenn Sie, wie in unserem hypothetischen Beispiel, einen Button vor dem Absenden des Requests deaktiviert haben, werden Sie ihn jetzt vermutlich reaktivieren wollen, nachdem der Timeout eingetreten ist. Beispiel 20-7 definiert eine HTTP.get( )-Funktion, die diese Timeout-Technik vorführt. Dabei handelt es sich um eine fortgeschrittene Version der HTTP.getText( )-Methode aus Beispiel 20-2, die viele der in vorhergehenden Beispielen eingeführten Features integriert, einschließlich eines Error-Handlers, Request-Parametern und der bereits beschriebenen

540 | Kapitel 20: HTTP skripten

491-0.book Seite 541 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Beispiel 20-7: Die HTTP.get( )-Utility /** * Sende einen HTTP GET-Request für die angegebene URL. Wenn eine erfolgreiche * Response eintrifft, wird sie in ein Objekt nach Maßgabe des Content-Type-Headers * konvertiert und der angegebenen Callback-Funktion übergeben. * Zusätzliche Argumente können als Eigenschaften des options-Objekts angegeben werden. * * Wenn eine Response mit Fehler eintrifft (z.B., ein 404 Not Found), * werden Statuscode und -meldung an options.errorHandler übergeben. * Wenn kein Error-Handler angegeben ist, wird die Callback* Funktion mit einem null-Argument aufgerufen. * * Wenn das options.parameters-Objekt angegeben ist, werden seine Eigenschaften * als Namen und Werte von Request-Parametern verwendet. Sie werden * mit HTTP.encodeFormData( ) in einen URL-codierten String konvertiert und * nach einem '?' an die URL angehängt. * * Wenn eine options.progressHandler-Funktion angegeben ist, wird sie * jedes Mal aufgerufen, wenn die readyState-Eigenschaft auf einen Wert kleiner * gesetzt 4 wird. Jedem Aufruf der Progress-Handler-Funktion wird eine * Zahl übergeben, die angibt, wie oft die Funktion aufgerufen worden ist. * * Wenn ein options.timeout-Wert angegeben ist, wird der XMLHttpRequest * abgebrochen, wenn er nicht vor Ablauf der angegebenen Anzahl Millisekunden * fertig geworden ist. Wenn der Timeout abläuft und ein * options.timeoutHandler angegeben ist, wird diese Funktion mit der * angeforderten URL als Argument aufgerufen. /** HTTP.get = function(url, callback, options) { var request = HTTP.newRequest( ); var n = 0; var timer; if (options.timeout) timer = setTimeout(function( ) { request.abort( ); if (options.timeoutHandler) options.timeoutHandler(url); }, options.timeout); request.onreadystatechange = function( ) { if (request.readyState == 4) { if (timer) clearTimeout(timer);

20.2 XMLHttpRequest-Beispiele und Utilities |

541

clientseitiges JavaScript

HTTP._getResponse( )-Methode. Sie ermöglicht es der aufrufenden Funktion auch, eine optionale Callback-Funktion zur Fortschrittsüberwachung anzugeben, die immer dann aufgerufen wird, wenn der onreadystatechange-Handler mit einem readyState aufgerufen wird, der nicht 4 ist. In Browsern wie Firefox, die diesen Handler mehrfach in Status 3 aufrufen, ermöglicht ein solcher Callback einem Skript die Anzeige von Download-Feedback für den Benutzer.

491-0.book Seite 542 Mittwoch, 4. April 2007 9:55 09

e-bol.net Beispiel 20-7: Die HTTP.get( )-Utility (Fortsetzung) if (request.status == 200) { callback(HTTP._getResponse(request)); } else { if (options.errorHandler) options.errorHandler(request.status, request.statusText); else callback(null); } } else if (options.progressHandler) { options.progressHandler(++n); } } var target = url; if (options.parameters) target += "?" + HTTP.encodeFormData(options.parameters) request.open("GET", target); request.send(null); };

20.3 Ajax und dynamisches Skripten Der Begriff Ajax beschreibt eine Architektur für Webanwendungen, in denen skriptkontrolliertes HTTP und das XMLHttpRequest-Objekt eine prominente Rolle spielen. (Für viele sind das XMLHttpRequest-Objekt und Ajax sogar mehr oder minder dasselbe.) Ajax ist ein (meist nicht komplett großgeschriebenes) Akronym für Asynchronous JavaScript and XML.5 Der Begriff wurde von Jesse James Garrett geprägt und erschien zum ersten Mal in seinem Essay »Ajax: A New Approach to Web Applications« im Februar 2005. Sie können dieses richtungsweisende Essay unter http://www.adaptivepath.com/publications/ essays/archives/000385.php finden (auf Englisch). Das XMLHttpRequest-Objekt, auf dem Ajax beruht, gab es in Webbrowsern von Microsoft und Netscape/Mozilla bereits ungefähr vier Jahre lang, bevor Garretts Essay veröffentlicht wurde, es hatte aber nie viel Aufmerksamkeit bekommen.6 In 2004 änderte sich 5 Die Ajax-Architektur ist überzeugend, und die Vergabe eines einfachen Namens für sie hat mitgeholfen, eine Revolution im Design von Webanwendungen auszulösen. Wie sich zeigt, klärt das Akronym aber nicht besonders gut über die an Ajax-Anwendungen beteiligten Technologien auf. Clientseitiges JavaScript verwendet überall Event-Handler und ist daher asynchron. Außerdem ist die Benutzung von XML in Ajax-Anwendungen oft zwar bequem, aber immer optional. Das definierende Merkmal von Ajax-Anwendungen ist die Tatsache, dass sie skriptgesteuertes HTTP betreiben, aber diese Charakteristik taucht in der Abkürzung gar nicht auf. 6 Ich bedaure es, XMLHttpRequest nicht in der vierten Auflage dieses Buchs dokumentiert zu haben. Diese Auflage war sehr auf Standards bezogen und XMLHttpRequest wurde ausgelassen, weil das Objekt nie von einer standardisierenden Organisation unterstützt wurde. Hätte ich die Fähigkeiten von skriptgesteuertem HTTP zu dieser Zeit erkannt, hätte ich meine eigenen Regeln gebrochen und es trotzdem mit aufgenommen.

542 | Kapitel 20: HTTP skripten

491-0.book Seite 543 Mittwoch, 4. April 2007 9:55 09

e-bol.net das, als Google seine Webmail-Anwendung Gmail vorstellte, die XMLHttpRequest verwendet. Die Kombination dieses weithin sichtbaren und professionell ausgeführten Beispiels zusammen mit Garretts Essay von Anfang 2005 ließ das Interesse an Ajax rasant wachsen.

Ein optionales Feature von Ajax-Anwendungen ist die Verwendung von XML zur Codierung des Datenaustausches zwischen Client und Server. Kapitel 21 zeigt, wie man clientseitiges JavaScript dazu verwenden kann, XML-Daten zu manipulieren, einschließlich der Ausführung von XPath-Abfragen und XSL-Transformationen von XML nach HTML. Einige Ajax-Anwendungen verwenden XSLT, um den Inhalt (XML-Daten) von der Darstellung (HTML-Formatierung, durch ein XSL-Stylesheet ausgedrückt) zu trennen. Diese Vorgehensweise hat die zusätzlichen Vorteile, dass die zwischen Server und Client zu transferierende Datenmenge reduziert wird und die Transformation vom Server auf den Client verlegt wird. Man kann Ajax in einen RPC-Mechanismus formalisieren.7 In dieser Formel verwenden Webentwickler Ajax-Bibliotheken im Hintergrund sowohl auf Client- als auch Serverseite, um Kommunikation zwischen Client und Server auf höherer Ebene zu ermöglichen. Dieses Kapitel beschreibt keine solchen RPC-over-Ajax-Bibliotheken und konzentriert sich stattdessen auf die darunterliegende Technologie, die Ajax funktionsfähig macht. Ajax ist eine junge Anwendungsarchitektur, und Garretts Essay, das sie beschreibt, endet mit einem Aufruf zur Tat, den es sich hier wiederzugeben lohnt: Die größten Herausforderungen in der Erstellung von Ajax-Anwendungen sind nicht technischer Natur. Die Kerntechnologien für Ajax sind ausgereift, stabil und werden gut verstanden. Die Herausforderungen richten sich stattdessen an die Designer dieser Anwendungen: Vergessen wir, was wir glauben, über die Beschränkungen des Webs zu wissen, und stellen wir uns eine breitere und reichere Palette an Möglichkeiten vor. Das wird noch spaßig.

7 RPC steht für Remote Procedure Call und beschreibt eine Strategie, die im Distributed Computing zur Vereinfachung der Client/Server-Kommunikation angewandt wird.

20.3 Ajax und dynamisches Skripten |

543

clientseitiges JavaScript

Das zentrale Feature einer Ajax-Anwendung ist, dass sie skriptgesteuertes HTTP verwendet, um mit einem Webserver ohne Neuladen von Seiten zu kommunizieren. Da die ausgetauschte Datenmenge oft gering ist und weil der Browser kein Dokument (und die damit verbundenen Stylesheets und Skripten) parsen und darstellen muss, ist die Ansprechzeit erheblich kürzer. Das Ergebnis sind Webanwendungen, die sich mehr wie traditionelle Desktopanwendungen verhalten.

491-0.book Seite 544 Mittwoch, 4. April 2007 9:55 09

e-bol.net

20.3.1 Ajax-Beispiel Die XMLHttpRequest-Beispiele, die wir bisher in diesem Kapitel gesehen haben, waren Utility-Funktionen, die demonstrieren, wie man das XMLHttpRequest-Objekt verwendet. Sie haben nicht gezeigt, warum Sie das Objekt vielleicht verwenden möchten, oder erläutert, was Sie mit ihm erreichen können. Wie das Zitat vom Garrett zeigt, eröffnet die Ajax-Architektur viele Möglichkeiten – und wir stehen erst am Anfang, sie zu ergründen. Das nächste Beispiel ist ein einfaches, aber es fängt etwas vom Geschmack und der Bequemlichkeit der Ajax-Architektur ein. Beispiel 20-8 ist ein unauffälliges Skript, das Event-Handler auf Links im Dokument registriert, sodass sie Tooltips anzeigen, wenn der Benutzer mit der Maus über sie fährt. Für Links, die zum selben Server zurückführen, von dem das Dokument geladen wurde, verwendet das Skript XMLHttpRequest, um einen HTTP HEAD-Request zu starten. Aus den zurückgegebenen Headern extrahiert es den Content-Type, die Größe und den Änderungszeitpunkt des gelinkten Dokuments und zeigt diese Informationen im Tooltip an (siehe Abbildung 20-1). Der Tooltip stellt daher eine Art Vorschau auf das Linkziel dar und kann einem Benutzer helfen zu entscheiden, ob er klicken soll oder nicht.

Abbildung 20-1: Ein Ajax-Tooltip

Der Code stützt sich auf die Tooltip-Klasse, die in Beispiel 16-4 entwickelt wurde, braucht aber die Erweiterung dieser Klasse aus Beispiel 17-3 nicht. Zusätzlich benutzt er das Geometry-Modul aus Beispiel 14-2 und die Utility-Funktion HTTP.getHeaders( ), die wir in Beispiel 20-4 entwickelt haben. Der Code enthält mehrere Ebenen an Asynchronität, und zwar in der Form eines onload-Event-Handlers, eines onmouseover-Event-Handlers, eines Timers und einer Callback-Funktion für das XMLHttpRequest-Objekt. Dadurch entstehen tief verschachtelte Funktionen.

544 | Kapitel 20: HTTP skripten

491-0.book Seite 545 Mittwoch, 4. April 2007 9:55 09

e-bol.net Beispiel 20-8: Ajax-Tooltips

// Beim Laden des Dokuments die init( )-Funktion aufrufen lassen if (window.addEventListener) window.addEventListener("load", init, false); else if (window.attachEvent) window.attachEvent("onload", init); // Nach dem Laden des Dokuments aufzurufen function init( ) { var links = document.getElementsByTagName('a'); // Durchlaufe alle Links, und füge ihnen Event-Handler hinzu for(var i = 0; i < links.length; i++) if (links[i].href) addTooltipToLink(links[i]); } // Diese Funktion fügt die Event-Handler hinzu function addTooltipToLink(link) { // Event-Handler hinzufügen if (link.addEventListener) { // standardisiertes Verfahren link.addEventListener("mouseover", mouseover, false); link.addEventListener("mouseout", mouseout, false); } else if (link.attachEvent) { // IE-spezifisches Verfahren link.attachEvent("onmouseover", mouseover); link.attachEvent("onmouseout", mouseout); } var timer; // Wird mit setTimeout/clearTimeout verwendet function mouseover(event) { var e = event || window.event; // Mausposition holen, zu Dokumentkoordinaten konvertieren, Offset addieren var x = e.clientX + Geometry.getHorizontalScroll( ) + 25; var y = e.clientY + Geometry.getVerticalScroll( ) + 15; // Falls ein Tooltip ansteht, abbrechen if (timer) window.clearTimeout(timer);

20.3 Ajax und dynamisches Skripten |

545

clientseitiges JavaScript

/** * linkdetails.js * * Dieses unauffällige JavaScript-Modul gibt Links in einem Dokument Event-Handler, * sodass sie Tooltips anzeigen, wenn die Maus länger als eine halbe Sekunde lang * über ihnen verweilt. Wenn der Link auf ein Dokument auf dem gleichen Server zeigt, auf dem * auch das Quelldokument liegt, enthält der Tooltip Informationen über den Typ, die Größe * und das Datum des Dokuments, die über einen XMLHttpRequest-HEAD-Request beschafft werden. * * Dieses Modul braucht die Module Tooltip.js, HTTP.js und Geometry.js */ (function( ) { // Anonyme Funktion, die alle unsere Symbole speichert // Erzeuge das von uns zu verwendende Tooltip-Objekt var tooltip = new Tooltip( );

491-0.book Seite 546 Mittwoch, 4. April 2007 9:55 09

e-bol.net Beispiel 20-8: Ajax-Tooltips (Fortsetzung) // Einen Tooltip in einer halben Sekunde einplanen timer = window.setTimeout(showTooltip, 500); function showTooltip( ) { // Wenn es ein HTTP-Link ist und er vom gleichen Host kommt // wie dieses Skript, können wir XMLHttpRequest verwenden, // um mehr über ihn zu erfahren. if (link.protocol == "http:" && link.host == location.host) { // Starte einen XMLHttpRequest für die Link-Header HTTP.getHeaders(link.href, function(headers) { // Mit den Headern bauen wir einen Textstring var tip = "URL: " + link.href + "" + "Typ: " + headers["Content-Type"] + "" + "Größe: " + headers["Content-Length"] + "" + "Date: " + headers["Last-Modified"]; // und zeigen ihn als Tooltip an tooltip.show(tip, x, y); }); } else { // Wenn es sich um einen Link auf eine andere Site handelt, // ist der Tooltip einfach die URL des Links tooltip.show("URL: " + link.href, x, y); } } } function mouseout(e) { // Wenn die Maus den Link verlässt, werden alle // anstehenden Tooltips gelöscht oder versteckt, falls sie angezeigt werden if (timer) window.clearTimeout(timer); timer = null; tooltip.hide( ); } } })( );

20.3.2 Einseiten-Anwendungen Eine Einseiten-Anwendung ist genau das, was der Name schon sagt: eine über JavaScript erstellte Webanwendung, für die nur eine Seite geladen werden muss. Manche EinseitenAnwendungen brauchen nach dem Laden nie mehr mit dem Server zu reden. Ein Beispiel dafür sind DHTML-Spiele, bei denen die Kommunikation mit dem Benutzer einfach zu skriptgesteuerten Änderungen am geladenen Dokument führt. Das XMLHttpRequest-Objekt und die Ajax-Architektur eröffnen jedoch viele Möglichkeiten. Webanwendungen können diese Verfahren benutzen, um Daten mit dem Server auszutauschen, und trotzdem Einseiten-Anwendungen sein. Solche Webanwendungen

546 | Kapitel 20: HTTP skripten

491-0.book Seite 547 Mittwoch, 4. April 2007 9:55 09

e-bol.net

20.3.3 Remote Scripting Der Begriff Remote Scripting entstand vier Jahre vor dem Begriff Ajax und ist einfach ein nicht so modischer Name für die gleiche Grundidee: die Verwendung von skriptgesteuertem HTTP für eine engere Integration (und verbesserte Ansprechzeit) zwischen Client und Server. Ein weithin bekannter Artikel von Apple aus dem Jahr 2002 beschreibt beispielsweise, wie man ein -Tag verwendet, um skriptgesteuerte HTTP-Requests an einen Webserver zu senden (siehe http://developer.apple.com/internet/webcontent/iframe.html). Im Artikel wird auf Folgendes hingewiesen: Wenn der Webserver eine HTML-Datei zurücksendet, die -Tags enthält, wird der in diesen Tags enthaltene JavaScript-Code vom Browser ausgeführt und kann Methoden aufrufen, die in dem Fenster definiert sind, das das enthält. Auf diese Weise kann der Server direkte Befehle in Form von JavaScript-Statements an seinen Client senden.

20.3.4 Vorsicht bei Ajax Wie jede Architektur hat Ajax seine Fallen. In diesem Abschnitt werden drei Situationen bei der Erstellung von Ajax-Anwendungen beschrieben, in denen Sie aufpassen müssen. Die erste Falle ist die des sichtbaren Feedbacks. Wenn ein Benutzer auf einen herkömmlichen Hyperlink klickt, gibt der Webbrowser Feedback und zeigt damit an, dass der Inhalt des Links gerade geholt wird. Das Feedback erscheint, bevor der Inhalt fertig zur Anzeige ist, wodurch der Benutzer sieht, dass der Browser sich mit der Anfrage beschäftigt. Wenn ein HTTP-Request aber über XMLHttpRequest gesendet wird, gibt der Browser kein Feedback. Selbst bei Breitbandverbindungen verursachen Netzwerklaufzeiten oft merkbare Verzögerungen zwischen dem Senden eines HTTP-Requests und dem Erhalt einer Antwort. Deshalb ist es für Ajax-basierte Anwendungen nützlich, wenn während des Wartens auf eine Anwort auf den XMLHttpRequest optisches Feedback vorhanden ist (wie z.B. eine einfache DHTML-Animation: siehe Kapitel 16). Beachten Sie, dass Beispiel 20-8 diesem Rat hinsichtlich optischem Feedback nicht folgt. Das liegt daran, dass der Benutzer in diesem Beispiel den HTTP-Request nicht aus eigenem Antrieb auslöst. Stattdessen wird die Anfrage initiiert, wenn der Benutzer die Maus (passiv) über einen Link hält. Der Benutzer verlangt nichts ausdrücklich von der Anwendung und erwartet folglich kein Feedback.

20.3 Ajax und dynamisches Skripten |

547

clientseitiges JavaScript

können einen kurzen JavaScript-Bootstrapping-Code und einen einfachen HTMLSplash-Screen enthalten, der angezeigt wird, während die Anwendung hochgefahren wird. Während der Splash-Screen gezeigt wird, kann der Bootstrap-Code beispielsweise ein XMLHttpRequest-Objekt verwenden, um den eigentlichen JavaScript-Code für die Anwendung herunterzuladen, der dann mit der Methode eval( ) ausgeführt wird. Dann übernimmt der JavaScript-Code, lädt Daten mit XMLHttpRequest, wenn sie benötigt werden, und verwendet DOM, um diese Daten als DHTML für den Benutzer anzuzeigen.

491-0.book Seite 548 Mittwoch, 4. April 2007 9:55 09

e-bol.net Die zweite Falle hat mit den URLs zu tun. Herkömmlich gehen Webanwendungen von einem in den nächsten Zustand über, indem neue Seiten geladen werden, wobei jede Seite eine eindeutige URL hat. Bei Ajax-Anwendungen ist das anders: Wenn eine AjaxAnwendung skriptgesteuertes HTTP verwendet, um neuen Inhalt herunterzuladen und anzuzeigen, ändert sich die URL in der Navigationsleiste nicht. Wenn Benutzer versuchen, ein Lesezeichen für einen bestimmten Zustand zu setzen, werden sie feststellen, dass das über die Lesezeichenoption des Browsers nicht geht. Sie können nicht einmal eine URL aus der Navigationsleiste des Browsers ausschneiden, um sie anderswo einzufügen. Dieses Problem und seine Lösung werden von Google Maps (http://local.google.com) ausgezeichnet vorgeführt. Beim Zoomen und Scrollen der Karte werden sehr viele Daten zwischen Client und Server hin- und hergeschoben, aber die im Browser angezeigte URL ändert sich überhaupt nicht. Google löst das Problem der Lesezeichen, indem es einen »link to this page«-Link in jede Seite einfügt. Beim Anklicken dieses Links wird eine URL für die momentan angezeigte Karte erzeugt und die Karte mit Hilfe dieser URL neu geladen. Nach diesem erneuten Laden kann der momentane Status der Karte als Lesezeichen gespeichert oder der Link per E-Mail an Freunde gesendet werden usw. Was lernen AjaxAnwendungsentwickler daraus? Dass es weiterhin wichtig ist, den Anwendungsstatus in eine URL einzubauen und dem Benutzer die Möglichkeit zu geben, diese URLs zu nutzen. Eine dritte Falle, die bei Diskussionen über Ajax oft auftaucht, hängt mit der Schaltfläche Zurück zusammen. Da dem Browser die Kontrolle über HTTP genommen wird, übergehen Skripte, die XMLHttpRequest verwenden, den History-Mechanismus des Browsers. Benutzer sind daran gewöhnt, sich mit den Schaltflächen Zurück und Vorwärts durchs Netz zu bewegen. Wenn eine Ajax-Anwendung skriptgesteuertes HTTP verwendet, um umfassende neue Inhalte anzuzeigen, versuchen Benutzer eventuell, sich innerhalb der Anwendung mit diesen Schaltflächen zu bewegen. Dabei stellen sie frustriert fest, dass die Schaltfläche Zurück sie nicht auf die gerade vorher angezeigte Seite führt, sondern ganz nach vorne auf die vor der Anwendung angezeigte Seite. Es gab Versuche, das Problem mit Zurück dadurch zu lösen, dass der Browser dazu gebracht wird, URLs in seine History einzufügen. Diese Vorgehensweisen bleiben allerdings meistens in browserabhängigem Code stecken und sind nicht wirklich zufriedenstellend. Und selbst wenn sie irgendwann funktionieren, untergraben sie das AjaxDenkmuster und ermutigen Benutzer, über das erneute Laden von Seiten anstatt über skriptgesteuertes HTTP zu navigieren. Meiner Ansicht nach ist das Zurück-Problem nicht so schwerwiegend, wie das oft dargestellt wird, und kann mit gut durchdachtem Webdesign weitgehend umgangen werden. Anwendungselemente, die wie Hyperlinks aussehen, sollten sich auch so verhalten und Seiten tatsächlich neu laden. Dadurch werden sie in die Browser-History aufgenommen, wie es vom Benutzer erwartet wird. Umgekehrt sollten Anwendungselemente, die skript-

548 | Kapitel 20: HTTP skripten

491-0.book Seite 549 Mittwoch, 4. April 2007 9:55 09

e-bol.net

In Ajax-Anwendungen sollten Sie darauf achten, Wörter wie »Vorwärts« und »Zurück« in den anwendungsinternen Navigationselementen zu vermeiden. Wenn eine Anwendung eine Schnittstelle im Wizard-Stil z.B. mit den Schaltflächen Weiter und Zurück verwendet, sollte sie zur Anzeige der nächsten oder vorherigen Bildschirmflächen tatsächlich Seiten traditionell laden (anstatt XMLHttpRequest zu verwenden). In dieser Situation erwartet der Benutzer, dass die Schaltfläche Zurück des Browsers genauso funktioniert wie die Schaltfläche Zurück der Anwendung. Allgemeiner gesagt, sollte das Zurück des Browsers nicht mit dem Rückgängig-Feature der Anwendung verwechselt werden. Ajax-Anwendungen können ihre eigenen Undo/redo-Optionen implementieren, wenn das für die Benutzer nützlich ist. Allerdings sollte klar sein, dass sie sich von den Schaltflächen Zurück und Nächste unterscheiden.

20.4 Skriptgesteuertes HTTP mit -Tags In Internet Explorer 5 und 6 ist das XMLHttpRequest-Objekt ein ActiveX-Objekt. Manchmal deaktivieren Benutzer aus Sicherheitsgründen alle ActiveX-Skripten in Internet Explorer, wodurch Skripten kein XMLHttpRequest-Objekt erzeugen können. Falls notwendig, können einfache HTTP GET-Requests mit den Tags und ausgeführt werden. Dadurch können zwar nicht alle Funktionalitäten von XMLHttpRequest neu implementiert werden,8 aber Sie können zumindest eine Version der HTTP.getText( )-Utility-Funktion erzeugen, die ohne ein ActiveX-Skript funktioniert. Ein HTTP-Request kann recht einfach über das Setzen der Eigenschaft src eines - oder -Tags erzeugt werden. Die gewünschten Daten aus diesen Elementen zu extrahieren, ohne dass die Daten dabei vom Browser geändert werden, ist aufwändiger. Ein -Tag erwartet, dass es in ein HTML-Dokument geladen wird. Wenn Sie versuchen, den Inhalt einer Klartextdatei in ein iframe herunterzuladen, stellen Sie fest, dass Ihr Text in HTML konvertiert wird. Außerdem implementieren manche Internet Explorer-Versionen den onload- oder onreadystatechange-Handler für das -Tag nicht richtig, was die Sache weiter kompliziert. Der hier gewählte Weg verwendet ein -Tag und ein Skript auf der Serverseite. Sie teilen dem Skript auf der Serverseite die URL mit, deren Inhalt Sie aufrufen wollen, und an welche Funktion auf der Clientseite der Inhalt übergeben werden soll. Das Skript auf der 8 Um XMLHttpRequest komplett zu ersetzen, brauchen Sie wahrscheinlich ein Java-Applet.

20.4 Skriptgesteuertes HTTP mit -Tags |

549

clientseitiges JavaScript

gesteuertes HTTP ausführen und nicht in die Browser-History aufgenommen werden, nicht wie Hyperlinks aussehen. Schauen wir uns noch einmal die Kartenanwendung von Google an. Wenn der Benutzer zum Scrollen einer Karte mit der Maus klickt und sie zieht, erwartet er nicht, dass die Zurück-Schaltfläche sein Scrollen zunichte macht. Schließlich macht die Zurück-Schaltfläche das Scrollen in einer Webseite über die Bildlaufleiste des Browsers auch nicht zunichte.

491-0.book Seite 550 Mittwoch, 4. April 2007 9:55 09

e-bol.net Serverseite holt den Inhalt der gewünschten URL, codiert ihn als (möglicherweise sehr langen) JavaScript-String und gibt ein Skript auf der Clientseite zurück, das diesen String an die von Ihnen angegebene Funktion übergibt. Da dieses Skript auf der Clientseite in ein -Tag geladen wird, wird der URL-Inhalt automatisch als JavaScript interpretiert, wenn der Download abgeschlossen ist, und die Funktion dadurch aufgerufen. Beispiel 20-9 implementiert ein passendes serverseitiges Skript in der Skriptsprache PHP. Beispiel 20-9: jsquoter.php [email protected] [email protected] [email protected]

560 | Kapitel 21: JavaScript und XML

491-0.book Seite 561 Mittwoch, 4. April 2007 9:55 09

e-bol.net Das unten aufgeführte HTML-Fragment zeigt, wie die makeTable( )-Funktion mit diesen XML-Daten verwendet werden kann. Beachen Sie, dass sich das Schema-Objekt auf Tagund Attributnamen aus dieser Beispiel-Datendatei bezieht:

var xmldoc = XML.load("adressen.xml"); makeTable(xmldoc, schema, "adressen");

clientseitiges JavaScript

// Diese Funktion verwendet makeTable( ) function displayAddressBook( ) { var schema = { rowtag: "Kontakt", columns: [ { tagname: "@name", label: "Name" }, { tagname: "email", label: "Adresse" } ] }; // Lies die XML-Daten // Konvertiere in eine HTML-Tabelle

} Adressbuch anzeigen

Die Implementierung von makeTable( ) zeigt Beispiel 21-7. Beispiel 21-7: Eine HTML-Tabelle aus XML-Daten erstellen /** * Extrahiere Daten aus dem angegebenen XML-Dokument, und formatiere sie als HTML-Tabelle. * Füge die Tabelle an das angegebene HTML-Element an. (Wenn das Element ein String ist, * wird es als Element-ID genommen und das angegebene Element wird herausgesucht.) * * Das schema-Argument ist ein JavaScript-Objekt und gibt an, welche Daten * extrahiert und wie sie angezeigt werden sollen. Das schema-Objekt muss eine Eigenschaft * mit dem Namen "rowtag" haben, die den Tagnamen des XML-Elements angibt, das * die Daten für eine Tabellenreihe enthält. Das schema-Objekt muss außerdem eine Eigenschaft * mit dem Namen "columns" haben, die auf ein Array verweist. Die Elemente dieses Arrays * geben die Reihenfolge und den Inhalt der Tabellenspalten an. Jedes * Array-Element kann ein String oder ein JavaScript-Objekt sein. Ist ein Element ein * String, so wird dieser String als Tag-Name des XML-Elements verwendet, das die * Tabellendaten und Überschrift für die Spalte enthält. * Wenn ein Element des columns[]-Arrays ein Objekt ist, muss es eine Eigenschaft * mit dem Namen "tagname" und eine mit dem Namen "label" haben. Die tagname-Eigenschaft * wird verwendet, um Daten aus dem XML-Dokument zu extrahieren, und die label-Eigenschaft * wird als Text für die Spaltenüberschrift verwendet. Beginnt der Tagname mit einem * @-Zeichen, so ist er kein Nachfahre der Reihe, sondern ein Attribut des Reihenelements. */ function makeTable(xmldoc, schema, element) { // Erzeuge das

-Elemente in einem

Name	E-Mail-Adresse

-Tags sind im Dokument? var n = document.evaluate("count(//p)", document, null, XPathResult.NUMBER_TYPE, null).numberValue; // Was ist der Text im zweiten Absatz? var text = document.evaluate("//p[2]/text( )", document, null, XPathResult.STRING_TYPE, null).stringValue;

Bei diesen einfachen Beispielen müssen Sie auf zwei Dinge achten. Erstens verwenden sie die document.evaluate( )-Methode, um einen XPath-Ausdruck direkt auszuwerten, ohne ihn zuerst zu kompilieren. Im Gegensatz dazu verwendet der Code in Beispiel 21-10 die document.createExpression( )-Methode, um einen XPath-Ausdruck in ein wiederverwendbares Format zu kompilieren. Zweitens benutzen diese Beispiele HTML-

-Tags im document-Objekt. Unter Firefox können XPath-Abfragen für HTML- und XML-Dokumente verwendet werden. Unter Document, XPathExpression und XPathResult im Teil IV werden alle Einzelheiten der W3C XPath API beschrieben.

21.5 Serialisierung von XML Manchmal ist es sinnvoll, ein XML-Dokument (oder ein Unterelement des Dokuments) durch Konvertierung in einen String zu serialisieren – zum Beispiel, um ein XML-Dokument als Body eines HTTP POST-Requests zu senden, der mit dem XMLHttpRequestObjekt erzeugt wurde. Ein XML-Dokument und XML-Elemente werden auch oft serialisiert, um Nachrichten zu debuggen! In Mozilla-basierten Browsern wird die Serialisierung mit dem XMLSerializer-Objekt durchgeführt. Unter IE ist es noch einfacher: Die xml-Eigenschaft eines XML-Documentoder -Element-Objekts gibt das serialisierte Format des Dokuments oder Elements aus. Beispiel 21-11 zeigt Code zur Serialisierung unter Mozilla und IE. Beispiel 21-11: Serialisierung von XML /** * Serialisiere ein XML-Document oder -Element, und gib es als String zurück. */ XML.serialize = function(node) { if (typeof XMLSerializer != "undefined") return (new XMLSerializer( )).serializeToString(node);

21.5 Serialisierung von XML |

571

491-0.book Seite 572 Mittwoch, 4. April 2007 9:55 09

e-bol.net Beispiel 21-11: Serialisierung von XML (Fortsetzung) else if (node.xml) return node.xml; else throw "XML.serialize wird nicht unterstützt oder kann " + node + " nicht serialisieren"; };

21.6 HTML-Templates mit XML-Daten erweitern Ein Hauptfeature der XML-Dateninseln von IE ist die Möglichkeit, dass sie mit einer automatischen Template-Einrichtung verwendet werden können, in der Daten aus einer Dateninsel automatisch in HTML-Elemente eingefügt werden. Diese HTML-Templates werden unter IE definiert, indem die Attribute datasrc und datafld (»fld« kurz für »field«) zu den Elementen hinzugefügt werden. In diesem Abschnitt werden die weiter oben im Kapitel vorgestellten Techniken angewandt. XPath und DOM werden verwendet, um eine verbesserte Template-Einrichtung zu erstellen, die unter IE und Firefox funktioniert. Ein Template ist ein beliebiges HTMLElement mit einem datasource-Attribut. Der Wert dieses Attributs sollte die ID einer XML-Dateninsel oder die URL eines externen XML-Dokuments sein. Das Template-Element sollte außerdem ein foreach-Attribut haben. Der Wert dieses Attributs ist ein XPath-Ausdruck, dessen Auswertung die Knotenliste ergibt, aus der die XML-Daten extrahiert werden. Für jeden XML-Knoten, der von dem foreach-Ausdruck zurückgegeben wird, wird eine erweiterte Kopie des Templates in das HTML-Dokument eingefügt. Das Template wird erweitert, indem alle Elemente in ihm gefunden werden, die ein dataAttribut haben. Dieses Attribut ist ein weiterer XPath-Ausdruck, der im Kontext eines von dem foreach-Ausdruck zurückgegeben Knotens ausgewertet werden soll. Dieser data-Ausdruck wird mit XML.getNode( ) ausgewertet. Der im zurückgegebenen Knoten enthaltene Text wird als Inhalt des HTML-Elements verwendet, für das das data-Attribut definiert wurde. Diese Beschreibung wird durch ein praktisches Beispiel viel verständlicher. Beispiel 21-12 ist ein einfaches HTML-Dokument, das eine XML-Dateninsel enthält, sowie ein Template, das die Dateninsel verwendet. Es hat einen onload( )-Event-Handler, der das Template erweitert. Beispiel 21-12: Eine XML-Dateninsel und HTML-Template

572 | Kapitel 21: JavaScript und XML

491-0.book Seite 573 Mittwoch, 4. April 2007 9:55 09

e-bol.net Beispiel 21-12: Eine XML-Dateninsel und HTML-Template (Fortsetzung)

clientseitiges JavaScript

[email protected] [email protected] [email protected]

Name	Adresse

');

}

674 | Referenz für den Sprachkern von JavaScript

491-0.book Seite 675 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Date.getDate( ) // ... hier kommt der Rest des HTML-Dokuments hin ... // Hier verwenden wir Date-Objekte zur Zeitmessung // Wir teilen durch 1000, um aus Millisekunden Sekunden zu machen now = new Date( ); document.write('

Es dauerte ' + (now.getTime( )-today.getTime( ))/1000 + 'Sekunden, diese Seite zu laden.');

Siehe auch

Date.getDate( )

ECMAScript v1

Gibt das Monatstag-Feld eines Date-Objekts zurück

Überblick date.getDate( )

Rückgabewert Der Tag des Monats, wie er von dem angegebenen Date-Objekt date spezifiziert wird, in Ortszeit. Die Rückgabewerte liegen zwischen 1 und 31.

Date.getDay( )

ECMAScript v1

Gibt das Wochentagsfeld eines Date-Objekts zurück

Überblick date.getDay( )

Rückgabewert Der Wochentag des angegebenen Date-Objekts date in Ortszeit. Die Rückgabewerte liegen zwischen 0 (Sonntag) und 6 (Samstag).

Date.getFullYear( )

ECMAScript v1

Gibt des Jahresfeld eines Date-Objekts zurück

Überblick date.getFullYear( )

Referenz für den Sprachkern von JavaScript |

675

Referenz für den JavaScriptSprachkern

Date.parse( ), Date.UTC( )

491-0.book Seite 676 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Date.getHours( )

Rückgabewert Das Jahr, das sich ergibt, wenn date in Ortszeit ausgedrückt wird. Der Rückgabewert ist eine Jahresangabe mit vier Ziffern, die das Jahrhundert einschließt, und keine Abkürzung mit zwei Ziffern.

Date.getHours( )

ECMAScript v1

Gibt das Stundenfeld zurück

Überblick date.getHours( )

Rückgabewert Das Stundenfeld des angegebenen Date-Objekts date in Ortszeit. Die Rückgabewerte liegen zwischen 0 (Mitternacht) und 23 (elf Uhr nachts).

Date.getMilliseconds( )

ECMAScript v1

Gibt das Millisekundenfeld zurück

Überblick date.getMilliseconds( )

Rückgabewert Das Millisekundenfeld eines date in Ortszeit.

Date.getMinutes( )

ECMAScript v1

Gibt das Minutenfeld zurück

Überblick date.getMinutes( )

Rückgabewert Das Minutenfeld des angegebenen Date-Objekts date in Ortszeit. Die Rückgabewerte liegen zwischen 0 und 59.

Date.getMonth( ) Gibt das Monatsfeld zurück

Überblick date.getMonth( )

676 | Referenz für den Sprachkern von JavaScript

ECMAScript v1

491-0.book Seite 677 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Date.getSeconds( )

Rückgabewert Das Monatsfeld des angegebenen Date-Objekts date in Ortszeit. Die Rückgabewerte liegen zwischen 0 (Januar) und 11 (Dezember).

Date.getSeconds( )

ECMAScript v1

Gibt das Sekundenfeld zurück

Überblick date.getSeconds( )

Date.getTime( )

ECMAScript v1

Gibt ein Date in Millisekunden zurück

Überblick date.getTime( )

Rückgabewert Die Millisekundendarstellung des angegebenen Date-Objekts date, d.h. die Anzahl der Millisekunden zwischen Mitternacht des 1.1.1970 (GMT) und dem durch date angegebenen Datums- und Uhrzeitwert.

Beschreibung getTime( ) konvertiert ein Datum und eine Uhrzeit in einen einzigen Integer. Das ist nützlich, wenn Sie zwei Date-Objekte vergleichen oder den Zeitraum zwischen zwei Zeitpunkten herausfinden möchten. Beachten Sie, dass die Millisekundendarstellung eines Datums zeitzonenunabhängig ist und dass daher auch keine Schwestermethode getUTCTime( ) existiert. Verwechseln Sie diese Methode bitte nicht mit den Methoden getDay( ) und getDate( ), die den Wochentag und den Tag des Monats zurückgeben.

Mit Date.parse( ) und Date.UTC( ) können Sie eine Datums- und Uhrzeitangabe in ihre Millisekundendarstellung konvertieren, ohne dafür extra ein Date-Objekt erzeugen zu müssen.

Siehe auch Date, Date.parse( ), Date.setTime( ), Date.UTC( )

Referenz für den Sprachkern von JavaScript |

677

Referenz für den JavaScriptSprachkern

Rückgabewert Das Sekundenfeld des angegebenen Date-Objekts date in Ortszeit. Die Rückgabewerte liegen zwischen 0 und 59.

491-0.book Seite 678 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Date.getTimezoneOffset( )

Date.getTimezoneOffset( )

ECMAScript v1

Ermittelt die Zeitdifferenz gegenüber GMT

Überblick date.getTimezoneOffset( )

Rückgabewert Die Differenz zwischen Greenwich Mean Time (GMT) und Ortszeit in Minuten.

Beschreibung getTimezoneOffset( ) gibt zurück, wie viele Minuten zwischen der GMT- oder UTC-Zeit und

der Ortszeit liegen. Letztlich verrät Ihnen diese Funktion, in welcher Zeitzone der JavaScriptCode läuft und ob dort am angegebenen date Sommerzeit oder Winterzeit gilt. Der Rückgabewert wird nicht in Stunden, sondern in Minuten bemessen, da manche Länder Zeitzonen haben, die sich nicht nach vollen Stundenintervallen richten.

Date.getUTCDate( )

ECMAScript v1

Gibt das Monatstag-Feld eines Date-Objekts zurück (Universalzeit)

Überblick date.getUTCDate( )

Rückgabewert Der Tag des Monats (ein Wert zwischen 1 und 31), der sich ergibt, wenn date in Universalzeit ausgedrückt wird.

Date.getUTCDay( )

ECMAScript v1

Gibt das Wochentagsfeld eines Date-Objekts zurück (Universalzeit)

Überblick date.getUTCDay( )

Rückgabewert Der Wochentag, der sich ergibt, wenn date in Universalzeit ausgedrückt wird. Die Rückgabewerte liegen zwischen 0 (Sonntag) und 6 (Samstag).

678 | Referenz für den Sprachkern von JavaScript

491-0.book Seite 679 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Date.getUTCFullYear( )

Date.getUTCFullYear( )

ECMAScript v1

Gibt das Jahresfeld eines Date-Objekts zurück (Universalzeit)

Überblick date.getUTCFullYear( )

Rückgabewert Das Jahr, das sich ergibt, wenn date in Universalzeit ausgedrückt wird. Der Rückgabewert ist ein Jahr mit vier Ziffern und keine zweistellige Abkürzung.

ECMAScript v1

Gibt das Stundenfeld zurück (Universalzeit)

Überblick date.getUTCHours( )

Rückgabewert Das Stundenfeld von date in Universalzeit. Der Rückgabewert ist ein Integer zwischen 0 (Mitternacht) und 23 (elf Uhr nachts).

Date.getUTCMilliseconds( )

ECMAScript v1

Gibt das Millisekundenfeld zurück (Universalzeit)

Überblick date.getUTCMilliseconds( )

Rückgabewert Das Millisekundenfeld von date in Universalzeit.

Date.getUTCMinutes( )

ECMAScript v1

Gibt das Minutenfeld zurück (Universalzeit)

Überblick date.getUTCMinutes( )

Rückgabewert Das Minutenfeld von date in Universalzeit. Der Rückgabewert ist ein Integer zwischen 0 und 59.

Referenz für den Sprachkern von JavaScript |

679

Referenz für den JavaScriptSprachkern

Date.getUTCHours( )

491-0.book Seite 680 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Date.getUTCMonth( )

Date.getUTCMonth( )

ECMAScript v1

Gibt das Monat-des-Jahrs-Feld eines Date-Objekts zurück (Universalzeit)

Überblick date.getUTCMonth( )

Rückgabewert Der Monat des Jahres, der sich ergibt, wenn date in Universalzeit ausgedrückt wird. Der Rückgabewert ist ein Integer zwischen 0 (Januar) und 11 (Dezember). Beachten Sie, dass das DateObjekt den ersten Tag des Monats zwar als 1, aber den ersten Monat des Jahres als 0 darstellt.

Date.getUTCSeconds( )

ECMAScript v1

Gibt das Sekundenfeld zurück (Universalzeit)

Überblick date.getUTCSeconds( )

Rückgabewert Das Sekundenfeld von date in Universalzeit. Der Rückgabewert ist ein Integer zwischen 0 und 59.

Date.getYear( )

ECMAScript v1; veraltet seit ECMAScript v3

Gibt das Jahresfeld zurück

Überblick date.getYear( )

Rückgabewert Das Jahresfeld des angegebenen Date-Objekts date minus 1900.

Beschreibung getYear( ) gibt das Jahresfeld eines angegebenen Date-Objekts minus 1900 zurück. Seit ECMAScript v3 ist es für standardkonforme JavaScript-Implementierungen nicht mehr erforderlich. Verwenden Sie stattdessen getFullYear( ).

Date.parse( ) Parst einen Datums/Uhrzeit-String

Überblick Date.parse(date)

680 | Referenz für den Sprachkern von JavaScript

ECMAScript v1

491-0.book Seite 681 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Date.setDate( )

Argumente date

Ein String, der den zu parsenden Datums- und Uhrzeitwert enthält. Rückgabewert Die Anzahl Millisekunden zwischen dem angegebenen Zeitpunkt und Mitternacht des 1. Januar 1970 GMT.

Beschreibung

nimmt ein einziges String-Argument entgegen. Die Methode parst das darin enthaltene Datum und gibt es im Millisekundenformat zurück. Dieses Format kann entweder direkt benutzt werden, oder man verwendet es, um ein neues Date-Objekt zu erzeugen oder um das Datum in einem vorhandenen Date-Objekt mit der Methode Date.setTime( ) zu setzen. Der ECMAScript-Standard legt das Format der Strings nicht fest, die mit Date.parse( ) geparst werden. Er besagt lediglich, dass diese Methode die von Date.toString( ) und Date.toUTCString( ) zurückgegebenen Strings parsen kann. Leider formatieren diese Funktionen Datumswerte in einer implementierungsabhängigen Weise, sodass Datumsangaben generell nicht in einer Form geschrieben werden können, die auch garantiert von allen JavaScript-Implementierungen verstanden wird.

Siehe auch Date, Date.setTime( ), Date.toGMTString( ), Date.UTC( )

Date.setDate( )

ECMAScript v1

Setzt das Monatstag-Feld eines Date-Objekts

Überblick date.setDate(tag_des_monats)

Argumente tag_des_monats

Ein Integer zwischen 1 und 31, der als neuer (in Ortszeit ausgedrückter) Wert des Monatstag-Felds von date verwendet wird. Rückgabewert Die Millisekundendarstellung des angepassten Datums. Vor der ECMAScript-Standardisierung gab diese Methode gar nichts zurück.

Referenz für den Sprachkern von JavaScript |

681

Referenz für den JavaScriptSprachkern

Date.parse( ) ist eine statische Methode von Date. Sie wird immer als Date.parse( ) über den Date-Konstruktor und nicht als date.parse( ) über ein Date-Objekt aufgerufen. Date.parse( )

491-0.book Seite 682 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Date.setFullYear( )

Date.setFullYear( )

ECMAScript v1

Setzt das Jahr und optional den Monat und das Datum

Überblick date.setFullYear(jahr) date.setFullYear(jahr, monat) date.setFullYear(jahr, monat, tag)

Argumente jahr

Das Jahr in Ortszeit, das in date gesetzt werden soll. Dieses Argument sollte ein Integer sein, der auch das Jahrhundert angibt, also z.B. 1999. Es sollte keine Abkürzung wie 99 sein. monat

Ein optionaler Integer zwischen 0 und 11, der als neuer Wert (in Ortszeit) des Monatsfelds von date benutzt wird. tag

Ein optionaler Integer zwischen 1 und 31, der als neuer Wert (in Ortszeit) des MonatstagFelds von date benutzt wird. Rückgabewert Die interne Millisekundendarstellung des angepassten Datums.

Date.setHours( )

ECMAScript v1

Setzt die Felder für Stunden, Minuten, Sekunden und Millisekunden eines Date-Objekts

Überblick date.setHours(stunden) date.setHours(stunden, minuten) date.setHours(stunden, minuten, sekunden) date.setHours(stunden, minuten, sekunden, millis)

Argumente stunden

Ein Integer zwischen 0 (Mitternacht) und 23 (elf Uhr nachts) Ortszeit, der als neuer Stundenwert von date eingesetzt wird. minuten

Ein optionaler Integer zwischen 0 und 59, der als neuer Wert (in Ortszeit) des Minutenfelds von date verwendet wird. Dieses Argument wird erst seit der ECMAScriptStandardisierung unterstützt. sekunden

Ein optionaler Integer zwischen 0 und 59, der als neuer Wert (in Ortszeit) des Sekundenfelds von date verwendet wird. Dieses Argument wird erst seit der ECMAScriptStandardisierung unterstützt.

682 | Referenz für den Sprachkern von JavaScript

491-0.book Seite 683 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Date.setMilliseconds( ) millis

Ein optionaler Integer zwischen 0 und 999, der als neuer Wert (in Ortszeit) des Millisekundenfelds von date verwendet wird. Dieses Argument wird erst seit der ECMAScriptStandardisierung unterstützt. Rückgabewert Die Millisekundendarstellung des angepassten Datums. Vor der ECMAScript-Standardisierung gab diese Methode nichts zurück.

Date.setMilliseconds( )

ECMAScript v1 Referenz für den JavaScriptSprachkern

Setzt das Millisekundenfeld eines Date-Objekts

Überblick date.setMilliseconds(millis)

Argumente millis

Das Millisekundenfeld (in Ortszeit), das in date gesetzt werden soll. Dieses Argument sollte ein Integer zwischen 0 und 999 sein. Rückgabewert Die Millisekundendarstellung des angepassten Datums.

Date.setMinutes( )

ECMAScript v1

Setzt die Felder für Minuten, Sekunden und Millisekunden eines Date-Objekts

Überblick date.setMinutes(minuten) date.setMinutes(minuten, sekunden) date.setMinutes(minuten, sekunden, millis)

Argumente minuten

Ein Integer zwischen 0 und 59, der als Minutenwert (in Ortszeit) des Date-Objekts date gesetzt wird. sekunden

Ein optionaler Integer zwischen 0 und 59, der als neuer Wert (in Ortszeit) des Sekundenfelds von date verwendet wird. Dieses Argument wurde vor der ECMAScript-Standardisierung nicht unterstützt. millis

Ein optionaler Integer zwischen 0 und 999, der als neuer Wert (in Ortszeit) des Millisekundenfelds von date verwendet wird. Dieses Argument wurde vor der ECMAScriptStandardisierung nicht unterstützt.

Referenz für den Sprachkern von JavaScript |

683

491-0.book Seite 684 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Date.setMonth( )

Rückgabewert Die Millisekundendarstellung des angepassten Datums. Vor der ECMAScript-Standardisierung gab diese Methode nichts zurück.

Date.setMonth( )

ECMAScript v1

Setzt die Felder für Monat und Tag eines Date-Objekts

Überblick date.setMonth(monat) date.setMonth(monat, tag)

Argumente monat

Ein Integer zwischen 0 (Januar) und 11 (Dezember), der als Monatswert (in Ortszeit) für das Date-Objekt date gesetzt wird. Beachten Sie, dass Monate beginnend mit 0 und Monatstage beginnend mit 1 nummeriert werden. tag

Ein optionaler Integer zwischen 1 und 31, der als neuer Wert (in Ortszeit) des MonatstagFelds von date verwendet wird. Dieses Argument wurde vor der ECMAScript-Standardisierung nicht unterstützt. Rückgabewert Die Millisekundendarstellung des angepassten Datums. Vor der ECMAScript-Standardisierung gab diese Methode nichts zurück.

Date.setSeconds( )

ECMAScript v1

Setzt die Felder für Sekunden und Millisekunden eines Date

Überblick date.setSeconds(sekunden) date.setSeconds(sekunden, millis)

Argumente sekunden

Ein Integer zwischen 0 und 59, der als Sekundenwert für das Date-Objekt date gesetzt wird. millis

Ein optionaler Integer zwischen 0 und 999, der als neuer Wert (in Ortszeit) für das Millisekundenfeld von date verwendet wird. Dieses Argument wurde vor der ECMAScriptStandardisierung nicht unterstützt. Rückgabewert Die Millisekundendarstellung des angepassten Datums. Vor der ECMAScript-Standardisierung gab diese Methode nichts zurück.

684 | Referenz für den Sprachkern von JavaScript

491-0.book Seite 685 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Date.setTime( )

Date.setTime( )

ECMAScript v1

Setzt ein Date in Millisekunden

Überblick date.setTime(millisekunden)

Argumente millisekunden

Rückgabewert Das Argument millisekunden. Vor der ECMAScript-Standardisierung gab diese Methode nichts zurück.

Date.setUTCDate( )

ECMAScript v1

Setzt das Monatstag-Feld eines Date-Objekts (Universalzeit)

Überblick date.setUTCDate(tag_des_monats)

Argumente tag_des_monats

Der Monatstag in Universalzeit, der in date gesetzt werden soll. Dieses Argument sollte ein Integer zwischen 1 und 31 sein. Rückgabewert Die interne Millisekundendarstellung des angepassten Datums.

Date.setUTCFullYear( )

ECMAScript v1

Setzt Jahr, Monat und Tag eines Date-Objekts (Universalzeit)

Überblick date.setUTCFullYear(jahr) date.setUTCFullYear(jahr, monat) date.setUTCFullYear(jahr, monat, tag)

Argumente jahr

Das Jahr in Universalzeit, das in date gesetzt werden soll. Dieses Argument sollte ein Integer sein, der auch das Jahrhundert einschließt, z.B. 1999, und keine Abkürzung wie etwa 99.

Referenz für den Sprachkern von JavaScript |

685

Referenz für den JavaScriptSprachkern

Die Anzahl der Millisekunden zwischen dem gewünschten Zeitpunkt und Mitternacht des 1. Januar 1970 GMT. Ein Millisekundenwert dieses Typs kann auch dem Date( )Konstruktor übergeben und durch Aufruf der Methoden Date.UTC( ) und Date.parse( ) beschafft werden. Wenn Sie ein Datum in diesem Millisekundenformat darstellen, machen Sie es zeitzonenunabhängig.

491-0.book Seite 686 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Date.setUTCHours( ) monat

Ein optionaler Integer zwischen 0 und 11, der als neuer (Universalzeit-)Wert des Monatsfelds von date verwendet wird. Beachten Sie, dass die Nummerierung von Monaten bei 0 beginnt, während die Nummerierung von Monatstagen mit 1 beginnt. tag

Ein optionaler Integer zwischen 1 und 31, der als neuer (Universalzeit-)Wert des Monatstag-Felds von date verwendet wird. Rückgabewert Die interne Millisekundendarstellung des angepassten Datums.

Date.setUTCHours( )

ECMAScript v1

Setzt die Felder für Stunden, Minuten, Sekunden und Millisekunden eines Date-Objekts (Universalzeit)

Überblick date.setUTCHours(stunden) date.setUTCHours(stunden, minuten) date.setUTCHours(stunden, minuten, sekunden) date.setUTCHours(stunden, minuten, sekunden, millis)

Argumente stunden

Das Stundenfeld in Universalzeit, das in date gesetzt werden soll. Dieses Argument sollte ein Integer zwischen 0 (Mitternacht) und 23 (elf Uhr nachts) sein. minuten

Ein optionaler Integer zwischen 0 und 59, der als neuer Wert (in Universalzeit) des Minutenfelds von date verwendet wird. seconds

Ein optionaler Integer zwischen 0 und 59, der als neuer Wert (in Universalzeit) des Sekundenfelds von date verwendet wird. millis

Ein optionaler Integer zwischen 0 und 999, der als neuer Wert (in Universalzeit) des Millisekundenfelds von date verwendet wird. Rückgabewert Die Millisekundendarstellung des angepassten Datums.

Date.setUTCMilliseconds( ) Setzt das Millisekundenfeld eines Date-Objekts (Universalzeit)

Überblick date.setUTCMilliseconds(millis)

686 | Referenz für den Sprachkern von JavaScript

ECMAScript v1

491-0.book Seite 687 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Date.setUTCMinutes( )

Argumente millis

Das Millisekundenfeld in Universalzeit, das in date gesetzt werden soll. Dieses Argument sollte ein Integer zwischen 0 und 999 sein. Rückgabewert Die Millisekundendarstellung des angepassten Datums.

Date.setUTCMinutes( )

ECMAScript v1

Setzt die Felder für Minuten, Sekunden und Millisekunden eines Date-Objekts (Universalzeit) Referenz für den JavaScriptSprachkern

Überblick date.setUTCMinutes(minuten) date.setUTCMinutes(minuten, sekunden) date.setUTCMinutes(minuten, sekunden, millis)

Argumente minuten

Das Minutenfeld in Universalzeit, das in date gesetzt werden soll. Dieses Argument sollte ein Integer zwischen 0 und 59 sein. sekunden

Ein optionaler Integer zwischen 0 und 59, der als der neue Wert (in Universalzeit) des Sekundenfelds von date verwendet wird. millis

Ein optionaler Integer zwischen 0 und 999, der als der neue Wert (in Universalzeit) des Millisekundenfelds von date verwendet wird. Rückgabewert Die Millisekundendarstellung des angepassten Datums.

Date.setUTCMonth( )

ECMAScript v1

Setzt die Felder für Monat und Tag eines Date-Objekts (Universalzeit)

Überblick date.setUTCMonth(monat) date.setUTCMonth(monat, tag)

Argumente monat

Der Monat in Universalzeit, der in date gesetzt werden soll. Dieses Argument sollte ein Integer zwischen 0 (Januar) und 11 (Dezember) sein. Beachten Sie, dass die Monate beginnend mit 0 und die Monatstage beginnend mit 1 nummeriert sind.

Referenz für den Sprachkern von JavaScript |

687

491-0.book Seite 688 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Date.setUTCSeconds( ) tag

Ein optionaler Integer zwischen 1 und 31, der als neuer Wert (in Universalzeit) des Monatstag-Felds von date benutzt wird. Rückgabewert Die Millisekundendarstellung des angepassten Datums.

Date.setUTCSeconds( )

ECMAScript v1

Setzt die Felder für Sekunden und Millisekunden eines Date-Objekts (Universalzeit)

Überblick date.setUTCSeconds(sekunden) date.setUTCSeconds(sekunden, millis)

Argumente sekunden

Das Sekundenfeld in Universalzeit, das in date gesetzt werden soll. Dieses Argument sollte ein Integer zwischen 0 und 59 sein. millis

Ein optionaler Integer zwischen 0 und 999, der als neuer Wert (in Universalzeit) des Millisekundenfelds von date benutzt wird. Rückgabewert Die Millisekundendarstellung des angepassten Datums.

Date.setYear( )

ECMAScript v1; veraltet seit ECMAScript v3

Setzt das Jahresfeld eines Date-Objekts

Überblick date.setYear(jahr)

Argumente jahr

Ein Integer, der als Jahreswert (in Ortszeit) für das Date-Objekt date gesetzt wird. Wenn dieser Wert zwischen 0 und einschließlich 99 liegt, wird 1900 hinzuaddiert, und der Wert wird als Jahr zwischen 1900 und 1999 behandelt. Rückgabewert Die Millisekundendarstellung des angepassten Datums. Vor der ECMAScript-Standardisierung gab diese Methode nichts zurück.

688 | Referenz für den Sprachkern von JavaScript

491-0.book Seite 689 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Date.toDateString( )

Beschreibung setYear( ) setzt das Jahresfeld eines angegebenen Date-Objekts und bietet für die Jahre 1900 bis 1999 ein spezielles Verhalten.

Seit ECMAScript v3 ist diese Funktion für standardkonforme JavaScript-Implementierungen nicht mehr erforderlich. Verwenden Sie stattdessen setFullYear( ).

Date.toDateString( )

ECMAScript v3

Gibt den Datumsteil eines Date-Objekts als String zurück

date.toDateString( )

Rückgabewert Eine implementierungsabhängige, für Menschen lesbare Darstellung des Datumsteils von date, ausgedrückt in Ortszeit.

Siehe auch Date.toLocaleDateString( ), Date.toLocaleString( ), String( ), Date.toTimeString( )

Date.toGMTString( )

Date.toLocaleTimeString( ),

Date.to

ECMAScript v1; veraltet seit ECMAScript v3

Konvertiert ein Date-Objekt in einen Universalzeit-String

Überblick date.toGMTString( )

Rückgabewert Eine String-Darstellung des Zeitpunkts, der durch das Date-Objekt date spezifiziert ist. Das Datum wird von der Ortszeit in GMT konvertiert, bevor es in einen String umgewandelt wird.

Beschreibung toGMTString( ) wurde durch die identische Methode Date.toUTCString( ) ersetzt.

Seit ECMAScript v3 brauchen standardkonforme JavaScript-Implementierungen diese Methode nicht mehr zur Verfügung zu stellen. Verwenden Sie stattdessen toUTCString( ).

Siehe auch Date.toUTCString( )

Referenz für den Sprachkern von JavaScript |

689

Referenz für den JavaScriptSprachkern

Überblick

491-0.book Seite 690 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Date.toLocaleDateString( )

Date.toLocaleDateString( )

ECMAScript v3

Gibt den Datumsteil eines Date-Objekts als String im ortsüblichen Format aus

Überblick date.toLocaleDateString( )

Rückgabewert Eine implementierungsabhängige, für Menschen lesbare Darstellung des Datumsteils von date in Ortszeit und im ortsüblichen Format.

Siehe auch Date.toDateString( ), Date.toTimeString( )

Date.toLocaleString( ),

Date.toLocaleTimeString( ),

Date.toLocaleString( )

Date.toString( ),

ECMAScript v1

Konvertiert ein Date-Objekt in einen String im ortsüblichen Format

Überblick date.toLocaleString( )

Rückgabewert Eine String-Darstellung des durch date spezifizierten Zeitpunkts. Datum und Uhrzeit werden in Ortszeit und im ortsüblichen Format dargestellt.

Verwendung toLocaleString( ) konvertiert ein Datum gemäß der Ortszeit in einen String. Außerdem hält

sich diese Methode bei der Formatierung von Datum und Uhrzeit an die lokalen Gepflogenheiten, sodass sich das Format von Plattform zu Plattform und von Land zu Land ändern kann. toLocaleString( ) gibt den String zurück, der wahrscheinlich dem vom Benutzer bevorzugten Datums- und Uhrzeitformat entspricht.

Siehe auch Date.toLocaleDateString( ), Date.toLocaleTimeString( ), Date.toString( ), Date.toUTCString( )

Date.toLocaleTimeString( ) Gibt den Uhrzeitteil eines Date-Objekts als String im ortsüblichen Format zurück

Überblick date.toLocaleTimeString( )

690 | Referenz für den Sprachkern von JavaScript

ECMAScript v3

491-0.book Seite 691 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Date.toString( )

Rückgabewert Eine implementierungsabhängige, für Menschen lesbare Darstellung des Uhrzeitteils von date in Ortszeit und im ortsüblichen Format.

Siehe auch Date.toDateString( ), Date.toTimeString( )

Date.toLocaleDateString( ),

Date.toLocaleString( ),

Date.toString( )

Date.toString( ),

ECMAScript v1 Überschreibt Object.toString( )

Überblick date.toString( )

Rückgabewert Eine für Menschen lesbare String-Darstellung von date in Ortszeit.

Beschreibung toString( ) gibt eine für Menschen lesbare, implementierungsabhängige String-Darstellung von date zurück. Im Gegensatz zu toUTCString( ) drückt toString( ) das Datum in Ortszeit aus, und im Gegensatz zu toLocaleString( ) gibt toString( ) das Datum und die Uhrzeit möglicherweise

nicht in einem locale-spezifischen Format zurück.

Siehe auch Date.parse( ), toUTCString( )

Date.toDateString( ),

Date.toLocaleString( ),

Date.toTimeString( ),

Date.toTimeString( )

Date.

ECMAScript v3

Gibt den Uhrzeitteil eines Date-Objekts als String zurück

Überblick date.toTimeString( )

Rückgabewert Eine implementierungsabhängige, für Menschen lesbare String-Darstellung des Uhrzeitteils eines date, ausgedrückt in Ortszeit.

Siehe auch Date.toString( ), Date.toDateString( ), Date.toLocaleTimeString( )

Date.toLocaleDateString( ),

Date.toLocaleString( ),

Referenz für den Sprachkern von JavaScript |

691

Referenz für den JavaScriptSprachkern

Konvertiert ein Date-Objekt in einen String

491-0.book Seite 692 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Date.toUTCString( )

Date.toUTCString( )

ECMAScript v1

Konvertiert ein Date-Objekt in einen String (Universalzeit)

Überblick date.toUTCString( )

Rückgabewert Eine für Menschen lesbare String-Darstellung von date in Universalzeit.

Beschreibung toUTCString( ) gibt einen implementierungsabhängigen String zurück, der date in Universalzeit

darstellt.

Siehe auch Date.toLocaleString( ), Date.toString( )

Date.UTC( )

ECMAScript v1

Konvertiert eine Date-Angabe in Millisekunden

Überblick Date.UTC(jahr, monat, tag, stunden, minuten, sekunden, ms)

Argumente jahr

Vierstellige Jahresangabe. Wenn dieses Argument zwischen 0 und einschließlich 99 liegt, wird 1900 hinzuaddiert, und es wird als eine Jahreszahl zwischen 1900 und 1999 behandelt. monat

Der Monat als Integer zwischen 0 (Januar) und 11 (Dezember). tag

Der Monatstag als Integer zwischen 1 und 31. Beachten Sie, dass dieses Argument als kleinsten Wert 1 verwendet, während andere Argumente 0 als kleinsten Wert haben. Dieses Argument ist optional. stunden

Die Stunde als Integer zwischen 0 (Mitternacht) und 23 (elf Uhr nachts). Dieses Argument ist optional. minuten

Die Minuten der Stunde, angegeben als Integer zwischen 0 und 59. Dieses Argument ist optional. sekunden

Die Sekunden der Minute, angegeben als Integer zwischen 0 und 59. Dieses Argument ist optional.

692 | Referenz für den Sprachkern von JavaScript

491-0.book Seite 693 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Date.valueOf( ) ms

Die Anzahl der Millisekunden, angegeben als Integer zwischen 0 und 999. Dieses Argument ist optional und wird erst seit der ECMAScript-Standardisierung berücksichtigt. Rückgabewert Die Millisekundendarstellung des angegebenen Zeitpunkts in Universalzeit. Folglich gibt diese Methode die Millisekunden zurück, die zwischen Mitternacht am 1. Januar 1970 GMT und dem angegebenen Zeitpunkt verstrichen sind.

Beschreibung Date.UTC( ) ist eine statische Methode, die über den Date( )-Konstruktor und nicht über ein

Die Argumente von Date.UTC( ) geben ein Datum und eine Uhrzeit an und werden als UTC (Universal Coordinated Time) interpretiert, also als GMT-Zeitangabe. Die angegebene UTCZeit wird in das Millisekundenformat konvertiert, das von der Konstruktormethode Date( ) und der Methode Date.setTime( ) verstanden wird. Die Konstruktormethode Date( ) kann dieselben Datums- und Uhrzeitargumente entgegennehmen wie Date.UTC( ). Der Unterschied besteht darin, dass der Konstruktor Date( ) von der Ortszeit ausgeht, während Date.UTC( ) die Universalzeit (GMT) zugrunde legt. Mit Code wie diesem können Sie ein Date-Objekt anlegen, das eine UTC-Zeitangabe verwendet: d = new Date(Date.UTC(1996, 4, 8, 16, 30));

Siehe auch Date, Date.parse( ), Date.setTime( )

Date.valueOf( ) Konvertiert ein Date-Objekt in Millisekunden

ECMAScript v1 Überschreibt Object.valueOf( )

Überblick date.valueOf( )

Rückgabewert Die Millisekundendarstellung von date. Der Rückgabewert ist derselbe wie bei Date. getTime( ).

decodeURI( )

ECMAScript v3

Entfernt Escape-Zeichen aus einer URI

Überblick decodeURI(uri)

Referenz für den Sprachkern von JavaScript |

693

Referenz für den JavaScriptSprachkern

einzelnes Date-Objekt aufgerufen wird.

491-0.book Seite 694 Mittwoch, 4. April 2007 9:55 09

e-bol.net

decodeURIComponent( )

Argumente uri

Ein String, der eine codierte URI oder einen anderen Text enthält, der decodiert werden soll. Rückgabewert Eine Kopie von uri, in der hexadezimale Escape-Sequenzen durch die von diesen dargestellten Zeichen ersetzt wurden. Exceptions URIError

Besagt, dass eine oder mehrere Escape-Sequenzen in uri nicht wohlgeformt sind und daher nicht korrekt decodiert werden können.

Beschreibung decodeURI( ) ist eine globale Funktion, die eine decodierte Kopie ihres uri-Arguments zurückliefert. Sie macht die von encodeURI( ) vorgenommene Codierung rückgängig. Weitere Einzelheiten finden Sie unter encodeURI( ).

Siehe auch decodeURIComponent( ), encodeURI( ), encodeURIComponent( ), escape( ), unescape( )

decodeURIComponent( )

ECMAScript v3

Entfernt Escape-Zeichen aus einem URI-Bestandteil

Überblick decodeURIComponent(s)

Argumente s Ein String, der einen codierten URI-Bestandteil oder anderen zu decodierenden Text enthält. Rückgabewert Eine Kopie von s, in der hexadezimale Escape-Sequenzen durch die Zeichen ersetzt werden, die sie repräsentieren. Exceptions URIError

Zeigt an, dass eine oder mehrere der Escape-Sequenzen in s nicht wohlgeformt sind und daher auch nicht korrekt decodiert werden können.

694 | Referenz für den Sprachkern von JavaScript

491-0.book Seite 695 Mittwoch, 4. April 2007 9:55 09

e-bol.net

encodeURI( )

Beschreibung decodeURIComponent( ) ist eine globale Funktion, die eine decodierte Kopie ihres Arguments s zurückgibt. Sie macht die von encodeURIComponent( ) vorgenommene Codierung rückgängig. Näheres dazu finden Sie im Referenzeintrag zu encodeURIComponent( ).

Siehe auch decodeURI( ), encodeURI( ), encodeURIComponent( ), escape( ), unescape( )

encodeURI( )

ECMAScript v3 Referenz für den JavaScriptSprachkern

Ersetzt Zeichen in einer URI durch Escape-Sequenzen

Überblick encodeURI(uri)

Argumente uri

Ein String, der die URI oder einen anderen zu codierenden Text enthält. Rückgabewert Eine Kopie von uri, in der bestimmte Zeichen durch hexadezimale Escape-Sequenzen ersetzt wurden. Exceptions URIError

Zeigt an, dass uri nicht-wohlgeformte Unicode-Surrogatpaare enthält und nicht codiert werden kann.

Beschreibung encodeURI( ) ist eine globale Funktion, die eine codierte Kopie ihres uri-Arguments zurückgibt.

ASCII-Buchstaben und Ziffern werden ebenso wenig codiert wie die folgenden ASCIIInterpunktionszeichen: - _ . ! ~ * ' ( )

Da encodeURI( ) dafür gedacht ist, vollständige URIs zu codieren, werden auch die folgenden ASCII-Interpunktionszeichen, die in URIs eine Sonderbedeutung haben, nicht mit EscapeZeichen versehen: ; / ? : @ & = + $ , #

Alle anderen Zeichen in uri werden ersetzt, indem jedes Zeichen in seine UTF-8-Codierung konvertiert und dann jedes der resultierenden ein, zwei oder drei Bytes durch eine hexadezimale Escape-Sequenz der Form %xx codiert wird. Bei diesem Codierschema werden ASCIIZeichen durch eine einzige Escape-Sequenz der Form %xx ersetzt. Zeichen mit einer Codierung zwischen \u0080 und \u07ff werden durch zwei Escape-Sequenzen ersetzt, und alle anderen 16Bit-Unicode-Zeichen werden durch drei Escape-Sequenzen ersetzt.

Referenz für den Sprachkern von JavaScript |

695

491-0.book Seite 696 Mittwoch, 4. April 2007 9:55 09

e-bol.net

encodeURIComponent( )

Wenn Sie eine URI mit dieser Methode codieren, müssen Sie ganz sicher sein, dass keine der URI-Komponenten (wie z.B. der Abfrage-String) URI-Trennzeichen wie etwa ? oder # enthält. Wenn die Bestandteile solche Zeichen enthalten müssen, sollten Sie jeden Bestandteil separat mit encodeURIComponent( ) codieren. Mit decodeURI( ) können Sie die Codierung, die diese Methode vornimmt, rückgängig machen. Vor der ECMAScript v3-Standardisierung konnten Sie die (mittlerweile veralteten) Methoden escape( ) und unescape( ) verwenden, um eine ähnliche Codierung und Decodierung vorzunehmen.

Beispiel // Rückgabe: http://www.isp.com/app.cgi?arg1=1&arg2=hello%20world encodeURI("http://www.isp.com/app.cgi?arg1=1&arg2=hello world"); encodeURI("\u00a9"); // Das Copyright-Zeichen wird als %C2%A9 codiert

Siehe auch decodeURI( ), decodeURIComponent( ), encodeURIComponent( ), escape( ), unescape( )

encodeURIComponent( )

ECMAScript v3

Ersetzt Zeichen in einem URI-Bestandteil durch Escape-Sequenzen

Überblick encodeURIComponent(s)

Argumente s Ein String, der einen Teil einer URI oder eines anderen zu codierenden Texts enthält. Rückgabewert Eine Kopie von s, in der bestimmte Zeichen durch hexadezimale Escape-Sequenzen ersetzt wurden. Exceptions URIError

Zeigt an, dass s nicht-wohlgeformte Unicode-Surrogatpaare enthält und nicht codiert werden kann.

Beschreibung encodeURIComponent( ) ist eine globale Funktion, die eine codierte Kopie ihres Arguments s

zurückgibt. ASCII-Buchstaben und Ziffern werden ebenso wenig codiert wie die folgenden ASCII-Interpunktionszeichen: - _ . ! ~ * ' ( )

Alle anderen Zeichen einschließlich der Interpunktionszeichen wie /, : und #, mit denen die einzelnen URI-Bestandteile voneinander getrennt werden, werden durch eine oder mehrere hexadezimale Escape-Sequenzen ersetzt. Unter encodeURI( ) finden Sie eine Beschreibung des verwendeten Codierungsschemas.

696 | Referenz für den Sprachkern von JavaScript

491-0.book Seite 697 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Error

Es gibt einen Unterschied zwischen encodeURIComponent( ) und encodeURI( ): Die Methode encodeURIComponent( ) geht davon aus, dass ihr Argument ein Teil einer URI ist (z.B. Protokoll, Hostname, Pfad oder Abfrage-String). Daher setzt sie für die Interpunktionszeichen, die als Trennzeichen zwischen den einzelnen Teilen einer URI dienen, Escape-Sequenzen ein.

Beispiel encodeURIComponent("hello world?");

// Rückgabe: hello%20world%3F

Siehe auch decodeURI( ), decodeURIComponent( ), encodeURI( ), escape( ), unescape( )

ECMAScript v3

Eine generische Exception

Object ➝ Error

Konstruktor new Error( ) new Error(meldung)

Argumente meldung

Eine optionale Fehlermeldung, die Einzelheiten über die Exception mitteilt. Rückgabewert Ein neu erzeugtes Error-Objekt. Wenn das Argument meldung angegeben ist, verwendet das Error-Objekt dieses als Wert seiner message-Eigenschaft. Andernfalls verwendet es als Wert dieser Eigenschaft einen implementierungsabhängigen Standard-String. Wenn der Error( )Konstruktor als Funktion ohne den new-Operator aufgerufen wird, verhält er sich genauso, wie wenn er mit dem new-Operator aufgerufen wird.

Eigenschaften message

Eine Fehlermeldung, die Einzelheiten über die Exception angibt. Diese Eigenschaft speichert den String, der an den Konstruktor übergeben wurde, oder einen implementierungsspezifischen Standard-String. name

Ein String, der den Exception-Typ angibt. Bei Instanzen der Klasse Error und ihrer Unterklassen gibt diese Eigenschaft den Namen des Konstruktors an, mit dem die Instanz erzeugt wurde.

Methoden toString( )

Gibt einen je nach Implementierung definierten String zurück, der dieses Error-Objekt repräsentiert.

Referenz für den Sprachkern von JavaScript |

697

Referenz für den JavaScriptSprachkern

Error

491-0.book Seite 698 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Error.message

Beschreibung Instanzen der Klasse Error stellen Fehler oder Exceptions dar, die in der Regel zusammen mit den Anweisungen throw und try/catch benutzt werden. Die Eigenschaft name gibt den Exception-Typ an, und mit der Eigenschaft message können Sie Einzelheiten über den Fehler in einer für Menschen lesbaren Form angeben. Der JavaScript-Interpreter löst nie ein Error-Objekt direkt aus, sondern verwendet immer Instanzen einer Unterklasse von Error, also beispielsweise SyntaxError oder RangeError. Bequem ist es, in eigenem Code Exceptions durch die Auslösung von Error-Objekten zu signalisieren oder einfach nur eine Fehlermeldung oder einen Fehlercode als String bzw. numerischen Grundtyp auszulösen. Beachten Sie, dass die ECMAScript-Spezifikation eine toString( )-Methode für die Klasse Error definiert (die von allen Unterklassen von Error geerbt wird). Die Spezifikation fordert jedoch nicht, dass diese toString( )-Methode einen String mit dem Inhalt der Eigenschaft message zurückgibt. Daher dürfen Sie nicht davon ausgehen, dass toString( ) ein Error-Objekt in einen für Menschen lesbaren String konvertiert. Um einem Benutzer eine Fehlermeldung anzuzeigen, sollten Sie explizit die Eigenschaften name und message des Error-Objekts verwenden.

Beispiel Eine Exception können Sie mit Code wie diesem signalisieren: function factorial(x) { if (x < 0) throw new Error("factorial: x muss >= 0 sein"); if (x auf Strings angewendet werden, vergleichen sie diese Strings anhand der Unicode-Codierungen der Zeichen und lassen die Sortierreihenfolge gemäß dem örtlichen Locale außer acht. Auf diese Weise erhält man nicht immer die richtige Reihenfolge. In Spanien werden z.B. die Buchstaben »ch« traditionell so eingeordnet, als seien sie ein einzelner Buchstabe, der zwischen den Buchstaben »c« und »d« steht. localeCompare( ) bietet eine Möglichkeit, Strings in einer Weise zu vergleichen, die die Sortier-

reihenfolge gemäß dem örtlichen Locale berücksichtigt. Der ECMAScript-Standard sagt nicht, wie der locale-spezifische Vergleich vorgenommen werden soll, sondern verlangt nur, dass diese Funktion die Sortierreihenfolge anwendet, die das zugrunde liegende Betriebssystem vorgibt.

Beispiel Mit Code wie diesem können Sie ein String-Array in eine locale-spezifische Reihenfolge bringen: var strings; // Das zu sortierende String-Array; anderswo initialisiert strings.sort(function(a,b) { return a.localeCompare(b) });

762 | Referenz für den Sprachkern von JavaScript

491-0.book Seite 763 Mittwoch, 4. April 2007 9:55 09

e-bol.net

String.match( )

String.match( )

ECMAScript v3

Sucht eine oder mehrere Übereinstimmungen mit einem regulären Ausdruck

Überblick string.match(regexp)

Argumente regexp

Rückgabewert Ein Array mit den Ergebnissen der Mustererkennung. Der Array-Inhalt hängt davon ab, ob regexp das globale Attribut »g« hat. In der Beschreibung finden Sie noch mehr Einzelheiten über den Rückgabewert.

Beschreibung match( ) sucht im string nach einem oder mehreren Auftreten von regexp. Das Verhalten dieser Methode hängt stark davon ab, ob regexp das Attribut »g« hat oder nicht. In Kapitel 11 finden Sie Erläuterungen zu regulären Ausdrücken.

Wenn regexp nicht das Attribut »g« hat, sucht match( ) in string nach einer einzigen Übereinstimmung. Ist keine zu finden, gibt match( ) den Wert null zurück. Andernfalls wird ein Array mit Informationen über die gefundene Übereinstimmung zurückgegeben. Das Array-Element 0 enthält den übereinstimmenden Text, und die übrigen Elemente enthalten Text, der mit eventuell vorhandenen, in Klammern stehenden Teilausdrücken in dem regulären Ausdruck übereinstimmt. Zusätzlich zu diesen normalen Array-Elementen hat das Rückgabe-Array auch zwei Objekteigenschaften. Die Eigenschaft index des Arrays gibt an, an welcher Zeichenposition in string der übereinstimmende Text beginnt, und die Eigenschaft input des RückgabeArrays ist eine Referenz auf string selbst. Wenn regexp das Flag »g« hat, führt die Methode match( ) eine globale Suche durch, indem sie string nach allen passenden Teilstrings durchsucht. Wenn keiner gefunden wird, ist die Rückgabe null, und wenn eine oder mehrere Übereinstimmungen gefunden werden, ist die Rückgabe ein Array. Der Inhalt dieses Rückgabe-Arrays ist allerdings ganz anders als bei globalen Mustererkennungen. Hier enthalten die Array-Elemente alle Teilstrings, die in string eine Übereinstimmung erbracht haben. Das Rückgabe-Array hat in diesem Fall nicht die Eigenschaften index oder input. Beachten Sie, dass match( ) bei globalen Mustererkennungen weder etwas über in Klammern stehende Teilausdrücke aussagt noch angibt, wo in string die einzelnen Übereinstimmungen aufgetreten sind. Wenn Sie für eine globale Suche diese Informationen benötigen, müssen Sie RegExp.exec( ) verwenden.

Beispiel Die folgende globale Mustererkennung findet alle Zahlen in einem String: "1 plus 2 gleich 3".match(/\d+/g)

// Rückgabe ["1", "2", "3"]

Referenz für den Sprachkern von JavaScript |

763

Referenz für den JavaScriptSprachkern

Ein RegExp-Objekt, das das zu erkennende Muster angibt. Ist dieses Argument kein RegExp-Objekt, wird es zunächst durch Übergabe an den RegExp( )-Konstruktor in ein solches konvertiert.

491-0.book Seite 764 Mittwoch, 4. April 2007 9:55 09

e-bol.net

String.replace( )

Die folgende, nicht-globale Mustererkennung verwendet einen komplexeren regulären Ausdruck mit mehreren in Klammern stehenden Teilausdrücken. Er erkennt eine URL, und seine Teilausdrücke erkennen die einzelnen URL-Teile für das Protokoll, den Host und den Pfad: var url = /(\w+):\/\/([\w.]+)\/(\S*)/; var text = "Visit my home page at http://www.isp.com/~david"; var result = text.match(url); if (result != null) { var fullurl = result[0]; // Enthält "http://www.isp.com/~david" var protocol = result[1]; // Enthält "http" var host = result[2]; // Enthält "www.isp.com" var path = result[3]; // Enthält "~david" }

Siehe auch RegExp, RegExp.exec( ), RegExp.test( ), String.replace( ), String.search( ); Kapitel 11

String.replace( )

ECMAScript v3

Ersetzt zu einem regulären Ausdruck passende(n) Teilstring(s)

Überblick string.replace(regexp, ersatz)

Argumente regexp

Das RegExp-Objekt, das das zu ersetzende Muster angibt. Wenn dieses Argument ein String ist, wird es wie ein zu suchendes wörtliches Textmuster behandelt und nicht erst in ein RegExp-Objekt konvertiert. ersatz

Ein String, der den Ersetzungstext spezifiziert, oder eine Funktion, die aufgerufen wird, um den Ersetzungstext zu generieren. Einzelheiten finden Sie im Abschnitt »Beschreibung«. Rückgabewert Ein neuer String, in dem die erste oder alle Übereinstimmungen mit regexp durch ersatz ersetzt wurden.

Beschreibung replace( ) führt eine Suchen-und-ersetzen-Operation auf string aus. Sie sucht in string einen oder mehrere Teilstrings, die mit regexp übereinstimmen, und ersetzt sie durch ersatz. Wenn regexp das globale Attribut »g« hat, ersetzt replace( ) alle passenden Teilstrings. Andernfalls

ersetzt die Methode nur den ersten passenden Teilstring.

764 | Referenz für den Sprachkern von JavaScript

491-0.book Seite 765 Mittwoch, 4. April 2007 9:55 09

e-bol.net

String.replace( ) ersatz kann ein String oder eine Funktion sein. Ist er ein String, so wird jede Übereinstimmung durch diesen String ersetzt. Beachten Sie, dass das Zeichen $ im ersatz-String eine Sonderbedeutung hat. Wie die folgende Tabelle zeigt, weist dieses Zeichen darauf hin, dass ein von einer Mustererkennung abgeleiteter String in den Ersatz einfließen soll.

Ersatz

$1, $2, ... $99

Der mit dem ersten bis 99. in Klammern stehenden Teil-Ausdruck in regexp übereinstimmende Teilstring

$&

Der Teilstring, der mit regexp übereinstimmte

$`

Der Text links von dem erkannten Teilstring

$'

Der Text rechts von dem erkannten Teilstring

$$

Ein Dollarzeichenliteral

ECMAScript v3 besagt, dass das ersatz-Argument von replace( ) auch eine Funktion statt eines Strings sein kann. In diesem Fall wird bei jeder Übereinstimmung die Funktion aufgerufen und der von ihr zurückgegebene String als Ersetzungstext verwendet. Das erste Argument der Funktion ist der String, der mit dem Muster übereinstimmt. Die nächsten Argumente sind die Strings, die mit den in Klammern stehenden Teilausdrücken des Ausdrucks übereinstimmen. Von diesen Argumenten können null oder mehr vorhanden sein. Das nächste Argument ist ein Integer, der angibt, wo in string die Übereinstimmung auftrat, und das letzte Argument der ersatz-Funktion ist der string selbst.

Beispiel Sicherstellen, dass die Groß-/Kleinschreibung im Wort »JavaScript« richtig ist: text.replace(/javascript/i, "JavaScript");

Einen Namen aus dem Format »Doe, John« in das Format »John Doe« konvertieren: name.replace(/(\w+)\s*,\s*(\w+)/, "$2 $1");

Alle doppelten Anführungszeichen durch doppelte vor- und rückwärts gerichtete einfache Anführungszeichen ersetzen: text.replace(/"([^"]*)"/g, "``$1''");

Den ersten Buchstaben aller Wörter eines Strings großschreiben: text.replace(/\b\w+\b/g, function(word) { return word.substring(0,1).toUpperCase( ) + word.substring(1); });

Siehe auch RegExp, RegExp.exec( ), RegExp.test( ), String.match( ), String.search( ); Kapitel 11

Referenz für den Sprachkern von JavaScript |

765

Referenz für den JavaScriptSprachkern

Zeichen

491-0.book Seite 766 Mittwoch, 4. April 2007 9:55 09

e-bol.net

String.search( )

String.search( )

ECMAScript v3

Sucht nach einem regulären Ausdruck

Überblick string.search(regexp)

Argumente regexp

Ein RegExp-Objekt, das das Muster angibt, das in string gesucht werden soll. Wenn dieses Argument nicht bereits ein RegExp-Objekt ist, wird es mit dem Konstruktor RegExp( ) in ein solches konvertiert. Rückgabewert Die Position, an der der erste Teilstring von string beginnt, der mit regexp übereinstimmt, oder –1, wenn keine Übereinstimmung gefunden wurde.

Beschreibung search( ) sucht nach einem auf regexp passenden Teilstring von string und gibt die Position des ersten Zeichens dieses Teilstrings zurück oder –1, wenn keine Übereinstimmung gefunden wurde. search( ) führt keine globalen Mustererkennungen durch und ignoriert das g-Flag. Außerdem ignoriert die Methode auch die Eigenschaft lastIndex von regexp und beginnt die Suche immer am Anfang des Strings. Das bedeutet, dass sie immer die Position der ersten Übereinstimmung in string zurückgibt.

Beispiel var s = "JavaScript macht Spaß"; s.search(/script/i) // Gibt 4 zurück s.search(/a(.)a/) // Gibt 1 zurück

Siehe auch RegExp, RegExp.exec( ), RegExp.test( ), String.match( ), String.replace( ); Kapitel 11

String.slice( ) Extrahiert einen Teilstring

Überblick string.slice(anfang, ende)

766 | Referenz für den Sprachkern von JavaScript

ECMAScript v3

491-0.book Seite 767 Mittwoch, 4. April 2007 9:55 09

e-bol.net

String.slice( )

Argumente anfang

Der String-Index, an dem das Slice (das Stück) anfangen soll. Ist dieses Argument negativ, so gibt es eine Position ab dem Ende des Strings an. –1 meint also das letzte Zeichen, –2 das vorletzte usw. ende

Der String-Index unmittelbar hinter dem Ende des Stücks. Ist keiner angegeben, so enthält das Stück alle Zeichen von anfang bis zum Ende des Strings. Ist dieses Argument negativ, so gibt es eine Position gemessen vom Ende des Strings an.

Beschreibung slice( ) gibt einen String mit einem Stück oder einem Teilstring von string zurück. string wird

dabei nicht modifiziert. Die String-Methoden slice( ), substring( ) und die veraltete substr( )-Methode geben Teile eines Strings zurück. slice( ) ist flexibler als substring( ), da sie auch Argumente mit negativem Wert gestattet. slice( ) unterscheidet sich von substr( ) insofern, als sie einen Teilstring mit zwei Zeichenpositionen spezifiziert, wogegen substr( ) eine Position und eine Länge angibt. Beachten Sie auch, dass String.slice( ) analog zu Array.slice( ) ist.

Beispiel var s = "abcdefg"; s.slice(0,4) // s.slice(2,4) // s.slice(4) // s.slice(3,-1) // s.slice(3,-2) // s.slice(-3,-1) // //

Gibt "abcd" zurück Gibt "cd" zurück Gibt "efg" zurück Gibt "def" zurück Gibt "de" zurück Sollte "ef" zurückgeben, gibt aber in IE 4 "abcdef" zurück

Fehler Negative Werte für anfang funktionieren nicht im Internet Explorer 4 (aber dafür in neueren Versionen des IE). Sie geben dort nicht eine vom String-Ende gemessene Zeichenposition, sondern die Zeichenposition 0 an.

Siehe auch Array.slice( ), String.substring( )

Referenz für den Sprachkern von JavaScript |

767

Referenz für den JavaScriptSprachkern

Rückgabewert Ein neuer String, der alle Zeichen von string von einschließlich anfang bis ausschließlich ende enthält.

491-0.book Seite 768 Mittwoch, 4. April 2007 9:55 09

e-bol.net

String.split( )

String.split( )

ECMAScript v3

Zerlegt einen String in ein String-Array

Überblick string.split(begrenzer, grenze)

Argumente begrenzer

Der String oder reguläre Ausdruck, bei dem string zerlegt wird. grenze

Dieser optionale Integer gibt die maximale Länge des Rückgabe-Arrays an. Wenn er spezifiziert wurde, wird nur maximal diese Anzahl Teilstrings zurückgegeben. Fehlt dieser Parameter, so wird der gesamte String ohne Rücksicht auf seine Länge zerlegt. Rückgabewert Ein String-Array, das entsteht, wenn string an den durch begrenzer spezifizierten Stellen in Teilstrings zerlegt wurde. Die Teilstrings im Rückgabe-Array enthalten die begrenzer selbst nicht, außer in dem Fall, der in der Beschreibung geschildert wird.

Beschreibung Die Methode split( ) erzeugt und liefert ein Array mit bis zu grenze Teilstrings des angegebenen Strings. Diese Teilstrings entstehen, wenn der String von Anfang bis Ende nach einem Text durchsucht wird, der mit begrenzer übereinstimmt, und dann vor und hinter diesem übereinstimmenden Text aufgespalten wird. Der begrenzer-Text selbst wird, außer in der Form, die am Ende dieses Abschnitts beschrieben wird, nicht in diese Teilstrings aufgenommen. Wenn der Begrenzer mit dem Anfang des Strings übereinstimmt, ist das erste Element des RückgabeArrays der leere String, also der Text, der vor dem Begrenzer steht. In gleicher Weise wird als letztes Array-Element der leere String zurückgeliefert, wenn der Begrenzer mit dem Ende des Strings übereinstimmt (und es keinen Konflikt mit grenze gibt). Ist kein begrenzer angegeben, so wird der String nicht zerlegt und das Rückgabe-Array enthält nur ein einziges, ununterbrochenes String-Element. Wenn begrenzer der leere String oder ein auf den leeren String passender regulärer Ausdruck ist, wird der String nach jedem Zeichen zerlegt, und das Rückgabe-Array hat dieselbe Länge wie der String, sofern keine kleinere grenze angegeben wurde. (Dies ist allerdings ein Sonderfall, da der leere String vor dem ersten und hinter dem letzten Zeichen nicht von der Mustererkennung erfasst wird.) Wie bereits erwähnt wurde, enthalten die Teilstrings in dem Rückgabe-Array dieser Methode nicht den Begrenzungstext, mit dem der String aufgespalten wird. Ist begrenzer jedoch ein regulärer Ausdruck mit in Klammern eingefassten Teilausdrücken, so werden die Teilstrings, die mit diesen Teilausdrücken übereinstimmen, in das Rückgabe-Array aufgenommen (nicht aber der Text, der mit dem regulären Ausdruck als Ganzes übereinstimmt). Die Methode String.split( ) ist das Gegenstück zu Array.join( ).

768 | Referenz für den Sprachkern von JavaScript

491-0.book Seite 769 Mittwoch, 4. April 2007 9:55 09

e-bol.net

String.substr( )

Beispiel Die Methode split( ) ist am nützlichsten, wenn Sie mit stark strukturierten Strings arbeiten. Ein Beispiel: "1:2:3:4:5".split(":"); "|a|b|c|".split("|");

// Rückgabe ["1","2","3","4","5"] // Rückgabe ["", "a", "b", "c", ""]

Außerdem wird die Methode split( ) oft zum Parsen von Befehlen und ähnlichen Strings verwendet, die in durch Leerzeichen getrennte Wörter zerlegt werden: var words = sentence.split(' ');

Es ist leichter, einen String mit einem regulären Ausdruck als Begrenzer in Wörter zu zerlegen: Um einen String in ein Zeichen-Array zu zerlegen, verwenden Sie als Begrenzer den leeren String. Wenn Sie nur ein Präfix des Strings in ein Zeichen-Array zerlegen möchten, können Sie dazu das Argument grenze verwenden: "hello".split(""); "hello".split("", 3);

// Rückgabe ["h","e","l","l","o"] // Rückgabe ["h","e","l"]

Wenn Sie möchten, dass die Begrenzer oder ein oder mehrere Teile davon in das RückgabeArray aufgenommen werden, müssen Sie einen regulären Ausdruck mit geklammerten Teilausdrücken verwenden. Der folgende Code zerlegt z.B. einen String an den HTML-Tags und lässt diese Tags in das Rückgabe-Array mit einfließen: var text = "hello world"; text.split(/(]*>)/); // Rückgabe ["hello ","","world","",""]

Siehe auch Array.join( ), RegExp; Kapitel 11

String.substr( )

veraltet

Extrahiert einen Teilstring

Überblick string.substr(anfang, laenge)

Argumente anfang

Der Anfang des Teilstrings. Wenn dieses Argument negativ ist, gibt es eine vom StringEnde an gemessene Position an: –1 meint das letzte Zeichen, –2 das vorletzte und so weiter. laenge

Die Anzahl der Zeichen im Teilstring. Wenn dieses Argument fehlt, enthält der zurückgegebene Teilstring alle Zeichen vom Anfang bis zum Ende des Strings.

Referenz für den Sprachkern von JavaScript |

769

Referenz für den JavaScriptSprachkern

var words = sentence.split(/\s+/);

491-0.book Seite 770 Mittwoch, 4. April 2007 9:55 09

e-bol.net

String.substring( )

Rückgabewert Eine Kopie des Teils von string, der an der Position anfang beginnt, einschließlich dieses Zeichens, und der um laenge Zeichen oder, falls laenge nicht angegeben ist, bis zum Ende des Strings weitergeht.

Beschreibung substr( ) holt und liefert einen Teilstring von string, wobei string nicht modifiziert wird.

Sie sehen, dass substr( ) den gewünschten Teilstring mit einer Zeichenposition und einer Länge spezifiziert. Dies ist eine nützliche Alternative zu den Methoden String.substring( ) und String.splice( ), die einen String durch zwei Zeichenpositionen spezifizieren. Beachten Sie jedoch, dass diese Methode nicht von ECMAScript standardisiert wurde und daher veraltet ist.

Beispiel var s = "abcdefg"; s.substr(2,2); // s.substr(3); // s.substr(-3,2); // //

Gibt "cd" zurück Gibt "defg" zurück Sollte "ef" zurückgeben, gibt aber in IE 4 "ab" zurück

Fehler Negative anfang-Werte funktionieren nicht im Internet Explorer 4 (dies ist erst in späteren IEVersionen behoben). Sie geben keine vom String-Ende ab gemessene Zeichenposition an, sondern die Zeichenposition 0.

Siehe auch String.slice( ), String.substring( )

String.substring( )

ECMAScript v1

Gibt einen Teilstring eines Strings zurück

Überblick string.substring(von, bis)

Argumente von

Ein nicht-negativer Integer, der angibt, wo in string das erste Zeichen des gewünschten Teilstrings liegt. bis

Ein nicht-negativer optionaler Integer, der um eins größer als die Position des letzten Zeichens des gewünschten Teilstrings ist. Fehlt dieses Argument, so geht der zurückgegebene Teilstring bis zum String-Ende.

770 | Referenz für den Sprachkern von JavaScript

491-0.book Seite 771 Mittwoch, 4. April 2007 9:55 09

e-bol.net

String.toLocaleLowerCase( )

Rückgabewert Ein neuer String der Länge bis–von mit einem Teilstring von string. Der neue String enthält die von den Positionen von bis bis–1 kopierten Zeichen von string.

Beschreibung String.substring( ) gibt einen aus den Zeichen zwischen den Positionen von und bis bestehenden Teilstring von string zurück. Das Zeichen an der Position von ist dabei, nicht aber das Zeichen an der Position bis.

Bitte vergessen Sie nicht, dass das Zeichen an der Position von in den Teilstring einfließt und das Zeichen an der Position bis nicht. Das mag zunächst willkürlich oder verwirrend aussehen, aber es ist ein wichtiges Merkmal dieses Systems, dass die Länge des zurückgegebenen Teilstrings immer bis −von beträgt. Beachten Sie, dass Sie auch mit String.slice( ) und der nicht-standardisierten Methode String.substr( ) Teilstrings aus einem String extrahieren können. Anders als diese Methoden akzeptiert String.substring( ) keine negativen Argumente.

Siehe auch String.charAt( ), String.indexOf( ), String.lastIndexOf( ), String.slice( ), String.substr( )

String.toLocaleLowerCase( )

ECMAScript v3

Konvertiert einen String in Kleinschreibung

Überblick string.toLocaleLowerCase( )

Rückgabewert Eine in locale-spezifische Kleinschreibung konvertierte Kopie von string. Nur wenige Sprachen, wie z.B. Türkisch, haben locale-spezifische Zuordnungen für die Groß- und Kleinschreibung. Daher gibt diese Methode normalerweise denselben Wert wie toLowerCase( ) zurück.

Siehe auch String.toLocaleUpperCase( ), String.toLowerCase( ), String.toUpperCase( )

Referenz für den Sprachkern von JavaScript |

771

Referenz für den JavaScriptSprachkern

Ist von gleich bis, so gibt diese Methode den leeren String (mit der Länge 0) zurück. Ist von größer als bis, so vertauscht diese Methode zuerst die beiden Argumente und gibt dann den dazwischenliegenden Teilstring zurück.

491-0.book Seite 772 Mittwoch, 4. April 2007 9:55 09

e-bol.net

String.toLocaleUpperCase( )

String.toLocaleUpperCase( )

ECMAScript v3

Konvertiert einen String in Großschreibung

Überblick string.toLocaleUpperCase( )

Rückgabewert Eine in locale-spezifische Großschreibung konvertierte Kopie von string. Nur wenige Sprachen, wie z.B. Türkisch, haben locale-spezifische Zuordnungen für die Groß- und Kleinschreibung. Daher gibt diese Methode normalerweise denselben Wert wie toUpperCase( ) zurück.

Siehe auch String.toLocaleLowerCase( ), String.toLowerCase( ), String.toUpperCase( )

String.toLowerCase( )

ECMAScript v1

Konvertiert einen String in Kleinschreibung

Überblick string.toLowerCase( )

Rückgabewert Eine Kopie von string, in der jeder Großbuchstabe in den entsprechenden Kleinbuchstaben konvertiert wurde, falls ein solcher existiert.

String.toString( ) Gibt den String zurück

ECMAScript v1 Überschreibt Object.toString( )

Überblick string.toString( )

Rückgabewert Der elementare Stringwert von string. Diese Methode muss fast nie aufgerufen werden. Exceptions TypeError

Tritt auf, wenn diese Methode auf einem anderen als einem String-Objekt aufgerufen wird.

Siehe auch String.valueOf( )

772 | Referenz für den Sprachkern von JavaScript

491-0.book Seite 773 Mittwoch, 4. April 2007 9:55 09

e-bol.net

String.toUpperCase( )

String.toUpperCase( )

ECMAScript v1

Konvertiert einen String in Großbuchstaben

Überblick string.toUpperCase( )

Rückgabewert Eine Kopie von string, in der jeder Kleinbuchstabe in den entsprechenden Großbuchstaben konvertiert wurde, falls ein solcher existiert.

Gibt den String zurück

ECMAScript v1 Überschreibt Object.valueOf( )

Überblick string.valueOf( )

Rückgabewert Der elementare Stringwert von string. Exceptions TypeError

Tritt auf, wenn diese Methode auf einem anderen als einem String-Objekt aufgerufen wird.

Siehe auch String.toString( )

SyntaxError Signalisiert einen Syntaxfehler

ECMAScript v3 Object ➝ Error ➝ SyntaxError

Konstruktor new SyntaxError( ) new SyntaxError(meldung)

Argumente meldung

Eine optionale Fehlermeldung, die Einzelheiten über die Exception verrät. Wenn dieses Argument angegeben ist, dient es als Wert der message-Eigenschaft des SyntaxErrorObjekts.

Referenz für den Sprachkern von JavaScript |

773

Referenz für den JavaScriptSprachkern

String.valueOf( )

491-0.book Seite 774 Mittwoch, 4. April 2007 9:55 09

e-bol.net

TypeError

Rückgabewert Ein neu erzeugtes SyntaxError-Objekt. Wenn das Argument meldung angegeben ist, wird es vom Error-Objekt als Wert der message-Eigenschaft verwendet; andernfalls erhält diese Eigenschaft einen implementierungsspezifischen Standard-String als Wert. Wenn der Konstruktor SyntaxError( ) als Funktion ohne den Operator new aufgerufen wird, verhält er sich genau wie bei einem Aufruf mit dem Operator new.

Eigenschaften message

Eine Fehlermeldung, die Einzelheiten über die Exception verrät. Diese Eigenschaft speichert den String, der an den Konstruktor übergeben wurde, oder einen implementierungsspezifischen Standard-String. Einzelheiten finden Sie unter Error.message. name

Ein String, der den Exception-Typ angibt. Alle SyntaxError-Objekte erben für diese Eigenschaft den Wert »SyntaxError«.

Beschreibung Eine Instanz der Klasse SyntaxError wird ausgelöst, um einen Syntaxfehler in JavaScript-Code anzuzeigen. Die Methode eval( ), der Konstruktor Function( ) und der Konstruktor RegExp( ) können Exceptions dieses Typs auslösen. Unter Error wird das Auslösen und Abfangen von Exceptions genauer beschrieben.

Siehe auch Error, Error.message, Error.name

TypeError Zeigt an, dass ein Wert den falschen Typ hat

ECMAScript v3 Object ➝ Error ➝ TypeError

Konstruktor new TypeError( ) new TypeError(meldung)

Argumente meldung

Eine optionale Fehlermeldung, die Einzelheiten über die Exception verrät. Wenn dieses Argument angegeben ist, dient es als Wert der message-Eigenschaft des TypeError-Objekts. Rückgabewert Ein neu erzeugtes TypeError-Objekt. Wenn das Argument meldung angegeben ist, wird es vom Error-Objekt als Wert der message-Eigenschaft verwendet; andernfalls erhält diese Eigenschaft einen implementierungsspezifischen Standard-String als Wert. Wenn der Konstruktor TypeError( ) als Funktion ohne den Operator new aufgerufen wird, verhält er sich genau wie bei einem Aufruf mit dem Operator new.

774 | Referenz für den Sprachkern von JavaScript

491-0.book Seite 775 Mittwoch, 4. April 2007 9:55 09

e-bol.net

undefined

Eigenschaften message

Eine Fehlermeldung, die Einzelheiten über die Exception verrät. Diese Eigenschaft speichert den String, der an den Konstruktor übergeben wurde, oder einen implementierungsspezifischen Standard-String. Einzelheiten finden Sie unter Error.message. name

Ein String, der den Exception-Typ angibt. Alle TypeError-Objekte erben für diese Eigenschaft den Wert »TypeError«.

Beschreibung

Siehe auch Error, Error.message, Error.name

undefined

ECMAScript v3

Der Wert undefined

Überblick undefined

Beschreibung undefined ist eine globale Eigenschaft, die den JavaScript-Wert undefined speichert. Derselbe Wert wird zurückgegeben, wenn Sie versuchen, den Wert einer nicht vorhandenen Objekteigenschaft zurückzugeben. Die undefined-Eigenschaft ist nicht mit for/in-Schleifen aufzählbar und lässt sich auch nicht mit dem delete-Operator löschen. Beachten Sie, dass die undefinedEigenschaft keine Konstante ist, sondern auf einen anderen Wert gesetzt werden kann. Dies sollten Sie allerdings besser unterlassen.

Wenn Sie prüfen möchten, ob ein Wert nicht definiert ist, verwenden Sie den Operator ===, denn der Operator == unterscheidet nicht zwischen dem Wert undefined und dem Wert null.

Referenz für den Sprachkern von JavaScript |

775

Referenz für den JavaScriptSprachkern

Eine Instanz der Klasse TypeError wird ausgelöst, wenn ein Wert nicht den erwarteten Typ hat. Am häufigsten geschieht dies, wenn Sie versuchen, auf eine Eigenschaft mit dem Wert null oder auf einen nicht definierten Wert zuzugreifen. Es kann auch passieren, wenn Sie z.B. eine Methode, die durch eine bestimmte Klasse definiert wird, auf einem Objekt aufrufen, das eine Instanz einer anderen Klasse ist, oder wenn Sie den Operator new mit einem Wert verwenden, der keine Konstruktorfunktion ist. JavaScript-Implementierungen dürfen auch dann TypeErrorObjekte auslösen, wenn eine eingebaute Funktion oder Methode mit mehr Argumenten als erwartet aufgerufen wird. Einzelheiten über das Auslösen und Abfangen von Exceptions finden Sie unter Error.

491-0.book Seite 776 Mittwoch, 4. April 2007 9:55 09

e-bol.net

unescape( )

unescape( )

ECMAScript v1; veraltet in ECMAScript v3

Decodiert einen String mit Escape-Sequenzen

Überblick unescape(s)

Argumente s Der zu decodierende String. Rückgabewert Eine decodierte Kopie von s.

Beschreibung unescape( ) ist eine globale Funktion, die einen mit escape( ) codierten String wieder decodiert. Dies tut sie, indem sie Zeichenfolgen der Form %xx bzw. %uxxxx findet (wobei x eine Hexadezimalzahl darstellt) und durch die Unicode-Zeichen \u00xx und \uxxxx ersetzt. unescape( ) wurde zwar in der ersten Version von ECMAScript standardisiert, aber seither wieder verworfen und aus dem ECMAScript v3-Standard herausgenommen. Implementierungen von ECMAScript dürften diese Funktion zwar normalerweise noch unterstützen, aber sie müssen es nicht mehr. Sie sollten decodeURI( ) und decodeURIComponent( ) anstelle von unescape( ) verwenden. Einzelheiten und ein Beispiel finden Sie unter escape( ).

Siehe auch decodeURI( ), decodeURIComponent( ), escape( ), String

URIError Wird von Methoden zum Codieren und Decodieren von URIs ausgelöst

ECMAScript v3 Object ➝ Error ➝ URIError

Konstruktor new URIError( ) new URIError(meldung)

Argumente meldung

Eine optionale Fehlermeldung, die Einzelheiten über die Exception verrät. Wenn dieses Argument angegeben ist, dient es als Wert der message-Eigenschaft des URIError-Objekts. Rückgabewert Ein neu erzeugtes URIError-Objekt. Wenn das Argument meldung angegeben ist, wird es vom Error-Objekt als Wert der message-Eigenschaft verwendet; andernfalls erhält diese Eigenschaft einen implementierungsspezifischen Standard-String als Wert. Wenn der Konstruktor URIError( ) als Funktion ohne den Operator new aufgerufen wird, verhält er sich genau wie bei einem Aufruf mit dem Operator new.

776 | Referenz für den Sprachkern von JavaScript

491-0.book Seite 777 Mittwoch, 4. April 2007 9:55 09

e-bol.net

URIError

Eigenschaften message

Eine Fehlermeldung, die Einzelheiten über die Exception verrät. Diese Eigenschaft speichert den String, der an den Konstruktor übergeben wurde, oder einen implementierungsspezifischen Standard-String. Einzelheiten finden Sie unter Error.message. name

Ein String, der den Exception-Typ angibt. Alle URIError-Objekte erben für diese Eigenschaft den Wert »URIError«.

Beschreibung

Siehe auch Error, Error.message, Error.name

Referenz für den Sprachkern von JavaScript |

777

Referenz für den JavaScriptSprachkern

Eine Instanz der Klasse URIError wird von den Methoden decodeURI( ) und decodeURI Component( ) ausgelöst, wenn der angegebene String unzulässige hexadezimale Escape-Symbole enthält. Sie kann auch von encodeURI( ) und encodeURIComponent( ) ausgelöst werden, wenn der angegebene String unzulässige Unicode-Surrogatpaare enthält. Einzelheiten über das Auslösen und Abfangen von Exceptions finden Sie unter Error.

491-0.book Seite 778 Mittwoch, 4. April 2007 9:55 09

e-bol.net

491-0.book Seite 779 Mittwoch, 4. April 2007 9:55 09

e-bol.net

TEIL IV IV.

Referenz für clientseitiges JavaScript

Dieser Teil des Buchs ist eine vollständige Referenz der Objekte, Eigenschaften, Funktionen, Methoden und Event-Handler von clientseitigem JavaScript. Hinweise für die Benutzung dieser Referenz erhalten Sie im Beispiel-Referenzeintrag am Anfang von Teil III dieses Buchs. Die in diesem Teil dokumentierten Klassen und Objekte beinhalten: Anchor

ExternalInterface

Applet

FlashPlayer

ProcessingInstruction

Attr

Form

Range

Canvas

Frame

RangeException

CanvasGradient

History

Screen

CanvasPattern

HTMLCollection

Select

CanvasRenderingContext2D

HTMLDocument

Table

CDATASection

HTMLElement

TableCell

CharacterData

IFrame

TableRow

Comment

Image

TableSection

CSS2Properties

Input

Text

CSSRule

JSObject

Textarea

CSSStyleSheet

KeyEvent

UIEvent

Document

Link

Window

DocumentFragment

Location

XMLHttpRequest

DocumentType

MimeType

XMLSerializer

DOMException

MouseEvent

XPathExpression

DOMImplementation

Navigator

XPathResult

DOMParser

Node

XSLTProcessor

Element

NodeList

Event

Option

Plugin

491-0.book Seite 780 Mittwoch, 4. April 2007 9:55 09

e-bol.net

491-0.book Seite 781 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Referenz für clientseitiges JavaScript

Dieser Teil des Buchs ist eine Referenz, die die im clientseitigen JavaScript definierten Klassen, Methoden, Eigenschaften und Event-Handler dokumentiert. Diese Einleitung und die am Anfang von Teil III stehende Beispiel-Referenzseite erklären die Benutzung dieser Referenzdokumentation und helfen Ihnen dabei, sie voll auszuschöpfen. Wenn Sie sich die Zeit nehmen, dieses Material sorgfältig zu lesen, können Sie die benötigten Informationen leichter finden und besser einsetzen. Dieser Referenzteil ist alphabetisch aufgebaut. Die Referenzeinträge zu Klassenmethoden und -eigenschaften werden alphabetisch nach deren vollem Namen aufgeführt, der auch die Namen der Klassen einschließt, in denen sie definiert sind. Wenn Sie z.B. die submit( )-Methode der Klasse Form nachschlagen möchten, schauen Sie nicht unter »submit«, sondern unter »Form.submit« nach. Die meisten JavaScript-Eigenschaften auf der Clientseite haben keine eigenen Referenzeinträge (alle Methoden und Event-Handler haben aber einen eigenen Eintrag). Einfache Eigenschaften werden stattdessen im Referenzeintrag der Klasse, die sie definiert, vollständig dokumentiert. Die images[]-Eigenschaft der Klasse HTMLDocument können Sie z.B. im Referenzeintrag zu HTMLDocument nachschlagen. Nicht-triviale Eigenschaften, die erklärungsbedürftig sind, haben allerdings eigene Referenzeinträge. Im Referenzeintrag zu der Klasse oder dem Interface, in dem solche Eigenschaften definiert sind, finden Sie dann einen entsprechenden Querverweis. Wenn Sie beispielsweise die cookie-Eigenschaft in der HTMLDocument-Referenzseite nachschlagen, finden Sie eine Kurzbeschreibung der Eigenschaft und unter HTMLDocument.cookie einen Verweis auf weitere Informationen. JavaScript auf der Clientseite hat diverse globale Eigenschaften und Funktionen, wie z.B. window, history und alert( ). In clientseitigem JavaScript dient ein Window-Objekt als

globales Objekt, und die »globalen« Eigenschaften und Funktionen von clientseitigem JavaScript sind eigentlich Eigenschaften der Klasse Window. Deshalb sind globale Eigenschaften und Funktionen im Window-Referenzeintrag dokumentiert oder unter Namen wie z.B. Window.alert( ).

|

781

491-0.book Seite 782 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Anchor

Haben Sie erst den gesuchten Referenzeintrag gefunden, so dürfte das Auffinden der benötigten Informationen keine Schwierigkeiten mehr bereiten. Doch Sie können den Referenzteil noch besser ausnutzen, wenn Sie wissen, wie die Einträge geschrieben und organisiert sind. Teil III beginnt mit einem Beispiel-Referenzeintrag unter dem Titel »Beispiel-Referenzeintrag«. Dieser Eintrag erklärt die Struktur aller Referenzeinträge und zeigt, wie Sie in ihnen die gesuchten Informationen finden.

Anchor

DOM Level 0

Das Ziel eines Hypertext-Links

Node ➝ Element ➝ HTMLElement ➝ Anchor

Eigenschaften String name

Enthält den Namen eines Anchor-Objekts. Der Wert dieser Eigenschaft wird vom Attribut name des Tags gesetzt.

Methoden focus( )

Scrollt das Dokument so, dass der Ort des Ankers sichtbar wird.

HTML-Syntax Ein Anchor-Objekt wird von jedem normalen HTML-Tag erzeugt, das ein name-Attribut enthält: ...

// Über diesen Namen können sich Links auf diesen Anker beziehen

Beschreibung Ein Anker ist eine benannte Stelle in einem HTML-Dokument. Anker werden mit einem Tag erzeugt, für das ein name-Attribut angegeben ist. Das Document-Objekt hat eine ArrayEigenschaft namens anchors[], die für jeden Anker im Dokument ein Anchor-Objekt enthält. Anchor-Objekte können in diesem Array über Index oder Namen referenziert werden. Der Browser zeigt den Ort des Ankers an, wenn Sie die hash-Eigenschaft des Location-Objekts auf ein #-Zeichen setzen, dem der Name des Ankers folgt. Alternativ können Sie einfach die focus( )-Methode des Anchor-Objekts selbst aufrufen. Mit demselben -Tag, mit dem Sie Anker erzeugen, legen Sie auch Hypertext-Links an. Zwar werden im Sprachgebrauch von HTML auch Hypertext-Links oft als Anker bezeichnet, aber in JavaScript werden sie nicht durch das Anchor-, sondern durch das Link-Objekt dargestellt.

Beispiel // Scrolle das Dokument so, dass der Anker namens "_bottom_" sichtbar ist document.anchors['_bottom_'].focus( );

782 | Referenz für clientseitiges JavaScript

491-0.book Seite 783 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Anchor.focus( )

Siehe auch Document, Link, Location

Anchor.focus( )

DOM Level 0

Scrolle, um den Ort des Anchors sichtbar zu machen

Überblick void focus( );

Beschreibung Diese Methode scrollt das Dokument so, dass die Lokation des Anchor-Objekts sichtbar wird.

Applet

DOM Level 0 Referenz für clientseitiges JavaScript

Ein in eine Webseite eingebettetes Applet

Überblick document.applets[i] document.appletName

Eigenschaften Das Applet-Objekt hat Eigenschaften, die die HTML-Attribute des -Tags widerspiegeln (Details siehe HTMLElement). Es hat außerdem Eigenschaften, die den öffentlichen Feldern des von ihm repräsentierten Java-Applets entsprechen.

Methoden Die Methoden eines Applet-Objekts entsprechen den öffentlichen Methoden des dazugehörigen Java-Applets.

Beschreibung Das Applet-Objekt stellt ein Java-Applet dar, das in ein HTML-Dokument eingebettet ist. Sie können sich Applet-Objekte eines Dokuments über die applets[]-Collection des DocumentObjekts beschaffen. Die Eigenschaften des Applet-Objekts entsprechen den öffentlichen Feldern und seine Methoden den öffentlichen Methoden des Applets. Denken Sie daran, dass Java eine stark typisierte Sprache ist. Daher muss jedes Feld eines Applets mit einem konkreten Datentyp deklariert werden. Wenn Sie seinen Wert auf einen anderen Typ setzen, wird ein Laufzeitfehler ausgelöst. Dasselbe trifft auf Appletmethoden zu: Jedes Argument hat einen spezifischen Typ, und Argumente können, anders als in JavaScript, nicht weggelassen werden. Eine genaue Beschreibung finden Sie in Kapitel 23.

Referenz für clientseitiges JavaScript |

783

491-0.book Seite 784 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Attr

Siehe auch JSObject; JavaObject in Teil III; Kapitel 12, Kapitel 23

Attr Ein Attribut eines Dokumentelements

DOM Level 1 Core Node ➝ Attr

Eigenschaften readonly String name

Der Name des Attributs. readonly Element ownerElement [DOM Level 2]

Das Element-Objekt, das dieses Attribut enthält, oder null, wenn das Attr-Objekt gegenwärtig nicht mit einem Element verbunden ist. readonly boolean specified true, wenn das Attribut explizit im Dokumentquelltext angegeben oder durch ein Skript eingestellt wurde. false, wenn das Attribut zwar nicht explizit angegeben wurde, aber in

der DTD des Dokuments ein Voreinstellungswert festgelegt wurde. String value

Der Attributwert. Wenn diese Eigenschaft gelesen wird, wird der Attributwert als String zurückgegeben. Wenn Sie diese Eigenschaft als String einstellen, erzeugt sie automatisch einen Text-Knoten mit demselben Textinhalt und macht ihn zum einzigen Kind des AttrObjekts.

Beschreibung Ein Attr-Objekt repräsentiert ein Attribut eines Element-Knotens. Attr-Objekte sind mit Element-Knoten assoziiert, gehören aber nicht unmittelbar zum Dokumentenbaum (und haben eine parentNode-Eigenschaft mit dem Wert null). Sie können ein Attr-Objekt entweder über die attributes-Eigenschaft des Node-Interfaces erhalten oder, indem Sie die getAttributeNode( )- oder getAttributeNodeNS( )-Methoden des Element-Interfaces aufrufen. Der Wert eines Attributs wird durch die Kindknoten eines Attr-Nodes dargestellt. In HTMLDokumenten hat ein Attr-Knoten immer nur ein Textnode-Kind, wobei die value-Eigenschaft eine Abkürzung zum Lesen und Schreiben des Wertes dieses Kindknotens liefert. Die XML-Grammatik erlaubt in XML-Dokumenten Attribute, die aus Textknoten und EntityReference-Knoten bestehen. Deshalb kann ein Attributwert durch einen String nicht vollständig dargestellt werden. In der Praxis erweitern Webbrowser allerdings alle beliebigen Entity-Referenzen zu XML-Attributwerten, ohne dabei das EntityReference-Interface zu implementieren (das in diesem Buch nicht dokumentiert wird). Folglich wird in clientseitigem JavaScript zum Lesen und Schreiben von Attributwerten lediglich die value-Eigenschaft benötigt. Da Attributwerte vollständig durch Strings dargestellt werden können, ist es normalerweise nicht notwendig, die Attr-Schnittstelle zu verwenden. In den meisten Fällen ist die Arbeit mit Attributen am einfachsten, wenn Sie die Methoden Element.getAttribute( ) und Element. setAttribute( ) nutzen. Diese Methoden verwenden für die Attributwerte Strings und vermeiden den Einsatz von Attr-Knoten.

784 | Referenz für clientseitiges JavaScript

491-0.book Seite 785 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Button

Siehe auch Element

Button Siehe Input

Canvas Ein HTML-Element zum skriptgesteuerten Zeichnen

Firefox 1.5, Safari 1.3, Opera 9 Node ➝ Element ➝ HTMLElement ➝ Canvas

Eigenschaften String hoehe

String breite

Die Canvasbreite. Wie bei einem Bild kann die Höhe als ein ganzzahliger Pixelwert oder in Prozent der Fensterbreite angegeben werden. Bei der Änderung dieses Werts wird eine ggf. bereits auf dem Canvas befindliche Zeichnung gelöscht. Der Standardwert ist 300.

Methoden getContext( )

Gibt ein CanvasRenderingContext2D-Objekt zurück, mit den auf den Canvas gezeichnet werden kann. Sie müssen den String »2d« an diese Methode übergeben, um zweidimensional zu zeichnen.

Beschreibung Das Canvas-Objekt stellt ein HTML-Canvas-Element dar. Es hat kein eigenes Verhalten, sondern definiert eine API, die geskriptete Zeichenvorgänge auf der Clientseite unterstützt. Sie können die breite und hoehe direkt am Objekt eingeben, aber die meisten anderen Funktionalitäten werden über das CanvasRenderingContext2D-Objekt festgelegt. Das Objekt erhalten Sie, indem Sie die getContext( )-Methode des Canvas-Objekts aufrufen und den Textstring »2d« als einziges Argument übergeben. Das -Tag wurde mit Safari 1.3 eingeführt und wurde, als dieses Buch geschrieben wurde, auch von Firefox 1.5 und Opera 9 unterstützt. Das -Tag und seine API lassen sich in IE mit dem ExplorerCanvas Open-Source-Projekt unter http://excanvas.sourceforge.net/ simulieren.

Siehe auch CanvasRenderingContext2D; Kapitel 22

Referenz für clientseitiges JavaScript |

785

Referenz für clientseitiges JavaScript

Die Höhe des Canvas. Wie bei einem Bild kann die Höhe als ein ganzzahliger Pixelwert oder in Prozent der Fensterhöhe angegeben werden. Bei der Änderung dieses Werts wird eine ggf. bereits auf dem Canvas befindliche Zeichnung gelöscht. Der Standardwert ist 300.

491-0.book Seite 786 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Canvas.getContext( )

Canvas.getContext( ) Liefert einen Context zum Schreiben auf dem Canvas zurück

Überblick CanvasRenderingContext2D getContext(String contextID)

Argumente contextID

Dieses Argument gibt die Art der Zeichnung an, die Sie auf dem Canvas durchführen wollen. Zurzeit ist »2d« der einzig gültige Wert. Er legt zweidimensionales Zeichnen fest und veranlasst diese Methode, ein Context-Objekt zurückzugeben, das eine 2-D-Zeichnungs-API exportiert. Rückgabewert Ein CanvasRenderingContext2D-Objekt, mit dem Sie im Canvas-Element zeichnen können.

Beschreibung Gibt einen Kontext aus, der den zum Zeichnen zu benutzenden Kontexttyp darstellt. Die Absicht ist, für verschiedene Zeichnungstypen (2-D, 3-D) unterschiedliche Kontexte verfügbar zu machen. Zurzeit wird lediglich der »2d«-Typ unterstützt. Er liefert ein CanvasRenderingContext2D-Objekt aus, das die meisten von einem Canvas verwendeten Methoden implementiert.

Siehe auch CanvasRenderingContext2D

CanvasGradient Ein Farbgradient, der auf einem Canvas verwendet wird

Firefox 1.5, Safari 1.3, Opera 9 Object ➝ CanvasGradient

Methoden addColorStop( )

Gibt eine Farbe und Position für den Gradienten an.

Beschreibung Ein CanvasGradient-Objekt stellt einen Farbgradienten dar, der sowohl den strokeStyle- als auch den fillStyle-Eigenschaften eines CanvasRenderingContext2D-Objektes zugewiesen werden kann. Sowohl die createLinearGradient( )- als auch die createRadialGradient( )Methoden von CanvasRenderingContext2D geben CanvasGradient-Objekte zurück. Nach der Erstellung eines CanvasGradient-Objektes verwenden Sie addColorStop( ), um festzulegen, welche Farben an welcher Position im Gradienten erscheinen sollen. Zwischen den von Ihnen festgelegten Positionen werden die Farben interpoliert, um einen fließenden Gradienten oder Farbübergang zu erreichen. Am Start- und Endpunkt des Gradienten werden automatisch transparente schwarze Stopps erstellt.

786 | Referenz für clientseitiges JavaScript

491-0.book Seite 787 Mittwoch, 4. April 2007 9:55 09

e-bol.net

CanvasGradient.addColorStop( )

Siehe auch CanvasRenderingContext2D.createLinearGradient( ) CanvasRenderingContext2D.createRadialGradient( )

CanvasGradient.addColorStop( ) Hinzufügen einer Farbänderung zum Gradienten

Überblick void addColorStop(float offset, String color)

Argumente offset

Ein Gleitkommazahlwert im Bereich zwischen 0,0 und 1,0, der einen Bruchteil zwischen den Start- und Endpunkten des Gradienten darstellt. Ein Offset von 0 entspricht dem Startpunkt und ein Offset von 1 dem Endpunkt. Gibt die Farbe, die am festgelegten Offset angezeigt werden soll, als CSS-Farbstring an. Farben an anderen Punkten entlang des Gradienten werden auf der Basis dieses und weiterer Farbstützpunkte (Stops) interpoliert.

Beschreibung addColorStop( ) stellt den Mechanismus zur Beschreibung von Farbänderungen in einem Gradi-

enten zur Verfügung. Diese Methode kann ein- oder mehrmals aufgerufen werden, um die Farbe an bestimmten Prozentualstellen zwischen dem Start- und Endpunkt des Gradienten zu ändern. Wenn diese Methode an einem Gradienten nie aufgerufen wird, ist der Gradient transparent. Um einen sichtbaren Farbverlauf zu erhalten, muss mindestens ein Farbstützpunkt (Stop) festgelegt werden.

CanvasPattern Ein auf einem Bild basierendes Muster zur Verwendung auf einem Canvas

Firefox 1.5, Safari 1.3, Opera 9 Object ➝ CanvasPattern

Beschreibung Ein CanvasPattern-Objekt wird von der createPattern( )-Methode eines CanvasRenderingContext2D-Objekts ausgegeben. Ein CanvasPattern-Objekt kann als Wert der strokeStyle- und fillStyle-Eigenschaften eines CanvasRenderingContext2D-Objekts verwendet werden. Ein CanvasPattern-Objekt hat keine eigenen Eigenschaften oder Methoden. Einzelheiten zum Erstellen dieses Objekts finden Sie unter CanvasRenderingContext2D.createPattern( ).

Referenz für clientseitiges JavaScript |

787

Referenz für clientseitiges JavaScript

color

491-0.book Seite 788 Mittwoch, 4. April 2007 9:55 09

e-bol.net

CanvasRenderingContext2D

Siehe auch CanvasRenderingContext2D.createPattern( )

CanvasRenderingContext2D Das Objekt wird zum Zeichnen auf einem Canvas verwendet

Firefox 1.5, Safari 1.3, Opera 9 Object ➝ CanvasRenderingContext2D

Eigenschaften readonly Canvas canvas

Das Canvas-Element, auf das dieser Kontext zeichnen wird. Object fillStyle

Die Farbe, das Muster oder der Gradient, die/das/der derzeit zum Ausfüllen von Pfaden verwendet wird. Diese Eigenschaft kann auf einen String, ein CanvasGradient- oder ein CanvasPattern-Objekt gesetzt werden. Als String wird sie als CSS-Farbwert geparst und für massive Farbfüllungen verwendet. Als CanvasGradient- oder CanvasPattern-Objekt werden Farbfüllungen mit Hilfe des angegebenen Gradienten oder Musters ausgefüllt. Siehe CanvasRenderingContext2D.createLinearGradient( ), CanvasRenderingContext2D.createRadialGradient( ) und CanvasRenderingContext2D.createPattern( ). float globalAlpha

Gibt die Deckkraft des auf den Canvas gezeichneten Inhalts an. Der Wertebereich liegt zwischen 0,0 (vollständig transparent) und 1,0 (keine zusätzliche Transparenz). Der Standardwert dieser Eigenschaft ist 1,0. String globalCompositeOperation

Gibt an, wie gerade gezeichnete Farben mit bereits auf dem Canvas vorhandenen Farben kombiniert werden. Mögliche Werte finden Sie unter dem individuellen Eintrag für diese Eigenschaft. String lineCap

Gibt an, wie die Linienenden wiedergegeben werden. Gültige Werte sind »butt« (stumpf), »round« (rund) und »square« (eckig). Der Defaultwert ist »butt«. Weitere Einzelheiten zu dieser Eigenschaft finden Sie in ihrem individuellen Referenzeintrag. String lineJoin

Gibt an, wie zwei Linien zusammengefügt werden. Gültige Werte sind »round« (rund), »bevel« (schräg) und »miter« (auf Gehrung). Der Defaultwert ist »miter«. Weitere Einzelheiten zu dieser Eigenschaft finden Sie in ihrem individuellen Referenzeintrag. float lineWidth

Gibt die Linienbreite für Strichfunktionen (Linienzeichnungen) an. Die Standardeinstellung ist 1,0, und die Eigenschaft muss größer als 0,0 sein. Breite Linien werden über dem Pfad zentriert, sodass jeweils die halbe Linienbreite links und rechts der Mitte liegt. float miterLimit Ist die lineJoin-Eigenschaft »miter«, dann gibt diese Eigenschaft das maximale Verhältnis

zwischen Gehrungslänge zu Linienbreite an. Weitere Einzelheiten zu dieser Eigenschaft finden Sie in ihrem individuellen Referenzeintrag.

788 | Referenz für clientseitiges JavaScript

491-0.book Seite 789 Mittwoch, 4. April 2007 9:55 09

e-bol.net

CanvasRenderingContext2D float shadowBlur

Gibt an, wie weit Schatten auslaufen sollen. Die Standardeinstellung ist 0. Safari unterstützt Schatten, Firefox 1.5 und Opera 9 tun das jedoch nicht. String shadowColor

Gibt die Schattenfarbe als CSS- oder Web-Style-String an und kann eine Alpha-Komponente für die Transparenz enthalten. Die Standardeinstellung ist »black«. Safari unterstützt Schatten, Firefox 1.5 und Opera 9 tun das jedoch nicht. float shadowOffsetX, shadowOffsetY

Gibt den horizontalen und vertikalen Offset der Schatten an. Größere Werte lassen das schattierte Objekt vor dem Hintergrund höher erscheinen. Die Standardeinstellung ist 0. Safari unterstützt Schatten, Firefox 1.5 und Opera 9 tun das jedoch nicht. Object strokeStyle

Methoden arc( )

Ein Kreisbogen wird mit Hilfe eines Mittelpunktes und eines Radius zum bestehenden Subpfad eines Canvas hinzugefügt. arcTo( )

Ein Kreisbogen wird mit Hilfe eines Tangentenpunktes und eines Radius zum bestehenden Subpfad hinzugefügt. beginPath( )

Beginnt einen neuen Pfad (oder mehrere Subpfade) in einem Canvas. bezierCurveTo( )

Fügt dem derzeitigen Subpfad eine dreidimensionale Bézierkurve hinzu. clearRect( )

Löscht die Pixel in einem rechteckigen Bereich auf einem Canvas. clip( )

Verwendet den derzeitigen Pfad als Clip-Region für nachfolgende Zeichnungsfunktionen. closePath( )

Schließt den derzeitigen Subpfad, sofern er geöffnet ist. createLinearGradient( )

Gibt ein CanvasGradient-Objekt aus, das einen linearen Farbgradienten darstellt. createPattern( )

Gibt ein CanvasPattern-Objekt aus, das ein gekacheltes Bild darstellt.

Referenz für clientseitiges JavaScript |

789

Referenz für clientseitiges JavaScript

Gibt die Farbe, das Muster oder den Gradienten an, die/das/der für die Striche (das Zeichnen) von Pfaden verwendet wird. Diese Eigenschaft kann ein String, ein CanvasGradient- oder ein CanvasPattern-Objekt sein. Ist sie ein String, wird sie als CSS-Farbwert interpretiert und die Linienzeichnung wird mit der resultierenden deckenden Farbe durchgeführt. Ist der Wert dieser Eigenschaft ein CanvasGradient- oder CanvasPattern-Objekt, wird die Linienzeichnung über den Gradienten oder das Muster durchgeführt. Siehe CanvasRenderingContext2D.createLinearGradient( ), CanvasRenderingContext2D.createRadialGradient( ) und CanvasRenderingContext2D.createPattern( ).

491-0.book Seite 790 Mittwoch, 4. April 2007 9:55 09

e-bol.net

CanvasRenderingContext2D createRadialGradient( )

Gibt ein CanvasGradient-Objekt aus, das einen radialen Farbgradienten widerspiegelt. drawImage( )

Zeichnet ein Bild. fill( )

Färbt oder füllt den Innenraum des derzeitigen Pfads mit der von der fillStyle-Eigenschaft vorgegebenen Farbe, dem Gradienten oder dem Muster. fillRect( )

Färbt oder füllt ein Rechteckt. lineTo( )

Fügt dem derzeitigen Subpfad ein gerades Liniensegment hinzu. moveTo( )

Legt die derzeitige Position fest und beginnt mit einem neuen Subpfad. quadraticCurveTo( )

Fügt dem derzeitigen Subpfad eine zweidimensionale Bézier-Kurve hinzu. rect( )

Fügt dem derzeitigen Pfad einen rechteckigen Subpfad hinzu. restore( )

Setzt den Canvas auf den zuletzt gespeicherten Grafikzustand zurück. rotate( )

Dreht den Canvas. save( )

Speichert die Eigenschaften, Clip-Region und Transformationsmatrix des CanvasRenderingContext2D-Objekts. scale( )

Skaliert das Benutzerkoordinatensystem des Canvas. stroke( )

Zeichnet oder strichelt eine Linie entlang des momentanen Pfads. Die Linie wird nach Vorgabe der Eigenschaften lineWidth, lineJoin, lineCap und strokeStyle sowie weiteren Eigenschaften gezeichnet. strokeRect( )

Zeichnet ein Rechteck (füllt es aber nicht). translate( )

Verschiebt das Benutzerkoordinatensystem des Canvas.

Beschreibung Das CanvasRenderingContext2D-Objekt stellt einen Satz von Grafikfunktionen zum Zeichnen auf einem Canvas zur Verfügung. Obwohl leider kein Text unterstützt wird, sind die vorhandenen Funktionen recht umfangreich. Sie können in mehrere Kategorien unterteilt werden. Rechtecke zeichnen Mit strokeRect( ) und fillRect( ) lassen sich Rechtecke zeichnen und füllen. Außerdem können Sie die von einem Rechteck definierte Fläche mit clearRect( ) löschen.

790 | Referenz für clientseitiges JavaScript

491-0.book Seite 791 Mittwoch, 4. April 2007 9:55 09

e-bol.net

CanvasRenderingContext2D

Bilder zeichnen In der Canvas-API werden Bilder mit Hilfe von Image-Objekten definiert, die für HTML-Elemente oder Offscreen-Bilder stehen, die mit dem Image( )-Konstruktor erzeugt wurden. (Einzelheiten entnehmen Sie bitte dem Referenzeintrag zu Image.) Ein Canvas-Objekt kann auch als Bildquelle verwendet werden. Mit der drawImage( )-Methode lässt sich ein Bild auf den Canvas zeichnen. In ihrer allgemeinsten Form ermöglicht sie das Skalieren jedes beliebigen, rechteckigen Bereichs des Orginalbildes und seine Wiedergabe auf dem Canvas. Pfade erstellen und wiedergeben Ein leistungsstarkes Feature des Canvas ist seine Fähigkeit, aus einfachen Zeichenfunktionen Formen aufzubauen und dann entweder ihre Umrisse zu zeichnen (mit stroke) oder ihre Fläche auszufüllen (mit fill). Die Gesamtheit der angefallenen Operationen wird als momentaner Pfad bezeichnet. Ein Canvas folgt nur einem einzigen momentanen Pfad.

Sie können mehrere unzusammenhängende Formen im momentanen Pfad erstellen, die dann mit den gleichen Zeichnungsparametern zusammen dargestellt werden. Um Formen voneinander zu trennen, verwenden Sie die moveTo( )-Methode; dadurch wird die derzeitige Position auf eine neue Stelle verschoben, ohne dass eine Verbindungslinie hinzugefügt wird. Durch diesen Vorgang erstellen Sie einen neuen Subpfad, die Canvas-Bezeichnung für eine Gruppe von Operationen, die miteinander verbunden sind. Wenn der Pfad Ihren Bedürfnissen entspricht, können Sie seine Umrisse mit stroke( ) zeichnen und/oder seine Fläche über fill( ) mit Farbe füllen. Die zur Verfügung stehenden Operationen sind lineTo( ) zum Zeichnen von geraden Linien, rect( ) zum Zeichnen von Rechtecken, arc( ) oder arcTo( ) zum Zeichnen von Kreissegmenten und bezierCurveTo( ) oder quadraticCurveTo( ) zum Zeichnen von Kurven. Zusätzlich zur Linienzeichnung und Farbfüllung ist der Pfad bei der Festlegung der für die Wiedergabe des Canvas verwendeten Clip-Region von Nutzen. Pixel innerhalb der Region werden angezeigt; außerhalb liegende Pixel nicht. Die Clip-Region ist kumulativ; beim Aufruf von clip( ) wird die Schnittmenge zwischen momentanem Pfad und momentaner Clip-Region gebildet, wodurch eine neue Region entsteht. Leider kann die Clip-Region nicht direkt auf den gesamten Canvas zurückgesetzt werden; dazu müssen Sie den gesamten Grafikstatus des Canvas speichern und auf den Anfangswert zurücksetzen (das wird weiter unten in diesem Eintrag beschrieben).

Referenz für clientseitiges JavaScript |

791

Referenz für clientseitiges JavaScript

Um mehrere Segmente zu einer Form zusammenzufügen, brauchen wir einen Verbindungspunkt zwischen den Zeichenoperationen. Für diesen Zweck verwaltet der Canvas eine momentane Position. Die Canvas-Zeichenoperationen verwenden diese implizit als ihren Startpunkt und ändern sie typischerweise auf die Position, die ihren jeweiligen Endpunkten entsprechen. Sie können sich das wie das Zeichnen mit einem Stift auf Papier vorstellen: Nach dem Zeichnen einer bestimmten Linie oder Kurve ist die momentane Position dort, wo der Stift nach der Operation zum Stehen kommt.

491-0.book Seite 792 Mittwoch, 4. April 2007 9:55 09

e-bol.net

CanvasRenderingContext2D

Wenn die Segmente in einem Subpfad keine geschlossene Form bilden, fügen die fill( )- und clip( )-Operationen implizit ein virtuelles Liniensegment zwischen dem Anfangs- und dem Endpunkt des Subpfads ein und schließen damit die Form. Sie können dieses Liniensegment auch explizit mit einem Aufruf von closePath( ) hinzufügen. Farben, Gradienten und Muster Beim Ausfüllen oder Zeichnen von Pfaden können Sie mit den Eigenschaften fillStyle und strokeStyle festlegen, wie die Linien oder gefüllten Flächen wiedergegeben werden. Beide Eigenschaften akzeptieren sowohl Farbstrings im CSS-Stil als auch CanvasGradient- und CanvasPatternObjekte, die Gradienten und Muster beschreiben. Um einen Gradienten zu erzeugen, verwenden Sie die Methoden createLinearGradient( ) oder createRadialGradient( ). Um ein Muster zu erzeugen, verwenden Sie createPattern( ). Um über die CSS-Notation eine Deckfarbe festzulegen, verwenden Sie einen String im Format »#RRGGBB«, wobei RR, GG und BB Hexadezimalzahlen sind, die die Rot-, Blau- und Grünkomponenten der Farbe als Hexadezimalwerte zwischen 00 und FF angeben. Beispielsweise ist »#FF0000« ein leuchtendes Rot. Um eine teilweise transparente Farbe zu erzeugen, verwenden Sie einen String im Format »rgba(R,G,B,A)«. Bei diesem Format geben R, G und B die Rot-, Grün- und Blaukomponenten der Farbe als dezimale Ganzzahlen zwischen 0 und 255 an, und A legt die Alphakomponente (Deckkraft) als Gleitkommazahl zwischen 0.0 (vollständig transparent) und 1.0 (vollständig deckend) fest. Beispielsweise ist »rgba(255,0,0,0.5)« ein halbtransparentes, leuchtendes Rot. Linienbreite, Linienabschlüsse und Linienverbindungen Canvas bietet mehrere Optionen für das Erscheinungsbild von Linien. Mit der Eigenschaft lineWidth legen Sie die Linienbreite fest, mit der Eigenschaft lineCap definieren Sie, wie die Endpunkte der Linien gezeichnet werden, und mit der Eigenschaft lineJoin regeln Sie das Zusammenfügen von Linien. Koordinatensystem und -transformationen Standardmäßig hat das Koordinatensystem eines Canvas seinen Ursprung bei (0,0) in der linken, oberen Ecke des Canvas. Die x-Werte erhöhen sich nach rechts, und die y-Werte erhöhen sich nach unten. Eine einzelne Einheit in diesem Koordinatenraum stellt normalerweise ein einzelnes Pixel dar. Sie können jedoch das Koordinatensystem mit transform so transformieren, dass beliebige von Ihnen festgelegte Koordinaten oder Längen in Zeichenoperationen verschoben, skaliert oder gedreht werden. Das geht mit den Methoden translate( ), scale( ) und rotate( ), die die Transformationsmatrix des Canvas beeinflussen. Da das Koordinatensystem also transformiert werden kann, werden Koordinaten, die von Ihnen an Methoden wie z.B. lineTo( ) übergeben werden, nicht immer in Pixeln gemessen. Aus diesem Grund verwendet die Canvas-API Gleitkommazahlen statt ganzer Zahlen. Transformationen werden in umgekehrter Reihenfolge zu ihrer Festlegung abgearbeitet. Beispielsweise wird bei einem Aufruf von scale( ), dem ein Aufruf von translate( ) folgt, das Koordinatensystem zuerst verschoben und dann skaliert.

792 | Referenz für clientseitiges JavaScript

491-0.book Seite 793 Mittwoch, 4. April 2007 9:55 09

e-bol.net

CanvasRenderingContext2D.arc( )

Compositing Meistens werden Formen übereinander gezeichnet, wobei die neue Form die vorhergehende, darunter gezeichnete Form überdeckt. Das ist das Defaultverhalten eines Canvas. Sie können jedoch viele interessante Operationen durchführen, indem Sie für die globalCompositeOperation-Eigenschaft unterschiedliche Werte festlegen. Diese reichen von Exklusiv-ODEROperationen bis zur Aufhellung oder Verdunkelung von geformten Regionen; eine Liste aller Optionen finden Sie unter CanvasRenderingContext2D.globalCompositeOperation. Schatten Die Canvas-API enthält Eigenschaften, die jeder von Ihnen gezeichneten Form automatisch einen geworfenen Schatten hinzufügen. Als dieses Buch geschrieben wurde, war Safari allerdings der einzige Browser, der diese API implementiert hatte. Die Farbe des Schattens kann mit shadowColor festgelegt und seine Verschiebung mit shadowOffsetX und shadowOffsetY verändert werden. Wie weit der Schatten am Schattenrand ausfransen soll, kann mit shadowBlur festgelegt werden.

Alle Eigenschaften des CanvasRenderingContext2D-Objekts sind Bestandteil des gespeicherten Status (mit Ausnahme der canvas-Eigenschaft, die eine Konstate ist). Die Transformationsmatrix und die Clip-Region sind ebenfalls Teil des Status, der momentane Pfad und die momentane Position aber nicht.

Siehe auch Canvas

CanvasRenderingContext2D.arc( ) Ein Kreisbogen wird mit Hilfe eines Mittelpunktes und eines Radius zum bestehenden Subpfad eines Canvas hinzugefügt.

Überblick void arc(float x, float y, float radius, float startWinkel, endWinkel, boolean gegenUhrzeigersinn)

Argumente x, y

Die Koordinaten des Kreismittelpunktes, der den Kreisbogen beschreibt. radius

Der Radius des Kreises, der den Kreisbogen beschreibt.

Referenz für clientseitiges JavaScript |

793

Referenz für clientseitiges JavaScript

Den Grafikstatus speichern Mit den Methoden save( ) und restore( ) lässt sich der Status eines CanvasRenderingContext2D-Objekts speichern und zurücksetzen. save( ) schiebt den derzeitigen Status auf einen Stapelspeicher. restore( ) nimmt den zuletzt gespeicherten Status aus dem Stapelspeicher und setzt den momentanen Zeichnungsstatus auf Basis dieser gespeicherten Werte fest.

491-0.book Seite 794 Mittwoch, 4. April 2007 9:55 09

e-bol.net

CanvasRenderingContext2D.arcTo( ) startWinkel, endWinkel

Die Winkel, die die Start- und Endpunkte des Kreisbogens entlang des Kreises festlegen. Diese Winkel werden im Bogenmaß angegeben. Die 3-Uhr-Position entlang der positiven X-Achse entspricht einem Winkel von 0, und die Winkel vergrößern sich im Uhrzeigersinn. gegenUhrzeigersinn

Gibt an, ob der Kreisbogen gegen (true) oder im (false) Uhrzeigersinn auf dem Kreis durchlaufen wird.

Beschreibung Die ersten fünf Argumente dieser Methode geben einen Start- und einen Endpunkt auf einem Kreis an. Beim Aufruf dieser Methode wird eine gerade Linie zwischen dem momentanen Punkt und dem Startpunkt zum momentanen Subpfad hinzugefügt. Dann wird der Kreisbogen entlang des Kreises zwischen Start- und Endpunkt zum Subpfad hinzugefügt. Das letzte Argument gibt die Richtung an, in der der Kreis beim Verbinden der Start- und Endpunkte durchlaufen werden soll. Diese Methode belässt den momentanen Punkt auf dem Endpunkt des Kreisbogens.

Siehe auch CanvasRenderingContext2D.arcTo( ) CanvasRenderingContext2D.beginPath( ) CanvasRenderingContext2D.closePath( )

CanvasRenderingContext2D.arcTo( ) Fügt dem momentanen Subpfad einen Kreisbogen unter Verwendung von Tangentenpunkten und eines Radius hinzu

Überblick void arcTo(float x1, float y1, float x2, float y2, float radius)

Argumente x1, y1

Die Koordinaten des Punktes P1. x2, y2

Die Koordinaten des Punktes P2. radius

Der Radius des Kreises, der den Kreisbogen definiert.

Beschreibung Diese Methode fügt dem momentanen Subpfad einen Kreisbogen hinzu, beschreibt diesen Kreisbogen aber ganz anders als die arc( )-Methode. Der Kreisbogen, der zum Pfad hinzugefügt wird, ist ein Kreissegment mit dem angegebenen radius. Der Kreisbogen hat einen Punkt,

794 | Referenz für clientseitiges JavaScript

491-0.book Seite 795 Mittwoch, 4. April 2007 9:55 09

e-bol.net

CanvasRenderingContext2D.beginPath( )

der die Linie zwischen der momentanen Position und P1 tangiert, und einen Punkt, der die Linie von P1 nach P2 tangiert. Der Kreisbogen beginnt und endet an diesen zwei Tangentenpunkten und wird in der Richtung gezeichnet, die diese zwei Punkte mit dem kürzesten Kreisbogen verbindet. Bei vielen Anwendungen beginnt der Kreisbogen an der momentanen Position und endet bei P2, was aber nicht immer der Fall ist. Wenn die derzeitige Position nicht mit dem Startpunkt des Kreisbogens übereinstimmt, fügt diese Methode eine gerade Linie zwischen der momentanen Position und der Startposition des Kreisbogens ein. Diese Methode belässt die momentane Position auf dem Endpunkt des Kreisbogens.

Beispiel Mit dem folgenden Code können Sie die rechte, obere Ecke eines Rechtecks zeichnen und ihr eine abgerundete Ecke geben: // // // //

oben links beginnen horizontale Linie bis zum Beginn der abgerundeten Ecke abgerundete Ecke senkrechte Linie nach rechts unten

Fehler Firefox 1.5 unterstützt diese Methode nicht.

Siehe auch CanvasRenderingContext2D.arc( )

CanvasRenderingContext2D.beginPath( ) Beginnt eine neue Gruppe von Subpfaden auf einem Canvas

Überblick void beginPath( )

Beschreibung beginPath( ) löscht alle bisher definierten Pfade und beginnt einen neuen Pfad. Der momentane Punkt wird auf (0,0) gesetzt.

Beim ersten Erstellen des Kontextes für einen Canvas wird automatisch beginPath( ) aufgerufen.

Siehe auch CanvasRenderingContext2D.closePath( ) CanvasRenderingContext2D.fill( ) CanvasRenderingContext2D.stroke( )

Kapitel 22

Referenz für clientseitiges JavaScript |

795

Referenz für clientseitiges JavaScript

c.moveTo(10, 10); c.lineTo(90, 10) c.arcTo(100, 10, 100, 20, 10); c.lineTo(100, 100);

491-0.book Seite 796 Mittwoch, 4. April 2007 9:55 09

e-bol.net

CanvasRenderingContext2D.bezierCurveTo( )

CanvasRenderingContext2D.bezierCurveTo( ) Fügt dem momentanen Subpfad eine dreidimensionale Bézierkurve hinzu

Überblick void bezierCurveTo(float cpX1, float cpY1, float cpX2, float cpY2, float x, float y)

Argumente cpX1, cpX2

Die Koordinaten des Kontrollpunkts, der mit dem Startpunkt der Kurve assoziiert wird (die momentane Position). cpX2, cpY2

Die Koordinaten des Kontrollpunkts, der mit dem Endpunkt der Kurve assoziiert wird. x, y

Die Koordinaten des Kurvenendpunktes.

Beschreibung bezierCurveTo( ) fügt dem momentanen Subpfad eines Canvas eine kubische Bézierkurve

hinzu. Der Startpunkt der Kurve ist der momentane Punkt auf dem Canvas, und der Endpunkt ist (x,y). Die zwei Bézier-Kontrollpunkte (cpX1, cpY1) und (cpX2, cpY2) bestimmen die Kurvenform. Nach dem Ausführen der Methode liegt die momentane Position auf (x,y).

Siehe auch CanvasRenderingContext2D.quadraticCurveTo( )

CanvasRenderingContext2D.clearRect( ) Löschen eines rechteckigen Bereichs auf dem Canvas

Überblick void clearRect(float x, float y, float breite, float hoehe)

Argumente x, y

Die Koordinaten der linken oberen Ecke des Rechtecks. breite, hoehe

Die Abmessungen des Rechtecks.

Beschreibung clearRect( ) löscht das angegebene Rechteck durch Füllen mit einer transparenten Farbe.

796 | Referenz für clientseitiges JavaScript

491-0.book Seite 797 Mittwoch, 4. April 2007 9:55 09

e-bol.net

CanvasRenderingContext2D.clip( )

CanvasRenderingContext2D.clip( ) Legt den Clippingpfad des Canvas fest

Überblick void clip( )

Beschreibung Diese Methode begrenzt den momentanen Pfad mit Hilfe des momentanen Clippingpfades und verwendet dann den begrenzten Pfad als den neuen Clippingpfad. Beachten Sie, dass es keine Möglichkeit gibt, den Clippingpfad zu vergrößern. Falls Sie einen temporären Clippingpfad brauchen, sollten Sie zuerst save( ) aufrufen, um dann mit restore( ) den ursprünglichen Clippingpfad wiederherstellen zu können. Der Default-Clippingpfad für einen Canvas ist das Canvas-Rechteck selbst. Diese Methode setzt den momentanen Pfad auf einen leeren Pfad zurück. Referenz für clientseitiges JavaScript

CanvasRenderingContext2D.closePath( ) Schließt einen offenen Subpfad

Überblick void closePath( )

Beschreibung Wenn der momentane Subpfad des Canvas offen ist, so schließt ihn die Methode closePath( ), indem sie eine Linie einfügt, die den momentanen Punkt mit dem Startpunkt des Subpfades verbindet. Wenn der Subpfad bereits geschlossen ist, hat diese Methode keine Auswirkung. Nach dem Schließen eines Subpfades können ihm keine weiteren Linien oder Kurven hinzugefügt werden. Um den Pfad weiter zu vergrößern, müssen Sie durch Aufruf von moveTo( ) einen neuen Subpfad beginnen. Sie müssen closePath( ) nicht aufrufen, bevor Sie einen Pfad zeichnen oder füllen. Beim Füllen eines Pfads wird er implizit geschlossen (wie auch beim Aufruf von clip( )).

Siehe auch CanvasRenderingContext2D.beginPath( ) CanvasRenderingContext2D.moveTo( ) CanvasRenderingContext2D.stroke( ) CanvasRenderingContext2D.fill( )

Referenz für clientseitiges JavaScript |

797

491-0.book Seite 798 Mittwoch, 4. April 2007 9:55 09

e-bol.net

CanvasRenderingContext2D.createLinearGradient( )

CanvasRenderingContext2D.createLinearGradient( ) Einen linearen Farbgradienten erzeugen

Überblick CanvasGradient createLinearGradient(float xStart, float yStart, float xEnde, float yEnde)

Argumente xStart, yStart

Die Koordinaten des Gradientenanfangspunkts. xEnde, yEnde

Die Koordinaten des Gradientenendpunkts. Rückgabewert Ein CanvasGradient-Objekt, das einen linearen Farbgradienten darstellt.

Beschreibung Diese Methode erzeugt und gibt ein neues CanvasGradient-Objekt zurück, das die Farbe linear zwischen dem angegebenen Start- und Endpunkt interpoliert. Beachten Sie, dass diese Methode keine Farben für den Gradienten festlegt. Dazu verwenden Sie die addColorStop( )-Methode des zurückgegebenen Objekts. Um mit Hilfe eines Gradienten Linien zu zeichnen oder Flächen auszufüllen, weisen Sie der strokeStyle oder fillStyle-Eigenschaft ein CanvasGradient-Objekt zu.

Siehe auch CanvasGradient.addColorStop( ), CanvasRenderingContext2D.createRadialGradient( )

CanvasRenderingContext2D.createPattern( ) Erzeugt ein Muster aus gekachelten Bildern

Überblick CanvasPattern createPattern(Image bild, String wiederholStil)

Argumente bild

Das zu kachelnde Bild. Dieses Argument ist in der Regel ein Image-Objekt. Sie können aber auch ein Canvas-Element verwenden. wiederholStil

Gibt an, wie das Bild gekachelt wird. Mögliche Werte sind folgende: Wert

Bedeutung

repeat

Kachele das Bild in beide Richtungen. Das ist der Defaultwert.

repeat-x

Kachele das Bild nur in X-Richtung.

repeat-y

Kachele das Bild nur in Y-Richtung.

no-repeat

Kachele das Bild nicht; verwende es nur einmal.

798 | Referenz für clientseitiges JavaScript

491-0.book Seite 799 Mittwoch, 4. April 2007 9:55 09

e-bol.net

CanvasRenderingContext2D.createRadialGradient( )

Rückgabewert Ein CanvasPattern-Objekt, das das Muster darstellt.

Beschreibung Diese Methode erzeugt und gibt ein CanvasPattern-Objekt zurück, das das von einem gekachelten Bild definierte Muster repräsentiert. Um ein Muster zum Zeichnen von Linien oder zum Füllen von Flächen zu verwenden, setzen Sie ein CanvasPattern-Objekt als Wert für die strokeStyle oder fillStyle-Eigenschaft.

Fehler Firefox 1.5 unterstützt lediglich den "repeat"-Stil. Andere Stile werden ignoriert.

Siehe auch CanvasPattern

Referenz für clientseitiges JavaScript

CanvasRenderingContext2D.createRadialGradient( ) Erzeugt einen radialen Farbgradienten

Überblick CanvasGradient createRadialGradient(float xStart, float yStart, float radiusStart, float xEnde, float yEnde, float radiusEnde)

Argumente xStart, yStart

Die Koordinaten des Startkreismittelpunkts. radiusStart

Der Radius des Startkreises. xEnde, yEnde

Die Koordinaten des Endkreismittelpunkts. radiusEnde

Der Radius des Endkreises. Rückgabewert Ein CanvasGradient-Objekt, das einen radialen Farbgradienten widerspiegelt.

Beschreibung Diese Methode erzeugt und gibt ein neues CanvasGradient-Objekt zurück, das Farben zwischen den Umfängen der zwei angegebenen Kreise radial interpoliert. Beachten Sie, dass diese Methode keine Farben für den Gradienten festlegt. Dazu verwenden Sie die addColorStop( )-Methode des zurückgegebenen Objekts. Um mit Hilfe eines Gradienten Linien zu zeichnen oder Flächen auszufüllen, weisen Sie der strokeStyle oder fillStyle-Eigenschaft ein CanvasGradient-Objekt zu.

Referenz für clientseitiges JavaScript |

799

491-0.book Seite 800 Mittwoch, 4. April 2007 9:55 09

e-bol.net

CanvasRenderingContext2D.drawImage( )

Radialgradienten werden wiedergegeben, indem die Farbe bei Offset 0 für den Umfang des ersten Kreises verwendet wird, die Farbe bei Offset 1 für den zweiten Kreis und interpolierte Farbwerte (Rot, Grün, Blau und Alpha) für Kreise zwischen diesen beiden Kreisen.

Siehe auch CanvasGradient.addColorStop( ), CanvasRenderingContext2D.createLinearGradient( )

CanvasRenderingContext2D.drawImage( ) Zeichnet ein Bild

Überblick void drawImage(Image bild, float x, float y) void drawImage(Image bild, float x, float y, float breite, float hoehe) void drawImage(Image bild, integer sourceX, integer sourceY, integer sourceBreite, integer sourceHoehe, float destX, float destY, float destBreite, float destHoehe)

Argumente bild

Das zu zeichnende Bild. Dieses muss ein Image-Objekt sein, das ein -Tag repräsentiert, oder auch ein Offscreen-Bild oder ein Canvas-Objekt. x, y

Der Punkt, an dem die linke obere Ecke des Bildes gezeichnet wird. breite, hoehe

Die Größe, in der das Bild gezeichnet werden soll. Die Spezifikation dieser Argumente skaliert das Bild. sourceX, sourceY

Die linke obere Ecke der zu zeichnenden Bildregion. Diese ganzzahligen Argumente werden in Bildpixeln angegeben. sourceBreite, sourceHoehe

Die Abmessungen der zu zeichnenden Bildregion, angegeben in Bildpixeln. destX, destY

Die Canvas-Koordinaten, an denen die linke obere Ecke der Bildregion gezeichnet werden soll. destBreite, destHoehe

Die Canvas-Dimensionen, mit denen die Bildregion gezeichnet werden soll.

Beschreibung Bei dieser Methode gibt es drei Varianten. Bei der ersten Variante wird das gesamte Bild auf den Canvas kopiert: Die linke, obere Ecke wird auf den angegebenen Punkt gesetzt, und jeder

800 | Referenz für clientseitiges JavaScript

491-0.book Seite 801 Mittwoch, 4. April 2007 9:55 09

e-bol.net

CanvasRenderingContext2D.fill( )

Bildpixel wird auf eine Einheit im Canvas-Koordinatensystem abgebildet. Bei der zweiten Variante wird ebenfalls das gesamte Bild auf den Canvas kopiert, Sie können die gewünschte Breite und Höhe des Bildes jedoch in Canvas-Einheiten festlegen. Die dritte Variante ist ganz variabel: Mit ihr können Sie jede beliebige, rechteckige Bildregion festlegen und kopieren, wobei das Bild beliebig auf jeder Position im Canvas skaliert werden kann. Das an diese Methode übergebene Bild muss ein Image- oder Canvas-Objekt sein. Ein ImageObjekt kann ein -Tag im Dokument oder ein über den Image( )-Konstruktor erstelltes Offscreen-Bild repräsentieren.

Siehe auch Image

CanvasRenderingContext2D.fill( ) Füllt den Pfad Referenz für clientseitiges JavaScript

Überblick void fill( )

Beschreibung fill( ) füllt den momentanen Pfad mit der/dem von der fillStyle-Eigenschaft festgelegten Farbe bzw. Gradienten oder Muster. Jeder Subpfad des Pfades wird getrennt gefüllt. Alle nicht geschlossenen Subpfade werden so gefüllt, als wäre die closePath( )-Methode für sie aufgerufen worden. (Beachten Sie dabei, dass diese Subpfade dadurch aber nicht geschlossen werden.)

Über die sogenannte »non-zero winding rule« stellt der Canvas fest, welche Punkte innerhalb und welche außerhalb des Pfades liegen. Die Details dieser Regel sprengen den Umfang dieses Buches, sind aber normalerweise nur für komplizierte Pfade von Bedeutung, die sich selbst überkreuzen. Durch das Füllen eines Pfades wird dieser nicht gelöscht. Nach dem Aufruf von fill( ) können Sie stroke( ) aufrufen, ohne den Pfad neu zu definieren.

Siehe auch CanvasRenderingContext2D.fillRect( )

CanvasRenderingContext2D.fillRect( ) Füllt ein Rechteck

Überblick void fillRect(float x, float y, float breite, float hoehe)

Referenz für clientseitiges JavaScript |

801

491-0.book Seite 802 Mittwoch, 4. April 2007 9:55 09

e-bol.net

CanvasRenderingContext2D.globalCompositeOperation

Argumente x, y

Die Koordinaten der linken oberen Ecke eines Rechtecks. breite, hoehe

Die Abmessungen des Rechtecks.

Beschreibung fillRect( ) füllt das angegebene Rechteck mit der/dem von der fillStyle-Eigenschaft festgelegten Farbe bzw. Gradienten oder Muster.

Derzeitige Implementierungen von fillRect( ) löschen außerdem den Pfad, so als ob beginPath( ) aufgerufen worden wäre. Dieses überraschende Verhalten ist nicht unbedingt standardisiert, sodass Sie sich nicht darauf verlassen sollten.

Siehe auch CanvasRenderingContext2D.fill( ) CanvasRenderingContext2D.rect( ) CanvasRenderingContext2D.strokeRect( )

CanvasRenderingContext2D.globalCompositeOperation Legt fest, wie Farben auf dem Canvas kombiniert werden

Überblick String globalCompositeOperation

Beschreibung Diese Eigenschaft legt fest, wie Farben, die auf dem Canvas wiedergegeben werden, mit den bereits auf dem Canvas vorhandenen Farben kombiniert werden. Die möglichen Werte und ihre Bedeutungen werden in der unten stehenden Tabelle aufgeführt. Der Begriff Ursprung in diesen Werten bezieht sich auf die auf den Canvas zu zeichnenden Farben, und der Begriff Ziel bezieht sich auf die auf dem Canvas bereits vorhandenen Farben. Der Defaultwert ist »source-over«. Wert

Bedeutung

copy

Zeichnet nur die neue Form und löscht alles andere.

darker

Für die Überlappungsflächen der beiden Formen wird die Farbe durch Subtraktion der Farbwerte bestimmt.

destination-atop

Der bereits vorhandene Inhalt wird nur dort beibehalten, wo er mit der neuen Form überlappt. Die neue Form wird hinter dem Inhalt gezeichnet.

destination-in

Vorhandener Inhalt wird dort beibehalten, wo die neue Form mit dem vorhandenen Canvas-Inhalt überlappt . Alle anderen Bereiche werden transparent.

destination-out

Vorhandener Inhalt wird dort beibehalten, wo er nicht mit der neuen Form überlappt. Alle anderen Bereiche werden transparent.

802 | Referenz für clientseitiges JavaScript

491-0.book Seite 803 Mittwoch, 4. April 2007 9:55 09

e-bol.net

CanvasRenderingContext2D.lineCap Wert

Bedeutung

destination-over

Die neue Form wird hinter vorhandenem Inhalt gezeichnet.

lighter

Wo beide Formen überlappen, wird die Farbe durch Addition der beiden Farbwerte bestimmt.

source-atop

Die neue Form wird nur dort gezeichnet, wo sie den vorhandenen Inhalt überdeckt.

source-in

Die neue Form wird nur dort gezeichnet, wo die neue Form mit dem vorhandenen Inhalt überlappt. Alle anderen Bereiche werden transparent.

source-out

Die neue Form wird dort gezeichnet, wo sie nicht mit bestehendem Inhalt überlappt.

source-over

Die neue Form wird über den bestehenden Inhalt gezeichnet. Das ist der Defaultwert.

xor

Formen werden an den Stellen transparent angezeigt, an denen beide überlappen. In anderen Bereichen werden sie normal gezeichnet.

Fehler Firefox 1.5 unterstützt die Werte »copy« und »darker« nicht. Referenz für clientseitiges JavaScript

CanvasRenderingContext2D.lineCap Gibt an, wie die Linienenden wiedergegeben werden.

Überblick String lineCap

Beschreibung Die lineCap-Eigenschaft gibt an, wie Linien enden sollen. Das ist nur beim Zeichnen von breiten Linien von Bedeutung. Die unten stehende Tabelle führt die zulässigen Werte für diese Eigenschaft auf. Der Standardwert ist »butt«. Wert

Bedeutung

butt

Dieser Defaultwert gibt an, dass die Linie am Ende nicht abgerundet wird. Der Linienabschluss ist gerade und rechtwinklig zur Linienrichtung. Die Linie wird nicht über ihren Endpunkt hinaus erweitert.

round

Dieser Wert legt fest, dass Linien mit einem Halbkreis abgerundet werden, dessen Durchmesser der Linienbreite entspricht und der um die halbe Linienbreite über das Linienende hinausragt.

square

Dieser Wert legt fest, dass Linien mit einem Rechteck enden sollen. Der Wert entspricht »butt«, aber die Linie wird um eine halbe Linienbreite erweitert.

Fehler Firefox 1.5 implementiert den Stil »butt« für Linienabschlüsse nicht richtig. Die »butt«-Linienenden werden wie »square«-Linienabschlüsse dargestellt.

Siehe auch CanvasRenderingContext2D.lineJoin

Referenz für clientseitiges JavaScript |

803

491-0.book Seite 804 Mittwoch, 4. April 2007 9:55 09

e-bol.net

CanvasRenderingContext2D.lineJoin

CanvasRenderingContext2D.lineJoin Legt fest, wie Eckpunkte wiedergeben werden

Überblick String lineJoin

Beschreibung Bei Pfaden, die Eckpunkte enthalten, an denen Liniensegmente und/oder Kurven zusammentreffen, gibt die Eigenschaft lineJoin an, wie diese Eckpunkte gezeichnet werden. Die Eigenschaft wirkt sich nur dann sichtbar aus, wenn breite Linien gezeichnet werden. Der Defaultwert der Eigenschaft ist »miter«; ist er gesetzt, werden die äußeren Kanten der beiden Liniensegmente so lange verlängert, bis sie aufeinandertreffen. Treffen die Linien spitzwinklig zusammen, können die Gehrungsverbindungen recht lang werden. Die Eigenschaft miterLimit legt eine obere Grenze für die Gehrungslänge fest. Wird diese Grenze erreicht, wird die Gehrung schräg abgeschnitten. Beim Wert »round« wird an die Außenkanten des Scheitelpunktes ein ausgefüllter Kreisbogen mit einem Durchmesser in der Linienbreite angefügt. Beim Wert »bevel« werden die Außenkanten der Eckpunkte mit Hilfe eines ausgefüllten Dreiecks verbunden.

Fehler Firefox 1.5 implementiert »bevel« falsch und zeigt eine runde Verbindung an. Außerdem werden Gehrungsverbindungen nicht richtig angezeigt, wenn sie in einer teilweise transparenten Farbe gezeichnet werden.

Siehe auch CanvasRenderingContext2D.lineCap, CanvasRenderingContext2D.miterLimit

CanvasRenderingContext2D.lineTo( ) Fügt dem momentanen Subpfad eine gerade Linie hinzu

Überblick void lineTo(float x, float y)

Argumente x, y

Die Koordinaten des Linienendpunkts.

804 | Referenz für clientseitiges JavaScript

491-0.book Seite 805 Mittwoch, 4. April 2007 9:55 09

e-bol.net

CanvasRenderingContext2D.miterLimit

Beschreibung lineTo( ) fügt dem momentanen Subpfad eine gerade Linie hinzu. Die Linie beginnt am momentanen Punkt und endet bei (x,y). Nach dem Ausführen der Methode liegt die momentane Position auf (x,y).

Siehe auch CanvasRenderingContext2D.beginPath( ), CanvasRenderingContext2D.moveTo( )

CanvasRenderingContext2D.miterLimit Verhältnis zwischen der maximalen Gehrungslänge und der Linienbreite

Überblick float miterLimit

Wenn breite Linien gezeichnet werden, die Eigenschaft lineJoin auf »miter« festgelegt ist und sich zwei Linien im spitzen Winkel treffen, kann die entstehende Gehrung recht lang sein. Zu lange Gehrungen sind optisch irritierend. Die Eigenschaft miterLimit legt eine obere Schranke für die Gehrungslänge fest. Die Eigenschaft gibt ein Verhältnis zwischen der Gehrungslänge und der Linienbreite an. Der Defaultwert ist 10, was bedeutet, dass die Gehrung nicht länger als die zehnfache Linienbreite sein soll. Erreicht eine Gehrung diese Länge, wird sie schräg abgeschnitten. Die Eigenschaft hat keine Auswirkung, wenn lineJoin auf »round« oder »bevel« gesetzt ist.

Fehler Firefox 1.5 implementiert diese Eigenschaft nicht richtig. Wenn eine Gehrungsverbindung die Grenze miterLimit überschreitet, werden die Linien rund statt per Gehrung verbunden.

Siehe auch CanvasRenderingContext2D.lineJoin

CanvasRenderingContext2D.moveTo( ) Legt die derzeitige Position fest und beginnt mit einem neuen Subpfad.

Überblick void moveTo(float x, float y)

Argumente x, y

Die Koordinaten des neuen momentanen Punkts.

Referenz für clientseitiges JavaScript |

805

Referenz für clientseitiges JavaScript

Beschreibung

491-0.book Seite 806 Mittwoch, 4. April 2007 9:55 09

e-bol.net

CanvasRenderingContext2D.quadraticCurveTo( )

Beschreibung moveTo( ) setzt die momentane Position auf (x,y) und erzeugt einen neuen Subpfad, dessen erster Punkt dieser Punkt ist. Falls ein vorhergehender Subpfad vorhanden war, der aus nur einem Punkt bestand, wird dieser Subpfad aus dem Pfad entfernt.

Siehe auch CanvasRenderingContext2D.beginPath( )

CanvasRenderingContext2D.quadraticCurveTo( ) Fügt dem momentanen Subpfad eine quadratische Bézierkurve hinzu

Überblick void quadraticCurveTo(float cpX, float cpY, float x, float y)

Argumente cpX, cpY

Die Koordinaten des Kontrollpunkts. x, y

Die Koordinaten des Kurvenendpunktes.

Beschreibung Diese Methode fügt dem momentanen Subpfad ein Segment einer quadratischen Bézierkurve hinzu. Die Kurve beginnt am momentanen Punkt und endet bei (x,y). Der Kontrollpunkt (cpX, cpY) legt die Kurvenform zwischen den beiden Punkten fest. (Eine Beschreibung der mathematischen Eigenschaften von Bézierkuven würde den Umfang dieses Buches allerdings sprengen.) Nach dem Ausführen der Methode liegt die momentane Position auf (x,y).

Fehler Firefox 1.5 implementiert diese Methode nicht richtig.

Siehe auch CanvasRenderingContext2D.bezierCurveTo( )

CanvasRenderingContext2D.rect( ) Fügt dem Pfad einen rechteckigen Subpfad hinzu

Überblick void rect(float x, float y, float breite, float hoehe)

806 | Referenz für clientseitiges JavaScript

491-0.book Seite 807 Mittwoch, 4. April 2007 9:55 09

e-bol.net

CanvasRenderingContext2D.restore( )

Argumente x, y

Die Koordinaten der linken oberen Ecke des Rechtecks. breite, hoehe

Die Abmessungen des Rechtecks.

Beschreibung Diese Methode fügt ein Rechteck zum Pfad hinzu. Dieses Rechteck sitzt in einem eigenständigen Subpfad und ist mit keinem anderen Subpfad im Pfad verbunden. Nach dem Ausführen der Methode liegt die momentane Position auf (0,0).

Siehe auch CanvasRenderingContext2D.fillRect( ), CanvasRenderingContext2D.strokeRect( )

Referenz für clientseitiges JavaScript

CanvasRenderingContext2D.restore( ) Setzt den Zeichnungsstatus auf die gespeicherten Werte zurück

Überblick void restore( )

Beschreibung Diese Methode holt den obersten Eintrag vom Stapel der gespeicherten Grafikzustände und setzt die Werte der Eigenschaften CanvasRenderingContext2D, den Clippingpfad und die Transformationsmatrix zurück. Weitere Informationen finden Sie unter der save( )-Methode.

Fehler Firefox 1.5 speichert und setzt die Eigenschaft strokeStyle nicht richtig zurück.

Siehe auch CanvasRenderingContext2D.save( )

CanvasRenderingContext2D.rotate( ) Dreht das Koordinatensystem des Canvas

Überblick void rotate(float winkel)

Argumente winkel

Der Drehumfang in Bogenmaß. Positive Werte ergeben eine Drehung im Uhrzeigersinn und negative Werte eine Drehung gegen den Uhrzeigersinn.

Referenz für clientseitiges JavaScript |

807

491-0.book Seite 808 Mittwoch, 4. April 2007 9:55 09

e-bol.net

CanvasRenderingContext2D.save( )

Beschreibung Diese Methode ändert die Abbildung von Canvas-Koordinaten auf Pixel im -Element im Webbrowser, wodurch alle folgenden Zeichnungen im Canvas um den angegeben Winkel gedreht erscheinen. Das -Element selbst wird dabei nicht gedreht. Beachten Sie, dass der Winkel im Bogenmaß angegeben wird. Um Grad ins Bogenmaß umzurechnen, multiplizieren Sie sie mit Math.PI und teilen das Ergebnis durch 180.

Siehe auch CanvasRenderingContext2D.scale( ), CanvasRenderingContext2D.translate( )

CanvasRenderingContext2D.save( ) Speichert eine Kopie des momentanen Grafikstatus

Überblick void save( )

Beschreibung save( ) schiebt den momentanen Grafikstatus auf einen Stapelspeicher, der aus den gespeicherten Grafikzuständen besteht. Dadurch können Sie den Grafikstatus vorübergehend ändern und dann die vorherigen Werte durch den Aufruf von restore( ) wiederherstellen.

Der Grafikstatus eines Canvas enthält alle Eigenschaften des CanvasRenderingContext2DObjekts (mit Ausnahme der schreibgeschützten Eigenschaft canvas). Er enthält außerdem die Transformationsmatrix, die sich aus den Aufrufen von rotate( ), scale( ) und translate( ) ergibt. Zusätzlich enthält er den Clippingpfad, der durch die clip( )-Methode festgelegt wird. Beachten Sie, dass der momentane Pfad und die momentane Position nicht Teil des Grafikstatus sind und von dieser Methode nicht gespeichert werden.

Fehler Firefox 1.5 speichert die Eigenschaft strokeStyle nicht und setzt sie auch nicht zurück.

Siehe auch CanvasRenderingContext2D.restore( )

CanvasRenderingContext2D.scale( ) Skaliert das Benutzerkoordinatensystem des Canvas.

Überblick void scale(float sx, float sy)

808 | Referenz für clientseitiges JavaScript

491-0.book Seite 809 Mittwoch, 4. April 2007 9:55 09

e-bol.net

CanvasRenderingContext2D.stroke( )

Argumente sx, sy

Die horizontalen und vertikalen Skalierfaktoren.

Beschreibung scale( ) fügt der momentanen Transformationsmatrix des Canvas eine Skaliertransformation hinzu. Die Skalierung findet mit Hilfe von unabhängigen horizontalen und vertikalen Skalierfaktoren statt. Werden beispielsweise die Werte 2,0 und 0,5 übergeben, wird der anschließend gezeichnete Pfad doppelt so breit und halb so hoch. Bei negativen Werten für sx werden die XKoordinaten an der Y-Achse gespiegelt. Bei negativen Werten für sy werden die Y-Koordinaten an der X-Achse gespiegelt.

Siehe auch CanvasRenderingContext2D.rotate( ), CanvasRenderingContext2D.translate( )

Referenz für clientseitiges JavaScript

CanvasRenderingContext2D.stroke( ) Zeichnet den momentanen Pfad

Überblick void stroke( )

Beschreibung Die Methode stroke( ) zeichnet den Umriss des momentanen Pfads. Der Pfad bestimmt die Geometrie der erzeugten Linie, die optische Erscheinung dieser Linie wird aber von den Eigenschaften strokeStyle, lineWidth, lineCap, lineJoin und miterLimit bestimmt. Der Begriff stroke bezieht sich auf einen Stift- oder Pinselstrich. Er bedeutet »zeichne den Umriss von«. Beachten Sie den Unterschied zwischen der stroke( )-Methode, die den Umriss eines Pfads zeichnet, und der fill( )-Methode, die das Innere eines Pfads ausfüllt.

Siehe auch CanvasRenderingContext2D.fill( ) CanvasRenderingContext2D.lineCap CanvasRenderingContext2D.lineJoin CanvasRenderingContext2D.strokeRect( )

CanvasRenderingContext2D.strokeRect( ) Zeichnet ein Rechteck

Überblick void strokeRect(float x, float y, float breite, float hoehe)

Referenz für clientseitiges JavaScript |

809

491-0.book Seite 810 Mittwoch, 4. April 2007 9:55 09

e-bol.net

CanvasRenderingContext2D.translate( )

Argumente x, y

Die Koordinaten der linken oberen Ecke des Rechtecks. breite, hoehe

Die Abmessungen des Rechtecks.

Beschreibung Diese Methode zeichnet den Umriss eines Rechtecks mit der angegebenen Position und Größe (füllt das Innere aber nicht aus). Die Linienfarbe und -breite werden über die Eigenschaften strokeStyle und lineWidth festgelegt. Die Eckform des Rechtecks wird über die Eigenschaft lineJoin angegeben. Derzeitige Implementierungen von strokeRect( ) löschen den Pfad, so als ob beginPath( ) aufgerufen worden wäre. Dieses überraschende Verhalten ist nicht unbedingt standardisiert, sodass Sie sich nicht darauf verlassen sollten.

Siehe auch CanvasRenderingContext2D.fillRect( ) CanvasRenderingContext2D.lineJoin CanvasRenderingContext2D.rect( ) CanvasRenderingContext2D.stroke( )

CanvasRenderingContext2D.translate( ) Verschiebt das Benutzerkoordinatensystem des Canvas

Überblick void translate(float dx, float dy)

Argumente dx, dy

Die Beträge, um die in der X- und Y-Dimension verschoben werden soll.

Beschreibung translate( ) fügt der Transformationsmatrix des Canvas horizontale und vertikale Offsets hinzu. Die Argumente dx und dy werden allen Punkten bei anschließend definierten Pfaden

hinzugefügt.

Siehe auch CanvasRenderingContext2D.rotate( ), CanvasRenderingContext2D.scale( )

810 | Referenz für clientseitiges JavaScript

491-0.book Seite 811 Mittwoch, 4. April 2007 9:55 09

e-bol.net

CDATASection

CDATASection Ein CDATA-Knoten in einem XML-Dokument

DOM Level 1 XML Node ➝ CharacterData ➝ Text ➝ CDATASection

Beschreibung Dieses nur selten benutzte Interface stellt einen CDATA-Abschnitt in einem XML-Dokument dar. Programmierer, die mit HTML-Dokumenten arbeiten, stoßen nie auf Knoten dieses Typs und brauchen auch dieses Interface nicht zu benutzen. CDATASection ist ein Subinterface von Text und definiert keine eigenen Eigenschaften oder Methoden. Auf den Textinhalt des CDATA-Abschnitts wird mit der aus Node geerbten nodeValue-Eigenschaft oder der aus CharacterData geerbten data-Eigenschaft zugegriffen. Sie können CDATASection-Knoten zwar oft wie Text-Knoten behandeln, müssen aber dabei beachten, dass die Methode Node.normalize( ) keine benachbarten CDATA-Abschnitte miteinander verschmilzt. CDATASection erzeugt mit Document.createCDATASection( ) eine CDATASection. Referenz für clientseitiges JavaScript

Siehe auch CharacterData, Text

CharacterData

DOM Level 1 Core

Gemeinsame Funktionalität für Text- und Kommentarknoten

Node ➝ CharacterData

Subinterfaces Comment, Text

Eigenschaften String data

Der Textinhalt dieses Knotens. readonly unsigned long length

Die Anzahl der Zeichen in diesem Knoten.

Methoden appendData( )

Hängt den angegebenen String an den Textinhalt dieses Knotens an. deleteData( )

Löscht Text aus diesem Knoten. Beginnt mit dem Zeichen am angegebenen Offset und löscht ab dort die angegebene Anzahl Zeichen. insertData( )

Fügt den angegebenen String in den Text dieses Knotens an dem Zeichen ein, das durch den Offset angegeben ist.

Referenz für clientseitiges JavaScript |

811

491-0.book Seite 812 Mittwoch, 4. April 2007 9:55 09

e-bol.net

CharacterData.appendData( ) replaceData( )

Ersetzt die Zeichen ab dem angegebenen Zeichen-Offset bis zur angegebenen Anzahl von Zeichen durch den spezifizierten String. substringData( )

Gibt eine Kopie des Texts vom angegebenen Zeichen-Offset bis zur spezifizierten Zeichenzahl zurück.

Beschreibung CharacterData ist das Superinterface für Text- und Kommentarknoten. Dokumente enthalten nie CharacterData-Knoten, sondern nur Text- und Kommentarknoten. Da jedoch diese beiden Knotentypen eine ähnliche Funktionalität haben, ist diese Funktionalität hier definiert, damit Text und Comment sie beide erben können. Beachten Sie, dass es nicht notwendig ist, die von diesem Interface definierten Methoden zur Stringmanipulation zu verwenden. Die data-Eigenschaft ist ein normaler JavaScript-String, den Sie mit dem +-Operator (bei Stringverknüpfungen) und verschiedenen String- und RegExpMethoden ändern können.

Siehe auch Comment, Text

CharacterData.appendData( )

DOM Level 1 Core

Hängt einen String an einen Text- oder Kommentarknoten an

Überblick void appendData(String arg) throws DOMException;

Argumente arg

Der String, der an den Text- oder Kommentarknoten angehängt wird. Exceptions Diese Methode löst eine DOMException mit dem code NO_MODIFICATION_ALLOWED_ERR aus, wenn sie auf einem schreibgeschützten Knoten aufgerufen wird.

Beschreibung Diese Methode hängt den String arg an das Ende der data-Eigenschaft dieses Knotens an.

812 | Referenz für clientseitiges JavaScript

491-0.book Seite 813 Mittwoch, 4. April 2007 9:55 09

e-bol.net

CharacterData.deleteData( )

CharacterData.deleteData( )

DOM Level 1 Core

Löscht Zeichen aus einem Text- oder Kommentarknoten

Überblick void deleteData(unsigned long offset, unsigned long anzahl) throws DOMException;

Argumente offset

Die Position des ersten zu löschenden Zeichens. anzahl

Die Anzahl der zu löschenden Zeichen. Exceptions Diese Methode kann eine DOMException mit einem der folgenden code-Werte auslösen: Das Argument offset oder anzahl ist negativ, oder offset ist größer als die Länge des Textoder Kommentarknotens. NO_MODIFICATION_ALLOWED_ERR

Der Knoten ist schreibgeschützt und darf nicht geändert werden.

Beschreibung Diese Methode löscht Zeichen aus diesem Text- oder Kommentarknoten. Sie beginnt mit dem durch offset angegebenen Zeichen und fährt für anzahl Zeichen mit dem Löschen fort. Ist offset plus anzahl größer als die Anzahl der Zeichen des Text- oder Kommentarknotens, so werden ab offset alle Zeichen bis zum Ende des Strings gelöscht.

CharacterData.insertData( )

DOM Level 1 Core

Fügt einen String in einen Text- oder Kommentarknoten ein

Überblick void insertData(unsigned long offset, String arg) throws DOMException;

Argumente offset

Die Zeichenposition im Text- oder Kommentarknoten, an der der String eingefügt werden soll. arg

Der einzufügende String.

Referenz für clientseitiges JavaScript |

813

Referenz für clientseitiges JavaScript

INDEX_SIZE_ERR

491-0.book Seite 814 Mittwoch, 4. April 2007 9:55 09

e-bol.net

CharacterData.replaceData( )

Exceptions Diese Methode kann unter den folgenden Umständen eine DOMException mit einem der folgenden code-Werte auslösen: INDEX_SIZE_ERR offset ist negativ oder größer als die Länge des Text- oder Kommentarknotens. NO_MODIFICATION_ALLOWED_ERR

Der Knoten ist schreibgeschützt und darf nicht geändert werden.

Beschreibung Diese Methode fügt den angegebenen String arg in den Text eines Text- oder Kommentarknotens an der durch offset angegebenen Position ein.

CharacterData.replaceData( )

DOM Level 1 Core

Ersetzt Zeichen eines Text- oder Kommentarknotens durch einen String

Überblick void replaceData(unsigned long offset, unsigned long anzahl, String arg) throws DOMException;

Argumente offset

Die Zeichenposition im Text- oder Kommentarknoten, an der die Ersetzung beginnen soll. anzahl

Die Anzahl der zu ersetzenden Zeichen. arg

Der String, der die durch offset und anzahl angegebenen Zeichen ersetzen soll. Exceptions Diese Methode kann unter den folgenden Umständen eine DOMException mit einem der folgenden code-Werte auslösen: INDEX_SIZE_ERR offset ist negativ oder größer als die Länge des Text- oder Kommentarknotens, oder anzahl ist negativ. NO_MODIFICATION_ALLOWED_ERR

Der Knoten ist schreibgeschützt und darf nicht geändert werden.

Beschreibung Diese Methode ersetzt anzahl Zeichen, beginnend mit der Position offset, durch den Inhalt des Strings arg. Ist die Summe von offset und anzahl größer als die Länge des Text- oder Kommentarknotens, werden beginnend mit offset alle Zeichen ersetzt.

814 | Referenz für clientseitiges JavaScript

491-0.book Seite 815 Mittwoch, 4. April 2007 9:55 09

e-bol.net

CharacterData.substringData( )

Beachten Sie, dass sowohl die insertData( )-Methode als auch die deleteData( )-Methode Spezialfälle dieses Falles darstellen.

CharacterData.substringData( )

DOM Level 1 Core

Extrahiert einen Teilstring aus einem Text- oder Kommentarknoten

Überblick String substringData(unsigned long offset, unsigned long anzahl) throws DOMException;

Argumente offset

Die Position des ersten zurückzugebenden Zeichens. anzahl

Rückgabewert Ein String, der aus anzahl Zeichen des Text- oder Kommentarknotens besteht und der mit dem Zeichen an der Position offset beginnt. Exceptions Diese Methode kann eine DOMException mit einem der folgenden code-Werte auslösen: INDEX_SIZE_ERR offset ist negativ oder größer als die Länge des Text- oder Kommentarknotens, oder anzahl ist negativ. DOMSTRING_SIZE_ERR

Der angegebene Textbereich ist zu lang, um in einen String der JavaScript-Implementierung des Browsers zu passen.

Beschreibung Diese Methode extrahiert aus einem Text- oder Kommentarknoten den Teilstring, der bei der Position offset beginnt und nach anzahl Zeichen endet. Sie nützt nur dann, wenn die Textmenge im Knoten größer als die maximale Zeichenzahl ist, die in einen String einer browserspezifischen JavaScript-Implementierung hineinpasst. In diesem Fall kann ein JavaScript-Programm die data- Eigenschaft des Text- oder Kommentarknotens nicht unmittelbar nutzen, sondern muss mit kürzeren Teilstrings des Knotentexts arbeiten. In der Praxis tritt diese Situation so gut wie nie auf.

Referenz für clientseitiges JavaScript |

815

Referenz für clientseitiges JavaScript

Die Anzahl der Zeichen des zurückzugebenden Teilstrings.

491-0.book Seite 816 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Checkbox

Checkbox Siehe Input

Comment Ein HTML- oder XML-Kommentar

DOM Level 1 Core Node ➝ CharacterData ➝ Comment

Beschreibung Ein Kommentarknoten repräsentiert einen Kommentar in einem HTML- oder XML-Dokument. Auf den Inhalt des Kommentars (also den Text zwischen ) können Sie über die data-Eigenschaft zugreifen, die aus dem Interface CharacterData geerbt wurde, oder auch über die nodeValue-Eigenschaft aus dem Node-Interface. Dieser Inhalt kann mit den aus CharacterData geerbten Methoden bearbeitet werden. Sie erzeugen mit Document. createComment( ) ein Kommentar-Objekt.

Siehe auch CharacterData

CSS2Properties Eine Menge von CSS-Attributen und ihren Werten

DOM Level 2 CSS2 Object ➝ CSS2Properties

Eigenschaften String cssText

Die Textdarstellung eines Sets von Stilattributen und ihren Werten. Der Text wird wie in einem CSS-Stylesheet formatiert, ohne den Elementselektor und die geschwungenen Klammern, die die Attribute und Werte umgeben. Wenn Sie diese Eigenschaft auf einen unzulässigen Wert setzen, wird eine DOMException mit dem code SYNTAX_ERR ausgelöst. Ist das CSS2Properties-Objekt schreibgeschützt und Sie versuchen die Eigenschaft zu setzen, so wird eine DOMException mit einem code von NO_MODIFICATION_ALLOWED_ERR ausgelöst. Zusätzlich zur cssText-Eigenschaft hat ein CSS2Properties-Objekt auch eine Eigenschaft für jedes CSS-Attribut, das vom Browser unterstützt wird. Diese Eigenschaftsnamen sind eng an die CSS-Attributnamen angelehnt. Geringfügige Abweichungen dienen nur zur Vermeidung von Syntaxfehlern in JavaScript. Attribute, die aus mehreren Wörtern bestehen und Bindestriche enthalten (z.B. »font-family«), werden in JavaScript ohne Bindestriche geschrieben, und jedes Wort hinter dem ersten beginnt mit einem Großbuchstaben: fontFamily. Da auch das Attribut »float« mit dem reservierten Wort float in Konflikt steht, wird es als Eigenschaft cssFloat übersetzt. Die CSS2Properties-Eigenschaftsnamen, die den jeweiligen von der CSS2-Spezifikation definierten Attributen entsprechen, werden in der nachfolgenden Tabelle aufgeführt. Beachten Sie jedoch, dass manche Browser nicht alle CSS-Attribute unterstützen und möglicherweise nicht alle aufgeführten Eigenschaften implementieren. Da die Eigenschaften direkt den CSS-Attri-

816 | Referenz für clientseitiges JavaScript

491-0.book Seite 817 Mittwoch, 4. April 2007 9:55 09

e-bol.net

CSS2Properties

buten entsprechen, werden sie hier nicht einzeln dokumentiert. Angaben zur Bedeutung und zu den zulässigen Werten einzelner Eigenschaften entnehmen Sie bitte einer CSS-Referenz, wie z.B. CSS – Das umfassende Handbuch von Eric A. Meyer (O’Reilly Verlag). Alle Eigenschaften sind Strings. Das Setzen einer beliebigen dieser Eigenschaften kann die gleichen Exceptions auslösen wie das Setzen der cssText-Eigenschaft: azimuth

background

backgroundAttachment

backgroundColor

backgroundImage

backgroundPosition

backgroundRepeat

border

borderBottom

borderBottomColor

borderBottomStyle

borderBottomWidth

borderCollapse

borderColor

borderLeft

borderLeftColor

borderLeftStyle

borderLeftWidth

borderRight

borderRightColor

borderRightStyle

borderRightWidth

borderSpacing

borderStyle

borderTop

borderTopColor

borderTopStyle

borderTopWidth

bottom

captionSide

clear

color

content

counterIncrement

counterReset

cssFloat

cue

cueAfter

cueBefore

cursor

direction

display

elevation

emptyCells

font

fontFamily

fontSize

fontSizeAdjust

fontStretch

fontStyle

fontVariant

fontWeight

height

left

letterSpacing

lineHeight

listStyle

listStyleImage

listStylePosition

listStyleType

margin

marginBottom

marginLeft

marginRight

marginTop

markerOffset

marks

maxHeight

maxWidth

minHeight

minWidth

orphans

outline

outlineColor padding

outlineStyle

outlineWidth

overflow

paddingBottom

paddingLeft

paddingRight

paddingTop

page

pageBreakAfter

pageBreakBefore

pageBreakInside

pause

pauseAfter

pauseBefore

pitch

pitchRange

playDuring

position

quotes

richness

right

size

speak

speakHeader

speakNumeral

speakPunctuation

speechRate

stress

tableLayout

textAlign

textDecoration top

textIndent

textShadow

textTransform

unicodeBidi

verticalAlign

visibility

voiceFamily

volume

whiteSpace

widows

width

wordSpacing

zIndex

Referenz für clientseitiges JavaScript |

Referenz für clientseitiges JavaScript

borderWidth clip

817

491-0.book Seite 818 Mittwoch, 4. April 2007 9:55 09

e-bol.net

CSSRule

Beschreibung Das Interface CSS2Properties stellt ein Set von CSS-Stilattributen und ihren Werten dar. Es definiert für jedes von der CSS2-Spezifikation definierte CSS-Attribut eine JavaScriptEigenschaft. Die style-Eigenschaft eines HTMLElements und die style-Eigenschaft eines CSSRule-Objekts sind les- und schreibbare CSS2Properties-Objekte. Der Rückgabewert von Window.getComputedStyle( ) ist aber ein CSS2Properties-Objekt, dessen Eigenschaften schreibgeschützt sind.

Siehe auch CSSRule, HTMLElement, Window.getComputedStyle( ); Kapitel 16

CSSRule Eine Regel in einem CSS-Stylesheet

DOM Level 2 CSS, IE 5 Object ➝ CSSRule

Eigenschaften String selectorText

Der Selektor, der angibt, auf welche Dokumentelemente sich diese Stilregel bezieht. Das Setzen dieser Eigenschaft löst eine DOMException mit dem code NO_MODIFICATION_ ALLOWED_ERR aus, wenn die Regel schreibgeschützt ist, oder mit dem code SYNTAX_ERR, wenn der neue Wert nicht den CSS-Syntaxregeln entspricht. readonly CSS2Properties style

Die Stilwerte, die für die in selectorText angegebenen Elemente gelten sollen. Beachten Sie, dass die style-Eigenschaft selbst zwar schreibgeschützt ist, die Eigenschaften des SS2Properties-Objekts, auf die sie sich bezieht, aber les- und schreibbar sind.

Beschreibung Ein CSSRule-Objekt repräsentiert eine Regel in einem CSS-Stylesheet: Es repräsentiert Stilinformationen, die auf einen speziellen Satz von Dokumentelementen angewendet werden. selectorText ist die String-Repräsentation des Elementselektors für diese Regel, und style ist ein CSS2Properties-Objekt, das den Satz von Stilattributen und -werten repräsentiert, der auf die ausgewählten Elemente angewandt werden soll. Die DOM Level 2 CSS-Spezifikation definiert im Grunde eine etwas komplexe Hierarchie von CSSRule-Interfaces, um verschiedene Arten von Regeln darzustellen, die in einem CSSStyleSheet vorkommen können. Tatsächlich werden die hier aufgeführten Eigenschaften durch das DOM CSSStyleRule-Interface definiert. Style-Regeln stellen die häufigste und wichtigste Art von Regeln in einem Stylesheet dar. Die hier aufgeführten Eigenschaften sind die einzigen, die über alle Browser hinweg portabel verwendet werden können. IE unterstützt die DOM Level 2Spezifikation nicht sehr gut (zumindest nicht über IE 7), implementiert aber ein CSSRuleObjekt, das die beiden hier aufgeführten Eigenschaften unterstützt.

Siehe auch CSS2Properties, CSSStyleSheet

818 | Referenz für clientseitiges JavaScript

491-0.book Seite 819 Mittwoch, 4. April 2007 9:55 09

e-bol.net

CSSStyleSheet

CSSStyleSheet

DOM Level 2 CSS, IE 4

Ein CSS-Stylesheet

Object ➝ CSSStyleSheet

Eigenschaften readonly CSSRule[] cssRules

Ein schreibgeschütztes, Array-ähnliches Objekt, das die CSSRule-Objekte enthält, die das Stylesheet bilden. In IE verwenden Sie stattdessen die rules-Eigenschaft. In DOMkonformen Implementierungen enthält dieses Array Objekte, die alle Regeln eines Stylesheets repräsentieren, und zwar einschließlich @-Regeln wie z.B. @import-Anweisungen. Regeln dieser Art implementieren ein anderes Interface als das für CSSRule beschriebene. Diese anderen Typen von Regel-Objekten werden nur schlecht über Browsergrenzen hinweg unterstützt und sind in diesem Buch nicht dokumentiert. Achten Sie also darauf, dass Sie alle Einträge in diesem Array daraufhin testen, ob sie CSSRule-Eigenschaften repräsentieren, bevor Sie versuchen, diese Eigenschaften zu verwenden. boolean disabled

readonly String href

Die URL eines Stylesheet, das mit dem Dokument verknüpft ist, oder null bei InlineStylesheets. readonly StyleSheet parentStyleSheet

Das Stylesheet, in dem dieses hier enthalten war, oder null, wenn dieses Stylesheet unmittelbar in das Dokument eingebunden war. readonly CSSRule[] rules

Das IE-Äquivalent des DOM-Standard-cssRules[]-Arrays. readonly String title

Der Titel des Stylesheets, sofern einer festgelegt ist. Ein Titel kann über das title-Attribut eines - oder -Elements festgelegt werden, das sich auf dieses Stylesheet bezieht. readonly String type

Der Typ dieses Stylesheets als MIME-Typ. CSS-Stylesheets haben den Typ »text/css«.

Methoden addRule( )

IE-spezifische Methode, um einem Stylesheet eine CSS-Regel hinzuzufügen. deleteRule( )

DOM-Standardmethode zum Löschen der Regel an der angegebenen Position. insertRule( )

DOM-Standardmethode zum Einfügen einer neuen Regel in das Stylesheet. removeRule( )

IE-spezifische Methode zum Entfernen einer Regel.

Referenz für clientseitiges JavaScript |

819

Referenz für clientseitiges JavaScript

Ist diese Eigenschaft true, so ist das Stylesheets deaktiviert und wird nicht auf das Dokument angewendet. Ist diese Eigenschaft false, so ist das Stylesheet aktiviert und wird auf das Dokument angewendet.

491-0.book Seite 820 Mittwoch, 4. April 2007 9:55 09

e-bol.net

CSSStyleSheet.addRule( )

Beschreibung Dieses Interface repräsentiert ein CSS-Stylesheet. Es hat Eigenschaften und Methoden zur Deaktivierung des Stylesheets sowie zum Abfragen, Einfügen und Entfernen von Style-Regeln. IE implementiert eine API, die etwas vom DOM-Standard abweicht. In IE verwenden Sie statt des cssRules[]-Arrays das rules[]-Array, und statt den DOM-Standard-Methoden insertRule( ) und deleteRule( ) verwenden Sie addRule( ) und removeRule( ). Die zu einem Dokument gehörenden CSSStyleSheet-Objekte sind Teil des styleSheets[]Arrays des Document-Objekts. Im DOM-Standard wird außerdem verlangt (obwohl das zu der Zeit, als dieses Buch geschrieben wurde, nicht weitverbreitet implementiert war), dass jedes - oder -Element bzw. jeder -ProcessingInstruction-Knoten, das bzw. die ein Stylesheet definiert oder mit ihm verknüpft ist, das CSSStyleSheet-Objekt über eine sheetEigenschaft verfügbar machen soll.

Siehe auch CSSRule, die styleSheets[]-Eigenschaft des Document-Objekts; Kapitel 16

CSSStyleSheet.addRule( )

IE 4

IE-spezifische Methode, um eine Regel in ein Stylesheet einzufügen.

Überblick void addRule(String selector, String stil, integer index)

Argumente selector

Der CSS-Selektor für die Regel. stil

Die Styles, die auf Elemente angewendet werden, die mit dem selector übereinstimmen. Der Style-String ist eine Abfolge von mit einem Semikolon getrennten Attribut:WertPaaren. Er beginnt und endet nicht mit geschwungenen Klammern. index

Die Position im rules-Array, an der die Regel ein- oder angefügt werden soll. Wird dieses optionale Argument weggelassen, wird die neue Regel an das Regel-Array angefügt.

Beschreibung Diese Methode fügt eine neue CSS-Style-Regel an der angegebenen index-Position des rulesArrays dieses Stylesheets ein oder an. Sie ist eine IE-spezifische Alternative zur normalen insertRule( )-Methode. Beachten Sie, dass sich die Argumente zu dieser Methode von denen für insertRule( ) unterscheiden.

820 | Referenz für clientseitiges JavaScript

491-0.book Seite 821 Mittwoch, 4. April 2007 9:55 09

e-bol.net

CSSStyleSheet.deleteRule( )

CSSStyleSheet.deleteRule( )

DOM Level 2 CSS

Löscht eine Regel aus einem Stylesheet

Überblick void deleteRule(unsigned long index) throws DOMException;

Argumente index

Der Index der zu löschenden Regel im cssRules-Array. Exceptions Diese Methode löst eine DOMException mit dem code INDEX_SIZE_ERR aus, wenn index negativ oder größer oder gleich cssRules.length ist. Sie löst eine DOMException mit dem code NO_MODIFICATION_ALLOWED_ERR aus, wenn dieses Stylesheet schreibgeschützt ist.

Diese Methode löscht die Regel an der angegebenen index-Position aus dem cssRules-Array. Dabei handelt es sich um eine DOM-Standard-Methode; eine IE-spezifische Alternative finden Sie unter CSSStyleSheet.removeRule( ).

CSSStyleSheet.insertRule( )

DOM Level 2 CSS

Fügt eine Regel in ein Stylesheet ein

Überblick unsigned long insertRule(String regel, unsigned long index) throws DOMException;

Argumente regel

Die vollständige, parser-fertige Textdarstellung der Regel, die dem Stylesheet hinzugefügt werden soll. Bei Stilregeln gehören dazu auch der Elementselektor und die Stilinformationen. index

Die Position im cssRules-Array, an der die Regel ein- oder angefügt werden soll. Rückgabewert Der Wert des index-Arguments. Exceptions Diese Methode löst unter folgenden Umständen eine DOMException mit einem der folgenden code-Werte aus:

Referenz für clientseitiges JavaScript |

821

Referenz für clientseitiges JavaScript

Beschreibung

491-0.book Seite 822 Mittwoch, 4. April 2007 9:55 09

e-bol.net

CSSStyleSheet.removeRule( ) HIERARCHY_REQUEST_ERR

Die CSS-Syntax gestattet an der angegebenen Stelle diese Regel nicht. INDEX_SIZE_ERR index ist negativ oder größer als cssRules.length. NO_MODIFICATION_ALLOWED_ERR

Die Regel ist schreibgeschützt. SYNTAX_ERR

In dem angegebenen regel-Text ist ein Syntaxfehler.

Beschreibung Diese Methode fügt eine neue CSS-regel an der angegebenen index-Position des cssRulesArrays dieses Stylesheets ein oder an. Dabei handelt es sich um eine DOM-Standard-Methode; eine IE-spezifische Alternative finden Sie unter CSSStyleSheet.addRule( ).

CSSStyleSheet.removeRule( )

IE 4

IE-spezifische Methode zum Entfernen einer CSS-Regel aus einem Stylesheet.

Überblick void removeRule(integer index)

Argumente index

Der Index der zu löschenden Regel im rules[]-Array. Wird dieses optionale Argument weggelassen, wird die erste Regel im Array entfernt.

Beschreibung Diese Methode entfernt die CSS-Style-Regel am angegebenen index des rules-Arrays dieses Stylesheets. Sie ist eine IE-spezifische Alternative zur normalen deleteRule( )-Methode.

Document Ein HTML- oder XML-Dokument

DOM Level 1 Core Node ➝ Document

Subinterfaces HTMLDocument

Eigenschaften readonly Window defaultView

Das Webbrowser-Window-Objekt (der »view« in der DOM-Sprache), in dem das Dokument angezeigt wird.

822 | Referenz für clientseitiges JavaScript

491-0.book Seite 823 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Document readonly DocumentType doctype

Gibt für XML-Dokumente mit einer -Deklaration einen DocumentType-Knoten an, der die DTD dieses Dokuments repräsentiert. Für HTML-Dokumente und für XMLDokumente ohne ist diese Eigenschaft null. readonly Element documentElement

Eine Referenz auf das Wurzelelement des Dokuments. Bei HTML-Dokumenten ist diese Eigenschaft immer das Element-Objekt, das das -Tag darstellt. Dieses Wurzelelement kann auch über das aus Node geerbte childNodes[]-Array abgerufen werden. Vergleichen Sie dazu die body-Eigenschaft von HTMLDocument. readonly DOMImplementation implementation

Das DOMImplementation-Objekt, das die Implementierung darstellt, mit der dieses Dokument erzeugt wurde. readonly CSSStyleSheet[] styleSheets

Eine Sammlung von Objekten, die alle Stylesheets darstellt, die in ein Dokument eingebettet oder damit verknüpft sind. In HTML-Dokumenten gehören dazu auch Stylesheets, die mit den Tags und definiert sind.

addEventListener( )

Fügt dem Set von Event-Handlern für dieses Dokument eine Event-Handler-Funktion hinzu. Dies ist eine DOM-Standard-Methode, die von allen modernen Browsern außer IE unterstützt wird. attachEvent( )

Fügt dem Set von Event-Handlern für dieses Dokument eine Event-Handler-Funktion hinzu. Sie ist die IE-spezifische Alternative zu addEventListener( ). createAttribute( )

Erzeugt einen neuen Attr-Knoten mit dem angegebenen Namen. createAttributeNS( )

Erzeugt einen neuen Attr-Knoten mit dem angegebenen Namen und Namensraum. createCDATASection( )

Erzeugt einen neuen CDATASection-Knoten mit dem angegebenen Text. createComment( )

Erzeugt einen neuen Kommentarknoten mit dem angegebenen String. createDocumentFragment( )

Erzeugt einen neuen, leeren DocumentFragment-Knoten. createElement( )

Erzeugt einen neuen Element-Knoten mit dem angegebenen Tag-Namen. createElementNS( )

Erzeugt einen neuen Element-Knoten mit dem angegebenen Tag-Namen und Namensraum. createEvent( )

Erzeugt ein neues, synthetisches Event-Objekt des angegebenen Typs.

Referenz für clientseitiges JavaScript |

823

Referenz für clientseitiges JavaScript

Methoden

491-0.book Seite 824 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Document createExpression( )

Erzeugt ein neues XPathExpression-Objekt, das eine kompilierte XPath-Abfrage repräsentiert. Eine IE-spezifische Alternative finden Sie unter Node.selectNodes( ). createProcessingInstruction( )

Erzeugt einen neuen ProcessingInstruction-Knoten mit dem angegebenen Ziel und Datenstring. createRange( )

Erzeugt ein neues Range-Objekt. Diese Methode gehört technisch gesehen zum DocumentRange-Interface und wird nur in solchen Implementierungen vom Document-Objekt implementiert, die auch das Range-Modul unterstützen. createTextNode( )

Erzeugt einen neuen Text-Knoten, der den angegebenen Text darstellt. detachEvent( )

Löscht eine Event-Handler-Funktion aus diesem Dokument. Sie ist die IE-spezifische Alternative zur normalen removeEventListener( )-Methode. dispatchEvent( )

Übermittelt ein synthetisches Event an dieses Dokument. evaluate( )

Wertet eine XPath-Abfrage anhand dieses Dokuments aus. Eine IE-spezifische Alternative finden Sie unter Node.selectNodes( ). getElementById( )

Gibt ein Nachfahren-Element dieses Dokuments zurück. Das Element hat für sein idAttribut den angegebenen Wert oder null, wenn im Dokument kein solches Element existiert. getElementsByTagName( )

Gibt ein Array (technisch gesehen eine NodeList) aller Element-Knoten in diesem Dokument zurück, die den angegebenen Tag-Namen haben. Die Element-Knoten erscheinen im Rückgabe-Array in der Reihenfolge, in der sie auch im Dokumentquelltext stehen. getElementsByTagNameNS( )

Gibt ein Array aller Element-Knoten zurück, die den angegebenen Tag-Namen und Namensraum haben. importNode( )

Kopiert einen Knoten aus einem anderen Dokument, der sich dazu eignet, in dieses Dokument eingefügt zu werden. loadXML( ) [IE only]

Parst einen String mit XML-Markup und speichert das Ergebnis in diesem DocumentObjekt. removeEventListener( )

Entfernt eine Event-Handler-Funktion aus dem Satz der Handler dieses Dokuments. Dies ist eine DOM-Standard-Methode, die von allen modernen Browsern außer IE unterstützt wird.

824 | Referenz für clientseitiges JavaScript

491-0.book Seite 825 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Document

Beschreibung Das Document-Interface ist der Wurzelknoten eines Dokumentbaums. Ein Document-Knoten kann mehrere Kinder haben, doch kann nur eines der Kinder ein Element-Knoten sein: Dies ist das Wurzelelement des Dokuments. Am einfachsten greifen Sie auf das Wurzelelement mit der Eigenschaft documentElement zu. Die Eigenschaften doctype und implementation geben Zugriff auf das DocumentType-Objekt (falls vorhanden) und das DOMImplementation-Objekt für dieses Dokument. Die meisten vom Document-Interface definierten Methoden sind »Factory-Methoden«, die verschiedene Arten von Knoten erzeugen, die in dieses Dokument eingefügt werden können. Erwähnenswerte Ausnahmen davon sind die Methoden getElementById() und getElementsByTagName(), die ganz nützlich sind, wenn Sie ein spezielles Element oder eine Menge zusammenhängender Element-Knoten in einem Dokumentbaum finden möchten. Weitere Ausnahmen sind Event-Handler-Registrierungsmethoden, wie z.B. addEventHandler( ). Diese Event-bezogenen Methoden werden auch vom Element-Interface implementiert und sind dort im Einzelnen dokumentiert.

Beim Arbeiten mit XML (einschließlich XHTML) lassen sich neue Document-Objekte über die createDocument( )-Methode der DOMImplementation erzeugen: document.implementation.createDocument(namespaceURL, rootTagName, null);

In IE verwenden Sie stattdessen folgenden Code: new ActiveXObject("MSXML2.DOMDocument");

In Beispiel 21-1 finden Sie eine plattformübergreifende Hilfsfunktion, die ein neues DocumentObjekt erzeugt. Es ist auch möglich, eine XML-Datei aus dem Netz zu laden und sie in ein Document-Objekt zu parsen. Vergleichen Sie dazu die responseXML-Eigenschaft des XMLHttpRequest-Objekts. Sie können auch einen String mit XML-Markup in ein Document-Objekt parsen: Vergleichen Sie dazu DOMParser.parseFromString( ) und das IE-spezifische Document.loadXML( ). (Beispiel 21-4 ist eine plattformübergreifende Hilfsfunktion, die diese Methoden zum Parsen von XML-Markup verwendet). Weitere Eigenschaften und Methoden speziell für HTML-Dokumente finden Sie unter HTMLDocument.

Siehe auch DOMImplementation, DOMParser, HTMLDocument, Window, XMLHttpRequest; Kapitel 15

Referenz für clientseitiges JavaScript |

825

Referenz für clientseitiges JavaScript

Meist erhalten Sie ein Document-Objekt über die document-Eigenschaft eines Window-Objekts. Sie können aber Document-Objekte auch über die contentDocument-Eigenschaft von Frame und IFrame erhalten oder über die ownerDocument-Eigenschaft eines beliebigen Knotens, der in ein Dokument aufgenommen wurde.

491-0.book Seite 826 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Document.addEventListener( )

Document.addEventListener( ) siehe Element.addEventListener( )

Document.attachEvent( ) siehe Element.attachEvent( )

Document.createAttribute( )

DOM Level 1 Core

Erzeugt einen neuen Attr-Knoten

Überblick Attr createAttribute(String name) throws DOMException;

Argumente name

Der Name des neu erzeugten Attributs. Rückgabewert Ein neu erzeugter Attr-Knoten, dessen nodeName-Eigenschaft auf name gesetzt ist. Exceptions Diese Methode löst eine DOMException mit dem code INVALID_CHARACTER_ERR aus, wenn name ein unzulässiges Zeichen enthält.

Siehe auch Attr, Element.setAttribute( ), Element.setAttributeNode( )

Document.createAttributeNS( )

DOM Level 2 Core

Erzeugt ein Attr mit einem Namen und Namensraum

Überblick Attr createAttributeNS(String namensraumURI, String qualifizerterName) throws DOMException;

Argumente namensraumURI

Der eindeutige Bezeichner des Namensraums für das Attr oder null, wenn kein Namensraum vorhanden ist. qualifizierterName

Der qualifizierte Attributname; er sollte ein Namensraumpräfix, einen Doppelpunkt und einen lokalen Namen enthalten.

826 | Referenz für clientseitiges JavaScript

491-0.book Seite 827 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Document.createCDATASection( )

Rückgabewert Ein neu erzeugter Attr-Knoten mit dem angegebenen Namen und Namensraum. Exceptions Diese Methode kann unter den folgenden Umständen eine DOMException mit einem der folgenden code-Werte auslösen: INVALID_CHARACTER_ERR qualifizierterName enthält ein unzulässiges Zeichen. NAMESPACE_ERR qualifizierterName ist nicht wohlgeformt, oder qualifizierterName und namensraumURI

passen nicht zueinander. NOT_SUPPORTED_ERR

Die Implementierung unterstützt keine XML-Dokumente und implementiert daher auch nicht diese Methode.

Beschreibung nur einen Namen, sondern zusätzlich auch einen Namensraum hat. Diese Methode kann nur für XML-Dokumente eingesetzt werden, die Namensräume verwenden.

Document.createCDATASection( )

DOM Level 1 Core

Erzeugt einen neuen CDATASection-Knoten

Überblick CDATASection createCDATASection(String daten) throws DOMException;

Argumente daten

Der Text der zu erzeugenden CDATASection. Rückgabewert Ein neu erzeugter CDATASection-Knoten, der die angegebenen daten enthält. Exceptions Wenn das Dokument ein HTML-Dokument ist, löst diese Methode eine DOMException mit dem code NOT_SUPPORTED_ERR aus, da HTML-Dokumente keine CDATASection-Knoten gestatten.

Referenz für clientseitiges JavaScript |

827

Referenz für clientseitiges JavaScript

createAttributeNS() ist genau wie createAttribute(), nur dass der erzeugte Attr-Knoten nicht

491-0.book Seite 828 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Document.createComment( )

Document.createComment( )

DOM Level 1 Core

Erzeugt einen neuen Kommentarknoten

Überblick Comment createComment(String daten);

Argumente daten

Der Text des zu erzeugenden Kommentarknotens. Rückgabewert Ein neu erzeugter Kommentarknoten, der als Text die angegebenen daten enthält.

Document.createDocumentFragment( )

DOM Level 1 Core

Erzeugt einen neuen, leeren DocumentFragment-Knoten

Überblick DocumentFragment createDocumentFragment( );

Rückgabewert Ein neu erzeugter DocumentFragment-Knoten ohne Kinder.

Document.createElement( )

DOM Level 1 Core

Erzeugt einen neuen Element-Knoten

Überblick Element createElement(String tagName) throws DOMException;

Argumente tagName

Der Tag-Name des zu erzeugenden Elements. Da HTML-Tags nicht zwischen Groß- und Kleinschreibung unterscheiden, können Sie für HTML-Tag-Namen nach Belieben zwischen Groß- und Kleinschreibung wählen. XML-Tag-Namen unterscheiden zwischen Groß- und Kleinschreibung. Rückgabewert Ein neu erzeugter Element-Knoten mit dem angegebenen Tag-Namen. Exceptions Diese Methode löst eine DOMException mit dem code INVALID_CHARACTER_ERR aus, wenn tagName ein unzulässiges Zeichen enthält.

828 | Referenz für clientseitiges JavaScript

491-0.book Seite 829 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Document.createElementNS( )

Document.createElementNS( )

DOM Level 2 Core

Erzeugt einen neuen Element-Knoten mit Namensraum

Überblick Element createElementNS(String namensraumURI, String qualifizierterName) throws DOMException;

Argumente namensraumURI

Der eindeutige Bezeichner für den Namensraum des neuen Elements oder null, wenn kein Namensraum vorhanden ist. qualifizierterName

Der qualifizierte Name des neuen Elements. Er sollte ein Namensraumpräfix, einen Doppelpunkt und einen lokalen Namen enthalten.

Exceptions Diese Methode kann unter den folgenden Umständen eine DOMException mit einem der folgenden code-Werte auslösen: INVALID_CHARACTER_ERR qualifizierterName enthält ein unzulässiges Zeichen. NAMESPACE_ERR qualifizierterName ist nicht wohlgeformt, oder qualifizierterName und namensraumURI

passen nicht zueinander. NOT_SUPPORTED_ERR

Die Implementierung unterstützt keine XML-Dokumente und implementiert daher auch nicht diese Methode.

Beschreibung createAttributeNS() ist genau wie createAttribute(), nur dass der erzeugte Attr-Knoten nicht

nur einen Namen, sondern zusätzlich auch einen Namensraum hat. Diese Methode eignet sich nur für XML-Dokumente, die Namensräume verwenden.

Document.createEvent( )

DOM Level 2 Events

Erzeugt ein Event-Objekt

Überblick Event createEvent(String eventTyp) throws DOMException

Referenz für clientseitiges JavaScript |

829

Referenz für clientseitiges JavaScript

Rückgabewert Ein neu erzeugter Element-Knoten mit dem angegebenen Tag-Namen und Namensraum.

491-0.book Seite 830 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Document.createEvent( )

Argumente eventTyp

Der Name des Event-Moduls, für das ein Event-Objekt gewünscht wird. Gültige EventTypen werden in der Beschreibung aufgeführt. Rückgabewert Ein neu erzeugtes Event-Objekt des angegebenen Typs. Exceptions Diese Methode löst eine DOMException mit dem code NOT_SUPPORTED_ERR aus, wenn die Implementierung keine Events des angeforderten Typs unterstützt.

Beschreibung Diese Methode erzeugt ein neues Event-Objekt des Typs, der im eventTyp-Argument angegeben ist. Beachten Sie, dass der Wert dieses Arguments nicht der Name des zu erzeugenden Event-Interfaces (im Singular), sondern der Name des DOM-Moduls (im Plural) sein soll, das dieses Interface definiert. Die folgende Tabelle zeigt, welche Werte für eventTyp zulässig sind und welches Event-Interface jeder Wert erzeugt. eventType-Argument

Event-Interface

Initialisierungsmethode

HTMLEvents

Event

initEvent( )

MouseEvents

MouseEvent

initMouseEvent( )

UIEvents

UIEvent

initUIEvent( )

Nachdem Sie ein Event-Objekt mit dieser Methode erzeugt haben, müssen Sie es mit der in der Tabelle angegebenen Initialisierungsmethode initialisieren. Einzelheiten zur Initialisierungsmethode entnehmen Sie bitte der Referenz zu dem jeweiligen Event-Interface. Diese Methode wird eigentlich nicht im Document-Interface, sondern im DOM-DocumentEvent-Interface definiert. Wenn eine Implementierung das Events-Modul unterstützt, implementiert das Document-Objekt immer das DocumentEvent-Interface und unterstützt somit diese Methode. Beachten Sie, dass Internet Explorer das DOM Events-Modul nicht unterstützt.

Siehe auch Event, MouseEvent, UIEvent

830 | Referenz für clientseitiges JavaScript

491-0.book Seite 831 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Document.createExpression( )

Document.createExpression( )

Firefox 1.0, Safari 2.01, Opera 9

Erzeugt einen XPath-Ausdruck zur späteren Auswertung

Überblick XPathExpression createExpression(String xpathText, Function namensraumURLMapper) throws XPathException

Argumente xpathText

Der String, der den zu kompilierenden XPath-Ausdruck darstellt. namensraumURLMapper

Eine Funktion, die ein Namensraumpräfix auf eine vollständige Namensraum-URL abbildet oder null zurückgibt, wenn keine solche Zuordnung erforderlich ist.

Exceptions Diese Methode löst eine Exception aus, wenn der xpathText einen Syntaxfehler enthält oder wenn er ein Namensraumpräfix verwendet, das nicht mit namensraumURLMapper aufgelöst werden kann.

Beschreibung Diese Methode konvertiert eine Stringrepräsentation eines XPath-Ausdrucks in eine kompilierte Form, eine XPathExpression. Zusätzlich zum Ausdruck nimmt diese Methode eine Funktion im Format function(praefix), die einen Namensraumpräfix-String interpretiert und ihn als vollständigen Namensraum-URL-String zurückgibt. Internet Explorer unterstützt diese API nicht. Eine IE-spezifische Alternative finden Sie unter Node.selectNodes( ).

Siehe auch Document.evaluate( ), Node.selectNodes( ), XPathExpression, XPathResult

Document.createProcessingInstruction( )

DOM Level 1 Core

Erzeugt einen ProcessingInstruction-Knoten

Überblick ProcessingInstruction createProcessingInstruction(String ziel, String daten) throws DOMException;

Referenz für clientseitiges JavaScript |

831

Referenz für clientseitiges JavaScript

Rückgabewert Ein XPathExpression-Objekt.

491-0.book Seite 832 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Document.createRange( )

Argumente ziel

Das Ziel der Verarbeitungsanweisung. daten

Der Textinhalt der Verarbeitungsanweisung. Rückgabewert Ein neu erzeugter ProcessingInstruction-Knoten. Exceptions Diese Methode kann unter den folgenden Umständen eine DOMException mit einem der folgenden code-Werte auslösen: INVALID_CHARACTER_ERR Das angegebene ziel enthält ein unzulässiges Zeichen. NOT_SUPPORTED_ERR

Dies ist ein HTML-Dokument und unterstützt keine Verarbeitungsanweisungen.

Document.createRange( )

DOM Level 2 Range

Erzeugt ein Range-Objekt

Überblick Range createRange( );

Rückgabewert Ein neu erzeugtes Range-Objekt. Beide Begrenzungspunkte sind auf den Dokumentenanfang gesetzt.

Beschreibung Diese Methode erzeugt ein Range-Objekt, mit dem Sie einen Bereich dieses Dokuments oder eines DocumentFragment aus ihm darstellen können. Diese Methode wird eigentlich nicht im Document-Interface, sondern im DocumentRangeInterface definiert. Wenn eine Implementierung das Range-Modul unterstützt, implementiert das Document-Objekt immer das DocumentRange-Interface und unterstützt somit diese Methode. Internet Explorer 6 unterstützt dieses Modul nicht.

Siehe auch Range

832 | Referenz für clientseitiges JavaScript

491-0.book Seite 833 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Document.createTextNode( )

Document.createTextNode( )

DOM Level 1 Core

Erzeugt einen neuen Text-Knoten

Überblick Text createTextNode(String daten);

Argumente daten

Der Inhalt des Text-Knotens. Rückgabewert Ein neu erzeugter Text-Knoten, der den angegebenen daten-String repräsentiert.

Document.detachEvent( ) siehe Element.detachEvent( ) Referenz für clientseitiges JavaScript

Document.dispatchEvent( ) siehe Element.dispatchEvent( )

Document.evaluate( )

Firefox 1.0, Safari 2.01, Opera 9

Wertet einen XPath-Ausdruck aus

Überblick XPathResult evaluate(String xpathText, Node kontextKnoten, Function namensraumURLMapper, short ergebnisTyp, XPathResult ergebnis) throws DOMException, XPathException

Argumente xpathText

Der String, der den auszuwertenden XPath-Ausdruck darstellt. kontextKnoten

Der Knoten in diesem Dokument, auf dem der Ausdruck ausgewertet wird. namensraumURLMapper

Eine Funktion, die ein Namensraumpräfix auf eine vollständige Namensraum-URL abbildet oder null zurückgibt, wenn keine solche Zuordnung erforderlich ist. ergebnisTyp

Gibt den als Ergebnis erwarteten Objekttyp an und verwendet XPath-Konvertierungen, um das gewünschte Ergebnis zu erzwingen. Gültige Werte für ergebnisTyp sind die durch das XPathResult-Objekt definierten Konstanten.

Referenz für clientseitiges JavaScript |

833

491-0.book Seite 834 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Document.getElementById( ) ergebnis

Ein wiederzuverwendendes XPathResult-Objekt oder null, wenn ein neues XPathResultObjekt erzeugt werden soll. Rückgabewert Ein XPathResult-Objekt, das die Auswertung des Ausdrucks auf dem gegebenen Kontextknoten repräsentiert. Exceptions Diese Methode kann eine Exception auslösen, wenn der xpathText einen Syntaxfehler enthält, wenn das Ergebnis des Ausdrucks nicht in den gewünschten ergebnisTyp konvertiert werden kann, wenn der Ausdruck Namensräume enthält, die namensraumURLMapper nicht auflösen kann, oder wenn kontextKnoten vom falschen Typ oder nicht mit diesem Dokument verknüpft ist.

Beschreibung Diese Methode wertet den angegebenen XPath-Ausdruck für den angegebenen KontextKnoten aus. Sie gibt ein XPathResult-Objekt zurück, wobei sie mit ergebnisTyp bestimmt, welcher Ergebnistyp gewünscht ist. Wenn Sie einen Ausdruck mehrmals auswerten wollen, verwenden Sie Document.createExpression( ), um den Ausdruck in ein XPathExpression-Objekt zu kompilieren, und verwenden dann die evaluate( )-Methode von XPathExpression. Internet Explorer unterstützt diese API nicht. IE-spezifische Alternativen finden Sie unter Node.selectNodes( ) und Node.selectSingleNode( ).

Siehe auch Document.createExpression( ) Node.selectNodes( ) Node.selectSingleNode( ) XPathExpression XPathResult

Document.getElementById( )

DOM Level 2 Core

Sucht ein Element mit der angegebenen eindeutigen ID

Überblick Element getElementById(String elementId);

Argumente elementId

Der Wert des id-Attributs des gewünschten Elements. Rückgabewert Der Element-Knoten, der das Dokumentelement mit dem angegebenen id-Attribut darstellt, oder null, wenn kein solches Element gefunden wird.

834 | Referenz für clientseitiges JavaScript

491-0.book Seite 835 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Document.getElementsByTagName( )

Beschreibung Diese Methode sucht im Dokument einen Element-Knoten mit einem id-Attribut, dessen Wert elementId ist, und gibt dieses Element zurück. Wenn kein solches Element zu finden ist, wird null zurückgegeben. Der Wert des id-Attributs soll innerhalb eines Dokuments eindeutig sein, und wenn diese Methode mehr als ein Element mit der angegebenen elementId findet, kann sie entweder ein beliebiges von diesen oder null zurückgeben. Diese Methode ist wichtig und wird oft benutzt, da sie eine einfache Möglichkeit bietet, das Element-Objekt zu erhalten, das ein spezifisches Dokumentelement darstellt. Beachten Sie, dass der Methodenname auf »Id« und nicht auf »ID« endet; schreiben Sie ihn also richtig. In HTML-Dokumenten sucht diese Methode nach einem Element mit dem angegebenen idAttribut. Verwenden Sie HTMLDocument.getElementsByName( ), um nach HTML-Elementen aufgrund ihrer name-Attribute zu suchen.

Siehe auch Document.getElementsByTagName( ) Element.getElementsByTagName( ) HTMLDocument.getElementsByName( )

Document.getElementsByTagName( )

DOM Level 1 Core

Gibt alle Element-Knoten mit dem angegebenen Namen zurück

Überblick Element[] getElementsByTagName(String tagName);

Argumente tagName

Der Tag-Name des zurückzugebenden Element-Knotens oder der Wildcard-String »*«, mit dem ohne Berücksichtigung des Tag-Namens alle Element-Knoten im Dokument zurückgegeben werden. Bei HTML-Dokumenten werden Tag-Namen ohne Beachtung der Großund Kleinschreibung verglichen. (In Versionen vor Version 6 unterstützt IE diese Wildcard-Syntax nicht). Rückgabewert Ein schreibgeschütztes Array (technisch gesehen eine NodeList) aller Element-Knoten im Dokumentbaum mit dem angegebenen Tag-Namen. Die zurückgegebenen Element-Knoten stehen in derselben Reihenfolge, in der sie auch im Dokumentquelltext auftauchen.

Referenz für clientseitiges JavaScript |

835

Referenz für clientseitiges JavaScript

In XML-Dokumenten verwendet diese Methode zur Suche alle Attribute vom Typ id, unabhängig vom eigentlichen Namen dieses Attributs. Wenn XML-Attributtypen unbekannt sind (z.B. weil der XML-Parser die DTD des Dokuments ignoriert oder nicht finden konnte), gibt diese Methode immer null zurück. Für clientseitiges JavaScript ist diese Methode bei XMLDokumenten normalerweise nicht sehr nützlich. Tatsächlich wurde getElementById( ) ursprünglich als Bestandteil des HTMLDocument-Interfaces definiert, wurde aber dann zum Document-Interface in DOM Level 2 verschoben.

491-0.book Seite 836 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Document.getElementsByTagNameNS( )

Beschreibung Diese Methode gibt eine NodeList zurück (die Sie auch als schreibgeschütztes Array behandeln können). Sie enthält alle Element-Knoten im Dokument, die den angegebenen TagNamen haben, und zwar in derselben Reihenfolge, in der sie im Dokumentquelltext auftauchen. Die NodeList ist »live«, d.h., ihr Inhalt wird automatisch nach Bedarf aktualisiert, wenn Elemente mit dem angegebenen Tag-Namen dem Dokument hinzugefügt oder aus ihm entfernt werden. HTML-Dokumente beachten die Groß- und Kleinschreibung nicht, sodass Sie tagName großoder kleinschreiben können; alle Tags mit dem gleichen Namen im Dokument werden erfasst, unabhängig davon, ob diese Tags im Dokumentquelltext groß- oder kleingeschrieben sind. XML-Dokumente achten hingegen sehr wohl auf die Groß- und Kleinschreibung. Hier stimmt der tagName nur mit Tags im Dokumentquelltext überein, die denselben Namen und genau dieselbe Groß- und Kleinschreibung verwenden. Beachten Sie, dass das Element-Interface eine gleichnamige Methode definiert, die nur einen Teilbaum des Dokuments durchsucht. Außerdem definiert das Interface HTMLDocument auch die Methode getElementsByName(), die Elemente anhand des Werts ihrer name-Attribute und nicht nach Tag-Namen sucht.

Beispiel Mit Code wie diesem können Sie alle -Tags in einem Dokument finden und durchlaufen: var headings = document.getElementsByTagName("h1"); for(var i = 0; i < headings.length; i++) { // Durchlaufe die zurückgegebenen Tags var h = headings[i]; // Tue nun etwas mit dem -Element in der Variablen h }

Siehe auch Document.getElementById( ) Element.getElementsByTagName( ) HTMLDocument.getElementsByName( )

Document.getElementsByTagNameNS( )

DOM Level 2 Core

Gibt alle Element-Knoten mit einem angegebenen Namen und Namensraum zurück

Überblick Node[] getElementsByTagNameNS(String namensraumURI, String lokalerName);

Argumente namensraumURI

Der eindeutige Bezeichner des Namensraums der gewünschten Elemente oder »*«, wenn alle Namensräume erfasst werden sollen.

836 | Referenz für clientseitiges JavaScript

491-0.book Seite 837 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Document.importNode( ) lokalerName

Der lokale Name der gewünschten Elemente oder »*«, wenn alle lokalen Namen erfasst werden sollen. Rückgabewert Ein schreibgeschütztes Array (technisch gesehen eine NodeList) aller Element-Knoten im Dokumentbaum mit dem angegebenen Namensraum und lokalen Namen.

Beschreibung Diese Methode funktioniert wie getElementsByTagName(), sucht jedoch Elemente nach Namensraum und Namen. Sie ist nur in XML-Dokumenten nützlich, die Namensräume verwenden.

Document.importNode( )

DOM Level 2 Core

Kopiert einen Knoten eines anderen Dokuments zur Nutzung in diesem Dokument Referenz für clientseitiges JavaScript

Überblick Node importNode(Node importierterKnoten, boolean tief) throws DOMException;

Argumente importierterKnoten

Der Importknoten. tief

Wenn true: Kopiere rekursiv auch alle Nachfahren von importierterKnoten. Rückgabewert Eine Kopie von importierterKnoten (und eventuell all seiner Nachfahren), in der ownerDocument auf dieses Dokument gesetzt ist. Exceptions Diese Methode löst eine DOMException mit dem code NOT_SUPPORTED_ERR aus, wenn importierterKnoten ein Document oder DocumentType-Knoten ist, da diese Knotentypen nicht importiert werden können.

Beschreibung Dieser Methode wird ein in einem anderen Dokument definierter Knoten übergeben. Sie liefert eine Kopie dieses Knotens, die in das vorliegende Dokument eingefügt werden kann. Wenn tief den Wert true hat, werden auch alle Nachfahren des Knotens kopiert. Der Originalknoten und seine Nachfahren werden nicht modifiziert. In der zurückgegebenen Kopie ist die Eigenschaft ownerDocument auf das vorliegende Dokument gesetzt, aber der parentNode auf null, da sie noch nicht in das Dokument eingefügt wurde. EventListener-Funktionen, die auf dem Originalknoten oder -baum registriert waren, werden nicht mitkopiert.

Referenz für clientseitiges JavaScript |

837

491-0.book Seite 838 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Document.loadXML( )

Wird ein Element-Knoten importiert, so werden nur die Attribute mitimportiert, die im Quelldokument explizit angegeben sind. Wenn ein Attr-Knoten importiert wird, wird seine specified-Eigenschaft automatisch auf true gesetzt.

Siehe auch Node.cloneNode( )

Document.loadXML( )

Internet Explorer

Füllt dieses Dokument durch Parsen eines Strings mit XML-Markup

Überblick void loadXML(String text)

Argumente text

Das zu parsende XML-Markup.

Beschreibung Diese IE-spezifische Methode parst den spezifischen String mit XML-Text und baut einen Baum aus DOM-Knoten im gegebenen Document-Objekt. Dabei werden alle vorher bereits im Dokument vorhanden Knoten gelöscht. Diese Methode fehlt bei Document-Objekten, die HTML-Dokumente darstellen. Vor dem Aufruf von loadXML( ) wird normalerweise ein neues, leeres Dokument erzeugt, das den geparsten Inhalt aufnimmt: var doc = new ActiveXObject("MSXML2.DOMDocument"); doc.loadXML(markup);

Unter DOMParser.parseFromString( ) finden Sie eine Alternative für andere Browser als IE.

Siehe auch DOMParser.parseFromString( )

Document.removeEventListener( ) Siehe Element.removeEventListener( )

838 | Referenz für clientseitiges JavaScript

491-0.book Seite 839 Mittwoch, 4. April 2007 9:55 09

e-bol.net

DocumentFragment

DocumentFragment Benachbarte Knoten und ihre Teilbäume

DOM Level 1 Core Node ➝ DocumentFragment

Beschreibung Das Interface DocumentFragment stellt einen Teil oder ein Fragment eines Dokuments dar. Genauer gesagt, ist es eine Liste von nebeneinanderliegenden Knoten und allen Nachfahren dieser Knoten, aber ohne einen gemeinsamen übergeordneten Knoten. DocumentFragmentKnoten sind nie Teil eines Dokumentbaums, und die geerbte Eigenschaft parentNode ist immer null. Durch ihr Spezialverhalten sind DocumentFragment-Nodes recht hilfreich. Erfolgt ein Aufruf mit dem Ziel, ein DocumentFragment in einen Dokumentbaum einzufügen, wird allerdings jedes Kind von DocumentFragment eingefügt, nicht aber der DocumentFragmentKnoten selbst. Das macht DocumentFragment zu einem vorübergehenden Platzhalter für Knoten, die Sie später alle zugleich in ein Dokument einfügen möchten. Besonders nützlich ist DocumentFragment überdies zum Implementieren der Funktionen Ausschneiden, Kopieren und Einfügen, insbesondere in Kombination mit dem Range-Interface.

Siehe auch Range

DocumentType Die DTD eines XML-Dokuments

DOM Level 1 XML Node ➝ DocumentType

Eigenschaften readonly String internalSubset [DOM Level 2]

Der nicht gepaste Text einer internen Teilmenge der DTD (d.h. der Teil der DTD, der nicht in einer externen Datei, sondern in dem Dokument selbst erscheint). Die eckigen Begrenzungsklammern der internen Teilmenge gehören nicht zum Rückgabewert. Wenn es keine interne Teilmenge gibt, ist diese Eigenschaft null. readonly String name

Der Name des Dokumenttyps. Dies ist der Bezeichner, der am Anfang eines XML-Dokuments unmittelbar hinter steht; er ist derselbe wie der Tag-Name des Wurzelelements des Dokuments. readonly String publicId [DOM Level 2]

Der öffentliche Bezeichner der externen Teilmenge der DTD oder null, wenn keiner angegeben wurde. readonly String systemId [DOM Level 2]

Der Systembezeichner der externen Teilmenge der DTD oder null, wenn keiner angegeben wurde.

Referenz für clientseitiges JavaScript |

839

Referenz für clientseitiges JavaScript

Sie können ein neues, leeres DocumentFragment mit Document.createDocumentFragment() erzeugen oder mit Range.extractContents() oder Range.cloneContents() ein DocumentFragment erhalten, das ein Fragment eines vorhandenen Dokuments enthält.

491-0.book Seite 840 Mittwoch, 4. April 2007 9:55 09

e-bol.net

DOMException

Beschreibung Dieses nur selten benutzte Interface repräsentiert die DTD eines XML-Dokuments. Programmierer, die ausschließlich mit HTML-Dokumenten arbeiten, müssen dieses Interface nie benutzen. Da eine DTD nicht zum Inhalt eines Dokuments gehört, erscheinen DocumentType-Knoten nie im Dokumentenbaum. Wenn ein XML-Dokument eine DTD hat, so kann auf den DocumentType-Knoten für diese DTD über die doctype-Eigenschaft des Document-Knotens zugegriffen werden. Obwohl das W3C DOM eine API für den Zugriff auf die XML-Entities und -Notationen enthält, die in einer DTD definiert sind, wird diese API hier nicht dokumentiert. Die üblichen Webbrowser parsen die DTDs für die von ihnen geladenen Dokumente nicht, und JavaScript kann auf der Clientseite nicht auf diese Entities und Notationen zugreifen. Für das Programmieren von clientseitigem JavaScript repräsentiert dieses Interface lediglich den Inhalt des -Tags und nicht den Inhalt der DTD-Datei, die es referenziert. DocumentType-Knoten sind unveränderlich.

Siehe auch Document, DOMImplementation.createDocument( ), DOMImplementation.createDocumentType( )

DOMException Signalisiert Exceptions oder Fehler für Core DOM-Objekte

DOM Level 1 Core Object ➝ DOMException

Konstanten Die folgenden Konstanten definieren die zulässigen Werte der code-Eigenschaft eines DOMException-Objekts. Beachten Sie, dass diese Konstanten statische Eigenschaften von DOMException sind und keine Eigenschaften individueller Exception-Objekte: unsigned short INDEX_SIZE_ERR = 1

Out-of-Bounds-Fehler für einen Array- oder String-Index. unsigned short DOMSTRING_SIZE_ERR = 2

Ein angeforderter Text ist zu groß, um noch in einen String der aktuellen JavaScriptImplementierung zu passen. unsigned short HIERARCHY_REQUEST_ERR = 3

Es wurde versucht, einen Knoten an eine unzulässige Stelle in der Dokumentenbaumhierarchie zu setzen. unsigned short WRONG_DOCUMENT_ERR = 4

Es wurde versucht, einen Knoten mit einem anderen Dokument als dem zu benutzen, das den Knoten erzeugte. unsigned short INVALID_CHARACTER_ERR = 5

Ein unzulässiges Zeichen wurde verwendet (z.B. in einem Elementnamen).

840 | Referenz für clientseitiges JavaScript

491-0.book Seite 841 Mittwoch, 4. April 2007 9:55 09

e-bol.net

DOMException unsigned short NO_DATA_ALLOWED_ERR = 6

Gegenwärtig nicht benutzt. unsigned short NO_MODIFICATION_ALLOWED_ERR = 7

Es wurde versucht, einen schreibgeschützten Knoten zu ändern. unsigned short NOT_FOUND_ERR = 8

Ein Knoten wurde nicht an der erwarteten Stelle gefunden. unsigned short NOT_SUPPORTED_ERR = 9

Eine Methode oder Eigenschaft wird von der aktuellen DOM-Implementierung nicht unterstützt. unsigned short INUSE_ATTRIBUTE_ERR = 10

Es wurde versucht, ein Attr mit einem Element zu assoziieren, obwohl dieser Attr-Knoten bereits mit einem anderen Element-Knoten assoziiert war. unsigned short INVALID_STATE_ERR = 11 [DOM Level 2]

Es wurde versucht, ein Objekt zu benutzen, das noch nicht oder nicht mehr in einem benutzbaren Zustand ist. Ein angegebener String enthält einen Syntaxfehler. Wird oft bei CSS-Eigenschaftsspezifikationen benutzt. unsigned short INVALID_MODIFICATION_ERR = 13 [DOM Level 2]

Es wurde versucht, den Typ eines CSSRule- oder CSSValue-Objekts zu ändern. unsigned short NAMESPACE_ERR = 14 [DOM Level 2]

Ein Fehler im Zusammenhang mit Element- oder Attribut-Namensräumen ist aufgetreten. unsigned short INVALID_ACCESS_ERR = 15 [DOM Level 2]

Es wurde versucht, auf eine Weise auf ein Objekt zuzugreifen, die von der Implementierung nicht unterstützt wird.

Eigenschaften unsigned short code

Ein Fehlercode, der Einzelheiten über die Ursache der Exception verrät. Die oben aufgeführten Konstanten zeigen die zulässigen Werte (und ihre Bedeutungen).

Beschreibung Ein DOMException-Objekt wird ausgelöst, wenn eine DOM-Methode oder -Eigenschaft falsch oder im falschen Kontext angewendet wird. Der Wert der code-Eigenschaft zeigt an, um welchen Exception-Typ es sich handelt. Beachten Sie, dass eine DOMException beim Lesen oder Schreiben einer Objekteigenschaft und beim Aufruf einer Objektmethode ausgelöst werden kann. Die Beschreibungen der Objekteigenschaften und -methoden in dieser Referenz umfassen auch eine Liste der möglichen Exception-Typen. Beachten Sie jedoch, dass bestimmte, oft ausgelöste Exceptions in dieser Liste weggelassen wurden. Wenn versucht wird, den schreibgeschützten Knoten zu ändern, wird jedes Mal eine DOMException mit einem code von NO_MODIFICATION_ALLOWED_ERR ausgelöst. Es können also die meisten Methoden und les- und schreibbare Eigenschaften des Node-Interfaces (und seiner Subinterfaces) diese Exception

Referenz für clientseitiges JavaScript |

841

Referenz für clientseitiges JavaScript

unsigned short SYNTAX_ERR = 12 [DOM Level 2]

491-0.book Seite 842 Mittwoch, 4. April 2007 9:55 09

e-bol.net

DOMImplementation

auslösen. Da schreibgeschützte Knoten nur in XML- und nicht in HTML-Dokumenten auftauchen und da sie ganz allgemein auf die Methoden und Writable-Eigenschaften von NodeObjekten anwendbar ist, wurde auch die NO_MODIFICATION_ALLOWED_ERR-Exception bei den Beschreibungen dieser Methoden und Eigenschaften weggelassen. In ähnlicher Weise können auch viele DOM-Methoden und -Eigenschaften, die Strings zurückgeben, eine DOMException mit dem code DOMSTRING_SIZE_ERR auslösen. Sie weist darauf hin, dass der zurückzugebende Text zu lang ist, um in der darunterliegenden JavaScript-Implementierung als Stringwert dargestellt zu werden. Diese Art Exception kann zwar theoretisch von vielen Eigenschaften und Methoden ausgelöst werden, ist aber in der Praxis selten und wurde bei den Beschreibungen der relevanten Methoden und Eigenschaften ebenfalls weggelassen. Beachten Sie, dass nicht alle Exceptions im DOM durch eine DOMException signalisiert werden: Exceptions, an denen das DOM Range-Modul beteiligt ist, veranlassen das Auslösen einer RangeException.

Siehe auch RangeException

DOMImplementation Methoden, die nicht von einem bestimmten Dokument abhängig sind

DOM Level 1 Core Object ➝ DOMImplementation

Methoden createDocument( )

Erzeugt ein neues Document-Objekt mit einem Wurzelelement (die documentElementEigenschaft des zurückgegebenen Document-Objekts) des angegebenen Typs. createDocumentType( )

Erzeugt einen neuen DocumentType-Knoten. hasFeature( )

Prüft, ob die aktuelle Implementierung eine spezifizierte Version eines angegebenen Features unterstützt.

Beschreibung Das DOMImplementation-Interface ist ein Platzhalter für Methoden, die sich nicht speziell auf ein bestimmtes Document-Objekt beziehen, sondern für die Implementierung des DOM »global« sind. Eine Referenz auf das DOMImplementation-Objekt beschaffen Sie sich mit der implementation-Eigenschaft eines beliebigen Document-Objekts.

842 | Referenz für clientseitiges JavaScript

491-0.book Seite 843 Mittwoch, 4. April 2007 9:55 09

e-bol.net

DOMImplementation.createDocument( )

DOMImplementation.createDocument( )

DOM Level 2 Core

Erzeugt ein neues Document und das angegebene Wurzelelement

Überblick Document createDocument(String namensraumURI, String qualifizierterName, DocumentType doctyp) throws DOMException;

Argumente namensraumURI

Der eindeutige Bezeichner des Namensraums des Wurzelelements, das für das Dokument erzeugt wird, oder null, wenn kein Namensraum vorhanden ist. qualifizierterName

doctyp

Das DocumentType-Objekt für das neu erzeugte Document, oder null, wenn keines gewünscht wird. Rückgabewert Ein Document-Objekt, dessen documentElement-Eigenschaft auf einen Wurzelelement-Knoten des angegebenen Typs gesetzt ist. Exceptions Diese Methode kann unter folgenden Umständen eine DOMException mit den folgenden codeWerten auslösen: INVALID_CHARACTER_ERR qualifizierterName enthält ein unzulässiges Zeichen. NAMESPACE_ERR qualifizierterName ist nicht wohlgeformt, oder qualifizierterName und namensraumURI

passen nicht zueinander. NOT_SUPPORTED_ERR

Die aktuelle Implementierung unterstützt keine XML-Dokumente und implementiert diese Methode nicht. WRONG_DOCUMENT_ERR doctyp wird bereits für ein anderes Dokument genutzt oder wurde von einem anderen

DOMImplementation-Objekt erzeugt.

Beschreibung Diese Methode erzeugt ein neues XML Document-Objekt und das dafür angegebene documentElement-Wurzelobjekt. Wenn das Argument doctyp nicht null ist, wird die ownerDocumentEigenschaft dieses DocumentType-Objekts auf das neu erzeugte Dokument gesetzt.

Referenz für clientseitiges JavaScript |

843

Referenz für clientseitiges JavaScript

Der Name des Wurzelelements, das für dieses Dokument angelegt werden soll. Wenn namensraumURI nicht null ist, sollte dieser Name ein Namensraumpräfix und einen Doppelpunkt enthalten.

491-0.book Seite 844 Mittwoch, 4. April 2007 9:55 09

e-bol.net

DOMImplementation.createDocumentType( )

Diese Methode wird zum Erzeugen von XML-Dokumenten gebraucht und kann von NurHTML-Implementierungen nicht unterstützt werden.

Siehe auch DOMImplementation.createDocumentType( )

DOMImplementation.createDocumentType( )

DOM Level 2 Core

Erzeugt einen DocumentType-Knoten

Überblick DocumentType createDocumentType(String qualifizierterName, String publicId, String systemId) throws DOMException;

Argumente qualifizierterName

Der Name des Dokumenttyps. Wenn Sie XML-Namensräume verwenden, kann dies ein qualifizierter Name sein, zu dem ein Namensraumpräfix und ein lokaler Name gehören, der durch einen Doppelpunkt von dem Namensraumpräfix getrennt wird. publicId

Der öffentliche Bezeichner des Dokumenttyps oder null. systemId

Der Systembezeichner des Dokumenttyps oder null. Dieses Argument gibt in der Regel den lokalen Dateinamen einer DTD-Datei an. Rückgabewert Ein neues DocumentType-Objekt mit der ownerDocument-Eigenschaft null. Exceptions Diese Methode kann eine DOMException mit einem der folgenden code-Werte auslösen: INVALID_CHARACTER_ERR qualifizierterName enthält ein unzulässiges Zeichen. NAMESPACE_ERR qualifizierterName ist nicht wohlgeformt. NOT_SUPPORTED_ERR

Die aktuelle Implementierung unterstützt keine XML-Dokumente und implementiert diese Methode nicht.

Beschreibung Diese Methode erzeugt einen neuen DocumentType-Knoten. Sie spezifiziert nur eine externe Teilmenge des Dokumenttyps. Bis zum Level 2 bietet der DOM-Standard noch keine Möglichkeit, eine interne Teilmenge anzugeben, und der zurückgegebene DocumentType definiert keine Entity- oder Notation-Knoten. Diese Methode ist nur bei XML-Dokumenten von Nutzen.

844 | Referenz für clientseitiges JavaScript

491-0.book Seite 845 Mittwoch, 4. April 2007 9:55 09

e-bol.net

DOMImplementation.hasFeature( )

DOMImplementation.hasFeature( )

DOM Level 1 Core

Stellt fest, ob die Implementierung ein bestimmtes Feature unterstützt

Überblick boolean hasFeature(String feature, String version);

Argumente feature

Der Name des Features, dessen Unterstützung getestet werden soll. Die gültigen FeatureNamen für den DOM Level 2-Standard werden in der Tabelle in der Beschreibung aufgeführt. Die Feature-Namen unterscheiden nicht zwischen Groß- und Kleinschreibung. version

Rückgabewert true, wenn die Implementierung die angegebene Version des angegebenen Features vollständig unterstützt, andernfalls false. Wenn keine Versionsnummer angegeben wurde, gibt die Methode true zurück, falls die Implementierung jede beliebige Version des angegebenen Features voll und ganz unterstützt.

Beschreibung Der W3C DOM-Standard ist modular, und die Implementierungen brauchen nicht unbedingt alle Module oder Features des Standards zu unterstützen. Mit dieser Methode testet man, ob eine DOM-Implementierung ein angegebenes Modul der DOM-Spezifikation unterstützt. In den Verfügbarkeitsinformationen zu den einzelnen Einträgen in dieser DOM-Referenz steht der Name des Moduls. Beachten Sie, dass Internet Explorer 5 und 5.5 die DOM Level 1-Spezifikation zwar teilweise unterstützen, aber eine Unterstützung für diese wichtige Methode erst mit dem IE 6 hinzugefügt wurde. Die folgende Tabelle zeigt alle Modulnamen, auf die das feature-Argument gesetzt werden kann. Feature

Beschreibung

Core

Node, Element, Document, Text und andere Basis-Interfaces, die für alle DOM-Implementierungen erforderlich sind, werden implementiert. Alle dazu konformen Implementierungen müssen dieses Modul unterstützen.

HTML

HTMLElement, HTMLDocument und die anderen HTML-spezifischen Interfaces werden implementiert.

XML

Entity, EntityReference, ProcessingInstruction, Notation und die anderen Knotentypen, die nur für XMLDokumente nützlich sind, werden implementiert.

StyleSheets

Einfache Interfaces zur Beschreibung generischer Stylesheets werden implementiert.

Referenz für clientseitiges JavaScript |

845

Referenz für clientseitiges JavaScript

Die Feature-Versionsnummer, deren Unterstützung getestet werden soll, bzw. null oder der leere String "", wenn die Unterstützung einer beliebigen Version des betreffenden Features ausreicht. In der Level 2-DOM-Spezifikation werden die Versionsnummern 1.0 und 2.0 unterstützt.

491-0.book Seite 846 Mittwoch, 4. April 2007 9:55 09

e-bol.net

DOMParser Feature

Beschreibung

CSS

Interfaces für CSS-Stylesheets werden implementiert.

CSS2

Das CSS2Properties-Interface wird implementiert.

Events

Die wichtigsten Interfaces für das Event-Handling werden implementiert.

UIEvents

Die Interfaces für Benutzeroberflächen-Events werden implementiert.

MouseEvents

Die Interfaces für Maus-Events werden implementiert.

HTMLEvents

Die Interfaces für HTML-Events werden implementiert.

MutationEvents

Die Interfaces für Document-Mutation-Events werden implementiert.

Range

Die Interfaces zur Bearbeitung von Dokumentbereichen werden implementiert.

Traversal

Die Interfaces für den fortgeschrittenen Dokument-Durchlauf werden implementiert

Views

Die Interfaces für Dokument-Views werden implementiert.

Beispiel Diese Methode können Sie z.B. in folgendem Code verwenden: // Prüfe, ob der Browser die DOM Level 2-Range-API unterstützt if (document.implementation && document.implementation.hasFeature && document.implementation.hasFeature("Range", "2.0")) { // Wenn ja, verwende sie hier... } else { // Wenn nicht, greife auf Code zurück, der keine Range-Objekte benötigt }

Siehe auch Node.isSupported( )

DOMParser Parst XML-Markup, um ein Document zu erzeugen

Konstruktor new DOMParser( )

Methoden parseFromString( )

Parst XML-Markup und gibt ein Document zurück.

846 | Referenz für clientseitiges JavaScript

Firefox 1.0, Safari 2.01, Opera 7.60 Object ➝ DOMParser

491-0.book Seite 847 Mittwoch, 4. April 2007 9:55 09

e-bol.net

DOMParser.parseFromString( )

Beschreibung Ein DOMParser-Objekt parst XML-Text und gibt ein XML-Document-Objekt zurück. Um einen DOMParser zu verwenden, instanziieren Sie ihn mit dem Konstruktor ohne Argumente und rufen dann seine parseFromString( )-Methode auf: var doc = (new DOMParser( )).parseFromString(text);

Internet Explorer unterstützt das DOMParser-Objekt nicht. Stattdessen unterstützt er das Parsen von XML mit Document.loadXML( ). Beachten Sie, dass das XMLHttpRequest-Objekt auch XML-Dokumente parsen kann. Vergleichen Sie dazu die responseXML-Eigenschaft des XMLHttpRequest.

Siehe auch Document.loadXML( ), XMLHttpRequest; Kapitel 21

DOMParser.parseFromString( ) Referenz für clientseitiges JavaScript

Parst XML-Markup

Überblick Document parseFromString(String text, String contentType)

Argumente text

Das zu parsende XML-Markup. contentType

Der Content Type des Texts. Dieser kann »text/xml«, »application/xml« oder »application/xhtml+xml« sein. Beachten Sie, dass »text/html« nicht unterstützt wird. Rückgabewert Ein Document-Objekt, das die geparste Repräsentation von text enthält. Eine IE-spezifische Alternative für diese Methode finden Sie unter Document.loadXML( ).

Element

DOM Level 1 Core

Ein HTML- oder XML-Element

Node ➝ Element

Subinterfaces HTMLElement

Eigenschaften readonly String tagName

Der Tag-Name des Elements. Für ein

-Element von HTML wäre das z.B. der String »P«. Bei HTML-Dokumenten wird der Tag-Name – unabhängig von seiner Schreibweise

Referenz für clientseitiges JavaScript |

847

491-0.book Seite 848 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Element

im Dokumentquelltext – in Großbuchstaben konvertiert. XML-Dokumente unterscheiden zwischen Groß- und Kleinschreibung, sodass hier der Name in exakt derselben Schreibweise wie im Dokumentquelltext wiedergegeben wird. Diese Eigenschaft hat denselben Wert wie die geerbte nodeName-Eigenschaft des Node-Interfaces.

Methoden addEventListener( )

Fügt dem Satz der Event-Handler für dieses Element eine Event-Handler-Funktion hinzu. Dies ist eine DOM-Standard-Methode, die von allen modernen Browsern außer IE unterstützt wird. attachEvent( )

Fügt dem Satz der Event-Handler für dieses Element eine Event-Handler-Funktion hinzu. Diese Methode ist die IE-spezifische Alternative zu addEventListener( ). detachEvent( )

Entfernt eine Event-Handler-Funktion von diesem Element. Diese Methode ist die IEspezifische Alternative zur normalen removeEventListener( )-Methode. dispatchEvent( )

Übermittelt ein synthetisches Event an diesen Knoten. getAttribute( )

Gibt den Wert eines angegebenen Attributs als String zurück. getAttributeNS( )

Gibt den Stringwert eines Attributs zurück, das durch den lokalen Namen und die Namensraum-URI näher spezifiziert ist. Diese Methode eignet sich nur für XML-Dokumente, die Namensräume verwenden. getAttributeNode( )

Gibt den Namen eines angegebenen Attributs als Attr-Knoten zurück. getAttributeNodeNS( )

Gibt den Attr-Wert eines Attributs zurück, das durch den lokalen Namen und die Namensraum-URI näher spezifiziert ist. Diese Methode eignet sich nur für XML-Dokumente, die Namensräume verwenden. getElementsByTagName( )

Gibt ein Array (technisch gesehen eine NodeList) zurück, das alle NachfahrenelementKnoten dieses Elements enthält, die den angegebenen Tag-Namen haben. Sie erscheinen in derselben Reihenfolge wie im Dokument. getElementsByTagNameNS( ) Wie getElementsByTagName(), nur dass der Element-Tag-Name durch einen lokalen Namen

und eine Namensraum-URI spezifiziert ist. Diese Methode eignet sich nur für XML-Dokumente, die Namensräume verwenden. hasAttribute( ) Gibt true zurück, wenn dieses Element ein Attribut des angegebenen Namens hat, andernfalls false. Beachten Sie, dass diese Methode true zurückgibt, wenn das angegebene

Attribut im Dokumentquelltext explizit spezifiziert wird oder wenn die DTD des Dokuments einen Standardnamen für dieses Attribut angibt.

848 | Referenz für clientseitiges JavaScript

491-0.book Seite 849 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Element hasAttributeNS( ) Wie hasAttribute(), nur dass das Attribut durch eine Kombination von lokalem Namen

und Namensraum-URI spezifiziert ist. Diese Methode kann nur für XML-Dokumente eingesetzt werden, die Namensräume verwenden. removeAttribute( )

Löscht das angegebene Attribut aus diesem Element. Denken Sie aber daran, dass diese Methode nur solche Attribute löscht, die im Dokumentquelltext für dieses Element explizit angegeben sind. Wenn die DTD einen Standardwert für dieses Attribut spezifiziert, dann wird dieser der neue Wert des Attributs. removeAttributeNode( )

Löscht den angegebenen Attr-Knoten aus der Liste der Attribute für dieses Element. Beachten Sie, dass sich so nur Attribute löschen lassen, die im Dokumentquelltext für dieses Element explizit angegeben sind. Wenn die DTD einen Standardwert für dieses Attribut festlegt, dann wird ein neuer Attr-Knoten erzeugt, der den Standardattributwert repräsentiert.

lokalem Namen und Namensraum-URI näher bezeichnet wird. Diese Methode eignet sich nur für XML-Dokumente, die Namensräume verwenden. removeEventListener( )

Entfernt eine Event-Handler-Funktion aus dem Satz der Handler dieses Elements. Das ist eine DOM-Standard-Methode, die von allen modernen Browsern außer IE unterstützt wird. IE verwendet detachEvent( ). setAttribute( )

Setzt das angegebene Attribut auf den angegebenen Stringwert. Wenn noch kein Attribut dieses Namens vorhanden ist, wird dem Element ein neues Attribut hinzugefügt. setAttributeNode( )

Fügt den angegebenen Attr-Knoten zur Liste der Attribute für dieses Element hinzu. Wenn bereits ein Attribut dieses Namens vorhanden ist, wird sein Wert ersetzt. setAttributeNodeNS( ) Wie setAttributeNode(), nur dass diese Methode sich für Knoten eignet, die von Document. createAttributeNS() zurückgegeben wurden. Diese Methode eignet sich nur für XML-

Dokumente, die Namensräume verwenden. setAttributeNS( ) Wie setAttribute(), nur dass das zu setzende Attribut durch die Kombination von

lokalem Namen und Namensraum-URI näher bezeichnet wird. Diese Methode eignet sich nur für XML-Dokumente, die Namensräume verwenden.

Beschreibung Das Element-Interface stellt HTML- oder XML-Elemente oder -Tags dar. Die Eigenschaft tagName gibt den Elementnamen an. Die documentElement-Eigenschaft eines Dokuments bezieht sich auf das Wurzelelement-Objekt für dieses Dokument. Die body-Eigenschaft des HTMLDocument-Objekts ist ähnlich: Sie bezieht sich auf das -Element des Dokuments. Um ein bestimmtes benanntes Element in einem HTML-Dokument zu finden, verwenden Sie

Referenz für clientseitiges JavaScript |

849

Referenz für clientseitiges JavaScript

removeAttributeNS( ) Wie removeAttribute(), nur dass das zu löschende Attribut durch eine Kombination von

491-0.book Seite 850 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Element.addEventListener( ) Document.getElementById( ) (und geben dem Element mit dem id-Attribut einen eindeutigen Namen). Um Elemente anhand von Tag-Namen zu finden, verwenden Sie getElementsByTagName( ), die sowohl eine Methode von Element als auch von Document ist. In HTMLDokumenten können Sie auch das ähnliche HTMLDocument.getElementsByName( ) verwenden, um Elemente anhand der Werte ihrer name-Attribute zu finden. Schließlich können Sie mit Document.createElement( ) auch neue Element-Objekte zum Einfügen in ein Dokument

erzeugen. Mit der addEventListener( )-Methode (und ihrer IE-spezifischen Alternative attachEvent( )) lassen sich Event-Handler-Funktionen für spezielle Eventtypen bei einem Element registrieren. Eine vollständige Beschreibung finden Sie in Kapitel 17. Technisch gesehen werden addEventListener( ), removeEventListener( ) und dispatchEvent( ) vom EventTarget-Interface der DOM Level 2 Events-Spezifikation definiert. Da alle Element-Objekte EventTarget implementieren, werden hier die Methoden aufgeführt. Die diversen anderen Methoden dieses Interfaces geben Zugriff auf die Elementattribute. In HTML-Dokumenten (und auch vielen XML-Dokumenten) haben alle Attribute einfache Stringwerte. Sie können jede erforderliche Attributbearbeitung mit den einfachen Methoden getAttribute() und setAttribute() durchführen. Wenn Sie mit XML-Dokumenten arbeiten, die Entity-Referenzen als Teile von Attributwerten enthalten können, müssen Sie mit Attr-Objekten und ihren Knoten-Teilbäumen umgehen. Sie können das Attr-Objekt für ein Attribut mit getAttributeNode() holen und mit setAttributeNode() setzen oder die Attr-Knoten des attributes[]-Arrays des Node-Interfaces durchlaufen. Wenn Sie mit einem XML-Dokument arbeiten, das XML-Namensräume verwendet, müssen Sie die Methoden einsetzen, deren Namen auf »NS« enden. In der DOM Level 1-Spezifikation gehörte die Methode normalize() zum Element-Interface. In der Level 2-Spezifikation ist normalize() dagegen Teil des Node-Interface. Alle Element-Knoten erben diese Methode und können sie nach wie vor nutzen.

Siehe auch HTMLElement, Node; Kapitel 15, Kapitel 17

Element.addEventListener( )

DOM Level 2 Events

Registriert einen Event-Handler

Überblick void addEventListener(String typ, Function listener, boolean useCapture);

Argumente typ

Der Typ von Event, für den der Event-Listener aufgerufen werden soll, z.B. »load«, »click« oder »mousedown«.

850 | Referenz für clientseitiges JavaScript

491-0.book Seite 851 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Element.attachEvent( ) listener

Die Event-Listener-Funktion, die aufgerufen wird, wenn ein Event des angegebenen Typs an dieses Element übermittelt wird. Beim Aufruf wird ein Event-Objekt an diese ListenerFunktion übergeben; sie wird als Methode des Elements aufgerufen, für das sie registriert ist. useCapture

Ist diese Eigenschaft true, so wird der angegebene listener nur beim Abfangen der EventAusbreitung aufgerufen. Häufiger ist der Wert false. Er bedeutet, dass listener nicht in der Phase des Einfangens aufgerufen wird, sondern dann, wenn dieser Knoten das tatsächliche Event-Ziel ist oder wenn das Event von seinem ursprünglichen Ziel zu diesem Knoten hochsteigt.

Beschreibung

addEventListener( ) kann mehrmals aufgerufen werden, um mehrere Event-Handler für

denselben Event-Typ auf demselben Knoten zu registrieren. Das DOM garantiert jedoch keine bestimmte Reihenfolge, in der mehrere Event-Handler aufgerufen werden. Wenn dieselbe Event-Listener-Funktion zweimal auf demselben Knoten mit denselben Argumenten für typ und useCapture registriert wird, so wird die zweite Registrierung einfach ignoriert. Wird ein neuer Event-Listener auf diesem Knoten registriert, wenn gerade ein Event auf diesem Knoten behandelt wird, so wird der neue Event-Listener für dieses Event nicht aufgerufen. Wenn ein Knoten mit Node.cloneNode() oder Document.importNode() dupliziert wird, werden die für den Originalknoten registrierten Event-Listener nicht kopiert. Diese Methode wird auch durch die Document- und Window-Objekte definiert, auf denen sie auf die gleiche Art arbeitet.

Siehe auch Event; Kapitel 17

Element.attachEvent( )

IE 4

Registriert einen Event-Handler

Überblick void attachEvent(String typ, Function listener);

Referenz für clientseitiges JavaScript |

851

Referenz für clientseitiges JavaScript

Diese Methode fügt der Menge der Listener, die auf diesem Knoten zur Behandlung von Events des angegebenen typs registriert sind, die angegebene Event Listener-Funktion hinzu. Wenn useCapture den Wert true hat, wird der Listener als Event-Listener für das Capturing hinzugefügt. Hat useCapture den Wert false, so wird er als normaler Event-Listener registriert.

491-0.book Seite 852 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Element.detachEvent( )

Argumente typ

Der Event-Typ, für den der Event-Listener aufgerufen werden soll, mit einem voranstehenden »on«-Präfix. z.B. »onload«, »onclick« oder »onmousedown«. listener

Die Event-Listener-Funktion, die aufgerufen wird, wenn ein Event des angegebenen Typs an dieses Element übergeben wird. Dieser Funktion werden keine Argumente übergeben, aber sie kann auf das Event-Objekt über die event-Eigenschaft des Window-Objekts zugreifen.

Beschreibung Diese Methode ist eine IE-spezifische Event-Registrationsmethode. Sie dient dem gleichen Zweck wie die normale addEventListener( )-Methode (die nicht von IE unterstützt wird), unterscheidet sich von dieser Funktion aber in mehreren wichtigen Punkten: • Da das IE-Event-Modell das Abfangen von Events nicht unterstützt, erwarten attachEvent( ) und detachEvent( ) lediglich zwei Argumente: den Event-Typ und die Handler-Funktion. • Die an die IE-Methoden übergebenen Event-Handler-Namen sollten das »on«-Präfix enthalten. Verwenden Sie beispielsweise nicht »click« für addEventListener( ), sondern »onclick« mit attachEvent( ). • Funktionen, die mit attachEvent( ) registriert sind, werden ohne Event-Objekt-Argument aufgerufen. Stattdessen müssen sie die event-Eigenschaft des Window-Objekts lesen. • Funktionen, die mit attachEvent( ) registriert sind, werden als globale Funktionen aufgerufen und nicht als Methoden des Dokument-Elements, in dem das Event aufgetreten ist. Wenn also ein mit attachEvent( ) registrierter Event-Handler ausgeführt wird, bezieht sich das this-Schlüsselwort nicht auf das Target-Element des Events, sondern auf das Window-Objekt. • Mit attachEvent( ) kann die gleiche Event-Handler-Funktion mehrmals registriert werden. Findet ein Event vom angegebenen Typ statt, wird die registrierte Funktion so oft aufgerufen, wie sie registriert ist. Diese Methode wird auch durch die Document- und Window-Objekte definiert, auf denen sie auf die gleiche Art arbeitet.

Siehe auch Element.addEventListener( ), Event; Kapitel 17

Element.detachEvent( ) Löscht einen Event-Listener

Überblick void detachEvent(String typ, Function listener)

852 | Referenz für clientseitiges JavaScript

IE 4

491-0.book Seite 853 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Element.dispatchEvent( )

Argumente typ

Der Event-Typ, für den der Listener gelöscht werden soll, mit einem »on«-Präfix, zum Beispiel: »onclick«. listener

Die zu entfernende Event-Listener-Funktion.

Beschreibung Diese Methode hebt die von der attachEvent( )-Methode durchgeführte Event-Handler-Funktionsregistrierung wieder auf. Es ist die IE-spezifische Alternative zu removeEventListener( ). Um eine Event-Handler-Funktion für ein Element zu löschen, rufen Sie einfach detachEvent auf und übergeben die gleichen Argumente, die Sie ursprünglich an attachEvent( ) übergeben haben. Diese Methode wird auch durch die Document- und Window-Objekte definiert, auf denen sie auf die gleiche Art arbeitet.

DOM Level 2 Events

Übermittelt ein synthetisches Event an diesen Knoten

Überblick boolean dispatchEvent(Event evt) throws EventException;

Argumente evt

Das zu übermittelnde Event-Objekt. Rückgabewert false, wenn die preventDefault()-Methode von evt während der Event-Ausbreitung aufgerufen wurde, andernfalls true. Exceptions Diese Methode löst eine Exception aus, wenn das Event-Objekt evt nicht initialisiert ist oder wenn seine type-Eigenschaft null oder ein leerer String ist.

Beschreibung Diese Methode übermittelt ein synthetisches Event, das mit Document.createEvent() erzeugt und mit der vom Event-Interface oder einem seiner Subinterfaces definierten Initialisierungsmethode initialisiert wurde. Der Knoten, auf dem die Methode aufgerufen wird, wird das Event-Ziel, aber das Event breitet sich zunächst während der Capturing-Phase im Dokumentenbaum nach unten aus und steigt dann, falls seine bubbles-Eigenschaft true ist, wieder im Dokumentenbaum nach oben, nachdem es am eigentlichen Event-Ziel behandelt wurde.

Referenz für clientseitiges JavaScript |

853

Referenz für clientseitiges JavaScript

Element.dispatchEvent( )

491-0.book Seite 854 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Element.getAttribute( )

Siehe auch Document.createEvent( ), Event.initEvent( ), MouseEvent.initMouseEvent( )

Element.getAttribute( )

DOM Level 1 Core

Gibt den Stringwert eines angegebenen Attributs zurück

Überblick String getAttribute(String name);

Argumente name

Der Name des Attributs, dessen Wert zurückgegeben werden soll. Rückgabewert Der neue Wert des Attributs als String. Wenn das Attribut nicht definiert ist, sollte diese Methode einen leeren String zurückgeben. Allerdings geben manche Implementierungen in diesem Fall null zurück.

Beschreibung getAttribute( ) gibt den Wert eines angegebenen Elementattributs zurück. Das HTMLElement-Objekt definiert JavaScript-Eigenschaften, die allen standardisierten HTML-Attributen entsprechen. Sie müssen diese Methode mit HTML-Dokumenten also nur verwenden, wenn Sie den Wert von Attributen abfragen, die nicht dem Standard entsprechen.

In XML-Dokumenten kann man auf Attributwerte nicht unmittelbar als Eigenschaften des Elements zugreifen, sondern sie müssen mit diesem Methodenaufruf nachgeschlagen werden. Bei XML-Dokumenten, die Namensräume verwenden, nehmen Sie getAttributeNS( ).

Beispiel Der folgende Code zeigt zwei verschiedene Möglichkeiten, einen Attributwert eines HTML-Elements zu beschaffen: // Hole alle Bilder im Dokument var images = document.body.getElementsByTagName("img"); // Hole das SRC-Attribut des ersten Bilds var src0 = images[0].getAttribute("src"); // Hole das SRC-Attribut des zweiten Bilds, indem du einfach die Eigenschaft liest var src1 = images[1].src;

Siehe auch Element.getAttributeNode( ), Element.getAttributeNS( ), Node

854 | Referenz für clientseitiges JavaScript

491-0.book Seite 855 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Element.getAttributeNode( )

Element.getAttributeNode( )

DOM Level 1 Core

Gibt den Attr-Knoten für das angegebene Attribut zurück

Überblick Attr getAttributeNode(String name);

Argumente name

Der Name des gewünschten Attributs. Rückgabewert Ein Attr-Knoten, der den Wert des angegebenen Attributs darstellt, oder null, wenn das Element dieses Attribut nicht hat.

Beschreibung

erhalten, die aus dem Node-Interface geerbt wurde.

Siehe auch Element.getAttribute( ), Element.getAttributeNodeNS( )

Element.getAttributeNodeNS( )

DOM Level 2 Core

Gibt den Attr-Knoten für ein Attribut mit einem Namensraum zurück

Überblick Attr getAttributeNodeNS(String namensraumURI, String lokalerName);

Argumente namensraumURI

Die URI, die den Namensraum dieses Attributs eindeutig bezeichnet, oder null, wenn kein Namensraum vorhanden ist. lokalerName

Der Bezeichner, der den Namen des Attributs innerhalb seines Namensraums angibt. Rückgabewert Der Attr-Knoten, der den Wert des angegebenen Attributs darstellt, oder null, wenn das Element dieses Attribut nicht hat.

Referenz für clientseitiges JavaScript |

855

Referenz für clientseitiges JavaScript

getAttributeNode( ) gibt einen Attr-Knoten zurück, der den Wert eines angegebenen Attributs repräsentiert. Beachten Sie, dass Sie diesen Attr-Knoten auch über die attributes-Eigenschaft

491-0.book Seite 856 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Element.getAttributeNS( )

Beschreibung Diese Methode arbeitet wie getAttributeNode(), nur dass das Attribut durch die Kombination von Namensraum-URI und einem innerhalb dieses Namensraums definierten lokalen Namen näher bezeichnet ist. Diese Methode kann nur für XML-Dokumente eingesetzt werden, die Namensräume verwenden.

Siehe auch Element.getAttributeNode( ), Element.getAttributeNS( )

Element.getAttributeNS( )

DOM Level 2 Core

Holt den Wert eines Attributs, das Namensräume verwendet

Überblick String getAttributeNS(String namensraumURI, String localName);

Argumente namensraumURI

Die URI, die den Namensraum dieses Attributs eindeutig bezeichnet, oder null, wenn kein Namensraum vorhanden ist. lokalerName

Der Bezeichner, der den Namen des Attributs innerhalb seines Namensraums angibt. Rückgabewert Der neue Wert des Attributs als String. Wurde das Attribut nicht definiert, sollte diese Methode einen leeren String zurückgeben. Manche Implementierungen geben jedoch null zurück.

Beschreibung Diese Methode funktioniert genau wie die getAttribute( )-Methode, nur dass das Attribut durch die Kombination von Namensraum-URI und einem innerhalb dieses Namensraums definierten lokalen Namen näher bezeichnet ist. Diese Methode kann nur für XML-Dokumente eingesetzt werden, die Namensräume verwenden.

Siehe auch Element.getAttribute( ), Element.getAttributeNodeNS( )

Element.getElementsByTagName( ) Sucht Nachfahren-Elemente mit einem angegebenen Tag-Namen

Überblick Element[] getElementsByTagName(String name);

856 | Referenz für clientseitiges JavaScript

DOM Level 1 Core

491-0.book Seite 857 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Element.getElementsByTagNameNS( )

Argumente name

Der Tag-Name der angegebenen Elemente oder »*«, um anzugeben, dass alle NachfahrenElemente unabhängig von ihren Tag-Namen zurückgegeben werden sollen. Rückgabewert Ein schreibgeschütztes Array (technisch gesehen eine NodeList) von Element-Objekten, die Nachfahren dieses Elements sind und den angegebenen Tag-Namen haben.

Beschreibung Diese Methode durchläuft alle Nachfahren dieses Elements und gibt ein Array (eigentlich ein NodeList-Objekt) mit Element-Knoten zurück, die alle Dokumentelemente des angegebenen Tagnamens darstellen. Die Elemente erscheinen im Rückgabe-Array in derselben Reihenfolge wie im Dokumentquelltext.

Beispiel Mit folgendem Code können Sie alle -Tags in einem Dokument finden: var divisions = document.body.getElementsByTagName("div");

Und dieser Code liefert Ihnen alle

-Tags innerhalb des ersten -Tags: var paragraphs = divisions[0].getElementsByTagname("p");

Siehe auch Document.getElementById( ) Document.getElementsByTagName( ) HTMLDocument.getElementsByName( )

Element.getElementsByTagNameNS( )

DOM Level 2 Core

Gibt Nachfahren-Elemente mit dem angegebenen Namen und Namensraum zurück

Überblick Node[] getElementsByTagNameNS(String namensraumURI, String localName);

Argumente namensraumURI

Die URI, die den Namensraum des Elements eindeutig bezeichnet. lokalerName

Der Bezeichner, der den Namen des Elements innerhalb seines Namensraums angibt.

Referenz für clientseitiges JavaScript |

857

Referenz für clientseitiges JavaScript

Das Document-Interface hat auch eine getElementsByTagName()-Methode, die genauso wie diese funktioniert, aber das gesamte Dokument und nicht nur die Nachfahren eines einzigen Elements durchläuft. Bitte verwechseln Sie diese Methode nicht mit der Methode HTMLDocument.getElementsByName(), die Elemente anhand des Werts ihrer name-Attribute und nicht anhand ihrer Tag-Namen sucht.

491-0.book Seite 858 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Element.hasAttribute( )

Rückgabewert Ein schreibgeschütztes Array (technisch gesehen eine NodeList) von Element-Objekten, die Nachfahren dieses Elements sind und den angegebenen Tag-Namen und Namensraum haben.

Beschreibung Diese Methode funktioniert wie getElementsByTagName(), nur dass der Tag-Name des gewünschten Elements durch die Kombination von Namensraum-URI und einem innerhalb dieses Namensraums definierten lokalen Namen näher bezeichnet ist. Diese Methode eignet sich nur für XML-Dokumente, die Namensräume verwenden.

Siehe auch Document.getElementsByTagNameNS( ), Element.getElementsByTagName( )

Element.hasAttribute( )

DOM Level 2 Core

Stellt fest, ob dieses Element ein angegebenes Attribut hat

Überblick boolean hasAttribute(String name);

Argumente name

Der Name des gewünschten Attributs. Rückgabewert true, wenn dieses Element einen angegebenen Wert oder Defaultwert für das bezeichnete Attribut hat, andernfalls false.

Beschreibung Diese Methode stellt fest, ob ein Element ein Attribut mit dem bezeichneten Namen hat, gibt aber den Wert dieses Attributs nicht zurück. Die Methode hasAttribute() gibt true zurück, wenn das angegebene Attribut explizit im Dokument spezifiziert ist, aber auch, wenn die interne Teilmenge des Dokumenttyps einen Standardwert dafür angibt.

Siehe auch Element.getAttribute( ), Element.setAttribute( )

Element.hasAttributeNS( ) Stellt fest, ob dieses Element ein angegebenes Attribut hat

Überblick boolean hasAttributeNS(String namensraumURI, String localName);

858 | Referenz für clientseitiges JavaScript

DOM Level 2 Core

491-0.book Seite 859 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Element.removeAttribute( )

Argumente namensraumURI

Der eindeutige Namensraumbezeichner für das Attribut oder null, wenn kein Namensraum vorhanden ist. lokalerName

Der Name des Attributs im angegebenen Namensraum. Rückgabewert true, wenn für dieses Element entweder explizit ein Wert angegeben oder ein Standardwert für das bezeichnete Attribut festgelegt wurde, andernfalls false.

Beschreibung Diese Methode funktioniert wie hasAttribute(), nur dass das zu prüfende Attribut durch seinen Namensraum und seinen Namen spezifiziert ist. Diese Methode eignet sich nur für XML-Dokumente, die Namensräume verwenden. Referenz für clientseitiges JavaScript

Siehe auch Element.getAttributeNS( ), Element.hasAttribute( ), Element.setAttributeNS( )

Element.removeAttribute( )

DOM Level 1 Core

Löscht ein angegebenes Elementattribut

Überblick void removeAttribute(String name);

Argumente name

Der Name des zu löschenden Attributs. Exceptions Diese Methode kann eine DOMException mit dem code NO_MODIFICATION_ALLOWED_ERR auslösen, wenn dieses Element schreibgeschützt ist und seine Attribute nicht gelöscht werden können.

Beschreibung removeAttribute( ) löscht ein angegebenes Attribut aus diesem Element. Wenn das angegebene Attribut einen durch den Dokumenttyp spezifizierten Standardwert hat, geben nachfolgende Aufrufe der Methode getAttribute() diesen Standardwert zurück. Wenn Sie versuchen, nicht vorhandene Attribute oder solche Attribute zu löschen, die nicht angegeben werden, sondern einen Standardwert haben, so wird dieser Versuch stillschweigend ignoriert.

Siehe auch Element.getAttribute( ), Element.setAttribute( ), Node

Referenz für clientseitiges JavaScript |

859

491-0.book Seite 860 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Element.removeAttributeNode( )

Element.removeAttributeNode( )

DOM Level 1 Core

Löscht einen Attr-Knoten aus einem Element

Überblick Attr removeAttributeNode(Attr oldAttr) throws DOMException;

Argumente altesAttr

Der Attr-Knoten, der aus dem Element gelöscht werden soll. Rückgabewert Der gelöschte Attr-Knoten. Exceptions Diese Methode kann eine DOMException mit den folgenden code-Werten auslösen: NO_MODIFICATION_ALLOWED_ERR

Das Element ist schreibgeschützt und verbietet das Löschen von Attributen. NOT_FOUND_ERR altesAttr ist kein Attribut dieses Elements.

Beschreibung Diese Methode löscht einen Attr-Knoten aus der Attributmenge eines Elements und gibt ihn zurück. Wenn das gelöschte Attribut einen durch eine DTD spezifizierten Standardwert hat, wird ein neues Attr mit diesem Standardwert hinzugefügt. Oft ist es einfacher, removeAttribute() statt dieser Methode zu benutzen.

Siehe auch Attr, Element.removeAttribute( )

Element.removeAttributeNS( )

DOM Level 2 Core

Löscht ein durch Name und Namensraum spezifiziertes Attribut

Überblick void removeAttributeNS(String namensraumURI, String localName);

Argumente namensraumURI

Der eindeutige Bezeichner des Namensraums dieses Attributs oder null, wenn kein Namensraum vorhanden ist. lokalerName

Der Name des Attributs im angegebenen Namensraum.

860 | Referenz für clientseitiges JavaScript

491-0.book Seite 861 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Element.removeEventListener( )

Exceptions Diese Methode kann eine DOMException mit dem code NO_MODIFICATION_ALLOWED_ERR auslösen, wenn dieses Element schreibgeschützt ist und seine Attribute nicht gelöscht werden können.

Beschreibung removeAttributeNS() funktioniert wie removeAttribute(), nur dass das zu löschende Attribut durch seinen Namen und Namensraum statt nur durch seinen Namen angegeben wird. Diese Methode ist nur für XML-Dokumente sinnvoll, die Namensräume verwenden.

Siehe auch Element.getAttributeNS( ), Element.removeAttribute( ), Element.setAttributeNS( )

Element.removeEventListener( )

DOM Level 2 Events

Löscht einen Event-Listener Referenz für clientseitiges JavaScript

Überblick void removeEventListener(String type, Function listener, boolean useCapture);

Argumente type

Der Event-Typ, für den der Event-Listener gelöscht werden soll. listener

Die zu entfernende Event-Listener-Funktion. useCapture true, wenn ein abfangender Event-Listener entfernt werden soll; false, wenn ein normaler

Event-Listener entfernt werden soll.

Beschreibung Diese Methode entfernt die angegebene Event-Listener-Funktion. Die Argumente typ und useCapture müssen dieselben wie in dem zugehörigen Aufruf von addEventListener() sein. Wird kein Event-Listener gefunden, der zu den angegebenen Argumenten passt, tut diese Methode gar nichts. Wenn eine Event-Listener-Funktion von dieser Methode entfernt wurde, wird sie für den angegebenen Event-Typ auf diesem Knoten nicht mehr aufgerufen. Das gilt auch dann, wenn der Event-Listener von einem anderen Listener entfernt wird, der für denselben Event-Typ auf demselben Knoten registriert ist. Diese Methode wird auch durch die Document- und Window-Objekte definiert, auf denen sie auf die gleiche Art arbeitet.

Referenz für clientseitiges JavaScript |

861

491-0.book Seite 862 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Element.setAttribute( )

Element.setAttribute( )

DOM Level 1 Core

Erzeugt oder ändert ein Elementattribut

Überblick void setAttribute(String name, String value) throws DOMException;

Argumente name

Der Name des zu erzeugenden oder zu ändernden Attributs. wert

Der Stringwert des Attributs. Exceptions Diese Methode kann eine DOMException mit den folgenden code-Werten auslösen: INVALID_CHARACTER_ERR Das name-Argument enthält ein Zeichen, das in HTML- oder XML-Attributnamen unzu-

lässig ist. NO_MODIFICATION_ALLOWED_ERR

Dieses Element ist schreibgeschützt und verbietet Attributänderungen.

Beschreibung Diese Methode setzt das angegebene Attribut auf den angegebenen Wert. Ist noch kein Attribut dieses Namens vorhanden, so wird ein neues angelegt. Die HTMLElement-Objekte eines HTML-Dokuments definieren JavaScript-Eigenschaften, die allen standardisierten HTML-Attributen entsprechen. Sie müssen diese Methode also nur verwenden, wenn Sie ein Attribut setzen wollen, das dem Standard nicht folgt.

Beispiel // Setze das TARGET-Attribut für alle Links in einem Dokument var links = document.body.getElementsByTagName("a"); for(var i = 0; i < links.length; i++) { links[i].setAttribute("target", "newwindow"); // oder einfacher: links[i].target = "newwindow" }

Siehe auch Element.getAttribute( ), Element.removeAttribute( ), Element.setAttributeNode( )

862 | Referenz für clientseitiges JavaScript

491-0.book Seite 863 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Element.setAttributeNode( )

Element.setAttributeNode( )

DOM Level 1 Core

Fügt einem Element einen neuen Attr-Knoten hinzu

Überblick Attr setAttributeNode(Attr newAttr) throws DOMException;

Argumente neuesAttr

Der Attr-Knoten, der das Attribut darstellt, das hinzugefügt oder dessen Wert geändert werden soll. Rückgabewert Der Attr-Knoten, der durch neuesAttr ersetzt wurde, oder null, wenn kein Attribut ersetzt wurde. Referenz für clientseitiges JavaScript

Exceptions Diese Methode kann eine DOMException mit einem der folgenden code-Werte auslösen: INUSE_ATTRIBUTE_ERR neuesAttr ist bereits ein Element der Attributmenge eines anderen Element-Knotens. NO_MODIFICATION_ALLOWED_ERR

Der Element-Knoten ist schreibgeschützt und verbietet Attributänderungen. WRONG_DOCUMENT_ERR neuesAttr hat eine andere ownerDocument-Eigenschaft als das Element, für das es gesetzt

wird.

Beschreibung Diese Methode fügt der Attributmenge eines Element-Knotens einen neuen Attr-Knoten hinzu. Wenn für das Element bereits ein Attribut dieses Namens existiert, wird es durch neuesAttr ersetzt, und der ersetzte Attr-Knoten wird zurückgegeben. Wenn noch kein solches Attribut existiert, definiert diese Methode ein neues Attribut für das Element. Normalerweise ist es einfacher, setAttribute() anstelle von setAttributeNode() zu verwenden.

Siehe auch Attr, Document.createAttribute( ), Element.setAttribute( )

Element.setAttributeNodeNS( )

DOM Level 2 Core

Fügt einem Element einen Namensraum-Attr-Knoten hinzu

Überblick Attr setAttributeNodeNS(Attr newAttr) throws DOMException;

Referenz für clientseitiges JavaScript |

863

491-0.book Seite 864 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Element.setAttributeNS( )

Argumente neuesAttr

Der Attr-Knoten, der das Attribut darstellt, das hinzugefügt oder dessen Wert geändert werden soll. Rückgabewert Der Attr-Knoten, der durch neuesAttr ersetzt wurde, oder null, wenn kein Attribut ersetzt wurde. Exceptions Diese Methode löst aus denselben Gründen wie setAttributeNode() Exceptions aus. Sie kann auch eine DOM-Exception mit dem code NOT_SUPPORTED_ERR auslösen, um anzuzeigen, dass die Methode deswegen nicht implementiert wird, weil die aktuelle Implementierung keine XMLDokumente und -Namensräume unterstützt.

Beschreibung Diese Methode funktioniert wie setAttributeNode(), nur dass sie für Attr-Knoten entwickelt wurde, die Attribute repräsentieren, die durch ihren Namensraum und Namen spezifiziert werden. Diese Methode eignet sich nur für XML-Dokumente, die Namensräume verwenden. Eventuell ist sie auf Browsern, die keine XML-Dokumente unterstützen, auch gar nicht implementiert (d.h., sie löst einen NOT_SUPPORTED_ERR aus).

Siehe auch Attr, Document.createAttributeNS( ), Element.setAttributeNS( ), Element.setAttributeNode( )

Element.setAttributeNS( )

DOM Level 2 Core

Erzeugt oder ändert ein Attribut mit einem Namensraum

Überblick void setAttributeNS(String namensraumURI, String qualifizierterName, String wert) throws DOMException;

Argumente namensraumURI

Die URI, die den Namensraum des zu setzenden oder zu erzeugenden Attributs eindeutig identifiziert, oder null, wenn kein Namensraum vorhanden ist. qualifizierterName

Der Attributname, angegeben durch ein optionales Namensraumpräfix und einen Doppelpunkt, gefolgt von einem innerhalb des Namensraums definierten lokalen Namen. wert

Der neue Wert des Attributs.

864 | Referenz für clientseitiges JavaScript

491-0.book Seite 865 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Event

Exceptions Diese Methode kann eine DOMException mit den folgenden code-Werten auslösen: INVALID_CHARACTER_ERR Das Argument qualifizierterName enthält ein Zeichen, das in HTML- oder XML-Attribut-

namen unzulässig ist. NAMESPACE_ERR qualifizierterName ist nicht wohlgeformt, oder qualifizierterName und namensraumURI

passen nicht zueinander. NO_MODIFICATION_ALLOWED_ERR

Dieses Element ist schreibgeschützt und verbietet Attributänderungen. NOT_SUPPORTED_ERR

Die DOM-Implementierung unterstützt keine XML-Dokumente.

Beschreibung

Diese Methode eignet sich nur für XML-Dokumente, die Namensräume verwenden. Eventuell ist sie auf Browsern, die keine XML-Dokumente unterstützen, auch gar nicht implementiert (d.h., sie löst einen NOT_SUPPORTED_ERR aus).

Siehe auch Element.setAttribute( ), Element.setAttributeNode( )

Event Informationen über ein Event

DOM Level 2 Events, IE Object ➝ Event

Subinterfaces UIEvent

Standardeigenschaften Die folgenden Eigenschaften werden vom DOM Level 2 Events-Standard definiert. Zusätzliche, typenspezifische Event-Eigenschaften finden Sie unter KeyEvent, MouseEvent und UIEvent: readonly boolean bubbles true, wenn das Element aufgrund seines Typs aufsteigt (solange nicht stopPropagation( ) aufgerufen wird), andernfalls false. readonly boolean cancelable true, wenn die Standardaktion zu diesem Event mit preventDefault( ) gestrichen werden kann, andernfalls false.

Referenz für clientseitiges JavaScript |

865

Referenz für clientseitiges JavaScript

Diese Methode ähnelt setAttribute(), nur dass das zu erzeugende oder zu setzende Attribut durch eine Namensraum-URI und einen qualifizierten Namen spezifiziert ist, der aus einem Namensraumpräfix, einem Doppelpunkt und einem innerhalb des Namensraums gültigen lokalen Namen besteht.

491-0.book Seite 866 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Event readonly Object currentTarget

Das Element, Document oder Window-Objekt, das dieses Event momentan verarbeitet. Beim Abfangen und Aufsteigen unterscheidet sich das von target. readonly unsigned short eventPhase

Die aktuelle Phase der Event-Ausbreitung. Der Wert ist einer der drei nachfolgend aufgeführten Konstanten, die die Phase des Abfangens, die normale Event-Übermittlung und die Aufsteigephase repräsentieren: eventPhase Constant

Wert

Event.CAPTURING_PHASE

1

Event.AT_TARGET

2

Event.BUBBLING_PHASE

3

readonly Object target

Der Zielknoten für dieses Event, d.h. das Element, Document oder Window-Objekt, das das Event erzeugte. readonly Date timeStamp

Das Datum und die Uhrzeit, zu der das Event eintrat (oder, technisch gesprochen, zu der das Event-Objekt erzeugt wurde). Implementierungen brauchen in diesem Feld keine gültige Zeitdaten bereitzustellen. Falls keine solchen vorhanden sind, sollte die getTime( )Methode dieses Datums-Objekts 0 zurückgeben. Vergleichen Sie dazu Date in Teil III in diesem Buch. readonly String type

Der Name des Events, das dieses Event-Objekt darstellt. Das ist der Name, unter dem der Event-Handler registriert wurde, oder auch der Name der Event-Handler-Eigenschaft, bei dem das vorangestellte »on« entfernt wurde, z.B. »click«, »load« oder »submit«.

IE-Eigenschaften Internet Explorer unterstützt (zumindest bis IE 7) das standardisierte DOM-Event-Modell nicht. Das Event-Objekt von IE definiert eine vollständig andere Gruppe von Eigenschaften. Das IE-Event-Modell definiert keine Vererbungshierarchie für unterschiedliche Event-Typen. Folglich sind alle Eigenschaften, die für einen beliebigen Event-Typ relevant sind, hier aufgeführt: boolean altKey

Gibt an, ob beim Eintreten des Events die Alt-Taste gedrückt war. integer button

Bei Maus-Events gibt button an, welche Maustaste(n) gedrückt war(en). Dieser Wert ist eine Bitmaske: Beim Drücken der linken Maustaste wird das 1er-Bit gesetzt, beim Drücken der rechten Maustaste das 2er-Bit, und beim Drücken der mittleren Maustaste (einer Maus mit drei Tasten) wird das 4er-Bit gesetzt. boolean cancelBubble

Wenn ein Event-Handler die Weitergabe eines Events an umgebende Objekte verhindern soll, muss er diese Eigenschaft auf true setzen.

866 | Referenz für clientseitiges JavaScript

491-0.book Seite 867 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Event integer clientX, clientY

Die Koordinaten relativ zur Webbrowser-Seite, bei der das Event auftrat. boolean ctrlKey

Gibt an, ob beim Eintreten des Events die Strg-Taste gedrückt war. Element fromElement Bei mouseover- und mouseout-Events bezieht sich fromElement auf das Objekt, von dem sich

der Mauszeiger wegbewegt. integer keyCode

Für Tastendruck-Events gibt diese Eigenschaft den Unicode-Zeichencode an, den die gedrückte Taste generiert. Für keydown- und keyup-Events gibt sie den virtuellen Tastencode der gedrückten Taste an. Virtuelle Tastencodes können vom benutzten Tastaturlayout abhängen. integer offsetX, offsetY

Die Koordinaten, bei denen das Event im Koordinatensystem seines Quellelements auftrat (siehe srcElement). boolean returnValue

integer screenX, screenY

Diese Eigenschaften geben relativ zum Bildschirm die Koordinaten an, bei denen das Event auftrat. boolean shiftKey

Gibt an, ob beim Eintreten des Events die Umschalt-Taste gedrückt war. Object srcElement

Eine Referenz auf das Window-, Document- oder Element-Objekt, das das Event generierte. Element toElement Bei mouseover- und mouseout-Events bezieht sich toElement auf das Objekt, zu dem sich der

Mauszeiger bewegt. String type

Der Typ des Events. Ihr Wert ist der Name des Event-Handlers ohne das Präfix »on«. Wenn also der Event-Handler onclick() aufgerufen wird, dann ist die type-Eigenschaft des Event-Objekts »click«. integer x, y

Gibt die X- und Y-Koordinaten an, an denen das Event relativ zum Dokument stattfand, oder relativ zum innersten umgebenden Element, das mit CSS dynamisch positioniert wurde.

Referenz für clientseitiges JavaScript |

867

Referenz für clientseitiges JavaScript

Wenn diese Eigenschaft gesetzt ist, hat ihr Wert Vorrang vor dem tatsächlich von einem Event-Handler zurückgegebenen Wert. Wenn Sie diese Eigenschaft auf false setzen, wird die Standardaktion des Quellelements, auf dem das Event auftrat, aufgehoben.

491-0.book Seite 868 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Event.initEvent( )

Standard-Methoden Die nachfolgenden Methoden werden von der DOM Level 2 Events-Spezifikation definiert. Im IE-Event-Modell hat das Event-Objekt keine Methoden: initEvent( )

Initialisiert die Eigenschaften eines neu erzeugten Event-Objekts. preventDefault( )

Teilt dem Webbrowser mit, dass er die mit diesem Event zusammenhängende Standardaktion (falls vorhanden) nicht ausführen soll. Wenn das Event von einer Art ist, die nicht aufgehoben werden kann, bleibt diese Methode wirkungslos. stopPropagation( )

Verhindert die weitere Ausbreitung des Events während der Capturing-, Ziel- und Bubbling-Phase der Event-Weitergabe. Nach dem Aufruf dieser Methode werden zwar, falls vorhanden, weitere Event-Handler für dasselbe Event auf demselben Knoten aufgerufen, aber an andere Knoten wird das Event nicht mehr weitergereicht.

Beschreibung Die Eigenschaften eines Event-Objekts liefern Einzelheiten über ein Event, wie z.B. das Element, auf dem das Event stattfand. Die Methoden eines Event-Objekts können die Ausbreitung des Events überwachen. Der DOM Level 2 Event-Standard definiert ein standardisiertes Event-Modell, das von allen modernen Browsern außer Internet Explorer implementiert wird. IE definiert sein eigenes, inkompatibles Modell. Dieser Referenzeintrag führt die Eigenschaften des standardisierten Event-Objekts und des IE-Event-Objekts auf. Weitere Einzelheiten bezüglich der beiden Event-Modelle finden Sie in Kapitel 17. Achten Sie besonders darauf, dass ein Event-Objekt im standardmäßigen Event-Modell an die Event-Handler-Funktion übergeben wird, ein Event-Objekt im IE-Event-Modell aber in der event-Eigenschaft des Window-Objekts gespeichert wird. Im standardisierten Event-Modell definieren verschiedene Subinterfaces von Event zusätzliche Eigenschaften, die Einzelheiten zu speziellen Event-Typen enthalten. Im IE-Event-Modell gibt es nur einen Typ von Event-Objekt. Er wird für alle Event-Typen verwendet.

Siehe auch KeyEvent, MouseEvent, UIEvent; Kapitel 17

Event.initEvent( ) Initialisiert die Eigenschaften eines neuen Events

Überblick void initEvent(String eventTypArg, boolean kannAufsteigenArg, boolean abbrechbarArg);

868 | Referenz für clientseitiges JavaScript

DOM Level 2 Events

491-0.book Seite 869 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Event.preventDefault( )

Argumente eventTypArg

Der Typ des Events. Er kann einer der vordefinierten Typen wie z.B. »load« oder »submit« oder auch ein selbstdefinierter Typ Ihrer Wahl sein. Mit »DOM« beginnende Namen sind allerdings reserviert. kannAufsteigenArg

Gibt an, ob das Event aufsteigen wird. abbrechbarArg

Gibt an, ob das Event mit preventDefault() aufgehoben werden kann.

Beschreibung Diese Methode initialisiert jeweils die Eigenschaften type, bubbles und cancelable bei einem synthetischen, mit Document.createEvent() erzeugten Event-Objekt. Bei neu erstellten EventObjekten muss diese Methode aufgerufen werden, bevor sie mit der dispatchEvent( )-Methode des Document- oder Element-Objekts übermittelt werden. Referenz für clientseitiges JavaScript

Siehe auch Document.createEvent( ), MouseEvent.initMouseEvent( ), UIEvent.initUIEvent( )

Event.preventDefault( )

DOM Level 2 Events

Hebt die Standardaktion eines Events auf

Überblick void preventDefault( );

Beschreibung Diese Methode teilt dem Webbrowser mit, dass er eine eventuell vorhandene Standardaktion für dieses Event nicht ausführen darf. Wenn z.B. die type-Eigenschaft »submit« ist, kann jeder Event-Handler, der während einer Event-Ausbreitungsphase aufgerufen wird, das Abschicken des Formulars verhindern, indem er diese Methode aufruft. Wenn die cancelable-Eigenschaft eines Event-Objekts false ist, ist entweder gar keine Standardaktion vorhanden, oder es gibt eine Standardaktion, die sich nicht verhindern lässt. In beiden Fällen hat der Aufruf der Methode keinen Effekt.

Event.stopPropagation( )

DOM Level 2 Events

Reicht ein Event nicht mehr weiter

Überblick void stopPropagation( );

Referenz für clientseitiges JavaScript |

869

491-0.book Seite 870 Mittwoch, 4. April 2007 9:55 09

e-bol.net

ExternalInterface

Beschreibung Diese Methode unterbindet die Weiterverbreitung eines Events und verhindert, dass es an andere Document-Knoten übermittelt wird. Sie kann in jeder Ausbreitungsphase aufgerufen werden. Sie verhindert zwar nicht den Aufruf anderer Event-Handler auf demselben Document-Knoten, aber sie unterbindet, dass das Event an andere Knoten weitergeleitet wird.

ExternalInterface

ActionScript-Objekt in Flash 8

Ein bidirektionales Interface zu Flash

Statische Eigenschaften available

Gibt an, ob Flash mit JavaScript kommunizieren kann. Das Ergebnis ist false, wenn die Sicherheitseinstellungen für den Browser die Kommunikation unterbinden.

Statische Funktionen addCallback( )

Exportiert eine ActionScript-Methode, damit sie von JavaScript aufgerufen werden kann. call( )

Ruft eine JavaScript-Funktion aus ActionScript heraus auf.

Beschreibung ExternalInterface ist ein ActionScript-Objekt, das vom Adobe Flash-Plug-in ab Version 8 definiert wird. Es definiert zwei statische Funktionen, die der ActionScript-Code in Flash-Movies verwenden kann. Diese Funktion ermöglichen die Kommunikation zwischen JavaScript-Code in einem Webbrowser und ActionScript-Code in einem Flash-Movie.

Siehe auch FlashPlayer; Kapitel 23

ExternalInterface.addCallback( ) Exponiert eine ActionScript-Methode zur Ausführung von JavaScript aus

Überblick boolean ExternalInterface.addCallback(String name, Object instanz, Function func)

870 | Referenz für clientseitiges JavaScript

ActionScript-Funktion in Flash 8

491-0.book Seite 871 Mittwoch, 4. April 2007 9:55 09

e-bol.net

ExternalInterface.call( )

Argumente name

Der Name der zu definierenden JavaScript-Funktion. Wird die JavaScript-Funktion mit diesem Namen aufgerufen, ruft der Flash-Player die ActionScript-Funktion func als eine Methode des instance-Objekts auf. instanz

Das ActionScript-Objekt, auf dem func aufgerufen werden soll, oder null. Dieses Argument wird zum Wert des this-Schlüsselworts, wenn func aufgerufen wird. func

Die ActionScript-Funktion, die aufgerufen wird, wenn die JavaScript-Funktion mit dem Namen name aufgerufen wird. Rückgabewert true bei Erfolg, false bei einem Fehlschlag.

Beschreibung

Die Argumente der JavaScript-Funktion werden konvertiert und an func übergeben. Der Rückgabewert von func wird konvertiert und wird zum Rückgabewert der JavaScript-Funktion. Als Argumente und Rückgabewerte sind elementare Zahlen, Strings und Boolesche Werte zulässig sowie Objekte und Arrays, die elementare Werte enthalten. Ein clientseitiges JavaScriptObjekt, wie z.B. ein Window oder Document, kann allerdings nicht an eine ActionScriptFunktion übergeben werden. Außerdem kann kein Flash-spezifisches ActionScript-Objekt, wie z.B. ein MovieClip, an JavaScript zurückgegeben werden.

Siehe auch FlashPlayer; Kapitel 23

ExternalInterface.call( )

ActionScript-Funktion in Flash 8

Ruft eine JavaScript-Funktion aus ActionScript heraus auf

Überblick Object ExternalInterface.call(String name, Object args...)

Referenz für clientseitiges JavaScript |

871

Referenz für clientseitiges JavaScript

Diese statische Funktion wird vom ActionScript-Code in Flash-Movies verwendet, damit JavaScript-Code in einem Webbrowser ActionScript-Code aufrufen kann. Beim Aufruf von addCallback( ) definiert sie eine Toplevel-JavaScript-Funktion mit dem Namen name. Wird diese Funktion aufgerufen, wird die ActionScript-Funktion func als eine Methode des ActionScriptObjekts instance aufgerufen.

491-0.book Seite 872 Mittwoch, 4. April 2007 9:55 09

e-bol.net

FileUpload

Argumente name

Der Name der aufzurufenden JavaScript-Funktion. args...

Keine, ein oder mehrere Argumente, die konvertiert und an die JavaScript-Funktion übergeben werden sollen. Rückgabewert Der Rückgabewert der JavaScript-Funktion, zu einem ActionScript-Wert konvertiert.

Beschreibung Diese statische Funktion wird von ActionScript-Code in einem Flash-Movie verwendet, um eine JavaScript-Funktion aufzurufen, die in dem Webbrowser definiert ist, in dem das FlashMovie eingebettet ist. Erläuterungen zur Konvertierung von Funktionsargumenten und Rückgabewerten zwischen ActionScript und JavaScript finden Sie unter ExternalInterface. addCallback( ).

FileUpload Siehe Input

FlashPlayer

Flash 2.0

Plug-in für Flash-Movies

Methoden GetVariable( )

Gibt den Wert einer Variablen zurück, die von einem Flash-Movie definiert wird. GotoFrame( )

Springt zur angegebenen Frame-Nummer im Movie. IsPlaying( )

Überprüft, ob das Movie läuft. LoadMovie( )

Lädt ein Hilfs-Flash-Movie und zeigt es an einem angegebenen Layer oder Level des momentanen Movies an. Pan( )

Verschiebt den Viewport des Movies. PercentLoaded( )

Gibt an, wie weit der Movie-Ladevorgang fortgeschritten ist. Play( )

Beginnt mit dem Abspielen des Movies. Rewind( )

Spult das Movie auf sein erstes Frame zurück.

872 | Referenz für clientseitiges JavaScript

491-0.book Seite 873 Mittwoch, 4. April 2007 9:55 09

e-bol.net

FlashPlayer.GetVariable( ) SetVariable( )

Setzt eine von einem Flash-Movie definierte Variable. SetZoomRect( )

Setzt den Bereich des Movies, der vom Flash-Player angezeigt wird. StopPlay( )

Hält das Movie an. TotalFrames( )

Gibt die Länge des Movies als Anzahl der Frames zurück. Zoom( )

Ändert die Größe des Movie-Viewports.

Beschreibung

Steht Ihnen ein FlashPlayer-Objekt zur Verfügung, können Sie die verschiedenen von ihm definierten JavaScript-Methoden verwenden, um die Wiedergabe des Movies zu steuern und um mit ihm durch das Setzen und Abfragen von Variablen in Interaktion zu treten. Beachten Sie, dass alle FlashPlayer-Methoden mit einem Großbuchstaben beginnen, was bei JavaScript auf der Clientseite keine geläufige Namenskonvention ist.

Siehe auch Kapitel 23

FlashPlayer.GetVariable( )

Flash 4

Gibt einen in einem Flash-Movie definierten Wert zurück

Überblick String GetVariable(String variablenName)

Argumente variablenName

Der Name der im Flash-Movie definierten Variablen. Rückgabewert Der Wert der angegebenen Variablen als String, oder null, wenn keine solche Variable vorhanden ist.

Referenz für clientseitiges JavaScript |

873

Referenz für clientseitiges JavaScript

Ein FlashPlayer-Objekt repräsentiert ein in einer Webseite eingebettetes Flash-Movie und die Instanz des Flash-Plug-ins, das diesen Film abspielt. Sie können auf das FlashPlayer-Objekt mit Document.getElementById( ) zugreifen. Damit können Sie beispielsweise das - oder -Tag erhalten, das den Film in die Webseite einbettet.

491-0.book Seite 874 Mittwoch, 4. April 2007 9:55 09

e-bol.net

FlashPlayer.GotoFrame( )

FlashPlayer.GotoFrame( )

Flash 2

Springt zum angegebenen Frame eines Movies

Überblick void GotoFrame(integer frameNummer)

Argumente frameNummer

Die FrameNummer, zu der gesprungen werden soll.

Beschreibung Diese Funktion springt zum angegebenen Frame des Films – oder zum letzten verfügbaren Frame, wenn das angegebene Frame noch nicht geladen wurde. Um dieses unbestimmbare Verhalten zu umgehen, können Sie mit PercentLoaded( ) feststellen, wie weit der Film bereits geladen wurde.

FlashPlayer.IsPlaying( )

Flash 2

Überprüft, ob ein Movie läuft

Überblick boolean IsPlaying( )

Rückgabewert true, wenn der Film abgespielt wird, andernfalls false.

FlashPlayer.LoadMovie( )

Flash 3

Lädt ein Hilfs-Movie

Überblick void LoadMovie(integer layer, String url)

Argumente layer

Der Level oder Layer innerhalb des momentanen Movies, auf dem das neu geladene Movie angezeigt werden soll. url

Die URL des zu ladenden Movies.

874 | Referenz für clientseitiges JavaScript

491-0.book Seite 875 Mittwoch, 4. April 2007 9:55 09

e-bol.net

FlashPlayer.Pan( )

Beschreibung Diese Methode lädt ein Hilfs-Movie von der angegebenen url und zeigt es am angegebenen layer innerhalb des momentanen Movies an.

FlashPlayer.Pan( )

Flash 2

Verschiebt den Viewport des Movies

Überblick void Pan(integer dx, integer dy, integer mode)

Argumente dx, dy

Das horizontale und vertikale Ausmaß, um das verschoben werden soll. Dieses Argument legt fest, wie die Werte dx und dy interpretiert werden sollen. Ist dieses Argument 0, werden die anderen Argumente als Pixel interpretiert. Ist das Argument 1, werden die anderen als Prozentsätze angesehen.

Beschreibung Der Flash-Player definiert einen Viewport, durch den Flash-Movies sichtbar sind. In der Regel stimmt die Größe des Viewports mit der Größe des Movies überein. Das ist jedoch nicht der Fall, wenn SetZoomRect( ) oder Zoom( ) aufgerufen wurden: Diese Methoden können den Viewport so verändern, dass nur ein Teil des Movies bis zum Bildschirm durchkommt. Zeigt der Viewport nur einen Teil des Films, verschiebt die Methode Pan( ) den Viewport, wodurch ein anderer Filmteil sichtbar wird. Das Bild lässt sich mit dieser Methode jedoch nicht über die Filmkanten hinaus verschieben.

Siehe auch FlashPlayer.SetZoomRect( ), FlashPlayer.Zoom( )

FlashPlayer.PercentLoaded( )

Flash 2

Zeigt an, wie viel des Movies bereits geladen wurde

Überblick integer PercentLoaded( )

Rückgabewert Ein ganze Zahl zwischen 0 und 100, die den ungefähren Prozentsatz des Movies angibt, der bereits in den Player geladen wurde.

Referenz für clientseitiges JavaScript |

875

Referenz für clientseitiges JavaScript

mode

491-0.book Seite 876 Mittwoch, 4. April 2007 9:55 09

e-bol.net

FlashPlayer.Play( )

FlashPlayer.Play( )

Flash 2

Spielt ein Movie ab

Überblick void Play( )

Beschreibung Beginnt, das Movie abzuspielen.

FlashPlayer.Rewind( )

Flash 2

Spult das Movie auf sein erstes Frame zurück

Überblick void Rewind( )

Beschreibung Diese Methode spult das Movie auf sein erstes Frame zurück.

FlashPlayer.SetVariable( )

Flash 4

Setzt eine von einem Flash-Movie definierte Variable

Überblick void SetVariable(String name, String wert)

Argumente name

Der Name der zu setzenden Variable. wert

Der neue Wert für die angegebene Variable. Dieser Wert muss ein String sein.

Beschreibung Diese Methode legt einen Wert für eine benannte und vom Flash-Movie definierte Variable fest.

876 | Referenz für clientseitiges JavaScript

491-0.book Seite 877 Mittwoch, 4. April 2007 9:55 09

e-bol.net

FlashPlayer.SetZoomRect( )

FlashPlayer.SetZoomRect( )

Flash 2

Legt den Viewport eines Movies fest

Überblick void SetZoomRect(integer links, integer oben, integer rechts, integer unten)

Argumente links, oben

Die Koordinaten der linken oberen Ecke des Viewports, angegeben in Twips. rechts, unten

Die Koordinaten der rechten unteren Ecke des Viewports, angegeben in Twips.

Beschreibung

Siehe auch FlashPlayer.Pan( ), FlashPlayer.Zoom( )

FlashPlayer.StopPlay( )

Flash 2

Hält das Movie an

Überblick void StopPlay( )

Beschreibung Hält das Movie an.

FlashPlayer.TotalFrames( )

Flash 2

Gibt die Länge des Movies zurück, gemessen in Frames

Überblick integer TotalFrames( )

Beschreibung Diese Methode gibt die Länge des Movies zurück, gemessen in Frames.

Referenz für clientseitiges JavaScript |

877

Referenz für clientseitiges JavaScript

Diese Methode definiert den Viewport des Movies, d.h., sie legt ein Subrechteck des Movies fest, das im Flash-Player erscheinen soll. Flash-Movies werden in einer als Twip bezeichneten Einheit gemessen. Ein Punkt besteht aus 20 Twips und ein Inch aus 1440 Twips.

491-0.book Seite 878 Mittwoch, 4. April 2007 9:55 09

e-bol.net

FlashPlayer.Zoom( )

FlashPlayer.Zoom( )

Flash 2

Heranzoomen oder wegzoomen

Überblick void Zoom(integer prozent)

Argumente prozent

Der Prozentsatz, um den der Viewport skaliert werden soll, oder 0, um den Viewport auf seine volle Größe zurückzusetzen.

Beschreibung Diese Methode skaliert den Viewport um einen festgelegten Prozentsatz. Argumente zwischen 1 und 99 verkleinern die Größe des Viewports, wodurch Objekte im Movie größer erscheinen. Argumente über 100 vergrößern den Viewport (aber nicht über die Größe des Movies hinaus), wodurch Objekte im Movie kleiner erscheinen. Ein Spezialfall ist ein Argument von 0, das den Viewport auf seine volle Größe zurücksetzt, wodurch das gesamte Movie sichtbar ist.

Form

DOM Level 2 HTML

Ein -Element in einem HTML-Dokument

Node ➝ Element ➝ HTMLElement ➝ Form

Eigenschaften readonly HTMLCollection elements

Ein Array (HTMLCollection) mit allen Formularelementen. Siehe Form.elements[]. readonly long length

Die Anzahl der Formularelemente im Formular. Es ist derselbe Wert wie elements.length. Neben diesen Eigenschaften definiert Form auch die Eigenschaften in der folgenden Tabelle, die direkt HTML-Attributen entsprechen. Eigenschaft

Attribut

Beschreibung

String acceptCharset

acceptcharset

Zeichensätze, die der Server akzeptieren kann

String action

action

URL des Formular-Handlers

String enctype

enctype

Codierung des Formulars

String method

method

HTTP-Methode zum Übermitteln des Formulars

String name

name

Name des Formulars

String target

target

Frame- oder Fenstername für die Ergebnisse der Formularübermittlung

Methoden reset()

Setzt alle Formularelemente auf ihre Standardwerte zurück.

878 | Referenz für clientseitiges JavaScript

491-0.book Seite 879 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Form submit()

Reicht das Formular bei einem Webserver ein.

Event-Handler onreset

Wird unmittelbar vor dem Zurücksetzen der Formularelemente aufgerufen. onsubmit

Wird unmittelbar vor dem Übermitteln des Formulars aufgerufen. Mit diesem EventHandler können Formulareinträge vor der Übermittlung auf ihre Gültigkeit geprüft werden.

HTML-Syntax Ein Form-Objekt wird mit dem Standard-HTML-Tag erzeugt. Das Formular enthält Eingabeelemente, die mit , , und anderen Tags erzeugt wurden: Referenz für clientseitiges JavaScript

// Hier kommen Formulartext und Eingabeelemente hin

Beschreibung Das Form-Objekt stellt ein -Element in einem HTML-Dokument dar. Die Eigenschaft elements ist eine HTMLCollection, mit der Sie auf einfache Art auf alle Elemente im Formular zugreifen können. Mit den Methoden submit( ) und reset( ) kann ein Formular programmgesteuert übertragen oder zurückgesetzt werden. Jedes Formular eines Dokuments erhält einen Eintrag im Array Document.forms[]. Auf Formulare mit Namen kann außerdem über die Eigenschaft formular_name ihres Dokuments zugegriffen werden, wobei formular_name der Name ist, der im -Tag durch das Attribut name angegeben wurde. Die Elemente eines Formulars (Buttons, Eingabefelder, Checkboxen usw.) werden im Array Form.elements[] gesammelt. Benannte Elemente können, wie schon benannte Formulare, außerdem direkt über den Namen angesprochen werden. Der Name des Elements wird einfach als Name einer Eigenschaft des Form-Objekts verwendet. Somit könnte man beispielsweise auf ein Input-Element mit dem Namen telefon_nr in einem Formular namens fragebogen mit folgendem JavaScript-Ausdruck zugreifen: document.fragebogen.telefon_nr

Referenz für clientseitiges JavaScript |

879

491-0.book Seite 880 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Form.elements[]

Siehe auch Input, Select, Textarea; Kapitel 18

Form.elements[]

DOM Level 2 HTML

Die Eingabeelemente eines Formulars

Überblick readonly HTMLCollection elements

Beschreibung elements[] ist eine Array-ähnliche HTMLCollection von Formularelementen (wie z.B. Input-,

Select- und Textarea-Objekten), die in einem HTML-Formular vorkommen. Die Elemente des Arrays sind in der gleichen Reihenfolge angeordnet wie im HTML-Quelltext für das Formular. Jedes Element hat eine Eigenschaft type, deren String-Wert den Typ des Elements angibt.

Verwendung Wenn einem Element im Array elements[] durch das Attribut name="name" in seinem HTML-Tag ein Name gegeben wurde, dann erhält form eine Eigenschaft dieses Namens, die auf das Element verweist. Dadurch ist es möglich, namentlich auf Eingabeelemente zuzugreifen, anstatt sie über ihren Index ansprechen zu müssen: form.name

Siehe auch Input, HTMLCollection, Select, Textarea

Form.onreset

DOM Level 0

Event-Handler, der zum Zurücksetzen des Formulars aufgerufen wird

Überblick Function onreset

Beschreibung Die Eigenschaft onreset eines Formularobjekts gibt die Event-Handler-Funktion an, die aufgerufen wird, wenn der Benutzer im Formular auf Reset klickt. Dieser Handler wird nicht als Reaktion auf den Aufruf der Methode Form.reset( ) aufgerufen. Wenn der Handler onreset den Wert false zurückgibt, werden die Formularelemente nicht zurückgesetzt. Eine Alternative zur Registrierung eines Event-Handlers finden Sie unter Element.addEventListener( ).

Siehe auch Element.addEventListener( ), Form.onsubmit, Form.reset( ); Kapitel 17

880 | Referenz für clientseitiges JavaScript

491-0.book Seite 881 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Form.onsubmit

Form.onsubmit

DOM Level 0

Der Event-Handler, der beim Zurücksetzen eines Formulars aufgerufen wird

Überblick Function onsubmit

Beschreibung Die Eigenschaft onsubmit eines Form-Objekts gibt eine Event-Handler-Funktion an, die aufgerufen wird, wenn der Benutzer auf den Submit-Button eines Formulars klickt. Beachten Sie, dass dieser Event-Handler bei einem Aufruf von Form.submit() nicht aufgerufen wird. Wenn der Handler onsubmit den Wert false zurückgibt, wird das Formular nicht übermittelt. Gibt der Handler einen anderen Wert oder gar nichts zurück, so wird das Formular normal übermittelt. Da der Handler onsubmit auch die Formularübermittlung unterbinden kann, eignet er sich ideal dazu, die Formulardaten auf ihre Gültigkeit hin zu prüfen.

Siehe auch Element.addEventListener( ), Form.onreset, Form.submit( ); Kapitel 17

Form.reset( )

DOM Level 2 HTML

Setzt die Elemente eines Formulars auf ihre Standardwerte zurück

Überblick void reset( );

Beschreibung Diese Methode setzt jedes Element eines Formulars auf seinen Standardwert zurück. Ein Aufruf dieser Methode wirkt sich ebenso aus wie das Anklicken des Reset-Buttons durch einen Benutzer, nur dass der onreset-Event-Handler des Formulars nicht aufgerufen wird.

Siehe auch Form.onreset, Form.submit( )

Form.submit( )

DOM Level 2 HTML

Überträgt Formulardaten an einen Webserver

Überblick void submit( );

Referenz für clientseitiges JavaScript |

881

Referenz für clientseitiges JavaScript

Eine andere Möglichkeit, den Event-Handler zu registrieren, finden Sie unter Element. addEventListener( ).

491-0.book Seite 882 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Frame

Beschreibung Diese Methode übermittelt die Werte der Formularelemente an den Server, der in der Eigenschaft action des Formulars angegeben ist. Sie übermittelt ein Formular in derselben Weise, wie wenn ein Benutzer auf einen Submit-Button klickt. Nur wird hier nicht der onsubmit-EventHandler des Formulars ausgelöst.

Siehe auch Form.onsubmit, Form.reset( )

Frame

DOM Level 2 HTML

Ein in einem HTML-Dokument

Node ➝ Element ➝ HTMLElement ➝ Frame

Eigenschaften Wie aus der Beschreibung zu entnehmenist, kann auf HTML-Frames als Frame-Objekt oder als Window-Objekt zugegriffen werden. Wird auf sie als Frame-Objekt zugegriffen, erben sie Eigenschaften vom HTMLElement und definieren diese zusätzlichen Eigenschaften: Document contentDocument

Das Dokument, das den Frame-Inhalt enthält. String src

Die URL, von der der Frame-Inhalt geladen wurde. Wird diese Eigenschaft gesetzt, lädt das Frame ein neues Dokument. Diese Eigenschaft bildet einfach das Attribut src des HTML-Tags ab: Im Gegensatz zu Window.location ist diese Eigenschaft kein Location-Objekt. Neben diesen Eigenschaften definiert das Frame-Objekt auch die nachfolgenden Eigenschaften, die direkt HTML-Attributen entsprechen. Eigenschaft

Attribut

Beschreibung

String frameBorder

frameborder

Auf »0« gesetzt für rahmenlose Frames

String longDesc

longdesc

Die URL einer Frame-Beschreibung

String marginHeight

marginheight

Oberer und unterer Frame-Rand in Pixeln

String marginWidth

marginwidth

Linker und rechter Frame-Rand in Pixeln

String name

name

Der Frame-Name, für DOM Level 0-Lookup und Formular- und Linkziele

boolean noResize

noresize

Wenn true, kann der Benutzer die Frame-Größe nicht verändern

String scrolling

scrolling

Frame-Scrolleinstellungen: »auto«, »yes« oder »no«

Beschreibung Frames haben zwei »Persönlichkeiten« und können in clientseitigem JavaScript sowohl als Window- als auch als Frame-Objekte dargestellt werden. Im herkömmlichen Level 0 DOM

882 | Referenz für clientseitiges JavaScript

491-0.book Seite 883 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Hidden

wird jedes als unabhängiges Fenster behandelt und von einem durch Namen referenzierten Window-Objekt dargestellt – oder als Element des Arrays frames[] des Fensters, das das Frame enthält: // Hole das Frame als Window-Objekt var win1 = top.frames[0]; // Das Array frames[] nach Nummer indiziert var win2 = top.frames['f1']; // Das Array frames[] nach Namen indiziert var win3 = top.f1; // Hole die Frames als Eigenschaft ihres übergeordneten Fra mes

Wenn Frames auf diese Weise nachgeschlagen werden, ist das zurückgegebene Objekt ein Window und die im vorherigen Abschnitt aufgeführten Eigenschaften stehen nicht zur Verfügung. Verwenden Sie stattdessen Window-Eigenschaften, wie z.B. document, um auf das Dokument des Frames zuzugreifen, und location, um auf die URL dieses Dokuments zuzugreifen. Im Level 2 DOM kann auf die Elemente von über die ID oder den Tag-Namen genauso zugegriffen werden wie auf jedes andere Dokumentelement: // über ID // über Tag-Name

Wird auf Frames über DOM-Methoden wie diese zugegriffen, ist das Ergebnis kein WindowObjekt, sondern ein Frame-Objekt, und die oben aufgeführten Eigenschaften können verwendet werden. Verwenden Sie contentDocument, um auf das Dokument des Frames zuzugreifen, und die Eigenschaft src, um die URL dieses Dokuments abzufragen oder um das Frame zum Laden eines neuen Dokuments zu veranlassen. Um das Window-Objekt eines Frame-Objekts f zu erhalten, verwenden Sie f.contentDocument.defaultView. Die Elemente von sind denen von sehr ähnlich. Vergleichen Sie dazu den Referenzeintrag IFrame. Beachten Sie, dass sich die Same Origin Policy (siehe Abschnitt 13.8.2) auf Dokumente mit mehreren Frames bezieht. Browser lassen den Zugriff auf Frame-Inhalte nicht zu, die aus einer anderen Quelle stammen als aus der, aus der das Skript stammt. Das ist unabhängig davon, ob das Frame von einem Window- oder einem Frame-Objekt dargestellt wird.

Siehe auch IFrame, Window; Kapitel 14

Hidden Siehe Input

Referenz für clientseitiges JavaScript |

883

Referenz für clientseitiges JavaScript

// Hole das Frame als Frame-Objekt var frame1 = top.document.getElementById('f1'); var frame2 = top.document.getElementsByTagName('frame')[1];

491-0.book Seite 884 Mittwoch, 4. April 2007 9:55 09

e-bol.net

History

History Die URL-History des Browsers

JavaScript 1.0 Object ➝ History

Überblick window.history history

Eigenschaften length

Diese numerische Eigenschaft gibt an, wie viele URLs in der History-Liste des Browsers stehen. Da es keine Möglichkeit gibt, den Index zu ermitteln, den das gerade angezeigte Dokument in dieser Liste hat, ist es auch nicht sonderlich hilfreich, die Länge dieser Liste zu kennen.

Methoden back( )

Geht zu einer zuvor besuchten URL zurück. forward( )

Geht zu einer zuvor besuchten URL weiter. go( )

Geht zu einer zuvor besuchten URL.

Beschreibung Das History-Objekt wurde ursprünglich entwickelt, um die Browsing-History eines Fensters darzustellen. Aus Datenschutzgründen erlaubt das History-Objekt jedoch keinen Skript-Zugriff auf die tatsächlich besuchten URLs mehr. Die einzigen noch bestehenden Funktionalitäten sind die Methoden back( ), forward( ) und go( ).

Beispiel Die folgende Codezeile führt dieselbe Aktion aus, wie wenn ein Benutzer auf den ZurückButton des Browsers klickt: history.back( );

Die folgende Codezeile führt dieselbe Aktion aus, als wenn ein Benutzer zweimal auf den Zurück-Button des Browsers klickt: history.go(-2);

Siehe auch Die Eigenschaft history des Window-Objekts, Location

884 | Referenz für clientseitiges JavaScript

491-0.book Seite 885 Mittwoch, 4. April 2007 9:55 09

e-bol.net

History.back( )

History.back( )

JavaScript 1.0

Geht zur vorigen URL zurück

Überblick history.back( )

Beschreibung back() lässt das Fenster oder den Frame, zu dem die History-Objekte gehören, diejenige URL

erneut besuchen (falls es eine gibt), die unmittelbar vor der jetzigen aufgesucht wurde. Ein Aufruf dieser Methode hat dieselbe Wirkung, wie wenn ein Benutzer auf den Zurück-Button des Browsers klickt. Sie ist auch äquivalent zu dem folgenden Ausdruck: history.go(-1);

History.forward( )

JavaScript 1.0 Referenz für clientseitiges JavaScript

Besucht die nächste URL

Überblick history.forward( )

Beschreibung forward() lässt das Fenster oder den Frame, zu dem die History-Objekte gehören, diejenige

URL erneut besuchen (falls es eine gibt), die unmittelbar nach der jetzigen aufgesucht wurde. Ein Aufruf dieser Methode hat dieselbe Wirkung, wie wenn ein Benutzer auf den VorwärtsButton des Browsers klickt. Sie ist auch äquivalent zu dem folgenden Ausdruck: history.go(1);

Wenn der Benutzer sich nicht mit dem Zurück-Button oder dem Gehe-Menü in der History rückwärts bewegt hat und JavaScript nicht die Methode History.back() oder History.go() aufgerufen hat, hat forward() keine Auswirkung, da der Browser bereits am Ende seiner URLListe steht und es keine URL gibt, zu der er noch weitergehen könnte.

History.go( )

JavaScript 1.0

Besucht eine URL erneut

Überblick history.go(relative_position) history.go(ziel_string)

Argumente relative_position

Die relative Position der zu besuchenden URL in der History-Liste.

Referenz für clientseitiges JavaScript |

885

491-0.book Seite 886 Mittwoch, 4. April 2007 9:55 09

e-bol.net

HTMLCollection ziel_string

Die URL (oder das URL-Fragment), die besucht werden soll, wenn in der History-Liste eine passende URL vorhanden ist.

Beschreibung Die erste Form der Methode History.go() nimmt ein Integer-Argument entgegen und lässt den Browser diejenige URL erneut aufsuchen, die in der History-Liste des History-Objekts um die angegebene Anzahl Stellen weit entfernt ist. Positive Argumente lassen den Browser in der Liste vorwärts gehen, und negative Argumente lassen ihn rückwärts gehen. Also ist ein Aufruf von history.go(-1) äquivalent zu history.back() und hat dieselbe Wirkung wie das Anklicken eines Zurück-Buttons. history.go(3) besucht dieselbe URL, die auch nach dreimaligem Aufruf von history.forward() aufgesucht würde. Die zweite Arbeitsweise von History.go( ) nimmt ein String-Argument und veranlasst den Browser, die erste (d.h. die zuletzt besuchte) URL noch einmal zu besuchen, die den angegebenen String enthält. Diese Form der Methode ist nur schlecht definiert und kann unter verschiedenen Browsern unterschiedlich funktionieren. Zum Beispiel gibt die Dokumentation von Microsoft an, dass das das Argument genau mit der URL einer vorher angegebenen Seite übereinstimmen muss. Dagegen sagt die alte Dokumentation von Netscape (Netscape erfand das History-Objekt), dass das Argument ein Substring einer vorher besuchten URL sein kann.

HTMLCollection Array von HTML-Elementen, auf die nach Position oder Namen zugegriffen wird

DOM Level 2 HTML Object ➝ HTMLCollection

Eigenschaften readonly unsigned long length

Die Anzahl der Elemente in der Sammlung.

Methoden item( )

Gibt das Element an der angegebenen Position in der Sammlung zurück. Sie können die Position auch einfach in Array-Klammern angeben, anstatt diese Methode explizit aufzurufen. namedItem( )

Gibt das Element der Sammlung zurück, dessen id- oder name-Attribut den angegebenen Wert hat, oder null, wenn kein solches Element vorhanden ist. Sie können den Elementnamen auch in Array-Klammern angeben, anstatt diese Methode explizit aufzurufen.

Beschreibung Eine HTMLCollection ist eine Sammlung von HTML-Elementen mit Methoden, mit denen Sie auf ein Element über seine Position im Dokument oder seine Attribute id oder name zugreifen können. In JavaScript verhalten sich HTMLCollection-Objekte wie schreibgeschützte Arrays, und Sie können auch die JavaScript-Notation mit den eckigen Klammern einsetzen, um eine

886 | Referenz für clientseitiges JavaScript

491-0.book Seite 887 Mittwoch, 4. April 2007 9:55 09

e-bol.net

HTMLCollection.item( )

HTMLCollection nach Zahl oder Namen zu indizieren, anstatt die Methode item() oder namedItem() aufzurufen. Einige Eigenschaften des HTMLDocument-Objekts sind HTMLCollection-Objekte, mit denen Sie bequem auf Elemente wie z.B. Formulare, Bilder oder Links im Dokument zugreifen können. Die Eigenschaften Form.elements und Select.options sind HTMLCollection-Objekte. Das HTMLCollection-Objekt macht es außerdem leicht, die Zeilen einer Tabelle und die Zellen einer TableRow zu durchlaufen. HTMLCollection-Objekte sind schreibgeschützt: Sie können ihnen keine neuen Elemente zuweisen, auch nicht, wenn Sie die JavaScript-Array-Notation verwenden. Sie sind »live«: Wenn sich das zugrunde liegende Dokument ändert, werden diese Änderungen quer durch sämtliche HTMLCollection-Objekte sofort sichtbar. HTMLCollection-Objekte ähneln den NodeList-Objekten sehr, können jedoch sowohl anhand des Namens als auch anhand einer Nummer indiziert werden.

Beispiel c = document.forms; firstform = c[0]; lastform = c[c.length-1]; address = c["address"]; address = c.address;

// // // // //

Das ist eine HTMLCollection von Formularelementen Kann wie ein numerisches Array verwendet werden Die Eigenschaft length gibt die Anzahl der Elemente an Kann wie ein assoziatives Array verwendet werden JavaScript erlaubt auch diese Notation

Siehe auch HTMLDocument, NodeList

HTMLCollection.item( )

DOM Level 2 HTML

Holt ein Element anhand seiner Position

Überblick Node item(unsigned long index);

Argumente index

Die Position des Rückgabeelements. Die Elemente erscheinen in einer HTMLCollection in derselben Reihenfolge wie im Dokumentquelltext. Rückgabewert Das Element am angegebenen Index oder null, wenn index kleiner als null oder größer oder gleich der length-Eigenschaft ist.

Beschreibung Die Methode item() gibt ein nummeriertes Element einer HTMLCollection zurück. In JavaScript ist es einfacher, die HTMLCollection als Array zu behandeln und mit der ArrayNotation zu indizieren.

Referenz für clientseitiges JavaScript |

887

Referenz für clientseitiges JavaScript

var var var var var

491-0.book Seite 888 Mittwoch, 4. April 2007 9:55 09

e-bol.net

HTMLCollection.namedItem( )

Beispiel var c = document.images; var img0 = c.item(0); var img1 = c[1];

// Das ist eine HTMLCollection // Die Methode item( ) können Sie so verwenden // aber diese Notation ist einfacher und gebräuchlicher

Siehe auch NodeList.item( )

HTMLCollection.namedItem( )

DOM Level 2 HTML

Holt ein Element anhand seines Namens

Überblick Node namedItem(String name);

Argumente name

Der Name des zurückzugebenden Elements. Rückgabewert Das Element in der Sammlung, das den angegebenen Wert für sein id- oder name-Attribut hat, oder null, wenn in der HTMLCollection kein Element mit diesem Namen vorhanden ist.

Beschreibung Diese Methode sucht und liefert ein Element aus der HTMLCollection, das den angegebenen Namen hat. Wenn ein Element ein id-Attribut hat, dessen Wert der angegebene Name ist, so wird dieses Element zurückgegeben. Wenn kein solches Element gefunden wird, so wird ein Element zurückgegeben, dessen name-Attribut den angegebenen Wert hat. Existiert überhaupt kein derartiges Element, so gibt namedItem() den Wert null zurück. Beachten Sie, dass jedem HTML-Element ein id-Attribut zugewiesen werden kann, aber nur wenige – wie beispielsweise Formulare, Formularelemente, Bilder und Anker – auch ein Attribut name besitzen können. In JavaScript ist es einfacher, die HTMLCollection als assoziatives Array zu behandeln und name nach der Array-Notation in eckigen Klammern anzugeben.

Beispiel var forms = document.forms;

// Eine HTMLCollection, die aus Formularen // besteht var address = forms.namedItem("address"); // Sucht nach var payment = forms["payment"] // Einfachere Syntax: findet var login = forms.login; // Funktioniert auch: findet

888 | Referenz für clientseitiges JavaScript

491-0.book Seite 889 Mittwoch, 4. April 2007 9:55 09

e-bol.net

HTMLDocument

HTMLDocument Die Wurzel eines HTML-Dokumentbaums

DOM Level 0 Node ➝ Document ➝ HTMLDocument

Eigenschaften Element[] all [IE4]

Diese nicht im Standard enthaltene Eigenschaft ist ein Array-ähnliches Objekt, das auf alle HTMLElemente im Dokument Zugriff gibt. Das Array all[] wurde zum ersten Mal in IE4 verwendet. Obwohl es durch Methoden wie z.B. Document.getElementById( ) und Document.getElementsByTagName( ) abgelöst wurde, wird es immer noch in Code-Anwendungen verwendet. Eine genaue Beschreibung finden Sie in HTMLDocument.all[]. readonly HTMLCollection anchors

Ein Array (HTMLCollection) aller Anchor-Objekte im Dokument. readonly HTMLCollection applets

Ein Array (HTMLCollection) aller Applet-Objekte in einem Dokument. HTMLElement body

String cookie

Hiermit können Cookies für dieses Dokument abgefragt und gesetzt werden. Einzelheiten entnehmen Sie bitte dem Kapitel HTMLDocument.cookie. String domain

Der Domain-Name des Servers, von dem das Dokument geladen wurde, oder null, wenn keiner vorhanden ist. Diese Eigenschaft kann auch verwendet werden, um unter bestimmten Umständen das Sicherheitsprinzip zu lockern, dass Inhalte von derselben Quelle stammen müssen (Same Origin Policy). Einzelheiten entnehmen Sie bitte dem Eintrag HTMLDocument.domain. readonly HTMLCollection forms

Ein Array (HTMLCollection) aller Form-Objekte im Dokument. readonly HTMLCollection images

Ein Array (HTMLCollection) von Image-Objekten im Dokument. Aus Gründen der Kompatibilität mit Level 0 DOM sind Bilder, die statt mit einem -Tag mit einem -Tag definiert werden, nicht in dieser Sammlung enthalten. readonly String lastModified

Gibt das Datum und die Uhrzeit der letzten Änderung im Dokument an. Dieser Wert stammt aus dem Last-Modified-HTTP-Header, der optional vom Webserver übermittelt wird. readonly HTMLCollection links

Ein Array (HTMLCollection) aller Link-Objekte im Dokument. readonly String referrer

Die URL des Dokuments, dessen Link auf dieses Dokument verwies, oder null, wenn nicht über einen Hyperlink auf dieses Dokument zugegriffen wurde. Mit dieser Eigenschaft kann JavaScript auf der Clientseite auf den HTTP-Header referer zugreifen. Achten

Referenz für clientseitiges JavaScript |

889

Referenz für clientseitiges JavaScript

Eine Eigenschaft. Sie bezieht sich auf das HTMLElement, das das -Tag dieses Elements darstellt. Bei Dokumenten, die Framesets definieren, bezieht sich diese Eigenschaft auf das am weitesten außen liegende -Tag.

491-0.book Seite 890 Mittwoch, 4. April 2007 9:55 09

e-bol.net

HTMLDocument

Sie dabei auf die unterschiedliche Schreibweise: Der HTTP-Header enthält den Buchstaben r dreimal, die JavaScript-Eigenschaft aber viermal. String title

Der Inhalt des -Tags für dieses Dokument. readonly String URL

Die URL des Dokuments. Dieser Wert ist oft der gleiche wie der der Eigenschaft location. href des Fensters, das das Dokument enthält. Wenn jedoch ein URL-Redirect stattfindet, enthält die Eigenschaft URL die tatsächliche URL des Dokuments und location.href enthält die angeforderte URL.

Methoden close( )

Schließt einen Dokument-Stream, der mit der open()-Methode geöffnet worden war, und veranlasst, dass jede gepufferte Ausgabe angezeigt wird. getElementsByName( )

Gibt ein Knoten-Array (eine NodeList) aller Dokumentelemente zurück, deren nameAttribut einen spezifizierten Wert hat. open( )

Öffnet einen Stream, in den neuer Dokumentinhalt geschrieben werden kann. Beachten Sie, dass diese Methode einen eventuell vorhandenen, aktuellen Dokumentinhalt löscht. write( )

Hängt einen HTML-Text-String an ein offenes Dokument an. writeln( )

Hängt einen HTML-Text-String, gefolgt von einem Newline-Zeichen, an ein offenes Dokument an.

Beschreibung Dieses Interface erweitert Document und definiert HTML-spezifische Eigenschaften und Methoden. Einige der Eigenschaften sind HTMLCollection-Objekte (im Grunde genommen schreibgeschützte Arrays, die über Nummern oder Namen indiziert werden), die Referenzen auf Anker, Formate, Links und andere wichtige über Skripten steuerbare Elemente des Dokuments enthalten. Diese Collection-Eigenschaften entstanden im Level 0 DOM. Sie wurden von Document.getElementsByTagName( ) abgelöst, werden aber allgemein weiterverwendet, da sie so praktisch sind. Die Methode write( ) ist erwähnenswert: Mit ihr kann ein Skript in ein dynamisch erstelltes Dokument eingefügt werden, während das Dokument geladen und geparst wird. Abschließend sollten Sie sich noch merken, dass HTMLDocument im Level 1 DOM eine sehr nützliche Methode namens getElementById() definierte. Im Level 2 DOM wurde diese Methode in das Document-Interface verlagert und wird nun von HTMLDocument nicht mehr definiert, sondern geerbt. Einzelheiten entnehmen Sie bitte dem Eintrag Document. getElementById( ).

Siehe auch Document, Document.getElementById( ), Document.getElementsByTagName( )

890 | Referenz für clientseitiges JavaScript

491-0.book Seite 891 Mittwoch, 4. April 2007 9:55 09

e-bol.net

HTMLDocument.all[]

HTMLDocument.all[]

IE 4

Alle HTML-Elemente in einem Dokument

Überblick document.all[i] document.all[name] document.all.tags(tagName)

Beschreibung all[] ist ein vielseitiges Array-ähnliches Objekt, mit dem auf alle HTML-Elemente in einem Dokument zugegriffen werden kann. Das Array all[] wurde zum ersten Mal in IE 4 verwendet

und wurde von einigen anderen Browsern aufgegriffen. Es wurde von den standardisierten Methoden getElementById( ) und getElementsByTagName( ) des Document-Interfaces abgelöst und von der standardisierten Methode getElementsByName( ) des HTMLDocument-Interface. Trotzdem wird das Array all[] in existierendem Code weiterverwendet.

Wenn Sie der Methode all.tags( ) einen Tag-Namen übergeben, gibt sie ein Array von HTMLElementen des angegebenen Typs zurück.

Siehe auch Document.getElementById( ), Document.getElementsByTagName( ), HTMLElement

HTMLDocument.close( )

DOM Level 0

Schließt ein offenes Dokument und zeigt es an

Überblick void close( );

Beschreibung Diese Methode schließt einen Dokument-Stream, der mit der open()-Methode geöffnet worden ist, und veranlasst, dass die gepufferte Ausgabe angezeigt wird. Wenn Sie die Methode write( ) verwenden, um ein Dokument dynamisch auszugeben, müssen Sie daran denken, diese Methode zum Schluss aufzurufen, damit Ihr gesamter Dokumentinhalt angezeigt wird. Nach dem Aufruf von close( ) sollten Sie es vermeiden, write( ) noch einmal aufzurufen, da dadurch automatisch open( ) aufgerufen, das vorhandene Dokument gelöscht und ein neues angefangen wird.

Referenz für clientseitiges JavaScript |

891

Referenz für clientseitiges JavaScript

all[] enthält die Elemente in der Quelltextreihenfolge. Sie können sie direkt aus dem Array extrahieren, wenn Sie deren genaue numerische Position innerhalb des Arrays kennen. Üblicher ist es allerdings, Elemente aus dem Array all[] nach dem Wert ihres HTML-Attributs name oder id abzurufen. Wenn unter dem angegebenen Namen mehr als ein Element vorhanden ist und Sie diesen Namen als Index für das Array all[] verwenden, erhalten Sie ein Array der Elemente, die den betreffenden Namen gemeinsam haben.

491-0.book Seite 892 Mittwoch, 4. April 2007 9:55 09

e-bol.net

HTMLDocument.cookie

Siehe auch HTMLDocument.open( ), HTMLDocument.write( )

HTMLDocument.cookie

DOM Level 0

Die Cookies des Dokuments

Überblick String cookie

Beschreibung cookie ist eine String-Eigenschaft, die es ermöglicht, den oder die zu dem aktuellen Dokument

gehörenden Cookie(s) zu lesen, zu verändern, zu erzeugen oder zu löschen. Ein Cookie ist eine kleine, benannte Datenmenge, die vom Webbrowser gespeichert wird. Er dient dazu, Webbrowsern eine Art Gedächtnis zu geben, sodass sie die auf einer Seite gemachten Eingaben in einer anderen verwenden können. Cookies dienen auch dazu, Browser-Einstellungen bis zur nächsten Sitzung zu speichern. Cookie-Daten werden bei Bedarf automatisch zwischen Webbrowser und -server übertragen, sodass Skripten auf der Serverseite Cookie-Werte lesen und schreiben können. Clientseitiger JavaScript-Code kann durch die Eigenschaft cookie ebenfalls lesend und schreibend auf Cookies zugreifen. Die Eigenschaft HTMLDocument.cookie verhält sich nicht wie eine normale les- und schreibbare Eigenschaft. Sie können den Inhalt von HTMLDocument.cookie zwar lesen und schreiben, allerdings wird der ausgelesene Wert in der Regel nicht der gleiche wie der zuvor geschriebene sein. Einzelheiten über die Verwendung dieser besonders komplizierten Eigenschaft können Sie in Kapitel 19 nachlesen.

Verwendung Cookies sind für das gelegentliche Ablegen kleinerer Datenmengen gedacht. Sie sind nicht als Allzweck-Kommunikations- oder -Programmiermechanismus gedacht; setzen Sie Cookies daher sparsam ein. Beachten Sie, dass Webbrowser nicht mehr als 20 Cookie-Werte pro Webserver aufbewahren müssen, und sie brauchen auch keine Cookies mit name/wert-Paaren aufzubewahren, die länger als vier Kilobyte sind.

Siehe auch Kapitel 19

HTMLDocument.domain Die Sicherheits-Domain eines Dokuments

Überblick String domain

892 | Referenz für clientseitiges JavaScript

DOM Level 0

491-0.book Seite 893 Mittwoch, 4. April 2007 9:55 09

e-bol.net

HTMLDocument.getElementsByName( )

Beschreibung In Übereinstimmung mit dem HTML-Standard von DOM Level 2 ist die Eigenschaft domain lediglich ein schreibgeschützter String, der den Hostnamen des Webservers enthält, aus dem das Dokument geladen wurde. Diese Eigenschaft hat eine weitere wichtige Verwendung (obwohl diese Verwendung nicht standardisiert ist). Das Sicherheitsprinzip des »Same Origin«, also der gleichen Herkunft von Inhalten (im Abschnitt 13.8.2 beschrieben) hält ein Skript in einem Dokument davon ab, den Inhalt eines anderen Dokuments zu lesen (z.B. ein in einem angezeigtes Dokument), es sei denn, die beiden Dokumente haben den gleichen Ursprung (d.h., sie wurden vom gleichen Webserver abgerufen). Bei großen Websites, die mehrere Server verwenden, kann das zu Problemen führen. So kann vielleicht ein Skript, das auf dem Host www.oreilly.com läuft, den Inhalt von Dokumenten lesen, der auf search.oreilly.com läuft.

Siehe auch Abschnitt 13.8.2, »Die Same Origin Policy«

HTMLDocument.getElementsByName( )

DOM Level 2 HTML

Sucht Elemente mit dem angegebenen name-Attribut

Überblick Element[] getElementsByName(String elementName);

Argumente elementName

Der gewünschte Wert für das name-Attribut. Rückgabewert Ein schreibgeschütztes Array (technisch gesehen eine NodeList) von Element-Objekten, die ein Attribut name mit dem angegebenen Wert haben. Wenn keine solchen Elemente vorhanden sind, ist das zurückgegebene Array leer und hat die length 0.

Referenz für clientseitiges JavaScript |

893

Referenz für clientseitiges JavaScript

Die domain-Eigenschaft hilft, mit diesem Problem fertigzuwerden. Sie können diese Eigenschaft neu setzen, allerdings mit einer großen Einschränkung: Sie kann nur auf eine Domain gesetzt werden, deren Name ein Suffix von ihr ist. So könnte beispielsweise ein von search.oreilly.com geladenes Skript seine domain-Eigenschaft auf »oreilly.com« setzen. Wenn nun ein Skript von www.oreilly.com in einem anderen Fenster läuft und seine domain-Eigenschaft ebenfalls auf »oreilly.com« setzt, dann können diese beiden Skripte den Dokumentinhalt des jeweils anderen Skripts lesen, obwohl die beiden Skripte nicht von demselben Server stammen. Beachten Sie allerdings, dass ein Skript von search.oreilly.com seine domain nicht auf »search.oreilly« oder ».com« setzen kann.

491-0.book Seite 894 Mittwoch, 4. April 2007 9:55 09

e-bol.net

HTMLDocument.open( )

Beschreibung Diese Methode sucht in einem HTML-Dokumentenbaum Element-Knoten, deren nameAttribut den angegebenen Wert hat, und gibt eine NodeList (die Sie auch als schreibgeschütztes Array behandeln können) mit allen passenden Elementen zurück. Wenn keine passenden Elemente vorhanden sind, wird eine NodeList mit der length 0 zurückgegeben. Verwechseln Sie diese Methode nicht mit der Methode Document.getElementById(), die ein einzelnes Element anhand des eindeutigen Werts eines id-Attributs sucht, oder mit der Methode Document.getElementsByTagName(), die eine NodeList mit Elementen zurückgibt, die den angegebenen Tag-Namen haben.

Siehe auch Document.getElementById( ), Document.getElementsByTagName( )

HTMLDocument.open( )

DOM Level 0

Beginnt ein neues Dokument und löscht das aktuelle

Überblick void open( );

Beschreibung Diese Methode löscht das aktuelle HTML-Dokument und fängt ein neues an, in das mit den Methoden write() und writeln() geschrieben werden kann. Nachdem Sie mit open() ein neues Dokument begonnen und mit write() seinen Inhalt angegeben haben, dürfen Sie nicht vergessen, am Ende des Dokuments auch close() aufzurufen und zu veranlassen, dass der Inhalt angezeigt wird. Diese Methode sollte nicht von einem Skript oder Event-Handler aufgerufen werden, das oder der zu dem überschriebenen Dokument gehört, denn auch das Skript oder der Handler werden überschrieben.

Beispiel var w = window.open(""); // Öffne ein neues Fenster var d = w.document; // Hole sein HTMLDocument-Objekt d.open( ); // Öffne das Dokument zum Schreiben d.write("Hello world"); // Gib HTML an das Dokument aus d.close( ); // Beende das Dokument, und zeige es an

Siehe auch HTMLDocument.close( ), HTMLDocument.write( )

894 | Referenz für clientseitiges JavaScript

491-0.book Seite 895 Mittwoch, 4. April 2007 9:55 09

e-bol.net

HTMLDocument.write( )

HTMLDocument.write( )

DOM Level 0

Hängt HTML-Text an ein geöffnetes Dokument an

Überblick void write(String text);

Argumente text

Der HTML-Text, der an das Dokument angehängt werden soll.

Beschreibung

Die Methode Document.write() wird normalerweise auf zwei verschiedene Arten verwendet. Erstens, indem das aktuelle Dokument sie für sich selbst aufruft, nämlich innerhalb eines -Tags oder innerhalb einer Funktion, die während der Analyse des Dokuments noch ausgeführt wird. In diesem Fall schreibt write() seine HTML-Ausgabe so, als stünde sie wörtlich in der Datei, und zwar anstelle des Codes, der diese Methode aufgerufen hat. Zweitens können Sie Document.write( ) verwenden, um dynamisch neue Dokumente in anderen Fenstern, Frames oder IFrames als denen zu erzeugen, in denen das aufrufende Skript läuft. Ist das Zieldokument offen, fügt write( ) sie an dieses Dokument an. Ist das Dokument nicht offen, löscht write( ) das bestehende Dokument und öffnet ein neues (leeres) Dokument, an das sie ihre Argumente anhängt. Sobald ein Dokument geöffnet worden ist, kann Document.write() jede beliebig lange Ausgabe an das Ende des Dokuments anhängen. Wenn ein neues Dokument vollständig auf diese Weise erzeugt worden ist, muss das Dokument durch den Aufruf von Document.close() geschlossen werden. Beachten Sie, dass der Aufruf von close() immer erfolgen muss, der Aufruf von open() aber optional ist.1 Das Ergebnis des Aufrufs von Document.write( ) ist im Zieldokument unter Umständen nicht sofort sichtbar. Dies liegt daran, dass ein Webbrowser Text zwischenspeichern kann, um ihn später in größeren Blöcken zu parsen und anzuzeigen. Ein Aufruf von Document.close( ) ist die einzige Möglichkeit, um die Darstellung der gepufferten Ausgabe zu erzwingen und sie im Browserfenster anzuzeigen.

Siehe auch HTMLDocument.close( ), HTMLDocument.open( ) 1 Sie müssen Document.open() eigentlich nur dann verwenden, wenn Sie ein Dokument mit einem anderen MIMETyp als »text/html« öffnen möchten.

Referenz für clientseitiges JavaScript |

895

Referenz für clientseitiges JavaScript

Diese Methode fügt den angegebenen HTML-Text an das Dokument an. Entsprechend dem DOM-Standard nimmt diese Methode ein einzelnes String-Argument entgegen. In der Praxis wird der Methode write( ) allerdings oft eine beliebige Anzahl an Argumenten übergeben. Diese Argumente werden in Strings konvertiert und in der gleichen Reihenfolge an das Dokument angefügt.

491-0.book Seite 896 Mittwoch, 4. April 2007 9:55 09

e-bol.net

HTMLDocument.writeln( )

HTMLDocument.writeln( )

DOM Level 0

Hängt HTML-Text und ein Newline-Zeichen an ein offenes Dokument an

Überblick void writeln(String text);

Argumente text

Der HTML-Text, der an das Dokument angehängt werden soll.

Beschreibung Diese Methode ähnelt HTMLDocument.write(), nur dass sie hinter den anzufügenden Text noch ein Newline-Zeichen setzt. Das kann nützlich sein, wenn Sie z.B. den Inhalt eines -Tags schreiben.

Siehe auch HTMLDocument.write( )

HTMLElement Ein Element in einem HTML-Dokument

DOM Level 2 HTML Node ➝ Element ➝ HTMLElement

Eigenschaften Jedes Element eines HTML-Dokuments hat Eigenschaften, die den HTML-Attributen des Elements entsprechen. Nachfolgend sind die Eigenschaften aufgeführt, die von allen HTMLTags unterstützt werden. Weitere Eigenschaften, die sich lediglich auf bestimmte HTML-Tags beziehen, stehen in der ausführlichen Tabelle im nächsten Beschreibungsabschnitt. HTMLElement-Objekte erben einige nützliche standardisierte Eigenschaften von Node und Element und implementieren außerdem einige nicht standardisierte Eigenschaften, die hier beschrieben sind: String className

Der Wert des class-Attributs des Elements, das keinen, einen oder mehrere durch Leerzeichen getrennte CSS-Klassennamen angibt. Beachten Sie, dass diese Eigenschaft nicht »class« heißt, weil dieser Name in JavaScript ein reserviertes Wort ist. CSS2Properties currentStyle

Diese IE-spezifische Eigenschaft repräsentiert den kaskadierten Satz aller CSS-Eigenschaften, die auf das Element angewandt werden. Sie ist eine IE-spezifische Alternative zu Window.getComputedStyle( ). String dir

Der Wert des dir-Attributs des Elements; er gibt die Textrichtung für dieses Dokument an. String id

Der Wert des id-Attributs. Keine zwei Elemente in demselben Dokument dürfen als id denselben Wert haben.

896 | Referenz für clientseitiges JavaScript

491-0.book Seite 897 Mittwoch, 4. April 2007 9:55 09

e-bol.net

HTMLElement String innerHTML

Ein les- und schreibbarer String, der den in diesem Element enthaltenen HTML-Text angibt, allerdings ohne die öffnenden und schließenden Tags des Elements. Die Abfrage dieser Eigenschaft gibt den Inhalt des Elements als einen aus HTML-Text bestehenden String zurück. Wird diese Eigenschaft auf einen aus HTML-Text bestehenden String gesetzt, wird der Inhalt des Elements durch die Darstellung des geparsten HTML ersetzt. Während des Ladevorgangs lässt sich diese Eigenschaft nicht setzen (für diese Funktionalität siehe HTMLDocument.write( )). Die Eigenschaft ist eine nicht standardisierte Eigenschaft, die ihren Ursprung in IE 4 hat. Sie wird von allen modernen Browsern implementiert. String lang

Der Wert des lang-Attributs, das den Sprachcode für den Inhalt des Elements angibt. int offsetHeight, offsetWidth

Die Höhe und Breite des Elements und seines gesamten Inhalts in Pixeln, einschließlich CSS-Padding und der Grenzlinie (border) des Elements, aber ohne den Rand (margin). Diese Eigenschaften sind nicht standardisiert, werden aber gut unterstützt. Die X- und Y-Koordinaten der linken oberen Ecke der CSS-Grenzlinie des Elements, relativ zum umgebenden Element offsetParent. Diese Eigenschaften sind nicht standardisiert, werden aber gut unterstützt. Element offsetParent

Gibt das Container-Element an, das das Koordinatensystem definiert, in dem offsetLeft und offsetTop gemessen werden. Für die meisten Elemente ist offsetParent das sie enthaltende Document-Objekt. Hat jedoch ein Element einen dynamisch positionierten Container, so ist das dynamisch positionierte Element der offsetParent. In manchen Browsern werden Tabellenzellen nicht relativ zum Dokument positioniert, in dem sie enthalten sind, sondern relativ zu der Zeile, in der sie stehen. Ein Beispiel, das diese Eigenschaft browserübergreifend verwendet, finden Sie in Kapitel 16. Diese Eigenschaft ist nicht standardisiert, wird aber gut unterstützt. int scrollHeight, scrollWidth

Die gesamte Höhe und Breite eines Elements. Wenn ein Element Bildlaufleisten hat (beispielweise aufgrund des CSS-Attributs overflow), so unterscheiden sich diese Eigenschaften von offsetHeight und offsetWidth, die lediglich die Größe des sichtbaren Teils des Elements angeben. Diese Eigenschaften sind nicht standardisiert, werden aber gut unterstützt. int scrollLeft, scrollTop

Die Anzahl der Pixel des Elements, die durch Scrollen außerhalb der linken bzw. oberen Kante des Fensters liegen. Diese Eigenschaften eignen sich nur für Elemente mit Bildlaufleisten, wie z.B. Elemente, bei denen das CSS-Attribut overflow auf auto gesetzt ist. Diese Eigenschaften sind ebenfalls durch die Tags oder definiert (abhängig vom Browsertyp) und geben an, um wie viele Pixel das Gesamtdokument gescrollt worden ist. Allerdings geben diese Eigenschaften den Scrollumfang in einem -Tag nicht an. Diese Eigenschaften sind nicht standardisiert, werden aber gut unterstützt.

Referenz für clientseitiges JavaScript |

897

Referenz für clientseitiges JavaScript

int offsetLeft, offsetTop

491-0.book Seite 898 Mittwoch, 4. April 2007 9:55 09

e-bol.net

HTMLElement CSS2Properties style Der Wert des style-Attributs, das Inline-CSS-Stile für dieses Element festlegt. Beachten

Sie, dass der Wert dieser Eigenschaft kein String ist. Einzelheiten entnehmen Sie bitte CSS2Properties. String title

Der Wert des title-Attributs des Elements. Viele Browser zeigen den Wert dieses Attributs in einem Tooltip an, wenn sich die Maus über dem Element befindet.

Methoden HTMLElement-Objekte erben die standardisierten Methoden von Node und Element. Bestimmte Elementtypen implementieren tag-spezifische Methoden, die in der ausführlichen Tabelle im Abschnitt »Beschreibung« aufgeführt und in anderen Referenzeinträgen, wie z.B. Form, Input und Table, dokumentiert sind. Die meisten modernen Browser implementieren zusätzlich die folgende, nicht standardkonforme Methode: scrollIntoView( )

Scrollt das Dokument derart, dass das Element oben oder unten im Fenster zu sehen ist.

Event-Handler Alle HTML-Elemente reagieren auf rohe Maus- und Tasten-Events und können die im Folgenden aufgeführten Event-Handler auslösen. Manche Elemente, beispielsweise Links und Buttons, führen Defaultaktionen aus, wenn diese Events auftreten. Weitere Einzelheiten zu solchen Elementen finden Sie unter dem elementspezifischen Referenzeintrag; z.B. siehe Input und Link: onclick

Wird aufgerufen, wenn der Benutzer auf das Element klickt. ondblclick

Wird aufgerufen, wenn der Benutzer auf das Element doppelklickt. onkeydown

Wird aufgerufen, wenn der Benutzer eine Taste drückt. onkeypress

Wird aufgerufen, wenn der Benutzer eine Taste drückt und loslässt. onkeyup

Wird aufgerufen, wenn der Benutzer eine Taste loslässt. onmousedown

Wird aufgerufen, wenn der Benutzer eine Maustaste drückt. onmousemove

Wird aufgerufen, wenn der Benutzer die Maus bewegt. onmouseout

Wird aufgerufen, wenn der Benutzer die Maus vom Element wegbewegt. onmouseover

Wird aufgerufen, wenn der Benutzer die Maus über ein Element zieht. onmouseup

Wird aufgerufen, wenn der Benutzer eine Maustaste loslässt.

898 | Referenz für clientseitiges JavaScript

491-0.book Seite 899 Mittwoch, 4. April 2007 9:55 09

e-bol.net

HTMLElement

Beschreibung Jedes Tag in einem HTML-Dokument wird von einem HTMLElement-Objekt dargestellt. Ein HTMLElement definiert Eigenschaften, die die Attribute darstellen, die von allen HTMLElementen gemeinsam genutzt werden können. Die folgenden HTML-Tags haben keine Eigenschaften außer den oben aufgeführten und werden vollständig vom Interface HTMLElement beschrieben:

<strong>

Die meisten dieser tag-spezifischen Interfaces definieren lediglich eine JavaScript-Eigenschaft für jedes Attribut des HTML-Tags. Die JavaScript-Eigenschaften heißen genauso wie die Attribute und werden kleingeschrieben (z.B. id) oder auch mit Groß- und Kleinbuchstaben, wenn der Attributname aus mehreren Wörtern besteht (z.B. longDesc). Wenn ein HTML-Attributname in Java oder JavaScript ein reserviertes Wort ist, wird der Eigenschaftsname leicht abgewandelt. Beispielsweise wird das for-Attribut der Tags und zur htmlForEigenschaft der Interfaces HTMLLabelElement und HTMLScriptElement, da auch for ein reserviertes Wort ist. Die Bedeutungen dieser Eigenschaften, die den HTML-Attributen direkt entsprechen, werden in der HTML-Spezifikation definiert. Sie alle hier zu dokumentieren würde den Rahmen dieses Buches sprengen. Die folgende Tabelle führt alle HTML-Tags auf, die ein entsprechendes Subinterface von HTMLElement haben. Für jedes Tag gibt die Tabelle den DOM-Interface-Namen und die Namen der darin definierten Eigenschaften und Methoden an. Alle Eigenschaften sind les- und schreibbare Strings, soweit nichts anderes angegeben ist. Bei Eigenschaften, die keine les- und schreibbaren Strings sind, wird der Eigenschaftstyp vor dem Eigenschaftsnamen in eckigen Klammern angegeben. Einige Tags und Attribute sind in HTML 4 veraltet. Sie werden in dieser Tabelle mit * gekennzeichnet. Da sich diese Interfaces und ihre Eigenschaften so unmittelbar den HTML-Elementen und -Attributen zuordnen lassen, erhalten die meisten keine eigenen Referenzeinträge in diesem

Referenz für clientseitiges JavaScript |

899

Referenz für clientseitiges JavaScript

Die meisten HTML-Tags definieren zusätzliche Eigenschaften außer den oben ausdrücklich aufgeführten. Die DOM Level 2-HTML-Spezifikation definiert tag-spezifische Schnittstellen für diese Tags, sodass alle standardisierten HTML-Attribute eine entsprechende, standardisierte JavaScript-Eigenschaft haben. Ein Tag namens T hat normalerweise ein tag-spezifisches Subinterface namens HTMLTElement. So wird z.B. das -Tag vom HTMLHeadElementInterface dargestellt. In seltenen Fällen teilen sich zwei oder mehr verwandte Tags ein einziges Interface. Das gilt z.B. für die Tags bis , die alle durch das HTMLHeadingElementInterface dargestellt werden.

491-0.book Seite 900 Mittwoch, 4. April 2007 9:55 09

e-bol.net

HTMLElement

Buch. Einzelheiten entnehmen Sie bitte einer HTML-Referenz. Die Ausnahmen sind Schnittstellen, die Tags darstellen, die für clientseitige JavaScript-Programmierer besonders wichtig sind, wie beispielsweise und -Tags. Diese Tags werden in diesem Buch unter Namen dokumentiert, die kein »HTML«-Präfix oder »Element«-Suffix enthalten. Vergleichen Sie dazu z.B. die Einträge für Anchor, Applet, Canvas, Form, Image, Input, Link, Option, Select, Table und Textarea: HTML-Tag

DOM-Interface, Eigenschaften und Methoden

alle Tags

HTMLElement: id, title, lang, dir, className

HTMLAnchorElement: accessKey, charset, coords, href, hreflang, name, rel, rev, shape, [long] tabIndex, target, type, blur( ), focus( )

HTMLAppletElement*: align*, alt*, archive*, code*, codeBase*, height*, hspace*, name*, object*, vspace*, width*

HTMLAreaElement: accessKey, alt, coords, href, [boolean] noHref, shape, [long] tabIndex, target

HTMLBaseElement: href, target

HTMLBaseFontElement*: color*, face*, size*

,

HTMLQuoteElement: cite

HTMLBodyElement: aLink*, background*, bgColor*, link*, text*, vLink*

HTMLBRElement: clear*

HTMLButtonElement: [readonly HTMLFormElement] form, accessKey, [boolean] disabled, name, [long] tabIndex, [readonly] type, value

HTMLTableCaptionElement: align*

,

HTMLTableColElement: align, ch, chOff, [long] span, vAlign, width

,

HTMLModElement: cite, dateTime

HTMLDirectoryElement*: [boolean] compact*

HTMLDivElement: align*

HTMLDListElement: [boolean] compact*

HTMLFieldSetElement: [readonly HTMLFormElement] form

HTMLFontElement*: color*, face*, size*

HTMLFormElement: [readonly HTMLCollection] elements, [readonly long] length, name, acceptCharset, action, enctype, method, target, submit( ), reset( )

HTMLFrameElement: frameBorder, longDesc, marginHeight, marginWidth, name, [boolean] noResize, scrolling, src, [readonly Document] contentDocument

HTMLFrameSetElement: cols, rows

, , , , ,

HTMLHeadingElement: align*

HTMLHeadElement: profile

900 | Referenz für clientseitiges JavaScript

491-0.book Seite 901 Mittwoch, 4. April 2007 9:55 09

e-bol.net

HTMLElement HTML-Tag

DOM-Interface, Eigenschaften und Methoden

HTMLHRElement: align*, [boolean] noShade*, size*, width*

HTMLHtmlElement: version*

HTMLIFrameElement: align*, frameBorder, height, longDesc, marginHeight, marginWidth, name, scrolling, src, width, [readonly Document] contentDocument

HTMLImageElement: align*, alt, [long] border*, [long] height, [long] hspace*, [boolean] isMap, longDesc, name, src, useMap, [long] vspace*, [long] width

HTMLInputElement: defaultValue, [boolean] defaultChecked, [readonly HTMLFormElement] form, accept, accessKey, align*, alt, [boolean] checked, [boolean] disabled, [long] maxLength, name, [boolean] readOnly, size, src, [long] tabIndex, type, useMap, value, blur( ), focus( ), select( ), click( )

Siehe

HTMLIsIndexElement*: [readonly HTMLFormElement] form, prompt* HTMLLabelElement: [readonly HTMLFormElement] form, accessKey, htmlFor HTMLLegendElement: [readonly HTMLFormElement] form, accessKey, align*

HTMLLIElement: type*, [long] value*

HTMLLinkElement: [boolean] disabled, charset, href, hreflang, media, rel, rev, target,

Referenz für clientseitiges JavaScript

type

HTMLMapElement: [readonly HTMLCollection of HTMLAreaElement] areas, name

HTMLMenuElement*: [boolean] compact*

HTMLMetaElement: content, httpEquiv, name, scheme

HTMLObjectElement: code, align*, archive, border*, codeBase, codeType, data, [boolean] declare, height, hspace*, name, standby, [long] tabIndex, type, useMap, vspace*, width, [readonly Document] contentDocument

HTMLOListElement: [boolean] compact*, [long] start*, type*

HTMLOptGroupElement: [boolean] disabled, label

HTMLOptionElement: [readonly HTMLFormElement] form, [boolean] defaultSelected, [readonly] text, [readonly long] index, [boolean] disabled, label, [boolean] selected, value

HTMLParagraphElement: align*

HTMLParamElement: name, type, value, valueType

HTMLPreElement: [long] width*

Siehe

HTMLScriptElement: text, html For, event, charset, [boolean] defer, src, type

HTMLSelectElement: [readonly] type, [long] selectedIndex, value, [readonlylong] length, [readonly HTMLFormElement] form, [readonly HTMLCollection of HTMLOptionElement] options, [boolean] disabled, [boolean] multiple, name, [long] size, [long] tabIndex, add( ), remove( ), blur( ), focus( )

HTMLStyleElement: [boolean] disabled, media, type

Referenz für clientseitiges JavaScript |

901

491-0.book Seite 902 Mittwoch, 4. April 2007 9:55 09

e-bol.net

HTMLElement.onclick HTML-Tag

DOM-Interface, Eigenschaften und Methoden

HTMLTableElement: [HTMLTableCaptionElement] caption, [HTMLTableSectionElement] tHead, [HTMLTableSectionElement] tFoot, [readonly HTMLCollection of HTMLTableRowElement] rows, [readonly HTMLCollection of HTMLTableSectionElement] tBodies, align*, bgColor*, border, cellPadding, cellSpacing, frame, rules, summary, width, createTHead( ), deleteTHead( ), createTFoot( ), deleteTFoot( ), createCaption( ), deleteCaption( ), insertRow( ), deleteRow( )

, ,

HTMLTableSectionElement: align, ch, chOff, vAlign, [readonly HTMLCollection of HTMLTableRowElement] rows, insertRow( ), deleteRow( )

HTMLTableRowElement: [readonly long] rowIndex, [readonly long] sectionRowIndex, [readonly HTMLCollection of HTMLTableCellElement] cells, align, bgColor*, ch, chOff, vAlign, insertCell( ), deleteCell( )

-Element var text = document.createTextNode(message); // Erzeuge einen Text-Knoten paragraph.appendChild(text); // Schreibe Text in den Absatz // Füge den Absatz vor dem ersten Kind des Body ein document.body.insertBefore(paragraph, document.body.firstChild) }

Siehe auch Node.appendChild( ), Node.removeChild( ), Node.replaceChild( )

Node.isSupported( )

DOM Level 2 Core

Stellt fest, ob ein Knoten ein Feature unterstützt

Überblick boolean isSupported(String feature, String version);

Argumente feature

Der Name des Features, auf das getestet wird. version

Die Versionsnummer des Features oder der leere String, wenn auf eine beliebige Version des Features getestet werden soll.

Referenz für clientseitiges JavaScript |

947

491-0.book Seite 948 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Node.normalize( )

Rückgabewert true, wenn der Knoten die angegebene Version des Features unterstützt, andernfalls false.

Beschreibung Der W3C DOM-Standard ist modular, und die Implementierungen brauchen nicht unbedingt alle Module oder Features des Standards zu unterstützen. Diese Methode testet, ob die Implementierung dieses Knotens die angegebene Version des genannten Features unterstützt. Unter DOMImplementation.hasFeature( ) finden Sie eine Liste von Werten für die Argumente feature und version.

Siehe auch DOMImplementation.hasFeature( )

Node.normalize( )

DOM Level 1 Core

Verschmilzt benachbarte und löscht leere Text-Knoten

Überblick void normalize( );

Beschreibung Diese Methode durchläuft alle Nachfahren dieses Knotens und »normalisiert« das Dokument, indem sie leere Text-Knoten löscht und benachbarte Text-Knoten zu einem einzelnen Knoten verschmilzt. Das kann die Baumstruktur nach dem Einfügen oder Löschen von Knoten vereinfachen.

Siehe auch Text

Node.removeChild( ) Löscht (und liefert) das angegebene Kind dieses Knotens

Überblick Node removeChild(Node altesKind) throws DOMException;

Argumente altesKind

Der zu löschende Kindknoten.

948 | Referenz für clientseitiges JavaScript

DOM Level 1 Core

491-0.book Seite 949 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Node.replaceChild( )

Rückgabewert Der Knoten, der gelöscht wurde. Exceptions Diese Methode kann unter folgenden Umständen eine DOMException mit den folgenden codeWerten auslösen: NO_MODIFICATION_ALLOWED_ERR

Dieser Knoten ist schreibgeschützt und gestattet nicht das Löschen von Kindern. NOT_FOUND_ERR altesKind ist kein Kind dieses Knotens.

Beschreibung

Beispiel Mit folgendem Code können Sie das letzte Kind des Dokument-Bodys entfernen: document.body.removeChild(document.body.lastChild);

Siehe auch Node.appendChild( ), Node.insertBefore( ), Node.replaceChild( )

Node.replaceChild( )

DOM Level 1 Core

Ersetzt einen Kindknoten durch einen neuen

Überblick Node replaceChild(Node neuesKind, Node altesKind) throws DOMException;

Argumente neuesKind

Der Ersatzknoten. altesKind

Der zu ersetzende Knoten. Rückgabewert Der Knoten, der aus dem Dokument entfernt und ersetzt wurde.

Referenz für clientseitiges JavaScript |

949

Referenz für clientseitiges JavaScript

Diese Methode löscht das angegebene Kind aus dem childNodes[]-Array dieses Knotens. Wenn sie mit einem Knoten aufgerufen wird, der kein Kindknoten ist, wird ein Fehler gemeldet. Die Methode removeChild() gibt den altesKind-Knoten zurück, nachdem sie ihn entfernt hat. altesKind ist weiterhin ein gültiger Knoten und kann später wieder in das Dokument eingefügt werden.

491-0.book Seite 950 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Node.selectNodes( )

Exceptions Diese Methode kann eine DOMException mit den folgenden code-Werten auslösen: HIERARCHY_REQUEST_ERR

Der Knoten lässt keine Kinder zu oder gestattet keine Kinder des angegebenen Typs, oder neuesKind ist ein Vorfahr dieses Knotens (oder ist selbst dieser Knoten). WRONG_DOCUMENT_ERR neuesKind und dieser Knoten haben unterschiedliche Werte für ownerDocument. NO_MODIFICATION_ALLOWED_ERR

Dieser Knoten ist schreibgeschützt und gestattet keine Ersetzungen, oder neuesKind ist Kind eines Knotens, der keine Löschungen erlaubt. NOT_FOUND_ERR altesKind ist kein Kind dieses Knotens.

Beschreibung Diese Methode ersetzt ein Kind des Dokumentenbaums durch ein anderes. altesKind ist der zu ersetzende Knoten und muss ein Kind dieses Knotens sein. neuesKind ist der Knoten, der ihn im childNodes[]-Array dieses Knotens ersetzt. Wenn neuesKind bereits Teil dieses Dokuments ist, wird es zuerst daraus entfernt und dann an seinem neuen Platz wieder eingefügt. Ist neuesKind ein DocumentFragment, so wird es nicht selbst eingefügt. Stattdessen werden seine Kinder der Reihe nach am ursprünglich von altesKind eingenommenen Platz eingefügt.

Beispiel Der folgende Code ersetzt einen Knoten n durch das Element und fügt dann den ersetzten Knoten in dieses Element ein. Dadurch bekommt der Knoten wieder einen Elternknoten und wird in fetter Schrift angezeigt: // Hole den ersten Kindknoten des ersten Absatzes im Dokument var n = document.getElementsByTagName("p")[0].firstChild; var b = document.createElement("b"); // Erzeuge ein -Element n.parentNode.replaceChild(b, n); // Ersetze den Knoten durch b.appendChild(n); // Füge den Knoten als Kind von wieder ein

Siehe auch Node.appendChild( ), Node.insertBefore( ), Node.removeChild( )

Node.selectNodes( ) Wählt Knoten über eine XPath-Query aus

Überblick NodeList selectNodes(String query)

950 | Referenz für clientseitiges JavaScript

IE 6

491-0.book Seite 951 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Node.selectSingleNode( )

Argumente query

Der XPath-Abfragestring. Rückgabewert Eine NodeList mit Knoten, die mit query übereinstimmen.

Beschreibung Diese IE-spezifische Methode evaluiert einen XPath-Ausdruck mit diesem Knoten als Wurzelknoten der Abfrage und gibt das Ergebnis als NodeList zurück. Die Methode selectNodes( ) ist bei Knoten von HTML-Dokumenten nicht vorhanden, sondern nur bei Knoten von XMLDokumenten. Da Document-Objekte selbst Knoten sind, kann diese Methode auf ganze XMLDokumente angewendet werden. Eine browserübergreifende Alternative finden Sie unter Document.evaluate( ).

Siehe auch

Node.selectSingleNode( )

IE 6

Finde einen Knoten, der mit einer XPath-Abfrage übereinstimmt

Überblick Node selectSingleNode(String query)

Argumente query

Der XPath-Abfrage-String. Rückgabewert Ein einzelner Knoten, der mit query übereinstimmt, oder null, wenn keine Übereinstimmungen vorhanden sind.

Beschreibung Diese IE-spezifische Methode wertet einen XPath-Ausdruck mit diesem Knoten als Kontextknoten aus. Sie gibt den ersten gefundenen passenden Knoten zurück, oder null, wenn keine Knoten passen. Die Methode selectSingleNode( ) ist bei Knoten von HTML-Dokumenten nicht vorhanden, sondern nur bei Knoten von XML-Dokumenten. Da Document-Objekte selbst Knoten sind, kann diese Methode auf ganze XML-Dokumente angewendet werden. Eine browserübergreifende Alternative finden Sie unter Document.evaluate( ).

Siehe auch Document.evaluate( ), XPathExpression; Kapitel 21

Referenz für clientseitiges JavaScript |

951

Referenz für clientseitiges JavaScript

Document.evaluate( ), XPathExpression; Kapitel 21

491-0.book Seite 952 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Node.transformNode( )

Node.transformNode( )

IE 6

Transformiert mit XSLT einen Knoten in einen String

Überblick String transformNode(Document xslt)

Argumente xslt

Ein XSLT-Stylesheet, das in ein Document-Objekt geparst wird. Rückgabewert Der erstellte Text, wenn das angegebene Stylesheet auf diesen Knoten und seine Nachfahren angewendet wird.

Beschreibung Diese IE-spezifische Methode transformiert einen Knoten und seine Nachfahren nach den in einem XSLT-Stylesheet angegebenen Regeln und gibt das Ergebnis als ungeparsten String zurück. Die Methode transformNode( ) ist bei Knoten von HTML-Dokumenten nicht vorhanden, sondern nur bei Knoten von XML-Dokumenten. Da Document-Objekte selbst Knoten sind, kann diese Methode auf ganze XML-Dokumente angewendet werden. Ähnliche Funktionalitäten in anderen Browsern finden Sie unter XSLTProcessor.

Siehe auch XSLTProcessor, Node.transformNodeToObject( ); Kapitel 21

Node.transformNodeToObject( )

IE 6

Transformiert mit XSLT einen Knoten in ein Dokument

Überblick Document transformNodeToObject(Document xslt)

Argumente xslt

Ein in ein Document-Objekt geparstes XSLT-Stylesheet. Rückgabewert Das in ein Document-Objekt geparste Ergebnis der Transformation.

Beschreibung Diese IE-spezifische Methode transformiert einen Knoten und seine Nachfahren nach den in einem XSLT-Stylesheet angegebenen Regeln und gibt das Ergebnis als Document-Objekt

952 | Referenz für clientseitiges JavaScript

491-0.book Seite 953 Mittwoch, 4. April 2007 9:55 09

e-bol.net

NodeList

zurück. Die Methode transformNodeToObject( ) ist bei Knoten von HTML-Dokumenten nicht vorhanden, sondern nur bei Knoten von XML-Dokumenten. Da Document-Objekte selbst Knoten sind, kann diese Methode auf ganze XML-Dokumente angewendet werden. Ähnliche Funktionalitäten in anderen Browsern finden Sie unter XSLTProcessor.

Siehe auch XSLTProcessor, Node.transformNode( ); Kapitel 21

NodeList Ein schreibgeschütztes Knoten-Array

DOM Level 1 Core Object ➝ NodeList

Eigenschaften readonly unsigned long length

Die Anzahl der Knoten im Array. Referenz für clientseitiges JavaScript

Methoden item( )

Gibt das angegebene Array-Element zurück.

Beschreibung Das NodeList-Interface definiert eine schreibgeschützte, geordnete Liste (d.h. ein Array) von Knotenobjekten. Die Eigenschaft length gibt an, wie viele Knoten in der Liste sind, und mit der Methode item() können Sie den Knoten an der angegebenen Listenposition abrufen. Die Elemente der NodeList sind immer gültige Node-Objekte: Eine NodeList enthält niemals null Elemente. In JavaScript verhalten sich NodeList-Objekte wie JavaScript-Arrays, und Sie können mit der Array-Notation mit eckigen Klammern ein Element der Liste abfragen, ohne item() aufrufen zu müssen. Sie können jedoch mit der Array-Notation der NodeList keine neuen Knoten zuweisen. Da es einfacher ist, sich ein NodeList-Objekt als schreibgeschütztes JavaScript-Array vorzustellen, verwendet dieses Buch statt NodeList die Schreibweise Element[] oder Node[] (d.h. ein Element-Array oder Node-Array). Die Methoden Document.getElementsByTagName( ), Element.getElementsByTagName( ) und HTMLDocument.getElementsByName( ) werden in diesem Buch so dokumentiert, als ob sie statt einer NodeList ein Element[] zurückgeben. In ähnlicher Weise ist auch die childNodes-Eigenschaft des Node-Objekts technisch gesehen ein NodeList-Objekt, doch der Referenzeintrag »Node« definiert sie als NodeNode[], und die Eigenschaft selbst wird normalerweise als »das childNodes[]-Array« bezeichnet. Beachten Sie, dass NodeList-Objekte »live« sind: Sie sind keine statischen Schnappschüsse, sondern reflektieren Änderungen am Dokumentenbaum sofort. Wenn Sie z.B. eine NodeList haben, die die Kinder eines speziellen Knotens repräsentiert, und eines dieser Kinder löschen, so wird es aus Ihrer NodeList entfernt. Seien Sie vorsichtig, wenn Sie die Elemente einer Node-

Referenz für clientseitiges JavaScript |

953

491-0.book Seite 954 Mittwoch, 4. April 2007 9:55 09

e-bol.net

NodeList.item( )

List durchlaufen und Ihr Schleifenrumpf den Dokumentenbaum in einer Weise ändert, die den Inhalt der NodeList beeinflussen könnte (indem er z.B. Knoten löscht).

Siehe auch Document, Element

NodeList.item( )

DOM Level 1 Core

Holt ein Element einer NodeList

Überblick Node item(unsigned long index);

Argumente index

Die Position (der Index) des gewünschten Knotens in der NodeList. Der Index des ersten Knotens in der NodeList ist 0 und der Index des letzten length–1. Rückgabewert Der Knoten an der angegebenen NodeList-Position oder null, wenn index kleiner als null oder größer oder gleich der Länge von NodeList ist.

Beschreibung Diese Methode gibt das angegebene Element einer NodeList zurück. In JavaScript können Sie statt item() die Array-Notation mit eckigen Klammern verwenden.

Option Eine Option in einem Select-Element

DOM Level 2 HTML Node ➝ Element ➝ HTMLElement ➝ HTMLOptionElement

Konstruktor Wie alle anderen Tags können Option-Objekte mit Document.createElement( ) erzeugt werden. Im DOM Level 0 können Sie Option-Objekte auch mit dem Konstruktor Option() dynamisch wie folgt erzeugen: new Option(String text, String value, boolean defaultSelected, boolean selected)

Argumente text

Ein optionales String-Argument, das die text-Eigenschaft des Option-Objekts angibt. value

Ein optionales String-Argument, das die value-Eigenschaft des Option-Objekts angibt.

954 | Referenz für clientseitiges JavaScript

491-0.book Seite 955 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Option defaultSelected

Ein optionales Boolesches Argument, das die defaultSelected-Eigenschaft des OptionObjekts angibt. selected

Ein optionales Boolesches Argument, das die selected-Eigenschaft des Option-Objekts angibt.

Eigenschaften boolean defaultSelected

Der Anfangswert des selected-Attributs des -Elements. Wenn das Formular zurückgesetzt wird, wird die Eigenschaft selected auf den Wert dieser Eigenschaft gesetzt. Wenn Sie diese Eigenschaft setzen, wird der Wert der selected-Eigenschaft gleich mitgesetzt. boolean disabled Wenn true, ist dieses -Element deaktiviert und der Benutzer hat keine Erlaubnis, es auszuwählen. Bildet das Attribut disabled ab.

Referenz für clientseitiges JavaScript

readonlyHTMLFormElementform Eine Referenz auf das -Element, in dem dieses Element enthalten ist. readonly long index

Die Position dieses -Elements innerhalb des -Elements. String label

Der Text, der für die Option angezeigt werden soll. Bildet das label-Attribut ab. Wenn diese Eigenschaft nicht angegeben ist, wird stattdessen der in einfachem Text gespeicherte Inhalt des -Elements verwendet. boolean selected

Der aktuelle Zustand dieser Option: Ist er true, so ist die Option ausgewählt. Ihren Anfangswert bezieht diese Eigenschaft aus dem selected-Attribut. readonly String text

Der einfache Text im -Element. Er ist die Beschriftung der Option. String value

Der mit dem Formular übermittelte Wert, wenn diese Option bei der Formularübermittlung eingeschaltet ist. Bildet das value-Attribut ab.

HTML-Syntax Ein Option-Objekt wird mit einem -Tag innerhalb eines -Tags erzeugt, das sich in einem befindet. In der Regel erscheinen mehrere -Tags innerhalb des -Tags: plain_text_label [ ]

// Der zurückgegebene Wert, wenn das Formular übermittelt wird // Gibt an, ob diese Option anfangs aktiviert ist // Der für diese Option darzustellende Text

Referenz für clientseitiges JavaScript |

955

491-0.book Seite 956 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Packages ... ...

Beschreibung Das Option-Objekt beschreibt eine einzelne Option innerhalb eines Select-Objekts. Die Eigenschaften dieses Objekts geben an, ob es standardmäßig oder gegenwärtig aktiviert ist, wo es im options[]-Array seines Select-Objekts steht, welche Beschriftung es anzeigt und welchen Wert es an den Server übergibt, wenn es bei der Formularübermittlung aktiviert ist. Achtung: Obwohl der von dieser Option angezeigte Text außerhalb des -Tags angegeben wird, muss er einfacher, unformatierter Text ohne HTML-Tags sein, damit er in Listenfeldern und Dropdown-Menüs, die keine HTML-Formatierungen unterstützen, auch korrekt angezeigt wird. Mit dem Option( )-Konstruktor können Sie neue Option-Objekte zur Darstellung in einem Select-Objekt dynamisch erzeugen. Nachdem ein neues Option-Objekt erzeugt wurde, kann es mit Select.add( ) an die Liste der Optionen in einem Select-Objekt angefügt werden. Eine genaue Beschreibung finden Sie in Select.options[].

Siehe auch Select, Select.options[]; Kapitel 18

Packages Siehe Packages in Teil III

Password Siehe Input

Plugin Beschreibt ein installiertes Plug-in

JavaScript 1.1; von IE nicht unterstützt Object ➝ Plugin

Überblick navigator.plugins[i] navigator.plugins['name']

Eigenschaften description

Ein schreibgeschützter String, der eine für Menschen lesbare Beschreibung des angegebenen Plug-ins enthält. Der Text dieser Beschreibung wird von den Schöpfern des Plug-ins verfasst und kann z.B. Hersteller- und Versionsinformationen sowie eine knappe Beschreibung der Funktion des Plug-ins umfassen.

956 | Referenz für clientseitiges JavaScript

491-0.book Seite 957 Mittwoch, 4. April 2007 9:55 09

e-bol.net

Plugin filename

Ein schreibgeschützter String mit dem Namen der Festplattendatei, die das eigentliche Programm des Plug-ins enthält. Dieser Name ist plattformabhängig. Die name-Eigenschaft ist zur Identifikation eines Plug-ins nützlicher als filename. length

Jedes Plug-in-Objekt ist gleichzeitig ein Array von MimeType-Objekten, die angeben, welche Datenformate es unterstützt. Wie bei allen Arrays gibt auch hier die length-Eigenschaft an, wie viele Elemente das Array hat. name

Die name-Eigenschaft eines Plug-in-Objekts ist ein schreibgeschützter String, der den Namen des Plug-ins angibt. Jedes Plug-in sollte einen Namen haben, der es eindeutig identifiziert. Der Name eines Plug-ins kann als Index für das navigator.plugins[]-Array verwendet werden. Diesen Umstand können Sie nutzen, um auf einfache Weise festzustellen, ob ein Plug-in eines bestimmten Namens auf dem verwendeten Browser installiert ist: var flash_installed = (navigator.plugins["Shockwave Flash"] != null);

Die Array-Elemente des Plug-in-Objekts sind MimeType-Objekte, die die von dem Plug-in unterstützten Datenformate angeben. Die Eigenschaft length gibt die Anzahl der MimeTypeObjekte in diesem Array an.

Beschreibung Ein Plug-in ist ein Software-Modul, das von einem Browser aufgerufen werden kann, um spezielle Typen von eingebetteten Daten im Browserfenster anzuzeigen. Plug-ins werden vom Plug-in-Objekt repräsentiert, und die Eigenschaft plugins[] des Navigator-Objekts ist ein Array aus Plug-in-Objekten, die die im Browser installierten Plug-ins darstellen. IE unterstützt das Plug-in-Objekt nicht, und das Array navigator.plugins[] ist in diesem Browser immer leer. navigator.plugins[] kann mit Zahlen indiziert werden. Das ist hilfreich, wenn Sie die gesamte

Liste der installierten Plug-ins auf der Suche nach einem bestimmten Plug-in durchlaufen wollen (beispielsweise ein Plug-in, das den MIME-Typ für die Daten unterstützt, die Sie in ihrer Webseite einbetten wollen). Sie können das Array aber auch mit den Plug-in-Namen indizieren. Wenn Sie wissen möchten, ob ein bestimmtes Plug-in auf dem Browser des Benutzers installiert ist, können Sie das also folgendermaßen prüfen: var flash_installed = (navigator.plugins["Shockwave Flash"] != null);

Der Name, den Sie mit dieser Technik als Array-Index verwenden, ist derselbe, der den Wert der name-Eigenschaft des Plug-ins bildet. Das Plug-in-Objekt ist insofern etwas ungewöhnlich, als es sowohl normale Objekteigenschaften als auch Array-Elemente hat. Die Eigenschaften des Plug-in-Objekts liefern Informationen über das Plug-in, und seine Array-Elemente sind MimeType-Objekte, die angeben, welche Formate für eingebettete Daten das Plug-in unterstützt. Bitte verwechseln Sie den Umstand, dass Plug-in-Objekte in einem Array des Navigator-Objekts gespeichert sind,

Referenz für clientseitiges JavaScript |

957

Referenz für clientseitiges JavaScript

Array-Elemente

491-0.book Seite 958 Mittwoch, 4. April 2007 9:55 09

e-bol.net

ProcessingInstruction

nicht mit dem Umstand, dass jedes Plug-in-Objekt selbst ein Array von MimeType-Objekten ist. Da hier zwei Arrays im Spiel sind, können Sie Code wie den folgenden schreiben: navigator.plugins[i][j] navigator.plugins["LiveAudio"][0]

// Der j-te MIME-Typ des i-ten Plug-ins // Erster MIME-Typ des Plug-ins LiveAudio

Zum Schluss sollten Sie auch noch beachten, dass einerseits die Array-Elemente eines Plug-inObjekts die von diesem Plug-in unterstützten MIME-Typen spezifizieren, Sie andererseits mit der Eigenschaft enabledPlugin des MimeType-Objekts aber auch ermitteln können, welches Plug-in einen bestimmten MIME-Typ unterstützt.

Siehe auch Navigator, MimeType

ProcessingInstruction Eine Verarbeitungsanweisung in einem XML-Dokument

DOM Level 1 XML Node ➝ ProcessingInstruction

Eigenschaften String data

Der Inhalt der Verarbeitungsanweisung (vom ersten nicht-leeren Zeichen hinter dem Ziel bis ausschließlich zum schließenden ?>). readonly String target

Das Ziel der Verarbeitungsanweisung. Es ist der erste Bezeichner, der auf das öffnende

JavaScript: Das umfassende Handbuch, 10. Auflage

,	HTMLTableCellElement: [readonly long] cellIndex, abbr, align, axis, bgColor, ch, chOff, [long] colSpan, headers, height, [boolean] noWrap, [long] rowSpan, scope, vAlign, width HTMLTextAreaElement: defaultValue, [readonly HTMLFormElement] form, accessKey, [long] cols, [boolean] disabled, name, [boolean] readOnly, [long] rows, [long] tabIndex, [readonly] type, value, blur( ), focus( ), select( ) Siehe	Siehe	Siehe HTMLTitleElement: text

JavaScript: Das umfassende Referenzwerk

JavaScript: Das umfassende Handbuch, 10. Auflage

openSUSE 11.2: Das umfassende Handbuch

Python 3 Das umfassende Handbuch

Python 3 Das umfassende Handbuch

WordPress 3: Das umfassende Handbuch

GIMP 2.6: Das umfassende Handbuch

Das Beste an JavaScript

Das JavaScript Codebook

Adobe Dreamweaver CS4: Das umfassende Handbuch

Visual C++ 2010: Das umfassende Handbuch

Shell-Programmierung: Das umfassende Handbuch, 3. Auflage

VMware vSphere 4: Das umfassende Handbuch

Suchmaschinen-Optimierung: Das umfassende Handbuch, 5. Auflage

Adobe Dreamweaver CS5: Das umfassende Handbuch

PC-Netzwerke: Das umfassende Handbuch, 5. Auflage

Adobe InDesign CS 5.5: Das umfassende Handbuch

PC-Netzwerke: Das umfassende Handbuch, 5. Auflage

Suchmaschinen-Optimierung: Das umfassende Handbuch, 5. Auflage

Cascading Style Sheets - Das umfassende Handbuch

Windows 7 für Administratoren: Das umfassende Handbuch

Apache 2.2: Das umfassende Handbuch, 3. Auflage

JavaScript

JavaScript

JavaScript

Visual Basic 2008: Das umfassende Handbuch, 3. Auflage

Die große Grammatik Deutsch: Das umfassende Nachschlagewerk (Einfach. Richtig)

Webseiten programmieren und gestalten: Das umfassende Handbuch, 3. Auflage

Debian GNU Linux: Das umfassende Handbuch, 3. Auflage

Java ist auch eine Insel: Das umfassende Handbuch, 10. Auflage

Kraftquelle Mentaltraining. Die umfassende Methode, das Leben selbst zu gestalten

JavaScript: Das umfassende Referenzwerk

JavaScript: Das umfassende Handbuch, 10. Auflage

openSUSE 11.2: Das umfassende Handbuch

Python 3 Das umfassende Handbuch

Python 3 Das umfassende Handbuch

WordPress 3: Das umfassende Handbuch

GIMP 2.6: Das umfassende Handbuch

Das Beste an JavaScript

Das JavaScript Codebook

Adobe Dreamweaver CS4: Das umfassende Handbuch

Visual C++ 2010: Das umfassende Handbuch

Shell-Programmierung: Das umfassende Handbuch, 3. Auflage

VMware vSphere 4: Das umfassende Handbuch

Suchmaschinen-Optimierung: Das umfassende Handbuch, 5. Auflage

Adobe Dreamweaver CS5: Das umfassende Handbuch

PC-Netzwerke: Das umfassende Handbuch, 5. Auflage

Adobe InDesign CS 5.5: Das umfassende Handbuch

PC-Netzwerke: Das umfassende Handbuch, 5. Auflage

Suchmaschinen-Optimierung: Das umfassende Handbuch, 5. Auflage

Cascading Style Sheets - Das umfassende Handbuch

Windows 7 für Administratoren: Das umfassende Handbuch

Apache 2.2: Das umfassende Handbuch, 3. Auflage

JavaScript

JavaScript

JavaScript

Visual Basic 2008: Das umfassende Handbuch, 3. Auflage

Die große Grammatik Deutsch: Das umfassende Nachschlagewerk (Einfach. Richtig)

Webseiten programmieren und gestalten: Das umfassende Handbuch, 3. Auflage

Debian GNU Linux: Das umfassende Handbuch, 3. Auflage

Java ist auch eine Insel: Das umfassende Handbuch, 10. Auflage

Kraftquelle Mentaltraining. Die umfassende Methode, das Leben selbst zu gestalten

Recommend Documents