Scripting The Dom

4,563
-1

Published on

A presentation on scripting the DOM

Published in: Technology
0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,563
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
1
Comments
0
Likes
12
Embeds 0
No embeds

No notes for slide

Scripting The Dom

  1. 1. Scripting the DOM Ara Pehlivanian May 26, 2009 Québec
  2. 2. Overview <ul><li>From HTML to the DOM </li></ul><ul><li>The window Object </li></ul><ul><li>The document Object </li></ul><ul><li>The body Object </li></ul><ul><li>JavaScript </li></ul><ul><li>JavaScript Functions </li></ul><ul><li>JavaScript Events </li></ul><ul><li>Custom Objects </li></ul><ul><li>Namespacing </li></ul><ul><li>Object Instantiation </li></ul>
  3. 3. <ul><li>“ Document Object Model (DOM) </li></ul><ul><li>is a platform- and language-independent </li></ul><ul><li>standard object model for representing </li></ul><ul><li>HTML or XML and related formats…” 1 </li></ul><ul><li>-- Wikipedia </li></ul>1. From HTML to the DOM
  4. 4. <ul><li>The browser parses your HTML document and from it </li></ul><ul><li>generates a Document Object Model (DOM) tree. </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><!-- there’s nothing in my head --> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><!-- and there’s nothing in my body --> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>1. From HTML to the DOM
  5. 5. 1. From HTML to the DOM <ul><li>So what is the DOM? </li></ul><ul><li>The DOM is a hierarchical tree containing data and functions (members). </li></ul><ul><li>The data comes from both your HTML document as well as the browser itself. </li></ul><ul><li>The DOM also contains several functions that can be used to interact with and modify the DOM. </li></ul><ul><li>Modern browsers implement the W3C DOM </li></ul>
  6. 6. <ul><li>So now that your empty HTML document </li></ul><ul><li>has been converted to the </li></ul><ul><li>Document Object Model, </li></ul><ul><li>where is it and what </li></ul><ul><li>does it look like? </li></ul>2. The window object
  7. 7. 2. The window object <ul><li>The highest level object, the root if you will, is the window object. It contains about 98 members. </li></ul>
  8. 8. 2. The window object Members of the window object are accessed by either dot or subscript notation
  9. 9. 2. The window object <ul><li>For example: </li></ul><ul><li>The innerWidth property can be accessed either like this… </li></ul>alert( window.innerWidth ); … or like this… alert( window['innerWidth'] );
  10. 10. 3. The document object <ul><li>Of the window object’s 98 members, </li></ul><ul><li>one of the most important is </li></ul><ul><li>the document object. </li></ul><ul><li>The document object is </li></ul><ul><li>a child of the window object. </li></ul>
  11. 11. 3. The document object <ul><li>The object representing your actual document is the document object (duh!). It contains about 144 members. </li></ul>
  12. 12. 3. The document object <ul><li>NOTE </li></ul><ul><li>In accessing members of the document object, </li></ul><ul><li>the reference to the parent ( window ) object can be skipped. </li></ul>
  13. 13. 3. The document object <ul><li>For example: </li></ul><ul><li>The compatMode property can be accessed in any of </li></ul><ul><li>the following ways: </li></ul>alert( window.document.compatMode ); alert( window.document.['compatMode'] ); alert( window['document']['compatMode'] ); alert( document.compatMode ); alert( document.['compatMode'] );
  14. 14. <ul><li>The body object is where your </li></ul><ul><li>visible content is found. </li></ul>4. The body object
  15. 15. 4. The body object <ul><li>The body object contains about 98 members (no pun intended). It is an HTML element, so members are identical to those of its children. </li></ul>
  16. 16. 4. The body object <ul><li>NOTE </li></ul><ul><li>The reference to the document object </li></ul><ul><li>cannot be skipped when referring </li></ul><ul><li>to the body object </li></ul>
  17. 17. 4. The body object <ul><li>For example: </li></ul><ul><li>The nodeName property can be accessed like this… </li></ul><ul><li>alert( window.document.body['nodeName'] ); </li></ul><ul><li>alert( document.body.nodeName ); </li></ul><ul><li>… but not like this… </li></ul><ul><li>alert( body['nodeName'] ); </li></ul><ul><li>alert( body.nodeName ); </li></ul>
  18. 18. How do you script the DOM <ul><li>Now that you know a bit about </li></ul><ul><li>the DOM, what about </li></ul><ul><li>the language that lets you script it? </li></ul>
  19. 19. 5. JavaScript <ul><li>JavaScript is an interpreted programming language </li></ul><ul><li>that runs in the browser allowing </li></ul><ul><li>you to interact with and manipulate </li></ul><ul><li>the DOM. </li></ul>
  20. 20. 5. JavaScript <ul><li>Facts: </li></ul><ul><li>JavaScript is a class-free , object-oriented language, and </li></ul><ul><li>as such, it uses prototypal inheritance instead of </li></ul><ul><li>classical inheritance. 2 </li></ul><ul><li>JavaScript is not Java. JavaScript has a syntactic </li></ul><ul><li>similarity to Java, much as Java has to C. But it is </li></ul><ul><li>no more a subset of Java than Java is a subset of C. 3 </li></ul>
  21. 21. 5. JavaScript <ul><li>NOTE </li></ul><ul><li>JavaScript loads and executes linearly. </li></ul><ul><li>This means that whenever the browser </li></ul><ul><li>encounters JavaScript while reading </li></ul><ul><li>an HTML document, it stops everything, </li></ul><ul><li>loads the JavaScript engine, </li></ul><ul><li>executes the code, </li></ul><ul><li>then continues building the DOM. </li></ul>
  22. 22. 5. JavaScript <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><script> </li></ul><ul><li>alert(document.body.nodeName); </li></ul><ul><li></script> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><!-- there’s nothing in my body --> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>What will this code do?
  23. 23. 5. JavaScript <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><script> </li></ul><ul><li>alert(document.body.nodeName); </li></ul><ul><li></script> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><!-- there’s nothing in my body --> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>document.body has no properties What will this code do?
  24. 24. 5. JavaScript <ul><li>Since JavaScript is loaded and executed linearly, </li></ul><ul><li>the browser hasn’t gotten to creating </li></ul><ul><li>the body element in the DOM yet, </li></ul><ul><li>so trying to access one of its </li></ul><ul><li>nonexistent properties </li></ul><ul><li>returns an error. </li></ul><ul><li>So how can the execution of </li></ul><ul><li>code be delayed? </li></ul>
  25. 25. <ul><li>JavaScript functions allow code to </li></ul><ul><li>be executed only when needed </li></ul>6. JavaScript Functions
  26. 26. 6. JavaScript Functions <ul><li>JavaScript allows for both named and anonymous function declarations </li></ul><ul><li>Named functions: </li></ul><ul><li>function heavyLifting (){…} </li></ul><ul><li>var heavyLifting = function(){…} </li></ul><ul><li>Anonymous functions: </li></ul><ul><li>window.onload = function (){…} </li></ul><ul><li>function(msg) {alert(msg)}(&quot;hello world&quot;); </li></ul>
  27. 27. 6. JavaScript Functions <ul><li>The previous example could be placed in a function, and </li></ul><ul><li>called only when the body element becomes available. </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><script> </li></ul><ul><li>function getBodyNodeName(){ </li></ul><ul><li>alert(document.body.nodeName); </li></ul><ul><li>} </li></ul><ul><li>window.onload = getBodyNodeName; </li></ul><ul><li></script> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul>
  28. 28. <ul><li>JavaScript can also works non-linearly </li></ul><ul><li>through the event model </li></ul>7. JavaScript Events
  29. 29. 7. JavaScript Events <ul><li>Events are function calls that are triggered when something </li></ul><ul><li>happens. Events are triggered by a user action or the browser </li></ul><ul><li>to signal a change in the document’s </li></ul><ul><li>state. </li></ul><ul><li>Examples include: </li></ul><ul><ul><li>onmouseover </li></ul></ul><ul><ul><li>onmouseout </li></ul></ul><ul><ul><li>onload </li></ul></ul>
  30. 30. 7. JavaScript Events <ul><li>Traditionally, event assignment is a one to one relationship, e.g.: </li></ul><ul><li>function helloWorld(){ </li></ul><ul><li>alert(&quot;Hello World&quot;); </li></ul><ul><li>} </li></ul><ul><li>function goodbyeCruelWorld(){ </li></ul><ul><li>alert(&quot;Goodbye Cruel World&quot;); </li></ul><ul><li>} </li></ul><ul><li>window.onload = helloWorld; </li></ul><ul><li>window.onload = goodbyeCruelWorld; </li></ul>What will this code do?
  31. 31. 7. JavaScript Events <ul><li>Traditionally, event assignment is a one to one relationship, e.g.: </li></ul><ul><li>function helloWorld(){ </li></ul><ul><li>alert(&quot;Hello World&quot;); </li></ul><ul><li>} </li></ul><ul><li>function goodbyeCruelWorld(){ </li></ul><ul><li>alert(&quot;Goodbye Cruel World&quot;); </li></ul><ul><li>} </li></ul><ul><li>window.onload = helloWorld; </li></ul><ul><li>window.onload = goodbyeCruelWorld; </li></ul>What will this code do?
  32. 32. 7. JavaScript Events <ul><li>JavaScript libraries such as the Yahoo! User Interface (YUI) library </li></ul><ul><li>have overcome this problem. With YUI, the previous </li></ul><ul><li>code example becomes: </li></ul><ul><li>function helloWorld(){ </li></ul><ul><li>alert(&quot;Hello World&quot;); </li></ul><ul><li>} </li></ul><ul><li>function goodbyeCruelWorld(){ </li></ul><ul><li>alert(&quot;Goodbye Cruel World&quot;); </li></ul><ul><li>} </li></ul><ul><li>YAHOO.util.Event.addListener(window, &quot;load&quot;, helloWorld); </li></ul><ul><li>YAHOO.util.Event.addListener(window, &quot;load&quot;, goodbyeCruelWorld); </li></ul>What will this code do?
  33. 33. 7. JavaScript Events <ul><li>JavaScript libraries such as the Yahoo! User Interface (YUI) library have overcome this problem. With YUI, the previous code example becomes: </li></ul><ul><li>function helloWorld(){ </li></ul><ul><li>alert(&quot;Hello World&quot;); </li></ul><ul><li>} </li></ul><ul><li>function goodbyeCruelWorld(){ </li></ul><ul><li>alert(&quot;Goodbye Cruel World&quot;); </li></ul><ul><li>} </li></ul><ul><li>YAHOO.util.Event.addListener(window, &quot;load&quot;, helloWorld); </li></ul><ul><li>YAHOO.util.Event.addListener(window, &quot;load&quot;, goodbyeCruelWorld); </li></ul>What will this code do?
  34. 34. 7. JavaScript Events <ul><li>JavaScript libraries such as the Yahoo! User Interface (YUI) library have overcome this problem. With YUI, the previous code example becomes: </li></ul><ul><li>function helloWorld(){ </li></ul><ul><li>alert(&quot;Hello World&quot;); </li></ul><ul><li>} </li></ul><ul><li>function goodbyeCruelWorld(){ </li></ul><ul><li>alert(&quot;Goodbye Cruel World&quot;); </li></ul><ul><li>} </li></ul><ul><li>YAHOO.util.Event.addListener(window, &quot;load&quot;, helloWorld); </li></ul><ul><li>YAHOO.util.Event.addListener(window, &quot;load&quot;, goodbyeCruelWorld); </li></ul>What will this code do?
  35. 35. 7. JavaScript Events <ul><li>Event handlers such as onmouseover were traditionally assigned like so: </li></ul><ul><li><a href=&quot;http://www.nurun.com/&quot; onmouseover=&quot;highlight();&quot; >Nurun</a> </li></ul><ul><li><a href=&quot;http://www.google.com/&quot; onmouseover=&quot;highlight();&quot; >Google</a> </li></ul><ul><li><a href=&quot;http://www.yahoo.com/&quot; onmouseover=&quot;highlight();&quot; >Yahoo</a> </li></ul><ul><li>... </li></ul><ul><li>There are several problems with this method of assigning event handlers: </li></ul><ul><li>Difficult to maintain (function name changes or adding new functions to the event) </li></ul><ul><li>Not portable (will call the function wherever the markup is used) </li></ul><ul><li>Weighs down the page (same text repeated for every instance) </li></ul>
  36. 36. 7. JavaScript Events <ul><li>The preferred method of assigning event handlers is as follows: </li></ul><ul><li><script> </li></ul><ul><li>function assignHandlers(){ </li></ul><ul><li> var lnks = YAHOO.util.Dom.getElementsByClassName(&quot;external&quot;); </li></ul><ul><li> for(var i=0; i<lnks.length; i++){ </li></ul><ul><li> YAHOO.util.Event.addListener(lnks[i], &quot;mouseover&quot;, highlight); </li></ul><ul><li> } </li></ul><ul><li>} </li></ul><ul><li>YAHOO.util.Event.addListener(window, &quot;load&quot;, assignHandlers); </li></ul><ul><li></script> </li></ul><ul><li><a href=&quot;http://www.nurun.com/&quot; class=&quot;external&quot; >Nurun</a> </li></ul><ul><li><a href=&quot;http://www.google.com/&quot; class=&quot;external&quot; >Google</a> </li></ul><ul><li><a href=&quot;http://www.yahoo.com/&quot; class=&quot;external&quot; >Yahoo</a> </li></ul><ul><li>... </li></ul>
  37. 37. 7. JavaScript Events <ul><li>Or… </li></ul><ul><li><script> </li></ul><ul><li>function assignHandlers(){ </li></ul><ul><li> var lnks = document.getElementsByTagName(&quot;a&quot;); </li></ul><ul><li> for(var i=0; i<lnks.length; i++){ </li></ul><ul><li>if(lnks[i].href.substring(0, 7) == &quot;http://&quot;){ </li></ul><ul><li> YAHOO.util.Event.addListener(lnks[i], &quot;mouseover&quot;, highlight); </li></ul><ul><li>} </li></ul><ul><li> } </li></ul><ul><li>} </li></ul><ul><li>YAHOO.util.Event.addListener(window, &quot;load&quot;, assignHandlers); </li></ul><ul><li></script> </li></ul><ul><li><a href=&quot;http://www.nurun.com/&quot;>Nurun</a> </li></ul><ul><li><a href=&quot;http://www.google.com/&quot;>Google</a> </li></ul><ul><li><a href=&quot;http://www.yahoo.com/&quot;>Yahoo</a> </li></ul><ul><li>... </li></ul>
  38. 38. <ul><li>JavaScript allows the creation of </li></ul><ul><li>custom objects. </li></ul>8. Custom Objects
  39. 39. 8. Custom Objects <ul><li>You may have noticed object notation in the previous code </li></ul><ul><li>examples that weren’t limited to the DOM and its members, i.e.: YAHOO.util.Event.addListener(window, &quot;load&quot;, assignHandlers); </li></ul><ul><li>JavaScript allows for the creation of nested custom objects </li></ul><ul><li>which is useful in namespacing. </li></ul>
  40. 40. 8. Custom Objects <ul><li>The easiest, and clearest way of creating and nesting objects is by </li></ul><ul><li>using the object literal { } . </li></ul><ul><li>So the previous code example can be declared using the </li></ul><ul><li>object literal notation like so: </li></ul><ul><li>var YAHOO = { </li></ul><ul><li>util:{ </li></ul><ul><li>Event:{ </li></ul><ul><li>addListener:function(el, evt, fn){ </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  41. 41. 8. Custom Objects <ul><li>… or… </li></ul><ul><li>var YAHOO = {}; </li></ul><ul><li>YAHOO.util = {}; </li></ul><ul><li>YAHOO.util.Event = {}; </li></ul><ul><li>YAHOO.util.Event.addListener = function(el, evt, fn){…}; </li></ul><ul><li>… or even… </li></ul><ul><li>var YAHOO = {util:{Event:{}}}; </li></ul><ul><li>YAHOO.util.Event.addListener = function(el, evt, fn){…}; </li></ul>
  42. 42. <ul><li>namespacing.futureProof() </li></ul><ul><li>namespacing.organize(); </li></ul>9. Namespacing
  43. 43. 9. Namespacing <ul><li>There are many advantages to creating namespaces </li></ul><ul><li>by using nested objects, two of the most obvious are: </li></ul><ul><li>Collision avoidance (future proofing) </li></ul><ul><li>Better organization of code (easier to read) </li></ul>
  44. 44. 9. Namespacing <ul><li>Here is a common scenario. You write an initialization function… </li></ul><ul><li>function init(){ </li></ul><ul><li>// code to initialize main menu </li></ul><ul><li>}; </li></ul><ul><li>…then you realize you need another one… </li></ul><ul><li>function init(){ </li></ul><ul><li>// code to initialize player </li></ul><ul><li>}; </li></ul><ul><li>…but you can’t have two init() functions! </li></ul>
  45. 45. 9. Namespacing <ul><li>So you rename them… </li></ul><ul><li>function init MainMenu (){ </li></ul><ul><li>// code to initialize main menu </li></ul><ul><li>}; </li></ul><ul><li>function init Player (){ </li></ul><ul><li>// code to initialize player </li></ul><ul><li>}; </li></ul><ul><li>… and your code suddenly gets more difficult </li></ul><ul><li>to read and maintain. What to do? </li></ul>
  46. 46. 9. Namespacing <ul><li>Add Structure! </li></ul><ul><li>Here are the same function declarations, but namespaced… </li></ul><ul><li>var mainMenu = { </li></ul><ul><li>init:function(){…} </li></ul><ul><li>}; </li></ul><ul><li>var player = { </li></ul><ul><li>init:function(){…} </li></ul><ul><li>} </li></ul><ul><li>… which then get called like this… </li></ul><ul><li>mainMenu.init(); </li></ul><ul><li>player.init(); </li></ul>
  47. 47. <ul><li>Build it once, then copy it </li></ul><ul><li>a thousand times. </li></ul>10. Object Instantiation
  48. 48. <ul><li>Procedural JavaScript is fine, until you get into the </li></ul><ul><li>following situation… </li></ul><ul><li>var slideShow, firstSlide; </li></ul><ul><li>function initSlideShow(slideShowId){ </li></ul><ul><li>slideShow = document.getElementById(slideShowId); </li></ul><ul><li>firstSlide = slideShow.getElementsByTagName(&quot;li&quot;)[0]; </li></ul><ul><li>//500 lines of code </li></ul><ul><li>}; </li></ul><ul><li>alert( firstSlide ); </li></ul><ul><li>… what happens if you want two slideshows in </li></ul><ul><li>the same page? Where do you store the second </li></ul><ul><li>slideshow’s “first slide” element? </li></ul>10. Object Instantiation
  49. 49. <ul><li>To store multiple “first slide” elements you’d use an array… </li></ul><ul><li>var slideShow, firstSlide=[]; </li></ul><ul><li>function initSlideShow(slideShowId){ </li></ul><ul><li>slideShow = document.getElementById(slideShowId); </li></ul><ul><li>firstSlide.push(slideShow.getElementsByTagName(&quot;li&quot;)[0]); </li></ul><ul><li>//500 lines of code </li></ul><ul><li>}; </li></ul><ul><li>initSlideShow(&quot;main&quot;); </li></ul><ul><li>initSlideShow(&quot;second&quot;); </li></ul><ul><li>… and you’d read the value like this… </li></ul><ul><li>alert( firstSlide[1] ); </li></ul><ul><li>… meaning you have to know what ‘1’ represents. </li></ul>10. Object Instantiation
  50. 50. <ul><li>Or you could do something like this… </li></ul><ul><li>var NURUN = {widgets:{}}; </li></ul><ul><li>NURUN.widgets.SlideShow = function(slideShowId){ </li></ul><ul><li>this.slideShow = document.getElementById(slideShowId); </li></ul><ul><li>this.firstSlide = slideShow.getElementsByTagName(&quot;li&quot;)[0]; </li></ul><ul><li>//500 lines of code </li></ul><ul><li>} </li></ul><ul><li>var mainSlideShow = new NURUN.widgets.SlideShow(&quot;main&quot;); </li></ul><ul><li>alert( mainSlideShow.firstSlide ); </li></ul><ul><li>var secondSlideShow = new NURUN.widgets.SlideShow(&quot;second&quot;); </li></ul><ul><li>alert( secondSlideShow.firstSlide ); </li></ul>10. Object Instantiation
  51. 51. Thank You!
  52. 52. References <ul><li>Document Object Model ( http:// en.wikipedia.org/wiki/Document_Object_Model ) </li></ul><ul><li>Classical Inheritance in JavaScript ( http:// javascript.crockford.com/inheritance.html ) </li></ul><ul><li>The World's Most Misunderstood Programming Language ( http:// javascript.crockford.com/javascript.html ) </li></ul>
  53. 53. Resources <ul><li>W3C DOM ( http://www.w3.org/DOM/ ) </li></ul><ul><li>The World's Most Misunderstood Programming Language by Douglas Crockford ( http:// javascript.crockford.com/javascript.html ) </li></ul><ul><li>A Survey of the JavaScript Programming Language by Douglas Crockford ( http:// javascript.crockford.com/survey.html ) </li></ul><ul><li>Yahoo! User Interface Library (YUI) ( http://developer.yahoo.com/yui/ ) </li></ul><ul><li>JavaScript: The Definitive Guide by David Flanagan ( http://www.amazon.com/exec/obidos/ASIN/0596101996 ) </li></ul>

×