JavaScript del 5 Funktioner

Transkript

1 JavaScript del 5 Funktioner När man skriver JavaScriptkod eller program i andra programmeringsspråk för den delen så kan det finnas anledningar till att man vill dela upp sitt stora program i flera mindre program. Dessa kallas i JavaScript för funktioner. Det finns flera anledningar till att man kan vilja göra detta, tex: Det kan vara lättare att hitta fel i koden om man bara behöver leta i en liten avgränsad del i stället för i ett stort komplext program. Gör man ett större projekt som omfattar flera personer kan det vara smidigt att dela upp det hela så att olika personer jobbar med olika delar av programmet samtidigt. Uppgiften man ger sig på kan vara väldigt stor och komplex, då kan det vara lättare att dela upp den i mindre delar som kan bearbetas var för dig. En viss del av koden vill man kanske använda flera gånger, säg tex att du skapar ett Yatzyspel, då ska man ju slå massor av tärningsslag under spelets gång, tänk då att i stället för att skriva koden för ett tärningsslag mängder av gånger bara behöva skriva den en gång och sedan kan man anropa den koden varje gång man vill slå ett tärningsslag. Återvinning genom att dela upp din kod i mindre delar som utför särskilda funktioner så blir det lätt att återvinna den koden i andra projekt. Om du tex efter att ha gjort ditt Yatzy-spel vill göra ett nytt spel som använder sig av tärningsslag så kan du återanvända den träningsfunktion du skapade i ditt förra spel. Vi skapar en enkel funktion Låt oss säga att vi vill skapa ett Yatzy-spel och för att göra detta så måste spelaren kunna slå tärningsslag. Vad vi i princip behöver göra är att slumpa fram ett tal mellan 1 6, JavaScript har inbyggd kod för att kunna slumpa fram tal: Det är alltså följande rad som ger oss ett slumpat tal mellan 1-6: (Math.floor(Math.random() * 6))+1; Besöker jag webbsidan så kan jag snabbt testa och se att det hela fungerar genom att refresha den ett antal gånger och se att jag får olika resultat: Jakob Envall 1

2 Om vi nu skulle bygga ett spel där användaren ska slå med flera tärningar varje gång det är dennes tur så skulle vi behöva upprepa den här koden massor av gånger. I stället kan vi placera den i en funktion: En funktion skapar man alltså genom att skriva nyckelordet function följt utav ett namn du själv bestämmer och (). Mellan { och } skriver du sedan den kod som funktionen skall innehålla, i det här fallet så slumpar vi fram ett tal mellan 1 6. Därefter anger du vad funktionen skall retunera, dvs när funktionen anropas, vad ska den skicka tillbaka för svar. Vi anropar sedan funktionen genom att skriva namnet på den följt av (). Besöker vi webbsidan så ser vi att vi får samma resultat som tidigare, dvs varje gång vi uppdaterar den så får vi ett random tal mellan 1 6. För att tydliggöra det hela så skulle vi kunna anropa tarning() flera gånger: Besöker vi sedan sidan så möts vi av (bild på nästa sida): Jakob Envall 2

3 I stället för skriva om slumpa-koden varje gång har vi nu skrivit den en gång, i en funktion, därefter anropar vi den funktionen varje gång vi vill slå ett tärningsslag. Vi kan naturligtvis kombinera det hela med en loop om vi skulle vilja, tex: Vilket ger oss: Jakob Envall 3

