JavaScript in the location bar

The Wikipedia article on bookmarklets covers this topic pretty well. Note also that according to the MDN page on the void operator, in-page javascript: URIs are discouraged.

javascript:(function() { document.body.style.backgroundColor='lightblue' } ) ()

If you have allowed JavaScript for this page, you can click on the above code to navigate to it and thereby run it. In this case the href (the target of the link) contains the same text as the innerHTML (the text visible on the page). Whether or not JavaScript is allowed for the page, you can copy the whole line of text (or copy the link from the right-click menu), paste it in the location bar, and press return.

Line-by-line

javascript:
  (
    function() {
      document.body.style.backgroundColor = 'lightblue';
      return;
    }
  )
  ()

Run JavaScript as a URI
  Parenthesize the function for anonymous application
    Make a function
     set the backgroundColor of body to lightblue
     return undefined (omitting return also returns undefined)
    End function

  Apply the anonymous function to nothing
          

Why wrap the code in an anonymous function?

Two reasons. First, wrapping a bookmarklet in a function protects the global namespace from temporary variables used by the bookmarklet. Second, browsers replace the contents of the current window with the return value of the final statement in the javascript: URI, unless that value is undefined. Wrapping all of the code in a function that returns undefined is one way to do this. Another way is just to call an undefined-returning function at the end of the code:

javascript:
  document.body.style.backgroundColor = 'lightgreen';
  (function() {}) ()

or better,

javascript:
  document.body.style.backgroundColor = 'lightgrey';
  undefined;

Or wrap the last instruction in the void operator:

javascript:
  void(document.body.style.backgroundColor = '#ffaaff')

Note that alert("some text") also returns undefined.

Make sure to end variables assignments with semicolons

Pay special attention to this when assigning a variable to a function. For example,

javascript:
  var changeBg = function (aColor) {
    document.body.style.backgroundColor = aColor;
  }
  changeBg('white');

will not work. Instead, one must write

javascript:
  var changeBg = function (aColor) {
    document.body.style.backgroundColor = aColor;
  };
  changeBg('white');

or

javascript:
  function changeBg(aColor) {
    document.body.style.backgroundColor = aColor;
  }
  changeBg('white');

In Firefox, you can see the complaint about the missing semicolon in the Errors tab of the Error Console (Tools>Error Console). By default the error will appear at the bottom of the list; you can switch the order by right-clicking on the Error Console and selecting the new order from the context menu.

Run anything you like in the location bar

It seems that anything that can be run as an on-page script can also be run from the location bar. All sorts of fun bookmarklets are possible.

Updates