En kortfattelig guide til JavaScript programmering. Joachim Haagen Skeie. Når vi bruker jquery funksjoner, må jquery inkluderes

Transkript

1 JavaScript Kalkulator Oppdater JavaScript koden inn i JavaScriptfeltet Når vi bruker jquery funksjoner, må jquery inkluderes Trykk på kjør kodeknappen Det oppdaterte resultatet dukker opp i Resultat-området En kortfattelig guide til JavaScript programmering. Joachim Haagen Skeie

2 2017 Kodegenet AS, Joachim Haagen Skeie Skrevet i samarbeid med Senter for IKT i Utdanningen For ytterligere informasjon og bestilling av denne og andre bøker fra Kodegenet, vennligst besøk Kodegenets nettsider på: Spørsmål, tilbakemeldinger eller andre henvendelser kan sendes via epost til post@kodegenet.no. Layout og design: Joachim Haagen Skeie Kodegenet AS Papir omslag: 160g Papir innmat: 100g Trykkes i småopplag ved forespørsel Kodegenet AS Cecilie Thoresensvei 9, 1153 Oslo, Norway post@kodegenet.no 2 KODEGENET.NO

3 Innhold 1. JavaScript Kalkulator Introduksjon til kode-editoren Starte på kalkulator-prosjektet Implementere regne-operasjonene Info-side logikk JavaScript Kalkulator 3

4 1. JavaScript kalkulator I løpet av dette mini-heftet skal vi programmere en liten JavaScript kalkulator med støtte for følgende: Knapper for hvert av tallene Knapper for operasjonene o Summering o Subtrahering o Multiplikasjon o Divisjon o Er llik Støtte for input via tastaturet 1.1. Hva er JavaScript Kort fortalt er JavaScript et prototype-basert språk, på grensen til et objektorientert språk, som vil si at språkets grunnleggende funksjonalitet blir spesifisert som objekter. Dermed består et JavaScript språk av flere objekter som kommuniserer med hverandre for å levere funksjonaliteten. Moderne JavaScript er tolket samtidig som det er basert på en virtuell maskin. Det kan være litt vanskelig å forstå hva det innebærer, så vi skal raskt gå gjennom de ulike typene programmeringsspråk vi har og sette JavaScript inn i en kontekst Hva inneholder dette heftet? Dette heftet fokuserer på å lære JavaScript. Likevel kommer vi til å skrive lite grann HTML for å gi programmet vårt et grafisk brukergrensesnitt. I løpet av dette heftet skal vi se nærmere på: Hva JavaScript er og hvordan det sammenliknes med andre programmeringsspråk Hva kan JavaScript brukes til? En introduksjon til Kode-editoren vi skal bruke Vårt første program Hei Kalkis Introduksjon til kalkulator-prosjektet Lyn-introduksjon til HTML for å tegne en kalkulator Variabler, Gjentakelser og sammenlikninger i JavaScript Funksjoner Sette det hele sammen til en fungerende kalkulator 4 KODEGENET.NO

5 Hvor hører JavaScript hjemme? Programmeringsspråk kommer i mange ulike varianter. Fra lav-nivå språk som Assembly som kun inneholder instruksjoner som direkte representerer instrukser til prosessoren til høy-nivå språk som Java, C, Pascal og JavaScript som har et mye bredere funksjonsområde og likner mer på strukturerte instruksjoner. Årsaken til at vi har høy-nivå språkene er for å gjøre det enklere for oss mennesker å kunne programmere datamaskinene. For mens assemblyprogrammering krever en dyp og nøyaktig kunnskap om prosesor-arkitekturen og hvordan prosessoren utfører disse instruksjonene, krever høy-nivå språkene kun en overfladisk forståelse av prosessoren. Til gjengjeld baserer høy-nivå språkene seg desto mer på logikk og funksjoner. Blant høy-nivå språkene forskjellene store. Ikke bare i notasjonen hvordan språkets grammatikk er strukturert men også i hvordan man får datamaskinen til å forstå programmene vi har programmert. Felles for alle høy-nivå språkene er at de på et eller annet tidspunkt mellom når vi skriver koden til maskinen skal utføre den må oversettes til maskinkode. For de fleste moderne språk betyr det at de kompileres ned til assembly-kode før de igjen oversettes til språket som maskinen egentlig forstår en lang lang rekke av 1-tall og 0-tall. Denne rekken av 1 og 0 er selve kjernen til våre digitale datamaskiner, og dermed også våre digitale liv. Det er vanskelig for oss mennesker å forestille oss det svimlende antallet med digitale bits som kreves for at vi skal få datamaskinen til å vise frem et bilde på skjermen, strømme en video fra Internett eller fortelle datamaskinen at den skal flytte musepekeren 15 punkter til høyre, men en oppdatertingsfrekvens på 50 ganger i sekundet. Språk som PHP, Perl og Python er såkalte tolkede språk. Det vil si at språkene er levert med et kjøremiljø som i sanntid leser koden akkurat slik programmereren kodet den og oversetter den til digitale bits som prosessoren kan nytte seg av. Slike språk er det ofte enkelt å komme i gang med, ettersom vi ofte kan skrive koden, lagre filen og deretter helt enkelt få datamaskinen til å kjøre den. Fordelen med slike språk er at de fungerer på alle maskiner med kjøremiljøet installert uavhengig om prosessoren er en Intel prosessor eller en ARM prosessor. Tolkede språk er dermed også kryssplattform så lenge det finnes et kjøremiljø for operativsystemet. Ulempen med denne friheten er at slike språk ofte er tregere ettersom datamaskinen hele tiden må bruke deler av prosessoren på å oversette koden til maskinkode. På den andre siden av spekteret finner vi de kompilerte språkene, som C, C++ og Pascal. Dette er språk som programmereren på forhånd må kompilere fra kode til digitale bits før programmet kan kjøres. Ettersom språket blir kompilert på forhånd, er det dermed ikke mulig å kompilere et slikt program på en Windows maskin, for senere å kjøre det på en Macintosh uten at programmet JavaScript Kalkulator 5

