SlideShare a Scribd company logo
JavaScript, Sixth Edition
Chapter 7
Using Object-Oriented JavaScript
Object-oriented programming
(OOP)
Object-oriented programming (OOP)
◦ Allows reuse of code without having to copy or recreate it
◦ 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
◦ Popular OOP languages: C++, Java, Visual Basic
Data
◦ Information contained within variables or other types of storage structures
JAVASCRIPT, SIXTH EDITION 2
JAVASCRIPT, SIXTH EDITION 3
Figure 7-1 Programming with objects
Reusing Software Objects
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
JAVASCRIPT, SIXTH EDITION 4
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
JAVASCRIPT, SIXTH EDITION 5
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
JAVASCRIPT, SIXTH EDITION 6
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
JAVASCRIPT, SIXTH EDITION 7
Using Built-In JavaScript
Classes
JAVASCRIPT, SIXTH EDITION 8
Table 7-1 Built-in JavaScript classes
Using 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
JAVASCRIPT, SIXTH EDITION 9
// 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;
}
Using Built-In JavaScript
Classes (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();
JAVASCRIPT, SIXTH EDITION 10
Using Built-In JavaScript
Classes (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
JAVASCRIPT, SIXTH EDITION 11
Using the Date, Number,
and Math Classes
Three of most commonly used JavaScript classes:
◦ Date, Number, and Math
JAVASCRIPT, SIXTH EDITION 12
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
JAVASCRIPT, SIXTH EDITION 13
Table 7-2 Date class constructors
Manipulating the Date and Time
with 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);
JAVASCRIPT, SIXTH EDITION 14
Manipulating the Date and Time
with the Date Class (cont’d.)
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
JAVASCRIPT, SIXTH EDITION 15
JAVASCRIPT, SIXTH EDITION 16
Table 7-3 Commonly used methods of the Date class (continues)
Manipulating the Date and Time with
the Date Class (cont’d.)
JAVASCRIPT, SIXTH EDITION 17
Table 7-3 Commonly used methods of the Date class
Manipulating the Date and Time with
the Date Class (cont’d.)
Manipulating the Date and Time
with the Date Class (cont’d.)
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
JAVASCRIPT, SIXTH EDITION 18
JAVASCRIPT, SIXTH EDITION 19
var today = new Date();
var curDay = today.getDay();
var weekday;
if (curDay === 0) {
weekday = "Sunday";
} else if (curDay === 1) {
weekday = "Monday";
} else if (curDay === 2) {
weekday = "Tuesday";
} else if (curDay === 3) {
weekday = "Wednesday";
} else if (curDay === 4) {
weekday = "Thursday";
} else if (curDay === 5) {
weekday = "Friday";
} else if (curDay === 6) {
weekday = "Saturday";
}
Manipulating the Date and Time with
the Date Class (cont’d.)
Manipulating the Date and Time
with the Date Class (cont’d.)
Example: include an array named months
◦ 12 elements assigned full text names of the months
JAVASCRIPT, SIXTH EDITION 20
var today = new Date();
var months = ["January","February","March",↵
"April","May","June",↵
"July","August","September",↵
"October","November","December"];
var curMonth = months[today.getMonth()];
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
JAVASCRIPT, SIXTH EDITION 21
Manipulating Numbers with
the Number Class (cont’d.)
Using Number class methods
JAVASCRIPT, SIXTH EDITION 22
Table 7-4 Number class methods
Manipulating Numbers with
the Number Class (cont’d.)
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
JAVASCRIPT, SIXTH EDITION 23
Manipulating Numbers with
the Number Class (cont’d.)
Accessing Number class properties
JAVASCRIPT, SIXTH EDITION 24
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:
JAVASCRIPT, SIXTH EDITION 25
var curNumber = 144;
var squareRoot = Math.sqrt(curNumber); // returns 12
JAVASCRIPT, SIXTH EDITION 26
Table 7-6 Math class methods
Performing Math Functions with the
Math Class (cont’d.)
JAVASCRIPT, SIXTH EDITION 27
Table 7-7 Math class properties
Performing Math Functions with the
Math Class (cont’d.)
Performing Math Functions
with the Math Class (cont’d.)
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
JAVASCRIPT, SIXTH EDITION 28
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
JAVASCRIPT, SIXTH EDITION 29
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
JAVASCRIPT, SIXTH EDITION 30
Declaring Basic Custom
Objects (cont'd.)
Add properties using dot syntax
◦ Object name followed by dot followed by property name
◦ Example:
JAVASCRIPT, SIXTH EDITION 31
InventoryList.inventoryDate = new Date(2017, 11, 31);
Declaring Basic Custom
Objects (cont'd.)
Can assign values to the properties of an object when object first instantiated
Example:
JAVASCRIPT, SIXTH EDITION 32
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"
}
};
JAVASCRIPT, SIXTH EDITION 33
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
JAVASCRIPT, SIXTH EDITION 34
Referring to Object Properties
as 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"];
JAVASCRIPT, SIXTH EDITION 35
Referring to Object Properties
as Associative Arrays (cont'd.)
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
};
JAVASCRIPT, SIXTH EDITION 36
Referring to Object Properties
as Associative Arrays (cont'd.)
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 +=↵
"<p class='item'>" + order["item" + i] + "</p>";
document.getElementById("itemList").innerHTML +=↵
"<p class='price'>" + order["price" + i] + "</p>";
};
JAVASCRIPT, SIXTH EDITION 37
Referring to Object Properties
as Associative Arrays (cont'd.)
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);
◦ Allows for as many items as user wants to purchase
JAVASCRIPT, SIXTH EDITION 38
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
JAVASCRIPT, SIXTH EDITION 39
Creating Methods (cont'd.)
Specify method name with anonymous function as value
◦ Example:
JAVASCRIPT, SIXTH EDITION 40
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
JAVASCRIPT, SIXTH EDITION 41
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);
}
JAVASCRIPT, SIXTH EDITION 42
Enumerating custom object
properties (cont'd.)
for/in statement enumerates, or assigns an index to, each property
in an object
Typical use:
◦ validate properties within an object
JAVASCRIPT, SIXTH EDITION 43
Enumerating custom object
properties (cont’d.)
var item={
itemNumber: "KJ2435J",
itemPrice: 23.95,
itemInstock: true,
itemShipDate: new Date(2017, 6, 18),
};
for (prop in order) {
if (order[prop] === "") {
order.generateErrorMessage();
}
}
JAVASCRIPT, SIXTH EDITION 44
• Example—checking for empty values:
Deleting Properties
Use the delete operator
Syntax
delete object.property
Example:
delete order.itemInStock;
JAVASCRIPT, SIXTH EDITION 45
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
JAVASCRIPT, SIXTH EDITION 46
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;
}
JAVASCRIPT, SIXTH EDITION 47
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 += ("<p>Customer: " +↵
this.customerNumber + "</p>");
summaryDiv.innerHTML += ("<p>Order Date: " +↵
this.orderDate.toLocaleString()+ "</p>");
summaryDiv.innerHTML += ("<p>Payment: " +↵
this.paymentMethod + "</p>");
summaryDiv.innerHTML += ("<p>Ship Date: " +↵
this.shippingDate.toLocaleString() + "</p>");
}
JAVASCRIPT, SIXTH EDITION 48

