The Form and Related Objects (Chapter 2 3 )- 123docz.net

T he subject of body text objects encompasses both HTML element objects and several abstract DOM objects that make it easier for scripts to manipulate text-oriented body content that may not be contained within its own element tag.

While the HTML element objects are easy to grasp, the abstract objects that work with stretches of visible body text have their own vocabularies and peculiarities.

Many HTML element objects in this category may become obsolete when the installed base of browsers capable of sup

porting Cascading Style Sheets reaches critical mass. CSS adherents would much rather use style sheets for font specifi

cations in place of the old-fashioned < F 0 N T > tag. But other elements in this group, such as the header elements (H I, H2, and so on), provide context for content that scripts may find useful for tasks such as creating a table of contents on the fly.

More intriguing is the concept of a text range, which is essentially an object that represents an arbitrary series of text characters within a document. A text ranges can work within an element (o r text node) or extend beyond element borders, just as if a user selected a bunch of text that includes portions of what are HTML elements behind the scenes.

Unfortunately for scripters, the vocabulary for text range manipulation is very different for the IE4+/Windows and W3C object models. Moreover, the two objects do not always share the same functionality, making it even more difficult to pro

gram cross-browser implementations using text ranges. Be alert to the compatibility ratings for each example before try

ing out a listing or step-by-step sequence.

♦ ♦ ♦ ♦

In This C ha p te r Using the N N R a n g e

and IE T e x t R a n g e

objects

W orking with text selections

Scripting search and replace actions

♦ ♦ ♦ ♦

2 6 6 JavaScript Examples Bible: The Essential Companion to JavaScript Bible

Examples Highlights

♦ Many site visitors (this author included) frown on the application of the scrolling MARQUEE element because it tends to distract visitors, rather than convey meaningful information. But if you insist on using it, Listing 19-3 demonstrates how scripts can control numerous behaviors.

♦ Listing 19-4 lets you examine how the NN6 (W3C DOM) R a n g e object treats boundary points within the node hierarchy of a document.

♦ To insert a node into an arbitrary point within another, see Listing 19-5’s appli

cation of the R a n g e . i n s e r t N o d e () method.

♦ Walk through the steps for R a n g e . sel e c t N o d e () method to see how to set a range to encompass an entire node or its contents.

♦ Run Listing 19-8 to see how NN6 (W3C DOM) provides additional facilities for manipulating text content within a node. The listing also demonstrates

t r y - c a t c h error handling.

♦ Listing 19-10 shows the IE4+/Windows T e x t R a n g e object’s way of comparing range boundaries (the IE version of Listing 19-4).

♦ The T e x t R a n g e object provides practical text search facilities, which are demonstrated in Listing 19-11. In the process, several T e x t R a n g e properties and methods get a workout, including the use of bookmarks within a range. A simple undo buffer adds to the user friendliness of the application.

FONT Element Object

Properties

col or

NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5

C om pa tib ility / / / /

Example

Listing 19-1 contains a page that demonstrates changes to the three FONT ele

ment object properties: col or, fa c e , and si ze. Along the way, you can see an eco

nomical use of the s e t A t t r i b u t e () method to do the work for all of the property changes. This page loads successfully in all browsers, but the S E L E C T lists make changes to the text only in IE4+ and NN6+.

A P element contains a nested FONT element that encompasses three words whose appearance is controlled by three select lists. Each list controls one of the

FONT.color

Chapter 5 ♦ Body Text Objects (Chapter 19) 2 6 7

Note

three F O N T object properties, and their N A M E attributes are strategically assigned the names of the properties (as you see in a moment). V A L U E attributes for OPTION elements contain strings that are to be assigned to the various properties. Each SELECT element invokes the same s e t F o n t A t t r ( ) function, passing a reference to itself so that the function can inspect details of the element.

The first task of the s e t F o n t A t t r ( ) 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 existence of d o c u m e n t .all and the m y F O N T element blocks all older browsers from changing the font characteristics. As the page loads, the

d o c u m e n t .all property is set for NN6 by using a variation of the normalization technique described in Chapter 14 of the JavaScript Bible.

For suitably equipped browsers, the function next extracts the string from the val ue property of the SELECT object that was passed to the function. If a selection is made (meaning other than the first, empty one), then the single nested statement uses the s e t A t t r i b u t e () method to assign the value to the attribute whose name matches the name of the SELECT element.

An odd bug in IE5/Mac doesn't let the rendered color change when changing the

c o l o r property. But the setting is valid, as proven by selecting any of the other tw o property choices.

Listing 19-1 : Controlling FONT Object Properties

