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

| | 0 Comments| 2:00 PM
Categories:

HTML, CSS і JavaScript є трьома основними мовами, які використовуються для інтерфейсної розробки. HTML — це мова розмітки, а CSS — мова стилю.

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

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

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

Чому важливо використовувати JavaScript у HTML

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

передумови

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

Як використовувати JavaScript у HTML

Щоб додати код JavaScript до HTML, можна використовувати три основні підходи. Ми досліджуємо кожен підхід і визначаємо, де він найкраще підходить.

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

Цей підхід дозволяє мати коди JavaScript і HTML в одному файлі (файлі 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="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" />

  </head>

  <body>

    <div class="form-container">

      <form>

        <label for="name">Name:</label>

        <input type="text" id="name" />

        <br />

        <label for="email">Email:</label>

        <input type="email" id="email" />

        <br />

        <label for="message">Message:</label>

        <textarea

          id="message"

          name="message"

          rows="5"

          cols="30"

          required

        ></textarea>

        <br />

        <input type="submit" value="Submit" />

      </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="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" />

  </head>

  <body>

    <div class="form-container">

      <form>

        <label for="name">Name:</label>

        <input type="text" id="name" />

        <br />

        <label for="email">Email:</label>

        <input type="email" id="email" />

        <br />

        <label for="message">Message:</label>

        <textarea

          id="message"

          name="message"

          rows="5"

          cols="30"

          required

        ></textarea>

        <br />

        <input type="submit" value="Submit" onclick="submitted()" />

      </form>

    </div>

    <script>

      function submitted() {

        alert("submitted");

      }

    </script>

  </body>

</html>

Коли ви натиснете кнопку «Надіслати», ви отримаєте щось подібне до цього;

Pros of embedding JavaScript code between <script> … </script> tags

  • Fast to implement: Working on the same file can save you time as you can reference your JavaScript code from HTML code from the same file. 
  • Easy to read code: The presence of <script> tags separates HTML from JavaScript codes, making it easier to read and debug. 
  Spring Framework пояснюється за 5 хвилин або менше

Cons of embedding JavaScript code between <script> … </script> tags

  • Makes it hard to reuse code: If you have several forms in your app, it means you will create JavaScript code for every form.
  • Slows performance: Big code blocks on the HTML document can slow loading speeds. 

#2. Inline Code by using JavaScript code directly inside HTML

Instead of enclosing the above JavaScript code in <script> …. </script> tags, you can add it directly to the HTML code. We will use the same HTML code and style sheet (style.css). 

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title></title>

    <link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" />

  </head>

  <body>

    <div class="form-container">

      <form>

        <label for="name">Name:</label>

        <input type="text" id="name" />

        <br />

        <label for="email">Email:</label>

        <input type="email" id="email" />

        <br />

        <label for="message">Message:</label>

        <textarea

          id="message"

          name="message"

          rows="5"

          cols="30"

          required

        ></textarea>

        <br />

        <input type="submit" value="Submit" onclick="alert('inline submit')" />

      </form>

    </div>

  </body>

</html>

Коли ви натиснете «Надіслати», у вашому браузері з’явиться маленьке вікно зі словами «вбудоване надсилання».

Плюси додавання JavaScript як вбудованого коду

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

Мінуси додавання JavaScript як вбудованого коду

  • Код не можна повторно використовувати: якщо ваша програма має кілька форм, ви створите код JavaScript для кожної форми.
  • Уповільнює продуктивність: великі блоки коду в документі HTML можуть уповільнити швидкість завантаження.
  • Читабельність коду: оскільки кодова база продовжує зростати, читабельність коду зменшується.
  Як завантажити Google Play Games на iPhone

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

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

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

Імпортуйте файл script.js у файл HTML;

<head>

   <script src="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/script.js"></script>

</head>

Нова оновлена ​​HTML-сторінка матиме цей код;

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title></title>

    <link rel="stylesheet" href="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/style.css" type="text/css" />

    <script src="https://wilku.top/how-to-use-javascript-in-html-to-create-interactive-webpages/script.js"></script>

  </head>

  <body>

    <div class="form-container">

      <form>

        <label for="name">Name:</label>

        <input type="text" id="name" />

        <br />

        <label for="email">Email:</label>

        <input type="email" id="email" />

        <br />

        <label for="message">Message:</label>

        <textarea

          id="message"

          name="message"

          rows="5"

          cols="30"

          required

        ></textarea>

        <br />

        <input type="submit" value="Submit" />

      </form>

    </div>

  </body>

</html>

Додайте цей код до файлу script.js;

document.addEventListener("DOMContentLoaded", function() {

    const form = document.querySelector("form");

    form.addEventListener("submit", function(event) {

      event.preventDefault();

      alert("external JS sheet submit");

    });

  });

Цей JavaScript робить наступне;

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

JavaScript у HTML: найкращі методи

  • Зменште розміри файлів: чим більший розмір файлу, тим більше часу потрібно для завантаження в браузері. Зменшення видаляє всі небажані символи у вихідному коді, не змінюючи його значення чи продуктивність. Ви можете використовувати такі інструменти, як Yahoo YUI Compressor і HTMLMinifier, щоб створити компактну кодову базу.
  • Тримайте свій код упорядкованим: це полегшить його читання та підтримку. Ви можете використовувати такі розширення, як Prettier, щоб упорядкувати свій код.
  • Використовуйте зовнішні бібліотеки: якщо бібліотека може виконувати певне завдання для вашої програми, немає необхідності писати код з нуля. Однак уникайте використання кількох бібліотек, які досягають однакових цілей в одному проекті.
  • Оптимізуйте розміщення JavaScript: якщо ви збираєтеся додати код JavaScript до свого HTML-файлу, переконайтеся, що він розташований після HTML-коду. Розмістіть JavaScript між тегами
x