Jak używać JavaScript w HTML do tworzenia interaktywnych stron internetowych

HTML, CSS i JavaScript to trzy główne języki używane w programowaniu front-end. HTML to język znaczników, a CSS to język stylizacji.

JavaScript jest zorientowanym obiektowo językiem programowania, używanym głównie do tworzenia klienckiej strony aplikacji internetowych i mobilnych. Ten dynamiczny język open source stał się jednym z najczęściej używanych języków programowania ze względu na swoją elastyczność i łatwość zrozumienia.

Dzięki HTML5 i CSS3 możesz tworzyć statyczne strony internetowe. Jednak aby dodać interaktywność do takiej witryny, musisz użyć języka programowania, takiego jak JavaScript, który jest zrozumiały dla przeglądarek.

Ten artykuł wyjaśni, dlaczego musisz używać JavaScript z HTML, różne podejścia do dodawania kodu JavaScript do HTML oraz najlepsze praktyki łączenia tych dwóch języków.

Spis treści:

Dlaczego tak ważne jest używanie JavaScript w HTML

Dodaj interaktywność: Interaktywność odpowiada na dane wejściowe/działania użytkownika w czasie rzeczywistym bez przeładowywania przeglądarki. Na przykład możesz mieć licznik, który zwiększa się o jeden za każdym razem, gdy zostanie kliknięty. Innym przykładem może być odpowiedź informująca użytkowników, że ich opinia została wysłana za każdym razem, gdy klikają przycisk przesyłania.
Walidacja po stronie klienta: Możesz użyć JavaScript do przechwytywania poprawnych danych w formularzach. Na przykład możesz użyć tego języka programowania do sprawdzania poprawności danych wprowadzanych przez użytkownika na stronie rejestracji na podstawie formatu wiadomości e-mail, długości hasła i kombinacji używanych znaków.
Manipulacja DOM: JavaScript oferuje Document Object Model (DOM), który ułatwia dynamiczną zmianę zawartości strony internetowej. Dzięki tej technologii zawartość strony jest aktualizowana automatycznie na podstawie danych wprowadzonych przez użytkownika bez ponownego ładowania strony internetowej.
Kompatybilność z różnymi przeglądarkami: JavaScript jest kompatybilny ze wszystkimi nowoczesnymi przeglądarkami. Strony internetowe utworzone przy użyciu HTML, CSS i JavaScript będą więc doskonale działać w różnych przeglądarkach.

Wymagania wstępne

Podstawowe zrozumienie HTML: rozumiesz podstawowe tagi HTML, potrafisz dodawać przyciski i tworzyć formularze przy użyciu HTML.
Podstawowe zrozumienie CSS: rozumiesz pojęcia CSS, takie jak id, klasa i selektory elementów.
Edytor kodu: Możesz użyć edytora kodu, takiego jak VS Code lub Atom. Możesz także użyć internetowego kompilatora JavaScript, jeśli nie chcesz instalować oprogramowania w swoim systemie.

Jak używać JavaScript w HTML

Możesz użyć trzech głównych podejść, aby dodać kod JavaScript do HTML. Badamy każde podejście i sprawdzamy, gdzie najlepiej pasuje.

# 1. Osadzanie kodu między znacznikami

Takie podejście pozwala mieć kody JavaScript i HTML w tym samym pliku (pliku HTML). Możemy zacząć od utworzenia folderu projektu, w którym zademonstrujemy, jak to działa. Możesz użyć tych poleceń, aby rozpocząć;

mkdir javascript-html-playground

cd javascript-html-playground

Utwórz dwa pliki; index.html i style.css

Dodaj ten kod startowy do pliku 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>

Dodaj ten kod startowy do swojego pliku 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;

  }

Kiedy strona internetowa zostanie wyrenderowana, będziesz mieć coś takiego;

Możemy teraz dodać prosty kod JavaScript, który mówi „przesłano” po kliknięciu przycisku przesyłania. Zrefaktoryzowany kod HTML z JavaScriptem będzie;

<!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>

