t rt t ss s s - - PowerPoint PPT Presentation

▶
t r t t ss s s
SMART_READER_LITE
LIVE PREVIEW

t rt t ss s s - - PowerPoint PPT Presentation

Jan 13, 2024 9 likes •702 views

ts rst t t tr st r s ts ssr

slide-1
SLIDE 1
slide-2
SLIDE 2

❚❤❡ ♠♦♠❡♥t ♦❢ ❢r✉✐t✿ t❤❡ ❝❧❛ss ❤❛s s♣♦❦❡♥

❚♦♣ t❡❛♠s ♣r❡s❡♥t ❛t ❙❡❣❢❛✉❧t ❚❛♥❦ ♦♥ ✹✴✷✶✿

✶ ❉✉❡❧✿ ✻ ✭✷ ❡①tr❛ s❤✐❢t❡❞ ❢r♦♠ s❡❧❢ ✈♦t❡s✮ ✷ ❆♠❜❛ss❛❞♦r✿ ✹ ✸ ◗✉✐❝❦❙♦✉r❝❡✿ ✸ ✹ ❈❤❛❧❦❇♦❛r❞✿ ✸ ✺ ❋♦rt✉♥❛ ❇❡❡r✿ ✸

❇♦tt♦♠ t❡❛♠s ♣r❡s❡♥t ✐♥ ❝❧❛ss t❤✐s ❚❤✉rs❞❛② ✹✴✶✻✿

✶ ❙❝r✐❜❜❧❡✿ ✷ ✷ ❈❧❡❛r❱✐③✿ ✷ ✸ ❆❧❧■♥❖♥❡✿ ✶ ✹ ❚r✐♣❙♣❧✐tt❡r✿ ✵

❙❤♦❝❦❡rs✿ ❙❝r✐❜❜❧❡ ✫ ❋♦rt✉♥❛

❈♦♥❣r❛ts ♦♥ s♥❡❛❦② str❛t❡❣✐③✐♥❣ t♦ ❣❡t ②♦✉rs❡❧❢ t♦ t❤❡ t♦♣ ✿✮

slide-3
SLIDE 3

❚❤❡ ♠♦♠❡♥t ♦❢ ❢r✉✐t✿ t❤❡ ❝❧❛ss ❤❛s s♣♦❦❡♥

❚♦♣ t❡❛♠s ♣r❡s❡♥t ❛t ❙❡❣❢❛✉❧t ❚❛♥❦ ♦♥ ✹✴✷✶✿

✶ ❉✉❡❧✿ ✻ ✭✷ ❡①tr❛ s❤✐❢t❡❞ ❢r♦♠ s❡❧❢ ✈♦t❡s✮ ✷ ❆♠❜❛ss❛❞♦r✿ ✹ ✸ ◗✉✐❝❦❙♦✉r❝❡✿ ✸ ✹ ❈❤❛❧❦❇♦❛r❞✿ ✸ ✺ ❋♦rt✉♥❛ ❇❡❡r✿ ✸

❇♦tt♦♠ t❡❛♠s ♣r❡s❡♥t ✐♥ ❝❧❛ss t❤✐s ❚❤✉rs❞❛② ✹✴✶✻✿

✶ ❙❝r✐❜❜❧❡✿ ✷ ✷ ❈❧❡❛r❱✐③✿ ✷ ✸ ❆❧❧■♥❖♥❡✿ ✶ ✹ ❚r✐♣❙♣❧✐tt❡r✿ ✵

❙❤♦❝❦❡rs✿ ❙❝r✐❜❜❧❡ ✫ ❋♦rt✉♥❛

❈♦♥❣r❛ts ♦♥ s♥❡❛❦② str❛t❡❣✐③✐♥❣ t♦ ❣❡t ②♦✉rs❡❧❢ t♦ t❤❡ t♦♣ ✿✮

slide-4
SLIDE 4

❚❤❡ ♠♦♠❡♥t ♦❢ ❢r✉✐t✿ t❤❡ ❝❧❛ss ❤❛s s♣♦❦❡♥

❚♦♣ t❡❛♠s ♣r❡s❡♥t ❛t ❙❡❣❢❛✉❧t ❚❛♥❦ ♦♥ ✹✴✷✶✿

✶ ❉✉❡❧✿ ✻ ✭✷ ❡①tr❛ s❤✐❢t❡❞ ❢r♦♠ s❡❧❢ ✈♦t❡s✮ ✷ ❆♠❜❛ss❛❞♦r✿ ✹ ✸ ◗✉✐❝❦❙♦✉r❝❡✿ ✸ ✹ ❈❤❛❧❦❇♦❛r❞✿ ✸ ✺ ❋♦rt✉♥❛ ❇❡❡r✿ ✸

❇♦tt♦♠ t❡❛♠s ♣r❡s❡♥t ✐♥ ❝❧❛ss t❤✐s ❚❤✉rs❞❛② ✹✴✶✻✿

✶ ❙❝r✐❜❜❧❡✿ ✷ ✷ ❈❧❡❛r❱✐③✿ ✷ ✸ ❆❧❧■♥❖♥❡✿ ✶ ✹ ❚r✐♣❙♣❧✐tt❡r✿ ✵

❙❤♦❝❦❡rs✿ ❙❝r✐❜❜❧❡ ✫ ❋♦rt✉♥❛

❈♦♥❣r❛ts ♦♥ s♥❡❛❦② str❛t❡❣✐③✐♥❣ t♦ ❣❡t ②♦✉rs❡❧❢ t♦ t❤❡ t♦♣ ✿✮

slide-5
SLIDE 5

❚❤❡ ♠♦♠❡♥t ♦❢ ❢r✉✐t✿ t❤❡ ❝❧❛ss ❤❛s s♣♦❦❡♥

❚♦♣ t❡❛♠s ♣r❡s❡♥t ❛t ❙❡❣❢❛✉❧t ❚❛♥❦ ♦♥ ✹✴✷✶✿

✶ ❉✉❡❧✿ ✻ ✭✷ ❡①tr❛ s❤✐❢t❡❞ ❢r♦♠ s❡❧❢ ✈♦t❡s✮ ✷ ❆♠❜❛ss❛❞♦r✿ ✹ ✸ ◗✉✐❝❦❙♦✉r❝❡✿ ✸ ✹ ❈❤❛❧❦❇♦❛r❞✿ ✸ ✺ ❋♦rt✉♥❛ ❇❡❡r✿ ✸

❇♦tt♦♠ t❡❛♠s ♣r❡s❡♥t ✐♥ ❝❧❛ss t❤✐s ❚❤✉rs❞❛② ✹✴✶✻✿

✶ ❙❝r✐❜❜❧❡✿ ✷ ✷ ❈❧❡❛r❱✐③✿ ✷ ✸ ❆❧❧■♥❖♥❡✿ ✶ ✹ ❚r✐♣❙♣❧✐tt❡r✿ ✵

❙❤♦❝❦❡rs✿ ❙❝r✐❜❜❧❡ ✫ ❋♦rt✉♥❛

❈♦♥❣r❛ts ♦♥ s♥❡❛❦② str❛t❡❣✐③✐♥❣ t♦ ❣❡t ②♦✉rs❡❧❢ t♦ t❤❡ t♦♣ ✿✮

slide-6
SLIDE 6

❆❣❡♥❞❛

◆❡✇s ②♦✉ ❝❛♥ ✉s❡✿

◮ ❨✐❦ ❨❛❦ ✐s ❝♦♠✐♥❣ t♦ ❝♦♠♣❧❡♠❡♥t ♦✉r ♣♦st♠♦rt❡♠ ♣❛rt② ♦♥ ❚❤✉ ✹✴✷✸

◆❡✇ ❝♦♥✜r♠❡❞ ❥✉❞❣❡✿ ❑❡✈✐♥ ▲❡✐ ❉✐r❡❝t♦r✱ ❋❛❝✉❧t② ❛♥❞ ❙t❛rt✲✉♣ ❙❡r✈✐❝❡s✱ ❖✣❝❡ ♦❢ ❚❡❝❤ ❚r❛♥s❢❡r ❛t ❊♠♦r②

❙t❛♥❞✲✉♣ ❢♦r ②♦✉r ♠❡❡t✐♥❣ ♥♦✇✦ ❚♦❞❛②✬s ♠❡♥✉✿

✶

❚❤❡ ❏❛✈❛❙❝r✐♣t ❘❡✈♦❧✉t✐♦♥

slide-7
SLIDE 7

❆❣❡♥❞❛

◆❡✇s ②♦✉ ❝❛♥ ✉s❡✿

◮ ❨✐❦ ❨❛❦ ✐s ❝♦♠✐♥❣ t♦ ❝♦♠♣❧❡♠❡♥t ♦✉r ♣♦st♠♦rt❡♠ ♣❛rt② ♦♥ ❚❤✉ ✹✴✷✸ ◮ ◆❡✇ ❝♦♥✜r♠❡❞ ❥✉❞❣❡✿ ❑❡✈✐♥ ▲❡✐

❉✐r❡❝t♦r✱ ❋❛❝✉❧t② ❛♥❞ ❙t❛rt✲✉♣ ❙❡r✈✐❝❡s✱ ❖✣❝❡ ♦❢ ❚❡❝❤ ❚r❛♥s❢❡r ❛t ❊♠♦r②

❙t❛♥❞✲✉♣ ❢♦r ②♦✉r ♠❡❡t✐♥❣ ♥♦✇✦ ❚♦❞❛②✬s ♠❡♥✉✿

✶

❚❤❡ ❏❛✈❛❙❝r✐♣t ❘❡✈♦❧✉t✐♦♥

slide-8
SLIDE 8

❆❣❡♥❞❛

◆❡✇s ②♦✉ ❝❛♥ ✉s❡✿

◮ ❨✐❦ ❨❛❦ ✐s ❝♦♠✐♥❣ t♦ ❝♦♠♣❧❡♠❡♥t ♦✉r ♣♦st♠♦rt❡♠ ♣❛rt② ♦♥ ❚❤✉ ✹✴✷✸ ◮ ◆❡✇ ❝♦♥✜r♠❡❞ ❥✉❞❣❡✿ ❑❡✈✐♥ ▲❡✐

❉✐r❡❝t♦r✱ ❋❛❝✉❧t② ❛♥❞ ❙t❛rt✲✉♣ ❙❡r✈✐❝❡s✱ ❖✣❝❡ ♦❢ ❚❡❝❤ ❚r❛♥s❢❡r ❛t ❊♠♦r②

❙t❛♥❞✲✉♣ ❢♦r ②♦✉r ♠❡❡t✐♥❣ ♥♦✇✦ ❚♦❞❛②✬s ♠❡♥✉✿

✶

❚❤❡ ❏❛✈❛❙❝r✐♣t ❘❡✈♦❧✉t✐♦♥

slide-9
SLIDE 9

❆❣❡♥❞❛

◆❡✇s ②♦✉ ❝❛♥ ✉s❡✿

◮ ❨✐❦ ❨❛❦ ✐s ❝♦♠✐♥❣ t♦ ❝♦♠♣❧❡♠❡♥t ♦✉r ♣♦st♠♦rt❡♠ ♣❛rt② ♦♥ ❚❤✉ ✹✴✷✸ ◮ ◆❡✇ ❝♦♥✜r♠❡❞ ❥✉❞❣❡✿ ❑❡✈✐♥ ▲❡✐

❉✐r❡❝t♦r✱ ❋❛❝✉❧t② ❛♥❞ ❙t❛rt✲✉♣ ❙❡r✈✐❝❡s✱ ❖✣❝❡ ♦❢ ❚❡❝❤ ❚r❛♥s❢❡r ❛t ❊♠♦r②

❙t❛♥❞✲✉♣ ❢♦r ②♦✉r ♠❡❡t✐♥❣ ♥♦✇✦ ❚♦❞❛②✬s ♠❡♥✉✿

✶

❚❤❡ ❏❛✈❛❙❝r✐♣t ❘❡✈♦❧✉t✐♦♥

slide-10
SLIDE 10

◗✉✐③ ★✼

❊①✐t q✉✐③✿ ❉❡s✐❣♥ P❛tt❡r♥s✱ ❈♦♥t✐♥✉♦✉s ■♥t❡❣r❛t✐♦♥✱ ▼❛r❦❡t✐♥❣✱ ❘❡s♣♦♥s✐✈❡ ♠♦❜✐❧❡✱ ❙t❛rt✉♣ ❋✉♥❞✐♥❣

  • ✐✈❡ ❛♥ ❡①❛♠♣❧❡ ♦❢ t❤❡ ♦❜s❡r✈❡r ♣r♦❣r❛♠♠✐♥❣ ♣❛tt❡r♥

