rt t - - PowerPoint PPT Presentation

▶
r t t
SMART_READER_LITE
LIVE PREVIEW

rt t - - PowerPoint PPT Presentation

Mar 30, 2024 487 likes •1k views

rt t ts ts r Prt ss

slide-1
SLIDE 1

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

❚❤❡ ❝❧✐❡♥t✲s✐❞❡ t❛❦❡s ♦✈❡r ❈❙ ✸✼✵ ❙❊ Pr❛❝t✐❝✉♠✱ ❈❡♥❣✐③ ●ü♥❛②

✭❙♦♠❡ s❧✐❞❡s ❝♦✉rt❡s② ♦❢ ❊✉❣❡♥❡ ❆❣✐❝❤t❡✐♥ ❛♥❞ t❤❡ ■♥t❡r♥❡ts✮ ❈❙ ✸✼✵✱ ●ü♥❛② ✭❊♠♦r②✮ ❏❛✈❛❙❝r✐♣t ❙♣r✐♥❣ ✷✵✶✹ ✶ ✴ ✶✼

slide-2
SLIDE 2

❆❣❡♥❞❛

❯♣❝♦♠✐♥❣ ♣r♦❥❡❝t ♠✐❧❡st♦♥❡s✿ ❍❛✈❡ ②♦✉ ♠❡t ✇✐t❤ ❇♦❜❄ ●✐t❍✉❜ ❛❝❝♦✉♥ts ✇❡r❡ ❞✉❡ t♦❞❛②✳ ✹✴✸✱ t❤✐s ❚❤✉rs❞❛②✱ ②♦✉ s❤♦✉❧❞ ❜❡ ❣❡tt✐♥❣ r❡❛❞② t♦ ❞❡♣❧♦②✦ ✹✴✶✵ ✐♥✲❝❧❛ss ❞❡♠♦ ❛♥❞ ❢✉♥❝t✐♦♥❛❧ ♣r♦t♦t②♣❡ ♦♣❡♥s ❢♦r t❡st✐♥❣✳

  • r❛❞✐♥❣ ✐♥❝❧✉❞❡s ✇❡❡❦❧② ♣r♦❣r❡ss✳ ◆♦ ✉♣❞❛t❡s✱ ♥♦ ♣♦✐♥ts✳

▼❛❦❡✲✉♣ ❝❧❛ss❡s✿ ❲❡❡❦❡♥❞ s❡ss✐♦♥s ❚♦❞❛②✿ ❚❤❡ ❏❛✈❛❙❝r✐♣t r❡✈♦❧✉t✐♦♥❄ ❋✐rst✱ ●✐t❍✉❜

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

slide-3
SLIDE 3

❆❣❡♥❞❛

❯♣❝♦♠✐♥❣ ♣r♦❥❡❝t ♠✐❧❡st♦♥❡s✿ ❍❛✈❡ ②♦✉ ♠❡t ✇✐t❤ ❇♦❜❄ ●✐t❍✉❜ ❛❝❝♦✉♥ts ✇❡r❡ ❞✉❡ t♦❞❛②✳ ✹✴✸✱ t❤✐s ❚❤✉rs❞❛②✱ ②♦✉ s❤♦✉❧❞ ❜❡ ❣❡tt✐♥❣ r❡❛❞② t♦ ❞❡♣❧♦②✦ ✹✴✶✵ ✐♥✲❝❧❛ss ❞❡♠♦ ❛♥❞ ❢✉♥❝t✐♦♥❛❧ ♣r♦t♦t②♣❡ ♦♣❡♥s ❢♦r t❡st✐♥❣✳

  • r❛❞✐♥❣ ✐♥❝❧✉❞❡s ✇❡❡❦❧② ♣r♦❣r❡ss✳ ◆♦ ✉♣❞❛t❡s✱ ♥♦ ♣♦✐♥ts✳

▼❛❦❡✲✉♣ ❝❧❛ss❡s✿ ❲❡❡❦❡♥❞ s❡ss✐♦♥s ❚♦❞❛②✿ ❚❤❡ ❏❛✈❛❙❝r✐♣t r❡✈♦❧✉t✐♦♥❄ ❋✐rst✱ ●✐t❍✉❜

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

