简体中文
English
Website review
This review may include AI-generated content and is not individually verified. Domain, certificate and other facts come from the observed data on this page.
What is The Modern JavaScript Tutorial?
The Modern JavaScript Tutorial is a free, text-based course that teaches JavaScript from the ground up and then goes deep into advanced topics. Its distinguishing feature is structure: it is organized as a book with three main parts, so you can follow it linearly or jump to a specific subject.
The Modern JavaScript Tutorial covers the language itself first, deliberately keeping environment-specific notes to a minimum, then moves to the browser, then to extra articles.
What it covers
- The JavaScript language: fundamentals (variables, types, operators, loops, functions), code quality and testing, objects, data types such as arrays, Map/Set, Date and JSON, closures and advanced function techniques, property descriptors, prototypes and inheritance, classes, error handling, promises and async/await, generators, and modules.
- Browser: Document, Events, Interfaces: DOM and event handling, for readers who want to build interactive pages rather than only write language-level code.
- Additional articles: supplementary material beyond the two main tracks.
Each chapter is short and example-driven, and most end with tasks you can attempt yourself - a useful check that you actually absorbed the material rather than just read it.
Who it suits
It works best for self-directed learners who already know how to run code and are comfortable reading. A typical reader is someone who has done a little HTML and wants a rigorous, ordered path into JavaScript without a video course. If you prefer video explanations or need a certificate for an employer, this format will not match that goal.
How to use it
Start with Part 1 in order and do the tasks at the end of each chapter; treat Parts 2 and 3 as reference you return to when a project needs them. If you are choosing between resources, a reasonable decision criterion is whether you want depth with exercises (this) or quick, project-based momentum (a tutorial that builds one app end to end).
How does this tutorial structure its lessons for beginners versus advanced learners?
The tutorial is organized as a linear path that starts from absolute basics and layers on advanced material, rather than splitting into two separate tracks. Beginners work through the early sections in order; experienced learners can jump ahead to the parts they need.
Beginner path
The first sections assume no prior JavaScript. They cover "Hello, world!", code structure, the modern "use strict" mode, variables, data types, interaction dialogs (alert, prompt, confirm), type conversions, operators, comparisons, conditionals, logical operators, the nullish coalescing operator ??, loops, switch, functions, function expressions and arrow functions. From there, beginners meet code quality material: debugging in the browser, coding style, comments and automated testing with Mocha.
Intermediate and advanced material
Later sections move into objects and data types (object references and copying, garbage collection, this, constructors, optional chaining ?., symbols, primitives methods, numbers, strings, arrays and array methods, iterables, Map/Set, WeakMap/WeakSet, destructuring, Date, JSON), then advanced functions (recursion, rest/spread, scope and closure, the old var, the global object, Function objects, NFE, new Function, scheduling, decorators, call/apply, binding), object property configuration, prototypes and inheritance, classes, error handling, promises and async/await, generators and async iteration, modules, and miscellaneous topics such as Proxy, Reflect, eval and currying.
How the three parts differ
| Part | Focus | Typical audience |
|---|---|---|
| The JavaScript language | The language itself, with minimal environment-specific notes | Beginners through advanced learners |
| Browser: Document, Events, Interfaces | DOM, events and browser interfaces | Learners ready to build in-page behavior |
| Additional articles | Extra topics beyond the core sequence | Readers filling specific gaps |
Practical takeaway
If you are new, start at the beginning and do the tasks after each section; the sequence is designed so later topics depend on earlier ones. If you already program in another language, skim the fundamentals and begin where the concepts become unfamiliar—likely objects, closures or promises. The browser part is best treated as a separate phase once the language core feels comfortable, since it assumes the fundamentals are in place.
A useful next step is to open the table of contents and mark the first section whose title you cannot explain confidently, then start there. For a second reference while working through it, the MDN Web Docs at MDN Web Docs covers the same language features in a reference format.
What specific JavaScript topics like closures, OOP, and events does it cover?
The Modern JavaScript Tutorial covers closures, OOP and events as full chapters rather than passing mentions, and it separates language fundamentals from browser work so you can study one without the other.
Closures and functions
- Recursion and stack; rest parameters and spread syntax
- Variable scope and closure
- The old
var, global object, function object, NFE - The
new Functionsyntax; scheduling withsetTimeout/setInterval - Decorators and forwarding,
call/apply; function binding; arrow functions revisited
Object-oriented programming
- Object basics: references and copying, garbage collection, methods and
this, constructor andnew, optional chaining, symbols, object-to-primitive conversion - Prototypes and inheritance: prototypal inheritance,
F.prototype, native prototypes, prototype methods and objects without__proto__ - Classes: basic syntax, inheritance, static properties and methods, private and protected members, extending built-ins,
instanceof, mixins
Events and browser interfaces
- A dedicated part titled "Browser: Document, Events, Interfaces," sitting alongside the language part and additional articles
- Listed under the same table of contents as the language material, so events are treated as a first-class topic rather than an appendix
Beyond those three
- Data types: numbers, strings, arrays and array methods, iterables,
Map/Set,WeakMap/WeakSet, destructuring,Date, JSON - Error handling, promises and
async/await, generators and async iteration, modules and dynamic imports, proxies, reflection, currying
How to use this If you are learning closures for the first time, read the scope and closure chapter right after the functions chapter, then immediately try the tasks attached to each page. If you already write JavaScript and mainly need OOP, start at prototypes and inheritance before classes, because the class chapter assumes you understand the prototype chain.
For a second reference to cross-check explanations, MDN Web Docs at MDN Web Docs is the standard documentation source, and The Modern JavaScript Tutorial itself is the site described here.
Can I practice with interactive tasks and examples to reinforce learning?
Yes. The Modern JavaScript Tutorial is built around learning by doing: nearly every topic pairs its explanation with runnable examples and end-of-section tasks, so you can type code, predict the output, then check your answer. The tutorial's own table of contents lists "tasks" alongside concepts throughout, and the material is split into three parts — the JavaScript language, browser document/events/interfaces, and additional articles — which lets you practice core syntax first and then apply it to real page interaction.
How the practice works in a typical session
- Read a short explanation of the concept.
- Study the worked example and try to predict what it prints or returns.
- Solve the task for that section without peeking.
- Compare with the provided solution and re-run the code if your result differs.
What to practice, by goal
| Your goal | Where to focus | Why |
|---|---|---|
| Learn syntax from zero | JavaScript Fundamentals, Objects basics, Data types | Short examples make early mistakes cheap to fix |
| Think in functions and async | Advanced working with functions, Promises/async-await | Tasks here expose closure and timing mistakes that reading alone hides |
| Build interactive pages | Browser: Document, Events, Interfaces | Exercises involve DOM manipulation and event handling, not just console output |
| Prepare for real codebases | Code quality, Modules, Error handling | Practice with testing, imports and custom errors transfers directly to projects |
A useful next step: open a section you already know and do only its tasks. If you can solve them without reading the explanation, skip ahead; if a task stalls you, that section is your real starting point. For a second source of exercises with graded difficulty, LeetCode offers algorithm problems, and Exercism provides mentored JavaScript tracks — both complement this tutorial's explanation-first style rather than replacing it.
One trade-off to expect: the tasks reinforce the specific concept just taught, so they build fluency and confidence rather than testing you on unfamiliar problem types. If you want open-ended challenges, pair this material with a project of your own — a small to-do app or a page that fetches and displays data — and use the tutorial sections as reference when you get stuck.
How does it teach browser-related concepts such as document and event handling?
Browser topics are separated from the core language material. Part 2, "Browser: Document, Events, Interfaces," is its own section of the table of contents, so a learner can finish JavaScript fundamentals first and then move into the DOM without environment-specific notes interrupting the earlier chapters.
Within that section, the teaching order follows the browser's own structure:
- Document — how the DOM represents a page and how to select and modify elements.
- Events — how user actions and browser signals are handled, including the event object, bubbling, and default actions.
- Interfaces — the browser APIs that sit around the document and events.
The page also shows the method used throughout the tutorial: short numbered lessons, runnable examples, and tasks attached to each topic. A reader is expected to type and modify code rather than only read it. The comments section under the page suggests questions are handled in context, though the depth of that support is not something the page itself documents.
A practical way to use this structure: if you already know variables, functions, and objects, start directly at Part 2 and work through the document lessons before events. If you are new to the language, the early sections on objects, arrays, and functions are prerequisites — event handling code relies on them constantly.
For comparison, MDN's learning area at MDN Web Docs takes a more reference-oriented approach to the same topics, and Eloquent JavaScript integrates the DOM into a broader programming narrative rather than isolating it. This tutorial's separation suits learners who want a clear boundary between language and browser, and who prefer exercises over prose.
Is this tutorial suitable for self-study without prior programming experience?
Yes, it's designed for that. The tutorial states it starts "from scratch" and builds up to advanced topics like OOP, so a complete beginner is the intended starting point. It is text-based, with examples and tasks you work through yourself, which suits self-paced study better than a video course you can only watch.
That said, "no programming experience" and "no JavaScript experience" are different situations, and the fit differs:
- Never programmed at all: Workable, but slower. You'll meet ideas like variables, loops, and functions for the first time here, and the tutorial moves briskly through them. Expect to re-read sections and do the tasks rather than just read.
- Know another language: A strong fit. You can skim the fundamentals and spend your time on JavaScript-specific behavior such as closures, prototypes,
this, and the event loop. - Want a structured course with deadlines and feedback: Less ideal on its own. Nothing here enforces a schedule or grades your work, so you supply the discipline.
Two practical caveats. First, the tutorial focuses on the language itself with minimal environment-specific notes, so you'll need a browser and its developer console to run code — the early chapters cover setting that up. Second, self-study without prior experience usually fails from skipping practice, not from hard material. Do the tasks at the end of each section; if you can't solve one, that's the signal to re-read, not to move on.
A sensible next step is to start with Part 1's introduction and fundamentals, then judge after the first week whether the pace suits you. If the prose feels dense, pair it with a gentler beginner resource such as MDN Web Docs for a second explanation of the same concept, or freeCodeCamp if you want interactive exercises alongside reading.
Cloudflare
Google Workspace
User reviews (0)