9781305078444 ppt ch07

JavaScript, Sixth Edition
Chapter 7
Using Object-Oriented JavaScript

JavaScript, Sixth Edition 2
Objectives
When you complete this chapter, you will be able to:
• Explain basic concepts related to object-oriented
programming
• Use the Date, Number, and Math objects
• Define your own custom JavaScript objects

Introduction to Object-Oriented
Programming
• Object-oriented programming
– Allows reuse of code without having to copy or
recreate it

Reusing Software Objects
• Object-oriented programming (OOP)
– Creating reusable software objects
• Easily incorporated into multiple programs
• Object
– Programming code and data treated as an individual
unit or component
– Also called a component
• Data
– Information contained within variables or other types
of storage structures

Reusing Software Objects (cont’d.)
• Objects range from simple controls to entire
programs
• Popular object-oriented programming languages
– C++, Java, Visual Basic

Figure 7-1 Programming with objects
Reusing Software Objects (cont’d.)

What Is Encapsulation?
• Encapsulated objects
– Code and data 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 other programmers do
not need to access should be hidden

What Is Encapsulation? (cont’d.)
• Advantages of encapsulation
– Reduces code complexity
– Prevents accidental bugs and stealing of code
• Programming object and its interface
– Compare to a handheld calculator
Figure 7-2 Calculator interface

What Is Encapsulation? (cont’d.)
• Document object is encapsulated (black box)
– getElementById() method
• Part of the interface JavaScript uses to communicate
with the Document object
• Microsoft Word: example of an object and its
interface
Figure 7-3 Using the interface for the Document object

Understanding Classes
• Classes
– Grouping of code, methods, attributes, etc., making
up an object
• Instance
– Object created from an existing class
• Instantiate: create an object from an existing class
• Instance of an object inherits its methods and
properties from a class
• Objects in the browser object model
– Part of the web browser
– No need to instantiate them to use them

Using Built-In JavaScript Classes
Table 7-1 Built-in JavaScript classes

(cont’d.)
• Instantiating an object
– Some of the built-in JavaScript objects used
directly in code
– Some objects require programmer to instantiate a
new object
– Example: Math object’s PI(π) property in a script
// calculate the area of a circle based on its radius
function calcCircleArea() {
var r = document.getElementById("radius").value;
var area = Math.PI * Math.pow(r, 2); // area is pi times ↵
radius squared
return area;
}

(cont’d.)
• Instantiating an object (cont’d.)
– Can instantiate Array object using array literal
• Example: var deptHeads = [];
– Can instantiate empty generic object using object
literal
• Example: var accountsPayable = {};
• Generic object literal uses curly braces around value
– Can't use object literal for Date object
• Must use constructor
• Example: var today = new Date();

(cont’d.)
• Performing garbage collection
– Garbage collection
• Cleaning up, or reclaiming, memory reserved by a
program
– Declaring a variable or instantiating a new object
• Reserves memory for the variable or object
– JavaScript knows when a program no longer needs a
variable or object
• Automatically cleans up the memory

Using the Date, Number, and Math
Classes
• Three of most commonly used JavaScript classes:
– Date, Number, and Math

Manipulating the Date and Time with
the Date Class
• Date class
– Methods and properties for manipulating the date and
time
– Allows use of a specific date or time element in
JavaScript programs
Table 7-2 Date class constructors

the Date Class (cont’d.)
• Example:
– var today = new Date();
– Month and year date representation in a Date object
– Stored using numbers matching actual date and year
• Days of the week and months of the year
– Stored using numeric representations
• Starting with zero: similar to an array
• Example:
– var independenceDay = new Date(1776, 6, 4);

• After creating a new Date object
– Manipulate date and time in the variable using the
Date class methods
• Date and time in a Date object
– Not updated over time like a clock
– Date object contains the static (unchanging) date and
time
• Set at the moment the JavaScript code instantiates the
object

Table 7-3 Commonly used methods of the Date class (continues)

Table 7-3 Commonly used methods of the Date class

