• Save
jQuery introduction
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

jQuery introduction

  • 5,567 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,567
On Slideshare
3,223
From Embeds
2,344
Number of Embeds
51

Actions

Shares
Downloads
0
Comments
0
Likes
4

Embeds 2,344

http://localhost 1,429
http://www.beachlifedreaming.com 143
http://www.bootstraps.com.br 124
http://uhanbo.com 73
http://www.socialconnexion.dk 67
http://www.litterads.com 61
http://www.animalstrust.com 58
http://www.cheeps.ch 36
http://www.trailfind.co.uk 31
http://abcsmall.com 27
http://wall.alcoor.com 24
http://mymusicwall.co.uk 24
http://www.dusunceokulu.com 18
http://www.prayersalive.org 18
http://www.dusunceokulu.net 17
http://www.iperwork.it 16
http://frends-note.ru 16
http://rzytzek.de 12
http://ww5.rpdev.me 12
http://www.egoistbook.com 12
http://www.friendsways.co.in 10
http://www.bojioo.com 10
http://www.searchlist.ch 10
http://192.168.1.254 8
http://meloope.com 6
http://wall7.skillexchange.net 6
http://wall 6
http://wall.bragshare.com 6
http://obvio.no 6
http://www.uhanbo.com 5
http://fuckbook24.com 4
http://julian.cf 4
http://www.germanjunkyard.com 4
http://wall7.lcl 4
http://yedje.fr 3
http://www.clairsense.com 3
https://twitter.com 3
http://assistechnologie.net 3
http://post.mk 3
http://www.publicjewel.com 2
http://local.social 2
http://pixtiv.com 2
http://red.gogoweb.com.mx 2
http://litterads.com 2
http://www.stipuertoprincesa.tk 2
http://www.dibi.ro 2
http://dibi.ro 2
http://powerhumans.com 2
http://feisbuc.pefelie.net 2
http://www.celebrityposted.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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