JavaScript is an object-based language 4 It is NOT - PowerPoint PPT Presentation

Lecture ¡2: ¡JavaScript ¡Objects ¡ • JavaScript ¡is ¡an ¡object-­‑based ¡language ¡ 4 It ¡is ¡NOT ¡object-­‑oriented ¡ 4 It ¡has ¡and ¡uses ¡objects, ¡but ¡does ¡not ¡support ¡some ¡ features ¡necessary ¡for ¡object-­‑oriented ¡languages ¡ • Class ¡inheritance ¡and ¡polymorphism ¡not ¡supported ¡ – They ¡can ¡be ¡ “ faked ” ¡but ¡are ¡not ¡really ¡there ¡ – hGp://www.webreference.com/js/column79/ ¡ ¡ – hGp://www.webreference.com/js/column80/ ¡ ¡ 1 ¡

Lecture ¡2: ¡JavaScript ¡Objects ¡ 4 JavaScript ¡objects ¡are ¡actually ¡represented ¡as ¡ property-­‑value ¡pairs ¡ • Actually ¡similar ¡to ¡keyed ¡arrays ¡in ¡PHP ¡ • The ¡object ¡is ¡analogous ¡to ¡the ¡array, ¡and ¡the ¡ properRes ¡are ¡analogous ¡to ¡the ¡keys ¡ – However, ¡the ¡property ¡values ¡can ¡be ¡data ¡or ¡funcRons ¡ (methods) ¡ • Ex: ¡ var my_tv = new Object(); my_tv.brand = ”Samsung"; my_tv.size = 46; my_tv.jacks = new Object(); my_tv.jacks.input = 5; my_tv.jacks.output = 2; 2 ¡

Lecture ¡2: ¡JavaScript ¡Objects ¡ • Note ¡that ¡the ¡objects ¡can ¡be ¡created ¡and ¡their ¡ properRes ¡can ¡be ¡changed ¡dynamically ¡ • Also, ¡objects ¡all ¡have ¡the ¡same ¡data ¡type ¡– ¡object ¡ • We ¡can ¡write ¡constructor ¡funcRons ¡for ¡objects ¡if ¡we'd ¡ like, ¡but ¡these ¡do ¡not ¡create ¡new ¡data ¡types ¡– ¡just ¡ easy ¡ways ¡of ¡uniformly ¡iniRalizing ¡objects function TV(brand, size, injacks, outjacks) { this.brand = brand; this.size = size; this.jacks = new Object(); this.jacks.input = injacks; this.jacks.output = outjacks; } … var my_tv = new TV(”Samsung”, 46, 5, 2); 3 ¡

Lecture ¡2: ¡JavaScript ¡Objects ¡ • Once ¡an ¡object ¡is ¡constructed, ¡I ¡can ¡change ¡its ¡ properRes ¡if ¡I ¡want ¡to ¡ – Let ’ s ¡say ¡I ¡want ¡to ¡add ¡a ¡method ¡to ¡my ¡TV ¡called ¡ "show_properRes" ¡ function show_properties() { document.write("Here is your TV: <BR/>"); document.write("Brand: ", this.brand,"<BR/>"); document.write("Size: ", this.size, "<BR/>"); document.write("Input Jacks: "); document.write(this.jacks.input, "<BR/>"); document.write("Output Jacks: "); document.write(this.jacks.output, "<BR/>"); } … my_tv.show = show_properties; � – See ¡ex5.html ¡ 4 ¡

Lecture ¡2: ¡Javascript ¡Objects ¡ • We ¡can ¡do ¡a ¡lot ¡with ¡Javascript ¡objects ¡ 4 Even ¡though ¡Javascript ¡is ¡not ¡truly ¡object-­‑ oriented, ¡we ¡can ¡program ¡in ¡an ¡object-­‑based ¡ way ¡ • EncapsulaRng ¡data ¡and ¡methods ¡within ¡objects ¡ • URlizing ¡methods ¡for ¡operaRons ¡on ¡the ¡objects ¡ • See ¡ex6.html ¡ 4 We ¡will ¡be ¡using ¡Javascript ¡objects ¡a ¡lot ¡with ¡ client-­‑side ¡programming ¡ 5 ¡

Lecture ¡2: ¡Regular ¡Expressions ¡ 4 JavaScript ¡regular ¡expression ¡handling ¡is ¡also ¡ based ¡on ¡that ¡in ¡Perl ¡ • The ¡paGerns ¡and ¡matching ¡procedures ¡are ¡the ¡ same ¡as ¡in ¡Perl, ¡Java ¡and ¡PHP ¡(PCRE) ¡ • However, ¡now ¡the ¡funcRons ¡are ¡methods ¡within ¡a ¡ string ¡object ¡(similar ¡to ¡Java) ¡ var s = "a man, a plan, a canal: panama"; � var loc = s.search(/plan/); � var matches1 = s.match(/an/g); � var matches2 = s.match(/\w+/g); � var matches3 = s.split(/\W+/); � s = s.replace(/\W/g, "-"); � – Note ¡that ¡match ¡is ¡similar ¡to ¡the ¡PHP ¡match ¡funcRon ¡ – Returns ¡the ¡matched ¡pieces ¡as ¡opposed ¡to ¡the ¡non-­‑ matched ¡pieces ¡ ¡ – See ¡ex7.html ¡ 6 ¡

