Glossary

102 terms from JavaScript in the Browser, in plain words, each with the chapter that teaches it.

Search the glossary

#

:user-invalid: A CSS pseudo-class matching a control that is invalid and that the person has changed or tried to submit, so a fresh form isn't shown in red. :invalid matches any invalid control.

A

AbortController: An object that makes a signal you can fire yourself. Passing its signal to fetch and calling abort() cancels the request, which is how the shop search drops the slow answer for "o" when "or" has been typed.
AbortSignal.timeout: Makes a signal that cancels a request after a set number of milliseconds. A fetch given this signal rejects with a TimeoutError if the server is too slow.
Accessibility: Building pages so that everyone can use them, including people who use only a keyboard or a screen reader.
Accessible name: The words a screen reader announces for a control, such as a button's text or a field's label. A control with no name is announced only as "button".
addEventListener: Asks the browser to call your handler function each time a given event, such as a click, happens on an element. You pass the function itself, without parentheses.
API (application programming interface): A set of web addresses that answer with data, usually JSON, instead of web pages. Kettle & Crane's practice server has one at /api/products that Jo can update without touching your code.
append, prepend, before, after, remove, replaceChildren: Methods that put nodes on the page or take them off. append and prepend add children at the end or start, before and after add siblings, remove deletes an element, and replaceChildren swaps in all new children at once.
ARIA (Accessible Rich Internet Applications): A set of attributes that tell assistive technology a control's role and state. They change only what is announced, not how the element behaves.
aria-controls: Names the id of the section that a button opens and closes, such as the delivery details panel.
aria-describedby: Names the id of an element that describes a field, such as its error message. A screen reader reads it after the field's label.
aria-expanded: Says whether the section a button controls is open ("true") or closed ("false"), as for the Delivery details button.
aria-invalid: Marks a field as invalid for assistive technology when set to "true". The order form sets it when a field's error message is not empty.
aria-label: An attribute that gives a control an accessible name when it has no visible text that works. The picker's - and + buttons use it, for example "One fewer House Espresso 12 oz".
aria-pressed: Marks a toggle button as on ("true") or off ("false"), such as the dark theme switch.
Assistive technology: Tools such as screen readers that let people use a page in other ways than looking at it and using a mouse.
Attribute vs property: An attribute is what is written in the HTML, and a property is the matching value on the element object. They don't always agree: link.getAttribute("href") gives what you wrote, while link.href gives the full address.
autocomplete: An attribute that tells the browser what a form box is for, so it can offer saved values such as the person's name or email. autocomplete="off" asks it not to suggest old entries.

B

Body (HTTP): The data carried by a request or response. A POST sends the order as its body, and a response's body is the JSON the server answers with.
Boolean attribute: An HTML attribute that is simply on or off, such as disabled, checked or hidden. In JavaScript it becomes a true/false property.
Bubbling: An event starts at the element where it happened, then travels up through every ancestor to document, running listeners on the way. A click on the Add button also reaches its li and ul.
Build tool: A tool that combines a development server with a bundler. Vite is an example: it serves a project while you work on it and builds minified, combined files for publishing.
Bundler: A tool that follows every import from your entry file and writes a few combined, minified files. This lets packages from node_modules work in the browser and cuts the number of requests.

C

camelCase: A way of writing names where each word after the first is capitalized, such as priceCents. The dataset property turns data-price-cents into dataset.priceCents.
checkValidity: A method on a form or control that returns true only if the control, or every control in the form, passes its validation rules.
classList: A property for changing an element's classes: add, remove, toggle and contains. className is the whole class attribute as one string.
closest: A method that checks an element and then each ancestor, returning the first that matches a selector, or null. It is how a click on a button's inner span is still traced to the button or card.
Component: A reusable piece of interface with its own markup and behavior. The quantity picker is a function that builds an element, wires its events and returns it.
Console: The DevTools panel where script output appears. console.error logs in red for real failures, and console.warn logs in yellow for problems that do not stop the page.
CORS (cross-origin resource sharing): The browser rule that a page may read responses only from its own origin unless the other server allows it with an Access-Control-Allow-Origin header. Only the other server can grant that permission.
createElement: Makes a new, empty element that is not on the page until you add it with append, prepend, before or after.
CustomEvent: An event with a name of your choosing and a detail property that carries data. The quantity picker fires quantitychange with dispatchEvent so a parent can listen without knowing about carts.

D

