Das JavaScript Codebook [2. Aufl] 382732162X, 9783827321626, 3827324254, 9783827324252 [PDF]

Zitiervorschau

---

Das JavaScript Codebook

Ralph Steyer

Das JavaScript Codebook

An imprint of Pearson Education München • Boston • San Francisco • Harlow, England Don Mills, Ontario • Sydney • Mexico City Madrid • Amsterdam

Bibliografische Information Der Deutschen Bibliothek Die Deutsche Bibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über abrufbar.

Die Informationen in diesem Produkt werden ohne Rücksicht auf einen eventuellen Patentschutz veröffentlicht. Warennamen werden ohne Gewährleistung der freien Verwendbarkeit benutzt. Bei der Zusammenstellung von Texten und Abbildungen wurde mit größter Sorgfalt vorgegangen. Trotzdem können Fehler nicht vollständig ausgeschlossen werden. Verlag, Herausgeber und Autoren können für fehlerhafte Angaben und deren Folgen weder eine juristische Verantwortung noch irgendeine Haftung übernehmen. Für Verbesserungsvorschläge und Hinweise auf Fehler sind Verlag und Herausgeber dankbar. Alle Rechte vorbehalten, auch die der fotomechanischen Wiedergabe und der Speicherung in elektronischen Medien. Die gewerbliche Nutzung der in diesem Produkt gezeigten Modelle und Arbeiten ist nicht zulässig. Fast alle Hardware- und Softwarebezeichnungen, die in diesem Buch erwähnt werden, sind gleichzeitig auch eingetragene Warenzeichen oder sollten als solche betrachtet werden. Umwelthinweis: Dieses Buch wurde auf chlorfrei gebleichtem Papier gedruckt. Die Einschrumpffolie – zum Schutz vor Verschmutzung – ist aus umweltverträglichem und recyclingfähigem PE-Material.

10 9 8 7 6 5 4 3 2 1 07 06 05 ISBN 3-8273-2162-X © 2005 by Addison-Wesley Verlag, ein Imprint der Pearson Education Deutschland GmbH, Martin-Kollar-Straße 10–12, D-81829 München/Germany Alle Rechte vorbehalten Korrektorat: Sandra Gottmann, Bonn Lektorat: Frank Eller, [email protected] Herstellung: Monika Weiher, [email protected] Satz: reemers publishing services gmbh, Krefeld – gesetzt aus der Minion Umschlaggestaltung: Marco Lindenbeck, webwo GmbH ([email protected]) Druck und Verarbeitung: Kösel, Krugzell (www.Koeselbuch.de) Printed in Germany

Inhaltsverzeichnis Vorwort

15

1 2

16 16

Über den Autor Wozu ein Codebook?

Teil I Einführung

19

Einführung

21

1 2 3 4 5 6 7

21 22 22 24 25 26 34

Aufbau des Buches Die Beispiele Was ist JavaScript? Der Aufbau von Skriptsprachen und die Rolle des Interpreters Die Versionszyklen von JavaScript HTML- bzw. XHTML-Grundlagen JavaScript-Grundlagen

Teil II Rezepte

77

Grundlagen

79

1 2 3

79 84

4 5 6 7 8 9 10 11 12 13 14

Wie kann ich JavaScript in Webseiten einbinden? Wie kann ich eine JavaScript-Version bei der Einbindung angeben? Wie kann ich sicherstellen, dass ein Browser nur bekannte JavaScript-Anweisungen ausführt? Wie kann ich testen, ob bei einem Browser JavaScript aktiviert ist? Wie kann ich testen, welche JavaScript-Version von einem Browser unterstützt wird? Wie kann ich den Browser eines Anwenders abfragen? Wie kann ich die Version eines bekannten Browsers bei einem Anwender abfragen? Wie kann ich die Spracheinstellung eines Browsers bei einem Anwender abfragen? Wie kann ich die Bildschirmauflösung eines Besuchers ermitteln? Wie kann ich die eingestellte Anzahl an Farben bei einem Besucher ermitteln? Wie kann ich testen, ob bei einem Browser Java unterstützt wird? Wie kann ich bestimmen, welche Plug-Ins ein Browser unterstützt? Wie kann ich bestimmen, welche MIME-Typen ein Browser unterstützt? Wie kann ich eine Browserweiche erstellen?

88 90 92 93 97 99 100 102 104 105 109 112

6

Inhaltsverzeichnis

Core

125

15 16 17

125 127

18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

Wie kann ich einen Test auf Unendlichkeit durchführen? Wie kann ich testen, ob ein Ausdruck numerisch ist? Festlegung des Variablen- oder eines Literaltyps bzw. des Funktionsrückgabetyps Wie kann ich den Typ einer Variablen, eines Literals beziehungsweise den Rückgabewert einer Funktion bestimmen? Wie kann ich den Typ einer Variablen bzw. den Rückgabewert einer Funktion gegen automatische Typkonvertierung schützen? Wie kann ich eine Festlegung auf string realisieren? Wie kann ich eine Festlegung auf number realisieren? Wie kann ich eine Festlegung auf boolean realisieren? Wie kann ich einen Wertebereich für eine Variable festlegen? Wie kann ich testen, ob eine Variable definiert wurde? Wie kann ich eine Variable als lokal festlegen? Wie kann ich eine Variable als global beziehungsweise permanent festlegen? Wie übergebe ich einer Funktion Werte? Wie kann ich eine Funktion mit Defaultwerten für Parameter erstellen? Wie kann ich bei einer Funktion einen Wert zurückgeben? Wie erzeuge ich einen rekursiven Aufruf einer Funktion? Wie erzeuge ich eine Objektinstanz? Wie erzeuge ich in JavaScript ein eigenes Objekt? Wie erweitere ich ein bestehendes Objekt beziehungsweise eine Klasse? Wie kann ich den Inhalt von einem Objekt als Wert ausgeben? Wie kann ich Zeichenketten kodieren und dekodieren? Wie kann ich Sonderzeichen in Strings verwenden?

129 130 131 134 134 137 139 140 142 145 145 148 149 152 155 156 159 164 165 167

Allgemeines zu Formularen und Benutzereingaben

169

37 38 39 40 41 42

170 172 181 183 184

43 44 45 46 47 48

Wie kann ich ein Webformular mit HTML aufbauen? Wie generiere ich einen Formularcontainer? Wie kann ich ein einzeiliges Eingabefeld realisieren? Wie kann ich ein einzeiliges Passwortfeld realisieren? Wie kann ich eine einfache Formularschaltfläche realisieren? Wie kann ich nur mit HTML eine Formularschaltfläche zum Abschicken von Formulardaten realisieren? Wie kann ich rein mit HTML eine Grafik zum Abschicken von Formulardaten realisieren? Wie kann ich nur mit HTML eine Formularschaltfläche zum Zurücksetzen von Formulardaten realisieren? Wie kann ich rein mit HTML eine Grafik zum Zurücksetzen von Formulardaten realisieren? Wie kann ich ein Kontrollfeld realisieren? Wie kann ich eine Gruppe mit Optionsfeldern realisieren? Wie kann ich rein mit HTML ein einzeiliges Eingabefeld realisieren, in dem nur die Eingabe eines Kalenderdatums erlaubt ist?

185 186 189 190 190 191 192

Inhaltsverzeichnis

49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84

Wie kann ich rein mit HTML ein einzeiliges Eingabefeld realisieren, in dem nur die Eingabe von Dezimalkommazahlen gestattet ist? Wie kann ich rein mit HTML ein einzeiliges Eingabefeld realisieren, in dem nur die Eingabe von ganzen Zahlen gestattet ist? Wie kann ich rein mit HTML ein einzeiliges Eingabefeld realisieren, in dem nur die Eingabe eines URL gestattet ist? Wie kann ich rein mit HTML ein einzeiliges Eingabefeld realisieren, in dem nur Werte kleiner als ein vorgegebener Grenzwert gestattet sind? Wie kann ich rein mit HTML ein einzeiliges Eingabefeld realisieren, in das nur Werte größer als ein vorgegebener Grenzwert gestattet werden? Wie kann ich ein Dateiauswahlfenster realisieren, das die ausgewählte Datei in das damit verbundene Eingabefeld übernimmt? Wie kann ich ein verstecktes Formularfeld realisieren? Wie kann ich ein mehrzeiliges Eingabefeld generieren? Wie kann ich eine Auswahlliste mit einzeiligem Listenfeld erstellen? Wie kann ich eine Auswahlliste mit mehrzeiligem Listenfeld erstellen? Wie kann ich eine Auswahlliste mit Mehrfachauswahl erstellen? Wie kann ich einen Eintrag in einer Auswahlliste vorselektieren? Wie kann ich ohne ein Webformular mit einem Besucher per JavaScript interagieren? Wie greife ich mit JavaScript grundsätzlich auf ein Webformular zu? Wie bestimme ich die Anzahl der Elemente in einem Formular? Wie greife ich auf den Namen eines Formulars zu? Wie greife ich auf die Versandmethode eines Formulars zu? Wie greife ich auf die Zieladresse eines Formulars zu? Wie greife ich auf das Ziel der Antwort auf ein Formular zu? Wie greife ich auf die Kodierung eines Formulars zu? Wie kann ich die Formulardaten ohne einen Submit-Button wegschicken? Wie kann ich die Formulardaten ohne einen Reset-Button zurücksetzen? Wie greife ich grundsätzlich auf die Formularelemente zu? Wie greife ich auf den Wert eines Formularelements zu? Wie greife ich auf den Namen eines Formularelements zu? Wie erfolgt ein verkürzter Zugriff auf ein Formularelement über this? Wie greife ich aus einem Formularelement auf das umgehende Formular zu? Wie bestimme ich den Typ eines Formularelements? Wie kann ich auf den Selektionszustand von einem Optionsfeld oder einem Kontrollkästchen zugreifen? Wie greife ich auf die Elemente einer Auswahlliste in einem Listenfeld zu? Wie greife ich auf den Wert eines Eintrags in einer Auswahlliste zu? Wie greife ich auf die Beschriftung eines Eintrags in einer Auswahlliste zu? Wie ermittle ich die Anzahl der Auswahlmöglichkeiten in einer Auswahlliste? Wie kann ich testen oder festlegen, welcher Eintrag in einer Auswahlliste selektiert ist? Wie kann ich mit JavaScript den Fokus von einem Formularelement nehmen? Wie kann ich mit JavaScript einem Formularelement den Fokus geben?

7

193 193 194 194 195 195 197 198 200 202 204 205 206 211 214 215 216 221 223 227 229 234 235 238 242 243 245 247 250 251 254 256 259 261 264 266

8

85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112

Inhaltsverzeichnis

