第11章綜合實(shí)訓(xùn)_第1頁(yè)
第11章綜合實(shí)訓(xùn)_第2頁(yè)
第11章綜合實(shí)訓(xùn)_第3頁(yè)
第11章綜合實(shí)訓(xùn)_第4頁(yè)
第11章綜合實(shí)訓(xùn)_第5頁(yè)
已閱讀5頁(yè)，還剩64頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶(hù)提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

第11章綜合實(shí)訓(xùn)JavaScript是Web頁(yè)面中的一種腳本編程語(yǔ)言，也是一種通用的、跨平臺(tái)的、基于對(duì)象和事件驅(qū)動(dòng)并具有安全性的腳本語(yǔ)言。它不需要進(jìn)行編譯，而是直接嵌入在HTML頁(yè)面中，把靜態(tài)頁(yè)面轉(zhuǎn)變成支持用戶(hù)交互并響應(yīng)相應(yīng)事件的動(dòng)態(tài)頁(yè)面。通過(guò)前面10章的學(xué)習(xí)，相信讀者已經(jīng)對(duì)JavaScript有了深刻的認(rèn)識(shí)和掌握。本章將通過(guò)10個(gè)實(shí)例來(lái)綜合運(yùn)用和擴(kuò)展前面的知識(shí)，使讀者進(jìn)一步掌握所學(xué)知識(shí)。課件制作人：√本章目錄實(shí)訓(xùn)1JavaScript基本操作

實(shí)訓(xùn)2HTML文檔基本操作

實(shí)訓(xùn)3JavaScript語(yǔ)言基礎(chǔ)操作

實(shí)訓(xùn)4JavaScript基本語(yǔ)句的應(yīng)用

實(shí)訓(xùn)5函數(shù)的應(yīng)用

實(shí)訓(xùn)6對(duì)象編程的操作

實(shí)訓(xùn)7事件處理的操作

實(shí)訓(xùn)8瀏覽器對(duì)象的應(yīng)用

實(shí)訓(xùn)8瀏覽器對(duì)象的應(yīng)用

實(shí)訓(xùn)10Ajax技術(shù)的應(yīng)用

√√√√√√√√√課件制作人：實(shí)訓(xùn)1JavaScript基本操作（1）熟練掌握HTML文件中編寫(xiě)JavaScript程序的基本操作。（2）基本掌握Dreamweaver編寫(xiě)工具?！緦?shí)訓(xùn)目的】

課件制作人：實(shí)訓(xùn)1JavaScript基本操作編寫(xiě)一個(gè)JavaScript程序，實(shí)現(xiàn)在頁(yè)面上輸出“歡迎訪(fǎng)問(wèn)明日公司主頁(yè)”，效果如圖11.1所示?！緦?shí)訓(xùn)內(nèi)容】

課件制作人：實(shí)訓(xùn)1JavaScript基本操作（1）打開(kāi)Dreamweaver，在“創(chuàng)建新項(xiàng)目”列中選擇“HTML”。（2）自動(dòng)創(chuàng)建HTML模板，將<title>…</title>標(biāo)記間的內(nèi)容改為“歡迎頁(yè)”。（3）在<body>…</body>標(biāo)記間編寫(xiě)如下代碼，實(shí)現(xiàn)在頁(yè)面上輸出“歡迎訪(fǎng)問(wèn)明日公司主頁(yè)”。<scriptlanguage="javascript">document.write("<HR>");document.write("<h1>歡迎訪(fǎng)問(wèn)明日公司主頁(yè)</h1>");document.write("<HR>");</script>（4）選擇“文件”/“在瀏覽器中預(yù)覽”/“IExplore6.0”，預(yù)覽網(wǎng)頁(yè)?！緦?shí)訓(xùn)步驟】

課件制作人：實(shí)訓(xùn)2HTML文檔基本操作（1）熟練掌握HTML文檔中的常用標(biāo)記。（2）熟練應(yīng)用框架進(jìn)行網(wǎng)頁(yè)布局。【實(shí)訓(xùn)目的】

課件制作人：實(shí)訓(xùn)2HTML文檔基本操作（1）應(yīng)用HTML文檔中的常用標(biāo)記制作一個(gè)在線(xiàn)音樂(lè)網(wǎng)站主頁(yè)，要求主頁(yè)應(yīng)用框架實(shí)現(xiàn)。（2）在各個(gè)子頁(yè)應(yīng)用HTML文檔中的表格標(biāo)記，段落標(biāo)記、文字標(biāo)記、列表標(biāo)記和圖像標(biāo)記等來(lái)顯示個(gè)人網(wǎng)站的LOGO，圖像，音樂(lè)歌詞等相關(guān)信息。（3）單擊主頁(yè)歌名超級(jí)鏈接時(shí)，顯示歌詞信息，并將歌詞顯示在指定的框架頁(yè)。（4）在線(xiàn)音樂(lè)網(wǎng)主頁(yè)頁(yè)面美觀大方，以不同大小、不同顏色、不同樣式和不同格式的網(wǎng)頁(yè)信息展現(xiàn)給讀者。效果如圖11.2所示?！緦?shí)訓(xùn)內(nèi)容】

