JavaScriptDOMIntermediate~3h

The DOM & Web APIs

See what the page will do

Most of what a page does is settled before anything runs: which node a query hands back, which handler goes first, whether that call rejected or merely answered 404. This drills the reading until it is fast — and then asks you to build one small page that behaves the way you said it would.

Start this project See the modules

Modules: 6
Drills: 14
Build steps: 2
Time: ~3h

Walk out able to

Take markup and listeners you have never seen and say what a script will observe: the order, the node, the answer, and what is still there tomorrow.

What you drill

The tree, and the gaps

Which node a query hands back, and what sits between them.

One click, two passes

Handler order, and which call silences which.

One listener, many rows

Delegation, and the four ways it goes quiet.

The call and what it keeps

What fetch settles with, and what outlives the tab.

The pitch

What you practise, and what you leave with

One HTML file: a list handled by a single delegated listener, ticks that survive a reload, and a console that shows the whole walk.

You will practise

Queries, traversal, and what a write left
Handler order, on the way in and the way back
Delegation, and when it will not fire
fetch outcomes, bodies, Web Storage

Afterwards you can

Order five handlers without running them
Say why the delegated listener stayed quiet
Tell a rejected call from an unwanted answer
Say which tab reads the value back

Modules

6 modules, 23 items

Lessons explain one idea. Drills repeat it until it sticks. Build steps make something that exists afterwards.

1
Walk the tree
~56 min
Say what a query returns, which node sits next door, and what a write left behind.
- LessonRead one tree cold6 min
- LessonSnapshot or standing question5 min
- LessonFour ways to put something in6 min
- LessonThe reference you still hold5 min
- DrillSay what the query returns9 min
- DrillWalk to the node next door8 min
- DrillSay what the write left behind9 min
- DrillName the call that does it8 min
2
Order the handlers
~37 min
Put a click’s handlers in firing order, and say which call silences which.
- LessonFollow one click down and back6 min
- LessonThe node both passes reach5 min
- LessonThree calls, three different stops6 min
- DrillPut the handlers in order11 min
- DrillStop the right thing9 min
3
Delegate one listener
~30 min
Write one listener for rows that do not exist yet, and know when it will not fire.
- DrillName the element it acts on9 min
- DrillSay whether it fires at all10 min
- DrillCount how many times it runs11 min
4
Call it and read the answer
~29 min
Say whether the call settled or threw, read the body once, and send what was asked for.
- DrillSay whether it rejected10 min
- DrillRead the body once9 min
- DrillSend what was asked for10 min
5
Keep it between visits
~15 min
Say what another tab and another visit read back, and in what type.
- DrillSay what comes back out8 min
- DrillSay which pages share it7 min
6
Prove it on a real page
~28 min
Build a page that behaves the way the first five modules said it would.
- Build stepWatch one click cross the tree10 min
- Build stepBuild a list that survives a reload18 min