-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathday3.html
414 lines (408 loc) · 18.1 KB
/
day3.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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>reveal.js</title>
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/momentum.css">
<!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="lib/css/atom-one-dark.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
<script defer src="https://use.fontawesome.com/releases/v5.0.2/js/all.js"></script>
</head>
<body>
<div class="reveal">
<div class="slides">
<section>
<h1>Code Basics</h1>
<h2 class="brand-teal">Intro to JavaScript</h2>
<aside class="notes">
<p>Review the homework from last night!</p>
</aside>
</section>
<section>
<h2>Today we'll learn about...</h2>
<ul>
<li>What JavaScript is and why we need it</li>
<li>some basics of programming</li>
<li>variables, expressions, and logical flow</li>
<li>data types in JavaScript</li>
</ul>
<p>...and we'll write our first JavaScript and see it at work in the browser</p>
</section>
<section data-background-image="images/fe-components.jpg">
<aside class="notes">
<p>Talk about JS's role in the front end, alongside HTML and CSS.</p>
<p>JS lets you make web pages interactive and dynamic.</p>
</aside>
</section>
<section>
<h2>What can you do with JavaScript?</h2>
<p>Access and modify content on the web page</p>
<ul>
<li>
<span class="brand-salmon">Select elements</span> with a certain class</li>
<li>
<span class="brand-salmon">Check a value</span> that was entered into a form input</li>
<li>
<span class="brand-salmon">Change styles or attributes</span> of an html element</li>
<li>
<span class="brand-salmon">Add new content</span> to the page without reloading the page</li>
</ul>
</section>
<section>
<h2>More you can do with JavaScript!</h2>
<p>Tell the browser to do something, and when to do it</p>
<ul>
<li>
<span class="brand-salmon">React to user input</span>, like a mouse click or a tap on an element</li>
<li>Show a
<span class="brand-salmon">slideshow</span>
</li>
<li>Track
<span class="brand-salmon">how much time has passed</span> while a user is on a page</li>
<li>Wait until something happens (
<span class="brand-salmon">an event</span>) before content is shown on the page</li>
<li>
<span class="brand-salmon">Show or hide content</span> on a page if a certain condition is met</li>
</ul>
</section>
<section>
<h2>JavaScript in the Wild</h2>
<ul>
<li>
<a href="http://www.histography.io/">histography.io</a>
</li>
<li>
<a href="http://leimi.github.io/drawingboard.js/">drawingboard.js</a>
</li>
<li>
<a href="https://codepen.io/sureshrkm/pen/ZbzBpr">Accordion menu</a>
</li>
</ul>
</section>
<section>
<h2>JavaScript runs in the browser</h2>
<ol>
<li>You visit a website with JavaScript code included on the page.</li>
<li>The browser reads the code line-by-line.</li>
<li>The browser runs each line of code as it reads it.</li>
<li>Based on these instructions, the browser may perform calculations or searches and does something on the page.</li>
<li>If the browser finds code it doesn't understand, it stops running and throws an error.</li>
</ol>
<aside class="notes">
<p>Show the JavaScript console in Chrome and that you can write/run JS there. Make sure students can open and find the
console. You can show sources with some of the JS on the sites listed on the slide, but that might be overwhelming.</p>
</aside>
</section>
<section>
<h2>JavaScript is loaded with the page</h2>
<pre><code data-trim>
<script>
console.log('Hello World!');
</script>
</code></pre>
<aside class="notes">As with css, there are several ways to include JS with your HTML: inline, directly inside script tags, or linked to an
external file with the script tag's
<span class="code-snippet">src</span> attribute. Make sure to place it near the bottom of the content inside the body element.</aside>
</section>
<section>
<h2>Including JavaScript in your page</h2>
<pre><code>
<script src="main.js"></script>
</code></pre>
<aside class="notes">
<p>Demo creating, linking, and loading a JS file to the HTML page from previous classes, and in here introduce console.log
and window.alert. You can show the source files in the live preview from Glitch.</p>
<p>If you think it would go well in class, you could also show this by creating files in a text editor and then loading
them in the browser. If you do this, you can show page source before and after JS script is loaded.</p>
</aside>
</section>
<section>
<h2>CODE BREAK</h2>
<p>Inside the same project folder with your HTML and CSS files, create a JavaScript file and link it to your HTML page.</p>
<p>In the js file, write code to output ‘Hello World!”.</p>
<p>Try typing in the console and playing with what you can do there. Try some basic math operations!</p>
</section>
<section>
<h2>Think Like a Programmer</h2>
<img src="images/thinking-cat.jpg" alt="">
<aside class="notes">
<p>This is a whole class exercise; spend about 5 minutes on it.</p>
<p>Computers are dumb! They are great at processing/following instructions, but they are not great at understanding.</p>
<p>To write a program, you need to break down every step into simple pieces</p>
<p>Exercise: Give me instructions to draw a square on the whiteboard. [Follow student directions literally and exactly
to demonstrate how a computer might interpret the instructions and the omissions of steps.]</p>
</aside>
</section>
<section>
<h2>Variables</h2>
<img src="images/cat-boxes-imgur.jpg" id="cat-boxes-imgur">
<label for="cat-boxes-imgur" class="short-image-attribution" style="float:none;">courtesy of
<a href="imgur.com/YJDNSHu">Imgur</a>
</label>
<aside class="notes">
<p>We can think of variables as boxes or containers that hold some kind of data and make that data available for reuse
later. We can put data in that container, or change it, and use the value it contains wherever we need it.</p>
</aside>
</section>
<section data-background-image="images/js-variables.jpg">
<aside class="notes">
<p>We will cover data types in more detail in a few minutes, but two of the types we'll look at first are numbers and
strings.</p>
<p>A string is a combination of letters, numbers, and special characters, surrounded by matching quote marks.</p>
<p>In the Chrome inspector, demo declaring variables and assigning numbers and string as values, showing how you can then
use the variable in an expression.</p>
</aside>
</section>
<section>
<h2>Data Types in JavaScript</h2>
<div>
<ul class="slide-width">
<li>
<span class="bold brand-salmon">String</span>
<pre><code>var userName = 'Hodor';</code></pre>
</li>
<li>
<span class="bold brand-salmon">Number</span>
<pre><code>var numKingdoms = 7;</code></pre>
</li>
<li>
<span class="bold brand-salmon">Boolean</span>
<pre><code>var winterIsComing = true;</code></pre>
</li>
<li>
<span class="bold brand-salmon">undefined</span>
<pre><code>var dragons;</code></pre>
</li>
<li>
<span class="bold brand-salmon">null</span>
<pre><code>var thronesWon = null;</code></pre>
</li>
</ul>
</div>
<aside class="notes">
<p>Take a few minutes here to go through each and explain it.</p>
<ul>
<li>String; string of characters</li>
<li>Number: integer or floating point</li>
<li>Boolean: true or false</li>
<li>Undefined: a value that hasn't been defined</li>
<li>Null: an explicitly empty value</li>
</ul>
</aside>
</section>
<section>
<h2>String concatenation</h2>
<p>Combine strings with the
<span class="code-snippet">+</span> operator:
<pre><code data-trim>
"This string can be combined " + "with this string."
var partOfAString = "Fun with "
partOfAString + "strings!"
</code></pre>
</section>
<section>
<h2>Template literals</h2>
<p>An even fancier way to combine strings:</p>
<pre><code data-trim>
var favoriteThing = "avocado"
`My favorite thing is ${ favoriteThing }`
</code></pre>
</section>
<section>
<h2>CODE BREAK</h2>
<p>Try out working with strings and variables in your JavaScript console!</p>
<p>In your JS file, see if you can write a Mad-Lib style sentence using variables and template literals to fill in the blanks.
For instance, this could be one about Animal Fun Facts:</p>
<p>"________ have a reputation as ___________ animals. Research shows that they are _________. A pack of _________ can be
as large as _________. They eat _________ and _________. They commonly live in ____________."</p>
<p class="brand-salmon">
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals">MDN documentation for template literals</a>
</p>
</section>
<section>
<h2>Conditionals</h2>
<p><span class="code-snippet">if/else</span> statements let you add logical "flow" to your code.</p>
<p>Lines of code inside the brackets are run or not run based on a condition.</p>
<pre><code data-trim>
if (condition) {
// this code will be run
}
</code></pre>
<pre><code data-trim>
var pets = 5;
if (pets > 0) {
console.log ('You have some pets!');
}
</code></pre>
<aside class="notes">
<p>Take some time to explain control flow using a traditional flow chart on the whiteboard. The concept of "if this, then
that" should be familiar, so make that analogy.</p>
<p>Review the concept of an expression in JS: the condition inside the parens is evaluated to a Boolean. You can show
this in the console. This will also be an introduction to comparison operators in JS.</p>
</aside>
</section>
<section>
<h2>Comparison Operators</h2>
<ul>
<li>
<span class="bold brand-salmon">Equality</span> true if a is equal to b
<pre><code>a == b</code></pre>
</li>
<li>
<span class="bold brand-salmon">Identity (Strict Equality)</span>: true if a is equal to be and of the same data type
<pre><code>a === b</code></pre>
</li>
<li>
<span class="bold brand-salmon">Inequality</span>: true if a is NOT equal to b, or they are not the same type
<pre><code>a != b</code></pre>
</li>
</ul>
<pre><code data-trim>
12 == 12 // true
"12" === 12 // false
12 != 12 // false
</code></pre>
<aside class="notes">
<p>Demo some of these examples in the console.</p>
<p>Remind students to watch out for mixing up assignment and equality comparison!</p>
</aside>
</section>
<section>
<h2>More Comparison Operators</h2>
<ul>
<li>
<span class="bold brand-salmon">Greater Than</span>: true if a is greater than b
<pre><code>a > b</code></pre>
</li>
<li>
<span class="bold brand-salmon">Less Than</span>: true if a is less than b
<pre><code>a < b</code></pre>
</li>
<li>
<span class="bold brand-salmon">Greater Than or Equal To</span>: true if a is greater than or equal to b
<pre><code>a >= b</code></pre>
</li>
<li>
<span class="bold brand-salmon">Less Than or Equal To</span>: true if a is less than or equal to b
<pre><code>a <= b</code></pre>
</li>
</ul>
</section>
<section>
<h2>CODE BREAK</h2>
<p>Make a variable called “temperature”. Write some code to tell you to put on a coat if it is below 55 degrees. Log your
output to the console.</p>
</section>
<section>
<h3>If/Else</h3>
<p>Add more branches to your logic with
<span class="code-snippet">else</span> and
<span class="code-snippet">else if</span>
</p>
<pre><code data-trim>
if (condition) {
// do this thing
} else {
// do this other thing
}
</code></pre>
<pre><code data-trim>
if (condition) {
// do this thing
} else if (differentCondition) {
// do this different thing
} else {
// do some other thing
}
</code></pre>
<aside class="notes">Demo in the console and explain that only one of the branches will be run. Explain that `else` branches are optional,
and it is possible to make it so that nothing runs.</aside>
</section>
<section>
<h3>Logical operators</h3>
<ul>
<li>
<span class="bold brand-salmon">And</span>: both a and b
<pre><code>a && b</code></pre>
</li>
<li>
<span class="bold brand-salmon">Or</span>: a or b
<pre><code>a || b</code></pre>
</li>
<li>
<span class="bold brand-salmon">Not</span>: not a
<pre><code>!a</code></pre>
</li>
</ul>
</section>
<section>
<h3>How to Use Logical Operators</h3>
<p>These operators let you combine conditions.</p>
<pre><code data-trim>
var age = 19;
var usCitizenship = true;
if (age >= 18 && usCitizenship) {
console.log("You are eligible to vote!");
} else {
console.log("You can't vote yet!");
}
</code></pre>
</section>
<section>
<h2>HOMEWORK 1</h2>
<p>Modify your “wear a coat” code for these conditions:</p>
<ul>
<li>If it's less than 55 degrees, wear a coat.</li>
<li>If it's less than 40 degrees, wear a coat and a hat.</li>
<li>If it's less than 0 degrees, stay inside.</li>
<li>Otherwise, wear whatever you want.</li>
</ul>
<p>
<span class="bold brand-salmon">BONUS:</span> Add code to wear a waterproof coat and/or boots if it is raining or snowing! How would you code this
complexity?</p>
<p>But wait, there's more!
<i class="fas fa-angle-double-right brand-salmon"></i>
</p>
</section>
<section>
<h2>HOMEWORK 2</h2>
<h4>😸
<a href="http://jsforcats.com/">JavaScript for Cats!</a> 😸</h4>
<p>Get as far as you can with this
<a href="http://jsforcats.com/">feline-infused introductory overview of JavaScript concepts</a>.</p>
<p>Some of it will review what we've done today and some of it will be new material. We'll be doing more with JavaScript
during the next few classes!</p>
</section>
</div>
<footer class="footer">
<img src="images/logo-main.png" alt="">
</footer>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script>
// More info about config & dependencies:
// - https://github.com/hakimel/reveal.js#configuration
// - https://github.com/hakimel/reveal.js#dependencies
Reveal.initialize({
dependencies: [
{ src: 'plugin/markdown/marked.js' },
{ src: 'plugin/markdown/markdown.js' },
{ src: 'plugin/notes/notes.js', async: true },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }
],
history: true
});
</script>
</body>
</html>