Як використовувати JavaScript у HTML для створення інтерактивних веб-сторінок

Автор

Інтеграція JavaScript у HTML для інтерактивних веб-сторінок

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

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

HTML5 і CSS3 дозволяють створювати статичні веб-ресурси. Однак, для забезпечення їх інтерактивності, потрібно використовувати мову програмування, таку як JavaScript, яка зрозуміла веб-браузерам.

Ця стаття розкриває важливість використання JavaScript у поєднанні з HTML, різні способи інтеграції коду JavaScript в HTML, а також надає найкращі практики для ефективної роботи з обома мовами.

Чому JavaScript є важливим в HTML?

  • Інтерактивність: JavaScript забезпечує інтерактивну взаємодію з користувачем у реальному часі, без необхідності перезавантаження сторінки. Наприклад, лічильник, що збільшується при кожному кліку, або миттєві повідомлення про відправлення форми.
  • Перевірка даних на стороні клієнта: JavaScript дозволяє валідувати дані, введені у форми, безпосередньо в браузері. Це може бути перевірка формату електронної пошти, довжини пароля або комбінації символів на сторінці реєстрації.
  • Динамічна маніпуляція DOM: JavaScript надає доступ до об’єктної моделі документа (DOM), що дозволяє динамічно змінювати вміст веб-сторінки. Таким чином, веб-сторінка може автоматично оновлюватися на основі дій користувача без необхідності перезавантаження.
  • Кросбраузерна сумісність: JavaScript підтримується всіма сучасними браузерами, що гарантує коректну роботу веб-сторінок, створених за допомогою HTML, CSS та JavaScript, незалежно від браузера.

Необхідні знання

  • Базове розуміння HTML: Знання основних HTML-тегів, вміння створювати кнопки і форми за допомогою HTML.
  • Базове розуміння CSS: Знайомство з ключовими концепціями CSS, такими як ідентифікатори, класи та селектори елементів.
  • Редактор коду: Можливість використовувати редактор коду, наприклад, VS Code або Atom. Також можна скористатися онлайн-компілятором JavaScript, якщо немає бажання встановлювати програмне забезпечення.

Інтеграція JavaScript в HTML: різні підходи

Існує три основних способи інтеграції коду JavaScript в HTML. Давайте розглянемо кожен з них та визначимо їхні переваги та недоліки.

#1. Вбудовування коду між тегами <script> і </script>

Цей підхід дозволяє розміщувати код JavaScript та HTML в одному файлі. Для прикладу, почнемо зі створення папки проекту:

mkdir javascript-html-playground
cd javascript-html-playground

Створіть два файли: index.html і style.css.

Додайте наступний початковий код до файлу HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="style.css" type="text/css" />
  </head>
  <body>
    <div class="form-container">
      <form>
        <label for="name">Ім'я:</label>
        <input type="text" id="name" />
        <br />
        <label for="email">Email:</label>
        <input type="email" id="email" />
        <br />
        <label for="message">Повідомлення:</label>
        <textarea
          id="message"
          name="message"
          rows="5"
          cols="30"
          required
        ></textarea>
        <br />
        <input type="submit" value="Відправити" />
      </form>
    </div>
  </body>
</html>

Додайте цей початковий код до файлу CSS:

.form-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}
input[type="text"],
input[type="email"],
textarea {
  display: block;
  margin-bottom: 10px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 8px;
}
input[type="submit"] {
  background-color: #4CAF50;
  color: white;
  padding: 5px 10px;
  border: none;
  border-radius: 2.5px;
  font-size: 8px;
  cursor: pointer;
}
input[type="submit"]:hover {
  background-color: #3e8e41;
}

Веб-сторінка виглядатиме приблизно так:

Тепер додамо JavaScript-код, який виводить повідомлення “надіслано” при натисканні кнопки “Відправити”. Оновлений HTML-код з JavaScript буде виглядати наступним чином:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="style.css" type="text/css" />
  </head>
  <body>
    <div class="form-container">
      <form>
        <label for="name">Ім'я:</label>
        <input type="text" id="name" />
        <br />
        <label for="email">Email:</label>
        <input type="email" id="email" />
        <br />
        <label for="message">Повідомлення:</label>
        <textarea
          id="message"
          name="message"
          rows="5"
          cols="30"
          required
        ></textarea>
        <br />
        <input type="submit" value="Відправити" onclick="submitted()" />
      </form>
    </div>
    <script>
      function submitted() {
        alert("надіслано");
      }
    </script>
  </body>
</html>

При натисканні кнопки “Відправити” з’явиться повідомлення “надіслано”.

Переваги вбудовування JavaScript-коду між тегами <script> … </script>

  • Швидка реалізація: Робота в одному файлі економить час, оскільки JavaScript-код можна викликати з HTML-коду з того ж файлу.
  • Проста читабельність коду: Теги <script> відокремлюють HTML від JavaScript-коду, що полегшує його читання та налагодження.

