Examples for Chapter 14
We provide the source code for some of the simple examples for you to cut and paste, as well as complete code for the two major examples in this chapter.
In the book, we only describe JavaScript and the DOM as they are defined by the relevant W3C and ECMA standards. Internet Explorer does not conform to those standards, but uses its own non-standard mechanism for dealing with events. (This remains true in Explorer 8, despite its claims to comply with Web standards.) We suggest that you only use browsers that comply with standards, unless you have no alternative.
p. 549, Widest Image (JavaScript)
We have put the code shown on p. 549 into the body of a listener for the window.onload event, added a call to alert to display the result and wrapped the whole thing in a script element. If you paste this into the head of a document that contains several images of different widths, the width of the widest will be displayed after the page has loaded – except in Internet Explorer (for the reason noted above).
<script type="text/javascript" charset="utf-8">
window.onload = function() {
var max_width = 0
var all_images = document.getElementsByTagName("img")
for (var i = 0; i < all_images.length; i = i+1)
if (all_images[i].width > max_width)
max_width = all_images[i].width
alert("maximum is " + max_width)
}
</script>
p. 557, Appending a Heading
This code is not much use on its own, but you may find it helpful when doing one of the exercises for this chapter. To test it, you will have to add it to a document in the way exemplified by the preceding example. We will leave that to you this time.
var h1 = document.createElement("h1")
h1.appendChild(document.createTextNode("Notes"))
var body = document.getElementsByTagName("body")[0]
body.appendChild(h1)
p. 558ff, Style Switcher
The XHTML file we have supplied here has the styles and scripts embedded in it. Normally, we would use external style sheet and script files, but embedding them in this way makes it more convenient for you to download. As a small exercise, you can extract the CSS and script into their own files after you have downloaded the combined document.
You probably won't have the Trajan Pro font used for the fancy style on your system, so to see the full effect you should edit the style sheet rule for body.fancy to use an appropriately fancy font that you do have installed.
Experiment with adding extra markup and more elaborate style rules. As a further exercise, consider how you would arrange for some styles to stay the same in both plain and fancy versions, while others changed.
As before, this won't work in Internet Explorer.
Download XHTML file DMM3e-14-1.html [2.8kB]
p. 568ff, Geological Slide Viewer
To avoid possible copyright issues and keep the size of the downloaded files small, we have replaced the actual movie of a geological thin-section slide used in the illustrations in the book and the working example under Chapter 12 with a whimsical vector animation of our own. This in no way affects the operation of the player. The Zip archive contains the ActionScript for the GeoPlayer class, as described in the book (with some small embellishments as noted on page 580) in GeoPlayer.as and a Flash document, DMM3e-14-2.fla. After downloading, extract the files from the archive (it should be adequate to double-click the .zip file). You should then have a directory called DMM3e-14-2 containing the two files. If you have Flash CS3 or higher, you will be able to open the FLA document and export a working player as a Flash movie. To make changes to the code, you can edit GeoPlayer.as using any text editor. Don't change the name of this file unless you know what you are doing.