data- attributes / dataset: Attributes starting with data- hold facts for your code, such as a product's SKU. JavaScript reads and writes them through dataset, always as strings.
Default action: Something the browser does on its own for an event, such as typing a character, following a link or submitting a form. event.preventDefault() cancels it.
Default export: A module's one unnamed export, which an importer can take under any name. Vite reads its settings from vite.config.js's default export.
defer: A script attribute that downloads the script now but runs it after the whole page has been read. Scripts with type="module" are always deferred.
DevTools: The browser's built-in developer tools. The Elements panel shows the DOM, the Network tab shows requests and responses, and the Application tab shows localStorage.
dist: The folder that vite build writes, holding the finished, minified and hashed site that you upload to publish.
document: The ready-made object at the top of the DOM tree, with properties and methods for everything below it. document.documentElement is the html element.
DOM (Document Object Model): The browser's live tree of objects built from a page's HTML, with one node for each element and run of text. Your script changes the DOM and the browser redraws, while the HTML file stays as written.

E

Element node / text node: An element node stands for a tag, and a text node for a run of text. Line breaks between tags are text nodes too, which is why childNodes counts more than children.
Encoding: Rewriting characters such as spaces so they are safe in an address. URLSearchParams builds an encoded query string, and encodeURIComponent encodes a single value in a path.
Event: The browser's signal that something happened, such as a click, a key press or a change to a box.
Event delegation: Putting one listener on a parent and using event.target with closest to work out which child was clicked. It also works for children added later, as with the shop's Add to cart buttons.
Event object: The argument the browser passes to a handler. It has type, target (where it happened), currentTarget (whose listener is running) and key for keyboard events.

F

Fallback: A value to use when loading something fails, such as the default object returned by loadJSON when stored data is missing or damaged.
fetch: The browser function that sends a request and returns a promise for a Response. It rejects only when no response arrives, so you must check response.ok yourself.
fieldset: An HTML element that groups related form controls, titled by a legend. The order form uses three fieldsets.
finally: A block after `try`/`catch` that runs whether the code in `try` succeeded or threw an error. It is used for cleanup that must always happen, such as re-enabling a button after a request.
Focus: The element that receives keyboard input. Calling focus() moves it, and tabindex="-1" lets a heading take focus from code without joining the Tab order.
Form elements (form.elements): The collection of a form's controls, which can be looked up by their `name`, so `form.elements.cafe.value` is the value of the control named `cafe`. Only controls that have a `name` are included when the form's data is gathered with `FormData`.
FormData: An object holding a form's named values as strings, as the browser would send them. Object.fromEntries(formData) turns it into a plain object, and unchecked checkboxes are left out.
Four states (loading, loaded, empty, failed): Fetched data is always in one of four states, and each needs something on screen: a loading message, the loaded data, an empty message, or a plain-words error with a way to retry.

G

Global object: The object whose properties work everywhere without a prefix. In a browser it is window, so document is really window.document.

H

Handler (listener): A function the browser calls every time a given event happens on an element.
Hash (in a file name): A code made from a file's contents and put in its name, such as index-D2onVM0C.js. A changed file gets a new name, so browsers don't serve an old cached copy.
Headers: Labeled extra details on a request or response. Content-Type: application/json says that a body is JSON.
HMR (hot module replacement): Vite updating a changed module in the running page when you save, without a full reload.
HTTP (Hypertext Transfer Protocol): The protocol browsers and servers use to talk: each exchange is a request from the browser and a response from the server.
HTTP status codes: The number on a response. 200 OK and 201 Created mean success, 400 Bad Request and 404 Not Found mean the request was at fault, and 500s mean the server broke.
HttpError and fetchJSON: A custom error class and a helper function that turn every `fetch` failure into a thrown error. `fetchJSON` throws an `HttpError` carrying the status and body for any bad status, so a single `catch` can handle all failures.

I

innerHTML: A property that reads and writes an element's contents as HTML. Setting it with text you didn't write lets attackers inject code, so use textContent instead.
input / change / keydown events: input fires after every change to a box's value, and change fires when the change is finished, such as on losing focus. keydown fires when a key goes down, and on document it catches keys anywhere.
inputmode: An attribute that picks the on-screen keyboard, for example numeric. The box stays text, so a zip like 01234 keeps its leading 0.

J

JSON: A text format for data. JSON.stringify turns data into text for sending or storing, and JSON.parse turns it back.

L

