Leksjon 3

1. Leksjon 3 Noen få ord om DHTML Event handlers i Javasript. DOM Danne grupper… (labøvelser)

2. Javascript • Fortsetter med objekter i JavaScript… • Objektene er en del av språket og tilhører ikke DOM.

3. Objekter • Forhånds definerte klasser i ECMA script: • Array • Boolean • Date • Function • Math • Number • RegExp • String

4. Objekter • Math klassen • Math klassens metoder er definert statiske og av den grunn behøver vi ikke å opprette instanser av Math klassen. • Math objektet har en rekke funksjoner som støtter avanserte matematiske operasjoner. • Eks: • Math.cos(x) Cosinus • Math.log() Logaritme • Math.random() Plukker ut tilfeldige tall mellom 0 – 1. • Math.sqrt(x) Roten av et tall • pi.htm • MathRandom.html

5. Objekter • Date klassen • Oprettter et nytt objekt for å kunne jobbe med Date: • dagens = new Date(); • Konstruktøren setter automatisk gjeldende tid uten argumenter. • ”dagens” inneholder altså dagens dato. • Derfra kan man hente/sette den informasjonen man ønksker via innebygde funksjoner i Date klassen. • Se eksempel date.htmdate2.htm

6. Objekter • String klassen • Har metoder for å jobbe med strenger av tegn. • tekst = new String(”Hei hå”); • Eller: • tekst = new String(); • tekst = ”Hei hå”;

7. Objekter • String klassen • Nyttige funksjoner… • charAt(x) returnerer en bokstav ved en gitt posisjon • indexOf(”kaffe”) returnerer posisjonen på et ord i en streng. Returnerer posisjonen på det første tegnet i ordet. • lastIndexOf(”kaffe”) starter søket fra slutten av strengen • substring(2,8) returnerer en del av en streng hvor parameterne indikerer start og slutt posisjon. • split(”,”) deler en streng i flere delstrenger, her ved hvert kommategn. Resultatet kommer ut i en tabell.

8. Tabeller • Array klassen • Definere tabeller: • Var x = new Array(); • Var x = new Array(”Opel”,”Toyota”,”VW”,3); • Var x = new Array(13); • Var x = [”Opel”,”Toyota”,”VW”,3]; • array1.htm • array2initiere.htm • array3dynamisk.htm • array4datatyper.htm • array5assosiativ.htm • array6join.htm • array7reversering.htm • array8sortering.htm • array9sortnumbers.htm

9. Events Hendelser og lyttere

10. Event handlers • Reaksjon på brukerens handlinger går via event handlers. • Event handler , spesifiserer hvilken javascript kode som skal kjøres. • Det kan være en enkel setning. • Eller en funsjon som kalles når brukeren har utført en handling som en event handler trigges av. • Event1.htm

11. Events • Events i en nettleser. • Defineres: • Som regel i en HTML tag. • Men kan også definers innenfor <script> taggen. • De fleste events korresponderer med et html element som en bruker kan se og manipulere. En knapp eller en sjekk boks f.eks. • Følgene er en liste av slike.

12. Events – liste. • Events.doc • onfocus - onblur (fokus; skjema) • onchange – onselect (forandring; skjema) • onload – onunload (Window) • onmouseover – onmouseout (mus)

13. Events - lyttere • Returverdier • Før man sender innholdet i et skjema over internett, bør innholdet valideres. • Når innholdet er validert må funksjonen returnere enten true eller false. • Returnerer funksjonen false vil ikke innholdet bli sendt. • onsubmit.html • reset.html

14. Object Modellen i nettleseren • Med DHTML har en mulighet til å få tilgang til nesten alle elementer som finnes på en side. • En nettleser er bygd rundt et strukturert sett med objekter. • Objektene utgjør et grensesnitt mellom html og nettleseren.

16. Objekt modellen • Objekt Modellen er et grensesnitt mellom DHTML kildekode på siden og nettleser rutinene som rendrer siden (Nettleser rutinene er skult). • DHTML definerer hva resultatet blir. • O.M er en del av nettleseren

17. DHTML • DHTML er ikke en W3C standard! • Dynamisk html er en samling av teknologier som kan manipulere visning og posisjonering av html elementer i en nettleser. • Følgende teknologier er aktuelle: • HTML 4.01 • DOM • CSS • JavaScript

18. Objekt modellen HTML kilde kode og script Nettleserens ”Svarte boks” Objekt modellen, bestående Av objektene, attributtene, metodene Og hendelsene til nettleseren.

19. Nettleser objekter • Når en html side er lastet inn i en nettleser er følgende objekter alltid tilgjengelige: • window • document • location • history • navigator

20. Window objektet • Er topp nivå objektet som viser gjeldene side/vindu. • Window objektet har: • Egenskaper • Metoder • Events

