CS110Introductionsyllabusassignmentsdocumentationproject

The following questions were gleaned from past semesters' Q&A conferences and Leah Graham's experience as a TA. (She wrote the first draft.) We hope they'll give you instant answers to your questions, instead of having to wait for someone to respond to your question on the conference.

If there there's some common question we've omitted, please let us know and we'll add it. We'd like to keep improving this FAQ and making it more useful.

  1. Issues with the System or your Computer
  2. Help! How do I get it?
  3. Basic HTML
  4. Image Manipulation
  5. Forms
  6. Javascript and Form Validation
  7. Javascript Errors

I. System Issues

Q. My computer is frozen ...

A. Even in this course, most computer issues are still handled by IS, so fill out a dormnet report, call the help desk or post to Computing Questions for problems like this. Sometimes your tutor, lab instructor, or professor may know the answer, but that's not really their expertise or their job, so it's better to go to the experts.

Q. My Puma account doesn't work!

A. If you mean that you can't connect by FTP because your username/password is refused, this usually means it's a problem with your password, in which case, read the next question. If it's something else, but you're sure it's a problem with Puma and not your local computer, you should send email to the CS department system administrators: cs-sysadmin@wellesley.edu. In FirstClass, cs-sysadmin works.

Q. I forgot my password or my password doesn't work: can you tell me what it is?

A. Unfortunately, we can't. No one can. The information simply isn't stored on the computer. However, the system administrators can reset your password, changing it to something else of your choosing. To request that they do that, fill out the following form:

http://cs.wellesley.edu/accounts/passchange.html

II. Help! How do I get it?

We have a lot of support in this class, including some excellent tutors who work very hard. We're all glad to help you, but we also want you to become more savvy and independent. Towards that end, we'd like you to think about the following hints and guidelines when you need some help with your assignment.

First, read over the debugging tips and the etiquette rules at the end of it. Once you've used those ideas and done your best to cut the problem down to manageable size and debug it yourself, by all means ask the tutors or your professors for help. That's what we're here for. But first, you might check the list below to see if yours is a common problem.

  • reduce the code down to its essentials, then,
  • Use "View Source" in Netscape for HTML errors
  • In Netscape, type "javascript:" in the "location" box to see JavaScript errors. Note the colon at the end of that; it's required. In IE, make sure you go to "Edit/Preferences" and select the "Web Content" tab. Then make sure the checkboxes for "Enable Scripting" and "Show Scripting Error Alerts" are both checked.
  • double check angle brackets, quotation marks, and other syntactic stuff
  • double check spelling and spacing
  • double check capitalization
  • double check filenames
  • post to the Q&A.

III. Basic HTML

Q. I uploaded my file using Fetch (or WS_FTP) and it's not showing up.

A. Did you upload it to the correct directory? You have to make sure you upload it to the public_html directory. Only files that are under public_html can be on the web. (You would use your home directory for private files, but we won't be using that in this course.) Fetch/FTP automatically puts you in your home directory, so you have to remember to switch to public_html every time. (Yes, it would be nice if it didn't do that.)

Q. The lines of my HTML file are all messed up! Or, all the code is in one long line!

A. This answer is a little long, so bear with me. Different computers use different numeric codes to represent the end of a line. The MacIntosh uses character 13 to mean "end of line," while Unix (Puma is a Unix machine) uses character 10 to mean the same thing, and while Windows uses *both* characters, meaning it puts both a 13 and a 10 into your file when you press the "return" key.

If you edit your file using, say, BBEdit on a Mac, save it to your Zip disk, and then open that file using Notepad on Windows, the file will look all messed up (like one long line), because the Windows machine doesn't see any line-breaks. Similarly, if you edit in Notepad on Windows and then look at it on a Mac in BBEdit, it will see line-breaks because of the "10" characters, but there will also be these "13" characters it doesn't understand. Programs like Fetch and FTP have ways to transfer two different kinds of files. These kinds are usually called "ASCII" (AKA "text") and "binary." An ASCII file is plain text, like an HTML file or an email message--the sort of thing where you type and there are lines with endings that need to be fixed. A binary file is everything else, such as an image file (PNG, JPG, GIF), sound files and so forth. If you transfer files between computers using FTP (or Fetch), the program can translate these line-ending characters when it copies the file. If you switch on the "ASCII" or "Text" mode, it will do that. Therefore, when you transfer with Fetch or FTP, if it gives you a choice of file type, make sure you use ASCII for your HTML files and Binary for your pictures. There's often a third option (called something like "Automatic" or "Auto"), where it tries to guess which to use. It usually guesses correctly, so that option is fine. Just don't use BINARY mode for HTML: it will mess up your line endings.