課件制作人：實(shí)訓(xùn)2HTML文檔基本操作（1）打開(kāi)Dreamweaver，在“創(chuàng)建新項(xiàng)目”列中選擇“HTML”。（2）自動(dòng)創(chuàng)建HTML模板，將文件保存為index.html。（3）在index.html頁(yè)中應(yīng)用框架標(biāo)記實(shí)現(xiàn)在音樂(lè)網(wǎng)主頁(yè)的基本框架結(jié)構(gòu)。框架頁(yè)分別保存為top.html、left.html、main.html和bottom.html，效果如圖11.3所示。【實(shí)訓(xùn)步驟】

課件制作人：實(shí)訓(xùn)2HTML文檔基本操作首頁(yè)index.html實(shí)現(xiàn)框架的完整代碼如下。<html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>在線(xiàn)音樂(lè)網(wǎng)</title></head><framesetrows="220,*"frameborder="no"border="0"framespacing="0"><framesrc="top.html"name="topFrame"scrolling="No"noresize="noresize"id="topFrame"/><framesetrows="*,159"cols="*"framespacing="0"frameborder="no"border="0"> <framesetrows="*"cols="430,*"framespacing="0"frameborder="no"border="0"> <framesrc="left.html"name="leftFrame"scrolling="No"noresize="noresize"id="leftFrame"/> <framesrc="main.html"name="mainFrame"id="mainFrame"/> </frameset> <framesrc="bottom.html"name="bottomFrame"scrolling="No"noresize="noresize"id="bottomFrame"/></frameset></frameset><noframes><bodybgcolor="#CCFF33"></body></noframes></html>【實(shí)訓(xùn)步驟】

課件制作人：實(shí)訓(xùn)2HTML文檔基本操作（4）在top.html頁(yè)中應(yīng)用圖像標(biāo)記<img>調(diào)用在線(xiàn)音樂(lè)網(wǎng)的Banner廣告，代碼如下。<tablewidth="800"border="0"align="center"cellpadding="0"cellspacing="0"><tr><tdalign="center"><imgsrc="images/bg.JPG"width="768"height="220"/></td></tr></table>（5）在bottom頁(yè)中應(yīng)用表格標(biāo)記<table>、換行標(biāo)記<br>輸出版權(quán)信息，代碼如下。<tablewidth="800"border="0"align="center"cellpadding="0"cellspacing="0"><tr><tdheight="70"align="center"bgcolor="#FFCC33">我行我秀 在線(xiàn)音樂(lè)網(wǎng)  <br/><br/>

本站請(qǐng)使用IE6.0或以上版本1024*768為最佳分辨率</td></tr></table>【實(shí)訓(xùn)步驟】

課件制作人：實(shí)訓(xùn)2HTML文檔基本操作（6）在左側(cè)導(dǎo)航頁(yè)left.html頁(yè)中，應(yīng)用標(biāo)題標(biāo)記、列表標(biāo)記和超鏈接標(biāo)記等實(shí)現(xiàn)歌曲名稱(chēng)超級(jí)鏈接。<tablewidth="180"border="0"align="right"cellpadding="0"cellspacing="0"><tr><tdwidth="206"height="507"valign="top"bgcolor="#FFFFCC"> <br><br> <h4>  最新主打歌</h4> <ultype="circle"> <li><ahref="music.html"target="mainFrame">小草</a></li> <li><ahref="music.html"target="mainFrame">你是我的天使</a></li> <li><ahref="music.html"target="mainFrame">我的愛(ài)人</a></li> <li><ahref="music.html"target="mainFrame">緣沒(méi)了愛(ài)依舊</a></li> <li><ahref="music.html"target="mainFrame">花兒謝了</a></li> <li><ahref="music.html"target="mainFrame">藍(lán)色玫瑰</a></li> <li><ahref="music.html"target="mainFrame">你是我傷口永遠(yuǎn)的痛</a></li> </ul> <br><br> <h4>  經(jīng)典老歌</h4> <oltype="A"start="1"> <li><ahref="music.html"target="mainFrame">下輩子你會(huì)愛(ài)我嗎</a></li> <li><ahref="music.html"target="mainFrame">逃避你的眼神</a></li> <li><ahref="music.html"target="mainFrame">沒(méi)來(lái)由的愛(ài)</a></li> <li><ahref="music.html"target="mainFrame">一生情</a></li> <li><ahref="music.html"target="mainFrame">愛(ài)沒(méi)完沒(méi)了</a></li> <li><ahref="music.html"target="mainFrame">我是最幸福的人</a></li> <li><ahref="music.html"target="mainFrame">我的愛(ài)天作證</a></li> <li><ahref="music.html"target="mainFrame">你是我永遠(yuǎn)的愛(ài)人</a></li> </ol> </td></tr></table>【實(shí)訓(xùn)步驟】

課件制作人：實(shí)訓(xùn)2HTML文檔基本操作為歌曲名稱(chēng)添加文字超級(jí)鏈接，單擊歌曲名稱(chēng)，打開(kāi)歌詞鏈接文件music.html，并將music.html頁(yè)中的內(nèi)容顯示在名稱(chēng)為“mainFrame”的框架內(nèi)。在歌詞信息頁(yè)music.html中，應(yīng)用圖像標(biāo)記顯示音樂(lè)圖標(biāo)，應(yīng)用表格標(biāo)記、段落標(biāo)記、換行標(biāo)記等顯示歌詞信息，完整代碼如下。<tablewidth="600"border="0"align="left"cellpadding="0"cellspacing="0"><tr><tdheight="89"align="center"valign="top"bgcolor="#FFFFFF"><br/><br/><h2><imgsrc="images/music.JPG"width="298"height="70"/><br/><br/></h2></td></tr><tr><tdheight="249"align="center"valign="top"bgcolor="#FFFFFF"><pclass="STYLE1">寫(xiě)信告訴我今天海是什么顏色<br/>

