DOM IT!

DOM IT! By: Patrick Brannen Sr. Developer Truth Technologies, Inc. http://www.truthtechnologies..com pbrannen@idevco.com

DOM IT! Objective Introduction Browser Versions Supporting DOM About XML XHTML Examples (DHTML vs. XHTML + DOM) – Simple Form Access (setting a value) – Advanced Form Access (validation routine) – Simple Document Manipulation (changing the content of a div) – Advanced Document Manipulation (Click Me!) Conclusion Resources • • • • • • • •

Objective • Understand what the DOM is and who controls it • Understand current popular browser’s depth of implementation of the DOM • Create simple DOM compatible JavaScript • Understand differences between the DHTML way of scripting, and scripting using the DOM.

Introduction • What is the DOM? – Set of standards agreed upon by the World Wide Web Consortium (W3C) – From http://www.w3.org/DOM/#what • The Document Object Model is a platform- and language- neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page.

Introduction • Why is the DOM important to web developers? – W3C sets standards based upon recommendations provided by its members. Some of the current members who developing top Web Browsers are Microsoft, Mozilla Foundation and Opera Software. – DOM compliance is something that newer browsers are seeking. By understanding the DOM, you will be able to write scripts once that function in multiple browsers.

Browser Versions Supporting DOM • Mozilla’s DOM Support – http://www.mozilla.org/docs/dom/reference/levels.html – Basically DOM Level 1 and most of Level 2 – Commitment to supporting future DOM Levels • Internet Explorer’s DOM Support – http://www.microsoft.com/windows/ie/evaluation/features/default.mspx – Full DOM Level 1 support Opera 7 – http://www.opera.com/docs/specs/index.dml#dom – Most of DOM Level 1 and 2 supported, exceptions noted at above URL •

About XML • From http://www.w3.org/XML/: – Extensible Markup Language (XML) is a simple, very flexible text format derived from SGML. Originally designed to meet the challenges of large-scale electronic publishing, XML is also playing an increasingly important role in the exchange of a wide variety of data on the Web and elsewhere.

XHTML • XHTML™ 1.1 is the Extensible HyperText Markup Language – Is a W3C standard – Essentially HTML reformulated as an XML app. – * XHTML documents are XML conforming. As such, they are readily viewed, edited, and validated with standard XML tools. *source: http://www.w3.org/TR/xhtml1/#xhtml

XHTML • * XHTML documents can utilize applications (e.g. scripts and applets) that rely upon either the HTML Document Object Model or the XML Document Object Model [DOM]. – NOTE: Here they refer to HTML Document Object Model as others would call DOM 0, which is the retrofitted term used for the access to the document in HTML 4.0 compliant browsers (before DOM Level 1 was proposed) – XHTML 1.0 defined three sets of DTD (Document Type Descriptors), for the purpose of backwards compatablilty – With XHTML 1.1 on the horizon, I would avoid mix HTML DOM and DOM Layer 1 or 2 wherever possible. *source: http://www.w3.org/TR/xhtml1/#xhtml

Examples (DHTML vs. XHTML + DOM) • For all examples, I will be showing the IE way of coding something in DHTML. Again, the reason to use the DOM is to allow multiple browsers to react the same to a specific scripts, hence the DHTML way will not necessarily work in browsers other than IE. • XHTML + DOM examples have been tested in IE 6 and Mozilla Firebird .7 (Mozilla 5), Opera will work with most DOM examples • XHTML 1.1 will be used in our examples.

Examples (DHTML vs. XHTML + DOM) Simple Form Access (setting a value) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> • <html> <head> • • • <title>Simple Form Access (setting a value) / DHTML + DOM 0</title> <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> • • <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Simple Form Access (setting a value) / XHTML + DOM 1</title> • • •

Examples (DHTML vs. XHTML + DOM) Simple Form Access (setting a value) <form name="simpleform"> <input type="text" name="simpleinput" value="Hello"> <input type="button" name="simplebutton" value="Go" onClick="toggle()"> </form> • • • • <form id="simpleform" action="DOM -- SimpleFormAccess.html"> <div> <input type="text" id="simpleinput" value="Hello" /> <input type="button" id="simplebutton" value="Go" onclick="toggle()" /> </div> </form> • • • • • •

Examples (DHTML vs. XHTML + DOM) Simple Form Access (setting a value) function toggle() { if(document.simpleform.simpleinput.value == "Hello") document.simpleform.simpleinput.value = "World" else document.simpleform.simpleinput.value = "Hello" } function toggle() { if(document.getElementById("simpleinput").value == "Hello") document.getElementById("simpleinput").value = "World"; else document.getElementById("simpleinput").value = "Hello"; }

Examples (DHTML vs. XHTML + DOM) Advanced Form Access (validation) <form name="simpleform"> First Name: <input type="text" name="field0"><br> Last Name: <input type="text" name="field1"><br> Email: <input type="text" name="field2"><br> <input type="button" onClick="validate()" value="Submit"> </form> <form id="simpleform" action=“DOM -- AdvancedFormAccess.html"> <div id="formdiv"> First Name: <input type="text" name="firstname" /><br/> Last Name: <input type="text" name="lastname" /><br/> Email: <input type="text" name="email" /><br/> <input type="button" onclick="validate()" value="Submit" /> </div> </form>

Examples (DHTML vs. XHTML + DOM) Advanced Form Access (validation) for (i=0; i < 3; i++) { if (eval("document.simpleform.field" + i + ".value") == "") alert("All fields required"); eval("document.simpleform.field" + i + ".focus()"); return; } { } document.simpleform.submit(); for(i=0; i<document.getElementById("formdiv").childNodes.length; i++) if(document.getElementById("formdiv").childNodes[i].nodeName.toLowerCase() == "input") if(document.getElementById("formdiv").childNodes[i].value == "") alert("All fields required"); document.getElementById("formdiv").childNodes[i].focus(); return; } } } document.getElementById("simpleform").submit(); { { {

Examples (DHTML vs. XHTML + DOM) Advanced Form Access (validation) //<![CDATA[ … //]]>

Examples (DHTML vs. XHTML + DOM) Simple Document Manipulation (changing the content of a div) <p id="message">Hello</p> <form> <input type="button" onClick="toggle()" value="Go"> </form> <div id="message">Hello</div> <form id="simpleform" action=“DOM -- SimpleFormAccess.html"> <div> <input type="button" id="simplebutton" value="Go" onclick="toggle()" /> </div> </form>

Examples (DHTML vs. XHTML + DOM) Simple Document Manipulation (changing the content of a div) function toggle() if(document.all && document.all.message) // IE only Code if(document.all.message.innerHTML == "Hello") { document.all.message.innerHTML = "World"; } else document.all.message.innerHTML = "Hello"; } function toggle() { if(document.getElementById("message").firstChild.data == "Hello") document.getElementById("message").firstChild.data = "World"; else document.getElementById("message").firstChild.data = "Hello"; } { {

Examples (DHTML vs. XHTML + DOM) Simple Document Manipulation (changing the content of a div) else { // Do some more browser detection to write out to a div based on each vendor's non standard DOM alert("Unfortunately, I did not code to any standards, so you have to get a different browser, or I'll have to maintain two sets of code!") }

Examples (DHTML vs. XHTML + DOM) Advanced Document Manipulation (Click Me!) <body onload="this.focus()"> <div id="message">Try to click the button</div> <form id="simpleform" action=“DOM -- SimpleFormAccess.html"> <div id="nomad" style="position: absolute; left: 100px; top: 100px;" onmouseover="moveMe(event)"> <input type="button" id="simplebutton" value="Click Me!" onclick="youwin()" /> </div> </form> <div id="CurrLetter" style="font-size: 40px">Last Key Struck: </div> </body>

Examples (DHTML vs. XHTML + DOM) Advanced Document Manipulation (Click Me!) flip = true; sequenceMet = false; unlock = "domit"; curr = ""; function isClickable() return sequenceMet; } { function youwin(){ document.getElementById("message").firstChild.data = "You Win!"; }

Examples (DHTML vs. XHTML + DOM) Advanced Document Manipulation (Click Me!) function moveMe(event) { if(isClickable()) return; } else { if(flip) { document.getElementById("nomad").style.left = (parseInt(document.getElementById("nomad").style.left) + 100) +"px"; document.getElementById("nomad").style.top = (parseInt(document.getElementById("nomad").style.top) + 100) +"px"; flip = false; } else { document.getElementById("nomad").style.left = (parseInt(document.getElementById("nomad").style.left) - 100) +"px"; document.getElementById("nomad").style.top = (parseInt(document.getElementById("nomad").style.top) - 100) +"px"; flip = true; } } } {

Examples (DHTML vs. XHTML + DOM) Advanced Document Manipulation (Click Me!) // Mozilla keypress logic if (document.addEventListener) { document.addEventListener( 'keypress', function (evt) { reportEvent(evt); }, false); } // Mozilla/Opera keypress event handler function reportEvent(evt) unlocker(String.fromCharCode(evt.charCode)); } {

Examples (DHTML vs. XHTML + DOM) Advanced Document Manipulation (Click Me!) // IE keypress logic document.onkeypress = dokeypress; // IE keypress event handler function dokeypress() { unlocker(String.fromCharCode(window.event.keyCode)); }

Examples (DHTML vs. XHTML + DOM) Advanced Document Manipulation (Click Me!) // key sequence logic function unlocker(letter) document.getElementById("CurrLetter").firstChild.data = "Last Key Struck: " + letter; curr += letter; for (i=0; i<curr.length; i++) { if(curr.charAt(i) != unlock.charAt(i)) curr = ""; return; } } if(curr == unlock) sequenceMet = true; } { {

Conclusion • From a developer standpoint, web standards are good • Not all functionality is currently implemented in all browsers • As the standards get implemented in future browser generations, the dream of writing one script that functions the same in many browsers is becoming a reality

Resources • Books • Online – W3C Dom FAQ (http://www.w3.org/DOM/faq.html) – XHTML 1.1: http://www.w3.org/TR/xhtml11/ – DOM Level 1 Support Grid (by Mozilla.org, but covers several browsers) • http://www.mozilla.org/docs/dom/grids/html_tab.html – XHTML Validator • http://validator.w3.org/

DOM IT!

DOM IT!

Presentation Transcript