From HTML Attributes to JavaScript Properties


Take a look at this HTML element, a text field:

 <INPUT TYPE="TEXT" NAME="text1" ID="text1" VALUE="Type here!"> 

Here, the VALUE attribute holds the original text in the text field. To give you access to items such as this text in scripts, HTML attributes became JavaScript properties. The case of these properties were changed to match the Java naming convention, which means the VALUE attribute of this text field is accessible as the value property of the text field's JavaScript object. Here's how I access that text, using the value property, in a web page when the user clicks a button:

 <HTML>      <HEAD>          <TITLE>              Accessing HTML Elements          </TITLE>          <SCRIPT LANGUAGE="JavaScript">              <!--             function getText()              {  alert("The text is " + document.form1.text1.value)  }              // -->          </SCRIPT>      </HEAD>      <BODY>          <H1>Accessing HTML Elements</H1>          <FORM NAME="form1">              <INPUT TYPE="TEXT" NAME="text1" ID="text1" VALUE="Type here!">              <INPUT TYPE="BUTTON" VALUE="Click Me!" ONCLICK="getText()">          </FORM>      </BODY>  </HTML> 

You can see the results of this code in Figure 5.1.

Figure 5.1. Using a JavaScript property.

graphics/05fig01.gif

That's how it workedHTML attributes became JavaScript properties you could access in code; the STYLE attribute became the style property, and so on. Hyphenated attributes, such as the LIST-STYLE attribute, use the Java naming convention, so LIST-STYLE becomes the listStyle property in JavaScript. (You can't use hyphens in JavaScript names .)

You can find JavaScript's core HTML properties in Table 5.2. (Not all properties are supported by all browsers, of course.) These properties are shared by nearly all HTML elements, as well as many of the big browser objects, and we're going to cover them in this chapter.

Table 5.2. JavaScript's Core HTML Properties

Properties

   

accessKey

all

attributes

begin

behaviorUrns

canHaveChildren

canHaveHTML

childNodes

children

className

clientHeight

clientLeft

clientTop

clientWidth

contentEditable

currentStyle

dataFld

dataFormatAs

dataSrc

dir

disabled

document

end

filters

firstChild

hasMedia

height

hideFocus

id

innerHTML

innerText

isContentEditable

isDisabled

isMultiLine

isTextEdit

lang

language

lastChild

length

localName

namespaceURI

nextSibling

nodeName

nodeType

nodeValue

offsetHeight

offsetLeft

offsetParent

offsetTop

offsetWidth

onOffBehavior

outerHTML

outerText

ownerDocument

parentElement

parentNode

parentTextEdit

prefix

previousSibling

readyState

recordNumber

runtimeStyle

scopeName

scrollHeight

scrollLeft

scrollTop

scrollWidth

sourceIndex

style

syncMaster

tabIndex

tagName

tagUrn

timeContainer

title

uniqueID

   

In fact, a number of HTML elements don't have any properties, methods , or events beyond the core set, and you'll find them in Table 5.3.

Table 5.3. Core HTML Elements

Properties

     

ACRONYM

ADDRESS

B

BIG

CENTER

CITE

CODE

DEL

DFN

DIV

EM

HR

HTML

I

INS

KBD

LISTING

NOBR

P

PLAINTEXT

PRE

RT

RUBY

S

SAMP

SMALL

SPAN

STRIKE

STRONG

SUB

SUP

TT

U

VAR

WBR

XMP

As you can see in Table 5.2, there are many core HTML properties, and their functionality is all over the map, covering many different aspects of programming. Because these properties are so scattered , it's best to just cover them one after the other, instead of trying to collect them into larger programming topicsno larger programming topics would work. So here it goesthe rest of this chapter is all about the core HTML properties you see in Table 5.2, one after the other, and I'll cram in as many examples as I can. Just skip any material you're not interested in now, and come back to it later when you need information on a specific core property.



Inside Javascript
Inside JavaScript
ISBN: 0735712859
EAN: 2147483647
Year: 2005
Pages: 492
Authors: Steve Holzner

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net