JavaScript - Amazon S3...JavaScript - Amazon S3 ... 1}}}}} ...

Christian Wenz

JavaScriptDas umfassende Handbuch

1678.book Seite 1 Dienstag, 7. September 2010 7:34 19

Auf einen Blick

TEIL I Grundlagen .................................................................... 29

TEIL II Fortgeschrittene Techniken .......................................... 123

TEIL III Features ......................................................................... 201

TEIL IV Ajax und Co. .................................................................. 353

TEIL V Blick über den Tellerrand .............................................. 491

TEIL VI Sicherheit ...................................................................... 583

TEIL VII Praxis ............................................................................. 635


5

Inhalt

1 Einleitung ................................................................................ 21

1.1 Die Geschichte von JavaScript ..................................................... 221.2 Voraussetzungen ........................................................................ 241.3 Zur 10. Auflage ........................................................................... 261.4 Die Icons in diesem Buch ............................................................ 28

TEIL I Grundlagen

2 Webbrowser ............................................................................ 31

2.1 Netscape Navigator (und Konsorten) .......................................... 312.2 Microsoft Internet Explorer ......................................................... 362.3 Opera ......................................................................................... 392.4 Konqueror .................................................................................. 402.5 Safari .......................................................................................... 412.6 Marktanteile ............................................................................... 432.7 Testsystem .................................................................................. 45

3 JavaScript einbauen ................................................................ 47

3.1 Verwendung von <script> ........................................................... 473.1.1 Das language-Attribut .................................................... 503.1.2 Browser ohne JavaScript ................................................. 543.1.3 Externe Dateien ............................................................. 58

3.2 JavaScript-Links .......................................................................... 603.3 Event-Handler ............................................................................ 623.4 JavaScript-Entities ....................................................................... 63

4 Programmieren mit JavaScript ................................................ 65

4.1 Variablen .................................................................................... 654.1.1 Namensgebung .............................................................. 654.1.2 Numerische Variablen .................................................... 664.1.3 Zeichenketten ................................................................ 664.1.4 Boolesche Variablen ....................................................... 674.1.5 Variablendeklaration ...................................................... 68

4.2 Operatoren ................................................................................. 694.2.1 Arithmetische Operatoren .............................................. 69


Inhalt

6

4.2.2 Boolesche Operatoren .................................................... 714.2.3 String-Operatoren .......................................................... 734.2.4 Umwandlung zwischen den Variablentypen ................... 74

4.3 Kontrollstrukturen: Schleifen ...................................................... 754.3.1 For-Schleifen .................................................................. 754.3.2 Do-while-Schleife .......................................................... 774.3.3 While-Schleife ................................................................ 784.3.4 For-in-Schleife ................................................................ 784.3.5 Schleifensteuerung ......................................................... 78

4.4 Kontrollstrukturen: Fallunterscheidung ....................................... 794.4.1 If-Anweisung .................................................................. 794.4.2 Switch-Anweisung ......................................................... 824.4.3 Try ................................................................................. 84

4.5 Datenspeicherung ....................................................................... 854.5.1 Die eval()-Funktion ........................................................ 864.5.2 Arrays ............................................................................ 87

4.6 Funktionen ................................................................................. 884.7 Objekte ...................................................................................... 92

5 Datum ..................................................................................... 95

5.1 Tagesdatum ................................................................................ 965.2 Y2K ............................................................................................ 975.3 Mit Daten rechnen ..................................................................... 985.4 Lokales Datumsformat ................................................................ 100

6 Zufall ....................................................................................... 101

6.1 Zufallszahlen erstellen ................................................................. 1016.1.1 JavaScript-Zufallszahlen .................................................. 1016.1.2 Das HP-Verfahren .......................................................... 1026.1.3 Datumswert ................................................................... 104

6.2 Hilfsfunktionen ........................................................................... 1056.2.1 Zufallszahl aus einem Bereich ......................................... 105

6.3 Anwendungsbeispiele ................................................................. 1066.3.1 Lottozahlen .................................................................... 1076.3.2 Zufallsbanner ................................................................. 110

7 Browserinformationen ............................................................ 113

7.1 Browsererkennung ...................................................................... 1137.2 Weiterleitung ............................................................................. 119


Inhalt

7

TEIL II Fortgeschrittene Techniken

8 DOM ........................................................................................ 125

8.1 Der DOM-Baum ......................................................................... 1268.2 Navigation im Baum ................................................................... 1278.3 Den Baum modifizieren .............................................................. 129

8.3.1 Wichtige Methoden ....................................................... 1298.3.2 Zugriff auf einzelne Elemente ......................................... 1308.3.3 Zugriff auf Tags .............................................................. 1348.3.4 Beispiele ........................................................................ 135

9 Ereignisbehandlung ................................................................. 141

9.1 Events à la Netscape (und Mozilla & Co.) .................................... 1419.1.1 Ereignisse ....................................................................... 1429.1.2 Ereignisse als Objekteigenschaften ................................. 1439.1.3 Ereignisse abfangen ........................................................ 1459.1.4 Ereignisbehandlung ........................................................ 1469.1.5 Ereignisse umleiten ........................................................ 1489.1.6 Ereignisse durchleiten .................................................... 1509.1.7 Tastatureingaben ............................................................ 151

9.2 Events à la Internet Explorer ....................................................... 1539.2.1 Ereignisse ....................................................................... 1539.2.2 Ereignisse als Objekteigenschaften ................................. 1539.2.3 Spezielle Skripte ............................................................. 1549.2.4 Ereignisse abfangen ........................................................ 1549.2.5 Bubbling ........................................................................ 1559.2.6 Das Event-Objekt ........................................................... 157

9.3 Events mit beiden Browsern ....................................................... 1589.3.1 Browserunabhängigkeit .................................................. 1599.3.2 Benutzereingaben .......................................................... 160

9.4 Andere (und moderne) Browser .................................................. 164

10 Fehlerbehandlung ................................................................... 167

10.1 Fehler abfangen .......................................................................... 16810.1.1 Keine Fehlermeldung ..................................................... 16810.1.2 Besondere Fehlermeldung .............................................. 16910.1.3 Ausblick: Fehlermeldungen verschicken ......................... 170

10.2 JavaScript Debugger ................................................................... 17410.2.1 Wo ist der Fehler? .......................................................... 174


Inhalt

8

10.2.2 Breakpoints .................................................................... 17710.2.3 Watches ......................................................................... 17810.2.4 Schrittweise Programmausführung ................................. 179

11 Objekte ................................................................................... 181

11.1 Array-Erweiterungen ................................................................... 18211.1.1 Einfügen, nicht anfügen ................................................. 18211.1.2 Anfügen und löschen ..................................................... 18311.1.3 Array-Elemente mischen ................................................ 18411.1.4 Sortieren ........................................................................ 185

11.2 Eigene Objekte ........................................................................... 18811.2.1 Allgemeines ................................................................... 18911.2.2 Methoden definieren ..................................................... 19011.2.3 Eigene Sortiermethode ................................................... 19111.2.4 Eigene Sortiermethode, Teil 2 ........................................ 19311.2.5 Zusammenfassung .......................................................... 19411.2.6 Platzsparende Notation .................................................. 197

11.3 JavaScript-Objekte erweitern ...................................................... 198

TEIL III Features

12 Formulare ................................................................................ 203

12.1 Überprüfung auf Vollständigkeit ................................................. 20312.1.1 Allgemeiner Aufbau ....................................................... 20612.1.2 Texteingabefelder ........................................................... 20712.1.3 Radiobuttons ................................................................. 20712.1.4 Checkboxen ................................................................... 20812.1.5 Auswahllisten ................................................................. 20812.1.6 Fehlermeldung ausgeben ............................................... 21012.1.7 Konstruktive Vorschläge ................................................. 211

12.2 Automatische Überprüfung ......................................................... 21312.2.1 Texteingabefelder ........................................................... 21412.2.2 Radiobuttons ................................................................. 21412.2.3 Checkboxen ................................................................... 21512.2.4 Auswahllisten ................................................................. 21612.2.5 Zusammenfassung .......................................................... 216

12.3 Anwendungsmöglichkeiten für Formulare ................................... 21812.3.1 Währungsrechner ........................................................... 21812.3.2 Währungsrechner, Teil 2 ................................................ 220


Inhalt

9

12.3.3 Formularfelder für die Textausgabe nutzen ..................... 22112.3.4 Navigation mit Auswahllisten ......................................... 222

12.4 Daten behalten ........................................................................... 22412.4.1 Das Eingabeformular ...................................................... 22412.4.2 Die Ausgabeseite ........................................................... 225

12.5 Dynamische Auswahllisten .......................................................... 22912.5.1 Ein erster Ansatz ............................................................ 22912.5.2 Ein fortgeschrittener Ansatz ........................................... 231

12.6 Überprüfungsfunktionen ............................................................. 23212.6.1 Ganze Zahlenwerte ........................................................ 23212.6.2 Dezimalzahlen ................................................................ 23412.6.3 Telefonnummern ............................................................ 23512.6.4 E-Mail-Adressen ............................................................ 23612.6.5 In Zahlenwerte umwandeln ............................................ 236

12.7 Reguläre Ausdrücke .................................................................... 23712.7.1 Kurzeinführung .............................................................. 23812.7.2 Ein Objekt erzeugen ....................................................... 24012.7.3 Mit dem Objekt arbeiten ............................................... 240

13 Fenster .................................................................................... 247

13.1 Modale Fenster .......................................................................... 24713.1.1 Warnung – nur im Notfall ............................................... 24813.1.2 Bestätigungen ................................................................ 25013.1.3 Benutzereingaben .......................................................... 252

13.2 Navigationsleiste mit JavaScript .................................................. 25313.2.1 Das History-Objekt ........................................................ 25313.2.2 Vorwärts und rückwärts, Teil 2 ....................................... 25413.2.3 Drucken mit JavaScript ................................................... 255

13.3 Die Statuszeile ............................................................................ 25613.3.1 Erläuternde Links ........................................................... 25713.3.2 Laufschrift ...................................................................... 258

13.4 Das location-Objekt .................................................................... 26213.5 Ein neues Fenster öffnen ............................................................. 264

13.5.1 Ein Fenster öffnen und füllen ......................................... 26413.5.2 Ein Fenster öffnen und verlinken .................................... 26513.5.3 Ein Fenster öffnen und anpassen .................................... 26713.5.4 Modale Fenster .............................................................. 273

13.6 Fernsteuerung ............................................................................. 27513.6.1 Links mit JavaScript ........................................................ 27513.6.2 Links ohne JavaScript ..................................................... 277


Inhalt

10

13.7 Fenster schließen ........................................................................ 27813.7.1 Andere Fenster schließen ............................................... 279

13.8 Fenster bewegen mit JavaScript .................................................. 28013.8.1 Fenster verschieben ....................................................... 28013.8.2 Fensterinhalt scrollen ..................................................... 281

13.9 Anwendungsbeispiel: Fensteroptionen ........................................ 282

14 Frames und Iframes ................................................................. 291

14.1 Mit Frames arbeiten ................................................................... 29114.1.1 Frames mit HTML .......................................................... 29214.1.2 Frames mit JavaScript füllen ........................................... 294

14.2 Auf Daten von Frames zugreifen ................................................. 29514.2.1 Auf übergeordnete Frames zugreifen .............................. 29714.2.2 Auf Daten von Unterframes zugreifen ............................. 30014.2.3 Mehrere Frames gleichzeitig ändern ............................... 30214.2.4 JavaScript in Frames auslagern ........................................ 30314.2.5 Frames zählen ................................................................ 304

14.3 Diashow ..................................................................................... 30414.3.1 Vorbereitungen .............................................................. 30514.3.2 Diashow starten ............................................................. 30714.3.3 Diashow anhalten .......................................................... 30714.3.4 Vorwärts und rückwärts springen ................................... 30814.3.5 Diashow verlassen .......................................................... 308

15 Grafiken ................................................................................... 309

15.1 Bildlein-Wechsle-Dich ................................................................ 30915.1.1 Zugriff auf Grafiken ........................................................ 311

15.2 Animierte JPEGs ......................................................................... 31215.2.1 Eine Animation mit JavaScript ........................................ 31315.2.2 Bilder in den Cache laden ............................................... 314

15.3 Animierte Navigation .................................................................. 31715.3.1 Vorüberlegungen ........................................................... 31815.3.2 Auf- und Zuklappen ....................................................... 31915.3.3 Die einzelnen Menüpunkte ............................................ 32015.3.4 Verlinkung der Menüpunkte .......................................... 32115.3.5 Einbau in die HTML-Datei .............................................. 322

15.4 Erweiterung der Navigation ........................................................ 32215.4.1 Vorbereitungen .............................................................. 32315.4.2 Leichte Änderungen ....................................................... 323


Inhalt

11

15.4.3 Doppeltes Mouseover .................................................... 32415.4.4 Das komplette Beispiel im Überblick .............................. 325

15.5 Tipps aus der Praxis .................................................................... 32515.5.1 Vorladen – aber richtig ................................................... 32515.5.2 Ladestand einer Grafik ................................................... 32615.5.3 Fortschrittsanzeige ......................................................... 329

16 Cookies .................................................................................... 337

16.1 Was ist ein Cookie? ..................................................................... 33716.2 Wie sieht ein Cookie aus? ........................................................... 33816.3 Cookies mit JavaScript ................................................................ 340

16.3.1 Cookies setzen ............................................................... 34116.3.2 Cookies löschen ............................................................. 34216.3.3 Cookies lesen ................................................................. 34216.3.4 Cookie-Unterstützung überprüfen .................................. 34316.3.5 Ein Cookie statt vieler Cookies ....................................... 345

TEIL IV Ajax und Co.

17 Ajax ......................................................................................... 355

17.1 Ajax-Beispiele ............................................................................. 35617.2 Ajax-Technik ............................................................................... 358

17.2.1 HTTP-Anfragen senden und auswerten ........................... 35917.2.2 Parameter senden .......................................................... 36217.2.3 Mit komplexen Daten arbeiten – JSON .......................... 36517.2.4 Anfragen abbrechen ....................................................... 36717.2.5 Weitere Möglichkeiten ................................................... 370

17.3 Serverseitige Technologien ohne Ajax ......................................... 37017.4 Variablentausch .......................................................................... 371

17.4.1 Newsticker ..................................................................... 37517.4.2 Bankleitzahlen ................................................................ 379

18 CSS .......................................................................................... 385

18.1 Grundlagen ................................................................................. 38518.2 Cascading Style Sheets ................................................................ 38618.3 HTML-Elemente ......................................................................... 39018.4 Beispiele ..................................................................................... 392

18.4.1 Animiertes Logo ............................................................. 39218.4.2 Sichtbar und unsichtbar ................................................. 396


Inhalt

12

18.4.3 Neuer Mauszeiger .......................................................... 40118.4.4 Permanentes Werbebanner ............................................ 404

19 XML & Co. ............................................................................... 409

19.1 XML ........................................................................................... 40919.1.1 XML-Daten verarbeiten .................................................. 41019.1.2 XML-Dokumente erstellen ............................................. 414

19.2 XSL ............................................................................................. 41619.3 XPath ......................................................................................... 420

20 Web Services ........................................................................... 427

20.1 Was sind Web Services? .............................................................. 42820.1.1 Verteiltes Arbeiten ......................................................... 42820.1.2 WSDL ............................................................................ 42920.1.3 Web Services aufrufen .................................................... 431

20.2 Web Services mit JScript.NET ...................................................... 43320.2.1 Installation ..................................................................... 43320.2.2 Programmierung ............................................................ 436

20.3 Mit dem Internet Explorer auf Web Services zugreifen ................ 44120.4 Mit Mozilla auf Web Services zugreifen ...................................... 445

21 jQuery und weitere JavaScript-Bibliotheken .......................... 451

21.1 jQuery ........................................................................................ 45221.1.1 Elementzugriff ................................................................ 45321.1.2 CSS ................................................................................ 45621.1.3 Ereignisbehandlung und Ajax ......................................... 457

21.2 Prototype ................................................................................... 46021.3 script.aculo.us ............................................................................. 46321.4 Weitere Bibliotheken .................................................................. 467

22 Best Practices für Ajax-Anwendungen ................................... 469

22.1 Bookmarks .................................................................................. 47022.2 Zurück-Schaltfläche .................................................................... 475

23 JavaScript-Performance .......................................................... 483

23.1 Performanterer Code .................................................................. 48423.2 Weniger Daten ........................................................................... 48723.3 Tools .......................................................................................... 488


Inhalt

13

TEIL V Blick über den Tellerrand

24 Plugins ..................................................................................... 493

24.1 Plugins erkennen ........................................................................ 49324.1.1 Zugriff auf Plugins .......................................................... 49324.1.2 Zugriff auf MIME-Typen ................................................. 49524.1.3 Refresh ........................................................................... 495

25 Multimedia .............................................................................. 499

25.1 Musik ......................................................................................... 50025.1.1 Einbau in HTML ............................................................. 50025.1.2 Standardkontrollen des Internet Explorers ...................... 50125.1.3 Standardkontrollen von Netscape ................................... 50325.1.4 Browserunabhängige Ansteuerung ................................. 50525.1.5 Anwendung: Wurlitzer ................................................... 510

25.2 Microsoft Windows Media Player ............................................... 51125.2.1 Einbau in HTML ............................................................. 51225.2.2 Browserunabhängige Ansteuerung ................................. 51425.2.3 Anwendung: Heimkino .................................................. 518

25.3 Adobe-Plugins ............................................................................ 52025.3.1 Prinzipielles .................................................................... 52225.3.2 Director ......................................................................... 52325.3.3 Flash .............................................................................. 52925.3.4 Mit Flash kommunizieren ............................................... 534

26 Java .......................................................................................... 543

26.1 Allgemeines ................................................................................ 54326.1.1 Wie funktioniert Java? .................................................... 54326.1.2 Kurzeinführung in Java ................................................... 545

26.2 Java und das Web ....................................................................... 54626.2.1 Ein Beispiel-Applet ......................................................... 54626.2.2 HTML-Integration .......................................................... 547

26.3 Java ohne Applet ........................................................................ 55026.3.1 Exemplarische Java-Objekte ........................................... 55126.3.2 Blackjack ........................................................................ 55126.3.3 Karten initialisieren ........................................................ 55226.3.4 Karten mischen .............................................................. 553


Inhalt

14

27 Silverlight ................................................................................ 557

27.1 Einstieg in Silverlight ................................................................... 55827.2 Von JavaScript zu Silverlight ....................................................... 562

28 JavaScript goes .NET ............................................................... 567

28.1 Erste Schritte .............................................................................. 56728.2 HTML Controls ........................................................................... 57028.3 Web Controls ............................................................................. 57328.4 Validation Controls ..................................................................... 57628.5 Fazit ........................................................................................... 581

TEIL VI Sicherheit

29 JavaScript und Sicherheit ........................................................ 585

29.1 XSS ............................................................................................. 58529.2 XSS und Ajax .............................................................................. 589

30 Code schützen ......................................................................... 593

30.1 Quellcode einsehen .................................................................... 59430.1.1 Menübefehle ................................................................. 59430.1.2 Tastenkürzel ................................................................... 59530.1.3 Kontextmenü ................................................................. 59530.1.4 Dateisystem ................................................................... 596

30.2 Code im Frame verstecken .......................................................... 59830.3 Mausklick verhindern ................................................................. 60030.4 Code codieren ............................................................................ 602

30.4.1 Optisch verschleiern ....................................................... 60230.4.2 Inhaltlich verschleiern .................................................... 603

30.5 Dateien auslagern ....................................................................... 60730.6 Caching verhindern ..................................................................... 60830.7 Code serverseitig generieren ....................................................... 610

31 Top Secret: Passwortschutz .................................................... 613

31.1 URL aus Passwort ....................................................................... 61431.1.1 Passwort entspricht URL ................................................ 61431.1.2 Passwort ähnlich zur URL ............................................... 61531.1.3 Passwort erzeugt URL .................................................... 616


Inhalt

15

31.2 Seiten mit Cookies schützen ....................................................... 61831.2.1 Passwort im Quelltext .................................................... 61831.2.2 Mit Java ......................................................................... 621

31.3 Ein Blick über den Tellerrand ...................................................... 62431.3.1 PHP ............................................................................... 62431.3.2 .htaccess ........................................................................ 626

32 Signierte Skripte ..................................................................... 627

32.1 Zusätzliche Rechte ...................................................................... 62832.1.1 Allgemeines ................................................................... 62832.1.2 Surfüberwachung ........................................................... 62932.1.3 Besondere Fenster .......................................................... 631

32.2 Signieren .................................................................................... 63332.2.1 SignTool ......................................................................... 63332.2.2 HTML-Code anpassen .................................................... 634

TEIL VII Praxis

33 Warenkorb .............................................................................. 637

33.1 Datenstruktur ............................................................................. 63833.2 Mit unsichtbaren Frames arbeiten ............................................... 641

33.2.1 Warenkorb füllen ........................................................... 64333.2.2 Artikel anzeigen ............................................................. 64433.2.3 Warenkorb ändern ......................................................... 653

