Webdesign mit JavaScript & Ajax

00 Webdesign.book Seite III Freitag, 6. Oktober 2006 10:16 10 2. AUFLAGE Webdesign mit JavaScript & Ajax Nick Heinle, Bill Peña & Ulrich Speidel Beijing Cambridge Farnham Köln Paris Sebastopol Taipei Tokyo

00 Webdesign.book Seite IV Freitag, 6. Oktober 2006 10:16 10 Die Informationen in diesem Buch wurden mit größter Sorgfalt erarbeitet. Dennoch können Fehler nicht vollständig ausgeschlossen werden. Verlag, Autoren und Übersetzer übernehmen keine juristische Verantwortung oder irgendeine Haftung für eventuell verbliebene Fehler und deren Folgen. Alle Warennamen werden ohne Gewährleistung der freien Verwendbarkeit benutzt und sind möglicherweise eingetragene Warenzeichen. Der Verlag richtet sich im wesentlichen nach den Schreibweisen der Hersteller. Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen. Kommentare und Fragen können Sie gerne an uns richten: O Reilly Verlag Balthasarstr. 81 50670 Köln Tel.: 0221/9731600 Fax: 0221/9731608 E-Mail: kommentar@oreilly.de Copyright: 2006 by O Reilly Verlag GmbH & Co. KG 1. Auflage 2002 2. Auflage 2006 Die Darstellung von R2D2 im Zusammenhang mit dem Thema JavaScript ist ein Warenzeichen des O Reilly Verlags. Bibliografische Information Der Deutschen Bibliothek Die Deutsche Bibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über http://dnb.ddb.de abrufbar. Lektorat: Inken Kiupel, Köln Fachgutachten: Denny Carl, Berlin Korrektorat: Sibylle Feldmann, Düsseldorf Satz: DREI-SATZ, Husby Umschlaggestaltung: Michael Oreal, Köln Produktion: Andrea Miß, Köln Belichtung, Druck und buchbinderische Verarbeitung: Druckerei Kösel, Krugzell; www.koeselbuch.de ISBN-10 3-89721-471-7 ISBN-13 978-3-89721-471-2 Dieses Buch ist auf 100% chlorfrei gebleichtem Papier gedruckt.

00 Webdesign.book Seite V Freitag, 6. Oktober 2006 10:16 10 First Inhalt Vorwort........................................................ 1 Einstieg in JavaScript........................................... 1 Eigene Vor- und Zurück-Buttons nutzen.......................... 1 Beschreibende Links einfügen.................................. 4 Tag-und-Nacht-Skript........................................ 7 2 Mit Fenstern arbeiten.......................................... 23 Grundlagen bei der Arbeit mit Fenstern........................... 23 Neue Fenster öffnen.......................................... 26 Mit Fernbedienungsfenstern arbeiten............................. 33 3 Formulare und Validierung...................................... 43 Einführung in Formulare...................................... 43 Madlibs.................................................... 45 Die Formulareingabe überprüfen................................ 51 Ist das wirklich Ihre E-Mail-Adresse?............................. 55 Überprüfungen.............................................. 63 4 Ordnung durch Arrays.......................................... 69 Was sind Arrays?............................................ 69 Werden Sie unberechenbar!.................................... 70 Das Datum richtig angeben.................................... 74 Auswahlmenüs.............................................. 76 5 Browser und Plugins erkennen................................... 83 Mit welchem Browser haben wir es zu tun?........................ 84 Plugins ermitteln............................................. 86 Das Betriebssystem ermitteln................................... 92 VII V

00 Webdesign.book Seite VI Freitag, 6. Oktober 2006 10:16 10 6 Eine Site mit Hilfe von Cookies anpassen............................ 95 Was ist ein Cookie?.......................................... 95 Einfache Cookie-Operationen.................................. 96 Ein Willkommensgruß an neue Besucher......................... 102 Formulare, die sich erinnern................................... 107 Benutzerdefinierte Seiten...................................... 110 7 Dynamic HTML............................................... 119 Was ist DHTML?............................................ 119 Das Document Object Model................................... 120 Dynamische Cascading Style Sheets.............................. 122 Mit Layern vertraut werden.................................... 129 Browsererkennung........................................... 139 8 Interaktive DHTML-Verfahren.................................... 141 Drop-down-Menüs........................................... 141 Gleitende Register........................................... 145 Layer mit eingeschränktem Anzeigebereich scrollen................. 149 9 Anwendungen für Fortgeschrittene................................ 157 Objektorientiertes Skripting.................................... 157 Testen Sie Ihre Leser.......................................... 163 Relationale Menüs........................................... 173 Weiterführende Informationen................................. 181 10 Einfaches Ajax................................................ 183 Wozu eigentlich Ajax?........................................ 183 HTTP-Requests mit JavaScript-Objekten......................... 184 Eine einfache Chat-Anwendung mit Ajax......................... 191 11 Ajax und XML................................................ 199 Eine Schach-Anwendung mit Ajax............................... 199 Das Design des Schachspiels................................... 204 Die Implementierung auf der Clientseite.......................... 213 Das serverseitige Skript........................................ 224 A Häufig verwendete JavaScript-Objekte.............................. 227 B Event-Handler............................................... 235 C Stileigenschaften............................................. 237 D JavaScript-Syntax............................................. 239 Index......................................................... 243 Links VI Inhalt

