TOP 10 Najtrudniejszych zadan JavaScript - Egzamin INF.03

Ranking najtrudniejszych zadan z JavaScript z egzaminow INF.03

#1 -- inf03_2024_06_08 (Trudnosc: 8/10)

Temat: Wieloetapowy formularz rejestracji z paskiem postepu

Polecenie z arkusza:

  • Funkcja aktywujaca: wywoływana przez wcisniecie dowolnego przycisku zakladki w bloku glownym. Ukrywa wszystkie zakladki. Pokazuje jedynie te zakladke (blok), ktorej przycisk wybrano.
  • Funkcja zmieniajaca wartosc paska postepu: wywoływana po utracie focusa przez dowolne pole edycyjne. Modyfikuje wlasciwosc stylu dla pustego bloku wewnatrz bloku paska postepu, w ten sposob, ze jego szerokosc jest zwiekszana o 12%. Nalezy zabezpieczyc funkcje, aby wartosc szerokosci nigdy nie byla wyzsza niz 100%.
  • Funkcja zatwierdzajaca: wywoływana po wybraniu przycisku "Zatwierdz dane". Pobiera wartosc z kazdego pola edycyjnego i pola wyboru. Wartosci wyswietlane sa w konsoli przegladarki.

Dlaczego najtrudniejsze: Zarzadzanie stanem globalnym, dynamiczne przelaczanie sekcji, addEventListener na wszystkich inputach, pasek postepu z logika procentowa. Laczy najwiecej koncepcji ze wszystkich zadan JS.

Na co zwrocic uwagę:

  • forEach po tablicy stringow do ukrywania blokow -- elegancki wzorzec
  • Zmienna globalna width przechowuje stan paska postepu
  • addEventListener('blur', ...) -- dodawanie listenerow programistycznie na WSZYSTKIE inputy
  • querySelectorAll('input').forEach(...) -- iteracja po elementach DOM
  • Ograniczenie if (width > 100) zeby pasek nie przekroczyl 100%

#2 -- inf03_2024_06_02 (Trudnosc: 7.5/10)

Temat: Symulacja czatu z losowymi odpowiedziami

Polecenie z arkusza:

  • Funkcja wywoływana po kliknieciu przycisku Wyslij: pobierany jest tekst z pola edycyjnego i umieszczany w oknie chatu jako ostatni. Tekst jest formatowany jako wypowiedz Jolanty -- utworzony jest blok z wypowiedzia zawierajacy obraz Jolka.jpg i paragraf zgodny z tekstem wpisanym do pola edycyjnego. Jesli blok chatu jest caly wypelniony, powinien byc przewiniety do nowo wstawionej wypowiedzi.
  • Funkcja wywoływana po kliknieciu przycisku "Generuj losowa odpowiedz": losowana jest wypowiedz Krzysztofa z wczesniej zadeklarowanej tablicy (9 elementow). Losowana liczba z przedzialu od 0 do 8 jest indeksem tablicy. Wypowiedz jest umieszczana w oknie chatu jako ostatnia, formatowana jako wypowiedz Krzysztofa z obrazem Krzysiek.jpg. Jesli blok chatu jest caly wypelniony, powinien byc przewiniety do nowo wstawionej wypowiedzi.

Dlaczego trudne: Dynamiczne tworzenie zlozonych elementow DOM, tablica z losowym wyborem, scrollIntoView, czyszczenie inputa.

Na co zwrocic uwagę:

  • createElement('div') + classList.add('message', 'jolanta') -- tworzenie elementow z klasami CSS
  • appendChild() -- dodawanie elementow do DOM
  • Math.floor(Math.random() * replies.length) -- losowy indeks z tablicy
  • scrollIntoView() -- automatyczne przewijanie do nowej wiadomosci
  • messageInput.value = '' -- czyszczenie pola po wyslaniu
  • Dwie funkcje o podobnej strukturze ale roznej logice

#3 -- inf03_2025_01_06 (Trudnosc: 7/10)

Temat: Konwerter liczb dziesietnych na binarne z formatowaniem

Polecenie z arkusza:

  • Wartosc, w postaci liczby dziesietnej, pobrana z pola edycyjnego, przeksztalca na system binarny
  • Wyswietla w paragrafie pod przyciskiem obliczona liczbe binarna. Liczba binarna jest rozdzielona spacja na czesci (co cztery cyfry poczawszy od prawej strony) oraz zakonczona oznaczeniem kodu w postaci tekstu "(2)", zapisanym w indeksie dolnym
  • Algorytm zamiany: K1: Czytaj liczba dziesietna (L). K2: Liczba binarna (B) przypisz pusty napis. K3: B przypisz L mod 2. K4: L = L/2 (zaokraglona do nizszej calkowitej). K5: Jesli L = 0 idz do K6; w przeciwnym razie idz do K3. K6: Odwroc napis B tak ze ostatnia cyfra staje sie pierwsza itd. wypisz B

Dlaczego trudne: Najtrudniejszy ALGORYTM ze wszystkich zadan -- konwersja systemow liczbowych + formatowanie co 4 bity. Wymaga myslenia matematycznego.

Na co zwrocic uwagę:

  • Operator + przed wartoscia -- konwersja stringa na liczbe
  • % 2 (modulo) -- reszta z dzielenia daje kolejne bity
  • Math.floor(liczbaDziesietna / 2) -- dzielenie calkowite
  • Budowanie stringa od prawej: liczbaBinarna = bit + liczbaBinarna
  • Petla for od konca -- grupowanie co 4 znaki
  • Warunek brzegowy i != 0 -- zeby nie dodac spacji na poczatku
  • <sub>2</sub> -- indeks dolny w HTML

#4 -- inf03_2024_06_12 (Trudnosc: 7/10)

Temat: Efekty graficzne na obrazkach -- filtry CSS przez JavaScript

Polecenie z arkusza:

Skrypt realizuje transformacje obrazow za pomoca wlasciwosci CSS filter:

  • Transformacje obrazu 1: Gdy zaznaczono pole Blur -- filtr rozmycia (4-8 px). Gdy zaznaczono Sepia -- filtr kolorow sepii 100%. Gdy zaznaczono Negatyw -- filtr odwrocenia kolorow 100%.
  • Transformacje obrazu 2: Po wcisnieciu "Kolory" -- obraz ma zdjety filtr odcieni szarosci. Po wcisnieciu "Czarno-bialy" -- filtr odcieni szarosci 100%.
  • Transformacje obrazu 3: Po wcisnieciu "Zastosuj" -- filtr przezroczystosci o wartosci wskazanej suwakiem.
  • Transformacje obrazu 4: Po wcisnieciu "Zastosuj" -- filtr zmiany jasnosci o wartosci wskazanej suwakiem.

Dlaczego trudne: Zaawansowane selektory CSS w JS, querySelectorAll z forEach, manipulacja CSS filter, 4 rozne funkcje.

Na co zwrocic uwagę:

  • querySelector("img[src='...']") -- selektor atrybutu w JS
  • querySelectorAll("input[name='efekt']") -- pobranie wielu elementow
  • CSS filters: grayscale(), opacity(), brightness(), none
  • Dynamiczne wartosci z suwakow (range input) wstawiane do filtra
  • Kazda funkcja obsluguje inne zdjecie i inny efekt

#5 -- inf03_2025_06_02 (Trudnosc: 7/10)

Temat: Planer zadan (To-Do List) -- dodawanie i oznaczanie jako wykonane

Polecenie z arkusza:

Skrypt napisany w JavaScript, dzialajacy na liscie punktowanej. W stanie poczatkowym jest 6 elementow listy, elementy moga byc dodawane, ale nie sa usuwane.

  • Funkcja wywoływana po wcisnieciu dowolnego z przyciskow "Wykonane": przekresla tresc elementu listy zwiazanego z tym przyciskiem.
  • Funkcja wywoływana po wcisnieciu przycisku "Dodaj": tworzy nowy element listy na jej koncu. Element sklada sie z: tresci pobranej z pola edycyjnego oraz przycisku o tresci "Wykonane", ktory jest formatowany tak jak reszta przyciskow w liscie i jego klikniecie powoduje wywolanie odpowiedniej funkcji.

Dlaczego trudne: Krotki kod ale laczy wiele trudnych koncepcji: createElement z osadzonym HTML, parentElement, template literals z onclick, przekazywanie this.

