forked from pearlchen/LLC-JavaScript
-
Notifications
You must be signed in to change notification settings - Fork 0
/
js_arrays_loops.html
503 lines (449 loc) · 17.8 KB
/
js_arrays_loops.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
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ladies Learning Code - JavaScript March 18, 2012</title>
<meta name="viewport" content="width=1280">
<!-- CoderDeck core and extension CSS files -->
<link rel="stylesheet" href="src/deck.js/core/deck.core.css" type="text/css">
<link rel="stylesheet" href="src/deck.js/extensions/navigation/deck.navigation.css">
<link rel="stylesheet" href="src/deck.js/extensions/status/deck.status.css">
<link rel="stylesheet" href="src/deck.js/extensions/hash/deck.hash.css">
<link rel="stylesheet" href="src/deck.js/extensions/menu/deck.menu.css">
<link rel="stylesheet" href="src/css/prettify.css">
<link rel="stylesheet" href="src/css/deck.coder.css">
<link rel="stylesheet" href="src/codemirror/lib/codemirror.css">
<link rel="stylesheet" href="src/codemirror/theme/default.css">
<!-- Custom for LLC -->
<link href='http://fonts.googleapis.com/css?family=Istok+Web' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Podkova' rel='stylesheet' type='text/css'>
<link rel="stylesheet" id='style-theme-link' href="src/css/coderdeck.css" type="text/css" >
<style type="text/css"></style>
</head>
<body class="deck-container">
<script type='text/coderdeck' id='coderdeck-default'>
<html>
<head>
<script src='src/jquery.min.js'>SCRIPTEND</head>
<body>CODE</body>
</html>
</script>
<script type='text/coderdeck' id='coderdeck-style-example'>
<html>
<title>test</title>
<style>CODE</style>
<body>
</body>
</html>
</script>
<div id="presentation">
<!-- **************************************** -->
<article class='slide slide-subhead'>
<h1>JavaScript Part ??</h1>
<p>Arrays and Loops</p>
</article>
<!-- SLIDE: ARRAYS INTRO -->
<article class='slide slide-list'>
<h2>Arrays</h2>
<br />
<p>
<span class="keyword">Arrays</span> are similar to objects; they both hold a collection of values. However, arrays hold its values in a numerical index rather than labels.
</p>
<p>
Think of arrays as egg cartons. All the eggs are in one carton but each egg has its own slot.
</p>
<p>
<img src="assets/egg-carton.jpeg" alt="egg-carton" width="300" height="230" style="float:left;padding-right: 20px;" />
Just like variables and objects, declare an array with the keyword <code>var</code>.
</p>
<p class="centered"><strong><code>var eggspressions = <span class="assignment">[]</span>;</code></strong></p>
<br /><br /><br /><br /><br />
<div class="reminders single-line">
<p>Unlike objects, arrays are declared with square brackets <strong><code>[ ]</code></strong>.</p>
</div>
</article>
<!-- SLIDE: ARRAYS HOW-TO -->
<article class='slide slide-list'>
<h2>Arrays How-to</h2>
<pre class='prettyprint'>
//declaring an empty array
var eggspressions = [];
</pre>
<p>Set values using a square bracket <code>[ ]</code> notation.</p>
<pre class='prettyprint'>
//assigning values
eggspressions[0] = "skeptical";
eggspressions[1] = "frazzled";
eggspressions[2] = "silly";
eggspressions[3] = "giggling";
</pre>
<p>
The numbers inside the square brackets <code>[ ]</code> are referred to as the
<br />
<strong>index</strong> number. Array indexes <strong>always</strong> start at <strong>zero</strong>.
</p>
<div class="reminders">
<p>
Arrays can be declared in different ways.
<br />
The above example can also be declared like this:
<br />
var eggspressions = ["skeptical","frazzled","silly", "giggling"];
<br /><br />
To read up more on Arrays, go here:<br />
<a href="https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array">https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array</a>
</p>
</div>
</article>
<!-- SLIDE: ARRAYS - ACCESSING VALUES -->
<article class='slide slide-list'>
<h2>Arrays and Indexes</h2>
<p>
<span class="keyword">Index</span> numbers are used to <strong>assign</strong> values.
</p>
<p>
Index numbers are also used to <strong>access</strong> values.
</p>
<p>
To access the value of the second egg in the <code>eggspressions</code> array, use index 1 since it's the second item in the list.
</p>
<textarea class='coder-editor coder-editor-full'>
<script>
var eggspressions = [];
eggspressions[0] = "skeptical";
eggspressions[1] = "frazzled";
eggspressions[2] = "silly";
eggspressions[3] = "giggling";
// even though it has an index of 1...
document.write("The 2nd egg is '" + eggspressions[1] + "'." );
</script></textarea>
</article>
<!-- SLIDE: ARRAYS & PROPERTIES -->
<article class='slide slide-list'>
<h2>Arrays and Properties</h2>
<p>
Since <span class="keyword">Arrays</span> are also objects, there are many properties associated with the Array object.
</p>
<p>The <strong><code>length</code></strong> property is also associated with array objects.</p>
<p>
As mentioned previously, the <code>length</code> property returns the number of characters when associated with a <span class="keyword">string</span>. When used with an <span class="keyword">Array</span>, the <code>length</code> property returns the number of elements.
</p>
<textarea class='coder-editor coder-editor-full'>
<script>
// string variable
var name = "Christina";
document.write(name.length);
document.write("<br />");
// array
var eggspressions = [];
eggspressions[0] = "skeptical";
eggspressions[1] = "frazzled";
eggspressions[2] = "silly";
eggspressions[3] = "giggling";
//document.write(eggspressions.length);
</script></textarea>
</article>
<!-- SLIDE: ARRAYS - PHOTO SLIDER EXAMPLE -->
<article class='slide slide-list'>
<h2>Arrays & Length: Why?</h2>
<p>
It is common to use JavaScript to run through a list of values and apply some code to it. In order to do this, we need to know how many elements there are in total.
</p>
<p>
Let's look at this photo gallery from
<a href="http://www.theglobeandmail.com/multimedia/camera-club/your-best-photos-of-movement/article2355552/">theglobeandmail.com</a>
and figure out how length can be used here.
</p>
<p class="centered"><img src="assets/globe-mail.jpg" alt="globe-mail" /></p>
<span class="marker">*</span>
</article>
<!-- SLIDE: LENGTH-1 -->
<article class='slide slide-list'>
<h2>Arrays & Length and the 0 Index</h2>
<p>How do we access a particular value?</p>
<p>By using the index number.</p>
<p>
So how do we access the
<strong>last</strong>
value?
</p>
<pre class='prettyprint'>
var eggspressions = [];
eggspressions[0] = "skeptical";
eggspressions[1] = "frazzled";
eggspressions[2] = "silly";
eggspressions[3] = "giggling";
</pre>
<p>
To access the last index value, you can use
<strong><code>eggspressions[3]</code></strong>.
</p>
<p>BUT...</p>
<p>
You can also use
<strong><code>eggspressions[eggspressions.length-1]</code></strong>.
</p>
</article>
<!-- SLIDE: HUH -->
<article class='slide slide-list'>
<h1 style="font-size:6em;">Huh?</h1>
</article>
<!-- SLIDE: LENGTH-1 EXPLANATION-->
<article class='slide slide-list'>
<h2>
REWIND: Arrays & Length
<br />
and the 0 Index
</h2>
<pre class='prettyprint'>
var eggspressions = [];
eggspressions[0] = "skeptical";
eggspressions[1] = "frazzled";
eggspressions[2] = "silly";
eggspressions[3] = "giggling";
</pre>
<p>Let's break it down.</p>
<p><strong>›</strong> <strong><code>eggspressions.length</code></strong> returns 4<br />
<strong>›</strong> index of last element is 3<br />
<strong>›</strong> <strong><code>eggspressions.length-1</code></strong> is the same as 4 - 1 and will return 3<br />
<strong>›</strong> <strong><code>eggspressions[3]</code></strong> returns the last value<br />
<strong>›</strong> <strong><code>eggspressions[eggspressions.length-1]</code></strong> is the same as <strong><code>eggspressions[3]</code></strong></p>
<p>Clear as mud?</p>
</article>
<!-- SLIDE: WHEN TO USE LENGTH-1 & DEMO -->
<article class='slide slide-list'>
<h2>How is this useful?</h2>
<p>
Since the index always begins at 0, the last index value is always <code>length-1</code>.
This is useful if you want to always access the last index, despite new additions, and apply some code to it.
</p>
<textarea class='coder-editor coder-editor-full'>
<script>
var eggspressions = [];
eggspressions[0] = "skeptical";
eggspressions[1] = "frazzled";
eggspressions[2] = "silly";
eggspressions[3] = "giggling";
document.write(eggspressions[3] + " is the last element in the array. <br />");
document.write(eggspressions[eggspressions.length-1] + " is the last element in the array.");
</script></textarea>
<span class="marker">*</span>
</article>
<!-- LOOPS INTRO -->
<article class='slide slide-list'>
<h2>Loopty-Loops</h2>
<br />
<p>
Why use loops? Because sometimes we need to <strong>execute repetitive code</strong> for a specified number of times or through a list of values.
</p>
<p>
Loops will execute the same code continuously, using conditional statements to determine when to begin and stop.
</p>
<p>It's like creating a playlist on your favorite music player.</p>
<p>
You create a list of songs, press play and then each song is played automatically in the set order of the playlist.
When it reaches the end of the playlist, it stops.
</p>
<p>
We will be discussing
<span class="keyword">while loops</span>
and
<span class="keyword">for loops</span>.
</p>
</article>
<!-- WHILE LOOP -->
<article class='slide slide-list'>
<h2>While Loop</h2>
<p>
The
<span class="keyword">while loop</span>
executes the code contained in curly braces <code>{ }</code>
<strong>while</strong>
the condition is true.
</p>
<p>
An index variable is required to keep track of its place in the loop.
</p>
<p>
The
<span class="keyword">while loop</span>
stops executing the code once the condition becomes false.
</p>
<p>
If you had 10 songs in your playlist, the player won't stop until it reaches the end of song 10.
</p>
<pre class='prettyprint'>
//declare index variable
var i = 0;
while ( i < playlist.length ) {
playCurrentSong();
i = i + 1; // adds 1 to the current index so it moves to the next song
}
</pre>
<div class="reminders">
<p>
If the condition is always true, the loop will run infinitely and will never exit the while loop.
This can cause your browser to crash!
</p>
</div>
</article>
<!-- WHILE LOOP - TEMP CONVERSION -->
<article class='slide slide-list'>
<h2>While Loop in Action!</h2>
<br />
<p>
Let's use the <span class="keyword">while loop</span> to output the mathematical formula for converting Celsius to Fahrenheit.
</p>
<p>(The formula is: Temperature = Temperature * 9 / 5 + 32)</p>
<p>
This next example uses a <span class="keyword">while loop</span> to output the results of the temperature formula into HTML table rows that are also added dynamically.
</p>
<p>
It will stop when we reach 30 degrees Celsius (or whatever number is declared in the condition).
</p>
<p>See next slide for the example.</p>
</article>
<!-- WHILE LOOP - TEMP CONVERSION CODE -->
<article class='slide slide-list'>
<h2>While Loop Temperature Conversion</h2>
<p>
Let's look at the temperature conversion table with and without JavaScript and compare the difference in the amount of repetitive code required to create a table like this manually.
</p>
<p>
Conversion table using a <a href="exercises/temperature.html">while loop</a>.
</p>
<p>
Conversion table <a href="exercises/temperature-nojs.html">without JavaScript</a>.
</p>
<p>
View source and compare the difference between the amount of code.
</p>
<div>
<img src="assets/while-loop.jpg" alt="while-loop" style="float:left;padding-right:20px;" />
<img src="assets/no-while-loop.jpg" alt="no-while-loop" />
</div>
</article>
<!-- FOR LOOP -->
<article class='slide slide-list'>
<h2>For Loops</h2>
<p>
A <span class="keyword">for loop</span> also loops through the code a specified number of times until the condition is false.
</p>
<p>The index, conditional test and incrementer are all declared in one line. Basically, it's the <span class="keyword">while loop</span> condensed.</p>
<pre class='prettyprint'>
/* While Loop */
var i = 0; //index
while ( i < playlist.length ) { //condition
playCurrentSong();
i = i + 1; // incrementer
}
</pre>
<pre class='prettyprint'>
/* For Loop */
// index, condition, incrementer
for ( var i = 0; i < playlist.length; i++ ) {
playCurrentSong();
}
</pre>
<div class="reminders">
Incrementer (i++) and decrementer (i--) operators add or subtract one.<br />
i++ is the same as i = i + 1<br />
i-- is the same as i = i - 1
</div>
</article>
<!-- FOR LOOP and ARRAYS -->
<article class='slide slide-list'>
<h2>For Loops and Arrays</h2>
<p>
<span class="keyword">For loops</span> are useful when used it conjunction with <span class="keyword">arrays</span> because it can be used to execute specific actions while going through the list of values.
</p>
<p>
Back to our robot store. It wouldn't be much of a store if there was only one product!
We can create a list of different products with various prices by creating an array.
</p>
<pre class='prettyprint'>
var productPrices = [];
productPrices[0] = 17.99;
productPrices[1] = 25;
productPrices[2] = 13.99;
productPrices[3] = 9.99;
productPrices[4] = 24.99;
productPrices[5] = 8.99;
</pre>
</article>
<!-- FOR LOOP and ARRAYS w/robot store -->
<article class='slide slide-list'>
<h2>For Loops, Arrays, Robots and Sales</h2>
<p>Suppose we wanted to put all the items over $15 on sale? Let's use the <span class="keyword">for loop</span> to determine which items are eligible for the sale and output the product number.</p>
<textarea class='coder-editor coder-editor-full'>
<script>
var productPrices = [];
productPrices[0] = 17.99;
productPrices[1] = 25;
productPrices[2] = 13.99;
productPrices[3] = 9.99;
productPrices[4] = 24.99;
productPrices[5] = 8.99;
for (i=0; i < productPrices.length; i++) {
var value = productPrices[i];
if (value > 15){
document.write("Product " + (i+1) + " is on sale.<br />");
} else {
document.write("Product " + (i+1) + " is not on sale.<br />");
}
}
</script></textarea>
</article>
<article class='slide slide-list'>
<h2>Mini-exercise #6 (10-15 minutes)</h2>
<p>
As owner of Planet Robot, you decide to have a special members-only sale: 50% off all items with a secret password! (p.s. the password is "llc"!)
</p>
<p>
Sounds like a great deal for the customer but all you have is a static HTML page right now. Are you going to go through every single product, calculate the discounted price, and then update every entry manually? No, you're going to use loops and arrays!
</p>
<p>
Download the HTML exercise file:
<a href="http://pchen.github.com/LLC-JavaScript/exercises/shopping_cart_products_start.html">exercises/shopping_cart_products_start.html</a>
</p>
<p class="assignment">TODO: Check within the code for your THREE tasks.</p>
<p class="sidenote">
If you're stuck, here's the solution file:
<a href="http://pchen.github.com/LLC-JavaScript/exercises/shopping_cart_products_final.html">
http://pchen.github.com/LLC-JavaScript/exercises/shopping_cart_products_final.html
</a>
</p>
</article>
<!-- SLIDE: Next section -->
<article class='slide slide-list'>
<p class="centered vertically_centered"><a href="jquery-indepth.html"><img src="assets/next_section_icon.gif" width="230" height="70" alt="Click to go to next section" /></a></p>
</article>
<!-- **************************************** -->
</div>
<!-- END div id=presentation -->
<script src='src/jquery.min.js'></script>
<script src="src/modernizr.js"></script>
<!-- Update these paths to point to the correct files. -->
<script src="src/jquery.tmpl.min.js"></script>
<script src="src/deck.js/core/deck.core.js"></script>
<!-- Code Mirror -->
<script src="src/codemirror/lib/codemirror.js"></script>
<script src="src/codemirror/mode/xml/xml.js"></script>
<script src="src/codemirror/mode/css/css.js"></script>
<script src="src/codemirror/mode/javascript/javascript.js"></script>
<script src="src/codemirror/mode/htmlmixed/htmlmixed.js"></script>
<!-- Prettify -->
<script src="src/prettify.js"></script>
<!-- Deck Core and extensions -->
<script src="src/deck.js/extensions/status/deck.status.js"></script>
<script src="src/deck.js/extensions/navigation/deck.navigation.js"></script>
<script src='src/deck.coder.js'></script>
<script src="src/deck.js/extensions/hash/deck.hash.js"></script>
<script src="src/deck.js/extensions/menu/deck.menu.js"></script>
<script>
$(function() {
$.deck('.slide');
});
</script>
</body>
</html>