JavaScript object programming

• Study object-oriented programming • Learn about the built-in JavaScript objects • Work with the Array, Date, Math, and Number objects • Define custom JavaScript objects... Reusable Sof

Object-Oriented Java Script

Object-Oriented

JavaScript

• Study object-oriented programming

• Learn about the built-in JavaScript objects

• Work with the Array, Date, Math, and Number

objects

• Define custom JavaScript objects

Introduction to Object-Oriented

Programming

• Object-oriented programming allows you to reuse code

without having to copy or recreate it

• You already have some experience with object-oriented

programming after working with browser

objects(window, Document, Form objects)

Reusable Software

• Object-oriented programming (OOP):

– Refers to the creation of reusable software objects that can be easily incorporated into multiple programs

• Object:

– Specifically refers to programming code and data that can be treated as an individual unit or component

Reusable Software (Cont.)

• Data:

– Refers to information contained within variables or other types

of storage structures

• Objects can range from simple controls such as a button, to

entire programs such as a database application

– In a retail sales program, you could refer to all the code that calculates the sales total as a single object

– You could reuse the object over and over again in the same program by typing the object name.

Reusable Software (Cont.)

• Popular object-oriented programming languages

include C++, Java, and Visual Basic

• Using any of these or other object-oriented

languages:

– Programmers can create objects themselves or use

objects created by other programmers

• Objects are encapsulated:

– All code and required data are contained within the

object itself

• Encapsulation:

– Places code inside what programmers like to call a

“black box”

– When an object is encapsulated, you cannot see

“inside” it—all internal workings are hidden

Encapsulation (Cont.)

• The code (methods and statements) and data

(variables and constants) contained in an

encapsulated object are accessed through an interface

Encapsulation (Cont.)

• The principal of information hiding states that:

– Any class members that other programmers do not need to

access or know about should be hidden

• Think of a calculator as an object, the interface is the keypad.

– You do not need to know or see the inner workings of the calculator to operate it

Encapsulation (Cont.)

• Encapsulation prevents other programmers from:

– Accidentally introducing a bug into a program

– Stealing the code and claiming it as their own

Encapsulation (Cont.)

– Object that has been created from an existing class

• Called instantiating the object

Classes (Cont.)

• A particular instance of an object inherits its methods and properties from a class:

– It takes on the characteristics of the class on which it is based

– For Example Consider an object called BankAccount that contains methods

and properties that you might use to record transactions associated with a

checking or savings account

• The BankAccount object is created from a BankAccount class

• To use the BankAccount class you create an instance of the class

• A particular instance of an object inherits its methods and properties from

a class

• The BankAccout object inherits all its methods and properties from the

BankAccout class

Classes (Cont.)

• Class names in traditional object-oriented

programming usually begin with an uppercase letter This convention is also followed in

JavaScript

Built-in JavaScript Classes

Instantiating an Object

• You can use some of the built-in JavaScript objects directly in your code

– document.write(“The value of PI is “ + Math.PI);

• Other objects require you to instantiate a new object

– var studentList = new Array()

Array Class

• The Array class creates new array objects

• When creating an array using the Array() constructor,

an object from the Array class is instantiated

• In addition to the Array() constructor, the Array class contains:

– Methods and properties for manipulating the elements

of an array

Array Class Methods

The Length Property

• Returns the number of elements in an array

• You append the length property to the name of the array you want to sort using the following syntax:

array_name.length;

Date Class

• Contains methods and properties for manipulating the date and time

• The Date object allows you to use the current date

and time in your JavaScript programs

• You create a new instance of the Date class using the

syntax var dateObject = new Date();

Date Class (Cont.)

Number Class

• Contains methods for manipulating numbers and properties that contain static values representing some of the numeric limitations in the JavaScript language

Number Class Methods

Number Class Properties

Math Class

• The Math class contains methods and properties

for performing mathematical calculations in your programs

Math Class Methods

Math Class Methods (Cont.)

Math Class Properties

Custom JavaScript Objects

• JavaScript is not a true object-oriented programming language:

– Base objects in your programs on built-in JavaScript classes such as the Array and Date objects

– However, you cannot create your own classes in

JavaScript

– You can define your own custom objects using a

