Úloha 2 – Vložení JavaScriptu do těla stránky

Úvod k úloze

Umístění JavaScriptu přímo do těla dokumentu je nejčastější a zároveň nejbezpečnější způsob, jak propojit HTML a skript. Důvod je jednoduchý – kód se vykonává až po načtení viditelného obsahu stránky, takže JavaScript má k dispozici všechny prvky v DOM a může s nimi spolehlivě pracovat. Díky tomu se tento přístup hodí zejména pro interaktivní funkce, jako jsou reakce na kliknutí, validace formulářů nebo dynamické úpravy obsahu.

Teorie a principy

• Značka <script> může být vložena uvnitř <body>, obvykle na jeho konec, těsně před </body>.

• Tento způsob zajišťuje, že skript „uvidí“ všechny prvky, protože se načítá až poté, co byl HTML obsah vykreslen.

• Do těla dokumentu se vkládají zejména:

  • externí skripty s logikou webu,

  • skripty, které pracují s uživatelským rozhraním,

  • kódy závislé na prvcích zobrazených na stránce.

• Pokud je skript dlouhý, vždy je vhodné mít ho v externím souboru a do těla ho pouze připojit.

Praktické příklady kódu

Interní skript v těle

Externí skript v těle

Soubor script.js:

Typické chyby / záludnosti

• Umístění skriptu na začátek <body> – pokud pracuje s prvky, které ještě nejsou načteny, může selhat.

• Chybně napsaná cesta k externímu souboru – bez správného src se kód nenačte.

• Duplicitní vložení skriptů – vede k opakovanému vykonání stejné logiky.

• Zapomenuté uzavření tagu <script> – způsobí chybu v HTML parseru.

Shrnutí

• Skripty vkládané do těla se vykonávají až po načtení obsahu, proto jsou nejspolehlivější.

• Nejlepší praxe je umístit <script> těsně před uzavírací </body>.

• Do těla patří především interaktivní a funkční kód, který pracuje s DOM prvky.

• Správně používejte externí soubory pro přehlednost a udržitelnost.

Úloha

Zadání (kontext úlohy)

Vlož JavaScriptový kód přímo do HTML dokumentu, ale tentokrát umísti značku <script> na konec <body>. Kód by měl po načtení stránky zobrazit dialogové okno s textem „Stránka je načtena“.

Cíl úlohy

Porovnáš rozdíl mezi vložením kódu do <head> a do <body> a zjistíš, jak umístění skriptu ovlivňuje načítání a vykreslení stránky.

Vstupní podmínky

• Vycházíš ze stejného základního HTML dokumentu, který sis vytvořil v předchozí úloze.

• Dokument obsahuje pouze kostru stránky (<!DOCTYPE html>, <html>, <head>, <body>), ale zatím neobsahuje žádný JavaScriptový kód.

Požadovaný výstup

• Po otevření stránky v prohlížeči se zobrazí dialogové okno s textem: Stránka je načtena

Doplňující pokyny

• Vysvětli, proč se tento přístup používá častěji než umístění skriptu do hlavičky (např. rychlejší načítání obsahu stránky, protože HTML se vykreslí dříve, než se začne spouštět JavaScript).

• Ověř funkčnost tak, že stránku otevřeš v prohlížeči.

Řešení úlohy

Co je zde splněno:

• Po načtení celé stránky se okamžitě zobrazí dialogové okno s textem:
  „Stránka je načtena“.

• Skript se spustí až po načtení obsahu stránky, protože je umístěný na konci <body>.
  
  

Proč se tento přístup používá častěji než vložení do <head>

• Pokud dáme <script> do <head>, prohlížeč musí zastavit vykreslování stránky, načíst a spustit JavaScript → tím může zpomalit načítání obsahu.

• Pokud vložíme <script> na konec <body>, prohlížeč nejprve vykreslí HTML obsah a teprve potom spustí skript → stránka je rychleji viditelná pro uživatele.

• Je to tedy běžná praxe, pokud nepotřebujeme spouštět kód ihned při načítání hlavičky (např. pro konfiguraci).