JavaScript Bible, Gold Edition part 187 doc

Chapter 18 ExamplesThe 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 IE

Trang 1

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>

<HR>

<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:

<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

windowObject.history.go()

Trang 2

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>

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”>

Enter a word in a title:<INPUT TYPE=”text” NAME=”histWord”>

</FORM>

</BODY>

</HTML>

Trang 3

Chapter 18 Examples

The following sections contain examples from Chapter 18, “The Document and Body Objects.”

Document Object Properties

activeElement

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 valueproperty of that button object appear in the Results box.

alinkColor bgColor fgColor linkColor vlinkColor

document.alinkColor

Trang 4

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,

proper-ties 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>

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

Trang 5

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>

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>

drawPage(“default”)

</SCRIPT>

</BODY>

</HTML>

To satisfy the curiosity of those who want to change the color of a loaded docu-ment 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 Tacapa-ble 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

Trang 6

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

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

prop-erty is not one that you will call frequently The object model defines it

automati-cally as a document property while defining actual anchor objects.

Listing 18-2: Reading the Number of Anchors

<HTML>

<HEAD>

<TITLE>document.anchors Property</TITLE>

function goNextAnchor(where) {

window.location.hash = where

}

</SCRIPT>

</HEAD>

<BODY>

<FORM>

</FORM>

Continued

Note

Trang 7

<HR>

<A NAME=”sec1”><H1>Section 1</H1></A>

<FORM>

</FORM>

<HR>

<FORM>

</FORM>

<HR>

<FORM>

<INPUT TYPE=”button” NAME=”next” VALUE=”BACK TO TOP”

onClick=”goNextAnchor(‘start’)”>

</FORM>

<HR><P>

document.write(“<I>There are “ + document.anchors.length +

“ anchors defined for this document</I>”)

</SCRIPT>

</BODY>

</HTML>

applets

Example

The document.appletsproperty 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

Trang 8

See alinkColor.

body

Example

Use The Evaluator (Chapter 13) to examine properties of the BODY element object.

First, to prove that the document.bodyis 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

Example

Use The Evaluator (Chapter 13) to experiment with the charsetproperty To see

the default setting applied to the page, enter the following statement into the top

text box:

document.charset

Trang 9

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

Example

Use The Evaluator (Chapter 13) to experiment with the characterSetproperty in NN6 To see the default setting applied to the page, enter the following statement into the top text box:

document.charset

cookie

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

cookieproperty.

defaultCharset

document.defaultCharset

Trang 10

Use The Evaluator (Chapter 13) to experiment with the defaultCharsetproperty.

To see the default setting applied to the page, enter the following statement into the

top text box:

document.defaultCharset

documentElement

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

Example

Use The Evaluator (Chapter 13) to experiment with the document.expando

prop-erty in IE4+ Begin by proving that the documentobject 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.

Định dạng
Số trang	10
Dung lượng	136,39 KB