Rozdział 1 z 12

JavaScript w HTML: znacznik script, defer i pierwsze Hello World

zweryfikowano 7 września 2026 · 6 min

Szybka odpowiedź

Żeby dodać JavaScript do strony HTML, utwórz plik app.js i wczytaj go przez <script src="app.js" defer></script> w head albo tuż przed </body> bez defer. Wpisz w pliku console.log('Hello World');, otwórz stronę i konsolę (F12): komunikat się pojawi.

Na koniec tego rozdziału, będziesz umieć podpiąć plik JavaScript do strony HTML, wybrać między head a końcem body i wyświetlić komunikat przez alert() albo w konsoli przeglądarki.

Ten pierwszy rozdział przygotowuje wszystko, czego potrzebują następne: stronę HTML, plik JavaScript podpięty do tej strony i dwa sposoby wyświetlenia komunikatu, żeby sprawdzić, czy połączenie działa. Wystarczy dwadzieścia minut. Na koniec napiszesz i uruchomisz swój pierwszy program w JavaScripcie w przeglądarce.

Czym jest JavaScript (i czym nie jest)

JavaScript to język programowania przeglądarek internetowych. HTML opisuje treść strony, CSS jej wygląd, a JavaScript jej zachowanie: reakcję na kliknięcie, sprawdzenie formularza, zmianę tekstu elementu, wczytanie danych. Każda przeglądarka ma silnik, który czyta i wykonuje ten kod.

Dwa wyjaśnienia, które oszczędzą ci niepotrzebnego szukania:

JavaScript nie ma nic wspólnego z Javą. Nazwa pochodzi z 1995 roku i z decyzji marketingowej. Oba języki nie dzielą ani składni, ani zastosowań.
Nie ogranicza się już do przeglądarki. Z Node.js ten sam język pisze serwery i narzędzia. Ten kurs zostaje w przeglądarce: to najprostsze środowisko do nauki, masz je już zainstalowane na swoim komputerze.

Tworzenie wyjściowej strony HTML

Otwórz edytor kodu (Visual Studio Code nadaje się bardzo dobrze) i utwórz katalog tutoriel-js. W nim plik index.html z minimalną strukturą dokumentu:

index.html

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Mon premier script</title>
</head>
<body>
  <h1>Bonjour</h1>
  <!-- Le contenu de votre site ira ici -->
</body>
</html>

Otwórz ten plik w przeglądarce (dwuklik albo przeciągnięcie do okna). Strona wyświetla „Bonjour”. Na razie ani śladu JavaScriptu.

Znacznik script: gdzie umieścić JavaScript

JavaScript trafia na stronę przez znacznik <script>. Może zawierać kod bezpośrednio albo wskazywać plik zewnętrzny atrybutem src. Możliwe są trzy miejsca, a wybór ma swoje konsekwencje.

Na końcu body: prosto i bezpiecznie

index.html

<body>
  <h1>Bonjour</h1>
  <script src="app.js"></script>
</body>

Przeglądarka czyta HTML z góry na dół. Gdy dociera do znacznika, h1 już istnieje: skrypt może na nim działać. To klasyczne miejsce i sprawdza się zawsze.

W head z atrybutem defer: nowoczesny zapis

index.html

<head>
  <meta charset="UTF-8">
  <title>Mon premier script</title>
  <script src="app.js" defer></script>
</head>

defer każe przeglądarce pobrać plik od razu, ale wykonać go dopiero po wczytaniu całego HTML-a. Dostajesz to, co najlepsze z obu rozwiązań: pobieranie startuje wcześnie, a kod działa, gdy strona jest gotowa. Skrypty z defer wykonują się w kolejności, w jakiej zostały zapisane.

W head bez niczego: klasyczny błąd

html

<head>
  <script src="app.js"></script> <!-- s'exécute avant que le body existe -->
</head>

Tutaj skrypt wykonuje się, zanim powstanie h1. Każda próba odczytania go zwraca null, a w konsoli pojawia się błąd „Cannot read properties of null”. Jeśli zobaczysz go w rozdziale 9, sprawdź najpierw położenie swojego znacznika.

A co z async?

async też pobiera równolegle, ale wykonuje skrypt zaraz po jego dotarciu, nie czekając ani na HTML, ani na pozostałe skrypty. Przydaje się przy skrypcie niezależnym, na przykład do pomiaru ruchu, a nie przy kodzie, który operuje na stronie. Na potrzeby tego kursu zapamiętaj defer.

Skrypt w kodzie strony czy osobny plik?

Kod można też napisać wprost na stronie:

html

<script>
  console.log('Hello World');
</script>

