Slide 1 of 51
Javascript - Another API Review
Leon Noel
#100Devs
And that's why you remind me
That I can never be lost in the sauce, I'm a boss
And everything was a lesson, from that loss, I gained it all
Slide 2 of 51Agenda
- Questions?
- Let's Talk - #100Devs
- Review - Functions && Loops
- Review - Arrays
- Review - Objects
- Review - APIs
- Review - Local Storage
- Homework - JS Review / Push
Slide 3 of 51
Questions
About last class or life
Slide 4 of 51Checking In
Like and Retweet the Tweet
!checkin
Slide 5 of 51No Networking Until May
Slide 6 of 51Client Deadline: May 3rd
Slide 7 of 51Client Alternatives
Slide 8 of 51Grassroots Volunteer*
Slide 10 of 51Codewars !Clan
Clan: #100Devs - leonnoel.com/twitch
Slide 11 of 51Submitting Work
Slide 12 of 51"Break"
No "Class" Next Week
Slide 13 of 51
Slide 14 of 51Work Together Nights
Tuesday / Thursday
Slide 15 of 51Homework
Slide 16 of 51GIT BOWL
Sunday April 24th
Slide 17 of 51Programming
Slide 18 of 51What is a program?
A program is a set of instructions that you write to tell a computer what to do
Slide 19 of 51What is a programming?
Programming is the task of writing those instructions in a language that the computer can understand.
Slide 20 of 51JAVASCRIPT
Slide 21 of 51Loops
What are loops?
Slide 22 of 51Loops
-
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 23 of 51Loops - For
for (let i = 1; i < 5; i++) {
console.log(i)
}
Slide 24 of 51Arrays
What are arrays?
Slide 25 of 51Toasters
Slide 26 of 51Arrays
-
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 27 of 51Declaring Arrays
let newArr = []
Literal Notation
Slide 28 of 51Declaring Arrays
newArr = ['Zebra',true,21]
Arrays are populated with elements
Elements can be of any type
Slide 29 of 51Array Indexing
Slide 30 of 51Array 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 31 of 51Array 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 32 of 51Array Length
console.log( newArr.length ) //4
How do you determine how many elements are in your array?
Slide 33 of 51Array 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 34 of 51Objects
What are objects?
Slide 35 of 51Objects
-
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 36 of 51Think of a physical object
What are it's attributes and behaviors?
Slide 37 of 51Stopwatch Object
let stopwatch = {}
stopwatch.currentTime = 12
stopwatch.tellTime = function(time){
console.log(`The current time is ${time}.`)
}
stopwatch.tellTime(stopwatch.currentTime)
Slide 38 of 51APIs
What are APIs?
Slide 39 of 51APIs
-
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 40 of 51APIs
Slide 41 of 51
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 42 of 51
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 43 of 51Let's Code
Slide 44 of 51Local Storage
Slide 45 of 51Local Storage
Allows you to store data across browser sessions
Slide 46 of 51Put Item Into Local Storage
localStorage.setItem('bestFriend', 'Bob')
Slide 47 of 51Get Item Out Of Local Storage
localStorage.getItem('bestFriend', 'Bob')
Slide 48 of 51Remove Item In Local Storage
localStorage.removeItem('bestFriend', 'Bob')
Slide 49 of 51Remove All In Local Storage
localStorage.clear()
Slide 50 of 51Let's Code
Slide 51 of 51Homework
