JavaScript, AJAX, Mashups, and Web 2 - Harvard University PDF
Preview JavaScript, AJAX, Mashups, and Web 2 - Harvard University
JavaScript, AJAX, Mashups, and Web 2.0 http://localhost:8080/cocoon/projects/cscie12/slides/20070320/handout.html JavaScript, AJAX, Mashups, and Web 2.0 http://localhost:8080/cocoon/projects/cscie12/slides/20070320/handout.html Table of Contents | All Slides | Link List | Examples | CSCI E-12 Introduction to JavaScript, AJAX, and Mashups JavaScript, AJAX, Mashups, and Web 2.0 Experience Mashups March 20, 2007 Bringing together data from different sources and presenting them in novel ways 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] 1 of 68 3/20/2007 5:07 PM 2 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 JavaScript, AJAX, Mashups, and Web 2.0 http://localhost:8080/cocoon/projects/cscie12/slides/20070320/handout.html AJAX Intuitive, responsive, fast, "desktop-like" Web-based applications 3 of 68 3/20/2007 5:07 PM 4 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 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 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 JavaScript, AJAX, Mashups, and Web 2.0 http://localhost:8080/cocoon/projects/cscie12/slides/20070320/handout.html Introduction to JavaScript, AJAX, and Mashups Example of JavaScript Technology Let's take a look at checking form input with JavaScript, Example: Javascript 1. <html> 2. <head> 3. <title>CSCIE-12, Example: 7.7</title> Client-side scripting language 4. <script src="example7.js" type="text/javascript"> 5. return true; DHTML, Dynamic HTML 6. </script> 7. </head> JavaScript 8. <body> Document Object Model (DOM) 9. <form action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" XHTML/HTML 10. onsubmit="return ValidateForm(this)"> CSS 1112.. < d iEvm>a i l Address: AJAX, Asynchronous JavaScript and XML 13. <input type="text" size="32" name="email" id="email" /> XMLHttpRequest Object 14. <br /> JavaScript 15. <input type="submit" /> 16. </div> Document Object Model (DOM) 17. </form> XHTML/HTML 18. </body> CSS 19. </html> The important pieces: 1. Reference an external javascript file. The javascript functions in this file can now be used within the page. 1. <html> 2. <script src="example7.js" type="text/javascript"> 3. return true; 4. </script> 2. 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. 1. function ValidateForm(thisform) { 2. /* calls isNotEmpty and isEmailAddress */ 3. } 4. function isNotEmpty(elem) { 5. /* function to check if element 6. is not empty */ 7. } 8. function isEMailAddr(elem) { 9. /* function to validate form 10. of email address */ 11. } 3. onsubmit attribute of form element. This is an "event attribute". 1. <form action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" 2. onsubmit="return ValidateForm(this)"> 7 of 68 3/20/2007 5:07 PM 8 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 JavaScript, AJAX, Mashups, and Web 2.0 http://localhost:8080/cocoon/projects/cscie12/slides/20070320/handout.html JavaScript Objects Event Attributes These are attributes defined for X/HTML elements, which are "event attributes": JavaScript is an object-oriented scripting language. The dot notation is used to access properties or invoke methods of the object. onblur onfocus Objects onchange Examples: onclick ondblclick window onkeydown document onkeyup form onkeypress location onload history onunload onmousedown Object: Properties onmousemove onmouseout window.location onmouseover document.title onmouseup onreset Object: Methods onselect document.write onsubmit window.open form.submit 9 of 68 3/20/2007 5:07 PM 10 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 JavaScript, AJAX, Mashups, and Web 2.0 http://localhost:8080/cocoon/projects/cscie12/slides/20070320/handout.html JavaScript and XHTML JavaScript in XHTML/HTML Scripts in HTML Documents from the HTML 4 Specification External Script http://www.w3.org/TR/html4/interact/scripts.html <script> element 1. <script src="url_to_js_file.js" /> <!ELEMENT script - - %Script; -- script statements --> Script within XHTML document <!ATTLIST script charset %Charset; #IMPLIED -- char encoding of linked resource -- type %ContentType; #REQUIRED -- content type of script language -- 1. <script type="text/javascript"> src %URI; #IMPLIED -- URI for an external script -- 2. /* defer (defer) #IMPLIED -- UA may defer execution of script -- 3. JavaScript code as content of script element > 4. */ 5. </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. "Inline" scripts as values of event attributes To function in all browsers, script 12.. < a onhcrleif=c"k=#"" j a vascript:void(window.resizeTo(800,600))"> element should not be empty, but should include a space, a comment, or even a simple return true; 3. Size Window to 800 x 600 statement. 4. </a> 11 of 68 3/20/2007 5:07 PM 12 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 JavaScript, AJAX, Mashups, and Web 2.0 http://localhost:8080/cocoon/projects/cscie12/slides/20070320/handout.html JavaScript Examples: Forms Calculation with onclick Calculations Example 8.1 Redirect / Window Location Form Validation and Control Example 8.1 Source: 1. <form name="SimpleCalc1" action="" > 2. <table cellpadding="10" > 3. <tr style="background: #99FFCC" > 4. <td>Radius:</td> 5. <td> 6. <input type="text" size="10" name="radius" /> 7. </td> 8. <td>cm</td> 9. </tr> 10. <tr style="background: #CCCCCC" > 11. <td>Circumference:</td> 12. <td> 13. <input type="text" size="10" name="circumference" /> 14. </td> 15. <td>cm</td> 16. </tr> 17. <tr style="background: #CCCCCC" > 18. <td>Area:</td> 19. <td> 20. <input type="text" size="10" name="area" /> 21. </td> 22. <td>cm<sup>2</sup> </td> 23. </tr> 24. </table> 25. <div> 26. <input type="button" value="Calculate!" onclick="document.SimpleCalc1.circumference.value=Calc 27. </div> 28. </form> In example1.js 1. var PI = 3.14159; 2. function CalcCircumference(r) { 3. return 2*PI*r; 4. } 5. function CalcArea(r) { 6. return PI*r*r 7. } In head element: 1. <script src="example1.js" type="text/javascript"> </script> Example 8.1 Demonstrated 13 of 68 3/20/2007 5:07 PM 14 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 JavaScript, AJAX, Mashups, and Web 2.0 http://localhost:8080/cocoon/projects/cscie12/slides/20070320/handout.html Calculation with onblur Redirect onclick Example 8.2 window.location = menu.options[menu.selectedIndex].value; Example 8.2 Source: menu.options[] an array of the options for the selection list 1. <form name="SimpleCalc1" action="" > menu.selectedIndex 2. <table cellpadding="10" > the index position of the option selected (0 = first option, 1 = second option, etc.) 34.. < t <r tsd>tyRlaed=i"ubsa:c<k/gtrdo>u n d: #99FFCC" > .value 5. <td> value of the "value" attribute 6. <input type="text" size="10" name="radius" onblur="document.SimpleCalc1.circumference.val window.location 7. </td> 8. <td>cm</td> 9. </tr> Example 8.3 10. <tr style="background: #CCCCCC" > 11. <td>Circumference:</td> Example 8.3 Source: 12. <td> 13. <input type="text" size="10" name="circumference" /> 14. </td> 1. <form name="JumpTo1" action="" > 15. <td>cm</td> 2. <div> 16. </tr> 3. <select name="GotoURL" > 17. <tr style="background: #CCCCCC" > 4. <option value=" " >Select an Apache "How-To/Tutorial"</option> 18. <td>Area:</td> 5. <option value="http://httpd.apache.org/docs/2.2/howto/auth.html" > 19. <td> 6. Authentication, Authorization, and Access Control</option> 20. <input type="text" size="10" name="area" /> 7. <option value="http://httpd.apache.org/docs/2.2/howto/cgi.html" >CGI: Dynamic 21. </td> 8. Content</option> 22. <td>cm<sup>2</sup> </td> 9. <option value="http://httpd.apache.org/docs/2.2/howto/htaccess.html" > 23. </tr> 10. .htaccess files</option> 24. </table> 11. <option value="http://httpd.apache.org/docs/2.2/howto/ssi.html" >Server Side 25. </form> 12. Includes (SSI)</option> 13. <option value="http://httpd.apache.org/docs/2.2/howto/public_html.html" > 14. Per-user Web Directories (public_html)</option> In example2.js 15. </select> 16. <input type="button" onclick="doJump(document.JumpTo1.GotoURL)" value="Go!" /> 17. </div> 1. var PI = 3.14159; 18. </form> 2. function CalcCircumference(r) { 3. return 2*PI*r; 4. } In script element (within head element): 5. function CalcArea(r) { 6. return PI*r*r 7. } 1. function doJump(menu) { 2. window.location = menu.options[menu.selectedIndex].value; 3. } In head element: Example 8.3 Demonstrated 1. <script src="example2.js" type="text/javascript"> </script> Example 8.2 Demonstrated 15 of 68 3/20/2007 5:07 PM 16 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 JavaScript, AJAX, Mashups, and Web 2.0 http://localhost:8080/cocoon/projects/cscie12/slides/20070320/handout.html Redirect onchange Form Control Example 8.4 Validate form input using the onsubmit event handler. Example 8.4 Source: Example 8.5 1. <form name="JumpTo1" action="" > Example 8.5 Source: 2. <div> 3. <select name="GotoURL" onchange="doJump(document.JumpTo1.GotoURL)" > 4. <option value=" " >Select an Apache "How-To/Tutorial"</option> 1. <form action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" method="get" onsubmit="return Valid 5. <option value="http://httpd.apache.org/docs/2.2/howto/auth.html" > 2. <div>Enter your name: <input type="text" name="YourName" /><br/> 6. Authentication, Authorization, and Access Control</option> 3. <input type="submit" value="Submit Information" /></div> 7. <option value="http://httpd.apache.org/docs/2.2/howto/cgi.html" >CGI: Dynamic 4. </form> 8. Content</option> 9. <option value="http://httpd.apache.org/docs/2.2/howto/htaccess.html" > 10. .htaccess files</option> In script element (within head element): 11. <option value="http://httpd.apache.org/docs/2.2/howto/ssi.html" >Server Side 12. Includes (SSI)</option> 13. <option value="http://httpd.apache.org/docs/2.2/howto/public_html.html" > 1. function Validate(thisform) { 14. Per-user Web Directories (public_html)</option> 2. if(thisform.YourName.value == null || thisform.YourName.value == "") { 15. </select> 3. alert("Please enter your name!"); 16. </div> 4. thisform.YourName.focus(); 17. </form> 5. return false; 6. } 7. } In script element (within head element): Example 8.5 Demonstrated 1. function doJump(menu) { 2. window.location = menu.options[menu.selectedIndex].value; 3. } Example 8.4 Demonstrated 17 of 68 3/20/2007 5:07 PM 18 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 JavaScript, AJAX, Mashups, and Web 2.0 http://localhost:8080/cocoon/projects/cscie12/slides/20070320/handout.html Form Validation and Regular Expressions Validation onsubmit Validate form fields with Regular Expressions Example 8.7 Regular Expression: Example 8.7 Source: /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/ 1. <form action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" onsubmit="return ValidateForm(this)" ^ 2. <div> Email Address: [\w]+ 3. <input type="text" size="32" name="email" id="email" /> 4. <br/> (\.[\w-]+)* 5. <input type="submit" /> </div> @ 6. </form> ([\w-]+\.)+ [a-zA-Z]{2,7} In example7.js $ 1. // function that calls separate validation functions Example 8.6 2. function ValidateForm(thisform) { 3. if(isNotEmpty(thisform.email)) { Example 8.6 Source: 4. if (isEMailAddr(thisform.email)) { 5. return true; 1. <form action="http://minerva.dce.harvard.edu/cgi-bin/echo.cgi" > 6. } else { 2. <div> Email Address: 7. return false; 3. <input type="text" size="32" name="email" id="email" onblur="if (isNotEmpty(this)) {isEMailA 8. } 4. <br/> 9. } else { 5. <input type="submit" /> </div> 10. return false; 6. </form> 11. } 12. } 13. // validates that the field value string has one or more characters in it In example6.js 14. function isNotEmpty(elem) { 15. var str = elem.value; 16. var re = /.+/; 17. if(!str.match(re)) { 1. // validates that the field value string has one or more characters in it 18. alert("Please fill in the required field."); 2. function isNotEmpty(elem) { 19. return false; 3. var str = elem.value; 20. } else { 4. var re = /.+/; 21. return true; 5. if(!str.match(re)) { 22. } 6. alert("Please fill in the required field."); 23. } 7. return false; 24. // validates that the entry is formatted as an email address 8. } else { 25. function isEMailAddr(elem) { 9. return true; 26. var str = elem.value; 10. } 27. var re = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/; 11. } 28. if (!str.match(re)) { 12. // validates that the entry is formatted as an email address 29. alert("Verify the email address format."); 13. function isEMailAddr(elem) { 30. return false; 14. var str = elem.value; 31. } else { 15. var re = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/; 32. return true; 16. if (!str.match(re)) { 33. } 17. alert("Verify the email address format."); 34. } 18. return false; 19. } else { 20. return true; 21. } In head element: 22. } 1. <script src="example7.js" type="text/javascript"> </script> In head element: Example 8.7 Demonstrated 1. <script src="example6.js" type="text/javascript"> </script> Example 8.6 Demonstrated 19 of 68 3/20/2007 5:07 PM 20 of 68 3/20/2007 5:07 PM
Description:The list of books you might like
