Introduction to JavaScript and 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.

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.

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.

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 with

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.

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! :)

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 issues

Conditionals, operators and logical operators like +, -, %, &&, ||, >, <, ==, !=, ===, etc Demo of == vs ===, 0 and empty string are “falsy” and not exactly false

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 you

Functions - naming them, returning values and assigning returns arguments object to allow for unlimited arguments to be passed to a function

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-land

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 callback

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 example

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 literal

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.

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)

Finding with jQuery using CSS selectors and explanation of selectors like + and ~ Attribute selectors [attr...], custom form selectors and misc selectors

Moving up - parent and closest methods (with a note about usefulness of nextUntil) Moving sideways - siblings, next, prev Moving down - children, find

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)

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 why

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 chaining

Looping - implicit iteration vs explicit iteration using each this refers to current element

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

Karl says that the next workshop is “all jQuery all the time” Audience asks about putting all code in external script files and sharing variables from server side languages. Karl demos PHP json_encode to export variables to JavaScript Karl goes more in-depth into variable scoping, namespacing and using IFFEs Audience asks, “Where is jQuery going?” In terms of popularity over 50% of the top 10,000 websites use it (more than Flash). Karl breaks down version number usage and how jQuery team’s release cycle is getting faster and why old versions exist Audience asks if you break things when upgrading jQuery. Karl says there aren’t many breaking changes but with 3rd party plugins it can get tricky. He also explains how jQuery takes backwards compatibility very seriously