THÔNG TIN TÀI LIỆU
CD-542 Part VI ✦ Appendixes Example See Listing 28-4 for an example of the addReadRequest() method in action. You can also invoke it from the top text box in The Evaluator. For example, enter the fol- lowing statement to queue one request: navigator.userProfile.addReadRequest(“vCard.LastName”) To continue the process, see examples for doReadRequest() and getAttribute() later in this chapter. doReadRequest(reasonCode, identification[, domain[, path[, expiration]]]) NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ Example See Listing 28-4 for an example of the doReadRequest() method in action. If you entered the addReadRequest() example for The Evaluator earlier in this chapter, you can now bring up the permissions dialog box (if you have a user profile for your version of Windows) by entering the following statement into the top text box: navigator.userProfile.doReadRequest(1, “Just me!”) getAttribute(“attributeName”) NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ Example See Listing 28-4 for an example of the getAttribute() method in action. Also, if you followed The Evaluator examples for this object, you can now extract the desired information (provided it is in your user profile). Enter the following state- ment into the top text box: navigator.userProfile.getAttribute(“vCard.LastName”) userProfile.getAttribute() CD-543 Appendix F ✦ Examples from Parts III and IV Chapter 29 Examples The following sections contain examples from Chapter 29, “Event Objects.” NN4 event Object Properties data NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓ Example The page in Listing 29-12 contains little more than a TEXTAREA in which the URLs of dragged items are listed. To run this script without signing the scripts, turn on codebase principals, as directed in Chapter 46. To experiment with this listing, load the page and drag any desktop icons that rep- resent files, applications, or folders to the window. Select multiple items and drag them all at once. Because the onDragDrop event handler evaluates to return false , the files are not loaded into the window. If you want merely to look at the URL and allow only some to process, you would generate an if else construc- tion to return true or false to the event handler as needed. A value of return true allows the normal processing of the DragDrop event to take place after your event handler function has completed its processing. Listing 29-12: Obtaining URLs of a DragDrop Event’s data Property <HTML> <HEAD> <TITLE>Drag and Drop</TITLE> <SCRIPT LANGUAGE=”JavaScript1.2”> function handleDrag(evt) { netscape.security.PrivilegeManager.enablePrivilege(“UniversalBrowserRead”) Continued (NN4) eventObject.data CD-544 Part VI ✦ Appendixes Listing 29-12 (continued) var URLArray = evt.data netscape.security.PrivilegeManager.disablePrivilege(“UniversalBrowserRead”) if (URLArray) { document.forms[0].output.value = URLArray.join(“\n”) } else { document.forms[0].output.value = “Nothing found.” } return false } </SCRIPT> </HEAD> <BODY onDragDrop=”return handleDrag(event)”> <B>Drag a URL to this window (NN4 only).</B> <HR> <FORM> URLs:<BR> <TEXTAREA NAME=”output” COLS=70 ROWS=4></TEXTAREA><BR> <INPUT TYPE=”reset”> </FORM> </BODY> </HTML> layerX layerY pageX pageY screenX screenY NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓ Example You can see the effects of the coordinate systems and associated properties with the page in Listing 29-13. Part of the page contains a three-field readout of the layer-, page-, and screen-level properties. Two clickable objects are provided so that you can see the differences between an object not in any layer and an object residing (NN4) eventObject.layerX CD-545 Appendix F ✦ Examples from Parts III and IV within a layer. The object not confined by a layer has its layer and page coordinates the same in the event object properties. Additional readouts display the event object coordinates for resizing and moving a window. If you maximize the window under Windows, the Navigator browser’s top- left corner is actually out of sight, four pixels up and to the left. That’s why the screenX and screenY values are both -4. Listing 29-13: NN4 Event Coordinate Properties <HTML> <HEAD> <TITLE>X and Y Event Properties</TITLE> <SCRIPT LANGUAGE=”JavaScript”> function checkCoords(evt) { var form = document.forms[0] form.layerCoords.value = evt.layerX + “,” + evt.layerY form.pageCoords.value = evt.pageX + “,” + evt.pageY form.screenCoords.value = evt.screenX + “,” + evt.screenY return false } function checkSize(evt) { document.forms[0].resizeCoords.value = evt.layerX + “,” + evt.layerY } function checkLoc(evt) { document.forms[0].moveCoords.value = evt.screenX + “,” + evt.screenY } </SCRIPT> </HEAD> <BODY onResize=”checkSize(event)” onMove=”checkLoc(event)”> <H1>X and Y Event Properties (NN4)</H1> <HR> <P>Click on the button and in the layer/image to see the coordinate values for the event object.</P> <FORM NAME=”output”> <TABLE> <TR><TD COLSPAN=2>Mouse Event Coordinates:</TD></TR> <TR><TD ALIGN=”right”>layerX, layerY:</TD><TD><INPUT TYPE=”text” NAME=”layerCoords” SIZE=10></TD></TR> <TR><TD ALIGN=”right”>pageX, pageY:</TD><TD><INPUT TYPE=”text” NAME=”pageCoords” SIZE=10></TD></TR> <TR><TD ALIGN=”right”>screenX, screenY:</TD><TD><INPUT TYPE=”text” NAME=”screenCoords” SIZE=10></TD></TR> <TR><TD ALIGN=”right”><INPUT TYPE=”button” VALUE=”Click Here” onMouseDown=”checkCoords(event)”></TD></TR> <TR><TD COLSPAN=2><HR></TD></TR> <TR><TD COLSPAN=2>Window Resize Coordinates:</TD></TR> <TR><TD ALIGN=”right”>layerX, layerY:</TD><TD><INPUT TYPE=”text” Continued (NN4) eventObject.layerX CD-546 Part VI ✦ Appendixes Listing 29-13 (continued) NAME=”resizeCoords” SIZE=10></TD></TR> <TR><TD COLSPAN=2><HR></TD></TR> <TR><TD COLSPAN=2>Window Move Coordinates:</TD></TR> <TR><TD ALIGN=”right”>screenX, screenY:</TD><TD><INPUT TYPE=”text” NAME=”moveCoords” SIZE=10></TD></TR> </TABLE> </FORM> <LAYER NAME=”display” BGCOLOR=”coral” TOP=140 LEFT=300 HEIGHT=250 WIDTH=330> <A HREF=”javascript:void(0)” onClick=”return checkCoords(event)”> <IMG SRC=”nile.gif” WIDTH=320 HEIGHT=240” BORDER=0></A> </LAYER> </BODY> </HTML> IE4+ event Object Properties clientX clientY offsetX offsetY screenX screenY x y NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ (IE) event.clientX CD-547 Appendix F ✦ Examples from Parts III and IV Example Listing 29-14 provides readings of all event coordinate properties in an interactive way. An onMouseDown event handler triggers all event handling, and you can click the mouse anywhere on the page to see what happens. You see the tag of the ele- ment targeted by the mouse event to help you visualize how some of the coordinate properties are determined. An image is encased inside a positioned DIV element to help you see what happens to some of the properties when the event is targeted inside a positioned element. Listing 29-14: IE4+ Event Coordinate Properties <HTML> <HEAD> <TITLE>X and Y Event Properties (IE4+)</TITLE> <SCRIPT LANGUAGE=”JavaScript”> function checkCoords() { var form = document.forms[0] form.srcElemTag.value = “<” + event.srcElement.tagName + “>” form.clientCoords.value = event.clientX + “,” + event.clientY form.pageCoords.value = (event.clientX + document.body.scrollLeft) + “,” + (event.clientY + document.body.scrollTop) form.offsetCoords.value = event.offsetX + “,” + event.offsetY form.screenCoords.value = event.screenX + “,” + event.screenY form.xyCoords.value = event.x + “,” + event.y form.parElem.value = “<” + event.srcElement.offsetParent.tagName + “>” return false } function handleSize() { document.forms[0].resizeCoords.value = event.clientX + “,” + event.clientY } </SCRIPT> </HEAD> <BODY onMouseDown=”checkCoords()” onResize=”handleSize()”> <H1>X and Y Event Properties (IE4+)</H1> <HR> <P>Click on the button and in the DIV/image to see the coordinate values for the event object.</P> <FORM NAME=”output”> <TABLE> <TR><TD COLSPAN=2>IE Mouse Event Coordinates:</TD></TR> <TR><TD ALIGN=”right”>srcElement:</TD><TD><INPUT TYPE=”text” NAME=”srcElemTag” SIZE=10></TD></TR> <TR><TD ALIGN=”right”>clientX, clientY:</TD><TD><INPUT TYPE=”text” NAME=”clientCoords” SIZE=10></TD> <TD ALIGN=”right”> With scrolling:</TD><TD><INPUT TYPE=”text” NAME=”pageCoords” SIZE=10></TD></TR> Continued (IE) event.clientX CD-548 Part VI ✦ Appendixes Listing 29-14 (continued) <TR><TD ALIGN=”right”>offsetX, offsetY:</TD><TD><INPUT TYPE=”text” NAME=”offsetCoords” SIZE=10></TD></TR> <TR><TD ALIGN=”right”>screenX, screenY:</TD><TD><INPUT TYPE=”text” NAME=”screenCoords” SIZE=10></TD></TR> <TR><TD ALIGN=”right”>x, y:</TD><TD><INPUT TYPE=”text” NAME=”xyCoords” SIZE=10></TD> <TD ALIGN=”right”> Relative to:</TD><TD><INPUT TYPE=”text” NAME=”parElem” SIZE=10></TD></TR> <TR><TD ALIGN=”right”><INPUT TYPE=”button” VALUE=”Click Here”></TD></TR> <TR><TD COLSPAN=2><HR></TD></TR> <TR><TD COLSPAN=2>Window Resize Coordinates:</TD></TR> <TR><TD ALIGN=”right”>clientX, clientY:</TD><TD><INPUT TYPE=”text” NAME=”resizeCoords” SIZE=10></TD></TR> </TABLE> </FORM> <DIV ID=”display” STYLE=”position:relative; left:100”> <IMG SRC=”nile.gif” WIDTH=320 HEIGHT=240” BORDER=0> </DIV> </BODY> </HTML> Here are some tasks to try with the page that loads from Listing 29-14 to help you understand the relationships among the various pairs of coordinate properties: 1. Click the dot above the “i” on the “Click Here” button label. The target ele- ment is the button (INPUT) element, whose offsetParent is a table cell ele- ment. The offsetY value is very low because you are near the top of the element’s own coordinate space. The client coordinates (and x and y), how- ever, are relative to the viewable area in the window. If your browser window is maximized in Windows, the screenX and clientX values will be the same; the difference between screenY and clientY is the height of all the window chrome above the content region. With the window not scrolled at all, the client coordinates are the same with and without scrolling taken into account. 2. Jot down the various coordinate values and then scroll the page down slightly (clicking the scrollbar fires an event) and click the dot on the button again. The clientY value shrinks because the page has moved upward relative to the viewable area, making the measure between the top of the area smaller with respect to the button. The Windows version does the right thing with the offset properties, by continuing to return values relative to the element’s own coordinate space; the Mac, unfortunately, subtracts the scrolled amount from the offset properties. (IE) event.clientX CD-549 Appendix F ✦ Examples from Parts III and IV 3. Click the large image. The client properties perform as expected for both Windows and Mac, as do the screen properties. For Windows, the x and y properties correctly return the event coordinates relative to the IMG ele- ment’s offsetParent, which is the DIV element that surrounds it. Note, how- ever, that the browser “sees” the DIV as starting 10 pixels to the left of the image. In IE5.5/Windows, you can click within those ten transparent pixels to the left of the image to click the DIV element. This padding is inserted auto- matically and impacts the coordinates of the x and y properties. A more reli- able measure of the event inside the image is the offset properties. The same is true in the Macintosh version, as long as the page isn’t scrolled, in which case the scroll, just as in Step 2, affects the values above. 4. Click the top HR element under the heading. It may take a couple of tries to actually hit the element (you’ve made it when the HR element shows up in the srcElement box). This is to reinforce the way the client properties provide coordinates within the element itself (again, accept on the Mac when the page is scrolled). Clicking at the very left end of the rule, you eventually find the 0,0 coordinate. Finally, if you are a Windows user, here are two examples to try to see some of the unexpected behavior of coordinate properties. 1. With the page not scrolled, click anywhere along the right side of the page, away from any text so that the BODY element is srcElement. Because the BODY element theoretically fills the entire content region of the browser win- dow, all coordinate pairs except for the screen coordinates should be the same. But offset properties are two pixels less than all the others. By and large, this difference won’t matter in your scripts, but you should be aware of this potential discrepancy if precise positioning is important. For inexplicable reasons, the offset properties are measured in a space that is inset two pixels from the left and top of the window. This is not the case in the Macintosh ver- sion, where all value pairs are the same from the BODY perspective. 2. Click the text of the H1 or P elements (just above and below the long horizon- tal rule at the top of the page). In theory, the offset properties should be rela- tive to the rectangles occupied by these elements (they’re block elements, after all). But instead, they’re measured in the same space as the client prop- erties (plus the two pixels). This unexpected behavior doesn’t have anything to do with the cursor being a text cursor, because if you click inside any of the text box elements, their offset properties are properly relative to their own rectangles. This problem does not afflict the Macintosh version. You can see further examples of key event coordinate properties in action in Chapter 31’s example of dragging elements around the page. (IE) event.clientX CD-550 Part VI ✦ Appendixes fromElement toElement NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ Example Listing 29-15 provides an example of how the fromElement and toElement proper- ties can reveal the life of the cursor action before and after it rolls into an element. When you roll the cursor to the center box (a table cell), its onMouseOver event handler displays the text from the table cell from which the cursor arrived. If the cursor comes in from one of the corners (not easy to do), a different message is displayed. Listing 29-15: Using the toElement and fromElement Properties <HTML> <HEAD> <TITLE>fromElement and toElement Properties</TITLE> <STYLE TYPE=”text/CSS”> .direction {background-color:#00FFFF; width:100; height:50; text-align:center} #main {background-color:#FF6666; text-align:center} </STYLE> <SCRIPT LANGUAGE=”JavaScript”> function showArrival() { var direction = (event.fromElement.innerText) ? event.fromElement.innerText : “parts unknown” status = “Arrived from: “ + direction } function showDeparture() { var direction = (event.toElement.innerText) ? event.toElement.innerText : “parts unknown” status = “Departed to: “ + direction } </SCRIPT> </HEAD> <BODY> <H1>fromElement and toElement Properties</H1> <HR> <P>Roll the mouse to the center box and look for arrival information (IE) event.fromElement CD-551 Appendix F ✦ Examples from Parts III and IV in the status bar. Roll the mouse away from the center box and look for departure information in the status bar.</P> <TABLE CELLSPACING=0 CELLPADDING=5> <TR><TD></TD><TD CLASS=”direction”>North</TD><TD></TD></TR> <TR><TD CLASS=”direction”>West</TD> <TD ID=”main” onMouseOver=”showArrival()” onMouseOut=”showDeparture()”>Roll</TD> <TD CLASS=”direction”>East</TD></TR> <TR><TD></TD><TD CLASS=”direction”>South</TD><TD></TD></TR> </TABLE> </BODY> </HTML> This is a good example to experiment with in the browser, because it also reveals a potential limitation. The element registered as the toElement or fromElement must fire a mouse event to register itself with the browser. If not, the next element in the sequence that registers itself is the one acknowledged by these properties. For example, if you roll the mouse into the center box and then extremely quickly roll the cursor to the bottom of the page, you may bypass the South box entirely. The text that appears in the statusbar is actually the inner text of the BODY ele- ment, which is the element that caught the first mouse event to register itself as the toElement for the center table cell. keyCode NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ Example Listing 29-16 provides an additional play area to view the keyCode property for all three keyboard events while you type into a TEXTAREA. You can use this page later as an authoring tool to grab the precise codes for keyboard keys you may not be familiar with. Listing 29-16: Displaying keyCode Property Values <HTML> <HEAD> <TITLE>keyCode Property</TITLE> Continued (IE) event.keyCode . LANGUAGE= JavaScript > function showArrival() { var direction = (event.fromElement.innerText) ? event.fromElement.innerText : “parts unknown” status = “Arrived from: “ + direction } function showDeparture(). Drop</TITLE> <SCRIPT LANGUAGE= JavaScript1 .2”> function handleDrag(evt) { netscape.security.PrivilegeManager.enablePrivilege(“UniversalBrowserRead”) Continued (NN4) eventObject.data CD-544 Part VI ✦ Appendixes Listing. showDeparture() { var direction = (event.toElement.innerText) ? event.toElement.innerText : “parts unknown” status = “Departed to: “ + direction } </SCRIPT> </HEAD> <BODY> <H1>fromElement
Ngày đăng: 06/07/2014, 06:20
Xem thêm: JavaScript Bible, Gold Edition part 206 docx