B211 Lab Week 5

Laboratory Week 5 - Beginning JavaScript

Learning Objectives:

Learn the basic JavaScript language syntax.

Before doing the tutorial, please read:

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

Web Programming textbook chapter 5: JavaScript - The Basics.

Lab week 3 on HTML documents and forms.

You may choose to consult the following set of online tutorials on JavaScript. They are optional for this unit, but will enhance your JavaScript skills beyond the basics covered in this unit.

Webmonkey's JavaScript tutorials

Software required:

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

Instructions:

In this lab, your main objective is to be familiar with the basic ways of using JavaScript code, and the language constructs of JavaScript as described in chapter 5 of your textbook. Please ensure you complete the exercises below and are familiar with these basic constructs. Do not concern yourself too much with display issues for now. In next week's lab, you will be dealing with more directly practical dynamic HTML applications such as data validation and rollovers, as described in chapters 6 and 7 of your textbook.

Debugging JavaScript

As you develop your JavaScript, you will probably make some simple mistakes. You may use some the tools available to you in your browser to help with debugging your JavaScript code.

In Netscape Navigator 4+: The textbook page 107 describe how to bring up a JavaScript console to view errors. More information can be found in Netscape's online manuals.

In Microsoft Internet Explorer 5+: Go to menu item Tools>Internet Options...>Advanced>Browsing. Un-select "Disable script debugging" and select "Display notification about every script error".

Download the following 2 pages to your local disk, and use the tools to detect the errors in the JavaScript. The errors are indicated in the HTML comments in the pages. Use a text editor to correct the code, and reload them to check that the errors are gone.

mistake1.html
mistake2.html

The tools above are very rudimentary. They only catch the basic errors. Take extreme care when developing your JavaScript code. Unlike normal programming language compilers or interpreters, browsers sometimes simply ignore your code when there are syntax errors, misleading you to believe your code is OK . The errors then pop up at later stage when you do not expect it. Take the normal good programming practice of typing very small sections of code at a time (preferable one line at a time if possible), and test fully before moving on.

Versions of JavaScript

Different browsers handle JavaScript in different subtle ways. Unfortunately when developing JavaScript, you do not know what browsers your user will be accessing the page with. Here is a recommended online tutorial on how to program defensively so that your code can handle the differences in JavaScript used by different browsers:

JavaScript Browser Compatibility tutorial at webreference.com.

In this unit, your assignment 2 will be assessed with the browsers that are available in the internal labs. External students should consult your tutors to confirm he/she has the browser and version you are developing your code in.

Example code

Try the simple example code from the lectures and from chapter 5 of the textbook. Make sure you understand how they work.

Exercises:

Read and understand sections 5.4 and 5.5 in your textbook on Variables and String Manipulation. Write JavaScript applications that ask the user for a string, and:

Display what the length of the string is.

Display the same string in upper case characters.

Read and understand section 5.6 in your textbook on Mathematical Functions. Write JavaScript applications that:

Ask the user for two numbers, and display the number with the larger value.

Ask the user for three numbers, and display the number with the largest value.

Ask the user for his/her age, and display the year the user will reach the retirement age of 65. Assume the user is below retirement age. The current year is 2002 (in case you have forgotten).

Read and understand sections 5.7 and 5.8 in your textbook on Statements and Operators. Write JavaScript applications that:

Ask the user for a string, and display an error message if the string is less 5 characters in length. Otherwise, display the string normally.

Ask the user for a positive integer, and display the sum of all integers from 1 to the user's number (eg. if the user gave the number 5, your code should calculate 1+2+3+4+5 and display 15).

Read and understand section 5.9 in your textbook on Arrays. Write JavaScript applications that ask a user for a set of strings, and:

Display the strings in reverse order.

Display the strings in sorted order.

Only display the strings that start with the character 'A'.

(Hint: to get the strings from the user, the easiest way is to use multiple text-boxes, one for each number. There is however a more flexible way: use one text-box, and use the string function split to automatically put the numbers into a correct-size array. See section 5.5 of your textbook for a description of split.)

Modify the example code from section 5.9.1.3 in the textbook so that it doesn't display the spurious last comma when showing the array elements.

Read and understand section 5.10 in your textbook on Functions. Write a JavaScript application that has a function called max3 that takes 3 numbers and displays the largest of the 3 numbers. Convert your application in exercise 2(ii) to use this function.

(Understanding the difference between client-side versus server-side scripting) 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?

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