Javascript4-Window對(duì)象,對(duì)話框,定時(shí)器

JavaScript

第4章:JavaScript常用DHTML對(duì)象：

Window對(duì)象,對(duì)話框,定時(shí)器回顧JavaScript內(nèi)置對(duì)象的分類JavaScriptString對(duì)象JavaScriptArray對(duì)象JavaScriptDate對(duì)象本章內(nèi)容JavaScriptDHTML概述JavaScriptDHTMLWindow對(duì)象JavaScript對(duì)話框JavaScript定時(shí)器DHTML介紹DHTML的定義使用JavaScript和CSS級(jí)聯(lián)樣式表操作HTML創(chuàng)造出各種動(dòng)態(tài)視覺效果統(tǒng)稱為DHTMLDHTML是一種瀏覽器端的動(dòng)態(tài)網(wǎng)頁技術(shù)DHTML介紹DHTML的功能動(dòng)態(tài)改變字體大小和字體顏色動(dòng)態(tài)設(shè)定文檔元素的位置、內(nèi)容，甚至隱藏和顯示元素可以通過事件響應(yīng)機(jī)制制作動(dòng)態(tài)折疊的樹形結(jié)構(gòu)和菜單可以通過定時(shí)器制作時(shí)鐘、日歷可以彈出對(duì)話框與用戶進(jìn)行交互可以通過表單提交用戶填寫的信息通過動(dòng)態(tài)樣式表可以設(shè)定更多的顯示效果...DHTML對(duì)象模型DHTML對(duì)象模型將HTML標(biāo)記、屬性和CSS樣式都對(duì)象化可以動(dòng)態(tài)存取HTML文檔中的所有元素可以使用屬性name或id來存取或標(biāo)記對(duì)象改變?cè)貎?nèi)容或樣式后瀏覽器中顯示效果即時(shí)更新DHTML對(duì)象模型包括瀏覽器對(duì)象模型和Document對(duì)象模型DHTML對(duì)象模型WindowFramesHistoryNavigatorDocumentLocationEventFormTableAnchorImageIframeTableRowTableCellInputSelectTextarea...DHTML對(duì)象模型DHTMLDOM與W3CDOM的比較比較項(xiàng)目DHTMLDOMW3CDOM概念DHTML中的Document對(duì)象模型標(biāo)準(zhǔn)的樹形結(jié)構(gòu)文檔操作接口瀏覽器支持IE4.0以上IE5.0以上實(shí)現(xiàn)方法對(duì)象數(shù)組Document.all樹形節(jié)點(diǎn)對(duì)象Node.Element操作語言JavaScriptJavaScript、Java、C++等文檔對(duì)象HTMLHTML、XMLWindow對(duì)象常用屬性名稱功能說明document對(duì)象，代表窗口中顯示的HTML文檔frames窗口中框架對(duì)象的數(shù)組history對(duì)象，代表瀏覽過窗口的歷史記錄location對(duì)象，代表窗口文件地址，修改屬性可以調(diào)入新的網(wǎng)頁defaultStatus,status窗口的狀態(tài)欄信息closed窗口是否關(guān)閉，關(guān)閉時(shí)該值為truename窗口名稱，用于標(biāo)識(shí)該窗口對(duì)象Window對(duì)象常用屬性名稱功能說明opener對(duì)象，是指打開當(dāng)前窗口的window對(duì)象，如果當(dāng)前窗口被用戶打開，則它的值為nullparent對(duì)象，當(dāng)前窗口是框架頁時(shí)指的是包含該框架頁的上一級(jí)框架窗口top對(duì)象，當(dāng)前窗口是框架頁時(shí)指的是包含該框架頁的最外部的框架窗口self對(duì)象，指當(dāng)前Window對(duì)象window對(duì)象，指當(dāng)前Window對(duì)象，同selfWindow對(duì)象常用方法名稱功能說明alert(),confirm,prompt()彈出簡(jiǎn)單對(duì)話框close(),open()關(guān)閉、打開窗口print()打印窗口中網(wǎng)頁的內(nèi)容focus(),blur()請(qǐng)求或放棄窗口為當(dāng)前操作窗口moveBy(),moveTo()移動(dòng)窗口resizeBy(),resizeTo()調(diào)整窗口大小scrollBy(),scrollTo()滾動(dòng)窗口中網(wǎng)頁的內(nèi)容setInterval(),clearInterval()設(shè)置或取消周期執(zhí)行的定時(shí)器setTimeout(),clearTimeout()設(shè)置或取消一次性執(zhí)行的定時(shí)器Window對(duì)象主要功能窗口的打開和關(guān)閉對(duì)話框狀態(tài)欄定時(shí)器內(nèi)容滾動(dòng)調(diào)整窗口大小和位置Screen對(duì)象History對(duì)象Navigator對(duì)象Location對(duì)象窗口的打開和關(guān)閉書寫格式功能說明window.open(url,name,config)打開新窗口url為打開的超鏈接name為窗口的名稱config為窗口的配置參數(shù)返回新窗口對(duì)象window.close()關(guān)閉窗口窗口的打開和關(guān)閉config參數(shù)具體元素menubar菜單條toolbar工具條location地址欄directories鏈接status狀態(tài)欄scrollbars滾動(dòng)條resizeable可調(diào)整大小width窗口寬，以像素為單位height窗口高，以像素為單位參數(shù)值為yes或no參數(shù)值為數(shù)字值窗口的打開和關(guān)閉程序示范：打開google搜索窗口varconfig='menubar=yes,toolbar=no,location=no,';config+='directories=no,status=yes,';config+='scrollbars=yes,resizable=yes,';

