Slovník pojmů

JavaScript

JavaScript doplňuje webové rozhraní o chování: reaguje na události, načítá data a aktualizuje stav. Jeho přítomnost ale nemění nedůvěryhodný browser na bezpečné místo pro business pravidla nebo oprávnění.

Stručná definice

Jazyk běží v hostitelském prostředí, ne jen uvnitř stránky.

JavaScript je implementace standardu ECMAScript s doplněním API konkrétního runtime. V prohlížeči pracuje s dokumentem, událostmi, sítí a úložištěm; na serveru může běžet v jiném prostředí s jinými API. Proto DOM, window nebo fetch nejsou samy o sobě vlastností každého JavaScript programu.

Na webu JavaScript často zlepšuje uživatelskou zkušenost: okamžitě validuje formulář, přepne filtr, otevře dialog nebo načte další data z API. Server přesto znovu validuje vstup, autentizuje klienta a autorizuje operaci. Útočník může request vytvořit bez kliknutí na konkrétní tlačítko či bez spuštění vašeho frontendu.

K čemu se používá

Interakce uživatele, stav komponent a volání API

JavaScript má největší přínos tam, kde základní HTML rozhraní potřebuje rychlou, ale stále bezpečnou odezvu.

filtry katalogu, varianty produktu, košík a průběžné načítání dat
otevření dialogu, správa focusu a ovládání komponent klávesnicí
odeslání API requestu a zobrazení průběhu, chyby nebo nového stavu
modulární frontendové komponenty a sdílené validační či formátovací funkce
build nástroje, testy a server-side použití v runtime, který pro něj poskytuje prostředí

Praktický příklad

Načtení skladové dostupnosti po volbě varianty

Po změně varianty frontend načte veřejně dostupná data a upraví text v existujícím prvku. Chybový stav neignoruje: síť může selhat a odpověď nemusí mít očekávanou strukturu. Ukázka neprovádí nákup ani autorizovanou změnu; taková akce by se ověřovala na serveru.

Práce s textContent nevkládá serverovou odpověď jako HTML. Pokud by aplikace bez kontroly použila innerHTML pro nedůvěryhodná data, mohla by otevřít XSS riziko.

JavaScript

const availability = document.querySelector('[data-availability]');

const response = await fetch('/api/variants/42/availability');
if (!response.ok) throw new Error('Dostupnost nelze načíst.');

const data = await response.json();
availability.textContent = data.inStock ? 'Skladem' : 'Není skladem';

Jak funguje

Od události uživatele po aktualizované rozhraní

Asynchronní kód neznamená paralelní provedení všech změn bez pravidel; je nutné řídit stav, chyby a pořadí odpovědí.

Uživatel provede akci Prohlížeč vyvolá událost kliknutí, změny formuláře nebo navigace. Nativní HTML zůstává funkční cestou, pokud je to možné.
Handler ověří lokální stav Frontend zkontroluje základní vstup a upraví rozhraní, ale nepovažuje tuto kontrolu za finální ochranu dat.
Fetch zavolá API Request nese URL, metodu, hlavičky a tělo podle kontraktu. Prohlížeč může omezit čtení odpovědi pravidly CORS.
Promise vyřeší výsledek Kód zpracuje úspěch, síťovou chybu i chybný HTTP status; neúspěch nesmí uživatele ponechat v nepravdivém stavu.
DOM se aktualizuje bezpečně Rozhraní zobrazí nový stav přes text nebo kontrolovanou komponentu, zachová focus a nepřidává nedůvěryhodný obsah jako HTML.

Důležité pojmy a synonyma

ECMAScript, DOM a runtime nejsou stejná věc.

JavaScript se někdy zkracuje jako JS; ECMAScript je standard jazyka, zatímco browser API poskytuje konkrétní prostředí.

Proměnné, funkce a objekty

Jazyk pracuje s hodnotami, funkcemi, objekty a moduly. Dynamické typování usnadňuje začátek, ale u většího kódu vyžaduje dobré kontrakty a testy.

DOM a události

DOM je reprezentace HTML dokumentu. Události dovolují reagovat na akce uživatele, ale handler musí řešit i klávesnici, focus a rušení akce.

Promise a async/await

Promise reprezentuje budoucí výsledek asynchronní operace. async/await zlepšuje čitelnost, neodstraňuje nutnost zpracovat chybu, timeout či závod odpovědí.

