Вътрешни и външни JavaСценарий: Научете с пример
Джеймс Хартман
⚡ Умно обобщение
Вътрешен и външен JavaСкриптът описва двете поддържани разположения за скриптов код в уеб проект. Тази статия сравнява двата подхода, показва работещи примери, обяснява правилното свързване с async и defer и посочва кога всяко разположение осигурява по-добра поддръжка и производителност.
Какво представляват вътрешните и външните JavaСценарий?
Можете да използвате JavaСкрипт код по два начина.
- Можете или да включите JavaКод на скрипта вътрешно във вашия HTML документ себе си.
- Можете да запазите JavaКод на скрипта в отделен външен файл и след това посочете този файл от вашия HTML документ.
И двете разположения изпълняват абсолютно един и същ език и дават един и същ резултат в браузъра. Разликата е в това къде се съхранява изходният код, как браузърът го изтегля и колко лесно кодът може да бъде използван повторно и поддържан в уебсайта.
Какво е вътрешно JavaСценарий?
вътрешен JavaСкриптът е код, написан директно в чифт скриптови тагове в HTML файла. Браузърът чете маркировката отгоре надолу и когато достигне скриптовия таг, изпълнява операторите незабавно, без допълнителна мрежова заявка.
Досега използвахме Internal JS. Ето пример –
<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>
Изход:
Today is Wednesday.
Отпечатаният ден се променя със системния часовник на посетителя, защото getDay връща число от 0 за неделя до 6 за събота и това число се използва като индекс в масива за дни от седмицата.
Какво е външно JavaСценарий?
Планирате да показвате текущата дата и час на всички ваши уеб страници. Да предположим, че сте написали кода и сте го копирали във всички ваши уеб страници (например 100). Но по-късно искате да промените формата, в който се показва датата или часът. В този случай ще трябва да направите промени във всичките 100 уеб страници. Това ще бъде много времеемка и трудна задача.
Така че, запазете JavaСценарий код в нов файл с разширение .js. След това добавете ред код във всичките си уеб страници, който да сочи към вашия .js файл по следния начин:
<script type="text/javascript" src="currentdetails.js"></script>
ЗабележкаПредполага се, че .js файлът и всички ваши уеб страници са в една и съща папка. Ако external.js файлът е в различна папка, трябва да посочите пълния път до файла в атрибута src. Затварящият </script> Тагът е задължителен, въпреки че елементът няма съдържание, защото самозатварящият се скрипт таг не е валиден HTML код и останалата част от страницата ще бъде погълната от незавършения елемент.
Това е кодът, който поставяте в 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);
Това е вашият файл currentdetails.js. Не се притеснявайте, ако видите дълги редове код. Скоро ще се научите да програмирате. Направете промени в HTML документа си по следния начин:
<html> <head> <title>My External JavaScript Code!!!</title> <script type="text/javascript" src="currentdetails.js"> </script> </head> <body> </body> </html>
⚠️ Предупреждение: Старият скрипт по-горе поставя нула преди всеки час, така че 11 сутринта се показва като 011. Той също така присвоява hours1 без да се декларира, което създава имплицитна глобална променлива и хвърля грешка в строг режим. Коригираната версия по-долу поправя и двата дефекта.
Съвременното пренаписване на същия файл е по-кратко, декларира всяка променлива и допълва стойностите правилно:
// 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;
Изходен изход:
Today is 29 - July - 2026. Current time is 09:05:07 AM.
Как да свържете външен JavaПравилно зареждане на скриптовия файл
Три детайла решават дали даден външен файл изобщо ще се зареди: пътят, записан в атрибута src, позицията на тага на скрипта в документа и приложеният към него атрибут за зареждане.
Пътищата се разрешават спрямо HTML документа, освен ако не е предоставена водеща наклонена черта или пълен адрес.
| src стойност | Значение | Решава да |
|---|---|---|
| currentdetails.js | Същата папка като HTML страницата | /pages/currentdetails.js |
| js/currentdetails.js | Подпапка на текущата папка | /pages/js/currentdetails.js |
| ../currentdetails.js | Една папка над текущата | /currentdetails.js |
| /assets/js/currentdetails.js | Абсолютен път от корена на сайта | /assets/js/currentdetails.js |
Атрибутът loading контролира кога браузърът спира да анализира HTML, за да изпълни файла. Таблицата по-долу обобщава трите налични поведения.
| Атрибут | Изтегли | Момент на изпълнение | Поръчката е запазена |
|---|---|---|---|
| None | Блокира HTML парсинга | Веднага след изтеглянето | Да |
| отлага | Паралелно с парсинга | След като документът бъде анализиран | Да |
| асинхронен | Паралелно с парсинга | Веднага щом изтеглянето приключи | Не |
<!-- 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>
💡 Съвет: - type="text/javascript" Атрибутът е незадължителен в HTML5 и може да бъде пропуснат. Запазете го само когато поддържа много стари браузъри или го заменете с type="module" при използване на оператори за импортиране и експортиране.
Вътрешен срещу външен JavaСценарий: Ключови разлики
Сравнението по-долу поставя двете позиции едно до друго въз основа на факторите, които обикновено определят избора.
| фактор | вътрешен JavaСценарий | Външен JavaСценарий |
|---|---|---|
| Място за съхранение | Вътре в HTML файла | Отделен файл с разширение .js |
| Повторно използване на различни страници | Изисква копиране на всяка страница | Един файл, цитиран от всяка страница |
| Кеширане на браузъра | Изтегля се отново с всяка страница | Кеширано веднъж и използвано повторно |
| Усилия за поддръжка | Високо, когато кодът е споделен | Ниско, един файл за редактиране |
| Допълнителна HTTP заявка | Не | Да, по един на файл |
| Отстраняване на грешки | По-трудно в дълъг HTML файл | По-лесно с ясни имена на файлове и номера на редове |
| Най-подходящ за | Кратка логика, специфична за страницата | Споделени библиотеки и дълги скриптове |
Кога да използвате вътрешни и външни JavaСценарий Code?
Ако имате само няколко реда код, който е специфичен за определена уеб страница, тогава е по-добре да запазите своя JavaКод на скрипта вътрешно във вашия HTML документ.
От друга страна, ако вашият JavaСкрипт код се използва в много уеб страници, тогава трябва да помислите за keeping вашия код в отделен файл. В този случай, ако желаете да направите някои промени в кода си, трябва да промените само един файл, което улеснява поддръжката на кода. Ако кодът ви е твърде дълъг, тогава е по-добре да го съхранявате в отделен файл. Това помага за лесното отстраняване на грешки.
Практическо правило за начинаещи е праг от приблизително десет реда. Всичко по-кратко и специфично за страницата може да остане вътрешно, докато всичко по-дълго или споделено принадлежи на външен файл.
В редица JavaСкрипт и защо трябва да се избягва
Трето разположение съществува в по-стари страници, където кодът е написан директно в HTML атрибут. Въпреки че все още се изпълнява, той смесва структура с поведение и не може да бъде кеширан, използван повторно или обхванат от строга политика за сигурност на съдържанието.
<!-- 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>
След като се почувствате комфортно с поставянето на скриптове, продължете с JavaМетоди за масиви от скриптове, проучване цикли в JavaСценарийи работете чрез практически JavaПримери за скриптов кодВъншните файлове също така улесняват значително управлението на логиката на съхранението на браузъра, като например бисквитки в JavaСценарий.
