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