At face value, this lesson’s script might seem rather simple, but its workings are quite new and rather important. Up until now, the functions you created have been stable—they couldn’t be altered by the user.
This script allows your users to pass information from form elements to the function itself before the function runs.
JavaScript Goodies
124
The following script again shows the full HTML document. (Forms always begin with
<FORM>and end with </FORM>. No surprises here yet, just good old HTML!) Here’s the code:
<HTML>
<HEAD>
<SCRIPT LANGUAGE=”JavaScript”>
function newcolor(color) {
alert(“You Chose “ + color) document.bgColor=color }
</SCRIPT>
</HEAD>
<BODY>
<h3>Select a Background Color</h3>
<FORM>
<INPUT TYPE=”button” VALUE=”Blue” onClick=”newcolor(‘lightblue’)”>
<INPUT TYPE=”button” VALUE=”Pink” onClick=”newcolor(‘pink’)”>
</FORM>
</BODY>
</HTML>
As you can see in Figure 5.3, this script uses form buttons to enable users to choose a back-ground color, either blue or pink.
Figure 5.3
Describing the change in color in a message box.
You can try the script for yourself by clicking Lesson Twenty-Five Script’s Effect in your down-load packet, or see it online at http://www.htmlgoodies.com/JSBook/lesson25effect.
html.
Literals
We mentioned this term in passing before, but now you can add it to your JavaScript vocabulary. A literal is a data value that appears directly in a program and can be a string in double or single quotation marks, a value, or numbers. Even NULLis considered to be a lit-eral. Just remember that a literal is solid; it can’t be altered.
String
A string is any run of letters or numbers within single or double quotation marks.
Therefore, the following section from the sample script defines the literal string lightblue: onClick=”newcolor(‘lightblue’)
You might now ask, so what? Well, the so what is this: When you place text into a format like this, it becomes a literal, and you can’t then use the text for something else.
Let’s say you set up this script with literals such as document.titleandDate(). You know that you want the page title and the full date returned, but JavaScript doesn’t see it like that. It sees those commands only as text, just as they’re written and not what they would normally represent. Therefore, it displays them as such, and you get Date()written to the page rather than what Date()would normally return.
Go ahead—try it. Drive yourself nuts.
Deconstructing the Script
Here are the script’s input items again:
function newcolor(color) {
alert(“You chose “ + color) document.bgColor=color }
<form>
<INPUT TYPE=”button” VALUE=”blue” onClick=”newcolor(‘lightblue’)”>
<INPUT TYPE=”button” VALUE=”Pink” onClick=”newcolor(‘pink’)”>
</form>
JavaScript Goodies
126
Here’s the basic concept: You are passing a literal string, ‘lightblue’or‘pink’, to the func-tionnewcolor(color).
Basically, the function is waiting until it is called on and given the information it needs to perform.
Remember that in all functions up until this point, the parentheses were empty. The func-tion had all the parts it needed. Here, however, it does not have the required parts, and it won’t until someone clicks a button.
Look again at the form button code. The buttons contain the function format in their onClick=, but this time the function has the data it needs: a color command.
Think of it this way: The function line at the top of the script is sitting there with a vari-able name inside the function instance. Here, it’scolor. When a user triggers the onClick in the button, the same function name is used. But this time, there is a real color name in the instance, and it is assigned the variable name it replaced—color.
So, how does the JavaScript know that the word color in the original function is only a vari-able name? It doesn’t. In fact, the JavaScript never even looked at it. The function text was loaded into memory, but until it’s triggered by the button, the function never runs.
That’s good to know because we’ve set up a basic template, function(). Every time the user clicks, the function is given a new function()header, but the function()is run with the new value in the parentheses, lightblueorpink.
If you set up your onClicks to include the same text as the function, when the click is made, the onClick function()statement replaces the old function line and assigns the vari-able name to the new string brought up from the button.
Until now, functions were static. They did what they were written to do. Now you can write functions with a function()header and let the user pass along what she wants to happen.
This is a fairly difficult concept to grasp, but look over the script again, and follow its path from the button back up to the top of the function.
Your Assignment
Alter the script in this lesson so that you now have three buttons: blue, yellow, and green.
Make the same background effect occur, but lose the alert button and post a text box.
When you click one of the color buttons, the background color should change right away and the text box should read You Chose color.
You’ll get bonus points if you change all the variable names to new words.
You can see a possible answer to this assignment on your own computer by clicking Lesson Twenty-Five Assignment in your download packet, or see it online at http://www.
htmlgoodies.com/JSBook/assignment25.html.