praktiske eksempler DOM Document Object Model DOM og Høst 2013 Informasjonsteknologi 2 Læreplansmål Gløer Olav Langslet Sandvika VGS

Transkript

1 DOM og praktiske eksempler Gløer Olav Langslet Sandvika VGS Høst 2013 Informasjonsteknologi 2 DOM Document Object Model Læreplansmål Eleven skal kunne programmere med enkle og indekserte variabler eller andre kolleksjoner av variabler programmere med valg og gjentakelser lage egne og bruke egne og andres funksjoner eller metoder med parametere programmere funksjoner eller metoder som blir aktivisert av hendelser I et html-dokument ligger taggene nestet inne i hverandre. Den synlige delen av nettsiden ligger inne i body-taggen, mens meta-informasjon, noen ganger skript og kanskje css ligger gjerne i head. Nå vi programmerer javascript vil vi som oftest oppnå å gjøre noen endringer i elementene på nettsiden. Det kan være at vi vil endre teksten et sted, vi vil fylle en valgliste (select), eller vi vil bytte bilde i en img-tagg. Får å få til dette må vi kjenne til hvordan nettsidene og html-koden er strukturert.

2 sdsd DOM og praktiske eksempler Informasjonsteknologi 2 finne elementer Hvordan finner vi elementer på nettsiden? Da vi jobbet med css, så vi at vi kunne styre utseendet på elementer på nettsiden. Vi brukte såkalte css-selektorer for å fange de elementene vi skulle pynte på. Husker dere css? Her har vi en meget enkel nettside med 3 overskrifter. Med css kan vi nå styre hvordan alle overskriftene skal se ut: Vi sier at alle overskrifter av type h1 skal ha grå bakgrunnsfarge. Kan vi finne alle h1 med JavaScript? Ja. Og det er ganske enkelt: Denne vil gi dere en liste med alle overskriftene på siden som er av typen h1. I css kan vi finne elementer med id ved å skrive for eksempel #menu for å finne et element med id= menu. Vi kan finne alle elementer som har class= news ved å skrive.news Altså med et punktum foran klassenavnet. Vi skal nå se hvordan vi kan finne forskjellige typer elementer på siden med JavaScript. 2

3 DOM og praktiske eksempler Informasjonsteknologi 2 Finn element med id Dette har vi gjort før, men litt repetisjon er aldri dumt. Vi finner en div med id= fargeboks, og så endrer vi farge på den. Først html: En dash css (legg dette inne i head): Og så til slutt litt JavaScript Vi bruker window.onload for å gjøre det korrekt. Hva skjedde? Det er egentlig ikke så mystisk. Med JavaScript kan vi endre stilinformasjon for siden vår. Vi fanger opp fargeboks med document.getelementbyid, og så sier vi at den skal få en ny bakgrunnsfarge. 3

4 sdsd DOM og praktiske eksempler Informasjonsteknologi 2 document.getelementsbytagname Finner alle tagger av en bestemt type La oss si vi ønsker å gjøre noe med alle overskriftene som er av typen h1: Det høres vrient ut, men er det ikke egentlig. Vi kan bruke document.getelementsbytagname. Legg merke til at det står elements med s, og ikke element. Når vi skal finne et element med en bestemt id, skal dette elementet være unikt på nettsiden. Men det kan være mange p-tagger, img-tagger osv. på en nettside, derav flertallsformen. Vi prøver med denne: Legg merke til at vi får en liste med alle overskriftene. Da må vi gå gjennom listen med for eksempel en for-løkke som vi lærte sist. overskrifter.length er antall overskrifter som er på siden. 4

5 DOM og praktiske eksempler Informasjonsteknologi 2 Et lite eksempel sett farge på bakgrunnen Før vi går videre, skal vi se på et lite eksempel hvor vi endrer bakgrunnsfargen på nettsiden vår. Først html: Vi bruker en slider Husk på at denne ikke er implementert i alle nettlesere. Chrome og Safari virker bra. Slideren er et input element med type= range. Firefox vil vise det som tekst-input. Vi kan fange opp verdien til slideren Legg merke til at vi satt max= 255 og min= 0. Det betyr at det er største og minste verdi vi kan velge. 5

