jQuery, Part 5 of 6: Debugging and Graphics

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.

Each LearnNowOnline training course is made up of Modules (typically an hour in length). Within each module there are Topics (typically 15-30 minutes each) and Subtopics (typically 2-5 minutes each). There is a Post Exam for each Module that must be passed with a score of 70% or higher to successfully and fully complete the course.

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.

Meet the expert

Dustin Tauer

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.

Video Runtime

94 Minutes

Time to complete

181 Minutes

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)