Week 4 - jQuery + Ajax

1,066 views
953 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,066
On SlideShare
0
From Embeds
0
Number of Embeds
271
Actions
Shares
0
Downloads
13
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Week 4 - jQuery + Ajax

    1. 1. LESSON FOUR jQuery intro
    2. 2. Fast Review
    3. 3. Functions = “First Class Objects”
    4. 4. Anonymous Functions function() { // code goes here }
    5. 5. Arraysdata structure for ordered values var team = [‘ben’,‘jeff’,‘kam’]; team[0] // => ‘ben’
    6. 6. Objectscollections of “key/value” properties var person = {}; person.name = ‘will’; // Write var name = person.name; // Read
    7. 7. Document Object Model
    8. 8. Review Homework
    9. 9. Enter, jQuery
    10. 10. What is jQueryFramework for using Javascript to interact withthe browser• Simple DOM API: manipulate HTML / CSS on the page• Simple AJAX API: send and receive data from the server• Simple Event API: do stuff when the user does stuff• Thats it!
    11. 11. What is a Framework? A library of utility functionsSmall Medium Large• Underscore.js • jQuery UI • YUI (Yahoo UI)• jQuery • MooTools • GWT (Google web toolkit)• Prototype.js • Dojo • EXT JS (commercial) there are LOTS of them for web development
    12. 12. Why use jQuery• The DOM API is _nasty_!• Cross browser• Fast - Faster than raw DOM manipulation! *magic*• Lightweight (31kb)• Stable and trusted• Required for many other frameworks• EVERYBODY uses it
    13. 13. Include jQuery<script src="/js/jquery.js"></script><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> Try it out!
    14. 14. jQuery Syntax or…how to follow the $$(document).ready(function(){ // Your code here}); DOM Manipulation $("a").addClass("test");
    15. 15. using jQuery
    16. 16. Selecting Elements Using CSS!$("#foo") // the [element] at id “foo”$(".bloop") // the [elements] with class “bloop”$("a.buzz") // the [links] with class ‘buzz’$(".bloop:first") // specialty! The first bloop!=> :hidden, :visible, :last, :checked, :empty, :odd...
    17. 17. Important Methods.show() / .hide() / .toggle() $(".swap_text").toggle();.addClass(".active").removeClass(".active").css(key, value) $("#my_box").css(‘backgroundColor’, ‘red’); $("#my_box").css({ ‘backgroundColor’ : ‘red’, ‘color’ : ‘#030’ });
    18. 18. Important Methods.animate(properties, duration, callback) $(‘#my_box’).animate({ ‘backgroundColor’ : ‘red’, ‘marginTop‘ : ‘20px’, ‘color‘ : ‘#030’ }, 3000, justFinished); // execute the animation for 3 seconds // and when done, call: justFinished();
    19. 19. Important Methods.html() / .val() / .attr(‘attribute’) $(‘#my_title’).html(); // returns the innerHTML $(‘#my_title’).html(“New Title!”); // sets the innerHTML $(‘input#email’).val(“please enter your email address...”); $(‘img’).attr(“src”, “placekitten.com/30/30”); as before: these methods can get or set...
    20. 20. Methods Can “Chain”$("#my_box").addClass(‘inactive’).removeClass(‘active’).hide();
    21. 21. jQuery Events$(document).ready() // the DOM is loadedwindow.load() // all elements (including images) have loaded.change().submit().focus().click.scroll().hover().keypress() ...And so many more!
    22. 22. Events w/o jQuery no browser consistencyEX:.addEventListener("click", function({}) ); // Firefox.attachEvent("onclick", function({}) ); // Internet Explorer
    23. 23. jQuery Insertion.append().after().insertAfter().before.insertBefore().clone()
    24. 24. Client Side Requests[XHR and AJAX]
    25. 25. XMLHttpRequestAllows you to make a web request via client side javascriptInvented by Microsoft for Internet Explorer, then ported to otherbrowsers var request = new XMLHttpRequest(); // Create new request object request.open(“GET”, “path/file.ext”, false); // “open” the request request.send(null); // Make the request var text = request.responseText; // Check the response text
    26. 26. BUZZZZWORD“XHR”• XMLHttpRequest• Misnomer => Not limited to XML data• By default, synchronous
    27. 27. AJAXBy default, XHR proceeds synchronouslyIn other words, your code will hang until the request is completeWhat if you want your code to keep executing? => Use AJAX
    28. 28. BUZZZZWORD“AJAX”• “Asynchronous Javascript and XML”• XHR done asynchronously• Provide a callback to execute when the request is complete• Changed the face of web development => page reloads no longer required to add new content to a page
    29. 29. AJAX via DOMvar request = new XMLHttpRequest(); // Create new request objectrequest.open(“GET”, “path/file.ext”, true); // ‘True’ => AJAXrequest.send(null); // Make the requestvar text = request.responseText; // Will be null this time!request.onreadystatechange = function() { if (request.readyState == 4) { // Request is done. Can check responseText }
    30. 30. AJAX via DOMvar request = new XMLHttpRequest(); // Create new request objectrequest.open(“GET”, “path/file.ext”, true); // ‘True’ => AJAX CONFUSING this time!request.send(null); // Make the requestvar text = request.responseText; // Will be nullrequest.onreadystatechange = function() { if (request.readyState == 4) { // Request is done. Can check responseText }
    31. 31. AJAX via jQuery $.ajax({  url: "test.html",  success: function(return_text){    $("#results").append(return_text); }}); more next week...
    32. 32. QUESTIONS?contact will_and_bay@hackyale.com

    ×