Difference between revisions of "Emergent Web Technologies Spring 2009 Class 4"
Line 18: | Line 18: | ||
You can copy the template [http://www.mattephraim.com/ewt/class_4/wordcount.html here] | You can copy the template [http://www.mattephraim.com/ewt/class_4/wordcount.html 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 [http://docs.jquery.com/Ajax/jQuery.getJSON#urldatacallback jQuery.getJSON] function and jQuery will automatically give your anonymous function a name and insert it into the url. |
Revision as of 18:56, 18 February 2009
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.