JavaScript, AJAX, Mashups, and Web 2JavaScript, AJAX, Mashups, and Web 2.0 15 of 68 3/20/2007 5:07 PM Calculation with onblur

JavaScript, AJAX, Mashups, and Web 2.0 http://localhost:8080/cocoon/projects/cscie12/slides/20070320/handout.html

1 of 68 3/20/2007 5:07 PM

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

JavaScript, AJAX, Mashups, and Web 2.0March 20, 2007

Harvard University Division of Continuing Education

Extension School

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

Copyright 1998-2007 David P. Heitmeyer

Instructor email: [email protected] Course staff email: [email protected]


2 of 68 3/20/2007 5:07 PM

Introduction to JavaScript, AJAX, and Mashups

Experience

Mashups

Bringing together data from different sources and presenting them in novel ways


3 of 68 3/20/2007 5:07 PM


4 of 68 3/20/2007 5:07 PM

AJAX

Intuitive, responsive, fast, "desktop-like" Web-based applications


5 of 68 3/20/2007 5:07 PM


6 of 68 3/20/2007 5:07 PM


7 of 68 3/20/2007 5:07 PM

Introduction to JavaScript, AJAX, and Mashups

Technology

Javascript

Client-side scripting language

DHTML, Dynamic HTMLJavaScriptDocument Object Model (DOM)XHTML/HTMLCSS

AJAX, Asynchronous JavaScript and XMLXMLHttpRequest ObjectJavaScriptDocument Object Model (DOM)XHTML/HTMLCSS


8 of 68 3/20/2007 5:07 PM

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

1.

The "example7.js" contains a function ValidateForm. The ValidateForm function checks to see if theemail input box is not empty and if the string matches the format of an email address.

2.

onsubmit attribute of form element. This is an "event attribute".3.

<html> 1. <head> 2. <title>CSCIE-12, Example: 7.7</title> 3. <script src="example7.js" type="text/javascript"> 4. return true; 5. </script> 6. </head> 7. <body> 8. <form action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" 9. onsubmit="return ValidateForm(this)"> 10. <div> 11. Email Address: 12. <input type="text" size="32" name="email" id="email" /> 13. <br /> 14. <input type="submit" /> 15. </div> 16. </form> 17. </body> 18.</html> 19.

<html> 1.<script src="example7.js" type="text/javascript"> 2. return true; 3.</script> 4.

function ValidateForm(thisform) { 1. /* calls isNotEmpty and isEmailAddress */ 2.} 3.function isNotEmpty(elem) { 4. /* function to check if element 5. is not empty */ 6.} 7.function isEMailAddr(elem) { 8. /* function to validate form 9. of email address */ 10.} 11.

<form action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" 1. onsubmit="return ValidateForm(this)"> 2.


9 of 68 3/20/2007 5:07 PM

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:

windowdocumentformlocationhistory

Object: Properties

window.locationdocument.title

Object: Methods

document.writewindow.openform.submit


10 of 68 3/20/2007 5:07 PM

Event Attributes

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

onbluronfocusonchangeonclickondblclickonkeydownonkeyuponkeypressonloadonunloadonmousedownonmousemoveonmouseoutonmouseoveronmouseuponresetonselectonsubmit


11 of 68 3/20/2007 5:07 PM

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, scriptelement should not be empty, but should include a space, a comment, or even a simple return true;statement.


12 of 68 3/20/2007 5:07 PM

JavaScript in XHTML/HTML

External Script

Script within XHTML document

"Inline" scripts as values of event attributes

<script src="url_to_js_file.js" /> 1.

<script type="text/javascript"> 1. /* 2. JavaScript code as content of script element 3. */ 4.</script> 5.

<a href="#" 1. onclick="javascript:void(window.resizeTo(800,600))"> 2. Size Window to 800 x 600 3.</a> 4.


13 of 68 3/20/2007 5:07 PM

JavaScript Examples: Forms

Calculations Redirect / Window Location Form Validation and Control


14 of 68 3/20/2007 5:07 PM

Calculation with onclick

Example 8.1

Example 8.1 Source:

In example1.js

In head element:

Example 8.1 Demonstrated

