JavaScript: the browser, events and application state

Learn in your browser · Chapter 01 of 06

Add one script to the event page, see when it runs, and meet the tree it works on.

This workbook adds JavaScript, the language browsers run, to the Marigold Lane event page from the HTML and CSS workbooks. Every example was run in Microsoft Edge 153.

Create an empty app.js in event-page and add this line to the head of index.html, under the stylesheet links.

<script src="app.js" defer></script>

When scripts run. A plain script runs as soon as it is fetched, and the browser stops reading the page meanwhile (HTML standard). With defer it runs, in order, once the page has been parsed (MDN), so it can find every element.

A module (type="module") is deferred automatically and keeps its top-level names private, but opened from disk Edge blocked it: Access to script at '.../app.js' from origin 'null' has been blocked by CORS policy. MDN says to test modules through a server, so this workbook uses a classic deferred script.

The DOM. The browser turns your HTML into the Document Object Model, a tree of objects that scripts can read and change (MDN). Part of the event page's tree:

main
`-- section#stalls
    |-- h2  "Stalls"
    `-- ul.cards
        `-- li  (one of four)
            `-- article.stall
                |-- h3  "Vegetable seeds"
                `-- p   "Beans and peas."

querySelector returns the first element matching a CSS selector, or null; querySelectorAll returns every match (MDN). Try these in the Console (Ctrl+Shift+J). The first time you paste there, Edge asks you to type allow pasting: do so only for code you understand (Microsoft).

document.querySelector('#stalls h2').textContent
document.querySelectorAll('.stall').length
document.querySelector('.stall').parentElement.tagName

Put this in app.js: it gives each stall card a button named from its heading.

// app.js: behaviour for the Marigold Lane page
const stalls = document.querySelectorAll('.stall');
console.log(stalls.length + ' stalls found');

for (const stall of stalls) {
  const button = document.createElement('button');
  button.type = 'button';
  button.dataset.stall = stall.querySelector('h3').textContent;
  button.textContent = 'Shortlist ' + button.dataset.stall;
  stall.append(button);
}

const names a value that cannot be reassigned, though an object's contents can change (ECMAScript, MDN). createElement makes an element, dataset.stall writes a data-stall attribute (MDN), textContent sets its text and append adds it to the card.

Learn in your browser · Chapter 02 of 06

Make the buttons do something, with one listener that hears every card.

An event is something that happens, such as a click or key press. addEventListener(type, listener) asks the browser to call your function each time, passing an event object; (event) => { ... } is an arrow function, a compact way to write one (MDN).

Delegation. The DOM Standard says an event on an element also reaches listeners on its ancestors, so one listener on the list can serve every button (event delegation, MDN). event.target is where the event started, event.currentTarget the element whose listener is running, and closest(selector) returns the nearest match, the element itself or a parent, or null (MDN). Add this to the end of app.js.

const cards = document.querySelector('.cards');

cards.addEventListener('click', (event) => {
  const button = event.target.closest('button[data-stall]');
  if (!button) return;
  console.log('clicked', button.dataset.stall, 'on', event.currentTarget.tagName);
});

Keyboard. The WAI-ARIA Authoring Practices say Space and Enter both activate a button, and a real button does it for you: Edge fired click for both keys. WCAG 2.2 criterion 2.1.1 Keyboard (level A) asks that everything works from a keyboard; real buttons give you that free, and a clickable div does not.

Learn in your browser · Chapter 03 of 06

Keep what the page knows in one object, draw the page from it, and never let text become code.

State is what your page knows: here, which stalls are shortlisted. Keep it in one object, change it in one function, and let a render function draw the page from it, never reading state back from the page. Add a status line to index.html after the cards' closing </ul>, and two rules to layout.css.

<p id="shortlist-status" role="status"></p>

.stall button { grid-column: 1 / -1; justify-self: start; }
[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

Add this to the end of app.js, and change the listener's console.log line to toggle(button.dataset.stall);.

const state = { shortlist: [] };
const shortlistStatus = document.querySelector('#shortlist-status');

function toggle(name) {
  if (state.shortlist.includes(name)) {
    state.shortlist = state.shortlist.filter((n) => n !== name);
  } else {
    state.shortlist.push(name);
  }
  render();
}

function render() {
  for (const button of cards.querySelectorAll('button[data-stall]')) {
    const on = state.shortlist.includes(button.dataset.stall);
    button.setAttribute('aria-pressed', String(on));
  }
  shortlistStatus.textContent = state.shortlist.length
    ? 'Shortlisted: ' + state.shortlist.join(', ') + '.'
    : 'Your shortlist is empty.';
}

render();

aria-pressed makes each button a toggle button, whose label must not change, because screen readers announce the state (Authoring Practices). Styling [aria-pressed="true"] means sight and software share one source. render updates the existing buttons, because rebuilding them destroys the one with focus.

textContent versus innerHTML. textContent inserts a text node, never markup (DOM Standard). innerHTML parses HTML, a common route for cross-site scripting (XSS), where a site runs an attacker's code as its own (MDN). Inserted script elements do not run (HTML standard), but an image with a broken address runs its onerror handler (MDN). Test that harmlessly in the Console:

const test = `<img src="missing.png" onerror="console.log('This text ran as code')">`;
shortlistStatus.textContent = test;
shortlistStatus.innerHTML = test;
shortlistStatus.innerHTML = `<script>console.log('script ran')</script>`;

Learn in your browser · Chapter 04 of 06

Check the sign-up form in the browser, send nothing, and tell every user what happened.

The Constraint Validation API is the browser's form checking, readable from scripts. required needs a value and type="email" an address-shaped one. Each field's validity has flags such as valueMissing and typeMismatch, and checkValidity() returns true or false (MDN). Change the form in index.html (dots are unchanged lines).

<form novalidate>
  ...
    <input id="name" name="name" type="text" required aria-describedby="name-error">
    <span id="name-error"></span>
  ...
    <input id="email" name="email" type="email" required aria-describedby="email-hint email-error">
    <span id="email-error"></span>
  ...
</form>
<p id="form-status" role="status"></p>

novalidate turns off the browser's own error bubbles, not the API (MDN). WCAG's guidance on 3.3.1 notes such bubbles may vanish, or stay small when zoomed, so this page writes its own. Add this to the end of app.js.

const form = document.querySelector('#signup form');
const fields = [document.querySelector('#name'), document.querySelector('#email')];
const formStatus = document.querySelector('#form-status');
form.querySelector('button').type = 'submit';

function problem(field) {
  if (field.validity.valueMissing) return field.id === 'name' ? 'Enter your name.' : 'Enter your email address.';
  if (field.validity.typeMismatch) return 'Enter an email address like sam@example.com.';
  return '';
}

form.addEventListener('submit', (event) => {
  event.preventDefault(); // this demonstration never sends anything
  for (const field of fields) {
    const message = problem(field);
    document.querySelector('#' + field.id + '-error').textContent = message;
    field.setAttribute('aria-invalid', String(message !== ''));
  }
  const firstBad = fields.find((field) => !field.checkValidity());
  if (firstBad) {
    formStatus.textContent = '';
    firstBad.focus();
    return;
  }
  formStatus.textContent = 'Thank you, ' + fields[0].value + '. Nothing was sent: this is a demonstration.';
  form.reset();
});

The button becomes a submit button only while this script runs, and preventDefault() cancels the sending every time (MDN). Each message goes in a span tied to its field by aria-describedby, and aria-invalid marks the field (technique ARIA21). Focus moves to the first problem, where Edge's accessibility tree showed the name field as invalid, named Your name and described by Enter your name. WCAG 3.3.1 Error Identification (A) asks for errors described in text, and 3.3.3 Error Suggestion (AA) for fixes, as the email message gives.

Status messages. WCAG 2.2 criterion 4.1.3 Status Messages (AA) asks that results, progress or errors which do not take focus can still be announced, like a shopping cart's new count. role="status" does this (technique ARIA22): MDN says it is a polite live region, announced when the user is idle, and Edge exposed both status lines that way. MDN advises putting live regions in the initial HTML, as here.

Learn in your browser · Chapter 05 of 06

Keep the shortlist after a reload, know what localStorage is not for, and read what the Console tells you.

localStorage keeps text under text keys with no expiry date (MDN). It belongs to an origin (the scheme, host and port of an address), shared by every page there (HTML standard). Add these functions to the end of app.js, then make two edits: the state line becomes const state = { shortlist: load() }; and toggle calls save(); just before render();.

function load() {
  try {
    const saved = JSON.parse(localStorage.getItem('marigold-shortlist'));
    return Array.isArray(saved) ? saved : [];
  } catch (error) {
    console.warn('Saved shortlist ignored:', error.message);
    return [];
  }
}

function save() {
  try {
    localStorage.setItem('marigold-shortlist', JSON.stringify(state.shortlist));
  } catch (error) {
    console.warn('Shortlist not saved:', error.message);
  }
}

JSON.stringify turns the list into text and JSON.parse turns it back. A missing key gives null, not a list, hence the check. Non-JSON text makes JSON.parse throw a SyntaxError (ECMAScript), and a full store makes setItem throw QuotaExceededError (HTML standard). Both are caught, so the page keeps working.

Scroll sideways to see every column.

Reading errors. The Console shows each uncaught error with a link to its file and line, which opens that line in the Sources tool (Microsoft). Read the type and message first. From the tested files:

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
Uncaught ReferenceError: rendr is not defined
Saved shortlist ignored: Unexpected token 'o', "oops" is not valid JSON

The first came from line 15, cards.addEventListener, with defer removed: querySelector found nothing, so cards was null. The second, line 44, is a misspelt call: a ReferenceError means a name that does not exist (MDN). The third is load's own warning.

Learn in your browser · Chapter 06 of 06

Run code you did not write before you trust it, and know the faults to look for.

An AI assistant writes plausible JavaScript in seconds. Watch for invented APIs, global state in var names, innerHTML with user input, missing cleanup such as listeners re-added on every render (MDN: each new function is added again), and no keyboard handling. Treat its code as a stranger's draft: run it on a copy, and never paste passwords, keys or personal data into a prompt.

Written for this workbook, not by any product, this file shows those faults. Copy event-page to event-page-review, save this there as review.js, and point the copy's script line at it.

// review.js: written for this workbook to show common faults
var shortlist = [];

function showShortlist() {
  var visitor = document.getElementById('name').value;
  document.getElementById('shortlist-status').innerHTML =
    visitor + ' shortlisted: ' + shortlist.join(', ');
  document.querySelectorAll('.stall').forEach(function (stall) {
    stall.addEventListener('click', function () {
      shortlist.push(stall.querySelector('h3').innerText);
      showShortlist();
    });
  });
}

showShortlist();
localStorage.setObject('shortlist', shortlist);

Know your limits. All of this was measured in one browser, Edge 153, under automation and without a screen reader: announcements described are what the browser exposed. None of it makes a page WCAG conformant, so test with other browsers, a keyboard and a screen reader.