Key Points

September 2018: This material is under very active development, and should all be considered the "brainstorming" phase of a rational lesson design process. We would appreciate your help: please email us, file an issue in our GitHub repository, or submit a pull request. (We would particularly appreciate descriptions of common errors and how to fix them.) Everyone whose work is incorporated will be acknowledged; please note that all contributors are required to abide by our Code of Conduct.


  • Modern JavaScript is a good tool for building desktop and web-based applications.
  • This course is for people who know what loops and functions are, but have never used JavaScript or built web applications.

Core Features

  • Use console.log to print messages.
  • Use dotted notation X.Y to get part Y of object X.
  • Basic data types are Booleans, numbers, and character strings.
  • Ararys store multiple values in order.
  • The special values null and undefined mean ‘no value’ and ‘does not exist’.
  • Define constants with const and variables with let.
  • typeof returns the type of a value.
  • for (let variable of collection) {...} iterates through the values in an array.
  • if (condition) {...} else {...} conditionally executes some code.
  • false, 0, the empty string, null, and undefined are false; everything else is true.
  • Use back quotes and ${...} to interpolate values into strings.
  • An object is a collection of name/value pairs written in `{…}.
  • object[key] or object.key gets a value from an object.
  • Functions are objects that can be assigned to variables, stored in lists, etc.
  • function (...parameters...) {...body...} is the old way to define a function.
  • name = (...parameters...) => {...body...} is the new way to define a function.
  • Use return inside a function body to return a value at any point.
  • Use modules to divide code between multiple files for re-use.
  • Assign to module.exports to specify what a module exports.
  • require(...path...) imports a module.
  • Paths beginning with ‘.’ or ‘/’ are imported locally, but paths without ‘.’ or ‘/’ look in the library.


  • JavaScript stores the instructions making up a function in memory like any other object.
  • Function objects can be assigned to variables, put in lists, passed as arguments to other functions, etc.
  • Functions can be defined in place without ever being given a name.
  • A callback function is one that is passed in to another function for it to execute at a particular moment.
  • Functional programming uses higher-order functions on immutable data.
  • Array.some is true if any element in an array passes a test, while Array.every is true if they all do.
  • Array.filter selects elements of an array that pass a test.
  • creates a new array by transforming values in an existing one.
  • Array.reduce reduces an array to a single value.
  • A closure is a set of variables captured during the definition of a function.

Objects and Classes

  • Create classes to define combinations of data and behavior.
  • Use the class’s constructor to initialize objects.
  • this refers to the current object.
  • Use polymorphism to express common behavior patterns.
  • Extend existing classes to create new ones-sometimes.
  • Override methods to change or extend their behavior.
  • Creating extensible systems by defining interfaces and protocols.


  • HTML is the latest in a long line of markup languages.
  • HTML documents contain elements (represented by tags in angle brackets) and text.
  • Elements must be strictly nested.
  • Elements can contain attributes.
  • Use escape sequences beginning with ampersand to represent special characters.
  • Every page should have one html element containing a head and a body.
  • Use <!--...--> to include comments in HTML.
  • Use ul and ol for unordered and ordered lists, and li for list elements.
  • Use table for tables, tr for rows, th for headings, and td for regular data.
  • Use <a href="...">...</a> to create links.
  • Use <img src="..." alt="..." /> to include images.
  • Use CSS to define appearance of elements.
  • Use class and id to identify elements.
  • Use selectors to specify the elements that CSS applies to.


  • JavaScript keeps an execution queue for delayed computations.
  • Use promises to manage delayed computation instead of raw callbacks.
  • Use a callback with two arguments to handle successful completion (resolve) and unsuccessful completion (reject) of a promise.
  • Use then to express the next step after successful completion and catch to handle errors.
  • Use Promise.all to wait for all promises in a list to complete and Promise.race to wait for the first promise in a set to complete.
  • Use await to wait for the result of a computation.
  • Mark functions that can be waited on with async.

Static Pages

  • Older dynamic web sites generated pages on the server.
  • Newer dynamic web sites generate pages in the client.
  • React is a JavaScript library for client-side page generation that represents HTML elements as function calls.
  • React replaces page elements with dynamically-generated content in memory (not on disk).
  • React functions can be customized with elements.
  • JSX translates HTML into React function calls so that HTML and JavaScript can be mixed freely.
  • Use Babel to translate JSX into JavaScript in the browser.
  • Define new React components with a pseudo-HTML element and a corresponding function.
  • Attributes to pseudo-HTML are passed to the JavaScript function as a props object.

Interactive Sites

  • Define event handlers to specify what actions the browser should take when the user interacts with an application.
  • The browser passes event objects containing details of events to event handlers.
  • Use classes to keep state and event handlers together.
  • React calls a class’s render to display it.
  • Separate models (which store data) from views (which display it).
  • Use fetch to get data from servers.
  • Use destructuring to get individual members from an object in a single step.
  • Modern JavaScript uses promises to manage asynchronous activities.

Data Services

  • An HTTP request or response consists of a plain-text header and an optional body.
  • HTTP is a stateless protocol.
  • Express provides a simple path-based JavaScript server.
  • Write callback functions to handle requests matching specified paths.
  • Provide a default handler for unrecognized requests.
  • Use Content-Type to specify the type of data being returned.
  • Use dynamic loading to support plugin extensions.


  • A unit test checks the behavior of one software component in isolation.
  • The result of a unit test can be pass, fail, or error.
  • Use Mocha to write and run unit tests in JavaScript.
  • Put assertions in unit tests to check results.
  • Combine tests in suites for easier management.
  • Divide modules into interactive and non-interactive parts for easier testing.
  • Use supertest to simulate interaction with a server for testing.
  • HTML is represented in memory using the Document Object Model (DOM).
  • Check the structure of the DOM rather than the textual representation of the HTML when testing.

Using a Database

  • Relational databases store data in tables made up of fields (columns) and records (rows).
  • Programs interact with relational databases using SQL queries.
  • Non-relational databases store data as JSON-like data structures.
  • Basic SQL queries select and filter data.
  • JavaScript programs send SQL queries to a database and get the results as a list of lists.
  • Using an in-memory database to make tests faster and ensure that they are isolated.
  • Use callbacks to handle the results of queries.

Visualizing Data

  • D3 is a toolkit for building data visualizations.
  • Vega-Lite is a much simpler way to build common visualizations.

Capstone Project

  • Use slices of actual data to test applications.
  • Test summaries and small cases so that results can be checked by hand.
  • Store state in a class, use pure functions to display it.