JavaScript與插件教學(xué)講解課件

第12章

JavaScript與插件

第12章

JavaScript與插件最初的Web頁面中基本上都是靜態(tài)的對(duì)象，即文字和圖像，使用JavaScript和DOM模型為網(wǎng)頁增加了很多交互的特性，但處理的對(duì)象仍然是文字和圖像。而如今的Web頁面中多媒體、動(dòng)畫的應(yīng)用隨處可見，它們是由各種插件實(shí)現(xiàn)的。插件是對(duì)原有DOM模型功能的補(bǔ)充，它們可以通過<object>標(biāo)簽嵌入到網(wǎng)頁內(nèi)部，很多插件還具備與JavaScript進(jìn)行交互的能力。插件的種類很多，本章將要介紹其中最常用的3種：Javaapplet、ActiveX控件和Flash。最初的Web頁面中基本上都是靜態(tài)的對(duì)象，即文Javaapplet12.1ActiveX控件12.2Flash12.3Javaapplet12.1ActiveX控件12.212.1JavaappletJavaapplet是最早的瀏覽器插件形式，它基于Java實(shí)現(xiàn)，瀏覽器可以通過applet運(yùn)行Java代碼。以前，applet必須使用<applet>標(biāo)簽進(jìn)行聲明，HTML4.0已經(jīng)不推薦使用<applet>，更傾向于使用<object>嵌入所有類型的插件。因此，Sun公司創(chuàng)建了Java插件，并將它作為Java運(yùn)行時(shí)環(huán)境（JavaRuntimeEnviroment，JRE）的一部分。12.1JavaappletJava12.1.1創(chuàng)建applet創(chuàng)建applet的方法非常簡單，只需要?jiǎng)?chuàng)建一個(gè)繼承自java.applet.Applet類的Java類即可。例12-1所示是一個(gè)簡單的applet示例?！纠?2-1】TestApplet.java12.1.1創(chuàng)建applet創(chuàng)建apple12.1.2使用applet在HTML頁面中使用applet之前，需要將其編譯生成的.class文件放置到Web服務(wù)器的目錄下。

12.1.2使用applet在HTML頁面【例12-2】TestApplet.html

（a）applet最初顯示內(nèi)容

（b）改變內(nèi)容和字體顏色圖12-1applet示例頁面

【例12-2】TestApplet.html12.2ActiveX控件在Windows的IE瀏覽器中，可以使用<object>標(biāo)簽在頁面中添加ActiveX控件。使用ActiveX控件需要在<object>的clsid屬性中指定控件的classID。ActiveX控件只能在Windows平臺(tái)使用，下載控件的過程可能受到瀏覽器安全性設(shè)置的影響。因此ActiveX控件比較適合在內(nèi)部網(wǎng)絡(luò)應(yīng)用中使用，而且操作系統(tǒng)必須是Windows。12.2ActiveX控件在Window通過JavaScript可以調(diào)用ActiveX控件對(duì)外公開的方法，在ActiveX控件內(nèi)部也可以通過觸發(fā)事件的方式調(diào)用外部的JavaScript代碼，因此ActiveX控件與JavaScript可以實(shí)現(xiàn)雙向的通信，是功能非常強(qiáng)大的瀏覽器插件。通過JavaScript可以調(diào)用Active12.2.1創(chuàng)建ActiveX控件使用微軟的VisualStudio可以很方便地創(chuàng)建ActiveX控件，本節(jié)將使用VisualStudio2019（VS2019）作為開發(fā)工具，創(chuàng)建名為“TestOcx”的控件。12.2.1創(chuàng)建ActiveX控件使用微圖12-2新建MFCActiveXControl項(xiàng)目

圖12-2新建MFCActiveXControl項(xiàng)目圖12-3MFCActiveXControl項(xiàng)目向?qū)?/p>

圖12-3MFCActiveXControl項(xiàng)目向?qū)?/p>

（a）“資源視圖”菜單

（b）資源視圖圖12-4資源視圖

（a）“資源視圖”菜圖12-5對(duì)話框

圖12-5對(duì)話框（1）添加類

（a）“添加類”菜單

（b）添加類向?qū)D12-6添加類

（1）添加類（a）“添加類”菜單（2）添加變量

（a）“添加變量”菜單

（b）添加變量向?qū)D12-7添加變量

（2）添加變量（a）“添加變量”菜（3）添加函數(shù)

（a）“添加函數(shù)”菜單

（b）添加函數(shù)向?qū)D12-8添加函數(shù)

（3）添加函數(shù)（a）“添加函數(shù)”菜單（4）添加事件

（a）“添加事件”菜單

（b）添加事件向?qū)D12-9添加事件

（4）添加事件（a）“添加事件”菜單【例12-3】

