JavaScript Shopping Cart
Download
Report
Transcript JavaScript Shopping Cart
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
Understanding JavaScript Objects
• 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
Understanding JavaScript Objects
• 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
Understanding JavaScript Objects
• 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
Understanding JavaScript Objects
• 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);
Understanding JavaScript Objects
• 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