ExplorableJS

Welcome to ExplorableJS! This course will teach you the fundamentals of the programming language JavaScript (JS). It assumes some basic programming experience, but no familiarity with JS or web technology is needed. Let us start by learning a bit about why JavaScript is worth learning. 

JavaScript, Language of the Web

JavaScript was introduced in 1995 as a way to add programs to web pages in the Netscape Navigator browser. The language has since been adopted by all other major graphical web browsers. It has made modern web applications possible—applications with which you can interact directly without doing a page reload for every action. JavaScript is also used in more traditional websites to provide various forms of interactivity and cleverness. 

It is important to note that JavaScript has almost nothing to do with the programming language named Java. The similar name was inspired by marketing considerations rather than good judgment. When JavaScript was being introduced, the Java language was being heavily marketed and was gaining popularity. Someone thought it was a good idea to try to ride along on this success. Now we are stuck with the name.

After its adoption outside of Netscape, a standard document was written to describe the way the JavaScript language should work so that the various pieces of software that claimed to support JavaScript were actually talking about the same language. This is called the ECMAScript standard, after the Ecma International organization that did the standardization. In practice, the terms ECMAScript and JavaScript can be used interchangeably—they are two names for the same language.

Web browsers are not the only platforms on which JavaScript is used. Some databases, such as MongoDB and CouchDB, use JavaScript as their scripting and query language. Several platforms for desktop and server programming, most notably the Node.js project, provide an environment for programming JavaScript outside of the browser.

As of 2023, JavaScript is assumed to be the most widely used programming language in the world. It can power any type of web project, from a simple "Contact Me" form on your personal website to complex web applications such as Facebook or Figma. By learning it, you can gain a deeper understanding of something you use every day: The web! And who knows, maybe it will enable you to develop something that becomes part of the web, something that other people use every day.

About This Course

This course is based on the excellent book "Eloquent JavaScript" (3rd Edition, 2018) by Marijn Haverbeke. Content is reused according to CC-BY-NC 3.0 and attribution is given here as well as at the end of each chapter. In comparison with the original, we added some sections (e.g. Web Components) and updated some information.

Interactive Code Cells

In this book, text written in a monospaced font will represent elements of programs—sometimes they are self-sufficient fragments, and sometimes they just refer to part of a nearby program. Programs (of which you have already seen a few) are written as follows:

Sometimes, to show the output that a program produces, the expected output is written after it, with two slashes and an arrow in front.

Note that sometimes, you need to run an earlier code cell for a a code cell to work. If you ever forget, you will receive an "Uncaught ReferenceError..." message.

You can run a code cell to execute the code inside. Feel free to run and change any code you want! Since everything is running right on the website, you can never break anything. If you ever run into issues and want to reset, just reload the page in your browser.

Getting Started

Get an overview of what's next below, or jump right into lesson 01.

Table Of Contents

Sections with strikethrough are not available yet.

  1. The JavaScript Language

    JavaScript can be understood in the same terms as any other imperative programming language. There are expressions (and statements), as well as functions that make up the core. Data structures allow the management of more complex data, while JavaScript's object system enables organizing your code in an object-oriented way. Advanced language features such aserror handling, regular expressions, modules, and asynchronous programming help with specific use cases.

    Lesson 01: Expressions

    Lesson 02: Statements

    Lesson 03: Functions

    Lesson 04: Data Structures

    Lesson 05: Higher-Order Functions

    Lesson 06: The Secret Life of Objects

    Lesson 07: Project - A Robot

    Lesson 08: Bugs and Errors

    Lesson 09: Regular Expressions

    Lesson 10: Modules

    Lesson 11: Asynchronous Programming

    Lesson 12: Project - A Programming Language

  2. JavaScript for Browsers

    Web browsers remain the most important environment in which JavaScript is used. In this section, we get to know the model of how JavaScript can interact with the browser, namely the Canvas API for 2D drawing and the Forms API to handle multiple data inputs grouped into a single form. We also learn about some useful features of the web platform provided by browsers. Finally, we learn about Web Components, which allow you to create your own HTML elements.

    Lesson 13: JavaScript and the Browser

    Lesson 14: The Document Object Model

    Lesson 15: Handling Events

    Lesson 16: Project - A Platform Game

    Lesson 17: Drawing on Canvas

    Lesson 18: HTTP and Forms

    Lesson 19: Web Components

    Lesson 20: Project - A Pixel Art Editor

  3. The JavaScript Ecosystem

    In this section, we look beyond the JavaScript available in any web browser towards the wider ecosystem. We see that JavaScript can also be used in server environments using Node.js. We also learn how to improve the development experience with modern tooling, including with static types via TypeScript. Furthermore, we learn about WebAssembly, a way to run other programming languages than JS in the browser and call them from JS. Finally, we take a small sample of the libraries and frameworks available to show what is possible.

    Lesson 21: JavaScript on Servers

    Lesson 22: Tooling & TypeScript

    Lesson 23: WebAssembly

    Lesson 24: Frameworks

    Lesson 25: Project - Skill-sharing Website