Kwalifikacje w Zawodzie - Testy zawodowe online | Egzaminy Zawodowe

KWALIFIKACJA INF3 - CZERWIEC 2021



PYTANIE NR 39.
Kod JavaScript wywołany zdarzeniem kliknięcia przycisku ma za zadanie
Ilustracja przedstawia fragment kodu HTML i JavaScript, który jest związany z kwalifikacją zawodową TECHNIK PROGRAMISTA,
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Poprawna jest odpowiedź "zamienić obraz1.gif na obraz2.gif", ponieważ typowy kod obsługi kliknięcia przycisku w takim zadaniu polega na podmianie właściwości/atrybutu src elementu <img>.
Ukrywanie/pokazywanie to zwykle zmiana stylu (np. display), a "obok" wymagałoby dodania nowego elementu do DOM.

Pełne wyjaśnienie:

W zadaniach INF.3 dotyczących JavaScript i zdarzeń często pokazany jest fragment kodu uruchamiany po kliknięciu przycisku. Jeżeli kod wskazuje na odwołanie do elementu obrazu (np. przez id) i następnie przypisanie nowej wartości do jego właściwości, to oznacza to modyfikację istniejącego elementu, a nie tworzenie nowego.

Odpowiedź "zamienić obraz1.gif na obraz2.gif" pasuje do sytuacji, w której skrypt podmienia źródło grafiki, czyli zmienia atrybut/właściwość src elementu <img>. Efektem w przeglądarce jest wyświetlenie nowego pliku graficznego w tym samym miejscu na stronie.

Dlaczego pozostałe odpowiedzi są niepoprawne?

  • "ukryć obraz2.gif" – ukrywanie dotyczy zwykle stylu (np. display: none, visibility: hidden) albo usunięcia elementu z DOM. Sama podmiana src nie jest "ukrywaniem".
  • "zmienić styl obrazu o id równym i1" – zmiana stylu to manipulacja właściwością style lub klasami CSS (classList). Podmiana pliku grafiki to zmiana src, a nie stylu.
  • "wyświetlić obraz2.gif obok obraz1.gif" – wyświetlenie "obok" oznaczałoby, że na stronie pojawiają się dwa obrazy jednocześnie, co zwykle wymaga utworzenia/dodania nowego elementu <img> albo wstawienia go do kontenera. Podmiana src jednego obrazu nie daje dwóch obrazów naraz.

Wskazówka egzaminacyjna: gdy w kodzie widzisz odwołanie do obrazu i przypisanie wartości przypominającej nazwę pliku (np. *.gif, *.png, *.jpg) do właściwości, najczęściej chodzi o podmianę źródła grafiki, a nie o operacje na stylu lub strukturze DOM.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Co oznacza "kod JavaScript wywołany zdarzeniem kliknięcia"?

To fragment JavaScript uruchamiany, gdy użytkownik kliknie element strony (np. przycisk).

Najczęściej jest podpięty przez addEventListener('click', ...) albo atrybut onclick. Kliknięcie jest "wyzwalaczem", a kod wykonuje zaprogramowaną reakcję.

Jak w JavaScript najczęściej zamienia się obraz na inny po kliknięciu?

Zwykle pobiera się element <img> (np. po id) i zmienia jego właściwość src.

Przykład idei: pobierz obraz i ustaw src na nowy plik. To powoduje, że w tym samym miejscu strony wczytuje się i wyświetla inna grafika.

Dlaczego zmiana src to nie to samo co ukrywanie obrazu?

Zmiana src podmienia plik wyświetlany w tym samym elemencie <img>.

Ukrywanie dotyczy widoczności elementu (np. display: none, visibility: hidden) albo usunięcia go z DOM. Wtedy element nie jest widoczny, niezależnie od tego, jaki ma src.

Co trzeba znać o id elementu, aby działało getElementById?

Wartość id w HTML musi być unikalna w obrębie całej strony.

Metoda getElementById zwraca pierwszy (i w praktyce jedyny) element o tym id. Jeśli id jest błędne lub nie istnieje, zwróci null i próba zmiany np. src zakończy się błędem.

Jak odróżnić w kodzie zmianę stylu od zmiany obrazu?

Zmiana stylu zwykle dotyczy style, klas (classList) lub właściwości CSS (np. display, width).

Zmiana obrazu to przypisanie nowej ścieżki do src (czasem też setAttribute('src', ...)).

Czy da się wyświetlić obraz2.gif obok obraz1.gif samą zmianą src?

Nie. Zmiana src modyfikuje to, co pokazuje jeden element <img>.

Aby mieć dwa obrazy obok siebie, musisz mieć dwa elementy <img> (już w HTML) albo utworzyć i dodać drugi <img> do DOM w JavaScript.

Jakie błędy najczęściej robią uczniowie w zadaniach o zdarzeniu click?

Częste pomyłki to: podpinanie zdarzenia do złego elementu, literówka w id, brak wczytania DOM przed użyciem selektorów oraz mylenie właściwości (src vs style).

Na egzaminie warto sprawdzać, co jest modyfikowane: atrybut, styl czy struktura DOM.

Kiedy lepiej użyć addEventListener zamiast onclick?

addEventListener jest zwykle lepsze, bo pozwala dodać wiele niezależnych handlerów, łatwiej oddzielić HTML od JS i precyzyjniej zarządzać zdarzeniami.

onclick bywa prostsze w krótkich przykładach, ale trudniej je skalować i utrzymywać w większych projektach.

Jak sprawdzić w przeglądarce, czy po kliknięciu faktycznie zmienia się src?

Najprościej użyć narzędzi deweloperskich: zaznaczyć element <img> i obserwować atrybut src przed i po kliknięciu.

Można też dodać console.log(obraz.src) w handlerze kliknięcia. Jeśli wartość się zmienia, to podmiana obrazu działa.

Jak przygotować się do pytań INF.3 o manipulację DOM na egzaminie?

Ćwicz rozpoznawanie, co robi kod: czy zmienia atrybuty (np. src), tekst (textContent/innerHTML), style lub klasy.

Rozwiązuj krótkie przykłady: przycisk + element docelowy. Utrwal też selektory: getElementById i querySelector.

info

Około 52% zdających odpowiada poprawnie na to pytanie. trudne

Źródła:

  • MDN Web Docs: "HTMLElement: click event" (zdarzenie click), https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event - dostęp 2026-03-04
  • MDN Web Docs: "EventTarget.addEventListener()", https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener - dostęp 2026-03-04
  • MDN Web Docs: "HTMLImageElement.src", https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/src - dostęp 2026-03-04

Materiały:

  • Dokumentacja MDN: zdarzenia i obsługa addEventListener
  • Dokumentacja MDN: element HTMLImageElement i właściwość src
  • Ćwiczenia praktyczne: manipulacja DOM (getElementById, querySelector)
Zobacz też:

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego