ZAWODNIK

JavaScript: pierwszy skrypt na stronie

INF.03 · teoria
autor: redakcja · 09.09.2026
JavaScript wykonuje się w przeglądarce, po stronie klienta. Jak dołączyć skrypt znacznikiem script i plikiem z atrybutem src, gdzie go postawić, jak pisać średniki i komentarze oraz czym różnią się console.log, alert, innerHTML i document.write. Lekcja 11.1 kursu INF.03.

[ INF.03: PYTANIA Z TEGO DZIAŁU ]

Przejrzyj pytania: javascriptĆwicz dział: javascript
JavaScript to język skryp­to­wy wy­ko­ny­wa­ny przez prze­glą­dar­kę, czyli po stro­nie klien­ta: kod do­łą­czo­ny do strony uru­cha­mia się na kom­pu­te­rze użyt­kow­ni­ka, a serwer nie bierze w tym udzia­łu. Dzięki temu strona re­agu­je na klik­nię­cie, spraw­dza for­mu­larz przed wy­sła­niem i pod­mie­nia treść bez prze­ła­do­wa­nia. W części pi­sem­nej wra­ca­ją py­ta­nia „któ­re­go języka użyć po stro­nie klien­ta", „jak do­łą­czyć plik skrypt.js do strony", „od czego za­czy­na się ko­men­tarz" i „co wy­pi­sze przed­sta­wio­ny skrypt". W za­da­niu prak­tycz­nym jednym z oce­nia­nych re­zul­ta­tów jest „dzia­ła­nie wi­try­ny in­ter­ne­to­wej", a w nim skrypt JavaScript uru­cha­mia­ny przy­ci­skiem albo przy za­ła­do­wa­niu strony.

Prze­glą­dar­ka kontra serwer

Strona klien­ta to prze­glą­dar­ka na kom­pu­te­rze użyt­kow­ni­ka, a strona ser­we­ra to kom­pu­ter z ser­we­rem WWW i ser­we­rem bazy danych. JavaScript pra­cu­je wy­łącz­nie po stro­nie klien­ta: do uru­cho­mie­nia skryp­tu wy­star­czy sama prze­glą­dar­ka, bez Apache, bez PHP i bez MySQL. Kod nie jest kom­pi­lo­wa­ny do po­sta­ci ma­szy­no­wej, tylko in­ter­pre­to­wa­ny, czyli czy­ta­ny i wy­ko­ny­wa­ny in­struk­cja po in­struk­cji przez silnik wbu­do­wa­ny w prze­glą­dar­kę.
PHP jest prze­ci­wień­stwem: wy­ko­nu­je się na ser­we­rze, a do prze­glą­dar­ki trafia sam wynik jego pracy, więc kodu PHP w źródle strony nigdy nie widać. Opi­su­je to lekcja PHP po stro­nie ser­we­ra. Po­dział ról w py­ta­niach jest stały: za­pi­sa­nie za­mó­wie­nia do bazy, spraw­dze­nie hasła i po­bra­nie wier­szy z tabeli to za­da­nia ser­we­ra, a na­tych­mia­sto­wa re­ak­cja na klik­nię­cie, pod­mia­na treści aka­pi­tu i spraw­dze­nie, czy pole for­mu­la­rza nie jest puste, to za­da­nia JavaScriptu. Wy­łącz­nie po stro­nie ser­we­ra dzia­ła­ją PHP, Python, Java, C# i Ruby.
Kon­so­la prze­glą­dar­ki, otwie­ra­na kla­wi­szem F12 w za­kład­ce Kon­so­la, po­ka­zu­je błędy skryp­tu i po­zwa­la wy­ko­nać po­je­dyn­czy wiersz kodu. To ona jest od­po­wie­dzią na py­ta­nie, czym te­stu­je się kod JavaScript: kon­so­lą w prze­glą­dar­ce, nie in­ter­pre­te­rem PHP ani kom­pi­la­to­rem C++. Krótki frag­ment bez wła­snej strony uru­cho­mi w prze­glą­dar­ce in­ter­pre­ter JavaScript.
Pu­łap­ka: Java i JavaScript to dwa różne języki. Java jest kom­pi­lo­wa­na i uru­cha­mia­na przez ma­szy­nę wir­tu­al­ną, naj­czę­ściej po stro­nie ser­we­ra, a JavaScript jest in­ter­pre­to­wa­ny przez prze­glą­dar­kę. Wspól­ny człon nazwy po­cho­dzi z re­kla­my z 1995 roku i ni­cze­go nie znaczy.

Do­łą­cza­nie skryp­tu do strony