初始化ActiveX控件的對(duì)話框

【例12-3】初始化ActiveX控件的對(duì)話框12.2.2使用ActiveX控件在HTML頁面中嵌入ActiveX控件需要使用<object>標(biāo)簽，通過classid屬性指明控件的classid值。每一個(gè)ActiveX控件都具有一個(gè)全球唯一的ID標(biāo)志，VS2019會(huì)在創(chuàng)建MFCActiveXControl項(xiàng)目時(shí)自動(dòng)為控件分配ID，我們可以在TestOcx.idl源文件最后的部分找到該ID的定義，12.2.2使用ActiveX控件在HT即：//ClassinformationforCTestOcxCtrl[uuid(57C524F2-A9A7-4B48-B766-5858C062A940),helpstring("TestOcxControl"),control]coclassTestOcx{[default]dispinterface_DTestOcx;[default,source]dispinterface_DTestOcxEvents;};即：【例12-4】TestOcx.html

（a）顯示控件對(duì)話框

（b）事件處理圖12-10ActiveX控件測試頁面

【例12-4】TestOcx.html12.3FlashFlash提供了基于向量圖的動(dòng)畫設(shè)計(jì)功能，只要客戶端安裝了Flash播放器，就可以使用網(wǎng)頁中內(nèi)嵌的Flash對(duì)象。毫無疑問，F(xiàn)lash是當(dāng)今最流行的瀏覽器插件，幾乎在所有的瀏覽器和操作系統(tǒng)上都可以使用。Flash發(fā)展到今天，已經(jīng)成為富因特網(wǎng)應(yīng)用（RIA）概念的實(shí)現(xiàn)平臺(tái)，具備構(gòu)建整個(gè)網(wǎng)站和開發(fā)Web應(yīng)用的能力。本節(jié)將要介紹的是如何在網(wǎng)頁中嵌入Flash動(dòng)畫以及如何通過JavaScript與Flash進(jìn)行交互。12.3FlashFlash提供了基于向12.3.1創(chuàng)建Flash圖12-11創(chuàng)建Flash文檔

12.3.1創(chuàng)建Flash圖12-11創(chuàng)建Flash圖12-12文本輸入框的屬性設(shè)置

圖12-12文本輸入框的屬性設(shè)置圖12-13添加Button組件

圖12-13添加Button組件圖12-14Action設(shè)置界面

圖12-14Action設(shè)置界面圖12-15調(diào)整Flash文檔尺寸

圖12-15調(diào)整Flash文檔尺寸12.3.2Flash與JavaScript的交互1．嵌入Flash動(dòng)畫2．Flash與JavaScript的交互12.3.2Flash與JavaScript的交互1．嵌【例12-5】TestFlash.html

（a）JavaScript修改Flash中文本框內(nèi)容（b）Flash調(diào)用JavaScript方法圖12-16Flash與JavaScript的交互

【例12-5】TestFlash.html（a）Java3．常用的Flash方法

方

法

聲

明含

義Play()播放FlashStopPlay()停止播放FlashIsPlaying()判斷Flash是否正在播放GotoFrame(frame_number)跳轉(zhuǎn)到某一幀TotalFrames()獲取Flash的總幀數(shù)CurrentFrame()返回當(dāng)前所在幀數(shù)Rewind()使Flash返回第一幀SetZoomRect(left,top,right,buttom)放大指定區(qū)域Zoom(percent)改變Flash大小表12-1 Flash對(duì)象常用方法及其含義3．常用的Flash方法方法聲明含義PlayPan(x_position,y_position,unit)使Flash在x,y方向上平移PercentLoaded()返回Flash已經(jīng)加載的百分比LoadMovie(level_number,path)加載FlashTGotoFrame(movie_clip,frame_number)將影片剪輯跳轉(zhuǎn)到指定幀數(shù)TGotoLabel(movie_clip,label_name)將影片剪輯跳轉(zhuǎn)到指定標(biāo)簽TCurrentFrame(movie_clip)返回影片剪輯的當(dāng)前幀數(shù)TCurrentLabel(movie_clip)返回影片剪輯的當(dāng)前標(biāo)簽TPlay(movie_clip)播放影片剪輯Pan(x_position,y_position,unitTStopPlay(movie_clip)停止播放影片剪輯GetVariable(variable_name)獲取變量值SetVariable(variable_name,value)設(shè)置變量值TCallFrame(movie_clip,frame_number)執(zhí)行指定幀上的動(dòng)作TCallLabel(movie_clip,label)執(zhí)行指定標(biāo)簽所代表幀的動(dòng)作TGetProperty(movie_clip,property)獲取影片剪輯的指定屬性TSetProperty(movie_clip,property,number)設(shè)置影片剪輯的指定屬性TStopPlay(movie_clip)停止播