| 编程（Programming）是编定程序的中文简称，就是让计算机代码解决某个问题，对某个计算体系规定一定的运算方式，使计算体系按照该计算方式运行，并最终得到相应结果的过程。为了使计算机能够理解（understand）人的意图，人类就必须将需解决的问题的思路、方法和手段通过计算机能够理解的形式告诉计算机，使得计算机能够根据人的指令一步一步去工作，完成某种特定的任务。这种人和计算体系之间交流的过程就是编程。 【实例名称】 实用计算器JS代码 【实例描述】 JavaScript虽然是脚本语言，但也可以设计一些常用的工具，如日历，计算器等。本例学习使用JavaScript制作计算器。 【实例代码】 <html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>标题页-本站（www.xue51.com）</title>
<script language="JavaScript">
var results='' ; //显示结果
var previouskey=''; //代表上一个字符
var re=/(\/|\*|\+|-)/ //用来判断+-*/的正则
var re2=/(\/|\*|\+|-){2}$/; //用来判断出现2次+-*/的正则
var re3=/.+(\/|\*|\+|-).+/; //用来判断小数点+-*/的正则
var re4=/\d|\./ ; //用来判断(小数点或数值)的正则
var re5=/^[^\/\*\+].+\d$/; //用来判断(以+-*/开始)的正则
var re6=/\./; //用来判断小数点的正则
//计算结果的方法
function calculate()
{
//判断如何用户输入了1个值，然后单击了"="
if (event.srcElement.tagName=="TD"){
if (event.srcElement.innerText.match(re4)&&previouskey=="=")
results='';
if (result.innerText.match(re3)&&event.srcElement.innerText.match(re)){
if (!results.match(re5)){
result.innerText="输入错误!";
return;
}
//以下是要求长度只能保持在12位以内(有小数点的情况下)
results=eval(results); //转换为数值
if (results.toString().length>=12&&results.toString().match(re6))
results=results.toString().substring(0,12);
result.innerText=results;
}
//出现2次计算符号的情形
results+=event.srcElement.innerText;
if (results.match(re2))
results=results.substring(0,results.length-2)+
results.charAt(results.length-1);
result.innerText=results;
}}
function calculateresult()
{
//当首字符输入错误时
if (!results.match(re5)){
result.innerText="输入错误!";
return;}
results=eval(results); //转换结果为数值型
if (results.toString().length>=12&&results.toString().match(re6))
results=results.toString().substring(0,12);
result.innerText=results;
}
function pn()
{
//首字符为负数的计算
if (result.innerText.charAt(0)!='-')
result.innerText=results='-'+result.innerText
else if (result.innerText.charAt(0)=='-')
result.innerText=results=result.innerText*(-1)
}
</script> 需要在body中添加一个Table，用来呈现计算器的外观，代码如下所示：
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" width="400">
<tr>
<td width="100%" valign="top"><table border="2" width="200" cellspacing="0"
cellpadding="0" bgcolor="#000000" style="border-color:black"
onClick="previouskey=event.srcElement.innerText">
<tr>
<td width="100%" bgcolor="#FFFFFF" id="result"
style="font:bold 20px Verdana;color:black;
text-align='right'">0</td>
</tr>
<tr>
<td width="100%" valign="middle" align="center"><table
border="0" width="100%"
cellspacing="0" cellpadding="0" style="font:bold 20px
Verdana;color:white">
<tr><td width="80%" align="center"><table border="1"
width="100%" cellspacing="0"
cellpadding="0" style="cursor:hand;font:bold 20px
Verdana;color:white"
onMouseover="if (event.srcElement.tagName=='TD')
event.srcElement.style.color='yellow'"
onMouseout="event.srcElement.style.color='white'"
onselectStart="return false"
onClick="calculate()" height="82">
<tr><td width="25%" align="center" height="17">7</td>
<td width="25%" align="center" height="17">8</td>
<td width="25%" align="center" height="17">9</td>
<td width="25%" align="center" height="17">/</td>
</tr><tr><td width="25%" align="center" height="19">4</td>
<td width="25%" align="center" height="19">5</td>
<td width="25%" align="center" height="19">6</td>
<td width="25%" align="center" height="19">*</td>
</tr><tr><td width="25%" align="center" height="19">1</td>
<td width="25%" align="center" height="19">2</td>
<td width="25%" align="center" height="19">3</td>
<td width="25%" align="center" height="19">-</td>
</tr><tr><td width="25%" align="center" height="19">0</td>
<td width="25%" align="center" height="19"
onClick="pn();previouskey=1;event.cancelBubble=true">+/-</td>
<td width="25%" align="center" height="19">.</td>
<td width="25%" align="center" height="19">+</td>
</tr></table></td><td width="20%"><div align="left">
<table border="1" width="100%" cellspacing="0"
cellpadding="0"><tr><td width="100%"
style="cursor:hand;font:bold 20px Verdana;
color:white;text-align:center"
onClick="result.innerText=0;results=''">C</td>
</tr></table></div><div align="left"><table border="1"
width="100%" cellspacing="0" cellpadding="0"
height="81">
<tr><td width="100%" style="cursor:hand;font:bold 32px Verdana;
color:white;text-align:center"
onMouseover="event.srcElement.style.color='yellow'"
onMouseout="event.srcElement.style.color='white'"
onClick="calculateresult()">=
</body>
</html>
【运行效果】
 【难点剖析】 本例的重点在于对用户输入字符的判断。这里要提到的就是正则表达式，其在JavaScript中的应用非常灵活，可用来判断用户输入的数字符是否合法，也可用来截取页面的内容。本例对使用的正则表达式进行了详细的注释，要了解正则表达式的详细应用语法，可参考相关资料。 【源码下载】 为了JS代码的准确性，请点击：实用计算器 进行本实例源码下载
使用编程语言写的程序，由于每条指令都对应计算机一个特定的基本动作，所以程序占用内存少、执行效率高。
| 
