360Part IIIDocument Objects Referencehave a document that requires considerable scrolling to get through, you may want to main- tain a static set of navigation controls visible at all times. By placing those controls be theylinks or image maps in a separate frame, you have made the controls available for immedi- ate access, regardless of the scrolled condition of the main document. Creating framesThe task of defining frames in a document remains the same whether or not you re usingJavaScript. The simplest framesetting document consists of tags that are devoted to settingup the frameset, as follows: The preceding HTML document, which the user never sees, defines the frameset for theentire browser window. Each frame must have a URL reference (specified by the srcattribute) for a document to load into that frame. For scripting purposes, assigning a nametoeach frame with the nameattribute greatly simplifies scripting frame content. The frame object modelPerhaps the key to successful frame scripting is understanding that the object model in thebrowser s memory at any given instant is determined by the HTML tags in the currentlyloaded documents. All canned object model graphics in this book, such as Figure 16-1, do notreflect the precise object model for your document or document set. For a single, frameless document, the object model starts with just one windowobject, whichcontains one document, as shown in Figure 16-1. In this simple structure, the windowobjectisthe starting point for all references to any loaded object. Because the window is alwaysthere it must be there for a document to load into a reference to any object in the docu- ment can omit a reference to the current window. In a simple two-framed frameset model (see Figure 16-2), the browser treats the container ofthe initial, framesetting document as the parent window. The only visible evidence that thedocument exists is that the framesetting document s title appears in the browser windowtitlebar. Figure 16-1:The simplest window document relationship. WindowDocument

Window andFrameObjectsAquick look at the basic document object model diagram inChapter 14 (see Figure 14-1) reveals that the windowobject isthe outermost, most global container of all document-related objectsthat you script with JavaScript. All HTML and JavaScript activitytakes place inside a window. That window may be a standardWindows, Mac, or XWindows application-style window, complete withscrollbars, toolbars, and other chrome; you can also generate win- dows that have only some of a typical window s chrome. A frame isalso a window, even though a frame doesn t have many accou- trements beyond scroll bars. The windowobject is where everythingbegins in JavaScript references to objects. IE4+, NN6+, and W3Cbrowsers treat the frameset as a special kind of windowobject, sothat it is also covered in this chapter. Of all the objects associated with browser scripting, the windowandwindow-related objects have by far the most object-specific terminol- ogy associated with them. This necessitates a rather long chapter tokeep the discussion in one place. Use the running footers as a naviga- tional aid through this substantial collection of information. Window TerminologyThe windowobject is often a source of confusion when you firstlearnabout the document object model. A number of synonyms forwindowobjects muck up the works: top, self, parent, and frame. Aggravating the situation is that these terms are also properties of awindowobject. Under some conditions, a window is its own parent, but if you define a frameset with two frames, you have only one par- ent among a total of three windowobjects. It doesn t take long beforethe whole subject can make your head hurt. If you do not use frames in your Web applications, all of theseheadaches never appear. But if frames are part of your design plan, you should get to know how frames affect the object model. FramesThe application of frames has become a religious issue among Webdesigners: some swear by them; others swear at them. I believe therecan be compelling reasons to use frames at times. For example, if you1616CHAPTER …In This ChapterScriptingcommunication amongmultiple framesCreating and managingnew windowsControlling the size, position, andappearance of thebrowser windowDetails of window, frame, frameset, andiframeobjects …

358Part IIIDocument Objects ReferenceListing 15-46(continued)

onselectstart Event Handler

This is a sample paragraph.

Related Item:onselectevent handler for a variety of objects. … elementObject.onselectstart

