Online Book Reader

Home Category

AJAX In Action [30]

By Root 3936 0
user interface as users work, to provide feedback on their actions and progress. This could range from altering the label or color of a single element, through popping up a temporary dialog, to replacing large parts of the application screen with an entirely new set of widgets. By far the most usual is to construct a DOM tree by feeding the browser with declarative HTML (in other words, writing an HTML web page).

The document that we showed in listing 2.2 and figure 2.3 is rather large and complex. Let’s start our DOM manipulating career with a small step. Suppose that we want to show a friendly greeting to the user. When the page first loads, we don’t know his name, so we want to be able to modify the structure of the page to add his name in later, possibly to manipulate the DOM nodes programmatically. Listing 2.3 shows the initial HTML markup of this simple page.

Listing 2.3 Ajax “hello” page

href='hello.css' />

b Link to stylesheet

c

Link to JavaScript

hello

d

Empty element

We have added references to two external resources: a Cascading Style Sheet b and a file containing some JavaScript code c. We have also declared an empty

element with an ID d, into which we can programmatically add further elements.

Let’s look at the resources that we’ve linked to. The stylesheet defines some simple stylings for differentiating between different categories of item in our list by modifying the font and color (listing 2.4).

Listing 2.4 hello.css

.declared{

color: red;

font-family: arial;

font-weight: normal;

Licensed to jonathan zheng

48

CHAPTER 2

First steps with Ajax

font-size: 16px;

}

.programmed{

color: blue;

font-family: helvetica;

font-weight: bold;

font-size: 10px;

}

We define two styles, which describe the origin of our DOM nodes. (The names of the styles are arbitrary. We called them that to keep the example easy to understand, but we could have just as easily called them fred and jim.) Neither of these style classes is used in the HTML, but we will apply them to elements programmatically. Listing 2.5 shows the JavaScript to accompany the web page in listing 2.4. When the document is loaded, we will programmatically style an existing node and create some more DOM elements programmatically. Listing 2.5 hello.js

window.onload=function(){

var hello=document.getElementById('hello');

Find element by ID

hello.className='declared';

var empty=document.getElementById('empty');

addNode(empty,"reader of");

addNode(empty,"Ajax in Action!");

var children=empty.childNodes;

for (var i=0;ichildren[i].className='programmed';

}

empty.style.border='solid green 2px';

Style node

empty.style.width="200px";

directly

}

function addNode(el,text){

var childEl=document.createElement("div");

Create new element

el.appendChild(childEl);

var txtNode=document.createTextNode(text);

Create text element

childEl.appendChild(txtNode);

}

The JavaScript code is a bit more involved than the HTML or the stylesheet. The entry point for the code is the window.onload() function, which will be called programmatically once the entire page has been loaded. At this point, the DOM tree Licensed to jonathan zheng

Organizing the view using the DOM

49

has been built, and we can begin to work with it. Listing 2.5 makes use of several DOM manipulation methods, to alter attributes of the DOM nodes, show and hide nodes, and even create completely new nodes on the fly. We won’t cover every DOM manipulation method here—have a look at our resources section for that—

but we’ll walk through some of the more useful ones in the next few sections. 2.4.2 Finding a DOM node

The first thing that we need to do in order to work on a DOM with JavaScript is to find the elements that we want to change. As mentioned earlier, all that we are given to start with is a reference to the root node,

®Online Book Reader