6 sdsd DOM og praktiske eksempler Informasjonsteknologi 2 La oss se om vi klarer å hente ut verdiene med JavaScript: Først deklarerer vi en variabel for hver av sliderne, så vi kan få tak i dem. Deretter sier vi at når de endrer verdi, skal de starte en funksjon som heter settfarge. La oss først sjekke om vi får inn noen tall: Setter farge på body Tanken er nå at vi kan sette en bakgrunnsfarge på body basert på verdiene vi får inn fra sliderne. Det vi må huske på er at vi skriver inn verdier fra 10-tallsystemet, altså et tall fra 0 til 255. Når vi angir farge i css bruker vi som regel heksadesimale tall som er 16-tallsystemet. Så vi må regne om først før vi prøver å endre fargen. Følg med på neste side for den spennende fortsettelsen. 6

7 DOM og praktiske eksempler Informasjonsteknologi 2 Vi setter farge på nettsiden vår. Da er vi i gang. settfarge-funksjonen blir nå slik: Hvorfor skriver vi Number (red.value)? Den observante leser legger kanskje merke til at vi skriver Number (red.value) når vi skal finne verdien fra Slideren. Grunnen til at vi gjør det er at vi må forsikre oss om at r er et tall og ikke en tekst. Hvis vi for eksempel skriver Number ( 22 ) får vi tallet 22. Vi kan også gjøre om tall til tekst ved å skrive String(333); Da får vi 333 som tekst. 7

8 sdsd DOM og praktiske eksempler Informasjonsteknologi 2 Et litt enklere eksempel La oss lage en valgliste (select), og se om vi kan bruke den til å gjøre noe fornuftig. Først skal vi se om vi kan få den til å vise et bilde basert på valget som blir gjort. Vi skriver litt html: En select-liste med 3 valg. Vi setter også inn et bilde. Siden Audi er først i listen, vil det se ut som om den er valgt. Derfor viser vi Audi-bildet. I JavaScript kan vi finne ut hvilken indeks valget som er gjort i select har. I dette tilfellet har audi indeks = 0, fiat = 1 og volvo = 2. Det ligner litt på måten vi finner elementer i et array på. For å finne valgt element, må vi skrive noe sånn som: var indeks = listen.selectedindex; var valg = listen.options[indeks].value; 8

9 DOM og praktiske eksempler Informasjonsteknologi 2 Dette var et greit eksempel. Hva om vi også skal velge modell på bilen, og at det skal dukke opp valg for dette i en annen select-liste, basert på valget i den første. Da må vi først lære oss å lage html-elementer med JavaScript. 9

10 sdsd DOM og praktiske eksempler Informasjonsteknologi 2 Lag html med JavaScript Det går fint an å lage html-elementer med JavaScript. Hvis vi skulle ønske det, kan vi bygge hele domen selv. Vi starter med et lite eksempel som lager en overskrift. Først har vi en helt tom nettside. Hvis vi skal legge til en overskrift, skal jo denne legge seg inne i body. Og det er akkurat det vi forsøker å gjøre. document.createelement kan lage alle typer elementer til nettsiden. document.createtextnode lager tekst som kan ligge inne i overskriften. Til slutt må vi legge inn overskriften i body i dokumentet, og vi må legge inn teksten inn i overskriften. Dette er ganske utrolig! 10

11 DOM og praktiske eksempler Informasjonsteknologi 2 handleliste revisited Vi har i en tidligere leksjon laget oss en liten handleliste ved å utvide en liste ved å lage nye listeelementer med innrhtml. Hvis vi skal gjøre det mer korrekt, bør vi lage nye DOM-elementer som vist i eksempelet under: I body (html): I head (javascript): 11

12 sdsd DOM og praktiske eksempler Informasjonsteknologi 2 Løsningen på et klassisk problem Har det hendt deg at du har laget en layout med html og css som ser slik ut? Problemet er at elementet med dagens rett ikke strekker seg i høyden når elementet med nyhetene blir høyere. Vi ønsker å få bakgrunnen til å følge med helt ned. Dette er en sak for JavaScript-doktoren. Trikset er at vi kan fange opp hvor høye elementene er, og så si at de begge skal være like høye som den høyeste. Følg med: Vi fanger opp de to elementene som ligger ved siden av hverandre, og finner ut hvor høye de er. Deretter finner vi ut hvilken som er høyest, og til slutt setter vi høyden på begge elementene lik den høyeste av dem. Eksempel: assiker.html 12

13 DOM og praktiske eksempler Informasjonsteknologi 2 vi lager en drop down-liste med JavaScript Noen ganger må vi lage innhold dynamisk. HTML er statisk, og det går ikke an med bare HTML å skape dynamisk innhold. La oss se hvordan vi kan lage en select-liste og fylle den med valg ved å bruke JavaScript. Drop down-liste Vi lager dette fra bunnen av, så vi starter et tomt html-dokument, og legge inn skriptet i head. Først lager vi select-listen og gir den en id: Så lager vi valgene. I html skal det bli for eksempel : <option value= audi > Teksten som vises i lista ligger slik: <option value= audi >Audi</option>. Til det bruker vi en tekstnode: For å legge noe inne i et element, bruker vi appendchild: 13

14 sdsd DOM og praktiske eksempler Informasjonsteknologi 2 vi lager en drop down-liste med JavaScript Da er vi snart i mål. Til slutt bruker vi appendchild til å legge alle valgene (options) inn i select-listen, og til slutt legger vi lista inn i body med appendchild. Da blir det omtrent slik. Nettsiden til venstre, og JavaScript-generert html til høyre. Det hadde selvfølgelig vært mye raskere å skrive html direkte, men det er ikke alltid vi vet eksakt hva som skal inn i lista. Kanskje kommer det fra en database, eller noen ganger er det basert på valg som er gjort andre steder på siden. La oss illustrere det siste med et eksempel. 14

15 DOM og praktiske eksempler Informasjonsteknologi 2 vi lager en drop down-liste med JavaScript Ok vi prøver enda en runde. Denne gangen skriver vi html for den første listen, så prøver vi å fylle den andre dynamisk. Vi ser at listen over modeller er tom før vi har valgt noe. La oss forsøke å fylle den med riktige modeller for valgt bilmerke. bilmerke og modeller er de 2 listene. Vi oppretter et array for hver av bilmerkenes modeller. Til slutt sier vi at når vi velger et bilmerke, skal vi vise modellene for dette bilmerket. Det gjør vi i funksjonen vismodeller. 15

16 sdsd DOM og praktiske eksempler Informasjonsteknologi 2 vi lager en drop down-liste med JavaScript Funksjonen vismodeller Hva gjør funksjonen? Først nuller vi ut listen, så ikke det legger seg under de andre når vi velger et nytt bilmerke. bilmerke.options er valgene i bilmerke. bilmerke.selectedindex er nummeret på den som er valgt. Det er 0 for Fiat, 1 for Audi, og 2 for BMW. Oppretter en variable liste som vi bytter modeller i avhengig av valgt bil. Deretter går vi gjennom alle modellene, og legger til en ny option for hver av dem. Dette legger vi i Select-listen som heter modeller. 16

17 DOM og praktiske eksempler Informasjonsteknologi 2 oppgaver Oppgaver til denne leksjonen 1. Se om du klarer å lage en liten html-tabell med JavaScript. Den kan for eksempel se slik ut: 2. Se om du klarer å lage et lite system som legger til nye superhelter og fiender i tabellen: 3. Lag et array med noen fargekoder på hex-form (#ff0000). Lag deg en div som har en eller annen farge. Legg inn en knapp som, hvis du klikker på den, endrer farge på boksen. Første klikk skal gi den første fargen i arrayet, neste klikk skal gi den neste fargen. Når det ikke er flere farger igjen, gir du boksen den første fargen i arrayet. 17

18 sdsd DOM og praktiske eksempler Informasjonsteknologi 2 oppgaver Oppgaver til denne leksjonen 4. Klarer du å lage et sjakkbrett bare med JavaScript? (body skal være fullstendig tom) Jeg lagde denne med en dobbel for-løkke og en haug av div-elementer. 5. Klarer du å sette på brikker? Du kan bruke spesialtegn for å sette på brikker. Se eget dokument for nærmere beskrivelse av denne oppgaven. 18

19 DOM og praktiske eksempler Informasjonsteknologi 2 oppgaver 6. Jobb videre med Tetris-spillet vi startet på i timen. 19