Das Praxisbuch für Web-Entwickler Ajax JavaScript Ajax fileAjax Jan Winkler 2. aktualisierte...

JavaScript und

Ajax

Jan Winkler

2. aktualisierte Auflage

FRANZIS

> JavaScript-Grundlagen beherrschen und anwenden

> Ajax-Anwendungen verstehen und selbst programmieren

> Inklusive umfassender Objektreferenz zum Nachschlagen

Jan Winkler

Fast alle Webseiten haben eines gemeinsam: Sie bestehen aus JavaScript-,HTML- und CSS-Code. Während HTML und CSS stagnieren, hat sich Java-Script mit Ajax zur dominierenden Web-2.0-Technik weiterentwickelt.Dieses Buch vermittelt anhand konkreter Programmierbeispiele dieGrundlagen und einige fortgeschrittene Techniken von JavaScript und Ajax.

� Lernen Sie JavaScript kennen:Statische Websites sind von gestern – mit Hilfe von JavaScriptkönnen Sie den Dialog mit den Besuchern Ihrer Seite deutlichverbessern. Die Grundlagen und die Syntax von JavaScript lassensich schnell erlernen, und mit den zahlreichen Praxisbeispielenaus diesem Buch stellen sich schnell Erfolgserlebnisse ein. Zudemdient die umfassende Objektreferenz als ideales Nachschlagewerk.

� Dynamic HTML:Die DHTML-Technik verknüpft Standard-HTML mit JavaScript undCSS. Sie dient unter anderem dazu, neue Elemente in eine Web-seite einzufügen, ohne die komplette Seite neu in den Browserladen zu müssen. So erstellen Sie zum Beispiel ohne großen AufwandMouseOver-Effekte aller Art. Zudem können Sie Seitenobjektemit DHTML pixelgenau im Browser platzieren, Elemente ein- und ausblenden und auf Ereignisse wie Mausklicks reagieren.

� Komfortable Webanwendungen mit Ajax:Ajax verleiht Internetapplikationen die Benutzerfreundlichkeitlokal installierter Programme. Dieses Buch verrät Ihnen, wie SieAjax in Ihre Seite integrieren, und zeigt Ihnen verschiedene Typenvon Ajax-Anwendungen an konkreten Beispielen: Sie erfahren, wieSie einen interaktiven Warenkorb mit Drag & Drop-Eigenschaftenprogrammieren, eine interaktive Suche entwickeln und ein Chat-Modul realisieren. Außerdem erhalten Sie Einblicke in die wichtigstenAjax-Frameworks, die Sie bei der Entwicklung solcher Applikationenunterstützen.

� Alle Infos stets zur Hand:Die umfassende Objektreferenz bietet Ihnen einen Überblicküber die zentralen Code-Objekte von JavaScript und dessenPendant JScript, das in Microsofts Internet Explorer zuhause ist. Damit haben Sie den Funktionsumfang von JavaScript stets schnell und zuverlässig zur Hand.

Besuchen Sie unsere Website www.franzis.de

35,– EUR [D]

ISBN 978-3-7723-6262-0

JavaScript und

Ajax

Know-howist blau.

Aus dem Inhalt:

• JavaScript-Grundlagen

• JavaScript und Microsofts JScript

• Geeignete Editoren

• Einführung in Dynamic HTML

• Browsertypen erkennen

• Anzeigen und Ausblenden vonWebseitenelementen

• Positionierung von Objekten

• Ajax-Anfragen verschicken

• Ajax-Responses auswerten

• Ajax-Frameworks

• Drop-Down-Menüs programmieren

• Einen Online-Warenkorb entwickeln

• Interaktive Suche

• Popups erzeugen

• Ein Chat-Modul entwickeln

• Mit Cookies arbeiten

• Umfassende JavaScript-Objektreferenz

Java

Scrip

t und

Aja

xW

inkl

er

Das Praxisbuch für Web-Entwickler

Über den Autor:Jan Winkler ist erfolg-reicher Internet-Publisherund leitet ein großes Online-Vermarktungs-unternehmen. Er lebt in Berlin.

Auf www.buch.cd:Sämtliche Programmbeispiele zum Download

FRA

NZI

S



6262-0 U1+U4 30.07.2009 14:48 Uhr Seite 1

Jan Winkler

JavaScript und Ajax

6262-0 Titelei:6262-0 Titelei 30.07.2009 14:49 Uhr Seite 1

Jan Winkler

FRANZIS

Mit 35 Abbildungen

JavaScript und

Ajax




Bibliografische Information der Deutschen Bibliothek

Die Deutsche Bibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie;

detaillierte Daten sind im Internet über http://dnb.ddb.de abrufbar.

Alle Angaben in diesem Buch wurden vom Autor mit größter Sorgfalt erarbeitet bzw. zusammengestellt und unter Einschaltung wirksamer

Kontrollmaßnahmen reproduziert. Trotzdem sind Fehler nicht ganz auszuschließen. Der Verlag und der Autor sehen sich deshalb gezwungen,

darauf hinzuweisen, dass sie weder eine Garantie noch die juristische Verantwortung oder irgendeine Haftung für Folgen, die auf fehlerhafte

Angaben zurückgehen, übernehmen können. Für die Mitteilung etwaiger Fehler sind Verlag und Autor jederzeit dankbar. Internetadressen

oder Versionsnummern stellen den bei Redaktionsschluss verfügbaren Informationsstand dar. Verlag und Autor übernehmen keinerlei Ver-

antwortung oder Haftung für Veränderungen, die sich aus nicht von ihnen zu vertretenden Umständen ergeben. Evtl. beigefügte oder zum

Download angebotene Dateien und Informationen dienen ausschließlich der nicht gewerblichen Nutzung. Eine gewerbliche Nutzung ist nur

mit Zustimmung des Lizenzinhabers möglich.

© 2009 Franzis Verlag GmbH, 85586 Poing

Alle Rechte vorbehalten, auch die der fotomechanischen Wiedergabe und der Speicherung in elektronischen Medien. Das Erstellen und Ver-

breiten von Kopien auf Papier, auf Datenträgern oder im Internet, insbesondere als PDF, ist nur mit ausdrücklicher Genehmigung des Verlags

gestattet und wird widrigenfalls strafrechtlich verfolgt.

Die meisten Produktbezeichnungen von Hard- und Software sowie Firmennamen und Firmenlogos, die in diesem Werk genannt werden, sind

in der Regel gleichzeitig auch eingetragene Warenzeichen und sollten als solche betrachtet werden. Der Verlag folgt bei den Produktbezeich-

nungen im Wesentlichen den Schreibweisen der Hersteller.

Lektorat: Franz Graser

Satz: DTP-Satz A. Kugge, München

art & design: www.ideehoch2.de

Druck: Bercker, 47623 Kevelaer

Printed in Germany

ISBN 978-3-7723-6262-0


5

Inhaltsverzeichnis 1 Einführung......................................................................................................... 15

1.1 Gliederung dieses Buches.....................................................................15 1.2 Was muss ich können, um dieses Buch zu verstehen?...........................15 1.3 Welche Werkzeuge benötige ich? ..........................................................16 1.3.1 Ajax testen ............................................................................................16 1.4 Nützliche Editoren und Programme .......................................................17 1.4.1 Der Alleskönner: Adobe Dreamweaver...................................................17 1.4.2 Alleskönner Nr. 2: Microsoft Expression Web Designer ..........................17 1.4.3 Der Allrounder: Eclipse mit Eclipse Web Tools Platform..........................18 1.4.4 Die Alternativen: UltraEdit, SuperHTML, Phase 5, Aptana … ...................18 1.5 Kostenlose Entwicklungsumgebung unter Windows einrichten ..............19 1.5.1 Vorbereitung .........................................................................................19 1.5.2 Java installieren ....................................................................................19 1.5.3 Der erste Start .......................................................................................20 1.5.4 Der Aufbau der Entwicklungsumgebung ................................................22 1.5.5 Ein HTML- oder JavaScript-Projekt anlegen.............................................23 1.5.6 Mit HTML, CSS und JavaScript arbeiten..................................................24

2 JavaScript-Grundlagen....................................................................................... 29 2.1 Einführung ............................................................................................29 2.1.1 Was ist JavaScript? ................................................................................29 2.1.2 Entstehung............................................................................................29 2.1.3 Client- und serverseitig..........................................................................30 2.1.4 Versionen und Browser .........................................................................30 2.2 Erste Schritte.........................................................................................31 2.2.1 Wie fange ich an? ..................................................................................31 2.2.2 JavaScript und HTML .............................................................................31 2.2.3 JavaScript in einer externen Datei ..........................................................32 2.2.4 Wohin mit dem <script>? ........................................................................33 2.2.5 JavaScript starten ..................................................................................33 2.2.6 Attribute des script-Elements ................................................................34 2.2.7 Notationsregeln ....................................................................................34 2.3 Variablen ..............................................................................................37 2.3.1 Variablen und Namen............................................................................37 2.3.2 Variablen deklarieren ............................................................................37 2.3.3 Datentypen von Variablen .....................................................................38 2.3.4 Sonderzeichen in String-Werten ............................................................39 2.3.5 Typenumwandlung von Variablen..........................................................40

