1.6 Funksjoner

Når vi har lagret data kan vi bearbeide den slik at vi kan få ny informasjon som vi kan dra nytte av. Det er dette vi prøver å beherske og bli gode til når vi lærer oss programmering. Når vi lagrer tall, er vi som regel interesserte i å bruke tallene i beregninger. Vi har også sett at vi kan behandle tekststrenger og arrayer med metoder. I dette delkapittelet skal vi lage våre egne funksjoner der vi selv bestemmer hvilken oppgave funksjonen skal løse. En funksjon består av én eller flere linjer med kode. Koden kjøres bare når vi kaller på funksjonen. Det gjør at vi kan bruke funksjonen mange ganger, og vi bestemmer selv når vi vil at funksjonens kode skal kjøre.

En funksjon består av én eller flere linjer med kode. Vi definerer en funksjon i script-elementet på denne måten:

1 const funksjonsnavn = () => { 2 //Skriv en eller flere linjer med kode

3 }

Nedenfor definerer vi en funksjon som øker verdien til variabelen tall med én:

1 <script> 2 let tall = 0 3 const økMedEn = () => { 4 tall++

5 } 6 </script> 7 <p>Tallet er {tall}.</p>

I koden har vi bare definert funksjonen. Når henter verdien til tall på nettsiden, vises verdien 0. Det er fordi koden til funksjonen ikke kjører før vi har kallet på funksjonen. I script-elementet kaller vi på funksjonen ved å skrive funksjonsnavnet etterfulgt av parenteser, slik vi har gjort i linje 6:

1 <script> 2 let tall = 0 3 const funksjonsnavn = () => { 4 tall++

5 } 6 økMedEn() 7 </script> 8 <p>Tallet er {tall}.</p>

Fordi vi nå har kallet på funksjonen, har verdien til tallet økt med én.

KNAPPER

På nettsider finner vi ofte knapper vi kan klikke på for å få noe til å skje. Da er det en funksjon som er koblet til knappen, og som setter i gang det vi ønsker. Når vi klikker på knappen, kaller vi altså på en funksjon.

EKSEMPEL

Vi bruker HTML-elementet button til å lage knapper på en nettside. Teksten vi skriver mellom start- og sluttaggen, vises på knappen. I Svelte kobler vi en funksjon til en knapp med koden on:click=(funksjonsnavn) i starttaggen til button-elementet. I koden nedenfor har vi lagt til en knapp som er koblet til funksjonen økMedEn.

1 <script> 2 let tall = 0 3 const økMedEn = () => { 4 tall++

5 } 6 </script> 7 <p>Tallet er {tall}.</p> 8 <button on:click={økMedEn}> Øk tallet med én </button>

Resultatet av to klikk på knappen.

Legg merke til at vi ikke skrev parenteser etter funksjonsnavnet i siste kodelinje. Om vi hadde skrevet økMedEn(), ville funksjonen blitt kallet på når nettsiden blir lastet inn, og ikke når vi klikker på knappen.

Fargemodus på nettside

I programmet nedenfor har vi laget to funksjoner som endrer tekstfargen og bakgrunnsfargen på en nettside. Funksjonene er koblet til hver sin knapp.

1 <script> 2 let tekstfarge = "black" 3 let bakgrunnsfarge = "white"

4

5 const lysModus = () => { 6 tekstfarge = "#FF3300" 7 bakgrunnsfarge = "beige"

8 } 9 const mørkModus = () => { 10 tekstfarge = "#009966" 11 bakgrunnsfarge = "#333333"

12 } 13 </script>

14 15 <div ="color: {tekstfarge}; background-color: {bakgrunnsfarge}; height: 100%"> 16 <button on:click={lysModus} style="color: #FF3300; background-color: beige;">Lys</button> 17 <button on:click={mørkModus} style="color: #009966; background-color: #333333;" >Mørk</button>

18 19 <p>Alt går over. Eller mer presist: <br/>Alt går over i noe annet.</p> 20 <p style="font-size: small; text-align: right;"> 21 – Elling (<i>Brødre i blodet</i> av Ingvar Ambjørnsen) 22 </p> 23 </div>

FUNKSJONER MED PARAMETERE OG RETURVERDIER

Noen av funksjonene du har brukt tidligere, har tatt inn en eller flere verdier og returnert et svar. Når vi skriver Math.sqrt(25), sender vi tallet 25 inn i funksjonen. Da regner funksjonen ut kvadratroten av 25 og returnerer svaret 5. Vi kaller verdiene vi sender inn i en funksjon, for parametere.

Vi definerer en funksjon med parametere og returverdi slik:

1 const funksjonsnavn = (parameter1, parameter2) => { 2 //Parameterne fungerer som variabler inni funksjonen. 3 //Verdien vi skriver etter return, returneres. 4 return verdi

5 }

Parameterne får verdier når vi kaller på funksjonen. Disse verdiene kalles argumenter. Vi kaller på en funksjon med parametere slik

funksjonsnavn("Argument1", "Argument2")

EKSEMPEL

Funksjon med én parameter

Vi lager et program der en bruker kan angi verdien for fart målt i meter per sekund (m/s) i et inputfelt. På skjermen vises farten i kilometer i timen (km/h) og miles per hour (mph).

1 <script> 2 let fart = 0

3 4 const tilKMH = (meterPrSek) => { 5 return meterPrSek*3.6

6 } 7 8 const tilMPH = (meterPrSek) => { 9 return meterPrSek/0.44704

10 } 11 </script>

12 13 <label> 14 Angi farten i m/s: 15 <input type="number" bind:value={fart}> 16 </label> 17 <p> 18 {fart} m/s tilsvarer {tilKMH(fart).toFixed(2)} km/h 19 og {tilMPH(fart).toFixed(2)} mph. 20 </p>