Lesson 7 - JavaScripts and Frames

...In progress for 2001!

A good place to start learning about JavaScript is at Netscape, and here is some documentation about frames.

So, this week we will discuss the examples presented in JavaScripts by Voodoo, which used to be posted but seems to no longer be available.

Assignment 7A

The script element is marked as <SCRIPT attributes> code </SCRIPT>. There are only two attributes. One is language="JavaScript". This tells what kind of script is being used. The second attribute is an optional src="URL" if you want the script code to be stored in a file and loaded at the time of http transfer to the client. The file has to have a .js extension, or the server will not send it out properly. If you use a remote file as the source of JavaScript code, then the code part of the markup tag is left blank. So, two examples are:

<SCRIPT language="JavaScript" src="http://www.bmb.psu.edu/597a/java1.js"></SCRIPT>
<SCRIPT language="JavaScript"> Java1.js code here</SCRIPT>

Note two things.

First, the SCRIPT element goes inside the <BODY> element. It does not matter where in the body they are placed, as they will be made ready for running after all of the HTML code has been loaded into your browser. It is very important to understand this exception: any functions that you define that are called by your script must be placed in the <HEAD> element, using the same <script> tag. These functions will then be available to the client for use with your HTML document. If the function that you want to use in the BODY is predefined (built into your Browser), then you don't need to have a <HEAD> entry for your scripts.
Second, to cause Browsers that are not JavaScript competent to ignore the JavaScript code, and not display it, mark the code as a comment: <!- JavaScript program code goes here ->. This is true for both <HEAD> script functions, as well as for <BODY> script code.

So, to create a JavaScript, you define any functions in <Script> tags in the <Head> element (or by referencing to them as a src="URL" attribute, and then present the JavaScript program in the <Body> element. All that remains is for you to learn about the available programming features of JavaScript!

One way to learn is to see what others have done - I thought that this one providing unit conversions is kind of neat. A more complicated JavaScript provides automatic searching of multiple databases - not genetic ones, but Internet ones.

My JavaNotes from the 'Complete Idiot's Guide...' (these may or may not be of much use to you; I'll not be spending much time on this in class).

Examples from JavaScripts by Voodoo (you need a JavaScript capable browser for viewing these!) Once you have them in your browser, View Document Source to see how it was done.

write text to an html document
send an alert message to a browser
list the date of last change for a file on a server
detect cursor movement over a link
retrieve time and date for an HTML document
generate random numbers
load two html documents in split screens (frames)
load five html documents in split screens (frames)
using a form to call functions in another frame
having changes to the second frame (as in 11) disappear in ~1 second
write and erase a note to the status bar
write a temporary note on the status bar that lasts ~3seconds when the mouse pointer moves over a link
define and access an array (variables can be mixed types)

Assignment 7B

Create an HTML document that contains

at least two frames,
a picture and
3 of the items illustrated above.

While it is not possible for people new to programing to become facile with Javascript in one week, it is possible for you to learn how to read existing examples, and to modify them for your own use. Here is an assigment designed to help you learn to read some simple (if long) code.

Assignment 7C

Check out the page Mwtvbar.htm, an html document that calculates some properties of user input amino acid sequence. Note that you can open a text file with netscape, select the text, copy it, and the paste the data into a form window. Try the Mwtvbar.htm page with data found in this file.
Write a brief description of what the page does with the data (what output does it generate? note that if you wanted to, you could copy and paste the contents of the results window into your word processor or HTML editor to simplify writing your description.).
To further develop your understanding, view the source code and use whatever resources you need (from above) to write a description of what each function does. Then, explain how the form works when someone enters data and clicks on each button.
Now try copying the contents of this paragraph into the page's input box. What happens when you run the program now? What could be done to prevent the user from entering bogus sequence?

Return to Table of Contents