javascript對(duì)象及系統(tǒng)對(duì)象課件

1、第9章 javascript對(duì)象與系統(tǒng)對(duì)象學(xué)習(xí)目標(biāo)n理解系統(tǒng)對(duì)象的分層結(jié)構(gòu)n掌握window對(duì)象的幾個(gè)方法瀏覽器對(duì)象簡(jiǎn)介 2-1 http:/Window 窗口對(duì)象location地址對(duì)象document文檔對(duì)象FORM表單對(duì)象瀏覽器對(duì)象的分層結(jié)構(gòu)window.document.myform.text1 Window 窗口對(duì)象是所有頁(yè)面內(nèi)窗口對(duì)象是所有頁(yè)面內(nèi)容的根對(duì)象，在編程時(shí)常常省略容的根對(duì)象，在編程時(shí)常常省略瀏覽器對(duì)象簡(jiǎn)介 2-2q瀏覽器對(duì)象的分層結(jié)構(gòu)瀏覽器對(duì)象的分層結(jié)構(gòu)location 對(duì)象對(duì)應(yīng)對(duì)象對(duì)應(yīng)IE瀏覽器中的地址欄；瀏覽器中的地址欄；history 對(duì)應(yīng)對(duì)應(yīng)IE瀏覽器中的前進(jìn)瀏覽

2、器中的前進(jìn)/后退按鈕后退按鈕9.3 瀏覽器窗口對(duì)象window nwindow是JavaScript的最頂層對(duì)象，代表了客戶端的一個(gè)瀏覽器窗口或一個(gè)框架，一個(gè)獨(dú)立的瀏覽器窗口或一個(gè)框架就是一個(gè)window對(duì)象。 n對(duì)象名window在引用時(shí)可以省略，例如我們使用過(guò)的alert()方法是由window對(duì)象提供的，寫(xiě)全了應(yīng)該是window.alert()window對(duì)象的方法創(chuàng)建彈出式窗口創(chuàng)建彈出式窗口createPopup()n彈出式pop-up窗口也是一個(gè)wondow對(duì)象，通過(guò)window對(duì)象的document子對(duì)象及其body對(duì)象可設(shè)置窗口中顯示的內(nèi)容，但彈出式窗口僅是一個(gè)沒(méi)有邊框及任何界面

3、元素不可移動(dòng)的空白區(qū)域，類(lèi)似于漂浮在頁(yè)面上的面板或畫(huà)布，鼠標(biāo)單擊pop-up窗口外的任意位置即可關(guān)閉該窗口。 彈出式窗口的應(yīng)用說(shuō)明n必須放在函數(shù)中使用，使用步驟如下：n使用createPopup()方法創(chuàng)建窗口對(duì)象n窗口中子對(duì)象document.body的獲取n必要時(shí)，使用子對(duì)象的style屬性中的各種樣式設(shè)置屬性設(shè)置彈出窗口的外觀n使用子對(duì)象的innerHTML屬性設(shè)置彈出窗口中要顯示的文本信息n使用窗口對(duì)象的show()方法設(shè)置窗口的顯示位置和大小，show()方法的參數(shù)有5個(gè)，分別是：x坐標(biāo),y坐標(biāo), 寬度, 高度, 窗口位置所參照的頁(yè)面中對(duì)象彈出式窗口應(yīng)用舉例n課本例題h9-6.htm

4、l，定義函數(shù)內(nèi)容如下：n創(chuàng)建窗口，使用變量p表示n獲取窗口中的document.body子對(duì)象，使用變量pbody表示n設(shè)置窗口的背景色style.backgroundColor為紅色n設(shè)置窗口的邊框style.border為黑色實(shí)線1像素n設(shè)置窗口中的顯示內(nèi)容為這是一個(gè)pop-up窗口！在pop-up外面點(diǎn)擊即可關(guān)閉！n設(shè)置窗口在瀏覽器窗口中(50,80)坐標(biāo)處顯示，大小為200*50n當(dāng)點(diǎn)擊窗口中的按鈕時(shí)調(diào)用上面函數(shù)n設(shè)置窗口顯示的位置：以按鈕對(duì)象為參照物，坐標(biāo)值(50,80)處復(fù)習(xí)與提高n請(qǐng)大家創(chuàng)建一個(gè)彈出式窗口，具體要求如下：n設(shè)置窗口背景色為淺灰色n設(shè)置窗口中顯示的內(nèi)容為“HTML用

