Table of Contents | All Slides | Link List | Examples | CSCI E-12
next >>

JavaScript, AJAX, Mashups, and Web 2.0
URI References

JavaScript, AJAX, Mashups, and Web 2.0

http://cscie12.dce.harvard.edu/
david_heitmeyer@harvard.edu
mailto:david_heitmeyer@harvard.edu
cscie12@fas.harvard.edu
mailto:cscie12@fas.harvard.edu

Add your location
http://isites.harvard.edu/icb/icb.do?keyword=k12622&pageid=icb.page72961&login=yes
Introduction to JavaScript, AJAX, and Mashups
Introduction to JavaScript, AJAX, and Mashups
Example of JavaScript
Example
example7.shtml
JavaScript Objects
Event Attributes
JavaScript and XHTML

Scripts in HTML Documents
http://www.w3.org/TR/html4/interact/scripts.html

HTML 4 Specification
http://www.w3.org/TR/html4/

http://www.w3.org/TR/html4/interact/scripts.html

<noscript>
http://www.w3.org/TR/html4/interact/scripts.html#edef-NOSCRIPT
JavaScript in XHTML/HTML
JavaScript Examples: Forms
Calculation with onclick
Calculation with onblur
Redirect onclick
Redirect onchange
Form Control
Form Validation and Regular Expressions
Validate form fields with Regular Expressions
email_valid.html
Validation onsubmit
Form Validation: Resources

Javascript form validation - doing it right
http://www.xs4all.nl/~sbpoley/webmatters/formval.html

Javascript form validation - doing it right with checkboxes
http://www.xs4all.nl/~sbpoley/webmatters/formval2.html

JavaScript Form Validations Made Easy!
http://www.javascript-coder.com/html-form/javascript-form-validation.phtml
Search Box Example
Body onload and focus
Body onload and focus on a form input.
onload_focus.html
Web 2.0

What Is Web 2.0: Design Patterns and Business Models for the Next Generation of Software
http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html

Web 2.0
http://en.wikipedia.org/wiki/Web_2
Web 2.0 Features and Characteristics

What Is Web 2.0: Design Patterns and Business Models for the Next Generation of Software
http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html
Web 2.0 in Images

Web 2.0 Meme Map
http://www.flickr.com/photos/36521959321@N01/44349798
Web 2.0 in Images

Visualizing Web 2.0
http://web2.wsj2.com/visualizingweb20.htm
Web 2.0 in Images

Visualizing Web 2.0
http://blog.forret.com/2005/09/web-20-mememap-overview/
Zillow

www.zillow.com
http://www.zillow.com/
Housingmaps.com

www.housingmaps.com
http://www.housingmaps.com/
chicagocrime.org

www.chicagocrime.org
http://www.chicagocrime.org/
del.icio.us

del.icio.us
http://del.icio.us/
flickr

flickr.com
http://flickr.com/
WorldCat

WorldCat[OCLC]
http://worldcat.org/

http://worldcat.org/isbn/006251587X
Amazon Web Services

Amazon.com offers several different web services
http://aws.amazon.com/
http://www.amazon.com/gp/product/006251587X%3ftag=webservices-20%26link_code=xm2%26camp=2025%26dev-t=DEVELOPER_TOKEN
wtw_tbl.xml
Google News

news?hl=en&ned=us&q=Harvard+University
http://news.google.com/news?hl=en&ned=us&q=Harvard+University&btnG=Search+News

news?hl=en&ned=us&q=Harvard+University&output=rss
http://news.google.com/news?hl=en&ned=us&q=Harvard+University&btnG=Search+News&output=rss

news?hl=en&ned=us&q=Harvard+University&output=atom
http://news.google.com/news?hl=en&ned=us&q=Harvard+University&btnG=Search+News&output=atom
Rich Internet Applications

gmail.com
http://gmail.com/

maps.google.com
http://maps.google.com/

calendar.google.com
http://calendar.google.com/

docs.google.com
http://docs.google.com/
DOM and XHTML/HTML
Another example of Simple DOM manipulations
Advanced Website Development Using XML
Exposing Additional Form Elements
Your Work Easier with JavaScript Libraries

