Design by Elle

{ designer; developer; freelance; }

Review: DOM Scripting

Posted on June 20, 2009 / 1 Comments / Permalink

Dom ScriptingIn DOM Scripting, Jeremy Keith teaches the theory behind the Document Object Model scripting to build powerful and practical functions. Keith starts with a chapter about the history of JavaScript. The chapter that follows covers JavaScript basics and JavaScript syntax. With each further chapter Keith builds on previous learned knowledge to create more advanced functions with easy to follow script examples. Chapter 11 puts everything learned beforehand together using a website case study. Just as Keith starts with review of the past, he finishes with reviewing the present and possible future of JavaScript and Ajax. This last chapter introduces very quickly what Ajax, progressive enhancement and Hijax are.

This is actually the second time I have read this book and I enjoyed reading it even more second time around. Dom Scripting is a must-have book for every web designer/developer that either wants to learn JavaScript from scratch or wants to improve their current JavaScript skills while learning web standards and JavaScript best practices. Throughout the book, Keith continuously emphasises the importance of good DOM scripting to ensure separation of structure, presentation and behaviour to create websites and web applications that degrade gracefully. The progressive enhancement approach means creating a basic version of the website and then use unobtrusive JavaScript and the Document Object Model to enhance it further (and without using inline JavaScript).

DOM Scripting ends with a reference section containing a list of some of the most useful methods and properties provided by the Document Object Model. I think this is a very handy JavaScript reference book to have around.

Dom Scripting: Web Design with JavaScript and the Document Object Model
Author: Jeremy Keith
Publisher: Friend of Ed
ISBN: 1-59059-533-5
Book’s Website: http://domscripting.com

My Summary Notes:

There is so much more to the book than these notes. These are just a few things I wanted to remember:

Convention:

Use underscores for var_name but camel case for methodName

Loops:

var count = 1;
while (count <11) {
    alert (count);
    count++;
}

Something happens within the while loop that will affect the test condition. In this case, we increase the value of count within the while loop. This results in the condition evaluating to false after ten loops. If we didn’t increase the value of the count, the while loop would execute forever.

do {
    Statements;
} while (condition);

Even if the condition evaluates as false on the first loop, the code contained within the loop will be executed at least once.

Functions:

function name(arguments) {
    statements;
}

To create a function that returns a value, use return. For example:

function multiply (num1, num2) {
    var total = num1*num2;
    return total;
}

Variables Scope:

Global variable—can be referenced from everywhere in the script
Local variable—exists only within the function that declared it. Use var keyword within a function to create a local variable.

Node Values:

  • Element nodes have a nodeType value of 1
  • Attribute nodes have a nodeType value of 2
  • Text nodes have a nodeType value of 3

Script Examples:

Example 1
<ul id="purchases">
    <li>…</li>
    <li>…</li>
    <li>…</li>
</ul>

var shopping = document.getElementById("purchases");
var items = shopping.getElementByTagName("*");
alert (items.length);
Example 2

<a href="http://example.com/" onclick="popup(this.href); return false;">example</a>
…but would be even better if all the JavaScript including the event handlers, were contained in an external file.

Example 3

if (!getElementById || !getElementByTagName) return false;
Tests for existence of the methods and if they don’t exist, the rest of the function does not get executed.

Example 4
links[i].onclick=function() {
    showPic(this); // when link is clicked the function is called
    return false; // cancels default action so the link is not followed
}

This creates a function on the fly and by returning a Boolean false value; the browser will act as if the link was not clicked.

Example 5

Simon Willison’s addLoadEvent takes a single argument: the name of the function that you want to execute when the page loads.

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            oldonload();
	    func();
	}
    }
}

Example 6

variable = condition ? if true : if false;

Side Note 1: In HTML documents, nodeName always returns an uppercase value, even if the element is lowercase in the markup.

Side Note 2: Avoid using onkeypress. The onclick event handler is all that is needed, In spite of its name, onclick supports keyboard access perfectly well.

Side Note 3: DOM Core methods are not specific to JavaScript, and they can be used by any programming language with DOM support. They are not just for web pages, either. These methods can be used on documents written in any markup language (XML, for instance).

When using JavaScript and the DOM with (X)HTML files, you have many more properties at your disposal. These properties belong to the HTML-DOM. Examples:

document.getElementByTagName("form") OR document.forms
element.getAttribute("src") OR element.src

HTML-DOM is generally shorter but it is specific to web document—something to bear in mind if you ever find yourself using the DOM with other kinds of documents.

Side Note 4: innerHTML is HTML-specific, a proprietary method and not a web standard. Better to use DOM methods: createElement and AppendChild
Whenever using createElement, it is a good idea to assign the newly created element to a variable. For example:
var para = document.createElement("p");

Example 7
function insertAfter (newElement, targetElement) {
    // get the parentNode and assign it to parent var
    var parent = targetElement.parentNode;
    // find it the target element happens to be the last child 
    if (parent.lastChild == targetElement) { 
        // if true – append the newElement to the parent
        parent.appendChild(newElement);
    // otherwise, the newElement needs to be inserted
    // between target and the next child
    } else {
        parent.insertBefore(newElement, targetElement.nextSibling);
    }
}

Side Note 5: CSS-DOM and getting styles: for example:
element.style.color or element.style.fontFamily
Any style properties that have more than one word become DOM camelCase property.
The style object does not include stylistic information that has been declared in an external style sheet or any styles declared in the head section.

Comments

  1. A useful support tool for JS development is JSLint – which is aimed at hurting your feelings whilst aiming to make sure your JavaScript works nicely + expectantly on all browsers.

    If you use Textmate then its wrapped up in a bundle called JavaScript Tools.tmbundle

    Dr Nic , June 21, 2009

Sorry, comments are closed for this article