5、于在頁(yè)面中插入各種元素”n設(shè)置窗口的顯示位置為瀏覽器窗口中橫坐標(biāo)30，縱坐標(biāo)20，顯示大小為寬100，高30n在頁(yè)面中添加一個(gè)段落“網(wǎng)頁(yè)制作中要使用的基本知識(shí)包含三個(gè)模塊，分別是html、css和javascript”，當(dāng)光標(biāo)懸停在”html”上方時(shí)，顯示彈出窗口n上面窗口的顯示位置有什么問(wèn)題？如何解決授課任務(wù)1. window對(duì)象中的setInterval()方法的功能及應(yīng)用方法2. window對(duì)象中的setTimeout()方法的功能及應(yīng)用方法3.圖片輪換特效的設(shè)計(jì)過(guò)程實(shí)現(xiàn)3循環(huán)定時(shí)器循環(huán)定時(shí)器n循環(huán)定時(shí)器方法格式：n id=setInterval( code, millisec) ns

6、etInterval()方法用于創(chuàng)建一個(gè)循環(huán)定時(shí)器，并按參數(shù)millisec指定的毫秒數(shù)為周期，循環(huán)調(diào)用執(zhí)行code指定的代碼或函數(shù)，直到瀏覽器關(guān)閉或調(diào)用clearInterval()方法結(jié)束。 n結(jié)束循環(huán)定時(shí)器的方法格式： clearInterval( id )循環(huán)定時(shí)器舉例n創(chuàng)建頁(yè)面文件time.html，在其中創(chuàng)建id為time的文本框，寬度為40個(gè)字符n定義函數(shù)time1()，獲取當(dāng)前日期時(shí)間，并在文本框中顯示該日期時(shí)間，使用循環(huán)定時(shí)器方法設(shè)置每間隔1000毫秒調(diào)用函數(shù)一次n觀察文本框中時(shí)間秒數(shù)的變化n在文本框右側(cè)增加按鈕“結(jié)束定時(shí)器”n定義函數(shù)clear1()，使用clearInte

7、rval()結(jié)束上面定時(shí)器，點(diǎn)擊按鈕時(shí)調(diào)用函數(shù)clear1()4延時(shí)定時(shí)器延時(shí)定時(shí)器n延時(shí)定時(shí)器方法格式：n id=setTimeout ( code, millisec) nsetTimeout()方法用于創(chuàng)建一個(gè)延時(shí)定時(shí)器，僅在參數(shù)millisec指定的毫秒數(shù)之后調(diào)用執(zhí)行一次code指定的代碼，并返回所創(chuàng)建定時(shí)器的ID值作為取消延時(shí)定時(shí)方法的參數(shù)。 n結(jié)束循環(huán)定時(shí)器的方法格式： clearTimeout ( id )n舉例n將上例中的setInterval()方法修改為setTimeout()方法，觀察程序的執(zhí)行結(jié)果；如何修改能讓時(shí)間自動(dòng)變化？定時(shí)器應(yīng)用小實(shí)例-圖片輪換n圖片輪換的關(guān)鍵點(diǎn)：

8、n如何確定圖像區(qū)域中的新圖像n多長(zhǎng)時(shí)間輪換一幅圖n所有圖片命名規(guī)則：共同名字+下標(biāo)n設(shè)圖像區(qū)域id為img1，則在腳本中使用document. getElementById(img1).src即可設(shè)置新圖片。n更換圖片的規(guī)律：n若當(dāng)前正在顯示的是第n幅圖，則接下來(lái)要顯示的一定是第n+1幅圖，若n+1值超出了最大下標(biāo)，則從第一幅圖重新開(kāi)始；n每次函數(shù)調(diào)用時(shí)都要使用上次圖片的下標(biāo)值，所以表示下標(biāo)的變量必須設(shè)置為什么變量？頁(yè)面中的元素n在頁(yè)面中設(shè)置一個(gè)盒子divimg，盒子居中，寬度和高度根據(jù)要顯示的圖片確定n在盒子divimg中設(shè)置一個(gè)圖片元素，要求如下：n元素設(shè)置name和id為img1n顯示的

