សំបុកអាយធី | www.sombokit.com បើមិនអនុវត្តន៍ ធ្វើម៉េចដឹងថាអ្នកចេះ?
អត្ថបទមុនៗ សំបុកអាយធីធ្លាប់បានបង្ហាញគន្លឹះខ្លះ ពី Javascript រួចមកហើយ។ ដូចគ្នាដែរនៅពេលនេះ សំបុកអាយធីសូមបន្តបង្ហាញពីរបៀបបង្កើត ម៉ាស៊ីនគិតលេខ (Calculator) ដ៏សាមញ្ញមួយ ដោយលោកអ្នកអាចធ្វើការគណនា នូវវិធីបូក ដក គុណ និងចែក។ បន្ថែមពីលើនេះ លោកអ្នកអាចយកកូដ (ដែលនឹងបង្ហាញខាងក្រោម) ទៅអនុវត្តន៍បន្ថែមបានយ៉ាងងាយស្រួល។
——————–
ម៉ាស៊ីនគិតលេខនេះ ត្រូវបានបង្កើតឡើងដោយបង្កើតជា function សម្រាប់ប្រមាណវិធី នីមួយៗ ដូចជា៖ function add(), function sub(), function multiply(), និង function devide() ជាដើម។ ក្នុងនោះផងដែរ ការបង្កើតរូបរាងវិញ គឺយើងប្រើប្រាស់ HTML Form រួមជាមួយ Table ប្រើផ្គួបគ្នា។
សូមពិនិត្យមើលកូដខាងក្រោម៖
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sample Calculator</title>
<script type="text/javascript">
function add(){
var f=document.fn;
f.result.value = (f.var1.value)*1 + (f.var2.value)*1;
}
function minus(){
var f=document.fn;
f.result.value = f.var1.value - f.var2.value;
}
function multiply(){
var f=document.fn;
f.result.value = f.var1.value * f.var2.value;
}
function devide(){
var f=document.fn;
f.result.value = f.var1.value / f.var2.value;
}
</script>
</head>
<body>
<center>
<form name="fn" style="border:1px solid #666; width:250px; height:150px;">
<table border="0">
<tr>
<td colspan="2" align="center" style="color:blue; font-weight:bold; text-decoration:underline;">Create Calculator</td>
</tr>
<tr>
<td align="right">Value 1:</td><td align="left"><input type="text" name="var1" /></td>
</tr>
<tr>
<td align="right">Value 2:</td><td align="left"><input type="text" name="var2" /></td>
</tr>
<tr>
<td align="right">Result :</td><td align="left"><input type="text" name="result" disabled="disabled" /></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="radio" value="Add" name="opt" onclick="add()" />Add<input type="radio" value="Sub" name="opt" onclick="minus()" />Sub<input type="radio" name="opt" value="Multi" onclick="multiply()" />Multi<input type="radio" value="Device" name="opt" onclick="devide()" />Device</td>
</tr>
</table>
</form>
</center>
</body>
</html>
រូបរាងម៉ាស៊ីនគិតលេខ
សាកល្បងប្រើម៉ាស៊ីនគិតលេខនេះ calulator-for-loop នៅទីនេះ។