config+='width=500,height=300';varopenurl="";window.open(openurl,"popwin",config);//僅僅打開窗口varmywin=window.open(openurl,"popwin",config);mywin.close();//關(guān)閉打開的窗口內(nèi)容滾動(dòng)書寫格式功能說明window.scroll(x,y)滾動(dòng)窗口到指定位置單位為像素window.scrollTo(x,y)同scroll方法window.scrollBy(ax,ay)從當(dāng)前位置開始，向右滾動(dòng)ax像素，向下滾動(dòng)ay像素內(nèi)容滾動(dòng)程序示范：自動(dòng)滾屏閱讀...vartimmerID=null;functionupdateScroll(){//更新滾動(dòng)位置

window.scrollBy(0,1);}functionmystart(){//啟動(dòng)定時(shí)器

timmerID=window.setInterval("updateScroll

()",100);}functionmystop(){//停止定時(shí)器

window.clearInterval(timmerID);}...mystartmystopupdateScroll狀態(tài)欄書寫格式功能說明window.status狀態(tài)欄中的字符串信息允許進(jìn)行設(shè)置或讀取window.status="hello";varstr="您好！今天是"+(newDate()).toLocaleString();window.status=str;對(duì)話框分類對(duì)話框簡(jiǎn)單對(duì)話框窗口對(duì)話框alert

提示框confirm

確認(rèn)框prompt

輸入框showModalDialog

(IE4.0)showModelessDialog

(IE5.0)簡(jiǎn)單對(duì)話框書寫格式功能說明alert(str)提示對(duì)話框，顯示str字符串的內(nèi)容按[確定]關(guān)閉對(duì)話框confirm(str)確認(rèn)對(duì)話框，顯示str字符串的內(nèi)容按[確定]按鈕返回true，[取消]返回falseprompt(str,value)輸入對(duì)話框，采用文本框輸入信息按[確定]按鈕返回輸入值，[取消]關(guān)閉簡(jiǎn)單對(duì)話框顯示效果比較：alert("您好！");confirm("您好嗎？");prompt("您貴姓？","陳");簡(jiǎn)單對(duì)話框返回值比較：varfirstname=prompt("您貴姓？","陳");if(confirm("您確定？")==true){ alert(firstname+"先生，您好！");}不返回值返回值為輸入字符串返回值為true或false窗口對(duì)話框書寫格式功能說明showModalDialog(url,arguments,config)IE4或更高版本支持該方法showModelessDialog(url,arguments,config)IE5或更高版本支持該方法參數(shù)說明url打開鏈接arguments傳入?yún)?shù)config窗口配置參數(shù)窗口對(duì)話框config外觀配置參數(shù)status狀態(tài)欄resizable可調(diào)整大小help是否顯示標(biāo)題欄中的按鈕center是否顯示在桌面正中間dialogWidth對(duì)話框?qū)抎ialogHeight對(duì)話框高dialogTop對(duì)話框左上角的y坐標(biāo)dialogLeft對(duì)話框左上角的x坐標(biāo)參數(shù)值為yes或no值為數(shù)字

