Trening egzaminacyjny: część pisemna

Część pisemna INF.03 to 40 pytań zamkniętych w 60 minut, z czego JavaScriptu dotyczy zwykle 4–5. To niewiele punktów, ale są to punkty najtańsze: pytania są krótkie (1–5 linii kodu), schematyczne i celują w kilkanaście tych samych błędnych przekonań. Kto je zna, odpowiada w minutę i zostawia sobie czas na SQL i PHP. Ta lekcja uczy czytać kod w stylu, w jakim piszą go autorzy arkuszy, eliminować dystraktory i daje bank ponad 40 pytań do przećwiczenia.

Jak wygląda część pisemna

CKE nie publikuje arkuszy pisemnych INF.03 (test jest elektroniczny), więc typologię znamy z arkuszy pokrewnej kwalifikacji EE.09 (2021–2025), informatora i banków pytań. Proporcje pytań JS: ok. 40 % warunki i operatory, 30 % DOM/zdarzenia/konsola, 30 % napisy, tablice, obiekty i funkcje – tak zbudowany jest bank na końcu lekcji.

Dialekt egzaminacyjny: czytaj ES5 bez zdziwienia

Na egzaminie piszesz nowocześnie (to dobrze), ale czytać musisz kod sprzed dekady. Zestawienie:

// Ten sam program dwa razy. Wynik identyczny.
var cena = 120, rabat = 10;                 // dialekt egzaminacyjny
var doZaplaty = cena - cena * rabat / 100;
if (doZaplaty == 108) console.log('egzaminacyjnie: ' + doZaplaty);

const cena2 = 120, rabat2 = 10;             // współcześnie
const doZaplaty2 = cena2 - (cena2 * rabat2) / 100;
if (doZaplaty2 === 108) console.log(`współcześnie: ${doZaplaty2}`);

Strategia: cztery kroki na pytanie

Krok 1. Rozpoznaj typ pytania. Jest ich pięć i każdy ma swoją metodę:

Krok 2. Śledź kod, nie zgaduj. Dla pytań z kodem zapisz tabelkę: linia → zmienna → wartość. Zajmuje 30 sekund i eliminuje większość pomyłek „na oko”.

var x = 2;
x += 3;        // x = 5
x *= x;        // x = 25
x = x % 7;     // 25 % 7 = 4 (3·7 = 21, reszta 4)
console.log(x); // 4

Krok 3. Eliminuj dystraktory. Autorzy pytań budują odpowiedzi błędne według kilku schematów. Gdy je znasz, 4 opcje szybko zamieniają się w 2:

Krok 4. Sprawdź przypadkiem brzegowym. Do wyrażenia logicznego podstaw wartość dokładnie na granicy („od 18 lat” → 18) i wartość, która ma dać fałsz. Jeśli dwie odpowiedzi nadal wyglądają dobrze, różnią się właśnie tam.

Katalog błędnych przekonań

Każde pytanie JS na egzaminie celuje w konkretne błędne przekonanie. Poniżej te, które powtarzają się najczęściej – z mini-przykładem do sprawdzenia. Jeśli któryś wynik cię zaskakuje, to znak, że tu stracisz punkt.

Warunki i operatory

1. = to nie ==. if (x = 5) nie porównuje, lecz przypisuje; wartość wyrażenia to 5 (prawda), więc gałąź if zawsze się wykona.
2. == konwertuje typy, === nie. 3 == '3' → true, 3 === '3' → false. switch używa ===: var x = 10; case '10': nigdy nie pasuje.
3. Jedna zmienna, dwie wartości z && = nigdy. kolor == 'zielony' && kolor == 'niebieski' jest zawsze fałszywe. „Zielony lub niebieski” to ||.
4. && wiąże silniej niż ||. a && b || c czyta się (a && b) || c. „A i (B lub C)” wymaga nawiasów: a && (b || c).
5. Zakres domknięty to &&. „od 4000 do 4500” → p >= 4000 && p <= 4500. Z || warunek jest zawsze prawdziwy. „Poza zakresem” to p < 4000 || p > 4500.
6. „co najmniej 3” to >= 3, nie == 3 ani > 3. „powyżej 200” to > 200, „200 lub więcej” to >= 200.
7. x += 10 ⇄ x = x + 10; x++ ⇄ x += 1; x-- ⇄ x -= 1. Dystraktor: x === x + 1 to porównanie, nic nie zmienia.
8. % to reszta z dzielenia. n % 2 == 0 – parzyste, != 0 – nieparzyste. 25 % 7 → 4. Nie „procent”.
9. for ⇄ while tylko z inicjalizacją i krokiem. for (i = 0; i < 100; i += 10) ⇄ i = 0; while (i < 100) { …; i += 10; }. Bez i += 10 pętla jest nieskończona; i < 10 z i++ daje inne liczby.
10. Operator ?: to skrócony if/else. w = p >= 50 ? 'zdane' : 'oblane' – dla p = 50 daje 'zdane', bo >=.

