JavaScript: DOM, 10–13

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32// Pure. No DOM, so it can be checked directly.
const sphereVolume = (radius) => (4 / 3) * Math.PI * radius ** 3;

// Parsing and validating, kept apart from both the maths and the DOM.
function parseRadius(text) {
  if (typeof text !== 'string' || text.trim() === '') return { ok: false, why: 'Enter a radius.' };
  const n = Number(text);
  if (!Number.isFinite(n)) return { ok: false, why: `${JSON.stringify(text)} is not a number.` };
  if (n <= 0) return { ok: false, why: 'The radius must be above zero.' };
  return { ok: true, value: n };
}

const input = el('input', { id: 'radius', value: '3' });
const out = el('p', { id: 'out' });
const button = el('button', { id: 'go' }, 'Calculate');
document.body.appendChild(el('form', {}, [input, button, out]));

button.addEventListener('click', () => {
  const parsed = parseRadius(input.value);
  out.textContent = parsed.ok ? `Volume = ${sphereVolume(parsed.value).toFixed(4)}` : parsed.why;
});

console.log('value is a string:', typeof input.value, JSON.stringify(input.value));
fire(button, 'click');
console.log('r=3  ->', out.textContent);

for (const bad of ['', '   ', 'abc', '-2', '0']) {
  input.value = bad;
  fire(button, 'click');
  console.log(JSON.stringify(bad).padEnd(7), '->', out.textContent);
}
console.log("Number('') is", Number(''), '<- which is why the trim guard exists');

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43// Inline SVG data URLs, so nothing is fetched. The original lists three Flickr
// URLs; those links are dead, and loading them would break the offline promise.
const swatch = (fill, w, h) =>
  'data:image/svg+xml;utf8,' + encodeURIComponent(
    `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}">` +
    `<rect width="100%" height="100%" fill="${fill}"/></svg>`);

const images = [
  { src: swatch('#3055d8', 240, 160), width: 240, height: 160, alt: 'A blue placeholder, 240 by 160' },
  { src: swatch('#17734b', 320, 195), width: 320, height: 195, alt: 'A green placeholder, 320 by 195' },
  { src: swatch('#a3341f', 500, 343), width: 500, height: 343, alt: 'A red placeholder, 500 by 343' },
];

// random is a PARAMETER. That is what makes a random choice testable: the page
// passes Math.random, a test passes something it controls.
function showRandomImage(host, list, random = Math.random) {
  const pick = list[Math.floor(random() * list.length)];   // floor, never round
  host.textContent = '';
  const img = document.createElement('img');
  img.src = pick.src;
  img.width = pick.width;          // stated so the layout does not jump
  img.height = pick.height;
  img.alt = pick.alt;              // never omit this
  host.appendChild(img);
  return img;
}

const host = el('p', { id: 'host' });
document.body.appendChild(host);

// A fixed sequence stands in for randomness.
let i = 0;
const sequence = [0, 0.5, 0.99];
const nextFixed = () => sequence[i++ % sequence.length];

for (const _ of sequence) {
  const img = showRandomImage(host, images, nextFixed);
  console.log('picked', img.getAttribute('width') + '\u00d7' + img.getAttribute('height'), '| alt:', img.alt);
}

// Why floor and not round: round would reach an index that does not exist.
console.log('Math.round(0.99 * 3) =', Math.round(0.99 * 3), '<- index 3 of 3 is undefined');
console.log('Math.floor(0.99 * 3) =', Math.floor(0.99 * 3), '<- always in range');

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39const words = ['section', 'users', 'problems', 'skill'];
const para = el('p', { id: 'para' }, [
  'We have just started this ', el('b', {}, 'section'),
  ' for the ', el('b', {}, 'users'),
  ' who want to work with various JavaScript ', el('b', {}, 'problems'),
  ' and write scripts online to test their JavaScript ', el('b', {}, 'skill'), '.',
]);
const trigger = el('a', { href: '#', id: 'trigger' }, 'Hover here');
document.body.appendChild(el('p', {}, trigger));
document.body.appendChild(para);

const bolds = para.querySelectorAll('b');

function paint(on) {
  for (const b of bolds) {
    b.style.backgroundColor = on ? '#fff3bf' : '';
    b.style.outline = on ? '2px solid #f0c000' : '';
  }
}

trigger.addEventListener('mouseover', () => paint(true));
trigger.addEventListener('mouseout', () => paint(false));
// A keyboard user never fires mouseover. Without these two they get nothing.
trigger.addEventListener('focus', () => paint(true));
trigger.addEventListener('blur', () => paint(false));

// querySelectorAll gives a NodeList: it has forEach, but not filter or map.
const highlighted = () => [...bolds].filter((b) => b.style.backgroundColor === '#fff3bf').length;

console.log('bold words found:', bolds.length, [...bolds].map((b) => b.textContent));
console.log('highlighted at rest:', highlighted());
fire(trigger, 'mouseover');
console.log('after mouseover   :', highlighted());
fire(trigger, 'mouseout');
console.log('after mouseout    :', highlighted());
fire(trigger, 'focus');
console.log('after focus       :', highlighted(), '<- keyboard users get the same');
fire(trigger, 'blur');
console.log('after blur        :', highlighted());

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60// ---- the stand-in ----------------------------------------------------------
// A debounce needs a timer the test can drive, so the clock is injected. The
// window stand-in has resizeTo(w, h), which sets the size and fires 'resize' —
// a real window has no such method; it is how a test resizes without a browser.
function makeClock() {
  let now = 0;
  let jobs = [];
  let nextId = 1;
  return {
    setTimeout(fn, ms) { const id = nextId++; jobs.push({ id, fn, at: now + ms }); return id; },
    clearTimeout(id) { jobs = jobs.filter((j) => j.id !== id); },
    advance(ms) {
      now += ms;
      const due = jobs.filter((j) => j.at <= now).sort((a, b) => a.at - b.at);
      jobs = jobs.filter((j) => j.at > now);
      for (const job of due) job.fn();
    },
  };
}

// ---- the answer ------------------------------------------------------------
const out = el('pre', { id: 'out' });
document.body.appendChild(out);

const clock = makeClock();
let rawEvents = 0;
let workDone = 0;

const size = () => ({ width: window.innerWidth, height: window.innerHeight });

function report() {
  const { width, height } = size();
  out.textContent = `width ${width}\nheight ${height}`;
}

let timer = null;
window.addEventListener('resize', () => {
  rawEvents++;
  report();                                  // cheap: always fine
  clock.clearTimeout(timer);
  timer = clock.setTimeout(() => { workDone++; }, 150);   // expensive: debounced
});

report();          // once up front, so it is never blank

// Snapshotted NOW. Asserting against out.textContent later would read the value
// after the resizes below, which is a different claim.
const atRest = out.textContent;

console.log('at rest        :', atRest.replace('\n', ', '));

// A drag fires many events in quick succession.
for (const [w, h] of [[1000, 700], [900, 650], [800, 600], [760, 580]]) {
  window.resizeTo(w, h);
  clock.advance(20);                          // still mid-drag
}
console.log('during a drag  : events', rawEvents, 'work', workDone);
clock.advance(200);                           // the drag stopped
console.log('after it settles: events', rawEvents, 'work', workDone);
console.log('final size     :', out.textContent.replace('\n', ', '));