JavaScript: Objects and Object Models

October 25, 2005

Slides modified from Internet & World Wide Web: How to Program. 2004 (3rd) edition. By Deitel, Deitel, and Goldberg. Published by Prentice Hall. ISBN 0-13-145091-3

Chapter 12 - JavaScript: Objects

Outline 12.1 12.2 12.3 12.4 12.4.1 12.4.2 12.4.3 12.4.4 12.4.5 12.4.6 12.5 12.6 12.7 12.8 12.9 12.10 12.11
Introduction Thinking About Objects Math Object String Object Fundamentals of Characters and Strings Methods of the String Object Character-Processing Methods Searching Methods Splitting Strings and Obtaining Substrings XHTML Markup Methods Date Object Boolean and Number Objects document Object window Object Using Cookies Final JavaScript Example Web Resources

12.1 Introduction
Use JavaScript to manipulate every element of XHTML document from a script Reference for several of JavaScripts builtin objects Demonstrates the capabilities

12.2 Thinking About Objects

Objects
Attributes Behaviors Encapsulate date and methods Property of information hiding Details hidden within the objects themselves

Key Objects in JavaScript

Key objects
http://www.w3schools.com/jsref/default.asp

Exhaustive list
http://www.devguru.com/Technologies/ecmascript/quickref/js_objects.html

String Date Math Number and Boolean

5

12.4 String Object

JavaScripts string and characterprocessing capabilities Appropriate for processing names, addresses, credit card information, etc. 12.4.1 Fundamentals of Characters and Strings
Characters
Fundamental building blocks of JavaScript programs

String

Mth d e o c a A ( in e ) hrt dx

12.4.2 Methods of the String Object

c a C d A ( in e ) hroet dx c n a ( s in ) o c t tr g

foCaCd( rmhroe v lu 1 v lu 2 ) a e, a e, idxf neO( s b tr g in e ) u s in , d x

lsIdxf atneO( s b tr g in e ) u s in , d x

D s r tio e cip n Rtun as in c n in gth c aa te a th s e if din e . I th r isn e r s tr g o ta in e h r c r t e p c ie d x f ee o c a a te a th in e , c a A r tun a e p s in . T ef s c a a te is h r c r t e d x h r t e r s n mty tr g h ir t h r c r lo a da in e 0 c te t d x . Rtun th Uic d v lu o th c aa te a th s e if din e . I th r is e r s e n o e a e f e h r c r t e p c ie d x f ee n c aa te a th in e , c a C d A r tun N N( o aNme ) o h r c r t e d x h r o e t e r s a Nt u b r . C n a n te itsa g mn toth e do th s in th t in o e th mth d o c te a s ru et e n f e tr g a v k s e e o . T es in in o in th mth disn t md ie ; in te dan w t i gis h tr g v k g is e o o o if d s a e Srn r tun d T ismth disth s m a a d gtw s in sw th sr g e re. h e o e a e s d in o tr g ith e t in c n a n tio o ea r+( .g s . o c t s )isth s m a s + o c te a n p r to e ., 1 c n a ( 2 ea es 1 s) 2. C n etsalis o Uic d v lu sin as in c n in gth c r e p n in o vr t f n o e a e to tr g o ta in e or s o d g c a a tes hr c r . S a c e f rth f s o c r e c o s b tr gs r gf o p s nin e in e r h s o e ir t c ur n e f u s in ta tin r m o itio d x th s in th t in o e th mth d T emth dr tun th s r gin e o e tr g a v k s e e o . h e o e r s e tatin d x f s b tr ginth s uc s in o ifs b tr gisn t f u d I th in e u s in e o r e tr g r 1 u s in o o n . f e dx a g mn isn t po id d th mth db gn s a c in f o in e 0inth r u e t o r v e , e e o e i s e r h g r m dx e s uc s in . o r e tr g S a c e f rth la t o c r e c o s b tr gs r gf o p s nin e a d e r h s o e s c ur n e f u s in ta tin r m o itio d x n s a c in to adth b g n go th s in th t in o e th mth d T e e r h g wr e e in in f e tr g a v k s e e o . h mth dr tun th s r gin e o s b tr ginth s uc s in o if e o e r s e ta tin d x f u s in e o r e tr g r 1 s b tr gisn t f u d I th in e ag mn isn t po id d th mth d u s in o o n. f e dx r u e t o r v e , e e o b g ss ac in f o th e do th s uc s in . e in e r h g r m e n f e o r e tr g

Fig. 12.3 String object methods.

12.4.2 Methods of the String Object

