JavaScript Bible, Gold Edition part 65 pptx

TITLE Element Object For HTML element properties, methods, and event handlers, see Chapter 15.. Properties Methods Event Handlers text Syntax Accessing TITLE element object properties or

Even so, these properties are now a part of the W3C DOM specification, so they are implemented in NN6 as well

One property to take special note of is language This property name conflicts slightly with the languageproperty that is part of all HTML element objects The preferred way to specify the language of the script statements inside the element is

to set the TYPEattribute to a MIME type Unfortunately, this technique does not distinguish among versions of JavaScript Also, for backward compatibility, I advise you to continue using the LANGUAGEattribute as well because only IE4+ and NN6+ recognize the TYPEattribute

Microsoft developer documentation states that the SCRIPT element object has an onLoadevent handler If that assertion is true, then it is broken in IE4 and IE5

Properties

defer

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

The default process of loading a page that contains scripts is to wait for any immediate script execution to complete before the rest of the page loads But if you include a DEFERattribute in the tag, modern browsers continue to load the rest of the page without waiting for immediate scripts to run The deferproperty enables you to inspect or set that property; its default value is false Once a page loads, any changes you make to an existing SCRIPT element’s deferproperty has no effect

event

htmlFor

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

Modern browsers enable you to bind events to script statements when you spec-ify both a FORand EVENTattribute in the <SCRIPT>tag Statements inside the tag execute only when the object named by the FORattribute receives the event named

by the EVENTattribute You can examine the EVENTattribute by way of the SCRIPT element object’s eventproperty, and you can view the FORattribute through the

Note

SCRIPT.event

Chapter 20 ✦ HTML Directive Objects

htmlForproperty Both properties simply mimic whatever values are assigned to

their respective attributes, such as onClick()and myDIV

language

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

Use the languageproperty to get or set the name of the scripting language

specified for a SCRIPT element object Even though NN and IE browsers default to

JavaScript (or some equivalent), the property has no value unless you set the

LANGUAGEattribute in the <SCRIPT>tag If you must specify a particular version of

JavaScript, you can do so by appending the version number immediately after the

language name:

document.getElementById(“myScript”).language = “JavaScript1.5”

IE accepts several language names as values for this property: JavaScript,

JScript, VBScript, and VBS For IE5, XMLis also accepted

Also see the typeproperty

src

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

The srcproperty is a string of the URL of an external jsscript file to be linked

into a page You cannot change this property after you load the external script

text

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

The full text of a SCRIPT element is available for reading through the textproperty

While IE5 may give the impression that you can modify this property, the script that

loads with the page is what is stored in the browser’s memory Thus, the original

script statements continue to work even though the object’s property is different

SCRIPT.text

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

The TYPEattribute was added to the <SCRIPT>tag in HTML 4.0 to help resolve the conflict that the LANGUAGEattribute created for all HTML elements The value

of the attribute (and thus the typeproperty) is a MIME type string For JavaScript, that value is text/javascript

TITLE Element Object

For HTML element properties, methods, and event handlers, see Chapter 15

Properties Methods Event Handlers

text

Syntax

Accessing TITLE element object properties or methods:

(IE4+) [window.]document.all.elemID.property | method([parameters]) (IE5+/NN6) [window.]document.getElementById(“elemID”).property |

method([parameters])

About this object

Before the TITLE element was accessible to scripting as an object, the prescribed way to get to the content of the page’s <TITLE>tag was through the document titleproperty While that property is still available for backward compatibility, scripts written exclusively for newer browsers should access the textproperty

of the TITLE element object As a useful exercise, you can modify Listing 18-17 (loaded via Listing 18-16) to use the IE4+ or W3C DOM syntax to retrieve and display the document’s title

Property

text

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

TITLE.text

Chapter 20 ✦ HTML Directive Objects

The textproperty represents the text between the start and end tags of the

TITLE element object This is simply a convenience property because the text can

be referenced by other ways in IE4+ (innerTextproperty), NN6 (innerHTML), and

W3C DOM (firstChild.nodeValue) syntaxes For backward compatibility with

earlier browsers, you can alternatively use the document.titleproperty

Related Items:document.titleproperty

TITLE.text

Link and Anchor

Objects

The Web is based on the notion that the world’s

informa-tion can be strung together by way of the hyperlink —

the clickable hunk of text or image that enables an inquisitive

reader to navigate to a further explanation or related material

Of all the document objects you work with in JavaScript, the

link is the one that makes that connection Anchors also

provide guideposts to specific locations within documents

As scriptable objects going back to the first scriptable

browsers, links and anchors are comparatively simple devices

But this simplicity belies their significance in the entire scheme

of the Web Under script control, links can be far more powerful

than mere tethers to locations on the Web

In modern browsers (IE4+ and NN6), the notion of separating

links and anchors as similar yet distinctly different object

begins to fade The association of the word “link” with objects

is potentially confused by the newer browsers’ recognition

of the LINK element (see Chapter 20), which has an entirely

different purpose, as a scriptable object Taking the place of

the anchor and link objects is an HTML element object

repre-senting the element created by the <A>tag As an element

object, the A element assumes all of the properties, methods,

and event handlers that accrue to all HTML element objects

in modern object models To begin making that transition,

this chapter treats all three types of objects at once If you

develop pages that must be compatible with early scriptable

browsers, pay special attention to the comments about

proper-ties and event handler compatibility

Anchor, Link, and A Element

Objects

For HTML element properties, methods, and event handlers,

see Chapter 15

21C H A P T E R

In This Chapter

Differences between link, anchor, and A element objects

Scripting a link to invoke a script function Scripting a link to swap an image on mouse rollovers

