MATH 640-499 Class 16:
Monday, March 23, 1998
JavaScript

Goal to accomplish during class
Homework for after class
Activities to do during class

REMINDER. Please hand in your notes on the results of posting your essay on completing the square on your basic web page.

Before the Spring break you were asked to search for information. The request was as follows:

Search the Web

Find information on each of the following topics.

Artificial Life
Cryptography
Symbolic Computation

If you have printed out information on these topics, you may hand it in today. Otherwise, please search for sources and turn in some information next class, Wednesday, March 25.

If you have not done so already, please finish and hand in the exercises from Monday March 9:

Draftcopy: draft watermark
Picins: text flow around boxes
Exam Package (from Hirschhorn)

Goal to accomplish during class

Learn the basics of JavaScript

The language Java was designed as a reliable language for the consumer electronics market. It is supposed to be similar to C++ in some ways. The main idea behind its use on the WorldWide Web today is that with it you can write one program which can then run inside a Java interpreter on any machine that has such an interpreter. The interpreter serves as a liaison between the program and the operating system on whichever machine is running the program.

Although Java is supposed to be easier to use than C++, it is still a full-fledged programming language. For those who would like to do some of the things that Java can do to make a Web page "interactive" but who prefer not to spend the time and effort of learning Java, and who may not have access to the Common Gateway Interface (CGI) of their server (for example, on clam), there is a simplified subset of Java, called JavaScript.

To get some idea of what can be done with JavaScript, you can look at a JavaScript calculator. This one is impressive.

Alistair Fraser's Web Page at Penn State University demonstrates an event handler: if you move the cursor over his photograph, one eye will seem to wink. You can get a good idea of how he does this by viewing the header of his source code.

You can see how geocities.com uses JavaScript to produce a "takeaway window" that they call Webpage Personalizer Starter. It is supposed to let you change background colors for any web page that you are browsing. The takeaway window is a small floating window that stays on screen after you have left the site that created it.

Here are some other sites suggested in Netscape JavaScript 1.2 Book, Second Edition,

Measurement Translator
HTMLjive, an HTML editor, or load it from a local copy
A color coded resistor calculator

Actually, the page you are now viewing has a simple example of JavaScript in it. If you go to the bottom of the page, you will find the exact time that the file was last saved. This is done by a simple JavaScript, which you can see by viewing the page source. The script is hidden to any browser that does not implement JavaScript, since the script is part of a comment.

EXERCISE 1. Modify your basic homepage by adding JavaScript, as in the page you are now viewing, so that the JavaScript aware browser will display the time and date that your basic homepage file was last saved.

Secondary Windows

JavaScript makes it possible for your Web page to provide secondary (or "targeted") windows. The person viewing the page can click on a link and open a new window while the old window remains open as well.

You can do this by modifying the head of your document so that it looks something like this:

<head>:
<SCRIPT LANGUAGE="JAVASCRIPT">
<!--
function WinOpen() {
  open("window.html", "Fred","toolbar=yes");
}
//-->
</SCRIPT>
</head>

Here "Fred" is just an arbitrary name that can be used in the body of the document to address the window.

Later on in your document you can open a window in response to an action by the person viewing your document. For example, you could have somewhere in the body of your document the following:

<form>
<input type="button" name="WindowButton" value="Open Secondary Window"
  onclick="WinOpen()>
</form>

The above HTML code creates a form with the INPUT ELEMENT specified by the code type="button" . However, the ATTRIBUTE onclick= is not HTML, but rather JavaScript. It is an example of an event handler. You can put a message in the file window.html using HTML, of course. For example, you could display the message, "Close this window to return to the main browser window."

EXERCISE 2. Make an HTML document that opens a secondary window by using JavaScript.