Introduction to JavaScript and jQuery

Introduction to JavaScript and jQuery

Год выпуска: February 12, 2012
Производитель: frontendmasters
производителя: frontendmasters/courses/introduction-to-javascript-jquery/
Автор: Karl Swedberg
Продолжительность: 3 hours, 34 min
Тип раздаваемого материала: Видеоклипы
Язык: Английский
Описание: Karl Swedberg, author of Learning jQuery (packtpub/web-development/learning-jquery-third-edition) and the jQuery API Documentation (api.jquery), teaches you what you need to know about the JavaScript language before diving into jQuery; including closures, anonymous functions, and implicit versus explicit iteration. If you missed out on a formal education on pure JavaScript, this workshop will help get you up to speed on the language. Karl also teaches on jQuery selectors in the last section of the course. Note: This course is still valuable, but has been superseded by our comprehensive, Introduction to Web Development course (frontendmasters/courses/web-development/).
Об : Эта тоже самое что и viewtopic.php?t=4663609 но только в лутчшем качестве. Можно теперь видеть, что автор пичатает в консоли.

Содержание
Table of Contents
Part 1: jQuery & History of DOM Scripting
History of jQuery

00:00:00 - 00:10:15
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

00:10:16 - 00:17:58
Benefits of jQuery
Karl’s story tells first-hand how jQuery allows you to progress quickly. He went from a beginner creating learningjquery, to eventually being contacted by a publisher to write the “Learning jQuery” book. o //learningjquery 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

00:17:59 - 00:24:18
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

00:24:19 - 00:30:12
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) o //modernizr Audience gives Karl a feature to research browser support with o //caniuse
Code Sharing

00:30:13 - 00:38:15
Code Sharing
Code sharing tools like jsbin and jsfiddle can be useful for quickly mocking something up or getting help over IRC and forums o //jsbin o //jsfiddle/ 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

00:38:16 - 00:49:27
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

00:49:28 - 00:56:12
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 issues
JavaScript Operators

00:56:13 - 01:02:11
JavaScript Operators
Conditionals, operators and logical operators like +, -, %, &&, ||, ', ', ==, !=, ===, etc Demo of == vs ===, 0 and empty string are “falsy” and not exactly false
Loops

01:02:12 - 01:12:19
Loops
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 and Arguments

01:12:20 - 01:17:32
Functions and Arguments
Functions - naming them, returning values and assigning returns arguments object to allow for unlimited arguments to be passed to a function
Coding Exercise

01:17:33 - 01:28:10
Coding 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-land
Named and Anonymous Functions

01:28:11 - 01: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
Objects

01:38:55 - 01:47:41
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
Additional Object Examples

01:47:42 - 01:54:39
Additional 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 literal
jQuery and JavaScript Loading

01:54:40 - 02:03:09
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.
JavaScript Loading and Execution Tips

02:03:10 - 02:10:32
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

02:10:33 - 02:18:40
Find something
Finding with jQuery using CSS selectors and explanation of selectors like + and ~ Attribute selectors [attr...], custom form selectors and misc selectors o //api.jquery/category/selectors/
Traversal methods: Up, Sideways, and Down

02:18:41 - 02:28:52
Traversal 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, find
Traversal methods: Filtering

02:28:53 - 02:37:19
Traversal 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

02:34:11 - 02:49:30
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-chil