In this lab, we will learn to write JavaScript programs that use HTML forms and respond to events.
HTML forms allow users to enter input using a variety of controls such as text boxes, check boxes, list boxes, and radio buttons. We will build a small HTML form that allows users to generate Compliments (or insults if you prefer) and display them. The form that we are going to construct is shown below.
TASK: Download the sample file, save on your computer, and open file using Aptana.
The starting code has already defined a form called myForm. Inside of this form we will create all of our input controls. You will already see some input tags.
Radio buttons have the property that only one of them in a group can be selected at a time. The sample code has already created one of the two radio buttons. Note the text checked which indicates this is the radio button initially selected. Also, when someone clicks on the radio button, the onclick event occurs and a method called changeType() is called. We will revisit this method later when discussing events.
TASK: Create the second radio button called generator. Set onclick="changeType(false)".
Text boxes allow text to be entered into the form. Create a text box for this form as needed. Note that you should use the <br/> tag to move input boxes to the next line as appropriate. (A better way is to organize the form using tables, but that is too much work for this lab.)
TASK: Create a text box for the name. Give it the name: nameBox.
A drop down list is used when there are many options to select, and it would take up a lot of space on the screen to show them all. The drop down list is created with the select tag and has one option for each item in the list. The sample code has already created part of the list. Each list item has a value that is used when the item is selected.
TASK: Fill in the remaining items in the drop down list: Yourself, Father, Mother, Brother, Sister, Dog.
Check boxes allow the user to either check or not check an option. Check boxes are independent of each other, unlike radio buttons, which means you can check multiple boxes at the same time. The sample code has created one check box. Note that each checkbox has a name and a value that is used when the box is checked. To determine if a given box comp1 is checked, we write the code if (myForm.comp1.checked) (see generate() method).
TASK: Add three more check boxes to the form.
A password box hides whatever text is placed in it. Besides that, it behaves like a regular text box.
TASK: Create a password box for the hidden Compliment.
A text area is a larger text box where you control the number of rows and columns.
TASK: Create a text area with 5 rows, 30 columns, and a name of myTextArea.
Buttons usually perform actions when clicked. The default buttons of reset and submit have special purposes. A reset button clears all form fields. A submit button sends the form data to the place indicated on the form (not used here). You can also create your own buttons that do your own actions.
TASK: Add a reset button to the form. Add your own button that has the text "Compliment!" and calls the method generate() when clicked.
An event occurs when the user presses a key, moves the mouse, or clicks the mouse. Events are ignored by our programs unless we tell the browser that we want to capture and respond to events the user is generating. We indicate that we want to handle events by providing the name of the event (such as onclick) then providing the action that we want to perform when the event occurs. Usually, the action involves calling a method.
Our radio buttons call a method called changeType(x) when they are clicked. The goal of this method is to keep track of whether the user wants us to generate a Compliment or use the freeform Compliment that they typed into the text area. Note that when the freefrom radio button is checked, then the method call is changeType(true) indicating that we want to remember that the user wants a freeform Compliment. What would the method call be for the generator radio button? The second question we must answer is where are we going to store this state information and what does the method changeType() do? As a hint, you will need to create a global variable that will store either true or false depending on if the Compliment is freeform or not. The changeType method will set this variable. A global variable is a variable that is outside of any function and can be used throughout the code.
TASK: Check the changeType() method call for the generator radio button to make sure it is correct. Add a global variable to store true or false. Write the code in the changeType() method to set this variable correctly.
The majority of the work and code in this lab will be in writing the generate() method. The generate method should either show the contents of the freeform text area if that is what the user selected or generate a Compliment by combining the data in multiple input fields. Examples of using the generator are below. The sample code provides some help in determining the values of the fields. In general, the value in a field is retrieved by specifying formName.fieldName.value. For instance, to get the value in the person drop down list, we would use myForm.person.value. You will also see that we can determine if a check box is checked by using checked such as myForm.comp1.checked. Note that the Compliment words are separated by spaces instead of commas. This is done to make it easier. If you are up to the challenge, try making the Compliment a true sentence using commas and "and".
TASK: Complete the generate method. Make sure to test it on several combinations of inputs.
You can get up to two bonus marks if you put commas between the descriptive items correctly. Example: "Your mother is a wonderful, amazing, special person!" You can also get up to 2 more bonus marks for doing something more than the typical assignment (doing an insult generator instead, adding more options, etc.). These bonus marks are at the TAs discretion and will not be awarded for minor changes.
For this lab assignment, submit using Canvas your answer file lab8.html.
Home