-
Notifications
You must be signed in to change notification settings - Fork 13
/
class13.html
474 lines (383 loc) · 16.6 KB
/
class13.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>FEWD: Class 13</title>
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/general-assembly.css" id="theme">
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico" />
<link rel="stylesheet" href="css/zenburn.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
</head>
<body>
<div class="reveal">
<div class="slides">
<section class="hero">
<h1>HELLO</h1>
<div class="opening-instructions">
<p>1) Please download <a href="../materials/class13.zip">Class 13 Starter Code</a></p>
<p>2) Move the following into <code class="code">class-work</code>:</p>
<div class="text-smaller pad-left-lg">
<p>• <code class="code">lifetime-supply</code></p>
<p>• <code class="code">calculator-box</code></p>
</div>
<p>3) The following solutions are included:</p>
<p class="pad-left-lg text-smaller">• <code class="code">rgb-color-choice-solution</code></p>
</div>
</section>
<section class="hero">
<h1>Class <span class="red">#10</span></h1>
<h1>10/29/2018</h1>
<h1 class="lesson-title">jQuery (pt. 1)</h1>
</section>
<!-- ANNOUNCEMENTS -->
<section data-background="#FFF" class="text-left">
<div class="heading">Announcements</div>
<p>• Final Projects:</p>
<div class="pad-left-lg text-smaller">
<p>⇒ Third deliverable due Monday, November 5th</p>
<p>⇒ HTML/CSS Rough Draft</p>
</div>
</section>
<!-- <section class="title" id="feedback">
<h1>Mid-Course Feedback</h1>
</section>
<section data-background="#FFF" class="text-left">
<div class="heading">Mid-Course Feedback</div>
<p>• Thanks 👍</p>
<p>• Feedback can be annoying...</p>
<blockquote class="text-smaller fragment">
Quoty McQuoteFace
</blockquote>
</section>
<section data-background="#FFF" class="text-left">
<div class="heading">Mid-Course Feedback</div>
<p>• Suggestions for improvement (GA):</p>
<div class="pad-left-lg text-smaller">
<p class="fragment">⇒ Tuition (How can I deliver more value?)</p>
<p class="fragment">⇒ GA-sponsored events outside of class - see <a href="https://generalassemb.ly/education?format=events" target="_blank">Events page</a></p>
</div>
</section>
<section data-background="#FFF" class="text-left">
<div class="heading">Mid-Course Feedback</div>
<p>• Feedback Favorite (anonymous):</p>
<blockquote>
Having a class on the second floor and keeping the glass door entry on the second floor locked so
that you have to go to the third floor and walk down is ridiculous.
</blockquote>
<p>• Crowd control</p>
</section> -->
<!-- AGENDA -->
<section data-background="#FFF" class="text-left">
<div class="heading">Agenda</div>
<div class="text-smaller">
<p>• <a href="#/jquery-intro">jQuery Intro</a></p>
<p>• <a href="#/css-selectors">CSS Selectors</a></p>
<p>• <a href="#/html-manipulation">HTML manipulation using <code>.html()</code></a></p>
<p>• <a href="#/click-event">The <code>.click()</code> method</a></p>
<p>• <a href="#/input-and-val">The <code>.val()</code> method</a></p>
<!-- <p>• <a href="#/using-jquery">Using jQuery and <code>$(document).ready()</code></a></p> -->
<p>• <a href="#/css-manipulation">CSS manipulation using <code>.css()</code></a></p>
</div>
</section>
<section data-background="#FFF" class="text-left" id="js-review">
<div class="heading">JavaScript Review</div>
<div class="text-smaller">
<p>Open <code class="code">lifetime-supply</code>; write JS for the following:</p>
<p>1. Store your current age into a variable</p>
<p>2. Store a maximum age into a variable</p>
<p>3. Store a favorite drink into a variable</p>
<p>4. Store an amount per day into a variable</p>
<p>5. Calculate how much you would drink for the rest of your life!</p>
<p>6. Output your results to the user</p>
</div>
</section>
<!-- JQUERY -->
<section class="title" id="jquery-intro">
<h1>jQuery</h1>
</section>
<section data-background="#FFF" class="text-left">
<div class="heading">jQuery: What is it?</div>
<div class="text-small">
<p>• jQuery <u>IS</u> JavaScript (<a href="https://code.jquery.com/jquery-2.2.2.js" target="_blank">source code</a>)</p>
<p>• jQuery is a JavaScript <u>library</u></p>
<p class="fragment">• Collection of battle-tested code</p>
<p class="fragment">• Increases the speed/stability of development</p>
<p class="fragment">• Why reinvent the wheel?</p>
<p class="fragment">• 1000's of JS libraries (and growing)</p>
</div>
</section>
<section data-background="#FFF" class="text-left">
<div class="heading">jQuery: What is it?</div>
<div class="text-smaller">
<p>• Written by John Resig (lives in Brooklyn)</p>
<p class="fragment">• Motto: <em>"Write Less, Do More"</em></p>
<div class="fragment">
<p>• tl;dr makes working with JS easier:</p>
<div class="pad-left-lg">
<p>⇒ HTML / CSS manipulation</p>
<p>⇒ Event handling (click events)</p>
<p>⇒ AJAX</p>
</div>
</div>
<p class="fragment">• Bonus: Covers JS's browser inconsistencies</p>
</div>
</section>
<section data-background="#FFF" class="text-left">
<div class="heading">jQuery: What use it?</div>
<p>Pure JavaScript:</p>
<p class="pad-left-lg"><a target="_blank" href="http://codepen.io/josephjbliss/pen/uqdCw">http://codepen.io/josephjbliss/pen/uqdCw</a></p>
<p>jQuery:</p>
<p class="pad-left-lg"><a target="_blank" href="http://codepen.io/josephjbliss/pen/jLtfC">http://codepen.io/josephjbliss/pen/jLtfC</a></p>
</section>
<section data-background="#FFF" class="text-left">
<div class="heading">jQUery in Two Steps:</div>
<div class="fragment">
<p>1) Use <code class="code">$()</code> to select HTML elements:</p>
<pre><code class="code">
$('#element')
</code></pre>
</div>
<div class="fragment">
<p>2) Attach jQuery methods to the above selector:</p>
<pre><code class="code">
$('#element').css('background', 'blue')
</code></pre>
</div>
</section>
<section class="title" id="css-selectors">
<h1>jQuery CSS Selectors</h1>
</section>
<section data-background="#FFF" class="text-left">
<div class="heading">jQuery CSS Selectors: <code class="code lower">$('x')</code></div>
<div class="text-smaller">
<p>• Similar to <code class="code">document.querySelector()</code></p>
<div class="fragment">
<p>• The <code class="code">$('x')</code> function - select all of the <code class="code">'x'</code></p>
<pre><code>
$('.nav-links') // select all elements with class "nav-links"
$('h2') // select all <h2>'s
$('p a') // select all <a>'s inside of all <p>'s
$('p, a') // select all <p>'s and <a>'s
</code></pre>
<p>• The <code class="code">$('x')</code> function takes <u>ANY</u> CSS selector</p>
</div>
</div>
</section>
<section data-background="#FFF" class="text-left">
<div class="heading">jQuery CSS Selectors: ID's and Classes</div>
<p>• Select ID's using the <code class="code">#</code> (hashtag):</p>
<pre><code class="code">
$('#element')
$('#element div')
</code></pre>
<div class="fragment">
<p>• Select Classes using the <code class="code">.</code> (period):</p>
<pre><code class="code">
$('.someClass')
$('.someClass p')
</code></pre>
</div>
</section>
<section data-background="#FFF" class="text-left">
<div class="heading">jQuery CSS Selectors: Practice</div>
<div class="text-smaller">
<p>• <code class="code">$('div')</code></p>
<p class="fragment pad-left-lg text-smaller">⇒ Select all HTML <code class="code"><div></code> elements</p>
<p class="fragment">• <code class="code">$('#element')</code></p>
<p class="fragment pad-left-lg text-smaller">⇒ Selects the first HTML with an ID of "<code class="code">element</code>"</p>
<p class="fragment">• <code class="code">$('ul li .social-link')</code></p>
<p class="fragment pad-left-lg text-smaller">⇒ Select elements with class <code class="code">social-link</code> that are inside <code class="code"><li></code> elements which are inside <code class="code"><ul></code></p>
</div>
</section>
<section class="title" id="html-manipulation">
<h1>HTML Manipulation</h1>
</section>
<!-- HTML Manipulation -->
<section data-background="#FFF" class="text-left">
<div class="heading">HTML Manipulation</div>
<div class="text-smaller">
<p><code class="code">.html()</code></p>
<p class="text-smallest pad-left-lg">Reads the HTML (and text) inside the selected element:</p>
<pre><code class="code">
$('#element').html()
</code></pre>
<div class="fragment">
<p><code class="code">.html('<h1>a heading</h1>')</code></p>
<p class="text-smallest pad-left-lg">Overwrites the HTML inside the selected element:</p>
<pre><code class="code">
$('#element').html('<h1>a heading</h1>')
</code></pre>
</div>
</div>
</section>
<section class="center">
<h1><a target="_blank" href="http://codepen.io/cheshireoctopus/pen/ZbNKzQ?editors=101">Codealong</a></h1>
</section>
<!-- CLICK EVENT -->
<section class="title" id="click-event">
<h1>Click Event</h1>
</section>
<section data-background="#FFF" class="text-left">
<div class="heading">jQuery Click Event</div>
<div class="text-smallest">
<p>JavaScript:</p>
<pre><code class="code">
function handleClick() {
// do something
}
document.querySelector('#element').onclick = handleClick
</code></pre>
<div class="fragment">
<p>jQuery:</p>
<pre><code class="code">
function handleClick() {
// do something
}
$('#element').click(handleClick)
</code></pre>
</div>
</div>
</section>
<section class="center">
<h1><a target="_blank" href="http://codepen.io/cheshireoctopus/pen/ZbNKzQ?editors=101">CodeAlong</a></h1>
</section>
<!-- INPUTS AND .val() -->
<section class="title" id="input-and-val">
<h1><code class="lower"><input></code> & <code class="lower">.val()</code></h1>
</section>
<section data-background="#FFF" class="text-left">
<div class="heading"><code class="lower"><input></code> and <code class="lower">.val()</code></div>
<p>JavaScript:</p>
<pre><code class="code">
document.querySelector('#element').value
// returns the value inside of #element
</code></pre>
<div class="fragment">
<p>jQuery:</p>
<pre><code class="code">
$('#element').val()
// returns the value inside of #element
</code></pre>
</div>
</section>
<section data-background="#FFF" class="text-left">
<div class="heading"><code class="lower"><input></code> and <code class="lower">.val()</code></div>
<p>• Getting values, use <code class="code">.val()</code></p>
<pre><code class="code">
$('#element').val()
// returns the value inside of #element
</code></pre>
<div class="fragment">
<p>• Setting values, use <code class="code">.val('text')</code></p>
<pre><code class="code">
$('#element').val('Keanu Reeves')
// sets the value of #element to 'Keanu Reeves'
</code></pre>
</div>
</section>
<section class="title" id="using-jquery">
<h1>Using jQuery</h1>
</section>
<section data-background="#FFF" class="text-left">
<div class="heading">Using jQuery</div>
<p>Option 1: Download and store jQuery locally</p>
<div class="pad-left-lg text-smaller">
<p>1. Download jQuery from <a target="_blank" href="http://jquery.com/download">http://jquery.com/download</a></p>
<p>2. Save it as <code class="code">jquery.js</code> in the project's <code class="code">js</code> directory</p>
<p>3. Create a <code class="code"><script></code> tag <u>ABOVE</u> your JS files</p>
</div>
<pre><code class="code">
<script src="jquery.js"></script>
<script src="my-js-project.js"></script>
</code></pre>
</section>
<section data-background="#FFF" class="text-left">
<div class="heading">Using jQuery</div>
<p>Option 2: Link to an external jQuery source (CDN)</p>
<div class="pad-left-lg text-smaller">
<p>1. Locate an <a target="_blank" href="https://code.jquery.com/">externally hosted</a> version of jQuery</p>
</div>
<p class="pad-left-lg text-smaller">2. Create a <code class="code"><script></code> tag <u>ABOVE</u> your JS files</p>
<p class="pad-left-lg text-smaller">3. Point the <code class="code">src</code> attribute to the jQuery CDN</p>
<pre><code class="code">
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="my-js-project.js"></script>
</code></pre>
</section>
<section data-background="#FFF" class="text-left">
<div class="heading">Using jQuery: Script Placement</div>
<p>• <code class="code"><script></code> tags should always be placed:</p>
<p class="pad-left-lg">⇒ At the <u>BOTTOM</u> of your <code class="code"><body></code></p>
<p class="pad-left-lg">⇒ Right before the closing <code class="code"></body></code> tag</p>
<div class="fragment">
<p>• JS references the DOM - need to build it first!</p>
<p>• Remember: load <code class="code"><script></code>'s LAST</p>
</div>
</section>
<section class="title" id="css-manipulation">
<h1>CSS Manipulation</h1>
</section>
<section data-background="#FFF" class="text-left">
<div class="heading">CSS Manipulation: <code class="lower">.css()</code></div>
<p>JavaScript:</p>
<pre><code class="code">
document.querySelector('#element').style.color = 'red'
</code></pre>
<div class="fragment">
<p>jQuery:</p>
<pre><code class="code">
$('#element').css('color', 'red')
</code></pre>
</div>
</section>
<section data-background="#FFF" class="text-left">
<div class="heading">CSS Manipulation: <code class="lower">.css()</code></div>
<p>• Set Single Property:</p>
<pre><code class="code">
$('p').css('background-color', 'pink')
</code></pre>
<div class="fragment">
<p>• Multiple Properties:</p>
<pre><code class="code">
$('#element').css({ 'height': '100px', 'width': '100px' })
</code></pre>
</div>
</section>
<section data-background="#FFF" class="text-left">
<div class="heading">Lab</div>
<div class="text-smallest">
<p>1. Open <code class="code">calculator-box</code> in SublimeText</p>
<p>2. Add a <code class="code"><script></code> tag to include jQuery</p>
<p>3. Include the following behavior:</p>
<div class="pad-left-lg text-smaller">
<p>• Clicking on a "plus" box adds to the total in the center</p>
<p>• Clicking on a "minus" box subtracts from the total</p>
<p>• Clicking the red box makes the background of the center box red</p>
<p>• Clicking the blue box makes the background of the center box blue</p>
<p>• Clicking the center box make its background white and resets the value to zero</p>
</div>
</div>
</section>
<!-- THE END -->
<section class="center">
<img src="img/main/the-end.jpg">
</section>
<!-- ON DECK -->
<section data-background="#FFF" class="text-left">
<div class="heading">On Deck: #14 - jQuery (pt. 2)</div>
<p>• Toggling element visibility (hide vs. show)</p>
<p>• Manipulating element attributes using <code class="code">.attr()</code></p>
<p>• The <code class="code">$(this)</code> keyword</p>
<p>• Document traversal (walking the DOM)</p>
</section>
<section class="center">
<h1>Exit Tickets!</h1>
</section>
</div>
</div>
<script src="js/head.min.js"></script>
<script src="js/reveal.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>