Difference between revisions of "Emergent Web Technologies Spring 2009 Class 4"

esse quam videri
Jump to: navigation, search
Line 39: Line 39:
  
 
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.
 
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.
 +
 +
=== Activity 3 ===
 +
 +
Use [http://geocoder.us/ this geocoder] to geocode some of the locations that you picked out for the assignment due on Friday. Then open up the Google Maps API [http://code.google.com/apis/ajax/playground/?exp=maps#map_markers playground]. Use code editor to add some of your points to the map.
 +
 +
Once you've got your points added, copy the code that adds the points and go to the [http://code.google.com/apis/ajax/playground/?exp=maps#map_info_window info window example]. Copy in the code for adding your points and then add info windows for each point.

Revision as of 19:51, 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.

Activity 3

Use this geocoder to geocode some of the locations that you picked out for the assignment due on Friday. Then open up the Google Maps API playground. Use code editor to add some of your points to the map.

Once you've got your points added, copy the code that adds the points and go to the info window example. Copy in the code for adding your points and then add info windows for each point.

Retrieved from "https://imamp.colum.edu/mediawiki/index.php?title=Emergent_Web_Technologies_Spring_2009_Class_4&oldid=14107"