Creating Javascript Bookmarklets

How to Run Javascript Directly in a Web Browser

Dec 23, 2008

Many programmers use Javascript in wep pages, but they can also create bookmarklets - these extend the functinality of a web browser without even needing a web page.

As a Javascript programmer develops applications they will at some point notice something rather interesting - leaving semicolons off the end of lines appears to have no effect whatsoever. The code runs normally, the speed is the same, and the web browser does not report any errors (not even any warnings).

So, the question the programmer must ask is - does the semicolon actually do anything? And the answer is yes. Sometimes.

One of those times is the Bookmarklet - a simple piece of Javascript code that runs whenever the web page user clicks on a bookmark. This can be used to extend the functionality of the browser, for example, to change the style of a page being viewed.

Javascript With and Without Semicolons

Javascript can generally work quite happily with or without semicolons - take, for example, a piece of code that normally have semicolons all over it:

var op_text

for (var i = 1; i <= 10; i++) {

switch (i) {

case 1:

op_text = "1st"

break

case 2:

op_text += "2nd"

break

case 3: op_text += "3rd"

break

default:

op_text += i + "th"

}

op_text += "\n"

}

alert (op_text)

</script>

In this example the majority of the semicolons have been removed - apart from 2 of them:

If the code has to be on a single line (as it does when defining a loop) then the semicolons are required - and that's the one key limitation of a bookmarklet - all of the code must be contained in a single line.

Bookmarklets Code

Bookmarklets (sometimes called Favelets) are used every day by virtually every web browser user - whenever they access one of their stored bookmarks; and that's because the bookmark runs a little piece of Javascript code, for example:

javascript:void(window.open('http://www.google.co.uk/'));

javascript:void(window.open('http://www.suite101.com/writer_articles.cfm/linuxtalk'));

The void key word simply tells the browser that the expression is to be evaluated but will not return a result. The important thing here is that the user can run the code directly in the brower - this is done by:

Running Javascript Directly in a Browser

The key to running Javascript as a bookmarklet (i.e. directly in the browser without a web page) is to write all of the code on a single line, separating each block of code with semicolons:

javascript:var url="http://www.suite101.com/writer_articles.cfm/linuxtalk";void(window.open(url));

javascript:var text="Hello Word";void(alert(text));

javascript:var op=0;for (var i = 1; i <= 3; i++) {op+=i} void(alert(op));

Now, where it can really interesting is when Javascript is used to change the style of a web page.

How to Change the Style of a Web Page

Every web page user will have seen at least one web site where the colors used make the information all but unreadable, however, the user can easily change the style of the web page themselves:

javascript:var links = document.links;var i;for(i=0;i<links.length;i++) {void(links[i].style.color= "black");}

Saving Bookmarklets

The web browser user will not, of course, wish to type (or even copy and paste) the code into the browser every time that they need to use it - but that's not a problem because all bookmarks are, of course, bookmarklets - it is, therefore, just a matter of saving the code as a bookmark; how that's done will depend on the browser being used, for example:

The user will now be able to create and to run Javascript bookmarklets whenever they need.

The copyright of the article Creating Javascript Bookmarklets in Javascript/Java Programming is owned by Mark Alexander Bain. Permission to republish Creating Javascript Bookmarklets in print or online must be granted by the author in writing.

Aug 11, 2009 12:43 PM

Guest :

thanks alot, really helped!