W budowie
Pomiń nawigację
JavaScript w przeglądarce · Moduł 02

Zmienne, typy danych i konwersje liczb

Deklaracje let i const, łączenie tekstów oraz konwersje Number(), parseFloat() i parseInt().

  • 45 min
  • 16 slajdów
  • Notatki nauczyciela: N
  • Strona modułu: otwórz
Plan · 45 min

Co dziś robimy

  1. 12 minDeklarowanie zmiennych: let i const const (stała) — służy do deklarowania referencji lub wartości, która po przypisaniu nie…
  2. 12 minŁączenie tekstu i metody łańcuchowe tekst.trim() — usuwa tzw. białe znaki (spacje, tabulatory, znaki nowej linii) z początku…
  3. 12 minKonwersja tekstu na liczby: Number, parseFloat i parseInt Number(wartosc) — konwertuje cały przekazany łańcuch znaków na liczbę.
  4. 4 minĆwiczenia 16 zadań w module — wybierz 3–4 na lekcję
  5. 5 minPodsumowanie bilet wyjściowy i zadanie domowe
Atom 1 z 3 · ~12 min

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.
  • 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…
  • 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…
Kod · atom 1 · ~3 min

Jak to wygląda w kodzie

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ł";
}
Przykład na żywo · atom 1 · ~3 min

Uruchom i pokaż

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ł";
}
Sprawdzenie · atom 1 · ~2 min

Pytanie do klasy

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

Atom 2 z 3 · ~12 min

Łą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.

  • tekst.trim() — usuwa tzw. białe znaki (spacje, tabulatory, znaki nowej linii) z początku i z końca napisu.
  • 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).
  • 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.
Kod · atom 2 · ~3 min

Jak to wygląda w kodzie

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 + ")";
}
Przykład na żywo · atom 2 · ~3 min

Uruchom i pokaż

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 + ")";
}
Sprawdzenie · atom 2 · ~2 min

Pytanie do klasy

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

Atom 3 z 3 · ~12 min

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) .

  • 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)…
  • parseFloat(wartosc) — odczytuje liczbę zmiennoprzecinkową od początku napisu aż do pierwszego niepasującego znaku.
  • parseInt(wartosc, podstawa) — odczytuje liczbę całkowitą. Zawsze należy podawać drugi parametr oznaczający podstawę systemu liczbowego — w codziennych zadaniach jest to…
  • 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ół).
Kod · atom 3 · ~3 min

Jak to wygląda w kodzie

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ł";
}
Przykład na żywo · atom 3 · ~3 min

Uruchom i pokaż

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ł";
}
Sprawdzenie · atom 3 · ~2 min

Pytanie do klasy

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

Praca własna · ~4 min

Ćwiczenia w module (16)

Zamknięcie · ~3 min

Co zabrać z lekcji

  • const (stała) — służy do deklarowania referencji lub wartości, która po przypisaniu nie będzie zmieniana.
  • 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.
  • Kluczową zasadą pracy z formularzami w języku JavaScript jest pamiętanie, że właściwość .value dowolnego pola wejściowego (nawet zadeklarowanego jako ) zawsze…
Bilet wyjściowy: Co oznacza drugi argument przekazywany do funkcji parseInt(tekst, podstawa)?
Odpowiedź: b) Podstawę systemu liczbowego, najczęściej liczbę dziesięć
Hyżyk· Zmienne, typy danych i konwersje liczb moduł 1 / 1