JavaScript Bible, Gold Edition part 188 pdf

fileCreatedDate fileModifiedDate fileSize NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Example Listing 18-4 dynamically generates several pieces of content relating to the creation and mo

Trang 1

Now freeze the documentobject’s properties with the following statement:

document.expando = false

If you try to add a new property, such as the following, you receive an error:

document.happy = “tra la”

Interestingly, even though document.expandois turned off, the first custom prop-erty is still accessible and modifiable.

fgColor

See alinkColor

fileCreatedDate fileModifiedDate fileSize

NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5

Example

Listing 18-4 dynamically generates several pieces of content relating to the creation and modification dates of the file, as well as its size More importantly, the listing demonstrates how to turn a value returned by the file date properties into a gen-uine date object that can be used for date calculations In the case of Listing 18-4, the calculation is the number of full days between the creation date and the day someone views the file Notice that the dynamically generated content is added very simply via the innerTextproperties of carefully-located SPAN elements in the body content.

Listing 18-4: Viewing File Dates

<HTML>

<HEAD>

<TITLE>fileCreatedDate and fileModifiedDate Properties</TITLE>

document.fileCreatedDate

Trang 2

function fillInBlanks() {

var created = document.fileCreatedDate

var modified = document.fileModifiedDate

document.all.created.innerText = created

document.all.modified.innerText = modified

var createdDate = new Date(created).getTime()

var today = new Date().getTime()

var diff = Math.floor((today - createdDate) / (1000*60*60*24))

document.all.diff.innerText = diff

document.all.size.innerText = document.fileSize

}

</SCRIPT>

</HEAD>

<H1>fileCreatedDate and fileModifiedDate Properties</H1>

<HR>

<P>This file (<SPAN ID=”size”> </SPAN> bytes) was created

on <SPAN ID=”created”> </SPAN> and most

recently modified on <SPAN ID=”modified”> </SPAN>.</P>

<P>It has been <SPAN ID=”diff”> </SPAN> days since this file was

created.</P>

</BODY>

</HTML>

forms

Example

The document in Listing 18-5 is set up to display an alert dialog box that simulates

navigation to a particular music site, based on the checked status of the “bluish”

check box The user input here is divided into two forms: one form with the check

box and the other form with the button that does the navigation A block of copy

fills the space in between Clicking the bottom button (in the second form) triggers

the function that fetches the checked property of the “bluish” checkbox by using

the document.forms[i]array as part of the address.

document.forms

Trang 3

Listing 18-5: Using the document.forms Property

<HTML>

<HEAD>

<TITLE>document.forms example</TITLE>

function goMusic() {

if (document.forms[0].bluish.checked) { alert(“Now going to the Blues music area ”) } else {

alert(“Now going to Rock music area ”) }

}

</SCRIPT>

</HEAD>

<BODY>

<INPUT TYPE=”checkbox” NAME=”bluish”>Check here if you’ve got the blues

</FORM>

<HR>

M<BR>

o<BR>

r<BR>

e<BR>

<BR>

C<BR>

o<BR>

p<BR>

y<BR>

<HR>

</FORM>

</BODY>

</HTML>

frames

document.frames

Trang 4

See Listings 16-7 and 16-8 for examples of using the framesproperty with window

objects The listings works with IE4+ if you swap references to the windowwith

document.

height

width

Example

Use The Evaluator (Chapter 13) to examine the heightand widthproperties of

that document Enter the following statement into the top text box and click the

Evaluate button:

“height=” + document.height + “; width=” + document.width

Resize the window so that you see both vertical and horizontal scrollbars in the

browser window and click the Evaluate button again If either or both numbers get

smaller, the values in the Results box are the exact size of the space occupied by

the document But if you expand the window to well beyond where the scrollbars

are needed, the values extend to the number of pixels in each dimension of the

win-dow’s content region.

images

Example

The document.imagesproperty is defined automatically as the browser builds the

object model for a document that contains image objects See the discussion about

the Imageobject in Chapter 22 for reference examples.

document.images

Trang 5

Example

Use The Evaluator (Chapter 13) to experiment with the document.implementation hasFeature()method in NN6 Enter the following statements one at a time into the top text field and examine the results:

document.implementation.hasFeature(“HTML”,”1.0”) document.implementation.hasFeature(“HTML”,”2.0”) document.implementation.hasFeature(“HTML”,”3.0”) document.implementation.hasFeature(“CSS”,”2.0”) document.implementation.hasFeature(“CSS2”,”2.0”)

Feel free to try other values.

lastModified

Example

Experiment with the document.lastModifiedproperty with Listing 18-6 But also

be prepared for inaccurate readings if the file is located on some servers or local hard disks.

Listing 18-6: document.lastModified Property in Another

Format

<HTML>

<HEAD>

<TITLE>Time Stamper</TITLE>

