JavaScript Kalkulator - Kodegenet · JavaScript Kalkulator ... instrukser til prosessoren til høy-nivå språk som Java, C, ... er det dermed ikke mulig å kompilere et slikt program

Joachim Haagen Skeie

JavaScriptKalkulator

En kortfattelig guide til JavaScriptprogrammering.

Oppdater JavaScript koden inn i JavaScript-

feltet

Når vi bruker jQuery funksjoner, må jQuery

inkluderes

Det oppdaterte resultatet dukker opp i

Resultat-området

Trykk på kjør kode-knappen

2 | KODEGENET.NO

©2017 Kodegenet AS, Joachim Haagen Skeie

Skrevet i samarbeidmed Senter for IKT i Utdanningen

For ytterligere informasjon og bestilling av denne og andre bøker fra Kodegenet,vennligst besøk Kodegenets nettsider på: www.kodegenet.no. Spørsmål,tilbakemeldinger eller andre henvendelser kan sendes via epost [email protected].

Layout og design: Joachim Haagen Skeie | Kodegenet AS

Papir omslag: 160gPapir innmat: 100g

Trykkes i småopplag ved forespørselKodegenet AS

Cecilie Thoresensvei 9, 1153 Oslo, Norway [email protected]

JavaScript Kalkulator | 3

Innhold

1. JavaScript Kalkulator ........................................... 42. Introduksjon til kode-editoren ........................... 83. Starte på kalkulator-prosjektet ......................... 144. Implementere regne-operasjonene .................. 275. Info-side logikk .................................................. 33

4 | KODEGENET.NO

1. JavaScript kalkulator

I løpet av dette mini-heftet skal vi programmere en liten JavaScript kalkulatormed støtte for følgende:

• Knapper for hvert av tallene• Knapper for operasjonene

o Summeringo Subtraheringo Multiplikasjono Divisjono 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 objekt-orientert språk, som vil si at språkets grunnleggende funksjonalitet blirspesifisert som objekter. Dermed består et JavaScript språk av flere objektersom kommuniserer med hverandre for å levere funksjonaliteten. ModerneJavaScript er tolket samtidig som det er basert på en virtuell maskin. Det kanvære litt vanskelig å forstå hva det innebærer, så vi skal raskt gå gjennom deulike typene programmeringsspråk vi har og sette JavaScript inn i en kontekst.

1.2. Hva inneholder dette heftet?Dette heftet fokuserer på å lære JavaScript. Likevel kommer vi til å skrive litegrann HTML for å gi programmet vårt et grafisk brukergrensesnitt. I løpet avdette heftet skal vi se nærmere på:

¥ Hva JavaScript er og hvordan det sammenliknes med andreprogrammeringssprå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


1.2.1. Hvor hører JavaScript hjemme?

Programmeringsspråk kommer i mange ulike varianter. Fra lav-nivå språk somAssembly som kun inneholder instruksjoner som direkte representererinstrukser til prosessoren til høy-nivå språk som Java, C, Pascal og JavaScriptsom har et mye bredere funksjonsområde og likner mer på strukturerteinstruksjoner. Årsaken til at vi har høy-nivå språkene er for å gjøre det enklerefor oss mennesker å kunne programmere datamaskinene. For mens assembly-programmering krever en dyp og nøyaktig kunnskap om prosesor-arkitekturenog hvordan prosessoren utfører disse instruksjonene, krever høy-nivå språkenekun 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 – hvordanspråkets grammatikk er strukturert – men også i hvordan man får datamaskinentil å forstå programmene vi har programmert. Felles for alle høy-nivå språkeneer at de på et eller annet tidspunkt mellom når vi skriver koden til maskinenskal utføre den må oversettes til maskinkode. For de fleste moderne språkbetyr det at de kompileres ned til assembly-kode før de igjen oversettes tilsprå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, ogdermed også våre digitale liv. Det er vanskelig for oss mennesker å forestilleoss 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 fraInternett eller fortelle datamaskinen at den skal flytte musepekeren 15 punktertil 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åkeneer levert med et kjøremiljø som i sanntid leser koden – akkurat slikprogrammereren kodet den – og oversetter den til digitale bits somprosessoren kan nytte seg av. Slike språk er det ofte enkelt å komme i gangmed, 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å allemaskiner med kjøremiljøet installert – uavhengig om prosessoren er en Intelprosessor eller en ARM prosessor. Tolkede språk er dermed også kryss-plattform så lenge det finnes et kjøremiljø for operativsystemet. Ulempen meddenne friheten er at slike språk ofte er tregere ettersom datamaskinen heletiden 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 frakode til digitale bits før programmet kan kjøres. Ettersom språket blir kompilertpå forhånd, er det dermed ikke mulig å kompilere et slikt program på enWindows maskin, for senere å kjøre det på en Macintosh uten at programmet

