Shopping cart is basically a list. You buy something from the store, add something from the store to the cart and when you view items in the list - you'll see them.
Array is an ordered list organized by index. The list will be an array: var array = [ ]; //list of multiple items You can add or remove items from an array
Example var array = ["A", "b", "c", "d"]; console.log(array);
To view individual items in an array:- - Each item in an array is stored at an index.
- Index starts at 0.
- There's no index before 0, first item will be at 0 index. Example console.log(array[0]); // this will give the first item in an array
console.log(array.length); //number of items in an array
Add an item to an array:
- push() - adds an item into the array
- Loop through an array a) For loop
for(var i=0; i < array.length; i++){ console.log(array[i]); //gives the items in the array }
- Object - is a collection of methods and properties.
- Object is a collection organized on a key.
- Key is a named position. key-value
Examplevar obj = { key:10, a:33; b:"Name" };
- key can be anything that starts with a letter
- value can be anything or any datatype
- objects can have a string-key e.g. var obj = {"key": 23};
Example 2var obj = {name:"Apple", cost:1.99, count:2}; console.log(obj);How to access individual items in an object
console.log(obj.name); //use the key
- Use for..in loop to iterate an object
for(var key in obj){ console.log(key+" "obj[key]); }for..in loop can be used on arrays too:-
var a = ["A", "B", "C"]; for(var j in a){ console.log(j+" "+a[j]); }
Function is a block of code that can be reused. // Function names should be descriptive
- Function can be used to generate an object.
- Function has to be invoked or called in order to execute it
function myfunction(){ console.log("hello Lailah"); } myfunction();
- Functions can take parameters - one and more.
function myfunction(message){ console.log(message); } myfunction("Hello Lailah");function myfunction(message, count){ for(var i=0; i < count; i++ ){ console.log(message); } }
function square(num){ return num*num; //console.log(square())//nothing is run after the return statement } console.log(square(4));
Scope determines where a variable or value is visible.
Scope applies to everything e.g. functions,arrays, objects etc
Example //passing a variable to 2 or more different scripts
<script> var global = "Hello"; </script> <script> console.log("Global "+global); </script>
//An object in an array
//name price count or quantity of items in the cart
var cart = [ ];
//Item will make item objects for us
//Item is a function literal
//Item is a class (capital I) - naming convention
var Item = function(name, price, count){
//this represents that object(Item), this.name - .name is the property name, =name is the parameter passed in the function(name)
this.name = name
this.price = price
this.count = count
};
//create an object in js
//a is the Instance of class (small b)
var brush = new Item("Brush", 1.99, 1); //<- this is the same as -> {name:"Brush", price: 1.99, count:1};
console.log(brush); //Item {name: 'Brush', price: 1.99, count: 1}
//create a new object
cart.push(new Item("Apple", 2.12, 1));
cart.push(brush);
console.log(cart);
Function names should be descriptive
removeItemFromCart(name) //Removes one Item
Can be used for decrement or - button on a cart.
//removeItemFromCartAll(name) //removes all item name can be used to delete items in a cart.
can be used to Empty cart
returns total count it returns the value - total number of items in the cart
returns total cost
listCart() - returns array of Items
- Arrays and Objects don't send a copy but a reference
- Arrays and Objects are always a reference.
- Can make a copy from a reference in an array by using a slice().
a) Example with Arrays
/*
Arrays and Objects don't send a copy but a reference
*/
var a = ["A", "B", "C"];
//to copy an array & not use the reference - use slice()
//var b=a; // passing a reference (saved on computer memory), if used else where, it will give you the same reference value
var b= a.slice(); //slice() gives b a copy of items in a.
b.push("D");
console.log(a); //(3) ['A', 'B', 'C']
console.log(b); //(4) ['A', 'B', 'C', 'D']
- b) Example with objects
var a = {name:"Lailah", age:23 }; var b = a; //setting new value (b) as a pointer to the original object b.name ="Loyce"; console.log(a); // console.log(b);//
JS Objects don't have a slice function that allows creating a copy of an object as the arrays.
saveCart() - saves the cart information to the LocalStorage or Writing information to localStorage.
It will allow us to pass the cart to different pages. Grab the cart information
In js, when a page refreshes or close the browser window - cart information disappears. JS loses its State when page refreshes or close the browser window
LocalStorage is like a Cookie though it stores more flexible information than a cookie.
LocalStorage is best for strings and numbers.
LocalStorage saves in a key-value
localStorage.setItem("name", value); // give it a name and set its value
localStorage.setItem("shoppingCart", cart); //convert cart to a string describing the array and objects - use JSON
JSON - good way to write arrays and objects
localStorage.setItem("shoppingCart", JSON.stringify(cart));
JSON has a method called stringfy() which you pass- A JavaScript value, usually an object or array, to be converted.
ExamplelocalStorage.setItem("username", 'Lailah'); //delete this since it's already saved in the localStorage localStorage.setItem("age", 22);
loadCart() - load the cart information from the localStorage or Reading information from the localStorage.
- It will allow us to retrieve the cart if you leave the page and come back.
- cart = localStorage.getItem("shoppingCart"); //get a string back - change the string back to the array-object
- use JSON's parse() - changes the string back to the array-object
cart = JSON.parse(localStorage.getItem("shoppingCart"));