#100Devs Javascript More Basics (cohort 2)

Class 13 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 51

 

Javascript - More Basics

Leon Noel

"If I get caught up in the storm, my brain gon storm the most"

#100Devs

Slide 2 of 51

Agenda

Slide 3 of 51

Questions

About last class or life

Slide 4 of 51

Checking In

Like and Retweet the Tweet

!checkin

Slide 5 of 51
Slide 6 of 51

Submitting Work

 Share What JS You Added in codepen.io

Submit URLs here: https://forms.gle/G7LhHnyTA7zYq7UV6

Networking

2 Individuals Already In Tech

Push? 1 Coffee Chat

Slide 7 of 51

Imposter Syndrome

Slide 8 of 51

The Golden Rule

SEPERATION OF CONCERNS

Slide 9 of 51

IDs & Classes

Slide 10 of 51

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 11 of 51

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 12 of 51

Programming

Slide 13 of 51

A computer will do what you tell it to do.

Slide 14 of 51

What is a program?

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

Slide 15 of 51

What is a programming?

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

Slide 16 of 51

True Story

Slide 17 of 51

JAVASCRIPT

Slide 18 of 51

Has a specific 'Syntax'

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

Slide 19 of 51

Variables

What are variables?

Slide 20 of 51

Variables

Slide 21 of 51

Variables

Declaration: let age

 

Assignment: age = 25

 

Both at the same time:

let age = 25

Slide 22 of 51

Variable Conventions

camelCase:

let numberOfApples = 9

 

 

Slide 23 of 51

Variables

& Data Types

What can you store in variables?

Slide 24 of 51

Strings

"How is the weather today?"

'Warm'

Slide 25 of 51

Strings

Double vs Single Quoted Strings:

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

Slide 26 of 51

Numbers

Represent Numerical Data

int: 29

float: 5.14876

Slide 27 of 51

Numbers

Signed

int: +4

float: -10.375

Slide 28 of 51

Arithmetic In Javascript

Slide 29 of 51

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 30 of 51

Comparisons:

Equality

 

Are two things equal?

9 === 9 //true
7 === 3 //false
"Hello" === "Hello" //true
Slide 31 of 51

Logical Operators

Slide 32 of 51

Conditional Syntax

if(condition is true) {
  //Do cool stuff
}
Slide 33 of 51

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 34 of 51

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 35 of 51

🚨 DANGER 🚨

Assignment vs. Comparison

Slide 36 of 51

Multiple Conditions

if (name === "Leon" && status === "Ballin"){
 //Wink at camera
}
Slide 37 of 51

Multiple Conditions

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

Let's Code

Class, Weekend, or Boring Day?

Slide 39 of 51

Let's Code

Angry Parent Simulator

Slide 40 of 51

Pseudo Code

Slide 41 of 51

Let's Code

A Temperature Converter

Slide 42 of 51

In Chat:

What is the best TV show of all time?

Slide 43 of 51

Answer:

The Bachelor

Slide 44 of 51

Let's Code

Bachelor Code

Slide 45 of 51

Functions

What are functions?

Slide 46 of 51

Functions

Slide 47 of 51

Functions

function name(parameters){
  //body
}

//call
name(arguments)
Slide 48 of 51

Functions

function yell(word){
  alert(word)
}


yell("HELLO")
Slide 49 of 51

Let's Code

Simple Functions

Slide 50 of 51

Let's Code

Bring It Home!

Slide 51 of 51

Homework

Read: https://javascript.info/function-expressions + Tasks 

Read: https://javascript.info/arrow-functions-basics + Tasks

Read:https://github.com/thejsway/thejsway/blob/master/manuscript/chapter04.md

Do: Delete the JS and do it again for all assignments