Способи підключення javascript, vaden pro

Створюючи скрипти для сторінок ми можемо не тільки вставляти їх в код сторінки, а й підключати js зовнішнім файлом. Другий підхід зазвичай використовується коли нам необхідно підключати об'ємні скрипти, щоб не «забруднювати» код сторінки.

Розглянемо ж особливості кожного типу підключення скриптів докладніше.

Як вставити скрипт в код сторінки?

Використовуючи тег script ми можемо вставити код в будь-якому місці html сторінки.

У стандарті html4 і раніше вказівку атрибута type дійсно було обов'язково. З виходом в світ html5 все стало трохи простіше і тепер нам досить просто вказати сам тег script, щоб браузер інтерпретував код вірно.

Повторюючи цей приклад Ви могли відзначити для себе, що сторінка не завантажується до кінця відразу. Зупинимося на цьому докладніше:

  • Завантажуючи сторінку інтерпретатор йде за кодом через підрядник, тому першими активуються скрипти стоять в коді раніше (в нашому випадку скрипт з «голови» документа).
  • Після завантажується частина сторінки до другого скрипта.
  • Відбувається виконання другого скрипта.
  • Закінчується завантаження сторінки.

Зустрічаючись з тегом скрипта браузер не показує його вміст, а переключається в JS режим і виконує його вміст.

Щоб уникнути появи на екрані незрозумілих кракозябри, замість потрібних нам символів, не забувайте вказувати сторінці кодування utf-8 в тезі meta. Дана проблема з камім скриптів відношення не має жодного, але дозволяє уникнути нерозуміння причин перекручення символів браузерами.

Також варто перевірити, що ви зберігаєте файли в кодуванні utf-8 інакше при відкритті його наступного разу може бути зіпсований вже сам код.

Як підключити зовнішні файли скриптів?

Використання на сторінці великої кількості скриптів може сильно її погіршити і зробити код в цілому мають важко. Тому початково була передбачена можливість підключення скриптів окремими файлами.

Це робиться за допомогою атрибута src тега скрипт. Браузер, зустрівши в будь-якому місці коду сторінки конструкцію:

Завантажить файл script.js і виконає код міститься в ньому.

Сторінки не мають обмежень на кількість підключаються файлів js. Для підключення декількох файлів скриптів ми просто використовуємо кілька тегів script вказуючи кожному шлях до необхідного нам файлу.

Варто звернути увагу на той факт, що код всередині тега у якого вказаний атрибут src буде проігнорований.

При такому використанні тега буде виконаний код з файлу script.js, але виведення повідомлення «якийсь код» не відбудеться, оскільки код всередині тега буде проігнорований.

Щоб все спрацювало потрібно використовувати наступну конструкцію: