JavaScript Bible, Gold Edition part 187 doc

CD-352 Part VI ✦ Appendixes Listing 17-13 (continued) </HEAD> <BODY> <B>Load a series of documents into the right frame by clicking some of these links (make a note of the sequence you click on):</B><P> <A HREF=”lst17-01.htm” TARGET=”display”>Listing 17-1</A><BR> <A HREF=”lst17-05.htm” TARGET=”display”>Listing 17-5</A><BR> <A HREF=”lst17-09.htm” TARGET=”display”>Listing 17-9</A><BR> <HR> <FORM NAME=”input”> <B>Click on the various buttons below to see the results in this frameset:</B><P> <UL> <LI><B>NN4+</B> Substitute for toolbar buttons <TT>window.back()</TT> and <TT>window.forward()</TT>:<INPUT TYPE=”button” VALUE=”Back” onClick=”window.back()”><INPUT TYPE=”button” VALUE=”Forward” onClick=”window.forward()”><P> <LI><TT> history.back()</TT> and <TT>history.forward()</TT> for righthand frame: <INPUT TYPE=”button” VALUE=”Back” onClick=”parent.display.history.back()”><INPUT TYPE=”button” VALUE=”Forward” onClick=”parent.display.history.forward()”><P> <LI><TT>history.back()</TT> for this frame:<INPUT TYPE=”button” VALUE=”Back” onClick=”history.back()”><P> <LI><TT>history.back()</TT> for parent:<INPUT TYPE=”button” VALUE=”Back” onClick=”parent.history.back()”><P> </UL> </FORM> </BODY> </HTML> go(relativeNumber |“URLOrTitleSubstring”) NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓ ✓ ✓ ✓✓✓✓ windowObject.history.go() CD-353 Appendix F ✦ Examples from Parts III and IV Example Fill in either the number or text field of the page in Listing 17-14 and then click the associated button. The script passes the appropriate kind of data to the go() method. Be sure to use negative numbers for visiting a page earlier in the history. Listing 17-14: Navigating to an Item in History <HTML> <HEAD> <TITLE>history.go() Method</TITLE> <SCRIPT LANGUAGE=”JavaScript”> function doGoNum(form) { window.history.go(parseInt(form.histNum.value)) } function doGoTxt(form) { window.history.go(form.histWord.value) } </SCRIPT> </HEAD> <BODY> <FORM> <B>Calling the history.go() method:</B> <HR> Enter a number (+/-):<INPUT TYPE=”text” NAME=”histNum” SIZE=3 VALUE=”0”> <INPUT TYPE=”button” VALUE=”Go to Offset” onClick=”doGoNum(this.form)”><P> Enter a word in a title:<INPUT TYPE=”text” NAME=”histWord”> <INPUT TYPE=”button” VALUE=”Go to Match” onClick=”doGoTxt(this.form)”> </FORM> </BODY> </HTML> windowObject.history.go() CD-354 Part VI ✦ Appendixes Chapter 18 Examples The following sections contain examples from Chapter 18, “The Document and Body Objects.” Document Object Properties activeElement NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ Example Use The Evaluator (Chapter 13) with IE4+ to experiment with the activeElement property. Type the following statement into the top text box: document.activeElement.value After you press the Enter key, the Results box shows the value of the text box you just typed into (the very same expression you just typed). But if you then click the Evaluate button, you will see the value property of that button object appear in the Results box. alinkColor bgColor fgColor linkColor vlinkColor NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓ ✓ ✓ ✓✓✓✓ document.alinkColor CD-355 Appendix F ✦ Examples from Parts III and IV Example I select some color values at random to plug into three settings of the ugly colors group for Listing 18-1. The smaller window displays a dummy button so that you can see how its display contrasts with color settings. Notice that the script sets the colors of the smaller window by rewriting the entire window’s HTML code. After changing colors, the script displays the color values in the original window’s textarea. Even though some colors are set with the color constant values, properties come back in the hexadecimal triplet values. You can experiment to your heart’s content by changing color values in the listing. Every time you change the values in the script, save the HTML file and reload it in the browser. Listing 18-1: Color Sampler <HTML> <HEAD> <TITLE>Color Me</TITLE> <SCRIPT LANGUAGE=”JavaScript”> function defaultColors() { return “BGCOLOR=’#c0c0c0’ VLINK=’#551a8b’ LINK=’#0000ff’” } function uglyColors() { return “BGCOLOR=’yellow’ VLINK=’pink’ LINK=’lawngreen’” } function showColorValues() { var result = “” result += “bgColor: “ + newWindow.document.bgColor + “\n” result += “vlinkColor: “ + newWindow.document.vlinkColor + “\n” result += “linkColor: “ + newWindow.document.linkColor + “\n” document.forms[0].results.value = result } // dynamically writes contents of another window function drawPage(colorStyle) { var thePage = “” thePage += “<HTML><HEAD><TITLE>Color Sampler</TITLE></HEAD><BODY “ if (colorStyle == “default”) { thePage += defaultColors() } else { thePage += uglyColors() } thePage += “>Just so you can see the variety of items and color, <A “ thePage += “HREF=’http://www.nowhere.com’>here\’s a link</A>, and “ + “<A HREF=’http://home.netscape.com’> here is another link </A> “ + “you can use on-line to visit and see how its color differs “ + “from the standard link.” thePage += “<FORM>” Continued document.alinkColor CD-356 Part VI ✦ Appendixes Listing 18-1 (continued) thePage += “<INPUT TYPE=’button’ NAME=’sample’ VALUE=’Just a Button’>” thePage += “</FORM></BODY></HTML>” newWindow.document.write(thePage) newWindow.document.close() showColorValues() } // the following works properly only in Windows Navigator function setColors(colorStyle) { if (colorStyle == “default”) { document.bgColor = “#c0c0c0” } else { document.bgColor = “yellow” } } var newWindow = window.open(“”,””,”height=150,width=300”) </SCRIPT> </HEAD> <BODY> Try the two color schemes on the document in the small window. <FORM> <INPUT TYPE=”button” NAME=”default” VALUE=’Default Colors’ onClick=”drawPage(‘default’)”> <INPUT TYPE=”button” NAME=”weird” VALUE=”Ugly Colors” onClick=”drawPage(‘ugly’)”><P> <TEXTAREA NAME=”results” ROWS=3 COLS=20></TEXTAREA><P><HR> These buttons change the current document, but not correctly on all platforms<P> <INPUT TYPE=”button” NAME=”default” VALUE=’Default Colors’ onClick=”setColors(‘default’)”> <INPUT TYPE=”button” NAME=”weird” VALUE=”Ugly Colors” onClick=”setColors(‘ugly’)”><P> </FORM> <SCRIPT LANGUAGE=”JavaScript”> drawPage(“default”) </SCRIPT> </BODY> </HTML> To satisfy the curiosity of those who want to change the color of a loaded document on the fly, the preceding example includes a pair of buttons that set the color properties of the current document. If you’re running browsers and versions capa- ble of this power (see Table 18-1), everything will look fine; but in other platforms or earlier versions, you may lose the buttons and other document content behind the color. You can still click and activate these items, but the color obscures them. Unless you know for sure that users of your Web page use only browsers and document.alinkColor CD-357 Appendix F ✦ Examples from Parts III and IV clients empowered for background color changes, do not change colors by setting properties of an existing document. If you are using Internet Explorer 3 for the Macintosh, you will experience some difficulties with Listing 18-1. The script in the main document loses its connection with the subwindow; it does not redraw the second window with other colors. You can, however, change the colors in the main document. The significant flicker you may experience is related to the way the Mac version redraws content after changing colors. anchors NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓ ✓ ✓ ✓✓✓✓ Example In Listing 18-2, I append an extra script to Listing 17-1 to demonstrate how to extract the number of anchors in the document. The document dynamically writes the number of anchors found in the document. You will not likely ever need to reveal such information to users of your page, and the document.anchors property is not one that you will call frequently. The object model defines it automatically as a document property while defining actual anchor objects. Listing 18-2: Reading the Number of Anchors <HTML> <HEAD> <TITLE>document.anchors Property</TITLE> <SCRIPT LANGUAGE=”JavaScript”> function goNextAnchor(where) { window.location.hash = where } </SCRIPT> </HEAD> <BODY> <A NAME=”start”><H1>Top</H1></A> <FORM> <INPUT TYPE=”button” NAME=”next” VALUE=”NEXT” onClick=”goNextAnchor(‘sec1’)”> </FORM> Continued Note document.anchors CD-358 Part VI ✦ Appendixes Listing 18-2 (continued) <HR> <A NAME=”sec1”><H1>Section 1</H1></A> <FORM> <INPUT TYPE=”button” NAME=”next” VALUE=”NEXT” onClick=”goNextAnchor(‘sec2’)”> </FORM> <HR> <A NAME=”sec2”><H1>Section 2</H1></A> <FORM> <INPUT TYPE=”button” NAME=”next” VALUE=”NEXT” onClick=”goNextAnchor(‘sec3’)”> </FORM> <HR> <A NAME=”sec3”><H1>Section 3</H1></A> <FORM> <INPUT TYPE=”button” NAME=”next” VALUE=”BACK TO TOP” onClick=”goNextAnchor(‘start’)”> </FORM> <HR><P> <SCRIPT LANGUAGE=”JavaScript”> document.write(“<I>There are “ + document.anchors.length + “ anchors defined for this document</I>”) </SCRIPT> </BODY> </HTML> applets NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ ✓✓✓ Example The document.applets property is defined automatically as the browser builds the object model for a document that contains applet objects. You will rarely access this property, except to determine how many applet objects a document has. document.applets CD-359 Appendix F ✦ Examples from Parts III and IV bgColor See alinkColor. body NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓✓ Example Use The Evaluator (Chapter 13) to examine properties of the BODY element object. First, to prove that the document.body is the same as the element object that comes back from longer references, enter the following statement into the top text box with either IE5 or NN6: document.body == document.getElementsByTagName(“BODY”)[0] Next, check out the BODY object’s property listings later in this chapter and enter the listings into the top text box to review their results. For example: document.body.bgColor document.body.tagName charset NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ Example Use The Evaluator (Chapter 13) to experiment with the charset property. To see the default setting applied to the page, enter the following statement into the top text box: document.charset document.charset CD-360 Part VI ✦ Appendixes If you are running IE5+ for Windows 98 and you enter the following statement, the browser will apply a different character set to the page: document.charset = “iso-8859-2” If your version of Windows does not have that character set installed in the system, the browser may ask permission to download and install the character set. characterSet NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓ Example Use The Evaluator (Chapter 13) to experiment with the characterSet property in NN6. To see the default setting applied to the page, enter the following statement into the top text box: document.charset cookie NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓ ✓ ✓ ✓✓✓✓ Example Experiment with the last group of statements in Listing 18-3 to create, retrieve, and delete cookies. You can also experiment with The Evaluator by assigning a name/value pair string to document.cookie, and then examining the value of the cookie property. defaultCharset NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ document.defaultCharset CD-361 Appendix F ✦ Examples from Parts III and IV Example Use The Evaluator (Chapter 13) to experiment with the defaultCharset property. To see the default setting applied to the page, enter the following statement into the top text box: document.defaultCharset documentElement NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓ Example Use The Evaluator (Chapter 13) to examine the behavior of the documentElement property. In IE5+ or NN6, enter the following statement into the top text field: document.documentElement.tagName The result is HTML, as expected. expando NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ Example Use The Evaluator (Chapter 13) to experiment with the document.expando property in IE4+. Begin by proving that the document object can normally accept cus- tom properties. Type the following statement into the top text field: document.spooky = “Boo!” This property is now set and stays that way until the page is either reloaded or unloaded. document.expando . “bgColor: “ + newWindow.document.bgColor + “ ” result += “vlinkColor: “ + newWindow.document.vlinkColor + “ ” result += “linkColor: “ + newWindow.document.linkColor + “ ” document.forms[0].results.value. in the document. The document dynamically writes the number of anchors found in the document. You will not likely ever need to reveal such information to users of your page, and the document.anchors. TOP” onClick=”goNextAnchor(‘start’)”> </FORM> <HR><P> <SCRIPT LANGUAGE= JavaScript > document.write(“<I>There are “ + document.anchors.length + “ anchors defined for this document</I>”) </SCRIPT> </BODY> </HTML> applets NN2