Wie kann ich ein Formularelement selektieren bzw. deselektieren? Wie kann ich mit JavaScript einen Klick eines Anwenders auf ein Formularelement simulieren? Wie kann ich JavaScript-Funktionen aus Formularen heraus aufrufen? Wie setze ich onMouseOver bei Formularelementen ein? Wie setze ich onFocus bei Formularelementen ein? Wie setze ich onBlur bei Formularelementen ein? Wie setze ich onChange bei Formularelementen ein? Wie kann ich auf das Zurücksetzen eines Formulars reagieren? Wie kann ich mit JavaScript bei freier Texteingabe eine maximale Anzahl der einzugebenden Zeichen festlegen? Wie ist die Kontrolle der Benutzereingabe beim unmittelbaren Eingeben eines Zeichens möglich? Wie erfolgt die Kontrolle der Benutzereingabe beim Verlassen des Feldes beziehungsweise bei der Entgegennahme eines Rückgabewerts? Wie erfolgt die Kontrolle der Benutzereingabe beim Verlassen beziehungsweise Absenden des kompletten Formulars? Wie kann ich bei freier Texteingabe eine minimale Anzahl einzugebender Zeichen festlegen? Wie erfolgt die Kontrolle der Benutzereingabe beim Verlassen des Feldes beziehungsweise der Entgegennahme eines Rückgabewerts? Wie erfolgt die Kontrolle der Benutzereingabe beim Verlassen beziehungsweise Absenden des kompletten Formulars? Wie kann ich bei freier Texteingabe eine maximale Anzahl an angezeigten Zeichen festlegen? Wie kann ich mit JavaScript bei freier Texteingabe einen Vorgabewert festlegen? Wie kann ich bei freier Texteingabe gewährleisten, dass nur Dezimalkommazahlen gestattet sind? Wie kann ich bei freier Texteingabe gewährleisten, dass nur Ganzzahlen gestattet sind? Wie kann ich bei freier Texteingabe sicherstellen, dass dort nur Werte kleiner als ein vorgegebener Grenzwert gestattet sind? Wie kann ich sicherstellen, dass dort nur Werte größer als ein vorgegebener Grenzwert gestattet sind? Wie kann ich mit JavaScript ein Pflichtfeld erzwingen? Wie kann ich mit JavaScript bei freier Texteingabe einen bestimmten Inhalt erzwingen? Wie kann ich eine gültige E-Mail-Adresse überprüfen? Wie kann ich ein freies Eingabefeld realisieren, in dem nur die Eingabe eines URLs gestattet ist? Wie kann ich ein Eingabefeld realisieren, in dem nur die Eingabe eines Kalenderdatums erlaubt ist? Wie kann ich die Eingabe bestimmter Zeichen in einem freien Formularfeld verhindern? Wie kann ich ein Webformular grundsätzlich plausibilisieren?

267 276 277 281 282 286 289 295 299 300 306 313 317 317 320 324 334 336 344 347 353 355 357 359 371 380 387 400

Inhaltsverzeichnis

9

113 Welche Problemstellungen müssen beachtet werden? 401 114 Wie kann ich sicherstellen, dass ein Formular nur plausibilisiert abgeschickt wird? 439 Ausnahmebehandlung

443

115 116 117 118

443 451 451 459

Was ist eine Ausnahmen, und wie kann ich sie behandeln? Wie kann ich mehrere Ausnahmen behandeln? Wie kann ich selbst definierte Ausnahmen erzeugen und verwenden? Wie kann ich freie Benutzereingaben mit dem Ausnahmekonzept absichern?

Datenfelder

465

119 120 121 122 123 124 125 126

466 468 469 469 470 472 475

127 128 129 130 131 132 133 134 135 136 137 138 139 140

Wie kann ich ein Datenfeld anlegen? Wie greife ich auf ein Datenfeld zu? Wie erfolgt ein anonymer Zugriff auf ein Datenfeld? Wie greife ich auf die Elemente in einem Datenfeld zu? Wie erfolgt der Zugriff über einen numerischen Index? Wie erfolgt der Zugriff über einen String-Index? Assoziative Datenfelder Wie erfolgt der Zugriff auf alle Elemente eines Datenfelds über for...in? Wie kann ich die Datenfeldgröße bzw. die Anzahl der enthaltenen Elemente abfragen? Wie kann ich die Größe eines Datenfelds festlegen? Wie lege ich ein mehrdimensionales Datenfeld an und greife darauf zu? Wie kann ich ein Datenfeld sortieren? Wie kann ich die Sortierung eines Datenfelds umdrehen? Wie kann ich die Inhalte eines Datenfelds zu einem String verbinden? Wie kann ich ein Datenfeldelement aus dem Datenfeld entfernen? Wie kann ich an das Ende eines Datenfelds ein oder mehrere Elemente anfügen? Wie kann ich einen Teil eines Datenfelds extrahieren? Wie kann ich zwei Datenfelder zusammenfügen? Wie kann ich am Anfang eines Datenfelds Elemente einfügen? Wie kann ich an einer beliebigen Stelle eines Datenfelds Elemente einfügen? Wie ermittle ich den kleinsten oder den größten Wert in einem Datenfeld? Wie kann ich den Inhalt eines Datenfelds zufällig mischen? Wie kann ich eine Lottoziehung realisieren?

477 482 484 490 503 505 506 514 516 519 521 525 527 531 534

Stringmanipulation

539

141 142 143 144

539 541 542

145 146 147 148

Wie finde ich die Länge eines Strings heraus? Wie kann ich die Buchstaben in einem String in Großbuchstaben konvertieren? Wie kann ich die Buchstaben in einem String in Kleinbuchstaben konvertieren? Wie ermittele ich das Zeichen, das in einem String an einer bestimmten Stelle steht? Wie ermittele ich die Unicode-Kodierung von einem bestimmten Zeichen, das in einem String steht? Wie verbinde ich zwei oder mehr Strings zu einem neuen String? Wie kann ich aus einer Unicode-Sequenz ein Zeichen erstellen? Wie kann ich in Strings HTML-Formatierungen vornehmen?

543 544 546 547 550

10

Inhaltsverzeichnis

149 Wie kann ich das erste Vorkommen eines Zeichens oder einer Zeichenkette innerhalb eines Strings ermitteln? 150 Wie kann ich das letzte Vorkommen eines Zeichens oder einer Zeichenkette innerhalb eines Strings ermitteln? 151 Wie kann ich innerhalb eines Strings einen Text ersetzen? 152 Wie kann ich mit regulären Ausdrücken in Strings suchen und sie ersetzen? 153 Wie kann ich einen Teil eines Strings extrahieren (slice)? 154 Wie erfolgt die Extrahierung mit substr()? 155 Wie erfolgt die Extrahierung mit substring()? 156 Wie kann ich einen String an einem Trennzeichen in ein Datenfeld aufspalten?

558 559 560 591 592 593 594

Datumsoperationen

597

157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175

597 599 602 603 604 607 607 608 609 610 611 611 612 618 619 622 623 625

176 177 178 179 180 181 182 183 184 185

Wie kann ich ein Datumsobjekt mit dem aktuellen Systemdatum erzeugen? Wie kann ich ein Datumsobjekt mit einem vorgegebenen Datum erzeugen? Wie kann ich den Tag des Monats aus einem Datumsobjekt extrahieren? Wie kann ich in einem existierenden Datumsobjekt den Monatstag ändern? Wie kann ich den Wochentag des Objekts aus einem Datumsobjekt extrahieren? Wie kann ich in einem existierenden Datumsobjekt den Wochentag ändern? Wie kann ich die Stunden aus einem Datumsobjekt extrahieren? Wie kann ich in einem existierenden Datumsobjekt die Stunden ändern? Wie kann ich die Minuten der Uhrzeit aus einem Datumsobjekt extrahieren? Wie kann ich in einem existierenden Datumsobjekt die Minuten ändern? Wie kann ich die Sekunden der Uhrzeit aus einem Datumsobjekt extrahieren? Wie kann ich in einem existierenden Datumsobjekt die Sekunden ändern? Wie kann ich die Jahreszahl aus einem Datumsobjekt extrahieren? Wie kann ich in einem existierenden Datumsobjekt die Jahreszahl ändern? Wie kann ich den Monat aus einem Datumsobjekt extrahieren? Wie kann ich in einem existierenden Datumsobjekt den Monat ändern? Wie kann ich die Zeit, die seit dem 1.1.1970, 0:00:00 vergangen ist, extrahieren? Wie kann ich in einem existierenden Datumsobjekt die Millisekunden ändern? Wie kann ich den Unterschied zwischen der lokalen Zeit und Greenwich Meridian Time ermitteln? Wie kann ich eine Zeit in den IETF-Standard umwandeln? Wie kann ich eine Zeit in eine Zeichenkette mit lokaler Darstellung umwandeln? Wie kann ich ein Schaltjahr bestimmen? Wie kann ich mit Datumsangaben rechnen? Wie kann ich die Differenz zwischen zwei Datumsangaben bestimmen? Wie kann ich das Alter einer Person bestimmen? Wie kann ich ein Ablaufdatum für den Inhalt einer Webseite festlegen? Wie kann ich die Zeitspanne bis zu einem bestimmten Termin berechnen? Wie kann ich mit Datumsobjekten Summenberechnungen durchführen? Wie kann ich einem Anwender suggerieren, dass eine Webseite topaktuell ist?

556

626 627 628 632 635 635 635 642 644 646 649

Inhaltsverzeichnis

11

Fenster und Dokumente

669

186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203

670 671 675 677 682 684 687 693 695 696 697 699 699 700 701 702 704

204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225

Wie kann ich den Inhalt einer Webseite dynamisch schreiben? Wie kann ich in ein Dokument schreiben? Wie kann ich ein Dokument explizit öffnen oder schließen? Wie habe ich Zugriff auf Layoutinformationen in einer Webseite über document? Wie kann ich auf alle Anker in einer Webseite zugreifen? Wie kann ich auf Java-Applets in einer Webseite zugreifen? Was ist LiveConnect, und wie kann ich es nutzen? Der direkte Java-Zugriff Wie kann ich die Höhe und die Breite einer Webseite abfragen? Wie kann ich den Termin der letzten Änderung einer Webseite abfragen? Wie kann ich auf alle Hyperlinks in einer Webseite zugreifen? Wie kann ich auf den vollständigen URL einer HTML-Datei zugreifen? Wie kann ich auf alle Plug-Ins in einer Webseite zugreifen? Wie kann ich den Namen eines Fensters bestimmen? Wie kann ich auf den Titel einer HTML-Datei zugreifen? Wie kann ich ermitteln, welchen Text ein Anwender im Dokument selektiert hat? Wie kann ich ein einfaches Mitteilungsfenster anzeigen? Wie kann ich ein Fenster zum Bestätigen einer Aktion anzeigen? Wie kann ich mit einem Dialogfenster eine freie Benutzereingabe entgegennehmen? Wie kann ich die Startseite des Browsers aufrufen? Wie kann ich auf die Statuszeile des Browsers zugreifen? Wie kann ich Standardanzeigen in der Statuszeile des Browsers ermitteln oder festlegen? Wie kann ich eine Laufschrift in der Statuszeile des Webbrowsers anzeigen? Wie kann ich den Inhalt einer Webseite ausdrucken? Wie kann ich den Ladevorgang einer Webseite abbrechen? Wie kann ich eine Aktion zeitverzögert aufrufen? Wie kann ich einen Aufruf von setTimeout() anhalten? Wie kann ich auf die Adresszeile des Webbrowsers zugreifen? Wie kann ich mit JavaScript auf eine Seite weiterleiten? Wie kann ich eine aktuelle Webseite neu laden? Wie kann ich ein Browserfenster öffnen? Wie kann ich beim Öffnen eines Fensters dessen Verhalten und Aussehen beeinflussen? Wie kann ich ein Browserfenster dynamisch positionieren? Wie kann ich ein Browserfenster dynamisch in der Größe verändern? Wie kann ich den Inhalt eines Browserfensters dynamisch scrollen? Wie kann ich ein Browserfenster schließen? Wie kann ich überprüfen, ob ein zuvor geöffnetes Browserfenster noch offen ist? Wie kann ich auf die History des Webbrowsers zugreifen? Wie kann ich die Anzahl der Einträge in der History eines Besuchers ermitteln? Wie kann ich die zuletzt besuchte Seite eines Anwenders aufrufen? Wie kann ich mit Cookies arbeiten?

705 706 707 708 710 711 712 714 715 716 718 718 719 721 724 726 727 728 729 730 730 731 732

12

Inhaltsverzeichnis

226 Wie kann ich überprüfen, ob ein Anwender die Verwendung von Cookies aktiviert hat? 227 Wie kann ich den Wert einer Variablen zu einer anderen Webseite weitergeben? 228 Wie kann ich sicherstellen, dass eine Webseite nur mit Zugangsbeschränkung aufgerufen werden kann? 229 Wie kann ich mit Frames umgehen? 230 Wie erfolgen Verweise zu anderen Frames mit HTML? 231 Wie kann ich JavaScript auf Frames anwenden? 232 Wie kann ich gleichzeitig mehrere Frames aktualisieren? 233 Wie kann ich verhindern, dass meine Webseite in einem Frameset angezeigt wird?

