W budowie
JavaScript w przeglądarce · Moduł 09

Obliczenia kosztów, rabaty i podsumowania

Arytmetyka w przeglądarce: mnożenie wartości, kalkulacja progów rabatowych, sumowanie zaznaczonych usług i formatowanie kwot toFixed.

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

Co dziś robimy

  1. 12 minPobieranie danych liczbowych i kalkulacja kwot Chociaż operator mnożenia ( * ) w JavaScript potrafi niejawnie przekształcić łańcuchy…
  2. 12 minWarunkowe naliczanie rabatów i zniżek Procenty w kodzie JavaScript zapisujemy w postaci ułamków dziesiętnych: rabat 10%…
  3. 12 minSumowanie usług dodatkowych i wielokrotnego wyboru W kodzie JavaScript pobieramy wszystkie aktualnie zaznaczone kontrolki za pomocą…
  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

Pobieranie danych liczbowych i kalkulacja kwot

Kalkulatory cenowe na stronach internetowych bazują na prostych operacjach arytmetycznych: mnożeniu liczby zamówionych jednostek przez stawkę jednostkową oraz sumowaniu pozycji składowych.

  • Chociaż operator mnożenia ( * ) w JavaScript potrafi niejawnie przekształcić łańcuchy cyfr na liczby, pominięcie jawnego rzutowania prowadzi do trudnych do wykrycia…
  • Końcowy wynik finansowy należy sformatować za pomocą metody kwota.toFixed(2) .
  • Zwraca ona łańcuch znaków z dokładnie dwoma miejscami po przecinku, gwarantując czytelną i profesjonalną prezentację sumy (np.
Kod · atom 1 · ~3 min

Jak to wygląda w kodzie

function obliczBilety() {
  const normalne = Number(document.getElementById('biletyNormalne').value);
  const ulgowe = Number(document.getElementById('biletyUlgowe').value);
  const wynik = document.getElementById('wynikBiletow');

  const kosztNormalne = normalne * 25;
  const kosztUlgowe = ulgowe * 18;
  const razem = kosztNormalne + kosztUlgowe;

  wynik.textContent = 'Do zapłaty: ' + razem.toFixed(2) + ' zł';
}
Przykład na żywo · atom 1 · ~3 min

Uruchom i pokaż

function obliczBilety() {
  const normalne = Number(document.getElementById('biletyNormalne').value);
  const ulgowe = Number(document.getElementById('biletyUlgowe').value);
  const wynik = document.getElementById('wynikBiletow');

  const kosztNormalne = normalne * 25;
  const kosztUlgowe = ulgowe * 18;
  const razem = kosztNormalne + kosztUlgowe;

  wynik.textContent = 'Do zapłaty: ' + razem.toFixed(2) + ' zł';
}
Sprawdzenie · atom 1 · ~2 min

Pytanie do klasy

Jaka metoda służy do sformatowania liczby z dokładnością do dwóch miejsc po przecinku w postaci tekstu?

Atom 2 z 3 · ~12 min

Warunkowe naliczanie rabatów i zniżek

W wielu systemach zamówień ostateczna cena zależy od spełnienia określonych kryteriów, takich jak wielkość zamówienia czy posiadanie karty lojalnościowej.

  • Procenty w kodzie JavaScript zapisujemy w postaci ułamków dziesiętnych: rabat 10% odpowiada mnożnikowi 0.10 , a 25% to 0.25 .
  • Kwotę zaoszczędzoną obliczamy przez pomnożenie ceny bazowej przez stawkę rabatu: kwotaZnizki = cenaBazowa * rabat , po czym odejmujemy ją od sumy początkowej.
  • Jeżeli rabaty mogą się kumulować (np.
  • upust za liczbę sztuk plus dodatkowy bonus za posiadanie karty stałego klienta), wygodnie jest zainicjować zmienną rabatu o wartości początkowej 0 , a następnie…
Kod · atom 2 · ~3 min

Jak to wygląda w kodzie

function obliczRabatHurtowy() {
  const sztuki = Number(document.getElementById('liczbaSztuk').value);
  const maKarte = document.getElementById('kartaKlienta').checked;
  const wynik = document.getElementById('wynikRabatu');

  const cenaBazowa = sztuki * 40;
  let rabat = 0;

  if (sztuki >= 20) {
    rabat += 0.20;
  } else if (sztuki >= 10) {
    rabat += 0.10;
  }

  if (maKarte) {
    rabat += 0.05;
  }

  const wartoscRabatu = cenaBazowa * rabat;
  const cenaKoncowa = cenaBazowa - wartoscRabatu;

  wynik.textContent = 'Cena: ' + cenaKoncowa.toFixed(2) + ' zł (rabat: ' + (rabat * 100) + '%, oszczędzasz ' + wartoscRabatu.toFixed(2) + ' zł)';
}
Przykład na żywo · atom 2 · ~3 min

Uruchom i pokaż

function obliczRabatHurtowy() {
  const sztuki = Number(document.getElementById('liczbaSztuk').value);
  const maKarte = document.getElementById('kartaKlienta').checked;
  const wynik = document.getElementById('wynikRabatu');

  const cenaBazowa = sztuki * 40;
  let rabat = 0;

  if (sztuki >= 20) {
    rabat += 0.20;
  } else if (sztuki >= 10) {
    rabat += 0.10;
  }

  if (maKarte) {
    rabat += 0.05;
  }

  const wartoscRabatu = cenaBazowa * rabat;
  const cenaKoncowa = cenaBazowa - wartoscRabatu;

  wynik.textContent = 'Cena: ' + cenaKoncowa.toFixed(2) + ' zł (rabat: ' + (rabat * 100) + '%, oszczędzasz ' + wartoscRabatu.toFixed(2) + ' zł)';
}
Sprawdzenie · atom 2 · ~2 min

Pytanie do klasy

W jaki sposób obliczyć 15-procentowy rabat od kwoty zapisanej w zmiennej cenaBazowa?

Atom 3 z 3 · ~12 min

Sumowanie usług dodatkowych i wielokrotnego wyboru

Gdy formularz pozwala na wybór dowolnej liczby opcji dodatkowych (np. usług serwisowych, ubezpieczenia czy akcesoriów), ręczne sprawdzanie każdego checkboxa osobną instrukcją if staje się nieefektywne.

  • W kodzie JavaScript pobieramy wszystkie aktualnie zaznaczone kontrolki za pomocą selektora pseudoklasy: document.querySelectorAll('.dodatek:checked') .
  • Zwraca on kolekcję NodeList , po której możemy przejść pętlą forEach .
  • Przed pętlą deklarujemy zmienną akumulatora (np.
  • let suma = kosztDiagnozy; ), a w każdym obiegu pętli odczytujemy wartość z pole.dataset.cena , rzutujemy ją na liczbę za pomocą Number() i dodajemy do sumy całkowitej.
Kod · atom 3 · ~3 min

Jak to wygląda w kodzie

function policzKosztSerwisu() {
  const kosztDiagnozy = 80;
  let suma = kosztDiagnozy;

  const wybraneUslugi = document.querySelectorAll('.dodatek:checked');

  wybraneUslugi.forEach(function(pole) {
    const cenaDodatku = Number(pole.dataset.cena);
    suma += cenaDodatku;
  });

  const wynik = document.getElementById('wynikSerwisu');
  wynik.textContent = 'Całkowity koszt naprawy: ' + suma.toFixed(2) + ' zł (wybrano dodatków: ' + wybraneUslugi.length + ')';
}
Przykład na żywo · atom 3 · ~3 min

Uruchom i pokaż

function policzKosztSerwisu() {
  const kosztDiagnozy = 80;
  let suma = kosztDiagnozy;

  const wybraneUslugi = document.querySelectorAll('.dodatek:checked');

  wybraneUslugi.forEach(function(pole) {
    const cenaDodatku = Number(pole.dataset.cena);
    suma += cenaDodatku;
  });

  const wynik = document.getElementById('wynikSerwisu');
  wynik.textContent = 'Całkowity koszt naprawy: ' + suma.toFixed(2) + ' zł (wybrano dodatków: ' + wybraneUslugi.length + ')';
}
Sprawdzenie · atom 3 · ~2 min

Pytanie do klasy

Jaka technika pozwala przechować sumę kosztów przy iterowaniu po zaznaczonych polach wyboru?

Praca własna · ~4 min

Ćwiczenia w module (16)

Zamknięcie · ~3 min

Co zabrać z lekcji

  • Kalkulatory cenowe na stronach internetowych bazują na prostych operacjach arytmetycznych: mnożeniu liczby zamówionych jednostek przez stawkę jednostkową oraz…
  • Procenty w kodzie JavaScript zapisujemy w postaci ułamków dziesiętnych: rabat 10% odpowiada mnożnikowi 0.10 , a 25% to 0.25 .
  • W kodzie JavaScript pobieramy wszystkie aktualnie zaznaczone kontrolki za pomocą selektora pseudoklasy: document.querySelectorAll('.dodatek:checked') .
Bilet wyjściowy: Co zwróci selektor document.querySelectorAll('.dodatek:checked'), jeśli użytkownik nie zaznaczył żadnego pola?
Odpowiedź: d) Pustą kolekcję NodeList o właściwości length równej 0
Hyżyk· Obliczenia kosztów, rabaty i podsumowania moduł 1 / 1