Aby podłączyć JavaScript do HTML, wykorzystaj znacznik <script>. Istnieją trzy główne metody, z których każda ma inne zastosowania, plusy i minusy. Poniżej znajdziesz praktyczne wskazówki oraz przykłady.
Metoda 1 – kod JavaScript osadzony bezpośrednio w HTML
To najprostszy sposób na umieszczenie skryptu: wstaw kod między <script></script> w dokumencie HTML.
Przykład:
Poniższy przykład wypisze komunikat w konsoli po załadowaniu strony:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>JavaScript w przeglądarce</title>
</head>
<body>
<script>
console.log("Hello World");
</script>
</body>
</html>
Kiedy używać tej metody?
Zalety: szybkie prototypowanie, wygodne w prostych zadaniach.
Wady: mało skalowalne, trudniejsze w utrzymaniu w większych projektach.
Ważna uwaga dotycząca umiejscowienia kodu:
Miejsce wstawienia skryptu ma znaczenie. Jeśli umieścisz go w sekcji <head>, może nie mieć dostępu do elementów z <body>, które nie zostały jeszcze załadowane. Zobacz różnicę:
<head>
<script>
const element = document.querySelector('#one');
console.log(element); // null – element nie istnieje jeszcze
</script>
</head>
<body>
<div id="one"></div>
<script>
const element = document.querySelector('#one');
console.log(element); // element div – teraz jest dostępny
</script>
</body>
</html>
Rekomendacja – umieszczaj skrypty tuż przed zamknięciem znacznika </body>, aby mieć pewność, że elementy HTML są już dostępne w drzewie DOM.
Metoda 2 – kod inline w atrybucie HTML
Możesz umieścić JavaScript bezpośrednio w atrybucie elementu HTML, np. onclick, aby natychmiast reagować na zdarzenia.
Przykład:
Po kliknięciu przycisku wyświetli się okienko alert:
<button onclick="alert('Kliknięto przycisk!')">Kliknij mnie</button>
Kiedy używać tej metody?
Zalety: bardzo szybkie rozwiązanie dla pojedynczych, prostych akcji.
Wady: obniża czytelność, utrudnia utrzymanie, miesza logikę ze strukturą HTML.
Uwaga – ta metoda nie jest zalecana w profesjonalnych projektach.
Metoda 3 – zewnętrzny plik JavaScript (rekomendowana)
To najpopularniejsza i najbezpieczniejsza metoda. Kod umieszczasz w osobnym pliku .js, a w HTML dołączasz go przez atrybut src.
Krok po kroku:
- Utwórz w katalogu projektu nowy plik, np. script.js.
- Dodaj do niego kod – na przykład obsługę kliknięcia przycisku:
Przykładowa treść pliku script.js:
console.log('Oddzielny plik JavaScript');
const button = document.querySelector('#myButton');
button.addEventListener('click', function() {
alert('Przycisk został kliknięty!');
});
Dołącz skrypt w dokumencie HTML przed zamknięciem znacznika <body>:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Moja strona</title>
</head>
<body>
<h1>Przykład dołączania skryptu JavaScript</h1>
<button id="myButton">Kliknij mnie</button>
<!-- Skrypt umieszczony przed zamknięciem body -->
<script src="script.js"></script>
</body>
</html>
Zalety tej metody:
Poniżej kluczowe korzyści wynikające z rozdzielenia HTML i JS:
- dobre rozdzielenie struktury (HTML) od logiki (JavaScript),
- łatwiejsza praca w większych zespołach i utrzymanie projektu,
- buforowanie plików JS przez przeglądarkę poprawia czas ładowania,
- większa czytelność i lepsza organizacja kodu,
- ponowne użycie jednego skryptu na wielu stronach.
Atrybuty dodatkowe – async i defer
Przy wczytywaniu zewnętrznych skryptów możesz kontrolować sposób ich pobierania i wykonywania za pomocą atrybutów async oraz defer.
Atrybut async:
Użyj, gdy skrypt nie zależy od DOM ani od innych skryptów:
<script src="plik.js" async></script>
Przeglądarka pobierze skrypt w tle i wykona go, gdy tylko będzie gotowy, bez blokowania renderowania strony.
Atrybut defer:
Użyj, gdy skrypt może poczekać do pełnego wczytania HTML (często najlepszy wybór w <head>):
<script src="plik.js" defer></script>
Skrypt zostanie pobrany równolegle, ale uruchomi się dopiero po pełnym przetworzeniu dokumentu HTML, zachowując kolejność względem innych skryptów z defer.
