Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JavaScript DOM & event

3,512 views

Published on

Published in: Technology
  • Be the first to comment

JavaScript DOM & event

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

×