編程(Programming)是編定程序的中文簡稱,就是讓計算機代碼解決某個問題,對某個計算體系規定一定的運算方式,使計算體系按照該計算方式運行,并最終得到相應結果的過程。為了使計算機能夠理解(understand)人的意圖,人類就必須將需解決的問題的思路、方法和手段通過計算機能夠理解的形式告訴計算機,使得計算機能夠根據人的指令一步一步去工作,完成某種特定的任務。這種人和計算體系之間交流的過程就是編程。 【實例名稱】 網絡導航條 【實例描述】 網絡導航條和網絡導航菜單一樣,用來讓用戶了解網站的所有功能。本例提供一個效果非?岬木W絡導航條。 【實例代碼】 <html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>標題頁-本站(www.xue51.com)</title>
</head>
<body>
<style>
/* 先把這個 myMenu 的樣式放到css里 */
.myMenu td{font-size:12px;font-family:verdana,arial;
font-weight:bolder;color:#ffffff;border:1px solid #336699;
background:#336699;filter:blendtrans(duration=0.5);
cursor:hand;text-align:center;}
</style>
<script> //把事件動作綁定到菜單上
function addMenu(objid){
var tds=objid.getElementsByTagName('td');
for(var i=0;i<tds.length;i++){
with(tds[i]){
onmouseover=function(){
with(this){
filters[0].apply();
style.background='#FEBD20';
//鼠標移上去時的背景顏色
style.border='1px solid #ffffff';
//邊框
style.color='black';
//文字顏色
filters[0].play();
}
}
onmouseout=function(){
with(this){
filters[0].apply();
style.background='#336699';
//鼠標離開時的背景顏色
style.border='1px solid #336699';
//邊框
style.color='#ffffff';
//文字顏色
filters[0].play();
}
}
}
}
}
</script>
<!--菜單從這里開始, 注意要把class設置成和css里相同的, 還要設一個id-->
<table class="myMenu" id="menuTbl" width="500"
cellpadding="1" cellspacing="4" border="0"
bgcolor="#00000" align="center">
<tr>
<td>網站介紹</td>
<td>開發文檔</td>
<td>下載軟件</td>
<td>開源管理</td>
<td>網站服務</td>
</tr>
</table>
<script>addMenu(menuTbl);
//在上面這個table結束的地方執行事件動作的綁定, 這里的這個menuTbl就是那個table的id
</script></body>
</html>
【運行效果】  【難點剖析】 本例的重點是如何動態地為td標簽添加事件。網絡導航條由一個普通的表格組成,初始狀態下沒有設置任何事件。只有一個簡單的樣式。使用“addMenu”方法,為表格中所有的td動態綁定了“onmouseover”和“onmouseout”事件,通過設置邊框、背景和文字顏色改變單元格的效果。 【源碼下載】 為了JS代碼的準確性,請點擊:網絡導航條 進行本實例源碼下載
使用編程語言寫的程序,由于每條指令都對應計算機一個特定的基本動作,所以程序占用內存少、執行效率高。 |