JavaScript, Fourth Edition

1. JavaScript, Fourth Edition Chapter 6 Using Object-Oriented JavaScript

2. JavaScript, Fourth Edition 2 Objectives Study object-oriented programming Learn about the built-in JavaScript objects Work with the Date, Number, and Math objects Define custom JavaScript objects

3. JavaScript, Fourth Edition 3 Introduction to Object-oriented Programming Object-oriented programming Allows you to reuse code without having to copy or recreate it

4. JavaScript, Fourth Edition 4 Reusing Software Objects Object-oriented programming (OOP) Creating reusable software objects Easily incorporated into multiple programs Object Programming code and data that can be treated as an individual unit or component Also called component Data Information contained within variables or other types of storage structures

5. Reusing Software Objects (continued) Objects range from simple controls to entire programs Popular object-oriented programming languages C++, Java, and Visual Basic

6. Reusing Software Objects (continued)

7. JavaScript, Fourth Edition 7 What is Encapsulation? Objects are encapsulated Code and data are contained within the object itself Encapsulation places code inside a “black box” Interface Elements required for program to communicate with an object Principle of information hiding Any methods and properties that other programmers do not need to access should be hidden

8. What is Encapsulation? (continued)

9. Understanding Classes Classes Code, methods, attributes, and other information that make up an object Instance Object that has been created from an existing class Instantiate: create an object from an existing class An instance of an object inherits its methods and properties from a class

10. Understanding Classes (continued) Objects in the browser object model Part of the Web browser You do not need to instantiate them to use them

11. Built-in JavaScript Classes

12. Instantiating an Object You can use some of the built-in JavaScript objects directly in your code Some objects require you to instantiate a new object Example Math.PI var teamRoster = new Array();

13. Performing Garbage Collection Garbage collection Cleaning up, or reclaiming, memory that is reserved by a program When you declare a variable or instantiate a new object You are reserving memory for the variable or object JavaScript knows when your program no longer needs a variable or object And automatically cleans up the memory for you

14. Using the Date Class Date class Methods and properties for manipulating the date and time Allows you to use a specific date or time element in your JavaScript programs Example var today = new Date(); var mozartsBirthday = new Date(1756, 0, 27); Example: Central Valley Snowboarding Web page Visitors can use to make group reservations Use the Date object to generate a monthly calendar

15. Using the Date Class (continued)

19. Manipulating Numbers with the Number Class Number class Methods for manipulating numbers and properties that contain static values Representing some of the numeric limitations in the JavaScript language You can simply append the name of any Number class method or property To the name of an existing variable that contains a numeric value

20. Manipulating Numbers with the Number Class (continued)

21. Accessing Number Class Properties Example: Central Valley Snowboarding Web page Add code to the Group Reservations page that calculates group discounts

22. Accessing Number Class Properties (continued)

23. Performing Math Functions with the Math Class Math class Methods and properties for mathematical calculations

24. Using Math Class Methods

25. Accessing Math Class Properties

26. Accessing Math Class Properties (continued)

27. Defining Custom JavaScript Objects JavaScript is not a true object-oriented programming language You cannot create your own classes in JavaScript JavaScript is an object-based language You can define your own custom objects Custom objects in JavaScript are not encapsulated

28. JavaScript, Fourth Edition 28 Declaring Basic Custom Objects Use the Object object Syntax var objectName = new Object(); var objectName = {}; You can assign properties to the object Append the property name to the object name with a period Custom objects created as described in this section are limited to containing only properties Objects are most useful when they contain both properties and methods

29. Declaring Basic Custom Objects (continued) Create custom objects that contain methods Use constructor functions Example: Central Valley Snowboarding Web page Start adding a Group Members section Allows you to enter information about each snowboarder in the group

30. Declaring Basic Custom Objects (continued)

31. Defining Constructor Functions Constructor function Used as the basis for a custom object Also known as object definition JavaScript objects Inherit all the variables and statements of the constructor function on which they are based Syntax: var newObject = new function(); Any JavaScript function can serve as a constructor Example: Central Valley Snowboarding Web page Add a constructor function to the Group Reservations page

32. Adding Properties Add a statement to the function body that uses the this keyword with the following syntax: this.property_name = value; this keyword refers to the object that calls the constructor function Example Add properties to the Contact constructor function

33. Enumerating Custom Object Properties Custom objects can contain dozens of properties To execute the same statement or command block for all the properties within a custom object Use the for...in statement for...in statement Looping statement similar to the for statement Syntax for (variable in object) { statement(s); }

34. Enumerating Custom Object Properties (continued) for...in statement enumerates, or assigns an index to, each property in an object Example for (prop in ticketOrder) { document.write(ticketOrder[prop] + "<br />"); } Example Start adding a function named addContact() that will add snowboarders to the contact list

35. Referring to Object Properties as Associative Arrays Associative array An array whose elements are referred to with an alphanumeric key instead of an index number You can also use associative array syntax to refer to the properties of an object Syntax ObjectName[“PropertyName”]; With associative arrays you can dynamically build property names at runtime Example Complete the addContact() function

36. Deleting Properties Use the delete operator with the syntax delete object.property Example Add a deleteContact() function to the Group Reservations page That deletes selected snowboarders from the Group Members section

37. JavaScript, Fourth Edition 37 Creating Methods Create a function that will be used as an object method By referring to any object properties it contains with the this reference Method must be added to the constructor function Using the syntax this.methodName = functionName; methodName is the name that is being assigned to the function within the object Example Add methods to the Contact constructor function

38. Using the prototype Property After instantiating a new object You can assign additional properties to the object, using a period New property is only available to that specific object prototype property Built-in property that specifies the constructor from which an object was instantiated When used with the name of the constructor function Any new properties you create will also be available to the constructor function

39. Using the prototype Property (continued) Object definitions can use the prototype property to extend other object definitions You can create a new object based on an existing object

40. JavaScript, Fourth Edition 40 Summary Object-oriented programming (or OOP) refers to the creation of reusable software objects Reusable software objects are called components An object is programming code and data that can be treated as an individual unit or component Objects are encapsulated An interface represents elements required for a source program to communicate with an object

41. JavaScript, Fourth Edition 41 Summary (continued) Principle of information hiding Code, methods, attributes, and other information that make up an object are organized using classes An instance is an object that has been created from an existing class An object inherits the characteristics of the class on which it is based The Date class contains methods and properties for manipulating the date and time

42. Summary (continued) The Number class contains methods for manipulating numbers and properties The Math class contains methods and properties for performing mathematical calculations You can define your own custom objects using a constructor function The this keyword refers to the current object The prototype property