W świecie tworzenia stron internetowych, kluczową rolę odgrywają trzy języki: HTML, CSS i JavaScript. HTML służy do strukturyzowania treści, CSS do jej stylizacji, natomiast JavaScript wprowadza interaktywność.
JavaScript, będący obiektowym językiem programowania, zyskał popularność głównie dzięki swojej zdolności do ożywiania stron internetowych i aplikacji mobilnych po stronie klienta. Jego elastyczność, otwarty kod źródłowy i przystępność uczyniły go jednym z najczęściej wykorzystywanych narzędzi programistycznych.
Wykorzystując HTML5 i CSS3, możesz tworzyć statyczne witryny. Jednak, aby strona reagowała na działania użytkownika, konieczne jest użycie języka programowania, takiego jak JavaScript, który jest interpretowany przez przeglądarki.
W tym artykule omówimy, dlaczego JavaScript jest tak ważny w kontekście HTML, przeanalizujemy różne metody dodawania kodu JavaScript do HTML oraz przedstawimy najlepsze praktyki łączenia tych dwóch technologii.
Dlaczego JavaScript jest niezbędny w HTML?
- Interaktywność: JavaScript umożliwia tworzenie elementów, które reagują na działania użytkownika bez konieczności przeładowania strony. Przykładowo, licznik może zwiększać wartość po każdym kliknięciu, a formularz może potwierdzać wysłanie danych natychmiast po ich przesłaniu.
- Walidacja danych po stronie klienta: JavaScript pozwala na weryfikację poprawności wprowadzanych danych w formularzach. Możesz na przykład sprawdzić, czy adres e-mail ma prawidłowy format, hasło ma odpowiednią długość i zawiera wymagane znaki.
- Dynamiczna modyfikacja DOM: Za pomocą Document Object Model (DOM), JavaScript pozwala na dynamiczną zmianę zawartości strony bez jej przeładowywania. Dzięki temu, strona reaguje na działania użytkownika w czasie rzeczywistym, dostosowując wyświetlane treści.
- Kompatybilność z przeglądarkami: JavaScript działa w większości nowoczesnych przeglądarek. Oznacza to, że strony utworzone za pomocą HTML, CSS i JavaScript będą poprawnie wyświetlane niezależnie od używanej przeglądarki.
Wymagania wstępne
- Podstawowa znajomość HTML: Powinieneś rozumieć znaczenie tagów HTML, umieć dodawać przyciski i tworzyć formularze.
- Podstawowa znajomość CSS: Powinieneś znać podstawowe koncepcje CSS, takie jak selektory id, klasy i elementy.
- Edytor kodu: Przyda się edytor kodu, taki jak VS Code lub Atom. Możesz też skorzystać z internetowego kompilatora JavaScript, jeśli nie chcesz instalować dodatkowego oprogramowania.
Jak zintegrować JavaScript z HTML?
Istnieją trzy główne sposoby dodawania kodu JavaScript do HTML. Przyjrzymy się każdemu z nich, analizując ich zastosowanie.
#1. Osadzanie kodu między znacznikami <script> i </script>
Ta metoda umożliwia umieszczenie kodu JavaScript i HTML w tym samym pliku. Zacznijmy od utworzenia nowego folderu projektu. Utwórz folder o nazwie `javascript-html-playground`. Następnie przejdź do niego za pomocą terminala:
mkdir javascript-html-playground cd javascript-html-playground
W folderze utwórz dwa pliki: `index.html` i `style.css`.
Wklej poniższy kod do pliku `index.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">Imię:</label>
<input type="text" id="name" />
<br />
<label for="email">Email:</label>
<input type="email" id="email" />
<br />
<label for="message">Wiadomość:</label>
<textarea
id="message"
name="message"
rows="5"
cols="30"
required
></textarea>
<br />
<input type="submit" value="Wyślij" />
</form>
</div>
</body>
</html>
Następnie, wklej poniższy kod do pliku `style.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;
}
Po otwarciu pliku `index.html` w przeglądarce, zobaczysz formularz.
Teraz dodamy prosty kod JavaScript, który wyświetli komunikat „Wysłano” po kliknięciu przycisku „Wyślij”. Zmodyfikowany kod HTML z JavaScript będzie wyglądać tak:
<!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">Imię:</label>
<input type="text" id="name" />
<br />
<label for="email">Email:</label>
<input type="email" id="email" />
<br />
<label for="message">Wiadomość:</label>
<textarea
id="message"
name="message"
rows="5"
cols="30"
required
></textarea>
<br />
<input type="submit" value="Wyślij" onclick="submitted()" />
</form>
</div>
<script>
function submitted() {
alert("Wysłano");
}
</script>
</body>
</html>
Po kliknięciu przycisku „Wyślij”, pojawi się okno alertu.
Zalety osadzania kodu JavaScript między tagami <script> … </script>
- Szybka implementacja: Praca w jednym pliku przyspiesza proces tworzenia, ponieważ kod JavaScript można łatwo odwołać z kodu HTML.
- Łatwość czytania kodu: Tag <script> wyraźnie oddziela kod HTML od kodu JavaScript, co ułatwia czytanie i debugowanie.
Wady osadzania kodu JavaScript między tagami <script> … </script>
- Trudność w ponownym wykorzystaniu kodu: Jeżeli aplikacja ma wiele formularzy, kod JavaScript trzeba będzie napisać dla każdego z nich oddzielnie.
- Spowolnienie wydajności: Duże bloki kodu JavaScript w pliku HTML mogą spowolnić ładowanie strony.
#2. Kod wbudowany z wykorzystaniem kodu JavaScript bezpośrednio w HTML
Zamiast umieszczać kod JavaScript wewnątrz tagów <script> … </script>, można dodać go bezpośrednio do kodu HTML. Wykorzystamy ten sam kod HTML i arkusz stylów (`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">Imię:</label>
<input type="text" id="name" />
<br />
<label for="email">Email:</label>
<input type="email" id="email" />
<br />
<label for="message">Wiadomość:</label>
<textarea
id="message"
name="message"
rows="5"
cols="30"
required
></textarea>
<br />
<input type="submit" value="Wyślij" onclick="alert('Wysłano (inline)')" />
</form>
</div>
</body>
</html>
Po kliknięciu przycisku „Wyślij”, pojawi się okno z komunikatem „Wysłano (inline)”.
Zalety dodawania kodu JavaScript jako wbudowanego
- Szybka implementacja: Nie trzeba przechodzić między dokumentami HTML i JavaScript podczas pisania kodu.
- Idealne dla małych aplikacji: Jeśli masz małą aplikację, która nie wymaga dużej interaktywności, wbudowany JavaScript to dobry wybór.
Wady dodawania kodu JavaScript jako wbudowanego
- Kod nie nadaje się do ponownego użycia: Jeśli aplikacja ma wiele formularzy, trzeba będzie tworzyć kod JavaScript dla każdego z nich osobno.
- Spowalnia wydajność: Duże bloki kodu JavaScript w dokumencie HTML mogą spowolnić ładowanie.
- Czytelność kodu: W miarę rozwoju aplikacji, kod staje się coraz mniej czytelny.
#3. Tworzenie zewnętrznego pliku JavaScript
Wraz z rozbudową aplikacji, wstawianie kodu JavaScript bezpośrednio do pliku HTML staje się niepraktyczne. Pliki HTML z dużą ilością kodu stają się wolniejsze w ładowaniu.
Utwórz nowy plik o nazwie `script.js`, w którym będzie przechowywany kod 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 wyglądać tak:
<!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">Imię:</label>
<input type="text" id="name" />
<br />
<label for="email">Email:</label>
<input type="email" id="email" />
<br />
<label for="message">Wiadomość:</label>
<textarea
id="message"
name="message"
rows="5"
cols="30"
required
></textarea>
<br />
<input type="submit" value="Wyślij" />
</form>
</div>
</body>
</html>
Do pliku `script.js` dodaj następujący kod:
document.addEventListener("DOMContentLoaded", function() {
const form = document.querySelector("form");
form.addEventListener("submit", function(event) {
event.preventDefault();
alert("Zewnętrzny plik JS");
});
});
Ten kod JavaScript działa w następujący sposób:
- Dodajemy detektor zdarzeń, który czeka na wystąpienie zdarzenia `DOMContentLoaded`.
- Funkcja wywołania zwrotnego jest wykonywana po wystąpieniu zdarzenia `DOMContentLoaded`.
- Kod używa funkcji `querySelector` do wybrania formularza.
- Używamy `event.preventDefault()`, aby zapobiec domyślnemu zachowaniu formularza (odświeżenie strony) po wystąpieniu zdarzenia przesyłania.
- Wyświetla się komunikat „Zewnętrzny plik JS” po uruchomieniu zdarzenia przesyłania.
JavaScript w HTML: Najlepsze praktyki
- Zmniejszaj rozmiar plików: Im większy rozmiar pliku, tym dłużej strona ładuje się w przeglądarce. Minifikacja usuwa zbędne znaki z kodu źródłowego, nie zmieniając jego funkcjonalności. Możesz skorzystać z narzędzi takich jak Yahoo YUI Compressor czy HTMLMinifier, aby zoptymalizować kod.
- Uporządkuj kod: Ułatwi to czytanie i konserwację kodu. Możesz użyć rozszerzeń, takich jak Prettier, do formatowania kodu.
- Używaj zewnętrznych bibliotek: Jeśli biblioteka może wykonać zadanie potrzebne w aplikacji, nie ma potrzeby pisać kodu od nowa. Unikaj jednak używania wielu bibliotek, które wykonują to samo zadanie.
- Optymalizuj umiejscowienie kodu JavaScript: Jeśli dodajesz kod JavaScript do pliku HTML, upewnij się, że znajduje się on po kodzie HTML. Umieść JavaScript pomiędzy tagami <script> przed zamknięciem tagu </body>. Dzięki temu elementy HTML, takie jak teksty, obrazy i tabele, ładują się jako pierwsze, co poprawia szybkość ładowania strony.
Podsumowanie
Teraz możesz z łatwością używać JavaScript w połączeniu z HTML do tworzenia interaktywnych stron internetowych. Metoda, którą wybierzesz, zależy od specyfiki tworzonej aplikacji. Kod wbudowany sprawdzi się przy małych projektach, natomiast przy dużych aplikacjach, lepszym rozwiązaniem będzie wykorzystanie zewnętrznego pliku JavaScript, zaimportowanego do pliku HTML.
Sprawdź również biblioteki JavaScript do tworzenia tabel, które możesz wykorzystać w swoich projektach.