Підключення скрипта JavaScript

58

Від автора: вітаю вас, друзі. У цій статті ми з вами дізнаємося, як перенести наш код JavaScript у зовнішній файл і підключити сценарії JavaScript. Стаття орієнтована на новачків, які починають вивчення мови JavaScript.

Отже, почнемо з питання, а навіщо взагалі потрібно виносити код JavaScript у зовнішній файл? Все просто. Уявіть, що ваш скрипт займає десятки або сотні рядків коду. Або навіть більше. І, звичайно ж, цей скрипт нам, швидше за все, буде потрібно на кожній сторінці нашого сайту. Погодьтеся, буде зовсім недобре в цьому випадку дублювати в кожному файлі ці сотні рядків коду. Та й просто наявність не HTML коду в документі HTML буде виглядати не дуже правильно і не дуже красиво.

Саме тому код JavaScript прийнято виносити в окремий файл, який підключається до сторінці. Власне, все так само, як і у випадку з файлами стилів. Як же підключити скрипт JavaScript до основного файлу? Дуже просто. Для цього використовуються вже знайомий нам тег , до якого додається атрибут src, точно так само, як і у випадку з картинками. Ну і, як ви вже здогадалися, в атрибуті src вказується шлях до підключеному скрипта JavaScript.

Давайте спробуємо перенести нашу програму, що складається з одного рядка коду, у зовнішній файл і підключимо цей файл. Назвемо цей файл, наприклад, scripts.js:

alert(‘Привіт!’);

Зверніть увагу, всередині підключається файлу нам потрібно писати теги script. Мало того, якщо ми їх напишемо у файлі .js, то наш код JavaScript перестане працювати, і ми отримаємо помилку JavaScript.

Ну і саме підключення зовнішнього файлу JavaScript:

Якщо тепер оновити сторінку, то нічого не зміниться, наш скрипт працює і, як і раніше, виводить модальне вікно з привітанням.

На що варто звернути увагу при підключенні скриптів? Ми підключили скрипт в кінці документа, перед закриваючим тегом body. Раніше практикувалося підключення скриптів на початку документа, в тегах head. Однак сьогодні так робити не рекомендується і скрипти рекомендують підключати саме в кінці документа. Чому так?

Давайте спробуємо перенести підключення між тегами head:

Що ми бачимо? Нічого, крім модального вікна. Ніякого вмісту немає. В цьому і суть. Коли зовнішній скрипт підключається до початку документа, браузер починає завантажувати його і намагається виконати. І поки завантаження і виконання скрипта не будуть завершені, браузер не покаже частину документа, наступну після підключається файлу.

А тепер уявіть, що цей файл з якихось причин завантажується вкрай повільно. У результаті користувачеві доведеться чекати, і деколи він може просто не дочекатися. Саме тому скрипти рекомендується підключати в кінці документа, перед закриваючим тегом body.

Але що робити, якщо якась бібліотека вимагає підключення саме на початку документа? Як бути в цьому випадку? У цьому випадку нас виручать атрибути async і defer, які дозволяють браузеру завантажувати скрипти асинхронно, тобто браузер почне завантажувати скрипт, але при цьому не зупинить показ документа. Спробуємо по черзі використовувати дані атрибути:

В обох випадках ми отримаємо однаковий результат, скрипт підключається, не перериваючи показ документа:

У чому ж відмінність атрибутів async і defer один від одного? Атрибут defer зберігає послідовність підключення зовнішніх скриптів, тобто першим завжди виконається той скрипт, який підключається вище. Це важливо в тому випадку, коли ми підключаємо декілька скриптів і якийсь із них може залежати від іншого. У цьому випадку основний скрипт повинен підключатися раніше залежного. Атрибут defer гарантує дотримання порядку. Атрибут async ж забезпечить виконання скрипта відразу після його завантаження. Тому такий варіант не завжди підійде, оскільки залежний скрипт може завантажитися раніше основного.

На цьому стаття підійшла до кінця. Якщо ви хочете більше дізнатися про JavaScript, тоді рекомендую звернути свою увагу на уроки по JavaScript і окремий курс по мові JavaScript. Удачі!