6 | KODEGENET.NO

må rekompileres. På den andre siden er slike programmer ofte svært myeraskere enn de tolkede programmene. Det kan kanskje være vanskelig å seforskjellen på moderne maskiner, men disse forskjellene som ofte kan væremellom 10 og 100 ganger i størrelsesorden, utgjør en stor forskjell forprogramvare som enten krever mye ressurser, eller som skal kjøres på serveremed mange brukere.

Midt mellom de tolkede språkene og de kompilerte språkene finner vi språksom Java, C# (.Net) og JavaScript. Disse språkene blir også kompilert, men tilet mellom-format som er kryss-kompatibelt. Dette mellomformatet kjører påtoppen av en ”virtuell maskin”, som for eksempel ”Java Virtual Machine” forJava, CLS for .Net eller V8 for Chrome-baserte nettlesere og Node.js. Herstiller JavaScript seg også litt i en egen klasse, ettersom leveransen av selveJavaScript koden ofte gjøres ved å overføre koden som ren tekst. Denneteksten blir deretter tolket på samme måte som de tolkede språkene før denleveres videre til den virtuelle maskinen.

Figur 1 – Hvor hører JavaScript hjemme?


1.3. Hva brukes JavaScript til?

Tradisjonelt er JavaScript språket som benyttes for å programmere rikenettsider. Opprinnelig var JavaScript tenkt som et språk for å kunneprogrammere effekter inn på nettsider. I Internetts spede barndom kunne manfinne ”morsomme” nettsider med scrollende tekst, jordskjelv-effekter ogområder som spontant skiftet bakgrunnsfarge. Som du forstår hadde ikkeJavaScript akkurat alle forutsetningen på plass for å 20 år senere bli ett avverdens aller mest populære programmeringsspråk. Men for å være rettferdiger JavaScript i dag noe helt annet enn de første versjonene og fokuset i dag ermuligheten til å kunne levere nettapplikasjoner som lever opp tilforventningene 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 trendat også server-baserte applikasjoner med Node.js. Men i dette kurset skal vifokusere på JavaScript for nettleseren.

8 | KODEGENET.NO

2. Introduksjon til kode-editoren

løpet av dette heftet skal vi se benytte oss av en kode-editor som kan brukesfor å 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, CSSog JavaScript kode, og til høyre kan man se resultatet av koden man harskrevet ved å trykke på ”Kjør Kode”-knappen øverst i nettleservinduet.Resultatet av å skrive og kjøre en slik kodebit, kan se slik ut.

Figur 2 – JavaScript kode-editoren editor.kodegenet.no

Ettersom vi ikke skal benytte oss av CSS kode nå, kan vi enkelt skjule CSSinput-feltet ved å velge bort CSS øverst på skjermen. Da får vi litt mer plass tilHTML og JavaScript koden.

Figur 3 – Vi skjuler CSS-feltet

Dersom det skulle dukke opp noen feilmeldinger når vi forsøker å kjøre kodenvår, får vi se dem nederst til venstre i ”Meldinger”-området. Når vi nå har blittlitt kjent med Editoren, kan vi starte på vårt første JavaScript program, ”HalloKalkis”.

2.1. Vårt første JavaScript program

Vårt første JavaScript program skal være veldig enkelt. Aller først skal vi brukeeditoren til å plassere litt tekst på en ny nettside. Vi starter med å navigere tileditoren i nettleseren ved å skrive inn nettaddressen editor.kodegenet.no.Deretter skal vi lage et nytt avsnitt som inneholder teksten ”Hallo”. For å få til det

Knapper for å velge hvilke felter som

skal være synlige

Knapp for å kjøre koden vi har skrevet

Resultat-området

HTML-felt

CSS-felt

JavaScript-felt

Meldinger-felt

Verktøy og linker


skriver vi enkelt og greit <p>Hallo</p> inn i HTML-feltet i editoren. Derettertrykker vi på kjør kode knappen.

