MODUŁ 09

Obliczenia kosztów, rabaty i podsumowania

PPrezentacja dla nauczyciela

Tworzenie interaktywnych kalkulatorów wycen, koszyków zakupowych i konfiguratorów usług to jedno z najczęstszych zadań programistycznych. W tym module opanujesz precyzyjne operacje na kwotach, naliczanie progów rabatowych oraz dynamiczne sumowanie wielu zaznaczonych pozycji.

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. Wartości pobierane z kontrolek formularza zawsze odczytujemy jako tekst, dlatego pierwszym krokiem skryptu musi być konwersja na typ liczbowy za pomocą Number() lub parseFloat().

Chociaż operator mnożenia (*) w JavaScript potrafi niejawnie przekształcić łańcuchy cyfr na liczby, pominięcie jawnego rzutowania prowadzi do trudnych do wykrycia błędów, gdy w kolejnym kroku zechcemy dodać do siebie dwie kwoty (operator + zinterpretuje je jako łączenie tekstów).

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. 68.00 zł zamiast 68 zł lub wartości z drobnymi niedokładnościami zmiennoprzecinkowymi).

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ł';
}

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

Metoda round(2) dostępna na obiekcie liczby Metoda toFixed(2) wywołana na zmiennej numerycznej Metoda formatCurrency(2) z biblioteki standardowej Metoda parseDecimal(2) konwertująca tekst na ułamek

2. Co stanie się, gdy zmienna przechowująca liczbę sztuk zostanie pomnożona przez cenę jednostkową, jeśli obie były typu string zawierającego cyfry?

Zostanie zgłoszony błąd SyntaxError uniemożliwiający uruchomienie Operator mnożenia połączy oba teksty w jeden długi łańcuch znaków Przeglądarka dokona niejawnej konwersji na liczby i zwróci poprawny iloczyn Wynikiem mnożenia zawsze będzie specjalna wartość logiczna false

3. Dlaczego pomimo niejawnej konwersji przy mnożeniu zaleca się zawsze jawne rzutowanie Number(pole.value)?

Ponieważ jawne rzutowanie zapobiega błędom przy operatorze dodawania, który skleja stringi Ponieważ bez jawnego rzutowania silnik przeglądarki wyłącza obsługę stylów CSS Ponieważ jawna konwersja jest wymagana do poprawnego odczytania właściwości id Ponieważ metoda toFixed nie działa na wynikach operacji arytmetycznych w JavaScript

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. Do wyznaczenia stawki rabatowej stosuje się instrukcje warunkowe if / else if / else.

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 zwiększać ją za pomocą operatora += po spełnieniu każdego z warunków.

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ł)';
}

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

Zapisując wyrażenie cenaBazowa * 15 Obliczając różnicę cenaBazowa - 15 Stosując zapis cenaBazowa % 15 Zapisując wyrażenie cenaBazowa * 0.15

5. Jak zapisać warunek sprawdzający, czy liczba sztuk mieści się w przedziale od 10 do 49 włącznie?

Za pomocą zapisu sztuki >= 10 && sztuki <= 49 Stosując zapis warunkowy 10 <= sztuki <= 49 Korzystając z operatora sztuki between(10, 49) Używając alternatywy sztuki >= 10 || sztuki <= 49

6. Jeżeli zamówienie kwalifikuje się do rabatu 10%, a posiadacz karty otrzymuje dodatkowe 5%, to jak ustalić łączną zniżkę w zmiennej let rabat = 0?

Przypisując kolejno wartości rabat = 0.10, a w kolejnej instrukcji rabat = 0.05 Zwiększając wartość zmiennej za pomocą operatora dodawania i przypisania += Mnożąc zmienną przez oba ułamki w postaci rabat = 0.10 * 0.05 Wywołując metodę Math.max(0.10, 0.05) w celu wyboru pojedynczej zniżki

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. Wygodniejszym podejściem jest przechowywanie kosztu w atrybucie danych data-cena każdego znacznika HTML.

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. Taki mechanizm jest w pełni elastyczny i działa poprawnie niezależnie od tego, ile pozycji zaznaczy użytkownik.

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 + ')';
}

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

Zdefiniowanie zmiennej const suma = 0 przed pętlą i modyfikowanie jej wewnątrz Odczytanie właściwości document.forms.totalAmount bez konieczności pisania pętli Zdefiniowanie zmiennej let suma = 0 przed pętlą i zwiększanie jej wartości o koszt każdej opcji Zsumowanie identyfikatorów id zaznaczonych pól w tablicy tekstowej

8. W jaki sposób odczytać atrybut data-cena z zaznaczonego pola pobranego w pętli forEach?

Za pomocą właściwości pole.dataset.cena lub metody pole.getAttribute('data-cena') Poprzez bezpośrednie odwołanie do zmiennej globalnej dataCena Wywołując metodę pole.getDataAttributeNumber('cena') Za pomocą właściwości pole.valueDataCena zdefiniowanej w CSS

9. Co zwróci selektor document.querySelectorAll('.dodatek:checked'), jeśli użytkownik nie zaznaczył żadnego pola?

Wartość undefined powodującą natychmiastowe przerwanie programu Wartość logiczną false uniemożliwiającą wykonanie pętli Błąd wykonania skryptu NoSuchElementException Pustą kolekcję NodeList o właściwości length równej 0

Obliczenia kosztów, rabaty i podsumowania

Pobieranie danych liczbowych i kalkulacja kwot

Warunkowe naliczanie rabatów i zniżek

Sumowanie usług dodatkowych i wielokrotnego wyboru

Ćwiczenia