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.0 March 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]JavaScript, AJAX, Mashups, and Web 2.0 http://localhost:8080/cocoon/projects/cscie12/slides/20070320/handout.html 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
34
Embed
JavaScript, AJAX, Mashups, and Web 2 - …cscie12.dce.harvard.edu/lecture_notes/2006-07/20070320.pdf · JavaScript, AJAX, Mashups, and Web 2.0 ... The "example7.js" contains a function
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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
JavaScript, AJAX, Mashups, and Web 2.0 http://localhost:8080/cocoon/projects/cscie12/slides/20070320/handout.html
5 of 68 3/20/2007 5:07 PM
JavaScript, AJAX, Mashups, and Web 2.0 http://localhost:8080/cocoon/projects/cscie12/slides/20070320/handout.html
6 of 68 3/20/2007 5:07 PM
JavaScript, AJAX, Mashups, and Web 2.0 http://localhost:8080/cocoon/projects/cscie12/slides/20070320/handout.html
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
JavaScript, AJAX, Mashups, and Web 2.0 http://localhost:8080/cocoon/projects/cscie12/slides/20070320/handout.html
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.
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.
JavaScript, AJAX, Mashups, and Web 2.0 http://localhost:8080/cocoon/projects/cscie12/slides/20070320/handout.html
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.
JavaScript, AJAX, Mashups, and Web 2.0 http://localhost:8080/cocoon/projects/cscie12/slides/20070320/handout.html
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.
JavaScript, AJAX, Mashups, and Web 2.0 http://localhost:8080/cocoon/projects/cscie12/slides/20070320/handout.html
13 of 68 3/20/2007 5:07 PM
JavaScript Examples: Forms
Calculations Redirect / Window Location Form Validation and Control
JavaScript, AJAX, Mashups, and Web 2.0 http://localhost:8080/cocoon/projects/cscie12/slides/20070320/handout.html
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
// 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.
// 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.
JavaScript, AJAX, Mashups, and Web 2.0 http://localhost:8080/cocoon/projects/cscie12/slides/20070320/handout.html
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"
JavaScript, AJAX, Mashups, and Web 2.0 http://localhost:8080/cocoon/projects/cscie12/slides/20070320/handout.html
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
JavaScript, AJAX, Mashups, and Web 2.0 http://localhost:8080/cocoon/projects/cscie12/slides/20070320/handout.html
26 of 68 3/20/2007 5:07 PM
Web 2.0 in Images
Web 2.0 Meme Map by Tim O'Reilly
JavaScript, AJAX, Mashups, and Web 2.0 http://localhost:8080/cocoon/projects/cscie12/slides/20070320/handout.html
27 of 68 3/20/2007 5:07 PM
Web 2.0 in Images
Visualizing Web 2.0 by Dion Hinchcliffe
JavaScript, AJAX, Mashups, and Web 2.0 http://localhost:8080/cocoon/projects/cscie12/slides/20070320/handout.html
28 of 68 3/20/2007 5:07 PM
Web 2.0 in Images
Visualizing Web 2.0, Peter, blog.forret.com
JavaScript, AJAX, Mashups, and Web 2.0 http://localhost:8080/cocoon/projects/cscie12/slides/20070320/handout.html
29 of 68 3/20/2007 5:07 PM
Zillow
www.zillow.com
JavaScript, AJAX, Mashups, and Web 2.0 http://localhost:8080/cocoon/projects/cscie12/slides/20070320/handout.html
30 of 68 3/20/2007 5:07 PM
Housingmaps.com
www.housingmaps.com
JavaScript, AJAX, Mashups, and Web 2.0 http://localhost:8080/cocoon/projects/cscie12/slides/20070320/handout.html
31 of 68 3/20/2007 5:07 PM
chicagocrime.org
www.chicagocrime.org
JavaScript, AJAX, Mashups, and Web 2.0 http://localhost:8080/cocoon/projects/cscie12/slides/20070320/handout.html
32 of 68 3/20/2007 5:07 PM
del.icio.us
del.icio.us
JavaScript, AJAX, Mashups, and Web 2.0 http://localhost:8080/cocoon/projects/cscie12/slides/20070320/handout.html
33 of 68 3/20/2007 5:07 PM
flickr
flickr.com
JavaScript, AJAX, Mashups, and Web 2.0 http://localhost:8080/cocoon/projects/cscie12/slides/20070320/handout.html
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
JavaScript, AJAX, Mashups, and Web 2.0 http://localhost:8080/cocoon/projects/cscie12/slides/20070320/handout.html
35 of 68 3/20/2007 5:07 PM
Amazon Web Services
Amazon.com offers several different web services, including one for e-commerce.
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.
JavaScript, AJAX, Mashups, and Web 2.0 http://localhost:8080/cocoon/projects/cscie12/slides/20070320/handout.html
43 of 68 3/20/2007 5:07 PM
Your Work Easier with JavaScript Libraries
jQueryPrototype / ScriptaculousYahoo! UIDojo
JavaScript, AJAX, Mashups, and Web 2.0 http://localhost:8080/cocoon/projects/cscie12/slides/20070320/handout.html
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.
JavaScript, AJAX, Mashups, and Web 2.0 http://localhost:8080/cocoon/projects/cscie12/slides/20070320/handout.html
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.
JavaScript, AJAX, Mashups, and Web 2.0 http://localhost:8080/cocoon/projects/cscie12/slides/20070320/handout.html
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
JavaScript, AJAX, Mashups, and Web 2.0 http://localhost:8080/cocoon/projects/cscie12/slides/20070320/handout.html
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)
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. <!--prototype library--> 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.
JavaScript, AJAX, Mashups, and Web 2.0 http://localhost:8080/cocoon/projects/cscie12/slides/20070320/handout.html
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.
JavaScript, AJAX, Mashups, and Web 2.0 http://localhost:8080/cocoon/projects/cscie12/slides/20070320/handout.html
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: