Chapter 1: Introduction to JavaScript

JavaScript is the premier client-side scripting language used today on the Web. It’s widely used in tasks ranging from the validation of form data to the creation of complex user interfaces. Yet the language has capabilities that many of its users have yet to discover. JavaScript can be used to manipulate the very markup in the documents in which it is contained. As more developers discover its true power, JavaScript is becoming a first class client-side Web technology, ranking alongside (X)HTML, CSS, and XML. As such, it will be a language that any Web designer would be remiss not to master. This chapter serves as a brief introduction to the language and how it is included in Web pages.

Note

JavaScript can also be used outside of Web pages, for example, in Windows Script Host or for application development with Mozilla or Jscript.NET. We primarily focus on client-side JavaScript embedded in Web pages, but the core language is the same no matter where it is used; only the runtime environment (for example, the browser objects discussed in Part II) is different.

First Look at JavaScript

Our first look at JavaScript is the ever-popular “Hello World” example. In this version, we will use JavaScript to write the string "Hello World from JavaScript!" into a simple XHTML transitional document to be displayed.

Note

XHTML is the most recent version of HTML. It reformulates HTML in terms of XML, bringing greater regularity to the language as well as an increased separation of logical structure from the presentational aspects of documents.

<!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" lang="en">
<head>
<title>JavaScript Hello World</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<h1 align="center">First JavaScript</h1>
<hr />
<script type="text/javascript">
  document.write("Hello World from JavaScript!");
</script>
</body>
</html>

Notice how the script is included directly in the markup using the <script> element that encloses the simple one-line script:

document.write("Hello World from JavaScript!");

Using the <script> element allows the browser to differentiate between what is JavaScript and what is (X)HTML markup or regular text. If we type this example in using any standard text editor, we can load it into a JavaScript-aware Web browser such as Internet Explorer, Netscape, Mozilla, Opera, or many others, and we should see the result shown in Figure 1-1.

Figure 1-1: "Hello World from JavaScript" under Internet Explorer

If we wanted to bold the text we could modify the script to output not only some text but also some markup. However, we need to be careful when the world of JavaScript and the world of markup in XHTML, or HTML, intersect—they are two different technologies. For example, consider if we substituted the following <script> block in the preceding document, hoping that it would emphasize the text.

<script type="text/javascript">
<strong>
   document.write("Hello World from JavaScript!");
</strong>
</script>

Doing so should throw an error in our browser window, as shown in Figure 1-2. The reason is that <strong> tags are markup, not JavaScript. Because the browser treats everything enclosed in <script> tags as JavaScript, it naturally throws an error when it encounters something that is out of place.

Figure 1-2: JavaScript error dialog

Note that some browsers unfortunately may not show errors directly on the screen. This is due to the fact that JavaScript errors are so commonplace on the Web that error dialogs became a real nuisance for many users, thus forcing the browser vendors to suppress errors by default. In the case of many Netscape browsers, you can type javascript: in the URL bar to view the JavaScript console. In the case of Mozilla browsers, choose Tools | Web Development, and enable the JavaScript console. Under Internet Explorer, by default the only indication an error has occurred is a small error icon (yellow with an exclamation point) in the lower left-hand corner of the browser’s status bar. Clicking this icon shows a dialog box with error information. In order to have this information displayed automatically, you may have to check “Display a notification about every script error,” which can be found under the Advanced tab of the dialog displayed when selecting Internet Options.

Regardless of whether or not the error was displayed, to output the string properly we could either include the <strong> element directly within the output string, like so,

document.write("<strong>Hello World</strong> from 
<font color='red'>JavaScript</font>!");

or we could surround the output of the <script> element in a <strong> element like this:

<strong>
<script type="text/javascript">
   document.write("Hello World from JavaScript!");
</script>
</strong>

In this case, the <strong> tag happens to surround the output from the JavaScript so it then gets read and is generally bolded by the browser. This example suggests the importance of understanding the intersection of markup and JavaScript. In fact, before learning JavaScript, readers should fully understand the subtleties of correct HTML or, more importantly, XHTML markup. This is not a casual suggestion. Consider first that any JavaScript used within malformed (X)HTML documents may act unpredictably, particularly if the script tries to manipulate markup that is not well formed. Second, consider that many, if not most, scripts will be used to produce markup, so you need to know what you are outputting. In short, a firm understanding of (X)HTML is essential to writing effective scripts. In this book we present all examples in validated XHTML 1.0 Transitional unless otherwise noted. We chose this variant of markup because it balances the strictness of XHTML with the common practices of today’s Web developers.

Tip

Readers looking for more information on correct HTML and XHTML usage should consult the companion book HTML &XHTML: The Complete Reference, Fourth Edition by Thomas Powell (McGraw-Hill/Osborne, 2003).