| 編程（Programming）是編定程序的中文簡稱，就是讓計(jì)算機(jī)代碼解決某個(gè)問題，對某個(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í)例描述】 文本漸變是一種吸引用戶眼球的特效，本例通過兩個(gè)按鈕，實(shí)現(xiàn)對文本漸變的控制。當(dāng)用戶單擊“開始漸變”按鈕時(shí)，文本就會實(shí)現(xiàn)漸變的效果，當(dāng)單擊“結(jié)束漸變”按鈕時(shí)，文本還原成初始狀態(tài)。 【實(shí)例代碼】 <html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>標(biāo)題頁</title>
<SCRIPT LANGUAGE="JavaScript">
var x=9;
var change="on"
if (navigator.appName == "Netscape") { //瀏覽器是netscape的情況
visShow="'show'"; //顯示的命令
visHide="'hide'"; //隱藏的命令
docStyle="document.";
styleDoc="";
}
else { //瀏覽器是IE的情況
visHide="'hidden'"; //顯示的命令
visShow="'visible'"; //隱藏的命令
docStyle="";
styleDoc=".style"; //設(shè)置樣式的命令
}
function hide1() {
eval(docStyle+ 'object1' + styleDoc + '.visibility=' + visHide);//隱藏第一個(gè)div
}
function hide2() {
eval(docStyle+ 'object2' + styleDoc + '.visibility=' + visHide);//隱藏第二個(gè)div
}
function hide3() {
eval(docStyle+ 'object3' + styleDoc + '.visibility=' + visHide);//隱藏第三個(gè)div
}
function hide4() {
eval(docStyle+ 'object4' + styleDoc + '.visibility=' + visHide);//隱藏第四個(gè)div
}
function hide5() {
eval(docStyle+ 'object5' + styleDoc + '.visibility=' + visHide);//隱藏第五個(gè)div
}
function hide6() {
eval(docStyle+ 'object6' + styleDoc + '.visibility=' + visHide);//隱藏第六個(gè)div
}
function hide7() {
eval(docStyle+ 'object7' + styleDoc + '.visibility=' + visHide);//隱藏第七個(gè)div
}
function hide8() {
eval(docStyle+ 'object8' + styleDoc + '.visibility=' + visHide);//隱藏第八個(gè)div
}
function hide9() {
eval(docStyle+ 'object9' + styleDoc + '.visibility=' + visHide);//隱藏第九個(gè)div
}
function hide10() {
eval(docStyle+ 'object10' + styleDoc + '.visibility=' + visHide);//隱藏第十個(gè)div
}
function show1() {
eval(docStyle+ 'object1' + styleDoc + '.visibility=' + visShow);//顯示第一個(gè)div
hide2(),hide3();
}
function show2() {
eval(docStyle+ 'object2' + styleDoc + '.visibility=' + visShow);//顯示第二個(gè)div
hide1(),hide3();
}
function show3() {
eval(docStyle+ 'object3' + styleDoc + '.visibility=' + visShow);//顯示第三個(gè)div
hide2(),hide4();
}
function show4() {
eval(docStyle+ 'object4' + styleDoc + '.visibility=' + visShow);//顯示第四個(gè)div
hide3(),hide5();
}
function show5() {
eval(docStyle+ 'object5' + styleDoc + '.visibility=' + visShow);//顯示第五個(gè)div
hide4(),hide6();
}
function show6() {
eval(docStyle+ 'object6' + styleDoc + '.visibility=' + visShow);//顯示第六個(gè)div
hide5(),hide7();
}
function show7() {
eval(docStyle+ 'object7' + styleDoc + '.visibility=' + visShow);//顯示第七個(gè)div
hide6(),hide8();
}
function show8() {
eval(docStyle+ 'object8' + styleDoc + '.visibility=' + visShow);//顯示第八個(gè)div
hide7(),hide9();
}
function show9() {
eval(docStyle+ 'object9' + styleDoc + '.visibility=' + visShow);//顯示第九個(gè)div
hide8(),hide10();
}
function show10() {
eval(docStyle+ 'object10' + styleDoc + '.visibility=' + visShow);//顯示第十個(gè)div
hide9();
}
function change1() {
x+=1;
eval("show" + x + "()"); //逐個(gè)顯示div,從1到10
if (x<10) setTimeout("change1()", 75); //一直在此方法中循環(huán)
else if (change=="on") change2(); //開始調(diào)用第二個(gè)循環(huán)方法
}
function change2() {
x-=1; //逐個(gè)顯示div，從10到1
eval("show" + x + "()");
if (x>1) setTimeout("change2()", 75); //一直在此方法中循環(huán)
else change1(); //開始調(diào)用第一個(gè)循環(huán)方法
}
function changeOn() { //開始變化的控制
x=9;
change="on";
change1();
}
function changeOff() { //結(jié)束變化的控制
change="off";
}
</SCRIPT>
</head>
<body>
<div id="vis" style="position:absolute; visibility:show; left:10px; top:10px; z-index:1">
<table cellpadding=2 border=1><tr>
<td><center><b>顏色變化控制</b></center></font></a></td>
<td><a href="javascript:changeOn()">
<font color="#000000"><center>開始漸變</center></font></a></td>
<td><a href="javascript:changeOff()">
<font color="#000000"><center>結(jié)束漸變</center></font></a></td>
</tr></table></div> <div id="object1" style="position:absolute; visibility:hide; left:10px; top:50px; z-index:1">
<table border=1 bgcolor=#eaffff width=175 height=50><td><center><b><font color="#F9F9F9">看看我的顏色變化</font></b></center></td></table>
</div>
<div id="object2" style="position:absolute; visibility:hide; left:10px; top:50px; z-index:1">
<table border=1 bgcolor=eaffff width=175 height=50><td><center><b><font color="#ECECEC">看看我的顏色變化</font></b></center></td></table>
</div>
<div id="object3" style="position:absolute; visibility:hide; left:10px; top:50px; z-index:1">
<table border=1 bgcolor=eaffff width=175 height=50><td><center><b><font color="#D5D5D5">看看我的顏色變化</font></b></center></td></table>
</div>
<div id="object4" style="position:absolute; visibility:hide; left:10px; top:50px; z-index:1">
<table border=1 bgcolor=eaffff width=175 height=50><td><center><b><font color="#C0C0C0">看看我的顏色變化</font></b></center></td></table>
</div>
<div id="object5" style="position:absolute; visibility:hide; left:10px; top:50px; z-index:1">
<table border=1 bgcolor=eaffff width=175 height=50><td><center><b><font color="#b0b0b0">看看我的顏色變化</font></b></center></td></table>
</div>
<div id="object6" style="position:absolute; visibility:hide; left:10px; top:50px; z-index:1">
<table border=1 bgcolor=eaffff width=175 height=50><td><center><b><font color="#939393">看看我的顏色變化</font></b></center></td></table>
</div>
<div id="object7" style="position:absolute; visibility:hide; left:10px; top:50px; z-index:1">
<table border=1 bgcolor=eaffff width=175 height=50><td><center><b><font color="#808080">看看我的顏色變化</font></b></center></td></table>
</div>
<div id="object8" style="position:absolute; visibility:hide; left:10px; top:50px; z-index:1">
<table border=1 bgcolor=eaffff width=175 height=50><td><center><b><font color="#6b6b6b">看看我的顏色變化</font></b></center></td></table>
</div>
<div id="object9" style="position:absolute; visibility:hide; left:10px; top:50px; z-index:1">
<table border=1 bgcolor=eaffff width=175 height=50><td><center><b><font color="#424242">看看我的顏色變化</font></b></center></td></table>
</div>
<div id="object10" style="position:absolute; visibility:show; left:10px; top:50px; z-index:1">
<table border=1 bgcolor=eaffff width=175 height=50><td><center><b><font color="#000000">看看我的顏色變化</font></b></center></td></table>
</div><P>
</FONT></CENTER>
</body>
</html>
【運(yùn)行效果】  
【難點(diǎn)剖析】 本例的重點(diǎn)是“change1”和“change2”方法。通過“change1”方法的循環(huán)執(zhí)行，分別調(diào)用顯示div的10個(gè)方法，然后再通過“change2”方法的循環(huán)，調(diào)用隱藏的10個(gè)方法。代碼中有個(gè)技巧“eval”（“show”+x+“（）”）”，使用“eval”方法可以將這些普通字符串，連接成一個(gè)函數(shù)名。 【源碼下載】 本實(shí)例JS代碼下載
使用編程語言寫的程序，由于每條指令都對應(yīng)計(jì)算機(jī)一個(gè)特定的基本動(dòng)作，所以程序占用內(nèi)存少、執(zhí)行效率高。
| 
