Fogalomtár és gyors ismétlés

Becsült olvasási idő: 5–8 perc

Kulcsfogalmak: glossary · DOM · Web API · callback · responsive · MainLoop

Input

Információforrás vagy csatorna, amelyből a rendszer adatot kaphat.

Event

Egy megtörtént esemény, például pointermove, click, keydown vagy resize.

Event data

Az eseményobjektumon keresztül kapott információ, például clientX vagy key.

Rule / Process

Az adat átalakításának szabálya vagy feldolgozási lépése.

State

A rendszer megtartott, aktuális állapota, amelyet későbbi működések használnak.

Render

Az a lépés, amely a state alapján frissíti a megjeleníthető állapotot. A Signal Labban ez DOM/CSS módosítás.

Output

A rendszer érzékelhető eredménye: kép, hang, fény, mozgás, hálózati üzenet stb.

HTML

A webes dokumentum struktúráját és jelentését leíró markup nyelv.

CSS

A dokumentum megjelenését, layoutját és reszponzív szabályait leíró nyelv.

JavaScript / ECMAScript

A programozási nyelv. A böngészős API-k nem mind a nyelv részei.

DOM

Document Object Model: a dokumentum böngésző által létrehozott, programozható objektummodellje.

document

Az aktuális HTML-dokumentumhoz tartozó böngészős objektum.

window

A böngészőben elérhető globális objektum és böngészési környezet. Nem a Windows operációs rendszer.

Web API

A futtatási környezet — itt a böngésző — által a JavaScripthez adott funkcionalitás.

Object

Értékek és működések együtt kezelhető struktúrája. Például document, window vagy egy DOM-elem.

Property

Egy objektumhoz tartozó érték, például event.clientX.

Method

Egy objektumhoz tartozó függvény, például document.querySelector().

Function

Újra felhasználható, meghívható kódblokk.

Callback

Olyan függvény, amelyet egy másik rendszer később meghív.

Function reference

A függvény maga, hívás nélkül: render.

Function call

A függvény végrehajtása: render().

const

Olyan változókötés, amelyhez később nem rendelünk másik értéket.

let

Olyan változókötés, amelyhez később új értéket rendelhetünk.

querySelector()

Az első, CSS-szelektorra illeszkedő DOM-elemet keresi.

addEventListener()

Eseményt és callbacket kapcsol össze.

PointerEvent

Pointereseményhez tartozó eseményobjektum típusa.

clientX / clientY

A pointer viewporthoz viszonyított koordinátája.

getBoundingClientRect()

Egy DOM-elem viewporthoz viszonyított pozíciójáról és méretéről ad adatot.

Local coordinate

Egy adott elemhez vagy koordinátarendszerhez viszonyított koordináta.

clamp

Egy értéket minimum és maximum között tart.

mapRange

Egy értéket egyik számtartományból egy másikba képez át.

.style

Egy DOM-elem inline CSS-stílusainak programozható felülete.

.textContent

Egy DOM-elem szöveges tartalma.

Template literal

Backtickkel írt JavaScript string, amelybe ${...} formában értéket illeszthetünk.

Media query

Feltételes CSS-szabály, például viewport-szélesség vagy felhasználói preferencia alapján.

Responsive

Olyan felület vagy rendszer, amely különböző körülményekhez alkalmazkodik.

MainLoop

Folyamatos, ismétlődő végrehajtási modell, gyakran frame-alapon.

Event-driven

Olyan végrehajtási modell, amely események bekövetkezésekor futtat működést.

A teljes lánc

INPUT
 ↓
EVENT + DATA
 ↓
RULE / PROCESS
 ↓
STATE
 ↓
RENDER
 ↓
OUTPUT

Ha ezt a láncot felismered, már nem csak egy konkrét programot olvasol. Rendszert látsz.