MATH 640-499 Class 20:
Tuesday, April 13, 1999
JavaScript
REMINDER. Please hand in your notes on the results of posting
on your basic web page your essay on completing the square.
If you have not done so already, please finish
and hand in the LaTeX exercises:
- Exam Package (from Hirschhorn)
- Draftcopy: draft watermark
- Picins: text flow around boxes
Learn the basics of JavaScript
The language Java was conceived as a reliable language for the consumer
electronics market, but it has substantial promise for more general
use on the World Web. 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. I think that this one is impressive.
Alistair Fraser's Web
Page at Penn State University
demonstrates an event handler: if you move the cursor onto
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.
There is a simple JavaScript tutorial by Stefan Koch called
Voodoo's Introduction to JavaScript at
University of Mannheim, Germany. This is based on his book, published
in German, 'JavaScript - Einführung, Programmierung und
Referenz'. However, the tutorial is in English.
Here are some other sites suggested in Netscape JavaScript
1.2 Book, Second Edition,
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. Let me know when you have the JavaScript added to your page.
In case your web browser fails to display the JavaScript, here it is:
<SCRIPT LANGUAGE="JAVASCRIPT">
<!--
document.write("This document last modified on: ")
document.write(document.lastModified)
//-->
</SCRIPT>
Let me know when you have the JavaScript added to your page.
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. That is, if you put "Fred"
up here in the head of the document, then you can later use "Fred"
in your document wherever you want to refer to this window opening
function.
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" . Up to this point, the code looks
like ordinary HTML: we have a container, the INPUT ELEMENT container, with
attributes name= and value=.
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. Have the secondary window announce that it is a
secondary window (say with a center-aligned level 1 header), and let
the viewer know that the secondary window can be closed to return to
the main browser window, which is now covered.
The events that are used by the event handlers can
be grouped into mouse-related events (onClick, onDblClick,
onMouseDown, onMouseUp, onMouseOver, onFocus, onBlur ),
keyboard events (onKeyDown, onKeyPress, onKeyRelease), and
document events (such as onReset, onSubmit).
Finished?
If you have done all the above activities,
and there is still time left, here are some other activities you can do.
- Help someone else.
- Think about the projects.
If you have not handed in information on the topics listed below,
please search the topics as homework, and print out some information
on each of the topics. The URLs should be given, of course.
Find information on each of the following topics.
- Artificial Life
- Cryptography
- Symbolic Computation
/ Home / Contents /
email to:Martin Karel