Transcript Chapter 6

JavaScript, Fourth Edition
Chapter 6
Using Object-Oriented JavaScript
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
2
Introduction to Object-oriented
Programming
• Object-oriented programming
– Allows you to reuse code without having to copy
or recreate it
JavaScript, Fourth Edition
3
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
4
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
Reusing Software Objects (continued)
JavaScript, Fourth Edition
6
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
7
What is Encapsulation? (continued)
JavaScript, Fourth Edition
8
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
9
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
Built-in JavaScript Classes
JavaScript, Fourth Edition
11
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
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
13
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
14
Using the Date Class (continued)
JavaScript, Fourth Edition
15
Using the Date Class (continued)
JavaScript, Fourth Edition
16
Using the Date Class (continued)
JavaScript, Fourth Edition
17
Using the Date Class (continued)
JavaScript, Fourth Edition
18
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
19
Manipulating Numbers with the
Number Class (continued)
JavaScript, Fourth Edition
20
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
Accessing Number Class Properties
(continued)
JavaScript, Fourth Edition
22
Performing Math Functions with the
Math Class
• Math class
– Methods and properties for mathematical
calculations
JavaScript, Fourth Edition
23
Using Math Class Methods
JavaScript, Fourth Edition
24
Accessing Math Class Properties
JavaScript, Fourth Edition
25
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
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
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
28
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
Declaring Basic Custom Objects
(continued)
JavaScript, Fourth Edition
30
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
31
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
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
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
JavaScript, Fourth Edition
34
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
35
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
36
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
37
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
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
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
40
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
41
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