Learn your way! Get started

jQuery, Part 5 of 6: Debugging and Graphics

with expert Dustin Tauer


Watch trailer


Course at a glance

Included in these subscriptions:

  • Dev & IT Pro Video
  • Dev & IT Pro Power Pack

Release date 10/22/2012
Level Intermediate
Runtime 1h 34m
Closed captioning N/A
Transcript N/A
eBooks / courseware N/A
Hands-on labs N/A
Sample code Included
Exams Included


Enterprise Solutions

Need reporting, custom learning tracks, or SCORM? Learn More



Course description

The jQuery language has grown in its ability to enhance web pages. This course “jQuery: Debugging and Graphics”, will start you with how to debug jQuery in a web browser by understanding/troubleshooting different jQuery versions, checking to see if a features is supported by a browser and then customizing HTML by browser type. Then the course will discuss some animation fundamentals, creating custom animations, drawing on the canvas and ending with animating on the canvas.

Prerequisites

This course assumes that the users have a basic knowledge of web programming with jQuery, JavaScript, HTML, and CSS. Knowledge of Java or other web-based programming languages is not required.

Learning Paths

This course will help you prepare for the following certifications and exams:
MCSD: SharePoint Applications
MCSD: Web Applications
70-480: Programming in HTML5 with JavaScript and CSS3

This course is part of the following LearnNowOnline SuccessPaths™:
JavaScript Frameworks

Meet the expert

Dustin Tauer is an Adobe Certified Master Instructor and has a degree in Informational Systems and Technology. He currently teaches development classes focusing on technologies like HTML, CSS, JavaScript, Flash, and Flex. When he’s not training, he’s working on development projects ranging from mobile applications to rich internet applications to instructor-led curriculum.

Course outline



Debugging and Graphics

Debugging with jQuery (20:51)
  • Introduction (00:32)
  • Debugging jQuery (02:44)
  • Debugging jQuery: Breakpoints (00:44)
  • Demo: jQuery Debugging (03:21)
  • Demo: Web developer console (03:18)
  • Demo: Output statements (03:30)
  • Demo: Checking variable passes (02:23)
  • Demo: Setting breakpoints (02:23)
  • Demo: Stepping into/over code (01:32)
  • Summary (00:18)
Checking Feature Support (13:42)
  • Introduction (00:41)
  • Browser feature support (02:12)
  • Handling errors accordingly (01:06)
  • Demo: Checking for support (04:38)
  • Demo: Browser specific content (02:50)
  • Demo: Checking feature support (01:57)
  • Summary (00:14)
Using Built in Effects (16:09)
  • Introduction (00:26)
  • jQuery effects (02:57)
  • Demo: Effects (02:42)
  • Demo: Duration (01:28)
  • Demo: Movement (01:46)
  • Demo: Toggle (01:35)
  • Demo: Toggle CSS (03:02)
  • Demo: Callback (01:52)
  • Summary (00:18)

Animation

Custom Animations (16:28)
  • Introduction (00:33)
  • Custom Animations (02:02)
  • Custom Animations: 3rd party (01:07)
  • Easing (02:49)
  • Demo: Fade out/Delay (02:44)
  • Demo: Triggering events (00:51)
  • Demo: jQuery queue method (03:55)
  • Demo: Queuing multiple events (02:07)
  • Summary (00:17)
jQuery Canvas (16:09)
  • Introduction (00:34)
  • jQuery Canvas (01:35)
  • Demo: Creating a canvas (00:42)
  • Demo: Drawing on the canvas (02:04)
  • Demo: Multiple drawing calls (04:20)
  • Demo: Drawing patterns (03:06)
  • Demo: Using drawing patterns (01:34)
  • Demo: Troubleshooting drawing (01:50)
  • Summary (00:20)
Animating the Canvas (11:24)
  • Introduction (00:34)
  • Animating on the Canvas (00:54)
  • Utilizing layers (01:33)
  • Colors in the jQuery Canvas (00:32)
  • Demo: Creating a layer (01:45)
  • Demo: Animating a layer (02:11)
  • Demo: Chaining animation (03:36)
  • Summary (00:17)