KWALIFIKACJA INF3 - CZERWIEC 2022

PYTANIE NR 6.
Jaki będzie efekt wykonania przedstawionych instrukcji JavaScript?
Ilustracja przedstawia fragment kodu JavaScript, który jest częścią pytania egzaminacyjnego związanego z kwalifikacją
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Efekt opisuje zakres selekcji i zmianę stylu.
Jeśli instrukcje wybierają wszystkie elementy przypisane do klasy styl1 i ustawiają im pogrubienie (np. grubość czcionki na bolder), to zmiana obejmie całą grupę tej klasy, a nie całą stronę, pojedynczy id ani tylko pierwszy element.

Pełne wyjaśnienie:

Pytanie sprawdza, czy rozumiesz dwie rzeczy: (1) jak JavaScript wybiera elementy strony oraz (2) czy zmiana dotyczy jednego elementu, czy wielu.

Poprawna odpowiedź wskazuje, że modyfikacja obejmuje wszystkie elementy przypisane do klasy styl1, a następnie nadaje im pogrubienie tekstu poprzez ustawienie odpowiedniej właściwości stylu (w praktyce odpowiada to CSS font-weight z wartością bolder). To typowy wzorzec: wybór elementów po klasie (czyli potencjalnie wielu) i wykonanie tej samej operacji na każdym z nich.

Dlaczego pozostałe odpowiedzi są niepoprawne?

  • Stwierdzenie, że styl zostanie przypisany dla wszystkich elementów na stronie, byłoby prawdziwe tylko wtedy, gdyby selekcja obejmowała całe drzewo dokumentu (np. dobór bardzo szerokiego selektora). Jeżeli w instrukcjach jest wskazanie konkretnej klasy, zakres jest zawężony.
  • Opcja o id równym styl1 miesza dwa różne mechanizmy. Identyfikator id jest unikalny (powinien wystąpić tylko raz), a klasa class może wystąpić wielokrotnie. Jeżeli kod odnosi się do klasy, nie dotyczy pojedynczego elementu identyfikowanego przez id.
  • Teza o zmianie tylko pierwszego elementu byłaby typowa dla sytuacji, gdy wybierasz jeden element (np. metodą zwracającą pojedynczy obiekt) lub gdy po kolekcji elementów nie iterujesz. Jeżeli jednak instrukcje wykonują operację na wszystkich elementach znalezionych dla klasy, wynik obejmuje całą kolekcję.

Wskazówka egzaminacyjna: zawsze ustal najpierw, czy selekcja zwraca pojedynczy element, czy zbiór elementów, a dopiero potem oceniaj efekt stylowania.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Oznacza znalezienie w dokumencie wszystkich elementów, które mają wskazaną klasę CSS w atrybucie class. Wynikiem bywa kolekcja wielu elementów, dlatego często trzeba wykonać tę samą operację na każdym z nich (np. w pętli).
Klasa może wystąpić na wielu elementach, a id powinno być unikalne w obrębie strony. Jeśli odpowiedź mówi o "wszystkich elementach z klasą", chodzi o selekcję grupy; jeśli o "elemencie o id", chodzi o pojedynczy element.
Bo wymaga selektora bardzo ogólnego (obejmującego całe drzewo DOM). W zadaniach szkolnych częściej wybiera się konkretną klasę, element lub fragment dokumentu. Zawsze sprawdź, czy selektor faktycznie ogranicza zakres działania.
Pozwala dynamicznie wyróżnić treści bez ręcznej edycji HTML/CSS, np. zaznaczyć aktywną pozycję menu, podświetlić błędne pola formularza lub wzmocnić ważny komunikat. To typowe użycie manipulacji DOM w aplikacjach webowych.
Pułapka polega na nieuwzględnieniu typu wyniku selekcji. Jedne metody/selektory zwracają pojedynczy element, inne kolekcję. Jeśli w kodzie widać iterację po zbiorze, efekt dotyczy wszystkich; bez iteracji często dotyczy tylko jednego.
Nie zawsze. bolder oznacza "bardziej pogrubione" względem bieżącej grubości czcionki elementu i dostępnych wariantów fontu. Efekt może zależeć od użytej czcionki i stylów dziedziczonych, ale intencją jest zwiększenie grubości pisma.
Użyj narzędzi deweloperskich: zaznacz jeden element z daną klasą i sprawdź, czy inne elementy tej samej klasy mają identycznie zmienione style. Możesz też wyszukać klasę w panelu Elements i porównać właściwości CSS.
Gdy chcesz zachować porządek i łatwość utrzymania. Dodanie klasy (a styl w CSS) jest czytelniejsze, pozwala zmieniać wygląd bez modyfikacji skryptu i ułatwia spójność. Styl inline bywa szybszy w prostych przykładach, ale trudniejszy w rozbudowie.
Często dotyczą selektorów (po klasie, id, tagu), zdarzeń (kliknięcie, submit), modyfikacji treści (text/HTML) i stylów, oraz pracy na wielu elementach naraz. Warto ćwiczyć rozpoznawanie, czy kod działa na jednym obiekcie czy na kolekcji.
To słowa-klucze opisujące zakres działania kodu. Jedna drobna różnica w selekcji (klasa vs id) lub w sposobie użycia wyniku (pętla vs pojedyncze ustawienie) zmienia efekt z "wszystkich elementów" na "jeden element", co decyduje o poprawności.
info

To pytanie poprawnie rozwiązuje 69% zdających egzamin. średnie

Źródła:

  • MDN Web Docs: Document.querySelectorAll() — https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll (dostęp: 2026-02-27)
  • MDN Web Docs: Document.getElementsByClassName() — https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName (dostęp: 2026-02-27)
  • MDN Web Docs: CSS font-weight — https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight (dostęp: 2026-02-27)

Materiały:

  • Dokumentacja MDN: selekcja elementów w DOM (querySelectorAll, getElementsByClassName)
  • Dokumentacja MDN: właściwości stylu (HTMLElement.style) i mapowanie CSS ↔ JS
  • Ćwiczenia: małe strony HTML z kilkoma elementami tej samej klasy i obserwacja zmian stylu w konsoli

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego