CSCI 121 - Lab 4

Lab Resources

• Brackets - Public domain code editor
• Google Account - Google account
• Google Drive - Cloud document storage

Lab Instructions

In this lab you will be authoring a web page that showcases how to use JavaScript functions, the switch statement, for loops and the Document Object Model (the last in a rudimentary fashion). The goal is to provide a page that displays an "old-fashioned" Multiplication Table. Please read through all of the instructions below before starting.

1. Start: Use Brackets to create a file named lab4.html.
2. Include a title for the page with your name, class and lab, i.e. Your Name - CSCI 121, Lab 4
3. Repeat the title text as the heading for the page.
4. Your document should have main background and text colors OTHER THAN white text on a black background by changing the style of one element only in the document. Change in the STYLE block of the HEAD.
5. Your document must included a captioned table with 12 rows, 12 columns, each cell having a width and height of 40 pixels as shown below.
6. Use a STYLE block in the HEAD section to style the table, its rows, its cells. To stylize the table elements DO NOT specify style or set formatting attributes on individual TR, TD elements within the BODY.
7. Have three "buttons" on your page below the table, labeled as shown below.
8. Checkpoint 1: The page should initially look like this (not to scale):
• 
9. Continue: Next, you will add the code that will fill the top header row and the first column of each subsequent row with text labels when the "Fill headers" button is clicked.
10. To fill the header row (1st row starting with 2nd column) and label column (1st column of each row starting with second row) you should:
1. Add ID attributes to each of the TD elements needed to be filled with a label. See "Hints" section below.
2. Code a function entitled: fillHeaders()
3. The fillHeaders() function should have a single for loop that internally places a label (Zero, One, Two...) within the innerHTML of each of the TD elements that make up the header row and first column of each row.
4. The for loop should utilize another function called getLabel() which is passed in a single parameter named num, which is a number variable, having a value between 0 and 10, inclusive.
5. The getLabel() function must return a string corresponding to the label of the number passed in (e.g. 0 returns "Zero", 1 returns "One",...).
6. The getLabel() function must use a switch statement internally to perform its main task of returning the appropriate text label given a supplied number.
7. Make sure to wire up the "Fill headers" button so that it calls the fillHeaders() function by populating its onclick event.
11. Checkpoint 2: The page should look like this when clicking the "Fill headers" button:
• 
12. Continue: Next, you will add the code that will fill the rest of the table when the user clicks the "Fill table" button.
13. To fill the table you should:
1. Add ID attributes to each of the TD elements needed to be filled with a product (row x col). See "Hints" section below.
2. Code a function entitled: fillTable()
3. The fillTable() function should have two for loops, one nested within the other used for setting the innerHTML of each appropriate TD element to the product of the row and column values of the Multiplication Table.
4. Make sure to wire up the "Fill table" button so that it calls the fillTable() function by populating its onclick event.
14. Checkpoint 3: The page should look like this when clicking the "Fill tables" button:
• 
15. Extra Credit: Add a "Reload" button like the one shown and add the JavaScript code behind it that will cause the page to reload, essentially clearing the table.
16. At the bottom of the page include a mailto link with the following syntax (change your_email accordingly):
• <a href="mailto:your_email@millersville.edu?subject=Lab 4 Grade">Email grade</a>
17. Important notes/hints:
1. Make sure to name the file: lab4.html
2. For the sake of easier grading please limit your lab to the single lab4.html file only.
3. Make sure that your mailto: link uses your Millersville email address and does not include spaces anywhere.
4. The reason for adding ID attributes to the TDs is so that those elements may be refereced within functions through the use of: document.getElementById();
5. ID values that are derived from a row, column, product convention that takes into account column number, row number, and product cell will likely be very useful (required) in your for loops when referencing TD elements. Examples of ID formats that might help are: "c0", ... "c10", "r0", ... "r10", "p0x0", "p0x1", ... "p10x10".
6. Use the debugger in Chrome when testing.
7. Test "as you go", at each checkpoint.
18. Upload the lab4.html file to Google Docs, storing in your "CSCI 121" folder.
19. Share the lab4.html file with thomas.rogers@millersville.edu.

Lab 4 Sample

Lab 4 sample page here.

Lab 4 Observations

Lab 4 observations here.