00 Webdesign.book Seite 69 Freitag, 6. Oktober 2006 10:16 10 First Kapitel 4Getting in Line with Arrays KAPITEL 4 In diesem Kapitel: Hier Was Mini sind Arrays? IVZ eingeben! Werden Sie unberechenbar! Das Datum richtig angeben Auswahlmenüs Ordnung durch Arrays Erstellen auf den Arbeitsseiten (siehe Muster) Abstand untere Tabellenlinie zu Textanfang 1,8 cm -> also: manuell auf den Arbeitsseiten ziehen!!! Es gibt keine bessere Art, Informationen zu ordnen, als mit Hilfe von Arrays. Dieses Kapitel stellt die Arrays vor: was sie sind, wie sie funktionieren und wie man sie verwendet. Anschließend werden Sie Beispiele für die Arbeit mit Arrays kennenlernen. Zuerst erfahren Sie, wie Sie Ihre Website mit zufällig generiertem Inhalt ausstatten: Klänge, Bilder und Text werden sich ständig ändern. Dann zeigen wir, wie Sie Zahlen aus einem Date-Objekt in die Namen von Wochentagen und Monaten umwandeln können. Und schließlich werden wir Arrays mit Formularen kombinieren und damit eine einfache Navigationshilfe schaffen, die Platz spart und die Strukturierung Ihrer Website erleichtert. Was sind Arrays? Ein Array können Sie sich als eine einzige, gerade Reihe von Menschen vorstellen, die alle etwas in der Hand halten. Da es sich um eine einzelne Reihe handelt, also nie mehrere Personen nebeneinander stehen, können wir jeder Person eine Nummer zuweisen. Wenn Sie sagen:»würde mir die erste Person in der Reihe bitte zeigen, was sie in der Hand hält?«, dann zeigt die Person an der Spitze der Reihe, was sie hält. Durch die Bitte»Würde mir die neunundneunzigste Person in der Reihe zeigen, was sie in der Hand hält?«zeigt die neunundneunzigste Person, was sie hält. Das ist äußerst nützlich, da Sie nicht die Namen aller Personen zu kennen brauchen, sondern nur ihre jeweilige Position in der Reihe. Um die Verbindung zu JavaScript herzustellen, müssen wir natürlich die Begriffe ein wenig verändern. Die Menschenreihe ist ein Array. Jede Person in der Reihe ist ein Element des Arrays, und das, was sie in der Hand hält, sind die im Element gespeicherten Daten. Um in JavaScript ein Array zu erstellen, erzeugen wir einfach ein neues Array- Objekt: var leute = new Array( ); 69

