JavaScript Is Object-Oriented

JavaScript is an object-oriented language. The term object-oriented should not make you nervous because, for us, object-oriented programming will be a lot easier. For our purposes, object-oriented programming just means that JavaScript makes available objects that give us access to some aspect of the browser or document.

For example, we already have used the document object, one of the most powerful JavaScript objects, in this chapter. That object refers to the body of the Web page in the browser, which means that with this object, you have access to the HTML in the page. In the previous example, I used the writeln (which stands for "write line") method of the document object to write Welcome to JavaScript! like this:

<SCRIPT LANGUAGE="JavaScript">
<!--
    document.writeln("Welcome to JavaScript!")
//-->
</SCRIPT>

You can use methods such as writeln to have an object perform some action, such as writing to the Web page. Other methods enable you to force the browser to navigate to a new page, or send data back to scripts on the server, and so on.

The objects that you already have access to in JavaScript give you a great deal of power—for example, we'll use the document object to access XML documents in the next chapter. Here's an overview of some of the most popular JavaScript objects and what they're all about:

There are many more objects in JavaScript, and you can define your own objects—see the JavaScript documentation for details. When you want to create your own objects, you first define a class, which you can consider the type of the object. Using the JavaScript new operator, you can create objects from classes; we won't create classes here, but we'll use the new operator discussed in the later section, "Creating Objects in JavaScript," to create objects in the next chapter.

You need to know about two aspects of objects to be able to get anywhere: methods, which we've already seen, and properties.

Using Object Properties and Methods in JavaScript

JavaScript programming centers on objects, to a large extent. We've already seen the document object and learned that one way to use that object is to use methods such as writeln to indicate you want to write to a Web page. To use a method, you use the object's name, followed by a dot (.), followed by the method name, such as document.writeln. Here are a few examples of methods:

Hundreds of such methods are available in JavaScript, and they enable you to work with a browser as it's running. In addition to using methods to cause the browser to perform some action, you can also read and change the settings in the JavaScript objects using properties. For example, the document.fgcolor property holds the color of text in the current Web page; by changing the document.fgcolor property, you can change the color of that text.

Here are some examples of properties, including the objects they belong to:

Using object methods and properties, you have access to what's going on in a Web page, and you have complete programmatic control over the browser in many areas. We'll be putting methods and properties to work in this chapter and the next two chapters.

We've taken a look at the idea of methods and properties, but there's one more concept to cover before getting the actual programming details—using events in JavaScript. That topic is discussed next.

Using Events in JavaScript

When you load an XML document in a browser, the browser can keep track of the success or failure of the operation. When the user clicks a button in a Web page or uses the mouse, the browser keeps track of that as well. How does the browser inform your JavaScript code what's going on? It uses events.

For example, when the user clicks a Web page, a mouseDown event occurs. To handle that event in your code, you can connect code to that event. Most HTML tags now support events using attributes such as onMouseDown that you use to connect events to JavaScript code. Here's an example. In this case, when the user clicks the Web page, a mouseDown event occurs. Using the onMouseDown attribute, I can execute JavaScript code to perform some action, such as turning the background of the Web page green. (This example works only in Internet Explorer—you have to add a little additional code to make it work in Netscape, as we'll see at the end of this chapter.)

<HTML>
    <HEAD>
        <TITLE>
            Using JavaScript Events
        </TITLE>
    </HEAD>

    <BODY onMouseDown="document.bgColor='green'">

        <CENTER>
            <H1>
                Click anywhere to turn this page green!
            </H1>
        </CENTER>

    </BODY>

</HTML>

As you can see, when the user clicks the Web page, the code document.bgColor='green' is executed, assigning a value of "green" to the document.bgColor property. You can see this page at work in Figure 6.2.

This example is a very simple one because the JavaScript code is in the <BODY> element itself. For longer code, you'll usually store the code in the <SCRIPT> element instead and then call that code from elements such as <BODY>. We'll see how that works in the section "Creating Functions in JavaScript," later in this chapter.

A great number of events are available. Table 6.1 shows the commonly used events. (Note that support for these attributes varies by browser and by HTML tag.)

You use events to handle user and browser actions in real-time in your code, and dozens of events are available. These events are supported by the various HTML tags supported by the browser. You can see which HTML tags support what event attributes in Table 6.3 for Internet Explorer and Table 6.4 for Netscape, later in this chapter.

This overview gives some indication of how powerful JavaScript is. It's now time to turn to the details of writing code in JavaScript so that we can put it to work in the next two chapters.