Build with DEX · 30 reference entries
Use browser APIs for form handling, requests, formatting, storage and progressive enhancement.
These small examples show native browser capabilities. Names such as form, status and loadTopics stand for elements or functions in your own application. The examples are reading material; this library does not execute them or add a third-party editor.
Choose an entry or use Find on page to look for a term. Each number identifies an educational reference; production checks need their own recorded result.
WEB-JS-001
Query the smallest useful document region and handle a missing match. A selector can legitimately find no element.
const heading = document.querySelector("h1");
if (heading) heading.textContent = "Reference notes";Documentation: Browser and JavaScript documentation
WEB-JS-002
Use textContent when inserting plain text supplied by a user or an API. HTML parsing requires a separate trusted-content policy.
const output = document.querySelector("#result");
if (output) output.textContent = userProvidedText;Documentation: Browser and JavaScript documentation
WEB-JS-003
Create the element, set its text and append it. This keeps data separate from markup construction.
const item = document.createElement("li");
item.textContent = "Read the form guidance";
document.querySelector("#steps")?.append(item);Documentation: Browser and JavaScript documentation
WEB-JS-004
A module or deferred script usually runs after parsing. If loading timing is uncertain, check readyState before registering DOMContentLoaded.
function start() { /* attach page behaviour */ }
if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", start, { once: true });
else start();Documentation: Browser and JavaScript documentation
WEB-JS-005
Attach behaviour with addEventListener. Use once for a one-time action or an AbortSignal to remove a group of listeners.
const controller = new AbortController();
window.addEventListener("resize", updateLayout, { signal: controller.signal });
// When the component is removed:
controller.abort();Documentation: Browser and JavaScript documentation
WEB-JS-006
Listen on a stable parent for repeated child controls. Validate the target and confirm the matched control belongs to that parent.
list.addEventListener("click", (event) => {
if (!(event.target instanceof Element)) return;
const button = event.target.closest("button[data-id]");
if (button && list.contains(button)) selectItem(button.dataset.id);
});Documentation: Browser and JavaScript documentation
WEB-JS-007
Listen for submit on the form so keyboard submission follows the same path as the button. Prevent the default only when handling the submission yourself.
form.addEventListener("submit", (event) => {
event.preventDefault();
const values = new FormData(form);
showPreview(values.get("topic"));
});Documentation: Browser and JavaScript documentation
WEB-JS-008
Use browser constraints for immediate guidance, then validate again on the server. Report validity when the user requests an action.
if (form.reportValidity()) {
const values = new FormData(form);
preview.textContent = String(values.get("question") ?? "");
}Documentation: Browser and JavaScript documentation
WEB-JS-009
Fetch can fulfil its promise for an HTTP error response. Check response.ok before interpreting the successful response body.
const response = await fetch("/example-api/topics");
if (!response.ok) throw new Error("Topics could not be loaded");
const topics = await response.json();Documentation: Browser and JavaScript documentation
WEB-JS-010
Match the Content-Type to the body format. Sensitive mutations also need the application's authentication, CSRF and authorisation controls.
const response = await fetch("/example-api/preferences", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ theme: "system" })
});Documentation: Browser and JavaScript documentation
WEB-JS-011
Abort an obsolete request when a newer action replaces it. Handle an intentional abort separately from a failure the reader needs to see.
const controller = new AbortController();
const pending = fetch("/example-api/search?q=html", { signal: controller.signal });
controller.abort();
try { await pending; } catch (error) {
if (error.name !== "AbortError") showFailure();
}Documentation: Browser and JavaScript documentation
WEB-JS-012
Use a bounded timeout when waiting indefinitely would leave an interface stuck. Choose a duration appropriate to the operation and offer recovery.
const response = await fetch("/example-api/topics", {
signal: AbortSignal.timeout(8000)
});Documentation: Browser and JavaScript documentation
WEB-JS-013
AllSettled reports each outcome when independent operations may partially succeed. Process the result status before reading its value.
const results = await Promise.allSettled([loadTopics(), loadBookmarks()]);
for (const result of results) {
if (result.status === "fulfilled") useResult(result.value);
}Documentation: Browser and JavaScript documentation
WEB-JS-014
Show a useful recovery action when a request fails. Keep technical details in appropriate diagnostics and preserve the reader's input.
try { await loadTopics(); }
catch { status.textContent = "Topics could not load. Try again."; }Documentation: Browser and JavaScript documentation
WEB-JS-015
Delay a repeated search briefly while typing, then replace the previous timer. Still support immediate form submission.
let timer;
search.addEventListener("input", () => {
clearTimeout(timer);
timer = setTimeout(() => previewSearch(search.value), 250);
});Documentation: Browser and JavaScript documentation
WEB-JS-016
Use URL and URLSearchParams to encode query values correctly. Preserve existing parameters unless the operation deliberately changes them.
const url = new URL("/search", location.origin);
url.searchParams.set("q", "HTML & CSS");
location.assign(url.href);Documentation: Browser and JavaScript documentation
WEB-JS-017
Successful JSON parsing only proves syntax. Check the expected shape and types before using external data.
const value = JSON.parse(rawText);
if (!value || !Array.isArray(value.items)) throw new Error("Invalid response shape");Documentation: Browser and JavaScript documentation
WEB-JS-018
Use localStorage for small, non-sensitive preferences. Storage can fail, so handle access and parse errors with a usable default.
let theme = "system";
try { theme = localStorage.getItem("theme") || "system"; }
catch { /* retain the default */ }Documentation: Browser and JavaScript documentation
WEB-JS-019
Format amounts using an explicit locale and currency. Keep the numeric value separate from its displayed string.
const format = new Intl.NumberFormat("en-GB", { style: "currency", currency: "GBP" });
const label = format.format(12.5);Documentation: Browser and JavaScript documentation
WEB-JS-020
Choose the time zone that the displayed date represents. Use a consistent machine-readable source value instead of parsing ambiguous date strings.
const format = new Intl.DateTimeFormat("en-GB", { dateStyle: "long", timeZone: "UTC" });
const label = format.format(new Date("2026-11-07T12:00:00Z"));Documentation: Browser and JavaScript documentation
WEB-JS-021
Provide a comparator that matches the value type. Copy the array first when other code relies on its existing order.
const ordered = [...items].sort((a, b) => a.price - b.price || a.id.localeCompare(b.id));Documentation: Browser and JavaScript documentation
WEB-JS-022
Split reusable logic into modules with named exports. Keep private configuration on the server rather than embedding it in browser modules.
// totals.js
export function total(price, delivery) { return price + delivery; }
// page.js
import { total } from "./totals.js";Documentation: Browser and JavaScript documentation
WEB-JS-023
Use matchMedia to read a preference and listen for changes when behaviour must respond while the page is open.
const preference = matchMedia("(prefers-reduced-motion: reduce)");
preference.addEventListener("change", () => setMotionEnabled(!preference.matches));Documentation: Browser and JavaScript documentation
WEB-JS-024
Observe an element when behaviour depends on its size. Disconnect the observer when the component is no longer used.
const observer = new ResizeObserver(([entry]) => {
updateSize(entry.contentRect.width);
});
observer.observe(panel);Documentation: Browser and JavaScript documentation
WEB-JS-025
Use IntersectionObserver for work that depends on an element approaching the viewport. Provide a normal usable baseline while it waits.
const observer = new IntersectionObserver((entries) => {
for (const entry of entries) if (entry.isIntersecting) showPreview(entry.target);
});
observer.observe(preview);Documentation: Browser and JavaScript documentation
WEB-JS-026
Clipboard writing generally requires a secure context and may fail. Run it from a deliberate action and report the result.
copyButton.addEventListener("click", async () => {
try { await navigator.clipboard.writeText(code.textContent); status.textContent = "Copied"; }
catch { status.textContent = "Select and copy the text manually."; }
});Documentation: Browser and JavaScript documentation
WEB-JS-027
Use showModal for a modal dialog and keep a clear close action. Return focus to a useful control after closing when needed.
openButton.addEventListener("click", () => dialog.showModal());
closeButton.addEventListener("click", () => dialog.close());Documentation: Browser and JavaScript documentation
WEB-JS-028
Read the open property of details when an enhancement needs the native disclosure state. The basic interaction works without a script.
details.addEventListener("toggle", () => {
status.textContent = details.open ? "Explanation expanded" : "Explanation collapsed";
});Documentation: Browser and JavaScript documentation
WEB-JS-029
Schedule visual updates with requestAnimationFrame rather than an arbitrary fast timer. Cancel unnecessary work when the view is removed.
const frame = requestAnimationFrame(() => {
progress.style.transform = "scaleX(0.5)";
});
// If the update is no longer needed:
cancelAnimationFrame(frame);Documentation: Browser and JavaScript documentation
WEB-JS-030
Keep links, forms and reading content usable before adding optional JavaScript. A failed enhancement should leave a coherent route to the task.
HTML baseline: a working link or form action
Enhancement: inline feedback or faster updates
Failure path: the baseline still completes the taskDocumentation: Browser and JavaScript documentation
Reviewed . Send a correction through contact and corrections, including the entry number and supporting documentation.
Explore offers, save a shortlist and buy with the retailer.
Confirm current prices and offer terms with the retailer. Device saves start in this browser. Account sync is optional.
Read what recorded checks establish and what remains unconfirmed.
Country labels do not confirm delivery or convert prices.
Prepare a report to review and send yourself. Preparing it does not send it.
Open the tour on the guide page when you choose. You can skip or close it at any time.