❲❤② ❞♦ ✇❡ ♥❡❡❞ ♠♦❝❦ ♦❜❥❡❝ts ✐♥ ✐♥t❡❣r❛t✐♦♥ t❡st✐♥❣❄ ❍♦✇ ❞♦❡s ♠❛r❦❡t r❡s❡❛r❝❤ r❡❞✉❝❡ r✐s❦❄ ❲❤❛t✬s t❤❡ ❜❡st ♣r♦❞✉❝t str❛t❡❣②❄ ❆r❣✉❡ ❛ ❢❡✇ ♣♦✐♥ts ❢♦r ♠❛❦✐♥❣ ❛ r❡s♣♦♥s✐✈❡ ✇❡❜❛♣♣ ✈❡rs✉s ❜✉✐❧❞✐♥❣ ❛ ♥❛t✐✈❡ ♠♦❜✐❧❡ ❛♣♣❄ ❲❤❛t✬s t❤❡ ❞✐✛❡r❡♥❝❡ ❜❡t✇❡❡♥ ❛♥ ❛♥❣❡❧ ✐♥✈❡st♦r ✈❡rs✉s ✈❡♥t✉r❡ ❝❛♣✐t❛❧✐st❄

❊♥tr② s✉r✈❡②✿ ❏❛✈❛❙❝r✐♣t

❍♦✇ ❞♦❡s t❤❡ ❏❛✈❛❙❝r✐♣t ❧❛♥❣✉❛❣❡ ❝♦♠♣❛r❡ t♦ ♦t❤❡r ❧❛♥❣✉❛❣❡s ②♦✉ ❦♥♦✇❄ ■s ❏❛✈❛❙❝r✐♣t ❛♥ ✐♠♣♦rt❛♥t ❧❛♥❣✉❛❣❡ t♦ ❧❡❛r♥ ✐♥ ②♦✉r ♦♣✐♥✐♦♥❄ ❲❤❛t ✐s ❆❏❆❳❄

❈❙✸✼✵✱ ●ü♥❛② ✭❊♠♦r②✮ ❙♣r✐♥❣ ✷✵✶✺ ✹ ✴ ✷✸

slide-11
SLIDE 11

❚❤❡ ❏❛✈❛❙❝r✐♣t ❘❡✈♦❧✉t✐♦♥

❚❤❡ ❝❧✐❡♥t✲s✐❞❡ t❛❦❡s ♦✈❡r ❈❙✸✼✵ ❙♦❢t✇❛r❡ ✫ ❙t❛rt✉♣ ❊♥❣✐♥❡❡r✐♥❣ Pr❛❝t✐❝✉♠✱ ❈❡♥❣✐③ ●ü♥❛② ✭❙♦♠❡ s❧✐❞❡s ❝♦✉rt❡s② ♦❢ ❊✉❣❡♥❡ ❆❣✐❝❤st❡✐♥ ❛♥❞ t❤❡ ■♥t❡r♥❡ts✳ ▲✐❝❡♥s❡✿ ❈❈ ❇❨✲❙❆ ✹✳✵✳✮

❈❙✸✼✵✱ ●ü♥❛② ✭❊♠♦r②✮ ❏❛✈❛❙❝r✐♣t ❙♣r✐♥❣ ✷✵✶✺ ✺ ✴ ✷✸

slide-12
SLIDE 12

❍♦✇ ❞♦❡s ✷✵✹✽ ✇♦r❦❄ ❈❧✐❡♥t✲s✐❞❡ ❝♦♠♣✉t✐♥❣✳

❈❙✸✼✵✱ ●ü♥❛② ✭❊♠♦r②✮ ❏❛✈❛❙❝r✐♣t ❙♣r✐♥❣ ✷✵✶✺ ✻ ✴ ✷✸

slide-13
SLIDE 13

❇r✐❡❢ ❍✐st♦r② ♦❢ ❏❛✈❛❙❝r✐♣t

❤tt♣✿✴✴❡♥✳✇✐❦✐♣❡❞✐❛✳♦r❣✴✇✐❦✐✴❏❛✈❛❙❝r✐♣t★❍✐st♦r② ❇✐rt❤ ❛t ◆❡ts❝❛♣❡✿ ❛❞✈❛♥t❛❣❡ ♦✈❡r ▼✐❝r♦s♦❢t ■♥t❡r♥❡t ❊①♣❧♦r❡r ■s ✐t ❝♦♠♣✐❧❡❞❄ ◆♦✱ ✐♥t❡r♣r❡t❡❞ ❧❛♥❣✉❛❣❡✳ ■s ✐t ❏❛✈❛❄ ◆♦✱ ✐♥s♣✐r❡❞ ❜② ✐t✳ ✿✮ ◆❛♠✐♥❣ ✇❛s ❝♦♥❢✉s✐♥❣✱ ♠❛②❜❡ ◆❡ts❝❛♣❡ ✇❛♥t❡❞ t♦ r✐❞❡ ♦♥ t❤❡ ❢❛♠❡ ♦❢ ❏❛✈❛✱ ✇❤✐❝❤ ✇❛s ❤♦t ❛♥❞ ♥❡✇ t❤❡♥✳ ❆♣♣❡❛r❡❞ ✜rst ❛s ▼♦❝❤❛✴▲✐✈❡❙❝r✐♣t ✐♥ ◆❡ts❝❛♣❡ ◆❛✈✐❣❛t♦r ✷✳✵ ✐♥ ❙❡♣t❡♠❜❡r ✶✾✾✺ ❙❡r✈❡r✲s✐❞❡ ❏❙ ♦♥ ✶✾✾✺ ▼✐❝r♦s♦❢t ❛❞♦♣t✐♦♥ ✐♥ ✶✾✾✻ ❙t❛♥❞❛r❞✐③❛t✐♦♥ ✶✾✾✼✕✷✵✶✶ ◆♦✇✱ ♦♥❡ ♦❢ ♠♦st ♣♦♣✉❧❛r ✇❡❜ ❧❛♥❣✉❛❣❡s✱ t❤❛♥❦s t♦ ❆❏❆❳ ✭✇✐❧❧ ❞♦ ❧❛t❡r✮

❈❙✸✼✵✱ ●ü♥❛② ✭❊♠♦r②✮ ❏❛✈❛❙❝r✐♣t ❙♣r✐♥❣ ✷✵✶✺ ✼ ✴ ✷✸

slide-14
SLIDE 14

❇r✐❡❢ ❍✐st♦r② ♦❢ ❏❛✈❛❙❝r✐♣t

❤tt♣✿✴✴❡♥✳✇✐❦✐♣❡❞✐❛✳♦r❣✴✇✐❦✐✴❏❛✈❛❙❝r✐♣t★❍✐st♦r② ❇✐rt❤ ❛t ◆❡ts❝❛♣❡✿ ❛❞✈❛♥t❛❣❡ ♦✈❡r ▼✐❝r♦s♦❢t ■♥t❡r♥❡t ❊①♣❧♦r❡r ■s ✐t ❝♦♠♣✐❧❡❞❄ ◆♦✱ ✐♥t❡r♣r❡t❡❞ ❧❛♥❣✉❛❣❡✳ ■s ✐t ❏❛✈❛❄ ◆♦✱ ✐♥s♣✐r❡❞ ❜② ✐t✳ ✿✮ ◆❛♠✐♥❣ ✇❛s ❝♦♥❢✉s✐♥❣✱ ♠❛②❜❡ ◆❡ts❝❛♣❡ ✇❛♥t❡❞ t♦ r✐❞❡ ♦♥ t❤❡ ❢❛♠❡ ♦❢ ❏❛✈❛✱ ✇❤✐❝❤ ✇❛s ❤♦t ❛♥❞ ♥❡✇ t❤❡♥✳ ❆♣♣❡❛r❡❞ ✜rst ❛s ▼♦❝❤❛✴▲✐✈❡❙❝r✐♣t ✐♥ ◆❡ts❝❛♣❡ ◆❛✈✐❣❛t♦r ✷✳✵ ✐♥ ❙❡♣t❡♠❜❡r ✶✾✾✺ ❙❡r✈❡r✲s✐❞❡ ❏❙ ♦♥ ✶✾✾✺ ▼✐❝r♦s♦❢t ❛❞♦♣t✐♦♥ ✐♥ ✶✾✾✻ ❙t❛♥❞❛r❞✐③❛t✐♦♥ ✶✾✾✼✕✷✵✶✶ ◆♦✇✱ ♦♥❡ ♦❢ ♠♦st ♣♦♣✉❧❛r ✇❡❜ ❧❛♥❣✉❛❣❡s✱ t❤❛♥❦s t♦ ❆❏❆❳ ✭✇✐❧❧ ❞♦ ❧❛t❡r✮

❈❙✸✼✵✱ ●ü♥❛② ✭❊♠♦r②✮ ❏❛✈❛❙❝r✐♣t ❙♣r✐♥❣ ✷✵✶✺ ✼ ✴ ✷✸

slide-15
SLIDE 15

❇r✐❡❢ ❍✐st♦r② ♦❢ ❏❛✈❛❙❝r✐♣t

❤tt♣✿✴✴❡♥✳✇✐❦✐♣❡❞✐❛✳♦r❣✴✇✐❦✐✴❏❛✈❛❙❝r✐♣t★❍✐st♦r② ❇✐rt❤ ❛t ◆❡ts❝❛♣❡✿ ❛❞✈❛♥t❛❣❡ ♦✈❡r ▼✐❝r♦s♦❢t ■♥t❡r♥❡t ❊①♣❧♦r❡r ■s ✐t ❝♦♠♣✐❧❡❞❄ ◆♦✱ ✐♥t❡r♣r❡t❡❞ ❧❛♥❣✉❛❣❡✳ ■s ✐t ❏❛✈❛❄ ◆♦✱ ✐♥s♣✐r❡❞ ❜② ✐t✳ ✿✮ ◆❛♠✐♥❣ ✇❛s ❝♦♥❢✉s✐♥❣✱ ♠❛②❜❡ ◆❡ts❝❛♣❡ ✇❛♥t❡❞ t♦ r✐❞❡ ♦♥ t❤❡ ❢❛♠❡ ♦❢ ❏❛✈❛✱ ✇❤✐❝❤ ✇❛s ❤♦t ❛♥❞ ♥❡✇ t❤❡♥✳ ❆♣♣❡❛r❡❞ ✜rst ❛s ▼♦❝❤❛✴▲✐✈❡❙❝r✐♣t ✐♥ ◆❡ts❝❛♣❡ ◆❛✈✐❣❛t♦r ✷✳✵ ✐♥ ❙❡♣t❡♠❜❡r ✶✾✾✺ ❙❡r✈❡r✲s✐❞❡ ❏❙ ♦♥ ✶✾✾✺ ▼✐❝r♦s♦❢t ❛❞♦♣t✐♦♥ ✐♥ ✶✾✾✻ ❙t❛♥❞❛r❞✐③❛t✐♦♥ ✶✾✾✼✕✷✵✶✶ ◆♦✇✱ ♦♥❡ ♦❢ ♠♦st ♣♦♣✉❧❛r ✇❡❜ ❧❛♥❣✉❛❣❡s✱ t❤❛♥❦s t♦ ❆❏❆❳ ✭✇✐❧❧ ❞♦ ❧❛t❡r✮

❈❙✸✼✵✱ ●ü♥❛② ✭❊♠♦r②✮ ❏❛✈❛❙❝r✐♣t ❙♣r✐♥❣ ✷✵✶✺ ✼ ✴ ✷✸

slide-16
SLIDE 16

❇r✐❡❢ ❍✐st♦r② ♦❢ ❏❛✈❛❙❝r✐♣t

