Emergent Web Technologies Spring 2009 Class 4

Introduction

Just a little bit more for JavaScript basics this week. Specifically, Object Oriented JavaScript. JavaScript doesn't actually have "classes" per se, but it does have objects and objects can be copied in a way that's similar to the way that classes work in other languages.

Also covered this week: JSON with Padding or JSONP. JSONP is basically a hack to get around the fact that Ajax calls cannot be made across domains. Despite the fact that it's a hack, some sites make use of it for their JavaScript APIs, so it's a helpful trick to know. jQuery wraps up JSONP calls in a function that makes it easy to do.

Finally, I'm introducing the Google Maps API using the Google API Playground. The API playground is a nice way to try out Google's APIs without needing to configure things on your own.

In Class Activities

Activity 1

Build a word counter for textarea tags. This is an activity that demonstrates how you can use object oriented JavaScript to build reusable JavaScript components on your pages.

Adding a new wordcounter should be a simple as this:

   new WordCount(textareaNode);

You can copy the template here

Activity 2

Use JSONP to send messages to a server and interpret the messages as they come back. I have a page that displays messages from remote clients as they come in.

   http://www.mattephraim.com/ewt/class_4/messages/

You can add messages by sending them to the server at

  http://www.mattephraim.com/ewt/class_4/messages

The server takes three parameters:

• name (for the name of the person sending the message
• message (for the message the person is sending)
• jsoncallback (for the name of the callback function)

jQuery will handle the jsoncallback function name if you format your url like this:

   http://www.example.com/api?jsoncallback=?

Use the jQuery.getJSON function and jQuery will automatically give your anonymous function a name and insert it into the url.