9、圖片文件為給定圖片中的第一幅定義函數(shù)imgswitch()n定義全局變量i,并設(shè)置初值為第一幅圖的序號(hào)值1n函數(shù)定義：n全局變量i增值n判斷i的值是否超過(guò)最后一幅圖的序號(hào)值，若超過(guò)則將i值變換為1n設(shè)置序號(hào)為i的圖片作為圖片區(qū)域中的內(nèi)容n使用循環(huán)定時(shí)器設(shè)置每間隔1秒鐘調(diào)用函數(shù)一次n思考：如何使用延時(shí)定時(shí)器完成每間隔1秒鐘調(diào)用函數(shù)一次？圖片輪換中濾鏡的應(yīng)用n網(wǎng)頁(yè)中經(jīng)常使用css中的濾鏡設(shè)置一些特殊效果，例如在圖片或網(wǎng)頁(yè)輪換中可以設(shè)置每幅圖或每個(gè)頁(yè)面切換進(jìn)來(lái)時(shí)采用的濾鏡效果，如矩形從大到小，矩形從小到大，圓形大小等n濾鏡filter:revealTrans：n兩個(gè)主要參數(shù)：duration設(shè)置效果

10、的持續(xù)時(shí)間(秒)；transition設(shè)置效果樣式，取值范圍023；n在圖片區(qū)域中設(shè)置該濾鏡樣式n在輪換函數(shù)中應(yīng)用濾鏡（使用apply()方法）和播放濾鏡（使用play()方法）。n該濾鏡主要支持有IE內(nèi)核的瀏覽器，所以應(yīng)用和播放之前先使用if(document.all)條件判斷瀏覽器是否是IE內(nèi)核的濾鏡應(yīng)用頁(yè)面及函數(shù)修改n頁(yè)面圖像區(qū)域增加樣式filter:revealTrans(duration=2,transition=1)n函數(shù)中，在更換圖片之后判斷瀏覽器是否是IE內(nèi)核的，若是，則應(yīng)用如下代碼完成濾鏡的應(yīng)用和播放n圖像區(qū)域. filters.revealTrans.apply();n圖像

11、區(qū)域.filters.revealTrans.play();復(fù)習(xí)回顧n圖片輪換中在腳本代碼中要更換的是哪個(gè)元素的什么屬性的取值？n本頁(yè)面中要換的圖片文件由文件名中的哪一部分決定？如何得到這一部分的取值？n圖片切換的濾鏡特效需要在樣式中使用哪個(gè)樣式屬性定義？需要定義的兩個(gè)參數(shù)是什么，作用如何？取值范圍如何？盒子的定位n沒(méi)有設(shè)置定位的盒子都按照普通流方式出現(xiàn)在瀏覽器窗口中，所謂普通流就是瀏覽器將層按照盒子在代碼中的順序和嵌套關(guān)系顯示出來(lái)n定位的應(yīng)用屬性取值及描述 position position絕對(duì)定位：absolute；相對(duì)定位：relativetop/bottomtop/bottom必須配合

12、position使用，對(duì)不同定位方式偏移量的取值和含義有所不同。 偏移量取值可以是相像素和百分比形式left/rightleft/right z-index z-index決定層的先后順序及覆蓋關(guān)系(值越大越靠前)相對(duì)定位（Relative-1.html）n先設(shè)計(jì)3個(gè)普通流布局的盒子，id選擇符分別是div1,div2,div3盒子大小400 x100，邊距填充都是0，背景色隨意設(shè)計(jì)n修改div2樣式， 設(shè)置為相對(duì)定位，觀察效果#div2 position:relative; top:20px; left:50px; div1div3div2左側(cè)空出左側(cè)空出50px50px上邊空出上邊空出20

13、px20px相對(duì)定位續(xù)n將第二個(gè)盒子設(shè)置為向左浮動(dòng)，繼續(xù)觀察效果n去掉第二個(gè)盒子的向左浮動(dòng)，再將三個(gè)盒子都設(shè)置居中，繼續(xù)觀察頁(yè)面效果n將第二個(gè)盒子的定位坐標(biāo)設(shè)置為0、0，再觀察頁(yè)面效果相對(duì)定位應(yīng)用及原理n總結(jié)n使用相對(duì)定位的元素，無(wú)論是否移動(dòng)，都將占據(jù)原來(lái)的位置。n相對(duì)定位的元素不會(huì)影響其它元素。n計(jì)算偏移量top、left的參照物是元素移動(dòng)前所在位置。n設(shè)置了相對(duì)定位的盒子，可以設(shè)置居中，也可以設(shè)置浮動(dòng)絕對(duì)定位應(yīng)用（Absolute-1.html）n先設(shè)計(jì)3個(gè)普通流布局的盒子，盒子大小400 x100，邊距填充都是0，背景色隨意設(shè)計(jì)n修改div2樣式，設(shè)置為絕對(duì)定位，觀察效果#div2 po

