JavaScript w kwalifikacji INF.03: najważniejsze zasady, przykłady i 153 powiązane pytania w banku.
JavaScript w zadaniach INF.03 rzadko występuje jako duży program. Częściej dostajesz kilkanaście linii i pytanie, co znajdzie się w zmiennej albo co pojawi się na ekranie. Punkt zdobywasz wtedy, gdy wykonasz ten kod w głowie linia po linii, razem z konwersjami typów i wartością zwracaną przez funkcję. Liczy się wynik konkretnego wyrażenia, a nie definicja pojęcia, dlatego każdy przykład poniżej ma podaną wartość końcową.
let, const i var: zasięg oraz przypisanie
var ma zasięg całej funkcji, a let i const zasięg bloku, czyli najbliższych klamer. Licznik zadeklarowany w for (var i = 0; i < 3; i++) istnieje także po pętli i ma wtedy wartość 3, bo warunek przestał być spełniony dopiero przy trzech. Ten sam licznik zapisany jako let poza pętlą nie istnieje i odwołanie do niego kończy się błędem ReferenceError.
const blokuje ponowne przypisanie, ale nie zawartość tablicy ani obiektu. Dla const lista = [1, 2] wywołanie lista.push(3) działa i daje [1, 2, 3], natomiast lista = [] przerywa program błędem TypeError. Odczyt zmiennej var przed jej deklaracją zwraca undefined, a let i const w tym samym miejscu dają ReferenceError, bo do linii z deklaracją są w tak zwanej martwej strefie.
Konwersje typów i porównanie == kontra ===
Operator + przy tekście łączy i liczy od lewej do prawej, więc 1 + 2 + "3" daje "33", a "1" + 2 + 3 daje "123". Minus, gwiazdka i ukośnik wymuszają liczbę, dlatego "5" - 2 daje 3, a "6" * "2" daje 12. Number("12,5") zwraca NaN, bo separatorem dziesiętnym jest kropka, natomiast parseInt("12abc") zwraca 12, choć Number("12abc") daje NaN. Osobno zapamiętaj, że Number("") oraz Number(" ") zwracają 0, a typeof null zwraca "object".
== porównuje po konwersji, === porównuje wartość i typ, dlatego "10" == 10 jest prawdą, "10" === 10 fałszem, a 0 == "" znowu prawdą. Wyjątkiem wartym zapamiętania jest null: null == undefined daje true, ale null == 0 daje false, więc reguła "null zachowuje się jak zero" nie działa. NaN nie równa się nawet sobie, więc NaN === NaN daje false, a do sprawdzenia służy Number.isNaN(x), bo globalne isNaN("abc") zwraca true nawet dla tekstu, który liczbą nigdy nie był.
Funkcje, funkcje strzałkowe i wartość zwracana
Deklaracja function suma(a, b) { return a + b; } i zapis const suma = (a, b) => a + b; dla suma(2, 3) dają ten sam wynik 5. Strzałka bez klamer zwraca wyrażenie automatycznie, a z klamrami trzeba dopisać return, bo (a, b) => { a + b; } zwraca undefined. Gdy strzałka ma zwrócić obiekt, klamry trzeba objąć nawiasami, czyli x => ({ v: x }).
Deklarację function można wywołać w linii wcześniejszej niż jej zapis i wynik będzie policzony, a funkcję przypisaną do const w tej samej sytuacji zatrzyma ReferenceError. Brakujący argument daje NaN, bo suma(2) liczy 2 + undefined. Nazwa funkcji bez nawiasów to sama funkcja jako wartość, a nazwa z nawiasami to jej natychmiastowe wywołanie i podstawienie wyniku.
Tablice: push, length, indexOf i pętle
Indeksy zaczynają się od zera, więc ostatni element to tab[tab.length - 1], a odczyt tab[tab.length] zwraca undefined. push dopisuje na koniec i zwraca nową długość, zatem dla tab = ["a", "b"] po tab.push("c") length wynosi 3. indexOf zwraca pozycję pierwszego trafienia albo -1 i porównuje tak jak ===, dlatego [1, 2, 3].indexOf("2") daje -1, a [1, 2, 3].includes("2") daje false z tego samego powodu.
Pętla for (let i = 0; i < tab.length; i++) daje indeks, a for (const el of tab) od razu wartość elementu. Warunek i <= tab.length wykona jeden obieg za dużo i odczyta undefined, co jest częstą pułapką w arkuszu. for..in chodzi po kluczach, więc dla tablicy trzyelementowej zwraca "0", "1" i "2" jako teksty, przez co i + 1 w takiej pętli dałoby "01" zamiast liczby.
Warunki, wartości fałszywe i pułapki w czytaniu kodu
W warunku fałszywe jest sześć wartości: false, 0, "", null, undefined oraz NaN. Każda inna jest prawdziwa, w tym tekst "0", pusta tablica i spacja zapisana jako " ". Osobno zapamiętaj, że w porównaniu luźnym [] == false daje true, bo pusta tablica zamienia się najpierw na pusty tekst, a potem na zero.
Pojedyncze = w warunku przypisuje, więc if (x = 5) zawsze wchodzi do bloku i przy okazji ustawia x na 5. switch dopasowuje przez ===, dlatego case 1 nie złapie wartości "1", a brak break przenosi wykonanie do kolejnego przypadku, przez co switch(2) z case 2 i case 3 bez break wykona oba. Czytając zadanie, zapisuj wartości zmiennych po każdej linii, bo pamięciowe śledzenie kodu jest głównym źródłem błędnych odpowiedzi.
DOM, addEventListener i walidacja formularza
document.getElementById("wiek") przyjmuje samo id, bez znaku #, a document.querySelector("#wiek") przyjmuje selektor CSS i zwraca pierwszy pasujący element albo null, gdy nic nie znajdzie. Z pola input czytasz .value, a z akapitu .textContent. Wartość .value jest zawsze tekstem, więc dodanie dwóch pól da "2" + "3", czyli "23", i dlatego do obliczeń trzeba użyć Number(pole.value).
Zdarzenie podpinasz przez przycisk.addEventListener("click", sprawdz), bez nawiasów po nazwie funkcji, bo z nawiasami wywołasz ją od razu przy wczytywaniu strony. Przy formularzu nasłuchuj "submit" i wywołaj event.preventDefault(), inaczej strona przeładuje się przed pokazaniem komunikatu. Sam warunek if (pole.value) nie wystarcza do sprawdzenia pustego pola, bo tekst " " jest prawdziwy, więc porównuj pole.value.trim() === "".
Z tym działem powiązano 153 pytania w banku INF.03. Na ekranie Wszystkie pytania wybierz jeden z tagów: javascript. Możesz wtedy przejrzeć zadania tylko z interesującego Cię obszaru.