Wygodne przy trzyliniowym teście, złe przy wszystkim innym: takiego kodu nie użyjesz ponownie na innej stronie, przeglądarka nie zapisze go w pamięci podręcznej, a on sam miesza się z HTML-em. Już od tego rozdziału pracujemy w osobnym pliku app.js, położonym obok index.html.

Pierwszy kod: „Hello World” przez alert()

Utwórz app.js w tym samym katalogu co index.html i podepnij go znacznikiem z defer pokazanym wyżej. W pliku:

app.js

alert('Hello World!');

Przeładuj stronę: okno dialogowe wyświetla komunikat. alert() to funkcja przeglądarki, która blokuje stronę do czasu kliknięcia OK. Służy do sprawdzenia, czy skrypt się wykonuje; w prawdziwej witrynie jej nie używamy, bo przerywa pracę użytkownikowi.

Prawdziwe narzędzie: console.log() i konsola przeglądarki

Zastąp zawartość app.js:

app.js

console.log('Hello World!');
console.log('Titre de la page :', document.title);
console.log(2 + 3);

Przeładuj: na ekranie nic się nie zmienia. Otwórz narzędzia deweloperskie klawiszem F12 (albo prawym przyciskiem myszy i „Zbadaj”), a potem zakładkę Konsola. Wyświetlają się w niej trzy linie:

code

Hello World!
Titre de la page : Mon premier script
5

Konsola jest miejscem, w którym JavaScript się odzywa. Pokazuje to, o co poprosisz przez console.log(), ale też wszystkie błędy, z nazwą pliku i numerem linii. Trzymaj ją otwartą przez cały kurs: to twoje pierwsze narzędzie do debugowania, a do tego pozwala pisać JavaScript bezpośrednio, bez pliku, żeby sprawdzić jakiś pomysł.

Twoje pierwsze błędy i jak je czytać

Jeśli nic się nie wyświetla, konsola powie dlaczego. Trzy najczęstsze przypadki na tym etapie:

„Failed to load resource: 404”: plik app.js nie został znaleziony. Sprawdź, czy leży w tym samym katalogu co index.html i czy nazwa jest identyczna, razem z wielkością liter.
„Uncaught SyntaxError”: literówka w kodzie, najczęściej niedomknięty nawias albo apostrof. Numer linii doprowadzi cię na miejsce.
Zupełnie nic, nawet błędu: przeglądarka pokazuje wersję z pamięci podręcznej. Przeładuj przez Ctrl+F5 (Cmd+Shift+R na Macu).

Podsumowanie

JavaScript trafia na stronę przez <script src="app.js" defer></script> w head albo przez ten sam znacznik bez defer na końcu body.
Osobny plik jest lepszy niż skrypt w kodzie strony, gdy tylko kod przekracza kilka linii.
alert() potwierdza, że skrypt działa; console.log() i konsola (F12) to narzędzia codzienne.
Błąd czyta się w konsoli: plik, linia, komunikat.

W następnym rozdziale, Zmienne i typy danych, program zaczyna zapamiętywać wartości. A jeśli wolisz najpierw zobaczyć całą ścieżkę, przewodnik po nauce JavaScriptu przedstawia dwanaście rozdziałów i plan na trzydzieści dni.

ĆwiczenieZrób stronę, która przy wczytaniu wypisuje w konsoli „Witamy”, a potem, w tym samym pliku, alert pokazujący tytuł strony dzięki document.title. Sprawdź, czy kolejność obu komunikatów odpowiada tej z twojego kodu.

Częste błędy

Skrypt wczytany przed HTML-em script w head bez defer wykonuje się, zanim strona powstanie: document.querySelector('h1') zwraca null. Dodaj defer albo przenieś znacznik na koniec body.

Zła ścieżka do pliku src="app.js" szuka pliku obok strony HTML. Zakładka Sieć w narzędziach deweloperskich pokazuje 404, a konsola wypisuje „Failed to load resource”.

Wielkie i małe litery App.js i app.js to na większości serwerów dwa różne pliki, nawet jeśli Windows myli je lokalnie.

Java to nie JavaScript Nazwy są podobne, języki już nie. Kurs Javy w niczym ci tu nie pomoże.

JavaScript w HTML: znacznik script, defer i pierwsze Hello World

Czym jest JavaScript (i czym nie jest)

Tworzenie wyjściowej strony HTML

Znacznik script: gdzie umieścić JavaScript

Na końcu body: prosto i bezpiecznie

W head z atrybutem defer: nowoczesny zapis

W head bez niczego: klasyczny błąd

Skrypt w kodzie strony czy osobny plik?

Pierwszy kod: „Hello World” przez alert()

Prawdziwe narzędzie: console.log() i konsola przeglądarki

Twoje pierwsze błędy i jak je czytać

Podsumowanie

Częste błędy

Nowe testy, poradniki i projekty — e-mailem.