<script> (skrypt) to znacz­nik, którym kod JavaScript trafia do do­ku­men­tu HTML. Ma dwie po­sta­cie. Pierw­sza trzyma kod wprost między znacz­ni­kiem otwie­ra­ją­cym a za­my­ka­ją­cym, i tak wy­glą­da więk­szość ramek z pytań.
1
2
3
<script>
alert("Witaj w sklepie");
</script>
Druga wska­zu­je plik ze­wnętrz­ny atry­bu­tem src (źródło). Plik ma roz­sze­rze­nie .js i za­wie­ra sam kod JavaScript, bez znacz­ni­ka <script> i bez HTML.
1
<script src="skrypt.js"></script>
Znacz­nik z atry­bu­tem src musi mieć część za­my­ka­ją­cą, a kod wpi­sa­ny w jego środek zo­sta­je po­mi­nię­ty. Zapisy pod­su­wa­ne w py­ta­niach jako pu­łap­ki to <link rel="script" href="skrypt.js">, <script link="skrypt.js"> oraz <script>skrypt.js</script>: w ostat­nim nazwa pliku jest dla prze­glą­dar­ki zwy­kłym tek­stem do wy­ko­na­nia, a nie ad­re­sem. Znacz­ni­ka <java> w HTML nie ma w ogóle.
Skrypt za­dzia­ła i w sekcji head, i w body, i taka jest od­po­wiedź w py­ta­niu o do­pusz­czal­ne miej­sca. Prze­glą­dar­ka buduje stronę od góry do dołu i wy­ko­nu­je skrypt w chwili, gdy na niego trafi, więc miej­sce roz­strzy­ga o czym innym: skrypt z sekcji head rusza, zanim po­wsta­nie treść strony, i szu­ka­ne­go ele­men­tu jesz­cze nie znaj­dzie. Dla­te­go skrypt się­ga­ją­cy po ele­men­ty strony stawia się tuż przed </body>, na końcu treści, i do­kład­nie tam do­łą­cza się plik .js w za­da­niu prak­tycz­nym. Sam szkie­let do­ku­men­tu opi­su­je lekcja Szkie­let do­ku­men­tu HTML.

In­struk­cje, wiel­kość liter i ko­men­ta­rze

In­struk­cja to po­je­dyn­cze po­le­ce­nie dla prze­glą­dar­ki, za­koń­czo­ne śred­ni­kiem. Prze­glą­dar­ka po­tra­fi do­sta­wić bra­ku­ją­cy śred­nik sama, ale robi to według wła­snych reguł, więc w kodzie na eg­za­min pisze się go po każdej in­struk­cji. Kilka in­struk­cji obej­mu­je blok w na­wia­sach klam­ro­wych: to on należy do in­struk­cji if albo do pętli, a brak klamry przy dwóch wier­szach jest błędem, przez który ko­mu­ni­kat nie po­ja­wia się wcale.
JavaScript roz­róż­nia wiel­kie i małe litery. Zmien­ne cena i Cena to dwie różne zmien­ne, a nazwa metody prze­pi­sa­na z błędem, jak getElementByTagName za­miast getElementsByTagName, kończy się ko­mu­ni­ka­tem, że taka funk­cja nie ist­nie­je. Nazwy metod prze­pi­su­je się do­kład­nie z tabeli modelu DOM do­łą­czo­nej do ar­ku­sza.
Nazwa zmien­nej składa się z liter, cyfr, pod­kre­śle­nia i znaku dolara, nie za­czy­na się od cyfry i nie za­wie­ra spacji ani pol­skich znaków. Po­praw­ne jest imie2, a imię2, #imie i 2imie nie. Znak $ przed nazwą, obo­wiąz­ko­wy w PHP, w JavaScripcie jest zwykłą literą nazwy, a nie wy­ma­ga­niem.
Ko­men­tarz to tekst po­mi­ja­ny przy wy­ko­na­niu, wpi­sa­ny dla czło­wie­ka czy­ta­ją­ce­go kod. Jed­no­wier­szo­wy za­czy­na się od // i sięga do końca wier­sza, a wie­lo­wier­szo­wy stoi między /* a */. Znaki # znane z PHP oraz <!-- z HTML ko­men­ta­rza w JavaScripcie nie tworzą.
[ JS ]
krok po kroku
skrypt
wierszy: 5
1
2
3
4
5
6
od nowa
❮ wstecz
dalej ❯
do końca
krok 0 z 4
start skryptu
ZMIENNE
jeszcze żadnej zmiennej
WYJŚCIE
skrypt jeszcze nic nie wypisał
Otwórz w interpreterze ›
Wynik w kon­so­li: 316.