❤tt♣✿✴✴❡♥✳✇✐❦✐♣❡❞✐❛✳♦r❣✴✇✐❦✐✴❏❛✈❛❙❝r✐♣t★❍✐st♦r② ❇✐rt❤ ❛t ◆❡ts❝❛♣❡✿ ❛❞✈❛♥t❛❣❡ ♦✈❡r ▼✐❝r♦s♦❢t ■♥t❡r♥❡t ❊①♣❧♦r❡r ■s ✐t ❝♦♠♣✐❧❡❞❄ ◆♦✱ ✐♥t❡r♣r❡t❡❞ ❧❛♥❣✉❛❣❡✳ ■s ✐t ❏❛✈❛❄ ◆♦✱ ✐♥s♣✐r❡❞ ❜② ✐t✳ ✿✮ ◆❛♠✐♥❣ ✇❛s ❝♦♥❢✉s✐♥❣✱ ♠❛②❜❡ ◆❡ts❝❛♣❡ ✇❛♥t❡❞ t♦ r✐❞❡ ♦♥ t❤❡ ❢❛♠❡ ♦❢ ❏❛✈❛✱ ✇❤✐❝❤ ✇❛s ❤♦t ❛♥❞ ♥❡✇ t❤❡♥✳ ❆♣♣❡❛r❡❞ ✜rst ❛s ▼♦❝❤❛✴▲✐✈❡❙❝r✐♣t ✐♥ ◆❡ts❝❛♣❡ ◆❛✈✐❣❛t♦r ✷✳✵ ✐♥ ❙❡♣t❡♠❜❡r ✶✾✾✺ ❙❡r✈❡r✲s✐❞❡ ❏❙ ♦♥ ✶✾✾✺ ▼✐❝r♦s♦❢t ❛❞♦♣t✐♦♥ ✐♥ ✶✾✾✻ ❙t❛♥❞❛r❞✐③❛t✐♦♥ ✶✾✾✼✕✷✵✶✶ ◆♦✇✱ ♦♥❡ ♦❢ ♠♦st ♣♦♣✉❧❛r ✇❡❜ ❧❛♥❣✉❛❣❡s✱ t❤❛♥❦s t♦ ❆❏❆❳ ✭✇✐❧❧ ❞♦ ❧❛t❡r✮

❈❙✸✼✵✱ ●ü♥❛② ✭❊♠♦r②✮ ❏❛✈❛❙❝r✐♣t ❙♣r✐♥❣ ✷✵✶✺ ✼ ✴ ✷✸

slide-17
SLIDE 17

❇r✐❡❢ ❍✐st♦r② ♦❢ ❏❛✈❛❙❝r✐♣t

❤tt♣✿✴✴❡♥✳✇✐❦✐♣❡❞✐❛✳♦r❣✴✇✐❦✐✴❏❛✈❛❙❝r✐♣t★❍✐st♦r② ❇✐rt❤ ❛t ◆❡ts❝❛♣❡✿ ❛❞✈❛♥t❛❣❡ ♦✈❡r ▼✐❝r♦s♦❢t ■♥t❡r♥❡t ❊①♣❧♦r❡r ■s ✐t ❝♦♠♣✐❧❡❞❄ ◆♦✱ ✐♥t❡r♣r❡t❡❞ ❧❛♥❣✉❛❣❡✳ ■s ✐t ❏❛✈❛❄ ◆♦✱ ✐♥s♣✐r❡❞ ❜② ✐t✳ ✿✮ ◆❛♠✐♥❣ ✇❛s ❝♦♥❢✉s✐♥❣✱ ♠❛②❜❡ ◆❡ts❝❛♣❡ ✇❛♥t❡❞ t♦ r✐❞❡ ♦♥ t❤❡ ❢❛♠❡ ♦❢ ❏❛✈❛✱ ✇❤✐❝❤ ✇❛s ❤♦t ❛♥❞ ♥❡✇ t❤❡♥✳ ❆♣♣❡❛r❡❞ ✜rst ❛s ▼♦❝❤❛✴▲✐✈❡❙❝r✐♣t ✐♥ ◆❡ts❝❛♣❡ ◆❛✈✐❣❛t♦r ✷✳✵ ✐♥ ❙❡♣t❡♠❜❡r ✶✾✾✺ ❙❡r✈❡r✲s✐❞❡ ❏❙ ♦♥ ✶✾✾✺ ▼✐❝r♦s♦❢t ❛❞♦♣t✐♦♥ ✐♥ ✶✾✾✻ ❙t❛♥❞❛r❞✐③❛t✐♦♥ ✶✾✾✼✕✷✵✶✶ ◆♦✇✱ ♦♥❡ ♦❢ ♠♦st ♣♦♣✉❧❛r ✇❡❜ ❧❛♥❣✉❛❣❡s✱ t❤❛♥❦s t♦ ❆❏❆❳ ✭✇✐❧❧ ❞♦ ❧❛t❡r✮

❈❙✸✼✵✱ ●ü♥❛② ✭❊♠♦r②✮ ❏❛✈❛❙❝r✐♣t ❙♣r✐♥❣ ✷✵✶✺ ✼ ✴ ✷✸

slide-18
SLIDE 18

❇r✐❡❢ ❍✐st♦r② ♦❢ ❏❛✈❛❙❝r✐♣t

❤tt♣✿✴✴❡♥✳✇✐❦✐♣❡❞✐❛✳♦r❣✴✇✐❦✐✴❏❛✈❛❙❝r✐♣t★❍✐st♦r② ❇✐rt❤ ❛t ◆❡ts❝❛♣❡✿ ❛❞✈❛♥t❛❣❡ ♦✈❡r ▼✐❝r♦s♦❢t ■♥t❡r♥❡t ❊①♣❧♦r❡r ■s ✐t ❝♦♠♣✐❧❡❞❄ ◆♦✱ ✐♥t❡r♣r❡t❡❞ ❧❛♥❣✉❛❣❡✳ ■s ✐t ❏❛✈❛❄ ◆♦✱ ✐♥s♣✐r❡❞ ❜② ✐t✳ ✿✮ ◆❛♠✐♥❣ ✇❛s ❝♦♥❢✉s✐♥❣✱ ♠❛②❜❡ ◆❡ts❝❛♣❡ ✇❛♥t❡❞ t♦ r✐❞❡ ♦♥ t❤❡ ❢❛♠❡ ♦❢ ❏❛✈❛✱ ✇❤✐❝❤ ✇❛s ❤♦t ❛♥❞ ♥❡✇ t❤❡♥✳ ❆♣♣❡❛r❡❞ ✜rst ❛s ▼♦❝❤❛✴▲✐✈❡❙❝r✐♣t ✐♥ ◆❡ts❝❛♣❡ ◆❛✈✐❣❛t♦r ✷✳✵ ✐♥ ❙❡♣t❡♠❜❡r ✶✾✾✺ ❙❡r✈❡r✲s✐❞❡ ❏❙ ♦♥ ✶✾✾✺ ▼✐❝r♦s♦❢t ❛❞♦♣t✐♦♥ ✐♥ ✶✾✾✻ ❙t❛♥❞❛r❞✐③❛t✐♦♥ ✶✾✾✼✕✷✵✶✶ ◆♦✇✱ ♦♥❡ ♦❢ ♠♦st ♣♦♣✉❧❛r ✇❡❜ ❧❛♥❣✉❛❣❡s✱ t❤❛♥❦s t♦ ❆❏❆❳ ✭✇✐❧❧ ❞♦ ❧❛t❡r✮

❈❙✸✼✵✱ ●ü♥❛② ✭❊♠♦r②✮ ❏❛✈❛❙❝r✐♣t ❙♣r✐♥❣ ✷✵✶✺ ✼ ✴ ✷✸

slide-19
SLIDE 19

❇r✐❡❢ ❍✐st♦r② ♦❢ ❏❛✈❛❙❝r✐♣t

❤tt♣✿✴✴❡♥✳✇✐❦✐♣❡❞✐❛✳♦r❣✴✇✐❦✐✴❏❛✈❛❙❝r✐♣t★❍✐st♦r② ❇✐rt❤ ❛t ◆❡ts❝❛♣❡✿ ❛❞✈❛♥t❛❣❡ ♦✈❡r ▼✐❝r♦s♦❢t ■♥t❡r♥❡t ❊①♣❧♦r❡r ■s ✐t ❝♦♠♣✐❧❡❞❄ ◆♦✱ ✐♥t❡r♣r❡t❡❞ ❧❛♥❣✉❛❣❡✳ ■s ✐t ❏❛✈❛❄ ◆♦✱ ✐♥s♣✐r❡❞ ❜② ✐t✳ ✿✮ ◆❛♠✐♥❣ ✇❛s ❝♦♥❢✉s✐♥❣✱ ♠❛②❜❡ ◆❡ts❝❛♣❡ ✇❛♥t❡❞ t♦ r✐❞❡ ♦♥ t❤❡ ❢❛♠❡ ♦❢ ❏❛✈❛✱ ✇❤✐❝❤ ✇❛s ❤♦t ❛♥❞ ♥❡✇ t❤❡♥✳ ❆♣♣❡❛r❡❞ ✜rst ❛s ▼♦❝❤❛✴▲✐✈❡❙❝r✐♣t ✐♥ ◆❡ts❝❛♣❡ ◆❛✈✐❣❛t♦r ✷✳✵ ✐♥ ❙❡♣t❡♠❜❡r ✶✾✾✺ ❙❡r✈❡r✲s✐❞❡ ❏❙ ♦♥ ✶✾✾✺ ▼✐❝r♦s♦❢t ❛❞♦♣t✐♦♥ ✐♥ ✶✾✾✻ ❙t❛♥❞❛r❞✐③❛t✐♦♥ ✶✾✾✼✕✷✵✶✶ ◆♦✇✱ ♦♥❡ ♦❢ ♠♦st ♣♦♣✉❧❛r ✇❡❜ ❧❛♥❣✉❛❣❡s✱ t❤❛♥❦s t♦ ❆❏❆❳ ✭✇✐❧❧ ❞♦ ❧❛t❡r✮

❈❙✸✼✵✱ ●ü♥❛② ✭❊♠♦r②✮ ❏❛✈❛❙❝r✐♣t ❙♣r✐♥❣ ✷✵✶✺ ✼ ✴ ✷✸

slide-20
SLIDE 20

■♥t❡r♠✐ss✐♦♥

slide-21
SLIDE 21

