JavaScript Primers #17

http://www.htmlgoodies.com/primers/jsp/article.php/3478291/JavaScript-Primers-17.htm (Back to article)

Use these to jump around or read it all

The Concept
The Script
The Script's Effect
Deconstructing the Script
What You've Learned
Your Assignment

The Concept

The purpose of this example is to introduce you to forms and JavaScript. This script uses a form to allow you to choose a background color, either blue or pink. Notice that the color selection is done through form buttons.

Forms always begin with <FORM> and end with </FORM>. No surprises here, just good old HTML!

The Script

The example below will again show the full HTML document:


<html>
<head>
<SCRIPT type="text/javascript">
function newcolor(color)
{
  alert("You Chose " + color)
  document.bgColor=color
}
</SCRIPT>
</HEAD>
<BODY>
<h1>Select a Background Color</h1>
<FORM>
  <INPUT TYPE="button" VALUE="Blue" 
      onClick="newcolor('lightblue')">
  <INPUT TYPE="button" VALUE="Pink" 
      onClick="newcolor('pink')">
</FORM>
</BODY>
</HTML>

The Script's Effect

Follow this link to see the script in action

Deconstructing the Script

Time for a new term! A literal is a VALUE that does not change. It can be a number, a name, or any random series of both. Just remember that a literal is solid. It cannot be altered.
Time for another new term! A string is any run of letters or numbers within single or double quotes. Thus this section from the script:
```
onClick="newcolor('lightblue')
```
...is defining the literal string "lightblue." Still with me? Good.

Here's the script and the 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>

Notice we are passing a literal string, 'lightblue' or 'pink', to the function, newcolor(). The string is surrounded by single quotes because the function name is surrounded by double quotes.
When a button is clicked, the string in the parentheses (either 'pink' for 'lightblue') is passed to the function newcolor().
Basically, the function is waiting until it is given the information it needs to perform. Remember that in all functions up until this point, the parentheses were empty. The function had all the parts it needed. Here it does not and it won't until someone clicks on a button. That button contains the same function, only this time the function does have the data it needs, a color command.
In this script that color command is being passed onto two items in the <SCRIPT> section: an alert method and the document.bgColor section. After the function has what it needs, it acts. The alert box pops up and the background color changes.
I want to point out, because it can be confusing, that the VALUE attribute in the INPUT command puts the text on the button. It doesn't affect the JavaScript properties.

What You Have Learned

Your Assignment

Let's see how well you remember some of the stuff from the other primers. Please rewrite the script above so that when the user enters the page, they are given a prompt that asks for their name. Then, when they click on a button, the alert box reads "Hey (name)! You chose (color)." Good luck.

Here's a possible answer to this assignment
(this will open a new window)

The Concept
The Script
The Script's Effect
Deconstructing the Script
What You've Learned
Your Assignment

On To JavaScript Primer #18