Section 13.4. JavaScript in URLs

13.4. JavaScript in URLs

Another way that JavaScript code can be included on the client side is in a URL following the javascript: pseudoprotocol specifier. This special protocol type specifies that the body of the URL is an arbitrary string of JavaScript code to be run by the JavaScript interpreter. It is treated as a single line of code, which means that statements must be separated by semicolons and that /* */ comments must be used in place of // comments. A JavaScript URL might look like this:

 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 uses the value of the last JavaScript statement or expression, converted to a string, as the contents of the new document to display. This string value may contain HTML tags and is formatted and displayed just like any other document loaded into the browser.

JavaScript URLs may also contain JavaScript statements that perform actions but return no value. For example:

 javascript:alert("Hello World!") 

When this sort of URL is loaded, the browser executes the JavaScript code, but because there is no value to display as the new document, it does not modify the currently displayed document.

Often, you'll want to use a JavaScript URL to execute some JavaScript code without altering the currently displayed document. To do this, be sure that the last statement in the URL has no return value. One way to ensure this is to use the void operator to explicitly specify an undefined return value. Simply use the statement void 0; at the end of your JavaScript URL. For example, here is a URL that opens a new, blank browser window without altering the contents of the current window:

 javascript:window.open("about:blank"); void 0; 

Without the void operator in this URL, the return value of the Window.open( ) method call would be converted to a string and displayed, and the current document would be overwritten by a document that appears something like this:

 [object Window] 

You can use a JavaScript URL anywhere you'd use a regular URL. One handy way to use this syntax is to type it directly into the Location field of your browser, where you can test arbitrary JavaScript code without having to open your editor and create an HTML file containing the code.

The javascript: pseudoprotocol can be used with HTML attributes whose value should be a URL. The HRef attribute of a hyperlink is one such case. When the user clicks on such a link, the specified JavaScript code is executed. In this context, the JavaScript URL is essentially a substitute for an onclick event handler. (Note that using either an onclick handler or a JavaScript URL with an HTML link is normally a bad design choice; use a button instead, and reserve links for loading new documents.) Similarly, a JavaScript URL can be used as the value of the action attribute of a <form> tag so that the JavaScript code in the URL is executed when the user submits the form.

JavaScript URLs can also be passed to methods, such as Window.open( ) (see Chapter 14), that expect URL arguments.

13.4.1. Bookmarklets

One particularly important use of javascript: URLs is in bookmarks, where they form useful mini-JavaScript programs, or bookmarklets, that can be easily launched from a menu or toolbar of bookmarks. The following HTML snippet includes an <a> tag with a javascript: URL as the value of its href attribute. Clicking the link opens a simple JavaScript expression evaluator that allows you to evaluate expressions and execute statements in the context of the page:

 <a href='javascript: var e = "", r = ""; /* Expression to evaluate and the result */ do {     /* Display expression and result and ask for a new expression */     e = prompt("Expression: " + e + "\n" + r + "\n", e);     try { r = "Result: " + eval(e); } /* Try to evaluate the expression */     catch(ex) { r = ex; }             /* Or remember the error instead  */ } while(e);  /* Continue until no expression entered or Cancel clicked */ void 0;      /* This prevents the current document from being overwritten */ '> JavaScript Evaluator </a> 

Note that even though this JavaScript URL is written across multiple lines, the HTML parser treats it as a single line, and single-line // comments will not work in it. Here's what the link looks like with comments and whitespace stripped out:

 <a href='javascript:var e="",r="";do{e=prompt("Expression: "+e+"\n"+r+"\n",e); try{r="Result: "+eval(e);}catch(ex){r=ex;}}while(e);void 0;'>JS Evaluator</a> 

A link like this is useful when hardcoded into a page that you are developing but becomes much more useful when stored as a bookmark that you can run on any page. Typically you can store a bookmark by right-clicking on the link and selecting Bookmark This Link or some similar option. In Firefox, you can simply drag the link to your bookmarks toolbar.

The client-side JavaScript techniques covered in this book are all applicable to the creation of bookmarklets, but bookmarklets themselves are not covered in any detail. If you are intrigued by the possibilities of these little programs, try an Internet search for "bookmarklets". You will find a number of sites that host many interesting and useful bookmarklets.