jQuery Introduction Twitter: @tomijuhola <ul><li>Tomi Juhola, 29.8.2011 </li></ul>Versio:  |  Status:      |  Updated: 0.1...
Motivation? Target? <ul><li>jQuery is not much educated technology </li></ul><ul><li>We have a need with people having Jav...
Agenda <ul><li>JAVASCRIPT BASICS </li></ul><ul><li>JQUERY BASICS </li></ul><ul><li>DOM MANIPULATION </li></ul><ul><li>EVEN...
JavaScript Basics 01
What is JavaScript? <ul><li>Scripting language  </li></ul><ul><li>Dynamic (e.g. objects can be extended during run-time) <...
JavaScript syntax <ul><li>JS syntax is C-style, so also close to Java </li></ul><ul><ul><li>However, JavaScript has really...
More simple code examples <ul><li>var variable = ”String”;  </li></ul><ul><li>Variables scoped to the function, not just t...
Even more simple code examples <ul><li>var myFirstObject = {name: ”Peter”, age: 12}; </li></ul><ul><li>myFirstObject.name ...
Issues <ul><li>Cross-browser support </li></ul><ul><li>DOM (Document Object Model) might be too complicated </li></ul><ul>...
jQuery Basics 02
What is jQuery? <ul><li>JavaScript library </li></ul><ul><li>Cross-browser support </li></ul><ul><li>Aimed for client-side...
jQuery features <ul><li>DOM elements: select, modify </li></ul><ul><li>Events </li></ul><ul><li>CSS handling </li></ul><ul...
DOM manipulation 03
The Focus of jQuery <ul><li>Thanks to John Resig (JavaScript and jQuery, ACM Northeastern University) </li></ul><ul><li>jQ...
Examples <ul><li>$(”div”) </li></ul><ul><ul><li>Selects all divs </li></ul></ul><ul><li>$(”.myClass”) </li></ul><ul><ul><l...
Test page <ul><li><!DOCTYPE html> </li></ul><ul><li><head> <title>jQuery test</title> </head> </li></ul><ul><li><body>  </...
Events 04
Examples <ul><li>$(document).ready(function(){  </li></ul><ul><li>$(&quot;a&quot;). click (function(event){  </li></ul><ul...
$.ajax example <ul><li>$.ajax({ </li></ul><ul><li>url: 'ajax/endpoint',  </li></ul><ul><li>success: function(data) { </li>...
Animations 05
Animation examples <ul><li>$(document).ready(function(){ </li></ul><ul><li>$(&quot;a&quot;).click(function(event){ </li></...
jQuery UI 06
jQuery UI <ul><li>http://jqueryui.com/ </li></ul><ul><li>Built on top of the jQuery library </li></ul><ul><li>Includes </l...
Using e.g. accordion widget <ul><li><link rel=&quot;stylesheet&quot; href=&quot;themes/base/jquery.ui.all.css&quot;> </li>...
Additional resources 07
Web resources <ul><li>http://jquery.com/ </li></ul><ul><li>http://jqueryui.com/ </li></ul><ul><li>http://www.w3schools.com...
Further reading <ul><li>jQuery in Action by Bear Bibeault and Yehida Kayz (Manning) </li></ul><ul><li>Learning jQuery 1.3 ...
www.lindorff.fi Thank you! Tomi Juhola Development Lead mobile: +358 44 033 8639 [email_address] www.lindorff.fi Joukahais...
Upcoming SlideShare
Loading in...5
×

jQuery introduction

26,869

Published on

Basics of JavaScript & jQuery. Quick intro targeted for a more hands on CodeCamp style sessions

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

No Downloads
Views
Total Views
26,869
On Slideshare
0
From Embeds
0
Number of Embeds
232
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

jQuery introduction

  1. 1. jQuery Introduction Twitter: @tomijuhola <ul><li>Tomi Juhola, 29.8.2011 </li></ul>Versio: | Status: | Updated: 0.1 Draft Tomi Juhola, 29.8.2011
  2. 2. Motivation? Target? <ul><li>jQuery is not much educated technology </li></ul><ul><li>We have a need with people having JavaScript & jQuery skills, as well as an idea how it should be used </li></ul><ul><li>Target: </li></ul><ul><li>Familiarize you with the JavaScript and jQuery library </li></ul><ul><li>Get to know the mostly used parts of jQuery </li></ul><ul><li>Give guidance on the first steps towards client-side scripting mastery </li></ul>
  3. 3. Agenda <ul><li>JAVASCRIPT BASICS </li></ul><ul><li>JQUERY BASICS </li></ul><ul><li>DOM MANIPULATION </li></ul><ul><li>EVENTS </li></ul><ul><li>ANIMATIONS </li></ul><ul><li>JQUERY UI </li></ul><ul><li>ADDITIONAL RESOURCES </li></ul>
  4. 4. JavaScript Basics 01
  5. 5. What is JavaScript? <ul><li>Scripting language </li></ul><ul><li>Dynamic (e.g. objects can be extended during run-time) </li></ul><ul><li>Weakly-typed (No type needed for variables) </li></ul><ul><li>Multiparadigm: </li></ul><ul><ul><li>Object-oriented </li></ul></ul><ul><ul><li>Imperative (statements that change program state) </li></ul></ul><ul><ul><li>Functional (more mathematical model of imperative programming) </li></ul></ul><ul><li>Prototype based (uses object cloning instead of inheritance) </li></ul><ul><li>First-class functions (passing functions as parameters to other functions etc.) </li></ul><ul><li>Implementation of ECMAScript language standard </li></ul><ul><li>Used mainly on client-side web interfaces </li></ul>
  6. 6. JavaScript syntax <ul><li>JS syntax is C-style, so also close to Java </li></ul><ul><ul><li>However, JavaScript has really nothing else to do with Java.. </li></ul></ul><ul><li>Basic statements </li></ul><ul><ul><li>for ( var i = 0; i < 3; i++ ) { </li></ul></ul><ul><ul><li> // DO SOMETHING </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>for ( var i in array) { </li></ul></ul><ul><ul><li> // DO SOMETHING USEFUL </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>while ( true ) { </li></ul></ul><ul><ul><li> // DO SOMETHING FOREVER </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><ul><li>If (a == b+2) </li></ul></ul>
  7. 7. More simple code examples <ul><li>var variable = ”String”; </li></ul><ul><li>Variables scoped to the function, not just the block: </li></ul><ul><li>function isTen(a){ </li></ul><ul><li>if (a==10) { </li></ul><ul><li>var result = ”Success!” </li></ul><ul><li>} </li></ul><ul><li>return result; </li></ul><ul><li>} </li></ul>
  8. 8. Even more simple code examples <ul><li>var myFirstObject = {name: ”Peter”, age: 12}; </li></ul><ul><li>myFirstObject.name = ”Pete”; </li></ul><ul><li>if (myFirstObject.age <18) </li></ul><ul><li>return ”no fun allowed”; </li></ul><ul><li>Oh, and how to use? </li></ul><ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><li>document.write('Hello World!'); </li></ul><ul><li></script> </li></ul><ul><li><noscript> </li></ul><ul><li><p>No JS Support!.</p> </li></ul><ul><li></noscript> </li></ul>
  9. 9. Issues <ul><li>Cross-browser support </li></ul><ul><li>DOM (Document Object Model) might be too complicated </li></ul><ul><ul><li>So HTML page structure </li></ul></ul><ul><li>No compile time checking </li></ul><ul><ul><li>No compile time at all :) </li></ul></ul><ul><li>Can be easily disabled </li></ul><ul><li>Security: XSS (Cross-site scripting), CSRF (Cross-site request forgery) </li></ul><ul><li>Not easily testable code </li></ul>
  10. 10. jQuery Basics 02
  11. 11. What is jQuery? <ul><li>JavaScript library </li></ul><ul><li>Cross-browser support </li></ul><ul><li>Aimed for client-side scripting </li></ul><ul><li>Released in 2006 </li></ul><ul><li>Most popular JS library today </li></ul><ul><li>FOSS (Free and Open Source Software) </li></ul><ul><ul><li>Licensed under MIT license and GPLv2 </li></ul></ul><ul><li>Under active development, industry support </li></ul><ul><li>www.jquery.com </li></ul><ul><li>You’ll only need the jquery-1.2.6.min.js file and one line: </li></ul><ul><ul><li><script type=&quot;text/javascript&quot; src=&quot;jquery-1.2.6.min.js“></script> </li></ul></ul><ul><li>to enable all the goodness! </li></ul>
  12. 12. jQuery features <ul><li>DOM elements: select, modify </li></ul><ul><li>Events </li></ul><ul><li>CSS handling </li></ul><ul><li>Flashy effects </li></ul><ul><li>Ajax </li></ul><ul><li>Plugin framework </li></ul><ul><li>Some utility functions (browser version) </li></ul><ul><li>Very easy to use! </li></ul><ul><li>And still everything should be cross-browser supported! </li></ul>
  13. 13. DOM manipulation 03
  14. 14. The Focus of jQuery <ul><li>Thanks to John Resig (JavaScript and jQuery, ACM Northeastern University) </li></ul><ul><li>jQuery object $ (also valid: jQuery(”div”)… ) </li></ul>
  15. 15. Examples <ul><li>$(”div”) </li></ul><ul><ul><li>Selects all divs </li></ul></ul><ul><li>$(”.myClass”) </li></ul><ul><ul><li>Selects all items with myClass class </li></ul></ul><ul><li>$(”#myId”) </li></ul><ul><ul><li>Selects all items with myId id (should be just one!) </li></ul></ul><ul><li>$(”div.myClass”) </li></ul><ul><ul><li>Selects all divs with myClass class </li></ul></ul><ul><li>$(”div.myClass”).append(”<p>Text text text</p>”); </li></ul><ul><ul><li>Appends paragrahps to selected divs </li></ul></ul><ul><li>$(”#myId”).css({font-weight: ”bold”}); </li></ul>
  16. 16. Test page <ul><li><!DOCTYPE html> </li></ul><ul><li><head> <title>jQuery test</title> </head> </li></ul><ul><li><body> </li></ul><ul><li><script src=&quot;jquery-1.6.2.min.js&quot;></script> </li></ul><ul><li><script> </li></ul><ul><li>$(document).ready(function(){ </li></ul><ul><li>$(&quot;.changeMe&quot;).append(&quot;<p>Testing append</p>&quot;); </li></ul><ul><li>}); </li></ul><ul><li></script> </li></ul><ul><li><div class=&quot;changeMe&quot;>Text1</div> </li></ul><ul><li><div class=&quot;dontChangeMe&quot;>Text2<div> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul><ul><li>See more at: http://ejohn.org/files/javascript.pdf </li></ul>
  17. 17. Events 04
  18. 18. Examples <ul><li>$(document).ready(function(){ </li></ul><ul><li>$(&quot;a&quot;). click (function(event){ </li></ul><ul><li>alert(“You clicked a link, but I won’t let you away&quot;); </li></ul><ul><li>event.preventDefault(); </li></ul><ul><li>}); </li></ul><ul><li>}); </li></ul><ul><li>$(document).ready(function(){ </li></ul><ul><li>$(&quot;div&quot;). hover (function () { </li></ul><ul><li>$(this).append($(&quot;<span> Selected!</span>&quot;)); </li></ul><ul><li>}, </li></ul><ul><li>function () { </li></ul><ul><li>$(this).find(&quot;span:last&quot;).remove(); </li></ul><ul><li>}); </li></ul><ul><li>}); </li></ul>
  19. 19. $.ajax example <ul><li>$.ajax({ </li></ul><ul><li>url: 'ajax/endpoint', </li></ul><ul><li>success: function(data) { </li></ul><ul><li> $('#resultDiv').html(data); </li></ul><ul><li> alert('DONE!'); </li></ul><ul><li> } </li></ul><ul><li>}); </li></ul>
  20. 20. Animations 05
  21. 21. Animation examples <ul><li>$(document).ready(function(){ </li></ul><ul><li>$(&quot;a&quot;).click(function(event){ </li></ul><ul><li>event.preventDefault(); </li></ul><ul><li>$(this). hide(&quot;slow&quot;); </li></ul><ul><li>}); </li></ul><ul><li>}); </li></ul><ul><li>$(document).ready(function(){ </li></ul><ul><li>$('div').click(function() { </li></ul><ul><li>$('#dilbert'). slideToggle ('slow', function() {}); </li></ul><ul><li>}); </li></ul><ul><li>}); </li></ul>
  22. 22. jQuery UI 06
  23. 23. jQuery UI <ul><li>http://jqueryui.com/ </li></ul><ul><li>Built on top of the jQuery library </li></ul><ul><li>Includes </li></ul><ul><ul><li>Widgets </li></ul></ul><ul><ul><li>Effects </li></ul></ul><ul><ul><li>Animations </li></ul></ul><ul><li>All including theme support , cross browser support, styling, internationalization etc. </li></ul>
  24. 24. Using e.g. accordion widget <ul><li><link rel=&quot;stylesheet&quot; href=&quot;themes/base/jquery.ui.all.css&quot;> </li></ul><ul><li><script src=&quot;jquery-1.6.2.min.js&quot;></script> </li></ul><ul><li><script src=&quot;ui/jquery.ui.core.js&quot;></script> </li></ul><ul><li><script src=&quot;ui/jquery.ui.widget.js&quot;></script> </li></ul><ul><li><script src=&quot;ui/jquery.ui.accordion.js&quot;></script> </li></ul><ul><li>... </li></ul><ul><li>$(function() { </li></ul><ul><li>$( &quot;#accordion&quot; ).accordion({ </li></ul><ul><li>autoHeight: false, </li></ul><ul><li>navigation: true </li></ul><ul><li>}); </li></ul><ul><li>}); </li></ul>
  25. 25. Additional resources 07
  26. 26. Web resources <ul><li>http://jquery.com/ </li></ul><ul><li>http://jqueryui.com/ </li></ul><ul><li>http://www.w3schools.com/js/default.asp </li></ul><ul><li>http://www.learningjquery.com/ </li></ul><ul><li>http://woorkup.com/2011/05/12/jquery-visual-cheat-sheet-1-6/ </li></ul><ul><li>http://net.tutsplus.com/tutorials/javascript-ajax/simple-draggable-element-persistence-with-jquery/ </li></ul><ul><li>https://developer.mozilla.org/en/JavaScript </li></ul>
  27. 27. Further reading <ul><li>jQuery in Action by Bear Bibeault and Yehida Kayz (Manning) </li></ul><ul><li>Learning jQuery 1.3 by Jonathan Chaffer and Karl Swedberg (Packt) </li></ul><ul><li>jQuery Cookbook by Cody Lindley (O’Reilly) </li></ul><ul><li>jQuery: Novice to Ninja by Earle Castledine and Craig Sharkie (SitePoint) </li></ul><ul><li>JavaScript, A Beginner’s Guide by John Pollock (McGraw-Hill) </li></ul><ul><li>JavaScript: The Definitive Guide by David Flanagan (O’Reilly) </li></ul>
  28. 28. www.lindorff.fi Thank you! Tomi Juhola Development Lead mobile: +358 44 033 8639 [email_address] www.lindorff.fi Joukahaisenkatu 2 FI-20100 Turku

×