AJAX Tutorial: JavaScript and the Document Object Model (DOM)

What's up?

AJAX Demo explanations

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

JavaScript is the heart of AJAX. JavaScript is a programming language supported by all modern web browsers, with a similar syntax to the good old C language. JavaScript is a parsed language (not compiled), and it has some Object-Oriented Programming (OOP) capabilities. JavaScript was initially designed for writing simple scripts to implement (or complement) a web application's client-side functionality, but powerful frameworks – such as the Microsoft AJAX Library, script.aculo.us, prototype, Dojo, and many others – have been recently developed upon the features introduced by newer versions of the language. A brief history and description of the language can be found at http://en.wikipedia.org/wiki/JavaScript.

Because JavaScript programs are parsed, their code must arrive unaltered at the client for execution. This is a strength and weakness at the same time, and you need to keep it in mind when developing your JavaScript code. You can find very good introductions to JavaScript at the following web links:

Part of JavaScript's power on the client resides in its ability to manipulate the parent HTML document, and it does that through the Document Object Model (DOM) interface. The DOM is a standard that allows for the programmatic representation and manipulation of hierarchical structures such as HTML and XML. It is available with a multitude of languages and technologies, including JavaScript, Java, PHP, C#, C++, and so on.

When developing AJAX applications you need to use JavaScript’s DOM to read, parse, alter and create HTML elements of the web page. To learn more about the DOM, we recommend you check out the following tutorials:

A comprehensive reference of the JavaScript DOM can be found at http://krook.org/jsdom/. The Mozilla reference for the JavaScript DOM is available at http://www.mozilla.org/docs/dom/reference/javascript.html.

In the first example of this chapter, you will use the DOM to write a piece of text on the web page. When adding JavaScript code to an HTML file, one option is to write the JavaScript code in a <script> element within the <body> element. Take the following HTML file for example, which executes a simple JavaScript script when loaded. Notice the document object, which is a default DOM object in JavaScript that represents the HTML page. Here we use its write method to add content to the page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <title>AJAX Tutorial: JavaScript and DOM</title> 
    <script type="text/javascript">
      // declaring new variables var date = new Date(); 
      var hour = date.getHours(); 
      // demonstrating the if statement 
      if (hour >= 22 || hour <= 5) 
        document.write("You should go to sleep."); 
        document.write("Hello, world!"); 

The document.write commands generate output that is added to the <body> element of the page when the script executes. The content that you generate becomes part of the HTML code of the page, so you can add HTML elements in there if you want (ideally you’d avoid creating elements dynamically whenever possible, however).

Writing compliant makrup maximizes the chances that your pages will work fine with most existing and future web browsers. A useful article about following web standards can be found at http://www.w3.org/QA/2002/04/Web-Quality. A good article explaining the document type declaration (DOCTYPE) can be found at http://www.alistapart.com/stories/doctype/. We advise you try to write well-formed and valid HTML code whenever possible. When creating static pages, or pages that are dynamically created on the server, you can check their compliancy using the W3C Markup Validator Service at http://validator.w3.org/. However, the service can’t be used to check pages with elements generated by JavaScript. The validator service, just as web search engines, doesn’t execute the JavaScript code on the page, so it can’t see any content that is generated dynamically.

The debate on standards seems to be an endless one, with one group of people being very passionate about strictly following the standards, while others are just interested in their pages looking good on a certain set of browsers. At the moment of writing, The examples in this book contain valid HTML code, with the exception of a few cases where we broke the rules a little bit in order to make the code easier to understand. A real fact is that very few online websites follow the standards, for various reasons.

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.

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.