33.3 Mit Cookies arbeiten .................................................................. 65733.3.1 Warenkorb füllen ........................................................... 65833.3.2 Artikel anzeigen ............................................................. 65933.3.3 Warenkorb ändern ......................................................... 663

33.4 Über die URL .............................................................................. 66733.4.1 Den Warenkorb füllen .................................................... 66933.4.2 Artikel anzeigen ............................................................. 66933.4.3 Den Warenkorb ändern .................................................. 675

33.5 Fazit ........................................................................................... 676

34 Ajax-Frameworks .................................................................... 679

34.1 Dojo ........................................................................................... 68034.2 ASP.NET AJAX ............................................................................ 684


Inhalt

16

35 Referenz ................................................................................... 695

35.1 Das Anchor-Objekt ..................................................................... 69735.1.1 Allgemeines ................................................................... 69735.1.2 Eigenschaften ................................................................. 698

35.2 Das Array-Objekt ........................................................................ 69935.2.1 Allgemeines ................................................................... 69935.2.2 Methoden ...................................................................... 69935.2.3 Eigenschaften ................................................................. 703

35.3 Das Button-Objekt ..................................................................... 70335.3.1 Allgemeines ................................................................... 70335.3.2 Event-Handler ................................................................ 70435.3.3 Methoden ...................................................................... 70435.3.4 Eigenschaften ................................................................. 704

35.4 Das Checkbox-Objekt ................................................................. 70535.4.1 Allgemeines ................................................................... 70535.4.2 Event-Handler ................................................................ 70535.4.3 Methoden ...................................................................... 70535.4.4 Eigenschaften ................................................................. 706

35.5 Das Date-Objekt ......................................................................... 70735.5.1 Allgemeines ................................................................... 70735.5.2 Methoden ...................................................................... 708

35.6 Das document-Objekt ................................................................ 71735.6.1 Allgemeines ................................................................... 71735.6.2 Event-Handler ................................................................ 71735.6.3 Methoden ...................................................................... 71735.6.4 Eigenschaften ................................................................. 721

35.7 Das Event-Objekt ....................................................................... 72735.7.1 Netscape-Eigenschaften ................................................. 72735.7.2 Internet Explorer-Eigenschaften ..................................... 729

35.8 Das FileUpload-Objekt ............................................................... 73235.8.1 Allgemeines ................................................................... 73235.8.2 Event-Handler ................................................................ 73235.8.3 Methoden ...................................................................... 73235.8.4 Eigenschaften ................................................................. 733

35.9 Das Form-Objekt ........................................................................ 73335.9.1 Allgemeines ................................................................... 73435.9.2 Event-Handler ................................................................ 73435.9.3 Methoden ...................................................................... 73435.9.4 Eigenschaften ................................................................. 735

35.10 Das Frame-Objekt ...................................................................... 736


Inhalt

17

35.11 Das Hidden-Objekt ..................................................................... 73635.11.1 Allgemeines ................................................................. 73635.11.2 Eigenschaften ............................................................... 737

35.12 Das History-Objekt ..................................................................... 73735.12.1 Allgemeines ................................................................. 73735.12.2 Methoden .................................................................... 73835.12.3 Eigenschaften ............................................................... 738

35.13 Das Image-Objekt ....................................................................... 73935.13.1 Allgemeines ................................................................. 73935.13.2 Event-Handler .............................................................. 74035.13.3 Eigenschaften ............................................................... 740

35.14 Das Layer-Objekt ........................................................................ 74135.14.1 Allgemeines ................................................................. 74235.14.2 Event-Handler .............................................................. 74235.14.3 Methoden .................................................................... 74235.14.4 Eigenschaften ............................................................... 745

35.15 Das Link-Objekt .......................................................................... 74835.15.1 Allgemeines ................................................................. 74835.15.2 Event-Handler .............................................................. 74835.15.3 Eigenschaften ............................................................... 749

35.16 Das Location-Objekt ................................................................... 75035.16.1 Methoden .................................................................... 75035.16.2 Eigenschaften ............................................................... 751

35.17 Das Math-Objekt ........................................................................ 75235.17.1 Methoden .................................................................... 75335.17.2 Eigenschaften ............................................................... 759

35.18 Das MimeType-Objekt ................................................................ 76035.18.1 Eigenschaften ............................................................... 760

35.19 Das Navigator-Objekt ................................................................. 76135.19.1 Methoden .................................................................... 76135.19.2 Eigenschaften ............................................................... 762

35.20 Das Number-Objekt ................................................................... 76335.20.1 Allgemeines ................................................................. 76335.20.2 Eigenschaften ............................................................... 763

35.21 Das Object-Objekt ...................................................................... 76435.21.1 Allgemeines ................................................................. 76435.21.2 Methoden .................................................................... 76435.21.3 Eigenschaften ............................................................... 766

35.22 Das Option-Objekt ..................................................................... 76635.22.1 Allgemeines ................................................................. 76635.22.2 Eigenschaften ............................................................... 767


Inhalt

18

35.23 Das Password-Objekt ................................................................. 76735.23.1 Allgemeines ................................................................. 76835.23.2 Event-Handler .............................................................. 76835.23.3 Methoden .................................................................... 76835.23.4 Eigenschaften ............................................................... 768

35.24 Das Plugin-Objekt ...................................................................... 76935.24.1 Eigenschaften ............................................................... 769

35.25 Das Radio-Objekt ....................................................................... 77035.25.1 Allgemeines ................................................................. 77035.25.2 Event-Handler .............................................................. 77035.25.3 Methoden .................................................................... 77035.25.4 Eigenschaften ............................................................... 771

35.26 Das RegExp-Objekt ..................................................................... 77235.26.1 Allgemeines ................................................................. 77235.26.2 Eigenschaften ............................................................... 77235.26.3 Methoden .................................................................... 774

35.27 Das Reset-Objekt ........................................................................ 77535.27.1 Allgemeines ................................................................. 77535.27.2 Event-Handler .............................................................. 77535.27.3 Methoden .................................................................... 77535.27.4 Eigenschaften ............................................................... 776

35.28 Das Screen-Objekt ...................................................................... 77635.28.1 Eigenschaften ............................................................... 777

35.29 Das Select-Objekt ....................................................................... 77835.29.1 Allgemeines ................................................................. 77835.29.2 Event-Handler .............................................................. 77835.29.3 Methoden .................................................................... 77835.29.4 Eigenschaften ............................................................... 779

35.30 Das String-Objekt ....................................................................... 78035.30.1 Allgemeines ................................................................. 78035.30.2 Methoden .................................................................... 78035.30.3 Eigenschaften ............................................................... 789

35.31 Das Submit-Objekt ..................................................................... 78935.31.1 Allgemeines ................................................................. 78935.31.2 Event-Handler .............................................................. 78935.31.3 Methoden .................................................................... 78935.31.4 Eigenschaften ............................................................... 790

35.32 Das Text-Objekt ......................................................................... 79035.32.1 Allgemeines ................................................................. 79135.32.2 Event-Handler .............................................................. 791


Inhalt

19

35.32.3 Methoden .................................................................... 79135.32.4 Eigenschaften ............................................................... 792

35.33 Das Textarea-Objekt ................................................................... 79235.33.1 Allgemeines ................................................................. 79335.33.2 Event-Handler .............................................................. 79335.33.3 Methoden .................................................................... 79335.33.4 Eigenschaften ............................................................... 794

35.34 Das Window-Objekt ................................................................... 79435.34.1 Allgemeines ................................................................. 79535.34.2 Event-Handler .............................................................. 79535.34.3 Methoden .................................................................... 79535.34.4 Eigenschaften ............................................................... 807

35.35 Das XMLHttpRequest-Objekt ..................................................... 81235.35.1 Allgemeines ................................................................. 81235.35.2 Methoden .................................................................... 81235.35.3 Eigenschaften ............................................................... 813

35.36 Top-Level-Eigenschaften und -Methoden ................................... 81435.36.1 Methoden .................................................................... 81435.36.2 Eigenschaften ............................................................... 816

36 Quellen im Web ...................................................................... 817

36.1 Websites .................................................................................... 81736.2 Newsgroups ................................................................................ 81836.3 Mailinglisten ............................................................................... 819

37 Die Zukunft von JavaScript ..................................................... 821

37.1 JavaScript 1.6 ............................................................................. 82137.2 JavaScript 1.7 ............................................................................. 82437.3 JavaScript 1.8 ............................................................................. 82437.4 JavaScript 1.9 ............................................................................. 82437.5 Die Zukunft ................................................................................ 825

Index ........................................................................................................... 827


203

Von allen Plagen, mit denen Gott, der Herr, unser Wirtschaftsleben heimsucht, ist die Bürokratie die weitaus schlimmste.– Ephraim Kishon

12 Formulare

Es gibt prinzipiell drei Einsatzgebiete für JavaScript: grafische Effekte (Beispielegibt es zum ersten Mal in Kapitel 15), Navigationshilfen (zum Beispiel in Kapitel13) und echte Interaktion mit dem Benutzer. Interaktion bedeutet hier, dass derBenutzer etwas tut und die Webseite sich dementsprechend verändert. Sehr oftbenutzt man hierzu HTML-Formulare. Das hat mehrere Gründe. HTML-Schaltflä-chen eignen sich vorzüglich, um JavaScript-Funktionen auszuführen, und inHTML-Eingabefeldern kann man Daten vom Benutzer abfragen. In diesem Kapi-tel soll es primär darum gehen, einen HTML-Fragebogen mit JavaScript-Funktio-nalität zu versehen.

12.1 Überprüfung auf Vollständigkeit

Sie haben das garantiert schon einmal im World Wide Web gesehen: Wenn Siesich bei einem Freemail-Dienst, einer Online-Community oder bei einem Online-Kaufhaus registrieren, müssen Sie einige persönliche Angaben machen. DieBetreiber der Website haben natürlich ein großes Interesse daran, dass das For-mular vollständig ausgefüllt wird. Das ka nn serverseitig gelöst werden, was denVorteil hat, dass die Überprüfung auch mit wirklich jedem Browser funktioniert.Die Nachteile liegen aber gleichzeitig auf der Hand. Nicht immer steht dem Pro-grammierer eine serverseitige Programmiersprachen-Unterstützung zur Verfü-gung. Der Programmieraufwand ist hierbei recht hoch, denn es soll ja nicht nureine Fehlermeldung ausgegeben werden, sondern wenn möglich das Formularauch noch mit den zuvor eingegebenen Daten dargestellt werden. Es wäre schonsehr ärgerlich für den Benutzer, wenn er ein Formular fast vollständig ausgefüllthätte und aufgrund einer einzigen Auslassung das komplette Formular noch ein-mal ausfüllen müsste.

Mit JavaScript kann auch auf der Clientseite die Überprüfung auf Vollständigkeitdurchgeführt werden. Damit wird keine neue Seite in den Browser geladen. Die


204

Formulare12

Formulardaten bleiben unangetastet, und der Benutzer kann sofort den Fehlerkorrigieren.

Im Folgenden finden Sie ein HTML-Formular, das ausschließlich aus Pflichtfel-dern bestehen soll. Nach dem Anklicken der Absenden-Schaltfläche soll dieFunktion pruefen() aufgerufen werden, die überprüft, ob das Formular vollstän-dig ausgefüllt worden ist, und gegebenenfalls eine Fehlermeldung ausgibt. DieseFunktion wird in diesem Kapitel schri ttweise erarbeitet. Vorab jedoch gibt esnoch ein paar Hinweise, wie diese Funk tion in das HTML-Dokument eingebun-den wird.

Das <form>-Tag hat den Event-Handler onsubmit, der ausgelöst wird, sobald dasFormular abgeschickt wird. Wie schon be i anderen Beispielen in diesem Buchkann hier ein altbekannter Trick ange wandt werden. Beim Versenden des For-mulars kollidieren wieder die HTML-Konsequenzen des Versendens (nämlich dasAufrufen einer anderen Seite) und die mit onsubmit zugeordneten JavaScript-Aktionen. Endet der onsubmit-Event-Handler jedoch auf return false, so wirddie HTML-Aktion (das Aufrufen der anderen Seite) nicht ausgeführt; bei returntrue wird sie ausgeführt. Also hat das <form>-Tag in diesem Beispiel folgendenAufbau:

<form action="skript.php" name="Fragebogen"onsubmit="return pruefen();">

Die Funktion pruefen() gibt nur dann true zurück, wenn das Formular vollstän-dig ausgefüllt worden ist, ansonsten gibt sie false zurück. Somit ist sicherge-stellt, dass nur vollständige Formulare vers chickt werden – sofern der Browserdes Benutzers JavaScript unterstützt und der Benutzer es auch aktiviert hat.Ältere Browser oder solche mit ausgeschaltetem JavaScript ignorieren den Skript-teil komplett und versenden das Formular direkt.

<html><head><title>Formular-Überprüfung</title><script type="text/javascript"></script></head><body><h1>Anmeldeformular</h1><form action="skript.php" name="Fragebogen"onsubmit="return pruefen()">

205

Überprüfung auf Vollständigkeit 12.1

Vorname: <input type="text" name="Vorname" /><br />Nachname: <input type="text" name="Nachname" /><br />E-Mail-Adresse: <input type="text" name="Email" /><br /><input type="radio" name="Geschlecht" value="m" />männlich |

<input type="radio" name="Geschlecht" value="w" />weiblich<br />

Welche Bücher von Galileo Press besitzen Sie?<br /><input type="checkbox" name="Flash" /> Flash |<input type="checkbox" name="JavaScript"> JavaScript |<input type="checkbox" name="ActionScript">ActionScript<br />

Welches der Bücher hat das schönste Cover?<select name="Cover"><option>Bitte wählen</option><option value="Flash">Flash</option><option value="JavaScript">JavaScript</option><option value="ActionScript">ActionScript</option></select><br />

<input type="submit" value="Absenden" /><input type="reset" value="Formular löschen" /></form></body></html>

Abbildung 12.1 Das (noch) funktionslose Formular


206

Formulare12

12.1.1 Allgemeiner Aufbau

Alle Formulare werden im Array document.forms gespeichert. Auf dieses Formu-lar kann über den Array-Index zugegriffen werden, wobei die Formulare in derReihenfolge im Array stehen, in der sie im HTML-Dokument vorkommen. DieNummerierung beginnt beim Index 0. In unserem Beispiel benutzen wir alsodocument.forms[0].

Alternativ dazu kann man auch über das name-Attribut des <form>-Tags auf dasFormular zugreifen, im Beispiel also mit document.Fragebogen. Sollte das name-Attribut Spezialzeichen wie etwa das Leerzeichen enthalten (beispielsweise "MeinFragebogen"), so kann noch mit document.forms["Mein Fragebogen"] daraufzugegriffen werden. Im Allgemeinen ab er sollten Sie den Array-Index verwen-den. Da die meisten HTML-Seiten maximal ein Formular enthalten, reicht eindocument.forms[0], und es ist auch nicht sonderlich unleserlich. Bei anderenArrays, die viele Elemente besitzen, ist dieses Vorgehen sicherlich unpraktikabel.Dritte Möglichkeit: Sie vergeben dem Formular eine ID ( id-Attribut) und ver-wenden document.getElementByID(). Allerdings gibt es gerade bei Formularenund Formularelementen etwas Wichtiges zu bedenken: Nur Daten aus denjeni-gen Formularelementen, die ein name-Attribut besitzen, werden beim Formular-versand an den Server geschickt. Desweg en setzt man gerade bei Formularele-menten eher seltener auf DOM, sondern stattdessen auf den »klassischen«Zugriff. Und deshalb erfolgt auch der Formularzugriff in der Regel über das Arraydocument.forms.

Das Formular speichert all seine Elemente (also alle HTML-Formularelemente indiesem Formular) im Array elements. Auch hier kann man auf die einzelnen Ele-mente über den Array-Index zugreifen; im obigen Beispiel greift man auf daserste Texteingabefeld mit document.forms[0].elements[0] zu. Alternativ kön-nen Sie auch wieder das name-Attribut verwenden, in diesem Falldocument.forms[0].Vorname. Die meisten Formularelemente haben eine Eigen-schaft value, die in der Regel die Eingabe des Benutzers angibt. Details hierzufinden Sie in den entsprechenden Abschnitten.

Zur Vereinfachung wird folgende Zeile am Anfang der Funktion pruefen() ein-geführt:

var f = document.Fragebogen;

Hiermit spart man sich ein wenig Tipparbeit; statt document.Fragebogen.

elements[0] reicht jetzt f.elements[0].


207


12.1.2 Texteingabefelder

Unter Texteingabefeldern verstehen wir in diesem Zusammenhang Formularfel-der, die folgendermaßen in HTML abgebildet werden:

� <input type="text" /> – einzeiliges Texteingabefeld

� <input type="password" /> – einzeiliges Passwortfeld

� <input type="hidden" /> – unsichtbares Formularfeld

� <textarea> – mehrzeiliges Texteingabefeld

In diesem Fall gestaltet sich die Vollständigkeitsabfrage sehr einfach. Wie obenschon ausgeführt wurde, heißt die Eige nschaft, die den Eingabewert im Text-eingabefeld enthält, value. Der folgende JavaScript-Code kann also in die Funk-tion pruefen() eingefügt werden. Er funktioniert folgendermaßen: Ist ein Text-eingabefeld nicht ausgefüllt, wird die Funktion mit return false verlassen, wasdann zur Folge hat, dass das Formular nicht versandt wird.

if (f.Vorname.value == "") {return false;

}if (f.Nachname.value == "") {

return false;}if (f.Email.value == "") {

return false;}

Auf eine Besonderheit bei Texteingabef eldern muss ich noch hinweisen: WennSie mehrere Texteingabefelder mit identischen name-Attributen haben, werdendie Werte in einem Array gespeichert. En thielte das Beispielformular von obenalso noch ein Texteingabefeld namens Vorname, könnte man auf das erste dieserFelder mit f.Vorname[0] zugreifen und auf das zweite Feld mit f.Vorname[1].Aus Gründen der Einfachheit (und zur Verringerung der Fehlermöglichkeiten)ein einfacher Tipp: Verwenden Sie stets eindeutige Bezeichnungen für Ihre For-mularelemente.

12.1.3 Radiobuttons

Aus einer Gruppe Radiobuttons kann immer nur einer ausgewählt werden. EineGruppe von Radiobuttons ist durch ein identisches name-Attribut gekennzeich-net. Leider greift man im obigen Beispiel mit f.Geschlecht auf die Gruppe vonRadiobuttons mit dem name-Attribut Geschlecht zu. Die Eigenschaft value lieferthier nicht das richtige Ergebnis: Es mu ss auf einen individuellen Radiobuttonzugegriffen werden. Das wäre natürlich über das elements-Array möglich, aber


208

Formulare12

es gibt einen eleganteren Weg. Analog zu Texteingabefeldern werden gleichna-mige Radiobuttons auch in einem A rray abgespeichert. Mit der folgendenSchleife werden alle Radiobuttons (in diesem Falle zwei) durchlaufen, und eswird überprüft, ob der Button ausgewählt ist (boolesche Eigenschaft checked).Wenn beide nicht ausgewählt sind, wird pruefen() mit return false verlassen.

var geschlecht_ok = false;for (var i=0; i<f.Geschlecht.length; i++) {

if (f.Geschlecht[i].checked) {geschlecht_ok = true;

}}if (!geschlecht_ok) {

return false;}

Alternativ dazu können Sie eine Variante ohne Schleife benutzen, die etwas kür-zer ist:

if (!(f.Geschlecht[0].checked || f.Geschlecht[1].checked)) {return false;

}

12.1.4 Checkboxen

Checkboxen können wie Radiobuttons ausgewählt werden, wobei sich die grafi-sche Darstellung leicht unterscheidet: Checkboxen werden angekreuzt. DaCheckboxen nicht gruppiert sind, also jede Checkbox für sich ausgewählt werdenkann (oder auch nicht), ist die Überprüfung, ob sie ausgefüllt wurden, nicht wei-ter schwer. Wieder gibt es eine boolesche Eigenschaft checked, die angibt, obeine Checkbox angekreuzt ist oder ni cht. Das Formular ist dann unvollständigausgefüllt, wenn keine der drei Checkboxen angekreuzt worden ist.

if (!f.Flash.checked && !f.JavaScript.checked &&!f.ActionScript.checked) {

return false;}

12.1.5 Auswahllisten

Eine HTML-Auswahlliste wird mit dem Tag <select> eingeleitet. Es ist sinnvoll,diesem Tag ein aussagekräftiges name-Attribut zu geben. Die einzelnen Elementewerden durch das HTML-Tag <option> dargestellt. Dieses Tag hat standardmäßigkein name-Attribut; wenn man also dort Informationen unterbringen will, sollteman das value-Attribut besetzen.


209


Beim Einsatz von JavaScript kann auf die Auswahlliste über das name-Attribut des<select>-Tags zugegriffen werden. Die einzelnen Optionen sind im Arrayoptions abgespeichert. Jede Option hat die boolesche Eigenschaft selected, dieangibt, ob die entsprechende Option gera de ausgewählt ist. Mit der Eigenschaftvalue kann auf das value-Attribut der Option zugegriffen werden.

