CS 4, Summer 2006: HW 4, due Friday, August 4

Instructions

The first part of this homework involves writing JavaScript, along with some HTML to hold it. Follow the same instructions as in HW 1 -- write code by hand, make it easy to read, print it from the text editor, timestamp it, and upload it to your private folder. For both problems, you are being provided with some code. Edit and and extend it, and then turn in the whole thing (not just your part). Indicate where you have modified the provided code.

The second part of this homework is a set of written questions. You are not required to write your answers in HTML. However, you should still upload them to your private directory and provide a printout. Upload your file in a format we can read -- plain text, HTML, PDF, Word, or RTF. No timestamp is required.

JavaScript Problems [50 points]

1. [25 points]
   This problem considers how to use packets to deliver a message. The message must be split at the sender, may be corrupted during transmission, and must be reassembled at the receiver. Provided in hw4-packets.html is the basic structure of a program to do the splitting and reassembly.
   

   There are three levels: the original message, the individual packets, and the reassembled message. At the top level is a text box in which the original message is entered, and a text box in which the packet size is entered. Pressing a button then "packetizes" the message (splits it into packets of the size), for display in the second level. Pressing another button "reassembles" whatever is in the textarea for display in the third level. Note that the packetized message may be modified (e.g., removing, reordering, or duplicating packets) before reassembly.

   • The packetize function is missing most of its body. Add code to the body to break the given message into packets of the given size. The final packet may be smaller than the given size.
   • The reassemble function also needs your help. Add code to piece together the lines from the packetized textarea into a single string. The code should detect and give an alert when a packet is missing or duplicated. It should transparently handle out-of-order packets, reassembling correctly regardless of order.

   Some hints:

   • The getArray function (originally seen in the JavaScript sorting example) is provided, and used to extract an array from the textarea.
   • You need to number the packets. For this homework, it's fine to assume there will be no more than 999 packets in a message. To make the process standard, then, use 3 digits (000, 001, ..., 999) for the packet number. The provided pad3 function will pad a number into a 3-character string, which can be stuck on the front of the packet body. To convert such a 3-character string back to a number, you need to tell parseInt that it's decimal; e.g., parseInt(string, 10).
   • The packet number can serve as an index into an array of packets received. Then, how can you recognize duplicate packets? How about missing packets? Once the array is all there, you can simply join it together, as was done at the end of packetize, but glueing together with a blank string rather than a newline.
   • String functions will be required. See a reference manual for functions such as charAt (works like indexing an array) and substr (getting just a portion of a string).

   For extra credit (only do this once the whole rest of the homework is in great shape, and only if you want to), provide additional functionality, such as a checksum for error detection.

2. [25 points]
   We saw that bits can be used to represent anything and everything. Here we use a bit representations for a simple drawing program. Provided in hw4-pixels.html is the basic structure.
   
   • The picture is represented as an array of arrays. Each element in the array is a row, which is an array of Boolean values (true for 1, false for 0). This exactly parallels an HTML table structure. The newPicture function creates the array and the table, based on some size parameters. It also sets up the naming so that the array and table are cross-referenced (see setColor, toggle, etc.).
   • The cells in the table already respond click and mouse events. The color in a cell is set to white for a 0, black for a 1, green for mouse-over a 0, and red for mouse-over a 1.
   • A button clears both the array and the table.

   Extend the code to provide save and open functionality. Rather than dealing with a file, just "save" to a text box or textarea and get back from it. The exact format of how you do that is up to you, but I would recommend basing it on a string of 0s and 1s (using charAt to get each one). The functions should complement each other -- when you save something, do some more pixel manipulation, and then load, you should be right back where you were.

   For extra credit (only do this once the whole rest of the homework is in great shape, and only if you want to), provide additional functionality, such as colors rather than just black-and-white, the ability to draw lines or text, etc.

   Some hints:

   • You'll want to do a "double-nested" loop, as is clear. The outer loop goes row-by-row, and the inner loop goes across the columns in a row.
   • If you write to a textarea, you can use getArray from the first problem to load it back into an array. Each element in the array is then a string corresponding to what you wrote out for the corresponding row.
   • Don't forget to set both the table element and the array element, when you load.

Written Problems [50 points]

1. [10 points]
   Is it true that the Ethernet protocol guarantees that a message will be delivered? Argue your case in a sentence or two.
2. [10 points]
   Pick a handful of your favorite cities, and draw a diagram that has connections between some pairs of cities (but not all). (As you saw with my drawing in class, geographic fidelity is not required.) For each connection, indicate the distance (you can just estimate it). Now, pick a pair of cities that aren't directly connected, and list some of the possible routes between them. What's the shortest? What would happen if a message made it partway along that route and then one of the upcoming connections was broken?
3. [15 points]
   Write your first name in binary. (If you have a long first name, you may choose to write only the first 5 letters.) To do this, first determine the (decimal) ASCII code for each letter, and then convert the ASCII character code to binary. You can look up the answers for the binary representations, but use this as an opportunity to practice the conversion process. Indicate why each binary representation is correct, by writing the individual powers of 2 that are added to yield the decimal value.
4. [5 points]
   Perform binary addition on the binary representation of the first two letters of your name. Show the carry bits.
5. [10 points]
   Choose two floating point numbers, one positive and one negative, each with at least 2 digits after the decimal point. Show the internal representation of these numbers, using the representation from class, with 10 bits for mantissa (including sign) and 6 bits for exponent (including sign).