jQuery

1,733 views
1,662 views

Published on

A jQuery presentation, with comparison to traditional JavaScript. Original file and support files can be found at http://grover.open2space.com/node/186

Published in: Technology
1 Comment
1 Like
Statistics
Notes
  • Get the original presentation and support files at http://grover.open2space.com/node/186<br /><br/>
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
1,733
On SlideShare
0
From Embeds
0
Number of Embeds
30
Actions
Shares
0
Downloads
132
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide
  • jQuery

    1. 1. Rapid Web 2.0 & JavaScript Development with jQuery <ul><ul><li>By </li></ul></ul><ul><ul><li>Shawn Grover </li></ul></ul>
    2. 2. Rapid Web 2.0 & JavaScript Development with jQuery <ul><li>Outline </li></ul><ul><ul><li>My definition of Web 2.0 </li></ul></ul><ul><ul><li>What is jQuery </li></ul></ul><ul><ul><li>Contrasts – Traditional JavaScript vs. jQuery </li></ul></ul><ul><ul><li>Extending jQuery with plugins </li></ul></ul><ul><ul><li>A Sample Application </li></ul></ul><ul><ul><li>Compare to Prototype </li></ul></ul>
    3. 3. Web 2.0 <ul><li>” Web 2.0 refers to a perceived second generation of web-based communities and hosted services — such as social-networking sites, wikis and folksonomies — which aim to facilitate collaboration and sharing between users.” - Wikipedia - http://en.wikipedia.org/wiki/Web_2.0 </li></ul><ul><li>Usually consists of : </li></ul><ul><ul><li>Rich Internet Applications </li></ul></ul><ul><ul><li>XML and RSS </li></ul></ul><ul><ul><li>WEB APIs </li></ul></ul>
    4. 4. What is jQuery <ul><li>What is it </li></ul><ul><ul><li>” jQuery is a lightweight web application framework that emphasizes the interaction between JavaScript and HTML. It was released January 2006 at BarCamp NYC by John Resig.” - Wikipedia - http://en.wikipedia.org/wiki/JQuery </li></ul></ul><ul><li>jQuery is a JavaScript Library that provides easy and convenient methods for doing complex things. </li></ul><ul><li>jQuery makes working with HTML MUCH MUCH easier than traditional JavaScript. </li></ul>
    5. 5. jQuery – How to use it <ul><li>Using jQuery consists of 3 steps: </li></ul><ul><ul><li>Download jQuery (usually the latest version) - http://jquery.com </li></ul></ul><ul><ul><li>Include jQuery with the script tag: <script type=”text/javascript” src=”jquery-1.2.1.js”></script> </li></ul></ul><ul><ul><li>Use it: $(document).ready(function () { alert(”Hello World”); }); </li></ul></ul><ul><ul><li>demo file - 1_howtouse.htm </li></ul></ul>
    6. 6. Chaining <ul><li>Almost all jQuery methods return the object they are working on </li></ul><ul><li>More than one operation can be done on one line </li></ul><ul><ul><li>$(”#myObj”).hide().css(”color”, ”#f00”).slideDown(); </li></ul></ul>
    7. 7. Contrasts <ul><li>Selecting elements </li></ul><ul><ul><li>by ID </li></ul></ul><ul><ul><li>by Class </li></ul></ul><ul><ul><li>by Attributes </li></ul></ul><ul><ul><li>by Location (in DOM) </li></ul></ul><ul><ul><li>by a Combination </li></ul></ul><ul><ul><li>Mulitple Handlers </li></ul></ul><ul><ul><li>demo file – 2_contrasts_select.htm </li></ul></ul>
    8. 8. Contrasts <ul><li>Getting & Changing Elements </li></ul><ul><ul><li>Text / HTML </li></ul></ul><ul><ul><li>Form elements </li></ul></ul><ul><ul><li>demo file 3_contrasts_changing.htm </li></ul></ul>
    9. 9. Contrasts <ul><li>Working with CSS </li></ul><ul><ul><li>Add class </li></ul></ul><ul><ul><li>Remove class </li></ul></ul><ul><ul><li>Set Styles </li></ul></ul><ul><ul><li>Get style value </li></ul></ul><ul><ul><li>demo file - 4_contrasts_css.htm </li></ul></ul>
    10. 10. Contrasts <ul><li>Events </li></ul><ul><ul><li>Ready? ( $(document).ready() ) </li></ul></ul><ul><ul><li>Adding events </li></ul></ul><ul><ul><ul><li>Multiple handlers </li></ul></ul></ul><ul><ul><li>Removing events </li></ul></ul><ul><ul><li>Firing events </li></ul></ul><ul><ul><li>Interactions </li></ul></ul><ul><ul><li>demo file - 5_contrasts_events.htm </li></ul></ul>
    11. 11. Contrasts <ul><li>Ajax </li></ul><ul><ul><li>Old Way </li></ul></ul><ul><ul><li>Easy way </li></ul></ul><ul><ul><li>Not so easy way (but more robust) </li></ul></ul><ul><ul><li>demo file 6_contrasts_ajax.htm </li></ul></ul>
    12. 12. Bonus Capabilities <ul><li>Effects </li></ul><ul><ul><li>Utilities </li></ul></ul><ul><ul><li>Animations </li></ul></ul><ul><ul><li>demo file 7_bonus_capabilities.htm </li></ul></ul>
    13. 13. Extending jQuery <ul><li>Plugins </li></ul><ul><li>Where to get them </li></ul><ul><li>demo file: 8_bonus_capabilities.htm </li></ul>
    14. 14. Real Life jQuery <ul><li>Our (simple) Sample Application: </li></ul><ul><ul><li>Login page </li></ul></ul><ul><ul><li>On failed login, show a message with some style </li></ul></ul><ul><ul><li>On successful login, replace the content with a page loaded via Ajax. </li></ul></ul><ul><ul><li>(sample only – don't use this for real life authentication) </li></ul></ul><ul><ul><li>demo file 9_sample_app.htm </li></ul></ul>
    15. 15. jQuery vs Prototype.js <ul><li>What is Prototype.js? </li></ul><ul><li>Can be found at http://prototypejs.org </li></ul><ul><li>Similar goals, different but converging approaches </li></ul><ul><ul><li>jQuery – One object to expand DOM </li></ul></ul><ul><ul><li>Prototype – Many custom objects </li></ul></ul><ul><li>jQuery can coexist </li></ul><ul><li>demo file 10_prototype.htm </li></ul>
    16. 16. Resources <ul><li>jQuery.com </li></ul><ul><li>http://docs.jquery.com/Discussion </li></ul><ul><ul><li>Mailing list </li></ul></ul><ul><ul><li>RSS Feeds </li></ul></ul><ul><ul><li>IRC Channel </li></ul></ul><ul><li>Books </li></ul><ul><li>Google (of course) </li></ul>

    ×