Difference between revisions of "Emergent Web Technologies Spring 2009 Class 4"
| Line 45: | Line 45: | ||
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. | 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. | ||
| + | |||
| + | == Articles == | ||
| + | |||
| + | === JavaScript === | ||
| + | * [https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Details_of_the_Object_Model Details of the Object Model] | ||
| + | * [http://www.komodomedia.com/blog/2008/09/javascript-classes-for-n00bs/ JavaScript classes] | ||
| + | |||
| + | === JSONP === | ||
| + | * [http://ajaxian.com/archives/jsonp-json-with-padding Blog post on JSONP] | ||
| + | * [http://en.wikipedia.org/wiki/JSON#JSONP Wikipedia entry about JSONP] | ||
| + | * [http://docs.jquery.com/Ajax/jQuery.getJSON#urldatacallback JSONP with jQuery] | ||
| + | |||
| + | === Google Maps === | ||
| + | * [http://code.google.com/apis/maps/signup.html Google Maps API key signup] | ||
| + | * [http://code.google.com/apis/maps/documentation/reference.html Google Maps API Docs] | ||
| + | * [http://code.google.com/apis/maps/documentation/introduction.html#The_Hello_World_of_Google_Maps A very basic example] | ||
Revision as of 20:21, 18 February 2009
Contents
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.
