26 October 2014

របៀប​បង្កើត ម៉ាស៊ីនគិតលេខ​សាមញ្ញ​ជាមួយ Javascript

អត្ថបទមុនៗ សំបុកអាយធីធ្លាប់បានបង្ហាញគន្លឹះខ្លះ ពី 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 នៅទីនេះ។

អត្ថបទ​ថ្មីៗ៖

ផ្សព្វផ្សាយ

អំពី Lao Sopheak

ការសរសេរ និងស្រាវជ្រាវ គឺជាសកម្មភាព និងជំនាញ​ដែល​ខ្ញុំ​ចូលចិត្ត​បំផុត ។ បច្ចុប្បន្ន ខ្ញុំបាន​នឹង​កំពុង​សរសេរ​អត្ថបទ​រាប់​រយ សម្រាប់​ដាក់​ផ្សាយ​ក្នុងសំបុកអាយធី និង​ដើម្បីចែក​រំលែក​ចំណេះដឹង រួមទាំង​បទ​ពិសោធន៍​ល្អៗ ពីបរទេស និងដោយ​ផ្ទាល់​របស់​ខ្ញុំ ទៅដល់​កូន​ខ្មែរ​គ្រប់រូប ដែល​ស្រលាញ់​ និង​ចូលចិត្ត​ជំនាញ​បច្ចេកវិទ្យា ឬ​ដើម្បី​ជួយ​សម្រួល​ដល់​បញ្ហា​ការងារ​របស់​ពួកគេ ​។