Skip to content

Latest commit

 

History

History
431 lines (306 loc) · 8.41 KB

lesson05.md

File metadata and controls

431 lines (306 loc) · 8.41 KB
Raw

Basic Frontend - Fall 2024

Lesson 5, Thursday, 2024-09-26

Lesson Overview

  • if, else if, else
  • undefined and null data types
  • Compound Assignment Operators
  • Lots of practice

Recap

if statements

if (condition) {
  // block of code that
  // will run ONLY if
  // condition is true
}

if Statements - Quiz

What does the code below show on the HTML page?

let age = 15;
let height = 140;

let canRideRollerCoaster = age > 14 && height > 150;

if (canRideRollerCoaster) {
  document.body.textContent = "Welcome to the ride!";
}

Nothing changes, canRideRollerCoaster is false.

console.log()

We need a way of printing information to the console when our code runs, for debugging purposes:

let name = "Alan";
console.log(name);
let shouldSayHello = true;
if (shouldSayHello) {
  console.log("Hello");
}

If-Else

Very often, we would like to conditionally execute something, and otherwise execute something else:

if (budget >= 60) {
  console.log("Let's go to cinema!");
}
if (budget < 60) {
  console.log("Let's go to the park!");
}

If-Else

if (condition) {
  // some code
  // will execute if condition is true
} else {
  // other code
  // will execute if condition is false
}

If-Else

if (budget >= 60) {
  console.log("Let's go to cinema!");
} else {
  console.log("Let's go to the park!");
}

Quiz

Can you change the following code to if..else?

if (temperature > 25) {
  console.log("Go swimming");
}
if (temperature <= 25) {
  console.log("Go biking");
}

Solution

if (temperature > 25) {
  console.log("Go swimming");
} else {
  console.log("Go biking");
}

But what if we want to check multiple exclusive conditions?

If...Else-If...Else example

if (day === "Saturday") {
  console.log("Do all the shopping.");
} else if (day === "Sunday") {
  console.log("Relax!");
} else {
  console.log("Wake up and go to work!");
}

Only one code block is executed in the if..else if..else. To determine which block, JavaScript will evaluate the conditions from top to bottom. The first condition that evaluates to true determines the block to be executed. All the other code blocks are ignored.

You can use code-to-graph for visualization:

if-else

Task

  • Describe the weather based on the temperature:
    • Above 30
    • Above 20
    • Above 5
    • Everything else

Is this correct?

let temperature = 7;

if (temperature > 20) {
  console.log("it's warm");
} else if (temperature > 30) {
  console.log("too hot!!!");
} else if (temperature > 5) {
  console.log("perfect.");
} else {
  console.log("it's a bit chilly.");
}

Look at it in code-to-graph, can you find the bug?

Try with a temperature of 35, what does it print?

Correct solution

let temperature = 35;

if (temperature > 30) {
  console.log("too hot!!!");
} else if (temperature > 20) {
  console.log("it's warm");
} else if (temperature > 5) {
  console.log("perfect.");
} else {
  console.log("it's a bit chilly.");
}

Data Type: Undefined

  • Undefined has only one value: undefined
  • It indicates the unintentional absence of any value
  • undefined is automatically assigned to uninitialized variables

Undefined example

let x; // no value is assigned to x
console.log(x); // undefined
console.log(typeof x); // "undefined"
console.log(x === undefined); // true

Data Type: Null

  • null has only one value: null
  • It indicates the intentional absence of any value

Example:

let x = null;
console.log(typeof x); // outputs 'object' due to a bug
console.log(x === null); // true

Compound assignment operators

Compound operator Same as
x += 42 x = x + 42
x -= 42 x = x - 42
x /= 42 x = x / 42
x *= 42 x = x * 42
x **= 42 x = x ** 42

Compound assignment operators are shorter ways of applying an operator on the variable and assigning the result back to the variable.

Compound assignment operators example

// this creates a website showing "Hello World"
document.body.textContent = "Hello";
document.body.textContent = document.body.textContent + " World";

Better:

document.body.textContent = "Hello";
document.body.textContent += " World";

Quiz

What is the value of x?

let x = 42;
let y = 2;
x /= y;
x += 3;
console.log(x);

x is 24

Recap: rules of if, else if, else

  • JavaScript will go through the if/else-if/else statements from top to bottom.
  • In our example, it will check condition1, then condition2, then condition3...
  • If one of the conditions evaluates to true, JavaScript will execute it’s code block and skip every following else if and else!

Recap: Series of separate if statements

If we put a series of if statements one after the other, they will be evaluated independently of one another.

if (condition1) {
  // do this if condition 1 is true
}
if (condition2) {
  // do this if condition 2 is true
  // no matter what condition 1 was
}
if (condition3) {
  // do this if condition 3 is true
  // no matter what condition 1 or 2 was
}

Task 1: Buying ice cream

You have to go to the supermarket and buy ice-cream for your the party of your best friend.

Her instructions are:

  • Buy strawberry flavor.
  • If that's not available, buy mango flavor.
  • If that's not available, buy the hazelnut one.
  • If none of those are available, buy chocolate flavor.

These are your variables, write code that works for any true or false:

let isStrawberryAvailable = false;
let isMangoAvailable = false;
let isHazelnutAvailable = true;

Task 2: Shopping time

Let's go shopping. Create a variable containing the budget (try with 5, 7, 8 and 10).

  • If we have enough money left, buy milk (2 EUR).
  • If we have enough money left, buy cheese (4 EUR).
  • If we have enough money left, buy bread (2 EUR).
  • If we have enough money left and we bought bread, buy butter (1 EUR).

Output what we bought and how much money is left.

These are your variables:

let budget = 10;
let milkPrice = 2;
let cheesePrice = 4;
let breadPrice = 2;
let butterPrice = 1;

Homework

You're a developer in a bookstore. Can you finish all the tasks in this JavaScript project?

Ice cream exercise solution

let isStrawberryAvailable = false;
let isMangoAvailable = false;
let isHazelnutAvailable = true;

if (isStrawberryAvailable) {
  console.log("buying strawberry ice cream");
} else if (isMangoAvailable) {
  console.log("buying mango ice cream");
} else if (isHazelnutAvailable) {
  console.log("buying hazelnut ice cream");
} else {
  console.log("buying chocolate ice cream");
}

Shopping exercise solution

let budget = 32;
let milkPrice = 2;
let cheesePrice = 4;
let breadPrice = 2;
let butterPrice = 1;

if (budget >= milkPrice) {
  budget -= milkPrice;
  console.log("bought milk");
}

if (budget >= cheesePrice) {
  budget -= cheesePrice;
  console.log("bought cheese");
}

if (budget >= breadPrice) {
  budget -= breadPrice;
  console.log("bought bread");
  if (budget >= butterPrice) {
    budget -= butterPrice;
    console.log("bought butter");
  }
}

console.log("budget left:", budget);