21. Window - egenskaper • Parent – returnerer foreldre vinduet. • Self – referanse til gjeldende vidu • Top – referer til øverste vindu. • Name – navnet til vinduet • Status – teksten som vises på status linjen. • Document – lesetilgang til w. document objektet. • Event – leset. til det globale w. event objektet. • History – leset. til w. history objekt. • Location – leset. til w. location objekt som gir informajon om url til gjeldende side.

22. Window - egenskaper • Navigator – leset. til w. navigator objekt • Clientinformation – leset. til w. navigator objekt og samme referanse som overstående. • Screen – leset. til det globale screen objektet.

23. Window metoder • Open– åpner et nytt vindu. • Close– lukker gjeldende vindu. • showHelp – viser et ”hjelpevindu”. (IE) • showModalDialog – vindu som brukeren må lukke før en kan fortsette å lese.(kan inneholde html kode) (IE) • showModelessDialog – vindu som brukeren ikke trenger å lukke(html kode...) (IE) • Alert – dialog boks, med en melding og en ok knapp.

24. Window metoder • Prompt – dialog boks med en melding og et input felt. • Confirm – dialogboks med en melding, OK og Cansel knapp. • Navigate – sender url som parameter og laster den inn i gjeldene vindu. (IE) • Blur – tar vekk fokus på et vindu og trigger onblur • Focus – gir fokus til et vindu og trigger onfocus. • Print – skriver ut documentet tilhørende vinduet.

25. Open metodens egenskaper • Channelmode - yes|no|1|0 – viser kanaler. • Directories - yes|no|1|0 – viser directory knapper. • Fullscreen - yes|no|1|0 – maksimere. • Height – tall – høyden i pixels. • Left – tall – venstre pos. I vinduet i pixels. • Location - yes|no|1|0 – url tekst boksen. • Menubar - yes|no|1|0 – standard menyene til nettleser. • Resizeable - yes|no|1|0 – om størrelsen kan justeres. • Scrollbars - yes|no|1|0 – horisontale og vertikale • Status - yes|no|1|0 – standard status linje. • Titlebar - yes|no|1|0 – vise tittellinje. • Se eks:

26. History objektet • Inneholder informasjon om url’ene nettleseren har vert innom i løpet av en sesjon. • Består av en attributt og tre metoder: • Length - antall elementer i listen over url’s • Back() - forrige url i listen. • Forward() – neste url i listen • Og() – laster side ved posisjon n go(1);

27. Navigator objektet • Representerer nettleser applikasjonen, og gir generell informasjon om den. • Den har 11 egenskaper og 2 metoder: • Egenskaper: • appName – produkt navn • appVersion – plattform og versjon av nettleseren. • appMinorVersion – den mindre versjonen av nettleseren. • browserLanguage – gjeldende språk. • cookieEnabled – angir om cookies er tillat • userAgent – nettlesernavn • appCodeName – kode navnet til nettleseren • cpuClass – cpu’en som nettleseren kjører på. • onLine – sier noe om den globale online status.

28. Navigator objektet • Platform – plattformen som nettleserern kjører på. • systemLanguage – standard språk til systemet. • userLanguage – gjeldende språk til systemet. eks

29. Location objektet • Inneholder informasjon om url’en til gjeldende side: • Innholder 8 egenskaper og 3 metoder. • Egenskaper: • Href – hele url’en. • Hash – gir bookmark string • Host – gir domenenavn:port. • Hostname – gir domenenavn • Pathname – gir sti til fil/doc. • Port – gir portnummer • Protocol – gir type protokoll • Search – inneholder querystring , dataene som etterfølger ? i url’en. • Eks:

30. Location objektet • Metoder • Assign – laster en annen side € window.location.href • Reload – laster inn på nytt gjeldende side. • Replace – laster inn en ny side og erstatter den gamle sidens plass i historie listen.

31. Modale og ikke - modale vinduer • Modale: • Vinduer som brukeren må avslutte før en kan gå tilbake til det opprinnelige vinduet. • Ikke modale: • Vinduer som en ikke trenger å lukke for å jobbe med siden.

32. Modale og ikke modale vinduer forts. • Egenskaper tilhørende showModalDialog: • Center – yes|no|1|0 – plassering i vinduet. • Dialogheight – tall + enhet – høyden på vinduet • dialogLeft – tall + enhet – venstre posisjon i vinduet. • dialogTop – tall + enhet – topp posisjon i vinduet. • dialogWidth – tall + enhet – bredden på vinduet. • Help - yes|no|1|0 – hjelp knapp. • Status - yes|no|1|0 – status linje. • Resizeable - yes|no|1|0 – om brukeren kan forandre størrelsen på vinduet. • Se eks: