JavaScript

Egna funktioner

Det går också att skriva egna funktioner som kan användas i koden. Meningen med en egen funktion är att den ska lösa en avdelad uppgift. Funktionen kan sen anropas om och om igen om så behövs utan att den kanske svåra koden som skrevs för att lösa det aktuella problemet måste upprepas.

Förklaring Det är ungefär som det fungerar i många kokböcker där man i recepten för t ex blåbärs- och rabarberpaj inte skriver ut hela beskrivningen för hur smuldeg görs utan hänvisar bara till sidan där det står som grundrecept.

Ett exempel på en funktion är :


function gissaHeltal(tal)

{

	if (tal == 4)

		alert('Du gissade rätt!');

	else

		alert('Du gissade fel!');

}	

Funktionen består av det reserverade ordet function som är starten på varje skriven funktion i JavaScript. Ett reserverat ord inom programmering innebär att du inte kan använda ordet som t ex variabelnamn. Efter function följer namnet på funktionen, ett antal inparametrar och en funktionskropp. Inparametrarna är det som ligger inom parenteserna och kan vara noll eller flera. De sparas i de variabelnamn som ligger på respektive plats. Anropas funktionen addera(tal1, tal2) med anropet addera(1,4) antar tal1 värder 1 och tal2 värdet 4 och har dessa värden inne i funktionskroppen. Funktionskroppen är där all kod som ska utföras ligger och är inom startmärket { och slutmärket }.

Funktionen addera skulle kunna ha följande utseende:


function addera(tal1, tal2){

   return tal1 + tal2;				 

}

När all kod som ligger i kroppen har utförts fortsätter programmet på den plats där funktionsanropet kom ifrån.

Vi ska fortsätta på exemplet om Nikes leksaker (skor). Vi har kommit så långt att vi skapat en variabel och tilldelat den värdet 10 och även skrivit ut detta på skärmen.

document.write(nrOfShoes);

<script type="text/javascript">



var nrOfShoes = 10;



document.write(nrOfShoes);

</script>

Vi ska göra om sidan så att användaren kan ge Nike nya skor eller säga till henne att äta upp skor. För detta behöver vi nu göra ett par nya saker. Dels ska vi sätta av en plats i dokumentet där vi dynamiskt ska kunna skriva ut hur många skor det finns. Vi ersätter koden som tidigare skrev ut hur många skor hon hade att leka med, med följande:


<H2>

Nike har 



<span id="shoes">10</span>



skor att leka med

</H2>

I nästa steg ska vi skriva en funktion som har som uppgift att hålla reda på nya skor som Nike får och de som hon har ätit upp. Dessutom får funktionen som uppgift att uppdatera det antal som står på skärmen. Funktionen får sitt indata från ett formulär som vi ska titta på lite senare. Funktionen ligger i skriptblocket i HEAD tillsammans med variabeln nrOfShoes.


var nrOfShoes = 10;



function get(nr)

{

nrOfShoes = nrOfShoes + parseInt(nr);

document.getElementById('shoes').childNodes[0].nodeValue=nrOfShoes;

}

Det mest intressanta med koden just nu är den markerade raden ovan. Här tas värdet in från variabeln nr och adderas med det antal skor som för tillfället finns (nrOfShoes). Eftersom det som kommer in från formuläret skickas som en textsträng måste vi använda oss av funktionen parseInt() som har som uppgift att läsa en sträng och göra det till ett heltal om det går. T ex förvandlas strängen "1" till heltalet 1 osv.

Den nedre raden kod har som uppgift att skriva in det nya antalet skor på skärmen. Det här görs på den plats som vi tidigare förberedde och vars id vi döpte till shoes. Du behöver inte förstå hela kodraden just nu, det hör mer till DHTML som kommer senare i kursen.

Testa resultatet nedan. Det blir fel om man skriver in något annat än en siffra och skickar formuläret. Det går självklart att skriva kod som filtrerar bort liknande fel och upplyser användaren vad felet består i, men vi vill hålla exemplet så enkelt som möjligt och litar på att användaren skriver in rätt värde. Uppstår detta fel och du vill prova igen är det bara att ladda om sidan (eller stänga fönstret och klicka på exemplet igen). Hela koden kan du se finns också att titta på.

Resultat

Kod

På samma sätt skapar vi även en funktion och ett formulär för att låta Nike äta upp en sko (vilket självklart får antalet skor att minska).

Resultat

Kod

Övning Som det ser ut nu på Nikes sidas över leksaker finns det både en tabell där det står ett visst antal skor och en rad under där det står ett annat antal skor. Din uppgift är att ersätta antalet i tabellen med det dynamiska antalet som vår variabel nrOfShoes erbjuder. Du behöver inte själv skriva någon egen kod, utan det handlar mest om att flytta rätt kod till rätt plats. Lycka till!

Lösningsförslag

Lösningsförslag kod