夜夜陪著你的海心情又如何<br/>……

為何你明明動(dòng)了情卻又不靠近</p><pclass="STYLE1">聽(tīng)?？薜穆曇?lt;br/>

嘆息著誰(shuí)又被傷了心卻還不清醒<br/>……

說(shuō)你在離開(kāi)我的時(shí)候是怎樣的心情</td></tr></table>【實(shí)訓(xùn)步驟】

課件制作人：實(shí)訓(xùn)2HTML文檔基本操作（7）在信息主顯示頁(yè)main.html頁(yè)中，應(yīng)用表格標(biāo)記、段落標(biāo)記、換行標(biāo)記、標(biāo)題標(biāo)記等顯示歌詞信息。<tablewidth="600"border="0"align="left"cellpadding="0"cellspacing="0"><tr><tdheight="89"align="center"valign="top"bgcolor="#EFFBA5"><br/><br/><h2> ==== 音樂(lè)欣賞 ====</h2></td></tr><tr><tdheight="249"align="center"valign="top"bgcolor="#EFFBA5"><pclass="STYLE1">寫(xiě)信告訴我今天海是什么顏色<br/>

夜夜陪著你的海心情又如何<br/>……

為何你明明動(dòng)了情卻又不靠近</p><pclass="STYLE1">聽(tīng)海哭的聲音<br/>

嘆息著誰(shuí)又被傷了心卻還不清醒<br/>……

說(shuō)你在離開(kāi)我的時(shí)候是怎樣的心情<br/></td></tr></table>（8）選擇“文件”/“在瀏覽器中預(yù)覽”/“IExplore6.0”，預(yù)覽在線(xiàn)音樂(lè)網(wǎng)站，在主頁(yè)單擊歌曲名稱(chēng)超級(jí)鏈接，在mainFrame框架內(nèi)顯示歌詞內(nèi)容。【實(shí)訓(xùn)步驟】

課件制作人：實(shí)訓(xùn)3JavaScript語(yǔ)言基礎(chǔ)操作（1）熟練掌握J(rèn)avaScript常用的數(shù)據(jù)類(lèi)型。（2）熟練掌握定義變量的方法，熟悉運(yùn)算符和表達(dá)式的應(yīng)用。（3）熟悉三目運(yùn)算符的應(yīng)用。【實(shí)訓(xùn)目的】

課件制作人：實(shí)訓(xùn)3JavaScript語(yǔ)言基礎(chǔ)操作編寫(xiě)一個(gè)JavaScript程序，通過(guò)三目運(yùn)算符來(lái)返回用戶(hù)輸入的年份是否為閏年，如圖11.4所示?！緦?shí)訓(xùn)內(nèi)容】

課件制作人：實(shí)訓(xùn)3JavaScript語(yǔ)言基礎(chǔ)操作（1）打開(kāi)Dreamweaver，在“創(chuàng)建新項(xiàng)目”列中選擇“HTML”。（2）自動(dòng)創(chuàng)建HTML模板，將<title>…</title>標(biāo)記間的內(nèi)容改為“判斷指定的年份是否為閏年”，將文件保存為index.html。（3）在<body>…</body>標(biāo)記間編寫(xiě)如下代碼，應(yīng)用三目運(yùn)算符編寫(xiě)判斷指定年份是否為閏年的JavaScript代碼。<scriptlanguage="javascript">functionleapyear(){ varnow=newDate(); varyears=now.getFullYear(document.form1.txt_year.value); varstr; varyears=document.form1.txt_year.value; varresult=(years%4==0&&years%100!=0)||(years%400==0)?years+"是閏年":years+"不是閏年";

document.form1.txt_yearresult.value=result;}</script>【實(shí)訓(xùn)步驟】

課件制作人：實(shí)訓(xùn)3JavaScript語(yǔ)言基礎(chǔ)操作<formname="form1"method="post"action=""><tablewidth="392"height="101"border="1"align="center"cellpadding="1"cellspacing="1"bordercolor="#009900"bgcolor="#CCFF00"><tr><tdheight="25"colspan="2"align="center"class="STYLE5">判斷指定的年份是否為閏年</td></tr><tr><tdwidth="152"height="30"bgcolor="#FFFF99"><spanclass="STYLE3">請(qǐng)輸入一個(gè)四位數(shù)的年份：</span></td><tdwidth="216"bgcolor="#FFFF99"><tablewidth="196"height="29"border="0"cellpadding="0"cellspacing="0"><tr><tdwidth="136"><inputname="txt_year"type="text"value="2009"size="20"></td><tdwidth="60"> <inputtype="button"name="Button"value="計(jì)算"onClick="leapyear();"></td></tr></table></td></tr><tr><tdheight="37"colspan="2"align="center"><inputname="txt_yearresult"type="text"value=""size="51"></td></tr></table>（4）選擇“文件”/“在瀏覽器中預(yù)覽”/“IExplore6.0”，預(yù)覽網(wǎng)頁(yè)，在文本框中輸入4位數(shù)的年份，單擊“計(jì)算”按鈕，判斷指定的年份是否為閏年。

【實(shí)訓(xùn)步驟】

課件制作人：實(shí)訓(xùn)4JavaScript基本語(yǔ)句的應(yīng)用熟練掌握J(rèn)avaScript中if條件語(yǔ)句和for循環(huán)語(yǔ)句的應(yīng)用?！緦?shí)訓(xùn)目的】

課件制作人：實(shí)訓(xùn)4JavaScript基本語(yǔ)句的應(yīng)用編寫(xiě)一個(gè)JavaScript程序，應(yīng)用JavaScript腳本中的if語(yǔ)句和for循環(huán)語(yǔ)句實(shí)現(xiàn)復(fù)選框的全選和反選。單擊“全選/”復(fù)選框可以實(shí)現(xiàn)快速選擇當(dāng)前頁(yè)的所有用戶(hù)信息；當(dāng)“全選/反選”復(fù)選框處于選中狀態(tài)時(shí)，再次單擊“全選/”復(fù)選框可以實(shí)現(xiàn)快速在原有用戶(hù)選擇的狀態(tài)進(jìn)行反項(xiàng)選擇，效果如圖11.5、圖11.6所示。【實(shí)訓(xùn)內(nèi)容】

課件制作人：實(shí)訓(xùn)4JavaScript基本語(yǔ)句的應(yīng)用（1）打開(kāi)Dreamweaver，在“創(chuàng)建新項(xiàng)目”列中選擇“HTML”。（2）自動(dòng)創(chuàng)建HTML模板，將<title>…</title>標(biāo)記間的內(nèi)容改為“應(yīng)用if語(yǔ)句和for循環(huán)語(yǔ)句實(shí)現(xiàn)復(fù)選框的全選和反選”，將文件保存為index.html。（3）在<head>…</head>標(biāo)記間編寫(xiě)JavaScript腳本。應(yīng)用if語(yǔ)句和for循環(huán)語(yǔ)句實(shí)現(xiàn)復(fù)選框的全選和反選。<scriptlanguage="javascript">functionCheckAll(elementsA,elementsB){ varlen=elementsA; if(len.length>0){ for(i=0;i<len.length;i++){ elementsA[i].checked=true; } if(elementsB.checked==false){ for(j=0;j<len.length;j++){ elementsA[j].checked=false; } } } else{ len.checked=true; if(elementsB.checked==false){ len.checked=false; } }}</script>【實(shí)訓(xùn)步驟】

課件制作人：實(shí)訓(xùn)4JavaScript基本語(yǔ)句的應(yīng)用（4）在<body>…</body>標(biāo)記間添加用戶(hù)信息管理頁(yè)面表單元素的HTML代碼。<formname="deluser"method="post"><tablewidth="600"border="1"align="center"cellpadding="3"cellspacing="2"bordercolor="#FFFFFF"bordercolorlight="#FFFFFF"bordercolordark="#336699"bgcolor="#CCFF33"><tr> <tdwidth="7%"height="27"align="center"nowrapstyle="color:black;">選項(xiàng)</td><tdwidth="21%"height="27"align="center"nowrapstyle="color:black;">用戶(hù)名稱(chēng)</td> <tdwidth="22%"height="27"align="center"nowrapstyle="color:black;">密碼</td> <tdwidth="30%"height="27"align="center"nowrapstyle="color:black;">注冊(cè)時(shí)間</td> </tr><tr><tdheight="27"align=centernowrapbgcolor="#FFFFCC"><inputtype="checkbox"name="ChkBox"value="130008100001"style="border:0;"> </td> <tdheight="27"align=centernowrapbgcolor="#FFFFCC"style="color:black;">純凈水</td> <tdheight="27"align=centernowrapbgcolor="#FFFFCC"style="color:black;">chunjingshui666</td> <tdheight="27"align=centernowrapbgcolor="#FFFFCC"style="color:black;">2008-11-14</td> </tr>【實(shí)訓(xùn)步驟】

課件制作人：實(shí)訓(xùn)4JavaScript基本語(yǔ)句的應(yīng)用

<tr><tdheight="27"align=centernowrapbgcolor="#FFFFCC"><inputtype="checkbox"name="ChkBox"value="130008100008"style="border:0;"> </td>

<tdheight="27"align=centernowrapbgcolor="#FFFFCC"style="color:black;">小草</td>

<tdheight="27"align=centernowrapbgcolor="#FFFFCC"style="color:black;">xiaocao888</td>

<tdheight="27"align=centernowrapbgcolor="#FFFFCC"style="color:black;">2008-12-10</td></tr><tr><tdheight="27"align=centernowrapbgcolor="#FFFFCC"><inputtype="checkbox"name="ChkBox"value="130008100066"style="border:0;"> </td> <tdheight="27"align=centernowrapbgcolor="#FFFFCC"style="color:black;">城市中的狼</td> <tdheight="27"align=centernowrapbgcolor="#FFFFCC"style="color:black;">city12345</td> <tdheight="27"align=centernowrapbgcolor="#FFFFCC"style="color:black;">2009-2-6</td> </tr></table><tablewidth="600"border="0"cellspacing="0"cellpadding="0"align=center><tr><tdwidth="9%"height="40"align=centernowrap><inputname="Chkall"type="checkbox"style="border:0;"onClick="CheckAll(this.form.ChkBox,this.form.Chkall)"></td><tdwidth="91%"align=leftnowrapstyle="color:black;">[全選/反選]</td></tr></table></form>（5）選擇“文件”/“在瀏覽器中預(yù)覽”/“IExplore6.0”，預(yù)覽網(wǎng)頁(yè)?！緦?shí)訓(xùn)步驟】

