IT 130

Fall 2016

Craig Miller

Weekly Notes

Assignments

Technical References

Assignment 5
Functions with JavaScript
Submit before 11:30 PM Friday October 14

Overview

You will use functions to create dynamic Web pages.

Requirements

  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. To see this function work, open the Console in Google Chrome and type in the following code:
    CostPerSquareInch(16, 15)
    You should then be able to see the cost per square inch of a 16 inch pizza costing $15. 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 as text in the page. This pizza page should use the CostPerSquareInch 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. After you have written this function, you should be able to type in this expression in the Chrome JS console:
    CelToFahr(20)
    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

  • 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.

Submission Requirements

Using the D2L submission, tell me the URL of your main page.