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

Úloha

Zadání (kontext úlohy)

Vytvoř externí soubor script.js a do něj vlož jednoduchý kód, který vypíše do konzole zprávu „Externí soubor je načten“. Tento soubor pak připoj do HTML stránky pomocí atributu src v tagu <script>.

Cíl úlohy

Naučíš se připojit externí JavaScriptový soubor a ověřit jeho správné načtení.

Vstupní podmínky

• Máš k dispozici HTML dokument se základní strukturou (<!DOCTYPE html>, <html>, <head>, <body>).

• Dokument zatím neobsahuje žádný JavaScript.

Požadovaný výstup

• Po načtení stránky se v konzoli zobrazí zpráva z externího souboru: Externí soubor je načten

Doplňující pokyny

• Ujisti se, že cesta v atributu src je napsaná správně (např. src="script.js").

• Soubor script.js ulož do stejné složky, kde máš i svůj HTML dokument.

Soubory

Odkaz na js soubor
Odkaz na html soubor

Řešení úlohy

Co je zde splněno:

• Při otevření index.html v prohlížeči se do konzole vypíše zpráva:
  "Externí soubor je načten"

• Soubor script.js musí být uložený ve stejné složce jako index.html (pokud je jinde, cesta tomu musí odpovídat, např. js/script.js).