A Very Simple Example Demonstrating the Use of Forms and Javascript

We begin with a very simple example showing how html forms and Javascript can be used to introduce more interactivity into an html page. There are basically two different ways of introducing this kind of interactivity -- one way uses client side technology (Javascript) and the other uses server side technology (CGI or PERL). We use client side technology here even though it is less powerful because it does not require support from your system administrator.

Try the exercise below.

You have two coupons for a sale. The first entitles you to 20% off any purchase and the second entitles you to 40% off any purchase. The salesperson tells you that you can use both coupons on the same purchase. Should you apply the 20% off coupon first and then the 40% off coupon OR should you apply them in the other order?

The html code that produces part of this page is shown below.

The most important elements of this code are highlighted in red and yellow. The red part is Javascript and the yellow part is an html form. Dreamweaver can help create these kinds of pages but you will need to work with the raw html code as well. The form and the Javascript work together. The form sets up the part of the html page in which the user enters his or her answer. The Javascript part controls how the html page reacts to different answers.

The html code below is identical to the html code above except that we have highlighted the key parts in a different way.

Notice that there are two incorrect answers. The parts of the html code corresponding to these two wrong answers are highlighted in yellow. In the forms part of the html code these answers have code reading onClick = "WrongAnswer()". This invokes the Javascript function (highlighted in yellow) WrongAnswer. This function writes a new (and very simple) html page.

There is one correct answer. The part of the html code corrresponding to this right answer is highlighted in red. In the forms part of the html code this answer has code reading onClick = "RightAnswer()". This invokes the Javascript function (highlighted in red) RightAnswer. This function writes a new (and very simple) html page.

You may want to use this example as a template to create similar interactive pages.

Now we want to look at a more sophisticated example combining html forms, Javascript, and the Lite Applet Image_and_Cursor. Click here to open a new window with this example. As usual arrange these two windows so that they overlap and you can move back-and-forth between them by clicking on the exposed portion of the inactive window to make it active. As usual, if you have a slow connection, the new page will take a few minutes to load. Wait until a photograph of a water fountain appears. Then work through the new html page. Notice the links to the files and materials you will need to duplicate or modify this example.