Funktioner

En funktion är en samling kommandon som får javaskriptet att fungera. Funktionen placeras inom SCRIPT-taggarna i HEAD-elementet och kan sedan anropas från BODY-elementet eller från den inledande BODY-taggen.

Så här ser det ut i HEAD-elementet:

<SCRIPT language="JavaScript">
<!-- Göm skriptet
function namn (parameter1, parameter2) {
en eller flera rader med javaskript
}
// Sluta gömma -->
</SCRIPT>

function
Det här talar om att det är en funktion du deklarerar.

namn
Det här är funktionens namn. Det kan heta nästan vad som helst, men skall skrivas som ett ord utan mellanslag. Vanligen ger man funktionen ett namn som visar vad den används till, till exempel dittNamn.

(parameter1, parameter2)
Parametrarna är värden som skickas till funktionen när den anropas. Du kan lämna parentesen tom eller lägga dit en eller flera parametrar.

{
Den inledande klammern sätts vanligen i slutet av raden som deklarerar funktionen. Från och med nästa rad kan du sedan lägga till den kod som anger vad funktionen skall göra.

}
Den avslutande klammern talar om att här slutar funktionen.

Det går att lägga funktioner inuti andra funktioner (nästade funktioner), men varje funktion måste ha ett eget klammerpar.

Anropet
Låt oss säga att du har deklarerat två variabler – "namn" och "husdjur" – vars värden fylls i av besökaren, samt att du har en funktion som heter vemDu. Du kan då anropa funktionen – få funktionen att utföra det som står i den – så här:
vemDu (namn,husdjur)

Koden i HEAD-elementet ser ut så här:

<SCRIPT language="JavaScript">
<!-- Göm skriptet
var namn;
var husdjur;
function vemDu() {
     var namn = prompt("Skriv ditt namn", "");
     var husdjur = prompt("Skriv vilken sorts husdjur du har", "");
     {
          alert("Hej, " + namn + ". Du har " + husdjur + ".")     
     }
}
// Sluta gömma -->
</SCRIPT>

var namn; och var husdjur;
Du börjar med att deklarera då båda variablerna. I just det här fallet behövs egentligen inte detta, men gör det ändå. När javaskripten blir stora, är det bra att ha alla variabler deklarerade redan i början av skriptet. Det minskar dessutom risken att du råkar ge flera variabler samma namn.

function vemDu() {
Här deklarerar du funktionen och du avslutar raden med den inledande klammern.

var namn = prompt("Skriv ditt namn", "");
Det här ger variablen "namn" ett värde. En prompt öppnas och besökaren uppmanas skriva in sitt namn. Sedan kan han klicka på OK. Det besökaren skrev i namnraden blir variablens värde.

var husdjur = prompt("Skriv vilken sorts husdjur du har", "");
Sedan öppnas en ny prompt, där besökaren får skriva in sitt husdjur. Det som skrivs blir värdet på variabeln "husdjur". Besökaren klickar sedan på OK.

{
Här har jag satt in en ny inledande klammer, före det som sedan skall inträffa. Den här klammern kan man utelämna (+ förstås den första avslutande klammern), men klammerparet runt nästa händelse gör skriptet mer lättläst.

alert("Hej, " + namn + ". Du har " + husdjur + ".")
Nu har båda variablerna fått värden och skriptkörningen fortsätter till den här raden. Den öppnar en meddelanderuta, där det står "Hej, [värdet på variabeln namn]. Du har [värdet på variablen husdjur]."

Om besökaren skrev "Nisse" och "hund och fyra katter" kommer det att stå "Hej Nisse. Du har hund och fyra katter."

}
Eftersom jag använde en inledande klammer före alert-raden, måste jag avsluta med en klammer. För att kunna hålla reda på vilka klamrar som hör vart, har jag gjort indrag i skriptet. Detta behövs inte, men gör skriptet lättare att läsa.

}
Sist placerar jag den klammer som avslutar hela funktionen.

Anropa funktionen

Om du lägger det här skriptet på en HTML-sida och sedan öppnar sidan i webbläsaren, händer ingenting alls. Du måste nämligen anropa funktionen också.

Här tänker jag visa två metoder för detta. 

<BODY onLoad="vemDu(namn,husdjur)">

onLoad
Det här gör att sidan först laddas färdigt. Sedan anropas funktionen vemDu. Då öppnas den första prompten och frågar efter besökarens namn. Sedan öppnas den andra som frågar efter husdjuren. Slutligen kommer meddelanderutan.

<FORM>
<INPUT type="button" value="Tycker du om djur?" onClick="javascript:vemDu()">
</FORM>

onClick="javascript:vemDu()"
Det här känner du igen från avsnittet om meddelanderutan. Koden skapar en knapp med texten "Tycker du om djur?". När besökaren klickar på knappen anropas funktionen "vemDu".

Om du vill kan du ange variabelnamnen också:
onClick="javascript:vemDu(namn,husdjur)"

Detta är i och för sig inte nödvändigt, men gör det enklare att läsa koden.

© SupportData.Net