Description

Geoffrey Matthews
Goals: Getting started with Javascript.
Zip your folder: Put all your files (including the supporting files) in a single folder and make a compressed (zip) archive of the folder.
Files to turn in:
• One HTML file: lab04.html. It will be modified from the supplied penguins.html file.
• One style file, lab04.css. It will be modified from the supplied penguins.css file.
• One Javascript file, lab04.js, entirely of your own creation.
• The images folder of supporting images should be included in your turnin folder, so that the page can be used immediately by the grader.
Lab steps:
• Download and unzip the penguins.zip file on the archive.
• After unzipping the penguins.zip file you will find it contains HTML, CSS, and some supporting images. Play with the web page a bit to get the idea of what is supposed to happen.
• Copy the penguins.html file to your own lab04.html file.
• Copy the penguins.css file to your own lab04.css file. Modify your lab04.html file so it loads your lab04.css script.
• All of the interactivity for the penguins webpage is provided by the pseudo classes hover and active. You are to replace this with Javascript.
• Delete the selectors in lab04.css that use hover and active.
• Change all of the “class” attributes of the penguins (and yeti) to “id”. This will make it easy for your javascript to find them.
• For each of the penguin divs (and the yeti) in your lab04.html file, add onmouseover, onmouseout and onclick events, and have each one of them call an appropriately named Javascript function, e.g. mouseOver1, mouseOut1, click1, mouseOver2, etc.
• Create a Javascript file lab04.js, and make sure you load this script in your lab04.html file.
Javascript coding:
• In the Javascript file, create the functions needed by your penguins to change images to the question mark when the mouse enters, back to the default when the mouse leaves, and to the penguin (or yeti) when clicked.
• Unlike the original web page, your penguin (or yeti) will remain after clicking.
• In order for your Javascript to remember when a particular penguin has been clicked, you will use boolean variables, p1Clicked, p2Clicked, etc. All of these will be set to false at the top of the script. Each of the functions will check this variable first, and not do anything if it has been clicked.
1
• The clicked function will set its variable (p1Clicked, p2Clicked, etc. ) to true, in addition to changing the image to the penguin (or yeti).
• Remember to set a style element with javascript, you use the following pattern. If the style is set like this:
#foo { background-image : url(’mypicture.png’) }
Then the equivalent Javascript code would look like this:
document.getElementById(“foo”).style.backgroundImage = “url(’mypicture.png’)”;
Observe the use of single and double quotes in the url, and the fact that style names such as background-image have to be converted to camel case.
• Big Hint: to make this a LOT easier, get it working for ONE penguin first! Once you’ve got it correct, copying and pasting, and changing the penguin number will make the other penguins (and yeti) a lot easier.
Optional (for advanced students): You can make this assignment a bit shorter by using arrays and function parameters. For example, instead of the eight functions mouseOver1, mouseOver2, etc., you can write a single function mouseOver that takes a single parameter, the number of the penguin.
If you do this, you can also approach the images in two ways. One is to construct the appropriate image name from the number, for example: “images/mound_” + num + “.png”. Another, more general way, is to use an array of image names:
[“images/mound_1.png”, “images/mound_2.png”, “images/mound_3.png”, …]
If you do this, remember that arrays in Javascript are indexed from 0.
Acknowledgements: Supporting files and ideas for this lab came from https://googlecreativelab.github.io/coder-projects/
2