HTML, XHTML and CSS All-In-One for Dummies - Andy Harris [166]
Writing JavaScript code to change colors
The page shown in Figure 5-3 is pretty simple, but it has a few features not found in Chapters 1 through 4 of this minibook.
♦ It has no CSS. A form of CSS is dynamically created through the code.
♦ The script is in the body. I can’t place this particular script in the header because it refers to the body.
When the browser first sees the script, there must be a body for the text to change. If I put the script in the head, no body exists when the browser reads the code, so it gets confused. If I place the script in the body, there is a body, so the script can change it. (It’s really okay if you don’t get this discussion. This example is probably the only time you’ll see this trick because I show a better way in the next example.)
♦ Use a DOM reference to change the style colors. That long “trail of breadcrumbs” syntax takes you all the way from the document through the body to the style and finally the color. It’s tedious but thorough.
♦ Set the foreground color to white. You can change the color property to any valid CSS color value (a color name or a hex value). It’s just like CSS, because you are affecting the CSS.
♦ Set the background color to blue. Again, this adjustment is just like setting CSS.
Managing Button Events
Of course, there’s no good reason to write code like blue.html, which I discuss in the section “Harnessing the DOM through JavaScript,” earlier in this chapter. You will find that it’s just as easy to build CSS as it is to write JavaScript. The advantage comes when you use the DOM dynamically to change the page’s behavior after it has finished loading.
Figure 5-4 shows a page called “backgroundColors.html”.
Figure 5-4: The page is white. It has two buttons on it. I’ve gotta click Blue.
The page is set up with the default white background color. It has two buttons on it, which should change the body’s background color. Click the Blue button, and you see that it works, as verified in Figure 5-5.
Figure 5-5:
It turned blue! Joy!
Some really exciting things just happened.
♦ The page has a form. For more information on form elements, refer to Book I, Chapter 7.
♦ The button does something. Plain-old XHTML forms don’t really do anything. You’ve got to write some kind of programming code to accomplish a task. This program does it.
♦ The page has a setColor() function. The page has a function that takes a color name and applies it to the background style.
♦ Both buttons pass information to setColor. Both of the buttons call the setColor() function, but they each pass a different color value. That’s how the program knows what color to use when changing the background.
Take a look at the code:
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
Click a button to change the color
Most Web pages actually treat the XHTML page as the user interface and the JavaScript as the event-manipulation code that goes underneath. It makes sense, then, to look at the HTML code that acts as the playground first:
♦ It contains a form.