Webdesign mit JavaScript Nick Heinle & Bill Pena 1.Auflage Juli 2002 ISBN 3-89721-275-7 282 Seiten

Ordnung durch Arrays

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.

Das Array

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 nebeneinanderstehen, 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. Wenn Sie bitten »Würde mir die neunundneunzigste Person in der Reihe bitte zeigen, was sie in der Hand hält?«, dann 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();

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, daß 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 daran zu gewöhnen. Sie müssen sich einfach angewöhnen, bei der Arbeit mit Arrays (und Zeichenketten, wie wir in Kapitel 4 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, dann prüfen Sie nach, ob Sie die Elemente richtig numeriert haben.

Um dem ersten Element des Arrays leute einige Daten zu übergeben, verwenden wir dieselbe 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 Skripte anwenden.

0, 1, 2, ...

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 oder einen zufällig generierten Satz anzeigen, der aus zufällig ausgewählten Substantiven, Adjektiven und Verben besteht. Zufallsskripte sind nicht nur eine amüsante Art, Ihre Website interessanter zu machen, sondern auch eine gute Möglichkeit, mehr über Arrays zu lernen.

Abbildung 51 zeigt das Weblog einer Online-Community namens MetaFilter (http://www.metafilter.com). Ganz oben auf der Seite wird unter dem Logo ein nach dem Zufallsprinzip ausgewählter Spruch, eine sogenannte Tagline, angezeigt (z.B. »we're all in this together«). Jedesmal, wenn Sie die Seite besuchen, wird eine andere Nachricht angezeigt. MetaFilter verwendet hierfür zwar Perl und serverseitige Programmierung, aber mit JavaScript ist es auch nicht schwieriger.

Abbildung 5-1: MetaFilters zufällig generierte Tagline

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 wir dann zufällig auswählen können; dafür können wir alles von einfachen Wörtern bis hin zu eingebetteten Klängen, Bildern oder Java-Applets verwenden. Beispiel 5-1 zeigt das Tagline-Array für MetaFilter. Die erste Zeile erzeugt ein neues Array namens tagline, und die folgenden fünf Zeilen geben den ersten fünf Elementen des Arrays Werte.

 var tagline = new Array();
 
 tagline[0] = "the Plastic.com it's okay to like";
 tagline[1] = "weblog as conversation";
 tagline[2] = "you're wrong. no, you're wrong!";
 tagline[3] = "self-policing since 1999";
 tagline[4] = "we're all in this together";

Sobald wir die Taglines in das Array eingefügt haben, können wir leicht auf sie zugreifen. Die folgende Zeile zeigt, wie Sie die erste Tagline mit document.write() ausgeben:

 document.write(tagline[0]);

Dadurch wird »the Plastic.com it's okay to like« ausgegeben, das erste Element im Array tagline. Wenn wir tagline[1] an document.write() übergeben, wird die Tagline »weblog as conversation« ausgegeben, wenn wir tagline[2] übergeben, wird »you're wrong. no, you're wrong!« ausgegeben usw.

Zufallszahlen generieren

Nachdem wir die Taglines 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 5-2 zeigt den entsprechenden Code.¹

 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, daß die Zufallszahl an der Stelle eingefügt wird, an der wir die Funktion ursprünglich ausgeführt haben. Abbildung 52 veranschaulicht dies. Anders ausgedrückt: Wir können den Zufallszahlengenerator folgendermaßen ausführen, um eine Zufallszahl zwischen 0 und 5 zu erhalten:

 document.write(zufallszahl(5));

Außerdem können wir den Ergebniswert von zufallszahl() in einer Variablen speichern:

 var zahl = zufallszahl(5);

Abbildung 5-2 : Eine Zufallszahl verwenden

Zufallszugriff auf Array-Elemente

Nun müssen wir den Zufallszahlengenerator auf das Array der Taglines 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 tagline erhalten wir demnach folgendermaßen:

 tagline.length

Mit length können wir eine Zufallszahl generieren, um auf ein zufälliges Element des Arrays zuzugreifen:

 zufallszahl(tagline.length);

Wir wissen, daß tagline 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 ist und im Array tagline das letzte Element tagline[4] ist, benötigen wir also eine Zufallszahl zwischen 0 und 4. Dies erreichen wir mit der folgenden Zeile:

 zufallszahl(tagline.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 eine zufällig ausgewählte Tagline:

 tagline[zufallszahl(tagline.length - 1)];

Schließlich geben wir diese Tagline noch mit document.write() aus:

 document.write(tagline[zufallszahl(tagline.length - 1)]);

Beispiel 5-3 zeigt den vollständigen Quellcode des Skripts für die zufällige Generierung einer Tagline.

 <html>
 <head>
 <title>Zufällig ausgewählte Tagline</title>
 <script language="Javascript">
 // Erzeuge das Array.
 var tagline = new Array();
 
 tagline[0] = "the Plastic.com it's okay to like";
 tagline[1] = "weblog as conversation";
 tagline[2] = "you're wrong. no, you're wrong!";
 tagline[3] = "self-policing since 1999";
 tagline[4] = "we're all in this together";
 
 // Zufallszahlengenerator
 function zufallszahl(n) {
     zahl = Math.floor(Math.random() * (n + 1));
     return zahl;
 }
 </script>
 </head>
 
 <body bgcolor="#FFFFFF" text="#000000">
 <script language="JavaScript">
 // Zeige die zufällig ausgewählte Tagline an.
 document.write(tagline[zufallszahl(tagline.length - 1)]);
 </script>
 </body>
 </html>

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 dieser Objekte 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 im Beispiel 5-3 einfach so ab, daß es ein img-Tag ausgibt, das ein Zufallselement aus dem Array bild anzeigt:

 document.write("<img src='" + bild[zufallszahl(bild.length -1)] + "'>");

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, 29. Juli 2002). Beispiel 5-4 löst dieses kleine Problem mit Hilfe der »Assoziationsfähigkeit« von Arrays.

 <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";
 
 // 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 29. Juli 2002)
 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, dann ist er eine Zahl zwischen 0 und einschließlich 6. Das Skript im Beispiel 5-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 zu »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 Prozeß 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, so erhalten wir »Juli«.

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 2001 ist, dann zeigt das Skript »Montag, der 29. Juli 2002« an. Abbildung 53 veranschaulicht dies. Achten Sie darauf, daß das Jahr und der Monatstag nicht eigens formatiert zu werden brauchen.

Abbildung 5-3 : 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 54 zeigt, daß Auswahlmenüs sehr viele Optionen enthalten können, aber nur sehr wenig Platz einnehmen, wenn sie gerade nicht verwendet werden.

Netscapes Suchseite enthält rechts oben ein JavaScript-Auswahlmenü, in dem die Anwender alle verfügbaren Bereiche der Netscape-Website sehen und schnell zu ihnen navigieren können. Mit JavaScript wird das alles lokal gemacht, so daß man nicht erst warten muß, bis der Server die Informationen verarbeitet hat.

Abbildung 5-4: Netscapes Auswahlmenü mit Links zu den wichtigen Bereichen der Website

In diesem Abschnitt werden Sie lernen, wie Sie einer Seite mit JavaScript dieses Pop-up-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.

Im Gegensatz zu den Arrays im Tagline-Zufallsskript 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 im Beispiel 5-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.

 // Das Array seiten enthält die Beschreibung der Seiten.
 var seiten = new Array(
     "Wählen Sie eine Seite",
     "Autos",
     "Karriere",
     "Computing",
     "Entertainment",
     "Spiele");
 
 // 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, daß 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, daß 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 Prozeß automatisieren können, brauchen wir die Namen der Seiten nicht neu zu schreiben. Beispiel 5-6 zeigt den entsprechenden Code.

 <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 beginnt das Formular auf der Seite anzuzeigen, und die zweite Zeile beginnt 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 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. Dann wird dieser Prozeß 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 55 zeigt, wie eine for-Schleife funktioniert.

Abbildung 5-5: So funktioniert eine for-Schleife

Sehen wir uns dies nun konkret an der for-Schleife in Beispiel 5-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 Prozeß 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 daß 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 das Menü und das Formular abgeschlossen. Abbildung 56 zeigt unsere Auswahlliste.

Abbildung 5-6 : 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 4 bereits gelernt haben, kann ein Formular sich selbst an eine Funktion übergeben. Genau dies haben wir im Beispiel 5-6 gemacht, als wir this.form als Teil des Event-Handlers onChange für das Auswahlmenü an die Funktion zuSeite() übergeben haben. Das Beispiel 5-7 zeigt 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, dann ist der Wert von selectedIndex 0. Wenn die zweite Option ausgewählt wurde, ist der Wert 1. Mit diesen Informationen ermittelt die Funktion, welchen URL sie liefern muß.

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, daß 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 dem 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 widerspiegeln, entspricht »Autos« autos.html, und das Skript springt zu diesem URL.

Und wie mache ich das bei Frames?

Beispiel 5-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.

 <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",
     "Computing",
     "Entertainment",
     "Spiele");
 
 // 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>