Dietní kalkulačka v JavaScriptu

Jedním ze základních hollywoodských klišé je představa počítačového odborníka jako obtloustlého, plešatějícího tvora se silnými brýlemi, neustále pojídajícího smažené brambůrky a pizzu. My, kteří s počítači pracujeme, víme, že opak je pravdou. Nejen že jsme štíhlí, mladí a krásní, ale navíc pomáháme svým méně šťastným spoluobčanům, například programováním skriptů na výpočet přijatých a vydaných kJ.

V tomto článku popsaný skript pracuje jako jednoduchý automat, který ze zadaných dat nejprve vygeneruje v HTML stránce formulář. Poté, co uživatel zadá do formuláře své typické denní aktivity a zkonzumované jídlo, je vypočtena energetická bilance a zobrazen stručný výsledek. Jak to celé funguje, si můžete vyzkoušet, abyste získali lepší představu.

Použitý skript používá ty nejzákladnější postupy JavaScriptu, neměl by tedy činit potíže ani úplným začátečníkům. Po mírné úpravě jej lze samozřejmě použít i v jiných aplikacích, všude tam, kde je potřeba spočítat výslednou sumu z mnoha různých druhů položek: energetickou hodnotu jídla, cenu zboží, celkovou hmotnost nákladu a podobně. Kompletní zdrojový kód příkladu najdete v externím souboru.

Popis použitého kódu

Základním úkolem je příprava vstupních dat. Ta jsou v tomto případě uložena ve dvou dvourozměrných polích, kdy každý řádek pole odpovídá jednomu řádku výsledné tabulky. Jednotlivé sloupce pak obsahují (v tomto pořadí):

• název položky
• minimální počet jednotek, jenž lze zadat (obvykle 0)
• maximální počet jednotek, jenž lze na daném řádku zadat
• přírůstek (je-li zde uvedeno např. 100, lze množství zadávat jen po celých stovkách)
• název jednotky (kg, litr, sklenice…)
• přepočtový koeficient – v tomto případě počet kJ na jednotku

Tímto způsobem si připravíme dvě pole, jedno pro potraviny představující energetický příjem (pojmenujeme je Prijem), druhé pro činnosti představující energetický výdej (pojmenováno je překvapivě Vydej):

var Prijem = [
    [ „Maso“, 0, 500, 100, „gramů“, 4.15 ],
    [ „Brambory“, 0, 500, 100, „gramů“, 3.9 ],
    [ „Pivo 12“, 0, 10, 1, „0,5 l sklenic“, 900 ],
    [ „Jogurt“, 0, 5, 1, „kelímků“, 500 ],
    [ „Pizza“, 0, 5, 1, „ks“, 2500 ],
    [ „Hamburger“, 0, 10, 1, „ks“, 1900 ] ];
var Vydej = [
    [ „Kancelářská práce“, 0, 12, 1, „hodin“, 500 ],
    [ „Domácí práce“, 0, 12, 1, „hodin“, 800 ],
    [ „Lehký rekreační sport“, 0, 300, 15, „minut“, 25 ],
    [ „Náročný rekreační sport“, 0, 300, 15, „minut“, 38 ],
    [ „Chůze“, 0, 25, 1, „km“, 220 ],
    [ „Běh“, 0, 25, 1, „km“, 250 ],
    [ „Spánek“, 0, 12, 1, „hodin“, 340 ] ];

Z takto definovaného pole vypíšeme příslušnou tabulku pomocí funkce WriteTable. Jejími parametry jsou (v tomto pořadí):

• vstupní pole dat
• nadpis tabulky
• barva pozadí tabulky
• prefix, který bude přiřazen vytvořeným formulářovým polím (je-li prefix „abc“, budou vytvořena pole s názvy „abc0“ až „abcN“, kde N je o jedna menší než rozměr pole)

Abychom si ušetřili práci s kontrolou platnosti vstupu, generujeme místo textových formulářových prvků prvky typu SELECT. Kód funkce WriteTable vypadá následovně (parametrizovat lze pochopitelně i více údajů, například šířku tabulky či použité písmo):

