Essential jQuery

Course Overview

Essential jQuery provides practical and hands-on experience with the preferred JavaScript library for building rich web applications. If you are building for the web, learning jQuery will change the way you write JavaScript, working across multiple browsers and platforms.

Course Objectives

• Learn what jQuery is and how to add it to your applications
• Use jQuery to select complex sets of elements from the DOM
• Develop rich web pages that respond to user interaction
• Interact with your server-side code using Ajax
• Explore a wide variety of plugins and learn how to write your own

Course Content

This course covers jQuery and is intended for web developers who are targeting any modern web browser (IE, Firefox, Chrome, Safari) on any platform (Windows, Mac OS X, Linux, iOS, Android).

Day 1

• The JavaScript Programming Language
  jQuery is a JavaScript library so having a solid understanding of the JavaScript programming language is necessary to use the library. This introductory module acts as either a prefresher for those new to JavaScript or a refresher for those who’ve been using it for a while. Common gotchas, patterns, and idioms will be shared along with brief coverage of some of JavaScript’s more advanced features like closures and prototypes.
  
• Introduction to jQuery
  This module will answer the following questions: What is jQuery? What can it do? Where can it be downloaded? Where is the documentation? And how can it be installed into both new and existing projects? We’ll introduce the famous $ function and do some simple selections with it, modifying the DOM, and handling some events. This introduction will be light enough to get started using jQuery quickly, but show enough of what it’s capable of so that we have some context in the modules that follow.
  
• Selecting Elements
  jQuery gets its name for its ability to query the DOM for elements in an amazing variety of ways. This module will cover the many different selectors that jQuery supports, but also the methods the jQuery object supports that allow you to refine and extend the results of your queries. The style of method chaining that jQuery made popular will be covered, allowing you to truly write less, but do more.

Day 2

• Manipulating the DOM
  You’ve selected the correct elements, what’s next? This module demonstrates how easy jQuery makes it to manipulate the DOM by creating new elements and updating existing ones. You’ll see how jQuery makes programmatic CSS manipulation a breeze. You’ll also get to explore jQuery’s support for “animating” the properties of your elements in order to create impressive visual and functional effects for when the user is interacting with your pages.
  
• Event Handling
  Users do stuff with your pages. jQuery makes handling events in a cross-browser manner so easy that you’ll want to do all of your development in JavaScript. You’ll see how to bind and unbind handlers to events (both DOM and custom) and the gotchas you need to keep in mind managing the event context properly. You’ll also see how to use “live” events which automatically detect when new elements are added to the DOM and handle events for them.
  
• Ajax
  No JavaScript library would be complete without some sort of support for making requests from the client to the server. jQuery makes it trivial to download and inject HTML into an existing DOM. It’s just as easy to send data to and receive data from “web services” located on the server, allowing complex logic to be authored in JavaScript and run on the client. jQuery’s Deferred objects will also be covered, greatly easing the burden of working with asynchronous data sources.

Day 3

• Plugins
  Even if “core” jQuery were all you could use, it would still be worth it. Fortunately, the jQuery community has written hundreds, if not thousands, of plugins (mostly free) that can take your applications to the next level with barely any code to write on your part. This module will cover some of the more popular plugins (color, validation, form, and more) and demonstrate how to write your own (this is often useful even if you don’t plan on sharing your plugins with anybody else).
  
• jQuery UI
  The jQuery UI project is a standard set of widgets and effects, put together by the jQuery team by selecting from and improving upon some of the most popular plugins developed by the community. These feature-rich widgets (autocomplete, datepicker, dialog, tabs, and more) can make your web pages seem as rich as traditional applications. You’ll also learn how to use the jQuery UI CSS Framework.
  
• Bootstrap
  Bootstrap is mostly a CSS framework, but it also comes with a library of jQuery plugins for common tasks that auto-initialize themselves to help avoid writing any JavaScript at all. This module will cover some of those plugins (there are too many to fully cover, but you’ll learn enough to be familiar with their style and how to learn the rest), but also the core CSS framework. You want your projects to look as good as they function, don’t you?