JavaScript 101 - Class 2
-
Upload
robert-pearce -
Category
Software
-
view
102 -
download
2
Transcript of JavaScript 101 - Class 2
![Page 1: JavaScript 101 - Class 2](https://reader035.fdocuments.net/reader035/viewer/2022062711/55c3caf4bb61eb0d5d8b45fc/html5/thumbnails/1.jpg)
1. Refresher 2. Array Basics 3. Loops 4. Control Flow
![Page 2: JavaScript 101 - Class 2](https://reader035.fdocuments.net/reader035/viewer/2022062711/55c3caf4bb61eb0d5d8b45fc/html5/thumbnails/2.jpg)
Data types
![Page 3: JavaScript 101 - Class 2](https://reader035.fdocuments.net/reader035/viewer/2022062711/55c3caf4bb61eb0d5d8b45fc/html5/thumbnails/3.jpg)
Data types
Number!42
![Page 4: JavaScript 101 - Class 2](https://reader035.fdocuments.net/reader035/viewer/2022062711/55c3caf4bb61eb0d5d8b45fc/html5/thumbnails/4.jpg)
Data types
Number!42
Float!867.5309
![Page 5: JavaScript 101 - Class 2](https://reader035.fdocuments.net/reader035/viewer/2022062711/55c3caf4bb61eb0d5d8b45fc/html5/thumbnails/5.jpg)
Data types
Number!42
Float!867.5309
String!“Hey, Jude”
![Page 6: JavaScript 101 - Class 2](https://reader035.fdocuments.net/reader035/viewer/2022062711/55c3caf4bb61eb0d5d8b45fc/html5/thumbnails/6.jpg)
Data types
Number!42
Float!867.5309
String!“Hey, Jude”
Boolean!true
![Page 7: JavaScript 101 - Class 2](https://reader035.fdocuments.net/reader035/viewer/2022062711/55c3caf4bb61eb0d5d8b45fc/html5/thumbnails/7.jpg)
Variables
![Page 8: JavaScript 101 - Class 2](https://reader035.fdocuments.net/reader035/viewer/2022062711/55c3caf4bb61eb0d5d8b45fc/html5/thumbnails/8.jpg)
![Page 9: JavaScript 101 - Class 2](https://reader035.fdocuments.net/reader035/viewer/2022062711/55c3caf4bb61eb0d5d8b45fc/html5/thumbnails/9.jpg)
Functions
![Page 10: JavaScript 101 - Class 2](https://reader035.fdocuments.net/reader035/viewer/2022062711/55c3caf4bb61eb0d5d8b45fc/html5/thumbnails/10.jpg)
![Page 11: JavaScript 101 - Class 2](https://reader035.fdocuments.net/reader035/viewer/2022062711/55c3caf4bb61eb0d5d8b45fc/html5/thumbnails/11.jpg)
1. Refresher 2. Array Basics 3. Loops 4. Control Flow
![Page 12: JavaScript 101 - Class 2](https://reader035.fdocuments.net/reader035/viewer/2022062711/55c3caf4bb61eb0d5d8b45fc/html5/thumbnails/12.jpg)
What is an Array and why do I care?
![Page 13: JavaScript 101 - Class 2](https://reader035.fdocuments.net/reader035/viewer/2022062711/55c3caf4bb61eb0d5d8b45fc/html5/thumbnails/13.jpg)
![Page 14: JavaScript 101 - Class 2](https://reader035.fdocuments.net/reader035/viewer/2022062711/55c3caf4bb61eb0d5d8b45fc/html5/thumbnails/14.jpg)
![Page 15: JavaScript 101 - Class 2](https://reader035.fdocuments.net/reader035/viewer/2022062711/55c3caf4bb61eb0d5d8b45fc/html5/thumbnails/15.jpg)
An array can be stored as a variable
![Page 16: JavaScript 101 - Class 2](https://reader035.fdocuments.net/reader035/viewer/2022062711/55c3caf4bb61eb0d5d8b45fc/html5/thumbnails/16.jpg)
![Page 17: JavaScript 101 - Class 2](https://reader035.fdocuments.net/reader035/viewer/2022062711/55c3caf4bb61eb0d5d8b45fc/html5/thumbnails/17.jpg)
How do I access just one value?
![Page 18: JavaScript 101 - Class 2](https://reader035.fdocuments.net/reader035/viewer/2022062711/55c3caf4bb61eb0d5d8b45fc/html5/thumbnails/18.jpg)
Array indices
![Page 19: JavaScript 101 - Class 2](https://reader035.fdocuments.net/reader035/viewer/2022062711/55c3caf4bb61eb0d5d8b45fc/html5/thumbnails/19.jpg)
![Page 20: JavaScript 101 - Class 2](https://reader035.fdocuments.net/reader035/viewer/2022062711/55c3caf4bb61eb0d5d8b45fc/html5/thumbnails/20.jpg)
![Page 21: JavaScript 101 - Class 2](https://reader035.fdocuments.net/reader035/viewer/2022062711/55c3caf4bb61eb0d5d8b45fc/html5/thumbnails/21.jpg)
![Page 22: JavaScript 101 - Class 2](https://reader035.fdocuments.net/reader035/viewer/2022062711/55c3caf4bb61eb0d5d8b45fc/html5/thumbnails/22.jpg)
![Page 23: JavaScript 101 - Class 2](https://reader035.fdocuments.net/reader035/viewer/2022062711/55c3caf4bb61eb0d5d8b45fc/html5/thumbnails/23.jpg)
![Page 24: JavaScript 101 - Class 2](https://reader035.fdocuments.net/reader035/viewer/2022062711/55c3caf4bb61eb0d5d8b45fc/html5/thumbnails/24.jpg)
![Page 25: JavaScript 101 - Class 2](https://reader035.fdocuments.net/reader035/viewer/2022062711/55c3caf4bb61eb0d5d8b45fc/html5/thumbnails/25.jpg)
![Page 26: JavaScript 101 - Class 2](https://reader035.fdocuments.net/reader035/viewer/2022062711/55c3caf4bb61eb0d5d8b45fc/html5/thumbnails/26.jpg)
![Page 27: JavaScript 101 - Class 2](https://reader035.fdocuments.net/reader035/viewer/2022062711/55c3caf4bb61eb0d5d8b45fc/html5/thumbnails/27.jpg)
![Page 28: JavaScript 101 - Class 2](https://reader035.fdocuments.net/reader035/viewer/2022062711/55c3caf4bb61eb0d5d8b45fc/html5/thumbnails/28.jpg)
![Page 29: JavaScript 101 - Class 2](https://reader035.fdocuments.net/reader035/viewer/2022062711/55c3caf4bb61eb0d5d8b45fc/html5/thumbnails/29.jpg)
How do I tell how many items are in there?
![Page 30: JavaScript 101 - Class 2](https://reader035.fdocuments.net/reader035/viewer/2022062711/55c3caf4bb61eb0d5d8b45fc/html5/thumbnails/30.jpg)
![Page 31: JavaScript 101 - Class 2](https://reader035.fdocuments.net/reader035/viewer/2022062711/55c3caf4bb61eb0d5d8b45fc/html5/thumbnails/31.jpg)
![Page 32: JavaScript 101 - Class 2](https://reader035.fdocuments.net/reader035/viewer/2022062711/55c3caf4bb61eb0d5d8b45fc/html5/thumbnails/32.jpg)
Exercise
Create an Array with any values and assign it to a variable.!
RTFG (read the freaking google) and find out how to delete an item from a JavaScript array.
![Page 33: JavaScript 101 - Class 2](https://reader035.fdocuments.net/reader035/viewer/2022062711/55c3caf4bb61eb0d5d8b45fc/html5/thumbnails/33.jpg)
1. Refresher 2. Array Basics 3. Loops 4. Control Flow
![Page 34: JavaScript 101 - Class 2](https://reader035.fdocuments.net/reader035/viewer/2022062711/55c3caf4bb61eb0d5d8b45fc/html5/thumbnails/34.jpg)
“for” loops
![Page 35: JavaScript 101 - Class 2](https://reader035.fdocuments.net/reader035/viewer/2022062711/55c3caf4bb61eb0d5d8b45fc/html5/thumbnails/35.jpg)
![Page 36: JavaScript 101 - Class 2](https://reader035.fdocuments.net/reader035/viewer/2022062711/55c3caf4bb61eb0d5d8b45fc/html5/thumbnails/36.jpg)
![Page 37: JavaScript 101 - Class 2](https://reader035.fdocuments.net/reader035/viewer/2022062711/55c3caf4bb61eb0d5d8b45fc/html5/thumbnails/37.jpg)
![Page 38: JavaScript 101 - Class 2](https://reader035.fdocuments.net/reader035/viewer/2022062711/55c3caf4bb61eb0d5d8b45fc/html5/thumbnails/38.jpg)
![Page 39: JavaScript 101 - Class 2](https://reader035.fdocuments.net/reader035/viewer/2022062711/55c3caf4bb61eb0d5d8b45fc/html5/thumbnails/39.jpg)
![Page 40: JavaScript 101 - Class 2](https://reader035.fdocuments.net/reader035/viewer/2022062711/55c3caf4bb61eb0d5d8b45fc/html5/thumbnails/40.jpg)
Remember this array?
![Page 41: JavaScript 101 - Class 2](https://reader035.fdocuments.net/reader035/viewer/2022062711/55c3caf4bb61eb0d5d8b45fc/html5/thumbnails/41.jpg)
![Page 42: JavaScript 101 - Class 2](https://reader035.fdocuments.net/reader035/viewer/2022062711/55c3caf4bb61eb0d5d8b45fc/html5/thumbnails/42.jpg)
How can we “iterate” through this Array and print
out all of the values?
![Page 43: JavaScript 101 - Class 2](https://reader035.fdocuments.net/reader035/viewer/2022062711/55c3caf4bb61eb0d5d8b45fc/html5/thumbnails/43.jpg)
![Page 44: JavaScript 101 - Class 2](https://reader035.fdocuments.net/reader035/viewer/2022062711/55c3caf4bb61eb0d5d8b45fc/html5/thumbnails/44.jpg)
![Page 45: JavaScript 101 - Class 2](https://reader035.fdocuments.net/reader035/viewer/2022062711/55c3caf4bb61eb0d5d8b45fc/html5/thumbnails/45.jpg)
Exercise
Use the knowledge you have learned today to:!
create an Array of items and assign it to a variable!
“iterate” through each item and delete it from the array!
check the value of your variable you created for the Array. What does it return?
![Page 46: JavaScript 101 - Class 2](https://reader035.fdocuments.net/reader035/viewer/2022062711/55c3caf4bb61eb0d5d8b45fc/html5/thumbnails/46.jpg)
“while” loops
![Page 47: JavaScript 101 - Class 2](https://reader035.fdocuments.net/reader035/viewer/2022062711/55c3caf4bb61eb0d5d8b45fc/html5/thumbnails/47.jpg)
![Page 48: JavaScript 101 - Class 2](https://reader035.fdocuments.net/reader035/viewer/2022062711/55c3caf4bb61eb0d5d8b45fc/html5/thumbnails/48.jpg)
Remember this for loop?
![Page 49: JavaScript 101 - Class 2](https://reader035.fdocuments.net/reader035/viewer/2022062711/55c3caf4bb61eb0d5d8b45fc/html5/thumbnails/49.jpg)
![Page 50: JavaScript 101 - Class 2](https://reader035.fdocuments.net/reader035/viewer/2022062711/55c3caf4bb61eb0d5d8b45fc/html5/thumbnails/50.jpg)
Now, as a while loop…
![Page 51: JavaScript 101 - Class 2](https://reader035.fdocuments.net/reader035/viewer/2022062711/55c3caf4bb61eb0d5d8b45fc/html5/thumbnails/51.jpg)
![Page 52: JavaScript 101 - Class 2](https://reader035.fdocuments.net/reader035/viewer/2022062711/55c3caf4bb61eb0d5d8b45fc/html5/thumbnails/52.jpg)
“for” and “while” loops are two different ways of accomplishing
the exact same thing.
![Page 53: JavaScript 101 - Class 2](https://reader035.fdocuments.net/reader035/viewer/2022062711/55c3caf4bb61eb0d5d8b45fc/html5/thumbnails/53.jpg)
Exercise
Convert your “for” loop from the previous exercise to a “while” loop and make sure it has the exact same output as before.!
If you forgot…!
create an Array of items and assign it to a variable!
“iterate” through each item and delete it from the array!
check the value of your variable you created for the Array. What does it return?
![Page 54: JavaScript 101 - Class 2](https://reader035.fdocuments.net/reader035/viewer/2022062711/55c3caf4bb61eb0d5d8b45fc/html5/thumbnails/54.jpg)
1. Refresher 2. Array Basics 3. Loops 4. Control Flow
![Page 55: JavaScript 101 - Class 2](https://reader035.fdocuments.net/reader035/viewer/2022062711/55c3caf4bb61eb0d5d8b45fc/html5/thumbnails/55.jpg)
No slides allowed here. Learn to RTFG.
![Page 56: JavaScript 101 - Class 2](https://reader035.fdocuments.net/reader035/viewer/2022062711/55c3caf4bb61eb0d5d8b45fc/html5/thumbnails/56.jpg)
if!
else if!
else!
“switch” statement!
logical operators