New Perspectives on HTML, CSS, and Dynamic HTML 5th edition Tutorial 14 Case 3 Sporting Abstract and Statistical Review

Data Files needed for this Case Problem: gradient.png, modernizr-1.5.js, nfltxt.htm, sasr.css, sasrlogo.png, stats.js, table.css, tabletxt.js

 

Sporting Abstract and Statistical Review Walter Delacreaux is the owner and operator of Sporting Abstract and Statistical Review, a new blog and forum to report on and analyze data from the world of sports. Walter wants to fill his Web site with useful tables that other people who share his enthusiasm for statistics can review and study. He wants these tables to be as interactive as possible. One feature he wants to add to his tables is the ability to sort them in a different order by clicking a column heading. Figure 14-70 shows a preview of the Web page you’ll create for Walter.
Walter has stored statistics about quarterbacks, running backs, wide receivers, kick returners, and punt returners in a set of multidimensional arrays. He also has created design styles for the stats table that he wants to appear on his Web page. Your job will be to write the code that generates the node tree for the Web table, and to provide commands to sort the contents of that table when a user clicks one of the table heading cells. Walter wants the table to be sorted by default in descending order, but users should be able to change the sort direction by clicking the same column heading twice in succession. Walter also has provided buttons to allow users to switch from one category of player to another.
Complete the following:
1. Using your text editor, open the nfltxt.htm and tabletxt.js files from the tutorial.14\case3 folder. Enter your name and the date in the comment section of each file, and then save them as nflstats.htm and table.js, respectively.
2. Take some time to view the contents of the nflstats.htm, table.js, and stats.js files, noting the structure of the HTML document and the global variables and functions in the two JavaScript files.
3. Return to the nflstats.htm file in your text editor, and then add a link element to connect the file to the table.css style sheet file. Add script elements to connect to the stats.js file followed by the table.js file. Save your changes to the file.
4. Go to the table.js JavaScript file. Below the comment section, declare the following global variables:
a. caption, which is used to store the text of the table caption. Set its initial value to the value of the qbStatsCaption variable.
b. head, which is used to store the array of column headings. Set its initial value to the value of the qbStatsHead variable.
c. sortIndex, which is used to store the column index of the table column by which the stats table will be sorted. Set its initial value to the value of the qbStatsSort variable.
d. stats, which is used to store the multidimensional array of player statistics. Set its initial value to the value of the qbStats variable.
e. sortDown, which is used to indicate whether the table is sorted in descending or ascending order. Set its initial value to true.
5. Add a command to run the makeStatsTable() function when the page is loaded by the browser.
6. You’ll create the Web table with separate functions for each part of the table. The first function you’ll create is the createTableCaption() function, which is used to create the structure of the table caption. The function has two parameters, table and caption, which are used for the table element node and the caption text, respectively. Have the function create the element node <caption>caption</caption> where caption is the value of the caption parameter, and then append that element node to the table parameter.
7. Create the createTableColumns() function. The purpose of this function is to create the structure of the colgroup element. The function has two parameters: table, which represents the table element, and cols, which is an integer containing the number of columns in the column group. Use a for loop to generate the node structure <colgroup> <col /> <col class=”sortColumn” /> <col /> … </colgroup>
where the number of nested col elements is equal to the value of the cols parameter. Note that Walter wants the column by which the table is sorted to be given the class name sortColumn. Therefore, within your for loop, test each index number to determine whether it equals the sortIndex variable. If it does, add the class attribute to the col element. Append the node structure to the table parameter.
8. Create the createTableHead() function. The purpose of this function is to write the table header. The function has two parameters: table for the table element and cols for the number of columns in the header. Use a for loop to create the node structure <thead> <tr> <th id=”1sortcolumn”>head[1]</th> <th id=”2sortcolumn”>head[2]</th> … </tr> </thead> where head[1], head[2], etc., are the values from the head array global variable you declared in Step 4. Append the node structure to the table parameter.
9. Create the createTableFoot() function. The purpose of this function is to write the table footer. The function has two parameters, table and cols, and creates the node structure
<tfoot> <tr> <th colspan=”cols”> Stats compiled by SASR &copy; 2015. All rights reserved. </th> </tr> </tfoot> where cols is the value of the cols variable. (Hint: You must use the colSpan property to reference the colspan attribute.) Append the node structure to the table parameter.
10. Create the createTableBody() function. The purpose of this function is to write the rows and columns of the table body. The function has three parameters: table representing the Web table, rows, which contains the integer value of the number of rows in the table body, and cols, which contains the integer value of the number of cells within each table row. Use a nested for loop to generate the node structure <tbody> <tr> <td class=”textCell”>stats[0][0]</td> <td class=”numCell”>stats[0][1]</td> … </tr> <tr> <td class=”numCell”>stats[1][0]</td> … </tr> … </tbody>
where stats[0][0], stats[0][1], etc., are the values from the stats multidimensional array you declared in Step 4. Note that for each td element, you add a class attribute with the value textCell or numCell based on whether the value displayed in the cell is a number or a text string. Use the isNumeric() function provided in the table.js file to make this determination. Append the node structure to the table parameter.
11. Create the makeStatsTable() function. The purpose of this function is to sort the statistical values, put the different parts of the table together, and append the table to the Web document. Add the following commands to the function:
a. Declare a variable named rows equal to the length of the stats array.
b. Declare a variable named cols equal to the length of the head array.
c. Use the JavaScript sort method along with the colSort() function to sort the contents of the stats array.
d. Create a table element named tableElem with the id statsTable.
e. Call the createTableCaption(), createTableColumns(), createTableHead(), createTableFoot(), and createTableBody() functions using tableElem as the parameter value for the table parameter and caption, rows, and cols as the values for the caption, rows, and cols parameters, respectively, to construct the entire node structure of the Web table.
f. Declare the statsBox variable, referencing the element in the Web document with the id statsBox.
g. Replace the first child node of statsBox with the tableElem element node.
12. Save your changes to the file, and then load nflstats.htm in your Web browser. Verify that the content of the Quarterbacks table is displayed on the page.
13. Next, you’ll enable users to sort the table by different columns. Return to the table.js file in your text editor. Go to the createTableHead() function. For each th element node generated in your for loop, add an onclick event handler to run the changeDirection() function when clicked.
14. Create the changeDirection() function. The purpose of this function is to either
change the sorting direction of the currently selected column, or sort the table by a
newly selected column. Add the following commands to the function:
a. Use the parseInt() function to extract the index number from the currently selected column. (Hint: Use the this keyword.)
b. If the index number is equal to the value of the sortIndex global variable you created in Step 4 (indicating that the user has clicked the current sort column), use the negation operator to change the Boolean value of the global sortDown variable from false to true or from true to false. Otherwise, change the value of the sortIndex variable to the index number of the currently selected column.
c. Call the makeStatsTable() function to regenerate the statistics table.
15. Save your changes to the file, and then reload nflstats.htm in your Web browser. Verify that you can change the sorting column by clicking each column heading, and that you can toggle the sorting direction by clicking each column heading in succession.
16. Next, you’ll enable users to select different statistics tables to view in the Web page. Return to the table.js file in your text editor. Create the changeTable() function with a single parameter: statsCategory. The statsCategory parameter will contain a text string indicating the statistics table to view. Add the following commands to the function:
a. Use the eval() function to change the values of the global variables caption, head, sortIndex, and stats to the value of the statsCategoryCaption, statsCategoryHead, statsCategorySort, and statsCategory variables, respectively, where statsCategory is the value of the statsCategory parameter.
b. Change the value of the sortDown global variable to true.
c. Call the makeStatsTable() function to regenerate the statistics table.
17. Add informative comments to the code in your file and then close the file, saving your changes.
18. Return to the nflstats.htm file in your text editor. Locate the input elements for the five table buttons, and then add an onclick attribute to each input button to run the command changeTable(stats) where stats is either qbStats, rbStats, wrStats, krStats, or prStats depending on whether the Quarterbacks, Running Backs, Wide Receivers, Kick Returners, or Punt Returners button is clicked.
19. Save your changes to the file, and then reload nflstats.htm in your Web browser. Verify that you can load different statistics tables by clicking the five statistical category buttons.
20. Submit your completed files to your instructor, in either printed or electronic form, as requested.