6 Inhaltsverzeichnis

2.3.6 Haltbarkeit von Variablen...................................................................... 42 2.4 Operatoren ........................................................................................... 42 2.4.1 Arithmetische Operatoren ..................................................................... 42 2.4.2 String-Operatoren ................................................................................. 43 2.4.3 Vergleichsoperatoren............................................................................ 43 2.4.4 Logische Operatoren............................................................................. 43 2.4.5 Bitweise Operatoren ............................................................................. 44 2.4.6 Zuweisungsoperatoren ......................................................................... 44 2.4.7 Spezielle Operatoren ............................................................................ 45 2.5 Funktionen............................................................................................ 45 2.5.1 Parameter von Funktionen .................................................................... 46 2.5.2 Rückgabewerte einer Funktion .............................................................. 46 2.5.3 Verhalten von Variablen bei Funktionen ................................................ 47 2.6 Bedingungen und Verzweigungen ......................................................... 48 2.6.1 if-Abfrage.............................................................................................. 48 2.6.2 if-else-Abfrage ...................................................................................... 49 2.6.3 Konditionalabfrage ............................................................................... 49 2.6.4 switch-Abfrage...................................................................................... 49 2.7 Schleifen .............................................................................................. 50 2.7.1 for-Schleife ........................................................................................... 50 2.7.2 for-in-Schleife ....................................................................................... 51 2.7.3 while-Schleife ....................................................................................... 52 2.7.4 do-while-Schleife .................................................................................. 53 2.7.5 Schleifenkontrolle................................................................................. 53 2.7.6 Label .................................................................................................... 54 2.8 Ereignisse ............................................................................................. 54 2.8.1 Ereignisse in HTML definieren ............................................................... 55 2.8.2 Ereignisskripte...................................................................................... 55 2.8.3 Welche Ereignisse gibt es? .................................................................... 56 2.8.4 Rückmeldung auf Ereignisse geben....................................................... 57 2.8.5 Ereignisse in JavaScript ......................................................................... 58 2.9 Objekte................................................................................................. 58 2.9.1 Objekte und Variablen .......................................................................... 59 2.9.2 Einfache Objekte................................................................................... 59 2.9.3 Komplexe Objekte................................................................................. 60 2.9.4 Objekte verwenden ............................................................................... 61 2.9.5 Unterobjekte......................................................................................... 61 2.9.6 Vererbung von Objekten ....................................................................... 62 2.9.7 Prototype und Constructor .................................................................... 62 2.10 Verarbeitung......................................................................................... 63 2.10.1 with-Anweisung .................................................................................... 63 2.10.2 this-Anweisung ..................................................................................... 64 2.10.3 Try-catch-finally-Anweisung .................................................................. 64 2.10.4 throw-Anweisung .................................................................................. 66

Inhaltsverzeichnis 7

3 DHTML, der kleine Helfer ................................................................................... 67 3.1 Was ist DHTML?.....................................................................................67 3.1.1 Wo hört JavaScript auf und wo fängt DHTML an? ....................................68 3.1.2 Was brauche ich für DHTML, und wie schreibe ich es? ...........................68 3.1.3 Das Browser-Problem ............................................................................68 3.1.4 Die Situation heute ...............................................................................69 3.1.5 Browser-Unterscheidung .......................................................................69 3.2 DHTML-Grundlagen ...............................................................................70 3.2.1 Layer ansprechen..................................................................................71 3.2.2 Zugriff auf andere Elemente...................................................................71 3.3 Mit Objekten arbeiten ...........................................................................72 3.3.1 Neue Inhalte einfügen ...........................................................................72 3.3.2 Neue Elemente anfügen ........................................................................73 3.3.3 Positionierung.......................................................................................73 3.3.4 Vorder- und Hintergrund........................................................................75 3.3.5 Elemente anzeigen und ausblenden......................................................75 3.4 Mit Ereignissen richtig umgehen............................................................76 3.4.1 Ereignisse beim Microsoft Internet Explorer ...........................................77 3.4.2 Ereignisse bei Netscape, Firefox und Opera ...........................................77 3.4.3 Einheitliche Ereignisbehandlung ...........................................................78

4 Interaktion mit Ajax ........................................................................................... 79 4.1 Was ist Ajax?.........................................................................................79 4.1.1 Wozu Ajax?............................................................................................79 4.1.2 Voraussetzungen ..................................................................................80 4.1.3 Vor- und Nachteile ................................................................................80 4.2 Daten abrufen .......................................................................................81 4.2.1 Exkurs zu HTTP ......................................................................................82 4.2.2 Request absetzen..................................................................................83 4.2.3 Parameter senden .................................................................................84 4.2.4 Response entgegennehmen ..................................................................85 4.2.5 Response abbrechen.............................................................................86 4.2.6 Response-Header auswerten.................................................................86 4.3 XML & JavaScript ...................................................................................87 4.3.1 Exkurs XML............................................................................................87 4.3.2 XML mit JavaScript verarbeiten ..............................................................88 4.3.3 XML-Element im Überblick.....................................................................88 4.4 Andere Formen von Ajax ........................................................................89 4.4.1 Ajax ohne XML mit JSON ........................................................................89 4.4.2 Ajax ohne XMLHttpRequest ...................................................................90 4.5 Einfacher arbeiten mit Ajax-Frameworks ................................................93 4.5.1 Ajax im Browser: Spry & AjaXSLT ...........................................................93 4.5.2 Ajax mit PHP: Xajax ...............................................................................96 4.5.3 Ajax mit Perl, CF und Python: Sajax........................................................98 4.5.4 Ajax mit ASP.NET.................................................................................100


5 JavaScript, DHTML und Ajax in der Praxis ......................................................... 103 5.1 JavaScript und der Browser: Die wichtigsten Objekte........................... 103 5.1.1 Number-, Date-, Array- und String-Objekt ............................................ 103 5.1.2 window-Objekt.................................................................................... 103 5.1.3 document-Objekt ................................................................................ 104 5.1.4 location- und history-Objekt................................................................ 104 5.2 Datum & Zeit....................................................................................... 105 5.2.1 Das Date-Objekt.................................................................................. 105 5.2.2 Die Uhrzeit anzeigen ........................................................................... 106 5.3 Arrays ................................................................................................. 107 5.3.1 Mit Arrays arbeiten.............................................................................. 107 5.3.2 Mehrdimensionale Arrays ................................................................... 108 5.3.3 Arrays sortieren................................................................................... 108 5.4 Formulare kontrollieren....................................................................... 110 5.4.1 Zugriff auf Formulare........................................................................... 110 5.4.2 Zugriff auf Formularelemente .............................................................. 111 5.4.3 Formular überprüfen ........................................................................... 111 5.4.4 Eingabefelder ..................................................................................... 112 5.4.5 E-Mail-Felder....................................................................................... 112 5.4.6 Passwortfelder .................................................................................... 113 5.4.7 Radio-Buttons und Checkboxen .......................................................... 113 5.4.8 Select-Felder....................................................................................... 114 5.4.9 Das komplette Skript .......................................................................... 114 5.5 Fenster & Frames ................................................................................ 115 5.5.1 Daten ins Dokument schreiben ........................................................... 115 5.5.2 Dokument erweitern............................................................................ 115 5.5.3 Dokument neu schreiben .................................................................... 116 5.5.4 Popup erzeugen.................................................................................. 117 5.5.5 (Mehrere) Frames ändern .................................................................... 118 5.5.6 Aufruf in fremdem Frameset verhindern............................................... 118 5.5.7 Frameset nachladen............................................................................ 119 5.6 Mit Cookies arbeiten ........................................................................... 120 5.6.1 Cookies speichern .............................................................................. 121 5.6.2 Cookies auslesen................................................................................ 121 5.6.3 Cookies löschen ................................................................................. 122 5.6.4 Mehrere Werte speichern und lesen …................................................. 122 5.6.5 Cookies in der Praxis........................................................................... 122 5.7 Drop-Down-Menü mit DHTML .............................................................. 123 5.7.1 Ein- und Ausblenden vorbereiten ........................................................ 125 5.7.2 Ein- und Ausblenden........................................................................... 126 5.8 Drag&Drop-Warenkorb mit DHTML ...................................................... 127 5.8.1 Vorbereitung....................................................................................... 127 5.8.2 Drag … ................................................................................................ 128 5.8.3 … Move … ........................................................................................... 129


