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