Properties Methods Event Handlers

charset coords hash host hostname href hreflang Methods mimeType name nameProp pathname port protocol protocolLong rel

rev search shape target text type urn x y

Syntax

Accessing link object properties:

(all) [window.]document.links[index].property

Accessing A element object properties:

(IE4+) [window.]document.all.elemID.property | method([parameters]) (IE5+/NN6) [window.]document.getElementById(“elemID”).property |

method([parameters])

A

Chapter 21 ✦ Link and Anchor Objects

About this object

A little scripting history can help you to understand where the link and anchor

objects came from and how the A element object evolved from them

Using the terminology of the original object model, the anchor and link objects

are both created in the object model from the <A>tag What distinguishes a link

from an anchor is the presence of the HREFattribute in the tag Without an HREF

attribute, the element is an anchor object, which (prior to version 4 browsers) has

no properties, events, or event handlers associated with it And even in NN4, the

anchor object gains only four properties, all but one of which (name) disappear in

NN6 Table 21-1 shows the implementation schedule for backward-compatible (and

NN4-specific) properties associated with an anchor object

Table 21-1 anchor Object Backward-Compatible Properties

A link, on the other hand, is much more alive as an object — all just because of

the inclusion of an HREFattribute, which usually points to a URL to load into a

window or frame In fact, the majority of early object model properties for the link

object are the same as those of the early locationobject — properties that reveal

information about the URL assigned to the HREFattribute The other vital part of

the original link object — especially as distinct from an anchor object — is that a

link can respond to events Initially, event handlers were limited to just onClick

and onMouseOver By NN4, additional mouse events and an onDblClickevent

joined the repertoire Table 21-2 shows the properties and event handlers (there

were no methods) for backward compatibility prior to the existence of the A

ele-ment object

Table 21-2 link Object Backward-Compatible Properties

and Event Handlers

Continued

A

Table 21-2 (continued)

1 Not in NN4/Mac

When object models treat HTML elements as objects (IE4+ and NN6), both the anchor and link objects are subsumed by the A element object Even so, one impor-tant characteristic from the original object still holds true: all A element objects that behave as link objects (by virtue of the presence of an HREFattribute) are members of the document.linksproperty array Therefore, if your scripts need to inspect or modify properties of all link objects on a page, they can do so by way of

a forloop through the array of link objects This is true even if you script solely for modern browsers and want to, say, change a style attribute of all links (for example, changing their style.textDecorationproperty from noneto underline) The fact that the same element can have different behaviors depending on the existence

of one attribute makes me think of the A element object as potentially two different animals Thus, you see references to link and anchor objects throughout this book when the distinction between the two is important

Scripting newcomers are often confused about the purpose of the TARGET attri-bute of an A element when they want a scripted link to act on a different frame or window Under plain HTML, the TARGETattribute points to the frame or window into which the new document (the one assigned to the HREFattribute) is to load, leaving the current window or frame intact But if you intend to use event handlers

to navigate (by setting the location.hrefproperty), the TARGETattribute does

A

Chapter 21 ✦ Link and Anchor Objects

not apply to the scripted action Instead, assign the new URL to the location

hrefproperty of the desired frame or window For example, if one frame contains a

table of contents consisting entirely of links, the onClickevent handlers of those

links can load other pages into the mainframe by assigning the URL to the parent

main.location.hrefproperty You must also cancel the default behavior of

any link, as described in the discussion of the generic onClickevent handler in

Chapter 15

When you want a click of the link (whether the link consists of text or an image)

to initiate an action without actually navigating to another URL, you can use a

special technique — the javascript:pseudo-URL — to direct the URL to a JavaScript

function The URL javascript:functionName()is a valid parameter for the HREF

attribute (and not just in the link object) Browsers that don’t have JavaScript

enabled do not respond to clicks on such a link

If you don’t want the link to do anything other than change the statusbar in the

onMouseOverevent handler, define an empty function and set the URL to that empty

JavaScript function (such as HREF=”javascript:doNothing()”) Starting with

NN3 and IE4, you can also add a special void operator that guarantees that the called

function does not trigger any true linking action (HREF=”javascript: void

someFunction()”) Specifying an empty string for the HREFattribute yields an

FTP-like file listing for the client computer — an undesirable artifact Don’t forget,

too, that if the URL leads to a type of file that initiates a browser helper application

(for example, to play a RealAudio sound file), then the helper app or plug-in loads

and plays without changing the page in the browser window

A single link can change the content of more than one frame at once with the help

of JavaScript If you want only JavaScript-enabled browsers to act on such links, use

a javascript:pseudo-URL to invoke a function that changes the location.href

properties of multiple frames For example, consider the following function, which

changes the content of two frames:

function navFrames(url1, url2) {

parent.product.location.href = url1

parent.accessories.location.href = url2

}

You can then have a javascript:pseudo-URL invoke this multipurpose function

and pass the specifics for the link as parameters:

<A HREF=”javascript: void navFrames(‘products/gizmo344.html’,

‘access/access344.html’)”>Deluxe Super Gizmo</A>

Or if you want one link to do something for everyone, but something extra for

JavaScript-enabled browsers, you can combine the standard link behavior with an

onClickevent handler to take care of both situations:

function setAccessFrame(url) {

parent.accessories.location.href = url

}

<A HREF=”products/gizmo344.html” TARGET=”product”

onClick=”setAccessFrame(‘access/access344.html’)”>Deluxe Super Gizmo</A>

Notice here that the TARGETattribute is necessary for the standard link behavior,

while the script assigns a URL to a frame’s location.hrefproperty

A