5.8.4 … Drop ................................................................................................129 5.9 Suchvorschläge mit Ajax .....................................................................131 5.9.1 Die Grundlage .....................................................................................131 5.9.2 Daten vorbereiten ...............................................................................132 5.9.3 Jetzt wird's dynamisch … .....................................................................133 5.9.4 … und noch Ajax dazu .........................................................................134 5.9.5 Ajax-Request absenden.......................................................................134 5.9.6 Daten verarbeiten … ............................................................................135 5.9.7 Suchvorschläge verstecken .................................................................136 5.9.8 Nochmal alles zusammen …................................................................136 5.10 Formularverarbeitung mit Ajax.............................................................139 5.10.1 Die Grundlage .....................................................................................139 5.10.2 Universelle Abfragetechnik..................................................................140 5.10.3 Daten abfragen und verarbeiten ..........................................................142 5.10.4 Username, Ort und BLZ auswerten.......................................................142 5.10.5 Das fertige Script.................................................................................143 5.11 Chat mit Ajax.......................................................................................146 5.11.1 Vorbereitungen ...................................................................................146 5.11.2 Login...................................................................................................147 5.11.3 Nachricht absenden ............................................................................149 5.11.4 Nachrichten speichern ........................................................................150 5.11.5 Nachrichten abrufen............................................................................150 5.11.6 Nachrichten anzeigen..........................................................................151 5.11.7 Das komplette Skript...........................................................................153

6 Objektreferenz................................................................................................. 159 6.1 Einführende Hinweise .........................................................................159 6.1.1 Schreibung .........................................................................................160 6.2 Top-Level-Eigenschaften und -Funktionen ...........................................161 6.2.1 Eigenschaften .....................................................................................161 6.2.2 Methoden ...........................................................................................161 6.3 Kollektionen........................................................................................165 6.3.1 Eigenschaften .....................................................................................166 6.3.2 Methoden ...........................................................................................166 6.4 all .......................................................................................................168 6.5 anchors...............................................................................................169 6.5.1 JScript .................................................................................................169 6.5.2 JavaScript............................................................................................169 6.6 applets ...............................................................................................170 6.6.1 JScript .................................................................................................170 6.6.2 JavaScript............................................................................................171 6.7 areas...................................................................................................171 6.8 arguments...........................................................................................171 6.8.1 Eigenschaften .....................................................................................172 6.9 Array ...................................................................................................173


6.9.1 Eigenschaften ..................................................................................... 173 6.9.2 Methoden ........................................................................................... 174 6.10 attribute.............................................................................................. 177 6.10.1 Eigenschaften ..................................................................................... 177 6.10.2 Methoden ........................................................................................... 181 6.11 attributes............................................................................................ 182 6.12 behaviorUrns ...................................................................................... 183 6.13 bookmarks ......................................................................................... 183 6.14 Boolean .............................................................................................. 184 6.14.1 Boolean erstellen................................................................................ 184 6.14.2 Eigenschaften ..................................................................................... 184 6.14.3 Methoden ........................................................................................... 185 6.15 boundElements................................................................................... 185 6.16 cells.................................................................................................... 186 6.17 childNodes ......................................................................................... 186 6.18 children .............................................................................................. 187 6.19 clientInformation ................................................................................ 187 6.19.1 Unterobjekte....................................................................................... 187 6.19.2 Eigenschaften ..................................................................................... 188 6.19.3 Methoden ........................................................................................... 190 6.20 clip ..................................................................................................... 191 6.20.1 Eigenschaften ..................................................................................... 191 6.21 clipboardData ..................................................................................... 191 6.21.1 Methoden ........................................................................................... 192 6.22 controlRange ...................................................................................... 193 6.22.1 Eigenschaften ..................................................................................... 193 6.22.2 Methoden ........................................................................................... 193 6.23 crypto ................................................................................................. 196 6.23.1 Methoden ........................................................................................... 196 6.24 currentStyle ........................................................................................ 197 6.24.1 Eigenschaften ..................................................................................... 198 6.24.2 Methoden ........................................................................................... 198 6.25 dataTransfer ....................................................................................... 199 6.25.1 Eigenschaften ..................................................................................... 199 6.25.2 Methoden ........................................................................................... 200 6.26 Date.................................................................................................... 202 6.26.1 Eigenschaften ..................................................................................... 202 6.26.2 Methoden ........................................................................................... 202 6.27 document ........................................................................................... 212 6.27.1 Unterobjekte....................................................................................... 212 6.27.2 Eigenschaften ..................................................................................... 213 6.27.3 Methoden ........................................................................................... 219 6.28 elements............................................................................................. 227 6.29 embeds .............................................................................................. 228


6.29.1 JScript .................................................................................................228 6.29.2 JavaScript............................................................................................229 6.30 Error....................................................................................................230 6.30.1 Error-Objekt erstellen ..........................................................................230 6.30.2 Eigenschaften .....................................................................................230 6.30.3 Methoden ...........................................................................................231 6.30.4 Error in JavaScript................................................................................231 6.31 Event...................................................................................................232 6.31.1 Verwendung........................................................................................232 6.31.2 Eigenschaften .....................................................................................233 6.32 event...................................................................................................237 6.32.1 Unterobjekte .......................................................................................237 6.32.2 Eigenschaften .....................................................................................237 6.33 external...............................................................................................244 6.33.1 Eigenschaften .....................................................................................244 6.33.2 Methoden ...........................................................................................244 6.34 filters ..................................................................................................246 6.35 forms ..................................................................................................247 6.35.1 JScript .................................................................................................247 6.35.2 JavaScript............................................................................................247 6.35.3 Eigenschaften .....................................................................................248 6.35.4 Methoden ...........................................................................................249 6.36 Formular-Elemente ..............................................................................250 6.36.1 Eigenschaften .....................................................................................252 6.36.2 Methoden ...........................................................................................254 6.37 frames-Objekt .....................................................................................255 6.37.1 Zugriff .................................................................................................255 6.37.2 parent .................................................................................................256 6.37.3 top ......................................................................................................257 6.37.4 Objekte, Variablen und Funktionen .....................................................258 6.38 Function..............................................................................................258 6.38.1 Function-Objekt erstellen ....................................................................258 6.38.2 Unterobjekte .......................................................................................259 6.38.3 Eigenschaften .....................................................................................259 6.38.4 Methoden ...........................................................................................260 6.39 history ................................................................................................261 6.39.1 Eigenschaften .....................................................................................262 6.39.2 Methoden ...........................................................................................263 6.40 HTML-Elemente ...................................................................................263 6.40.1 Zugriff .................................................................................................263 6.40.2 Unterobjekte .......................................................................................264 6.40.3 Eigenschaften .....................................................................................264 6.40.4 Methoden ...........................................................................................297 6.41 images................................................................................................312


6.41.1 JScript................................................................................................. 313 6.41.2 JavaScript ........................................................................................... 313 6.41.3 Eigenschaften ..................................................................................... 313 6.41.4 Methoden ........................................................................................... 315 6.42 implementation .................................................................................. 315 6.42.1 Methoden ........................................................................................... 315 6.43 imports ............................................................................................... 315 6.44 layers.................................................................................................. 316 6.44.1 Unterobjekte....................................................................................... 317 6.44.2 Eigenschaften ..................................................................................... 317 6.44.3 Methoden ........................................................................................... 320 6.45 links ................................................................................................... 323 6.45.1 JScript................................................................................................. 323 6.45.2 JavaScript ........................................................................................... 323 6.45.3 Eigenschaften ..................................................................................... 324 6.45.4 Methoden ........................................................................................... 326 6.46 location .............................................................................................. 326 6.46.1 Eigenschaften ..................................................................................... 326 6.46.2 Methoden ........................................................................................... 328 6.47 Math................................................................................................... 329 6.47.1 Eigenschaften ..................................................................................... 329 6.47.2 Methoden ........................................................................................... 331 6.48 mimeTypes ......................................................................................... 334 6.48.1 Zugriff ................................................................................................. 334 6.48.2 Eigenschaften ..................................................................................... 334 6.49 namespace ......................................................................................... 335 6.49.1 Eigenschaften ..................................................................................... 335 6.49.2 Methoden ........................................................................................... 336 6.50 namespaces ....................................................................................... 336 6.51 navigator ............................................................................................ 337 6.51.1 Unterobjekte....................................................................................... 337 6.51.2 Eigenschaften ..................................................................................... 337 6.51.3 Methoden ........................................................................................... 340 6.52 Number............................................................................................... 341 6.52.1 Number erstellen ................................................................................ 341 6.52.2 Eigenschaften ..................................................................................... 341 6.52.3 Methoden ........................................................................................... 342 6.53 Object................................................................................................. 344 6.53.1 Objekt erstellen .................................................................................. 344 6.53.2 Eigenschaften ..................................................................................... 345 6.53.3 Methoden ........................................................................................... 345 6.54 page ................................................................................................... 348 6.54.1 Eigenschaften ..................................................................................... 348 6.55 pages ................................................................................................. 348


