Liczby, operatory i konwersja typów

Prawie każde zadanie praktyczne INF.03 ze skryptem JavaScript coś liczy: koszt paliwa, cenę zabiegów, liczbę puszek farby, ratę kredytu. Dane przychodzą z formularza jako napisy, więc zanim policzysz, musisz je zamienić na liczby – a potem wynik zaokrąglić i wypisać w dokładnie takim formacie, jakiego żąda arkusz. W tej lekcji poznasz operatory arytmetyczne, ich skrócone wersje (ulubiony temat części pisemnej), obiekt Math i trzy sposoby konwersji napisu na liczbę.

Operatory arytmetyczne

Kolejność jak w matematyce: najpierw **, potem *, /, %, na końcu + i -. Nawiasy zmieniają kolejność. Gdy masz wątpliwości, dodaj nawiasy – to nic nie kosztuje, a kod łatwiej czytać.

console.log(2 + 3 * 4);
console.log((2 + 3) * 4);
console.log(10 % 3);

console.log(2 + 3 * 4);        // 14 – mnożenie najpierw
console.log((2 + 3) * 4);      // 20
console.log(7 / 2);            // 3.5 – nie ma dzielenia całkowitego
console.log(7 % 2);            // 1 – reszta
console.log(10 % 5);           // 0 – dzieli się bez reszty
console.log(2 ** 3);           // 8
console.log(1 / 0);            // Infinity – dzielenie przez zero nie rzuca błędu

Reszta z dzielenia % – do czego służy

Operator % wraca na egzaminie częściej, niż się wydaje. Trzy zastosowania:

• parzystość: n % 2 === 0 oznacza liczbę parzystą (pętla sumująca „liczby parzyste” to typowe pytanie z arkuszy EE.09),
• cykliczne liczenie: (indeks + 1) % 7 daje 1, 2, …, 6, 0 – zawijanie galerii zdjęć (lekcja Stan aplikacji),
• rozkład na jednostki: sekundy % 60 to sekundy „po minucie”, liczba % 2 to ostatnia cyfra binarna (konwersja na system dwójkowy z arkusza ze stycznia 2025, lekcja Pętle).

Dzielenie całkowite

