JavaScript Bible 5th Edition 2004 phần 7 pot

1021 Chapter 34 ✦ Global Functions and Statements Method Description Items() Returns VBArray of values in dictionary Keys() Returns VBArray of keys in dictionary Remove(“key”) Removes key and its value RemoveAll() Removes all entries Enumerator An Enumerator object provides JavaScript with access to collections that otherwise do not allow direct access to their items via index number or name. This object isn’t necessary when working with DOM collections, such as document.all, because you can use the item() method to obtain a reference to any member of the collection. But if you are script- ing ActiveX objects, some of these objects’ methods or properties may return collections that cannot be accessed through this mechanism or the JavaScript for-in property inspec- tion technique. Instead, you must wrap the collection inside an Enumerator object. To wrap a collection in an Enumerator, invoke the constructor for the object, passing the col- lection as the parameter: var myEnum = new Enumerator(someCollection); This enumerator instance must be accessed via one of its four methods to position a “pointer” to a particular item and then extract a copy of that item. In other words, you don’t access a member directly (that is, by diving into the collection with an item number to retrieve). Instead, you move the pointer to the desired position and then read the item value. As you can see from the list of methods in Table 34-3, this object is truly intended for looping through the collection. Pointer control is limited to positioning it at the start of the collection and incrementing its position along the collection by one: myEnum.moveFirst(); for (; !myEnum.atEnd(); myEnum.moveNext()) { val = myEnum.item(); // more statements that work on value } Table 34-3: Enumerator Object Methods Method Description atEnd() Returns true if pointer is at end of collection item() Returns value at current pointer position moveFirst() Moves pointer to first position in collection moveNext() Moves pointer to next position in collection VBArray The VBArray object provides JavaScript access to Visual Basic safe arrays. Such an array is read-only and is commonly returned by ActiveX objects. Such arrays can be composed in VBArray 1022 Part IV ✦ JavaScript Core Language Reference VBScript sections of client-side scripts. Visual Basic arrays by their very nature can have mul- tiple dimensions. For example, the following code creates a three-by-two VB array: <script type=”text/vbscript”> Dim myArray(2, 1) myArray(0, 0) = “A” myArray(0, 1) = “a” myArray(1, 0) = “B” myArray(1, 1) = “b” myArray(2, 1) = “C” myArray(2, 2) = “c” </script> Once you have a valid VB array, you can convert it to an object that the JScript interpreter can’t choke on: <script type=”text/javascript”> var theVBArray = new VBArray(myArray); </script> Global variables from one script language block can be accessed by another block, even in a different language. But at this point, the array is not in the form of a JavaScript array yet. You can either convert it to such via the VBArray.toArray() method or access information about the VBArray object through its other methods (described briefly in Table 34-4). Once you convert a VBArray to a JavaScript array, you can then iterate through the values just like any JavaScript array. Table 34-4: VBArray Object Methods Method Description dimensions() Returns number of dimensions of the original array getItem(dim1[, dim2[, dimN]]) Returns value at array location defined by dimension addresses ibound(dim) Returns lowest index value for a given dimension toArray() Returns JavaScript array version of VBArray ubound(dim) Returns highest index value for a given dimension When you use the toArray() method and the source array has multiple dimensions, values from dimensions after the first “row” are simply appended to the JavaScript array with no nesting structure. ✦✦✦ VBArray Body Text Objects A large number of HTML elements fall into a catchall category of elements whose purposes are slightly more targeted than contex- tual elements covered in Chapter 15. In this group are some very widely used elements, such as the h1 through h6 header elements, plus several elements that are not yet widely used because their full sup- port may be lacking in even some of the most modern browsers. In this chapter, you find all sorts of text-related objects, excluding those objects that act as form controls (text boxes and such, which are cov- ered in Chapter 23). For the most part, properties, methods, and event handlers of this chapter’s objects are the generic ones covered in Chapter 15. Only those items that are unique to each object are cov- ered in this chapter (as will be the case in all succeeding chapters). Beyond the HTML element objects covered in this chapter, you also meet the TextRange object, first introduced in IE4, and the corre- sponding Range object from the W3C DOM. This object is a very pow- erful one for scripters because it allows scripts to work very closely with body content — not in terms of, for example, the innerText or nodeValue properties of elements, but rather in terms of the text as it appears on the page in what users see as paragraphs, lists, and the like. The TextRange and Range objects essentially give your scripts cursor control over running body text for functions, such as cutting, copying, pasting, and applications that extend from those basic opera- tions — search and replace, for instance. Bear in mind that everything you read in this chapter requires at minimum the dynamic object mod- els of IE4+ and NN6+/W3C; some items require IE5+. Unfortunately, the IE TextRange object is not implemented in MacIE5. blockquote and q Element Objects Compatibility: WinIE4+, MacIE4+, NN6+, Moz1+, Safari1+ For HTML element properties, methods, and event handlers, see Chapter 15. Properties Methods Event Handlers cite 35 35 CHAPTER ✦✦✦✦ In This Chapter Objects that display running body text in documents Using the NN/Mozilla Range and IE TextRange objects Scripting search-and- replace actions ✦✦✦✦ 1024 Part IV ✦ JavaScript Core Language Reference Syntax Accessing blockquote or q element object properties or methods: (IE4+) [window.]document.all.elemID.property | method([parameters]) (IE5+/W3C) [window.]document.getElementById(“elemID”).property | method([parameters]) About these objects The blockquote element is a special-purpose text container. Browsers typically start the con- tent on its own line in the body and indent on both the left and right margins approximately 40 pixels. An inline quotation can be encased inside a q element, which does not force the quoted material to start on the next line. From an object point of view, the only property that distinguishes these two objects from any other kind of contextual container is the cite property, which comes from the HTML 4.0 cite attribute. This attribute simply provides a URL reference for the citation and does not act as an src or href attribute to load an external document. Property cite Value: String. Read/Write Compatibility: WinIE6, MacIE5+, NN6+, Moz1+, Safari1+ The cite property can contain a URL (as a string) that points to the source of the quotation in the blockquote or q element. Future browsers may provide some automatic user interface link to the source document, but none of the browsers that support the cite property do anything special with this information. br Element Object Compatibility: WinIE4+, MacIE4+, NN6+, Moz1+, Safari1+ For HTML element properties, methods, and event handlers, see Chapter 15. Properties Methods Event Handlers clear Syntax Accessing br element object properties or methods: (IE4+) [window.]document.all.elemID.property | method([parameters]) (IE5+/W3C) [window.]document.getElementById(“elemID”).property | method([parameters]) blockquote 1025 Chapter 35 ✦ Body Text Objects About this object The br element forces a carriage return and line feed for rendered content on the page. This element does not provide the same kind of vertical spacing that goes between paragraphs in a series of p elements. Only one attribute (clear) distinguishes this element from generic HTML elements and objects. Property clear Value: String. Read/Write Compatibility: WinIE4+, MacIE4+, NN6+, Moz1+, Safari1+ The clear property defines how any text in an element following the br element wraps around a floating element (for example, an image set to float along the right margin). While recent browsers expose this property, the attribute on which it is based is deprecated in the HTML 4.0 specification in an effort to encourage the use of the clear stylesheet attribute for a br element. Values for the clear property can be one of the following strings: all, left, or right. Related Items: clear stylesheet property. font Element Object Compatibility: WinIE4+, MacIE4+, NN6+, Moz1+, Safari1+ For HTML element properties, methods, and event handlers, see Chapter 15. Properties Methods Event Handlers color face size Syntax Accessing font element object properties or methods: (IE4+) [window.]document.all.elemID.property | method([parameters]) (IE5+/W3C) [window.]document.getElementById(“elemID”).property | method([parameters]) About this object In a juxtaposition of standards implementations, the font element is exposed as an object only in browsers that also support Cascading Style Sheets as the preferred way to control font faces, colors, and sizes. This doesn’t mean that you shouldn’t use font elements in your page with modern browsers— using this element may be necessary for a single page that font 1026 Part IV ✦ JavaScript Core Language Reference needs to be backward compatible with older browsers. But it does present a quandary for scripters who want to use scripts to modify font characteristics of body text after the page has loaded. A good rule of thumb to follow is to use the font element (and script the font- HTML element object’s properties) when the page must work in all browsers; use stylesheets (and their scriptable properties) on pages that will be running exclusively in IE4+ and NN6+/W3C. Properties color Value: String. Read/Write Compatibility: WinIE4+, MacIE4+, NN6+, Moz1+, Safari1+ A font object’s text color can be controlled via the color property. Values can be either hex- adecimal triplets (for example, # FFCCFF) or the plain-language color names recognized by most browsers. In either case, the values are case-insensitive strings. Example Listing 35-1 contains a page that demonstrates changes to the three font element object properties: color, face, and size. Along the way, you can see an economical use of the setAttribute() method to do the work for all of the property changes. This page loads suc- cessfully in all browsers, but the select lists make changes to the text only in IE4+ and NN6+/W3C. A p element contains a nested font element that encompasses three words whose appear- ance is controlled by three select lists. Each list controls one of the three font object prop- erties, and their name attributes are strategically assigned the names of the properties (as you see in a moment). value attributes for option elements contain strings that are to be assigned to the various properties. Each select element invokes the same setFontAttr() function, passing a reference to itself so that the function can inspect details of the element. The first task of the setFontAttr() function is to make sure that only browsers capable of treating the font element as an object get to the meat of the function. The test for the exis- tence of document.all and the myFONT element blocks all older browsers from changing the font characteristics. For suitably equipped browsers, the function next extracts the string from the value property of the select object that was passed to the function. If a selection is made (meaning other than the first, empty one), the single nested statement uses the setAttribute() method to assign the value to the attribute whose name matches the name of the select element. An odd bug in MacIE5 doesn’t let the rendered color change when changing the color property. But the setting is valid, as proven by selecting any of the other two property choices. Listing 35-1: Dynamically Changing Font Properties <html> <head> <title>Font Object Properties</title> <script type=”text/javascript”> // one function does all! Note font 1027 Chapter 35 ✦ Body Text Objects function setFontAttr(select) { var choice = select.options[select.selectedIndex].value; if (choice) { document.getElementById(“myFONT”).setAttribute(select.name, choice); } } </script> </head> <body> <h1>Font Object Properties</h1> <br /> <p>This may look like a simple sentence, but <font id=”myFONT”>THESE THREE WORDS</font> are contained by a FONT element.</p> <form> Select a text color: <select name=”color” onchange=”setFontAttr(this)”> <option></option> <option value=”red”>Red</option> <option value=”green”>Green</option> <option value=”blue”>Blue</option> <option value=”#FA8072”>Some Hex Triplet Value</option> </select><br /> Select a font face: <select name=”face” onchange=”setFontAttr(this)”> <option></option> <option value=”Helvetica”>Helvetica</option> <option value=”Times”>Times</option> <option value=”Comic Sans MS, sans-serif”>Comic Sans MS, sans-serif</option> <option value=”Courier, monospace”>Courier, monospace</option> <option value=”Zapf Dingbats, serif”>Zapf Dingbats, serif</option> </select><br /> Select a font size: <select name=”size” onchange=”setFontAttr(this)”> <option></option> <option value=”3”>3 (Default)</option> <option value=”+1”>Increase Default by 1</option> <option value=”-1”>Decrease Default by 1</option> <option value=”1”>Smallest</option> <option value=”7”>Biggest</option> </select> </form> </body> </html> Related Items: color stylesheet attribute. face Value: String. Read/Write Compatibility: WinIE4+, MacIE4+, NN6+, Moz1+, Safari1+ A font object’s font face is controllable via the face property. Just as the face attribute (and the corresponding font-family stylesheet attribute), you can specify one or more font names in a comma-delimited string. Browsers start with the leftmost font face and look for a match in the client computer’s system. The first matching font face that is found in the client system is applied to the text surrounded by the font element. You should list the most specific fonts first, font.face 1028 Part IV ✦ JavaScript Core Language Reference and generally allow the generic font faces (sans-serif, serif, and monospace) to come last; that way you exert at least some control over the look of the font on systems that don’t have your pretty fonts. If you know that Windows displays a certain font you like and the Macintosh has something that corresponds to that font but with a different name, you can specify both names in the same property value. The browser skips over font face names not currently installed on the client. Example See Listing 35-1 for an example of values that can be used to set the face property of a font element object. While you will notice visible changes to most choices on the page, the font face selections may not change from one choice to another, since that all depends on the fonts that are installed on your PC. Related Items: font-family style sheet attribute. size Value: String. Read/Write Compatibility: WinIE4+, MacIE4+, NN6+, Moz1+, Safari1+ The size of text contained by a font element can be controlled via the size property. Unlike the more highly recommended font-size stylesheet attribute, the size property of the font element object (and its corresponding SIZE attribute) are restricted to the relative font size scale imposed by early HTML implementations: a numbering scale from 1 to 7. Values for the size property are strings, even though most of the time they are single numeral values. You can also specify a size relative to the default value by including a plus or minus sign before the number. For example, if the default font size (as set by the browser’s user preferences) is 3, you can bump up the size of a text segment by encasing it inside a font element and then setting its size property to “+2”. For more accurate font sizing using units, such as pixels or points, use the font-size stylesheet attribute. Example See Listing 35-1 for an example of values that can be used to set the size property of a font element object. Notice that incrementing or decrementing the size property is applied only to the size assigned to the size attribute of the element (or the default, if none is specified) and not the current setting adjusted by script. Related Items: font-size style sheet attribute. h1 h6 Element Objects Compatibility: WinIE4+, MacIE4+, NN6+, Moz1+, Safari1+ For HTML element properties, methods, and event handlers, see Chapter 15. Properties Methods Event Handlers align font.face 1029 Chapter 35 ✦ Body Text Objects Syntax Accessing h1 through h6 element object properties or methods: (IE4+) [window.]document.all.elemID.property | method([parameters]) (IE5+/W3C) [window.]document.getElementById(“elemID”).property | method([parameters]) About these objects The so-called “heading” elements (denoted by h1, h2, h3, h4, h5, and h6) provide shortcuts for formatting up to six different levels of headings and subheadings. While you can simulate the appearance of these headings with p elements and stylesheets, the heading elements very often contain important contextual information about the structure of the document. With the IE5+ and NN6+/W3C powers of inspecting the node hierarchy of a document, a script can generate its own table of contents or outline of a very long document by looking for elements whose nodeName properties are in the hn family. Therefore, it is a good idea to continue using these elements for contextual purposes, even if you intend to override the default appear- ance by way of stylesheet templates. As for the scriptable aspects of these six objects, they are essentially the same as the generic contextual objects with the addition of the align property. Because each hn element is a block-level element, you can use stylesheets to set their alignment rather than the corre- sponding attribute or property. The choice is up to you. Property align Value: String. Read/Write Compatibility: WinIE4+, MacIE4+, NN6+, Moz1+, Safari1+ String values of the align property control whether the heading element is aligned with the left margin ( left), center of the page (center), or right margin (right). The corresponding align attribute is deprecated in HTML 4.0 in favor of the text-align stylesheet attribute. Related Items: text-align stylesheet attribute. hr Element Object Compatibility: WinIE4+, MacIE4+, NN6+, Moz1+, Safari1+ For HTML element properties, methods, and event handlers, see Chapter 15. Properties Methods Event Handlers align color noShade width hr [...]... properties; all “set” and “select” methods of the Range object 1045 1046 Part IV ✦ JavaScript Core Language Reference Range.cloneContents() Methods cloneContents() cloneRange() Returns: DocumentFragment node reference; Range object reference Compatibility: WinIE-, MacIE-, NN7+, Moz1+, Safari1+ The cloneContents() method (available in NN7+) takes a snapshot copy of the contents of a Range object and returns a... object properties: behavior, bgColor, direction, scrollAmount, and scrollDelay NN7+/Moz do not react to all property settings See the description of Listing 35-1 for details on the attribute setting script Listing 35-3: Controlling marquee Object Properties marquee Object Properties // one function does all! function setMARQUEEAttr(select) { var... how to apply values to the bgColor property direction Value: String Compatibility: WinIE4+, MacIE4+, NN7+, Moz1+, Safari- Read/Write The direction property lets you get or set the horizontal or vertical direction in which the scrolling text moves Four possible string values are left, right, down, up NN7/Moz observe left and right only The default value is left Example See Listing 35-3 earlier in this... direction property Related Items: behavior property of marquee object height width Value: Integer Compatibility: WinIE4+, MacIE4+, NN7+, Moz1+, Safari- Read/Write The height and width properties enable you to get or set the pixel size of the rectangle occupied by the element NN7/Moz implement width only You can adjust each property independently of the other, but like most attribute-inspired properties... both the left and right (horizontal) margins of the element; vspace governs both top and bottom (vertical) margins Margin thicknesses are independent of the height and width of the element 10 37 1038 Part IV ✦ JavaScript Core Language Reference marquee.loop loop Value: Integer Compatibility: WinIE4+, MacIE4+, NN-, Moz-, Safari- Read/Write The loop property allows you to discover the number of times... element and some of its scriptability is implemented in NN7+/Moz1+ Properties behavior Value: String Compatibility: WinIE4+, MacIE4+, NN-, Moz-, Safari- Read/Write The behavior property controls details in the way scrolled text moves within the scrolling space Values for this property are one of the following three strings: alternate, scroll, and slide NN7/Moz allows only alternate When set to alternate,... the start of rng2 by using the Range.START_TO_START value as the first parameter of the compareBoundaryPoints() method: var result = rng1.compareBoundaryPoints(Range.START_TO_START, rng2); 10 47 1048 Part IV ✦ JavaScript Core Language Reference Range.compareBoundaryPoints The value returned from the compareBoundaryPoints() method is an integer of one of three values If the positions of both points under... Part IV ✦ JavaScript Core Language Reference Range.detach resources employed by a range are not that large But it is good practice to “clean up after yourself,” especially when a script repetitively creates and manages a series of new ranges Related Items: document.createRange() method.extractContents() extractContents() Returns: DocumentFragment node reference Compatibility: WinIE-, MacIE-, NN7+, Moz1+,... setMARQUEEAttr(select) { var choice = select.options[select.selectedIndex].value; if (choice) { document.getElementById(“myMARQUEE”).setAttribute(select.name, choice); } } Continued 1035 1036 Part IV ✦ JavaScript Core Language Reference marquee.behavior Listing 35-3 (continued) marquee Object Properties This... color: Red Green Blue Some Hex Triplet Value Select a scrolling direction: Left . provides JavaScript access to Visual Basic safe arrays. Such an array is read-only and is commonly returned by ActiveX objects. Such arrays can be composed in VBArray 1022 Part IV ✦ JavaScript. (described briefly in Table 34-4). Once you convert a VBArray to a JavaScript array, you can then iterate through the values just like any JavaScript array. Table 34-4: VBArray Object Methods Method. Properties <html> <head> <title>Font Object Properties</title> <script type=”text /javascript > // one function does all! Note font 10 27 Chapter 35 ✦ Body Text Objects function setFontAttr(select) { var