s i e sat e d ) l c ( t r, n s l t srn ) pi( t i g sbt( usr sat l n t ) t r, e gh sbtig usrn( sat e d ) t r, n tLwrae) ooeCs( tUprae) opeCs( tSrn( otig) vlef) auO( Rt r sasrn c nann t ep ri no t esrn f o i dxsat eun t i g o t i i g h ot o f h t i g r mn e t r t r u hi dxe d I t ee di dxi n ts e i i d t em h dr t r sa ho g n e n . f h n n e s o pcfe , h e o eun t srn f o t esati dxt t ee do t es uc srn . A e ai ee d t i g r mh t r n e o h n f h o r e t i g ngt v n i dxs e i i sa of e f o t ee do t esrn sat n f o a n e pcfe n f s t r mh n f h t i g t ri g r m p st o o eps t ee do t el s c aa t r( o i dc t st el s oi i n n at h n f h at hr ce s 1 n i ae h at c aa t rp st o i t esrn ) hr ce oi i n n h t i g. S l t t es uc srn i t a ar yo srn s(o e s weei ssrn pi s h o r e t i g no n r a f t i g t kn) hr t t i g ag m ts e i i st edl me (. . t ec aa t r t a i dc t t ee d r u e pcfe h ei i r ie, h hr ces ht n i ae h n n t o e c t kni t es uc srn ) f a h o e n h o r e t i g. Rt r sasrn c nann l n t c aa t r sat n f o i dxsati eun t i g o t i i g e gh hr ces t ri g r mn e t r n t es uc srn . I l n t i n ts e i i d asrn c nann c aa t r h o r e t i g f e gh s o pcfe , t i g o t i i g hr ces f o satt t ee do t es uc srn i r t r e . r mt r o h n f h o r e t i g s eund Rt r sasrn c nann t ec aa t r f o i dxsatu t b tn t eun t i g o t i i g h hr ces r mn e t r p o u o i cu i gi dxe di t es uc srn . nl dn n e n n h o r e t i g Rt r sasrn i wi halu pr ael t esaec n et dt l wr ae eun t i g n hc l p ec s et r r o vre o o ec s l t es Nnl t e c aa t r aen tc a gd et r . o -et r hr ces r o hn e . Rt r sasrn i wi hall wr ael t esaec n et dt u pr ae eun t i g n hc l o ec s et r r o vre o p ec s l t es Nnl t e c aa t r aen tc a gd et r . o -et r hr ces r o hn e . Rt r st es msrn a t es uc srn . eun h a e t i g s h o r e t i g Rt r st es msrn a t es uc srn . eun h a e t i g s h o r e t i g

Fig. 12.3 String object methods.

12.4.2 Methods of the String Object

M o s th t g e te eth d a en ra X T Lta s HM g a c o ( n m ) W s th so rce strin inanan o elem t nhr a e rap e u g ch r en (< > / > w n m as th an o n e. a < a ) ith a e e ch r am bik) ln( W s th so rce strin ina < l n > / l n > rap e u g bik<bik elem t. en fxd) ie( W s th so rce strin ina < t < t > rap e u g t>/t elem t. en ln(u ) i k rl W s th so rce strin inanan o elem t rap e u g ch r en (< > / > w u as th h p a < a ) ith rl e y erlin lo k catio . n srk( tie) W s th so rce strin ina rap e u g < t i e < s r k >elem t. srk>/tie en sb) u( W s th so rce strin ina < u > / u > rap e u g sb<sb elem t. en sp) u( W s th so rce strin ina < u > / u > rap e u g sp<sp elem t. en tig b c e os F . 1 .3 S r n o je t m th d . ig 2

12.4.3 Character Processing Methods

charAt Returns the character at specific position charCodeAt Returns Unicode value of the character at specific position fromCharCode Returns string created from series of Unicode values toLowerCase Returns lowercase version of string toUpperCase Returns uppercase version of string 10

12.4.4 Searching Methods

indexOf and lastIndexOf Search for a specified substring in a string

11

12.4.5 Splitting Strings and Obtaining Substrings

Tokenization
The process of breaking a string into tokens

Tokens
Individual words Separated by delimiters

String.split() String.substr(start[, length]) and String.substring(indexA, indexB)

12

12.4.6 XHTML Markup Methods

Anchor
<a name = top> Anchor </a>

Blink
<blink> blinking text </blink>

Fixed
<tt> monospaced text </tt>

Strike
<strike> strike out text </strike>

Subscript
_subscript

Superscript
^superscript

13

12.5 Date Object

Provides methods for date and time manipulations

14

12.5 Date Object

M th d e o D s r tio e c ip n

gtae) eDt( gtTDt( eUCae) gta( eDy) gtTDy) eUCa( gtuler) eFlYa( gtTFlYa( eUCuler) gtor( eHus) gtTHus) eUCor( gtilscns) eMlieod( gtTMlieod( eUCilScns) gtiue( eMnts) gtTMnts) eUCiue( gtot( eMnh) gtTMnh) eUCot( gteod( eScns) gtTScns) eUCeod( gtie) eTm( gtieoefst) eTmznOfe( s t a e v l) eDt( a s t T D t (v l ) eUCae a F .1 . ig 28 Mth d o th D t o je t e o s f e a e b c.

Rtun an me f o 1to3 r pe e tin th d yo th mn i lo a t eo U C r s e tiv ly e r s u br r m 1 e r s n g e a f e o th n c l im r T , e p c e .

Rtun an me f o 0( u d y to6( aud y r pe e tin th d yo th we inlo a tim o U C e r s u br r m Sn a ) St r a ) e r s n g e a f e e k cl e r T , r s e tiv ly ep c e . Rtun t ey a a af u- ig n me inlo a tim o U C r s e tiv ly e r s h e r s o r d it u b r c l e r T , ep c e . Rtun an me f o 0to2 r pe e tin h ussn em n h i lo a t eo U C r s e tivly e r s u br r m 3 e r s n g o r i c id ig t n c l im r T , e p c e . Rtun an me f o 0to9 9r pe e tin th n me o m e o d i l c l tim o U C r s e tiv ly e r s u br r m 9 e r s n g e u b r f illis c n s n o a e r T , ep c e . T etim iss r dinh us m ue , s c n sa dm e o d . h e toe o r , in t s e o d n illis c n s Rtun an me f o 0to5 r pe e tin th m u sf rt etim inl c l tim o U C r s e tiv ly e r s u br r m 9 e r s n g e in te o h e oa e r T , ep c e . Rtun an me f o 0( a u r )to1 ( e e b r r pe e tin th mn i l c l tim o U C e r s u b r r m J n ay 1 Dc me) e r s n g e o th n o a e r T, r s e tiv ly ep c e . Rtun an me f o 0to5 r pe e tin th s c n sf rt etim inl c l tim o U C r s e tiv ly e r s u br r m 9 er sn g e eod o h e oa e r T , ep c e . Rtun t en me o m e o d b twe J n ay1 1 7 a dt etim inth D t o je t. e r s h u b r f illis c n s e e n a u r , 9 0 n h e e ae b c Rtun t ed f r n ei m u sb twe th c r e t tim o t el c l c mu ra dU C pe io s e r s h if ee c n in te e e n e ur n e n h o a o p te n T v u ly r k o na Ge n ic Ma T e( M) n w s r e w h e n im G T. S tsth d yo th mn ( to3 )inl c l tim o U C r s e tiv ly e e a f e o th 1 1 oa e r T , ep c e .

15

12.5 Date Object

M od eth D cription es

stuler y m d) eFlYa( , , stTFlYa(y m d) eUCuler , ,

S ts th y a in lo a tim o U C re e tiv ly T e sec n a d th e e er c l e r T , sp c e . h o d n ird a u e ts re re n gth m n a d th d te a o tio a If a o tio a rg m n p se tin e o th n e a re p n l. n p n l a u e t is n t sp c d th c rre t v lu inth D t o je t is u d rg m n o e ifie , e u n a e e ae b c se .

S ts th h u inlo a tim o U C re e tiv ly T e sec n , th a d fo rth e e or c l e r T , sp c e . h o d ird n u s t o r ( h m s, m ) eHus , , s e n in illise s t T H u s h m s, m ) argum ntslrergum nt isthe mecified, thends andmlue inthes areeobject is eUCor( , , s anoptiona apreseeting not sp utes, seco current va condD toptional. If a u d se .

stilScns m ) eMlieod( s stTMlieod(m ) eUCilscns s s t i u e ( m s, m ) eMnts , s s t T M n t s m s, m ) eUCiue( , s stot(m d) eMnh , stTMnh m d) eUCot( , s t e o d ( s, m ) eScns s s t T S c n s s, m ) eUCeod( s

S ts th n m e o m e e u b r f illise o d in lo a tim o U C re e tiv ly cns c l e r T , sp c e . S ts th m u inlo a tim o U C re e tiv ly T e se o d a dth e e in te c l e r T , sp c e . h c n n ird a u e ts re re n gth se o d a dm rg m n p se tin e c n s n illise o d a o tio a If a c n s re p n l. n o tio a a u e t is n t sp c d th c rre t v lu inth D t o je t is p n l rg m n o e ifie , e u n a e e ae b c u d se . S ts th m n in lo a tim o U C re e tiv ly T e se o d a u e t e e o th c l e r T , sp c e . h c n rg m n re re n gth d te is o tio a If th o tio a a u e t is n t sp c d th p se tin e a p n l. e p n l rg m n o e ifie , e c rre t d te v lu in th D t o je t is u d u n a a e e ae b c se . S ts th se o d inlo a tim o U C re e tiv ly T e se o d a u e t e e cn c l e r T , sp c e . h c n rg m n re re n gth m p se tin e illise o d is o tio a If th a u e t is n t sp c d th c n s p n l. is rg m n o e ifie , e c rre t m u n illise o d v lu in th D t o je t is u d cn a e e ae b c se .

F . 1 .8 ig 2

M th d o th D t o je t. e os f e ae b c

16

12.5 Date Object

Mt o eh d Dsr to eci i n p

stie m ) eTm( s tLclSrn( ooaetig)

St t e i e ae o isagm t t e u broe pe mi eod e h tmbsd nt r u e nm f l sd ilscns s n h e a l sne aur 117. i c Jnay , 90 Ru sa t i g er sn to ot e a adi e n f r s ei i t t e e r srn r p et i n f h dt n tmi a o pcfc oh t n e a e m cm t rsl cl .Frea p ,Sp m r1,20 a 3 2 2 M o p e oa o xme et b 3 01 t : : P i u e l e e 42 s r p sn d s0/ 3 1 5 7 2nh Ut d t t sad 3 9 1 er et a 9 / 1: : i t e ne S e n 1/ / e e 10 42 i a 00 1: 7 2n u p. 5 : i Er e 42 o Ru sa t i g er sn to ot e a adi e nh f r :1 Sp e r srn r p et i n f h dt n tmi t e o t n e a e m9e 20 1: 7 2 T 01 5 : U 42 C Ru sa t i g er sn to ot e a adi e n f r s ei i t t e e r srn r p et i n f h dt n tmi a o pcfc oh t n e a e m l cl ot e o pt r( o Sp 9 5 7 2 D20 i t e ne oa f h cm e M e 1 1: : E T 01 nh Ut d e u n 42 i S t s. t e) a Te i e n u bromi eod sne i n h Jnay ,17. h tmi nm f ilscns i c m i t aur 1 90 e l dg,

tUCtig) oTSrn( tSrn( otig) vlef) auO( F .1. i 2 g 8

Mhd ot e ae b c e os f h Dt oj t t e.

17

12.3 Math Object

Allow the programmer to perform many common mathematical calculations

18

12.3 Math Object

M th d e o as x) b( Ea p x m le a s 7 )is 7 b ( .2 .2 a s 0 )is 0 b ( .0 .0 a s -5 )is 5.6 b ( .6 c i ( x ) ro n s xto th sm el ud e allest c i ( 9 )is 1 .0 e l .2 0 in er n t less th x teg o an c i (-9 )is -9 e l .8 .0 cs x) o( trig n etric co e o x c s 0 )is 1 o om sin f o ( .0 .0 (xin rad s) ian ep x) x( x e p 1 )is 2 1 2 x ( .0 .7 8 8 ex o en m od e p n tial eth e p 2 )is 7 8 0 x ( .0 .3 9 6 f o r x ) ro n s xto th larg lo( ud e est f o r 9 )is 9 l o ( .2 .0 in er n t g teg o reater th x f o r -9 )is -1 .0 an l o ( .8 0 lg x) o( n ral lo arithmof x atu g l g 2 1 2 2 )is 1 o ( .7 8 8 .0 (b e) ase l g 7 8 0 6 )is 2 o ( .3 9 5 .0 m x x y ) larg v e o xan y m x 2 ,1 .7 )is 1 .7 a( , er alu f d a ( .3 2 2 m x -2 ,-1 .7 )is -2 a ( .3 2 .3
Fig. 12.1 Math object methods.

D s rip n e c tio ab lu v e o x so te alu f

19

12.3 Math Object

m n x y ) s al rv l eo x i( , ml e au f ad y n p w x y ) xr i e t p wry o( , as d o o e (y x) r u d x ) r u d xt t e on( ons oh coe t i t g r l s s ne e sn x) i( t i o o e i sn o rg n mtrc i e f x( i r da s x n a i n) s r ( x ) s ur r o o x qt q ae o t f m n 2 , 1 .7 )i 2 i ( .3 2 s .3 m n - .3 - 2 )i - 2 i ( 2 , 1 .7 s 1 .7 p w 2 ,7 )i 1 8 o ( .0 .0 s 2 .0 p w 9 ,.5 ) 3 o ( .0 is .0 r u d 9 5)is1 o n ( .7 0 r u d 9 5 )is9 o n ( .2 s n 0 )i 0 i ( .0 s .0

s r ( 9 0 )is3 .0 q t 0 .0 0 s r ( 9 )i 3 q t .0 s .0 tn x) a( t i o o e i t n e t t n 0 )i 0 rg n mtrc a g n a ( .0 s .0 ox f ( i r da s x n a i n) ah b c e os Fg 1 .1 M t o je t mth d . i . 2

20

12.3 Math Object

Ds r t n e cipio Bs o an t r l a e f aua l g rt me. o ai h ( ) Mt.N ahL2 Nt r ll g rt m f2 aua o ai h o . Mt.N0 ahL1 Nt r ll g rt m f1 . aua o ai h o 0 Mt.O2 a h L G E Bs 2l g rt m fe a e o ai h o . M t . O 1 E Bs 1 l g rt m fe ahLG0 a e 0 o ai h o . Mt.I ahP t er t oo acr l ai f i ces h cr u f r n et i s ic m e c ot e da ee. i mt r M t . Q T _ S u r r o o 05 a h S R 1 2 q ae o t f . . Mt.QT a h S R 2 S u r r o o 20 q ae o t f . . F . 1 . P p rie o t eM t o je t i g 22 r et s f h a h b c. o Cn t n o sa t Mt. ahE Vlu ae Apo i aey27 8 p r xm l . 1 . t Apo i aey06 3 p r xm l . 9 . t Apo i aey23 2 p r xm l . 0 . t Apo i aey14 2 p r xm l . 4 . t Apo i aey04 4 p r xm l . 3 . t Apo i aey p r xm l t 31 1 9 6 3 8 7 3 . 4525599. Apo i aey07 7 p r xm l . 0 . t Apo i aey14 4 p r xm l . 1 . t

21

12.6 Boolean and Number Objects

Object wrappers for boolean true/false values and numbers

22

Dp e tn si co r i Rsei h l o Be b i e t s g e t v fe on c tn t t i e u t oajt u h nr f a h l o s r r u e e tehi, tnei e r;t rs e s s gl. u e e ut t f ow r h na r r s ve) aO lf u( Rse u ut Be b i row e t v t ih ones ut rs tn a rfe l o t t; hi, u hl r e e oa j c ee e r r fe e sl tn s u a. on t t d lo F2 i1 g1 Be b ms . . 0 oa jce . e h o

M e td h o tr( oi) Sn tg

12.6 Boolean and Number Objects

23

12.6 Boolean and Number Objects

Dp e tn si co r i Rsei h l o Be b i e t s g e t v fe on c tn t t i e u t oajt u h nr f a h l o s r r u e e tehi, tnei e r;t rs e s s gl. u e e ut t f ow r h na r r s ve) aO lf u( Rse u ut Be b i row e t v t ih ones ut rs tn a rfe l o t t; hi, u hl r e e oa j c ee e r r fe e sl tn s u a. on t t d lo F2 i1 g1 Be b ms . . 0 oa jce . e h o
Description Returns the string representation of the number. The optional radix argument (a number from 2 to 36) specifies the numbers base. valueOf() Returns the numeric value. Number.MAX_VALUE This property represents the largest value that can be stored in a JavaScript programapproximately 1.79E+308 Number.MIN_VALUE This property represents the smallest value that can be stored in a JavaScript programapproximately 2.22E308 Number.NaN This property represents not a numbera value returned from an arithmetic expression that does not result in a number (e.g., the expression parseInt( "hello" ) cannot convert the string "hello" into a number, so parseInt would return Number.NaN. To determine whether a value is NaN, test the result with function isNaN, which returns true if the value is NaN; otherwise, it returns false. Number.NEGATIVE_INFINITY This property represents a value less than -Number.MAX_VALUE. Number.POSITIVE_INFINITY This property represents a value greater than Number.MAX_VALUE. Fig. 12.11 Number object methods and properties. Method or Property toString( radix )

M e td h o tr( oi) Sn tg

24

12.7 document Object

Manipulate document that is currently visible in the browser window

25

12.7 document Object

Dsrpo eci t n i We t esrn t t eXT L ou e ta rt s h t i g o h HMdc m s i n XT L o e HMc d. wien srn ) rt l ( t i g We t esrn t t eXT L ou e ta rt s h t i g o h HMdc m s i n XT L oea d dsanwn c aat ra HMc d n a d e l e hr ce t i t ee d h n. dc mn . o ke ou e tc o i Ti poet i asrn c n i i g h vl e h r pry s t i g ot n t e aus s a n o alt ec oi ssoe o t eue c m t r f l h o k t r d n h s rs o p e e u f rt ec re tdc m t SeSci n 2 , o h ur n ou e . e eto 1. n 9 Un Coi s s g ok . i e dc mn . a to ii d ou e tl s Md f e Ti poet i t edt a d i et a t i h r pry s h ae n tm ht h s s dc m tw l s m i i d ou e a at o fe . n s d F . 1. 2 i 2 g 1 I prat dcmn oj c mhd ad r pri s m t n ouet b t e os n p e e. o e t o t Mhd rP pry eoo r e t o t wie srn ) rt ( t i g

26

12.8 window Object

Provides methods for manipulating browser window

27

1 2 3 4 5 6 7 8 9

<?xml version = "1.0" encoding = "utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <!-- Fig. 12.13: window.html <!-- Using the Window Object --> -->

<html xmlns = "http://www.w3.org/1999/xhtml"> <head>

10 <title>Using the Window Object</title> 11 <!-12 <script type = "text/javascript"> 13 14 15 16 17 18 19 20 21 22 23 24 25 function createChildWindow() { // these variables all contain either "yes" or "no" // to enable or disable a feature in the child window var toolBar // specify if toolbar will appear in child window var menuBar; // specify if menubar will appear in child window var location; // specify if address bar will appear in child window var scrollBars; // specify if scrollbars will appear in child window var status; // specify if status bar will appear in child window var resizable; // specify if the child window will be resizable

var childWindow; // variable to control the child window

window.html 1 of 7

28

26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 // determine whether the Scroll Bar checkbox is checked if ( scrollBarsCheckBox.checked ) scrollBars = "yes"; else scrollBars = "no"; // determine whether the Menu Bar checkbox is checked if ( menuBarCheckBox.checked ) menuBar = "yes"; else menuBar = "no"; // determine whether the Tool Bar checkbox is checked if ( toolBarCheckBox.checked ) toolBar = "yes"; else toolBar = "no";

// determine whether the Address Bar checkbox is checked if ( locationCheckBox.checked ) location = "yes"; else location = "no";

window.html 2 of 7

29

51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75

// determine whether the Status Bar checkbox is checked if ( statusCheckBox.checked ) status = "yes"; else status = "no"; // determine whether the Resizable checkbox is checked if ( resizableCheckBox.checked ) resizable = "yes"; else resizable = "no";

// display window with selected features

childWindow = window.open( "", "", "resizable = " + resizable + ", toolbar = " + toolBar + ", menubar = " + menuBar + ", scrollbars = " + scrollBars ); // disable buttons closeButton.disabled = false; modifyButton.disabled = false; getURLButton.disabled = false; setURLButton.disabled = false; } // end function createChildWindow ", status = " + status + ", location = " + location +

window.html 3 of 7

30

76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98

// insert text from the textbox into the child window function modifyChildWindow() { if ( childWindow.closed ) alert( "You attempted to interact with a closed window" ); else childWindow.document.write( textForChild.value ); } // end function modifyChildWindow // close the child window function closeChildWindow() { if ( childWindow.closed ) else childWindow.close(); closeButton.disabled = true; modifyButton.disabled = true; getURLButton.disabled = true; setURLButton.disabled = true; } // end function closeChildWindow

alert( "You attempted to interact with a closed window" );

window.html 4 of 7

31

99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117

// copy the URL of the child window into the parent windows myChildURL function getChildWindowURL() { if ( childWindow.closed ) alert( "You attempted to interact with a closed window" ); else myChildURL.value = childWindow.location; } // end function getChildWindowURL // set the URL of the child window to the URL // in the parent windows myChildURL function setChildWindowURL() { if ( childWindow.closed ) else childWindow.location = myChildURL.value; } // end function setChildWindowURL //-->

alert( "You attempted to interact with a closed window" );

window.html 5 of 7

118 </script> 119 120 </head> 121 122 <body> 123 <h1>Hello, This is the main window</h1>

32

124 <p>Please check the features to enable for the child window<br/> 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 <p>Please enter the text that you would like to display 145 146 147 in the child window<br/> <input id = "textForChild" type = "text" value = "<h1> Hello, I am a child window</h1> <br\>"/> <input id = "toolBarCheckBox" type = "checkbox" value = "" checked = "checked" /> <label>Tool Bar</label> <input id = "menuBarCheckBox" type = "checkbox" value = "" checked = "checked" /> <label>Menu Bar</label> <input id = "locationCheckBox" type = "checkbox" value = "" checked = "checked" /> <label>Address Bar</label><br/> <input id = "scrollBarsCheckBox" type = "checkbox" value = "" checked = "checked" /> <label>Scroll Bars</label> checked = "checked" /> <label>Status Bar</label> <input id = "resizableCheckBox" type = "checkbox" value = "" checked = "checked" /> <label>Resizable</label><br/></p>

<input id = "statusCheckBox" type = "checkbox" value = ""

window.html 6 of 7

33

18 4 19 4 10 5 11 5 12 5 13 5 14 5

< n u i =" r a e u t n t p =" u t n ipt d cetBto" ye bto" v l e =" r a e C i d W n o "o c i k = " r a e h l W n o ( "/ au Cet hl idw nlc cetCididw) > < n u i =" o i y u t n t p =" u t n v l e =" o i y C i d W n o " ipt d mdfBto" ye bto" au Mdf hl idw o c i k =" o i y h l W n o ( "d s b e =" i a l d / nlc mdfCididw) iald dsbe"> < n u i =" l s B t o "t p =" u t n v l e =" l s C i d W n o " ipt d coeutn ye bto" au Coe hl idw oc i k="l s Ci di dw ) ds be ="i al d/< p nlc coehlWno(" iald dsbe">/>

1 5 < > h o h r w n o ' U L i :< r > 5 pTe te idws R s b/ 16 5 17 5 18 5 19 5 10 6 11 6 12<bd> 6 /oy 13<hm> 6 /tl < n u i =" y h l U L t p =" e t v l e =" // ipt d mCidR" ye tx" au ."> < n u i =" e U L u t n t p =" u t n v l e =" e C i d U L ipt d stRBto" ye bto" au St hl R" o c i k =" e C i d i d w R ( "d s b e =" i a l d / nlc sthlWnoUL) iald dsbe"> < n u i =" e U L u t n t p =" u t n v l e =" e U L F o C i d ipt d gtRBto" ye bto" au Gt R rm hl" o c i k =" e C i d i d w R ( "d s b e =" i a l d / < p nlc gthlWnoUL) iald dsbe">/>

window.html 7 of 7

34

35

36

12.8 window Object

D s r tio e cip n Ce te an w in o w th U Lo th w d w e to r a s e w d w ith e R f e in o s t u l, th n m s t ton m, a dth v ib f a r ss t b r e a ee a e n e is le e tue e y th s in p s e ina o tio . e tr g a s d s p n p o p ( p o p d fa lt ) r m t r mt, e u D p y ad lo b xa k gth u e f rin u T ete t is la s ia g o s in e s r o p t. h x o th d lo isp o p a dth d f u v lu iss t to f e ia g r mt, n e e a lt a e e d fa lt. e u coe) ls( C s sth c r e t w d w n d le sitso je t f o lo e e ur n in o a d e te b c rm mmr . e oy wno.ou( idwfcs) T ismth dg e f c stoth w d w i.e p tsth h e o iv s o u e in o ( ., u e w d w th f r go n , o to o a yo e o e in o in e oe r u d n p f n th r p n bo s rw d w) r we in o s . wno.ouet idwdcmn T ispo etyc n in th d c m n o je t r pe e tin h r p r o ta s e o u e t b c e r s n g th d c mn c r e tlyin id th w d w e o u e t ur n s e e in o . wno.lsd idwcoe T ispo etyc n in ab o a v lu th t iss t totr eif h r p r o ta s o le n a e a e u th w d w c s d a df ls ifit isn t. e in o is lo e , n a e o wno.pnr idwoee T ispo etyc n in th w n o o je t o th w d w h r p r o ta s e i d w b c f e in o th t o e e th c r e t w d wifs c aw d w x ts a p n d e ur n in o , u h in o e is . F . 1 .1 ig 2 4 Imota t w n o o je t mth d a dpo etie . pr n idw b c e os n r pr s Mth do Po ety e o r r pr o e ( u l, n m, o tio s ) pn r ae p n

37

12.9 Using Cookies

Cookie
Data stored on users computer to maintain information about client during and between browser sessions Can be accessed through cookie property Set expiration date through expires property Use escape function to convert non-alphanumeric characters to hexadecimal escape sequences unescape function converts hexadecimal escape sequences back to English characters
http://www.yourhtmlsource.com/javascript/cookies.html

38

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" > <!-- Fig. 12.15: cookie.html --> <!-- Using Cookies -->

<html xmlns = "http://www.w3.org/1999/xhtml" > <head> <title>Using Cookies</title> <script type = "text/javascript"> <!--

var now = new Date(); // current date and time var name;

var hour = now.getHours(); // current hour (0-23)

cookie.html 1 of 4

if ( hour < 12 ) // determine whether it is morning document.write( "<h1>Good Morning, " ); else { hour = hour - 12; // convert from 24 hour clock to PM time

39

24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 } }

// determine whether it is afternoon or evening if ( hour < 6 ) document.write( "<h1>Good Afternoon, " ); else document.write( "<h1>Good Evening, " );

// determine whether there is a cookie if ( document.cookie ) { // convert escape characters in the cookie string to their // english notation var myCookie = unescape( document.cookie );

// split the cookie into tokens using = as delimiter var cookieTokens = myCookie.split( "=" );

cookie.html 2 of 4

// set name to the part of the cookie that follows the = sign name = cookieTokens[ 1 ]; else { // if there was no cookie then ask the user to input a name name = window.prompt( "Please enter your name", "GalAnt" );

40

49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 } }

// escape special characters in the name string // and add name to the cookie document.cookie = "name=" + escape( name );

document.writeln( name + ", welcome to JavaScript programming! </h1>" ); document.writeln( "<a href= \" JavaScript:wrongPerson() \" > " + "Click here if you are not " + name + "</a>" ); // reset the document's cookie if wrong person function wrongPerson() { // reset the cookie

document.cookie= "name=null;" +

cookie.html 3 of 4

" expires=Thu, 01-Jan-95 00:00:01 GMT"; // after removing the cookie reload the page to get a new name location.reload();

// --> </script> </head>

41

7 4 7 5 7 6

<y b> o d < l R e ( R a t u h c t a/ p i e s o e d o n e r a n> > c f h r l ) r t s p g< Ck r o i ip <d /y b> o

7< m 7/ l h> t

cookie.html 4 of 4

42

Chapter 13 - Dynamic HTML: Object Model and Collections

Outline
13.1 13.2 13.3 13.4 13.5 13.6 13.7 13.8 Introduction Object Referencing Collections all and children Dynamic Styles Dynamic Positioning Using the frames Collection navigator Object Summary of the DHTML Object Model

43

Objectives
In this lesson, you will learn:
To use the Dynamic HTML Object Model and scripting to create dynamic Web pages. To understand the Dynamic HTML object hierarchy. To use the all and children collections to enumerate all of the XHTML elements of a Web page. To use dynamic styles and dynamic positioning. To use the frames collection to access objects in a separate frame on your Web page. To use the navigator object to determine which browser is being used to access your page.

44

13.1 Introduction
Dynamic HTML Object Model
Allows Web authors to control the presentation of their pages Gives them access to all the elements on their pages

Web page
Elements, forms, frames, tables Represented in an object hierarchy

Scripting
Retrieve and modify properties and attributes

Referring to text
http://www.irt.org/script/1370.htm
45

13.8 Summary of the DHTML Object Model

window document frames history navigator plugins location event screen embeds filters forms images Key object all

document
document

anchors applets body

links
plugins scripts

collection

styleSheets

Fig. 13.10

DHTML Object Model.

46

13.2 Object Referencing

The simplest way to reference an element is by using the elements id attribute. The element is represented as an object
XHTML attributes become properties that can be manipulated by scripting

47

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<?xml version = "1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- Fig. 13.1: reference.html -->

<!-- Object Model Introduction --> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Object Model</title> <script type = "text/javascript"> <!-function start() { alert( pText.innerText ); pText.innerText = "Thanks for coming."; } // --> </script> </head>
<yl = t( b oa "r" o nd st> d o a) <d"xWotuea < p =T"le oWp! > i pt emorbg / e>c ep <d /y b> o

2 3 2 4 2 5 2 6

2< m 7/ l h> t

48

13.3 Collections all and children

Collections
Arrays of related objects on a page all
all the XHTML elements in a document