<HTML>

<HEAD>

<TITLE>FONT Object Properties</TITLE>

// document.all normalization trick for NN6

if (navigator.appName == "Netscape" && parselnt(navigator.appVersion) >= 5) { document.all = document.getElementsByTagName("*")

)

// one function does all!

function setFontAttr(select) {

if (document.all && documert.all.myFONT) [

var choice = select.options[select.selectedIndex],value if (choice) (

document.all.myFONT.setAttribute(select.name, choice) )

) )

</SCRIPT>

</HEAD>

<B0DY>

<Hl>Font Object Properties</Hl>

<BR>

Continued

FONT.color

2 6 8 JavaScript Examples Bible: The Essential Companion to JavaScript Bible

Listing 19-1 (continued)

<P>This may look like a simple sentence, but

<F0NT ID="myFONT">THESE THREE U0RDS</F0MT>

are contained by a FONT element.</P>

<F0RM>

Select a text color:

<0PTI0NX/0PTI0N>

<0PTI0N VALUE="red">Red</OFTION>

<0PTI0N VALUE="green">Greer</OPTION>

<0PTI ON VALUE="b1ue">Blue</0PTI0N>

<0PTI0N VALUE="#FA8072">Some Hex Triplet Value</0PTI0N>

</SELECT>

<BR>

Select a font face:

<0PTI0NX/0PTI0N>

<0PTI0N VALUE="Helvetica">Felvetica</0PTI0N>

<0PTI0N VALUE="Times">Times</OPTION>

<0PTI0N VALUE="Comic Sans MS, sans-serif">Comic Sans MS, sans-serif</0PTI0N>

<0PTION VALUE="Courier, morospace">Courier, monospace</0PTI0N>

<0PTI0N VALUE="Zapf Dingbats, serif">Zapf Dingbats, serif</OPTION>

</SELECT>

<BR>

Select a font size:

<0PTI0NX/0PTI0N>

<0PTI0N VALUE="3">3 (Default)</0PTI0N>

<0PTI0N VALUE="+1B>Increase Default by 1</0PTI0N>

<0PTI ON VALUE="-I”)Decrease Default by 1</0PTI0N>

<0PTION VALUE=”1">Sma11est</0PTI0N>

<0PTI0N VALUE="7">Biggest</0PTI0N>

</SELECT>

</B0DY>

</HTML>

face

NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5

C om patibility / / / /

FONT.face

Chapter 5 ♦ Body Text Objects (Chapter 19) 2 6 9

Example

See Listing 19-1 for an example of values that can be used to set the f a c e prop

erty 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; this all depends on the fonts that are installed on your PC.

si ze

NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5

C om pa tib ility / / / /

Example

See Listing 19-1 for an example of values that can be used to set the s i z e prop

erty of a FONT element object. Notice that incrementing or decrementing the si z e

property is applied only to the size assigned to the SIZE attribute of the element (o r the default, if none is specified) and not the current setting adjusted by script.

HR Element Object

Properties

al i gn

NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 1E4 IE5 IE5.5

C om pa tib ility / / / /

Example

Listing 19-2 contains a page that demonstrates the changes to the five HR ele

ment object properties: al i gn, col or, n o S h a d e , si ze, and wi dth. Along the way, you can see an economical use of the s e t A t t r i b u t e ( ) method to do the work for all of the property changes. This page loads successfully in all browsers, but the SELECT lists make changes to the text only in IE4+ and NN6+ (because they treat the element as an object).

An HR element (whose ID is m y HR) is displayed with the browser default settings (100% width, centered, and its “magic” color). Each list controls one of the five HR object properties, and their N A M E attributes are strategically assigned the names of the properties (as you see in a moment). VALUE attributes for OPTION elements con

tain strings that are to be assigned to the various properties. Each SELECT element

HR.align

2 7 0 JavaScript Examples Bible: The Essential Companion to JavaScript Bible

invokes the same s c t H R A t t r ( ) function, passing a reference to itself so that the function can inspect details of the element. Figure 5-1 shows the page after several choices have modified the HR element.

3 HR O bject P ro p e rlie s M icrosoft In ternet Explorer H0E3I

F ile Edit V ie w F avorites Tools Help o

¡3 0 4

J Bnok FcuWflrd Stop Refresh Home â

Search d ạ

Favorites ■J

Histoiy Si- Mal ằ

1 ---□

H R Object Properties

H ere IS the H R element you will be controlling:

Select an alignment: I Center H ________________________

Select a rule color (IE only) | Blue Select a rule shading: r ~ Select a rule height: 10 Pixels 3 ] Select a rule width; 80% *1

