Presentasjon lastes. Vennligst vent

Presentasjon lastes. Vennligst vent

DOM og scripting Making it come alive. Hva er DOM? Standard for å definere trestrukturen til XML-dokumenter. IDL-spesifikasjon av grensesnitt, egenskaper.

Liknende presentasjoner


Presentasjon om: "DOM og scripting Making it come alive. Hva er DOM? Standard for å definere trestrukturen til XML-dokumenter. IDL-spesifikasjon av grensesnitt, egenskaper."— Utskrift av presentasjonen:

1 DOM og scripting Making it come alive

2 Hva er DOM? Standard for å definere trestrukturen til XML-dokumenter. IDL-spesifikasjon av grensesnitt, egenskaper og metoder. Bindinger til språk, implementasjoner i JavaScript, Java, Python, Ruby, m.m.

3 DOM - Utvikling ”DOM Level 0” (Nettleseravhengig). DOM Level 1 (W3C). DOM Level 2. Iteratorer, traversatorer, dokumentfragmenter HTML DOM. Enkel tilgang til viktige egenskaper ved HTML-kode. Style DOM. Enkel tilgang til stilark og stilregler. DOM Level 3: Load and Save. Parser, XHR-funksjonalitet. Validering

4 DOM: Viktige grensesnitt DOM: Node Document Element TextNode ProcessingInstruction NodeList HTML DOM (eksempler): HTMLSelectElement HTMLOptionElement HTMLInputElement

5 DOM: Viktige egenskaper DOM: Node.firstChild Node.childNodes Document.documentElement HTML DOM (eksempler): HTMLElement.style HTMLElement.className HTMLSelectElement.selectedIndex HTMLSelectElement.options HTMLInputElement.value

6 DOM: Viktige metoder DOM: Document.getElementById(id) Document.createElement(tagName) Document.createTextNode(text) Element.getElementsByTagName(tagName) Node.appendChild(node) Node.removeChild(node) Node.replaceChild(newNode, oldNode) Node.getAttribute(attrName) Node.setAttribute(attrName,value) HTML DOM (eksempler): HTMLSelectElement.add(option)

7 JavaScript Klientside-språk. Kjører i nettleseren. Interpretert Svakt typet Java-syntaks Utviklet av Netscape Standardisert av ECMA => ECMAScript

8 Implementasjon i JavaScript Browserspesifike implementasjoner av grensesnittene. God støtte for DOM og HTML DOM Level 2. Global variabel document

9 Eksempel var divs = document.getElementsByTagName(’div’); var div = null; for ( var i = 0, i < divs.length; i++) { div = divs[i]; alert(div.getAttribute(’class’)); }

10 Events og event handlers Events: click, select, change, submit mouseover, mouseout load, unload, … Event handlers: element.addEventListener(event, function ); element.onclick = function;

11 AJAX Asynchronous JavaScript with XML JavaScript-objekt: XMLHttpRequest Fil som produserer XML på serveren. XHR gir filen parametere og leser data. Synkront eller asynkront. Blocking vs event handler. Data dyttes inn i websiden med DOM. Ingen reload av siden.

12 Ressurser W3Cs DOM-aktiviteter: http://www.w3.org/DOM/ W3Cs DOM-spesifikasjoner: http://www.w3.org/DOM/DOMTR ECMAScript-spec’en http://www.ecma- international.org/publications/standards/Ecma- 262.htm http://www.ecma- international.org/publications/standards/Ecma- 262.htm XMLHttpRequest-tutorial http://developer.apple.com/internet/webcontent/x mlhttpreq.html http://developer.apple.com/internet/webcontent/x mlhttpreq.html


Laste ned ppt "DOM og scripting Making it come alive. Hva er DOM? Standard for å definere trestrukturen til XML-dokumenter. IDL-spesifikasjon av grensesnitt, egenskaper."

Liknende presentasjoner


Annonser fra Google