function WriteTable( arr, title, bgcolor, fieldname ) {
    var i,j;
    document.write( „<table width=’400′ border=’1′ bgcolor='“+bgcolor+“‚><tr><td colspan=’3‘>“+title+“</td></tr>“ );
    for( i=0; i<arr.length; i++ ) {
        document.write( „<tr><td>“ + arr[i][0] + „</td><td><select name='“+fieldname+(1*i)+“‚>“ );
        for( j=arr[i][1]; j<=arr[i][2]; j+=arr[i][3] ) {
            document.write( „<option value='“+j+“‚>“ + j + „</option>“ );
        }
        document.write( „</select></td><td>(“ + arr[i][4] + „)</td>“ );
        document.write( „</tr>“);
    }
    document.write( „</table>“ );
}

V kódu stránky musíme připravit formulář, do nějž budou výše zmíněnou funkcí vygenerovány příslušné tabulky a který bude rovněž obsahovat exekuční tlačítko a formulářové pole typu TEXTAREA pro zobrazení výstupu. Zde je použit „mix“ HTML a JavaScriptu. Chceme-li mít stránku úhlednou i v případě návštěvníků bez JavaScriptu, lze například celý formulář vypsat pomocí document.write a použít NOSCRIPT element:

<FORM name=Form1>
<SCRIPT language=JavaScript>
<!–
    WriteTable( Prijem, „Denní příjem energie:“, „pink“, „p“);
    document.write(„<br>“);
    WriteTable( Vydej, „Denní výdej energie:“, „lightblue“, „v“);
// –>
</SCRIPT>
<P><INPUT onclick=compute(this.form) type=button value=“Spočítat výsledek“></P>
<P><TEXTAREA name=“result“ rows=6 cols=45></TEXTAREA></P>
</FORM>

Po stisku tlačítka je volána funkce compute. Ta má za úkol sečíst „kladnou“ a „zápornou“ sumu kJ, spočítat jejich rozdíl, na základě výsledku vymyslet dobře míněnou radu a vše ve vhodné formě zobrazit ve výstupním formulářovém poli. Tedy nějak takto:

function compute(theForm) {
    var pri=0;
    var vyd=0;
    var x;
    var n=““;
    for( i=0; i<Prijem.length; i++ ) {
        x = eval(„theForm.p“+i);
        pri += ( x.options[x.selectedIndex].value * Prijem[i][5] );
    }
    for( i=0; i<Vydej.length; i++ ) {
        x = eval(„theForm.v“+i);
        vyd += ( x.options[x.selectedIndex].value * Vydej[i][5] );
    }
    var bil = pri-vyd;
    n += „Denni prijem energie: “ + pri + “ kJ\n“;
    n += „Denni vydej energie: “ + vyd + “ kJ\n“;
    n += „Denni bilance: “ + bil + “ kJ\n“;
    n += „Hodnoceni: “ + Ranking(bil);
    theForm.result.value =n;
}

Funkce Ranking, volaná v předchozím kódu, vrací na základě předané denní bilance textový řetězec s vhodnou radou. Jedná se o jednoduchou rozhodovací funkci, kterou lze naprogramovat mnoha způsoby, v příkladu byl použit tento:

function Ranking( x ) {
    if( x < – 20000 ) return(„Extrémně hubnete. Za chvíli z Vás bude kostra!“);
    if( x < – 10000 ) return(„Hodně hubnete, zřejmě držíte redukční dietu.“);
    if( x < – 2000 ) return(„Mírně hubnete.“);
    if( x< 2000 ) return(„Jste někde kolem normálu.“);
    if( x< 10000 ) return(„Mírně tloustnete.“);
    if( x< 20000 ) return(„Výrazně tloustnete, jedlíku.“);
    return(„POZOR! Extrémně tloustnete !!!“);
}

Pokud jste dočetli až sem a spočítali si energetickou bilanci svých oblíbených činností, jistě vás zajímá otázka, zda jsou v příkladu uvedená data pravdivá, či zda se jedná jen o náhodný šum. Nuže, odpověď je někde mezi. Energetické hodnoty byly vzaty váženým průměrem z různých internetových zdrojů, měly by tedy být, alespoň řádově, správné. Co se týče doporučení generovaného funkcí Ranking, to je v příkladu zahrnuto především proto, aby byl kód úplný, hodnoty uvedené v podmínkách ale berte s rezervou.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.