ITSE 1411 Beginning Web
Assignment 3

Design Text, Chapter 11, pgs 193 - 222 (Tables)
JavaScript Text, Chapter 2, pgs 59-75(Arrays and Tables)

Reading:

• Hiding HTML tags in JavaScript
  • The examples in this chapter use an older style method to hide the HTML tags from JavaScript. You may use this method or the CDATA notation explained in chapter 1.
• JavaScript Variables
  • Study the coding using string and float variables in the Daytona500.html example on pages 64 and 65 in the JavaScript text.
  • In order for your HTML tags to validate within your JavaScript code, you must follow the instructions shown on pages 44 and 45 of the JavaScript text.
• Using Tables
  • The MetricPrefixes.html example, on pages 68 - 70 of the JavaScript text uses a table. Study the HTML text of the W3C site to learn how to code HTML tables in HTML.
  • Notice that the MetricPrefixes.html example uses the HTML coding for tables in document.write statements.

Practice:

• Displaying Variables
  • Create an assignment3 folder (no spaces in the name, no uppercase) in your public_html folder.
  • Daytona500 page
    • Click on Daytona500.html.
    • Right click on the page.
    • View Source
    • Save as Daytona500.html (notice you use the uppercase this time and the l in the extension.) in the assignment3 folder.
    • This page refers to js_styles.css. You saved that file in your assignment2 folder. Since you are going to re-use this file, (and other files) make a new folder, jsfiles in the public_html folder.
    • Make a copy of js_styles.css from your assignment2 folder and save in your jsfiles folder.
    • To refer to the file you must link to the location where your file is stored. The link is written as
      <link rel="stylesheet" href="js_styles.css" type="text/css" />
      This assumes that your file is in the same folder as your html page.
      You can change the link to be an absolute link or a referential link.
    • Open Daytona500.html in your editor and change the link to one of the choices below using the correct name for fLastName.
      • <link rel="stylesheet" href="http://pinclab.austincc.edu/~fLastName/jsfiles/js_styles.css" type="text/css" />
      • <link rel="stylesheet" href="../jsfiles/js_styles.css" type="text/css" />

• Numerical Data Types
  • MetricPrefixes page
    • Click on MetricPrefixes.html.
    • Right click on the page.
    • View Source
    • Save as MetricPrefixes.html (notice you use the uppercase this time and the l in the extension.) in the assignment3 folder.
    • Be sure to add the validation icons to the page.
    • Open MetricPrefixes.html in your editor and change your link to refer to your js_styles.css page.

• Modifying Elements Using Arrays
  • Update Daytona500.html
    • Open Daytona500.html in your editor.
    • Save as daytona500.htm in your assignment3 folder.
    • Make the changes noted on pages 74 and 75 of your text.

Case Project:

• Complete Case Project 2-2 found on pages 112 - 113 of your text.
  • Open your template.htm page.
  • Save as CO2Emissions.htm in your assignment3 folder.
  • Follow the steps described in the text but start with the template so that you will have the validation icons on your page.
  • Also, remember that numbers are not in quotes. Text is in quotes.

Update your index page:

• Add links on your index page to the pages in your assignment3 folder that are to be graded:
  • daytona500.htm
  • MetricPrefixes.html
  • CO2Emissions.htm

Uploading:

• Upload your revised index.htm page to the public_html folder.
• Upload your jsfiles with your js_styles.css page.
• Upload your assignment3 folder with the files:
  • daytona500.htm
  • MetricPrefixes.html
  • CO2Emissions.htm

Testing uploaded pages

• Follow the checklist for grading shown on the schedule page.
• Make any corrections for any page that does not validate or display correctly.