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 23

Multiple functions

Du har tit brug for mere end en funktion for at skrive kraftige scripts. En funktion kaldes frem og denne funktion benytter andre funktioner.

Her er et eksempel... 

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

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

function SayHi()
{
   GetName();
   alert("Hej " + myname);
}

function GetName()
{
   myname = prompt("Hvad hedder du?", "");
}

//--></SCRIPT>

</HEAD>
<BODY>

<A HREF="javascript:SayHi()">Klik her</A>

</BODY>
</HTML>

Prøv det.

Kan du se hvad der sker? Linket kalder SayHi() frem, som derefter kalder GetName() frem. Efter GetName() er udført, vender kontrol tilbage til SayHi() og alertboksen kommer frem.

Der er en vigtig regel som du skal kende... en variabel angivet i en function er kun tilgængelig i den function. En variabel angivet udenfor og foran en function er tilgængelig hvor som helst.

Men hvis du kigger på function GetName(), vil du se at variablen myname er angivet, men den bliver stadig brugt i function SayHi() i alert command. Hvordan kan det være? Vi "angav" ikke myname... vi brugte den bare. For at angive en variabel et sted, skal du sætte "var" foran. Du vil se forskellen ved at ændre eksemplet ovenfor, og angive variablen myname indenfor GetName()... 

   var myname = prompt("Hvad hedder du?", "");

Prøv det.

Det fungerer ikke vel? Men hvorfor fungerede det før? Fordi uden en angivelse som bruger "var", formoder scriptet at det er en global variable (en global variable er en variable tilgængelig hvor som helst).

Hvorfor er dette vigtigt? Hvorfor ikke gøre ALLE variabler globale? Fordi, når du begynder at lave større scripts, skal du være meget forsigtig når du navngiver variabler. Du KAN faktisk gøre alle variabler globale. Det har vi gjort hele tiden. Men nu kan vi vælge. Du kan bruge en variabel med navnet "navn" i ti forskellig funktioner uden script til at forvirre dem eller ændre deres værdi ved en fejltagelse.

Al denne snak om multiple functions og global, overfor variables, fører til et meget vigtig begreb... reusability. En genbrugs funktion er en funktion som foretager en bestemt opgave, og som kan overføres til mange applicationer. Du skriver et lille stykke, som foretager en bestemt ting, og hver gang du har brug for den bestemte ting, indsættes funktionen og bruger det, som et lille værktøj.

Der er et lille stykke genbrugs kode som jeg bruger hele tiden. Det er min tilfældigt tal generator... 

// Random number generator. If max=3 then function returns 1,2 or 3 
function getRandom(max) {return (Math.floor(Math.random()*max))+1;}

(Den er kogt ned til en enkelt linie, for at gøre den nemmere at bruge.)

Når jeg vil have et tilfældigt tal mellem 1 og et eller andet, kalder jeg getRandom(something) frem . (Selvfølgelig indsætter jeg denne stump et sted i scriptet, normalt ved eller tæt ved den øverste del.) Hvis jeg vil have et tilfældigt tal mellem 1 og 100 henter jeg getRandom(100).

Vi har tidligere drøftet promptbokse returning en værdi? Jeg fik denne funktion til at gøre lige det. Lagde du mærke til "return" udsagnet? Denne funktion er skrevet for at angive et tilfældigt tal. Den fremkalder ikke kun tilfældige tal, den sender det også tilbage til det der fremkaldte det.

Kig på følgende... 

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

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

// Random number generator. If max=3 then function returns 1,2 or 3
function getRandom(max) {return (Math.floor(Math.random()*max))+1;}

function GetNumber()
{
   mynumber = getRandom(10);
   alert(mynumber);
}

//--></SCRIPT>

</HEAD>
<BODY>

<A HREF="javascript:GetNumber()">Klik her</A>

</BODY>
</HTML>

Prøv det.

mynumber er lig med det funktionen returner. Funktionen returner et tilfældigt tal mellem 1 og 10, mynumber svarer til et tilfældigt tal mellem 1 og 10.

Forstå dette begreb inden du fortsætter.

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