00 Webdesign.book Seite 70 Freitag, 6. Oktober 2006 10:16 10 Dieser Code erzeugt ein neues Array namens leute. Auf die Elemente dieses Arrays greifen wir zu, indem wir die Nummer des Elements in eckige Klammern ([]) setzen. Das erste Element des Arrays leute sieht also folgendermaßen aus: leute[0]; Beachten Sie, dass das erste Element im Array nicht 1 ist, sondern 0. Diese Eigentümlichkeit hat JavaScript mit fast allen anderen Programmiersprachen gemeinsam. Für einen Computer mag es zwar logisch sein, bei 0 mit dem Zählen zu beginnen, aber Menschen kann es durchaus schwerfallen, sich darauf einzustellen. Sie müssen sich einfach angewöhnen, bei der Arbeit mit Arrays (und Zeichenketten, wie wir in Kapitel 3 gesehen haben) immer mit 0 zu beginnen. Wenn man gerade erst anfängt, JavaScript zu lernen, kann man das leicht übersehen und erhält dann Fehler im Code. Falls Sie also Probleme mit einem Skript haben, das Arrays verwendet, sollten Sie erst einmal nachprüfen, ob Sie die Elemente richtig nummeriert haben. Um dem ersten Element des Arrays leute einige Daten zu übergeben, verwenden wir die gleiche Syntax wie bei einer normalen Variablen: leute[0] = "meine Daten"; Hier hat das erste Element im Array den Wert»meine Daten«. Das war einfach, oder? Nun wollen wir diese Array-Begriffe auf einige echte Skripten anwenden. Links 0, 1, 2, Denken Sie daran: Das erste Element eines Arrays ist das Element 0. Fehler beim Nummerieren der Array-Elemente können zu unerwarteten Ergebnissen führen und zu Bugs, die nur schwer zu finden sind! Werden Sie unberechenbar! Möchten Sie Ihre Website mit Zufallszitaten, -bildern oder -klängen attraktiver machen? Sie können z.b. zufällig ausgewählte Zitate (Quote of the Day) oder einen zufällig generierten Satz anzeigen, der aus zufällig ausgewählten Substantiven, Adjektiven und Verben besteht. Zufallsskripten sind nicht nur eine amüsante Art, Ihre Website interessanter zu gestalten, sondern auch eine gute Möglichkeit, mehr über Arrays zu lernen. Das Array Damit wir etwas zufällig generieren können, müssen wir zuerst ein Array (also eine Liste) von Wörtern, Zitaten, Bildern oder anderen HTML-Objekten anlegen. Natürlich benötigen wir zuerst einmal Informationen, die sich dann zufällig auswählen lassen; dafür können wir alles von einfachen Wörtern bis hin zu eingebetteten Klängen, Bildern oder Java-Applets verwenden. Beispiel 4-1 zeigt ein Zitat- 70 Kapitel 4: Ordnung durch Arrays

