forked from gdi-curriculum-review/gdi-featured-js-intro-OLD
-
Notifications
You must be signed in to change notification settings - Fork 6
/
class2.html
861 lines (787 loc) · 33.5 KB
/
class2.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
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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Class 2 ~ Intro to JavaScript</title>
<meta name="description" content="Introduction to JavaScript programming course materials.">
<meta name="author" content="Philly Tech Sistas">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link rel="stylesheet" href="reveal/css/reveal.css">
<link rel="stylesheet" href="reveal/css/theme/sunny.css" id="theme">
<link rel="stylesheet" href="css/custom.css">
<!-- For syntax highlighting -->
<!-- light editor--><link rel="stylesheet" href="reveal/lib/css/light.css">
<!-- dark editor<link rel="stylesheet" href="reveal/lib/css/dark.css">-->
<!-- If use the PDF print sheet so students can print slides-->
<link rel="stylesheet" href="reveal/css/print/pdf.css" type="text/css" media="print">
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section>
<img src="#" alt="" style="max-width: 300px;">
<h3>JavaScript for Beginners</h3>
<h4>Class 2</h4>
<!-- <p><a href="class2-downloads.zip">Download class files</a></p> -->
</section>
<section>
<h3>Objects</h3>
<p>Objects let us store a collection of properties.</p>
<pre><code>
var objectName = {
propertyName: propertyValue,
propertyName: propertyValue,
...
};
</code></pre>
<pre><code>
var aboutMe = {
hometown: 'Somewhere in Texas',
hair: 'brown, usually short'
};
</code></pre>
</section>
<section>
<h3>Objects</h3>
<p>Object properties can have values with all of the data types we've seen, including numbers, text, arrays, and other objects.</p>
<pre><code>var aboutMe = {
hometown: 'Somewhere in Texas',
hair: 'brown, usually short',
likes: ['kittens', 'code', 'dancing'],
birthday: {month: 4, day: 17}
};
</code></pre>
</section>
<section>
<h3>Accessing Objects</h3>
<p>You can retrieve values using "dot notation"</p>
<pre><code>var myHometown = aboutMe.hometown;
</code></pre>
<p>Or using "bracket notation" (like arrays)</p>
<pre><code>
var myHair = aboutMe['hair'];
</code></pre>
</section>
<section>
<h3>Changing Objects</h3>
<p>You can use dot or bracket notation to change properties</p>
<pre><code>
var aboutMe = {
hometown: 'Somewhere in Texas',
hair: 'brown, usually short'
};
aboutMe.hair = 'blue';
</code></pre>
<p>Add new properties</p>
<pre><code>
aboutMe.pet = 'cat';
</code></pre>
<p>Or delete them</p>
<pre><code>
delete aboutMe.pet; // oh noes!!!
</code></pre>
</section>
<section>
<h3>Let's Develop It</h3>
<p>
<p>Create an object to hold information on your favorite recipe. It should have properties for recipeTitle (a string), servings (a number), and ingredients (an array of strings).</p>
<p>Display your recipeTitle, servings, and ingredients list on the page.</p>
<pre><code>var myRecipe = {
recipeTitle: 'Vegan pancakes',
servings: 4,
ingredients: ['ingredients', 'go', 'here']
}
// you need to make an HTML element with id #recipeTitle for this to work
document.getElementById('recipeTitle').innerHTML = myRecipe.recipeTitle;
</code></pre>
</p>
</section>
<section>
<h3>Objects as function arguments</h3>
<p>Just like other data types, objects can be passed into functions:</p>
<pre><code>
var WillaTheCat = {
age: 8,
furColor: 'orange',
likes: ['catnip', 'tofurky', 'tuna'],
birthday: {month: 3, day: 10, year: 2008}
}
function describeCat(cat) {
console.log('This cat is ' + cat.age + ' years old with ' + cat.furColor + ' fur.');
}
describeCat(WillaTheCat);
</code></pre>
</section>
<section>
<h3>Let's Develop It</h3>
<p>Write a function that loops through all the ingredients from your recipe object and lists them on your <code>practice.html</code> page.</p>
<p>Your function should have 1 argument, which is an object.</p>
<pre><code>function listIngredients(recipe) {
var ingredients = recipe.ingredients;
for (var i = 0; i < ingredients.length; i++) {
var ingredient = ingredients[i] + ', ';
document.getElementById('foods').innerHTML += ingredient;
}
}
listIngredients(myRecipe);
</code></pre>
</section>
<section>
<h3>Arrays of Objects</h3>
<p>Since arrays can hold any data type, they can also hold objects</p>
<pre><code>
var myCats = [
{name: 'Willa',
age: 8},
{name: 'Squeaky',
age: 12}
];
for (var i = 0; i < myCats.length; i++) {
var myCat = myCats[i];
console.log(myCat.name + ' is ' + myCat.age + ' years old.');
}
</code></pre>
</section>
<section>
<h3>Let's Develop It</h3>
<ol>
<li>Create a new array named recipeBook.</li>
<li>Create a new recipe object.</li>
<li>Add your recipe objects to the recipeBook list using the <a href="http:/
/cfarm.github.io/intro-to-javascript/class1.html#/62"><code>push()</code> function</a>.</li>
<li>Loop through the recipeBook array to list information about each recipe title and servings on the page.</li>
</ol>
<pre><code>for (var i = 0; i < recipeBook.length; i++) {
var recipe = recipeBook[i];
var servings = recipe.servings;
var title = recipe.recipeTitle + ', serves ' + servings + ' <br>';
document.getElementById('recipeList').innerHTML += title;
}
</code></pre>
</section>
<section>
<h3>Let's Develop It</h3>
<p>
<a href="https://cfarm.github.io/intro-to-javascript/puzzles.html#reading">JavaScript Puzzle: The Reading List</a>
</p>
</section>
<section>
<h3>Object methods</h3>
<p>Objects can also hold functions.</p>
<pre><code>
var WillaTheCat = {
age: 8,
furColor: 'orange',
meow: function() {
console.log('meowww');
},
eat: function(food) {
console.log('Yum, I love ' + food);
}
};
</code></pre>
<p>Call object methods using dot notation:</p>
<pre><code>
WillaTheCat.meow();
WillaTheCat.eat('tuna');
WillaTheCat.eat(WillaTheCat.likes[0]);
WillaTheCat.eat(WillaTheCat.likes[1]);
WillaTheCat.eat(WillaTheCat.likes[2]);
</code></pre>
</section>
<section>
<h3>Let's Develop It</h3>
<p>Add a function to your recipe objects called 'describe.' It should return the recipe title and servings. <span class="blue">Hint:</span> reuse your code from your recipeBook loop.</p>
<p>Update your recipeBook loop to call this function in place of the previous describe + display code.</p>
<pre><code>myRecipe.describe = function() {
return myRecipe.recipeTitle + ', serves ' + myRecipe.servings + ' <br>';
}
for (var i = 0; i < recipeBook.length; i++) {
var recipe = recipeBook[i];
document.getElementById('recipeList').innerHTML += recipe.describe();
}
</code></pre>
</section>
<section>
<h3>Built-in methods</h3>
<p>JS provides several built-in objects:</p>
<ul>
<li><code><a target="_blank" href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array">Array</a></code></li>
<li><code><a target="_blank" href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Boolean">Boolean</a></code></li>
<li><code><a target="_blank" href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Number">Number</a></code></li>
<li><code><a target="_blank" href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String">String</a></code></li>
<li><code><a target="_blank" href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/RegExp">RegExp</a></code></li>
<li><code><a target="_blank" href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Date">Date</a></code></li>
<li><code><a target="_blank" href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Math">Math</a></code></li>
</ul>
</section>
<section>
<h3>Review: Anatomy of a website</h3>
<div class = "blue"> Your Content</div>
<div><span class = "blue">+ HTML: </span>Structure</div>
<div><span class = "blue">+ CSS: </span>Presentation</div>
<div class = "blue">= Your Website</div>
<p>A website is a way to present your content to the world, using HTML and CSS to present that content & make it look good.</p>
</section>
<section>
<h3>IDs vs. Classes</h3>
<div class = "left-align">
<span class = "yellow">ID</span> -- Should only apply to one element on a webpage, e.g., A webpage only has one footer.
<p>The "#" is how you tell CSS "this is an id."</p>
</div>
<div class = "left-align">
<span class = "yellow">Class</span> -- Lots of elements can have the same class, e.g., There can be many warnings on one webpage.
<p>The "." is how you tell CSS "this is a class name."</p>
</div>
</section>
<section>
<h3>The DOM Tree</h3>
<p>We model the nested structure of an HTML page with the DOM (Document Object Model) Tree. The browser makes a "map" of all the elements on a page.</p>
</section>
<section>
<h3>The DOM: Sample Code</h3>
<pre><code>
<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>My Page</h1>
<p>Hello World!</p>
<img src="http://placekitten.com/200/300" alt="cat"/>
</body>
</html>
</code></pre>
</section>
<section>
<h3>The DOM: Sample Model</h3>
<img src="images/dom-tree.png" alt="Simple DOM Tree"/>
</section>
<!--Accessing the DOM-->
<section>
<h3>DOM Access</h3>
<p>Your browser automatically builds a Document object to store the DOM of a page. To change a page:</p>
<ol>
<li>Find the DOM node and store it in a variable</li>
<li>Use methods to manipulate the node</li>
</ol>
</section>
<!-- <section>
<h3>DOM Access: By Id</h3>
<p>You can find nodes by id using the method:</p>
<pre><code>
document.getElementById(id);
</code></pre>
<p>To find:</p>
<pre><code>
<img id="kittenPic" src="http://placekitten.com/200/300" alt="cat"/>
</code></pre>
<p>We would use:</p>
<pre><code>
var imgKitten = document.getElementById('kittenPic');
</code></pre>
</section>
<section>
<h3>DOM Access: By Tag Name</h3>
<p>You can get a list of specific kinds of elements using this method:</p>
<pre><code>
document.getElementsByTagName(tagName);
</code></pre>
<p>To find:</p>
<pre><code>
<li>Daisy</li>
<li>Tulip</li>
</code></pre>
<p>We would use:</p>
<pre><code>
var listItems = document.getElementsByTagName('li');
for (var i =0; i < listItems.length; i++) {
var listItem = listItems[i];
}
</code></pre>
</section>
<section>
<h3>DOM Access: HTML 5</h3>
<p>In newer browsers, you can use other methods too.</p>
<p>Available in <a href="http://caniuse.com/#search=getElementsByClassName">IE9+, FF3.6+, Chrome 17+, Safari 5+</a>:</p>
<pre><code>
document.getElementsByClassName(className);
</code></pre>
<p>Available in <a href="http://caniuse.com/#search=querySelectorAll">IE8+, FF3.6+, Chrome 17+, Safari 5+</a>:</p>
<pre><code>
document.querySelector(cssQuery);
document.querySelectorAll(cssQuery);
</code></pre>
</section>
<section>
<h3>getElement vs. getElements</h3>
<p>Any method that starts with "getElement" will return a <span class = "blue">single</span> node.</p>
<pre><code>
document.getElementById('uniqueID'); //returns a single node
</code></pre>
<p>Any method that starts with "getElements" will return a <span class = "blue">array</span> of nodes. To modify a single node, you will need to use bracket notation to select the correct one.</p>
<pre><code>
document.getElementsByTagName('p'); //returns multiple nodes
var specficParagraph = document.getElementsByTagName('p')[2];
</code></pre>
</section> -->
<section>
<h3>Let's Develop It</h3>
<p>Save the <code>jumbotron</code>, <code>header</code> and <code>footer</code> elements in your <code>practice.html</code> file as variables.</p>
<p>Use <code>getElementsByClassName</code>, <code>querySelector</code> and <code>getElementsByTagName</code>.</p>
<p>Log each variable to the console to view the HTML associated with each.</p>
<pre><code>var jumbotron = document.getElementsByClassName('jumbotron')[0];
var header = document.querySelector('.header');
var footer = document.getElementsByTagName('footer')[0];
console.log(jumbotron);
console.log(header);
console.log(footer);
</code></pre>
</section>
<!-- <section>
<h3>DOM Nodes: InnerHTML</h3>
<p>You can change the content inside an element by accessing its <code>.innerHTML</code> property.</p>
<p>Replace the content:</p>
<pre><code>
document.getElementById('headline').innerHTML = 'New message!';
</code></pre>
<p>Or add on to it:</p>
<pre><code>
document.getElementById('headline').innerHTML += 'Additional new message after the existing content.';
</code></pre>
</section> -->
<section>
<h3>DOM Nodes: Attributes</h3>
<p>You can access and change attributes of DOM nodes using dot notation.</p>
<p>To change this element:</p>
<pre><code>
<img id="kittenPic" src="http://placekitten.com/200/300" alt="cat"/>
</code></pre>
<p>We could change the src attribute this way:</p>
<pre><code>
var imgKitten = document.getElementById('kittenPic');
var oldSrc = imgKitten.src;
imgKitten.src = 'http://placekitten.com/100/500';
</code></pre>
</section>
<!-- <section>
<h3>DOM Nodes: Getting and Setting Attributes</h3>
<p>You can also use <code>getAttribute/setAttribute</code></p>
<pre><code>
<img id="kittenPic" src="http://placekitten.com/200/300" alt="cat"/>
</code></pre>
<p>We could change the src attribute this way:</p>
<pre><code>
var imgKitten = document.getElementById('kittenPic');
var oldSrc = imgKitten.getAttribute('src');
imgKitten.setAttribute('src', 'http://placekitten.com/100/500');
</code></pre>
</section> -->
<section>
<h3>DOM Nodes: Changing Attributes</h3>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes">A list of HTML attributes we can change using JavaScript</a></p>
</section>
<!-- <section>
<h3>Let's Develop It</h3>
<p>Add a picture to your <code>practice.html</code> page. Give it an <code>id</code> attribute so we can grab it with JS.</p>
<p>Use JavaScript to add 'height' and 'width' attributes to the img element.</p>
<pre><code>var imgKitten = document.getElementById('kittenPic');
imgKitten.setAttribute('height', '200');
imgKitten.setAttribute('width', '200');
</code></pre>
</section> -->
<section>
<h3>DOM Nodes: Styles</h3>
<p>You can change page css using <code>style</code></p>
<p>To make this CSS:</p>
<pre><code>
body {
color: red;
}
</code></pre>
<p>Use this JavaScript:</p>
<pre><code>
var pageNode = document.getElementsByTagName('body')[0];
pageNode.style.color = 'red';
</code></pre>
</section>
<section>
<h3>DOM Nodes: More Styles</h3>
<p>Change any CSS property with a "-" to camelCase, and be sure to include a unit on any number</p>
<p>To make this CSS:</p>
<pre><code>
body {
background-color: pink;
padding-top: 10px;
}
</code></pre>
<p>Use this JavaScript:</p>
<pre><code>
var pageNode = document.getElementsByTagName('body')[0]
pageNode.style.backgroundColor = 'pink';
pageNode.style.paddingTop = '10px';
</code></pre>
</section>
<section>
<h3>Let's Develop It</h3>
<p>Use JavaScript to change the background color of your <code>practice.html</code> page.</p>
<pre><code>var pageNode = document.getElementsByTagName('body')[0];
pageNode.style.backgroundColor = 'turquoise';
</code></pre>
<p>Change the font of your h1 element using the same methods and the 'font-family' CSS property.</p>
<p>Change some more CSS properties of your jumbotron, header, and footer elements using your existing variables.</p>
</section>
<section>
<h3>DOM innerHTML</h3>
<p>Each DOM node has an <code>innerHTML</code> property with the HTML of all its children. You can use the property to view or change the HTML of a node.</p>
<p>For example, you can overwrite the entire body:</p>
<pre><code>
var pageNode = document.getElementsByTagName('body')[0];
pageNode.innerHTML = '<h1>Oh Noes!</h1> <p>I just changed the whole page!</p>'
</code></pre>
<p>Or just add some new content to the end</p>
<pre><code>
pageNode.innerHTML += '...just adding this bit at the end of the page.';
</code></pre>
</section>
<section>
<h3>DOM innerHTML continued</h3>
<p>You can also target a particular element</p>
<p>To fill this HTML element:</p>
<pre><code>
<p id="warning"></p>
</code></pre>
<p>We can select the node and modify it</p>
<pre><code>
var warningParagraph = document.getElementById('warning');
warningParagraph.innerHTML = 'Danger Will Robinson!';
</code></pre>
</section>
<section>
<h3>Creating New Nodes</h3>
<p>The <code>document</code> object also provides ways to create nodes from scratch:</p>
<pre><code>
document.createElement(tagName);
document.createTextNode(text);
document.appendChild();
</code></pre>
</section>
<section>
<h3>Creating New Nodes: Sample Code</h3>
<pre><code>
var pageNode = document.getElementsByTagName('body')[0];
var newImg = document.createElement('img');
newImg.src = 'http://placekitten.com/400/300';
newImg.style.border = '1px solid black';
pageNode.appendChild(newImg);
var newParagraph = document.createElement('p');
var paragraphText = document.createTextNode('Squee!');
newParagraph.appendChild(paragraphText);
pageNode.appendChild(newParagraph);
</code></pre>
</section>
<section>
<h3>Let's Develop It</h3>
<p>Create a new paragraph element and add it to a div on your page.</p>
</section>
<section>
<h3>Events</h3>
<p>An 'event' is a type of object that is created when the user interacts with a web page.</p>
<p>For example, JS creates an event when a user clicks an element.</p>
<pre><code>
element.onclick = function () {
//code to execute when the click happens
};
</code></pre>
</section>
<section>
<h3>Types of Events</h3>
<p>There are <a href="http://www.w3schools.com/jsref/dom_obj_event.asp">variety of events</a>. Some of the most common:</p>
<ul>
<li>onclick: The event occurs when the user clicks on an element</li>
<li>onmouseover: The event occurs when the pointer is moved onto an element</li>
<li>onkeyup: The event occurs when the user releases a key</li>
<li>onload: The event occurs when a document has been loaded</li>
<li>onfocus: The event occurs when an element gets focus</li>
</ul>
</section>
<section>
<h3>Events and Code</h3>
<p>How do you make an event trigger some code?</p>
<ol>
<li>Save your event target as a variable</li>
<li>Make a function that does what you want. This is called the <em>event listener</em>.</li>
<li>Attach the function to the event with an <em>event handler</em> (onclick, onload, onscroll)</li>
</ol>
</section>
<!-- <section>
<h3>Calling Functions from HTML</h3>
<p>You can call a function directly from your HTML code:</p>
<pre><code>
<button id="clickMe" onclick="sayHi()">Click Me!</button>
</code></pre>
<pre><code>
function sayHi() {
alert ('Hi!');
}
</code></pre>
</section> -->
<section>
<h3>Listening Functions</h3>
<p>Listening functions require the same steps as other things we have practiced- first, you have to save the element you want to target:</p>
<pre><code>
var myTarget = document.getElementById('clickMe'); // save as a variable
</code></pre>
<p>Then add an event handler('onclick') and a function (event listener) to that object:</p>
<pre><code>
myTarget.onclick = sayHi;
function sayHi(){
alert ('Hi!');
}
</code></pre>
</section>
<section>
<h3>Let's Develop It</h3>
<!-- <p>Download <a href="class2-downloads.zip">class2 exerise files</a>.</p> -->
<p>Let's use that big green "Click me" button!
<p>Make some JavaScript code fire after a <code>click</code> event. Try adding the event to the HTML and adding a listening function.</p>
</section>
<section>
<h3>Preventing Defaults</h3>
<p>Elements like buttons and links have a default behaviors. However, the <code>event</code> objects has a built-in method to handle that:</p>
<pre><code>
element.onclick = function (event) {
event.preventDefault();
};
</code></pre>
</section>
<section>
<h3>This</h3>
<p>The keyword <code>this</code> references the element that the user has just interacted with</p>
<pre><code>
element.onmouseover = function (event) {
console.log(this);
};
element.onclick = function (event) {
this.style.backgroundColor = 'red';
this.innerHTML = 'I've been clicked!';
};
</code></pre>
</section>
<section>
<h3>Let's Develop It</h3>
<p>Add this link to your page, then write JavaScript that targets this link:</p>
<pre><code>
<a href="http://phillytechsistas.org/" id="link">Philly Tech Sistas</a>
</code></pre>
<p>When a user clicks the link, the page should display an alert <strong>instead</strong> of going to the Philly Tech Sistas homepage.</p>
</section>
<section>
<h3>Forms</h3>
<p>You can collect information from users to use in functions. The most common method is an HTML form</p>
<pre><code>
<form id="temperatureForm">
<label for="temp">Temperature:</label> <input type="text" id="temp" size="3"/> degrees in
<input type="radio" name="tempFormat" value="F" checked />Fahrenheit
<input type="radio" name="tempFormat" value="C" />Celsius <br />
<label for="submitButton"></label> <input id="tempSubmitButton" type="submit" value="Submit" />
</form>
</code></pre>
</section>
<section>
<h3>Retrieving Form Data</h3>
<p>You retrieve the values of form elements using the <code>value</code> property.</p>
<pre><code>
var temperature = document.getElementById('temp').value;
console.log (temperature);
</code></pre>
<p>You can retrieve the value of a form at any time. Try <code>onblur</code> (when a form element loses focus).</p>
</section>
<section>
<h3>Submit buttons</h3>
<p>If you are going to retrieve form values with the submit button, be sure to prevent the default action!</p>
<pre><code>
var submitButton = document.getElementById('tempSubmitButton');
submitButton.onclick = function () {
event.preventDefault();
var temperature = document.getElementById('temp').value;
console.log (temperature);
}
</code></pre>
</section>
<section>
<h3>Let's Develop It</h3>
<p>
Add this form HTML to your page:
</p>
<pre><code>
<form id="sayMyName">
<label for="name">Name:</label> <input type="text" id="name" >
<label for="submit"></label> <input id="submit" type="submit" value="Submit" />
</form>
</code></pre>
<p>Write event code that collects the name from the page when the form is submitted.</p>
<p>Put the name from the user input onto the page in a new HTML element, or an alert.</p>
</section>
<section>
<h3>Let's Develop It</h3>
<p>Let's make a form for users to submit recipes to our recipeBook.
<p>
Add this form HTML to your page:
</p>
<pre><code><form id="shareRecipes">
<label for="shareRecipeTitle">Recipe title:</label> <input type="text" id="shareRecipeTitle" ><br>
<label for="shareServings">How many servings?</label> <input type="text" id="shareServings" ><br>
<fieldset>
<legend>What ingredients do you use?</legend> <br>
<label for="shareIngredients1"> <input type="text" id="shareIngredients1" ><br>
<label for="shareIngredients2"> <input type="text" id="shareIngredients2" ><br>
<label for="shareIngredients3"> <input type="text" id="shareIngredients3" ><br>
<label for="shareIngredients4"> <input type="text" id="shareIngredients4" ><br>
</fieldset>
<label for="submitSharedRecipe"></label> <input id="submitSharedRecipe" type="submit" value="Submit shared recipe" />
</form></code></pre>
</section>
<section>
<h3>Let's Develop It</h3>
<ol>
<li>Write event code that collects the recipe title, servings, and ingredients from the page when the form is submitted (use a submit event).</li>
<li>The info should be saved as an object and then added to the recipeBook array.</li>
<li>Use your listIngredients() function to print the recipe to the page after the new recipe object is saved.</li>
</ol>
</section>
<!-- <section>
<h3>Timing Events</h3>
<p>In JavaScript, is possible to execute some code at specified time intervals.</p>
<ul>
<li><code>setInterval()</code> executes a function over and over again, at specified time intervals</li>
<li><code>setTimeout()</code> executes a function, once, after waiting a specified number of milliseconds</li>
</ul>
</section>
<section>
<h3>setInterval</h3>
<p>The syntax for <code>setInterval()</code> is:</p>
<pre><code>
setInterval(function, milliseconds);
</code></pre>
<p>For example, this is a simple clock:</p>
<pre><code>
var simpleClock=setInterval(myClock, 1000);
function myClock() {
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById('resultsBox').innerHTML = t;
}
</code></pre>
</section>
<section>
<h3>clearInterval</h3>
<p>You can use <code>clearInterval()</code> to stop a setInterval loop</p>
<pre><code>
clearInterval(intervalVariable)
</code></pre>
<p>To stop our clock:</p>
<pre><code>
function myStopFunction() {
clearInterval(simpleClock);
}
</code></pre>
</section>
<section>
<h3>setTimeout</h3>
<p>The method <code>setTimeout()</code> is similar, but it will only run once.</p>
<pre><code>
setTimeout(function, milliseconds);
</code></pre>
<p>For example, this code will wait 3 seconds, then create a popup box, unless the user triggers the <code>clearTimeout()</code></p>
<pre><code>
var helloBox;
function sayHello() {
helloBox=setTimeout(function(){alert('Hello')},3000);
}
function dontSayIt() {
clearTimeout(helloBox);
}
</code></pre>
</section>
<section>
<h3>Animations</h3>
<p>By changing values slowly over time, we can create simple animations</p>
<pre><code>
var targetPic = document.getElementById('turtlePic');
targetPic.onclick = function () {
var leftMarginValue = 0;
function increaseMargin() {
leftMarginValue++ // update parameter each time
targetPic.style.marginLeft = leftMarginValue + 'px' //set left margin
if (leftMarginValue === 200) // check finish condition {
clearInterval(movePic);
}
var movePic = setInterval(function(){increaseMargin()}, 10) // update every 10ms
}
</code></pre>
</section>
<section>
<h3>Let's Develop It</h3>
<p>Find a picture of a turtle (or other cute animal) and add it to your HTML page:</p>
<pre><code><img src="turtle.jpg" alt="Turtle"/>
</code></pre>
<p>Using the function from the previous slide as a base, try changing some animation parameters. What happens?</p>
</section>
-->
<section>
<h3>Resources</h3>
<ul>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide" target="_blank">JavaScript Guide</a>, from the Mozilla Developers Network.</li>
<li><a href="http://www.codecademy.com/tracks/javascript" target="_blank">Code Academy</a>, with interactive JavaScript lessons to help you review.</li>
</ul>
</section>
</section>
<section>
<h3>Class Survey</h3>
<p><a href="http://bit.ly/2Dtv2gb">http://bit.ly/2Dtv2gb</a></p>
</section>
</div><!-- Close .slides -->
<footer>
<div class="copyright">
Intro to JavaScript
<a rel="license" href="http://creativecommons.org/licenses/by-nc/3.0/deed.en_US"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc/3.0/80x15.png" /></a>
</div><!-- Close .copyright -->
</footer>
</div><!-- Close .reveal -->
<script src="reveal/lib/js/head.min.js"></script>
<script src="reveal/js/reveal.min.js"></script>
<script>
// Full list of configuration options available here:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
touch: true,
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
transition: Reveal.getQueryHash().transition || 'linear', // default/cube/page/concave/zoom/linear/none
// Optional libraries used to extend on reveal.js
dependencies: [
{ src: 'reveal/lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'reveal/plugin/markdown/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'reveal/plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'reveal/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'reveal/plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
{ src: 'reveal/plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
]
});
</script>
</body>
</html>