42 Funksjoner Kapittel 4 Funksjoner Etter dette kapitlet skal du kunne lage og bruke enkle funksjoner lage og bruke funksjoner som tar argumenter lage og bruke funksjoner med returverdier forklare forskjellen mellom globale og lokale variabler kommentere funksjoner slik at de kan brukes av andre pssst Du finner videoer og andre ressurser på nettstedet på Lokus. Vi har allerede sett flere eksempler på funksjoner i denne boka: Math.random() gir oss et tilfeldig tall, Math.floor() runder ned et tall til nærmeste heltall, og console.log() lar oss skrive noe til konsollen. Vi kan tenke på en funksjon som et lite program, som kan brukes i større programmer. Vanligvis har de konkrete oppgaver, som å runde ned et tall, eller finne et gjennomsnitt. Funksjoner kan brukes mange ganger, og de kan brukes på ulike tidspunkter. Funksjoner gjør det også lettere for oss å organisere kode, fordi vi kan samle funksjoner ett sted i koden vår, og bruke dem andre steder. 4.1 Enkle funksjoner Vi lager 1 en funksjon i JavaScript ved å bruke nøkkelordet function: function funksjonsnavn() { /* kode */ Etter nøkkelordet function, angir vi funksjonens navn etterfulgt av parenteser. Deretter angis funksjonens kode i en kodeblokk. En enkel funksjon kan se slik ut: 1 som med variabler, heter det formelt å deklarere en funksjon
Funksjoner 43 function sihei() { console.log("hei"); Funksjonen ovenfor heter sihei(), og skriver ordet "Hei" til konsollen. For å bruke denne funksjonen 2, skriver vi sihei() der vi ønsker at den skal brukes. Det vil si at koden inni funksjonen ikke vil brukes, med mindre vi skriver sihei() et annet sted. I kode 4.1 nedenfor kan du se et fullstendig eksempel på en kode som bruker denne funksjonen. Her kan det se ut som om vi må bruke semikolon hver gang vi bruker en funksjon, men husk at vi bruker semikolon for å avslutte setninger, og her består setningen bare av funksjonen. I figur 4.1 på neste side vises resultatet av denne koden i konsollen. Legg merke til at det bare står "Hei" én gang, selv om vi brukte funksjonen fire ganger. Konsollen i Google Chrome viser ikke like utskrifter flere ganger, men den antyder antallet like utskrifter med et tall (her 4-tallet til venstre for teksten «Hei»). Senere i boka skal vi se på hvordan vi kan skrive HTML med JavaScript. Hvis vi skriver til HTML vil teksten «Hei» bli skrevet fire ganger. 1 <! doctype html > 2 < html > 3 < head > 4 < title > En funksjon som sier hei </ title > 5 < meta charset= " UTF-8 "> 6 </ head > 7 <b ody > 8 9 <s cript > 10 // Funksjonen sihei () skriver " Hei " til konsollen 11 function sihei () { 12 console. log (" Hei "); 13 14 15 // For å bruke funksjonen, skriver vi funksjonsnavnet 16 sihei (); 17 18 // Vi kan bruke den samme funksjonen mange ganger 19 sihei (); 20 sihei (); 21 sihei (); 22 </s cript > 23 </b ody > 24 </ html > Kode 4.1: Eksempel på bruk av en enkel funksjon. 2 å bruke en funksjon, kalles formelt å «kalle» en funksjon
44 Funksjoner Figur 4.1: Resultatet av å bruke funksjonen sihei() fire ganger. Så lenge vi lager funksjoner på den måten vi nå har sett på, kan vi plassere funksjoner hvor vi vil i koden vår. Det er nemlig slik at nettleseren behandler alle funksjoner før den behandler resten av koden. Vi kunne derfor ha brukt funksjonen sihei() før vi laget den i eksemplet ovenfor. Det gjør at vi kan samle alle funksjonene våre nederst i koden om vi ønsker det. En annen skrivemåte I denne boka har vi valgt å angi funksjoner direkte med nøkkelordet function. Et annet alternativ er å lage en variabel som inneholder en funksjon: var sihei = function() { ; console.log("hei"); Her lages variabelen sihei med en funksjon som verdi. Legg merke til semikolonet på slutten. Det må være med fordi koden ovenfor utgjør en setning, og alle setninger avsluttes med et semikolon. Selve funksjonen brukes på akkurat samme måte som med den andre skrivemåten. I begge tilfellene blir funksjonen lagret i en variabel, men i det siste eksemplet bruker vi nøkkelordet var for å synliggjøre det. En annen forskjell er at vi ikke kan bruke funksjoner med den siste skrivemåten, før vi har laget dem i koden vår. Det vil si at vi må lage funksjonen tidlig i koden, for så å bruke den senere.
Funksjoner 45 Oppgaver 4.1 Kopier kode 4.1 ovenfor og lagre den i et HTML-dokument. Åpne dokumentet og skriv «sihei» (uten parentesene) i konsollen. Hva skrives ut? Hvorfor tror du det er slik? 4.2 Lag en funksjon med navnet tilfeldighilsen() som sier «Hei», «Hallo» eller «God dag». Hilsenen skal velges tilfeldig. 4.3 I forrige kapittel laget du en «Magic 8-ball». Lag en funksjon med navnet magic8ball() som fungerer på samme måten. 4.2 Gi informasjon til funksjoner (argumenter) Funksjonen sihei() som vi laget tidligere i kapitlet, gir det samme resultatet hver gang vi bruker den. Ofte ønsker vi at en funksjon skal gi forskjellige resultater i ulike situasjoner. For å få til det kan vi «gi» en verdi til en funksjon. Denne verdien kalles et argument 3 : function siheitil(navn) { console.log("hei " + navn + "!"); Her har vi gjort om funksjonen sihei(), slik at den kan si hei til en navngitt person. Her er navn et eksempel på et argument. Inni funksjonen fungerer navn på samme måte som en variabel, og navn kan bare brukes i funksjonen, ikke utenfor. Når en funksjon har med argumenter, kan vi sende med verdier når vi bruker funksjonen. For at funksjonen skal fungere på riktig måte, må verdiene bruke den datatypen funksjonen forventer: siheitil("ola"); Her bruker vi funksjonen som vi ville ha gjort tidligere, men vi sender med tekstbiten "Ola" inni parentesene. Hvis vi ikke sender med verdier når en funksjon forventer argumenter, eller hvis vi sender verdier med feil datatype, vil argumentene få verdien undefined. Det vil si at vi får skrevet ut «Hei undefined!» hvis vi skriver siheitil() uten å angi et navn. I forrige kapittel brukte vi også argumenter da vi brukte metoden Math.floor() på tilfeldige tall. Da var det de tilfeldige tallene som var argumenter. En funksjon kan også bruke flere argumenter: function funksjonsnavn(argument1, argument2, argument3,...) { kode 3 Egentlig kalles denne verdien en parameter, mens verdien vi har med når vi bruker funksjonen kalles et argument. Vi har valgt å ikke skille mellom parametre og argumenter i denne boka, og bare bruke ordet argument.
46 Funksjoner Vi kan for eksempel lage en funksjon som regner ut arealet av et rektangel: function arealrektangel(lengde, bredde) { var areal = lengde * bredde; console.log("arealet av rektanglet er " + areal); Funksjon eller metode? Så langt i denne boka har ordene funksjon og metode begge blitt brukt om noe som tilsynelatende er det samme. Metoder er funksjoner, men de hører til objekter (for eksempel string-objektet, som vi så på i kapittel 2). For å bruke en metode skriver vi objektnavn.metode(). Vi må altså ta med navnet på objektet som har metoden. Oppgaver 4.4 Lag funksjonen siheitil() som vist ovenfor, og bruk den til å «si hei» til ulike navn. 4.5 Lag en funksjon som regner ut arealet av en sirkel. Funksjonen skal ta ett tall som argument, og skrive ut setninger som "Arealet av en sirkel med radius 2 er 12.56" i konsollen. 4.6 Vi kan «tegne» en katt i konsollen med koden console.log("=^.^=");. Lag en funksjon som tegner en katt i konsollen. 4.7 Utvid funksjonen du laget i forrige oppgave slik at funksjonen kan tegne flere katter. Antall katter skal angis som et argument i funksjonen. 4.8 Lag funksjonen navneskilt(navn) som tar et navn som argument og lager en boks med stjerner rundt navnet. Da vil for eksempel navneskilt("lise") gi denne utskriften: ******** * Lise * ********
Funksjoner 47 Kaniner og escape I oppgavene ovenfor tegnet vi katter ("=^.^="). En annen morsom figur vi kan tegne, er en kanin: (\ (\ ( -.-) o_(")(") Hvis vi prøver å skrive ut denne figuren med console.log(), får vi en feilmelding. Det skyldes at gåseøynene (") avslutter tekstbiten vi prøver å skrive ut. For å få vist fram gåseøynene som et symbol, må vi bruke JavaScripts «escape»-symbol, bakovervendt skråstrek (\), slik: console.log("o_(\")(\")"); Vi vil fremdeles få en feilmelding, fordi de bakovervendte skråstrekene i ørene forsøker å «escape» det som kommer etter. Vi må derfor gjøre det samme med dem, nemlig å «escape» dem: console.log("(\\ (\\"); 4.3 Få verdier fra en funksjon (returverdier) Så langt i dette kapitlet har vi bare sett på funksjoner som skriver ut noe til konsollen. I mange tilfeller vil vi bruke funksjoner til å gjøre en oppgave, uten at resultatet blir synlig. Det skjer for eksempel med metoden Math.floor(), som tar et desimaltall som argument, og runder det ned til nærmeste heltall. For å få resultatet skrevet til konsollen, må vi gjøre det selv: console.log(math.floor(3.23)); // skriver ut 3 Det betyr at setningen Math.floor(3.23); gir oss verdien 3, og ingenting annet. Denne verdien kaller vi en returverdi, og vi kan for eksempel lagre den i en variabel, eller bruke den direkte i annen kode: var tall = 17.29; var avrundet = Math.floor(tall); console.log("vi får " + avrundet + " hvis vi runder ned " + tall); // skriver ut: Vi får 17 hvis vi runder ned 17.29 For å få en returverdi fra en funksjon, bruker vi nøkkelordet return i JavaScript. Vi kan for eksempel lage en ny variant av funksjonen som regner ut arealet av et rektangel:
48 Funksjoner function arealrektangel(lengde, bredde) { var areal = lengde * bredde; return areal; Her lager vi variabelen areal inni funksjonen, for så å returnere den. Alternativt kan vi droppe variabelen og bare returnere verdien vi får fra utregningen: function arealrektangel(lengde, bredde) { return lengde * bredde; For å bruke denne funksjonen til å regne ut arealet av et rektangel med lengde 8 og bredde 4, skriver vi arealrektangel(8,4). Da får vi returverdien 32, som betyr at arealrektangel(8,4) erstattes av tallet 32 i koden vår. Avslutte funksjoner med return I tillegg til å returnere verdier, blir funksjoner umiddelbart avsluttet med nøkkelordet return: function sjekkmyndig(alder) { if (alder >= 18) { return "myndig"; else { return "ikke myndig"; Denne funksjonen starter med å undersøke om alder er større enn eller lik 18. Hvis det er tilfellet, vil funksjonen umiddelbart bli avsluttet med returverdien "myndig" (return "myndig";). Det vil si at all kode som befinner seg etter return "myndig";, ikke vil få noen effekt. Vi kan derfor skrive om funksjonen ovenfor: function sjekkmyndig(alder) { if (alder >= 18) { return "myndig"; return "ikke myndig"; Her kan det se ut som om denne funksjonen alltid vil returnere verdien "ikke myndig", men fordi return avslutter en funksjon, vil vi få returverdien "myndig" så lenge alder er større enn eller lik 18.
Funksjoner 49 En terningfunksjon Vi skal nå se på et eksempel der vi lager en terningfunksjon. En vanlig terning har seks sider, så vi ønsker en funksjon som gir oss et tilfeldig heltall fra og med 1, til og med 6. Husk at funksjonen Math.random() gir oss (returnerer) et tilfeldig tall som er større enn eller lik 0 og mindre enn 1: console.log(math.random()); // 0.3115744934210387 console.log(math.random()); // 0.0025811352996454318 console.log(math.random()); // 0.35448568538065706 Et naturlig sted å starte, når vi vil lage en terning, er å multiplisere denne returverdien med 6. La oss se hva slags tall vi får: console.log(math.random() * 6); // 2.8400467337117514 console.log(math.random() * 6); // 4.170374441108427 console.log(math.random() * 6); // 3.452427975605197 Math.random() (større enn eller lik 0 og mindre enn 1) Math.random() * 6 (større enn eller lik 0 og mindre enn 6) Math.floor(Math.random() * 6) (Math.random() * 6) + 1 (0, 1, 2, 3, 4 eller 5) (større enn eller lik 1 og mindre enn 7) Math.floor((Math.random() * 6)) + 1 (1, 2, 3, 4, 5 eller 6) 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 Figur 4.2: Illustrasjon av utregningene for å lage en terning. Vi vet at Math.random() kan gi oss 0, derfor vet vi at det minste mulige resultatet av Math.random() * 6 er 0. Samtidig vet vi at Math.random() kan gi oss tall opp mot 1, men alltid mindre enn 1, derfor vet vi at det høyeste mulige resultatet av Math.random() * 6, er 5.999... Hvis vi runder ned resultatet av Math.random() * 6, kan vi altså få tallene 0, 1, 2, 3, 4 eller 5. Det betyr at vi kan få tallene 1, 2, 3, 4, 5 eller 6, altså en terning, hvis vi til slutt legger til én. Dette er illustrert i figur 4.2 ovenfor. Nå kan vi lage en terningfunksjon: function terning() { return Math.floor(Math.random() * 6) + 1; Her starter vi med Math.random() * 6, deretter runder vi resultatet ned til nærmeste hele tall med Math.floor(), og til slutt legger vi til én. Med denne funksjonen kan vi «trille» noen terninger i konsollen:
50 Funksjoner console.log(terning()); // skriver ut 2 console.log(terning()); // skriver ut 6 console.log(terning()); // skriver ut 3 Denne terningen kan vi bruke til å lage alle tenkelige terningspill. Vi kan for eksempel lage en enkel app som teller antall forsøk den trenger for å få to like: 1 var tolike = false; // settes til true når vi får to like 2 var antallforsok = 0; // lar oss telle antall fors øk 3 4 // Så lenge vi ikke har få tt to like 5 while (! tolike ) { 6 // Ø ker antall fors øk med 1 7 antallforsok ++; 8 9 // triller to terninger 10 var terning1 = terning (); 11 var terning2 = terning (); 12 13 console. log (" Fikk " + terning1 + ", " + terning2 ); 14 15 // Unders ø ker om de to terningene er like 16 if ( terning1 === terning2 ) { 17 tolike = true; 18 console. log (" Fikk to like på " + antallforsok + " fors øk"); 19 20 Kode 4.2: En terningapp som holder på til den har fått to like. Her lager vi først variabelen tolike som skal ha verdien true hvis vi har fått to like, og false så lenge vi ikke har fått to like. Vi lager også variabelen antallforsok, som skal telle antall forsøk vi bruker på å få to like. Deretter bruker vi en while-løkke, som skal holde på så lenge vi ikke har fått to like. Husk at utropstegnet gir oss det omvendte, slik at false blir true og true blir false.
Funksjoner 51 Inni while-løkken starter vi med å øke antall forsøk, før vi «triller» to terninger. Resultatet av de to terningene skrives til konsollen. Vi bruker så en if-setning for å sammenligne de to terningene, og hvis de er like, setter vi variabelen tolike til true. Vi skriver også ut antall forsøk når vi har fått to like. Oppgaver 4.9 Lag funksjonen tolike() som gjør det samme som kode 4.2 ovenfor. 4.10 Simuler ett kast med to terninger og gi brukeren beskjed hvis du får to like verdier (et par) eller om summen av terningene blir 7. 4.11 Lag en ny terningfunksjon, der «terningen» bare har tre sider. Altså at returverdien er 1, 2 eller 3. 4.12 Bruk «terningen» du laget i forrige oppgave og simuler kast med tre terninger. Skriv ut summen av terningene for hvert kast, og gjenta kastene til du får tre like. 4.13 Lag funksjonen yatzy() som lar oss «trille» flere terninger på én gang. Det skal være mulig å «trille» ulike antall terninger, og resultatet skal skrives til konsollen. Du kan bruke denne funksjonen til å spille en enkel versjon av yatzy, ved å først kaste fem terninger, for så å kaste færre terninger hvis du vil spare på noen av de første terningene. 4.4 Variabler og rekkevidde (scope) I JavaScript kan vi lage variabler med ulik rekkevide (eng. scope). Det vil si at vi kan begrense hvor variablene vil være tilgjengelige i koden vår. Vi kan lage globale variabler som kan brukes og endres i hele koden, og vi kan lage lokale variabler som bare kan brukes og endres i deler av koden. En lokal variabel er en variabel som lages i en funksjon. La oss først se på et eksempel på en global variabel: var areal; // en global variabel /* her kan vi bruke variabelen areal */ function funksjonsnavn() { /* her kan vi bruke variabelen areal */ En global variabel er altså en variabel som lages utenfor en funksjon, og som kan brukes hvor som helst i koden. En lokal variabel er en variabel som lages inni en funksjon:
52 Funksjoner function funksjonsnavn() { var areal; // en lokal variabel /* her kan vi bruke variabelen areal */ /* her kan vi _ikke_ bruke variabelen areal */ Her kan vi altså bare bruke variabelen areal inni funksjonen. Hvis vi lager en lokal variabel inni en funksjon med samme navn som en global variabel, vil den lokale variabelen fungere som en egen variabel: var eksempel = "utenfor funksjon"; // en global variabel function funksjon1() { var eksempel = "inni funksjon1"; // en lokal variabel console.log(eksempel); // skriver ut: inni funksjon1 console.log(eksempel); // skriver ut: utenfor funksjon Når vi i funksjonen lager den lokale variabelen eksempel, vil ikke den globale variabelen eksempel forandre seg, fordi variabelen inni funksjon1 fungerer som en ny variabel.dette skillet mellom globale og lokale variabler gjør at vi unngår å overskrive viktige variabler om vi bruker det samme navnet inni funksjonen. Det er likevel ikke å anbefale å bruke det samme navnet på en global og en lokal variabel, da det fort skaper forvirring. Hvis man ønsker å bruke det samme variabelnavnet, bør for eksempel navnet til den lokale variabelen starte med lokal: var navn; function funksjon1() { var lokalnavn; Oppgaver 4.14 Hvordan lager vi en lokal variabel? 4.15 Forklar forskjellen mellom lokale og globale variabler.
Funksjoner 53 4.5 Kommentering av kode Vi har allerede sett en del kommentarer så langt i denne boka. God kommentering av kode gjør at den blir mye lettere å lese, både for oss selv, og for andre som skal lese koden. Når vi lager funksjoner blir kommentarer ekstra viktige. En av hensiktene med en funksjon, er at den kan leve sitt eget liv. Vi kan bruke funksjoner laget av andre, uten å tenke på selve koden i funksjonen, men vi må vite hvordan den brukes. Se for deg at du har fått følgende funksjon av en annen person: function skrivmangeganger(tekst, antall) { for (var i = 0; i < antall; i++) { console.log(tekst); Det er ikke så lett å vite hvordan denne funksjonen brukes, uten å lese gjennom koden. Med kommentarer blir funksjonen enkel å bruke: /* * Skriver ut en tekst mange ganger * * Argument (String) tekst - teksten som skal skrives ut * Argument (Number) antall - antall ganger teksten skal skrives */ function skrivmangeganger(tekst, antall) { for (var i = 0; i < antall; i++) { console.log(tekst); Denne skrivemåten er inspirert av den som brukes i jsdoc (http://usejsdoc.org/), men den er noe forenklet. Hvis en funksjon har en eller flere returverdier, må disse også nevnes i kommentaren. På denne måten blir det lett å lage kode sammen med andre. Oppgaver 4.16 Lag en funksjon som bruker Math.random(), for eksempel en funksjon som returnerer et eller flere tilfeldige tall mellom x og y. Hint: vi kan endre terningfunksjonen vi laget tidligere til å gi oss et tall mellom 3 og 8 i stedet for mellom 1 og 6. 4.17 Kommenter funksjonen slik at den blir lett å bruke for andre.
54 Funksjoner Sammendrag Vi lager en funksjon med nøkkelordet function etterfulgt av funksjonens navn: function funksjonsnavn() { /* kode */ Vi bruker (kaller) en funksjon ved å skrive funksjonens navn etterfulgt av parenteser: funksjonsnavn(). En funksjon kan motta verdier i form av argumenter: function funksjonsnavn(argument1, argument2,...) { /* kode */ En funksjon kan gi en returverdi: function mindreennti(tall) { if (tall < 10) { return true; else { return false; En lokal variabel er en variabel som lages inni en funksjon, og den kan bare brukes i funksjonen den er laget i. En global variabel er en variabel som er laget utenfor funksjonene i en kode, og den kan brukes alle steder i koden. Det er viktig å bruke kommentarer for å forklare hvilke argumenter en funksjon kan motta, og hva den returnerer.