Browser Object Hierarchy and Built-in Objects

瀏覽器物件 靜宜大學資管系蔡奇偉副教授

圖中有  符號的為網頁中的單一物件。 階層中的子物件是父物件的一項屬性。譬如：若某表單的名稱是 myform，則此表單不僅是一個物件，也是 document 物件的一個屬性。 Netscape 瀏覽器物件(類型)的階層     

網頁的內建物件 每一個開啟的網頁都具有以下的物件 navigator:has properties for the name and version of Navigator being used, for the MIME types supported by the client, and for the plug-ins installed on the client. window:the top-level object; has properties that apply to the entire window. Each “child window” in a frames document also has a window object. document: contains properties based on the content of the document, such as title, background color, links, and forms. location: has properties based on the current URL. history:contains properties representing URLs the client has previously requested.

document • <body> • <img ...> • <form ...> • <input type=text ...> • <input type=button...> • ... • </form> • </body> img form text button 文件階層網頁文件是由巢狀結構的 HTML 元件所組成，此結構在 JavaScript 中形成文件階層。譬如：

存取網頁物件 指定網頁物件時，我們必須使用物件的名稱與其所有的上層物件（若是在同一個瀏覽器視窗，則可以省略最上層的 window 物件）。物件的名稱是由 HTML 元件的 NAME 屬性來設定。譬如： document.img1 • <body> • <img name=img1...> • <form name=form1...> • <input type=text name=text1...> • <input type=button name=button1...> • ... • </form> • </body> document.form1 document.form1.text1 document.form1.button1

任何擺在表單之中的物件，不管是否為表單元件，都必須加上表單物件來指定。譬如：任何擺在表單之中的物件，不管是否為表單元件，都必須加上表單物件來指定。譬如： document.img1 • <img name=img1...> • <form name=form1...> • <img name=img2...> • ... • </form> document.form1.img2

存取網頁物件的屬性 • 我們必須使用前一頁所述的方式來指定網頁物件，然後再用 .property 來指定物件的屬性。譬如： • document.form1.text1.value = "Hello" • 把表單 form1 文字欄 text1 的 value 屬性設定成字串 "Hello"。

navigator 物件 Contains information about the version of Navigator in use.

底下的程式碼可用來在網頁中列印 navigator 物件的屬性。下一頁顯示在 Navigator 和 IE 中執行的結果。例 <script> document.write("<P>navigator.appName = " + navigator.appName) document.write("<P>navigator.appVersion = " + navigator.appVersion) document.write("<P>navigator.CodeName = " + navigator.CodeName) document.write("<P>navigator.language = " + navigator.language) document.write("<P>navigator.platform = " + navigator.platform) document.write("<P>navigator.userAgent = " + navigator.userAgent) </script>

底下的程式碼用來測試瀏覽器的版本是否為 Navigator 4.x或 IE 4.x以上。例 •

<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=big5"> <title>瀏覽器</title> <script src=bver.js></script> </head> <body> <p>你使用 <script> if (isNav4) document.write("Netscape 4.x") else if (isIE5) document.write("MSIE 5.x") else if (isIE4) document.write("MSIE 4.x") else document.write("無法辦別的") </script> 瀏覽器 </body> </html>

location 物件 The location object represents the complete URL associated with a given window object. Each property of the location object represents a different portion of the URL. • URL 是由下列幾個部分所組成： • protocol//host:port/pathname#hash?search • 譬如： http://home.netscape.com/assist/extensions.html#topic1?x=7&y=2

The following two statements are equivalent and set the URL of the current window to the Netscape home page: • location.href="http://home.netscape.com/" • location="http://home.netscape.com/" 例例底下的程式碼在網頁中顯示網頁的網址： <p>本頁的網址是 <script> document.write(location.href) </script> 例底下的程式碼用來更換目前的網頁： <script> location.replace("http://www.pu.edu.tw") </script>

例 JavaScript 參考手冊 p.266 <FORM NAME="catalogForm"> <B>Which catalog do you want to see?</B> <P><B>Season</B> <BR><INPUT TYPE="radio" NAME="season" VALUE="q1" CHECKED>Spring/Summer <BR><INPUT TYPE="radio" NAME="season" VALUE="q3">Fall/Winter <P><B>Category</B> <BR><INPUT TYPE="radio" NAME="category" VALUE="clo" CHECKED>Clothing <BR><INPUT TYPE="radio" NAME="category" VALUE="lin">Linens <BR><INPUT TYPE="radio" NAME="category" VALUE="hom">Home & Garden <P><INPUT TYPE="button" VALUE="Go" onClick="displayCatalog()"> </FORM>

