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

1 ¡

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/ ¡ ¡

2 ¡

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;

3 ¡

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);

4 ¡

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 ¡

Lecture ¡2: ¡Javascript ¡Objects ¡

• We ¡can ¡do ¡a ¡lot ¡with ¡Javascript ¡objects ¡

4 Even ¡though ¡Javascript ¡is ¡not ¡truly ¡object-­‑

• riented, ¡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 ¡

6 ¡

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 ¡

7 ¡

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-­‑

• riented ¡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 ¡ ¡ ¡ ¡

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 ¡
• f ¡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 ¡

10 ¡

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 ¡

11 ¡

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 ¡

12 ¡

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 ¡

Lecture ¡2: ¡Events ¡

• We ¡can ¡also ¡aGach ¡events ¡in ¡Javascript ¡

4 In ¡DOM ¡0, ¡events ¡are ¡aGached ¡in ¡an ¡“inline” ¡way: ¡

• Ex: ¡theElement.onclick = functionName

4 In ¡DOM ¡2, ¡a ¡more ¡flexible ¡event ¡model ¡was ¡ developed, ¡so ¡that ¡more ¡than ¡one ¡handler ¡could ¡be ¡ aGached ¡to ¡the ¡same ¡event: ¡

• Ex: ¡theElement.addEventListener(type, fn, opt)

– Where ¡opt ¡is ¡a ¡boolean ¡to ¡determine ¡if ¡the ¡event ¡is ¡“captured” ¡

• r ¡“bubbles” ¡

» See: ¡hGp://en.wikipedia.org/wiki/DOM_Events ¡ ¡

• Unfortunately, ¡IE ¡(up ¡through ¡IE8) ¡does ¡not ¡use ¡DOM ¡2 ¡

– It ¡has ¡its ¡own, ¡similar ¡model ¡ ¡

13 ¡

14 ¡

Lecture ¡2: ¡DOM ¡and ¡Events ¡

• Ex: ¡Event ¡mouseover ¡occurs ¡when ¡the ¡mouse ¡is ¡

place ¡over ¡a ¡displayed ¡element ¡

4 Elements ¡that ¡allow ¡for ¡the ¡mouseover ¡event ¡ have ¡the ¡aGribute ¡onmouseover ¡ ¡ 4 In ¡HTML ¡or ¡Javascript, ¡the ¡programmer ¡assigns ¡a ¡ funcRon ¡call ¡to ¡the ¡aGribute, ¡so ¡that ¡when ¡the ¡ event ¡occurs ¡the ¡funcRon ¡is ¡called ¡

<input ¡type ¡= ¡"radio" ¡name ¡= ¡"choice" ¡value ¡= ¡"1" ¡

• nmouseover ¡= ¡"showChoice(1)"> ¡
• We ¡can ¡define ¡showChoice ¡however ¡we'd ¡like ¡

– ex: ¡alert("You ¡are ¡about ¡to ¡choose ¡Choice ¡1"); ¡ ¡

15 ¡

Lecture ¡2: ¡Example: ¡Pre-­‑processing ¡a ¡Form ¡

• A ¡very ¡common ¡client-­‑side ¡operaRon ¡is ¡pre-­‑

processing ¡a ¡form ¡

4 Ensure ¡that ¡fields ¡are ¡filled ¡and ¡formaGed ¡ correctly, ¡so ¡server ¡does ¡not ¡have ¡to ¡

• Saves ¡load ¡on ¡the ¡server, ¡saves ¡Rme ¡and ¡saves ¡

bandwidth ¡

• We ¡can ¡check ¡a ¡form ¡overall ¡by ¡using ¡the ¡

aGribute ¡onsubmit ¡ – We ¡can ¡put ¡it ¡right ¡into ¡the ¡form ¡as ¡an ¡ aGribute ¡ – Or ¡we ¡can ¡assign ¡the ¡aGribute ¡through ¡the ¡ document ¡object ¡in ¡Javascript ¡

16 ¡

Lecture ¡2: ¡Example: ¡Pre-­‑processing ¡a ¡form ¡

4 We ¡can ¡check ¡individual ¡components ¡as ¡they ¡are ¡ entered ¡as ¡well ¡

• Ex: ¡<input ¡type ¡= ¡"text"> ¡has ¡the ¡onchange ¡

aGribute ¡

– ¡Triggered ¡when ¡contents ¡are ¡changed ¡and ¡focus ¡ changes ¡

• Ex: ¡<input ¡type ¡= ¡"radio"> ¡has ¡the ¡onclick ¡aGribute ¡

– Triggered ¡when ¡the ¡radio ¡buGon ¡is ¡clicked ¡with ¡the ¡ mouse ¡

4 See ¡ex8.html ¡

• Note: ¡Script ¡to ¡process ¡this ¡form ¡is ¡not ¡shown ¡
• You ¡may ¡want ¡to ¡write ¡it ¡as ¡an ¡exercise ¡

– Also ¡note ¡Firebug ¡or ¡Web ¡Inspector ¡– ¡use ¡it ¡if ¡you ¡can! ¡

17 ¡

Lecture ¡3: ¡Processing ¡MulRple ¡Forms ¡and ¡MulRple ¡Submits ¡

4 Web ¡pages ¡can ¡also ¡have ¡mulRple ¡forms ¡

• These ¡can ¡be ¡handled ¡both ¡on ¡the ¡client ¡side ¡

using ¡JavaScript ¡and ¡on ¡the ¡server ¡side ¡

• Idea ¡is ¡to ¡idenRfy ¡which ¡form ¡has ¡been ¡submiGed ¡

and ¡respond ¡accordingly ¡

– See ¡mform.html ¡and ¡mform.php ¡

4 Similarly, ¡we ¡can ¡have ¡mulRple ¡submits ¡of ¡a ¡ single ¡form ¡

• See ¡also ¡msub.html ¡and ¡mform.php ¡

4 One ¡more ¡example ¡demonstraRng ¡DOM ¡

• See ¡ex9.html ¡