children
Specific element contains that elements child elements

49

4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 2 5 } // --> <r> /i sp ct pText.innerHTML += elements; alert( elements ); function start() { for ( var loop = 0; loop < document.all.length; ++loop ) elements += "<br />" + document.all[ loop ].tagName; <script type = "text/javascript"> <!-var elements = ""; <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>Object Model</title> <!-- Fig 13.2: all.html -->

Outline

<!-- Using the all collection -->

all.html (1 of 2)

2 6 2 7 2 8 2 9 3 0

<a /d h> e <yl =t( b oa "r" o nd st> d o a) <d"xEe ohWp:> p =T"etniea < i ptln e>ms t sbg/ ep <d /y b> o

3< m 1/ l h> t

50

13 14 15 16 17 18 19 20
2 2 21 2 3 2 4 2 5 2 6 2 7 2 8 2 9 3 0 3 1 3 2 3 3 3 4 3 5 3 6 3 7 3 8

<!vreeet ="u>; a lmns <l" fnto cid ojc ) ucin hl( bet { vrlo =0 a op ; eeet + "l> +ojc.aNm +"u>; lmns = <i" bettgae <l"
fr(lo =0 lo <ojc.hlrnlnt;lo+ ) o op ; op betcide.egh op+ { i (ojc.hlrn lo ]cide.egh) f betcide[ op .hlrnlnt cid ojc.hlrn lo ]) hl( betcide[ op ; es le eeet + "l> + lmns = <i" o j c . h l r n l o ] t g a e+ betcide[ op .aNm "/i" <l>; } eeet + "/l"+"/i" lmns = <u> <l>; } / -> / <srp> /cit <ha> /ed

Outline

<oyola ="hl(dcmn.l[4]) bd nod cid ouetal ; mDslyotrTL+ eeet; yipa.ueHM = lmns mDslyotrTL+ /l" yipa.ueHM = <u>;> <>ecm t or<togWb/tog pg!/> pWloe o u srn>e<srn> ae<p < i ="yipa" pd mDsly> Eeet o ti Wbpg: lmns n hs e ae <p />

3 9 4 0 4 1 4 2 4 3 4 4 4 5 4 6 4 7

51

13.4 Dynamic Styles

Elements style can be changed dynamically Dynamic HTML Object Model also allows you to change the class attribute

52

1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 4 5 <!-- Fig. 13.4: dynamicstyle.html --> 6 <!-- Dynamic Styles 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 } // --> </script> </head> <script type = "text/javascript"> <!-function start() { var inputColor = prompt( "Enter a color name for the " + "background of this page", "" ); document.body.style.backgroundColor = inputColor; <head> <title>Object Model</title> --> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Outline