6.56 plugins................................................................................................349 6.56.1 Zugriff .................................................................................................349 6.56.2 Eigenschaften .....................................................................................349 6.57 popup .................................................................................................350 6.57.1 Eigenschaften .....................................................................................350 6.57.2 Methoden ...........................................................................................350 6.58 RegExp................................................................................................351 6.58.1 Eigenschaften .....................................................................................351 6.58.2 Methoden ...........................................................................................354 6.59 rows....................................................................................................356 6.60 rule .....................................................................................................356 6.60.1 Unterobjekte .......................................................................................356 6.60.2 Eigenschaften .....................................................................................356 6.61 rules ...................................................................................................357 6.62 runtimeStyle .......................................................................................357 6.62.1 Eigenschaften .....................................................................................358 6.62.2 Methoden ...........................................................................................358 6.63 screen.................................................................................................360 6.63.1 Eigenschaften .....................................................................................360 6.64 scripts.................................................................................................362 6.65 selection .............................................................................................363 6.65.1 Eigenschaften .....................................................................................363 6.65.2 Methoden ...........................................................................................364 6.66 String ..................................................................................................364 6.66.1 String erstellen....................................................................................364 6.66.2 Eigenschaften .....................................................................................365 6.66.3 Methoden ...........................................................................................365 6.67 style....................................................................................................373 6.67.1 Eigenschaften .....................................................................................374 6.67.2 Methoden ...........................................................................................374 6.68 Style-Eigenschaften.............................................................................377 6.69 styleSheets .........................................................................................381 6.70 tBodies ...............................................................................................381 6.71 TextNode.............................................................................................382 6.71.1 Eigenschaften .....................................................................................382 6.71.2 Methoden ...........................................................................................383 6.72 TextRange (Objekt)..............................................................................385 6.72.1 Eigenschaften .....................................................................................385 6.72.2 Methoden ...........................................................................................386 6.73 TextRange (Kollektion).........................................................................394 6.74 TextRectangle (Objekt) ........................................................................394 6.74.1 Eigenschaften .....................................................................................394 6.75 TextRectangle (Kollektion) ...................................................................395 6.76 userProfile ..........................................................................................395


6.76.1 Methoden ........................................................................................... 395 6.77 window............................................................................................... 397 6.77.1 Zugriff ................................................................................................. 397 6.77.2 Unterobjekte....................................................................................... 398 6.77.3 Eigenschaften ..................................................................................... 398 6.77.4 Methoden ........................................................................................... 405 6.78 XMLHttpRequest ................................................................................. 418 6.78.1 Zugriff ................................................................................................. 419 6.78.2 Eigenschaften ..................................................................................... 419 6.78.3 Methoden ........................................................................................... 421

A Anhang ........................................................................................................... 423 A.1 Events................................................................................................. 423 A.2 Reservierte Wörter............................................................................... 424

Stichwortverzeichnis ....................................................................................... 425

15

1 Einführung Was ist JavaScript? Was steckt eigentlich dahinter? Wie wendet man es an? Was versteht man unter Ajax, und wozu ist es überhaupt gut? Genau diesen Fragen werden wir in diesem Buch nachgehen. Am Ende werden Sie die Grundzüge von JavaScript, DHTML und Ajax beherrschen, die gängigen Frameworks kennen und außerdem reichlich Praxisluft geschnuppert haben, sodass Sie in der Lage sein werden, eigene JavaScript- oder Ajax-Anwendungen zu entwickeln.

1.1 Gliederung dieses Buches

Der Aufbau ist so gestaltet, dass die einzelnen Kapitel mehr oder minder aufeinander aufbauen beziehungsweise die in einem Kapitel erworbenen Kenntnisse für das Ver-ständnis der darauf folgenden Kapitel benötigt werden. Los geht es mit dem Grund-lagenkapitel zum Thema JavaScript – hier erlernen Sie, was JavaScript eigentlich ist und wie Sie eigene Programme in JavaScript schreiben können. Als Nächstes folgt eine Einführung in das Thema DHTML (Dynamic HTML), mit dessen Hilfe Sie mehr Abwechslung in eine Website bringen können. Anschließend erlernen Sie, was es mit Ajax (Asynchronous JavaScript and XML) auf sich hat und wie Sie es für Ihre Zwecke einsetzen können. Den Abschluss bilden dann ein Kapitel mit zahlreichen Praxisbei-spielen und hilfreichen Tricks sowie eine umfassende Objektreferenz, mit der Sie alle wichtigen JavaScript-Objekte nachschlagen können.

1.2 Was muss ich können, um dieses Buch zu verstehen?

Grundsätzliche Voraussetzung, um den Inhalt dieses Buches verstehen und anschlie-ßend umsetzen zu können, sind solide Grundkenntnisse in den Bereichen Internet (Funktionsweise, Protokolle usw.) sowie gefestigte Kenntnisse in Sachen HTML. Letzte-res ist für die Anwendung von JavaScript unerlässlich. Für die Arbeit mit DHTML sollten Sie darüber hinaus bereits mit CSS (Cascading Style Sheets) gearbeitet haben und – für das Verständnis von Ajax – über ein Basiswissen in XML (Extensible Markup Language) verfügen. Da Ajax in der Regel im Verbund mit einer auf dem Webserver operierenden Sprache agiert, sind ebenfalls entsprechende Grundkenntnisse in zumindest einer serverseitigen Programmiersprache wie PHP, ASP/ASP.NET oder Java (Java Server Pages, JSP) von Vorteil. Insbesondere bei größeren Anwendungen kommt

16 Kapitel 1: Einführung

zudem MySQL beziehungsweise Microsofts SQL-Server als Datenbanksystem hinzu, für das ebenfalls entsprechende Kenntnisse vorliegen sollten.

Lassen Sie sich von der Fülle der eben aufgezählten Programmiersprachen und Techno-logien jedoch nicht verunsichern: In der Regel wird je nach Anwendung und Zielsetzung nur ein Bruchteil davon benötigt. Um den Einstieg zu erleichtern, werden wir zudem an den passenden Stellen kurze Erläuterungen und Exkurse in die jeweiligen Bereiche bieten.

1.3 Welche Werkzeuge benötige ich?

JavaScript und damit alle davon abhängigen Technologien begnügen sich mit recht wenig softwaretechnischem Beiwerk. Für die Programmierung von JavaScript-Anwen-dungen sind daher im simpelsten Fall ein Texteditor (vgl. Windows Notepad) zum Ent-wickeln sowie ein gängiger Browser zum Testen notwendig. Da JavaScript- und Ajax-Anwendungen allerdings auch schon mal ein paar Hundert bis Tausend Zeilen an Code umfassen können, empfiehlt es sich hier, auf einen entsprechend ausgerüsteten Editor zu setzen. Die meisten der verbreiteten Editoren unterstützen das Editieren von Java-Script-Code mit zahlreichen nützlichen Features wie Syntaxhervorhebung, Auto-Ver-vollständigung und weiteren Funktionen, die das Programmieren deutlich vereinfachen und damit effizienter machen können.

1.3.1 Ajax testen

Da Ajax allein auf dem Client-Rechner, das heißt auf dem Browser, recht wenig Sinn ergeben würde, benötigt man für diese Funktionen zusätzlich eine Web-Umgebung, auf der sich Techniken wie PHP, ASP oder JSP testen lassen. Im einfachsten Fall lädt man die Dateien jeweils auf den eigenen Webspace hoch und testet sie dann dort. Wem dies zu umständlich beziehungsweise zeitaufwendig ist, der kann sich mit einem sogenann-ten XAMPP-Installationspaket1 behelfen. Dabei handelt es sich um ein Programmpaket, welches unter anderem die Software Apache (ein Webserver), MySQL (ein Daten-banksystem) und PHP (eine Programmiersprache für serverseitige Programmierung) beinhaltet und diese Komponenten in der Regel schon komplett vorgefertigt und vorkonfiguriert mit sich bringt. Einmal installiert, hat man dann auf dem heimischen PC einen eigenen Webserver samt Datenbank und PHP laufen – ganz ähnlich wie bei den meisten Webhostern – und kann so Ajax-Skripte in Verbindung mit PHP direkt von zu Hause aus testen.

1 XAMPP ist für zahlreiche Betriebssysteme, darunter Windows, Linux und Mac OS X, unter der Adresse

http://www.apachefriends.org/de/xampp.html kostenlos zum Download erhältlich.

1.4 Nützliche Editoren und Programme 17

1.4 Nützliche Editoren und Programme

Auf dem Markt und im Internet existieren außerdem zahlreiche Tools und Programme, die Ihnen die Arbeit am Code deutlich erleichtern können. Einige davon möchten wir Ihnen hier kurz vorstellen, um Ihnen die Auswahl zu erleichtern.

1.4.1 Der Alleskönner: Adobe Dreamweaver

Wer es gern übersichtlich hat und sich beim Design seiner Website direkt anschauen möchte, was er programmiert, ist mit der Lösung von Adobe gut beraten. Insbesondere das Erstellen des Designs einer Seite fällt mit diesem Programm sehr leicht. Zudem wartet es mit Editorfunktionen auf, die einen direkten Eingriff in den Webseiten-Code und damit die Möglichkeit zur Einbindung von JavaScript bieten. Für den Einsteiger ist dieses Programm sehr zu empfehlen – einige Profis setzen jedoch auf reine Texteditoren. Das Programm ist ab 570 Euro erhältlich.

Bild 1.1: Die Oberfläche von Dreamweaver lässt sowohl die Code-Bearbeitung als auch die Seitengestaltung mit WYSIWYG-Editor und Vorschaufunktion zu.

1.4.2 Alleskönner Nr. 2: Microsoft Expression Web Designer

Ebenfalls sehr für Anfänger zu empfehlen sind die Programme aus dem Hause Micro-soft, namentlich der Expression Web Designer beziehungsweise das ältere Frontpage. Ähnlich wie Dreamweaver bietet es einfache Funktionen zum Erstellen der Oberflächen, aber zugleich auch die Möglichkeit, den Code direkt zu bearbeiten. Die aktuelle Version von Microsoft Expression Web schlägt mit rund 299 Euro zu Buche.

18 Kapitel 1: Einführung

1.4.3 Der Allrounder: Eclipse mit Eclipse Web Tools Platform

Eclipse ist ursprünglich aus einer Entwicklungsumgebung für die Programmiersprache Java hervorgegangen, mit einigen ergänzenden Tools und Plugins nun aber auch sehr gut für HTML und JavaScript geeignet. Das Programm ist ein reiner Texteditor – das heißt, eine grafische Bearbeitung wie bei Dreamweaver oder Expression Web ist nicht möglich. Dafür bietet die Umgebung umfangreiche Funktionen, die das Programmieren am Code deutlich vereinfachen und beschleunigen können. Da es sich um eine Open-Source-Lösung handelt, kann es kostenlos unter www.eclipse.org heruntergeladen werden. Fortgeschrittene Programmierer und Profis setzen mehrheitlich auf derartige Entwicklungsumgebungen.

1.4.4 Die Alternativen: UltraEdit, SuperHTML, Phase 5, Aptana …

Neben den drei vorgenannten Programmen gibt es eine ganze Reihe kostenloser und kostenpflichtiger Editoren im Internet, die im Wesentlichen die gleichen oder zumindest ähnliche Funktionen aufweisen. Im Besonderen zu nennen wären hier UltraEdit (49,90 Euro, www.ultraedit.at), SuperHTML (79,95 Euro, www.superhtml.de), Phase 5 (kostenlos, www.qhaut.de) sowie Aptana Studio (kostenlos, www.aptana.com/studio).

Bild 1.2: Im Gegensatz zu den grafisch orientierten Tools Expression Web und Dreamweaver wirkt der HTML-Editor Phase 5 relativ monoton.

103

5 JavaScript, DHTML und Ajax in der Praxis

Nachdem wir uns mit den Grundlagen beschäftigt haben, wollen wir JavaScript nun in der Praxis anwenden. Da sich natürlich nicht jede Situation und jede Programmierauf-gabe innerhalb dieses Kapitels abbilden lassen – dafür sind die Möglichkeiten von JavaScript einfach zu umfangreich –, wollen wir uns hier den wichtigsten Dingen kurz widmen.

5.1 JavaScript und der Browser: Die wichtigsten Objekte

Wird JavaScript-Code in einem Browser ausgeführt (in der Regel also in einer Web-seite), stellt dieser für gewöhnlich eine Reihe von Objekten zur Verfügung, mit denen man auf die einzelnen Bestandteile des Browserfensters bzw. des angezeigten Doku-ments zugreifen kann. Je nach verwendetem Browser und benutzter Version unterschei-det sich zwar die Ausprägung der Objekte, im Wesentlichen beherrschen die wichtigen Browser wie Microsoft Internet Explorer, (Mozilla) Firefox, Opera oder Safari jedoch die gleichen Objekte. Folgende Objekte sind dabei für quasi jeden JavaScript-Programmie-rer unerlässlich:

5.1.1 Number-, Date-, Array- und String-Objekt

Bei diesen Objekten handelt es sich so gesehen um erweiterte Datentypen, da etwa Zahlen, Strings und Datumswerte in vielen Programmiersprachen nicht als Objekt, sondern als normaler Datentyp behandelt werden. In JavaScript ist es etwas anders, hier ist jeder Datentyp auch gleich ein Objekt und kann als solches Eigenschaften und Methoden tragen. Beispiel:

alert((3.666667).toFixed(2)); //auf 2 Kommastellen brechen a = 'Hans Hase'; alert(a.length); //Anzahl der Zeichen ausgeben

5.1.2 window-Objekt

Das window-Objekt ist quasi das oberste Objekt in der Hierarchie – alle anderen Objekte, die im Browser zur Verfügung stehen, stammen von ihn ab. Das Objekt selbst

104 Kapitel 5: JavaScript, DHTML und Ajax in der Praxis

stellt die Schnittstelle zum – wie sollte es anders sein – Fenster dar, in dem das Skript gerade ausgeführt wird. Hierzu bietet es Eigenschaften, die es etwa erlauben, die Statusanzeige zu ändern, neue Fenster zu öffnen oder das Fenster zu vergrößern bzw. zu verkleinern. Beispiel:

window.status = 'JavaScript in der Statusleiste'; a = window.open('http://www.html-world.de','a'); a.resizeTo(500,500); //neues Fenster a auf 500x500 ändern

Bild 5.1: JavaScript ermöglicht auch den Zugriff auf die Statusleiste des Browserfensters

5.1.3 document-Objekt

Das document-Objekt ist eigentlich ein Unterobjekt des window-Objekts, kann aber auf-grund des häufigen Gebrauchs auch ohne Nennung von window verwendet werden. Es bietet den Zugriff auf das angezeigte Dokument sowie die darin enthaltenen Elemente wie Formulare, Links, Bilder usw. Beispiel:

document.title = 'Seitentitel'; document.bgColor = 'red'; //Hintergrundfarbe auf Rot document.writeln('Ich bin JavaScript'); document.meinFormular.meinFeld.value = '23';

5.1.4 location- und history-Objekt

Diese beiden Objekte sind ebenfalls Abkömmlinge des window-Objekts und dienen dem Zugriff auf die Navigation bzw. History (Verlauf) des Browsers. Damit ist es möglich, z. B. eine neue Seite anzusteuern oder auf die zuvor besuchte Seite zurückzuspringen. Beispiel:

location.relaod(); //Seite neu laden location.href = 'neueseite.html'; //andere Seite anzeigen history.back(); //letzte Seite anzeigen

5.2 Datum & Zeit 105

5.2 Datum & Zeit

Ein guter Einstieg in die JavaScript-Praxis ist die Arbeit mit Datums- und Zeitwerten, da sich Datumsangaben nicht einfach so im Zehnersystem umrechnen lassen – 40 Minuten ergeben eben nicht 0,4 Stunden. JavaScript bietet hierfür bereits vorgefertigte Bibliothe-ken und Objekte, welche die Verarbeitung von Zeit- und Datumsangaben deutlich ver-einfachen.

5.2.1 Das Date-Objekt

Das Date-Objekt ist ein von JavaScript zur Verfügung gestelltes Objekt zur Verarbeitung von Datums- und Zeitangaben. Das Objekt besitzt diverse Methoden, die es etwa erlauben, ein neues Datum zu setzen oder Datumsangaben sinnvoll zu formatieren.

Um das Date-Objekt zu verwenden, muss es, wie jedes andere Objekt auch, zunächst in einer Variablen erstellt werden:

a = new Date();

Außerdem können dem Constructor diverse Parameter übergeben werden, um das Datum auf einen definierten Wert zu setzen. Die Möglichkeiten sind hier:

