KWALIFIKACJA INF3 - STYCZEŃ 2023

PYTANIE NR 38.
Po wykonaniu fragmentu kodu HTML i JavaScript na stronie będzie wyświetlony obraz z pliku
Ilustracja przedstawia fragment kodu HTML i JavaScript, który jest związany z wyświetlaniem obrazu na stronie internetowej.
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
O tym, jaki obraz zostanie wyświetlony, decyduje końcowa wartość atrybutu src elementu <img> po wykonaniu kodu. Jeśli skrypt ustawia (lub nadpisuje) src na kol2.jpg, to właśnie ten plik będzie widoczny. Opcje opisujące zmianę "po kliknięciu" nie muszą dotyczyć stanu początkowego.

Pełne wyjaśnienie:

W HTML obraz na stronie jest wyświetlany przez element <img>. Kluczowy jest atrybut src, który wskazuje plik graficzny do pobrania i pokazania przez przeglądarkę. JavaScript może ten atrybut ustawić lub zmienić (np. przez odwołanie do elementu w DOM, często przez id i funkcję document.getElementById), a następnie przypisanie nowej wartości do właściwości src.

Pytanie dotyczy efektu "po wykonaniu fragmentu kodu HTML i JavaScript", czyli tego, jaka jest końcowa wartość źródła obrazka wynikająca z inicjalizacji w HTML oraz ewentualnego nadpisania w skrypcie uruchamianym przy ładowaniu strony. Jeżeli w wyniku działania kodu ustawiane jest kol2.jpg, to ten plik będzie wyświetlony.

  • kol2.jpg – poprawne, gdy kod ostatecznie ustawia źródło obrazka na ten plik (w HTML lub przez JS, który nadpisuje wcześniejsze ustawienie).
  • kol1.jpg – błędne, jeśli w kodzie źródło jest zmieniane na kol2.jpg przed zobaczeniem strony przez użytkownika.
  • kol1.jpg, który może być zmieniony na kol2.jpg po wciśnięciu przycisku – mylące, bo opisuje scenariusz zależny od akcji użytkownika; jeśli pytanie dotyczy stanu po wykonaniu kodu (bez kliknięcia), taka odpowiedź może nie odpowiadać na to, co widać od razu.
  • kol2.jpg, który może być zmieniony na kol1.jpg po wciśnięciu przycisku – również wprowadza warunek "po kliknięciu"; nawet jeśli taka zmiana istnieje, nie zmienia to faktu, jaki plik jest widoczny bez wykonywania tej akcji.

Wskazówka egzaminacyjna: zawsze rozdzielaj "stan początkowy po załadowaniu/wykonaniu skryptu" od "stanu po zdarzeniu" (kliknięcie, najechanie myszą). W zadaniach z DOM sprawdzaj, czy skrypt nadpisuje atrybut z HTML.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Decyduje wartość atrybutu src (lub odpowiadającej mu właściwości src w DOM). Przeglądarka pobiera zasób wskazany w src i wyświetla go jako obraz. Jeśli JavaScript nadpisze src, zobaczysz plik ustawiony jako ostatni.
Najczęściej pobiera się element (np. przez document.getElementById), a potem przypisuje nową wartość: element.src = "kol2.jpg". Po tej zmianie przeglądarka ładuje nowy plik i podmienia obraz bez przeładowania całej strony.
Gdy kod zmiany src jest uruchamiany w obsłudze zdarzenia, np. onclick przycisku albo przez addEventListener("click", ...). Wtedy początkowo widać obraz ustawiony przy starcie, a dopiero akcja użytkownika wywołuje podmianę.
Bo odpowiedzi często opisują oba scenariusze, a w kodzie mogą występować i ustawienie początkowe w HTML, i logika zdarzenia w JavaScript. Kluczowe jest, czy pytanie dotyczy efektu "po wykonaniu kodu" (bez interakcji) czy "po naciśnięciu przycisku".
Szukaj w skrypcie przypisania do .src dla elementu <img> (bezpośrednio lub w funkcji wywoływanej przy starcie). Jeśli jest przypisanie wykonywane automatycznie, to ono ma pierwszeństwo przed wartością wpisaną w HTML i zmienia to, co zobaczysz na stronie.
W praktyce są powiązane, ale nie zawsze identyczne w prezentacji (np. przeglądarka może zwracać adres absolutny). Dla egzaminu najważniejsze jest, że ustawienie właściwości element.src w JavaScript skutecznie zmienia obraz wyświetlany w <img>.
Typowe błędy to: ignorowanie kolejności wykonywania (HTML vs skrypt), traktowanie opisu "po kliknięciu" jako odpowiedzi na pytanie o stan początkowy oraz pomijanie faktu, że jedna linia JS może nadpisać wcześniejszy src.
Najczęściej oznacza błędną ścieżkę w src, brak pliku na serwerze lub literówkę w nazwie. W kontekście JS możliwe jest też, że skrypt ustawia src na nieistniejący plik albo wykonuje się przed załadowaniem elementu (zła kolejność).
Zdarzenie "click" uruchamia przypisaną funkcję. W tej funkcji można odczytać aktualny src i ustawić nowy, np. przełączając między dwoma plikami. Na egzaminie zwracaj uwagę, czy funkcja jest faktycznie podpięta do przycisku (np. przez onclick).
Przećwicz kilka mini-zadań: (1) ustawianie obrazka w <img>, (2) nadpisywanie src w JS przy starcie, (3) przełączanie obrazków po kliknięciu. Ucz się czytać krótki kod i wskazywać efekt końcowy bez uruchamiania go.
info

Około 56% zdających odpowiada poprawnie na to pytanie. średnie

W praktyce zawodowej kluczowe jest to, że o tym, jaki obraz zostanie wyświetlony, decyduje końcowa wartość atrybutu src elementu &lt;img&gt; po wykonaniu kodu.

Źródła:

  • MDN Web Docs: "&lt;img&gt;: The Image Embed element" (sekcja dot. atrybutu src), https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img - dostęp 2026-02-18
  • MDN Web Docs: "Document: getElementById() method", https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById - dostęp 2026-02-18
  • MDN Web Docs: "GlobalEventHandlers.onclick" (obsługa zdarzenia kliknięcia), https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick - dostęp 2026-02-18

Materiały:

  • Dokumentacja MDN: element HTML &lt;img&gt; i atrybut src
  • Dokumentacja MDN: document.getElementById i modyfikacja właściwości DOM
  • Ćwiczenia: zmiana obrazka po kliknięciu (zdarzenia onclick/addEventListener)

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego