Key Points

Introduction

  • 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.
  • Node is a command-line interpreter for JavaScript, which can be used interactively or to run scripts in files.
  • NPM is the Node Package Manager, which can be used to find, install, and update libraries.

Basic 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.
  • Arrays 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.

Callbacks

  • 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.
  • Array.map 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 and CSS

  • 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="..." title="..." 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.

Manipulating Pages

  • Use a meta tag in a page’s header to specify the page’s character encoding.
  • Pages are represented in memory using a Document Object Model (DOM).
  • The document object represents the page a script is in.
  • Use the querySelectorAll method to find DOM nodes that match a condition.
  • Assign HTML text to a node’s innerHTML property to change the node’s content.
  • Use ((params) => {...})(arguments) to create and call a function in a single step.
  • An event listener is a function run by the browser when some specific event occurs.
  • Create an event listener for 'DOMContentLoaded' to trigger execution of scripts after the DOM has been constructed.
  • Check the nodeType or nodeName property of a DOM node to find out what kind of node it is.
  • Destructuring assignment allows us to assign to multiple variables by name in a single statement.
  • Use setTimeout to trigger execution of a function after a delay.
  • To make something run forever, have the function called by setTimeout set another timeout of the same function.

Dynamic 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.

Visualizing Data

  • Vega-Lite is a simple way to build common visualizations.
  • Vega-Lite is declarative: the user creates a data structure describing what they want, and the library creates the visualization.
  • A Vega-List specification contains a schema identifier, a description, data, marks, and encodings.
  • The overall layout of a Vega-Lite visualization can be controlled by setting options.
  • Some applications will use require for server-side code and import for client-side code.

Promises

  • 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.

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.

Managing Data

  • Small tabular datasets are commonly stored as Comma-Separated Values (CSV).
  • CSV can only represent regular data, and CSV files usually don’t include units.
  • Nested data is commonly stored using JavaScript Object Notation (JSON).
  • JSON representations of tabular data often include redundant (and therefore possibly inconsistent) specifications of column names.
  • PapaParse is a robust CSV parsing library that produces JSON output.

Creating a Server

  • 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.

Testing

  • 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.

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.

Conclusion

  • We have learned a lot.
  • Contributions are very welcome.