100% (Delault) 80%

_____________ d

s y Done ; My C om puter

Figure 5 -1 : Modifying HR element properties

The first task of the s e t H R A t t r ( ) function is to make sure that only browsers capable of treating the HR element as an object get to the meat of the function. As the page loads, the d o c u m e n t .all property is set for N N 6 using a normalization technique described in Chapter 14 of the JavaScript Bible.

For suitably equipped browsers, the function next reads the string from the

v a l u e property of the SELECT object that is passed to the function. If a selection is made (that is, other than the first, empty one), then the single, nested statement uses the s e t A t t r i b u t e () method to assign the value to the attribute whose name matches the name of the SELECT element.

Listing 19-2: Controlling HR Object Properties

<HTML>

<HEAD>

<TITLE>HR Object Properties</TITLE>

<SCRIPT LANGUAGE-"JavaScript'^

// document.al1 normalization trick for NN6

if (navigator.appName == "Netscape" && parselnt(navigator.appVersion) >= 5) { document.all = document.getElementsByTagNameC*")

)

// one function does all!

function setHRAttr(select) { HR.align

Chapter 5 ♦ Body Text Objects (Chapter 19) 2 7 1

if (document.all && document.al1 .myHR) {

var choice = select.options[select.selectedIndex].value if (choice) I

document.all.myHR.setAttribute(select.name, choice) )

) }

</SCRIPT>

</HEAD>

<ES0DY>

<H1>HR Object Properties</Hl>

<BR>

<P>Here is the HR element you will be controlling:</P>

<F0RM>

Select an alignment:

<0PTI0NX/0PTI0N>

<0PTI0N VALUE="left">Left</OPTION>

<0PTI0N VALUE="center">Center</0PTI0N>

<0PTION VALUE=”right">Right</0PTI0N>

</SELECT>

<BR>

Select a rule color (IE only):

<0PTI0NX/0PTI0N>

<0PTI0N VALUE=”red">Red</0FTI0N>

<0PTI0N VALUE="green">Greer</OPTION>

<0PTI0N VALUE="blue">Blue</0PTI0N>

<0PTI0N VALUE="#FA8072">Some Hex Triplet Value</OPTION>

</SELECT>

<BR>

Select a rule shading:

<0PTI0NX/0PTI0N>

<0PTI0N VALUE=true>No Shading</0PTI0N>

<0PTION VALUE=false>Shading</0PTI0N>

</SELECT>

<BR>

Select a rule height:

<0PTI0NX/0PTI0N>

<0PTI0N VALUE=2>2 (Default)</0PTI0N>

<0PTI0N VALUE=4>4 Pixels</CPTI0N>

<0PTION VALUE=10>10 Pixels</0PTI0N>

</SELECT>

<BR>

Select a rule width:

<0PTI0NX/0PTI0N>

<0PTI0N VALUE="100r>1005i; (Default)</0PTI0N>

Continued

HR.align

Listing 19-2 (continued)

COPTION VALUE="80%">80%</OFTION>

<0PTI0N VALUE=300>300 Pixels </0PTI0N>

</SELECT>

</B0DY>

</HTML>

2 7 2 JavaScript Examples Bible: The Essential Companion to JavaScript Bible

col or

NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5

C om pa tib ility / / / ✓

Example

See Listing 19-2 earlier in this chapter for an example of values that can be used to set the c o l o r property of an HR element object.

noShade

NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5

C om pa tib ility / y y y

Example

See Listing 19-2 earlier in this chapter for an example of values that can be used to set the n o S h a d e property of an HR element object. Because of the buggy behav

ior associated with setting this property, adjusting the property in the example has unexpected (and usually undesirable) consequences.

si ze

NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5

C om pa tib ility / / / /

Example

See Listing 19-2 earlier in this chapter for an example of values that can be used to set the s i z e property of an HR element object.

HR.size

Chapter 5 ♦ Body Text Objects (Chapter 19)

wi dth

NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5

C om pa tib ility / / / /

Example

See Listing 19-2 earlier in this chapter for an example of values that can be used to set the wi dth property of an HR element object.

MARQUEE Element Object

Properties

behavi or

NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5

C om pa tib ility / / /

Example

Listing 19-3 contains a page that demonstrates the changes to several MARQUEE element object properties: behavi or, bgCol or, di r e c t i on, s c r o l 1 Amount, and s cr o l 1 Del ay. This page and scripts are intended only for IE4+. See the description of Listing 19-1 for details on the attribute setting script.

Listing 19-3: Controlling MARQUEE Object Properties

