Slide 1 of 68
Javascript - Review & Loops
Leon Noel
"I ain't know nothin' 'bout no Visa, I was in the park with the gang"
#100Devs
Slide 2 of 68Agenda
- Questions?
- Let's Talk - Next Week
- Review - Pseudo Code
- Review - Variables
- Review - Conditionals
- Review - Functions
- Learn - Loops
- Homework - Work During Break
Slide 3 of 68
Questions
About last class or life
Slide 4 of 68Checking In
Like and Retweet the Tweet
!checkin
Slide 5 of 68Submitting Work
Slide 6 of 68
Thinking by Walter D Wintle
Slide 7 of 68Javascript Should NOT Make Sense YET
Slide 8 of 68You Should Still Struggle With CSS
Slide 9 of 68You Should Still Stumble Choosing HTML Tags
Slide 10 of 68
THIS IS ALL NORMAL
YOU CAN AND WILL DO THIS
Slide 11 of 68But What About Freelancing?
Slide 12 of 68
I'm NOT GOING TO
TEXT YOU, CALL YOU, EMAIL YOU OUTSIDE OF THE NEWSLETTER, DM YOU ON TWITTER OR DISCORD, Or EVER ASK YOU FOR MONEY!
Slide 13 of 68There Are No Other 100Devs Classes or Teachers
(yet)
Slide 15 of 68Please Be Kind
Slide 16 of 68Want to be fancy?
Best Clip Get's Special Color On Discord!
Slide 17 of 68The Winner Is:
Slide 18 of 68What's Next?
Slide 19 of 68The Golden Rule
SEPERATION OF CONCERNS
- HTML = Content / Structure
- CSS = Style
- JS = Behavior / Interaction
Slide 20 of 68IDs & Classes
Slide 21 of 68IDs
#zebra {
color: red;
}
IDs are used for selecting distinct elements
Only one id with the same value per document
#idName
<section>
<p>Hello, Twitch!</p>
<p id="zebra">Hello, Youtube!</p>
</section>
Slide 22 of 68Classes
.bob {
color: red;
}
Classes are for selecting multiple elements
Multiple with same value allowed per document
.className
<section>
<p class="robot">Hello, Twitch!</p>
<p id="zebra" class="bob">Hello, Youtube!</p>
<p class="bob">Goodbye, Mixer!</p>
</section>
Slide 23 of 68Programming
Slide 24 of 68A computer will do what you tell it to do.
Slide 25 of 68What is a program?
A program is a set of instructions that you write to tell a computer what to do
Slide 26 of 68What is a programming?
Programming is the task of writing those instructions in a language that the computer can understand.
Slide 27 of 68True Story
Slide 28 of 68JAVASCRIPT
Slide 29 of 68Has a specific 'Syntax'
Syntax: "Spelling and grammar" rules of a programming language.
Slide 30 of 68Variables
What are variables?
Slide 31 of 68Variables
- We can tell our program to remember values for us to use later on
- The entity we use to store the value is called a variable
Slide 32 of 68Variables
Declaration: let age
Assignment: age = 25
Both at the same time:
let age = 25
Slide 33 of 68Variable Conventions
camelCase:
let numberOfApples = 9
Slide 34 of 68
Variables
& Data Types
What can you store in variables?
Slide 35 of 68Strings
- Stores text
- String is surrounded by quotes
"How is the weather today?"
'Warm'
Slide 36 of 68Strings
Double vs Single Quoted Strings:
'They "purchased" it'
"It's a beautiful day"
Slide 37 of 68Numbers
Represent Numerical Data
int: 29
float: 5.14876
Slide 38 of 68Numbers
Signed
int: +4
float: -10.375
Slide 39 of 68Arithmetic In Javascript
Slide 40 of 68Let's Code
Variable Fun Time
Slide 41 of 68
Making Decisions
It's either TRUE or FALSE
If you are greater than 18 you are an adult
if (age > 18){
console.log("You are an adult")
}
Slide 42 of 68
Comparisons:
Equality
Are two things equal?
9 === 9 //true
7 === 3 //false
"Hello" === "Hello" //true
Slide 43 of 68Logical Operators
Slide 44 of 68Conditional Syntax
if(condition is true) {
//Do cool stuff
}
Slide 45 of 68Conditional Syntax
if(condition is true) {
//Do this cool stuff
}else if(condition is true){
//Do this other cool stuff
}else{
//Default cool stuff
}
Slide 46 of 68Conditional Syntax
const pizza = "Dominos"
if (pizza === "Papa Johns") {
console.log("Scram!")
} else if(pizza === "Dominos") {
console.log("All aboard the train to flavor town")
} else {
console.log("What are you even doing with your life?")
}
Slide 47 of 68🚨 DANGER 🚨
Assignment vs. Comparison
Slide 48 of 68Multiple Conditions
if (name === "Leon" && status === "Ballin"){
//Wink at camera
}
Slide 49 of 68Multiple Conditions
if (day === "Saturday" || day === "Sunday"){
//It is the weekend
}
Slide 50 of 68Let's Code
Age Checker
Slide 51 of 68
In Chat:
What is the best TV show of all time?
Slide 52 of 68
Answer:
The Bachelor
Slide 53 of 68Functions
What are functions?
Slide 54 of 68Functions
-
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 55 of 68Functions
function name(parameters){
//body
}
//call
name(arguments)
Slide 56 of 68Functions
function yell(word){
alert(word)
}
yell("HELLO")
Slide 57 of 68Functions
function yell(word, otherWord){
alert(word)
alert(otherWord)
}
yell("HELLO","GOODBYE")
Slide 58 of 68Let's Code
Simple Functions
Slide 59 of 68Loops
What are loops?
Slide 60 of 68Loops
-
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 61 of 68Loops - For
for ([initialExpression]; [conditionExpression]; [incrementExpression]){
//do stuff
}
Slide 62 of 68Loops - For
for (let i = 1; i < 5; i++) {
console.log(i)
}
Slide 63 of 68Let's Code
21 Savage Loop
Slide 64 of 68Loops - While
let count = 0
while(count < 5){
console.log(count)
count++
}
Slide 65 of 68Let's Code
Stop Night Snacking
Slide 66 of 68Let's Code
Bring It On!
Slide 67 of 68Let's Code
Bring It On Again!
Slide 68 of 68Homework
Text
On Discord, you have more than a week!
Office Hours - Sunday 1pm ET