</HEAD>

<BODY>

document.lastModified

Trang 6

<CENTER> <H1>GiantCo Home Page</H1></CENTER>

update = new Date(document.lastModified)

theMonth = update.getMonth() + 1

theDate = update.getDate()

theYear = update.getFullYear()

document.writeln(“<I>Last updated:” + theMonth + “/” + theDate + “/” + theYear +

“</I>”)

</SCRIPT>

<HR>

</BODY>

</HTML>

As noted at great length in Chapter 36’s discussion about the Dateobject, you

should be aware that date formats vary greatly from country to country Some of

these formats use a different order for date elements When you hard-code a date

format, it may take a form that is unfamiliar to other users of your page.

layers

Example

Listing 18-7 demonstrates only for NN4 how to use the document.layersproperty

to crawl through the entire set of nested layers in a document Using reflexive calls

to the crawlLayers()function, the script builds an indented list of layers in the

same hierarchy as the objects themselves and displays the results in an alert dialog

box After you load this document (the script is triggered by the onLoadevent

han-dler), compare the alert dialog box contents against the structure of <LAYER>tags

in the document.

Listing 18-7: A Navigator 4 Layer Crawler

<HTML>

<HEAD>

var output = “”

Continued

document.layers

Trang 7

Listing 18-7 (continued)

function crawlLayers(layerArray, indent) { for (var i = 0; i < layerArray.length; i++) { output += indent + layerArray[i].name + “\n”

if (layerArray[i].document.layers.length) { var newLayerArray = layerArray[i].document.layers crawlLayers(newLayerArray, indent + “ “)

} } return output }

function revealLayers() { alert(crawlLayers(document.layers, “”)) }

</SCRIPT>

</HEAD>

</LAYER>

</LAYER>

</LAYER>

</BODY>

</HTML>

linkColor

See alinkColor

links

document.links

Trang 8

The document.linksproperty is defined automatically as the browser builds the

object model for a document that contains link objects You rarely access this

prop-erty, except to determine the number of link objects in the document.

location

URL

Example

HTML documents in Listing 18-8 through 18-10 create a test lab that enables you to

experiment with viewing the document.URLproperty for different windows and

frames in a multiframe environment Results are displayed in a table, with an

addi-tional listing of the document.titleproperty to help you identify documents

being referred to The same security restrictions that apply to retrieving

window.locationobject properties also apply to retrieving the document.URL

property from another window or frame.

Listing 18-8: Frameset for document.URL Property Reader

<HTML>

<HEAD>

<TITLE>document.URL Reader</TITLE>

</HEAD>

</FRAMESET>

</HTML>

document.location

Trang 9

Listing 18-9 document.URL Property Reader

<HTML>

<HEAD>

<TITLE>URL Property Reader</TITLE>

function fillTopFrame() { newURL=prompt(“Enter the URL of a document to show in the top frame:”,””)

if (newURL != null && newURL != “”) { top.frames[0].location = newURL }

}

function showLoc(form,item) { var windName = item.value var theRef = windName + “.document”

form.dLoc.value = unescape(eval(theRef + “.URL”)) form.dTitle.value = unescape(eval(theRef + “.title”)) }

</SCRIPT>

</HEAD>

<BODY>

Click the “Open URL” button to enter the location of an HTML document to display

in the upper frame of this window

<FORM>

</FORM>

<HR>

<FORM>

Select a window or frame to view each document property values.<P>

<INPUT TYPE=”radio” NAME=”whichFrame” VALUE=”parent”

onClick=”showLoc(this.form,this)”>Parent window

<INPUT TYPE=”radio” NAME=”whichFrame” VALUE=”top.frames[0]”

onClick=”showLoc(this.form,this)”>Upper frame

<INPUT TYPE=”radio” NAME=”whichFrame” VALUE=”top.frames[1]”

onClick=”showLoc(this.form,this)”>This frame<P>

<TR><TD ALIGN=RIGHT>document.URL:</TD>

<TR><TD ALIGN=RIGHT>document.title:</TD>

</TABLE>

</FORM>

</BODY>

</HTML>

document.location

Trang 10

Listing 18-10: Placeholder for Listing 18-8

<HTML>

<HEAD>

<TITLE>Opening Placeholder</TITLE>

</HEAD>

<BODY>

Initial place holder Experiment with other URLs for this frame (see below)

</BODY>

</HTML>

parentWindow

Example

To prove the parentWindowproperty points to the document’s window, you can

enter the following statement into the top text field of The Evaluator (Chapter 13):

document.parentWindow == self

This expression evaluates to trueonly if both references are of the same object.

protocol

Example

If you use The Evaluator (Chapter 13) to test the document.protocolproperty,

you will find that it displays File Protocolin the results because you are

access-ing the listaccess-ing from a local hard disk or CD-ROM.

document.protocol

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