Trzy spo­so­by po­ka­za­nia wyniku

Wynik pracy skryp­tu trzeba gdzieś po­ka­zać, a każda z dróg trafia gdzie in­dziej. console.log (zapis w dzien­ni­ku kon­so­li) wy­pi­su­je war­tość w kon­so­li prze­glą­dar­ki, którą widzi pro­gra­mi­sta, a nie użyt­kow­nik strony. Służy do spraw­dza­nia, co siedzi w zmien­nej w danym mo­men­cie. Nazw console.write, console.print ani console.echo w języku nie ma.
alert (ostrze­że­nie) otwie­ra okno z ko­mu­ni­ka­tem i przy­ci­skiem OK, a strona czeka na jego za­mknię­cie. Dwa po­krew­ne okna do­peł­nia­ją zestaw: prompt (za­py­taj) pyta o war­tość i zwraca to, co użyt­kow­nik wpisał, a confirm (po­twierdź) daje przy­ci­ski OK oraz Anuluj i zwraca prawdę albo fałsz.
innerHTML (we­wnętrz­na treść HTML) to wła­ści­wość ele­men­tu, która trzyma jego za­war­tość. Po po­bra­niu ele­men­tu metodą document.getElementById("id") przy­pi­sa­nie do innerHTML pod­mie­nia to, co widać w środku. Tego spo­so­bu ocze­ku­je arkusz, bo wynik ma po­ja­wić się we wska­za­nym miej­scu strony, a nie w oknie ani w kon­so­li.
1
2
3
4
<p id="wynik">Brak danych</p>
<script>
document.getElementById("wynik").innerHTML = "Do zapłaty: 316 zł";
</script>
Wynik: akapit z na­pi­sem Brak danych po­ka­zu­je po wy­ko­na­niu skryp­tu Do zapłaty: 316 zł.
document.write (pisz w do­ku­men­cie) do­pi­su­je tekst wprost do do­ku­men­tu w miej­scu, w którym stoi skrypt, i przyj­mu­je także znacz­ni­ki HTML. Ko­lej­ne frag­men­ty skleja się w nim zna­kiem plus, nie kropką znaną z PHP.
1
2
3
<script>
document.write("<h2>Promocja dnia</h2>");
</script>
Wynik: w tym miej­scu strony po­ja­wia się na­głó­wek Promocja dnia. Wy­wo­ła­ny już po wczy­ta­niu strony, na przy­kład z przy­ci­sku, document.write kasuje całą jej do­tych­cza­so­wą za­war­tość i zo­sta­wia sam nowy tekst, więc na dzia­ła­ją­cej stro­nie sto­su­je się innerHTML. Znać go trzeba, bo w py­ta­niach i w ar­ku­szach stoi wszę­dzie.

Pierw­szy skrypt na stro­nie sklepu

Skrypt osa­dzo­ny w stro­nie to naj­krót­sza droga od pu­ste­go aka­pi­tu do wyniku ob­li­cze­nia. Strona sklepu kom­pu­te­ro­we­go z wcze­śniej­szych lekcji do­sta­je akapit z iden­ty­fi­ka­to­rem i skrypt tuż przed </body>, który ten akapit wy­peł­nia.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Sklep komputerowy</title>
</head>
<body>
<h1>Nasze produkty</h1>
<p id="podsumowanie">Brak danych</p>
<script>
let cena = 79;
let ilosc = 4;
document.getElementById("podsumowanie").innerHTML = "Do zapłaty: " + cena * ilosc + " zł";
</script>
</body>
</html>
Wynik: strona po­ka­zu­je na­głó­wek Nasze produkty i akapit Do zapłaty: 316 zł. Ten sam kod prze­nie­sio­ny do pliku skrypt.js traci znacz­nik <script> i nic poza tym, a strona do­łą­cza go wier­szem <script src="skrypt.js"></script> w tym samym miej­scu, przed </body>. Zmien­ne i ope­ra­to­ry użyte w środku opi­su­je lekcja o zmien­nych, typach i ope­ra­to­rach.

Na eg­za­mi­nie

