| 編程（Programming）是編定程序的中文簡(jiǎn)稱，就是讓計(jì)算機(jī)代碼解決某個(gè)問題，對(duì)某個(gè)計(jì)算體系規(guī)定一定的運(yùn)算方式，使計(jì)算體系按照該計(jì)算方式運(yùn)行，并最終得到相應(yīng)結(jié)果的過程。為了使計(jì)算機(jī)能夠理解（understand）人的意圖，人類就必須將需解決的問題的思路、方法和手段通過計(jì)算機(jī)能夠理解的形式告訴計(jì)算機(jī)，使得計(jì)算機(jī)能夠根據(jù)人的指令一步一步去工作，完成某種特定的任務(wù)。這種人和計(jì)算體系之間交流的過程就是編程。 【實(shí)例名稱】 實(shí)用計(jì)算器JS代碼 【實(shí)例描述】 JavaScript雖然是腳本語言，但也可以設(shè)計(jì)一些常用的工具，如日歷，計(jì)算器等。本例學(xué)習(xí)使用JavaScript制作計(jì)算器。 【實(shí)例代碼】 <html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>標(biāo)題頁-本站（www.xue51.com）</title>
<script language="JavaScript">
var results='' ; //顯示結(jié)果
var previouskey=''; //代表上一個(gè)字符
var re=/(\/|\*|\+|-)/ //用來判斷+-*/的正則
var re2=/(\/|\*|\+|-){2}$/; //用來判斷出現(xiàn)2次+-*/的正則
var re3=/.+(\/|\*|\+|-).+/; //用來判斷小數(shù)點(diǎn)+-*/的正則
var re4=/\d|\./ ; //用來判斷(小數(shù)點(diǎn)或數(shù)值)的正則
var re5=/^[^\/\*\+].+\d$/; //用來判斷(以+-*/開始)的正則
var re6=/\./; //用來判斷小數(shù)點(diǎn)的正則
//計(jì)算結(jié)果的方法
function calculate()
{
//判斷如何用戶輸入了1個(gè)值，然后單擊了"="
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="輸入錯(cuò)誤!";
return;
}
//以下是要求長(zhǎng)度只能保持在12位以內(nèi)(有小數(shù)點(diǎn)的情況下)
results=eval(results); //轉(zhuǎn)換為數(shù)值
if (results.toString().length>=12&&results.toString().match(re6))
results=results.toString().substring(0,12);
result.innerText=results;
}
//出現(xiàn)2次計(jì)算符號(hào)的情形
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()
{
//當(dāng)首字符輸入錯(cuò)誤時(shí)
if (!results.match(re5)){
result.innerText="輸入錯(cuò)誤!";
return;}
results=eval(results); //轉(zhuǎn)換結(jié)果為數(shù)值型
if (results.toString().length>=12&&results.toString().match(re6))
results=results.toString().substring(0,12);
result.innerText=results;
}
function pn()
{
//首字符為負(fù)數(shù)的計(jì)算
if (result.innerText.charAt(0)!='-')
result.innerText=results='-'+result.innerText
else if (result.innerText.charAt(0)=='-')
result.innerText=results=result.innerText*(-1)
}
</script> 需要在body中添加一個(gè)Table，用來呈現(xiàn)計(jì)算器的外觀，代碼如下所示：
</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>
【運(yùn)行效果】
 【難點(diǎn)剖析】 本例的重點(diǎn)在于對(duì)用戶輸入字符的判斷。這里要提到的就是正則表達(dá)式，其在JavaScript中的應(yīng)用非常靈活，可用來判斷用戶輸入的數(shù)字符是否合法，也可用來截取頁面的內(nèi)容。本例對(duì)使用的正則表達(dá)式進(jìn)行了詳細(xì)的注釋，要了解正則表達(dá)式的詳細(xì)應(yīng)用語法，可參考相關(guān)資料。 【源碼下載】 為了JS代碼的準(zhǔn)確性，請(qǐng)點(diǎn)擊：實(shí)用計(jì)算器 進(jìn)行本實(shí)例源碼下載
使用編程語言寫的程序，由于每條指令都對(duì)應(yīng)計(jì)算機(jī)一個(gè)特定的基本動(dòng)作，所以程序占用內(nèi)存少、執(zhí)行效率高。
| 
