Presentasjon lastes. Vennligst vent

Presentasjon lastes. Vennligst vent

Leksjon 4 Repetisjon DOM Eksempler. Repetisjon  Forrige gang gikk vi gjennom DHTML Browser Object Model:  Window objektet som det øverste objektet i.

Liknende presentasjoner


Presentasjon om: "Leksjon 4 Repetisjon DOM Eksempler. Repetisjon  Forrige gang gikk vi gjennom DHTML Browser Object Model:  Window objektet som det øverste objektet i."— Utskrift av presentasjonen:

1 Leksjon 4 Repetisjon DOM Eksempler

2 Repetisjon  Forrige gang gikk vi gjennom DHTML Browser Object Model:  Window objektet som det øverste objektet i hierarkiet.  Vi så på en rekke andre overordnede objekter:

3 En forenklet modell window eventhistorylocationscreen dataTransfernavigator document frames window … …

4 Window metodene  open – (kan manipulere egeskapene til et vindu).  showModalDialog  showModelessDialog  alert  promt  confirm

5 Objektene under window..  History: •Inneholder informasjon om hvilke URL’er nettleseren har vært innom i løpet av en sesjon.  Navigator: •Informasjon om selve nettleser appl.  Event: •Globalt objekt som holder rede på alle events i nettleseren.  Screen: •Statisk informasjon om skjerm og oppdatering hos klienten.

6 Objektene under window..  Location: •Informasjon om gjeldende URL.  Frames: •Samling av window objekter, et for hver ramme i gjeldende vindu.  Document: •Inneholder informasjon som tilhører det gjeldende html dokumentet.

7 Hva har vi lært så langt?  Vi kan nå å lage dynamiske html sider, ved bruk av JavaScript og DHTML. •Se eks.  Vi kan få et html dokument til å reagere på brukerens handlinger ved å knytte ”event handlers” til objektene/elementene i dokumentet. •Se eks.

8 Hva har vi lært så langt?  Kunnskap om hvordan vi benytter DOM modellen i JavaScript: Nettleserens ”Svarte boks” Objekt modellen, bestående Av objektene, attributtene, metodene Og hendelsene til nettleseren. HTML kilde kode og script

9 Fortsetter med DOM og document objektet.  Document objektet representerer html dukumentet i nettleseren.  Objektet brukes til å få tak i informasjon om dokumentet’s egenskaper, metoder og events.

10 DOM – egenskaper.  Generelle: •title – som •body – lesetilgang til body objektet ( ). •selection – leset. til selection objektet. •url – adressen til siden. •location – referanse til dokumentets tilhold. •domain – domene til dokumentet, (for sikkerhet). •cookie – verdien av en cookie lagret i nettleseren. •lastModified – dato når dokumentet sist ble oppdatert. •fileCreateDate – dato når filen ble opprettet. •fileModifyDate – dato når filen ble oppdatert. •fileSize – filstørrelse i byte.

11 DOM – egenskaper.  Generelle: •protocol – protokollen brukt til å aksessere dok. •charset – tegnsett til dokumentet. •defaultCharset – sette eller hente frem standart tegnsett. •parentWindow – returnerer foreldrevinduet som holder dokumentet.  Dokument farger: •bgColor – bakgrunnsfargen til dokomentet •fgColor – forgrunnsfargen til tekst. •linkColor – fargen til urørte lenker. •aLinkColor – fargen til aktive lenker. •vLinkColor – farger til besøkte lenker.

12 DOM – egenskaper.  Andre: •activeElement – elementet som har fokus. Kan f.eks. vise i statuslinjen ulike meldinger i forhold til de elementene som har fokus. •documentElement – referanse til rotnoden av dokumentet. •expando – (boolean) spesifiserer om dok. kan ha vilkårlige variabler. Hvis ”true”, kan du definere egne attibutter til objektet. •designMode – skiftes mellom surfing og editering av dokumentet. Kode kjøres ikke når den er på. •uniqueID – auto generert unik id for dok. •readyState – status til et objekt som blir lastet ned. •referrer – url til siden som refererer gjeldende side.

13 DOM - metoder  Generelle: •open – åpner et nytt dok. for å fange utdata av write og writeln metodene. •write – skriver tekst og html til dokumentet. •writeln – skriver tekst og html til dok. med linjeskift. •close – lukker en utdata strøm. •clear – fjerner innholdet av et valg. •recalc – rekalkulerer de dynamiske attributtene til dokumentet. •elementFromPoint – gir elementet på de spesifiserte x og y koordinatene. •clearAttributes – fjerner alle attributter fra dokumentet.

14 DOM - metoder  Generelle: •mergeAttributes – kopierer alle lese/skrive attrib. til det spesifiserte elementet. •attachEvent – binder er en spesifisert funksjon til en spesifisert hendelse. •detachEvent – løser en en spesifisert funksjon fra en spesifisert hendelse. •releaseCapture –fjerner data som var fanget av setCapture metoden.

