JavaScript Ch10 - JavaScript in Web Browsers

What in this chapter:

10.1 The Web Browser Environment

• The Window object that serves as the global object model that forms a text for client-side JavaScript code
• The client-side object hierarchy and the document object model that forms a part of it.
• The event-driven programming model

10.1.1 The Window as Global Execution Context

The Window object is the global object. The Window object defines a number of properties and methods that allow us to manipulate the web browser window. It also defines properties that refer to other important objects such as the document property for the Document object. Finally, the Window has two self-referential properties, window, and self. You can use either of these global variables to refer directly to the Window object.

Since the Window object is the global object in the client-side JavaScript, all global variables are defined as properties of the window. For example, the following two lines of code perform essentially the same function:

var answer = 42; // Declare and initialize a global variable
window.answer = 42; // create a new property of the Window object

10.1.2 The Client-Side Object Hierarchy and the Document Object Model

An object referenced through the current window or through some other Window object may itself refer to other objects. For example, every Document object has forms[] array containing Form objects that represent any HTML forms appearing in the document. To refer to one of these forms, you might write:

 
window.document.forms[0];

parent.frames[0].document.forms[0].elements[3].options[2].text;

The Event-Driven Programming Model

It is perfectly possible to write a static JavaScript program that does not accept user input and does exactly the same thing every time. Sometime this sort of programming is useful. More often, however, we want to write dynamic programs that interact with the user. To do this, we must be able to respond to user input.

In client-side JavaScript, the web browser notifies programs of user input by generating events. There are various types of events, such as keystroke events, mouse motion events, and so on. When an event occurs, the web browser attempts to invoke an appropriate event handler function to respond to the event. Thus, to write dynamic, interactive client-side JavaScript programs, we must define appropriate event handlers and register them with the system, so that the browser can invoke them at appropriate times.

If you are not already accustomed to the event-driven programming model, it can take a little getting used to. In the old model, you wrote a single, monolithic block of code that followed some well-defined flow of control and ran to completion from beginning to end. Event-driven programming stands with this model on its head. In event-driven programming, you write a number of independent (but mutually interacting) event handlers. You do not invoke these handlers directly, but allows the system invoke them at the appropriate times. Since they are triggered by user's inputs, handlers will be invoked at unpredictable, asynchronous times. Must of the time, your program is not running at all, but merely sitting waiting for the system to invoke one of its event handlers.