736 736 740 741 744 746 747 753

Animation und DHTML

755

234 235 236 237

755 756 760

238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254

Was versteht man unter Dynamic-HTML? Wie kann ich das all-Objekt verwenden? Wie kann ich das style-Objekt einsetzen? Wie kann ich das style-Objekt so einsetzen, dass es in allen neueren Browsern funktioniert? Wie kann ich das style-Objekt in dem alten Netscape-Modell verwenden? Wie kann ich dynamisch Bilder erzeugen und darauf zugreifen? Wie kann ich die Höhe und die Breite eines Bildes dynamisch verändern? Wie kann ich durch Setzen der src-Eigenschaft einen Rollover-Effekt erzielen? Wie kann ich mit JavaScript und der src-Eigenschaft eine Animation realisieren? Wie kann ich mit JavaScript durch Veränderung der Größe einer Grafik eine Animation realisieren? Wie kann ich mit JavaScript dynamisch auf Style Sheets zugreifen? Wie kann ich Style Sheets in eine Webseite einbinden? Wie sieht eine CSS-Deklarationen grundsätzlich aus? Wie kann ich JavaScript auf Style Sheets anwenden? Wie kann ich den Hover-Effekt als Rollover-Effekt einsetzen? Wie kann ich Elemente einer Webseite frei positionieren? Wie kann ich mit JavaScript und Style Sheets dynamisch positionieren? Wie kann ich anspruchsvollere Animationen mit JavaScript und Style Sheets durchführen? Wie kann ich eine Animation per Bildverschiebung realisieren? Wie kann ich eine mit JavaScript generierte Animation erstellen? Wie kann ich ein Element in Abhängigkeit von der Mausposition positionieren?

766 767 770 772 775 777 781 783 783 786 789 794 795 797 798 799 803 804

Ereignisbehandlung

807

255 Wie funktioniert Ereignisbehandlung grundsätzlich in JavaScript? 256 Wie kann ich beim Laden bzw. Verlassen der HTML-Datei eine Anweisung aufrufen? 257 Wie kann ich beim Laden einer Grafik eine Anweisung aufrufen? 258 Wie kann ich auf die Unterbrechung eines Bildladevorgangs reagieren? 259 Wie kann ich auf einen Klick auf eine Referenz reagieren?

807 808 810 810 811

Inhaltsverzeichnis

260 261 262 263 264 265 266 267 268 269 270 271

Wie kann ich auf das Überstreichen einer Referenz mit dem Mauszeiger reagieren? Wie kann ich auf Mausbewegungen reagieren? Wie kann ich auf Tastaturereignisse reagieren? Wie kann ich auf die Aktivierung und das Verlassen eines Elements reagieren? Wie kann ich grundsätzlich auf Änderungen reagieren? Wie erfolgt die Reaktion auf Zurücksetzen oder Absenden eines Formulars? Wie erfolgt die Reaktion auf die Selektion von Text? Wie kann ich einen Eventhandler explizit per JavaScript aufrufen? Wie kann ich globale Ereignisbehandlung in JavaScript realisieren? Wie kann man das event-Objekt auswerten und darauf reagieren? Wie kann ich über das Netscape-Ereignismodell global auf Ereignisse reagieren? Wie kann ich über das Microsoft-Ereignismodell global auf Ereignisse reagieren?

Stichwortverzeichnis

13

814 815 816 816 817 817 817 817 818 819 820 824 829

Vorwort Herzlich willkommen zur JavaScript-Programmierung. Mit JavaScript können Sie Leben und Aktivität in Ihre Webseiten bringen. JavaScript stellt die ideale Ergänzung zu HTML dar, um Webseiten zu dynamisieren, den Browser des Besuchers zu steuern und Aktivität vom Webserver auf den Rechner des Clients zu verlagern. Aber auch Serverprogramme lassen sich mit JavaScript steuern. Beachten Sie einmal populäre Webseiten im Internet und was da für Effekte auftreten: 왘 In der Statuszeile eines Browsers wird eine Laufschrift angezeigt. 왘 Sie füllen ein Webformular aus und vergessen ein Pflichtfeld korrekt auszufüllen. Das

Formular wird nicht abgeschickt, und Sie erhalten eine Fehlermeldung. 왘 Sie bekommen beim Aufruf einer Webseite automatisch eine Webseite angezeigt, die für

den von Ihnen verwendeten Browser optimiert ist. 왘 Sie werden automatisch von einer eingegebenen Webadresse auf eine andere Webadresse

weitergeleitet. 왘 Sie besuchen eine Webseite und finden dort ein Navigationsmenü mit zusammenge-

klappten Menüstrukturen, wie Sie es von Ihrem Dateimanager gewohnt sind. Wenn Sie auf ein Symbol (etwa ein Pluszeichen) klicken, klappt das Menü auf, und Sie sehen eine Reihe weiterer Links, die Sie anklicken können. Das Symbol vor dem übergeordneten Link hat sich verändert (meist ein Minuszeichen). Wenn Sie dieses erneut anklicken, kollabiert das aufgeklappte Menü wieder. 왘 Sie werden auf einer bereits vorher schon einmal besuchten Webseite persönlich begrüßt.

Wahrscheinlich wurde bei Ihnen bei Ihrem letzten Besuch ein so genanntes Cookie abgelegt, um Sie bei einem neuen Besuch identifizieren zu können. 왘 Auf der Webseite läuft eine Animation. 왘 Eine Webseite zeigt Ihnen das aktuelle Tagesdatum oder gar die Uhrzeit an. Oder weitere

dynamische Informationen wie Ihren Browsertyp, Ihre Landeseinstellung oder Ihr Betriebssystem. 왘 Sie besuchen eine Webseite, und automatisch werden diverse weitere Browserfenster

(meist mit – nerviger – Werbung) zusätzlich angezeigt. 왘 In einer Framestruktur werden auf einen Mausklick gleichzeitig mehrere Frames aktuali-

siert. All diese Vorgänge lassen sich mit JavaScript realisieren (wobei insbesondere bei Animationen natürlich auch andere Techniken zum Einsatz kommen). Viele Situationen, die Ihnen im täglichen »Webleben« begegnen, werden mit JavaScript programmiert. JavaScript ist sicher nicht die Lösung für jedes Problem im Web, aber es bietet so viele interessante Möglichkei-

16

Vorwort

ten, dass eine Beschäftigung damit äußert nützlich und vor allem spannend und interessant ist. Und das alles, ohne ein einziges Programm kaufen zu müssen. Dabei ist JavaScript dennoch einfach zu lernen und vor allem unabhängig von einer speziellen Plattform. Ob Sie Linux, Windows, Mac OS oder ein anderes Betriebssystem verwenden. JavaScript wird auf nahezu allen Plattformen mit grafischer Oberfläche zu finden sein. Und JavaScript wird heutzutage von (fast) jedem Browser unterstützt, sofern es sich nicht um uralte Varianten handelt. Mit einer Webseite, die JavaScript verwendet, werden Sie nicht unnötig auf einen spezifischen Browsertyp oder ein optionales Plug-In eingeschränkt (wie es etwa bei zahlreichen Konkurrenztechniken der Fall ist). Mit JavaScript kann man – ohne Zusatzkosten – viele interessante Dinge tun, die sonst nur mit teueren Programmen zu bewerkstelligen sind. JavaScript ist immer da, wo man im Rahmen einer Webseite innerhalb des Browsers über die Möglichkeiten von HTML (Hyper Text Markup Language) hinausgehende Fähigkeiten benötigt, ein sehr heißer Tipp, wobei oft noch weitere Techniken wie Style Sheets hinzugenommen werden.

1

Über den Autor

In diesem Vorwort möchte ich mich Ihnen ebenfalls kurz mit ein paar wichtigen Eckdaten vorstellen. Ich bin Diplommathematiker und habe nach dem Studium einige Jahre bei einer großen Versicherung als Programmierer gearbeitet. Zu der Zeit waren noch DOS-Programme üblich, und Windows 3.x galt als letzter Schrei ;-). Entsprechend habe ich meine professionelle Programmiertätigkeit mit Turbo Pascal und C/C++ begonnen und damit Versicherungsprogramme für PCs erstellt. Seit 1995 schlage ich mich als Freelancer durch das Leben. Das umfasst die Tätigkeiten als Fachautor, Fachjournalist, EDV-Dozent und Programmierer, was einen guten Mix ausmacht und mich vor allem vor Langeweile und Monotonie bewahrt. Privat bin ich auf eine tägliche Kaffeedosis angewiesen (sonst bin ich ungenießbar), treibe viel Sport, treibe mein Motorrad oder Mountainbike durch die TaunusBerge, spiele Saxophon in einer Rockband und verteidige täglich mein Büro gegen das Eindringen meiner Zwillinge. Außerdem stehe ich auf »Per Anhalter durch die Galaxis« und den Film »Blues Brothers«.

2

Wozu ein Codebook?

Was ist ein Codebook, und was ist besonders daran? Und wozu braucht man ein Codebook für JavaScript? Einerseits können mittlerweile sehr viele Leute mit JavaScript programmieren. Diese Skriptsprache ist unbestritten die am meisten eingesetzte Sprache zur Programmierung von clientseitigen Webaktionen. Andererseits ist JavaScript eine Sprache, die sich viele Webdesigner, HTML-Autoren oder Programmierer quasi nebenher aneignen. Sie wird dann auch oft als Ergänzung zu den eigentlichen Haustechniken eingesetzt. Etwa wenn ein Webdesigner mit einem Tool wie Dreamweaver eine Webseite generiert hat und bestimmte Funktionalität in einer Webseite als Ergänzung benötigt, die JavaScript realisieren lässt. Oder ein HTML-Autor erstellt mit einem reinen Editor eine Webseite und möchte Funktionalitäten ergänzen, die HTML einfach nicht bietet. JavaScript bietet in vielen Fällen die ideale Ergänzung, und deshalb lernen so viele Leute, die sich mit der Internet-Programmierung im weiteren Sinn beschäftigen, diese Sprache. Der Einstieg in JavaScript ist auch alles andere als

Wozu ein Codebook?

17

schwer, und erste Beispiele und Projekte werden schnell zu Erfolgen führen. Aber aufgrund des oft nur seltenen Einsatzes von JavaScript kommen nur wenige JavaScript-Programmierer zu komplexeren Aufgaben, und vor allem fehlt die Praxis, um für spezifische Situationen eine funktionierende Lösung schnell greifbar zu haben. Ebenso gibt es zahlreiche Feinheiten im Umgang mit JavaScript, die zum einen auf den unendlichen Spezifika der unterschiedlichen Browser und zum anderen vielen Automatismen der Sprache selbst beruhen. Deshalb macht eine Rezeptsammlung wie in diesem Codebook für die gängigsten Fragestellungen gerade für JavaScript sehr viel Sinn. Das Buch hier ist deshalb kein Lehrbuch, um den Einstieg in JavaScript zu schaffen, sondern wendet sich an JavaScript-Programmierer mit erster Erfahrung, um diesen möglichst universell einsetzbare Hilfestellung bei konkreten Problemen aus der Praxis zu geben. Dazu umfasst das Buch ein breites Spektrum mit Themen, die typischerweise mit JavaScript gelöst werden, und versucht, durch wieder verwendbare, plattform- und browserneutrale Module Schablonen zu liefern, die Sie leicht an spezifische Aufgaben anpassen können. Jetzt aber genug der Vorrede. Los geht es mit JavaScript. Mir persönlich (und Ihnen hoffentlich auch) macht die Arbeit mit JavaScript neben der extremen Nützlichkeit im Rahmen einer Webseite noch Spaß, was ein sicher weiterer wichtiger Grund ist, diese Technologie zu lernen. Ralph Steyer www.rjs.de

