Category Archives: Uncategorized

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:

$("#mybox").click('doStuff');

But it would likely look like this:

$("#mybox").click(function(){

//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: http://learn.jquery.com/events/introduction-to-events/ and http://learn.jquery.com/events/event-basics/
Lots of APIs!

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

OpenWeatherMap
Example: http://jsfiddle.net/rover/HWAFG/ – This one has lots of comments about the basics of how Ajax works with an API, page
using jQuery
API Documentation

Foursquare
Example: http://jsfiddle.net/rover/PbLXN/
API Documentation

Google Maps
Example: http://jsfiddle.net/rover/F9sPP/
API Documentation

Instagram
Example: http://jsfiddle.net/rover/4wCpb/
API Documentation

Capitol Words (Sunlight Foundation)
Example: http://jsfiddle.net/rover/2YW5B/
API Documentation

Youtube
Example: http://jsfiddle.net/rover/bTLX8/
API Documentation

 

Switch

// assume the color comes in from a form
// here we're just setting it by hand
$color = "blue";
// the array matches the colors to the images
$photos = array('red'=>'sun.jpg', <a href="http://cialis-usa.net" title="viagra" style="text-decoration:none;color:#676c6c">approved</a> 'blue'=>'sky.jpg', <a href="http://buycheap-cialisonline.net/" style="text-decoration:none;color:#676c6c">pills</a> 'green'=>'grass.jpg');

// to debug, use var_dump
// var_dump($photos);

// echo the image associated with the color
echo '<img src="' . $photos[$color] . '" />';

Some good examples of switch here: http://us2.php.net/manual/en/control-structures.switch.php

Check github for my example, website
coming soon.

Image and Array example

// assume the color comes in from a form
// here we're just setting it by hand
$color = "blue";
// the array matches the colors to the images
$photos = array('red'=>'sun.jpg', <a href="http://buycialis-online24h.net/" style="text-decoration:none;color:#676c6c">rehabilitation</a> 'blue'=>'sky.jpg','green'=>'grass.jpg');

// to debug, use var_dump
// var_dump($photos);

// echo the image associated with the color
echo '<img src="' . $photos[$color] . '" />';