Aby dołączyć skrypt do HTML, najczęściej wykorzystuje się język JavaScript — najpopularniejszy język programowania front-endowego stron internetowych. Osadzenie skryptu pozwala na interaktywność, dynamiczną manipulację treścią oraz obsługę zdarzeń na stronie. Poniżej znajdziesz szczegółowy poradnik dotyczący różnych metod dołączania skryptów do HTML, wraz z praktycznymi przykładami zastosowań.
Osadzanie kodu JavaScript bezpośrednio w dokumencie HTML
Podstawową metodą jest użycie znacznika <script></script>. Kod JavaScript umieszcza się między tymi znacznikami. Przykład:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Przykład skryptu</title>
</head>
<body>
<button onclick="alert('Kliknąłeś guzika!')">Kliknij mnie</button>
<script>
// Prosty skrypt, który wyświetli okno alert przy załadowaniu strony
window.onload = function() {
console.log('Strona została załadowana.');
}
</script>
</body>
</html>
Znacznik <script> można umieścić zarówno w sekcji <head>, jak też na końcu <body>. Umieszczenie skryptu na końcu <body> jest popularną praktyką optymalizującą czas ładowania strony.
Dołączanie zewnętrznego pliku ze skryptem
Jeśli chcesz korzystać z tego samego kodu JavaScript na wielu stronach lub utrzymać większy porządek w kodzie, umieść kod w osobnym pliku o rozszerzeniu .js i dołącz go za pomocą atrybutu src w znaczniku <script>:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Zewnętrzny skrypt</title>
</head>
<body>
<h1>Przykład dołączania skryptu z pliku</h1>
<script src="skrypt.js"></script>
</body>
</html>
Fragment pliku skrypt.js:
console.log("To jest skrypt z pliku zewnętrznego.");Atrybuty async i defer – optymalizacja ładowania
Jeśli korzystasz z plików zewnętrznych, można dodatkowo zoptymalizować sposób ich ładowania dzięki atrybutom async i defer, zgodnie ze specyfikacją HTML5:
async– powoduje, że przeglądarka pobiera skrypt w tle i uruchamia go natychmiast po pobraniu, nie czekając na załadowanie reszty strony; uwaga: gdy na stronie jest wiele skryptów zasync, kolejność ich wykonania może być nieokreślona;defer– przeglądarka pobiera skrypt w tle, ale uruchamia go dopiero po zakończeniu analizowania całego dokumentu HTML; skrypty zdeferwykonują się w kolejności ich wystąpienia w kodzie.
Przykłady:
<script src="skrypt.js" async></script>
<script src="skrypt.js" defer></script>
Użycie tych atrybutów sprzyja wydajności i jest rekomendowane, szczególnie w większych projektach.
Przykłady zastosowań skryptów
Skrypty JavaScript używa się na stronach internetowych m.in. do:
- Obsługi zdarzeń – interaktywność przycisków i formularzy, np. po naciśnięciu przycisku wyświetlany jest komunikat;
<button onclick="alert('Cześć!')">Kliknij</button>
- Dynamiczna zmiana treści – zmiana zawartości strony bez przeładowania;
<div id="pole">Stara treść</div>
<button onclick="document.getElementById('pole').innerText='Nowa treść';">Zmień tekst</button>
- Walidacja formularzy – sprawdzanie poprawności danych przed ich wysłaniem.
<form onsubmit="return sprawdzFormularz()">
<input type="text" id="nazwa" required>
<button type="submit">Wyślij</button>
</form>
<script>
function sprawdzFormularz() {
let nazwa = document.getElementById('nazwa').value;
if(nazwa.length < 3){
alert('Podaj nazwę dłuższą niż 2 znaki!');
return false;
}
return true;
}
</script>
Najczęściej popełniane błędy
- Umieszczanie kodu JavaScript w
<head>bez odpowiednich atrybutów (defer,async), przez co skrypt blokuje rendering strony, - używanie skryptów manipulujących DOM przed pełnym załadowaniem dokumentu – najlepiej wtedy stosować
window.onload,DOMContentLoaded, lubdefer, - próba jednoczesnego użycia atrybutów
asyncidefer– jest to niezalecane; należy wybrać jeden z nich, zależnie od potrzeb.
Podsumowanie najważniejszych znaczników i atrybutów do osadzania skryptu
| Znacznik lub atrybut | Opis |
|---|---|
<script></script> |
Podstawowy sposób umieszczania kodu JavaScript w HTML |
<script src="plik.js"></script> |
Dołączenie zewnętrznego pliku ze skryptem |
async |
Pobiera i wykonuje plik równolegle z analizą HTML |
defer |
Pobiera plik równolegle, wykonuje po pełnym załadowaniu HTML |
Stosując powyższe rozwiązania, możesz w skuteczny sposób wzbogacić swoją stronę WWW o interaktywność i dynamiczne funkcje, zachowując przy tym dobrą wydajność oraz przejrzystość kodu.
