[Netscape, 1995] displayed Web pages that were not very lively. You could have a nice cartoon of a monkey on the Web page, but there was no way to make the monkey dance when you moved over it with your mouse. Figuring out how to make that happen was the job of a language developer named Brendan Eich. He sat down and in a few weeks created a language called JavaScript [...] as browsers proliferated and the Web grew from a document-delivery platform into a software-delivery platform, JavaScript became, arguably, the most widely deployed language runtime in the world. If you wrote some JavaScript code, you could run it wherever the Web was—everywhere.

Paul Ford, from What Is Code in Bloomberg Business (2015)

class examples

Core Concepts

There are loads of different programming languages out there, but they all basically do the same thing: allow you to write programs that get the computer to do what you want it to do. All programming languages contain the same core concepts (variables, functions, loops, conditional statements, etc) but they all have slightly different ways of expressing these concepts, which is to say, they all have different syntax and APIs. Although any solid programming language could be used for anything (whether you're creating a website, or an iPhone app, or a video game, or a robot) some languages have special features that make them better suited for certain contexts or tasks. Different languages also have different communities of developers writing libraries and frameworks for that language.

Although JavaScript is not the only programming language we can use on the Internet, it's definitely the most popular, which means there's a large community creating libraries, tutorials and answering questions online. Furthermore, although JavaScript can be used for everything from controlling robots to scripting PhotoShop, it was originally invented as a programming language for the Web specifically, and so it's obviously the natural choice for us.

Below you'll find a handful of netnet examples demonstrating the core programming concepts expressed in JavaScript...

the ingredients

If algorithms are like recipes, the data we store within variables are the ingredients

declaring variables
reassigning variables
simple data types
data structures: Arrays
data structures: Objects

the instructions

conditional statements, functions (sometimes called methods or routines) and loops are how we "control the flow" of the instructions that make up our algorithmic recipes

conditionals (if, else)
functions (aka methods)
loops (for, while)


The examples below build on the above notes to create dynamic HTML/CSS content. Web browsers have built in "APIs" (application programming interfaces) which are collections of variables and functions that we can use to do all sorts of things. There are browser APIs for generating sounds, for getting data from other servers (referred to as 3rd-party "REST APIs"), for creating 2D graphics and 3D graphics, for creating Virtual and Augmented reality and so much more.

The most fundamental of these browser APIs is likely the DOM (document object model) API. When the browser renders our HTML page, behind the scenes it also creates a JavaScript Object named "document" which represents our entire HTML page, with all it's HTML and CSS. This special "document" Object has all sorts of built in properties (internal variables) and methods (internal functions) that enable us to interact with the HTML/CSS content on our page. The examples below demonstrate some of what's possible with this API, but you can learn more at Mozilla's developer docs on the DOM.


The DOM (document object model) API is the most fundamental browser API, it's how we manipulate our page's HTML/CSS through JavaScript and forms the foundation of any web application.

the DOM basics
removing/replacing elements
creating/adding elements

DOM Events

"event-driven programming is a programming paradigm in which the flow of the program is determined by events such as user actions, sensor outputs, or message passing from other programs or threads", the DOM provides us with an API for doing just that in the browser.

click event (basic)
other events
the event object
keyboard events
multiple click events

DOM Animations

There are many ways to create animations beyond in the browser besides JavaScript, like SVG animations and CSS animations, but JavaScript is likely the most flexible and expressive ways to approach generative/interactive animations in the browser. The following examples demonstrate some of the core concepts.

animation loop (recursive function)
DVD logo bounce
circular motion
spirallling motion

Fetch API

When we visit a website our browser makes an HTTP request for that HTML as well as an subsequent HTTP requests for loading any assets (fonts, images, videos, etc). The difference between a web "page" and a web "app" is the ability to dynamically change the content of our site through user interaction and other events, which often requires the ability to make our own HTTP requests.

XMLHttpRequest (old way)
Fetch API: then(callback) (newer way)
Fetch API: async/await (newest way)