Object-Oriented JavaScript

668 views

Published on

Learn about the various ways to create new objects with JavaScript and explore how you can create custom constructors to instantiate multiple objects of the same class.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
668
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • DEMO – rest of section\n
  • DEMO – rest of section\n
  • DEMO – rest of section\n
  • DEMO – rest of section\n
  • DEMO – rest of section\n
  • DEMO – rest of section\n
  • DEMO – rest of section\n
  • DEMO – rest of section\n
  • DEMO – rest of section\n
  • DEMO – rest of section\n
  • DEMO – rest of section\n
  • DEMO – rest of section\n
  • DEMO – rest of section\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • DEMO – Creating an Object Constructor section\n
  • DEMO – Creating an Object Constructor section\n
  • DEMO – Creating an Object Constructor section\n
  • DEMO – Creating an Object Constructor section\n
  • DEMO – Creating an Object Constructor section\n
  • DEMO – Creating an Object Constructor section\n
  • DEMO – rest of section\n
  • DEMO – rest of section\n
  • DEMO – rest of section\n
  • DEMO – rest of section\n
  • DEMO – rest of section\n
  • DEMO – rest of section\n
  • DEMO – rest of section\n
  • DEMO – rest of section\n
  • DEMO – rest of section\n
  • DEMO – rest of section\n
  • DEMO – rest of section\n
  • DEMO – rest of section\n
  • DEMO – rest of section\n
  • DEMO – rest of section\n
  • DEMO – rest of section\n
  • DEMO – rest of section\n
  • DEMO: rest of section\n
  • Object-Oriented JavaScript

    1. 1. Object-OrientedJavaScript Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    2. 2. Objectives Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    3. 3. Objectives• Learn about the various ways to create new objects with JavaScript Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    4. 4. Objectives• Learn about the various ways to create new objects with JavaScript• Explore how you can create custom constructors to instantiate multiple objects of the same class Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    5. 5. Introduction toObject-Oriented JavaScript Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    6. 6. Introduction toObject-Oriented JavaScript• Possible to build sophisticated frameworks Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    7. 7. Introduction toObject-Oriented JavaScript• Possible to build sophisticated frameworks • jQuery for general Web development Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    8. 8. Introduction toObject-Oriented JavaScript• Possible to build sophisticated frameworks • jQuery for general Web development• OOP uses abstraction to create models of real objects Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    9. 9. Introduction toObject-Oriented JavaScript• Possible to build sophisticated frameworks • jQuery for general Web development• OOP uses abstraction to create models of real objects • Store own data and state Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    10. 10. Introduction toObject-Oriented JavaScript• Possible to build sophisticated frameworks • jQuery for general Web development• OOP uses abstraction to create models of real objects • Store own data and state • Receive messages Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    11. 11. Introduction toObject-Oriented JavaScript• Possible to build sophisticated frameworks • jQuery for general Web development• OOP uses abstraction to create models of real objects • Store own data and state • Receive messages • Interact with other objects Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    12. 12. Agenda Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    13. 13. Agenda• Introduction to Object-Oriented JavaScript Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    14. 14. Agenda• Introduction to Object-Oriented JavaScript• Creating JavaScript Objects Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    15. 15. Agenda• Introduction to Object-Oriented JavaScript• Creating JavaScript Objects• Custom Object Constructors Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    16. 16. Creating JavaScript Objects Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    17. 17. Creating JavaScript Objects• Number of ways to create custom objects Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    18. 18. Creating JavaScript Objects• Number of ways to create custom objects• Customer object Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    19. 19. Creating JavaScript Objects• Number of ways to create custom objects• Customer object • Properties to record data like ID, name, location Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    20. 20. Creating JavaScript Objects• Number of ways to create custom objects• Customer object • Properties to record data like ID, name, location • Some direct properties, others getter/setters Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    21. 21. Creating JavaScript Objects• Number of ways to create custom objects• Customer object • Properties to record data like ID, name, location • Some direct properties, others getter/setters • Override Object.toString Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    22. 22. Creating JavaScript Objects• Number of ways to create custom objects• Customer object • Properties to record data like ID, name, location • Some direct properties, others getter/setters • Override Object.toString • Method to record sales Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    23. 23. Using the Object Constructor Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    24. 24. Using the Object Constructor• Use Object constructor with new keyword Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    25. 25. Using the Object Constructor• Use Object constructor with new keyword • Creates a new object that inherits from Object Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    26. 26. Using the Object Constructor• Use Object constructor with new keyword • Creates a new object that inherits from Object • No arguments: new object Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    27. 27. Using the Object Constructor• Use Object constructor with new keyword • Creates a new object that inherits from Object • No arguments: new object • Primitive type argument: create new Number, Boolean, or String object Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    28. 28. Using an Object Literal Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    29. 29. Using an Object Literal• Notable differences from Object constructor technique: Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    30. 30. Using an Object Literal• Notable differences from Object constructor technique: • Single statement Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    31. 31. Using an Object Literal• Notable differences from Object constructor technique: • Single statement var customer = { }; Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    32. 32. Using an Object Literal• Notable differences from Object constructor technique: • Single statement var customer = { }; • Adding properties Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    33. 33. Using an Object Literal• Notable differences from Object constructor technique: • Single statement var customer = { }; • Adding properties • Defining getters and setters Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    34. 34. Creating an Object Hierarchywith Prototypes Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    35. 35. Creating an Object Hierarchywith Prototypes• Can use customer as a prototype for other objects Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    36. 36. Creating an Object Hierarchywith Prototypes• Can use customer as a prototype for other objects • New objects inherit properties of the base object Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    37. 37. Creating an Object Hierarchywith Prototypes• Can use customer as a prototype for other objects • New objects inherit properties of the base object • Called the prototype of the new objects Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    38. 38. Creating an Object Hierarchywith Prototypes• Can use customer as a prototype for other objects • New objects inherit properties of the base object • Called the prototype of the new objects • Set of objects with same prototype is a class Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    39. 39. Object Identity Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    40. 40. Object Identity• Can use the isPrototypeOf method Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    41. 41. Object Identity• Can use the isPrototypeOf method • See whether one object has another as its prototype Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    42. 42. Agenda Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    43. 43. Agenda• Introduction to Object-Oriented JavaScript Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    44. 44. Agenda• Introduction to Object-Oriented JavaScript• Creating JavaScript Objects Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    45. 45. Agenda• Introduction to Object-Oriented JavaScript• Creating JavaScript Objects• Custom Object Constructors Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    46. 46. Custom Object Constructors Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    47. 47. Custom Object Constructors• Constructor is a function that initializes an object Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    48. 48. Custom Object Constructors• Constructor is a function that initializes an object • Used with the new keyword Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    49. 49. Custom Object Constructors• Constructor is a function that initializes an object • Used with the new keyword • This actually creates the object Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    50. 50. Custom Object Constructors• Constructor is a function that initializes an object • Used with the new keyword • This actually creates the object• Constructor’s prototype object becomes prototype of new object Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    51. 51. Custom Object Constructors• Constructor is a function that initializes an object • Used with the new keyword • This actually creates the object• Constructor’s prototype object becomes prototype of new object • So all objects created with the constructor share prototypes Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    52. 52. Custom Object Constructors• Constructor is a function that initializes an object • Used with the new keyword • This actually creates the object• Constructor’s prototype object becomes prototype of new object • So all objects created with the constructor share prototypes • So all are members of the same class Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    53. 53. Creating a New ConstructorPrototype Object Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    54. 54. Creating a New ConstructorPrototype Object• Sample modified constructor’s default prototype object Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    55. 55. Creating a New ConstructorPrototype Object• Sample modified constructor’s default prototype object• Alternatively, can create a whole new object Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    56. 56. Creating a New ConstructorPrototype Object• Sample modified constructor’s default prototype object• Alternatively, can create a whole new object • Slightly cleaner code Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    57. 57. Creating a New ConstructorPrototype Object• Sample modified constructor’s default prototype object• Alternatively, can create a whole new object • Slightly cleaner code • Implement as single statement Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    58. 58. Creating a New ConstructorPrototype Object• Sample modified constructor’s default prototype object• Alternatively, can create a whole new object • Slightly cleaner code • Implement as single statement • Cleaner syntax Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    59. 59. Dynamically Changing the Prototypeof a Class Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    60. 60. Dynamically Changing the Prototypeof a Class • Benefit of using a prototype is you can dynamically change it Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    61. 61. Dynamically Changing the Prototypeof a Class • Benefit of using a prototype is you can dynamically change it • Automatically changes all objects in the class Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    62. 62. Dynamically Changing the Prototypeof a Class • Benefit of using a prototype is you can dynamically change it • Automatically changes all objects in the class • Object inherits from prototype even when prototype subsequently changes Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    63. 63. Dynamically Changing the Prototypeof a Class • Benefit of using a prototype is you can dynamically change it • Automatically changes all objects in the class • Object inherits from prototype even when prototype subsequently changes • Can even modify prototypes of built-in objects Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    64. 64. Object Identity withConstructors Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    65. 65. Object Identity withConstructors • instanceof operator Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    66. 66. Object Identity withConstructors • instanceof operator • Determine whether an object is an instance created by a constructor Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    67. 67. Object Identity withConstructors • instanceof operator • Determine whether an object is an instance created by a constructor • Operands Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    68. 68. Object Identity withConstructors • instanceof operator • Determine whether an object is an instance created by a constructor • Operands • Object to test Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    69. 69. Object Identity withConstructors • instanceof operator • Determine whether an object is an instance created by a constructor • Operands • Object to test • Constructor object to test against Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    70. 70. Object Identity withConstructors • instanceof operator • Determine whether an object is an instance created by a constructor • Operands • Object to test • Constructor object to test against • Pass anything as first operand, but second must be a function object Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    71. 71. Object Identity withConstructors • instanceof operator • Determine whether an object is an instance created by a constructor • Operands • Object to test • Constructor object to test against • Pass anything as first operand, but second must be a function object • Reinforce the idea that constructors are the public identity of a class of objects Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    72. 72. Learn More! Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company
    73. 73. Learn More!• This is an excerpt from a larger course. Visit www.learnnowonline.com for the full details! Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

    ×