Figur 4 – Vi tester editoren

I HTML-koden vi har skrevet ser vi at teksten vår ”Hallo” er pakket inn i etHTML element som heter ”p” (for ”paragraph”). De fleste HTML-elementerstarter med <navn-på-element> og avsluttes med </navn-på-element>, ogalt som befinner seg innenfor <> og </> er sub-elementer. Dette kursetkommer ikke til å gå gjennom alle HTML elementene, men elementene blirbeskrevet kort første gang de tas i bruk.

Vi har nå fått teksten ”Hallo” til å dukke opp i Resultat-feltet. Det neste vi skalgjøre, er å benytte oss av JavaScript for å endre på teksten slik at det står”Hallo Kalkis” i stedet for.

Klikk på CSS-knappen for å velge

bort CSS-feltet

10 | KODEGENET.NO

2.2. Endre på teksten ved hjelp avJavaScript

For å kunne endre på teksten vår, må vi legge til et attributt til <p>-elementetvå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. Endrepå 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 heltlikt. 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 å finneelementet basert på dets id-attributt. Dokumentet er et objekt som alltid ertilgjengelig, og vi kan benytte objektet enkelt å greit ved å referere tilvariabelen document. Verdien til document-variabelen er selve Documentobjektet, som representerer hele nettsiden. Document-objektet har en rekkefunksjoner som lar oss manipulere det vi ser (og ikke ser) på nettsiden vår. Viskal nå benytte funksjonen getElementById, for å finne avsnittet vårt. Deretterskal vi endre på HTML-koden som befinner seg inne i avsnittet ved å setteinnerHTML-variabelen til den nye teksten ”Hallo MOOC”. Skriv følgende inn iJavaScript-feltet:

document.getElementById('halloAvsnitt').innerHTML = "HalloKalkis";

Deretter kan vi trykke på kjør kode knappen for å se at teksten ”Hallo” blirbyttet ut med ”Hallo Kalkis”.


Figur 5 – Vi bytter ut teksten via JavaScript

Det neste vi skal gjøre er å skrive om JavaScript koden vår slik at den brukerbiblioteket jQuery i stedet for. jQuery er kanskje det aller mest benyttedeJavaScript 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 JavaScriptuttrykk. Når Editoren er embeddet slik som den er under, vises kun ett avkode-feltene av gangen. For å endre mellom HTML-koden og JavaScript-koden trykker vi enkelt på HTML-knappen og JavaScript-knappen.

https://www.youtube.com/watch?v=NRTg5EhmTfUhttps://editor.kodegenet.no/?snippet=hallo_mooc

Skriv JavaScript koden inn i JavaScript-feltet

Resultatet dukker opp i Resultat-feltet

Resultatet dukker opp i Resultat-feltet

12 | KODEGENET.NO

2.3. Bruke jQuery

Som nevnt er jQuery nesten som de facto standard å regne når det kommer tilJavaScript-baserte nettsider. Årsaken til det er ganske enkel. For det første erdet mye man slipper å ta hensyn til for å sørge for at en nettside fungerer bra iforskjellige nettlesere, og for det andre har jQuery veldig mange godeinnebygde funksjoner som gjør det enklere og raskere å programmerenettsider med JavaScript. Alle jQuery funksjonene befinner seg i ett enkeltobjekt som vi kan nå via jQuery-variabelen. Men vi kan også nå dennevariabelen 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’). Mensom regel ønsker vi enten å hente ut et element basert på elementets id-attributt 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årtkan 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');

Figur 6 – Vi oppdaterer teksten via jQuery

Oppdater JavaScript koden inn i JavaScript-

feltet

Når vi bruker jQuery funksjoner, må jQuery

inkluderes


Resultat-området



https://editor.kodegenet.no/?snippet=hallo_mooc_jquery

2.4. Oppsummering

I denne modulen har vi lært å benytte oss av kode-editoren vi skal benytte tilresten 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 forde ordinære JavaScript funksjonene.

14 | KODEGENET.NO

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 HTML-elementene, men vi venter til kalkulatoren er ferdig før vi ser på CSS i dettekurset. 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 benyttesom kalkulatorens display.

3.1. Tegne kalkulatorens grafiskebrukergrensesnitt