6 må rekompileres. På den andre siden er slike programmer ofte svært mye raskere enn de tolkede programmene. Det kan kanskje være vanskelig å se forskjellen på moderne maskiner, men disse forskjellene som ofte kan være mellom 10 og 100 ganger i størrelsesorden, utgjør en stor forskjell for programvare som enten krever mye ressurser, eller som skal kjøres på servere med mange brukere. Midt mellom de tolkede språkene og de kompilerte språkene finner vi språk som Java, C# (.Net) og JavaScript. Disse språkene blir også kompilert, men til et mellom-format som er kryss-kompatibelt. Dette mellomformatet kjører på toppen av en virtuell maskin, som for eksempel Java Virtual Machine for Java, CLS for.net eller V8 for Chrome-baserte nettlesere og Node.js. Her stiller JavaScript seg også litt i en egen klasse, ettersom leveransen av selve JavaScript koden ofte gjøres ved å overføre koden som ren tekst. Denne teksten blir deretter tolket på samme måte som de tolkede språkene før den leveres videre til den virtuelle maskinen. Figur 1 Hvor hører JavaScript hjemme? 6 KODEGENET.NO

7 1.3. Hva brukes JavaScript til? Tradisjonelt er JavaScript språket som benyttes for å programmere rike nettsider. Opprinnelig var JavaScript tenkt som et språk for å kunne programmere effekter inn på nettsider. I Internetts spede barndom kunne man finne morsomme nettsider med scrollende tekst, jordskjelv-effekter og områder som spontant skiftet bakgrunnsfarge. Som du forstår hadde ikke JavaScript akkurat alle forutsetningen på plass for å 20 år senere bli ett av verdens aller mest populære programmeringsspråk. Men for å være rettferdig er JavaScript i dag noe helt annet enn de første versjonene og fokuset i dag er muligheten til å kunne levere nettapplikasjoner som lever opp til forventningene om å være funksjonelt på linje med installerte applikasjoner både på datamaskinen og på mobile enheter. Men i tillegg til å være standardspråket for nettleseren, er det en økende trend at også server-baserte applikasjoner med Node.js. Men i dette kurset skal vi fokusere på JavaScript for nettleseren. JavaScript Kalkulator 7

8 2. Introduksjon til kode-editoren løpet av dette heftet skal vi se benytte oss av en kode-editor som kan brukes for å lage små og enkle HTML, CSS og JavaScript kodeeksempler kodebiter. Disse kodebitene kan man senere lagre, dele og sy inn i andre nettsider. Editoren er ganske enkel i bruk. Til venstre finner vi et input felt for HTML, CSS og JavaScript kode, og til høyre kan man se resultatet av koden man har skrevet ved å trykke på Kjør Kode -knappen øverst i nettleservinduet. Resultatet av å skrive og kjøre en slik kodebit, kan se slik ut. Knapper for å velge hvilke felter som skal være synlige Knapp for å kjøre koden vi har skrevet Verktøy og linker Resultat-området HTML-felt CSS-felt Figur 2 JavaScript kode-editoren editor.kodegenet.no Ettersom vi ikke skal benytte oss av CSS kode nå, kan vi enkelt skjule CSS JavaScript- input-feltet ved å velge bort CSS øverst på skjermen. Da får vi litt mer plass til HTML og JavaScript koden. 8 KODEGENET.NO Meldinger-felt Figur 3 Vi skjuler CSS-feltet Dersom det skulle dukke opp noen feilmeldinger når vi forsøker å kjøre koden vår, får vi se dem nederst til venstre i Meldinger -området. Når vi nå har blitt litt kjent med Editoren, kan vi starte på vårt første JavaScript program, Hallo Kalkis Vårt første JavaScript program Vårt første JavaScript program skal være veldig enkelt. Aller først skal vi bruke editoren til å plassere litt tekst på en ny nettside. Vi starter med å navigere til editoren i nettleseren ved å skrive inn nettaddressen editor.kodegenet.no. Deretter skal vi lage et nytt avsnitt som inneholder teksten Hallo. For å få til det

9 skriver vi enkelt og greit <p>hallo</p> inn i HTML-feltet i editoren. Deretter trykker vi på kjør kode knappen. Klikk på CSSknappen for å velge bort CSS-feltet Figur 4 Vi tester editoren I HTML-koden vi har skrevet ser vi at teksten vår Hallo er pakket inn i et HTML element som heter p (for paragraph ). De fleste HTML-elementer starter med <navn-på-element> og avsluttes med </navn-på-element>, og alt som befinner seg innenfor <> og </> er sub-elementer. Dette kurset kommer ikke til å gå gjennom alle HTML elementene, men elementene blir beskrevet kort første gang de tas i bruk. Vi har nå fått teksten Hallo til å dukke opp i Resultat-feltet. Det neste vi skal gjøre, er å benytte oss av JavaScript for å endre på teksten slik at det står Hallo Kalkis i stedet for. JavaScript Kalkulator 9