Недоліки вбудовування JavaScript-коду між тегами <script> … </script>

  • Складність повторного використання коду: Якщо в додатку є декілька форм, то для кожної з них потрібно буде створювати окремий JavaScript-код.
  • Уповільнення продуктивності: Великі блоки коду в HTML-документі можуть сповільнювати швидкість завантаження.

#2. Вбудований код з використанням JavaScript безпосередньо в HTML

Замість того, щоб розміщувати JavaScript-код у тегах <script> …. </script>, його можна додати безпосередньо в HTML-код. Використаємо той же HTML-код та файл style.css.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="style.css" type="text/css" />
  </head>
  <body>
    <div class="form-container">
      <form>
        <label for="name">Ім'я:</label>
        <input type="text" id="name" />
        <br />
        <label for="email">Email:</label>
        <input type="email" id="email" />
        <br />
        <label for="message">Повідомлення:</label>
        <textarea
          id="message"
          name="message"
          rows="5"
          cols="30"
          required
        ></textarea>
        <br />
        <input type="submit" value="Відправити" onclick="alert('вбудоване надсилання')" />
      </form>
    </div>
  </body>
</html>

При натисканні кнопки “Відправити” у браузері з’явиться повідомлення “вбудоване надсилання”.

Переваги додавання JavaScript як вбудованого коду

  • Швидка реалізація: Не потрібно переходити між файлами для написання HTML та JavaScript.
  • Ідеально для невеликих програм: Якщо програма невелика та не потребує складної інтерактивності, вбудований JavaScript є оптимальним вибором.

Недоліки додавання JavaScript як вбудованого коду

  • Не можна повторно використовувати код: Для кожної форми в додатку доведеться створювати окремий JavaScript-код.
  • Уповільнює продуктивність: Великий обсяг вбудованого коду в HTML може сповільнювати завантаження сторінки.
  • Погіршення читабельності коду: З ростом кодової бази, читабельність коду зменшується.

#3. Створення зовнішнього файлу JavaScript

З ростом програми стає очевидним, що додавання JavaScript-коду безпосередньо в HTML-файл не є оптимальним рішенням. Велика кількість коду в HTML може призвести до зниження швидкості завантаження.

Створимо новий файл script.js для зберігання JavaScript-коду.

Імпортуємо файл script.js в HTML-файл:

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

Оновлена HTML-сторінка буде виглядати так:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <script src="script.js"></script>
  </head>
  <body>
    <div class="form-container">
      <form>
        <label for="name">Ім'я:</label>
        <input type="text" id="name" />
        <br />
        <label for="email">Email:</label>
        <input type="email" id="email" />
        <br />
        <label for="message">Повідомлення:</label>
        <textarea
          id="message"
          name="message"
          rows="5"
          cols="30"
          required
        ></textarea>
        <br />
        <input type="submit" value="Відправити" />
      </form>
    </div>
  </body>
</html>

Додамо наступний код до файлу script.js:

document.addEventListener("DOMContentLoaded", function() {
  const form = document.querySelector("form");
  form.addEventListener("submit", function(event) {
    event.preventDefault();
    alert("зовнішній JS-файл, надсилання");
  });
});

Цей JavaScript-код виконує наступні дії:

  • Слухач подій очікує на спрацювання події DOMContentLoaded.
  • Функція зворотного виклику виконується після спрацювання події DOMContentLoaded.
  • Код використовує querySelector для вибору форми.
  • Використовуємо event.preventDefault(), щоб запобігти стандартній поведінці DOM при спрацюванні події submit (оновлення сторінки або перехід на іншу сторінку).
  • Повідомлення “зовнішній JS-файл, надсилання” виводиться після спрацювання події submit.

JavaScript в HTML: Кращі практики

  • Мінімізуйте розмір файлів: Чим більший розмір файлу, тим довше він завантажується в браузері. Мініфікація видаляє непотрібні символи з вихідного коду, не змінюючи його функціональність. Для цього можна використовувати такі інструменти, як Yahoo YUI Compressor або HTMLMinifier.
  • Код повинен бути структурованим: Це спрощує його читання та підтримку. Для структурування коду можна використовувати такі розширення, як Prettier.
  • Використовуйте зовнішні бібліотеки: Якщо бібліотека може виконати певне завдання у вашому проекті, не потрібно писати код з нуля. Однак, не слід використовувати декілька бібліотек з однаковим функціоналом в одному проекті.
  • Оптимізуйте розміщення JavaScript: Якщо JavaScript-код додається до HTML-файлу, переконайтеся, що він розташований після HTML-коду. Найкраще розміщувати JavaScript між тегами <script> перед закриваючим тегом </body>. Це гарантує, що HTML-контент (текст, зображення, таблиці) завантажується першим, що покращує швидкість завантаження сторінки.

Підсумок

Тепер ви можете ефективно використовувати JavaScript разом з HTML для створення інтерактивних веб-сторінок. Вибір способу інтеграції залежить від характеру розроблюваного веб-додатка. Для невеликих програм підійде вбудований код, тоді як для великих проектів краще використовувати зовнішній файл JavaScript, імпортований в HTML-файл.

Ознайомтеся з бібліотеками таблиць JavaScript, які можна використовувати вже сьогодні.