TEIL I Einführung

Einführung 1

Aufbau des Buches

Das Buch ist als Nachschlagewerk konzipiert, in dem Sie Lösungen für spezifische Aufgabenstellungen finden und kein Lehrbuch im klassischen Sinn mit einem didaktischen Aufbau. Die Rezepte, wie sie in Teil 2 angeboten werden, folgen allgemein dem Motto »Wie kann ich ...?«. Das Buch ist in keiner Weise hierarchisch strukturiert. Mit anderen Worten – weder bauen die einzelnen Kategorien und Rezepte aufeinander auf; noch sind sie durchgängig von leicht nach schwer sortiert. Jedes Rezept ist unabhängig einsetzbar und setzt beim Leser nur voraus, dass einige JavaScript-Grundlagen vorhanden sind. Diese werden jedoch im Rahmen dieses Einführungsabschnittes komprimiert vorgestellt. Für die Klassifizierung der Rezepte wage ich gelegentlich eine Einschätzung, ob deren Verwendung in einem Webprojekt unabdingbar, sehr wichtig, wichtig oder nur nice to have ist. Dabei kann diese Einschätzung selbstverständlich nicht universell gültig sein; und was für das eine Projekt unabdingbar ist, kann für ein anderes Webprojekt überflüssig sein. Dennoch soll die Wertung eine Anleitung darstellen, ob ein bestimmtes Rezept für Sie sinnvoll ist oder nicht. Ich möchte zudem einige Rezepte als subversiv bezeichnen, wenn man damit Dinge tun kann, die die meisten Besucher einer Webseite als störend empfinden (sie etwa auf einer Webseite festhalten oder in einer Endlosschleife mit unablässig aufpoppenden Fenstern zu nerven). Solche Rezepte gehören trotz ihres subversiven Charakters meines Erachtens dennoch zum Spektrum dessen, was ein JavaScript-Programmierer parat haben sollte. Und obwohl JavaScript in nahezu jedem Browser unterstützt wird, kann man sich nicht immer auf die korrekte Funktion verlassen. Bei Bedarf finden Sie Hinweise, welche Browser Schwierigkeiten machen und was Sie bezüglich verschiedener Browser zu beachten haben. Dabei beschränke ich mich auf die gängigsten Browser Internet Explorer 6, Netscape Navigator 7.x (beziehungsweise die verwandten Mozilla 1.4 und Firefox), den Konqueror für die KDE 3.2 (Linux) und Opera 7.5. Ältere Browser finden bei Bedarf Beachtung. Explizit soll der auch heute noch hin und wieder verwendete Netscape Navigator 4.7 gelegentlich betrachtet werden. Als Referenzbetriebssysteme kommen Linux1 und Windows XP Pro zum Einsatz.

Schreibkonventionen In diesem Buch werden Sie verschiedene Schreibkonventionen finden, die Ihnen helfen sollen, die Übersicht zu bewahren. Wichtige Begriffe werden hervorgehoben; Teils auch so. Vor allem sollten Sie erkennen können, ob es sich um normalen Text oder Programmcode handelt. Das Folgende wäre ein Programmcode: Das ist Programmcode.

1.

Konkret hauptsächlich SuSE 9.1, aber auch gelegentlich Mandrake 10.0 und Knoppix 3.4 (also Debian).

22

Einführung

Hinweis

Das ist ein besonderer Hinweis, den Sie an der Stelle beachten sollten.

Tipp

Das ist ein Tipp, der Ratschläge oder besondere Tricks zu einer jeweiligen Situation zeigt.

Achtung

Aber auch im Fließtext werden bei Bedarf Begriffe so dargestellt, dass Sie Quellcodepassagen erkennen. Ebenso MENÜBEFEHLE, (Tasten), URLs und noch einige weitere Besonderheiten. Diese Formatierungen werden konsequent verwendet. Und ebenso werden in dem Buch Bereiche verwendet, die über die Markierung mit verschiedenen Symbolen besondere Aufmerksamkeit erzeugen sollen.

Hier droht Gefahr.

2

Die Beispiele

Sie finden die Rezepte in diesem Buch alle auf der Buch-CD. Sie sind entsprechend der Kapitel in Verzeichnisse einsortiert. Die Namen der jeweiligen Dateien finden Sie jeweils bei den Rezepten notiert.

3

Was ist JavaScript?

Als 1990/91 das WWW entstand, gab es im Grunde nur HTML (HyperText Markup Language); um Webseiten zu beschreiben. HTML besteht aus reinen Klartextanweisungen und stellt das Rückgrad des WWW dar. Und ohne sich als Prophet leichtsinnig zu versuchen – es wird auch in Zukunft so bleiben. HTML wird von einem Konsortium mit Namen W3C (http://www.w3.org) standardisiert. In diesem Gremium versuchen die wichtigsten Protagonisten des Internets, sich auf gemeinsame Strategien zu einigen. HTML ist nicht das ganze Web, aber ohne HTML gibt es überhaupt kein Web. Keine (!) der anderen Technologien (Grafiken, Videos, Sounds, Skripte usw.) ist notwendig im Web. Das Web an sich funktioniert – wenn es sein muss – auch nur mit reinem HTML. Jede der anderen Technologien benötigt HTML, um sich darin zu verankern. Das Web würde freilich viel an Faszination und Bequemlichkeit verlieren, wenn man auf ergänzende Techniken verzichten würde. Die Möglichkeiten von reinem HTML stoßen sehr schnell an Grenzen und werden mehr und mehr durch verschiedene Zusatztechnologien erweitert. Das beginnt ganz primitiv bei Grafiken (bereits von Anfang an im Web als Vervollständigung von dem reinen Text auf Basis von HTML dabei) und geht über Multimediatechniken wie Flash (ein proprietäres – d.h. herstel-

Was ist JavaScript?

23

lerabhängiges – Programm beziehungsweise Format zum Erzeugen von Animationen im Rahmen einer Webseite) hin zu Style Sheets und echten Programmiertechniken in Webseiten.

Achtung

