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

Допоможіть перекласти цей підручник вашою мовою!

КупитиEPUB/PDF
Навчальна карта
  1. Підручник
  2. Мова програмування JavaScript
  3. Основи JavaScript
22 серпня 2023 р.

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

Ця частина посібника розповідає про основи 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. Більш складні знаходяться в окремих файлах.

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

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

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

Якщо вказаний src, вміст скрипта ігнорується.

Один тег <script> не може мати атрибут src і код всередині.

Це не спрацює:

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

Ми повинні вибрати або зовнішній <script src="…">, або звичайний <script> з кодом.

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

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

Підсумки

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

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

Завдання

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

важливість: 5

Створіть сторінку, яка показуватиме повідомлення “Я – JavaScript!”.

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

Демонстрація в новому вікні

<!DOCTYPE html>
<html>

<body>

  <script>
    alert( "Я – JavaScript!" );
  </script>

</body>

</html>

Відкрити рішення в пісочниці.

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

важливість: 5

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

Відкрийте сторінку і переконайтеся, що повідомлення показується.

HTML-код:

<!DOCTYPE html>
<html>

<body>

  <script src="alert.js"></script>

</body>

</html>

Для файлу alert.js в тій самій папці:

alert("Я – JavaScript!");
Попередній урокНаступний урок
Навчальна карта

Коментарі

прочитайте це, перш ніж коментувати…
  • Якщо у вас є пропозиції, щодо покращення підручника, будь ласка, створіть обговорення на GitHub або одразу створіть запит на злиття зі змінами.
  • Якщо ви не можете зрозуміти щось у статті, спробуйте покращити її, будь ласка.
  • Щоб вставити код, використовуйте тег <code>, для кількох рядків – обгорніть їх тегом <pre>, для понад 10 рядків – використовуйте пісочницю (plnkr, jsbin, codepen…)

Глава

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

Поділитися
Редагувати на GitHub