MODUŁ 02

Zmienne, typy danych i konwersje liczb

PPrezentacja dla nauczyciela

W tym module opanujesz bezpieczne przechowywanie danych za pomocą let i const, łączenie i formatowanie napisów oraz jawną konwersję wartości tekstowych z pól formularza na liczby, bez której nie da się poprawnie wykonać obliczeń.

Deklarowanie zmiennych: let i const

W nowoczesnym standardzie języka JavaScript do przechowywania danych służą dwa słowa kluczowe:

const (stała) — służy do deklarowania referencji lub wartości, która po przypisaniu nie będzie zmieniana. W praktyce jest to domyślny wybór przy pobieraniu elementów z drzewa DOM (np. const przycisk = document.getElementById(...)) oraz dla stałych stawek podatku lub przeliczników.
let (zmienna blokowa) — stosujemy wtedy, gdy wiemy, że wartość zmiennej będzie ulegać zmianie w toku działania programu (np. suma naliczana w pętli, licznik kliknięć czy aktualny indeks wyświetlanego zdjęcia).

Zarówno const, jak i let posiadają tzw. zasięg blokowy (są widoczne tylko wewnątrz bloku kodu ograniczonego nawiasami klamrowymi { }), co zapobiega przypadkowemu nadpisaniu zmiennych o takich samych nazwach w innych częściach programu. Przestarzałe słowo kluczowe var nie posiadało zasięgu blokowego i w nowym kodzie nie jest zalecane.

Podstawowe typy wartości to tekst (string, ujmowany w cudzysłowy), liczba (number, zarówno liczby całkowite, jak i zmiennoprzecinkowe z kropką zamiast przecinka) oraz wartość logiczna (boolean — true lub false).

W poniższym przykładzie zdefiniowano stałą cenę produktu oraz zmienną przechowującą naliczoną zniżkę. Przetestuj uruchomienie programu i zmień wartość zniżki:

function pokazInformacje() {
    const produkt = "Aparat cyfrowy";
    const cenaBazowa = 1200;
    let znizka = 200;
    let cenaKoncowa = cenaBazowa - znizka;

    const wynik = document.getElementById("wynik");
    wynik.textContent = produkt + " — cena promocyjna: " + cenaKoncowa + " zł";
}

1. Czym różni się deklaracja zmiennej za pomocą słowa kluczowego const od słowa let?

Zmienna const nie pozwala na ponowne przypisanie nowej wartości po inicjalizacji Zmienna const ma zasięg globalny, a zmienna let jest zawsze zmienną lokalną Zmienna const przechowuje wyłącznie liczby, a let służy do zapisu tekstów Zmienna const jest widoczna wyłącznie wewnątrz pętli for oraz instrukcji if

2. Jaki zasięg widoczności posiadają zmienne deklarowane za pomocą słów kluczowych let oraz const?

Zasięg wyłącznie funkcyjny, ignorujący nawiasy klamrowe instrukcji warunkowych Zasięg blokowy, ograniczony do najbliższej pary otaczających nawiasów klamrowych Zasięg globalny, dzięki czemu są widoczne w każdym zewnętrznym pliku skryptu Zasięg modułowy, wymagający każdorazowo użycia słowa kluczowego export

3. Która z poniższych wartości w języku JavaScript reprezentuje typ logiczny (boolean)?

Napis w cudzysłowie tekstowym o treści prawda Dowolna dodatnia liczba całkowita większa od zera Jedno ze słów kluczowych true lub false bez cudzysłowu Obiekt reprezentujący element pobrany z drzewa DOM

Łączenie tekstu i metody łańcuchowe

Łączenie łańcuchów znaków (konkatenacja) odbywa się w JavaScripcie za pomocą operatora +. Jeżeli przynajmniej jeden ze składników jest tekstem, drugi zostanie automatycznie przekonwertowany na postać tekstową i doklejony na końcu. Na przykład wyrażenie "Cena: " + 50 + " zł" utworzy napis "Cena: 50 zł".

Z operacją tą wiąże się jednak częsty błąd: jeśli obie wartości są tekstami, operator + nie doda ich matematycznie, lecz sklei. Wyrażenie "10" + "20" da w wyniku "1020", a nie oczekiwane 30.

Do bezpiecznego przetwarzania danych tekstowych wprowadzanych przez użytkowników służą wbudowane metody obiektów String:

tekst.trim() — usuwa tzw. białe znaki (spacje, tabulatory, znaki nowej linii) z początku i z końca napisu. Niezbędna metoda przy sprawdzaniu, czy użytkownik nie wpisał w formularzu samych spacji.
tekst.toUpperCase() — zwraca kopię łańcucha znaków ze wszystkimi literami zamienionymi na wielkie (np. do ujednolicenia kodów pocztowych lub identyfikatorów).
tekst.toLowerCase() — zwraca kopię tekstu z małymi literami (np. do normalizacji adresów e-mail).

Przykład pobiera imię oraz nazwę miasta, czyści spacje metodą trim(), zamienia miasto na wielkie litery i składa gotowy komunikat.

Wpisz własne dane i sprawdź efekt w edytorze:

