INF.03 · JavaScript

Zmienne, typy danych i operatory w JavaScript

Tekst „7” to nie liczba 7

  • Kod → próba → wniosek
  • DOM i zdarzenia
  • Własny projekt

Po tej lekcji: Dobierzesz typ i operator oraz bezpiecznie przeliczysz wartość z pola formularza.

const i let: co może się zmienić?

Zacznij od const. Gdy potrzebujesz ponownego przypisania, użyj let. const blokuje przypisanie do tej samej nazwy, ale nie zamraża zawartości obiektu ani tablicy: const filmy = []; filmy.push("Kosmos") działa. Nie używaj var w nowych przykładach: ma zasięg funkcji zamiast bloku i inne reguły podnoszenia deklaracji.

Jakie dane przechowujesz?

string to napis, number to zwykłe liczby (całkowite i ułamkowe w jednym typie Number), boolean to true/false. undefined oznacza m.in. brak przypisanej wartości, null — celowo ustawiony brak. Obiekt ma właściwości, tablica uporządkowane elementy od indeksu 0. typeof [] daje "object"; tablicę rozpoznaje Array.isArray. Jest też bigint dla dużych liczb całkowitych, np. 9007199254740993n; nie mieszaj go w działaniach z Number. Symbol poznasz później.

Operatory, które trzeba odróżniać

= przypisuje. === i !== porównują bez konwersji typów, == może je konwertować. + dodaje liczby albo łączy napisy; -, *, / liczą, % daje resztę, ** potęgę. >, >=, <, <= porównują, && to i, || lub, ! zaprzeczenie. += aktualizuje wartość, ++ zwiększa o 1. Nawiasy pokazują zamierzoną kolejność działań.

Operatory: znak, znaczenie i wynik

ZapisZnaczeniePrzykład i wynik
+Dodawanie lub łączenie napisów2 + 3 →5; "2" + 3 →"23"
-Odejmowanie7 - 2 →5
*Mnożenie3 * 4 →12
/Dzielenie7 / 2 →3.5
%Reszta z dzielenia7 % 2 →1
**Potęgowanie (dwie gwiazdki)3 ** 2 →9
===, !==Porównanie bez konwersji7 === "7" →false
>, >=, <, <=Porównanie wielkości7 >= 7 →true
&&, ||, !I, lub, zaprzeczenietrue && false →false
=, +=, ++Przypisanie, dodaj i przypisz, zwiększlet n = 2; n += 3; n++; →6

Wartość z input jest napisem

value pobiera tekst. Najpierw sprawdź pusty tekst po trim(), dopiero Number(tekst). Number("") daje 0, a Number("12abc") daje NaN. Number.isFinite wykrywa NaN i nieskończoność; Number.isInteger sprawdza pełne sztuki. parseInt("12abc",10) daje 12, więc nie zastępuje walidacji całego pola. Number ma ograniczoną precyzję: 0.1+0.2 nie jest dokładnie 0.3. W projekcie ceny trzymamy jako całkowite grosze.

Najpierw krótki przykład, potem cały projekt

Każdy krótki przykład uruchamiaj osobno: w oddzielnym pliku skrypt.js lub na nowej pustej stronie. Nie doklejaj kilku przykładów z tym samym const do jednego pliku, bo ponowna deklaracja tej samej nazwy jest błędem. Przykłady konsolowe pokażą wynik w F12 → Console. Przy przykładach DOM najpierw utwórz wskazane elementy HTML i podłącz skrypt z defer. Fragment wymagający gotowego projektu jest tak oznaczony — wykonuj go w jego kontekście, nie jako pustą stronę.

const, let i typy: nazwa to nie wartość

Najpierw ustal, co przechowujesz. Zwykła zmienna nie wymaga podania typu przed nazwą. Typ ma przechowywana wartość.

Podstawowa forma: const nazwa = wartosc; albo let nazwa = wartosc;

typy-js.jsjavascript
const tytul = 'Kosmos';
let liczbaBiletow = 2;
const cena = 12.99;
const dostepny = true;
const brakWyboru = null;
let jeszczeNieUstawione;
console.log(typeof tytul);
console.log(typeof liczbaBiletow);
console.log(typeof jeszczeNieUstawione);
liczbaBiletow += 1;
console.log(liczbaBiletow);
Wynik
string
number
undefined
3
  1. string to napis, number liczby zwykłe (także ułamkowe), boolean true/false. null oznacza ustawiony brak wartości, undefined m.in. brak przypisanej wartości.
  2. typeof jest operatorem odczytującym typ. Dla null historycznie zwraca "object", więc null sprawdzaj przez === null.
  3. += 1 znaczy odczytaj dotychczasową liczbę i dodaj 1. const zablokowałoby ponowne przypisanie do liczbaBiletow.
  4. Są też obiekty i tablice, bigint dla dużych pełnych liczb oraz symbol. Podstawy tablic zobaczysz w następnym przykładzie; nie mieszaj BigInt i Number w jednym działaniu.

Tablica, obiekt i indeks od zera

Lista przechowuje kolejno kilka wartości, obiekt grupuje nazwane właściwości filmu. Nawiasy [] i {} mają tu różne zadania.