14、sition:absolute; top:20px; left:50px; div1div3div2距瀏覽器窗口左距瀏覽器窗口左側(cè)空出側(cè)空出50px50px距瀏覽器窗口上距瀏覽器窗口上邊空出邊空出20px20px絕對(duì)定位續(xù)n設(shè)置div2居中，能否實(shí)現(xiàn)？n修改div3盒子的寬度為500px，高度為200px；將絕對(duì)定位的div2盒子移動(dòng)到未設(shè)置定位的div3盒子中，觀察效果n繼續(xù)修改div3盒子的定位方式為絕對(duì)定位，top為60px，left為100px，觀察效果n繼續(xù)修改div3盒子定位方式為相對(duì)定位，top為20，left為100，觀察效果n將div3設(shè)置為居中，觀察效果n去掉div3的居中

15、，設(shè)置left為20，向左浮動(dòng)，觀察效果絕對(duì)定位的原理n絕對(duì)定位的元素會(huì)脫離文檔流，不再占據(jù)位置。n元素被絕對(duì)定位后，后面的元素就會(huì)視它不存在，從而占據(jù)其位置。n上面的示例中，因?yàn)閐iv2所在的容器是瀏覽器，所以 top:20px;是距離瀏覽器窗口的上端為20px； left:50px;是距離瀏覽器窗口的左端為50px。 div1絕對(duì)定位的元素包含在容器中-1div3div2距瀏覽器左邊框距瀏覽器左邊框50px50px距瀏覽器上邊框距瀏覽器上邊框20px20pxn修改absolute-1.html文件n修改div3盒子的寬度為500px，高度為200pxn將絕對(duì)定位的div2盒子移動(dòng)到未設(shè)置定

16、位的div3盒子中，觀察效果div3絕對(duì)定位的元素包含在容器中-2div1div2距包含框左側(cè)距包含框左側(cè)50px50px距包含框上邊距包含框上邊20px20pxn修改absolute-1.html文件n修改div3盒子定位方式為相對(duì)定位，top和left為0n觀察效果div3絕對(duì)定位的元素包含在容器中-3div1div2距包含框左側(cè)距包含框左側(cè)50px50px距包含框上邊距包含框上邊20px20pxn修改absolute-1.html文件n修改div3盒子的定位方式為絕對(duì)定位，top為60px，left為100pxn觀察效果絕對(duì)定位的原理說(shuō)明n計(jì)算絕對(duì)定位元素的偏移量，有以下三種情況：n當(dāng)絕

17、對(duì)定位元素沒(méi)有包含的元素時(shí)，參照物是瀏覽器窗口；n當(dāng)絕對(duì)定位元素包含在普通流的父容器時(shí)，參照物是瀏覽器窗口；n當(dāng)絕對(duì)定位元素包含在絕對(duì)定位或相對(duì)定位的父容器時(shí)，參照物是父容器。n當(dāng)頁(yè)面中需要存在絕對(duì)定位的元素時(shí)，往往不是將其直接在瀏覽器窗口中絕對(duì)定位，這種做法會(huì)因?yàn)榇翱诖笮〉淖兓霈F(xiàn)問(wèn)題。最常用的做法是將絕對(duì)定位的元素包含在相對(duì)定位的元素中，相對(duì)定位的父元素坐標(biāo)值設(shè)置為0、0即可。根據(jù)用戶選擇的數(shù)字序號(hào)顯示圖片n打開(kāi)圖片特效1/image.html文件代碼n設(shè)置divimg居中，觀察數(shù)字序號(hào)的位置是否發(fā)生變化n去掉divimg居中，設(shè)置向右浮動(dòng)，觀察數(shù)字序號(hào)位置是否發(fā)生變化n說(shuō)明divimg

