教學電子課件使用javascript增強交互效果

1、項目案例：當當網(wǎng)上書店第十章訓練的技能點使用Core DOM的標準方法訪問節(jié)點動態(tài)的改變頁面元素的樣式動態(tài)獲取或改變頁面的內(nèi)容使用正則表達式驗證表單內(nèi)容掌握解決瀏覽器的兼容性辦法任務(wù)描述1-1需求概述開發(fā)當當網(wǎng)上書店系統(tǒng)根據(jù)不同分類瀏覽圖書，查看最新上架新書、最近暢銷圖書在線購買圖書，在購物車中可以改變商品的數(shù)量兼容性頁面的腳本特效和CSS樣式要兼容IE8.0和Firefox 3.5任務(wù)描述1-2演示案例：當當網(wǎng)用例圖問題分析：開發(fā)和測試工具2-1開發(fā)工具Dreamweaver CS4測試工具IE Collection（多IE版本共存軟件）、Firefox 3.5（需安裝插件firebug和H

2、TML Validator）問題分析：添加腳本特效2-2項目開發(fā)步驟明確項目需要的技能在頁面上添加腳本特效頁面測試功能測試兼容性測試問題分析：頁面調(diào)試2-3調(diào)試方法使用alert( )方法使用Firebug工具調(diào)試結(jié)果功能正常實現(xiàn)在IE和FireFox中顯示效果相同難點分析：頁面特效表單即時提示錯誤信息，改變文本框獲得焦點和失去焦點時樣式，使用onFocus和onBlur事件使用innerHTML動態(tài)改變層中的內(nèi)容使用數(shù)組、循環(huán)實現(xiàn)圖書分類顯示，以及下拉列表的級聯(lián)效果和橫幅廣告的輪換顯示編寫JavaScript特效進行調(diào)試時，可以使用alert( )方法和Firebug工具兩種方法調(diào)試開發(fā)計劃

3、4-1用例1：樹形菜單15分鐘用例2：隨滾動條移動的廣告圖片20分鐘用例3：循環(huán)顯示的廣告圖片25分鐘用例4：彈出窗口5分鐘用例5： TAB切換特效10分鐘用例6：循環(huán)垂直向上滾動的內(nèi)容20分鐘用例7：展示圖書內(nèi)容25分鐘開發(fā)計劃4-2用例8：商品列表的顯示和隱藏10分鐘用例9：計算商品金額等25分鐘用例10：改變商品數(shù)量20分鐘用例11：刪除商品25分鐘用例12：改變文本框樣式 10分鐘用例13：驗證表單25分鐘用例14：二級級聯(lián)下拉列表15分鐘用例15：用戶登錄20分鐘用例1：樹形菜單需求說明網(wǎng)站導航“我的當當”實現(xiàn)下拉樹形菜單特效實現(xiàn)思路使用onmouseover、onmouseout事

4、件實現(xiàn)鼠標的移進、移出效果使用DIV的display屬性實現(xiàn)層的顯示和隱藏完成時間：15分鐘用例2：隨滾動條移動的廣告圖片需求說明頁面右側(cè)廣告圖片帶關(guān)閉按鈕廣告圖片隨滾動條上下移動實現(xiàn)思路在IE下使用currentStyle獲取圖片所在層的初始位置在Firefox下使用 putedStyle獲取圖片所在層的初始位置根據(jù)滾動條的滾動改變圖片所在層的位置使用DIV的 display屬性隱藏圖片所在的層完成時間：20分鐘用例3：循環(huán)顯示的廣告圖片實現(xiàn)思路帶數(shù)字按鈕的圖片廣告多幅圖片循環(huán)顯示實現(xiàn)思路圖片路徑和數(shù)字按鈕的編號分別保存在兩個數(shù)組中使用setInterval或 setTimeout定時顯示不

5、同的圖片改變圖片的路徑，即src屬性使用className屬性改變數(shù)字按鈕的樣式完成時間：25分鐘for(var i=1;i(MaxFrame+1);i+) if(i=NowFrame) document.getElementById(dd_scroll).src =scorll_imgi-1; document.getElementById().className=scroll_number_over; else document.getElementById().className=scroll_number_out; 顯示當前圖片設(shè)置當前按鈕的CSS樣式用例4：彈出窗口需求說明打開首頁時

6、彈出固定大小的廣告窗口頁面實現(xiàn)思路使用open實現(xiàn)彈出窗口完成時間：5分鐘用例5： TAB切換特效需求說明最新上架內(nèi)容實現(xiàn)TAB切換特效實現(xiàn)思路使用DIV的display屬性實現(xiàn)層的顯示和隱藏完成時間：10分鐘用例6：循環(huán)垂直向上滾動的內(nèi)容需求說明書訊快遞內(nèi)容實現(xiàn)無縫隙的循環(huán)垂直向上滾動特效實現(xiàn)思路function moveTop() if(dome2.offsetTop-dome.scrollTop=0) dome.scrollTop-=dome1.offsetHeight; else dome.scrollTop+ var MyMar=setInterval(moveTop,speed)

7、dome.onmouseover=function() clearInterval(MyMar) dome.onmouseout=function() MyMar=setInterval(moveTop,speed)當滾動至dome1與dome2交界時dome跳到最頂端設(shè)置定時器鼠標移上時清除定時器達到滾動停止的目的鼠標移開時重設(shè)定時器，繼續(xù)滾動完成時間：20分鐘首頁測試功能測試測試彈出固定大小窗口，書訊快遞向上循環(huán)滾動圖片廣告輪換顯示，單擊數(shù)字按鈕顯示當前圖片“我的當當”實現(xiàn)下拉列表菜單最新上架實現(xiàn)TAB切換在IE和FireFox瀏覽器下測試所有特效實現(xiàn)是否一致互相測試完成的特效功能測試出的