Na co zwrocic uwagę:

  • createElement("li") -- dynamiczne tworzenie elementu listy
  • Template literal z osadzonym onclick='zaznaczWykonane(this)' -- HTML w JS
  • this w dynamicznie tworzonym HTML -- odnosi sie do kliknietego buttona
  • parentElement -- nawigacja w gore drzewa DOM (z buttona do li)
  • text-decoration: line-through -- wizualne oznaczenie wykonania
  • Wzorzec: klikniecie na dziecko wplywa na rodzica

#6 -- inf03_2025_06_05 (Trudnosc: 6.5/10)

Temat: Koszyk drukarni -- upload pliku, obliczenie ceny

Polecenie z arkusza:

Skrypt wykonywany po stronie klienta, po kliknieciu przycisku:

  • Pobiera dane z kontrolek
  • Oblicza cene na podstawie liczby kopii i rodzaju papieru. Dla papieru blyszczacego cena jednostkowa wynosi 1,5 zl, dla papieru matowego -- 2 zl
  • Ustala nazwe pliku z wartosci pobranej z pierwszego pola edycyjnego
  • Tworzy elementy i dodaje je do bloku z sekcji prawej: element DOM dla obrazu z ustalona nazwa pliku, element DOM dla paragrafu z trescia "Liczba kopii: ", element DOM dla paragrafu z trescia "Cena: "

Dlaczego trudne: File API, zaawansowany selektor radio buttonow, dynamiczne tworzenie wielu elementow DOM, logika cenowa.

Na co zwrocic uwagę:

  • files[0] -- File API, dostep do wybranego pliku
  • file.name -- pobranie nazwy pliku
  • input[type=radio]:checked -- selektor zaznaczonego radio buttona
  • Tworzenie 3 elementow DOM (img + 2x p) i dodawanie do koszyka
  • Rozne ceny za rozne typy papieru

#7 -- inf03_2024_06_06 (Trudnosc: 6.5/10)

Temat: Wieloetapowa rejestracja z walidacja hasel

Polecenie z arkusza:

  • Funkcja dla klikniecia przycisku z pierwszego bloku: ukrywany jest blok 1, blok 2 staje sie widoczny.
  • Funkcja dla klikniecia przycisku z drugiego bloku: ukrywany jest blok 2, blok 3 staje sie widoczny.
  • Funkcja dla klikniecia przycisku z trzeciego bloku: w przypadku, gdy wpisane do pol edycyjnych hasla nie sa identyczne wyswietlane jest okienko popup z komunikatem "Podane hasla roznia sie". Imie i nazwisko wpisane w pierwszym bloku sa pobrane i wyswietlone w konsoli jako napis o tresci "Witaj ".

Dlaczego trudne: querySelectorAll z forEach i indeksem, classList add/remove, przelaczanie blokow, walidacja hasel.

Na co zwrocic uwagę:

  • querySelectorAll('.blok') -- pobranie elementow po klasie CSS
  • forEach((blok, index) => ...) -- forEach z INDEKSEM (drugi argument)
  • classList.add('ukryty') / classList.remove('ukryty') -- dodawanie/usuwanie klas
  • Logika: ukryj wszystkie, pokaz ten o pasujacym indeksie
  • Walidacja: haslo1 !== haslo2 -- porownanie dwoch pol

#8 -- inf03_2025_01_01 (Trudnosc: 6/10)

Temat: Kalkulator rat kursow komputerowych

Polecenie z arkusza:

Skrypt wykonywany po stronie klienta, na stronie raty.html po kliknieciu przycisku "Oblicz":

  • Pobiera dane z kontrolek
  • Ustala calkowita kwote za wybrane kursy na podstawie cen z tabeli
  • Oblicza koszt jednej raty na podstawie kwoty calkowitej. Dla uproszczenia kwota calkowita jest dzielona przez podana liczbe rat
  • Wyswietla pod przyciskiem w paragrafie tresc: "Kurs odbedzie sie w . Koszt calkowity: zl. Placisz rat po zl", gdzie oznacza wybor z listy rozwijalnej, obliczona kwote calkowita, podana liczbe rat, wyliczona rate

