1. JavaScript Shopping Cart Yong Choi CSU Bakersfield

2. 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

4. 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

5. 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

6. 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

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

8. 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 (.)

10. valcomp.htm Val-U Computers Shopping Page //hidden JS frame //frame for web page display 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.

11. 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.

12. 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

13. 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)

14. 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

15. 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