console.log(3 == '3', 3 === '3');                    // true false
var kolor = 'zielony';
console.log(kolor == 'zielony' && kolor == 'niebieski'); // false – nigdy prawda
var zakupy = 250;
console.log(zakupy > 200 && (kolor == 'zielony' || kolor == 'niebieski')); // true
console.log(25 % 7, 10 % 2 == 0);                    // 4 true
var x = 0; x += 10; var y = 0; y++; y = y + 9;
console.log(x == y);                                 // true – równoważne

Typy i konwersje

11. '5' + 3 to '53', ale '5' - 3 to 2. Plus z napisem skleja; minus, razy, dziel konwertują na liczby. '5' + 3 - 1 → '53' - 1 → 52.
12. var x = "true"; to napis, nie wartość logiczna. typeof x → "string". Tak samo prompt() zawsze zwraca napis (albo null).
13. document.write(word.toLowerCase() == 'słoń') wypisze true, a nie napis – wynik porównania jest logiczny.
14. isNaN('') to false, bo pusty napis konwertuje się na 0. Number('abc') to NaN, parseInt('12abc') to 12.
15. [10, 9, 1].sort() daje [1, 10, 9] – sortowanie domyślne jest alfabetyczne.

console.log('5' + 3, '5' - 3, '5' + 3 - 1);   // 53 2 52
var x = 'true';
console.log(typeof x);                         // string
var word = 'Słoń';
console.log(word.toLowerCase() == 'słoń');     // true
console.log(isNaN(''), parseInt('12abc'));     // false 12
console.log([10, 9, 1].sort());                // [1, 10, 9]

Napisy, tablice, obiekty, funkcje

16. split → tablica, slice → fragment, includes → true/false, trim → bez spacji, replace → zamiana. 'JavaScript'.slice(2, 6) → 'vaSc' (od indeksu 2 do 6 bez 6).
17. new Array[1, 2, 3] jest niepoprawne – po konstruktorze są nawiasy okrągłe: new Array(1, 2, 3) albo po prostu [1, 2, 3].
18. length to właściwość, nie metoda (tab.length, bez nawiasów); ostatni indeks to length - 1.
19. Właściwość obiektu: obiekt.w lub obiekt['w']. obiekt->w, obiekt::w, obiekt:w to nie JavaScript. Zmiana: obiekt.x = 5.
20. Setter set j(nazwa) { this.jezyk = nazwa; } zapisuje do innej właściwości. this.j = nazwa wywołałby setter ponownie (rekurencja), return to getter.
21. Funkcja bez return zwraca undefined. function f(a, b, c) { return a * b; } ma trzy parametry (trzeci nieużywany) i zwraca liczbę – „dwóch wartości” zwrócić nie może.
22. Wynik funkcji przypisujesz tak: c = licz(a, b);, nie licz(a, b) = c;. c == licz(a, b) to porównanie.
23. przedmiot.nazwa() – nawiasy oznaczają wywołanie metody; bez nawiasów przedmiot.nazwa to odczyt właściwości (może być funkcją, ale nie zostanie wywołana).

console.log('JavaScript'.slice(2, 6));             // vaSc
console.log('a,b,c'.split(','), 'kot'.includes('o')); // ['a', 'b', 'c'] true
var t = [5, 2, 9]; t.push(1);
console.log(t.length, t[t.length - 1]);            // 4 1
var osoba = { imie: 'Ola', set jezyk(n) { this.mowi = n; } };
osoba.jezyk = 'PL';
console.log(osoba.mowi);                           // PL
function bezReturn(a, b) { var s = a + b; }
console.log(bezReturn(1, 2));                      // undefined

DOM, zdarzenia, konsola

