Внутрішній і зовнішній JavaСценарій: Вчимося на прикладі
Джеймс Гартман
⚡ Розумний підсумок
Внутрішній і зовнішній JavaСкрипти описують два підтримувані місця розташування коду скрипта всередині веб-проекту. У цій статті порівнюються обидва підходи, наводяться робочі приклади, пояснюється правильне зв'язування за допомогою async та defer, а також зазначається, коли кожне з них забезпечує кращу зручність обслуговування та продуктивність.
Що таке внутрішній та зовнішній JavaСценарій?
Ви можете використовувати JavaКод сценарію двома способами.
- Ви можете включити JavaКод скрипта внутрішньо у вашому документі HTML себе.
- Ви можете зберегти JavaКод сценарію в окремий зовнішній файл а потім вкажіть на цей файл із вашого документа HTML.
Обидва розташування виконують ту саму мову програмування та видають однаковий результат у браузері. Різниця полягає в тому, де зберігається вихідний код, як браузер його завантажує та наскільки легко код можна повторно використовувати та підтримувати на веб-сайті.
Що таке внутрішній JavaСценарій?
Внутрішній JavaСкрипт — це код, написаний безпосередньо всередині пари тегів скрипта у файлі HTML. Браузер зчитує розмітку зверху вниз, і коли досягає тегу скрипта, виконує інструкції негайно, без додаткових мережевих запитів.
Досі ми використовували внутрішній 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 веб-сторінках. Це буде дуже трудомістким та складним завданням.
Отже, збережіть JavaScript у новому файлі з розширенням .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-документа, якщо не вказано початкову скісну риску або повну адресу.
| джерельне значення | Сенс | Вирішує |
|---|---|---|
| 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 для запуску файлу. У таблиці нижче підсумовано три доступні варіанти поведінки.
| атрибут | Завантажити | Момент виконання | Порядок збережено |
|---|---|---|---|
| ніхто | Блокує парсинг 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Сценарій: ключові відмінності
Наведене нижче порівняння порівнює обидва місця розташування поруч за факторами, які зазвичай визначають вибір.
| Фактор | Внутрішній JavaScript | Зовнішній JavaScript |
|---|---|---|
| Місце зберігання | Усередині HTML-файлу | Окремий файл із розширенням .js |
| Повторне використання на різних сторінках | Потрібно копіювати на кожну сторінку | Один файл, на який посилається кожна сторінка |
| Кешування браузера | Повторно завантажується з кожною сторінкою | Кешовано один раз та використано повторно |
| Зусилля з технічного обслуговування | Високий, коли код спільно використовується | Низький, один файл для редагування |
| Додатковий HTTP-запит | Немає | Так, по одному на файл |
| Налагодження | Складніше у довгому HTML-файлі | Легше завдяки чітким іменам файлів та номерам рядків |
| Найкраще підходить для | Коротка логіка, специфічна для сторінки | Спільні бібліотеки та довгі скрипти |
Коли використовувати внутрішній і зовнішній JavaScript Code?
Якщо у вас є лише кілька рядків коду, який стосується конкретної веб-сторінки, краще зберегти свій JavaКод сценарію всередині вашого HTML-документа.
З іншого боку, якщо ваш JavaЯкщо код скрипта використовується на багатьох веб-сторінках, то вам слід врахувати йогоping ваш код в окремому файлі. У такому випадку, якщо ви хочете внести деякі зміни до свого коду, вам потрібно змінити лише один файл, що спрощує підтримку коду. Якщо ваш код занадто довгий, його також краще зберігати в окремому файлі. Це сприяє легкому налагодженню.
Практичне правило для початківців — це поріг приблизно в десять рядків. Все, що коротше та стосується лише сторінки, може залишатися внутрішнім, тоді як все, що довше або спільне, належить до зовнішнього файлу.
В лінію 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Методи масивів скриптів, вивчення петлі в JavaScriptі працювати через практичний JavaПриклади коду скриптівЗовнішні файли також значно спрощують керування логікою сховища браузера, наприклад файли cookie в JavaScript.