JavaScript nie ma osobnego operatora dzielenia całkowitego (jak // w Pythonie czy div). Używasz Math.floor(a / b) dla liczb dodatnich albo Math.trunc(a / b), które ucina część ułamkową także dla ujemnych.

const sekundy = 3725;
console.log(Math.floor(sekundy / 60), "min", sekundy % 60, "s");   // 62 min 5 s
console.log(Math.floor(sekundy / 3600), "h");                       // 1 h

Operatory skrócone i inkrementacja

Zapis suma = suma + 5 skraca się do suma += 5. Każdy operator arytmetyczny ma wersję z =:

let licznik = 0;
licznik++;             // 1
licznik += 10;         // 11
licznik *= 2;          // 22
licznik -= 2;          // 20
licznik /= 4;          // 5
console.log(licznik);

x++ i ++x oba zwiększają x o 1. Różnica pojawia się tylko, gdy użyjesz ich wewnątrz większego wyrażenia: x++ najpierw zwraca starą wartość, potem zwiększa; ++x najpierw zwiększa. W samodzielnej linii (licznik++;) nie ma różnicy – i tak najczęściej będziesz tego używać.

let a = 5;
let b = a++;           // b dostaje 5, potem a staje się 6
let c = ++a;           // a staje się 7, c dostaje 7
console.log(a, b, c);  // 7 5 7

Równoważność zapisów – pytanie egzaminacyjne

Część pisemna lubi pytać: „który kod jest funkcjonalnie równoważny?”. Metoda: policz wartość końcową w każdym wariancie. Nie czytaj „na oko”.

x = 0;
x += 10;

let x = 0; x += 10;                    console.log("oryginał:", x);
let a = 0; a--; a *= 9;                console.log("A:", a);
let b = 0; b++; b = b + 9;             console.log("B:", b);
let c = 10; c = c + 10;                console.log("C:", c);
let d = 0; d = d + 1; d *= 9;          console.log("D:", d);

Liczby ułamkowe nie są dokładne

Komputer zapisuje liczby binarnie, a 0.1 w systemie dwójkowym jest ułamkiem okresowym – jak 1/3 w dziesiętnym. Stąd słynny wynik:

console.log(0.1 + 0.2);             // 0.30000000000000004
console.log(0.1 + 0.2 === 0.3);     // false!
console.log(19.99 * 3);             // 59.97 – tu akurat dobrze
console.log(1.1 * 3);               // 3.3000000000000003
console.log((1.1 * 3).toFixed(2));  // "3.30" – napis, zaokrąglony do 2 miejsc

liczba.toFixed(n) zaokrągla do n miejsc po przecinku i zwraca napis (żeby zachować zera na końcu, np. "5.00"). To idealne do wyświetlania cen. Jeżeli chcesz dalej liczyć, zamień wynik z powrotem na liczbę: Number(cena.toFixed(2)).

Obiekt Math

Math to wbudowany zbiór funkcji matematycznych. Wywołujesz je z kropką: Math.round(2.5).

console.log(Math.round(2.5), Math.ceil(2.1), Math.floor(2.9));

console.log(Math.round(2.5), Math.round(2.4), Math.round(-2.5));   // 3 2 -2
console.log(Math.ceil(2.1), Math.ceil(2.0), Math.ceil(-2.1));      // 3 2 -2
console.log(Math.floor(2.9), Math.floor(-2.1));                     // 2 -3
console.log(Math.trunc(-2.9), Math.abs(-7));                        // -2 7
console.log(Math.max(3, 9, 4), Math.min(3, 9, 4));                  // 9 3

„Zaokrąglona w górę” to zawsze Math.ceil

Arkusz ze stycznia 2023 (INF.03-01-23.01) kazał obliczyć liczbę puszek farby: powierzchnia podzielona przez 4 m², „zaokrąglona w górę do liczby naturalnej”. Dla 37 m² potrzebujesz 9,25 puszki, czyli 10 – Math.round dałoby 9 i kryterium przepada. Słowa-klucze w arkuszu: „w górę”, „co najmniej” → ceil; „w dół”, „pełnych” → floor; „do najbliższej” → round.

const powierzchnia = 37;
const puszki = Math.ceil(powierzchnia / 4);
console.log("Liczba potrzebnych puszek:", puszki);   // 10

Losowanie

Math.random() zwraca liczbę od 0 (włącznie) do 1 (wyłącznie), np. 0.4213. Żeby dostać liczbę całkowitą z zakresu, mnożysz, ucinasz w dół i przesuwasz. Zapamiętaj wzór – wraca w zadaniach z losowym tekstem czatu (czerwiec 2024) i w grach:

// liczba całkowita od 0 do 8 (9 możliwości – jak indeksy tablicy 9 napisów)
const indeks = Math.floor(Math.random() * 9);
console.log("Indeks:", indeks);

// rzut kostką: od 1 do 6
const kostka = Math.floor(Math.random() * 6) + 1;
console.log("Kostka:", kostka);

// ogólnie: od min do max włącznie
const min = 10, max = 20;
const los = Math.floor(Math.random() * (max - min + 1)) + min;
console.log("Od 10 do 20:", los);

Konwersja napisu na liczbę

Z pola formularza, z prompt() i z atrybutów HTML dostajesz napisy. "120" to nie 120. Masz trzy narzędzia:

console.log(Number("42"), Number("42.5"), Number("42px"), Number(""));
console.log(parseInt("42.9"), parseInt("42px"), parseInt("abc"));
console.log(parseFloat("42.9"), parseFloat("19.99 zł"), parseFloat("3,5"));
console.log(+"7", typeof +"7");          // skrót: jednoargumentowy plus = Number()

Który wybrać?

• parseFloat – domyślnie w zadaniach egzaminacyjnych: toleruje spacje i śmieci na końcu, zachowuje ułamek. parseFloat("19.99") → 19.99.
• parseInt – gdy wartość ma być całkowita (liczba sztuk, rat). Uwaga: parseInt("3.9") daje 3 bez zaokrąglania.
• Number – najściślejszy; pusty napis daje 0, a cokolwiek nieliczbowego – NaN. Dobry do walidacji.
• Dla pól type="number" i type="range" istnieje też właściwość pole.valueAsNumber, która od razu zwraca liczbę (lub NaN dla pustego pola) – lekcja Odczyt kontrolek formularza.

Dlaczego "5" + 3 to "53", a "5" - 3 to 2

Operator + ma dwa znaczenia. Jeśli którakolwiek strona jest napisem, + skleja (a liczbę zamienia na napis). Pozostałe operatory (-, *, /, %) działają tylko na liczbach, więc same zamieniają napisy na liczby. To najczęstsza przyczyna złych wyników na egzaminie: dwie wartości z formularza dodane bez konwersji dają sklejony napis.

console.log("5" + 3);
console.log("5" - 3);
console.log("5" * "2");

Przewidź wynik każdej linii, zapisz, a dopiero potem uruchom:

console.log("5" + 3);        // "53"  – sklejenie
console.log("5" - 3);        // 2     – konwersja na liczbę
console.log("5" * "2");      // 10
console.log("10" / "4");     // 2.5
console.log(true + 1);       // 2     – true to 1 w arytmetyce
console.log(7 % 2);          // 1
console.log(1 + 2 + "3");    // "33"  – od lewej: 3, potem 3 + "3"
console.log("1" + 2 + 3);    // "123" – od lewej: "12", potem "123"

Ostatnie dwie linie pokazują regułę: wyrażenie jest liczone od lewej do prawej, a + zmienia znaczenie w momencie, gdy napotka napis.

NaN – nieudane obliczenie

NaN („Not a Number”) to wartość typu number, która oznacza „to nie jest poprawna liczba”. Powstaje, gdy konwersja się nie uda (Number("abc")) albo działanie nie ma sensu (0 / 0, "abc" * 2). Dwie własności, które zaskakują:

• NaN zaraża: każde działanie z NaN daje NaN – NaN + 5 to NaN,
• NaN nie jest równe niczemu, nawet sobie: NaN === NaN to false. Do sprawdzania służy Number.isNaN(x) (ścisłe) albo starsze isNaN(x), które najpierw konwertuje argument.

const zle = Number("abc");
console.log(zle, typeof zle);            // NaN number
console.log(zle + 5);                    // NaN – zaraża dalsze obliczenia
console.log(zle === NaN);                // false – tak NIE sprawdzaj
console.log(Number.isNaN(zle));          // true – tak sprawdzaj
console.log(isNaN("abc"), isNaN("12"));  // true false – isNaN najpierw konwertuje

W zadaniu praktycznym NaN w wyniku („Koszt: NaN zł”) oznacza zwykle puste pole albo literówkę w id. Walidacja „Wprowadź poprawne dane.” (styczeń 2025) to właśnie sprawdzenie isNaN lub pustego pola – lekcja Walidacja formularzy.

Liczba na napis

Czasem potrzebujesz odwrotnej konwersji – np. żeby policzyć cyfry albo sformatować wynik:

const cena = 1234.5;
console.log(String(cena), typeof String(cena));   // "1234.5" string
console.log(cena.toString());                      // to samo
console.log(cena + "");                            // skrót: sklejenie z pustym napisem
console.log(cena.toFixed(2));                      // "1234.50" – zawsze 2 miejsca
console.log((10).toString(2));                     // "1010" – zapis dwójkowy
console.log(parseInt("1010", 2));                  // 10 – z dwójkowego na dziesiętny

Na egzaminie

Ściąga

Zadania

console.log(10 / 4);
console.log(10 % 4);
console.log(2 ** 4);
console.log("10" + 4);
console.log("10" - 4);
console.log("10" * "2");
console.log(true + true);
console.log(Number("12abc"));
console.log(parseInt("12abc"));
console.log(1 + "1" - 1);

console.log(10 / 4);            // 2.5   (number)
console.log(10 % 4);            // 2     (number)
console.log(2 ** 4);            // 16    (number)
console.log("10" + 4);          // "104" (string) – sklejenie
console.log("10" - 4);          // 6     (number) – minus konwertuje
console.log("10" * "2");        // 20    (number)
console.log(true + true);       // 2     (number) – true liczy się jako 1
console.log(Number("12abc"));   // NaN   (number) – Number wymaga całego napisu
console.log(parseInt("12abc")); // 12    (number) – parseInt czyta od początku
console.log(1 + "1" - 1);       // 10    (number) – "11" po sklejeniu, potem 11 - 1

// Zestaw 1 – napisy jak z pola formularza
const kwotaTekst = "250";
const kursTekst = "4.32";

const kwotaPln = parseFloat(kwotaTekst);   // konwersja OD RAZU przy odczycie
const kurs = parseFloat(kursTekst);
const kwotaEur = kwotaPln / kurs;          // 57.87037…

console.log(kwotaPln + " zł = " + kwotaEur.toFixed(2) + " EUR");

// Zestaw 2
const kwotaPln2 = parseFloat("1000");
const kurs2 = parseFloat("4.5");
console.log(kwotaPln2 + " zł = " + (kwotaPln2 / kurs2).toFixed(2) + " EUR");

// 1. kostka: random * 6 daje [0, 6), floor daje 0–5, +1 daje 1–6
const kostka1 = Math.floor(Math.random() * 6) + 1;
const kostka2 = Math.floor(Math.random() * 6) + 1;
console.log("Kostki: " + kostka1 + " i " + kostka2 + ", suma: " + (kostka1 + kostka2));

// 2. indeks 0–8: 9 możliwości, więc mnożnik 9, bez przesunięcia
const indeksOdpowiedzi = Math.floor(Math.random() * 9);
console.log("Indeks odpowiedzi:", indeksOdpowiedzi);

// 3. od -10 do 30 włącznie: 41 możliwości (30 - (-10) + 1), przesunięcie o -10
const temperatura = Math.floor(Math.random() * 41) - 10;
console.log("Temperatura:", temperatura);

// Kalkulator puszek farby – 1 puszka = 4 m², zaokrąglenie w górę
const powierzchniaTekst = "37";                 // tak przyjdzie z pola formularza
const powierzchnia = parseFloat(powierzchniaTekst);   // kryterium 2
const metrowNaPuszke = 4;
const liczbaPuszek = Math.ceil(powierzchnia / metrowNaPuszke);   // kryteria 3 i 4

console.log("Liczba potrzebnych puszek: " + liczbaPuszek);       // kryterium 5

// Test na dwóch kolejnych zestawach danych – tak robi egzaminator
console.log("Liczba potrzebnych puszek: " + Math.ceil(parseFloat("40") / 4));   // 10
console.log("Liczba potrzebnych puszek: " + Math.ceil(parseFloat("41") / 4));   // 11

const sekundyRazem = 3725;

const godziny = Math.floor(sekundyRazem / 3600);          // 1
const minuty = Math.floor((sekundyRazem % 3600) / 60);    // reszta po godzinach, w minutach: 2
const sekundy = sekundyRazem % 60;                        // 5

console.log(godziny + " h " + minuty + " min " + sekundy + " s");

// Format 01:02:05 – String(n).padStart(2, "0") dopisuje zero z przodu do długości 2
const hh = String(godziny).padStart(2, "0");
const mm = String(minuty).padStart(2, "0");
const ss = String(sekundy).padStart(2, "0");
console.log(hh + ":" + mm + ":" + ss);

// Testy
console.log(Math.floor(59 / 3600), Math.floor((59 % 3600) / 60), 59 % 60);           // 0 0 59
console.log(Math.floor(3600 / 3600), Math.floor((3600 % 3600) / 60), 3600 % 60);     // 1 0 0
console.log(Math.floor(86399 / 3600), Math.floor((86399 % 3600) / 60), 86399 % 60);  // 23 59 59

Test powtórkowy

var x = 7;
x += 3;
x *= 2;

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

var cena = 2.5;
console.log(cena.toFixed(2) + 1);