Løkker og if-tester Gløer Olav Langslet Sandvika VGS 29.08.2011 Informasjonsteknologi 2 Funksjoner, løkker og iftester Læreplansmål Eleven skal kunne programmere med enkle og indekserte variabler eller andre kolleksjoner av variabler programmere med valg og gjentakelser lage egne og bruke egne og andres funksjoner eller metoder med parametere programmere funksjoner eller metoder som blir aktivisert av hendelser La oss si at du har en liste med elever. En meget lang liste. Du ønsker å lage et program som leter etter ett bestemt navn blant elevene. Eller kanskje du ønsker at det skal være mulig å søke opp en elev ved å skrive inn et navn. Da trenger du en teknikk for å gå gjennom hver elev i listen, og sammenligne med navnet som er skrevet inn. Hvis du finner eleven, har du lyktes. Hvis ikke, får vi håpe eleven ikke var i listen. I denne guiden skal vi lære hvordan vi går gjennom lister og hvordan vi sjekker om en test slår til, en såkalt if-test.
sdsd Løkker og if-tester Informasjonsteknologi 2 funksjoner Funksjoner for det du skal gjøre mange ganger I forrige leksjon så vi at vi skrev nesten samme kode en rekke ganger, for eksempel når vi skulle skrive ut tekst med document.write. Det tar ikke så lang tid, men ofte vil du se at du kan spare mye tid ved å samle kode i noe vi kaller en funksjon, som du kan bruke mange ganger. La oss illustrere det med et lit eksempel En enkel funksjon Prinsippet er enkelt. Vi starter på et tall, for eksempel 0, og øker tallet med én 9 ganger. Her har vi laget en funksjon som skriver ut Hei på deg. Men når gjør den det? Jo, når vi kaller den opp, som det heter. Her kaller jeg funksjoner 2 ganger. Det som skjer da, er at det vil stå Hei på deg rett etter hverandre på nettsiden min. Funksjoner med parameter Men vi kan ikke skrive Hei på deg hver gang. Hva om vi ønsker å angi hva som skal skrives ut. Da kan vi angi det som skal skrives ut inne i parentesen. Navnet er da en parameter til funksjonen: Og det gjør vi ved å skrive navnet på funksjonen med den lille parentesen. 2
Løkker og if-tester Informasjonsteknologi 2 Kan brukeren angi en parameter? Selvsagt. Det er jo ofte hele meningen med et program, at en bruker gir en form for input, og så behandler programmet inputen og gir tilbake noe som gir verdi for brukeren. La oss gi en hyggelig hilsen til vår kjære bruker: Valutakalkulator Vi kan lage en funksjon som regner om fra kroner til euro. Da må vi ha antall kroner som parameter: Funksjon knyttet til en knapp Vi kan lage funksjoner og si at de skal startes når vi klikker på en knapp. 3
sdsd Løkker og if-tester Informasjonsteknologi 2 loop Løkker, eller loops som det heter på engelsk Det har du kanskje gjettet allerede, men en datamaskin er meget god til å telle. Og det gjør den ofte i et program. La oss først lage et program som viser alle tallene fra 0 til 9. For hver runde i løkken skriver vi ut tallet som viser hvor langt vi har kommet. For-løkken Prinsippet er enkelt. Vi starter på et tall, for eksempel 0, og øker tallet med én 9 ganger. Vi kan sammenligne det med et bilrace. Ved start har bilen kjørt 0 runder, og hver gang bilen passerer målstreken teller vi antall runder. Når vi har kommet til 9, er vi ferdige. i starter på 0. så lenge i er mindre enn 10 gjør vi det som står inne i klammeparentesene, altså skriver ut i. For hver runde øker vi i med 1 (i++). 4
Løkker og if-tester Informasjonsteknologi 2 Vi går i Lær dere for-løkken bane med for-løkker For-løkken sier at så lenge noe er sant, skal vi fortsette. Det er viktig at dere lærer dere helt utenatt hvordan en forløkke fungerer. Den vil dere komme til å bruke hyppig når dere programmerer. Det fins også andre løkker, som vi skal se på senere. I starten er det greit å lære seg en løkke godt, til behovet melder seg for andre typer løkker. Først er i 0. Etter semikolon, sier vi egentlig: Så lenge i er mindre enn 10, skal vi fortsette. Det siste som skjer inne i parentesen (i++) er at vi gjør en forandring, som må sørge for at i til slutt ikke er mindre enn 10. Her øker vi i med 1, og da vil den etter noen runder bli 10. Da er ikke utsagnet (i < 10) sant, og vi bryter ut av loopen. Hvis vi hadde skrevet i og redusert i med 1 for hver runde, ville vi aldri ha kommet oss ut av løkken. Det er ikke bra. Noen eksempler på bruk av for-løkken Vi skal først se på noen enkle eksempler på bruk av for-løkken, og deretter noen litt mer praktiske eksempler, som gjør at dere ser hvor nyttig den kan være. 5
sdsd Løkker og if-tester Informasjonsteknologi 2 Skriv ut oddetall med for-løkke Legg merke til at vi starter på 1, og øker i med 2 for hver runde i løkken (i += 2): 8 gangeren (fig 1) Sånn ser det ut i eksempelet med 8-gangeren. Skriver ut 8-gangern Her ganger vi rett og slett i med 8. Litt mer elegant, kan vi gjøre det slik (fig 1): For-løkke hvor vi ganger i med 2 Vi kan doble i hver gang vi går gjennom løkken. 6 variabler i koden vår. Det gjør koden mer oversiktlig, programmet går fortere, det er enklere å unngå feil,
Løkker og if-tester Informasjonsteknologi 2 Gå gjennom en liste (array) La oss si at vi har en liste med superhelter, og at vi ønsker å gå gjennom listen. Til dette kan vi bruke en for-løkke. Vi starter opp med å lage listen: Det er flere måter å opprette et array på. I forrige leksjon brukte vi som regel new Array(), men det er også vanlig å gjøre det på den måten som vi gjorde her med firkantparenteser. Hvordan finner vi heltene våre? Alle elementene i arrayet har sin egen plass, eller indeks. Supermann er først, og vi sier han har indeks lik 0. Vi starter nesten alltid å telle fra 0 når vi programmerer. Hvordan finner vi alle heltene våre? For å få tak i alle sammen, må vi altså finne helter[0], som er Supermann, helter[1] som er Batman og helter[2] som er Fantonald. En for-løkke kan gi oss alt dette: Her starter i på 0, og så lenge i ikke er større enn helter.length, som er det samme som antall helter i arrayet, øker vi i med 1 hver gang vi går gjennom loopen. 7
sdsd Løkker og if-tester Informasjonsteknologi 2 Vi lager en liten gangetabell La oss forsøke å lage en liten gangetabell på en nettside. Det skal være mulig å skrive inn et tall, og så vise tallet ganget med 1 til 10. Først setter vi opp elementene vi trenger i HTML: Et input-felt til å skrive inn tallet, en knapp for å sette det hele i gang, og en div til å vise resultatet. Hvor plasserer vi koden vår? Vi har til nå stort sett skrevet kode inne i body på html-siden. Når vi lager mer kompliserte programmer, kan det være lurt å strukturere koden på en litt annen måte. Det er viktig at alle elementer på nettsiden er lastet inn før koden vår starter. Ellers kan vi få feil når programmet kjører. Vi legger koden inne i <head>, og starter opp med å deklarere en variabel for hvert av elementene på siden vår: 8
Løkker og if-tester Informasjonsteknologi 2 Når er siden ferdig lastet? JavaScript kan sjekke dette med noe som heter window.onlad. Det kan vi bruke til å sette noe i gang, så snart hele nettsiden er lastet inn i nettleseren. Vi setter da i gang en funksjon. Det første vi gjør, er å finne alle elementene vi har lagt inn på nettsiden vår. Vi sier at vi deklarerer dem globalt, siden vi skriver var tall, var knapp osv. utenfor funksjonen. Da kan vi få tak i elementene også i andre funksjoner. Vi gir dem samme variabelnavn som de har id. Da er det lett å huske. Knappen skal sette i gang regnemaskinen Vi må sørge for at det skal skje noe når noen klikker på knappen vår. Det gjør vi ved å si at et klikk på knappen skal starte en annen funksjon som heter regnut. knapp.onclick = regnut; betyr at funksjonen regnut starter når vi klikker på knappen. Legg merke til at vi ikke har med parentesen når vi sier at knappen skal starte funksjonen. Vi skriver også onclick med liten c, i motsetning til hva vi gjorde da vi skrev onclick inne i knappen på s. 3. 9
sdsd Løkker og if-tester Informasjonsteknologi 2 Vi sjekker om det virker Det er alltid lurt å sjekke om ting virker som vi tror. Før vi begynner å lage en masse lur kode inne i funksjonen, forsikrer vi oss om at den faktisk starter når vi klikker på knappen: Flott! Det ser ut til å virke. Da lager vi ferdig regnemaskinen vår. Hva skjer i koden? 1. Først tar vi vekk det som står i tabell-diven vår, ved å si at den nå skal inneholde en tom tekst. 2. Vi henter ut verdien som er skrevet inn i tall-inputfeltet. Legger verdien inn i en variabel, så vi slipper å skrive tall.value hver gang vi skal ha tak i den. 3. Lager en løkke som går fra 1 til 10. 4. For hver runde ganger vi i med mitttall, og legger det inn i tabell-diven. Fare på ferde? Ja. Vi kan ikke være sikre på at det vi får inn er et tall. Det kan vi fikse slik, hvor vi avslutter funksjonen hvis mitttall ikke er et tall (isnan betyr er ikke et tall) 10
Løkker og if-tester Informasjonsteknologi 2 if if-tester Et dataprogram må i mange tilfeller sjekke om noe er sant eller ikke. Det kan være om et passord stemmer med det som er oppgitt av en bruker som skal logge seg inn på nettsiden, eller det kan være om det nok penger på konto til å betale en regning. Til dette kan vi bruke noe som heter if-tester. En enkel if-test Vi ber brukeren skrive inn ett passord, og sjekker om det er rotte. Hvis det er det, får vi beskjed om at det var riktig passord. Vi kan også gi en melding hvis det er feil: 11
sdsd Løkker og if-tester Informasjonsteknologi 2 Praktiske eksempler 1 == eller === Sjekker om du er gammel nok til å kjøpe øl. Vi kan også lage flere kriterier: 2 Hva er forskjellen på == og === == sjekker om verdien er den samme. === sjekker om verdien og datatype er den samme. Flere tester inne i parentesen 3 I eksempelet vil vi først få true og så false i alertboksene. Verdien er 2 i begge, men datatypen er Number for t, og String for s. Her sjekker vi om alder er under 16 eller over 72. Da er du enten barn eller pensjonist, og kan få rabatt. Det sikreste er altså å bruke ===, men da må vi også noen ganger gjøre om datatypen til det vi forventer at den skal være. Mer om dette siden! 12
Løkker og if-tester Informasjonsteknologi 2 Er 2 kriterier oppfylt? Vi kan også sjekke om 2 kriterier er sanne. Da bruker vi && Superkompakt if-setning Switch Hvis det blir veldig mange if else setninger, kan det ofte lønne seg å bruke det vi kaller en switch-statement. Vet ikke om noe bra norsk ord. Uansett ser den ut som dette: Noen mennesker er glade i å skrive kompakt kode, og synes at if-setninger genererer så mange ord. Heldigvis fins det en måte å gjøre koden ultrakompakt: Koden sjekker om i er større enn 4. Hvis den er det, skriver den ja, ellers skriver den nei. Det blir det samme som å skrive: Sjekker om navn er lik det som står bak case. break avslutter og sørger for at vi ikke går videre. Hvis ingenting slår til, kan vi bruke default. Den slår til hvis ingenting annet gjør det. Velg selv! 13
sdsd Løkker og if-tester Informasjonsteknologi 2 Vi setter det hele sammen til en liten handleliste Så hvis vi lar være å tenke på alle de kjedelig eksemplene vi har gjort hittil, kanskje vi kan lage noe nyttig ut av det hele? Kanskje vi kan lage en enkel handleliste? Først litt html: Vi ønsker å legge til en ny vare når vi klikker på knappen. Brukeren må skrive inn varenavn i input-feltet. Men hvordan skal vi lagre listen vår? Det må bli et array. Vi går opp i head-seksjonen i dokumentet vårt, og legger til litt kode: Først deklarerer vi variabler for de elementene vi trenger. Så tilordner vi, først når nettsiden vår er helt lastet inn med alle elementene på siden, de forskjellige elementene som vi skal bruke. Når vi klikker på knappen, skal vi legge til en ny vare. Vi legger til et nytt listepunkt for hver vare som legges til. Dette vises så i listen vår. 14
Løkker og if-tester Informasjonsteknologi 2 Men hvor ble det av arrayet jeg lovet dere? Et array med alle varene er nødvendig i den grad vi har tenkt å lagre, i hvert fall midlertidig, varene vi legger inn. Vi kan skrive om koden så den viser frem alle varene som ligger i et array. Og i stedet for å legge varene rett inn i listen, legger vi dem først i et array som vi viser frem hver gang vi lager en ny vare. Og da må vi bruke en eller annen form for løkke når vi skal vise alle varene i listen vår. 15
sdsd Løkker og if-tester Informasjonsteknologi 2 Praktiske eksempel på bruk av løkker og if-tester og andre ting vi har lært om. La oss forsøke å lage en nettside som leter etter ord i en tekst. Setter opp html-siden Deklarerer variabler i koden. I en script-blokk inne i head. Søket var ikke helt vanntett. Finner ikke siste ordet. Noen som kan finne ut hvorfor? 16
Løkker og if-tester Informasjonsteknologi 2 Oppgaver til denne leksjonen 1. Deklarer to variabler, n1 og n2, og tilordn dem verdier (for eksempel 2 og 4). Hvis n1 er større enn n2 skal du skrive ut at 2 er mindre enn 4. 2. Se om du klarer å lage en funksjon som regner om fra nautiske mil til meter 3. Kan du lage en nettside hvor brukeren kan skrive inn antall nautiske mil, og du får svaret i meter på skjermen? 4. Lag en funksjon som tar 2 tekster som parametre. Funksjonen skal sette sammen tekstene og skrive dem ut på en nettside. Bruk 3 tekstfelt og en knap Når du skriver tekst i 2 av tekstfeltene og klikker på knappen, skal tekstene settes sammen i det 3. tekstfeltet 5. Lag en funksjon som tar et tall som parameter. Funksjonen skal finne roten av tallet, og skrive ut svaret. 6. Lag en funksjon som tar 3 bilmerker (String) som parametre. Funksjonen skal opprette et array, og legge bilene inn i arrayet. Til slutt skal dere skrive ut arrayet i en div-tagg e.l. 7. Lag en funksjon som oppretter et tilfeldig tall mellom 0 og 10. Hvis tallet er under 5, skal du vise teksten: "Tallet er under 5". Hvis tallet er mellom 5 og 8, skal du vise teksten "Tallet er mellom 5 og 7. Hvis tallet er 8 eller mer, skal du vise teksten "Tallet er større enn 8" 8. Deklarer et array, gnagere Legg inn en mus, et marsvin, en lemen og en rotte i arrayet Finn ut hvilken gnager som ligger som nummer 2 i arrayet Lag en knapp som, når du klikker på den, tar ut en gnager fra arrayet og skriver ut hva slags gnager det er. Lag et tekstfelt og en ny knapp Når du skriver inn en gnager-type i tekstfeltet og klikker på knappen, skal denne gnageren inn i arrayet 9. Lag en knapp for hvert heltall (0-9) Prøv å sette knappene på siden så det ser ut som en kalkulator Når du klikker på en av knappene, skal tallet legges til et tekstfelt omtrent som det gjøres på en kalkulator 10. Lag 3 knapper til, en for pluss, en for minus og en for = Se om du får det til å virke som en kalkulator HINT: Kanskje du må ha en variabel som heter regneoperasjon. Denne kan settes til pluss når du klikker på pluss og minus for minusknappen. Men du kan også finne andre måter. Du må nok ha et par variabler til for å lagre tall som blir skrevet inn. Nøtt: Forsøk å lage kalkulatoren så realistisk som mulig. Svaret du får fra én regneoperasjon skal kunne regnes med videre i neste regneoperasjon. Forsøk deg på flere regneoperasjoner og funksjoner som en kalkulator vanligvis har. 17