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)