JavaScript Lesson 9, Homework questions

Q1

Create a program that contains two images, such that when the mouse pointer moves over either of the two images, they swap round.

Q2

The following diagram shows a cartoon character walking across the screen. Create a program containing a one-dimensional table, with several table divisions (using the <TD> tag) in it, and use it to make a picture move across the screen.

man 1 man 2 man 3 man 2 man 1 man 2 man 3 man 2 man 1 man 2 man 3 man 2

Q3

Write a menu program that allows the user to select from a range of web sites by clicking on a picture. The access to the web sites themselves should be through a single hyperlink, which is assigned to different addresses by the menu options.

Q4

Here is a hyperlink containing a picture:

<a href="http://www.mysite.com"><img src="pic.gif"></a>

How would you rewrite this so that it didn't need to use a <a> tag at all?

Q5

How would you describe the effect of the following instructions in English?

  • document.go(-6);
  • document.go(3);

If you activate a web page "from scratch" (i.e. not via another link), and it executes a JavaScript program containing the instructions that you see above, what effect do they have then?

Q6

Write a simple noughts-and-crosses game (tic-tac-toe) that allows two players to place either a cross or a nought as appropriate inside a table with 3 rows and 3 columns. The program should detect when one of the players has won, but need not be any more complicated than that (i.e. there is not need to implement a function to let the computer play against a human opponent - unless you want to!)

Q7

Is it possible to get the cells of a table to change colour when you click on them. In fact, it is fairly easy - if those cells contain images which completely fill them. The images would have to be rectangular "slabs" of colour, and clicking on them would cause the source of the image to change to another rectangular slab of colour. How would you go about implementing this?

Q8

As well as having a src property, the elements of the array document.images[] have a width and a height property, which specify the width and height of the image in pixels (screen dots). For instance, the following command ensures that the first picture on the screen is exactly 120 pixels wide (about one eighth of the screen width, typically):

document.images[0].width = 120;

Write a program which displays the same image 5 times, starting with a width of 20 pixels and doubling in width for each subsequent image.