jQuery is a ubiquitous library that fine tunes JavaScript's control over the DOM, and makes client side scripts clearer and more user friendly. Let's consider a few of the more popular methods:


$('#some-id').append('<p>Howdy</p>');

The append method inserts a string, which may or may not include HTML elements, to the end of the specified element in your HTML — right before the closing tag. Notice that here we have specified an element by its ID denoted with a hash similarly to how CSS identifies ID's. You can also bind classes to methods using the period (as in ".some-class") or just elements with neither hash nor periods. The same code can be written without jQuery (aka vanilla js), but it's just more verbose, and less intuitive.


$('p').hover( function(){
    $(this).css('color', 'red');
});

jQuery is very helpful in creating event listeners (the pieces of code that "look out" or rather "listen out" for certain user events like a mouse click or a key press). The above code binds a CSS declaration to a mouse event. Notice that the colon and semicolon normally found in CSS declarations are missing here. We're also seeing the this keyword, and an anonymous function — two pretty important concepts to go over in class.


$(document).ready( function(){
    // execute functions here
});

The document ready function waits till all the pieces of HTML are loaded before firing the javascript functions inside. Otherwise, some functions run the risk of firing before long HTML files have had a chance to fully load into the browser.


$.ajax({
  url: 'example.com/some/url',
  type: 'GET',
  dataType: 'json',
  error: function(data){
    console.log('Uh oh!');
  },
  success: function(data){
    console.log(data);
    // now manipulate that data
  }
});

The powerful AJAX method will allow you to access data from HTTP (aka web-based, aka RESTful) APIs. We will be looking at "GET" requests, which retrieve information from a server, as opposed to "POST" requests, which would place information on the server. Be mindful that some APIs return JSONP instead of JSON.


var userInput = $('.form-element').val();

Finally, the .val(); method takes data from form elements such as text inputs or check boxes and returns the results. We will also look at form validation and regular expressions.


In addition to jQuery, other helper libraries you may want to explore include Zepto a lighter but less compatible version of jQuery, and underscore, a library that adds sometimes helpful programming tools to JS.

Homework

Create a single webpage that prompts the user for some input (see form elements), takes data from two public web APIs, and displays content to the DOM using jQuery. Optionally, consider in your work how data can lend credibility, but not necessarily truth, to a piece of communication. Feel free to experiment with a graphics framework.