Comprehensive JavaScript for Web 2.0 Development Training

Chapter 1. Introduction to JavaScript

• What JavaScript Is
• What JavaScript Is Not
• Not All JavaScripts are Created Equal ...
• ECMAScript Language and Specification
• What JavaScript Can Do
• What JavaScript Can't Do
• JavaScript on the Server-side
• Elements of JavaScript
• Values, Variables and Functions
• Embedded Scripts
• External Scripts
• Browser Dialog Boxes
• What is AJAX?
• Summary

Chapter 2. JavaScript Fundamentals

• Variables
• JavaScript Reserved Words
• Dynamic Types
• JavaScript Strings
• Escaping Control Characters
• What is False in JavaScript?
• Numbers
• The Number Object
• Not A Number (NaN) Reserved Keyword
• JavaScript Objects
• Operators
• Primitive Values vs Objects
• Flow Control
• 'if' Statement
• 'if…else' Statement
• 'switch' Statement
• 'for' Loop
• 'for / in' Loop
• 'while' Loop
• 'do…while' Loop
• Break and Continue
• Labeled Statements
• The undefined and null Keywords
• Checking for undefined and null
• Checking Types with typeof Operator
• Date Object
• Document Object
• Other Useful Objects
• Browser Object Detection
• The eval Function
• Enforcing Strict Mode
• Summary

Chapter 3. JavaScript DOM API

• What is DOM?
• Element Hierarchy
• DOM Standardization
• The Document Object
• Nodes and Elements
• The Element Object
• Element Event Handlers
• The window Object
• The Frame Object
• The History Object
• Summary

Chapter 4. JavaScript Functions

• Functions Defined
• Declaring Functions
• Function Arguments
• More on Function Arguments
• Return Values
• Multiple Return Values in ECMAScript 6
• Optional Default Parameter Values
• Emulating Optional Default Parameter Values
• Anonymous Function Expressions
• Functions as a Way to Create Private Scope
• Linking Functions to Page Elements
• Local and Global Variables
• Declaring Object Methods
• The arguments Parameter
• Example of Using arguments Parameter
• Summary

Chapter 5. JavaScript Arrays

• Arrays Defined
• Creating an Array
• The length Array Member
• Traversing an Array
• Appending to an Array
• Deleting Elements
• Inserting Elements
• Other Array Methods
• Accessing Objects as Arrays
• Summary

Chapter 6. Using Underscore JavaScript Library

• What is Underscore.js
• Why use Underscore.js?
• Underscore Functional Categories
• Functional Programming
• Imperative Programming in JavaScript
• The JavaScript Map Examples
• The Collections Category
• The filter Collections Function
• The countBy Collections Function
• The Arrays Category Functions
• The union Arrays Function
• The difference Arrays Function
• The Functions Category
• The delay Function
• The once Function
• The Objects Category Functions
• The keys Objects Category Function
• The Utility Category Functions
• The random Utility Function
• Underscore-contrib
• Using Underscore-contrib
• Summary

Chapter 7. Advanced Objects and Functionality in JavaScript

• Basic Objects
• Constructor Function
• More on the Constructor Function
• Object Properties
• Deleting a Property
• The instanceof Operator
• Object Properties
• Constructor and Instance Objects
• Constructor Level Properties
• Namespace
• Functions Are First-Class Objects
• Closures
• Closure Examples
• Private Variables with Closures
• Immediately Invoked Function Expression (IIFE)
• The Module Pattern
• Module Pattern Example
• Prototype
• Inheritance in JavaScript
• The Prototype Chain
• Traversing Prototype Property Hierarchy
• Prototype Chain
• Inheritance Using Prototype
• Extending Inherited Behavior
• Enhancing Constructors
• Improving Constructor Performance
• Inheritance with Object.create
• The hasOwnProperty Method
• Summary

Chapter 8. jQuery Overview