00 Webdesign.book Seite 71 Freitag, 6. Oktober 2006 10:16 10 Rechts Array. Die erste Zeile erzeugt ein neues Array namens zitat, und die folgenden fünf Zeilen geben den ersten fünf Elementen des Arrays Werte. Beispiel 4-1: Ein Array für zufällig generierte Zitate var zitat = new Array( ); zitat[0] = "Der Ball ist rund, und das Spiel dauert 90 Minuten"; zitat[1] = "Schaun mer mal, dann sehn mer schon"; zitat[2] = "Schalke 05"; zitat[3] = "Das Geheimnis des Fußballs ist ja der Ball"; zitat[4] = "Es steht 1:1, genauso gut könnte es umgekehrt stehen"; Sobald wir die Zitate in das Array eingefügt haben, können wir leicht auf sie zugreifen. Die folgende Zeile zeigt, wie Sie das erste Zitat mit document.write( ) ausgeben: document.write(zitat[0]); Dadurch wird»der Ball ist rund, und das Spiel dauert 90 Minuten«ausgegeben, das erste Element im Array zitat. Wenn wir zitat[1] an document.write( ) übergeben, wird das Zitat»Schaun mer mal, dann sehn mer schon«ausgegeben, wenn wir zitat[2] übergeben, wird»schalke 05«ausgegeben usw. Zufallszahlen generieren Nachdem wir die Zitate in ein Array eingefügt haben, müssen wir sie noch zufällig auswählen. Dafür verwenden wir einen sogenannten Zufallszahlengenerator, der genau das macht, was sein Name impliziert: Er generiert Zufallszahlen. Um einen Zufallswert zu generieren, verwenden wir die integrierte JavaScript-Funktion mit Namen Math.random( ). Beispiel 4-2 zeigt den entsprechenden Code. Beispiel 4-2: Ein Zufallszahlengenerator function zufallszahl(n) { zahl = Math.floor(Math.random( ) * (n + 1)); return zahl; Die Funktion zufallszahl( ), die eine Zufallszahl zwischen 0 und ihrem Argument n zurückgibt, nutzt zwei integrierte JavaScript-Funktionen. Die erste, Math.random( ), generiert eine Zufallszahl zwischen 0.0 und 1.0. Um diese in eine Zufallszahl zwischen 0 und n umzuwandeln, multiplizieren wir mit n+1 und runden dann mit der zweiten integrierten JavaScript-Funktion, Math.floor( ), auf die nächstliegende ganze Zahl ab. Die letzte Zeile dieser Funktion ist zwar einfach, aber wichtig. Sie gibt die generierte Zufallszahl zurück, was bedeutet, dass die Zufallszahl an der Stelle eingefügt wird, an der wir die Funktion ursprünglich ausgeführt haben. Abbildung 4-1 veranschau- Werden Sie unberechenbar! 71

00 Webdesign.book Seite 72 Freitag, 6. Oktober 2006 10:16 10 licht dies. Anders ausgedrückt: Wir können den Zufallszahlengenerator folgendermaßen ausführen, um eine Zufallszahl zwischen 0 und 5 zu erhalten: Links Abbildung 4-1: Zufallszahlen verwenden document.write(zufallszahl(5)); Außerdem können wir den Ergebniswert von zufallszahl( ) in einer Variablen speichern: var zahl = zufallszahl(5); Zufallszugriff auf Array-Elemente Nun müssen wir den Zufallszahlengenerator auf das Array der Zitate anwenden. Wie machen wir das? Zuerst müssen wir die Anzahl der Elemente im Array kennen. In JavaScript hat jedes Array die Eigenschaft length, die die Anzahl der Elemente angibt, die es enthält. Beim Vergleich mit einer Menschenschlange wäre dies also die Anzahl der Personen in der Reihe. Die Anzahl der Elemente im Array zitat erhalten wir demnach folgendermaßen: zitat.length Mit length können wir eine Zufallszahl generieren, um auf ein zufälliges Element des Arrays zuzugreifen: zufallszahl(zitat.length); 72 Kapitel 4: Ordnung durch Arrays

00 Webdesign.book Seite 73 Freitag, 6. Oktober 2006 10:16 10 Rechts Wir wissen, dass zitat fünf Elemente enthält. Demzufolge liefert uns diese Codezeile eine Zufallszahl zwischen 0 und 5. Das ist jedoch noch nicht ganz das, was wir möchten. Da das erste Element eines Arrays in JavaScript das Element 0 und im Array zitat das letzte Element zitat[4] ist, benötigen wir also eine Zufallszahl zwischen 0 und 4. Dies erreichen wir mit der folgenden Zeile: zufallszahl(zitat.length - 1); Nun brauchen wir nur noch dasjenige Element des Arrays zu extrahieren, das mit der Zufallszahl übereinstimmt. Den Code für die Generierung der Zufallszahl können wir dort einfügen, wo die Anzahl der Array-Elemente hingehört, und schon haben wir ein zufällig ausgewähltes Zitat: zitat[zufallszahl(zitat.length - 1)]; Schließlich geben wir dieses Zitat noch mit document.write() aus: document.write(zitat[zufallszahl(zitat.length - 1)]); Beispiel 4-3 zeigt den vollständigen Quellcode des Skripts für die zufällige Generierung eines Zitats. Beispiel 4-3: Eine Seite mit zufällig ausgewähltem Zitat <html> <head> <title>zufällig ausgewähltes Zitat</title> <script language="javascript"> // Erzeuge das Array. var zitat = new Array( ); zitat[0] = "Der Ball ist rund, und das Spiel dauert 90 Minuten"; zitat[1] = "Schaun mer mal, dann sehn mer schon"; zitat[2] = "Schalke 05"; zitat[3] = "Das Geheimnis des Fußballs ist ja der Ball"; zitat[4] = "Es steht 1:1, genauso gut könnte es umgekehrt stehen"; // Zufallszahlengenerator function zufallszahl(n) { zahl = Math.floor(Math.random( ) * (n + 1)); return zahl; </script> </head> <body bgcolor="#ffffff" text="#000000"> <script language="javascript"> // Zeige das zufällig ausgewählte Zitat an. document.write(zitat[zufallszahl(zitat.length - 1)]); </script> </body> </html> Werden Sie unberechenbar! 73

00 Webdesign.book Seite 74 Freitag, 6. Oktober 2006 10:16 10 Zufallsklänge und -bilder Sie können nicht nur zufällig generierte Wörter anbieten, sondern auch Bilder, Java- Applets und andere HTML-Objekte oder irgendeine Kombination aus diesen Objekten verwenden. Fügen Sie diese Elemente einfach direkt in ein Array ein und verwenden Sie die Array-Elemente dann ganz nach Bedarf. Wenn Sie z.b. ein Zufallsbild generieren möchten, können Sie den folgenden Code verwenden: var bild = new Array( ); bild[0] = "image1.gif" bild[1] = "image2.gif" bild[2] = "image3.gif" bild[3] = "image4.gif Damit erstellen Sie ein Array mit vier Bilddateien. Um diese zufällig anzuzeigen, ändern Sie das Skript in Beispiel 4-3 einfach so ab, dass es ein img-tag ausgibt, das ein Zufallselement aus dem Array bild anzeigt: document.write("<img src='" + bild[zufallszahl(bild.length -1)] + "'/>"); Links Das Datum richtig angeben In Kapitel 1 haben Sie das Date-Objekt kennengelernt. Dort haben wir besprochen, wie man auf verschiedene Zeiteinheiten zugreift, das aktuelle Datum anzeigt und den Unterschied (in Tagen) zwischen zwei Daten ermittelt. Allerdings haben wir nicht erklärt, wie man auf einer Seite ein vollständig formatiertes Datum anzeigt (z.b. Montag, 31. Juli 2006). Beispiel 4-4 löst dieses kleine Problem mit Hilfe der»assoziationsfähigkeit«von Arrays. Beispiel 4-4: Ein vollständig formatiertes Datum ausgeben <html> <head> <title>das Datum angeben</title> </head> <body> <script language="javascript"> // Array von Wochentagnamen. var tagesnamen = new Array( ); tagesnamen[0] = "Sonntag"; tagesnamen[1] = "Montag"; tagesnamen[2] = "Dienstag"; tagesnamen[3] = "Mittwoch"; tagesnamen[4] = "Donnerstag"; tagesnamen[5] = "Freitag"; tagesnamen[6] = "Samstag"; 74 Kapitel 4: Ordnung durch Arrays

00 Webdesign.book Seite 75 Freitag, 6. Oktober 2006 10:16 10 Rechts Beispiel 4-4: Ein vollständig formatiertes Datum ausgeben (Fortsetzung) // Array von Monatsnamen. var monatsnamen = new Array( ); monatsnamen[0] = "Januar"; monatsnamen[1] = "Februar"; monatsnamen[2] = "März"; monatsnamen[3] = "April"; monatsnamen[4] = "Mai"; monatsnamen[5] = "Juni"; monatsnamen[6] = "Juli"; monatsnamen[7] = "August"; monatsnamen[8] = "September"; monatsnamen[9] = "Oktober"; monatsnamen[10] = "November"; monatsnamen[11] = "Dezember"; // Elemente des Date-Objekts werden Variablen zugewiesen. var jetzt = new Date( ); var tag = jetzt.getday( ); var monat = jetzt.getmonth( ); var jahr = jetzt.getfullyear( ); var datum = jetzt.getdate( ); // Code, der das vollständig formatierte Datum ausgibt. // (z.b. Montag, der 31. Juli 2006) document.write("<h1>" + tagesnamen[tag] + ", der " + datum + ". "); document.write(monatsnamen[monat] + " " + jahr + "</h1>"); </script> </body> </html> Im Grunde genommen verbindet dieses Skript die numerisch formatierten Daten von JavaScript mit solchen, die Sie und ich verstehen. Wenn man z.b. den Wochentag mit getday( ) direkt aus dem Date-Objekt holt, ist er eine Zahl zwischen 0 und einschließlich 6. Das Skript in Beispiel 4-4 verwendet das Array tagesnamen, das die vollständigen Namen aller Wochentage enthält. Das erste Element, tagesnamen[0], enthält das Wort»Sonntag«, das zweite Element, tagesnamen[1], enthält das Wort»Montag«usw. bis»samstag«in tagesnamen[6]. Wenn das Skript JavaScript nach dem Wochentag fragt, gibt jetzt.getday( ) eine Zahl zwischen 0 und einschließlich 6 zurück, die in der Variablen tag gespeichert wird. Am Donnerstag ist tag also 4. Wenn wir 4 in tagesnamen einfügen, greifen wir auf tagesnamen[4] zu, das»donnerstag«enthält, also genau das, was wir anzeigen möchten. Diesen Prozess verwenden wir auch für Monatsnamen. Diese sind in einem eigenen Array, monatsnamen, gespeichert. Im Juli gibt jetzt.getmonth( ) den Wert 6 zurück (nicht 7, da Januar nicht der Monat 1, sondern der Monat 0 ist), den wir in der Variablen monat speichern. Fügen wir 6 in das Array monatsnamen ein, erhalten wir»juli«. Das Datum richtig angeben 75

00 Webdesign.book Seite 76 Freitag, 6. Oktober 2006 10:16 10 Die letzten beiden Zeilen sind am wichtigsten: Sie zeigen auf der Seite das formatierte Datum an, indem sie die numerischen Datumswerte in die entsprechenden Arrays einfügen, wie wir es bereits erklärt haben. Falls der Wert von tag also 1, der Wert von monat 6, der Wert von datum 30 und der Wert von jahr 2005 ist, zeigt das Skript»Montag, der 31. Juli 2006«an. Abbildung 4-2 veranschaulicht dies. Achten Sie darauf, dass das Jahr und der Monatstag nicht eigens formatiert werden müssen. Links Abbildung 4-2: Ein vollständig formatiertes Datum, das mit Arrays von Wochentag- und Monatsnamen erzeugt wurde Auswahlmenüs Das Auswahlmenü (ein Pop-up-Menü in einem Formular) ist ein hervorragendes Mittel, wenn Sie auf einer Website Platz sparen müssen. (Beschriften Sie es jedoch unbedingt klar, damit die Anwender alle Auswahlmöglichkeiten erkennen können.) Abbildung 4-3 zeigt, dass Auswahlmenüs sehr viele Optionen enthalten können, aber nur sehr wenig Platz einnehmen, wenn sie gerade nicht verwendet werden. Die Startseite des BBC World Service enthält sogar zwei solche JavaScript-Auswahlmenüs, über die die Anwender schnell zu ihrer gewünschten Sprache navigieren und ihre gesuchten Programme auswählen können. Mit JavaScript wird das alles lokal gemacht, so dass man nicht erst warten muss, bis der Server die Informationen verarbeitet hat. In diesem Abschnitt werden Sie lernen, wie Sie einer Seite mit JavaScript dieses Popup-Auswahlmenü hinzufügen können. Das Skript geht in drei Schritten vor: Erstellen von Arrays für die Namen und die URLs der Seiten Anzeigen des Formulars auf der Seite Erstellen des»spring«-codes Die Arrays erzeugen Zuerst müssen wir zwei Arrays erzeugen. Das erste Array enthält die Namen der Seiten, die wir im Auswahlmenü angeben möchten. Das zweite Array, das gemeinsam mit dem ersten verwendet wird, enthält die URLs dieser Seiten. 76 Kapitel 4: Ordnung durch Arrays

00 Webdesign.book Seite 77 Freitag, 6. Oktober 2006 10:16 10 Rechts Abbildung 4-3: Das BBC-Auswahlmenü mit direkten Links zu beliebten Programmen Im Gegensatz zu den Arrays im Zufallsskript mit den Zitaten werden die Arrays im Skript für das Auswahlmenü nicht elementweise, sondern auf einmal erzeugt. Das ist einfach eine Kurzform, durch die Ihr Code schlanker wird. Sehen Sie sich das Array seiten in Beispiel 4-5 genau an. Die Daten für dieses Array werden direkt an die Funktion übergeben, die das Array einrichtet.»wählen Sie eine Seite«repräsentiert die Daten in seiten[0], dem ersten Element des Arrays,»Autos«die Daten in seiten[1], dem zweiten Element des Arrays, usw. Beispiel 4-5: Die beiden Arrays, die im Auswahlmenü verwendet werden // Das Array seiten enthält die Beschreibung der Seiten. var seiten = new Array( "Wählen Sie eine Seite", "Autos", "Karriere", "Computing", Auswahlmenüs 77

00 Webdesign.book Seite 78 Freitag, 6. Oktober 2006 10:16 10 Beispiel 4-5: Die beiden Arrays, die im Auswahlmenü verwendet werden (Fortsetzung) "Entertainment", "Spiele"); Links // Das Array urls enthält die URLs der Seiten. var urls = new Array( "", "autos.html", "karriere.html", "computing.html", "entertainment.html", "spiele.html"); Das Array seiten enthält die Namen (Beschreibungen) der Seiten, die im Auswahlmenü angezeigt werden sollen. Das Array urls enthält die URLs, die diesen Beschreibungen entsprechen. So ist»autos«z.b. das zweite Element im Array seiten; wenn»autos«im Auswahlmenü gewählt wird, wird die Seite unter der Adresse autos.html geladen, da diese das zweite Element im Array urls ist. Achten Sie unbedingt darauf, dass die Positionen der Elemente im Array seiten mit den Positionen der Elemente im Array urls übereinstimmen. Das erste Element im Array seiten,»wählen Sie eine Seite«, macht überhaupt nichts, da das entsprechende Element im Array urls leer ("") ist.»wählen Sie eine Seite«dient nur dazu, die Besucher darauf hinzuweisen, dass sie hier tatsächlich etwas anklicken können. Das Menü anzeigen Nun müssen wir das Auswahlmenü auf der Seite anzeigen. Was könnte dafür besser geeignet sein als JavaScript? Da wir diesen Prozess automatisieren können, brauchen wir die Namen der Seiten nicht neu zu schreiben. Beispiel 4-6 zeigt den entsprechenden Code. Beispiel 4-6: Das Auswahlmenü erstellen <script language="javascript"> document.write('<form>'); document.write('<select name="wahlmenue" onchange="zuseite(this.form);">'); for (var i = 0; i < seiten.length; i++) { document.write('<option>' + seiten[i] + '</option>'); document.write('</select>'); document.write('</form>'); </script> Dieser Code erscheint auf den ersten Blick vielleicht etwas verwirrend. Gehen wir ihn also Schritt für Schritt durch. Die erste Zeile des Skripts zeigt das Formular auf der Seite an, und die zweite Zeile beginnt damit, das Auswahlmenü zu erstellen, wobei sie ihm den Namen wahlmenue gibt. Außerdem gibt diese Zeile den Event- Handler onchange für das Auswahlmenü an. Sobald der Anwender ein Element des 78 Kapitel 4: Ordnung durch Arrays

