pagetutor.com - HTML tutorials for the rest of us
JavaScript Tutor v 1.0 oversat af Ewan Rasmusson & Andrew Smith af Joe Barta
pagetutor.com
Download som zip fil.
JavaScript Tutor - Lektion 11

Arrays

Et array er en gruppe. En array er også et objekt der har egenskaber. Et array er bygget som et sæt billeder på en side. Prøv at kigge på ..... 

<HTML>
<HEAD>
<TITLE></TITLE>

<SCRIPT language="JavaScript"><!--

function VisKilde(position)
{
   window.document.form01.input01.value = window.document.images[position].src;
}

function AntalBilleder()
{
   alert(window.document.images.length);
}

//--></SCRIPT>

</HEAD>
<BODY>

<CENTER>
<A HREF="" onMouseOver="VisKilde(0) "><IMG SRC="food_icons/beer.gif"      
HEIGHT=32 WIDTH=32 ALT="img" HSPACE=4 BORDER=0></A>
<A HREF="" onMouseOver="VisKilde(1) "><IMG SRC="food_icons/burger.gif"    
HEIGHT=32 WIDTH=32 ALT="img" HSPACE=4 BORDER=0></A>
<A HREF="" onMouseOver="VisKilde(2) "><IMG SRC="food_icons/butter.gif"    
HEIGHT=32 WIDTH=32 ALT="img" HSPACE=4 BORDER=0></A>
<A HREF="" onMouseOver="VisKilde(3) "><IMG SRC="food_icons/carrot.gif"    
HEIGHT=32 WIDTH=32 ALT="img" HSPACE=4 BORDER=0></A>
<A HREF="" onMouseOver="VisKilde(4) "><IMG SRC="food_icons/cheese.gif"    
HEIGHT=32 WIDTH=32 ALT="img" HSPACE=4 BORDER=0></A>
<A HREF="" onMouseOver="VisKilde(5) "><IMG SRC="food_icons/cherries.gif"  
HEIGHT=32 WIDTH=32 ALT="img" HSPACE=4 BORDER=0></A>
<BR>
<A HREF="" onMouseOver="VisKilde(6) "><IMG SRC="food_icons/hotdog.gif"    
HEIGHT=32 WIDTH=32 ALT="img" HSPACE=4 BORDER=0></A>
<A HREF="" onMouseOver="VisKilde(7) "><IMG SRC="food_icons/icecream.gif"  
HEIGHT=32 WIDTH=32 ALT="img" HSPACE=4 BORDER=0></A>
<A HREF="" onMouseOver="VisKilde(8) "><IMG SRC="food_icons/lemon.gif"     
HEIGHT=32 WIDTH=32 ALT="img" HSPACE=4 BORDER=0></A>
<A HREF="" onMouseOver="VisKilde(9) "><IMG SRC="food_icons/pizza.gif"     
HEIGHT=32 WIDTH=32 ALT="img" HSPACE=4 BORDER=0></A>
<A HREF="" onMouseOver="VisKilde(10)"><IMG SRC="food_icons/salad.gif"     
HEIGHT=32 WIDTH=32 ALT="img" HSPACE=4 BORDER=0></A>
<A HREF="" onMouseOver="VisKilde(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:AntalBilleder()">Klik her</A> 
for at se antal billeder på denne side.

</CENTER>

</BODY>
</HTML>

Prøv det.

Dette viser et billed array. Billed arrays er et array af alle billeder på en side. Browseren er ikke nødvendigvis interesseret i hvordan billederne er, så den numrerer fra 0 og opefter. Det første billede er billede nr.0, det andet billede nr.1, det trejde er nr 2. Array som helhed har egenskaber. En af dem er længde. Det kan ses som en sammenkædende tekst som nummererer sidens billeder. Hvert enkelt billede har også egenskaber, som f.eks. en kilde. Det kan ses ved funktionen "vis kilde". Vi oplyser funktionen om indeksnummeret, hvorefter billedkilden vises i teksboksen.

Array kan virke forvirrende, men det er helt normalt.

Øvelse: Lav om på det foregående eksempel således at der kun kommer et billede på siden. Når brugeren klikker på billedet, fremkommer en alert boks, der kan se ud som... 

Du vælgte billede nr. 3 ud af 12.
Kilden er C:\path\path\burger.gif

Selvom du godt ved at der er 12 billeder på siden, skal du ikke kode dette ind i funktionen. I stedet skal du hente nummeret fra billedarrayet.

Her er en løsning.

Hvert enkelt billede har også en navne egenskab. På billedets mærkat, kan vi give et billede et navn, som f.eks. ... 

<IMG SRC="mypic.gif" HEIGHT=32 WIDTH=32 NAME="img01">

Vi kan derefter bruge navnet i et script ved f.eks. at finde billedets kilde.... 

window.dokument.billedet['img01'].src

Læg mærke til at vi nu har fået to måder at beskrive et bestemt billede på i et billedarray - enten med tal eller med navn. Studer eksemplet indtil du har forstået det.

Øvelse: Lav en ny web side ved hjælp af de 12 mad ikoner. Giv hvert billede et navn. Gør det på den måde, at hvis brugeren klikker på billedet, så dukker der en alert boks op med billedets kilde. Få fat på kilden via navn og ikke via indeksnummer.

Her er en løsning.

Vi gav billedets navn til funktionen. Funktionen brugte det til at bestemme billedkilden. Studer eksemplet indtil du har forstået det.

<< Tilbage         Næste >>

JavaScript Tutor

   Lektioner:   Intro  1  2  3  4  5  6  7  8  9  10  11  12  13  14  15  16  17  18  19  20  21  22  23  24  25