Client-Side Scripting with JavaScript

Part 3 - Creating Documents with JavaScript

Here's a fairly simple table.

Major Fall Spring Annual

Regular HTML for Table

The traditional way to create the table is to code all of it:

<TR><TD> Art </TD><TD ALIGN='RIGHT'>62</TD> <TD ALIGN='RIGHT'>58</TD><TD ALIGN='RIGHT'>120</TD></TR> <TR><TD> Communication </TD><TD ALIGN='RIGHT'>312</TD> <TD ALIGN='RIGHT'>298</TD><TD ALIGN='RIGHT'>610</TD></TR> <TR><TD> Criminal Justice </TD><TD ALIGN='RIGHT'>388</TD> <TD ALIGN='RIGHT'>359</TD><TD ALIGN='RIGHT'>747</TD></TR> <TR><TD> Geography </TD><TD ALIGN='RIGHT'>212</TD> <TD ALIGN='RIGHT'>234</TD><TD ALIGN='RIGHT'>446</TD></TR> <TR><TD> Psychology </TD><TD ALIGN='RIGHT'>262</TD> <TD ALIGN='RIGHT'>278</TD><TD ALIGN='RIGHT'>540</TD></TR> <TR><TD> Sociology </TD><TD ALIGN='RIGHT'>94</TD> <TD ALIGN='RIGHT'>87</TD><TD ALIGN='RIGHT'>181</TD></TR>

JavaScript Functions

HTML code can be generated in JavaScript, with functions used to define actions to be repeated. Syntax for a function is:

     function Name(parameter1, parameter2, parameter3) {
          statement1;
          statement2;
          statement3;
          }
Where Name is the name of the function, parameters are the values passed to the function, and statements are valid JavaScript commands.

JavaScript Code for Table

In the table example, the format for each row can be defined in a function which includes calculation of the total. The tags dividing columns can be assigned to a variable:

function PrtRow(major, fall, spring) { newcol = "</TD><TD ALIGN='RIGHT'>"; document.write("<TR><TD> ", major, newcol, fall, newcol, spring, newcol, fall+spring, "</TD></TR>\n") } The function is then called for each row: PrtRow("Art", 62, 58); PrtRow("Communication", 312, 298); PrtRow("Criminal Justice", 388, 359); PrtRow("Geography", 212, 234); PrtRow("Psychology", 262, 278); PrtRow("Sociology", 94, 87);

The commands to define the table and print the headings would be placed in the document as regular HTML code, followed by the script:

<TABLE> <TR><TH> Major </TH><TH> Fall </TH><TH> Spring </TH><TH> Annual </TH></TR> <SCRIPT LANGUAGE="JavaScript"> function PrtRow(major, fall, spring) { newcol = "</TD><TD ALIGN='RIGHT'>"; document.write("<TR><TD> ", major, newcol, fall, newcol, spring, newcol, fall+spring, "</TD></TR>\n") } PrtRow("Art", 62, 58); PrtRow("Communication", 312, 298); PrtRow("Criminal Justice", 388, 359); PrtRow("Geography", 212, 234); PrtRow("Psychology", 262, 278); PrtRow("Sociology", 94, 87); </SCRIPT> </TABLE><P>
With the script, you could add a new row with this command:

PrtRow("Speech", 52, 47); The traditional way would be:

<TR><TD> Speech </TD><TD ALIGN='RIGHT'>52</TD> <TD ALIGN='RIGHT'>47</TD><TD ALIGN='RIGHT'>99</TD></TR>

Changing Function to Add Average

By changing the function, the display can be changed to include an average:

function PrtRow(major, fall, spring) { newcol = "</TD><TD ALIGN='RIGHT'>"; document.write("<TR><TD> ", major, newcol, fall, newcol, spring, newcol, fall+spring, newcol, (fall+spring)/2, "</TD></TR>\n") }

Major Fall Spring Annual Average

Highlighting Large Programs

Another change to the function can change the color of rows if the program has more than 500 students a year:

function PrtRow(major, fall, spring) { newcol = "</TD><TD ALIGN='RIGHT'>"; if ((fall+spring) > 500) {rowbg = "<TR BGCOLOR='Aqua'>"} else {rowbg = "<TR>"} document.write(rowbg, "<TD> ", major, newcol, fall, newcol, spring, newcol, fall+spring, newcol, (fall+spring)/2, "</TD></TR>\n") }

Major Fall Spring Annual Average

Exercise 2

Create a function called ListGrades to put the grades for each student into a table. The function should list the name, the grades for each of three assignments, the total points earned, and the average.

<HTML> <BODY> <TABLE CELLSPACING=2 CELLPADDING=5 BORDER=3> <TR><TH> Name </TH><TH> Exam 1 </TH><TH> Exam 2 </TH><TH> Exam 2 </TH> <TH> Total </TH><TH> Average </TH></TR> <SCRIPT LANGUAGE="JavaScript"> [insert function here] ListGrades("Susie Adams", 75, 92, 80); ListGrades("David Boston", 95, 86, 79); ListGrades("Kent Clark", 55, 62, 66); ListGrades("Donna Douglas", 85, 72, 80); ListGrades("Steven Early", 99, 92, 88); </SCRIPT> </TABLE> </BODY> </HTML>

Your page should look like this.

Next Next: Language Features