KWALIFIKACJA INF3 - TEST WIEDZY NR 1

PYTANIE NR 36.
Załóżmy, że tworzysz stronę internetową z użyciem HTML, CSS i JavaScript. Chcesz, aby pewne elementy na stronie były dynamicznie modyfikowane bez konieczności odświeżania całej strony. Który z tych języków jest odpowiedzialny za takie działanie?
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Za dynamiczne modyfikowanie elementów strony w przeglądarce (np. zmiana treści, dodanie klasy, ukrycie/pokazanie elementu) odpowiada JavaScript, bo może wykonywać logikę i manipulować DOM. HTML opisuje strukturę dokumentu, a CSS odpowiada głównie za wygląd i układ, nie za logikę działania.

Pełne wyjaśnienie:

W typowej aplikacji webowej technologie pełnią różne role:

  • HTML definiuje strukturę dokumentu (nagłówki, akapity, formularze, przyciski). Sam HTML nie "uruchamia" zachowania – jest opisem treści i hierarchii elementów.
  • CSS odpowiada za prezentację (kolory, czcionki, rozmieszczenie, responsywność). CSS potrafi tworzyć przejścia i animacje, ale nie podejmuje decyzji na podstawie danych użytkownika w taki sposób jak logika programu.
  • JavaScript realizuje zachowanie i logikę po stronie przeglądarki: reaguje na zdarzenia (kliknięcia, wpisywanie), przetwarza dane i może modyfikować stronę poprzez API DOM.

Dlatego, jeśli celem jest "dynamiczne modyfikowanie elementów bez odświeżania całej strony", właściwą odpowiedzią jest JavaScript. Przykładowo skrypt może znaleźć element (np. przez querySelector), zmienić jego tekst (np. textContent), dodać/zdjąć klasę (classList) lub wstawić nowy fragment struktury. To są operacje na DOM, wykonywane w czasie działania strony.

Dlaczego pozostałe odpowiedzi są błędne?

  • HTML – nie zapewnia mechanizmu wykonywania logiki; po wczytaniu dokumentu nie "steruje" zmianami w odpowiedzi na zdarzenia.
  • CSS – może zmieniać wygląd zależnie od selektorów czy stanów (np. :hover), ale nie jest językiem programowania do przetwarzania danych i przebudowy DOM. Do złożonej interakcji potrzebny jest skrypt.
  • Wszystkie powyższe – choć w praktyce łączy się HTML, CSS i JS, to za samo dynamiczne sterowanie i modyfikację elementów odpowiada JavaScript. Pozostałe warstwy wspierają ten efekt, ale go nie realizują jako "silnik logiki".

Na egzaminie warto zapamiętać prosty podział: HTML = co jest, CSS = jak wygląda, JS = jak działa. W pytaniach o interakcje, zdarzenia i modyfikację elementów w czasie działania strony najczęściej poprawną odpowiedzią będzie JavaScript.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
DOM (Document Object Model) to obiektowa reprezentacja strony w przeglądarce. JavaScript może odczytywać i zmieniać węzły DOM (np. tekst, atrybuty, klasy), dzięki czemu treść i układ interfejsu mogą się aktualizować bez przeładowania całego dokumentu.
Skrypt działa w przeglądarce i wykonuje instrukcje w reakcji na zdarzenia (np. klik). Następnie wywołuje metody DOM, np. wyszukuje element i zmienia jego właściwości. Przeglądarka przerysowuje tylko potrzebny fragment widoku, a nie ładuje strony od nowa.
CSS potrafi zmieniać wygląd w zależności od stanu (np. :hover) i tworzyć animacje. Nie jest jednak językiem do logiki i pracy na danych użytkownika, więc nie zastąpi JavaScript w zadaniach typu tworzenie/usuń element, licznik, walidacja z warunkami, obsługa API.
HTML opisuje strukturę i treść (np. formularz, przyciski, sekcje). JavaScript dodaje zachowanie: obsługuje zdarzenia, waliduje dane, przelicza wartości i aktualizuje DOM. Na egzaminie pomaga reguła: HTML "co jest", JS "jak działa".
Wszystkie technologie są używane razem, ale pytanie dotyczy tego, który język jest odpowiedzialny za dynamiczną modyfikację elementów bez przeładowania. Za logikę i manipulację DOM odpowiada JavaScript; HTML i CSS pełnią inne role (struktura i styl).
Typowe przykłady to: pokazanie/ukrycie sekcji po kliknięciu, zmiana tekstu komunikatu błędu w formularzu, aktualizacja licznika znaków, dodawanie elementów listy "to-do", przełączanie motywu przez dodanie/zdjęcie klasy CSS oraz wstawianie danych pobranych z serwera.
Gdy zmiany dotyczą interfejsu lub danych, które można dociągnąć asynchronicznie i wstawić do istniejącego dokumentu. JavaScript pobiera dane (np. przez fetch), przetwarza je i aktualizuje DOM. Użytkownik widzi nowe treści, a adres i dokument nie muszą być ładowane od zera.
Najczęstsze pomyłki to: mylenie CSS z logiką (bo "zmienia stronę"), wybieranie odpowiedzi zbiorczej "wszystkie", brak rozróżnienia między strukturą HTML a zachowaniem, oraz niekojarzenie pojęcia DOM z realnymi operacjami, które wykonuje JavaScript.
W kontekście takiego pytania chodzi o JavaScript po stronie klienta, czyli w przeglądarce, gdzie manipuluje DOM i reaguje na zdarzenia użytkownika. JavaScript może też działać po stronie serwera (np. w środowiskach serwerowych), ale nie służy wtedy do bezpośredniej modyfikacji DOM.
Szukaj słów kluczowych: "zdarzenie", "kliknięcie", "interakcja", "walidacja", "dynamiczna zmiana", "bez przeładowania", "modyfikacja elementu". Jeśli pytanie dotyczy działania i logiki w przeglądarce, najczęściej poprawna odpowiedź wskazuje JavaScript, nie HTML ani CSS.
info

Statystycznie 73% uczniów zna prawidłową odpowiedź. średnio łatwe

Według specjalistów z branży: "Za dynamiczne modyfikowanie elementów strony w przeglądarce (np. zmiana treści, dodanie klasy, ukrycie/pokazanie elementu) odpowiada JavaScript, bo może wykonywać logikę i manipulować DOM."

Źródła:

  • MDN Web Docs: JavaScript Guide (wprowadzenie i rola języka) https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide (dostęp: 2026-02-18)
  • MDN Web Docs: Document Object Model (DOM) – wprowadzenie https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction (dostęp: 2026-02-18)
  • MDN Web Docs: HTML – podstawy i rola języka znaczników https://developer.mozilla.org/en-US/docs/Web/HTML (dostęp: 2026-02-18)

Materiały:

  • MDN Web Docs: JavaScript – przewodniki i referencje
  • MDN Web Docs: DOM – wprowadzenie do Document Object Model
  • MDN Web Docs: Manipulacja DOM (querySelector, classList, textContent)

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego