Javascript Tutor - Lektion 11
Arrays
Ein Array ist eine Gruppe. Ein Array ist auch ein Objekt und als Objekt hat es Eigenschaften.Es gibt 'eingebaute' Array, wie alle Bilder einer Seite. Schau Dir das mal an...
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="Javascript"><!--
function ShowSource(position)
{
window.document.form01.input01.value = window.document.images[position].src;
}
function NumberofImages()
{
alert(window.document.images.length);
}
//--></SCRIPT>
</HEAD>
<BODY>
<CENTER>
<A HREF="" onMouseOver="ShowSource(0) "><IMG SRC="food_icons/beer.gif" HEIGHT=32 WIDTH=32 ALT="img" HSPACE=4 BORDER=0></A>
<A HREF="" onMouseOver="ShowSource(1) "><IMG SRC="food_icons/burger.gif" HEIGHT=32 WIDTH=32 ALT="img" HSPACE=4 BORDER=0></A>
<A HREF="" onMouseOver="ShowSource(2) "><IMG SRC="food_icons/butter.gif" HEIGHT=32 WIDTH=32 ALT="img" HSPACE=4 BORDER=0></A>
<A HREF="" onMouseOver="ShowSource(3) "><IMG SRC="food_icons/carrot.gif" HEIGHT=32 WIDTH=32 ALT="img" HSPACE=4 BORDER=0></A>
<A HREF="" onMouseOver="ShowSource(4) "><IMG SRC="food_icons/cheese.gif" HEIGHT=32 WIDTH=32 ALT="img" HSPACE=4 BORDER=0></A>
<A HREF="" onMouseOver="ShowSource(5) "><IMG SRC="food_icons/cherries.gif" HEIGHT=32 WIDTH=32 ALT="img" HSPACE=4 BORDER=0></A>
<BR>
<A HREF="" onMouseOver="ShowSource(6) "><IMG SRC="food_icons/hotdog.gif" HEIGHT=32 WIDTH=32 ALT="img" HSPACE=4 BORDER=0></A>
<A HREF="" onMouseOver="ShowSource(7) "><IMG SRC="food_icons/icecream.gif" HEIGHT=32 WIDTH=32 ALT="img" HSPACE=4 BORDER=0></A>
<A HREF="" onMouseOver="ShowSource(8) "><IMG SRC="food_icons/lemon.gif" HEIGHT=32 WIDTH=32 ALT="img" HSPACE=4 BORDER=0></A>
<A HREF="" onMouseOver="ShowSource(9) "><IMG SRC="food_icons/pizza.gif" HEIGHT=32 WIDTH=32 ALT="img" HSPACE=4 BORDER=0></A>
<A HREF="" onMouseOver="ShowSource(10)"><IMG SRC="food_icons/salad.gif" HEIGHT=32 WIDTH=32 ALT="img" HSPACE=4 BORDER=0></A>
<A HREF="" onMouseOver="ShowSource(11)"><IMG SRC="food_icons/sammawich.gif" HEIGHT=32 WIDTH=32 ALT="img" HSPACE=4 BORDER=0></A>
<FORM NAME="form01">
<INPUT TYPE="text" NAME="input01" VALUE="" SIZE=70>
</FORM>
<A HREF="javascript:NumberofImages()">Klicke hier</A> für die Anzahl der Bilder auf dieser Seite.
</CENTER>
</BODY>
</HTML>
|
Dies veranschaulicht (mehr oder weniger) das Bilder-Array. Das Bilder-Array ist ein Array aller Bilder auf einer Seite: images[]. Den Browser interessiert es nicht sonderlich, was für Bilder das sind, also nummeriert er sie, beginnend mit 0. Das erste Bild ist images[0], das zweite Bild ist images[1], das dritte Bild ist images[2], usw. Das Array als Gesamtheit hat Eigenschaften, wovon eine die Länge ist. Dies wird durch den Textlink veranschaulicht, der die Anzahl der Bilder auf der Seite anzeigen soll. Jedes einzelne Bild hat auch Eigenschaften, wie z.B. scr (Quelle). Dies wird durch die Funktion ShowSource() veranschaulicht. Wir übergeben die Indexnummer an die Funktion und es zeigt die Bildquelle in einer Textbox an.
Ich weiß, dass Arrays etwas verwirrend sein können, also wenn es Dir noch ein wenig unklar vorkommt, ist das normal. Wir gehen noch tiefer darauf ein.
Übung: Ändere das vorherige Beispiel so, dass nur die Bilder auf der Seite angezeigt werden. Wenn der Nutzer auf ein Bild klickt, geht eine AlertBox auf wie folgt...
Du hast Bild Nummer 3 von insgesamt 12 Bildern ausgewählt. Die Quelle ist C:\pfad\pfad\burger.gif
Obwohl Du weißt, dass es insgesamt 12 Bilder auf der Seite gibt, möchte ich nicht, dass Du die "12" fest reinschreibst in die Funktion. Ich möchte, dass Du die Anzahl aus der Längen-Eigenschaft des Objekts Bilder-Array ermittelst.
Eine weitere Eigenschaft des einzelnen Bildes ist die Eigenschaft name. In einem Bilder-Tag können wir ein Bild benennen wie folgt...
<IMG SRC="mypic.gif" HEIGHT=32 WIDTH=32 NAME="img01">
Wir können das verwenden in einem Script (z.B. um die Quelle des Bildes zu ermitteln)...
window.document.images['img01'].src
Beachte, dass wir jetzt zwei Möglichkeiten haben, ein spezielles Bild in einem Bilder-Array anzusprechen... über die Nummer oder über den Namen. Studiere dies Idee, bis Du sie verstanden hast.
Übung: Erstelle eine neue Webseite mit 12 Nahrungs-Icons. Gib jedem Icon einen Namen. Wenn ein Nutzer auf ein Icon klickt, geht eine AlertBox auf, die die Bildquelle angibt. Ermittle die Quelle durch Verweis auf den Bild-Namen, nicht auf die Bild-Nummer.
Wir haben den Bild-Namen an die Funktion übergeben. Die Funktion hat ihn dann verwendet, um die Bildquelle zu ermitteln. Studiere diese Beispiel solange, bis es klar ist.
| << Zurück Weiter >> |
 |
 |
