JavaScript

第4章:JavaScript常用DHTML對象：

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

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

timmerID=window.setInterval("updateScroll

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

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

提示框confirm

確認框prompt

輸入框showModalDialog

(IE4.0)showModelessDialog

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

單位為像素...<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="選擇日期">...窗口對話框程序示范：調用窗口對話框的方法傳入input1對象<scriptlanguage="javascript">//確定按鈕事件，更新輸入框中的值functionok(){ vartheInput=dialogArguments; ... theInput.value=theYear+"-"+theMonth+"-"+theDate; window.close();}</script><inputtype="button"name="okbtn"value="確定"onclick="ok()">窗口對話框程序示范：窗口對話框頁面的編寫設置傳入對象input1的值窗口對話框運行結果：選擇日期對話框調用頁被調用對話框定時器書寫格式功能說明tID=setInterval(exp,time)周期性觸發執行代碼expexp為字符串格式的執行語句time為時間周期，單位為毫秒返回已經啟動的定時器clearInterval(tID)停止啟動的定時器tID=setTimeout(exp,time)一次性觸發執行代碼expexp為字符串格式的執行語句time為間隔時間，單位為毫秒返回已經啟動的定時器clearTimeout(tID)停止啟動的定時器定時器定時器的實際運用網頁動態時鐘制作倒計時跑馬燈效果幻燈片效果自動滾屏閱讀制作網頁小游戲……...vartimmerID=null;functionupdateTime(){//更新狀態欄顯示當前時間

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

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

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

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

ti