00 Webdesign.book Seite 79 Freitag, 6. Oktober 2006 10:16 10 Rechts Menüs auswählt, führt das Skript die Funktion zuseite() aus, die die ausgewählte Seite in das Browserfenster lädt. Anschließend zeigt eine for-schleife alle Optionen (Seitennamen) im Auswahlmenü an. Eine for-schleife ist ein häufig verwendetes Programmierkonstrukt, das einen angegebenen Codeblock so lange wiederholt, bis eine bestimmte Bedingung erfüllt ist. In JavaScript hat die for-schleife die folgende Syntax: for (Initialisierung; Bedingung; ändere etwas an der Laufvariablen) { führe diesen Code aus Eine for-schleife besteht aus vier Hauptteilen: dem Initialisierungscode, der Bedingung, dem Code, der etwas an der Laufvariablen ändert, und dem Code, der ausgeführt wird. Die ersten drei Teile stehen in runden Klammern hinter for und sind durch Semikola voneinander getrennt. Danach folgt der vierte Teil in geschweiften Klammern. Der Initialisierungscode wird nur einmal ausgeführt; er ist das Erste, was die for- Schleife macht. Dann prüft die for-schleife die Bedingung. Falls diese erfüllt ist (true), führt die Schleife den Code in den geschweiften Klammern aus, geht dann zum letzten Element in den runden Klammern (dem Änderungscode) zurück und führt diesen Code aus. Anschließend wird dieser Prozess wiederholt, wobei die for- Schleife prüft, ob die Bedingung weiterhin auf die geänderte Laufvariable zutrifft, um festzustellen, ob der Code in geschweiften Klammern erneut ausgeführt werden soll. Falls die Bedingung erfüllt ist (true), wird der Code in den geschweiften Klammern ausgeführt, dann wird der Änderungscode ausgeführt, dann die Bedingung geprüft usw. Irgendwann sollte die Bedingung nicht mehr erfüllt sein (false), wodurch die Wiederholung beendet wird. Abbildung 4-4 zeigt, wie eine for- Schleife funktioniert. Abbildung 4-4: So funktioniert eine for-schleife. Auswahlmenüs 79

00 Webdesign.book Seite 80 Freitag, 6. Oktober 2006 10:16 10 Sehen wir uns dies nun konkret an der for-schleife in Beispiel 4-6 an: for (var i = 0; i < seiten.length; i++) { document.write('<option>' + seiten[i] + '</option>'); Diese Schleife erzeugt zuerst die Variable i und setzt sie auf 0. Dies ist der Initialisierungscode für die for-schleife. Anschließend fragt die for-schleife:»ist i kleiner als die Länge des Arrays seiten?«da die Länge von seiten 6 und i gleich 0 ist, ist die Bedingung true, und die for-schleife führt den Code innerhalb der geschweiften Klammern aus. Nun erhöht die for-schleife den Wert von i um 1 (i++), fragt, ob i noch immer kleiner ist als die Länge des Arrays seiten, und führt den Code innerhalb der geschweiften Klammern aus, falls dies zutrifft. Dieser Prozess wird wiederholt, bis i gleich der Länge des Arrays seiten ist. Dann ist die Schleife abgeschlossen, da die Bedingung nicht mehr true ist. Wie werden nun die Seitenbeschreibungen angezeigt? Bei jeder Wiederholung der Schleife erzeugt document.write( ) ein option-element, das eine der Seitenbeschreibungen aus dem Array seiten anzeigt. So ist z.b. beim ersten Durchlauf der for- Schleife i gleich 0. Wenn i in das Array seiten eingefügt wird (seiten[i]), erhalten wir das erste Element des Arrays»Wählen Sie eine Seite«. Beim zweiten Schleifendurchlauf erhalten wir das zweite Element,»Autos«. Bei jeder Wiederholung der Schleife wird i um 1 hochgesetzt, so dass jede Beschreibung in ein eigenes option- Element eingefügt wird, bis das Ende des Arrays seiten erreicht ist. Sobald alle Optionen für das Auswahlmenü auf der Seite angezeigt werden, werden Menü und Formular abgeschlossen. Abbildung 4-5 zeigt unsere Auswahlliste. Links Abbildung 4-5: Unser Auswahlmenü Zu der Seite springen Der letzte Schritt bei der Initialisierung des Auswahlmenüs ist die Erstellung der Funktion, die zu der ausgewählten Seite springt. Wie Sie in Kapitel 3 bereits gelernt haben, kann ein Formular sich selbst an eine Funktion übergeben. Genau dies 80 Kapitel 4: Ordnung durch Arrays

00 Webdesign.book Seite 81 Freitag, 6. Oktober 2006 10:16 10 Rechts haben wir in Beispiel 4-6 gemacht, als wir this.form als Teil des Event-Handlers onchange für das Auswahlmenü an die Funktion zuseite( ) übergeben haben. Beispiel 4-7 zeigt die Funktion zuseite( ). Beispiel 4-7: Die Funktion zuseite( ) function zuseite(form) { var i = form.wahlmenue.selectedindex; if (i!= 0) { window.location = urls[i]; Die Funktion zuseite( ) verwendet die Eigenschaft selectedindex des Auswahlmenüs (wahlmenue), um zu ermitteln, welche Option ausgewählt wurde. Wenn z.b. die erste Option ausgewählt wurde, ist der Wert von selectedindex 0. Wurde die zweite Option ausgewählt, ist der Wert 1. Mit diesen Informationen ermittelt die Funktion, welche URL sie liefern muss. Da die erste Option im Auswahlmenü,»Wählen Sie eine Seite«, nichts macht, ändert die Funktion die Seite nicht, falls selectedindex gleich 0 ist. Indem Sie diese Zeile in eine if-anweisung einfügen, können Sie der Funktion mitteilen, dass sie die Fensteradresse nur ändern soll, falls i ungleich 0 ist. Die letzte Zeile ist die wichtigste, da sie den Anwender mit window.location zu der URL für die ausgewählte Seite bringt. Hier kommt das Array urls ins Spiel. Das Skript sucht einen Eintrag im Array urls, der mit der ausgewählten Option übereinstimmt, und ermittelt dadurch, welches Dokument es laden soll. Falls der Anwender z.b. die zweite Option (»Autos«) ausgwählt hat, gibt das Auswahlmenü für selectedindex den Wert 1 zurück. Da sich das Array urls und das Array seiten gegenseitig spiegeln, entspricht»autos«autos.html, und das Skript springt zu dieser URL. Beispiel 4-8 zeigt den vollständigen Code für das Auswahlmenü-Skript. Wenn Sie es für Ihre eigene Website verwenden möchten, geben Sie Ihre Seitennamen und URLs an. Vergessen Sie nicht, noch einmal zu überprüfen, ob die Elemente in den Arrays wirklich übereinstimmen. Beispiel 4-8: Quellcode für das vollständige Auswahlmenü-Skript <html> <head> <title>auswahlmenü</title> <script language="javascript"> // Das Array seiten enthält die Beschreibung der Seiten. var seiten = new Array( "Wählen Sie eine Seite", "Autos", "Karriere", Auswahlmenüs 81

00 Webdesign.book Seite 82 Freitag, 6. Oktober 2006 10:16 10 Beispiel 4-8: Quellcode für das vollständige Auswahlmenü-Skript (Fortsetzung) "Computing", "Entertainment", "Spiele"); Links // Das Array urls enthält die URLs der Seiten. var urls = new Array( "", "autos.html", "karriere.html", "computing.html", "entertainment.html", "spiele.html"); // Die Funktion zuseite( ) ermittelt, welche Seite ausgewählt wurde, und springt zu ihr. function zuseite(form) { var i = form.wahlmenue.selectedindex; if (i!= 0) { window.location = urls[i]; </script> </head> <body> <p>wählen Sie eine Seite:</p> <script language="javascript"> // Das Auswahlmenü wird überall dort angezeigt, wo Sie diesen Code einfügen. document.write('<form>'); document.write('<select name="wahlmenue" onchange="zuseite(this.form);">'); for (var i = 0; i < seiten.length; i++) { document.write('<option>' + seiten[i] + '</option>'); document.write('</select>'); document.write('</form>'); </script> </body> </html> 82 Kapitel 4: Ordnung durch Arrays