Przejdź do treści
INF.03 · część pisemna

Programowanie po stronie klienta (JavaScript)

Przed Tobą 10 pytań w formule egzaminu CKE.

Pytanie 1 / 10Programowanie
Co wypisze kod: let suma = 0; for (let i = 1; i <= 6; i++) { if (i % 2 === 0) continue; suma += i; } console.log(suma);
Wszystkie 10 pytań z wyjaśnieniamiRozwiń, jeśli wolisz przejrzeć zestaw bez rozwiązywania testu.

Zmienne i zasięg, wynik pętli, metody tablic, model DOM, obsługa zdarzeń oraz Local Storage, Session Storage i ciasteczka.

1.Co wypisze kod: let suma = 0; for (let i = 1; i <= 6; i++) { if (i % 2 === 0) continue; suma += i; } console.log(suma);

  • A.21
  • B.12
  • C.9— poprawna
  • D.15
Dlaczego: Instrukcja continue nie przerywa pętli, a jedynie pomija resztę bieżącego obiegu, więc do sumy trafiają wyłącznie liczby nieparzyste 1, 3 i 5. Wynik 21 kusi tych, którzy zignorują warunek reszty z dzielenia, a 12 to suma pominiętych liczb parzystych.

2.Co wypisze kod: const liczby = [10, 20, 30, 40]; liczby.splice(1, 2); console.log(liczby);

  • A.[20, 30]
  • B.[10, 40]— poprawna
  • C.[10, 30, 40]
  • D.[10, 20, 40]
Dlaczego: Drugi argument metody splice to liczba elementów do usunięcia, a nie indeks końcowy, więc od pozycji 1 znikają dwa elementy, a zmiana zachodzi w oryginalnej tablicy. Odpowiedź [20, 30] kusi, bo taki fragment splice zwraca, ale pytanie dotyczy zawartości tablicy po operacji.

3.Co wypisze kod: const liczby = [1, 2, 3]; liczby.push(4); const cz = liczby.slice(1, 3); console.log(cz);

  • A.[2, 3]— poprawna
  • B.[2, 3, 4]
  • C.[1, 2, 3]
  • D.TypeError przy push
Dlaczego: Słowo const blokuje ponowne przypisanie do zmiennej, ale nie zamraża zawartości tablicy, dlatego push działa i tablica ma cztery elementy. Metoda slice kopiuje zakres od indeksu 1 do 3 z wyłączeniem elementu o indeksie 3, więc czwórka nie wchodzi do wyniku.

4.Co wypisze kod: const liczby = [1, 2, 3]; const wynik = liczby.forEach((x) => x * 2); console.log(wynik);

  • A.[2, 4, 6]
  • B.undefined— poprawna
  • C.[1, 2, 3]
  • D.6
Dlaczego: Metoda forEach służy wyłącznie do przejścia po elementach i zawsze zwraca undefined, niezależnie od tego, co robi przekazana funkcja. Tablicę [2, 4, 6] zwróciłaby metoda map i to najczęstsza pomyłka, bo obie metody zapisuje się w kodzie niemal identycznie.

5.Które z poniższych wyrażeń ma wartość true?

  • A.NaN === NaN
  • B.'5' === 5
  • C.null == undefined— poprawna
  • D.0 === false
Dlaczego: Porównanie luźne traktuje null i undefined jako równe sobie i jest to wyjątek zapisany wprost w standardzie języka. Porównanie ścisłe wymaga zgodności typu, więc tekst nigdy nie będzie równy liczbie ani wartości logicznej, a NaN nie równa się nawet samemu sobie.

6.Co wypisze kod: var a = 10; let b = 20; if (true) { var a = 99; let b = 88; } console.log(a + ' ' + b);

  • A.10 20
  • B.99 20— poprawna
  • C.99 88
  • D.10 88
Dlaczego: Deklaracja var ma zasięg funkcyjny, więc ta z wnętrza bloku if odnosi się do tej samej zmiennej i nadpisuje ją wartością 99. Deklaracja let ma zasięg blokowy, więc b spod klamer to osobna zmienna, która ginie po zamknięciu bloku i na zewnątrz pozostaje 20.

7.Na stronie jest kilka elementów z atrybutem class o wartości produkt. Która instrukcja zwróci pierwszy z nich jako pojedynczy element?

  • A.document.getElementById('produkt')
  • B.document.querySelectorAll('.produkt')
  • C.document.getElementsByClassName('produkt')
  • D.document.querySelector('.produkt')— poprawna
Dlaczego: Metoda querySelector przyjmuje pełny selektor CSS, czyli klasę zapisaną z kropką, i zwraca pierwszy pasujący element albo null. Wersja z końcówką All oraz getElementsByClassName oddają kolekcje wymagające indeksowania, a getElementById szuka identyfikatora, nie klasy.

8.Formularz o identyfikatorze rejestracja ma być sprawdzony skryptem bez przeładowania strony. Który zapis jest poprawny?

  • A.formularz.addEventListener('submit', function (e) { e.preventDefault(); sprawdz(); });— poprawna
  • B.formularz.addEventListener('onsubmit', function (e) { e.preventDefault(); sprawdz(); });
  • C.formularz.addEventListener('submit', sprawdz());
  • D.formularz.addEventListener('click', function (e) { e.preventDefault(); sprawdz(); });
Dlaczego: Nazwę zdarzenia podaje się bez przedrostka on, a funkcję przekazuje się bez nawiasów wywołania, bo nawiasy uruchomiłyby ją natychmiast i podpięły jej wynik zamiast samej funkcji. Bez wywołania preventDefault przeglądarka wysyła formularz i strona się przeładowuje.

9.Sklep ma zapamiętać koszyk tak, aby przetrwał zamknięcie przeglądarki, a dane nie były dołączane do każdego żądania HTTP. Który mechanizm wybrać?

  • A.ciasteczko z atrybutem max-age
  • B.Session Storage
  • C.Local Storage— poprawna
  • D.ciasteczko bez atrybutu expires
Dlaczego: Local Storage nie ma daty ważności i nigdy nie opuszcza przeglądarki, więc spełnia oba warunki naraz. Session Storage ginie po zamknięciu karty, a każde ciasteczko, nawet z długim czasem życia, jest automatycznie dołączane do żądań HTTP i mieści około 4 KB danych.

10.Co wypiszą dwie ostatnie instrukcje: const t = [1, 2]; localStorage.setItem('motyw', 'ciemny'); console.log(t[5]); console.log(localStorage.getItem('kolor'));

  • A.undefined oraz null— poprawna
  • B.null oraz undefined
  • C.undefined oraz undefined
  • D.błąd indeksu oraz null
Dlaczego: Odwołanie do nieistniejącego indeksu tablicy nie kończy się błędem, tylko daje undefined, czyli brak wartości, którego nikt nie ustawiał. Metoda getItem dla nieznanego klucza oddaje null, czyli celowo oznaczony brak danych, i na tym warunku opiera się typowa inicjalizacja pamięci.

To nie koniec powtórki

Przećwicz kolejny zestaw i utrwal materiał przed egzaminem.

Dalej: Projektowanie baz danych