• Save
Scripting The Dom
Upcoming SlideShare
Loading in...5
×
 

Scripting The Dom

on

  • 7,555 views

A presentation on scripting the DOM

A presentation on scripting the DOM

Statistics

Views

Total Views
7,555
Views on SlideShare
7,506
Embed Views
49

Actions

Likes
12
Downloads
1
Comments
0

10 Embeds 49

http://onwebdev.blogspot.com 36
http://www.slideshare.net 3
http://www.linkedin.com 2
http://onwebdev.blogspot.com.es 2
http://onwebdev.blogspot.mx 1
http://onwebdev.blogspot.sk 1
http://onwebdev.blogspot.in 1
http://arapehlivanian.com 1
http://reestols.blogspot.com 1
http://knaufblog.pl 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Scripting The Dom Scripting The Dom Presentation Transcript

  • Scripting the DOM Ara Pehlivanian May 26, 2009 Québec
  • 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
    • “ 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
    • 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
  • 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
    • 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
  • 2. The window object
    • The highest level object, the root if you will, is the window object. It contains about 98 members.
  • 2. The window object Members of the window object are accessed by either dot or subscript notation
  • 2. The window object
    • For example:
    • The innerWidth property can be accessed either like this…
    alert( window.innerWidth ); … or like this… alert( window['innerWidth'] );
  • 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.
  • 3. The document object
    • The object representing your actual document is the document object (duh!). It contains about 144 members.
  • 3. The document object
    • NOTE
    • In accessing members of the document object,
    • the reference to the parent ( window ) object can be skipped.
  • 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'] );
    • The body object is where your
    • visible content is found.
    4. The body object
  • 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.
  • 4. The body object
    • NOTE
    • The reference to the document object
    • cannot be skipped when referring
    • to the body object
  • 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 );
  • How do you script the DOM
    • Now that you know a bit about
    • the DOM, what about
    • the language that lets you script it?
  • 5. JavaScript
    • JavaScript is an interpreted programming language
    • that runs in the browser allowing
    • you to interact with and manipulate
    • the DOM.
  • 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
  • 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.
  • 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?
  • 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?
  • 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?
    • JavaScript functions allow code to
    • be executed only when needed
    6. JavaScript Functions
  • 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;);
  • 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>
    • JavaScript can also works non-linearly
    • through the event model
    7. JavaScript Events
  • 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
  • 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?
  • 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?
  • 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?
  • 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?
  • 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?
  • 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)
  • 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>
    • ...
  • 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>
    • ...
    • JavaScript allows the creation of
    • custom objects.
    8. Custom Objects
  • 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.
  • 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){
    • }
    • }
    • }
    • }
  • 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){…};
    • namespacing.futureProof()
    • namespacing.organize();
    9. Namespacing
  • 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)
  • 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!
  • 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?
  • 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();
    • Build it once, then copy it
    • a thousand times.
    10. Object Instantiation
    • 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
    • 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
    • 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
  • Thank You!
  • 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 )
  • 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 )