Since you’ve picked up this book, there’s a pretty good chance that you’re already familiar with using the World Wide Web and have at least a basic understanding of writing web pages in some variant of HTML.
HTML (Hypertext Markup Language) is not a programming language but (as the name indicates) a markup language; we can use it to mark parts of our page to indicate to the browser that these parts should be shown in a particular way—bold or italic text, for instance, or as a heading, a list of bullet points, arranged as a table of data, or using many other markup options.
Once written, these pages by their nature are static. They can’t respond to user actions, make decisions, or modify the display of their page elements. The markup they contain will always be interpreted and displayed in the same way whenever the page is visited by a user.
ECMA continues to issue updated versions of the ECMAScript language standard. At the time of writing, ECMAScript 6 is nearing its final version, and in Part VI, “Advanced Topics,” you can read about some of the new language features soon to become available.
As you know from using the World Wide Web, modern websites can do much more; the pages we routinely visit are often far from static. They can contain “live” data, such as share prices or flight arrival times, animated displays with changing colors and fonts, or interactive capabilities such as the ability to click through a gallery of photographs or sort a column of data.
The World Wide Web Consortium (W3C) is an international community that exists to develop open standards to support the long-term growth of the World Wide Web. Its website at http://www.w3.org/ is a vast resource of information and tools relating to web standards.
The term deprecated is applied to software features or practices to indicate that they are best avoided, usually because they have been superseded.
Although still supported to provide backward compatibility, their deprecated status often implies that such features will be removed in the near future.
In this book, we concentrate on the W3C’s DOM Levels 1 and 2 DOM definitions. If you’re interested in the details of the various DOM levels, you can find a good overview at https://developer.mozilla.org/en/DOM_Levels.
The use of early browsers such as Netscape Navigator (any version) and Internet Explorer up to version 5.5 has now virtually disappeared. This book concentrates on more modern browsers that are compatible with DOM Level 1 or better, such as Internet Explorer 9+, Firefox, Google Chrome, Apple Safari, Opera, and Konqueror. You are recommended to upgrade your browser to the latest stable version.
This notation can be extended as many times as necessary to represent any object in the tree. For example
object3, whose parent is
object2, which is itself a child of
Don’t worry if object hierarchy and dot notation don’t seem too clear right now. You’ll be seeing many examples in the course of the book!
These clever capabilities are provided to the user by programs—often known as scripts—operating behind the scenes to manipulate what’s displayed in the browser.
There are two fundamental ways of adding scripts to otherwise static web content:
The European Computer Manufacturers Association (ECMA) became involved, defining ECMAScript, the great-granddaddy of the current language. At the same time, Microsoft introduced jScript, its own version of the language, for use in its Internet Explorer range of browsers.
Thankfully, the World Wide Web Consortium (the W3C) worked hard with the individual browser manufacturers to standardize the way web pages were constructed and manipulated, by means of the Document Object Model (DOM). Level 1 of the new standardized DOM was completed in late 1998, and Level 2 in late 2000.
Don’t worry if you’re not sure what the DOM is or what it does—you learn a lot about it later this hour and through the course of this book.
</script> tags within the HTML:
The examples in this book are all written to validate correctly as HTML5, in which no obligatory attributes are specified for the
<script> element (the
type attribute to your
You’ll also occasionally see
<script> elements having the attribute
A Document Object Model (DOM) is a conceptual way of visualizing a document and its contents.
The browser vendors have incorporated much-improved support for DOM in their most recent versions. At the time of writing, Internet Explorer is shipping in version 11, Netscape Navigator has been reborn as Mozilla Firefox (currently in version 35.0), and other competitors in the market include Opera, Konqueror, Apple’s Safari, and Google’s Chrome and Chromium. All of these offer excellent support for the DOM.
The situation has improved markedly for web developers. Apart from a few irritating quirks, we can now largely forget about writing special code for individual browsers provided that we follow the DOM standards.
Right at the top of the hierarchical tree is the browser
window object. This object is a parent or ancestor to everything else in the DOM representation of your page.
window object has various child objects, some of which are visualized in Figure 1.1. The first child object shown in Figure 1.1, and the one we’ll use most in this book, is the
document object. Any HTML page loaded into the browser creates a
window object always contains the current browser window, so you can refer to
window.document to access the current document. As a shortcut, you can also simply use
document instead of
window.document—this also refers to the current document.
If you have several windows open, or if you are using a frameset, there will be a separate
document object for each window or frame. To refer to one of these documents, you need to use the relevant window name and document name belonging to the window or frame in question.
In practice, you can leave out the
window. part of the statement. Because the
window object is the top of the DOM hierarchy (it’s sometimes referred to as the global object), any methods called without direct reference to their parent object are assumed to belong to
<script>alert("Here is my message");</script>
works just as well.
Figure 1.2 shows the alert generated by the Chrome browser running on Ubuntu Linux. The appearance of the dialog changes in detail depending on the particular browser, operating system, and display options you are using, but it always contains the message along with a single OK button.
The other children of the
window object visible in Figure 1.1 are the
location object (containing details of the URL of the currently loaded page), the
history object (containing details of the browser’s previously visited pages), and the
navigator object (which stores details of the browser type, version, and capabilities). We look in detail at these objects in Hour 4, “DOM Objects and Built-In Objects,” and use them again at intervals throughout the book, but for now let’s concentrate on the
The notation we use to represent objects within the tree uses the dot or period:
As an example, referring to Figure 1.1, the
location object is a child of the
window object, so in the DOM it is referred to like this:
<body> section of your HTML page is represented in the DOM as a child element of the
document object; we would access it like this:
The last item in the sequence can also be, instead of another object, a property or method of the parent object:
For example, let’s suppose that we want to access the
title property of the current document, as specified by the HTML
<title>...</title> tags. We can simply use
Let’s take a look at some of the methods associated with the
document objects. We begin with two methods, each of which provides a means to talk to the user.
Even if you don’t realize it, you’ve seen the results of the
alert method on many occasions. The
window object, you’ll recall, is at the top of the DOM hierarchy, and represents the browser window that’s displaying your page. When you call the
alert() method, the browser pops open a dialog displaying your message, along with an OK button. Here’s an example:
<script>window.alert("Here is my message");</script>
This is our first working example of the dot notation. Here we are calling the
alert() method of the
window object, so our
object.method notation becomes
Notice that the line of text inside the parentheses is contained within quotation marks. These can be single or double quotes, but they must be there, or an error will be produced.
This line of code, when executed in the browser, pops up a dialog like the one in Figure 1.2.
Until the user clicks OK, he is prevented from doing anything else with the page. A dialog that behaves this way is known as a modal dialog.
You can probably guess what the
write method of the document object does, simply from its name. This method, instead of popping up a dialog, writes characters directly into the DOM of the document, as shown in Figure 1.3.
<script>document.write("Here is another message");</script>
You may recall from earlier in the hour that objects in the DOM tree have properties and methods. You saw how to use the
write method of the
document object to output text to the page—now let’s try reading one of the properties of the
document object. We’re going to use the
document.title property, which contains the title as defined in the HTML
<title> element of the page.
Edit hello.html in your text editor, and change the call to the
alert() method the value contained in the
document.title property. The result is shown in Figure 1.4.
The default security settings in some browsers cause them to show a security warning when they are asked to open local content, such as a file on your own computer. If your browser does this, just choose the option that allows the content to be shown.
Some text editor programs might try to add a .txt extension to the filename you specify. Be sure your saved file has the extension .html or the browser will probably not open it correctly.
In the lessons that follow, we’ll build on these fundamental concepts to get into more advanced scripting projects.
A. Most definitely. In fact, the combination of server-side and client-side scripting provides a potent platform, capable of producing powerful applications. Google’s Gmail is a good example.
Q. How many different browsers should I test in?
A. As many as you practically can. Writing standards-compliant code that avoids browser-specific features will go a long way toward making your code run smoothly in different browsers. However, one or two minor differences between browser implementations of certain features are likely to always exist.
titleproperty of the
documentobject. Try rewriting that script to instead output the
document.lastModifiedproperty, which contains the date and time that the web page was last changed. (Be careful—property names are case sensitive. Note the capital M.) See whether you can then modify the code to use
document.write()in place of
alert()to write the property directly into the page, as in Figure 1.3.