Tekstfelter defineres av HTML elementet <input>, sammen med attributtentype=”text”. I tillegg trenger vi å gi elementet en id-attributt slik at vi kanfinne den igjen fra JavaScript.

Vi skriver dermed følgende HTML-kode inn i HTML-feltet før vi trykker på KjørKode knappen.

<input id="display" type="text"></input>

Resultatet blir at vi får tegnet et tomt tekst-felt i Resultat-feltet.


Figur 7 – Vi tegner et input-felt til kalkulatorens display

Vi kan dermed fortsette med å tegne tabellen som skal inneholde knappene tilkalkulatoren. Det er mange måter å tegne er rutenett på når man skal lagenettsider, men uten at vi blander inn CSS, er det kun HTML tabeller somfungerer. Vi skal dermed benytte oss av en tabell som har 4 rader med 4kolonner hver. Vi definerer en HTML tabell ved å benytte <table> elementet.Inne i <table> elementet definerer vi først radene ved hjelp av <tr> (table-row) 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. Vistarter med å lage et element for selve tabellen. For at vi skal se resultatet vårtforeløpig, skal vi også legge til attributtet border=”1” som legger til enramme rundt hver celle i tabellen.

<table border="1"></table>

Deretter må vi plasser tabell-raden inne i tabell-elementet. Legg merke til at vialltid husker på å lukke elementene samtidig som vi oppretter dem. På denmåten ender vi ikke opp med uventede feil som stammer fra elementer vi harglemt å lukke.

Oppdater HTML koden inn i HTML-feltet


Resultat-området


16 | KODEGENET.NO

<table border="1"><tr></tr>

</table>

Deretter kan vi definere de fire kolonnene våre inne i tabell-rad elementet. Herskal 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 harlaget 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 viplasserer etiketten vi ønsker at knappen skal ha mellom starten og slutten påelementet.


<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 tiltabellens eneste rad.

Figur 9 – Vi legger en knapp inn i hver tabell-celle

For å fullføre kalkulatorens brukergrensesnitt, kan vi enkelt og greit kopierehele 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. Leggmerke til at den ene cellen er tom, ettersom vi ikke har noen knapp mellom 0og =.

Vi plasserer en knapp i hver av kolonnene i

tabellens eneste rad

18 | KODEGENET.NO

<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.


Figur 10 – Vi tegner resten av bruker-grensesnittet

Vi er nå ferdige med å tegne brukergrensesnittet til kalkulatoren. Men før vistarter på JavaScript koden, skal vi fjerne atributtet border=”1” fra tabellelementet slik at vi slipper å se linjene som skiller radene og kolonnene itabellen. Resultatet ser blir dermed litt renere.

Figur 11 – Vi fjerner rammen rundt tabell-cellene

https://www.youtube.com/watch?v=1feJgboLUGIhttps://editor.kodegenet.no/?snippet=kalk_brukergrensesnitt

Oppdater HTML koden inn i HTML-feltet Det oppdaterte

resultatet dukker opp i Resultat-området


Det ferdige brukergrensesnittet til

kalkulatoren

20 | KODEGENET.NO

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 iHTML koden

¥ Vi kan legge på en event-listener som blir kalt når knappen blirtrykket på

I løpet av dette kurset skal vi gjøre begge deler. Men ettersom alle tall-knappene har så å si samme funksjon, mens operator-knappene har forskjelligfunksjon for hver knapp, skal vi starte med å legge til en klikk-handler til hvertav <button> elementene i HTML koden.

