Professional JavaScript | 22 | WebReference

Professional JavaScript | 22

[previous] [next]

Professional JavaScript

As Document Source
You can replace normal URLs in a document with javascript: ones. The result of the JavaScript expression will be that the contents are displayed if that URL is loaded. If the expression result is void, then no action will be taken, except for any side effects. This example shows three different uses, described below:
  var quiz_results = "Your result for this test was: " + 23 + "%";
function update_results()
  quiz_results = "Perfect score!";
  var tiny = "#define x_width 1\n#define x_height 1\nstatic char x_bits[] = 
<A HREF="javascript:quiz_results">Click here to see your results</A><BR>
<A HREF="javascript:update_results()">Click here to improve your results</A>
<IMG SRC="javascript:tiny" NAME='Single pixel image'>

In the first <A> tag above, clicking on the link will result in a new page displaying a single line. Clicking on a plain link causes the current page to be replaced with a new page. In this case, the new page is the output of the JavaScript expression for the HREF attribute (a simple string in this case). The new page looks like:

Your result for this test was: 23%

If the second <A> tag is clicked nothing will appear to happen since function update_results() returns void. So the current page is not replaced, and the update_score() function gets to do some invisible magic behind the scenes – in this case just changing a variable. If the first link is clicked afterwards this will be displayed:

Perfect score!

This also works in client-side image maps, submit buttons, and frames, but not in Internet Explorer 3.0.

The third example shows an image's content coming from a JavaScript expression instead of from a file located at a normal URL. In this example, the image used is described by a string. This tactic is explained in more depth in Chapter 6 on Images and Multimedia. Internet Explorer 3.0 cannot do this.

As Bookmarks

Netscape Navigator 4.0 will accept interactive JavaScript URLs as bookmarks. To create one, follow these steps. Click from the browser menu bar: Bookmarks, Edit Bookmarks. In the new window select an appropriate folder like Personal Toolbar Folder by clicking on the name, then click File, New Bookmark and enter the JavaScript URL along with the other details.

Care must be taken when creating these kinds of bookmarks. Any document from any source could be currently displayed when a user selects a bookmark. If the bookmark refers to any objects, variables or properties in the current page, extra checks should be included in the bookmark URL. This ensures the bookmark doesn't 'crash' if picked when the user is exploring some unexpected page.

<SERVER>, RUNAT and <% and %>

For completeness, we'll briefly mention some non-browser tags that can find their way into HTML pages. These tags are used just like the <SCRIPT> tag – JavaScript code is put between them. However, these tags are processed by the web server, not by the browser, so they should never appear when you do View Source from the browser menu.

<SERVER> is a Netscape-only tag, the RUNAT attribute is a Microsoft-only, one that applies to the <SCRIPT> tag, hence <SCRIPT RUNAT="server">. The funny looking pair of punctuation marks, <% and %>, are just Microsoft shorthanded for <SCRIPT RUNAT="server"> and </SCRIPT> respectively.

If these tags ever appear in your browser, you know your website is in trouble, because you are using the wrong specialist tags with the wrong web server. Other than that, they have no relevance to browsers.

[previous] [next]
and Created: February 12, 2001
Revised: March 5, 2001