Display a Calculation
HTML 5 မွာ <output> ဆိုတဲ့ tag ပါပါတယ္။ <output> tag ကို အသံုးျပဳျပီးေတာ့ calculation ေတြရဲ႕ ရလဒ္ကို ေဖာ္ျပရမွာ အသံုးျပဳႏိုင္ပါတယ္။ <output> tag ရဲ႕ ပံုစံကို ျပင္ခ်င္ရင္ေတာ့ css ကို အသံုးျပဳဖုိ႕လိုပါတယ္။
<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
</head>
<body>
<h2>Ticket Price</h2>
<form name="ticket" oninput="total.value= adult.valueAsNumber * 10 + child.valueAsNumber * 8">
Adult : <input type="number" step="1" value="0" name="adult"><br/>
Children : <input type="number" step="1" value="0" name="child"><br/>
Total : $<output name="total">0</output>
</form>
</body>
</html>ဒီ code မွာ ဆုိရင္ textbox မွာ စာရိုက္တာနဲ႕ oninput event ကို ေရာက္သြားျပီးေတာ့ output မွာ ရလဒ္ကို ထုတ္ျပေပးမွာ ျဖစ္ပါတယ္။ ကၽြန္ေတာ္တုိ႕ေတြဟာ form မွာ javascript ေရးထားတာေၾကာင့္ name နဲ႕ တိုက္ရိုက္ေခၚလို႕ရပါတယ္။
ကၽြန္ေတာ္တို႕ function ခြဲျပီး ေရးရင္ေတာ့ input နဲ႕ output tag ကို ေခၚဖုိ႕အတြက္ form နာမည္နဲ႕ ေခၚဖုိ႕လိုပါတယ္။
<!DOCTYPE html>
<html>
<head>
<title>JavaScript</title>
<script>
function calculate()
{
ticket.total.value= ticket.adult.valueAsNumber * 10 + ticket.child.valueAsNumber * 8;
}
</script>
</head>
<body>
<h2>Ticket Price</h2>
<form oninput="calculate()" name="ticket">
Adult : <input type="number" step="1" value="0" name="adult"><br/>
Children : <input type="number" step="1" value="0" name="child"><br/>
Total : $<output name="total">0</output>
</form>
</body>
</html>အထက္ပါ code မွာ calculate() ဆိုတဲ့ function ကို ေခၚထားျပီးေတာ့
ticket.total.value= ticket.adult.valueAsNumber * 10 + ticket.child.valueAsNumber * 8;လုိ႕ ေရးထားပါတယ္။ ticket ဆိုတာကေတာ့ form name ျဖစ္ပါတယ္။
အခုေလာက္ဆုိရင္ေတာ့ JavaScript နဲ႕ ပတ္သက္ျပီး ဘာေတြ လုပ္လို႕ရလဲ ဘယ္လိုေရးလို႕ရသလဲ ဆုိတာကို သိေလာက္ပါျပီ။ ေနာက္အခန္းမွာေတာ့ canvases ကို စပါမယ္။