Lecture ¡2: ¡DOM ¡ • The ¡Document ¡Object ¡Model ¡ 4 Developed ¡by ¡W3C ¡(World-­‑Wide ¡Web ¡ConsorRum) ¡ • hGp://www.w3c.org/DOM/ ¡ ¡ 4 Specifies ¡the ¡contents ¡of ¡Web ¡documents ¡in ¡an ¡object-­‑ oriented ¡way ¡ • Allows ¡programming ¡languages ¡to ¡access ¡and ¡manipulate ¡ the ¡components ¡of ¡documents ¡ • Defined ¡at ¡a ¡high ¡level ¡so ¡that ¡a ¡variety ¡of ¡languages ¡can ¡ be ¡used ¡with ¡it ¡ • It ¡is ¡sRll ¡being ¡updated ¡/ ¡revised ¡ 4 We ¡are ¡not ¡even ¡scratching ¡the ¡surface ¡here ¡ ¡ ¡ ¡ 7 ¡

Lecture ¡2: ¡DOM ¡ • History ¡/ ¡Idea ¡ 4 HTML ¡and ¡XML ¡documents ¡consist ¡of ¡tags ¡ 4 Well-­‑formaGed ¡documents ¡(required ¡in ¡XHTML ¡ and ¡XML) ¡can ¡be ¡viewed ¡as ¡a ¡tree ¡ • Ex: ¡ hGp://www.w3schools.com/htmldom/default.asp ¡ ¡ 4 DOM ¡provides ¡a ¡language-­‑independent, ¡object-­‑ based ¡model ¡for ¡accessing ¡/ ¡modifying ¡and ¡ adding ¡to ¡these ¡tags ¡ 4 DOM ¡0 ¡ • Not ¡formally ¡specified ¡by ¡W3C ¡but ¡includes ¡a ¡lot ¡ of ¡useful ¡funcRonality ¡ 8 ¡

Lecture ¡2: ¡DOM ¡ 4 DOM ¡1, ¡2, ¡3 ¡ • Formal ¡specificaRons ¡of ¡model ¡and ¡funcRonality ¡ • Each ¡builds ¡on ¡/ ¡improves ¡previous ¡ 4 Unfortunately ¡there ¡are ¡sRll ¡compaRbility ¡issues ¡ with ¡browsers ¡ • IE ¡through ¡IE8 ¡does ¡not ¡fully ¡support ¡DOM ¡2 ¡ – It ¡has ¡its ¡own ¡syntax ¡for ¡event ¡aGachment ¡ • IE9 ¡does ¡support ¡DOM ¡2 ¡but ¡unRl ¡all ¡older ¡ versions ¡go ¡away ¡the ¡problem ¡sRll ¡exists ¡ 9 ¡

Lecture ¡2: ¡Events ¡ 4 With ¡documents ¡DOM ¡specifies ¡events ¡and ¡event ¡ handlers ¡ • Event ¡model ¡is ¡similar ¡to ¡the ¡one ¡used ¡in ¡Java ¡ • Different ¡parts ¡of ¡a ¡document ¡have ¡different ¡events ¡ associated ¡with ¡them ¡ • We ¡can ¡define ¡handlers ¡to ¡react ¡to ¡these ¡events ¡ 4 These ¡allow ¡us ¡to ¡"interact" ¡with ¡and ¡add ¡"dynamic ¡ content" ¡to ¡web ¡documents ¡ • Ex: ¡Can ¡preprocess ¡form ¡elements ¡ • Ex: ¡Can ¡load ¡/ ¡update ¡/ ¡change ¡what ¡is ¡displayed ¡in ¡ response ¡to ¡an ¡event ¡ 10 ¡

Lecture ¡2: ¡DOM ¡and ¡Events ¡ • document ¡refers ¡to ¡the ¡top-­‑level ¡document ¡ 4 Each ¡document ¡has ¡access ¡to ¡its ¡properRes ¡and ¡to ¡the ¡ components ¡that ¡are ¡declared ¡within ¡it ¡ • Ex: ¡Rtle, ¡URL, ¡forms[], ¡applets[], ¡images[] ¡ • AGributes ¡with ¡IDs ¡can ¡also ¡be ¡specified ¡by ¡ID ¡(from ¡DOM ¡ 1) ¡ 4 Once ¡we ¡know ¡the ¡components, ¡events ¡and ¡event-­‑ handlers, ¡we ¡can ¡write ¡JavaScript ¡programs ¡to ¡process ¡ Web ¡pages ¡on ¡the ¡client-­‑side ¡ • Client ¡computers ¡are ¡typically ¡less ¡busy ¡than ¡servers, ¡so ¡ whatever ¡we ¡can ¡do ¡at ¡the ¡client ¡will ¡be ¡helpful ¡overall ¡ 11 ¡

Lecture ¡2: ¡DOM ¡and ¡Events ¡ – Ex: ¡Checking ¡form ¡correctness ¡before ¡it ¡is ¡submiGed ¡ ¡ 4 In ¡HTML ¡documents ¡events ¡are ¡specified ¡through ¡tag ¡ aGributes ¡ • Within ¡the ¡tag ¡idenRfying ¡an ¡HTML ¡component, ¡we ¡ can ¡specify ¡in ¡an ¡aGribute ¡how ¡the ¡component ¡ reacts ¡to ¡various ¡events ¡ 4 See ¡Sebesta ¡Table ¡5.1 ¡for ¡events ¡and ¡tag ¡aGributes ¡and ¡ Table ¡5.2 ¡for ¡the ¡tags ¡that ¡have ¡a ¡given ¡aGribute ¡(e.g., ¡ click, ¡onclick, ¡mousemove, ¡onmousemove ¡ 4 Similar ¡in ¡idea ¡to ¡Java, ¡we ¡assign ¡event ¡handling ¡code ¡ to ¡the ¡tag ¡aGributes, ¡and ¡the ¡code ¡executes ¡when ¡the ¡ event ¡occurs ¡ 12 ¡