JavaScript Bible, Gold Edition part 189 pot

CD-372 Part VI ✦ Appendixes referrer NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓ ✓ ✓ ✓✓✓✓ Example This demonstration requires two documents (and for IE, you’ll also need to access the documents from a Web server). The first document, in Listing 18-11, simply contains one line of text as a link to the second document. In the second document (Listing 18-12), a script verifies the document from which the user came via a link. If the script knows about that link, it displays a message relevant to the experience the user had at the first document. Also try opening Listing 18-12 in a new browser window from the Open File command in the File menu to see how the script won’t recognize the referrer. Listing 18-11: A Source Document <HTML> <HEAD> <TITLE>document.referrer Property 1</TITLE> </HEAD> <BODY> <H1><A HREF=”lst18-12.htm”>Visit my sister document</A> </BODY> </HTML> Listing 18-12: Checking document.referrer <HTML> <HEAD> <TITLE>document.referrer Property 2</TITLE> </HEAD> <BODY><H1> <SCRIPT LANGUAGE=”JavaScript”> if(document.referrer.length > 0 && document.referrer.indexOf(“18-11.htm”) != -1){ document.referrer CD-373 Appendix F ✦ Examples from Parts III and IV document.write(“How is my brother document?”) } else { document.write(“Hello, and thank you for stopping by.”) } </SCRIPT> </H1></BODY> </HTML> scripts NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ Example You can experiment with the document.scripts array in The Evaluator (Chapter 13). For example, you can see that only one SCRIPT element object is in The Evaluator page if you enter the following statement into the top text field: document.scripts.length If you want to view all of the properties of that lone SCRIPT element object, enter the following statement into the bottom text field: document.scripts[0] Among the properties are both innerText and text. If you assign an empty string to either property, the scripts are wiped out from the object model, but not from the browser. The scripts disappear because after the scripts loaded, they were cached outside of the object model. Therefore, if you enter the following statement into the top field: document.scripts[0].text = “” the script contents are gone from the object model, yet subsequent clicks of the Evaluate and List Properties buttons (which invoke functions of the SCRIPT element object) still work. document.scripts CD-374 Part VI ✦ Appendixes selection NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ Example See Listings 15-30 and 15-39 in Chapter 15 to see the document.selection property in action for script-controlled copying and pasting (IE/Windows only). URL See location. vlinkColor See alinkColor. width See height. Methods captureEvents(eventTypeList) NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓ Example See the example for the NN4 window.captureEvents() method in Chapter 16 (Listing 16-21) to see how to capture events on their way to other objects. In that example, you can substitute the document reference for the window reference to see how the document version of the method works just like the window version. If you understand the mechanism for windows, you understand it for documents. The same is true for the other NN4 event methods. document.captureEvents() CD-375 Appendix F ✦ Examples from Parts III and IV close() NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓ ✓ ✓ ✓✓✓✓ Example Before you experiment with the document.close() method, be sure you understand the document.write() method described later in this chapter. After that, make a separate set of the three documents for that method’s example (Listings 18-16 through 18-18 in a different directory or folder). In the takePulse() function listing, comment out the document.close() statement, as shown here: msg += “<P>Make it a great day!</BODY></HTML>” parent.frames[1].document.write(msg) //parent.frames[1].document.close() Now try the pages on your browser. You see that each click of the upper button appends text to the bottom frame, without first removing the previous text. The reason is that the previous layout stream was never closed. The document thinks that you’re still writing to it. Also, without properly closing the stream, the last line of text may not appear in the most recently written batch. createAttribute(“attributeName”) NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓ Example Unfortunately, the setAttributeNode() method in NN6 does not yet work with attributes generated by the createAttribute() method. This will be fixed eventu- ally, and you can experiment adding attributes to sample elements in The Evaluator. In the meantime, you can still create an attribute and inspect its properties. Enter the following text into the top text box: a = document.createAttribute(“author”) Now enter a into the bottom text box to inspect the properties of an Attr object. document.createAttribute() CD-376 Part VI ✦ Appendixes createElement(“tagName”) NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓✓ Example Chapter 15 contains numerous examples of the document.createElement() method in concert with methods that add or replace content to a document. See Listings 15-10, 15-21, 15-22,15 -28, 15-29, and 15-31. createEventObject([eventObject]) NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓ Example See the discussion of the fireEvent() method in Chapter 15 for an example of the sequence to follow when creating an event to fire on an element. createStyleSheet([“URL”[, index]]) NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ Example Listing 18-13 demonstrates adding an internal and external style sheet to a document. For the internal addition, the addStyle1() function invokes document. createStyleSheet() and adds a rule governing the P elements of the page (not available for IE5/Mac). In the addStyle2() function, an external file is loaded. That file contains the following two style rules: H2 {font-size:20pt; color:blue} P {color:blue} document.createStyleSheet() CD-377 Appendix F ✦ Examples from Parts III and IV Notice that by specifying a position of zero for the imported style sheet, the addition of the internal style sheet always comes afterward in styleSheet object sequence. Thus, except when you deploy only the external style sheet, the red text color of the P elements override the blue color of the external style sheet. If you remove the second parameter of the createStyleSheet() method in addStyle2(), the external style sheet is appended to the end of the list. If it is the last style sheet to be added, the blue color prevails. Repeatedly clicking the buttons in this example continues to add the style sheets to the document. Listing 18-13: Using document.createStyleSheet() <HTML> <HEAD> <TITLE>document.createStyleSheet() Method</TITLE> <SCRIPT LANGUAGE=”JavaScript”> function addStyle1() { var newStyle = document.createStyleSheet() newStyle.addRule(“P”, “font-size:16pt; color:red”) } function addStyle2() { var newStyle = document.createStyleSheet(“lst18-13.css”,0) } </SCRIPT> </HEAD> <BODY> <H1>document.createStyleSheet() Method</H1> <HR> <FORM> <INPUT TYPE=”button” VALUE=”Add Internal” onClick=”addStyle1()”>  <INPUT TYPE=”button” VALUE=”Add External” onClick=”addStyle2()”> </FORM> <H2>Section 1</H2> <P>Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim adminim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</P> <H2>Section 2</H2> <P>Duis aute irure dolor in reprehenderit involuptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deseruntmollit anim id est laborum.</P> </BODY> </HTML> document.createStyleSheet() CD-378 Part VI ✦ Appendixes createTextNode(“text”) NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓ Example While Chapter 14 and 15 (Listing 15-21, for instance) provide numerous examples of the createTextNode() method at work, using The Evaluator (Chapter 13) is instructive to see just what the method generates in IE5+ and NN6. You can use one of the built-in global variables of The Evaluator to hold a reference to a newly generated text node by entering the following statement into the top text field: a = document.createTextNode(“Hello”) The Results box shows that an object was created. Now, look at the properties of the object by typing a into the bottom text field. The precise listings of properties varies between IE5+ and NN6, but the W3C DOM properties that they share in com- mon indicate that the object is a node type 3 with a node name of #text. No par- ents, children, or siblings exist yet because the object created here is not part of the document hierarchy tree until it is explicitly added to the document. To see how insertion works, enter the following statement into the top text field to append the text node to the myP paragraph: document.getElementById(“myP”).appendChild(a) The word “Hello” appears at the end of the simple paragraph lower on the page. Now you can modify the text of that node either via the reference from the point of view of the containing P element or via the global variable reference for the newly created node: document.getElementById(“myP”).lastChild.nodeValue = “Howdy” or a.nodeValue = “Howdy” document.createTextNode() CD-379 Appendix F ✦ Examples from Parts III and IV elementFromPoint(x, y) NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ Example Listing 18-14 is a document that contains many different types of elements, each of which has an ID attribute assigned to it. The onMouseOver event handler for the document object invokes a function that finds out which element the cursor is over when the event fires. Notice that the event coordinates are event.clientX and event.clientY, which use the same coordinate plane as the page for their point of reference. As you roll the mouse over every element, its ID appears on the page. Some elements, such as BR and TR, occupy no space in the document, so you can- not get their IDs to appear. On a typical browser screen size, a positioned element rests atop one of the paragraph elements so that you can see how the elementFromPoint() method handles overlapping elements. If you scroll the page, the coordinates for the event and the page’s elements stay in sync. Listing 18-14: Using the elementFromPoint() Method <HTML> <HEAD> <TITLE>document.elementFromPoint() Method</TITLE> <SCRIPT LANGUAGE=”JavaScript”> function showElemUnderneath() { var elem = document.elementFromPoint(event.clientX, event.clientY) document.all.mySpan.innerText = elem.id } document.onmouseover = showElemUnderneath </SCRIPT> </HEAD> <BODY ID=”myBody”> <H1 ID=”header”>document.elementFromPoint() Method</H1> <HR ID=”myHR”> <P ID=”instructions”>Roll the mouse around the page. The coordinates of the mouse pointer are currently atop an element<BR ID=”myBR”>whose ID is:”<SPAN ID=”mySpan” STYLE=”font-weight:bold”></SPAN>”.</P> <FORM ID=”myForm”> <INPUT ID=”myButton” TYPE=”button” VALUE=”Sample Button” onClick=””>  </FORM> Continued document.elementFromPoint() CD-380 Part VI ✦ Appendixes Listing 18-14 (continued) <TABLE BORDER=1 ID=”myTable”> <TR ID=”tr1”> <TD ID=”td_A1”>Cell A1</TD> <TD ID=”td_B1”>Cell B1</TD> </TR> <TR ID=”tr2”> <TD ID=”td_A2”>Cell A2</TD> <TD ID=”td_B2”>Cell B2</TD> </TR> </TABLE> <H2 ID=”sec1”>Section 1</H2> <P ID=”p1”>Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim adminim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</P> <H2 ID=”sec2”>Section 2</H2> <P ID=”p2”>Duis aute irure dolor in reprehenderit involuptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deseruntmollit anim id est laborum.</P> <DIV ID=”myDIV” STYLE=”position:absolute; top:340; left:300; background- color:yellow”> Here is a positioned element.</DIV> </BODY> </HTML> execCommand(“commandName”[, UIFlag] [, param]) NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ Example You can find many examples of the execCommand() method for the TextRange object in Chapter 19. But you can try out the document-specific commands in The Evaluator (Chapter 13) if you like. Try each of the following statements in the top text box and click the Evaluate button: document.execCommand() CD-381 Appendix F ✦ Examples from Parts III and IV document.execCommand(“Refresh”) document.execCommand(“SelectAll”) document.execCommand(“Unselect”) All methods return true in the Results box. Because any way you can evaluate a statement in The Evaluator forces a body selection to become deselected before the evaluation takes place, you can’t experiment this way with the selection-oriented commands. getElementById(“elementID”) NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓ Example You can find many examples of this method in use throughout this book, but you can take a closer look at how it works by experimenting in The Evaluator (Chapter 13). A number of elements in The Evaluator have IDs assigned to them, so that you can use the method to inspect the objects and their properties. Enter the following statements into both the top and bottom text fields of The Evaluator. Results from the top field are references to the objects; results from the bottom field are lists of properties for the particular object. document.getElementById(“myP”) document.getElementById(“myEM”) document.getElementById(“myTitle”) document.getElementById(“myScript”) As you see in the Results field, NN6 is more explicit about the type of HTML element object being referenced in the top text field than IE5. But both browsers are pointing to the same objects just the same. getElementsByName(“elementName”) NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓ document.getElementsByName() . 2</TITLE> </HEAD> <BODY><H1> <SCRIPT LANGUAGE= JavaScript > if(document.referrer.length > 0 && document.referrer.indexOf(“18-11.htm”) != -1){ document.referrer CD-373 Appendix F ✦ Examples from Parts III and IV document.write(“How. CD-372 Part VI ✦ Appendixes referrer NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓ ✓ ✓. buttons (which invoke functions of the SCRIPT element object) still work. document.scripts CD-374 Part VI ✦ Appendixes selection NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ Example See