More frequently sought solutions

Our esteemed columnist tackles 10 more of your most common JavaScript questions

1 2 Page 2
Page 2 of 2
  • "Document Source" displays the source of the current document in a new widow. Close the window when you're done viewing the source.
  • "Document Info" displays a window with two frames: The top frame is a listing of all file components of the document, including the frameset document and subframes if you're using frames, as well as all images; the bottom frame displays information about the current file selected in the top frame.

Tip! You can directly save any file displayed in the Document Info window by right-clicking on it in the top window (if you're using a Macintosh, press and hold the mouse button). Choose "Save file As" to save the file to your computer.

You can use a mixture of standard HTML and JavaScript to duplicate these View commands as links in your document. Here's a basic script that shows how. Load the script, and then click on the "document info" link. You'll see the same Document Info window as you did when you selected "View, Document Info". Close that window and click on the "document source" link. Up comes the same window that displays when you select "View, Document Source." Pretty nifty!

<![if !supportEmptyParas]> <![endif]>
<HTML>
<HEAD>
<SCRIPT>
function openWin() {
     location = "view-source:" + window.location
}
</SCRIPT>
</HEAD>
<BODY>
<A HREF="about:document">Click me to see document info</A><P>
<A HREF="#" onClick="openWin()">Click me to see document source</A><P>
</BODY>
</HTML>

Notice the openWin() function. This function opens the view-source: location of the current document (the current document href is returned with window.location). There's no reason to display the current document if that's not your aim. You can provide any fully qualified URL (including protocol and host), and Netscape will open the source for that document.

Note: As a security measure, Netscape 2.0 prevents you from using any about: protocol in JavaScript code. You must access about: URLs directly using the HREF= attribute of a link.

Link to a different page if the user's browser does not support JavaScript

Unfortunately, not all browsers support JavaScript. Until they do (if they all do) it's probably not a good idea to require JavaScript conformance for your home page. If possible, design your home page so that its most important features will run on most any modern browser. From your home page you can then link to specific JavaScript-enabled pages. But then how do you prevent users of non JavaScript-enabled browsers from using those links? Simple: just dynamically change the HREF of the link. Here's the basic approach. For those links that require a JavaScript browser provide an HREF in the HTML markup that links to a standard "sorry" page. The wording of this page might be something like

<![if !supportEmptyParas]> <![endif]>
Sorry, but you need JavaScript to use this page

Name this page sorry.html, or something similar, and provide this name as an HREF standard for links to JavaScript pages. Here's an example:

<![if !supportEmptyParas]> <![endif]>
<A HREF="sorry.html">Click here</A>

To dynamically change the HREF of the links, add the following code in a short function that is called when the document is loaded:

<![if !supportEmptyParas]> <![endif]>
function loadFunction () {
      document.links[0].href = "another.html"
      //...  and so forth
}

When the page is loaded by a non-JavaScript-enabled browser, the JavaScript code is, of course, ignored, and the "sorry.html" links remain in place. If the browser does support JavaScript, then the links are changed. Here's a short example using three links, two of which are dynamically changed -- the third links to a "nojava.html" document, which does not need to be re-linked. The links are identified by index value, and correspond to the links in the order they appear in the HTML source:

<![if !supportEmptyParas]> <![endif]>
<HTML>
<HEAD>
<TITLE>Re-link if no JavaScript</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function loadFunction () {
      document.links[0].href = "another1.html"
      document.links[2].href = "another2.html"
}
//-->
</SCRIPT>
<BODY onLoad = "loadFunction()">
<A HREF="sorry.html">Click here 1</A><BR>
<A HREF="nojava.html">Click here 2</A><BR>
<A HREF="sorry.html">Click here 3</A><BR>
<BODY>
<SCRIPT></SCRIPT>
</HTML>

As much as possible, try to limit the amount of JavaScript code in your home page. Some browsers, particularly older ones, cannot (due to size restrictions) completely hide all the JavaScript code contained in a comment.

Wait for a period of time before executing JavaScript code

JavaScript's setTimeout function lets you create a delay of almost any imaginable time period. As long as your page is still loaded, the action you specify with the setTimeout function will bounce into action when the delay time has elapsed. You can even set up multiple setTimeout functions that fire at different times. One might trigger a second later; another 10 seconds later, and a third a full minute later. The time resolution for the setTimeout delay is a minimum one millisecond (one thousandths of a second), although in actual practice, JavaScript is accurate to only about a third of a second.

Here's the basic syntax of the setTimeout function

<![if !supportEmptyParas]> <![endif]>
setTimeout (action, delay);

where action is a user-defined function or a JavaScript function or method, and delay is the time delay, in milliseconds. For example, if you want an alert to appear three and a half seconds after JavaScript processes the setTimeout function, you would write it this way:

<![if !supportEmptyParas]> <![endif]>
setTimeout ("alert('hello')", 3500);

You're not limited to using just JavaScript functions and methods for the setTimeout function. Feel free to use your own user-defined functions. Here's a script that displays a message and then replaces the current document with another one after waiting 10 seconds:

<![if !supportEmptyParas]> <![endif]>
<HTML>
<HEAD>
<TITLE>setTimeout Example</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var win;
function setTimer() {
      setTimeout ("killDoc()", 10000);
}
<![if !supportEmptyParas]> <![endif]>
function killDoc() {
      alert ("Sorry, time is up!");
}
<![if !supportEmptyParas]> <![endif]>
</SCRIPT>
</HEAD>
<BODY onLoad = "setTimer()">
Read this document. You have ten seconds.
</BODY>
</HTML>

Conclusion

As JavaScript matures, its possible uses multiply. That means people will continue to find new ways of using JavaScript to solve their problems. Still, as with most computer languages, the bulk of programmers' problems tend to be the little things. Bolster your mastery of those little things and JavaScript becomes a far easier, and far richer, language to work with.

Gordon McComb is an author, consultant, and lecturer. He has written 50 books and over a thousand magazine articles during his 20 years as a professional writer. More than a million copies of his books are in print. Gordon also writes a weekly syndicated newspaper column on computers, reaching several million readers worldwide. Gordon's latest book is The JavaScript Sourcebook, available from Wiley Computer Publishing.

Learn more about this topic

This story, "More frequently sought solutions" was originally published by JavaWorld.

Copyright © 1997 IDG Communications, Inc.

1 2 Page 2
Page 2 of 2