2.1. Привіт, світ!

Розпочинаючи з цієї статті ми будемо вивчати власне JavaScript, саму мову.

Але нам потрібне середовище для запуску наших скриптів, браузер буде хорошим вибором. У цьому розділі ми скоротимо кількість специфічних для браузера команд (наприклад, alert) до мінімуму, щоб не витрачати на них час, якщо плануєте зосередитися на іншому середовищі (наприклад, Node.is). А на використанні JavaScript у браузері ми зосередимося у наступній частині.

Отже, спершу давайте подивимося, як виконати скрипт на сторінці. Для серверних середовищ (наприклад, Node.js) можна виконати скрипт за допомогою команди “node my.js”. Для браузера все трохи інакше.

Тег «script»

Програми JavaScript можуть бути вставлені в будь-яке місце HTML-документа за допомогою тега <script>.

Для прикладу:

<!DOCTYPE HTML>
<html>

<body>

  <p>Перед скриптом...</p>

  <script>
    alert( 'Привіт, світ!' );
  </script>

  <p>...Посля скрипта.</p>

</body>

</html>

Тег <script> містить JavaScript код який автоматично виконається, коли браузер його обробить.

Сучасна розмітка

Тег <script> має кілька атрибутів, які рідко використовується, але все ще можуть зустрітися у старому коді:

Атрибут <script type=…>

Старий стандарт HTML, HTML4 вимагав наявніть цього атрибуту в тегу <script>. Зазвичай він мав значення type=”text/javascript”. На даний момент цього більше не потрібно. Більше того, у сучасному стандарті HTML зміст цього атрибуту повністю змінився. Тепер він може використовуватись для JavaScript-модулів. Але це тема не для початкового рівня і про неї поговоримо пізніше.

Атрибут language: <script language=…>

Цей атрибут повинен був задавати мову якою написаний скрипт. Але оскільки JavaScript є мовою за замовчуванням в цьому атрибуті, то його використовувати не потрібно.

Обертання скрипта в HTML-коментарі.

У дуже стародавніх книгах і посібниках ви зможете знайти коментарі всередині тега <script>, наприклад, такі:

<script type="text/javascript"><!--
    ...
//--></script>

Цей коментар приховував JavaScript у старих браузерах, які не знали, як обробляти тег <script>. Оскільки всі браузери, випущені за останні 15 років, не містять цієї проблеми, такі коментарі вже не потрібні. Якщо вони є, це ознака, що маємо дуже древній код.

Зовнішні скрипти

Якщо у вас багато коду JavaScript, ви можете помістити його в окремий файл.

Файл скрипта можна підключити до HTML за допомогою атрибута src:

<script src="/path/to/script.js"></script>

Тут /path/to/script.js – це абсолютний шлях до скрипту від кореня сайту. Можна також вказати відносний шлях від поточної сторінки. Наприклад, src=”script.js” або src=”./script.js” означатиме, що файл “script.js” знаходиться в поточній папці.

Можна вказати і повну URL-адресу. Наприклад:

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>

Для підключення кількох скриптів використовуйте кілька тегів:

<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
…

На замітку

Як правило, тільки найпростіші скрипти містяться в HTML. Більш складні виділяються в окремі файли.

Користь використання окремих файлів в тому, що браузер завантажить скрипт окремо і зможе зберігати його в кеші.

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

Це скорочує витрати трафіку та прискорює завантаження сторінок.

Якщо атрибут src встановлено вміст тега script ігноруватиметься. В одному тезі <script> не можна використовувати одночасно атрибут src та код усередині.

Нижченаведений приклад не працює:

<script src="file.js">
  alert(1); // вміст ігнорується, оскільки є src
</script>

Потрібно вибрати: або зовнішній скрипт <script src=”…”>, або звичайний код усередині тега <script>.

Наведений вище приклад можна розділити на два скрипти:

<script src="file.js"></script>
<script>
  alert(1);
</script>

Висновки

  • Для додавання коду JavaScript на сторінку використовується тег <script>.
  • Атрибути type та language необов’язкові.
  • Скрипт у зовнішньому файлі можна вставити за допомогою <script src=”/path/to/script.js”></script>.

Ми будемо користуватися браузером для запуску JavaScript, це зручно для онлайн-демонстацій, але це тільки одна з платформ на яких працює ця мова.

Задачі

  1. Викликати alert

    Створіть сторінку, яка відображатиме повідомлення «Я JavaScript!».

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

    Демо у новому вікні

  2. Покажіть повідомлення за допомогою зовнішнього скрипту

    Візьміть рішення попереднього завдання Викликати alert та змініть його. Вийміть вміст скрипта у зовнішній файл alert.js, що лежить у тій самій папці.

    Відкоригуйте сторінку, переконайтеся, що оповіщення працює.


    Демо у новому вікні
➜