-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathobjects.html
296 lines (290 loc) · 16.7 KB
/
objects.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
<!DOCTYPE html>
<html ng-app="IntroductionApp">
<head>
<title>CodeFirst:Girls Introductory Course</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="main.css">
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-resource/angular-resource.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script type="text/javascript" src="bower_components/angular-ui/build/angular-ui.min.js"></script>
<link rel="stylesheet" href="bower_components/angular-ui/build/angular-ui.min.css">
</head>
<body ng-controller="ContentController">
<div class="container" style="padding-top: 20px;">
<div class="row">
<div id="leftPane" class="col-xs-3">
<img class="cfg" src="cfg.png" alt="Code First Girls Logo" />
<p class="mini-bio">A short taster session into the fundamental technologies powering the world wide web.</p>
<div class="progress progress-danger">
<div class="progress-bar" role="progressbar" aria-valuenow="{{completedPercentage()}}" aria-valuemin="0" aria-valuemax="100" style="width: {{completedPercentage()}}%;">
<span class="sr-only">{{completedPercentage()}}% Complete</span>
</div>
</div>
<div class="sidebar">
<ul>
<li><a href="#basket">Shopping Basket</a></li>
<li><a href="#new">New HTML Page</a></li>
<li><a href="#scope">Out of Scope</a></li>
<li><a href="#cookies">Cookies</a></li>
<li><a href="#local">Local Storage</a></li>
<li><a href="#storing">Storage</a></li>
<li><a href="#basket_total">Total to basket.html</a></li>
<li><a href="#what">How is this relevant?</a></li>
<li><a href="#end">The End</a></li>
</ul>
</div>
</div>
<div id="rightPane" class="col-xs-9">
<h1 id="basket">Displaying the Shopping Basket</h1>
<p>
In this session we'll build that page of our site that will display the shopping basket. It's awesome that we can add up the total price of goods in our basket, but not so useful if we can't see what we're buying!
</p>
<p>
But unfortunately before we can build that, we do need yet another little bit of theory!
</p>
<h2 id="new">A page for your basket</h2>
<p>
Recall that when we created our <code>index.html</code> page we created a link to the <code>basket.html</code> page - the page that will display the contents of the basket. Let's create this now.
</p>
<tasks>
<item title="Create a new file in sublime"></item>
<item title="Save this as basket.html"> This must be in the same folder as your index.html file!</item>
<item title="Copy the structure of your index.html page"> Copy everything from the DOCTYPE, html and head into your new file</item>
<item title="Create a new body tag"></item>
<item title="Copy the nav bar HTML divs over"></item>
<item title="Insert a h1 tag inside the body"> Look below for details, it should have a <code><span></code> tag inside that too!</item>
<item title="Create your script tag above the </body>"></item>
<item title="Close the body and html tags"></item>
</tasks>
<p>
You should have a HTML skeleton that looks similar to:
</p>
<pre>
<DOCTYPE html>
<html>
<head>
... everything from index.html
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
...
</div>
<h1>Total: £<span id="basket_total">0.00</span></h1>
</body>
<script>
</script>
</html>
</pre>
<h1 id="scope">Using our total variable</h1>
<p>
Now - you may be thinking this will be an easy task. We have our total variable, right? We can just update the DOM to display the contents of our var total.
</p>
<p>
Maybe you're thinking you could use code like: <code>$("#basket_total").text(total)</code>.
</p>
<p>
Whilst that's sensible to think, unfortunately it's not that easy.
</p>
<p>
When we browse away from our <code>index.html</code> file we "lose" access to our total variable. We can only use that when we are on the page on which it is set.
</p>
<tasks>
<item title="Add items into your basket"></item>
<item title="Refresh the page"></item>
<item title="Verify that the basket value is again zero"></item>
</tasks>
<h2 id="cookies">Cookies?</h2>
<p>
I'm sure many of you may have heard of cookies, but maybe you're not quite sure what they are. Cookies are small files that live in the browser that can hold a small amount of data. Cookies persist over page loads, so they would have been perfect for storing the total value of our shopping basket in.
</p>
<p>
Before HTML5 came along, if we'd have wanted to store some data accross our entire site we'd would have used cookies, now however we have an alternative: <code>localStorage</code>
</p>
<h2 id="local">Local Storage</h2>
<p>
localStorage is a modern alternative to storing data in cookies. localStorage allows us to store things in key value pairs.
</p>
<p>
These key value pairs allow us to store something and give it a name, and then retrieve it later.
</p>
<p>
An example:
</p>
<pre>
localStorage.setItem("total", 10.00)
localStorage.setItem("name", "My Name")
var total = localStorage.getItem("total")
var name = localStorage.getItem("name")
</pre>
<p>
To store something with a name in localStorage we use <code>localStorage.setItem("name", "value")</code>.
</p>
<p>
To later retrieve that name we use: <code>localStorage.getItem("name")</code>
</p>
<tasks>
<item title="Browse to google.co.uk"></item>
<item title="Open Chrome's Console"></item>
<item title="Set your name as a value in localStorage"><code>localStorage.setItem("name", "Your name")</code></item>
<item title="Select the Resources tab"></item>
<item title="Select localStorage from the left">You should be able to see all of your stored local data</item>
<item title="Back to the Console tab"></item>
<item title="Retrieve your name from localStorage"><code>localStorage.getItem("name")</code></item>
<item title="Close the tab in Chrome"></item>
<item title="Open a new tab and again browse to google.co.uk"></item>
<item title="Use localStorage.getItem again to get your name back of localStorage"> Note how this persists even though we closed the tab!</item>
</tasks>
<h2 id="storing">Storing the total price in localStorage</h2>
<p>
Okay - we know understand what localStorage is. We can use it to store the total basket value. We can update the localStorage value every time it changes and then retrieve it on the basket page.
</p>
<tasks>
<item title="Open index.html in Sublime"></item>
<item title="Set total in localStorage"> See below. Add this to the click handler function.</item>
</tasks>
<pre>
total = total + price;
localStorage.setItem('total', total);
</pre>
<p>
This creates a key in our localStorage with a name of total and a value of the current basket total.
</p>
<p>
We also need to set the initial value of our total variable be equal to the current stored value. This ensures we don't reset total to 0.00 each time we load the page.
</p>
<p>
The weird syntax below || means OR. If nothing is found in localStorage we then set the initial value to 0.00.
</p>
<pre>
var total = 0.00; // old code
var total = localStorage.getItem('total') || 0; // new code
</pre>
<tasks>
<item title="Read the above code"></item>
<item title="Change your var total line of code to be the second line"> This sets the initial value of total to be the currently stored value</item>
<item title="Add items into the basket and verify that the price still updates in the nav bar"></item>
</tasks>
<h2 id="basket_total">Adding total to our basket page</h2>
<p>
Now that we have our total variable stored in localStorage we can access it on our basket.html page.
</p>
<tasks>
<item title="Inside the <script> tag add a variable that stores the result of accessing localStorage"><code>var total = localStorage.getItem("total");</code></item>
<item title="Update #total and #basket_total with the value of this total variable"><code>$('#total').text(total);</code> <code>$('#basket_total').text(total)</code></item>
<item title="Refresh basket.html in Chrome. Verify that the total basket order price updates"></item>
</tasks>
<h2 id="objects">Objects in JavaScript</h2>
<p>
Objects, commonly called <strong>dictionaries</strong> or <strong>hashes</strong> are a fundamental data type in JavaScript and other programming languages.
</p>
<p>
Much like the name dictionary would suggest, objects are key value pairs of data. The dictionary analogy taken a little further: A dictionary of words and definitions could be considered a key value pair, where the key in each case is the word and the value is the description. This is how you make a dictionary in JavaScript
</p>
<pre>
{
dog: "a common animal with four legs, especially kept by people as a pet or to hunt or guard things",
cat: "a small animal with fur, four legs, a tail, and claws, usually kept as a pet or for catching mice"
}
</pre>
<p>
In general, we use the syntax:
</p>
<pre>
{
name: 'value',
another_nae: 'another value',
foo: 'bar'
}
</pre>
<tasks>
<item title="Open Chrome's Console"></item>
<item title="Create a new dictionary called item with a title and a price"><code>var item = { title: 'Product title', price: '10.00'}</code></item>
<item title="Practice accessing parts of the dictionary"><code>item.title</code> & <code>item.price</code></item>
</tasks>
<h2 id="what">What's this got to do with anything?</h2>
<p>
The way our shopping cart with work:
<ul>
<li>
Creates an array to store the basket items in
</li>
<li>
Every time Add to Button is clicked create a dictionary representing the item
</li>
<li>
Push that dictionary into the array of basket items
</li>
<li>
Store this array in localStorage
</li>
<li>
When the basket.html page is visited
</li>
<li>
Retrieve the basket items out of localStorage
</li>
<li>
Use jQuery .append() to create a new HTML tag forEach element in the basket items array. Display this on the basket.html page
</li>
</ul>
</p>
<p>
Much like how we added a custom attribute to our Add to Basket buttons for the price, we'll now do the same for title.
</p>
<tasks>
<item title="Open index.html in Sublime"></item>
<item title="Add a custom attribute to each add to basket buttom"><code><a price="10.00" title="JS Book>"</code></item>
</tasks>
<h2 id="end">The open ended end</h2>
<p>
Believe it or not, you now have enough knowledge to build <a href="final.html"> this</a> simple shopping cart. It's obviously in need of some critical features before we could publish it online, but it's a good start.
</p>
<p>
Below you will find the code that adds the extra features in. You should study the code to see what it is doing before adding it to your site.
</p>
<pre>
index.html <script> tag:
var total = localStorage.getItem('total') || 0.00;
var items = JSON.parse(localStorage.getItem('items')) || [];
function handleClick() {
var price = parseFloat($(this).attr('price'));
var title = $(this).attr('title');
total = parseFloat(total);
total = total + price;
total = total.toFixed(2);
localStorage.setItem('total', total);
items.push({title: title, price: price});
localStorage.setItem('items', JSON.stringify(items));
$('#total').text(total);
}
$('.item').click(handleClick);
$('#total').text(total)
</pre>
<pre>
basket.html <script> tag
var total = localStorage.getItem("total");
$('#total').text(total);
$('#basket_total').text(total);
var items = JSON.parse(localStorage.getItem('items')) || [];
items.forEach(function(item) {
$('#items').append('<li>' + item.title + '</li>')
})
</pre>
<tasks>
<item title="Read the above code"> Try and make sense of it! You may need to do some googling!</item>
<item title="Add the parts you don't have"> Some of these lines are new, add them to your index.html and basket.html file</item>
<item title="You'll need to add a <ul> tag to basket.html somewhere"><code><ul id="items"></ul></code> It should be left empty!</item>
<item title="Can you improve the looks?"></item>
</tasks>
</div>
</div>
</div>
<script type="text/javascript" src="controllers.js"></script>
<script type="text/javascript" src="directives.js"></script>
</body>
</html>