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

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
JavaScript, Fourth Edition
JavaScript, Fourth Edition 2 2

3. Introduction to Object-oriented Programming
Allows you to reuse code without having to copy or recreate it
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
JavaScript, Fourth Edition

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

6. Reusing Software Objects (continued)
JavaScript, Fourth Edition 6

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
JavaScript, Fourth Edition

8. What is Encapsulation? (continued)
JavaScript, Fourth Edition 8

9. Understanding 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
JavaScript, Fourth Edition 9

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
JavaScript, Fourth Edition 10

11. Built-in JavaScript Classes
JavaScript, Fourth Edition 11

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();
JavaScript, Fourth Edition 12

13. Performing 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
JavaScript, Fourth Edition 13

14. Using the Date Class Date class Example
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
JavaScript, Fourth Edition 14

15. Using the Date Class (continued)
JavaScript, Fourth Edition 15

16. Using the Date Class (continued)
JavaScript, Fourth Edition 16

17. Using the Date Class (continued)
JavaScript, Fourth Edition 17

18. Using the Date Class (continued)
JavaScript, Fourth Edition 18

19. Manipulating Numbers with the 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
JavaScript, Fourth Edition 19

20. Manipulating Numbers with the Number Class (continued)
JavaScript, Fourth Edition 20

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

22. Accessing Number Class Properties (continued)
JavaScript, Fourth Edition 22

23. Performing Math Functions with the Math Class
Methods and properties for mathematical calculations
JavaScript, Fourth Edition 23

24. Using Math Class Methods
JavaScript, Fourth Edition 24

25. Accessing Math Class Properties
JavaScript, Fourth Edition 25

26. Accessing Math Class Properties (continued)
Example: Central Valley Snowboarding Web page
Modify the calcGroupDiscount() function to use the round() function of the Math object
To round the group discount to the nearest integer instead of displaying decimal places
JavaScript, Fourth Edition 26

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
JavaScript, Fourth Edition 27

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
JavaScript, Fourth Edition

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
JavaScript, Fourth Edition 29

30. Declaring Basic Custom Objects (continued)
JavaScript, Fourth Edition 30

31. Defining Constructor Functions
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
JavaScript, Fourth Edition 31

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
JavaScript, Fourth Edition 32

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); }
JavaScript, Fourth Edition 33

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 />"); }
Start adding a function named addContact() that will add snowboarders to the contact list
JavaScript, Fourth Edition 34

35. Referring to Object Properties as Associative Arrays
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
JavaScript, Fourth Edition 35

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

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
JavaScript, Fourth Edition

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
JavaScript, Fourth Edition 38

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
JavaScript, Fourth Edition 39

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
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
JavaScript, Fourth Edition

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
JavaScript, Fourth Edition 42