HTML spesifikasjonen legger opp til at man kan knytte HTML koden tilJavaScript funksjoner direkte. Denne knytningen skjer på hendelser som erknyttet til brukerens handlinger, slik som å trykke på et element, trekkemusepekeren over et element, dra-og-slipp funksjonalitet osv. Vi kommer ikketil å gå gjennom alle disse i dette kurset, men W3Schools har en uttømmendeliste på sine nettsider (http://www.w3schools.com/tags/ref_eventattributes.asp).

Når vi skal knytte klikk-hendelsen til en JavaScript funksjon kan vi benytte ossav onclick attributtet til <button> elementet. Dersom vi starter med 0-knappen kan vi få knappen til å kalle en funksjon nullKlikket() når knappen blirtrykket 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(). Dennefunksjonen 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 å trykkepå Kjør Kode knappen, og se hva som skjer når vi trykker på 0-knappen.


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 iforbindelse 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 å implementerefunksjonen nullKlikket(). I JavaScript finnes det flere måter å definere enfunksjon på, men når vi lager globale funksjoner (funksjoner som er tilgjengeligoveralt i webapplikasjonen vår), lager vi dem ved å starte med orderfunction, etterfulgt av funksjonens navn og parameterliste.


Legg merke til at feilmeldingen dukker opp

i Meldinger-området


22 | KODEGENET.NO

Figur 13 - Oppbyggingen av en JavaScript funksjon

Vi kan dermed opprtte nullKlikket() funksjonen vår ved å skrive følgende iJavaScript-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 inullKlikket() funksjonen. For å få til det må vi gjøre 3 operasjoner inne ifunksjonen:

1. Hente inn display-elementet og lagre den i en ny variabeldisplay

2. Hente ut verdien som allerede står i display elementet3. 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 kanenkelt og greit benytte oss av document.getElementById() funksjonen.Deretter skal vi lagre resultatet (dvs. display elementet) i en variabel somheter display. Når vi lagrer variabler i JavaScript starter vi med ordet var,etterfulgt av navnet på variabelen. Deretter kan vi angi variabelen verdi direkteved å også legge til et =-tegn og verdien variabelen skal ha. I vårt tilfelle kanvi dermed både opprette variabelen og gi den verdi samtidig. Den oppdatertenullKlikket() funksjonen ser dermed slik ut.

function nullKlikket() {var display = document.getElementById('display');

}

function sparUkelonn(sparemaal) {

}

funksjonens navn

parameter-liste

Kode som funksjonen skal kjøre


Her ser vi at vi oppretter variabelen display, og gitt den verdien til displayelementet.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 lagreverdien 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 nyeverdien.

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ørvi trykker på 0-tallet et par ganger for å se at alt fungerer som det skal.

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(). Dennefunksjonen henter inn verdien i display-elementet før den oppdaterer denved å legge til ett null-tall. Da er alt på plass for at vi kan oppdatere koden littfor at de andre tall-knappene også skal fungere som forventet.

https://editor.kodegenet.no/?snippet=kalk_klikk_tall

Vi kan legge til flere 0-tall ved å klikke på 0-knappen

24 | KODEGENET.NO

3.3. Programmere tallverdi til alle tall-knappene

Vi har nå laget en funksjon som heter nullKlikket() som plasserer et ekstra0-tall helt til høyre i displayet. Denne funksjonen fungerer fint så lenge vi kunhar 1 knapp å tenke på. Men om vi skal fortsette på samme måte med enfunksjon 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 tall-knappene samtidig.

• Vi skal endre navn på funksjonen fra nullKlikket() tiltallKlikket()

• Den oppdaterte tallKlikket() funksjonen skal ta mot eninput-parameter slik at vi kan fortelle funksjonen hvilket tall som skallegges 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 inputparameter. Det gjør vi ved å plassere et variabelnavn mellom parentesene tilfunksjonen. 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å detsiste uttrykket inne i funksjonen slik at vi legger til verdien i tall-variabelen istedet for ”0”. Den oppdaterte funksjonen blir dermed slik.

function tallKlikket(tall) {var display = document.getElementById('display');var dispVerdi = display.value;display.value = dispVerdi + tall;

}


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 innhvilket tall som blir klikket av knappen, slik at HTML-koden for knappen nå blirslik:

<button onclick="tallKlikket(0)">0</button>

Da kan vi enkelt og greit oppdatere de andre tall-knappene slik at de allefungerer som vi forventer.

<input id="display" type="text"></input>

<table>

<tr>

<td><button onclick="tallKlikket(7)">7</button></td>



<td><button>*</button></td>

</tr>

<tr>




<td><button>/</button></td>

</tr>

<tr>




<td><button>+</button></td>

</tr>

<tr>


<td></td>

<td><button>=</button></td>

<td><button>-</button></td>

</tr>

</table>

Når vi nå har fått alle tall-knappene til å reagere som vi ønsker, kan vi fortsettemed å implementere regne-operasjonene.

26 | KODEGENET.NO

Figur 15 - Vi kan nå trykke på alle tall-knappene for å legge inn nye tall i displayet

Vi kan nå legge inn flere tall ved å trykke

på tall-knappene


4. Implementere regne-operasjonene

Når vi nå har displayet og funksjonaliteten til tall-knappene på plass, er detpå tide å starte med å implementere funksjonaliteten bak operator-knappene.Vi starter med summering, og fortsetter deretter med de andre regne-operasjonene. Når vi skal lage funksjonaliteten må vi tenke litt annerledes ennvi gjør når vi løser en likning. Vi må nemlig huske å mellomlagre både verdientil displayet og hvilken regne-operasjon vi har trykket på slik at vi kan utføreregne-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 ialle funksjonene til webapplikasjonen, akkurat på samme måte som document,eller window variablene alltid er tilgjengelig. Vanligvis pakkes slikfunksjonalitet 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årvi trykker på pluss-knappen. Vi kaller funksjonen operatorPluss(). Inne ifunksjonen 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. FunksjonenoperatorPluss() starter dermed slik.

28 | KODEGENET.NO

function operatorPluss() {var display = document.getElementById('display');mellomSum = display.value;

}

Men nå har vi et lite problem, ettersom verdien vi leser fra tekstfeltet er entekst, og ikke et tall. Dersom vi nå forsøker å legge til et nytt tall tilmellomSum-variabelen, vil vi ikke summere de to tallene, men heller baresammenslå (konkatinere) de to tekstene (på samme måte som vi gjør når vitrykker på et nytt tall i kalkulatoren). Vi må dermed konvertere teksten vi leserfra display.value til et heltall. Heldigvis finnes det en innebygget funksjonfor dette i JavaScript som heter parseInt(). Vi slipper å gjøre dette i et helteget uttrykk, ettersom vi enkelt og greit kan pakke display.value uttrykketinn 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 valgtOperator-variabelen 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, menfor å vise hvordan man kan sette opp lyttere skal vi benytte oss av jQueryhendelsen click i stedet for. Men før vi kan gjøre det, trenger pluss-knappenen 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 avde andre funksjonene).