dynami cstyle. html (1 of 2)

2 4 2 5 2 6 2 7 <yl =t( b oa "r" o nd st> d o a) <emorbt/ ple oWs!> >c tuei< Wo ep <d /y b> o

2< m 8/ l h> t

53

4 5 <!-- Fig. 13.5: dynamicstyle2.html --> 6 <!-- More Dynamic Styles 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 10 11 12 13 14 15 16 17 18 19 20 2 1 </style> .smallText { font-size: .75em } .bigText { font-size: 3em; font-weight: bold } <style type = "text/css"> <head> <title>Object Model</title> -->

Outline

<cittp ="etjvsrp" srp ye tx/aacit> <!fnto sat) ucin tr( { vriptls =pop( a nuCas rmt "ne acasaefrtetx " + Etr lsNm o h et "bgeto salet" " ) (iTx r mlTx), " ; petcasae=iptls; Tx.lsNm nuCas } / -> / <srp> /cit <ha> /ed <oyola ="tr(" bd nod sat)> < i ="Tx"Wloet orWbst!/> p d pet>ecm o u e ie<p <bd> /oy

2 2 2 3 2 4 2 5 2 6 2 7 2 8 2 9 3 0 3 1 3 2 3 3 3 4 3 5 3 6

dynami cstyle2 .html (1 of 2)

3 <hm> 7 /tl

54

13.5 Dynamic Positioning

XHTML elements can be positioned with scripting
Declare an elements CSS position property to be either absolute or relative Move the element by manipulating any of the top, left, right or bottom CSS properties

55

Outline

26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50

function run() { count += speed; if ( ( count % 200 ) == 0 ) { speed *= -1; direction = !direction; pText.style.color = ( speed < 0 ) ? "red" : "blue" ; firstLine = ( speed < 0 ) ? "Text shrinking" : "Text growing"; pText.style.fontFamily = fontStyle[ ++fontStylecount % 3 ]; } pText.style.fontSize = count / 3; pText.style.left = count; pText.innerHTML = firstLine + "<br /> Font size: " + count + "px"; } // --> </script> </head>

56

13.6 Using the frames Collection

Referencing elements and objects in different frames by using the frames collection

57

1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 4 5 <!-- Fig. 13.8: top.html --> 6 <!-- Cross-frame scripting --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml" > 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 } // --> </script> </head> <script type = "text/javascript"> <!-function start() { var text = prompt( "What is your name?", "" ); parent.frames( "lower" ).document.write( "<h1>Hello, " + text + "</h1>" ); <head> <title>The frames collection</title> "http://www.w3.org/TR/xhtml1/DTD/xhtml1 -strict.dtd">

1 <xlvrin="."> ?m eso 10?

2 <DCYEhm PBI "/WC/T XTL10Faee !OTP tl ULC -/3/DD HM . rms 3 4 5 <- Fg 1.:idxhm !- i. 37 ne.tl 7 8 < t l x l s =" t p / w w w . r / 9 9 x t l> hm mn ht:/w.3og19/hm" 9 1 0 1 1 1 2 1 3 1 4 1 5 1 6 1 7 1 <hm> 8 /tl
2 4 2 5 2 6 <yl =t( b oa "r" o nd st> d o a) <Csaspgh hr-mct!1 1oferi<> >sr in/ <d /y b> o

Outline

" t p / w w w . r / R x t l / T / h m 1f a e e . h t : / w . 3 o g T / h m 1 D D x t l- r m s t -> -

6 <- Uigtefae cleto -> !- sn h rms olcin -

<ed ha> <il>rmscleto<tte tteFae olcin/il> <ha> /ed <rmstrw ="0,*> faee os 10 " <rm sc="o.tl nm ="pe"/ fae r tphm" ae upr > <rm sc=" nm ="oe"/ fae r " ae lwr > <faee> /rmst

2< m 7/ l h> t

58

59

13.7 navigator Object

Netscape, Mozilla, Microsofts Internet Explorer
Others as well

Contains information about the Web browser Allows Web authors to determine what browser the user is using

60

7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
2 6 2 7 2 8 2 9 3 0 3 1 3 2 3 3 < d o o =s r ) byna "a(> o ld tt" <Ricnyrrs tt arrtpe per tgo bwroh poiea, >dei u oe e ppa g pa wt.p ls a.<> ee i./ <o> /d by

