Course Catalog  > Web and Mobile Development  > JavaScript
WA2442

Introduction to JavaScript Training

This intensive training course covers both theoretical and technical aspects of front-end development using JavaScript. At the end of the course, attendees will have solid understanding of the JavaScript programming language, as well as testing and debugging of JavaScript programs.
Request Information
Request On-Site or Customized Course Info
Course Details

Duration

3 days

Prerequisites

Participants should have the general knowledge of the front-end web development.

Target Audience

Web Designers and Developers

Skills Gained

  • JavaScript fundamentals
  • Working with various popular JavaScript libraries (Underscore, jQuery, etc.)
  • AJAX
  • Testing JavaScript
  • JavaScript performance
  • JavaScript best practices
Course Outline
  • Introduction to JavaScript
    • What JavaScript Is
    • 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
    • Network Communication
  • JavaScript Variables and Data Types
    • Variables
    • JavaScript Reserved Words
    • Dynamic Types
    • JavaScript Strings
    • Escaping Control Characters
    • Template Literals
    • What is False in JavaScript?
    • Numbers
    • The Number Object
    • Not A Number (NaN) Reserved Keyword
    • JavaScript Objects
    • Date Object
    • Other Useful Objects
    • Primitive Values vs Objects
    • Primitive Values vs Objects
  • JavaScript Arrays
    • Arrays Defined
    • Creating an Array
    • The length Array Member
    • Traversing an Array
    • Appending to an Array
    • Deleting Elements
    • Inserting Elements
    • Returning Item Index Position
    • toString() and join()
    • Array Sort Method
    • Array Filter Method
    • Array Map Method
    • Array 'Spread' Operator
    • Destructuring
    • Accessing Objects as Arrays
  • JavaScript Operators and Control Structures
    • Operators
    • 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
  • JavaScript Functions
    • Functions Defined
    • Declaring Functions
    • Function Arguments
    • More on Function Arguments
    • Return Values
    • Multiple Return Values
    • Default Parameter Values
    • REST Parameters
    • Anonymous Function Expressions
    • Functions as a Way to Create Private Scope
    • Linking Functions to Events
    • Common DOM Events
    • Local and Global Variables
    • Local and Global Variables
    • Arrow Functions
    • Arrow Functions As Parameters
    • Using 'this' Within Arrow Functions
  • Objects in JavaScript
    • JSON Objects
    • Adding Properties
    • Looping Through Objects
    • JSON Objects as Strings
    • Adding Methods
    • The Class Keyword
    • Creating Class Instances
    • Object Context: 'this'
    • Inheritance With Classes
    • Undefined Properties
    • Deleting a Property
    • The instanceof Operator
    • The typeof operator
    • Object 'Spread' Operator
    • Functions Are First-Class Objects
    • Closures
    • Closure Examples
    • Private Variables with Closures
    • Immediately Invoked Function Expression (IIFE)
  • JavaScript in the Browser
    • Embedded Scripts
    • External Scripts
    • Browser Object Detection
    • Enforcing Strict Mode
    • Page Rendering in the Browser
    • JavaScript Code
    • Topics
    • What is DOM?
    • DOM Objects
    • The window Object
    • window Lifecycle Methods
    • The history Object
    • The document
    • document Properties
    • Nodes and Elements
    • getElement Methods
    • querySelector Methods
    • querySelector Example
    • Some Element Properties
    • Element Methods
    • Handling Element Events
    • Element Events
    • Network Requests with XMLHttpRequest
    • Network Requests with Fetch
  • The JavaScript Console and the console Object API
    • JavaScript Console in Browsers
    • Dev Tooling Support in Browsers
    • The Developer 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
  • 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
  • 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 Jest
    • Jest Testing Framework
    • Features
    • Installation of Jest
    • A Basic Test
    • Run Test
    • Test Failures
    • Interactive Mode
    • Code Coverage
    • Unit Testing
    • Anatomy of a Unit Test
    • Expectations (Assertions)
    • Common Matchers
    • Combining Tests
    • Testing async code with done
    • Testing Promise Based Async Code
    • Setup and Teardown
    • Setup and Teardown Example
    • Method Stubbing and Call Tracking with Spies
    • A Spy Example
    • spyOn Setup Variations
    • Simulating Exceptions
  • 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
    • 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
    • Continuous Integration/ Delivery Tools
    • TeamCity Build Management System
    • TeamCity Overview
  • NodeJS Introduction
    • What is Node.js?
    • Uses for Node.js
    • Installing Node.js and NPM
    • “Hello, Node App”
    • \"Hello, Node Server\"
    • Node Package Manager (NPM)
    • Common NPM Commands
    • Package Descriptor File - package.json
    • Semantic Version Numbering
    • Updating Packages
    • Uninstalling Packages
  • Asynchronous Programming with Callbacks
    • Synchronous and Asynchronous
    • Callbacks
    • Creating a Callback Function
    • Calling The Callback Function
    • Callback - Another Example
    • Issue with 'this' Keyword in Callback Functions
    • Handling this Problem
    • Handling this Problem – Method 1 (Storing in Another Variable)
    • Handling this Problem – Method 2 (Using Bind Function)
    • Handling this Problem – Method 3 (Using ES6 Arrow Functions)
    • Error Handling without Callback
    • Error Handling with Callback
    • Asynchronous Callback
    • setImmediate() and nextTick()
    • API Example
  • Asynchronous Programming with Promises
    • The Problems with Callbacks
    • Introduction to Promises
    • Requirements for Using Promises
    • Creating Promises Manually
    • Calling the Promise-based Function
    • Making APIs that support both callbacks and promises
    • Using APIs that support both callbacks and promises
    • Chaining then Method / Returning a Value or a Promise from then Method
    • Promisifying Callbacks with Bluebird
    • Using Bluebird
    • Bluebird – List of Useful Functions
    • Benefit of using Bluebird over ES6 for Promisification
    • Error Handling in Promise-based asynchronous functions
  • Lab Exercise
    • Lab 1. Intro to JavaScript
    • Lab 2. Basic JavaScript Syntax
    • Lab 3. Arrays in JavaScript
    • Lab 4. JavaScript Functions
    • Lab 5. Objects in JavaScript
    • Lab 6. The JavaScript Console and the console Object API
    • Lab 7. Debugging JavaScript Programs
    • Lab 8. Exception Handling in JavaScript
    • Lab 9. Testing JavaScript with Jest
    • Lab 10. JavaScript Performance Profiling
    • Lab 11. Getting Started With Node.js
    • Lab 12. Asynchronous Programming with Callbacks
    • Lab 13. Asynchronous Programming with Promises