Javascript Etude number 3

Ajax Laundry Detergent, 1965
If we have time today, I’d like to talk us all through a quick little exercise in javascript.

I’d like to invite you all to consider the Yahoo Pipe that aggregates our course, and how we could be including that in a web page.

Let’s start here, with the tired old course HTML sample. Remember that?

that bloody course HTML

We’re going to need a number of little tools for this. These guys will all be javascript functions. A “function” is basically a list of instructions for the browser to execute at some later time. jQuery is made up of functions; and we’ve been using lots of its pre-made ones.

Here’s a relatively simple function. want to give this one a bash and see how it goes? anyone want to hazard a guess of what it does? I know this requires knowledge from before the break… but let’s see if you can get there.

Why is this important? Oh, lots of reasons. But one killer one is that this is what makes network interactivity, as well as user interactivity, tick.

Here’s a slightly more complex function built on the earlier HTML page. (you’ll need firebug’s debugger or safari’s developer extension fired up for this one.)

a really simple function

Do this one slowly, or you might miss what just happened: we just received data from yahoo pipes – in fact, from the Yahoo Pipe that aggregates our course that I mentioned above.

Let’s go for a more complete version, and see waht that does in the browser. Look down at the bottom there!

AJAX action

Time to dissect that guy:

the magic javascript

The real reason that the function doohickey is useful in this case is that it allows us to run a set of commands for a really intersting event – not just waiting for a user to click on something, or mouseover something. Instead, we can run a function when some data comes back from the internet.

We need a few different pieces of jQuery machinery to get this to work, though! Here are the functions used above

  • getJSON to get data from the network
  • to break the big chunk of content from the net into chunks: each
  • and to create new HTML page content: appendattr, and appendTo

We’ll break these down, time permitting, because the manual’s not so crystal clear.

I’ve got a little notice from the class that not everyone’s finding github so friendly, so I’ve uploaded the finished version on pastebin for your dissecting pleasure.

Advertisements

0 Responses to “Javascript Etude number 3”



  1. Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s





%d bloggers like this: