《HTML教程》-第8章 常用對(duì)象簡(jiǎn)介_(kāi)第1頁(yè)
《HTML教程》-第8章 常用對(duì)象簡(jiǎn)介_(kāi)第2頁(yè)
《HTML教程》-第8章 常用對(duì)象簡(jiǎn)介_(kāi)第3頁(yè)
《HTML教程》-第8章 常用對(duì)象簡(jiǎn)介_(kāi)第4頁(yè)
《HTML教程》-第8章 常用對(duì)象簡(jiǎn)介_(kāi)第5頁(yè)
已閱讀5頁(yè)，還剩42頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

BOM（BrowserObjectModel）瀏覽器對(duì)象模型BOM瀏覽器對(duì)象模型是JavaScript操作瀏覽器的接口，其核心是window對(duì)象。在JavaScript中window對(duì)象有著雙重角色，其一是作為JavaScript的全局對(duì)象，無(wú)論是全局變量還是全局函數(shù)都存在于window對(duì)象中。其二是作為訪問(wèn)瀏覽器的接口對(duì)象。在Ajax編程中有時(shí)會(huì)用到操作瀏覽器的應(yīng)用，這些應(yīng)用絕大部分已經(jīng)被瀏覽器實(shí)現(xiàn)，但有時(shí)需要由程序來(lái)實(shí)現(xiàn)時(shí)，就會(huì)用到這些知識(shí)，比如檢測(cè)瀏覽器是否允許Cookie，程序打開(kāi)指定地址的頁(yè)面等，所以本章對(duì)BOM對(duì)象模型進(jìn)行簡(jiǎn)單簡(jiǎn)介。BOM對(duì)象模型以window對(duì)象為核心，主要包括：window對(duì)象、Screen對(duì)象、Location對(duì)象、History對(duì)象、Navigator對(duì)象和Document對(duì)象。除BOM對(duì)象之外，還有Date對(duì)象、Math對(duì)象、String對(duì)象、Array對(duì)象（見(jiàn)5.4節(jié)）、RegExp、Map和Set等對(duì)象。8.1window對(duì)象Window對(duì)象是JavaScript層級(jí)中的頂層對(duì)象，代表一個(gè)瀏覽器窗口或一個(gè)框架，會(huì)在<body>或<frameset>每次出現(xiàn)時(shí)被自動(dòng)創(chuàng)建。它還包括許多與瀏覽器操作有關(guān)的對(duì)象，作為JavaScript的全局容器，所有全局對(duì)象、函數(shù)和變量都會(huì)成為window對(duì)象的成員，而且window對(duì)象還內(nèi)置了許多屬性和方法。8.1.1獲得窗口尺寸有兩個(gè)屬性可用于獲得窗口的內(nèi)部尺寸：◆innerHeight——瀏覽器窗口的內(nèi)部高度，以像素為單位。◆innerWidth——瀏覽器窗口的內(nèi)部寬度，以像素為單位。這里需要注意的是，瀏覽器窗口（也稱為視口），是不包括工具欄和滾動(dòng)條的。還要注意的是，對(duì)于IE瀏覽器8及以下版本的瀏覽器，不能使用這兩個(gè)屬性獲得瀏覽器窗口的大小，只能使用下面的屬性：◆document.documentElement.clientHeight◆

document.documentElement.clientWidth或者

◆

document.body.clientHeight

◆

document.body.clientWidth其中，document為window對(duì)象的一個(gè)屬性，它指向Document對(duì)象。如果要獲得瀏覽器窗口的內(nèi)部尺寸，比較實(shí)用的方法是：varwidth=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;

varheight=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;8.1.2窗口操作

窗口操作的方法比較多，這里只介紹打開(kāi)、關(guān)閉、移動(dòng)和調(diào)整窗口大小四個(gè)方法。其他方法如果用到可以查閱相關(guān)書籍或網(wǎng)站。1、打開(kāi)窗口

Window對(duì)象提供了open()方法用于打開(kāi)窗口，或者查找已經(jīng)存在的窗口。Open()函數(shù)原型如下：open(URL,name,features,replace)注：window對(duì)象是默認(rèn)的全局對(duì)象，凡是window本身的屬性和方法都可以直接訪問(wèn)，而無(wú)需指明window對(duì)象。但由于document對(duì)象也有一個(gè)open()方法，所以使用open()方法時(shí)，為了避免混淆要使用window.open()。參數(shù)說(shuō)明：◆URL——可選的字符串參數(shù)，指定要在新窗口中顯示的文檔的URL地址。如果省略則打開(kāi)一個(gè)空窗口?！鬾ame——可選的字符串參數(shù)，指定打開(kāi)窗口的名稱。若該名稱已經(jīng)存在，則返回已存在窗口的引用，而不是新打開(kāi)一個(gè)窗口。而且該名稱可用作標(biāo)記<a>和<form>的屬性target的值?！鬴eatures——可選的字符串參數(shù)，指定打開(kāi)的窗口要顯示的特征。如果省略則顯示所有標(biāo)準(zhǔn)的特征。如果窗口不是新打開(kāi)的窗口，而是一個(gè)已經(jīng)存在的窗口，則該參數(shù)被忽略。所有窗口特征如表8-1所示?！魊eplace——可選的布爾型參數(shù)，指定加載到窗口的URL是作為窗口的瀏覽歷史的新記錄，還是替換瀏覽器歷史的當(dāng)前條目。true表示替換，false表示不替換。實(shí)例該實(shí)例通過(guò)新打開(kāi)的窗口顯示瀏覽器窗口的內(nèi)部寬度和高度。要實(shí)現(xiàn)這一功能，只需要使用window對(duì)象的open()函數(shù)打開(kāi)一個(gè)窗口，在窗口中顯示一個(gè)可以獲取當(dāng)前窗口內(nèi)部尺寸的頁(yè)面卻可，代碼如清單8-1所示。首先要編寫一個(gè)在窗口中打開(kāi)的頁(yè)面，這里稱之為getWindowSize.html，清單8-1打開(kāi)新窗口并顯示窗口的內(nèi)部尺寸<script> window.open('getWindowSize.html','mywindow','width=800,height=500');</script>調(diào)用open()方法，指定了窗口要打開(kāi)的頁(yè)面地址getWindowSize.html，和窗口名稱mywindow，并指定了新打開(kāi)窗口的寬度和高度width=800,height=500。這里需要注意的是open()函數(shù)的features參數(shù)的格式，是以逗號(hào)分隔的“鍵-值”對(duì)。下面就是要編寫getWindowSize.html用于顯示窗口的內(nèi)部尺寸。其完整代碼如清單8-2所示。首先聲明了獲取窗口內(nèi)部尺寸的getViewSize()函數(shù)，它的內(nèi)容比較簡(jiǎn)單。選使用innerWidth和innerHeight屬性或IE的屬性獲得窗口的尺寸（見(jiàn)8.1.1節(jié)），然后查找文檔中id為con的div，并把檢測(cè)到的寬度和高度顯示在div中。window.onload=function(){getViewSize();};的功能是在網(wǎng)頁(yè)加載完成時(shí)調(diào)用剛才編寫的getViewSize()函數(shù)，以顯示檢測(cè)結(jié)果。window.onresize=function(){location.reload();};的作用是在窗口大小發(fā)生改變時(shí)，重新進(jìn)行檢測(cè)。resize事件在窗口尺寸發(fā)生改變時(shí)觸發(fā)，這里調(diào)用getViewSize()對(duì)窗口的當(dāng)前大小進(jìn)行重新檢測(cè)，以看到窗口的實(shí)時(shí)大小。2、改變窗口尺寸resizeBy()方法按照指定的像素調(diào)整窗口的大小。resizeTo()把窗口的大小調(diào)整到指定的寬度和高度。方法原型如下：resizeBy(width,height)參數(shù)說(shuō)明：◆width——必選參數(shù)。要使窗口寬度增加的像素值。正數(shù)放大窗口，負(fù)數(shù)減小窗口?！鬶eight——可選參數(shù)。要使窗口高度增加的像素值。正數(shù)放大窗口，負(fù)數(shù)減小窗口。resizeTo(width,height)參數(shù)說(shuō)明：◆width——必需參數(shù)。要調(diào)整到的窗口的寬度，以像素為單位?！鬶eight——可選參數(shù)。要調(diào)整到的窗口的高度，以像素計(jì)單位。這兩個(gè)方法較為簡(jiǎn)單，其示例在后面給出。3、與用戶交互

