IT 130: The Internet and the Web
Fall 2011

Assignment 5
Functions with Javascript
Due Sunday October 23, Submit URL before 11:30pm

Overview

You will use functions to create dynamic Web pages.

Requirements

Create a Web page for each of the following exercises:

  1. Redesign your story from last week so that at least one element of the story is chosen at random instead of by the user. The examples from class may be useful for writing code that randomly selects words. Your story may appear either in a text area or as HTML-formatted text.
  2. Create a Web page that has a button and three text boxes. When the user presses the button, the program simulates the roll of a pair of dice and displays the roll of the first die, the second die and the sum in the three text boxes. You may want to use the RandomInt function to simulate the roll of a die. Here's a demonstration page that shows the use of RandomInt for generating a number between 1 and 10 (of course, you'll want your results to appear in text boxes instead of an alert box).
  3. Study this page, which has a function for finding the cost per square inch of a pizza. Use this function to create the page that takes the cost and size of a pizza (using a form with text fields) and presents the cost per square inch of the pizza. Unlike the page previously discussed in class, this pizza page should use the function for calculating the cost per square inch. Note: You do not need to change the given function. Instead, you should write an additional function that retrieves information from a form, calls the given function and displays the results.
  4. Study this temperature conversion page. Unlike last week, it uses a function (FahrToCel) that converts fahrenheit to celsius. Using FahrToCel as an example, create another function called CelToFahr that takes a celsius temperature and returns the equivalent temperature in fahrenheit. Then, modify this page so that it has a second button (labeled 'Convert to Fahrenheit'). When this button is pushed, the value in the celsius box should be converted to fahrenheit and appear in the fahrenheit box. Question: will you also need to create another function for the second button? If you are not sure of the answer, discuss it with someone before you begin.
  5. Some strong advice: Take an incremental approach when you create this page. First, just add a new button to the page. Then, have the button do something simple such as showing the value of the celsius temperature in an alert box. Always try simple steps and verify that everything is working before you start the next step.

Optional Challenge

Submission Instructions

Once you have completed the Web pages above, create a navigation page that provides links to the exercise pages. Format this page using a suitable list. Add your name. Instead of using inline styles, specify and use a few styles using either internal or external style selectors. See my page on CSS for examples.

When creating your page, make sure that your HTML code is readable and follows common standards. Adhere to the following principles:

Deliverables

Using the COL submission, tell me the URL of your navigation page.