JavaScript — Introduktion genom exempel

2.5 Parametrar och returvärde

I ett tidigare exempel såg vi hur ett program kan delas upp i flera funktioner. Dels för att få en uppdelning i mindre delar och på så sätt strukturera programkoden. Dels för att koppla olika funktioner till olika element och händelser, t.ex. olika funktioner för olika knappar i gränssnittet. Nu ska vi titta på hur vi kan skicka parametrar (indata) till en funktion och hur en funktion kan returnera ett svar. Exemplet är uppdelat i tre delar:

1. JavaScripts fördefinierade funktioner använder sig av parametrar och i många fall även returvärden.
2. I några egendefinierade funktioner definieras parametrar och värden skickas till dem, då funktionerna anropas.
3. Utveckling av föregående steg, där koden skrivs om, så att en av funktionerna också returnerar ett värde.

Sammanfattning

• Parametrar definieras i funktionsdeklarationen, t.ex. function fnamn(par1, par2) { ... }. Inom parentesen namnger man parametrarna och inom funktionens klamrar används de på samma sätt som variabler.
• Då man anropar en funktion skickar man värden till parametrarna, t.ex. fnamn(27, "en text"); Dessa värden läggs då in i funktionens parametrar (par1=27 och par2="en text") och funktionen utförs med dessa värden.
• Använder man en variabel som parameter i anropet av en funktion, är det variabelns innehåll som skickas över till parametern. Om t.ex. variabel a innehåller värdet 5 och man skriver fnamn(a, "abc") skickas värdet 5 till par1 och "abc" till par2.
• En funktion kan returnera ett värde, t.ex. return 37; eller return sum; Det är alltid ett värde som returneras, så om variabeln sum innehåller värdet 68 är det värdet 68 som returneras.
• Om en funktion har ett returvärde, måste man ta emot det i anropet av funktionen, t.ex. i en tilldelning av en variabel eller använda svaret i ett uttryck, let x = prod(2,7); eller y * prod(3,4)
• En funktion kan ha flera parametrar, men endast ett returvärde.
• Ibland används benämningen argument istället för parametrar, men det är samma sak.

Egna övningar

Här följer ett förslag på några egna övningar. Öppna filen test.html och test.js och utför nedanstående punkter. Den här gången är övningarna lite mer omfattande än i tidigare exempel, för att det också ska bli någon funktionalitet som kan testas.

Programmet har två tärningar och har i stort sett samma programkod som i föregående exempel, med några tillägg. Du ska nu lägga till följande:

• Parametrar:

  • Inför en parameter kallad dieElem i deklarationen av funktionen throwDie.
  • Kasta båda tärningarna:
    • I throwAllDice skriver du ett anrop av throwDie, där du skickar med die1Elem som parameter.
      • Prova att klicka på knappen, för att se att den första tärningen kastas.
    • Lägg till ännu ett anrop av throwDie och skicka nu med die2Elem som parameter.
      • När du klickar på knappen, ska båda tärningarna kastas.
  • Kasta endast en tärning:
    • I throwOneDie lägger du in ett anrop av throwDie, där du skickar med this som parameter.
      • Funktionen throwOneDie är kopplad till img-taggarna för tärningarna, så oavsett vilken tärning man klickar på, kommer man till denna funktion. Då är this en referens till den img-tagg användaren klickat på.
      • Prova att klicka på tärningarna, för att kasta dem var för sig..

• Beräkna summan:

  • Du ska nu beräkna summan av de båda tärningarna och behöver då tärningarnas värden. Värdet finns visserligen i filnamnet, men för att enklare komma åt det, ska det också sparas i ett attribut i img-taggen. I img-taggen finns inget value-attribut, så vi använder istället alt-attributet. Lägg till en rad sist i funktionen throwDie, där du sparar dieValue i tärningens alt-attribut.
  • I funktionen diceSum beräknar du summan, genom att lägga ihop tärningarnas alt-attribut. Spara summan i en lokal variabel.
    • Då man avläser alt-attributet tolkas det som text, så du måste konvertera till tal med Number.
  • Skriv sedan ut variabeln tillsammans med lämplig text i elementet för resultat.