Úloha 1 – Vložení JavaScriptu do hlavičky stránky

Úvod k úloze

Vkládání skriptu do hlavičky stránky patří mezi základní dovednosti při práci s JavaScriptem a HTML. Tento postup se využívá hlavně tehdy, když je potřeba načíst kód nebo knihovny dříve, než se zobrazí samotný obsah stránky. Typicky jde například o analytické skripty, měřicí nástroje nebo globální nastavení aplikace. Správné pochopení tohoto způsobu vložení je důležité, protože má vliv na rychlost načítání stránky i na to, zda bude JavaScript fungovat podle očekávání.

Teorie a principy

Tag <script> lze umístit do hlavičky (<head>) i těla stránky. Pokud se nachází v <head>, spustí se dříve, než se načtou prvky v <body>.
Nevýhoda: pokud skript pracuje s elementy v těle dokumentu, může selhat, protože v době jeho spuštění ještě nejsou k dispozici.
Řešení:
- Použít atribut defer, který zajistí, že se skript načte při načítání stránky, ale spustí až po vykreslení obsahu.
- Nebo počkat na událost DOMContentLoaded, která signalizuje, že HTML je načtené.
Do hlavičky se proto často umisťují pouze skripty, které nepotřebují přímý přístup k DOM prvkům – například knihovny nebo globální proměnné.

Praktické příklady kódu

Skript vložený do hlavičky

Použití atributu defer

Soubor script.js se načte během vykreslování stránky, ale spustí až po načtení obsahu v <body>.

Typické chyby / záludnosti

Pokus o manipulaci s DOM před načtením <body> – skript nenajde prvky a skončí chybou.
Zapomenutý atribut defer u externích souborů v hlavičce – vede k problémům při práci s HTML elementy.
Příliš velké nebo blokující skripty v <head> – mohou zpomalit načítání celé stránky.

Shrnutí

Skript lze vložit do hlavičky, ale spustí se před načtením obsahu stránky.
Do hlavičky patří hlavně konfigurační a podpůrné kódy (např. knihovny, analytika).
Pokud skript pracuje s DOM prvky, je nutné použít defer nebo čekat na událost DOMContentLoaded.
Vkládání do hlavičky má vliv na rychlost a spolehlivost stránky, proto je třeba zvolit vhodnou strategii.