JavaScript a böngészőben: window, document és Web API-k

Becsült olvasási idő: 12–15 perc

Kulcsfogalmak: ECMAScript · Web API · window · document · object · method Az egyik legfontosabb különbség: a JavaScript nyelv és a böngésző környezete nem ugyanaz.

ECMAScript / JavaScript core
├─ const / let
├─ function
├─ object / array
├─ Math.round()
├─ Math.min()
└─ Math.max()

Browser Web APIs
├─ window
├─ document
├─ DOM
├─ addEventListener()
├─ PointerEvent
├─ console
└─ requestAnimationFrame()

A nyelv önmagában nem tudja, mi az a HTML-oldal, böngészőablak vagy pointer. Ezeket a futtatási környezet adja hozzá.

Mi az a window?

A böngészőben a window a böngészési környezet legfelső szintű globális objektuma.

window
├─ document
├─ console
├─ location
├─ history
├─ innerWidth
├─ setTimeout()
└─ requestAnimationFrame()

window, nem windows. Semmi köze a Microsoft Windows operációs rendszerhez.

Mi az a document?

A document az aktuális HTML-dokumentumhoz tartozó objektum.

window
└─ document
   └─ DOM
      ├─ #stage
      ├─ #signal
      └─ #snapshotButton

Technikailag a window.document ugyanarra az objektumra mutat, amelyet egyszerűen document néven használunk.

Miért document.querySelector()?

Mert a HTML-dokumentum elemei között keresünk:

const signal = document.querySelector("#signal");

Nem a JavaScript nyelvtől kérjük, hogy keressen HTML-t, hanem a böngésző document objektumának egyik metódusát használjuk.

Miért stage.getBoundingClientRect()?

Mert ennek a konkrét DOM-elemnek a pozíciójára és méretére vagyunk kíváncsiak.

const bounds = stage.getBoundingClientRect();

Miért stage.addEventListener("pointermove", ...)?

Mert csak a stage területén belüli pointermozgás érdekel minket.

stage.addEventListener("pointermove", updateFromPointer);

Miért snapshotButton.addEventListener("click", ...)?

Mert a konkrét gomb kattintását figyeljük.

snapshotButton.addEventListener("click", logSnapshot);

Miért window.addEventListener("resize", ...)?

Mert itt a böngészőablak méretének változása érdekel minket, nem egy HTML-elem saját eseménye.

window.addEventListener("resize", reset);

Miért console.table()?

A console a böngésző által biztosított diagnosztikai objektum; a table() ennek egy metódusa.

console.table({
  inputX: pointerX,
  inputY: pointerY,
});

object.method()

Nagyon hasznos olvasási minta:

OBJECT . METHOD(...)

document       . querySelector(...)
stage          . getBoundingClientRect()
stage          . addEventListener(...)
snapshotButton . addEventListener(...)
window         . addEventListener(...)
console        . table(...)

A pont bal oldalán lévő részre kérdezz rá: kin vagy min hajtjuk végre ezt a műveletet?

Miért működik néha window nélkül?

A böngészőben a window globális objektum, ezért több globális tag közvetlenül is elérhető.

window.setTimeout(run, 1000);
setTimeout(run, 1000);

Oktatásnál néha azért írjuk ki explicit a window-t, mert láthatóbbá teszi, melyik környezethez tartozik a művelet.

Ellenőrző kérdések

1. A document a JavaScript nyelv része vagy böngészős API?
2. Miért nem window.querySelector("#signal") a szokásos forma?
3. Mit jelent az object.method() olvasási minta?
4. Miért a window figyeli a resize eseményt?