Live region: An element whose changed text a screen reader reads aloud, made with role="status". It must be on the page, empty, before its text changes.
localhost: The name every computer uses for itself. http://localhost:8080/shop.html asks the server on your own computer for shop.html.
localStorage / sessionStorage: Browser stores of string keys and values per origin. localStorage lasts until cleared, sessionStorage only until the tab closes, and other tabs hear changes through the storage event.

M

Method (HTTP): The kind of request: GET to read data and POST to send something new, such as placing an order.
Minified: Shrunk by removing spaces, comments and long names, as the bundler does to the files in dist.

N

nanoid: A small npm package that generates random IDs. In a Vite project it can be imported by name, because the bundler finds it in `node_modules`.
Network tab: The DevTools panel listing requests, with Headers, Payload and Response for each. It can also throttle to Slow 4G or Offline to test slow or broken networks.
Node: One object in the DOM tree. It sits inside a parent and may have children and siblings.
Node.js: A program that runs JavaScript outside the browser. It runs development tools such as the practice server and Vite, and the LTS (long-term support) version is the one recommended for most users.
node_modules: The folder where npm puts installed packages. Browsers don't know about it, so a bundler is needed to import from it.
NodeList: The list of nodes returned by querySelectorAll. It has length and forEach but no map or filter, so spread it into an array first.
novalidate: A form attribute that turns off the browser's error bubbles and stops it blocking the submit. validity still works, so your code can show its own messages.
npm: Node's package manager, used to install packages and run project scripts. A dev dependency, such as Vite, is needed to build but not downloaded by visitors.
null: A value meaning "nothing here". querySelector returns null when no element matches, and reading a property of null throws a TypeError.

O

Optional chaining and nullish coalescing (?. and ??): ?. skips a property read or call when the value is null or undefined, and ?? supplies a default only for null or undefined. For example, cart.get(sku) ?? 0 gives 0 for a new SKU.
Origin: A site's scheme, host and port, such as http://localhost:8080. A page may read responses only from its own origin, and each origin has its own localStorage.
Out-of-date answers (race): When searching as someone types, answers can arrive out of order, so an old slow answer replaces a newer one. The fix is to abort the previous request.

P

Parent / child / sibling: A parent is the container node, a child is a node inside it, and siblings share the same parent.
pattern: An attribute giving a regular expression the whole value must match, such as \d{5} for a five-digit zip code. A failure sets validity.patternMismatch.
Port: A numbered door on a computer that a server listens at, such as 8080 for the practice server or 5173 for Vite.
preventDefault: A method on the event object that cancels the browser's default action, such as stopping a form submit from reloading the page.
Proxy: A server that forwards requests. Vite's proxy sends requests starting with /api on to the practice server on port 8080, so the browser sees only one origin and CORS doesn't block it.

Q

Query string: The part of an address after ?, such as q=blue+mug. location.search holds the page's own query string.
querySelector / querySelectorAll: querySelector returns the first element matching a CSS selector, or null. querySelectorAll returns all matches as a NodeList.

R

Render function: A function that updates the page to match the state and decides nothing else. Event handlers change the state and then call render().
Request / response: A request is what the browser sends: a method, an address, headers and sometimes a body. A response is what the server sends back: a status code, headers and a body.

S

Screen reader: Software that reads a page aloud and announces each control, such as VoiceOver, NVDA or TalkBack.
setCustomValidity: Marks a control invalid with your own message, and "" makes it valid again. Sam's rule that Washington deliveries start at 4 bags uses it.
SKU (stock keeping unit): A product's unique code, such as MUG-BL for the speckled blue mug. The shop uses it as the key for products and cart quantities.
State: The data a page shows, kept in one place such as one object. The page is drawn from it, so it can't drift out of step.
submit event: The event a form fires when it is submitted, including when someone presses Enter in a box. Listen for submit rather than click, and call preventDefault() to stay on the page.

T

textContent: A property that reads or replaces everything inside an element as plain text. It is the safe way to put text on a page.

V

validity: An object of true/false flags on every form control, such as valueMissing and patternMismatch. validationMessage holds the browser's ready-made message.
Vite: A build tool: a fast dev server for development plus a bundler that writes the production build. It is run with npm run dev, build and preview.

W

Web server: A program that hands out files and data when a browser asks. Pages that use modules must be loaded from one, such as the practice server.
window: The global object standing for the browser tab.

X

XSS (cross-site scripting): An attack where someone's JavaScript runs inside your page, for example through a review written with innerHTML. It could then reach your visitor's cart and login.