"Windows" programs (meaning programs that interact with the User via GUI (Graphical User Interface) behave differently. Instead of starting to execute right away, they wait for the User to click a button, enter text into a box, pull down a menu, etc. With each possible User "action", the programmer has associated a (JavaScript) function that will be called and executed when the User performs the action (clicks the button, etc). These actions are referred to as events, and have names like: "onClick" or "mouseOver".
The HTML construct that allows User input and interaction is called a form. It's a complex tag, like the <TABLE> tag, which has elements--"sub tags", if you will.
Start the form with the <FORM> and end with, of course, a </FORM> tag. Between the <FORM> tags, there are INPUT tags which are what the User actually interacts with. Each <INPUT> tag has a TYPE attribute, like TYPE="TEXT" or TYPE="BUTTON" or TYPE="radio", which describes how that input area will look and act. (As an aside, forms are often used in conjunction with <TABLE> tags them to arrange the <INPUT> elements on top of, or next to each other.)
One important difference between the <FORM> and <INPUT> tags and the tags you have dealt with so far is that we give each form and input element a unique name with a NAME attribute. That way we can refer to that form object (element) by its name within our JavaScript code.
In addition to a NAME= attribute, the form elements can have a VALUE= attribute. For a text box, the value is what is the User has typed in, while the value of radio button is a number or string that is associated with that particular button. Your JavaScript code can look at these values, and set them as well.
Our simple form has a text box, a pair of radio buttons, and a "submit" button. We attached our JavaScript function (called "SayIt") so that it will run when the User clicks the button (the "onClick" event).
The HTML that creates the form is given below:
<HR> <FORM NAME="ExampleForm"> Please enter your name: <INPUT TYPE="text" NAME="TEXT_1" VALUE=""> <BR> Greeting type: <INPUT TYPE="radio" NAME="GREETING_TYPE" VALUE="HOWDY" CHECKED> Howdy <INPUT TYPE="radio" NAME="GREETING_TYPE" VALUE="HELLO" > Hello <BR> <INPUT TYPE="button" VALUE="Say It" onClick="SayIt();"> <P> The following is a big text area (<TEXTAREA>) that gives us a place to write to after the User clicks the "Sayit" button. <P> <TEXTAREA NAME="TEXT_2" VALUE="" ROWS=10 COLS=50> </TEXTAREA> </FORM> </SCRIPT> <HR>
The JavaScript source for this page is all inside the <HEAD> tags. We display it for you here:
<SCRIPT LANGUAGE="JavaScript">
/*
* The following function will "print out" as many
* non-breaking spaces ( ) as the value passed
* to the function in the argument/parameter "HowMany"
*/
function PrintBlanks( Win,HowMany ) {
while (HowMany > 0) {
Win.document.write( ' ' );
HowMany = HowMany -1;
}
}
function SayIt() {
var Counter; // declare a variable called "Counter"
var Greeting = "Howdy"; // declare a variable and set its value
var Name; // The person's name
var HowMany; // This is a different variable from the
// parameter declared and used in PrintBlanks
var Now = new Date(); // create a new "date object" with the current
// time and date from the computer clock
var NewWin; // name of the window object we open
HowMany = Now.getSeconds(); // set HowMany to the current
// seconds on your computers clock
HowMany = HowMany % 5; // seconds run between 0 and 59, to print
// 59 Greetings would be boring, so get
// the *remainder* of the number of seconds
// after dividing by 5; this will be a number
// between 0 and 4 (inclusive)
/*
* read the person's name from the text box;
* should really check to make sure it's not empty
*/
Name = document.ExampleForm.TEXT_1.value;
/*
* Now search for which radio button has been checked
* all radio buttons with the same name appear in an array of that name
*/
for( Counter=0; Counter < document.ExampleForm.GREETING_TYPE.length;
Counter = Counter+1 ) {
if(document.ExampleForm.GREETING_TYPE[Counter].checked) {
Greeting = document.ExampleForm.GREETING_TYPE[Counter].value; break; // stop executing the for loop NOW
}
}
PrintIt( Name,Greeting,HowMany );
// DisplayIt( Name,Greeting,HowMany );
return true;
}
/*
* Print the name and greeting to the large text area
*/
function PrintIt( Name,Greeting,HowMany ) {
var Counter;
var Spaces;
document.ExampleForm.TEXT_2.value = "We'll say "
+ Greeting
+ " to you, "
+ Name
+ ", "
+ HowMany
+ " times\n" ;
/*
* The preceding lines will print: We'll say Howdy 1 times <P>
* when Counter equals 1. How could you fix it to say
* "1 time" when Counter is 1, but "N times" (plural) when Counter is
* not equal to 1?
*/
for( Counter=1; Counter <= HowMany; Counter = Counter+1 ) {
// below, += means concatenate onto what was already there
for( Spaces=1; Spaces < Counter; Spaces = Spaces+1 ) {
document.ExampleForm.TEXT_2.value += " ";
}
document.ExampleForm.TEXT_2.value += Greeting
+ " "
+ Name
+ "\n" ;
}
}
/*
* Open a new Browser Window and display the information there
* Change the form to say "DisplayIt" instead of "SayIt" and a new window will
* open in addition to using the text box.
*/
function DisplayIt( Name,Greeting,HowMany ) {
var Counter; // declare a variable called "Counter"
/*
* now open a new browser window
*/
NewWin = window.open( "", "SampleWin", "width=300,height=150" );
NewWin.document.open( "text/html" ); // its going to be HTML
/*
* write out HTML; writeln prints a return after printing its argument
*/
NewWin.document.writeln( "<HTML>" );
NewWin.document.writeln( "<HEAD>" );
NewWin.document.writeln( "<TITLE>" );
NewWin.document.writeln( Greeting + " " + Name );
NewWin.document.writeln( "</TITLE>" );
NewWin.document.writeln( "</HEAD>" );
NewWin.document.writeln( '<BODY BGCOLOR="#ffffff" TEXT="#000000">' );
NewWin.document.writeln( "</H3>" )
NewWin.document.write( "We'll say "
+ Greeting
+ " to you, "
+ Name
+ ", "
+ HowMany
+ " times <P>"
);
for( Counter=1; Counter <= HowMany; Counter = Counter+1 ) {
PrintBlanks( NewWin,Counter-1 );// Print 1 fewer blanks;
// the blanks will indent the
// greeting that follows
NewWin.document.write( Greeting // the variable
+ " "
+ Name
+ " <BR>" // print HTML <BR> command
);
}
NewWin.document.writeln( "</BODY>" );
NewWin.document.writeln( "</HTML>" );
NewWin.document.close();
NewWin.focus(); // new window on top
return true;
}
</SCRIPT>
The page has already been rendered (displayed) by the browser before the User enters anything on the form, so the JavaScript can't document.write() anything new on the existing page. Instead, we use the large text area as a place to write when the User clicks the form button.
The other choice would be to open a new window in the browser and write there. When you examine the JavaScript code itself, you will find that we have defined 2 separate functions: PrintIt() which prints to the large text area, and DisplayIt() which opens a new window. We have used // to comment out the actual call to the DisplayIt() function (which is why you don't see a new window. Feel free to remove the //'s and try it again.
This page is very dynamic in that it displays something different every time the User clicks the "Say It" button!
| elements | form | NAME attribute | VALUE= attribute |
| embedded JavaScript | INPUT | onClick | |
| events | mouseOver | TYPE attribute | |
|
|
©opyright 2001-2003 Mark R. Wallen
|