JavaScript Bible, Gold Edition part 188 pdf

CD-362 Part VI ✦ Appendixes Now freeze the document object’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.expando is turned off, the first custom property is still accessible and modifiable. fgColor See alinkColor. fileCreatedDate fileModifiedDate fileSize NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ 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 innerText properties of carefully-located SPAN elements in the body content. Listing 18-4: Viewing File Dates <HTML> <HEAD> <TITLE>fileCreatedDate and fileModifiedDate Properties</TITLE> <SCRIPT LANGUAGE=”JavaScript”> document.fileCreatedDate CD-363 Appendix F ✦ Examples from Parts III and IV 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> <BODY onLoad=”fillInBlanks()”> <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 NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓ ✓ ✓ ✓✓✓✓ 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 CD-364 Part VI ✦ Appendixes Listing 18-5: Using the document.forms Property <HTML> <HEAD> <TITLE>document.forms example</TITLE> <SCRIPT LANGUAGE=”JavaScript”> 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> <FORM NAME=”theBlues”> <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 NAME=”visit”> <INPUT TYPE=”button” VALUE=”Visit music site” onClick=”goMusic()”> </FORM> </BODY> </HTML> frames NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ document.frames CD-365 Appendix F ✦ Examples from Parts III and IV Example See Listings 16-7 and 16-8 for examples of using the frames property with window objects. The listings works with IE4+ if you swap references to the window with document. height width NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ Example Use The Evaluator (Chapter 13) to examine the height and width properties 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 window’s content region. images NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓(✓) ✓✓ ✓ Example The document.images property is defined automatically as the browser builds the object model for a document that contains image objects. See the discussion about the Image object in Chapter 22 for reference examples. document.images CD-366 Part VI ✦ Appendixes implementation NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓ 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 NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓ ✓ ✓ ✓✓✓✓ Example Experiment with the document.lastModified property 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 CD-367 Appendix F ✦ Examples from Parts III and IV <CENTER> <H1>GiantCo Home Page</H1></CENTER> <SCRIPT LANGUAGE=”JavaScript”> 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 Date object, 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 NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓ Example Listing 18-7 demonstrates only for NN4 how to use the document.layers property 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 onLoad event 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> <SCRIPT LANGUAGE=”JavaScript1.2”> var output = “” Continued document.layers CD-368 Part VI ✦ Appendixes 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> <BODY onLoad=”revealLayers()”> <LAYER NAME=”Europe”> <LAYER NAME=”Germany”></LAYER> <LAYER NAME=”Netherlands”> <LAYER NAME=”Amsterdam”></LAYER> <LAYER NAME=”Rotterdam”></LAYER> </LAYER> <LAYER NAME=”France”></LAYER> </LAYER> <LAYER NAME=”Africa”> <LAYER NAME=”South Africa”></LAYER> <LAYER NAME=”Ivory Coast”></LAYER> </LAYER> </BODY> </HTML> linkColor See alinkColor. links NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓ ✓ ✓ ✓✓✓✓ document.links CD-369 Appendix F ✦ Examples from Parts III and IV Example The document.links property is defined automatically as the browser builds the object model for a document that contains link objects. You rarely access this property, except to determine the number of link objects in the document. location URL NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility (✓) ✓✓ ✓(✓)(✓) ✓✓ ✓ Example HTML documents in Listing 18-8 through 18-10 create a test lab that enables you to experiment with viewing the document.URL property for different windows and frames in a multiframe environment. Results are displayed in a table, with an addi- tional listing of the document.title property to help you identify documents being referred to. The same security restrictions that apply to retrieving window.location object 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 ROWS=”60%,40%”> <FRAME NAME=”Frame1” SRC=”lst18-10.htm”> <FRAME NAME=”Frame2” SRC=”lst18-09.htm”> </FRAMESET> </HTML> document.location CD-370 Part VI ✦ Appendixes Listing 18-9 document.URL Property Reader <HTML> <HEAD> <TITLE>URL Property Reader</TITLE> <SCRIPT LANGUAGE=”JavaScript1.1”> 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> <INPUT TYPE=”button” NAME=”opener” VALUE=”Open URL ” onClick=”fillTopFrame()”> </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> <TABLE BORDER=2> <TR><TD ALIGN=RIGHT>document.URL:</TD> <TD><TEXTAREA NAME=”dLoc” ROWS=3 COLS=30 WRAP=”soft”></TEXTAREA></TD></TR> <TR><TD ALIGN=RIGHT>document.title:</TD> <TD><TEXTAREA NAME=”dTitle” ROWS=3 COLS=30 WRAP=”soft”></TEXTAREA></TD></TR> </TABLE> </FORM> </BODY> </HTML> document.location CD-371 Appendix F ✦ Examples from Parts III and IV 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 NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ Example To prove the parentWindow property 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 true only if both references are of the same object. protocol NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ Example If you use The Evaluator (Chapter 13) to test the document.protocol property, you will find that it displays File Protocol in the results because you are access- ing the listing from a local hard disk or CD-ROM. document.protocol . fileModifiedDate Properties</TITLE> <SCRIPT LANGUAGE= JavaScript > document.fileCreatedDate CD-363 Appendix F ✦ Examples from Parts III and IV function fillInBlanks() { var created = document.fileCreatedDate var. property of the “bluish” checkbox by using the document.forms[i] array as part of the address. document.forms CD-364 Part VI ✦ Appendixes Listing 18-5: Using the document.forms Property <HTML> <HEAD> <TITLE>document.forms. Stamper</TITLE> </HEAD> <BODY> document.lastModified CD-367 Appendix F ✦ Examples from Parts III and IV <CENTER> <H1>GiantCo Home Page</H1></CENTER> <SCRIPT LANGUAGE= JavaScript > update = new Date(document.lastModified) theMonth