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

Skip to first slide
Slide 1 of 46

 

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"

#100Devs

Slide 2 of 46

Agenda

Slide 3 of 46

Questions

About last class or life

Slide 4 of 46

Checking In

Like and Retweet the Tweet

!checkin

Slide 5 of 46

Submitting Work

 Layouts Homework in codepen.io

Submit URLs here: https://forms.gle/7r1obfquRuih9BEu7

 

Slide 6 of 46

Baby Learns To Walk?

Half Hard Work and Half Believing You Can Do It

*thanks Vonds

Slide 7 of 46

The Golden Rule

SEPERATION OF CONCERNS

Slide 8 of 46

IDs & Classes

Slide 9 of 46

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>
Slide 10 of 46

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>
Slide 11 of 46

Programming

Slide 12 of 46

A computer will do what you tell it to do.

Slide 13 of 46

What is a program?

A program is a set of instructions that you write to tell a computer what to do

Slide 14 of 46

What is a programming?

Programming is the task of writing those instructions in a language that the computer can understand.

Slide 15 of 46

Simple Circut

Slide 16 of 46

True Story

Slide 17 of 46

JAVASCRIPT

Slide 18 of 46

Has a specific 'Syntax'

Syntax: "Spelling and grammar" rules of a programming language.

Slide 19 of 46

JS Syntax 

Slide 20 of 46

Let's Code

A Youtube Background Picker

Slide 21 of 46

Variables

What are variables?

Slide 22 of 46

Variables

Slide 23 of 46

Variables

Declaration: let age

 

Assignment: age = 25

 

Both at the same time:

let age = 25

Slide 24 of 46

Variable Conventions

camelCase:

let numberOfApples = 9

 

 

Slide 25 of 46

Variables

& Data Types

What can you store in variables?

Slide 26 of 46

Strings

"How is the weather today?"

'Warm'

Slide 27 of 46

Strings

Double vs Single Quoted Strings:

'They "purchased" it'
"It's a beautiful day"

Slide 28 of 46

Strings

New Line + Tabs:

"1. Preheat over to 350\n2. Grease the pan"

'\tBeginning of paragraph'

 

🚨

Slide 29 of 46

Numbers

Represent Numerical Data

int: 29

float: 5.14876

Slide 30 of 46

Numbers

Signed

int: +4

float: -10.375

Slide 31 of 46

Arithmetic In Javascript

Slide 32 of 46

Let's Code

A not so great calculator

Slide 33 of 46

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 46

Comparisons:

Equality

 

Are two things equal?

9 === 9 //true
7 === 3 //false
"Hello" === "Hello" //true
Slide 35 of 46

Logical Operators

Slide 36 of 46

Conditional Syntax

if(condition is true) {
  //Do cool stuff
}
Slide 37 of 46

Conditional 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 46

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?")
}
Slide 39 of 46

🚨 DANGER 🚨

Assignment vs. Comparison

Slide 40 of 46

Multiple Conditions

if (name === "Bruce" && parents === "Dead"){
 //Turn off the bat signal
}
Slide 41 of 46

Multiple Conditions

if (day === "Saturday" || day === "Sunday"){
  //It is the weekend
}
Slide 42 of 46

Let's Code

Class, Weekend, or Boring Day?

Slide 43 of 46

Let's Code

Angry Parent Simulator

Slide 44 of 46

Pseudo Code

Slide 45 of 46

Let's Code

A Temperature Converter

Slide 46 of 46

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