第6章_網(wǎng)頁的行為設(shè)計和實現(xiàn)ppt課件

1、第第6章章 網(wǎng)頁行為的設(shè)計與實現(xiàn)網(wǎng)頁行為的設(shè)計與實現(xiàn) 10 10 電子商務(wù)電子商務(wù) 網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)本章學(xué)習(xí)目標(biāo)本章學(xué)習(xí)目標(biāo)(1) 理解JavaScript基于對象的思想和事件處理機制；(2) 能編寫JavaScript代碼實現(xiàn)圖像幻燈、滾動和時間等網(wǎng)頁特效；(3) 會編寫鼠標(biāo)事件處理函數(shù)和瀏覽器事件處理函數(shù)，實現(xiàn)對下拉菜單的控制。10 10 電子商務(wù)電子商務(wù) 網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)6.1 關(guān)于關(guān)于JavaScript JavaScript是由Netscape公司開發(fā)并隨Navigator 2.0瀏覽器一起發(fā)布的、基于對象和事件處理的腳本語言(Scriptin

2、g Language)。腳本(Script)實際上是一段程序，用來完成某些特殊的功能和處理用戶的某種交互行為。腳本程序既可以運行在服務(wù)器端(稱為服務(wù)器端腳本)，也可以運行在瀏覽器端(稱為客戶端腳本)。10 10 電子商務(wù)電子商務(wù) 網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)6.1 關(guān)于關(guān)于JavaScript10 10 電子商務(wù)電子商務(wù) 網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)6.1 關(guān)于關(guān)于JavaScript 10 10 電子商務(wù)電子商務(wù) 網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)6.1 關(guān)于關(guān)于JavaScript 事件是事先定義好的、能被對象識別的動作。觸發(fā)動作的原因，可以被附加到各種頁面元素上，也可以

3、附加在標(biāo)記上。如將鼠標(biāo)指針移到圖像上、把鼠標(biāo)指針移到圖像之外，單擊鼠標(biāo)左鍵等。事件的種類和數(shù)量與瀏覽器的支持能力有關(guān)。10 10 電子商務(wù)電子商務(wù) 網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)6.1 關(guān)于關(guān)于JavaScript 每種對象能識別一組預(yù)先定義的事件。并非每一種事件都會產(chǎn)生結(jié)果，因為JavaScript只是識別事件的發(fā)生，要使對象對某一事件做出響應(yīng)，就必須編寫事件處理函數(shù)。 事件處理函數(shù)是一段獨立的程序代碼，它在對象檢測到某個特定事件時響應(yīng)該事件。一個對象可以響應(yīng)一個或多個事件。 10 10 電子商務(wù)電子商務(wù) 網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)6.1 關(guān)于關(guān)于JavaScript 利用J

4、avaScript實現(xiàn)交互功能的Web網(wǎng)頁擁有3部分的內(nèi)容。 (1) 在head部分定義JavaScript函數(shù)，其中的一些可能就是事件處理函數(shù)，另外的一些可能是為了配合這些事件處理函數(shù)而編寫的普通函數(shù)。 (2) HTML的各種格式控制標(biāo)記。10 10 電子商務(wù)電子商務(wù) 網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)6.1 關(guān)于關(guān)于JavaScript(3) 擁有句柄屬性的HTML標(biāo)記。句柄是網(wǎng)頁對象的一個屬性，以存儲特定事件處理函數(shù)的信息。每當(dāng)事件發(fā)生時，JavaScript自動查找網(wǎng)頁對象中相應(yīng)的事件句柄，調(diào)用注冊在上面的事件處理函數(shù)。一般的句柄形式是在事件的名稱前加前綴on。 10 10 電子商務(wù)

5、電子商務(wù) 網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)6.2 制作循環(huán)滾動的字幕制作循環(huán)滾動的字幕10 10 電子商務(wù)電子商務(wù) 網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)6.2 制作循環(huán)滾動的字幕制作循環(huán)滾動的字幕 【演練9-1】制作循環(huán)滾動的圖像字幕。制作商城筆記本電腦展示的網(wǎng)頁，滾動的圖像支持超鏈接，并且鼠標(biāo)指針移動到圖像上時，畫面靜止；鼠標(biāo)指針移出圖像后，圖像繼續(xù)滾動，頁面顯示的效果如圖9-1所示。10 10 電子商務(wù)電子商務(wù) 網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)6.3 制作幻燈片切換的廣告制作幻燈片切換的廣告10 10 電子商務(wù)電子商務(wù) 網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)6.3 制作幻燈片切換的廣告制作幻燈片切換的廣告10 10 電子商務(wù)電子商務(wù) 網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)6.4 實訓(xùn)實訓(xùn)10 10 電子商務(wù)電子商務(wù) 網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)實踐項目實踐項目1 根據(jù)所提供資源，完成如下圖所示循環(huán)滾動頁面。你可以嘗試調(diào)整圖片大小以及一次顯示圖片數(shù)量。10 10 電子商務(wù)電子商務(wù) 網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)實驗項目實驗項目2 根據(jù)所提供資源，完成如下圖所示幻燈片切換的廣告，你可以