[Chapter 1] Introduction to JavaScript

JavaScript is a lightweight interpreted programming language with rudimentary object-oriented capabilities. The general-purpose core of the language has been embedded in Netscape Navigator and other web browsers and embellished for web programming with the addition of objects that represent the web browser window and its contents. This "client-side" version of JavaScript allows "executable content" to be included in web pages--it means that a web page need no longer be static HTML, but can include dynamic programs that interact with the user, control the browser, and dynamically create HTML content.

Syntactically, the core JavaScript language resembles C, C++ and Java, with programming constructs such as the if statement, the while loop, and the && operator. The similarity ends with this syntactic resemblance, however. JavaScript is an untyped language, which means that variables do not have to have a type specified. Objects in JavaScript are more like Perl's associative array than they are like structures in C or objects in C++ or Java. Also, as mentioned, JavaScript is a purely interpreted language, unlike C and C++, which are compiled, and unlike Java, which is compiled to byte-code before being interpreted.

This chapter is a quick overview of JavaScript; it explains what JavaScript can do and also what it can't, and exposes some myths about the language. The chapter demonstrates web programming with some real-world JavaScript examples, explains the many versions of JavaScript, and also addresses security concerns.

1.1 Executable Content: JavaScript in a Web Page

When a web browser is augmented with a JavaScript interpreter, it allows "executable content" to be distributed over the Internet in the form of JavaScript "scripts."[1] Example 1.1 shows a simple JavaScript program, or script, embedded in a web page. When loaded into a JavaScript-enabled browser, it produces the output shown in Figure 1.1.

[1] Currently the only JavaScript-enabled browsers are Netscape Navigator versions 2.0 and 3.0, and Microsoft Internet Explorer version 3.0.

Example 1.1: A Simple JavaScript Program

<HTML>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
document.write("<h2>Table of Factorials</h2>");
for(i =index.html 1, fact = 1; i < 10; i++, fact *= i) {
    document.write(i + "! = " + fact);
    document.write("<br>");
}
</SCRIPT>
</BODY>
</HTML>

Figure 1.1: A web page generated with JavaScript

[Graphic: Figure 1-1]

As you can see in this example, the <SCRIPT> and </SCRIPT> tags are used to embed JavaScript code within an HTML file. We'll learn more about the <SCRIPT> tag in Chapter 10, Client-Side Program Structure. The main feature of JavaScript demonstrated by this example is the use of the document.write() method.[2] This method is used to dynamically output HTML text that will be parsed and displayed by the web browser; we'll encounter it many more times in this book.

[2] "Method" is the object-oriented term for function or procedure; you'll see it used throughout this book.

Besides allowing programmatic control over the content of web pages, as shown in Figure 1.1, JavaScript allows programmatic control over the browser, and also over the content of HTML forms that appear in a web page. We'll learn about these and other capabilities of JavaScript in more detail later in this chapter, and in much more detail later in this book.

Not only can JavaScript control the content of HTML forms, it can also control the behavior of those forms! That is, a JavaScript program might respond in some way when you enter a value in an input field or click on a checkbox in a form. JavaScript can do this by defining "event handlers" for the form--pieces of JavaScript code that are executed when a particular event occurs, such as when the user clicks on a button. Example 1.2 shows the definition of a very simple HTML form that includes an event handler that is executed in response to a button click. Figure 1.2 illustrates the result of clicking the button.

Example 1.2: An HTML Form with a JavaScript Event Handler Defined

<FORM>
<INPUT TYPE="button" 
       VALUE="Click here" 
       onClick="alert('You clicked the button')">
</FORM>

Figure 1.2: The JavaScript response to an event

[Graphic: Figure 1-2]

The onClick attribute shown in Example 1.2 is an HTML extension added by Netscape specifically for client-side JavaScript. All JavaScript event handlers are defined with HTML attributes like this one. The value of the onClick attribute is a string of JavaScript code to be executed when the user clicks the button. In this case, the onClick event handler calls the alert() function. As you can see in Figure 1.2, this function pops up a dialog box to display the specified message.

The examples above highlight only the simplest features of client-side JavaScript. The real power of JavaScript on the client side is that scripts have access to a hierarchy of objects that are based on the content of the web page. If you treat JavaScript as simply a new programming language, you're missing the whole point. What's exciting about JavaScript is the context that this language is embedded in. The interactions between JavaScript code and the web browser and the browser's contents are what matter most. A script can access an array of all hypertext links in a page, for example, and it can also read and write data from and to each of the elements in each of the forms in a page. In Netscape Navigator 3.0, JavaScript can also manipulate the images in a web page, and communicate with the Java applets and plug-ins on the page. Mastering the use of these client-side "document objects" is the real key to using JavaScript effectively in web pages.

1. Introduction to JavaScript