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:
- 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.
- 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).
- 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.
- 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.
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
- Study the onchange
attribute. Create a similar page that performs temperature
conversions without needing to push any buttons.
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:
- Break up lines so that horizontal scrolling is not needed.
- Format your HTML code with blank lines, indentation and consistent
spacing so that it's easy to follow the structure of the HTML code.
This will help also help you check whether you have correctly open and
closed HTML tags.
Deliverables
Using the COL
submission, tell me the URL of your navigation page.