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

JavaScript, AJAX, Mashups, and Web 2.0

March 20, 2007

Harvard University
Division of Continuing Education
Extension School

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

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

Add your location to the map. All information is optional, and is restricted to class members. This is an illustration of using the power of Google Maps API. Provide your location in the next week (Tue March 27), and you will earn 10 points towards your 'participation' grade.

Introduction to JavaScript, AJAX, and Mashups

Experience

Mashups
Bringing together data from different sources and presenting them in novel ways
AJAX
Intuitive, responsive, fast, "desktop-like" Web-based applications

Introduction to JavaScript, AJAX, and Mashups

Technology

Javascript
Client-side scripting language
DHTML, Dynamic HTML
- JavaScript
- Document Object Model (DOM)
- XHTML/HTML
- CSS
AJAX, Asynchronous JavaScript and XML
- XMLHttpRequest Object
- JavaScript
- Document Object Model (DOM)
- XHTML/HTML
- CSS

Example of JavaScript

Let's take a look at checking form input with JavaScript, Example:

The important pieces:

Reference an external javascript file. The javascript functions in this file can now be used within the page. <html> <script src="example7.js" type="text/javascript"> return true; </script>
The "example7.js" contains a function ValidateForm. The ValidateForm function checks to see if the email input box is not empty and if the string matches the format of an email address. function ValidateForm(thisform) { /* calls isNotEmpty and isEmailAddress */ } function isNotEmpty(elem) { /* function to check if element is not empty */ } function isEMailAddr(elem) { /* function to validate form of email address */ }
onsubmit attribute of form element. This is an "event attribute". <form action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" onsubmit="return ValidateForm(this)">

JavaScript Objects

JavaScript is an object-oriented scripting language. The dot notation is used to access properties or invoke methods of the object.

Objects
Examples:

window
document
form
location
history

Object: Properties

window.location
document.title

Object: Methods

document.write
window.open
form.submit

Event Attributes

These are attributes defined for X/HTML elements, which are "event attributes":

onblur
onfocus
onchange
onclick
ondblclick
onkeydown
onkeyup
onkeypress
onload
onunload
onmousedown
onmousemove
onmouseout
onmouseover
onmouseup
onreset
onselect
onsubmit

JavaScript and XHTML

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


               <script>

element

<!ELEMENT script - - %Script;          -- script statements -->
<!ATTLIST script
  charset     %Charset;      #IMPLIED  -- char encoding of linked resource --
  type        %ContentType;  #REQUIRED -- content type of script language --
  src         %URI;          #IMPLIED  -- URI for an external script --
  defer       (defer)        #IMPLIED  -- UA may defer execution of script --
  >

<script> element typically goes in head, but can be a child of body and many other elements.
Note the <noscript> element for clients without JavaScript.

To function in all browsers, script element should not be empty, but should include a space, a comment, or even a simple return true; statement.

JavaScript in XHTML/HTML

External Script <script src="url_to_js_file.js" />
Script within XHTML document <script type="text/javascript"> /* JavaScript code as content of script element */ </script>
"Inline" scripts as values of event attributes <a href="#" onclick="javascript:void(window.resizeTo(800,600))"> Size Window to 800 x 600 </a>

JavaScript Examples: Forms

Calculations
Redirect / Window Location
Form Validation and Control

Calculation with onclick

Two javascript statements:

