Úloha 3 – Připojení externího JavaScriptového souboru

Úvod k úloze

Nejčastější a zároveň doporučený způsob, jak do webové stránky připojit JavaScript, je pomocí externího souboru. Díky tomu oddělíme obsah HTML od logiky programu a získáme přehlednější, lépe udržovatelný kód. Stejný soubor navíc můžeme využít na více stránkách, což šetří práci i čas. Externí skripty se načítají pomocí značky <script> s atributem src, která prohlížeči řekne, odkud má kód načíst.

Teorie a principy

Externí soubor je prostý textový soubor s příponou .js (např. script.js).
Připojuje se do HTML pomocí značky <script src="názevSouboru.js"></script>.
Umístění může být v <head> i na konci <body>:
- v <head> spolu s atributem defer, pokud je potřeba skript načíst hned, ale spustit až po načtení obsahu,
- nebo na konci <body>, což je nejběžnější praxe.
Výhody:
- čistší a přehlednější HTML,
- možnost opětovného použití,
- snadná údržba a ladění kódu.
Nevýhoda:
- vyžaduje další HTTP požadavek na soubor (což je drobný výkonový detail, dnes však často řešený kešováním).

Praktické příklady kódu

HTML soubor (index.html)

Externí soubor (script.js)

Typické chyby / záludnosti

Chybná cesta k souboru – src="script.js" funguje jen tehdy, je-li soubor ve stejné složce jako HTML. Pokud je v podsložce, je potřeba napsat například src="js/script.js".
Zapomenutý atribut defer při vložení do hlavičky – bez něj se skript spustí dřív, než je HTML vykreslené.
Kombinace kódu uvnitř <script> a src najednou – není povolená, buď používáme externí, nebo vnitřní kód.
Vícenásobné připojení stejného souboru – vede k opakovanému spuštění.

Shrnutí

Externí soubor s JavaScriptem připojujeme přes <script src="soubor.js"></script>.
Nejlepší praxe je umístit jej na konec <body> nebo do <head> s atributem defer.
Externí skripty zajišťují čistotu, opakovatelnost a udržitelnost kódu.
Dejte si pozor na správné cesty, duplicitní připojení a pořadí načítání.