單位為像素...<scriptlanguage="javascript">functionshowDialog(){ varconfig='dialogWidth:320px;dialogHeight:180px;'; config+='dialogTop:140px;dialogLeft:250px;'; config+='center:no;help:no;resizable:no;status:no'; showModalDialog("test4-1a.htm",input1,config);}</script><inputtype="text"id="input1"value=""readonly><inputtype="button"id="selectBtn"onclick="showDialog()"value="選擇日期">...窗口對(duì)話框程序示范：調(diào)用窗口對(duì)話框的方法傳入input1對(duì)象<scriptlanguage="javascript">//確定按鈕事件，更新輸入框中的值functionok(){ vartheInput=dialogArguments; ... theInput.value=theYear+"-"+theMonth+"-"+theDate; window.close();}</script><inputtype="button"name="okbtn"value="確定"onclick="ok()">窗口對(duì)話框程序示范：窗口對(duì)話框頁面的編寫設(shè)置傳入對(duì)象input1的值窗口對(duì)話框運(yùn)行結(jié)果：選擇日期對(duì)話框調(diào)用頁被調(diào)用對(duì)話框定時(shí)器書寫格式功能說明tID=setInterval(exp,time)周期性觸發(fā)執(zhí)行代碼expexp為字符串格式的執(zhí)行語句time為時(shí)間周期，單位為毫秒返回已經(jīng)啟動(dòng)的定時(shí)器clearInterval(tID)停止啟動(dòng)的定時(shí)器tID=setTimeout(exp,time)一次性觸發(fā)執(zhí)行代碼expexp為字符串格式的執(zhí)行語句time為間隔時(shí)間，單位為毫秒返回已經(jīng)啟動(dòng)的定時(shí)器clearTimeout(tID)停止啟動(dòng)的定時(shí)器定時(shí)器定時(shí)器的實(shí)際運(yùn)用網(wǎng)頁動(dòng)態(tài)時(shí)鐘制作倒計(jì)時(shí)跑馬燈效果幻燈片效果自動(dòng)滾屏閱讀制作網(wǎng)頁小游戲……...vartimmerID=null;functionupdateTime(){//更新狀態(tài)欄顯示當(dāng)前時(shí)間

varnow=(newDate()).toLocaleString();window.status="當(dāng)前時(shí)間："+now;}functionmystart(){//啟動(dòng)定時(shí)器

timmerID=window.setInterval("updateTime()",1000);}functionmystop(){//停止定時(shí)器

window.clearInterval(timmerID);}...定時(shí)器程序示范：網(wǎng)頁動(dòng)態(tài)時(shí)鐘(采用setInterval)mystartmystopupdateTime定時(shí)器程序示范：網(wǎng)頁動(dòng)態(tài)時(shí)鐘(采用setTimeout)...vartimmerID=null;functionupdateTime(){//更新狀態(tài)欄顯示當(dāng)前時(shí)間

varnow=(newDate()).toLocaleString();window.status="當(dāng)前時(shí)間："+now;mystart();}functionmystart(){//啟動(dòng)定時(shí)器

ti