Посібник по JavaScript

Підключення зовнішнього файлу JavaScript

У минулій статті код 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.