JavaScript: the DOM and fetch
Changing the page, events and talking to servers.
Level 201 · 19 lessons · 15 practice labs
Lessons
The DOM and events
- Walking the DOM and events: You learn to find elements on a page (the DOM), move between them, and write code that reacts to events such as clicks.
- Event delegation: You handle events for hundreds of elements with one listener, including elements added later.
- Safe DOM insertion: textContent and createElement: You add user data to a page with textContent and createElement instead of innerHTML to prevent script injection.
- Form validation and password strength: You will learn to check form input in the browser, build a simple password-strength meter, and see why browser checks alone are not enough.
- Submitting forms with FormData: You send a form with fetch without reloading and know the server must still validate the data.
- Timers and debounce: You use setTimeout and setInterval and slow down frequent events with debounce.
- Short task: a list that filters as you type
Language tools
- Closures and advanced functions: You learn how an inner function can remember outer variables (a closure) and how to pass functions to other functions.
- Array and string techniques: You learn to use common methods for filtering, transforming and searching arrays and strings with ease.
- ES6 classes: You bundle related data and behaviour into one structure with classes, constructors and methods.
- ES6 modules: import and export: You split code into files and connect them with import and export.
- URL parsing and HTML escaping: You will learn to split a URL into parts and understand how escaping text before putting it into HTML protects a page from malicious input.
- Short task: split single-file code into modules
Talking to the server
- Promises and async/await: You manage slow operations with async/await so asynchronous code reads like step-by-step code.
- Fetching data from a server with fetch: You learn to fetch JSON data from a server with fetch, show it on the page, and handle a failed request.
- Error handling and timeouts in fetch: You tell HTTP errors, network failures and timeouts apart and cancel requests with AbortController.
- Same-origin policy and CORS: You explain why browsers limit reading data across sites and what CORS headers relax.
- Storing data with localStorage: You will learn to keep small pieces of data in the browser with localStorage and understand why sensitive data such as passwords should not go there.
- Capstone: a page fed by a server: In a fictional company you build a small page that fetches data from a server and shows it safely, using a form and events.
Practice labs
- Handle delete buttons with one listener: Use event delegation instead of one listener per button in a fifty-row task list.
- Make rows added later work too: The "Edit" button on newly added product rows doesn't work; fix it by moving the listener to the container.
- Lighten a city search box with debounce: Slow down a city search box that fires a request on every keystroke with debounce and count the requests saved.
- Add a comment without innerHTML: Add visitor comments to the list with createElement and textContent instead of innerHTML.
- Format a phone field as the user types: Code a phone field that inserts spaces as the user types without making the cursor jump.
- Send a form with FormData without reloading: Send a newsletter signup form with FormData and show different messages on success and failure.
- Share currency helpers in a module: Write a shared module exporting the currency-formatting functions copied into two pages and import it in both.
- Model the cart with a class: Write a Cart class with add, remove and total methods and use it in place of scattered functions.
- Write a one-time coupon with a closure: Use a closure to guarantee a coupon function applies only once and rejects a second attempt.
- Show the weather with fetch: Fetch data from the lab server's mock weather endpoint and write it into a city card.
- Add a timeout and error message to fetch: Add a timeout and a clear error to a fetch call against an endpoint that sometimes stalls and sometimes returns 500.
- Load paged products in order: Show products that arrive page by page via "Load more" without breaking order or adding any twice.
- Save the theme choice in localStorage: Keep the light/dark theme choice in localStorage and restore it on reload.
- Survive corrupted saved data: The page won't open when the cart in localStorage is corrupt; make reading safe and fall back to defaults.
- Find and fix the cause of a CORS error: Analyse the CORS error of a page calling an API on another port in the network panel and add the right header on the server.
About this course
Changing the page, events and talking to servers.
What you will learn
- The DOM and events
- Language tools
- Talking to the server
Prerequisites
Finishing the level 101 courses of the same path, or knowing those topics, is enough.
Lab environment
Lessons run on your own Kali Linux desktop in the browser, with the tools ready in their windowed interfaces. Nothing to install; a computer screen is recommended.
Frequently asked questions
- Is this course right for my level?
- The course is at level 201; it assumes you know the topics of the lower-level courses.
- Is there anything to install?
- No. Every lesson runs in your own lab environment that opens in the browser.
- How do lessons work?
- Each lesson has 8 to 10 steps and a short quiz. Early steps show the command to type, later steps give less help; if two attempts fail, the solution opens.
- Can I try it for free?
- Yes. The first three lessons of every course are free.