71 Kezdőlap - Webszerkesztés - JavaScript - Testtömegindex (BMI)

Testtömegindex

számítása

Feladat

Készítsen testtömegindex számítására alkalmas webes felületet!

A testtömegindex (TTI, vagy BMI - body mass index) az ember testtömegéből és a méterben mért magasságából számított érték, mely felhívhatja a figyelmet az esetleges túlsúlyosságra vagy soványságra. Számítása a következő képlettel történik: Az így kapott eredmény pontos értelmezése egyebek mellett a Wikipedia oldalán is megtekinthető, azonban a feladat mostani megvalósításakor az alábbi egyszerűsített kiértékelés is alkalmazható:
BMI < 18 18 <= BMI <= 25 25 < BMI
sovány testalkat normál testsúly túlsúlyosság
1.
A feladat megvalósításának első lépéseként alakítson ki egy űrlapot az adatok beírásához, és az eredmény majdani megjelenítéséhez - például az alábbi kép mintájára: 2.
Ezt követően készítse el a testtömegindexet számító és megjelenítő függvényt. Oldja meg, hogy a függvény hívásához ne legyen szükség külön nyomógombra, hanem az adatok beírásával párhuzamosan az eredmény is folyamatosan aktualizálódjon. Ennek megvalósításához alkalmazza az input elemek paramétereként az onkeyup eseményvezérlőt, mely minden billentyűfelengedés után lefuttatja a meghívott függvényt.
Mi az a függvény?

<input ... onkeyup='szamol()'>

3.
Egészítse ki a programot azzal, hogy a testtömegindexet megjelenítő mező háttérszíne igazodjék a megjelenített számhoz: Ennek megvalósításához javascriptből az input elem .style.backgroundColor tulajdonságát lesz szükséges módosítania, például így:

document.urlap.bmi.style.backgroundColor = '#8F8'

4.
Továbbfejlesztés céljából érdemes lehet újabb sorral bővíteni az űrlapot, melyben 25-nél nagyobb testtömegindex esetén megjeleníthető a súlytöbblet - vagyis hogy hány kg-tól kellene megszabadulni az ideális testsúly eléréséhez. Fentiekre mutat mintát a következő ábra: Ennek kiszámításához belátható módon (az eredeti képlet átrendezése után) az alábbi formulából célszerű kiindulni:

súlytöbblet = kg - 25 * (cm/100)2

ahol a 25-ös érték az elérni kívánt testtömegindex felső határaként adódott.

5.
Természetesen a feladat másfajta megvalósításban is elkészíthető. A beírómezők helyett például használható range típusú párbeszédelem , és akár az is megoldható, hogy a kiszámolt testtömegindexnek megfelelően a fenti emberkék közül a megfelelő ábra jelenjen meg a felület mellett:
Tipp1.
A range folyamatos számolásához az oninput eseményvezérlő paramétert érdemes használni.

Tipp2.
Az ábra javascriptből történő cseréjének megvalósításához elsőként érdemes az ábra kiszemelt helyén kialakítani egy az ábráknak megfelelő méretű (98x192px) keretet, vagyis div-et, melyet szükségszerű azonosítóval ellátni (id paraméter, pl. testkep néven). A folytatásban pedig ennek a div-nek az innerHTML tulajdonságát kell változtatgatni:

testkep.innerHTML = '<img src="body_correct.gif"'>



2019-12-07 20:25:37 Admin Köszönöm, ha Ön lesz az első, aki megírja ide véleményét, észrevételét, kérdését ezzel a lappal kapcsolatban.




Új hozzászólás:
E-mail cím:


Erre a címre küldjük ki a hozzászólás jóvá- hagyásához szükséges linket. Az e-mail címet sehol nem tesszük közzé.

Név:


Ez a név fog megjelenni az Ön hozzászólásai mellett.

Mennyi tizenöt + öt?
Számjegyekkel írja be!



Ez a robotok beírása elleni védelem miatt szükséges ellenőrzés.


© infojegyzet.hu, 2007. november