Javascript4-Window對象,對話框,定時器

JavaScript

第4章:JavaScript常用DHTML對象：

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

window.scrollBy(0,1);}functionmystart(){//啟動定時器

timmerID=window.setInterval("updateScroll

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

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

提示框confirm

確認(rèn)框prompt

輸入框showModalDialog

(IE4.0)showModelessDialog

(IE5.0)簡單對話框書寫格式功能說明alert(str)提示對話框，顯示str字符串的內(nèi)容按[確定]關(guān)閉對話框confirm(str)確認(rèn)對話框，顯示str字符串的內(nèi)容按[確定]按鈕返回true，[取消]返回falseprompt(str,value)輸入對話框，采用文本框輸入信息按[確定]按鈕返回輸入值，[取消]關(guān)閉簡單對話框顯示效果比較：alert("您好！");confirm("您好嗎？");prompt("您貴姓？","陳");簡單對話框返回值比較：varfirstname=prompt("您貴姓？","陳");if(confirm("您確定？")==true){ alert(firstname+"先生，您好！");}不返回值返回值為輸入字符串返回值為true或false窗口對話框書寫格式功能說明showModalDialog(url,arguments,config)IE4或更高版本支持該方法showModelessDialog(url,arguments,config)IE5或更高版本支持該方法參數(shù)說明url打開鏈接arguments傳入?yún)?shù)config窗口配置參數(shù)窗口對話框config外觀配置參數(shù)status狀態(tài)欄resizable可調(diào)整大小help是否顯示標(biāo)題欄中的按鈕center是否顯示在桌面正中間dialogWidth對話框?qū)抎ialogHeight對話框高dialogTop對話框左上角的y坐標(biāo)dialogLeft對話框左上角的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="選擇日期">...窗口對話框程序示范：調(diào)用窗口對話框的方法傳入input1對象<scriptlanguage="javascript">//確定按鈕事件，更新輸入框中的值functionok(){ vartheInput=dialogArguments; ... theInput.value=theYear+"-"+theMonth+"-"+theDate; window.close();}</script><inputtype="button"name="okbtn"value="確定"onclick="ok()">窗口對話框程序示范：窗口對話框頁面的編寫設(shè)置傳入對象input1的值窗口對話框運行結(jié)果：選擇日期對話框調(diào)用頁被調(diào)用對話框定時器書寫格式功能說明tID=setInterval(exp,time)周期性觸發(fā)執(zhí)行代碼expexp為字符串格式的執(zhí)行語句time為時間周期，單位為毫秒返回已經(jīng)啟動的定時器clearInterval(tID)停止啟動的定時器tID=setTimeout(exp,time)一次性觸發(fā)執(zhí)行代碼expexp為字符串格式的執(zhí)行語句time為間隔時間，單位為毫秒返回已經(jīng)啟動的定時器clearTimeout(tID)停止啟動的定時器定時器定時器的實際運用網(wǎng)頁動態(tài)時鐘制作倒計時跑馬燈效果幻燈片效果自動滾屏閱讀制作網(wǎng)頁小游戲……...vartimmerID=null;functionupdateTime(){//更新狀態(tài)欄顯示當(dāng)前時間

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

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

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

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

ti