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>

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

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.

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

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");

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(){

}

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;

Traditionally, event assignment is a one to one relationship, e.g.:

}

}

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:

}

}

JavaScript libraries such as the Yahoo! User Interface (YUI) library have overcome this problem. With YUI, the previous code example becomes:

}

}

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

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

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 )

Scripting The Dom

0 comments

Notes on slide 1

9 Favorites