Zu den wichtigsten Erweiterungen von HTML zählen die Skriptsprachen, von denen es zahlreiche Varianten gibt. JavaScript ist eine der gewichtigsten Ergänzungstechnologie zu HTML und eine solche Skriptsprache für das Internet. Diese Sprache ist an Java angelehnt, offen, plattformunabhängig und leicht zu erlernen. Sie wurde Mitte der 90er-Jahre von der Firma Netscape (http://www.netscape.com) in Abstimmung mit Sun Microsystem (http:// www.sun.com) entwickelt. Sun wollte zum gleichen Zeitpunkt eine aus dem Oak-Projekt hervorgegangene Technologie für das WWW umstricken und unter neuem Namen etablieren. Ursprünglicher Einsatzzweck von JavaScript war die Erweiterung des Webbrowsers Navigator 2.0 um Steuerungsmöglichkeiten für diesen Browser aus einer Webseite heraus. Diese mit dem Navigator 2.0 1995 erstmals veröffentlichte Skriptsprache wurde zuerst Mocha, dann LiveScript und letztendlich JavaScript genannt, um eine Anlehnung an Java zu verdeutlichen (denn das war der Name der aus Oak hervorgegangenen Sun-Technologie). Aber Vorsicht! Die Ähnlichkeit im Namen zeigt eine gewisse Verwandtschaft zwischen JavaScript und Java an. Jedoch ist diese Verwandtschaft weitläufiger, als es Laien erscheint. Java ist viel leistungsfähiger als jede Skriptsprache, aber auch viel komplizierter zu lernen. Die Sprache ist sowohl von der Syntax als auch dem Konzept C/C++ sehr ähnlich. Für Java gibt es ganz andere Anwendungen als für Skriptsprachen wie JavaScript. Java ist eine weitgehend betriebssystem- und hardwareunabhängige, objektorientierte Programmiersprache beziehungsweise ganze Entwicklungsplattform, die zwar einen Schwerpunkt im Bereich Internet/Intranet hat (dabei kommen so genannte JavaApplets auf Seiten des Clients oder aber Java Servlets bzw. JSP – Java Server Pages – auf Seiten des Servers zum Einsatz), den Haupteinsatzzweck aber im Bereich der datenbasierenden Consumerelektronik finden soll. Daneben gilt Java als sehr sicher und geeignet für Anwendungen, die in einer heterogenen Netzwerkumgebung ablaufen sollen. Viele Aktionen im Bereich des Online-Bankings, des elektronischen Zahlungsverkehrs oder sonstiger sensibler Datenkommunikation beruhen auf Java. Mit Java lassen sich vollständige Programme entwickeln (im Gegensatz zu Skripten, die nur bereits fertige Programme steuern und nutzen). Sowohl in Form von Java-Applets, die mit HTML-Anweisungen in eine Webseite integriert werden und auch nur dort lauffähig sind, als auch als vollständig eigenständige Applikationen, die im Gegensatz zu den Applets keinen Container wie einen Browser mehr benötigen.

Eine direkte Konkurrenz zu JavaScript ist jedoch VBScript, eine von Microsoft aus Visual Basic entwickelte und weitgehend auf das Windows-Betriebssystem mit INTEL-basierenden Prozessoren optimierte Skriptsprache. Auf Seiten der Browser unterstützt im Prinzip nur der Internet Explorer VBScript. Zwar ist die Technologie dort auch leistungsfähiger als JavaScript, aber da dies mit erheblichen Sicherheitsrisiken einhergeht, ist das eher von Nachteil. Bedeutung hat VBScript vor allem bei der serverseitigen Programmierung. Auf Seiten von Microsoft-Webservern ist VBScript die Haussprache für die ASP-Technologie (Active Server Pages). ASP kann freilich ebenso mit JavaScript realisiert werden.

24

Einführung

Seit geraumer Zeit ist auf Serverseite jedoch hauptsächlich PHP sehr populär. PHP ist sehr einfach zu lernen und hochspezialisiert auf bestimmte Vorgänge im Rahmen von Servervorgängen wie Formularauswertungen, Datenbankzugriffen oder Dateizugriffe auf dem Serverrechner. Neben JavaScript fällt oft der Name JScript. Bei JScript handelt es sich um einen Ableger von JavaScript, welcher hauptsächlich der Unterstützung von JavaScripts im Internet Explorer der Firma Microsoft (http://www.microsoft.com) dient. Dort und in weiteren Microsoft-Produkten gibt es aus Lizenzgründen keinen direkten JavaScript-Interpreter. Microsoft hat JavaScript nie lizenziert und stattdessen mit JScript einfach einen JavaScript-Clone erzeugt, der ab dem Internet Explorer 3.0 verfügbar ist. JScript stimmt in der Syntax in großen Bereichen mit JavaScript überein, und man muss auf die marginalen Unterschiede selten Rücksicht nehmen. Dennoch ist hier eine der Erklärungen zu finden, weshalb es gelegentliche Abweichungen bei der Interpretation von JavaScripts in echten JavaScript-Browsern und dem Internet Explorer gibt (wobei das im Wesentlichen alte Browser betrifft – in neuen Browsern sind die Probleme weitgehend beseitigt).

4

Der Aufbau von Skriptsprachen und die Rolle des Interpreters

Wie schon erwähnt (und sicher bekannt), bestehen Webseiten im Wesentlichen aus Klartext (HTML, JavaScript, Style Sheets etc.), der beim Anwender durch einen Webbrowser interpretiert wird. Der Browser sorgt dafür, dass aus diesen Anweisungen das wird, was wir als eine Webseite bezeichnen. Dabei zieht er bei Bedarf in der Webseite referenzierte Multimediadaten wie Grafiken, Videos, Animationen etc. hinzu. Das ist die optische Darstellung, die jeder Anwender in Form von Textformatierungen, Absatzformatierungen, Grafikdarstellungen etc. wahrnimmt. Für die Umsetzung der HTML-Anweisungen ist der HTML-Interpreter vom Browser verantwortlich. In der Vergangenheit gab es zahlreiche Probleme mit der unterschiedlichen Darstellung von Webseiten in verschiedenen Browsern, aber mittlerweile verhalten sich moderne Browser bei der Darstellung von HTML-Befehlen recht synchron. Kann ein Browser mit einer in eine Webseite integrierten Datei (etwa eine Flash-Animation) nicht direkt umgehen, greift er oft auf ein Zusatzmodul zurück. Dieses nennt man ein Plug-In. Ist für ein Dateiformat ein solches Plug-In vorhanden, kann der Browser mit dessen Hilfe auch ein Fremdformat verwenden. In Webseiten integrierte Skripte werden jedoch von einem anderen Bestandteil des Browsers direkt ausgeführt. Bei Skriptsprachen handelt es sich ebenfalls immer um Klartext-Interpretersprachen, die mit einem simplen Texteditor erstellt werden können (wie auch reine HTML-Dokumente) und zur Laufzeit von irgendeinem Interpreter interpretiert werden müssen. Das bedeutet, der vom Programmierer geschriebene Quelltext (Klartext) wird erst zur Laufzeit des Skriptes Schritt für Schritt in ausführbare Anweisungen übersetzt. Diesen Interpreter stellt das umfassende Programm bereit, in das Skripte geladen werden. Läuft ein JavaScript auf einem Webserver, stellt dieser einen passenden Interpreter bereit. Im Fall von JavaScripts beim Anwender ist es der Webbrowser, der einen internen JavaScript-Interpreter bereitstellt.

Die Versionszyklen von JavaScript

25

JavaScript als Sprache beinhaltet einen internen Befehlssatz, eine Syntax und eine definierte Struktur, mit denen diverse Objekte rund um den Browser kontrolliert werden können. JavaScript enthält sowohl einige wenige eigene Objekte, kann aber vor allem auf zahlreiche fremde Objekte seiner Umgebung zugreifen. Ein kontrollierbares Objekt ist beispielsweise der Browser selbst. Aber auch andere Objekte lassen sich mit Skripten beeinflussen. JavaScript kann beispielsweise zur Kontrolle von Bestandteilen einer Webseite, Java-Applets und anderen Objekten verwendet werden. JavaScript ist jedoch nur eine objektbasierende, aber keine objektorientierte Sprache, denn zu einer echten objektorientierten Sprache fehlen einige zentrale Merkmale (etwa die Vererbung). Eigentlich ist es so, dass clientseitige Skriptsprachen im Wesentlichen den relativ dummen Browser intelligenter machen. Und um es noch einmal zu betonen – in modernen Browsern ist die Nutzung einer oder mehrerer Skriptsprache(n) standardmäßig integriert. Und so gut wie immer wird JavaScript verstanden, obwohl ein Anwender in seinem Browser JavaScript deaktivieren kann.

5

Die Versionszyklen von JavaScript

JavaScript ist seit seiner ersten Vorstellung im Jahre 1995 durch mehrere Versionszyklen gegangen. Grundsätzlich muss jedoch beachtet werden, dass für nahezu alle neu eingeführten Sprachzyklen von JavaScript kaum ein zeitnah aktueller Browser den offiziellen Standard vollständig unterstützt hat und es immer geraume Zeit dauerte, bis die nächsten Browserversionen einen vollständig Sprachzyklus verdaut hatten! Das gilt bis heute, obwohl die Entwicklung von JavaScript derzeit nicht sonderlich schnell voranschreitet. Aber zurück zur geschichtlichen Entwicklung. Im November 1996 taten sich Netscape und die internationale Industrievereinigung ECMA (European Computer Manufacturers Association) mit Sitz in Genf/Schweiz (http://www.ecma.ch/) zusammen und beschlossen, JavaScript zu standardisieren. Aus dem Projekt entstand ein Sprachdialekt mit Namen ECMAScript, was der Name für das von ECMA standardisierte JavaScript ist (auch der JavaScript-Clone JScript orientiert sich an diesem Standard). Im Juni 1997 wurde die erste Version von ECMAScript freigegeben (der Standard ECMA-262). Alle neueren JavaScript-Versionen versuchen mit ECMAScript so weit wie möglich kompatibel zu sein. Die im Juni 1998 eingeführte JavaScript-Version 1.3 war dementsprechend bereits einigermaßen kompatibel zu der ECMA262-Norm. Im Oktober 1998 stellte Netscape JavaScript 1.4 vor. Diese Version von JavaScript beinhaltet erstmals ein Behandlungskonzept für so genannte Exceptions (Ausnahmen), die neuen Operatoren in und instanceof, Veränderungen im Rahmen von LiveConnect zur Verbindung von JavaScript mit Java und Plug-Ins sowie Veränderungen beim Objekt Function. Vor allem wurde der JavaScript-Standard 1.4 voll kompatibel mit dem ECMA-262-Standard designt. War er deshalb ein durchschlagender Erfolg? Das Gegenteil ist der Fall. Die Version 1.4 kann man nur als Zwischenversion betrachten, denn sie wurde von kaum einem Browser richtig umgesetzt. Genau genommen richten sich die nachfolgenden Browser nach der ECMAScript Editon 3 (obwohl die meisten diesen nur sukzessive umsetzen), die im Dezember 1999 freigegeben wurde. Die dritte Version des ECMAScript-Standards entspricht dem derzeit immer noch im Web maximal verfügbaren JavaScript 1.5 und beinhaltet als Erweiterung reguläre Ausdrücke, wie sie aus Perl etabliert sind, verbesserte Behandlung von Strings, neue Kontrollanweisungen, ein try/catch-Excep-

26

Einführung

tion-Handling, wie es aus Java bekannt ist2, erweiterte Fehlerdefinitionen, Formatierungen für nummerische Ausgaben und einige weitere kleinere Erweiterungen im Rahmen der Internationalisierung. Und obwohl JavaScript 1.5 mit seinem Geburtsdatum im letzten Jahrtausend sicher kein Frischling mehr ist, kann man auch heute sogar nur die Version 1.3 als allgemein im Web akzeptierten Standard betrachten. Das soll bedeuten, den Standard 1.3 verstehen nahezu alle heute noch von Anwendern verwendete Browser. Bei Techniken aus Nachfolgeversionen gibt es immer noch bestimmte Konstellationen zwischen JavaScript-Anweisungen und Browsern, wo es Probleme geben kann. Ein paar explizite Beispiele mit Browsern sollen das belegen. In der ersten Hälfte 2000 kam mit dem Navigator 6 der erste Browser heraus, der offiziell JavaScript 1.5 implementiert3. Der zeitgleich aktuelle Internet Explorer 5.5 beinhaltete eine JScript-Version, die ungefähr JavaScript 1.4 entsprach. Der Internet Explorer 5.5 unterstützt darüber hinaus bereits einige Features von JavaScript 1.5, weshalb er eigentlich JavaScript 1.5 näher ist. Dennoch kann man mit einfachen Beispielen zeigen, dass der Internet Explorer selbst in der Version 6 noch Skript-Container ignoriert, die mit der Versionsangabe 1.4 oder 1.5 gekennzeichnet sind, obwohl er die meisten erweiterten Syntaxstrukturen verstehen würde. Andere Browser wie Opera 6 oder Mozilla 1 (die ja auch nicht gerade uralt sind) verstehen ebenso Teile von JavaScript 1.5 nicht vollständig. Tests auf verschiedenen Browser sind leider – insbesondere bei Anweisungen jenseits von JavaScript 1.3 – deshalb unumgänglich. Aber glücklicherweise nehmen die schwerwiegenden Probleme in den neuen Browsern rapide ab.

6

HTML- bzw. XHTML-Grundlagen

Die Einbindung von JavaScript in eine Webseite gehört nicht zu JavaScript, sondern betrifft ausschließlich HTML. Die Verbindung von JavaScript mit einer Webseite wird ausschließlich mit HTML erledigt. Das ist wichtig, denn es muss klar sein, wann bei der Bearbeitung einer Webseite der HTML-Interpreter aktiv ist und wann der JavaScript-Interpreter. Die Tatsache hat wichtige Konsequenzen. So ist Groß- und Kleinschreibung in purem HTML irrelevant, in JavaScript spielt sie jedoch eine entscheidende Rolle. Der Abschnitt hier kann sogar noch allgemeiner verstanden werden, denn anhand von JavaScript kann die Einbindung von beliebigen Skriptelementen in Webseiten exemplarisch behandelt werden. Auch andere Skriptelemente werden sich vollkommen analog zu JavaScript in eine Webseite einbinden lassen. Es gibt verschiedene Techniken, wie Skripte mit einer Webseite verbunden werden können. Bevor diese behandelt werden, sollen die wichtigsten HTML-Grundlagen besprochen werden. 2. 3.

Im Grunde nur eine Etablierung des Ausnahmebehandlungskonzeptes auf JavaScript 1.4. Auf der einen Seite bot der Navigator 6 eine gute und stabile Unterstützung für JavaScript 1.5 respektive die ECMA-262-Norm. Auf der anderen Seite ist dieser Browser in sehr vielen wichtigen Details nicht mehr zu den Standards kompatibel, die in den Vorgängerversionen des Navigators zentrale Bestandteile waren. Zwar waren diese nicht vollständig standardisiert, aber das sind Elemente von anderen Browsern auch nicht. Die vollständige Wegnahme der Unterstützung von Features, die mit Netscape Navigator 4.x eingeführt wurden (etwa document.layers oder document.embeds), führen in, auf diesen älteren Browsern optimierten, Skripten zu erheblichen Problemen, wenn diese in der Nachfolgeversion geladen werden.

HTML- bzw. XHTML-Grundlagen

27

Eine aus HTML aufgebaute Webseite beinhaltet nur zwei grundsätzlich zu unterscheidende Strukturen: 왘 Steueranweisungen 왘 reiner Text

Steueranweisungen sind die HTML-Befehle. Alle HTML-Steueranweisungen werden in so genannten Tags angegeben, die von spitzen Klammern – dem »Kleiner«- und dem »Größer«Zeichen – begrenzt werden. Ein HTML-Tag sieht also von der Struktur her immer so aus:

Listing 1: Das Schema eines HTML-Tags

Alles, was kein Tag ist (d.h., es ist nicht von einem »Kleiner«- und einem »Größer«-Zeichen eingeschlossen), wird beim Laden einer Webseite von einem Browser als reiner Text verstanden. Das ist nicht so trivial, wie es im ersten Moment klingt. Es hat fatale Auswirkungen. Ein großes Problem beim Interpreterkonzept (das ja zur Darstellung von HTML-Dokumenten zum Tragen kommt) ist das schnelle Veralten der Interpreter. Wenn in einer Interpretersprache ein oder mehrere neue Befehle hinzugefügt werden, können die bis dahin entwickelten Interpreter diese Anweisung(en) naturgemäß noch nicht kennen und entsprechend nicht ausführen. Anwender, die ein Dokument mit solch neuen Anweisungen in einem davor veröffentlichten Interpreter laden, bekommen Schwierigkeiten. Da HTML über die Zeit immer weiter entwickelt und vor allem durch browserspezifische Zusatzanweisungen angereichert wurde, gibt es dementsprechend eine Vielzahl von Dialekten, und nahezu kein Browser kann alle Anweisungen sämtlicher Dialekte vollständig. Was soll aber geschehen, wenn ein Browser in einer HTML-Seite eine Anweisung findet, die er nicht versteht? Abstürzen, wie es normalerweise Windows-Programme tun, wenn sie an einer unglücklichen Programmanweisung Schluckauf bekommen? Oder eine Fehlermeldung bringen, mit der üblicherweise kein Anwender etwas anfangen kann? Es gibt noch eine dritte Lösung – ignorieren! Und das ist, obwohl es erst einmal nicht besonders positiv erscheinen mag, zumindest bei der Beschreibung von Dokumenten im Web die beste der drei Varianten. Das Ignorieren von unbekannten Anweisungen durch den Browser basiert auf dem Prinzip der Fehlertoleranz, welches zu den Eckdaten von HTML gehört. Dieses Prinzip veranlasst die Programme zur Auswertung von HTML-Dokumenten, sowohl fehlende Strukturen quasi unsichtbar im Hintergrund zu ergänzen, wenn diese offensichtlich fehlen und eindeutig ergänzt werden können4, als auch bei der Interpretation einer HTML-Datei so fehlertolerant wie irgend möglich zu sein. Der äußerst positive Effekt ist, dass dann auch syntaktisch unkorrekte Dokumente so weit wie möglich ausgewertet werden können. Soweit Browser korrekte HTML-Anweisungen vorfinden, werden diese Anweisungen ausgeführt und angezeigt. Falsche oder unvollständige Anweisungen werden ganz einfach ignoriert. Und alles, was sich außerhalb eines Tags befindet, wird als reiner Text im Anzeigebereich des Browsers dargestellt. 4.

Etwa ein fehlendes Grundgerüst in einer Webseite.

28

Einführung

Das Prinzip der Fehlertoleranz ist unumgängliche Voraussetzung dafür, dass immer neue HTML-Anweisungen oder neue Technologien im Internet eingeführt werden können (das betrifft natürlich auch JavaScript) und dennoch die älteren Browser beim Laden solcher Webseiten nicht »abschmieren«. Was sie nicht kennen, wird einfach ignoriert. Der Rest wird dargestellt. Eine Abwärtskompatibilität der HTML-Dokumente ist also immer sichergestellt, auch wenn im schlimmsten Fall signifikante Informationen beim Anzeigen verloren gehen können. Dummerweise kann man bei Skript- und Programmiersprachen nicht so tolerant verfahren, da viele Schritte aufeinander aufbauen. Es gibt nun in HTML Tags, die zwingend einen Beginn- und einen Ende-Befehl benötigen. Beide zusammen bilden einen so genannten Container, der den Bereich für die Wirkung einer HTML-Anweisung festlegt, etwa von wo bis wo ein Text fett dargestellt werden soll oder wo der Beginn oder das Ende einer Tabelle ist. Bei Tags nennt man das öffnende Tag das Einleitungs- und das den Container beschließende Tag das Abschluss-Tag. Abschluss-Tags sind bis auf einen der öffnenden Klammer folgenden Slash (/) identisch mit dem Einleitungs-Tag. Der Abschluss-Tag zum fiktiven Einleitungs-Tag würde wie folgt aussehen: Beispiele: ... ...

Listing 2: Verschiedene HTML-Container

Es gibt neben Containern in der HTML-Syntax auch Tags, die nur als Einleitungs-Tag vorkommen, beispielsweise ein Zeilenumbruch, der durch
auch ohne Ende-Tag vollständig beschrieben ist. Oder auch die Einbindung von Grafiken mit dem Tag . Solche einzelnen Tags werden da verwendet, wo eine Wirkung nicht explizit beschränkt werden muss.

Achtung

Bei HTML-Steueranweisung spielt es im Gegensatz zu den Befehlsanweisungen vieler anderer Sprachen keine Rolle, ob sie groß- oder kleingeschrieben werden (bei JavaScript wird das jedoch eine Rolle spielen). Die Anweisung bewirkt das Gleiche wie . Auch eine unterschiedliche Groß- und Kleinschreibung im Einleitungs- und Abschluss-Tag oder sogar innerhalb einer Anweisung hat keine negativen Auswirkungen5, erhöht jedoch nicht gerade die Lesbarkeit. Diese letzte Aussage als auch der Verzicht auf einen Abschluss-Tag bei einigen Befehlen gilt nicht für XHTML, worauf gleich noch kurz eingegangen wird.

Viele Tags sind erst dann sinnvoll einzusetzen, wenn sie genauer spezifiziert werden. Nicht jeder, denn ein Zeilenumbruch ist immer durch die Anweisung
vollständig beschrieben. 5.

Das wäre eine gültige, wenngleich nicht sonderlich glücklich gewählte Syntax:

HTML- bzw. XHTML-Grundlagen

29

Dann gibt es Anweisungen, die mit oder ohne Parameter funktionieren. Etwa der -Tag, bei dem Sie optional beispielsweise Hintergrundfarbe und Textfarbe der Webseite angeben können. Wenn Parameter angegeben werden, werden bestimmte Aspekte genauer spezifiziert. Fehlen sie, werden Grundeinstellungen verwendet. Aber nicht alle Anweisungen sind so eindeutig oder flexibel. So gibt es beispielsweise die Steueranweisung , mit der die Bedingungen für die Wahl der Schrift in der Webseite angegeben werden. Aber ohne genauere Angaben ist die Anweisung sinnlos. Die Schriftgröße, die Schriftart oder die Schriftfarbe sind genauere Spezifikationen, welche durch so genannte Parameter erfolgen. Diese werden bei Bedarf den einleitenden Tag – durch Leerzeichen abgetrennt – erweitern. Dabei gibt es zwei Formen von Parametern: 1. Parameter mit einer Wertzuweisung 2. Parameter, die bereits einen Wert repräsentieren Parameter mit einer Wertzuweisung bekommen über einen Zuweisungsoperator – dem Gleichheitszeichen (=) – den entsprechenden Wert zugeordnet. Dies kann ein Text oder eine Zahl sein oder aber auch andere Dinge (etwa eine Internet-Adresse). Meist werden die Werte in Hochkommata eingeschlossen, aber das ist in HTML6 so gut wie nie notwendig7. Ein Tag mit einem Parameter mit einer Wertzuweisung sieht schematisch so aus:

Beispiele:

Listing 3: HTML-Tags mit Parameter

Parameter, die bereits einen Wert repräsentieren, brauchen bloß durch ein Leerzeichen abgetrennt (!) in den Einleitungs-Tag geschrieben zu werden. Sie fungieren immer als Schalter. Wenn sie angegeben werden, wird eine Eigenschaft aktiviert, fehlen sie, ist die jeweilige Eigenschaft deaktiviert. Ein Tag mit einem Parameter, der bereits einen Wert repräsentiert, sieht schematisch so aus:

Listing 4: Schema für einen Parameter ohne Wertzuweisung

6. 7.

In XHTML schon. Eine Ausnahme ist eine Bildreferenz mit dem -Tag, bei der der URL der Grafik in Hochkommata eingeschlossen werden muss. Allgemein können Sie auf die Hochkommata nicht verzichten, wenn der zugewiesene Wert solche Zeichen enthält, die in HTML als Steuerzeichen behandelt werden (also Leerzeichen, der Slash etc.).

30

Einführung

Beispiel:

Achtung

Listing 5: Ein Parameter ohne Wertzuweisung – diese Anweisung setzt einen Tabellenrahmen mit einer Dicke, die der Browser festlegt.

Es wird immer nur der einleitende Tag durch Parameter erweitert. Beim beendenden Tag wird niemals ein Parameter angegeben!

Viele Befehle lassen sich über mehr als einen Parameter spezifizieren. Diese werden dann einfach durch Leerzeichen getrennt aufgelistet. Dabei spielt die Reihenfolge der Parameter keine Rolle. Beispiele:

Listing 6: Der -Tag mit zwei Parametern

Listing 7: Der -Tag mit zwei Parametern in umgekehrter Reihenfolge hat die vollkommen gleiche Wirkung.

Das Grundgerüst einer Webseite Da HTML eine äußerst fehlertolerante Beschreibungssprache ist, werden Webseiten selbst in Situationen, in denen in anderen Sprachen geschriebene Dokumente oder Programmstrukturen einen Fehler oder einen Programmabbruch auslösen würden, trotzdem oft noch brauchbare Resultate liefern. Reine HTML-Seiten sind Klartextdateien mit der Dateiendung .htm, .html oder .shtml (bis auf Sonderfälle). Alleine diese Endungen lassen das Dokument zu einem HTML-Dokument werden. Für eine HTML-Seite gibt es jedoch dennoch wie für jedes andere Dokument oder andere Programmiersprache immer ein Grundgerüst und gewisse Grundregeln. Eine korrekt aufgebaute HTML-Seite wird immer in die Anweisung am Anfang und am Ende eingeschlossen. Die beiden Anweisungen bilden immer das äußere Gerüst einer HTML-Seite. Davor dürfen höchstens Kommentarzeilen stehen, die natürlich auch überall im Inneren einer HTML-Seite verwendet werden können. Die Steuerzeichen für Kommentarzeilen sind ein Ausrufezeichen und zwei Striche am Anfang und zwei Striche am Ende des Tags. Jeder in diesem Tag stehende Text wird vom interpretierenden Browser als Kommentar betrachtet. Ein Kommentar kann über mehrere Zeilen gehen und natürlich ebenfalls im Inneren einer HTML-Seite verwendet werden. Auch ein Kommentar-Tag muss von spitzen Klammern eingeschlossen werden, also sehen die Zeichenfolgen so aus:

HTML- bzw. XHTML-Grundlagen

31

Listing 8: Ein HTML-Kommentar

Das weitere Grundgerüst einer HTML-Datei besteht grundsätzlich aus folgenden zwei Teilen: 왘 dem (optionalen) Header (Kopf) 왘 dem Body (Körper)

Nach der einleitenden HTML-Anweisung steht in einer Webseite normalerweise ein HeaderTeil, das heißt ein Kopfteil, in dem die allgemeinen Hintergrundinformationen über eine Webseite notiert werden, beispielsweise der Titel oder so genannte Metainformationen, etwa Copyright-Informationen und vor allem wichtige Angaben für Suchmaschinen. Dies erfolgt mittels des -Tags, der auf verschiedenste Art und Weise verwendet werden kann. Oft finden Sie -Tags in Verbindung mit den Attributen name und content. Über name wird eine Eigenschaft angegeben (etwa der Autor, Schlüsselwörter, aufgrund denen die Webseite in einer Suchmaschine gefunden werden soll, oder eine Beschreibung der Webseite), über content der Wert dieser damit benannten Variablen. Diese beiden Informationen bilden zusammen ein Wertepaar, das auch nur in Verbindung Sinn macht. Grundsätzlich wird ein Header mit dem Tag begonnen und mit entsprechend wieder geschlossen. Die eigentlichen Daten, die der WWW-Browser einem Anwender auf dem Bildschirm anzeigen soll, werden in den Body geschrieben. Die Tags und umschließen den Anzeigebereich einer Webseite. In dem Body ist der eigentliche Text mit Überschriften, Verweisen, Grafikreferenzen und auch die Referenz für Java-Applets zu notieren. Das vollständige Grundgerüst einer normalen HTML-Datei sieht also schematisch immer so aus. ) wieder geschlossen. Dadurch steht der gesamte JavaScript-Code innerhalb eines HTML-Kommentars. Dies ist zwar nicht zwingend, aber sicherer für den Fall, dass ein Browser die Seite lädt, der keine Skripte interpretieren kann.

Hinweis

Wie kann ich JavaScript in Webseiten einbinden?

81

Beachten Sie, dass hier nicht von Browsern die Rede ist, bei denen der Anwender JavaScript deaktiviert hat. Diese verstehen den Listing 1: Ein typischer Container zum Einbinden von einem JavaScript (ohne Versionsangabe)

1.

Das Prinzip der Fehlertoleranz zählt zu den wichtigsten Eckdaten von HTML bzw. der gesamten Funktionalität des WWW. Dieses Prinzip veranlasst Browser unter anderem dazu, bei der Interpretation von Webseiten so fehlertolerant wie irgend möglich zu sein.

Grundlagen Core

Formu lare

Ausnahme

Arrays

Strings

Datum Plattform

DHTML

Events

82

Grundlagen

Wie kann ich JavaScripts in externen Dateien verwenden? Allgemein macht es sehr viel Sinn, JavaScripts in einer oder mehreren externen Datei(en) auszulagern. Diese Vorgehensweise trägt der Tatsache Rechnung, dass man ab einer gewissen Größe Projekte strukturieren muss. Zudem können gemeinsame Funktionalitäten in einer Datei bereitgestellt werden, und nicht jede Webseite muss deren Implementation selbst enthalten. Natürlich wird die Wartung und Anpassung erheblich erleichtert, und auch sonst gibt es weitere Benefits. Die Auslagerung in eine externe Datei funktioniert seit HTML 4 bzw. JavaScript ab der Version 1.1. Es wird bei der Referenz auf externe Skriptdateien wieder der

Listing 2: Referenz auf eine externe JavaScript-Datei

In Anführungszeichen wird hinter dem Attribut src der Name bzw. vollständige URL der separaten Datei angegeben. Dabei gelten beim Referenzieren von separaten JavaScriptDateien die üblichen Regeln für URLs. Entweder geben Sie einen relativen Pfad an oder aber einen vollständigen URL, der mit dem Protokoll (in der Regel http) beginnt. Die Datei mit dem Quellcode muss – wie HTML-Dateien – eine reine Klartextdatei sein und ausschließlich JavaScript-Code enthalten. Eine solche JavaScript-Datei enthält explizit kein Grundgerüst. Üblich ist die Dateierweiterung .js, aber das ist nicht zwingend. Beispiele:

Listing 3: Angabe einer relativ zur Webseite im gleichen Verzeichnis befindlichen JavaScript-Datei

Listing 4: Angabe einer relativ zur Webseite im parallelen Verzeichnis scripte notierten JavaScript-Datei

Achtung

Listing 5: Angabe von einem absoluten URL der JavaScript-Datei

Bei der Referenz auf externe JavaScript-Dateien sollte der

Ihr Browser versteht entweder kein JavaScript, oder Sie haben es deaktiviert
Für eine vollständige Funktionalität der Webseite benötigen Sie jedoch JavaScript-Unterstützung.

Listing 8: Alternative Informationen können im -Bereich notiert werden.

2

Wie kann ich eine JavaScript-Version bei der Einbindung angeben?

JavaScript gibt es mittlerweile in mehreren Versionen, und natürlich sind gewisse Techniken explizit erst sukzessive in bestimmten Versionen von JavaScript eingeführt worden. Wenn Sie solche neueren Techniken einsetzen, sollten Sie sicherstellen, dass sich auch nur Browser daran versuchen, die einen benötigten Sprachstandard unterstützen. Zwar kann man mittlerweile web-weit die Version 1.3 voraussetzen, aber neuere Versionen auch heutzutage definitiv nicht. Bei der Einbindung eines JavaScripts in eine Webseite (siehe das Rezept Seite 79) können Sie als Ergänzung explizit eine JavaScript-Version angeben. Das erfolgt einfach, indem Sie beim Wert des language-Attributs ohne Leerzeichen (!) die Versionsnummer anfügen. Beispiel:

08

Listing 10: Eine Webseite mit mehreren Skriptcontainern für mehrere JavaScript-Versionen

Grundlagen Core

Formu lare

Ausnahme

Arrays

Strings

Datum Plattform

DHTML

Events

86

Grundlagen

13

18

23

28

33

38

43

48

49 Listing 10: Eine Webseite mit mehreren Skriptcontainern für mehrere JavaScript-Versionen (Forts.)

Wenn Sie die Datei in verschiedene Browser laden, werden Sie an der Ausgabe sehen, welche JavaScript-Versionen dieser nach eigener Einschätzung unterstützt. Beachten Sie, dass die Angabe des MIME-Typs im letzten Skriptcontainer nur das Problem mit der gleichzeitigen Angabe der Version und des MIME-Typs demonstrieren soll und keine Relevanz bezüglich der Version hat.

Wie kann ich eine JavaScript-Version bei der Einbindung angeben?

87

Grundlagen Core

Formu lare

Ausnahme

Arrays

Strings

Datum Plattform

Abbildung 1: Der Internet Explorer 6 traut sich nur JavaScript 1.3 und kann scheinbar kein JavaScript 1.0.

DHTML

Events

Abbildung 2: Der Navigator 4.7 kann nur JavaScript 1.3.

88

Grundlagen

Abbildung 3: Der Navigator 7.1 kann auch JavaScript 1.5 und alle anderen Notationen.

3

Wie kann ich sicherstellen, dass ein Browser nur bekannte JavaScript-Anweisungen ausführt?

Das Rezept mag im ersten Moment überflüssig erscheinen, denn im Rezept »Wie kann ich eine JavaScript-Version bei der Einbindung angeben?« auf Seite 84 können Sie sehen, dass Sie beim

Listing 11: Eine Schablone zum qualifizierten Sicherstellen der Unterstützung bestimmter Anweisungen

4

Wie kann ich testen, ob bei einem Browser JavaScript aktiviert ist?

JavaScript ist mit Abstand die verbreitetste Programmiertechnik in modernen Webclients. Dennoch sollten Sie sich nicht darauf verlassen, dass sie bei einem Besucher unterstützt wird. Ein Webprojekt sollte niemals JavaScript so verwenden, dass es ohne die Unterstützung vollkommen unbrauchbar ist3. Browser ohne JavaScript-Unterstützung können Sie mittlerweile vernachlässigen, aber viele Anwender deaktivieren JavaScript, sei es aus Unkenntnis, weil sie eine Gefahr befürchten, weil es entsprechende Unternehmensrichtlinien gibt oder auch weil JavaScript oft zur Programmierung von nervigen Dingen wie Werbepopups verwendet wird. Ein kurzer Test auf die Unterstützung von JavaScript ist unabdingbar. Dieser Test kann entweder ein einziges Mal beim Einstieg in ein Webprojekt ausgeführt werden4 (also in der 3. 4.

Es sei denn, Sie können auf die Besucher ohne JavaScript-Unterstützung verzichten. Das sollte in der Regel genügen.

Wie kann ich testen, ob bei einem Browser JavaScript aktiviert ist?

91

Regel beim Laden der Seite index.html, die bei den meisten Webprojekten als Einstiegsseite verwendet wird) oder auch bei jedem Laden einer Webseite Ihres Projekts5. Die explizite Abfrage bei jedem Laden einer neuen Webseite beugt dem Anwenderverhalten vor, dass während eines Besuchs auf Ihrem Webprojekt vom Anwender die JavaScript-Unterstützung erst deaktiviert wird und der Test auf der Einstiegsseite JavaScript als aktiviert gekennzeichnet hatte. Wenn Sie das nicht tolerieren können, können Sie zumindest beim Seitenwechsel gegensteuern. Wie können Sie nun testen, ob bei einem Client JavaScripts überhaupt ausgeführt werden können oder nicht? Mit JavaScript selbst? Eine Abfrage per JavaScript, ob JavaScript aktiviert ist, ist ja nicht möglich, wenn es deaktiviert ist. Oder doch? Es geht wirklich. Indirekt. Man nutzt explizit die Tatsache, dass eine JavaScript-Aktion bei deaktiviertem JavaScript überhaupt nicht funktioniert. Das geht beispielsweise so. Mit JavaScript führen Sie eine Weiterleitung zu einem anderen URL aus. Funktioniert der, muss auch JavaScript aktiviert sein. Wenn Sie den Anwender nun komfortabel führen wollen, erstellen Sie eine Einstiegsseite in Ihr Webprojekt, das im Wesentlichen eine solche Weiterleitung enthält und ihn für den Fall vom deaktivierten JavaScript automatisch zu einem Projekt führt, das ohne JavaScript auskommt. Eine solche Weiterleitung funktioniert ohne JavaScript, denn auch mit HTML sind automatische Weiterleitungen möglich. Dazu dient der Tag . Beim Attribut content geben Sie zuerst die Zeitspanne an, nach der die Weiterleitung erfolgen soll, und dann das Ziel der Weiterleitung. Der entscheidende Trick beruht nur darauf, die Weiterleitung per HTML erst nach der Weiterleitung per JavaScript auszuführen. Das nachfolgende Beispiel zeigt so eine automatische Trennung nach JavaScript und deaktiviertem JavaScript. Beispiel (weiterleitung.html): 01 02 03

04 05 10 11 Wenn die automatische Weiterleitung nicht funktioniert, klicken Sie bitte hier, um zum Webprojekt ohne JavaScript-Unterstützung zu kommen
12 Wenn die automatische Weiterleitung nicht funktioniert, klicken Sie bitte hier, um zum Webprojekt mit JavaScript-Unterstützung zu kommen 13 14 Listing 12: Trennung nach JavaScript-Unterstützung oder nicht

5.

Was mir etwas paranoid erscheint :-).

Grundlagen Core

Formu lare

Ausnahme

Arrays

Strings

Datum Plattform

DHTML

Events

92

Grundlagen

Wenn man diese Webseite lädt, erfolgt eine automatische Weiterleitung per JavaScript mit dem location-Objekt (location.href – Zeile 7). Nun wird diese Anweisung bei deaktiviertem JavaScript nicht ausgeführt. Im Header finden Sie in Zeile 3 einen HTML--Tag, der aber erst nach einem Zeitintervall (hier acht Sekunden und im Allgemeinen unbedingt länger als das Weiterleitungsintervall des JavaScripts) automatisch auf ein Teilprojekt ohne JavaScript weiterleitet. Zur Sicherheit notieren Sie noch zwei Hyperlinks, womit die Weiterleitung auch vom Besucher manuell ausgelöst werden kann.

5

Wie kann ich testen, welche JavaScript-Version von einem Browser unterstützt wird?

Direkt können Sie die unterstützte JavaScript-Version nicht abfragen, aber indirekt. Im Rezept »Wie kann ich eine JavaScript-Version bei der Einbindung angeben?« auf Seite 84 können Sie sehen, dass Sie beim



Grundlagen Core

Formu lare

Listing 13: Ein indirekter Test, welche Version von JavaScript unterstützt wird (Forts.)

Der eigentliche Trick basiert darauf, dass Sie die Container in umgekehrter Reihenfolge notieren (zuerst die Version 1.5, dann 1.4, 1.3 bis 1.0). Im Inneren der jeweiligen Container verwenden Sie im Grunde den gleichen Trick wie beim Test, ob JavaScript aktiviert ist. Sie leiten automatisch auf eine Folgeseite weiter, die zu einer bestimmten JavaScript-Version passt und für dieses Projekt als Einstiegsseite dient. Beim ersten Treffer wird zu der angegebenen Seite verzweigt und die Abarbeitung von dem Testskript abgebrochen. Damit ist sichergestellt, dass die entsprechende JavaScript-Version unterstützt wird.

Ausnahme

Arrays

Strings

Datum

6

Wie kann ich den Browser eines Anwenders abfragen?

Die genaue Kenntnis über den Browser des Besuchers ist in vielen Fällen von Bedeutung. Bei dem Datenaustausch zwischen Webserver und Browser werden mit dem HTTP-Protokoll viele Hintergrundinformationen ausgetauscht, unter anderem auch zahlreiche Details über den Browser des Besuchers. Über das Objekt navigator können Sie aus JavaScript heraus auf zahlreiche Informationen über das Clientprogramm eines Besuchers zugreifen. Unter anderem können Sie die Eigenschaft appName verwenden, um den Browsernamen abzufragen.

Wie erfolgt der explizite Test auf eine bekannte Browserkennung? Den Wert von navigator.appName können Sie beispielsweise in einer if-Abfrage testen. Beispiel: if(navigator.appName=="Microsoft Internet Explorer"){ ... } else { ... } Listing 14: Eine einfache Abfrage, ob der Besucher einen Internet Explorer verwendet oder nicht

Diese Variante prüft explizit auf exakte Übereinstimmung des Wertes in appName mit einem bekannten String. Im Inneren der Blöcke können Sie beispielsweise eine Weiterleitung notieren (mit der Methode window.open() oder der Eigenschaft location.href ) oder Inhalte dynamisch schreiben (mit document.write()).

Plattform

DHTML

Events

Tipp

94

Grundlagen

Die Identifikationsstrings der populärsten Browser sind weitgehend bekannt. Der Internet Explorer verwendet zum Beispiel als Wert für navigator.appName in der Voreinstellung »Microsoft Internet Explorer«, der Netscape Navigator und Mozilla »Netscape«, Opera den Wert »Opera« oder auch »Microsoft Internet Explorer« und der Konqueror den Wert »Konqueror«. Da Sie ja selbstverständlich alle Browser, die Sie explizit unterstützen wollen, zum Test verfügbar haben müssen, können Sie einfach ein Skript in alle relevanten Browser laden, das folgende Anweisung ausgibt: alert(navigator.appName);

Alle Ausgaben, die Sie bei Ihren Tests erhalten, fragen Sie dann ab. Die explizite Abfrage des jeweiligen Browsers mittels des navigator-Objektes und dessen Eigenschaft appName auf diese Art ist die meistgenutzte Variante, um einfach nur die populärsten Browserwelten zu trennen. Selbst von vielen – scheinbar – professionellen Seiten. Wenn das aber so realisiert wird, gibt es mindestens zwei Probleme. Um n Welten zu trennen, müssen Sie mindestens n – 1 Wert für appName explizit angeben. Vor allem muss man berücksichtigen, dass sich die Browseridentifikation bei manchen Browsern manuell vom Anwender verändern lässt.

Abbildung 4: In vielen Browsern kann der Anwender den Wert von navigator.appName ändern.

Gelegentlich wird die Eigenschaft navigator.appName auch von einigen Partnerfirmen der Browserhersteller für Werbezwecke missbraucht. So lieferte beispielsweise T-Online den Netscape-Navigator zeitweise mit einer veränderten navigator.appName-Eigenschaft aus, weshalb ein Abprüfung auf Gleichheit mit »Netscape« durch Skripte false liefern kann, obwohl der Browser ursprünglich diesen Wert in der Eigenschaft gesetzt hatte. Man muss also grundsätzlich mit einer Änderung von navigator.appName rechnen.

Wie kann ich den Browser eines Anwenders abfragen?

95

Wie kann ich auf das Vorkommen eines Textes in navigator.appName prüfen? Praxisorientierter ist die Prüfung, ob eine bestimmte Zeichenkette im Wert der Eigenschaft navigator.appName enthalten ist (das ist selbst bei veränderter navigator.appName-Eigenschaft durch Firmen so gut wie immer noch der Fall). Dabei helfen einige Methoden des StringObjekts, etwa indexOf() oder search(), womit in dem String nach dem Vorkommen einer Zeichenkette gesucht wird und nicht unbedingte Gleichheit notwendig ist. Aber auch einige andere der Methoden des String-Objekts sind da ganz nützlich. Die Technik kann beispielsweise so eingesetzt werden (nnc.html): if(navigator.appName.search("Netscape")==-1) { // Kein Netscape-Browser ... } Listing 15: Trennen der Browser über navigator.appName und dem Suchen nach einer enthaltenen Zeichenkette

Im Vergleich wird der Wert –1 zurückgegeben, wenn die Zeichenkette nicht vorkommt. So funktioniert das Verfahren viel zuverlässiger als bei exakter Übereinstimmung. Das ändert aber nichts an der Tatsache, dass auch dieser Test ins Leere läuft, wenn der Anwender seinen Browser komplett anders konfiguriert. Dann gibt es aber noch Rezept 3 von diesem Abschnitt.

Wie erfolgt die indirekte Identifizierung unter Ausnutzung eines Mangels? Es gibt die Möglichkeit zum Trennen vom Internet Explorer (samt kompatiblen Browsern) und einigen Versionen des Navigators (samt kompatiblen Browsern), die ein ähnliches Prinzip wie in dem Fall von deaktiviertem JavaScript verwendet. Man bedient sich einer Anweisung, die jeweils von der nicht gewünschten Browservariante nicht verstanden wird, und wertet die Reaktion aus, etwa mit einer if-Struktur. Dabei setzt man explizit auf die Unterstützung ausgewählter Sonderobjekte durch gewisse Browser. Der Zugriff auf das jeweilige Objekt liefert nur dann den Wert wahr, wenn es auch unterstützt wird. Dabei benutzt man zur Identifizierung des Internet Explorers (bzw. kompatibler Browser) in der Regel das Objekt all.

Hinweis

Für die Alternative gibt es die direkte Identifizierung einiger Versionen des Navigators über das Objekt layers. Diese Technik hat man früher sehr oft verwendet. Die Abfrage auf beide Objekte sind aber auch Paradebeispiele, dass die Ausnutzung eines Mangels oder einer ganz bestimmten Eigenheit in einem bestimmten Browser, welche nur dieser versteht, irgendwann zu einem Problem werden kann.

Wenn ein Browser eine solche dominierende Stellung wie der Internet Explorer hat, dann werden sich die anderen Browserhersteller nicht auf Dauer weigern können, einen von diesem verbreiteten, proprietären Standard zu implementieren. In dem Fall werden Identifika-

Grundlagen Core

Formu lare

Ausnahme

Arrays

Strings

Datum Plattform

DHTML

Events

96

Grundlagen

tionen über einen proprietären Standard mit der Zeit immer mehr Fehler liefern. So kann das all-Objekt heutzutage nicht mehr zur Identifikation verwendet werden, denn fast alle modernen Browser unterstützen es mittlerweile. Diese Unterstützung geht in der Regel zwar in vielen Fällen mit einer weiteren Synchronisierung einher, so dass beispielsweise die indirekte Identifikation des Konquerors als Internet Explorer in zahlreichen Situationen kein echtes Problem ist. Es gibt aber auch Fälle wie das globale Eventhandling oder DHTML, bei dem in bestimmten Fällen gewaltige Abweichungen zu beobachten sind. Zudem behaupten diverse Browser zwar, dass sie das all-Objekt unterstützen, in diversen Details wird jedoch die Umsetzung nicht vollständig implementiert. Falls die exakte Identifikation also aus irgendeinem Grund notwendig ist, ist diese Abfrage über all unbrauchbar. Auf der anderen Seite kann es auch passieren, dass irgendwann ein Browserhersteller alle seine Prinzipien aufgibt und zu seinen eigenen Ideen inkompatibel wird. Wenn er darüber nicht Pleite geht, werden selbst Nachfolgeversionen eines Browsers mit einer bestimmten Eigenheit des Vorgängers hier in die Irre geführt. Und genau das gilt (leider) für den Test auf das Objekt layers. Konnte man damit Navigator-Versionen bis 4.7 zuverlässig identifizieren, kennen die nachfolgenden Navigator-Versionen das Objekt nicht mehr! Folge – sie werden von dem nachfolgenden Beispiel weder zu der einen noch der anderen Seite weitergeleitet. Dennoch hier der (heute unzuverlässige) Quellcode als Schablone, wobei bei dieser Variante eine unmittelbare Weiterleitung bei einem Treffer sehr sinnvoll ist: if (document.all) location.href="..."; if (document.layers) location.href="..."; Listing 16: Direkte Überprüfung auf die Objekte all und layers

Die erste Zeile leitet unmittelbar weiter, wenn das Objekt all erkannt wird. Die nächste Zeile wird nur dann überhaupt erreicht, wenn das all-Objekt nicht erfolgreich identifiziert wurde. Dann wird weitergeleitet, wenn layers-Unterstützung vorhanden ist. Sonst erfolgt überhaupt keine Weiterleitung.

Was ist die sinnvollste Identifizierungstechnik? Alle drei Techniken zu Identifizierung eines Browsers sind mängelbehaftet. Sie müssen entscheiden, mit welchem Mangel Sie am besten leben können. Offensichtlich ist es sinnvoller, Rezept 2 denn Rezept 1 zu verwenden. Aber ob Sie sich auf die Unterstützung von einem spezifischen Objekt verlassen oder lieber die Selbstidentifikation verwenden, ist Geschmackssache. Ich tendiere massiv zur Verwendung von navigator.appName, denn der typische Anwender verändert diese Einstellung im Browser nicht. Das machen vielleicht wenige Poweruser, und die können – falls eine Seite nicht korrekt angezeigt wird – den Browser wieder umkonfigurieren. Aber wie gesagt – Anwender von Browsern wie Opera stellen gelegentlich Internet Explorer als navigator.appName ein und lassen sich dann überhaupt nicht explizit erkennen7. 7.

Auf solchen Einstellungen beruhen zum Teil auch die Statistiken, die dem Internet Explorer einen Anteil von über 90% zugestehen. Viele Browser mit veränderter navigator.appName-Eigenschaft werden einfach als Internet Explorer gezählt.

Achtung

Wie kann ich die Version eines bekannten Browsers bei einem Anwender abfragen?

7

97

Die Eigenschaft navigator.appCodeName eignet sich nicht zum Identifizieren eines speziellen Browsers. Darin wird der Codename des Browsers gespeichert, und das ist fast immer der Wert Mozilla (selbst beim Internet Explorer).

Grundlagen Core

Wie kann ich die Version eines bekannten Browsers bei einem Anwender abfragen?

Über das Objekt navigator stehen zahlreiche Informationen über das Clientprogramm eines Besuchers bereit. Unter anderem können Sie die Eigenschaft navigator.appVersion verwenden, um die Version von einem Browser abzufragen. Der Wert von navigator.appVersion ist jedoch in der Regel nicht nur eine Zahl, sondern er beinhaltet weit mehr Informationen wie das Betriebssystem sowie bei einigen Browsers auch die eingestellte Sprache.

Formu lare

Ausnahme

Arrays

Strings

Datum Plattform

DHTML Abbildung 5: Das liefert der Internet Explorer 6.0 bei der Abfrage von navigator.appVersion.

Events

Abbildung 6: Der Netscape Navigator 4.7

Abbildung 7: Opera 7.2 unter Linux

98

Grundlagen

Um die Version wirklich abfragen zu können, müssen Sie navigator.appVersion nach der passenden Information parsen. Dazu macht man sich bei einer Lösung die Tatsache zunutze, dass navigator.appVersion ein String ist, den man mit geeigneten String-Funktionen durchsuchen kann. Aber da die Versionsinformation am Beginn von dem String steht und es zwei Toplevel-Funktionen von JavaScript gibt, die einen String in eine Ganzzahl bzw. Gleitkommazahl umwandeln können, genügt meist deren Verwendung. Die Funktion parseFloat([Zeichenkette]) durchsucht ein String-Argument und wandelt eine übergebene Zeichenkette in eine Kommazahl um und gibt diese als Ergebnis zurück. Insbesondere kann die Zeichenkette nach den Zahlen auch Text enthalten. Ab dem ersten nicht-nummerischen Zeichen wird die Evaluierung abgebrochen, und alle davor gefundenen Zahlen werden zurückgegeben (Vorzeichen und führende bzw. trennende Leerzeichen sind erlaubt.). Eventuell danach noch folgende Zahlen werden nicht mehr berücksichtigt. Wenn bereits das erste Zeichen von links in der Zeichenkette keine Zahl ist, wird NaN zurückgegeben. Analog funktioniert parseInt([Zeichenkette]). Diese wandelt nur eine übergebene Zeichenkette in eine Ganzzahl um und gibt diese als Ergebnis zurück. Auch bei einer Gleitkommazahl wird der Nachkomma-Anteil abgeschnitten. Bei der Auswertung der Version müssen Sie beachten, dass die Versionsnummer nicht immer identisch mit der nach außen dokumentierten Versionsnummer ist. So gibt der Internet Explorer 6.0 etwa den Wert 4 aus, der Navigator 4.7 jedoch auch den Wert 4.7. Der Navigator 7.2 liefert jedoch den Wert 5, Mozilla 4, Opera 7.21 den Wert 7.21 und der Konqueror 3.1.x den Wert 5. if (parseInt(navigator.appVersion)