10 2.2. Endre på teksten ved hjelp av JavaScript For å kunne endre på teksten vår, må vi legge til et attributt til <p>-elementet vårt som gjør at JavaScript enkelt kan finne avsnittet vårt og endre på teksten. Vi kan legge til en unik identifikator til elementene våre via id-attributtet. Endre på teksten inne i HTML-feltet slik at det ser slik ut: <p id= halloavsnitt >Hallo</p> Deretter klikker vi på kjør kode knappen for å se at resultatet foreløpig er helt likt. For å kunne endre på teksten må vi gjøre følgende: Hente ut elementet med id lik halloavsnitt Endre på innholdet til HTML elementet ved å bytte det ut med Hallo Kalkis For å få tak i avsnittet vårt, må vi spørre javascript dokumentet om å finne elementet basert på dets id-attributt. Dokumentet er et objekt som alltid er tilgjengelig, og vi kan benytte objektet enkelt å greit ved å referere til variabelen document. Verdien til document-variabelen er selve Document objektet, som representerer hele nettsiden. Document-objektet har en rekke funksjoner som lar oss manipulere det vi ser (og ikke ser) på nettsiden vår. Vi skal nå benytte funksjonen getelementbyid, for å finne avsnittet vårt. Deretter skal vi endre på HTML-koden som befinner seg inne i avsnittet ved å sette innerhtml-variabelen til den nye teksten Hallo MOOC. Skriv følgende inn i JavaScript-feltet: document.getelementbyid('halloavsnitt').innerhtml = "Hallo Kalkis"; Deretter kan vi trykke på kjør kode knappen for å se at teksten Hallo blir byttet ut med Hallo Kalkis. 10 KODEGENET.NO

11 Skriv JavaScript koden inn i JavaScript-feltet Resultatet dukker opp i Resultat-feltet Figur 5 Vi bytter ut teksten via JavaScript Det neste vi skal gjøre er å skrive om JavaScript koden vår slik at den bruker biblioteket jquery i stedet for. jquery er kanskje det aller mest benyttede JavaScript biblioteket og har etter hvert nærmest blitt som de facto standard å regne. Men før vi starter med å bruke jquery, se om du kan legget til enda ett avsnitt, før du også endrer på innholdet til dette avsnittet med et nytt JavaScript uttrykk. Når Editoren er embeddet slik som den er under, vises kun ett av kode-feltene av gangen. For å endre mellom HTML-koden og JavaScriptkoden trykker vi enkelt på HTML-knappen og JavaScript-knappen. JavaScript Kalkulator 11

