-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathday5.html
431 lines (421 loc) · 20.2 KB
/
day5.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
<!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>Foundations</h1>
<h2 class="brand-teal">JavaScript and the DOM</h2>
</section>
<section>
<h2>Today we'll learn about...</h2>
<ul>
<li>The Document Object Model (DOM)</li>
<li>The Window object</li>
<li>Using JavaScript to select and change DOM elements</li>
<li>Handling browser events with JavaScript</li>
</ul>
</section>
<section data-background-image="images/fe-components.jpg">
<aside class="notes">
<p>Provide a context for the DOM by reminding students about the role of JS in conjunction with HTML & CSS.</p>
</aside>
</section>
<section>
<h2>What is the DOM?</h2>
<blockquote id="dom-definition">
The Document Object Model (DOM) is a programming interface for HTML documents. It represents the page so that programs can
change the document structure, style and content. The DOM represents the document as nodes and objects. That way,
programming languages can connect to the page.
</blockquote>
<label for="dom-definition">Adapted from
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction">MDN, "Introduction to the DOM"</a>
</label>
<aside class="notes">
<p>
<a href="https://css-tricks.com/dom/">This CSS-tricks article</a> is a helpful resource for explaining this tricky concept to students.</p>
<p>tl;dr: The browser receives your HTML + CSS + JS and creates a model of the page -- this is the DOM. The takeaway
for students should be to understand the difference between what they write in their HTML files and what the
browser will use to render what we see in the browser window.</p>
<p>JS is the language the browser uses to interact with this model -- the programming interface -- to make changes
to the page.</p>
</aside>
</section>
<section>
<h2>The DOM Tree and DOM Nodes</h2>
<img src="images/dom-tree.png">
<aside class="notes">
<p>What we know as HTML elements become "nodes" in the DOM. These are the things we can access and modify with JS.</p>
<p>The concept of text nodes is super weird for students just getting used to html, so you may want to talk about that a little bit.</p>
</aside>
</section>
<section>
<h2>The Window Object</h2>
<p>The document object is loaded into the browser window, and at that point the nodes are accessible to you through
JavaScript.</p>
<pre><code data-trim>
window.document
</code></pre>
<aside class="notes">
<p>The DOM is a model of the Document Object. A document is loaded to the window, and is accessible as a property
on `window`, or just by the shorthand `document`.</p>
<p>Demo window.document in the Chrome console. Encourage students to try it for themselves as well.</p>
<p>You could also show `window.location`, `window.alert`, and `window.open`.</p>
</aside>
</section>
<section>
<h2>Selecting DOM Nodes</h2>
<p>You can find and "grab" elements on the page (DOM nodes) with JavaScript.</p>
<pre><code data-trim>
<img id="kittenPic" class="illustration" src="https://source.unsplash.com/200x300/?kitten" alt="kitten"/>
</code></pre>
<aside class="notes">
<p>Take time to explain the concept of "selecting." Why would we want to do this? What things would we want to think
about when trying to find elements? What are the ways we could find/differentiate elements on the page?</p>
<p>A good instructor resource for this content, especially if you are more familiar with jQuery, is
<a href="https://plainjs.com">plainjs.com</a>.</p>
</aside>
</section>
<section>
<h2>Selecting DOM Nodes</h2>
<pre><code data-trim>var image = document.getElementById('kittenPic');</pre>
</code>
<div class="fragment">
<pre><code data-trim>document.getElementsByClassName('illustration');</pre>
</code>
</div>
<div class="fragment">
<pre><code data-trim>document.getElementsByTagName('img');</pre>
</code>
</div>
<aside class="notes">
<p>Walk through the syntax of the different ways to select DOM elements, tying back to some of the things students
may have said. (This slide has fragmented content that is revealed as you tab through it.)</p>
<p>Make note of the difference between "getElement" and "getElements" -- this is a common gotcha for new students.
To select a single node when an array (technically an `HTMLCollection`) is returned, remind students about bracket
notation.</p>
</aside>
</section>
<section>
<h2>getElement vs. getElements</h2>
<pre><code data-trim>
document.getElementById('uniqueID');
// returns only one node
</code></pre>
<pre><code data-trim>
document.getElementsByClassName('product-description');
// returns an array-like collection of nodes
document.getElementsByClassName('product-description')[0];
// ah ha! now you have only one node!
</code></pre>
<aside class="notes">
<p>Talk through these examples. Ask students to explain what the bracket notation example will return. This is also
a good time to remind students about the usage difference between IDs and class.</p>
</aside>
</section>
<section>
<h2>CODE BREAK</h2>
<p>Add an image element to your page if you don't already have one. Load the page in the browser and open the Console.</p>
<p>In the console,
<span class="brand-salmon bold">find the DOM node containing that element</span>. Store it in a variable.</p>
<p>
<span class="brand-salmon bold">Practice selecting other elements</span> and inspecting them in the console. What does it look like when you have
more than one element?</p>
</section>
<section>
<h2>querySelector and querySelectorAll</h2>
<p>Another way to select elements in the DOM uses CSS selectors.</p>
<pre><code data-trim>
// This will return the first element matching the provided selector
document.querySelector(".profile-photo");
// This returns a collection of elements matching the selector
document.querySelectorAll(".profile-photo");
</code></pre>
<aside class="notes">
<p>Demo these examples in the console, perhaps showing how you might handle the list of nodes returned by the `querySelectorAll`
method.
</p>
<p>Note that the argument to this method is the _entire_ selector, just like it is used in CSS (you could also use
#, tag names, and more complex selectors, but the students won't have seen those at this point).</p>
</aside>
</section>
<section>
<h2>Changing Things in the DOM</h2>
<p>Once we can select DOM elements, we can make changes to them.</p>
<p>We can use JavaScript for...</p>
<ul>
<li>Adding or removing element attributes</li>
<li>Adding or removing classes</li>
<li>Adding or removing entire elements and/or their content</li>
</ul>
<p>Let's look at how to do this!</p>
<aside class="notes">
<p>Ask students to think about why we might want to do this. This is a building block for creating more complex behaviors.</p>
</aside>
</section>
<section>
<h2>Updating Element Attributes in the DOM</h2>
<p></p>
<pre><code data-trim>
var mainImg = document.getElementById('main-image');
mainImg.src
// what will this return?
mainImg.src = 'https://source.unsplash.com/200x300/?ocean';
// sets the src attribute to this value
mainImg.style.border = '4px solid purple';
// sets the style attribute and border property to this value
</code></pre>
</section>
<section>
<h2>Changing Classes in the DOM</h2>
<p>Making changes to classes lets us apply styles to, or remove styles from, elements in the DOM.</p>
<pre><code data-trim>
el = document.querySelector('.input--name');
elementClasses = el.classList
elementClasses.add('.highlight');
</code></pre>
<aside class="notes">
<p>Demo and walk through this code.</p>
<p>You could choose to illustrate the difference between element.className (which gets/sets) and element.classList
(which returns a DOMTokenList and has methods you can call to add/remove/toggle classes).</p>
<p>MDN documentation:</p>
<ul>
<l1>
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/classList">Element.classList</a>
</l1>
<l1>
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/className">Element.className</a>
</l1>
</ul>
</aside>
</section>
<section>
<h2>CODE BREAK</h2>
<p>Let's try this out!</p>
<p>Make sure you have an image element on your page, like the following example.</p>
<pre><code data-trim>
<img id="oceanPic" class="illustration" src="https://source.unsplash.com/200x300/?ocean" alt="the sea"/>
</code></pre>
<p>Open the console, and first select that DOM node. </p>
<p>Change the
<span class="code-snippet">src</span> attribute so that a different image will be displayed.</p>
<p>Add or change the style attribute, using whatever properties you'd like.</p>
<p>Experiment with selecting and changing other DOM nodes in your page!</p>
<aside class="notes">
<p>If there will be time to do this: let people know that at the end of the code break, you'll ask everyone to show
something they played with, discovered, or had trouble with.</p>
</aside>
</section>
<section>
<h2>Changing content in the DOM</h2>
<p>The
<span class="code-snippet">innerHTML</span> property gives us access to the content of elements in the DOM and their children, if any.</p>
<pre><code data-trim>
element = document.getElementById('product-title');
element.innerHTML = '<h2>Boomerang<h2>';
</code></pre>
<aside class="notes">
<p>Some confusing concepts for newbies here: using both methods and properties, and the fact that some of those can
do both getting/setting.</p>
<p> Demo these things in the console, take it slowly, and don't worry too much about that distinction during this class.
It's more important that they get some practice using them and seeing the results.</p>
</aside>
</section>
<section>
<h2>Adding things to the DOM</h2>
<pre><code data-trim>
var existingElement = document.getElementById('div-awaiting-content')
// First select where you want to place the new content
var newElement = document.createElement('div');
// Create the new element
existingElement.appendChild(newElement);
// Add that element to the DOM
</code></pre>
<aside class="notes">
<p>MDN documentation:</p>
<ul>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById">Document.getElementById</a>
</li>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement">Document.createElement</a>
</li>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild">Node.appendChild</a>
</li>
</ul>
</aside>
</section>
<section>
<h2>Removing things from the DOM</h2>
<p>This is a little more complicated: first select the element to remove, then select its parent element.</p>
<p>Then you can remove the parent's child element.</p>
<pre><code data-trim>
var elementToRemove = document.getElementsByTagName('li')[2];
// What will this do?
parentElement = elementToRemove.parentNode
// what will this do?
parentElement.removeChild(elementToRemove);
// what is happening here?
</code></pre>
<aside class="notes">You could mention jQuery and/or React here as other ways to manipulate the DOM. </aside>
</section>
<section>
<h2>CODE BREAK</h2>
<p>Using Javascript only, create a new
<span class="code-snippet">p</span> element and add it to a
<span class="code-snippet">div</span> on your page. Set the content of the paragraph to a friendly message, then change the message to something
different.
</p>
<h4>Extra Challenge!</h4>
<p>Go to
<a href="www.reuters.com">reuters.com</a> or another news site. Using JavaScript only, find and change a headline to something you like better!</p>
</section>
<section>
<h2>JavaScript Events</h2>
<p>User interactions create events on the page. JavaScript can handle these events: detect when something happens and
do something in response, including changing the DOM or triggering other events. </p>
<aside class="notes">
<p>Ask students to brainstorm what some events might be and some interactions they are familiar with on webpages.</p>
<p>Explain that the event interface is like other JS objects, with properties and methods that we can interact with.</p>
<p>MDN Documentation:</p>
<ul>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/Events">Event Reference</a>
</li>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Event">Web Events</a>
</li>
</ul>
</aside>
</section>
<section>
<h2>Some Types of Events</h2>
<ul class="no-bullet">
<li>
<i class="fas fa-spinner fa-fw bold brand-salmon"></i> when the page loads</li>
<li>
<i class="fas fa-mouse-pointer fa-fw bold brand-salmon"></i> a mouse click or movement</li>
<li>
<i class="fas fa-hand-point-up fa-fw bold brand-salmon"></i> a tap on a touchscreen</li>
<li>
<i class="fas fa-keyboard fa-fw bold brand-salmon"></i> when a key is pressed</li>
<li>
<i class="fas fa-check-square fa-fw bold brand-salmon"></i> when something is selected</li>
</ul>
</section>
<aside class="notes">An event fires and triggers some JavaScript code to run. The code has been written to "listen" for when a certain event
occurs; when that event occurs, the code will run.</aside>
<section>
<h2>Event Handling</h2>
<p>Let's say you want a certain function to run when an image on the page is clicked.</p>
<ul>
<li>Select the DOM node for the element that will be clicked (the image).</li>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/Events">Choose the event</a> that will act as the trigger for the function (the mouse click).</li>
<li>Specify the function that you wish to run when the event occurs.</li>
</ul>
</section>
<section>
<h2>Call the function inside the HTML</h2>
<pre><code data-trim>
<button id="cancelButton" onclick="confirmCancel()">
Cancel order
</button>
<script>
function confirmCancel(){
alert('Are you sure you want to cancel?');
}
</script>
</code></pre>
</section>
<section>
<h2>Event Listeners</h2>
<p>You can do the same thing purely in Javascript using event listeners.</p>
<pre><code data-trim>
var button = document.getElementById('cancelButton');
button.addEventListener('click', function(){
alert('Are you sure you want to cancel?');
})
</code></pre>
</section>
<section>
<h2>CODE BREAK</h2>
<p>Add a mouseclick event handler to some element on your page. </p>
<p>When the event occurs, log a message to the console.</p>
<p>The event should trigger some change in the browser, like adding a style or content or raising an alert box.</p>
<p>You might experiment with these events as well:</p>
<ul>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/Events/mouseover">mouseover</a>
</li>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/Events/keypress">keypress</a>
</li>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/Events/scroll"> scroll</a>
</li>
</ul>
</section>
<section>
<h2>HOMEWORK 1</h2>
<ol>
<li>Go back to the in-class coding exercises you did to make changes to the DOM. Add event handlers so that those changes
are made in response to an event.</li>
<li>Add a JavaScript event to the page you built for homework on day one or two.</li>
<li>Use the
<a href="https://developer.mozilla.org/en-US/docs/Web/Events">MDN event reference</a> to see other browser events you could try.</li>
</ol>
</section>
<section>
<h2>HOMEWORK 2</h2>
<p>Go back to the
<a href="https://glitch.com/edit/#!/momentum-f2c?path=script.js:7:0">Glitch program</a> from yesterday and read that code again now that you have some knowledge about the DOM.</p>
<p>Building on what you know from this code, try adding a button (or just a div styled to look like a button...) to
your page that lets your user click it to change the background color of the page when it's clicked. </p>
<p>What about changing other styles?</p>
<p>
<span class="brand-salmon bold">EXTRA CHALLENGE:</span> Create a drop down menu with theme options that changes different styles on the page to
create a different look.</p>
</section>
</div>
<footer class="footer">
<img src="images/logo-main.png" alt="momentum-logo">
</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>