Dlaczego trudne: Wiele typow elementow formularza (checkbox, number, select), sumowanie warunkowe, obliczenie raty, template literals.

Na co zwrocic uwagę:

  • .checked -- sprawdzanie czy checkbox jest zaznaczony
  • cena += 3000 -- kumulowanie wartosci (sumowanie)
  • parseInt(cena / ile_rat) -- dzielenie calkowite (zaokraglenie w dol)
  • Template literals z wieloma zmiennymi ${...}
  • Rozne typy inputow: checkbox, number, select

#9 -- inf03_2024_06_09 (Trudnosc: 6/10)

Temat: Galeria zdjec z nawigacja (poprzednie/nastepne)

Polecenie z arkusza:

  • Funkcja wyswietlajaca nastepne zdjecie: zmienia aktywne zdjecie w bloku srodkowym na nastepne (np. 1.jpg na 2.jpg). W przypadku, gdy jest wyswietlane ostatnie zdjecie: 7.jpg zmienia zdjecie na: 1.jpg.
  • Funkcja wyswietlajaca poprzednie zdjecie: zmienia aktywne zdjecie w bloku srodkowym na poprzednie (np. 3.jpg na 2.jpg). W przypadku, gdy jest wyswietlane pierwsze zdjecie: 1.jpg zmienia zdjecie na ostatnie: 7.jpg.

Dlaczego trudne: Stan globalny, logika cykliczna (wrap-around), dynamiczna zmiana src.

Na co zwrocic uwagę:

  • Zmienna globalna let aktualneZdjecie = 1 -- stan galerii
  • Logika cykliczna: jesli < 1 to wroc do 7, jesli > 7 to wroc do 1
  • Dynamiczna zmiana src obrazka: aktualneZdjecie + ".jpg"
  • Dwie symetryczne funkcje (lustrzana logika)

#10 -- inf03_2026_01_09 (Trudnosc: 6/10)

Temat: Salon paznokci -- przelaczanie sekcji z podswietlaniem aktywnego przycisku

Polecenie z arkusza:

Skrypt 1: wyswietla za pomoca petli 10 obrazow o nazwach 1.jpg, 2.jpg ... 10.jpg. Kazdy obraz ma przypisana klase wzory. Po najechaniu kursorem na obraz wyswietlany jest dymek z nazwa (numerem) obrazu.

Skrypt 2: wykonywany po stronie klienta, po najechaniu kursorem na przycisk:

  • Gdy kursor najedzie na przycisk "Kolor": pierwszy blok sekcji wyswietlany w postaci blokowej, pozostale usuniete. Pierwszy przycisk ma kolor tla Salmon, pozostale Crimson.
  • Gdy kursor najedzie na przycisk "Ksztalt": drugi blok sekcji wyswietlany w postaci blokowej, pozostale usuniete. Drugi przycisk ma kolor tla Salmon, pozostale Crimson.
  • Gdy kursor najedzie na przycisk "Wzor": trzeci blok sekcji wyswietlany w postaci blokowej, pozostale usuniete. Trzeci przycisk ma kolor tla Salmon, pozostale Crimson.

Dlaczego trudne: Zarzadzanie 6 elementami DOM jednoczesnie, synchronizacja widocznosci sekcji z kolorami przyciskow.

Na co zwrocic uwagę:

  • 6 elementow DOM do ogarniecial (3 sekcje + 3 przyciski)
  • Kazdy if zmienia stan WSZYSTKICH 6 elementow
  • display: block/none -- przelaczanie widocznosci
  • backgroundColor -- zmiana koloru aktywnego przycisku
  • Duzo kodu ale powtarzalny wzorzec -- warto pokazac jak go uproscic

Podsumowanie

Najtrudniejsze koncepcje JS na egzaminie INF.03:

  1. addEventListener + querySelectorAll + forEach (programistyczne dodawanie zdarzen)
  2. createElement + appendChild (dynamiczne tworzenie elementow DOM)
  3. Algorytmy matematyczne (konwersja binarna, obliczenia)
  4. classList.add/remove (manipulacja klasami CSS)
  5. File API (files[0], file.name)
  6. Stan globalny + logika cykliczna (galerie, paski postepu)
Wróć do spisu lekcji