Im Fragebogen-Beispiel kommt es darauf an, dass nicht die erste Option ausge-wählt wird, denn die heißt "Bitte wählen". Ein erster Versuch der Abfrage lautetalso folgendermaßen:

if (f.Cover.options[0].selected) {return false;

}

Wenn festgestellt werden soll, welche der Optionen gerade ausgewählt ist,könnte man auf die Idee kommen, das options-Array mit einer Schleife zudurchlaufen, um so den Index der ausgewählten Option herauszubekommen:

for (var i=0; i<f.Cover.options.length; i++) {if (f.Cover.options[i].selected) {

var Auswahl = i;}

}if (Auswahl == 0) {

return false;}

Diese Arbeit kann man sich jedoch sparen: Auswahllisten haben die EigenschaftselectedIndex, die den Array-Index der ausgewählten Option angibt. DieAbfrage kann also folgendermaßen vereinfacht werden:

if (f.Cover.selectedIndex==0) {return false;

}

Es gibt auch Auswahllisten, bei denen mehr als eine Option ausgewählt werdenkann. Diese sind in HTML mit <select multiple> abgebildet. In diesem Fall ent-hält selectedIndex den Index der obersten ausgewählten Option. Wenn Siedagegen auf alle ausgewählten Listenelemente zugreifen möchten oder wenn esmehrere »leere« Listenelemente gibt (etwa Einträge mit Trennlinien oder ohneText), müssen Sie eine for-Schleife nach obigem Muster verwenden.


210

Formulare12

12.1.6 Fehlermeldung ausgeben

Hier wird noch einmal der komplette Code für die Vollständigkeitsüberprüfungdes Formulars wiedergegeben. Es wu rden Kommandos hinzugefügt, die eineWarnmeldung ausgeben, sofern das Formular unvollständig ausgefüllt wordenist.

function pruefen(){var f = document.forms[0];var fehler = ""; //enthält die Bezeichnungen

//der nicht ausgefüllten Felder// *** Überprüfung auf vollständige Ausfüllungif (f.Vorname.value == "") {

fehler += "Vorname ";}if (f.Nachname.value == "") {

fehler += "Nachname ";}if (f.Email.value == "") {

fehler += "E-Mail ";}if (!(f.Geschlecht[0].checked || f.Geschlecht[1].checked)) {

fehler += "Geschlecht ";}if (!f.Flash.checked && !f.JavaScript.checked &&!f.ActionScript.checked) {

fehler += "Lieblingsbuch ";}if (f.Cover.selectedIndex == 0) {

fehler += "Cover ";}// *** Gegebenenfalls Fehlermeldungif (fehler != "") {

var fehlertext = "Die folgenden Felder wurden nichtvollständig ausgefüllt:\n";

fehlertext += fehler;alert(fehlertext);return false;

}return true;

}


211


12.1.7 Konstruktive Vorschläge

Anstatt bei Texteingabefeldern eine Fehlermeldung auszugeben, kann man auchdie Methode window.prompt() benutzen, um den Benutzer direkt zu einer Text-eingabe zu zwingen. In Kapitel 13 wird window.prompt() noch näher erläutert.Man muss in diesem Beispiel noch zusätzlich beachten, dass man die value-Eigenschaft der Texteingabefelder auch auf den eingegebenen Wert setzt, damitdiese Daten auch an das serverseitige Skript übergeben werden können.

Die Funktion pruefen() muss also folgendermaßen abgeändert werden:

function pruefen() {var f = document.forms[0];var fehler = ""; //enthält die Bezeichnungen

//der nicht ausgefüllten Felder// *** Überprüfung auf vollständige Ausfüllungwhile (f.Vorname.value == "") {

var vorname = prompt("Bitte geben Sie IhrenVornamen ein!");if (vorname) {

f.Vorname.value = vorname;}

}while (f.Nachname.value == "") {

var nachname = prompt("Bitte geben Sie IhrenNachnamen ein!");

Abbildung 12.2 Hinweis auf nicht ausgefüllte Felder


212

Formulare12

if (nachname) {f.Nachname.value = nachname;

}}while (f.Email.value == "") {

var email = prompt("Bitte geben Sie Ihre E-Mail-Adresse ein!");if (email) {

f.Email.value = email;}

}if (!(f.Geschlecht[0].checked || f.Geschlecht[1].checked)) {

fehler += "Geschlecht ";}if (!f.Flash.checked && !f.JavaScript.checked &&!f.ActionScript.checked) {

fehler += "Lieblingsbuch ";}

if (f.Cover.selectedIndex==0) {fehler += "Cover ";

}// *** Gegebenenfalls Fehlermeldungif (fehler != "") {

var fehlertext = "Die folgenden Felder wurdennicht vollständig ausgefüllt:\n";fehlertext += fehler;alert(fehlertext);return false;

}return true;

}

Der Benutzer steckt in einer Endlosschleife fest und wird gezwungen, die Anga-ben zu machen, ansonsten geht es nicht weiter. So ein Abfragefenster wirkt aller-dings relativ aufdringlich, und wenn ein Benutzer partout nichts angeben will,dann macht er eben falsche Angaben. Sie werden mit diesen Mitteln niemandendazu bringen, die Wahrheit zu sagen, we nn er nichts über sich preisgeben will.Vergisst aber jemand, ein Mussfeld auszufüllen, bieten Sie ihm eine bequemeMöglichkeit an, dies nachzuholen.


213

Automatische Überprüfung 12.2

Testen Sie Ihren Code sehr gründlich. F olgender Tippfehler führt dazu, dass derBenutzer in einer Endlosschleife festsitzt, die er nicht mehr verlassen kann:

while (f.Email.value=="") {var email = prompt("Bitte geben Sie Ihre E-Mail-Adresse ein!")if (email) {

f.Nachname.value = email;}

}

Dieser Fehler schleicht sich bei der Verwendung von Copy&Paste sehr schnell ein(raten Sie, woher ich das weiß ), und er ruiniert das Skript. Nicht das Email-Feldwird aktualisiert, sondern das Nachname-Feld. Außerdem bleibt das Email-Feldimmer leer, egal was der Benutzer in das Abfragefenster eingibt. Es geht also andieser Stelle nicht weiter, und der Benu tzer kommt so schnell nicht wieder aufIhre Seiten.

12.2 Automatische Überprüfung

Das Skript zur Überprüfung auf Vollständ igkeit muss für jedes Formular neugeschrieben werden. Zwar können Sie Elemente wiederverwenden, aber etwaszusätzliche Arbeit ist immer nötig. Es ist aber möglich, die Überprüfung auch zuautomatisieren. Jedes Formularelement besitzt nämlich die Eigenschaft type, dieden Typ des Elements – beispielsweise Texteingabefeld, Radiobutton oder Check-box – angibt. Man kann also den Ansatz verfolgen, in einer Schleife alle Formu-

Abbildung 12.3 Nicht ausgefüllte Texteingabefelder können direkt korrigiert werden.


214

Formulare12

larelemente durchzugehen und zu überprüfen, ob sie ausgefüllt sind. Die Fehler-meldungen sind dann vielleicht nicht mehr so individuell wie im vorherigenBeispiel, aber Sie ersparen sich eine Menge Tipp- und Denkarbeit.

Im Folgenden sehen Sie das Grundgerüst für die »automatische« Version derFunktion pruefen().

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

12.2.1 Texteingabefelder

Der Wert der type-Eigenschaft eines Texteingabefelds ist bei einem einzeiligenTexteingabefeld "text". Er ist "password" bei einem Passwortfeld sowie"textarea" bei einem mehrzeiligen Eingabefeld. In diesem Fall wird die value-Eigenschaft des Formularelements überprüft. (Zur Erinnerung: Es steht in derVariablen i.) Falls keine Eingabe erfolgt, wird das name-Attribut des Eingabefelds(es steht in der Eigenschaft name) dem Fehlerstring hinzugefügt, um wenigstenseine einigermaßen aussagekräftige Fehlermeldung ausgeben zu können.

if (i.type=="text" || i.type=="password" ||i.type=="textarea") {

if (i.value == "") {fehler += i.name + "\n";

}}

12.2.2 Radiobuttons

Für Radiobuttons (die Sie an der type-Eigenschaft "radio" erkennen) muss mansich eine besondere Strategie überlegen . Jeder Radiobutton ist ein eigenes For-mularelement und muss nicht unbedingt ausgewählt sein. Auf die folgende Artund Weise kommt man dennoch zum Ziel:

� Wenn Sie feststellen, dass das aktuell betrachtete Formularelement ein Radio-button ist, wird das name-Attribut ausgelesen (Eigenschaft name). Dann wird

215


das dazugehörige Array von Radiobuttons daraufhin durchsucht, ob zumin-dest einer davon ausgewählt ist. Falls nicht, wird der Fehlerstring um dasname-Attribut der Gruppe der Radiobuttons erweitert.

� Jeder Radiobutton wird als einzelnes Formularelement behandelt. Ist also voneiner Gruppe aus fünf Radiobuttons keiner ausgewählt, werden bei der Über-prüfung der fünf Radiobuttons insgesamt fünfmal Mängel gefunden – eswürde also fünf Fehlermeldungen gebe n. Aus diesem Grund wird eine wei-tere Variable, radiocheck, eingeführt (und zwar außerhalb der for-Schleife).In radiocheck werden die name-Attribute bereits geprüfter Radio-Buttons,durch Leerzeichen getrennt, eingetragen. Bevor ein Radiobutton überprüftwird, muss zuerst nachgeschaut werden, ob schon einmal ein anderer Radio-button aus dieser Gruppe betrachtet wo rden ist. Daraus folgt auch eine Ein-schränkung für das Skript: Die name-Attribute der Radiobuttons dürfen keineLeerzeichen enthalten – aber das sollte sich von selbst verstehen; ich verweiseauf die Einleitung.1

if (i.type=="radio") {if (radiocheck.indexOf(i.name + " "<0) {

radiocheck += i.name + " ";eval("var radiogroup = f." + i.name)var ok = false;for (var k=0; k<radiogroup.length; k++) {

if (radiogroup[k].checked) {ok = true;

}}if (!ok) {

fehler += i.name + "\n";}

}}

12.2.3 Checkboxen

Bei Checkboxen ist eine allgemeine Über prüfung schlecht möglich. Es ist demBenutzer ja freigestellt, ob er eine Checkbox ankreuzt oder nicht. Jede Checkboxist im Grunde genommen eine Ja/Nein-Frage, und somit bedeutet kein Kreuzauch eine Antwort, nämlich Nein. Aus diesem Grund werden Checkboxen (dietype-Eigenschaft heißt übrigens "checkbox") nicht überprüft. Ist das dennoch

1 Diese Probleme könnten Sie natürlich vermeiden, wenn radiocheck ein Array wäre; aller-dings erfordert dann die Über prüfung, ob sich in dem Array bereits ein bestimmtes Ele-ment befindet, einen extra Programmieraufwand.


216

Formulare12

erforderlich, hilft einfach ein Blick auf die Eigenschaft checked: Ist diese false,ist die Checkbox nicht ausgewählt worden. Im endgültigen Skript finden Sie denCode für diese Überprüfung in einkommentierter Form.

12.2.4 Auswahllisten

Auswahllisten erkennt man daran, dass die type-Eigenschaft des Formularele-ments entweder den Wert "select-one" oder den Wert "select-multiple" hat,je nachdem, ob der HTML-Parameter multiple gesetzt worden ist oder nicht. DieEigenschaft selectedIndex muss überprüft werden. Sie muss ungleich 0 sein.Wir nehmen einfach einmal an, dass die oberste Option einer Auswahllisteimmer »Bitte wählen Sie« oder ähnlich lautet.

if (i.type=="select-one" || i.type=="select-multiple") {if (i.selectedIndex == 0) {


}

12.2.5 Zusammenfassung

Im Folgenden finden Sie noch einmal den gesamten Code für dieses Beispiel. Mitihm sind Sie in der Lage, mit JavaScript jedes Formular daraufhin zu überprüfen,ob es vollständig ausgefüllt worden ist. In der Praxis kommt es aber oft vor, dassnicht alle Felder Pflichtfelder sind. Viele Benutzer sind auch sehr zurückhaltend,wenn sie allzu persönliche Daten wie etwa Geburtsdatum, E-Mail-Adresse, Tele-fonnummer oder gar ihr Einkommen angeben müssen. Überlegen Sie sich alsoganz genau, ob Sie wirklich alle Daten benötigen.

<html><head><title>Formularüberprüfung</title><script type="text/javascript"><!--function pruefen(f) {

var fehler = ""; //Variable für die Fehlermeldungvar radiocheck = ""; //Variable für überprüfte Radiobuttonsvar i; //Enthält das jeweilige Formularelementfor (var j=0; j<f.elements.length; j++) {

i = f.elements[j];//Texteingabefelderif (i.type=="text" || i.type=="password" ||i.type=="textarea") {

if (i.value == "") {fehler += i.name + "\n";

217


}}//Radiobuttonsif (i.type=="radio") {

if (radiocheck.indexOf(i.name+ " ") < 0) {radiocheck += i.name + " ";eval("var radiogroup = f." + i.name);var ok = false;for (var k=0; k<radiogroup.length; k++) {

if (radiogroup[k].checked) {ok = true;

}}if (!ok) {


}}

//Auswahllistenif (i.type=="select-one" || i.type=="select-multiple") {

if (i.selectedIndex == 0) {fehler += i.name + "\n";

}}

//Checkboxen (einkommentiert)//if (i.type=="checkbox") {// if (i.checked == false) {// fehler += i.name + "\n";// }//}

}//Fehlermeldungif (fehler != "") {

alert("Bitte füllen Sie die folgenden Felder aus:\n" + fehler);return false;

}return true;

}//--></script></head><body>


218

Formulare12

<form action="" onsubmit="return pruefen(this);">... Formularfelder kommen hierhin ...</form></body></html>

12.3 Anwendungsmöglichkeiten für Formulare

Neben einer einfachen Überprüfung von Benutzereingaben auf Vollständigkeitkönnen Formulare auch noch anderweitig verwendet werden. In diesemAbschnitt werden einige Anwendungsmöglichkeiten vorgestellt, die Sie vielleichtschon in ähnlicher Form im World Wide Web gesehen haben. Sie können siedirekt auf Ihrer Website einsetzen.

12.3.1 Währungsrechner

Der Kurs D-Mark/Euro ist ja leider nicht exakt 2:1, sodass ein Umrechner in Zei-ten des »Teuro« immer noch ein praktisches Hilfsmittel ist (Marke: »wie billig frü-her doch alles war«). Natürlich kann man jede beliebige Währung nehmen, aberdas Umtauschverhältnis DM zu Euro ist konstant, was die Sache beim gedankli-chen Testen schon etwas vereinfacht.

Das Skript wird folgendermaßen aufgebaut:

� In einem Texteingabefeld gibt der Benutzer den Betrag in einer Währung ein.

� In welche Richtung umgerechnet werden soll, also D-Mark in Euro oderumgekehrt, wird mit Radiobuttons ausgewählt.

� Die Umrechnung wird gestartet, indem eine Schaltfläche angeklickt wird.

� Der umgerechnete Betrag wird in einem neuen Texteingabefeld angezeigt.

Die größte Schwierigkeit besteht darin, die Eingaben des Benutzers eventuellumzuformen. JavaScript verwendet das amerikanische Zahlenformat, und daskennt nur einen Dezimalpunkt, kein Dezimalkomma. Also wird das erste Kommadurch einen Punkt ersetzt. Die Umwandlung der Zeichenkette in eine Dezimal-zahl geschieht automatisch durch die Multiplikation mit dem bzw. Divisiondurch den amtlichen Umrechnungskurs. Andernfalls könnten Sie die Funktioneneval() oder parseFloat() verwenden.

<html><head><title>Euro-Rechner</title><script type="text/javascript"><!--

219

Anwendungsmöglichkeiten für Formulare 12.3

function umrechnen(f) { //f ist eine Referenz//auf das Formular

var betrag = f.betrag.value;if (betrag.indexOf(",")!=-1) {

betrag = betrag.substring(0, betrag.indexOf(",")) + "."+ betrag.substring(betrag.indexOf(",")+1,

betrag.length);}if (f.umrechnung[0].checked) {

f.ausgabe.value = betrag / 1.95583;} else {

f.ausgabe.value = 1.95583 * betrag;}

}//--></script></head><body><form action=""><input type="text" name="betrag" /><br /><input type="radio" name="umrechnung" value="DMEUR"checked="checked" /> DM nach Euro | <input type="radio"name="umrechnung" value="EURDM" /> Euro nach DM<br /><input type="button" value="Umrechnen!"onclick="umrechnen(this.form)" /><input type="text" name="ausgabe" /></form></body></html>

Beachten Sie bei obigem Code den Aufruf umrechnen(this.form). Innerhalbjedes Event-Handlers eines Formularelements bezieht sich this auf das entspre-chende Formularelement. Nun haben alle Formularelemente praktischerweise

Abbildung 12.4 Der Währungsrechner in Aktion


220

Formulare12

eine Eigenschaft form, die eine Referenz auf das dazugehörige Formular darstellt.Man kann also mit this.form das Formular als Parameter direkt an die Funktionübergeben.

12.3.2 Währungsrechner, Teil 2

Der Währungsrechner lässt sich mit relativ wenig Aufwand so erweitern, dassauch der Euro-Kurs anderer Währungen ermittelt werden kann. Insbesonderebei international ausgerichteten Webseiten ist das ein netter Service. Die Ideedahinter ist folgende: Die verschiedenen Währungen stehen alle in einer Aus-wahlliste. Die beiden Radiobuttons sind mit »nach Euro« und »von Euro«beschriftet. Nach einem Klick auf die Schaltfläche wird zunächst das Umtausch-verhältnis zwischen Euro und der ausgewählten Währung ermittelt. DieserFaktor ist in einem Array abgespeichert worden, sodass der Wert vonselectedIndex der Auswahlliste direkt als Array-Index verwendet werden kann.Je nachdem, welcher Radiobutton angekl ickt worden ist, wird der eingegebeneBetrag entweder durch den Umrechnungsfaktor geteilt oder damit multipliziert.

<html><head><title>Euro-Rechner Teil 2</title><script type="text/javascript"></script></head>

221


<body><form action=""><input type="text" name="betrag" /><select name="Waehrung">

<option>DM</option><option>Franc</option><option>Lira</option>

</select><br><input type="radio" name="umrechnung" value="nachEUR"checked="checked" /> nach Euro | <input type="radio"name="umrechnung" value="vonEUR" /> von Euro<br /><input type="button" value="Umrechnen!"onclick="umrechnen(this.form)" /> <input type="text"name="ausgabe" /></form></body></html>

Natürlich können Sie das Beispiel auch umschreiben, sodass Sie mit dem Euro alsReferenzwährung zwischen zwei vers chiedenen Währungen umrechnen kön-nen. Wenn Sie andere Währungen mit aufnehmen, beispielsweise den US-Dol-lar, müssen Sie den Kurs möglichst häufig aktualisieren, da er sich permanentändert.

12.3.3 Formularfelder für die Textausgabe nutzen

Wenn man Nachrichten für den Benutzer ausgeben will, ist ein Fenster viawindow.alert() etwas aufdringlich, und auch das Schreiben in die Statuszeile hatseine Nachteile. Ein Texteingabefeld eignet sich hierfür jedoch wunderbar. Zwarsind auch hier die gestalterischen Möglichkeiten eingeschränkt, aber man mussdie Nachteile gegeneinander abwägen. Wie der Lese- und Schreibzugriff auf Text-eingabefelder vonstatten geht, haben Sie weiter oben in diesem Kapitel gesehen,das ist also kein Problem mehr.

Etwas ärgerlich ist es jedoch, wenn der Benutzer denkt, er müsse in dieses Text-eingabefeld etwas schreiben. Aus diesem Grund wäre es wünschenswert, wennman das Feld mit einem Schreibschutz (für den Benutzer) versehen könnte.Modernere Browser bieten dafür ein eigenes HTML-Attribut an, aber im Sinneeiner allgemein verträglichen Lösung muss man sich mit JavaScript behelfen.

Texteingabefelder kennen den Event-Handler onfocus, der genau dann aktivwird, wenn der Fokus auf dem Texteingabefeld landet (in der Regel sieht man,dass hineingeklickt wird und der Cursor blinkt). Das Gegenteil vom Erhalten des


222

Formulare12

Fokus heißt auf Englisch »to blur« (dt. »verschwimmen«, »undeutlich werden«),und jedes Texteingabefeld besitzt eine Methode namens blur(), die den Fokusentfernt. Durch folgende Zeile wird der Fokus also genau dann von einem Feldweggenommen, wenn es angeklickt wird. Der Benutzer ist also nicht in der Lage,dem Feld permanent den Fokus zu geben und Eingaben zu tätigen.

<input type="text" onfocus="this.blur();" />