8、bug記錄在“常見問題列表中”頁面測試演示首頁特效結(jié)果演示演示案例：演示首頁特效 用例7：展示圖書內(nèi)容需求說明“瀏覽同級分類” 內(nèi)容使用JavaScript編寫代碼，自動產(chǎn)生分類列表實現(xiàn)思路把所有的圖書分類內(nèi)容存放在數(shù)組中使用循環(huán)語句依次讀取出數(shù)組中的內(nèi)容，然后顯示在頁面中完成時間：25分鐘var bookSort=new Array(中國當代小說(13880),“中國近現(xiàn)代小.(640);function productList() bookList=document.getElementById(product_catList_class); for(var i in bookSort)

9、var bookTitle= +bookSorti+; bookList.innerHTML+=bookTitle; 使用數(shù)組存儲圖書分類循環(huán)讀取分類顯示分類展示圖書分類頁面結(jié)果演示演示案例：演示圖書分類頁面圖書分類頁面測試功能測試測試所有的特效是否正確運行在IE和FireFox瀏覽器下測試所有特效實現(xiàn)是否一致檢查代碼是否規(guī)則互相測試完成的特效功能測試出的bug記錄在“常見問題列表中”頁面測試用例8：商品列表的顯示和隱藏需求說明單擊箭頭圖標，可以隱藏或顯示商品列表商品列表顯示時，圖標箭頭向上，商品列表隱藏時，圖標箭頭向下實現(xiàn)思路使用display屬性顯示或隱藏層使用“HTML對象.src=圖片

10、路徑”的方式改變圖片完成時間：10分鐘用例9：計算商品金額等需求說明計算所有商品金額總計、積分和節(jié)省金額實現(xiàn)思路商品的單品積分、市場價、數(shù)量放在特定的標簽中使用getElement方法讀取商品列表中所有商品計算每行的商品積分、節(jié)省的金額和金額總計累計每行的積分、節(jié)省金額和金額總計function productCount().var myTableTr=document.getElementById().getElementsByTagName(tr); for(var i=0;imyTableTr.length;i+)point=myTableTrigetElementsByTagName(

11、)0.innerHTML; integral+=point*number; document.getElementById(product_total).innerHTML=total;獲取商品的單品積分計算每行商品的總積分并進行累加顯示商品總價在頁面上完成時間：25分鐘用例10：改變商品數(shù)量需求說明根據(jù)需要可以修改商品數(shù)量修改商品數(shù)量后，商品的金額、積分也要隨著更改實現(xiàn)思路鼠標離開文本框時(onBlur)，累計計算所有商品的金額、積分和節(jié)省金額完成時間：20分鐘用例11：刪除商品需求說明可以刪除已選購商品，刪除商品時要進行確認刪除商品后，商品金額等會隨著改變實現(xiàn)思路使用getElementB

12、yId( )獲取要刪除商品的行刪除商品使用removeChild( )或deleteRow( )function deleteProduct(elementId) var delElement=document.getElementById(elementId); var flag=confirm(你確定要刪除此商品嗎？); if(flag=true)delElement.parentNode.removeChild(delElement); 刪除商品所在行的id刪除商品所在行確認是否刪除商品完成時間：25分鐘展示購物車頁面結(jié)果演示演示案例：演示購物車頁面購物車頁面測試功能測試能正確刪除商品和

13、修改商品數(shù)量，并且同時改變商品金額、積分和節(jié)省金額在IE和FireFox瀏覽器下測試所有特效實現(xiàn)是否一致檢查代碼是否規(guī)則互相測試完成的特效功能測試出的bug記錄在“常見問題列表中”頁面測試用例12：改變文本框樣式需求說明鼠標進入文本框時，文本框背景顏色變?yōu)闇\綠色，并且提示需要輸入的內(nèi)容實現(xiàn)思路文本框獲得焦點(onFocus)時改變其背景，并提示輸入內(nèi)容function emailFocus() var email=document.getElementById(email); var promptId=document.getElementById(email_prompt); email.c

14、lassName=register_input register_input_Focus; promptId.innerHTML=此郵箱將; promptId.className=register_prompt;完成時間：10分鐘用例13：驗證表單需求說明使用正則表達式驗證Email地址、昵稱、密碼的有效性鼠標離開文本框時對輸入的內(nèi)容進行驗證并提示實現(xiàn)思路文本框失去焦點(onBlur)時驗證文本框中的內(nèi)容，并且進行提示輸入正確格式提示輸入錯誤格式提示function emailBlur() var email=document.getElementById(email); var reg=/w

15、+w+(.a-zA-Z2,3)1,2$/; if(email.value=) promptId.innerHTML=電子郵件是必填項，請輸入您的Email地址; if(reg.test(email.value)=false) 驗證郵箱的正則表達式完成時間：25分鐘用例14：二級級聯(lián)下拉列表需求說明所在地的兩個下拉列表實現(xiàn)級聯(lián)效果實現(xiàn)思路改變選項使用onchange事件觸發(fā)，選擇二級列表使用數(shù)組保存所在地的省份和城市完成時間：15分鐘展示用戶注冊頁面結(jié)果演示演示案例：演示用戶注冊頁面用例15：用戶登錄需求說明驗證Email地址或昵稱輸入框不能為空驗證密碼輸入框不能為空鼠標停在文本框上時，背景顯示淺綠色，離開文本框恢復為原來的背景顏色思路分析使用onFocus實現(xiàn)文本框獲得焦點時，改變背景顏色使用onBlur實現(xiàn)文本框失去焦點時，恢復背景顏色使用className屬性改變文本框樣式完成時間：2