Po kliknięciu przycisku przesyłania otrzymasz coś podobnego do tego;

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. 
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>
Kiedy klikniesz Prześlij, pojawi się małe okno w Twojej przeglądarce z napisem „Prześlij w tekście”. 
Zalety dodawania JavaScript jako kodu wbudowanego

Szybkie wdrożenie: nie musisz przechodzić z jednego dokumentu do drugiego, aby napisać kod HTML i JavaScript. 
Idealny dla małej aplikacji: jeśli masz małą aplikację, która nie wymaga dużej interaktywności, wbudowany JavaScript to doskonały wybór. 

Wady dodawania JavaScript jako kodu wbudowanego

Kod nie nadaje się do ponownego użycia: jeśli Twoja aplikacja ma kilka formularzy, utworzysz kod JavaScript dla każdego formularza.
Spowalnia wydajność: duże bloki kodu w dokumencie HTML mogą spowolnić ładowanie. 
Czytelność kodu: Wraz ze wzrostem bazy kodów zmniejsza się czytelność kodu. 

#3.  Tworzenie zewnętrznego pliku JavaScript
W miarę rozwoju aplikacji zauważysz, że dodawanie kodu JavaScript bezpośrednio do pliku HTML nie jest dobrym pomysłem.  Prawdopodobnie będziesz mieć strony internetowe o niskiej prędkości ładowania, gdy masz dużo kodu w pliku HTML. 
Utwórz nowy plik script.js do przechowywania kodu JavaScript. 
Zaimportuj plik script.js do pliku HTML;
<head>

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

</head>
Nowa zaktualizowana strona HTML będzie miała ten kod;
<!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>
Dodaj ten kod do pliku script.js;
document.addEventListener("DOMContentLoaded", function() {

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

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

      event.preventDefault();

      alert("external JS sheet submit");

    });

  });
Ten JavaScript wykonuje następujące czynności;

Mamy detektor zdarzeń, który czeka na uruchomienie zdarzenia DOMContentLoaded. 
Funkcja wywołania zwrotnego jest wykonywana po uruchomieniu zdarzenia DOMContentLoaded.
Kod używa querySelector do wybrania formularza.
Używamy event.preventDefault(), aby uniemożliwić DOM wybranie domyślnego zachowania (odśwież stronę lub przejdź do nowej strony) po uruchomieniu zdarzenia przesyłania. 
Komunikat „Przesłanie zewnętrznego arkusza JS” jest uruchamiany po uruchomieniu zdarzenia przesyłania. 


JavaScript w HTML: najlepsze praktyki

Zmniejsz rozmiary plików: Im większy rozmiar pliku, tym więcej czasu zajmuje załadowanie w przeglądarce.  Minifying usuwa wszystkie niechciane znaki w kodzie źródłowym bez zmiany jego znaczenia lub wydajności.  Możesz użyć narzędzi takich jak Yahoo YUI Compressor i HTMLMinifier, aby stworzyć kompaktową bazę kodu. 
Uporządkuj swój kod: Ułatwi to czytanie i konserwację.  Możesz użyć rozszerzeń, takich jak Prettier, aby uporządkować swój kod. 
Użyj bibliotek zewnętrznych: jeśli biblioteka może wykonać określone zadanie dla Twojej aplikacji, nie ma potrzeby pisania kodu od zera.  Unikaj jednak używania wielu bibliotek, które osiągają te same cele w tym samym projekcie. 
Zoptymalizuj umieszczenie kodu JavaScript: jeśli zamierzasz dodać kod JavaScript do pliku HTML, upewnij się, że znajduje się on po kodzie HTML.  Umieść JavaScript między tagami

Dlaczego tak ważne jest używanie JavaScript w HTML

Wymagania wstępne

Jak używać JavaScript w HTML

# 1. Osadzanie kodu między znacznikami i

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

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

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

Zalety dodawania JavaScript jako kodu wbudowanego

Wady dodawania JavaScript jako kodu wbudowanego

#3. Tworzenie zewnętrznego pliku JavaScript

JavaScript w HTML: najlepsze praktyki

# 1. Osadzanie kodu między znacznikami