10.4 JavaScript in URLs

Another way that JavaScript code can be included on the client side is in a URL following the javascript: pseudo-protocol specifier. This special protocol type specifies that the body of the URL is arbitrary JavaScript code to be interpreted by the JavaScript interpreter. If the JavaScript code in a javascript: URL contains multiple statements, the statements must be separated from one another by semicolons. Such a URL might look like the following:

javascript:var now = new Date(); "<h1>The time is:</h1>" + now;

When the browser "loads" one of these JavaScript URLs, it executes the JavaScript code contained in the URL and displays the "document" referred to by the URL. This "document" is the string value of the last JavaScript statement in the URL. This string will be formatted and displayed just like any other document loaded into the browser.

More commonly, a JavaScript URL will contain JavaScript statements that perform actions but return no value. For example:

javascript:alert("Hello World!")

Note that in Navigator 3.0, you can use the void operator to force an expression to have no value. This is useful when you want to execute an assignment statement, for example, but do not want to display the assigned value in the browser window. (Recall that assignment statements are also expressions, and that they evaluate to the value of the right-hand-side of the assignment.)

The javascript: URL can be used anywhere you'd use a regular URL. It is not altogether clear, however, why you'd want to do so. In Navigator, one important use for this syntax is typing it directly into the Location field of your browser, where it allows you to try out and test arbitrary JavaScript code without having to get out your editor and create an HTML file containing the code. In fact, Navigator takes this idea even further. As described in Chapter 1, Introduction to JavaScript, if you enter the URL javascript: alone, with no JavaScript code following it, Navigator displays a JavaScript interpreter page that allows you to sequentially enter and execute lines of code. Unfortunately, neither of these techniques work in Internet Explorer 3.0.

javascript: URLs can also be used in other contexts. You might use one as the target of a hypertext link, for example. Then when the user clicks on the link, the specified JavaScript code will be executed. Or, if you specify a javascript: URL as the value of the ACTION attribute of a <FORM> tag, then the JavaScript code in the URL will be executed when the user submits the form. In these contexts, the javascript: URL is essentially a substitute for an event-handler. Event handlers and javascript: URLs can often be used essentially interchangeably, and which you choose is basically a stylistic matter.

There are a few circumstances where a javascript: URL can be used with objects that do not support event handlers. For example the <AREA> tag does not support an onClick() event-handler on Windows platforms in Navigator 3.0 (one will be added in the next release, though). So if you want to execute JavaScript code when the user clicks on a client-side image map, you must use a javascript: URL.

Internet Explorer supports the javascript: protocol specifiers for URLs, but does not have a special built-in JavaScript interpreter page. A future version of Explorer will probably also support a vbscript: protocol.