Last June I explored “bookmarklets,” which I’ve found to be an engaging way to explore JavaScript, primarily by leveraging the power of pet peeves—enticing novice learners to change something they don’t like about a web page to be more the way they’d like it to be. As an example I offered a simple script that toggles the visibility of the ads on a Facebook home page.

javascript:(function()
{
  var 
  rCol=document.getElementById('rightCol'),
  isHidden=rCol.style.visibility==='hidden'?true:false;
if(isHidden)
  {
    rCol.style.visibility='visible'
  }
else
  {
    rCol.style.visibility='hidden'
  }
})();

Such a snippet can lead to a discussion of the differences between CSS display and visibility or more advanced ideas like native functions and how and when to import external libraries. My bookmarklet soon evolved into the next snippet, which uses an updated id and display:none;

javascript:(function(){var%20adsDiv=document.getElementById('pagelet_side_ads'),isHidden=adsDiv.style.display==='none';if(isHidden){adsDiv.style.display='inline-block';}else{adsDiv.style.display='none';}})();

This worked fine on the Home page, but not elsewhere. Looking into it with Firebug you quickly see the id is different—on a Messages page, for example, it’s pagelet_ego_pane. You might try simply adding a conditional, if it’s not 'pagelet_side_ads' try ‘pagelet_ego_pane’. But this will fail in JavaScript when the document.getElementById method can’t find the id it’s looking for. While there are elegant advanced ways to do this, and we don’t know how many different ids there might be, I followed the learner’s first suggestion and let it turn into an introduction of try/catch blocks and error handling. These work as follows:

try
  { /*something. If it fails...*/ }
catch(errorObjectName)
  {/*report the error and/or try something else*/}

The errorObjectName is usually error and you can retrieve error.message from it, amongst other things.

If at first you don’t succeed, try/catch again

Here’s the expanded code that tries to find an element with id="pagelet_side_ads" and if that returns and error, it catches that and “tries” again with id="pagelet_ego_pane". If that fails it attempts to log that information to the console. Notice I didn’t say “tries” as there’s no additional try/catch block and I want to avoid using the same word with two meanings. What do you think would happen if the browser has no console object containing a log() method? Below the expanded version is a single line version of the same code (except generic console.log() has been refined to console.error() see this link) to use, as expanded code doesn’t work in this context.

javascript:
(function() 
{
  try
    {
      var adsDiv=document.getElementById('pagelet_side_ads'),
          isHidden=adsDiv.style.display==='none';
      if (isHidden) 
      {
        adsDiv.style.display='inline-block';
      }
      else
      {
        adsDiv.style.display='none';
      }
     }
  catch(e) 
  {
    try 
    {
      var adsDiv=document.getElementById('pagelet_ego_pane'),
          isHidden=adsDiv.style.display==='none';
      if (isHidden) 
      {
        adsDiv.style.display='inline-block';
      }
      else 
      {
        adsDiv.style.display='none';
      }
    }
    catch(e)
    {
      console.log('Failed. Message: ',e.message)
    }
   }
})();

Single line version for general use:

javascript:(function(){try{var adsDiv=document.getElementById('pagelet_side_ads'),isHidden=adsDiv.style.display==='none';if(isHidden){adsDiv.style.display='inline-block';}else{adsDiv.style.display='none';}}catch(e){ try{var adsDiv=document.getElementById('pagelet_ego_pane'),isHidden=adsDiv.style.display==='none';if(isHidden){adsDiv.style.display='inline-block';}else{adsDiv.style.display='none';}}catch(e){console.warn('toggleFBAds failed. Message:',e.message,'. This can mean the id was not found.')}}})();

Drag it to your Bookmarks toolbar: Toggle FB ads

You wouldn’t want to nest try/catch blocks in catch statements endlessly, so you might extend this into lessons on arrays, loops, recursion… that depends on you and your learners’ situation.

§