B211 Lab Week 6

Laboratory Week 6 - More JavaScript

Learning Objectives:

Learn to use JavaScript built-in objects, and event handlers.

Learn to write JavaScript for basic DHTML (Dynamic HTML) tasks.

Before doing the tutorial, please read:

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

Web Programming textbook chapter 6 and 7.

Lab week 3 on HTML documents and forms, and lab week 5 on basic JavaScript.

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:

Here are links to example code from chapter 6 and chapter 7 of the textbook. You will not be required to use the full set of object-oriented methods in the chapters. In this unit, you are only required to use the available built-in objects in given in section 6.4, and use them for common DHTML tasks. Follow the exercises below to determine which sections and examples you need to know.

If you have prior background in object-oriented programming (such as from Java in B102 Introduction to Computer Science and B104 Principles of Computer Science) or you are keen learn more on your own, you may explore the more complex code from the chapters on your own. If so, I suggest you get a more comprehensive JavaScript book, such as the ones I recommended in the readings page.

Note that some of the example code linked above are scanned from the textbook, and so are not indented and formatted properly. Please ensure you indent and format your code for readability. You will lose marks in your assignment 2 if you code are not formatted properly and easy reading.

When typing your own code, also be very careful with upper/lowercase. It makes a difference on some browsers, and not in others. It is a very common cross-browser compatibility problem.

Exercises:

Read and understand section 6.4.1 in your textbook on The Document Object. Write a JavaScript application to ask the user for a colour (a string), and change the background colour to the one specified by the user. Instead of using hexadecimal notation, you may get a list of 16 commonly used colour names from here.

Read and understand section 6.4.2 in your textbook on The Window Object, and section 7.2 on Opening a New Window. Look at the example code ex7-2.html. Write a HTML document containing two links, one to the University home page (http://www.murdoch.edu.au) , and another to the School of IT home page (http://www.it.murdoch.edu.au/). When the user clicks on the links, display the page in a new window of width=200 and height=100.

Read and understand section 6.4.3 in your textbook on The Form Object. Look at the example code ex6-4-3.html, as well as the improved versions ex6-4-3a.html and ex6-4-3b.html. Write a similar JavaScript application that verifies the text a user submits, but only checks if it is empty. The application should give a warning message to the user if the text is empty.

Read and understand section 6.4.4 in your textbook on The Browser Object. Look at the example code ex6-4-4-1a.html, which is the same as the code in section 6.4.4.1 but with the unecessary object creation code removed (the code in the textbook is in ex6-4-4-1.html).

Read and understand sections 6.5 in your textbook on Events. Look at the corresponding example code ex6-5.html.

Write a HTML document that contains the following tags (refer to lab week 3 and textbook chapters 2 and 3 if you have forgotten details of HTML):

<a href="...>

<img ...>

<form ...> containing textboxes, checkboxes, radio buttons, password boxes, normal buttons, and submit button.

For each of the tags, refer to their corresponding list of available events handlers in table 6.4 of the textbook. Add a simple alert() function as the event handler for each of the support events for each of the elements, in the same way as the example code given in the same section of the textbook. Load the HTML document in your browser and determine which of the event handlers works and which doesn't.

Try adding to HTML elements the event handlers to not listed in table 6.4. Eg. try adding to the onMouseOver event handler for ALL the elements. Reload the HTML document and see which one works.

This exercise if to allow you to determine if your browser supports the standard list given in table 6.4, and if your browser supports extra events for certain HTML elements. Keep this in mind for your assignment 2.

[Note related to this issue of browser event support: if you attempt the textbook's chapter 6.6 exercise 3 under JavaScript Events, you will find it very easy if you have Microsoft IE browser, since it recognizes the MouseOver event for the <img> element. But other browsers do not. So if you happen to not use IE, don't concern yourself if you attempt this exercise and can't complete it.]

Read and understand sections 7.7 in your textbook on Moving Images. Look at the corresponding example code ex7-7.html and the simpler ex7-7a.html. The code does not work for IE because of the difference in representing layers and values of properties. The equivalent code for IE can be found in ex7-7ie.html.

Write an JavaScript application that moves an image from the bottom of the screen and stops at the top of the screen.

Just to show you what is possible with layers, a bit of ingenuity, and some maths, here is an example JavaScript application downloaded from the net. Here a link to a whole heap of similar JavaScripts.

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