CS 90.3 Assignment 1

The assignment is to implement the client-side scripting functions of the web page at http://babbage.cs.qc.edu/Contours, but using the library functions provided by the textbook for setting up the event handler function. Use web page to be sure you understand what calculations it it performing based on the four text input values.

1. Log into your account and set up your site for the course.

   You may do your assignments anywhere you like, but they must be available for me to grade from your account in the lab. So start by logging into your lab account and setting up your site there. You don’t have to use Dreamweaver, but I will be assuming that you do.

   You can log into any one of the computers in SB room A-205 or A-227 using your account name for this course, which consists of your last name followed by the digits “903” all as a single lower-case string. Use the password “903”; you will be required to change it to something secure the first time you log in.

   The names of the computers are:

   A-205	A-227
   birch	apple
   cherry	fir
   chestnut	juniper
   elm	mimosa
   ginkgo	peach
   hemlock	pine
   hickory	plum
   	spruce
   	sycamore
   	walnut

   Room 205 is an “open lab,” which means you can use the computers there any time you want. The secretaries in the CS Department Office (A-202) will open the lab for you if it is closed. Room 227 is a closed lab, so you will not be able to sit at the computers in that room to use them. However, all of the computers are accessible from the Internet. If you have access to a computer running Windows XP or Vista with a broadband connection, you can use Remote Desktop to log in. From the Start button, go to Programs, to Accessories, to Communications, and you will find it. When it asks you what computer you want to connect to, pick one of the names above and add the domain name “.cs.qc.edu” to the computer name. For example, you would log into ginkgo by entering ginkgo.cs.qc.edu.

   If you are using a Macintosh, OS X comes with a Remote Desktop program you can use in the same way as the Windows version. Under preferences, be sure to set a screen size and resolution to match your computer’s screen. The default value is very low resolution, making it difficult to use.

   There an open source version of Remote Desktop at www.rdesktop.org that might be useful if you are running Linux. But I have had no experience with it.

   When you use Remote Desktop, select one of the computers in A-227 so that students who are on campus will be able to use the computers in A-205. Only one person can use a computer at a time, so if the computer you try is occupied, just try another one until you find one that is available.

2. Set up your Dreamweaver site as described in class.

   Create a directory under your My Website folder, and name it Assignment_01 for this assignment. Capitalization and exact spelling matter here because I will be retrieving your project using a script that will assume your project is located in exactly that folder.

   If you work from off-campus, you should be able to copy your site to a lab computer using WinSCP (Windows), Fugu (OS-X), or ssh (Linux/Unix). If you are logged into a lab computer via Remote Desktop, you can copy files to your "home" directory, which is actually on maple regardless of which computer in the lab you are logged into. Then, from in your lab account, you can copy those files from your H: drive to your My Website folder.

3. Unzip the Contours web page and style sheet into your project directory for the assignment.

   Verify that you can deploy the web page and its style sheet, but note that the page doesn’t do anything because you don’t have any script files yet.

4. Examine the existing script files for the page on babbage.

   In keeping with YSlow Rule #10, the script files have been “minified”, making them difficult to read. The un-minified files are in a subdirectory of scripts. Set up your own scripts directory under Assignment_01 and download my un-minified source code there; verify that the web page now works correctly.

5. Implement your own JavaScript code, based on the library presented in the textbook.

   Create a scripts directory under My Website, copy core.js from the textbook’s code archive there, and put a script tag at the bottom of the project index page to include it. Then create a script file named mycontours.js in Assignment_01/scripts, and create a link to mycontours.js from a second script tag at the bottom of the index page. Create a class named Contours with an init() function that displays an alert(), and register the class with Core. Be sure the alert message gets displayed when you load the page.

   Now Proceed to implement the functionality of my code in your own code. You may “borrow” as much of my code as you like so long as you use the textbook’s event handling model. You might want to consult the JavaScript Reference Manual ( 705 KB; 188 pages) to find out details about the language, but the textbook is probably an easier resource to work with.

6. Add feedback when the user enters incorrect or incomplete values in the input fields.

   Make the background color light red when a text field contains an invalid value, and light green when it is valid.

Perform a link check on your site.

If necessary, go to the Manage Sites panel and be sure you have selected the “case-sensitive link checking” option. Then right-click on your Assignment_01 directory and select the Check Links->Selected Files menu item from the context menu. Fix any errors you find there. (There should be one broken link that you will need to fix.)

If necessary, copy your site from your development system to the lab as described above, and do a final check of your project using the ~<accountname> form of URL. Then send email to me telling me the project is ready for me to grade. I will copy the project from your account in the lab to babbage for testing.

The Subject line of your email must say, CS-90.3 Assignment 1, just like that, in order to get through my spam filters. Within a day, you should receive an “OK, I’ll check it out!” message from me acknowledging that I received your email.