Scripting The Dom

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>

</head>
<body>

</body>
</html>

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

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

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.

The object representing your actual document is the document object (duh!). It contains about 144 members.

NOTE
In accessing members of the document object,
the reference to the parent ( window ) object can be skipped.

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>

</body>
</html>
What will this code do?

5. JavaScript
<html>
<head>
<script>
</script>
</head>
<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

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)}("hello world");

The previous example could be placed in a function, and
called only when the body element becomes available.
<html>
<head>
<script>
function getBodyNodeName(){
}
window.onload = getBodyNodeName;
</script>
</head>
<body>

JavaScript can also works non-linearly
through the event model
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

Traditionally, event assignment is a one to one relationship, e.g.:
function helloWorld(){
alert("Hello World");
}
function goodbyeCruelWorld(){
alert("Goodbye Cruel World");
}
window.onload = helloWorld;
window.onload = goodbyeCruelWorld;

JavaScript libraries such as the Yahoo! User Interface (YUI) library
have overcome this problem. With YUI, the previous
code example becomes:
}
}
YAHOO.util.Event.addListener(window, "load", helloWorld);
YAHOO.util.Event.addListener(window, "load", goodbyeCruelWorld);

JavaScript libraries such as the Yahoo! User Interface (YUI) library have overcome this problem. With YUI, the previous code example becomes:
}
}
YAHOO.util.Event.addListener(window, "load", helloWorld);
YAHOO.util.Event.addListener(window, "load", goodbyeCruelWorld);

Event handlers such as onmouseover were traditionally assigned like so:
<a href="http://www.nurun.com/" onmouseover="highlight();" >Nurun</a>
<a href="http://www.google.com/" onmouseover="highlight();" >Google</a>
<a href="http://www.yahoo.com/" onmouseover="highlight();" >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)

The preferred method of assigning event handlers is as follows:
<script>
function assignHandlers(){
var lnks = YAHOO.util.Dom.getElementsByClassName("external");
for(var i=0; i<lnks.length; i++){
YAHOO.util.Event.addListener(lnks[i], "mouseover", highlight);
}
}
YAHOO.util.Event.addListener(window, "load", assignHandlers);
</script>
<a href="http://www.nurun.com/" class="external" >Nurun</a>
<a href="http://www.google.com/" class="external" >Google</a>
<a href="http://www.yahoo.com/" class="external" >Yahoo</a>
...

Or…
<script>
function assignHandlers(){
var lnks = document.getElementsByTagName("a");
for(var i=0; i<lnks.length; i++){
if(lnks[i].href.substring(0, 7) == "http://"){
YAHOO.util.Event.addListener(lnks[i], "mouseover", highlight);
}
}
}
YAHOO.util.Event.addListener(window, "load", assignHandlers);
</script>
<a href="http://www.nurun.com/">Nurun</a>
<a href="http://www.google.com/">Google</a>
<a href="http://www.yahoo.com/">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, "load", 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("li")[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?

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("li")[0]);
//500 lines of code
};
initSlideShow("main");
initSlideShow("second");
… and you’d read the value like this…
alert( firstSlide[1] );
… meaning you have to know what ‘1’ represents.

Or you could do something like this…
var NURUN = {widgets:{}};
NURUN.widgets.SlideShow = function(slideShowId){
this.slideShow = document.getElementById(slideShowId);
this.firstSlide = slideShow.getElementsByTagName("li")[0];
//500 lines of code
}
var mainSlideShow = new NURUN.widgets.SlideShow("main");
alert( mainSlideShow.firstSlide );
var secondSlideShow = new NURUN.widgets.SlideShow("second");
alert( secondSlideShow.firstSlide );

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 )

http://onwebdev.blogspot.com	20
http://www.slideshare.net	3
http://knaufblog.pl	1
http://reestols.blogspot.com	1
http://arapehlivanian.com	1
http://onwebdev.blogspot.in	1

Scripting The Dom

by Ara Pehlivanian on May 25, 2007

Accessibility

Categories

Tags

Upload Details

Usage Rights

6 Embeds 27

Statistics

Scripting The Dom — Presentation Transcript