Favelets
As most experienced HTML writers know, any place a regular URL appears (such as
<a href="http://www.regularurl.com/">linky</a>), the URL can be replaced by what's called a
"JavaScript URL," which looks like this:
javascript:doSomething();doSomethingElse();
The statements are executed in order, as normal, and the return value of the final statement is converted to a string value and displayed as an HTML document. For instance, the following JavaScript URL will display a simple hyperlink:
javascript:"<a href=\"http://www.slimeland.com/\">Slimeland</a>";
When put into practice with an <a> tag, the JavaScript URL of
the link must
have quotes ("), less than signs (<) and greater than signs (>) replaced with character entities. The resulting HTML looks
like:
<a href="javascript:"<a href=\"http://www.slimeland.com/\">Slimeland</a>";">the link</a>
As you can see, strings of HTML are quite cumbersome to work with. This is not a problem, though, since JavaScript URLs usually just call some outside function which returns a string.
The true strength of these URLs, however, are in the possible side-effects of the code. A JavaScript URL can be used to
change a variable's value, call a function, or do anything else that can be done with normal JavaScript. By using the
void operator on the last statement, which forces it to return no value, you can use a JavaScript URL
without changing the existing page.
In actual HTML pages, mind you, JavaScript URLs should be avoided in favor of events in order to maximize useability. However, they do have some use: they can be typed into the Location bar in your browser, allowing you to execute your own code in the scope of the current page, mirroring the functionality of Mozilla's JavaScript Console. Similarly, JavaScript URLs can be put into your favorites or bookmarks list. Such links, originally called "bookmarklets" and now taking on the more Internet Explorer-centric name "favelets" (coined by Tantek Çelik), can be extremely helpful to web developers.
Here are some of the favelets that I have created for my own use. Add them to your Favorites list by right clicking on them and selecting "Add to Favorites" (or "Bookmark This Link" or whatever your browser uses). Later on, you can execute them easily by selecting them from your Favorites.
| Favelet | Description |
|---|---|
| View Divs | Creates a thin red border around every <div> element on the page. Often useful to see how the browser is handling CSS. |
| View Tables | Creates a thin blue border around every <table> element on the page, and a thin green one around table cells. Useful for figuring out old table layouts. |
| Edit Page | More fun than it is useful. Allows you to edit the contents of an HTML page. Works in Internet Explorer only. Changes made to the page are not saved. |
| Display Properties of Object | Displays all of the properties of a given object (for example, document.body, window.navigator, or document.getElementById('myelem')). If there are too many properties to display on separate lines, they are displayed on a single line and separated with "|||." Exact result is browser-dependant. Useful for debugging scripts. |
| Execute JavaScript Code | The ultimate favelet. Allows you to execute any JavaScript code that you want to. |