<html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title>The navigator Object</title> <script type = "text/javascript"> <!-function start() { if (navigator.appName=="Microsoft Internet Explorer") { if ( navigator.appVersion.substring( 1, 0 ) >= "4" ) document.location = "newIEversion.html"; else document.location = "oldIEversion.html"; } else document.location = "NSversion.html"; }
//> <cp /rt si> <e> /a hd

Outline

navigat or.html (1 of 2)

3 <t> 4 /m hl

61

13.8 Summary of the DHTML Object Model

window document frames history navigator plugins location event screen embeds filters forms images Key object all

document
document

anchors applets body

links
plugins scripts

collection

styleSheets

Fig. 13.10

DHTML Object Model.

62

O je t o c lle tio D s r tio b c r o c n e c ip n

O je ts b c
wno idw

13.8 Summary of the DHTML Object Model

R p s n th b we w d wa dp v e a c s toth d c m n o je t c n in d e re e ts e ro s r in o n ro id s c e s e o u e t b c o ta e inth w n o . I th w n o c n in f ms as p ra w n o o je t isc a d e i d w f e i d w o ta s ra e e a te i d w b c re te a to a a fo e c fr m, top v ea c s toth d c m n re d re inth fra e u mtic lly r a h a e ro id c e s e ouet ne d e m. F ms a c n id re tob s b in o sinth b we ra e re o s e d e uw dw e ro s r. R p s n th X T Ld c mn re d re ina w n o . T ed c m n o je t e re e ts e H M o u e t n e d idw h ouet b c p v e a c s toe e e mn inth X T Ld c mn a da w d n m ro id s c e s v ry le e t e H M o u e t n llo s y a ic m d a no th X T Ld c mn o ific tio f e H M o u e t. P v e a c s toth b d e mn o a X T Ld c mn ro id s c e s e o y le e t f n H M o u e t. K e stra ko th s s v ite b th b we u e T eo je t p v e as r t ep c f e ite is d y e ro s r s r. h b c ro id s c ip p g m e w th a ilitytom v fo a a db c w rdth u hth v ite s s b t ro ra mr ith e b o e rw rd n a k a ro g e is d ite , u fo s c rityre s n d e n t a wth a tu l s U L tob mn u te . r eu a o s o s o llo e c a ite R s e a ip la d C n in in rmtio a o t th Wbb we s c a th n m o th b we th o ta s fo a n b u e e ro s r, u h s e a e f e ro s r, e v rs no th b we th o e tin s s m nw ic th b we is ru n ga do e e io f e ro s r, e p ra g y te o h h e ro s r n in n th r in rmtio th t c nh lpas r t w r c s m eth u e s b win e p r n e fo a n a a e c ip rite u to iz e s r ro s g x e ie c . C n in th U Lo th r n e dd c mn We th o je t iss t toan wU L th o ta s e R f e e d re o u e t. h n is b c e e R, e b we im e ia lys itc e ( a ig te ) toth n wlo a n ro s r md te w h s n v a s e e c tio . C nb u e ina e e t h n le too ta in rmtio a o t th e e t th t o c r d(e ., a e sd n vn a d r b in fo a n b u e v n a c u re .g th m u ex yc o in te d rin am u ee e t). e o s - o rd a s u g o s vn C n in in rmtio a o t th c m u r s re nf r th c m u r o w ic th b o s r o ta s fo a n b u e o p te c e o e o p te n h h e r we is r n in . I fo a ns c a th w tha dh ig t o th s r e inp e c nb u e to u n g n rmtio u h s e id n e h f e c e n ix ls a e s d d te in th s ea w ic e mn s o ldb re d r dinaWbp g . e rm e e iz t h h le e ts h u e n e e e ae

