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:

Instructor email:
Course staff email:

img img img

Image created at

Client-side Web Parts: Markup, Style, Function

http client

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

Structure + Style + Function: solarsystem.html

Structure + Style: solarsystem-style.html

Structure: solarsystem-markup.html



Javascript: Manipulate Styles

ice cream options ice cream options

Javascript: Manipulate Content

javascript manipulate content
US Senate

Javascript: 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

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 Validation

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

form validation

Form Validation

form validation

Minified JS

Comments and unnecessary whitespace are removed.

jquery minified

Minify Your JS (and CSS)

Some tools you can use to minify your 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

Google Ajax Libraries API

Two options:

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

Ajax Overview

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

ajax schematic



Technologies Involved:

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" : [

Seasons - Ajax and XML

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

seasons xml

Course Search with Ajax and jQuery


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

What's involved:

Import jQuery

jQuery function:


Conferences: Loading with HTML


Ajax parts (produce HTML snippets):




Conferences: JSON


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: XML


Return XML data:
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



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):

So build it up:

Random Image using JSON data

JSON data (via image_list.json):

The XHTML and script:

Random Image using XML data

XML data (via images.xml):

The XHTML and script:

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.

yahoo news yahoo news



Working Example: Yahoo News and JSON

Example with 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



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

Load YUI Libraries

Define DataSource and DataTable

Ext JS

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

Ext Grid with Congress and XML



Ext JS Grid

Load Ext JS Libraries

Define DataSource and DataTable

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

Atom feed displayed in Firefox:

Consuming Feeds

Subscribe to Feeds via an E-mail client

Thunderbird RSS

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.

rss in firefox

Podcasts: An Adaptation of RSS

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


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

GeoRSS: Extension to RSS

GeoRSS and Yahoo! Maps

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

Google Maps & Google Earth

Google Earth KML
Google Earth

Google Maps
Google Maps

KML file:

Embedding Google Maps

google map api

google map iframe

Google Maps API: Ivy Group

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

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

Live Example: Ivy Group Map
Ivy Group map


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!


Data: hot_chocolate.kml


Google Maps and GeoRSS

Google Maps can consume a Geo-tagged RSS file.

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




JavaScript Applications

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

Exhibit: Sites Using Web Standards

Timeline on
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

Table View (columns are sortable)
Exhibit and Congress

Thumbnails View (Filters applied: California, Democrat)
Exhibit and Congress

Timeline View
Visible are those with birthdays in 1969-1972. Timeline is scrollable.
Exhibit and Congress

Congress data used with permission from GovTrack.US.

AddThis and ShareThis


share this

share this


add this

add this

Discussion Services

Comments on (Pluck):

Comments on (Disqus):

Adobe Flash




MLB Gameday

ESPN Gamecast

Flash Earth

Including Flash Content in XHTML



See: "Flash Embedding Cage Match" on "A List Apart."



Nested object/embed


Use JavaScript build the appropriate markup

JavaScript: swfobject

SWFObject is an easy-to-use and standards-friendly method to embed Flash content, which utilizes one small JavaScript file.


Example: PowerPoint (and more) in Flash

Alternative Content

Using Nested Object/Embed

Scribd Presentation


Using swfobject.js

Scribd Presentation


Example Flash with XML/SWF Charts

Files involved:


Use "swfobject.js" to include SWF files


Video and JW Player

The JW Player is a widely-used Flash player for video.

SWFObject and JW Player

Video and JW Player

The JW Player is a widely-used Flash player for video.

Quick Demo of Firebug Screencast

Java Applets

<applet />

UC Irvine Chemistry Educational Applets
Chemical Kinetics Simulation

Math, Physics, and Engineering Applets
Ripple Tank

Copyright © 1998-2010 David P. Heitmeyer

Bookmark and Share