ZAWODNIK

JavaScript: biblioteki, JSON i AJAX

INF.03 · teoria
autor: redakcja · 09.09.2026
Biblioteki i frameworki JavaScriptu: po co są, jak dołączyć jQuery z sieci CDN, selektory i metody jQuery obok tego samego kodu w czystym JavaScripcie, czym różnią się React i Angular, format JSON z metodami parse i stringify oraz technika AJAX i funkcja fetch. Lekcja 11.8 kursu INF.03.

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

Przejrzyj pytania: javascriptĆwicz dział: javascript
Bi­blio­te­ka to gotowy zbiór funk­cji na­pi­sa­nych przez kogoś innego, który do­łą­cza się do strony jednym znacz­ni­kiem <script> i wy­wo­łu­je we wła­snym kodzie za­miast pisać to samo od zera. Naj­czę­ściej wra­ca­ją­cą w py­ta­niach bi­blio­te­ką JavaScriptu jest jQuery, obok niej stoją nazwy React i An­gu­lar, a dane między stroną a ser­we­rem jeżdżą w for­ma­cie JSON. W części pi­sem­nej py­ta­nia brzmią „która z wy­mie­nio­nych bi­blio­tek należy do języka JavaScript", „co robi przed­sta­wio­ny zapis ze zna­kiem dolara", „który zapis jest po­praw­nym for­ma­tem JSON" i „co ozna­cza skrót AJAX". W za­da­niu prak­tycz­nym bi­blio­te­ki i format JSON stoją wprost na liście innych zadań, a arkusz każe wtedy do­łą­czyć plik bi­blio­te­ki obok wła­sne­go skryp­tu.

Bi­blio­te­ka, fra­me­work i sieć CDN

Bi­blio­te­ka to zestaw go­to­wych funk­cji, które wy­wo­łu­je twój kod: to ty de­cy­du­jesz, kiedy i po co po nie się­gnąć. Fra­me­work (SZKIELET) od­wra­ca tę za­leż­ność, bo jest gotową kon­struk­cją apli­ka­cji, w którą wsta­wia się własne ka­wał­ki kodu, a o mo­men­cie ich wy­wo­ła­nia de­cy­du­je sam fra­me­work. Stąd naj­krót­sza róż­ni­ca: bi­blio­te­kę się woła, do fra­me­wor­ka się wpi­su­je.
Plik bi­blio­te­ki po­bie­ra się zwykle z sieci CDN (Con­tent De­li­ve­ry Ne­twork, SIEĆ DOSTARCZANIA TREŚCI), czyli z pu­blicz­ne­go ser­we­ra trzy­ma­ją­ce­go kopie po­pu­lar­nych bi­blio­tek. Drugą drogą jest po­bra­nie pliku raz i po­ło­że­nie go obok strony, i tak wła­śnie trzeba zrobić na sta­no­wi­sku eg­za­mi­na­cyj­nym, gdzie in­ter­ne­tu nie ma.
1
2
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="skrypt.js"></script>
Ko­lej­ność jest obo­wiąz­ko­wa: bi­blio­te­ka stoi PRZED skryp­tem, który z niej ko­rzy­sta, ina­czej prze­glą­dar­ka zgła­sza błąd $ is not defined. Oba znacz­ni­ki idą przed za­my­ka­ją­cym </body>. Człon min w nazwie pliku ozna­cza wersję zmi­ni­fi­ko­wa­ną, czyli po­zba­wio­ną spacji, wcięć i ko­men­ta­rzy: waży mniej i po­bie­ra się szyb­ciej, ale czło­wiek jej nie czyta.

jQuery: znak dolara i se­lek­tor CSS

jQuery to bi­blio­te­ka JavaScriptu, która skraca ope­ra­cje na drze­wie do­ku­men­tu do wy­wo­łań jednej funk­cji o nazwie $. Funk­cja przyj­mu­je se­lek­tor CSS, ten sam co w ar­ku­szu stylów z lekcji o se­lek­to­rach CSS, i oddaje ko­lek­cję wszyst­kich pa­su­ją­cych ele­men­tów.
  • ›
    $("#cena") bierze ele­ment o iden­ty­fi­ka­to­rze cena, bo krzy­żyk ozna­cza iden­ty­fi­ka­tor.
  • ›
    $(".produkt") bierze wszyst­kie ele­men­ty z klasą produkt, bo kropka ozna­cza klasę.
  • ›
    $("p") bierze wszyst­kie aka­pi­ty, bo sama nazwa ozna­cza znacz­nik.
Wobec document.getElementById z lekcji o modelu DOM róż­ni­ca siedzi w licz­bie mno­giej: jedno wy­wo­ła­nie jQuery działa na WSZYSTKICH pa­su­ją­cych ele­men­tach naraz, więc $(".produkt").hide() ukrywa cały zestaw bez pętli.
Kod się­ga­ją­cy po ele­men­ty strony musi za­cze­kać, aż prze­glą­dar­ka zbu­du­je drzewo do­ku­men­tu. Robi to $(document).ready (GOTOWY), które przyj­mu­je funk­cję do wy­ko­na­nia po zbu­do­wa­niu strony; krót­szy zapis tego samego to $(function () { ... }).
1
2
3
$(document).ready(function () {
$("#tytul").text("Promocja dnia");
});
Wynik: po wczy­ta­niu strony na­głó­wek o iden­ty­fi­ka­to­rze tytul ma treść Promocja dnia. Bez tego opa­ko­wa­nia skrypt umiesz­czo­ny w sekcji <head> nie zna­la­zł­by ele­men­tu, bo jego jesz­cze by nie było.

Metody jQuery i to samo w czy­stym JavaScripcie

Metoda jQuery to funk­cja wy­wo­ły­wa­na na wy­bra­nej ko­lek­cji, po kropce za se­lek­to­rem. Bez ar­gu­men­tu metoda CZYTA, z ar­gu­men­tem ZAPISUJE: $("#ilosc").val() oddaje wpi­sa­ną war­tość, a $("#ilosc").val("1") ją usta­wia. Ta sama zasada obo­wią­zu­je w .text() i .html().
Zapis jQuery
Co robi
To samo w czy­stym JavaScripcie
$("#a").text("Nowy")
wsta­wia tekst, znacz­ni­ki trak­tu­je jak zwykłe znaki
el.textContent = "Nowy"
$("#a").html("<b>Nowy</b>")
wsta­wia kod HTML, znacz­ni­ki za­czy­na­ją dzia­łać
el.innerHTML = "<b>Nowy</b>"
$("#a").val()
czyta war­tość pola for­mu­la­rza
el.value
$("#a").css("color", "red")
usta­wia jedną wła­ści­wość stylu
el.style.color = "red"
$("#a").hide()
ukrywa ele­ment
el.style.display = "none"
$("#a").show()
po­ka­zu­je ukryty ele­ment
el.style.display = "block"
$("#a").click(f)
pod­pi­na funk­cję f pod klik­nię­cie
el.addEventListener("click", f)
Za­da­nie z ar­ku­sza brzmi zwykle: policz war­tość za­mó­wie­nia po klik­nię­ciu przy­ci­sku i pokaż ją na stro­nie. W jQuery mieści się w trzech wier­szach.
1
2
3
4
$("#licz").click(function () {
const ilosc = Number($("#ilosc").val());
$("#suma").text(ilosc * 49).css("color", "green");
});
Wynik: klik­nię­cie przy­ci­sku o iden­ty­fi­ka­to­rze licz wpi­su­je do ele­men­tu suma ilo­czyn liczby z pola ilosc i ceny 49, zie­lo­ny­mi zna­ka­mi. Dwie metody w jednym wier­szu to łań­cuch: każda z nich oddaje tę samą ko­lek­cję, więc na­stęp­na ma na czym pra­co­wać.
1
2
3
4
5
6
document.getElementById("licz").addEventListener("click", function () {
const ilosc = Number(document.getElementById("ilosc").value);
const suma = document.getElementById("suma");
suma.textContent = ilosc * 49;
suma.style.color = "green";
});
Wynik jest iden­tycz­ny, a wier­szy jest dwa razy więcej. Cała oszczęd­ność jQuery bierze się stąd, że $ łączy wy­szu­ka­nie ele­men­tów z ope­ra­cją na nich, a metody wra­ca­ją do tej samej ko­lek­cji.
Pu­łap­ka: .val() i .value oddają NAPIS, więc + skleja za­miast do­da­wać: "2" + 3 daje 23. Liczbę robi z napisu Number, parseInt albo parseFloat.

React i An­gu­lar

React to bi­blio­te­ka JavaScriptu do bu­do­wa­nia in­ter­fej­su z kom­po­nen­tów, czyli sa­mo­dziel­nych ka­wał­ków strony trzy­ma­ją­cych razem swój wygląd i swoje za­cho­wa­nie, a An­gu­lar to fra­me­work, więc na­rzu­ca całą struk­tu­rę apli­ka­cji, własny sposób pi­sa­nia sza­blo­nów i własny zestaw na­rzę­dzi. Trze­cią nazwą z tej półki jest Vue. Na eg­za­mi­nie nie pisze się w nich kodu i wy­star­czy roz­po­znać nazwę: jQuery, React, An­gu­lar i Vue należą do JavaScriptu, Sym­fo­ny i La­ra­vel do PHP, Bo­ot­strap to bi­blio­te­ka go­to­wych stylów CSS, a Node.js to śro­do­wi­sko uru­cha­mia­ją­ce JavaScript poza prze­glą­dar­ką, po stro­nie ser­we­ra.

