CD-382 Part VI ✦ Appendixes Example Use The Evaluator to test out the getElementsByName() method. All form ele- ments in the upper part of the page have names associated with them. Enter the fol- lowing statements into the top text field and observe the results: document.getElementsByName(“output”) document.getElementsByName(“speed”).length document.getElementsByName(“speed”)[0].value You can also explore all of the properties of the text field by typing the following expression into the bottom field: document.getElementsByName(“speed”)[0] getSelection() NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ Example The document in Listing 18-15 provides a cross-browser (but not IE5/Mac) solution to capturing text that a user selects in the page. Selected text is displayed in the textarea. The script uses browser detection and branching to accommodate the diverse ways of recognizing the event and reading the selected text. Listing 18-15: Capturing a Text Selection <HTML> <HEAD> <TITLE>Getting Selected Text</TITLE> <SCRIPT LANGUAGE=”JavaScript”> var isNav4 = (navigator.appName == “Netscape” && parseInt(navigator.appVersion) == 4) var isNav4Min = (navigator.appName == “Netscape” && parseInt(navigator.appVersion) >= 4) var isIE4Min = (navigator.appName.indexOf(“Microsoft”) != -1 && parseInt(navigator.appVersion) >= 4) function showSelection() { if (isNav4Min) { document.forms[0].selectedText.value = document.getSelection() } else if (isIE4Min) { document.getSelection() CD-383 Appendix F ✦ Examples from Parts III and IV if (document.selection) { document.forms[0].selectedText.value = document.selection.createRange().text event.cancelBubble = true } } } if (isNav4) { document.captureEvents(Event.MOUSEUP) } document.onmouseup = showSelection </SCRIPT> </HEAD> <BODY> <H1>Getting Selected Text</H1> <HR> <P>Select some text and see how JavaScript can capture the selection:</P> <H2>ARTICLE I</H2> <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> </HR> <FORM> <TEXTAREA NAME=”selectedText” ROWS=3 COLS=40 WRAP=”virtual”></TEXTAREA> </FORM> </BODY> </HTML> open([“mimeType”] [, replace]) NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓ ✓ ✓ ✓✓✓✓ Example You can see an example of where the document.open() method fits in the scheme of dynamically creating content for another frame in the discussion of the document.write() method, later in this chapter. document.open() CD-384 Part VI ✦ Appendixes queryCommandEnabled(“commandName“) queryCommandIndterm(“commandName“) queryCommandCommandState(“commandName“) queryCommandSupported(“commandName“) queryCommandText(“commandName“) queryCommandValue(“commandName”) NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ Example See the examples for these methods covered under the TextRange object in Chapter 19. recalc([allFlag]) NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ Example You can see an example of recalc() in Listing 15-32 for the setExpression() method. In that example, the dependencies are between the current time and prop- erties of standard element objects. write(“string1“ [,“string2“ [, “stringn“]]) writeln(“string1” [,”string2” [, “stringn”]]) NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓ ✓ ✓ ✓✓✓✓ document.write() CD-385 Appendix F ✦ Examples from Parts III and IV Example The example in Listings 18-16 through 18-18 demonstrates several important points about using the document.write() or document.writeln() methods for writing to another frame. First is the fact that you can write any HTML code to a frame, and the browser accepts it as if the source code came from an HTML file somewhere. In the example, I assemble a complete HTML document, including basic HTML tags for completeness. Listing 18-16: Frameset for document.write() Example <HTML> <HEAD> <TITLE>Writin’ to the doc</TITLE> </HEAD> <FRAMESET ROWS=”50%,50%”> <FRAME NAME=”Frame1” SRC=”lst18-17.htm”> <FRAME NAME=”Frame2” SRC=”lst18-18.htm”> </FRAMESET> </HTML> Listing 18-17: document.write() Example <HTML> <HEAD> <TITLE>Document Write Controller</TITLE> <SCRIPT LANGUAGE=”JavaScript”> function takePulse(form) { var msg = “<HTML><HEAD><TITLE>On The Fly with “ + form.yourName.value + “</TITLE></HEAD>” msg += “<BODY BGCOLOR=’salmon’><H1>Good Day “ + form.yourName.value + “!</H1><HR>” for (var i = 0; i < form.how.length; i++) { if (form.how[i].checked) { msg += form.how[i].value break } } msg += “<P>Make it a great day!</BODY></HTML>” parent.Frame2.document.write(msg) parent.Frame2.document.close() } Continued document.write() CD-386 Part VI ✦ Appendixes Listing 18-17 (continued) function getTitle() { alert(“Lower frame document.title is now:” + parent.Frame2.document.title) } </SCRIPT> </HEAD> <BODY> Fill in a name, and select how that person feels today. Then click “Write To Below” to see the results in the bottom frame. <FORM> Enter your first name:<INPUT TYPE=”text” NAME=”yourName” VALUE=”Dave”><P> How are you today? <INPUT TYPE=”radio” NAME=”how” VALUE=”I hope that feeling continues forever.” CHECKED>Swell <INPUT TYPE=”radio” NAME=”how” VALUE=”You may be on your way to feeling Swell”> Pretty Good <INPUT TYPE=”radio” NAME=”how” VALUE=”Things can only get better from here.”> So-So<P> <INPUT TYPE=”button” NAME=”enter” VALUE=”Write To Below” onClick=”takePulse(this.form)”> <HR> <INPUT TYPE=”button” NAME=”peek” VALUE=”Check Lower Frame Title” onClick=”getTitle()”> </BODY> </HTML> Listing 18-18: Placeholder for Listing 18-16 <HTML> <HEAD> <TITLE>Placeholder</TITLE> <BODY> </BODY> </HTML> Figure 18-2 shows an example of the frame written by the script. document.write() CD-387 Appendix F ✦ Examples from Parts III and IV Figure 18-2: Clicking the Write To Below button in the upper frame causes a script to assemble and write HTML for the bottom frame. A second point to note is that this example customizes the content of the document based on user input. This customization makes the experience of working with your Web page feel far more interactive to the user —yet you’re doing it without any CGI programs running on the server. The third point I want to bring home is that the document created in the separate frame by the document.write() method is a genuine document object. In this example, for instance, the <TITLE> tag of the written document changes if you redraw the lower frame after changing the entry of the name field in the upper frame. If you click the lower button after updating the bottom frame, you see that the document.title property has, indeed, changed to reflect the <TITLE> tag writ- ten to the browser in the course of displaying the frame’s page (except in NN4/Mac, which exhibits a bug for this property in a dynamically written document). The fact that you can artificially create full-fledged, JavaScript document objects on the fly represents one of the most important powers of serverless CGI scripting (for infor- mation delivery to the user) with JavaScript. You have much to take advantage of here if your imagination is up to the task. document.write() CD-388 Part VI ✦ Appendixes Notice that except for NN2, you can easily modify Listing 18-17 to write the results to the same frame as the document containing the field and buttons. Instead of specifying the lower frame parent.frames[1].document.open() parent.frames[1].document.write(msg) parent.frames[1].document.close() the code simply can use document.open() document.write(msg) document.close() This code would replace the form document with the results and not require any frames in the first place. Because the code assembles all of the content for the new document into one variable value, that data survive the one document.write() method. The frameset document (Listing 18-18) creates a blank frame by loading a blank doc- ument (Listing 18-18). An alternative I highly recommend is to have the framesetting document fill the frame with a blank document of its own creation. See “Blank Frames” in Chapter 16 for further details about this technique for NN3+ and IE3+. Event Handlers onStop NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ Example Listing 18-19 provides a simple example of an intentional infinitely looping script. In case you load this page into a browser other than IE5, you can click the Halt Counter button to stop the looping. The Halt Counter button as well as the onStop event handler invoke the same function. document.onStop CD-389 Appendix F ✦ Examples from Parts III and IV Listing 18-19: Scripting the Browser Stop Button <HTML> <HEAD> <TITLE>onStop Event Handler</TITLE> <SCRIPT LANGUAGE=”JavaScript”> var counter = 0 var timerID function startCounter() { document.forms[0].display.value = ++counter //clearTimeout(timerID) timerID = setTimeout(“startCounter()”, 10) } function haltCounter() { clearTimeout(timerID) counter = 0 } document.onstop = haltCounter </SCRIPT> </HEAD> <BODY> <H1>onStop Event Handler</H1> <HR> <P>Click the browser’s Stop button (in IE) to stop the script counter.</P> <FORM> <P><INPUT TYPE=”text” NAME=”display”></P> <INPUT TYPE=”button” VALUE=”Start Counter” onClick=”startCounter()”> <INPUT TYPE=”button” VALUE=”Halt Counter” onClick=”haltCounter()”> </FORM> </BODY> </HTML> document.onStop CD-390 Part VI ✦ Appendixes BODY Element Object Properties aLink bgColor link text vLink NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓✓ Example You can modify Listing 18-1 for use with IE4+ and NN6+ only by using the new prop- erty names instead. Replace all references to the document properties with their document.body equivalents. For example, the function would be reworked as the following (changes in boldface): function showColorValues() { var result = “” result += “bgColor: “ + newWindow.document.body.bgColor + “\n” result += “vLink: “ + newWindow.document.body.vLink + “\n” result += “link: “ + newWindow.document.body.link + “\n” document.forms[0].results.value = result } background NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓✓ document.body.background CD-391 Appendix F ✦ Examples from Parts III and IV Example If you have a background image file named images/logoBG.gif, a script can set the background via the following statement: document.body.background = “images/logoBG.gif” To clear the background image: document.body.background = “” If a background color has been previously set, the color becomes visible after the image disappears. bgColor See aLink. bgProperties NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ Example Both of the following statements change the default behavior of background image scrolling in IE4+: document.body.bgProperties = “fixed” or document.body.style.backgroundAttachment = “fixed” The added benefit of using the style sheet version is that it also works in NN6. document.body.bgProperties . CD-382 Part VI ✦ Appendixes Example Use The Evaluator to test out the getElementsByName() method. All form ele- ments in the upper part of the page have names associated. create full-fledged, JavaScript document objects on the fly represents one of the most important powers of serverless CGI scripting (for infor- mation delivery to the user) with JavaScript. You have. ✦ Examples from Parts III and IV Listing 18-19: Scripting the Browser Stop Button <HTML> <HEAD> <TITLE>onStop Event Handler</TITLE> <SCRIPT LANGUAGE= JavaScript > var