Beachten Sie unbedingt die Reihenfolge! Das folgende Kommando würde dafürsorgen, dass ein Feld immer den Fokus erhält, und somit eine weitere Navigationoder Benutzung der Website verhinde rn. Dem Benutzer würde kaum etwasanderes übrig bleiben, als seinen Browser zu schließen.

<input type="text" onblur="this.focus();" />

Seien Sie ebenfalls vorsichtig, wenn Si e modale Fenster in Verbindung mitonfocus verwenden. Wenn sich ein modales Fenster öffnet, verliert das Textein-gabefeld natürlich den Fokus. Es erhält ihn aber wieder, sobald das modale Fens-ter wieder geschlossen wird. Der folgende Code zwingt den Benutzer wahr-scheinlich dazu, den Browser über das Sy stem »abzuschießen«, da sich immerwieder ein modales Fenster öffnet:

<input type="text" onfocus="windows.alert('Die Geister, dieich rief ...');" />

12.3.4 Navigation mit Auswahllisten

Links benötigen viel Platz. Eine Auswahlliste ist da sehr sparsam, kann hinterdem sparsamen Äußeren jedoch eine Menge Inhalt verbergen. So ist es schon aufvielen Webseiten üblich, in einer Auswahlliste mehrere Navigationsziele anzuge-ben. Sobald Sie einen Punkt in der Auswahlliste anklicken, wird die entspre-chende Seite aufgerufen.

Dazu benötigt man einen Event-Handler, der dann aktiv wird, wenn sich dieaktuelle Auswahl der Auswahlliste ändert. Dieser Event-Handler heißt onchangeund wird von allen Browsern unterstützt.

Im unteren Beispiel wird wieder eine Re ferenz auf das aktuelle Formular an dieJavaScript-Funktion übergeben. Die URLs werden in einem Array gespeichert.

<html><head><title>Navigation mit JavaScript</title><script type="text/javascript"><!--var urls = new Array();urls[0] = ""; //leere URL für oberste Option

223


urls[1] = "http://www.firefox.com/";urls[2] = "http://www.microsoft.de/";urls[3] = "http://www.opera.com/";function laden(f) {

if (f.auswahl.selectedIndex > 0) {location.href = urls[f.auswahl.selectedIndex];

}}//--></script></head><body><h1>Navigation mit JavaScript</h1><form action=""><select name="auswahl" onchange="laden(this.form)">

<option>Bitte wählen</option><option>Firefox</option><option>Microsoft</option><option>Opera</option>

</select><input type="button" value="Laden" onclick="laden(this.form)" /></form></body></html>

Sie wissen ja bereits, wie Sie mit JavaScript allgemein auf Formulardaten zugrei-fen können. Im weiteren Verlauf dieses Kapitels werden einige fortgeschrittenereTechniken dargestellt, wie man Formulare sinnvoll nutzen kann. Neben neuenMöglichkeiten der Formularüberprüfung lern en Sie hier auch einige Tricks undKniffe, die in der täglichen Praxis von Nutzen sein können.

Abbildung 12.5 Die Dropdown-Navigation


224

Formulare12

12.4 Daten behalten

In Kapitel 16 werden Sie sehen, wie ma n Daten in Cookies speichern kann undsomit beispielsweise einen JavaScript-Warenkorb ohne Frames realisieren kann(siehe auch Kapitel 33). Der Nachteil wird dabei auch nicht verschwiegen: Wäh-rend die meisten Benutzer JavaScript ni cht deaktivieren, schalten viele User dieVerwendung von Cookies aus, natürlich auch bedingt durch Horrormeldungen inder Presse. Es gibt jedoch auch Möglic hkeiten, ohne Cookies Daten von einerHTML-Seite in die nächste zu übernehmen. Eine der Alternativen besteht in derVerwendung von Frames und in der Datenspeicherung in einem davon; hier seiauf Kapitel 14 verwiesen. In diesem Abschnitt wird eine weitere Möglichkeit vor-gestellt.

Ein virtueller Geschäftsmann will den Besuchern seiner Website Bücher in elek-tronischer Form zum Download anbieten. Er hat eine ganze Reihe davon, und sosoll der Benutzer in einem Formular die für ihn interessanten Titel auswählenkönnen. Nach dem Absenden des Formulars erhält er Links auf die ausgewähltenTitel. Bevor Sie das Beispiel anpassen und einsetzen, sollten Sie allerdings etwa-ige Copyright-Fragen klären.

12.4.1 Das Eingabeformular

Das Formular selbst ist schnell erstellt; als zusätzlicher Bonus werden dem Benut-zer zu jedem Programm Hintergrundinformationen zu jedem Produkt in einemneuen Fenster angezeigt. Wie das prinzipi ell funktioniert, wird in Kapitel 13gezeigt (Kurzfassung: window.open() öffnet ein neues Fenster). Beachten Sie imFolgenden, dass jeder Checkbox konsistent das value-Attribut "on" zugewiesenworden ist. Der Sinn dieser Maßnahme wird weiter unten klar.

Abbildung 12.6 Das HTML-Formular


225

Daten behalten 12.4

<html><head><title>Bücher-Download</title><script type="text/javascript"></script></head><body><h1>Wählen Sie hier Ihre Bücher aus!</h1><form method="get" action="download.html"><input type="checkbox" name="sommer" value="on" />

<a href="javascript:hilfe('sommer.html')">Sommernachtstraum</a><br />

<input type="checkbox" name="othello" value="on" /><a href="javascript:hilfe('othello.html')">Othello</a><br />

<input type="checkbox" name="venedig" value="on" /><a href="javascript:hilfe('venedig.html')">DerKaufmann von Venedig</a><br />

...<br /><input type="submit" value="Zum Download" /></form></body></html>

12.4.2 Die Ausgabeseite

Wenn Sie das Formular auf der vorangegangenen Seite genauer betrachtet haben,wird Ihnen folgende Zeile nicht entgangen sein:

<form method="get" action="download.html">

Zum einen ist der Wert des action-Attributs ungewöhnlich – seit wann übergibtman Formularwerte an eine HTML-Seite? Zum anderen ist method auf "get"gesetzt. Dazu ein kleiner Exkurs: Mit method wird die Versendemethode des For-mulars angegeben. Standardmäßig – also auch, wenn nichts angegeben wird –wird die Methode GET verwendet, doch häufiger ist POST. In letzterem Fall wer-den die Formulareingaben im Inhalt der Anforderung, also nach dem HTTP-Hea-der versandt. Die entsprechende HTTP-A nforderung des Webbrowsers an denWebserver sieht ungefähr folgendermaßen aus:

226

Formulare12

POST /download.html HTTP/1.1Content-type: application/x-www-form-urlencodedAccept: text/plainContent-length: 21

othello=on&venedig=on

Sie sehen, dass die einzelnen (angekreuzten) Checkboxen im Formularname=value übergeben und voneinander mit dem kaufmännischen Und ( &)getrennt werden.

Wenn wie im obigen Beispiel die Methode GET verwendet wird, sieht die Sacheanders aus: Hier werden nämlich die Formulardaten als Teil der URL übergeben.Es würde folgende Seite aufgerufen werden:

download.html?othello=on&venedig=on

Diese Daten kann man mit JavaScript abfragen. Wie Sie sich vielleicht erinnern,erhält man mit location.search den Teil der URL ab dem Fragezeichen, in die-sem Fall also ?othello=on&venedig=on. Mit JavaScript können diese Daten zer-legt werden, um die Ausgabeseite zu generieren.

Um die ganze Sache ein wenig zu vereinfachen, gehen wir davon aus, dass alleBücher im Verzeichnis download liegen, die Dateiendung .zip haben und dasssich der Teil vor der Endung aus dem name-Attribut der zugehörigen Checkboxergibt. Der Programmierer muss also nur noch folgende Aufgaben erledigen:

� Er muss die Eigenschaft location.search auslesen und das erste Zeichen (dasFragezeichen) abschneiden.

� Er muss die übrig bleibende Zeichenkette an den kaufmännischen Unds auf-teilen. Die einzelnen Teile haben dann den Aufbau buchname=on, und wennman das =on entfernt, hat man den Dateinamen ohne die Endung.

Man kann den Algorithmus ein wenig vereinfachen, indem man einfach nachdem nächsten Vorkommen von & sucht sowie nach dem nächsten Vorkommenvon =on und dann die Zeichenkette dazwischen betrachtet. Die Zeichenkette =onkann übrigens an keiner anderen Stelle (also zum Beispiel links vom Gleichheits-zeichen) in der URL erscheinen. Der Grun d dafür ist, dass Sonderzeichen in einURL-konformes, hexadezimales Format umgewandelt werden. Aus einem Leer-zeichen wird %20, und aus einem Gleichheitszeichen wird %3D. 3D ist nämlich diehexadezimale Darstellung der Dezimalzahl 62, und im ASCII-Zeichensatz hat dasGleichheitszeichen den Code 62. Der ASCII-Code des Leerzeichens ist 32, und diehexadezimale Darstellung ist 20. Die Umwandlung in dieses URL-Formatgeschieht automatisch; die Rückverwandlung erfolgt mit der JavaScript-Funktion


227

Daten behalten 12.4

unescape(). So liefert beispielsweise unescape("%3D") das Ergebnis "=" zurück.Die Umwandlung ist im Übrigen auch mit JavaScript möglich, escape("=") lie-fert "%3D".

Der Internet Explorer ab 5.5 bietet hierzu übrigens ein paar neue Funktionen an,die einen URI (Unified Ressource Identificator, eine Art Obermenge von URL)erzeugen können. Die Funktion encodeURI() wandelt den übergebenen Parame-ter in eine URL um, also liefert beispielsweise encodeURI("meineWebseite.

html#oben") als Ergebnis meine%20Webseite.html#oben zurück. Sie sehen hier,dass das Doppelkreuz als Abtrennungszei chen für einen HTML-Anker interpre-tiert worden ist, also insbesondere nicht in die hexadezimale Form %23 umge-wandelt wurde. Wenn Sie auch das möchten (beispielsweise, wenn Sie die obigeURL als Parameter an ein CGI-Skri pt übergeben möchten), müssen SieencodeURIComponent() verwenden. Dies liefert das gewünschte Ergebnis:encodeURIComponent("meineWebseite.html#oben") gibt meine%20Webseite.html%23oben zurück.

Die entsprechenden Funktionen, die eine codierte URL wieder entschlüsseln,heißen decodeURI() und decodeURIComponent(). Und wie erwartet gibtdecodeURI("meine%20Webseite.html#oben") als Ergebnis meineWebseite.

html#oben zurück, decodeURIComponent("meine%20Webseite.html%23oben")

liefert ebenfalls meine Webseite.html#oben.

Aus den viel zitierten Gründen der Abwärtskompatibilität müssen Sie jedochnoch eine ganze Weile auf den Einsatz dieser Funktionen verzichten, wenn Siemöglichst viele Browser unterstützen wollen.

Zurück zur Aufgabenstellung: Der folgende Code (zu speichern als down-load.html) liest die übergebenen Daten aus und generiert die Ausgabeseite.

<html><head><title>Download Seite 2</title><script type="text/javascript"><!--function tag(s) {

return("<" + s + ">");}function ausgabe() {

var ls = location.search;var txt = (ls.length>1) ? "Sie können die Bücher nunherunterladen" : "Keine Bücher ausgewählt";

document.write(txt + tag("br"));if (ls.length<=1) { //Funktion verlassen, falls

//nichts ausgewählt wurde

228

Formulare12

return false;}ls = "&" + ls.substring(1, ls.length);

//Fragezeichen entfernen, "&" vorne anhängenvar pos = 0; //aktuelle Suchposition inlocation.searchwhile (pos == 0 || ls.indexOf("&", pos) != –1) {

start = ls.indexOf("&", pos) + 1;ende = ls.indexOf("=on", pos);buch = unescape(ls.substring(start, ende));document.write(tag("a href='download/" + buch

+ ".zip'"));document.write(buch);document.write(tag("/a")+tag("br"));pos = ende + 2;

}}//--></script></head><body><h1>Bücher-Download</h1><script type="text/javascript"></script><noscript>Ihr Browser unterstützt kein JavaScript!</noscript></body></html>

Abbildung 12.7 Die Download-Seite

229

Dynamische Auswahllisten 12.5

12.5 Dynamische Auswahllisten

In Kapitel 15 werden Sie ein Beispiel mit einer grafischen Navigation finden.Dort gibt es mehrere Kategorien, die aufgrund einer Mausbewegung ausklappenund Unterpunkte freigeben. Dies lässt sich sehr platzsparend auch in einem For-mular realisieren. Es ist insbesondere möglich, via JavaScript einzelne Punkte inden Auswahllisten zu ändern, zu löschen und neue Punkte hinzuzufügen.

12.5.1 Ein erster Ansatz

Wie Sie wissen, werden die einzelnen Optionen einer Auswahlliste im Arrayoptions gespeichert. Jede einzelne dieser Optionen hat die Eigenschaft text, dieden im Browser angezeigten Text angibt.

Das ist an sich kein Problem, aber nicht alle Kategorien haben die gleiche Anzahlvon Unterpunkten. Da jedoch die einzelnen Optionen in einem Array gespei-chert werden, liegt es nahe, die Eigenschaft length dieses Arrays zu ändern.Einen ersten Ansatz für die Navigation finden Sie im folgenden Listing. Die linkeAuswahlliste enthält die Kategorien, und wenn eine davon ausgewählt wird(Event-Handler: onchange), werden die Untermenüpunkte in der rechten Aus-wahlliste angezeigt. Sobald dort ein Punkt ausgewählt wird, kann die entspre-chende Webseite geladen werden. Wie im Beispiel aus Kapitel 15 stehen diewichtigen Variablen – in diesem Falle die URLs und die Namen der einzelnenMenüpunkte – a m Anfang des Skripts in globalen Variablen, damit sie einfachangepasst werden können.

<html><head><title>Navigation mit Auswahllisten – Teil 1</title><script type="text/javascript"><!--// *** globale Variablenvar urls = new Array(

new Array(""),new Array("", "seite1-1.html", "seite1-2.html","seite1-3.html"),new Array("", "seite2-1.html", "seite2-2.html"),new Array("", "seite3-1.html", "seite3-2.html","seite3-3.html", "seite3-4.html")

);var beschriftung = new Array(

new Array("Bitte auswählen", ""),new Array("Bitte auswählen", "Punkt 1.1", "Punkt 1.2","Punkt 1.3"),

230

Formulare12

new Array("Bitte auswählen", "Punkt 2.1", "Punkt 2.2"),new Array("Bitte auswählen", "Punkt 3.1", "Punkt 3.2","Punkt 3.3", "Punkt 3.4")

);// *** Ende der globalen Variablenfunction kategorie_anzeigen(f) {

var kategorie = f.kategorien.selectedIndex;f.unterpunkte.options.length = urls[kategorie].length;for (var i=0; i<urls[kategorie].length; i++) {

f.unterpunkte.options[i].text =(beschriftung[kategorie])[i];

}}function seite_laden(f){

var kategorie = f.kategorien.selectedIndex;var unterpunkt = f.unterpunkte.selectedIndex;

}//--></script></head><body><h1>Navigation mit Auswahllisten</h1><form><select name="kategorien"onchange="kategorie_anzeigen(this.form);">

<option>Bitte auswählen</option><option>Kategorie 1</option><option>Kategorie 2</option><option>Kategorie 3</option>

</select><select name="unterpunkte"onchange="seite_laden(this.form);">

<option>Bitte auswählen</option></select></form></body></html>

Wenn Sie dieses Beispiel im Browser ausprobieren, werden Sie allerdings wahr-scheinlich einen kleinen Nachteil beobachten: Wenn Sie das zweite Auswahl-menü ausklappen wollen, werden Sie – bei manchen Browsern und Betriebssys-temen – interessante grafische Nebeneffek te feststellen (siehe Abbildung 12.9).Um diese Effekte zu vermeiden, muss das obige Skript etwas sauberer program-miert werden.


231

Dynamische Auswahllisten 12.5

12.5.2 Ein fortgeschrittener Ansatz

Um das Beispiel ganz sauber zu programmieren, sollte man zuerst alle Optionenin der Auswahlliste löschen und dann die Optionen hinzufügen. Für Menüoptio-nen gibt es einen eigenen Konstruktor, new Option ("Beschriftung", "value-Attribut").

Eine einzelne Option kann gelöscht we rden, indem das entsprechende Elementim Array options auf null gesetzt wird. Mit folgendem Kommando wird diezweite Option in einer Auswahlliste gelöscht:

document.forms[0].auswahlliste.options[1] = null;

Sie können sich den Aufwand jedoch sparen, wenn Sie die Eigenschaft length

des Arrays options auf 0 setzen. Dann können die Optionen erzeugt werden. DieEigenschaft length wird hierbei automatisch angepasst. Es genügt, wenn Sie dieFunktion kategorie_anzeigen() folgendermaßen abändern:

Abbildung 12.8 Die beiden Auswahllisten

Abbildung 12.9 Das Scrollen der rechten Auswahlliste ist (in alten Browsern) schwierig.


232

Formulare12

function kategorie_anzeigen(f) {var kategorie = f.kategorien.selectedIndex;f.unterpunkte.options.length = 0;for (var i=0; i<urls[kategorie].length; i++) {

f.unterpunkte.options[i] =new Option((beschriftung[kategorie])[i], "");

}}

Außerdem hilft es, pro forma in die linke Auswahlliste ein paar freie leere Feldereinzufügen; einige ältere Browser führen das Skript dann zuverlässiger aus. WieSie sehen, umgehen Sie so grafische Unfälle.

12.6 Überprüfungsfunktionen

In diesem Kapitel wurden Formulare auf Vollständigkeit überprüft. In der Praxisgibt es jedoch noch weitere Anforderun gen. Manche Eingabefelder verlangenbesondere Eingaben, beispielsweise Postleitzahlen, Telefonnummern oder Uhr-zeiten. In diesem Abschnitt werden einige Funktionen aus diesem Bereich entwi-ckelt.

12.6.1 Ganze Zahlenwerte

In JavaScript gibt es die Funktion isNaN(), die feststellt, ob ein Eingabewertkeine Zahl ist. Aus Gründen der Flexibilität könnte man aber auch auf die Ideekommen, diese Funktion selbst zu programmieren. Der Eingabewert wird dazuals Zeichenkette betrachtet, und bei jedem Zeichen wird überprüft, ob es eineZiffer von 0 bis 9 ist. Sollte das für alle Zeichen zutreffen, handelt es sich um eineZahl, ansonsten liegt keine Zahl vor. Wir werden eine derartige Funktion imnächsten Kapitel verwenden, hier kurz der Code als Vorgriff:

function isANumber(n) {var s = "" + n; //Umwandlung in eine Zeichenkettevar ziffern = "0123456789"; //Gültige Zeichenfor (var i=0; i<s.length; i++) {

if (ziffern.indexOf(s.charAt(i)) == –1) {//keine Ziffer

return false;}

}return true;

}


233

Überprüfungsfunktionen 12.6

Mit dieser Methode kann man beispielsw eise überprüfen, ob ein Eingabewerteine deutsche Postleitzahl darstellen könnte:

if (eingabe.length==5 && isANumber(eingabe))

Streng genommen sind aber nicht alle Po stleitzahlen natürliche Zahlen, so bei-spielsweise 01234. Das ist die Postleitzahl einiger Postfächer in Dresden, aberkeine natürliche Zahl, da sie mit 0 beginnt, was nicht sein darf (Ausnahme: dieNull selbst). Für streng numerische Eingaben (beispielsweise für ein Anzahl-Feldin einem Bestellformular) muss man die Funktion folgendermaßen umschreiben:

function isANumber2(n) {var s = "" + n; //Umwandlung in eine Zeichenkettevar ziffern = "0123456789"; //Gültige Zeichenif (s == "0") { //Bei "0"

return true;}if (s.charAt(0) == "0") { //Bei 0 am Anfang

return false;}for (var i=0; i<s.length; i++) {


return false;}

}return true;

}

Im dritten Schritt soll noch die zusätzliche Funktionalität implementiert werden,dass auch negative Zahlen erkannt we rden, beispielsweise »42«. Die Überprü-fung gestaltet sich jedoch sehr einfach. Ist das erste Zeichen ein Minus, wird eseinfach abgetrennt. Hinter dem Minuszei chen dürfen nur noch Ziffern stehen,also bleibt alles wie gehabt.

function isANumber3(n) {var s = "" + n; //Umwandlung in eine Zeichenkettevar ziffern = "0123456789": //Gültige Zeichenif (s.charAt(0) == "-") { //führendes Minus entfernen

s = s.substring(1, s.length);}if (s=="0") { //Bei "0"

return true;}if (s.charAt(0) == "0") { //Bei 0 am Anfang

return false;


234

Formulare12

}for (var i=0; i<s.length; i++) {


return false;}

}return true;

}

12.6.2 Dezimalzahlen