Podstawowa forma: const lista = [wartosc1, wartosc2];, const obiekt = { klucz: wartosc };

tablica-js.jsjavascript
const filmy = ['Ocean', 'Kosmos'];
const film = { tytul: 'Las', rok: 2025 };
filmy.push('Podróż');
console.log(filmy[0]);
console.log(filmy.length);
console.log(film.tytul);
console.log(Array.isArray(filmy));
Wynik
Ocean
3
Las
true
  1. filmy[0] odczytuje pierwszy element. length jest liczbą elementów; nie wywołujesz go przez ().
  2. push jest metodą tablicy dodającą element na końcu. const nie zamraża zawartości tablicy, dlatego to wywołanie działa.
  3. film.tytul odczytuje właściwość o nazwie tytul. Równoważnie możesz użyć film["tytul"].
  4. Array.isArray sprawdza, czy wartość jest tablicą. typeof tablicy zwróciłoby "object", więc nie wystarczy.

Konwersja: napis z pola nie staje się liczbą sam

Wartość input.value jest napisem. Plus z napisem potrafi skleić tekst zamiast dodać liczby.

Podstawowa forma: Number(tekst) + sprawdzenie Number.isFinite(wynik)

number-js.jsjavascript
const tekst = '7';
const liczba = Number(tekst);
console.log(tekst + 2);
console.log(liczba + 2);
console.log(Number.isFinite(Number('abc')));
console.log(Number(''));
Wynik
72
9
false
0
  1. "7" + 2 daje napis "72"; Number("7") daje liczbę 7, więc po dodaniu 2 otrzymasz 9.
  2. Number("abc") daje NaN (not a number), a Number.isFinite dla niego zwraca false.
  3. Pusty napis zamienia się na 0. Przed konwersją sprawdź tekst.trim() === "", jeśli puste pole ma być błędem.
  4. trim() wywołujesz na napisie; oddaje nowy napis bez zewnętrznych białych znaków. Nie zmienia automatycznie pola formularza.

Jak czytać pozostałe zapisy w pełnym przykładzie

ZapisZnaczeniePrzykład użycia
=== i !==Porównanie bez konwersji typów. Przypisanie ma pojedyncze =.7 === "7" // false

Sprawdź w działaniu

Sprawdź mechanizm na działającym przykładzie

Zmień dane, przewidź wynik i wykonaj próbę. To działający JavaScript tego modelu, nie interpreter dowolnego wklejonego kodu.

Ta interakcja wymaga włączonego JavaScriptu.

Prześledź kod, potem zmień jedną rzecz

skrypt.jsjavascript
const tekst = "7";
const liczba = Number(tekst);
console.log(tekst + 2); // "72"
console.log(liczba + 2); // 9
console.log(liczba ** 2); // 49
console.log(tekst === liczba); // false
const filmy = ["Kosmos"];
filmy.push("Podróż"); // const nie zamraża tablicy
console.log(Array.isArray(filmy)); // true

Odtwórz przykład u siebie

Zapisz pokazany JavaScript w skrypt.js, a HTML w body zwykłego dokumentu z <!doctype html>, lang="pl", meta charset="UTF-8" i tytułem. W head podłącz <script src="skrypt.js" defer></script>. Przykłady z samym console.log możesz wykonać też w konsoli własnej pustej strony. Nie wklejaj nieznanych skryptów do konsoli zalogowanych serwisów. F12 → Console: sprawdź błędy; Sources: ustaw breakpoint, obejrzyj zmienne i przejdź krokowo.

Ćwiczenie z pomocą · samodzielna praca

Twoja próba

Porównaj wyniki dla "7", "", "7.5" i "abc". Wyjaśnij różnicę między konwersją a poprawnością danych.

Oczekiwany rezultat
Zapisz: dane → przewidywany wynik → wynik próby → wyjaśnienie.
Potrzebujesz pomocy? Rozwiązuj krok po kroku.
Krok 1 — pokaż podpowiedź

Zacznij od działającego przykładu i przewidź wynik bez uruchamiania.

Krok 2 — pokaż podpowiedź

Zmień jedną instrukcję lub jedną wartość. Obejrzyj Console i stan DOM.

Krok 3 — pokaż podpowiedź

Dodaj przypadek pusty albo graniczny. Jeśli wynik jest inny, ustaw breakpoint.

Otwórz tylko tyle podpowiedzi, ile potrzebujesz. Po każdym kroku wróć do zadania i sprawdź wynik.

Podsumowanie

Co warto zapamiętać

  1. Dobierzesz typ i operator oraz bezpiecznie przeliczysz wartość z pola formularza.
  2. Umiesz wskazać przyczynę wyniku w kodzie i sprawdzić przypadek graniczny.
  3. Quiz i dodatkowe zadania są w biurku; kod ocenia nauczyciel.

Dalej na swoim koncie

Rozgrzewki, quiz i zadania są w biurku ucznia.

Teoria jest otwarta dla wszystkich. Żeby rozwiązywać zadania, zapisywać szkice i widzieć swój postęp, zaloguj się.

Zaloguj się →
Źródła i dalsza nauka