<form name="SimpleCalc1" action="" > 1. <table cellpadding="10" > 2. <tr style="background: #99FFCC" > 3. <td>Radius:</td> 4. <td> 5. <input type="text" size="10" name="radius" /> 6. </td> 7. <td>cm</td> 8. </tr> 9. <tr style="background: #CCCCCC" > 10. <td>Circumference:</td> 11. <td> 12. <input type="text" size="10" name="circumference" /> 13. </td> 14. <td>cm</td> 15. </tr> 16. <tr style="background: #CCCCCC" > 17. <td>Area:</td> 18. <td> 19. <input type="text" size="10" name="area" /> 20. </td> 21. <td>cm<sup>2</sup> </td> 22. </tr> 23. </table> 24. <div> 25. <input type="button" value="Calculate!" onclick="document.SimpleCalc1.circumference.value=Calc26. </div> 27.</form> 28.

var PI = 3.14159; 1.function CalcCircumference(r) { 2. return 2*PI*r; 3.} 4.function CalcArea(r) { 5. return PI*r*r 6.} 7.

<script src="example1.js" type="text/javascript"> </script> 1.


15 of 68 3/20/2007 5:07 PM

Calculation with onblur

Example 8.2

Example 8.2 Source:

In example2.js

In head element:


<form name="SimpleCalc1" action="" > 1. <table cellpadding="10" > 2. <tr style="background: #99FFCC" > 3. <td>Radius:</td> 4. <td> 5. <input type="text" size="10" name="radius" onblur="document.SimpleCalc1.circumference.val6. </td> 7. <td>cm</td> 8. </tr> 9. <tr style="background: #CCCCCC" > 10. <td>Circumference:</td> 11. <td> 12. <input type="text" size="10" name="circumference" /> 13. </td> 14. <td>cm</td> 15. </tr> 16. <tr style="background: #CCCCCC" > 17. <td>Area:</td> 18. <td> 19. <input type="text" size="10" name="area" /> 20. </td> 21. <td>cm<sup>2</sup> </td> 22. </tr> 23. </table> 24.</form> 25.

var PI = 3.14159; 1.function CalcCircumference(r) { 2. return 2*PI*r; 3.} 4.function CalcArea(r) { 5. return PI*r*r 6.} 7.



16 of 68 3/20/2007 5:07 PM

Redirect onclick

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

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

Example 8.3

Example 8.3 Source:

In script element (within head element):


<form name="JumpTo1" action="" > 1. <div> 2. <select name="GotoURL" > 3. <option value=" " >Select an Apache "How-To/Tutorial"</option> 4. <option value="http://httpd.apache.org/docs/2.2/howto/auth.html" > 5. Authentication, Authorization, and Access Control</option> 6. <option value="http://httpd.apache.org/docs/2.2/howto/cgi.html" >CGI: Dynamic 7. Content</option> 8. <option value="http://httpd.apache.org/docs/2.2/howto/htaccess.html" > 9. .htaccess files</option> 10. <option value="http://httpd.apache.org/docs/2.2/howto/ssi.html" >Server Side 11. Includes (SSI)</option> 12. <option value="http://httpd.apache.org/docs/2.2/howto/public_html.html" > 13. Per-user Web Directories (public_html)</option> 14. </select> 15. <input type="button" onclick="doJump(document.JumpTo1.GotoURL)" value="Go!" /> 16. </div> 17.</form> 18.

function doJump(menu) { 1. window.location = menu.options[menu.selectedIndex].value; 2.} 3.


17 of 68 3/20/2007 5:07 PM

Redirect onchange

Example 8.4

Example 8.4 Source:



<form name="JumpTo1" action="" > 1. <div> 2. <select name="GotoURL" onchange="doJump(document.JumpTo1.GotoURL)" > 3. <option value=" " >Select an Apache "How-To/Tutorial"</option> 4. <option value="http://httpd.apache.org/docs/2.2/howto/auth.html" > 5. Authentication, Authorization, and Access Control</option> 6. <option value="http://httpd.apache.org/docs/2.2/howto/cgi.html" >CGI: Dynamic 7. Content</option> 8. <option value="http://httpd.apache.org/docs/2.2/howto/htaccess.html" > 9. .htaccess files</option> 10. <option value="http://httpd.apache.org/docs/2.2/howto/ssi.html" >Server Side 11. Includes (SSI)</option> 12. <option value="http://httpd.apache.org/docs/2.2/howto/public_html.html" > 13. Per-user Web Directories (public_html)</option> 14. </select> 15. </div> 16.</form> 17.

function doJump(menu) { 1. window.location = menu.options[menu.selectedIndex].value; 2.} 3.


18 of 68 3/20/2007 5:07 PM

Form Control

Validate form input using the onsubmit event handler.

Example 8.5

Example 8.5 Source:



<form action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" method="get" onsubmit="return Valid1.<div>Enter your name: <input type="text" name="YourName" /><br/> 2. <input type="submit" value="Submit Information" /></div> 3.</form> 4.

function Validate(thisform) { 1. if(thisform.YourName.value == null || thisform.YourName.value == "") { 2. alert("Please enter your name!"); 3. thisform.YourName.focus(); 4. return false; 5. } 6.} 7.


19 of 68 3/20/2007 5:07 PM

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:


<form action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" > 1. <div> Email Address: 2. <input type="text" size="32" name="email" id="email" onblur="if (isNotEmpty(this)) {isEMailA3. <br/> 4. <input type="submit" /> </div> 5.</form> 6.

// validates that the field value string has one or more characters in it 1.function isNotEmpty(elem) { 2. var str = elem.value; 3. var re = /.+/; 4. if(!str.match(re)) { 5. alert("Please fill in the required field."); 6. return false; 7. } else { 8. return true; 9. } 10.} 11.// validates that the entry is formatted as an email address 12.function isEMailAddr(elem) { 13. var str = elem.value; 14. var re = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/; 15. if (!str.match(re)) { 16. alert("Verify the email address format."); 17. return false; 18. } else { 19. return true; 20. } 21.} 22.



20 of 68 3/20/2007 5:07 PM

Validation onsubmit

Example 8.7

Example 8.7 Source:

In example7.js

In head element:


<form action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" onsubmit="return ValidateForm(this)"1. <div> Email Address: 2. <input type="text" size="32" name="email" id="email" /> 3. <br/> 4. <input type="submit" /> </div> 5.</form> 6.

// function that calls separate validation functions 1.function ValidateForm(thisform) { 2. if(isNotEmpty(thisform.email)) { 3. if (isEMailAddr(thisform.email)) { 4. return true; 5. } else { 6. return false; 7. } 8. } else { 9. return false; 10. } 11.} 12.// validates that the field value string has one or more characters in it 13.function isNotEmpty(elem) { 14. var str = elem.value; 15. var re = /.+/; 16. if(!str.match(re)) { 17. alert("Please fill in the required field."); 18. return false; 19. } else { 20. return true; 21. } 22.} 23.// validates that the entry is formatted as an email address 24.function isEMailAddr(elem) { 25. var str = elem.value; 26. var re = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/; 27. if (!str.match(re)) { 28. alert("Verify the email address format."); 29. return false; 30. } else { 31. return true; 32. } 33.} 34.



21 of 68 3/20/2007 5:07 PM

Form Validation: Resources

Tutorials

Javascript form validation - doing it rightJavascript form validation - doing it right with checkboxes

Libraries and Examples

JavaScript Form Validations Made Easy!


22 of 68 3/20/2007 5:07 PM

Search Box Example

Example 8.8

Example 8.8 Source:

Example 8.8 Rendered:

Search

<form name="search" action="http://www.google.com/search" > 1. <div> 2. <input type="text" value="Enter search terms" name="q" size="25" onfocus="this.form.q.value=3. <input type="submit" value="Search" /> 4. </div> 5.</form> 6.

Enter search terms


23 of 68 3/20/2007 5:07 PM

Body onload and focus

Body onload and focus on a form input.

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

<body onload="document.forms[0].YourName.focus()"> 1.<form action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" 2. method="get" onsubmit="return Validate(this)"> 3. <div> 4. <p>Enter your name: <input type="text" name="YourName" /> 5. <br /> 6. <input type="submit" value="Submit Information" /> 7. </p> 8. </div> 9.</form> 10.


24 of 68 3/20/2007 5:07 PM

Web 2.0

What Is Web 2.0: Design Patterns and Business Models for the Next Generation of Software by TimO'ReillyWeb 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 featuresThere are some technologies commonly found in "Web 2.0"


25 of 68 3/20/2007 5:07 PM

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

Principles, Characteristics, Features:

Services, not packaged software, with cost-effective scalabilityControl over unique, hard-to-recreate data sources that get richer as more people use themTrusting users as co-developersHarnessing collective intelligenceLeveraging the long tail through customer self-serviceSoftware above the level of a single deviceLightweight user interfaces, development models, AND business models


26 of 68 3/20/2007 5:07 PM

Web 2.0 in Images

Web 2.0 Meme Map by Tim O'Reilly


27 of 68 3/20/2007 5:07 PM

Web 2.0 in Images

Visualizing Web 2.0 by Dion Hinchcliffe


28 of 68 3/20/2007 5:07 PM

Web 2.0 in Images

Visualizing Web 2.0, Peter, blog.forret.com


29 of 68 3/20/2007 5:07 PM

Zillow

www.zillow.com


30 of 68 3/20/2007 5:07 PM

Housingmaps.com

www.housingmaps.com


31 of 68 3/20/2007 5:07 PM

chicagocrime.org

www.chicagocrime.org


32 of 68 3/20/2007 5:07 PM

del.icio.us

del.icio.us


33 of 68 3/20/2007 5:07 PM

flickr

flickr.com


34 of 68 3/20/2007 5:07 PM

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


35 of 68 3/20/2007 5:07 PM

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=DEV


36 of 68 3/20/2007 5:07 PM

Google News

news?hl=en&ned=us&q=Harvard+Universitynews?hl=en&ned=us&q=Harvard+University&output=rssnews?hl=en&ned=us&q=Harvard+University&output=atom


37 of 68 3/20/2007 5:07 PM

Rich Internet Applications

Rich Internet Applications, Rich User Experience

gmail.com

maps.google.com


38 of 68 3/20/2007 5:07 PM

calendar.google.com

docs.google.com


39 of 68 3/20/2007 5:07 PM

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:


Showing and Hiding Menus, part 2

Block whose visibility is set can be positioned absolutely.

Example 8.10

Example 8.10 Source:


<ul> 1. <li><a href="#" onclick="document.getElementById("menu").style.visibility = "visible"" > 2. Show Menu</a> 3. </li> 4. <li><a href="#" onclick="document.getElementById("menu").style.visibility = "hidden"" > 5. Hide Menu</a> 6. </li> 7.</ul> 8. 9.<div style="visibility: hidden" id="menu" > <a href="http://www.harvard.edu/" > 10. Harvard University</a> 11. <br/> <a href="http://www.dce.harvard.edu/" >Division of Continuing Education</a> 12. <br/> <a href="http://www.extension.harvard.edu/" >Extension School</a> 13. <br/> <a href="http://cscie12.dce.harvard.edu/" >Fundamentals of Web Site 14. Development</a> 15.</div> 16.

<ul> 1. <li><a href="#" onclick="document.getElementById("menu2").style.visibility = "visible"" > 2. Show Menu</a> 3. </li> 4. <li><a href="#" onclick="document.getElementById("menu2").style.visibility = "hidden"" > 5. Hide Menu</a> 6. </li> 7.</ul> 8.<div style="position: absolute; left: 200px; top: 100px; visibility: hidden" id="menu2" ><a href="h9. <br/> <a href="http://www.dce.harvard.edu/" >Division of Continuing Education</a> 10. <br/> <a href="http://www.extension.harvard.edu/" >Extension School</a> 11. <br/> <a href="http://cscie12.dce.harvard.edu/" >Fundamentals of Web Site 12. Development</a> 13.</div> 14.


40 of 68 3/20/2007 5:07 PM

Another example of Simple DOM manipulations

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

Example 8.11


In example11.js

<table width="100%" > 1. <tr> 2. <td>Description Align: 3. <ul> 4. <li><a href="javascript:align('right')" >right</a> 5. </li> 6. <li><a href="javascript:align('left')" >left</a> 7. </li> 8. <li><a href="javascript:align('justify')" >justify</a> 9. </li> 10. </ul> </td> 11. <td>Show/Hide Description: 12. <ul> 13. <li><a href="javascript:hidedesc()" >Hide</a> 14. </li> 15. <li><a href="javascript:showdesc()" >Show</a> 16. </li> 17. </ul> </td> 18. <td>Background-color: 19. <ul> 20. <li><a href="javascript:backgroundcolor('#f66')" >red</a> 21. </li> 22. <li><a href="javascript:backgroundcolor('#66f')" >blue</a> 23. </li> 24. <li><a href="javascript:backgroundcolor('#6f6')" >green</a> 25. </li> 26. <li><a href="javascript:backgroundcolor('#ff6')" >yellow</a> 27. </li> 28. </ul></td> 29. </tr> 30.</table> 31. <div style="border: thin solid black; padding: 0px 20px 20px;" > 32.<div id="cscisl" > 33. <h1>Advanced Website Development Using XML</h1> 34. <p> Harvard Extension School, Summer 2007 35. <br/> CSCI S-L 36. <br/> Tuesdays and Thursdays, 6 to 8:30 pm </p> 37. <p id="description" > This course focuses on using XML technologies in website 38. development. Fundamental technologies relating to XML, such as XPath, XSL, XSLT, 39. XSL-FO, XML Schemas, DTDs, SAX, and DOM, are emphasized. In addition, specific markup 40. languages relevant to website development, such as XHTML, SVG, RSS, XHTML Mobile 41. Profile, WML, and DocBook, are covered. These technologies, coupled with the 42. open-source XML publishing framework Cocoon, are used to develop dynamic, 43. database-driven sites that deliver content in a variety of media types (XHTML, text, PDF, 44. graphics) for a variety of devices (desktops, handhelds, cellular phones) and 45. audiences. </p> 46.</div> 47.</div> 48.


41 of 68 3/20/2007 5:07 PM

In head element:


function align(val) { 1. node = document.getElementById('description'); 2. node.setAttribute('align',val); 3.} 4.function hidedesc () { 5. node = document.getElementById('description'); 6. node.setAttribute('style','display: none;'); 7.} 8.function showdesc () { 9. node = document.getElementById('description'); 10. node.setAttribute('style','display: block;'); 11.} 12.function backgroundcolor(color) { 13. node = document.getElementById('cscisl'); 14. node.setAttribute('style','background-color: '+ color + ';'); 15.} 16.



42 of 68 3/20/2007 5:07 PM

Exposing Additional Form Elements

Example 8.12




<form method="get" action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" name="ice_cream" id="1. <div> Would you like ice cream? 2. <br/> 3. <input type="radio" name="want" value="yes" onclick="displayIceCreamOptions()" /> 4. Yes 5. <br/> 6. <input type="radio" name="want" value="no" onclick="displayIceCreamOptions()" /> 7. No </div> 8. <div style="display: none;" id="icecream_options" > 9. <p>How would you like it?</p> 10. <input type="radio" name="container" value="cup" />Cup 11. <br/> 12. <input type="radio" name="container" value="cone" />Cone 13. <br/> 14. <p>Available toppings:</p> 15. <input type="checkbox" name="toppings" value="whipcream" />Whipped cream 16. <br/> 17. <input type="checkbox" name="toppings" value="jimmies" />Jimmies 18. <br/> 19. <input type="checkbox" name="toppings" value="cherry" />Cherry on top 20. <br/> </div> 21. <p> 22. <input type="submit" /></p> 23.</form> 24.

function displayIceCreamOptions() { 1. var divico = document.getElementById('icecream_options'); 2. var state = divico.style.display; 3. if (document.forms['ice_cream'].want[0].checked) { 4. divico.style.display = 'block'; 5. } else { 6. divico.style.display = 'none'; 7. } 8.} 9.


43 of 68 3/20/2007 5:07 PM

Your Work Easier with JavaScript Libraries

jQueryPrototype / ScriptaculousYahoo! UIDojo


44 of 68 3/20/2007 5:07 PM

Tables: Class gives Functionality

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

Plain table: senate_table.htmlSortable table: senate_table_sortable.html Include some Javascript libraries (jquery-latest.js and jquery.tablesorter.js), and give the table a class:

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

<table class="sortable"> 1.


45 of 68 3/20/2007 5:07 PM

Sortable Tables

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

Plain table: senate_table.htmlSortable table: senate_table_sortable.html Include some Javascript libraries (jquery-latest.js and jquery.tablesorter.js), and give the table a class:

The JavaScript and CSS:

<table class="sortable"> 1.

<script src="jquery-latest.js" type="text/javascript"> </script> 1. <script src="jquery.tablesorter.js" type="text/javascript"> </script> 2. <script type="text/javascript"> 3.$(document).ready( 4. function() { 5. $("table.sortable").tableSorter({ 6. sortClassAsc: 'sortUp', // class name for asc sorting action 7. sortClassDesc: 'sortDown', // class name for desc sorting action 8. stripingRowClass: ['odd','even'], 9. stripeRowsOnStartUp: true, 10. headerClass: 'largeHeaders', // class name for headers (th's) 11. }) 12.}); 13.</script> 14. <link href="default.css" type="text/css" rel="stylesheet"/><style type="text/css"> 15./* table styling */ 16..odd { background-color:#ddf; color: #000;} 17..even { background-color:#ff9; color: #000;} 18.</style> 19. 20.


46 of 68 3/20/2007 5:07 PM

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


47 of 68 3/20/2007 5:07 PM

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

Put your code in a textarea

Put a name="code" attribute with any textarea that should be processedUse class attribute to control the syntax highlighting applied (e.g. xml, js, css, java)

With and Without

view plain print ?

<link href="SyntaxHighlighter/Styles/SyntaxHighlighter.css" rel="stylesheet" 1. type="text/css"/> 2.<script src="SyntaxHighlighter/Scripts/shCore.js" type="text/javascript"> </script> 3.<script src="SyntaxHighlighter/Scripts/shBrushJScript.js" type="text/javascript"> </script> 4.<script src="SyntaxHighlighter/Scripts/shBrushXml.js" type="text/javascript"> </script> 5.<script src="SyntaxHighlighter/Scripts/shBrushCss.js" type="text/javascript"> </script> 6.

view plain print ?

<textarea name="code" class="xml" cols="60" rows="10"> 1.<html> 2. <head> 3. ... 4. </head> 5. <body> 6. ... 7. </body> 8.</html> 9.</textarea> 10.

view plain print ?

<?xml version="1.0"?> 1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition.dtd"> 3.<html> 4. <head> 5. <title> 6. My Schools 7. </title> 8. </head> 9. <body> 10. <h1> 11. My Schools 12. </h1> 13. <ul> 14. <li> 15. <a href="http://www.harvard.edu/"> 16. Harvard University 17. </a> 18. <br/> 19. <img src="images/veritas.gif" alt="Harvard Shield" 20. height="84" width="72"/> 21. </li> 22. <li> 23. <a href="http://www.ku.edu/"> 24. University of Kansas 25. </a> 26. <br/> 27. <img src="images/KUSeal.gif" alt="University of Kansas Seal" 28. height="73" width="72"/> 29. </li> 30. </ul> 31. </body> 32.</html> 33.


48 of 68 3/20/2007 5:07 PM

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

<?xml version="1.0"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition.dtd"><html> <head> <title> My Schools </title> </head> <body> <h1> My Schools </h1> <ul> <li> <a href="http://www.harvard.edu/"> Harvard University </a> <br/> <img src="images/veritas.gif" alt="Harvard Shield" height="84" width="72"/> </li> <li> <a href="http://www.ku.edu/"> University of Kansas </a> <br/> <img src="images/KUSeal.gif" alt="University of Kansas Seal" height="73" width="72"/> </li> </ul> </body></html>


49 of 68 3/20/2007 5:07 PM

AJAX

Asynchronous JavaScript and XML

AJAX: A New Approach to Web Applications, from Adaptive Path.

by Jesse James Garrett


50 of 68 3/20/2007 5:07 PM

AJAX: Asynchronous JavaScript and XML

Ajax: A New Approach to Web ApplicationsAJAX (Wikipedia)

Technologies Involved

XHTMLCSSJavaScriptDocument Object Model (DOM)XMLHttpRequest objectPossibly: XML, XSLT, XPath


51 of 68 3/20/2007 5:07 PM

AJAX


52 of 68 3/20/2007 5:07 PM

Google Maps

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

CSCI E-12 Campus Map


53 of 68 3/20/2007 5:07 PM

Marker Data

campus_data.xml

Javascript createMarker function:


54 of 68 3/20/2007 5:07 PM

function createMarker(point, elem) { 1. // create tabs 2. var infoTabs = []; 3. var tabs = elem.getElementsByTagName("tab"); 4. for (var i = 0; i < tabs.length; i++) { 5. var tab = new GInfoWindowTab( 6. tabs[i].getAttribute("label"), 7. tabs[i].getElementsByTagName("content")[0].textContent 8. ); 9. infoTabs.push(tab); 10. } 11. // create marker, add tabs 12. var marker = new GMarker(point); 13. GEvent.addListener(marker, "click", function() { 14. marker.openInfoWindowTabsHtml(infoTabs); 15. }); 16. return marker; 17.} 18. 19.// load function 20. function load() { 21. if (GBrowserIsCompatible()) { 22. var map = new GMap2(document.getElementById("map")); 23. map.addControl(new GSmallMapControl()); 24. map.addControl(new GMapTypeControl()); 25. map.addControl(new GOverviewMapControl()); 26. // center 42.375492,-71.117613 27. map.setCenter(new GLatLng(42.375492,-71.117613), 16); 28. map.setMapType(G_HYBRID_TYPE); 29. // Download the data in data.xml and load it on the map. The format we 30. // expect is: 31. // <markers> 32. // <marker lat="37" lng="-122"><content>...</content></marker> 33. // <marker lat="30" lng="-100"><content>...</content></marker> 34. // </markers> 35. GDownloadUrl("campus_data.xml", function(data) { 36. var xml = GXml.parse(data); 37. var markers = xml.documentElement.getElementsByTagName("marker"); 38. for (var i = 0; i < markers.length; i++) { 39. var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")), 40. parseFloat(markers[i].getAttribute("lng"))); 41. var marker = createMarker(point, markers[i]); 42. map.addOverlay(marker); 43. } 44. }); 45. } 46. } 47.


55 of 68 3/20/2007 5:07 PM

Ajax Example with Prototype

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

Course List

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

courselist_partial?course_group=BIOLcourselist_partial?course_group=CSCI

What's involved:

Prototype Javascript libraryServer-side process to generate course list markup (courselist_partial which take a course_groupquery parameter)Custom Javascript function (getCourseList) to call server-side processJavascript to invokee the custom getCourseList function.

Javascript:

Invoking the Javascript:

<script type="text/javascript" src="js/prototype.js"> 1.  2.</script> 3.<script type="text/javascript"> 4.function getCourseList() { 5. var cg = document.getElementById("course_group"); 6. var i = cg.options[cg.selectedIndex].value; 7. var p = "course_group=" + i ; 8. aj = new Ajax.Updater('courselist', 9. 'courselist_partial', 10. {asynchronous:true, parameters: p , method: 'get'}); 11.} 12.</script> 13.

<select name="course_group" 1. id="course_group" 2. onchange="getCourseList()"> 3.


56 of 68 3/20/2007 5:07 PM

Periodic Updater with Prototype

periodic_update.htmlstatus

<script type="text/javascript"> 1.new Ajax.PeriodicalUpdater("updateme", "status", { 2. // initial number of seconds interval between calls 3. frequency : 5, 4. decay : 5 5.}); 6.</script> 7.<hr/> 8.<div id="updateme"> 9. 10.</div> 11.


57 of 68 3/20/2007 5:07 PM

Autocomplete Text Fields

Course Title Autocomplete

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

course_title_list?title=Chemistrycourse_title_list?title=Neuro

<p>Search for Course Title: 1.<input id="course_title" name="title" size="50" type="text" value="" /> 2.</p> 3.<div class="auto_complete" id="course_title_auto_complete"></div> 4.<script type="text/javascript"> 5. new Ajax.Autocompleter( 6. 'course_title', 7. 'course_title_auto_complete', 8. 'course_title_list', {}) 9.</script> 10.


58 of 68 3/20/2007 5:07 PM

Tabs with jQuery

Tab Plugin for jQuery allows the easy creation of tabs.

Accessible, Unobtrusive Javascript Tabs wtih jQueryDemos

tabs.htmltabs.js


59 of 68 3/20/2007 5:07 PM

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.


60 of 68 3/20/2007 5:07 PM

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


61 of 68 3/20/2007 5:07 PM

Data into JSON

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

One entry looks like:

The entire data file: colleges.json

{ 1. "items" : [ 2. { 3. "encoding" : "iso-8859-1", 4. "uri" : "http://127.0.0.1/http%3A%2F%2Fwww.washington.edu%2F", 5. "URL_end" : "http://www.washington.edu/", 6. "Title" : "University of Washington", 7. "URL" : "http://www.washington.edu/", 8. "type" : "Item", 9. "label" : "http://www.washington.edu/", 10. "thumbshot_url" : "http://open.thumbshots.org/image.pxf?url=http://www.washington.edu/",11. "error+string" : "0 error", 12. "Valid" : "Valid", 13. "Errors" : "0", 14. "Doctype" : "XHTML 1.0 Strict" 15. }, 16. { ... more data .. } 17. ] 18.} 19.


62 of 68 3/20/2007 5:07 PM

And now for Exhibit

Colleges in Exhibit

Steps required:

Import the Exhibit javascript1.Reference the data2.Create templates3.


63 of 68 3/20/2007 5:07 PM

Exhibit Templates

Colleges in Exhibit

Template that defines a view:

<div> 1. <div ex:role="exhibit-view" ex:viewClass="Exhibit.TileView" 2. ex:possibleOrders=".Valid, .Title, .Errors, .Doctype"> 3. </div> 4. <table ex:role="exhibit-lens" class="college"> 5. <tr> 6. <td><img ex:src-content=".thumbshot_url" alt="thumbshot" 7. height="90" width="120"/> 8. </td> 9. <td> <a ex:href-content=".URL" ex:content=".Title"></a> 10. <ul> 11. <li ex:content=".Doctype"></li> 12. <li ex:content=".error+string"></li> 13. <li ex:content=".encoding"></li> 14. </ul> 15. </td> 16. </tr> 17. </table> 18.</div> 19.


64 of 68 3/20/2007 5:07 PM

Other Exhibit Components

Colleges in Exhibit


65 of 68 3/20/2007 5:07 PM

<html> 1. <head> 2. <title>University and College Web Sites</title> 3. <link href="college.json" type="application/json" rel="exhibit/data"/> 4. <script src="http://static.simile.mit.edu/exhibit/api/exhibit-api.js" 5. type="text/javascript"> </script> 6. <style type="text/css"> 7. body { margin: 0.25in; } 8. </style> 9. </head> 10. <body> 11. <h1>University and College Web Sites</h1> 12. <table width="100%"> 13. <tr valign="top"> 14. <td> 15. <div id="exhibit-control-panel"></div> 16. <div id="exhibit-view-panel"> 17. <div ex:role="exhibit-view" ex:viewClass="Exhibit.TileView" 18. ex:possibleOrders=".Valid, .Title, .Errors, .Doctype"> 19. </div> 20. <table ex:role="exhibit-lens" class="college"> 21. <tr> 22. <td><img ex:src-content=".thumbshot_url" alt="thumbshot" 23. height="90" width="120"/> 24. </td> 25. <td> <a ex:href-content=".URL" ex:content=".Title"></a> 26. <ul> 27. <li ex:content=".Doctype"></li> 28. <li ex:content=".error+string"></li> 29. <li ex:content=".encoding"></li> 30. </ul> 31. </td> 32. </tr> 33. </table> 34. </div> 35. </td> 36. <td width="25%"> 37. <div id="exhibit-browse-panel" 38. ex:facets=".Valid, .Doctype"> 39. </div> 40. </td> 41. </tr> 42. </table> 43. </body> 44.</html> 45.


66 of 68 3/20/2007 5:07 PM

Add Another View

Colleges in Exhibit

<div ex:role="exhibit-view" ex:viewClass="Exhibit.TabularView" 1. ex:columns=" .thumbshot_url, .Title, .Valid, .Errors, .Doctype, .URL" 2. ex:columnLabels=" Thumbshot, Title, Valid, Errors, Document Type, URL" 3. ex:columnFormats="image, list, list, list, list, uri" 4. ex:sortColumn="2" 5. ex:sortAscending="false"> 6.</div> 7.


67 of 68 3/20/2007 5:07 PM

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!


68 of 68 3/20/2007 5:07 PM

United States Senate

senate.htmlsenate.json

Senate data comes from GovTrack.US.

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