Ú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.

Úloha

Zadání (kontext úlohy)

Vlož JavaScriptový kód přímo do HTML souboru pomocí značky <script> umístěné v <head>. Kód by měl do konzole vypsat text „Načtení proběhlo“.

Cíl úlohy

Pochopíš, jak funguje vkládání JavaScriptového kódu do hlavičky stránky a jak to ovlivňuje pořadí načítání jednotlivých částí dokumentu.

Vstupní podmínky

• Máš k dispozici HTML dokument se základní strukturou, který obsahuje:

  • <!DOCTYPE html>,

  • párové tagy <html>, <head>, <body>.

• Uvnitř <body> je zatím prázdný obsah (žádný text ani kód).

• Soubor zatím neobsahuje žádný JavaScript – kód vložíš sám pomocí značky <script> do sekce <head>.

Požadovaný výstup

• Po otevření stránky v prohlížeči se v konzoli zobrazí text: Načtení proběhlo

Doplňující pokyny

• Otevři konzoli prohlížeče (F12 → Console) a ověř, že se zpráva skutečně zobrazila.

• Uvědom si, že kód v <head> se spouští ještě před vykreslením obsahu <body>.

Soubor

Odkaz na html soubor

Řešení úlohy

HTML

Co je zde splněno:

• Skript je v <head>, takže se vykoná hned při načítání stránky, ještě než se začne vykreslovat <body>.

• V konzoli (F12 → Console) se zobrazí text:
  Načtení proběhlo