Karl Swedberg: Intro to JavaScript & jquery 0:00:00 0:05:00 0:05:01 0:10:15 0:10:16 0:12:36 0:12:37 0:13:32 0:13:32 0:14:16 0:14:17 0:15:42 0:15:43 0:16:59 0:17:00 0:17:58 Part 1: jquery & History of DOM Scripting Benefits of Using jquery (and Karl s Story) 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 http://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 How jquery pioneered unobtrusive JavaScript Example of DOM Scripting vs using jquery to get the viewport dimensions Where to get help and support with jquery 0:17:59 0:18:39 0:18:40 0:19:18 0:19:19 0:21:09 0:21:10 0:24:18 Core Concepts of jquery Find something, do something Why jquery uses the $ character as it s 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 excels at 0:24:19 0:26:14 0:26:15 0:28:33 Part 2: Developer Tools Debbuggers, Libraries, Code Sharing Introduction, pain of testing in multiple browsers http://modernizr.com Use Modernizr for feature testing and polyfills (i.e. backfill canvas support with VML) 1
0:29:01 0:30:12 0:30:13 0:32:51 0:32:52 0:38:15 0:38:16 0:42:35 0:42:36 0:45:47 0:45:48 0:46:39 0:47:00 0:48:11 0:48:12 0:49:27 http://caniuse.com 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! :) 0:49:28 0:54:17 0:54:18 0:56:12 0:56:13 0:38:15 0:58:28 1:02:11 1:02:12 1:04:54 1:04:55 1:10:50 1:10:51 1:11:36 1:11:37 1:12:19 1:12:20 1:15:26 1:15:27 1:17:32 1:17:33 1:18:13 Part 3: Bare-bones JavaScript Basic Working Knowledge of the Language 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!* 2
1:18:14 1:25:31 1:25:32 1:27:48 1:27:49 1:28:10 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 familar to you in jquery-land 1:28:11 1:29:45 1:29:46 1:32:14 1:32:15 1:34:57 1:34:58 1:35:45 1:35:46 1:37:43 1:37:44 1:38:54 Named 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 callback 1:38:55 1:39:10 1:39:11 1:39:51 1:39:52 1:39:57 1:39:58 1:40:48 1:40:49 1:40:55 1:40:56 1:41:28 1:40:29 1:42:12 1:42:13 1:43:39 1:43:40 1:47:41 1:47:42 1:49:38 1:49:49 1:50:39 Objects 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 3
1:50:40 1:52:05 1:52:07 1:54:39 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 1:54:40 2:00:04 2:00:05 2:03:09 2:03:10 2:09:18 2:09:19 2:10:32 2:10:33 2:10:32 jquery 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. 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) 2:10:33 2:16:36 2:16:37 2:18:40 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 selectors http://api.jquery.com/category/selectors/ 2:18:41 2:24:18 2:24:19 2:25:56 2:25:57 2:28:52 2:28:53 2:34:10 2:34:11 2:36:48 2:36:49 2:37:19 2:36:49 2:25:07 Traversal methods Moving up - parent and closest methods (with a note about usefullness 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 2:52:08 2:37:19 Chaining and Looping JavaScript itself has chaining. Examples with replace, split and join methods. 4
2:54:26 2:56:01 2:56:02 3:00:47 3:00:48 3:04:22 3:04:23 3:06:18 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 3:06:19 3:07:32 3:07:34 3:11:07 3:11:08 3:13:36 3:13:37 3:15:10 jquery Selecting Tips Store selectors in variable for later use (can prefix variables with $ to idenify it as a jquery collection) Use.length to check if something exists, but often times you don t need to because jquery operates on on empty collections without throwing an error Avoid custom selectors (slow) and alternatives Selector methods like first, eq, and slice are better than psuedo selectors like :first 3:15:11 3:16:01 3:16:02 3:32:07 3:32:08 3:28:35 3:28:36 3:32:35 3:32:36 3:35:52 Part 5: Q & A Open questions with Karl 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 5