Week 5: JavaScript herhaling & code challenge bespreken

1 / 33
suivant
Slide 1: Diapositive
JavaScriptMBOStudiejaar 2

Cette leçon contient 33 diapositives, avec quiz interactifs et diapositives de texte.

time-iconLa durée de la leçon est: 60 min

Éléments de cette leçon

Slide 1 - Diapositive

Terugblik
Truthy and Falsy values
Equality operators
Boolean Logic
Code challenge

Slide 2 - Diapositive

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

Slide 3 - Diapositive

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 - Diapositive

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 - Diapositive

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

Slide 7 - Diapositive

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 - Diapositive

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 - Diapositive

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

Slide 11 - Diapositive

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

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

Slide 12 - Question ouverte

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 - Diapositive

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 - Diapositive

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 - Diapositive

Logical operator
Equality operator
Truthy
Falsy Values

Slide 17 - Question de remorquage

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 - Diapositive

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

Slide 20 - Sondage

Truthtable (waarheidstabel)

Slide 21 - Diapositive

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

Slide 22 - Sondage

Truthtable A OR B

Slide 23 - Diapositive

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 - Diapositive

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

console.log(hasDriversLicense && hasGoodVision);

Slide 25 - Diapositive

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 - Diapositive

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

console.log(!hasDriversLicense);

Slide 28 - Diapositive

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 - Diapositive

Logical operators
const isTired = true; // C

const shouldDrive = hasDriversLicense && hasGoodVision && isTired;

const shouldDrive = hasDriversLicense || hasGoodVision || isTired;

Slide 30 - Diapositive

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 - Diapositive

Extra oefening 1

Slide 32 - Diapositive

Extra oefening 2

Slide 33 - Diapositive