Javascript - The Basics
Leon Noel
"She miss that throwback Kodak wave
Was just a lil' shooter, ain't have no future
But I can't go back to them days
Versatile three, wait 'til you hear eight
'Rari paper plates, told my dawg we gon' be straight"
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7626184/Learn_with_Leon_v2__bonus_.png)
#100Devs
Agenda
-
Questions?
-
Let's Talk - Baby Learns To Walk?
-
Learn - What is programming?
-
Build - Youtube Background Picker
-
Learn - JS Variables && Types
-
Build - Not so great calculator
-
Learn - JS Arithmetic && Conditionals
-
Build - Angry Parent Simulator
-
Build - Temperature Converter
-
Homework - Repetition
Questions
About last class or life
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7634660/how-dare.gif)
Checking In
![](https://media2.giphy.com/media/BmmfETghGOPrW/giphy.gif)
Like and Retweet the Tweet
!checkin
Submitting Work
![](https://media3.giphy.com/media/26uf7rl7j6RVibDz2/giphy.gif)
Baby Learns To Walk?
![](https://media0.giphy.com/media/TmVHwsPAveJiM/giphy.gif)
Half Hard Work and Half Believing You Can Do It
*thanks Vonds
The Golden Rule
SEPERATION OF CONCERNS
-
HTML = Content / Structure
-
CSS = Style
-
JS = Behavior / Interaction
IDs & Classes
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7647416/specific.gif)
IDs
#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>
Classes
.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>
Programming
![](https://media3.giphy.com/media/LmNwrBhejkK9EFP504/giphy.gif)
A computer will do what you tell it to do.
What is a program?
A program is a set of instructions that you write to tell a computer what to do
What is a programming?
Programming is the task of writing those instructions in a language that the computer can understand.
Simple Circut
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7684183/lightbulb.png)
True Story
![](https://media3.giphy.com/media/3ohc142474TUT6Tazm/giphy.gif)
JAVASCRIPT
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7684153/js.png)
Has a specific 'Syntax'
Syntax: "Spelling and grammar" rules of a programming language.
JS Syntax
-
Semicolon
-
Brackets
-
Parentheses
-
Quotation Marks
-
Other Unique characters?
Let's Code
A Youtube Background Picker
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7626184/Learn_with_Leon_v2__bonus_.png)
Variables
What are variables?
Variables
- 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
Variables
Declaration: let age
Assignment: age = 25
Both at the same time:
let age = 25
Variable Conventions
camelCase:
let numberOfApples = 9
Variables
& Data Types
What can you store in variables?
Strings
-
Stores text
-
String is surrounded by quotes
"How is the weather today?"
'Warm'
Strings
Double vs Single Quoted Strings:
'They "purchased" it'
"It's a beautiful day"
Strings
New Line + Tabs:
"1. Preheat over to 350\n2. Grease the pan"
'\tBeginning of paragraph'
🚨
Numbers
Represent Numerical Data
int: 29
float: 5.14876
Numbers
Signed
int: +4
float: -10.375
Arithmetic In Javascript
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7687178/arithmetic.png)
Let's Code
A not so great calculator
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7626184/Learn_with_Leon_v2__bonus_.png)
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")
}
Comparisons:
Equality
Are two things equal?
9 === 9 //true
7 === 3 //false
"Hello" === "Hello" //true
Logical Operators
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7687190/ops.png)
Conditional Syntax
if(condition is true) {
//Do cool stuff
}
Conditional Syntax
if(condition is true) {
//Do this cool stuff
}else if(condition is true){
//Do this other cool stuff
}else{
//Default cool stuff
}
Conditional 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?")
}
🚨 DANGER 🚨
Assignment vs. Comparison
Multiple Conditions
if (name === "Bruce" && parents === "Dead"){
//Turn off the bat signal
}
Multiple Conditions
if (day === "Saturday" || day === "Sunday"){
//It is the weekend
}
Let's Code
Class, Weekend, or Boring Day?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7626184/Learn_with_Leon_v2__bonus_.png)
Let's Code
Angry Parent Simulator
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7626184/Learn_with_Leon_v2__bonus_.png)
Pseudo Code
Let's Code
A Temperature Converter
![](https://s3.amazonaws.com/media-p.slid.es/uploads/549074/images/7626184/Learn_with_Leon_v2__bonus_.png)
Homework
Do: Plan out your networking!
Read: https://javascript.info/variables + Tasks
Read: https://javascript.info/function-basics + Tasks
Do: Delete the JS and do it again for all assignments
Do: Something special for yourself this weekend
![](https://media.giphy.com/media/3oEjI5pYnV0zNvKzXa/source.gif)
100Devs - Javascript Basics (cohort 2)
By Leon Noel
100Devs - Javascript Basics (cohort 2)
Class 12 of our Free Web Dev Bootcamp for folx affected by the pandemic. Join live T/Th 6:30pm ET leonnoel.com/twitch and ask questions here: leonnoel.com/discord
- 5,844