У минулій статті код javascript безпосередньо визначався на веб-сторінці. Але є ще один спосіб під'єднання коду JavaScript, який представляє винесення коду в зовнішні файли та їхнє під'єднання за допомогою тега <script>.
Отже, у минулій темі ми створили html-сторінку index.html, яка знаходиться в каталозі app. Тепер створимо в цьому каталозі новий підкаталог. Назвемо його js. Він буде призначений для зберігання файлів із кодом javascript. У цьому підкаталозі створимо новий текстовий файл, який назвемо myscript.js. Файли з кодом javascript мають розширення .js. Тобто в нас вийде така структура проекту в папці app:
Відкриємо файл myscript.js у текстовому редакторі та визначимо в ньому такий код:
document.write("<h2>Перша програма на JavaScript</h2>"); // виводимо заголовок
document.write("Привіт світ!"); // виводимо звичайний текст
Тут для додавання на веб-сторінку деякого вмісту застосовується метод document.write. Перший виклик методу document.write виводить заголовок <h2>, а другий виклик - звичайний текст.
Для сумісності з кодуванням сторінки index.html для файлу з кодом javascript також бажано встановлювати кодування utf-8. Під час роботи у Visual Studio Code цей редактор автоматично встановлює кодування UTF-8.
Тепер підключимо цей файл на веб-сторінку index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>METANIT.COM</title>
</head>
<body>
<script src="js/myscript.js"></script>
</body>
</html>
Щоб під'єднати файл із кодом javascript на веб-сторінку, застосовується також тег <script>, у якого встановлюється атрибут src. Цей атрибут вказує на шлях до файлу скрипта. У нашому випадку використовується відносний шлях. Оскільки веб-сторінка розташована в одній папці з каталогом js, то як шлях ми можемо написати js/myscript.js.
Також треба враховувати, що за тегом script, який відкривається, обов'язково має слідувати закриваючий </script>.
І після відкриття файлу index.html у браузері відобразиться повідомлення:
На відміну від визначення коду javascript винесення його в зовнішні файли має низку переваг:
Ми можемо повторно використовувати один і той самий код на кількох веб-сторінках
Зовнішні файли javascript браузер може кешувати, за рахунок цього при наступному зверненні до сторінки браузер знижує навантаження на сервер, а браузеру треба завантажити менший обсяг інформації
Код веб-сторінки стає "чистішим". Він містить тільки html-розмітку, а код поведінки зберігається в зовнішніх файлах. У підсумку можна відокремити роботу зі створення коду html-сторінки від написання коду javascript
Тому, як правило, краще використовувати код javascript у зовнішніх файлах, а не в прямих вставках на веб-сторінку за допомогою елемента script.