Das Überprüfen von Dezimalzahlen ist schon eine etwas anspruchsvollere Auf-gabe. Zum einen gibt es den Unterschied zwischen der deutschen und der ameri-kanischen Schreibweise: Während man in Deutschland den Ganzzahlanteil vomDezimalteil durch ein Komma trennt, ve rwendet man in Amerika einen Punkt.JavaScript benötigt für Rechnungen die amerikanische Notation, sodass als Aller-erstes in einer Überprüfungsfunktion alle Kommata durch Punkte ersetzt wer-den. Zum anderen darf in der vermein tlichen Dezimalzahl maximal ein Punkt(bzw. Komma) vorkommen.

function isAFract(n) {var s = "" + n; //Umwandlung in Stringwhile (s.indexOf(",") > –1) { //Kommata durch Punkte ersetzen

s = s.substring(0, s.indexOf(",")) + "." +s.substring(s.indexOf(",") + 1, s.length)

}var anzahl_punkt = 0; //Variable zum Zählen der Dezimalpunktefor (var i=0; i<s.length; i++) {

if (s.charAt(i) == ".") {anzahl_punkt++;

}}if (anzahl_punkt > 1) { //Mehr als ein Dezimalpunkt?

return false;}// *** Eigentliche Überprüfung nach obigem Muster// *** Neu: Der Dezimalpunkt ist ein erlaubtes Zeichenvar ziffern = ".0123456789"; //Gültige Zeichenif (s.charAt(0) == "-") { //Führendes Minus entfernen

s = s.substring(1, s.length);}if (s == "0") { //Bei "0"

return true;


235

Überprüfungsfunktionen 12.6

}if (s.charAt(0) == "0" && s.charAt(1) != ".") {

//Bei 0 am Anfang ohne folgenden Punktreturn false,

}for (var i=0; i<s.length; i++) {

if (ziffern.indexOf(s.charAt(i)) == –1) {//Keine Ziffer

return false;}

}return true;

}

12.6.3 Telefonnummern

Es gibt viele Möglichkeiten, eine Tele fonnummer zu schreiben. Eine Telefon-nummer mit der Vorwahl 0123 und der Rufnummer 456789 kann beispielsweisefolgendermaßen geschrieben werden:

� (0123) 456789

� (01 23) 45 67-89

� 01234/456789

� +49[0]123-456789

Zwar können Sie für jeden dieser Fälle eine eigene Überprüfungsfunktion schrei-ben, aber es ist effizienter, einfach eine Liste der wahrscheinlich vorkommendenZeichen zu erstellen und darauf zu überprüfen. Eine mögliche Validierungsfunk-tion kann dann so aussehen:

function isAPhoneNumber(n) {var s = "" + n; //Umwandlung in eine Zeichenkettevar zeichen = "0123456789+-()[]/ "; //Gültige Zeichenfor (var i=0; i<s.length; i++) {

if (zeichen.indexOf(s.charAt(i)) == –1) {//kein gültiges Zeichenreturn false;

}}return true;

}


236

Formulare12

12.6.4 E-Mail-Adressen

Die Überprüfung von E-Mail-Adressen ist eine klassische Anwendung im Web –aber meiner Meinung nach etwas überbewertet: Allerorten findet man mehroder minder komplexe Überprüfungsfunktionen für E-Mail-Adressen, doch diemeisten haben einige erhebliche Nachte ile: Oftmals nämlich werden gültigeE-Mail-Adressen abgewiesen, wenn sie se ltene, aber gültige Zeichen enthalten.»Klassiker« sind beispielsweise das Plus -Zeichen im Teil vor dem Klammeraffenoder seit einiger Zeit Umlaute und andere Sonderzeichen im Domainnamen.

Absichtliche Falscheingaben eines Nutzers können Sie eh nicht abfangen; unab-sichtliche dagegen häufig schon. Prüfen Sie deswegen nur das Nötigste. Wie wärees etwa, wenn Sie bei Mailadressen lediglich nachsehen, ob es darin einen Klam-meraffen und nach diesem irgendwo einen Punkt gibt?

function isEmail(s) {var klammeraffe = s.indexOf("@");if (klammeraffe < 1) {

return false;} else {

var punkt = s.substring(klammeraffe).indexOf(".");if (punkt < 2) {

return false;} else {

return true;}

}}

12.6.5 In Zahlenwerte umwandeln

Wenn man mit Formularen rechnet, ist es oft nicht nur wichtig, Formulareinga-ben auf numerische Werte zu überprüf en, sondern auch, diese numerischenWerte zu erhalten. Zwar gibt es die Funktionen parseFloat ("Zeichenkette")für Dezimalzahlen und parseInt("Zeichenkette") für ganze Zahlen, aber dieseliefern gegebenenfalls ein NaN-Objekt zurück: Not A Number. Zur Überprüfungdes Rückgabewerts von parseFloat() und parseInt() würde man die FunktionisNaN() benötigen, und diese hat ja die eingangs erläuterten Nachteile. Außer-dem funktioniert parseFloat() nur mit amerikanisch formatierten Eingabewer-ten, also mit einem Dezimalpunkt statt einem Dezimalkomma. Im Folgenden solleine neue Funktion programmiert werden, die der Funktion eval() ähnelt,einen Eingabewert überprüft und einen numerischen Wert zurückgibt. Ist derEingabewert kein korrekt formatierter Zahlenwert, so wird 0 zurückgegeben.Das hat den Vorteil, dass mit Formularen sehr bequem gerechnet werden kann,


237

Reguläre Ausdrücke 12.7

da hier oft multipliziert wird (etwa Stückzahl mal Preis). Ist ein Eingabewert eineleere Zeichenkette oder allgemein keine Zahl, so wird 0 zurückgegeben, und dasErgebnis der Multiplikation ist auch 0.

Die im Folgenden aufgeführte Funktion benutzt eine bereits zuvor entwickelteFunktion, sodass Sie auf eine konsistente Namensgebung achten müssen.

function smartEval(n) {var s = "" + n; //Umwandlung in eine Zeichenkettefor (var i=0; i<s.length; i++) { //Kommata in Zahlen

if (s.charAt(i) == ",") {s = s.substring(0, i) + "." + s.substring(

i+1, s.length);}

}if (isAFrac(s)) {

return 1*s; //Umwandlung in einen Zahlenwert} else {

return 0;}

}

12.7 Reguläre Ausdrücke

Die Programmiersprache Perl ist unter anderem deswegen so beliebt, weil dieVerwendung von regulären Ausdrücken auf diese Weise hoffähig geworden ist.2

Ein regulärer Ausdruck ist – stark vereinfacht gesagt – eine Zeichenfolge, die einTextmuster repräsentiert. Dieses Textmuster kann dann in einer längeren Zei-chenkette gesucht werden. Ein umgangsspr achlich formuliertes Textmuster istetwa: »ein Wort, das mit J beginnt und zw ei ›a‹ enthält«. Auf dieses Textmusterwürden beispielsweise sowohl »Java« als auch »JavaScript« passen. Mit regulärenAusdrücken kann man beispielsweise Formulareingaben sehr schnell überprü-fen. Einige der Funktionen aus dem vorangegangenen Abschnitt können aufdiese Weise viel einfacher programmiert werden. Ein Wort zur Warnung abergleich vorweg: Mit den Methoden des String-Objekts, beispielsweise indexOf()und substring() kann man praktisch alle Funktionalitäten nachbilden, die regu-läre Ausdrücke anbieten. Dazu ist jedoch eine Menge Programmierarbeit nötig(es gibt in der Tat auch Programme, die reguläre Ausdrücke in Programmcodeumwandeln). Seit Längerem kann man sich die Extra-Arbeit sparen und reguläreAusdrücke mit JavaScript verwenden.

2 Natürlich gibt es reguläre Ausdrücke schon viel länger, aber mit der Verbreitung von Perl stiegauch die Verbreitung von regulären Ausdrücken.


238

Formulare12

12.7.1 Kurzeinführung

Ein Muster kann eine einfache Zeichenfolge sein, beispielsweise "abc". Das Inte-ressante an Mustern sind jedoch die Sonderzeichen und Ausdrücke, mit denenman Muster flexibler gestalten kann. Im Folgenden werden die wichtigsten die-ser Sonderzeichen und Ausdrücke vorgestellt.

Sonderzeichen zum Zählen

Mit diesen Ausdrücken kann angegeben werden, wie oft ein gewisses Zeichenvorkommen darf oder muss. Der Ausdruck muss dabei immer direkt hinter demZeichen stehen.

� ?: Nullmal oder einmal. Auf das Muster "ab?c" passen also "ac" und "abc",aber nicht "abbc".

� *: Nullmal oder mehrmals. Auf das Muster "ab*c" passen also "ac", "abc"und "abbc", aber nicht "adc".

� +: Einmal oder mehrmals. Auf das Muster "ab+c" passen also "abc" und"abbc", aber nicht "ac".

� {n}: Genau n-mal. Auf das Muster "ab{1}c" passt also "abc", aber nicht"abbc". Das Muster ließe sich zu "abc" vereinfachen.

� {n,m}: Zwischen n- und m-mal. Auf das Muster "ab{2,3}c" passen also "abbc"und "abbbc", aber nicht "abc".

� {n,}: Mindestens n-mal. Das Muster "ab{1,}c" ist also äquivalent zu "ab+c".Dieser Ausdruck kann auch vollständig durch einige der vorherigen Ausdrü-cke ersetzt werden; äquivalent zu "ab{5,}c" ist beispielsweise "ab{4}b+c".

� {,m}: Höchstens n-mal. Das Muster "ab{,3}c" ist also äquivalent zu"ab{0,3}c".

Die Sonderzeichen zum Zählen müssen si ch nicht nur auf ein einzelnes Zeichenbeziehen. Wenn man mehrere Zeichen mi t runden Klammern umgibt, werdendiese als Gruppe behandelt (die Klammern sind hierbei Sonderzeichen, das Mus-ter sucht also nicht nach den Zeichen "(" und ")"). Auf das Muster "(abc)+" pas-sen also unter anderem "abc", "abcabc" und "abcabcabc".

Metazeichen

Innerhalb eines regulären Ausdrucks versteht man unter einem Metazeichen einnormales Zeichen, das durch einen vorangestellten Backslash (\) eine besondereBedeutung erhält. JavaScript unterstützt die folgenden Metazeichen:

� \b: Wortgrenze. An der Stelle, an der dieses Metazeichen steht, muss ein Wortbeginnen oder aufhören, damit das Muster passt. Auf das Muster "\babc"


239


passt beispielsweise "abcde", aber nicht "ababc". Auf "\babc\b" passt nur"abc"; das erste \b steht für den Wortanfang, das zweite für das Wortende.

� \B: Keine Wortgrenze, das Gegenteil von \b. Auf das Muster "\Babc" passtbeispielsweise "ababc", aber nicht "abcde". Auf das Muster "\Babc\B" passtweder "ababc" (Wortende) noch "abcde" (Wortanfang), aber "babcb".

� \d: Ziffer. Auf das Muster "\d\d\d\d" passt beispielsweise "0815", aber nicht"R2D2".

� \D: Keine Ziffer. Auf das Muster "\D\D" passt weder "12" noch "A1" noch"1A", aber "AB".

� \s: Leerzeichen. Auf das Muster "Java\sScript" passt "Java Script", abernicht "Java-Script".

� \S: Kein Leerzeichen. Auf das Muster "Java\SScript" passen "Java_Script"und "Java-Script", aber nicht "Java Script".

� \w: Buchstabe, Ziffer oder Unte rstrich (_). Auf das Muster "\w" passen alsobeispielsweise "A", "a", "1" und "_", aber nicht "!".

� \W: Kein Buchstabe oder Ziffer oder Unterstrich. Auf das Muster "\W" passtbeispielsweise "!", aber nicht "A", "a" oder "_".

Weitere Ausdrücke

� .: Jedes beliebige Zeichen außer einem Zeilensprung. Auf das Muster ".."

passt also jede beliebige Folge zweier Zeichen.

� [...]: Eine Auswahlliste von Zeichen. Aus der Liste von Zeichen kann genaueines ausgewählt werden. Die Zeichen stehen dabei hintereinander. Es kön-nen auch Abkürzungen vorgenommen werden. Beispielsweise bezeichnet"[A-Z]" alle Großbuchstaben und "[0-9]" alle Ziffern. Auf das Muster"[LJ]ava" passen also beispielsweise "Lava" und "Java", aber nicht "Cava".Das Metazeichen "\w" kann durch folgendes Muster ausgedrückt werden:"[a-zA-Z0-9_]" (alle Klein- und Großbuchstaben, Ziffern und der Unter-strich).

� [^...]: Negierte Auswahlliste. Das Muster "[^a-zA-Z0-9_]" ist also äquiva-lent zum Metazeichen "\W".

� ^: Zeilenanfang. Auf das Muster "^Java" passen beispielsweise "Java" und"JavaScript", aber nicht "I love Java".

� $: Zeilenende. Auf das Muster "Java$" passen beispielsweise "I love Java"und "I hate Java" und "Java", aber nicht "JavaScript".

� \: Entwertung eines Sonderzeichens. Das Dollar-Symbol "$" hat in regulärenAusdrücken eine besondere Bedeutung. Will man aber nach dem Währungs-


240

Formulare12

symbol suchen, so muss man "$" mit einem vorangestellten Sonderzeichenentwerten. Also passen auf das Muster "\d\d\d \$" beispielsweise "100 $"und "200 $" (und jeder andere dreistellige Dollarbetrag). Natürlich kann einBackslash auch sich selbst entwerten; auf das Muster "\\" passt "\".

� |: Oder-Operation. Auf das Muster "abc|def" passen unter anderem "abc"und "def".

12.7.2 Ein Objekt erzeugen

Ein regulärer Ausdruck kann mit JavaScript auf zwei Arten erstellt werden:

1. var re = new RegExp("ab+c", "gi");Der erste Parameter ist der reguläre Ausdruck, was unschwer zu erkennen ist.Der zweite P arameter ist optional, ka nn aber – wenn er angegeben wir d –einen der W erte "", "g", "i" oder "gi" haben (als r egulärer Ausdr uckgeschrieben: "g?i?"). Hierbei steht "g" für global, und das ist beim Er setzenwichtig. So kann ein Muster auch mehr mals in einer Zeichenkette gesucht(und gefunden) wer den. Für »case inse nsitive«, also unabhängig von Gr oß-und Kleinschreibung, steht "i". Somit ist new RegExp("[a-zA-Z]") äquivalentzu new RegExp("[a-z]", "i").

2. var re = /ab+c/gi;Die Bedeutung des "gi" am Ende des Ausdrucks ist die gleiche wie im erstenPunkt. Der Unter schied ist hier , dass der r eguläre Ausdruck von Schr ägstri-chen begrenzt wird. Das sieht im V ergleich zur r estlichen JavaScript-Syntaxetwas merkwürdig aus, weshalb ich per sönlich die erste Variante bevorzuge.In diesem Buch wird jedoch die zweite Variante bevorzugt, weil die erste denNachteil hat, dass z.B. der Backslash innerhalb eines Strings entwertet werdenmuss, also etwa "\\d". Das macht den Code für den Einsteiger nicht ger adelesbarer. Bei der zweiten Variante ist außerdem zu beachten, dass der Schräg-strich dann ja eine besondere Bedeutung hat und innerhalb des Muster s miteinem Backslash entwertet werden muss, damit der JavaScript-Interpreter dasEnde des Muster s findet. Das Muster "\d\d/\d\d" passt beispielsweise auf"08/15", und new RegExp("\\d\\d/\\d\\d") ist auch kor rekt, aber mit derzweiten Schreibweise muss es /\d\d\/\d\d/ heißen.

12.7.3 Mit dem Objekt arbeiten

Auf eine der beiden vorgestellten Arten können Sie ein RegExp-Objekt erzeugen.Dieses Objekt stellt mehrere Methoden zur Verfügung, die Ihnen bei der Anwen-dung von regulären Ausdrücken von Nutzen sein werden.


241


Einen Treffer suchen

Man spricht im Englischen von match, einem Treffer, wenn das Muster in der zudurchsuchenden Zeichenkette vorhanden ist. Die dazugehörige Methode lautettest("Zeichenkette"). Das folgende Codestück überprüft, ob es sich bei derZeichenkette um eine deutsche Postleitzahl handeln könnte:

var re = /\d{5}/;var plz1 = re.test("01234"); //gibt true zurückvar plz2 = re.test("8000"); //gibt false zurückvar plz2 = re.test("D8000"); //gibt false zurück

Mit dem folgenden Code wird überprüf t, ob es sich bei dem Eingabewert umeine ganze Zahl handelt. Dieser Test wurde weiter oben schon etwas mühsamentwickelt; hier handelt es sich um deutlich weniger Schreibarbeit:

var re = /0|-?[1-9]\d*/;var zahl1 = re.test("12345"); //gibt true zurückvar zahl2 = re.test("01234"); //gibt false zurück

Zur Erklärung: Eine ganze Zahl ist entwed er die Null oder eine Ziffernfolge, dienicht mit der Null beginnt (also eine Ziff er von 1 bis 9). Hinter der führendenZiffer stehen beliebig viele weitere Ziffern oder aber auch keine Ziffer mehr. DieZiffernfolge kann durch ein optionales Minus-Zeichen eingeleitet werden.

Treffer zurückliefern

In der Praxis kommt es oft nicht nur darauf an, einen Treffer zu finden, sondernauch darauf, den auf das Muster passen den Teil der Zeichenkette zu erhalten,und teilweise auch darauf, Teile davon zu erhalten.

Oben wurde bereits erwähnt, dass man mit runden Klammern einzelne Zeichenim Muster gruppieren kann. Das ist nicht nur für Nummerierungen von Bedeu-tung, sondern auch für das Ergebnis, da man den Wert der einzelnen Klammerngezielt abfragen kann. Dies soll an einem Beispiel verdeutlicht werden.

In einem Firmen-Intranet wird die Stun denerfassung elektronisch erledigt. UmEingabefehler abzufangen, soll JavaScript verwendet werden. Eine Stundenan-gabe soll im Format »0:30« bzw. »12:45« erfolgen. Der folgende reguläre Aus-druck prüft auf dieses Format. Beachten Sie, dass dabei die ersten runden Klam-mern um die Stundenzahl stehen und die zweiten runden Klammern um dieMinutenzahl.

var dauer = /(1?\d):([0-5]\d)/g;

Der gewerkschaftlich organisierte Leser wi rd gewiss verzeihen, dass Arbeitszei-ten bis zu 19 Stunden und 59 Minuten zugelassen werden; der Leser mit Perso-


242

Formulare12

nalverantwortung möge übersehen, dass keine Arbeitszeiten über 20 Stundenerlaubt sind.

In diesem Beispiel wird die Methode exec("Zeichenkette") des RegExp-Objektsverwendet. Im Gegensatz zu test("Zeichenkette") wird hier nicht einfach einboolescher Wert zurückgegeben, sondern ein spezielles Objekt, das den Teil derZeichenkette enthält, auf den das Muster passt. Außerdem werden auch die Teileinnerhalb der runden Klammern abgespeichert. Folgender Code wird das ver-deutlichen:

var dauer = /(1?\d):([0-5]\d)/;var test = dauer.exec("abc2:45def");document.write("Uhrzeit: " + test[0] + "<br />"); //2:45document.write("Stunden: " + test[1] + "<br />"); //2document.write("Minuten: " + test[2] + "<br />"); //45

Das Objekt, das exec() zurückgibt, ist so etwas wie ein Array. Im Element mitdem Index 0 steht der Teil der Zeichenk ette, auf den das Muster passt. Im Ele-ment mit dem Index 1 steht der Teil, der im Muster durch die ersten Klammernumgeben ist.

Mehrere Treffer

Oft ist es nicht nur von Bedeutung herauszufinden, ob in einer Zeichenkette einMuster vorkommt und wie dieses eine Vorkommen aussieht, sondern auch, wieoft es vorkommt und wie diese Vorkommen denn aussehen. Für diese Zwecke istdie Methode match() des String-Objekts geeignet. Als Parameter kann dazu einregulärer Ausdruck übergeben werden. Die Methode match() gibt alle Treffer ineinem Array zurück. Sobald man dieses Array hat, kann man auf die herkömmli-che Art und Weise die Ergebnisse auslesen.

Am folgenden Beispiel soll dies gleich einmal verdeutlicht werden. Innerhalbeiner Zeichenkette sollen alle Wörter herausgesucht werden, die den Buchstaben"e" nur einmal enthalten. Der zugehörige reguläre Ausdruck lautet "\b[a-df-

zA-DF-Z]*e[a-df-zA-DF-Z]*\b". Er sieht kompliziert aus, bedeutet aber einfach,dass es sich um ein Wort handelt (angezeigt durch die Wortgrenzen am Anfangund am Ende), das ein e enthält und ansonsten aus weiteren Buchstaben ungleiche (also von a bis d und von f bis z) besteht. Des Weiteren muss die Option "g"für globales Suchen angegeben werden , damit auch alle Vorkommen gefundenwerden.

