Exercises for JavaScript Tutorials

Exercise number Description Link to lesson Solution

1

 Develop a simple web page containing a head (with title), and a body containing some boldface, some italics, some indentation, at least one working link, one working picture (referred to by a relative address) and some text for which both margins and size are varied. week1.htm solution1.htm
2 Develop a web page containing a 2 by 2 table with an original graphic in each of the four cells. Each graphic should be 200 pixels high by 200 pixels wide. (Put real pigment, with colors different that the background, right up to the edges to make sure the graphics really touch.) There should appear no space, gaps nor lines between any of the pictures as the table is viewed in either IE or Netscape. (That is, the pictures should nestle seamlessly next to one another so that the viewer cannot see the edges between them.) When one clicks on any of the cells (from either browser), an alert message should display the filename of the picture that was chosen as well as a count of the number of times that picture has been clicked.  week2.htm solution2.htm
3

Create six images, each 100 pixels square. Name the files sequentially (e.g., file1.png through file6.png or pic0.jpg through pic5.jpg). Build a web page which displays two of the six images (e.g. file2.png and file5.png). Whenever one clicks either image, the picture displayed at that location changes to the next image in succession, starting back at the beginning of the sequence whenever you move past the end (e.g. file5.png goes to file6.png goes to file1.png). Whenever the two image tags display the same picture (i.e., when their source is the same), then show an alert message that announces the file name of that shared picture.

week3.htm solution3.htm
4

Draw either a tree or a face. Your drawing should each be exactly 300 pixels by 300 pixels in size, and in either .jpg or .png format. Make the picture as realistic as you can (work no more than three hours on each). Slice the image into nine pieces, each 100 pixels square. Create a 3 by 3 table containing eight of the nine pieces (in some predefined, but scrambled order) with one remaining cell left blank. Whenever someone clicks on a picture next to the blank cell (either above, left, right or below it), swap the position of the blank and non-blank cells. When the picture is reassembled (i.e., all eight slices are in their proper positions, then replace the blank picture by the missing ninth piece. 

 week3.htm tree/tree.html
5

Create (or modify, with proper citation, borrowings from the public domain) 10 small images (60 x 60 pixels or less). Create a page containing 17 image tags and a button. The button and the first image should appear next to each other near the top of the page; while the remaining 16 image tags should be located (seamlessly) in a table, below the button. When the page loads, the source files associated with the image tags in the table are randomly initialized. When the user clicks the button, three things happen: 1. The source of the first image tag rolls over to another image, with its source being chosen randomly with equal probability from among the 10 images you've created. 2. A random position within the table is chosen and its source file is replaced by a "blank"  image.(Just one is changed; the others remain the same.) 3. If all sixteen images displayed in the table are the same (i.e., when they all finally become blank), an alert box pops up.

 week5.htm solution5.htm
6 Create a page containing pictures of two dice: one labeled "fair" the other labeled "biased". When the user clicks on the fair die, its picture is replaced with a random one of six possible pictures -- each chosen with equal probability (1/6). When the "biased" die is clicked, it also is "rolled" but with unequal probabilities for the 6 faces, with higher numbers having higher probabilities. Specifically, for i between 1 and 6, P(i)=i/21. (Note that 1+2+3+4+5+6=21). Results of the dice rolls should be kept in a textarea at the bottom of the page. A button below that text area, should allow the user to obtain a report (perhaps overwriting the text area) which tabulates the frequency of each of the six outcomes plotted separately for each of the dice. You may use the template shown here, but design your own dice. week6.htm solution6.htm
7 Make a page (using this template, if you like) which
  1. allows the user to enter a string of up to 10 characters and then press a button
  2. when the button is pressed, the 10 characters are moved (and arranged vertically) into ten cells which comprise one column of a table.
  3. calculates the elapsed time between each pair of several successive events:
  1. The page's script begins executing.
  2. The page has loaded.
  3. The user starts typing.
  4. The user types the last character.
  5. The user presses the button.
  6. The last character is loaded into its cell in the textual column of the table.
 week6.htm solution6.htm
8
9