slide-4
SLIDE 4

❆❣❡♥❞❛

❯♣❝♦♠✐♥❣ ♣r♦❥❡❝t ♠✐❧❡st♦♥❡s✿ ❍❛✈❡ ②♦✉ ♠❡t ✇✐t❤ ❇♦❜❄ ●✐t❍✉❜ ❛❝❝♦✉♥ts ✇❡r❡ ❞✉❡ t♦❞❛②✳ ✹✴✸✱ t❤✐s ❚❤✉rs❞❛②✱ ②♦✉ s❤♦✉❧❞ ❜❡ ❣❡tt✐♥❣ r❡❛❞② t♦ ❞❡♣❧♦②✦ ✹✴✶✵ ✐♥✲❝❧❛ss ❞❡♠♦ ❛♥❞ ❢✉♥❝t✐♦♥❛❧ ♣r♦t♦t②♣❡ ♦♣❡♥s ❢♦r t❡st✐♥❣✳

  • r❛❞✐♥❣ ✐♥❝❧✉❞❡s ✇❡❡❦❧② ♣r♦❣r❡ss✳ ◆♦ ✉♣❞❛t❡s✱ ♥♦ ♣♦✐♥ts✳

▼❛❦❡✲✉♣ ❝❧❛ss❡s✿ ❲❡❡❦❡♥❞ s❡ss✐♦♥s ❚♦❞❛②✿ ❚❤❡ ❏❛✈❛❙❝r✐♣t r❡✈♦❧✉t✐♦♥❄ ❋✐rst✱ ●✐t❍✉❜

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

slide-5
SLIDE 5

❆❣❡♥❞❛

❯♣❝♦♠✐♥❣ ♣r♦❥❡❝t ♠✐❧❡st♦♥❡s✿ ❍❛✈❡ ②♦✉ ♠❡t ✇✐t❤ ❇♦❜❄ ●✐t❍✉❜ ❛❝❝♦✉♥ts ✇❡r❡ ❞✉❡ t♦❞❛②✳ ✹✴✸✱ t❤✐s ❚❤✉rs❞❛②✱ ②♦✉ s❤♦✉❧❞ ❜❡ ❣❡tt✐♥❣ r❡❛❞② t♦ ❞❡♣❧♦②✦ ✹✴✶✵ ✐♥✲❝❧❛ss ❞❡♠♦ ❛♥❞ ❢✉♥❝t✐♦♥❛❧ ♣r♦t♦t②♣❡ ♦♣❡♥s ❢♦r t❡st✐♥❣✳

  • r❛❞✐♥❣ ✐♥❝❧✉❞❡s ✇❡❡❦❧② ♣r♦❣r❡ss✳ ◆♦ ✉♣❞❛t❡s✱ ♥♦ ♣♦✐♥ts✳

▼❛❦❡✲✉♣ ❝❧❛ss❡s✿ ❲❡❡❦❡♥❞ s❡ss✐♦♥s ❚♦❞❛②✿ ❚❤❡ ❏❛✈❛❙❝r✐♣t r❡✈♦❧✉t✐♦♥❄ ❋✐rst✱ ●✐t❍✉❜

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

slide-6
SLIDE 6
  • ✐t❍✉❜ ✉s❛❣❡ ♣❛tt❡r♥ ❡①❛♠♣❧❡✿ ✷✵✹✽

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

slide-7
SLIDE 7

❙♦ ♠❛♥② ✈❛r✐❛♥ts✦

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

slide-8
SLIDE 8

❙♦ ♠❛♥② ✈❛r✐❛♥ts✦

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

slide-9
SLIDE 9

✷✵✹✽ ●✐t❍✉❜ ♣❛❣❡

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

slide-10
SLIDE 10

✷✵✹✽ ●✐t❍✉❜ ♣❛❣❡

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

slide-11
SLIDE 11

❲❤❛t✬s ❢♦r❦✐♥❣❄❄