357Chapter 15Generic HTML Element ObjectsRelated Item:readyStateproperty. onresizeCompatibility:WinIE4+, MacIE4+, NN4+, Moz1+, Safari1+ The onresizeevent handler fires whenever an object is resized in response to a variety ofuser or scripted actions. Most elements include this event handler, provided the object hasdimensional style attributes (for example, height, width, or position) assigned to it. In IE4+ and NN6+/Moz1+, the onresizeevent does not bubble. Resizing the browser windowor frame does not cause the window s onloadevent handler to fire. ExampleIf you want to capture the user s resizing of the browser window (or frame), you can assign afunction to the onresizeevent handler either via scriptwindow.onresize = handleResize; or by an HTML attribute of the bodyelement: Related Item:window.resize()method. onresizeendonresizestartCompatibility:WinIE5.5+, MacIE-, NN-, Moz-, Safari- The onresizeendand onresizestartevent handlers fire only on a resizable object inWindows edit mode. Related Item:oncontrolselectevent handler. onselectstartCompatibility:WinIE4+, MacIE4+, NN-, Moz-, Safari- The onselectstartevent handler fires when a user begins to select content on the page. Selected content can be inline text, images, or text within an editable text field. If the userselects more than one object, the event fires in the first object affected by the selection. ExampleUse the page from Listing 15-46 to see how the onselectstartevent handler works when auser selects across multiple elements on a page. As the user begins a selection anywhere onthe page, the ID of the object receiving the event appears in the status bar. Notice that theevent doesn t fire until you actually make a selection. When no other element is under thecursor, the bodyelement fires the event. Listing 15-46: Using the onselectstart Event Handler ContinuedelementObject.onselectstart

356Part IIIDocument Objects ReferenceListing 15-45(continued)

onpropertychange Event Handler

This is a sample paragraph.

Related Items:styleproperty; setAttribute()method. onreadystatechangeCompatibility:WinIE4+, MacIE4+, NN-, Moz-, Safari- The onreadystatechangeevent handler fires whenever the ready state of an object changes. See details about these states in the discussion of the readyStateproperty earlier in thischapter (and notice the limits for IE4). The change of state does not guarantee that an objectis, in fact, ready for script statements to access its properties. Always check the readyStateproperty of the object in any script that the onreadystatechangeevent handler invokes. This event fires for objects that are capable of loading data: applet, document, frame, frameset, iframe, img, link, object, script, and XML objects. The event doesn t fire forother types of objects unless a Microsoft DHTML behavior is associated with the object. Theonreadystatechangeevent does not bubble, nor can you cancel it. elementObject.onpropertychange

355Chapter 15Generic HTML Element Objects truck round doll red ball pretty

Pat said, Oh my, the       is so      !

Reset Related Items:oncopy, oncut, onbeforepasteevent handlers. onpropertychangeCompatibility:WinIE5+, MacIE-, NN-, Moz-, Safari- The onpropertychangeevent fires in WinIE5+ whenever a script modifies an object s prop- erty. This includes changes to the properties of an object s style. Changing properties by wayof the setAttribute()method also triggers this event. A script can inspect the nature of the property change because the event.propertyNameproperty contains the name (as a string) of the property that was just changed. In the case ofa change to an object s styleobject, the event.propertyNamevalue begins with style. as in style.backgroundcolor. You can use this event handler to localize any object-specific post-processing of changes toan object s properties. Rather than include the post-processing statements inside the func- tion that makes the changes, you can make that function generalized (perhaps to modifyproperties of multiple objects). ExampleListing 15-45 shows how you can respond programmatically to an object s properties beingchanged. The page generated by the listing contains four radio buttons that alter the innerHTMLand style.colorproperties of a paragraph. The paragraph s onpropertychangeevent handlerinvokes the showChange()function, which extracts information about the event and displaysthe data in the status bar of the window. Notice how the property name includes style.whenyou modify the stylesheet property. Listing 15-45: Using the onPropertyChange Property ContinuedelementObject.onpropertychange

354Part IIIDocument Objects ReferenceAt paste time, the innerHTMLproperty of the target spanis set to the text data stored in theclipboard. The event.returnValueproperty is set to falsehere, as well, to prevent normalsystem pasting from interfering with the controlled version. Listing 15-44: Using onbeforepaste and onpaste Event Handlers

onbeforepaste and onpaste Event Handlers

Your goal is to copy and paste one noun and one adjective from thefollowing table into the blanks of the sentence. Select a word fromthe table and copy it to the clipboard. Select one or more spaces ofthe blanks in the sentence and choose Paste to replace the blank withthe clipboard contents.

Posted in Tomcat | No Comments »