Client-Side Techniques with Smarter JavaScript
30
JavaScript and the Document Object Model
As mentioned in Chapter 1, JavaScript is the heart of AJAX. JavaScript has 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 wasn't meant for building large
powerful applications, but for writing simple scripts to implement (or complement) a web
application's client-side functionality (however, new trends are tending to transform JavaScript
into an enterprise-class language—it remains to be seen how far this will go).
JavaScript is fully supported by the vast majority of web browsers. Although it is possible to
execute JavaScript scripts by themselves, they are usually loaded on the client browsers together
with HTML code that needs their functionality. The fact that the entire JavaScript code must arrive
unaltered at the client is a strength and weakness at the same time, and you need to consider these
aspects before deciding upon a framework for your web solution. 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 DOM interface. The DOM is available with a multitude of
languages and technologies, including JavaScript, Java, PHP, C#, C++, and so on. In this chapter,
you will see how to use the DOM with both JavaScript and PHP. The DOM has the ability to
manipulate (create, modify, parse, search, etc.) XML-like documents, HTML included.
On the client side, you will use the DOM and JavaScript to:
• Manipulate the HTML page while you are working on it
• Read and parse XML documents received from the server
var date = new Date();
var hour = date.getHours();
// demonstrating the if statement
if (hour >= 22 || hour <= 5)
document.write("You should go to sleep.");
else
document.write("Hello, world!");
</script>
</head>
<body>
</body>
</html>
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 tags in there if you want.
We advise you try to write well-formed and valid HTML code when possible. Writing code
compliant to HTML format 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
You can find a useful explanation of the DOCTYPE
element at
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.
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.
You will usually prefer to write the JavaScript code in a separate
.js file that is referenced from
the
.html file. This allows you to keep the HTML code clean and have all the JavaScript code
<body>
I love you!
</body>
</html>
4. In the same folder create a file called jsdom.js, and write this code in the file:
// declaring new variables
var date = new Date();
var hour = date.getHours();
// demonstrating the if statement
if (hour >= 22 || hour <= 5)
document.write("Goodnight, world!");
else
document.write("Hello, world!");
5. Load http://localhost/ajax/foundations/jsdom/jsdom.html in your
web browser, and assuming it's not late enough, expect to see the message as
shown in Figure 2.1 (if it's past 10 PM, the message would be a bit different, but
equally romantic).
Figure 2.1: The Hello World Example with JavaScript and the DOM
What Just Happened?
The code is very simple indeed and hence it doesn't need too many explanations. Here are the
main ideas you need to understand:
Chapter 2
• Because there is no server-side script involved (such as PHP code), you can load
the file in your web browser directly from the disk, locally, instead of accessing it
through an HTTP web server. If you execute the file directly from disk, a web
browser would likely open it automatically using a local address such as
file:///C:/Apache2/htdocs/ajax/foundations/jsdom/jsdom.html.
• When loading an HTML page with JavaScript code from a local location (
file://)
<div> element as placeholder, but you will meet more examples over the course of this book.
Take a look at the following HTML document:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"
<html>
<head>
<title>AJAX Foundations: More JavaScript and DOM</title>
</head>
<body>
Hello Dude! Here's a cool list of colors for you:
<br/>
<ul>
<li>Black</li>
33
Client-Side Techniques with Smarter JavaScript
34
<li>Orange</li>
<li>Pink</li>
</ul>
</body>
</html>
Suppose that you want to have everything in the <ul> element generated dynamically. The typical
way to do this in an AJAX application is to place a named, empty
<div> element in the place
where you want something to be generated dynamically:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"
<html>
</div>
</body>
</html>
Your goals for the next exercise are:
• Access the named
<div> element programmatically from the JavaScript function.
• Having the JavaScript code execute after the HTML template is loaded, so you can
access the
<div> element (no HTML elements are accessible from JavaScript code
that executes referenced from the
<head> element). You will do that by calling
JavaScript code from the
<body> element's onload event.
• Group the JavaScript code in a function for easier code handling.
Chapter 2
Time for Action—Using JavaScript Events and the DOM
1. In the foundations folder that you created in the previous exercise, create a new
folder called
morejsdom.
2. In the morejsdom folder, create a file called morejsdom.html, and add the following
code to it:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"
<html>
<head>
<title>AJAX Foundations: More JavaScript and DOM</title>
<script type="text/javascript" src="morejsdom.js"></script>
</head>
<body onload="process()">
Hello Dude! Here's a cool list of colors for you:
following code snippet:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"
<html>
<head>
<title>AJAX Foundations: More JavaScript and DOM</title>
<script type="text/javascript" src="morejsdom.js"></script>
</head>
<body onload="process()">
Hello Dude! Here's a cool list of colors for you:
<br/>
<div id="myDivElement" />
</body>
</html>
Everything starts by referencing the JavaScript source file using the <script> element. The
JavaScript file contains a function called
process(), which is used as an event-handler function
for the body's
onload event. The onload event fires after the HTML file is fully loaded, so when
the
process() function executes, it has access to the whole HTML structure. Your process()
function starts by creating the HTML code you want to add to the
div element:
function process()
{
// Create the HTML code
var string;
string = "<ul>"
+ "<li>Black</li>"
+ "<li>Orange</li>"
<li>Pink</li>
</ul>
</div>
A DOM document is a hierarchical structure of elements, where each element can have one or
more attributes. In this HTML fragment, the single element with an attribute is
<div>, which has
an attribute called
id with the value myDivElement. The root node that you can access through the
document object is <body>. When implementing the above HTML document, you will end up with
a structure such as the one in the figure below:
Figure 2.3: A Hierarchy of HTML Elements
In Figure 2.3, you see an HTML structure formed of <body>, <div>, <br>, <ul>, and <li>
elements, and four text nodes ("
Hello…", "Black", "Orange", "Pink"). In the next exercise, you will
create this structure using the DOM functions
createElement, createTextNode, and appendChild.
Time for Action—Even More DOM
1. In the foundations folder, create a subfolder called evenmorejsdom.
2. In the evenmorejsdom folder, create a file called evenmorejsdom.html, and add the
following code to it:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"
<html>
<head>
<title>AJAX Foundations: Even More JavaScript and DOM</title>
<script type="text/javascript" src="evenmorejsdom.js"></script>
</head>
37
oLiPink.appendChild(oPink);
// 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 content to the <div> element
myDiv.appendChild(oHello);
myDiv.appendChild(oUl);
}
4. Load evenmoredom.html in a web browser. The result should look like Figure 2.4:
Figure 2.4: Even More JavaScript and DOM
Chapter 2
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. This suggests clearly enough that using the
DOM to create HTML structures may not always be the best option. However, in certain
circumstances it can actually make programming 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 structural elements.
• As a consequence, you don't need, for example, to manually add closing tags. When
csstest folder, create a new file called csstest.html, with
the following contents:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"
<html>
<head>
<title>AJAX Foundations: CSS</title>
<script type="text/javascript" src="csstest.js"></script>
<link href="styles.css" type="text/css" rel="stylesheet"/>
</head>
39
Copyright: Tài liệu đại học ©