Custom JavaScript Objects

• A Constructor function used as the basis for a custom object

• JavaScript objects inherit all the variables and

statements of the constructor function on which they are based

• Any JavaScript function can serve as a constructor

Custom JavaScript Objects

• The following code defines a function named

candyOrder() with three paramaters that can serve as a construction function.

function candyOrder(customer, type, boxes){

….

}

var valentinesDay = new candyOrder();

• To add a property to a constructor function:

– You must add a statement to the function body that

uses the this keyword with the following syntax:

• this.property_name = value;

– In the case of a custom JavaScript object, the this

keyword refers to the object that calls the constructor function

valentinesDay.customerName = "Don";

valentinesDay.candyType = "chocolate";

valentinesDay.numBoxes = 5;

document.write("<p>Customer name: " + valentinesDay.customerName);

document.write("<br />Candy Type: " + valentinesDay.candyType);

document.write("<br />Quantity: " + valentinesDay.numBoxes + " boxes</p>");

document.write("<p>Customer name: " + this.customerName);

document.write("<br />Candy Type: " + this.candyType);

document.write("<br />Quantity: " + this.numBoxes + " boxes</p>");

}

var valentinesDay = new CandyOrder("Don", "Chocolate", 5);

var birthday = new CandyOrder("Ima", "Caramel", 2);

valentinesDay.showOrder();

The prototype Property

• The prototype property is a built-in property:

– Specifies the constructor from which an object was extended

– When you instantiate a new object named valentinesDa y based on the

CandyOrder constructor function the new object includes the

The prototype Property

• After instantiating a new object you can assign additional properties to the object, using a

• The property is not available to the constructor function or

other objects instantiated from the same constructor function.

The prototype Property

• If you use the prototype property with the name of the

will also be available to the constructor function and any object it extends to

– var birthday = new CandyOrder(“Don”, “chocolate”, 5);

– CandyOrder.prototype.orderDate = “June 1, 2005”;

• In this case, all CandyOrder objects would have an order date of June 1, 2005

• Because not all orders will take place on June 1, 2005

– CandyOrder.prototype.orderDate = “”; // assign empty value

– //then assign the order date to each individual CandyOrder object

document.write("<p>Customer name: " + this.customerName);

document.write("<br />Candy Type: " + this.candyType);

document.write("<br />Quantity: " + this.numBoxes + " boxes");

document.write("<br />Order date: " + this.orderDate + "</p>" );

}

var valentinesDay = new CandyOrder("Don", "Chocolate", 5);

var birthday = new CandyOrder("Ima", "Caramel", 2);

CandyOrder.prototype.orderDate = ""; // assign empty value

valentinesDay.showOrder();

birthday.showOrder();

document.write("<p>Customer name: " + this.customerName);

document.write("<br />Candy Type: " + this.candyType);

document.write("<br />Quantity: " + this.numBoxes + " boxes");

document.write("<br />Order date: " + this.orderDate + "</p>" );

}

var valentinesDay = new CandyOrder("Don", "Chocolate", 5);

var birthday = new CandyOrder("Ima", "Caramel", 2);

CandyOrder.prototype.orderDate = ""; // assign empty value

valentinesDay.orderDate = " June 1, 2005 ";

valentinesDay.showOrder();

birthday.showOrder();

// >

Chapter Summary

• Object-Oriented programming (OOP):

– Refers to the creation of reusable software objects that can be easily incorporated into another program

Chapter Summary (cont.)

• Objects are encapsulated:

– All code and required data are contained within the

object itself

• Interface :

– Represents elements required for a source program to communicate with an object

• The principal of information hiding:

– States that any class members that other programmers

do not need to access or know about should be hidden

Chapter Summary (cont.)

• In object-oriented programming:

– Code, methods, attributes, and other information that make up an object are organized using classes

• An instance:

– Object created from an existing class

• An object inherits, or takes on, the characteristics of the class on which it is based

• The Date class:

– Contains methods and properties for manipulating the date and time

Chapter Summary (cont.)

• The Number class:

– Contains methods for manipulating numbers and

properties that

• The this keyword:

– Refers to the current object

• The prototype property:

– Built-in property that specifies the constructor from which an object was extended