<HTML>

<HEAD>

<TITLE>MARQUEE Object Properties</TITLE>

// one function does all!

function setMARQUEEAttr(select) {

if (document.all && documert.al1 .myMARQUEE) (

var choice = select.options[select.selectedIndex],value if (choice) {

docume nt .a ll .m yM ARC UE E.s e t A t t r i bu te (s el ect.n a m e , choice)

) ) )

Continued

2 7 3

MARQUEE.behavior

2 7 4 JavaScript Examples Bible: The Essential Companion to JavaScript Bible

Listing 19-3 (continued)

</SCRIPT>

</HEAD>

<B0DY>

<H1>MARQUEE Object Properties</Hl>

<BR>

<HR>

<MARQUEE ID="myMARQUEE" WIDTH=400 HEIGHT=24>This is the MARQUEE element object you will be controlling.</MARQLEE>

<F0RM>

< INPUT TYPE="button" VALUE="Start Marquee"

onCl ick=”document.al1 .myMARQUEE.start()">

< INPUT TYPE="button" VALUE="Stcp Marquee"

onClick="document.al1 .myMARQUEE,stop()">

<BR>

Select a behavior:

<0PTI0NX/0PTI0N>

<0PTI0N VALUE=”alternate">Alternate</0PTI0N>

<0PTI0N VALUE="scrol1">Scrcl1</0PTI0N>

<0PTI ON VALUE="slide">Sli d€</OPT 10N>

</SELECT>

<BR>

Select a background color:

<0PTI0NX/0PTI0N>

<0PTI0N VALUE="red">Red</OFTION>

<0PTI0N VALUE="green">Greer</0PTI0N>

COPTION VALUE="blue">Blue</OPTION)

<0PT I ON VALUE="#FA8072">Some Hex Triplet Val ue</0PTI0N>

</SELECT>

<BR>

Select a scrolling direction:

<0PTI0NX/0PTI0N>

<0PTI0N VALUE="1eft">Left</0PTI0N>

<0PTI0N VALUE="right">Right</0PTI0N>

<0PTI0N VALUE="up">Up</0PTI0N>

<0PTI0N VALUE="down">0own</0PTI0N>

</SELECT>

<BR>

Select a scroll amount:

<0PTI0NX/0PTI0N>

<0PTI0N VALUE=6>6 (Default)</0PTI0N>

<0PTI0N VALUE=10>10</0PTI0N>

</SELECT>

<BR>

Select a scroll delay:

MARQUEE.behavior

Chapter 5 ♦ Body Text Objects (Chapter 19) 2 7 5

< 0 P T I 0 N X / 0 P T I 0 N >

<0PTI0N VALUE=50>Short</0PTI0N>

<0PTION VALUE=85>Normal</0FTI0N>

<0PTI0N VALUE=125>Long</0PTI0N>

</SELECT>

</B0DY>

</HTML>

bgColor

NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5

C om pa tib ility / / /

Example

See Listing 19-3 earlier in this chapter for an example of how to apply values to the bgCol or property

di recti on

NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5

C om pa tib ility / / /

Example

See Listing 19-3 earlier in this chapter for an example of how to apply values to the di r e c t i on property

scrol1 Amount scrol1 Del ay

NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5

C om pa tib ility / / /

Example

See Listing 19-3 earlier in this chapter for an example of how to apply values to the s c r o l l Amount and s c r o l 1 Cel ay properties.

M ARQUEE.scrollAmount

276 JavaScript Examples Bible: The Essential Companion to JavaScript Bible

Methods

start() stop()

NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5

C om pa tib ility / / /

Example

See Listing 19-3 earlier in this chapter for examples of both the s t a rt ( ) and

s t o p () methods, which are invoked in event handlers of separate controlling but

tons on the page. Notice, too, that when you have the behavior set to si i de, stop

ping and restarting the MARQUEE does not cause the scroll action to start from a blank region.

Range Object

Properties

col 1apsed

NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5

C om pa tib ility ✓

Example

Use The Evaluator (Chapter 13 in the JavaScript Bible ) to experiment with the

col 1 a p s e d property. Reload the page and assign a new range to the a global vari

able by typing the following statement into the top text box:

a = document.createRange()

Next, set the range to encompass a node:

a .selectNode(document.body)

Enter a . c o l l a p s e d into the top text box . The expression returns f a l s e because the end points of the range are not the same.

R an ge.collapsed

The Form and Related Objects (Chapter 2 3 )

Window and Frame Objects (Chapter 1 6 )

Location and History Objects (Chapter 1 7 )