Week 5: JavaScript herhaling & code challenge bespreken

1 / 33
volgende
Slide 1: Tekstslide
JavaScriptMBOStudiejaar 2

In deze les zitten 33 slides, met interactieve quizzen en tekstslides.

time-iconLesduur is: 60 min

Onderdelen in deze les

Slide 1 - Tekstslide

Terugblik
Truthy and Falsy values
Equality operators
Boolean Logic
Code challenge

Slide 2 - Tekstslide

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

Slide 3 - Tekstslide

let test;

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

Slide 4 - Quizvraag

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

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

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

Slide 7 - Tekstslide

avDolphins === `97`;

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

Slide 8 - Quizvraag

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

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

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

Slide 11 - Tekstslide

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

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

Slide 12 - Open vraag

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

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

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

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

Slide 16 - Tekstslide

Logical operator
Equality operator
Truthy
Falsy Values

Slide 17 - Sleepvraag

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

Slide 18 - Quizvraag

Boolean operators
A: Sarah has a drivers license

B: Sarah has good vision

Slide 19 - Tekstslide

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

Slide 20 - Poll

Truthtable (waarheidstabel)

Slide 21 - Tekstslide

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

Slide 22 - Poll

Truthtable A OR B

Slide 23 - Tekstslide

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

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

console.log(hasDriversLicense && hasGoodVision);

Slide 25 - Tekstslide

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

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

Slide 26 - Quizvraag

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

console.log(hasDriversLicense || hasGoodVision);

Slide 27 - Tekstslide

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

console.log(!hasDriversLicense);

Slide 28 - Tekstslide

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

Logical operators
const isTired = true; // C

const shouldDrive = hasDriversLicense && hasGoodVision && isTired;

const shouldDrive = hasDriversLicense || hasGoodVision || isTired;

Slide 30 - Tekstslide

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

Extra oefening 1

Slide 32 - Tekstslide

Extra oefening 2

Slide 33 - Tekstslide