<SCRIPT> • function displayCatalog() { • var seaName="" • var catName="" • for (var i=0; i < document.catalogForm.season.length; i++) { • if (document.catalogForm.season[i].checked) { • seaName=document.catalogForm.season[i].value • i=document.catalogForm.season.length • } • } • for (var i in document.catalogForm.category) { • if (document.catalogForm.category[i].checked) { • catName=document.catalogForm.category[i].value • i=document.catalogForm.category.length • } • } • fileName=seaName + catName + ".html" • location.replace(fileName) • } • </SCRIPT>

history 物件 Contains an array of information on the URLs that the client has visited within a window. This information is stored in a history list and is accessible through the browser’s Go menu. You can refer to the history entries by using the window.history array. This array contains an entry for each history entry in source order. Each array entry is a string containing a URL. For example, if the history list contains three named entries, these entries are reflected as history[0], history[1], and history[2].

The following example goes to the URL the user visited three clicks ago in the current window. • history.go(-3) 例 • You can define the following hyperlink to reload the current page when the user clicks it: • <A HREF=”javascript:history.go(0)”>Reload Now</A> 例 • You can define the following hyperlink to go to the previous page when the user clicks it: • <A HREF=”javascript:history.back()”>上一頁</A> 例例 The following button navigates to the URL that is three entries backward in thehistory list: <p><input type="button" value="Go" onClick="history.go(-3)">

The following button navigates to the nearest history entry that contains the string "home.netscape.com": • <P><INPUT TYPE="button" VALUE="Go" • onClick="history.go('home.netscape.com')"> 例 • The following code determines whether the first entry in the history array contains the string "NETSCAPE". If it does, the function myFunction is called. • if (history[0].indexOf("NETSCAPE") != -1) { • myFunction(history[0]) • } 例

例 • The following example displays the entire history list: • document.writeln("<B>history is</B> " + history) • This code displays output similar to the following: • history is • Welcome to Netscape http://home.netscape.com/ • Sun Microsystems http://www.sun.com/ • Royal Airways http://www.supernet.net/~dugbrown/

document 物件 Contains information about the current document, and provides methods for displaying HTML output to the user. 屬性與方法請參見 JavaScript 參考手冊

open 方法 Opens a stream to collect the output of write or writeln methods. 語法: open([mimeType,[replace]]) • The following function calls document.open to open a stream • before issuing a write method: • function windowWriter1() { • var myString = "Hello, world!" • msgWindow.document.open() • msgWindow.document.write("<P>" + myString) • msgWindow.document.close() • } 例

close 方法 Closes an output stream and forces data sent to layout to display. 語法: close() • The following function calls document.close to close a stream that was opened with document.open. The document.close method forces the content of the stream to display in the window. • function windowWriter1() { • var myString = "Hello, world!" • msgWindow.document.open() • msgWindow.document.write("<P>" + myString) • msgWindow.document.close() • } 例

write 方法 Writes one or more HTML expressions to a document in the specified window. 語法: document.write(expr1[, ..., exprN]) writeln 方法 Writes one or more HTML expressions to a document in the specified window and follows them with a newline character. 語法: document.writeln(expr1[, ..., exprN])

 • <table border=1 cellspcing=1 cellpadding=3 width=450> • <caption>九九乘法表</caption> • <script> • document.write("<tr align=right>") • document.write("<th width=40 align=center>*</th>") • for (var i = 1; i < 10; i++) • document.write("<th width=40>" + i + "</th>") • document.writeln("</tr>") • for (var i = 1; i < 10; i++) { • document.write("<tr align=right>") • document.write("<th width=40 align=center>" + i + "</th>") • for (var j = 1; j < 10; j++) • document.write("<td width=40>" + i*j + "</td>") • document.writeln("</tr>") • } • </script> • </table> 例

例 <form> <p>按底下的按鈕來改變網頁底色</p> <p> <input type=“button” value=“紅色” onClick="document.bgColor='red'"> <input type="button" value="綠色" onClick="document.bgColor='green'"> <input type="button" value="藍色" onClick="document.bgColor='blue'"> <input type="button" value="黑色" onClick="document.bgColor='black'"> </p> </form>

