forked from pearlchen/LLC-JavaScript
-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathjs_quick_start.html
782 lines (650 loc) · 29.6 KB
/
js_quick_start.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
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ladies Learning Code - Intro to JavaScript</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>
<h1>I'm a H1 heading</h1>
<h2>I'm a H2 heading</h2>
<p>Pargraph of text <p> here</p>
<div class='stuff'>I'm a div <div> with class "stuff"</div>
<div id='my-div'>I'm a <div> with id "my-div"</div>
</body>
</html>
</script>
<div id="presentation">
<!-- **************************************** -->
<!-- SLIDE: PART 1 INTRO -->
<article class='slide slide-subhead'>
<h1>JavaScript Part 1</h1>
<p>Getting started with an intro to functions,<br>
variables and operators</p>
</article>
<!-- SLIDE: EXERCISE OVERVIEW -->
<article class='slide slide-list'>
<p>As the owner of the thriving store, <span style="color:#B1009A;font-weight:bold;">Planet Robots</span>, you have to make sure you have a top notch website.</p>
<div class="centered">
<img src="assets/planet-robots.jpg" alt="planet-robots" />
</div>
</article>
<!-- SLIDE: EXERCISE OVERVIEW -->
<article class='slide slide-list'>
<h2>JavaScript Exercise Overview</h2>
<br />
<p>You'll want your site to be capable of offering online shopping and to collect customer information to print shipping labels.</p>
<p>You'll also want to make sure that everything works properly as well. That means customers can't submit empty forms and product totals are calculated properly in their shopping carts.</p>
<p>In order to create a website that can handle these requirements, we will need to learn how to use <span class="keyword">functions</span>, <span class="keyword">variables</span>, and <span class="keyword">conditionals</span>.</p>
</article>
<!-- SLIDE: INTRO TO FUNCTIONS -->
<article class='slide slide-list'>
<h2>Intro to Functions</h2>
<p>
What is something that you do that's very repetitive or a hassle? Wouldn't it be great if it was automated?
</p>
<table width="100%">
<tr>
<th colspan="2" height="50" align="left" style="font-size:28px;">Paying for parking:</th>
</tr>
<tr>
<th width="50%" align="left" style="font-size:24px;">
The old way
<img src="assets/thumb-down.png" alt="thumb-down" width="32" height="32" style="float:left;margin-bottom:0;padding-right:5px;" />
</th>
<th width="50%" align="left" style="font-size:24px;">
The improved way
<img src="assets/thumb-up.png" alt="thumb-up" width="32" height="32" style="float:left;margin-bottom:0;padding-right:5px;" />
</th>
</tr>
<tr>
<td style="padding-top: 20px;">
<ol>
<li>Find bank machine</li>
<li>Pull out bank card</li>
<li>Get money out from ATM</li>
<li>Buy chips so you can make change</li>
<li>Put change into machine</li>
<li>Take receipt</li>
</ol>
</td>
<td style="padding-top: 20px;">
<ol>
<li>Pull the PayPass credit card from your wallet</li>
<li>Tap</li>
<li>Take receipt</li>
</ol>
</td>
</tr>
</table>
</article>
<!-- SLIDE: INTRO TO FUNCTIONS cont -->
<article class='slide slide-list'>
<h2>Intro to Functions</h2>
<p>We can think of step 2 as a function. We can't see all the steps that happen but we know that performing the action of tapping the card will execute some instructions that will allow us to pay automatically.</p>
<table width="100%">
<tr>
<th width="50%" align="left" style="font-size:24px;">
The improved way
<img src="assets/thumb-up.png" alt="thumb-up" width="32" height="32" style="float:left;margin-bottom:0;padding-right:5px;" />
</th>
</tr>
<tr>
<td style="padding-top: 20px;">
<ol>
<li>Pull the PayPass credit card from your wallet</li>
<li class="highlight">Tap</li>
<li>Take receipt</li>
</ol>
</td>
</tr>
</table>
</article>
<!-- SLIDE: INTRO TO FUNCTIONS cont -->
<article class='slide slide-list'>
<h2>Intro to Functions</h2>
<br />
<p><span class="keyword">Functions</span> are used to make the code "do things."</p>
<p>To get the function to execute, you have to <strong>call the function</strong> by using the function <em>name</em> followed by <em>round brackets</em>.</p>
<p>If the credit card tap was a function in JavaScript, it could look something like this:</p>
<p><code>tapCard()</code></p>
</article>
<article class='slide slide-list'>
<h2>Intro to Functions</h2>
<p>We can create our own functions but there are already some handy ones built into JavaScript. There are three functions that are useful for testing and writing code.</p>
<p>
<code>prompt();</code> and <code>alert();</code> show popups in the browser.
<code>document.write();</code> outputs text onto the page, aka the <strong>document</strong>.
</p>
<textarea class='coder-editor coder-editor-full'>SCRIPT
alert("This is an alert box.");
prompt("This is a prompt box. Enter some info.");
document.write("document.write outputs text into the page.");
SCRIPTEND</textarea>
<div class="reminders">
<p><code>document.write();</code> is a quick and easy way to output text onto the page but is not best practice for use in "the real world." <code>console.log();</code> is better. Here's some more <a href="http://stackoverflow.com/questions/4743730/what-is-console-log-and-how-do-i-use-it" target="_blank">info</a>.</p>
</div>
</article>
<!-- SLIDE: COMMENTS -->
<article class='slide slide-list'>
<h2>Comments</h2>
<p>
Sometimes you want to write notes to yourself (and others) to organize blocks of code or leave explanations. Use comments! <strong>JavaScript will ignore comments and not execute them.</strong>
</p>
<pre class='prettyprint'>
// This is how you leave a single line comment.
// You can write many single line comments.
// Just make sure to add the double slash
// for every new line.
</pre>
<p>Here's another way to comment larger blocks of text.</p>
<pre class='prettyprint'>
/* This is how you leave
multi-line comments for when you
want to write a longer message */
</pre>
<p>Multi-line comments are great for "hiding" large blocks of code so you can try something new without erasing your old code.</p>
</article>
<!-- SLIDE: VARIABLES -->
<article class='slide slide-list'>
<h2>Variables</h2>
<br />
<p><span class="keyword">Variables</span> are like containers or a box. They are used to <strong>store values</strong> so you can use them later on, when you need them.</p>
<p class="centered"><img src="assets/storage_boxes.png" /></p>
</article>
<!-- SLIDE: VARIABLES HOW-TO -->
<article class='slide slide-list'>
<h2>Variables How-to</h2>
<p><span class="keyword">Declare</span> variables with the keyword <strong><code>var</code></strong>.</p>
<pre class='prettyprint'>var email;</pre>
<p><span class="keyword">Assign</span> a value to the variable using the equals (<code>=</code>) sign.</p>
<pre class='prettyprint'>email = "[email protected]";</pre>
<p>Now the computer will remember my email address!</p>
<div class="reminders">
<p>Take note that the value of the variable is written between quotes.<br />
More on this soon.</p>
</div>
</article>
<!-- SLIDE: VARIABLES (cont'd) -->
<article class='slide slide-list'>
<h2>Variables (cont'd)</h2>
<br />
<p>Variables are also like the computer's short-term memory. It doesn't remember anything unless instructed. In this example, the computer can't remember anybody's name!</p>
<p><em>But it can remember it if we use a variable.</em></p>
<textarea class='coder-editor coder-editor-full'>SCRIPT
// prompt() is a function for showing a popup
// with an input text field that you can type into
prompt("What's your name?");
// alert() is exactly like prompt()
// but doesn't have an input field
alert("Hello....?");
// document.write() also uses the text between the parenthese and quotes
// but outputs it directly on the webpage (instead of a popup)
document.write("Hello....?");
SCRIPTEND</textarea>
<script type='coder-solution'>SCRIPT
// create a VARIABLE called "name"
var name;
// take the text you wrote in the popup input field
// and save it to the "name" variable
name = prompt("What's your name?");
// use the value of "name" and show it in the alert
alert(name);
// also output it directly on the webpage
document.write(name);
SCRIPTEND</script>
</article>
<!-- SLIDE: VARIABLES (cont'd) shipping example -->
<article class='slide slide-list'>
<h2>Variables (cont'd)</h2>
<br />
<p>
In a web checkout form that asks for your name and address, variables can be used to store this information.
The stored information can then be used to create things like shipping labels.</p>
<br />
<p class="centered">
<img src="assets/var-shipping-example.jpg" width="594" height="193" />
</p>
</article>
<!-- SLIDE: STATEMENTS -->
<article class='slide slide-list'>
<h2>Aside: Statements</h2>
<p><span class="keyword">Statements</span> are commands that tell the computer what to do.<br>
End a statement with a semicolon (<code>;</code>) to tell the computer that the statement is done.</p>
<p>Ending a statement with a semicolon is like ending a sentence with a period.</p>
<p>You can also declare a variable with one or two statements.</p>
<pre class='prettyprint'>var email;
email = "[email protected]";
</pre>
<p>is the same as</p>
<pre class='prettyprint'>var email = "[email protected]";</pre>
</article>
<!-- SLIDE: AN ASIDE -->
<article class='slide slide-list'>
<h2>Say My Name, Say My Name</h2>
<br />
<p>Let's try creating some variables.</p>
<p>Below is an example of a variable for your name. Try creating another variable for your email address. Output the values using <code>document.write()</code>.</p>
<textarea class='coder-editor coder-editor-full'>SCRIPT
var name = "Brenna";
document.write(name);
document.write("<br />"); //just a line break
// create an email variable here
SCRIPTEND</textarea>
<script type='coder-solution'>SCRIPT
var name = "Brenna";
document.write(name);
document.write("<br />"); //just a line break
var email = "[email protected]";
document.write(email);
SCRIPTEND</script>
</article>
<!-- SLIDE: VARIABLES - assignment operator -->
<article class='slide slide-list'>
<h2>Assigning Variables</h2>
<br />
<p><span class="assignment">IMPORTANT!</span></p>
<p>Using the equals (<code>=</code>) symbol in Javascript is <span class="highlight">NOT</span> the same as in math.</p>
<p>
<code>var total = 1 + 1</code>
is not the same as
<code>1 + 1 = 2</code>
</p>
<p><code>var total = 1 + 1</code> means:<br />
<span class="keyword">evaluate</span> everything to the <em>right</em> of the equals sign (e.g. <code>1 + 1</code>),
<br />then <span class="keyword">assign</span> this value (e.g. the number <code>2</code>) to the variable on the <em>left</em> side.
</p>
<p>You will see later that we can re-assign new values to an existing variable.</p>
</article>
<!-- SLIDE: VARIOUS VARIABLES -->
<article class='slide slide-list'>
<h2>Various Variables</h2>
<p>Variables can hold different kinds of values. We've been using <span class="keyword">strings</span> so far but variables can also hold other kinds of values.</p>
<p>1. Numeric variable (integers & decimals)</p>
<pre class='prettyprint'>
var someIntegerNumber = 10;
var someDecimalNumber = 10.5;
</pre>
<p>2. Boolean variable (true/false)</p>
<pre class='prettyprint'>
var isSaturday = true;
var isSunday = false;
</pre>
<p>3. String variable (letters, words & sentences)</p>
<pre class='prettyprint'>
var singleWordString = "hello";
var sentenceString = "Hello, good day to you!";
var numberString = "10";
</pre>
<div class="reminders single-line">
<p>Only string values are written inside single or double quotes ('string' or "string").</p>
</div>
<br />
</article>
<!-- SLIDE: VARIABLE NAMES - NO SPACES -->
<article class='slide slide-list'>
<h2>Variables: Tips & Best Practices</h2>
<p>Variables <strong>can't contain spaces</strong>. Use a convention called <span class="keyword">camel case</span>.
<br />Every new word is capitalized and the result looks <strong>likeCamelHumps</strong>.
</p>
<p>JavaScript is <strong>case sensitive</strong> (uppercase and lowercase letters are treated differently) so variable names are also case sensitive.</p>
<p>Another convention is to use underscores <strong>to_separate_words</strong>. This is common in other programming languages (like PHP).</p>
<textarea class='coder-editor coder-editor-full'>SCRIPT
// We might read this as "greet me" but
// small differences make a big difference to JavaScript
var greetme = "Hello, what's your name?";
var greetMe = "Bonjour, quel est ton nom?";
var greet_me = "Hola, ¿cómo te llamas?";
// test our different variables by outputting them to the page
document.write("greetme: " + greetme + "<br />");
document.write("greetMe: " + greetme + "<br />");
document.write("greet_me: " + greetme + "<br />");
SCRIPTEND</textarea>
</article>
<!-- SLIDE: VARIABLES - DESCRIPTIVE NAMES -->
<article class='slide slide-list'>
<br />
<h2>Variables: Tips & Best Practices</h2>
<p>
When naming a variable, it's best to give it a descriptive name.
</p>
<p>
It makes it easier to see, at a glance, what kind of value that variable is going to hold.
</p>
<p>
This is especially useful when sharing code with others who may not use the same kinds of abbreviations.
</p>
<p>
<code>var <strong>firstName</strong>;</code> ← Clear that first name will go here.
<br />
<code>var <strong>fn</strong>; </code> ← Not as obvious as firstName.
<br />
<code>var <strong>x</strong>; </code> ← Not clear at all.
</p>
</article>
<!-- SLIDE: VARIABLES - UNDERSCORES AND $ SIGNS -->
<article class='slide slide-list'>
<h2>Variables: Tips & Best Practices</h2>
<p>
Variables cannot start with a number or any special characters <em>except</em> for underscores (<code>_</code>) and dollar signs (<code>$</code>).
</p>
<div class="reminders">
<p>Although it's valid to use underscore or a dollar sign, they should only be used in special circumstances.
</p>
</div>
<br />
<textarea class='coder-editor coder-editor-full'>SCRIPT
// A variable starting with a number is not valid.
// A "silent" error will occur -- nothing happens when we press Run.
var 3hundred = 300;
document.write(3hundred);
// However, when we open up the Chrome console (Alt+Cmd/Ctrl+J),
// we can see the browser complain of a
// "Uncaught SyntaxError: Unexpected token ILLEGAL"
// A variable can start with a $ or _
var $dalmations = 1001;
document.write($dalmations);
SCRIPTEND</textarea>
<script type='coder-solution'>SCRIPT
//var 3hundred = 300;
//cdocument.write(3hundred);
// A variable can start with a $ or _
var $dalmations = 1001;
document.write($dalmations);
SCRIPTEND</script>
</article>
<!-- SLIDE: WHITESPACE -->
<article class='slide slide-list'>
<h2>Whitespace in JavaScript</h2>
<p>
<span class="keyword">Whitespace</span> refers to blank characters and includes <strong>spaces</strong>, <strong>tabs</strong> and <strong>line breaks</strong>.
JavaScript ignores whitespace except when used in a string.</p>
<pre class="prettyprint">
// both statements are the same to JavaScript
var name="Brenna";
var name = "Brenna";
</pre>
<textarea class='coder-editor coder-editor-full'>SCRIPT
// A test to show whitespace in use
alert("Whitespace in a string.");
alert("Whitespace in a string.");
// Remember that browsers ignore extra whitespace in HTML!
// Use "Inspect Element" to verify that there is indeed whitespace
document.write("Whitespace in a string.");
document.write("Whitespace in a string.");
SCRIPTEND</textarea>
</article>
<!-- SLIDE: GETTING USER INPUT -->
<article class='slide slide-list'>
<h2>Getting user input</h2>
<p>
So far we've been assigning the values to our variables. But what if we don't know what that value is going to be?
</p>
<p>
Remember <code>prompt()</code>? This function triggers a popup box that allows user input. We can assign the prompt to a variable, thus saving the value of the user input.
</p>
<textarea class='coder-editor coder-editor-full'>SCRIPT
prompt("What day is it today?");
//var todaysDate = prompt("What day is it today?");
//document.write(todaysDate);
SCRIPTEND</textarea>
</article>
<!-- SLIDE: MINI-EXERCISE #1 -->
<article class='slide slide-list'>
<h2><div class="smaller">Mini-exercise (5-10 minutes):</div>
Simple Shipping Label</h2>
<p>
Here's a simple shipping information request form via popup prompts. Right now, after you press Run, the confirmation shipping label is blank. How do we fix this?
</p>
<div class="hint">
<p>1. Use variables to store your name and address.<br />
2a. & 2b. To verify that your variables are working, uncomment out the document.write() lines and replace ********** with the actual name of your variables.
</p>
</div>
<textarea class='coder-editor coder-editor-full' data-save='exercise-simple-shipping-label'>
<script>
/* 1. Declare a "name" and an "address" variable
to remember the values entered into the prompt popup: */
prompt("What's your name?");
prompt("Your mailing address?");
document.write("<b>Confirm Shipping Label:</b><br />");
/* 2a. Output the name: */
//document.write(**********);
document.write("<br />"); //just a line break
/* 2b. Output the address: */
//document.write(**********);
</script></textarea>
<p class="solution-link">If you get stuck, <a href="exercises/solutions/simple-shipping-label.txt" target="_blank">click here</a> for the full solution.<br />Or if you want to reset, <a href="exercises/solutions/simple-shipping-label-org.txt" target="_blank">click here</a> for the original code.</p>
</article>
<!-- SLIDE: OPERATORS -->
<article class='slide slide-list'>
<h2>JavaScript Arithmetic Operators</h2>
<p>We can also use JavaScript to do math using arithmetic <span class="keyword">operators</span>.</p>
<p>Arithmetic operators in JavaScript are (<code>+</code>) for addition, (<code>-</code>) for subtraction, (<code>*</code>) for multiplication and (<code>/</code>) for division.</p>
<textarea class='coder-editor coder-editor-full'>SCRIPT
document.write("Addition: ");
document.write(20 + 20);
document.write("<br />Subtraction: ");
document.write(20 - 20);
document.write("<br />Multiplication: ");
document.write(20 * 20);
document.write("<br />Division: ");
document.write(20 / 20);
SCRIPTEND</textarea>
</article>
<!-- SLIDE: OPERATORS & VARIABLES -->
<article class='slide slide-list'>
<h2>Arithmetic Operators and Variables</h2>
<p>Getting JavaScript to do math can be very useful.<br />
For example, we can use it to calculate totals in a shopping cart form.</p>
<p>Instead of using just numbers, JavaScript can do math using variables with numerical values.</p>
<textarea class='coder-editor coder-editor-full'>SCRIPT
var tshirtPrice = 25;
var androidPrice = 10;
//var totalPrice;
//document.write(totalPrice);
SCRIPTEND</textarea>
<script type="coder-solution">SCRIPT
var tshirtPrice = 25;
var androidPrice = 10;
var totalPrice = tshirtPrice + androidPrice;
document.write(totalPrice);
SCRIPTEND</script>
</article>
<!-- SLIDE: ADD SHOPPING CART ITEMS -->
<article class='slide slide-list'>
<h2><div class="smaller">Mini-exercise (5-10 minutes):</div>
Totals and Discounts</h2>
<p style="margin-bottom:0;">Let's pretend that someone has checked out of our online store intending to buy 1 t-shirt and 1 Android plushie. Apply some arithmetic operations to get the final total after applying a discount.</p>
<div class="hint">
<p>1. Calculate the sub-total given <code>tshirtPrice</code> and <code>androidPrice</code>.
<br />
2. Calcuate the discount amount given the sub-total and <code>discountPercentage</code>.
<br />
3. Calcuate the final total given the sub-total and discount amount.
</p>
</div>
<div class="reminders single-line">
<p>addition (+), subtraction (-), multiplication (*), division (/)</p>
</div>
<br />
<textarea class='coder-editor coder-editor-full' data-save='exercise-totals-and-discounts'>
<script>
var tshirtPrice = 25;
var androidPrice = 10;
var discountPercentage = 15;
/* 1. What is the cost of one t-shirt and one android? */
var subTotal;
//subTotal = **********
document.write("Sub-Total: " + subTotal);
document.write("<br />");
/* Guess what? Ladies Learning Code students get a percentage discount!
2. Figure out how much the discount will be. */
var discountAmount;
//discountAmount = **********
document.write("Discount Amount: " + discountAmount);
document.write("<br />");
/* 3. Apply the discount to get the final price. */
var finalTotal;
//finalTotal = **********
document.write("Final Total: " + finalTotal);
</script>
</textarea>
<p class="solution-link">If you get stuck, <a href="exercises/solutions/totals-and-discounts.txt" target="_blank">click here</a> for the full solution.<br />Or if you want to reset, <a href="exercises/solutions/totals-and-discounts-org.txt" target="_blank">click here</a> for the original code.</p>
</article>
<!-- SLIDE: OPERATORS & ADDING STRINGS VS NUMBERS -->
<article class='slide slide-list'>
<h2><span style="font-size: 0.8em;">Operators: </span>Numbers vs. Strings</h2>
<p>Remember that there are different variable types? Arithmetic operators can only be performed on numerical values.</p>
<p>But numbers can be disguised as strings too!</p>
<p>When the addition (<code>+</code>) operator is used with string values, it doesn't "add" the values, it <span class="keyword">concatenates</span> them.</p>
<textarea class='coder-editor'>SCRIPT
var num1 = 20;
var num2 = 10;
document.write(num1 + num2);
SCRIPTEND</textarea>
<script type="coder-solution">SCRIPT
var num1 = "20";
var num2 = 10;
document.write(num1 + num2);
SCRIPTEND</script>
</article>
<!-- SLIDE: CONCATENATION -->
<article class='slide slide-list'>
<h2>Concatenation</h2>
<p>Unlike the other arithmetic operators, the (<code>+</code>) symbol has another purpose other than adding numbers. It is used to join strings together, also known as <span class="keyword">concatenation</span>.</p>
<p>You can concatenate variables, strings or a combination of both.</p>
<textarea class='coder-editor coder-editor-full'>
<script>
document.write("Hello " + "Brenna." + "<br />");
var greeting = "Hello";
var name = " Your name.";
document.write(greeting + name);
document.write("<br />" + greeting + " ladies learning Javascript.");
</script>
</textarea>
</article>
<!-- SLIDE: CONCATENATION -->
<article class='slide slide-list'>
<h2>Concatenation and Strings</h2>
<p>If you use the (<code>+</code>) operator with <strong>only</strong> numerical values, it will add the values. Otherwise, it will combine the outputs as a string.</p>
<textarea class='coder-editor coder-editor-full'>
<script>
//Addition with the + operator
var tshirtPrice = 25;
var androidPrice = 10;
var shoppingTotal = tshirtPrice + androidPrice;
document.write(shoppingTotal);
document.write("<br />");
//Concatenation with the + operator
//document.write("Your total is: " + "$" + shoppingTotal);
//document.write("<br />");
//no nos
//document.write("Your total is:" * shoppingTotal);
//document.write("<br />");
//document.write("$" + 20 + 1);
</script>
</textarea>
</article>
<!-- SLIDE: CONCATENATION PRACTICE -->
<article class='slide slide-list'>
<h2>Concatenation Practice</h2>
<p>Let's practice concatenating using variables and strings.</p>
<textarea class='coder-editor coder-editor-full'>
<script>
var faveFood = prompt("What is your favorite food?");
// using the variable "faveFood", update the "sentence"
// variable to say "My favorite food is ********."
// var sentence =
document.write(sentence);
</script>
</textarea>
<script type="coder-solution">SCRIPT
var faveFood = prompt("What is your favorite food?");
// using the variable, "faveFood", update the "sentence"
// variable to say "My favorite food is ********."
var sentence = ("My favorite food is " + faveFood + ".");
document.write(sentence);
SCRIPTEND</script>
</article>
<!-- SLIDE: INCREMENT AND DECREMENT -->
<article class='slide slide-list'>
<h2>Re-assigning Variables</h2>
<p>Even after a variable has been assigned a value, we can still override it and
<strong>re-assign</strong> a new value.</p>
<p>For example, we may want to increase or decrease values.</p>
<textarea class='coder-editor coder-editor-full'>SCRIPT
// Declare and initialize the variable with a default value
var numberOfCookies = 0;
document.write("I started off with " + numberOfCookies + " cookies.<br />");
// Add 1 to the current value of the variable,
// then re-assign the new value to the same variable
numberOfCookies = numberOfCookies + 1;
document.write("I baked a cookie. Now I have " + numberOfCookies + " cookie.<br />");
// Subtract 1 from the current value of the variable,
// then (once again) re-assign the new value to the same variable
numberOfCookies = numberOfCookies - 1;
document.write("I just ate a cookie. Now I have " + numberOfCookies + " left.");
SCRIPTEND</textarea>
</article>
<!-- SLIDE: Next section -->
<article class='slide slide-list'>
<p class="centered vertically_centered"><a href="js_functions.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 -->
<div class="centered" style="padding:5px;">(Use the left and right keyboard arrow keys to navigate within sections. Click the "next" arrow to move to the next section.)</div>
<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>