Att förstå hur man konstruerar modulära program Att kunna skapa nya funktioner Att förstå hur data skickas mellan funktioner

Transkript

1 Lektion 4, del 1, kapitel 10 Funktioner i JavaScript Inlärningsmål Att förstå hur man konstruerar modulära program Att kunna skapa nya funktioner Att förstå hur data skickas mellan funktioner Introduktion För att förenkla underhåll av program försöker man oftast dela upp programmet i mindre delar eller moduler. Detta åstadkommer vi genom att placera vår kod i funktioner som anropas från huvudprogrammet. Programmoduler i JavaScript Programmoduler i JavaScript skapar vi med funktioner. Inbyggda funktioner i JavaScript kallas metoder. Det finns många inbyggda funktioner som vi kan använda oss av men vi även skapa egna. Det är dessa vi använder för att förpacka vår kod. Vi använder funktioner för kod som vi skall använda på flera ställen i programmet. Funktioner En funktion anropas genom att skriva funktionens namn (eller metoden) följt av en parentes. I parentesen skriver vi in de argument som vi vill skicka till funktionen. Tillbaka får vi ett returvärde från funktionens return satts. Variabel = funktionsnamn(argument, argument, ); En funktion definieras genom att skriva nyckel ordet function följt av funktionens namn och en parentes med variabelnamn för de argument som funktionen tar emot. Sedan följer en vänster klammer parentes som inleder funktionens kod del. Funktionen avslutas med en retursatts följt av en höger klammerparentes (se figur 10.2). På rad 14 anropas funktionen och på Rad 26 börjar själva funktionen som i detta fall bara omfattar en rad (rad 28) som både omfattar return satsen och en beräkning. Function funktionsnamn ( parameterlista ) { kod; }

2 För er som är vana att programmera är det värt att på peke att det ger ett error i koden om vi deklarerar variabler med var i parameter listan i funktionen. Funktion för slumptal Till objektet math finns en metod random vilken kan används för att generera slumptal. Denna metod genererar ett slumptal mellan o och upp till men inte inkluderande 1. I figur 10.4 visas ett program som simulerar att man slår en tärning 20 ggr. För att göra om slumptalet så att det ligger mellan 1 och 6 ändrar vi funktionen enligt följande. Math.floor(1 + Math.random() * 6 ) Vi använder metoden floor för att avrunda slumptalet till ett heltal. Resultatet av funktionen placeras i variabeln value viken sedan skrivs ut. I följande exempel byggs koden ut för att simulera 6000 kast för att sedan skriva ut det antal gånger varje värde visats. Man använder här en switch case satts för att detektera värden på tärningen. I nästa exempel skapar man ett script som simulerar kalasiskt tärningsspel med två tärningar komplett med regler. Lägg märke till att man här skickar värden till textrutor enligt följande document.craps.firstdie.value = die1; vi anropar egenskapen value för textrutan firstdie och ger den det värde som variabeln die1 har. Giltighets tid för variabler i funktioner Som regel är en variabel giltig i den funktion där den skapats och i funktioner som ör underordnad denna så vida inte underfunktionen definierar en variabel som över tar den första variabels plats tex genom att ha samma namn. Variabler skapade i funktioner är lokala medan variabler skapade i head är globala. Studera figur 10.7 där ett antal variabler skapas i olika funktioner. På rad 14 skapas en global variabel x åtkomlig över allt i programmet. I den första funktionen start deklareras en ny variabel x vilken övertar den ursprungliga variabel roll, den globala variabeln är ej längre tillgänglig. Detta fortsätter igenom exemplet. Läs koden som är väl kommenterad och bör vara lätt att förstå. Inbyggda globala funktioner JavaScript har sex inbyggda globala funktioner. Vi har redan tittat på två av dessa, parseint och parsefloat som är typ konverterings funktioner. De andra är escape som tar en text stäng som in argument för att sedan returnera strängen med alla icke ASCII tecken som tex mellanslag konverterade till hexadecimal representation. Nästa är eval som används för att exekvera sparad JavaScript kod. IsFinite tar ett numeriskt värde och returnerar true om värdet på argumentet inte är NaN, Number.POSITIVE_INFINITY eller Number.NEGATIVE_INFINITY. I annat fall returnerar funktionen false. IsNaN tar ett numeriskt värde och returnerar true om värdet inte är ett nummer, annars returnerar den false.

3 Unescape återställer en stäng som tidigare kodats med escape. Recursion Recursion är ett sätt att lösa problem där många olika möjligheter måste undersökas för att hitta en lösning. Detta är oftast mycket effektivare än att lösa ett problem med en iterativ process tex led en loop. I boken används ett klassiskt exempel för att förklara recursion med hjälp av fakultet. Fakultet är svårt att räkna ut direkt utan man måste dela upp beräkningen i flera steg men ändå ta med sig värdena tillbaka till ursprungsberäkningen. Se sid 343 i boken. Detta bygger på att en fakultet kan delas upp som aktuellt tal mutipliserat med fakulteten för närmast mindre tal (5! = 5*4!). På detta sätt delas talet tills man når fakulteten för 1 som ju är lika med 1. En rekursiv funktion är en funktion som anropar sig själv om och om igen tills ett problem brutits upp så att det går att lösa. Sedan tar den med sig resultatet till närmas föregående funktionsanrop som i sin tur kan lösas returnera till föregående funktionsanrop i sin tur osv.

4 Lektion 4, del 2, kapitel 11 Arrays (matriser) Inlärningsmål Introduktion av datastrukturen array Att förstå användning av arrayer för att lagra, sortera data Att förstå hur man deklarerar en array, hur man initierar en array och hur man refererar till enskilda celler i en array Att kunna skicka arrayer till funktioner Att kunna söka och sortera i en array Introduktion Denna lektion är en introduktion till området datastrukturer. Arrayer är datastrukturer som består av besläktade datatyper. Arrayer i JavaScript är dynamiska och kan ändra storlek Arrayer En array är en grupp minnesplatser som har samma namn och oftast innehåller data av samma typ. För att få åtkomst till en minnesplatts i en array anger vi arrayens namn och index nummer för den önskade minnescellen. Array C Index Innehål C[0] 6 C[1] -8 C[2] 0 C[3] 235 C[4] 62 C[5] 9 Det första elementet refereras till som element C[0] det andra som C[1] osv. Observera att numreringen börjar från 0. Om vi tex. Vill byra ut innehållet i cellen C[2] till 4 skriver vi i ett utryck följande C[2] = 4; Om vi på motsvarande sätt vill hämta ett värde ur en datacell i arrayen skriver vi var value = C[4]; och vi kopierar värdet som finns i datacell C[4] (62) till variabeln value. Indexet kan även utgöras av ett utryck tex C[1 + 2] ger värdet i cell C[3]. Att deklarera en array

5 En array i JavaScript är en instans av objektet Array. För att skapa en array används operatorn new. Ex. var C = new Arry (12); skapar en array för 12 element med index från 0 till 11 se figur Man kan även skapa en array av arrayer för att skapa flera dimensioner. Den interna minnesrepresentationen av en flerdimensionell array skiljer sig för JavaScrip från konventionella programmeringsspråk som Java och C++ men dett behöver vi inte bry oss om. Om vi vill deklarera en array och samtidigt tilldela värden tillcellerna gör vi enligt följande var n = new Arry( 10, 20, 30, 40); för att skapa en array med fyra celler med index från 0 till 3 med innehåll. För att avgöra storleken på en array använder vi metoden arraynamn.length. Varje array vet sin egen längd.. En array i JavaScript är dynamisk såtillvida att den kan utökas efter att den skapats. Användning av kontrollstrukturer tillsammans med array objekt För att iterera igenom en array använder vi notationen for/in. Denna funktion söker automatiskt igenom hela arrayen och känner av hur många celler som finns i arrayen. I figur 11.5 demonstreras både hur man itererar genom arrayen med en vanlig for loop och med en for/in loop. På rad 19 finns en vanlig for loop som användere en räknarvariabel som testas mot längden på arrayen. På rad 24 gör man motsvarande med en for/in loop. Som synes behöver vi här inte göra något test utan arrayen itereras automatiskt igenom till sista posten. I figur 11.6 visar man hur man med hjälp av en array på ett elegantare sätt löser exemplet med tärningen som skall slås 6000 ggr. Här använder vi arrayen för att lagra värden i stället för variabler. Vi behöver inte någon svitch satts utan vi kan använda resultatet av slumptals funktionen för att rätt post i arrayen. ++frequency[ face ]; Värde eller referensöverföring till/från funktioner och arrayer JavaScript låter inte användaren välja om en variabel skall överföras som ett värde eller som en referens till originalvariabeln. Detta beror av datatypen. Siffror och booleska variabler skickas alltid som värden medan objekt skickas som referenser. Eftersom att arrayer är objekt så skickas de som referenser till originalet. Enskilda värden skickas däremot som värden. Detta visas i figur Lägg märke till att resultatet blir olika beroende på vilken överförings form som används. Sortering Sortering av innehållet i arayer (stigande eller fallande) är en av de viktigaste operationer som utförs på arrayer. Sortering av data är ett klassiskt programmeringsproblem med många olika lösningar.

6 I förra upplagan av boken gick man in få flera olika klassiska sorterings metoder men detta är nu borttaget och jag tror att detta är lika bra efter som att JavaScripts inbyggda metoder fungerar så bra. I figur 11.8 använder vi oss av JavaScripts inbyggda sorteringsmetod. Denna är ganska effektiv och förhållande vis snabb. Den anropas med arraynamn.sort( compareintegers ); om det är heltal vi vill sortera. Argumentet är ett anrop till JavaScripts inbyggda jämförelsefunktioner. Om vi inte anger något argument sker sorteringen ut ifrån ASCII värden. Vi återkommer till sortering av textsträngar senare. Sökning i arrayer, linjär och binär sökning Ofta är man intresserad av att veta om ett speciellt värde finns i en array. Om arrayen innehåller många poster med mycket data behöver vi ett sätt att söka efter data i arrayen. Linjär sökning Linjär sökning aär enkelt men mindre effektivt. En linjär sökmetod använder en loop tillsammans med en if satts för att söka igenom arrayen. Om rätt värde hittas så avbryts sökningen. Se figur Linjär sökning passar endast för små arrayer. För större krävs en effektivare algorittm. Binär sökning Om den array som skall sökas igenom är sorterad är binär sökning en lämplig och mycket snabb metod. Vid varje sökning delas arrayen upp i två delar och den ena utesluts beroende på om det sökta värdet är större eller mindre än det värde som finns vid splitt punkten. Detta upprepas med resterande halva tills man ringat in rätt värde om det finns i arrayen. En array med 1024 poster söks igenom på max tio delningar (2 10 = 1024). En array med poster på max 20 delningar (2 20 = ). Detta visas i figur Flerdimensionella arrayer Ibland behöver vi använda arrayer med mer än en dimension. För att tex. Initiera en två dimensionell array skriver vi enligt följande. Var b = [[1,2],[2,4]]; Vi kan säga att vi skapat en array med två rader och två kolumner. För att anropa en två dimensionell array skriver vi t.ex. b = [ i ] [ j ]; Raderna i arrayen behöver inte innehålla lika många element, se figur Observation

7 I exemplena i detta kapitel har vi infört ett event som är intressant. Vi skriver t.ex. <body onload = start() >. Detta innebär att när dokumentet laddats färdigt så kommer vi att anropa funktionen start. Detta kan utnyttjas för att placera script i body och ändå garantera att ett script inte startar förrän allt på sidan laddats.