CSE 111 - Fall 2002

CSE 111 - Fall 2002

Lab #8

Background

Now you have experience with HTML and making a web page, so let's give those web pages a little kick with a shot of JavaScript.

The TA will begin lab by introducing some of the ideas that you will need to complete the lab. Ask the TA if you have any questions about the contents of the lab, or if you are unsure how to accomplish a specific task. Please do not hesitate to refer to the JavaScript reference page that was put together for you to use while working on this lab.

Also, if you are confused about how a form is supposed to work - ASK early and often. If you do not understand what is supposed to happen, you will never be able to code it. Also, just because this is a two week lab, that does not mean you should wait until the day before your lab is due to begin work on it. Start early and work a little bit at a time. If you run into a problem, seek out help in office hours.

Creating a Folder for Lab 8

Please refer back to the directions in Lab 1 if you don't remember how to create a folder. Create a folder in CSE111 entitled Lab8 that you will save all your Lab 8 work in.

Overall Description

In this lab, you will implement a page that has five forms on it. Each form does something different with various components of the document. The next sections will show a picture of what each form should look like and describe in brief its functionality. You should include in your document, not only the forms, but some text and a few links so that you can effectively test your script.

The first step is to input the

<SCRIPT LANGUAGE="JavaScript>

<!--

-->

</SCRIPT>

into the document in between the </HEAD> and <BODY> tags. This is the place where you will write all your functions for this lab.

To create each form, you should follow these steps:

Create the form in FrontPage by adding the appropriate form components to your screen.
Name your form by inserting the NAME attribute in the <FORM> tag of your form
Set up the event handler by asking yourself "What does the user have to do to activate the functionality?". Once you decide that, pick a name for the function that you will write, and insert the appropriate event handling attribute in the form component.
Insert into the <SCRIPT> element the outline for the function you are writing as below:

function functionName () {

}

Begin thinking about what the function has to do - refer back to code that we have written during class to remember how to do certain operations with JavaScript.
Write the code in your function
Test out your code by looking at the page on the Preview tab and interacting with it to see if it produces the desired result. If it does, move on to the next form - otherwise, go back to the code you wrote to fix it.

Form 1

In this form, whatever text the user inputs will be displayed in a alert, prompt, or confirm dialog. You choose what dialog to display the text in, but the text that should be displayed is whatever the user types into the text box.

Form 2

In this form, you select your favorite color and make the radio button correspond to that color. Whenever the user clicks on any of the three buttons, Background, Text, or Links, the appropriate document property will change to the color you selected. You will need to have text and links on your page to test this effectively.

Form 3

In this form, all the user does is select which of the three components, Background, Text, Links, and the component will change to a random color. The question is - How do I get a random color? The answer is that there is a randomColor() function defined in the script located at http://www.cse.buffalo.edu/faculty/adrienne/FA2002/cse111/Labs/random.js You should include that script in your page and then you can simply call the randomColor() function whenever you need it.

Form 4

In this form, you will create three radio buttons, that are associated with three different colors of your choice. The first button will be selected upon loading of the page. If the user selects any of Background, Text, Links, at this point, they will change by default to the first color. When the user clicks any of the other two color buttons, and then clicks the Background, Text, Links, buttons, the component will change color to match the color selected. For this form, you will need a variable to hold the current color.

Form 5

In this form, you will create three text fields, one for each Red, Green, Blue. The user will enter values between 0 and 255 for each of the fields, and then when they select any of Background, Text, Links, the color of that component will change appropriately. This is quite a complicated process. First you will have to get the values from the user. Then you will have to convert them to Hexidecimal so the browser can understand them - Hint: use toHex(num, digits) from the random.js file. Then, you will have to concatenate all three values to one color value and set the component appropriately.

What should I hand in and when is this due?

You should save your document to your Lab8 folder with the name "SimpleFormsPage.htm". Again, for this lab, we are asking that you hand in the page on a disk. You should most definitely NOT save this page in your public_html directory unless you want everyone to see your solution to this lab. Save the entire Lab8 directory and its contents to your floppy disk. Make sure your name is on the disk and hand it to your TA at the ~~beginning~~ end of your recitation in two weeks. ABSOLUTELY NO LATE SUBMISSIONS WILL BE ACCEPTED.

Refer to the list of due dates below for your recitation.

Day of Week your Recitation meets	Due date for Lab 8 (at beginning of recitation)
Monday	Monday, November 11, 2002
Tuesday	Tuesday, November 12, 2002
Wednesday	Wednesday, November 13, 20002
Thursday	Thursday, November 14, 2002
Friday	Friday, November 15, 2002