Tag <script> to kluczowy element HTML, który pozwala osadzać i wykonywać skrypty po stronie klienta, najczęściej w języku JavaScript.
Dzięki niemu możesz umieścić kod inline w dokumencie lub załadować go z zewnętrznego pliku, co zapewnia interaktywność bez przeładowywania strony.
Podstawowe zastosowanie tagu <script>
Element <script> obsługuje kod inline i zewnętrzny przez atrybut src. W HTML5 atrybut type="text/javascript" jest opcjonalny, bo JavaScript jest domyślnym językiem skryptowym.
Przykład 1 – skrypt inline z alertem
Oto prosty przykład wyświetlający komunikat po załadowaniu strony:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Przykład skryptu inline</title>
</head>
<body>
<h1>Witaj na mojej stronie!</h1>
<script>
alert("Witaj, świecie!");
</script>
</body>
</html>
Umieszczaj skrypty na końcu <body> lub używaj defer/async, aby nie blokować renderowania.
Ładowanie zewnętrznych plików JavaScript
W praktyce najczęściej korzysta się z atrybutu src, który wskazuje ścieżkę do pliku .js. Separacja logiki od struktury HTML ułatwia utrzymanie i ponowne wykorzystanie skryptów.
Przykład 2 – podłączenie zewnętrznego skryptu
Plik skryptu, który zmienia obrazek w zależności od pory dnia:
main.js:
function zmienObrazek() {
const godzina = new Date().getHours();
let obrazek = 'sloneczny.jpg';
if (godzina >= 20 || godzina < 6) {
obrazek = 'ksiezycowy.jpg';
}
document.getElementById('obrazek-dnia').src = obrazek;
}
zmienObrazek();
Plik HTML odwołujący się do powyższego skryptu:
index.html:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Zmiana obrazka po porze dnia</title>
</head>
<body>
<h1>Obrazek zależny od pory dnia</h1>
<img id="obrazek-dnia" src="sloneczny.jpg" alt="Obrazek dnia" width="300">
<script src="scripts/main.js"></script>
</body>
</html>
Obrazek zmienia się automatycznie na podstawie godziny, dodając stronie dynamiki bez interakcji użytkownika.
Kluczowe atrybuty tagu <script>
Poniżej znajdziesz najważniejsze atrybuty, które kontrolują ładowanie i wykonanie skryptów:
| Atrybut | Opis | Przykład |
|---|---|---|
| src | ścieżka do zewnętrznego pliku JS | <script src="skrypt.js"></script> |
| async | ładuje i wykonuje skrypt asynchronicznie, nie blokując parsowania HTML | <script async src="skrypt.js"></script> |
| defer | odracza wykonanie do czasu pełnego zbudowania drzewa DOM | <script defer src="skrypt.js"></script> |
| type | typ skryptu; dla modułów ES użyj type="module" |
<script type="module"></script> |
| nomodule | pomija skrypt w nowoczesnych przeglądarkach (fallback dla starszych) | <script nomodule src="stary-skrypt.js"></script> |
Uwaga: jeśli skrypt jest w <head>, użyj defer lub async, aby nie blokować renderowania.
Przykład 3 – użycie defer i async
Tak możesz połączyć oba podejścia:
<head>
<!-- Asynchronicznie: może wykonać się w dowolnym momencie -->
<script async src="reklamy.js"></script>
</head>
<body>
<!-- Odroczone: uruchomi się po zbudowaniu DOM -->
<script defer src="main.js"></script>
</body>
Kontekst użycia i modele treści
Tag <script> może znajdować się w <head> lub w <body>, przy czym dla wydajności preferowane jest umieszczanie go na końcu <body> albo korzystanie z defer/async.
W HTML Living Standard <script> należy do kategorii: metadane, treść przepływowa, treść frazowa oraz elementy wspierające skrypty.
Aby uniknąć problemów, nie dopuszczaj do blokowania parsowania dokumentu i zadbaj o obsługę wyjątków w kodzie (np. przez try...catch).
Zaawansowane przykłady i dobre praktyki
Przykład 4 – manipulacja DOM-em
Kod, który zmienia treść akapitu po kliknięciu przycisku:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Manipulacja DOM</title>
</head>
<body>
<button id="przycisk">Kliknij mnie!</button>
<p id="wynik">Wynik tutaj</p>
<script>
document.getElementById('przycisk').addEventListener('click', function() {
document.getElementById('wynik').textContent = 'Kliknięto przycisk!';
});
</script>
</body>
</html>
To klasyczny wzorzec interaktywności: zdarzenie użytkownika wywołuje modyfikację DOM.
Przykład 5 – moduły ES6
Dla nowoczesnych aplikacji korzystaj z modułów:
<script type="module">
import { funkcja } from './modul.js';
funkcja();
</script>
Oto najczęstsze błędy związane z użyciem <script>:
- umieszczanie
<script>w<head>bezdefer(blokuje stronę), - brak zamknięcia tagu lub błędna ścieżka
src, - mieszanie inline z plikami zewnętrznymi bez potrzeby (utrudnia debugowanie).
Integracja z HTML i CSS
Tag <script> współpracuje z innymi elementami strony w różnych scenariuszach:
- Formularze – walidacja po stronie klienta i dynamiczne podpowiedzi;
- CSS – sterowanie klasami i stylami (np.
element.style.display = 'none';), - Semantyka – dynamiczne menu i komponenty w ramach
<main>czy<nav>.
Przykład walidacji pola e-mail przed wysłaniem formularza:
<form id="formularz">
<input type="email" id="email" required>
<button type="submit">Wyślij</button>
</form>
<script>
document.getElementById('formularz').addEventListener('submit', function(e) {
const email = document.getElementById('email').value;
if (!email.includes('@')) {
e.preventDefault();
alert('Nieprawidłowy email!');
}
});
</script>
Wydajność i bezpieczeństwo
Aby przyspieszyć ładowanie i zwiększyć bezpieczeństwo, stosuj poniższe praktyki:
- Minifikacja – kompresuj pliki JS, aby zmniejszyć rozmiar transferu;
- CSP (Content Security Policy) – korzystaj z
noncedla skryptów inline (np.<script nonce="losowy-token">), - Polyfille – dodawaj brakujące funkcje dla starszych przeglądarek.