Where we are

  • Server-side programming (all processing done by

server, on http request from browser:

– Python + MySQL – Django

Client-side programming (some processing done by browser)

JavaScript JQuery

4/3/2012 CS 370, Spring 2012 2

slide-22
SLIDE 22

Client-side programming

  • recall: server-side is good for developing static pages

– can specify text/image layout, presentation, links, … – Web page looks the same each time it is accessed – in order to develop interactive/reactive pages, must integrate programming

3

Client-side programming programs are written in a separate programming language e.g., JavaScript, JScript, VBScript programs are embedded in the HTML of a Web page, with tags to identify the program component e.g., <script type="text/javascript"> … </script> the browser executes the program as it loads the page, integrating the dynamic output of the program with the static content of HTML

slide-23
SLIDE 23

Common scripting tasks

  • adding dynamic features to Web pages

– validation of form data – image rollovers – time-sensitive or random page elements – handling cookies

  • defining programs with Web interfaces

4

defining programs with Web interfaces

– utilize buttons, text boxes, clickable images, prompts, frames

slide-24
SLIDE 24

JavaScript

  • JavaScript code can be embedded in a Web page using SCRIPT tags

– the output of JavaScript code is displayed as if directly entered in HTML

<html> <head> <title>JavaScript Page</title> </head> <body>

document.write

  • 5

<body> <script type="text/javascript"> // silly code to demonstrate output document.write("Hello world!"); </script> <p>Here is some static text as well. </p> </body> </html>

  • ! ;

!" !

//

  • /*…*/
slide-25
SLIDE 25

❏❙ ✇♦r❦s ✇✐t❤✐♥ t❤❡ ❜r♦✇s❡r

▼♦❞✐❢② ✇❡❜ ♣❛❣❡s ✉s✐♥❣ ❞♦❝✉♠❡♥t ♦❜❥❡❝t ♠♦❞❡❧ ✭❉❖▼✮ ▼♦st ❝♦♠♠♦♥❧② ✉s❡❞✿

◮ ❞♦❝✉♠❡♥t✳✇r✐t❡✭✮ ◮ ❞♦❝✉♠❡♥t✳❣❡t❊❧❡♠❡♥t❇②■❞✭✮

❲✸❙❝❤♦♦❧s ❏❛✈❛❙❝r✐♣t ❍❚▼▲ ❉❖▼ t✉t♦r✐❛❧ ❙♦✉r❝❡ ♦❢ ❛❧❧ ❦♥♦✇♥ ❦♥♦✇❧❡❞❣❡✿ ▼♦③✐❧❧❛ ❉❡✈❡❧♦♣❡r ◆❡t✇♦r❦ ❉❖▼ ♣❛❣❡✱ ✐♥❝❧✉❞❡s✿

◮ ❉❖▼ r❡❢❡r❡♥❝❡ ✭❡✳❣✳✱ ❞♦❝✉♠❡♥t✮ ❈❙✸✼✵✱ ●ü♥❛② ✭❊♠♦r②✮ ❏❛✈❛❙❝r✐♣t ❙♣r✐♥❣ ✷✵✶✺ ✾ ✴ ✷✸

slide-26
SLIDE 26

❨♦✉r ❜r♦✇s❡r ✐s ②♦✉r ❏❙ ❞❡❜✉❣❣❡r✦

slide-27
SLIDE 27

❨♦✉r ❜r♦✇s❡r ✐s ②♦✉r ❏❙ ❞❡❜✉❣❣❡r✦

slide-28
SLIDE 28

JavaScript done “right”: JQuery

  • Portable, robust, mature.
  • Get it here: http://docs.jquery.com/Downloading_jQuery
  • Use like any other library:

<html> <html> <head> <script type="text/javascript" src="jquery.js"> </script> </head> … </html>

4/3/2012 CS 370, Spring 2012 17

slide-29
SLIDE 29

The Document Ready Function

  • Pattern:

$(document).ready(function(){ // jQuery functions go here... });

  • Prevent any jQuery code from running before the

document is finished loading (is ready).

4/3/2012 CS 370, Spring 2012 18

slide-30
SLIDE 30

jQuery Selectors

  • jQuery syntax is made for selecting HTML elements and

perform some action on the element(s).

  • Basic syntax is: $(selector).action()

– A dollar sign to define jQuery – A (selector) to "query (or find)" HTML elements – A (selector) to "query (or find)" HTML elements – A jQuery action() to be performed on the element(s)

  • Examples:

– $(this).hide() - hides current element – $("p").hide() - hides all paragraphs – $("p.test").hide() - hides all paragraphs with class="test" – $("#test").hide() - hides the element with id="test"

4/3/2012 CS 370, Spring 2012 19

slide-31
SLIDE 31

Element Selection: Continued

  • Element Selectors

– $("p") selects all <p> elements. – $("p.intro") selects all <p> elements with class="intro". – $("p#demo") selects all <p> elements with id="demo".

  • Attribute Selectors

– jQuery uses XPath expressions to select elements with given attributes. $("[href]") select all elements with an href attribute. – $("[href]") select all elements with an href attribute. – $("[href='#']") select all elements with an href value equal to "#". – $("[href!='#']") select all elements with an href attribute NOT equal to "#". – $("[href$='.jpg']") select all elements with an href attribute that ends with ".jpg".

  • W3C Selector Tester:

http://www.w3schools.com/jquery/jquery_ref_selectors.asp

http://www.w3schools.com/jquery/trysel.asp?filename=trysel_basic&jqsel=p.intro,%23choose 4/3/2012 CS 370, Spring 2012 20

slide-32
SLIDE 32
slide-33
SLIDE 33
slide-34
SLIDE 34
slide-35
SLIDE 35

Resources

  • JavaScript tutorial: http://www.w3schools.com/js/
  • JQuery tutorial: http://www.w3schools.com/jquery/default.asp

4/3/2012 CS 370, Spring 2012 22

slide-36
SLIDE 36

❆❏❆❳✿ ❋r♦♠ t❤❡ ❈❧✐❡♥t✲s✐❞❡ ✇✐t❤ ❏❛✈❛❙❝r✐♣t✱ ❇❛❝❦ t♦ t❤❡ ❙❡r✈❡r

❆s②♥❝❤r♦♥♦✉s s❡r✈❡r ❝❛❧❧s ❛♥❞ r❡❧❛t❡❞ t❡❝❤♥♦❧♦❣✐❡s ❈❙✸✼✵ ❙♦❢t✇❛r❡ ✫ ❙t❛rt✉♣ ❊♥❣✐♥❡❡r✐♥❣ Pr❛❝t✐❝✉♠✱ ❈❡♥❣✐③ ●ü♥❛② ✭❙♦♠❡ s❧✐❞❡s ❝♦✉rt❡s② ♦❢ ❊✉❣❡♥❡ ❆❣✐❝❤st❡✐♥ ❛♥❞ t❤❡ ■♥t❡r♥❡ts✳ ▲✐❝❡♥s❡✿ ❈❈ ❇❨✲❙❆ ✹✳✵✳✮

❈❙✸✼✵✱ ●ü♥❛② ✭❊♠♦r②✮ ❆❏❆❳ ❙♣r✐♥❣ ✷✵✶✺ ✶✸ ✴ ✷✸

slide-37
SLIDE 37

❇r✐❡❢ ❍✐st♦r② ♦❢ ❆❏❆❳

❤tt♣✿✴✴❡♥✳✇✐❦✐♣❡❞✐❛✳♦r❣✴✇✐❦✐✴❆❥❛①❴✪✷✽♣r♦❣r❛♠♠✐♥❣✪✷✾★❍✐st♦r② ✶✾✾✵s✱ ✇❡❜s✐t❡s ❛r❡ s❧♦✇ ❜❡❝❛✉s❡ ♦❢ ❢✉❧❧ ♣❛❣❡ ❧♦❛❞s ✶✾✾✻✱ ▼✐❝r♦s♦❢t ■♥t❡r♥❡t ❊①♣❧♦r❡r ✐♥tr♦❞✉❝❡s t❤❡ ✐❢r❛♠❡ t❛❣ ✶✾✾✽✱ ▼✐❝r♦s♦❢t ❖✉t❧♦♦❦ ❲❡❜ ❆❝❝❡ss t❡❛♠ ✐♠♣❧❡♠❡♥t❡❞ t❤❡ ✜rst ❝♦♠♣♦♥❡♥t ❳▼▲❍❚❚P ❜② ❝❧✐❡♥t s❝r✐♣t✳ ✶✾✾✾✱ ▼✐❝r♦s♦❢t ✉s❡❞ ✐ts ✐❢r❛♠❡ t❡❝❤♥♦❧♦❣② t♦ ❞②♥❛♠✐❝❛❧❧② ✉♣❞❛t❡ t❤❡ ♥❡✇s st♦r✐❡s ❛♥❞ st♦❝❦ q✉♦t❡s ♦♥ t❤❡ ❞❡❢❛✉❧t ♣❛❣❡ ❢♦r ■♥t❡r♥❡t ❊①♣❧♦r❡r✱ ❛♥❞ ❝r❡❛t❡❞ t❤❡ ❳▼▲❍❚❚P ❆❝t✐✈❡❳ ❝♦♥tr♦❧ ✐♥ ■♥t❡r♥❡t ❊①♣❧♦r❡r ✺ ❆❞♦♣t❡❞ ❜② ▼♦③✐❧❧❛✱ ❙❛❢❛r✐✱ ❖♣❡r❛ ❛♥❞ ♦t❤❡r ❜r♦✇s❡rs ❛s t❤❡ ❳▼▲❍tt♣❘❡q✉❡st ❏❛✈❛❙❝r✐♣t ♦❜❥❡❝t✳ ❆❏❆❳ st✐❧❧ ♦❜s❝✉r❡ ✉♥t✐❧ ❖✉t❧♦♦❦ ❲❡❜ ❆❝❝❡ss ✭✷✵✵✵✮ ❛♥❞ ❖❞❞♣♦st ✭✷✵✵✷✮✱ ●♦♦❣❧❡✬s ❝r♦ss ❜r♦✇s❡r ❆❥❛① ✇✐t❤ ●♠❛✐❧ ✭✷✵✵✹✮ ❛♥❞ ●♦♦❣❧❡ ▼❛♣s ✭✷✵✵✺✮✳ ❲❤❛t✬s t❤❡ ❜✐❣ ❞❡❛❧❄

❈❙✸✼✵✱ ●ü♥❛② ✭❊♠♦r②✮ ❆❏❆❳ ❙♣r✐♥❣ ✷✵✶✺ ✶✹ ✴ ✷✸

slide-38
SLIDE 38

❇r✐❡❢ ❍✐st♦r② ♦❢ ❆❏❆❳

❤tt♣✿✴✴❡♥✳✇✐❦✐♣❡❞✐❛✳♦r❣✴✇✐❦✐✴❆❥❛①❴✪✷✽♣r♦❣r❛♠♠✐♥❣✪✷✾★❍✐st♦r② ✶✾✾✵s✱ ✇❡❜s✐t❡s ❛r❡ s❧♦✇ ❜❡❝❛✉s❡ ♦❢ ❢✉❧❧ ♣❛❣❡ ❧♦❛❞s ✶✾✾✻✱ ▼✐❝r♦s♦❢t ■♥t❡r♥❡t ❊①♣❧♦r❡r ✐♥tr♦❞✉❝❡s t❤❡ ✐❢r❛♠❡ t❛❣ ✶✾✾✽✱ ▼✐❝r♦s♦❢t ❖✉t❧♦♦❦ ❲❡❜ ❆❝❝❡ss t❡❛♠ ✐♠♣❧❡♠❡♥t❡❞ t❤❡ ✜rst ❝♦♠♣♦♥❡♥t ❳▼▲❍❚❚P ❜② ❝❧✐❡♥t s❝r✐♣t✳ ✶✾✾✾✱ ▼✐❝r♦s♦❢t ✉s❡❞ ✐ts ✐❢r❛♠❡ t❡❝❤♥♦❧♦❣② t♦ ❞②♥❛♠✐❝❛❧❧② ✉♣❞❛t❡ t❤❡ ♥❡✇s st♦r✐❡s ❛♥❞ st♦❝❦ q✉♦t❡s ♦♥ t❤❡ ❞❡❢❛✉❧t ♣❛❣❡ ❢♦r ■♥t❡r♥❡t ❊①♣❧♦r❡r✱ ❛♥❞ ❝r❡❛t❡❞ t❤❡ ❳▼▲❍❚❚P ❆❝t✐✈❡❳ ❝♦♥tr♦❧ ✐♥ ■♥t❡r♥❡t ❊①♣❧♦r❡r ✺ ❆❞♦♣t❡❞ ❜② ▼♦③✐❧❧❛✱ ❙❛❢❛r✐✱ ❖♣❡r❛ ❛♥❞ ♦t❤❡r ❜r♦✇s❡rs ❛s t❤❡ ❳▼▲❍tt♣❘❡q✉❡st ❏❛✈❛❙❝r✐♣t ♦❜❥❡❝t✳ ❆❏❆❳ st✐❧❧ ♦❜s❝✉r❡ ✉♥t✐❧ ❖✉t❧♦♦❦ ❲❡❜ ❆❝❝❡ss ✭✷✵✵✵✮ ❛♥❞ ❖❞❞♣♦st ✭✷✵✵✷✮✱ ●♦♦❣❧❡✬s ❝r♦ss ❜r♦✇s❡r ❆❥❛① ✇✐t❤ ●♠❛✐❧ ✭✷✵✵✹✮ ❛♥❞ ●♦♦❣❧❡ ▼❛♣s ✭✷✵✵✺✮✳ ❲❤❛t✬s t❤❡ ❜✐❣ ❞❡❛❧❄

❈❙✸✼✵✱ ●ü♥❛② ✭❊♠♦r②✮ ❆❏❆❳ ❙♣r✐♥❣ ✷✵✶✺ ✶✹ ✴ ✷✸

slide-39
SLIDE 39

❇r✐❡❢ ❍✐st♦r② ♦❢ ❆❏❆❳

❤tt♣✿✴✴❡♥✳✇✐❦✐♣❡❞✐❛✳♦r❣✴✇✐❦✐✴❆❥❛①❴✪✷✽♣r♦❣r❛♠♠✐♥❣✪✷✾★❍✐st♦r② ✶✾✾✵s✱ ✇❡❜s✐t❡s ❛r❡ s❧♦✇ ❜❡❝❛✉s❡ ♦❢ ❢✉❧❧ ♣❛❣❡ ❧♦❛❞s ✶✾✾✻✱ ▼✐❝r♦s♦❢t ■♥t❡r♥❡t ❊①♣❧♦r❡r ✐♥tr♦❞✉❝❡s t❤❡ ✐❢r❛♠❡ t❛❣ ✶✾✾✽✱ ▼✐❝r♦s♦❢t ❖✉t❧♦♦❦ ❲❡❜ ❆❝❝❡ss t❡❛♠ ✐♠♣❧❡♠❡♥t❡❞ t❤❡ ✜rst ❝♦♠♣♦♥❡♥t ❳▼▲❍❚❚P ❜② ❝❧✐❡♥t s❝r✐♣t✳ ✶✾✾✾✱ ▼✐❝r♦s♦❢t ✉s❡❞ ✐ts ✐❢r❛♠❡ t❡❝❤♥♦❧♦❣② t♦ ❞②♥❛♠✐❝❛❧❧② ✉♣❞❛t❡ t❤❡ ♥❡✇s st♦r✐❡s ❛♥❞ st♦❝❦ q✉♦t❡s ♦♥ t❤❡ ❞❡❢❛✉❧t ♣❛❣❡ ❢♦r ■♥t❡r♥❡t ❊①♣❧♦r❡r✱ ❛♥❞ ❝r❡❛t❡❞ t❤❡ ❳▼▲❍❚❚P ❆❝t✐✈❡❳ ❝♦♥tr♦❧ ✐♥ ■♥t❡r♥❡t ❊①♣❧♦r❡r ✺ ❆❞♦♣t❡❞ ❜② ▼♦③✐❧❧❛✱ ❙❛❢❛r✐✱ ❖♣❡r❛ ❛♥❞ ♦t❤❡r ❜r♦✇s❡rs ❛s t❤❡ ❳▼▲❍tt♣❘❡q✉❡st ❏❛✈❛❙❝r✐♣t ♦❜❥❡❝t✳ ❆❏❆❳ st✐❧❧ ♦❜s❝✉r❡ ✉♥t✐❧ ❖✉t❧♦♦❦ ❲❡❜ ❆❝❝❡ss ✭✷✵✵✵✮ ❛♥❞ ❖❞❞♣♦st ✭✷✵✵✷✮✱ ●♦♦❣❧❡✬s ❝r♦ss ❜r♦✇s❡r ❆❥❛① ✇✐t❤ ●♠❛✐❧ ✭✷✵✵✹✮ ❛♥❞ ●♦♦❣❧❡ ▼❛♣s ✭✷✵✵✺✮✳ ❲❤❛t✬s t❤❡ ❜✐❣ ❞❡❛❧❄

❈❙✸✼✵✱ ●ü♥❛② ✭❊♠♦r②✮ ❆❏❆❳ ❙♣r✐♥❣ ✷✵✶✺ ✶✹ ✴ ✷✸

slide-40
SLIDE 40

❇r✐❡❢ ❍✐st♦r② ♦❢ ❆❏❆❳

❤tt♣✿✴✴❡♥✳✇✐❦✐♣❡❞✐❛✳♦r❣✴✇✐❦✐✴❆❥❛①❴✪✷✽♣r♦❣r❛♠♠✐♥❣✪✷✾★❍✐st♦r② ✶✾✾✵s✱ ✇❡❜s✐t❡s ❛r❡ s❧♦✇ ❜❡❝❛✉s❡ ♦❢ ❢✉❧❧ ♣❛❣❡ ❧♦❛❞s ✶✾✾✻✱ ▼✐❝r♦s♦❢t ■♥t❡r♥❡t ❊①♣❧♦r❡r ✐♥tr♦❞✉❝❡s t❤❡ ✐❢r❛♠❡ t❛❣ ✶✾✾✽✱ ▼✐❝r♦s♦❢t ❖✉t❧♦♦❦ ❲❡❜ ❆❝❝❡ss t❡❛♠ ✐♠♣❧❡♠❡♥t❡❞ t❤❡ ✜rst ❝♦♠♣♦♥❡♥t ❳▼▲❍❚❚P ❜② ❝❧✐❡♥t s❝r✐♣t✳ ✶✾✾✾✱ ▼✐❝r♦s♦❢t ✉s❡❞ ✐ts ✐❢r❛♠❡ t❡❝❤♥♦❧♦❣② t♦ ❞②♥❛♠✐❝❛❧❧② ✉♣❞❛t❡ t❤❡ ♥❡✇s st♦r✐❡s ❛♥❞ st♦❝❦ q✉♦t❡s ♦♥ t❤❡ ❞❡❢❛✉❧t ♣❛❣❡ ❢♦r ■♥t❡r♥❡t ❊①♣❧♦r❡r✱ ❛♥❞ ❝r❡❛t❡❞ t❤❡ ❳▼▲❍❚❚P ❆❝t✐✈❡❳ ❝♦♥tr♦❧ ✐♥ ■♥t❡r♥❡t ❊①♣❧♦r❡r ✺ ❆❞♦♣t❡❞ ❜② ▼♦③✐❧❧❛✱ ❙❛❢❛r✐✱ ❖♣❡r❛ ❛♥❞ ♦t❤❡r ❜r♦✇s❡rs ❛s t❤❡ ❳▼▲❍tt♣❘❡q✉❡st ❏❛✈❛❙❝r✐♣t ♦❜❥❡❝t✳ ❆❏❆❳ st✐❧❧ ♦❜s❝✉r❡ ✉♥t✐❧ ❖✉t❧♦♦❦ ❲❡❜ ❆❝❝❡ss ✭✷✵✵✵✮ ❛♥❞ ❖❞❞♣♦st ✭✷✵✵✷✮✱ ●♦♦❣❧❡✬s ❝r♦ss ❜r♦✇s❡r ❆❥❛① ✇✐t❤ ●♠❛✐❧ ✭✷✵✵✹✮ ❛♥❞ ●♦♦❣❧❡ ▼❛♣s ✭✷✵✵✺✮✳ ❲❤❛t✬s t❤❡ ❜✐❣ ❞❡❛❧❄

❈❙✸✼✵✱ ●ü♥❛② ✭❊♠♦r②✮ ❆❏❆❳ ❙♣r✐♥❣ ✷✵✶✺ ✶✹ ✴ ✷✸

slide-41
SLIDE 41

❇r✐❡❢ ❍✐st♦r② ♦❢ ❆❏❆❳

❤tt♣✿✴✴❡♥✳✇✐❦✐♣❡❞✐❛✳♦r❣✴✇✐❦✐✴❆❥❛①❴✪✷✽♣r♦❣r❛♠♠✐♥❣✪✷✾★❍✐st♦r② ✶✾✾✵s✱ ✇❡❜s✐t❡s ❛r❡ s❧♦✇ ❜❡❝❛✉s❡ ♦❢ ❢✉❧❧ ♣❛❣❡ ❧♦❛❞s ✶✾✾✻✱ ▼✐❝r♦s♦❢t ■♥t❡r♥❡t ❊①♣❧♦r❡r ✐♥tr♦❞✉❝❡s t❤❡ ✐❢r❛♠❡ t❛❣ ✶✾✾✽✱ ▼✐❝r♦s♦❢t ❖✉t❧♦♦❦ ❲❡❜ ❆❝❝❡ss t❡❛♠ ✐♠♣❧❡♠❡♥t❡❞ t❤❡ ✜rst ❝♦♠♣♦♥❡♥t ❳▼▲❍❚❚P ❜② ❝❧✐❡♥t s❝r✐♣t✳ ✶✾✾✾✱ ▼✐❝r♦s♦❢t ✉s❡❞ ✐ts ✐❢r❛♠❡ t❡❝❤♥♦❧♦❣② t♦ ❞②♥❛♠✐❝❛❧❧② ✉♣❞❛t❡ t❤❡ ♥❡✇s st♦r✐❡s ❛♥❞ st♦❝❦ q✉♦t❡s ♦♥ t❤❡ ❞❡❢❛✉❧t ♣❛❣❡ ❢♦r ■♥t❡r♥❡t ❊①♣❧♦r❡r✱ ❛♥❞ ❝r❡❛t❡❞ t❤❡ ❳▼▲❍❚❚P ❆❝t✐✈❡❳ ❝♦♥tr♦❧ ✐♥ ■♥t❡r♥❡t ❊①♣❧♦r❡r ✺ ❆❞♦♣t❡❞ ❜② ▼♦③✐❧❧❛✱ ❙❛❢❛r✐✱ ❖♣❡r❛ ❛♥❞ ♦t❤❡r ❜r♦✇s❡rs ❛s t❤❡ ❳▼▲❍tt♣❘❡q✉❡st ❏❛✈❛❙❝r✐♣t ♦❜❥❡❝t✳ ❆❏❆❳ st✐❧❧ ♦❜s❝✉r❡ ✉♥t✐❧ ❖✉t❧♦♦❦ ❲❡❜ ❆❝❝❡ss ✭✷✵✵✵✮ ❛♥❞ ❖❞❞♣♦st ✭✷✵✵✷✮✱ ●♦♦❣❧❡✬s ❝r♦ss ❜r♦✇s❡r ❆❥❛① ✇✐t❤ ●♠❛✐❧ ✭✷✵✵✹✮ ❛♥❞ ●♦♦❣❧❡ ▼❛♣s ✭✷✵✵✺✮✳ ❲❤❛t✬s t❤❡ ❜✐❣ ❞❡❛❧❄

❈❙✸✼✵✱ ●ü♥❛② ✭❊♠♦r②✮ ❆❏❆❳ ❙♣r✐♥❣ ✷✵✶✺ ✶✹ ✴ ✷✸

slide-42
SLIDE 42

❇r✐❡❢ ❍✐st♦r② ♦❢ ❆❏❆❳

❤tt♣✿✴✴❡♥✳✇✐❦✐♣❡❞✐❛✳♦r❣✴✇✐❦✐✴❆❥❛①❴✪✷✽♣r♦❣r❛♠♠✐♥❣✪✷✾★❍✐st♦r② ✶✾✾✵s✱ ✇❡❜s✐t❡s ❛r❡ s❧♦✇ ❜❡❝❛✉s❡ ♦❢ ❢✉❧❧ ♣❛❣❡ ❧♦❛❞s ✶✾✾✻✱ ▼✐❝r♦s♦❢t ■♥t❡r♥❡t ❊①♣❧♦r❡r ✐♥tr♦❞✉❝❡s t❤❡ ✐❢r❛♠❡ t❛❣ ✶✾✾✽✱ ▼✐❝r♦s♦❢t ❖✉t❧♦♦❦ ❲❡❜ ❆❝❝❡ss t❡❛♠ ✐♠♣❧❡♠❡♥t❡❞ t❤❡ ✜rst ❝♦♠♣♦♥❡♥t ❳▼▲❍❚❚P ❜② ❝❧✐❡♥t s❝r✐♣t✳ ✶✾✾✾✱ ▼✐❝r♦s♦❢t ✉s❡❞ ✐ts ✐❢r❛♠❡ t❡❝❤♥♦❧♦❣② t♦ ❞②♥❛♠✐❝❛❧❧② ✉♣❞❛t❡ t❤❡ ♥❡✇s st♦r✐❡s ❛♥❞ st♦❝❦ q✉♦t❡s ♦♥ t❤❡ ❞❡❢❛✉❧t ♣❛❣❡ ❢♦r ■♥t❡r♥❡t ❊①♣❧♦r❡r✱ ❛♥❞ ❝r❡❛t❡❞ t❤❡ ❳▼▲❍❚❚P ❆❝t✐✈❡❳ ❝♦♥tr♦❧ ✐♥ ■♥t❡r♥❡t ❊①♣❧♦r❡r ✺ ❆❞♦♣t❡❞ ❜② ▼♦③✐❧❧❛✱ ❙❛❢❛r✐✱ ❖♣❡r❛ ❛♥❞ ♦t❤❡r ❜r♦✇s❡rs ❛s t❤❡ ❳▼▲❍tt♣❘❡q✉❡st ❏❛✈❛❙❝r✐♣t ♦❜❥❡❝t✳ ❆❏❆❳ st✐❧❧ ♦❜s❝✉r❡ ✉♥t✐❧ ❖✉t❧♦♦❦ ❲❡❜ ❆❝❝❡ss ✭✷✵✵✵✮ ❛♥❞ ❖❞❞♣♦st ✭✷✵✵✷✮✱ ●♦♦❣❧❡✬s ❝r♦ss ❜r♦✇s❡r ❆❥❛① ✇✐t❤ ●♠❛✐❧ ✭✷✵✵✹✮ ❛♥❞ ●♦♦❣❧❡ ▼❛♣s ✭✷✵✵✺✮✳ ❲❤❛t✬s t❤❡ ❜✐❣ ❞❡❛❧❄

❈❙✸✼✵✱ ●ü♥❛② ✭❊♠♦r②✮ ❆❏❆❳ ❙♣r✐♥❣ ✷✵✶✺ ✶✹ ✴ ✷✸

slide-43
SLIDE 43

❇r✐❡❢ ❍✐st♦r② ♦❢ ❆❏❆❳

❤tt♣✿✴✴❡♥✳✇✐❦✐♣❡❞✐❛✳♦r❣✴✇✐❦✐✴❆❥❛①❴✪✷✽♣r♦❣r❛♠♠✐♥❣✪✷✾★❍✐st♦r② ✶✾✾✵s✱ ✇❡❜s✐t❡s ❛r❡ s❧♦✇ ❜❡❝❛✉s❡ ♦❢ ❢✉❧❧ ♣❛❣❡ ❧♦❛❞s ✶✾✾✻✱ ▼✐❝r♦s♦❢t ■♥t❡r♥❡t ❊①♣❧♦r❡r ✐♥tr♦❞✉❝❡s t❤❡ ✐❢r❛♠❡ t❛❣ ✶✾✾✽✱ ▼✐❝r♦s♦❢t ❖✉t❧♦♦❦ ❲❡❜ ❆❝❝❡ss t❡❛♠ ✐♠♣❧❡♠❡♥t❡❞ t❤❡ ✜rst ❝♦♠♣♦♥❡♥t ❳▼▲❍❚❚P ❜② ❝❧✐❡♥t s❝r✐♣t✳ ✶✾✾✾✱ ▼✐❝r♦s♦❢t ✉s❡❞ ✐ts ✐❢r❛♠❡ t❡❝❤♥♦❧♦❣② t♦ ❞②♥❛♠✐❝❛❧❧② ✉♣❞❛t❡ t❤❡ ♥❡✇s st♦r✐❡s ❛♥❞ st♦❝❦ q✉♦t❡s ♦♥ t❤❡ ❞❡❢❛✉❧t ♣❛❣❡ ❢♦r ■♥t❡r♥❡t ❊①♣❧♦r❡r✱ ❛♥❞ ❝r❡❛t❡❞ t❤❡ ❳▼▲❍❚❚P ❆❝t✐✈❡❳ ❝♦♥tr♦❧ ✐♥ ■♥t❡r♥❡t ❊①♣❧♦r❡r ✺ ❆❞♦♣t❡❞ ❜② ▼♦③✐❧❧❛✱ ❙❛❢❛r✐✱ ❖♣❡r❛ ❛♥❞ ♦t❤❡r ❜r♦✇s❡rs ❛s t❤❡ ❳▼▲❍tt♣❘❡q✉❡st ❏❛✈❛❙❝r✐♣t ♦❜❥❡❝t✳ ❆❏❆❳ st✐❧❧ ♦❜s❝✉r❡ ✉♥t✐❧ ❖✉t❧♦♦❦ ❲❡❜ ❆❝❝❡ss ✭✷✵✵✵✮ ❛♥❞ ❖❞❞♣♦st ✭✷✵✵✷✮✱ ●♦♦❣❧❡✬s ❝r♦ss ❜r♦✇s❡r ❆❥❛① ✇✐t❤ ●♠❛✐❧ ✭✷✵✵✹✮ ❛♥❞ ●♦♦❣❧❡ ▼❛♣s ✭✷✵✵✺✮✳ ❲❤❛t✬s t❤❡ ❜✐❣ ❞❡❛❧❄

❈❙✸✼✵✱ ●ü♥❛② ✭❊♠♦r②✮ ❆❏❆❳ ❙♣r✐♥❣ ✷✵✶✺ ✶✹ ✴ ✷✸

slide-44
SLIDE 44

❙❝❡♥❡ ■✿ ▼❛❝ ❛♥❞ P❈ ❞✐♥❡ ❛t ✏❙♥❛✐❧❙❝❛♣❡✑

❆❝t♦rs✴❆❝tr❡ss❡s✿ ❈❧✐❡♥ts✿ ▼❛❝ ✫ P❈ ❙❡r✈❡r✿ ❚❤❡ ▲❛st ❆♣❛❝❤❡ ❈♦♦❦✿ ▼✐❦❡❙◗▲

slide-45
SLIDE 45
slide-46
SLIDE 46

❲❤❛t✬s ❆❏❆❳❄

❆❏❆❳✿ ❆s②♥❝❤r♦♥♦✉s ❏❛✈❛❙❝r✐♣t ❆♥❞ ❳▼▲ ❲✐❦✐♣❡❞✐❛ ♣❛❣❡ ❲✸❙❝❤♦♦❧s t✉t♦r✐❛❧ ❲❤② ❛s②♥❝❄ ❉♦❡s♥✬t ♠❛❦❡ ②♦✉ ✇❛✐t✱ ❤❛♣♣❡♥s ✐♥ ♣❛r❛❧❧❡❧

❈❙✸✼✵✱ ●ü♥❛② ✭❊♠♦r②✮ ❆❏❆❳ ❙♣r✐♥❣ ✷✵✶✺ ✶✼ ✴ ✷✸

slide-47
SLIDE 47

❲❤❛t✬s ❆❏❆❳❄

❆❏❆❳✿ ❆s②♥❝❤r♦♥♦✉s ❏❛✈❛❙❝r✐♣t ❆♥❞ ❳▼▲ ❲✐❦✐♣❡❞✐❛ ♣❛❣❡ ❲✸❙❝❤♦♦❧s t✉t♦r✐❛❧ ❲❤② ❛s②♥❝❄ ❉♦❡s♥✬t ♠❛❦❡ ②♦✉ ✇❛✐t✱ ❤❛♣♣❡♥s ✐♥ ♣❛r❛❧❧❡❧

❈❙✸✼✵✱ ●ü♥❛② ✭❊♠♦r②✮ ❆❏❆❳ ❙♣r✐♥❣ ✷✵✶✺ ✶✼ ✴ ✷✸

slide-48
SLIDE 48

❲❤❛t✬s ❆❏❆❳❄

❆❏❆❳✿ ❆s②♥❝❤r♦♥♦✉s ❏❛✈❛❙❝r✐♣t ❆♥❞ ❳▼▲ ❲✐❦✐♣❡❞✐❛ ♣❛❣❡ ❲✸❙❝❤♦♦❧s t✉t♦r✐❛❧ ❲❤② ❛s②♥❝❄ ❉♦❡s♥✬t ♠❛❦❡ ②♦✉ ✇❛✐t✱ ❤❛♣♣❡♥s ✐♥ ♣❛r❛❧❧❡❧

❈❙✸✼✵✱ ●ü♥❛② ✭❊♠♦r②✮ ❆❏❆❳ ❙♣r✐♥❣ ✷✵✶✺ ✶✼ ✴ ✷✸

slide-49
SLIDE 49

AJAX (Asynchronous Javascript + XML)

  • Uses browser’s XML support: DOM, XSLT
  • XMLHttpRequest
  • Google Maps is best-known AJAX application

4 Agichtein for Emory CS171, Spring 2008

slide-50
SLIDE 50

AJAX Design Principles

  • The browser hosts an application, not content

– Application code delivered to browser, mostly as JavaScript code

  • The server delivers data, not content

– Data may be plain text, JavaScript fragments, or XML documents

5

– Data may be plain text, JavaScript fragments, or XML documents

  • User/application interaction is continuous and fluid

– UI metaphors like drag-and-drop become possible

  • This is real coding and requires discipline

– Significant developer responsibility to manage conversational state over entire web transaction

Agichtein for Emory CS171, Spring 2008

slide-51
SLIDE 51

Basic AJAX process

6 Agichtein for Emory CS171, Spring 2008

slide-52
SLIDE 52

❊①❛♠♣❧❡ ❆❏❆❳

❲✸❙❝❤♦♦❧s✳❝♦♠ ❆❏❆❳ t✉t♦r✐❛❧ ❧✐✈❡ ❡①❛♠♣❧❡s ✭②♦✉ ❝❛♥ ❡❞✐t ❛♥❞ r✉♥ t❤❡♠✦✮✿ ❋✐rst ❡①❛♠♣❧❡ ❙✉❣❣❡st✐♦♥ ❉❛t❛❜❛s❡ ❙②♥❝ ✈s✳ ❆s②♥❝ ✭❛❧❧ ❡①❛♠♣❧❡s✮

❈❙✸✼✵✱ ●ü♥❛② ✭❊♠♦r②✮ ❆❏❆❳ ❙♣r✐♥❣ ✷✵✶✺ ✶✽ ✴ ✷✸

slide-53
SLIDE 53

❳▼▲❄ ❚❤❛t✬s ❦✐♥❞ ♦❢ ❧❛♠❡✱ ❤♦✇ ❛❜♦✉t ❏❙❖◆❄

◆❡❡❞ t♦ ♣❛rs❡ ❳▼▲❄ ■s♥✬t t❤❡r❡ ❛♥ ❡❛s✐❡r ✇❛②❄ ❨❡s✿ ❏❙❖◆✳ ❲❤❛t ✐s ✐t❄ ❏❙❖◆✿ ❏❛✈❛❙❝r✐♣t ❖❜❥❡❝t ◆♦t❛t✐♦♥ ✭❲✐❦✐♣❡❞✐❛✮ ❇❛s✐❝❛❧❧②✱ ✐t✬s ❏❙ ❝♦❞❡✿ ✈❛r ❥s♦♥ ❂ ④ ❛ttr✐❜✉t❡✿ ✬✈❛❧✉❡✬✱ ✐❞✿ ✺✽ ⑥ ♠❛❦❡s ❛ ❏❙ ♦❜❥❡❝t ✇✐t❤ ✷ ❛ttr✐❜✉t❡s✳ ❈❛♥ ❛❧s♦ ✉s❡ ❛rr❛② ♦❢ ♦❜❥❡❝ts ✭t❤✐♥❦ r❡tr✐❡✈✐♥❣ r♦✇s ❢r♦♠ ❉❇✮✿ ✈❛r ❥s♦♥ ❂ ❬ ④ ♥❛♠❡✿ ✬❝❡♥❣✐③✬✱ ✐❞✿ ✶ ⑥✱ ④ ♥❛♠❡✿ ✬❥❛♠❡s✬✱ ✐❞✿ ✷ ⑥ ❪❀ ❘❡t✉r♥ t❡①t ❢r♦♠ t❤❡ s❡r✈❡r t❤❛t ❝❛♥ ❜❡ ❞✐r❡❝t❧② ✐♥t❡r♣r❡t❡❞ ❜② ❜r♦✇s❡r✦ ◆♦ ♥❡❡❞ ❢♦r ♣❛rs✐♥❣✦

❈❙✸✼✵✱ ●ü♥❛② ✭❊♠♦r②✮ ❆❏❆❳ ❙♣r✐♥❣ ✷✵✶✺ ✶✾ ✴ ✷✸

slide-54
SLIDE 54

❳▼▲❄ ❚❤❛t✬s ❦✐♥❞ ♦❢ ❧❛♠❡✱ ❤♦✇ ❛❜♦✉t ❏❙❖◆❄

◆❡❡❞ t♦ ♣❛rs❡ ❳▼▲❄ ■s♥✬t t❤❡r❡ ❛♥ ❡❛s✐❡r ✇❛②❄ ❨❡s✿ ❏❙❖◆✳ ❲❤❛t ✐s ✐t❄ ❏❙❖◆✿ ❏❛✈❛❙❝r✐♣t ❖❜❥❡❝t ◆♦t❛t✐♦♥ ✭❲✐❦✐♣❡❞✐❛✮ ❇❛s✐❝❛❧❧②✱ ✐t✬s ❏❙ ❝♦❞❡✿ ✈❛r ❥s♦♥ ❂ ④ ❛ttr✐❜✉t❡✿ ✬✈❛❧✉❡✬✱ ✐❞✿ ✺✽ ⑥ ♠❛❦❡s ❛ ❏❙ ♦❜❥❡❝t ✇✐t❤ ✷ ❛ttr✐❜✉t❡s✳ ❈❛♥ ❛❧s♦ ✉s❡ ❛rr❛② ♦❢ ♦❜❥❡❝ts ✭t❤✐♥❦ r❡tr✐❡✈✐♥❣ r♦✇s ❢r♦♠ ❉❇✮✿ ✈❛r ❥s♦♥ ❂ ❬ ④ ♥❛♠❡✿ ✬❝❡♥❣✐③✬✱ ✐❞✿ ✶ ⑥✱ ④ ♥❛♠❡✿ ✬❥❛♠❡s✬✱ ✐❞✿ ✷ ⑥ ❪❀ ❘❡t✉r♥ t❡①t ❢r♦♠ t❤❡ s❡r✈❡r t❤❛t ❝❛♥ ❜❡ ❞✐r❡❝t❧② ✐♥t❡r♣r❡t❡❞ ❜② ❜r♦✇s❡r✦ ◆♦ ♥❡❡❞ ❢♦r ♣❛rs✐♥❣✦

❈❙✸✼✵✱ ●ü♥❛② ✭❊♠♦r②✮ ❆❏❆❳ ❙♣r✐♥❣ ✷✵✶✺ ✶✾ ✴ ✷✸

slide-55
SLIDE 55

❳▼▲❄ ❚❤❛t✬s ❦✐♥❞ ♦❢ ❧❛♠❡✱ ❤♦✇ ❛❜♦✉t ❏❙❖◆❄

◆❡❡❞ t♦ ♣❛rs❡ ❳▼▲❄ ■s♥✬t t❤❡r❡ ❛♥ ❡❛s✐❡r ✇❛②❄ ❨❡s✿ ❏❙❖◆✳ ❲❤❛t ✐s ✐t❄ ❏❙❖◆✿ ❏❛✈❛❙❝r✐♣t ❖❜❥❡❝t ◆♦t❛t✐♦♥ ✭❲✐❦✐♣❡❞✐❛✮ ❇❛s✐❝❛❧❧②✱ ✐t✬s ❏❙ ❝♦❞❡✿ ✈❛r ❥s♦♥ ❂ ④ ❛ttr✐❜✉t❡✿ ✬✈❛❧✉❡✬✱ ✐❞✿ ✺✽ ⑥ ♠❛❦❡s ❛ ❏❙ ♦❜❥❡❝t ✇✐t❤ ✷ ❛ttr✐❜✉t❡s✳ ❈❛♥ ❛❧s♦ ✉s❡ ❛rr❛② ♦❢ ♦❜❥❡❝ts ✭t❤✐♥❦ r❡tr✐❡✈✐♥❣ r♦✇s ❢r♦♠ ❉❇✮✿ ✈❛r ❥s♦♥ ❂ ❬ ④ ♥❛♠❡✿ ✬❝❡♥❣✐③✬✱ ✐❞✿ ✶ ⑥✱ ④ ♥❛♠❡✿ ✬❥❛♠❡s✬✱ ✐❞✿ ✷ ⑥ ❪❀ ❘❡t✉r♥ t❡①t ❢r♦♠ t❤❡ s❡r✈❡r t❤❛t ❝❛♥ ❜❡ ❞✐r❡❝t❧② ✐♥t❡r♣r❡t❡❞ ❜② ❜r♦✇s❡r✦ ◆♦ ♥❡❡❞ ❢♦r ♣❛rs✐♥❣✦

❈❙✸✼✵✱ ●ü♥❛② ✭❊♠♦r②✮ ❆❏❆❳ ❙♣r✐♥❣ ✷✵✶✺ ✶✾ ✴ ✷✸

slide-56
SLIDE 56

❳▼▲❄ ❚❤❛t✬s ❦✐♥❞ ♦❢ ❧❛♠❡✱ ❤♦✇ ❛❜♦✉t ❏❙❖◆❄

◆❡❡❞ t♦ ♣❛rs❡ ❳▼▲❄ ■s♥✬t t❤❡r❡ ❛♥ ❡❛s✐❡r ✇❛②❄ ❨❡s✿ ❏❙❖◆✳ ❲❤❛t ✐s ✐t❄ ❏❙❖◆✿ ❏❛✈❛❙❝r✐♣t ❖❜❥❡❝t ◆♦t❛t✐♦♥ ✭❲✐❦✐♣❡❞✐❛✮ ❇❛s✐❝❛❧❧②✱ ✐t✬s ❏❙ ❝♦❞❡✿ ✈❛r ❥s♦♥ ❂ ④ ❛ttr✐❜✉t❡✿ ✬✈❛❧✉❡✬✱ ✐❞✿ ✺✽ ⑥ ♠❛❦❡s ❛ ❏❙ ♦❜❥❡❝t ✇✐t❤ ✷ ❛ttr✐❜✉t❡s✳ ❈❛♥ ❛❧s♦ ✉s❡ ❛rr❛② ♦❢ ♦❜❥❡❝ts ✭t❤✐♥❦ r❡tr✐❡✈✐♥❣ r♦✇s ❢r♦♠ ❉❇✮✿ ✈❛r ❥s♦♥ ❂ ❬ ④ ♥❛♠❡✿ ✬❝❡♥❣✐③✬✱ ✐❞✿ ✶ ⑥✱ ④ ♥❛♠❡✿ ✬❥❛♠❡s✬✱ ✐❞✿ ✷ ⑥ ❪❀ ❘❡t✉r♥ t❡①t ❢r♦♠ t❤❡ s❡r✈❡r t❤❛t ❝❛♥ ❜❡ ❞✐r❡❝t❧② ✐♥t❡r♣r❡t❡❞ ❜② ❜r♦✇s❡r✦ ◆♦ ♥❡❡❞ ❢♦r ♣❛rs✐♥❣✦

❈❙✸✼✵✱ ●ü♥❛② ✭❊♠♦r②✮ ❆❏❆❳ ❙♣r✐♥❣ ✷✵✶✺ ✶✾ ✴ ✷✸

slide-57
SLIDE 57

❳▼▲❄ ❚❤❛t✬s ❦✐♥❞ ♦❢ ❧❛♠❡✱ ❤♦✇ ❛❜♦✉t ❏❙❖◆❄

◆❡❡❞ t♦ ♣❛rs❡ ❳▼▲❄ ■s♥✬t t❤❡r❡ ❛♥ ❡❛s✐❡r ✇❛②❄ ❨❡s✿ ❏❙❖◆✳ ❲❤❛t ✐s ✐t❄ ❏❙❖◆✿ ❏❛✈❛❙❝r✐♣t ❖❜❥❡❝t ◆♦t❛t✐♦♥ ✭❲✐❦✐♣❡❞✐❛✮ ❇❛s✐❝❛❧❧②✱ ✐t✬s ❏❙ ❝♦❞❡✿ ✈❛r ❥s♦♥ ❂ ④ ❛ttr✐❜✉t❡✿ ✬✈❛❧✉❡✬✱ ✐❞✿ ✺✽ ⑥ ♠❛❦❡s ❛ ❏❙ ♦❜❥❡❝t ✇✐t❤ ✷ ❛ttr✐❜✉t❡s✳ ❈❛♥ ❛❧s♦ ✉s❡ ❛rr❛② ♦❢ ♦❜❥❡❝ts ✭t❤✐♥❦ r❡tr✐❡✈✐♥❣ r♦✇s ❢r♦♠ ❉❇✮✿ ✈❛r ❥s♦♥ ❂ ❬ ④ ♥❛♠❡✿ ✬❝❡♥❣✐③✬✱ ✐❞✿ ✶ ⑥✱ ④ ♥❛♠❡✿ ✬❥❛♠❡s✬✱ ✐❞✿ ✷ ⑥ ❪❀ ❘❡t✉r♥ t❡①t ❢r♦♠ t❤❡ s❡r✈❡r t❤❛t ❝❛♥ ❜❡ ❞✐r❡❝t❧② ✐♥t❡r♣r❡t❡❞ ❜② ❜r♦✇s❡r✦ ◆♦ ♥❡❡❞ ❢♦r ♣❛rs✐♥❣✦

❈❙✸✼✵✱ ●ü♥❛② ✭❊♠♦r②✮ ❆❏❆❳ ❙♣r✐♥❣ ✷✵✶✺ ✶✾ ✴ ✷✸

slide-58
SLIDE 58

JSON in Ajax

  • XMLHttpRequest

– Obtain responseText – Parse the responseText

8

  • responseData = eval(
  • '(' + responseText + ')');
  • responseData =
  • responseText.parseJSON();

Agichtein for Emory CS171, Spring 2008

slide-59
SLIDE 59

❆❏❆❳ ♠❛❞❡ s✐♠♣❧❡✿ t❤❡ ❥◗✉❡r② ✇❛②

slide-60
SLIDE 60

❲❡❜ ❍❛❝❦✐♥❣ ■■✿ ❋✉♥❝t✐♦♥ ❝❛❧❧s✱ ❆❏❆❳✱ ❛♥❞ ❏❙❖◆

❏❛♠❡s ✫ ❚♦❜②✬s ❣❛♠❡ ❉❛♥❦ P❛rt② ✐s ♦♥ ❜❡t❛ t❡st✐♥❣✦ ▲❡t✬s ❤❛❝❦ t❤❡✐r ✇❡❜s✐t❡✳ ✿✮

❇r❡❛❦♣♦✐♥ts ❉❡❜✉❣❣✐♥❣

▼❛❦❡ t❤♦s❡ ❝❧✐❡♥t✲s✐❞❡ ❏❙ ❤❛❝❦s ♣❡r♠❛♥❡♥t✿ ❯❘▲✲tr✐❣❣❡r❡❞ ❜r♦✇s❡r s❝r✐♣ts ✭❡✳❣✳✱ ●r❡❛s❡▼♦♥❦❡②✱ ❯s❡r❙❝r✐♣ts✳♦r❣✱ ●r❡❛s❡❙♣♦t✱ ▼② ❇❧❛❝❦❇♦❛r❞ ❖♣t✐♠✐③❡r✮ ▲❡t✬s ❤❛❝❦ ❋❛❝❡❜♦♦❦

❯❤❤✱ ✐t✬s ❤❛r❞

❈❙✸✼✵✱ ●ü♥❛② ✭❊♠♦r②✮ ❆❏❆❳ ❙♣r✐♥❣ ✷✵✶✺ ✷✶ ✴ ✷✸

slide-61
SLIDE 61

❲❡❜ ❍❛❝❦✐♥❣ ■■✿ ❋✉♥❝t✐♦♥ ❝❛❧❧s✱ ❆❏❆❳✱ ❛♥❞ ❏❙❖◆

❏❛♠❡s ✫ ❚♦❜②✬s ❣❛♠❡ ❉❛♥❦ P❛rt② ✐s ♦♥ ❜❡t❛ t❡st✐♥❣✦ ▲❡t✬s ❤❛❝❦ t❤❡✐r ✇❡❜s✐t❡✳ ✿✮

◮ ❇r❡❛❦♣♦✐♥ts ◮ ❉❡❜✉❣❣✐♥❣

▼❛❦❡ t❤♦s❡ ❝❧✐❡♥t✲s✐❞❡ ❏❙ ❤❛❝❦s ♣❡r♠❛♥❡♥t✿ ❯❘▲✲tr✐❣❣❡r❡❞ ❜r♦✇s❡r s❝r✐♣ts ✭❡✳❣✳✱ ●r❡❛s❡▼♦♥❦❡②✱ ❯s❡r❙❝r✐♣ts✳♦r❣✱ ●r❡❛s❡❙♣♦t✱ ▼② ❇❧❛❝❦❇♦❛r❞ ❖♣t✐♠✐③❡r✮ ▲❡t✬s ❤❛❝❦ ❋❛❝❡❜♦♦❦

❯❤❤✱ ✐t✬s ❤❛r❞

❈❙✸✼✵✱ ●ü♥❛② ✭❊♠♦r②✮ ❆❏❆❳ ❙♣r✐♥❣ ✷✵✶✺ ✷✶ ✴ ✷✸

slide-62
SLIDE 62

❲❡❜ ❍❛❝❦✐♥❣ ■■✿ ❋✉♥❝t✐♦♥ ❝❛❧❧s✱ ❆❏❆❳✱ ❛♥❞ ❏❙❖◆

❏❛♠❡s ✫ ❚♦❜②✬s ❣❛♠❡ ❉❛♥❦ P❛rt② ✐s ♦♥ ❜❡t❛ t❡st✐♥❣✦ ▲❡t✬s ❤❛❝❦ t❤❡✐r ✇❡❜s✐t❡✳ ✿✮

◮ ❇r❡❛❦♣♦✐♥ts ◮ ❉❡❜✉❣❣✐♥❣

▼❛❦❡ t❤♦s❡ ❝❧✐❡♥t✲s✐❞❡ ❏❙ ❤❛❝❦s ♣❡r♠❛♥❡♥t✿ ❯❘▲✲tr✐❣❣❡r❡❞ ❜r♦✇s❡r s❝r✐♣ts ✭❡✳❣✳✱ ●r❡❛s❡▼♦♥❦❡②✱ ❯s❡r❙❝r✐♣ts✳♦r❣✱ ●r❡❛s❡❙♣♦t✱ ▼② ❇❧❛❝❦❇♦❛r❞ ❖♣t✐♠✐③❡r✮ ▲❡t✬s ❤❛❝❦ ❋❛❝❡❜♦♦❦

❯❤❤✱ ✐t✬s ❤❛r❞

❈❙✸✼✵✱ ●ü♥❛② ✭❊♠♦r②✮ ❆❏❆❳ ❙♣r✐♥❣ ✷✵✶✺ ✷✶ ✴ ✷✸

slide-63
SLIDE 63

❲❡❜ ❍❛❝❦✐♥❣ ■■✿ ❋✉♥❝t✐♦♥ ❝❛❧❧s✱ ❆❏❆❳✱ ❛♥❞ ❏❙❖◆

❏❛♠❡s ✫ ❚♦❜②✬s ❣❛♠❡ ❉❛♥❦ P❛rt② ✐s ♦♥ ❜❡t❛ t❡st✐♥❣✦ ▲❡t✬s ❤❛❝❦ t❤❡✐r ✇❡❜s✐t❡✳ ✿✮

◮ ❇r❡❛❦♣♦✐♥ts ◮ ❉❡❜✉❣❣✐♥❣

▼❛❦❡ t❤♦s❡ ❝❧✐❡♥t✲s✐❞❡ ❏❙ ❤❛❝❦s ♣❡r♠❛♥❡♥t✿ ❯❘▲✲tr✐❣❣❡r❡❞ ❜r♦✇s❡r s❝r✐♣ts ✭❡✳❣✳✱ ●r❡❛s❡▼♦♥❦❡②✱ ❯s❡r❙❝r✐♣ts✳♦r❣✱ ●r❡❛s❡❙♣♦t✱ ▼② ❇❧❛❝❦❇♦❛r❞ ❖♣t✐♠✐③❡r✮ ▲❡t✬s ❤❛❝❦ ❋❛❝❡❜♦♦❦

❯❤❤✱ ✐t✬s ❤❛r❞

❈❙✸✼✵✱ ●ü♥❛② ✭❊♠♦r②✮ ❆❏❆❳ ❙♣r✐♥❣ ✷✵✶✺ ✷✶ ✴ ✷✸

slide-64
SLIDE 64

❲❡❜ ❍❛❝❦✐♥❣ ■■✿ ❋✉♥❝t✐♦♥ ❝❛❧❧s✱ ❆❏❆❳✱ ❛♥❞ ❏❙❖◆

❏❛♠❡s ✫ ❚♦❜②✬s ❣❛♠❡ ❉❛♥❦ P❛rt② ✐s ♦♥ ❜❡t❛ t❡st✐♥❣✦ ▲❡t✬s ❤❛❝❦ t❤❡✐r ✇❡❜s✐t❡✳ ✿✮

◮ ❇r❡❛❦♣♦✐♥ts ◮ ❉❡❜✉❣❣✐♥❣

▼❛❦❡ t❤♦s❡ ❝❧✐❡♥t✲s✐❞❡ ❏❙ ❤❛❝❦s ♣❡r♠❛♥❡♥t✿ ❯❘▲✲tr✐❣❣❡r❡❞ ❜r♦✇s❡r s❝r✐♣ts ✭❡✳❣✳✱ ●r❡❛s❡▼♦♥❦❡②✱ ❯s❡r❙❝r✐♣ts✳♦r❣✱ ●r❡❛s❡❙♣♦t✱ ▼② ❇❧❛❝❦❇♦❛r❞ ❖♣t✐♠✐③❡r✮ ▲❡t✬s ❤❛❝❦ ❋❛❝❡❜♦♦❦

◮ ❯❤❤✱ ✐t✬s ❤❛r❞ ❈❙✸✼✵✱ ●ü♥❛② ✭❊♠♦r②✮ ❆❏❆❳ ❙♣r✐♥❣ ✷✵✶✺ ✷✶ ✴ ✷✸

slide-65
SLIDE 65

❙t♦♣ t❡❧❧✐♥❣ ✉s ❛❜♦✉t ✷✵✵✺✦ ❲❤❛t✬s ❤❛♣♣❡♥✐♥❣ ♥♦✇❄

❏❙❖◆P✿ ✏❏❙❖◆ ✇✐t❤ ♣❛❞❞✐♥❣✑ ❢♦r ❝r♦ss✲❞♦♠❛✐♥ s❝r✐♣t✐♥❣ r❡st❢❜✿ ❋❛❝❡❜♦♦❦ ❆P■

❲❤② ✐s ✐t ❝❛❧❧❡❞ r❡st❢❜❄

❘❊❙❚✿ ❘❡♣r❡s❡♥t❛t✐♦♥❛❧ st❛t❡ tr❛♥s❢❡r

❝❧✐❡♥t✲s❡r✈❡r st❛t❡❧❡ss ❝❛❝❤❡❛❜❧❡ ❧❛②❡r❡❞

❲❤❛t ❡❧s❡ ✐s ❤❛♣♣❡♥✐♥❣ ✇✐t❤ ❏❛✈❛❙❝r✐♣t❄

❈♦♥✈❡rt✐♥❣ ❢r♦♠ ♦t❤❡r ❧❛♥❣✉❛❣❡s✿ ♣②t❤♦♥✱ r✉❜②✱ ❡t❝ ❋r❛♠❡✇♦r❦s✿ ❆♥❣✉❧❛r❏❙✱ ●♦♦❣❧❡ ❲❡❜ ❚♦♦❧❦✐t✱ ❊♠❜❡r❏❙ ✭❝♦♠♣❛r✐s♦♥✮

❈❙✸✼✵✱ ●ü♥❛② ✭❊♠♦r②✮ ❆❏❆❳ ❙♣r✐♥❣ ✷✵✶✺ ✷✷ ✴ ✷✸

slide-66
SLIDE 66

❙t♦♣ t❡❧❧✐♥❣ ✉s ❛❜♦✉t ✷✵✵✺✦ ❲❤❛t✬s ❤❛♣♣❡♥✐♥❣ ♥♦✇❄

❏❙❖◆P✿ ✏❏❙❖◆ ✇✐t❤ ♣❛❞❞✐♥❣✑ ❢♦r ❝r♦ss✲❞♦♠❛✐♥ s❝r✐♣t✐♥❣ r❡st❢❜✿ ❋❛❝❡❜♦♦❦ ❆P■

◮ ❲❤② ✐s ✐t ❝❛❧❧❡❞ r❡st❢❜❄

❘❊❙❚✿ ❘❡♣r❡s❡♥t❛t✐♦♥❛❧ st❛t❡ tr❛♥s❢❡r

❝❧✐❡♥t✲s❡r✈❡r st❛t❡❧❡ss ❝❛❝❤❡❛❜❧❡ ❧❛②❡r❡❞

❲❤❛t ❡❧s❡ ✐s ❤❛♣♣❡♥✐♥❣ ✇✐t❤ ❏❛✈❛❙❝r✐♣t❄

❈♦♥✈❡rt✐♥❣ ❢r♦♠ ♦t❤❡r ❧❛♥❣✉❛❣❡s✿ ♣②t❤♦♥✱ r✉❜②✱ ❡t❝ ❋r❛♠❡✇♦r❦s✿ ❆♥❣✉❧❛r❏❙✱ ●♦♦❣❧❡ ❲❡❜ ❚♦♦❧❦✐t✱ ❊♠❜❡r❏❙ ✭❝♦♠♣❛r✐s♦♥✮

❈❙✸✼✵✱ ●ü♥❛② ✭❊♠♦r②✮ ❆❏❆❳ ❙♣r✐♥❣ ✷✵✶✺ ✷✷ ✴ ✷✸

slide-67
SLIDE 67

❙t♦♣ t❡❧❧✐♥❣ ✉s ❛❜♦✉t ✷✵✵✺✦ ❲❤❛t✬s ❤❛♣♣❡♥✐♥❣ ♥♦✇❄

❏❙❖◆P✿ ✏❏❙❖◆ ✇✐t❤ ♣❛❞❞✐♥❣✑ ❢♦r ❝r♦ss✲❞♦♠❛✐♥ s❝r✐♣t✐♥❣ r❡st❢❜✿ ❋❛❝❡❜♦♦❦ ❆P■

◮ ❲❤② ✐s ✐t ❝❛❧❧❡❞ r❡st❢❜❄

❘❊❙❚✿ ❘❡♣r❡s❡♥t❛t✐♦♥❛❧ st❛t❡ tr❛♥s❢❡r

◮ ❝❧✐❡♥t✲s❡r✈❡r ◮ st❛t❡❧❡ss ◮ ❝❛❝❤❡❛❜❧❡ ◮ ❧❛②❡r❡❞

❲❤❛t ❡❧s❡ ✐s ❤❛♣♣❡♥✐♥❣ ✇✐t❤ ❏❛✈❛❙❝r✐♣t❄

❈♦♥✈❡rt✐♥❣ ❢r♦♠ ♦t❤❡r ❧❛♥❣✉❛❣❡s✿ ♣②t❤♦♥✱ r✉❜②✱ ❡t❝ ❋r❛♠❡✇♦r❦s✿ ❆♥❣✉❧❛r❏❙✱ ●♦♦❣❧❡ ❲❡❜ ❚♦♦❧❦✐t✱ ❊♠❜❡r❏❙ ✭❝♦♠♣❛r✐s♦♥✮

❈❙✸✼✵✱ ●ü♥❛② ✭❊♠♦r②✮ ❆❏❆❳ ❙♣r✐♥❣ ✷✵✶✺ ✷✷ ✴ ✷✸

slide-68
SLIDE 68

❙t♦♣ t❡❧❧✐♥❣ ✉s ❛❜♦✉t ✷✵✵✺✦ ❲❤❛t✬s ❤❛♣♣❡♥✐♥❣ ♥♦✇❄

❏❙❖◆P✿ ✏❏❙❖◆ ✇✐t❤ ♣❛❞❞✐♥❣✑ ❢♦r ❝r♦ss✲❞♦♠❛✐♥ s❝r✐♣t✐♥❣ r❡st❢❜✿ ❋❛❝❡❜♦♦❦ ❆P■

◮ ❲❤② ✐s ✐t ❝❛❧❧❡❞ r❡st❢❜❄

❘❊❙❚✿ ❘❡♣r❡s❡♥t❛t✐♦♥❛❧ st❛t❡ tr❛♥s❢❡r

◮ ❝❧✐❡♥t✲s❡r✈❡r ◮ st❛t❡❧❡ss ◮ ❝❛❝❤❡❛❜❧❡ ◮ ❧❛②❡r❡❞

❲❤❛t ❡❧s❡ ✐s ❤❛♣♣❡♥✐♥❣ ✇✐t❤ ❏❛✈❛❙❝r✐♣t❄

◮ ❈♦♥✈❡rt✐♥❣ ❢r♦♠ ♦t❤❡r ❧❛♥❣✉❛❣❡s✿ ♣②t❤♦♥✱ r✉❜②✱ ❡t❝ ◮ ❋r❛♠❡✇♦r❦s✿ ❆♥❣✉❧❛r❏❙✱ ●♦♦❣❧❡ ❲❡❜ ❚♦♦❧❦✐t✱ ❊♠❜❡r❏❙ ✭❝♦♠♣❛r✐s♦♥✮ ❈❙✸✼✵✱ ●ü♥❛② ✭❊♠♦r②✮ ❆❏❆❳ ❙♣r✐♥❣ ✷✵✶✺ ✷✷ ✴ ✷✸

slide-69
SLIDE 69

◆❡①t ❡♣✐s♦❞❡

❇♦tt♦♠ t❡❛♠s ♣r❡s❡♥t✿ ♥♦ str❡ss✱ ♠❛❦❡ t❤❡ ♠♦st ♦❢ ✐t✦

  • ✉❡st ❇r✐❛♥ ❉❡❙❤♦♥❣✿ ✏❚❡st✐♥❣ ❛♥❞ ❙❡r✈❡rs ❛♥❞ ❙t❛rt✉♣s✱ ♦❤ ♠②✦✑