dcmn ouet

bd oy hsoy itr

nvgtr aiao

lcto oain eet vn sre cen

F . 1 .1 ig 3 1

O je tsinth In r e E p r r 6O je t M d l. b c e ten t x loe b c oe

63

O je t o c lle tio D s rip n b c r o c n e c tio

C lle tio s o c n
al l

13.8 Summary of the DHTML Object Model

Mn o je ts h v a a lc lle tio th t p v e a c s toe e e mn c n in din a y b c a e n l o c n a ro id s c e s v ry le e t o ta e th o je t. F r e a p , th b d o je ts a lc lle tio p v e a c s toe e e b c o x m le e o y b c l o c n ro id s c e s v ry e mn inth b d e mn o a X T Ld c mn le e t e o y le e t f n H M o u e t. C lle tio c n in a th a c o e mn (a th t h v an m o i a u . T e o c n o ta s ll e n h r le e ts ) a a e a e r d ttrib te h e mn a p a inth c lle tio inth o e th yw red fin dinth X T L le e ts p e r e o c n e rd r e e e e e HM d c mn o u e t. C n in a th a p e e mn inth X T Ld c mn C rre tly th m s o ta s ll e p l t le e ts e H M o u e t. u n , e o t c m o a p e e mn a J v a p ts o m n p l t le e ts re a a p le . C n in a th e b de mn inth X T Ld c mn o ta s ll e m e le e ts e H M o u e t. C n in a th f r e mn inth X T Ld c mn T ee mn a p a inth o ta s ll e o m le e ts e H M o u e t. h le e ts p e r e c lle tio inth o e th yw red fin dinth X T Ld c mn o c n e rd r e e e e e H M o u e t. C n in w n o o je tsth t re re e t e c fra einth b we w d w E c fra e o ta s i d w b c a p s n a h m e ro s r in o . a h m is tre te a its o ns b in o . a d s w uw dw C n in a th i ge mn inth X T Ld c mn T ee mn a p a inth o ta s ll e m le e ts e H M o u e t. h le e ts p e r e c lle tio inth o e th yw red fin dinth X T Ld c mn o c n e rd r e e e e e H M o u e t. C n in a th a c o e mn (a w a h e p p rty T is c lle tio a o o ta s ll e n h r le e ts ) ith n r f ro e . h o c n ls c n in a th a e e mn th t re re e t lin s ina img mp o ta s ll e r a le e ts a p s n k n ae a.

acos nhr

apes plt ebd mes frs om fae rms iae mgs lns ik

F . 1 .1 ig 3 1

O je tsinth In rn t E p re 6O je t M d l. b c e te e x lo r b c oe

64

Ot ro t n eit n b olc Dp jc c i e l o s i e co r
pi ln us g sp ct rs i

13.8 Summary of the DHTML Object Model

Lt e d lcniceooi ahm e e it i hm sl t ,h o t nn sl e b l nn k e b ceo s lc ctn t e dm h e eo i t l i a l ee t s e X L un H dm T o e M c t . Ci ahc tmit X L un o nl e r e e n H d m n s t s pe n h T o e t a l il t s e M c t . Ci s e e j tt te sta s em t X L o nt S te h pee t e ei h H n s y h oc a r n c y l n e T t a l e bs r e h le tn M d mna s eei l en X L una n o ea e t se c dt H d mi l . c n dc y h ndi h T o ev i u t hl t u e M c t k

see tSt yhs le

F3 i. .1 Ot i teet x r 6 jc o. g 1 1 b s h tr E e Ot d jcn I n p r b M e ne l o e e l

65

Helpful references
http://www.devguru.com/Technologies/ecmascript/quickref/js_objects.html http://www.w3schools.com/js/js_obj_htmldom.asp

66