12 2.3. Bruke jquery Som nevnt er jquery nesten som de facto standard å regne når det kommer til JavaScript-baserte nettsider. Årsaken til det er ganske enkel. For det første er det mye man slipper å ta hensyn til for å sørge for at en nettside fungerer bra i forskjellige nettlesere, og for det andre har jquery veldig mange gode innebygde funksjoner som gjør det enklere og raskere å programmere nettsider med JavaScript. Alle jquery funksjonene befinner seg i ett enkelt objekt som vi kan nå via jquery-variabelen. Men vi kan også nå denne variabelen ved hjelp av $(), som er måten vi skal henvise til jquery på. Inne i $() kan vi angi en selector til ett eller flere HTML elementer som vi ønsker å nå. For eksempel kan vi hente ut en referanse til body-elementet via $( body ), eller vi kan få en liste over alle paragraf-elementene via $( p ). Men som regel ønsker vi enten å hente ut et element basert på elementets idattributt og/eller CSS-klasse. For å finne frem til halloavsnitt-elementet vårt, kan vi hente denne ved å bruke hashtag-symbolet via $( #halloavsnitt ). Når vi har fått en referanse til jquery-objektet som representerer avsnittet vårt kan vi nå endre innholdet til elementet ved å bruker jquery sin html() funksjon. Vi kan dermed oppdatere koden i JavaScript-feltet til. $('#halloavsnitt').html('hallo jquery MOOC'); Oppdater JavaScript koden inn i JavaScriptfeltet Når vi bruker jquery funksjoner, må jquery inkluderes Trykk på kjør kodeknappen Det oppdaterte resultatet dukker opp i Resultat-området 12 KODEGENET.NO Figur 6 Vi oppdaterer teksten via jquery

13 Oppsummering I denne modulen har vi lært å benytte oss av kode-editoren vi skal benytte til resten av kurset. Samtidig har vi skrevet vårt første JavaScript program, komplett med HTML og JavaScript. Helt til slutt har vi sett veldig kort på jquery og skrevet om koden vår slik at den benytter seg av jquery i stedet for de ordinære JavaScript funksjonene. JavaScript Kalkulator 13

14 3. Starte på Kalkulator prosjektet Når vi skal programmere en kalkulator består den av to hoved-seksjoner: HTML-koden som beskriver det grafiske brukergrensesnittet JavaScript-koden som beskriver funksjonaliteten til kalkulatoren I tillegg kan vi benytte oss av CSS for å beskrive utseendet til HTMLelementene, men vi venter til kalkulatoren er ferdig før vi ser på CSS i dette kurset. Det første vi skal gjøre er å tegne selve kalkulatoren, som består av: Ett input-felt som fungerer som kalkulatorens display Knapper for tallene 0-9 Knapper for operasjonene addering, substrahering, multiplisering og dividering Knapp for å se resultatet så langt (er lik) For å få på plass det trenger vi følgende HTML-elementer Ett input-felt for displayet: <input type= text > Tabell, rader og celler for å tegne rutenettet med knappene: <table>, <tr>, og <td> Knapper for tallene og operasjonene: <button> Vi starter øverst på lista, og starter med å lage et input-felt som vi kan benytte som kalkulatorens display Tegne kalkulatorens grafiske brukergrensesnitt Tekstfelter defineres av HTML elementet <input>, sammen med attributten type= text. I tillegg trenger vi å gi elementet en id-attributt slik at vi kan finne den igjen fra JavaScript. Vi skriver dermed følgende HTML-kode inn i HTML-feltet før vi trykker på Kjør Kode knappen. <input id="display" type="text"></input> Resultatet blir at vi får tegnet et tomt tekst-felt i Resultat-feltet. 14 KODEGENET.NO

15 Oppdater HTML koden inn i HTML-feltet Trykk på kjør kodeknappen Det oppdaterte resultatet dukker opp i Resultat-området Figur 7 Vi tegner et input-felt til kalkulatorens display Vi kan dermed fortsette med å tegne tabellen som skal inneholde knappene til kalkulatoren. Det er mange måter å tegne er rutenett på når man skal lage nettsider, men uten at vi blander inn CSS, er det kun HTML tabeller som fungerer. Vi skal dermed benytte oss av en tabell som har 4 rader med 4 kolonner hver. Vi definerer en HTML tabell ved å benytte <table> elementet. Inne i <table> elementet definerer vi først radene ved hjelp av <tr> (tablerow) elementet, som igjen inneholder kolonnene som <td> (table-data) elementer. Vi kan dermed starte med å lage en tom tabell med 1 rad og 4 kolonner. Vi starter med å lage et element for selve tabellen. For at vi skal se resultatet vårt foreløpig, skal vi også legge til attributtet border= 1 som legger til en ramme rundt hver celle i tabellen. <table border="1"> </table> Deretter må vi plasser tabell-raden inne i tabell-elementet. Legg merke til at vi alltid husker på å lukke elementene samtidig som vi oppretter dem. På den måten ender vi ikke opp med uventede feil som stammer fra elementer vi har glemt å lukke. JavaScript Kalkulator 15

16 <table border="1"> <tr> </tr> </table> Deretter kan vi definere de fire kolonnene våre inne i tabell-rad elementet. Her skal vi plassere fire tabell-data-elementer. <table border="1"> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </table> Vi kan nå trykke på kjør kode knappen for å se resultatet i Resultat-feltet. Figur 8 Vi legger til en rad med fire kolonner under displayet Her ser vi at tabellen blir tegnet svært liten. Årsaken til det er at vi ikke har laget noe innhold i tabell-data-elementene våre. Vi kan rette på det ved å legge til en knapp i hver av dem. Knappene skal ha teksten 7, 8, 9 og *, henholdsvis. Knapper definerer vi ved hjelp av <button> elementet, og vi plasserer etiketten vi ønsker at knappen skal ha mellom starten og slutten på elementet. 16 KODEGENET.NO

17 <table border="1"> <tr> <td><button>7</button></td> <td><button>8</button></td> <td><button>9</button></td> <td><button>*</button></td> </tr> </table> Resultatet blir dermed at vi får en knapp plassert i hver av kolonnene til tabellens eneste rad. Vi plasserer en knapp i hver av kolonnene i tabellens eneste rad Figur 9 Vi legger en knapp inn i hver tabell-celle For å fullføre kalkulatorens brukergrensesnitt, kan vi enkelt og greit kopiere hele tabell-rad-elementet og lime det inn 3 ganger til. Her må vi huske å endre på knappenes etiketter. Den oppdaterte koden ser dermed slik ut. Legg merke til at den ene cellen er tom, ettersom vi ikke har noen knapp mellom 0 og =. JavaScript Kalkulator 17

18 <table border="1"> <tr> <td><button>7</button></td> <td><button>8</button></td> <td><button>9</button></td> <td><button>*</button></td> </tr> <tr> <td><button>4</button></td> <td><button>5</button></td> <td><button>6</button></td> <td><button>/</button></td> </tr> <tr> <td><button>1</button></td> <td><button>2</button></td> <td><button>3</button></td> <td><button>+</button></td> </tr> <tr> <td><button>0</button></td> <td></td> <td><button>=</button></td> <td><button>-</button></td> </tr> </table> Vi kan nå trykke på kjør kode knappen for å se resultatet. 18 KODEGENET.NO

19 Oppdater HTML koden inn i HTML-feltet Trykk på kjør kodeknappen Det oppdaterte resultatet dukker opp i Resultat-området Figur 10 Vi tegner resten av bruker-grensesnittet Vi er nå ferdige med å tegne brukergrensesnittet til kalkulatoren. Men før vi starter på JavaScript koden, skal vi fjerne atributtet border= 1 fra tabell elementet slik at vi slipper å se linjene som skiller radene og kolonnene i tabellen. Resultatet ser blir dermed litt renere. Det ferdige brukergrensesnittet til kalkulatoren Figur 11 Vi fjerner rammen rundt tabell-cellene JavaScript Kalkulator 19

20 3.2. Programmere tallverdi til 0-knappen Når vi skal få noe til å skje når vi trykker på knappen har vi flere valgmuligheter. Vi kan implementere en klikk-handler på hver av knappene i HTML koden Vi kan legge på en event-listener som blir kalt når knappen blir trykket på I løpet av dette kurset skal vi gjøre begge deler. Men ettersom alle tallknappene har så å si samme funksjon, mens operator-knappene har forskjellig funksjon for hver knapp, skal vi starte med å legge til en klikk-handler til hvert av <button> elementene i HTML koden. HTML spesifikasjonen legger opp til at man kan knytte HTML koden til JavaScript funksjoner direkte. Denne knytningen skjer på hendelser som er knyttet til brukerens handlinger, slik som å trykke på et element, trekke musepekeren over et element, dra-og-slipp funksjonalitet osv. Vi kommer ikke til å gå gjennom alle disse i dette kurset, men W3Schools har en uttømmende liste på sine nettsider ( ). Når vi skal knytte klikk-hendelsen til en JavaScript funksjon kan vi benytte oss av onclick attributtet til <button> elementet. Dersom vi starter med 0- knappen kan vi få knappen til å kalle en funksjon nullklikket() når knappen blir trykket på. Det oppdaterte <button> elementet ser dermed slik ut. <button onclick="nullklikket()">0</button> Når vi nå klikker på knappen, kalles funksjonen som heter nullklikket(). Denne funksjonen eksisterer jo selvklart ikke enda, men vi kan jo prøve å trykke på Kjør Kode knappen, og se hva som skjer når vi trykker på 0-knappen. Når vi nå klikker på knappen, kalles funksjonen som heter nullklikket(). Denne funksjonen eksisterer jo selvklart ikke enda, men vi kan jo prøve å trykke på Kjør Kode knappen, og se hva som skjer når vi trykker på 0-knappen. 20 KODEGENET.NO

21 Oppdater HTML koden inn i HTML-feltet Trykk på kjør kodeknappen Legg merke til at feilmeldingen dukker opp i Meldinger-området Figur 12 - Vi får en feilmelding i Meldinger-området Feilmeldingen vi får, kan være litt vanskelig å tyde, men det den forsøker å fortelle er at det ikke finne en funksjon nullklikket() som kan kalles i forbindelse med at 0-knappen ble trykket på. Feilmelding: error :: Uncaught ReferenceError: nullklikket is not defined on line 1 Du har kanskje gjettet hva neste steg er. Det er nå på tide å implementere funksjonen nullklikket(). I JavaScript finnes det flere måter å definere en funksjon på, men når vi lager globale funksjoner (funksjoner som er tilgjengelig overalt i webapplikasjonen vår), lager vi dem ved å starte med order function, etterfulgt av funksjonens navn og parameterliste. JavaScript Kalkulator 21

22 funksjonens navn parameterliste Kode som funksjonen skal kjøre function sparukelonn(sparemaal) { Figur 13 - Oppbyggingen av en JavaScript funksjon Vi kan dermed opprtte nullklikket() funksjonen vår ved å skrive følgende i JavaScript-feltet. function nullklikket() { Om vi nå kjører programmet vår på nytt ved å trykke på Kjør Kode knappen, ser vi at vi ikke lengre får opp en feilmelding i Meldinger-området. Men for å få knappen til å skrive tallet 0 i displayet, må vi legge til litt kode inne i nullklikket() funksjonen. For å få til det må vi gjøre 3 operasjoner inne i funksjonen: 1. Hente inn display-elementet og lagre den i en ny variabel display 2. Hente ut verdien som allerede står i display elementet 3. Legge til ett 0-tall og oppdatere verdien til display elementet Det første punktet har vi allerede sett hvordan vi gjorde i forrige modul. Vi kan enkelt og greit benytte oss av document.getelementbyid() funksjonen. Deretter skal vi lagre resultatet (dvs. display elementet) i en variabel som heter display. Når vi lagrer variabler i JavaScript starter vi med ordet var, etterfulgt av navnet på variabelen. Deretter kan vi angi variabelen verdi direkte ved å også legge til et =-tegn og verdien variabelen skal ha. I vårt tilfelle kan vi dermed både opprette variabelen og gi den verdi samtidig. Den oppdaterte nullklikket() funksjonen ser dermed slik ut. function nullklikket() { var display = document.getelementbyid('display'); 22 KODEGENET.NO

23 Her ser vi at vi oppretter variabelen display, og gitt den verdien til display elementet. Deretter skal vi hente ut verdien til display-elementet. Det kan vi gjøre ved å bruke value-variabelen til display-variabelen vår. Vi skal deretter lagre verdien i enda en ny variabel som vi kaller displayverdi. function nullklikket() { var display = document.getelementbyid('display'); var displayverdi = display.value; Det siste vi skal gjøre da er å legge til ett ekstra 0-tall til høyre for det som evt. allerede står i displayet. Her skal vi oppdatere display.value med den nye verdien. function nullklikket() { var display = document.getelementbyid('display'); var dispverdi = display.value; display.value = dispverdi + "0"; Nå kan vi kjøre programmet vårt på nytt ved å klikke på Kjør Kode knappen før vi trykker på 0-tallet et par ganger for å se at alt fungerer som det skal. Vi kan legge til flere 0-tall ved å klikke på 0-knappen Figur 14 - Vi kan trykke på 0-tallet for å legge til 0-tall i displayet Vi har nå laget vår første JavaScript funksjon, nullklikket(). Denne funksjonen henter inn verdien i display-elementet før den oppdaterer den ved å legge til ett null-tall. Da er alt på plass for at vi kan oppdatere koden litt for at de andre tall-knappene også skal fungere som forventet. JavaScript Kalkulator 23

24 3.3. Programmere tallverdi til alle tallknappene Vi har nå laget en funksjon som heter nullklikket() som plasserer et ekstra 0-tall helt til høyre i displayet. Denne funksjonen fungerer fint så lenge vi kun har 1 knapp å tenke på. Men om vi skal fortsette på samme måte med en funksjon per knapp, ender vi opp med 10 funksjoner om er nesten helt like. For å unngå det, skal vi endre litt på funksjonen slik at den fungerer for alle tallknappene samtidig. Vi skal endre navn på funksjonen fra nullklikket() til tallklikket() Den oppdaterte tallklikket() funksjonen skal ta mot en input-parameter slik at vi kan fortelle funksjonen hvilket tall som skal legges til i displayet. Vi starter dermed med å gi funksjonen et nytt navn: function tallklikket() { var display = document.getelementbyid('display'); var dispverdi = display.value; display.value = dispverdi + "0"; Det neste vi skal gjøre er å fortelle funksjonen at den kan ta mot ett input parameter. Det gjør vi ved å plassere et variabelnavn mellom parentesene til funksjonen. Vi kaller input-parameteret tall. function tallklikket(tall) { var display = document.getelementbyid('display'); var dispverdi = display.value; display.value = dispverdi + "0"; Når funksjonen nå får inn variabelen tall, kan vi enkelt og greit endre på det siste uttrykket inne i funksjonen slik at vi legger til verdien i tall-variabelen i stedet for 0. Den oppdaterte funksjonen blir dermed slik. function tallklikket(tall) { var display = document.getelementbyid('display'); var dispverdi = display.value; display.value = dispverdi + tall; 24 KODEGENET.NO

25 Det siste som gjenstår nå, er at vi oppdaterer HTML koden litt. Det første vi må gjøre er å endre fra nullklikket() til tallklikket(), men vi må også nå sende inn hvilket tall som blir klikket av knappen, slik at HTML-koden for knappen nå blir slik: <button onclick="tallklikket(0)">0</button> Da kan vi enkelt og greit oppdatere de andre tall-knappene slik at de alle fungerer som vi forventer. <input id="display" type="text"></input> <table> </table> <tr> </tr> <tr> </tr> <tr> </tr> <tr> </tr> <td><button onclick="tallklikket(7)">7</button></td> <td><button onclick="tallklikket(8)">8</button></td> <td><button onclick="tallklikket(9)">9</button></td> <td><button>*</button></td> <td><button onclick="tallklikket(4)">4</button></td> <td><button onclick="tallklikket(5)">5</button></td> <td><button onclick="tallklikket(6)">6</button></td> <td><button>/</button></td> <td><button onclick="tallklikket(1)">1</button></td> <td><button onclick="tallklikket(2)">2</button></td> <td><button onclick="tallklikket(3)">3</button></td> <td><button>+</button></td> <td><button onclick="tallklikket(0)">0</button></td> <td></td> <td><button>=</button></td> <td><button>-</button></td> Når vi nå har fått alle tall-knappene til å reagere som vi ønsker, kan vi fortsette med å implementere regne-operasjonene. JavaScript Kalkulator 25

26 Vi kan nå legge inn flere tall ved å trykke på tall-knappene Figur 15 - Vi kan nå trykke på alle tall-knappene for å legge inn nye tall i displayet 26 KODEGENET.NO

27 4. Implementere regneoperasjonene Når vi nå har displayet og funksjonaliteten til tall-knappene på plass, er det på tide å starte med å implementere funksjonaliteten bak operator-knappene. Vi starter med summering, og fortsetter deretter med de andre regneoperasjonene. Når vi skal lage funksjonaliteten må vi tenke litt annerledes enn vi gjør når vi løser en likning. Vi må nemlig huske å mellomlagre både verdien til displayet og hvilken regne-operasjon vi har trykket på slik at vi kan utføre regne-operasjonen når vi trykker på er lik tasten. 4.1.Implementer pluss-knappen Vi starter med å legge på to nye variabler helt mot toppen JavaScript-feltet. Disse variablene blir dermed globale, som betyr at de vil være tilgjengelig i alle funksjonene til webapplikasjonen, akkurat på samme måte som document, eller window variablene alltid er tilgjengelig. Vanligvis pakkes slik funksjonalitet inn i et eget JavaScript objekt, men for dette kurset er det greit å lage globale variabler. De to variablene vi skal opprette kaller vi mellomsum, og valgtoperator. Samtidig som vi oppretter variablene gir vi dem verdiene 0 og null, henholdsvis. var mellomsum = 0; var valgtoperator = null; Deretter skal vi lage en funksjon som håndterer funksjonaliteten vi trenger når vi trykker på pluss-knappen. Vi kaller funksjonen operatorpluss(). Inne i funksjonen skal vi utføre følgende operasjoner: Lese ut verdien fra display-tekstfeltet Konvertere verdien fra en tekst til et heltall Sette displayets verdi tilbake til 0 Vi har allerede lest ut verdien fra display-tekstfeltet tidligere i talltrykket () funksjonen. Her skal vi gjøre akkurat det samme. Funksjonen operatorpluss() starter dermed slik. JavaScript Kalkulator 27

28 function operatorpluss() { var display = document.getelementbyid('display'); mellomsum = display.value; Men nå har vi et lite problem, ettersom verdien vi leser fra tekstfeltet er en tekst, og ikke et tall. Dersom vi nå forsøker å legge til et nytt tall til mellomsum-variabelen, vil vi ikke summere de to tallene, men heller bare sammenslå (konkatinere) de to tekstene (på samme måte som vi gjør når vi trykker på et nytt tall i kalkulatoren). Vi må dermed konvertere teksten vi leser fra display.value til et heltall. Heldigvis finnes det en innebygget funksjon for dette i JavaScript som heter parseint(). Vi slipper å gjøre dette i et helt eget uttrykk, ettersom vi enkelt og greit kan pakke display.value uttrykket inn i parseint() funksjonen. function operatorpluss() { var display = document.getelementbyid('display'); mellomsum = parseint(display.value); Dermed er vi bare to uttrykk unna å ha implementert hele operatorpluss() funksjonen. Før vi kan si oss ferdige med den, må vi sette valgtoperatorvariabelen til verdien +, mens vi resetter display.value til 0. function operatorpluss() { var display = document.getelementbyid('display'); mellomsum = parseint(display.value); valgtoperator = "+"; display.value = 0; Her kunne vi benyttet samme klikk-event som vi gjorde for tall-knappene, men for å vise hvordan man kan sette opp lyttere skal vi benytte oss av jquery hendelsen click i stedet for. Men før vi kan gjøre det, trenger pluss-knappen en egen id-attributt. <button id="plusbutton">+</button> Deretter kan vi registrere en klikk-event på knappen med id lik plusbutton. Denne koden legger vi rett under de globale variablene (og ikke inne i noen av de andre funksjonene). $("#plusbutton").click(operatorpluss); 28 KODEGENET.NO

29 Denne koden ser kanskje litt merkelig ut, men det som skjer her er at vi henter ut jquery objektet som representerer HTML-elementet med id lik plusbutton. I vårt tilfelle er dette pluss-knappen. Deretter registrerer vi en klikk-hendelse på jquery objektet, som i vårt tilfelle er operatorpluss() funksjonen vår. Resultatet her er, med andre ord, at operatorpluss() funksjonen blir kalt hver gang vi trykker på pluss-knappen. Vi kan nå teste ut kalkulatoren vår litt. Legg merke til hva som skjer når vi taster inn noen nummer i displayet og trykker på pluss-knappen Implementere Er Lik knappen Vi er nå halvveis på vei for å få implementert hele pluss-operasjonen. Når når vi har mellomlagret verdien som stod i displayet nå vi trykker på pluss-knappen kan vi utføre selve addisjons-operasjonen i en ny erlikklikket() funksjon. Denne funksjonen skal utføre 3 handlinger: 1. Hente inn verdien fra displayet og konvertere teksten til et heltall 2. Sjekke hvilken regneoperasjon som er valgt og utføre den 3. Skrive den nye tall-verdien tilbake til displayet La oss starte på toppen av listen med å hente inn verdien av displayet. Vi har gjort dette to ganger allerede. function erlikklikket() { var display = document.getelementbyid('display'); var dispvalue = parseint(display.value); Når vi nå har hentet inn verdien fra displayet, skal vi sjekke hvilken regneoperasjon som er valgt. Foreløpig har vi kun implementert summering, men vi skal snart implementere de tre andre funksjonene. Vi starter dermed med å benytte et if-uttrykk. If-uttrykk i JavaScript består av ordet if, sammen med en betingelse som alltid er enten sant (true) eller usant (false). Dersom betingelsen er sann, utføres innholdet i if-uttrykket, men dersom betingelsen er usann, hopper JavaScript over innholdet i if-uttrykket. Strukturen på et if-uttrykk i JavaScript JavaScript Kalkulator 29

30 Her er vi allerede på vei med innholde av neste steg i erlikklikket() funksjonen. Som figuren viser, skal vi her sammenlikne verdien til den globale valgtoperator variabelen med tegnet +. function erlikklikket() { var display = document.getelementbyid('display'); var dispvalue = parseint(display.value); if (valgtoperator === "+") { Dersom betingelsen vår er sann utføres innholdet av if-uttrykket, hvor vi skal utføre selve kalkulasjonen. Ettersom vi her utfører en addisjon kan vi enkelt summere verdien av mellomsum-variabelen og dispvalue-variabelen. Resultatet kan vi enkelt og greit lagre tilbake i mellomsum-variabelen. Til slutt avslutter vi funksjonen ved å oppdatere display.value. function erlikklikket() { var display = document.getelementbyid('display'); var dispvalue = parseint(display.value); if (valgtoperator === "+") { mellomsum = dispvalue + mellomsum; display.value = mellomsum; Vi er nå nesten klare til å teste webapplikasjonen på nytt. Men først må vi legge til en id-attributt til er lik knappen, og legge til en jquery lytter til JavaScript koden. Id-attributten legges til på samme måte som vi gjorde med pluss-knappen tidligere. <button id="erlikbutton">=</button> Til slutt kan vi legge på en lytter som kaller erlikklikket() funksjonen hver gang er lik-knappen klikkes på. $("#erlikbutton").click(erlikklikket); Når vi nå har implementert summering og er-lik, kan vi fortsette med neste regneoperasjon, minus. 30 KODEGENET.NO

31 4.3. Implementere minus-knappen For å implementer minus-knappen er vi allerede godt på vei i programmet vårt. Hittil har vi lagt til følgende: Når vi trykker på pluss-knappen lagrer vi verdien som står i displayet til variabelen mellomsum, før vi setter valgtoperator til + Når vi senere trykker på er-lik knappen henter vi ut verdien som nå står i displayet. Deretter sjekker vi om valgtoperator er +, før vi regner ut summen av de to variablene mellomsum og valgtoperator. Som du ser, kan vi enkelt og greit utvide kalkulatoren vår ved å implementere førlgende: Vi starter med å lage en ny funksjon operatorminus, som vi ønsker å kalle hver gang minus-knappen trykkes på. o Denne funksjonen skal lagre verdien av displayet til mellomsum-variabelen før den setter valgtoperator lik -. Vi må oppdatere erlikklikket-funksjonen slik at den sjekker om valgtoperator er lik -. Dersom det er tilfelle, kan vi trekke verdien fra displayet fra mellomsum. Til slutt må vi gi minus-knappen en id-attributt (minusbutton), slik at vi kan bruke jquery for å kalle opertorminus() funksjonen hver gang brukeren klikker på minus-knappen. Vi starter med å kopiere operatorpluss() funksjonen, ettersom operatorminus funksjonen skal være nesten helt lik. Det eneste vi trenger å endre på er navnet til funksjonen, samt verdien vi gir variabelen valgtoperator function operatorminus() { var display = document.getelementbyid('display'); mellomsum = parseint(display.value); valgtoperator = "-"; display.value = 0; Som du ser her, har vi kun endret på ett tegn i hele funksjonen. Vi skal endre på dette litt senere slik at vi ikke få så mye duplisert kode, men foreløpig går det greit at koden er kopiert. Det neste vi skulle gjøre var å oppdatere erlikklikket() funksjonen, Denne oppdaterer vi slik at koden også tar hensyn til hva som skal skje når valgtoperator-variabelen har verdien -. Den oppdaterte erlikklikket() funksjonen ser dermed slik ut. JavaScript Kalkulator 31

32 function erlikklikket() { var display = document.getelementbyid('display'); var dispvalue = parseint(display.value); if (valgtoperator === "+") { mellomsum = dispvalue + mellomsum; else if (valgtoperator === "-") { mellomsum = mellomsum - dispvalue; display.value = mellomsum; Funksjonen er enkelt og greit utvidet med en else-if blokk som sjekker om valgtoperator-variabelen inneholder et minus-tegn. Dersom den gjør det, trekker vi displayets verdi fra mellom-summen. Til slutt oppdaterer vi verdien som står i displayet som tidligere. Når mangler vi bar en ting for at kalkulatorens minus-knapp skal fungere vi må kalle operatorminus() funksjonen hver gang brukeren klikker på minusknappen. Det gjør vi på toppen av programmet vårt, på samme måte som med de andre to knappene. $("#minusbutton").click(operatorminus); Vi kan nå prøve ut kalkulatorens pluss- og minus-knapper for å se at kalkulatoren beregner verdiene korrekt. Merk at vi foreløpig må trykke på erlik-knappen mellom hver av regneoperasjonene våre. Dette er ikke helt slik vi ønsker at kalkluatoren skal fungere, men foreløpig fungerer det greit nok KODEGENET.NO

33 Info-side: Logikk Betingelse if ( spart < sparebelop) { Sammenlikning Kode som skal kjøres dersom betingelsen er sann Kode som skal kjøres dersom betingelsen ikke er sann else { false Kjør innholdet i else-blokken true Kjør innholdet i if-blokken Resten av programmet Betingelse while ( spart < sparebelop) { Sammenlikning Kode som skal gjentas inntil betingelsen er usann true Kjør innholdet i while-blokken false Resten av programmet Teller deklarasjon Betingelse Endring av teller Kode som skal gjentas inntil betingelsen er usann for (var uke = 0; spart < sparebelop; uke++) { Teller deklarasjon false Sammenlikning true Kjør innholdet i while-blokken Oppdater teller Resten av programmet navn parameter-liste Kode som funksjonen skal kjøre function sparukelonn(sparemaal) { JavaScript Kalkulator 33

34 34 KODEGENET.NO

35 JavaScript Kalkulator 35

36 Dette mini-heftet går gjennom hvordan vi kan programmere en enkel kalkulator ved hjelp av JavaScript og litt HTML. Heftet går gjennom de viktigste JavaScript konseptene underveis, men er ikke ment til å være en fullstendig guide til JavaScript programmering. Heftet starter enkelt, og bygger videre på kalkulator-konseptet underveis i kapitlene. Til slutt ender vi opp med et lite JavaScript program som kan: Reagere på at brukere trykker på knappene Legge sammen og trekke fra tall Multiplisere og dividere Herfra er det muligheter å utvide programmet med å kunne lese fra tastaturet, implementere mer kompliserte operasjoner eller legge til CSS for å definere met mer brukervennlig brukergrensesnitt. Oppdater HTML koden inn i HTML-feltet Trykk på kjør kodeknappen Legg merke til at feilmeldingen dukker opp i Meldinger-området Ett JavaScript basert prosjekt Enkelt og pedagogisk forklart Påbyggende eksempler