4 Parametrar Man brukar oftast sträva efter att göra sin kod så dynamisk som möjligt, vi har ju i det här fallet skapat en tärning som slumpar mellan 1 6, men det finns ju andra typer av tärningar med, tex tärningar med 20 sidor vilka naturligtvis ger oss 1 20, vore det inte mer dynamiskt att ha en tärningsfunktion som kan hanterar alla typer av tärningar och inte bara den sexsidiga? En sak som kan göra en funktion mer dynamisk är att låta den ta emot en eller flera parametrar och beroende på vad man skickar med för värde så varieras också den informationen som funktionen skickar tillbaka till oss. I exemplet med tärningen vore kanske en bra lösning att vi skickar med vad vi vill att den ska slumpa mellan, dvs om vi skickar med siffran 6 så slumpar den mellan 1 6 och skickar vi med siffran 20 så slumpar den mellan Så här skapar man en funktion som tar emot en parameter: Det vi ändrat med vår funktion är till att börja med inom parentesens efter funktionen namn, där det tidigare stod tarning() står det nu tarning(antalsidor). Om du sedan tittar på när vi anropar metoden så gjorde vi det tidigare genom att skriva tarning(), nu har vi lagt till en siffra inom parentesen så att det står tarning(20). Vad betyder då detta? Jo den siffran vi skickar med när vi anropar funktionen, i det här fallet 20 sparas i en variabel med namnet antalsidor. Därefter kan vi använda oss av den variabeln i vår funktion. Detta använder vi sedan för att modifiera vår slump-kod som tidigare så ut så här: (Math.floor(Math.random() * 6))+1; Så att vi bytte ut siffran 6 mot variabelnamnet: (Math.floor(Math.random() * antalsidor))+1; Detta gör så att vår kod i stället för att slumpa mellan 1 6 slumpar mellan 1 och det värdet som antalsidor har. När vi testar det hela så ser vi också att vi nu slumpar mellan 1-20: Jakob Envall 4

5 Vi kan naturligtvis bättre illustrera det hela genom att skapa en kod som anropar tarning() flera gånger men skickar med olika parametrar: Vilket ger oss: Jakob Envall 5

6 Flera parametrar En funktion kan ta emot fler än en parameter, säg tex att vi vill skapa funktionen summa() vilken tar emot två stycken heltal och sedan summerar dom och ger oss resultatet av den beräkningen så skulle den kunna se ut så här: Vilket ger oss följande resultat: Jakob Envall 6

7 Funktioner som inte returnerar något Det går att skapa funktioner som inte returnerar något, tex: Vilket ger oss: Som du kan se så har inte funktionen ovan nyckelordet return följt av en variabel, vilket våra tidigare exempel haft. Detta betyder att vi inte skulle kunna skriva tex: var test = likastora(tal1, tal2); Eftersom inte funktionen returnerar något så finns det inte heller något värde från den att stoppa in i variabeln test. Jakob Envall 7

8 Uppgifter 1. Skapa en funktion som tar två stycken tal som parametrar. Dessa tal ska användaren själv ha fått mata in. Därefter skriver funktionen ut på skärmen vilket av talen som var störst, alternativt om de var lika stora. 2. Denna uppgift skall erbjuda användaren ett antal valmöjligheter genom att mata in ett värde i en prompt. Valen skall bestå av 1. Konvertera grader från Celcius till Fahrenheit Användaren får i en prompt ange ett gradantal i Celcius som räknas om till Fahrenheit. Resultatet visas upp i en alert-ruta 2. Addera två tal med varandra Användaren får upp två prompt-rutor som begär att han/hon skall mata in ett tal. Talen läggs ihop och resultatet visas upp i en alert-ruta 3. Subtrahera ett tal från ett annat Användaren får upp två prompt-rutor som begär att han/hon skall mata in ett tal. Det första talet skall sedan dras från det andra och resultatet visas upp i en alert-ruta 4. Gissa ett hemligt nummer Användaren får upp en ruta där han/hon ombeds gissa ett hemligt nummer. En alertruta skall sedan tala om ifall det angivna talet är för lågt, för högt eller rätt. (Använd den lösningen ni tidigare gjort för detta). 5. Avsluta En alert-ruta visas upp som tackar användaren för att han varit på din sida. Inga flera val skall sedan visas upp. När något av de olika valen har utförts skall användaren åter igen få upp den ursprungliga prompten som frågar vilket av valen han/hon önskar utföra. En ledtråd är att du kan placera det hela i en loop som körs om och om igen tills användaren valt att avsluta. På så vis kommer menyn upp igen varje gång. Ni ska skapa en funktion för varje moment. Dvs en funktion ni kan anropa för att konvertera Fahrenheit till Celsius, en ni kan anropa för att addera två tal, en för att subtrahera två tal och en för att köra nummergissningsspelet. Ni avgör själva vilka eventuella lämpliga parametrar era funktioner ska ta. Följande skärmdumpar kan ge lite hintar på hur det hela skulle kunna tänkas se ut: Jakob Envall 8

9 Jakob Envall 9