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

Ця частина посібника розповідає про основи JavaScript, про саму мову.

Але нам необхідне робоче середовище для запуску наших скриптів і, оскільки це насамперед онлайн-посібник, браузер є гарним вибором для цього. Ми зведемо до мінімуму кількість специфічних команд для браузера (наприклад, таких як alert), щоб ви не витрачали час на них, якщо плануєте зосередитися на іншому середовищі (як Node.js). Ми зосередимось на 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> має декілька атрибутів, які рідко використовуються сьогодні, але їх ще можна знайти в старому коді.

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

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

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

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

Коментарі до та після скриптів.

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

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

Такий спосіб не використовується у сучасному JavaScript. Ці коментарі ховали 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/4.17.11/lodash.js"></script>
        

Щоб додати кілька скриптів, використовуйте кілька тегів:

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

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

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

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

Це зменшує трафік і робить сторінки швидшими.

Один тег <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, тому ми не будемо відриватися на браузерні особливості. Проте ми будемо використовувати браузер як спосіб запуску JavaScript, що є дуже зручним для читання в Інтернеті, але треба розуміти, що це лише один із багатьох можливих варіантів.

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

Тег “script”

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

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

Підсумки

Завдання

Показати сповіщення

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

Коментарі

Глава

Навігація по уроку