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. 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. 2
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: 10 Dette eksempelet finner du her: http://langslet.com/vgs/kode/leksjon_5/firkant2trinnvis.html
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. I linje 21 lager vi en knapp (button) 2. I linje 22 setter vi id til knappen til det samme som filmens id 3. I linje 23 setter vi tekst på knappen 4. I linje 25 legger vi den inn i film-diven vår. 12
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