Úloha 4 – Chyba při načítání externího skriptu

Úvod k úloze

Velmi častou chybou začátečníků je nesprávné připojení externího souboru JavaScriptu. Stačí malá chyba v cestě k souboru nebo špatné umístění tagu <script> a kód se vůbec nenačte. Prohlížeč přitom obvykle neukáže viditelnou chybu na stránce – jen skript prostě „nefunguje“. Proto je důležité se naučit tyto chyby rozpoznat a opravit.

Teorie a principy

• Atribut src musí přesně odpovídat umístění souboru na disku/serveru.

  • Pokud je soubor ve stejné složce jako HTML, stačí src="script.js".

  • Pokud je ve složce js, je potřeba psát src="js/script.js".

• Tag <script> nesmí současně obsahovat atribut src a vnitřní kód – musí být buď externí, nebo interní.

• Pořadí načítání hraje roli – externí soubor musí být načtený až tehdy, když jsou k dispozici prvky, se kterými pracuje.

Praktické příklady kódu

Chybná verze (soubor je uložen ve složce js/)

Soubor je ale uložený jako js/script.js, takže cesta src="script.js" nefunguje.

Správná verze

Ukázka obsahu js/script.js


Typické chyby / záludnosti

• Špatná cesta – nejčastější příčina (např. chybějící složka v src).

• Zapomenutá přípona .js – prohlížeč soubor nenajde.

• Použití zpětných lomítek \ místo / – správně se píše js/script.js, nikoliv js\script.js.

• Kombinace src a vnitřního kódu – není povoleno:

Shrnutí

• Pokud skript „nefunguje“, první krok je zkontrolovat cestu k souboru.

• Atribut src musí přesně odpovídat struktuře složek.

• Tag <script> může být buď s src, nebo s vnitřním kódem – nikdy obojí.

• Správné umístění (nejlépe konec <body> nebo v <head> s defer) je důležité pro funkčnost.

Úloha

Zadání (kontext úlohy)

Do HTML souboru vlož značku <script src="neexistuje.js"></script> a sleduj, co se stane v konzoli prohlížeče.

Cíl úlohy

Zjistíš, jak se projevuje chyba při špatně uvedené cestě k externímu JavaScriptovému souboru a naučíš se číst chybové hlášky v konzoli.

Vstupní podmínky

• Ve složce máš výchozí HTML soubor, který se pokouší načíst JavaScript, ale vyhazuje chybu, protože potřebný .js soubor nebyl nalezen.

• Při řešení tohoto úkolu nesmíš upravit jediný řádek HTML ani JS.

Požadovaný výstup

• Po načtení stránky se v konzoli zobrazí chybová hláška prohlížeče informující o nemožnosti načíst soubor neexistuje.js.

Doplňující pokyny

• Otevři konzoli prohlížeče (F12 → Console) a pozorně si přečti chybové hlášení.

• Podle zobrazené chyby zjisti, co je špatně a jak bys mohl cestu k souboru opravit, aniž bys v tomto úkolu kód měnil.

Soubory

Odkaz na js soubor
Odkaz na html soubor

Řešení úlohy

Mapa souborů

Uloha4/
├── index.html
└── js/
    └── uloha4/
        └── Uloha-4.js

Co je zde splněno:
Řešení je jednoduché: Aby úloha fungovala a v konzoli se objevila požadovaná zpráva, je nutné uložit JavaScriptový soubor přesně do cesty, kterou odkazuje HTML dokument. 
To znamená, že vytvoříš složky js/uloha4/ a do nich uložíš soubor s názvem Uloha-4.js.
Díky tomu se odkaz <script src="js/uloha4/Uloha-4.js"></script> stane platným, prohlížeč soubor najde a spustí ho. Není potřeba měnit jediný řádek v HTML ani v samotném JavaScriptu – stačí dodržet správnou složkovou strukturu a pojmenování souboru.