Slide 1 of 67
Javascript - Back From Break
Leon Noel
#100Devs
I be getting money 'til I fall out
You talking cash, dog, I goes all out
Slide 2 of 67Agenda
- Questions?
- Let's Talk - Coming Up?
- Let's Talk - #100Devs
- Review - The BIG FOUR
- Review - Arrays
- Review - Objects
- Review - Basic APIs
- Homework - OOP
Slide 3 of 67
Questions
About last class or life
Slide 4 of 67This Week
Review
OOP
Slide 5 of 67Next Week
OOP Practice
Async / Await
Slide 6 of 67THEN BACKEND
Slide 7 of 67Checking In
Like and Retweet the Tweet
!checkin
Slide 8 of 67
Catching up on Discord
Slide 9 of 67Gonna Get Funky
Slide 10 of 67No Networking Until May
Slide 11 of 67Client Deadline: May 5th
Slide 12 of 67Client Alternatives
Slide 13 of 67Grassroots Volunteer*
Slide 15 of 67!youtube
Slide 16 of 67!newsletter
Slide 17 of 67Discord Update
Private LGBTQ+ channel
Slide 18 of 67Live Crafting Your Story
FRIDAY
6:30pm EST
Slide 19 of 67OFFICE HOURS
SUNDAY
1:00pm EST
Slide 20 of 67Enough for a job?
Yes
Slide 21 of 67HUGE ANNOUNCEMENT NEXT WEEK
Slide 22 of 67Programming
Slide 23 of 67What is a program?
A program is a set of instructions that you write to tell a computer what to do
Slide 24 of 67What is a programming?
Programming is the task of writing those instructions in a language that the computer can understand.
Slide 25 of 67JAVASCRIPT
Slide 26 of 67Variables
Declaration: let age
Assignment: age = 25
Both at the same time:
let age = 25
Slide 27 of 67Conditional Syntax
if(condition is true) {
//Do this cool stuff
}else if(condition is true){
//Do this other cool stuff
}else{
//Default cool stuff
}
Slide 28 of 67Multiple Conditions
if (name === "Leon" && status === "Ballin"){
//Wink at camera
}
Slide 29 of 67Multiple Conditions
if (day === "Saturday" || day === "Sunday"){
//It is the weekend
}
Slide 30 of 67Functions
What are functions?
Slide 31 of 67Functions
-
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 32 of 67Functions
function name(parameters){
//body
}
//call
name(arguments)
Slide 33 of 67Functions
function yell(word){
alert(word)
}
yell("HELLO")
Slide 34 of 67Loops
What are loops?
Slide 35 of 67Loops
-
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 36 of 67Loops - For
for (let i = 1; i < 5; i++) {
console.log(i)
}
Slide 37 of 67Let's Code
Boulder Badge
Slide 38 of 67Arrays
What are arrays?
Slide 39 of 67Toasters
Slide 40 of 67Arrays
-
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 41 of 67Declaring Arrays
let newArr = []
Literal Notation
Slide 42 of 67Declaring Arrays
newArr = ['Zebra',true,21]
Arrays are populated with elements
Elements can be of any type
Slide 43 of 67Array Indexing
Slide 44 of 67Array 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 45 of 67Array 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 46 of 67Array Length
console.log( newArr.length ) //4
How do you determine how many elements are in your array?
Slide 47 of 67Array 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 48 of 67Let's Code
Cascade Badge
Slide 49 of 67Objects
What are objects?
Slide 50 of 67Objects
-
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 51 of 67Think of a physical object
What are it's attributes and behaviors?
Slide 52 of 67How about a stopwatch
What are its attributes (properties) and behaviors (methods)?
Slide 53 of 67Stopwatch Object
let stopwatch = {}
stopwatch.currentTime = 12
stopwatch.tellTime = function(time){
console.log(`The current time is ${time}.`)
}
stopwatch.tellTime(stopwatch.currentTime)
Slide 54 of 67Objects
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 55 of 67Car Factory?
Constructors then Classes
Slide 56 of 67
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 57 of 67
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 58 of 67
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 59 of 67
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 60 of 67Let's Code
Thunder Badge
Slide 61 of 67APIs
What are APIs?
Slide 62 of 67APIs
-
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 63 of 67APIs
Slide 64 of 67
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 65 of 67
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 66 of 67Let's Code
Rainbow Badge
Slide 67 of 67Homework
