forked from canadalearningcode/llc-intro-to-javascript
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathslides.html
More file actions
executable file
·2099 lines (1598 loc) · 73.2 KB
/
slides.html
File metadata and controls
executable file
·2099 lines (1598 loc) · 73.2 KB
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
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Ladies Learning Code</title>
<link rel="stylesheet" href="framework/css/slideshow.css" data-noprefix>
<link rel="stylesheet" href="framework/css/fonts.css" data-noprefix>
<link rel="stylesheet" href="framework/css/highlightjs/github.css" data-noprefix>
<link rel="stylesheet" href="framework/css/styles.css" data-noprefix>
<link rel="shortcut icon" href="framework/img/workshop/favicon.ico">
<!-- Takes care of CSS3 prefixes -->
<script src="framework/scripts/prefixfree.min.js"></script>
<!-- opens all links in a new window -->
<base target="_blank">
</head>
<!-- Timer/progress bar: Define the presentation duration using "data-duration" in minutes. -->
<body class="en" data-duration="360">
<main>
<section class="slide welcome highlight">
<h1><img class="logo-stacked" src="framework/img/llc-logo-stacked-white.png" alt="Ladies Learning Code logo">Welcome!</h1>
<div class="instructions">
<!-- ADD WIFI INFO HERE -->
<!-- <h2>Get Connected</h2>
<p><strong>Wifi:</strong> wifi network</p>
<p><strong>Password:</strong> wifi password</p>
<hr> -->
<h2>Download<br> & Install</h2>
<ol class="downloads">
<li>Learner files (zip file): <a href="https://github.com/ladieslearningcode/llc-intro-to-javascript/archive/master.zip">http://bit.ly/1oNRFA2</a>
<ul>
<li>unzip the learner file (<em>extract all</em> if you’re on a PC)</li>
<li>open <em>slides.html</em> in the browser to view the slides</li>
</ul>
</li>
<li>Atom Editor: <a href="http://atom.io">http://atom.io</a></li>
<li>Chrome Browser: <a href="https://www.google.ca/chrome/browser/desktop/">https://www.google.ca/chrome</a></li>
</li>
</ol>
</div>
<footer>
<a class="left" rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/"><img alt="Creative Commons License" src="framework/img/cc-by-nc.png" /></a>
<p class="left">Content by <a href="http://medium.com/@pearlchen">Pearl Chen</a> and <a href="http://christinatruong.com">Christina Truong</a> for <a prefix="cc: http://creativecommons.org/ns#" href="http://ladieslearningcode.com" property="cc:attributionName" rel="cc:attributionURL">Ladies Learning Code</a></p>
<p class="right">Use the left <span class="arrow">←</span> and right <span class="arrow">→</span> arrow keys to navigate</p>
</footer>
</section>
<section class="slide intro">
<img class="logo" src="framework/img/llc-logo-white.png" alt="Ladies Learning Code logo">
<h1 class="heading-bg">
<span>Introduction to<br>
JavaScript</span>
</h1>
<!-- FILL IN INSTRUCTOR DETAILS -->
<!-- <img class="instructor" src="http://placehold.it/225x225" alt="Instructor Name">
<h2><span class="cursive">with</span> Instructor name</h2>
<ul>
<li><a href="mailto:">hello@email.com</a></li>
<li><a href="http://website.com">website.com</a></li>
<li><a href="http://twitter.com/">@twitter</a></li>
</ul> -->
<div class="sponsor">
<p>In partnership with<br> <img src="framework/img/telus-logo-white.svg" alt="Telus"></p>
</div>
<footer>
<a class="left" rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/"><img alt="Creative Commons License" src="framework/img/cc-by-nc.png" /></a>
<p class="left">Content by <a href="http://medium.com/@pearlchen">Pearl Chen</a> and <a href="http://christinatruong.com">Christina Truong</a> for <a prefix="cc: http://creativecommons.org/ns#" href="http://ladieslearningcode.com" property="cc:attributionName" rel="cc:attributionURL">Ladies Learning Code</a></p>
<p class="right">Use the left <span class="arrow">←</span> and right <span class="arrow">→</span> arrow keys to navigate</p>
</footer>
</section>
<section class="slide" data-markdown>
<script type="text/template">
# Course Outline
<div class="table-of-contents"></div>
</script>
</section>
<section class="slide title" data-markdown>
<script type="text/template">
# Part One
## Technology Overview,<br> Functions, Variables, Objects
</script>
</section>
<section class="slide title" data-markdown data-toc>
<script type="text/template">
# Development Environment
## Tools you need to get started
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
# Web Browser
Choose a modern web browser that has good, built-in development tools to help make building web pages easier. Today we'll be using [Google Chrome](https://www.google.com/chrome).
[](https://www.google.com/chrome/browser/)
---
###Resource
Get more info about browsers here: http://browsehappy.com
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
# Code Editor
There are many, many free and paid options. Today we'll be using [Atom](https://atom.io/). If you cannot download Atom, try [Brackets](http://brackets.io/).
[](https://atom.io/)
[](http://brackets.io/)
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Editing your project files
Inside of the folder you downloaded today, there are many folders that contain different files.
```xml
llc-intro-to-javascript-master
|-- framework // Contains files for this slide presentation. Do not edit!
|-- exercises // Contains exercise files for this workshop.
|-- slides.html // This is the file you are viewing right now!
```
Open the **exercises** folder in the text editor to access the files.
Go to **File** > ** Add Project Folder**. A popup will appear.
* then, navigate to the **llc-intro-to-javascript-master** folder
* select the **exercises** folder & click **Open**
The folder will now appear in the sidebar. Click the arrow icon to see files within.
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Getting to know Atom
Having a good text editor and learning how to use it to its full potential will help your work flow. Today, let's update the text wrapping option to make it easier to read long blocks of code and text.
Go to **Preferences** to open the customization options.
<!-- .element: width="70%" -->
The **Settings** tab will show by default. Scroll down to **Soft Wrap** option.
<!-- .element: width="70%" -->
Make sure the **Soft Wrap** option is checked.
<!-- .element: width="70%" -->
---
###Resources
* [Atom documentation](https://atom.io/docs)
* [Atom Shortcuts cheat sheet](https://bugsnag.com/blog/atom-editor-cheat-sheet)
* [Customizing Atom](https://atom.io/docs/v0.61.0/customizing-atom)
* [Themes](https://atom.io/themes) for Atom
* [Snippets](https://github.com/atom/snippets) - create your own code snippet shortcuts
</script>
</section>
<section class="slide title" data-markdown data-toc>
<script type="text/template">
# Technology Overview
## Programming and JavaScript
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#What is JavaScript?
It's a programming language.<!-- .element: class="delayed" -->
A program is a set of instructions meant for a computer to execute. Computers are fast but blind.<br><br><!-- .element: class="delayed" -->
<!-- .element: style="height:45vh;" -->
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
# Speak the computer's language
Programming is like having a conversation with your computer. Much like English or any other human language, programming languages also have "grammar rules" called *syntax*.
Computers have come a long way since their binary days so meet them half-way.
 <!-- .element: style="height:30vh;" -->
</script>
</section>
<section class="slide title">
<h1>Sample Code Incoming!!<br /><br />
<img src="framework/img/workshop/rawbot-face.png" alt="robot face" /></h1>
</section>
<section class="slide" data-markdown>
<script type="text/template">
# Example Programming Syntaxes
<!-- .element: style="width:250px;float:right;"-->
Different programming languages have different syntax. Here are two ways a computer could say hi:
## Java
```
Scanner userInput = new Scanner(System.in);
String name;
System.out.print("What's your name? ");
name = userInput.next();
System.out.println("Hello, " + name);
```
## Javascript
```
var name;
name = window.prompt("What's your name?",'');
document.write("Hello, " + name);
```
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
# JavaScript versus Java
They might vaguely look the same (as a lot of programming languages do) but they are not related at all.
(Java was really popular at the time so Netscape just hijacked the name.)<!-- .element: class="note" -->
</script>
</section>
<section class="slide centered" data-markdown>
<script type="text/template">
# JavaScript in the Browser
C++, Java, and .NET are also programming languages but they can be run directly by the operating system (e.g. Windows, Mac, Linux).
<!-- .element: style="height:55vh;width:auto;" -->
</script>
</section>
<section class="slide centered" data-markdown>
<script type="text/template">
# JavaScript in the Browser
JavaScript is typically meant to be run in a web browser<br> (e.g. Safari, Firefox, Chrome, Internet Explorer).
<!-- .element: style="height:55vh;width:auto;" -->
</script>
</section>
<section class="slide centered" data-markdown>
<script type="text/template">
# Server-side vs Client-side
**JavaScript** is often referred to as a _client-side_ or _"front-end"_ web technology because it is interpreted by the web browser.
</script>
</section>
<section class="slide centered" data-markdown>
<script type="text/template">
# Server-side vs client-side
<!-- .element: width="62%" -->
Java, .NET, PHP or Ruby can be considered *server-side* or *"back-end"* web technology because the code is typically compiled and executed by the operating system of a computer serving up web pages.
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
# Simple Client-Side Code Check
<!-- .element: class="left" -->
On *any* web page, **right-click** and **view source** to see all the client side code. That includes JavaScript as well as HTML and CSS. (Try it!)
Server-side code can't be seen in the browser so sometimes it's a mystery what technology is running on a server.
JavaScript can be used for server-side programs too, but today we'll be focusing on the browser.
</script>
</section>
<section class="slide triad" data-markdown>
<script type="text/template">
# The Web Triad: HTML, CSS, JavaScript
**JavaScript** was meant to manipulate webpages written in **HTML** and works in tandem with **CSS**.
**HTML** (Hypertext Markup Language) is a markup language.
It defines the **content**.
</script>
</section>
<section class="slide triad" data-markdown>
<script type="text/template">
# The Web Triad: HTML, CSS, JavaScript
**JavaScript** was meant to manipulate webpages written in **HTML** and works in tandem with **CSS**.
**CSS** (Cascading Style Sheets) is a style sheet language.
It defines the **presentation**.
</script>
</section>
<section class="slide triad" data-markdown>
<script type="text/template">
# The Web Triad: HTML, CSS, JavaScript
**JavaScript** was meant to manipulate webpages written in **HTML** and works in tandem with **CSS**.
**JavaScript** is a programming language.
It defines the **behaviour**.
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
# JavaScript in Different Browsers
Usually JavaScript will run the same way in various browsers.
<!-- .element: class="left" width="50%" -->
But, browsers are software programs written by many different people/companies, so sometimes there are slight differences.
This is especially noticeable with newer "HTML5" features.
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
# A JavaScript Experiment
JavaScript is essential for making interactive web pages. Try this experiment: turn off JavaScript in your web browser.
To go to the JavaScript settings in Chrome, paste this snippet, **chrome://settings/content**, into the address bar. Then select "Do not allow any site to run JavaScript".
Now try visiting some popular sites. ([Google](http://google.com), [Facebook](http://facebook.com) , [Twitter](http://twitter.com))
> What interactions are now missing?
(Remember to turn JavaScript back on!!!)<!-- .element: class="note" -->
---
###Resource
Here's how to find the JavaScript settings using the browser menu option:
Preferences (in the browser menu) > Show advanced settings... (link) > Content settings (under Privacy)
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
# How do you write a program?
Programming is giving instructions to your computer.
Think about a tourist that stops you to ask for directions. The clearer the instructions, the more likely they will get to their destination.
 <!-- .element: style="height:50vh;" -->
</script>
</section>
<section class="slide steps" data-markdown>
<script type="text/template">
# Mini-Exercise: Say my name, say my name
Suppose I want a computer to say hello using my name. **Break down the steps** as much as possible:
<ol>
<li class="delayed">
<img src="framework/img/workshop/name-text-rawbot.gif" alt="allow to type name"> Allow me to type in my name.
</li>
<li class="delayed">
<img src="framework/img/workshop/remember-name-rawbot.gif" alt="remember my name"> Remember my name.
</li>
<li class="delayed">
<img src="framework/img/workshop/say-my-name-rawbot.png" alt="say hello"> Say "Hello" and repeat back my name.
</li>
</ol>
</script>
</section>
<section class="slide highlight" data-markdown>
<script type="text/template">
# Writing a program
To write a program for the computer to say "hello" back to us, we'll need to use two JavaScript concepts, *variables* and *functions*.
Note that the syntax for programming languages tend to be a bit more complex than HTML & CSS so sometimes it requires it a little more to see results in the browser.
</script>
</section>
<section class="slide title" data-markdown data-toc>
<script type="text/template">
#Intro to Functions & Variables
</script>
</section>
<section class="slide two-col-list" data-markdown>
<script type="text/template">
#Automating Repetitive Tasks
What is something that you do that's very repetitive or a hassle (like paying for parking)? Wouldn't it be great if it was automated?
* **Repetitive**
1. Find bank machine
2. Pull out bank card
3. Get money out from ATM
4. Buy chips so you can make change
5. Put change into machine
6. Take receipt
* **Automated!**
1. Pull the PayPass credit card from your wallet
2. Tap
3. Take receipt
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Automating Repetitive Tasks
1. Pull the PayPass credit card from your wallet
2. **Tap**
3. Take receipt
Step 2 can be thought of as a function. We can't see all of the steps that happen but performing the action will execute some instructions that will allow automatic payments.
If the credit card tap was a function in JavaScript, it could look something like this:
```
tapCard()
```
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
# Intro to Functions: `prompt()`
**Functions** are used to make the code "do things." We can create our own functions (more on this later) but there are many already included in JavaScript.
The `prompt()` function contains instructions to show a popup modal dialog box with a message and input box, when executed.
Click "run" below to see what happens when the `prompt()` function is executed.
<img onclick="prompt()" src="framework/img/workshop/rawbot-run.png" alt="run code">
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
# Functions & Statements
The modal box is empty! To pass a message into the `prompt()` modal box, add a message between the parentheses, in quotes.
Also, end the *statement* with a semicolon (;) to indicate that the instruction is done.
**Statements** are commands that tell the computer what to do.
```
prompt("Hello, what is your name?");
```
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
# JavaScript & HTML
JavaScript can be added pretty much anywhere on a web page but it is commonly added either in the `<head>` section or just before the closing `</body>` tag.
However, the JavaScript code itself must always be contained within the <code><script></script></code> tags.
<pre><code><html>
<head>
<title>JavaScript example!</title>
<script>
// Javascript in the head tag!
</script>
</head>
<body>
<script>
// Javascript in the body tag!
</script>
</body>
</html></code></pre>
---
###Pro tip!
Putting the JavaScript just *before* the closing `</body>` tag will allow the page to load first before the JavaScript executes. This is important when manipulating HTML elements.
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Class Exercise: Say My Name, part 1
<img src="framework/img/workshop/name-text-rawbot.gif" alt="allow to type name" style="height: 80px;" class='left'> Allow me to type in my name.
<hr class="clear">
In your editor, open **1-hello.html** and add the following snippet:
```
prompt("What is your name?");
```
Then open **1-hello.html** in the browser and test the prompt.
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
# Intro to variables
Where did your name go?
The `prompt()` function can be used to get input from the user but the computer doesn't remember anything unless you tell it to.
 <!-- .element: class="right" -->
It needs *exact* instructions.
**Variables** are kind of like the computer's short-term memory.
Variables are like containers or a box. They are used to *store values* and can be used whenever you need them.
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
# Variables Syntax
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
# Variables How-to
Declare (create) variables with the keyword `var` and give it a name.
```
var firstname;
```
Assign a value to the variable using the equals `=` symbol. Remember, to end the statement with a semicolon. Now the computer will remember your name!
```
firstname = "Yourname";
```
You can also assign a value and declare a variable at the same time.
```
var firstname = "Yourname";
```
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Another Function: `write()`
We still need a way for the computer to say hello back to you. Let's use another function, `write()`, to output the response.
This time, the function will be attached to the HTML page, aka the **document**. The text to be outputted should be included within the parentheses.
```
document.write("hello"); // will output "hello" onto the page.
```
It can also output the value of the variable. Note that the variable doesn't require quotes.
```
var firstname = "Yourname";
document.write(firstname); // will output "Yourname" onto the page.
```
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
# Variables and user input
The previous example showed how to assign a specific value to the `firstname` variable.
```
var firstname = "Yourname";
```
But what if we don't know what that value is going to be?
Remember `prompt()`? This function triggers a popup box that allows user input.
The prompt function can also be assigned to a variable, thus saving the value of the user input.
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
# Class Exercise: Say My Name, part 2
<ol>
<li class="delayed">
<p>Allow me to type in my name</p>
<code class="delayed">prompt("What is your name?");</code>
</li>
<li class="delayed">
<p>Remember my name</p>
<code class="delayed">var firstname = ?</code>
<code class="delayed">var firstname = prompt("What is your name?");</code>
</li>
</ol>
Back in <!-- .element: class="delayed" --> **1-hello.html**, let's update our program.
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Class Exercise: Say My Name, part 3
The last part is getting the computer to repeat your name back to you. Let's use `document.write()` to say hello and repeat the name variable.
Back in **1-hello.html**, update your program. It should look something like this:
```
var name = prompt("What is your name?");
document.write("Hello ");
document.write(name);
```
Note the space *after* "Hello". This will make sure that there is a space between the outputted values.
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Writing programs
There are a lot of different ways to write programs since they really are just a series of commands based on what it is you want the computer to do.
Also, note that `document.write()` and `prompt()` are quick ways to test and experiment but is not best practice for use in "the real world."
We'll go over more examples and dive deeper into **variables** and **functions** as the course progresses.
</script>
</section>
<section class="slide title" data-markdown>
<script type="text/template">
#Today's Project!
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Today's Project
<!-- .element: class="left" -->
As the owner of a thriving online store, **Planet Robots**, you have to make sure you have a top notch website.
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
# Today's Project
Some things you'll want to think about for your site:
* offer online shopping
* print shipping labels
* offer member only sales
<!-- * customers shouldn't be able to submit empty forms -->
* shopping cart items must be calculated properly
To create a website that can handle these requirements, let's take a deeper dive into **variables**, **functions** and later, we'all also talk about **objects** and **conditionals**.
</script>
</section>
<section class="slide title" data-markdown data-toc>
<script type="text/template">
#Variables
##Storing Information
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Variables: review
Variables are used to store values.
Declare a variable with the keyword `var` and use the equals symbol to assign a value.
End the *statement* with a semi-colon.
```javascript
var email = "hello@isanybodyoutthere.com";
```
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
# VARIABLES: NAMING CONVENTIONS
Variable names cannot contain spaces. Instead, use `camelCase` (more common) or underscores `like_so` for names with multiple words.
Pick one style and be consistent. JavaScript is also case sensitive.
Use a descriptive names:
`var firstName;` ← Clear that first name will go here.
`var fn;` ← Not as obvious as firstName.
`var x;` ← Not clear at all.
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
# Variable example
When would variables come in handy?
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.
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
# Assigning Variables
Using the equals (`=`) symbol in Javascript is NOT the same as in math.
`var total = 1 + 1` is not the same as `1 + 1 = 2`
`var total = 1 + 1` means:
* _evaluate_ everything to the _right_ of the equals sign (`1 + 1`)
* then _assign_ this value (`2`) to the variable on the _left_ side.
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
# Variable Types
Variables can hold different *types* of values.
Numeric variables (integers & decimals)
```
var someIntegerNumber = 10;
var someDecimalNumber = 10.5;
```
String variables (letters and words) - must be contained in quotes
```
var singleWordString = "hello";
var sentenceString = "Hello, good day to you!";
var numberString = "10";
```
Boolean variables (true/false)
```
var isSaturday = true;
var isSunday = false;
```
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
# Comments
Sometimes you want to write notes, organize blocks of code or "hide" code that you don't want to delete but isn't ready to be used yet. The browser will ignore comments.
```javascript
// This is how you leave a single line comment.
// You can write many single line comments.
// Just make sure to add the double backslash
// for every new line. ```
Here's another way to comment larger blocks of text.
```javascript
/* This is how you leave one block of
comments that span over multiple lines. */
```
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
# Whitespace in JavaScript
Whitespace refers to blank characters, space characters, tabs and line breaks. JavaScript ignores whitespace in some instances.
```javascript
var name="Ladies Learning Code"; // both will be read the same by JavaScript
var name = "Ladies Learning Code";
```
However, whitespace matters when used in a string and when using keywords.
```javascript
var name = "LadiesLearningCode";
var name = "Ladies Learning Code";
varname = "Ladies Learning Code"; // will not work
```
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
# Exercise: Shipping information (~10mins)
Let's gather some basic shipping information.
Open **2-shipping-info.html** in the editor and the browser.
Right now, if you run the program in the browser, the shipping information is not stored and the output will be blank.
How can this be fixed?
1. Use variables to store the name and postal code values.
1. Use `document.write()` to output the name and postal values to verify the information is being stored.
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Exercise solution review
```
// 1. Declare a variable to store the name value.
// 2. Declare a variable to store the postal code value.
var name = prompt("What is your name?");
var postalCode = prompt("What is your postal code?");
// This is just a heading
document.write("<h1>Shipping Information:</h1>");
document.write(name); // output the name
document.write("<br>"); // just a line break
document.write(postalCode); // output the postal code
```
The solution can be also be found in <!-- .element: class="note" --> **2-shipping-info-solution.html**.
</script>
</section>
<section class="slide" data-markdown data-toc>
<script type="text/template">
# JavaScript Arithmetic Operators
JavaScript can also do math.
`+` addition, `-` subtraction, `*` multiplication, `/` division
```javascript
var addition = 5 + 2; // will return a value of 7
```
These operations work whether the values are numbers, or the values are stored in a variable.
```javascript
var exampleOne = 5;
var exampleTwo = 2;
var endValue = exampleOne * exampleTwo; // will return a value of 10
```
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
# Calculate Totals
Getting JavaScript to do math can be very useful. For example, we can use it to calculate totals in a shopping cart.
Instead of using just numbers, JavaScript can do math using variables with numerical values.
```javascript
var tshirtPrice = 25;
var androidPrice = 10;
var total = tshirtPrice + androidPrice;
```
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Exercise: Shopping cart totals (~10mins)
Open **3-shopping-cart.html** in your editor.
There are 3 variables defined in the exercise file:
```
var tshirtPrice = 25;
var androidPrice = 10;
var discount = 0.15; // 15%
```
Follow the instructions in the comments to figure out the subtotal of 1 t-shirt and 1 Android plushie, with a 15% discount.
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Review Exercise solution:
```javascript
var tshirtPrice = 25;
var androidPrice = 10;
var discount = 0.15; // 15%
// What is the cost of one t-shirt and one android?
var subtotal = tshirtPrice + androidPrice;
document.write("Subtotal: $");
document.write(subtotal);
document.write("<br>");
// Guess what? Ladies Learning Code members gets 15% off!
// Figure out how much the discount will be.
var discountAmount = subtotal * discount;
document.write("Discount: $");
document.write(discountAmount);
document.write("<br>");
// Apply the discount to get the final price.
var finalTotal = subtotal - discountAmount;
document.write("Final Total: $");
document.write(finalTotal);
```
Outputs:
```javascript
Subtotal: $35
Discount: $5.25
Final Total: $29.75
```
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
# Concatenation
If you use the `+` operator with numerical values, it will add the values. Otherwise, it will *combine* the outputs as a string referred to as **concatenation**.
Instead of this:
```javascript
var finalTotal = total - discountAmount;
document.write("Final Total: $");
document.write(finalTotal);
```
Use concatenation to combine the string with the variable value.