Skip to content

Latest commit

 

History

History
454 lines (319 loc) · 8.83 KB

lesson05.md

File metadata and controls

454 lines (319 loc) · 8.83 KB

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");
}

Give it a try yourself! Type console.log("Hello, world") in the browser.

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

Transforming the previous code into a if-else statement:

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

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 assignment operators are shorter ways of applying an operator on the variable and assigning the result back to the variable.

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

if (condition1) {
  // runs if condition1 is true
} else if (condition2) {
  // runs if condition2 is true
} else {
  // runs if neither condition1 nor condition2 are true
}
  • JavaScript will go through the if/else-if/else statements from top to bottom.
  • In our example, it will check condition1, then condition2.
  • If one of the conditions evaluates to true, JavaScript will execute its 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 condition1 is true
}
if (condition2) {
  // do this if condition2 is true
  // no matter what condition1 was
}
if (condition3) {
  // do this if condition3 is true
  // no matter what condition1 or condition2 was
}

Task 1: Buying ice cream

You have to go to the supermarket and buy ice cream for 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). Let's buy products in the following order:

  • 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);