課件制作人：實(shí)訓(xùn)5函數(shù)的應(yīng)用熟練應(yīng)用JavaScript腳本進(jìn)行自定義函數(shù)，并掌握函數(shù)的調(diào)用方法?！緦?shí)訓(xùn)目的】

課件制作人：實(shí)訓(xùn)5函數(shù)的應(yīng)用編寫(xiě)一個(gè)JavaScript程序，調(diào)用自定義函數(shù)來(lái)限制發(fā)送祝福的文字?jǐn)?shù)量，效果如圖11.7所示。【實(shí)訓(xùn)內(nèi)容】

課件制作人：實(shí)訓(xùn)5函數(shù)的應(yīng)用（1）打開(kāi)Dreamweaver，在“創(chuàng)建新項(xiàng)目”列中選擇“HTML”。（2）自動(dòng)創(chuàng)建HTML模板，將<title>…</title>標(biāo)記間的內(nèi)容改為“調(diào)用自定義函數(shù)來(lái)限制發(fā)送祝福的文字?jǐn)?shù)量”，將文件保存為index.html。（3）在<head>…</head>標(biāo)記間編寫(xiě)JavaScript腳本。實(shí)現(xiàn)用戶(hù)輸入文字信息字符數(shù)量的計(jì)算，其中，英文、數(shù)字、空格占1個(gè)字符，漢字占兩個(gè)字符。<scriptlanguage="javascript">functiontextCounter(field,countfield,maxlimit){ //文本信息限制在150個(gè)字符內(nèi)

varStrValue=field.value; varByteCount=0; varStrLength=field.value.length; for(i=0;i<StrLength;i++){ //計(jì)算輸入的字符個(gè)數(shù)，英文數(shù)字占1個(gè)字符，漢字占兩個(gè)字符

ByteCount=(StrValue.charCodeAt(i)<=256)?ByteCount+1:ByteCount+2; }

if(ByteCount<=maxlimit){ strtemp=StrValue; countfield.value=maxlimit-ByteCount; }else{ document.getElementById('content').innerHTML=strtemp; }}</script>【實(shí)訓(xùn)步驟】

課件制作人：實(shí)訓(xùn)5函數(shù)的應(yīng)用（4）在<body>…</body>標(biāo)記間添加用戶(hù)信息管理頁(yè)面表單元素的HTML代碼。<formid="form1"name="form1"method="post"action="wishingadd_ok.php"><spanstyle="margin-left:22px">您還能輸入<inputstyle="BORDER-TOP-WIDTH:0px;BORDER-LEFT-WIDTH:0px;BORDER-BOTTOM-WIDTH:0px;BORDER-RIGHT-WIDTH:0px;color:#CC0099"readonly="readOnly"maxlength="3"size="3"value="150"name="freeLength"/>個(gè)字符的祝福信息，發(fā)送給你最想祝福的人吧！<br/><textareaname="content"id="content"cols="66"rows="6"onkeydown="textCounter(this.form.content,this.form.freeLength,150)"onkeyup="textCounter(this.form.content,this.form.freeLength,150)"style="background:url('images/mrbccd.gif')"></textarea></span></form>（5）選擇“文件”/“在瀏覽器中預(yù)覽”/“IExplore6.0”，預(yù)覽網(wǎng)頁(yè)?！緦?shí)訓(xùn)步驟】

課件制作人：實(shí)訓(xùn)6對(duì)象編程的操作（1）熟練掌握J(rèn)avaScript中對(duì)象的創(chuàng)建及使用。（2）熟練應(yīng)用JavaScript中的日期對(duì)象、字符串對(duì)象、數(shù)學(xué)對(duì)象和數(shù)組對(duì)象。【實(shí)訓(xùn)目的】

課件制作人：實(shí)訓(xùn)6對(duì)象編程的操作編寫(xiě)一個(gè)JavaScript程序，本實(shí)例主要應(yīng)用日期對(duì)象、字符串對(duì)象、數(shù)學(xué)對(duì)象和數(shù)組對(duì)象來(lái)獲取指定日期的相關(guān)信息，并用Lunar對(duì)象將指定日期轉(zhuǎn)換成相應(yīng)的農(nóng)歷日期。效果如圖11.8所示。【實(shí)訓(xùn)內(nèi)容】

課件制作人：實(shí)訓(xùn)6對(duì)象編程的操作（1）打開(kāi)Dreamweaver，在“創(chuàng)建新項(xiàng)目”列中選擇“HTML”。（2）自動(dòng)創(chuàng)建HTML模板，將<title>…</title>標(biāo)記間的內(nèi)容改為“帶農(nóng)歷的日歷”，將文件保存為index.html。（3）在頁(yè)面中添加一個(gè)表格，代碼如下：<CENTER><FORMname=CLD><TABLE><TR><TDalign=middle><TABLEborder=1cellpadding="0"cellspacing="0"bordercolordark="#FFFFFF"