jQuery
http://www.jquery.com

Prototype / Scriptaculous
http://www.prototypejs.org/

Yahoo! UI
http://developer.yahoo.com/yui/

Dojo
http://www.dojo.org
Tables: Class gives Functionality
senate_table.html
senate/senate_table.html
senate_table_sortable.html
senate/senate_table_sortable.html
jquery-latest.js
jquery.tablesorter.js

GovTrack.US
http://govtrack.us

jQuery
http://www.jquery.com/

jQuery Tablesorter Plugin
http://motherrussia.polyester.se/jquery-plugins/tablesorter/
Sortable Tables
senate_table.html
senate/senate_table.html
senate_table_sortable.html
senate/senate_table_sortable.html
jquery-latest.js
jquery.tablesorter.js

GovTrack.US
http://govtrack.us

jQuery
http://www.jquery.com/

jQuery Tablesorter Plugin
http://motherrussia.polyester.se/jquery-plugins/tablesorter/
Code Syntax Highlighter

dp.SyntaxHighlighter
http://www.dreamprojections.com/SyntaxHighlighter/
AJAX

AJAX: A New Approach to Web Applications
http://adaptivepath.com/publications/essays/archives/000385.php
AJAX: Asynchronous JavaScript and XML

Ajax: A New Approach to Web Applications
http://adaptivepath.com/publications/essays/archives/000385.php

AJAX (Wikipedia)
http://en.wikipedia.org/wiki/AJAX
AJAX
Google Maps

CSCI E-12 Campus Map
http://isites.harvard.edu/icb/icb.do?keyword=k12622&pageid=icb.page73000
Marker Data
campus_data.xml
Ajax Example with Prototype

Course List
http://minerva.dce.harvard.edu:8080/cocoon/users/d/h/dheitmey/ajax/dce_courses.html

courselist_partial?course_group=BIOL
http://minerva.dce.harvard.edu:8080/cocoon/users/d/h/dheitmey/ajax/courselist_partial?course_group=BIOL

courselist_partial?course_group=CSCI
http://minerva.dce.harvard.edu:8080/cocoon/users/d/h/dheitmey/ajax/courselist_partial?course_group=CSCI
Periodic Updater with Prototype

periodic_update.html
http://minerva.dce.harvard.edu:8080/cocoon/users/d/h/dheitmey/ajax2/periodicupdate.html

status
http://minerva.dce.harvard.edu:8080/cocoon/users/d/h/dheitmey/ajax2/status
Autocomplete Text Fields

Course Title Autocomplete
http://minerva.dce.harvard.edu:8080/cocoon/users/d/h/dheitmey/ajax2/autocomplete_title.html

course_title_list?title=Chemistry
http://minerva.dce.harvard.edu:8080/cocoon/users/d/h/dheitmey/ajax2/course_title_list?title=Chemistry

course_title_list?title=Neuro
http://minerva.dce.harvard.edu:8080/cocoon/users/d/h/dheitmey/ajax2/course_title_list?title=Neuro
Tabs with jQuery

Accessible, Unobtrusive Javascript Tabs wtih jQuery
http://stilbuero.de/2006/05/13/accessible-unobtrusive-javascript-tabs-with-jquery/

Demos
http://stilbuero.de/jquery/tabs/
tabs.html
tabs.js
Exhibit
Validation of College and University Web Sites

validate www.washington.edu
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.washington.edu%2F

XML Output
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.washington.edu%2F&output=xml

Open Thumbshots
http://www.thumbshots.net

About Thumbshots thumbnails
http://www.thumbshots.net
Data into JSON
colleges.json
colleges/college.json
And now for Exhibit
Colleges in Exhibit
colleges/colleges.html
Exhibit Templates
Colleges in Exhibit
colleges/colleges.html
Other Exhibit Components
Colleges in Exhibit
colleges/colleges.html
Add Another View
Colleges in Exhibit
colleges/colleges2.html
Getting the Data

Babel
http://simile.mit.edu/babel/
United States Senate
senate.html
senate/senate.html
senate.json
senate/senate.json

GovTrack.US
http://govtrack.us
About Thumbshots thumbnails