B211 Lab Week 5

Laboratory Week 5 - Scripting with JavaScript

Learning Objectives:

Learn to write JavaScript.

Learn some common uses of JavaScript.

Before doing the tutorial, please read:

Topic 2 lectures on "Client-side scripting with JavaScript".

Web Programming textbook chapters 5 and 6 on JavaScript.

You should also be familiar with the material in lab week 3 on HTML documents and forms.

Software required:

This lab requires a graphical web browser (like Netscape Navigator or Microsoft Internet Explorer), and a text editor (like Notepad). Students in the internal labs may make use of the software available in the lab machines.

Exercises:

In the following exercises, you will be looking at some example code (from lectures, textbook, and web sites). This will assist you in understanding how to use JavaScript works. But to do a good job of writing your own JavaScript, or modifying examples significantly, you will need to know the syntax of the language as described chapter 5 of the textbook. The lecture on JavaScript only gives an introduction to the syntax. You will need to know the details in the textbook chapter 5 to do more.

VERY IMPORTANT! Take extreme care when typing in your JavaScript code. Unlike normal programming language compilers or interpreters, you will get minimal error reporting from browsers if you have syntax errors in your code (Netscape Navigator has none, IE has simple messages on its status bar). If the browsers cannot interpret the code, it simply ignores the JavaScript. Many students in the past have spent days trying to "debug" a function, when the mistake was actually a missing bracket. I suggest you type and test small sections of code at a time (preferable one line at a time if possible), so you know when mistakes occur.

Copy the example HTML/JavaScript code on pages 28-30 in the JavaScript lecture into a text editor. Save them into files with extension .html, and access them using a web browser. Make sure you understand what the JavaScript does.
Note: you will need to find an image file (GIF or JPG) for the example code on page 29. If you do not already have one, you may save the two title images at the top of this page (right click and select "Save As..." in Netscape Navigator or MS Internet Explorer).

Using a text editor, type in the following sample code from the textbook and try them on a web browser. Make sure you understand how they work.

page 125 (code on bottom half of the page only)

page 139

page 148

page 151

page 141

Look at some use of JavaScript to do form validation on the B211 web site, for example:

the lab allocation page, and

the password query page.

Use your browser's facilities to look at the HTML/JavaScript source (eg. the View>Source menu items on Netscape Navigator and MS Internet Explorer). These examples are written in the same style as what I have taught in the lectures. Make sure you understand how they work.

Write your own HTML and JavaScript to do the following:

Create a page with an image. When a user clicks on the image, a new window pops up with the message "Stop clicking on me!". (Hint: very similar to the example on page 29 of the lecture notes)

Create a form which contains a textbox and a submit button. Put another simple URL as the action field for the form. When the user clicks on the submit button, the JavaScript checks that the textbox is not empty before proceeding. (Hint: look at the examples in (2)).

Repeat (i), but instead of using an image, use a button. (Hint: There are many ways to do this. The simplest is to create a whole form with one submit button, but use your own words instead of the default word "Submit". Another more complicated way is to have rollover action on an image when it is clicked, such as that described in 6.7 of the textbook.)

If you can complete these 3 exercises, you will have no problems with the JavaScript parts of Assignment 2.

Try this example HTML/JavaScript document. It uses JavaScript to implement password protection. Based on what you have learnt above, can you determine what the password is?

(Optional) Try the more complex examples from chapter 5 and 6 of the textbook. Don't hesitate to consult the tutor to assist you in understanding the code.

Remember to read the week's development on the Internet by scanning through relevant articles in the IT section of Tuesday's the Australian newspaper - use the online version or the physical copy in the University library. Get into the habit of keeping up with current developments. Test your knowledge of major developments by going through the Good News Week self-tests.

H.L. Hiew
Unit Coordinator