cis1.0/robotics
fall 2006
hw unit C, part I
INFORMATION
- This assignment will be given in two parts.
Part I is listed below (given in lab on Thursday September 28).
Part II will be given in class on Tuesday October 3.
- This assignment covers the material from unit C in our
syllabus: Data Representation and Storage.
- You may find it helpful to read chapers 12 and 14 in the Reed
text in order to complete both parts of this assignment.
- You also may find it helpful to the lecture notes and examples, posted
on the "syllabus" portion of the class web page (see sessions
B.4 and C.2).
- This assignment is worth 5 points, or 5% of your term grade.
INSTRUCTIONS
- For this assignment, you will create two HTML files in
Notepad.
- Type your name in the files and your email address as
comments.
- Save your work!!!
BEFORE YOU LEAVE THE LAB, make sure that you save your work
(both HTML files and any images files you use) by storing them
on a USB flash drive or by mailing them to yourself.
- When you are completely finished with all the steps, zip
all your files together and email the zip file to me as an
attachment.
- My email address is: sklar@sci.brooklyn.cuny.edu.
The assignment is due (both parts) on Tuesday October 10, 2006.
BE SURE TO ASK IN THE LAB IF YOU NEED HELP WITH ANY STEPS!!!!
PART I. CREATING DYNAMIC HTML.
Step 1. Buttons and Javascript .
(1 point)
- Start up Notepad.
In the file, you will write HTML and Javascript code to do the things
listed below.
- Look at
ex8.html
from class on Monday Sep 25.
- Modify the example so that it uses four different buttons,
labeled "RED", "BLUE", "GREEN" and "YELLOW".
Note that you must give each button a different name as
well as value (i.e., the button label is what is displayed on
the button).
- Modify the onclick function call for each button so that when
you click on each button, a window pops up and displays a
message like "you clicked on the RED button" (or something
more creative than that), instead of the message "hello".
Whatever message you use, it must contain text that indicates
which color button you clicked on and the message must be
different for each button!
- Save the file and name it with your last name followed by
the .html extension.
For example, my file would be called sklar.html.
Remember to tell Notepad not to put the "txt" extension after ".html"!
- Try opening the file with a browser and see how it works.
If any of the elements above don't work, go back into the
Notepad window, and edit the file to fix them.
The reload the file in your browser.
Keep doing this until everything works just perfectly :-)
Step 2. Image maps and Javascript.
(1 point)
- Open a new file in Notepad.
In the file, you will write HTML and Javascript code to do the things
listed below.
- Look at the second half of
ex7.html
from class on Monday Sep 25.
- Modify the example so that it uses the image file:
http://www.sci.brooklyn.cuny.edu/~sklar/cis1.0/examples/mymap2.jpg.
- Replace the href=... sections of each
<area...> tag with onclick=alert('...').
You can fill in the argument to the alert()
function using the text you put in the previous step.
The argument is the text between the single quotes ('),
in the case of ex7.html, the argument is 'hello'.
Note that you will need to update the size of the image in the
<img...> tag and the corresponding coordinates in
each <area...> tag.
Also note that you will need to create a fourth
<area...> tag since there are four colors in the
image.
- When you save this file, name it with your last name, followed by
the number 2, followed by the .html extension.
For example, mine is: sklar2.html.
PART II.
Part II (worth 3 more points) will be available in class on Tuesday
October 3.