Moduly

import a export vymezují závislosti mezi soubory. Cyklické či příliš hluboké závislosti komplikují načítání i pochopení frontendu.

Web API a runtime

fetch, DOM a localStorage poskytuje prohlížeč. Jiný runtime má jiné API, proto kód nemá bez podmínky předpokládat browserové globální objekty.

Vztah k ostatním technologiím

Frontend může zrychlit práci, ale server zůstává rozhodovací hranicí.

Zpracování v prohlížeči a backendové ověření se doplňují, protože klientský kód není důvěryhodné prostředí.

TypeScript: Přidává statickou typovou kontrolu před spuštěním a po překladu vytváří JavaScript. Typy nevalidují síťová data za běhu.
API a JSON: Frontend čte strukturovanou odpověď, ale server rozhoduje o kontraktu, oprávněních a změně business dat.
CORS: Browser omezuje, zda skript z jiného originu smí odpověď přečíst. CORS není autorizace endpointu.
XSS a CSP: XSS zneužívá nečekané spuštění skriptu; CSP může část cest omezit. Ani jedno nenahrazuje bezpečnou práci s daty.

Výhody a omezení

Interaktivita má cenu jen se zvládnutým stavem a bezpečnou degradací.

Přínosy

rychlá odezva na akci uživatele a průběžná aktualizace rozhraní
moduly a sdílené funkce pro větší frontend
přímá práce s browserovým DOM, formuláři a HTTP API
asynchronní komunikace bez úplného reloadu stránky

Rizika a časté chyby

považovat klientskou validaci za ochranu serverové operace
použít innerHTML pro nedůvěryhodný text a otevřít XSS
nezachytit neúspěšnou odpověď nebo později doručený starší request
rozbít klávesové ovládání a focus při vlastním dialogu
nahradit jednoduchý odkaz nebo formulář zbytečně složitou klientskou logikou

Kdy jej použít

Rozšířit funkční základ, ne jej bezdůvodně nahradit.

JavaScript je vhodný pro filtrování katalogu, postupné načítání, interaktivní graf, komplexnější formulář nebo klienta samostatného API. U obyčejné navigace, odeslání formuláře a čtení obsahu je často hodnotnější nejprve dobře fungující HTML a serverový tok. Takové rozhraní lépe zvládne pomalé připojení, chybu skriptu i běžné sdílení URL.

Rozsah frontendu má odpovídat produktu a týmu. Větší aplikace potřebuje modulární hranice, typovou kontrolu, testy a přehled o stavu. Menší stránka může být čitelnější s několika cílenými moduly než s plnohodnotnou klientskou architekturou.

Na co myslet

Chyby, focus a serverové ověření jsou součástí funkce.

Kód pro šťastnou cestu nestačí, pokud se data načítají přes síť a rozhraní ovládají různí uživatelé.

předem určit loading, empty, error a retry stav asynchronního requestu
zachovat nativní HTML cestu pro navigaci a formulář, pokud není důvod ji blokovat
text z API vkládat jako text, ne jako neověřené HTML
po otevření či zavření dialogu správně řídit focus a klávesu Escape
validovat a autorizovat každou změnu na serveru bez závislosti na klientské logice

Časté otázky

JavaScript v praxi

Je JavaScript totéž co ECMAScript?

ECMAScript je standard jazyka. JavaScript v prohlížeči používá tento jazyk spolu s browser API, například DOM a fetch.

Je JavaScript bezpečnostní ochrana API?

Ne. Kód v browseru může uživatel změnit nebo obejít. API proto vždy ověřuje identitu, oprávnění, vstup a business pravidla na serveru.

Nahrazuje async/await zpracování chyb?

Ne. Zpřehlední zápis asynchronního kódu, ale stále je nutné zachytit chybu, zkontrolovat HTTP status a pracovat s neaktuální odpovědí.

Je DOM součástí JavaScriptu?

DOM poskytuje prohlížeč jako hostitelské API. Jazyk JavaScript lze používat i v prostředí, které žádný DOM nemá.

Jak stavím integrační rozhraní v praxi

Frontend propojuji s API přes jasný kontrakt a serverové hranice.

Při vývoji aplikací řeším práci s daty v browseru vedle API, validace, bezpečnosti a odolného zpracování chyb.

Jak pracuji s API a integracemi Nezávazně probrat projekt