Slide 1 of 55
Javascript - More Basics AGAIN
Leon Noel
Let's run that back
#100Devs
Slide 2 of 55Agenda
- Questions?
- Let's Talk - 2 Classes
- Learn - What is programming?
- Learn - JS Basics
- Review - Previous Class Work
- Learn - Pseudo Code
- Build - Temperature Converter
- Learn - Functions
- Build - Functions
- Homework - Read Please
Slide 3 of 55
Questions
About last class or life
Slide 4 of 55Checking In
Like and Retweet the Tweet
!checkin
Slide 5 of 55
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 6 of 55Friends?
Study Community Networking (Mar. 8th)
Slide 7 of 55Submitting Work
Slide 8 of 55Ads?
Slide 9 of 55
Coffee Chats
(Not Showing Up)?
Slide 10 of 55TWO CLASSES
Slide 11 of 55Hydrate With Me
Slide 12 of 55The Golden Rule
SEPERATION OF CONCERNS
- HTML = Content / Structure
- CSS = Style
- JS = Behavior / Interaction
Slide 13 of 55IDs & Classes
Slide 14 of 55IDs
#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 15 of 55Classes
.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 16 of 55Programming
Slide 17 of 55A computer will do what you tell it to do.
Slide 18 of 55What is a program?
A program is a set of instructions that you write to tell a computer what to do
Slide 19 of 55What is a programming?
Programming is the task of writing those instructions in a language that the computer can understand.
Slide 20 of 55True Story
Slide 21 of 55JAVASCRIPT
Slide 22 of 55Has a specific 'Syntax'
Syntax: "Spelling and grammar" rules of a programming language.
Slide 23 of 55Variables
What are variables?
Slide 24 of 55Variables
- 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 25 of 55Variables
Declaration: let age
Assignment: age = 25
Both at the same time:
let age = 25
Slide 26 of 55Variable Conventions
camelCase:
let numberOfApples = 9
Slide 27 of 55
Variables
& Data Types
What can you store in variables?
Slide 28 of 55Strings
- Stores text
- String is surrounded by quotes
"How is the weather today?"
'Warm'
Slide 29 of 55Strings
Double vs Single Quoted Strings:
'They "purchased" it'
"It's a beautiful day"
Slide 30 of 55Numbers
Represent Numerical Data
int: 29
float: 5.14876
Slide 31 of 55Numbers
Signed
int: +4
float: -10.375
Slide 32 of 55Arithmetic In Javascript
Slide 33 of 55
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 34 of 55
Comparisons:
Equality
Are two things equal?
9 === 9 //true
7 === 3 //false
"Hello" === "Hello" //true
Slide 35 of 55Logical Operators
Slide 36 of 55Conditional Syntax
if(condition is true) {
//Do cool stuff
}
Slide 37 of 55Conditional Syntax
if(condition is true) {
//Do this cool stuff
}else if(condition is true){
//Do this other cool stuff
}else{
//Default cool stuff
}
Slide 38 of 55Conditional 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 39 of 55🚨 DANGER 🚨
Assignment vs. Comparison
Slide 40 of 55Multiple Conditions
if (name === "Leon" && status === "Ballin"){
//Wink at camera
}
Slide 41 of 55Multiple Conditions
if (day === "Saturday" || day === "Sunday"){
//It is the weekend
}
Slide 42 of 55Let's Code
Class, Weekend, or Boring Day?
Slide 43 of 55Let's Code
Angry Parent Simulator
Slide 44 of 55Pseudo Code
Slide 45 of 55Let's Code
A Temperature Converter
Slide 46 of 55
In Chat:
What is the best TV show of all time?
Slide 47 of 55
Answer:
The Bachelor
Slide 48 of 55Let's Code
Bachelor Code
Slide 49 of 55Functions
What are functions?
Slide 50 of 55Functions
-
Functions are simple sets of instructions!
-
They form the basic "building blocks" of a program
Slide 51 of 55Functions
function name(parameters){
//body
}
//call
name(arguments)
Slide 52 of 55Functions
function yell(word){
alert(word)
}
yell("HELLO")
Slide 53 of 55Let's Code
Simple Functions
Slide 54 of 55Let's Code
Bring It Home!
Slide 55 of 55Homework
COMMENT OUT YOUR JS
TYPE IT ALL OUT AGAIN WITHOUT LOOKING
PEAK IF YOU HAVE TOO
REPEAT UNTIL YOU DO NOT HAVE TO PEAK
DELETE YOUR JS ENTIRELY
AND DO IT AGAIN
THEN DO IT AGAIN BUT CHANGE SOMETHING!
