web development -2

sri999

t14.pptx

Home >Information Systems homework help >web development -2

HTML5, CSS3, and JavaScript

6th Edition

Exploring Object-Based Programming

Tutorial 14

Carey

Objectives

Use nested functions

Create an object literal

Define object properties and methods

Define an object class

Use object constructor functions

Instantiating an object

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Objectives (continued)

Define an object prototype

Explore prototype chains

Use the apply() and call() methods

Work with objects and arrays

Create a for…in loop

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Nested Functions

Any function, including named functions, can be nested within another function as follows:

function outsideFn() {

commands

function insideFn() {

commands }

commands

}

where

outsideFn() is the outer or containing function

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Nested Functions (continued 1)

insideFn() is the inner or nested function

Scope of a nested function is limited to the commands within the containing function

Nested function is hidden from other code in the script, making the code contained and easier to manage

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Nested Functions (continued 2)

Example: Nested functions can be used in developing the poker game app for Arthur’s Games website

The app displays the poker table on which users will play a game of draw poker

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Nested Functions (continued 3)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Nested Functions (continued 4)

All operations for the game will be stored within the playDrawPoker() function

playDrawPoker() function runs automatically when the page loads

playDrawPoker() function is created by adding references to all the buttons on the poker table

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Nested Functions (continued 5)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Nested Functions (continued 6)

Elements on the Draw Poker page perform the following tasks:

Deal button deals five cards from the poker deck into the player’s hand

Draw button replaces all selected cards in the player’s hand with new cards from the deck

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Nested Functions (continued 7)

Stand button signals to the dealer that the player wants to keep all the cards in the dealt hand

Reset button restarts the game with a fresh pot, resetting the bank value to $500

Bet selection list places the bet before the next hand is dealt

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Nested Functions (continued 8)

The Deal, Draw, and Stand buttons and the Bet selection list will be turned on and off depending on the state of the game

The Draw and Stand buttons are disabled before the deal

The Deal button and Bet selection list are disabled while the current hand is in play

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Nested Functions (continued 9)

To disable and enable the buttons, nest the required functions within the playDrawPoker() function

The functions for disabling or enabling the selected object also set the opacity style of the selected object

Disabled objects are semi-transparent on the page

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Nested Functions (continued 10)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Nested Functions (continued 11)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Introducing Custom Objects

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

There are three kinds of JavaScript objects

Native objects, such as Date or Array objects, are part of the JavaScript language

Host objects are objects provided by the browser for use in interacting with the web document and browser, such as the window, document, or form objects

Custom objects, also known as user-defined objects, are objects created by the user for specific programming tasks

Introducing Custom Objects (continued 1)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

The following custom objects are created for the poker game application:

A poker game object that contains information about the card game being played

A poker deck object that contains information about the cards used in the game

A poker hand object that contains information about the hand played by the user in the game

Poker card objects that contain information about the individual cards in the poker hand

Introducing Custom Objects (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

A custom object can be defined in one of the following three ways:

Creating it as an object literal

Using an object constructor

Applying the object create() method

Object Literals

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

The general syntax to create a custom object as an object literal

var objName = {

name1: value1,

name2: value2,

…

};

where

objName is the name of the object

Object Literals (continued 1)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

name1, name2, and so on are the names associated with that object

value1, value2, and so on are the values assigned to those names

Each name:value pair contains a property and property value associated with the object

Object Literals (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Dot Operators and Bracket Notation

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Dot operator: Connects the object name with an object property

object.property

Object properties can also be written using the bracket notation

object[“property”]

where object is the object name and property is the object property

Dot Operators and Bracket Notation (continued 1)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Example: The value of the currentBank property of the pokerGame object could be set with either

pokerGame.currentBank = 500;

pokerGame[“currentBank”] = 500;

Dot Operators and Bracket Notation (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating a Custom Method

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Methods are added to a custom object by including a function name and its commands as the following name:value pair:

var objName = {

method: function() {

commands

}

where method is the name of the method and commands are commands run by the method

Creating a Custom Method (continued 1)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Example: The following code adds the placeBet() method to the pokerDeck object:

var pokerDeck = {

currentBank: null,

currentBet: null,

placeBet: function() {

this.currentBank -= this.currentBet;

return currentBank;

}

Creating a Custom Method (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

The placeBet() method uses the this keyword to reference the current object

The -= assignment operator is used to subtract the value of the current bet from the current bank value

The method concludes by returning the value of the currentBank property

Creating a Custom Method (continued 3)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

To apply the placeBet() method to the pokerDeck object, run the following expression:

pokerDeck.placeBet()

Add placeBet() method to the pokerGame object to reduce the bank value by the size of the bet

The placeBet() method should be run whenever the user clicks the Deal button

Creating a Custom Method (continued 4)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating an Object with the new Operator

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Syntax to create a custom object with the new operator

var objName = new Object();

object.property = value;

object.method = function() {

commands

};

where objName is the object name, property is a property defined for that object, and method is a method assigned to that object

Creating an Object with the new Operator (continued)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

The new Object() statement is equivalent to an empty object literal {} that creates an object devoid of properties and methods

The biggest limitation of an object created either as an object literal or with the new Object() command is that the object is not reusable

Constructor Functions

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Object class can be created using an object constructor or a constructor that defines the properties and methods associated with the object type

Object instance or instance: Specific object that is based on an object class

Creating the object based on an object class is known as instantiating an object

Constructor Functions (continued 1)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Object constructors are defined with the following constructor function:

function objClass(parameters) {

this.prop1 = value1;

this.prop2 = value2;…

this.method1 = function1;

this.method2 = function2;…

}

where

objClass is the name of the object class

Constructor Functions (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

parameters are the parameters used by the constructor function

prop1, prop2, and so on are the properties associated with that object class

method1, method2, and so on are the methods associated with that object class

this keyword refers to any object instance of the particular object class

Constructor Functions (continued 3)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Instances of an object are created with the following command:

var objInstance = new objClass(parameters);

where

objInstance is a specific instance of the object

objClass is the object class as defined by the constructor function

parameters are the values of any parameters included in the constructor function

Constructor Functions (continued 4)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Combining Object Classes

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

One object class can include objects defined in other classes

Combining Object Classes (continued 1)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

To instantiate an object from the pokerDeck class, create a variable named “myDeck” using the following command:

var myDeck = new pokerDeck();

The array of pokerCard objects for the myDeck variable is referenced with the following expression:

myDeck.cards

Combining Object Classes (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Each card in the deck can be retrieved by referencing an index in the cards array

Example: The following expression retrieves the fourth card from the deck:

myDeck.cards[4]

Combining Object Classes (continued 3)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

All card games require the deck of cards to be randomly sorted

The sort() method of Array objects can be used for random arrangement of the array items

Add the shuffle() method to the pokerDeck object class to randomize the order of items in the cards array

Combining Object Classes (continued 4)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Working with Object Prototypes

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Every object has a prototype, which is a template for all the properties and methods associated with the object’s class

When an object is instantiated from a constructor function, it copies the properties and methods from the prototype into the new object

Defining a Prototype Method

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

The prototype is itself an object and is referenced using the following expression:

objName.prototype

where objName is the name of the object class

Example: The prototype for the pokerCard class of objects is referenced as follows:

pokerCard.prototype

Defining a Prototype Method (continued 1)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Apply the following command to add a method to a prototype:

objName.prototype.method = function;

where method is the name of the method and function is the function applied by the method

Defining a Prototype Method (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Defining a Prototype Method (continued 3)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Combining Objects

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Any object class can inherit the properties and methods from another class using prototypes

The hierarchy of object classes creates a prototype chain ranging from superclass to subclasses

Superclass: Base object class in a prototype chain

Subclasses: Lower classes in a prototype chain

Combining Objects (continued)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Prototypal inheritance: Process by which the properties and methods of superclasses are shared with the subclasses

Creating a Prototype Chain

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

A prototype chain is created by defining an object prototype as an instance of an object class

Order of classes is important while defining the prototype chain

Start at the top of the hierarchy, and move down to the lower subclasses

Creating a Prototype Chain (continued 1)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

JavaScript resolves the code that references an object property or method in the following order:

Check for the property or method within the current object instance

Check for the property or method with the object’s prototype

Creating a Prototype Chain (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

If the prototype is an instance of another object, check for the property or method in that object

Continue moving down the chain until the property or method is located or the end of the chain is reached

All prototype chains ultimately find their source in the base object

The Base Object

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Base object or Object: Fundamental JavaScript object whose methods are available to all objects

A subclass of the base object is created when a custom object is created using an object literal or by applying the new Object() command

The Base Object (continued 1)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

The Base Object (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Example: To determine whether an object supports a particular property use the hasOwnProperty() method as follows:

pokerCard.hasOwnProperty(“rank”);

The code returns true if the pokerCard object supports the rank property

The Base Object (continued 3)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

The constructor for Object also supports methods that can be used to retrieve and define properties for any object

Using the apply() and call() Methods

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Apply or call a method from one object for use in another object in order to share methods between objects

Borrow a method from one object class using the following apply() method:

function.apply(thisObj [,argArray])

Using the apply() and call() Methods (continued 1)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

where

function is a reference to a function

thisObj is the object that receives the actions of the function

argArray is an optional array of argument values sent to the function

Using the apply() and call() Methods (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

The call() method is similar to the apply() method except that the argument values are placed in a comma-separated list of values instead of an array

The syntax of the call() method

function.call(thisObj, arg1, arg2, arg3, ...)

where arg1, arg2, arg3, and so on is the comma-separated list of argument values for

function

Combining Objects and Arrays

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

A custom object contains data stored in arrays

JavaScript’s built-in Array object methods speed up the efficiency of a code by looping through the contents of an array

Applying the every() Array method

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Use the every() method to test whether every item in an array matches a specified condition

Example: Use every() method to test whether every card in the cards array of the pokerHand object has the same value for the suit property

Applying the every() Array method (continued)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Creating an Object Literal with the forEach() Method

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

forEach() method is used to run a command block for each item in an array

Applying a for…in loop

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

for…in loop is used to examine the properties and keys of an object as follows:

for (prop in obj) {

commands

}

where prop references the properties contained within the obj object

Applying a for…in loop (continued 1)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Example: Loop through the contents of the following employee object:

var employee = {

name: “Robert Voiklund”,

position: “manager”,

email: “[email protected]” };

Solution: Apply the following for … in loop:

for (prop in employee) {

console.info(prop + “ is “ + employee[prop]); }

Applying a for…in loop (continued 2)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

for…in loops do not follow a specific order because properties can be listed and read out in any order

Only the properties that are countable or enumerable are accessible to for…in loops

Applying a for…in loop (continued 3)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition

Determine whether a property is enumerable using the propertyIsEnumerable() method obj.propertyIsEnumerable(prop)

where obj is the object and prop is the property

Use a for…in loop to loop through every property in the object

Applying a for…in loop (continued 4)

New Perspectives on HTML5, CSS3, and JavaScript, 6th Edition