Bookmarklets are JavaScript links that can be stored in your browser’s Bookmarks or Favorites folder, or attached to a bookmarks toolbar, and then used to do something relative to that page. I think bookmarklets have a lot of value for teaching and self-teaching JavaScript.

What can I learn playing with bookmarklets?

You need to create and use a fundamental unit of HTML: a link (also known as “anchor”; <a href="somewhere">Link</a> ). You can start with the most basic javascript:alert('Hello world');. You can learn how to use a closure javascript:(function(){ alert('Hello world'); })();. You’ll be forced from the start to pay close attention to syntax. If you haven’t yet, you’ll quickly figure out how to use Firebug (and/or any modern browser’s “F12 Developer Tools”) to inspect DOM elements to get their id and other properties. Ultimately you’re limited only by your skill, which will improve quickly, and imagination. What would you change about the blog page you’re reading now, if you could?

Where to start?

I started with a pet peeve about a page I visit regularly. My first bookmarklet ever hides the right column in Facebook, so I don’t have to see the ads. Take that, Mark! If you click the link below while on this page nothing will happen. But if you drag the link to your Bookmarks Toolbar (in Firefox, “Bookmarks Bar” in Chrome, etc…) do that while viewing your Facebook page (or any page that coincidentally has a right column div with id="pagelet_side_ads") you will toggle its visibility.

Bookmarklet¹: Toggle FB ads Drag the link to your bookmarks bar to try it.

To embed a bookmarklet so it can be dragged to the toolbar you just place a link on your Web page:

<strong>Bookmarklet: <a href="javascript:(function(){var adsDiv=document.getElementById('pagelet_side_ads'),isHidden=adsDiv.style.display==='none';if(isHidden){adsDiv.style.display='inline-block';}else{adsDiv.style.display='none';}})();">Toggle FB ads</a></strong> 

The imagination runs wild

Still milking my own pet peeves, I wanted to collect lyrics of several songs I needed to learn for the weekend warrior band I play in. A recurring pattern is, we find a song by an artist that is a good fit for our sound, and due to that we later add 3 or 4 more by the same artist. Besides, I just like having lyrics handy… why not just get all the lyrics for that artist at once? But that would mean a lot of clicks and copy/paste! With some intermediate JavaScript you can collect all the links and titles, visit each page in a queue, get just the lyrics you want, and display them in one place in a fraction of the time. To engage students and make meaning of any learning situation requires context and relevance. Do you know any young people who like music, and might be engaged by collecting lyrics of their favourite artists?

I may explain this code in another post, but for now it’s about bookmarklets and an example of what one might do with one. If you don’t understand this paragraph you’ll need to do some vocabulary homework. This script only works at www.lyrics.com. That page has a version of jQuery installed so I used it. To write the script I used Firebug to identify IDs and classes of elements on the page that I use as “selectors” to have access. I fiddled in the console until I had a working script. Meticulous syntax is important… your script goes on one line, so semi-colons are in, comments are out.

Bookmarklet: Get Lyrics This works on Artist pages at www.lyrics.com

This script is quite a bit more involved than the first. I did succeed in making it work in the link code like the first one, but there’s an easier way. In order to make more complicated scripts work you should use the bookmarklet to load your script from a file on your server. I created rcf-get_lyrics.js and placed it on this server. You can copy/paste the script below and just change the path to point to your own file.

javascript:(function(){var url="http://www.rcfouchaux.ca/rcf-get_lyrics.js",n=document.createElement("script");n.setAttribute("language","JavaScript");n.setAttribute("src",url+"?rand="+new Date().getTime());document.body.appendChild(n)})();

I’ll discuss the code in more detail in a future post, but quickly, you create a script element and set the source to the file, then append this new element. There’s a unique identifier, which I’m not using for anything right now, created from the time and appended to the url.

Few limits

The most impressive bookmarklet I’ve ever seen, one that immediately became essential to all my JavaScript learning and development, is Alan Jardine’s Visual Event. Visual Event is an open source JavaScript bookmarklet which provides debugging information about events that have been attached to the DOM (Document Object Model; it means the entire web application represented by the “web page” loaded in the browser’s window).

Alan’s script demonstrates how to load a complex script off a server using only a small manageable amount of code in the bookmarklet itself. As you see, I borrowed it but removed his protocol check for simplicity. I think the aforementioned date/time “query string” he adds prevents the browser from caching the script indefinitely, but I didn’t research that—it’s a guess.

Another impressive project that’s available as a bookmarklet is pjscrape. If I wanted to turn my lyrics scraper into a real utility I’d probably start with pjscrape.

Update 2: I’ve placed both the bookmarklets on their own page. I expect I’ll add to the list.

Update 3: I’ve added a variation on the Facebook ad hider, using display:none and targeting only the ads—compare the two and try to figure out what’s different. I’ll add all future updates on the bookmarklets page.

§

1. This was updated since original publication and now uses id="pagelet_side_ads" and display:none;