• What Is jQuery?
• Benefits of Using a JavaScript Library
• jQuery Example
• CSS Selectors
• How to Use jQuery
• Practical Usage Notes
• Background – DOM
• Background - DOM Ready Events
• Background - JavaScript Functions
• The jQuery Function Object
• What Does the $() Function Take as Argument?
• What Does the $() Function do?
• The jQuery Wrapper
• The jQuery Wrapper as an Array-Like Object
• Note: innerHTML() vs. .html()
• jQuery Wrapper Chaining
• API Function Notation
• Handling DOM Ready Event
• xhtml Note
• References
• Summary

Chapter 9. Selectors

• Background: The Sizzle Selector Engine
• Selecting Elements by Attribute
• Pseudo-Selectors
• Form Pseudo-Selectors
• Faster Selection
• Selecting Elements Using Relationships
• Selecting Elements Using Filters
• More on Chaining: .end()
• Testing Elements
• Is the Selection Empty?
• Saving Selections
• Iterating Through Selected Elements Using .each()
• JavaScript Methods
• JavaScript "this"
• Function Context
• The Function call() Method
• .each() Revisited
• Summary

Chapter 10. DOM Manipulation

• The $ Function Revisited
• Getters and Setters
• The text() Element Method
• Appending DOM Elements
• Removing DOM Elements
• Performance
• Summary

Chapter 11. Events

• Event Overview
• Old School: Event Handling Using HTML Element Attributes
• Unobtrusive JavaScript
• Unobtrusive JavaScript Example
• Multiple Handlers
• Using jQuery Wrapper Event Registration Methods
• The .on() Method
• Event Propagation
• Handlers for Elements Before They Exist!
• The Event Object
• Triggering Events
• Summary

Chapter 12. Utility Functions

• The jQuery Object Revisited
• Functions May Have Methods
• A jQuery Utility Function: $.trim()
• $.each()
• Example jQuery Utility Functions
• Summary

Chapter 13. Ajax

• Ajax Overview
• The Browser & the Server
• The Ajax Request
• The Ajax Response
• Sending an Ajax Request With jQuery - The General Case
• When this code is executed…
• Sending an Ajax Request With jQuery - Simpler, Typical Case
• Data Types
• The .data() method
• Summary

Chapter 14. The JavaScript Console and the console Object API

• JavaScript Console in Browsers
• Dev Tooling Support in Browsers
• The IE Web Dev Tools Console
• The Console API
• Coloring Your Output
• Using the time () / timeEnd () Console Commands
• Using the console.trace() Command
• Using the console.count() Console Command
• Using the console.assert() Console Command
• The console.assert() Console Command Example
• Summary

Chapter 15. Debugging JavaScript Code

• Why to Debug JavaScript Code?
• Debugging Tools in Browsers
• Chrome's DevTools
• The Debugging Controls on the Sources Panel
• Debugging Actions
• Additional Debugging Actions
• Selecting a JavaScript File To Debug
• Debugging Scenarios for Breakpoints
• Setting and Removing Breakpoints
• Information Available on a Breakpoint
• Toggling Breakpoints
• Other Ways to Manage Breakpoints
• Programmatic Control During Debug Pauses
• Breaking on Exceptions
• Other Debugging Techniques
• Breakpoints on JavaScript Event Listeners
• Supported Events
• Summary

Chapter 16. Exception Handling in JavaScript

• Exception Handling
• Try Syntax
• The Finally Block
• The Nested Try Blocks
• Exceptions Types in JavaScript
• The Throw Statement
• Using the Error Object
• Summary

Chapter 17. Testing JavaScript with Jasmine

• What Is Jasmine?
• Supported Integrations
• Jasmine in Standalone Mode
• Jasmine Folder Structure
• The Spec Runner Page
• Viewing Test Results
• Test Suites
• Specs (Unit Tests)
• Expectations (Assertions)
• Matchers
• More on Matchers
• Examples of Using Matchers
• Using the not Property
• Test Failures
• Setup and Teardown in Unit Test Suites
• Example of beforeEach and afterEach Functions
• Disabling Test Suites and Specs
• Method Stubbing and Call Tracking with Spies
• A Spy Example
• spyOn Setup Variations
• Simulating Exceptions
• Asynchronous Calls
• Summary

Chapter 18. JavaScript Performance and Best Practices

