CS 292: Beyond the One Way Web Dan Nanto, Spring 2008 http://beyondtheonewayweb.wordpress.com
<ul><li>Separating Content from Presentation </li></ul><ul><ul><li>XML </li></ul></ul><ul><ul><li>XSL </li></ul></ul><ul><...
<ul><li>Static content. </li></ul><ul><li>Limited formatting options </li></ul><ul><li>Single “Frame” </li></ul><ul><li>An...
<ul><li>Can react to events </li></ul><ul><li>Read and change HTML elements </li></ul><ul><li>Validates data  </li></ul><u...
<ul><li>Not Java based!  </li></ul><ul><li>Real name is ECMA Script </li></ul><ul><ul><li>European Computer Manufacturers ...
<ul><li>javaScript support in both Netscape and Microsoft Browsers since 1996 </li></ul><ul><li>First standard approved in...
<ul><li><html> </li></ul><ul><li><body>  </li></ul><ul><li><script type=&quot;text/javascript&quot;>  document.write(“I lo...
<ul><li><script></script> tags </li></ul><ul><li>Type=“text/javascript” </li></ul><ul><li>Document.write(“I love Brittney!...
<ul><li>Written in body – executed upon rendering  </li></ul><ul><li>Written in head – can be called and executed </li></u...
<ul><li>javaScript </li></ul><ul><li>DHTML & DOM – Document Object Model </li></ul><ul><li>AJAX </li></ul>CS 292-1: Beyond...
<ul><li>DHTML first attempt at dynamic web pages </li></ul><ul><ul><li>Access element by name/ID </li></ul></ul><ul><ul><l...
<ul><li>Some DHTML Events: </li></ul><ul><ul><li>onblur - a user leaves an object  </li></ul></ul><ul><ul><li>onchange - a...
<ul><li>Demo  </li></ul>CS 292-1: Beyond the One Way Web  (beyondtheonewayweb.wordpress.com)
<ul><li>Not a standard </li></ul><ul><li>Browser implementations varied. </li></ul><ul><li>Difficult to debug due to multi...
<ul><li>Document Object Model </li></ul><ul><li>1998 W3C published first DOM specification </li></ul><ul><li>More generic ...
<ul><li>Traverse the tree up, down, and side to side </li></ul><ul><li>Create new nodes in the tree </li></ul><ul><li>Remo...
<ul><li>Inserting a Row Into a table </li></ul><ul><li>Removing Options from a drop down </li></ul><ul><li>Capturing Event...
<ul><li><table id=&quot;myTable&quot; border=&quot;1&quot;> </li></ul><ul><ul><li><tr> </li></ul></ul><ul><ul><ul><li><td>...
<ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><li>function insRow() </li></ul><ul><li>{ </li></ul><ul><l...
<ul><li><select id=&quot;mySelect&quot;> </li></ul><ul><ul><li><option> </li></ul></ul><ul><li>Apple </li></ul><ul><li></o...
<ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><li>function removeOption() </li></ul><ul><li>{ </li></ul>...
<ul><li>DEMO </li></ul>CS 292-1: Beyond the One Way Web  (beyondtheonewayweb.wordpress.com)
<ul><li>Required all data/information to be loaded with browser. </li></ul><ul><li>Introduced security challenges. </li></...
<ul><li>Asynchronous JavaScript And XML </li></ul><ul><li>Not a new technology </li></ul><ul><li>A technique for retrievin...
<ul><li>Relies on XML object that can asynchronously communicate with the originating server: </li></ul><ul><li>Internet E...
<ul><li>Requires  </li></ul><ul><ul><li>HTML page </li></ul></ul><ul><ul><li>Event Listener </li></ul></ul><ul><ul><li>Asy...
CS 292-1: Beyond the One Way Web  (beyondtheonewayweb.wordpress.com)
<ul><li>Dynamic Experience uses all these technologies: </li></ul><ul><ul><li>HTML: XML </li></ul></ul><ul><ul><li>Event L...
<ul><li>Google Suggest: </li></ul><ul><li>http://www.google.com/webhp?complete=1&hl=en </li></ul>CS 292-1: Beyond the One ...
<ul><li>Embedding services/sources  </li></ul><ul><li>Free APIs </li></ul><ul><li>Examples: </li></ul><ul><ul><li>Google M...
<ul><li>Google Maps: </li></ul><ul><ul><li>Allows you to integrate dynamic map content into your web site. </li></ul></ul>...
<ul><li>Web based technologies </li></ul><ul><ul><li>http://www.w3schools.com/default.asp </li></ul></ul><ul><li>APIs </li...
CS 292-1: Beyond the One Way Web  (beyondtheonewayweb.wordpress.com)
Upcoming SlideShare
Loading in...5
×

Week 10 Technical Stack I I 03

1,072

Published on

Part II of Dan's lecturer about the technical stack of Web 2.0 applications for CS-292 class at Vanderbilt.

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,072
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Week 10 Technical Stack I I 03

    1. 1. CS 292: Beyond the One Way Web Dan Nanto, Spring 2008 http://beyondtheonewayweb.wordpress.com
    2. 2. <ul><li>Separating Content from Presentation </li></ul><ul><ul><li>XML </li></ul></ul><ul><ul><li>XSL </li></ul></ul><ul><ul><li>Example: RSS </li></ul></ul><ul><li>Dynamic Browser Presentation </li></ul><ul><ul><li>JavaScript </li></ul></ul><ul><ul><li>DHTML & DOM </li></ul></ul><ul><ul><li>AJAX </li></ul></ul><ul><li>APIs – Services </li></ul><ul><ul><li>Example: Google Maps </li></ul></ul>CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)
    3. 3. <ul><li>Static content. </li></ul><ul><li>Limited formatting options </li></ul><ul><li>Single “Frame” </li></ul><ul><li>Animated Gifs were “really cool!” </li></ul><ul><li>“ Request Response” Loop </li></ul>CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)
    4. 4. <ul><li>Can react to events </li></ul><ul><li>Read and change HTML elements </li></ul><ul><li>Validates data </li></ul><ul><li>Detects browser types </li></ul><ul><li>Creates cookies </li></ul>CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)
    5. 5. <ul><li>Not Java based! </li></ul><ul><li>Real name is ECMA Script </li></ul><ul><ul><li>European Computer Manufacturers Association </li></ul></ul>CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)
    6. 6. <ul><li>javaScript support in both Netscape and Microsoft Browsers since 1996 </li></ul><ul><li>First standard approved in 1998 </li></ul>CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)
    7. 7. <ul><li><html> </li></ul><ul><li><body> </li></ul><ul><li><script type=&quot;text/javascript&quot;> document.write(“I love Brittney!&quot;); </li></ul><ul><li></script> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)
    8. 8. <ul><li><script></script> tags </li></ul><ul><li>Type=“text/javascript” </li></ul><ul><li>Document.write(“I love Brittney!”); </li></ul>CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)
    9. 9. <ul><li>Written in body – executed upon rendering </li></ul><ul><li>Written in head – can be called and executed </li></ul><ul><li>Can be imported as well from an external file </li></ul><ul><ul><li><script src=“someFile.js”/> </li></ul></ul>CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)
    10. 10. <ul><li>javaScript </li></ul><ul><li>DHTML & DOM – Document Object Model </li></ul><ul><li>AJAX </li></ul>CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)
    11. 11. <ul><li>DHTML first attempt at dynamic web pages </li></ul><ul><ul><li>Access element by name/ID </li></ul></ul><ul><ul><li>Can change value/State </li></ul></ul><ul><ul><li>Can respond to some events </li></ul></ul><ul><ul><li>Not a standard! </li></ul></ul>CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)
    12. 12. <ul><li>Some DHTML Events: </li></ul><ul><ul><li>onblur - a user leaves an object </li></ul></ul><ul><ul><li>onchange - a user changes the value of an object </li></ul></ul><ul><ul><li>onclick - a user clicks on an object </li></ul></ul><ul><ul><li>ondblclick - a user double-clicks on an object </li></ul></ul><ul><ul><li>onfocus - a user makes an object active </li></ul></ul><ul><ul><li>onkeydown - a keyboard key is on its way down </li></ul></ul><ul><ul><li>onkeypress - a keyboard key is pressed </li></ul></ul><ul><ul><li>onkeyup - a keyboard key is released </li></ul></ul>CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)
    13. 13. <ul><li>Demo </li></ul>CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)
    14. 14. <ul><li>Not a standard </li></ul><ul><li>Browser implementations varied. </li></ul><ul><li>Difficult to debug due to multiple testing platforms required </li></ul><ul><li>Element access only by name or ID </li></ul>CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)
    15. 15. <ul><li>Document Object Model </li></ul><ul><li>1998 W3C published first DOM specification </li></ul><ul><li>More generic than DHTML </li></ul><ul><li>Represented the entire document as a tree </li></ul>CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)
    16. 16. <ul><li>Traverse the tree up, down, and side to side </li></ul><ul><li>Create new nodes in the tree </li></ul><ul><li>Remove nodes from the tree </li></ul>CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com) Image courtesy of www.w3schools.com
    17. 17. <ul><li>Inserting a Row Into a table </li></ul><ul><li>Removing Options from a drop down </li></ul><ul><li>Capturing Events and traversing nodes </li></ul>CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)
    18. 18. <ul><li><table id=&quot;myTable&quot; border=&quot;1&quot;> </li></ul><ul><ul><li><tr> </li></ul></ul><ul><ul><ul><li><td>Row3 cell1</td> </li></ul></ul></ul><ul><li><td>Row3 cell2</td> </li></ul><ul><li></tr> </li></ul><ul><li></table> </li></ul><ul><li><br /> </li></ul><ul><li><input type=&quot;button&quot; onclick=&quot;insRow()&quot; value=&quot;Insert row&quot;> </li></ul>CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)
    19. 19. <ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><li>function insRow() </li></ul><ul><li>{ </li></ul><ul><li>var newRow=document.getElementById('myTable').insertRow(0); </li></ul><ul><li>var y=newRow.insertCell(0); </li></ul><ul><li>var z=newRow.insertCell(1); </li></ul><ul><li>y.innerHTML=&quot;NEW CELL1&quot;; </li></ul><ul><li>z.innerHTML=&quot;NEW CELL2&quot;; </li></ul><ul><li>} </li></ul><ul><li></script> </li></ul>CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)
    20. 20. <ul><li><select id=&quot;mySelect&quot;> </li></ul><ul><ul><li><option> </li></ul></ul><ul><li>Apple </li></ul><ul><li></option> </li></ul><ul><li><option> </li></ul><ul><li>Orange </li></ul><ul><li></option> </li></ul><ul><li></select> </li></ul><ul><li><input type=&quot;button&quot; onclick=&quot;removeOption()&quot; </li></ul><ul><li>value=&quot;Remove selected option&quot;> </li></ul>CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)
    21. 21. <ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><li>function removeOption() </li></ul><ul><li>{ </li></ul><ul><li>var x=document.getElementById(&quot;mySelect&quot;); </li></ul><ul><li>x.remove(x.selectedIndex); </li></ul><ul><li>} </li></ul><ul><li></script> </li></ul>CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)
    22. 22. <ul><li>DEMO </li></ul>CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)
    23. 23. <ul><li>Required all data/information to be loaded with browser. </li></ul><ul><li>Introduced security challenges. </li></ul><ul><li>Does not support Events </li></ul><ul><ul><li>Still Need DHTML! </li></ul></ul>CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)
    24. 24. <ul><li>Asynchronous JavaScript And XML </li></ul><ul><li>Not a new technology </li></ul><ul><li>A technique for retrieving data from a server </li></ul><ul><li>Does not require a browser refresh </li></ul>CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)
    25. 25. <ul><li>Relies on XML object that can asynchronously communicate with the originating server: </li></ul><ul><li>Internet Explorer </li></ul><ul><ul><li>ActiveXObject </li></ul></ul><ul><li>Other Browsers </li></ul><ul><ul><li>XMLHttpRequest object </li></ul></ul>CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)
    26. 26. <ul><li>Requires </li></ul><ul><ul><li>HTML page </li></ul></ul><ul><ul><li>Event Listener </li></ul></ul><ul><ul><li>Asynchronous call to the server </li></ul></ul><ul><ul><li>Server side process </li></ul></ul><ul><ul><li>Callback method declaration </li></ul></ul>CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)
    27. 27. CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)
    28. 28. <ul><li>Dynamic Experience uses all these technologies: </li></ul><ul><ul><li>HTML: XML </li></ul></ul><ul><ul><li>Event Listener: DHTML </li></ul></ul><ul><ul><li>Asynchronous Call to server: AJAX </li></ul></ul><ul><ul><li>Server Side Processing: Java or other </li></ul></ul><ul><ul><li>Callback Method: DOM or DHTML </li></ul></ul>CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)
    29. 29. <ul><li>Google Suggest: </li></ul><ul><li>http://www.google.com/webhp?complete=1&hl=en </li></ul>CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)
    30. 30. <ul><li>Embedding services/sources </li></ul><ul><li>Free APIs </li></ul><ul><li>Examples: </li></ul><ul><ul><li>Google Maps </li></ul></ul><ul><ul><li>YouTube </li></ul></ul>CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)
    31. 31. <ul><li>Google Maps: </li></ul><ul><ul><li>Allows you to integrate dynamic map content into your web site. </li></ul></ul><ul><li>YouTube: </li></ul><ul><ul><li>Allows you to integrate video from their site </li></ul></ul>CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)
    32. 32. <ul><li>Web based technologies </li></ul><ul><ul><li>http://www.w3schools.com/default.asp </li></ul></ul><ul><li>APIs </li></ul><ul><ul><li>http://www.programmableweb.com </li></ul></ul>CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)
    33. 33. CS 292-1: Beyond the One Way Web (beyondtheonewayweb.wordpress.com)

    ×