JavaScript, Fourth Edition 2JavaScript, Fourth Edition 22
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 3
Introduction to Object-oriented Programming
• 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 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 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
JavaScript, Fourth Edition 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 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 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
JavaScript, Fourth Edition 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
JavaScript, Fourth Edition 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
JavaScript, Fourth Edition 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 23
Performing Math Functions with the Math Class
• Math class– Methods and properties for mathematical
calculations
JavaScript, Fourth Edition 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 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 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 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
JavaScript, Fourth Edition 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 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
• Syntaxfor (variable in object) {
statement(s);
}
JavaScript, Fourth Edition 34
Enumerating Custom Object Properties (continued)
• for...in statement enumerates, or assigns an index to, each property in an object
• Examplefor (prop in ticketOrder) {
document.write(ticketOrder[prop] + "<br />");
}
• Example– Start adding a function named addContact()
that will add snowboarders to the contact list
JavaScript, Fourth Edition 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
JavaScript, Fourth Edition 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
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
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 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 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