Introduction
In this practical lab, you are going to learn a little bit about computer programming and find out how JavaScript allows us to do fun things with Web pages.

The first thing you need to do is get hold of the files we are going to use. Your teacher will show you where to find them on the network. Copy the whole folder, not just its contents, to your work area.

Finished? Good. We are ready to start.

Double-click on the index.htm file. It should open in your Web browser like this:

Each one of the buttons will lead you to a lab task. At the moment, only the first two buttons actually do anything. The first thing you need to do is make the other three buttons work.

Let's take a look at the code behind this Web page.

Select View on the menu bar and then choose Source. Notepad will open with some Web page code in it. Near to the top of the page is the JavaScript that runs when you click a button. When you click the Lab Task 1 button, the function lab1 is run; the Lab Task 2 button runs the function lab2; and so on.
A function means a self-contained block or unit of code.

Lab Task 1
This is really easy. If you click the Lab Task 1 button, you will see it pops up a grey box with a message in it like this:

Task: The code that makes this happen is inside the lab1 function. Can you change this code so that the message box displays a different message?

Lab Task 2
Click the Lab Task 2 button. You should now see:

Type your name in the box and click the button. A message including your name will be displayed on the screen.

Click the Back button in your browser to return to this page. Select View and Source to show the page code.

Look at how the JavaScript function prints something on the screen. Can you see how we have taken the name you typed into the text box and joined it together with "Hi there"?

Task: You need to print the same message on the screen 10 times. You could just repeat this code 10 times, and it would work fine. But would that be sensible if you needed to do the same thing 20 or even 100 times?

You are going to use a loop to make repeating this code easier. Your teacher will show you two ways of repeating code with loops using for and while.

Try each method. Which one do you prefer?

Lab Task 3
Return to the main index page and click the Lab Task 3 button. You will see:

Depending what you type in the box, a different picture will appear. At the moment, the only animal that the program knows is a goat. Type GOAT in the box, click the button, and see what happens.

What happens if you type in the name of another animal instead?

Select View and Source to look at the code for the page. In the lab3 function at the top of the code you will see a new instruction, if. Your teacher will explain how this works.

Task 1: You need to add some extra code here so that when the user types in either GOAT or DOG, the correct picture is displayed (goat.htm and dog.htm are the Web pages containing the pictures). You also need to display a message box with a suitable message if the user types in anything else.

Task 2: Your teacher will show you another way of selecting which action to take using the switch statement. Change your code to use this method instead.

When do you think you would use if, and when would you use switch?

Lab Task 4
Still with it? Good!

Click the Back button on your browser to return to the main index page. Now click the Lab Task 4 button:

In this task, you are going to use the selection box to choose which search engine to visit. (You could easily adapt this lab to have a list of any set of Web sites if search engines are a bit boring. You can change the selection box to add as many items as you like.)

If you click the down arrow at the right edge of the box and click Google or MSN, nothing happens. Your teacher will demonstrate what should happen.

As we have done before, select View and Source to look at the page code. You should see this function at the top of the page:

function lab4(website)
{

mypage = website.options[website.selectedIndex].value

if

}

The code mypage is a variable that contains the URL of the search engine you select. Look a little further down the page to see how the selection box is set up.

This is what you need to do:

Task 1: Use the if statement to open a new window with the selected Web site.

Task 2: Make sure that if the top line of the selection box is chosen, nothing happens (your teacher will tell you about !=).

Task 3: Add another three entries to the selection box (perhaps Yahoo, AltaVista, and AskJeeves).

Change the if statement to switch and set it up to open new browser windows loaded with the correct search engine home page.

Lab Task 5
Just as before, open up the Lab Task 5 page from the home page and select View and Source to look at the page source.

This time there are three functions; they are activated when you move your mouse over the flags on the page. Look at the main body to see how these events work.

When you move your mouse over a flag, the onMouseOver event will call the lab5 function. Double-clicking a flag runs the onDblclick function, which calls the newsite function.

Moving your mouse off a flag will run the onMouseout event, which calls the textboxclear function.

Each event passes a bit of data (a parameter) to the lab5 and the newsite functions. This makes sure that (1) the correct country name appears in the text box, and (2) the correct Web site is launched.

function lab5 (country)
{

countryid = country
if (countryid == 1) MyForm.namebox.value = "United Kingdom"
if (countryid == 2) MyForm.namebox.value = ""

if (flagid == 1) window.open ("http://www.google.co.uk")
if (flagid == 2) window.open ("http://")

MyForm.namebox.value =

These are your tasks:
Task 1: Finish off the textboxclear function to clear the text box when the mouse is moved off the flag image.

Task 2: Use the example given in the lab5 function to make sure the correct country name is displayed in the text box when you move your mouse over that country's flag.

Task 3: Write the rest of the newsite function to take you to the correct Google search page when the flag image is double-clicked.

Task 4: Can you rewrite the if statements using switch statements instead?
Martin Callaghan is a Computer Science Teachers Association (CSTA) member.