Javascript, Part 2

javascript wordle

A form for lecture feedback is available from the course web site. Please take two minutes to fill it out after you have seen the lecture.

March 31, 2010

Harvard University
Extension School

Course Web Site: http://cscie12.dce.harvard.edu/

Instructor email: david_heitmeyer@harvard.edu
Course staff email: cscie12@dce.harvard.edu

Image created at wordle.net

Client-side Web Parts: Markup, Style, Function

Markup (XHTML, HTML)
- Structure
- Content
Style (CSS)
- Style
- Presentation
- Appearance
Function (Javascript)
- Actions
- Manipulations

Structure + Style + Function: solarsystem.html
markup

Structure + Style: solarsystem-style.html
markup

Structure: solarsystem-markup.html
markup

Javascript

Javascript: Manipulate Styles

Manipulate Styles
Manipulate Content
Communicate with Web Server (Ajax)

ice cream options

Javascript: Manipulate Content

Manipulate Styles
Manipulate Content
Communicate with Web Server (Ajax)

javascript manipulate content
US Senate

Javascript: Communicate with Web Server (Ajax)

Manipulate Styles
Manipulate Content
Communicate with Web Server (Ajax)

javascript and ajax
Course Search

Document Object Model (DOM)

web page
dom tree

Javascript and DOM: Building Content

DOM create nodes

And do the same for the other three seasons to get:
DOM create nodes

Javascript and DOM: Building Content

Example 9.1 - View example by itself

Markup
Script

In script element within head element (<script type="text/javascript">):

Javascript: Building Content with jQuery

Example: Building a list with jQuery

Javascript: Building Content with jQuery

Example 2: Building a list with jQuery

Form Validation

jQuery Form Validation Plugin makes validating forms easy and flexible.

Form 1
Use the jquery.validation.js plugin in a basic way.
Validation rules are specified in "class" attributes

form

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>A Form to Illustrate Validation using the jQuery Validation Plugin</title>
  <link rel="stylesheet" type="text/css" href="form.css"/>
  <script src="http://morpheus.dce.harvard.edu/jquery/jquery-1.4.2.min.js"
    type="text/javascript"> </script>
  <script type="text/javascript"
    src="http://morpheus.dce.harvard.edu/jquery/validate/jquery.validate.js">
   </script>  <script type="text/javascript">
$(document).ready(function(){
    $("#myForm").validate();
});
</script>
</head>
<body>
  <form  id="myForm" method="post"
    action="http://morpheus.dce.harvard.edu/cgi-bin/echo.cgi">
    <fieldset>
      <legend>Information</legend>
      <p>
        <label for="name">Name</label> <em>(Required)</em>
        <br/>
        <input id="name" name="name" size="25" class="required"/> </p>
      <p>
        <label for="email">Email Address</label> <em>(Required)</em>
        <br/>
        <input id="email" name="email" size="25" class="required email"/> </p>
      <p>
        <label for="url">URL</label> <em>(Required)</em>
        <br/>
        <input id="url" name="url" size="25" class="required url"/> </p>
      <p>
        <input class="submit" type="submit" value="Submit Form"/> </p>
    </fieldset>
  </form>
</body>
</html>

Form Validation

Rules are quite customizable and can be expressed in JavaScript sections and not in the code markup.

form2.html

form validation

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>A Forum to Illustrate Validation using the jQuery Validation Plugin</title>
  <link rel="stylesheet" type="text/css" href="form.css"/>
  <script src="http://morpheus.dce.harvard.edu/jquery/jquery-1.4.2.min.js"
    type="text/javascript"> </script>
  <script type="text/javascript"
    src="http://morpheus.dce.harvard.edu/jquery/validate/jquery.validate.js">
   </script>
  <script type="text/javascript">
  $(document).ready(function(){
    var validation = $("#myForm").validate(
     {
       rules: { 
         name:  { required: true, minlength: 2 },
         email: { required: true, email: true },
         url:   { required: true, url: true }
       }
     });
  });
  </script>
