Week 4 - jQuery + Ajax
Upcoming SlideShare
Loading in...5
×
 

Week 4 - jQuery + Ajax

on

  • 876 views

 

Statistics

Views

Total Views
876
Views on SlideShare
608
Embed Views
268

Actions

Likes
0
Downloads
9
Comments
0

3 Embeds 268

http://hackyale.com 200
http://www.hackyale.com 59
http://localhost:3000 9

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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 Week 4 - jQuery + Ajax Presentation Transcript

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