JavaScripting for Interactive Educational Webs

[Intro] [Overview] [Basics] [More] [Forms] [If] [Queries] [Time] [Random] [Loops] [Misc.] [References] [HTML]


Other Topics

Abstract: This document provides a very short introduction to a few additional issues in JavaScript not covered elsewhere in the workshop.


Introduction

Given the limited time of the workshop, we were not able to cover all of the features available in JavaScript. Even given twice as much time, I find it unlikely that we could provide a full survey of the capabilities and features of JavaScript.

In this document, I've provided snippets of information about a few topics you might find useful or interesting as you build your pages. We'll look at a few examples of each if we have time.


Forms that send email

Sometimes, we want pages that gather results and then forward them on to a teacher (or wherever). Normally, server-side data collection is done with CGI scripts as JavaScript does not provide a convenient way to communicate with other programs.

However, JavaScript does provide one simple way to send information elsewhere: you can write forms that send mail. Simply make the action on your form mailto:your-address.


Windows

JavaScript has a window object, and lets you create new windows, using window.open(). As you might expect, you can write to the windows you create with windownamedocument.write(...). Extra windows can be useful for status or debugging messages.

While you need not provide any parameters to the open() method, you can gain more control over the window by using some of them. The full form of the command is
open(URL, name, features) </script> where the features include


Animation

Using a variety of techniques, it is possible to create simple text-based animations in HTML. For example, you can create a marquee effect by repeatedly removing the first letter from a field and then putting it back on the end.

However, it is generally recommended that you do not use such animations. Why? They're very distracting to the user, and can simultaneously increase the amount of time someone spends trying to read our page and decrease the amount the get out of our page.

JavaScript currently has little support for graphics-based animations (other than repeatedly changing an image or communicating with a Java applet).


Persistant data using cookies

In building sites, rather than pages, we often want to preserve information between these pages, and sometimes even between sessions. While we can use query strings to pass information between pages, that method can become cumbersome and is easy to break (what happens if a user loads a page without clicking on one of our links?).

Fortunately, most browsers support a form of persistant data known as the cookie. You can refer to all the cookie for a document as document.cookie. This looks surprisingly like a query string, but with additional information. I strongly recommend that you use utiltiy functions if you want to manipulate cookies. Bill Dortch has written a particulary nice set.


Dealing with the multiple versions of JavaScript

As mentioned earlier, there are at least three versions of JavaScript floating around. In addition, not all browsers support JavaScript. What is an author to do?

For non-scriptable browsers (or browsers with scripting turned off), it's important that you hide the JavaScript code. Recall that the default action for unknown tags is to ignore the tags, and use the marked text verbatim. That means that on some browsers, your JavaScript code appears directly on the page, which is ugly at best. Fortunately, you can comment out the code, using HTML comments, as in

<script language="javascript">
<!-- Hide from non-scriptable browsers
...
// End hiding -->
</script>

JavaScript 1 (in Navigator 2.0) does not support the src parameter to the <script> tag. How can you take advantage of libraries in that case? I recommend that you make two copies of each file, one that loads the libraries using src, the other with the code inlined. You will soon find a utility for making this conversion on my web site.

Other than that, i recommend that you read the documentation, and test your programs in each browser. You can also check for the browser type, which will help you determine what code to use.


[Intro] [Overview] [Basics] [More] [Forms] [If] [Queries] [Time] [Random] [Loops] [Misc.] [References] [HTML]

This page written by Samuel A. Rebelsky.

This page generated on 44 by SamR's Site Suite.