JavaScript DOM & event

JavaScriptDOM & EventOpen Tech Talk, 22nd January 2011 @HackerSpacePP

About Mevar presenter = { name: "Lim Borey", workAt: "Yoolk Inc.", email: "lim.borey@gmail.com", twitter: "@limborey", communities: [ "ShareVisionTeam", "Pailin" ]};

DOM Overview• DOM: Document Object Model - popular way of representing XML documents• Implemented in many languages: o Java, o Perl, o PHP, o Ruby, o Python, o JavaScript o …• was constructed to provide an intuitive way for developers to navigate an XML hierarchy

DOM Overview<table border="2"> <tr> <td>cell is row 0 column 0</td> <td>cell is row 0 column 1</td> </tr> <tr> <td>cell is row 1 column 0</td> <td>cell is row 1 column 1</td> </tr></table>

DOM Overview

Waiting for the HTML DOM to Load• HTML is parsed.• External scripts/style sheets are loaded.• Scripts are executed as they are parsed in the document.• HTML DOM is fully constructed.• Images and external content are loaded.• The page is finished loading.

Navigating the DOM• The document node

Navigating the DOM<html> <head> <title>JavaScript and DOM Interfaces </title> <script> function start() { myBody = document.getElementsByTagName("body")[0]; myBodyElements = myBody.getElementsByTagName("p"); myP = myBodyElements[1]; } </script> </head> <body onload="start()"> <p>hi</p> <p>hello</p> </body></html>

Navigating the DOM

Navigating the DOM• All node

Navigating the DOM<p> <strong>Hello</strong> how are you doing?</p>

Creating Nodevar textNode = document.createTextNode("world");var myNewPNode = document.createElement("p");

Attaching, copying or removing nodes

Attaching, copying or removing nodesmyP.appendChild(myTextNode);

Node information

Event• an action that is fired (initiated) within a web page.• JavaScript is Single Thread• JavaScript uses asynchronous callback What you’d see if JavaScript were A representation of using callbacks able to handle threads to wait for the page to load

Event Phases

Defining Event Handler• Old waywindow.onload = init();• New way (add event)window.addEventListener("load", init, false);window.attachEvent("onload", init); //IE

Event Methods• Adding and removing event listener

The Event Object• Contains contextual information about the current event• an object that’s provided, or is available, inside of every event handler function• W3C Standard Browser: e• Internet Explorer: window.eventtextArea.onkeypress = function(e){ e = e || window.event; return e.keyCode != 13;};

Cancel Bubbling• W3C Standard Browser e.stopPropagation()• Internet Explorer window.event.cancelBubble()

Overriding Browser default event• W3C Standard Broswer: e.preventDefault();• Internet Explorer window.event.returnValue = false;

References• Pro JavaScript™ Techniques, John Resig• http://www.howtocreate.co.uk/tutorials/javascript/ domstructure• https://developer.mozilla.org/en/Traversing_an_HTM L_table_with_JavaScript_and_DOM_Interfaces

JavaScript DOM & event

by Borey Lim on Jan 23, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 222

Statistics

JavaScript DOM & event — Presentation Transcript