Wybierz stronę

[JS]Malowanie Pokoju

[JS]Malowanie Pokoju

„Malowanie pokoju” – E.14 – JavaScript

Dziś rozwiążemy wspólnie fragment zadania egzaminacyjnego z kwalifikacji E.14 z 2017 roku. Do wykonania mamy stronę wyglądającą jak obrazek powyżej. Strona ma umożliwiać obliczenie kosztu malowania pokoju o wymiarach wprowadzanych przez użytkownika. Do naszego rozwiązania wykorzystamy:

  • HTML5
  • CSS
  • JavaScript

OPIS ZADANIA

Przykład działania skryptu przedstawiony jest na rysunku powyżej. Skrypt powinien działać po stronie przeglądarki.

Jego zadaniem jest obliczenie ceny malowania pokoju, uwzględniając wytyczne:

  • Pokój ma plan prostokąta o wysokości 2,7 m
  • Powierzchnia okien i drzwi jest pomijana w obliczeniach
  • Cena malowania ścian wynosi 8 zł za metr kwadratowy
  • Nie jest wymagane, aby wyliczona cena była zaokrąglona

 Działanie skryptu:

  • Skrypt pobiera dane z dwóch pól edycyjnych ze strony kalkulator.html
  • Na podstawie danych oblicza całkowitą powierzchnię czterech ścian pokoju i wypisuje ją w tekście paragrafu, pod przyciskiem, według wzoru: „Powierzchnia całkowita ścian: ” <obliczona powierzchnia>
  • Na podstawie powierzchni oblicza koszt malowania i wypisuje poniżej według wzoru „Koszt
    malowania: ” <obliczony koszt> zł

Interfejs

Zacznijmy naszą pracę od interfejsu strony.  Wymienimy elementy języka HTML5, które będą nam potrzebne:

  •  Nagłówek H1
  • akapit x3
  • formularz z dwoma polami typu liczba(number) oraz przycisk

Podane poniżej elementy to absolutne minimum, które za chwilę rozwiniemy. Gotowy kod początkowy strony kalkulator.html poniżej.

Interfejs strony - baza do dalszych ćwiczeń

<!DOCTYPE html>
<html>
<head>
    <title>Malowanie ścian</title>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta name="keywords" content="">
</head>
<body>
<h1>Malowanie pokoju: 8zł za m<sup>2</sup></h1>
    <form > Wymiary pokoju w metrach:
        <input type="number">
        <input type="number">
        <input type="button" value="OBLICZ KOSZT"> </form>
    <p>Powierzchnia całkowita ścian: </p>
    <p>Koszt malowania: </p>
</body>
</html>

Usprawnienia

Atrybut pól typu number

Min umożliwi nam ustawienie minimalnej liczby jaką będzie można wybrać za pomocą kontrolek pola.

 <input type="number" min="1" >

Nazwy

W JavaScripcie będziemy chcieli odczytać wartości pól z formularza. Jedną z metod jest odwoływanie się do nazw formularza i jego pól. Dlatego nazwijmy nasz formularz i pola typu number.

<form name="dane"> Wymiary pokoju w metrach:
        <input type="number" min="1" name="pierwszyWymiar">
        <input type="number" min="1" name="drugiWymiar">

Identyfikatory

Do wyświetlania tekstów w akapitach wykorzystamy właściwość innerHTML, a elementy HTML pozyskiwać będziemy poprzez metodę getElementById() obiektu document. Dlatego należy nadać identyfikatory dla elementów, w których będziemy coś wyświetlać. Ja dodałem elementy liniowe ogólnego przeznaczenia(span), tak aby nie zmieniać całej treści akapitu, a tylko ten fragment, w którym pojawiać się będą wyniki.

Zdarzenia

Obliczenia wykonywane w JavaScript wywoływane będą po kliknięciu w przycisk, stąd dodajemy do niego obsługę zdarzenia onclick i wywołujemy funkcję sprawdz(), która zajmować się będzie obliczeniami.

Zawartość elementu body, po usprawnieniach

<h1>Malowanie pokoju: 8zł za m<sup>2</sup></h1>
    <form name="dane"> Wymiary pokoju w metrach:
        <input type="number" min="1" name="pierwszyWymiar">
        <input type="number" min="1" name="drugiWymiar">
        <input type="button" onclick="sprawdz()" class="guzik" value="OBLICZ KOSZT">
   </form>
    <p>Powierzchnia całkowita ścian: <span id="powierzchnia"></span></p>
    <p>Koszt malowania: <span id="koszt"></span></p>

Style

Do naszego przycisku dodałem klasę 'guzik’, która będzie kontrolowała jego wygląd. Zmieniłem tryb wyświetlania na blokowy, następnie nadałem szerokość i wysokość. Określiłem kolor tekstu i tła oraz dodałem obramowanie. Oczywiście możesz samodzielnie stworzyć swój wygląd przycisku, jednak sugeruj się tym, co widać na ilustracji zadania.