Q. How do I create a directory on the server?

A. Using Fetch, there's a "create directory" menu item under the "Directories" menu. Using WS_FTP, there is a button called "mkdir" that does the trick. (MKDIR is short for "MaKe DIRectory".)

Q. I can't see the new directory!

A. This is actually a variation on the first question in this section. Something only shows up if it's within public_html and that includes directories. Make sure any directories you create are subdirectories (or sub-sub-directories...) of public_html.

Q. My picture is not showing up on the web. Why?

A. Check the following items before asking for help:

  • Are you using the correct image source tag? It should look like this:

    <IMG SRC= "mypic.gif">

  • Are you sure your picture is a .gif or .jpg? Simply renaming it with a .gif ending may not be enough--you should export it using Fireworks, PhotoShop or Graphics Converter to be sure.
  • Is your picture a PNG file? PNG is the native file format for Fireworks, and so it's easy to do that. PNG is supported by Netscape, but not by IE. For maximum portability, use GIF or JPEG.
  • Does your file exist where you think it exists? If your picture is in a subfolder called "pictures" but you don't include that information in your image source tag, the computer will not know where to look. The proper source tag would be:

    <IMG SRC="pictures/mypic.gif">

  • Have you spelled the file name correctly? Double check punctuation, spelling and capitalization: "Leah_Graham.jpg" is not the same as "leahgraham.jpg". Even "leah.Gif" is not the same as "leah.gif". I know this may sound obvious, but it's very easy to overlook little things like this. Have a friend look at it; sometimes all you need is a fresh pair of eyes.
  • Is the code immediately preceding your image tag correct? If you forgot to close another tag or if there was an error in the tags before the image, your image may not show up correctly or at all. Check this code too when looking for errors.
  • Are you sure you uploaded the picture correctly? Check using Fetch or FTP that the time shown for the file is new enough that you know it's the new file, and not the old one.
  • And finally, and most importantly:

    Hold down the shift key while you hit the reload key to view the latest version of your web page! Reload alone is not enough!

    The problem here is that sometimes the browser is showing you the old document, even though you've correctly fixed the problem.

Q. My link doesn't work. Why?

A. Check the following first:

  • Are you using the correct filename and path? If you are trying to link to a page called "leah.html" inside a subfolder called "me" you must specify in your link tag that the file you want (leah.html) is in a specific subfolder (me) like this:

    <A HREF="me/leah.html">My page. </A>
    
  • Double check spelling, punctuation and capitalization. Most of the errors I see, even near the end of the semester when students have had lots of practice, are errors of spelling and capitalization.
  • Check the code immediately before your link tag. Certain kinds of preceding errors, particularly unclosed tags, can confuse the browser and cause correct code to be ignored or processed incorrectly.
  • Make sure the file you're linking to exists where you think it exists. If you say that the file is in the subfolder "pages" but it really isn't, your link will not work. You can check this using Fetch or FTP.
  • Reload using the shift key!

Q. I can't remember how to upload my files.

A. Using Fetch from a Mac, follow these instructions:

  • Open Fetch from the Apple pull-down menu in the upper left of the screen. A connection window appears.
  • Change "www.wellesley.edu" to "nike.wellesley.edu" and enter your username and password. You can leave the remaining fields blank. This will open up your own personal window to your files.
  • To upload a file, simply open the correct folder in the Fetch window by double-clicking on it. Then drag (select the file with your mouse, and then hold down the mouse button while you drag the file) the file you want to upload from wherever it is now (your desktop, your disk, etc.) into the Fetch window. Voila!

Q. I can't remember the hexadecimal colors...

A. You can find a color chart that gives you hexadecimal color and RGB values for browser-safe colors by clicking here. Thanks to Paul Meyers for making the chart.

IV. Image Manipulation

Q. Where can I find a program like Fireworks or Photoshop to edit pictures on my home computer?

A. If you live on-campus, you can download a key-served version of Fireworks from the Wellesley College network for free! For a PC, check out:

http://www.wellesley.edu/Computing/Fireworks/fireworks3installpc.html

