JavaScriptová kalkulačka na stránce

17. srpna 2001

•

S matematikou se člověk setkává opravdu na každém kroku. Nějaké to sčítání a odčítání (v horším případě násobení) s malými čísly spočítá většina z nás v hlavě, ale na složitější výpočty už potřebujeme kalkulačku. Proč ji tedy neumístit do své internetové stránky? Tento nepříliš složitý příklad by vám mohl dát inspiraci.

Zde se podívejte jak by takový kalkulátor mohl vypadat.

Jedná se o formulář s jedním vstupním prvkem input a několika tlačítky (button) srovnanými v tabulce. Pořadí a umístění je samozřejmě zcela na vašem úsudku.

<form name="calc" method="post" action="">
<table border="2" bgcolor="#add8e6" style="height: 186px; width: 160px" >
<tr><td colspan="5"><center>
<input name="expr" size="23" action="compute(this.form)">
<font size=“-2″>Kalkulačka</font></center></td></tr>
<tr><td>
<input type="button" value=" 7 " onClick="enter(this.form, seven)" class="male"></td>
<td>
<input type="button" value=" 8 " onClick="enter(this.form, eight)" class="male"></td>
<td>
<input type="button" value=" 9 " onClick="enter(this.form, nine)" class="male"></td>
<td colspan="2">
<input type="button" value=" / " onClick="enter(this.form, divide)" class="male"></td></tr>
<tr><td>
<input type="button" value=" 4 " onClick="enter(this.form, four)" class="male"></td>
<td>
<input type="button" value=" 5 " onClick="enter(this.form, five)" class="male"></td>
<td>
<input type="button" value=" 6 " onClick="enter(this.form, six)" class="male"></td>
<td colspan="2">
<input type="button" value=" * " onClick="enter(this.form, multiply)" class="male"></td></tr>
<tr><td>
<input type="button" value=" 1 " onClick="enter(this.form, one)" class="male"></td>
<td>
<input type="button" value=" 2 " onClick="enter(this.form, two)" class="male"></td>
<td>
<input type="button" value=" 3 " onClick="enter(this.form, three)" class="male"></td>
<td colspan="2">
<input type="button" value=" – " onClick="enter(this.form, minus)" class="male"></td></tr>
<tr><td colspan="2">
<input type="button" value=" 0 " onClick="enter(this.form, zero)" class="velke"></td>
<td>
<input type="button" value=" . " onClick="enter(this.form, decimal)" class="male"></td>
<td colspan="2">
<input type="button" value=" + " onClick="enter(this.form, plus)" class="male"></td></tr>
<tr><td>
<input type="button" value=" M+ " onClick="mem(this.form)" class="male"></td>
<td>
<input type="button" value=" MR " onClick="enter(this.form, pamet)" class="male"></td>
<td>
<input type="button" value="CLEAR " onClick="pamet = “" class="male"></td>
<td>
<input type="button" value="(" onClick="enter(this.form, lzavorka)" class="zavorky"></td>
<td>
<input type="button" value=")" onClick="enter(this.form, rzavorka)" class="zavorky"></td></tr>
<tr><td colspan="2">
<input type="button" value=" = " onClick="compute(this.form)" class="velke"></td>
<td colspan="3">
<input type="reset" value=" C " class="velke" name="reset"></td></tr>
</table>
</form>

Prvky mají zadefinovány kaskádové styly. Třída male je pro tlačítka s čísly a znaménka, třída velke pro nulu "C" a "=" a třída zavorky pochopitelně pro závorky:

Jak vidíte všechna tlačítka mají definovanou obsluhu události onClick.

Tato událost většinou volá funkci enter() s parametry název formuláře a proměnná (viz. dále). U tlačítka „=“ to je funkce compute() s parametrem název formuláře. „M+“ má soukromou funkci – mem() také s parametrem název formuláře. Tlačítko CLEAR pro smazání paměti ruší obsah proměnné pamet. Ještě tlačítko C se liší od ostatních. Je typu reset, z čehož vyplývá, že maže celý obsah formuláře.

Skript pro obsluhy tlačítek a deklarace proměnných je následující.

V proměnných jsou uloženy znaky tlačítek kalkulačky. Tyto proměnné dostává jako parametr funkce enter(), která je pomocí vlastnosti value objektu expr (prvek input ve formuláři) vkládá na "display" kalkulátoru. (Operátor += odpovídá syntaxi a = a + b).

Funkce compute() je ošetřena podmínkou, která testuje zda v prvku input jsou nějaké znaky. Pokud shledá, že ano, vepíše do input hodnotu výsledku pomocí funkce eval(). Ta vyhodnotí řetězec předaný v parametru a vrátí jeho hodnotu.

Poslední částí je funkce mem(). Opět je ošetřena podmínkou neprázdného prvku input. Poté přiřazuje hodnotu na "displayi" do proměnné pamet. Hodnotu umístí do závorek pro případ, že by obsahovala např. 19+5, která by při následném násobení dělala neplechu (* má vyšší prioritu než + a -). Tuto proměnnou znovu vyvolává tlačítko „MR“ – používá k tomu funkci enter().

Nashledanou příště.