javascript shopping cart yong choi csu bakersfield

JavaScript Shopping Cart

Yong Choi

CSU

Bakersfield

Understanding JavaScript Objects

• Built-in JavaScript objects– JavaScript includes 11 built-in objects

– Each object contains various methods and properties for performing a particular task

– Can be used directly in program without instantiating a new object


• Custom JavaScript objects– JavaScript is not truly object-oriented

– Unlike C++ or Java, JavaScript cannot create classes

– Use a constructor function (same as “class”) that is used as the basis for an object

• It is more like a template on which an object is based than a class from which an object is instantiated.

– Any JavaScript function can serve as a constructor


• Constructor function– Has two types of elements

• Property (field): a value

– Variable within a constructor function

– Data of the object

• Method: an action

– Function called from within an object

– Can be custom or built-in function


• Constructor function– Identifier naming convention

• Class names in traditional object-oriented programming language usually begin with an upper case letter.

• Since constructor functions are equivalent of classes, first word uppercase to differentiate from non-constructor functions

– BankEmployee


• Constructor function– The this keyword

• One of the primary differences between standard functions and constructor functions.

• Used in constructor functions to refer to the current object that called the constructor function

– The new keyword• Used to create new objects from constructor functions• Example: new object name-Achmed

– Achmed = new BankEmployee(name, empNum);


• Object properties – Properties can be added to objects using dot operator (.)– Object properties available only to that specific object

• Object methods– Functions associated with a particular object

• Define the function• Use the this reference to refer to object properties• Add it to the constructor function

– this.methodName = functionName

– Call the method using the dot operator (.)

valcomp.htm

<HTML><TITLE>Val-U Computers Shopping Page</TITLE> <FRAMESET ROWS="0,*", FRAMEBORDER=NO BORDER=0

FRAMESPACING=0> //hidden JS frame <FRAME NAME="HIDDEN" SRC="javascript.htm"> <FRAME NAME="MAIN" SRC="order.htm" MARGINHEIGHT=0

MARGINWIDTH=0> //frame for web page display </FRAMESET></HTML>

• Same as any other frames but you need to set the size of the hidden frame to zero

• * means that it is allowed to take up the remaining portion of the browser window.

Hidden Frame

• Need to store shopping information shortly while a user navigates around a web site– Will not be displayed, but available to contain JS variables and

functions

• A hidden frame is an area of a web that is invisible to the user but can remain in place for use by JavaScript. – JS can be placed in hidden frames. So, common functions can

be used from multiple web pages within a web site.– Also, data can be stored in the hidden and accessed by multiple

pages with in a web page.

Pros and Cons of Using Hidden Frames

• Easier to use– Each web page does not need to read and write the

cookie data each time the browser loads a web page.

• Allow to use complex data, such as objects, more easily.

• Data stored in hidden frames is lost when the user visits another web site or shuts down his or her browser

javascript.htm

• Object variable name: ShoppingCart• Whenever you display the object, you use the display

method– this.display = printItem

• When using an object, the delete operator tells JS to delete all of the prosperities of an object.– delete ShoppingCart[ItemNum]

• Whenever you need to work with an object’s properties or methods in more than one line of code, you can use the With statement to save some coding– with (object)– with (window.document)– with (TargetDocument)

javascript.htm

• For-in statement– is used to loop through all of the elements of an

object.– Useful when it is impossible to tell browser how many

elements are in objects.

• History object– Widely used in JS programming for navigation– keeps track of the pages that have been visited.

• Similar to using any browser’s Back or Forward button

javascript.htm

• Properties and Methods of the History objects– Go (variable)

• Variable is a positive or negative number that instructs the browser to go back or forward variable number of pages in the current browser session

– Back()• Go back one page in the current browser session; same as

the clicking the browser Back button

– Forward()• Go forward one page in the current browser session; same

as clicking the browser forward button

javascript shopping cart yong choi csu bakersfield

Documents