Vytváření webových stránek vyžaduje kompetentní používání programovacích jazyků, jako je HTML, CSS a JavaScript. Někdy však mohou být skripty příčinou přeplnění kódu, což ztěžuje jeho čtení a další podporu. Vkládání JavaScript kódu do externího souboru je jedním ze způsobů, jak usnadnit vývoj webu a zlepšit efektivitu projektu.

Přenesením kódu do samostatného souboru lze vytvořit samostatné úložiště pro všechny skripty, což zaručuje opětovné použití a udržitelnost. Kromě toho umožňuje uvolnit hlavní dokument HTML ze zátěže, vyvážit zatížení serveru a zlepšit načítání stránky pro uživatele.

Chcete-li přenést skripty do externího souboru, musíte vytvořit samostatný soubor s příponou .js a přenést do něj všechny potřebné skripty. Tento soubor se poté připojí k HTML stránce pomocí atributové značky src, která označuje cestu k externímu souboru JavaScript. Nezapomeňte také přidat uzavírací značku. Například:

Je důležité poznamenat, že uzavírací značka je nezbytná pouze v XHTML, ale pro HTML 5 se doporučuje používat ji vždy. Po připojení externího souboru budou skripty fungovat stejně jako při psaní uvnitř HTML stránky, ale skripty samotné již nejsou přítomny v kódu HTML, což výrazně usnadňuje jeho vnímání a udržování.

• Vytvořit soubor s příponou .js a uložit do něj celý kód JavaScriptu. Poté připojte tento soubor k stránce HTML pomocí značky
• Pomocí správce balíčků, jako je npm nebo yarn, můžete spravovat závislosti a sloučit všechny soubory skriptů do jednoho. Poté pouze tento sloučený soubor připojte k stránce HTML.

1. Zadejte cestu k souboru skriptu vzhledem k aktuálnímu adresáři. Pokud je například skript v podsložce scripts, cesta bude vypadat takto: .
2. Nezapomeňte ve štítku uvést atributy type a charset .

Tímto způsobem můžete ukládat a používat skripty v jednotlivých souborech, což usnadní jejich úpravu a opětovné použití na různých stránkách vašeho webu.

Připojení externího souboru k HTML stránce

Chcete-li připojit externí soubor s JavaScript kódem na stránku HTML, musíte použít značku s atributem src označující cestu k souboru:

Je důležité si uvědomit, že připojení externího souboru s JavaScript kódem se doporučuje umístit před zavírací značku pro optimální načítání stránky.

Stejný přístup lze použít i k připojení externích souborů CSS na stránku HTML. K tomu je třeba použít značku s atributem href označující cestu k souboru:

Zde cestuj_k_soubor.css - je to relativní nebo absolutní cesta k externímu souboru CSS na serveru.

Prostřednictvím připojení externích souborů k stránce HTML lze tedy kód rozdělit do několika samostatných souborů, což umožňuje pohodlnější správu a aktualizaci kódu a také lepší výkon a optimalizaci načítání stránky.

Použití atributu " src " pro externí skript

Externí soubor musí mít příponu."js " a obsahovat pouze JavaScript kód. Celý kód, který je mezi otevíracím a zavíracím tagem, bude ignorován. Místo něj prohlížeč stáhne a provede kód z externího souboru.

Použití atributu " src " pro externí skript má několik výhod:

• Zlepšení čitelnosti a ovladatelnosti kódu. Umístěním skriptu do externího souboru můžete kód rozdělit do logických bloků, což usnadňuje jeho pochopení a doprovod.
• Mezipaměť. Při použití atributu "src" prohlížeč načte a zavěsí externí soubor, což umožňuje rychlejší načítání stránky při opakovaných návštěvách uživatelů.
• Snadná aktualizace. Pokud potřebujete aktualizovat skript, stačí změnit pouze externí soubor a zbytek kódu zůstane stejný.

Je důležité si uvědomit, že pořadí spouštění a spouštění skriptů může být důležitým parametrem. Při použití externího skriptu s atributem "src" prohlížeč načte skripty postupně, v pořadí, v jakém jsou uvedeny v kódu. Pokud tedy máte mezi skripty závislosti, ujistěte se, že jsou připojeny ve správném pořadí.

Umístění skriptu před zavírací značkou

Hlavní výhoda umístění skriptu před uzavírací značkou umožňuje prohlížeči plně načíst webovou stránku před spuštěním skriptu. To je zvláště užitečné, když skript vyžaduje přístup k určitým prvkům DOM nebo závisí na stahování jiných zdrojů, jako jsou obrázky nebo styly.

Níže uvedený příklad ukazuje, jak umístit skript před zavírací značku :

Привет, мир!
Ваш контент здесь.

Je zřejmé, že umístění skriptu před zavírací značkou zlepšuje výkon a optimalizuje načítání webové stránky. Pokud skript vyžaduje přístup k prvkům DOM nebo závisí na jiných prostředcích, doporučuje se tento přístup použít.