var nur_ein_e = /\b[a-df-zA-DF-Z]*e[a-df-zA-DF-Z]*\b/g;var satz = "Die Geister, die ich rief, ward ich nicht mehrlos";var liste = satz.match(nur_ein_e);


243


if (liste) {document.write(liste.length + " Treffer

gefunden!<br />");for (var i=0; i<liste.length; i++) {

document.write(liste[i] + "<br />");}

} else {document.write("Keine Treffer!");

}

Suchen und ersetzen

Die letzte Anwendung für reguläre Ausd rücke, die hier vorgestellt werden soll,wird mit am häufigsten verwendet – wu rde aber lange Zeit nur vom NetscapeNavigator unterstützt. Man kann nicht nur nach Mustern suchen, sondern dieseMuster auch durch andere Muster ersetzen. Ein Beispiel war die Umformungeiner »deutschen« Dezimalzahl in die amerikanische Schreibweise. Dazu musstenalle Kommata durch Dezimalpunkte ersetzt werden. Der folgende Code erledigtdas sehr einfach:

var komma = /,/g;var dezimalzahl_brd = "3,1415965";var dezimalzahl_usa = dezimalzahl_brd.replace(komma, ".");document.write(dezimalzahl_usa); //3.1415965

Auch hier gibt es fortgeschrittenere Anwendungen. Ein weiterer Unterschied inder Schreibweise zwischen Deutschland und den USA besteht beim Datum.Während das Format hierzulande meistens tt.mm.jj bzw. tt.mm.jjjj ist ( t =Tag, m = Monat, j = Jahr), so verwendet man in den Vereinigten Staaten in derRegel jj-mm-tt bzw. jjjj-mm-tt. Die Aufgabe besteht jetzt darin, deutscheDatumsangaben durch das amerikanische Pendant zu ersetzen. Beginnen wir mitdem regulären Ausdruck für einen Datumswert. Das Jahr ist zwei- oder vierstel-lig, Monat und Tag sind aber unter Umständen einstellig. Außerdem dürfen als

Abbildung 12.10 Alle Wörter, die nur ein »e« enthalten


244

Formulare12

Werte für den Tag nur Werte von 1 bis 31, beim Monat nur Werte von 1 bis 12verwendet werden (unmögliche Daten wie etwa der 30. Februar werden hierübergangen, um das Beispiel einfach zu halten). Der Ausdruck sieht also rechtkompliziert aus, aber die Idee, die dahinter steht, ist recht einfach. Probieren Siees doch einmal mit indexOf()!

var datum = /\b(0?[1-9]|[12][0-9]|3[01])\.(0?[1-9]|1[0-2])\.(\d?\d?\d\d)\b/;

Wie Sie sehen, wurden um Tag, Monat und Jahr runde Klammern eingefügt. DerSinn des Ganzen zeigt sich bei der Übersetzung in das amerikanische Format. DieJahreszahl muss nach vorn, de r Tag na ch hinten. Während beim Ergebnis derMethode exec() die Inhalte der Klammern in ergebnisarray[1], ergebnis-array[2] und so weiter stehen, findet man die Inhalte der Klammern bei regulä-ren Ausdrücken in den speziellen Variablen $1, $2 und so weiter. Mit folgendemCode wandelt man ein deutsches Datum in das amerikanische Format um:

function deutsch_zu_usa(d) {var datum = /\b(0?[1-9]|[12][0-9]|3[01])\.(0?[1-9]|1[0-2])\.(\d?\d?\d\d)\b/;if (datum.test(d)) {

return d.replace(datum, "$3-$2-$1");} else {

return d;}

}document.write(deutsch_zu_usa("Das dritte Jahrtausend begann am 1.1.01 –und keinen Tag früher"));

Mit d.replace(datum, "$3-$2-$1") wird der reguläre Ausdruck auf die Eingabeangewandt. In der dritten Klammer, also in $3, steht die Jahreszahl, in $2 derMonat und in $1 der Tag. Die Ausgabe lautet dann: "Das dritte Jahrtausendbegann am 01-1-1 – und keinen Tag früher". In der Variablen $0 steht übrigensanalog zu exec() der gesamte Treffer, in diesem Fall also "1.1.2001".

Die Funktion replace() gibt es auch in einer Luxusvariante. Wie beim Netscape-Pendant auch werden an replace() zwei Parameter übergeben. Der erste ist einregulärer Ausdruck, und der zweite ist eine Funktion, die vom JavaScript-Inter-preter automatisch beim Aufruf von replace() aufgerufen wird. An diese Funk-tion werden (vom JavaScript-Interpreter!) die folgenden Parameter übergeben(in der angegebenen Reihenfolge):


245


� die Zeichenkette, die auf das Muster passt

� der Reihe nach alle Untermuster: Wenn im regulären Ausdruck Klammernverwendet worden sind, werden die Entsprechungen in diesen Klammern(also die Werte von $1, $2 usw.) an die Funktion übergeben.

� die Position, an der das Muster in der zu überprüfenden Zeichenkette gefun-den wurde

� die überprüfte Zeichenkette

Die Funktion, die von replace() aufgerufen wird, muss nun nur noch Folgendesleisten: einen Wert zurückliefern. Durch diesen Wert wird das gefundene Musterin der zu überprüfenden Zeichenkette ersetzt.

Das Beispiel von oben – die Umformung des Datums in ein amerikanisches For-mat – kann folgendermaßen angepasst werden:

function deutsch_zu_usa(d) {var datum = /\b(0?[1-9]|[12][0-9]|3[01])\.(0?[1-9]|1[0-2])\.(\d?\d?\d\d)\b/;if (datum.test(d)) {

return d.replace(datum, d_zu_usa);} else {

return d;}

}function d_zu_usa(str, m1, m2, m3, pos, quelle) {

return m3 + "-" + m2 + "-" + m1;//entspricht $3-$2-$1

}document.write(deutsch_zu_usa("Das dritte Jahrtausend begann am 1.1.01 –und keinen Tag früher"));

Microsoft hat die replace()-Funktion erst in Version 5.5 des Internet Explorerseingebaut. Mit früheren Versionen, inkl usive Version 5, funktioniert das nochnicht – zum Glück sind mittlerweile beide alten Versionen so gut wie ausgestorben.

Neues in JavaScript 1.5

Ab JavaScript 1.5, das zurzeit nur von den aktuellen Mozilla-Derivaten unter-stützt wird, erhält der Fragezeichenoperator ? eine weitere Bedeutung. Norma-lerweise arbeitet die Mustererkennung bei einem regulären Ausdruck »gierig«;das heißt, es wird ein möglichst großer Treffer zurückgeliefert. Hier ein Beispiel:


246

Formulare12

var htmltag = /(<.*>)/;var test = htmltag.exec("<p>JavaScript</p>");test[0] = test[0].replace("<", "<");test[0] = test[0].replace(">", ">");document.write("HTML-Tag: " + test[0]);

Was gibt dieses Programm aus? Vielleicht erwarten Sie als Ausgabe "<p>", denndas würde auf das angegebene Muster passen. Doch diese Annahme ist leiderfalsch, denn es wird wie gesagt immer ein möglichst großer Treffer zurückgelie-fert, in diesem Falle also "<p>JavaScript</p>". Wenn Sie einen möglichst klei-nen Treffer erzielen möchten, müssen Sie direkt nach einem Sonderzeichen zumZählen (*, +, ?, {, }) den Fragezeichenoperator angeben. Folgender Code würdealso in der Tat "<p>" ausgeben:

var htmltag = /(<.*?>)/;var test = htmltag.exec("<p>JavaScript</p>");test[0] = test[0].replace("<", "<");test[0] = test[0].replace(">", ">");document.write("HTML-Tag: " + test[0]);

Wenn Sie diesen Code mit dem Internet Explorer 5.0x oder einer älteren Versionausführen (oder einem Anno-Tobak-Netscape), erhalten Sie entweder ein fal-sches Ergebnis oder eine Fehlermeldung. Der Internet Explorer 5.5 und auch dieNachfolgerversionen 6 bis 8 unterstützen zwar kein JavaScript 1.5, haben aberdiese Erweiterung der Syntax für reguläre Ausdrücke auch im Programm.

Abbildung 12.11 Aktuelle Browser interpretieren den regulären Ausdruck richtig.


385

Überhaupt hat der Fortschritt das an sich,dass er viel größer ausschaut, als er ist.– Johann Nepomuk Nestroy

18 CSS

Allein die Erwähnung des Begriffs DHTML lässt die Augen von vielen Leuten imWebbereich leuchten und steigert die Auflage von vielen Zeitschriften. Doch wasist DHTML überhaupt? Die Abkürzung steht für Dynamic HTML – doch handeltes sich hierbei um eine HTML-Erweiterung oder nur um neue JavaScript-Befehle? Wenn Sie in der Marketingabt eilung einer Webagentur nachfragen,bekommen Sie mit ziemlicher Sicherheit eine weitläufige Erklärung, die dieseTechnik wahlweise als »Stein der Weisen« oder als »Ei des Kolumbus« preist(oder das Gespräch so oder so in Richtung Ajax lenkt). Das Ziel dieses Kapitelssoll es sein, dass Sie ein Gefühl dafür bekommen, was man mit DHTML machenkann. Genauer gesagt betrachten wir einen Teilaspekt von DHTML: CSS. Casca-ding Style Sheets sind auf (modernen) Websites für die Optik zuständig, und mitJavaScript können Sie auf solche Stilinformationen zugreifen.

Wie üblich werfen wir einen Blick auf die beiden »großen« Browsergruppen: aufaktuelle Mozilla-Browser und natürlich auf den Internet Explorer. Safari, Kon-queror und Opera halten sich meist an die Mozilla-Implementierung und werdendeswegen nicht gesondert aufgeführt.

18.1 Grundlagen

Wie schon in der Einleitung angedeutet wurde, ist es nicht immer ganz leicht zuverstehen, was mit DHTML gemeint ist. In diesem Abschnitt unternehme ich denVersuch, den Begriff zu bestimmen und die notwendigen (theoretischen) Hinter-gründe zu erläutern. Außerdem werden die entsprechenden HTML-Tags vorge-stellt.

Was ist DHTML? Jeder Entwickler und jeder Browserhersteller hat eine andereDefinition parat. Da ist von viel Dynami k die Rede und von der Erfüllung allerTräume von Webentwicklern. Ich bevorzuge dagegen eine etwas einfachere, flap-


386

CSS18

sigere Definition: »DHTML ist JavaScript für Browser ab Version 4« (wobei bei-spielsweise der Mozilla-Browser die Vers ionsnummer 6, 7 oder 8 hat – schließ-lich ist er der Netscape-Nachfolger). Di ese Definition ist eine Art kleinstergemeinsamer Nenner aller konkurrierende n Beschreibungen. Aber das »D« für»Dynamic« hat schon seine Berechtigung. Mit den bisher vorgestellten Java-Script-Techniken kann man zwar auf gewisse Weise auf Benutzereingaben reagie-ren, aber man hat nicht viele Zugriffs möglichkeiten auf die Elemente einerHTML-Seite. Zwar kann man mit dem Image-Objekt Grafiken austauschen, voneiner Größenveränderung oder gar Verschiebung kann aber keine Rede sein. MitDHTML ist das möglich, es ist sogar eine Art von Drag & Drop möglich.

18.2 Cascading Style Sheets

Die herkömmliche HTML-Programmierung war nicht immer besonders struktu-riert. Wollte man in einer Tabelle alle Zellen in einer bestimmten Schrift darstel-len, so musste man in jeder Zelle ein <font>-Tag verwenden. Mit dem Konzeptder Cascading Style Sheets1 (kurz CSS) kann sich das ändern. Ohne hier auf allzuviele Details eingehen zu wollen, sei nur so viel gesagt: Es gibt immer wieder inder Fachpresse Vergleiche, welcher Brow ser in welchem Maße CSS unterstützt.Dabei schneidet der Netscape Navigator in der Regel am schlechtesten ab, derInternet Explorer schon etwas besser – und in Führung liegt die Nummer 3 oder4 auf dem Browser-Markt, der norwegische Opera-Browser.

Ein Style Sheet sieht folgendermaßen aus:

<style type="text/css"></style>

Die HTML-Kommentare dienen auch hier dazu, dass ältere Browser den Text zwi-schen den <style>-Tags nicht anzeigen. Heutzutage ist das allerdings genausorelevant wie die HTML-Kommentare bei <script>-Tags: Sie schaden nicht, abernützen nur begrenzt. Eigentlich interessant ist diese Zeile:

a {color:blue; text-decoration:none}

Das bedeutet: Alle Links (Tag <a>) im Text werden in blauer Farbe angezeigt(color:blue) und nicht unterstrichen ( text-decoration:none). Diese Angabengelten global für das gesamte Dokument. Man kann jedoch diese Vorgaben auchüberschreiben, indem bei einem Tag der style-Parameter gesetzt wird:

1 In manchen Quellen werden sie auch als »kaskadierende Stilvorlagen« o. Ä. bezeichnet, aberin diesem Fall sollte man nichts gegen den Anglizismus haben.

387

Cascading Style Sheets 18.2

<a href="http://www.galileo-press.de/" style="color:blue;text-decoration:none">Galileo Press</a>

Man kann natürlich nicht nur Links anpassen, sondern beispielsweise auchAbsätze (Tag <p>) oder eben Tabellenzellen (Tag <td>):

<style type="text/css"></style>

Außerdem lassen sich CSS-Stilangaben nicht nur für Tags einrichten, sondernauch für IDs und für spezielle Klassen. Letzteres sieht beispielsweise so aus:

<style type="text/css"></style>

Alles auf der Seite, was die Klasse gruen hat, wird auch grün dargestellt. DieKlasse geben Sie mit dem class-Attribut an:

<p class="gruen">Dieser Text ist nicht mehr schwarz ...</p>

JavaScript bietet nun mehrere Möglichkeiten, auf CSS-Formatierungen eines Ele-ments zuzugreifen. Am einfachsten verwenden Sie die style-Eigenschaft des ent-sprechenden HTML-Elements, das Sie via DOM (siehe Kapitel 8) »erreichen«. Siemüssen dann nur noch die zugehörige CSS-Eigenschaft in CamelCase umwan-deln. Das bedeutet, dass jeder Wortbestandteil mit einem Großbuchstabenbeginnt, aber die gesamte Eigenschaft mit einem Kleinbuchstaben anfängt. Ausder CSS-Eigenschaft color wird die JavaScript-Eigenschaft color, es ändert sichalso nichts. Aus background-color wird backgroundColor, aus font-weight

wird fontWeight. Bindestriche verschwinden also ebenfalls – sie sind ja so oderso nicht in JavaScript-Eigenschaften erlaubt.

Das folgende Listing ändert die Vorder- und Hintergrundfarbe eines Textes aufKnopfdruck. Per document.getElementById() wird das <p>-Element angespro-chen und dann style.<Eigenschaft> gesetzt.

<html><head><title>CSS</title><script type="text/javascript"><!--function normal() {

var Absatz = document.getElementById("Absatz");Absatz.style.color = "black";Absatz.style.backgroundColor = "white";

}

388

CSS18

function invers() {var Absatz = document.getElementById("Absatz");Absatz.style.color = "white";Absatz.style.backgroundColor = "black";

}//--></script></head><body><p id="Absatz">Text wechsle dich</p><form>

<input type="button" value="Normal" onclick="normal();" /><input type="button" value="Invers" onclick="invers();" />

</form></body></html>

Ein häufig eingesetzter Effekt besteht darin, die CSS-Eigenschaft display zu set-zen: Der Wert none beispielsweise blendet das dazugehörige Element ein oderaus; der davon belegte Platz wird freigegeben.

Wenn Sie mit Klassen arbeiten, benötigen Sie die style-Eigenschaft nicht, ledig-lich className. Damit haben Sie Lese- und Schreibzugriff auf die CSS-Klasse desjeweiligen Elements. Hier noch einmal das Beispiel mit dem invertierten Text,diesmal via CSS-Klassen:

<html><head><title>CSS</title><style type="text/css"><!--.normal { color: black; background-color: white; }.invers { color: white; background-color: black; }

Abbildung 18.1 Der Text wird auf Mausklick invertiert.

389

Cascading Style Sheets 18.2

--></style><script type="text/javascript"></script></head><body><p id="Absatz">Text wechsle dich</p><form>

<input type="button" value="Normal"onclick="setzeKlasse('normal');" />

<input type="button" value="Invers"onclick="setzeKlasse('invers');" />

</form></body></html>

JavaScript bietet noch einen viel detaillierteren Zugriff auf CSS-Stile, was aber inder Praxis eher seltener zum Einsatz ko mmt. Aus diesem Grund finden Sie hiernur einen kurzen Ausblick darauf, was noch möglich ist:

� Alle Stylesheets eines Dokuments (sowohl inline als auch externe Stile) stehenim Array document.styleSheets zur Verfügung. Mit der Eigenschaftdisabled können sie aktiviert (false) und deaktiviert (true) werden.

� Alle einzelnen CSS-Anweisungen innerhalb eines Stylesheets stehen im ArraycssRules (Mozilla) bzw. rules (Internet Explorer). Der Zugriff erfolgt also viadocument.styleSheets[x].cssRules bzw. document.styleSheets[x].rules.Der Zugriff dort funktioniert dann wie bei regulären CSS-Stilen über die style-Eigenschaft, beispielsweise mit document.styleSheets[x].cssRules[y].

style.backgroundColor oder document.styleSheets[x]. rules[y].style.backgroundColor.

Für den Praxiseinsatz genügen aber in den allermeisten Fällen die Zugriffsmög-lichkeiten auf die spezifischen Stile oder, noch besser, auf die CSS-Klassen.

Der Zugriff auf manche Stil-Eigenschaften, vor allem über die DOM-MethodegetAttribute(), führt nicht zu den gewünschten Ergebnissen, sofern die CSS-Daten dynamisch (sprich: per JavaScri pt) geändert worden sind. Die beiden»großen« Browser bieten hierfür jedoch einen Ausweg. Im Internet Explorerliefert die currentStyle-Eigenschaft den aktuellen Wert eines Stils (etwa:element.currentStyle["top"]). Und Mozilla-Browser (und auch Opera!) bietendie Methode getComputedStyle() an, die ein Objekt mit den aktuellen Stilinfor-

390

CSS18

mationen zurückliefert. Über die Methode getPropertyValue() kommen Siedann an die gewünschten Informationen heran, beispielsweise mit document.

defaultView.getComputedStyle(element, null).getPropertyValue("top").

18.3 HTML-Elemente

Der Be griff DOM ist Ihnen ja bereits in Kapitel 8 begegnet: Document ObjectModel, die hierarchische Anordnung de r einzelnen HTML-Dokumente imdocument-Objekt. Alles, was in Tags eingesch lossen ist, ist ein Objekt, also bei-spielsweise auch kursiv gedruckter Text (<i>-Tag). Auf jedes dieser Objekte kannman zugreifen, und jedes dieser Objekte hat eine Menge von Eigenschaften.

Prinzipiell genügt es, wenn man jedem Tag, auf das man mit JavaScript/DHTMLzugreifen will, einen Identifikator gibt. Dazu verwenden Sie das id-Attribut:

<p id="Galileo">Galileo Press</p>

Ansonsten gibt es noch zwei Formen von Blöcken: <span> für ein Stück HTMLoder Text ohne Umbruch davor und dahinter und <div> für HTML oder Textinklusive Umbruch davor und dahinter.

<div id="div1"></div>

Auch dem <div>- oder <span>-Tag kann man ein style-Attribut mitgeben, umbeispielsweise den Inhalt des Blocks zu verstecken oder zu bewegen.

Alle Elemente einer HTML-Seite sind seit dem Internet Explorer 4 indocument.all gespeichert. Über den Identifikator kann man dann auf ein Ele-ment zugreifen, um – und das ist das eigentlich Interessante – über die style-Eigenschaft des Elements Zugriff auf das Aussehen des Elements zu haben.

Mit dem folgenden Code macht man beispielsweise den Layer "div1" aus demobigen Beispiel unsichtbar:

document.all.div1.style.visibility = "hidden";

Doch wieso haben wir in Kapitel 8 extra getElementById() undgetElementsByTagName() eingeführt? Nun, document.all war ein Microsoft-Alleingang in der Browser-Version 4; seit der Browser-Version 5 gibt es auch imInternet Explorer die DOM-Methoden. Deswegen dient document.all nur nochzur Browserunterscheidung, denn einige kleinere Unterschiede zwischen denBrowsern gibt es weiterhin. Verwendet wird in allen BrowserngetElementById().

391

HTML-Elemente 18.3

Im folgenden Abschnitt sehen Sie zahlre iche Beispiele, die den Einsatz dieserTechniken demonstrieren. Davor aber noch ein praktischer Hinweis: Häufig gehtes bei DHTML »lediglich« darum, Text in einem Textfeld auszugeben, oderdarum, ganz allgemein irgendwo auf der Seite HTML-Code zu platzieren. An die-ser Stelle kommt die JavaScript-Eigenschaft innerHTML ins Spiel, die genau dasmacht: HTML innerhalb eines Elements zu verändern.

