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

esse quam videri
Jump to: navigation, search
 
(12 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
[[Emergent_Web_Technologies_Spring_2009|Back to EWT Spring 2009]]
 +
 
== Introduction ==
 
== 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.
 
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.
Line 5: Line 7:
  
 
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.
 
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 [http://www.meetup.com/js-chi/ 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 ==
 
== In Class Activities ==
Line 18: Line 24:
  
 
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]
 +
 +
'''The solution for this assignment is [http://www.mattephraim.com/ewt/javascript/wordcount_solution.js here]'''
  
 
=== Activity 2 ===
 
=== Activity 2 ===
Line 39: Line 47:
  
 
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.
 +
 +
'''The solution for this assignment is [http://www.mattephraim.com/ewt/class_4/messages/send_form.html here]'''
  
 
=== Activity 3 ===
 
=== 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.  
+
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 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 [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.
 +
 +
== Presentation ==
 +
[http://www.mattephraim.com/ewt/class_4/week_4.pdf 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 [http://code.google.com/apis/maps/documentation/index.html 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 ===
 +
* [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]
 +
 +
== 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 [http://geocoder.us/ 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 [http://microformats.org/wiki/geo 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. [http://code.google.com/apis/maps/documentation/events.html#Event_Closures 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 [http://docs.jquery.com/Ajax/jQuery.getJSON#urldatacallback 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
 +
 +
[[Category:EWT Spring 2009]]

Latest revision as of 21:34, 25 February 2009

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.

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 "https://imamp.colum.edu/mediawiki/index.php?title=Emergent_Web_Technologies_Spring_2009_Class_4&oldid=14139"