JavaScript

Tying Up Loose Ends

Some JavaScript Basics

JavaScript is case sensitive so be careful with capitalization.
JavaScript (and other programming languages) are unforgiving of spelling errors so be careful.
A JavaScript function should be defined in the head of the HTML document (between the <head> and </head> tags).
All JavaScript statements, including function definitions and definitions of variables (such as the pics array of images in the cycling images example), must be between <script LANGUAGE="JavaScript" and </script> tags.

Debugging JavaScript

Some hints for finding JavaScript errors.

Type javascript: then press ENTER in the Location box of the browser (note the colon!!). A window with error messages will pop up. It will show you the line on which the error was detected. Look at that line and before that line to make sure everything was typed correctly. Clear the error message window occasionally (it accumulates your errors and they stay in the window even after you have corrected the problem).
Carefully check:
- Spelling
- Spacing (extra spaces where they don't belong)
- Matching braces and parentheses

Opening New Windows on a Mouse Click Using the JavaScript window.open function

The simplest way to do this is to write your own function that is called to open the window when the user clicks on a clickable element in the HTML document. Links and buttons (radiobuttons, checkboxes, and ordinary buttons) are clickable.

The format of window.open is as follows:

    window.open("picture or html file","window name","list of window properties");

You replace "picture or html file" with a filename or URL for the file to be opened (for example, myPic.gif or myPage.html or http://www.roanoke.edu). You replace "window name" with any name you want - it will be the name of the window that is opened. If you use a different name each time you call window.open, different windows are opened. If you use the same name the new window replaces the old.

The list of window properties is optional but usually at least includes the height and width. An example is

   window.open("art3.gif", "name","width=600,height=400,toolbar=no,location=no,scrollbars=no,resizable=yes");

Simplest Case: Opening one window In this case your JavaScript function does not need any parameters (no information needs to be sent). The function just opens the file (picture or html document) you want. Click here for the example from class. See how it works and use the View, Page Source to see the HTML and JavaScript code. In that example there are two JavaScript functions. The openWin function opens an image in the window (a .gif file) and the openHTML function opens a Web page (a .html file - so it has both the picture and some words).

Opening Several Windows If you want to have several places on your page where a new window will open if the user clicks then use a function with a parameter that specifies which image (or html file) to display in the new window. In an example from class, the image is specified by a number (all images are stored in an array of pictures - that array is named pics). Then at each place where a new window should be opened the onClick attribute of the clickable element (link or button) calls the function and sends it the number of the file to be displayed.

Another way to specify which file is to be displayed is to have a parameter that gives the file name (this could be a relative pathname or a complete URL). An example is in the file newWin4.html.

NOTE: It is probably best to have an HTML document display in the new window rather than only a graphics image because some browsers may have an error displaying just the image.

Opening a New Window Using HTML

A new window can be opened using HTML but you don't have any control over the size of the window. To get a new window, leaving your original document in place, add a target attribute to the link. For example,

     Click Here for a New Window

opens a brand new window everytime the link is clicked. This probably isn't a good idea - lots of open windows all over the place.

However, if you give the target the same name in every link, then each time a link is clicked the new window replaces the old (with your document still open). For example,

     Click HERE!
and
     Click here too!

woud open to the same window with the second one clicked replacing the first.

Scrolling in Frames

If you plan to use frames but don't want a scrollbar on some of the frames you can set scrolling to no as in

    <frame src="myFramePage.html" scrolling="no">

You shouldn't do this if the frame will have content that the user needs to see (the user may have a smaller screen than you do).