by Stephen Wilson (c) 1996
Contemporary Web pages often include interactive forms based on the well developed HTML standard supported by most browsers. Viewers indicate their desires by clicking on buttons and checkboxes, selecting options out of text selection fileds, and typing text into text input boxes. Examples include search engines, games, user informatiion sheets, educational applications, and the like. Typically forms are used in conjunction with CGI server scripts to customize responses for the Web user. Figure 3.1 show the process which includes the following steps:
You can embed scripts along with the Web page containing the form. The user will be able to indicate choices in the form and then get an almost instantaneous response. Because the script is locally present there is no need to send the information over the Internet and wait for a server that may be required to respond to hundreds of similar simultaneous requests. Enthusiasts believe this responsiveness may revolutionize the Web and eliminate the need for perhaps 60% of current form's reliance on servers.
Of course, local scripts will not be able to substitute for all current systems. For example, those that rely on rapidly changing time-based information cannot easily be embedded in local scripts (&& example). Similarly, those systems that rely on huge databases and/or sophisticated computing such as the full search engines like Lycos or Yahoo cannot be instituted locally. With the advent of local scripting your responsibility as a Web author will include determination of what functions can be locally scripted.
Note also that the form is itself considered a subelement of the document and can be indicated by the dot notation. The following example refers to a form that was given the name "basicinfo".
This allows your scripts to refer to specific forms when there are more than one. You can also indicate the forms by the order they appear on a Web page. For example, if there were two forms the first one would be document.form and the second would be document.form
(&&insert fig 3.2 2 forms)
Each form element has its own properties. These include the standard HTML attributes TYPE, NAME, and VALUE as well as characteristic unique to each type of input elment. The examples below show the code fragments to create a button, checkbox, and text imput area. Remember it would need to be embedded within a regular HTML form structure.
This presentation of the text is accomplished by using the object notation to identify specific text fields and then assigning values to them. The text then appears in the box. Checkboxes and radio buttons can be similarly toggled under script control. The next section shows an example of an animated text display.
This script will set up a form that asks for user input. It will animate text in boxes that surround it to urge the user to provide the information. To accomplish this, we must first use standard HTML form tags to create the input fields for user typing. We must also create text fields that we will use to create the animation. Figure 3.3 shows the basic form that was created by the following HTML structures.
The script could not just list all these commands because the browser would instantaneously apply all the values and the user would not see any animation. To time the actions, the script uses the same setTimeout method described in earlier example 2.3?? &&. Remember this method requires two parameters - first the expression to be acted on and then following a comma, the number of milliseconds to wait before acting on the first experession. So you can see that the code that assigns values is the first expression in each of these setTimeout lines. For example, the first line is setTimeout("document.f1.ta1.value = 'Answer Soon'", 1000). In this line setTimeout tells the browser to wait 1000 milliseconds before making the text appear. The next line makes the text dissappear at 1300 milliseconds. Thus, three tenths of a second after the text appears, it dissappears.
Those without a lot of multimedia design experience tend to overuse these kinds of features when they discover them. Everything starts flashing and moving. Unfortunately overuse can saturate the user and devalue your pages in the minds of visitors You will want to use these capabilities sparingly and usually in the service of some goal. For example, I would be warn against using this "Answer Soon" display every time you ask the user for input. If your page, however, is set up to automatically update and the user has not typed anything after a period of time, the animated display might make sense. The later chapter on use of Date and Time (&&) will show you how to write this kind of script. You will no doubt discover all kinds of situations where animated displays enhance your communication.
Also, realize that even with this simple example, we could have modified its function in ways that would have created very different experiences for the visitor. Figure 3.5 (&& ) shows many different ways the text could have been moved through the text fields.
(Insert fig 3.5 variations on animated fields)&&
Also realize that the sample uses even time delays between ons, offs and the next display. You could compose the text appearance in different rhythms. For example keeping text on longer than off creates a different feel than keeping text off longer than on. The time delays are easily adjusted merely by changing the time parameter in each setTimeout line.
The core command in this example sets the various buttons checked property to true. When checked is true, a button is filled with black.
document.bb.bu.checked = true
Two sets of radio buttons are created; the top is arbitraily named "bu" and the bottom is arbitraily named "bu2". The dot notation is used to identify which button is being addressed. For example, the top left button is a member of the family of buttons with the name "bu" and that family of buttons are part of the form called "bb". Thus, part of its identification is document.bb.bu.
To accomplish its effect of moving the black dot, the script moves through the radio buttons setting button's checked value to true. It then moves to the next one in the series (the next one to the right on the top and the next one to the left on the bottom.) To create an animation with the previous button becoming unfilled, something must be done to unfill them. The script could have added lines before the next fills to set the checked value to false. Thus the first part of the script could have looked like this:
setTimeout("document.bb.bu.checked = true", 1000)
setTimeout("document.bb.bu2.checked = true", 1000)
setTimeout("document.bb.bu.checked = false", 1300)
setTimeout("document.bb.bu2.checked = false", 1300)
setTimeout("document.bb.bu.checked = true", 1300)
setTimeout("document.bb.bu2.checked = true", 1300)
To illustrate another approach, the script illustrates use of click() method. The basic HTML code creates a reset button in the middle of the animated buttons which is given the value "Welcome to this Page" and the name "re". Remember reset buttons on forms turn off all checks. The click method simulates someone clicking on a button. This script calls the click method to simulates a click on the reset button to clean out the last buttons each time before new buttons are filled. In this example the reset button is identified by dot object notation as the button named "re" in the form named "bb".
You can write your scripts to ascertain what the user has done and respond accordingly. The method of identifying the values of particular buttons and fields is the same as used in previous examples in this chapter. For example you have used HTML to create a Web page with a form that asks for the user's name and address as in the example below.
<h2>Sample Script to Customize Links Based on User Button Choices
This sample script demonstrates how to create a script that lets a user chose a category of infomation after which it dynamically generates an html page containing links relevant to that interest. It uses a simple form with radio buttons to determine interest. Just to add interest it also asks the users to type their name. Once the users are done chosing, they click on the submit button and the script generates the html document using their name. For the sake of clarity this example is very short with only one choice requested. The same principles, however, could be applied to more sophisticated sets of choices.
This example briefly introduces functions, arrays, and window opening methods because they make the script more efficient. The script could be made event more compact by using more advanced techniques taught in later chapters.
(&&Insert fig 2.7 picture)
The first section of the script (A.1) loads the database of links. Note that the text is prepared in standard HTML notation with relevant tags. The whole set of links and related anchor text is enclosed in quotes; any internal quotes need to use single quotes. Separating it into this database makes it easy to update this section. The script creates an array to store the different databases for classical, rock, and ethnic music links. It gives it the name "muresources".
An array is just a family of related values stored in a systematic way. More information about arrays is available in chapter &&. Each member is indicated by an index marker placed inside of brackets. The index can be numbers or text. The numbers start at 0. This example creates an array with 3 members. Each member can be read or changed by using this index notation. The example below shows the equivalent notation.
muresources muresources["classical"]' classical music links text
muresources muresources["rock"]' rock music links text
muresources muresources["ethnic"]' ethnic music link text
The text names are used in the index because that allows us to use the variable choice (assigned values by the radio buttons) to automatically function to select the right member of the array. If the user selects rock music, "rock" is put into the variable choice and muresources[choice] will be equivalent to muresources[''rock"]. The variable muresources is initialized with the default value "".
This sample script names the first function getLink(). The middle letter does not need to be capitalized although many scriptors do use that convention. The parentheses must be there to indicate it is a function. Here they are empty; as you will see later, you may want to enclose parameters in the parentheses that the function will use in other functions you write. This fucntion constructs the Web page to be displayed. It creates a variable called temp to store the appropriate Web page text from the database. It retrieves this text by using the array notation discussed previously to identify which member of the variable muresources it needs. The variable choice has received its value from the radio button set in the form; that is if a user clicks "rock" the script for that button assigns the value "rock" to the variable choice. Thus,, the variable temp will be set equal to muresources["rock"]. The database section of the script has arranged for that variable to contain all the link text relevant to rock music.
The next part of the function constructs the rest of the Web page. It creates a variable called temp2 that will accumulate the pieces. First it places the TITLE tags and the title name "Customized Links". Next it creates a greeting line that includes the name of the user. It gets the user's name by reading the value of the text field where the user was supposed to type a name. That field is named pername and is part of a form named m. Thus, using dot notation the value of that field is document.m.pername.value. It completes the greeting sentence by adding text ", here are some links for you". Finally, it appends the variable temp which includes all the HTML link text. In Javascirpt text strings are concatenated using the "+" symbol.
There are design decisions to be made. This script leaves the window open rather than automatically closing the previous window when the user makes another request. This can clutter the monitor display, but it allows the user to keep several open at once. Also, text to be displayed does not have to appear in a totally separate window. If there were no active links involved we could have displayed text in a textarea in a form or in an alert box. The desire for active links requires the text to appear in a Netscape window or frame. Frames are discussed more in chapter &&.
The next function (A.4) creates one more function called doAll(), This function's purpose is to call all the other functions in the right order. This is the function that the button clicked by the user activates. It orchestrates the whole response event.
All of these functions are loaded in the HEAD section of the document because it is important they get loaded first. If the user clicked on a button that called a function that hadn't yet loaded (say because it was at the bottom of the page) an error alert box would confront the user.
The next major section of the page (B) creates the Web page that displays to the user. Most this uses standard HTML form tags. It has the following sections: greeting text, radio buttons to select the kind of music, a field requesting the user's name, and the button to see the links or reset the form. Users indicate their desire by clicking on one member of a radio button family named "mus". The fact that they are all members of the same family means they act as toggles; only one can be selected at a time.
The script adds one important new feature to each of these buttons. It places an onClick handler that activates whenever the button is clicked. Each handler sets the choice variable equal to the appropriate type of music for that button: onClick("choice='rock'") for the rock option. Note the onClick hander requires the action to be enclosed in parentheses and quotes and for single quotes to be used for inside quotes if required.
The Web page defines a text input field called "pername" that requests users to type their names. Finally the last section offers two buttons - a standard HTML reset button to reset the form and another regular button that shows the text "Show me links". This is the button that mobilizes the scripts into action to fetch the relevant links and display them in a new window. It accomplishes this by including a onClick handler. The action initiated is a call to the doAll function described earlier that calls the getLinks() and writeIt() functions.
- This page created by Stephen Wilson, Professor Conceptual Design, SFSU (http://userwww.sfsu.edu/~swilson) email@example.com