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 22

Der er sandsynligvis mer end en måde at løse dette problem på. En løsning ville være, at sende to værdier til funktionen... 

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

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

function FruitBox(whichfruit, fruitname)
{
   window.document.myform.fruit[whichfruit].checked = true;
   window.document.myform.fruit.value = fruitname;
}

//--></SCRIPT>

</HEAD>
<BODY>

<FORM NAME="myform">
<INPUT TYPE="radio" NAME="fruit" onClick="window.document.myform.fruit.value =
 'appelsiner'">Appelsiner & Mandariner<BR>
<INPUT TYPE="radio" NAME="fruit" onClick="window.document.myform.fruit.value =
 'bananer'">Bananer<BR>
<INPUT TYPE="radio" NAME="fruit" onClick="window.document.myform.fruit.value =
 'ferskner'">Ferskner, Nektariner & Blommer<BR>
For at vælge Appelsiner <A HREF="javascript:FruitBox(0,'appelsiner')">Klik her</A>.<BR>
For at vælge Bananer <A HREF="javascript:FruitBox(1,'bananer')">Klik her</A>.<BR>
For at vælge Ferskner <A HREF="javascript:FruitBox(2,'ferskner')">Klik her</A>.<BR>
For at vælge den nuværende værdi 
<A HREF="javascript:alert(window.document.myform.fruit.value)">Klik her</A>.
</FORM>

</BODY>
</HTML>

Prøv det.

Kan du se hvordan det fungere? Studer det indtil du forstår det.

Når du har gennemgået de fleste basic scripts, vil du tit opdage at du kan komme frem til det samme resultat på flere måde. Det er meget vigtigt at huske, at selvom der er argumenter for at den ene måde er bedre end den anden, at en metode giver mindre problemer end en anden o.s.v. er det der er vigtigst, at den metode du vælger fungerer.

Lad os tage en lille omvej og se på ideen om at sende en funktion mere end en variabel.

Betragt følgende... 

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

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

function DoSomething(item1,item2)
{
 alert(item1 + item2)
}

//--></SCRIPT>

</HEAD>
<BODY>

<A HREF="javascript:DoSomething(1,'roses')">Klik her</A>

</BODY>
</HTML>

Prøv det.

Vi sender funktionen 2 mængder. Funktionen bruger derefter disse mængder i sin udførsel.

Øvelse: Byg et script med fem links....

Jesper
Per
Frido
Michael
Anja

Hvert link skal sende følgende information til en funktion... navn, alder, og yndlingsfarve. Når du klikker på et link, vil jeg have at en alertboks kommer frem med et udsagn som...

Jesper er 34 år gammel og hans yndlingsfarve er rød.

Bemærk at der står "hans" yndlingsfarve. Anja er en kvinde, defor skal der stå "hendes" yndlingsfarve. Byg dette script og find en måde at løse hans/hendes problemet.

Her er en løsning.
Her er en anden løsning.

Som jeg har sagt før, der er altid mere end en måde at udføre opgaven på.

Tilbage til forms og javaScript...

Øvelse: Lav en form med fire radio knapper. Mærk hver knap med navnet på en farve. Når brugeren klikker på en radio knap, ændrer sidens baggrundsfarve sig. Tip: selvom det er fristende at indsætte dine javaScript kommandoer direkte i linket, vil du måske finde at dette kan være lidt begrænsende. Vi antager, at du vil tilføje noget til funktionen. Hvis alle kommandoerne findes i et link, bliver du nødt til at ændre alle links hver gang du vil ændre i scriptet. Hvis alle links finder en måde at pege på en funktion, skal du kun lege med funktion. Med det i tankerne, opbyg det således at det er funktion der lave arbejdet.

Her er en løsning.

<< 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