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

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

2、層對(duì)象，代表了客戶端的一個(gè)瀏覽器窗口或一個(gè)框架，一個(gè)獨(dú)立的瀏覽器窗口或一個(gè)框架就是一個(gè)window對(duì)象。 對(duì)象名window在引用時(shí)可以省略，例如我們使用過的alert()方法是由window對(duì)象提供的，寫全了應(yīng)該是window.alert(),window對(duì)象的方法,創(chuàng)建彈出式窗口createPopup() 彈出式pop-up窗口也是一個(gè)wondow對(duì)象，通過window對(duì)象的document子對(duì)象及其body對(duì)象可設(shè)置窗口中顯示的內(nèi)容，但彈出式窗口僅是一個(gè)沒有邊框及任何界面元素不可移動(dòng)的空白區(qū)域，類似于漂浮在頁面上的面板或畫布，鼠標(biāo)單擊pop-up窗口外的任意位置即可關(guān)閉該窗口。,彈出式窗

3、口的應(yīng)用說明,必須放在函數(shù)中使用，使用步驟如下： 使用createPopup()方法創(chuàng)建窗口對(duì)象 窗口中子對(duì)象document.body的獲取 必要時(shí)，使用子對(duì)象的style屬性中的各種樣式設(shè)置屬性設(shè)置彈出窗口的外觀 使用子對(duì)象的innerHTML屬性設(shè)置彈出窗口中要顯示的文本信息 使用窗口對(duì)象的show()方法設(shè)置窗口的顯示位置和大小，show()方法的參數(shù)有5個(gè)，分別是：x坐標(biāo),y坐標(biāo), 寬度, 高度, 窗口位置所參照的頁面中對(duì)象,彈出式窗口應(yīng)用舉例,課本例題h9-6.html，定義函數(shù)內(nèi)容如下： 創(chuàng)建窗口，使用變量p表示 獲取窗口中的document.body子對(duì)象，使用變量pbody表

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

5、面中添加一個(gè)段落“網(wǎng)頁制作中要使用的基本知識(shí)包含三個(gè)模塊，分別是html、css和javascript”，當(dāng)光標(biāo)懸停在”html”上方時(shí)，顯示彈出窗口 上面窗口的顯示位置有什么問題？如何解決,授課任務(wù),1. window對(duì)象中的setInterval()方法的功能及應(yīng)用方法 2. window對(duì)象中的setTimeout()方法的功能及應(yīng)用方法 3.圖片輪換特效的設(shè)計(jì)過程實(shí)現(xiàn),3循環(huán)定時(shí)器,循環(huán)定時(shí)器方法格式： id=setInterval( code, millisec) setInterval()方法用于創(chuàng)建一個(gè)循環(huán)定時(shí)器，并按參數(shù)millisec指定的毫秒數(shù)為周期，循環(huán)調(diào)用執(zhí)行code指

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

7、eout ( code, millisec) setTimeout()方法用于創(chuàng)建一個(gè)延時(shí)定時(shí)器，僅在參數(shù)millisec指定的毫秒數(shù)之后調(diào)用執(zhí)行一次code指定的代碼，并返回所創(chuàng)建定時(shí)器的ID值作為取消延時(shí)定時(shí)方法的參數(shù)。 結(jié)束循環(huán)定時(shí)器的方法格式： clearTimeout ( id ) 舉例 將上例中的setInterval()方法修改為setTimeout()方法，觀察程序的執(zhí)行結(jié)果；如何修改能讓時(shí)間自動(dòng)變化？,定時(shí)器應(yīng)用小實(shí)例-圖片輪換,圖片輪換的關(guān)鍵點(diǎn)： 如何確定圖像區(qū)域中的新圖像 多長(zhǎng)時(shí)間輪換一幅圖 所有圖片命名規(guī)則：共同名字+下標(biāo) 設(shè)圖像區(qū)域id為img1，則在腳本中使用doc