.guzik {
            display: block;
            width: 140px;
            height: 50px;
            color: white;
            background: #c0392b;
            border: 1px solid #c0392b;
        }

Skrypt

Przejdźmy do napisania funkcji sprawdz(), która sprawdzi poprawność danych, obliczy i wyświetli wyniki. Zadanie podzielimy na kilka części.

Wczytywanie danych

Aby dostać się do wartości pól formularza wykorzystamy właściwości obiektu document. Zaprezentowana konstrukcja odnosi się do formularza o nazwie ’dane’(pierwszy nawias kwadratowy) i jego pola o nazwie 'pierwszyWymiar’(drugi nawias kwadratowy), z którego pobieramy jego wartość(poprzez właściwość value).

W drugiej linijce przetwarzamy odczytane dane do postaci liczby rzeczywistej. Jeżeli w polu nie znajdowała się liczba nasza zmienna będzie przechowywała wartość ’NaN’ – czyli Not a Number(to nie jest liczba). Wykorzystamy to za chwilę przy weryfikacji obu pól. Podobnie należy postąpić z drugim polem.

var pierwszyWymiar = document.forms['dane']['pierwszyWymiar'].value;
pierwszyWymiar = parseFloat(pierwszyWymiar);

Zastanówmy się przez chwilę, jakie warunki muszą zostać spełnione, aby nasz skrypt mógł obliczyć powierzchnię oraz koszt malowania.

Po pierwsze w obu polach muszą znajdować się liczby. Po drugie, żadna z podanych wartości nie może być ujemna. Po trzecie żadna wartość nie może być równa 0. Uporządkujmy to

  1. zmienna pierwszyWymiar musi być liczbą
  2. zmienna drugiWymiar musi być liczbą
  3. zmienna pierwszyWymiar musi być większa od zera.
  4. zmienna drugiWymiar musi być większa od zera.

Jak sprawdzić czy zmienna przechowuje liczbę?

Krótkie przypomnienie: Odczytaliśmy wartość z pola formularza, a następnie za pomocą funkcji parseFloat() otrzymaliśmy albo liczbę rzeczywistą, albo wartość NaN. Wykorzystajmy to i sprawdzając funkcją isNaN() dowiemy się czy w obu zmiennych jest liczba, czy nie. W tej chwili mamy cztery osobne warunki, jak je połączyć? Zadaj sobie dodatkowe pytanie, czy wszystkie muszą być spełnione, czy wystarczy aby jeden z nich się nie zgadzał aby przerwać program?

Propozycja zapisania wszystkich warunków w jednej instrukcji warunkowej

if (isNaN(pierwszyWymiar) || isNaN(drugiWymiar) || pierwszyWymiar <= 0 || drugiWymiar <= 0) 
                alert("Podaj poprawne wymiary pokoju.");
            else {

Dalsza część pracy odbywać się będzie wewnątrz instrukcji else.

Obliczenia

Na początku zdefiniujemy zmienne, którym możemy przypisać stałe wartości, czyli wysokość pomieszczenia i cenę za metr kwadratowy. Następnie korzystając z wcześniej zdefiniowanych zmiennych obliczamy powierzchnię malowania i jego koszt.

var wysokosc = 2.7;
var cena = 8;
var powierzchnia = 2 * pierwszyWymiar * wysokosc + 2 * drugiWymiar * wysokosc;
var koszt = cena * powierzchnia;

Wyświetlanie

Do wyświetlenia naszych obliczeń wykorzystamy właściwość innerHTML, a elementy HTML pozyskamy poprzez metodę getElementById() obiektu document.

document.getElementById("powierzchnia").innerHTML = powierzchnia + "m<sup>2</sup>";
document.getElementById("koszt").innerHTML = koszt + " zł";

Ostatnie poprawki

Teraz wystarczy wszystko poskładać w całość i przetestować…Dokładnie przetestować. Na pewno zauważysz, że coś jest nie tak z wyświetlanymi liczbami. Proponuję w prosty sposób zmodyfikować obliczane wartości, tak aby wyświetlały nam się liczby z dokładnością do dwóch miejsc po przecinku. Nie jest to wymagane w zadaniu, jednak warto nauczyć się formatować wynik. Wykorzystamy metodę .toFixed(), która jako argument przyjmuje liczbę miejsc po przecinku, która ma się wyświetlać.  Metoda ta konwertuje liczbę na tekst(string) z zachowaniem tylu miejsc po przecinku ile otrzyma jako argument. Ważne jest również to, że niejako przy okazji zaokrągla nam otrzymany wynik. Wystarczy w dwóch miejscach zmodyfikować kod

powierzchnia = powierzchnia.toFixed(2);
koszt = koszt.toFixed(2);

Finał

Brawo, zadanie wykonane!

O autorze

Rafał

Moje główne zainteresowania to FIT: Fotografia Informatyka Technika

Pin It on Pinterest