$("#plusButton").click(operatorPluss);


Denne koden ser kanskje litt merkelig ut, men det som skjer her er at vi henterut jQuery objektet som representerer HTML-elementet med id likplusButton. I vårt tilfelle er dette pluss-knappen. Deretter registrerer vi enklikk-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 tasterinn noen nummer i displayet og trykker på pluss-knappen.

https://editor.kodegenet.no/?snippet=kalk_klikk_pluss

4.2. Implementere Er Lik knappen

Vi er nå halvveis på vei for å få implementert hele pluss-operasjonen. Når nårvi har mellomlagret verdien som stod i displayet nå vi trykker på pluss-knappenkan 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 heltall2. Sjekke hvilken regneoperasjon som er valgt og utføre den3. Skrive den nye tall-verdien tilbake til displayet

La oss starte på toppen av listen med å hente inn verdien av displayet. Vi hargjort 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 hvilkenregneoperasjon som er valgt. Foreløpig har vi kun implementert summering,men vi skal snart implementere de tre andre funksjonene. Vi starter dermedmed å benytte et if-uttrykk. If-uttrykk i JavaScript består av ordet if, sammenmed en betingelse som alltid er enten sant (true) eller usant (false). Dersombetingelsen er sann, utføres innholdet i if-uttrykket, men dersom betingelsen erusann, hopper JavaScript over innholdet i if-uttrykket.

Strukturen på et if-uttrykk i JavaScript

30 | KODEGENET.NO

Her er vi allerede på vei med innholde av neste steg i erLikKlikket() funksjonen.Som figuren viser, skal vi her sammenlikne verdien til den globalevalgtOperator 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 skalutføre selve kalkulasjonen. Ettersom vi her utfører en addisjon kan vi enkeltsummere verdien av mellomSum-variabelen og dispValue-variabelen.Resultatet kan vi enkelt og greit lagre tilbake i mellomSum-variabelen. Til sluttavslutter 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å vilegge til en id-attributt til er lik knappen, og legge til en jQuery lytter tilJavaScript koden. Id-attributten legges til på samme måte som vi gjorde medpluss-knappen tidligere.

<button id="erLikButton">=</button>

Til slutt kan vi legge på en lytter som kaller erLikKlikket() funksjonen hver ganger lik-knappen klikkes på.

$("#erLikButton").click(erLikKlikket);

https://editor.kodegenet.no/?snippet=kalk_klikk_er_lik

Når vi nå har implementert summering og er-lik, kan vi fortsette med nesteregneoperasjon, minus.


