Home Dave Heppenstall | E-mail Contact

[Résumé]Résumé [Academics]Academics [About Me]About Me
Lab 3 4 5 6 7 8 9 10 |  » 

JavaScript III

20 March 2008

This tuitorial is an update to the official Lab Ten web page.

On This Page:


Read the Instructions for both the 5 and 10 mark questions.

WARNING - There is a problem with the official lab test file(s) on the ftp server. The problem being that the source code looks nothing like what you are to expect and contains errors. Download one of these files instead:

Review of Lab Nine

Download my copy of the work we created in lab nine: lab9review.html. Right-click on the link and select "Save target As..."

Recall that code for HTML is divided into to two main sections, head and body. The body contains the data which is to be displayed on the web page itself and the header contains information which is not technically content.

This review file does a few very simple things. First, it loads the text value from the comments textarea and shows it in a popup window. Secondly, it parses the numeric value from this text and shows this value and double this value into textboxes one and two respsectively. Finally, if this original number is greater than 50, an alert window will display "PASS"; "FAIL" otherwise.

Form Example

In this example we learned about declaring variables by using var, using built-in functions like window.alert() and parseInt() and creating conditionals by using if statements.

If you surround text with /* and */, the code will be ignored. In this way, you can add comments to your code to remind you what is going on. I have added comments to my code to help you understand the review page.


Unlike last week, we will not be buiding new code directly on top of our old code; we shall start with a template. Download my template for lab ten here: lab10template.html. Right-click on the link and select "Save target As..."

NOTE: If you would like to see the finished code as well, download my completed file for lab ten here: lab10review.html.

In the template, you will see something that looks like this:

Lab Ten Template

What we want this template to do eventually is display a graph using asterisks (*) to visually display to us what grade we received in each course.

You will also notice in this template that I have addedd comments to the HTML by using tags that look like this: <!-- This is a comment -->. This is ignored by the web browser and is only visible when you look at the code in Notepad (or Expression Web).

First, we're going to look at the table. This is a way of displaying elements in rows and columns by using a <table> tag. What we've got so far is this:

<table border="1">
     <td>(0) CIS 1200</td>
     <td><input name="class0" type="number" size="2" maxlength="2" value="0" /></td>

The <table> tag contains a single <tr> (table row) tag. The <tr> tag contains two <td> (table data) tags. This means that we have one row which contains two cells. The first cell contains the text we see, "(0) CIS 1200" while the second cell contains the input field called "class0". Notice that we have added a new parameter called "maxlength," this restricts the number of characters which can be placed into this box.

Copy the table row code and paste it below the original table row four times. Change the text labels for the courses to match your schedule (or mine if you like) and change the names of the duplicate input boxes to class1, class2, class3 and class4 respectively. Do not leave all the names as class0, they must be uniquely identified.

Finished Table

We now have all five rows for our table.

Creating Radio Buttons and Checkboxes

There are two new features we need to add to our HTML: Radio Buttons and Checkboxes. Radio buttons are a series of elements which allow you to select one option out of a list of options. A checkbox is an individual element which may be either selected (checked) or not.

Radio and Check

We want to be able to select which course we want to display the graph for. Create five copies of the following radio button code and place it in your HTML beneath the "Show the graph for which course?" text:

