Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introduction to jQuery

807 views

Published on

This is a follow up from my "Introduction to JavaScript" and gives a quick & practical overview of jQuery.

Published in: Education
  • Be the first to comment

  • Be the first to like this

Introduction to jQuery

  1. 1. Introduction to JQuery Dr Andres Baravalle
  2. 2. Outline • Functions and variable scope (cont'd) • Constructors • Methods • Using Ajax libraries: jQuery
  3. 3. Functions and variable scope (cont'd)
  4. 4. Activity #1: using functions Analyse the following code: <script type="text/javascript"> var total = 0; var number = 0; while(number!=".") { total += parseInt(number); number = prompt("Add a list of numbers. Type a number or '.' to exit.",""); } alert("The total is: " + total); </script>
  5. 5. Activity #1: using functions (2) • After you've understood the mechanics of the short code, rewrite the code to use a function – Normally, you wouldn't need a function in such a case – this is just to get you started
  6. 6. Activity #2: variable scope • Analyse the code in the next page – Try to determine what should happen – Then run the code and see what actually happens.
  7. 7. Activity #2: variable scope (2) var number = 200; incNumber(number); alert("The first value of number is: " + number); function incNumber(number) { // what is the value of number here? number++; } // what is the value of number here? number++; alert("The second value of number is: " + number); incNumber(number); // what is the value of number here? alert("The third value of number is: " + number);
  8. 8. Constructors
  9. 9. Creating objects • You can create (basic) objects directly: var andres = {"name": "Andres", "surname": "Baravalle", "address": "Snaresbrook", "user_id": "andres2" }; • The problem of such an approach is that it can be a lengthy process to create a number of objects with different values.
  10. 10. Constructors • Constructors are a special type of function that can be used to create objects in a more efficient way.
  11. 11. Using constructors • The problem of the approach we have just seen is that it can be a lengthy process to create a number of objects with different values • Using constructor functions can make the process faster.
  12. 12. Using constructors (2) • The code becomes shorter and neater to maintain: function Staff(name, surname, address, user_id, year_of_birth) { this.name = name; this.surname = surname; this.address = address; this.user_id = user_id; this.year_of_birth = year_of_birth; } var andres = new Staff("Andres", "Baravalle", "East London", "andres2"); console.log(andres); // let's use with firebug for debugging!
  13. 13. Using construtors (+Firebug)
  14. 14. Activity #3 • Adapt the Staff() constructor to create a constructor for students • Record all the information in Staff(), plus year of registration and list of modules attended (as an array) • Create 2 students objects to demonstrate the use of your constructor
  15. 15. Activity #4 • Building on top of Activity #3, add an extra property, marks • Marks will be an object itself – Please create the marks object without a constructor • Demonstrate the new property
  16. 16. Methods • Methods are functions associated with objects. • In the next slide we'll modify again our class, as an example to illustrate what this means
  17. 17. Using methods function staff (name, surname, address, user_id, year_of_birth) { this.name = name; this.surname = surname; this.address = address; this.user_id = user_id; this.year_of_birth = year_of_birth; this.calculateAge = calculateAge; // use the name of the function to link here this.age = this.calculateAge(); // calling calculateAge *inside* this function context } function calculateAge() { // "this" works as we have linked the constructor with this function return year - this.year_of_birth; } year = 2013; var andres = new staff("Andres", "Baravalle", "East London", "andres2", 1976); console.log(andres); // use with firebug for debugging!
  18. 18. Activity #5: Using methods • Adapt your student class to store the mean mark using an extra class variable, mean_mark, and an extra method, calculateMeanMark() – Use for … in statement to navigate the mark (see http://baravalle.it/javascript- guide/#for_Statement)
  19. 19. Using Ajax libraries
  20. 20. Web 2.0 • Web 2.0 is one of neologisms commonly in use in the Web community. According to Tim O’Reilly, Web 2.0 refers to: – "the business revolution in the computer industry caused by the move to the internet as platform, and an attempt to understand the rules for success on that new platform" (http://radar.oreilly.com/archives/2006/1 2/web_20_compact.html).
  21. 21. Web 2.0 (2) • The idea of Web 2.0 is as an incremental step from Web 1.0. – It is based on Web 1.0, but with something more • The concept of ‘internet as a platform’ implies that Web 2.0 is based on the Web on its own as place where applications run – The browser allows applications to run on any host operating system. – In the Web 2.0 strategy, we move from writing a version of software for every operating system that has to be supported, to writing a Web application that will automatically run on any operating system where you can run a suitable browser.
  22. 22. Web 2.0 technologies • Technologies such as Ajax (Asynchronous JavaScript and XML; we will explore that further in this study guide), RSS (an XML dialect used for content syndication), Atom (another XML dialect used for content syndication) and SOAP (an XML dialect used for message exchange) are all typically associated with Web 2.0.
  23. 23. What is Ajax? • Ajax is considered to be one of the most important building blocks for Web 2.0 applications. • Both JavaScript and XML existed before Web 2.0 – the innovation of Ajax is to combine these technologies together to create more interactive Web applications. • Ajax is typically used to allow interactions between client and server without having to reload a Web page.
  24. 24. Ajax libraries • A number of different libraries have been developed in the last few years to support a faster and more integrated development of Ajax applications. • jQuery (http://jquery.com), Spry (http://labs.adobe.com/technologies/spry), Script.aculo.us (http://script.aculo.us) and Dojo (http://dojotoolkit.org) are some of the more commonly used Ajax frameworks. – Spry is included in Dreamweaver – and is an easy option to start – We are going to use a quite advanced library – jQuery – even tough we'll do that at a basic level
  25. 25. jQuery • jQuery is a JavaScript library designed to simplify the development of multi-platform client-side scripts • jQuery's makes it easy(-ish?) to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. – and it's free, open source software!
  26. 26. jQuery – let's start • As a first step, you'll need to download the jQuery library from jquery.com • For development, you should use the "normal" (non-minified) js file file in the library – A minified version also exists – it removes spaces, newlines, comments and shortens some variable names to make the file size smaller (for deployment only)
  27. 27. jQuery CDN • You can also use jQuery through a CDN (content delivery network), including the file directly: http://code.jquery.com/jquery-1.8.1.min.js (normally for deployment, not development) • Using the CDN version normally allows a better experience to users – as they might have already the library in cache from a visit to another site also using the same CDN • You should not use CDN for development – only in production
  28. 28. jQuery commands • jQuery commands begin with a call to the jQuery function or its alias.
  29. 29. jQuery commands (2) • jQuery comes with a shorthand function - $(). • You'll normally use $() instead of the jQuery() function – $() is not defined in JavaScript – is just a function having a 1 letter name, defined in jQuery
  30. 30. jQuery commands (3) • You normally run your jQuery commands after your page has been loaded: $(document).ready(function() { alert(Hey, this works!); });
  31. 31. jQuery selectors • You can "select" elements with the same syntax that you have been using to travers the DOM in CSS • E.g. – $('tr') – $('#celebs') – $('.data') – $('div.fancy p span')
  32. 32. Reading properties • You can use jQuery to read properties • E.g. $(document).ready(function() { var fontSize = $('body p').css('font-size'); alert(fontSize); });
  33. 33. Changing properties • You can use the same syntax to change properties: $('p#first').css('font-color','red'); • You can use arrays too! $('body p').css( {'background-color': '#dddddd', 'color': '#666666', 'font-size': '11pt}) });
  34. 34. Hey, that's handy!
  35. 35. Dreamweaver will help you! • As you can see, Dreamweaver understands jQuery! • Dreamweaver ships with autocomplete functions and syntax highlighting for jQuery – and Aptana too!
  36. 36. Activity #6: starting with CSS • Download the jQuery library and include it in a new HTML file • Use a "lorem ipsum" text as usual to fill your page with a few paragraphs • Try out basic jQuery commands to change the style of the paragraphs
  37. 37. Sorry – isn't this useless? • Yes! What you have tried up to now is useless on its own – you could do the same with just css • In the next slides we'll see a better use of jQuery
  38. 38. Activity #7: hiding and showing elements • Analyse the code at http://baravalle.com/presentations/ske6/ac tivities/javascript/jquery_hide_paragraph.h tml • You have an anonymous (=without a name) function applied to the onclick event of the element #a1 • That means that the function will run when you click on #a1
  39. 39. Activity #7: hiding and showing elements (2) • Building on top of the existing code, write a number of additional anonymous functions to hide/show the other paragraphs
  40. 40. Adding HTML: after() • You can also add child nodes: $('#second').after("<p>Hey, this is a new paragraph!</p>"); • When clicking on the item with id=a1 (#a1 should be an anchor, as in the previous example), add some HTML after item #second • See in action at http://baravalle.com/presentations/ske6/activities /javascript/jquery_new_paragraph.html
  41. 41. Adding HTML (insertAfter()) • You can insert HTML after a specific selector: $("<p>Hey, this is a new paragraph! </p>").insertAfter('#second');
  42. 42. Working on more selectors • You can work on many selectors at the same time: $('#second, #third').after("<p>Hey, this is a new paragraph!</p>");
  43. 43. Activity #8 • Build on top of your previous code to dynamically add new content to your page, using after() or insertAfter()
  44. 44. Removing elements • You can also remove elements: $('p').remove(':contains("Hey, this is a new paragraph!")'); • or replace their content: $('p').html('Replacing all paragraphs!');
  45. 45. Animations: fadeout() • You can animate any element: $('#first').fadeOut();
  46. 46. Animations: using the padding • You can edit properties of your selectors and animate them: $('#third').animate({ paddingLeft: '+=15px' }, 200); • Please note that animate() requires you to write the property name in camel case (paddingLeft rather than the usual padding-left)
  47. 47. Activity #9: using plugins • jQuery includes a large number of plugins • Read the documentation for the color- animation plugin: http://www.bitstorm.org/jquery/color- animation/ – Embed the plugin in your page – and animate a paragraph!
  48. 48. Chaining • Remember that you can chain different jQuery methods: • $ ('p:last').slideDown('slow').delay(200).fade Out();
  49. 49. And now it's the end • You should be ready to use HTML, CSS, JavaScript, jQuery and PHP – at least to some degree

×