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 input information to a random picture generator that will draw a picture based on the input. 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. You should also download the art applet and save it in the same directory. If you have download problems, download both files as a zip file and extract them into your own directory.
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 four 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 changeShape() is called. We will revisit this method later when discussing events.
TASK: Create the other three radio buttons called lines, circles, and rectangles. Set onclick correctly for these new buttons.
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. 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.useTimer.checked == 1) where useTimer is the name of the checkbox.
TASK: Add a checkbox called useTimer to the form. It should be initially checked. Make it call changeTimer() to handle the onclick event.
Text boxes allow text to be entered into the form. Note the use of 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 timer delay. Give it the name: delay and an initial value of 2000.
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 created a list with one item in it. 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. The colors should be white, grey, and yellow. Determine the hexadecimal values for these colors.
A password box hides whatever text is placed in it. Besides that, it behaves like a regular text box. The sample code already has this box created for you.
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 comment.
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 Draw! and calls the method draw() 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 changeShape(x) when they are clicked. The goal of this method is to keep track of the shape selected. Since after the method is done, we will not remember the value in x, we need to store it in a global variable. A global variable is defined outside a function, and its value can be used and updated anywhere in the code. The global variable shapeToDraw stores which of the four shape types will be drawn (1-lines, 2-circles, 3-rectangles, 4-random). You will need to use this global variable when completing the draw() method.
The draw() method also keeps track of how many times a picture has been drawn by the user. Every time the user clicks the draw method, this count goes up by one. This is another example of when we need a global variable to remember a value outside of a function.
TASK: Create a global variable to store the number of pictures drawn. Update the draw() method to increase it each time the method is called.
Javascript gives you the ability to look at and change the value of input fields. The value in a field is retrieved by using formName.fieldName.value. For instance, to get the value in the bgcolor drop down list, we would use myForm.bgcolor.value. You can also set a value of an input box as well. For example, the line commentForm.commentText.value = message; puts the value of the variable message in the commentText text area in the commentForm form.
TASK: Complete the changeHiddenText method by setting the value of message to be the value of the hidden signature text box.
This method turns the timer on and off and changes the delay between pictures. The delay is in milliseconds, so a value of 2000 means the picture will change every 2 seconds. This method requires you to either set the timeDelay variable to be the value of the delay text box if it is not empty and the timer checkbox is checked or -1 otherwise. We determine if a check box is checked by using checked such as myForm.timer.checked if timer is the name of the checkbox.
TASK: Complete the changeTimer method by adding an if statement that sets the timeDelay as discussed above.
The draw method does two things. First, it builds a message to be displayed under the picture. The message shows how many pictures have been generated, the title of the picture, the creator (value of the hidden text box), and any comment that you put in the text area. Your task is to build the message variable to have all this stuff in it. The rest of the code handles displaying the text and actually draws the picture. This is done for you and should not be changed.
TASK: Complete the draw method. First, add to the message the number of pictures generated.
The title of the picture depends on the shape drawn. The messages are in the sample code. For example, if lines are selected then Lazy Lines is displayed.
TASK: Complete the other three cases for picture title. Finally, add to the message the text in the text area called comment.
For this lab assignment, submit using Connect your answer file lab8.html.
Home