1.  2004 Prentice Hall, Inc. All rights reserved. 1 Segment – 4 Dynamic HTML & CSS

2.  2004 Prentice Hall, Inc. All rights reserved. 2

3. 3

4. 13.2 Object Referencing The simplest way to reference an element is by using the element’s id attribute. The element is represented as an object –XHTML attributes become properties that can be manipulated by scripting

5.  2004 Prentice Hall, Inc. All rights reserved. Outline reference.html (1 of 2)

6.  2004 Prentice Hall, Inc. All rights reserved. Outline reference.html (2 of 2)

7.  2004 Prentice Hall, Inc. All rights reserved. 14.1 Introduction Event model –Scripts can respond to user –Content becomes more dynamic –Interfaces become more intuitive

8.  2004 Prentice Hall, Inc. All rights reserved. 14.2 Event onclick onClick –Invoked when user clicks the mouse on a specific item

9.  2004 Prentice Hall, Inc. All rights reserved. Outline onclick.html (1 of 2)

10.  2004 Prentice Hall, Inc. All rights reserved. Outline onclick.html (2 of 2)

11.  2004 Prentice Hall, Inc. All rights reserved.

12. 14.3 Event onload onload event –Fires when an element finishes loading –Used in the body element –Initiates a script after the page loads into the client

13.  2004 Prentice Hall, Inc. All rights reserved. Outline onload.html (1 of 2)

14.  2004 Prentice Hall, Inc. All rights reserved. Outline onload.html (2 of 2)

15.  2004 Prentice Hall, Inc. All rights reserved. 14.4 Error Handling with onerror onerror event –Execute specialized error-handling code

16.  2004 Prentice Hall, Inc. All rights reserved. Outline onerror.html (1 of 2)

17.  2004 Prentice Hall, Inc. All rights reserved. Outline onerror.html (2 of 2)

18.  2004 Prentice Hall, Inc. All rights reserved. 14.5 Tracking the Mouse with Event onmousemove onmousemove –Fires repeatedly when the user moves the mouse over the Web page –Gives position of the mouse

19.  2004 Prentice Hall, Inc. All rights reserved. Outline onmousemove.html (1 of 2)

20.  2004 Prentice Hall, Inc. All rights reserved. Outline onmousemove.html (2 of 2)

21.  2004 Prentice Hall, Inc. All rights reserved. 14.6 Rollovers with onmouseover and onmouseout Two more events fired by mouse movements –onmouseover Mouse cursor moves over element –Onmouseout Mouse cursor leaves element

22.  2004 Prentice Hall, Inc. All rights reserved. 14.6 Rollovers with onmouseover and onmouseout

23.  2004 Prentice Hall, Inc. All rights reserved. Outline onmouseoverout.html (1 of 4)

24.  2004 Prentice Hall, Inc. All rights reserved. Outline onmouseoverout.html (2 of 4)

25.  2004 Prentice Hall, Inc. All rights reserved. Outline onmouseoverout.html (3 of 4)

26.  2004 Prentice Hall, Inc. All rights reserved. Outline onmouseoverout.html (4 of 4)

27.  2004 Prentice Hall, Inc. All rights reserved.

28. 14.7 Form Processing with onfocus and onblur onfocus event fires when element gains focus onblur event fires when element loses focus

29.  2004 Prentice Hall, Inc. All rights reserved. Outline onfocusblur.html (1 of 3)

30.  2004 Prentice Hall, Inc. All rights reserved. Outline onfocusblur.html (2 of 3)

31.  2004 Prentice Hall, Inc. All rights reserved. Outline onfocusblur.html (3 of 3)

32.  2004 Prentice Hall, Inc. All rights reserved. 14.8 More Form Processing with onsubmit and onreset onsubmit and onreset are useful events for processing forms

33.  2004 Prentice Hall, Inc. All rights reserved. Outline onsubmitreset.html (1 of 4)

34.  2004 Prentice Hall, Inc. All rights reserved. Outline onsubmitreset.html (2 of 4)

35.  2004 Prentice Hall, Inc. All rights reserved. Outline onsubmitreset.html (3 of 4)

36.  2004 Prentice Hall, Inc. All rights reserved. Outline onsubmitreset.html (4 of 4)

37.  2004 Prentice Hall, Inc. All rights reserved. 14.9 Event Bubbling Crucial part of the event model Process whereby events fired in child elements “bubble” up to their parent elements

38.  2004 Prentice Hall, Inc. All rights reserved. Outline bubbling.html (1 of 2)

39.  2004 Prentice Hall, Inc. All rights reserved. Outline bubbling.html (2 of 2)

40.  2004 Prentice Hall, Inc. All rights reserved.

41. 41

42.  2004 Prentice Hall, Inc. All rights reserved. 42

43.  2004 Prentice Hall, Inc. All rights reserved. 43

44.  2004 Prentice Hall, Inc. All rights reserved. 44

45.  2004 Prentice Hall, Inc. All rights reserved. 45

46.  2004 Prentice Hall, Inc. All rights reserved. 46

47.  2004 Prentice Hall, Inc. All rights reserved. 47

48.  2004 Prentice Hall, Inc. All rights reserved. 48

49.  2004 Prentice Hall, Inc. All rights reserved. 49

50.  2004 Prentice Hall, Inc. All rights reserved. 50

51.  2004 Prentice Hall, Inc. All rights reserved. 51