JSON: format wy­mia­ny danych

JSON (JavaScript Object No­ta­tion, NOTACJA OBIEKTOWA JAVASCRIPTU) to tek­sto­wy format zapisu danych, w którym jeden pro­gram prze­ka­zu­je dane dru­gie­mu: strona ser­we­ro­wi, serwer stro­nie, jeden plik dru­gie­mu. Zapis wzięto ze skład­ni obiek­tu JavaScriptu, ale sam JSON jest zwy­kłym tek­stem, a nie kodem do wy­ko­na­nia.
Obiekt stoi w na­wia­sach klam­ro­wych i składa się z par klucz i war­tość roz­dzie­lo­nych dwu­krop­kiem, ta­bli­ca stoi w na­wia­sach kwa­dra­to­wych i trzyma listę war­to­ści. Ko­lej­ne ele­men­ty roz­dzie­la prze­ci­nek, po ostat­nim prze­cin­ka nie ma. War­to­ścią bywa napis, liczba, war­tość lo­gicz­na true albo false, pusta war­tość null, ta­bli­ca i ko­lej­ny obiekt. Funk­cji, dat i ko­men­ta­rzy w JSON nie ma.
1
2
3
4
5
6
{
"nazwa": "Monitor 24",
"cena": 749.99,
"dostepny": true,
"tagi": ["monitor", "promocja"]
}
Od obiek­tu JavaScriptu z lekcji o ta­bli­cach i obiek­tach różni się trzema szcze­gó­ła­mi, na któ­rych stoją py­ta­nia. Klucz w JSON zawsze siedzi w cu­dzy­sło­wie po­dwój­nym, w obiek­cie JavaScriptu cu­dzy­słów jest nie­po­trzeb­ny. Napis wolno w JSON objąć wy­łącz­nie cu­dzy­sło­wem po­dwój­nym, apo­strof to błąd. War­to­ścią nie może być funk­cja, więc obiekt z metodą do JSON nie przej­dzie.
Dwie funk­cje prze­kła­da­ją jedno na drugie: JSON.parse (ROZBIERZ) za­mie­nia napis w for­ma­cie JSON na obiekt JavaScriptu, a JSON.stringify (ZAMIEŃ NA NAPIS) robi z obiek­tu napis gotowy do wy­sła­nia. Ten blok wykona w prze­glą­dar­ce in­ter­pre­ter JavaScript.
1
2
3
4
const tekst = '{"nazwa": "Mysz", "cena": 59}';
const produkt = JSON.parse(tekst);
console.log(produkt.nazwa + " kosztuje " + produkt.cena);
console.log(JSON.stringify(produkt));
Wynik:
1
2
Mysz kosztuje 59
{"nazwa":"Mysz","cena":59}
Po ro­ze­bra­niu napisu do war­to­ści sięga się kropką, tak jak w każdym obiek­cie, czyli produkt.nazwa. Za­mia­na w drugą stronę usuwa od­stę­py, więc napis wy­cho­dzi krót­szy od tego, który wszedł.

AJAX: frag­ment strony bez prze­ła­do­wa­nia

AJAX (Asyn­chro­no­us JavaScript and XML, ASYNCHRONICZNY JAVASCRIPT I XML) to tech­ni­ka po­bie­ra­nia danych z ser­we­ra w tle, bez prze­ła­do­wa­nia całej strony. Skrypt wysyła żą­da­nie, od­bie­ra od­po­wiedź i pod­mie­nia tylko ten frag­ment do­ku­men­tu, który się zmie­nił: pod­po­wie­dzi w wy­szu­ki­war­ce, licz­nik ko­szy­ka, ko­lej­ną porcję ko­men­ta­rzy pod ar­ty­ku­łem. Mimo litery X w skró­cie dane jadą dziś prawie zawsze w for­ma­cie JSON, nie w XML.
fetch (POBIERZ) to wbu­do­wa­na funk­cja prze­glą­dar­ki, która wysyła takie żą­da­nie pod podany adres.
1
2
3
4
5
6
7
fetch("produkty.json")
.then(function (odpowiedz) {
return odpowiedz.json();
})
.then(function (dane) {
document.getElementById("nazwa").textContent = dane.nazwa;
});
Wynik: ele­ment o iden­ty­fi­ka­to­rze nazwa do­sta­je war­tość klucza nazwa z pliku produkty.json. Od­po­wiedź przy­cho­dzi PÓŹNIEJ niż wy­ko­nu­je się reszta skryp­tu, dla­te­go to, co ma się stać po jej otrzy­ma­niu, siedzi w funk­cji prze­ka­za­nej do .then (POTEM), a nie w ko­lej­nym wier­szu pod fetch. Star­szym za­pi­sem tej samej tech­ni­ki jest obiekt XMLHttpRequest, a w jQuery metoda $.ajax; w py­ta­niach AJAX po­ja­wia się jako nazwa tech­no­lo­gii, nie jako kod do na­pi­sa­nia.