18、使用了怎樣的定位方式？里面的數(shù)字序號(hào)又使用了怎樣的定位方式？根據(jù)用戶選擇的數(shù)字序號(hào)顯示圖片n樣式文件中需要做的修改：n將divimg層定義為相對(duì)定位，默認(rèn)坐標(biāo)0n增加class類(lèi)選擇符.num的定義，樣式要求：n寬25px,高25px,邊距0,填充0,背景色#333,文本顏色#fff,字號(hào)10pt,加粗,文本行高25px,居中,鼠標(biāo)手狀,絕對(duì)定位,縱坐標(biāo)160pxn增加id選擇符#num1,#num2,#num3,#num4，設(shè)置橫坐標(biāo)分別是10px,40px,70px,100pxnimage.html文件中需要做的修改n在層divimg中插入四個(gè)子層，id分別是num1,num2,num3,

19、num4,同時(shí)引用class類(lèi)選擇符num腳本代碼要做的修改n修改函數(shù)imageswitch()的代碼n在設(shè)置圖片之后設(shè)置當(dāng)前顯示圖片的序號(hào)層背景色為#f33,其它圖片序號(hào)層背景色為#333n定義帶參數(shù)的函數(shù)cleartm(num)，函數(shù)體功能：n將參數(shù)num的值設(shè)置為全局變量index的值，同時(shí)設(shè)置為當(dāng)前要顯示的圖片n通過(guò)循環(huán)設(shè)置當(dāng)前顯示圖片的序號(hào)層背景色為#f33,其它圖片序號(hào)層背景色為#333n通過(guò)clearTimeout()方法終止延時(shí)定時(shí)器設(shè)置的函數(shù)imgchange()的調(diào)用過(guò)程n修改image.htmln當(dāng)鼠標(biāo)移動(dòng)到圖片序號(hào)層上時(shí)調(diào)用函數(shù)cleartm(),同時(shí)傳遞參數(shù)n當(dāng)鼠標(biāo)移

20、走時(shí)，調(diào)用函數(shù)imageswitch()，繼續(xù)進(jìn)行圖片輪換顯示漂浮廣告的制作n制作漂浮廣告的幾個(gè)要點(diǎn)：n漂浮廣告總是使用盒子設(shè)置的，盒子的初始位置及高度和寬度根據(jù)頁(yè)面具體要求設(shè)置，漂浮是指盒子在頁(yè)面中的移動(dòng)n盒子的移動(dòng)是通過(guò)改變其左上角頂點(diǎn)坐標(biāo)值進(jìn)行的，橫坐標(biāo)和縱坐標(biāo)都可以改變n盒子的移動(dòng)方向可通過(guò)兩個(gè)方向變量控制，兩個(gè)變量分別控制水平和垂直方向的移動(dòng)，如果向右或向下移動(dòng)，則相應(yīng)的橫坐標(biāo)和縱坐標(biāo)值增大，需要兩個(gè)變量為+1，向左或向上移動(dòng)，兩個(gè)變量為-1n兩個(gè)方向變量值的更改是當(dāng)層的邊框移動(dòng)到窗口可見(jiàn)范圍之外時(shí)n程序開(kāi)始運(yùn)行時(shí)必須獲取當(dāng)前窗口的寬度和高度n當(dāng)頁(yè)面打開(kāi)時(shí)廣告就出現(xiàn)即函數(shù)是在頁(yè)面的o

21、nload事件發(fā)生時(shí)執(zhí)行的。此處盒子需要使用哪種定位形式？為什么？漂浮廣告函數(shù)定義n定義全局變量gox=1;goy=1;設(shè)置移動(dòng)的方向n函數(shù)定義n使用document.documentElement.clientWidth/clientHeight分別獲取窗口的寬度和高度;n獲取盒子元素后，使用元素.offsetWidth/offsetHeight分別獲取盒子的左上角頂點(diǎn)坐標(biāo)值n在條件判斷之后設(shè)置盒子的移動(dòng)方向n使用元素.style.top/left重新設(shè)置盒子的左上角頂點(diǎn)坐標(biāo)值，要有單位pxn設(shè)置每間隔多長(zhǎng)時(shí)間調(diào)用函數(shù)一次n使用window.onload完成函數(shù)的初次調(diào)用獲取頁(yè)面或窗口高度和寬度說(shuō)明document.documentElement.clientWidth：獲取窗口寬度document.documentElement.clientHe