Emergent Web Technologies Spring 2009 Class 4

Toolbox

Personal tools

Back to EWT Spring 2009

1 Introduction
2 Announcements
3 In Class Activities
4 Presentation
5 A Note About Google Maps
6 Articles
7 Assignment 3

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.

Announcements

If you're interested in JavaScript (or in finding a web related job), sign up for next week's Chicago JavaScript meetup. It's 6:30 PM, next Thursday. It's free and a great place to meet other people interested in JavaScript and web development. Plus, free pizza!

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

The solution for this assignment is 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.

The solution for this assignment is here

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.

Presentation

Presentation Slides

A Note About Google Maps

I'm not sure what the issue is, but if you sign up for a Google Maps key and use the code that they supply on the key signup page, you will get an error that says the API key is for another site. The map seems to work anyway, so I don't know why the message pops up.

There's another method for including the Google Maps API that is documented here. An example snippet of code is below. If you use that method, you shouldn't get an error.

  <script type="text/javascript" src="http://www.google.com/jsapi?key={your_key_here}"></script>
  <script type='text/javascript'>google.load('maps', '2');</script>

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 and add them to the description for 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 "http://imamp.colum.edu/mediawiki/index.php/Emergent_Web_Technologies_Spring_2009_Class_4"

Category: EWT Spring 2009