bordercolor="#ffffff"bordercolorlight="#EEEEEE"><TRbgcolor="#006600"><TDcolSpan=7><FONTcolor=#ffffffstyle="FONT-SIZE:9pt">公歷<SELECTname=SYonchange=changeCld()style="FONT-SIZE:9pt">JavaScript代碼在Menu組件中動(dòng)態(tài)添加下拉菜單（年）：<SCRIPTlanguage="JavaScript">for(i=1900;i<2050;i++)document.write('<option>'+i);</SCRIPT></SELECT>年<SELECTname=SMonchange=changeCld()style="FONT-SIZE:9pt">【實(shí)訓(xùn)步驟】

課件制作人：實(shí)訓(xùn)6對(duì)象編程的操作JavaScript代碼在Menu組件中動(dòng)態(tài)添加下拉菜單（月）：<SCRIPTlanguage="JavaScript">for(i=1;i<13;i++)document.write('<option>'+i);</SCRIPT>在表格中添加單元格并設(shè)置單元格文本大小的HTML代碼如下：</SELECT>月</FONT><FONTcolor=#ffffffface=宋體id=GZstyle="FONT-SIZE:12pt"></FONT><BR></TD></TR><TRalign=middlebgColor=#e0e0e0><TDwidth=54style="font-size:9pt;padding:5pt;">日</TD><TDwidth=54style="font-size:9pt">一</TD><TDwidth=54style="font-size:9pt">二</TD><TDwidth=54style="font-size:9pt">三</TD><TDwidth=54style="font-size:9pt">四</TD><TDwidth=54style="font-size:9pt">五</TD><TDwidth=54style="font-size:9pt">六</TD></TR>【實(shí)訓(xùn)步驟】

課件制作人：實(shí)訓(xùn)6對(duì)象編程的操作JavaScript代碼在表格中添加6行7列的單元格。代碼如下：

<SCRIPTlanguage="JavaScript">vargNum;for(i=0;i<6;i++){document.write('<tralign=center>');for(j=0;j<7;j++){gNum=i*7+j;document.write('<tdid="GD'+gNum+'"><fontid="SD'+gNum+'"size=2face="ArialBlack"');if(j==0)document.write('color=red');if(j==6)document.write('color=#000080');document.write('TITLE=""></font><br><fontid="LD'+gNum+'"size=2style="font-size:9pt"></font></td>');}document.write('</tr>');}</SCRIPT>HTML代碼的相關(guān)結(jié)束標(biāo)記。代碼如下：</TABLE></TD></TR></TABLE></FORM></CENTER>【實(shí)訓(xùn)步驟】

課件制作人：實(shí)訓(xùn)6對(duì)象編程的操作（4）編輯用于實(shí)現(xiàn)公歷日歷與農(nóng)歷日歷的JavaScript代碼。用數(shù)組記錄日歷中的相關(guān)信息。<SCRIPTlanguage="JavaScript">varlunarInfo=newArray(0x04bd8,0x04ae0,0x0a570,0x054d5,0x0d260,0x0d950,0x16554,0x056a0,0x09ad0,0x055d2,0x04ae0,0x0a5b6,0x0a4d0,0x0d250,0x1d255,0x0b540,0x0d6a0,0x0ada2,0x095b0,0x14977,0x04970,0x0a4b0,0x0b4b5,0x06a50,0x06d40,0x1ab54,0x02b60,0x09570,0x052f2,0x04970,0x06566,0x0d4a0,0x0ea50,0x06e95,0x05ad0,0x02b60,0x186e3,0x092e0,0x1c8d7,0x0c950,0x0d4a0,0x1d8a6,0x0b550,0x056a0,0x1a5b4,0x025d0,0x092d0,0x0d2b2,0x0a950,0x0b557,0x06ca0,0x0b550,0x15355,0x04da0,0x0a5d0,0x14573,0x052d0,0x0a9a8,0x0e950,0x06aa0,0x0aea6,0x0ab50,0x04b60,0x0aae4,0x0a570,0x05260,0x0f263,0x0d950,0x05b57,0x056a0,0x096d0,0x04dd5,0x04ad0,0x0a4d0,0x0d4d4,0x0d250,0x0d558,0x0b540,0x0b5a0,0x195a6,0x095b0,0x049b0,0x0a974,0x0a4b0,0x0b27a,0x06a50,0x06d40,0x0af46,0x0ab60,0x09570,0x04af5,0x04970,0x064b0,0x074a3,0x0ea50,0x06b58,0x055c0,0x0ab60,0x096d5,0x092e0,0x0c960,0x0d954,0x0d4a0,0x0da50,0x07552,0x056a0,0x0abb7,0x025d0,0x092d0,0x0cab5,0x0a950,0x0b4a0,0x0baa4,0x0ad50,0x055d9,0x04ba0,0x0a5b0,0x15176,0x052b0,0x0a930,0x07954,0x06aa0,0x0ad50,0x05b52,0x04b60,0x0a6e6,0x0a4e0,0x0d260,0x0ea65,0x0d530,0x05aa0,0x076a3,0x096d0,0x04bd7,0x04ad0,0x0a4d0,0x1d0b6,0x0d250,0x0d520,0x0dd45,0x0b5a0,0x056d0,0x055b2,0x049b0,0x0a577,0x0a4b0,0x0aa50,0x1b255,0x06d20,0x0ada0)varsolarMonth=newArray(31,28,31,30,31,30,31,31,30,31,30,31);varAnimals=newArray("鼠","牛","虎","兔","龍","蛇","馬","羊","猴","雞","狗","豬");varsolarTerm=newArray("小寒","大寒","立春","雨水","驚蟄","春分","清明","谷雨","立夏","小滿(mǎn)","芒種","夏至","小暑","大暑","立秋","處暑","白露","秋分","寒露","霜降","立冬","小雪","大雪","冬至"); //農(nóng)歷的節(jié)氣varsTermInfo=newArray(0,21208,42467,63836,85337,107014,128867,150921,173149,195551,218072,240693,263343,285989,308563,331033,353350,375494,397447,419210,440795,462224,483532,504758);varnStr1=newArray('日','一','二','三','四','五','六','七','八','九','十');varnStr2=newArray('初','十','廿','卅');【實(shí)訓(xùn)步驟】

