Week 4: JavaScript truthy and falsy values, equality operators, boolean logic and logical operators

1 / 32
next
Slide 1: Slide
JavaScriptMBOStudiejaar 2

This lesson contains 32 slides, with interactive quizzes and text slides.

time-iconLesson duration is: 60 min

Items in this lesson

Slide 1 - Slide

Terugblik
Concatenation.
Template literals met backticks.
Decisions.
Code challenge.

Extra huiswerkopdrachten onderaan de presentatie

Slide 2 - Slide

Doel van deze les
  • Aan het einde van de les heb jij variables gebruikt die een waarde hebben van 0 of 1. Jij gebruikt deze ‘truthy’ en ‘falsy’ values om beslissing te maken.
  • Aan het einde van de les heb jij equality- en logic operators in een beslissing gebruikt om waarden te veranderen.

Slide 3 - Slide

Truthy & Falsy values
Maak de volgende variabelen aan:

console.log(Boolean(0));
console.log(Boolean(undefined));
console.log(Boolean('Taif'));
console.log(Boolean({}));
console.log(Boolean(''));
Klik mij!
Console.log is lang typen. Probeer eens log te typen 😉

Slide 4 - Slide

Truthy & Falsy values
const money = 0;
if (money) {
    console.log(`Don't spend it all ;-)`);
} else {
    console.log(`You should get a job!`);
}

Slide 5 - Slide

Truthy & Falsy values
let height;
if (height) {
    console.log(`YAY! Height is defined`);
} else {
    console.log(`Height is UNDEFINED`);
}

Slide 6 - Slide

Equality operators
const age = 18;
if (age === 18) console.log(`You just became an adult`);


Strict equality operator. Deze operator voert geen type coericion uit en werkt alleen als beide exact dezelfde zijn.

Slide 7 - Slide

`18` == 18;
Wat is hier het resultaat van?
A
True
B
False
C
Weet ik niet
D
Mag ik u trakteren op een pizza vanmiddag?

Slide 8 - Quiz

Equality operators
const age = `18`;
if (age == 18) console.log(`You just became an adult (loose)`);

Vermijd zoveel mogelijk de loose equality operators omdat het veel moeilijk te vinden bugs introduceert!
Loose equality operator. Deze operator voert type coericion uit en werkt alleen als beide dezelfde zijn.

Slide 9 - Slide

Prompt
const favourite = prompt(`What's your favourite number?`); 
console.log(favourite);
console.log(typeof favourite);

Slide 10 - Slide

if (favourite == 23) {
console.log(`Cool! 23 is an amazing number!`);
}
Wat gebeurt hier in de vergelijking?
A
Dit is een loose operator
B
Dit is een strict operator
C
favourite is een string en 23 niet
D
Dit gaat niet uitgevoerd kunnen worden

Slide 11 - Quiz

Type converter
Wij moeten een Number type conversion uitvoeren op favourite!

const favourite = Number(prompt(`What's your favourite number?`));

In het rood staat wat ik heb toegevoegd.

Slide 12 - Slide

Else if
if (favourite === 23) { 
    console.log(`Cool! 23 is an amazing number!`);
} else if (favourite === 7) {
    console.log(`7 is also a cool number`);
} else {
    console.log(`Number is not 23 or 7`);
}

Slide 13 - Slide

Different operator
if (favourite !== 23) { 
    console.log(`Why not 23?`);
}

Slide 14 - Slide

Als favourite !== 23 de (strict) different operator is, wat is dan:
favourite != 23
A
De loose operator
B
if condition
C
De not statement
D
Iets wat op de vorige slide stond

Slide 15 - Quiz

Boolean operators
A: Sarah has a drivers license

B: Sarah has good vision

Slide 16 - Slide

Kan Sarah zowel een rijbewijs hebben EN goed zicht?
Ja
Nee

Slide 17 - Poll

Truthtable (waarheidstabel)

Slide 18 - Slide

Kan Sarah zowel een rijbewijs hebben OF goed zicht?
Ja
Nee

Slide 19 - Poll

Truthtable A OR B

Slide 20 - Slide

Boolean operators
age = 16;
A: Age is greater or equal to 20;

B: Age is less than 30;

A OR !B >> Check de precedence!

Slide 21 - Slide

Logical operators
const hasDriversLicense = true; // A
const hasGoodVision = true; // B

console.log(hasDriversLicense && hasGoodVision);

Slide 22 - Slide

const hasDriversLicense = true; // A
const hasGoodVision = false; // B

console.log(hasDriversLicense && hasGoodVision);
A
True
B
False
C
Truth
D
☝🏼

Slide 23 - Quiz

Logical operators
const hasDriversLicense = true; // A
const hasGoodVision = false; // B

console.log(hasDriversLicense || hasGoodVision);

Slide 24 - Slide

Logical operators
const hasDriversLicense = true; // A
const hasGoodVision = false; // B

console.log(!hasDriversLicense);

Slide 25 - Slide

Logical operators
const hasDriversLicense = true; // A
const hasGoodVision = false; // B

const shouldDrive = hasDriversLicense && hasGoodVision;
if(shouldDrive) {
console.log(`Sarah is able to drive!`);
} else {
console.log(`Someone else should drive...`);
}

Slide 26 - Slide

Logical operators
const isTired = true; // C

const shouldDrive = hasDriversLicense && hasGoodVision && isTired;

const shouldDrive = hasDriversLicense || hasGoodVision || isTired;

Slide 27 - Slide

Logical operators
const shouldDrive = hasDriversLicense && hasGoodVision && isTired;

if(hasDriversLicense && hasGoodVision && !isTired) {
console.log(`Sarah is able to drive!`);
} else {
console.log(`Someone else should drive...`);
}

Wat komt hier uit? (Verander C naar false)

Slide 28 - Slide

Code challenge

Slide 29 - Slide

Slide 30 - Slide

Extra oefening 1

Slide 31 - Slide

Extra oefening 2

Slide 32 - Slide