• Choose a category
• All
• Classic-Fiction

By Root 1506 0

Note that the form’s action attribute is still empty. You don’t mess with that attribute until you work with the server in Book V.

♦ The form has a fieldset. The input elements need to be inside something, and a fieldset seems like a pretty natural choice.

♦ The page has two buttons. The two buttons on the page are nothing new, but they’ve never done anything before.

♦ The buttons both have onclick attributes. This special attribute can accept one line of JavaScript code. Usually, that line calls a function, as I do in this example.

♦ Each button calls the same function but with a different parameter. Both buttons call changeColor(), but one sends the value “blue” and the other “white”.

♦ Presumably, changeColor changes a color. That’s exactly what it will do. In fact, it changes the background color.

Generally, I write the XHTML code before the script. As you can see, the form provides all kinds of useful information that can help me make the script. Specifically, I need to write a function called changeColor(), and this function should take a color name as a parameter and change the background to the indicated color. With that kind of help, the function is half written!

Embedding quotes within quotes

Take a careful look at the onclick lines in the code in the preceding section. You may not have noticed one important issue:

onclick is an XHTML parameter, and its value must be encased in quotes. The parameter happens to be a function call, which sends a string value. String values must also be in quotes. This setup can become confusing if you use double quotes everywhere because the browser has no way to know the quotes are nested.

onclick = “changeColor(“white”)” />

XHTML thinks the onclick parameter contains the value “changeColor(” and it will have no idea what white”)” is.

Fortunately, JavaScript has an easy fix for this problem. If you want to embed a quote inside another quote, just switch to single quotes. The line is written with the parameter inside single quotes:

onclick = “changeColor(‘white’)” />

Writing the changeColor function

The changeColor() function is pretty easy to write.

It goes in the header area as normal. It’s simply a function accepting one parameter called color. The body’s backgroundColor property is set to color.

I can write JavaScript in the header that refers to the body because the header code is all in a function. The function is read before the body is in place, but it isn’t activated until the user clicks the button. By the time the user activates the code by clicking on the button, there is a body, and there’s no problem.

Managing Text Input and Output

Perhaps the most intriguing application of the DOM is the ability to let the user communicate with the program through the Web page, without all those annoying dialog boxes. Figure 5-6 shows a page with a Web form containing two textboxes and a button.

Figure 5-6:

I’ve typed a name into the top textbox.

When you click the button, something exciting happens, demonstrated by Figure 5-7.

Clearly, form-based input and output is preferable to the constant interruption of dialog boxes.

Introducing event-driven programming

Graphic user interfaces usually use a technique called event-driven programming. The idea is simple.

1. Create a user interface.

In Web pages, the user interface is usually built of XHTML and CSS.

2. Identify events the program should respond to.

If you have a button, users will click it. (If you want to guarantee they click it, put the text “Launch the Missiles” on the button. I don’t know why, but it always works.) Buttons almost always have events. Some other elements do, too.

3. Write a function to respond to each event.

For each event you want to test, write a function that does whatever needs to happen.

4. Get information from form elements.

Now