Py­ta­nia pi­sem­ne z tej lekcji mają kilka sta­łych kształ­tów. Py­ta­nie o język skryp­tu wy­ko­ny­wa­ne­go po stro­nie klien­ta w prze­glą­dar­ce ma od­po­wiedź JavaScript, a PHP, Python i Perl są w nim od­po­wie­dzia­mi błęd­ny­mi. Py­ta­nie o opro­gra­mo­wa­nie wy­ma­ga­ne do uru­cho­mie­nia skryp­tu wska­zu­je samą prze­glą­dar­kę, nie serwer WWW i nie serwer MySQL. Wy­ko­na­nie kodu JavaScript wymaga in­ter­pre­to­wa­nia, a nie kom­pi­lo­wa­nia ani za­mia­ny na kod ma­szy­no­wy, a te­stu­je się go kon­so­lą w prze­glą­dar­ce. Do­łą­cze­nie ze­wnętrz­ne­go pliku to <script src="skrypt.js"></script>, ko­men­tarz jed­no­wier­szo­wy za­czy­na się od //, a wstaw­ki kodu mogą stać za­rów­no w head, jak i w body, zawsze w znacz­ni­ku <script>.
Kilka od­po­wie­dzi myli re­gu­lar­nie. Nazwa MessageBox nie należy do JavaScriptu, choć stoi w py­ta­niu obok praw­dzi­wych window.alert, document.write i innerHTML. Okno z polem do wpi­sa­nia danych i przy­ci­ska­mi OK oraz Anuluj daje prompt, a nie alert, bo alert ma tylko przy­cisk OK. Frag­men­ty tekstu skleja się zna­kiem plus, więc po­praw­ny jest zapis document.write("Kwalifikacja: " + A), a wersje z kropką, śred­ni­kiem albo z samą spacją w tym miej­scu nie. Za­war­tość ele­men­tu pod­mie­nia innerHTML, nie innerBody ani Body. Java z listy ję­zy­ków ser­we­ro­wych to inny język niż JavaScript.
W za­da­niu prak­tycz­nym po­le­ce­nie brzmi zwykle „przy­cisk uru­cha­mia­ją­cy skrypt" albo „ko­mór­ki tabeli wy­peł­nia­ne przez skrypt". Skrypt za­pi­su­je się w stro­nie albo w osob­nym pliku .js do­łą­czo­nym przed </body>, a jego wynik trafia do wska­za­ne­go ele­men­tu przez innerHTML. Oce­nia­ne są dwa re­zul­ta­ty naraz, za­war­tość wi­try­ny i jej dzia­ła­nie, więc skrypt z błędem skład­ni kosz­tu­je punkty w obu.

Ściąga

Zapis
Znaczy
<script> ... </script>
kod JavaScript wpi­sa­ny wprost w do­ku­ment HTML
<script src="skrypt.js"></script>
do­łą­cze­nie ze­wnętrz­ne­go pliku, z czę­ścią za­my­ka­ją­cą
miej­sce przed </body>
strona jest już zbu­do­wa­na, skrypt znaj­dzie jej ele­men­ty
//
ko­men­tarz do końca wier­sza
/* ... */
ko­men­tarz wie­lo­wier­szo­wy
;
koniec in­struk­cji
{ }
blok in­struk­cji na­le­żą­cy do wa­run­ku albo pętli
console.log(x);
wy­pi­sa­nie war­to­ści w kon­so­li prze­glą­dar­ki
alert("tekst");
okno z ko­mu­ni­ka­tem i przy­ci­skiem OK
prompt("pytanie");
okno z polem do wpi­sa­nia danych, zwraca wpi­sa­ny tekst
confirm("pytanie");
okno z OK i Anuluj, zwraca prawdę albo fałsz
document.getElementById("id")
po­bra­nie ele­men­tu o po­da­nym iden­ty­fi­ka­to­rze
.innerHTML = "tekst";
pod­mia­na za­war­to­ści po­bra­ne­go ele­men­tu
document.write("tekst");
do­pi­sa­nie tekstu do do­ku­men­tu w trak­cie bu­do­wa­nia
"Do zapłaty: " + x
skle­je­nie tekstu z war­to­ścią zmien­nej
Pobierz ściągę PDF

[ W TYM DZIALE ]

poprzednia: JavaScript na egzaminie INF.03następna: JavaScript: zmienne, typy i operatoryspis działu: JavaScript

[ INF.03: INNE ARTYKUŁY ]

Hub INF.03Zakres materiałuBazy danych i SQL na egzaminie INF.03CSS na egzaminie INF.03Formularze HTML na egzaminie INF.03Grafika i multimedia na egzaminie INF.03HTML na egzaminie INF.03pokaż więcej (47)
ZAWODNIK
egzamin zawodowy INF.02 · INF.03 · INF.04
Serwer Discord›
Egzaminy zawodowe IT/Matury/Studia
@yastor
Polityka prywatnościRegulamin
© 2026 Zawodnik · by Yastor
Arkusze i zasady oceniania pochodzą z CKE. Serwis nie jest powiązany z Centralną Komisją Egzaminacyjną.