EasyCompilers

Course

JavaScript from the ground up

Make the page do something

  • Beginner
  • 12 chapters
  • 179 min read
Start course

A hands-on first course in JavaScript, from your first console line to a small app built with the DOM and events: every idea comes with a page you can change and watch react in the same editor, with a short quiz at the end of each chapter.

What You'll Learn

  • Run a script and read what the console says
  • Store values, and build sentences from them
  • Make decisions and repeat work with loops
  • Write functions that take values and return answers
  • Keep data in arrays and objects, and walk it
  • Find elements on the page and change them
  • React to clicks, typing and submissions
  • Read a form, validate it, and answer in place
  • Clone a template and open a native dialog
  • Define an element of your own with a shadow root and slots
  • Build a small app with nothing but the language
  • Reach for the language’s own tools — iterator helpers, set methods, Object.groupBy

Prerequisites

  • Some HTML — the HTML course on this site, or any page you can open in an editor
  • No programming experience needed; the course starts at the first line

Vocabulary

The terms the chapters assume, in plain words.

addEventListener
A call on an element that registers a listener for one kind of event.
closest
A way to find the nearest parent of an element that matches a rule you give, starting with the element itself.
closure
A function together with the variables from the place it was written, which stay available when it runs later.
default behaviour
What the browser does on its own when an event happens, such as following a link or submitting a form, before any script intervenes.
DOM
The tree of objects a browser builds from the page, which a script can read and change while the page is open.
element
One item in the page tree, such as a heading or a button, which a script can find and change.
event
Something that happens on the page, such as a click, a key press, or a form being submitted, which a script can respond to.
event bubbling
The way an event rises from the element that received it up through each of its parents.
event target
The element that actually received the action, which may be a child of the element whose listener is running.
function
A reusable block of code that can be called with values and can return an answer to whoever called it.
handler
The function you give to a listener, which the browser runs when the event it waits for happens.
listener
A function registered on an element to wait for one kind of event and run each time that event reaches it.
property
A named value stored on an object, usually read and written with a dot, such as the text of an element.
reference
A value that points at an object rather than holding a copy, so a change made through one is visible through the other.
scope
The part of a program where a name can be used, decided by where it was declared.
variable
A name that holds a value so you can use it again; a constant cannot be pointed at a different value later.

Course Content

  1. 01
    How JavaScript works

    The third language of the web: what a script is for, how the page loads one, and where its output appears.

    Beginner · 12 min read

    Not started
  2. 02
    Values and variables

    Names for values: const for the ones that stay, let for the ones that change, and building sentences with template literals.

    Beginner · 13 min read

    Not started
  3. 03
    Decisions and loops

    Asking questions with if, repeating work with for, and walking a list with the for…of shape.

    Beginner · 14 min read

    Not started
  4. 04
    Functions

    A name for a piece of work: parameters in, a return value out, and arrow functions for the short ones.

    Beginner · 14 min read

    Not started
  5. 05
    Arrays and objects

    Many values under one name: lists in order, records with named fields, and the two or three methods worth knowing.

    Intermediate · 15 min read

    Not started
  6. 06
    The page as a tree

    Finding elements on a page and changing them: querySelector, textContent, and building new elements to append.

    Intermediate · 15 min read

    Not started
  7. 07
    Events

    The page answering back: listening for clicks, reading what happened, and keeping state between events.

    Intermediate · 15 min read

    Not started
  8. 08
    Forms and validation

    Reading what a visitor typed, stopping the page from reloading, and answering with a message that helps.

    Intermediate · 15 min read

    Not started
  9. 09
    Templates and dialogs

    Markup you can stamp out and a modal the browser operates: clone a template, fill it, and open it as a dialog.

    Advanced · 16 min read

    Not started
  10. 10
    An element of your own

    Inventing a tag and teaching the browser what it renders: a class, a shadow root, slots, and one line to register it.

    Advanced · 16 min read

    Not started
  11. 11
    A small app, end to end

    Everything at once: a to-do list that reads a field, listens for a submit, builds list items and keeps the page in step.

    Advanced · 18 min read

    Not started
  12. 12
    The newest JavaScript

    Three additions that remove a page of helper code each: iterator helpers that work a step at a time, set methods that do real set algebra, and the small conveniences around them.

    Advanced · 16 min read

    Not started