Web Security

Simple JavaScript Calculator

JavaScript ကိုအသံုးျပဳျပီးေတာ့ရိုးရွင္းတဲ့ calculator ေလးတစ္ခုကိုဖန္တီးၾကည့္ၾကမယ္။ က်ေနာ္လည္း ေလ့လာေနဆဲ ေလ့က်င့္ေနဆဲမလို႕ အမွားပါလည္း နားလည္ေပးၾကပါ။ ဒါကေတာ့ လံုး၀ရိုးရွင္းတဲ့ပံုစံေလးရေအာင္ ေရးထားတာျဖစ္ေတာ့ Calculator အေကာင္းစားၾကီးမဟုတ္သလို Bug ေတြလည္းရွိခ်င္ရွိေနႏိုင္မွာပါ။ ဒါေတြကို အဓိကမထားပဲက်ေနာ္တို႕ program ေလးကိုပဲေလ့လာရေအာင္ပါ။

Calculator ေလးတစ္ခုဖန္တီးမယ္ဆိုရင္ ပထမဆံုး လိုအပ္တာေတြအရင္ဆံုးစဥ္းစားၾကည့္ရေအာင္။ မရွိမျဖစ္လိုတဲ့အရာတစ္ခုကေတာ့ User Input လိုတာေပါ့။ ဒီေတာ့ကာ

<input type="text" name="calculator" size="15">

ေနာက္လိုတာကေတာ့ Numbers ေတြ operator ေတြလိုဦးမွာေပါ့။

<input type="button" name="1" value="1">

ဒါကေတာ့ 1 ဆိုတဲ့ number အတြက္ button ေလးတစ္ခုေပါ့ action ေတာ့မပါေသးဘူး။ ဒီေတာ့ action က Click ႏိွပ္လုိက္ရင္ဆိုတဲ့ action ျဖစ္တဲ့အတြက္ က်ေနာ္တို႕ onClick Event Handlers ကိုသံုးမယ္။

ဒီေတာ့ကာ

<input type="button" name="1" value="1" onClick="calculator.input.value+='1' ">

Click ႏွိပ္လိုက္တဲ႕အခ်ိန္မွာ အလုပ္လုပ္ေစခ်င္တာက name=”calculator”ဆိုတဲ့ input ထဲကို 1 ဆိုတဲ့ value ကို ထည့္လိုက္တယ္။ ဒီတိုင္း က်န္တဲ့ number ေတြအကုန္လံုးတူတူပဲ။ မတူတာဆိုလို႕ C ဆိုတဲ့ Clear လုပ္မယ့္ Button ရယ္ multiply button ရယ္ တကယ္လို႕ အစားကို / လို႕မေပးပဲ အစား သေကၤတသံုးထားမိရင္ ျပန္ Change ေပးရမယ္။ JavaScript မွာက / ပဲအလုပ္လုပ္တာကိုး။

ဟုတ္ျပီ calculate လုပ္မယ္။ 1 ရယ္ + ရယ္ 2 ရယ္ႏွိပ္တယ္ဆိုပါေတာ့။ calculator.input.value ထဲမွာ 1+2 ဆိုတာေရာက္ေနမယ္။ ဒီခ်ိန္မွာ user က = ကို click တဲ့အခါ က်ေနာ္တို႕တြက္ေပးရမယ္။ တြက္ျပီးလို႕ရတဲ့တန္ဖိုးကို Input ထဲျပန္ထည့္ေပးရမယ္။ JavaScript ရဲ႕ eval function ကိုသံုးျပီးေတာ့ က်ေန္ာတို႕တြက္ေပးမယ္။

eval(calculator.input.value) ဆိုရင္ value ထဲမွာရွိေနတဲ့တန္ဖိုးေတြဆိုေတာ့ eval(1+2) ျဖစ္သြားမယ္။ eval(1+2) ကို calculator.input.value ထဲကိုျပန္ထည့္လိုက္မယ္ဆိုရင္ value ထဲကို 3 ၀င္သြားမွာျဖစ္ပါတယ္။

calculator.input.value=eval(calculator.input.value)

ဒီေနရမွာ ဘာလို႕ += မသံုးပဲ = ကိုသံုးလည္းဆိုရင္ အရင္ရွိေနတဲ့ တန္ဖိုး 1+2 ဆိုတာကိုမရွိေစခ်င္ေတာ့ပဲ ေနာက္ထပ္တန္ဖိုးကိုပဲ ျပန္ထည့္တဲ့သေဘာပါ။

ဒီလိုဆို က်ေနာ္တို႕ Calculator ေလးကအလုပ္လုပ္ေနျပီ။

Design ေလးေတာ့ နည္းနည္းျပင္လိုက္မယ္မဟုတ္ရင္ ၾကည့္ေကာင္းမွာမဟုတ္ဘူး ဒီေတာ့ ေရးထားတဲ့ဟာ ေတြကို က်ေနာ္က calculate ဆိုတဲ့ id နဲ႕ div တစ္ခုတည္းကိုထည့္လိုက္တယ္။

<div id="calculator"> </div>

ဒါကို CSS ကေနျပန္ေခၚျပီး နည္းနည္းေလးေတာ့ၾကည့္ေကာင္းေအာင္လုပ္လိုက္မယ္။

#div {width:200px;height:200px;background-color:black;}

ျပီးရင္ form elelment ကိုအလယ္ကိုပို႕လိုက္မယ္။

form { text-align:center;}

တခ်ိဳ႕ကေတာ့ Table သံုးျပီးေရးၾကပါတယ္။ ၾကိုက္သလိုေရးပါ။ အဓိက JavaScript ေလးအလုပ္လုပ္သြားတာကိုသိခ်င္တာပါ။

Demo

https://jsfiddle.net/lunam00n/e6h1v5dj/

Previous Post Next Post

You Might Also Like

No Comments

Leave a Reply