這一部分內(nèi)容比較重要，是Web應(yīng)用與用戶交互的部分，可以警告用戶、收集用記信息等。在任何Web應(yīng)用前端開(kāi)發(fā)中是必不可少的組成部分，主要包括alert()、confirm()和prompt()三個(gè)方法。表8-2與用戶交互的window方法方法原型說(shuō)明alert()alert(message)功能：彈出一個(gè)提示窗。message：字符串，為提示窗顯示的內(nèi)容。confirm()confirm(message)功能：彈出帶有“確定”和“取消”按鈕的提示窗。按“確定”按鈕時(shí)返回true，否則返回false。message：字符串，為提示窗顯示的內(nèi)容。prompt()prompt(text,defaultText)功能：彈出帶有提示消息、輸入文本框和“確定”按鈕的提示窗。返回用戶輸入的內(nèi)容。text：要顯示的提示消息，字符串，可以為空。defaultText：默認(rèn)的輸入文本，字符串，可以為空。下面通過(guò)一個(gè)例子演示上面的窗口操作方法，示例代碼如清單8-3所示。這里只列出了JavaScript代碼，HTML代碼沒(méi)有列出，請(qǐng)讀者參數(shù)隨書源碼Listing8-2.html。8.1.3定時(shí)操作這也是window對(duì)象提供的非常重要的操作，在實(shí)際工作中用的比較多。比如網(wǎng)頁(yè)計(jì)時(shí)器，Ajax中的信息提示框等。這里涉及以下四個(gè)方法：setInterval()、setTimeout()、clearInterval()和clearTimeout()，方法說(shuō)明如表8-3所示。表8-3window對(duì)象定時(shí)操作的方法方法原型說(shuō)明setInterval()setInterval(code,millisec)功能：按照指定的周期（以毫秒計(jì)）來(lái)調(diào)用函數(shù)或計(jì)算表達(dá)式。參數(shù)：code：要執(zhí)行的代碼或表達(dá)式，必選參數(shù)。millisec：執(zhí)行的時(shí)間間隔，以毫秒計(jì)。setTimeout()setTimeout(code,millisec)功能：在指定的毫秒數(shù)后調(diào)用函數(shù)或計(jì)算表達(dá)式。參數(shù)：code：要執(zhí)行的函數(shù)或表達(dá)式。millisec：指定要等待的毫秒數(shù)。clearInterval()clearInterval(id)功能：取消由setInterval()方法啟動(dòng)的定時(shí)器。參數(shù)：id為setInterval()方法啟動(dòng)的定時(shí)器ID。clearTimeout()clearTimeout(id)功能：取消由setTimeout()方法設(shè)置的timeout。參數(shù)：id為setTimeout()啟動(dòng)的timeout的ID?？雌饋?lái)有四個(gè)方法，其實(shí)只有兩個(gè)。這是兩對(duì)方法：setInterval()和clearInterval()是一對(duì)方法，用于啟動(dòng)和取消定時(shí)器。setTimeout()和clearTimeout()是一對(duì)方法，用于啟動(dòng)和取消timeout。下面通過(guò)兩個(gè)例子說(shuō)明這兩對(duì)方法的用法。實(shí)例一——網(wǎng)頁(yè)電子時(shí)鐘在網(wǎng)頁(yè)中顯示一個(gè)電子時(shí)鐘，并且可以隨時(shí)停止和啟動(dòng)這一時(shí)鐘。運(yùn)行效果如圖8-1所示。左圖為初始狀態(tài)，右圖為計(jì)時(shí)狀態(tài)。圖8-1電子時(shí)鐘要完成電子時(shí)鐘功能，首先要取得系統(tǒng)的當(dāng)前時(shí)間。JavaScript中Date對(duì)象代表系統(tǒng)的當(dāng)前時(shí)間，獲得當(dāng)前時(shí)間后，取得當(dāng)前時(shí)間中的時(shí)、分和秒，構(gòu)造成“時(shí)：分：秒”的格式顯示在網(wǎng)頁(yè)中即可，所需要的代碼如下：functiontimer(){ //獲得系統(tǒng)的當(dāng)前時(shí)間 vart=newDate(); //獲取當(dāng)前時(shí)間的時(shí)分鈔 varh=t.getHours(); varm=t.getMinutes(); vars=t.getSeconds();//格式化時(shí)分秒 h=format(h); m=format(m); s=format(s); //構(gòu)造"時(shí)：分：秒"格式并顯示在容器中 vartime=h+":"+m+":"+s; document.getElementById("timer").innerHTML=time;}由于當(dāng)前時(shí)間中的時(shí)分秒可能返回小于10的數(shù)，為了統(tǒng)一顯示為兩位數(shù)字，所以需要對(duì)時(shí)分秒進(jìn)行格式化。要做的工作是對(duì)于小于10的數(shù)，前面添加字符0，構(gòu)造成以“0”開(kāi)頭的字符串，代碼如下：functionformat(n){ if(n<10){ n='0'+n;} returnn;}有了上面兩個(gè)方法還是無(wú)法實(shí)現(xiàn)電子時(shí)鐘，因?yàn)閠imer()方法執(zhí)行一次就退出了，不能連續(xù)顯示當(dāng)前的時(shí)間。解決辦法就是利用setInterval()函數(shù)，每隔1秒調(diào)用一次timer()函數(shù)，就可以實(shí)現(xiàn)連續(xù)顯示時(shí)間的電子時(shí)鐘了。代碼如下：functionstart(){ timer_id=setInterval(timer,1000);}這里的setInterval()函數(shù)有一個(gè)返回值timer_id，它就是當(dāng)前定時(shí)器（注意不是我們實(shí)現(xiàn)的電子時(shí)鐘）的ID，clearInterval()函數(shù)要用它終止這個(gè)計(jì)時(shí)器。所以，停止時(shí)鐘的代碼如下：functionstop(){ clearInterval(timer_id);}以上是自定義電子時(shí)鐘的全部JavaScript代碼。完整的代碼如清單8-4所示，對(duì)應(yīng)的源代碼為L(zhǎng)isting8-3.html。實(shí)例二——自定義消息提示框通常的做法是：在一個(gè)div（或者其他元素中）中顯示操作結(jié)果，并在一定時(shí)間后自動(dòng)消失。從出現(xiàn)到消失本身有一定的動(dòng)畫效果，容易吸引用戶的注意。下面我們來(lái)制作一個(gè)這樣的消息提示框。注意：使用這個(gè)消息提示框有一個(gè)重要前提，那就是在當(dāng)前網(wǎng)頁(yè)中必須存在指定的容器元素（如div），而且該元素在網(wǎng)頁(yè)初始化時(shí)必須是隱藏的。制作這樣一個(gè)消息提示框需要知道兩個(gè)要素：

（1）要顯示的消息msg；

（2）顯示消息的容器obj。要把消息msg顯示在容器中可以使用元素的innerHTML屬性，代碼如下：obj.innerHTML=msg;把消息顯示在容器中之后就是要設(shè)置容器的樣式，使其醒目并盡量美觀。這里我們把它做成綠色邊框、黃色背景和紅色的字體，并使文字左右居中，上下居中，需要的代碼如下，并把每條CSS語(yǔ)句加以注釋：varcssText="padding-top:5px;" +"padding-bottom:5px;"http://設(shè)置上下padding相等使其垂直居中 +"text-align:center;"http://文本水平居中 +"background:yellow;"http://設(shè)置黃色背景 +"color:red;"http://設(shè)置紅色字體 +"border:1pxsolidgreen;";//設(shè)置綠色邊框然后通過(guò)style的cssText屬性將上面定義的CSS樣式應(yīng)用到指定的容器元素，如這里的obj，代碼如下：obj.style.cssText=cssText;這里大家不要引起歧義，等號(hào)右邊的cssText是自定的變量，存放定義的CSS樣式，而等號(hào)左邊的cssText為style屬性的一個(gè)屬性，二者意義不同。接下來(lái)就是要把原本隱藏的容器obj顯示出來(lái)，這里使用將style的display屬性設(shè)置為block實(shí)現(xiàn)，代碼如下：obj.style.setProperty("display","block");setProperty()函數(shù)的用法見(jiàn)6.5節(jié)。接下來(lái)是我們的重點(diǎn)，就是利用setTimeout()方法在指定的時(shí)間內(nèi)使消息容器消失（不再顯示）。隱藏元素的方法是使display屬性

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論