第6章 網(wǎng)頁行為語言——JavaScript 單飛的鞋子.ppt

1、網(wǎng)頁設(shè)計與制作教程(第4版）,機械工業(yè)出版社同名教材 配套電子教案,JavaScript簡介 行為 三 表格布局頁面的綜合應(yīng)用 基于對象的JavaScript腳本語言 五 對象事件 六 制作JavaScript特效 七 實訓(xùn),第6章 網(wǎng)頁行為語言JavaScript,腳本（Script）實際上就是一段程序，用來完成某些特殊的功能。腳本程序既可以在服務(wù)器端運行（稱為服務(wù)器腳本，例如ASP腳本、PHP腳本等），也可以直接在瀏覽器端運行（稱為客戶端腳本）。 JavaScript是一種基于對象（Object）和事件驅(qū)動（Event Driven）并具有安全性能的腳本語言。使用它的目的是與HTML、CS

2、S一起實現(xiàn)在一個Web頁面中鏈接多個對象，與Web客戶交互的作用。 JavaScript不是Java，只不過兩者類似。JavaScript語言的前身叫作Livescript，自從Sun公司推出著名的Java語言后，Netscape公司引進了Sun公司有關(guān)Java的程序概念，將Livescript重新進行設(shè)計，并改名為JavaScript。,6.1 JavaScript簡介,6.2.1 行為的基本概念 行為是Dreamweaver內(nèi)置的JavaScript程序庫，由事件（Event）和動作（Action）組成。行為是指某個事件發(fā)生時瀏覽器執(zhí)行的動作，能實現(xiàn)用戶與網(wǎng)頁間的交互，通過某個動作來觸發(fā)某

3、項計劃。 事件是瀏覽器生成的消息，它指示該頁的訪問者已執(zhí)行了某種操作。不同的頁面元素定義了不同的事件，在大多數(shù)瀏覽器中，onMouseOver事件和onClick事件是與鏈接關(guān)聯(lián)的事件，而onLoad事件是與圖像和文檔的body部分關(guān)聯(lián)的事件。 動作是一段預(yù)先編寫好的JavaScript代碼，可用于執(zhí)行以下常見的任務(wù)：打開瀏覽器窗口、顯示或隱藏AP元素、彈出信息、設(shè)置導(dǎo)航欄圖像、播放聲音或影片等。,6.2 行為,6.2.2 行為面板 Dreamweaver CS4中，行為面板默認的位置位于“標簽檢查器”組合面板中，可以使用下面的方法打開行為面板。 執(zhí)行“窗口”“行為”命令； 按Shift+F4

4、組合鍵。 使用“行為”面板可以將行為附加到頁面元素，并可以修改以前所附加行為的參數(shù)。已附加到當前所選頁面元素的行為顯示在行為列表中，并按事件以字母順序列出。如果針對同一個事件列有多個動作，則會按在列表中出現(xiàn)的順序執(zhí)行這些動作；如果行為列表中沒有顯示任何行為，則表示沒有行為附加到當前所選的頁面元素。,6.2 行為,6.3.1 利用行為面板設(shè)置彈出窗口頁面 彈出窗口頁面是使用“打開瀏覽器窗口”行為實現(xiàn)的，是指在一個新的窗口中打開一個廣告效果的頁面，用戶可以指定新窗口的大小、特性（是否可以調(diào)整大小、是否具有菜單欄等）和名稱。 如果不設(shè)置該窗口的任何屬性，在打開該窗口時它的大小和屬性與打開它的窗口相同

5、，指定窗口的任何屬性都將自動關(guān)閉所有其它未明確設(shè)置的屬性。例如，如果用戶不設(shè)置窗口的任何屬性，窗口將以1024像素768像素的大小打開，并具有導(dǎo)航條、地址工具欄、狀態(tài)欄和菜單欄。如果用戶將窗口寬度設(shè)置為640像素、高度設(shè)置為480像素，但不設(shè)置其它屬性，則該窗口將以640像素480像素的大小打開，并且不顯示工具欄。,6.3 頁面對象行為,6.3.2 利用行為面板設(shè)置彈出信息框 “彈出信息”行為顯示一個包含指定信息的JavaScript警告。因為JavaScript警告對話框只有一個“確定”按鈕，所以使用此行為可以提供用戶信息，但不能為用戶提供選擇操作。 設(shè)置彈出信息框的方法如下。 選擇頁面對象

6、，然后從“行為”面板的“添加行為”菜單中選擇“彈出信息”，打開“彈出信息”對話框，如圖6-7所示。 在對話框的“消息”文本框中輸入用戶希望顯示的消息。 單擊“確定”按鈕，此時在“行為”面板中會自動添加一個單擊對象的onClick事件，如圖6-8所示。,6.3 頁面對象行為,6.3.3 案例一：制作曙光大學(xué)網(wǎng)站首頁彈出窗口頁面 【案例綜述】制作伴隨曙光大學(xué)網(wǎng)站首頁打開而自動打開的廣告窗口頁面。 【案例展示】當曙光大學(xué)網(wǎng)站首頁在瀏覽器中打開時，廣告頁面在寬度為400、高度為300的窗口中自動打開，實例效果如圖6-9所示。,6.3 頁面對象行為,6.4.1 對象及相關(guān)概念 1對象 （1）對象的概念

7、（2）對象的使用 2對象的屬性 3對象的事件 4對象的方法,6.4 基于對象的JavaScript腳本語言,6.4.2 DHTML對象模型簡介 在DHTML模型中，最頂層的對象是Window對象，其他對象可以看做是Window對象的屬性，如圖6-15所示。其中，對于編程最重要的屬性是Document對象。Document對象表示瀏覽器中當前HTML文檔，通過該對象能夠獲得關(guān)于當前文檔的信息，可以檢測和修改當前HTML文檔的元素，還可以響應(yīng)事件。,6.4 基于對象的JavaScript腳本語言,6.5.1 對象事件的分類 在JavaScript中，事件是預(yù)先定義好的、能夠被對象識別的動作，事件定

8、義了用戶與網(wǎng)頁交互時產(chǎn)生的各種操作。例如，單擊按鈕時，就產(chǎn)生一個事件，告訴瀏覽器發(fā)生了需要進行處理的單擊操作。瀏覽器自己的一些動作也可能產(chǎn)生事件，例如，瀏覽器載入個網(wǎng)頁時，就會產(chǎn)生Load事件。當事件發(fā)生時，JavaScript將檢測兩條信息，即發(fā)生的是哪種事件和哪個對象接收了事件。 對象事件有三類： 用戶引起的事件，如網(wǎng)頁裝載、表單提交等。 引起頁面之間跳轉(zhuǎn)的事件，主要是超級鏈接。 表單內(nèi)部與界面對象的交互，包括界面對象的改變等。這類事件可以按照應(yīng)用程序的具體功能自由設(shè)計。,6.5 對象事件,6.5.2 常用的事件及處理程序 1瀏覽器事件 瀏覽器事件主要由Load、unLoad、DragDr

9、op以及Submit等事件組成。 2鼠標事件 3鍵盤事件,6.5 對象事件,6.6.1 案例二：制作曙光大學(xué)網(wǎng)站首頁滾動友情鏈接院校信息【案例綜述】使用字幕技術(shù)和JavaScript腳本語言修改曙光大學(xué)網(wǎng)站首頁友情鏈接欄目的展示形式。 【案例展示】使用循環(huán)向上滾動的字幕展示友情鏈接的院校信息。當瀏覽者將鼠標移動到字幕區(qū)域后，字幕停止運動，讓瀏覽者清晰地看到相關(guān)信息。,6.6 制作JavaScript特效,6.6.2 案例三：制作曙光大學(xué)網(wǎng)站首頁循環(huán)滾動圖片廣告 【案例綜述】使用字幕技術(shù)和JavaScript腳本語言修改曙光大學(xué)網(wǎng)站首頁學(xué)校風采展示圖片的展示形式。 【案例展示】使用循環(huán)向左滾動的

10、字幕展示學(xué)校風采的系列圖片。當瀏覽者將鼠標移動到字幕區(qū)域后，字幕停止運動；當瀏覽者將鼠標移出字幕區(qū)域后，字幕繼續(xù)運動。該字幕是不間斷循環(huán)滾動的，本案例的效果如圖6-18所示。,6.6 制作JavaScript特效,6.6.3 案例四：制作曙光大學(xué)網(wǎng)站首頁幻燈切換廣告 【案例綜述】制作曙光大學(xué)網(wǎng)站首頁幻燈切換廣告，展示學(xué)校最新的新聞圖片。 【案例展示】制作學(xué)校新聞欄目中的幻燈切換廣告。每隔一段時間，廣告自動切換到下一幅畫面；用戶單擊廣告下方的數(shù)字，將直接切換到相應(yīng)的畫面；用戶單擊鏈接文字，可以打開相應(yīng)的網(wǎng)頁。,6.6 制作JavaScript特效,6.6.3 案例四：制作曙光大學(xué)網(wǎng)站首頁幻燈切換

11、廣告 【案例綜述】制作曙光大學(xué)網(wǎng)站首頁幻燈切換廣告，展示學(xué)校最新的新聞圖片。 【案例展示】制作學(xué)校新聞欄目中的幻燈切換廣告。每隔一段時間，廣告自動切換到下一幅畫面；用戶單擊廣告下方的數(shù)字，將直接切換到相應(yīng)的畫面；用戶單擊鏈接文字，可以打開相應(yīng)的網(wǎng)頁。,6.6 制作JavaScript特效,6.7.1 實訓(xùn)一：制作“愛家美食”網(wǎng)站菜譜彈出信息框 【 【實訓(xùn)綜述】讀者在學(xué)習了Dremweaver內(nèi)置行為的基礎(chǔ)上，進一步加強內(nèi)置行為的練習，制作更多的網(wǎng)頁交互功能。 【實訓(xùn)展示】制作“愛家美食”網(wǎng)站菜譜彈出信息框，當瀏覽者用鼠標單擊菜譜圖像后，彈出一個信息框，顯示菜譜的簡介信息，效果如圖6-23所示。

12、,6.7 實訓(xùn),6.7.2 實訓(xùn)二：制作“愛家美食”網(wǎng)站首頁的幻燈切換廣告【實訓(xùn)綜述】讀者在學(xué)習了JavaScript腳本語言的基礎(chǔ)上，進一步加強使用代碼制作網(wǎng)頁特效的練習。 【實訓(xùn)展示】修改“愛家美食”網(wǎng)站首頁的靜態(tài)廣告圖片為動態(tài)的幻燈切換廣告，本實訓(xùn)要求不使用Flash動畫playswf.swf實現(xiàn)幻燈切換廣告效果，采用純JavaScript代碼的形式實現(xiàn)這一功能，效果如圖6-24所示。,6.7 實訓(xùn),1使用內(nèi)置行為設(shè)置狀態(tài)欄顯示文字，當頁面加載時，在狀態(tài)欄顯示文字“歡迎您訪問本站！”的提示。 2使用內(nèi)置行為制作一個彈出式下拉菜單，效果如圖6-25所示。 3制作一個循環(huán)切換畫面的廣告網(wǎng)頁。每隔一段時