Emergent Web Technologies Spring 2009 Class 4

esse quam videri
Revision as of 22:19, 18 February 2009 by Matthew.ephraim (talk | contribs)
Jump to: navigation, search

Back to EWT Spring 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 the 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.

Articles

JavaScript

JSONP

Google Maps

Assignment 3

For next week's assignment you'll be extending the information you provided for this week's assignment.

  • Add a Google map to the page that displays your locations. You can use the same geocoder we used in class to get the location of each point.
  • You can store all of your points in a JavaScript array and handle them that way. However, I would suggest that you use the Geo Microformat to add the lat/long data to the XHTML for each location on your page and then use CSS to hide it. That way you won't have to store your information in 2 separate places.
  • When you click on a point, it should pop up an info window that shows the name of the location that's associated with that point. Code Example Here
  • Finally, use the Flickr API to search for pictures that are related to your location. Any example of the API is located in the jQuery documentation.
  • Upload the final result to your homepage
  • All of your JavaScript should be located in a separate file and the page should validate as XHTML 1.0 Strict

Feel free to email me or schedule a time to meet me at my office if you have questions about this assignment.

Assignment Due: 2/27/2009 10PM

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