More Related Content

PDF
Presentation 2
s2team
 
PPTX
Objective C Primer (with ref to C#)
Hock Leng PUAH
 
PDF
Chapter19 constructor-and-destructor
Deepak Singh
 
ODP
Hello Java 8
Adam Davis
 
PDF
Towards hasktorch 1.0
Junji Hashimoto
 
PDF
Look Mommy, No GC! (TechDays NL 2017)
Dina Goldshtein
 
PDF
201801 CSE240 Lecture 13
Javier Gonzalez-Sanchez
 
PPTX
constructor & destructor in cpp
gourav kottawar
 
Presentation 2
s2team
 
Objective C Primer (with ref to C#)
Hock Leng PUAH
 
Chapter19 constructor-and-destructor
Deepak Singh
 
Hello Java 8
Adam Davis
 
Towards hasktorch 1.0
Junji Hashimoto
 
Look Mommy, No GC! (TechDays NL 2017)
Dina Goldshtein
 
201801 CSE240 Lecture 13
Javier Gonzalez-Sanchez
 
constructor & destructor in cpp
gourav kottawar
 

What's hot (11)

PPT
Tasty CAD & Raster Treats
Safe Software
 
PPTX
Java dates
Sujit Kumar
 
PDF
For mobile 5/13'
Jakub Hladík
 
PPT
Bca 2nd sem u-2 classes & objects
Rai University
 
PDF
2java Oop
Adil Jafri
 
PPTX
Constructor in c++
Jay Patel
 
PPTX
Constructors
shravani2191
 
PDF
Spark schema for free with David Szakallas
Databricks
 
PPTX
Object Oriented JavaScript
injulkarnilesh
 
PDF
Java & OOP Core Concept
Pin-Lun Huang
 
PDF
Multiple graphs in openCypher
openCypher
 
Tasty CAD & Raster Treats
Safe Software
 
Java dates
Sujit Kumar
 
For mobile 5/13'
Jakub Hladík
 
Bca 2nd sem u-2 classes & objects
Rai University
 
2java Oop
Adil Jafri
 
Constructor in c++
Jay Patel
 
Constructors
shravani2191
 
Spark schema for free with David Szakallas
Databricks
 
Object Oriented JavaScript
injulkarnilesh
 
Java & OOP Core Concept
Pin-Lun Huang
 
Multiple graphs in openCypher
openCypher
 
Ad

Similar to Ch 7: Object-Oriented JavaScript (20)

PPT
9781305078444 ppt ch07
Terry Yoast
 
PDF
3.1 javascript objects_DOM
Jalpesh Vasa
 
PPTX
Understanding-Objects-in-Javascript.pptx
MariaTrinidadTumanga
 
PPTX
Object oriented javascript
Usman Mehmood
 
PPTX
Cordova training : Day 4 - Advanced Javascript
Binu Paul
 
PPTX
Javascript Objects and Functions
Gitanjali wagh
 
PPTX
Javascript Objects and Functions
Manoj \/ishwakarma
 
PPTX
Object Oriented Javascript part2
Usman Mehmood
 
PPTX
Introduction to es6
NexThoughts Technologies
 
PPTX
Getting started with ES6
Nitay Neeman
 
PPTX
JavaScript OOPS Implimentation
Usman Mehmood
 
PPTX
Jscript part2
Girish Srivastava
 
PPTX
WEB222-lecture-4.pptx
RohitSharma318779
 
PPTX
Web Host_G4.pptx
RNithish1
 
PPTX
The ES Library for JavaScript Developers
Ganesh Bhosale
 
PDF
javascript objects
Vijay Kalyan
 
PPTX
JavaScript own objects(Web Technology)
Dhananjaysinh Jhala
 
PDF
full javascript Book by Abhishek singh.pdf
AbhishekSingh961152
 
PPTX
13_User_Defined_Objects.pptx objects in javascript
tayyabbiswas2025
 
PDF
JavaScript in 2016
Codemotion
 
9781305078444 ppt ch07
Terry Yoast
 
3.1 javascript objects_DOM
Jalpesh Vasa
 
Understanding-Objects-in-Javascript.pptx
MariaTrinidadTumanga
 
Object oriented javascript
Usman Mehmood
 
Cordova training : Day 4 - Advanced Javascript
Binu Paul
 
Javascript Objects and Functions
Gitanjali wagh
 
Javascript Objects and Functions
Manoj \/ishwakarma
 
Object Oriented Javascript part2
Usman Mehmood
 
Introduction to es6
NexThoughts Technologies
 
Getting started with ES6
Nitay Neeman
 
JavaScript OOPS Implimentation
Usman Mehmood
 
Jscript part2
Girish Srivastava
 
WEB222-lecture-4.pptx
RohitSharma318779
 
Web Host_G4.pptx
RNithish1
 
The ES Library for JavaScript Developers
Ganesh Bhosale
 
javascript objects
Vijay Kalyan
 
JavaScript own objects(Web Technology)
Dhananjaysinh Jhala
 
full javascript Book by Abhishek singh.pdf
AbhishekSingh961152
 
13_User_Defined_Objects.pptx objects in javascript
tayyabbiswas2025
 
JavaScript in 2016
Codemotion
 
Ad

Recently uploaded (20)

PPTX
An introduction to Prepositions for beginners.pptx
drsiddhantnagine
 
PPTX
Five Point Someone – Chetan Bhagat | Book Summary & Analysis by Bhupesh Kushwaha
Bhupesh Kushwaha
 
PPT
Python Programming Unit II Control Statements.ppt
CUO VEERANAN VEERANAN
 
PPTX
How to Manage Leads in Odoo 18 CRM - Odoo Slides
Celine George
 
DOCX
Unit 5: Speech-language and swallowing disorders
JELLA VISHNU DURGA PRASAD
 
PPTX
PREVENTIVE PEDIATRIC. pptx
AneetaSharma15
 
PPTX
Artificial-Intelligence-in-Drug-Discovery by R D Jawarkar.pptx
Rahul Jawarkar
 
PDF
2.Reshaping-Indias-Political-Map.ppt/pdf/8th class social science Exploring S...
Sandeep Swamy
 
PDF
The Picture of Dorian Gray summary and depiction
opaliyahemel
 
PPTX
CARE OF UNCONSCIOUS PATIENTS .pptx
AneetaSharma15
 
PPTX
Software Engineering BSC DS UNIT 1 .pptx
Dr. Pallawi Bulakh
 
PPTX
FSSAI (Food Safety and Standards Authority of India) & FDA (Food and Drug Adm...
Dr. Paindla Jyothirmai
 
PDF
Phylum Arthropoda: Characteristics and Classification, Entomology Lecture
Miraj Khan
 
PDF
Sunset Boulevard Student Revision Booklet
jpinnuck
 
PPTX
An introduction to Dialogue writing.pptx
drsiddhantnagine
 
PDF
Virat Kohli- the Pride of Indian cricket
kushpar147
 
PDF
What is CFA?? Complete Guide to the Chartered Financial Analyst Program
sp4989653
 
PDF
Types of Literary Text: Poetry and Prose
kaelandreabibit
 
PDF
Review of Related Literature & Studies.pdf
Thelma Villaflores
 
DOCX
Action Plan_ARAL PROGRAM_ STAND ALONE SHS.docx
Levenmartlacuna1
 
An introduction to Prepositions for beginners.pptx
drsiddhantnagine
 
Five Point Someone – Chetan Bhagat | Book Summary & Analysis by Bhupesh Kushwaha
Bhupesh Kushwaha
 
Python Programming Unit II Control Statements.ppt
CUO VEERANAN VEERANAN
 
How to Manage Leads in Odoo 18 CRM - Odoo Slides
Celine George
 
Unit 5: Speech-language and swallowing disorders
JELLA VISHNU DURGA PRASAD
 
PREVENTIVE PEDIATRIC. pptx
AneetaSharma15
 
Artificial-Intelligence-in-Drug-Discovery by R D Jawarkar.pptx
Rahul Jawarkar
 
2.Reshaping-Indias-Political-Map.ppt/pdf/8th class social science Exploring S...
Sandeep Swamy
 
The Picture of Dorian Gray summary and depiction
opaliyahemel
 
CARE OF UNCONSCIOUS PATIENTS .pptx
AneetaSharma15
 
Software Engineering BSC DS UNIT 1 .pptx
Dr. Pallawi Bulakh
 
FSSAI (Food Safety and Standards Authority of India) & FDA (Food and Drug Adm...
Dr. Paindla Jyothirmai
 
Phylum Arthropoda: Characteristics and Classification, Entomology Lecture
Miraj Khan
 
Sunset Boulevard Student Revision Booklet
jpinnuck
 
An introduction to Dialogue writing.pptx
drsiddhantnagine
 
Virat Kohli- the Pride of Indian cricket
kushpar147
 
What is CFA?? Complete Guide to the Chartered Financial Analyst Program
sp4989653
 
Types of Literary Text: Poetry and Prose
kaelandreabibit
 
Review of Related Literature & Studies.pdf
Thelma Villaflores
 
Action Plan_ARAL PROGRAM_ STAND ALONE SHS.docx
Levenmartlacuna1
 

Ch 7: Object-Oriented JavaScript

  • 1. JavaScript, Sixth Edition Chapter 7 Using Object-Oriented JavaScript
  • 2. Object-oriented programming (OOP) Object-oriented programming (OOP) ◦ Allows reuse of code without having to copy or recreate it ◦ 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 ◦ Popular OOP languages: C++, Java, Visual Basic Data ◦ Information contained within variables or other types of storage structures JAVASCRIPT, SIXTH EDITION 2
  • 3. JAVASCRIPT, SIXTH EDITION 3 Figure 7-1 Programming with objects Reusing Software Objects
  • 4. 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 JAVASCRIPT, SIXTH EDITION 4
  • 5. 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 JAVASCRIPT, SIXTH EDITION 5 Figure 7-2 Calculator interface
  • 6. 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 JAVASCRIPT, SIXTH EDITION 6 Figure 7-3 Using the interface for the Document object
  • 7. 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 JAVASCRIPT, SIXTH EDITION 7
  • 8. Using Built-In JavaScript Classes JAVASCRIPT, SIXTH EDITION 8 Table 7-1 Built-in JavaScript classes
  • 9. Using 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 JAVASCRIPT, SIXTH EDITION 9 // 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; }
  • 10. Using Built-In JavaScript Classes (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(); JAVASCRIPT, SIXTH EDITION 10
  • 11. Using Built-In JavaScript Classes (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 JAVASCRIPT, SIXTH EDITION 11
  • 12. Using the Date, Number, and Math Classes Three of most commonly used JavaScript classes: ◦ Date, Number, and Math JAVASCRIPT, SIXTH EDITION 12
  • 13. 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 JAVASCRIPT, SIXTH EDITION 13 Table 7-2 Date class constructors
  • 14. Manipulating the Date and Time with 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); JAVASCRIPT, SIXTH EDITION 14
  • 15. Manipulating the Date and Time with the Date Class (cont’d.) 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 JAVASCRIPT, SIXTH EDITION 15
  • 16. JAVASCRIPT, SIXTH EDITION 16 Table 7-3 Commonly used methods of the Date class (continues) Manipulating the Date and Time with the Date Class (cont’d.)
  • 17. JAVASCRIPT, SIXTH EDITION 17 Table 7-3 Commonly used methods of the Date class Manipulating the Date and Time with the Date Class (cont’d.)
  • 18. Manipulating the Date and Time with the Date Class (cont’d.) 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 JAVASCRIPT, SIXTH EDITION 18
  • 19. JAVASCRIPT, SIXTH EDITION 19 var today = new Date(); var curDay = today.getDay(); var weekday; if (curDay === 0) { weekday = "Sunday"; } else if (curDay === 1) { weekday = "Monday"; } else if (curDay === 2) { weekday = "Tuesday"; } else if (curDay === 3) { weekday = "Wednesday"; } else if (curDay === 4) { weekday = "Thursday"; } else if (curDay === 5) { weekday = "Friday"; } else if (curDay === 6) { weekday = "Saturday"; } Manipulating the Date and Time with the Date Class (cont’d.)
  • 20. Manipulating the Date and Time with the Date Class (cont’d.) Example: include an array named months ◦ 12 elements assigned full text names of the months JAVASCRIPT, SIXTH EDITION 20 var today = new Date(); var months = ["January","February","March",↵ "April","May","June",↵ "July","August","September",↵ "October","November","December"]; var curMonth = months[today.getMonth()];
  • 21. 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 JAVASCRIPT, SIXTH EDITION 21
  • 22. Manipulating Numbers with the Number Class (cont’d.) Using Number class methods JAVASCRIPT, SIXTH EDITION 22 Table 7-4 Number class methods
  • 23. Manipulating Numbers with the Number Class (cont’d.) 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 JAVASCRIPT, SIXTH EDITION 23
  • 24. Manipulating Numbers with the Number Class (cont’d.) Accessing Number class properties JAVASCRIPT, SIXTH EDITION 24 Table 7-5 Number class properties
  • 25. 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: JAVASCRIPT, SIXTH EDITION 25 var curNumber = 144; var squareRoot = Math.sqrt(curNumber); // returns 12
  • 26. JAVASCRIPT, SIXTH EDITION 26 Table 7-6 Math class methods Performing Math Functions with the Math Class (cont’d.)
  • 27. JAVASCRIPT, SIXTH EDITION 27 Table 7-7 Math class properties Performing Math Functions with the Math Class (cont’d.)
  • 28. Performing Math Functions with the Math Class (cont’d.) 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 JAVASCRIPT, SIXTH EDITION 28 var radius = 25; var area = Math.PI * Math.pow(radius, 2); var roundedArea = Math.round(area); // returns 1963
  • 29. 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 JAVASCRIPT, SIXTH EDITION 29
  • 30. 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 JAVASCRIPT, SIXTH EDITION 30
  • 31. Declaring Basic Custom Objects (cont'd.) Add properties using dot syntax ◦ Object name followed by dot followed by property name ◦ Example: JAVASCRIPT, SIXTH EDITION 31 InventoryList.inventoryDate = new Date(2017, 11, 31);
  • 32. Declaring Basic Custom Objects (cont'd.) Can assign values to the properties of an object when object first instantiated Example: JAVASCRIPT, SIXTH EDITION 32 var PerformanceTickets = { customerName: "Claudia Salomon", performanceName: "Swan Lake", ticketQuantity: 2, performanceDate: new Date(2017, 6, 18, 20) };
  • 33. 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" } }; JAVASCRIPT, SIXTH EDITION 33
  • 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 Can also use associative array syntax to refer to the properties of an object With associative arrays ◦ Can dynamically build property names at runtime JAVASCRIPT, SIXTH EDITION 34
  • 35. Referring to Object Properties as 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"]; JAVASCRIPT, SIXTH EDITION 35
  • 36. Referring to Object Properties as Associative Arrays (cont'd.) 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 }; JAVASCRIPT, SIXTH EDITION 36
  • 37. Referring to Object Properties as Associative Arrays (cont'd.) 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 +=↵ "<p class='item'>" + order["item" + i] + "</p>"; document.getElementById("itemList").innerHTML +=↵ "<p class='price'>" + order["price" + i] + "</p>"; }; JAVASCRIPT, SIXTH EDITION 37
  • 38. Referring to Object Properties as Associative Arrays (cont'd.) 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); ◦ Allows for as many items as user wants to purchase JAVASCRIPT, SIXTH EDITION 38
  • 39. 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 JAVASCRIPT, SIXTH EDITION 39
  • 40. Creating Methods (cont'd.) Specify method name with anonymous function as value ◦ Example: JAVASCRIPT, SIXTH EDITION 40 var order = { items: {}, generateInvoice: function() { // function statements } };
  • 41. Creating Methods (cont'd.) Specify method name with existing function as value ◦ Example: ◦ Reference to existing function cannot have parentheses JAVASCRIPT, SIXTH EDITION 41 function processOrder() { // function statements } var order = { items: {}, generateInvoice: processOrder };
  • 42. 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); } JAVASCRIPT, SIXTH EDITION 42
  • 43. Enumerating custom object properties (cont'd.) for/in statement enumerates, or assigns an index to, each property in an object Typical use: ◦ validate properties within an object JAVASCRIPT, SIXTH EDITION 43
  • 44. Enumerating custom object properties (cont’d.) var item={ itemNumber: "KJ2435J", itemPrice: 23.95, itemInstock: true, itemShipDate: new Date(2017, 6, 18), }; for (prop in order) { if (order[prop] === "") { order.generateErrorMessage(); } } JAVASCRIPT, SIXTH EDITION 44 • Example—checking for empty values:
  • 45. Deleting Properties Use the delete operator Syntax delete object.property Example: delete order.itemInStock; JAVASCRIPT, SIXTH EDITION 45
  • 46. 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 JAVASCRIPT, SIXTH EDITION 46
  • 47. 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; } JAVASCRIPT, SIXTH EDITION 47
  • 48. 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 += ("<p>Customer: " +↵ this.customerNumber + "</p>"); summaryDiv.innerHTML += ("<p>Order Date: " +↵ this.orderDate.toLocaleString()+ "</p>"); summaryDiv.innerHTML += ("<p>Payment: " +↵ this.paymentMethod + "</p>"); summaryDiv.innerHTML += ("<p>Ship Date: " +↵ this.shippingDate.toLocaleString() + "</p>"); } JAVASCRIPT, SIXTH EDITION 48