[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
- zmienna pierwszyWymiar musi być liczbą
- zmienna drugiWymiar musi być liczbą
- zmienna pierwszyWymiar musi być większa od zera.
- 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!