User:Jm34harvey/Bookmarklets

Original

A bookmarklet is a convenience utility for web browsers, designed to perform a certain function by one click.

Usually it is a JavaScript program stored as a URL within a bookmark in most popular web browsers, or stored within a hyperlink on a web page.

The term is a portmanteau of the terms bookmark and applet (a small application).

NewIntro

A bookmarklet is an applet, a small computer application, stored as the URL of a bookmark in a web browser or as a hyperlink on a web page. Whether bookmarklet utilities are stored as bookmarks or hyperlinks, they are designed to add one-click functionality to a browser or web page. When clicked, a bookmarklet performs some function, one of a wide variety such as a search query or data extraction. Usually it is a JavaScript program stored as a URL

The term is a portmanteau of the terms bookmark and applet.

Tutorial

For loop

The beauty of this is that you can create loops to run something several times which can complete repetitive tasks such as filling the same thing out in a form 1000 times in just a few seconds. I'm going to create one that will allow me to incorporate a loop

function()

function()

{

{

my_num=20;

my_num=20;

document.open();

for(var i=1;i<=my_num;i++)

for(var i=1;i<=my_num;i++)

{

{

document.writeln(i);

document.writeln(i);

}

}

document.close();

}

}

Convert it into a bookmarklet and then you have yourself a possibly useful bookmarklet.

Convert it into a bookmarklet and then you have yourself a possibly useful bookmarklet. - javascript:(function(){my_num=20;for(var i=1;i<=my_num;i++){document.writeln(i);}})()

javascript:(function(){my_num=20;document.open();for(var i=1;i<=my_num;i++){document.writeln(i);}document.close();})()

Another way of writing that same code:

function()

{

my_num=20;

for(var i=1;i<=my_num;i++)

document.writeln(i);

document.close();

}

javascript:(function(){my_num=20;for(var i=1;i<=my_num;i++)document.writeln(i);document.close();})()

If Else statement

If Else statements format the same way as it would in normal JavaScript.

function()

{

var my_name=prompt("Enter your name");

document.open();

if(my_name)

{

document.writeln("Your name is "+my_name);

}

else

{

document.writeln("You did not enter your name.");

}

document.close();

}

Converted to a bookmarklet:

javascript:(function(){var my_name=prompt("Enter your name");document.open();if(my_name){document.writeln("Your name is "+my_name);}else{document.writeln("You did not enter your name.");}document.close();})()

Common Errors in JS Bookmarklets

Treat loops as you would in Java or C++. For instance your bookmarklet would not work if you wrote it like this:

function();

{;

my_num=20;

for(var i=1;i<=my_num;i++);

{;

document.writeln(i);

};

document.close();

};

Testing

Code has been successfully tested in Firefox, Internet Explorer, Konqueror, Safari, Opera, and others will execute these bookmarklets just fine. They have been tested across the platforms Linux/Unix, Mac OSX, and Windows 2000/XP/Vista. Any JavaScript enabled browser can run this JavaScript. As long as you write JavaScript according to W3C standards then your bookmarklet will be cross browser compatable.

To test the bookmarklet above simply bookmark this page. Then right-click and properties on your newly created bookmark. Paste the bookmarklet code in the URL where http:... is instead. Now it will be able to run and modify webpages.

Create Multiple Functions

This mini-tutorial requires previous knowledge of JavaScript. This also requires the knowledge of creating a function in a bookmarklet. If you don't know how to create a function in a bookmarklet then read the "Create Functions" section located on this page (scroll to the top for a table of contents).

What is the advantage?

The main advantage is to be able to call a function more than once and being able to use arguments. For instance lets say you have a for loop that does something to a string. Well if you have to do this loop to 5 strings then you would need to write that piece of code 5 times to use it traditionally in a bookmarklet. As you can see that can just make you bookmarklet larger than necessary and who needs that? If you are able to call that loop by using a function then that 5 pieces of code now turns into 1 saving you a lot of time and space in your bookmarklet. The best way (and only way as far as I know) to create more than one function within a bookmarklet is by creating an object. Another nice thing about objects is you can specify as many functions and variables as you want in a single object.

Introduction to Objects

There are different ways of creating objects. I found the following to be the most efficient. First you specify your variable to be the object and then use curly brackets to apply multiple variables and functions which will be separated by a comma. That last sentence might not make much sense now but as you read you will understand it. So here is our beginning template:

var myObject={};

Strings in Objects

Now lets specify a variable within that object.

var myObject = {

string: "This is my string"

}

That string can be called now using the object myObject.string. In bookmarklet form that would look like:

var myObject={string: "This is my string"};

Now I'm express that object using it in bookmarklet form with an alert (don't forget the semicolon at the end).

javascript:(function(){var myObject={string: "This is my string"};alert(myObject.string)})()