Scripting The Dom

  • 4,339 views
Uploaded on

A presentation on scripting the DOM

A presentation on scripting the DOM

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,339
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
1
Comments
0
Likes
12

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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