JavaScript Bible, Gold Edition part 167 pot

CD-152 Part VI ✦ Appendixes outerHTML outerText NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ Example The page generated by Listing 15-13 (IE4+/Windows only) contains an H1 element label and a paragraph of text. The purpose is to demonstrate how the outerHTML and outerText properties differ in their intent. Two text boxes contain the same combination of text and HTML tags that replaces the element that creates the paragraph’s label. If you apply the default content of the first text box to the outerHTML property of the label1 object, the H1 element is replaced by a SPAN element whose CLASS attribute acquires a different style sheet rule defined earlier in the document. Notice that the ID of the new SPAN element is the same as the original H1 element. This allows the script attached to the second button to address the object. But this second script replaces the element with the raw text (including tags). The element is now gone, and any attempt to change the outerHTML or outerText properties of the label1 object causes an error because there is no longer a label1 object in the document. Use this laboratory to experiment with some other content in both text boxes. Listing 15-13: Using outerHTML and outerText Properties <HTML> <HEAD> <TITLE>outerHTML and outerText Properties</TITLE> <STYLE TYPE=”text/css”> H1 {font-size:18pt; font-weight:bold; font-family:”Comic Sans MS”, Arial, sans- serif} .heading {font-size:20pt; font-weight:bold; font-family:”Arial Black”, Arial, sans-serif} </STYLE> <SCRIPT LANGUAGE=”JavaScript”> function setGroupLabelAsText(form) { var content = form.textInput.value if (content) { elementObject.outerHTML CD-153 Appendix F ✦ Examples from Parts III and IV document.all.label1.outerText = content } } function setGroupLabelAsHTML(form) { var content = form.HTMLInput.value if (content) { document.all.label1.outerHTML = content } } </SCRIPT> </HEAD> <BODY> <FORM> <P> <INPUT TYPE=”text” NAME=”HTMLInput” VALUE=”<SPAN ID=’label1’ CLASS=’heading’>Article the First</SPAN>” SIZE=55> <INPUT TYPE=”button” VALUE=”Change Heading HTML” onClick=”setGroupLabelAsHTML(this.form)”> </P> <P> <INPUT TYPE=”text” NAME=”textInput” VALUE=”<SPAN ID=’label1’ CLASS=’heading’>Article the First</SPAN>” SIZE=55> <INPUT TYPE=”button” VALUE=”Change Heading Text” onClick=”setGroupLabelAsText(this.form)”> </P> </FORM> <H1 ID=”label1”>ARTICLE I</H1> <P> Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the government for a redress of grievances. </P> </BODY> </HTML> ownerDocument NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓ elementObject.ownerDocument CD-154 Part VI ✦ Appendixes Example Use The Evaluator (Chapter 13) to explore the ownerDocument property in NN6. Enter the following statement into the top text box: document.body.childNodes[5].ownerDocument The result is a reference to the document object. You can use that to inspect a property of the document, as shown in the following statement you should enter into the top text box: document.body.childNodes[5].ownerDocument.URL This returns the document.URL property for the document that owns the child node. parentElement NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ Example You can experiment with the parentElement property in The Evaluator. The document contains a P element named myP. Type each of the following statements from the left column into the upper expression evaluation text box and press Enter to see the results. Expression Result document.all.myP.tagName P document.all.myP.parentElement [object] document.all.myP.parentElement.tagName BODY document.all.myP.parentElement.parentElement [object] document.all.myP.parentElement.parentElement.tagName HTML document.all.myP.parentElement.parentElement.parentElement null elementObject.parentElement CD-155 Appendix F ✦ Examples from Parts III and IV parentNode NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓ Example Use The Evaluator to examine the parentNode property values of both an element and a non-element node. Begin with the following two statements and watch the results of each: document.getElementById(“myP”).parentNode.tagName document.getElementById(“myP”).parentElement.tagName (IE only) Now examine the properties from the point of view of the first text fragment node of the myP paragraph element: document.getElementById(“myP”).childNodes[0].nodeValue document.getElementById(“myP”).childNodes[0].parentNode.tagName document.getElementById(“myP”).childNodes[0].parentElement (IE only) Notice (in IE) that the text node does not have a parentElement property. parentTextEdit NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ Example The page resulting from Listing 15-14 contains a paragraph of Greek text and three radio buttons that select the size of a paragraph chunk: one character, one word, or one sentence. If you click anywhere within the large paragraph, the onClick event handler invokes the selectChunk() function. The function first examines which of the radio buttons is selected to determine how much of the paragraph to highlight (select) around the point at which the user clicks. After the script employs the parentTextEdit property to test whether the clicked element has a valid parent capable of creating a text range, it calls upon the property again to help create the text range. From there, TextRange object methods elementObject.parentTextEdit CD-156 Part VI ✦ Appendixes shrink the range to a single insertion point, move that point to the spot nearest the cursor location at click time, expand the selection to encompass the desired chunk, and select that bit of text. Notice one workaround for the TextRange object’s expand() method anomaly: If you specify a sentence, IE doesn’t treat the beginning of a P element as the starting end of a sentence automatically. A camouflaged (white text color) period is appended to the end of the previous element to force the TextRange object to expand only to the beginning of the first sentence of the targeted P element. Listing 15-14: Using the parentTextEdit Property <HTML> <HEAD> <TITLE>parentTextEdit Property</TITLE> <STYLE TYPE=”text/css”> P {cursor:hand} </STYLE> <SCRIPT LANGUAGE=”JavaScript”> function selectChunk() { var chunk, range for (var i = 0; i < document.forms[0].chunk.length; i++) { if (document.forms[0].chunk[i].checked) { chunk = document.forms[0].chunk[i].value break } } var x = window.event.clientX var y = window.event.clientY if (window.event.srcElement.parentTextEdit) { range = window.event.srcElement.parentTextEdit.createTextRange() range.collapse() range.moveToPoint(x, y) range.expand(chunk) range.select() } } </SCRIPT> </HEAD> <BODY BGCOLOR=”white”> <FORM> <P>Choose how much of the paragraph is to be selected when you click anywhere in it:<BR> <INPUT TYPE=”radio” NAME=”chunk” VALUE=”character” CHECKED>Character <INPUT TYPE=”radio” NAME=”chunk” VALUE=”word”>Word <INPUT TYPE=”radio” NAME=”chunk” VALUE=”sentence”>Sentence elementObject.parentTextEdit CD-157 Appendix F ✦ Examples from Parts III and IV <FONT COLOR=”white”>.</FONT></P> </FORM> <P onClick=”selectChunk()”> 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. 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 deserunt mollit anim id est laborum. </P> </BODY> </HTML> previousSibling See nextSibling. readyState NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ Example To witness a readyState property other than complete for standard HTML, you can try examining the property in a script that immediately follows an <IMG> tag: <IMG ID=”myImg” SRC=”someImage.gif”> <SCRIPT LANGUAGE=”JavaScript”> alert(document.all.myImg.readyState) </SCRIPT> Putting this fragment into a document that is accessible across a slow network helps. If the image is not in the browser’s cache, you might get the uninitialized or loading result. The former means that the IMG object exists, but it has not started receiving the image data from the server yet. If you reload the page, chances are that the image will load instantaneously from the cache and the readyState property will report complete. elementObject.readyState CD-158 Part VI ✦ Appendixes recordNumber NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ Example You can see the recordNumber property in action in Listing 15-15. The data source is a small, tab-delimited file consisting of 20 records of Academy Award data. Thus, the table that displays a subset of the fields is bound to the data source object. Also bound to the data source object are three SPAN objects embedded within a paragraph near the top of the page. As the user clicks a row of data, three fields from that clicked record are placed into the bound SPAN objects. The script part of this page is a mere single statement. When the user triggers the onClick event handler of the repeated TR object, the function receives as a param- eter a reference to the TR object. The data store object maintains an internal copy of the data in a recordset object. One of the properties of this recordset object is the AbsolutePosition property, which is the integer value of the current record that the data object points to (it can point to only one row at a time, and the default row is the first row). The statement sets the AbsolutePosition property of the recordset object to the recordNumber property for the row that the user clicks. Because the three SPAN elements are bound to the same data source, they are immediately updated to reflect the change to the data object’s internal pointer to the current record. Notice, too, that the third SPAN object is bound to one of the data source fields not shown in the table. You can reach any field of a record because the Data Source Object holds the entire data source content. Listing 15-15: Using the Data Binding recordNumber Property <HTML> <HEAD> <TITLE>Data Binding (recordNumber)</TITLE> <STYLE TYPE=”text/css”> .filmTitle {font-style:italic} </STYLE> <SCRIPT LANGUAGE=”JavaScript”> // set recordset pointer to the record clicked on in the table. function setRecNum(row) { document.oscars.recordset.AbsolutePosition = row.recordNumber } </SCRIPT> elementObject.recordNumber CD-159 Appendix F ✦ Examples from Parts III and IV </HEAD> <BODY> <P><B>Academy Awards 1978-1997</B> (Click on a table row to extract data from one record.)</P> <P>The award for Best Actor of <SPAN DATASRC=”#oscars” DATAFLD=”Year”></SPAN>  went to <SPAN DATASRC=”#oscars” DATAFLD=”Best Actor”></SPAN>  for his outstanding achievement in the film <SPAN CLASS=”filmTitle” DATASRC=”#oscars” DATAFLD=”Best Actor Film”></SPAN>.</P> <TABLE BORDER=1 DATASRC=”#oscars” ALIGN=”center”> <THEAD STYLE=”background-color:yellow; text-align:center”> <TR><TD>Year</TD> <TD>Film</TD> <TD>Director</TD> <TD>Actress</TD> <TD>Actor</TD> </TR> </THEAD> <TR ID=repeatableRow onClick=”setRecNum(this)”> <TD><DIV ID=”col1” DATAFLD=”Year”></DIV></TD> <TD><DIV CLASS=”filmTitle” ID=”col2” DATAFLD=”Best Picture”></DIV></TD> <TD><DIV ID=”col3” DATAFLD=”Best Director”></DIV></TD> <TD><DIV ID=”col4” DATAFLD=”Best Actress”></DIV></TD> <TD><DIV ID=”col5” DATAFLD=”Best Actor”></DIV></TD> </TR> </TABLE> <OBJECT ID=”oscars” CLASSID=”clsid:333C7BC4-460F-11D0-BC04-0080C7055A83”> <PARAM NAME=”DataURL” VALUE=”Academy Awards.txt”> <PARAM NAME=”UseHeader” VALUE=”True”> <PARAM NAME=”FieldDelim” VALUE=”	”> </OBJECT> </BODY> </HTML> runtimeStyle NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ Example Use The Evaluator (Chapter 13) to compare the properties of the runtimeStyle and style objects of an element. For example, an unmodified copy of The Evaluator contains an EM element whose ID is “myEM”. Enter both elementObject.runtimeStyle CD-160 Part VI ✦ Appendixes document.all.myEM.style.color and document.all.myEM.runtimeStyle.color into the top text field in turn. Initially, both values are empty. Now assign a color to the style property via the upper text box: document.all.myEM.style.color = “red” If you now type the two earlier statements into the upper box, you can see that the style object reflects the change, while the runtimeStyle object still holds onto its original (empty) value. scopeName NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ Example If you have a sample document that contains XML and a namespace spec, you can use document.write() or alert() methods to view the value of the scopeName property. The syntax is document.all.elementID.scopeName scrollHeight scrollWidth NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ Example Use The Evaluator (Chapter 13) to experiment with these two properties of the TEXTAREA object, which displays the output of evaluations and property listings. elementObject.scrollHeight CD-161 Appendix F ✦ Examples from Parts III and IV To begin, enter the following into the bottom one-line text field to list the properties of the body object: document.body This displays a long list of properties for the body object. Now enter the following property expression in the top one-line text field to see the scrollHeight property of the output TEXTAREA when it holds the dozens of lines of property listings: document.all.output.scrollHeight The result, some number probably in the hundreds, is now displayed in the output TEXTAREA. This means that you can scroll the content of the output element verti- cally to reveal that number of pixels. Click the Evaluate button once more. The result, 13 or 14, is a measure of the scrollHeight property of the TEXTAREA that had only the previous result in it. The scrollable height of that content was only 13 or 14 pixels, the height of the font in the TEXTAREA. The scrollWidth property of the output TEXTAREA is fixed by the width assigned to the element’s COLS attribute (as calculated by the browser to determine how wide to make the textarea on the page). scrollLeft scrollTop NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ Example Use The Evaluator (Chapter 13) to experiment with these two properties of the TEXTAREA object, which displays the output of evaluations and property listings. To begin, enter the following into the bottom one-line text field to list the properties of the body object: document.body This displays a long list of properties for the body object. Use the TEXTAREA’s scrollbar to page down a couple of times. Now enter the following property expression in the top one-line text field to see the scrollTop property of the output TEXTAREA after you scroll: document.all.output.scrollTop elementObject.scrollLeft . Arial, sans-serif} </STYLE> <SCRIPT LANGUAGE= JavaScript > function setGroupLabelAsText(form) { var content = form.textInput.value if (content) { elementObject.outerHTML CD-153 Appendix F ✦ Examples from Parts III and IV document.all.label1.outerText. object methods elementObject.parentTextEdit CD-156 Part VI ✦ Appendixes shrink the range to a single insertion point, move that point to the spot nearest the cursor location at click time, expand. grievances. </P> </BODY> </HTML> ownerDocument NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓ elementObject.ownerDocument CD-154 Part VI ✦ Appendixes Example Use The Evaluator (Chapter 13) to explore the ownerDocument property