document.SimpleCalc1.circumference.value=CalcCircumference(document.SimpleCalc1.radius.value)
document.SimpleCalc1.area.value=CalcArea(document.SimpleCalc1.radius.value

Example 8.1

Example 8.1 Source:

In example1.js

In head element:

Example 8.1 Demonstrated

Calculation with onblur

Example 8.2

Example 8.2 Source:

In example2.js

In head element:

Example 8.2 Demonstrated

Redirect onclick

window.location = menu.options[menu.selectedIndex].value;

menu.options[]
an array of the options for the selection list
menu.selectedIndex
the index position of the option selected (0 = first option, 1 = second option, etc.)
.value
value of the "value" attribute
window.location

Example 8.3

Example 8.3 Source:

In script element (within head element):

Example 8.3 Demonstrated

Redirect onchange

Example 8.4

Example 8.4 Source:

In script element (within head element):

Example 8.4 Demonstrated

Form Control

Validate form input using the onsubmit event handler.

Example 8.5

Example 8.5 Source:

In script element (within head element):

Example 8.5 Demonstrated

Form Validation and Regular Expressions

Validate form fields with Regular Expressions

Regular Expression:
/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/

^
[\w]+
(\.[\w-]+)*
@
([\w-]+\.)+
[a-zA-Z]{2,7}
$

Example 8.6

Example 8.6 Source:

In example6.js

In head element:

Example 8.6 Demonstrated

Validation onsubmit

Example 8.7

Example 8.7 Source:

In example7.js

In head element:

Example 8.7 Demonstrated

Form Validation: Resources

Tutorials

Libraries and Examples

JavaScript Form Validations Made Easy!

Search Box Example

Example 8.8

Example 8.8 Source:

Example 8.8 Rendered:

Body onload and focus

Body onload and focus on a form input.

Use of :focus pseudo-class to style those input boxes with focus.

Web 2.0

What Is Web 2.0: Design Patterns and Business Models for the Next Generation of Software by Tim O'Reilly
Web 2.0, article from Wikipedia

What it isn't

Buzzword or something "real"?

No formal definition (say like XHTML 1.0 or XHTML 2.0)
Web 2.0 does have characteristics and features
There are some technologies commonly found in "Web 2.0"

Web 2.0 Features and Characteristics

What Is Web 2.0: Design Patterns and Business Models for the Next Generation of Software by Tim O'Reilly

Web 1.0 and 2.0 Examples

Principles, Characteristics, Features:

Services, not packaged software, with cost-effective scalability
Control over unique, hard-to-recreate data sources that get richer as more people use them
Trusting users as co-developers
Harnessing collective intelligence
Leveraging the long tail through customer self-service
Software above the level of a single device
Lightweight user interfaces, development models, AND business models

Web 2.0 in Images

Web 2.0 Meme Map by Tim O'Reilly
web20mememap

Web 2.0 in Images

Visualizing Web 2.0 by Dion Hinchcliffe
web2.0

Web 2.0 in Images

Visualizing Web 2.0, Peter, blog.forret.com
Web 2.0 Overview

Zillow

zillow
www.zillow.com

Housingmaps.com

housing maps
www.housingmaps.com

chicagocrime.org

www.chicagocrime.org

del.icio.us

flickr

flickr
flickr.com

WorldCat

WorldCat[OCLC]

"Weaving the Web" by Tim Berners-Lee, ISBN: 006251587X

Link to this book in WorldCat is simply: http://worldcat.org/isbn/006251587X

Amazon Web Services

Amazon.com offers several different web services, including one for e-commerce.

http://www.amazon.com/gp/product/006251587X%3ftag=webservices-20%26link_code=xm2%26camp=2025%26dev-t=DEVELOPER_TOKEN

Amazon WS

Google News

google news

Rich Internet Applications

Rich Internet Applications, Rich User Experience

gmail
gmail.com

google maps
maps.google.com

google calendar
calendar.google.com

google documents
docs.google.com

DOM and XHTML/HTML

W3C XML DOM allows the all aspects of the document to be accessed and manipulated.

getElementById is a frequently seen method

Once we have the node selected, we can manipulate its properties. In this case, we are changing the "visibility" to "visible" or "hidden".

Showing and Hiding Menus, part 1

Example 8.9

Example 8.9 Source:

Example 8.9 Demonstrated

Showing and Hiding Menus, part 2

Block whose visibility is set can be positioned absolutely.

Example 8.10

Example 8.10 Source:

Example 8.10 Demonstrated

Another example of Simple DOM manipulations

We can show, hide, and change the style properties via Javascript

Example 8.11

Example 8.11 Source:

<table width="100%" >
  <tr>
    <td>Description Align:
      <ul>
        <li><a href="javascript:align('right')" >right</a>
        </li>
        <li><a href="javascript:align('left')" >left</a>
        </li>
        <li><a href="javascript:align('justify')" >justify</a>
        </li>
      </ul> </td>
    <td>Show/Hide Description:
      <ul>
        <li><a href="javascript:hidedesc()" >Hide</a>
        </li>
        <li><a href="javascript:showdesc()" >Show</a>
        </li>
      </ul> </td>
    <td>Background-color:
      <ul>
        <li><a href="javascript:backgroundcolor('#f66')" >red</a>
        </li>
        <li><a href="javascript:backgroundcolor('#66f')" >blue</a>
        </li>
        <li><a href="javascript:backgroundcolor('#6f6')" >green</a>
        </li>
        <li><a href="javascript:backgroundcolor('#ff6')" >yellow</a>
        </li>
      </ul></td>
  </tr>
</table>
  <div style="border: thin solid black; padding: 0px 20px 20px;" >
<div id="cscisl" >
  <h1>Advanced Website Development Using XML</h1>
  <p> Harvard Extension School, Summer 2007
    <br/> CSCI S-L
    <br/> Tuesdays and Thursdays, 6 to 8:30 pm </p>
  <p id="description" > This course focuses on using XML technologies in website
    development. Fundamental technologies relating to XML, such as XPath, XSL, XSLT,
    XSL-FO, XML Schemas, DTDs, SAX, and DOM, are emphasized. In addition, specific markup
    languages relevant to website development, such as XHTML, SVG, RSS, XHTML Mobile
    Profile, WML, and DocBook, are covered. These technologies, coupled with the
    open-source XML publishing framework Cocoon, are used to develop dynamic,
    database-driven sites that deliver content in a variety of media types (XHTML, text, PDF,
    graphics) for a variety of devices (desktops, handhelds, cellular phones) and
    audiences. </p>
</div>
</div>

In example11.js

In head element:

Example 8.11 Demonstrated

Exposing Additional Form Elements

Example 8.12

Example 8.12 Source:

In script element (within head element):

Example 8.12 Demonstrated

Your Work Easier with JavaScript Libraries

Tables: Class gives Functionality

Tables are constructed with thead and tbody. Simply by giving them a class="sortable", the jQuery Tablesorter Plugin makes them 'sortable' and 'striped':

Plain table: senate_table.html
Sortable table: senate_table_sortable.html
Include some Javascript libraries (jquery-latest.js and jquery.tablesorter.js), and give the table a class: <table class="sortable">

Senate data comes from GovTrack.US. Table sorting is achieved through jQuery and the jQuery Tablesorter Plugin

Sortable Tables

Tables are constructed with thead and tbody. Simply by giving them a class="sortable", the jQuery Tablesorter Plugin makes them 'sortable' and 'striped':

Plain table: senate_table.html
Sortable table: senate_table_sortable.html
Include some Javascript libraries (jquery-latest.js and jquery.tablesorter.js), and give the table a class: <table class="sortable">

The JavaScript and CSS:

table table_sortable

Senate data comes from GovTrack.US. Table sorting is achieved through jQuery and the jQuery Tablesorter Plugin

Code Syntax Highlighter

Using the dp.SyntaxHighlighter, plain textarea elements can be transformed into highlighted code.

What is needed:

Link to the SyntaxHighligher CSS and scripts <link href="SyntaxHighlighter/Styles/SyntaxHighlighter.css" rel="stylesheet" type="text/css"/> <script src="SyntaxHighlighter/Scripts/shCore.js" type="text/javascript"> </script> <script src="SyntaxHighlighter/Scripts/shBrushJScript.js" type="text/javascript"> </script> <script src="SyntaxHighlighter/Scripts/shBrushXml.js" type="text/javascript"> </script> <script src="SyntaxHighlighter/Scripts/shBrushCss.js" type="text/javascript"> </script>
Put your code in a textarea <textarea name="code" class="xml" cols="60" rows="10"> <html> <head> ... </head> <body> ... </body> </html> </textarea>
Put a name="code" attribute with any textarea that should be processed
Use class attribute to control the syntax highlighting applied (e.g. xml, js, css, java)

With and Without

And here is the same code, without the SyntaxHighlighter invoked:

AJAX

Asynchronous JavaScript and XML

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

AJAX: Asynchronous JavaScript and XML

Technologies Involved

XHTML
CSS
JavaScript
Document Object Model (DOM)
XMLHttpRequest object
Possibly: XML, XSLT, XPath

AJAX

Google Maps

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

CSCI E-12 Campus Map
cscie-153 campus map

Marker Data

campus_data.xml

Javascript createMarker function:

Ajax Example with Prototype

Prototype is a JavaScript/AJAX library that greatly simplifies creating and using AJAX.

ajax update

Course List

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

What's involved:

Prototype 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.

Javascript:

Invoking the Javascript:

Periodic Updater with Prototype

Autocomplete Text Fields

Course Title Autocomplete

There is a URL that returns a list of course titles given a string (as an XHTML list):

Tabs with jQuery

Tab Plugin for jQuery allows the easy creation of tabs.

Exhibit

Exhibit is a lightweight structured data publishing framework that lets you create web pages with support for sorting, filtering, and rich visualizations by writing only HTML and optionally some CSS and Javascript code.

Validation of College and University Web Sites

Collected website information from over 250 colleges (list from US News & World Report).

For each school, collect the following information:

URL	http://www.washington.edu/
Title	University of Washington
Valid	valid
Errors	0
Doctype	-//W3C//DTD XHTML 1.0 Strict//EN
encoding	iso-8859-1
error string	0 error
URL_end	http://www.washington.edu/
thumshot_url	http://open.thumbshots.org/image.pxf?url=http://www.washington.edu/

This was accomplished through the wonders of Perl and the xml output of the W3C Markup Validator

validate www.washington.edu
XML Output, use output=xml in query string

Note too that we are using Open Thumbshots, which allows us to grab a 120x90 pixel image of a URL.

About Thumbshots thumbnails

Data into JSON

Convert the data to "JSON" format (JSON is Javascript Object Notation).

One entry looks like:

The entire data file: colleges.json

And now for Exhibit

Colleges in Exhibit

College in Exhibit

Steps required:

Import the Exhibit javascript
Reference the data
Create templates

Exhibit Templates

Colleges in Exhibit

college exhibit

Template that defines a view:

Other Exhibit Components

Colleges in Exhibit

college exhibit

<html>
  <head>
    <title>University and College Web Sites</title>
    <link href="college.json" type="application/json" rel="exhibit/data"/>
    <script src="http://static.simile.mit.edu/exhibit/api/exhibit-api.js"
      type="text/javascript"> </script>
    <style type="text/css">
      body { margin: 0.25in; }
    </style>
  </head>
  <body>
    <h1>University and College Web Sites</h1>
    <table width="100%">
      <tr valign="top">
        <td>
          <div id="exhibit-control-panel"></div>
          <div id="exhibit-view-panel">
            <div ex:role="exhibit-view" ex:viewClass="Exhibit.TileView"
              ex:possibleOrders=".Valid, .Title, .Errors, .Doctype">
            </div>
            <table ex:role="exhibit-lens" class="college">
              <tr>
                <td><img ex:src-content=".thumbshot_url" alt="thumbshot"
                    height="90" width="120"/>
                </td>
                <td> <a ex:href-content=".URL" ex:content=".Title"></a>
                  <ul>
                    <li ex:content=".Doctype"></li>
                    <li ex:content=".error+string"></li>
                    <li ex:content=".encoding"></li>
                  </ul>
                </td>
              </tr>
            </table>
          </div>
        </td>
        <td width="25%">
          <div id="exhibit-browse-panel"
            ex:facets=".Valid, .Doctype">
          </div>
        </td>
      </tr>
    </table>
  </body>
</html>

Add Another View

Colleges in Exhibit

college exhibit

Getting the Data

Babel will produce JSON from a variety of formats (CSV, Excel, etc.)
Exhibit can get data directly from a published Google Spreadsheet!

United States Senate

senate senate senate

Senate data comes from GovTrack.US.

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