| 編程（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代碼的準確性，請點擊：實用計算器 進行本實例源碼下載
使用編程語言寫的程序，由于每條指令都對應計算機一個特定的基本動作，所以程序占用內存少、執行效率高。
| 
