1. No category

Alt er
objekter
Gløer Olav Langslet
Sandvika VGS
Høst - 2012
Informasjonsteknologi 2
Alt er objekter
Se for deg en bil. Den har noe som er felles for
alle biler. Den har hjul, ratt, og en motor.
Læreplansmål
Eleven skal kunne
gjøre rede for hensikten med
objektorientert utvikling og
begrepene klasse, objekt og arv.
Hvis vi skulle lage et register over biler vil det
være flott om vi på et vis kan lagre all
informasjonen om bilen på en strukturert måte.
Vi må ha noe som knytter all informasjonen
sammen. Til det kan vi bruke objektorientert
programmering.
Det vi gjør når vi jobber med objekter, er at vi
definerer hvordan objektene skal se ut i noe vi
kaller en klasse. Vi sier at for å lage en bil må vi
vite hvor kraftig motor den skal ha, om den går
på diesel eller bensin og kanskje hvilken farge
den har.
sdsd
Alt er objekter
Informasjonsteknologi 2
alt er
objekter
string, number og array er alle objekter
En string har også noen bestemte egenskaper. Dette er
primært den teksten den inneholder. Når vi lager oss en
tekst, sier vi at vi lager objekt av klassen String.
Hvordan kan vi finne ut hva slags objekt vi har?
Det er vel som oftest innlysende, men i noen tilfeller
kan det være nyttig å la programmet finne det ut:
Klasser og objekter
Vi får string og number. typeof gir oss datatypen til
objektet.
Så hver gang vi lager oss en variabel, lager vi oss i
prinsippet et objekt av en eller annen type.
I dag skal vi se på hvordan vi kan lage våre egne
objekter, og hvilken nytte vi kan ha av det.
2
Det er vel egentlig ikke
noen ekte klasser i
JavaScript som det er i
Java, C++ og andre rene
objektorienterte språk.
I stedet for klasser bruker
vi funksjoner, og det
fungerer omtrent på
samme måte.
Alt er objekter
Informasjonsteknologi 2
Vi lager en superhelt!
Da vi lagde partikkelsystemet, samlet vi en del informasjon i et objekt som vi kalte
”blob”. Vi kan gjøre det samme med en superhelt:
Legg merke til at vi bruker komma for å skille egenskapene i objektet. Nå kan vi få tak
i navn, alias og fiende ved å bruke dot-syntaks:
Sånn kan vi lage mange superhelter. Vi kan også legge inn funksjoner i objektet:
Der fikk vi Supermann til å skryte litt av seg selv. Vi ser at dette er en enkel måte å
samle informasjon om en bestemt ting. Men hva om vi skal lage mange superhelter. Vi
ønsker ikke å gjenta oss selv, og vi ønsker å ha en modell for hvordan superhelten skal
bygges opp.
3
sdsd
Alt er objekter
Informasjonsteknologi 2
Vi lager en modell for superheltene våre
En superhelt har et sett med egenskaper. La oss sette opp dette i en funksjon. Denne
modellen kalles en klasse i andre objektorienterte språk.
Dette er på et vis et skall som sier noe om hva vi vil vite om superhelten. Dere lurer
kanskje på hva this betyr? Funksjonen får inn parametere, som er navn, fiende og
alias. Når vi lager en ny superhelt, sier vi da at det er dette navnet som kommer inn
som parameter som skal være denne superheltens navn osv. Følg med:
Vi lager nå supermann som en ny Superhelt. Det er en god vane å skrive slike
funksjoner med stor forbokstav. Da skiller vi dem fra andre funksjoner. I Java og
andre objektorienterte språk skriver vi klasser med store forbokstaver. Så hva skjer?
Vi sender inn ”Clark Kent” i den nye superhelten, og sier at denne superhelten skal
hete Clark Kent: this.alias = ”Clark Kent”. Dermed kan vi lage nye superhelter ut fra
modellen vår:
Vi har samlet all informasjonen om superheltene våre i en klump som vi kaller et
objekt. Et lite superhelt-objekt!
4
Alt er objekter
Informasjonsteknologi 2
Superhelter som skryter av seg selv
Superhelter er som regel ikke skrythalser. De redder mennesker og kloder uten engang
å ta seg betalt for sine tjenester. Allikevel tenkte jeg vi kunne la våre superhelter få
skryte litt av seg selv. Da må vi knytte en funksjon til objektet.
Begge to hevder de er best. Men vi vet ikke hvem det er som skryter. La oss i det
minste få vite det:
Da endrer vi funksjonen så den bruker superheltens eget navn:
Vi ser nå at hver superhelt nevner sitt
eget navn i skrytefunksjonen. Dette får
vi til ved å si this.navn.
5
sdsd
Alt er objekter
Informasjonsteknologi 2
Et mønster for våre objekter
Når vi lager objekter er det lurt å følge noen retningslinjer. Det er mange måter å lage
objekter på, men vi skal heretter følge et bestemt mønster.
Vi ser at når vi skriver funksjoner inne i funksjonen, kan det fort bli uoversiktlig. Da vi
lagde partikkelsystemet og andre litt større prosjekter, har vi splittet koden opp i flere
funksjoner. En for hver oppgave. Det samme kan vi gjøre med objektene våre. Vi
initialiserer objektet i hovedfunksjonen, og knytter nye funksjoner til objektet:
Her har jeg trukket skrytefunksjonen ut av konstruktøren (det er ofte det vi kaller den
funksjonen som definerer objektet), og i stedet laget en ny funksjon som gjør den
samme jobben.
Noe visvas om prototype kommer her.
La oss lage et lite eksempel som tar i bruk objekter.
6
Alt er objekter
Informasjonsteknologi 2
Et objekt for firkanter
La oss forsøke å lage et objekt som tar vare på litt informasjon om en firkant.
Startposisjon, lengde og bredde kan duge i første omgang.
Vi tar vare på det vi trenger i første omgang. Det som hadde vært kjekt, var hvis
firkanten kunne tegne seg opp på egenhånd. La oss prøve det ved å knytte en funksjon
til firkanten:
Da holder det å lage en ny firkant, og deretter kalle lagFirkant-funksjonen. Husk på at
du må ha et canvas-element med id=”canvas” i body i html-koden.
Dette eksempelet kan du se her: http://langslet.com/vgs/kode/leksjon_5/Firkant.html
7
sdsd
Alt er objekter
Informasjonsteknologi 2
Kan vi lage flere firkanter?
Jepp. Det er litt av vitsen med objektene, at vi skal kunne gjenbruke en struktur og
forenkle kodingen vår. La oss se hva som skjer hvir vi lager 2 firkanter:
I onload-funksjonen oppretter vi nå 2 firkanter (f1 og f2). Deretter kan vi be dem om å
lage firkanten ved å kalle funksjonen lagFirkant. La oss lage mange firkanter som
utgjør et mønster:
Endrer først litt i lagFirkant-funksjonen (legger til stroke):
Deretter prøver vi å lage et mønster. Dette samler vi også i en egen funksjon. Så først
fjerner vi de nye firkantene vi har laget i onload-funksjonen:
Vi erstatter det med et kall til funksjonen lagFirkanter. Bla om for den spennende
fortsettelsen.
Dette eksempelet kan du se her: http://langslet.com/vgs/kode/leksjon_5/Firkant.html
8
Alt er objekter
Informasjonsteknologi 2
Vi lager mange firkanter
La oss lage en stor firkant med mange firkanter oppå seg som blir mindre og mindre,
så det til slutt ser ut som en pyramide.
Først sier vi at den største fikranten skal være 500 bred og høy. Startposisjon er (50,
50), og vi skal lage 40 firkanter.
Deretter går vi i en løkke fra 0 til 49. Hver gang minsker vi firkanten ved å si at storst
skal bli 10 mindre. Vi øker også startpunktet med 10 både for x og y.
Dette eksempelet kan du se her: http://langslet.com/vgs/kode/leksjon_5/Firkant.html
9
sdsd
Alt er objekter
Informasjonsteknologi 2
Lag for lag – firkant for firkant
Vi kan endre litt på koden, så vi tegner opp en og en firkant. Da bruker vi den gode
gamle setInterval. Først deklarerer vi noen variabler, og deretter skriver vi litt om på
funksjonen vår. Jeg kaller den nå lagFirkanter.
Funksjonen reduserer storst, som er bredden og høyden, og flytter startpunktet ned og
til høyre.
Når det ikke er flere firkanter igjen å tegne, stopper vi det med clearInterval.
Det hele settes i gang i load-funksjonen:
Dette eksempelet finner du her:
http://langslet.com/vgs/kode/leksjon_5/Firkant2Trinnvis.html
10
Alt er objekter
Informasjonsteknologi 2
Vi lager et utgangspunkt for en Film-butikk på nett
Hvis vi skal lage en butikk på nett, må vi ganske snart pønske ut en metode for å lage
en ”handlekurv”. Vi starter her i det små, og ser om vi kan bruke et Film-objekt med
tittelen til filmen og ikke minst en id som er unik for hver film i butikken vår.
La oss først definere Film-objektet.
Husk på at vi kan bygge ut Film-objektet senere, ved å legge til pris, beskrivelse,
cover-bilde og lignende. Det vi ønsker å oppnå til slutt er noe lignende eksempelet fra
Platekompaniet med Dracula. Men vi starter litt enklere.
Vi trenger en funksjon som på et vis gir oss et html-element som vi kan legge ut på
siden vår og som viser tittelen på filmen og en knapp for å kjøpe den.
Det kan vi oppnå ved å lage et div-element som skal inneholde info om
filmen og en kjøpe-knapp.
11
sdsd
Alt er objekter
Informasjonsteknologi 2
Bygger ut funksjonen og lager en div
I en tidligere leksjon om DOM, så vi at vi dynamisk kan opprette DOM-elementer som
vi kan legge inn på nettsiden vår. Det er det samme trikset vi skal benytte oss av her:
Vi oppretter en div med JavaScript. Da gjenstår det bare å fylle den med en overskrift
for tittelen, og en knapp for å legge den i handlekurven.
Først legger vi til en overskrift:
I linje 19 sier vi at innmaten i overskriften skal være filmens tittel. Funksjonen er
knyttet til den enkelte film, og this.tittel vil gi oss tittelene til nettopp denne filmen.
Følg med, så skal dere få se hvordan det virker. Her kommer knappen:
1.
2.
3.
4.
12
I linje 21 lager vi en knapp (button)
I linje 22 setter vi id til knappen til det samme som filmens id
I linje 23 setter vi tekst på knappen
I linje 25 legger vi den inn i film-diven vår.
Alt er objekter
Informasjonsteknologi 2
Hva skjer når vi klikker på knappen?
Ingenting som det ser ut nå, men vi kan legge til en onclick-event som skal legge
filmen i handlekurven vår.
Hele funksjonen ser til slutt ut som dette:
1. I linje 24 sier vi at når vi klikker på knappen, skal vi starte en funksjon som
heter addToBasket. Den må vi lage før dette kan virke.
2. I linje 28 returnerer vi hele filmDiven. Det betyr at vi kan kjøre funksjonen og få
en div med en overskrift og en knapp. Denne diven kan vi da legge inn på
nettsiden vår.
Men først lager vi addToBasket-funksjonen. I første omgang gjør vi den enklest mulig,
og ser om vi får ut knappens id. Den vil være bindeleddet som kan fortelle oss hvilken
film vi har kjøpt.
Alt vi gjør er å lage et varsel som viser knappens id. Det er viktig nå at vi ser
forskjellen på bruken av this.id her og inne i funksjonen. I funksjonen er this.id den id
som vi ga filmen i objektet. Nå er this.id id til html-elementet button. En funksjon som
blir startet av en hendelse (et klikk i dette tilfellet), vil alltid ha en referanse til det
som ble klikket på for å sette i gang funksjonen. Så det vi ser nå er knappens id, som
den står i html-koden: <button id=”001”>
13
sdsd
Alt er objekter
Informasjonsteknologi 2
Da må vi lage oss en film og se om vi får det hele til å virke
Når siden lastes, skal vi dynamisk bygge opp en oversikt over filmene våre. Vi starter
med en film, og ser hva som skjer:
Rett over </script> legger vi inn denne koden. For ordens skyld starter vi funksjonen
lagFilmer i det nettsiden vår er ferdig lastet ned.
lagFilmer lager nå kun en film, med id=”001” og tittel=”Gudfaren”. Nå kan vi endelig
få noe ut på siden vår:
Når du kommer til nettsiden og klikker på Kjøp, skal du nå få følgende melding:
14
Alt er objekter
Informasjonsteknologi 2
La oss legge til noen flere filmer:
I funksjonen lagFilmer legger vi nå til 2 nye filmer:
Vi ser fort at dette blir litt tungvint. I den virkelige verden ville vi fått inn informasjon
på et eller annet vis, sannsynligvis fra en database. Da kunne vi bygd elementene fra
dataene i databasen.
Vi legger filmene i et array
Vi nøyer oss med å legge filmene våre i et array. Da kan vi forenkle koden, og vi kan
også spore opp filmene som vi legger i handlekurven. Så vi skriver om koden litt. Først
må vi deklarere et array globalt. Dette legger vi inn helt i starten av skriptet.
Nå lager vi filmene og putter dem inn i arrayet filmer:
Her oppretter vi filmene og starter en ny funksjon for å vise dem
frem. Da fordeler vi litt ansvar mellom funksjonene våre.
15
sdsd
Alt er objekter
Informasjonsteknologi 2
Viser frem filmene
Det er lurt å splitte opp koden i flere funksjoner som gjør minst mulig hver. Det blir
enklere å finne feil, og det skal gjøre koden deres enklere å lese og letter og
vedlikeholde. Det blir også enklere å teste koden og se om den gjør det den skal.
Funksjon for å vise frem filmene
Vi går gjennom alle filmene med en for-løkke. Husk at vi kan hente ut elementer fra
arrayet med for eksempel filmer[1]. Det vil gi oss film nummer 2 i listen, siden
filmer[0] er den første. filmer[1] vil gi oss Robocop.
I hver runde av løkken gir vi filmen et variabelnavn, ”film”, men dette er nå selve
filmobjektet, siden det er det vi la inn i arrayet.
Til slutt lar vi filmen opprette en ny div som vi legger inn i body på nettsiden vår.
Normalt sett ville vi nok ha plassert den inn i et annet element på nettsiden vår.
Kanskje en liste eller en div med en egen id. Da kunne vi for eksempel ha skrevet:
var filmDiv = film.createFilm();
var filmContainer = document.getElementById(”filmContainer”);
filmContainer.appendChild (filmDiv);
Vi registrerer også at uten css ser det svært trist ut.
16
Alt er objekter
Informasjonsteknologi 2
Vi lager en handlekurv
Ok. Da er det på tide å lage selve handlekurven. Vi har gjort grunnarbeidet med å lage
filmene, vi har lagt dem i et array, og vi har gitt en id til knappen som tilsvarer iden til
filmene. Når vi klikker på knappen, gjenstår det nå å få tak i filmen og vise
informasjon om den i handlekurven.
Vi endrer litt på visFilmer og lager en handlekurv
La oss først dele siden vår i 2. En del som vi kan kalle main, og en del som heter
handlekurv. HTML-kode med litt css.
Det ser ille ut, og vi får heller ikke filmene våre inn i main. Det kan vi enkelt løse:
Vi endrer de 2 nederste linjene, så vi legger filmene inn i main, og ikke rett i body. Da
gjenstår det å ”overføre” filmene til handlekurven når vi klikker på knappen.
17
sdsd
Alt er objekter
Informasjonsteknologi 2
addToBasket
En måte å finne riktig film på, er å gå gjennom alle filmene, og sjekke om de har
samme id som knappen som er klikket på. Det er nok ikke anbefalt å gjøre det slik i
virkeligheten, men det burde duge for vårt eksempel. Så vi prøver oss:
Først deklarerer vi handlekurv som et array i toppen av skriptet, og definener også en
referanse til diven med id = ”handlekurv”.
Funksjonen vår kan nå skrives omtrent slik:
18
Alt er objekter
Informasjonsteknologi 2
visHandlekurv
Her kan vi gå gjennom arrayet handlekurv, og vise en og en tittel på filmene våre.
Hver gang vi klikker ”kjøp” legger vi en ny film i handlekurven, og vi kan nå vise dem
frem. Det er viktig at vi først nuller ut handlekurven, siden vi hele tiden viser frem
hele. Vi kunne ha lagt til bare det siste elementet i arrayet. Prøv gjerne om du får til
det.
Og da er handlekurven ferdig. Det ser grusomt ut, men det virker, og det var det
viktigste nå. Vi burde selvfølgelig utvide, så vi får inn et bilde av coveret, pris på
filmen, kanskje om det er dvd eller bluray, muligens en beskrivelse av filmen.
Dette er imidlertid ikke så vanskelig å legge til når
vi først er i gang. All informasjonen om film-objektet
tar vi med oss, siden vi legger selve filmen i
handlekurv-arrayet.
Vi merker oss også at handlekurven blir tømt hver
gang vi oppdaterer siden, og det er ikke bra. Dette
kan vi løse ved å bruke noe som heter local storage,
som vi skal se på i en senere leksjon.
Dette eksempelet finner du her:
http://langslet.com/vgs/kode/leksjon_5/Filmbutikk.html
19
sdsd
Alt er objekter
Informasjonsteknologi 2
Vi lager en bil!
La oss gå tilbake til eksempelet vårt, og forsøke å lage en bil. I sin enkleste form ser
det slik ut:
Ok. Spennende? Ikke særlig. Men hva om vi legger til noen egenskaper til bilen?
Det ble jo litt bedre, men vi kan bare lage Peugeot 508. Det vil ikke tyskerne like. Og
hva i all verden er this? Når vi skriver this, mener vi at det er nettopp denne bilens
merke som skal være ”Peugeot”. ”Mitt merke er Peugeot” er en annen måte å se det på.
Hvis vi vil lage en annen type bil, må vi ta det inn som en parameter:
Og vips, så kan vi lage alle typer biler.
Dot-notasjon
Vi kan også få tak i hva slags merke det er ved å bruke dot-notasjon:
20
Alt er objekter
Informasjonsteknologi 2
Hva kan bilen gjøre
Inntil nå kan ikke bilen gjøre noe som helst. Den får merke og modell, men ikke noe
mer. La oss gi den noe å gjøre.
Hva om vi knytter et lite bilde til bilen? Da kan vi kanskje vise det frem sammen med
litt info:
Vi lagrer et bilde av en bil i samme mappe som html-siden vår – Kaller det for
”508.jpg”. Koden for å få inn bilen blir som følger:
Vi må nå finne en måte å vise frem bilen på. La oss strukturere koden litt, og legge den
inn i head. Først lager vi oss en liten div hvor vi kan legge info om bilen:
21
sdsd
Alt er objekter
Informasjonsteknologi 2
Bilen
Legger en skriptblokk inn i head:
Hva skjedde nå? Først deklarerer vi to variabler. En for bilen og en for diven hvor vi
skal legge informasjonen. Deretter oppretter vi bilen, og knytter en funksjon til den
som heter visInfo.
I visInfo lager vi en overskrift og legger inn bilens merke og modell. Til slutt kan vi
også legge inn bildet:
22
Alt er objekter
Informasjonsteknologi 2
Hva om vi har lyst til å vise flere biler? Det kan vi nå enkelt løse på følgende måte
ved å skrive om litt i toppen:
Men nå viser den bare Peugeoten 2 ganger. Det er fordi vi skrev peugeot.modell,
peugeot.merke og peugeot.bilde i visInfo. La oss heller bruke this. Siden funksjonen
er knyttet til Bil-objektet, kan vi si at det er denne bilens merke og modell som skal
vises frem:
23
sdsd
Alt er objekter
Informasjonsteknologi 2
oppgaver
Oppgaver til denne leksjonen
1. Gjør ferdig handlekurven. Legg til bilde, pris osv. Forsøk med css å få det til å se
litt mer ut som for eksempel Platekompaniets nettsider.
2. Lag deg en liten kontaktliste, hvor du bruker objekter for personene i
kontaklisten.
3. Hvis du er i støtet, kan du se litt på localstorage, som gjør at kontaktene dine,
eller evt. filmene i filmbutikken.
4. En liten nøtt på tampen, eller som kos i høstferien: Se om du klarer å lage en
trekant med JavaScript og Canvas.elementet.
Du kan anta at du har gitt vinklene, for eksempel 90, 30 og 60, og kanskje
lengden på hypotenusen.
Forsøk så å utvide slik at du også tegner opp firkantene som vist i figuren.
Hvis du virkelig kjeder deg i høstferien, kan du også legge på 2 slidere som
endrer henholdsvis bredden og høyden på trekanten. Da må også firkantene
oppdatere seg i forhold til trekantens proporsjoner.
Hvis det regner hele uken, kan du for moro skyld også regne ut arealet og vise
vinkelenei trekanten. Bruk kanskje et lite objekt for vinklene, et for lengdene, og
kanskje et bitte lite objekt for startposisjonene. Spør mattelæreren din hvis du
lurer på trigonometrien som ligger bak.
24
Alt er objekter
Informasjonsteknologi 2
oppgaver
Eksempel på et ferdig resultat på oppgave 4:
Her har jeg brukt <input type=”range”> for sliderene. Dette virker i Chrome og Opera.
jQuerys Slider vil fungere i alle nettlesere.
Jeg har også, på bakgrunn av kritikk mot mine tidligere fargevalg, brukt Kuler for å
finne de flotte fargenyansene som dere er vitne til i illustrasjonen.
25