JavaScript Fundamentals

An intensive 4-day introduction to front-end JavaScript development

Overview

This course enables delegates to use JavaScript as their primary language within the development of single page web applications that interact with RESTful services. There is extensive coverage of both the object-oriented and functional aspects of JavaScript, and in particular how the two can be used to compliment one another. Throughout the course delegates learn the best practices for applying each language feature, as well as the numerous pitfalls and anti-patterns to be avoided.

The duration of the course and depth of material covered can be adjusted based on the audience. For junior developers the course is delivered over 4 days and has a strong focus on basic concepts. For senior developers the course can be delivered over 3 days and will include extra detail on how to make the most of JavaScripts functional features.

By default the course uses Chrome for all the examples and exercises.

Outline

Introduction to JavaScript

  • How JavaScript began and grew in respectability
  • JavaScript as the ‘assembly language of the web’
  • Features supported in different versions of JavaScript
  • Cross-browser issues and JavaScript frameworks
  • The relationship between Java and JavaScript
  • CoffeeScript as a better syntax for JavaScript
  • TypeScript as JavaScript with strong typing
  • Dart as a potential replacement for JavaScript
  • An overview of server-side coding with Node.js

Basic JavaScript Programming

  • The core JavaScript types and dynamic typing
  • Explicit and implicit variable declarations
  • Implicit conversions and the bugs they can cause
  • Minimizing your programs use of global variables
  • Using typeof and instanceof to investigate types
  • The lack of block scope and ‘variable hoisting’
  • Understanding truth and equality in JavaScript
  • Making choices, basic iteration and the for…in loop
  • Manipulating strings and applying regular expressions
  • Working with single and multi-dimensional arrays
  • The difference between arrays and ‘array-like’ objects

Writing Functions in JavaScript Part 1

  • How and why functions are ‘first class citizens’
  • Four patterns of invocation for calling JavaScript functions
  • Understanding the binding of this in functions
  • Calling functions with fewer parameters or additional ones
  • Creating variadic functions using the arguments array
  • Passing functions as arguments into other functions
  • Building and returning functions from functions

Writing Functions in JavaScript Part 2

  • Using generated functions as closures
  • Why closures store references to outer variables
  • Subtle bugs caused by incorrect use of closures
  • Using nested functions as an encapsulation technique
  • What’s an ‘immediately invoked function expression’ (aka IIFE)?
  • How IIFE’s are used in the JavaScript Module Pattern
  • Understanding the Asynchronous Module Definition (AMD) spec

Functional Programming with ‘Underscore.js’

  • Using functions as the unit of composition
  • Replacing external iteration with each, filter and map
  • Producing a single value from a list via folds and reduction
  • Applying currying and partial application in JavaScript
  • Writing recursive functions and the Trampoline Principle

Object Orientation in JavaScript Part 1

  • Understanding the prototype based style of OO
  • Pros and cons of ‘monkey patching’ built in types
  • Declaring objects using the Object type
  • Declaring objects using the literal syntax
  • Declaring objects using constructor functions
  • Protecting against incorrect constructor invocation
  • Different options for accessing members of objects

Object Orientation in JavaScript Part 2

  • Implementing inheritance using the prototype chain
  • Distinguishing between owned and inherited properties
  • The difference between prototype and proto
  • Minimizing mutable state when designing JavaScript types
  • Applying the SOLID principles of OO design in JavaScript
  • GoF Design Patterns that are relevant in JavaScript

ECMAScript 2015 and Beyond

  • Writing modern JavaScript and retaining compatibility
  • How ECMAScript 2015 was a huge step forward
  • Modules and the import / export syntax
  • String interpolation / template literals
  • Block scope via ‘let’
  • Iterators, generators and the ‘for…of’ statement
  • New class syntax
  • Using the spread operator with functions and structures
  • New data structures - Maps and typed arrays
  • Intercepting object interaction with the Proxy type
  • Simplified anonymouse functions with arrow functions
  • Writing asynchronous code with Promises
  • The TC39 process and using non-standard features

Manipulating the DOM Tree

  • Making sense of the Document Object Model
  • Different options for locating nodes in the DOM
  • Adding, manipulating and removing nodes from the tree
  • The three supported models for handling DOM events
  • Finding and validating the content of form elements
  • Working with hidden form elements and cookies
  • Using timers to schedule code for execution
  • Asynchronous JavaScript in HTML5 using WebWorkers

Applying AJAX

  • How AJAX was invented and popularised
  • Creating an XHR object on different browsers
  • Sending requests to the server via the XHR object
  • The stages in the lifecycle of an XHR request
  • Using onreadystatechange to monitor the progress of a request
  • Adding extra headers and cookies to the request
  • Handing HTTP errors and enforcing timeouts

Communicating with RESTful Services

  • Introduction to the REST Architecture
  • The meaning of the different HTTP Verbs
  • ‘URL Templates’ and ‘Content Negotiation’
  • The limitations of using XML within JavaScript
  • An overview of the JSON formatting standard
  • Sending and receiving data from services via JSON
  • Writing a complete REST client with error handling

Requirements

  • Delegates should have previous programming experience (from university and/or industry) in one or more of Java, C#, C++, Perl, Python and Ruby.
  • It is recommended that delegates have access to ‘JavaScript The Good Parts’ for course preparation and follow up work. ‘Effective JavaScript’ by David Herman is also highly recommended.

Sign up and stay in the loop

Be the first to know about upcoming workshops, courses, talks and events

Learn more

A brilliant course, covered multiple areas of Javascript and highlighted the differences and alternatives between solutions as well as potential pitfalls/common bugs. Presented perfectly and the instructor made it very entertaining, informative and interactive. Would definitely recommend the course.