Lab 6: JavaScript
Student Learning Objectives
After completion of this lab assignment, you should have demonstrated the ability to
- Use HTML-Kit to create an externally-linked JavaScript file
- Write JavaScript code to work with arrays and mathematical functions
- Write JavaScript to write XHTML code to mark-up a data table
- Use HTML-Kit to create an externally-linked cascading style sheet
- Use the W3C CSS and XHTML Validation Service (on the actions toolbar online tab within HTML-Kit) to eliminate validation warnings and errors
- Use comments, meta tags, and Tidy within HTML-Kit to create Web, CSS, and JavaScript pages that conforms to the CS 350 Coding Standards
Assignment
- Create a new folder
U:\Lab6. Folder Lab6 will contain three files:
- your
index.html XHTML 1.0 Strict markup file
- your
lab6.css style sheet file
- your
lab6.js JavaScript code file
- In your
lab6.js file, write the JavaScript code to
- Prompt the user for the number of times to roll the dice (use
window.prompt)
- Roll two die that many times, keeping track of the frequency of dice totals (2 .. 12) rolled
- Construct and display an XHTML table with frequency totals and percentages (2 ..12) as illustrated below
- In your lab6.css file, write the style rules to
- Display all values in the table at a font size of 150%
- Center align all table data values
- Display the table's heading row in a White font color and a background color of Navy
- Display the table's footer information in a bold White font and a background color of Cornflower Blue
- Display the body of the table in a Black font and a background color of Azure
To Receive Credit
- Print out and staple together four printouts:
- the displayed Web Page from Firefox or IE 7.0
- your
lab6.js style sheet
- your
lab6.css style sheet
- your
index.html XHTML 1.0 Strict code
- Save your files as
lab6.js and lab6.css and your XHTML page as index.html in folder U:\Lab6 on your cs350 account.
Grading Criteria
- Labs will be graded on a scale of 0 to 10:
- 10: Excellent, no problems detected in the JavaScript, CSS, or XHTML code, the calculations are correct, and the page displays perfectly. No validation errors or warnings
- 9: Very well done: The calculations are correct, but one problem present in the JavaScript, CSS, or XHTML code
- 8 Well done: Two problems remain that cause display, validation, or calculation errors
- 7 Acceptable: Three problems remain that cause display, validation, or calculation errors
- 6 Problems: Four or more problems remain that cause display, validation, or calculation errors
- 5, 4, 3: Incomplete: the lab was attempted but over one-third of the requirements still undone
- 0: Lab not submitted, no work done. You are allowed to drop your lab lowest score
Screen Snapshots