8、ument. getElementById(img1).src即可設(shè)置新圖片。 更換圖片的規(guī)律： 若當(dāng)前正在顯示的是第n幅圖，則接下來要顯示的一定是第n+1幅圖，若n+1值超出了最大下標(biāo)，則從第一幅圖重新開始； 每次函數(shù)調(diào)用時(shí)都要使用上次圖片的下標(biāo)值，所以表示下標(biāo)的變量必須設(shè)置為什么變量？,頁面中的元素,在頁面中設(shè)置一個(gè)盒子divimg，盒子居中，寬度和高度根據(jù)要顯示的圖片確定 在盒子divimg中設(shè)置一個(gè)圖片元素，要求如下： 元素設(shè)置name和id為img1 顯示的圖片文件為給定圖片中的第一幅,定義函數(shù)imgswitch(),定義全局變量i,并設(shè)置初值為第一幅圖的序號(hào)值1 函數(shù)定義： 全局變

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

10、apply()方法）和播放濾鏡（使用play()方法）。 該濾鏡主要支持有IE內(nèi)核的瀏覽器，所以應(yīng)用和播放之前先使用if(document.all)條件判斷瀏覽器是否是IE內(nèi)核的,濾鏡應(yīng)用頁面及函數(shù)修改,頁面圖像區(qū)域增加樣式filter:revealTrans(duration=2,transition=1) 函數(shù)中，在更換圖片之后判斷瀏覽器是否是IE內(nèi)核的，若是，則應(yīng)用如下代碼完成濾鏡的應(yīng)用和播放 圖像區(qū)域. filters.revealTrans.apply(); 圖像區(qū)域.filters.revealTrans.play();,復(fù)習(xí)回顧,圖片輪換中在腳本代碼中要更換的是哪個(gè)元素的什么屬性

11、的取值？ 本頁面中要換的圖片文件由文件名中的哪一部分決定？如何得到這一部分的取值？ 圖片切換的濾鏡特效需要在樣式中使用哪個(gè)樣式屬性定義？需要定義的兩個(gè)參數(shù)是什么，作用如何？取值范圍如何？,盒子的定位,沒有設(shè)置定位的盒子都按照普通流方式出現(xiàn)在瀏覽器窗口中，所謂普通流就是瀏覽器將層按照盒子在代碼中的順序和嵌套關(guān)系顯示出來 定位的應(yīng)用,相對(duì)定位（Relative-1.html）,先設(shè)計(jì)3個(gè)普通流布局的盒子，id選擇符分別是div1,div2,div3盒子大小400 x100，邊距填充都是0，背景色隨意設(shè)計(jì) 修改div2樣式， 設(shè)置為相對(duì)定位，觀察效果 #div2 position:relative;

12、 top:20px; left:50px; ,div1,div3,div2,左側(cè)空出50px,上邊空出20px,相對(duì)定位續(xù),將第二個(gè)盒子設(shè)置為向左浮動(dòng)，繼續(xù)觀察效果 去掉第二個(gè)盒子的向左浮動(dòng)，再將三個(gè)盒子都設(shè)置居中，繼續(xù)觀察頁面效果 將第二個(gè)盒子的定位坐標(biāo)設(shè)置為0、0，再觀察頁面效果,相對(duì)定位應(yīng)用及原理,總結(jié) 使用相對(duì)定位的元素，無論是否移動(dòng)，都將占據(jù)原來的位置。 相對(duì)定位的元素不會(huì)影響其它元素。 計(jì)算偏移量top、left的參照物是元素移動(dòng)前所在位置。 設(shè)置了相對(duì)定位的盒子，可以設(shè)置居中，也可以設(shè)置浮動(dòng),絕對(duì)定位應(yīng)用（Absolute-1.html）,先設(shè)計(jì)3個(gè)普通流布局的盒子，盒子大小40

13、0 x100，邊距填充都是0，背景色隨意設(shè)計(jì) 修改div2樣式，設(shè)置為絕對(duì)定位，觀察效果 #div2 position:absolute; top:20px; left:50px; ,div1,div3,div2,距瀏覽器窗口左側(cè)空出50px,距瀏覽器窗口上邊空出20px,絕對(duì)定位續(xù),設(shè)置div2居中，能否實(shí)現(xiàn)？ 修改div3盒子的寬度為500px，高度為200px；將絕對(duì)定位的div2盒子移動(dòng)到未設(shè)置定位的div3盒子中，觀察效果 繼續(xù)修改div3盒子的定位方式為絕對(duì)定位，top為60px，left為100px，觀察效果 繼續(xù)修改div3盒子定位方式為相對(duì)定位，top為20，left為100

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

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

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

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

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

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

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