Interní externí JavaScénář: Učte se s příkladem
James Hartman
⚡ Chytré shrnutí
Interní a externí JavaSkripty popisují dvě podporovaná umístění kódu skriptu uvnitř webového projektu. Tento článek porovnává oba přístupy, ukazuje funkční příklady, vysvětluje správné propojení s async a defer a uvádí, kdy které umístění poskytuje lepší údržbu a výkon.
Co je interní a externí JavaSkript?
Můžeš použít JavaKód skriptu dvěma způsoby.
- Můžete buď zahrnout JavaKód skriptu interně v dokumentu HTML sám.
- Můžete si ponechat JavaKód skriptu v samostatný externí soubor a poté přejděte na tento soubor z dokumentu HTML.
Obě umístění spouštějí přesně stejný jazyk a v prohlížeči produkují stejný výsledek. Rozdíl spočívá v tom, kde je zdrojový kód uložen, jak jej prohlížeč stahuje a jak snadno lze kód znovu použít a spravovat napříč webovou stránkou.
Co je Interní JavaSkript?
Interní JavaSkript je kód napsaný přímo uvnitř dvojice tagů skriptu v souboru HTML. Prohlížeč čte kód odshora dolů a když dosáhne tagu skriptu, okamžitě provede příkazy bez dalších síťových požadavků.
Doposud jsme používali Interní JS. Zde je ukázka –
<html>
<head>
<title>My First JavaScript code!!!</title>
<script type="text/javascript">
// Create a Date Object
var day = new Date();
// Use getDay function to obtain todays Day.
// getDay() method returns the day of the week as a number like 0 for Sunday, 1 for Monday,….., 5
// This value is stored in today variable
var today = day.getDay();
// To get the name of the day as Sunday, Monday or Saturday, we have created an array named weekday and stored the values
var weekday = new Array(7);
weekday[0]="Sunday";
weekday[1]="Monday";
weekday[2]="Tuesday";
weekday[3]="Wednesday";
weekday[4]="Thursday";
weekday[5]="Friday";
weekday[6]="Saturday";
// weekday[today] will return the day of the week as we want
document.write("Today is " + weekday[today] + ".");
</script>
</head>
<body>
</body>
</html>
Výstup:
Today is Wednesday.
Vypsaný den se mění s časy systému návštěvníka, protože metoda getDay vrací číslo od 0 pro neděli do 6 pro sobotu a toto číslo se používá jako index v poli dnů v týdnu.
Co je externí JavaSkript?
Plánujete zobrazovat aktuální datum a čas na všech webových stránkách. Předpokládejme, že jste napsali kód a zkopírovali ho na všechny webové stránky (řekněme 100). Později ale chcete změnit formát, ve kterém se datum nebo čas zobrazuje. V tomto případě budete muset provést změny na všech 100 webových stránkách. To bude velmi časově náročný a obtížný úkol.
Takže zachraňte JavaScénář kód v novém souboru s příponou .js. Poté přidejte řádek kódu na všechny své webové stránky, aby odkazoval na váš soubor .js takto:
<script type="text/javascript" src="currentdetails.js"></script>
HodnoceníPředpokládá se, že soubor .js a všechny vaše webové stránky jsou ve stejné složce. Pokud se soubor external.js nachází v jiné složce, je třeba v atributu src zadat úplnou cestu k souboru. Uzavírací atribut </script> Značka je povinná, i když element nemá žádný obsah, protože samouzavírací značka skriptu není platný HTML kód a zbytek stránky by byl pohlcen neukončeným elementem.
Toto je kód, který umístíte do souboru currentdetails.js:
var currentDate = new Date();
var day = currentDate.getDate();
var month = currentDate.getMonth() + 1;
var monthName;
var hours = currentDate.getHours();
var mins = currentDate.getMinutes();
var secs = currentDate.getSeconds();
var strToAppend;
if (hours >12 )
{
hours1 = "0" + (hours - 12);
strToAppend = "PM";
}
else if (hours <12)
{
hours1 = "0" + hours;
strToAppend = "AM";
}
else
{
hours1 = hours;
strToAppend = "PM";
}
if(mins<10)
mins = "0" + mins;
if (secs<10)
secs = "0" + secs;
switch (month)
{
case 1:
monthName = "January";
break;
case 2:
monthName = "February";
break;
case 3:
monthName = "March";
break;
case 4:
monthName = "April";
break;
case 5:
monthName = "May";
break;
case 6:
monthName = "June";
break;
case 7:
monthName = "July";
break;
case 8:
monthName = "August";
break;
case 9:
monthName = "September";
break;
case 10:
monthName = "October";
break;
case 11:
monthName = "November";
break;
case 12:
monthName = "December";
break;
}
var year = currentDate.getFullYear();
var myString;
myString = "Today is " + day + " - " + monthName + " - " + year + ".<br />Current time is " + hours1 + ":" + mins + ":" + secs + " " + strToAppend + ".";
document.write(myString);
Toto je váš soubor currentdetails.js. Nebojte se dlouhých řádků kódu. Brzy se naučíte kódovat. Proveďte změny ve svém HTML dokumentu takto:
<html> <head> <title>My External JavaScript Code!!!</title> <script type="text/javascript" src="currentdetails.js"> </script> </head> <body> </body> </html>
Warning️ Varování: Výše uvedený starší skript přidává před každou hodinu nulu, takže 11 hodin ráno se zobrazuje jako 011. Také přiřazuje hours1 bez deklarace, což vytvoří implicitní globální proměnnou a v striktním režimu vyvolá chybu. Opravená verze níže obě vady opravuje.
Moderní přepsání stejného souboru je kratší, deklaruje každou proměnnou a správně doplňuje hodnoty:
// currentdetails.js - corrected modern version const now = new Date(); const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; const hours24 = now.getHours(); const suffix = hours24 >= 12 ? "PM" : "AM"; const hours12 = String(hours24 % 12 || 12).padStart(2, "0"); const mins = String(now.getMinutes()).padStart(2, "0"); const secs = String(now.getSeconds()).padStart(2, "0"); const message = "Today is " + now.getDate() + " - " + months[now.getMonth()] + " - " + now.getFullYear() + ". Current time is " + hours12 + ":" + mins + ":" + secs + " " + suffix + "."; document.getElementById("stamp").textContent = message;
Výstupní vzorek:
Today is 29 - July - 2026. Current time is 09:05:07 AM.
Jak propojit externí JavaSoubor skriptu správně
O tom, zda se externí soubor vůbec načte, rozhodují tři detaily: cesta uvedená v atributu src, pozice tagu skriptu v dokumentu a atribut loading, který se na něj vztahuje.
Cesty se rozpoznávají relativně vzhledem k HTML dokumentu, pokud není zadáno úvodní lomítko nebo úplná adresa.
| Zdrojová hodnota | Význam | Rozhoduje se |
|---|---|---|
| currentdetails.js | Stejná složka jako HTML stránka | /pages/currentdetails.js |
| js/currentdetails.js | Podsložka aktuální složky | /pages/js/currentdetails.js |
| ../currentdetails.js | Jedna složka nad tou aktuální | /currentdetails.js |
| /assets/js/currentdetails.js | Absolutní cesta od kořenového adresáře webu | /assets/js/currentdetails.js |
Atribut loading určuje, kdy prohlížeč přestane parsovat HTML pro spuštění souboru. Níže uvedená tabulka shrnuje tři dostupná chování.
| Atribut | Ke stažení | Okamžik provedení | Pořadí zachováno |
|---|---|---|---|
| Nevyplněno | Blokuje parsování HTML | Ihned po stažení | Ano |
| odložit | Paralelně s analýzou | Po analýze dokumentu | Ano |
| async | Paralelně s analýzou | Jakmile stahování skončí | Ne |
<!-- Recommended for scripts that read the DOM --> <script src="js/currentdetails.js" defer></script> <!-- Recommended for independent third party scripts --> <script src="js/analytics.js" async></script> <!-- Modern module syntax, deferred by default --> <script type="module" src="js/app.js"></script>
💡 Tip: Jedno type="text/javascript" Atribut je v HTML5 volitelný a lze jej vynechat. Ponechte jej pouze v případě, že podporuje velmi staré prohlížeče, nebo jej nahraďte atributem type="module" při použití importních a exportních příkazů.
Interní vs. externí JavaScénář: Klíčové rozdíly
Níže uvedené srovnání staví obě umístění vedle sebe na základě faktorů, které obvykle rozhodují o volbě.
| Faktor | Interní JavaScénář | Externí JavaScénář |
|---|---|---|
| Umístění skladu | Uvnitř HTML souboru | Samostatný soubor s příponou .js |
| Znovu použít napříč stránkami | Vyžaduje kopírování na každou stránku | Každý odkaz na jeden soubor z každé stránky |
| Ukládání do mezipaměti prohlížeče | Znovu stahováno s každou stránkou | Jednou uloženo do mezipaměti a znovu použito |
| Úsilí o údržbu | Vysoká, když je kód sdílen | Nízká, jeden soubor k úpravě |
| Další HTTP požadavek | Ne | Ano, jeden na soubor |
| Ladění | Obtížnější v dlouhém HTML souboru | Snadnější s jasnými názvy souborů a čísly řádků |
| Nejvhodnější pro | Krátká logika specifická pro danou stránku | Sdílené knihovny a dlouhé skripty |
Kdy použít interní a externí JavaScénář Code?
Pokud máte pouze několik řádků kódu, který je specifický pro konkrétní webovou stránku, je lepší si ponechat svůj JavaSkriptujte kód interně v dokumentu HTML.
Na druhou stranu, pokud váš JavaPokud se skriptový kód používá na mnoha webových stránkách, měli byste zvážit jeho uchováníping váš kód v samostatném souboru. V takovém případě, pokud chcete provést nějaké změny v kódu, stačí změnit pouze jeden soubor, což usnadňuje údržbu kódu. Pokud je váš kód příliš dlouhý, je také lepší jej uchovávat v samostatném souboru. To usnadňuje ladění.
Praktickým pravidlem pro začátečníky je hranice zhruba deseti řádků. Cokoli kratšího a specifického pro danou stránku může zůstat interně, zatímco cokoli delšího nebo sdíleného patří do externího souboru.
V souladu JavaSkript a proč se mu vyhnout
Třetí umístění existuje na starších stránkách, kde je kód napsán přímo uvnitř atributu HTML. Přestože stále běží, kombinuje strukturu s chováním a nelze jej ukládat do mezipaměti, znovu používat ani se na něj nevztahují přísné zásady zabezpečení obsahu.
<!-- Inline handler: works, but avoid it --> <button onclick="alert('Clicked')">Click me</button> <!-- Preferred: behaviour attached from a script --> <button id="greet">Click me</button> <script> document.getElementById("greet").addEventListener("click", () => { alert("Clicked"); }); </script>
Jakmile se s umístěním skriptů pohodlně seznámíte, pokračujte JavaMetody skriptových polí, studie smyčky v JavaScénářa propracujte se praktický JavaPříklady skriptového kóduExterní soubory také výrazně usnadňují správu logiky úložiště prohlížeče, například soubory cookie v JavaScénář.
