javascript, fourth edition chapter 6 using object-oriented javascript

JavaScript, Fourth Edition

Chapter 6Using Object-Oriented JavaScript

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


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


Reusing Software Objects (continued)

• Objects range from simple controls to entire programs

• Popular object-oriented programming languages– C++, Java, and Visual Basic


Reusing Software Objects (continued)


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


What is Encapsulation? (continued)


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


Understanding Classes (continued)

• Objects in the browser object model– Part of the Web browser

– You do not need to instantiate them to use them


Built-in JavaScript Classes


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();


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


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


Using the Date Class (continued)


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


Manipulating Numbers with the Number Class (continued)


Accessing Number Class Properties

• Example: Central Valley Snowboarding Web page– Add code to the Group Reservations page that

calculates group discounts


Accessing Number Class Properties (continued)


Performing Math Functions with the Math Class

• Math class– Methods and properties for mathematical

calculations


Using Math Class Methods


Accessing Math Class Properties


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


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


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


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


Declaring Basic Custom Objects (continued)


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


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


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);

}


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


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


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


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


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


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


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


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


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 chapter 6 using object-oriented javascript

Documents

edition javascript

javascript programsexamplevar

date object

codesome objects

specific date

date class continuedjavascript

new objectyou

new date1756