For a Mac, check out:

http://www.wellesley.edu/Computing/Fireworks/fireworks3installmac.html

You cannot download Photoshop for free, though, and buying it will cost you a pretty penny.

Finally, if you live off-campus, Wellesley key service can't be used. One alternative is free download software from Macromedia. At times in the past, Macromedia has offered free trial versions of their software, including Fireworks and Dreamweaver, from their web site, macromedia.com. Just click on "downloads," or click here. One thing to keep in mind is that the trial version of the software only works for a limited number of days--30 days, as of this writing. Thus, you want to make sure that your trial period will cover the time that you need the software most.

Finally, as a last resort, you could actually buy the software, though be warned. As of this writing, Fireworks and Dreamweaver cost $300, each.

Q. My image is too big. How can I make it smaller?

A. You can reduce the file size by reducing the size of the picture (physically reducing the size of your image from, say, two square inches to one square inch), reducing the bit depth, reducing the pixels per inch, or compressing it into a .gif or .jpg. Check the help files of an image editor program (like Photoshop or Fireworks) to find out how to do these things specifically.

Q. I cannot make my image background transparent. How do I do it in Fireworks?

A. There are several different ways to do this. Here is an easy way: Make sure you're viewing your picture in PREVIEW mode–check the little tabs right above the image window to find out what mode you're in and select preview. Then go to the optim window (it's one of the little popup windows in the upper right hand corner of the screen), select the no transparency tab and change it to index transparency. Your background should now be transparent.

V. Forms

Q. My form won't work. I get the following error message:

404 Not Found

The requested URL /cgi-bin/eform.cpi 
was not found on this server. 
What does this mean?

A. This means that your browser cannot find the CGI script that you specified in the "ACTION" attribute of your FORM tag. In this case, it's because it was mispelled. The correct value is "/cgi-bin/eform.cgi".

Q. Should my "_RECIPIENT" be hidden? If so, how will the person be able to type in the address? If it's supposed to be text, why does it have a value?

A. You make an input type="hidden" when it's part of how the form works, but not something you want to user (the person filling out the form) to have to type in, or even be able to type in. You make an input type="text" when you want to allow the person to type in a value.

If the person types in a value, there is no need to supply one, so your input would look something like:

    <input name="fred" type="text">
On the other hand, if the input is hidden, then you'll have to supply a value, since that's the only way it could get one (since the user can't give a value):
    <input name="fred" type="hidden" value="priceless">

Q. My alert isn't working!

A. First, try a simple alert:

<FORM ... ONSUBMIT="alert('thank you!');">

Notice the different quotation marks there. That keeps the browser from getting confused between the double-quote marks that surround the entire ONSUBMIT and the single-quote marks that surround the string you're giving to the alert function.

Once a simple alert is working, you can move on to one that accesses the form information.

VI. Javascript Alerts and Form Validation

Q. My alert button doesn't work. No message pops up at all.

A. Check the message you want your form to display when users select the submit button. Is there an apostrophe in it? If so, that's your problem:

<INPUT
   TYPE="reset"
   VALUE="Reset This, Porky!"
   onSubmit="return confirm('that's all, folks!!')">

In this example, the single quote within "that's" tells JavaScript that the string is done, but then it doesn't understand the "s all..." part and it gets confused. When JavaScript gets confused, it ignores the whole onSubmit form. Remove any single quotes from your message, and all will be well.

Q. How many submit items should I have for assignment 4?

A. You should have one "onSubmit" in the form tag at the beginning of your form, and one submit button at the end of the form (using the input type="submit" code).

Q. How do I validate checkboxes or radio buttons?

A. If you are checking a radio button or checkbox, you will probably use arrays. This means you will specify to your browser to check the first box of your question AND the second box of the same question AND the third box of the same question and so on and so forth. Because you are checking multiple parts of the same question, you have to specify which parts to check at which time. An example of an array would be:

					
if(!document.leahForm.hours[0].checked) &&
   !document.leahForm.hours[1].checked)) {
  ...
}

This code checks to see if both the first box in the question named "hours" and the second box in the same question "hours" are NOT checked. Remember that the "!" negates the thing that follows it, which means that the expression is true if the box is not checked. Also, remember that the "&&" translates into English as "and"; the result is that this statement asks if the first box is not checked AND the second box is not checked. Finally, remember that arrays start at zero!

You can see an example of this code in the questionnaire that you filled out in assignment 1, during the first week of class.

Q. How do I check a pull down menu?

A. To check a pull down menu, use the following code:

if (document.leahForm.question.selectedIndex==0) {
     alert("Please select something!");
     return false;
}

The idea here is that the property "selectedIndex" is set to the index (numbering from zero) of the menu item the person chose. If that thing equals zero, it means that the user chose the first item, but usually the first item on your menu is some direction like "what section do you want?" You can see an example of this code in the questionnaire that you filled out in assignment 1, during the first week of class.

Q. My checkform function doesn't work. Why?

A. Check the following:

  • The syntax for the whole function has to be right. One of the things that makes JavaScript hard to debug is that if it gets confused by anything, it will ignore everything. Your code could be 99% right, and that 1% error causes the whole function to be ignored. That's why it's best to work slowly, building up the function step by step, so that you're always starting with a function that is 100% correct and adding a few lines. If anything goes wrong, you know it was almost surely the last few lines you added.
  • Make sure you start the hierarchy with "document."–starting with "myform." is insufficient. This means that you should not have anything inside the checkform parentheses. Your function could look like this:
  • function checkForm() {
        if (document.myForm.namefield.value=="") {
           alert("Please fill in your name!");
           return false;
        }
    }
    
  • Make sure your hierarchy is correct each and every place you use it! One error and your code will not work properly.
  • Double-check all spelling! "myForm" is not the same as "MyForm"!
  • Have someone else double-check your syntax! This means all punctuation and parentheses! Go through each bit of code one symbol at a time. Yes, this is tedious, but it's necessary because JavaScript is so darn perverse about errors.
  • Make sure you know what symbols you're using! A brief summary:
  • ==meansequals
    =meansset to
    &&meansand
    ||meansor
    !meansnot, or "negate the following"
    ==falsemeansnot, or "negate the following"
  • As we mentioned above, start small and build up! Write your code in chunks and check it as you go; that way, you know what chunk has an error if your code doesn't work. You can also remove pieces of code by cutting them and pasting them in another document while you test bits and pieces in your original document.
  • If your form submits correctly, but no JavaScript seems to be working (for example, your alert doesn't pop up when it should), use this handy Netscape trick:
    • Immediately after attempting to submit your form, hit the "back" key to return to your form. Then type "javascript:" in the location bar (where you type in URLs in Netscape) exactly as it is, removing the http:// and all everything. Hit enter once. A little window will pop up with somewhat understandable error messages. It will also give you a line number for each error so you know where to start looking. This effect is cumulative though; each time you use it, it will bring up the same window and just add the newest errors to the end of the page, so read from the bottom up!
  • If you are validating a text area to ensure that it is not left blank, make sure that the text area field is indeed blank to begin with–if you have a space or a carriage return between your text area tags, this is not the same thing as being blank. To make sure this doesn't happen to you, nestle your text area tags immediately together like this:
  • <TEXTAREA NAME="somename" ROWS=6 COLS=40></TEXTAREA>
    

JavaScript Error Messages

First, you should remember that, by default, the browser won't show you JavaScript error messages. You'll only see one if you either look for them or tell the browser to pop them up. As mentioned earlier:

  • In Netscape, type "javascript:" in the "location" box to see JavaScript errors. Note the colon at the end of that; it's required.
  • In IE, make sure you go to "Edit/Preferences" and select the "Web Content" tab. Then make sure the checkboxes for "Enable Scripting" and "Show Scripting Error Alerts" are both checked.

Because JavaScript is a much more complex language than HTML, the number of possible error messages is large, and the number of possible reasons is vast. Still, these are some you may see and reasons for them.

  • (IE/Netscape) Unterminated String Literal: this means there was an opening double quote mark without a closing double quote. For example:
    document.write("To err is human);
    
  • (IE) Object doesn't support this property or method
    (Netscape) this is not a function: This error is basically that the name you used isn't one that JavaScript knows. Why is harder to place. You might have used the correct method on the wrong object:
    document.go()
    
    instead of
    history.go()
    
    or you might simply have mispelled the method name:
    document.writ()
    
    instead of
    document.write()
    


    Introduction | Syllabus | Assignments | Documentation | Project

    This FAQ was written by Leah Graham with some help from Scott Anderson, who is very grateful for her work.

    Computer Science 110
    Date Created: June 8, 1998
    Last Modified: January 2001