• Each portion of a Date object can be retrieved and
modified using the Date object methods
– Examples:
var curDate = new Date();
curDate.getDate();
• Displaying the full text for days and months
– Use a conditional statement to check the value
returned by the getDay() or getMonth() method
– Example:
• if/else construct to print the full text for the day of
the week returned by the getDay() method

var today = new Date();
var curDay = today.getDay();
var weekday;
if (curDay === 0) {
weekday = "Sunday";
} else if (curDay === 1) {
weekday = "Monday";
weekday = "Tuesday";
weekday = "Wednesday";
weekday = "Thursday";

var today = new Date();
var months = ["January","February","March",↵
"April","May","June",↵
"July","August","September",↵
"October","November","December"];
var curMonth = months[today.getMonth()];
• Example: include an array named months
– 12 elements assigned full text names of the months

Manipulating Numbers with the
Number Class
• Number class
– Methods for manipulating numbers and properties
containing static values
• Representing some numeric limitations in the
JavaScript language
– Can append the name of any Number class method
or property
• To the name of an existing variable containing a
numeric value

Number Class (cont’d.)
• Using Number class methods
Table 7-4 Number class methods

• Using Number class methods (cont’d.)
– Primary reason for using any of the “to” methods
• To convert a number to a string value with a specific
number of decimal places
– toFixed() method
• Most useful Number class method
– toLocaleString() method
• Converts a number to a string formatted with local
numeric formatting conventions

• Accessing Number class properties
Table 7-5 Number class properties

Performing Math Functions with the
Math Class
• Math class
– Methods and properties for mathematical calculations
• Cannot instantiate a Math object using a statement
such as: var mathCalc = new Math();
– Use the Math object and one of its methods or
properties directly in the code
• Example:
var curNumber = 144;
var squareRoot = Math.sqrt(curNumber); // returns 12

Table 7-6 Math class methods
Math Class (cont’d.)

Table 7-7 Math class properties

• Example:
– Use the PI property to calculate the area of a circle
based on its radius
• Code uses the pow() method to raise the radius value
to second power, and the round() method to round
the value returned to the nearest whole number
var radius = 25;
var area = Math.PI * Math.pow(radius, 2);
var roundedArea = Math.round(area); // returns 1963

Defining Custom JavaScript Objects
• JavaScript: not a true object-oriented programming
language
– Cannot create classes in JavaScript
– Instead, called an object-based language
• Can define custom objects
– Not encapsulated
– Useful to replicate the same functionality an unknown
number of times in a script

Declaring Basic Custom Objects
• Use the Object object
– var objectName = new Object();
– var objectName = {};
• Can assign properties to the object
– Append property name to the object name with a
period

(cont'd.)
• Add properties using dot syntax
– Object name followed by dot followed by property
name
– Example:
InventoryList.inventoryDate = new Date(2017, 11, 31);

(cont'd.)
• Can assign values to the properties of an object
when object first instantiated
• Example:
var PerformanceTickets = {
customerName: "Claudia Salomon",
performanceName: "Swan Lake",
ticketQuantity: 2,
performanceDate: new Date(2017, 6, 18, 20)
};

Declaring Sub-Objects
• Value of a property can be another object
– called a sub-object
– Example–order object with address sub-object:
var order = {
orderNumber: "F5987",
address: {
street: "1 Main St",
city: "Farmington",
state: "NY",
zip: "14425"

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
• Can also use associative array syntax to refer to the
properties of an object
• With associative arrays
– Can dynamically build property names at runtime

Associative Arrays (cont'd.)
• Can use associative array syntax to refer to the
properties of an object
• Example:
var stopLightColors = {
stop: "red",
caution: "yellow",
go: "green"
};
stopLightColors["caution"];

• Can easily reference property names that contain
numbers
– Example:
var order = {
item1: "KJ2435J",
price1: 23.95,
item2: "AW23454",
price2: 44.99,
item3: "2346J3B",
price3: 9.95
};

• Can easily reference property names that contain
numbers (cont'd.)
– To create order summary:
for (var i = 1; i < 4; i++) {
document.getElementById("itemList").innerHTML +=↵
"" + order["item" + i] + "";
document.getElementById("itemList").innerHTML +=↵
"" + order["price" + i] + "";
};

• Can also write generic code to add new object
properties that incorporate numbers
– Example—adding items to shopping cart:
totalItems += 1; // increment counter of items in order
currentItem = document.getElementById("itemName").innerHTML;
currentPrice = document.getElementById("itemPrice").innerHTML;
newItemPropertyName = "item" + totalItems; // "item4"
newPricePropertyName = "price" + totalItems; // "price4"
order.newItemPropertyName = currentItem; // order.item4 = (name)
order.newPricePropertyName = currentPrice;
// order.price4 = (price);

Creating Methods
• Object method simply a function with a name within
the object
• Two ways to add method to object
– Provide code for method in object
– Reference external function

Creating Methods (cont'd.)
• Specify method name with anonymous function as
value
– Example:
var order = {
items: {},
generateInvoice: function() {
// function statements
}
};

Creating Methods (cont'd.)
• Specify method name with existing function as value
– Example:
– Reference to existing function cannot have
parentheses
function processOrder() {
// function statements
}
var order = {
items: {},
generateInvoice: processOrder
};

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
– Looping statement similar to the for statement
• Syntax
for (variable in object) {
statement(s);
}

(cont'd.)
• for/in statement enumerates, or assigns an index
to, each property in an object
• Typical use:
– validate properties within an object

var item={
itemNumber: "KJ2435J",
itemPrice: 23.95,
itemInstock: true,
itemShipDate: new Date(2017, 6, 18),
};
for (prop in order) {
if (order[prop] === "") {
order.generateErrorMessage();
(cont’d.)
• Example—checking for empty values:

Deleting Properties
• Use the delete operator
• Syntax
delete object.property
• Example:
delete order.itemInStock;

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
• All JavaScript functions
– Can serve as a constructor

Defining Constructor Functions
(cont’d.)
• Example:
– Define a function that can serve as a constructor
function
function Order(number, order, payment, ship) {
this.customerNumber = number;
this.orderDate = order;
this.paymentMethod = payment;
this.shippingDate = ship;
}

Adding Methods to a Constructor
Function
• Can create a function to use as an object method
– Refer to object properties with this reference
– Example:
function displayOrderInfo() {
var summaryDiv = document.getElementById("summarySection");
summaryDiv.innerHTML += ("Customer: " +↵
this.customerNumber + "");
summaryDiv.innerHTML += ("Order Date: " +↵
this.orderDate.toLocaleString()+ "");
summaryDiv.innerHTML += ("Payment: " +↵
this.paymentMethod + "");
summaryDiv.innerHTML += ("Ship Date: " +↵

Using the prototype Property
• After instantiating a new object
– Can assign additional object properties
• Use a period
• New property 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

Using the prototype Property
(cont’d.)
• Object definitions can use the prototype property
to extend other object definitions
– Can create a new object based on an existing object

Summary
• Object-oriented programming (or OOP)
– The creation of reusable software objects
• Reusable software objects
– Called components
• Object
– Programming code and data treated as an individual
unit or component
• Objects are encapsulated
• Interface represents elements required for a source
program to communicate with an object

Summary (cont’d.)
• Principle of information hiding
• Code, methods, attributes, and other information
that make up an object
– Organized using classes
• Instance
– Object created from an existing class
• An object inherits the characteristics of the class on
which it is based
• Date class contains methods and properties for
manipulating the date and time

Summary (cont’d.)
• Number class contains methods for manipulating
numbers and properties
• Math class contains methods and properties for
performing mathematical calculations
• Can define custom object
– object literal
• Can create template for custom objects
– constructor function
• this keyword refers to object that called function
• prototype property specifies object's constructor

9781305078444 ppt ch07

More Related Content

What's hot (19)

Similar to 9781305078444 ppt ch07 (20)

More from Terry Yoast (20)

Recently uploaded (20)

9781305078444 ppt ch07