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)設定文檔元素的位置、內(nèi)容，甚至隱藏和顯示元素可以通過事件響應機制制作動態(tài)折疊的樹形結(jié)構(gòu)和菜單可以通過定時器制作時鐘、日歷可以彈出對話框與用戶進行交互可以通過表單提交用戶填寫的信息通過動態(tài)樣式表可以設定更多的顯示效果...DHTML對象模型DHTML對象模型將HTML標記、屬性和CSS樣式都對象化可以動態(tài)存取HTML文檔中的所有元素可以使用屬性name或id來存取或標記對象改變元素內(nèi)容或樣式后瀏覽器中顯示效果即時更新DHTML對象模型包括瀏覽器對象模型和Document對象模型DHTML對象模型WindowFramesHistoryNavigatorDocumentLocationEventFormTableAnchorImageIframeTableRowTableCellInputSelectTextarea...DHTML對象模型DHTMLDOM與W3CDOM的比較比較項目DHTMLDOMW3CDOM概念DHTML中的Document對象模型標準的樹形結(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窗口名稱，用于標識該窗口對象Window對象常用屬性名稱功能說明opener對象，是指打開當前窗口的window對象，如果當前窗口被用戶打開，則它的值為nullparent對象，當前窗口是框架頁時指的是包含該框架頁的上一級框架窗口top對象，當前窗口是框架頁時指的是包含該框架頁的最外部的框架窗口self對象，指當前Window對象window對象，指當前Window對象，同selfWindow對象常用方法名稱功能說明alert(),confirm,prompt()彈出簡單對話框close(),open()關(guān)閉、打開窗口print()打印窗口中網(wǎng)頁的內(nèi)容focus(),blur()請求或放棄窗口為當前操作窗口moveBy(),moveTo()移動窗口resizeBy(),resizeTo()調(diào)整窗口大小scrollBy(),scrollTo()滾動窗口中網(wǎng)頁的內(nèi)容setInterval(),clearInterval()設置或取消周期執(zhí)行的定時器setTimeout(),clearTimeout()設置或取消一次性執(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)從當前位置開始，向右滾動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)欄中的字符串信息允許進行設置或讀取window.status="hello";varstr="您好！今天是"+(newDate()).toLocaleString();window.status=str;對話框分類對話框簡單對話框窗口對話框alert

提示框confirm

確認框prompt

輸入框showModalDialog

(IE4.0)showModelessDialog

(IE5.0)簡單對話框書寫格式功能說明alert(str)提示對話框，顯示str字符串的內(nèi)容按[確定]關(guān)閉對話框confirm(str)確認對話框，顯示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是否顯示標題欄中的按鈕center是否顯示在桌面正中間dialogWidth對話框?qū)抎ialogHeight對話框高dialogTop對話框左上角的y坐標dialogLeft對話框左上角的x坐標參數(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()">窗口對話框程序示范：窗口對話框頁面的編寫設置傳入對象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)欄顯示當前時間

varnow=(newDate()).toLocaleString();window.status="當前時間："+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)欄顯示當前時間

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

ti