jQuery introduction

  • 7,228 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
7,228
On Slideshare
0
From Embeds
0
Number of Embeds
72

Actions

Shares
Downloads
0
Comments
0
Likes
4

Embeds 0

No embeds

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