Consider the example that follows:
<!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” >
<head>
<title>DOM Styles - Example 2</title> <style type=”text/css”>
p { text-align: center; } body { color: blue; } </style>
</head> <body>
<p id=”p1” >Some paragraph Text</p> <div>This is some body text</div> <hr />
<script type=”text/javascript”>
document.write(“Number of styleSheets: #” + document.styleSheets.length); var stylesheet = document.styleSheets[0];
// Check to see if we are operating in Internet Explorer if (stylesheet.rules)
{
document.write(“<br />Internet Explorer detected.<br />”);
// Map the standard DOM attributes and methods to the internet explorer // equivalents
stylesheet.cssRules = stylesheet.rules;
stylesheet.insertRule = function(ruleText, ruleIndex) { this.addRule(ruleText, ruleIndex); };
stylesheet.deleteRule = function(ruleIndex) { this.removeRule(ruleIndex); };
}
// The ‘p’ style rule
document.write(“<br /><br /> 1st Style rule (text-Align) value: “ + stylesheet.cssRules[0].style.textAlign);
// The ‘body’ style rule
document.write(“<br /> 2nd Style rule (color) value: “ + stylesheet.cssRules[1].style.color);
alert(“Deleting the ‘body’ color style rule.”); stylesheet.deleteRule(1); </script> </body> </html>
72
Chapter 3
The code in the example first checks to see if a rules[]collection exists, and if so, adds it to the
stylesheets collection as a cssRulesproperty. In addition, you also add the DOM standard insertRule
and deleteRulemethods and map them to the Internet Explorer equivalent methods. You are effectively adding the DOM properties and methods to Internet Explorer to mimic the required DOM Level 2 sup- port. You can then develop against the standard DOM interface and ensure that your web page works in browsers that offer DOM Level 2 support, such as Firefox, as well as in Internet Explorer.
This type of code lends itself to reuse across all your web applications. For this reason, it is recom- mended that you put this reusable code in a script file that can be included and reused in all your web applications. To demonstrate this, the following code shows a revised version of the preceding example code:
<!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” >
<head>
<title>DOM Styles - Example 3</title> <style type=”text/css”>
p { text-align: center; } body { color: blue; } </style>
<script type=”text/javascript” src=”DOMStyles3_Include.js”></script> </head>
<body>
<p id=”p1” >Some paragraph text</p> <div>This is some body text</div> <hr />
<script type=”text/javascript”>
document.write(“Number of styleSheets: #” + document.styleSheets.length); // The ‘p’ style rule
document.write(“<br /><br /> 1st Style rule (text-Align) value: “ + stylesheet.cssRules[0].style.textAlign);
// The ‘body’ style rule
document.write(“<br /> 2nd Style rule (color) value: “ + stylesheet.cssRules[1].style.color);
alert(“Deleting the ‘body’ color style rule.”); stylesheet.deleteRule(1);
</script> </body> </html>
You will notice that the code now contains no logic to determine the browser type and the mapping of functions to DOM-compliant functions if required. The only addition is the line:
<script type=”text/javascript” src=”DOMStyles3_Include.js”></script>
73
which includes a script file to perform the browser-specific checks and mapping. This allows you to concentrate on the code relating to the functionality of your application and not worry about the code required to support multiple browsers. The include file can then be reused across your web applications as shown in the following example:
/************************************************ ** Include script that maps Internet Explorer methods ** to the DOM equivalents
************************************************/ var stylesheet = document.styleSheets[0];
// Check to see if we are operating in Internet Explorer if (stylesheet.rules)
{
// Internet Explorer detected
// Map the standard DOM attributes and methods to the internet explorer // equivalents
stylesheet.cssRules = stylesheet.rules;
stylesheet.insertRule = function(ruleText, ruleIndex) { this.addRule(ruleText, ruleIndex); };
stylesheet.deleteRule = function(ruleIndex) { this.removeRule(ruleIndex); }; }
This script include file can be built upon over time to act as a constantly evolving repository of utility code that saves you time and effort in all future web development applications.
Summar y
This chapter has covered a lot of ground in a very short time, but it has exposed only the surface as far as possibilities go when developing web pages or applications. This is particularly true when dealing with the DOM interfaces and the varied support in different browsers. This itself can warrant an entire book. In this chapter you have:
❑ Covered the early and current development of JavaScript
❑ Examined the basics of the JavaScript language and associated concepts
❑ Learned advanced JavaScript features and how to use them within your web applications ❑ Examined the HTML Document Object Model and its significance to you — the web developer
❑ Examined how to dynamically change rendered HTML documents using the Document Object
Model and JavaScript
The initial development of JavaScript provides insights into why JavaScript is the way it is today and serves to eliminate some confusion around its Java heritage. The basics of the JavaScript language were covered, and although the basics remain fairly consistent across browsers, different JavaScript version support can introduce further complexity and implementation differences. It cannot be stressed enough that when dealing with web pages or applications that can span browsers of different versions, and especially from different vendors, it pays to perform some investigation on the minimum levels of stan- dard support that you need to comply with.
74
As you have seen, although JavaScript is a scripting language, it is extremely powerful, it has object- oriented methods, and it has very dynamic features. These features are often not found in more static languages such as C++, Java, and C#. JavaScript is the language of choice for dynamic web applications, and the current breed of highly interactive web sites rely heavily on JavaScript for their magic.
JavaScript and the Document Object Model go hand in hand when dealing with dynamic web applica- tions. JavaScript provides the engine, while the DOM provides the vehicle. Many web application developers exist without knowing why something works in one particular browser and often resort to such rudimentary techniques as displaying disclaimers on their site that state that the web site will only work in browser version X. Not only does this limit the audience of the site, but it also displays the developer’s inability to deal with cross-browser support and can leave a user feeling disgruntled because of this lack of support. Worse still, errors and unexpected behavior can leave a user feeling very frustrated, and it is unlikely that the user will visit your site again. Obviously, this is not desirable, and you need to determine what is the best way to achieve cross-browser support to address these issues. The DOM and its various standards can give us these answers. Knowledge of the DOM and the various capabilities of each level are important, but they can be complex. This chapter barely scratches the sur- face. Further investigation is recommended if you wish to truly utilize the advantages that the DOM has to offer.
Finally, both JavaScript and the DOM come with a lot of history. The development and progress of both has been fueled by the issues, problems and frustration faced over the years by many web developers trying to achieve what is substantially easier to do today. Both JavaScript and the DOM are the core of dynamic web applications and will act as core components for all future dynamic web content.
75
4
The XMLHttpRequest Object
The XMLHttpRequestobject forms the main basis for most Ajax-style applications. It acts as the main component to facilitate asynchronous requests to the server and to perform server-side pro- cessing without a traditional postback. This is to avoid the traditional postback delay for the user and enhance the user experience dramatically.
There are other less traditional methods to achieve this behavior, but use of the XMLHttpRequest
object is becoming the standard way in which this Ajax style functionality is achieved.
In this chapter, you take a look at:
❑ The XMLHttpRequestobject — what it actually is and its history
❑ Synchronous and asynchronous requests ❑ Dealing with response data from the server
❑ Using web services
The use of these techniques causes a common usage pattern to emerge. So, it stands to reason that developers would want to factor out these common techniques and organize code into a library that they can reuse across many other projects. This would obviously save the time of recoding, redeveloping, and retesting similar functionality in the future, and this is exactly what is done throughout this chapter. At the end of this chapter, you will have the rudimentary basis of a reusable code library that you can carry across to all future projects.