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:
Object | Description |
---|---|
document | This object represents the current Web page's body. With this object, you can access all the elements in a Web page, such as links, images, anchors, and so on. |
history | This object has a record of what sites the Web browser has been to before opening the current page. Using the methods of this object, you can move backward and forward though the history list. |
location | This object holds information about the location of the current Web page, including its URL, the domain name, the path, the server port, and so on. |
navigator | This object actually refers to the Web browser itself. Using this object, you can determine the type of browser in use. |
window | This object refers to the current browser window and provides many powerful methods. In Internet Explorer, you use the event subobject of this object to handle events, as we'll see at the end of the chapter. |
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.
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:
Method | Description |
---|---|
document.write | Writes to the body of the current Web page |
document.writeln | Writes to the body of the current Web page, and ends the text with a carriage return |
history.go | Makes the browser navigate to a particular location in the browser's history list |
window.alert | Makes the browser display an alert dialog box |
window.open | Makes the browser open a new browser window, possibly displaying a new document |
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:
Property | Description |
---|---|
document.bgcolor | Holds the background color of the current page. |
document.fgcolor | Holds the foreground (that is, the default text) color of the current page. |
document.lastmodified | Holds the date that the page was last modified (although many documents do not provide this information). |
document.title | Holds the title of the current page (which appears in the browser's title bar). |
navigator.appName | Holds the actual name of the browser, which you can use to determine what browser the user is using. We'll use this property at the end of the chapter to distinguish between Internet Explorer and Netscape. |
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.
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.)
Event | Description |
---|---|
onBlur | Happens when an element loses the input focus. (The element with the focus is the one to which keystrokes are sent.) |
onChange | Happens when data in an HTML control changes. (HTML controls include text fields, buttons, lists, and so on.) |
onClick | Happens when an element is clicked. |
onDblClick | Happens when an element is double-clicked. |
onError | Happens when an error has occurred while executing your code. |
onFocus | Happens when an element gets the focus. (The element with the focus is the one to which keystrokes are sent.) |
onKeyDown | Happens when a key is pressed. |
onKeyPress | Happens when a key is pressed and the struck key's code is available to be read. |
onKeyUp | Happens when a key is released. |
onLoad | Happens when the page first loads in the browser. |
onMouseDown | Happens when a mouse button is pressed. |
onMouseMove | Happens when the mouse moves. |
onMouseOut | Happens when the mouse leaves a visible HTML element. |
onMouseOver | Happens when the mouse cursor moves over an element. |
onMouseUp | Happens when a mouse button is released. |
onMove | Happens when an element is moved, either by code or by the user. |
onReset | Happens when the user clicks the Reset button in an HTML form. |
onResize | Happens when code or the user resizes an element or page. |
onSelect | Happens when the user makes a selection. |
onSubmit | Happens when the user clicks the Submit button in an HTML form. |
onUnload | Happens when the browser unloads a page. |
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.