Das folgende Listing demonstriert das an zwei Beispielen. Per innerHTML wirdsowohl ein Element einer Aufzählungsliste als auch Text innerhalb eines Absatzeserstellt:

<html><head><title>CSS</title><script type="text/javascript"></script></head><body><p id="Absatz">Alter Text</p><ul id="Liste">

<li>Altes Element</li></ul></body></html>

In Abbildung 18.2 sehen Sie das Ergebnis: Die neuen Elemente und Texteerscheinen und überschreiben die alten.

Abbildung 18.2 Der neue Text und das neue Element erscheinen.

392

CSS18

18.4 Beispiele

Die folgenden Beispiele demonstrieren die praktische Umsetzung des bisherGesagten anhand einiger Beispiele, die Sie in ähnlicher Form auch auf diversenWebsites finden können.

18.4.1 Animiertes Logo

Unsere erste Anwendung soll eine einfache Animation sein. Ein Firmenlogo sollnicht nur statisch auf der Webseite stehen, sondern animiert werden. Beispiels-weise soll es von links ins Bild schweben. Ein erstes HTML-Grundgerüst sieht fol-gendermaßen aus:

<html><head><title>Animiertes Logo</title></head><body><h1>Animiertes Logo</h1><img src="logo.gif" /></body></html>

Die Animation des Logos geschieht nun folgendermaßen:

� Das Logo wird in einen Block (<div>) eingefügt.

� Die Positionierung dieses Blocks wird auf relative gesetzt.

� Beim Laden der Seite wird der Block zuerst recht weit nach links bewegt.

� Dann startet eine Animation, die das Logo stückweise nach rechts schiebt, bises an seinem angestammten Platz ist.

Diese Liste soll nun abgearbeitet werden. Als Erstes muss der Layer mit relativerPositionierung eingefügt werden:

<html><head><title>Animiertes Logo</title></head><body onload="init();"><h1>Animiertes Logo</h1><div id="logo" style="position:relative"><img src="logo.gif" /></div></body></html>


393

Beispiele 18.4

Als Nächstes muss die Funktion init() programmiert werden, die das Logo nachlinks verschiebt. Beim Mozilla steht die x-Koordinate der linken oberen Eckeeines Blocks in der Eigenschaft left und die y-Koordinate der linken oberen Eckein der Eigenschaft top (und zwar relativ zum Browserfenster, Frame oder umge-benden Block). Da das Logo am Anfang nicht sichtbar sein soll, kann man hiereinen negativen Wert angeben. Die ursprüngliche x-Koordinate wird in einerVariablen für später gespeichert.

Die Eigenschaften top und left sind keine numerischen Werte, sondern Strings.Sie enthalten Werte wie beispielsweise "200px" für 200 Pixel. Es macht demJavaScript-Interpreter nichts aus, wenn Sie numerische Werte zuweisen – dieUmwandlung geschieht automatisch –, ab er wenn Sie wie im Beispiel mit denWerten rechnen möchten, müssen Sie sie zunächst in Integer-Werte umwandeln.Dies geht mit der Funktion parseInt().

Der Pferdefuß ist, dass die Eigenschaften beim Internet Explorer nicht left undtop, sondern posLeft und posTop heißen. Wie beim Mozilla auch befinden sichdie Eigenschaften für die Position in der style-Eigenschaft des Elements.

Zunächst benötigen wir eine Browserunterscheidung. Ein Internet Explorer kannmit if (document.all) erkannt werden; alle anderen Browser müssen »nur«document.getElementById() unterstützen. Die Reihenfolge ist dabei essenziell:Da der Internet Explorer ebenfalls getElementById() unterstützen würde, darfdie Fallunterscheidung nicht mit if (document.getElementById) beginnen.

Nun zurück zur Position des <div>-Elements: Diese beiden Hilfsfunktionenermitteln und verändern die Block-Position in beiden großen Browserklassen:

function lieslinks() {if (document.all) {

return document.all.logo.style.posLeft;// oder: document.getElementById("logo").style.posLeft

} else if (document.getElementById) {return parseInt(document.getElementById(

"logo").style.left);}

}function setzelinks(n) {

if (document.all) {document.all.logo.style.posLeft = n;

} else if (document.getElementById) {document.getElementById("logo").style.left = n +

"px";}

}


394

CSS18

Die Animation funktioniert so ähnlich wie bei der Laufschrift. Das Logo wird um(beispielsweise) drei Pixel nach rechts bewegt, und dann wird mit setTimeout()die Funktion nach einer gewissen Zeit wieder aufgerufen. Das Ganze wird solange wiederholt, bis die (relative) Posi tion der Grafik wieder gleich derursprünglichen x-Koordinate ist, bis sie sich also wieder am anfänglichen Platzbefindet.

In jedem Bearbeitungsschritt wird das Logo um drei Pixel nach rechts geschoben,sofern die relative Position kleiner als 0 ist (sofern sich das Logo also noch linksvon der ursprünglichen Position befindet). Ist die Position größer als 0, so ist dasLogo ein wenig über das Ziel hinausgescho ssen (in unserem Beispiel ist das derFall, weil 200 nicht durch drei teilbar ist), und die Position wird korrigiert.

function init() {if (document.getElementById) {

//Wenn moderner Browsersetzelinks(-200);

}//Animation startenanimate();

}function animate() {

if (lieslinks() > 0) {setzelinks(0);

}if (lieslinks() < 0) {

setzelinks(lieslinks() + 3);setTimeout("animate()", 50);

}}

Abbildung 18.3 Das Logo bewegt sich – gemäß dem Galileo-Leitspruch


395

Beispiele 18.4

Das vollständige Listing sieht dann so aus:

<html><head><title>Animiertes Logo</title><script type="text/javascript"></script></head><body onload="init();"><h1>Animiertes Logo</h1><div id="logo" style="position:relative"><img src="logo.gif" />

396

CSS18

</div></body></html>

18.4.2 Sichtbar und unsichtbar

Von besonderem Interesse ist noch die Möglichkeit, Blockelemente sichtbar oderunsichtbar zu machen. Man kann sogar Elemente übereinander anordnen undderen (virtuelle) z-Koordinate setzen, aber das geht über dieses Beispiel hinaus.Als Beispielanwendung soll eine Art Registersystem programmiert werden, wieman es von Windows-Applikationen her ke nnt. In diesem Beispiel gibt es dreiRegister, und nach einem Klick auf die Registerreiter soll das entsprechendeRegister angezeigt werden.

Hierzu ist Folgendes zu tun:

� Die drei Register werden im HTML-Code definiert und alle an dieselbe Stellegesetzt.

� Das erste Register wird sichtbar gemacht (bzw. bleibt sichtbar), die anderenbeiden werden unsichtbar.

� Wird ein Reiter angeklickt, so wird da s aktuelle Register unsichtbar gemachtund das ausgewählte Register angezeigt.

Wir beginnen mit dem HTML-Code. Beacht en Sie, dass dort noch nicht alleRegister an dieselbe Stelle gesetzt werden (das wäre mit dem style-Attribut keinProblem); stattdessen wird später mit JavaScript die Position des ersten Registersbestimmt, und die anderen beiden werden dann dorthin bewegt. Bei den dreiReitern ist aber schon die JavaScript-Funktion zum Ein- bzw. Ausblenden derjeweiligen Register vorgesehen.

<html><head><title>Register</title><style text="text/css"></style></head><body onload="init();"><table><tr><td bgcolor="red">

<a href="javascript:register(1)">Register 1</a></td><td bgcolor="green">

<a href="javascript:register(2)">Register 2</a>

397

Beispiele 18.4

</td><td bgcolor="blue">

<a href="javascript:register(3)">Register 3</a></td></tr></table><div id="register1" style="position:absolute">

<h3>Register 1</h3></div><div id="register2" style="position:absolute">


<h3>Register 3</h3></div></body></html>

Die Implementierung ist klar: Die CSS-Eigenschaft visibility wird gesetzt, umdie einzelnen Register ein- und auszublenden. Zwar könnte man hier mit einerZeichenkette und eval() arbeiten (wie schon einige Male zuvor in diesem Buch),aber es ist praktischer, in einer Va riablen eine Referenz auf das Objekt zuspeichern. Man kann dann mittels Objektreferenz.visibility auf die visi-bility-Eigenschaft zugreifen und spart sich alle weiteren Abfragen.

Die Variablendefinition sieht wie folgt aus:

if (document.getElementById) {var objref1 =

document.getElementById("register1").style;var objref2 =

document.getElementById("register2").style;var objref3 =

document.getElementById("register3").style;}

Der nächste Schritt erstellt wieder ein paar Hilfsfunktionen, um die Koordinateneines Blocks browserunabhängig zu setzen:

function lieslinks(n) {eval("var obj = objref" + n);if (document.all) {

return obj.posLeft;} else if (document.getElementById) {

return parseInt(obj.left);}

}


398

CSS18

function setzelinks(n, wert) {eval("var obj = objref" + n);if (document.all) {

obj.posLeft = wert;} else if (document.getElementById) {

obj.left = wert + "px";}

}function liesoben(n) {

eval("var obj = objref" + n);if (document.all) {

return obj.posTop;} else if (document.getElementById) {

return obj.top;}

}function setzeoben(n, wert){


obj.posTop = wert;} else if (document.getElementById) {

obj.top = wert + "px";}

}

Anstelle von eval() können Sie natürlich auch – etwas eleganter – alle Element-referenzen in einem Array speichern.

Die Funktion init() wird beim Laden der Seite ausgeführt. Dort werdenzunächst das zweite und dritte Register neu positioniert, und zwar an derselbenStelle wie das erste Register. Außerdem müssen die beiden Register unsichtbargemacht werden, denn anfangs ist das erste Register sichtbar:

var layer_x = lieslinks(1);var layer_y = liesoben(1);setzelinks(2, layer_x);setzeoben(2, layer_y);objref2.visibility = "hidden";setzelinks(3, layer_x);setzeoben(3, layer_y);objref3.visibility = "hidden";

Das war es auch fast schon. Das Einz ige, was noch fehlt, ist die Funktionregister(), die von den JavaScript-Links aufgerufen wird und das jeweilsgewählte Register einblendet und die anderen unsichtbar macht:


399

Beispiele 18.4

function register(n) {for (var i=1; i<=3; i++) {

var visi = (i==n) ? "visible" : "hidden";document.layers["register"+i].visibility = visi;

}}

Hier der komplette, browserunabhängige Code für dieses Beispiel:

<html><head><title>Register</title><style type="text/css"></style><script type="text/javascript"><!--var objref1;var objref2;var objref3;function lieslinks(n) {


return obj.posLeft;} else if (document.getElementById) {

return parseInt(obj.left);}

}function setzelinks(n, wert) {


obj.posLeft = wert;} else if (document.getElementById) {

obj.left = wert;}

}function liesoben(n) {


return obj.posTop;} else if (document.getElementById) {

return obj.top;}

}function setzeoben(n, wert){

eval("var obj = objref" + n);

400

CSS18

if (document.all) {obj.posTop = wert;

} else if (document.getElementById) {obj.top = wert;

}}


objref1 =document.getElementById("register1").style;



}var layer_x = lieslinks(1);var layer_y = liesoben(1);setzelinks(2, layer_x);setzeoben(2, layer_y);objref2.visibility = "hidden";setzelinks(3, layer_x);setzeoben(3, layer_y);objref3.visibility = "hidden";

}function register(n) {

for (var i=1; i<=3; i++) {var visi = (i==n) ? "visible" : "hidden";eval("var obj = objref" + i);obj.visibility = visi;

}}//--></script></head><body onload="init();"><table><tr><td bgcolor="red">

<a href="javascript:register(1)">Register 1</a></td><td bgcolor="green">

<a href="javascript:register(2)">Register 2</a></td><td bgcolor="blue">

<a href="javascript:register(3)">Register 3</a></td>


401

Beispiele 18.4

</tr></table><div id="register1" style="position:absolute">



<h3>Register 3</h3></div></body></html>

18.4.3 Neuer Mauszeiger

Ein Effekt, der sich auf vielen privaten Websites befindet, ist die Verwendungeines neuen Mauszeigers. Natürlich ist es nicht möglich, die Anzeigeeigenschaf-ten für den Mauszeiger des Benutzers zu ändern, das wäre allein aus Sicherheits-gründen eine Katastrophe, aber es ist möglich, ein Element zu erstellen, das sichimmer an der aktuellen Mauszeigerpositi on befindet und somit die Maus desBenutzers verfolgt. Als Beispielgrafik verwenden wir – wie zuvor auch – das Logovon Galileo Press. Sie finden es im Internet unter http://www.galileo-press.de/download/images/galileo_press.gif – aber Sie können auch eine beliebige andereGrafik verwenden. Die folgenden Schritte müssen umgesetzt werden, damit diesfunktioniert:

� Das Element mit der Grafik wird im HTML-Code definiert (mit id="maus-

zeiger").

� Wenn der Benutzer eine Mausbewegung macht (Event-Handler onmouse-

move), wird das Element an die aktuelle Mausposition bewegt.

Abbildung 18.4 Immer nur ein Register ist sichtbar.


402

CSS18

Wie bereits in Kapitel 9 beschrieben wurd e, funktioniert das Event-Handling inden »großen« Browsern leicht untersch iedlich. Mit dem folgenden Code, der inder schon standardmäßig verwendeten Funktion init() landet, fangen SieMausbewegungen ab und weisen JavaScript an, bei jeder Bewegung die Funktionanim() aufzurufen:

function init() {if (window.Event) {

document.captureEvents(Event.MOUSEMOVE);}document.onmousemove = anim;

}

Die Funktion anim() platziert dann den Mauszeiger und verwendet dabei zweischon bekannte Hilfsfunktionen:

function setzelinks(n) {if (document.all) {

document.all.mauszeiger.style.posLeft = n;} else if (document.getElementById) {

document.getElementById("mauszeiger").style.left =n + "px";

}}function setzeoben(n) {

if (document.all) {document.all.mauszeiger.style.posTop = n;

} else if (document.getElementById) {document.getElementById("mauszeiger").style.top =

n + "px";}

}

Doch nun zur Funktion anim() selbst. Diese ermittelt zunächst die aktuelleMausposition. In Mozilla-Browsern erhalten Sie diese via e.pageX und e.pageY(e ist der Parameter, der automatisch an die Ereignisbehandlungsfunktion über-geben wird). Im Internet Explorer verwenden Sie event.clientX undevent.clientY. Dann platzieren Sie – mit setzelinks() und setzeoben() – dieMaus an der angegebenen Position:

function anim(e) {var x = (window.Event) ? e.pageX : event.clientX;var y = (window.Event) ? e.pageY : event.clientY;setzelinks(x);setzeoben(y);

}


403

Beispiele 18.4

Hier noch einmal der komplette Code im Überblick:

<html><head><title>Mauszeiger</title><script type="text/javascript"></script></head><body bgcolor="white" onload="init();"><h1>Mauszeiger</h1><div id="mauszeiger" style="position:absolute">

<img src="logo.gif" /></div></body></html>

404

CSS18

18.4.4 Permanentes Werbebanner

Gratis-Hoster, also Firmen, die kostenlosen Webspace anbieten, lassen sich jaeiniges einfallen, um effektiv Werbun g auf den Webseiten unterzubringen. Einbesonders aufdringlicher Gag ist ein Werbebanner, das so konzipiert ist, dass esimmer sichtbar ist (beispielsweise, indem es sich immer in der rechten oberenEcke des Browserfensters befindet). Ei ne weitere Anwendungsmöglichkeit hier-für ist eine Navigation oder Sitemap, die ebenfalls immer sichtbar ist. Auch hiergilt: Setzen Sie den Effekt recht sparsam ein, oder bieten Sie zumindest die Mög-lichkeit an, das Banner (oder die Sitemap) ausblenden zu können, um die dahin-ter liegenden Bereiche auf der Website überhaupt ansehen zu können.

Die Vorgehensweise bei diesem Beispiel ist folgende:

� Im HTML-Code wird ein Element definiert, das das Banner enthält (mitid="logo" – wir verwenden auch in diesem Beispiel wieder das Galileo-Logo,das hier die Funktion eines Werbelinks auf die Verlags-Homepage hat).

� Per Timeouts wird das Element alle ha lbe Sekunde in die rechte obere Eckedes Browserfensters verschoben.

Auch hier beginnen wir mit einer Funktion init(). Da wir mit Timeouts arbei-ten, müssen wir an dieser Stelle nich t mühsam Ereignisse abfangen und umlei-ten, sondern lediglich das Werbebanner sichtbar machen. (Es wäre nicht hübsch,wenn das Banner schon beim Laden der Seite sichtbar wäre, denn zu diesem Zeit-punkt ist es noch recht schwierig, die richtige Position zu bestimmen.) Dannrufen wir die Funktion auf, die das Logo in die rechte Ecke schiebt (anim()):

Abbildung 18.5 Ein neuer (und ziemlich großer) Mauszeiger


405

Beispiele 18.4


document.getElementById("logo").style.visibility ="visible";

}anim();

}

Auch die Funktion anim() ist relativ kurz, der Aufwand besteht – wie so oft beiDHTML – eher in der Recherche (und in der Fehlersuche) als in der Programmie-rung per se. Beginnen wir mit Mozilla-Browsern: In window.pageXOffset undwindow.pageYOffset steht, an welche Position die aktuelle Seite im Browserfens-ter gescrollt worden ist. Die Y-Koordinate der linken oberen Ecke des Bannersmuss also auf window .pageYOffset gesetzt werden, das Banner soll ja obenandocken. Bei der X-Koordinate ist das nicht ganz so trivial, aber nicht unmög-lich. Also: In window.innerWidth steht, wie breit das Browserfenster abzüglichScrollbalken, Leisten etc. ist. In der Praxis trifft dieser Wert nicht immer exaktganz zu, aber man erhält immerhin eine ganz gute Schätzung. Von diesem Wertmuss man die Breite der Grafik abzieh en (oder am besten noch ein bisschenmehr, eben wegen der Ungenauigkeiten mancher Browser), und dann hat mandie Position der Grafik – beinahe. Schließlich ist es auch möglich, auf Webseitenhorizontal zu scrollen, also muss zu diesem Wert noch window.pageXOffset

addiert werden.

Jedoch heißen die Eigenschaften, die be ispielsweise die aktuelle Scrollpositiondes Browserfensters enthalten, beim Inte rnet Explorer komplett anders als beiMozilla. Aus window.innerWidth (Breite des Browserfensters) wird document.

body.clientWidth, und window.pageXOffset und window.pageYOffset findenin document.body.scrollLeft und document.body.scrollTop ihre Entspre-chung. Der Rest bleibt beinahe identi sch. Ein kleiner Unterschied am Rande:document.body.clientWidth arbeitet viel exakter als das Mozilla-Pendant. Manmuss von diesem Wert also in der Tat nur die Breite der Grafik abziehen undnicht etwas mehr, wie das zuvor noch der Fall war.

Somit sind die Koordinaten ermittelt worden, und Sie müssen nur noch dafürsorgen, dass sich anim() via Timeout wieder selbst aufruft – oder Sie verwendengleich setInterval() anstelle von setTimeout().

function anim() {if (document.all) {

var x = document.body.clientWidth +document.body.scrollLeft – 181;

var y = document.body.scrollTop;} else if (document.getElementById) {


406

CSS18

var x = window.innerWidth + window.pageXOffset - 192;var y = window.pageYOffset;

}setzelinks(x);setzeoben(y);setTimeout("anim()", 500);

}

Die Funktionen setzelinks() und setzeoben() kennen Sie bereits von den vor-herigen Beispielen zur Genüge, weswegen Sie im Folgenden ohne weitere Vor-rede den kompletten Code finden:

<html><head><title>Werbebanner</title><script type="text/javascript"><!--function init() {

if (document.getElementById) {document.getElementById("logo").style.visibility =

"visible";}anim();



} else if (document.getElementById) {document.getElementById("logo").style.left = n + "px";

}}function setzeoben(n) {

if (document.all) {document.all.logo.style.posTop = n;

} else if (document.getElementById) {document.getElementById("logo").style.top = n + "px";

}}function anim() {

if (document.all) {var x = document.body.clientWidth +

document.body.scrollLeft – 181;var y = document.body.scrollTop;

} else if (document.getElementById) {var x = window.innerWidth + window.pageXOffset - 192;var y = window.pageYOffset;

}

407

Beispiele 18.4

setzelinks(x);setzeoben(y);setTimeout("anim()", 500);

}//--></script></head><body bgcolor="white" onload="init();"><h1>Werbebanner</h1><div id="logo"style="visibility:hide;position:absolute"><a href="http://www.galileo-press.de/"><img src="logo.gif" border="0" /></a></div><script type="text/javascript"></script></body></html>

Zum Ende dieses Kapitels noch ein ku rzer Ausblick: Die Möglichkeiten vonDHTML sind fast unendlich, weil die Möglichkeiten von CSS fast unendlich sind.

Abbildung 18.6 Das Werbebanner ist immer rechts oben auf der Seite.

408

CSS18

An dieser Stelle kann leider kein ausfüh rlicher Einstieg in die Materie gegebenwerden, da dies den Umfang dieses Buches sprengen würde und ja auch nichtunser eigentliches Thema ist. Aus demselben Grund können hier auch nicht alleInkompatibilitäten der verschiedenen Browser aufgelistet werden. Das Ziel die-ses Kapitels war es, Ihnen einen browserunabhängigen Überblick über alle rele-vanten Aspekte der Materie zu geben. Mit den vorgestellten Techniken, der Refe-renz und ein wenig Fantasie und Fr eude am Ausprobieren können Siebeeindruckende Ergebnisse erzielen. Mehr brauchen Sie in der Regel sowiesonicht.


827

Index

! 72- 69-- 70!= 72$() 453% 69, 105%= 71&& 71* 69*/ 56*= 71+ 69, 73++ 70+= 71.aspx 567.htaccess 626.NET 433

Installation 434.NET Framework 434/ 69/* 56// 55, 56/= 71<a href> 62, 312<a style> 386<a target> 265, 277, 297<applet> 545<br> 76<div style> 390<embed> 500, 512, 522, 529<form action> 225<form method> 225<form name> 206<form> 204<frame src> 293<frame> 293<frameset cols> 292<frameset> 292, 297<hr> 53<img name> 311<input type> 63, 207, 208<marquee> 261<noframes> 57<noscript> 57<object> 500, 512, 522, 529

<option> 208<script event for> 154<script language> 50, 113<script src> 58, 608<script type> 51<script> 47, 48<select multiple> 209<select> 208<style> 386<textarea> 207-= 71= 73== 72| 146|| 71

A

about:cache 596Abrunden 104ActionScript 537, 822ActiveMovie 501ActiveMovie Control 493ActiveX 359, 499, 521addEventListener() 165Adobe

Director 521Flash 521

adobe_director() 527adobe_flash() 532Ajax 355

asynchron 360Beispiele 356Bookmarks 470Frameworks 679Permalink 470Sicherheit 589synchron 360XML 410XPath 420XSL 416Zurück-Schaltfläche 475

AJAXSLT 425alert() 247Animation 312


828

Index

Animierte GIFs 520Anonyme Funktionen 92Apache 371, 410, 626Applet 546arguments 90Array-Objekt 87, 182

erweitern 182Index 87length 182pop() 183push() 183, 190sort() 185, 186splice() 183toString() 187

Arrays 87erstellen 87erweitern 182Notation 197sortieren 185Sortierfunktion 185

ASP 567ASP.NET 171, 371, 567

Bankleitzahlen 379Caching verhindern 609HTML Controls 570InnerHtml 569Newsticker 376Page_Load() 568Response.Write() 568runat= 569Validation Controls 576Web Controls 573

ASP.NET AJAX (Ajax-Framework) 684Asynchronous JavaScript + XML 355Auswahllisten 208, 209

options 209selected 209selectedIndex 209, 216type 216value 209

Authorization required 613

B

back() 254, 255Bankleitzahlen 379Behavior 441Bestätigungsfenster 250Blackjack 551

blur() 222Bookmark 298Browser 22, 31

History 475Marktanteile 43Navigationsleiste 253Testsystem 45Version 117

Browser-Erkennung 113Chrome 117Internet Explorer 115Mozilla 115Opera 115Safari 117Versionsnummer 117

Browserkrieg 22Bubblesort 191Bubbling 155

C

Cache 314, 325, 596, 608Camino 35Checkboxen 208

checked 208type 215

Chronik 253clearInterval() 262clearTimeout() 260Client Sniffer 113Clientseitige Programmierung 21clientX 402clientY 402Code

auslagern 607schützen 593verschlüsseln 602verstecken 598

codeschutz_decode() 605codeschutz_encode() 604confirm() 250continue 79cookie_lesen() 348cookie_setzen() 347Cookies 224, 247, 337

Aufbau 338Beschreibung 337domain 339Einschränkungen 338, 345


829

Index

Cookies (Forts.)expires 339HttpOnly 340lesen 342löschen 342path 339secure 340Seiten schützen 618serialisieren 346setzen 341Unterstützung prüfen 343Warenkorb 657

Copy & Paste 213Cross-Site Scripting 585CSS 386

className 388currentStyle 389getComputedStyle 390style 387via JavaScript 387

D

Datenhaltung 224Date-Objekt 102

erzeugen 95getDate() 96getFullYear() 98getHours() 96getMilliseconds() 96getMinutes() 96getMonth() 96getSeconds() 96getTime() 98, 102getYear() 96, 97toGMTString() 339

Datum 95lokal 100

DCOM 428Debugger 174debugger 180DHTML 385

Text ausgeben 285, 332Diashow 304

anhalten 307navigieren 308starten 307verlassen 308

Director 521, 523ActiveX überprüfen 524browserunabhängige Erkennung 527in HTML einbauen 523Plugin überprüfen 525Verbreitung 521Veröffentlichungseinstellungen 521Versionsnummer 525, 526

disablePrivilege() 632Distributed Computing 428Document Object Model 125document-Objekt

all 390all.style 390body.clientWidth 405body.scrollLeft 405body.scrollTop 405cookie 340, 344createElement() 129, 132createTextNode() 133forms 206getElementById() 130getElementsByTagName() 134images 311styleSheets 389write() 47, 53, 264, 299, 522

Dojo (Ajax-Framework) 680Dojo Shrinksafe 487DOM 23, 125, 390

auf Elemente zugreifen 130auf Tags zugreifen 134Baum 126Knoten 126Liste erstellen 135modifizieren 129Navigation 127Performance 484Tabelle erstellen 136

DOM-Baum 126Doppelklick 143do-while-Schleifen 77, 79, 81Drag & Drop 386Drucken 255

E

E4X 822ECMA-262 23, 125ECMA-357 822


830

Index

ECMAScript 23, 125Editor 24Eigenschaft 92Eingabefenster 252E-Mail-Adresse 236enablePrivilege() 445, 628, 632encodeURI() 227encodeURIComponent() 227Entities 63Ereignisbehandlung 141, 164Ereignisse 141

abfangen 146browser-unabhängig 159Bubbling 159Internet Explorer 153Mausklicks 160mit Opera 146Netscape 141Sondertasten 162Tastatureingaben 151, 161

escape() 227, 644, 672eval() 86, 193, 218, 236, 346

Sicherheitsbedenken 367Event-Handler 62, 141, 168

onabort 327onblur 222onchange 222, 229, 380onclick 62, 142, 251, 322oncontextmenu 602ondblclick 143, 153onerror 168, 327onfocus 221onkeydown 151, 153onkeypress 151, 153onkeyup 151, 153onload 326onmousedown 142, 153onmousemove 143onmouseout 257, 312onmouseover 257, 312onmouseup 142, 153onsubmit 204

Event-Objekt 146, 148, 157cancelBubble 158CLICK 146keyCode 161MOUSEDOWN 146MOUSEUP 146srcElement 157

Event-Objekt (Forts.)target 148type 148which 152

eXtensible Markup Language 410eXtensible Stylesheet Language 416Externe Datei 58

F

FAQ 26Fehler

abfangen 168detaillierte Meldung 169

Fehlermeldung 25, 49, 84, 167per E-Mail senden 170

Fensteranpassen 267Benutzereingabe 252besondere Rechte 270Bestätigung 250bewegen 280Fernsteuerung 275modal 247, 273öffnen 264Optionen 267schließen 278scrollen 281verschieben 280Warnung 248Zugriff 279

Fenster-Eigenschaften 274center 274dialogHeight 274dialogLeft 274dialogTop 274dialogWidth 274help 274resizeable 274screenX 271screenY 271status 274

Fernsteuerung 275Firebug 174, 455Firefox 23firstChild 448Flash 521, 529

ActiveX überprüfen 530browserunabhängige Erkennung 532


831

Index

Flash (Forts.)Clip laden 539Fortschrittsanzeige 539in HTML einbauen 529Jukebox 540mit JavaScript kommunizieren 534, 537Plugin überprüfen 531Verbreitung 521Veröffentlichungseinstellungen 521Wiedergabe 538zoomen 539

for-in-Schleifen 78Form-Objekt

elements 206, 207Formular

auf Elemente zugreifen 206per E-Mail versenden 653überprüfen 203

Formularelementtype 213

Formularüberprüfung 203automatisch 213

for-Schleifen 75, 79Fortschrittsanzeige 329forward() 254, 255Frames 255, 291

Datenzugriff 295History 254mehrere gleichzeitig ändern 302mit JavaScript füllen 294übergeordnet 297unsichtbar 598, 599, 641zählen 304

fscommand() 534Funktionen 88

anonym 92, 145Anzahl Parameter 90arguments 90Parameter 90return 89

G

Galeon 36Garrett, Jesse James 355Gauß 176Gecko 35GIF

animiert 312

GIF (Forts.)transparent 317

go() 254Google Chrome 24Google Closure Compiler 487Google Suggest 356, 681GP_codeschutz_kontext() 601Grafiken 309

animieren 312, 392austauschen 310Ladestatus 329, 331, 333URL 311Zugriff 311

H

Heimkino 518History 253history-Objekt 253

back() 254forward() 254go() 254, 263

HP-Verfahren 102HTML

Sonderzeichen ersetzen 589HTML Controls 570HTML Guard 607HTML-Kommentar 55HTML-Tags

script language 51HTTP 337, 638

Anfrage abbrechen 367Anfrage senden 359Authentifizierung 370Header 225, 338, 363, 370Parameter 362Rückgabe auswerten 361Status 370

HTTP_REFERER 611HTTPS 340

I

IETester 45if-else-Anweisung 252Iframes 254IIS 434, 567Image-Objekt 309

Cache 314, 325


832

Index

Image-Objekt (Forts.)complete 327src 311, 314

Immer sichtbar 404innerHTML 133, 391Internet Explorer 22, 36, 49isNaN() 232, 236

J

Jahr-2000-Problem 97Jahrtausendwechsel 99JAR 633Java 32, 48, 488, 543, 628

Allgemeines 543Applet 546Datentypen 545Funktionsweise 543in HTML 547Klassen 545Vector 551Virtual Machine 544

JavaScriptBibliotheken 451einbauen 47extern 58Link 60neu in Version 1.5 245neu in Version 1.6 821neu in Version 1.7 824neu in Version 1.8 824neu in Version 1.9 825neu in Version 2.0 825Version 51

JavaScript Debugger 174Breakpoint 177Watch 178

javascript:(URL) 60, 294JavaScript-Protokoll 61, 294Java-Unterstützung 505JPEG 312jQuery 452

$() 453Ajax 457CSS 456Elementzugriff 453Ereignisbehandlung 457JSON 457

JRE 488

JScript 22, 50JScript.NET 433, 567

Installation 433Web Service 437

JSMin 488JSON 88, 182, 197, 365, 425

K

KDE 40, 777kein_kontext() 600Knoppix 40Knoten

appendChild() 129cloneNode() 129firstChild 128hasChildNodes() 129insertBefore() 129lastChild 128nextSibling 128nodeName 128nodeType 128parentNode 128previousSibling 128removeNode() 129replaceNode() 129setAttribute() 129

Kommentar 56Komodo Edit 25Konqueror 24, 40, 579Kontextmenü verhindern 602Kontrollstrukturen 75

L

laden_collection() 349Laufschrift 258, 260left 393lesen_collection() 349Link 60LiveAudio 493, 503LiveScript 22location-Objekt 119, 262

hash 473href 119, 263, 300protocol 63reload() 263replace() 263search 226, 299, 471, 667


833

Index

Lottozahlen 107Lynx 58

M

Macromedia 520MagicCookie 338Marktanteil 43Math-Objekt

floor() 104PI 103pow() 104random() 101

Mausbewegung 143Mausklick verhindern 600Mauszeiger 401Methode 93Microsoft Ajax Minifier 488Microsoft Internet Explorer 36MIDI-Format 500MIME-Typ 495mimeTypes-Objekt 495

description 495enabledPlugin 495suffixes 495type 495

Modales Fenster 248, 273Modulo 71, 104Moonlight 561moveBy() 281moveTo() 281Mozilla 23, 33, 34, 125, 250

Ereignisbehandlung 164mp_ende() 516mp_ende_reset() 517mp_getControls() 517mp_getVolume() 516mp_lade_datei() 517mp_nn() 514mp_obj() 514mp_play() 515mp_setControls() 518mp_setVolume() 516mp_start() 516mp_start_reset() 517Multimedia 499Musik 500

ActiveMovie 501browserunabhängige Ansteuerung 505

Musik (Forts.)Clip laden 503, 505, 509Einbau in HTML 500Lautstärke 503, 504, 507LiveAudio 503Objekt 506Wiedergabe 501, 504, 507Wiedergabestatus 502, 504Windows Media Player 501Wurlitzer 510

Musterreguläre Ausdrücke 238

MySQL 377

N

Nachkommaanteil 104name 277Navigation 229, 317navigator-Objekt 113

appName 114appVersion 114javaEnabled() 505, 549mimeTypes 495, 523, 525, 531platform 524plugins 493, 525userAgent 114

Netscape Navigator 22, 31netscape-Objekt

security.PrivilegeManager 270Newsgroups 26Newsticker 375NoteTab 25NSPR 633NSS 633null 90, 252

O

Objekte 92eigene erstellen 188Eigenschaften 92, 189erweitern 198Konstruktor 189Methoden 93, 190this 189

ODBC 377onchange 380onclick 62


834

Index

oncontextmenu 602onerror 168onerror() 168onreadystatechange 360OOP 92, 181Open Web Application Security Project

(OWASP) 591open() 264opener 275Opera 24, 39Operatoren

arithmetische 69boolesche 71für Zeichenketten 73

Option-Objekt 231OS X 38, 41Outlook Web Access 358

P

Page Speed 489pageX 402pageY 402parseFloat() 74, 218, 236parseInt() 74, 236, 393Passwort

ähnlich URL 615als URL 614im Java-Applet 621im Quelltext 618verschlüsseln 616

Performance 483Perl 171Permalink 470PHP 171

Bankleitzahlen 380Caching verhindern 609Code generieren 610Newsticker 377Passwortschutz 624Referer-Check 612Session-Management 624

Plugins 493, 499, 521MIME-Typ 495neu laden 495Zugriff 493

plugins-Objekt 493filename 494

refresh() 495posLeft 393posTop 393print() 255Privileg 445, 628, 629Privilege Manager 283prompt() 211, 252prototype 198Prototype (Bibliothek) 460Punkt vor Strich 71

Q

Quellcode einsehen 594per Dateisystem 596per Kontextmenü 595per Menü 594per Tastenkürzel 595

Quellen 817

R

Radiobuttons 207checked 208name 207type 214

Referenz 695RegExp-Objekt 240

exec() 242match() 242test() 241

Reguläre Ausdrücke 237JavaScript 1.5 245Match 241mehrere Treffer 242Metazeichen 238Muster 238suchen 241suchen und ersetzen 243Treffer zurückliefern 241

removeEventListener() 165return 89return false 152, 204, 207, 251return true 152, 204, 251, 257ROT13 604runat= 568


835

Index

S

Safari 24, 41Same Origin Policy 360Schleifen 75schreiben_collection() 349screen-Objekt

availHeight 281availWidth 281

script.aculo.us (Bibliothek) 463Scrolling 281self 247, 275, 295Serialisierung 345Serverseitig

Bankleitzahlen 379Code generieren 610Newsticker 375Variablenzugriff 371

Serverseitige Programmierung 21setInterval() 262setTimeout() 258Short Evaluation 72showModalDialog() 274Sicherheit 585

Ajax 589eval() 367XSS 585

Signierte Skripte 269, 627, 633SignTool 633Silverlight 557

Plugin 561Vorlage für Visual Studio 557XAML 558Zugriff per JavaScript 562

SOAP 429, 431Body 431, 448Envelope 431

sound_ende() 508sound_ende_reset() 509sound_getVolume() 508sound_ie() 506sound_lade_datei() 509sound_nn() 505sound_obj() 506sound_pause() 507sound_play() 507sound_setVolume() 508sound_start() 508sound_start_reset() 509

sound_stop() 507speichern_collection() 349Spread Firefox 35Statuszeile 256String-Objekt 237

charAt() 73fromCharCode() 161indexOf() 77, 237length 73, 88replace() 244Sonderzeichen 67split() 186substring() 73, 237

SunSpider 486switch-Anweisung 82

default 83

T

Tagesdatum 96Testsystem 45Textfelder 207

type 214Textmarke 473this 189, 247, 295throw 85Timeouts 258, 307, 319

löschen 259setzen 258

top 297, 393toString() 187, 347try...catch 84

U

Überprüfungsfunktionen 232Dezimalzahl 234E-Mail-Adresse 236Ganzzahl 232in Zahlenwert umwandeln 236Postleitzahl 233Telefonnummer 235

UltraEdit 25unescape() 227, 644UniversalBrowserAccess 628, 631UniversalBrowserRead 628, 629UniversalBrowserWrite 628, 631UniversalFileAccess 628UniversalFileRead 628


836

Index

UniversalFileWrite 628UniversalPreferencesRead 628UniversalPreferencesWrite 628UniversalSendMail 628URI 227URL 262

Bestandteile 262Maximallänge 667

V

V8 486Validation Controls 576var 68, 91Variablen 65

Boolsche 67Deklaration 68globale 91, 259, 313lokale 91, 259Namensgebung 65numerische 66Typenumwandlung 74vertauschen 192Zeichenketten 66

VBScript 50Venkman 174Verisign 633Verlauf 253Visual Studio 2008 557Visual Web Developer 435Vollständigkeitsüberprüfung 203

W

W3B 43Währungsrechner 218Warenkorb 637

ändern 653, 663, 675Artikel anzeigen 646, 660, 670Datenstruktur 638Einzelansicht 647, 661, 671füllen 643, 658, 669Kategorien anzeigen 644, 659, 669mit Cookies 657mit Frames 641mit URL 667Übersicht 651Vergleich der Lösungen 676

warenkorb_artikel() 638

warenkorb_editieren_cookies() 658warenkorb_editieren_frames() 644warenkorb_editieren_url() 669warenkorb_hinzufuegen_cookies() 658warenkorb_hinzufuegen_frames() 643warenkorb_hinzufuegen_url() 669warenkorb_kategorie() 640warenkorb_laden_collection() 668warenkorb_lesen_collection() 668warenkorb_schreiben_collection() 669warenkorb_speichern_collection() 668Warnfenster 248Web Controls 573Web Service 427

asynchron 442, 447asyncInvoke() 447aufrufen 431Beschreibung 428callService() 442encode() 447JScript.NET 433Selbstbeschreibung 429SOAPCall-Objekt 446SOAPParameter-Objekt 446useService() 442WSDL 429Zugriff mit Internet Explorer 441Zugriff mit Mozilla 445

WebKit 42Webmail 265Weiterleitung 119, 332Werbebanner 264, 404while-Schleifen 78, 79window-Objekt 247, 291

ActiveXObject 505alert() 119, 221, 247, 248back() 255Bubbling 155captureEvents() 146, 150, 154clearInterval() 262clearTimeout() 260close() 273, 278closed 279confirm() 250forward() 255frames 300handleEvent() 149innerWidth 405moveBy() 281


837

Index

window-Objekt (Forts.)moveTo() 281name 277onerror 168open() 264opener 275outerHeight 281outerWidth 281pageXOffset 405pageYOffset 405print() 255prompt() 211, 252releaseEvents() 146routeEvent() 150scroll() 281scrollBy() 282scrollTo() 282setInterval() 262, 629setTimeout() 258, 394showModalDialog() 274status 257

Windows Media Player 501, 511browserunabhängige Ansteuerung 514Clip laden 517Heimkino 518in HTML einbauen 512Lautstärke 516Objekt 514Steuerelemente anzeigen 517Wiedergabe 515

write() 47WSDL 429, 439Wurlitzer 510

X

XAML 558XML 410, 427, 428

AJAXSLT 425Dokument erstellen 414Dokument laden 417DOM 411Web Service 427

XMLHttpRequest-Objekt 358, 359abbrechen 367abort() 367Browserunterstützung 359erzeugen 359getAllResponseHeaders() 370getResponseHeader() 370HTTP-Authentifizierung 370onreadystatechange 360open() 360Parameter 362readyState 360responseText 361responseXML 370, 411setRequestHeader() 363status 370statusText 370Zustand 360

XPath 420selectNodes() 420selectSingleNode() 420XPathEvaluator 420

XSL 416Transformation 417

XSS 585

Y

Y2K 97, 98YSlow 489YUI Compressor 488

Z

ZeichenketteString-Objekt 67

ZIP 633Zufall 101zufall_datum() 105zufall_intervall() 106, 199Zufallsbanner 110Zufallszahlen 101

Bereich 105HP-Verfahren 102


JavaScript - Amazon S3...JavaScript - Amazon S3 ... 1}}}}} ...

Documents

Transcript of JavaScript - Amazon S3...JavaScript - Amazon S3 ... 1}}}}} ...