15 DOM - metoder  Metoder som påvirker hierarkiet av elementer i dokumentet: •createElement – lager et nytt element av spesifisert type. •createStyleSheet – lager et nytt stilark for dokumentet. •createTextNode –lager en tekst streng •getElementByID – returnerer en ref. til det første elementet i dok. med den spesifiserte id. •getElementsByName – returnerer en samling av elementer med det spes. navnet. •getElementsBYTagName – returnerer en samling av elementer med det spes. tag navnet.

16 DOM - events  Knyttet til ”muse” hendelser. •onclick – museklikk •ondblclick – dobbeltklikk •oncontextmenu – når høyre musetast er trykket. •onmousedown – når en av knappene presses ned. •onmousemove – når musepekeren flyttes •onmouseover/onmouseout – når musepekeren føres over/ut fra et element. •onmouseup – når en av museknappene løftes opp. •ondragstart – når brukeren først begynner å dra et element.

17 DOM - events  ”Muse” hendelser: •ondrag – når brukeren flytter musen mens den drar et element. •ondragend – når brukeren slipper museknappen etter å ha dratt. •ondragenter/ondragleave – trigges av mål- elementet når objektet som dras slippes/forlater over et gyldig mål - element. •ondragover – trigges på mål-elementet når objektet som dras over et gyldig mål - element. •ondrop – trigges på mål-elementet når museknappen slippes får å avslutte en dra og – slipp handling.

18 DOM - events  Tastatur hendelser: •onkeydown – ved nedtrykk av en tast. •onkeypress – når brukeren trykker en tast.Hvis tasten holdes nede trigges flere onkeypress hendelser. •onkeyup – når brukeren slipper en tast. •onhelp – når brukeren tastet F1 eller en ’help’ tast.

19 DOM - events  Generelle: •onbeforecopy – trigges på objektet (kilden) før et valg er kopiert til systemets utklippstavle. •onbeforecut – trigges på objektet (kilden) før et valg blir slettet. •onbeforeeditfocus – ----------------- •onbeforepaste – trigges på mål – objektet før valget er limt inn. •onbeforeupdate – skjer før et element inneholdt ”data – bound” kontroll er avsluttet. •onafterupdate – skjer etter at dataoverføringen til datakilden er ferdig. •onerrorupdate – når en data oppdatering er avbrutt.

20 DOM - events  Generelle •onpaste – trigges på mål – objektet når valget er limes inn. •onpropertychange – trigges når et elements egenskap forandres. •onreadystatechange – trigges når readyState egenskapen til elementet forandres. •onstop – trigges når stop knappen trykkes.

21 DOM - collections  Gjør det enklere å aksessere informasjon på en web side(dok.).  Informasjonen er strukturert i 12 forskjellige samlinger: •all – samling av alle markerings tagger og elementer i kroppen av dokumentet. •anchors – samling av alle <a href elementer •applets – samling av alle objekter i dokumentet, html kontroller, bilder, applets, embedds og andre objekter. •childNodes – samling av dokument objektets barn. •children – samling av dokumentets direkte etterkommere.

22 DOM - collections  Samlinger: •embeds – samling av alle tagger i dok. •forms – samling av alle forms i dok. •frames –samling av alle rammer definert innenfor taggen. •images – samling av alle bilder. •links – samling av alle bilder og image-map blokker på siden. •scripts – samling av alle •styleSheets – samling av alle individuelle stil egenskap objekter definert for et dokument.

23 Bruk av collections  document.all samlingen: •Skal vise et eksempel hvor et script skriver ut en liste av alle html elementene i dokumentet. •bruker length egenskapen til all samlingen for å se hvor mange elementer det er, og traverserer så gjennom samlingen ved å bruke tagName egenskapen til hvert objekt i samlingen.

24 document.all eks: imax = document.all.length document.write(" ") for(i = 0;i < imax;i++) if (i < 9) document.write("Element 0" + (i+1) + " of " + imax + ": "+ "document.all[0" + i + "].tagName = " + document.all[i].tagName + " ") else if (i == 9) document.write("Element " + (i+1) + " of " + imax + ": " + "document.all[0" + i + "].tagName = " + document.all[i].tagName + " ") else document.write("Element " + (i+1) + " of " + imax + ": " + "document.all[" + i + "].tagName = " + document.all[i].tagName + " ") document.write(" ")

25 document.forms eks.  Forms samlingen er spesiell framfor de andre fordi den inneholder en undernivå samling som inneholder alle elementer og objekter i en form.  Slik kan koden se ut: •document.forms(0).elements(2).value •se eksempel.