❙t❡❛❧✐♥❣ ❢r♦♠ t❤❡✐r ♣❧❛t❡❄ ▼♦r❡ ❧✐❦❡ ❢★❅❦ ✐♥ t❤❡ r♦❛❞

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

slide-12
SLIDE 12

❲❤❛t✬s ❢♦r❦✐♥❣❄❄

❙t❡❛❧✐♥❣ ❢r♦♠ t❤❡✐r ♣❧❛t❡❄ ▼♦r❡ ❧✐❦❡ ❢★❅❦ ✐♥ t❤❡ r♦❛❞

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

slide-13
SLIDE 13
  • ✐t❍✉❜ ✉s❛❣❡ ♣❛tt❡r♥s

❈♦♠♠♦♥ ●✐t❍✉❜ ✉s❛❣❡ ♣❛tt❡r♥✿ ❢♦r❦ ✫ ♠♦❞✐❢②

✶ ❋♦r❦ ✭❝❧♦♥❡✮ s♦♠❡♦♥❡✬s ♣r♦❥❡❝t ✐♥t♦ ②♦✉r ❛❝❝♦✉♥t ✷ ▼♦❞✐❢② ❛♥❞ ♠❛❦❡ ✐t ②♦✉r ♦✇♥ ✸ ❙❤❛r❡ ✇✐t❤ ♦r✐❣✐♥❛❧ ♣r♦❥❡❝t t❤r♦✉❣❤ ✏♣✉❧❧ r❡q✉❡sts✑

❖✉r ●✐t❍✉❜ ✉s❛❣❡ ♣❛tt❡r♥✿ ♣✉s❤ ✫ ♣✉❧❧

✶ ❙❡✈❡r❛❧ ✉s❡rs ❝♦❧❧❛❜♦r❛t❡ ♦♥ s❛♠❡ r❡♣♦ ✷ ❖♣❡♥ ●✐t❍✉❜ ❛❝❝♦✉♥t ❛♥❞ ✇❡ ❛ss♦❝✐❛t❡ ②♦✉ ✇✐t❤ ♣r✐✈❛t❡ ♣r♦❥❡❝t r❡♣♦s ✸ ■♥st❛❧❧ ❧♦❝❛❧ ❝❧✐❡♥t ❣✐t ♦♥ ❲✐♥❞♦✇s✱ ▼❛❝✱ ▲✐♥✉① ✹ ❈❧♦♥❡ t❤❡ r❡♣♦ ♦♥ ②♦✉r ❧♦❝❛❧ ❝♦♠♣✉t❡r ✭❞♦♥✬t ❢♦r❦ ♦♥ ●✐t❍✉❜✦✮ ✺ ▼♦❞✐❢②✱ t❤❡♥ ♣✉s❤ ❛♥❞ ♣✉❧❧ ✻ ❈♦♠♠✉♥✐❝❛t❡ ②♦✉r ♣✉s❤❡s ✇✐t❤ ②♦✉r t❡❛♠♠❛t❡s✦ ✼ ✭❖♣t✐♦♥❛❧✮ ▼❛❦❡ ❜r❛♥❝❤❡s ❛♥❞ s✇✐t❝❤ ❜❡t✇❡❡♥ t❤❡♠ ❈❙ ✸✼✵✱ ●ü♥❛② ✭❊♠♦r②✮ ❏❛✈❛❙❝r✐♣t ❙♣r✐♥❣ ✷✵✶✹ ✽ ✴ ✶✼

slide-14
SLIDE 14
  • ✐t❍✉❜ ✉s❛❣❡ ♣❛tt❡r♥s

❈♦♠♠♦♥ ●✐t❍✉❜ ✉s❛❣❡ ♣❛tt❡r♥✿ ❢♦r❦ ✫ ♠♦❞✐❢②

✶ ❋♦r❦ ✭❝❧♦♥❡✮ s♦♠❡♦♥❡✬s ♣r♦❥❡❝t ✐♥t♦ ②♦✉r ❛❝❝♦✉♥t ✷ ▼♦❞✐❢② ❛♥❞ ♠❛❦❡ ✐t ②♦✉r ♦✇♥ ✸ ❙❤❛r❡ ✇✐t❤ ♦r✐❣✐♥❛❧ ♣r♦❥❡❝t t❤r♦✉❣❤ ✏♣✉❧❧ r❡q✉❡sts✑

❖✉r ●✐t❍✉❜ ✉s❛❣❡ ♣❛tt❡r♥✿ ♣✉s❤ ✫ ♣✉❧❧

✶ ❙❡✈❡r❛❧ ✉s❡rs ❝♦❧❧❛❜♦r❛t❡ ♦♥ s❛♠❡ r❡♣♦ ✷ ❖♣❡♥ ●✐t❍✉❜ ❛❝❝♦✉♥t ❛♥❞ ✇❡ ❛ss♦❝✐❛t❡ ②♦✉ ✇✐t❤ ♣r✐✈❛t❡ ♣r♦❥❡❝t r❡♣♦s ✸ ■♥st❛❧❧ ❧♦❝❛❧ ❝❧✐❡♥t ❣✐t ♦♥ ❲✐♥❞♦✇s✱ ▼❛❝✱ ▲✐♥✉① ✹ ❈❧♦♥❡ t❤❡ r❡♣♦ ♦♥ ②♦✉r ❧♦❝❛❧ ❝♦♠♣✉t❡r ✭❞♦♥✬t ❢♦r❦ ♦♥ ●✐t❍✉❜✦✮ ✺ ▼♦❞✐❢②✱ t❤❡♥ ♣✉s❤ ❛♥❞ ♣✉❧❧ ✻ ❈♦♠♠✉♥✐❝❛t❡ ②♦✉r ♣✉s❤❡s ✇✐t❤ ②♦✉r t❡❛♠♠❛t❡s✦ ✼ ✭❖♣t✐♦♥❛❧✮ ▼❛❦❡ ❜r❛♥❝❤❡s ❛♥❞ s✇✐t❝❤ ❜❡t✇❡❡♥ t❤❡♠ ❈❙ ✸✼✵✱ ●ü♥❛② ✭❊♠♦r②✮ ❏❛✈❛❙❝r✐♣t ❙♣r✐♥❣ ✷✵✶✹ ✽ ✴ ✶✼

slide-15
SLIDE 15

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

❈❙ ✸✼✵✱ ●ü♥❛② ✭❊♠♦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♦ ❆❏❆❳ ✭✇✐❧❧ ❞♦ ♦♥ ❚❤✉rs❞❛②✮

❈❙ ✸✼✵✱ ●ü♥❛② ✭❊♠♦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♦ ❆❏❆❳ ✭✇✐❧❧ ❞♦ ♦♥ ❚❤✉rs❞❛②✮

❈❙ ✸✼✵✱ ●ü♥❛② ✭❊♠♦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♦ ❆❏❆❳ ✭✇✐❧❧ ❞♦ ♦♥ ❚❤✉rs❞❛②✮

❈❙ ✸✼✵✱ ●ü♥❛② ✭❊♠♦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♦ ❆❏❆❳ ✭✇✐❧❧ ❞♦ ♦♥ ❚❤✉rs❞❛②✮

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

slide-20
SLIDE 20

❇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♦ ❆❏❆❳ ✭✇✐❧❧ ❞♦ ♦♥ ❚❤✉rs❞❛②✮

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

slide-21
SLIDE 21

❇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♦ ❆❏❆❳ ✭✇✐❧❧ ❞♦ ♦♥ ❚❤✉rs❞❛②✮

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

slide-22
SLIDE 22

❇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♦ ❆❏❆❳ ✭✇✐❧❧ ❞♦ ♦♥ ❚❤✉rs❞❛②✮

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

slide-23
SLIDE 23

■♥t❡r♠✐ss✐♦♥

slide-24
SLIDE 24

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-25
SLIDE 25

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-26
SLIDE 26

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-27
SLIDE 27

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-28
SLIDE 28

JavaScript data types & variables

  • JavaScript has only three primitive data types

