INFORMATION

• This assignment will be given in two parts.
  • Part I is listed below (given in lab on Thursday Oct 4th).
  • Part II will be given in the lab on Thursday Oct 11th.
• 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 can also refer to the lecture notes, posted on the "syllabus" portion of the class web page (see sessions B.1 and C.1).

• Part I of this assignment is worth 5 points, or 5% of your term grade.

1. For this assignment, you will create 2 HTML files in TextEdit (or Notepad on the PC). (Do NOT use Dreamweaver or GoLive -- trust me you can tell!)
   
2. Type your name in the files and your email address as comments.
   1. Look here to learn about what comments are (just read the first few paragraphs!).
   2. And here as to how to write comments in HTML.
      
3. 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.
4. When you are completely finished with all the steps, zip all your files together and email the zip file to me as an attachment. To do this:
5. Put everything that you want to turn in, into a folder
   1. Mac OS X: Right-click on the folder and choose "Create Archive"
   2. Win PC: WinZip program and adding the homework files to the zip archive when it is created.
   3. Send me the .zip file as an attachment. Do not send me the files individually!
   4. Some links as to how to create .zip files:
      1. Create a .Zip file on a PC using Win XP
      2. Create a .Zip file on a PC using WinZip
      3. Create a .Zip file in Mac OS X
6. My email address is: chipp@sci.brooklyn.cuny.edu.

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)

1. Start up TextEdit.
   
   In the file, you will write HTML and Javascript code to do the things listed below.
   
   
2. Look at ex27.html from class on Monday Oct 1st .
   
   
3. 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).
   
   
4. 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!
   
   
5. Save the file and name it with your last name followed by the .html extension. For example, my file would be called jansen.html. Remember to tell TextEdit not to put the "txt" extension after ".html"!
   
   
6. 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 TextEdit 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)

1. Open a new file in TextEdit.
   In this file, you will write HTML and Javascript code to do the things listed below.
   
   
2. Look at the example of an image map at imagemap.html. It uses an image map that we discussed in class, but only using rectangle regions (you may want to look at the example from Lecture C1).
   
   
3. Modify the example so that it uses the image file: http://www.sci.brooklyn.cuny.edu/~chipp/cc3.12/example/c/mymap2.jpg
   
   Here is are the extents for the RED square in the image map. Using the coordinates of the center point, and the width and height of the image (both are 160 pixels), you will be able to figure out the extents of the other 3 squares:
   
   
   
   
4. 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 ex27.html, the argument is 'hello are we done yet?'.
   
   
5. 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.
   
   
6. 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: jansen2.html

OFF-LINE QUESTIONS

Open a new text file with TextEdit.

Put your answers into a new text file with your name as the file name. (Make it a .txt file).

1.
(1 point)
If you have internet access at home, go to http://www.speakeasy.net/speedtest/, take the speed test and report your DOWNLOAD speed and UPLOAD speed by connecting to the SERVER in NEW YORK, NY. (Enter the two speeds in your TextEdit file.)
If you don't have internet access from home, you can do this from a computer lab on campus.

2.
(1 point)
Convert the binary value 01001010 to base 10, base 8 (octal) and base 16 (hexadecimal).

3.
(1 point)
Convert the base 10 value 25 to base 2 (binary), base 8 (octal) and base 16 (hexadecimal).

Hint: Use the technique to convert from base 10 numbers to base 2 (binary) numbers listed in Ch. 12. Then convert from base 2 (binary) to base 8 and base 16.

PART II.

Please read Hackers and Painters for next week's lab.

Part II (worth 5 more points) will be done in lab on Thursday October 11.