AJAX Tutorial: More JavaScript and DOM

JavaScript DOM Exerciste Explanation

This is a JavaScript DOM exercise from Chapter 2 of Microsoft AJAX Library Essentials: JavaScript in ASP.NET AJAX 1.0 Explained.

What Just Happened? Well, what just happened is exactly what happened after the previous exercise, but this time with much more code, as you can see by having a look at the process() function. Although there are many lines of code, the functionality is pretty simple, and it follows a cleaner coding practice that – in theory at least – generates code that is easier to maintain on the long run. Here's the code for your reference:

function process()
{
  // create the <p> element
  oP = document.createElement("p");
  // create the "Hello..." text node
  oHelloText = document.createTextNode
    ("Hello dude! Here's a cool list of colors for you:");
  // add the text node as a child element of <p>
  oP.appendChild(oHelloText);

  // create the <ul> element
  oUl = document.createElement("ul")

  // create the first <ui> element and add a text node to it
  oLiBlack = document.createElement("li");
  oBlackText = document.createTextNode("Black");
  oLiBlack.appendChild(oBlackText);

  // create the second <ui> element and add a text node to it
  oLiOrange = document.createElement("li");
  oOrangeText = document.createTextNode("Orange");
  oLiOrange.appendChild(oOrangeText);

  // create the third <ui> element and add a text node to it
  oLiPink = document.createElement("li");
  oPinkText = document.createTextNode("Pink");
  oLiPink.appendChild(oPinkText);

  // add the <ui> elements as children to the <ul> element
  oUl.appendChild(oLiBlack);
  oUl.appendChild(oLiOrange);
  oUl.appendChild(oLiPink);

  // obtain a reference to the <div> element on the page
  myDiv = document.getElementById("myDivElement");

  // add the <p> and <ul> elements to the <div> element
  myDiv.appendChild(oP);
  myDiv.appendChild(oUl);
}

It’s pretty clear using the DOM to create HTML structures may not always be your best option. However, in more complex projects – such as most real-world ones are – this coding technique can actually make your life easier, for the following reasons:

• It's fairly easy to programmatically create dynamic HTML structures, such as building elements in for loops, because you're not concerned about text formatting but about building the hierarchical structure.
• As a consequence, you don't need, for example, to manually add closing tags. When you add a 'ui' element, the DOM will take care to generate the <ui> tag and an associated closing </ui> tag for you.
• You can treat the nodes as if they were independent nodes, and decide later how to build the hierarchy. Again, the DOM takes care of the implementation details; you just need to tell it what you want.

Note that if you use the View Source feature of your web browser, or if you save the page to disk, you'll see the JavaScript code, rather than its output. If you want to browse the final results as displayed by your browser, you can use the Dom Inspector tool that ships with FireFox, accessible through Tools > Dom Inspector (Ctrl+Shift+I). The following figure shows how Dom Inspector sees the page we’ve just created:

The DOM functions used in this exercise are perhaps the most frequently used, but obviously there are many more – we’ll bore you with some additional theory later in the book. To learn about the insidious details of DOM, including the implementation differences between various web browsers, we recommend that you bookmark the tutorial at http://www.howtocreate.co.uk/tutorials/javascript/dombasics - you’ll find it useful, sooner or later.

Implement the exercise step by step and find detailed explanations in our book, Microsoft AJAX Library Essentials: JavaScript in ASP.NET AJAX 1.0 Explained.