• Choose a category
• All
• Classic-Fiction

♦ Many languages support JSON format: Many Web languages now offer direct support for JSON. The most important of these is PHP, which is frequently used with JavaScript in AJAX applications.

♦ JSON is more compact than XML: Another data format called XML is frequently used to transmit complex data. However, JSON is more compact and less “wordy” than XML.

♦ JavaScript can read JSON natively: Some kinds of data need to be translated before they can be used. As soon as your JavaScript program has access to JSON data, it can be used directly.

You might wonder whether you can embed methods in JSON objects. The answer is yes, but this isn’t usually done when you’re using JSON to transport information. In minibook VII about AJAX, you see that methods are often added to JSON objects to serve as callback functions, but that usage won’t make sense until you learn more about events.

Chapter 5: Talking to the Page

In This Chapter

Introducing the Document Object Model

Responding to form events

Connecting a button to a function

Retrieving data from text fields

Changing text in text fields

Sending data to the page

Working with other text-related form elements

JavaScript is fun and all, but it lives in Web browsers for a reason: to let you change Web pages. The best thing about JavaScript is how it helps you control the page. You can use JavaScript to read useful information from the user and to change the page on the fly.

In the first few chapters of this minibook, I concentrate on JavaScript without worrying about the HTML. The HTML code in those programs was unimportant, so I didn’t include it in the code listings. This chapter is about how to integrate code with HTML, so now I incorporate the HTML as well as the JavaScript segments. Sometimes I still print code in separate blocks, so (as always) try to look at the code in its natural habitat, through your browser.

Understanding the Document Object Model

JavaScript programs usually live in the context of a Web page. The contents of the page are available to the JavaScript programs through a mechanism called the Document Object Model (DOM).

The DOM is a special set of complex variables that encapsulates the entire contents of the Web page. You can use JavaScript to read from the DOM and determine the status of an element. You can also modify a DOM variable and change the page from within JavaScript code.

Navigating the DOM

The easiest way to get a feel for the DOM is to load a page in Firefox and look at the Firebug window’s DOM tab. I do just that in Figure 5-1.

Figure 5-1: Even a very simple page has a complex DOM.

When you look over the DOM of a simple page, you can easily get overwhelmed. You’ll see a lot of variables listed. Technically, these variables are all elements of a special object called window. The window object has a huge number of subobjects, all listed in the DOM view. Table 5-1 describes a few important window variables.

Table 5-1 Primary DOM Objects

Variable

Description

Notes

document

Represents XHTML page

Most commonly scripted element

location

Describes current URL

Change location.href to move to a new page

history

A list of recently visited pages

Access this to view previous pages

status

The browser status bar

Change this to set a message in the status bar

Changing DOM properties with Firebug

To illustrate the power of the DOM, try this experiment in Firefox:

1. Load any page.

It doesn’t matter what page you work with. For this example, I use simple.html, a very basic page with only an

header.

2. Enable the Firebug extension.

You can play with the DOM in many ways, but the Firebug extension is one of the easiest and most powerful tools for experimentation.

3. Enable the DOM tab.

You see a list of all the top-level variables.

4. Scroll down until you see the status element.

When you find the status element, double-click it.

5. Type a message to