Kwalifikacje w Zawodzie - Testy zawodowe online | Egzaminy Zawodowe

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):
Co to jest DOM i dlaczego JavaScript go modyfikuje?
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.
Jak JavaScript zmienia elementy strony bez odświeżania?
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.
Czy CSS może "dynamicznie" zmieniać stronę bez JavaScript?
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.
Co w praktyce robi HTML, a co JavaScript na stronie?
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".
Dlaczego odpowiedź "Wszystkie powyższe" jest błędna w tym pytaniu?
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).
Jakie są przykłady dynamicznych zmian wykonywanych w JavaScript?
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.
Kiedy w aplikacji webowej nie trzeba przeładowywać strony?
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.
Jakie błędy najczęściej robią uczniowie w pytaniach HTML/CSS/JS?
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.
Czy JavaScript działa po stronie serwera czy przeglądarki?
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.
Jak szybko rozpoznać na egzaminie pytania o rolę JavaScript?
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)
Zobacz też:

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego