JavaScript, Fourth Edition

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 JavaScript, Fourth Edition 2 2

Introduction to Object-oriented Programming • Object-oriented programming • Allows you to reuse code without having to copy or recreate it JavaScript, Fourth Edition

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

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

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

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

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; • methodNameis the name that is being assigned to the function within the object • Example • Add methods to the Contact constructor function JavaScript, Fourth Edition

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

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

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

JavaScript, Fourth Edition