Week 5: JavaScript herhaling & code challenge bespreken

1 / 33
next
Slide 1: Slide
JavaScriptMBOStudiejaar 2

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

time-iconLesson duration is: 60 min

Items in this lesson

Slide 1 - Slide

Terugblik
Truthy and Falsy values
Equality operators
Boolean Logic
Code challenge

Slide 2 - Slide

Doel van deze les
Code challenge bespreken
Oefenen met de materie van deze week

Slide 3 - Slide

let test;

Wat is de waarde van test?
A
True
B
False
C
Truth
D
Undifiened

Slide 4 - Quiz

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 5 - 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 6 - Slide

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

Slide 7 - Slide

avDolphins === `97`;

Wat is de waarde van avDolphins?
A
True
B
False
C
String
D
Undifiened

Slide 8 - Quiz

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 9 - Slide

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

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

Slide 11 - Slide

const name = `123`
if (name === 123) ....

Resultaat is false; hoe kan name converteren om een true te krijgen?

Slide 12 - Open question

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 13 - 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 14 - Slide

let name = 123;
if (name != 23) console.log(`...`);

Waarom is dit niet volgens de afspraak?
A
23 moet met backticks
B
Dit is een boolean operator
C
Dit is een loose operator
D
De ... is fout

Slide 15 - Quiz

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

Slide 16 - Slide

Logical operator
Equality operator
Truthy
Falsy Values

Slide 17 - Drag question

Welke afbeelding hieronder, is een truth table?
A
B
C
D

Slide 18 - Quiz

Boolean operators
A: Sarah has a drivers license

B: Sarah has good vision

Slide 19 - Slide

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

Slide 20 - Poll

Truthtable (waarheidstabel)

Slide 21 - Slide

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

Slide 22 - Poll

Truthtable A OR B

Slide 23 - 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 24 - Slide

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

console.log(hasDriversLicense && hasGoodVision);

Slide 25 - Slide

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

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

Slide 26 - Quiz

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

console.log(hasDriversLicense || hasGoodVision);

Slide 27 - Slide

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

console.log(!hasDriversLicense);

Slide 28 - 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 29 - Slide

Logical operators
const isTired = true; // C

const shouldDrive = hasDriversLicense && hasGoodVision && isTired;

const shouldDrive = hasDriversLicense || hasGoodVision || isTired;

Slide 30 - 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 31 - Slide

Extra oefening 1

Slide 32 - Slide

Extra oefening 2

Slide 33 - Slide