This course is out of date and does not reflect our standards or industry best practices. We now recommend you take the Complete Intro to Web Development, v3 course.
Table of Contents
Part 1: jQuery & History of DOM Scripting
History of jQuery
Introduction to Karl and his contributions to the jQuery Project What is DOM Scripting and book recommendations. Karl explains how painful DOM Scripting was to do in the past which gave birth to jQuery (and other DOM Scripting libraries). He also gives us an example of feature testing.Benefits of jQuery
Karl’s story tells first-hand how jQuery allows you to progress quickly. He went from a beginner creating learningjquery.com, to eventually being contacted by a publisher to write the “Learning jQuery” book. jQuery’s core developers spend a lot of time fixing browser inconsistencies which helps improve your efficiency as a developer. Excellent documentation for jQuery and Karl hints at a new jQuery learning site. jQuery pioneered unobtrusive JavaScript. Example of DOM Scripting vs. using jQuery to get the viewport dimensions Where to get help and support with jQuery.Core Concepts of jQuery
Find something, do something Why jQuery uses the $ character as its main function. Overview of the $() Function, passing a selector string into this main function creates an “array-like” collection of elements. What you can do with jQuery and what it does best.
Part 2: Developer Tools
Browser Support
Introduction and the pain of testing in multiple browsers Use Modernizr for feature testing and polyfills (i.e. backfill canvas support with VML) Audience gives Karl a feature to research browser support withCode Sharing
Code sharing tools like jsbin and jsfiddle can be useful for quickly mocking something up or getting help over IRC and forums TextMate can be enhanced with bundles and Karl demos a few he finds helpful. He also lists a few popular code editors for both Mac and PC.Developer Tools
Firefox Firebug and Chrome Developer Tools Karl demos some of his favorite Chrome Dev. Tools tricks ($0, color format, keyboard shortcuts, save to css file, etc) Enabling Safari Developer Menu IE8+ (F12) Developer Tools and options for IE7 and lower *bonus info* Karl’s favorite compliment! :)
Part 3: Bare-bones JavaScript
Data Types and Variables
JavaScript primitives: Strings (quotes), Numbers, Booleans, Arrays and Objects...covers a few things to note about Arrays like: index starts at 0 (unlike nth-child in CSS which starts at 1), mixing types in arrays and nesting arrays JavaScript variables - making sure to declare them because of scoping issuesJavaScript Operators
Conditionals, operators and logical operators like +, -, %, &&, ||, >, <, ==, !=, ===, etc Demo of == vs ===, 0 and empty string are “falsy” and not exactly falseLoops
JavaScript loops use explicit iterations vs CSS uses implicit iteration but jQuery allows for both. List of types of loops Breaking-down for loops and examples of a few different ways to use them For-in loops for iterating through keys in objects While and do-while loops and how they don’t iterate for youFunctions and Arguments
Functions - naming them, returning values and assigning returns arguments object to allow for unlimited arguments to be passed to a functionCoding Exercise
Exercise (using arguments and for loop). *Try coding the answer!* Live coding of answer using arguments, += and a for loop Audience throws a wrench into Karl’s answer by passing in a string number and Karl shows how to solve it using parseFloat. These basics should be familiar to you in jQuery-landNamed and Anonymous Functions
Returning functions (multiplication example) Named vs. Anonymous functions List of uses for anonymous functions and code example using named function vs. anonymous in as a callback Audience asks, “Do elements have a .ready?” Karl says “no” but explains about load Using immediately invoked function expressions (aka IFFE pronounced “iffy”) for protecting variable scope Using anonymous functions as a callbackObjects
In JavaScript nearly everything is an object window is a global object and list of some of it’s useful properties and methods Date object and it’s methods RegExp object constructor vs. expression literal Math object (slide with list of Math functions) Similarities between object literals and CSS rules Functions and objects can be properties of objects Leaving trailing commas in your objects causes bugs in IE Using dot and array notations to access properties in objects and exampleAdditional Object Examples
Example of using array notation with passing in a string variable Advanced example of iterating through an object and using dot notation Using objects as a single argument to pass in multiple options (like with jQuery plugins) JSON (JavaScript Object Notation) as a subset of the object literaljQuery and JavaScript Loading
Referencing scripts in HTML, loading jQuery locally or from a CDN. Performance considerations for script loading $(document).ready() vs $(window).load() - when to use (or not use) each method.JavaScript Loading and Execution Tips
Tips on executing JavaScript before $(document).ready like in the case of immediate ajax calls and avoiding the dreaded flash of unstyled content Script loaders for loading scripts asynchronously Script placement and execution (demo)
Part 4: jQuery Selectors and Traversal
Find something
Finding with jQuery using CSS selectors and explanation of selectors like + and ~ Attribute selectors [attr...], custom form selectors and misc selectorsTraversal methods: Up, Sideways, and Down
Moving up - parent and closest methods (with a note about usefulness of nextUntil) Moving sideways - siblings, next, prev Moving down - children, findTraversal methods: Filtering
Filtering - filter (with selector or function), not, slice (code demo), eq Context - second param in jQuery (Karl recommends just using find), add, andSelf, end Check - hasClass, is (returns boolean)Demonstration of traversal methods
Demos of traversal with next, nextUntil (also Karl fixes his demo), nth-child, firstchild, last-child, last, eq. Audience asks if nth-child works in IE through jQuery. Karl answers “yes” and explains whyChaining
JavaScript itself has chaining. Examples with replace, split and join methods. Chaining traversal methods returns new jQuery collection Using the end method to step back through collections and strategies for chainingLooping
Looping - implicit iteration vs explicit iteration using each this refers to current elementjQuery Selecting Tips
Store selectors in variable for later use (can prefix variables with $ to identify it as a jQuery collection) Use .length to check if something exists, but often times you don’t need to because jQuery operates on empty collections without throwing an error Avoid custom selectors (slow) and alternatives Selector methods like first, eq, and slice are better than pseudo selectors like :first