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

img img img

Image created at wordle.net

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
markup

Structure + Style: solarsystem-style.html
markup

Structure: solarsystem-markup.html
markup

Files:

Javascript

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

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

Ajax

Terms:

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

What's involved:

Import jQuery

jQuery function:

Form:

Conferences: Loading with HTML

Example

Ajax parts (produce HTML snippets):

conferencse

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

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

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

JS

Markup

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

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


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

yui

yui

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:

BBC RSS


Atom Snippet

Atom feed displayed in Firefox:
BBC RSS

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

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

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:

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:

Page:

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

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

ShareThis

share this

share this

AddThis

add this

add this

Discussion Services

Comments on Boston.com (Pluck):
comments

Comments on thecrimson.com (Disqus):
comments

Adobe Flash

Webkinz
Webkinz

Video
flash

Charts
flash
flash
flash

MLB Gameday
flash

ESPN Gamecast
flash

Flash Earth
flash

Including Flash Content in XHTML

Mechanisms

Issues

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

embed

object

Nested object/embed

JavaScript

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.

swfobject

Example: PowerPoint (and more) in Flash

Alternative Content

Using Nested Object/Embed

Scribd Presentation

embed

Using swfobject.js

Scribd Presentation

swfobject

Example Flash with XML/SWF Charts


Files involved:

census

Use "swfobject.js" to include SWF files

swfobject

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
applet

Math, Physics, and Engineering Applets
Ripple Tank
applet

Copyright © 1998-2010 David P. Heitmeyer

Bookmark and Share