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:
<style>
.male { height: 24px; width: 50px }
.velke { height: 24px; width: 105px }
.zavorky { height: 24px; width: 22px }
<style> |
|
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í.
var one = ‚1‘;// promenne pro tlacitka
var two = ‚2‘;
var three = ‚3‘;
var four = ‚4‘;
var five = ‚5‘;
var six = ‚6‘;
var seven = ‚7‘;
var eight = ‚8‘;
var nine = ‚9‘;
var zero = ‚0‘;
var plus = ‚+‘;
var minus = ‚-‚;
var multiply = ‚*‘;
var divide = ‚/‘;
var decimal = ‚.‘;
var pamet = “;
var lzavorka = ‚(‚;
var rzavorka = ‚)‘;
function compute(obj) {// obj je nazev formulare
if (obj.expr.value) obj.expr.value = eval(obj.expr.value);// pokud je na displayi hodnota – vypocti ji
}
function enter(obj, string){
obj.expr.value += string;// pridava hodnotu na display
}
function mem(obj){
if (obj.expr.v,alue) pamet = ‚(‚+obj.expr.value+‘)‘;// co je v pameti prijde do zavorek
}
} |
|
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ě.
Starší komentáře ke článku
Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.
Prdelka
Čvn 10, 2014 v 11:02Nefunguje to -_-