<br /><input name="class_option" type="radio">(#) Course Name</input>

For each copy, change the # and the Course Name to match what you entered in the table earlier. However, this time - do not change the name of the radio buttons! The names must be the same to tell the form that they are all part of the same option. When you are finished, your page will look like this:

Radio Button in Use

Next we're going to add a single Checkbox to our form. Beneath the "Additional options" text in your form, add the following code:

<br /><input name="symbol_check" type="checkbox">Use 'S' instead of '*' as the symbol</input>

Your page will now look like this:

Checkbox in Use

We now have a very pretty web page that doesn't DO anything. Time to fix that...

Using Multiple Functions

Now that we have all of our HTML set up, we can go to writing some JavaScript! You'll notice that I have already created three empty functions for you:

delete_graph(), show_symbol(x) and display().

Aside: Did you notice how I used an underscore_character in two of those function names? Remember that you must not use spaces in your JavaScript function or variable names. If you feel that you need something like kind of looks like a space, use an underscore character: _. If you name a function with a space, your code will break.

Recall that when we write JavaScript in the header of our HTML, they are in your "toolbox" for the web page - they don't run at all until they are called by a button on your form in the body. We can have as many functions as we like in our header.

Lets start with the easiest function. As the comment in the file will show, delete_graph() is going to clear the textarea called grades. The easiest way of doing this is to set the value of this to nothing: " ".

Using the long name to access the form element, add the following line of code to the function:

document.labten.grades.value = " ";

Take a look at the HTML that has already been written for you at the bottom of your form. The button that reads "Clear Graph" is going to call this function when it is clicked:

<input type="button" value="Clear Graph" onclick="delete_graph()"></input>

Form Clear Button

Try it out.

For Loops

(For those of you whom are actually in my lab sections, you'll remember this is the part where I started to jump around).

If I told you to jump ten times, what would you do? Assuming that you did what I told you to do, you would start jumping. In your head, you would also be counting to keep track of how many times you had jumped. As soon as your internal counter reached ten, you would stop jumping.

In programming terms, you did three things: you initialized a counter to one, jumped once, incremented your counter by one and checked the condition to see if you should keep jumping.

We want the display() function to draw ten stars (*). We don't care about any particular course grade yet, we just want ten for now. What does it really mean to want ten stars? Really, you want one star ten times. Believe it or not, this is a helpful distinction.

Add the following code to the display() function:

for (var i=0; i<10; i=i+1)
  document.labten.grades.value =
    document.labten.grades.value + "*";

This is a for loop. The line which begins the loop contains three individual instructions all on one line:

Everything contained within the instruction block contained by the braces { curly brackets } is the code which will be executed for each repetition of the loop. We are getting one star printed out - ten times; one for every repetition of the loop.

Try it out. Now when you press the "Display Graph" button on your form, ten stars will appear in your graph textarea!


If you hit the button multiple times, the stars will all appear on the same row. To get them to appear on different lines, add the following line after the for loop code:

document.labten.grades.value =
  document.labten.grades.value + "\n";

This will add a newline character to the end of the grades textarea. If you placed this code within the for loop instruction block, there will be a new line for every star.

Passing Parameters

Our loop is all well and good for ten stars, but what about if we want X number of stars? We want our loop to work for any number, not just ten.

Take a look again at the functions I created for you: delete_graph(), show_symbol(x) and display(). All the functions we have written for ourselves so far have not had anything in the round brackets after their function name ().

Recall how when we display an alert window using the alert.window() function, if we want something to actually appear in the message box, we need to write something in between the brackets like this: alert.window("Hello there!") or alert.window(myVariableName). What we're actually doing is passing the value we want to the function.

Cut all of your code we wrote in the display() function and move it (paste it) to the show_symbol(x) function. Now, add the following line of code to your display() function:


This should now be the only line of code in the display() function. What are we doing here? We are passing the value 20 to the show_symbol(x) function where it will set the value of the parameter "x" to 20. We can read this value from within the show_symbol(x) function.

In your show_symbol(x) function, change your code as follows:

for (var i=0; i<10; i=i+1)
for (var i=0; i<x; i=i+1)

Now your loop will not repeat ten times, it will repeat x times! In this case, the display() function is telling the show_symbol(x) function to make our loop repeat twenty times!

Try it out.

Reading from a Checkbox

The final step in today's lab is to read the values from our radio buttons and checkboxes that we placed on our form to make our JavaScript more functional.

First, lets read the value from our checkbox. Delete the following code contained within the instrunction block for our for loop within the show_symbol(x) function:

document.labten.grades.value =
  document.labten.grades.value + "*";

Replace it with the following code:

if (document.labten.symbol_check.checked == true)
  document.labten.grades.value =
    document.labten.grades.value + "S";
  document.labten.grades.value =
    document.labten.grades.value + "*";

This code replaces the code to print out a single star with a conditional statement which checks if our checkbox called symbol_check has been checked. Now either a star "*" or an "S" will appear depending on the status of the checkbox.

Stars Working!

We must use two equal signs when comparing two values! We only use one equal sign when we are assigning a value to a variable.

Reading from a Radio Button

Finally, lets read the value from the radio button to determine which value (course grade) we will use to print out stars.

First, create a new variable at the top of the display() function:

var mygrade;

Now add the following if statement before the call to the symbol_check(x) function.

if (document.labten.class_option[0].checked == true)
  myGrade = parseInt(document.labten.class0.value);

Copy and paste this code four more times and change class_option[0] to class_option[1], class_option[2], class_option[3] and class_option[4] in each duplicate copy. Also change class0 to class1, class2, class3 and class4.

The number containing within the square brackets: [#] refers to an individial radio option within a grouping of radio buttons with the same name.

By the way, we have now used all the different kinds of brackets on the keyboard. Can you remember what they're all for?

Finally, change the call to symbol_check(x) function to pass the parameter mygrade instead of 20:


Try it out. Now, when we press the Display Graph button the appropriate value is read from the form and the appropriate number of stars is printed to the screen:

Stars Working!

That's it, you're all done!

Could you not get your code to work?
Download my completed file for lab ten here: lab10review.html.
Look through this review file as you re-read these notes to figure out what is going on.

Lab 3 4 5 6 7 8 9 10 |  » 

- Top of Page