Po zako\u0144czeniu lekcji ucze\u0144:<\/p>\n
if<\/code>, else<\/code>.<\/li>\n- Rozr\u00f3\u017cnia i stosuje obs\u0142ug\u0119 zdarze\u0144 onclick i addEventListener.<\/li>\n
- Potrafi dynamicznie tworzy\u0107 ci\u0105gi znak\u00f3w (np. nazw\u0119 pliku graficznego).<\/li>\n<\/ul>\n
\nWst\u0119p teoretyczny<\/h2>\n1. Model DOM (Document Object Model)<\/h3>\n
DOM to struktura drzewa, kt\u00f3ra reprezentuje elementy HTML jako obiekty JavaScript. Mo\u017cemy je pobiera\u0107, modyfikowa\u0107, ukrywa\u0107, zmienia\u0107 style i reagowa\u0107 na interakcje u\u017cytkownika.<\/p>\n
2. Pobieranie danych z formularzy<\/h3>\n
\u015awietnie! Rozwi\u0144my zagadnienie pobierania danych z formularzy<\/strong> w JavaScript o dodatkowe przypadki i dok\u0142adniejsze wyja\u015bnienia. To bardzo wa\u017cny temat nie tylko na egzaminie zawodowym INF.03, ale te\u017c w codziennej pracy z interfejsami u\u017cytkownika w aplikacjach webowych.<\/p>\n
\n2.1. Pola tekstowe (input type=”text”, „email”, „number”, itd.)<\/strong><\/h3>\nPola tekstowe s\u0105 najcz\u0119\u015bciej u\u017cywanymi polami w formularzach. Dane z takich p\u00f3l pobieramy za pomoc\u0105 w\u0142a\u015bciwo\u015bci .value<\/code>.<\/p>\n<input type="text" id="imie" placeholder="Podaj imi\u0119" \/>\n<input type="email" id="email" placeholder="Podaj e-mail" \/>\n<input type="number" id="wiek" placeholder="Podaj wiek" \/><\/code><\/pre>\nlet imie = document.getElementById("imie").value;\nlet email = document.getElementById("email").value;\nlet wiek = parseInt(document.getElementById("wiek").value);<\/code><\/pre>\n\n\ud83d\udccc Uwaga:<\/strong> Domy\u015blnie value<\/code> zawsze zwraca warto\u015b\u0107 jako tekst (string<\/code>). Je\u015bli potrzebujesz liczby, u\u017cyj parseInt()<\/code> lub parseFloat()<\/code>.<\/p>\n<\/blockquote>\n
\n2.2. Checkbox \u2013 pole wyboru (input type=”checkbox”)<\/strong><\/h3>\nCheckbox zwraca true<\/code> (je\u015bli zaznaczony) lub false<\/code> (je\u015bli nie).<\/p>\n<input type="checkbox" id="zgoda" \/> Akceptuj\u0119 regulamin<\/code><\/pre>\nlet czyZaznaczone = document.getElementById("zgoda").checked;<\/code><\/pre>\n
\n2.3. Radio \u2013 wyb\u00f3r jednej opcji z wielu (input type=”radio”)<\/strong><\/h3>\nRadia dzia\u0142aj\u0105 w grupach (ta sama name<\/code>) i tylko jeden mo\u017ce by\u0107 zaznaczony. Isniej\u0105 proste dwie metody na sprawdzenie warto\u015bci radio:<\/p>\n<form id="formularz">\n <input type="radio" name="plec" value="kobieta" \/> Kobieta\n <input type="radio" name="plec" value="mezczyzna" \/>\n M\u0119\u017cczyzna\n <button type="button" onclick="pobierzPlec()">Sprawd\u017a p\u0142e\u0107<\/button>\n <\/form>\n <script>\n function pobierzPlec() {\n let plec = document.forms["formularz"].elements["plec"].value;\n console.log("Wybrana p\u0142e\u0107:", plec);\n }\n\n <\/script><\/code><\/pre>\n<form id="formularz">\n <input id="kobieta" type="radio" name="plec" value="kobieta" \/> Kobieta\n <input id="mezczyzna" type="radio" name="plec" value="mezczyzna" \/>\n M\u0119\u017cczyzna\n <button type="button" onclick="pobierzPlec()">Sprawd\u017a p\u0142e\u0107<\/button>\n <\/form>\n <script>\n function pobierzPlec2() {\n if (document.getElementById("kobieta").checked) {\n console.log("Wybrano: kobieta");\n } else if (document.getElementById("mezczyzna").checked) {\n console.log("Wybrano: m\u0119\u017cczyzna");\n } else {\n console.log("Nie wybrano nic");\n }\n }\n <\/script><\/code><\/pre>\n
\n2.4. Select \u2013 lista rozwijana (select)<\/strong><\/h3>\n<select id="miasto">\n <option value="warszawa">Warszawa<\/option>\n <option value="krakow">Kraków<\/option>\n<\/select><\/code><\/pre>\nlet wybraneMiasto = document.getElementById("miasto").value; \/\/ "warszawa"<\/code><\/pre>\nJe\u015bli chcesz uzyska\u0107 te\u017c tekst wybranej opcji:<\/p>\n
let select = document.getElementById("miasto");\nlet tekstOpcji = select.options[select.selectedIndex].text; \/\/ "Warszawa"<\/code><\/pre>\n
\n2.5. Textarea \u2013 wi\u0119ksze pole tekstowe<\/strong><\/h3>\n<textarea id="opis" rows="4" cols="30">Wpisz opis...<\/textarea><\/code><\/pre>\nlet opis = document.getElementById("opis").value;<\/code><\/pre>\n
\n2.6. Przyk\u0142ad \u2013 Pobieranie wszystkich danych z formularza<\/strong><\/h3>\n<form id="formularz">\n <input type="text" id="imie" placeholder="Imi\u0119" \/>\n <input type="number" id="wiek" placeholder="Wiek" \/>\n <input type="checkbox" id="newsletter" \/> Zapisz mnie do newslettera<br \/>\n <input type="radio" name="plec" value="kobieta" \/> Kobieta\n <input type="radio" name="plec" value="mezczyzna" \/> M\u0119\u017cczyzna<br \/>\n <select id="miasto">\n <option value="wroclaw">Wroc\u0142aw<\/option>\n <option value="gdansk">Gda\u0144sk<\/option>\n <\/select>\n<br \/>\n <textarea id="komentarz">Twój komentarz<\/textarea>\n<br \/>\n <button type="button" onclick="pobierzDane()">Wy\u015blij<\/button>\n<\/form><\/code><\/pre>\nfunction pobierzDane() {\n let imie = document.getElementById("imie").value;\n let wiek = document.getElementById("wiek").value;\n let newsletter = document.getElementById("newsletter").checked;\n let plec = document.forms["formularz"].elements["plec"].value;\n let miasto = document.getElementById("miasto").value;\n let komentarz = document.getElementById("komentarz").value;\n\n console.log("Imi\u0119:", imie);\n console.log("Wiek:", wiek);\n console.log("Newsletter:", newsletter);\n console.log("P\u0142e\u0107:", plec);\n console.log("Miasto:", miasto);\n console.log("Komentarz:", komentarz);\n}<\/code><\/pre>\n3. Zapisywanie danych do element\u00f3w HTML (rozszerzenie)<\/h2>\n3.1. Zmiana tre\u015bci tekstowej \u2014 innerHTML<\/code> i innerText<\/code><\/strong><\/h3>\nAby zmieni\u0107 tekst w elemencie HTML (np. paragrafie, nag\u0142\u00f3wku, divie), u\u017cywamy w\u0142a\u015bciwo\u015bci:<\/p>\n
\ninnerHTML<\/code> \u2013 umo\u017cliwia wstawianie r\u00f3wnie\u017c kodu HTML<\/li>\ninnerText<\/code> \u2013 wstawia tylko tekst (ignoruje HTML)<\/li>\n<\/ul>\nPrzyk\u0142ad 1 \u2013 paragraf z komunikatem:<\/h4>\n<p id="komunikat">Tutaj pojawi si\u0119 tekst...<\/p><\/code><\/pre>\ndocument.getElementById("komunikat").innerHTML = "Witaj, uczniu!";<\/code><\/pre>\nMo\u017cemy te\u017c dynamicznie doda\u0107 pogrubienie lub inny znacznik HTML:<\/p>\n
document.getElementById("komunikat").innerHTML = "<strong>To wa\u017cna wiadomo\u015b\u0107!<\/strong>";<\/code><\/pre>\nKiedy u\u017cywa\u0107 innerText<\/code>?<\/h4>\nJe\u015bli chcesz unikn\u0105\u0107 interpretowania HTML (np. u\u017cytkownik wpisuje dane), u\u017cywaj innerText<\/code>.<\/p>\n
\n3.2. Zmiana obrazk\u00f3w \u2014 src<\/code><\/strong><\/h3>\nDo zmiany obrazka s\u0142u\u017cy w\u0142a\u015bciwo\u015b\u0107 .src<\/code>. Mo\u017cesz do niej przypisa\u0107 dowoln\u0105 \u015bcie\u017ck\u0119 (np. URL lub nazw\u0119 pliku lokalnego).<\/p>\nPrzyk\u0142ad 2 \u2013 zmiana zdj\u0119cia:<\/h4>\n<img id="zdjecie" src="zdj1_duze.jpg" \/><\/code><\/pre>\nlet numer = 2;\ndocument.getElementById("zdjecie").src = `zdj${numer}_duze.jpg`;<\/code><\/pre>\nTutaj wykorzystujemy tzw. template string<\/strong> (backticki `<\/code>), \u017ceby w prosty spos\u00f3b wstawi\u0107 zmienn\u0105 do ci\u0105gu tekstowego. Taka sk\u0142adnia jest bardzo przydatna:<\/p>\nlet imie = "Kasia";\ndocument.getElementById("komunikat").innerHTML = `Witaj, ${imie}!`;<\/code><\/pre>\n
\n3.3. Zmiana atrybut\u00f3w \u2014 setAttribute()<\/code><\/strong><\/h3>\nCzasami potrzebujesz zmieni\u0107 inne atrybuty, np. alt<\/code>, title<\/code>, href<\/code>, class<\/code>.<\/p>\ndocument.getElementById("zdjecie").setAttribute("alt", "Nowy opis obrazka");\ndocument.getElementById("link").setAttribute("href", "https:\/\/nowy-adres.pl");<\/code><\/pre>\n
\n3.4. Zmiana klas i styl\u00f3w \u2014 className<\/code>, style<\/code><\/strong><\/h3>\nZmiana klasy CSS:<\/p>\n
document.getElementById("komunikat").className = "blad";<\/code><\/pre>\nZmiana stylu bezpo\u015brednio:<\/p>\n
document.getElementById("komunikat").style.color = "red";\ndocument.getElementById("komunikat").style.fontWeight = "bold";<\/code><\/pre>\n
\n3.5. Przyk\u0142ad praktyczny (do \u0107wiczenia)<\/strong><\/h3>\n<input type="number" id="nr" min="1" max="5">\n<button onclick="zmienZdjecie()">Zmie\u0144 zdj\u0119cie<\/button>\n\n<img id="galeria" src="zdj1_duze.jpg" \/><\/code><\/pre>\nfunction zmienZdjecie() {\n let numer = document.getElementById("nr").value;\n document.getElementById("galeria").src = `zdj${numer}_duze.jpg`;\n}<\/code><\/pre>\n
\n4. Instrukcje warunkowe<\/h3>\n
W JavaScript warunki sprawdzamy np. tak:<\/p>\n
if (warunek) {\n \/\/ kod je\u015bli prawda\n} else {\n \/\/ kod je\u015bli fa\u0142sz\n}<\/code><\/pre>\nPrzyk\u0142ad:<\/p>\n
if (zaznaczone) {\n alert("Dzi\u0119kujemy za zgod\u0119!");\n} else {\n alert("Musisz zaznaczy\u0107 zgod\u0119.");\n}<\/code><\/pre>\n5. Obs\u0142uga zdarze\u0144 \u2013 onclick i addEventListener + funkcje<\/h3>\n\n- onclick w HTML:<\/strong><\/li>\n<\/ul>\n
<button onclick="wyswietl()">Kliknij<\/button><\/code><\/pre>\n\n- onclick w JS:<\/strong><\/li>\n<\/ul>\n
document.getElementById("przycisk").onclick = wyswietl;<\/code><\/pre>\n\n- addEventListener (zalecane w nowoczesnym kodzie):<\/strong><\/li>\n<\/ul>\n
document.getElementById("przycisk").addEventListener("click", wyswietl);<\/code><\/pre>\n
\nPrzyk\u0142ad praktyczny: Formularz kontaktowy z walidacj\u0105<\/h2>\nHTML:<\/h3>\n<input type="text" id="imie" placeholder="Imi\u0119" \/>\n<input type="text" id="nazwisko" placeholder="Nazwisko" \/>\n<textarea id="zgloszenie" placeholder="Wpisz swoj\u0105 spraw\u0119"><\/textarea>\n<input type="checkbox" id="regulamin" \/>\n<label for="regulamin">Zapozna\u0142em si\u0119 z regulaminem<\/label>\n<button id="przeslij">Prze\u015blij<\/button>\n\n<br \/>\n<p id="komunikat"><\/p><\/code><\/pre>\nJavaScript:<\/h3>\ndocument.getElementById("przeslij").addEventListener("click", function () {\n let imie = document.getElementById("imie").value.toUpperCase();\n let nazwisko = document.getElementById("nazwisko").value.toUpperCase();\n let zgloszenie = document.getElementById("zgloszenie").value;\n let zaakceptowano = document.getElementById("regulamin").checked;\n let paragraf = document.getElementById("komunikat");\n\n if (!zaakceptowano) {\n paragraf.innerHTML = "Musisz zapozna\u0107 si\u0119 z regulaminem.";\n paragraf.style.color = "red";\n } else {\n paragraf.innerHTML = `${imie} ${nazwisko}<br\/>Tre\u015b\u0107 Twojej sprawy: ${zgloszenie}`;\n paragraf.style.color = "navy";\n }\n});<\/code><\/pre>\n
\nZadanie z egzaminu INF.03 \u2013 Galeria zdj\u0119\u0107<\/h2>\n
U\u017cytkownik mo\u017ce:<\/p>\n
\n- Klikn\u0105\u0107 w miniaturk\u0119 zdj\u0119cia \u2192 du\u017ce zdj\u0119cie si\u0119 zmienia<\/li>\n
- Klikn\u0105\u0107 \u201eNext\u201d \u2192 zdj\u0119cie nast\u0119pne<\/li>\n
- Klikn\u0105\u0107 \u201ePrev\u201d \u2192 zdj\u0119cie poprzednie<\/li>\n
- Obraz\u00f3w jest 5, zmieniaj\u0105 si\u0119 cyklicznie (1\u21925, 5\u21921)<\/li>\n<\/ul>\n
JavaScript:<\/h3>\n<img\n id="aktywneZdjecie"\n src="zdjecie1.jpg"\n alt="Aktywne zdj\u0119cie"\n width="400"\n \/>\n\n <div id="miniatury">\n <img\n src="zdjecie1.jpg"\n class="miniatura"\n data-nr="1"\n width="80"\n onclick="wyswietlZdjecie(1)"\n \/>\n <img\n src="zdjecie2.jpg"\n class="miniatura"\n data-nr="2"\n width="80"\n onclick="wyswietlZdjecie(2)"\n \/>\n <img\n src="zdjecie3.jpg"\n class="miniatura"\n data-nr="3"\n width="80"\n onclick="wyswietlZdjecie(3)"\n \/>\n <img\n src="zdjecie4.jpg"\n class="miniatura"\n data-nr="4"\n width="80"\n onclick="wyswietlZdjecie(4)"\n \/>\n <img\n src="zdjecie5.jpg"\n class="miniatura"\n data-nr="5"\n width="80"\n onclick="wyswietlZdjecie(5)"\n \/>\n <\/div>\n\n <button id="poprzednie" onclick="poprzednieZdjecie()">prev<\/button>\n <button id="nastepne" onclick="nastepneZdjecie()">next<\/button>\n <script>\n let numerAktywnegoZdjecia = 1;\n\n function wyswietlZdjecie(numer) {\n document.getElementById("aktywneZdjecie").src =\n "zdjecie" + numer + ".jpg";\n numerAktywnegoZdjecia = numer;\n }\n\n function poprzednieZdjecie() {\n let nowyNumer = numerAktywnegoZdjecia - 1;\n if (nowyNumer < 1) {\n nowyNumer = 5;\n }\n wyswietlZdjecie(nowyNumer);\n }\n\n function nastepneZdjecie() {\n let nowyNumer = numerAktywnegoZdjecia + 1;\n if (nowyNumer > 5) {\n nowyNumer = 1;\n }\n wyswietlZdjecie(nowyNumer);\n }\n <\/script><\/code><\/pre>\n
\nPrzydatne funkcje i obiekty<\/h2>\n\n- liczbaDziesietna == „” – jego zadaniem jest sprawdzenie, czy zmienne maj\u0105 t\u0105 sam\u0105 wartosc<\/li>\n
- liczbaDziesietna === „” – jego zadaniem jest sprawdzenie, czy zmienne maj\u0105 ten sam typ i wartosc<\/li>\n
- isNaN(a) – funkcja prawdzaj\u0105ca czy zmienna jest liczb\u0105<\/li>\n
- Number(a) – zamienienie zmiennej na liczb\u0119<\/li>\n
- Math.abs(a)) – warto\u015b\u0107 bezwzgl\u0119dna z a<\/li>\n
- Math.floor(a) – zaokr\u0105glenie liczby w d\u00f3\u0142<\/li>\n<\/ul>\n
Skrypty do opracowania:<\/h3>\n– JS1 – przeliczanie<\/a><\/h6>\n- petla z algorytmem przeliczaj\u0105cym\n```js\nwhile (liczba > 0) {\n binarny = (liczba % 2) + binarny;\n licznik++;\n\n if (licznik % 4 === 0 && liczba >= 2) {\n binarny = " " + binarny;\n }\n\n liczba = Math.floor(liczba \/ 2);\n }\n```<\/code><\/pre>\n– JS2 – klasyk<\/a><\/h6>\n– JS3 – klasyk<\/a><\/h6>\n– JS4 – klasyk<\/a><\/h6>\n– JS5 – filtry<\/a><\/h6>\n– JS6 – czat trudne<\/a><\/h6>\n– JS7 – znikajace fromularze<\/a><\/h6>\n– JS8 – rejestracja<\/a><\/h6>\n– JS9 – prostrza galeria<\/a><\/h6>\n– [JS]()<\/h6>\n– [JS]()<\/h6>\n– [JS]()<\/h6>\n– [JS]()<\/h6>","protected":false},"excerpt":{"rendered":"
Lekcja JavaScript: Praca z formularzami, zdarzeniami i manipulacja DOM Cele lekcji Po zako\u0144czeniu lekcji ucze\u0144: Rozumie jak pobiera\u0107 warto\u015bci z p\u00f3l formularza (np. input type=”text” i checkbox). Umie przypisywa\u0107 dane do p\u00f3l tekstowych (innerHTML) i atrybut\u00f3w obraz\u00f3w (src). Stosuje instrukcje warunkowe if, else. Rozr\u00f3\u017cnia i stosuje obs\u0142ug\u0119 zdarze\u0144 onclick i addEventListener. Potrafi dynamicznie tworzy\u0107 ci\u0105gi […]<\/p>","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[30],"tags":[31],"class_list":["post-135","post","type-post","status-publish","format-standard","hentry","category-ez-inf03","tag-ez-inf03"],"yoast_head":"\n
Tworzenie skrypt\u00f3w w JS - Tomasz Sadowski<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/zajecia.tsadowski.pl\/index.php\/2025\/05\/21\/tworzenie-skryptow-w-js\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tworzenie skrypt\u00f3w w JS - Tomasz Sadowski\" \/>\n<meta property=\"og:description\" content=\"Lekcja JavaScript: Praca z formularzami, zdarzeniami i manipulacja DOM Cele lekcji Po zako\u0144czeniu lekcji ucze\u0144: Rozumie jak pobiera\u0107 warto\u015bci z p\u00f3l formularza (np. input type=”text” i checkbox). Umie przypisywa\u0107 dane do p\u00f3l tekstowych (innerHTML) i atrybut\u00f3w obraz\u00f3w (src). Stosuje instrukcje warunkowe if, else. Rozr\u00f3\u017cnia i stosuje obs\u0142ug\u0119 zdarze\u0144 onclick i addEventListener. Potrafi dynamicznie tworzy\u0107 ci\u0105gi […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/zajecia.tsadowski.pl\/index.php\/2025\/05\/21\/tworzenie-skryptow-w-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Tomasz Sadowski\" \/>\n<meta property=\"article:published_time\" content=\"2025-05-21T01:05:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-06T15:06:48+00:00\" \/>\n<meta name=\"author\" content=\"tomek\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Napisane przez\" \/>\n\t<meta name=\"twitter:data1\" content=\"tomek\" \/>\n\t<meta name=\"twitter:label2\" content=\"Szacowany czas czytania\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minut\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/zajecia.tsadowski.pl\\\/index.php\\\/2025\\\/05\\\/21\\\/tworzenie-skryptow-w-js\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/zajecia.tsadowski.pl\\\/index.php\\\/2025\\\/05\\\/21\\\/tworzenie-skryptow-w-js\\\/\"},\"author\":{\"name\":\"tomek\",\"@id\":\"https:\\\/\\\/zajecia.tsadowski.pl\\\/#\\\/schema\\\/person\\\/36b24d512631c581c15631842e605c6c\"},\"headline\":\"Tworzenie skrypt\u00f3w w JS\",\"datePublished\":\"2025-05-21T01:05:50+00:00\",\"dateModified\":\"2025-11-06T15:06:48+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/zajecia.tsadowski.pl\\\/index.php\\\/2025\\\/05\\\/21\\\/tworzenie-skryptow-w-js\\\/\"},\"wordCount\":1151,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/zajecia.tsadowski.pl\\\/#\\\/schema\\\/person\\\/36b24d512631c581c15631842e605c6c\"},\"keywords\":[\"EZ INF03\"],\"articleSection\":[\"EZ INF03\"],\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/zajecia.tsadowski.pl\\\/index.php\\\/2025\\\/05\\\/21\\\/tworzenie-skryptow-w-js\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/zajecia.tsadowski.pl\\\/index.php\\\/2025\\\/05\\\/21\\\/tworzenie-skryptow-w-js\\\/\",\"url\":\"https:\\\/\\\/zajecia.tsadowski.pl\\\/index.php\\\/2025\\\/05\\\/21\\\/tworzenie-skryptow-w-js\\\/\",\"name\":\"Tworzenie skrypt\u00f3w w JS - Tomasz Sadowski\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/zajecia.tsadowski.pl\\\/#website\"},\"datePublished\":\"2025-05-21T01:05:50+00:00\",\"dateModified\":\"2025-11-06T15:06:48+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/zajecia.tsadowski.pl\\\/index.php\\\/2025\\\/05\\\/21\\\/tworzenie-skryptow-w-js\\\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/zajecia.tsadowski.pl\\\/index.php\\\/2025\\\/05\\\/21\\\/tworzenie-skryptow-w-js\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/zajecia.tsadowski.pl\\\/index.php\\\/2025\\\/05\\\/21\\\/tworzenie-skryptow-w-js\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Strona g\u0142\u00f3wna\",\"item\":\"https:\\\/\\\/zajecia.tsadowski.pl\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tworzenie skrypt\u00f3w w JS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/zajecia.tsadowski.pl\\\/#website\",\"url\":\"https:\\\/\\\/zajecia.tsadowski.pl\\\/\",\"name\":\"Tomasz Sadowski Zaj\u0119cia\",\"description\":\"Zbiór zaj\u0119\u0107 prowadzonych przez Tomasza Sadowskiego\",\"publisher\":{\"@id\":\"https:\\\/\\\/zajecia.tsadowski.pl\\\/#\\\/schema\\\/person\\\/36b24d512631c581c15631842e605c6c\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/zajecia.tsadowski.pl\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pl-PL\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/zajecia.tsadowski.pl\\\/#\\\/schema\\\/person\\\/36b24d512631c581c15631842e605c6c\",\"name\":\"tomek\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b8e0f37f81c0ae3da08d93ced4d5638d67055786edc11d3357adce41e3a18825?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b8e0f37f81c0ae3da08d93ced4d5638d67055786edc11d3357adce41e3a18825?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b8e0f37f81c0ae3da08d93ced4d5638d67055786edc11d3357adce41e3a18825?s=96&d=mm&r=g\",\"caption\":\"tomek\"},\"logo\":{\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b8e0f37f81c0ae3da08d93ced4d5638d67055786edc11d3357adce41e3a18825?s=96&d=mm&r=g\"},\"sameAs\":[\"https:\\\/\\\/zajecia.tsadowski.pl\"],\"url\":\"https:\\\/\\\/zajecia.tsadowski.pl\\\/index.php\\\/author\\\/admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tworzenie skrypt\u00f3w w JS - Tomasz Sadowski","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/zajecia.tsadowski.pl\/index.php\/2025\/05\/21\/tworzenie-skryptow-w-js\/","og_locale":"pl_PL","og_type":"article","og_title":"Tworzenie skrypt\u00f3w w JS - Tomasz Sadowski","og_description":"Lekcja JavaScript: Praca z formularzami, zdarzeniami i manipulacja DOM Cele lekcji Po zako\u0144czeniu lekcji ucze\u0144: Rozumie jak pobiera\u0107 warto\u015bci z p\u00f3l formularza (np. input type=”text” i checkbox). Umie przypisywa\u0107 dane do p\u00f3l tekstowych (innerHTML) i atrybut\u00f3w obraz\u00f3w (src). Stosuje instrukcje warunkowe if, else. Rozr\u00f3\u017cnia i stosuje obs\u0142ug\u0119 zdarze\u0144 onclick i addEventListener. Potrafi dynamicznie tworzy\u0107 ci\u0105gi […]","og_url":"https:\/\/zajecia.tsadowski.pl\/index.php\/2025\/05\/21\/tworzenie-skryptow-w-js\/","og_site_name":"Tomasz Sadowski","article_published_time":"2025-05-21T01:05:50+00:00","article_modified_time":"2025-11-06T15:06:48+00:00","author":"tomek","twitter_card":"summary_large_image","twitter_misc":{"Napisane przez":"tomek","Szacowany czas czytania":"8 minut"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/zajecia.tsadowski.pl\/index.php\/2025\/05\/21\/tworzenie-skryptow-w-js\/#article","isPartOf":{"@id":"https:\/\/zajecia.tsadowski.pl\/index.php\/2025\/05\/21\/tworzenie-skryptow-w-js\/"},"author":{"name":"tomek","@id":"https:\/\/zajecia.tsadowski.pl\/#\/schema\/person\/36b24d512631c581c15631842e605c6c"},"headline":"Tworzenie skrypt\u00f3w w JS","datePublished":"2025-05-21T01:05:50+00:00","dateModified":"2025-11-06T15:06:48+00:00","mainEntityOfPage":{"@id":"https:\/\/zajecia.tsadowski.pl\/index.php\/2025\/05\/21\/tworzenie-skryptow-w-js\/"},"wordCount":1151,"commentCount":0,"publisher":{"@id":"https:\/\/zajecia.tsadowski.pl\/#\/schema\/person\/36b24d512631c581c15631842e605c6c"},"keywords":["EZ INF03"],"articleSection":["EZ INF03"],"inLanguage":"pl-PL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/zajecia.tsadowski.pl\/index.php\/2025\/05\/21\/tworzenie-skryptow-w-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/zajecia.tsadowski.pl\/index.php\/2025\/05\/21\/tworzenie-skryptow-w-js\/","url":"https:\/\/zajecia.tsadowski.pl\/index.php\/2025\/05\/21\/tworzenie-skryptow-w-js\/","name":"Tworzenie skrypt\u00f3w w JS - Tomasz Sadowski","isPartOf":{"@id":"https:\/\/zajecia.tsadowski.pl\/#website"},"datePublished":"2025-05-21T01:05:50+00:00","dateModified":"2025-11-06T15:06:48+00:00","breadcrumb":{"@id":"https:\/\/zajecia.tsadowski.pl\/index.php\/2025\/05\/21\/tworzenie-skryptow-w-js\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/zajecia.tsadowski.pl\/index.php\/2025\/05\/21\/tworzenie-skryptow-w-js\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/zajecia.tsadowski.pl\/index.php\/2025\/05\/21\/tworzenie-skryptow-w-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Strona g\u0142\u00f3wna","item":"https:\/\/zajecia.tsadowski.pl\/"},{"@type":"ListItem","position":2,"name":"Tworzenie skrypt\u00f3w w JS"}]},{"@type":"WebSite","@id":"https:\/\/zajecia.tsadowski.pl\/#website","url":"https:\/\/zajecia.tsadowski.pl\/","name":"Tomasz Sadowski Zaj\u0119cia","description":"Zbiór zaj\u0119\u0107 prowadzonych przez Tomasza Sadowskiego","publisher":{"@id":"https:\/\/zajecia.tsadowski.pl\/#\/schema\/person\/36b24d512631c581c15631842e605c6c"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/zajecia.tsadowski.pl\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pl-PL"},{"@type":["Person","Organization"],"@id":"https:\/\/zajecia.tsadowski.pl\/#\/schema\/person\/36b24d512631c581c15631842e605c6c","name":"tomek","image":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/secure.gravatar.com\/avatar\/b8e0f37f81c0ae3da08d93ced4d5638d67055786edc11d3357adce41e3a18825?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/b8e0f37f81c0ae3da08d93ced4d5638d67055786edc11d3357adce41e3a18825?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b8e0f37f81c0ae3da08d93ced4d5638d67055786edc11d3357adce41e3a18825?s=96&d=mm&r=g","caption":"tomek"},"logo":{"@id":"https:\/\/secure.gravatar.com\/avatar\/b8e0f37f81c0ae3da08d93ced4d5638d67055786edc11d3357adce41e3a18825?s=96&d=mm&r=g"},"sameAs":["https:\/\/zajecia.tsadowski.pl"],"url":"https:\/\/zajecia.tsadowski.pl\/index.php\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/zajecia.tsadowski.pl\/index.php\/wp-json\/wp\/v2\/posts\/135","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zajecia.tsadowski.pl\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zajecia.tsadowski.pl\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zajecia.tsadowski.pl\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zajecia.tsadowski.pl\/index.php\/wp-json\/wp\/v2\/comments?post=135"}],"version-history":[{"count":8,"href":"https:\/\/zajecia.tsadowski.pl\/index.php\/wp-json\/wp\/v2\/posts\/135\/revisions"}],"predecessor-version":[{"id":167,"href":"https:\/\/zajecia.tsadowski.pl\/index.php\/wp-json\/wp\/v2\/posts\/135\/revisions\/167"}],"wp:attachment":[{"href":"https:\/\/zajecia.tsadowski.pl\/index.php\/wp-json\/wp\/v2\/media?parent=135"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zajecia.tsadowski.pl\/index.php\/wp-json\/wp\/v2\/categories?post=135"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zajecia.tsadowski.pl\/index.php\/wp-json\/wp\/v2\/tags?post=135"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}