• Die Möglichkeit 1 besteht darin, als ersten und einzigen Parameter die Anzahl an Millisekunden seit dem 01. Jan. 1970 00:00:00 Uhr zu notieren. Da JavaScript intern jeden Datumswert als eine Millisekundenzahl speichert, ist dies sozusagen die Grundform aller Daten. Diese Variante wird in der Regel dann verwendet, wenn Datumswerte z. B. aus anderen Programmiersprachen übernommen werden, die ebenso in Millisekunden rechnen.

• Die zweite Möglichkeit besteht darin, einen Datumsstring anzugeben, aus dem dann der Computer das zu setzende Datum herleiten kann. Damit eben dies der Fall ist, muss der String z. B. wie folgt aufgebaut sein: »Mon Apr 2 22:23:26 UTC+0200 2007«.

• Als dritte Möglichkeit können die Werte für Jahr, Monat und Tag sowie optional für Stunde, Minute, Sekunde und Millisekunde jeweils als einzelner Parameter überge-ben werden (in dieser Reihenfolge). Dabei ist zu beachten, dass der Januar den Wert 0 und nicht 1 besitzt und somit alle Monate um 1 subtrahiert werden müssen (der 11. November wäre somit im übertragenen Sinne nicht der 11.11., sondern der 11.10.).

a = new Date(1176804794015); alert(a.toString()); // Tue Apr 17 12:13:14 UTC+0200 2007 a = new Date('Tue Apr 17 12:13:14 UTC+0200 2007'); alert (a.toString()); // Tue Apr 17 12:13:14 UTC+0200 2007 a = new Date(2007,3,17);


alert (a.toString()); // Tue Apr 17 00:00:00 UTC+0200 2007 a = new Date(2007,3,17,12); alert (a.toString()); // Tue Apr 17 12:00:00 UTC+0200 2007 a = new Date(2007,3,17,12,13); alert (a.toString()); // Tue Apr 17 12:13:00 UTC+0200 2007 a = new Date(2007,3,17,12,13,14); alert (a.toString()); // Tue Apr 17 12:13:14 UTC+0200 2007 a = new Date(2007,3,17,12,13,14,15); alert (a.toString()); // Tue Apr 17 12:13:14 UTC+0200 2007

Darüber hinaus kann das Datum mit diversen Funktionen gesetzt werden. Hier einige Beispiele:

a = new Date(); a.setYear(2007); a.setMonth(3); a.setDate(17); a.setHours(12); a.setMinutes(13); a.setSeconds(14); a.setMilliseconds(15);

5.2.2 Die Uhrzeit anzeigen

Ebenso wie das Date-Objekt diverse Funktionen zum Setzen des Datums bereitstellt, werden natürlich auch zahlreiche Funktionen zum Auslesen der einzelnen Datumswerte zur Verfügung gestellt. Um dem Besucher etwa die aktuelle Uhrzeit anzuzeigen, müssen jeweils nur ein neues Date-Objekt erstellt und die Zeitangaben ausgelesen werden:

function zeitanzeige() { jetzt = new Date(); zeit = jetzt.getHours()+':'+ jetzt.getMinutes()+':'+ jetzt.getSeconds(); window.status = 'Es ist '+zeit+' Uhr'; } window.setInterval('zeitanzeige()',1000);

Die status-Eigenschaft des window-Objekts bewirkt hier, dass der übergebene String in der Status-Leiste des Browserfensters angezeigt wird. Die setInterval-Methode wiederum bewirkt, dass die notierte Funktion im Sekundentakt aufgerufen und die Uhr-zeit damit fortlaufend angezeigt wird.

5.3 Arrays 107

5.3 Arrays

Arrays sind eine besondere Objekt- bzw. Datentyp-Form. Im Gegensatz zu normalen Objekten speichern sie Daten nicht innerhalb von Eigenschaften, sondern als eine durchnummerierte Liste von quasi beliebiger Länge. Damit ist es möglich, Daten sortiert abzulegen und ebenso wieder abzurufen. In den meisten Fällen sind Arrays die einzige Möglichkeit, mit Daten umzugehen, da der Inhalt eines Arrays jederzeit erweitert wer-den kann, ohne dabei die Logik des Arrays durcheinander zu bringen.

Ebenso wie jedes andere Objekt wird auch ein Array zunächst mit dem Aufruf new Array() erstellt und kann dann gefüllt werden. Im Gegensatz zu einem Objekt werden die Felder eines Arrays jedoch über einen Index angesprochen. Der Index des ersten Feldes beträgt hierbei 0, der des zweiten Feldes 1, der des dritten 2 usw. und wird jeweils innerhalb von eckigen Klammern notiert, die sich an den Arraynamen schmiegen. Beispiel:

a = new Array(); a[0] = 'erstes Feld'; a[1] = 'zweites Feld'; a[133] = '134. Feld'; z = a[1]; //Inhalt von Feld 2 abrufen

Ein Feld kann dabei wie eine normale Variable jeden Datentyp und sogar weitere Arrays enthalten.

5.3.1 Mit Arrays arbeiten

Der Vorteil, den Arrays gegenüber anderen Objekten bieten, besteht darin, dass alle Daten über einen Index statt über eine Eigenschaft abgefragt werden können. Damit ist es möglich, ein Array etwa innerhalb einer for-Schleife zu durchlaufen und alle Werte herauszuholen, zu berechnen oder andere Dinge damit zu tun.

umsatz = new Array( 4223.23, 789.03, 8373.62, 7223.55, 3099.62 ); gesamt = 0; for(i=0; i<umsatz.length; i++) { gesamt += umsatz[i]; } alert('Gesamtumsatz: '+gesamt.toFixed(2)+' EUR');


5.3.2 Mehrdimensionale Arrays

Da ein einfaches Array in manchen Fällen noch zu wenig ist, kann man sich mit einem kleinen Umweg leicht ein mehrdimensionales Array schaffen, um so etwa Tabellen (2D) oder Raum-Koordinaten (3D) abbilden zu können. Hierfür nutzt man aus, dass der Inhalt eines Array-Feldes jeglichen Datentyp, also auch ein Array selbst, annehmen kann. Um nun ein zweidimensionales Array zu bekommen, wird einfach jedes Feld eines eindimensionalen Arrays mit einem weiteren Array bestimmter Länge gefüllt. Benötigt man noch eine Dimension mehr, werden auch die Felder der neu eingefügten Arrays wiederum mit Arrays gefüllt usw. Beispiel:

matrix1 = new Array(); matrix1[0] = new Array(1,2,3); matrix1[1] = new Array(3,4,5); matrix1[2] = new Array(5,6,7); matrix2 = new Array(); matrix2[0] = new Array(5,6,7); matrix2[1] = new Array(7,8,9); matrix2[2] = new Array(9,0,1); function matrizenaddition(m1, m2) { matrix = new Array(); for(i=0;i<m1.length;i++) { matrix[i] = new Array(); for(j=0;j<m2[i].length;j++) { matrix[i][j] = m1[i][j]+m2[i][j]; } } return matrix; } m = matrizenaddition(matrix1, matrix2);

5.3.3 Arrays sortieren

Für das Sortieren von Daten eigenen sich Arrays ganz besonders – vor allem weil es schon eine vordefinierte Funktion zum Sortieren von Arrays gibt. Eindimensionale Arrays können leicht über die sort-Methode sortiert werden. Sie sortiert das gegebene Array nach dem Alphabet. Aber Vorsicht: Große Buchstaben werden hier vor kleinen Buchstaben eingereiht und Zahlen werden ebenfalls wie Zeichen und nicht nach ihrem Zahlenwert behandelt. Das folgende Beispiel sortiert also nicht 3, 11, A, a, B, b sondern 11, 3, A, B, a, b – was unter Umständen zu Problemen führen könnte:

5.3 Arrays 109

a = new Array(); a[0] = 'a'; a[1] = 'b'; a[2] = '11'; a[3] = 'A'; a[4] = 'B'; a[5] = '3'; a.sort(); // sortiert a nach: 11 3 A B a b

Soll die Sortierung umgestellt werden, kann man sich etwas behelfen. Hier ist es mög-lich, der sort-Methode eine Funktion zu übergeben, die für den Vergleich zweier Daten zuständig ist. Bei jedem Sortiervorgang ruft die Methode die definierte Funktion auf und übergibt ihr die zwei zu vergleichenden Werte. Die Funktion kann nun entscheiden, welcher größer, gleich oder kleiner ist und entsprechend einen Wert zurückgeben. Ist der erste Wert kleiner, sollte die Funktion -1 ausgeben, sind die Werte gleich sollte die Funktion 0 ausgeben, und ist der zweite Wert kleiner sollte die Funktion 1 ausgeben. Das obige Beispiel richtig (nach Wertigkeit) sortiert, könnte z. B. so aussehen:

function vergleiche(x,y) { x = x.toLowerCase(); y = y.toLowerCase(); //zwei Zahlen; Hinweis: isNAN prüft ob x keine Zahl ist if(isNaN(x) == false && isNaN(y) == false){res = x – y;} //Zahl und String else if(isNaN(x) == false && isNaN(y) == true){res = -1;} else if(isNaN(y) == false && isNaN(x) == true){res = 1;} //zwei Strings else if(x < y){res = -1;} else if(y < x){res = 1;} //zwei gleiche Strings else {res = 0;} return(res) } a = new Array(); a[0] = 'a'; a[1] = 'b'; a[2] = '3'; a[3] = 'A'; a[4] = 'B'; a[5] = '11'; a.sort(vergleiche);

... ergibt die richtige Reihenfolge 3, 11, a, A, b, B.


Etwas schwieriger wird es da schon bei zweidimensionalen Arrays. Hierfür muss im Einzelfall je nach benötigter Sortierung die Sortierfunktion angepasst werden. Das folgende Beispiel zeigt eine einfache Sortierfunktion, welche die Daten zeilenweise nach Spalte 2 sortiert (wenn man davon ausgeht, dass das oberste Array die Zeilen darstellt):

function vergleiche(x,y) { return x[2] – y[2]; } a = new Array(); a[0] = new Array(7,8,9); a[1] = new Array(4,5,6); a[2] = new Array(1,2,3); a.sort(vergleiche);

5.4 Formulare kontrollieren

Das Auswerten von Formulardaten gehört zum Einmaleins von JavaScript und ist eine der am meisten benutzen Fähigkeiten, die JavaScript zu bieten hat. Ein Grund: Man kann noch vor dem eigentlichen Absenden des Formulars möglichen Fehlern leicht auf die Schliche kommen und damit dafür sorgen, dass am Server (also wenn das Formular tatsächlich abgeschickt wurde) möglichst nur Daten ankommen, die auch einigermaßen korrekt sind.

5.4.1 Zugriff auf Formulare

Um ein Formular verarbeiten zu können, muss man erst einmal Zugriff darauf haben. Jedes Formular ist auf mehrere Arten ansprechbar:

• document.forms[x], wobei x der Index des Formulars ist. Das erste Formular (<form ...>) in der Webseite (im Code am weitesten vorn) trägt den Index 0, das zweite 1, das dritte 2 usw.

• document.Formularname, wobei Formularname durch den Namen (<form name="Formularname" ...>) ersetzt wird. Hierbei ist zu beachten, dass, sofern es mehrere Formulare in einem Dokument gibt, jedes einen eindeutigen Namen tragen muss.

• Via this-Anweisung kann das Formular direkt aus dem onsubmit-Ereignis heraus adressiert werden (<form onsubmit="return machwas(this)" ...>).

Üblicherweise wird die zweite Schreibweise verwendet – es spricht jedoch auch nichts gegen die beiden anderen.

5.4 Formulare kontrollieren 111

5.4.2 Zugriff auf Formularelemente

Hat man Zugriff auf das Formular, kann man von dort aus auf die Formularelemente (Eingabefelder, Buttons, Checkboxen usw.) zugreifen. Dies kann wiederum entweder über den Index des Elements (document.formular.elements[x]) geschehen, wird allerdings üblicherweise über den Namen des Elements gehandhabt. Hierzu wird ebenso wie beim Formular selbst dem Element ein eindeutiger (!) Name gegeben, über den es dann ansprechbar ist:

<script language="JavaScript">  </script> <form name="form1"> E-Mail: <input type="Text" name="email" value=""> <input type="button" onclick="sagan()" value="Sag an!"> </form>

5.4.3 Formular überprüfen

Je nachdem, welche Formularelemente verwendet wurden, unterscheidet sich die Über-prüfung ein wenig. Die wichtigsten sollen hier kurz vorgestellt werden. Als Grundlage verwenden wir folgendes Formular:

<form onsubmit="return pruefen()" method="post" action="absenden.php" name="form1"> Name: <input type="Text" name="name" value=""><br> E-Mail: <input type="Text" name="email" value=""><br> <br> Passwort: <input type="Password" name="pass1"><br> Wiederholung: <input type="Password" name="pass2"><br> <br> Newsletter empfangen: <input type="Radio" name="news" value="ja"> Ja / <input type="Radio" name="news" value="nein"> Nein<br> <br> Wie sind Sie auf uns gekommen?<br> <select name="quelle" size="1"> <option value="-">- Bitte wählen -</option> <option value="Google">Google</option> <option value="Freund">Empfehlung von Freund</option> <option value="Werbung">Werbung</option>


<option value="Sonstiges">Sonstiges</option> </select><br> <br> <input type="Checkbox" name="agb" value="ja"> Ja, ich akzeptiere die AGB.<br> <br> <input type="Submit" value="Anmelden ..."> </form>

5.4.4 Eingabefelder

Besonders bei Kontaktanfragen ist meist die Eingabe eines Namens unumgänglich. Um zu prüfen, ob auch wirklich alle Felder ausgefüllt sind, wird einfach geschaut, ob sie einen nichtleeren Inhalt (value-Eigenschaft) besitzen:

function pruefen() { res = true; a = document.form1; if(a.name.value == ''){res = false;} if(a.email.value == ''){res = false;} //... weitere Prüfungen ... if(!res) {alert('Bitte Formular vollständig ausfüllen!');} return res; }

5.4.5 E-Mail-Felder

Bei Feldern, in die E-Mail-Adressen eingegeben werden sollen, sollte neben dem Inhalt auch geprüft werden, ob es sich dabei wirklich um eine E-Mail-Adresse handelt. Handelt es sich um eine E-Mail-Adresse, so steht mindestens ein Buchstabe vor dem @-Zeichen. Darüber hinaus sind drei weitere Buchstaben, ein Punkt und nochmals mindestens zwei Buchstaben danach vorhanden. Wem das zu komplex ist, der kann auch

a) lediglich prüfen, ob ein @-Zeichen vorhanden ist und der Inhalt mindestens 8 Zeichen lang ist, oder

b) mit sogenannten regulären Ausdrücken eine exakte Prüfung vornehmen.

Erstere Lösung könnte wie folgt aussehen:

if(a.email.value.indexOf('@') == -1){res = false;} if(a.email.value.length < 8){res = false;}

5.4 Formulare kontrollieren 113

Da der Inhalt eines Textfeldes (value) ein String ist, lassen sich auf ihn die Methoden des String-Objekts anwenden. Die indexOf-Methode fragt ab, an welcher Stelle im Text ein bestimmter anderer Text (hier das @-Zeichen) steht. Der Wert -1 signalisiert hier, dass das @-Zeichen nicht vorhanden ist. Anschließend wird mit der length-Eigenschaft die Länge (Anzahl der Zeichen) geprüft.

Die zweite und kompliziertere Lösung könnte z.B. so aussehen:

a = document.form1; reg = new RegExp('^([a-zA-Z0-9\\-\\.\\_]+)'+ //Name '(\\@)'+ //@-Zeichen '([a-zA-Z0-9\\-\\.]+)'+ //Domain '(\\.)'+ //Punkt '([a-zA-Z]{2,4})$'); //TLD if(reg.test(a.email.value) == false){res = false;}

Bei sogenannten regulären Ausdrücken handelt es sich um besondere String-Konstrukte, die dem RegExp-Parser (sozusagen der String-Prüfer) genaue Anweisungen geben, wonach er suchen soll. In diesem Fall soll er also genau nach den Zeichen suchen, die üblicherweise in einer E-Mail-Adresse vorkommen (eben mindestens ein Buchstabe, ein @-Zeichen sowie eine Internetdomain).

5.4.6 Passwortfelder

Passwortfelder werden in JavaScript genauso behandelt wie normale Eingabefelder – es ist sogar möglich, das Passwort auszulesen und mit einem gespeicherten String zu vergleichen. Bei Registrierformularen werden zudem üblicherweise zwei Passwortfelder angegeben: Um Fehleingaben vorzubeugen, wird das Passwort noch mal wiederholt und mit der ersten Eingabe verglichen – stimmen die Eingaben nicht überein, hat sich der User wohl vertippt. Beispiel:

a = document.form1; if(a.pass1.value != a.pass2.value) { alert('Das eingegebene Passwort stimmt nicht mit der '+ 'Wiederholung überein!'); res = false; }

5.4.7 Radio-Buttons und Checkboxen

Sind Radio-Buttons nicht von vornherein markiert, dann muss getestet werden, ob einer der Buttons beim Absenden des Formulars eine Markierung enthält. Da Radio-Buttons alle den gleichen Namen tragen, ergibt sich bei JavaScript automatisch ein Array für diese Buttons. Soll auf einen Button zugegriffen werden, so kann dies also über den


Index des Buttons geschehen: document.form1.news[x]... . Werden alle Buttons durchlaufen, kann getestet werden, ob einer markiert wurde (und ggf. welcher das ist):

a = document.form1; r = a.news; s = false; for(i=0;i<r.length;i++) { if(r[i].checked == true){ s = true; break; } } if(!s){res = false;}

Bei Checkboxen verhält es sich ähnlich: Auch hier wird die checked-Eigenschaft geprüft, nur eben ohne dabei ein Array zu durchlaufen:

if(!a.agb.checked){res = false;}

5.4.8 Select-Felder

Im Beispiel im Abschnitt 5.4.3 (»Formular überprüfen«) ist auch ein Select-Feld defi-niert, über das die Quelle des Besuchs ausgewählt werden kann. Damit der Besucher auch auf jeden Fall eine Quelle auswählt (die Standardauswahl ist ja »Bitte wählen«), sollte überprüft werden, welcher Eintrag gewählt wurde. Auf das Select-Feld kann wie bei allen Feldern über den Namen zugegriffen werden – die einzelnen Einträge sind über das options-Array abrufbar. Da uns in diesem Beispiel ausreicht zu wissen, dass nicht der erste Eintrag (»Bitte wählen«) gewählt wurde, brauchen wir nur zu prüfen, ob die Eigenschaft selectedIndex des Select-Feldes größer 0 (Null) ist. Die Eigenschaft gibt den Index des ausgewählten Eintrags an: Wurde der erste ausgewählt, gibt sie 0 aus, für den zweiten 1, für den dritten 2 usw. Wurde kein Eintrag markiert, gibt sie den Wert -1 zurück. In jedem Fall, in dem eine korrekte Auswahl erfolgte, ist der Wert dieser Eigen-schaft als größer als 0. Der dafür zuständige Code sieht dann in etwa so aus:

if(a.quelle.selectedIndex > 0){res = false;}

5.4.9 Das komplette Skript

Das komplette Skript könnte in diesem Fall dann also wie folgt aussehen:

function pruefen() { res = true; a = document.form1; if(a.name.value == ''){res = false;} if(a.email.value == ''){res = false;} if(a.email.value.indexOf('@') == -1){res = false;}

5.5 Fenster & Frames 115

if(a.email.value.length < 8){res = false;} reg = new RegExp('^([a-zA-Z0-9\\-\\.\\_]+)'+ //Name '(\\@)'+ //@-Zeichen '([a-zA-Z0-9\\-\\.]+)'+ //Domain '(\\.)'+ //Punkt '([a-zA-Z]{2,4})$'); //TLD if(reg.test(a.email.value) == false){res = false;} if(a.pass1.value != a.pass2.value) { alert('Das eingegebene Passwort stimmt nicht mit der '+ 'Wiederholung überein!'); res = false; } r = a.news; s = false; for(i=0;i<r.length;i++) { if(r[i].checked == true){ s = true; break; } } if(!s){res = false;} if(!a.agb.checked){res = false;} if(a.quelle.selectedIndex > 0){res = false;} if(!res) {alert('Bitte Formular vollständig ausfüllen!');} return res; }

5.5 Fenster & Frames

5.5.1 Daten ins Dokument schreiben

Eine der Haupt-Aufgaben von JavaScript ist es, errechnete Daten oder andere Werte in die Ausgabe, also die Webseite, zu schreiben. JavaScript bietet hierzu die Möglichkeit, das Dokument entweder komplett neu zu schreiben oder während des Öffnungsvor-gangs des Dokuments Daten einzufügen. Ein nachträgliches Ändern des bereits ange-zeigten Dokumentinhalts ist indes nicht ohne Weiteres möglich.

5.5.2 Dokument erweitern

Soll ein Dokument um errechnete Daten erweitert werden, geht dies eigentlich nur wäh-rend des Öffnen-Vorgangs, also wenn der Computer das Dokument liest, den enthalte-nen JavaScript-Code verarbeitet und das Dokument schließlich anzeigt. Das »eigentlich« steht im letzten Satz deshalb, da mit DHTML und Ajax eben genau das Gegenteil erreicht wird – nämlich das nachträgliche Ändern des Dokumentinhalts.

JavaScript und

Ajax

Jan Winkler


FRANZIS

> JavaScript-Grundlagen beherrschen und anwenden

> Ajax-Anwendungen verstehen und selbst programmieren

> Inklusive umfassender Objektreferenz zum Nachschlagen

Jan Winkler

Fast alle Webseiten haben eines gemeinsam: Sie bestehen aus JavaScript-,HTML- und CSS-Code. Während HTML und CSS stagnieren, hat sich Java-Script mit Ajax zur dominierenden Web-2.0-Technik weiterentwickelt.Dieses Buch vermittelt anhand konkreter Programmierbeispiele dieGrundlagen und einige fortgeschrittene Techniken von JavaScript und Ajax.

� Lernen Sie JavaScript kennen:Statische Websites sind von gestern – mit Hilfe von JavaScriptkönnen Sie den Dialog mit den Besuchern Ihrer Seite deutlichverbessern. Die Grundlagen und die Syntax von JavaScript lassensich schnell erlernen, und mit den zahlreichen Praxisbeispielenaus diesem Buch stellen sich schnell Erfolgserlebnisse ein. Zudemdient die umfassende Objektreferenz als ideales Nachschlagewerk.

� Dynamic HTML:Die DHTML-Technik verknüpft Standard-HTML mit JavaScript undCSS. Sie dient unter anderem dazu, neue Elemente in eine Web-seite einzufügen, ohne die komplette Seite neu in den Browserladen zu müssen. So erstellen Sie zum Beispiel ohne großen AufwandMouseOver-Effekte aller Art. Zudem können Sie Seitenobjektemit DHTML pixelgenau im Browser platzieren, Elemente ein- und ausblenden und auf Ereignisse wie Mausklicks reagieren.

� Komfortable Webanwendungen mit Ajax:Ajax verleiht Internetapplikationen die Benutzerfreundlichkeitlokal installierter Programme. Dieses Buch verrät Ihnen, wie SieAjax in Ihre Seite integrieren, und zeigt Ihnen verschiedene Typenvon Ajax-Anwendungen an konkreten Beispielen: Sie erfahren, wieSie einen interaktiven Warenkorb mit Drag & Drop-Eigenschaftenprogrammieren, eine interaktive Suche entwickeln und ein Chat-Modul realisieren. Außerdem erhalten Sie Einblicke in die wichtigstenAjax-Frameworks, die Sie bei der Entwicklung solcher Applikationenunterstützen.

� Alle Infos stets zur Hand:Die umfassende Objektreferenz bietet Ihnen einen Überblicküber die zentralen Code-Objekte von JavaScript und dessenPendant JScript, das in Microsofts Internet Explorer zuhause ist. Damit haben Sie den Funktionsumfang von JavaScript stets schnell und zuverlässig zur Hand.

Besuchen Sie unsere Website www.franzis.de

35,– EUR [D]

ISBN 978-3-7723-6262-0

JavaScript und

Ajax

Know-howist blau.

Aus dem Inhalt:

• JavaScript-Grundlagen

• JavaScript und Microsofts JScript

• Geeignete Editoren

• Einführung in Dynamic HTML

• Browsertypen erkennen

• Anzeigen und Ausblenden vonWebseitenelementen

• Positionierung von Objekten

• Ajax-Anfragen verschicken

• Ajax-Responses auswerten

• Ajax-Frameworks

• Drop-Down-Menüs programmieren

• Einen Online-Warenkorb entwickeln

• Interaktive Suche

• Popups erzeugen

• Ein Chat-Modul entwickeln

• Mit Cookies arbeiten

• Umfassende JavaScript-Objektreferenz

Java

Scrip

t und

Aja

xW

inkl

er


Über den Autor:Jan Winkler ist erfolg-reicher Internet-Publisherund leitet ein großes Online-Vermarktungs-unternehmen. Er lebt in Berlin.

Auf www.buch.cd:Sämtliche Programmbeispiele zum Download

FRA

NZI

S



6262-0 U1+U4 30.07.2009 14:48 Uhr Seite 1

Das Praxisbuch für Web-Entwickler Ajax JavaScript Ajax fileAjax Jan Winkler 2. aktualisierte...

Documents

Transcript of Das Praxisbuch für Web-Entwickler Ajax JavaScript Ajax fileAjax Jan Winkler 2. aktualisierte...