課件制作人：實(shí)訓(xùn)6對(duì)象編程的操作用數(shù)組保存公歷的節(jié)日。varsFtv=newArray("0101元旦","0214情人節(jié)","0308婦女節(jié)","0312植樹(shù)節(jié)","0315消費(fèi)者權(quán)益日","0401愚人節(jié)","0501勞動(dòng)節(jié)","0504青年節(jié)","0512護(hù)士節(jié)","0601兒童節(jié)","0701建黨節(jié)","0801建軍節(jié)","0910教師節(jié)","0928孔子誕辰","1001國(guó)慶節(jié)","1006老人節(jié)","1024聯(lián)合國(guó)日","1224平安夜","1225圣誕節(jié)")【實(shí)訓(xùn)步驟】

課件制作人：實(shí)訓(xùn)6對(duì)象編程的操作用數(shù)組保存農(nóng)歷的節(jié)日。varlFtv=newArray("0101春節(jié)","0115元宵節(jié)","0505端午節(jié)","0707七夕情人節(jié)","0715中元節(jié)","0815中秋節(jié)","0909重陽(yáng)節(jié)","1208臘八節(jié)","1223小年")自定義函數(shù)lYearDays(y)，用于返回農(nóng)歷y年的總天數(shù)。functionlYearDays(y){vari,sum=348;for(i=0x8000;i>0x8;i>>=1)sum+=(lunarInfo[y-1900]&i)?1:0;return(sum+leapDays(y));}自定義函數(shù)leapDays(y)，用于返回農(nóng)歷y年閏月的天數(shù)。functionleapDays(y){if(leapMonth(y))return((lunarInfo[y-1900]&0x10000)?30:29);elsereturn(0);}自定義函數(shù)leapMonth(y)，用于判斷y年的農(nóng)歷中哪個(gè)月是閏月,不是閏月返回0。functionleapMonth(y){return(lunarInfo[y-1900]&0xf);}自定義函數(shù)monthDays(y,m)，用于返回農(nóng)歷y年m月的總天數(shù)。functionmonthDays(y,m){return((lunarInfo[y-1900]&(0x10000>>m))?30:29);}【實(shí)訓(xùn)步驟】