26 Selection objektet  Inneholder informasjon om det gjeldende utvalget gjort nå en bruker drar musepekeren over en side.  Selection objektet gir oss tilgang til alle de valgte elementene og ren tekst, innenfor siden.  Objektet har en egenskap som returnerer en verdi avhengig av hvilken type av elementer som er valgt:

27 Selection objektet  type – type valg.... •1 - None - htmlSelectionNone - ikke noe er valgt. •2 – Text – htmlSelectionText – Body tekst •3 – Control – htmlSelectionControl – et kontroll element. •4 – Table – htmlSelectionTable – hele eller deler ev en tabell.

28 Selection objektet  Metoder •createRange – lager et TextRange objekt fra gjeldende valg. •clear – sletter innholdet av et valg. •empty – gjør om valg og setter type til None. •Se eks: selection.html

29 innerHTML og outerHTML  Gjør det mulig å enkelt forandre innholdet i et html dok uten å måtte gå til web tjeneren.  innerHTML – er en egenskap til et HTML –element objekt. •Dens verdi er det som er av tekst, informasjon og html kode innenfor elementet. (innenfor f.eks...... )  outerHTML - er en egenskap til et HTML –element objekt. •Dens verdi er det som er av tekst, informasjon og html kode innenfor elementet (innenfor f.eks...... ), i tillegg til selve elementet.  Eks: inner_outer.html

30 DHTML og Data Source Object  Hvis vi ønsker å binde data til elementer på en side må det være et DSO(Data Source Object) til stede.  Det finnes flere typer DSO’er •TDC Tabular Data Control •RDC Remote Data Service •XML Data Source •MSHTML Data Source

31 DHTML og Data Source Object  En DSO kan bli implementert som en ActiveX®control eller som en Java Applet.  elementet brukes for å innlemme en ActX.  - tilsvarende for en Java Applet.

32 DHTML og Data Source Object  TDC – for denne gang!  TDC er en enkel DSO som gir tilgang til begrensede tekstfiler.  Følgende kommer en deklarasjon av en TDC: <object id="inputdata" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83" align="baseline" border="0" width="0" height="0">

33 DHTML og Data Source Object  DataURL tilhører TDC og referer til den datakilden som skal lastes inn sammen med html koden i nettleseren.  UseHeader tilhører TDC og spesifiserer om første linjen i datafila inneholder header informasjon. (Overskrifter...)

34 DHTML og Data Source Object  Neste steg er å knytte dataene til html elementer/ binde html elementer til datakilden:   Se DataBind.html  Dette er Microsoft teknologi!

35 Cookies  Tilstandsløs HTTP:  HTTP protokollen sporer ikke din interaksjon med tjeneren.  Derfor trenger vi måter å lagre denne informasjonen på.  ”State” /tilstand refererer til informasjon om deg og dine besøk til en web – side.  Den oppdateres mens du beveger deg fra side til side innenfor nettstedet.

36 Cookies  Hvordan holde rede på tilstanden:  Lagre den i cookies.  Kode den inn i url – linker.  Sende den via skulte skjema felter  Lagre den i variabler i andre rammer  Lagre den på web serveren.

37 Cookies  Noen scenarier:  Webbutikk: brukere kan surfe gjennom nettstedet mens han/hun velger varer og legger dem i handlekurven. Underveis kan brukeren se hva som er i handle kurven. Å holde rede på hvilken bruker som eier hvilken handlekurv er viktig.  Hjemmesider: hvor brukere kan bestemme utseende på sidene ved å velge fra en liste med mulige design. Når brukeren har valgt kan denne informasjonen lagres i en cookie.

38 Cookies  Introduksjon:  Cookies, formelt kjent som persistent klient HTTP cookies.  Cookies er ment å skulle være den beste metoden for å holde rede på en tilstand/state innenfor et nettsted.  Cookies kan lagre data på formen: •Name = value. •Du kan selv velge navngiving på disse.  Cookies kan sette dato for når den blir ugyldig.  Og kan begrense tilgangen til den.

39 Cookies  Fordeler:  Persistens: Cookies kan lagres på en nettleser i dager, mnd og år.  Dette gjør det enkelt å lagre brukerinformasjon.  Javascript har funksjoner for lesing og skriving til cookies.

40 Cookies  Begrensninger:  Cookies kan slettes  Bytte av nettleser..  Flere brukere på samme maskin.

41 Cookies  Ulemper  Personlige opplysninger kan ikke lagres i en cookie, side alle har tilgang til dem.  En har muligheten til å ”skru av” en cookie i nettleseren slik at de ikke er mulig å lagre cookies.


Laste ned ppt "Leksjon 4 Repetisjon DOM Eksempler. Repetisjon  Forrige gang gikk vi gjennom DHTML Browser Object Model:  Window objektet som det øverste objektet i."

Liknende presentasjoner


Annonser fra Google