ITP Camp: All You Can Eat APIs

The advantage of a front end language like javascript (in fact, online javascript is really the only browser-based language we have) is that you can respond immediately to a user’s actions. Javascript calls these “events”. An event could be a mouse move, breast a scroll, a key press, and many others. Here’s a list of the major Javascript events.

Javascript won’t tell you automatically when events happen; you have to register an Event Listener to pay attention to that particular event — to “listen for” a mouse click, for example. When you create an event listener, you then define a function which will fire when the even happens.

jQuery also has methods that handle events. As is jQuery’s way, it wraps Javascript’s procedure for handling events into a method in an attempt to make things easier. In the documentation, there’s a nice list of all the jQuery event methods. One of the methods is bind() and that’s an important one. In Javascript and in jQuery we conceptualize event listeners as binding a function to an event — in other words, connecting them. Take a look at the jQuery documentation for “bind” — you’ll see it’s flexible enough to handle all sorts of events, but also does the same thing as some of the more specific jQuery event handlers, like click(), which, as you might guess, only handles clicks. Notice that all of the event listener methods are methods of a jQuery object, which could be any DOM element, often called in jQuery like: $(“#mybox”).

A tricky concept at first in Javascript and jQuery is the way that functions are used. Often event listeners will take a function as a parameter. You may be accustomed to seeing and writing functions that look like:

function addNumbers(a,b){
    sum = a + b;
    return sum;

In that function, the parameters are a and b, which are both integers. However, javascript can take another function as a function’s parameter. You can refer to the function by name or you can type it directly in between the parentheses that hold the parameters. For example:

function doStuff(){
// do the stuff

If a click event in jQuery called this function it could like this:


But it would likely look like this:


//do stuff;


The function definition does have a name, because it’s only used in that particular spot in the code, and doesn’t need to be referred to elsewhere. That’s called an anonymous function. Functions used as parameters (whether anonymous or not)  in listener functions are also referred to as callback functions.

More about jQuery events: and
Lots of APIs!

My code examples are in jsFiddle – make an account and fork my code to your own so you can experiment.

Example: – This one has lots of comments about the basics of how Ajax works with an API, page
using jQuery
API Documentation

API Documentation

Google Maps
API Documentation

API Documentation

Capitol Words (Sunlight Foundation)
API Documentation

API Documentation


Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>