• Leverage Modern JavaScript Libraries
• Loading Scripts
• JavaScript Code Minification
• Use JavaScript Style Guides
• Examples of JavaScript Rules and Style Guides Suggestions
• Avoid Global Variables, Use Proper Scopes
• Some Subtle Problems with Var
• The Block Scope with ECMAScript 6 Let
• Use Proper Scoping for Better Performance
• Example of Scoping
• Speeding up Programs with Proper Variable Scoping
• Cache Properties Accessed More Than Once
• Go Asynchronous
• Leverage HTML5 Web Workers
• Prefer Literals to Constructors
• Avoid Using eval()
• Performance Optimization Considerations
• Performance Profiling
• JavaScript Program Profilers in Browsers
• The IE Profiler
• IE Code Execution Profiler
• IE Memory Allocation Profiler
• Chrome Profiler
• Firebug with Firefox
• Clean-up Your Code
• Things a JavaScript Lint Normally Checks
• Use Strict Mode
• Use JOIN for Concatenation
• Equal or Not Equal
• Summary

Chapter 19. Test Automation and Continuous Integration Systems for JavaScript

• Continuous Integration, Build and Test Automation
• What is Node.js
• Node Package Manager
• What is Grunt
• Excerpt from Gruntfile.js
• Installing Grunt
• What is Bower
• Installing Packages in Bower
• What is Karma
• How Karma Works
• Working with Browser Launchers
• Setting Up Path to Browser Binaries
• TeamCity Build Management System
• TeamCity Overview
• Summary

Chapter 20. Introduction to AngularJS

• What is AngularJS?
• Why AngularJS?
• Scope and Goal of AngularJS
• Using AngularJS
• A Very Simple AngularJS Application
• Building Blocks of an AngularJS Application
• Use of Model View Controller (MVC) Pattern
• A Simple MVC Application
• The View
• The Controller
• Data Binding
• Basics of Dependency Injection (DI)
• Other Client Side MVC Frameworks
• Summary

Chapter 21. AngularJS Module

• What is a Module?
• Benefits of Having Modules
• Life Cycle of a Module
• The Configuration Phase
• The Run Phase
• Module Wide Data Using Value
• Module Wide Data Using Constant
• Module Dependency
• Using Multiple Modules in a Page
• Summary

Chapter 22. AngularJS Controllers

• Controller Main Responsibilities
• About Constructor and Factory Functions
• Defining a Controller
• Using the Controller
• Controller Constructor Function
• More About Scope
• Example Scope Hierarchy
• Using Scope Hierarchy
• Modifying Objects in Parent Scope
• Modified Parent Scope in DOM
• Handling Events
• Another Example for Event Handling
• Storing Model in Instance Property
• Summary

Chapter 23. AngularJS Expressions

• Expressions
• Operations Supported in Expressions
• AngularJS Expressions vs JavaScript Expressions
• AngularJS Expressions are Safe to Use!
• What Is Missing in Expressions
• Considerations for Using src and href Attributes in Angular
• Examples of ng-src and ng-href Directives
• Summary

Chapter 24. Basic View Directives

• Introduction to AngularJS Directives
• Controlling Element Visibility
• Adding and Removing an Element
• Dynamically Changing Style Class
• The ng-class Directive
• Example Use of ng-class
• Setting Image Source
• Setting Hyperlink Dynamically
• Preventing Initial Flash
• Summary

Chapter 25. Advanced View Directives

• The ng-repeat Directive
• Example Use of ng-repeat
• Dynamically Adding Items
• Special Properties
• Example: Using the $index Property
• Scope and Iteration
• Event Handling in Iterated Elements
• The ng-switch Directive
• Example Use of ng-switch
• Inserting External Template using ng-include
• Summary

Chapter 26. Working with Forms

• Forms and AngularJS
• Scope and Data Binding
• Role of a Form
• Using Input Text Box
• Using Radio Buttons
• Using Checkbox
• Using Checkbox - Advanced
• Using Select
• Using Select – Advanced
• Disabling an Input
• Reacting to Model Changes in a Declarative Way
• Example of Using the ng-change Directive
• Summary

Chapter 27. Formatting Data with Filters in AngularJS

• What Are AngularJS Filters?
• The Filter Syntax
• Angular Filters
• Using Filters in JavaScript
• Using Filters
• A More Complex Example
• The date Filter
• The date's format Parameter
• Examples of Using the date Filter
• The limitTo Filter
• Using limitTo Filter
• The 'filter' Filter
• Filter Performance Considerations
• Summary

Chapter 28. AngularJS $watch Scope Function

• The $watch Function
• The $watch Function Signature
• The $watch Function Details
• Canceling the Watch Action
• Example of Using $watch
• Items of Note
• More Items of Note
• Performance Considerations
• Summary

Chapter 29. Communicating with Web Servers

• The $http AngularJS Service
• The Promise Interface
• The $http Service
• Using $http Service
• Shortcut Functions
• Complete List of Shortcut Functions
• Using $http.get()
• Using $http.post()
• Combining $http POST Request Data with URL Parameters
• Direct $http Function Invocation
• Request Configuration Properties
• Setting Up HTTP Request Headers
• Caching Responses
• Disabling Caching in IE9
• Setting the Request Timeout
• The then() Function of the Promise Object
• The Response Object
• Working with JSON Response
• Using success() and error() For Callbacks
• Making Parallel Web Service Calls
• Combining Multiple Promises into One
• Wait for the Combined Promise
• Summary

Chapter 30. Custom Directives

• What are Directives?
• Directive Usage Types
• Directive Naming Convention
• Defining a Custom Directive
• Using the Directive
• Scope of a Directive
• Isolating Scope
• Creating a Scope for the Directive
• Copying Data to a Directive's Scope
• Using External Template File
• Manipulating a DOM Element
• The Link Function
• Event Handling from a Link Function
• Wrapping Other Elements
• Accepting a Callback Function
• Supplying Callback Function
• Supplying Argument to Callback
• Summary

Chapter 31. AngularJS Services

• Introduction to Services
• Defining a Service
• The factory() Method Approach
• The service() Method Approach
• Using a Service
• The provider() Method Approach
• About Configuring a Service using its Provider
• Configuring a Service using its Provider
• Summary

Chapter 32. Unit Testing AngularJS Code

• Introduction
• The ngMock Module
• Creating the Spec Runner HTML
• Testing a Service
• Unit Test Specification for a Service
• Better Injected Variable Names
• Testing a Controller
• Unit Test Specification for a Controller
• Testing a "this" Based Controller
• End-to-End Testing with Protractor
• Installing Protractor
• Testing a Web Page
• How the Page Works
• Write a Simple Test Specification
• Create a Configuration File
• Run the Test
• Locating Elements by AngularJS Model
• Locating Elements by Binding
• Sending User Input
• Summary

Lab Exercises

Lab 1. Intro to JavaScript
Lab 2. Basic JavaScript Syntax
Lab 3. JavaScript Functions
Lab 4. Arrays in JavaScript
Lab 5. Using the Underscore JavaScript Library
Lab 6. Objects in JavaScript
Lab 7. Getting Started with jQuery
Lab 8. More on Selectors
Lab 9. Dynamic Style Class Assignment
Lab 10. DOM Manipulation
Lab 11. Form Event Handling
Lab 12. Basic Ajax
Lab 13. The JavaScript Console and the console Object API
Lab 14. Debugging JavaScript Programs
Lab 15. Exception Handling in JavaScript
Lab 16. Testing JavaScript with Jasmine
Lab 17. JavaScript Performance Profiling
Lab 18. Setting Up the Lab Environment
Lab 19. Getting Started with AngularJS
Lab 20. MVC with AngularJS
Lab 21. AngularJS Expressions
Lab 22. Working with Class and Style Directives
Lab 23. The ng-repeat Directive
Lab 24. Working with Form Inputs
Lab 25. Data Formatting with Filters
Lab 26. Using the $watch Function
Lab 27. Communicating with Web Servers
Lab 28. Reading Complex Data Sets From Web Servers
Lab 29. Custom Directives
Lab 30. Creating and Using Services
Lab 31. Testing