1. 1 JavaScript: Objects and Object Models October 25, 2005 Slides modified from Internet & World Wide Web: How to Program. 2004 (3rd) edition. By Deitel, Deitel, and Goldberg. Published by Prentice Hall. ISBN 0-13-145091-3

2. 2 Chapter 12 - JavaScript: Objects Outline 12.1 Introduction 12.2 Thinking About Objects 12.3 Math Object 12.4 String Object 12.4.1 Fundamentals of Characters and Strings 12.4.2 Methods of the String Object 12.4.3 Character-Processing Methods 12.4.4 Searching Methods 12.4.5 Splitting Strings and Obtaining Substrings 12.4.6 XHTML Markup Methods 12.5 Date Object 12.6 Boolean and Number Objects 12.7 document Object 12.8 window Object 12.9 Using Cookies 12.10 Final JavaScript Example 12.11 Web Resources

3. 3 12.1 Introduction Use JavaScript to manipulate every element of XHTML document from a script Reference for several of JavaScript’s built- in objects Demonstrates the capabilities

4. 4 12.2 Thinking About Objects Objects –Attributes –Behaviors –Encapsulate date and methods –Property of information hiding –Details hidden within the objects themselves

5. 5 Key Objects in JavaScript Key objects –http://www.w3schools.com/jsref/default.asphttp://www.w3schools.com/jsref/default.asp Exhaustive list –http://www.devguru.com/Technologies/ecmascript/quickref/js_objects.htmlhttp://www.devguru.com/Technologies/ecmascript/quickref/js_objects.html String Date Math Number and Boolean

6. 6 12.4 String Object JavaScript’s string and character- processing capabilities Appropriate for processing names, addresses, credit card information, etc. 12.4.1 Fundamentals of Characters and Strings –Characters Fundamental building blocks of JavaScript programs –String Series of characters treated as a single unit

7. 7 12.4.2 Methods of the String Object Fig. 12.3 String object methods.

8. 8 12.4.2 Methods of the String Object Fig. 12.3 String object methods.

9. 9 12.4.2 Methods of the String Object

10. 10 12.4.3 Character Processing Methods charAt –Returns the character at specific position charCodeAt –Returns Unicode value of the character at specific position fromCharCode –Returns string created from series of Unicode values toLowerCase –Returns lowercase version of string toUpperCase –Returns uppercase version of string

11. 11 12.4.4 Searching Methods indexOf and lastIndexOf –Search for a specified substring in a string

12. 12 12.4.5 Splitting Strings and Obtaining Substrings Tokenization –The process of breaking a string into tokens Tokens –Individual words –Separated by delimiters String.split() String.substr(start[, length]) and String.substring(indexA, indexB)

13. 13 12.4.6 XHTML Markup Methods Anchor – Anchor Blink – blinking text Fixed – monospaced text Strike – strike out text Subscript – subscript Superscript – superscript

14. 14 12.5 Date Object Provides methods for date and time manipulations

15. 15 12.5 Date Object

16. 16 12.5 Date Object

17. 17 12.5 Date Object

18. 18 12.3 Math Object Allow the programmer to perform many common mathematical calculations

19. 19 12.3 Math Object Fig. 12.1 Math object methods.

20. 20 12.3 Math Object

21. 21 12.3 Math Object

22. 22 12.6 Boolean and Number Objects Object wrappers for boolean true / false values and numbers

23. 23 12.6 Boolean and Number Objects

24. 24 12.6 Boolean and Number Objects

25. 25 12.7 document Object Manipulate document that is currently visible in the browser window

26. 26 12.7 document Object

27. 27 12.8 window Object Provides methods for manipulating browser window

28. 28 window.html 1 of 7

29. 29 window.html 2 of 7

30. 30 window.html 3 of 7

31. 31 window.html 4 of 7

32. 32 window.html 5 of 7

33. 33 window.html 6 of 7

34. 34 window.html 7 of 7

35. 35

36. 36

37. 37 12.8 window Object

38. 38 12.9 Using Cookies Cookie –Data stored on user’s computer to maintain information about client during and between browser sessions –Can be accessed through cookie property –Set expiration date through expires property –Use escape function to convert non-alphanumeric characters to hexadecimal escape sequences –unescape function converts hexadecimal escape sequences back to English characters –http://www.yourhtmlsource.com/javascript/cookies.htmlhttp://www.yourhtmlsource.com/javascript/cookies.html

39. 39 cookie.html 1 of 4

40. 40 cookie.html 2 of 4

41. 41 cookie.html 3 of 4

42. 42 cookie.html 4 of 4

43. 43 Chapter 13 - Dynamic HTML: Object Model and Collections Outline 13.1 Introduction 13.2 Object Referencing 13.3 Collections all and children 13.4 Dynamic Styles 13.5 Dynamic Positioning 13.6 Using the frames Collection 13.7 navigator Object 13.8 Summary of the DHTML Object Model

44. 44 Objectives In this lesson, you will learn: –To use the Dynamic HTML Object Model and scripting to create dynamic Web pages. –To understand the Dynamic HTML object hierarchy. –To use the all and children collections to enumerate all of the XHTML elements of a Web page. –To use dynamic styles and dynamic positioning. –To use the frames collection to access objects in a separate frame on your Web page. –To use the navigator object to determine which browser is being used to access your page.

45. 45 13.1 Introduction Dynamic HTML Object Model –Allows Web authors to control the presentation of their pages –Gives them access to all the elements on their pages Web page –Elements, forms, frames, tables –Represented in an object hierarchy Scripting –Retrieve and modify properties and attributes Referring to text –http://www.irt.org/script/1370.htmhttp://www.irt.org/script/1370.htm

46. 46 13.8 Summary of the DHTML Object Model applets all anchors embeds forms filters images links plugins styleSheets scripts frames plugins collection body screen document history navigator location event document object window Key Fig. 13.10DHTML Object Model.

47. 47 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

48. 48

49. 49 13.3 Collections all and children Collections –Arrays of related objects on a page –all all the XHTML elements in a document –children Specific element contains that element’s child elements

50. 50 Outline all.html (1 of 2)

51. 51 Outline

52. 52 13.4 Dynamic Styles Element’s style can be changed dynamically Dynamic HTML Object Model also allows you to change the class attribute

53. 53 Outline dynami cstyle. html (1 of 2)

54. 54 Outline dynami cstyle2.html (1 of 2)

55. 55 13.5 Dynamic Positioning XHTML elements can be positioned with scripting –Declare an element’s CSS position property to be either absolute or relative –Move the element by manipulating any of the top, left, right or bottom CSS properties

56. 56 Outline

57. 57 13.6 Using the frames Collection Referencing elements and objects in different frames by using the frames collection

58. 58 Outline

59. 59

60. 60 13.7 navigator Object Netscape, Mozilla, Microsoft’s Internet Explorer –Others as well Contains information about the Web browser Allows Web authors to determine what browser the user is using

61. 61 Outline navigat or.html (1 of 2)

62. 62 13.8 Summary of the DHTML Object Model applets all anchors embeds forms filters images links plugins styleSheets scripts frames plugins collection body screen document history navigator location event document object window Key Fig. 13.10DHTML Object Model.

63. 63 13.8 Summary of the DHTML Object Model

64. 64 13.8 Summary of the DHTML Object Model

65. 65 13.8 Summary of the DHTML Object Model

66. 66 Helpful references http://www.devguru.com/Technologies/ecmascript/quickref/js_objects.html http://www.w3schools.com/js/js_obj_htmldom.asp