Na eg­za­mi­nie

Py­ta­nia pi­sem­ne o bi­blio­te­ki mają trzy kształ­ty. Pierw­szy to przy­pi­sa­nie nazwy do języka: w py­ta­niu o fra­me­work opra­co­wa­ny dla języka PHP po­praw­ne jest Sym­fo­ny, a nie An­gu­lar ani Spring, bo An­gu­lar należy do JavaScriptu, a Spring do Javy. Drugi to od­czy­ta­nie zapisu z jQuery: $("#dane") wska­zu­je ele­ment o iden­ty­fi­ka­to­rze dane, $(".dane") wszyst­kie ele­men­ty klasy dane, a $("dane") wszyst­kie znacz­ni­ki o nazwie dane. Trzeci to rola tech­no­lo­gii na liście: AJAX nie jest ję­zy­kiem pro­gra­mo­wa­nia, tylko tech­ni­ką wy­mia­ny danych, więc w py­ta­niu o języki dzia­ła­ją­ce po stro­nie ser­we­ra odpada od­po­wiedź z AJAX, a w py­ta­niu o tech­no­lo­gię, która NIE prze­twa­rza danych użyt­kow­ni­ka, odpada CSS, bo for­ma­tu­je wygląd i nie ma in­struk­cji.
O format JSON pyta się przez wska­za­nie po­praw­ne­go zapisu: klucz w cu­dzy­sło­wie po­dwój­nym, brak prze­cin­ka po ostat­niej parze, brak funk­cji i ko­men­ta­rzy, true i false bez cu­dzy­sło­wu. Py­ta­nie o JSON.parse spraw­dza kie­ru­nek za­mia­ny, czyli z napisu na obiekt, a JSON.stringify za­mie­nia w drugą stronę.
W za­da­niu prak­tycz­nym bi­blio­te­ki i format JSON stoją na liście innych zadań obok wa­li­da­cji for­mu­la­rza i ob­słu­gi zda­rzeń myszy. Gdy arkusz wymaga jQuery, plik bi­blio­te­ki leży na dysku sta­no­wi­ska, a w kodzie strony idą dwa znacz­ni­ki <script> przed </body>: naj­pierw bi­blio­te­ka, potem własny plik skrypt.js. Reszta po­le­ce­nia wy­glą­da tak jak w lekcji o zda­rze­niach i for­mu­la­rzach: pobrać war­tość pola, spraw­dzić ją, wpisać wynik do wska­za­ne­go ele­men­tu albo zmie­nić mu styl. W jQuery robią to .val(), in­struk­cja if oraz .text(), .html() i .css().

Ściąga

Zapis
Znaczy
<script src="jquery.js"></script>
do­łą­cze­nie bi­blio­te­ki, przed wła­snym skryp­tem
$("#cena")
ele­ment o iden­ty­fi­ka­to­rze cena
$(".produkt")
wszyst­kie ele­men­ty z klasą produkt
$("p")
wszyst­kie znacz­ni­ki <p>
$(document).ready(f)
wy­ko­naj f, gdy drzewo do­ku­men­tu jest gotowe
$("#a").text("x")
wstaw tekst, znacz­ni­ki jako zwykłe znaki
$("#a").html("<b>x</b>")
wstaw kod HTML
$("#a").val()
od­czy­taj war­tość pola for­mu­la­rza, zawsze jako napis
$("#a").css("color", "red")
ustaw wła­ści­wość stylu
$("#a").hide()
ukryj ele­ment
$("#a").show()
pokaż ukryty ele­ment
$("#a").click(f)
wy­ko­naj f po klik­nię­ciu
{"klucz": "wartosc"}
obiekt JSON, klucz zawsze w cu­dzy­sło­wie po­dwój­nym
JSON.parse(napis)
z napisu JSON na obiekt JavaScriptu
JSON.stringify(obiekt)
z obiek­tu JavaScriptu na napis JSON
fetch("dane.json")
żą­da­nie AJAX, od­po­wiedź przy­cho­dzi póź­niej
Pobierz ściągę PDF

[ W TYM DZIALE ]

poprzednia: JavaScript: zdarzenia i walidacja formularzaspis 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ą.