=

Free JavaScripts provided
by The JavaScript Source

JavaScript: Lesson 1



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:

  1. Exam Package (from Hirschhorn)
  2. Draftcopy: draft watermark
  3. Picins: text flow around boxes


Goal to accomplish during class

Learn the basics of JavaScript

In-class Activities

JavaScript

The language Java is widely used now. You can write a Java program on one machine, and the program can run on any machine that has a Java interpreter. The interpreter executes the program, so there is no compilation step to produce a machine executable program file, unlike programs written in C++.

Although Java is supposed to be easier to use than C++, it is a full-fledged programming language. If you wish to make a web page "interactive" there are several reasons to consider using the more limited scripting language "JavaScript". First, you reduce the time and effort that it takes to learn enough to be able to use the language. Secondly, if you use Java, either you must have access to the Common Gateway Interface (CGI) of your server (for example, clam) or the system on which the browser is working must have Java enabled. Commonly, Java is not enabled on corporate and academic servers (for security), and only a few people have access to the CGI on most servers.

To get some idea of what can be done with JavaScript, you can look at the top of this page for a very simple 5 function calculator, or for a more ambitious creation, see a scientific calculator written in JavaScript by Rolf Howarth. I think that this scientific calculator 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.

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 via email 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 (supposing that you have an HTML file called window.html that you want displayed in the window; if you leave out window.html, so that there is an empty pair of quotation marks, the window will be empty):


<head>
<TITLE>A Little  JavaScript</TITLE>
</head>
<SCRIPT LANGUAGE="JAVASCRIPT">
<!--
function WinOpen() {
  window.open("window.html", "freds_window","toolbar=yes");
}
//-->
</SCRIPT>

Here "freds_window" is just an arbitrary name that can be used in the body of the document to open a window. That is, if you put "freds_window" up in the preamble of the document, then, as a convenience, you can later use "freds_window" 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. For this, you would create an HTML file to be displayed in the secondary window.

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.


Homework for after class

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.

Search the Web

Find information on each of the following topics.
  1. Artificial Life
  2. Cryptography
  3. Symbolic Computation


/ Home / Contents /


email to:Martin Karel