4.3. Implementere minus-knappen

For å implementer minus-knappen er vi allerede godt på vei i programmetvårt. Hittil har vi lagt til følgende:

• Når vi trykker på pluss-knappen lagrer vi verdien som står idisplayet til variabelen mellomSum, før vi setter valgtOperator til ”+”

• Når vi senere trykker på er-lik knappen henter vi ut verdien somnå står i displayet. Deretter sjekker vi om valgtOperator er ”+”, før viregner ut summen av de to variablene mellomSum og valgtOperator.

Som du ser, kan vi enkelt og greit utvide kalkulatoren vår ved å implementerefø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 tilmellomSum-variabelen før den setter valgtOperator lik ”-”.

• Vi må oppdatere erLikKlikket-funksjonen slik at den sjekker omvalgtOperator er lik ”-”. Dersom det er tilfelle, kan vi trekke verdienfra displayet fra mellomSum.

• Til slutt må vi gi minus-knappen en id-attributt (minusButton), slikat vi kan bruke jQuery for å kalle opertorMinus() funksjonen hver gangbrukeren klikker på minus-knappen.

Vi starter med å kopiere operatorPluss() funksjonen, ettersom operatorMinusfunksjonen skal være nesten helt lik. Det eneste vi trenger å endre på er navnettil 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 endrepå dette litt senere slik at vi ikke få så mye duplisert kode, men foreløpig gårdet greit at koden er kopiert.

Det neste vi skulle gjøre var å oppdatere erLikKlikket() funksjonen, Denneoppdaterer vi slik at koden også tar hensyn til hva som skal skje nårvalgtOperator-variabelen har verdien ”-”. Den oppdaterte erLikKlikket()funksjonen ser dermed slik ut.

32 | KODEGENET.NO

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 omvalgtOperator-variabelen inneholder et minus-tegn. Dersom den gjør det,trekker vi displayets verdi fra mellom-summen. Til slutt oppdaterer vi verdiensom står i displayet som tidligere.

Når mangler vi bar en ting for at kalkulatorens minus-knapp skal fungere – vimå kalle operatorMinus() funksjonen hver gang brukeren klikker på minus-knappen. Det gjør vi på toppen av programmet vårt, på samme måte sommed de andre to knappene.

$("#minusButton").click(operatorMinus);

Vi kan nå prøve ut kalkulatorens pluss- og minus-knapper for å se atkalkulatoren beregner verdiene korrekt. Merk at vi foreløpig må trykke på er-lik-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.

https://editor.kodegenet.no/?snippet=kalk_klikk_minus


if ( spart < sparebelop) {

Betingelse

} else {

}

Kode som skal kjøres dersom betingelsen

er sann

Kode som skal kjøres dersom betingelsen

ikke er sann

Sammenlikning

Kjør innholdet i if-blokken

Kjør innholdet i else-blokken

Resten av programmet

truefalse

Teller deklarasjon

for (var uke = 0; spart < sparebelop; uke++) {

}

Betingelse Endring av teller

Kode som skal gjentas inntil

betingelsen er usann

Sammenlikning

Kjør innholdet i while-blokken


truefalse

Teller deklarasjon

Oppdater teller

function sparUkelonn(sparemaal) {

}

navn parameter-liste

Kode som funksjonen skal kjøre

while ( spart < sparebelop) {

}

Betingelse

Kode som skal gjentas inntil

betingelsen er usann

Sammenlikning

Kjør innholdet i while-blokken


true

false

Info-side: Logikk

34 | KODEGENET.NO


Dette mini-heftet går gjennom hvordan vi kan programmere en enkelkalkulator ved hjelp av JavaScript og litt HTML. Heftet går gjennom deviktigste JavaScript konseptene underveis, men er ikke ment til å være enfullstendig guide til JavaScript programmering.

Heftet starter enkelt, og bygger videre på kalkulator-konseptet underveis ikapitlene. 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 å defineremet mer brukervennlig brukergrensesnitt.

• Ett JavaScript basert prosjekt• Enkelt og pedagogisk forklart• Påbyggende eksempler


Legg merke til at feilmeldingen dukker opp

i Meldinger-området


Documents

JavaScript Kalkulator - Kodegenet · JavaScript Kalkulator ... instrukser til prosessoren til høy-nivå språk som Java, C, ... er det dermed ikke mulig å kompilere et slikt program