lesson04.md

Basic Frontend - Spring 2023

Lesson 4, Tuesday, 2023-03-28

---

Recap

Name the operators:

&&
<
===
||
+
**
>=

---

Recap

Name the operators:

&&    // logical AND
<     // less than
===   // strict equality
||    // logical OR
+     // addition
**    // exponentiation
>=    // greater than or equal

---

Recap

Group	Operators	Example
Numerical Operators	+ - * / **	5 + 4 * 3 7 / 2 - 2 "Hello" + " World"
Comparison Operators	=== !== < > <= >=	30 !== 25 20 >= 18
Logical Operators	|| && !	true && !false

---

Conditional Statements

---

Conditional Statements

Up until now, we wrote code line by line.

But what if I want to run some code only if a certain condition is true or false? For example, only run code when the user is logged in?

---

If statement

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

---

If statements

if (condition) {
  // your code here
}

• condition must be a boolean
• The code in the block is executed only if the boolean is true
• If the boolean is false, the code block is not executed

---

if Statements - Examples

if (food === 'pizza') {
  document.body.textContent = "My favorite food is pizza!";
}

if (temperature > 20) {
  document.body.textContent = "Yay, it's warm again!";
}

if (canSpeakFrench) { // same as: canSpeakFrench === true
  document.body.textContent = "Bonjour!";
}

---

if statements - quiz

What does the code below show on the HTML page?

let language = "German";
if (language === "German") {
  document.body.textContent = "Guten Tag";
}
if (language === "French") {
  document.body.textContent = "Bonjour";
}

"Guten Tag"

---

if statements - quiz

What does the code below show on the HTML page?

let language = "Spanish";
if (language === "German") {
  document.body.textContent = "Guten Tag";
}
if (language === "French") {
  document.body.textContent = "Bonjour";
}
if (language !== "German" && language !== "French") {
  document.body.textContent = "Good day";
}

"Good day"

---

Code Blocks: {}

Code blocks contain the code between { and }, and should be indented for better readability:

if (language === "German") {
  // In VSCode, you can indent code by pressing the "Tab" key,
  // or right-click and choose "Format Document"
  document.body.textContent = "Guten Tag";
}

---

Code Blocks: {}

All variables defined in code blocks only exist inside the block (technical term: “block scope”)

let name = "John Doe";
if (name === "John Doe") {
  let greeting = "Hi dude";
}
if (name === "Mary Doyle") {
  let greeting = "Hello my dear";
}
document.body.textContent = greeting; // ERROR!

---

Code Blocks: {}

Correct solution:

let name = "John Doe";
let greeting;
if (name === "John Doe") {
  greeting = "Hi dude";
}
if (name === "Mary Doyle") {
  greeting = "Hello my dear";
}
document.body.textContent = greeting; // "Hi dude"

---

Quiz

What does the code below show on the HTML page?

let food = "broccoli";
if (food === "pizza") {
    document.body.textContent = "yum yum";
}

Solution: Nothing, since the condition in the if is false

---

Quiz

What does it output?

let age = 42;
if (age >= 18) {
    document.body.textContent = "you are allowed to drive a car";
}
if (age < 18) {
    document.body.textContent = "you are not allowed to drive a car";
}

Solution: First condition is true, so it outputs "you are allowed to drive a car"

---

Task

Define a variable hour and set it to 17. Make an if statement that outputs good day if hour is less than 18. Now change hour to 19 and run the code again. What changed?

---

Task

Harald invented a game where the player with the highest score wins. The score is the player's height (in cm) plus five times the player's age.

1. Create variables for the heights and ages for you and a person next to you
2. Calculate the scores for you and your neighbor
3. Decide who wins, output the winner and their score to the body of your HTML. Remember: there can be a draw (both players with the same score).

---

console.log()

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

let name = "Owen";
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:

---

Task

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