Command Palette

Search for a command to run...

Hectal
Phase 11Intermediate12 of 16 in JavaScript

Network and Browser APIs

Talk to servers with fetch, remember data with web storage, read URLs, build client-side routes, watch the page with observers and animate smoothly.

So far your code has lived inside one page. This phase connects it to the outside world. You'll learn how HTTP works from a JavaScript developer's point of view (methods, status codes, headers, JSON and CORS), then use **fetch** properly: checking response.ok, sending JSON, handling every kind of error, and cancelling slow requests with AbortController.

Then come the browser's own tools: **localStorage and sessionStorage for remembering things, URL and URLSearchParams for reading and building addresses safely, the History API for apps that change pages without reloading, the three observers (intersection, resize and mutation) that replace slow polling and scroll handlers, requestAnimationFrame** for smooth animation, and a tour of permission-based APIs such as the clipboard, location and notifications.

Everything builds on Phase 10 (promises and async/await) and Phases 8–9 (the DOM and events). The live previews never touch the real network: they use data: URLs or a small fake server that returns real Response objects, so every result is the same each time you press Run. Code that needs a real server is shown as normal code blocks. For the server side of HTTP (caching, APIs, load balancers) see Hectal's /system-design course.

0/8 · 0%
8 topics ~3 h 26 code blocks & diagrams
Start with the first topic
1
11.1

HTTP for JavaScript Developers

HTTP is the request-and-reply conversation between the browser and a server: every request has a method, a URL and headers, every reply has a status code, headers and a body, and the browser's CORS rules decide which replies your JavaScript may read.

26 min 4 code practice

2
11.2

fetch

fetch(url, options) sends an HTTP request and returns a promise for a Response; it only rejects on network failure, so you must check response.ok yourself, read the body once with json() or text(), and use an AbortController to cancel or time out.

25 min 4 code practice

3
11.3

localStorage and sessionStorage

localStorage keeps small string key–value pairs for an origin across visits, sessionStorage keeps them for one tab; both store only strings (so use JSON), hold about 5 MB, block while they work, and must never hold secrets, because any script on the page can read them.

23 min 3 code practice

4
11.4

URL, URLSearchParams and location

The URL class splits any web address into reliable parts and resolves relative links, URLSearchParams reads and builds query strings with correct encoding, and location is the current page's URL, which you can read and change to navigate.

21 min 3 code practice

5
11.5

The History API and Client-Side Routing

A single-page app changes the view without loading a new page: history.pushState changes the address and adds a Back-button entry, the popstate event tells you when the user goes Back or Forward, and a router maps each URL to what should be shown; hash routing is the simpler, older variant.

24 min 3 code practice

6
11.6

Observers

Observers let the browser tell you when something changes instead of you checking again and again: IntersectionObserver reports when elements enter or leave view, ResizeObserver when an element's size changes, and MutationObserver when the DOM itself is changed.

23 min 3 code practice

7
11.7

requestAnimationFrame and Smooth Animation

requestAnimationFrame(callback) runs your code right before the browser draws the next frame, in step with the screen; animate by computing each frame from the elapsed time (not by counting frames), change only cheap properties like transform and opacity, and stop with cancelAnimationFrame.

23 min 3 code practice

8
11.8

More Browser APIs

Powerful browser features such as the clipboard, the user's location and system notifications are guarded by permissions: they need a secure (HTTPS) page, often a user action, and the user's consent, so good code detects support, asks at the right moment and has a fallback when the answer is no.

24 min 3 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

1

Fetch a user and show it

USER_URL is a data: URL that answers like a real API with {"name":"Asha Rao","city":"Pune"}.

Beginner
2

Build and read search URLs

Write buildSearchUrl(term, page) that returns the full URL https://shop.example.com/search with q set to the term and page set to the page number. Any text must work, even R&D #1.

Beginner
3

Remember the visitor's name

Write greeting() that returns Welcome back, NAME when localStorage has a name, and Hello, stranger otherwise. Show it in #greeting when the page loads.

Intermediate
4

A hash router for three pages

The page has four sections with data-route values /, /about, /contact and notfound.

Intermediate
5

A user loader with loading, errors and retries

api(id) is a fake fetch (don't change it): id 1 and 2 reply 200 with a user, other ids reply 404, and id 0 fails like a network error.

Intermediate