Laste ned presentasjonen
Presentasjon lastes. Vennligst vent
PublisertAnn-Kristin Didriksen Endret for 9 år siden
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.
Liknende presentasjoner
© 2024 SlidePlayer.no Inc.
All rights reserved.