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

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

Objekter  Forhånds definerte klasser i ECMA script:  Array  Boolean  Date  Function  Math  Number  RegExp  String

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 pi.htm  MathRandom.html MathRandom.html

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.htm date2.htmdate.htmdate2.htm

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

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.

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 array1.htm  array2initiere.htm array2initiere.htm  array3dynamisk.htm array3dynamisk.htm  array4datatyper.htm array4datatyper.htm  array5assosiativ.htm array5assosiativ.htm  array6join.htm array6join.htm  array7reversering.htm array7reversering.htm  array8sortering.htm array8sortering.htm  array9sortnumbers.htm array9sortnumbers.htm

Events Hendelser og lyttere

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

Events  Events i en nettleser.  Defineres:  Som regel i en HTML tag.  Men kan også definers innenfor 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.

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

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 onsubmit.html  reset.html reset.html

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.

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

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

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

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

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

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.

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.

Window metoder  Open – åpner et nytt vindu. Open  Close – lukker gjeldende vindu. Close  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.

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.

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:

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);

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.

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

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: Eks

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.

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.

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: