Comprehensive JavaScript for Web 2.0 Development Training
CLASS DATE(s):
8/17/2020 - 8/21/2020
10/19/2020 - 10/23/2020

COURSE LENGTH: 5 Days

COURSE COST: $2495.00

COURSE TIMES: 9:00am - 4:30pm

Printable version of this course
print
Register for this course
register

COURSE OVERVIEW

JavaScript is the Lingua Franca of the front-end Web development. In order to support agile business requirements for the "Next Generation" Web, developers need to be intimately familiar with JavaScript's capabilities and best practices.

OBJECTIVES

This intensive training course covers both theoretical and technical aspects of Modern Web (Web 2.0) development using JavaScript. At the end of the course, attendees will have solid understanding of the JavaScript programming language facilities, its best practices and techniques as well as its alignment with the needs of dynamic and visually appealing web pages.

The course is supplemented by hands-on labs that help attendees reinforce their theoretical knowledge of the learned material.

AUDIENCE AND PREREQUISITES

Web Designers and Developers

Participants should have the general knowledge of the front-end Web development

  

*Course Cost listed does not include the cost of courseware or exam. Course is subject to a minimum enrollment to run. Course may run virtually as a Virtual Instructor-Led (VILT) class if the minimum enrollment is not met. If the course is under the minimum enrollment the course may run as 4 day class (Bootcamp Style). For more information, please contact learn@vtec.org or call 207-775-0244.

COURSE TOPICS:


TOPICS
JavaScript fundamentals
Unobtrusive JavaScript programming techniques
Working with various popular JavaScript libraries (Underscore, AngularJS, jQuery, etc.)
AJAX
Testing JavaScript
JavaScript performance
JavaScript best practices

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?

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

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

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

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

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

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,

Advanced Objects and Functionality in JavaScript.. Cont'd
Improving Constructor Performance
Inheritance with Object.create
The hasOwnProperty Method

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

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

DOM Manipulation
The $ Function Revisited
Getters and Setters
The text() Element Method
Appending DOM ElementsRemoving DOM Elements
Performance

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

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

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

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 console.trace() Command
Using the console.count() Console Command
Using the console.assert() Console Command
The console.assert() Console Command Example

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

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

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

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

JavaScript Performance and Best Practices - Cont'd
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

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

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

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

.
Lesson 22. AngularJS Controllers
Lesson 23. AngularJS Expressions
Lesson 24. Basic View Directives
Lesson 25. Advanced View Directives
Lesson 26. Working with Forms
Lesson 27. Formatting Data with Filters in AngularJS
Lesson 28. AngularJS $watch Scope Function
Lesson 29. Communicating with Web Servers
Lesson 30. Custom Directives
Lesson 31. AngularJS Services
Lesson 32. Unit Testing AngularJS Code