Cel lekcji
Uczeń potrafi:
- pobrać dane z formularza HTML
- sprawdzić poprawność danych
- zastosować instrukcję warunkową
- wykonać obliczenia
- wyświetlić wynik na stronie
Elementy potrzebne do wykonania zadania
1. Pobieranie danych z pola edycyjnego
document.getElementById("id_elementu").value;2. Sprawdzanie czy pole jest wypełnione
wartosc != ""3. Zamiana tekstu na liczbę
Number(wartosc);4. Tworzenie zmiennych
let nazwa = wartosc;5. Sprawdzanie wybranego przycisku radio
document.getElementById("id_elementu").checked;6. Instrukcja warunkowa
if (warunek) {
} else {
}7. Działania matematyczne
* mnożenie
+ dodawanie 8. Wyświetlanie wyniku na stronie
document.getElementById("id_elementu").innerHTML = "tekst";9. Łączenie tekstu z wartościami
"tekst " + zmienna + " tekst " + zmienna10. Funkcja uruchamiana przyciskiem
function nazwaFunkcji() {
}11. Wywołanie funkcji w HTML
<button onclick="nazwaFunkcji()">Oblicz</button>Zadanie
Napisz skrypt, który:
- pobiera szerokość i długość pomieszczenia
- sprawdza, czy oba pola zostały wypełnione
- oblicza pole powierzchni
- sprawdza wybrany typ panelu (radio button)
- oblicza koszt montażu na podstawie pola i ceny
- wyświetla wynik pod przyciskiem w odpowiednim formacie
- w przypadku braku danych wyświetla komunikat: „Wprowadź poprawne dane.”
Wskazówka
Najpierw sprawdź poprawność danych, następnie oblicz pole powierzchni, a potem na podstawie wybranego panelu wyznacz koszt.
Zadanie dodatkowe
Zmodyfikuj skrypt tak, aby:
- wynik był zaokrąglony do dwóch miejsc po przecinku
- pojawiał się komunikat, gdy nie wybrano żadnego typu panelu