Skip to content

Latest commit

 

History

History
324 lines (222 loc) · 6.36 KB

lesson03.md

File metadata and controls

324 lines (222 loc) · 6.36 KB

JavaScript Course - Spring 2026

Lesson 3, Thursday, 2026-03-26

Recap: Variables

A variable is a container for a value. We can use it to store a number or a string that is part of a sentence.

// declare variable with name sum and number value 10
let sum = 10;
// declare variable with name sum and string value John Smith
let personName = 'John smith';

Recap: Comparision operators

Comparison Operators compare values and return true or false

  • === and !== → Strict equality and inequality
  • < and > → Less than and greater than
  • <= and >= → Less than or equal to, greater than or equal to

Recap: Basic mathematical operators

Basic mathematical operators performs arithmetic operations:

  • + addition
  • - subtraction
  • * multiplication
  • / division
  • ** exponentiation

Lesson overview

  • Understanding Conditional Statements
  • Using Comparison Operators to test conditions
  • Logical operators
  • Code blocks

Conditional statements

What is a conditional statement?

What comes to mind when you look at these images? Variable Variable

A conditional statement decides whether specific code runs based on whether a condition is true or false.

if statements

if statement specifies code to be executed if a condition is true.

if (condition) {
    // run code if condition is true
}
  • The 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 skipped.

Testing conditions using Comparision operators

Comparison operators are used to test if a condition is true or false so we can decide when to run certain code.

if (sum === 30) {
  document.body.textContent = 'sum is equal to 30';
}

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

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"

Logical operators: AND, OR and NOT

Logical operators are helpful if you want to test multiple conditions in an if statement.

  • && (AND) – All conditions must be true for the statement to execute.
  • || (OR) – At least one condition must be true for the statement to execute.
  • ! (NOT) – Reverses the truth value of a condition (true becomes false and vice versa).

Logical operators - Examples

&& (AND)

let age = 25;
let hasLicense = true;
if (age >= 18 && hasLicense) {
    console.log("You can drive!");
}

|| (OR)

let hasMembership = false;
let over60 = true;
if (hasMembership || over60) {
    console.log("You get a 25% discount on all in-store purchases!");
}

Logical operators - Examples

! (NOT)

let isDaytime = false;
if (!isDaytime) {
    console.log("It's nighttime!");
}

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"

Quiz

Which conditions are true or false?

let age = 13;
if (age >= 18 && age <= 99) {
  document.body.textContent = "Welcome! You can register";
}

let color = 'orange';
if (color === 'orange' || color === 'red') {
  document.body.textContent = "The color is orange or red";
}

Solution: Second condition is true, , so it outputs "The color is orange or red"

Quiz

Is this code valid?

if (canSpeakFrench) document.body.textContent = "Bonjour!";

Yes! if statements written without curly braces or code blocks are valid, however they are not recommend.

Code blocks help organize the code, making it easier to read and understand.

Task

Write a code to check if the sum of two variables, x and y, is greater than or equal to 10.

Create a variable x with value of 4 and y with value of 5

Create a variable sum and assign a value of minus -1

If sum of x and y >= 10, update the variable sum with the result of x + y

Assign the value of sum to document.body.textContent.

Bonus Challenge 🎯

  • Try different values for x and y to test your code. What do you observe?