</head>
<body>
<form id="myForm" method="post" action="http://morpheus.dce.harvard.edu/cgi-bin/echo.cgi">
<fieldset>
   <legend>A Form to Illustrate Validation using the jQuery Validation Plugin</legend>
   <p>
     <label for="name">Name</label><br/>
     <input id="name" name="name" size="25"/>
   </p>
   <p>
     <label for="email">Email Address</label><br/>
     <input id="email" name="email" size="25"/>
   </p>
   <p>
     <label for="url">URL</label><br/>
     <input id="url" name="url" size="25"  value="" />
   </p>
 <p>
     <input class="submit" type="submit" value="Submit"/>
   </p>
 </fieldset>
 </form>
</body>
</html>

Form Validation

form3.html

form validation

Minified JS

Comments and unnecessary whitespace are removed.

jquery-1.4.2: 160 kb
jquery-1.4.2.min.js: 70 kb
56% smaller

jquery minified

Minify Your JS (and CSS)

Some tools you can use to minify your JS:

YUI Compressor. (JS and CSS)
Minify JS

Load Your Core JS Library through a CDN

Google and Microsoft host several JS libraries through their CDNs.
Details for using jQuery from a CDN

Google Ajax Libraries API

Two options:

Direct linking, e.g. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" />
google.load() JS method <script type="text/javascript" src="http://www.google.com/jsapi" /> <script type="text/javascript"> google.load("jquery", "1.4.2"); google.setOnLoadCallback(function() { // Place init code here instead of $(document).ready() }); </script>

See: 3 reasons why you should let Google host jQuery for you

Decreased latency
Increased Parallelism
Better Caching

Ajax Overview

AJAX: A New Approach to Web Applications, from Adaptive Path. by Jesse James Garrett

ajax schematic

Ajax

Terms:

XHR: XMLHttpRequestObject
Ajax: Asynchronous JavaScript and XML
AHAH: Asynchronous HTTP and HTML

Technologies Involved:

XHTML
CSS
JavaScript
- XMLHttpRequest (XHR) object
- Document Object Model (DOM)
- Data: XML, JSON, XHTML

ajax schematic

Seasons - Ajax and HTML

Example: Ajax, HTML, and jQuery
Data (HTML) format

Seasons - Ajax and JSON

Example: Ajax, JSON, and jQuery
Data (JSON) format

{ "seasons" : [
	"Spring",
	"Summer",
	"Autumn",
	"Winter"
	]
}

Seasons - Ajax and XML

Example: Ajax, HTML, and jQuery
Data (XML) format

seasons xml

Course Search with Ajax and jQuery

http://cscie12.dce.harvard.edu/ajax/course_jquery.html

ajax

There is a URL that returns a list of courses given a course group (as an XHTML snippet):

http://morpheus.dce.harvard.edu/ajax/course_search?description=protein
will return a list of courses whose description contains "protein"
http://morpheus.dce.harvard.edu/ajax/course_search?description=planet
will return a list of courses whose description contains "planet"
http://morpheus.dce.harvard.edu/ajax/course_search?title=neuro
will return a list of courses whose title contains "neuro"
http://morpheus.dce.harvard.edu/ajax/course_search?title=DNA
will return a list of courses whose title contains "DNA"

What's involved:

jQuery Javascript library
Server-side process to generate course list markup (courselist_partial which take a course_group query parameter)
Custom Javascript function (getCourseList) to call server-side process
Javascript to invokee the custom getCourseList function.

Import jQuery

jQuery function:

Form:

Conferences: Loading with HTML

Example

Ajax parts (produce HTML snippets):

Select List:
ajax/select-conference
School List:
ajax/search?conference=Big%2012%20Conference

conferencse

Page
- Markup
- JS
Server
- select-conference
- search

Markup:

JS:

Conferences: JSON

Example

Instead of returning HTML to be put into the page, our server-side process will return JSON (JavaScript Object Notation). We can then process the JSON data into the page.

JSON data example:

And the JS to process it:

conferences

Conferences: XML

Example

Return XML data:

And the JS changes slightly to process XML instead of JSON:

conferences xml

Loading options based upon a prior selection

Course Search by Department and Instructor

options

Back-end Processes

Instructor Options

instructor options

Course Search

Designed for XHTML (fragment), XML, and JSON output.

The Javascript (jQuery)

document "ready" callback function loads instructor options and also searches for courses.

Carousel / Randomly Shuffle an Image

Before you build your own...

Randomly Shuffle an Image: JS

Select a random number from an array (list):

imglist[Math.floor(Math.random()*imglist.length)
imglist.length = length of the array
Math.random() = random number between 0 and 1
Math.floor() = floor function

So build it up:

imglist.length
Math.random()*imglist.length
Math.random()*imglist.length
Math.floor(Math.random()*imglist.length)
imglist[Math.floor(Math.random()*imglist.length)]

Random Image using JSON data

Random Shuffle using JSON data

JSON data (via image_list.json):

The XHTML and script:

Random Image using XML data

Random Shuffle using XML data

XML data (via images.xml):

The XHTML and script:

<html>
<head>
<title>Display an Image</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" />
<script type="text/javascript">
  $(document).ready(function() {    
    var url = 'images.xml';
    var myimglist = [];
    var i = 1;
    console.log(url);
    $.get(url, function(data,textStatus){
	    console.log(textStatus);
      console.log(data);
	    $(data).find('img').each(function(){
	        console.log($(this));
          myimglist.push($(this).attr('src'));
	    });
      console.log(myimglist);
      var rndimg = myimglist[Math.floor(Math.random()*myimglist.length)];
      console.log(i++, rndimg);
      $('#myimage').attr('src',rndimg);
      setInterval(function(){
        var rndimg = myimglist[Math.floor(Math.random()*myimglist.length)];
        console.log(i++, rndimg);
        $('#myimage').attr('src',rndimg);
        },1000
      );
    });          
  });
  </script>
</head>
<body>
<h1>Images</h1>
<p>
<img id="myimage" alt="image" src=" " />
</p>
</body>
</html>

Data from a Third Party

You may wish to use data from third parties. You may wish to provide your data to others to use. This is where XML and JSON are extremely useful.

Yahoo! Web Services

Yahoo! News Search provides search results in XML and JSON formats.

Security restrictions put limitations on cross-domain JSON requests.

proxy
use "callback" functions
dynamic script loading

yahoo news

Create the URL
Get the JSON data from Yahoo!
Build HTML content from JSON data
Insert HTML onto page

Markup

Working Example: Yahoo News and JSON

Example with YUI

Yahoo! User Interface Library (YUI)
YUI Library Controls/Widgets

Tabs using YUI

Yahoo! User Interface Library (YUI)

The Yahoo! User Interface (YUI) Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX. The YUI Library also includes several core CSS resources. All components in the YUI Library have been released as open source under a BSD license and are free for all uses.

YUI Table with Congress and XML

Congress: Datatable with YUI and XML

yui

YUI DataTable

Yahoo! User Interface Library (YUI) is used in this example. YUI DataTable is used to create a table from XML data, which is retrieved with a YUI DataSource

Client-side
- Load YUI libraries
- Define a DataSource
- Define a DataTable
  - Define Column Definitions
  - Define any special formatters
Server-side
- Generate Congress XML Data

Load YUI Libraries

Define DataSource and DataTable

YAHOO.util.Event.addListener(window, "load", function() {
    YAHOO.example.XHR_XML = function() {
        
        // Define DataSource
        //   Map XML elements to Data fields (not done automatically)
        var myDataSource = new YAHOO.util.DataSource("ajax_congress");
        myDataSource.connMethodPost = true;
        myDataSource.responseType = YAHOO.util.DataSource.TYPE_XML;
        myDataSource.responseSchema = {
            resultNode: "person",
            fields: ["name","state","party","chamber","url"]
        };

// Define function to format Name 
        var formatName = function(elCell, oRecord, oColumn, sData) {
            elCell.innerHTML = "<a href='" + oRecord.getData("url") + "' target='_blank'>" + sData + "</a>";
        };

// Define Columns for table
        //   Map to data in DataSource and define sortability and formatting
        var myColumnDefs = [
            {key:"name", label:"Name", sortable: true, formatter: formatName },
            {key:"state", label:"State", sortable: true},
            {key:"party", label:"Party", sortable: true},
            {key:"chamber",label:"Chamber", sortable: true}
        ];
        // Define DataTable
        //    Where to put it (#congress)
        //    Columns and DataSource
        var myDataTable = new YAHOO.widget.DataTable(
                "congress", 
                myColumnDefs,
                myDataSource);

return {
            oDS: myDataSource,
            oDT: myDataTable
        };
    }();
});

Ext JS

Ext JS is a cross-browser JavaScript library for building rich internet applications.

High performance, customizable UI widgets
Well designed, documented and extensible Component model
Commercial and Open Source licenses available

Ext Grid with Congress and XML

Congress: Datatable with Ext JS and XML

yui

Ext JS Grid

Client-side
- Load Ext JS libraries
- Define a Data Store
- Define a Data Grid
  - Define Column Definitions
  - Define any special renderers
Server-side
- Generate Congress XML Data

Load Ext JS Libraries

Define DataSource and DataTable

myurl = 'ajax_congress' ;                                                                                          
Ext.onReady(function(){                                                                                            
                                                                                                                       
// create the Data Store                                                                                           
var store = new Ext.data.Store({                                                                                   
    // load using HTTP                                                                                             
    url: myurl,                                                                                                    
                                                                                                                       
    // the return will be XML, so lets set up a reader                                                             
    reader: new Ext.data.XmlReader({                                                                               
           // records will have an "person" tag                                                                    
           record: 'person',                                                                                       
           id: 'id',                                                                                               
       }, 
       // set up the fields mapping into the xml doc                                                           
       ['name', 'chamber', 'party', 'state', 'url']
    )                                                              
    });                                                                                                                
                                                                                                                       
    function formatName(value,p,record) {                                                                              
      var url = record.data.url;                                                                                       
      var str = '<a href="'+ url + '">' + value + '</a>';                                                              
      return str;                                                                                                      
    }                                                                                                                  
                                                                                                                       
    // create the grid                                                                                                 
    var grid = new Ext.grid.GridPanel({                                                                                
        store: store,                                                                                                  
        columns: [                                                                                                     
            {header: "Name", width: 180, 
             dataIndex: 'name', 
             sortable: true, renderer: formatName},                     
            {header: "State", width: 180, dataIndex: 'state', sortable: true},
            {header: "Party", width: 180, dataIndex: 'party', sortable: true},                                      
            {header: "Chamber", width: 180, dataIndex: 'chamber', sortable: true}
        ],                                         
        stripeRows: true,                                                                                              
        renderTo:'congressgrid',                                                                                       
        autoHeight: true                                                                                               
    });                                                                                                                
    store.load();                                                                                                      
    });

Syndication Feeds: RSS, Atom, Podcasts

RSS and Atom are lightweight XML formats for sharing headlines and other Web content.

RSS Snippet: Item

The heart of an RSS feed is an "item", which can have a title, link, and description.
Item from BBC News:

Atom Snippet

<entry>
  <title>Google Launches New Browser</title>
  <link rel="alternate" type="text/html" href="http://www.mozillazine.org/talkback.html?article=25592" />
  <modified>2008-09-03T14:33:29-08:00</modified>
  <created>2008-09-03T14:33:29-08:00</created>
  <issued>2008-09-03T14:33:29-08:00</issued>
  <id>tag:mozillazine.org,2004:article25592</id>
  <author>
    <name>mozillaZine.org</name>
  </author>
  <content type="text/html" mode="escaped" xml:lang="en" xml:base="http://www.mozillazine.org/">
    <![CDATA[<p>Google has launched a new open source browser, <a href="http://googleblog.blogspot.com/2008/09/fresh-take-on-browser.html">Chrome</a>. The new browser boasts a minimalistic UI, a new Javascript engine dubbed V8, and sandboxed tabs to prevent one tab from crashing the browser. Chrome uses components from Apple's webkit and Mozilla Firefox. </p>
    <p>Gigaom has published an article including <a href="http://gigaom.com/2008/09/01/mozilla-not-worried-about-google-browser/" title="Mozilla Not Worried About Google Browser">comments from Mozilla CEO John Lily</a> that while Microsoft, Apple and Google have other businesses and agenda, Mozilla's singular agenda is to make the web better.</p>
    <p>PCMag has published an article <a href="http://www.pcmag.com/article2/0,2817,2329267,00.asp" title="Mozilla Chief Welcomes Google Chrome to Market"> commenting on blog posts</a> from John Lily and Mozilla Foundation Chairperson Mitchell Baker. In his blog post, John Lily addresses how the <a href="http://john.jubjubs.net/2008/09/01/thoughts-on-chrome-more/">introduction of Chrome affects Mozilla and its relationship with Google.</a> Mitchell Baker commented on Mozilla's <a href="http://blog.lizardwrangler.com/2008/09/02/mozilla-firefox-and-google-chrome/">open development process and the need to continue building great products</a> in a competitive environment.</p>
    <p>CNet News Webware has articles commenting on Chrome's <a href="http://news.cnet.com/8301-17939_109-10030888-2.html">Javascript performance</a> and Chrome's <a href="http://news.cnet.com/8301-17939_109-10030522-2.html">fine print</a>, specifically auto update.</p>
    <p>Last week, Google and Mozilla <a href="http://www.betanews.com/article/Google_extends_its_investment_in_Mozilla_restores_MPL_license/1219963665">extended their search partnership</a> until 2011.</p>
    <p>News of Google Chrome leaked early when the <a href="http://www.google.com/googlebooks/chrome/index.html">comic book explaining Chrome's features</a> was published before Chrome was formally announced.</p>]]>
    <![CDATA[<p><a href="http://www.mozillazine.org/talkback.html?article=25592">Talkback</a></p>]]>
  </content>
</entry>

Atom feed displayed in Firefox:
BBC RSS

Consuming Feeds

External Application
Email client
Web Browser
Portal (e.g. iGoogle, My Yahoo!)

Subscribe to Feeds via an E-mail client

Firefox "Live Bookmarks"

Firefox "Live Bookmarks" alert you to the existence of an RSS feed for a site and allow convenient access to the items in the feed.

Podcasts: An Adaptation of RSS

Adapting and extending RSS for use with iTunes, iPods, and other mobile media players.

podcast

Each "item" has an "enclosure," which is a link to the media file (typically MP3).
iTunes uses a specific XML module added to RSS (note the itunes prefix to some elements within the item.

Podcast snippet ( WBUR/NPR On Point with Tom Ashbrook Podcast ):

<item>
      <title>Banks on the Brink</title>
      <description>Bear Stearns was bailed out. Then Fannie and Freddie. Now Lehman Brothers has gone to the brink. More could follow. How much should the government step in?</description>
      <pubDate>Mon, 15 Sep 2008 18:34:13 -0400</pubDate>
      <link>http://www.onpointradio.org</link>
      <guid>http://podcastdownload.npr.org/anon.npr-podcasts/podcast/330/510053/94647420/WBUR_94647420.mp3</guid>
      <itunes:summary>Bear Stearns was bailed out. Then Fannie and Freddie. Now Lehman Brothers has gone to the brink. More could follow. How much should the government step in?</itunes:summary>
      <itunes:keywords>WBUR,WBUR FM,On Point from WBUR,Boston,Massachusetts</itunes:keywords>
      <itunes:duration>45:54</itunes:duration>
      <itunes:explicit>no</itunes:explicit>
      <enclosure url="http://podcastdownload.npr.org/anon.npr-podcasts/podcast/330/510053/94647420/WBUR_94647420.mp3" length="22032080" type="audio/mpeg"/>
    </item>

GeoRSS: Extension to RSS

<rss version="2.0" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#"
  xmlns:ymaps="http://api.maps.yahoo.com/Maps/V1/AnnotatedMaps.xsd">
  <channel>
    <title>David's Favorite Lunch Spots</title>
    <link>http://cscie153.dce.harvard.edu/</link>
    <item>
      <title>Pinnochio's Pizza</title>
      <link>http://www.pinocchiospizza.net/</link>
      <description>The best pizza in the Square. Get a Sicilian slices of Tomato &amp; Basil
        and Spinache.</description>
      <geo:lat>42.371984</geo:lat>
      <geo:long>-71.120269</geo:long>
    </item>
    <item>
      <title>Felipe's Taqueria</title>
      <link>http://www.felipestaqueria.com/</link>
      <geo:lat>42.372436</geo:lat>
      <geo:long>-71.11962</geo:long>
      <description>Great burritos. Get a super carnitas burrito with black
        beans.</description>
    </item>
    <item>
      <title>Crema Cafe</title>
      <link>http://www.cremacambridge.com/</link>
      <geo:lat>42.373465</geo:lat>
      <geo:long>-71.120722</geo:long>
      <description>Great cafe and bakery.  I prefer the quiche or soup for lunch -- and coffee, of course.</description>
    </item>
  </channel>
</rss>

GeoRSS and Yahoo! Maps

Yahoo! Maps and RSS with GeoInfo
yahoo! maps with RSS

Google Maps & Google Earth

Google Earth KML

Google Maps

KML file:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.1">
  <Document>
  <name>campus.kml</name>
  <Folder>
    
		<Placemark>
			<name>Harvard Hall</name>
			<LookAt>
				<longitude>-71.11820174618717</longitude>
				<latitude>42.37468611065936</latitude>
				<altitude>0</altitude>
				<range>414.8710414637541</range>
				<tilt>0</tilt>
				<heading>19.04204492075862</heading>
				<altitudeMode>relativeToGround</altitudeMode>
			</LookAt>
			<styleUrl>#sn_icon161</styleUrl>
			<Point>
				<coordinates>-71.11820143657442,42.37479773771486,0</coordinates>
			</Point>
		</Placemark>
		<Placemark>
			<name>53 Church St. Computer Labs</name>
			<LookAt>
				<longitude>-71.12081237526492</longitude>
				<latitude>42.37428080261569</latitude>
				<altitude>0</altitude>
				<range>127.8780832879778</range>
				<tilt>0</tilt>
				<heading>19.04039003961311</heading>
			</LookAt>
			<styleUrl>#msn_icon16</styleUrl>
			<Point>
				<coordinates>-71.12108078801248,42.3743458912808,0</coordinates>
			</Point>
		</Placemark>
		<Placemark>
			<name>Science Center</name>
			<LookAt>
				<longitude>-71.11764471853587</longitude>
				<latitude>42.37508544261324</latitude>
				<altitude>0</altitude>
				<range>452.4599308259138</range>
				<tilt>0</tilt>
				<heading>19.04242029149159</heading>
				<altitudeMode>relativeToGround</altitudeMode>
			</LookAt>
			<styleUrl>#msn_icon160</styleUrl>
			<Point>
				<coordinates>-71.11706553293479,42.3761838835312,0</coordinates>
			</Point>
		</Placemark>
		<Placemark>
			<name>John Harvard Statue</name>
			<LookAt>
				<longitude>-71.11741675416918</longitude>
				<latitude>42.37422825709041</latitude>
				<altitude>0</altitude>
				<range>154.2193886211594</range>
				<tilt>0</tilt>
				<heading>19.04257399409277</heading>
			</LookAt>
			<styleUrl>#default+icon=http://maps.google.com/mapfiles/kml/pal3/icon63.png</styleUrl>
			<Point>
				<coordinates>-71.11732299841476,42.37449718905859,0</coordinates>
			</Point>
		</Placemark>
	</Folder>
</Document>
</kml>

Embedding Google Maps

Google Maps API
iframe

google map api

google map iframe

Google Maps API: Ivy Group

Javascript Application that uses Ajax to pull in map marker data.

Load Google Map JS from Google
Provide our data through Ajax
Create "markers" for map according to Google Map API

Place "markers" and information on maps via XML data.

Live Example: Ivy Group Map

Markup:

Data (ivy.xml)

JS to process Data

Google Maps API and KML

Google Maps API can consume a KML file.

Note that the URL of the KML file needs to absolute!

map

Data: hot_chocolate.kml

Page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps API Example: GGeoXml KML Overlay</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAr30lFNaL37OqRdrO8ZyZfhRaxLnIRbm305dZabRRYkZrI_UOrBSmVsnwDYvmdxVa2WUtMr0jBRjpXg"
      type="text/javascript"></script>
    <script type="text/javascript"> 
   
    var map;
    var geoXml; 
    var kmlurl = 'hot_chocolate.kml';

function initialize() {
      if (GBrowserIsCompatible()) {
          console.log(document.URL);
          var myDocumentURL = document.URL;
          var feedFile = "hot_chocolate.kml";
          feedURL = myDocumentURL.replace(/\/[^\/]*\.html/,'/'+feedFile);
          /* or could specify the feedURL as an absolute one:
             http://morpheus.dce.harvard.edu/~dheitmey/maps/hot_chocolate.kml
          */

console.log(feedURL);
          geoXml = new GGeoXml(feedURL);

map = new GMap2(document.getElementById("map_canvas")); 
        map.setCenter(new GLatLng(42.37,-71.12), 12); 
        map.addControl(new GLargeMapControl());
        map.addOverlay(geoXml);
      }
    } 
    </script>
  </head>

<body onload="initialize()">
    <h1>Great Places for Hot Chocolate around Harvard University</h1>
    <div id="map_canvas" style="width: 640px; height: 480px; float:left; border: 1px solid black;"></div>
  </body>
</html>

Google Maps and GeoRSS

Google Maps can consume a Geo-tagged RSS file.

Note that the URL of the RSS file needs to absolute!

map

Data:

<rss version="2.0" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#"
  xmlns:ymaps="http://api.maps.yahoo.com/Maps/V1/AnnotatedMaps.xsd">
  <channel>
    <title>David's Favorite Lunch Spots</title>
    <link>http://cscie12.dce.harvard.edu/</link>
    <item>
      <title>Pinnochio's Pizza</title>
      <link>http://www.pinocchiospizza.net/</link>
      <description>The best pizza in the Square. Get a Sicilian slices of Tomato &amp; Basil
        and Spinache.</description>
      <geo:lat>42.371984</geo:lat>
      <geo:long>-71.120269</geo:long>
    </item>
    <item>
      <title>Felipe's Taqueria</title>
      <link>http://www.felipestaqueria.com/</link>
      <geo:lat>42.372436</geo:lat>
      <geo:long>-71.11962</geo:long>
      <description>Great burritos. Get a super carnitas burrito with black
        beans.</description>
    </item>
    <item>
      <title>Crema Cafe</title>
      <link>http://www.cremacambridge.com/</link>
      <geo:lat>42.373465</geo:lat>
      <geo:long>-71.120722</geo:long>
      <description>Great cafe and bakery.  I prefer the quiche or soup for lunch -- and coffee, of course.</description>
    </item>
  </channel>
</rss>

Page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps API Example : GGeoXml RSS Overlay</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAr30lFNaL37OqRdrO8ZyZfhRaxLnIRbm305dZabRRYkZrI_UOrBSmVsnwDYvmdxVa2WUtMr0jBRjpXg"
      type="text/javascript"></script>
    <script type="text/javascript"> 
   
    var map;
    var geoXml;
    var toggleState = 1;

function initialize() {
      if (GBrowserIsCompatible()) {

var myDocumentURL = document.URL;
          var feedFile = "lunch.xml";
          feedURL = myDocumentURL.replace(/\/[^\/]*\.html/,'/'+feedFile);
          /* or could specify the feedURL as an absolute one:
             http://morpheus.dce.harvard.edu/~dheitmey/maps/lunch.xml
          */

geoXml = new GGeoXml(feedURL);

map = new GMap2(document.getElementById("map_canvas"));
          map.setCenter(new GLatLng(42.372,-71.12), 16); 
          map.addControl(new GLargeMapControl());
          map.addControl(new GLargeMapControl());
          map.addOverlay(geoXml);
          }
    }

</script>
  </head>

<body onload="initialize()">
    <h1>My Favorite Lunch Places</h1>
    <div id="map_canvas" style="width: 640px; height: 480px; float:left; border: 1px solid black;"></div>
  </body>
</html>

JavaScript Applications

The SIMILE project from MIT has some excellent examples of JS applications

Exhibit: Sites Using Web Standards
websites

Timeline on www.recovery.gov
recovery timeline

US Congress and Exhibit

Provide the data and the template, and Exhibit provides the functionality: different views, timeline according to birth date, filtering, sorting, and grouping.

Tiles View
Exhibit and Congress