Your SlideShare is downloading. ×
0
Week 4 - jQuery + Ajax
Week 4 - jQuery + Ajax
Week 4 - jQuery + Ajax
Week 4 - jQuery + Ajax
Week 4 - jQuery + Ajax
Week 4 - jQuery + Ajax
Week 4 - jQuery + Ajax
Week 4 - jQuery + Ajax
Week 4 - jQuery + Ajax
Week 4 - jQuery + Ajax
Week 4 - jQuery + Ajax
Week 4 - jQuery + Ajax
Week 4 - jQuery + Ajax
Week 4 - jQuery + Ajax
Week 4 - jQuery + Ajax
Week 4 - jQuery + Ajax
Week 4 - jQuery + Ajax
Week 4 - jQuery + Ajax
Week 4 - jQuery + Ajax
Week 4 - jQuery + Ajax
Week 4 - jQuery + Ajax
Week 4 - jQuery + Ajax
Week 4 - jQuery + Ajax
Week 4 - jQuery + Ajax
Week 4 - jQuery + Ajax
Week 4 - jQuery + Ajax
Week 4 - jQuery + Ajax
Week 4 - jQuery + Ajax
Week 4 - jQuery + Ajax
Week 4 - jQuery + Ajax
Week 4 - jQuery + Ajax
Week 4 - jQuery + Ajax
Week 4 - jQuery + Ajax
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Week 4 - jQuery + Ajax

861

Published on

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

No Downloads
Views
Total Views
861
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
13
Comments
0
Likes
1
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
  • \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
  • Transcript

    • 1. LESSON FOUR jQuery intro
    • 2. Fast Review
    • 3. Functions = “First Class Objects”
    • 4. Anonymous Functions function() { // code goes here }
    • 5. Arraysdata structure for ordered values var team = [‘ben’,‘jeff’,‘kam’]; team[0] // => ‘ben’
    • 6. Objectscollections of “key/value” properties var person = {}; person.name = ‘will’; // Write var name = person.name; // Read
    • 7. Document Object Model
    • 8. Review Homework
    • 9. Enter, jQuery
    • 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. 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. 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. 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. jQuery Syntax or…how to follow the $$(document).ready(function(){ // Your code here}); DOM Manipulation $("a").addClass("test");
    • 15. using jQuery
    • 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. 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. 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. 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. Methods Can “Chain”$("#my_box").addClass(‘inactive’).removeClass(‘active’).hide();
    • 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. Events w/o jQuery no browser consistencyEX:.addEventListener("click", function({}) ); // Firefox.attachEvent("onclick", function({}) ); // Internet Explorer
    • 23. jQuery Insertion.append().after().insertAfter().before.insertBefore().clone()
    • 24. Client Side Requests[XHR and AJAX]
    • 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. BUZZZZWORD“XHR”• XMLHttpRequest• Misnomer => Not limited to XML data• By default, synchronous
    • 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. 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. 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. 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. AJAX via jQuery $.ajax({  url: "test.html",  success: function(return_text){    $("#results").append(return_text); }}); more next week...
    • 32. QUESTIONS?contact will_and_bay@hackyale.com

    ×