Slide 1 of 78
Javascript - Objects Fun
Leon Noel
#100Devs
I like my love with a budget, I like my hugs with a scent
You smell like light, gas, water, electricity, rent
Slide 2 of 78Agenda
- Questions?
- Let's Talk - #100Devs
- Review - Functions && Loops
- Review - Arrays
- Learn - Objects
- Learn - Basic APIs
- Homework - Object City Yall
Slide 3 of 78
Questions
About last class or life
Slide 4 of 78Checking In
Like and Retweet the Tweet
!checkin
Slide 5 of 78You Are Not Alone!
Slide 6 of 78Trough Of Sorrow
Slide 7 of 78Health First
Slide 8 of 78No Networking Until May
Slide 9 of 78Client Deadline: May 3rd
Slide 10 of 78Client Alternatives
Slide 11 of 78Grassroots Volunteer*
Slide 13 of 78Live Portfolio & Resume Review
Monday
6:30pm EST
Slide 14 of 78!youtube
Slide 15 of 78!newsletter
Slide 16 of 78
Tomorrow @ 6:30pm ET!
Slide 17 of 78
Microsoft
Sponsored Stream
Thursday Mar. 31st
Thursday 6:30pm ET
Slide 19 of 78Friday With Friends
Friday 6pm ET on Discord!
Slide 20 of 78/r/place
Saturday All Day
Slide 21 of 78
Slide 22 of 78Office Hours
Sunday - 1pm ET
Slide 23 of 78
Mentor Monday
Portfolio / Resume Review Part 1
Slide 24 of 78BEST WEEK EVER END?
Tuesday 6:30pm ET
Slide 25 of 78!Merch
Slide 26 of 78THANK YOU
Slide 27 of 78Programming
Slide 28 of 78What is a program?
A program is a set of instructions that you write to tell a computer what to do
Slide 29 of 78What is a programming?
Programming is the task of writing those instructions in a language that the computer can understand.
Slide 30 of 78JAVASCRIPT
Slide 31 of 78Variables
Declaration: let age
Assignment: age = 25
Both at the same time:
let age = 25
Slide 32 of 78Conditional Syntax
if(condition is true) {
//Do this cool stuff
}else if(condition is true){
//Do this other cool stuff
}else{
//Default cool stuff
}
Slide 33 of 78Multiple Conditions
if (name === "Leon" && status === "Ballin"){
//Wink at camera
}
Slide 34 of 78Multiple Conditions
if (day === "Saturday" || day === "Sunday"){
//It is the weekend
}
Slide 35 of 78Functions
What are functions?
Slide 36 of 78Functions
-
Functions are simple sets of instructions!
-
Functions are reusable
-
Functions perform one action as a best practice
-
They form the basic "building blocks" of a program
Slide 37 of 78Functions
function name(parameters){
//body
}
//call
name(arguments)
Slide 38 of 78Functions
function yell(word){
alert(word)
}
yell("HELLO")
Slide 39 of 78Loops
What are loops?
Slide 40 of 78Loops
-
Repeat an action some number of times!
-
Three main types of loops in Javascript
- For, while, and do while loops
-
Each type offers a different way to determine the start and end points of a loop
Slide 41 of 78Loops - For
for (let i = 1; i < 5; i++) {
console.log(i)
}
Slide 42 of 78Let's Code
Turbo Review
Slide 43 of 78Arrays
What are arrays?
Slide 44 of 78Toasters
Slide 45 of 78Arrays
-
A data structure to store ordered collections!
-
Array elements are numbered starting with zero
-
Arrays have many methods to manage the order of elements
-
Can be created by a constructor or literal notation
Slide 46 of 78Declaring Arrays
let newArr = new Array()
Array Constructor
Slide 47 of 78Declaring Arrays
let newArr = []
Literal Notation
Slide 48 of 78Declaring Arrays
newArr = ['Zebra',true,21]
Arrays are populated with elements
Elements can be of any type
Slide 49 of 78Array Indexing
Slide 50 of 78Array Indexing
newArr = ['Zebra',,true,21]
console.log( newArr[0] ) //Zebra
console.log( newArr[1] ) //undefined
console.log( newArr[2] ) //true
console.log( newArr[3] ) //21
Elements can be accessed by their index numbers
Slide 51 of 78Array Indexing
newArr = ['Zebra',,true,21]
newArr[1] = 'Bob'
console.log( newArr )
// ['Zebra','Bob',true,21]
Elements can be updated by using the index at that position
Slide 52 of 78Array Length
console.log( newArr.length ) //4
How do you determine how many elements are in your array?
Slide 53 of 78Array Iteration
let bestColors = ['green','blue','yellow','black']
for(let i = 0; i < bestColors.length;i++){
console.log( bestColors[i] )
}
Iterates through an array passing in the value and index of each element
Slide 54 of 78Array Iteration
let bestColors = ['green','blue','yellow','black']
bestColors.forEach((x,i)=> console.log(x))
Iterates through an array passing in the value and index of each element
Slide 55 of 78Let's Code
Space Review
Slide 56 of 78Objects
What are objects?
Slide 57 of 78Objects
-
Objects are a collection of variables and functions!
- Objects represent the attributes and behavior of something used in a program
- Object variables are called properties and object functions are called methods
- Objects store "keyed" collections
Slide 58 of 78Think of a physical object
What are it's attributes and behaviors?
Slide 59 of 78How about a stopwatch
What are its attributes and behaviors?
Slide 60 of 78Stopwatch Object
- Properties (attributes):
Might contain a variable to represent hours, another to represent minutes, and another to represent seconds.
- Methods (behaviors):
Might also contain functions that manipulate those values, such as "start ()" and "stop ()".
Slide 61 of 78Stopwatch Object
let stopwatch = {}
stopwatch.currentTime = 12
stopwatch.tellTime = function(time){
console.log(`The current time is ${time}.`)
}
stopwatch.tellTime(stopwatch.currentTime)
Slide 62 of 78Let's Code
Objects - Lost Galaxy
Slide 63 of 78Objects
What if we want to make
a lot of objects?
How much money you got? How many problems you got? How many people done doubted you? Left you out to rot?
Slide 64 of 78Car Factory?
Constructors then Classes
Slide 65 of 78
Car Factory
Constructor
function MakeCar(carMake,carModel,carColor,numOfDoors){
this.make = carMake
this.model = carModel
this.color = carColor
this.doors = numOfDoors
this.honk = function(){
alert('BEEP BEEP FUCKER')
}
this.lock = function(){
alert(`Locked ${this.doors} doors!`)
}
}
let hondaCivic = new MakeCar('Honda','Civic','Silver', 4)
let teslaRoadster = new MakeCar('Tesla','Roadster', 'Red', 2)
Slide 66 of 78
Car Factory
We forgot enable bluetooth!
let teslaRoadster = new MakeCar('Tesla','Roadster', 'Red', 2)
console.log( teslaRoadster.bluetooth ) //undefined
MakeCar.prototype.bluetooth = true
console.log( teslaRoadster.bluetooth ) //true
A prototype is another object that is used as a fallback source of properties
Slide 67 of 78
Car Factory
Why does .toString() work?!?
let teslaRoadster = new MakeCar('Tesla','Roadster', 'Red', 2)
console.log( teslaRoadster.doors.toString() ) // "2" not 2
A prototype is another object that is used as a fallback source of properties
Slide 68 of 78Let's Code
Objects - Tony Hawk Pro Skater
Slide 69 of 78
Car Factory
Look Ma! New syntax!
class MakeCar{
constructor(carMake,carModel,carColor,numOfDoors){
this.make = carMake
this.model = carModel
this.color = carColor
this.doors = numOfDoors
}
honk(){
alert('BEEP BEEP FUCKER')
}
lock(){
alert(`Locked ${this.doors} doors!`)
}
}
let hondaCivic = new MakeCar('Honda','Civic','Silver', 4)
let teslaRoadster = new MakeCar('Tesla','Roadster', 'Red', 2)
Classes are like templates for objects!
Slide 70 of 78APIs
What are APIs?
Slide 71 of 78APIs
-
A simple interface for some complex action!
-
Think of a restaurant menu! Remember those...
-
Lets one thing communicate with another thing without having to know how things are implemented.
Slide 72 of 78APIs
Slide 73 of 78
APIs
Fetch Fido, Fetch!
fetch("https://dog.ceo/api/breeds/image/random")
.then(res => res.json()) // parse response as JSON
.then(data => {
console.log(data)
})
.catch(err => {
console.log(`error ${err}`)
});
API returns a JSON object that we can use within our apps
Slide 74 of 78Let's Code
DOG PHOTOS!
Slide 75 of 78
APIs
Stop trying to make Fetch happen!
fetch(url)
.then(res => res.json()) // parse response as JSON
.then(data => {
console.log(data)
})
.catch(err => {
console.log(`error ${err}`)
});
Some APIs need Query Parameters to return the correct data
const url = 'https://www.thecocktaildb.com/api/json/v1/1/search.php?s=margarita'
Slide 76 of 78Let's Code
EVERYBODY! SHOTS! SHOTS! SHOTS!
Slide 77 of 78Let's Code
NASA PHOTOS
Slide 78 of 78Homework