JavaScript Reflection & HTML Layout 參閱 JavaScript 使用者手冊 p. 176

Navigator Object Arrays 參閱 JavaScript 使用者手冊 p. 182

window 物件 • open & close

open 方法 Opens a new web browser window. 語法:open(URL[, windowName[, windowFeatures]])

alert Displays an Alert dialog box with a message and an OK button. 語法:alert (message) 例 alert("這是限制級網站，未成年的訪客請離開")

confirm Displays a Confirm dialog box with the specified message and OK and Cancel buttons. 語法:confirm (message) 例 confirm("你滿 18 歲了嗎？")

例 • <html> • <head> • <meta http-equiv="Content-Type“ • content="text/html; charset=big5"> • <title>禁忌話題</title> • <script> • function verify_visitor () • { • if (confirm("你滿 18 歲了嗎？")) • location.href = "http://sex.pu.edu.tw" • else • location.href = "http://www.disneyland.com" • } • </script> • </head> • <body onLoad="verify_visitor()"> •  • </body> • </html>

defaultStatus The default message displayed in the status bar at the bottom of the window. 例以下的設定使得網頁下載後，在狀態欄中顯示歡迎的訊息： <body onLoad="defaultStatus='歡迎光臨一休客棧'">

在 onMouseOut 和 onMouseOver 事件處理程序中設定 defaultStatus 屬性時，最後必須加上 return true 敘述。例 • <A HREF="http://home.netscape.com" • onMouseOver = "defaultStatus='回到網景首頁'; return true"> • Netscape • </A>

status Specifies a priority or transient message in the status bar at the bottom of the window, such as the message that appears when a mouseOver event occurs over an anchor. 例以下的設定使得網頁下載後，在狀態欄中顯示歡迎的訊息： <body onLoad="defaultStatus='歡迎光臨一休客棧'">

在 onMouseOut 和 onMouseOver 事件處理程序中設定 defaultStatus 屬性時，最後必須加上 return true 敘述。例 • <A HREF="http://home.netscape.com" • onMouseOver = "defaultStatus='回到網景首頁'; return true"> • Netscape • </A>

setTimeout Evaluates an expression or calls a function once after a specified number of milliseconds elapses. 語法:setTimeout(expression, msec) setTimeout(function, msec[, arg1[, ..., argN]]) 參閱參考手冊 p.547

clearTimeout Cancels a timeout that was set with the setTimeout method. 語法:clearTimeout(timeoutID)

Cookies Cookies are a mechanism for storing persistent data on the client in a file called cookies.txt. Because HyperText Transport Protocol (HTTP) is a stateless protocol, cookies provide a way to maintain information between client requests.

Each cookie is a small item of information with an optional expiration date and is added to the cookie file in the following format: • name=value;expires=expDate; • name is the name of the datum being stored, and value is its value. If name and value contain any semicolon, comma, or blank (space) characters, you must use the escape function to encode them and the unescape function to decode them.

expDate is the expiration date, in GMT date format: • Wdy, DD-Mon-YY HH:MM:SS GMT • For example, a valid cookie expiration date is • expires=Wednesday, 09-Nov-99 23:12:40 GMT • Although it’s slightly different from this format, the date string returned by the Date method toGMTString can be used to set cookie expiration dates. • The expiration date is an optional parameter indicating how long to maintain the cookie. If expDate is not specified, the cookie expires when the user exits the current Navigator session. Navigator maintains and retrieves a cookie only if its expiration date has not yet passed.

設定 cookies • // Sets cookie values. Expiration date is optional • // • function setCookie(name, value, expire) • { • document.cookie = name + "=" + escape(value) • + ((expire == null) ? "" : ("; expires=" + expire.toGMTString())) • }

取得 cookies 資訊 • function getCookie(Name) { • var search = Name + "=" • if (document.cookie.length > 0) { // if there are any cookies • offset = document.cookie.indexOf(search) • if (offset != -1) { // if cookie exists • offset += search.length • // set index of beginning of value • end = document.cookie.indexOf(";", offset) • // set index of end of cookie value • if (end == -1) • end = document.cookie.length • return unescape(document.cookie.substring(offset, end)) • } • } • }

Browser Object Hierarchy and Built-in Objects

Browser Object Hierarchy and Built-in Objects

Presentation Transcript