What you will learn in this course

Essential jQuery + HTML5 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.

You'll get answers to these questions:

  • What is jQuery and why should you use it?
  • How does jQuery reduce the amount of code that you have to write to add rich functionality to both existing and new web pages?
  • How does jQuery make Ajax programming easier?
  • What best practices are there for using jQuery so that it works unobtrusively and performs well?
  • What plugins and extensions are available to enhance your applications even more than the core jQuery library can provide?
  • What is HTML5 and why, when, and where should you use it?
  • How does HTML5 reduce the amount of code that you have to write to add rich functionality to both existing and new web pages?
  • How do you detect the features of HTML5 that are available in your users' browsers?
  • How do you let my users continue to work while being disconnected from the network?

Course highlights

  • 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
  • Test your applications to make sure your JavaScript is as solid as the rest of your code
  • Learn what HTML5 includes and how to detect it
  • Enhance your forms to provide a richer user experience
  • Store data on your users' machines and sync it with the data on your servers

Course outline and topics

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


Day 1

Introduction

To get things started, we'll talk about what jQuery is, what it can do, where to get it, and how to include it into both existing and new pages. 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.


Manipulating the Document

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.


Day 2

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.


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).


Day 3

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.


Templates and Data Binding

As more code is written in JavaScript for execution in the browser, developers are discovering that they need to change the way they write JavaScript to keep it manageable. The "official" template and data link plugins you'll discover in this module will demonstrate one way of taking your JavaScript development to the next level.


Testing

The core jQuery library comes with thousands of tests ensuring it works in all modern browsers. How many tests do you have for the JavaScript in your application? This module highlights the qUnit testing framework used by the jQuery team which you can use for your own code and also demonstrates how to use tools like Selenium and WatiN to do full, end-to-end testing for your web applications.


Day 4

Introduction to HTML5

This module introduces HTML5, providing an overview of what will be covered throughout the rest of the course. Browser support and techniques for detecting the different features in HTML5 are explored. HTML5 includes a handful of new, semantic elements that make your markup much easier to structure and reason about. We'll also look at some of the new CSS properties that you can use to enhance the style of your documents.


Forms

HTML5 includes over a dozen new input control types for collecting data from your users. This module covers those new controls and discusses ways to use JavaScript to enhance forms in the cases where specific control types aren't available.


Storage

Up until HTML5, the only way to store user-specific data has been to use cookies, but that's extremely limited and pales in comparison to the features available in HTML5. This module looks at local storage, the embedded SQL database, and the alternative "IndexedDB", how to detect them and how to use them.


Offline

As strange as it sounds, HTML5 allows you to take your web applications offline. This module looks at the ways you can do this, specifying the resources the browser will need to download in order to be able to do anything offline and what events and methods you'll need to know about in order to provide a proper, offline experience.


Day 5

Messaging

One of the most revolutionary features of HTML5 is the new WebSocket protocol which allows servers to push data to clients enabling almost "real time" notifications. This module looks at the client-side APIs you'll need to be familiar with in order to use them and some different ways of setting up a server in order to handle the client requests. We'll also look at web workers which allow you to perform long-running tasks while keeping the main UI for your application usable and responsive.


Canvas

The Canvas API makes it possible to do more than just display text and raster-based images in your web pages. You'll learn about the different shapes the Canvas API supports and the methods you need to draw them as well as the newer features for drawing text onto your canvases. The programming model used by canvases is different from the DOM so we'll discuss the new things you'll have to consider while working with it.


Audio/Video

Previously, playing any sort of audio or video required the use of a 3rd party plugin like Flash, QuickTime, or Silverlight. HTML5 gives audio and video first-class support, but there are plenty of options to consider. This module will demonstrate the new tags and how to detect if a browser supports specific codecs.


More

HTML5 includes more new features than any other previous version of HTML. This module tries to wrap things up by covering the "smaller", but still game-changing features that didn't fit in the other modules. Features such as being able to drag and drop between the browser and the OS, local file system access, the geolocation API, and cross-window messaging will be covered before you go off and implement these in your own applications.