strings : "foo" 'howdy do' "I said 'hi'." "" numbers : 12 3.14159 1.5E6 booleans : true false

<html> <head> <title>Data Types and Variables</title>

!

message = "howdy"; pi = 3.14159; 6

<title>Data Types and Variables</title> </head> <body> <script type="text/javascript"> x = 1024; document.write("<p>x = " + x + "</p>"); x = "foobar"; document.write("<p>x = " + x + "</p>"); </script> </body> </html>

# $

slide-29
SLIDE 29

For statement

  • Iterate through all of the members of an object:

for (var name in object) { if (object.hasOwnProperty(name)) { // within the loop, // name is the key of current member // object[name] is the current value } }

slide-30
SLIDE 30

JavaScript operators & control statements

<html> <head> <title>Folding Puzzle</title> </head> <body> <script type="text/javascript"> distanceToSun = 93.3e6*5280*12; thickness = .002;

!% !"

  • +, -, *, /, %, ++, --, …
  • ==, !=, <, >, <=, >=
  • &&, ||, !

& ' ()**+$",

8 foldCount = 0; while (thickness < distanceToSun) { thickness *= 2; foldCount++; } document.write("Number of folds = " + foldCount); </script> </body> </html>

()**+$",

  • ,
  • .
slide-31
SLIDE 31

JavaScript Math routines

<html> <!-- Dave Reed js04.html 2/01/04 --> <head> <title>Random Dice Rolls</title> </head> <body> <div style="text-align:center"> <script type="text/javascript"> roll1 = Math.floor(Math.random()*6) + 1;

/

  • Math.sqrt

Math.pow Math.abs Math.max 9

roll1 = Math.floor(Math.random()*6) + 1; roll2 = Math.floor(Math.random()*6) + 1; document.write("<img src='http://www.creighton.edu/"+ "~davereed/csc551/Images/die" + roll1 + ".gif' />"); document.write("&nbsp;&nbsp;"); document.write("<img src='http://www.creighton.edu/"+ "~davereed/csc551/Images/die" + roll2 + ".gif' />"); </script> </div> </body> </html>

Math.min Math.floor Math.ceil Math.round Math.PI Math.E Math.random

  • 01--23
slide-32
SLIDE 32

User-defined functions

  • function definitions are similar to C++/Java, except:

– no return type for the function (since variables are loosely typed) – no types for parameters (since variables are loosely typed) – by-value parameter passing only (parameter gets copy of argument)

function isPrime(n) // Assumes: n > 0 // Returns: true if n is prime, else false {

  • 10

if (n < 2) { return false; } else if (n == 2) { return true; } else { for (var i = 2; i <= Math.sqrt(n); i++) { if (n % i == 0) { return false; } } return true; } }

  • var
  • ,
slide-33
SLIDE 33

Function usage example

<html> <head> <title>Prime Tester</title> <script type="text/javascript"> function isPrime(n) // Assumes: n > 0 // Returns: true if n is prime { // CODE AS SHOWN ON PREVIOUS SLIDE

  • +45

+45

  • 11

// CODE AS SHOWN ON PREVIOUS SLIDE } </script> </head> <body> <script type="text/javascript"> testNum = parseFloat(prompt("Enter a positive integer", "7")); if (isPrime(testNum)) { document.write(testNum + " <b>is</b> a prime number."); } else { document.write(testNum + " <b>is not</b> a prime number."); } </script> </body> </html>

  • 6758
slide-34
SLIDE 34

JavaScript libraries

  • better still: if you define functions that may be

useful to many pages, store in a separate library file and load the library when needed

  • the file

http://www.mathcs.emory.edu/~eugene/cs370/javascript/numbers.js 12 http://www.mathcs.emory.edu/~eugene/cs370/javascript/numbers.js

contains definition of the isPrime function (last slide)

Note: as with external style sheets, no tags in the JavaScript library file

"9"9:(;3

<script type="text/javascript" src="http://www.mathcs.emory.edu/~eugene/cs370/javascript/numbers.js"> </script>

slide-35
SLIDE 35

❏❙ ✇♦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-36
SLIDE 36

JavaScript Strings

  • A class defines a new type (formally, Abstract Data Type)

– encapsulates data (properties) and operations on that data (methods)

  • A String encapsulates a sequence of characters, enclosed

in quotes

properties include

  • length

: stores the number of characters in the string 13

  • length

: stores the number of characters in the string methods include

  • charAt(index)

: returns the character stored at the given index

  • (as in C++/Java, indices start at 0)
  • substring(start, end)

: returns the part of the string between the start

  • (inclusive) and end (exclusive) indices
  • toUpperCase()

: returns copy of string with letters uppercase

  • toLowerCase()

: returns copy of string with letters lowercase to create a string, assign using new or just make a direct assignment (new is implicit)

word = new String("foo"); word = "foo";

properties/methods are called exactly as in C++/Java

  • word.length

word.charAt(0)

slide-37
SLIDE 37

JavaScript arrays

  • arrays store a sequence of items, accessible via an index

since JavaScript is loosely typed, elements do not have to be the same type – to create an array, allocate space using new (or can assign directly)

  • items = new Array(10);

// allocates space for 10 items

  • items = new Array();

// if no size, will adjust dynamically

14

items = new Array(); // if no size, will adjust dynamically

  • items = [0,0,0,0,0,0,0,0,0,0]; // can assign size & values []

– to access an array element, use [] (as in C++/Java)

  • for (i = 0; i < 10; i++) {
  • items[i] = 0;

// stores 0 at each index

  • }

– the length property stores the number of items in the array

  • for (i = 0; i < items.length; i++) {
  • document.write(items[i] + "<br>"); // displays elements
  • }
slide-38
SLIDE 38

Array example

<html> <body> <p id="demo">Click the button to reverse the order of the elements in the array.</p> <button onclick="myFunction()">Try it</button> <script type="text/javascript"> 15 <script type="text/javascript"> var fruits = ["Banana", "Orange", "Apple", "Mango"]; function myFunction() { fruits.reverse(); var x=document.getElementById("demo"); x.innerHTML=fruits; } </script> </body> </html>

slide-39
SLIDE 39

typeof

  • The typeof prefix operator returns a string

identifying the type of a value.

  • typeof
  • 'object'
  • 'object'
  • 'function'
  • 'object'
  • 'number'
  • 'string'
  • 'boolean'

null 'object' undefined 'undefined'

slide-40
SLIDE 40

❈❧❛ss❡s ✐♥ ❏❙❄

❨❡s✱ ✇❡ ❝❛♥✳ ❯s✐♥❣ ❏❙ ❢✉♥❝t✐♦♥ ❦❡②✇♦r❞✳

❢✉♥❝t✐♦♥ ❜❛s❡❝❧❛ss ✭✮④ t❤✐s✳❛ttr✶❀ t❤✐s✳♠❡t❤♦❞✶❂❢✉♥❝t✐♦♥✭❛r❣✶✮ ④ ✳✳✳ ⑥ ⑥ ✐♥st❛♥❝❡✶ ❂ ♥❡✇ ❜❛s❡❝❧❛ss ✭✮❀

◆♦t❡ t❤❡ ♥❡✇ ❦❡②✇♦r❞ ❍♦✇ ❛❜♦✉t ❛ s✉❜❝❧❛ss❄

❢✉♥❝t✐♦♥ s✉❜❝❧❛ss ✭✮④ ✈❛r ♣❛r❡♥t❂♥❡✇ ❜❛s❡❝❧❛ss ✭✮❀ ♣❛r❡♥t✳❛ttr✶❂✧♥❡✇ ✈❛❧✉❡✧❀ ✴✴ ❝✉st♦♠✐③❡ ❛ttr✐❜✉t❡s ♣❛r❡♥t✳♠❡t❤♦❞✶❂❢✉♥❝t✐♦♥✭❛r❣✶ ✱❛r❣✷✮ ④ ✳✳✳ ⑥ ✴✴ ♦✈❡rr✐❞❡ r❡t✉r♥ ♣❛r❡♥t❀ ✴✴ r❡t✉r♥ t❤❡ s✉❜❝❧❛ss ♦❜❥❡❝t ⑥ s✉❜❝❧❛ss❴✐♥st❛♥❝❡✶ ❂ s✉❜❝❧❛ss ✭✮❀

◆♦t❡ t❤❡r❡ ✐s ◆❖ ♥❡✇ ❦❡②✇♦r❞✦

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

slide-41
SLIDE 41

❈❧❛ss❡s ✐♥ ❏❙❄

❨❡s✱ ✇❡ ❝❛♥✳ ❯s✐♥❣ ❏❙ ❢✉♥❝t✐♦♥ ❦❡②✇♦r❞✳

❢✉♥❝t✐♦♥ ❜❛s❡❝❧❛ss ✭✮④ t❤✐s✳❛ttr✶❀ t❤✐s✳♠❡t❤♦❞✶❂❢✉♥❝t✐♦♥✭❛r❣✶✮ ④ ✳✳✳ ⑥ ⑥ ✐♥st❛♥❝❡✶ ❂ ♥❡✇ ❜❛s❡❝❧❛ss ✭✮❀

◆♦t❡ t❤❡ ♥❡✇ ❦❡②✇♦r❞ ❍♦✇ ❛❜♦✉t ❛ s✉❜❝❧❛ss❄

❢✉♥❝t✐♦♥ s✉❜❝❧❛ss ✭✮④ ✈❛r ♣❛r❡♥t❂♥❡✇ ❜❛s❡❝❧❛ss ✭✮❀ ♣❛r❡♥t✳❛ttr✶❂✧♥❡✇ ✈❛❧✉❡✧❀ ✴✴ ❝✉st♦♠✐③❡ ❛ttr✐❜✉t❡s ♣❛r❡♥t✳♠❡t❤♦❞✶❂❢✉♥❝t✐♦♥✭❛r❣✶ ✱❛r❣✷✮ ④ ✳✳✳ ⑥ ✴✴ ♦✈❡rr✐❞❡ r❡t✉r♥ ♣❛r❡♥t❀ ✴✴ r❡t✉r♥ t❤❡ s✉❜❝❧❛ss ♦❜❥❡❝t ⑥ s✉❜❝❧❛ss❴✐♥st❛♥❝❡✶ ❂ s✉❜❝❧❛ss ✭✮❀

◆♦t❡ t❤❡r❡ ✐s ◆❖ ♥❡✇ ❦❡②✇♦r❞✦

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

slide-42
SLIDE 42

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-43
SLIDE 43

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-44
SLIDE 44

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-45
SLIDE 45

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-46
SLIDE 46

❲❡❜ ❤❛❝❦✐♥❣ ■✿ ❇r♦✇s❡r t♦♦❧s ❛♥❞ ❏❙ ❝♦♠♠❛♥❞✲❧✐♥❡

❉❡♠♦

❤tt♣s✿✴✴✇✇✇✳❜✉tt❡r❤✉❜✳♦r❣✴❜❛❦❡r②✴ ❉❡✈❡❧♦♣❡r t♦♦❧s✱ ❞❡❧❡t✐♥❣ ❊❧❡♠❡♥t ✐♥♥❡r❍❚▼▲

slide-47
SLIDE 47
slide-48
SLIDE 48
slide-49
SLIDE 49
slide-50
SLIDE 50

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-51
SLIDE 51

❯♣❝♦♠✐♥❣ ❡♣✐s♦❞❡

❙❝r✉♠ ♥♦✇✦ ✭❞♦♥✬t ❢♦r❣❡t t♦ ✇r✐t❡ ❞♦✇♥ ♠❡❡t✐♥❣ ♠✐♥✉t❡s✱ ✐♥❝❧✉❞✐♥❣ t❛s❦s ❛ss✐❣♥❡❞✮ ❚❤✉rs❞❛②✿ ❈♦♥♥❡❝❝t✐♥❣ t♦ s❡r✈❡r ✇✐t❤ ❏❛✈❛s❝r✐♣t ✭❆❏❆❳✮

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