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 20

Forms og javaScript

Vi har allerede arbejdedet en smule med forms. Nu skal vi lave lidt mere.

Øvelse: For at opfriske det lidt, skal du lav en tekstboks og en knap. Når brugeren klikker på knappen, skal det der er i tekstboksen viser sig i en alert boks.

Her er en løsning.

Når du ser på disse eksempler, og når du laver din egen scripting, vil du måske se, at der er forskellige måder at gøre tingerne på. Du kan tit bruge færre og mere effektive instruktioner i et script. Efter et stykke tid, vil du lære nogle fiduser, så du kan gøre dine scripts mere kompakte. Eksempler i dette undervisningsprogram er med vilje scriptede påen enkel, nem og forståelig måde. Mit arbejde er at undervise dig så du kan forstå det, ikke imponere og forvirre dig. Hvis en anden person fortæller dig, at der er en anden måde at gøre det på har de sikkert ret. Men jeg kan forsikre dig, at alt dette her er udmærket kode, og endnu vigtigere, det er skrevet så det kan forstås af en begynder.

Øvelse: Lav tre ekstra tekstbokse (inputs) lidt længere nede på siden. Lav scriptet om således at når du klikker på knappen, flytter indholdet af boks 1 sig til boks 2, indholdet af boks 2 flytter sig til boks 3, indholdet af boks 3 flytter sig til boks 4, indholdet af boks 4 forsvinder, og boks 1 er tom. Tip: Der er ikke nogen "clear" metode for tekstbokse... men du kan sætte dennes værdi til "".

Her er en løsning.

Et typisk form element er en "radio knap". Prøv at gennemskue følgende script... 

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

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

function FruitBox()
{
   alert(window.document.myform.fruit.value);
}

//--></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>
Vælg din favorit og <A HREF="javascript:FruitBox()">klik her</A>.
</FORM>

</BODY>
</HTML>

Prøv det.

Der er nogle ting man skal forstå. Bemærk at selvom der er tre seperate elementer, har de tre radio knapper det samme navn, derfor har de kun en værdi. Selvom vi vil se at de kan få hver deres reference og blive håndteret hver for sig, er de stadig en gruppe og kan endog bliv betragtet som et enkelt input.

Bemærk også, at når siden først indlases er værdien af det sæt af knapper "ikke defineret". (Selvom vi checker en knap via HTML, kommer JS værdien stadig op som udefineret). Når du klikker på linket læser funktionen blot den værdi som onClick har fastsat.

Før du fortsætter skal du forstå hvad det er der sker.

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

JavaScript Reference      irt.org/Javascript FAQ      Deja Power Search      Joke Break