If/Else

Types we know

// Number
const count = 5; 

// string
let dayOfWeek = "Tuesday";

// function
const updateButtonEvent = () => {
    console.log("button clicked")
}

oh look, a detour!

function fun fact!

Functions can be used not only hold logic, but also can be use to calculate and return a new value

Title Text

const rollDice = () => {
    const randomNumber = Math.ceil(Math.random() * 6)
    document
        .querySelector(".result")
        .textContent = randomNumber
}
    


document
    .querySelector(".d6")
    .addEventListener("click", rollDice)

Title Text

const getRandomNumber = () => {
    return Math.ceil(Math.random() * 6)
}

const rollDice = () => {
    const randomNumber = getRandomNumber()
    document
        .querySelector(".result")
        .textContent = randomNumber
}
    


document
    .querySelector(".d6")
    .addEventListener("click", rollDice)

done with the detour

boolean

const needCoffee = true;

const hungry = false;

Now that we tools to store a yes or no value, we have our programs make decisions

"if" statements allow our programs to make basic decisions based on a yes or no value 

if statements

const needCoffee = true 
if (needCoffee) {
   refillCoffee()
} else {
   getWorkDone()
}
relax()

Boolean expression

Comparing


const numberOfRedCrayons  = 10;

const numberOfBlueCrayons = 7;


numberOfRedCrayons > numberOfBlueCrayons // true

numberOfRedCrayons >= numberOfBlueCrayons // true

numberOfRedCrayons < numberOfBlueCrayons // false

numberOfRedCrayons <= numberOfBlueCrayons // false

Equality

const scoreString = "10"

const currentScore = 10

const target = 15


currentScore == target // false

currentScore === target // false

currentScore == scoreString // true

currentScore === scoreString //false

Simple if

const animal = getMySpiritAnimal()
let habitat = "the city"

if (animal === "ox"){
   habitat = "the farm"
}

else

const animal = getMySpiritAnimal()
let habitat = "the city"

if (animal === "ox"){
   habitat = "the farm"
} else {
   habitat = "woods"
}

else if

const animal = getMySpiritAnimal()
let habitat = "the city"

if (animal === "ox"){
   habitat = "the farm"
} else if (animal === "moose"){
   habitat = "tundra"
} else {
   habitat = "woods"
}

They stack!

const animal = getMySpiritAnimal()
let habitat = "the city"

if (animal === "ox"){
   habitat = "the farm"
} else if (animal === "moose"){
   habitat = "tundra"
} else if (animal === "otter"){
   habitat = "river"
} else if (animal === "sea tutle"){
   habitat = "sea"
} else {
   habitat = "woods"
}

boolean logic

const niceOutside = sunny && notTooHot;

const shouldIwatchAMovie = GoodMovie || Raining;

const isNight= !isDay;

don't be scared, might get a bit math-y

Truth tables

A B Result
T T T
T F F
F T F
F F F

A && B

Truth tables

A B Result
T T T
T F T
F T T
F F F

A || B

Sample if

const ringsToDestroy = getNumberOfRingsToDestroy()

const ringBearer = getCurrentRingBearer()

if (ringsToDestroy > 0 && ringBearer === "Frodo"){
    keepWalking()
} else if (ringsToDestroy === 0){
    relaxInTheShire()
} else if (ringBearer !== "Frodo") {
    findTheRing()
}

How are we feeling?

Truthy/Falsy

truthy: 

- non-zero number
- any string
- anything that is not falsy

falsy:

- false
- 0
- undefined
- null
- NaN
- ''
- ""

Bonus: DOM & Classes

// add class/style
const element = document.querySelector("#mySection");
element.classList.add("red-text"); 

// remove 
element.classList.remove("blue-text");

Number Guesser!

If/Else

By Mark Dewey

Made with Slides.com

If/Else

  • 326

More from Mark Dewey