![About Me
var presenter = {
name: "Lim Borey",
workAt: "Yoolk Inc.",
email: "lim.borey@gmail.com",
twitter: "@limborey",
communities: [
"ShareVisionTeam",
"Pailin"
]
};](https://image.slidesharecdn.com/javascriptdomevent-110123021045-phpapp01/85/JavaScript-DOM-event-2-320.jpg)
![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>](https://image.slidesharecdn.com/javascriptdomevent-110123021045-phpapp01/85/JavaScript-DOM-event-8-320.jpg)
JavaScript DOM & event
- 1. JavaScript DOM & Event Open Tech Talk, 22nd January 2011 @HackerSpacePP
- 2. About Me var presenter = { name: "Lim Borey", workAt: "Yoolk Inc.", email: "[email protected]", twitter: "@limborey", communities: [ "ShareVisionTeam", "Pailin" ] };
- 3. 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
- 4. 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>
- 5. DOM Overview
- 6. 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.
- 7. Navigating the DOM • The document node
- 8. 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>
- 10. Navigating the DOM • All node
- 11. Navigating the DOM <p> <strong>Hello</strong> how are you doing? </p>
- 12. Creating Node var textNode = document.createTextNode("world"); var myNewPNode = document.createElement("p");
- 13. Attaching, copying or removing nodes
- 14. Attaching, copying or removing nodes myP.appendChild(myTextNode);
- 15. Node information
- 16. 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
- 17. Event Phases
- 18. Defining Event Handler • Old way window.onload = init(); • New way (add event) window.addEventListener("load", init, false); window.attachEvent("onload", init); //IE
- 19. Event Methods • Adding and removing event listener
- 20. 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.event textArea.onkeypress = function(e){ e = e || window.event; return e.keyCode != 13; };
- 21. Cancel Bubbling • W3C Standard Browser e.stopPropagation() • Internet Explorer window.event.cancelBubble()
- 22. Overriding Browser default event • W3C Standard Broswer: e.preventDefault(); • Internet Explorer window.event.returnValue = false;
- 23. 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