24. Treść zmienia innerHTML/textContent, wartość pola – value, obraz – src, wygląd – style.x. document.getElementById(id).style.color = 'red' – nie .innerHTML, nie .color bez style, a nazwy CSS z myślnikiem piszemy jako fontSize, backgroundColor.
25. getElementById zwraca jeden element, getElementsByClassName/TagName/querySelectorAll – kolekcję. Kolekcja nie ma .style – trzeba [i] albo pętli. Dla klasy nomargin używasz getElementsByClassName('nomargin'), nie getElementById.
26. onclick zmienia stan, nie przełącza. onclick="…style.color='red'" – po pierwszym kliknięciu czerwony, po drugim nadal czerwony. „Na przemian” wymaga logiki if.
27. onclick="f" nic nie wywołuje, addEventListener('click', f()) wywołuje od razu. Atrybut potrzebuje nawiasów, addEventListener – samej nazwy.
28. prompt pobiera dane, alert tylko pokazuje, confirm zwraca true/false. console.log wypisuje w konsoli – służy do podglądu wartości zmiennych podczas testów, nie użytkownikowi.
29. onsubmit to zdarzenie formularza, które może zablokować wysłanie (return false / preventDefault). onchange, onblur, onkeyup dotyczą pola.
30. Skrypt dołącza <script src="plik.js"></script>, nie <link rel="script">; komentarz jednoliniowy to //, blokowy /* */ – nie #.
31. Tylko po stronie klienta wykonasz sprawdzanie danych w polu w czasie rzeczywistym; baza danych, autoryzacja, wysyłka e-mail to serwer.

// kod tylko do czytania – styl arkusza
var elementy = document.getElementsByClassName('wazne');
for (var i = 0; i < elementy.length; i++) {
  elementy[i].style.fontWeight = 'bold';   // WSZYSTKIE elementy klasy „wazne”
}
document.getElementById('obraz').src = 'b.png';   // podmiana obrazka – trwała, nie „na przemian”
var h = location.hostname;                         // nazwa hosta, np. localhost
document.getElementById('host').innerHTML = h;

var liczby = [4, 7, 10, 13];
var wynik = 0;
for (var i = 0; i < liczby.length; i++) {
if (liczby[i] % 2 == 1) wynik += liczby[i];
}
document.write(wynik);

Na egzaminie

Ściąga

Zadania

var a = 5, b = '5';
var c = a + b;
var d = a * b;
document.write(c + ' ' + d + ' ' + (a == b) + ' ' + (a === b));

var i = 10, suma = 0;
while (i > 0) { suma += i; i -= 3; }
document.write(suma + ' ' + i);

var t = ['a', 'b', 'c'];
t.push('d');
var s = t.join('-').toUpperCase();
document.write(s.length + ' ' + s.slice(2, 5));

var a = 5, b = '5';
var c = a + b;      // '55' – plus z napisem skleja
var d = a * b;      // 25 – mnożenie konwertuje
console.log(c + ' ' + d + ' ' + (a == b) + ' ' + (a === b)); // 55 25 true false

var i = 10, suma = 0;
while (i > 0) { suma += i; i -= 3; }  // i: 10, 7, 4, 1 → suma 22; potem i = -2 i koniec
console.log(suma + ' ' + i);          // 22 -2

var t = ['a', 'b', 'c'];
t.push('d');                          // ['a','b','c','d']
var s = t.join('-').toUpperCase();    // 'A-B-C-D' (7 znaków)
console.log(s.length + ' ' + s.slice(2, 5)); // 7 B-C

Bank pytań

Trzy zestawy w proporcjach egzaminu. Rozwiązuj każdy na czas: 10–12 pytań w 15 minut. Wynik poniżej 8/10 w zestawie oznacza, że wracasz do odpowiedniej lekcji z modułu 1 lub 2.

var x = 7;
if (x = 5) {
document.write('A');
} else {
document.write('B');
}

var a = 4;
a++;
a *= 2;
document.write(a);

var ocena = 5;
switch (ocena) {
case '5': alert('bdb'); break;
default: alert('inna');
}

var wynik = 0;
for (var i = 0; i < tab.length; i++) {
if (tab[i] % 2 != 0) wynik++;
}

var a = 3, b = '3';
document.write(a == b);
document.write(a === b);

var p = 50;
var w = p > 50 ? 'zdane' : 'oblane';

var el = document.getElementsByClassName('wazne');
for (var i = 0; i < el.length; i++) {
el[i].style.color = 'red';
}

var akapity = document.getElementsByTagName('p');
akapity.style.fontSize = '20px';

var s = 'Programista';
document.write(s.slice(3, 7));

var osoba = {
_wiek: 0,
set wiek(w) {
  ..........
}
};

function policz(a, b, c) {
return a + b;
}
var w = policz(2, 3, 'x');

function dodaj(a, b) {
var suma = a + b;
}
var w = dodaj(1, 2);
document.write(w);

var t = [5, 2, 9];
t.push(1);
document.write(t.length + ' ' + t[3]);

Test powtórkowy

var i = 0;
while (i < 5) {
i += 2;
}
document.write(i);

var o = { x: 1 };
o.y = 2;
document.write(o.x + o.y);

var z = "false";