JavaScript Kompendium

Elmar und Ingo Dellwig

JavaScript Dynamisches Web-Publishing

Markt+Technik Verlag

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

10 9 8 7 6 5 4 3 2 1 04 03 02 01

ISBN 3-8272-5818-9 © 2001 by Markt+Technik Verlag, ein Imprint der Pearson Education Deutschland GmbH, Martin-Kollar-Straße 10–12, D-81829 München/Germany Alle Rechte vorbehalten Einbandgestaltung: Grafikdesign Heinz H. Rauner, Gmund Lektorat: Jürgen Bergmoser, [email protected] Herstellung: Ulrike Hempel, [email protected] Satz: reemers publishing services gmbh, Krefeld Druck und Verarbeitung: Kösel, Kempten (www.KoeselBuch.de) Printed in Germany

Widmung

Dieses Buch widmen wir unseren Eltern Hildegund und Dieter Dellwig, die uns immer hilfreich zur Seite stehen und den Rücken freihalten. Wenn wir Euch nicht hätten, wären wir nicht da, wo wir jetzt sind.

JavaScript Kompendium

5

JavaScript Kompendium Inhaltsübersicht Widmung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

5

Vorwort . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

21

Elmar und Ingo Dellwig . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

25

Know-how . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

27

Voraussetzungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

29

Kapitel 1

HTML-Grundlagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

35

Kapitel 2

JavaScript-Grundlagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

75

Kapitel 3

Funktionen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

91

Kapitel 4

Schleifen und Verzweigungen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

95

Kapitel 5

Objekte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105

Kapitel 6

Browser- und Navigations-Objekte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113

Kapitel 7

Objekte zur Textbearbeitung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123

Kapitel 8

Formulare . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137

Kapitel 9

Events. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199

Kapitel 10

Rahmen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217

Kapitel 11

Multimedia. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231

Kapitel 12

Einbindung von Java-Applets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257

Kapitel 13

Stylesheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263

Kapitel 14

Cookies. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279

Teil 2

Praxis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285

Kapitel 15

DHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287

Kapitel 16

Beispielprojekt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335

Teil 1

JavaScript Kompendium

7

Inhaltsübersicht Kapitel 17

Praxisführer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375

Anhang A

JavaScript-Referenz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 433

Anhang B

Reservierte Wörter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 581

Anhang C

Umformungen von Sonderzeichen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 583

Anhang D

Vordefinierte Farbwerte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 587

Anhang E

Umrechnung von Zahlen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 593

Anhang F

Die wichtigsten MIME-Typen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 603

Anhang G

Glossar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 607

Anhang H

Die CD-ROM zum Buch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 613

Anhang I

Wichtige Seiten im WWW . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 615 Stichwortverzeichnis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 627

8

JavaScript Kompendium

Inhaltsverzeichnis

Widmung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

5

Vorwort . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

21

Für wen wurde dieses Buch geschrieben?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

22

Was behandelt dieses Buch? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

22

Inhalt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

22

Know-how. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

22

Praxis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

22

Anhang. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

23

Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

23

Wie liest man dieses Buch? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

23

Icons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

23

Danksagung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

24

Elmar und Ingo Dellwig . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

25

KNOW-HOW . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

27

Voraussetzungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

29

Browser. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

29

Texteditor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

32

Kapitel 1

HTML-Grundlagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

35

1.1

Was ist HTML? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

35

1.2

HTML-Grundlagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

35

Hello World! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

35

TEIL 1

Tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

37

Kopf und Körper . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

37

Attribute . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

38

HTML-Top-Level-Referenz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

39

JavaScript Kompendium

9

Inhaltsverzeichnis 1.3

1.4

Das Textbild. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

44

Zeilenumbrüche und Absätze . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

44

Umlaute und Sonderzeichen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

44

Überschriften. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

46

Textpassagen hervorheben. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

47

Text ausrichten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

48

Formatierungs-Referenz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

49

Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

54

Interne Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

54

Externe Links. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

55

Telnet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

56

FTP. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

57

E-Mail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

59

Sprünge innerhalb einer Seite. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

60

Link-Referenz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

60

Listen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

63

Ungeordnete Listen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

64

Geordnete Listen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

66

Listen-Referenz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

67

Das <script>-Tag . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

71

<script>-Referenz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

73

Kapitel 2

JavaScript-Grundlagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

75

2.1

Hello World! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

75

2.2

Kommentare . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

77

2.3

Nicht JavaScript-fähige Browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

77

2.4

Variablen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

78

Variablen deklarieren und initialisieren. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

78

Namenskonventionen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

79

Datentypen und Literale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

81

Lesbarer Quellcode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

82

Operatoren. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

84

Arithmetische Operatoren. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

84

String-Operatoren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

85

Logikoperatoren. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

85

Bitweise Operatoren. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

85

1.5

1.6

2.5

10

JavaScript Kompendium

Inhaltsverzeichnis Zuweisungsoperatoren. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

86

Vergleichsoperatoren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

86

Spezielle Operatoren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

87

Hierarchie der Operatoren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

87

2.6

JavaScript-Entities . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

88

Kapitel 3

Funktionen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

91

3.1

Warum Funktionen? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

91

3.2

Übergabewerte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

91

3.3

Lokale und globale Variablen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

92

3.4

Vordefinierte Funktionen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

93

Kapitel 4

Schleifen und Verzweigungen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

95

4.1

if...else . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

95

4.2

switch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

97

4.3

break . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

98

4.4

continue . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

98

4.5

for . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

98

4.6

while . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

99

4.7

do...while. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101

4.8

for...in . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103

4.9

Rekursive Funktionen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104

Kapitel 5

Objekte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105

5.1

Warum Objekte? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105

5.2

Objekte definieren. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105

5.3

Eigenschaften und Methoden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106

5.4

Vordefinierte Objekte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107

5.5

Selbst definierte Objekte. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107 for..in-Schleife. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110

5.6

js-Dateien . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111 Laden von Bibliotheksdateien . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111

JavaScript Kompendium

11

Inhaltsverzeichnis Kapitel 6

Browser- und Navigations-Objekte. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113

6.1

window . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113 alert() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115 confirm() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116 prompt() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116

6.2

navigator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116

6.3

History . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119

6.4

screen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119

Kapitel 7

Objekte zur Textbearbeitung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123

7.1

Der -Container . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123 Schriftgröße. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123 Schriftarten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125 Schriften-Referenz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125

7.2

Das string-Objekt. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127 Ein string-Objekt erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127 Zwei string-Objekte zu einem zusammenfügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127 Teile eines string-Objektes zurückgeben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129

7.3

Suchen mit regulären Ausdrücken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130 Beispiele zu regulären Ausdrücken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132

Kapitel 8

Formulare. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137

8.1

Tabellen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137 Grundaufbau einer Tabelle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137 Daten eintragen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138 Formatierung von Tabellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139 Text in Tabellen ausrichten. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140 Tabellen-Referenz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142

8.2

Formulare erstellen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158 Textfelder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159 Radio- und Checkboxes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160 Auswahlmenüs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162 Formulare absenden und löschen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162 E-Mail-Formulare auswerten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166 Formular-Referenz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167

12

JavaScript Kompendium

Inhaltsverzeichnis 8.3

Formularinhalte überprüfen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 191 Formularinhalte versenden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197

Kapitel 9

Events. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199

9.1

Warum Events? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199

9.2

Event-Handler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200 onAbort. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202 onBlur. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202 onChange . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202 onClick . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202 onDblClick. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203 onError . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203 onFocus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204 onKeyDown. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204 onKeyPress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204 onKeyUp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205 onLoad . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205 onMouseDown . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206 onMouseMove. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206 onMouseOut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206 onMouseOver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207 onMouseUp. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207 onReset . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207 onSubmit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208 onUnload . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208

9.3

Event-Capturing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208 Netscape Communicator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208 Internet Explorer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210

9.4

Das Event-Objekt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212 Netscape . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212 Internet Explorer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214

Kapitel 10

Rahmen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217

10.1

Eine Seite in Rahmen unterteilen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217 Rahmen gezielt ansprechen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220 Browser ohne Rahmenunterstützung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221 Rahmen-Referenz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 222

JavaScript Kompendium

13

Inhaltsverzeichnis 10.2

Menüs in einer Rahmenseite. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226 Mehrere Frames auf einmal ändern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228

Kapitel 11

Multimedia . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231

11.1

Farben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231 Textfarben ändern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232 Hintergrundfarbe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233

11.2

Grafiken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234 Grafiken anzeigen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234 Grafiken ausrichten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235 Grafiken als Anker für Links nutzen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238 Hintergrundgrafiken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238 Videos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239 Grafik-Referenz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241

11.3

Musik und Geräusche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 246 Musik einfügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247 Geräusche einfügen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247 Audio-Referenz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248

11.4

Animation mit JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253 Was ist eine Animation? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253 Slideshow oder Animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253

11.5

Sound mit JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256

Kapitel 12

Einbindung von Java-Applets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257

12.1

Einbinden in HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257 -Referenz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257

12.2

Kommunikation von JavaScript und Java . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260 Java aus JavaScript ansprechen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260

Kapitel 13

Stylesheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263

13.1

Eine Stil-Datei anlegen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263

13.2

Ein »Stylesheet« einbinden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264

13.3

Den eigenen Stil definieren . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265 Farben . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265 Schriftarten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267 Textausrichtung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268 Hintergrund . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273

14

JavaScript Kompendium

Inhaltsverzeichnis Übersicht . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274 13.4

JavaScript und Stylesheets. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274

Kapitel 14

Cookies. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279

14.1

Wie werden Cookies verarbeitet? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280

14.2

Cookies setzen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281

14.3

Cookies lesen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281

14.4

Ablaufdatum . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282

14.5

Weitere Eigenschaften von Cookies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284

TEIL 2

PRAXIS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285

Kapitel 15

DHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287

15.1

Internet Explorer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287 Dynamischer Zugriff auf HTML-Elemente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287 Cursor verändern. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289 Filter. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 290 Mehrere Filter auf einmal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315 Menüs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316 Datenbankunterstützung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 321

15.2

Netscape . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327 Menü mit Layern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328

Kapitel 16

Beispielprojekt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335

16.1

Planungsphase . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337 Homepageanforderungen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337 Zielgruppenbestimmung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339 Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340 Browserunterstützung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 343

16.2

Redaktionsphase. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344 Texte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344 Grafiken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345 Sonstige Multimediaelemente. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345

16.3

Entwicklungsphase . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346 Dateistrukturen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346 Frameseiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 350

JavaScript Kompendium

15

Inhaltsverzeichnis HTML-Seiten . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 355 Menüführung. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 356 16.4

Testphase . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Rechtschreibfehler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Sachliche Fehler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Unterbrochene Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Programmierfehler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Kompatibilitätsfehler. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

16.5

Veröffentlichungsphase. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 372 Upload . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 372 Anmeldung an Suchmaschinen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373

Kapitel 17

Praxisführer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 375

17.1

Effekte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Hover-Schaltfläche. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Spezialüberschrift . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Statuszeilen-Laufschrift . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Newsticker . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Vollbild . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

375 375 375 378 379 382

17.2

Zeit. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Kalender . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Countdown . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Aktualisierungsdatum. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Sanduhr . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

382 382 383 385 386

17.3

Hintergrundeffekte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 387 Bewegtes Bild im Hintergrund. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 387 Scrollender Hintergrund . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 389

17.4

Drag&Drop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 390

17.5

Browsererkennung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Netscape 6 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Netscape Navigator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Internet Explorer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Alle drei Browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Direkt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

17.6

Fehler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 398 Fehlereingrenzung . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 398 Fehlerspeicher. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 399

16

371 371 371 371 371 371

392 392 393 395 395 397

JavaScript Kompendium

Inhaltsverzeichnis 17.7

Abfangen der rechten Maustaste . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 400 Bilder sichern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 401 Drag&Drop unterdrücken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 404

17.8

Drucken aus JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 405

17.9

Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 406 Button. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 406 Grafiken . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 407 Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 408 URL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 408

17.10

Menüs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 409 Drop-down-Menü . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 409 Hereinfliegendes Menü . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 410 Menü (grafiktauglich) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 413

17.11

Maus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 416 Mausposition. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 416 Grafik verfolgt den Mauszeiger . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417

17.12

Grafik. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 420 Slideshow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 420

17.13

Anwendungen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 422 Eurorechner . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 422 Dreh- und Tauschpuzzle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 424

Anhang A

JavaScript-Referenz. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 433

A.1

Objekte, Methoden und Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 433 Anchor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 433 Applet. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 434 Area . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 435 Array . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 435 Boolean . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 445 Button. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 447 Checkbox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 450 Date . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 454 document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 461 event . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 467 FileUpload. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 470 Form. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 473

JavaScript Kompendium

17

Inhaltsverzeichnis Frame . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 475 Function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 475 Hidden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 479 History . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 480 Image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 482 java. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 484 JavaArray . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 484 JavaClass . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 485 JavaObject . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 486 JavaPackage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 486 Layer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 486 Link . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 493 location . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 496 Math . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 499 MimeType . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 504 navigator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 505 netscape . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 508 Number. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 508 Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 510 Option. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 513 Packages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 514 Password . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 515 Plugin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 517 Radio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 517 RegExp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 520 Reset . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 526 screen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 528 Select . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 530 String . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 532 Style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 538 Submit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 545 sun . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 547 Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 547 Textarea . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 550 window . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 552

18

JavaScript Kompendium

Inhaltsverzeichnis A.2

Top-Level-Properties und -Funktionen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 564 escape () . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 565 eval () . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 565 Infinity. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 566 isFinite (). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 566 isNaN () . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 566 NaN . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 567 Number () . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 567 parseFloat () . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 568 parseInt () . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 568 String () . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 569 taint () . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 569 undefined . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 569 unescape (). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 569 untaint (). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 570

A.3

Event-Handler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 570 onAbort. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 572 onBlur. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 572 onChange . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 572 onClick . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 573 onDblClick. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 573 onDragDrop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 573 onError . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 574 onFocus . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 574 onKeyDown. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 574 onKeyPress . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 575 onKeyUp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 575 onLoad . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 576 onMouseDown . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 576 onMouseMove. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 577 onMouseOut . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 577 onMouseOver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 577 onMouseUp. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 578 onMove. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 578 onReset . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 578 onResize . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 579 onSelect . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 579

JavaScript Kompendium

19

Inhaltsverzeichnis onSubmit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 579 onUnload. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 580 Anhang B

Reservierte Wörter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 581

Anhang C

Umformungen von Sonderzeichen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 583

Anhang D

Vordefinierte Farbwerte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 587

Anhang E

Umrechnung von Zahlen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 593

Anhang F

Die wichtigsten MIME-Typen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 603

Anhang G

Glossar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 607

Anhang H

Die CD-ROM zum Buch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 613

Anhang I

Wichtige Seiten im WWW . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 615

I.1

JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 615

I.2

Server-side JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 618

I.3

HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 620

I.4

Browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 622

I.5

Über dieses Buch. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 624 Stichwortverzeichnis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 627

20

JavaScript Kompendium

Vorwort

Sehr geehrte Leserin, sehr geehrter Leser, die Sprache HTML ist längst nicht mehr ausreichend, wenn man ansprechende Internetseiten erstellen möchte. Es fehlt an allen Ecken und Enden an Interaktions- und Kontrollmöglichkeiten. Deshalb haben Sie schon den ersten Schritt in die richtige Richtung getan, indem Sie sich dieses Buch zu Hilfe genommen haben. Mit JavaScript erhalten Sie genau die Erweiterung der Spielräume, die man benötigt, um einem Internetanwender den Komfort zu geben, den er inzwischen von den meisten Homepages gewohnt ist: Animationen, Warenkörbe, Formularkontrolle, erweiterte Navigation, bessere Rahmenunterstützung und zeitgesteuerte Aktionen sind nur einige wenige Anwendungsgebiete, die Sie mit JavaScript verwirklichen können. JavaScript wurde in einer Kooperation von Netscape und Sun Microsystems entwickelt und im Netscape Navigator 2.0 eingeführt. Ziel war es, eine an Java und C angelehnte Scriptsprache zu schaffen. Auch wenn die Namen Java und JavaScript oft verwechselt werden, weisen die dahinter stehenden Sprachen natürlich große Unterschiede auf. Im Unterschied zu Java ist JavaScript als interpretierte Sprache in der Handhabung viel einfacher. Ihr Vorteil ist, dass man keinen Compiler braucht, sondern den Quelltext einfach in eine HTML-Seite integrieren kann. JavaScript ist in Sachen objektorientierter Programmierung sehr flexibel. Es lassen sich Funktionen und Klassen aufbauen, die nicht voraussetzen, dass alle übergebenen Objekte einem starren Muster entsprechen. Es reicht aus, wenn die verwendeten Methoden und Eigenschaften des übergebenen Objekts existieren. Sicher stellen Sie sich einige Fragen zum Inhalt dieses Buches. Deshalb möchten wir an dieser Stelle einen kurzen Einblick in die Voraussetzungen und die Strukturierung der Inhalte geben.

JavaScript Kompendium

21

Vorwort

Für wen wurde dieses Buch geschrieben? Die Kompendium-Reihe vom Markt+Technik-Verlag wendet sich an grundsätzlich alle Nutzer in den Stufen Umsteiger, Fortgeschrittene, Semi-Profis, Praxisanwender, Programmierer und Selbstlernende. Wenn Sie sinnvoll mit diesem Buch arbeiten möchten, sollten Sie also Kenntnisse im Umgang mit Ihrem Computer und dem darauf installierten Betriebssystem haben. Vorkenntnisse in der Programmierung und Kenntnisse in HTML sind von Vorteil, aber nicht zwingend erforderlich. Außerdem sollten Sie sich in den Grundzügen im Umgang mit dem Internet auskennen.

Was behandelt dieses Buch? Ziel des Buches ist es einerseits, Sie mit JavaScript vertraut zu machen. Andererseits soll dieses Kompendium als Nachschlagewerk dienen und Ihnen beim täglichen Umgang mit dieser Sprache zur Seite stehen. Das Buch ist in drei Teile plus Inhalt und Index gegliedert:

Inhalt Es gibt zwei Inhaltsverzeichnisse. In der Inhaltsübersicht finden Sie die Überschriften der einzelnen Kapitel, um eine grobe Orientierung zu haben, wenn Sie schnell ein bestimmtes Hauptthema auffinden möchten. Der detaillierte Inhalt fällt im Gegensatz zu anderen Büchern recht umfangreich aus. Das Ziel ist es, auch sehr spezielle Textstellen (zum Beispiel die Beschreibung einer bestimmte Methode eines Objekts) nach Themen sortiert zu finden.

Know-how Dieser Teil führt Sie in die wichtigsten Themengebiete von JavaScript ein. Dabei werden auch die themenspezifischen HTML-Tags erklärt und anschließend als Kurzreferenz zusammengestellt. JavaScript ist sehr stark von HTML abhängig. Deshalb muss man in einem JavaScript-Handbuch auch auf diese Sprache teilweise recht detailliert eingehen. Wer zum Beispiel keine HTML-Formulare erstellen kann, wird diese auch nicht mit JavaScript überprüfen können.

Praxis Im Praxisteil stellen wir Ihnen Schritt für Schritt ein komplettes Beispielprojekt vor. Wir werden die Entstehung der Website des Stockumer Hofes und die darin enthaltenen JavaScript-Elemente genau unter die Lupe nehmen. 22

JavaScript Kompendium

Wie liest man dieses Buch?

Vorwort

Anhang Im Anhang finden Sie eine JavaScript-Referenz und hilfreiche Tabellen, die Sie beim Umgang mit JavaScript unterstützen.

Index Sie finden wie gewohnt Seitenverweise zu den angegebenen Stichwörtern. Außerdem gibt es kursiv formatierte Verweise auf Seiten, wo das entsprechende Stichwort besonders ausführlich dargestellt wird. Sie können also bereits beim Nachschlagen differenzieren.

Wie liest man dieses Buch? Vielleicht denken Sie: »Wie jedes Buch, von vorne nach hinten.« Das ist nicht ganz richtig. Wer noch nicht mit JavaScript in Berührung gekommen ist, sollte möglichst so vorgehen. Er folgt dann einem roten Faden, denn die einzelnen Kapitel des Abschnittes »Know-how« bauen aufeinander auf. Wenn Sie allerdings schon JavaScripts geschrieben haben, sollten Sie bei auftretenden Fragen das Stichwortverzeichnis oder das detaillierte Inhaltsverzeichnis aufsuchen, um zügig die richtige Stelle im Buch zu finden, an der das Thema besprochen wird. Außerdem ist für Sie dann die JavaScript-Referenz im Anhang von großer Bedeutung.

Icons Wir verwenden in diesem Buch folgende Icons: Mit diesem Icon werden wichtige Textstellen markiert. Wenn Sie ein Kapitel nur überfliegen, sollten Sie so gekennzeichnete Passagen auf jeden Fall sorgfältig durchlesen. ICON ANFANG

Auf diese Weise kennzeichnen wir zusätzliche Informationen, welche für das Arbeiten mit dem entsprechenden Thema hilfreich sein können.

ICON ANFANG

Dieses Icon markiert einen Abschnitt, in dem wir Ihnen einen Tipp geben.

ICON ANFANG

JavaScript Kompendium

23

Vorwort Manchmal verweisen wir auf Inhalte der beigefügten CD-ROM. Diese Stellen werden mit dem nebenstehenden Icon gekennzeichnet.

ICON ANFANG

Ab und zu kommt es vor, dass wir etwas weiter ausholen, um ein Thema zu erklären. Ein solcher Exkurs wird auf diese Weise gekennzeichnet.

ICON ANFANG

Danksagung An dieser Stelle möchten wir uns bei einigen Personen bedanken, die uns bei diesem Buch besonders unterstützt haben. Zuerst ist da die Familie Hülsmann zu nennen, die uns erlaubte, die neue Website des Stockumer Hofes als Beispielprojekt im Praxisteil dieses Buches zu besprechen. Ein Dankeschön geht an Christian Wenhardt, der uns nicht wegen unterlassener Hilfeleistung verklagte, denn wir konnten wegen der letzten Arbeiten an diesem Buch leider nicht bei seinem Umzug mithelfen. Ganz besonders möchten wir uns bei unserer Schwester Verena und unserem Schwager Jürgen bedanken, die im Vorwort zum letzten Buchprojekt nicht gesondert genannt worden sind, obwohl sie eigentlich Anspruch darauf gehabt hätten. Statt eines Dankes ist für die Programmierer im Internetrollenspiel EPACRIS wohl eher eine Entschuldigung für unsere lange Abwesenheit fällig. Trotzdem: Danke für Euer Verständnis. Ähnlich gelagert ist der Fall bei der Firma Hieke Ingenieurbüro Data GmbH, die ein wenig länger auf die Arbeitskraft von Elmar verzichten musste. Vielen Dank für die Ruhe, die Sie bewahrt haben. Auch wenn wir in der Widmung schon darauf hingewiesen haben, möchten wir es an dieser Stelle nicht versäumen, nochmals unseren Eltern für ihre Unterstützung zu danken.

Elmar und Ingo Dellwig

24

Werne im November 2000

JavaScript Kompendium

Elmar und Ingo Dellwig

... sind Geschwister und in ihrem Bekanntenkreis die Adresse Nummer eins, wenn es um Computer-, Internet- oder Programmierfragen geht. In Kürze werden sie gemeinsam die von Ingo Dellwig im Jahre 1997 gegründete Softwarefirma SPECTROsoftware als GmbH weiterführen. Die bisher hauptsächlich in der Internetprogrammierung tätige Firma wird um einige weitere Abteilungen im Softwarebereich wachsen. Elmar Dellwig (rechts) ... ist seit vielen Jahren begeisterter Computeranwender, was sich auch für seine Ausbildung als Informationstechnischer Assistent bezahlt gemacht hat. Neben dem Informatikstudium an der FH Dortmund jobbte er als Hotliner für einen internationalen Onlinedienstanbieter, was seinen Wissensstand in Sachen Internet stark erweiterte. Eine Leidenschaft von Elmar Dellwig ist die Hardware. Kaum ein fehlerhaftes System verweigert nach seinem Eingreifen weiterhin den Dienst. Wenn es um Computernetzwerke geht, kennt er sich ebenfalls gut aus. Ihm obliegt in der Firma SPECTROsoftware die komplette Netzwerkadministration in allen Hardware- und Betriebssystemfragen. Ingo Dellwig (links) ... ist ein begeisterter und engagierter Internetnutzer, der schon seit einigen Jahren seine eigene Homepage unterhält. Er beschäftigt sich bereits seit 1986 mit Computern. Durch seine zusätzliche Tätigkeit an der Hotline eines großen Onlinedienstanbieters sammelte er neben seinem Informatikstudium an der Universität Dortmund bereits Erfahrungen zum Thema Internet. Während dieser Zeit wurde er immer wieder mit den Problemen der Anwender bei der Erstellung einer eigenen Homepage konfrontiert. Mit SPECTROsoftware veranstaltete er neben der Homepageproduktion SchuJavaScript Kompendium

25

Elmar und Ingo Dellwig lungen für mittelständische Unternehmen. Zur Zeit der Firmengründung erschien auch sein erstes Buch zum Thema Homepage, dem noch viele Titel aus den Bereichen Internet, Hardware und Programmierung folgen sollten. Mit diesem Kompendium erscheint inzwischen sein zehntes Werk.

26

JavaScript Kompendium

Teil 1 Know-how Dieser Abschnitt soll Sie mit den Techniken von JavaScript vertraut machen. Lesen Sie hier mehr zu folgenden Themen:

Voraussetzungen

29

Kapitel 1 HTML-Grundlagen

35

Kapitel 2 JavaScript-Grundlagen

75

Kapitel 3 Funktionen

91

Kapitel 4 Schleifen und Verzweigungen

95

Kapitel 5 Objekte

105

Kapitel 6 Browser- und Navigations-Objekte

113

Kapitel 7 Objekte zur Textbearbeitung

123

Kapitel 8 Formulare

137

Kapitel 9 Events

199

Kapitel 10 Rahmen

217

Kapitel 11 Multimedia

231

Kapitel 12 Einbindung von Java-Applets

257

Kapitel 13 Stylesheets

263

Kapitel 14 Cookies

279

Voraussetzungen

JavaScript ist eine Programmiersprache, die im Internet – genauer im »World Wide Web« (WWW) – eingesetzt wird. Üblicherweise ist ein solches Script in einen HTML-Text eingebettet. »HTML« steht für »HyperText Markup Language« und ist die eigentliche Standardsprache im WWW. HTML-Dateien (und somit auch JavaScript-Programme) bestehen aus normalem Text. Deshalb genügt ein einfacher Texteditor, um JavaScript zu programmieren. Natürlich möchten wir auch Ergebnisse sehen. Dazu wird ein »WWW-Betrachtungsprogramm« (Browser) benötigt. Beide Programme müssen einige Anforderungen erfüllen, die wir im Folgenden aufzeigen werden. Da wir die Seiten irgendwo ablegen müssen und nicht lange herumsuchen möchten, bitten wir Sie, im Stammverzeichnis einen Ordner namens JS anzulegen. Hier werden wir alle JavaScript-Dateien abspeichern. ICON ANFANG Browser

ICON ENDE

Da niemand den HTML- oder JavaScript-Quelltext direkt lesen möchte, muss ein Dolmetscher her. Das Programm, das dafür eingesetzt wird, nennt man Browser. Ein solches Programm liest also den Quelltext Zeile für Zeile durch und befolgt die darin enthaltenen Anweisungen. Manchmal muss nur Text dargestellt werden, immer öfter sollen aber auch Bilder nachgeladen und angezeigt werden. Ein Browser setzt nicht zuletzt auch Ihren Befehl um, der besagt, dass jetzt eine andere Seite nachgeladen werden soll, die auf der aktuellen Seite vorgeschlagen wurde. Außerdem wird der Browser auch JavaScript-Programme übersetzen und ablaufen lassen. Er dient hier also als Compiler für JavaScript. Man kann aktuelle Browser-Versionen über das Internet erhalten. Zu diesem Thema erhalten Sie noch mehr Informationen im Anhang I. Es gibt eine Vielzahl von qualitativ sehr unterschiedlichen Browsern. Der ICON ANFANG von allen ist »LYNX«. Es handelt sich hier um einen reiwohl primitivste nen Text-Browser. Es ist also nicht möglich, damit Grafiken anzuzeigen. Auch JavaScript ist in diesem Programm nicht berücksichtigt. Deshalb ist er für unsere Zwecke absolut ungeeignet. Man sollte dennoch immer berücksichtigen, dass es noch einige Anwender gibt, die keine höherwertigen JavaScript Kompendium

29

Voraussetzungen Browser nutzen können, da diese auf alten Computern nicht lauffähig sind. Diese Anwender werden also nicht in den Genuss Ihrer Scripts kommen. In diesem Buch werden Sie aber auf Alternativen hingewiesen. Der älteste Browser, den wir auftreiben konnten, heißt LYNX.

Als Nächstes wäre Mosaic zu nennen. Dieses Programm kann zwar schon mit Grafiken arbeiten, aber bei JavaScript hält es ebenfalls nicht mehr mit. Mosaic ist ebenfalls nicht für JavaScriptProgrammierung zu gebrauchen.

Deshalb empfehlen wir entweder den Netscape Navigator bzw. Netscape Communicator oder den Microsoft Internet Explorer. Wenn Sie einen Netscape Navigator 4.06 oder einen Internet Explorer 5.0 erhalten können, sind Sie für alle Kapitel optimal ausgerüstet.

30

JavaScript Kompendium

Browser

Voraussetzungen

JavaScript-Version

100% kompatibel

nicht 100% kompatibel

JavaScript 1.0

Navigator 2.0

Microsoft Internet Explorer 3.x

JavaScript 1.1

Navigator 3.0

Opera 3.x

JavaScript 1.2

Navigator 4.0-4.05

Microsoft Internet Explorer 4.x

JavaScript 1.3

Navigator 4.06-4.75

Microsoft Internet Explorer 5.x

JavaScript 1.5

Navigator 6.0

Welche Browser unterstützen welche JavaScript-Versionen?

Der Microsoft Internet Explorer (hier in der Version 5.0) ist bedingt für unsere Zwecke geeignet.

Der Netscape Communicator (hier in der Version 4.7) ist JavaScript-tauglich.

JavaScript Kompendium

31

Voraussetzungen

Texteditor Irgendwie muss man dem Rechner mitteilen, wie die JavaScript-Homepage später aussehen soll. Dazu reicht schon ein ganz einfacher Texteditor. Wenn Sie zum Beispiel Windows als Betriebssystem verwenden, wird der Editor »Notepad« mitgeliefert. Sie können ihn im Programmordner ZUBEHÖR oder mit Windows 95/98 unter START / PROGRAMME / ZUBEHÖR / EDITOR finden. Wenn Sie einen anderen Editor bevorzugen, sollten Sie darauf achten, dass Sie nur reinen Text abspeichern. Bei einer Word-Datei, die Sie im .doc-Format abspeichern, werden neben Ihrem HTML-Text noch Steuerzeichen für die Formatierung abgespeichert. Diese können später vom Browser nicht verarbeitet werden und machen Ihre Datei für unsere Zwecke unbrauchbar. Hier ein Beispiel: TEST

Dieser Quelltext soll später das Wort TEST auf den Bildschirm bringen. Was die einzelnen Befehle bedeuten, werden Sie natürlich im Verlauf des Buches noch lernen. Speichert man diese Datei in Word nun im .doc-Format ab, sieht der Quelltext später so aus: Der Quelltext ist nicht wiederzuerkennen ...

32

JavaScript Kompendium

Texteditor

Voraussetzungen

Wenn wir uns die Seite nun im Browser anschauen, erhalten wir ebenfalls eine recht kreative Anzeige, die aber nichts mit unserem eingetippten Quelltext zu tun hat: ... und auch das Ergebnis ist nicht zufriedenstellend.

Wie Sie solche Fehler vermeiden, wird im späteren Verlauf der Einführung beschrieben. Wichtig ist vorerst, dass Sie sich für einen Texteditor entscheiden, der normalen Text, ohne Steuerzeichen, abspeichern kann.

JavaScript Kompendium

33

1

HTML-Grundlagen

Wie wir eingangs bereits angekündigt haben, ist es wegen der Integration von JavaScript in HTML-Dokumente von Vorteil, sich einen kurzen Überblick über die Sprache HTML zu verschaffen. Da dieses Buch »JavaScript Kompendium« und nicht etwa »HTML Kompendium« heißt, werden wir uns an dieser Stelle recht kurz fassen, und Ihnen nur die Grundlagen vermitteln.

1.1

Was ist HTML?

Die Abkürzung »HTML« steht (wie gesagt) für »HyperText Markup Language«. Diese Sprache ermöglicht die Übertragung und Darstellung von Internetseiten im World Wide Web. Dabei werden die einzelnen Seiten durch Links verknüpft. So gelangt man durch einen Klick auf ein Schlüsselwort oder auf eine Grafik zur nächsten Seite. Das komplette WWW lässt sich so erforschen. Ein weiterer wichtiger Aspekt von HTML ist die Universalität. Da HTMLSeiten im ASCII- bzw. Textformat gespeichert werden, können sie auf fast allen Computern verarbeitet werden. Ein PC kommt damit genauso klar wie ein Macintosh, ein Unix-System oder sogar ein Handheld-PC.

1.2

HTML-Grundlagen

In diesem Kapitel möchten wir Sie in den Umgang mit HTML einführen. Hier werden Sie Ihre erste HTML-Datei erstellen, abspeichern und ansehen. Außerdem lernen Sie die wichtigsten Tags kennen, die Sie bei der Erstellung von Internetseiten mit HTML benötigen.

1.2.1

Hello World!

Seit jeher ist es Tradition, dass das erste Programm in einer neuen Programmiersprache die Welt begrüßt. Da die meisten Programmiersprachen in Englisch gehalten sind, geben wir nun den Schriftzug Hello World! auf dem Bildschirm aus. Wenn Sie diese Ausgabe sehen, haben Sie erfolgreich Ihr erstes Programm generiert und ausgeführt. Also frisch ans Werk ... JavaScript Kompendium

35

Kapitel 1

HTML-Grundlagen Starten Sie Ihren Lieblings-Texteditor und tragen Sie die folgenden Zeilen ein.

Listing 1.1: HTML begrüßt die Welt.

Hello World!

Das Tag markiert den HTML-Teil des Dokuments. Damit wir das Ergebnis ansehen können, müssen wir den Quelltext auf der Festplatte abspeichern. Legen Sie dazu bitte ein Verzeichnis namens JS auf Ihrer Festplatte an. Speichern Sie dann unser erstes Dokument in die Datei HelloWorld.html. Bitte beachten Sie, dass der Quelltext im Textformat abgespeichert werden muss. Wenn Sie ein HTML-Dokument zum Beispiel im Word-Format abspeichern, werden zusätzliche Steuerzeichen abgespeichert, die eine HTML-Datei unbrauchbar machen. ICON ANFANG

Wie schaut man sich jetzt das Ergebnis an? Wenn Sie einen Internetbrowser – wie zum Beispiel den Microsoft Internet Explorer oder den Netscape Communicator – installiert haben, können Sie Ihre Datei über den Explorer durch einen simplen Doppelklick öffnen. Abbildung 1.1: So sieht HelloWorld.html im Internet Explorer aus.

Sie haben nun Ihre erste HTML-Datei geschrieben und vom Browser anzeigen lassen. Sie haben die beiden Kennzeichnungen kennen gelernt, die eine HTML-Datei von einer anderen Textdatei unterscheiden. Das ist zum einen die Dateiendung .htm oder .html und zum anderen die Umschließung des HTML-Codes mit den Tags und . Was genau sind nun diese Tags?

36

JavaScript Kompendium

HTML-Grundlagen

1.2.2

Kapitel 1

Tags

Wenn man beispielsweise einen Textabschnitt in fetter Schrift darstellen möchte, sollte der Browser wissen, wo der fett gedruckte Text beginnt und wo er endet. Dazu muss man einen Start- und einen Endpunkt im Text markieren. Fetter Text wird in HTML mit dem Tag (engl. bold = fett gedruckt) gekennzeichnet. Sicher haben Sie inzwischen erkannt, dass sich Tags durch die spitzen Klammern (< und >) von normalem Text unterscheiden. Wenn der Fettdruck wieder abgeschaltet werden soll, wird ein schließendes Tag verwendet. Dieses unterscheidet sich vom öffnenden Tag durch den Querstrich (/). Das Ende einer fett gedruckten Passage wird also mit gekennzeichnet. Wenn man einen Textbereich mit einem öffnenden und einem schließenden Tag umrahmt, nennt man dieses Gebilde auch Container. Es folgt ein passendes Beispiel: ICON ANFANG Dieser Text ist noch normal formatiert, während die nächsten drei Worte in fett gedruckter Schrift auf dem Bildschirm erscheinen.

Listing 1.2: Fettdruck

Schauen wir uns das Ergebnis im Browser an: Abbildung 1.2: Wie versprochen werden die markierten Worte tatsächlich fett gedruckt.

1.2.3

Kopf und Körper

Man kann HTML-Seiten in zwei Teile zerlegen. Der Erste wird Kopf genannt und wird durch gekennzeichnet. Da der Kopf einen Bereich umfasst, gibt es auch hier ein schließendes Tag . Alles, was im Kopf der HTML-Seite angegeben wird, ist später nicht direkt auf der Seite zu sehen, sondern macht sich anders bemerkbar. Sie sollten zum Beispiel einen

JavaScript Kompendium

37

Kapitel 1

HTML-Grundlagen Titel für Ihre Homepage wählen. Er wird in den meisten Browsern in der Kopfleiste neben dem Browsernamen angegeben. Der Titel wird durch Container gekennzeichnet. Zu jedem Kopf gehört ein Körper. Im HTML-Körper werden alle Informationen angegeben, die direkt auf der Seite angezeigt werden sollen. Der Körper wird von und eingegrenzt. Wenn wir den HelloWorldCode um Kopf und Körper ergänzen, sieht der Quelltext so aus:

Listing 1.3: Ein Titel

Hello World!

Nun erscheint das Wort HelloWorld-Titel in der Titelleiste.

1.2.4

Attribute

In manchen Fällen reichen Tags allein nicht aus. Nehmen wir an, wir möchten eine Trennlinie in ein Dokument einfügen. Das geschieht mit dem Tag

---

. Standardmäßig werden Trennlinien vom Browser in 3D-Optik mit einem Schatten versehen. Manchmal ist dieser Effekt aber nicht erwünscht. Dann wird allerdings kein zusätzliches Tag eingefügt, das den Schattenwurf verhindert, sondern das Tag erhält den Zusatz noshade (engl. kein Schatten). Die Schreibweise eines solchen Tags mit Attribut ist dann

---

. Hier wird dann eine Trennlinie ohne Schatten erzeugt. Zusätzlich gibt es bei vielen Attributen die Möglichkeit, Werte zu übergeben. Wenn wir die Breite unserer Linie um die Hälfte reduzieren möchten, ist dafür das Attribut width zuständig. Ein

---

macht aber keinen Sinn, da der Browser ja nicht wissen kann, dass wir genau eine halblange Linie erzeugen möchten. Deshalb weisen wir width den Wert 50% zu. Das sieht dann so aus:

---

. Die Linie wird nun in halber Breite angezeigt. Attribute lassen sich auch kombinieren. So erzeugt

---

eine Linie ohne Schattenwurf und von halber Bildschirmbreite. Alle Beispiele erkennen Sie in der hier vorgestellten Reihenfolge im nachfolgenden Screenshot wieder:

38

JavaScript Kompendium

HTML-Grundlagen

Kapitel 1 Abbildung 1.3: Die vier vorgestellten Trennlinienformate

Viel mehr gibt es zur HTML-Syntax nicht zu wissen. Sie kennen nun Tags und deren Attribute.

1.2.5

HTML-Top-Level-Referenz

Hier finden Sie eine Übersicht über die soeben besprochenen Top-LevelTags sowie Dieser Beispieltext soll Ihnen zeigen, was mit Umformungen möglich ist.

Sehen Sie hier, wie man beispielsweise das Größerzeichen (>) in HTML-Text einfügen kann.

Listing 1.4: Umgeformte Sonderzeichen

Da wir nicht mit so alten Browsern arbeiten und auch HTML 4 sicher nicht von solchen Browsern unterstützt wird, werden wir Umlaute in den folgenden Beispielen nicht umformen. ICON ANFANG Es ist aber trotzdem wichtig, dass Sie wissen, worum es sich handelt, wenn Sie beispielsweise fremden Quelltext lesen. Falls Sie Sonderzeichen verwenden möchten, die von HTML selbst reserviert sind, gibt es nur die Möglichkeit, diese über Umformungen zu erzwingen.

Umformungen von Sonderzeichen werden auch Maskierungen genannt.

ICON ANFANG JavaScript Kompendium

45

Kapitel 1

HTML-Grundlagen

1.3.3

Überschriften

Damit eine HTML-Seite übersichtlich wird, ist es notwendig, Überschriften anzugeben und diese auch hervorzuheben. Dafür gibt es mehrere ganz leicht zu handhabende Tags. Für eine Hauptüberschrift sollte man

(engl. headline) verwenden. Für die untergeordneten Überschriften stehen dann noch die Tags

bis

zur Verfügung. Eine Überschrift ist natürlich ein Textbereich. Deshalb sind hier wieder schließende Tags notwendig (also

bis ). Ein Beispiel könnte so aussehen: Listing 1.5: Eine Anwendung von Überschriften

Speichermedien

In der heutigen Zeit gibt es eine Vielzahl von elektronischen Speichermedien. Diese werden grundsätzlich in magnetische und optische Speicher unterteilt.

Magnetische Speichermedien

Unter den magnetischen Datenträgern wären die Datenbänder und Disketten zu nennen.

Datenbänder

Datenbänder zeichnen sich durch eine hohe Speicherkapazität aus. Der Nachteil ist allerdings eine relativ langsame Schreib- und Lesegeschwindigkeit.

Disketten

Der gängige Diskettentyp ist die 3,5ööäöö-Diskette. Sie kann bis zu 1,44 MB Daten speichern.

Optische Speichermedien

In dieser Kategorie fallen besonders die CD-ROM und neuerdings die DVD ins Gewicht.

CD-ROM

Die CD-ROM fasst bis zu 700 MB Daten.

DVD

Die DVD (digital versatile disc) fasst bis zu 18 GB.

Hier sehen Sie das Ergebnis dieses Quellcodes:

46

JavaScript Kompendium

Das Textbild

Kapitel 1 Abbildung 1.4: Überschriften sind ganz einfach zu erzeugen.

Wie Sie sehen, ist in einem Überschrift-Endtag schon ein Zeilenumbruch enthalten. Ein zusätzliches
ist also nicht mehr notwendig.

1.3.4

Textpassagen hervorheben

Manchmal ist es nützlich, Wörter oder ganze Sätze hervorzuheben. Dazu hat man mehrere Tags eingerichtet: ... erlaubt es, Text fett auszugeben. Dieses Tag haben Sie ja

schon kennen gelernt. Wenn man ... verwendet, wird der Text kursiv dargestellt.

JavaScript Kompendium

47

Kapitel 1

HTML-Grundlagen Manchmal möchte man einfach eine andere Schriftart zur optischen Abhebung verwenden. Hier hilft weiter, denn diese Marke kann Text in Schreibmaschinenschrift darstellen. Einige Browser können ... interpretieren. Der so umrahmte Textabschnitt blinkt auf dem Bildschirm. Es gibt noch eine Vielzahl von weiteren Möglichkeiten, die allerdings sehr speziell werden und von den verschiedenen Browsern auch unterschiedlich interpretiert werden können.

1.3.5

Text ausrichten

In vielen Fällen ist es notwendig einen Textabschnitt in der Mitte der Seite zu zentrieren. Dabei hilft Ihnen ... . Wenn wir die neu erlernten Marken einsetzen, können wir schon den folgenden Quellcode erstellen: Listing 1.6: Verschiedene Textformatierungen

Dieser Text ist ganz normal an der linken Seite des Fensters ausgerichtet.
Dieser Text wird dagegen zentriert.
Man kann Texte auch fett, fett & kursiv oder auch nur kursiv darstellen.


Hier sehen Sie das Ergebnis im Internet Explorer. Abbildung 1.5: Man kann mit einfachen Mitteln wichtige Textteile hervorheben.

48

JavaScript Kompendium

Das Textbild

Kapitel 1

Wie Sie erkennen, kann man Hervorhebungsmarken durchaus ineinander verschachteln, denn ein Teil des Textes wird ja gleichzeitig fett und kursiv ausgegeben.

1.3.6

Formatierungs-Referenz

Hier finden Sie einige Tags, die an der Textgestaltung und -formatierung beteiligt sind. Tag / Attribut 2.0

X

3.0

3.2

4.0

Internet Explorer

Netscape

X

X

X

1.0

1.0

Text, der von ... umschlossen ist, wird im Fettdruck angezeigt. Tag / Attribut 2.0

3.0

3.2

4.0



Internet Explorer

Netscape

4.0B1

1.0

Dieses Tag lässt den eingerahmten Textblock blinken.
Tag / Attribut 2.0
clear

X

3.0

3.2

4.0

Internet Explorer

Netscape

X

X

X

1.0

1.0

X

X

1.0

1.0

Mit diesem Tag kann man einen Zeilenumbruch erzwingen. clear Dieses Attribut wurde ergänzt, um mit Bildern umzugehen, die durch das Attribut align in nach links oder rechts bewegt werden. Man kann es nun verwenden, um mit allen Objekten umzugehen, die durch align verschoben werden.

JavaScript Kompendium

49

Kapitel 1 Tabelle 1.5: Die Werte von clear in


HTML-Grundlagen

Wert

Bedeutung

none

Es wird ein ganz normaler Zeilenumbruch erzeugt.

left

Die Zeile wird umbrochen und die nächste Zeile so weit unten eingefügt, dass der linke Rand frei von Bildern (oder sonstigen Objekten) ist.

right

Die Zeile wird umbrochen und die nächste Zeile so weit unten eingefügt, dass der rechte Rand frei von Bildern (oder sonstigen Objekten) ist.

all

Die Zeile wird umbrochen und die nächste Zeile so weit unten eingefügt, dass beide Ränder frei von Bildern (oder sonstigen Objekten) sind.

Tag / Attribut

2.0

3.0



3.2

4.0

Internet Explorer

Netscape

X

X

1.0

1.0

Zentriert einen Textblock mitsamt allen anderen HTML-Elementen.

…

Tag / Attribut

2.0

3.0

3.2

4.0

Internet Explorer

Netscape

…

X

X

X

X

1.0

1.0

align

X

X

X

1.0

1.0

clear

X

Hier wird eine Überschrift erzeugt.

erzeugt die Überschrift ersten Grades und

eine Überschrift sechsten Grades. align Gibt die horizontale Ausrichtung der Überschrift an. Tabelle 1.6: Die Werte von align in

...

50

Wert

Bedeutung

center

Die Überschrift wird zentriert ausgerichtet.

left

Die Überschrift wird nach links ausgerichtet.

right

Die Überschrift wird nach rechts ausgerichtet.

JavaScript Kompendium

Das Textbild

Kapitel 1

clear Dieses Attribut wurde ergänzt, um mit Bildern umzugehen, die durch das Attribut align in nach links oder rechts bewegt werden. Man kann es nun verwenden, um mit allen Objekten umzugehen, die durch align verschoben werden. Wert

Bedeutung

none

Es wird ein ganz normaler Zeilenumbruch erzeugt.

left

Die Zeile wird umbrochen und die nächste Zeile so weit unten eingefügt, dass der linke Rand frei von Bildern (oder sonstigen Objekten) ist.

right

Die Zeile wird umbrochen und die nächste Zeile so weit unten eingefügt, dass der rechte Rand frei von Bildern (oder sonstigen Objekten) ist.

all

Die Zeile wird umbrochen und die nächste Zeile wird so weit unten eingefügt, dass beide Ränder frei von Bildern (oder sonstigen Objekten) sind.

Tabelle 1.7: Die Werte von clear in

bis

Tag / Attribut 2.0

X

3.0

3.2

4.0

Internet Explorer

Netscape

X

X

X

1.0

1.0

Mit diesem Tag kann man Text markieren, der kursiv dargestellt werden soll. <nobr> Tag / Attribut 2.0 <nobr>

3.0

3.2

4.0

Internet Explorer

Netscape

1.0

1.0

Markiert eine Textpassage, die keine automatisch generierten Zeilenumbrüche erhalten soll.

JavaScript Kompendium

51

Kapitel 1

HTML-Grundlagen

Tag / Attribut 2.0

3.0

3.2

4.0

Internet Explorer

Netscape

X

X

X

1.0

1.0

align

X

X

X

1.0

1.0

clear

X

X

Erzeugt einen Paragrafen. align Gibt die horizontale Ausrichtung innerhalb der Paragrafen an. Tabelle 1.8: Die Werte von align in

Wert

Bedeutung

center

Der Inhalt wird zentriert ausgerichtet.

left

Der Inhalt wird nach links ausgerichtet.

right

Der Inhalt wird nach rechts ausgerichtet.

clear Dieses Attribut wurde ergänzt, um mit Bildern umzugehen, die durch das Attribut align in nach links oder rechts bewegt werden. Man kann es nun verwenden, um mit allen Objekten umzugehen, die durch align verschoben werden. Tabelle 1.9: Die Werte von clear in

52

Wert

Bedeutung

none

Es wird ein ganz normaler Zeilenumbruch erzeugt.

left

Die Zeile wird umbrochen und die nächste Zeile wird so weit unten eingefügt, dass der linke Rand frei von Bildern (oder sonstigen Objekten) ist.

right

Die Zeile wird umbrochen und die nächste Zeile wird so weit unten eingefügt, dass der rechte Rand frei von Bildern (oder sonstigen Objekten) ist.

all

Die Zeile wird umbrochen und die nächste Zeile wird so weit unten eingefügt, dass beide Ränder frei von Bildern (oder sonstigen Objekten) sind.

JavaScript Kompendium

Das Textbild

Kapitel 1

<strike> Tag / Attribut 2.0

3.0

<strike>

3.2

4.0

Internet Explorer

Netscape

X

X

1.0

1.1

Zeigt den umschlossenen Text durchgestrichen an. <sub> Tag / Attribut 2.0

3.0

3.2

4.0

Internet Explorer

Netscape

<sub>

X

X

X

3.0B1

1.1

Gibt den umschlossenen Text tiefer gestellt wieder. <sup> Tag / Attribut 2.0

3.0

3.2

4.0

Internet Explorer

Netscape

<sup>

X

X

X

3.0B1

1.1

Gibt den umschlossenen Text hochgestellt wieder. Tag / Attribut 2.0

X

3.0

3.2

4.0

Internet Explorer

Netscape

X

X

X

1.0

1.0

Gibt den eingeschlossenen Text in der Schriftart Courier aus. Tag / Attribut 2.0

X

3.0

3.2

4.0

Internet Explorer

Netscape

X

X

X

1.0

3.0B5

Unterstreicht den eingeschlossenen Text.

JavaScript Kompendium

53

Kapitel 1

HTML-Grundlagen

1.4

Links

Ein Vorteil von HTML-Seiten zu normalem Text ist die Möglichkeit, Verknüpfungen zu anderen HTML-Seiten zu erzeugen. Durch diese Technik wird das »Surfen« im WWW erst möglich gemacht.

1.4.1

Interne Links

So eine Verknüpfung wird auch Link (Verbindung) genannt. Dabei spielt es keine Rolle, ob Sie zu einer Seite auf Ihrem eigenen Server, auf einem fremden Server oder vielleicht sogar innerhalb einer Seite springen möchten. In diesem Unterkapitel befassen wir uns erst einmal ganz allein mit Seiten, die auf dem gleichen Computer liegen wie die Ausgangsseite. Der folgende Code erzeugt eine Seite, die Sie bitte unter C:\js\a.htm speichern. Listing 1.7: Die Seite A

Sie sehen die Seite A.

Klicken Sie bitte hier, um zur Seite B zu gelangen.

Es folgt der Quellcode für die Seite C:\js\b.htm. Listing 1.8: Die Seite B

Sie sehen die Seite B.

Klicken Sie bitte hier, um zur Seite A zurückzugelangen.

Verknüpfungen werden in einer anderen Farbe dargestellt und unterstrichen. Neben der andersfarbigen und unterstrichenen Darstellung des Wortes »hier« fällt die Veränderung des Mauszeigers auf, wenn man ihn über dieses Wort bewegt. Klicken Sie bitte auf die hervorgehobene Stelle und Sie gelangen zur Seite B, auf der Sie einen Link zurück zur Seite A finden. Sie können also von der Seite A zur Seite B und wieder zurück springen. 54

JavaScript Kompendium

Links

Kapitel 1

Dieser Effekt wird durch das Tag ... ermöglicht. Dadurch wird ein so genannter Anker definiert. Dieser dient als Ansatzpunkt für die Verknüpfung, denn irgendwo muss der Betrachter der HTML-Seite ja klicken, um den Sprung zur nächsten Seite hervorzurufen. Dem Attribut href muss der Dateiname der Zielseite zugewiesen werden. Wenn Sie statt auf eine HTML-Seite auf ein anderes Dateiformat (zum Beispiel eine .exe- oder .zip-Datei) verweisen, wird auch diese vom Browser angezeigt, wenn ein entsprechendes Unterprogramm (Plug-In) installiert wurde. Abbildung 1.6: Hier hat der User die Wahl, ob er die Datei mit einem externen Programm öffnen oder doch lieber speichern möchte.

Wählt der Anwender die Speichern-Option, wird der Browser den Anwender fragen, wohin die Datei gespeichert werden soll. Die Datei wird danach aus dem Internet heruntergeladen und auf dem Computer des Betrachters gespeichert. Wenn Sie eine Verzeichnisstruktur aufgebaut haben, können Sie relative Pfadangaben verwenden. Der Browser sucht immer zuerst in dem Verzeichnis, in dem die Ausgangsdatei liegt. Wenn Sie zum Beispiel in der Datei C:\js\test\index.htm den Link verwenden, wird die Seite C:\js\test\start.htm aufgerufen. Mit wird die Seite C:\js\test\neu\start.htm angesprungen. verweist auf C:\js\start.htm und würde die Datei C:\js\neu\start.htm aufrufen.

1.4.2

Externe Links

Es wäre ziemlich langweilig, wenn der Betrachter nur zwischen Ihren eigenen Seiten wechseln könnte. Deshalb gibt es auch die Möglichkeit, eine Verknüpfung zu Seiten aufzubauen, die nicht von Ihnen stammen. JavaScript Kompendium

55

Kapitel 1

HTML-Grundlagen Wenn Sie später Ihre Seiten veröffentlichen, erhalten Sie eine Adresse, unter der Sie zu finden sind. So gibt es für jede Homepage eine eindeutige Adresse. Da HTML-Dateien mit dem Protokoll HTTP (HyperText Transfer Protocol) übertragen werden, beginnen diese Adressen immer mit http://. Danach folgt die Serverbezeichnung. Die meisten Anbieter nennen ihn »WWW«. Nun folgt die Domain, die angibt, wem dieser Server zugeordnet ist. Es handelt sich meist um den Namen der Anbieterfirma. Die Domain endet mit der Länderbezeichnung. So steht .de zum Beispiel für Deutschland und .com für Unternehmen, die meist in den USA zu finden sind. Nach der Landesbezeichnung kann man optional noch ein Verzeichnis und einen Dateinamen angeben. Das ist nicht immer nötig, da oft eine Startdatei existiert, die der Browser selbstständig findet. Eine Adresse könnte demnach so aussehen: http://www.firma.de/verz/unt_verz/datei.htm

Man kann also ohne weiteres mehrere Unterverzeichnisse angeben. Da diese Adresse frei erfunden ist, wird man hier keine Homepage finden, sondern es wird nur eine Fehlermeldung erscheinen. Wir geben jetzt einmal eine echte Adresse in das Feld ein, in dem Sie schon zuvor Ihre Seite angewählt haben. Wie wäre es mit: http://www.spectrosoftware.de/

Der Browser wird jetzt eine Verbindung mit dem Netzwerk aufbauen und nach einigen Sekunden Ladezeit erscheint die Homepage von SPECTROsoftware. Wenn Sie so einen »externen Link« in eine HTML-Seite einbringen möchten, geschieht dies nach folgendem Prinzip: Wer hier klickt, landet bei SPECTROsoftware.

Jetzt genügt ein Mausklick, und schon sind Sie da, wo Sie hin wollen.

1.4.3

Telnet

Da im Internet nicht nur das World Wide Web mit den Homepages vertreten ist, sondern auch andere Dienste angeboten werden, ist es nicht ausreichend, wenn man nur zwischen Seiten wechseln kann. Ein beliebter Dienst ist das »Telnet«. Man kann sich hier in einen anderen Rechner einwählen und dort direkt Befehle ausführen oder Programme ablaufen lassen. Das bietet unter anderem auch die Möglichkeit, Spiele zu erstellen, an denen mehrere Anwender gleichzeitig teilnehmen, obwohl sie in ganz anderen Ländern am Computer sitzen. Oder eine andere Möglichkeit wäre, online Flughäfen abzufragen, ob eine Maschine gelandet ist.

56

JavaScript Kompendium

Links

Kapitel 1

Da man den Dienst Telnet auch mit Adressen ansprechen muss, kann man ganz einfach Verknüpfungen erstellen. Man sollte dem Browser nur mitteilen, dass es sich um Telnet und nicht mehr um das Protokoll HTTP handelt. Insgesamt sieht das dann zum Beispiel so aus: Wer gerne Abenteuer erlebt, kann hier im Rollenspiel EPACRIS mitspielen.

Wenn Sie diesen Text wie gewohnt in eine HTML-Seite einfügen, können Sie jetzt über die Verknüpfung »EPACRIS« an dem gleichnamigen Spiel teilnehmen. Dazu startet der Browser ein Telnet-Programm. Abbildung 1.7: Der Startbildschirm von EPACRIS im Telnet-Fenster

Wenn der Browser bei Ihnen allerdings nur die Fehlermeldung ausgibt, dass er die Anwendung nicht finden konnte, dann sollten Sie ein Telnet-Programm einfügen. Beim Netscape geht das unter dem Menüpunkt OPTIONEN/ALLGEMEINE EINSTELLUNGEN/ANWENDUNGEN. (Windows 95/98 liefert dieses Programm in C:\windows\telnet.exe mit.) Der Microsoft Internet Explorer verfügt von Haus aus über dieses Programm. Wenn diese Anwendung erfolgreich geöffnet wurde, baut sie eine Verbindung zu der angegebenen Adresse auf. Hier ist es also epacris.mud.de. Wenn die Verbindung steht, erscheint ein kurzer Willkommenstext auf dem Bildschirm und Sie können sich einen Namen und ein Passwort aussuchen und am Spiel teilnehmen. Natürlich gibt es noch viel mehr Adressen, die sich mit ganz anderen Themen befassen.

1.4.4

FTP

Der Begriff »FTP« steht für »File Transfer Protocol«. Dieses Protokoll ist immer dann sinnvoll, wenn man Dateien übertragen möchte. Es gibt im Internet viele Anbieter, die Dateiarchive zur Verfügung stellen und zur JavaScript Kompendium

57

Kapitel 1

HTML-Grundlagen Übertragung genau dieses Protokoll anbieten. Wenn man zum Beispiel auf eine Dateiliste einer Softwarefirma zugreifen möchte, könnte die Verknüpfung dann so aussehen: Hier kann man die aktuellen Programme von Microsoft einsehen.

Der Browser wählt sich dann unter der angegebenen Adresse mit einem so genannten Gastzugang ein und zeigt die Dateiliste an. Abbildung 1.8: In den meisten Browsern ist ein FTP-Programm integriert.

Hier kann man jetzt wie in einem Dateimanager durch Ordner wechseln und auch Dateien empfangen, wenn man sie einfach anklickt.

58

JavaScript Kompendium

Links

1.4.5

Kapitel 1

E-Mail

Was wäre das Internet ohne elektronische Post? Auch dafür gibt es eine Alternative zur einfachen Angabe Ihrer E-Mail-Adresse im Text. Sie können nämlich eine Verknüpfung zu Ihrer persönlichen E-Mail-Adresse so angeben: Hier kann man eine E-Mail an einen Autor dieses Buches senden.

Im Gegensatz zu den anderen Protokollen wird bei mailto: kein // verwendet.

ICON ANFANG Den Teil ?subject=JavaScript Kompendium können Sie aus der Adresse auch

streichen. Er dient nur dazu, direkt einen Betreff in die E-Mail einzufügen.

ICON ANFANG Abbildung 1.9: Ein E-Mailfenster, das durch den HTML-Code aufgerufen wurde und neben der Adresse bereits einen Eintrag im BetreffFeld hat.

Probieren Sie es einfach mal aus und lassen Sie uns wissen, ob bisher alles funktioniert hat.

JavaScript Kompendium

59

Kapitel 1

HTML-Grundlagen

1.4.6

Sprünge innerhalb einer Seite

Nicht selten kommt es vor, dass man eine lange Liste veröffentlichen möchte. Dann ist es für den Anwender hilfreich, wenn er gezielt an bestimmte Stellen dieser Liste springen kann. Deshalb kann für das Tag das Attribut name angegeben werden. Eine alphabetisch sortierte Liste könnte diesen Eintrag enthalten: M

Nach dieser Zeile sollten alle Eintragungen der Liste folgen, die mit einem »M« beginnen. Der Buchstabe »M« wird auf der Seite später nicht als Verknüpfung erkennbar sein. Deshalb kann man ihn nicht anklicken. Er dient lediglich als Zielpunkt für diese Verknüpfung: Hier gelangen Sie zum ersten Eintrag, der mit M beginnt.

Wenn Sie diese Verknüpfung anklicken, gelangen Sie zum vorher definierten Zielpunkt. Damit ist es dann möglich, durch lange Seiten schnell zu navigieren.

1.4.7

Link-Referenz

In diesem Unterkapitel kam eigentlich nur ein interessantes Tag vor: Tag / Attribut 2.0

3.0

3.2

4.0

Internet Explorer

Netscape

X

X

X

1.0

1.0

accesskey

X

4.0B1

charset

X

coords

X



href

X

X

X

X

1.0

1.0

1.0

1.0

X

hreflang

60

X

methods

X

X

name

X

X

X

X

rel

X

X

X

X

rev

X

X

X

X

JavaScript Kompendium

Links

Kapitel 1

Tag / Attribut 2.0

3.0

shape

X

3.2

4.0

Internet Explorer

X

tabindex

X

4.0B1

target

X

3.0A1

X

4.0B1

title

X

X

X

2.0

X

type urn

Netscape

X

X

Das wohl wichtigste Tag in HTML ist , denn es definiert (mit dem Attribut href) einen Link zu anderen HTML-Seiten oder sonstigen Daten. Dabei wird ein Textbereich oder ein sonstiges Objekt als Anker für die Verknüpfung festgelegt. Mit dem Attribut name wird ein Lesezeichen erzeugt. accesskey Dieses Attribut können Sie nur nutzen, wenn href gesetzt ist. Mit accesskey können Sie einen so genannten Tasten-Shortcut definieren, mit dem der Link erreichbar ist. Ordnen Sie dem Attribut einen einzigen ICON ANFANG Buchstaben zu und er wird ausgeführt, wenn Sie diese Taste mit der zugehörigen Shortcut-Taste drücken, die von Browser und Betriebssystem abhängt. charset Dieses Attribut können Sie nur nutzen, wenn href gesetzt ist. Dieses Attribut beinhaltet die Zeichencodierung des Ziels. Der Standardwert ist ISO-8859-1. ICON ANFANG

coords Dieses Attribut können Sie nur nutzen, wenn href gesetzt ist. Gibt die Koordinaten für den Ankerbereich des Links in einer Image-Map an. Je nach Wert des Attributs shape werden die Koordinaten so angegeben ICON ANFANG (immer in Bildpunkten von der linken oberen Ecke des Bildes aus):

JavaScript Kompendium

61

Kapitel 1 Tabelle 1.10: Übergabeformat an coords je nach Wert von shape

HTML-Grundlagen

Wert von shape

Übergabeformat an coords

rectangle

"links, oben, rechts, unten"

circle

"Mittelpunkt X, Mittelpunkt Y, Radius"

polygon

"Punkt1 X, Punkt1 Y, Punkt2 X, Punkt2 Y, ..."

href Die Zieladresse des Links. Entweder href oder name muss zwingend in definiert sein. hreflang ICON ANFANG Dieses Attribut können Sie nur nutzen, wenn href gesetzt ist.

Dieses Attribut gibt die hauptsächliche Sprache des Ziels an. ICON ANFANG methods

Hier sollten ursprünglich mit Leerzeichen getrennte Stichwörter des Ziels eingetragen werden. Da aber kein gängiger Browser dieses Attribut unterstützte, wurde es ab HTML 3.2 nicht mehr aufgelistet. name Hier wird eine Bezeichnung für den Link (der dann auch als Lesezeichen funktioniert) eingetragen, die es ermöglicht, direkt zu dieser Stelle im Dokument zu springen. Entweder href oder name muss zwingend in definiert sein. rel ICON ANFANG

Hier sollten ursprünglich mit Leerzeichen getrennte Stichwörter eingetragen werden, welche die Verbindung zwischen der Seite und dem Ziel verdeutlichen. Leider unterstützt kein gängiger Browser dieses Attribut. rev Dieses Attribut entspricht der Umkehrung von rel. Hier sollten ursprünglich mit Leerzeichen getrennte Stichwörter eingetragen werden, welche die Verbindung zwischen dem Ziel und der Seite verdeutlichen. Leider unterstützt kein gängiger Browser dieses Attribut.

62

JavaScript Kompendium

Listen

Kapitel 1

shape Dieses Attribut können Sie nur nutzen, wenn href gesetzt ist. Hier wird die geometrische Form des Ankerbereichs in Image-Maps festgelegt. Mögliche Werte sind default (Standardwert), rectangle (Rechteck), ICON circleANFANG (Kreis) und polygon (Vieleck). tabindex Dieses Attribut können Sie nur nutzen, wenn href gesetzt ist. Gibt den Tab-Index des Links an. Positive Werte stehen für die Position des Links in der Liste der mit (ÿ__) aktivierbaren Objekte. Negative Werte ICON ANFANG bedeuten, dass der Link nicht im Tab-Index auftaucht. target Dieses Attribut können Sie nur nutzen, wenn href gesetzt ist. Hier wird der Name des Zielframes eingetragen, in dem das Ziel des Links angezeigt werden soll. ICON ANFANG

title Gibt den Titel des Ziels an, der angezeigt wird, wenn man die Maus über den Link bewegt, ohne darauf zu klicken. type Dieses Attribut können Sie nur nutzen, wenn href gesetzt ist. Gibt den MIME-Typ des Ziels an. ICON urn ANFANG

Dieses Attribut sollte ursprünglich name ergänzen, wurde aber nie von den gängigen Browsern unterstützt und verschwand deshalb ab HTML 3.2 aus der Sprache.

1.5

Listen

Es kommt oft vor, dass man Aufzählungen mit einer HTML-Seite verwirklichen möchte. Das kann bei Hobbys anfangen und bei einer Produktpalette aufhören. Hier spricht man dann von Listen.

JavaScript Kompendium

63

Kapitel 1

HTML-Grundlagen

1.5.1

Ungeordnete Listen

Wenn man naiv an dieses Thema herangehen würde, könnte man eine Liste etwa so implementieren: Listing 1.9: Eine naive Liste

Internetsprachen

– HTML ist die Internetsprache, die für den Aufbau von Homepages entwickelt wurde. Sie ist die Standardsprache im WWW.
– CGI-Scripte sind serverseitig laufende Programme.
– JavaScripts laufen meist auf dem Computer des Users. Es gibt aber auch die serverseitige Variante.

Das laienhafte Ergebnis sieht dann etwa so aus: Abbildung 1.10: Dieses Ergebnis genügt nicht den Ansprüchen einer professionellen HTML-Seite.

Wie Sie sehen, wird der Text am Ende der Zeile umbrochen und beginnt in der nächsten Zeile unter dem Listenpunkt. Das sieht nicht besonders anspruchsvoll aus. Wenn wir jetzt eine Aufzählung realisieren möchten, in der jedes einzelne Element aus mehrzeiligem Text bestehen kann, können wir mit einem nor64

JavaScript Kompendium

Listen

Kapitel 1

malen Minus als Aufzählungszeichen nicht mehr viel anfangen, da wir für eine optimale Formatierung vor der zweiten Zeile eines Elements zwei Leerzeichen voranstellen müssten. Dafür wäre auch eine manuelle Abzählung der Buchstaben notwendig, denn man müsste ja immer einen Zeilenumbruch erzwingen. Woher sollte man sonst wissen, wo die Leerzeichen stehen müssen? Da jedoch jeder Browser eine andere Seitenbreite realisieren kann, ist dieses Vorgehen in jedem Fall ein Kompromiss. In HTML gibt es aber eine einfache Lösung. Sie heißt »ungeordnete Liste«. Im vorherigen Beispiel bestehen die einzelnen Punkte teilweise aus mehreren Zeilen. Wir müssen also erst einmal dem Browser mitteilen, dass jetzt so eine ungeordnete Liste folgt. Dafür ist

...

zuständig. Die einzelnen Punkte werden mit

...

eingerahmt. Ein einzelnes

am Anfang des Punktes reicht eigentlich auch aus, aber mit schließenden Tags kann man eine bessere Lesbarkeit des Quelltextes erzielen. ICON ANFANG Wir können nun also das Beispiel so umschreiben:

Internetsprachen

• HTML ist die Internetsprache, die für den Aufbau von Homepages entwickelt wurde. Sie ist die Standardsprache im WWW.
• CGI-Scripte sind serverseitig laufende Programme.
• JavaScripts laufen meist auf dem Computer des Users. Es gibt aber auch die serverseitige Variante.

Listing 1.10: Die professionelle Listenvariante

Das Ergebnis der professionellen Variante sieht so aus:

JavaScript Kompendium

65

Kapitel 1

HTML-Grundlagen

Abbildung 1.11: So übersichtlich kann eine Liste aussehen.

Hier stellen Sie fest, dass alle Listenelemente exakt formatiert angezeigt werden.

1.5.2

Geordnete Listen

Angenommen, wir möchten nicht nur eine Aufzählung mit gleichen Aufzählungszeichen, sondern wir benötigen eine Liste, die durchnummeriert ist. Dann wäre das genau der richtige Zeitpunkt, eine geordnete Liste einzusetzen. Im folgenden Beispiel haben wir statt der Tags der ungeordneten Liste

...

die Tags der geordneten Liste

...

verwendet. Abbildung 1.12: Zwei Handgriffe, und schon wurde aus der ungeordneten Liste eine geordnete.

Wenn Sie keine Zahlen mögen, steht Ihnen bei vielen Browsern auch die Möglichkeit offen, die Nummerierung zu ändern. Sie können dazu das Attribut type verwenden. Es kann die folgenden Werte haben:

66

JavaScript Kompendium

Listen

Kapitel 1

Wert

Ergebnis

1

1, 2, 3, 4, 5, 6, ...

A

A, B, C, D, E, F, ...

a

a, b, c, d, e, f, ...

I

I, II, III, IV, V, VI, ...

i

i, ii, iii, iv, v, vi, ...

Tabelle 1.11: Die verschiedenen Möglichkeiten, eine Liste durchzunummerieren.

Nun kann es aber auch sein, dass Ihre Liste nicht mit der Nummer 1, sondern zum Beispiel mit der Nummer 9 beginnen soll. Hier hilft dann das Attribut start. Mit diesen beiden neuen Attributen könnte man also folgenden HTML-Text erstellen: Listing 1.11: Römische Zahlen

9. Nummer 9
10. Nummer 10
11. Nummer 11

Hier wird also dargestellt, wie die Zahlen 9 bis 11 im römischen Zahlenformat aussehen. Wie Sie sehen können, ist es tatsächlich möglich, mehrere Attribute in einer Marke anzuwenden. Eine weitere Besonderheit ist, dass man Zahlen auch ohne Anführungszeichen einem Attribut zuweisen kann.

1.5.3

Listen-Referenz

Tag / Attribut 2.0

3.0

3.2

4.0

Internet Explorer

Netscape

X

X

X

1.0

1.0

type

X

X

1.0

1.0

value

X

X

1.0

1.0

clear

JavaScript Kompendium

X

X

67

Kapitel 1

HTML-Grundlagen Dieses Tag definiert ein Listenelement. Es wird in allen gängigen Listentypen eingesetzt. clear Dieses Attribut wurde ergänzt, um mit Bildern umzugehen, die durch das Attribut align in nach links oder rechts bewegt werden. Man kann es nun verwenden, um mit allen Objekten umzugehen, die durch align verschoben werden.

Tabelle 1.12: Die Werte von clear in

Wert

Bedeutung

none

Es wird ein ganz normaler Zeilenumbruch erzeugt.

left

Die Zeile wird umbrochen und die nächste Zeile so weit unten eingefügt, dass der linke Rand frei von Bildern (oder sonstigen Objekten) ist.

right

Die Zeile wird umbrochen und die nächste Zeile so weit unten eingefügt, dass der rechte Rand frei von Bildern (oder sonstigen Objekten) ist.

all

Die Zeile wird umbrochen und die nächste Zeile so weit unten eingefügt, dass beide Ränder frei von Bildern (oder sonstigen Objekten) sind.

type Gibt an, welche Listenpunkte verwendet werden sollen. Tabelle 1.13: Die Werte von type in

68

Wert

Bedeutung

A

A, B, C, D, ...

a

a, b, c, d, ....

I

I, II, III, IV, ...

i

i, ii, iii, iv, …

1

1, 2, 3, 4, …

disc

Gefüllte Kreise

square

Gefüllte Quadrate

circle

Unausgefüllte Kreise

JavaScript Kompendium

Listen

Kapitel 1

value Gibt einen anderen Wert für die Aufzählung an als der aktuelle Folgewert nach dem letzten Listenelement.

Tag / Attribut 2.0

3.0

3.2

4.0

Internet Explorer

Netscape

X

X

X

1.0

1.0

X

X

start

X

X

1.0

1.0

type

X

X

1.0

1.0




X

X

clear compact

X

X

Dieses Tag erzeugt eine geordnete (durchnummerierte) Liste. clear Dieses Attribut wurde ergänzt, um mit Bildern umzugehen, die durch das Attribut align in nach links oder rechts bewegt werden. Man kann es nun verwenden, um mit allen Objekten umzugehen, die durch align verschoben werden. Wert

Bedeutung

none

Es wird ein ganz normaler Zeilenumbruch erzeugt.

left

Die Zeile wird umbrochen und die nächste Zeile wird so weit unten eingefügt, dass der linke Rand frei von Bildern (oder sonstigen Objekten) ist.

right

Die Zeile wird umbrochen und die nächste Zeile wird so weit unten eingefügt, dass der rechte Rand frei von Bildern (oder sonstigen Objekten) ist.

all

Die Zeile wird umbrochen und die nächste Zeile wird so weit unten eingefügt, dass beide Ränder frei von Bildern (oder sonstigen Objekten) sind.

Tabelle 1.14: Die Werte von clear in


compact Dieses allein stehende Attribut gibt an, dass möglichst eine Platz sparende Darstellung gewählt werden soll.

JavaScript Kompendium

69

Kapitel 1

HTML-Grundlagen start Gibt den Startwert der Nummerierung an. type Gibt an, welche Listenpunkte verwendet werden sollen.

Tabelle 1.15: Die Werte von type in


Wert

Bedeutung

A

A, B, C, D, ...

a

a, b, c, d, ....

I

I, II, III, IV, ...

i

i, ii, iii, iv, …

1

1, 2, 3, 4, …

disc

Gefüllte Kreise

square

Gefüllte Quadrate

circle

Unausgefüllte Kreise


Tag / Attribut 2.0


X

type

3.2

4.0

Internet Explorer

Netscape

X

X

X

1.0

1.0

X

X

X

X

4.0

1.0

X

clear compact

3.0

X

X

Definiert eine ungeordnete Liste (Aufzählungsliste). clear Dieses Attribut wurde ergänzt, um mit Bildern umzugehen, die durch das Attribut align in nach links oder rechts bewegt werden. Man kann es nun verwenden, um mit allen Objekten umzugehen, die durch align verschoben werden.

70

JavaScript Kompendium

Das <script>-Tag

Kapitel 1

Wert

Bedeutung

none

Es wird ein ganz normaler Zeilenumbruch erzeugt.

left

Die Zeile wird umbrochen und die nächste Zeile so weit unten eingefügt, dass der linke Rand frei von Bildern (oder sonstigen Objekten) ist.

right

Die Zeile wird umbrochen und die nächste Zeile so weit unten eingefügt, dass der rechte Rand frei von Bildern (oder sonstigen Objekten) ist.

all

Die Zeile wird umbrochen und die nächste Zeile so weit unten eingefügt, dass beide Ränder frei von Bildern (oder sonstigen Objekten) sind.

Tabelle 1.16: Die Werte von clear in


compact Dieses allein stehende Attribut gibt an, dass möglichst eine Platz sparende Darstellung gewählt werden soll. type Gibt an, welche Listenpunkte verwendet werden sollen. Wert

Bedeutung

A

A, B, C, D, ...

a

a, b, c, d, ....

I

I, II, III, IV, ...

i

i, ii, iii, iv, …

1

1, 2, 3, 4, …

disc

Gefüllte Kreise

square

Gefüllte Quadrate

circle

Unausgefüllte Kreise

1.6

Tabelle 1.17: Die Werte von type in


Das <script>-Tag

Mit dem Tag <script> werden Scriptsprachen gekennzeichnet. JavaScript ist so eine Scriptsprache. Deshalb verwendet man <script>, um JavaScript-Text von HTML-Quellcode zu unterscheiden. Hier ein Beispiel:

JavaScript Kompendium

71

Kapitel 1 Listing 1.12: JavaScript und HTML.

HTML-Grundlagen <script language="JavaScript"> Dies ist wieder HTML.

Speichern Sie diesen Quelltext unter abfrage.htm ab und betrachten Sie das Ergebnis im Browser: Abbildung 1.13: Die Ausgabe des Testscripts

Geben Sie in das Eingabefeld Ihren Namen ein und drücken Sie (¢). Es erscheint folgendes Fenster: Abbildung 1.14: Das JavaScript hat seine Aufgabe beendet.

Worauf wir hinausmöchten ist, dass die Zeile <script language="JavaScript"> erst den Einsatz des JavaScripts ermöglicht hat. Wie gesagt, es können auch andere Scriptsprachen über <script> angesteuert werden. Damit der Browser erkennen kann, mit welcher Sprache er es zu tun hat, wird das 72

JavaScript Kompendium

Das <script>-Tag

Kapitel 1

Attribut language (engl.: Sprache) benötigt. Attribute können Werte mit Tags verbinden. So wird language der Wert "JavaScript" zugewiesen. Da das Attribut innerhalb des Tags eingefügt wurde, ist nun klar, dass es sich um ein Script in der Sprache JavaScript handelt. Die weiteren Tags und Attribute im Quelltext sowie das Script an sich möchten wir hier noch nicht beschreiben. Haben Sie bitte noch ein wenig Geduld.

1.6.1

<script>-Referenz

An dieser Stelle ist es viel interessanter zu erfahren, welche Attribute man zusätzlich in <script> verwenden kann: <noscript> Tag / Attribut

2.0

3.0

3.2

<noscript>

4.0

Internet Explorer

Netscape

X

3.0

3.0B5

Dieses Tag markiert Quellcode, der nur ausgeführt werden soll, falls der Browser das Tag <noscript> nicht verarbeiten kann. <script> Tag / Attribut

2.0

3.0

3.2

4.0

Internet Explorer

Netscape

<script>

X

3.0B1

2.0B3

charset

X

defer

X

4.0

event

X

4.0

for

X

4.0

language

X

3.0B1

2.0B3

src

X

3.02

3.0B5

type

X

4.0

Mit dem Tag <script> werden Scriptsprachen gekennzeichnet. JavaScript ist zum Beispiel so eine Scriptsprache. Deshalb verwendet man <script>, um JavaScript-Text von HTML-Quellcode zu unterscheiden. charset Dieses Attribut gibt an, welcher Zeichensatz für das Script verwendet werden soll. Die Standardeinstellung ist ISO-8859-1. JavaScript Kompendium

73

Kapitel 1

HTML-Grundlagen defer Dieses Attribut steht allein und benötigt somit keine Wertzuweisung. Ist es gesetzt, wird dem Browser mitgeteilt, dass das Script keinerlei Bildschirmausgabe erzeugt. event Gibt das Ereignis an, für welches das Script geschrieben wurde. Zu diesem Thema erfahren Sie später mehr. for Gibt an, welches Element an dieses Ereignisscript gebunden ist. Auch hierzu erhalten Sie später weitere Informationen. language Dieses Attribut gibt an, welche Sprache für das Script verwendet wurde. src Hier kann eine externe Datenquelle angesprochen werden. Das macht beispielsweise Sinn, wenn viele HTML-Dateien ein und dasselbe Script verwenden. type Dieses Attribut gibt den MIME-Typ des Script-Quellcodes an.

74

JavaScript Kompendium

2

JavaScript-Grundlagen

In diesem Kapitel werden Sie Ihr erstes Script erstellen, abspeichern und ausführen. Danach lernen Sie, wie man Daten in Variablen ablegt und mit diesen weiter arbeitet. Um aber nicht den zweiten Schritt vor dem ersten zu machen, beginnen wir mit einem Programmierbeispiel.

2.1

Hello World!

Seit jeher ist es Tradition, dass das erste Programm in einer neuen Programmiersprache die Welt begrüßt. Da die meisten Programmiersprachen in Englisch gehalten sind, geben wir nun den Schriftzug Hello World! auf dem Bildschirm aus. Wenn Sie diese Ausgabe sehen, haben Sie erfolgreich Ihr erstes Programm generiert und ausgeführt. Also frisch ans Werk ... Starten Sie Ihren Lieblings-Texteditor und tragen Sie die folgenden Zeilen ein. <script language="JavaScript"> document.write("Hello World!");

Listing 2.1: Unser erstes lauffähiges Script

Das Tag markiert, wie Sie schon gelernt haben, den HTML-Teil des Dokuments. Damit der Browser später weiß, dass wir ein JavaScript programmiert haben, müssen wir das durch das <script>-Tag kenntlich machen. Zwischen <script> und steht also der eigentliche Quelltext des Scripts. Da wir nichts anderes realisieren wollen, als die Worte Hello World! über ein JavaScript in das HTML-Dokument einzufügen, rufen wir in der Klasse document (engl. für »Dokument«) die Funktion write (engl. für »schreiben«) auf. Dieser übergeben wir dann einfach die beiden Wörter. Was genau Klassen und Funktionen sind, erfahren Sie noch in späteren Kapiteln des Buches. Auch auf die Syntax gehen wir noch genau ein. Bitte glauben Sie uns zuerst, dass die Zeile document.write("Hello World!"); genau diesen Effekt hat.

JavaScript Kompendium

75

Kapitel 2

JavaScript-Grundlagen Damit wir das Ergebnis ansehen können, müssen wir den Quelltext auf der Festplatte abspeichern. Legen Sie dazu bitte ein Verzeichnis namens JS auf Ihrer Festplatte an. Speichern Sie dann unser erstes Script in die Datei HelloWorld.html. Bitte beachten Sie, dass der Quelltext im Textformat abgespeichert werden muss. Wenn Sie ein Script zum Beispiel im Word-Format abspeichern, werden zusätzliche Steuerzeichen abgespeichert, die eine HTML-Datei unbrauchbar machen.

ICON ANFANG Abbildung 2.1: HTML-Dateien sind immer im Textformat abzuspeichern.

Unser Programm befindet sich nun auf Ihrer Festplatte. Aber wie schaut man sich jetzt das Ergebnis an? Wenn Sie einen Internetbrowser – wie zum Beispiel den Microsoft Internet Explorer oder den Netscape Communicator – installiert haben, können Sie Ihre Datei über den Explorer durch einen simplen Doppelklick öffnen. Abbildung 2.2: Die Ausgabe unseres Scripts

76

JavaScript Kompendium

Kommentare

2.2

Kapitel 2

Kommentare

Kommen wir nun noch zu einigen Dingen, die eigentlich nicht ganz so viel mit der Programmierung von JavaScript zu tun haben, aber trotzdem für die Verständlichkeit vieler Programme sehr wichtig sind: Kommentare. In JavaScript haben Sie mehrere Möglichkeiten, Kommentare einzufügen. Eine Möglichkeit ist die Benutzung von //, um dem Browser klar zu machen, dass jetzt ein Kommentar folgt. Mit // wird alles, was in der Zeile hinter // steht, vom Browser als Kommentar gewertet. Manchmal hat man aber nicht nur einen kurzen Kommentar, sondern möchte zu einer Funktion oder einem anderen Programmteil ausführlich über mehrere Zeilen beschreiben, wie die Funktion oder der Quelltext funktioniert oder was für Übergabewerte erwartet werden. Für diesen Fall stellen uns die Browser eine Vereinfachung der Kommentare zur Verfügung. Mit der Zeichenfolge /* gibt man dem Browser zu verstehen, dass alle folgenden Zeilen im Quelltext als Kommentar zu behandeln sind und nicht übersetzt werden müssen. Damit aber nicht der gesamte Quellcode als Kommentar behandelt wird, nachdem wir /* eingefügt haben, brauchen wir noch eine Zeichenfolge, die dem Browser wieder klar macht, dass der Kommentar beendet ist und von dieser Position wieder alles übersetzt werden muss. Die Zeichenfolge zum Beenden des Kommentars lautet */. Nach dieser Zeichenfolge wird das Programm wieder übersetzt.

2.3

Nicht JavaScript-fähige Browser

Da JavaScript eine sehr schnell weiterentwickelte Sprache ist, gibt es viele Browser, die noch nicht alle Standards unterstützen, und somit Ihre Programme nicht zwingend auf diesem Browser angezeigt werden. Um zu verhindern, dass ein Browser bei einem JavaScript, das er nicht übersetzen kann, unkontrollierte Dinge ausführt, gibt es Möglichkeiten, vor dem Start des Programms zu überprüfen, welche JavaScript-Version der Browser des Anwenders unterstützt. Um an dieser Stelle aber nicht schon Inhalte aus den nachfolgenden Kapiteln einfach so in den Raum zu stellen, möchten wir hier nur darauf hinweisen, dass im Kapitel der Objekte ausführlich darauf eingegangen wird, wie solche Überprüfungen oder Beschränkungen vorgenommen werden. Eine Ihnen bereits bekannte Art der Festlegung, mit welcher Version von JavaScript ein Programm übersetzt werden soll, ist ja die Angabe des language="JavaScript"-Attributes im <script>-Tag in HTML. Es ist hier auch möglich, dem language-Attribut einen der folgenden Werte zu übergeben: JavaScript1.1 JavaScript1.2 JavaScript1.3

JavaScript Kompendium

77

Kapitel 2

JavaScript-Grundlagen JavaScript1.4 JavaScript1.5

Ein Browser, der zum Beispiel nur JavaScript in der Version 1.1 unterstützt, wird ein Script, das für JavaScript 1.3 geschrieben wurde, ignorieren.

2.4

Variablen

In diesem Abschnitt wollen wir Ihnen zeigen, wie Sie unter JavaScript mit Variablen arbeiten und wie Sie gut lesbaren Quellcode schreiben. Wir gehen in diesem Abschnitt außerdem kurz auf die Schreibweise der JavaScript-Syntax ein.

2.4.1

Variablen deklarieren und initialisieren

In JavaScript haben Sie zwei Möglichkeiten, eine Variable zu deklarieren. Sie können der Variablen einfach einen Wert zuweisen: x = 10

oder aber mit dem Schlüsselwort var kenntlich machen, dass jetzt eine Variable deklariert wird: var x = 10

Beide Arten der Deklaration haben das gleiche Ergebnis: Der Variablen x wird der Wert 10 zugewiesen. Wollen Sie bei der Definition von Variablen Platz sparen und mehrere Variablen hintereinander definieren, gilt folgende Syntax: x = 10; y = 20; var x = 10; var y = 20;

Bei dieser Schreibweise werden alle Befehle voneinander mit ; getrennt. Folgende Schreibweise ist aber auch möglich: var x = 10, y = 20

Diese Schreibweise gilt allerdings nur in Verbindung mit dem Schlüsselwort var.

78

JavaScript Kompendium

Variablen

Kapitel 2

Nun gibt es in JavaScript allerdings mehr als nur Variablen vom Typ Integer. Um beispielsweise ein Array zu initialisieren, bedarf es der folgenden Syntax: new meinArray(10)

Mit diesem Befehl wird ein Array mit dem Namen meinArray erzeugt, das zehn Elemente beinhaltet, die im Moment allerdings alle noch keine Werte enthalten. Um den einzelnen Elementen des Arrays nun Werte zuzuweisen, verwendet man nachfolgende Syntax: meinArray[0] = "Wert1" meinArray[9] = "Wert10"

Diese Zuweisungen setzen den Wert des ersten Elementes des Arrays (meinArray[0]) auf "Wert1" und den Wert des letzten Elementes (meinArray[9]) auf "Wert10". Um nun abschließend einen String zu definieren, geht man wie folgt vor: var name = new String("Müller")

Die Anweisung definiert die Variable name als String-Objekt und weist ihr den Wert "Müller" zu.

2.4.2

Namenskonventionen

In der folgenden Tabelle finden Sie die in JavaScript 1.3 reservierten Wörter, die Sie nicht für Variablen-, Methoden-, Funktions- oder Objektnamen verwenden dürfen. Alle hier aufgeführten Wörter werden in den bis jetzt erschienenen JavaScript-Versionen als Schlüsselwörter benutzt oder sind schon für spätere Versionen reserviert. Reservierte Wörter abstract

else

instanceof

switch

boolean

enum

int

synchronized

break

export

interface

this

byte

extends

long

throw

case

false

native

throws

catch

final

new

transient

char

finally

null

true

JavaScript Kompendium

Tabelle 2.1: Reservierte Wörter in JavaScript 1.3

79

Kapitel 2 Tabelle 2.1: Reservierte Wörter in JavaScript 1.3 (Forts.)

JavaScript-Grundlagen

Reservierte Wörter class

float

package

try

const

for

private

typeof

continue

function

protected

var

debugger

goto

public

void

default

if

return

volatile

delete

implements

short

while

do

import

static

with

double

in

super

In Zeichenketten gibt es auch reservierte Steuerzeichen, die Sie benutzen können um den Text zu formatieren oder um Spezialzeichen wie Anführungszeichen in eine Zeichenkette einzufügen. Folgende Tabelle gibt eine Übersicht über spezielle Zeichen in Strings: Tabelle 2.2: Sonderzeichen in Strings

Zeichen

Bedeutung

\b

Backspace

\f

Form Feed (Seitenvorschub)

\n

New Line (Zeilenvorschub)

\r

Carriage Return (Wagenrücklauf)

\t

Tab

\'

Apostrophzeichen ( ' )

\"

Anführungszeichen oben ( " )

\\

Backslash Zeichen ( \ )

\XXX

Ein Zeichen des Latin-1-Zeichensatzes, welches durch bis zu drei oktale Zahlen genauer angegeben wird. Bereich von 0 bis 377, wobei \251 z.B. für das Copyrightzeichen steht.

\xXX

Hexadezimaler Wert

\uXXXX

Unicode-Zeichen

Wichtig ist, dass alle Sonderzeichen mit einem \ beginnen, da sie sonst nicht als Steuerzeichen, sondern als normaler Text behandelt würden. 80

JavaScript Kompendium

Variablen

Kapitel 2

JavaScript unterscheidet Groß-/Kleinschreibung in Namen für Befehle, Variablen, Objekte usw., wo HTML eine freie Schreibweise zulässt.

2.4.3 Datentypen und Literale ICON ANFANG In JavaScript sind folgende Datentypen bekannt:

ICON ENDE

Zahlen Boolesche Werte Strings Alle diese Datentypen stehen in zwei verschiedenen Varianten zur Verfügung, einmal als einfacher Wert und einmal als Objekte. Im Folgenden beschäftigen wir uns erst mit den Werten an sich und gehen im Kapitel 6 dann genauer auf die Objekte ein. Bei Zahlen gibt es keine explizite Unterscheidung in ganzzahlige Werte und Kommazahlen. Die Benutzung von ganzen Zahlen in Ihren Programmen bedarf keiner besonderen Notation, Sie können einfach die bekannte Dezimaldarstellung benutzen. Es ist hier allerdings auch möglich, eine alternative Oktal- oder Hexadezimaldarstellung der Zahlen zu benutzen. Um diese Alternativen zu nutzen, müssen Sie eine bestimmte Schreibweise der Zahlen berücksichtigen. Bei Oktalzahlen ist dies die Kenntlichmachung durch eine vorangestellte 0 (Null). Bei Hexadezimalzahlen wird eine 0x (oder 0X) vorangestellt. Des Weiteren haben Sie natürlich bei Oktalzahlen nur die Möglichkeit, Ziffern im Bereich von 0-7 einzugeben, im Dezimalsystem sind hier Ziffern von 0-9 erlaubt. Beim Hexadezimalsystem sieht es schon wieder ganz anders aus, hier sind Ziffern von 0-9 und die Buchstaben A-F (oder a-f) erlaubt. Dezimal

Oktal (Präfix 0)

Hexadezimal (Präfix 0x)

0

00

0x0

1

01

0x1

2

02

0x2

4

04

0x4

8

010

0x8

10

012

0xA

15

017

0xF

16

020

0x10

JavaScript Kompendium

Tabelle 2.3: Beispiele für dezimale, oktale und hexadezimale Schreibweisen

81

Kapitel 2 Tabelle 2.3: Beispiele für dezimale, oktale und hexadezimale Schreibweisen (Forts.)

JavaScript-Grundlagen

Dezimal

Oktal (Präfix 0)

Hexadezimal (Präfix 0x)

20

024

0x14

24

030

0x18

255

0377

0xFF

Eine vollständige Umrechnungstabelle aller Zahlen von 0 bis 255 finden Sie im Anhang. Anders ist es bei Zahlen, die einen Nachkommaanteil besitzen. Hier gibt es zwei Schreibweisen. Tabelle 2.4: Reelle Zahlen in Fix- und Fließkommanotation

Fixkomma

Fließkomma in JavaScript

in mathematischer Schreibweise

1.0

1e0.1e1

1*1000,1*101

0.0000002

2e-7.2e-6

2*10-70,2*10-6

-272120000000000

-2.7212e14

-2,7212*1014

-0.00012

-.12e-3

-0,12*10-3

Einfacher haben Sie es hier bei der Verwendung von Strings und booleschen Ausdrücken. Bei diesen Datentypen brauchen Sie nur eine Variable zu erstellen und ihr den gewünschten Wert zuzuweisen. Um also einen String zu erstellen genügt folgende Syntax: var Text = "Diese Variable enthält Text."

oder aber für einen booleschen Ausdruck: var JaNein = true

Allerdings muss an dieser Stelle darauf hingewiesen werden, dass Stringoperationen nur mit String-Objekten möglich sind. Näheres über die Erstellung und Verwendung von Objekten erfahren Sie im Kapitel Objekte.

2.4.4

Lesbarer Quellcode

Um Quellcode gut lesbar und übersichtlich zu gestalten, sollten Sie Ihre Listings strukturieren und mit vielen Kommentaren versehen.

82

JavaScript Kompendium

Variablen <script> a=10 b=100 a+=b document.write("a ist gleich " + a + "
") Die Zahl a wurde mit JavaScript errechnet.

Kapitel 2 Listing 2.2: Unstrukturierter Quellcode

Einfacher und übersichtlicher ist hier das Lesen des gleichen Quelltextes in strukturierter Form: <script> var a=10; var b=100; a+=b; document.write("a ist gleich " + a +"
"); Die Zahl a wurde mit JavaScript errechnet.

Listing 2.3: Strukturierter Quellcode

Um dem Leser des Quellcodes nun noch verständlich zu machen, was hier geschieht, können Sie noch Kommentare in das Listing einfügen: <script> //a mit 10 initialisieren var a=10; //b mit 100 initialisieren var b=100; //a + b rechnen und das Ergebnis in a speichern a+=b; //Text ausgeben und in die nächste Zeile gehen document.write("a ist gleich " + a + "
"); Die Zahl a wurde mit JavaScript errechnet.

JavaScript Kompendium

Listing 2.4: Strukturierter und kommentierter Quellcode

83

Kapitel 2

JavaScript-Grundlagen Ein Nachteil, wenn Sie so ausführlichen Quelltext schreiben, ist natürlich, dass er viel mehr Speicherplatz benötigt und so längere Zeit beim Laden der Internetseite benötigt. Unser kleines Script hat in der strukturierten und kommentierten Variante einen Speicherplatzbedarf von 409 Byte. Wollen wir nun ein speicheroptimiertes Script im Web ablegen, so empfiehlt es sich die Kommentare und die Strukturierung wieder zu entfernen. Gekürzt würde unser Script etwa so aussehen:

Listing 2.5: Ein stark gekürztes Script

<script>a=10;b=100;a+=b;document.write("a ist gleich "+a+"
");Die Zahl a wurde mit JavaScript errechnet.

Dieses Script hat nun eine Größe von 155 Byte, ist allerdings, wie Sie sicher schon bemerkt haben, in keinster Weise mehr übersichtlich.

2.5

Operatoren

JavaScript verfügt über Zuweisungs-, Vergleichs-, arithmetische, bitweise, Logik-, String- und Spezialoperatoren. Eine wichtige Sache bei Operatoren ist die Schreibweise. Nehmen wir zum Beispiel den Inkrement-Operator (++). Soll ein Wert vor der Zuweisung erhöht werden, verwendet man ++x (Präfix), wenn erst nach der Zuweisung inkrementiert werden soll, schreibt man x++ (Postfix). Schauen wir uns ein Beispiel an: var a, b, praef, postf; prae = 10; post = 10; a=++praef; b=postf++; praef und postf haben zu Anfang den Wert 10. a=++praef; heißt nichts anderes als: Erhöhe zuerst praef um 1 und weise das Ergebnis a zu. a und praef haben somit nach der Anweisung beide den Wert 11. b=postf++; könnte man so übersetzen: Weise b den Wert von postf zu und erhöhe postf dann um 1. b ist somit nach dieser Anweisung 10 und postf hat den Wert 11.

Die nachfolgenden Tabellen geben einen Überblick über die Operatoren:

2.5.1 Tabelle 2.5: Arithmetische Operatoren

84

Arithmetische Operatoren

Operator

Beschreibung

+

(Addition) addiert zwei Zahlen

++

(Inkrement) erhöht den Wert einer Variablen um eins

JavaScript Kompendium

Operatoren

Kapitel 2

Operator

Beschreibung

-

(Subtraktion) subtrahiert zwei Zahlen voneinander

--

(Dekrement) verringert den Wert einer Variablen um eins

*

(Multiplikation) multipliziert zwei Zahlen miteinander

/

(Division) dividiert zwei Zahlen miteinander

%

(Modulo) der ganzzahlige Rest einer Division zweier Zahlen

2.5.2

String-Operatoren

Operator

Beschreibung

+

(String-Addition) verknüpft zwei Strings miteinander

+=

verknüpft zwei Strings miteinander und schreibt das Ergebnis der Operation in die links stehende String-Variable

2.5.3

Tabelle 2.6: String-Operatoren

Logikoperatoren

Operator

Beschreibung

&&

(logisches UND) gibt dann true zurück, wenn beide Operanden den Wert true besitzen

||

(logisches ODER) gibt true zurück, wenn ein Operand den Wert true besitzt

!

(logisches NICHT) negiert den Operanden

2.5.4

Tabelle 2.5: Arithmetische Operatoren (Forts.)

Tabelle 2.7: Logikoperatoren

Bitweise Operatoren

Operator

Beschreibung

&

bitweises UND

^

bitweises XODER

|

bitweises ODER

~

bitweises NICHT

<<

Links-Verschiebung

JavaScript Kompendium

Tabelle 2.8: Bitweise Operatoren

85

Kapitel 2 Tabelle 2.8: Bitweise Operatoren (Forts.)

JavaScript-Grundlagen

Operator

Beschreibung

>>

Vorzeichen weiter reichende Rechts-Verschiebung

>>>

Null füllende Rechts-Verschiebung

2.5.5 Tabelle 2.9: Zuweisungsoperatoren

Operator

Beschreibung

=

weist dem ersten Operanden den Wert des zweiten Operanden zu

+=

addiert zwei Zahlen und speichert das Ergebnis in die erste

-=

subtrahiert zwei Zahlen voneinander und speichert das Ergebnis in der ersten Zahl

*=

multipliziert zwei Zahlen miteinander und speichert das Ergebnis in der ersten Zahl

/=

dividiert zwei Zahlen durcheinander und weist das Ergebnis der ersten Zahl zu

%=

errechnet den Modulo von zwei Operanden und weist das Ergebnis dem ersten Operanden zu

&=

führt eine bitweise UND-Verknüpfung aus und speichert das Ergebnis im ersten Operanden

^=

führt eine bitweise XODER-Verknüpfung aus und speichert das Ergebnis im ersten Operanden

|=

führt eine bitweise ODER-Verknüpfung aus und speichert das Ergebnis im ersten Operanden

<<=

bitweise Zuweisung mit Links-Verschiebung

>>=

bitweise Zuweisung mit Rechts-Verschiebung (Vorzeichen-Weiterreichung)

>>>=

bitweise Zuweisung mit Rechts-Verschiebung (Null-füllend)

2.5.6 Tabelle 2.10: Vergleichsoperatoren

86

Zuweisungsoperatoren

Vergleichsoperatoren

Operator

Beschreibung

==

gibt true zurück, wenn beide Operanden gleich sind

!=

gibt true zurück, wenn beide Operanden nicht gleich sind

JavaScript Kompendium

Operatoren

Kapitel 2

Operator

Beschreibung

===

gibt true zurück, wenn beide Operanden gleich sind und beide Operanden den gleichen Datentyp haben

!==

gibt true zurück, wenn beide Operatoren nicht gleich sind und/ oder beide Operatoren nicht vom gleichen Datentyp sind

>

gibt true zurück, wenn der linke Operand größer ist als der rechte

>=

gibt true zurück, wenn der linke Operand größer oder gleich dem rechten Operanden ist

<

gibt true zurück, wenn der linke Operand kleiner ist als der rechte

<=

gibt true zurück, wenn der linke Operand kleiner oder gleich dem rechten Operanden ist

2.5.7

Spezielle Operatoren

Operator

Beschreibung

?:

vereinfachte Schreibweise für eine »if...then...else«-Abfrage

,

Komma trennt mehrere Elemente voneinander

delete

löscht ein Objekt, eine Property eines Objektes oder ein Element in einem Array

new

erzeugt eine Instanz eines benutzerdefinierten Objektes oder eines vordefinierten Objektes

this

Schlüsselwort, das Sie benutzen können, um auf das aktuelle Objekt zu verweisen

typeof

gibt einen String zurück, der den Typ des unausgewerteten Operanden enthält

void

definierte Rückgabe für Funktionen, die keinen Wert zurückliefern

2.5.8

Tabelle 2.10: Vergleichsoperatoren (Forts.)

Tabelle 2.11: Spezielle Operatoren

Hierarchie der Operatoren

Bezeichnung

Operator / Operatoren

Komma

,

Zuweisung

= += -= *= /= %= <<= >>= >>>= &= ^= |=

Bedingung

?:

logisches ODER

||

JavaScript Kompendium

Tabelle 2.12: Operator-Präzedenz

87

Kapitel 2 Tabelle 2.12: Operator-Präzedenz (Forts.)

JavaScript-Grundlagen

Bezeichnung

Operator / Operatoren

logisches UND

&&

bitweises ODER

|

bitweises XODER

^

bitweises UND

&

Gleichheit

== !=

Vergleich

< <= > >=

bitweises Verschieben

<< >> >>>

Addition / Subtraktion

+ -

Multiplikation / Division

* / %

Invertierung / Inkrementierung

! ~ – + ++ -- typeof void delete

Aufruf

( )

erstellende Instanz

new

member

. [ ]

2.6

JavaScript-Entities

In einigen Fällen kommt es vor, dass man Variablen, die in JavaScript definiert wurden, auch im HTML-Teil einer Seite benötigt. Hier kommen die JavaScript-Entities des Netscape Navigators zum Einsatz. Sie haben richtig gelesen. Die JavaScript-Entities werden nur von Netscape und nicht von Microsoft unterstützt. Um also eine Variable, die im <script>-Teil der Seite definiert ist, nutzen zu können, muss die Variable folgendermaßen angesprochen werden: &{variable};. In folgendem Beispiel wird die im <script>Tag definierte Variable breite an ein Eingabefeld übergeben. Listing 2.6: Ein Textfeld, das seine Größe über JavaScript-Entities bezieht

88

<script language="JavaScript"> var breite = 10;


JavaScript Kompendium

JavaScript-Entities

Kapitel 2

Im Browser sollte nun Folgendes zu sehen sein: Abbildung 2.3: Ein Textfeld, das seine Breite aus einer JavaScriptVariablen bezieht

Seien Sie nicht verwundert, dass in Ihrem Textfeld noch keine Werte enthalten sind. Wir haben zur Veranschaulichung, dass auch wirklich eine Breite von 10 Zeichen vorhanden ist, die Zahlen eingetragen. JavaScript-Entities sind sehr hilfreich, wenn Sie eine Seite nur für NetscapeBrowser schreiben. Ansonsten sollte man aus Kompatibilitätsgründen versuchen, ohne sie auszukommen.

JavaScript Kompendium

89

3

Funktionen

In diesem Kapitel werden Sie lernen, wie Sie Funktionen deklarieren und danach aufrufen. Am Ende dieses Kapitels sollten Sie keine Probleme mehr haben, Ihre eigenen und die Funktionen von anderen Programmierern nutzen zu können oder Ihre eigenen Funktionen anderen Programmierern zur Verfügung zu stellen.

3.1

Warum Funktionen?

Funktionen übernehmen mit eine der wichtigsten Aufgaben in JavaScript. Mit Funktionen sind Sie in der Lage, häufig wieder auftretende Probleme in einem Programm einmal zu programmieren und danach immer wieder aufzurufen, wenn sie benötigt werden. Hierbei wird Ihre Arbeit dadurch erleichtert, dass Sie Variablen mit in den Funktionsaufruf übergeben können und Ergebnisse der Funktionen nach deren Berechnung wieder einer Variablen zuordnen können.

3.2

Übergabewerte

Werte, die an eine Funktion übergeben werden sollen, müssen immer beim Aufruf der Funktion in Klammern mit übergeben werden. Ein gültiger Aufruf einer Funktion mit Übergabeparametern ist zum Beispiel folgender: meineFunktion(ersteVariable, zweiteVariable)

Bei diesem Beispiel würden also zwei Variablen übergeben. Wenn Sie eine Funktion ohne Parameterübergabe realisieren wollen, sieht der Funktionsaufruf folgendermaßen aus: meineFunktion()

Ob die Variablen, die an eine Funktion übergeben werden, nachher in der Funktion immer noch denselben Namen haben wie bei der Übergabe, sehen wir allerdings erst, wenn wir uns die Funktion selber in ihrer Definition ansehen. Es ist übrigens auch erlaubt, feste Werte, zum Beispiel einen String

JavaScript Kompendium

91

Kapitel 3

Funktionen oder Zahlen, an eine Funktion zu übergeben. Sie sind also nicht gezwungen, den Wert oder die Werte, die Sie übergeben wollen, erst in Variablen zu verpacken, sondern Sie können auch direkt die Werte übergeben. Eine vollständige Definition einer Funktion mit Übergabe von zwei Variablen und deren Aufruf sehen Sie im nächsten Beispiel:

Listing 3.1: Definition einer Funktion und Aufruf der Funktion

function meineFunktion(Anzahl, Text) { for (var zaehler = 0; zaehler < Anzahl; zaehler++) { alert(Text); } } var Meldung = "Hallo!"; meineFunktion(3, Meldung);

Dieses Beispiel würde nun dreimal hintereinander einen Hinweisdialog öffnen, der den Text Hallo! enthält. Wenn Sie den Quellcode genauer ansehen, werden Sie feststellen, dass bei der Definition der Funktion die Namen Anzahl und Text für die Variablenübergabe gewählt wurden. Also hätte in unserem Beispiel die Variable Anzahl den Wert 3 und Text den Wert Hallo!. Jetzt werden Sie allerdings zu Recht fragen, was ist denn nun mit der Variablen Meldung? Müssen Sie die Variable zwingend anlegen? Wir können Sie beruhigen, bei so kleinen Programmen hätten wir natürlich auf die Variable verzichten können und direkt auch den Text der Meldung als festen Wert übergeben können, wir wollten Ihnen nur demonstrieren, wie man eine Parameterübergabe mit Variablen programmiert. Nun gibt es auch noch die Möglichkeit, Werte von einer Funktion zurückzuerhalten. Also nicht die Werte an die Funktion zu übergeben, sondern Werte von der Funktion übergeben zu bekommen. Hier spricht man von Rückgabewerten, auch return-Werte (engl. für Rückgabe) genannt.

3.3

Lokale und globale Variablen

Das folgende Beispiel erstellt eine Variable, die den Namen Zahl hat, und weist ihr global den Wert 10 zu. Danach wird Zahl an die Funktion meineFunktion() übergeben. Die Funktion behandelt den übergebenen Wert intern nun als eigenständige Variable. Hierbei ist es egal, ob die Variable wie in unserem Beispiel denselben Namen hat wie eine Variable, die außerhalb (global) der Funktion definiert ist. Die globale Variable wird durch unsere Funktion nicht verändert, sondern nur die interne (lokale) Variable, die den gleichen Namen hat. Geben Sie den folgenden Code ein und speichern Sie die Datei unter dem Namen lokalglobal.htm ab. Listing 3.2: Lokale und globale Variablen

92

<script language="JavaScript"> function meineFunktion(Zahl) {

JavaScript Kompendium

Vordefinierte Funktionen

Kapitel 3

document.write("Zahl in der Funktion: " + Zahl); Zahl += 2; document.write("Zahl in der Funktion: " + Zahl); } var Zahl = 10; document.write("Zahl direkt nach seiner Initialisierung: " + Zahl); meineFunktion(Zahl); document.write("Zahl nach dem Zurückkehren aus der Funktion: " + Zahl);

Folgende Ausgabe sollte nach dem Aufrufen im Browserfenster erscheinen: Abbildung 3.1: Der Unterschied zwischen einer lokalen und einer globalen Variablen.

3.4

Vordefinierte Funktionen

Die folgende Tabelle enthält eine Übersicht der vordefinierten Funktionen, die in JavaScript verfügbar sind.

JavaScript Kompendium

93

Kapitel 3 Tabelle 3.1: Vordefinierte Funktionen von JavaScript

Funktionen

Funktion

Beschreibung

escape()

liefert die hexadezimale Kodierung eines in ISO-Latin-1 übergebenen Strings

eval()

berechnet die übergebene Zeichenkette und gibt das Ergebnis zurück

isFinite()

überprüft eine übergebene Zahl darauf, ob sie eine gültige Zahl ist

isNaN()

prüft, ob der übergebene Wert eine Zahl ist oder nicht. Diese Methode gibt true zurück, wenn der getestete Wert keine Zahl ist

Number()

konvertiert das übergebene Objekt in eine Zahl

parseFloat()

wandelt einen String in eine Gleitkommazahl um

parseInt()

wandelt einen String in eine Ganzzahl um

String()

konvertiert das übergebene Objekt in einen String

taint()

verschlüsselt Datenelemente oder Scripts

unescape()

wandelt alle Zeichen der übergebenen Zeichenkette in normale ASCII-Zeichen um und gibt den daraus erzeugten String zurück. Die zu übergebende Zeichenkette muss für jedes umzuwandelnde Zeichen ein Prozentzeichen (%) und den Hexadezimalwert des Zeichens aus der ASCII-Zeichentabelle enthalten.

untaint()

entschlüsselt Datenelemente oder Scripts.

Für genaue Beschreibungen der einzelnen Funktionen lesen Sie bitte unter Anhang A.2 weiter.

ICON ANFANG

94

JavaScript Kompendium

4

Schleifen und Verzweigungen

Als Nächstes wollen wir Sie im folgenden Kapitel mit dem Umgang der möglichen Schleifen und Verzweigungen in JavaScript vertraut machen. Dieses Kapitel wird Ihnen mit praktischen Beispielen zeigen, wo die Unterschiede der verschiedenen Schleifen liegen und wann Sie welche Schleife bevorzugen sollten.

4.1

if...else

Die if-Abfrage ist die am meisten benutzte Abfrage aller Programmiersprachen. Mit der if-Abfrage können Sie einen einfachen Vergleich zweier Werte oder Zustände realisieren. Würde uns diese Abfrage nicht zur Verfügung stehen, könnten unsere Programme immer nur stur einen Strang im Programm ausführen und nicht auf verschiedene Zustände von Variablen mit unterschiedlichem Programmcode reagieren. Das folgende Diagramm zeigt den Programmfluss einer if-Abfrage. Abbildung 4.1: Flussdiagramm der if-Abfrage.

Beispiel: if (x > y) document.write("x ist größer als y");

In diesem Beispiel wird geprüft, ob die Variable x größer ist als die Variable y. Ist dies der Fall (also die Bedingung gibt den Wert true zurück), so wird JavaScript Kompendium

95

Kapitel 4

Schleifen und Verzweigungen document.write("x ist größer als y"); ausgeführt. Sollte x nicht größer sein als y, wird die Anweisung document.write("x ist größer als y"); einfach übersprungen und der nächste Befehl im Programm ausgeführt.

Wenn Sie mehr als nur einen Befehl nach der Überprüfung, ob x größer als y ist, ausführen wollen, schreiben Sie alle Anweisungen in geschweifte Klammern hinter die if-Abfrage. Listing 4.1: Eine if-Abfrage mit mehreren Anweisungen

if (x > y) { document.write("x ist größer als y"); document.write("
Der Wert von x: " + x); document.write("
Der Wert von y: " + y); }

Ist diesmal x größer y, so werden alle Befehle in den geschweiften Klammern ausgeführt. Sollte x nicht größer als y sein, so werden alle Anweisungen in den geschweiften Klammern übersprungen. Die if-Abfrage bietet uns auch die Berücksichtigung des Falles, dass die Bedingung der if-Abfrage nicht erfüllt ist. Hier gibt es den Befehl else, der wie in folgendem Beispiel eingesetzt wird: Listing 4.2: Eine if...elseAbfrage

if (x > y) { document.write("x ist größer als y"); document.write("
Der Wert von x: " + x); document.write("
Der Wert von y: " + y); } else document.write("x ist nicht größer als y");

Ist hier die if-Abfrage nicht erfüllt, wird die Anweisung, die hinter dem else steht, ausgeführt. Auch bei else ist es möglich, mehrere Befehle auszuführen. Wie oben einfach die Befehle in geschweifte Klammern setzen und sie werden ausgeführt. Das folgende Diagramm zeigt den Programmfluss einer if...else-Abfrage. Abbildung 4.2: Die if...elseAbfrage.

96

JavaScript Kompendium

switch

Kapitel 4

Es ist auch möglich, verschachtelte if-Abfragen zu erstellen. Was ist Verschachtelung? Verschachtelung bedeutet in diesem Fall nichts anderes als eine if-Abfrage, die in einem der Ergebniszweige (also direkt hinter dem if oder dem else) eine zweite if-Abfrage ausführt. if (x == y) { if (y == z) { document.write("x ist gleich y und gleich z"); } }

Listing 4.3: Die if...else-Abfrage nur mit if-Abfragen

Hier wird, sobald x gleich y ist, überprüft, ob y auch noch gleich z ist. Erst wenn beide if-Abfragen erfüllt sind, wird der Befehl document.write("x ist gleich y und gleich z"); ausgeführt. Wäre in diesem Beispiel nur eine der beiden if-Abfragen nicht erfüllt, würde der nächste Befehl im Programm aufgerufen und der ganze Zweig der if-Abfragen übersprungen. Für die if-Abfrage gibt es eine Kurzschreibweise: (x > y) ? document.write("x ist größer als y") : document.write("x ist nicht größer als y");

erfüllt genau denselben Zweck wie:

Listing 4.4: Kurzschreibweise einer if...elseAbfrage

if (x > y) { document.write("x ist größer als y"); } else document.write("x ist nicht größer als y");

Mit dieser Schreibweise kann aber noch mehr gemacht werden als nur eine Abkürzung der if-Abfrage. Mit ?: ist es auch möglich, folgenden Code zu realisieren: geht = (x > y) ? "ja" : "nein";

4.2

switch

Wenn Sie einmal mehrere Möglichkeiten in einer Abfrage auswerten möchten, ist die switch-Abfrage genau die richtige Lösung. In einer switchAbfrage verstecken sich eigentlich mehrere if-Abfragen, die nacheinander ausgeführt werden. Sobald einer der Abfrageparameter mit dem Wert, auf den geprüft wird, übereinstimmt, verzweigt die switch-Abfrage in den Zweig, der für diesen Fall zuständig ist, und führt den dort enthaltenen Programmcode aus. Auch in der switch-Anweisung ist es möglich, einen Zweig einzubauen, der dann ausgeführt wird, falls keine der vorherigen Bedingungen zutreffend war. Schauen wir uns die switch-Anweisung im Programmcode an.

JavaScript Kompendium

97

Kapitel 4

Schleifen und Verzweigungen

Listing 4.5: Eine switch-Abfrage mit drei möglichen Fällen und einem default-Teil

switch (zuPrüfenderWert) { case 1 : document.write("Es wurde break; case "2" : document.write("Es wurde break; case 3 : document.write("Es wurde break; default : document.write("Es wurde übergeben.
"); break; }

eine 1 übergeben.
");

eine 2 übergeben.
");

eine 3 übergeben.
");

keine 1, '2' oder 3

In diesem Beispiel wird der Wert geprüft, der in der Variablen zuPrüfenderWert an die switch-Abfrage übergeben wurde. Es ist wichtig, darauf zu achten, worauf Sie in den case-Abschnitten prüfen lassen. JavaScript unterscheidet hier, ob eine Zahl oder ein Buchstabe bzw. ein String übergeben wurde. In obigem Beispiel reagiert die Anweisung case "2" : nicht auf die Zahl 2, sondern auf den String 2.

4.3

break

Terminiert den gerade durchlaufenden Zweig einer Schleife oder Abfrage und führt den nächsten Befehl hinter dem gerade abgebrochenen Zweig aus.

4.4

continue

Terminiert die gerade laufende Iteration einer Schleife und fährt mit der nächsten fort.

4.5

for

Die for-Schleife ist eine Wiederholungsschleife, mit der Sie Anweisungen beliebig häufig wiederholen lassen können. Diese Schleife ist besonders nützlich, wenn Sie einmal auf Problemstellungen stoßen, bei denen Sie Programmteile häufiger hintereinander ausführen müssen. In dem folgenden Beispiel wird eine Variable zehnmal um eins erhöht und ausgegeben.

98

JavaScript Kompendium

while

Kapitel 4

<script language="JavaScript"> for (var i = 0; i < 10; i++) { document.write("i == "+i+"
"); }

Listing 4.6: Eine for-Schleife, die zehnmal durchlaufen wird

Im Browser sollte nach dem Ausführen Folgendes erscheinen: Abbildung 4.3: Ausgabe einer forSchleife.

Die for-Schleife hat den wie in Abbildung 4.4 gezeigten Programmfluss.

4.6

while

Die while-Schleife ist eine der for-Schleife sehr ähnliche Schleife. Das heißt sie überprüft eine Bedingung darauf, ob sie erfüllt ist oder nicht. Sollte bei der ersten Überprüfung die Bedingung schon nicht erfüllt sein, also die Bedingung false ergeben, so wird die Schleife gar nicht erst durchlaufen. Der Unterschied zur for-Schleife besteht darin, dass die while-Schleife keinen Initialisierungs- und Aktualisierungsteil besitzt. Der in Abbildung 4.5 dargestellte Ablaufplan einer while-Schleife zeigt dies ganz deutlich.

JavaScript Kompendium

99

Kapitel 4

Schleifen und Verzweigungen

Abbildung 4.4: Die for-Schleife.

Abbildung 4.5: Die while-Schleife.

Wollen wir das Beispiel der for-Schleife mit einer while-Schleife realisieren, müsste der Quelltext folgendermaßen aussehen:

100

JavaScript Kompendium

do...while

Kapitel 4

<script language="JavaScript"> var i = 0; while (i < 10) { document.write("i == "+i+"
"); i++; }

Listing 4.7: Eine while-Schleife die zehnmal durchlaufen wird

Genau wie die for-Schleife sieht unser Programm im Browser so aus: Abbildung 4.6: Die while-Schleife.

Hilfreich ist die while-Schleife bei Problemen, in denen die Anzahl der nötigen Versuche nicht feststeht.

4.7

do...while

Führt die in der Schleife angegebenen Anweisungen aus, bis die Abfragebedingung false wird. Der Unterschied zur normalen while-Schleife ist, dass bei der do...while-Schleife die Anweisungen der Schleife wenigstens einmal durchlaufen werden, wobei es egal ist, ob die Bedingung der Schleife erfüllt ist oder nicht.

JavaScript Kompendium

101

Kapitel 4

Schleifen und Verzweigungen

Abbildung 4.7: Die do...whileSchleife.

Auch hier wollen wir noch einmal auf das Beispiel der for-Schleife zurückkommen und das Programm auf die do...while-Schleife umschreiben. Listing 4.8: Diese do...whileSchleife wird zehnmal durchlaufen

<script language="JavaScript"> var i = 0; do { document.write("i == "+i+"
"); i++; } while (i < 10);

Wie zu erwarten sieht das Ergebnis genauso aus wie bei den beiden vorherigen Schleifen. Ändern wir aber die Variable i vor dem ersten Durchlauf der Schleife so ab, dass sie den Wert 20 beinhaltet, würden die for- und die while-Schleife keine Ausgabe im Browser erzeugen.

102

JavaScript Kompendium

for...in

Kapitel 4

<script language="JavaScript"> var i = 20; do { document.write("i == "+i+"
"); i++; } while (i < 10);

Listing 4.9: Diese do...whileSchleife bricht nach dem ersten Durchlauf ab

Anders sieht es hier bei einer do..while-Schleife aus: Abbildung 4.8: Ergebnis einer do...while-Schleife.

Obwohl die Abbruchbedingung erfüllt war, wurde die do..while-Schleife einmal durchlaufen.

4.8

for...in

Führt eine for-Schleife mit einem Objekt aus. Dies ist sehr hilfreich, wenn nicht genau bekannt ist, wie viele Elemente ein Objekt besitzt. Um eine genaue Beschreibung dieses Schleifentyps zu bekommen, lesen Sie bitte im Kapitel 6.5.1 nach, da für diese Schleife die Erstellung und das Arbeiten mit Objekten bekannt sein sollte.

JavaScript Kompendium

103

Kapitel 4

Schleifen und Verzweigungen

4.9

Rekursive Funktionen

Rekursive Funktionen sind Funktionen, die sich selber aufrufen. Jetzt fragen Sie sich bestimmt: Was soll das bringen? Wir geben Ihnen Recht, dass die meisten Programme mit ganz normalen Funktionen zu realisieren sind. In wenigen Ausnahmen ist es aber einfacher, eine Funktion rekursiv zu programmieren. Das bekannteste Beispiel einer rekursiven Funktion ist wohl die Berechnung einer Fakultät. Die Fakultät von 7 ist nach mathematischer Sicht ja nichts anderes als das Ergebnis der Rechnung 7*6*5*4*3*2*1 oder mathematisch geschrieben 7!. Ein Programm für dieses Problem könnte so aussehen: Listing 4.10: Berechnung der Fakultät einer Zahl, gelöst durch eine rekursive Funktion

<script language="JavaScript"> function fakultaet(wert) { if (wert != 1) { return wert * fakultaet(wert-1); } else { return 1; } } function welcheZahl() { var zahl; zahl = prompt("Bitte Zahl eingeben:", ""); alert("Die Fakultät von " + zahl + " ist " + fakultaet(zahl) + "."); }


Es gibt sicher kaum Probleme, die man nicht auch ohne eine rekursive Funktion lösen kann. Das obige Programm könnte auch durch eine normale Schleife berechnet werden.

104

JavaScript Kompendium

5

Objekte

Objekte sind ein wichtiger Teil von JavaScript. Dieses Kapitel ist so ausgelegt, dass es Ihnen an ausgewählten Objekten deren Einsatz in JavaScript verdeutlicht und Sie nachher ohne Probleme alle Objekte, die zur Verfügung stehen, benutzen können.

5.1

Warum Objekte?

In Programmiersprachen werden Objekte dazu genutzt, Daten strukturiert darstellen zu können. Wollen Sie zum Beispiel ein Auto für den Computer in verständliche Daten packen, so könnte man ein Objekt Auto erstellen, das mehrere Eigenschaften und Methoden besitzt. Die Eigenschaften stehen hierbei für Werte, die Ihr Auto näher beschreiben, also Motordaten oder wie viele Räder Ihr Auto hat. Bei den Methoden handelt es sich um Funktionen, die zu dem Objekt gehören und mit denen Sie in der Lage sind, Daten über das Objekt abzufragen oder zu ändern. Sehr beliebt sind zum Beispiel immer set- und get-Methoden, die Eigenschaften des Objektes in formatierter Form ausgeben oder in dem Objekt speichern. Da wir uns in diesem Kapitel aber erst einmal mit den bereits bestehenden Objekten in JavaScript auseinander setzen und nicht sofort unsere eigenen Objekte definieren wollen, folgt anschließend eine Einführung in die bereits in JavaScript implementierten Objekte.

5.2

Objekte definieren

Die vordefinierten Objekte in JavaScript liegen als Definitionen vor und können in den meisten Fällen nicht direkt genutzt werden. Um diese Objekte für uns nutzbar zu machen, müssen wir Instanzen der Objekte erzeugen. Eine Instanz ist nichts anderes als das Umsetzen des definierten, noch nicht nutzbaren Objektes in ein reales Objekt, mit dem Sie arbeiten können. Beim Erzeugen einer Instanz wird dem Objekt ein Name zugewiesen, unter dem es später ansprechbar ist. Um eine Instanz eines Objektes zu erzeugen, muss es über seinen Konstruktor im Speicher des Rechners erzeugt werden. In den meisten Fällen wird der Konstruktor eines Objektes mit dem Schlüsselwort new eingeleitet. Ein Konstruktor ist die Methode des Objektes, die für die Erzeugung der Instanz eines Objektes zuständig ist. Im

JavaScript Kompendium

105

Kapitel 5

Objekte Kapitel Selbstdefinierte Objekte werden wir noch genauer auf die Konstruktor-Methode eingehen. Für die folgenden Objekte von JavaScript brauchen keine Instanzen erzeugt zu werden, da sie von der JavaScript-Engine automatisch angelegt werden: window document location history navigator

5.3

Eigenschaften und Methoden

Um auf Eigenschaften oder Methoden eines Objektes zugreifen zu können, müssen Sie die Namen des Objektes und der Eigenschaft oder Methode kennen, die Sie aufrufen möchten. Die Eigenschaft hubraum des Objektes auto würde zum Beispiel mit folgender Syntax der Variablen x zugeordnet: x = auto.hubraum

Um ihr einen Wert zuzuweisen, wird die Schreibweise einfach umgedreht: auto.hubraum = "1.6 Liter"

Möchten Sie eine Funktion des Objektes auto aufrufen, die zum Beispiel alle Eigenschaften des Objektes ausgibt und alleDaten heißen würde, wird folgende Syntax benutzt: auto.alleDaten()

Es gibt bei der Zuweisung von Eigenschaften noch eine Erleichterung. Sollen mehreren Eigenschaften desselben Objektes nacheinander Werte zugewiesen werden, können Sie die with-Anweisung benutzen, um die Schreibarbeit zu verkürzen: with (auto) { name = "Vectra" hersteller = "Opel" hubraum = "1.6 Liter" farbe = "Blau" }

106

JavaScript Kompendium

Vordefinierte Objekte

Kapitel 5

Diese with-Anweisung ist die vereinfachte Schreibweise für: auto.name = "Vectra" auto.hersteller = "Opel" auto.hubraum = "1.6 Liter" auto.farbe = "Blau"

Bei diesem Beispiel ist es noch nicht ganz so viel Vereinfachung, aber sobald die Objekte längere Namen haben, lohnt sich die Verwendung von with.

5.4

Vordefinierte Objekte

Eine Beschreibung aller Objekte, die in JavaScript verfügbar sind, finden Sie in der Referenz.

5.5

Selbst definierte Objekte

Wie am Anfang des Kapitels angesprochen, kommen wir nun zur Definition eigener Objekte. Als Erstes brauchen wir natürlich ein Objekt, das wir verwirklichen wollen. Nehmen wir ein Objekt, das eine Person beschreibt und folgende Eigenschaften für die Person speichert: name vorname alter

Um diese Eigenschaften für unser Objekt zu verwirklichen, brauchen wir ein Programm, das den Konstruktor für unser Objekt enthält. function person(name, vorname, alter) { // Die Elemente des Objektes. this.name = name; this.vorname = vorname; this.alter = alter; }

Listing 5.1: Ein selbst definiertes Objekt mit drei Eigenschaften

Der Konstruktor des Objektes ist, wie Sie sehen, nichts anderes als eine normale Funktion, der Werte übergeben werden und die diese Werte dann einem Objekt zuweist. Nachdem wir den Konstruktor für unser Objekt erstellt haben, können wir schon Instanzen des Objektes erstellen. person1 = new person("Dellwig", "Ingo", "26");

JavaScript Kompendium

107

Kapitel 5

Objekte Ein vollständiges Programm, mit dem Sie mehrere Personen speichern könnten:

Listing 5.2: Ein selbst definiertes Objekt mit drei Eigenschaften, von dem zwei Instanzen erstellt werden

<script> function person(name, vorname, alter) { // Die Elemente des Objektes. this.name = name; this.vorname = vorname; this.alter = alter; } // Die erste Instanz anlegen. person1 = new person("Dellwig", "Ingo", "26"); // Die zweite Instanz anlegen. person2 = new person("Dellwig", "Elmar", "25"); with (document) { // Die erste Instanz ausgeben. write(person1.vorname + " " + person1.name + " ist " + person1.alter + " Jahre alt.
"); // Die zweite Instanz ausgeben. write(person2.vorname + " " + person2.name + " ist " + person2.alter + " Jahre alt.
"); }

Wenn Sie jetzt nicht jedes Mal für die Ausgabe der Namen mit document.write() ausprogrammieren möchten, sondern einfach eine Methode aufrufen wollen, die diese Aufgabe übernimmt, so müsste unser Objekt folgendermaßen erweitert werden: Listing 5.3: Definition von Methoden in eigenen Objekten

function person(name, vorname, alter) { // Die Elemente des Objektes. this.name = name; this.vorname = vorname; this.alter = alter; // Die Methoden des Objektes. this.ausgabe = ausgabe; }

Hierbei ist darauf zu achten, dass die Anweisung this.ausgabe = ausgabe; keine Klammern hinter ausgabe enthält, da sonst sofort die Funktion ausgabe aufgerufen würde, was hier nicht unser Ziel ist. Das komplette Programm für unser Objekt sieht nun so aus:

108

JavaScript Kompendium

Selbst definierte Objekte <script> function person(name, vorname, alter) { // Die Elemente des Objektes. this.name = name; this.vorname = vorname; this.alter = alter;

Kapitel 5 Listing 5.4: Ein komplettes Objekt mit Eigenschaften und Methoden

// Die Methoden des Objektes. this.ausgabe = ausgabe; } function ausgabe() { with (document) { write(this.vorname + " " + this.name + " ist " + this.alter + " Jahre alt.
"); } } // Die Instanzen anlegen. person1 = new person("Dellwig", "Ingo", "26"); person2 = new person("Dellwig", "Elmar", "25"); //Methodenaufruf. person1.ausgabe(); person2.ausgabe();

Die Ausgabe des Programms: Abbildung 5.1: Selbst erstellte Objekte mit einer eigenen ausgabe()Methode.

JavaScript Kompendium

109

Kapitel 5

Objekte

5.5.1

for..in-Schleife

Zum Schluss dieses Kapitels ist noch die Funktion der for..in-Schleife zu erwähnen. Diese Schleife macht nichts anderes, als alle Elemente eines Objektes zu durchlaufen. Beispiel: Listing 5.5: Eine for..inSchleife, die ein Objekt durchläuft

<script> function person(name, vorname, alter) { // Die Elemente des Objektes. this.name = name; this.vorname = vorname; this.alter = alter; } // Die Instanzen anlegen. person1 = new person("Dellwig", "Ingo", "26"); for (i in person1) { document.write( i + ": "); document.write( person1[i] + "
"); }

Diese for..in-Schleife würde folgende Ausgabe erzeugen: Abbildung 5.2: Ausgabe der for..in-Schleife.

Sehr hilfreich ist diese Art der Schleifen bei der Verwendung von Arrays. 110

JavaScript Kompendium

js-Dateien

5.6

Kapitel 5

js-Dateien

Um mit den einmal definierten JavaScript-Objekten immer wieder arbeiten zu können, ohne sie jedes Mal wieder neu anlegen zu müssen, gibt es ab JavaScript 1.1 die Möglichkeit, Bibliotheksdateien zu benutzen. In diesen Dateien wird der JavaScript-Code, der sonst zwischen den Tags <script> und stehen würde, einfach eingetragen. Eine gültige Datei könnte zum Beispiel folgenden Inhalt haben: document.write("Dieser Text stammt aus einer js-Bibliotheksdatei.");

Speichern Sie die Datei unter dem Namen mein.js im JS Verzeichnis oder auf ihrem Web Server ab.

5.6.1

Listing 5.6: Inhalt einer .jsBibliotheksdatei

Laden von Bibliotheksdateien

Um die Datei nun in Ihrer HTML-Seite einzubinden, benutzt man folgende Schreibweise: Sie dürfen gespannt sein :) ob es klappt.
<script src="mein.js">

Listing 5.7: Aufruf einer Bibliotheksdatei in der HTML-Seite

In Ihrem Browser sollte nun Folgendes zu lesen sein: Sie dürfen gespannt sein :) ob es klappt. Dieser Text stammt aus einer js-Bibliotheksdatei.

Sollte dies nicht der Fall sein, so ist die .js-Datei nicht als application/xjavascript-Datei erkannt worden und muss von Ihnen oder Ihrem Administrator noch als solche gesetzt werden. Eine andere Möglichkeit ist, dass Sie einen Browser verwenden, der nicht JavaScript-1.1-fähig ist. Um in diesem Fall eine Meldung zu bekommen, tragen Sie einfach in den <script>-Tags eine Meldung an den Benutzer ein. <script src="mein.js"> document.write("Leider unterstützt Ihr Browser kein JavaScript 1.1!")

Sollte der Anwender nun einen Browser benutzen, der kein JavaScript 1.1 unterstützt, so wird ihm die Meldung ausgegeben.

JavaScript Kompendium

Listing 5.8: Ausgabe für den Anwender, falls sein Browser JavaScript 1.1 nicht unterstützt

111

Kapitel 5

Objekte Alles was zwischen den <script>-Tags steht, wird bei der Verwendung von src ignoriert. Wenn Sie zusätzlichen JavaScript-Code verwenden wollen, muss dieser in einem separaten <script>-Tag angegeben werden.

ICON ANFANG ICON ENDE

112

JavaScript Kompendium

6

Browser- und NavigationsObjekte

Die folgenden Objekte werden automatisch von der JavaScript-Engine erstellt und brauchen nicht über einen Konstruktor erstellt zu werden.

6.1

window

Das window-Objekt repräsentiert das Browserfenster. Im window-Objekt sind Methoden wie open(), close(), alert(), confirm() und prompt() definiert, mit denen Sie einfach und schnell Fenster öffnen und schließen sowie Informationen vom Anwender erfragen können. Das folgende Programm öffnet ein Fenster mit Hilfe des window-Objektes: <script language="JavaScript"> var neuesFenster;

Listing 6.1: Ein Fenster wird mit dem window-Objekt unter JavaScript erstellt

function neuesFensterOeffnen() { neuesFenster = open("http://www.mut.de/"); }


Wie Sie sicher bemerkt haben, haben wir die open()-Methode des windowObjektes nicht mit window.open(), sondern einfach nur mit open() aufgerufen. Dies kommt daher, dass das window-Objekt eine Sonderstellung unter den Objekten hat und Methoden des window-Objektes auch ohne die Angabe von window. aufgerufen werden können. Dies funktioniert allerdings nur beim window-Objekt und nicht bei anderen Objekten. Um das gerade geöffnete Fenster wieder zu schließen, ändern wir das Programm einfach ab:

JavaScript Kompendium

113

Kapitel 6

Browser- und Navigations-Objekte

Listing 6.2: Fenster mit JavaScript erstellen und wieder schließen

<script language="JavaScript"> var neuesFenster; function neuesFensterOeffnen() { neuesFenster = open("http://www.mut.de/"); } function neuesFensterSchliessen() { neuesFenster.close(); }


Es ist ganz wichtig, dass Sie bei der close()-Methode den Objektnamen des window-Objektes angeben, das geschlossen werden soll. Wenn Sie versuchen, ein Fenster zu schließen, das nicht durch JavaScript erstellt wurde, wird dem Benutzer ein Pop-up-Fenster angezeigt, das eine Bestätigung einholt, ob das Fenster geschlossen werden darf. Um ein Fenster zu öffnen, das ein bestimmtes Erscheinungsbild hat, kann man der open()-Methode auch noch weitere Angaben über das Aussehen des Fensters mitgeben. Listing 6.3: Ein Fenster mit übergebenem Erscheinungsbild

<script language="JavaScript"> var neuesFenster; function neuesFensterOeffnen() { neuesFenster = open("http://www.mut.de/", "MarktundTechnikFenster", "height=300,width=800"); }


114

JavaScript Kompendium

window

Kapitel 6

Das Programm sollte nachher folgendes Fenster öffnen: Abbildung 6.1: Ein angepasstes Fenster.

Der String "Markt&TechnikFenster" steht hierbei für den Namen des Fensters, mit dem man das Fenster aus anderen JavaScript-Programmen oder HTMLSeiten ansprechen kann. Als Nächstes schauen wir uns die Methoden alert(), confirm() und prompt() noch einmal kurz an.

6.1.1

alert()

alert() liefert dem Anwender einen Informationsdialog, den der Benutzer

durch Klicken auf den angebotenen OK-Knopf wieder schließen kann. Innerhalb des Dialogs wird eine Meldung angezeigt, die durch einen String übergeben wird. Sie kennen eine einzeilige Ausgabe in einem Dialogfeld mit alert() bereits aus den vorherigen Kapiteln, es ist aber auch möglich, mehrzeilige Meldungen an die alert()-Methode zu übergeben. alert("Dieser Text\nsollte über\nmehrere Zeilen\ngehen.")

Hierbei wird durch \n ein Zeilenumbruch erzwungen. Abbildung 6.2: Ausgabe von mehrzeiligen Meldungen.

JavaScript Kompendium

115

Kapitel 6

Browser- und Navigations-Objekte

6.1.2

confirm()

Bei der confirm()-Methode hat der Anwender die Möglichkeit, auf eine Meldung mit einem OK- oder ABBRECHEN-Knopf zu reagieren. Das Ergebnis der confirm()-Methode ist ein Boolean-Ausdruck, der beim Drücken des OK-Knopfes true ist und beim ABBRECHEN-Knopf false. Sie können das Ergebnis direkt einer Variablen zuweisen. JaNein = confirm("Sind Sie sich wirklich sicher?"); Abbildung 6.3: Die confirm()Methode im Einsatz.

6.1.3

prompt()

Zum Schluss bleibt noch die prompt()-Methode, mit der Sie Eingaben vom Benutzer einholen können. eingabe = prompt("Wie heißen Sie?", "Hier bitte Ihren Namen eintragen.") Abbildung 6.4: Benutzereingabe mit prompt().

Der eingegebene Name wird nach Drücken des OK-Knopfs an die Variable eingabe übergeben. Wird dieser Dialog allerdings mit CANCEL abgebrochen, so wird der Wert false zurückgeliefert.

6.2

navigator

Das navigator-Objekt repräsentiert den Browser. Im navigator-Objekt sind Eigenschaften wie appCodeName, appName, appVersion, platform und userAgent definiert, mit denen Sie einfach und schnell Informationen über den Browser des Anwenders erfragen können. Das folgende Programm zeigt Informationen über Ihren Browser an:

116

JavaScript Kompendium

navigator <script language="JavaScript"> with (document) { write("appCodeName: " +navigator.appCodeName+"
"); write("appName: "+navigator.appName+"
"); write("appVersion: "+navigator.appVersion+"
"); write("platform: "+navigator.platform+"
"); write("userAgent: "+navigator.userAgent+"
"); }

Kapitel 6 Listing 6.4: Informationen des Browsers über das navigator-Objekt abfragen

Mit einem Netscape-Browser bekommen wir folgende Ausgaben: Abbildung 6.5: Inhalte des navigator-Objektes mit einem NetscapeBrowser.

JavaScript Kompendium

117

Kapitel 6

Browser- und Navigations-Objekte Mit einem Microsoft Internet Explorer erhalten wir folgende Ausgaben:

Abbildung 6.6: Inhalte des navigator-Objektes mit einem MicrosoftBrowser.

Nun sollte es kein Problem mehr darstellen, zu überprüfen, ob ein Anwender den für Ihr Script benötigten Browser verwendet. Wollen Sie zum Beispiel bei einer für den Netscape Navigator optimierten Seite prüfen, ob der Anwender auch diesen Browser verwendet, könnten Sie mit folgendem Programm auf falsche Browser reagieren und den Anwender auf die Optimierung hinsichtlich des anderen Browsers aufmerksam machen: Listing 6.5: Prüfung, ob der Browser ein Netscape-Browser ist

if (navigator.appName.indexOf("Netscape") != -1) { document.write("Sie verwenden einen Netscape Communicator/Navigator."); } else { document.write("Sie verwenden keinen Netscape Communicator/Navigator."); }

Oder gleiches Programm für einen Microsoft Internet Explorer: Listing 6.6: Prüfung, ob der Browser ein Internet-Explorer ist

118

if (navigator.appName.indexOf("Microsoft Internet Explorer ") != -1) { document.write("Sie verwenden einen Microsoft Internet Explorer."); } else { document.write("Sie verwenden keinen Microsoft Internet Explorer."); }

JavaScript Kompendium

History

Kapitel 6

Mit der indexOf-Methode können Sie überprüfen, ob in einem String eine angegebene Zeichenfolge enthalten ist. Es sollte also kein Problem sein, auf alle möglichen Versionen von Browsern hin zu überprüfen, egal ob es sich um die Namen oder Versionsnummern handelt.

6.3

History

Das History-Objekt bietet die Möglichkeit, die Seiten, die ein Browser in der aktuellen Sitzung schon besucht hat, wieder anzuwählen und anzuzeigen. Über die Funktionen back() und forward() kann man zurück und vorwärts gehen.


Listing 6.7: Das History-Objekt in Aktion

Ein weiteres Beispiel hierfür finden Sie im Kapitel 11.2 über Rahmen. Wie Sie sicher schon bemerkt haben, ist es auch sinnvoller, dieses Objekt mit einer Rahmenseite einzusetzen.

6.4

screen

Mit dem screen-Objekt können Sie sehr einfach auf die verschiedenen Einstellungen der Anwender im Bereich der Bildschirmauflösung reagieren und dem Benutzer zum Beispiel mitteilen, dass Ihre Seite für eine Auflösung mit 800x600 Bildpunkten optimiert ist und mit 640x480 Pixel, die der Anwender gerade als Auflösung eingestellt hat, nicht optimal angezeigt wird. Auch denkbar ist, Webseiten für verschiedene Auflösungen zu hinterlegen. <script language="JavaScript1.2"> var breite; var hoehe;

JavaScript Kompendium

Listing 6.8: Welche Bildschirmauflösung hat der Anwender eingestellt?

119

Kapitel 6

Browser- und Navigations-Objekte // maximale Breite des Bildschirms breite=screen.width; // maximale Höhe des Bildschirms hoehe=screen.height; document.write("Ihre Bildschirmauflösung beträgt: "+breite+"x"+hoehe+"
");

In diesem Beispiel werden die maximale Höhe und Breite des Bildschirms in den Variablen hoehe und breite gespeichert und danach auf dem Bildschirm angezeigt. Durch kleine Änderungen des Programms können wir nun schon Mitteilungen an den Anwender geben, ob seine Auflösung groß genug für unsere Seite ist. Listing 6.9: Reicht diese Auflösung für die Anzeige unserer Seite?

<script language="JavaScript1.2"> var breite; var hoehe; // maximale Breite des Bildschirms breite=screen.width; // maximale Höhe des Bildschirms hoehe=screen.height; if ((breite>=800)&&(hoehe>=600)) { document.write("Ihre Bildschirmauflösung beträgt: "+breite+"x"+hoehe+"
"); } else { document.write("Ihre Bildschirmauflösung ist nicht groß genug.
"); }

Will man an dieser Stelle mit unterschiedlichen Webseiten auf unterschiedliche Auflösungen reagieren, ist es sinnvoll, die Überprüfung der Auflösung auf einer einleitenden Begrüßungsseite oder über verschiedene Links zu realisieren. Das folgende Listing zeigt die Selektierung über eine Eingangsseite. Listing 6.10: Eine Eingangsseite, die je nach Bildschirmauflösung auf verschiedene Webseiten verweist

120

<script language="JavaScript1.2"> function wohinGehen() { var breite;

JavaScript Kompendium

screen

Kapitel 6 var hoehe; // maximale Breite des Bildschirms breite=screen.width; // maximale Höhe des Bildschirms hoehe=screen.height; //sobald die Auflösung größer oder gleich //800x600 ist wird diese Seite geladen if ((breite>=800)&&(hoehe>=600)) { location.href="800x600.html";} //sobald die Auflösung kleiner 800x600 ist wird //diese Seite geladen if ((breite<800)&&(hoehe<600)) { location.href="kleiner.html";}

} Willkommen auf unserer Website. Sollte diese Seite nicht Automatisch nach 5 Sekunden wechseln klicken Sie bitte hier um zur nächsten Seite zu gelangen.

Sobald der Timer im -Tag auslöst, wird in der Funktion wohinGehen() überprüft, ob die Bildschirmauflösung größer oder gleich 800x600 Pixel ist. Sollte dies der Fall sein, so wird auf die Seite 800x600.html gesprungen. In unserem Beispiel wird die HTML-Datei kleiner.html nur dann geöffnet, falls die Bildschirmauflösung kleiner als 800x600 Bildpunkte ist.

JavaScript Kompendium

121

7

Objekte zur Textbearbeitung

In diesem Kapitel zeigen wir Ihnen, wie Sie Strings bearbeiten und wie Sie in Zeichenfolgen nach bestimmten Texten suchen können. Apropos Texte: Wir haben ein sehr schönes Gestaltungsmittel für Texte aus HTML noch nicht besprochen. Da das folgende Kapitel ein wenig trockener werden wird, möchten wir die Gelegenheit nutzen, um hier in die Textgestaltung per kurz einzugehen. Sie werden dieses Wissen auch für das Kapitel über Stylesheets gut brauchen können.

7.1

Der -Container

Wir haben ja bereits in einem vorherigen Kapitel einige Möglichkeiten kennen gelernt, wie man Textpassagen hervorheben kann. Manchmal reicht es aber nicht aus, alles in der gleichen Schriftgröße und in derselben Schriftart zu schreiben. Deshalb gibt es einige weitere nützliche Möglichkeiten, das Schriftbild zu verändern.

7.1.1

Schriftgröße

Man muss natürlich irgendwie die Textabschnitte kennzeichnen, deren Schriftbild anders gestaltet werden soll. Dafür ist ... zuständig. Man kann diesem Tag unter anderem das Attribut size zuordnen, das Werte von 1 bis 7 annehmen kann. Wenn man einfach eine Zahl angibt, wird der Text in dieser Schriftgröße ausgegeben. Wenn man nicht immer nachsehen will, welche Größe gerade verwendet wird, man aber auf jeden Fall eine kleinere Schriftart benötigt, kann man auch ein Vorzeichen setzen.

Diese Marke würde also eine Schriftart erzeugen, die um zwei Größen kleiner ist als die zuvor verwendete. Wenn Sie eine größere Schriftart benötigen, können Sie natürlich auch den umgekehrten Weg gehen. Zum Beispiel:

JavaScript Kompendium

123

Kapitel 7

Objekte zur Textbearbeitung Damit Sie nicht den ganzen Körper Ihrer Seite mit ... umschließen müssen, können Sie auch am Anfang einfach eine Standardschrift mit festlegen. Ein kleines Beispiel könnte also so aussehen:

Listing 7.1: Verschiedene Schriftgrößen

Dieses ist jetzt die Standardschrift.
0 1 2 3 4 5 6 7 8

Ein Blick auf das Ergebnis lässt viele Schlüsse zu: Abbildung 7.1: Die Schriftgröße ist in sieben Stufen veränderbar.

Hier können wir erkennen, dass wirklich nur die Werte 1 bis 7 Sinn machen, denn die 0 stimmt mit der 1 überein, des Weiteren sind die Ziffern 7 und 8 auch gleich groß.

124

JavaScript Kompendium

Der -Container

7.1.2

Kapitel 7

Schriftarten

Ein weiteres Attribut, welches das Aussehen einer Seite wesentlich verbessern kann, ist face. Es erlaubt die Angabe einer Schriftart. Diese Funktion wird allerdings leider noch nicht von allen Browsern unterstützt.

Ein Textabschnitt, der so beginnt, wird in der Schriftart »Arial« angezeigt. Diese muss allerdings auf dem Rechner des Betrachters installiert sein. Deshalb können Sie auch mehrere Schriftarten angeben, denn der Browser sucht diese dann der Reihe nach durch. Als Trennzeichen dient hier ein Komma. Test

An diesem Beispiel kann man gut erkennen, wie man mit verschiedenen Schriftarten umgehen kann. Der Browser versucht das Wort Test zuerst in der Schriftart irgendeine schrift darzustellen. Ist diese nicht installiert, sucht er nach igloolaser. Erst danach weicht er auf arial aus. Wenn Sie ganz sichergehen wollen, dass Ihre Seite richtig angezeigt wird, können Sie die verwendeten Schriftarten auch mit Ihrer Homepage hochladen und eine Verknüpfung darauf verweisen lassen. So kann der Betrachter diese Dateien dann herunterladen und die Schriftarten installieren. Sie erkennen Schriftarten an der Dateiendung .ttf oder .fon.

7.1.3

Schriften-Referenz

Hier finden Sie alle Tags, die mit Schriftarten und -größe im Zusammenhang stehen. Tag / Attribut

3.2

4.0

Internet Explorer

Netscape

X

X

1.0

1.0

color

X

1.0

face

X

1.0

X

1.0



size

2.0

3.0

X

1.0

Dieses Tag stellt die Standardschriftart ein.

JavaScript Kompendium

125

Kapitel 7

Objekte zur Textbearbeitung color Hier wird die Farbe des Textes festgelegt. Gültig sind RGB-Werte und bei vielen Browsern vordefinierte Farbwerte (siehe Anhang D). face Erwartet eine durch Kommata getrennte Liste von Schriftart-Namen. Die zuerst gefundene (und auf dem System des Betrachters installierte) Schriftart wird für den von diesem Tag umschlossenen Text als Ausgabeschriftart verwendet. size Repräsentiert die Schriftgröße. Gültige Werte sind 1 bis 7. Wenn man dem Wert ein + oder ein – voranstellt, wird die Größe relativ zur aktuellen Schriftgröße berechnet. Tag / Attribut 2.0

3.0

3.2

4.0

Internet Explorer

Netscape



X

X

1.0

1.0

color

X

X

1.0

2.0

X

1.0

3.0B5

face

4.0B5

point-size size

X

X

1.0

1.0

Dieses Tag ist das wohl mächtigste Schrift gestaltende Mittel in HTML 4. Die Attribute wirken sich auf die Schriftart und -größe aus. color Hier wird die Farbe des Textes festgelegt. Gültig sind RGB-Werte und bei vielen Browsern vordefinierte Farbwerte (siehe Anhang D). face Erwartet eine durch Kommata getrennte Liste von Schriftart-Namen. Die zuerst gefundene (und auf dem System des Betrachters installierte) Schriftart wird für den von diesem Tag umschlossenen Text als Ausgabeschriftart verwendet. point-size Gibt die Punktgröße der Schriftart an und ist eine Alternative zu size. 126

JavaScript Kompendium

Das string-Objekt

Kapitel 7

size Repräsentiert die Schriftgröße. Gültige Werte sind 1 bis 7. Wenn man dem Wert ein + oder ein – voranstellt, wird die Größe relativ zur aktuellen Schriftgröße berechnet.

7.2

Das string-Objekt

Um in JavaScript eine Zeichenfolge darzustellen, bedient man sich des string-Objektes. Mit diesem Objekt kann ganz einfach die Länge eines Strings ermittelt oder bestimmte Teile einer Zeichenkette entfernt und in einer anderen Zeichenkette wieder eingefügt werden.

7.2.1

Ein string-Objekt erstellen

Um ein string-Objekt zu erstellen, wird es über new einer Variablen zugewiesen. meinString = new String("Dies ist ein String");

Die Variable meinString enthält nach dieser Anweisung den Wert "Dies ist ein String". Sobald der String durch den Konstruktor angelegt wurde, können alle Methoden des string-Objektes mit ihm ausgeführt werden.

7.2.2

Zwei string-Objekte zu einem zusammenfügen

Um zwei einzelne string-Objekte zu einem neuen string-Objekt zusammenzuführen, steht Ihnen der String-Additions-Operator zur Verfügung. <script language="JavaScript"> var eins; var zwei; var drei;

Listing 7.2: Zusammenführen von string-Objekten durch einen Operator

eins = new String("eins"); zwei = new String("zwei"); drei = new String("drei"); document.writeln(eins); document.writeln(zwei); document.writeln(drei); //der Variablen drei einen neuen Wert zuweisen drei = eins + zwei;

JavaScript Kompendium

127

Kapitel 7

Objekte zur Textbearbeitung document.writeln(eins); document.writeln(zwei); document.writeln(drei);

In der Bildschirmausgabe sieht man, dass beim zweiten Ausgeben der drei Variablen der Wert der Variablen drei nicht mehr "drei", sondern "einszwei" beträgt. Eine anderer Weg ist die Benutzung der concat()-Methode des stringObjektes. Hier wird das übergebene string-Objekt an das aktuelle stringObjekt angefügt und komplett zurückgegeben. Listing 7.3: Zusammenführen von string-Objekten durch die concat()-Methode

<script language="JavaScript"> var eins; var zwei; var drei; eins = new String("eins"); zwei = new String("zwei"); document.writeln(eins); document.writeln(zwei); drei = eins.concat(zwei); document.writeln(eins); document.writeln(zwei); document.writeln(drei);

Bei der concat()-Methode werden weder das aktuelle string-Objekt noch das angefügte string-Objekt verändert. ICON Eine weitere Möglichkeit ist die Verwendung des String-Operators +=. Hier ICON ENDEANFANG werden zwei Strings miteinander verknüpft und im ersten String gespeichert. Listing 7.4: Stringverknüpfungen mit dem +=-Operator

128

<script language="JavaScript"> var stringEins; var stringZwei;

JavaScript Kompendium

Das string-Objekt

Kapitel 7

stringEins = new String("eins"); stringZwei = new String("zwei"); document.writeln(stringEins); document.writeln(stringZwei); stringEins += stringZwei; document.writeln(stringEins); document.writeln(stringZwei);

Wie zu erwarten war, hat die Variable stringEins nach der Zuweisung den Wert einszwei.

7.2.3

Teile eines string-Objektes zurückgeben

Um nun Teile eines string-Objektes zurückzugeben, gibt es die substr()Methode und die substring()-Methode. Bei der substr()-Methode wird die Startposition und die Länge des zu kopierenden string-Objektes angegeben. <script language="JavaScript"> var stringEins; var stringZwei;

Listing 7.5: Einen Bereich eines string-Objektes mit der substr()Methode übergeben

stringEins = new String("Dies ist ein ganz normaler String."); document.writeln(stringEins+"
"); stringZwei = stringEins.substr(3,11); document.writeln(stringEins+"
"); document.writeln(stringZwei+"
");

Wie die Bildschirmausgabe zeigt, wurde das string-Objekt, aus dem wir den Teilstring entnommen haben, nicht verändert. Dies ist ein ganz normaler String. Dies ist ein ganz normaler String. s ist ein g

JavaScript Kompendium

129

Kapitel 7

Objekte zur Textbearbeitung Gibt man bei der substr()-Methode keine Länge an, so wird der gesamte String rechts von der Startposition übergeben.

Etwas anders ist die Verwendung der substring()-Methode. Hier werden ICON ANFANG zwei Positionen angegeben und der Teil zwischen diesen Positionen wird als Ergebnis zurückgeliefert. Listing 7.6: Einen Bereich eines string-Objektes mit der substring()Methode übergeben

<script language="JavaScript"> var stringEins; var stringZwei; stringEins = new String("Dies ist ein ganz normaler String."); document.writeln(stringEins+"
"); stringZwei = stringEins.substring(3,11); document.writeln(stringEins+"
"); document.writeln(stringZwei+"
");

Hier ist die Bildschirmausgabe ein klein wenig anders als in dem vorherigen Beispiel zur substr()-Methode. Dies ist ein ganz normaler String. Dies ist ein ganz normaler String. s ist ei

Auch bei der substring()-Methode wird der gesamte String rechts von der ersten Position übergeben, wenn keine zweite Position angegeben wurde.

ICON ANFANG ICON ENDE

7.3

Suchen mit regulären Ausdrücken

Durch reguläre Ausdrücke können Sie sehr schnell Strings auf bestimmte Zeichenfolgen untersuchen lassen. Tabelle 7.1: Reservierte Zeichen zum Suchen mit regulären Ausdrücken

130

Reserviertes Zeichen

Beschreibung

\

Backslash

^

Entspricht dem Anfang der Eingabe

JavaScript Kompendium

Suchen mit regulären Ausdrücken

Reserviertes Zeichen

Beschreibung

$

Entspricht dem Ende der Eingabe

*

Zeichen soll 0-mal oder häufiger vorkommen (gleichbedeutend mit {0, })

+

Zeichen soll 1-mal oder häufiger vorkommen (gleichbedeutend mit {1, })

?

Zeichen soll 0- oder 1-mal vorkommen (gleichbedeutend mit {0,1})

.

Jedes beliebige Zeichen bis auf \n

(x)

Sucht nach x

x|y

Sucht nach x oder y

{n}

Zeichen soll genau n-mal vorkommen

{n,}

Zeichen soll mindestens n-mal vorkommen

{n,m}

Zeichen soll mindestens n-mal, aber nicht häufiger als m-mal vorkommen

[xyz]

Eine Gruppe von Zeichen. Entspricht einem beliebigen der enthaltenen Zeichen. "[abc]" entspricht z.B. dem "a" in "fallen".

[^xyz]

Eine Gruppe ausgeschlossener Zeichen. Entspricht allen nicht enthaltenen Zeichen.

\b

Entspricht einer Wortgrenze, d.h. der Position zwischen einem Wort und einem Leerzeichen. "er\b" entspricht beispielsweise dem "er" in "neuer", nicht jedoch dem "er" in "verb".

\B

Entspricht einer Nichtwortgrenze. "ee*r\B" entspricht dem "eer" in "Beeren".

\d

Entspricht einer Ziffer. Äquivalent zu [0-9].

\D

Entspricht einer Nichtziffer. Äquivalent zu [^0-9].

\f

Entspricht einem Seitenvorschubzeichen

\n

Entspricht einem Zeilenumbruchzeichen

\r

Entspricht einem Wagenrücklaufzeichen

\s

Entspricht beliebigen Leerräumen wie Leerzeichen, Tabulator, Seitenvorschub usw. Äquivalent zu "[ \f\n\r\t\v]".

JavaScript Kompendium

Kapitel 7 Tabelle 7.1: Reservierte Zeichen zum Suchen mit regulären Ausdrücken (Forts.)

131

Kapitel 7 Tabelle 7.1: Reservierte Zeichen zum Suchen mit regulären Ausdrücken (Forts.)

Objekte zur Textbearbeitung

Reserviertes Zeichen

Beschreibung

\S

Entspricht beliebigen Nichtleerräumen. Äquivalent zu "[^ \f\n\r\t\v]".

\t

Entspricht einem Tabulatorzeichen

\v

Entspricht einem vertikalen Tabulatorzeichen

\w

Entspricht allen alphabetischen Zeichen einschließlich Unterstrich. Äquivalent zu "[A-Za-z0-9_]".

\W

Entspricht allen nichtalphabetischen Zeichen. Äquivalent zu "[^A-Za-z0-9_]".

\num

Ein Rückverweis auf gespeicherte Entsprechungen. "(.)\1" entspricht zum Beispiel zwei aufeinander folgenden identischen Zeichen.

\onum

onum ist ein oktaler Escape-Wert. Oktale EscapeWerte können 1, 2 oder 3 Stellen aufweisen. Beispielsweise entspricht sowohl "\11" als auch "\011" dem Tabulatorzeichen. "\0011" ist äquivalent zu "\001" & "1". Oktale Escape-Werte dürfen 256 nicht überschreiten, da andernfalls nur die ersten beiden Stellen den Ausdruck enthalten. Ermöglicht die Verwendung von ASCII-Codes in regulären Ausdrücken.

\xnum

xnum ist ein hexadezimaler Escape-Wert. Hexadezimale Escape-Werte können nur genau zwei Stellen aufweisen. "\x41" entspricht beispielsweise "A". "\x041" ist äquivalent zu "\x04" & "1". Ermöglicht die Verwendung von ASCII-Codes in regulären Ausdrücken.

7.3.1

Beispiele zu regulären Ausdrücken

Eine der häufigsten Abfragen ist wahrscheinlich die Überprüfung, ob bestimmte Zeichen in Zeichenketten vorkommen oder nicht. Hier bieten die regulären Ausdrücke eine sehr Programmcode-unaufwändige Variante der Überprüfung. Nehmen wir zum Beispiel ein Textfeld, in dem ein Anwender in einem Formular Daten eingegeben hat und diese nun über das Internet verschicken will. Das Textfeld sollte eine Rechnungsnummer enthalten und geprüft werden, ob die Rechnungsnummer dem Standard entspricht. Der Standard der Rechnungsnummer ist in diesem Beispiel 12-abc-1. Ein Script, das die Richtigkeit der Eingabe des Anwenders überprüft, könnte so aussehen:

132

JavaScript Kompendium

Suchen mit regulären Ausdrücken <script language="JavaScript"> function pruefen(wert) { regEx = /\d+-\D+-\d/; if (regEx.exec(wert)) alert("OK!") else alert("Nicht OK!!!"); }


Kapitel 7 Listing 7.7: Texteingaben über reguläre Ausdrücke überprüfen

In der Funktion pruefen() wird der Inhalt des Textfeldes mit dem Ausdruck regEx = /\d+-\D+-\d/ verglichen. Was bedeutet nun dieser Ausdruck? Als Erstes handelt es sich bei der Variablen regEx um eine Instanz des RegExpObjektes, die durch die Zuweisung des regulären Ausdrucks angelegt wird. Die / am Anfang und Ende des Ausdrucks begrenzen ihn. \d gibt an, dass hier eine Zahl erwartet wird. Das + direkt dahinter besagt, dass es beliebig viele Zahlen sein dürfen. Als Nächstes folgt die Überprüfung, ob auf die ersten Zahlen ein Bindestrich – folgt. Mit \D wird angegeben, dass hier ein Buchstabe steht und das + hinter dem \D gibt wieder an, dass es beliebig viele Buchstaben sein dürfen. Wieder eine Überprüfung, ob ein Bindestrich folgt, und zum Schluss dann wieder eine Zahl mit \d. Um diesen Ausdruck nun mit dem Inhalt der übergebenen Variablen wert vergleichen zu können, wird die exec()-Methode des RegExp-Objektes genutzt. Nun werden Sie allerdings nach einigem Testen feststellen, dass unser Ausdruck noch nicht ganz perfekt ist und noch sehr viele falsche Rechnungsnummern als richtig erkennt. Am besten wäre, hier eine etwas genauere Angabe darüber zu haben, wie häufig die Zeichen in der Rechnungsnummer vorkommen dürfen. Ändern Sie das Script wie unten gezeigt ab und es sollten nur noch erlaubte Rechnungsnummern angenommen werden. <script language="JavaScript"> function pruefen(wert) { regEx = /\b\d{2}-\D{3}-\d{1}\b/; if (regEx.exec(wert)) alert("OK!")

JavaScript Kompendium

Listing 7.8: Maximal abgesicherte Überprüfung der Rechnungsnummer auf richtige Eingabe

133

Kapitel 7

Objekte zur Textbearbeitung else alert("Nicht OK!!!"); }


Mit diesem Script ist es nicht mehr möglich, eine falsch formatierte oder für das System ungültige Rechnungsnummer einzugeben. Die Zahlen, die in den {} stehen, geben an, wie oft ein Zeichen des vorangegangenen Typs vorkommen darf. Was in dem neuen Script auch noch zur Sicherheit der richtigen Rechnungsnummer beiträgt, ist, dass wir dem Textfeld eine maximale Eingabelänge von acht Zeichen gegeben haben. Im nächsten Beispiel soll aus einer Eingabe eines Anwenders herausgefunden werden, wie oft dieser das Wort und eingegeben hat. Listing 7.9: Wie oft wurde das Wort und eingegeben?

<script language="JavaScript"> function suchen(wert) { regEx = /\bund\b/g; anzahl = wert.match(regEx); if (anzahl) alert("Das Wort 'und' wurde "+anzahl.length+" mal gefunden.") else alert("Das Wort 'und' wurde nicht gefunden."); }


In diesem Beispiel wird der reguläre Ausdruck nicht mit dem RegExp-Objekt, sondern mit dem string-Objekt ausgeführt. Die Besonderheit an diesem 134

JavaScript Kompendium

Suchen mit regulären Ausdrücken

Kapitel 7

regulären Ausdruck ist, dass er hinter dem letzten / noch ein g stehen hat. Dieses g steht für globales Suchen. Des Weiteren weisen wir das Ergebnis der Suche einer Variablen zu, in der nachher die kompletten Wörter stehen, auf die unser Ausdruck gepasst hat. Wenn Sie ein paar Eingaben getestet haben, werden Sie wieder bemerken, dass der Ausdruck bestimmte undSchreibweisen nicht findet. So wird zum Beispiel ein groß geschriebenes und ignoriert. Um die Schreibweise des Wortes, nach dem gesucht werden soll, komplett zu ignorieren, kann man als Parameter hinter dem letzten / auch noch ein i angeben, was dann dazu führt, dass die Groß-/Kleinschreibung ignoriert wird. Soll die Groß-/Kleinschreibung nicht ignoriert werden, sondern nur für dieses eine Wort beide Möglichkeiten unterstützen, hat man noch die Möglichkeit, den regulären Ausdruck folgendermaßen abzuändern. regEx = /\b[Uu]nd\b/g;

Dieser Ausdruck findet alle und und Und. Will man zum Beispiel den Text "Ich glaube, dass man an diesem Beispiel sehr gut sehen kann, dass dieses Script funktioniert."

in die alte Rechtschreibung umwandeln, so geht dies auch über reguläre Ausdrücke. <script language="JavaScript"> function umwandeln(wert) { regEx = /\bdass\b/g; neu = wert.replace(regEx, "daß"); alert(neu); }


JavaScript Kompendium

Listing 7.10: Neue Rechtschreibung in alte umwandeln

135

Kapitel 7

Objekte zur Textbearbeitung In diesem Beispiel werden alle gefundenen dass in einem string-Objekt mit der replace()-Methode durch daß ersetzt. Das Ergebnis sollte auf dem Bildschirm nachher etwa so aussehen.

Abbildung 7.2: Ausgabe eines mit einem regulären Ausdruck geänderten stringObjektes.

Wie Sie sehen, hat man mit den regulären Ausdrücken ein sehr mächtiges Werkzeug in Bezug auf Stringmanipulationen und die Suche von bestimmten Zeichenfolgen in string-Objekten.

136

JavaScript Kompendium

Formulare

8

Eine Homepage ist immer eine Informationsquelle für den Betrachter der Seite. Manchmal möchte man aber Informationen von dieser Person erhalten. In vielen Fällen reicht es dann, die E-Mail-Adresse anzugeben und den Besucher Ihrer Seite zu bitten, Ihnen eine Mail zu schreiben. Aber wenn man immer bestimmte Informationen benötigt und es dem Anwender so leicht wie möglich machen möchte, sind Formulare eine lohnenswerte Alternative. In diesem Kapitel möchten wir Ihnen den Umgang mit solchen Formularen näher bringen. Dabei gehen wir zunächst wieder auf die HTML-Aspekte ein und kommen dann zur Auswertung von Formularen durch JavaScript. Auf manchen Webseiten gibt es Formulare, die aussehen wie »Kraut und Rüben«. Da wir unseren Formularen einen professionellen Anstrich verpassen möchten, sollten wir zuerst einen kleinen Exkurs in die Tabellenerstellung starten.

8.1

Tabellen

Auch wenn man Text besonders formatieren oder große Zahlenmengen übersichtlich darstellen möchte, kommt man nicht um Tabellen herum.

8.1.1

Grundaufbau einer Tabelle

Ein großer Vorteil von HTML ist, dass man recht einfach Tabellen erstellen kann. Wenn man zum Beispiel irgendwelche Daten, die aus vielen Zahlen bestehen, an den Betrachter der Seite weitergeben möchte, sollte man diese möglichst anschaulich darstellen. Der komplette Tabellencode wird durch den Container ... umrahmt. Eine Tabelle ist ein relativ komplexes Gebilde, dessen Erscheinungsbild durch mehrere Attribute beeinflusst werden kann. Das Attribut border gibt zum Beispiel die Breite des Tabellenrahmens an. Wenn man hier eine Null verwendet, wird die Tabelle über keinen Rahmen verfügen. Bei neuen Browsern ist der Standardwert für border Null.

JavaScript Kompendium

137

Kapitel 8

Formulare Mit cellpadding kann man angeben, wie viele Bildpunkte der Tabellentext vom Zellenrand entfernt sein soll. cellspacing gibt dagegen an, wie weit die Zellen selbst voneinander

getrennt sind. Außerdem kann man mit width angeben, wie breit die Tabelle insgesamt werden soll. Hier kann man sowohl einen absoluten Wert in Punkten als auch den Prozentanteil der Breite des Bildschirms angeben. Man kann natürlich auch die Höhe festlegen. Diese wird wie width verwendet, muss aber dem Attribut height zugewiesen werden. Hier ein paar Beispiele:

Eine Tabelle, die so beginnt, hat keinen Rahmen. Der Text würde nur wie in einer Tabelle formatiert werden. Die einzelnen Elemente würden nicht einmal durch Linien voneinander getrennt.

Diese Tabelle wird mit einem Rahmen versehen, der die kleinste Breite hat. Der Text hat überall einen Abstand von fünf Punkten zu den Trennlinien und die Tabelle wird insgesamt genau 100 Punkte breit sein.

Diese Tabelle erhält einen breiten Rahmen. Jede Zelle ist 10 Punkte von der nächsten entfernt. Die ganze Tabelle nimmt die Hälfte der Breite des Browsers ein.

8.1.2

Daten eintragen

Jetzt können wir zwar schon das Aussehen der Tabelle angeben, aber wie kommen die Daten nun eigentlich in die Tabelle? Da wir von links nach rechts und von oben nach unten schreiben, ist es sinnvoll, auch bei der Erstellung einer Tabelle zeilenweise vorzugehen. Jede Zeile in einer Tabelle wird mit ... (table row) umrahmt. Da jede Zeile mehrere Einträge hat, werden diese durch (table data) markiert. Wenn ein Element eine Tabellenüberschrift enthalten soll, verwendet man statt dessen (table header). Eine Tabelle könnte also so aussehen: Listing 8.1: Eine einfache Tabelle

138



JavaScript Kompendium

Tabellen

Kapitel 8



...	...

Browser	Marktanteil
Microsoft Internet-Explorer	60,4 %
Netscape Communicator	38,5 %
Sonstige	1,1 %



Das Ergebnis sieht schon ganz gut aus, aber wir versprechen Ihnen, dass man da noch einiges verbessern kann. Abbildung 8.1: Eine Tabelle lässt die Daten viel übersichtlicher aussehen.

8.1.3

Formatierung von Tabellen

Nun ergänzen wir die Tabelle um eine weitere Zeile, welche den Stand der Tabelle angeben soll. Wenn wir den Text einfach in eine Zelle schreiben, hätte diese nur die Größe einer Spalte. Es ist aber optisch ansprechender, wenn die Anmerkung über beide Spalten verläuft. Dafür wurde eigens ein Attribut eingeführt. Mit colspan kann man die Anzahl der Spalten angeben,

JavaScript Kompendium

139

Kapitel 8

Formulare über die sich eine Zelle erstrecken soll. Dieses Attribut wird also in das Tag beziehungsweise auch eingefügt. Wir könnten demnach die Tabelle um die folgenden Zeilen erweitern: Stand: Juli 2000

Man kann hier also auch erkennen, dass man Zellen überspringen kann, wenn man einfach keinen Text angibt. Da es möglich ist, mehrere Spalten zusammenzufassen, kann ein Element natürlich auch mehrere Zeilen umschließen. Hier wird das Attribut rowspan eingesetzt. Eines haben wir aber noch nicht erwähnt. Sie haben bestimmt schon festgestellt, dass sich die Breite der Spalten nach dem darin enthaltenen Text berechnet. Sie werden allerdings oft eine Tabelle mit gleich breiten Spalten benötigen. Deshalb kann man für die einzelnen Spalten die Breite angeben. Am einfachsten ist es, wenn Sie das Attribut width, das wir schon bei der gesamten Tabellenbreite eingesetzt haben, in der ersten Tabellenzeile in jeder Zelle definieren. Dadurch können Sie alle Spalten in der Breite festlegen. Sie können ebenfalls das Attribut height in den ersten Zellen einer Zeile verwenden, um deren Höhe festzulegen.

8.1.4

Text in Tabellen ausrichten

Der Text wurde immer linksbündig geschrieben. Das sieht bei den Zahlen nicht sehr professionell aus. Wie kann man also Tabellentext rechtsbündig stellen oder zentrieren? Sie könnten natürlich in jeder Tabellenzelle verwenden, um den Text auf der horizontalen Achse zu zentrieren. Es geht auch einfacher! Man kann für eine Tabellenzeile, nämlich auch für einzelne Zellen, das Attribut align definieren. Es kann folgende Werte annehmen: Tabelle 8.1: Die Werte des Attributs align in Tabellen

Wert

Auswirkung

left

Der Text wird linksbündig ausgerichtet.

center

Der Text wird zentriert.

right

Der Text wird rechtsbündig ausgerichtet.

Für die Ausrichtung an der vertikalen Achse ist das Attribut valign zuständig. Man kann es mit diesen Werten verwenden:

140

JavaScript Kompendium

Tabellen

Kapitel 8

Wert

Auswirkung

top

Der Text wird am oberen Rand der Zelle ausgerichtet.

middle

Der Text wird vertikal zentriert.

bottom

Der Text wird am unteren Rand der Zelle ausgerichtet.

Tabelle 8.2: Die Werte des Attributs valign in Tabellen

Wir testen diese neuen Kenntnisse einmal aus:

top-left	top-center	top-right
middle-left	middle-center	middle-right
bottom-left	bottom-center	bottom-right



JavaScript Kompendium

Listing 8.2: Die Ausrichtung in Tabellen

141

Kapitel 8

Formulare Das Ergebnis ist im Browser:

Abbildung 8.2: Hier kann man gut erkennen, wie man den Text in einer Tabelle ausrichten kann.

8.1.5

Tabellen-Referenz

Hier haben wir alle tabellenspezifischen Tags für Sie zusammengetragen und mitsamt den Attributen beschrieben: Tag / Attribut 2.0

3.0

3.2

4.0

Internet Explorer

Netscape



X

X

X

2.0

1.1

align

X

X

X

2.0

1.1

valign

2.0

Dieses Tag kann nur innerhalb von … verwendet werden und ist auf der gleichen Ebene wie angesiedelt. Es erzeugt eine Tabellenüber- oder Unterschrift über die gesamte Tabellenbreite. align Gibt die Ausrichtung innerhalb der Tabellenzelle an.

142

JavaScript Kompendium

Tabellen

Kapitel 8

Wert

Bedeutung

bottom

Der Inhalt wird nach unten ausgerichtet. (Im Internet Explorer bitte über valign lösen!)

top

Der Inhalt wird nach oben ausgerichtet. (Im Internet Explorer bitte über valign lösen!)

center

Der Inhalt wird zentriert ausgerichtet. (Nur im Internet Explorer!)

left

Der Inhalt wird nach links ausgerichtet. (Nur im Internet Explorer!)

right

Der Inhalt wird nach rechts ausgerichtet. (Nur im Internet Explorer!)

Tabelle 8.3: Die Werte von align in

valign Gibt die vertikale Ausrichtung innerhalb der Tabellenzelle an. Wert

Bedeutung

bottom

Der Inhalt wird nach unten ausgerichtet.

top

Der Inhalt wird nach oben ausgerichtet.

Tabelle 8.4: Die Werte von valign in

Tag / Attribut 2.0

3.0

3.2

4.0

Internet Explorer



X

3.0A1

align

X

4.0B1

Netscape

4.0

bgcolor char

X

charoff

X

span

X

3.0A1

valign

X

4.0B1

width

X

3.0A1

Dieses Tag stellt eine Ergänzung zu herkömmlichen Tabellen dar. Hier werden Voreinstellungen für die Spalten der Tabelle getroffen. Dieses Tag steht immer innerhalb eines ... -Containers. Hier werden keinerlei Daten eingefügt, lediglich Formatierungen werden getätigt.

JavaScript Kompendium

143

Kapitel 8

Formulare align Gibt die horizontale Ausrichtung innerhalb der Spalte an.

Tabelle 8.5: Die Werte von align in

Wert

Bedeutung

center

Der Inhalt wird zentriert ausgerichtet.

left

Der Inhalt wird nach links ausgerichtet.

right

Der Inhalt wird nach rechts ausgerichtet.

bgcolor Hier wird die Hintergrundfarbe der Spalte festgelegt. Gültig sind RGBWerte und bei vielen Browsern vordefinierte Farbwerte (siehe Anhang D). char Hier kann man das Zeichen angeben, auf das der Zelleninhalt ausgerichtet wird (zum Beispiel das Komma für Dezimalzahlen). Das erste Vorkommen dieses Zeichens wird als relevant gewertet. charoff Gibt den Abstand zum ersten auftretenden, in char definierten Ausrichtungszeichen in Bildpunkten an. span Gibt an, wie viele Spalten in der normalen Tabellenstruktur von der aktuellen Spalte überspannt werden. valign Gibt die vertikale Ausrichtung innerhalb der Spalte an. Tabelle 8.6: Die Werte von valign in

Wert

Bedeutung

bottom

Der Inhalt wird nach unten ausgerichtet.

top

Der Inhalt wird nach oben ausgerichtet.

width Gibt die Gesamtbreite der Spalte in Bildpunkten oder als Prozentualwert der Browserfensterbreite an.

144

JavaScript Kompendium

Tabellen

Kapitel 8

Tag / Attribut 2.0

3.0

3.2

4.0

Internet Explorer



X

3.0A1

align

X

4.0B1

Netscape

4.0

bgcolor char

X

charoff

X

span

X

3.0A1

valign

X

4.0B1

width

X

4.0B1

Dieses Tag wird in … verwendet und enthält nur Tags. Es wird verwendet, um die Formatierung der Spalten noch vor der Datenerfassung der Tabelle zu ermöglichen. align Gibt die horizontale Ausrichtung innerhalb der Spaltengruppe an. Wert

Bedeutung

center

Der Inhalt wird zentriert ausgerichtet.

left

Der Inhalt wird nach links ausgerichtet.

right

Der Inhalt wird nach rechts ausgerichtet.

Tabelle 8.7: Die Werte von align in

bgcolor Hier wird die Hintergrundfarbe der Spaltengruppe festgelegt. Gültig sind RGB-Werte und bei vielen Browsern vordefinierte Farbwerte (siehe Anhang D). char Hier kann man das Zeichen angeben, auf das der Zelleninhalt ausgerichtet wird (zum Beispiel das Komma für Dezimalzahlen). Das erste Vorkommen dieses Zeichens wird als relevant gewertet.

JavaScript Kompendium

145

Kapitel 8

Formulare charoff Gibt den Abstand zum ersten auftretenden, in char definierten Ausrichtungszeichen in Bildpunkten an. span Gibt an, wie viele Spalten in der Gruppe sind, ohne diese alle mit aufzählen zu müssen. valign Gibt die vertikale Ausrichtung innerhalb der Zeilengruppe an.

Tabelle 8.8: Die Werte von valign in

Wert

Bedeutung

bottom

Der Inhalt wird nach unten ausgerichtet.

top

Der Inhalt wird nach oben ausgerichtet.

width Gibt die Gesamtbreite der Spalte in Bildpunkten oder als Prozentualwert der Browserfensterbreite an. Tag / Attribut

2.0

3.0

3.2

4.0

Internet Explorer

Netscape



X

X

X

2.0

1.1

align

X

X

X

2.0

2.0

2.0

4.0B3

X

2.0

3.0B1

X

2.0

1.1

bordercolor

2.0

4.0

bordercolordark

2.0

bordercolorlight

2.0

background bgcolor border

X

X

cellpadding

X

X

2.0

1.1

cellspacing

X

X

2.0

1.1

3.0A1

4.0B2

cols datapagesize

146

X

4.0

JavaScript Kompendium

Tabellen

Tag / Attribut

Kapitel 8

2.0

3.0

3.2

frame

4.0

Internet Explorer

X

3.0A1 2.0

height rules

X

summary

X

width

X

X

X

Netscape

1.1

3.0A1

2.0

1.1

Dieses Tag definiert eine Tabelle. align Gibt die horizontale Ausrichtung der Tabelle innerhalb des Browserfensters an. Wert

Bedeutung

center

Die Tabelle wird zentriert ausgerichtet.

left

Die Tabelle wird nach links ausgerichtet.

right

Die Tabelle wird nach rechts ausgerichtet.

Tabelle 8.9: Die Werte von align in

background Gibt die Adresse eines Hintergrundbildes für die Tabelle an. bgcolor Hier wird die Hintergrundfarbe der Tabelle festgelegt. Gültig sind RGBWerte und bei vielen Browsern vordefinierte Farbwerte (siehe Anhang D). border Gibt die Breite des Tabellenrahmens an. bordercolor Hier wird die Hauptfarbe des Tabellenrahmens festgelegt. Gültig sind RGBWerte und bei vielen Browsern vordefinierte Farbwerte (siehe Anhang D). bordercolordark Hier wird die dunkle Farbe des Tabellenrahmens in der 3D-Optik festgelegt. Gültig sind RGB-Werte und bei vielen Browsern vordefinierte Farbwerte (siehe Anhang D).

JavaScript Kompendium

147

Kapitel 8

Formulare bordercolorlight Hier wird die helle Farbe des Tabellenrahmens in der 3D-Optik festgelegt. Gültig sind RGB-Werte und bei vielen Browsern vordefinierte Farbwerte (siehe Anhang D). cellpadding Gibt den Abstand des Zelleninhaltes zum Zellenrahmen an. cellspacing Gibt den Abstand der Zellen voneinander an. cols Gibt die Anzahl der Spalten der Tabelle an. datapagesize Gibt die Größe einer Datenseite bei Endlostabellen an. frame Gibt an, wo äußere Rahmen der Tabelle gezeichnet werden sollen.

Tabelle 8.10: Die Werte von frame in

Wert

Bedeutung

void

Es werden keine Rahmen angezeigt.

above

Es wird nur am oberen Rand ein Rahmen eingeblendet.

below

Es wird nur am unteren Rand ein Rahmen eingeblendet.

hsides

Es wird am oberen und am unteren Rand ein Rahmen eingeblendet.

vsides

Es wird am linken und am rechten Rand ein Rahmen eingeblendet.

lhs

Es wird nur am linken Rand ein Rahmen eingeblendet.

rhs

Es wird nur am rechten Rand ein Rahmen eingeblendet.

box

Es wird an allen vier Seiten ein Rahmen angezeigt.

border

Es wird an allen vier Seiten ein Rahmen angezeigt.

height Gibt die Höhe der Tabelle in Pixel oder in Prozent der Höhe des Browserfensters an.

148

JavaScript Kompendium

Tabellen

Kapitel 8

rules Definiert die inneren Trennlinien der Tabelle. Tabelle 8.11: Die Werte von rules in

Wert

Bedeutung

none

Es werden keine Trennlinien angezeigt.

groups

Es werden Trennlinien angezeigt, welche die Gruppen trennen, die durch , , und angelegt wurden.

rows

Es werden horizontale Trennlinien angezeigt.

cols

Es werden vertikale Trennlinien angezeigt.

all

Es werden alle Trennlinien zwischen den Zellen angezeigt.

summary Gibt eine Zusammenfassung des Tabelleninhalts wieder (wichtig für Browser mit Sprachausgabe). width Gibt die Breite der Tabelle in Pixel oder in Prozent der Breite des Browserfensters an. , , Tag / Attribut 2.0

3.0

3.2

4.0

Internet Explorer



X

3.0A1



X

3.0A1



X

3.0A1

align

X

4.0B1

Netscape

4.0B1

bgcolor char

X

charoff

X

valign

X

4.0B1

Definiert den Tabellenkörper, -kopf oder -fuß einer Tabelle. align Gibt die horizontale Ausrichtung innerhalb der Zelle an.

JavaScript Kompendium

149

Kapitel 8 Tabelle 8.12: Die Werte von align in , und

Formulare

Wert

Bedeutung

center

Der Inhalt wird zentriert ausgerichtet.

left

Der Inhalt wird nach links ausgerichtet.

right

Der Inhalt wird nach rechts ausgerichtet.

bgcolor Hier wird die Hintergrundfarbe der Zelle festgelegt. Gültig sind RGB-Werte und bei vielen Browsern vordefinierte Farbwerte (siehe Anhang D). char Hier kann man das Zeichen angeben, auf das der Zelleninhalt ausgerichtet wird (zum Beispiel das Komma für Dezimalzahlen). Das erste Vorkommen dieses Zeichens wird als relevant gewertet. charoff Gibt den Abstand zum ersten auftretenden, in char definierten Ausrichtungszeichen in Bildpunkten an. valign Gibt die vertikale Ausrichtung innerhalb der Zelle an. Tabelle 8.13: Die Werte von valign in , und

Wert

Bedeutung

bottom

Der Inhalt wird nach unten ausgerichtet.

top

Der Inhalt wird nach oben ausgerichtet.

Tag / Attribut

3.0

3.2

4.0

Internet Explorer

Netscape



X

X

X

2.0

1.1

align

X

X

X

2.0

1.1

X

2.0

3.0B1

bgcolor

156

2.0

bordercolor

2.0

bordercolordark

2.0

bordercolorlight

2.0

JavaScript Kompendium

Tabellen

Tag / Attribut

Kapitel 8

2.0

3.0

3.2

4.0

char

X

charoff

X

valign

X

X

X

Internet Explorer

Netscape

2.0

1.1

Definiert eine Tabellenzeile. align Gibt die horizontale Ausrichtung innerhalb der Zeile an. Wert

Bedeutung

center

Der Inhalt wird zentriert ausgerichtet.

left

Der Inhalt wird nach links ausgerichtet.

right

Der Inhalt wird nach rechts ausgerichtet.

Tabelle 8.21: Die Werte von align in

bgcolor Hier wird die Hintergrundfarbe der Zeile festgelegt. Gültig sind RGB-Werte und bei vielen Browsern vordefinierte Farbwerte (siehe Anhang D). bordercolor Hier wird die Hauptfarbe des Zeilenrahmens festgelegt. Gültig sind RGBWerte und bei vielen Browsern vordefinierte Farbwerte (siehe Anhang D). bordercolordark Hier wird die dunkle Farbe des Zeilenrahmens in der 3D-Optik festgelegt. Gültig sind RGB-Werte und bei vielen Browsern vordefinierte Farbwerte (siehe Anhang D). bordercolorlight Hier wird die helle Farbe des Zeilenrahmens in der 3D-Optik festgelegt. Gültig sind RGB-Werte und bei vielen Browsern vordefinierte Farbwerte (siehe Anhang D). char Hier kann man das Zeichen angeben, auf das der Zelleninhalt ausgerichtet wird (zum Beispiel das Komma für Dezimalzahlen). Das erste Vorkommen dieses Zeichens wird als relevant gewertet.

JavaScript Kompendium

157

Kapitel 8

Formulare charoff Gibt den Abstand zum ersten auftretenden, in char definierten Ausrichtungszeichen in Bildpunkten an. valign Gibt die vertikale Ausrichtung innerhalb der Zeile an.

Tabelle 8.22: Die Werte von valign in

Wert

Bedeutung

bottom

Der Inhalt wird nach unten ausgerichtet.

top

Der Inhalt wird nach oben ausgerichtet.

8.2

Formulare erstellen

Wir haben nun mit Tabellen den Grundstein für professionelle Formulare gelegt. Wenden wir uns nun also der Erstellung einer Eingabemaske zu. Ein Formular wird durch den Container ... gekennzeichnet. Es gibt zwei wichtige Attribute, die immer zugeordnet werden sollten. Das Erste heißt method. Wir erwähnen hier nur der Vollständigkeit halber, wozu es dient: method gibt an, wie die Daten beim Senden verschickt werden sollen. Tabelle 8.23: Die Werte für das Attribut method bei Formularen

Wert

Auswirkung

post

Hier werden die Daten als separater Datenstrom direkt an das Script gesandt.

get

Hier werden die Daten an den URL angehängt und dann zusammen mit ihm dem Zielscript übergeben.

Für uns ist eigentlich nur der Wert post wichtig. Das zweite Attribut, das man immer angeben sollte, heißt action und gibt die Adresse des Scripts an. Da diese Scripts in diesem Buch nicht behandelt werden, ist es für Sie nur wichtig zu wissen, dass man auch eine E-MailAdresse angeben kann, an welche die Inhalte des Formulars geschickt werden. Ein Formular-Tag könnte also so aussehen:

Hier wird eine Mail mit dem Inhalt des Formulars an die Adresse [email protected] gesendet.

158

JavaScript Kompendium

Formulare erstellen

8.2.1

Kapitel 8

Textfelder

Für den Anfang definieren wir einmal ein Eingabefeld, das aus mehreren Textzeilen bestehen kann. Dafür verwendet man den Container ... Damit man jedem Formularelement später wieder seinen Wert zuordnen kann, erhält jedes Element einen Namen. Es wird also das Attribut name für definiert. Jetzt muss der Browser nur noch wissen, wie groß das Textfeld werden soll. Deshalb gibt man die Attribute rows (Zeilen) und cols (Spalten) an. <textarea name="Bemerkungen" rows=3 cols=40> Dieses ist der vorgegebene Text im Feld. Man benötigt für ihn keine <br>-Tags.

Dieses Textfeld heißt »Bemerkungen« und hat einen Umfang von drei Zeilen mit 40 Spalten. Der Text zwischen dem Start- und dem Endtag wird direkt in das neue Textfeld eingefügt. Die Adressabfrage könnte dann schon so aussehen: Wenn Sie mit mir in Kontakt treten möchten, schreiben Sie mir doch einfach eine E-Mail, die Ihre Adresse, E-Mail Adresse, Telefon- und Faxnummer enthält.

Listing 8.3: Ein Texteingabefeld in einem Formular

Hier würden nun alle Angaben direkt dem Namen »Bemerkungen« zugeordnet. In einem Formular ist es aber meist sinnvoller, verschiedene Daten getrennt abzufragen. So kann man zum Beispiel den Namen und Vornamen getrennt vom Rest erfassen. Da es sich hier um einzeiligen Text handelt, wird wieder ein neues Tag notwendig. Mit lassen sich sehr viele Formularelemente erstellen. Damit der Browser nun genau weiß, was hier gefragt ist, erhält immer das Attribut type. Damit man eine Texteingabe ermöglichen kann, muss type den Wert text erhalten. Man kann die Breite des Textfeldes mit dem Attribut size bestimmen und die maximale

JavaScript Kompendium

159

Kapitel 8

Formulare Textlänge darin mit maxlength. Wenn Sie möchten, können Sie sogar einen Standardwert an die Texteingabe übergeben. Dieser Wert muss an das Attribut value gegeben werden.

Dieser Befehl erzeugt ein Eingabefeld namens »Nachname«, das die Breite 40 hat und 80 Zeichen als Eingabe zulässt. Wenn die Seite aufgebaut wird, ist der Name »Mustermann« schon eingetragen. Listing 8.4: Hier fragen wir den Namen des Anwenders ab

Wenn Sie mit mir in Kontakt treten möchten, schreiben Sie mir doch einfach eine E-Mail, die Ihre Adresse, E-Mail Adresse, Telefon- und Faxnummer enthält. Nachname:
Vorname:
Adresse:

Ein Textfeld ist aber noch lange nicht alles, was man mit einem Formular erstellen kann. Einige wichtige Elemente fehlen noch.

8.2.2

Radio- und Checkboxes

Aus Ihrem Betriebssystem ist Ihnen sicherlich das Verhalten von so genannten Radiobuttons (Optionsfelder) und Checkboxes (Kontrollkästchen) bekannt. Trotzdem möchten wir die unterschiedlichen Verhaltensweisen dieser Knöpfe hier kurz erläutern. Man verwendet oft Checkboxes, wenn man mehrere Optionen aus einer Liste wählen kann. Dieses Verfahren kennen Sie sicherlich von den Führerscheinbögen. 160

JavaScript Kompendium

Formulare erstellen

Kapitel 8 Abbildung 8.3: Man kann mehrere Checkboxes aktivieren.

Radiobuttons werden ebenfalls dazu verwendet, um Elemente einer Liste zu wählen. Allerdings sind hier nicht mehrere Elemente gleichzeitig wählbar. Eine Entscheidung zwischen Ja und Nein lässt sich so gut darstellen. Abbildung 8.4: Eine typische Ja/ Nein-Abfrage

Wenn wir zum Beispiel die Abfrage nach der Anrede mit Radiobuttons darstellen möchten, müssen wir nur in das Attribut type auf den Wert radio setzen. Damit der Browser weiß, welche Radiobuttons zusammengehören, müssen alle Knöpfe der gleichen Auswahl denselben Namen haben. Die mit value gesetzten Werte der Knöpfe werden später dem Namen der Auswahl zugeordnet, wenn der entsprechende Knopf aktiviert wurde. Das Attribut checked kann in das Tag des Knopfes eingefügt werden, der standardmäßig aktiviert werden soll. Herr Frau

Hier wurde eine Entscheidungsabfrage entworfen, die den Namen »Anrede« trägt und bei der die Option »Herr« standardmäßig ausgewählt ist. Checkboxes unterscheiden sich in der Programmierung nur unwesentlich von Radiobuttons. Man übergibt nur den Wert checkbox an das Attribut type. Für eine Auswahl verwendet man möglichst auch wieder denselben Namen. Die einzelnen Werte werden mit value übergeben, und wenn man das Attribut checked verwendet, ist die Checkbox standardmäßig aktiviert. Microsoft Internet Explorer
Netscape
Sonstige


So könnte dann eine Abfrage aussehen, welche Browser der Anwender häufig verwendet. Man kann auch mehrere Möglichkeiten ankreuzen.

JavaScript Kompendium

161

Kapitel 8

Formulare

8.2.3

Auswahlmenüs

Eine andere Möglichkeit, vorgegebene Antworten zu erhalten, sind die Auswahlmenüs. Abbildung 8.5: So ein Auswahlmenü kann man auch mit HTML erstellen.

Für so ein Menü wurde <select> ... eingeführt. Man ordnet den Namen des Menüs wie gewohnt mit dem Attribut name zu und sollte auch die gleichzeitig angezeigten Einträge mit size festlegen. Die einzelnen Menüpunkte werden mit versehen. <select name="Land" size=1> Deutschland Österreich Schweiz Sonstiges

Dieser Quelltext gibt genau die von uns besprochene Auswahl als Menü wieder. Wenn man dem Attribut size einen größeren Wert als eins zuweist, werden mehrere Optionen gleichzeitig sichtbar. Man kann sogar multiple als Attribut setzen, um die Auswahl von mehreren Optionen zuzulassen.

8.2.4

Formulare absenden und löschen

Damit wäre ein Formular schon fast betriebsbereit. Es fehlt nur noch die Möglichkeit, es abzusenden oder gegebenenfalls zu löschen. Deshalb fügt man noch zwei Buttons ein, die immer so programmiert werden: Abbildung 8.6: Zumindest der linke Knopf ist in einem Formular notwendig.

Man setzt für type also submit ein, um einen Knopf zu erzeugen, der das Formular absendet. Es kann gelöscht werden, wenn man einen Knopf erzeugt, der für type den Wert reset erhält. In value steht immer die Beschriftung des Knopfes. 162

JavaScript Kompendium

Formulare erstellen

Kapitel 8

Das ganze Adressformular sieht dann so aus:
Herr Frau
Nachname:
Vorname:
Adresse:
Land: <select name="Land" size=1> Deutschland Österreich Schweiz Sonstiges
Telefon:
Telefax:
E-Mail:



Listing 8.5: Ein komplettes Adressformular

Dieses Formular ist noch ziemlich unübersichtlich, da die einzelnen Elemente in den Fließtext eingebunden werden.

JavaScript Kompendium

163

Kapitel 8

Formulare

Abbildung 8.7: Ein Formular sollte etwas übersichtlicher aussehen als dieses Beispiel.

Wie bereits am Anfang des Kapitels besprochen, ist es immer empfehlenswert, den Einsatz von Formularen und Tabellen zu kombinieren. Wenn man die Formatierung des Formulars mit den Tabellenfunktionen korrigiert, kann der Quelltext zum Beispiel so aussehen: Listing 8.6: Ein gut formatiertes Adressformular

164



Tag / Attribut 2.0 3.0 3.2 4.0 Internet Explorer Netscape	X X X 2.0 1.1 align X X X 2.0 1.1 3.0A1 4.0B3 2.0 3.0B1 background bgcolor 150 X bordercolor 2.0 bordercolordark 2.0 bordercolorlight 2.0 JavaScript Kompendium Tabellen Tag / Attribut Kapitel 8 2.0 3.0 3.2 4.0 char X charoff X colspan X X X Internet Explorer Netscape 2.0 1.1 X headers height X X 2.0 1.1 nowrap X X X 2.0 1.1 rowspan X X X 2.0 1.1 X scope valign X width X X 2.0 1.1 X X 2.0 1.1 Definiert eine Datenzelle einer Tabelle. align Gibt die horizontale Ausrichtung innerhalb der Zelle an. Wert Bedeutung center Der Inhalt wird zentriert ausgerichtet. left Der Inhalt wird nach links ausgerichtet. right Der Inhalt wird nach rechts ausgerichtet. Tabelle 8.14: Die Werte von align in	background Gibt die Adresse eines Hintergrundbildes für die Zelle an. bgcolor Hier wird die Hintergrundfarbe der Zelle festgelegt. Gültig sind RGB-Werte und bei vielen Browsern vordefinierte Farbwerte (siehe Anhang D). bordercolor Hier wird die Hauptfarbe des Zellenrahmens festgelegt. Gültig sind RGBWerte und bei vielen Browsern vordefinierte Farbwerte (siehe Anhang D). JavaScript Kompendium 151 Kapitel 8 Formulare bordercolordark Hier wird die dunkle Farbe des Zellenrahmens in der 3D-Optik festgelegt. Gültig sind RGB-Werte und bei vielen Browsern vordefinierte Farbwerte (siehe Anhang D). bordercolorlight Hier wird die helle Farbe des Zellenrahmens in der 3D-Optik festgelegt. Gültig sind RGB-Werte und bei vielen Browsern vordefinierte Farbwerte (siehe Anhang D). char Hier kann man das Zeichen angeben, auf das der Zelleninhalt ausgerichtet wird (zum Beispiel das Komma für Dezimalzahlen). Das erste Vorkommen dieses Zeichens wird als relevant gewertet. charoff Gibt den Abstand zum ersten auftretenden, in char definierten Ausrichtungszeichen in Bildpunkten an. colspan Gibt an, über wie viele Spalten sich die Zelle erstreckt. headers Gibt noch einmal an, zu welchen Zellenüberschriften die Zelle gehört. Das kann bei der Sprachausgabe von Vorteil sein. Die Listenelemente werden durch Leerzeichen getrennt. height Gibt die Höhe der Zelle in Pixel oder in Prozent der Höhe des Browserfensters an. nowrap Gibt an, ob die normalen HTML-Zeilenumbruchskonventionen gelten oder ob diese ignoriert werden. 152 JavaScript Kompendium Tabellen Kapitel 8 Wert Bedeutung false Die normalen Konventionen gelten: Text, der das Ende der Zeile erreicht, wird automatisch umbrochen. true Text, der das Ende der Zeile erreicht, wird nicht umbrochen. Nur explizit angegebene Formatierungen ( , , ...) werden berücksichtigt. Tabelle 8.15: Die Werte von nowrap in	rowspan Gibt an, über wie viele Zeilen sich die Zelle erstreckt. valign Gibt die vertikale Ausrichtung innerhalb der Zelle an. Wert Bedeutung bottom Der Inhalt wird nach unten ausgerichtet. top Der Inhalt wird nach oben ausgerichtet. Tabelle 8.16: Die Werte von valign in	width Gibt die Breite der Zelle in Pixel oder in Prozent der Breite des Browserfensters an.	Tag / Attribut	2.0 3.0 3.2 4.0 Internet Explorer Netscape X X X 2.0 1.1 2.0 1.1 3.0A1 4.0B3 2.0 3.0B1 X abbr align X axis X X X X background bgcolor X bordercolor 2.0 bordercolordark 2.0 bordercolorlight 2.0 char JavaScript Kompendium X 153 Kapitel 8 Formulare Tag / Attribut 2.0 3.0 3.2 Internet Explorer Netscape X charoff colspan 4.0 X height X X 2.0 1.1 X X 2.0 1.1 nowrap X X X 2.0 1.1 rowspan X X X 2.0 1.1 X scope valign X width X X 2.0 1.1 X X 2.0 1.1 Definiert eine Überschriftenzelle einer Tabelle. abbr Definiert eine Abkürzung für eine	-Zelle. align Gibt die horizontale Ausrichtung innerhalb der Zelle an. Tabelle 8.17: Die Werte von align in	Wert Bedeutung center Der Inhalt wird zentriert ausgerichtet. left Der Inhalt wird nach links ausgerichtet. right Der Inhalt wird nach rechts ausgerichtet. axis Kommaseparierte Liste von Kategorienamen. Über diese kann eine Kategorisierung von Zellen vorgenommen werden. background Gibt die Adresse eines Hintergrundbildes für die Zelle an. bgcolor Hier wird die Hintergrundfarbe der Zelle festgelegt. Gültig sind RGB-Werte und bei vielen Browsern vordefinierte Farbwerte (siehe Anhang D). 154 JavaScript Kompendium Tabellen Kapitel 8 bordercolor Hier wird die Hauptfarbe des Zellenrahmens festgelegt. Gültig sind RGBWerte und bei vielen Browsern vordefinierte Farbwerte (siehe Anhang D). bordercolordark Hier wird die dunkle Farbe des Zellenrahmens in der 3D-Optik festgelegt. Gültig sind RGB-Werte und bei vielen Browsern vordefinierte Farbwerte (siehe Anhang D). bordercolorlight Hier wird die helle Farbe des Zellenrahmens in der 3D-Optik festgelegt. Gültig sind RGB-Werte und bei vielen Browsern vordefinierte Farbwerte (siehe Anhang D). char Hier kann man das Zeichen angeben, auf das der Zelleninhalt ausgerichtet wird (zum Beispiel das Komma für Dezimalzahlen). Das erste Vorkommen dieses Zeichens wird als relevant gewertet. charoff Gibt den Abstand zum ersten auftretenden, in char definierten Ausrichtungszeichen in Bildpunkten an. colspan Gibt an, über wie viele Spalten sich die Zelle erstreckt. height Gibt die Höhe der Zelle in Pixel oder in Prozent der Höhe des Browserfensters an. nowrap Gibt an, ob die normalen HTML-Zeilenumbruchskonventionen gelten oder ob diese ignoriert werden. Wert Bedeutung false Die normalen Konventionen gelten: Text, der das Ende der Zeile erreicht, wird automatisch umbrochen. true Text, der das Ende der Zeile erreicht, wird nicht umbrochen. Nur explizit angegebene Formatierungen ( , , ...) werden berücksichtigt. JavaScript Kompendium Tabelle 8.18: Die Werte von nowrap in	155 Kapitel 8 Formulare rowspan Gibt an, über wie viele Zeilen sich die Zelle erstreckt. scope Gibt an, für welche Datenzellen diese Überschriftenzelle die Überschrift liefert. Tabelle 8.19: Die Werte von scope in	Wert Bedeutung col Diese Zelle ist Überschrift für alle anderen Zellen dieser Spalte. colgroup Diese Zelle ist Überschrift für alle anderen Zellen dieser Spaltengruppe. row Diese Zelle ist Überschrift für alle anderen Zellen dieser Zeile. rowgroup Diese Zelle ist Überschrift für alle anderen Zellen dieser Zeilengruppe. valign Gibt die vertikale Ausrichtung innerhalb der Zelle an. Tabelle 8.20: Die Werte von valign in	Wert Bedeutung bottom Der Inhalt wird nach unten ausgerichtet. top Der Inhalt wird nach oben ausgerichtet. width Gibt die Breite der Zelle in Pixel oder in Prozent der Breite des Browserfensters an.

JavaScript Kompendium

Formulare erstellen

Kapitel 8



	Herr Frau
Nachname:
Vorname:
Adresse:
Land:	<select name="Land" size=1> Deutschland Österreich Schweiz Sonstiges
Telefon:
Telefax:
E-Mail:



JavaScript Kompendium

165

Kapitel 8

Formulare

Wenn man die Ausgabe dieses Quelltextes betrachtet, erscheint das Formular gleich viel freundlicher und übersichtlicher. Abbildung 8.8: Dieses Formular ist viel übersichtlicher als sein Vorgänger.

8.2.5

E-Mail-Formulare auswerten

Ich habe das eben gezeigte Formular einmal abgesendet, um zu demonstrieren, wie die Eingaben in der Mail aussehen. Sie werden alle in eine Zeile gepackt, weil man auf gleiche Weise auch ein Script ansprechen könnte und dafür alle Angaben in einer Zeile stehen müssen. Anrede=Herr&Nachname=Mustermann&Vorname=Max&Adresse=Musterstra%DFe+123%0D%0A1 2345+Musterstadt&Land=Deutschland&Tel=01234-56789&Fax=01234-56790&EMail=Max.Mustermann@Muster.de

Auf den ersten Blick sieht das etwas wirr aus. Man kann aber erkennen, dass die einzelnen Formularelemente jeweils durch ein & getrennt sind. Jedem Formularelement wird der Wert mit einem = zugewiesen. Bei Nachname wurde also Mustermann eingetragen. Wenn mehrere Eingaben bei einem Element möglich waren, so werden diese jeweils getrennt dem Ele166

JavaScript Kompendium

Formulare erstellen

Kapitel 8

ment zugeordnet. Auch das Feld Adresse ist sehr aufschlussreich. Hier kann man erkennen, dass Leerzeichen durch ein + ersetzt wurden und ein Zeilenumbruch durch die Sequenz %0D%0A. Einige Dienstanbieter stellen eine Möglichkeit zur Verfügung, solche Mailformulare direkt auszuwerten und in geordneter Form an Ihre Mailadresse weiterzuleiten. Bitte fragen Sie beim Support Ihres Dienstanbieters nach, ob und wie so eine Möglichkeit funktioniert.

8.2.6

Formular-Referenz

In diesem Unterkapitel finden Sie alle HTML-Tags, die im Zusammenhang mit Formularen stehen. Tag / Attribut

2.0

3.0

3.2

4.0

Internet Explorer



X

4.0B1

accesskey

X

4.0B1

disabled

X

4.0B1

name

X

4.0B1

tabindex

X

4.0B1

type

X

4.0B1

value

X

4.0B1

Netscape

Dieses Tag kann Buttons in Formularen erzeugen. accesskey Mit accesskey können Sie einen so genannten Tasten-Shortcut definieren, mit dem der Knopf erreichbar ist. Ordnen Sie dem Attribut einen einzigen Buchstaben zu und er wird ausgeführt, wenn Sie diese Taste mit der zugehörigen Shortcut-Taste drücken, die von Browser und Betriebssystem abhängt. disabled Dieses allein stehende Attribut bewirkt, dass der Knopf als inaktiv gekennzeichnet wird, und unterbindet die Funktionalität des Buttons.

JavaScript Kompendium

167

Kapitel 8

Formulare name Gibt die Bezeichnung des Knopfes an, um ihn bei der Übergabe an Scripts identifizieren zu können. tabindex Gibt den Tab-Index des Buttons an. Positive Werte stehen für die Position des Knopfes in der Liste der mit (ÿ__) aktivierbaren Objekte. Negative Werte bedeuten, dass der Button nicht im Tab-Index auftaucht. type Gibt an, welche Funktion der Knopf im Formular haben soll.

Tabelle 8.24: Die Werte von type in

Wert

Bedeutung

button

Definiert den Knopf als multifunktional. (Es wird ein eigenes Script für den Button bereitgestellt.)

reset

Der Button löscht das Formular.

submit

Der Knopf sendet die Formulardaten ab.

value Gibt den Wert des Knopfes an, der an das Script übergeben werden soll, wenn er aktiviert wurde.
Tag / Attribut 2.0

3.0

3.2




4.0

Internet Explorer

X

4.0B2

Netscape

4.0

align

Fasst Eingabeelemente von Formularen zu Gruppen zusammen. align Gibt die horizontale Ausrichtung innerhalb der Gruppe an. Tabelle 8.25: Die Werte von align in


168

Wert

Bedeutung

center

Der Inhalt wird zentriert ausgerichtet.

left

Der Inhalt wird nach links ausgerichtet.

right

Der Inhalt wird nach rechts ausgerichtet.

JavaScript Kompendium

Formulare erstellen

Kapitel 8


Tag / Attribut

2.0

3.0

3.2

4.0

Internet Explorer

Netscape



X

X

X

X

1.0

1.0

1.0

1.0

accept

X

accept-charset

X

action

X

X

X

X

5.0

autocomplete enctype

X

X

X

X

1.0

1.0

method

X

X

X

X

1.0

1.0

name

X

3.0B1

2.0

target

X

3.0A1

2.0

Hier wird ein Formular angelegt. Alle Formularelemente (zum Beispiel ) werden von ...
umschlossen. accept Gibt an, welche MIME-Formate das Formular verschicken darf, damit das Script oder der Server richtig darauf reagieren können. Diese Formate werden mit Kommata voneinander getrennt. accept-charset Gibt die Zeichensätze an, die das Formular verschicken darf. Diese werden durch Kommata getrennt. action Gibt die Adresse des Scripts oder Servers an, das/der die Formulardaten auswerten soll. autocomplete Schaltet die Auto-Vervollständigungsfunktion ein (on) oder aus (off). enctype Gibt den MIME-Medientyp an, in den die Daten beim Sendevorgang kodiert werden sollen.

JavaScript Kompendium

169

Kapitel 8

Formulare method Gibt an, wie das Formular die Daten versenden soll:

Tabelle 8.26: Die Werte von method in


Wert

Bedeutung

post

Hier werden die Daten als separater Datenstrom direkt an das Script gesandt.

get

Hier werden Die Daten an den URL angehängt und dann zusammen mit ihm dem Zielscript übergeben.

name Gibt den Namen des Formulars an, um es durch Scripts anzusprechen und ggf. zu verändern. target Gibt den Zielframe an, in den die Ergebnisdaten nach Versenden der Formulardaten angezeigt werden sollen. Tag / Attribut

2.0

3.0

3.2

4.0

Internet Explorer

Netscape



X

3.0B1

1.0

accesskey

X

4.0B1

disabled

X

4.0B1 4.0B2

height name

X

3.0B1

tabindex

X

4.0B1

value

X

3.0B1

width

1.0

1.0 4.0B2

Dieses Tag wird in Formularen verwendet, die mit ...
erzeugt wurden. Es erstellt mit dem Wert button für das Attribut type einen Knopf. accesskey Mit accesskey können Sie einen so genannten Tasten-Shortcut definieren, mit dem das Formularelement erreichbar ist. Ordnen Sie dem Attribut einen 170

JavaScript Kompendium

Formulare erstellen

Kapitel 8

einzigen Buchstaben zu und er wird ausgeführt, wenn Sie diese Taste mit der zugehörigen Shortcut-Taste drücken, die von Browser und Betriebssystem abhängt. disabled Dieses allein stehende Attribut bewirkt, dass das Formularelement als inaktiv gekennzeichnet wird, und unterbindet die Funktionalität des Elements. height Gibt die Höhe des Knopfes in Pixel an. name Gibt die Bezeichnung des Formularelements an, um es durch Scripts identifizieren zu können. Der Wert des Attributs wird außerdem bei der Auswertung des Formulars angegeben. tabindex Gibt den Tab-Index des Formularelements an. Positive Werte stehen für die Position des Elements in der Liste der mit (ÿ__) aktivierbaren Objekte. Negative Werte bedeuten, dass das Element nicht im Tab-Index auftaucht. value Gibt den Rückgabewert an das Script für den Fall an, dass dieses Formularelement aktiviert wurde. width Gibt die Breite des Knopfes in Pixel an. Tag / Attribut

2.0

3.0

3.2

4.0

Internet Explorer

Netscape



X

X

X

X

1.0

1.0

X

4.0B1

X

1.0

X

4.0B1

X

1.0

accesskey checked

X

JavaScript Kompendium

X

X

disabled name

X

X

X

X

1.0

1.0

171

Kapitel 8

Formulare

Tag / Attribut

2.0

3.0

3.2

tabindex value

X

X

X

4.0

Internet Explorer

X

4.0B1

X

1.0

Netscape

1.0

Dieses Tag wird in Formularen verwendet, die mit
...
erzeugt wurden. Es erstellt mit dem Wert checkbox für das Attribut type eine so genannte Checkbox. accesskey Mit accesskey können Sie einen so genannten Tasten-Shortcut definieren, mit dem das Formularelement erreichbar ist. Ordnen Sie dem Attribut einen einzigen Buchstaben zu und er wird ausgeführt, wenn Sie diese Taste mit der zugehörigen Shortcut-Taste drücken, die von Browser und Betriebssystem abhängt. checked Dieses allein stehende Attribut gibt an, dass das Formularelement in der Standardeinstellung des Formulars aktiviert sein soll. disabled Dieses allein stehende Attribut bewirkt, dass das Formularelement als inaktiv gekennzeichnet wird, und unterbindet die Funktionalität des Elements. name Gibt die Bezeichnung des Formularelements an, um es durch Scripts identifizieren zu können. Der Wert des Attributs wird außerdem bei der Auswertung des Formulars angegeben. tabindex Gibt den Tab-Index des Formularelements an. Positive Werte stehen für die Position des Elements in der Liste der mit (ÿ__) aktivierbaren Objekte. Negative Werte bedeuten, dass das Element nicht im Tab-Index auftaucht. value Gibt den Rückgabewert an das Script für den Fall an, dass dieses Formularelement aktiviert wurde.

172

JavaScript Kompendium

Formulare erstellen

Kapitel 8

Tag / Attribut

2.0

3.0

3.2

4.0

Internet Explorer

Netscape

X

X

X

4.0B2

2.0

accept

X

accesskey

X

4.0B2

X

4.0B2

X

4.0B2

disabled

X

name

X

X

4.0B2

readonly X

tabindex value

2.0

X

X

X

Dieses Tag wird in Formularen verwendet, die mit
...
erzeugt wurden. Es erstellt mit dem Wert file für das Attribut type ein Dateiauswahlfeld. accept Gibt an, welche MIME-Formate das Formular verschicken darf, damit das Script oder der Server richtig darauf reagieren können. Diese Formate werden mit Kommata voneinander getrennt. accesskey Mit accesskey können Sie einen so genannten Tasten-Shortcut definieren, mit dem das Formularelement erreichbar ist. Ordnen Sie dem Attribut einen einzigen Buchstaben zu und er wird ausgeführt, wenn Sie diese Taste mit der zugehörigen Shortcut-Taste drücken, die von Browser und Betriebssystem abhängt. disabled Dieses allein stehende Attribut bewirkt, dass das Formularelement als inaktiv gekennzeichnet wird, und unterbindet die Funktionalität des Elements. name Gibt die Bezeichnung des Formularelements an, um es durch Scripts identifizieren zu können. Der Wert des Attributs wird außerdem bei der Auswertung des Formulars angegeben.

JavaScript Kompendium

173

Kapitel 8

Formulare readonly Dieses allein stehende Attribut gibt an, dass der Inhalt dieses Formularelements nicht durch den Leser der Seite verändert werden darf. tabindex Gibt den Tab-Index des Formularelements an. Positive Werte stehen für die Position des Elements in der Liste der mit (ÿ__) aktivierbaren Objekte. Negative Werte bedeuten, dass das Element nicht im Tab-Index auftaucht. value Gibt den Rückgabewert an das Script (also den Dateinamen) an. Tag / Attribut

2.0

3.0

3.2

4.0

Internet Explorer

Netscape



X

X

X

X

1.0

1.0

name

X

X

X

X

1.0

1.0

value

X

X

X

X

1.0

1.0

Dieses Tag wird in Formularen verwendet, die mit
...
erzeugt wurden. Es erstellt mit dem Wert hidden für das Attribut type ein verstecktes Feld, auf das der Betrachter der Seite keinen Einfluss hat, das aber mit dem Script interagieren kann. name Gibt die Bezeichnung des Formularelements an, um es durch Scripts identifizieren zu können. Der Wert des Attributs wird außerdem bei der Auswertung des Formulars angegeben. value Gibt den Rückgabewert an das Script an. Tag / Attribut

2.0

3.0

3.2

4.0

Internet Explorer

Netscape



X

X

X

X

1.0

1.0

X

4.0B1

accesskey

174

JavaScript Kompendium

Formulare erstellen

Kapitel 8

Tag / Attribut

2.0

3.0

3.2

4.0

Internet Explorer

Netscape

align

X

X

X

X

1.0

1.0

X

4.0B2

4.0

alt

1.0

border X

disabled

X

height

4.0B2 4.0B1

1.1

X

ismap name

X

X

X

X

1.0

1.0

src

X

X

X

X

1.0

1.0

tabindex

X

4.0B1

usemap

X X

value

X

X

2.0

X 4.0B1

width

1.1

Dieses Tag wird in Formularen verwendet, die mit
...
erzeugt wurden. Es erstellt mit dem Wert image für das Attribut type ein Bild, auf das man klicken kann, um die Formulardaten abzusenden. Es funktioniert wie type=submit, sendet aber zusätzlich noch die Koordinaten an das Script, auf die im Bild geklickt wurde. accesskey Mit accesskey können Sie einen so genannten Tasten-Shortcut definieren, mit dem das Formularelement erreichbar ist. Ordnen Sie dem Attribut einen einzigen Buchstaben zu und er wird ausgeführt, wenn Sie diese Taste mit der zugehörigen Shortcut-Taste drücken, die von Browser und Betriebssystem abhängt. align Gibt die Ausrichtung des Textes an, der dem Bild folgt. Wert

Bedeutung

middle

Der Text wird vertikal mittig ausgerichtet.

left

Der Text wird nach links ausgerichtet.

right

Der Text wird nach rechts ausgerichtet.

JavaScript Kompendium

Tabelle 8.27: Die Werte von align in

175

Kapitel 8 Tabelle 8.27: Die Werte von align in (Forts.)

Formulare

Wert

Bedeutung

top

Der Text wird nach oben ausgerichtet.

bottom

Der Text wird nach unten ausgerichtet.

alt Der Wert dieses Attributs wird ausgegeben, wenn der Browser keine Bilder anzeigen kann. Das ist zum Beispiel bei alten Textbrowsern der Fall. border Gibt die Breite des Rahmens an, der um ein Bild herum angezeigt wird. Er erhält die Farbe, die ein normaler Textlink haben würde. disabled Dieses allein stehende Attribut bewirkt, dass das Formularelement als inaktiv gekennzeichnet wird, und unterbindet die Funktionalität des Elements. height Gibt die Höhe des Bildes in Pixel an. ismap Dieses allein stehende Attribut gibt an, dass für dieses Bild Hot-Areas definiert wurden, die per Klick aktiviert werden können. name Gibt die Bezeichnung des Formularelements an, um es durch Scripts identifizieren zu können. Der Wert des Attributs wird außerdem bei der Auswertung des Formulars angegeben. src Gibt den URL eines Bildes an, das hier angezeigt werden soll. tabindex Gibt den Tab-Index des Formularelements an. Positive Werte stehen für die Position des Elements in der Liste der mit (ÿ__) aktivierbaren Objekte. Negative Werte bedeuten, dass das Element nicht im Tab-Index auftaucht. usemap Gibt die Adresse zu den clientseitigen Imagemap-Spezifikationen an.

176

JavaScript Kompendium

Formulare erstellen

Kapitel 8

value Gibt den Rückgabewert an das Script für den Fall an, dass dieses Formularelement aktiviert wurde. width Gibt die Breite des Bildes in Pixel an. Tag / Attribut

2.0

3.0

3.2

4.0

Internet Explorer

Netscape



X

X

X

X

1.0

1.0

X

4.0B1

accesskey

5.0

autocomplete X

X

4.0B1

X

1.0

readonly

X

4.0B1

tabindex

X

4.0B1

X

1.0

disabled name

value vcard_name

X

X

X

X

X

X

1.0

1.0

5.0

Dieses Tag wird in Formularen verwendet, die mit
...
erzeugt wurden. Es erstellt mit dem Wert password für das Attribut type eine Passworteingabezeile. accesskey Mit accesskey können Sie einen so genannten Tasten-Shortcut definieren, mit dem das Formularelement erreichbar ist. Ordnen Sie dem Attribut einen einzigen Buchstaben zu und er wird ausgeführt, wenn Sie diese Taste mit der zugehörigen Shortcut-Taste drücken, die von Browser und Betriebssystem abhängt. autocomplete Schaltet die Auto-Vervollständigungsfunktion ein (on) oder aus (off). disabled Dieses allein stehende Attribut bewirkt, dass das Formularelement als inaktiv gekennzeichnet wird, und unterbindet die Funktionalität des Elements. JavaScript Kompendium

177

Kapitel 8

Formulare name Gibt die Bezeichnung des Formularelements an, um es durch Scripts identifizieren zu können. Der Wert des Attributs wird außerdem bei der Auswertung des Formulars angegeben. readonly Dieses allein stehende Attribut gibt an, dass der Inhalt dieses Formularelements nicht durch den Leser der Seite verändert werden darf. tabindex Gibt den Tab-Index des Formularelements an. Positive Werte stehen für die Position des Elements in der Liste der mit (ÿ__) aktivierbaren Objekte. Negative Werte bedeuten, dass das Element nicht im Tab-Index auftaucht. value Gibt den Rückgabewert an das Script an. vcard_name Gibt einen Feldnamen der persönlichen Microsoft-Visitenkarte (vcard) an, dessen Wert hier voreingestellt werden soll. Der Inhalt dieses Feldes wird erst an den Empfänger der Formulardaten weitergegeben, wenn das Formular abgesandt wurde.

Tabelle 8.28: Werte für vcard_name in

178

Wert

Bedeutung

vCard.Business.City

Firmenadresse: Stadt

vCard.Business.Country

Firmenadresse: Land

vCard.Business.Fax

Firmenadresse: Telefaxnummer

vCard.Business.Phone

Firmenadresse: Telefonnummer

vCard.Business.State

Firmenadresse: Staat

vCard.Business.StreetAddress

Firmenadresse: Straße und Hausnummer

vCard.Business.URL

Firmenadresse: Homepage-Adresse

vCard.Business.Zipcode

Firmenadresse: Postleitzahl

vCard.Cellular

Mobilfunk-Telefonnummer

vCard.Company

Firmenname

vCard.Department

Abteilung

vCard.DisplayName

Angezeigter Name

JavaScript Kompendium

Formulare erstellen

Kapitel 8 Tabelle 8.28: Werte für vcard_name in (Forts.)

Wert

Bedeutung

vCard.Email

E-Mail-Adresse

vCard.FirstName

Vorname

vCard.Gender

Geschlecht

vCard.Home.City

Privatadresse: Stadt

vCard.Home.Country

Privatadresse: Land

vCard.Home.Fax

Privatadresse: Telefaxnummer

vCard.Home.Phone

Privatadresse: Telefonnummer

vCard.Home.State

Privatadresse: Staat

vCard.Home.StreetAddress

Privatadresse: Straße und Hausnummer

vCard.Home.Zipcode

Privatadresse: Postleitzahl

vCard.Homepage

Homepage-Adresse

vCard.JobTitle

Berufsbezeichnung

vCard.LastName

Nachname

vCard.MiddleName

2. Vorname

vCard.Notes

Bemerkungen

vCard.Office

Büro

vCard.Pager

Pagernummer

Tag / Attribut

2.0

3.0

3.2

4.0

Internet Explorer

Netscape



X

X

X

X

1.0

1.0

X

4.0B1

X

1.0

X

4.0B1

X

1.0

X

4.0B1

X

1.0

accesskey checked

X

X

X

disabled name

X

X

X

X

tabindex value

JavaScript Kompendium

X

X

X

1.0

1.0

1.0

179

Kapitel 8

Formulare Dieses Tag wird in Formularen verwendet, die mit
...
erzeugt wurden. Es erstellt mit dem Wert radio für das Attribut type einen so genannten Radiobutton. accesskey Mit accesskey können Sie einen so genannten Tasten-Shortcut definieren, mit dem das Formularelement erreichbar ist. Ordnen Sie dem Attribut einen einzigen Buchstaben zu und er wird ausgeführt, wenn Sie diese Taste mit der zugehörigen Shortcut-Taste drücken, die von Browser und Betriebssystem abhängt. checked Dieses allein stehende Attribut gibt an, dass das Formularelement in der Standardeinstellung des Formulars aktiviert sein soll. disabled Dieses allein stehende Attribut bewirkt, dass das Formularelement als inaktiv gekennzeichnet wird, und unterbindet die Funktionalität des Elements. name Gibt die Bezeichnung des Formularelements an, um es durch Scripts identifizieren zu können. Der Wert des Attributs wird außerdem bei der Auswertung des Formulars angegeben. tabindex Gibt den Tab-Index des Formularelements an. Positive Werte stehen für die Position des Elements in der Liste der mit (ÿ__) aktivierbaren Objekte. Negative Werte bedeuten, dass das Element nicht im Tab-Index auftaucht. value Gibt den Rückgabewert an das Script für den Fall an, dass dieses Formularelement aktiviert wurde. Tag / Attribut

2.0

3.0

3.2

4.0

Internet Explorer

Netscape



X

X

X

X

1.0

1.0

X

4.0B1

X

4.0B1

accesskey disabled

180

X

JavaScript Kompendium

Formulare erstellen

Tag / Attribut

Kapitel 8

2.0

3.0

3.2

4.0

Internet Explorer

4.0B2

height tabindex value

Netscape

X

X

X

width

X

4.0B1

X

1.0

1.0 4.0B2

Dieses Tag wird in Formularen verwendet, die mit
...
erzeugt wurden. Es erstellt mit dem Wert reset für das Attribut type einen Knopf, der das Formular löschen kann. accesskey Mit accesskey können Sie einen so genannten Tasten-Shortcut definieren, mit dem das Formularelement erreichbar ist. Ordnen Sie dem Attribut einen einzigen Buchstaben zu und er wird ausgeführt, wenn Sie diese Taste mit der zugehörigen Shortcut-Taste drücken, die von Browser und Betriebssystem abhängt. disabled Dieses allein stehende Attribut bewirkt, dass das Formularelement als inaktiv gekennzeichnet wird, und unterbindet die Funktionalität des Elements. height Gibt die Höhe des Knopfes in Pixel an. tabindex Gibt den Tab-Index des Formularelements an. Positive Werte stehen für die Position des Elements in der Liste der mit (ÿ__) aktivierbaren Objekte. Negative Werte bedeuten, dass das Element nicht im Tab-Index auftaucht. value Gibt den Rückgabewert an das Script für den Fall an, dass dieses Formularelement aktiviert wurde. width Gibt die Breite des Knopfes in Pixel an.

JavaScript Kompendium

181

Kapitel 8

Formulare Tag / Attribut

2.0

3.0

3.2

4.0

Internet Explorer

Netscape



X

X

X

X

1.0

1.0

X

4.0B1

X

4.0B1

accesskey X

disabled

4.0B2

height name

X

X

X

tabindex value

X

X

width

X

X

1.0

X

4.0B1

X

1.0

1.0

1.0 4.0B2

Dieses Tag wird in Formularen verwendet, die mit
...
erzeugt wurden. Es erstellt mit dem Wert submit für das Attribut type einen Knopf, der die Formularinhalte absendet. accesskey Mit accesskey können Sie einen so genannten Tasten-Shortcut definieren, mit dem das Formularelement erreichbar ist. Ordnen Sie dem Attribut einen einzigen Buchstaben zu und er wird ausgeführt, wenn Sie diese Taste mit der zugehörigen Shortcut-Taste drücken, die von Browser und Betriebssystem abhängt. disabled Dieses allein stehende Attribut bewirkt, dass das Formularelement als inaktiv gekennzeichnet wird, und unterbindet die Funktionalität des Elements. height Gibt die Höhe des Knopfes in Pixel an. name Gibt die Bezeichnung des Formularelements an, um es durch Scripts identifizieren zu können. Der Wert des Attributs wird außerdem bei der Auswertung des Formulars angegeben.

182

JavaScript Kompendium

Formulare erstellen

Kapitel 8

tabindex Gibt den Tab-Index des Formularelements an. Positive Werte stehen für die Position des Elements in der Liste der mit (ÿ__) aktivierbaren Objekte. Negative Werte bedeuten, dass das Element nicht im Tab-Index auftaucht. value Gibt den Rückgabewert an das Script für den Fall an, dass dieses Formularelement aktiviert wurde. width Gibt die Breite des Knopfes in Pixel an. Tag / Attribut

2.0

3.0

3.2

4.0

Internet Explorer

Netscape



X

X

X

X

1.0

1.0

X

4.0B1

accesskey

5.0

autocomplete X

disabled

X

4.0B1

maxlength

X

X

X

X

1.0

1.0

name

X

X

X

X

1.0

1.0

X

4.0B1

X

1.0

X

4.0B1

X

1.0

readonly size

X

X

X

tabindex value vcard_name

X

X

X

1.0

1.0

5.0

Dieses Tag wird in Formularen verwendet, die mit
...
erzeugt wurden. Es erstellt mit dem Wert text für das Attribut type ein Texteingabefeld. accesskey Mit accesskey können Sie einen so genannten Tasten-Shortcut definieren, mit dem das Formularelement erreichbar ist. Ordnen Sie dem Attribut einen einzigen Buchstaben zu und er wird ausgeführt, wenn Sie diese Taste mit der zugehörigen Shortcut-Taste drücken, die von Browser und Betriebssystem abhängt.

JavaScript Kompendium

183

Kapitel 8

Formulare autocomplete Schaltet die Auto-Vervollständigungsfunktion ein (on) oder aus (off). disabled Dieses allein stehende Attribut bewirkt, dass das Formularelement als inaktiv gekennzeichnet wird, und unterbindet die Funktionalität des Elements. maxlength Gibt die maximale Zeichenlänge für den Eingabetext an. name Gibt die Bezeichnung des Formularelements an, um es durch Scripts identifizieren zu können. Der Wert des Attributs wird außerdem bei der Auswertung des Formulars angegeben. readonly Dieses allein stehende Attribut gibt an, dass der Inhalt dieses Formularelements nicht durch den Leser der Seite verändert werden darf. size Gibt die angezeigte Zeichenlänge für den Eingabetext an. tabindex Gibt den Tab-Index des Formularelements an. Positive Werte stehen für die Position des Elements in der Liste der mit (ÿ__) aktivierbaren Objekte. Negative Werte bedeuten, dass das Element nicht im Tab-Index auftaucht. value Gibt den Rückgabewert an das Script an. vcard_name Gibt einen Feldnamen der persönlichen Microsoft-Visitenkarte (vcard) an, dessen Wert hier voreingestellt werden soll. Der Inhalt dieses Feldes wird erst an den Empfänger der Formulardaten weitergegeben, wenn das Formular abgesandt wurde.

Tabelle 8.29: Werte für vcard_name in

184

Wert

Bedeutung

vCard.Business.City

Firmenadresse: Stadt

vCard.Business.Country

Firmenadresse: Land

JavaScript Kompendium

Formulare erstellen

Kapitel 8

Wert

Bedeutung

vCard.Business.Fax

Firmenadresse: Telefaxnummer

vCard.Business.Phone

Firmenadresse: Telefonnummer

vCard.Business.State

Firmenadresse: Staat

vCard.Business.StreetAddress

Firmenadresse: Straße und Hausnummer

vCard.Business.URL

Firmenadresse: Homepage-Adresse

vCard.Business.Zipcode

Firmenadresse: Postleitzahl

vCard.Cellular

Mobilfunk-Telefonnummer

vCard.Company

Firmenname

vCard.Department

Abteilung

vCard.DisplayName

Angezeigter Name

vCard.Email

E-Mail-Adresse

vCard.FirstName

Vorname

vCard.Gender

Geschlecht

vCard.Home.City

Privatadresse: Stadt

vCard.Home.Country

Privatadresse: Land

vCard.Home.Fax

Privatadresse: Telefaxnummer

vCard.Home.Phone

Privatadresse: Telefonnummer

vCard.Home.State

Privatadresse: Staat

vCard.Home.StreetAddress

Privatadresse: Straße und Hausnummer

vCard.Home.Zipcode

Privatadresse: Postleitzahl

vCard.Homepage

Homepage-Adresse

vCard.JobTitle

Berufsbezeichnung

vCard.LastName

Nachname

vCard.MiddleName

2. Vorname

vCard.Notes

Bemerkungen

vCard.Office

Büro

vCard.Pager

Pagernummer

JavaScript Kompendium

Tabelle 8.29: Werte für vcard_name in (Forts.)

185

Kapitel 8

Formulare Tag / Attribut

2.0

3.0

3.2

4.0

Internet Explorer

Netscape



3.0

challenge

3.0

name

3.0

Dieses Tag errechnet einen Verschlüsselungscode, der im Netscaspe in Formularen angewandt werden kann, um die Datenübertragung sicherer zu machen. challenge Wird als Grundlage für den zufällig erzeugten Schlüssel genommen. name Gibt eine Bezeichnung für dieses Formularelement an, um es durch Scripts ansprechbar zu machen. Tag / Attribut

2.0

3.0

3.2

4.0

Internet Explorer



X

4.0B2

accesskey

X

4.0B2

for

X

4.0B2

Netscape

Dieses Tag wird verwendet, um eine Beschreibung zu Formularfeldern hinzuzufügen, und somit auch, um die Navigation innerhalb von Formularen zu vereinfachen. accesskey Mit accesskey können Sie einen so genannten Tasten-Shortcut definieren, mit dem die Markierung erreichbar ist. Ordnen Sie dem Attribut einen einzigen Buchstaben zu und er wird ausgeführt, wenn Sie diese Taste mit der zugehörigen Shortcut-Taste drücken, die von Browser und Betriebssystem abhängt. for Gibt an, welchem Formularfeld diese Markierung zugeordnet ist.

186

JavaScript Kompendium

Formulare erstellen

Kapitel 8


Tag / Attribut

2.0

3.0

3.2

4.0

Internet Explorer




X

4.0B2

accesskey

X

4.0

align

X

4.0B2

Netscape

Dieses Tag gibt die Bezeichnung für ein
an. accesskey Mit accesskey können Sie einen so genannten Tasten-Shortcut definieren, mit dem die Legende erreichbar ist. Ordnen Sie dem Attribut einen einzigen Buchstaben zu und er wird ausgeführt, wenn Sie diese Taste mit der zugehörigen Shortcut-Taste drücken, die von Browser und Betriebssystem abhängt. align Gibt die horizontale Ausrichtung innerhalb Legende an. Wert

Bedeutung

center

Der Inhalt wird zentriert ausgerichtet.

left

Der Inhalt wird nach links ausgerichtet.

right

Der Inhalt wird nach rechts ausgerichtet.

Tabelle 8.30: Die Werte von align in


Tag / Attribut 2.0

3.0

3.2

4.0



X

Disabled

X

Label

X

Internet Explorer

Netscape

Mit diesem Tag kann man mehrere -Tags eines Auswahlfeldes zusammenfassen und in eine Hierarchie bringen. disabled Dieses allein stehende Attribut gibt an, dass dieses Element vorübergehend deaktiviert wurde.

JavaScript Kompendium

187

Kapitel 8

Formulare label Gibt einen Kurznamen für die Optionsgruppe an. Tag / Attribut 2.0

X

3.0

3.2

4.0

Internet Explorer

Netscape

X

X

X

1.0

1.0

X

disable

X X

label selected

X

X

X

X

1.0

1.0

value

X

X

X

X

1.0

1.0

Gibt die einzelnen Optionen für ein Auswahlfeld an. disable Dieses allein stehende Attribut gibt an, dass dieses Element vorübergehend deaktiviert wurde. label Gibt einen Kurznamen für die Option an. selected Dieses allein stehende Attribut gibt an, dass diese Option in der Voreinstellung ausgewählt sein soll. value Gibt den Wert für dieses Element an, der im Formular verschickt werden soll, wenn dieses Element ausgewählt ist. <select> Tag / Attribut

2.0

3.0

3.2

4.0

Internet Explorer

Netscape

<select>

X

X

X

X

1.0

1.0

accesskey

4.0B1

align

4.0

disabled

188

X

X

4.0B1

JavaScript Kompendium

Formulare erstellen

Kapitel 8

Tag / Attribut

2.0

3.0

3.2

4.0

Internet Explorer

Netscape

multiple

X

X

X

X

1.0

1.0

name

X

X

X

X

1.0

1.0

size

X

X

X

1.0

1.0

X

4.0B1

tabindex

Gibt eine Auswahlliste an, deren Elemente mit festgelegt werden. accesskey Mit accesskey können Sie einen so genannten Tasten-Shortcut definieren, mit dem das Auswahlfeld erreichbar ist. Ordnen Sie dem Attribut einen einzigen Buchstaben zu und er wird ausgeführt, wenn Sie diese Taste mit der zugehörigen Shortcut-Taste drücken, die von Browser und Betriebssystem abhängt. align Gibt die horizontale Ausrichtung des Auswählfeldes an. Wert

Bedeutung

center

Das Feld wird zentriert ausgerichtet.

left

Das Feld wird nach links ausgerichtet.

right

Das Feld wird nach rechts ausgerichtet.

Tabelle 8.31: Die Werte von align in <select>

disabled Gibt an, dass die Auswahlliste vorübergehend deaktiviert ist. multiple Gibt an, dass man mehrere Optionen auswählen kann. name Gibt die Bezeichnung des Formularelements an, um es durch Scripts identifizieren zu können. Der Wert des Attributs wird außerdem bei der Auswertung des Formulars angegeben. size Gibt die angezeigte Zeichenlänge der Optionen an.

JavaScript Kompendium

189

Kapitel 8

Formulare tabindex Gibt den Tab-Index des Auswahlfeldes an. Positive Werte stehen für die Position des Feldes in der Liste der mit (ÿ__) aktivierbaren Objekte. Negative Werte bedeuten, dass das Auswahlfeld nicht im Tab-Index auftaucht. Tag / Attribut 2.0<br /> <br /> 3.0<br /> <br /> 3.2<br /> <br /> 4.0<br /> <br /> Internet Explorer<br /> <br /> Netscape<br /> <br /> X<br /> <br /> X<br /> <br /> X<br /> <br /> 1.0<br /> <br /> 1.0<br /> <br /> X<br /> <br /> 4.0B1<br /> <br /> X<br /> <br /> 1.0<br /> <br /> X<br /> <br /> 4.0B1<br /> <br /> X<br /> <br /> 1.0<br /> <br /> X<br /> <br /> 4.0B1<br /> <br /> X<br /> <br /> 1.0<br /> <br /> tabindex<br /> <br /> X<br /> <br /> 4.0B1<br /> <br /> wrap<br /> <br /> X<br /> <br /> 4.0<br /> <br /> <textarea><br /> <br /> X<br /> <br /> accesskey cols<br /> <br /> X<br /> <br /> X<br /> <br /> X<br /> <br /> disabled name<br /> <br /> X<br /> <br /> X<br /> <br /> X<br /> <br /> X<br /> <br /> readonly rows<br /> <br /> X<br /> <br /> X<br /> <br /> X<br /> <br /> 1.0<br /> <br /> 1.0<br /> <br /> 1.0<br /> <br /> 2.0<br /> <br /> Definiert ein Textfeld in einem Formular. accesskey Mit accesskey können Sie einen so genannten Tasten-Shortcut definieren, mit dem das Textfeld erreichbar ist. Ordnen Sie dem Attribut einen einzigen Buchstaben zu und er wird ausgeführt, wenn Sie diese Taste mit der zugehörigen Shortcut-Taste drücken, die von Browser und Betriebssystem abhängt. cols Gibt die Textspalten des Textfeldes an. disabled Dieses allein stehende Attribut gibt an, dass dieses Formularelement vorübergehend deaktiviert wurde. name Gibt die Bezeichnung des Formularelements an, um es durch Scripts identifizieren zu können. Der Wert des Attributs wird außerdem bei der Auswertung des Formulars angegeben.<br /> <br /> 190<br /> <br /> JavaScript Kompendium<br /> <br /> Formularinhalte überprüfen<br /> <br /> Kapitel 8<br /> <br /> readonly Dieses allein stehende Attribut gibt an, dass der Inhalt dieses Formularelements nicht durch den Leser der Seite verändert werden darf. rows Gibt die Textzeilen des Textfeldes an. tabindex Gibt den Tab-Index des Textfeldes an. Positive Werte stehen für die Position des Feldes in der Liste der mit (ÿ__) aktivierbaren Objekte. Negative Werte bedeuten, dass das Textfeld nicht im Tab-Index auftaucht. wrap Gibt an, wie die Zeilen umbrochen werden sollen. Wert<br /> <br /> Bedeutung<br /> <br /> off<br /> <br /> Die Zeilen werden genauso umbrochen, wie sie eingetippt wurden, wenn kein (¢) gedrückt wurde, wird auch nicht umbrochen.<br /> <br /> soft<br /> <br /> Die Zeilen werden in der Anzeige umbrochen, aber so abgesendet, wie sie eingegeben wurden.<br /> <br /> hard<br /> <br /> Die Zeilen werden in der Anzeige umbrochen und auch so an das Script abgeschickt.<br /> <br /> 8.3<br /> <br /> Tabelle 8.32: Die Werte von wrap in <textarea>.<br /> <br /> Formularinhalte überprüfen<br /> <br /> Nun wollen wir aber vermeiden, dass uns zahlreiche Kontakte mit falschen Informationen erreichen. Dies sind hier zum Beispiel Fehler in der E-MailAdresse oder leere Felder. Durch die Funktion wertePruefen(), die im <form>-Tag in Verbindung mit dem onSubmit-Event-Handler aufgerufen wird, werden die Eingaben des Benutzers vor dem Versenden geprüft. Sollte der Rückgabewert der Funktion wertePruefen() den Wert false übergeben, so werden die Formulardaten nicht übertragen. function wertePruefen() { //Variable, die anzeigt, ob alles in Ordnung ist allesOK = true;<br /> <br /> Listing 8.7: Die Steuerfunktion zum Überprüfen der Formulardaten<br /> <br /> allesOK1 = aufNull(); allesOK2 = eMailPruefen(); if ((allesOK1==false)||(allesOK2==false)) JavaScript Kompendium<br /> <br /> 191<br /> <br /> Kapitel 8<br /> <br /> Formulare allesOK=false; return allesOK; }<br /> <br /> Sobald unser Script mit dieser Funktion ausgestattet ist, und das <form>-Tag wie folgt geändert wurde, erfolgt vor dem Versenden der Formulardaten die Überprüfung, ob sich bei der Eingabe offensichtliche Fehler eingeschlichen haben. <form method="post" name="Kontakt" action="mailto:meine@adresse.de" onSubmit="return wertePruefen()"> wertePruefen() greift hierbei auf zwei weitere Funktionen zu. Listing 8.8: Die Funktion aufNull() überprüft, ob Felder Werte enthalten<br /> <br /> function aufNull() { //Variable, die anzeigt, ob alles in Ordnung ist allesOK = true; //Prüfen, ob das Feld Nachname leer ist if (document.Kontakt.Nachname.value=="") { alert("Leeres Feld Nachname.\nBitte geben" +" Sie einen Nachnamen ein."); allesOK=false; } //Prüfen, ob das Feld Vorname leer ist if (document.Kontakt.Vorname.value=="") { alert("Leeres Feld Vorname.\nBitte geben" +" Sie einen Vornamen ein."); allesOK=false; } //Prüfen, ob das Feld Adresse leer ist if (document.Kontakt.Adresse.value=="") { alert("Leeres Feld Adresse.\nBitte geben" +" Sie eine Adresse ein."); allesOK=false; } //Prüfen, ob das Feld Tel leer ist if (document.Kontakt.Tel.value=="") { alert("Leeres Feld Telefon.\nBitte geben" +" Sie eine Telefonnummer ein."); allesOK=false; } //Prüfen, ob das Feld Fax leer ist if (document.Kontakt.Fax.value=="") { alert("Leeres Feld Telefax.\nBitte geben" +" Sie eine Faxnummer ein."); allesOK=false; }<br /> <br /> 192<br /> <br /> JavaScript Kompendium<br /> <br /> Formularinhalte überprüfen<br /> <br /> Kapitel 8<br /> <br /> //Prüfen, ob das Feld E-Mail leer ist if (document.Kontakt.Mail.value=="") { alert("Leeres Feld E-Mail.\nBitte geben" +" Sie eine E-Mail-Adresse ein."); allesOK=false; } return allesOK; }<br /> <br /> Die Zeile var ergebnis = true direkt am Anfang der Funktion gibt uns die Möglichkeit, bei nur einem Fehler in einem der Eingabefelder den Versendevorgang zu stoppen. Sehen wir uns nun die Überprüfung des Nachnamens an. //Prüfen ob das Feld Nachname leer ist if (document.Kontakt.Nachname.value=="") { alert("Leeres Feld Nachname.\nBitte geben" +" Sie einen Nachnamen ein."); allesOK=false; }<br /> <br /> Listing 8.9: Überprüfung, ob ein Feld leer ist<br /> <br /> Hier wird in allen Fällen überprüft, ob die Eingabefelder für die zu prüfenden Felder überhaupt Werte enthalten. document.Kontakt.Nachname.value verweist hierbei auf das Eingabefeld des Nachnamens, das Sie durch <input name="Nachname" type="text" size=40 maxlength=80> bereits in diesem Kapitel definiert hatten. Sollte sich in diesem Feld kein Wert (also kein Name) befinden, so wird die Variable allesOK auf false gesetzt. Genauso verhält sich auch die Überprüfung der anderen Felder. Die zweite Funktion sorgt nun dafür, dass die eingegebene E-Mail-Adresse daraufhin geprüft wird, ob sie überhaupt ein @-Zeichen enthält. function eMailPruefen() { //Variable, die anzeigt, ob alles in Ordnung ist allesOK = true;<br /> <br /> Listing 8.10: Überprüfung der E-Mail-Adresse<br /> <br /> //Prüfen, ob die E-Mail ein @-Zeichen enthält if (document.Kontakt.Mail.value.indexOf("@")==-1){ alert("Die E-Mail-Adresse enthält kein @-" +"Zeichen.\nBitte geben Sie eine gültige " +"E-Mail-Adresse ein."); allesOK=false; } return allesOK; }<br /> <br /> JavaScript Kompendium<br /> <br /> 193<br /> <br /> Kapitel 8<br /> <br /> Formulare Hier wird geprüft, ob sich in dem Eingabefeld überhaupt ein @-Zeichen befindet, ist dies der Fall, so wird daraufhin dieser Teil der Überprüfung auch erfolgreich abgeschlossen. Bevor wertePruefen() aber den Wert true in der Variablen allesOK an den onSubmit-Event-Handler weitergibt, wird noch ausgewertet, ob beide Unterfunktionen auch ohne Fehler abgeschlossen wurden. Komplett sieht unser Script nun so aus:<br /> <br /> Listing 8.11: Ein komplettes Kontaktformular mit Überprüfung<br /> <br /> <html> <head> <title>Adresse</title> <script language="JavaScript"> function wertePruefen() { //Variable, die anzeigt, ob alles in Ordnung ist allesOK = true; allesOK1 = aufNull(); allesOK2 = eMailPruefen(); if ((allesOK1==false)||(allesOK2==false)) allesOK=false; return allesOK; } function aufNull() { //Variable, die anzeigt, ob alles in Ordnung ist allesOK = true; //Prüfen, ob das Feld Nachname leer ist if (document.Kontakt.Nachname.value=="") { alert("Leeres Feld Nachname.\nBitte geben" +" Sie einen Nachnamen ein."); allesOK=false; } //Prüfen, ob das Feld Vorname leer ist if (document.Kontakt.Vorname.value=="") { alert("Leeres Feld Vorname.\nBitte geben" +" Sie einen Vornamen ein."); allesOK=false; } //Prüfen, ob das Feld Adresse leer ist if (document.Kontakt.Adresse.value=="") { alert("Leeres Feld Adresse.\nBitte geben" +" Sie eine Adresse ein."); allesOK=false;<br /> <br /> 194<br /> <br /> JavaScript Kompendium<br /> <br /> Formularinhalte überprüfen<br /> <br /> Kapitel 8<br /> <br /> } //Prüfen, ob das Feld Tel leer ist if (document.Kontakt.Tel.value=="") { alert("Leeres Feld Telefon.\nBitte geben" +" Sie eine Telefonnummer ein."); allesOK=false; } //Prüfen, ob das Feld Fax leer ist if (document.Kontakt.Fax.value=="") { alert("Leeres Feld Telefax.\nBitte geben" +" Sie eine Faxnummer ein."); allesOK=false; } //Prüfen, ob das Feld E-Mail leer ist if (document.Kontakt.Mail.value=="") { alert("Leeres Feld E-Mail.\nBitte geben" +" Sie eine E-Mail-Adresse ein."); allesOK=false; } return allesOK; } function eMailPruefen() { //Variable, die anzeigt, ob alles in Ordnung ist allesOK = true; //Prüfen, ob die E-Mail ein @-Zeichen enthält if (document.Kontakt.Mail.value.indexOf("@")==-1){ alert("Die E-Mail-Adresse enthält kein @-" +"Zeichen.\nBitte geben Sie eine gültige " +"E-Mail-Adresse ein."); allesOK=false; } return allesOK; } </script> </head> <body> <form method="post" name="Kontakt" action="mailto:meine@adresse.de" onSubmit="return wertePruefen()"> <table cols=2> <tr> <td></td> <td> <input type="radio" name="Anrede" value="Herr" checked>Herr<br /> <br /> JavaScript Kompendium<br /> <br /> 195<br /> <br /> Kapitel 8<br /> <br /> Formulare <input type="radio" name="Anrede" value="Frau">Frau </td> </tr> <tr> <td>Nachname:</td> <td><input name="Nachname" type="text" size=40 maxlength=80></td> </tr> <tr> <td>Vorname:</td> <td><input name="Vorname" type="text" size=40 maxlength=80></td> </tr> <tr> <td>Adresse:</td> <td> <textarea name="Adresse" rows=3 cols=30> Land: <select name="Land" size=1> Deutschland Österreich Schweiz Sonstiges Telefon: Telefax: E-Mail:
196

JavaScript Kompendium

Formularinhalte überprüfen

Kapitel 8

value="Formular absenden">

8.3.1

Formularinhalte versenden

Nach der Überprüfung des Inhaltes werden nun, sofern keine Beanstandungen gefunden wurden, die Daten aus dem Formular an die Adresse gesandt, die wir mit dem
-Tag angegeben hatten.

Bei diesem Beispiel gehen die Daten also an die Adresse [email protected].

JavaScript Kompendium

197

9

Events

In diesem Kapitel werden wir Sie mit den Events und deren Handlern bekannt machen. Wir werden Ihnen zeigen, wie Sie auf bestimmte Events prüfen und diesen dann Aktionen folgen lassen. Die Event-Modelle des Netscape Communicators und des Internet Explorers sind nicht gleich und werden komplett unterschiedlich abgearbeitet. Das grundlegende Reagieren auf Ereignisse geschieht allerdings in beiden Browsern ähnlich.

9.1

Warum Events?

Mit den Event-Handlern haben Sie die Möglichkeit, auf Ereignisse zu reagieren, die bei einem HTML-Element ausgelöst werden. Die Syntax für die Event-Handler sieht so aus, dass Sie bei der Programmierung des HTMLElements dem Attribut einen Event-Handler zuweisen und mit angeben, was für diesen Event ausgeführt werden soll.


Listing 9.1: Ein Button, der beim Drücken einen Event-Handler auslöst.

Dieses Beispiel würde das folgende Meldungsfenster erscheinen lassen, wenn man den angelegten Knopf auf der HTML-Seite drückt. Abbildung 9.1: Das Ergebnis unseres EventHandlers.

Sie können auch Funktionsnamen anstelle des JavaScript-Codes angeben und so mit komplexen Programmen auf Events reagieren.

JavaScript Kompendium

199

Kapitel 9

Events

9.2

Event-Handler

Die folgende Tabelle gibt eine Übersicht über die Event-Handler, die in JavaScript verfügbar sind. Tabelle 9.1: Alle Event-Handler in der Übersicht.

200

Ereignis

Event-Handler

Beschreibung

Abort

onAbort

Führt JavaScript-Code aus, wenn der Benutzer eine Aktion abbricht.

Blur

onBlur

Führt JavaScript-Code aus, wenn ein Element eines Formulars, ein Fenster oder ein Frame den Fokus verliert.

Change

onChange

Führt JavaScript-Code aus, wenn ein Select-, Text- oder Textarea-Eingabefeld den Fokus verliert und seine Daten geändert wurden.

Click

onClick

Führt JavaScript-Code aus, wenn ein Element in einem Formular angeklickt wird.

DblClick

onDblClick

Führt JavaScript-Code aus, wenn ein Element in einem Formular doppelt angeklickt wird.

DragDrop

onDragDrop

Führt JavaScript-Code aus, wenn der Benutzer ein Objekt (eine Datei oder Ähnliches) in das Browserfenster zieht und dort fallen lässt (drop).

Error

onError

Führt JavaScript-Code aus, wenn das Laden eines Dokuments oder eines Bildes einen Fehler produziert.

Focus

onFocus

Führt JavaScript-Code aus, wenn ein Element den Fokus erhält.

KeyDown

onKeyDown

Führt JavaScript-Code aus, wenn eine Taste der Tastatur nach unten gedrückt wird.

KeyPress

onKeyPress

Führt JavaScript-Code aus, wenn der Benutzer eine Taste drückt oder gedrückt hält.

KeyUp

onKeyUp

Führt JavaScript-Code aus, wenn eine Taste der Tastatur wieder losgelassen wird.

JavaScript Kompendium

Event-Handler

Kapitel 9

Ereignis

Event-Handler

Beschreibung

Load

onLoad

Führt JavaScript-Code aus, wenn der Browser ein Dokument fertig geladen hat oder alle Frames, die in einem -Tag stehen.

MouseDown

onMouseDown

Führt JavaScript-Code aus, wenn der Benutzer eine Maustaste nach unten drückt.

MouseMove

onMouseMove

Führt JavaScript-Code aus, wenn der Benutzer die Maus bewegt.

MouseOut

onMouseOut

Führt JavaScript-Code aus, wenn der Mauszeiger einen Bereich (Bild oder Link) verlässt. Der Mauszeiger muss vorher innerhalb des Bereichs gewesen sein.

MouseOver

onMouseOver

Führt JavaScript-Code aus, wenn der Mauszeiger in einen Bereich (Bild oder Link) hineinbewegt wird. Der Mauszeiger muss vorher außerhalb des Bereichs gewesen sein.

MouseUp

onMouseUp

Führt JavaScript-Code aus, wenn der Benutzer die Maustaste wieder loslässt.

Move

onMove

Führt JavaScript-Code aus, wenn der Benutzer oder ein Script ein Fenster oder einen Frame bewegt.

Reset

onReset

Führt JavaScript-Code aus, wenn der Benutzer ein Formular zurücksetzt.

Resize

onResize

Führt JavaScript-Code aus, wenn der Benutzer oder ein Script die Größe eines Fensters oder Frames verändert.

Select

onSelect

Führt JavaScript-Code aus, wenn der Benutzer einen Bereich in einem Textoder Textarea-Feld markiert.

Submit

onSubmit

Führt JavaScript-Code aus, wenn der Benutzer ein Formular übermittelt.

Unload

onUnload

Führt JavaScript-Code aus, wenn der Benutzer ein Dokument verlässt.

JavaScript Kompendium

Tabelle 9.1: Alle Event-Handler in der Übersicht. (Forts.)

201

Kapitel 9

Events

9.2.1

onAbort

onAbort führt JavaScript-Code aus, wenn der Benutzer eine Aktion abbricht.

9.2.2

onBlur

onBlur führt JavaScript-Code aus, wenn ein Element eines Formulars, ein Fenster oder ein Frame den Fokus verliert. Listing 9.2: Ein Eingabefeld, das auf Fokusverlust reagiert.




Verliert in diesem Beispiel das Textfeld den Fokus, so wird ein Meldungsfenster angezeigt, das den Anwender über den Verlust des Fokus informiert.

9.2.3

onChange

onChange führt JavaScript-Code aus, wenn ein Select-, Text- oder Textarea-

Eingabefeld den Fokus verliert und seine Daten geändert wurden. Listing 9.3: Ein Eingabefeld, das auf Änderungen reagiert.




Sobald der Anwender den Inhalt dieses Textfeldes abändert und das Feld den Fokus verliert, wird ein Meldungsfenster angezeigt, das den Anwender über die Änderung des Textfeldes informiert.

9.2.4

onClick

onClick führt JavaScript-Code aus, wenn ein Element in einem Formular

angeklickt wird. 202

JavaScript Kompendium

Event-Handler


Kapitel 9 Listing 9.4: Ein Eingabefeld, das auf Klicks reagiert.

Wird in diesem Beispiel das Textfeld vom Anwender angeklickt, wird die Meldung "Das Textfeld wurde angeklickt" ausgegeben.

9.2.5

onDblClick

onDblClick führt JavaScript-Code aus, wenn ein Element in einem Formular

doppelt angeklickt wird.


Listing 9.5: Ein Eingabefeld, das auf Doppelklicks reagiert.

Wird in diesem Beispiel das Textfeld vom Anwender doppelt angeklickt, wird die Meldung "Das Textfeld wurde doppelt angeklickt" ausgegeben.

9.2.6

onError

onError führt JavaScript-Code aus, wenn das Laden eines Dokuments oder

eines Bildes einen Fehler produziert.

Listing 9.6: Hier wird auf Fehler reagiert.

Sobald beim Laden des Bildes ein Fehler auftritt, wird dies dem Benutzer durch ein Meldungsfenster mitgeteilt.

JavaScript Kompendium

203

Kapitel 9

Events

9.2.7

onFocus

onFocus führt JavaScript-Code aus, wenn ein Element den Focus erhält. Bei

diesem Event-Handler ist Vorsicht geboten, da man mit ihm im Netscape in Verbindung mit der alert()-Methode eine Endlosschleife produzieren kann. Listing 9.7: Dieser Knopf reagiert auf Fokuserhalt.




Dieses Script hat im Netscape eine Endlosschleife zur Folge. Aus Kompatibilitätsgründen sollte man auch im Internet Explorer auf diese Konstellation verzichten oder vorher sicherstellen, dass der Anwender keinen NetscapeBrowser verwendet.

9.2.8

onKeyDown

onKeyDown führt JavaScript-Code aus, wenn eine Taste der Tastatur nach

unten gedrückt wird. Listing 9.8: Eine Reaktion erfolgt beim Drücken einer Taste.




Dieses Script gibt eine Meldung an den User, sobald in dem Eingabefeld eine Taste der Tastatur gedrückt wird.

9.2.9

onKeyPress

onKeyPress führt JavaScript-Code aus, wenn der Benutzer eine Taste drückt

oder gedrückt hält.

204

JavaScript Kompendium

Event-Handler


Kapitel 9 Listing 9.9: Jeder Tastendruck führt zur Reaktion.

Gibt eine Meldung an den Anwender, sobald dieser eine Taste drückt, die den Inhalt des Textfeldes verändert. Die (Cursortasten) und (Shift) oder die (F-Tasten) lösen hier keine Meldung aus.

9.2.10

onKeyUp

onKeyUp führt JavaScript-Code aus, wenn eine Taste der Tastatur wieder los-

gelassen wird.


Listing 9.10: Das Lösen einer Taste führt zum Ereignis.

Dieses Script informiert den Anwender darüber, dass er eine Taste der Tastatur, die er zuvor gedrückt hatte, wieder losgelassen hat.

9.2.11

onLoad

onLoad führt JavaScript-Code aus, wenn der Browser ein Dokument fertig geladen hat oder alle Frames, die in einem -Tag stehen.

Listing 9.11: Beim Laden wird eine Meldung ausgegeben.

Gibt dem Benutzer die Mitteilung, dass die Seite geladen wurde, nachdem alle Elemente der Seite geladen wurden.

JavaScript Kompendium

205

Kapitel 9

Events

9.2.12

onMouseDown

onMouseDown führt JavaScript-Code aus, wenn der Benutzer eine Maustaste nach unten drückt. Listing 9.12: Beim Drücken der Maustaste wird eine Meldung ausgegeben.



Bei diesem Beispiel wird die Meldung an den User gegeben, sobald auf dem Bild eine Maustaste gedrückt wird.

9.2.13

onMouseMove

onMouseMove führt JavaScript-Code aus, wenn der Benutzer die Maus

bewegt. Listing 9.13: Jede Mausbewegung führt zur Meldung.



Hier wird eine Meldung ausgegeben, sobald sich die Maus über dem ImageObjekt befindet.

9.2.14

onMouseOut

onMouseOut führt JavaScript-Code aus, wenn der Mauszeiger einen Bereich (Bild oder Link) verlässt. Der Mauszeiger muss vorher innerhalb des Bereichs gewesen sein. Listing 9.14: Wenn die Maus das Bild verlässt, wird eine Meldung ausgegeben.



Sobald der Anwender bei diesem Beispiel den Mauszeiger aus dem Bild herausbewegt, wird der Event-Handler ausgelöst und die Meldung ausgegeben.

206

JavaScript Kompendium

Event-Handler

9.2.15

Kapitel 9

onMouseOver

onMouseOver führt JavaScript-Code aus, wenn der Mauszeiger in einen Bereich (Bild oder Link) hineinbewegt wird. Der Mauszeiger muss vorher außerhalb des Bereichs gewesen sein.

Listing 9.15: Sobald die Maus über das Bild bewegt wird, wird eine Meldung ausgegeben.

Sobald der Mauszeiger von außerhalb des Bildes auf das Bild bewegt wird, löst der Event-Handler aus und gibt dem Anwender eine Meldung.

9.2.16

onMouseUp

onMouseUp führt JavaScript-Code aus, wenn der Benutzer die Maustaste wie-

der loslässt.

Listing 9.16: Wenn die Maustaste gelöst wird, wird eine Meldung ausgegeben.

Sobald eine Maustaste über dem Bild losgelassen wird, löst der EventHandler aus.

9.2.17

onReset

onReset führt JavaScript-Code aus, wenn der Benutzer ein Formular zurück-

setzt.


JavaScript Kompendium

Listing 9.17: Beim Rücksetzen wird eine Meldung ausgegeben.

207

Kapitel 9

Events Sobald der Reset-Knopf gedrückt wurde und das Formular zurückgesetzt wird, bekommt der Anwender die Meldung, die im
-Tag definiert wurde.

9.2.18

onSubmit

onSubmit führt JavaScript-Code aus, wenn der Benutzer ein Formular über-

mittelt. Listing 9.18: Beim Absenden von Formulardaten wird eine Meldung ausgegeben.




Sobald der Senden-Knopf gedrückt wurde, bekommt der Anwender die Meldung, die im
-Tag definiert wurde.

9.2.19

onUnload

onUnload führt JavaScript-Code aus, wenn der Benutzer ein Dokument ver-

lässt. Listing 9.19: Sobald die Seite verlassen wird, erhalten Sie eine Meldung.



Wird eine Seite verlassen, erhält der Anwender die im -Tag definierte Meldung.

9.3

Event-Capturing

An dieser Stelle nochmals der Hinweis, dass die Event-Modelle des Netscape Communicators und des Internet Explorers nicht gleich sind und komplett unterschiedlich abgearbeitet werden.

9.3.1

Netscape Communicator

Damit unter JavaScript aber nicht nur direkt von den Objekten, die einen Event auslösen, auf diesen reagiert werden kann, gibt es seit JavaScript 1.2 und nachfolgenden Versionen ein »neues« Event-Konzept. Dieses Konzept 208

JavaScript Kompendium

Event-Capturing

Kapitel 9

arbeitet einen aufgetretenen Event wie Windows von oben nach unten ab, wobei »oben« für die höchste Ebene der Objekte steht. Wird zum Beispiel ein Mausknopf gedrückt, so wird von der Maus ein mouseDown-Ereignis erzeugt. Die Schnittstelle, an der die Maus angeschlossen ist, empfängt diesen Event und gibt ihn an das Betriebssystem weiter. Von hier gelangt er dann zum Fenstermanager, der ihn an eine Anwendung, die in diesem Fall einen Browser darstellt, weiterleitet. Der Browser empfängt das Ereignis und schaut nach, ob es zu diesem Event einen event-Handler gibt, der im window-Objekt definiert wurde. Ist dies nicht der Fall, so wird das Ereignis an das document-Objekt weitergeleitet und wieder geprüft, ob dieses Objekt einen event-Handler für das Ereignis besitzt. Auch hier wird das Ereignis weitergeleitet, falls es keinen event-Handler für den Event besitzt. Erst nach all diesen Zwischenstationen ist das Ereignis wirklich an dem Objekt angelangt, auf dem das Event ausgelöst wurde, und es wird geprüft, ob dieses Objekt einen event-Handler besitzt, der für dieses Ereignis zuständig ist. Sollte auch hier kein event-Handler implementiert sein, so wird das Script ganz normal fortgesetzt, als ob nichts passiert wäre. Wie Sie sicher schon bemerkt haben, ist es nicht überall möglich, einen Event abzufangen, sondern nur in den übergeordneten Objekten des auslösenden Objekts. Sehen wir uns konkret ein Beispiel an, in dem ein onClick auf einen Button nicht vom Button, sondern vom document-Objekt, in dem sich der Button befindet, abgearbeitet und danach an den Button weitergeleitet wird. <script language="JavaScript1.2">

Listing 9.20: Hier werden Mausklicks abgefangen.

function eventHandler(ev) { alert ("Diese Meldung wurde abgefangen."); // Ereignis an andere Objekte weiterleiten. routeEvent(ev); return true; } // Alle click-Ereignisse werden vom document-Objekt // abgefangen. document.onclick=eventHandler; function StarteCapturing() { document.captureEvents(Event.CLICK); return true; } function BeendeCapturing() {

JavaScript Kompendium

209

Kapitel 9

Events document.releaseEvents(Event.CLICK); return true; }


Als Erstes wird in unserem Beispiel durch das Öffnen des -Tags das Event-Capturing mit der Funktion StarteCapturing() gestartet. Sobald nun der Anwender irgendwo auf der Seite einen Mausklick ausführt, spricht der neue Event-Handler für den abgefangenen onClick-Event an. Sollte der Mausklick auf dem Button ausgeführt worden sein, so wird er in der Funktion eventHandler(ev) durch den Befehl routeEvent(ev) an andere Objekte weitergereicht. Sobald unsere Seite wieder geschlossen wird, werden alle Events, die vorher abgefangen wurden, durch die Funktion BeendeCapturing() wieder freigegeben.

9.3.2

Internet Explorer

Beim Internet Explorer spricht man vom so genannten »Bubble-UpModell«. Hier werden die Events nicht wie beim Netscape, sondern genau in umgedrehter Reihenfolge abgearbeitet. Als Erstes wird der Event von dem Objekt, an dem er ausgelöst wurde, bearbeitet und dann zu den darüber liegenden Objekten weitergegeben. Der Internet Explorer kennt das Event-Capturing nicht so wie der Netscape Navigator. Hier ist es vielmehr so, dass Sie Events, die nicht weiter in anderen Objekten abgearbeitet werden sollen, »canceln« können. Sehen wir uns auch hier ein Beispiel an: Listing 9.21: Hier werden alle onClick-

Ereignisse an das document-Objekt weitergeleitet (Bubble Up).

210

<script language="JavaScript1.2"> function Bubble() { alert ("Diese Meldung gilt für alle."); }

JavaScript Kompendium

Event-Capturing

Kapitel 9

// Alle onclick-Ereignisse werden vom document// Objekt abgearbeitet. document.onClick = Bubble;


Im obigen Script hat keiner der Knöpfe einen onClick-Eventhandler. Trotzdem wird beim Klicken auf die Knöpfe eine Meldung ausgegeben. Sie haben richtig gehört: Obwohl kein onClick-Handler bei den Buttons definiert wurde, reagieren diese, als ob sie über einen solchen verfügen würden. Genau dieses Verhalten nennt man »Bubble Up«. Was ist aber, wenn Sie ein onClick-Ereignis einmal global für das gesamte Dokument erstellen wollen und für einen Knopf ein anderes Verhalten benötigen? Hier hilft die cancelBubble-Property des event-Objekts im Internet Explorer. Sehen wir uns das Verhalten in einem Script an: <script language="JavaScript1.2">

Listing 9.22: Hier reagiert jeder Knopf anders.

function Bubble() { alert ("Diese Meldung gilt für alle."); } function handleEvent() { alert ("Diese Meldung gehört zum Button."); window.event.cancelBubble = true; } function handleEvent2() { alert ("Diese Meldung gehört auch zum Button."); } // Alle onclick-Ereignisse werden vom document// Objekt abgearbeitet. document.onclick = Bubble;

JavaScript Kompendium

211

Kapitel 9

Events




Wie Sie sehen, haben in diesem Beispiel der erste und der zweite Knopf einen eigenen onClick-Eventhandler. Drückt der Anwender den ersten Knopf, wird die Funktion handleEvent() aufgerufen, die durch window. event.cancelBubble = true; die Weitergabe des onClick-Ereignisses an andere Objekte abbricht. Hier wird also nur die Meldung »Diese Meldung gehört zum Button.« ausgegeben. Der zweite Knopf ruft die Funktion handleEvent2() beim onClick-Ereignis auf und gibt auch die Meldung »Diese Meldung gehört zum Button.« aus. Bestätigt der Anwender diese Meldung, wird der Eventhandler des documentObjekts ausgelöst, da das Ereignis als Nächstes an dieses Objekt weitergegeben wird. Hier wird also die Funktion Bubble() aufgerufen und der Anwender bekommt die Meldung »Diese Meldung gilt für alle.«. Der dritte Knopf bringt nur die Meldung »Diese Meldung gilt für alle.« auf den Bildschirm, da er über keinen eigenen onClick-Eventhandler verfügt und somit nur der Eventhandler des document-Objekts ausgelöst wird.

9.4

Das Event-Objekt

Mit dem Event-Objekt haben Sie in beiden Browsern die Möglichkeit, nach aufgetretenen Ereignissen zu überprüfen, ob irgendwelche Tasten bei dem Ereignis mit gedrückt wurden, wo sich der Mauszeiger befand, und ob das aufgetretene Ereignis an andere Objekte weitergereicht werden soll.

9.4.1

Netscape

Der Netscape Communicator unterstützt in seinem event-Objekt das Event Capturing. Mit diesem Feature können Sie auftretende Ereignisse abfangen und durch individuelle Routinen abarbeiten lassen. Damit Sie diese Fähigkeiten sinnvoll einsetzen können, zeigt Ihnen die nächste Tabelle die Eigenschaften, die vom event-Objekt im Netscape unterstützt werden.

212

JavaScript Kompendium

Das Event-Objekt

Kapitel 9

Eigenschaft

Beschreibung

data

Ein Array mit Strings, das die URLs von Objekten, die durch Drag&Drop in das Browserfenster gezogen wurden, enthält.

height

Gibt die Höhe des Frames oder Fensters an, in dem der Event ausgelöst wurde.

layerX

Enthält die x-Koordinate des aufgetretenen Ereignisses relativ zum Layer-Objekt, in dem das Ereignis ausgelöst wurde.

layerY

Enthält die y-Koordinate des aufgetretenen Ereignisses relativ zum Layer-Objekt, in dem das Ereignis ausgelöst wurde.

modifiers

Gibt an, ob Zusatztasten gedrückt wurden. Mögliche Werte für diese Eigenschaft: – – – –

SHIFT_MASK CONTROL_MASK ALT_MASK META_MASK

pageX

Enthält die x-Koordinate des aufgetretenen Ereignisses relativ zur linken oberen Ecke des Dokuments, in dem das Ereignis ausgelöst wurde.

pageY

Enthält die y-Koordinate des aufgetretenen Ereignisses relativ zur linken, oberen Ecke des Dokuments, in dem das Ereignis ausgelöst wurde.

screenX

Enthält die absolute x-Koordinate des aufgetretenen Ereignisses.

screenY

Enthält die absolute y-Koordinate des aufgetretenen Ereignisses.

target

Das Objekt, mit dem das Ereignis ausgelöst wurde.

type

Gibt an, welches Ereignis aufgetreten ist.

which

Gibt den ASCII-Code der gedrückten Taste oder die gedrückte Maustaste an. Bei Maustasten steht 1 für die linke, 2 für die mittlere und 3 für die rechte Maustaste.

width

Die Breite des Fensters oder Frames, in dem das Ereignis ausgelöst wurde.

x

Gleichbedeutend mit layerX.

y

Gleichbedeutend mit layerY.

JavaScript Kompendium

Tabelle 9.2: Wichtige Eigenschaften des event-Objekts im Netscape.

213

Kapitel 9

Events Mit diesen Eigenschaften können Sie so ziemlich alles, was für ein Ereignis interessant ist, einstellen oder abfangen und selber implementieren.

9.4.2

Internet Explorer

Das event-Objekt des Internet Explorers sieht bei den Eigenschaften und auch bei seiner Reaktionsweise etwas anders aus als beim Netscape. Sie müssen hier nicht die Ereignisse einfangen, sondern können direkt über das event-Objekt festlegen, mit welcher Funktion ein Ereignis abgearbeitet werden soll. Die folgende Tabelle zeigt die wichtigsten Eigenschaften des eventObjekts des Internet Explorers: Tabelle 9.3: Wichtige Eigenschaften des event-Objekts im Internet Explorer.

214

Eigenschaft

Beschreibung

altKey

Gibt an, ob (Alt) gedrückt ist.

button

Enthält den Wert der Maustaste, die gedrückt wurde. Mögliche Werte sind hier 1 für die linke, 2 für die rechte und 4 für die mittlere Maustaste. Sollte keine Maustaste gedrückt sein, ist der Wert 0.

cancelBubble

Mit dieser Eigenschaft können Sie verhindern, dass der aufgetretene Event noch von weiteren Eventhandlern abgearbeitet wird.

clientX

Gibt die x-Koordinate von Mausereignissen relativ zum Browserfenster an.

clientY

Gibt die y-Koordinate von Mausereignissen relativ zum Browserfenster an.

ctrlKey

Gibt an, ob (STRG) gedrückt ist.

fromElement

Gibt bei mouseover- und mouseout-Ereignissen an, von welchem Objekt der Mauszeiger wegbewegt wurde.

keyCode

Gibt den Unicode der vom Anwender gedrückten Taste wieder.

offsetX

Gibt die x-Koordinate relativ zum Objekt an, das den Event ausgelöst hat.

offsetY

Gibt die y-Koordinate relativ zum Objekt an, das den Event ausgelöst hat.

returnValue

Der Rückgabewert des Event-Handlers.

shiftKey

Gibt an, ob (SHIFT) gedrückt ist.

srcElement

Gibt das Objekt an, das den Event ausgelöst hat.

JavaScript Kompendium

Das Event-Objekt

Kapitel 9

Eigenschaft

Beschreibung

toElement

Gibt bei mouseover- und mouseout-Ereignissen an, zu welchem Objekt der Mauszeiger hin bewegt wurde.

type

Der Typ des Ereignisses.

x

Die x-Koordinate des Ereignisses relativ zum übergeordneten Objekt.

y

Die y-Koordinate des Ereignisses relativ zum übergeordneten Objekt.

Tabelle 9.3: Wichtige Eigenschaften des event-Objekts im Internet Explorer. (Forts.)

Abschließend zu diesem Kapitel hier noch der Hinweis, dass Sie im Praxisteil des Buches einige Scripts finden, in denen sowohl das Event-Modell des Internet Explorers als auch des Netscape Navigators berücksichtigt werden.

JavaScript Kompendium

215

10

Rahmen

Fenster und Rahmen (engl. Frame)? Sie haben richtig gelesen. Die sonst eigentlich in fester Hand von HTML vorzufindenden Fenster und Rahmen haben in JavaScript ein eigenes Kapitel verdient, da hier das Haupteinsatzgebiet der meisten JavaScript-Anwendungen liegt. Bisher war es uns nur möglich, immer eine Seite nach der anderen anzuzeigen. Es wäre aber weitaus komfortabler, wenn man mehrere Seiten gleichzeitig anzeigen und sie getrennt voneinander bewegen könnte. Dafür wurden die Rahmen geschaffen.

10.1

Eine Seite in Rahmen unterteilen

Wenn Sie eine Seite in zwei Rahmen aufteilen möchten, müssen Sie insgesamt drei Dateien anlegen. Die Erste definiert die Größe und die Besonderheiten der beiden Rahmen. Wir nennen diese Seite die rahmenerzeugende Seite. Die beiden anderen werden dann in die entsprechenden Abschnitte der Seite geladen. Es handelt sich hier also um die Inhalte der Rahmen. Wir betrachten erst einmal die Datei, die für den Aufbau der Rahmen verantwortlich ist. Eine solche HTML-Datei hat einen gewöhnlichen Kopf, muss aber nicht über einen Körper verfügen. Statt dessen wird ... eingefügt. Sie teilt dem Browser mit, dass nun Rahmen definiert werden. Da man eine Seite horizontal oder vertikal unterteilen kann, gib man eines der folgenden Attribute in diesem Tag an. Es handelt sich um COLS oder ROWS. Mit COLS kann man Spalten (horizontal getrennte Rahmen) festlegen, mit ROWS werden dagegen die Zeilen (vertikal getrennte Rahmen) definiert.

Hier würde die Seite in zwei Spalten unterteilt, wobei die linke Spalte 20% des Browserfensters breit wäre und die rechte die restlichen 80% einnehmen würde. Sie können aber auch direkt die Anzahl der Pixel angeben. Eine weitere Möglichkeit ist die relative Angabe in einer speziellen Syntax:

JavaScript Kompendium

217

Kapitel 10

Rahmen In diesem Beispiel würden drei Zeilen erzeugt. Die oberste wäre exakt 40 Punkte hoch. Die beiden unteren teilen sich den Rest des Bildschirmes im Verhältnis 2:1. Jede Zeile oder Spalte muss nun mit einer HTML-Seite verknüpft werden, da sonst keine Inhalte angezeigt würden. Deshalb fügt man für jeden Rahmen das Tag ein. Mit dem Attribut SRC kann man nun die Datei angeben, die im Rahmen erscheinen soll. Für den Fall, dass noch nicht alles klar geworden ist, möchten wir die Möglichkeiten, die Rahmen bieten, an einem Beispiel verdeutlichen. Dazu benötigen wir jetzt erst einmal drei Dateien, die in den Rahmen angezeigt werden können. Bitte erstellen Sie die drei Seiten a.htm , b.htm und c.htm, die immer nur einen Buchstaben anzeigen sollen. Die erste Seite würde also so aussehen:

Listing 10.1: Diese Seite gibt ein A aus

A

Für die folgenden Dateien können Sie nun einfach die beiden Buchstaben A durch B und C ersetzen. Nun benötigen wir noch eine Seite, die Rahmen erzeugt. Wir nennen sie einfach rahmen.htm: Listing 10.2: Eine Frame erzeugende Seite, die zwei Frames erstellt



Betrachten wir die Browseranzeige:

218

JavaScript Kompendium

Eine Seite in Rahmen unterteilen

Kapitel 10 Abbildung 10.1: Die Definition von Rahmen erlaubt es, mehrere Seiten gleichzeitig darzustellen.

Sie können die Ränder der einzelnen Rahmen in diesem Beispiel beliebig verstellen, indem Sie die Trennlinien mit der Maus bewegen. Wenn dem Betrachter diese Möglichkeit nicht eingeräumt werden soll, können Sie in das Attribut noresize einfügen. Sie haben sicher schon gemerkt, dass der Browser normalerweise immer einen kleinen Rand an den Seiten sowie oben und unten frei lässt. Wenn man nun aber Grafik oder Text direkt an den Rand des Rahmens bringen möchte, benötigt man weitere Attribute. Das ist zum Beispiel notwendig, wenn der Rahmen relativ klein ist und komplett mit einer Grafik ausgefüllt werden soll. Das Attribut marginheight bestimmt daher die Größe des oberen und unteren Randes. Mit marginwidth kann man zusätzlich auch die Seitenränder festlegen. Diese Attribute erwarten die Anzahl der Pixel, die für die Ränder festgelegt werden sollen. Diese müssen allerdings größer als Null sein. Der Wert Eins ist also die kleinste mögliche Rahmenbreite. Es kann natürlich sein, dass die Größe eines Rahmens nicht ausreicht, um alle Informationen darin anzuzeigen. Das kommt zum Beispiel vor, wenn der Rahmen zu klein, die Auflösung zu niedrig oder der Inhalt einfach zu groß ist. Natürlich gibt es hierfür eine Lösung: Scrollbalken, die auch Bildlaufleisten genannt werden. Ein Browser kann diese bei Bedarf auch für Ihre Rahmen erstellen. Das Attribut SCROLLING kann nun bestimmen, wie sich der Browser hinsichtlich dieser Balken verhalten soll. Zu diesem Attribut gibt es drei verschiedene Werte:

JavaScript Kompendium

219

Kapitel 10 Tabelle 10.1: Die Werte des Attributes SCROLLING bei Rahmen.

Rahmen

Wert

Auswirkung

auto

Bei Bedarf wird ein solcher Scrollbalken eingefügt.

yes

Es wird in jedem Fall eine Bildlaufleiste angezeigt.

no

Auch wenn eine Leiste nötig wäre, wird keine angezeigt.

10.1.1

Rahmen gezielt ansprechen

Da nun mehrere Seiten gleichzeitig auf dem Bildschirm erscheinen und alle mit Verknüpfungen versehen sein können, muss man ein paar Aspekte bei Verknüpfungen in einer rahmenfähigen Seite beachten. Woher soll der Browser wissen, in welchem Rahmen die Seite aufgebaut werden soll, auf welche die Verknüpfung verweist? Eine simple Regel wird er auf jeden Fall immer befolgen, denn wenn nichts anderes vorgegeben wurde, wird eine neue Seite immer in dem Rahmen aufgebaut, von dem aus die Verknüpfung aktiviert wurde. Wenn Sie jetzt also in die Seite a.htm die folgende Verknüpfung in den Körper einfügen, wird der Browser die Datei c.htm in dem Rahmen anzeigen, in dem zuvor die Seite a.htm erschien. Listing 10.3: Der Seite A wurde ein Link auf Seite C hinzugefügt.

A
Zur Seite C.


In vielen Fällen möchte man aber eine Seite in einem anderen Rahmen öffnen. Deshalb kann man jedem einen Namen geben. Das Attribut NAME ist dafür zuständig. Sie könnten die Datei rahmen.htm also ohne weiteres so abändern und als rahmen2.htm abspeichern: Listing 10.4: Die einzelnen -Tags haben Namen bekommen.

220



JavaScript Kompendium

Eine Seite in Rahmen unterteilen

10.1.2

Kapitel 10

Browser ohne Rahmenunterstützung

Die Rahmen sind erst mit neueren Versionen des Netscape Navigators und des Microsoft Internet Explorers eingeführt worden. Es gibt also noch einige ältere Browser, die keine Rahmen unterstützen. Wenn so ein Browser auf eine Rahmenseite treffen würde, könnte er nicht interpretieren und würde nur einen leeren Bildschirm anzeigen. Deshalb wurde in allen rahmenfähigen Browsern ein weiteres Tag eingeführt, das einen Bereich angibt, in dem HTML-Text angegeben wird, der in einem alten Browser angezeigt werden soll. Es heißt und wird wie im folgenden Beispiel angewendet: <html> <head> <title>Ein Rahmenbeispiel</title> </head> <frameset rows=20%,80%> <frame src="menu1.htm" name="menu"> <frame src="a.htm" name="anzeige"> </frameset> &lt;noframes> <head> <title>Ein Rahmenbeispiel (leider ist Ihr Browser zu alt)</title> </head> <body> <center> ACHTUNG!<p> SIE BENUTZEN EINEN BROWSER, DER KEINE RAHMEN UNTERSTÜTZT. BITTE KLICKEN SIE <a href="a.htm" rel="nofollow">HIER</a>, UM ZU EINER VERSION OHNE RAHMEN ZU GELANGEN!<p> </center> </body>

Listing 10.5: Meldung für Browser, die keine Frames unterstützen

Dieser Browser unterstützt keine Rahmen und zeigt den noframes-Teil an (siehe Abbildung 10.2): Ein Anwender eines alten Browsers sieht also den Hinweis, der im Bereich <noframes> ... eingetragen ist. Man kann dort ganz einfach eine Verknüpfung auf eine Seite einfügen, die keine Rahmen enthält.

JavaScript Kompendium

221

Kapitel 10

Rahmen

Abbildung 10.2: Auch wenn es kaum noch Anwender mit so alten Browsern gibt, empfiehlt es sich, extra für diese eine Mitteilung zu generieren.

10.1.3

Rahmen-Referenz

Tag / Attribut

222

2.0

3.0

3.2

4.0

Internet Explorer

Netscape

X

3.0A1

2.0

application

5.0

bordercolor

4.0B2

3.0B5

3.0A1

3.0B5

frameborder

X

longdesc

X

marginheight

X

3.0A1

2.0

marginwidth

X

3.0A1

2.0

name

X

3.0A1

2.0

noresize

X

3.0A1

2.0

scrolling

X

3.0A1

2.0

src

X

3.0A1

2.0

JavaScript Kompendium

Eine Seite in Rahmen unterteilen

Kapitel 10

Mit diesem Tag erzeugt man einen Rahmen innerhalb von … . Die Attribute dieses Tags wirken sich auf den einzelnen Rahmen aus. application Gibt an, ob der Inhalt des Frames eine HTA (HTML-Application) ist und somit von den Internet-Explorer-Sicherheitsbestimmungen befreit ist. Wert

Bedeutung

no

Die Sicherheitsbestimmungen bleiben unverändert.

yes

Der Inhalt dieses Rahmens ist vertrauenswürdig.

Tabelle 10.2: Die Werte von application in

bordercolor Hier wird die Farbe des Frame-Rahmens festgelegt. Gültig sind RGB-Werte und bei vielen Browsern vordefinierte Farbwerte (siehe Anhang D). Eventuell zuvor durch festgelegte Werte werden überschrieben. frameborder Gibt an, ob ein Rahmen um den Frame gezogen werden soll. (Dieser wird aber nur ausgeschaltet, wenn alle Frames, die an dem Rahmen liegen, diesen ausgeschaltet haben.) Wert

Bedeutung

0

Der Rahmen wird ausgeschaltet. (Netscape)

1

Der Rahmen wird eingeschaltet. (Netscape)

no

Der Rahmen wird ausgeschaltet. (Microsoft)

yes

Der Rahmen wird eingeschaltet. (Microsoft)

Tabelle 10.3: Die Werte des Attributs frameborder in

longdesc Gibt eine Adresse an, die eine längere Beschreibung zum Inhalt des Rahmens liefert. marginheight Gibt den oberen und unteren Abstand vom Rahmen des Frames zum Text an. Der Wert muss größer als 0 sein und wird in Bildpunkten angegeben.

JavaScript Kompendium

223

Kapitel 10

Rahmen marginwidth Gibt den linken und rechten Abstand vom Rahmen des Frames zum Text an. Der Wert muss größer als 0 sein und wird in Bildpunkten angegeben. name Gibt dem Frame einen Namen, mit dem andere Tags ihn mit ihrem targetAttribut ansprechen können. noresize Dieses allein stehende Attribut verbietet die Größenänderung des Frames. scrolling Gibt an, ob Scrollbalken angezeigt werden sollen.

Tabelle 10.4: Die Werte von scrolling in

Wert

Bedeutung

auto

Scrollbalken bei Bedarf einblenden.

no

Nie Scrollbalken einblenden.

yes

Immer Scrollbalken einblenden.

src Gibt den URL der Seite an, die im Frame dargestellt werden soll. Tag / Attribut

4.0

Internet Explorer

Netscape

X

3.0A1

2.0

border

4.0B1

3.0B5

bordercolor

4.0B2

3.0B5

3.0A1

2.0

frameborder

3.0A1

3.0B5

framespacing

3.0A1



cols

rows

2.0

3.0

3.2

X

X

3.0A1

2.0

Dieses Tag gibt an, dass diese Seite Rahmen erzeugen soll. Es ersetzt das -Tag und enthält -Tags sowie evtl. weitere -Anweisungen. 224

JavaScript Kompendium

Eine Seite in Rahmen unterteilen

Kapitel 10

border Dieses Attribut wird im äußersten -Tag definiert und gibt die Rahmenstärke für alle Frames in Pixel an. Ist der Wert 0, so wird in allen Frames ein frameborder=no erzwungen. bordercolor Hier wird die Farbe des Frame-Rahmens festgelegt. Gültig sind RGB-Werte und bei vielen Browsern vordefinierte Farbwerte (siehe Anhang B). cols Gibt die Breiten der einzelnen Spalten durch Kommata getrennt an. Wert

Bedeutung

Positive, ganze Zahlen

Breite in Bildpunkten.

Prozentualwert

Prozentuale Breite der aktuellen Frames.

*, 2*, ...

Anteile der zur Verfügung stehenden Restbreite.

Tabelle 10.5: Die Werte von cols in

frameborder Gibt an, ob ein Rahmen um den Frame gezogen werden soll. (Dieser wird aber nur ausgeschaltet, wenn alle Frames, die an dem Rahmen liegen, diesen ausgeschaltet haben.) Wert

Bedeutung

0

Der Rahmen wird ausgeschaltet. (Netscape)

1

Der Rahmen wird eingeschaltet. (Netscape)

no

Der Rahmen wird ausgeschaltet. (Microsoft)

yes

Der Rahmen wird eingeschaltet. (Microsoft)

Tabelle 10.6: Die Werte des Attributs frameborder in

framespacing Gibt die Breite der Lücke zwischen einzelnen Frames in Bildpunkten an. rows Gibt die Höhen der einzelnen Zeilen durch Kommata getrennt an.

JavaScript Kompendium

225

Kapitel 10 Tabelle 10.7: Die Werte von rows in

Rahmen

Wert

Bedeutung

Positive, ganze Zahlen

Breite in Bildpunkten.

Prozentualwert

Prozentuale Breite der aktuellen Frames.

*, 2*, ...

Anteile der zur Verfügung stehenden Restbreite.

<noframes> Tag / Attribut <noframes>

2.0

3.0

3.2

4.0

Internet Explorer

Netscape

X

3.0A1

2.0

Dieses Tag markiert Quellcode, der nur ausgeführt werden soll, falls der Browser das Tag nicht verarbeiten kann.

10.2

Menüs in einer Rahmenseite

Nachdem unsere Rahmen nun Namen bekommen haben, können wir sie mit JavaScript einfach ansprechen und zum Beispiel folgendes kleines Menü im Rahmen "menu" realisieren: Listing 10.6: Ein Menü das mit Rahmen arbeitet

226

<script language="JavaScript"> function wechsel(URL) { parent.anzeige.location.href = URL; }


JavaScript Kompendium

Menüs in einer Rahmenseite

Kapitel 10

Speichern Sie diese Datei als menu1.htm ab und laden Sie die rahmen2.htm in Ihrem Browser. Sie sollten nun folgendes Bild sehen: Abbildung 10.3: Ein Menü, das mit einer Frameseite arbeitet.

Manchmal ist es sinnvoll, dem Benutzer die Möglichkeit zu geben, Navigationsknöpfe auch in der Menüstruktur einer Webseite nutzen zu können. Hierfür bedienen wir uns einfach des History-Objektes, das ja bekanntlich die Adressen der zuletzt besuchten Seiten abspeichert und JavaScript zur Verfügung stellt. Eine abgeänderte Version unseres Menüs würde dann folgendermaßen aussehen: <script language="JavaScript"> function wechsel(URL) { parent.anzeige.location.href = URL; }


JavaScript Kompendium

Listing 10.7: Ein Menü mit Vorwärts- und ZurückButtons, die das History-Objekt nutzen

227

Kapitel 10

Rahmen


Im Browser sehen wir nun im menu-Rahmen zwei Knöpfe mehr: Abbildung 10.4: Ein Menü, mit dem das History-Objekt genutzt werden kann.

Die Buttons »Vorwärts« und »Zurück« veranlassen den Browser hierbei immer einen Eintrag im History-Objekt vor- oder zurückzugehen. Diese Art der Menüführung ist vor allem für Webseiten interessant, die in Fenstern ausgeführt werden, in denen die normalen Vor- und Zurückknöpfe nicht zur Verfügung stehen.

10.2.1

Mehrere Frames auf einmal ändern

Es gibt auch Menüstrukturen, in denen es wichtig ist, dass sich nicht nur der Frame mit der Anzeigeseite, sondern auch noch der Frame mit dem Menü ändert. Um also zwei Frames auf einmal zu verändern, müssen wir unser Script folgendermaßen abändern:

228

JavaScript Kompendium

Menüs in einer Rahmenseite <script language="JavaScript"> function wechsel(URL) { parent.anzeige.location.href = URL; } function wechselZwei(URL1, URL2) { parent.anzeige.location.href = URL1; parent.menu.location.href = URL2; }


Kapitel 10 Listing 10.8: So ändern Sie mehrere Frameinhalte auf einmal

Hier würde in den Frame anzeige die Seite b.html geladen und der Frame, in dem vorher das Menü stand, zeigt die Seite a.html an.

JavaScript Kompendium

229

11

Multimedia

In diesem Kapitel wenden wir uns Multimedia-Elementen wie Grafiken, Videos und Musik zu.

11.1

Farben

Irgendwie war alles, was wir bisher entworfen haben, ziemlich farblos. Es wird langsam Zeit, dass etwas Farbe ins Spiel kommt. Vielleicht fragen Sie sich: »Was hat dieses Thema mit dem Begriff Multimedia zu tun?« Die Antwort lautet: »Eigentlich nicht viel, aber hier ist die sinnvollste Stelle im Buch, um sich mit Farben auseinander zu setzen.« Zuerst sollten wir einmal untersuchen, wie ein Computer Farben darstellt. Wie werden Farben erzeugt? Eine Farbe kann man in drei Grundfarben zerlegen. Da der Monitor Licht ausstrahlt, handelt es sich hier um die Grundfarben der additiven Farbmischung. Diese sind Rot, Grün und Blau. Wenn man zum Beispiel eine rote, ICON ANFANG eine grüne und eine blaue Lampe auf einen Punkt richten würde, wäre das Licht, das ankommt, weiß. Wenn man nun die Lampen unterschiedlich hell einstellen könnte, ließen sich fast alle Farben erzeugen. Man kann also eine Farbe anhand der Helligkeit der Anteile Rot, Grün und Blau eindeutig definieren. Man spricht hier von der RGB-Kodierung. Jeder Farbanteil kann einen Wert zwischen 0 und 255 haben. Man gibt diese Zahl in der hexadezimalen Schreibweise, also im Sechzehnersystem, an. Hier sind Werte zwischen 00 und FF möglich. Wenn Sie noch nie in diesem System gerechnet haben, haben wir diese Zahlen zur Orientierung für Sie im Anhang E aufgelistet. Damit Sie eine ungefähre Vorstellung bekommen, wie welche Farben dargestellt werden, haben wir hier die wichtigsten zusammengestellt: Farbe

RGB-Kodierung

Schwarz

00 00 00

Weiß

FF FF FF

JavaScript Kompendium

Tabelle 11.1: Die wichtigsten Farben und ihre Kodierungen

231

Kapitel 11 Tabelle 11.2: Die wichtigsten Farben und ihre Kodierungen (Forts.)

Multimedia

Farbe

RGB-Kodierung

Rot

FF 00 00

Grün

00 FF 00

Blau

00 00 FF

Gelb

FF FF 00

Braun

99 66 33

Zyan

00 FF FF

Lila

FF 00 FF

Dunkles Lila

80 00 80

Dunkelrot

80 00 00

Dunkelgrün

00 80 00

Dunkelblau

00 00 80

Hellgrau

C0 C0 C0

Grau

A0 A0 A0

Dunkelgrau

80 80 80

Eine komplette Tabelle finden Sie im Anhang D.

11.1.1

Textfarben ändern

Wir haben ja bereits in einem vorherigen Kapitel kennen gelernt. Hier ist ein weiteres Attribut namens color möglich. Damit können wir die Textfarbe bestimmen. Einige Browser unterstützen tatsächlich nur die RGBKodierung. Deshalb sollten Sie die Farbe auch in dieser Form angeben.

Dieses Tag würde also vor einem Text stehen, der gelb angezeigt werden soll. Bitte beachten Sie, dass ein Doppelkreuz (#) vor den Werten der einzelnen Farbanteile stehen muss, damit der Browser erkennt, dass es sich hier um RGB-Kodierung handelt. Neue Browser verstehen aber auch ausgeschriebene, englische Farbnamen. Sie erreichen Ihr Ziel demnach auch mit:

Bitte entnehmen Sie die englischen Namen und deren RGB-Kodierungen der Tabelle in Anhang D. 232

JavaScript Kompendium

Farben

Kapitel 11

Sie haben sicherlich schon gemerkt, dass Verknüpfungen in einer eigenen Farbe dargestellt werden. Diese Farbe kann man selbst auch in der Marke festlegen. Dazu gibt man einfach zu dem Attribut link die gewünschte Farbe an. Sie können dem Attribut vlink auch eine Farbe zuweisen. Diese wird dann für Verknüpfungen verwendet, welche Sie bereits besucht haben. Auch an alink kann eine Farbe übergeben werden. Sie wird dann für Links verwendet, die auf die aktuelle Seite zeigen. Ein weiteres Attribut ist text. Sie können ihm die Farbe für normalen Text zuweisen.

Wenn ein Körper so beginnt, wird normaler Text in Weiß, Verknüpfungen werden in Grün, besuchte Verknüpfungen in Rot und Verknüpfungen auf diese Seite selbst in Blau angezeigt.

11.1.2

Hintergrundfarbe

Wenn Sie den grauen bzw. weißen Hintergrund nicht mögen, können Sie ganz einfach eine andere Farbe wählen. Sie wird wieder in der Marke definiert und muss dem Attribut bgcolor zugewiesen werden.

Diese Seite erhält also einen Hintergrund in der Farbe Rosa. Man kann sogar den Hintergrund für einzelne Tabellenzellen definieren, indem man das Attribut bgcolor im Tag für den Tabelleninhalt einfügt. Damit kann man also eine Tabelle erzeugen, welche die wichtigsten Farben und ihre RGB-Kodierung darstellt. Der Quellcode für diese Tabelle sieht dann zum Beispiel so aus:

JavaScript Kompendium

Listing 11.1: Die Grundfarben

233

Kapitel 11

Multimedia
Schwarz	00 00 00	Lila	FF 00 FF
Weiß	FF FF FF	dunkles Lila	80 00 80
Rot	FF 00 00	Dunkelrot	80 00 00
Grün	00 FF 00	Dunkelgrün	00 80 00
Blau	00 00 FF	Dunkelblau	00 00 80
Gelb	FF FF 00	Hellgrau	C0 C0 C0
Braun	99 66 33	Grau	A0 A0 A0
Zyan	00 FF FF	Dunkelgrau	80 80 80


11.2

Grafiken

Mit aktuellen Browsern kann man nicht nur Texte anzeigen, sondern auch Grafiken. Damit können Sie Ihre Homepage auflockern und ihr auch einen professionellen Anstrich geben. Die Möglichkeiten sind fast unbegrenzt.

11.2.1

Grafiken anzeigen

Alle gängigen Browser können Bilder in den Formaten .gif und .jpg beziehungsweise .jpeg anzeigen. Bevor man Bilder in eine Seite einbindet, sollte man sie möglichst in eines dieser Formate konvertieren, wenn sie noch nicht so vorliegen. Dazu kann man zum Beispiel eine Grafik in ein Zeichenprogramm einladen und einfach in einem der beiden Formate wieder abspeichern. Sie sollten auch beachten, dass die Grafiken nicht zu groß werden, denn es dauert über das Internet immer etwas länger, alle Bilder zu laden. 234

JavaScript Kompendium

Grafiken

Kapitel 11

Schauen Sie sich also nach dem Hochladen noch einmal Ihre Seite über eine Internetverbindung an und entscheiden Sie, ob die Seite schnell genug aufgebaut wird. Wenn ANFANG man nun eine Grafik in eine Seite einbinden möchte, muss man ICON verwenden. Darin gibt man dem Attribut src den Namen der Grafik an. Das würde also zum Beispiel so aussehen:

ICON ENDE



Wenn man ein Bild verwenden möchte, das irgendwo auf einem ganz anderen Rechner liegt, kann man auch eine komplette Adresse angeben:

Wie Sie wissen, sind ältere Browser noch nicht grafikfähig. Speziell für diese Programme kann man das Attribut alt hinzufügen. Man kann ihm einen Text zuordnen, der bei den alten Browsern anstelle des Bildes angezeigt wird.

Hier würde also in einem modernen Browser die Grafik ein_bild.gif angezeigt. Ein alter Browser, der keine Bilder anzeigen kann, würde nur das Wort »Bild« ausgeben. Neue Browser zeigen den Text des alt-Attributs an, wenn man die Maus über das Bild fährt und sie etwa zwei Sekunden nicht bewegt. So kann man also zusätzliche Informationen zu Bildern und Grafiken einbinden, die nicht auf Anhieb sichtbar sind, aber trotzdem abgerufen werden können. Dies macht zum Beispiel Sinn, wenn die grafische Gestaltung durch Text unnötig gestört würde.

11.2.2

Grafiken ausrichten

In vielen Fällen möchte man ein Bild in eine Seite einbauen und trotzdem Text direkt daneben anzeigen lassen. Dabei empfiehlt es sich, die Ausrichtung des Textes zum Bild festzulegen. Dafür ist das Attribut align von zuständig. Es kann drei Werte annehmen: Wert

Auswirkung

top

Der Text wird am oberen Rand des Bildes ausgerichtet.

middle

Der Text wird zur Mitte des Bildes ausgerichtet.

bottom

Der Text wird am unteren Rand des Bildes ausgerichtet.

Tabelle 11.3: Die Werte des Attributs align für Bilder

Sie sehen, dass nicht das Bild zum Text, sondern der Text zum Bild ausgerichtet wird. Zur Demonstration des align-Attributs können Sie die folgende Seite anzeigen lassen: JavaScript Kompendium

235

Kapitel 11 Listing 11.2: Die verschiedenen Ausrichtungen von Text zu Grafiken

Multimedia Dieser Text wird am oberen Rand des Bildes ausgerichtet.
Dieser Text wird zur Mitte des Bildes ausgerichtet.
Dieser Text wird am unteren Rand des Bildes ausgerichtet.


Diese Seite wird so aussehen: Abbildung 11.1: Die verschiedenen Ausrichtungen von Text zu einer Grafik.

236

JavaScript Kompendium

Grafiken

Kapitel 11

Wenn man Text neben ein Bild legt, der über den Rand des Browserfensters hinausragt, gibt es ein Problem. Der Text wird nicht mehr komplett neben dem Bild angezeigt, sondern nach dem Zeilenumbruch unter dem Bild fortgesetzt. Wir empfehlen daher, Bilder und Texte in eine Tabelle einzufügen, da man diese wesentlich genauer ausrichten kann und der Text in seiner Zelle bleibt. Wenn Ihnen ein Bild zu groß oder zu klein erscheint, können Sie mit den Attributen height und width in die Höhe und Breite des Bildes verändern. Hier können Sie wie gewohnt direkt die Anzahl der Pixel oder den prozentualen Anteil der Bildschirmbreite bzw. -höhe angeben. Wenn Sie nur eines der Attribute verwenden, wird das Bild in der anderen Richtung der Größenänderung angepasst.




Listing 11.3: Verschiedene Grafikgrößen

Schauen wir uns das Ergebnis im Browser an: Abbildung 11.2: Die Größe einer Grafik lässt sich exakt festlegen.

JavaScript Kompendium

237

Kapitel 11

Multimedia

11.2.3

Grafiken als Anker für Links nutzen

Sie können natürlich auch Grafiken mit ... umschließen. Dann wird die angegebene Verknüpfung auf das Bild angewendet.

Dieses Beispiel wird wie gewohnt das Bild darstellen. Wenn man es nun aber anklickt, wird man zu der Seite von Markt+Technik gelangen. Dieses Bild ist von einem farbigen Rahmen umgeben, der anzeigt, dass zu diesem Bild eine Verknüpfung definiert wurde. Er hat die gleiche Farbe wie die anderen Links auf der Seite. Wenn Sie dieser Rahmen stört, können Sie ihn auch mit dem Attribut border ausschalten. Es wird in verwendet. Wenn man ihm den Wert Null zuordnet, verschwindet der Rahmen. Sie können übrigens mit animierten .gif-Dateien besonders schöne Effekte erzielen. Dieses Thema ist aber nicht Bestandteil eines HTML-Kurses, sondern gehört eher in ein Buch zum Thema Web Publishing. ICON ICONANFANG

ENDE

Listing 11.4: Ein Hintergrundbild

11.2.4

Hintergrundgrafiken

Die Hintergrundfarbe können Sie bereits verändern. In vielen Fällen ist das aber nicht ausreichend. Ein gemusterter oder texturierter Hintergrund ist dann die Lösung:
Der komplette Hintergrund ist mit der Grafik ausgefüllt.


Wie Sie sehen, kann man dem Attribut background im Tag direkt den Dateinamen der Grafik übergeben, die als Hintergrundbild angezeigt werden soll. Bitte beachten Sie, dass die Textfarbe möglichst nicht in der Hintergrundgrafik vorkommt, da man sonst schlecht lesen kann, was auf Ihrer HTMLSeite geschrieben steht. Achten Sie auch darauf, dass Sie bei einer hellen Textfarbe eine möglichst dunkle Hintergrundfarbe und umgekehrt verwenden.

238

JavaScript Kompendium

Grafiken

Kapitel 11 Abbildung 11.3: Der Hintergrund des Browsers kann mit einer Grafik verschönert werden.

Wenn Sie ein wenig mehr Text auf Ihrer Seite darstellen oder den Browser weiter verkleinern, bis ein Scrollbalken auf der rechten Seite erscheint, können Sie das Bild nach oben und unten verschieben. Sie werden feststellen, dass sich der Hintergrund immer mit verschiebt. Das kann man übrigens auch unterbinden: Fügen Sie dem -Tag das Attribut bgproperties mit dem Wert fixed ein. Das sieht dann so aus:

Sie werden nun beim Scrollen feststellen, dass der Hintergrund fest stehen bleibt und nur der Text fließt wie auf einer Transparentfolie darüber.

11.2.5

Videos

Genauso wie man Grafiken in Dokumente einfügen kann, ist es bei neuen Browsern auch möglich, ganze Videos abzuspielen. Hier sollte man sich vorher natürlich gut überlegen, wie groß das gesamte Video werden darf, denn es kann erst abgespielt werden, wenn es komplett übertragen worden ist. Das heißt für den Betrachter, dass er unter Umständen eine ganze Weile warten muss, bevor er in den Genuss Ihres Videos kommt. Viele InternetAnwender haben aber keine unerschöpfliche Geduld und brechen den Vorgang vorher ab. Ein Video liegt üblicherweise im Format .avi vor. Man verwendet hier ebenfalls , um eine Videodatei einzubinden. Das bereits bekannte Attribut src sollte möglichst immer den Dateinamen des Startbildes enthalten, denn alle Browser, die keine Videos verarbeiten können, werden dann

JavaScript Kompendium

239

Kapitel 11

Multimedia dieses Bild anzeigen, wenn es sich nicht gerade um einen reinen Text-Browser handelt. Dafür kann man ja immer noch das Attribut alt mit einer Textbeschreibung hinzufügen. Die Videodatei übergibt man dann einfach an das Attribut dynsrc. Diese Vorgehensweise funktioniert bisher nur im Internet-Explorer!

Angenommen, Sie haben einen Film namens ein_film.avi und eine weitere Datei, die ein_film.jpg heißt und das Startbild des Films enthält. Dann tesICON ANFANG ten Sie einmal die folgende HTML-Seite: Listing 11.5: Die Einbindung eines Videos


Jetzt kommt ein Video...


Man kann auch für Videos die Attribute height und width verwenden. Sie sind wie gewohnt einzusetzen. Wie Sie bereits gesehen haben, ist es dem Anwender nicht möglich, den Ablauf des Videos zu steuern, wenn Sie es wie im vorherigen Beispiel einbinden. Falls Sie aber dem Betrachter diese Möglichkeit einräumen möchten, können Sie das Attribut controls einfügen. Es genügt, dieses Attribut in einzufügen. Sie brauchen also keinen Wert zu übergeben.

Hier kann der Betrachter anhand der entsprechenden Buttons den Ablauf des Videos beeinflussen. Wenn Sie das Beispiel mit einem videofähigen Browser ansehen konnten, werden Sie festgestellt haben, dass der Film einmal durchgelaufen ist und dann anhielt. Sollten Sie aber eine Wiederholung wünschen, können Sie dieses direkt angeben. Das Attribut loop ist für diese Option zuständig.

240

JavaScript Kompendium

Grafiken

Kapitel 11

Dieses Video würde also nach dem ersten Abspielen noch zweimal wiederholt. Sie können aber mit loop=-1 auch eine endlose Wiederholung erzeugen. Mit loopdelay steht Ihnen die Möglichkeit offen, eine Wartezeit zwischen den Wiederholungen zu erzwingen. Diese wird in Millisekunden angegeben.

Dieses Beispiel würde also ein Video einfügen, das sich ständig wiederholt und eine Wartezeit von drei Sekunden zwischen den Wiederholungen einhält. Abschließend steht Ihnen noch die Möglichkeit offen, den Start des Videos festzulegen. Hier hilft das Attribut start. Es kann zwei Werte annehmen: Wert

Auswirkung

fileopen

Das Video startet, nachdem die gesamte Seite geladen wurde.

mouseover

Hier wird der Film erst dann abgespielt, wenn der Benutzer den Mauszeiger in das Videofenster hineinbewegt.

11.2.6

Tabelle 11.4: Die Werte des Attributs start bei Videos

Grafik-Referenz

In diesem Referenzteil finden Sie alles über die Grafikeinbindung. <area> Tag / Attribut <area>

2.0

3.0

3.2

4.0

Internet Explorer

Netscape

X

X

1.0

2.0

X

accesskey alt

X

X

4.0B2

3.0

coords

X

X

1.0

2.0

href

X

X

1.0

2.0

nohref

X

X

1.0

2.0

shape

X

X

1.0

2.0

tabindex

X

4.0B1

target

X

3.0A1

2.0

Dieses Tag wird benötigt, um so genannte clientseitige Imagemaps zu erstellen. Man kann darin Hot-Areas erzeugen.

JavaScript Kompendium

241

Kapitel 11

Multimedia accesskey Mit accesskey können Sie einen so genannten Tasten-Shortcut definieren, mit dem der Link erreichbar ist. Ordnen Sie dem Attribut einen einzigen Buchstaben zu und er wird ausgeführt, wenn Sie diese Taste mit der zugehörigen Shortcut-Taste drücken, die von Browser und Betriebssystem abhängt. alt Der Wert dieses Attributs wird ausgegeben, wenn der Browser <area> nicht kennt. Das ist zum Beispiel bei alten Textbrowsern der Fall. coords Gibt die Koordinaten für den Ankerbereich des Links in einer Imagemap an. Je nach Wert des Attributs shape werden die Koordinaten so angegeben (immer in Bildpunkten von der linken oberen Ecke des Bildes aus):

Tabelle 11.5: Übergabeformat an coords je nach Wert von shape

Wert von shape

Übergabeformat an coords

rectangle

"links, oben, rechts, unten"

circle

"Mittelpunkt X, Mittelpunkt Y, Radius"

polygon

"Punkt1 X, Punkt1 Y, Punkt2 X, Punkt2 Y, ..."

href Gibt das Ziel des Links an. Darf nicht zusammen mit nohref gesetzt werden! nohref ICON ANFANG

Wenn Sie kurzfristig einen <area>-Link ausschalten möchten, können Sie statt href dieses allein stehende Attribut verwenden. shape Hier wird die geometrische Form des Ankerbereichs in Imagemaps festgelegt. Mögliche Werte sind default (Standardwert), rectangle (Rechteck), circle (Kreis) und polygon (Vieleck). tabindex Gibt den Tab-Index der Hot-Area an. Positive Werte stehen für die Position der Area in der Liste der mit (ÿ__) aktivierbaren Objekte. Negative Werte bedeuten, dass die Hot-Area nicht im Tab-Index auftaucht.

242

JavaScript Kompendium

Grafiken

Kapitel 11

target Hier wird der Name des Zielframes eingetragen, in dem das Ziel des Links angezeigt werden soll. Tag / Attribut 2.0

3.0

3.2

4.0

Internet Explorer

Netscape



X

X

X

X

1.0

1.0

align

X

X

X

X

1.0

1.0

alt

X

X

X

X

1.0

1.0

X

X

1.0

1.0

border controls

2.0

dynsrc

2.0 X

height hspace ismap

X

X

X

X

1.0

1.0

X

X

1.0

1.0

X

X

1.0

1.0

X

longdesc loop

2.0

lowsrc

4.0B1

1.0

X

4.0

3.0

X

1.0

1.0

name src

X

X

X

2.0

start

4.0

suppress X

usemap

X

2.0

2.0

vrml vspace width

1.0

X

X

X

1.0

1.0

X

X

1.0

1.0

Dieses Tag ist die Standardvariante, Bilder, Grafiken und Videos in eine HTML-Seite einzufügen.

JavaScript Kompendium

243

Kapitel 11

Multimedia align Gibt die Ausrichtung des Textes an, der dem Bild folgt.

Tabelle 11.6: Die Werte von align in

Wert

Bedeutung

middle

Der Text wird vertikal mittig ausgerichtet.

left

Der Text wird nach links ausgerichtet.

right

Der Text wird nach rechts ausgerichtet.

top

Der Text wird nach oben ausgerichtet.

bottom

Der Text wird nach unten ausgerichtet.

alt Der Wert dieses Attributs wird ausgegeben, wenn der Browser nicht kennt. Das ist zum Beispiel bei alten Textbrowsern der Fall. border Gibt die Breite des Rahmens an, der um ein Bild herum angezeigt wird, wenn es als Anker für einen Link dient. Er erhält die Farbe, die ein normaler Textlink haben würde. controls Dieses allein stehende Attribut gibt an, ob der Betrachter der Seite die Kontrolle über den Ablauf eines Videos oder einer sonstigen Datenquelle, die über dynsrc definiert wurde, erhalten soll. dynsrc Dieses Attribut gibt die Adresse eines Videos an, das durch dieses Tag abgespielt werden soll. height Gibt die Höhe des Bildes in Pixel oder als prozentualen Wert der Höhe des Browserfensters an. hspace Gibt den linken und rechten Abstand des Bildes zu allen anderen HTMLKomponenten in Bildpunkten an.

244

JavaScript Kompendium

Grafiken

Kapitel 11

ismap Dieses allein stehende Attribut gibt an, dass für dieses Bild Hot-Areas definiert wurden, die per Klick aktiviert werden können. longdesc Gibt eine Adresse an, die eine längere Beschreibung zum Inhalt des Bildes liefert. loop Gibt an, wie oft ein Video wiederholt werden soll. lowsrc Gibt den URL eines Bildes mit niedrigerer Qualität an, das geladen wird, bevor das Bild aus src mit hoher Auflösung nachgeladen wird. name Gibt eine Bezeichnung für das Bild an, um es später über Scriptsprachen ansprechen zu können. src Gibt den URL eines Bildes an, das hier angezeigt werden soll. start Dieses Attribut wird in Zusammenhang mit dynsrc verwendet und gibt an, wann das Video gestartet werden soll. Wert

Bedeutung

fileopen

Das Video wird abgespielt, sobald es komplett heruntergeladen wurde.

mouseover

Das Video wird erst abgespielt, wenn es sowohl komplett heruntergeladen als auch die Maus darüber bewegt wurde.

Tabelle 11.7: Die Werte von start in

suppress Dieses Attribut gibt an, ob die Einblendung eines Icons unterdrückt werden soll, das angezeigt wird, wenn das Bild noch nicht komplett heruntergeladen wurde.

JavaScript Kompendium

245

Kapitel 11 Tabelle 11.8: Die Werte von suppress in

Multimedia

Wert

Bedeutung

false

Das normale Browser bleibt bestehen.

true

Unterdrückt das Icon.

usemap Gibt die Adresse zu den clientseitigen Imagemap-Spezifikationen an. vrml Gibt einen URL zu einer VRML-Welt an und startet ein VRML-Plug-In, falls es installiert ist. vspace Gibt den oberen und unteren Abstand des Bildes zu allen anderen HTMLKomponenten in Bildpunkten an. width Gibt die Breite des Bildes in Pixel oder als prozentualen Wert der Breite des Browserfensters an. <map> Tag / Attribut 2.0

3.0

3.2

4.0

Internet Explorer

Netscape

<map>

X

X

1.0

2.0

name

X

X

1.0

2.0

Dieses Tag wird benötigt, um Imagemaps zu erstellen. Es enthält die HotAreas als <area> und das Bild in mit gesetztem ismap-Attribut. name Hier wird eine Bezeichnung für die Imagemap (die dann auch als Lesezeichen funktioniert) eingetragen, die es ermöglicht, direkt zu dieser Stelle im Dokument zu springen.

11.3

Musik und Geräusche

Bisher haben wir uns viel mit der Optik von HTML-Seiten beschäftigt. Der Aspekt der akustischen Gestaltung kam bisher ein wenig zu kurz. Das ändern wir an dieser Stelle:

246

JavaScript Kompendium

Musik und Geräusche

11.3.1

Kapitel 11

Musik einfügen

Wenn man die Homepage mit Musik ausstatten möchte, kann man in einigen Browsern direkt Hintergrundmusik einbinden. Dazu sollten Sie das Tag verwenden. Darin können Sie mit dem Attribut src die Datei angeben, die abgespielt werden soll. Eine Musikdatei könnte zum Beispiel ein_song.mid heißen. Es handelt sich dabei um eine typische Musikdatei im MIDI-Format (.mid). Die Einbindung in eine HTML-Seite sieht dann so aus: Hier spielt die Musik!

Listing 11.6: Hintergrundmusik

Das Lied ist einmal zu hören und danach wird es wieder still. Sie können allerdings (wie bei Videos) die Attribute loop und loopdelay nutzen.

In diesem Beispiel wird die Musik unendlich oft abgespielt. Dabei wird zwischen den Wiederholungen jeweils eine Pause von einer Sekunde eingelegt.

11.3.2

Geräusche einfügen

Wenn Sie ein Mikrofon an Ihren Computer anschließen können, haben Sie die Möglichkeit, Geräusche oder Ihre Stimme aufzunehmen. Sie können damit so genannte Wave-Dateien erstellen. Sie haben die Dateiendung .wav und können mit einem kleinen Trick in eine Homepage eingebunden werden. Man kann einfach eine Verknüpfung auf diese Datei einfügen, und der Browser wird sie nach der Übertragung abspielen. Allerdings muss der Anwender zuerst auf die Verknüpfung klicken. Eine benutzerfreundlichere Alternative ist das »Einbetten« von Hilfsprogrammen, die solche Dateien abspielen. Dazu verwendet man <embed>, die wie im folgenden Beispiel eingesetzt werden kann: Hier wird ein Geräusch abgespielt.


JavaScript Kompendium

Listing 11.7: Geräusche

247

Kapitel 11

Multimedia <embed src="ein_ger.wav" autostart=true hidden=true>

Das Attribut hidden (versteckt) kann den Wert false oder true annehmen. Wenn man angibt, dass das Hilfsprogramm versteckt werden soll, also hidden=true, erscheint es nicht auf dem Bildschirm. Beim Internet Explorer wird aber der Platz, der für die Anwendung benötigt würde, freigelassen. autostart kann ebenfalls diese beiden Werte annehmen und gibt an, ob die Anwendung direkt gestartet werden soll oder ob der Anwender sie erst aktivieren muss. Sie können eine Vielzahl von Dateitypen mit diesem Befehl einbetten. So ist es zum Beispiel auch möglich, Musik und Videos im Netscape abzuspielen. Wenn Ihre Homepage sowohl für Netscape als auch für den Internet Explorer Musik abspielen soll, können Sie ein JavaScript verwenden, das Sie im Kapitel 19 finden.

11.3.3

Audio-Referenz

Hier finden Sie detaillierte Beschreibungen zu den Tags, die im Zusammenhang mit Audio-Eigenschaften des Browsers stehen. Tag / Attribut

2.0

3.0

3.2

4.0

Internet Explorer



2.0

balance

4.0B1

delay

2.0

loop

2.0

src

2.0

volume

2.0B1

Netscape

Dieses Tag ermöglicht das Abspielen von Hintergrundmusik. balance Mit diesem Attribut kann man die Stereo-Ausrichtung der Musikwiedergabe beeinflussen. Werte zwischen -10000 (links) und 10000 (rechts) sind erlaubt. Mittige Stereoausgabe wird durch den Wert 0 erreicht.

248

JavaScript Kompendium

Musik und Geräusche

Kapitel 11

delay Gibt die Verzögerung vor dem Abspielen und zwischen den Wiederholungen in Millisekunden an. loop Gibt die Anzahl der Wiederholungen an. Gültige Werte sind positive ganze Zahlen oder infinite für eine endlose Wiederholung. src Erwartet die URL einer Audiodatei (.au, .mid oder .wav). volume Gibt die Lautstärke der Musikwiedergabe an. Mögliche Werte sind: -10000 (leise bzw. aus) bis 0 (volle Lautstärke). <embed> Tag / Attribut 2.0

3.0

3.2

4.0

Internet Explorer

Netscape

<embed>

3.0B2

1.1

height

3.0B2

1.1

src

3.0B2

1.1

width

3.0B2

1.1

Dieses Tag dient zur Einbindung von Plug-In-Daten in den Browser. Dabei werden die oben genannten Attribute direkt vom Browser abgefragt und alle weiteren unbehandelt an das Plug-In übergeben. height Gibt die Höhe des Plug-Ins in Bildpunkten oder als prozentualen Wert der Höhe des Browserfensters an. src Gibt den URL der anzuzeigenden Plug-In-Daten an. width Gibt die Breite des Plug-Ins in Bildpunkten oder als prozentualen Wert der Breite des Browserfensters an.

JavaScript Kompendium

249

Kapitel 11

Multimedia <noembed> Tag / Attribut

2.0

3.0

3.2

4.0

<noembed>

Internet Explorer

Netscape

3.0B2

2.0

Dieses Tag wird innerhalb von <embed> ... verwendet. Es markiert Quellcode, der nur ausgeführt werden soll, falls der Browser das Tag <embed> nicht verarbeiten kann.