function formatujDane() {
    const imie = document.getElementById("poleImie").value.trim();
    const miasto = document.getElementById("poleMiasto").value.trim().toUpperCase();

    const wynik = document.getElementById("wynikTekst");
    wynik.textContent = "Użytkownik: " + imie + " (oddział: " + miasto + ")";
}

4. Jaki wynik da wykonanie operacji dodawania dwóch tekstów w postaci: napis 15 plus napis 25?

Liczbę całkowitą czterdzieści w zapisie dziesiętnym Błąd wykonania skryptu oznaczony jako TypeError Wartość specjalną NaN oznaczającą brak liczby Połączony ciąg znaków o zawartości tekstowej 1525

5. Do czego służy wbudowana metoda trim() wywoływana na zmiennej typu tekstowego?

Usuwa białe znaki, takie jak spacje, z początku i z końca tekstu Skraca podany tekst do określonej w nawiasie maksymalnej długości Zastępuje wszystkie małe litery w napisie ich wielkimi odpowiednikami Dzieli tekst na tablicę pojedynczych słów według znaku separatora

6. W jaki sposób można przekształcić wszystkie litery w zmiennej tekstowej na wielkie litery?

Wywołując metodę tekst toCapitalCase bez przekazywania parametrów Stosując wywołanie metody tekst toUpperCase z pustym nawiasem Przypisując do właściwości tekst upperCase wartość logiczną true Używając globalnej funkcji formatUpper z argumentem będącym tekstem

Konwersja tekstu na liczby: Number, parseFloat i parseInt

Kluczową zasadą pracy z formularzami w języku JavaScript jest pamiętanie, że właściwość .value dowolnego pola wejściowego (nawet zadeklarowanego jako <input type="number">) zawsze zwraca wartość typu tekstowego (string). Aby wykonać na niej operacje matematyczne (dodawanie, obliczanie podatku, sumowanie pozycji zamówienia), należy dokonać jawnej konwersji na typ liczbowy.

W języku JavaScript stosuje się trzy podstawowe metody konwersji:

Number(wartosc) — konwertuje cały przekazany łańcuch znaków na liczbę. Jeżeli w tekście znajdzie się jakikolwiek nieobsługiwany znak (np. spacja w środku lub litera), wynikiem będzie specjalna wartość NaN (Not a Number).
parseFloat(wartosc) — odczytuje liczbę zmiennoprzecinkową od początku napisu aż do pierwszego niepasującego znaku. Jest to najczęściej stosowana funkcja przy obliczeniach cen, wag czy wymiarów (np. parseFloat("49.50 zł") zwróci poprawnie liczbę 49.5).
parseInt(wartosc, podstawa) — odczytuje liczbę całkowitą. Zawsze należy podawać drugi parametr oznaczający podstawę systemu liczbowego — w codziennych zadaniach jest to system dziesiętny, czyli 10: parseInt(pole.value, 10).

Do zaokrąglania wyników służą metody obiektu Math: Math.round(liczba) (zaokrąglenie do najbliższej liczby całkowitej) oraz Math.floor(liczba) (zaokrąglenie w dół).

Kalkulator pobiera dwie kwoty netto, konwertuje je za pomocą parseFloat(), sumuje i powiększa o podatek VAT.

W edytorze poniżej przetestuj działanie z różnymi kwotami:

function obliczSume() {
    const cena1 = parseFloat(document.getElementById("cena1").value);
    const cena2 = parseFloat(document.getElementById("cena2").value);

    const sumaNetto = cena1 + cena2;
    const stawkaVat = 0.23;
    const sumaBrutto = Math.round(sumaNetto * (1 + stawkaVat) * 100) / 100;

    const wynik = document.getElementById("wynikKalkulatora");
    wynik.textContent = "Suma brutto do zapłaty: " + sumaBrutto + " zł";
}

7. Jakiego typu jest wartość zwracana przez właściwość value pola input o typie number?

Jest to zawsze wartość liczbowa całkowita lub zmiennoprzecinkowa Jest to obiekt reprezentujący węzeł kontrolki w strukturze DOM Jest to zawsze wartość tekstowa, wymagająca konwersji na liczbę Jest to wartość logiczna informująca o poprawności wpisanych danych

8. Która funkcja pozwala poprawnie odczytać kwotę ze znakami dziesiętnymi z tekstu 24.99 zł?

Funkcja Math round przekazana z wartością pola tekstowego Funkcja toFixed wywołana na elemencie pobranym z formularza Funkcja parseInt wywołana z drugim argumentem równym dziesięć Funkcja parseFloat przetwarzająca ciąg od początku do spacji

9. Co oznacza drugi argument przekazywany do funkcji parseInt(tekst, podstawa)?

Maksymalną dozwoloną liczbę cyfr po przecinku dziesiętnym Podstawę systemu liczbowego, najczęściej liczbę dziesięć Domyślną wartość liczbową zwracaną w przypadku wystąpienia błędu Numer indeksu w ciągu tekstowym, od którego ma się zacząć odczyt

Zmienne, typy danych i konwersje liczb

Deklarowanie zmiennych: let i const

Łączenie tekstu i metody łańcuchowe

Konwersja tekstu na liczby: Number, parseFloat i parseInt

Ćwiczenia