課件制作人：實(shí)訓(xùn)6對(duì)象編程的操作自定義函數(shù)Dianaday()，用于算出當(dāng)前月第一天的農(nóng)歷日期和當(dāng)前農(nóng)歷日期下一個(gè)月農(nóng)歷的第一天日期。functionDianaday(objDate){vari,leap=0,temp=0;varbaseDate=newDate(1900,0,31);varoffset=(objDate-baseDate)/86400000;this.dayCyl=offset+40;this.monCyl=14;for(i=1900;i<2050&&offset>0;i++){temp=lYearDays(i)offset-=temp;this.monCyl+=12;}if(offset<0){offset+=temp;i--;this.monCyl-=12;}this.year=i;this.yearCyl=i-1864;leap=leapMonth(i); //閏哪個(gè)月

this.isLeap=false;for(i=1;i<13&&offset>0;i++){if(leap>0&&i==(leap+1)&&this.isLeap==false){

//閏月--i;this.isLeap=true;temp=leapDays(this.year);}else{temp=monthDays(this.year,i);}if(this.isLeap==true&&i==(leap+1))this.isLeap=false;//解除閏月

offset-=temp;if(this.isLeap==false)this.monCyl++;}if(offset==0&&leap>0&&i==leap+1)if(this.isLeap){this.isLeap=false;}else{this.isLeap=true;--i;--this.monCyl;}if(offset<0){offset+=temp;--i;--this.monCyl;}this.month=i;this.day=offset+1;}【實(shí)訓(xùn)步驟】

課件制作人：實(shí)訓(xùn)6對(duì)象編程的操作自定義函數(shù)solarDays(y,m)，用于返回公歷y年m+1月的天數(shù)。functionsolarDays(y,m){if(m==1)return(((y%4==0)&&(y%100!=0)||(y%400==0))?29:28);elsereturn(solarMonth[m]);}自定義函數(shù)calElement()用于記錄公歷和農(nóng)歷某天的日期。functioncalElement(sYear,sMonth,sDay,week,lYear,lMonth,lDay,isLeap){this.isToday=false;//公歷

this.sYear=sYear;this.sMonth=sMonth;this.sDay=sDay;this.week=week;//農(nóng)歷

this.lYear=lYear;this.lMonth=lMonth;this.lDay=lDay;this.isLeap=isLeap;//節(jié)日記錄

this.lunarFestival=''; //農(nóng)歷節(jié)日

this.solarFestival=''; //公歷節(jié)日

this.solarTerms=''; //節(jié)氣}【實(shí)訓(xùn)步驟】

課件制作人：實(shí)訓(xùn)6對(duì)象編程的操作自定義函數(shù)sTerm(y,n)用于返回某年的第n個(gè)節(jié)氣為幾日（從小寒算起）。functionsTerm(y,n){varoffDate=newDate((31556925974.7*(y-1900)+sTermInfo[n]*60000)+Date.UTC(1900,0,6,2,5));return(offDate.getUTCDate())}自定義函數(shù)calendar(y,m)用于保存y年m+1月的相關(guān)信息。varfat=mat=9;vareve=0;functioncalendar(y,m){fat=mat=0;varsDObj,lDObj,lY,lM,lD=1,lL,lX=0,tmp1,tmp2;varlDPOS=newArray(3);varn=0;varfirstLM=0;sDObj=newDate(y,m,1); //當(dāng)月第一天的信息

this.length=solarDays(y,m); //公歷當(dāng)月天數(shù)

this.firstWeek=sDObj.getDay(); //公歷當(dāng)月1日星期幾

if((m+1)==5){fat=sDObj.getDay()}if((m+1)==6){mat=sDObj.getDay()}【實(shí)訓(xùn)步驟】

課件制作人：實(shí)訓(xùn)6對(duì)象編程的操作for(vari=0;i<this.length;i++){if(lD>lX){sDObj=newDate(y,m,i+1); //當(dāng)月第一天的信息

lDObj=newDianaday(sDObj); //農(nóng)歷

lY=lDObj.year; //農(nóng)歷年

lM=lDObj.month; //農(nóng)歷月

lD=lDObj.day; //農(nóng)歷日

lL=lDObj.isLeap; //農(nóng)歷是否閏月

lX=lL?leapDays(lY):monthDays(lY,lM);

//農(nóng)歷當(dāng)月最后一天

if(lM==12){eve=lX}if(n==0)firstLM=lM;lDPOS[n++]=i-lD+1;}this[i]=newcalElement(y,m+1,i+1,nStr1[(i+this.firstWeek)%7],lY,lM,lD++,lL);if((i+this.firstWeek)%7==0){this[i].color='red'; //周日顏色}}//節(jié)氣

tmp1=sTerm(y,m*2)-1;tmp2=sTerm(y,m*2+1)-1;this[tmp1].solarTerms=solarTerm[m*2];this[tmp2].solarTerms=solarTerm[m*2+1];if((this.firstWeek+12)%7==5) //黑色星期五

this[12].solarFestival+='黑色星期五';

if(y==tY&&m==tM)this[tD-1].isToday=true; //今日}【實(shí)訓(xùn)步驟】

課件制作人：實(shí)訓(xùn)6對(duì)象編程的操作自定義函數(shù)cDay(

)，用中文顯示農(nóng)歷的日期。functioncDay(d){vars;switch(d){case10:s='初十';break;case20:s='二十';break;break;case30:s='三十';break;break;default:s=nStr2[Math.floor(d/10)];s+=nStr1[d%10];}return(s);}【實(shí)訓(xùn)步驟】

課件制作人：實(shí)訓(xùn)6對(duì)象編程的操作自定義函數(shù)drawCld(

)，在表格中顯示公歷和農(nóng)歷的日期以及相關(guān)節(jié)日。varcld;functiondrawCld(SY,SM){varTF=true;varp1=p2="";vari,sD,s,size;cld=newcalendar(SY,SM);GZ.innerHTML='                       【'+Animals[(SY-4)%12]+'】'; //生肖

for(i=0;i<42;i++){sObj=eval('SD'+i);lObj=eval('LD'+i);sObj.className='';sD=i-cld.firstWeek;if(sD>-1&&sD<cld.length){ //日期內(nèi)

sObj.innerHTML=sD+1;if(cld[sD].isToday){sObj.style.color='#9900FF';} //今日顏色

else{sObj.style.color='';}if(cld[sD].lDay==1){ //顯示農(nóng)歷月

lObj.innerHTML='<b>'+(cld[sD].isLeap?'閏':'')+cld[sD].lMonth+'月'+(monthDays(cld[sD].lYear,cld[sD].lMonth)==29?'小':'大')+'</b>';}else{lObj.innerHTML=cDay(cld[sD].lDay);}//顯示農(nóng)歷日

varSlfw=Ssfw=null;s=cld[sD].solarFestival;【實(shí)訓(xùn)步驟】

課件制作人：實(shí)訓(xùn)6對(duì)象編程的操作for(varipp=0;ipp<lFtv.length;ipp++){ //農(nóng)歷節(jié)日

if(parseInt(lFtv[ipp].substr(0,2))==(cld[sD].lMonth)){if(parseInt(lFtv[ipp].substr(2,4))==(cld[sD].lDay)){lObj.innerHTML=lFtv[ipp].substr(5);Slfw=lFtv[ipp].substr(5);}}

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論