OIM3690 - Web Technologies

Conditional Statements

Conditional Statements in JavaScript

• Conditional statements (or branching) is used to do different things based on different conditions
• Condition:
  • An expression that evaluates to a Boolean value (true or false).
• Examples:
  • If the user is logged in, display their name. If they are not logged in, display the login button.
  • If the user enters a valid email, send a confirmation message. If the email is invalid, display an error message.
  • If the user selects the dark theme, change the page's theme to dark; otherwise, keep/change the default light theme.

Conditional statements

• Syntax:

  if (condition) {
    // do something;
  } else {
    // do something else;
  }
  

• Example:

  let num = 10;
  
  if (num % 2 == 0) {
    console.log("The number is an even number.");
  } else {
    console.log("The number is not an even number.");    
  }
  

Equality Operators

• a == b
  • (Loose Equality) checks if values are equal, allowing type conversion.
  • E.g. 3 == '3' // true
• a != b
  • Is a not equal to b?
• a === b
  • (Strict Equality) checks if values are equal in both value and type.
  • E.g. 3 === '3' // false (different types: number vs. string)
• a !== b
  • Is a not strictly equal to b?

Relational operators

• a > b
• a >= b
• a < b
• a <= b
• a instanceof B: is a an instance of B?
  • Note: instanceof vs. typeof

Logical Operators

• (condition1) && (condition2)
  • Are both conditions true?
• (condition1) || (condition2)
  • Is either condition true?
• !(condition)
  • Is condition false?

Logical Operators Examples

let x = 10;
let y = 5;

if (x > 5 && y < 10) {
  console.log("Both conditions are true");
} else {
  console.log("Both conditions are not true");
}

if (x > 15 || y < 2) {
  console.log("At least one condition is true");
}

if (!(x == 5)) {
  console.log("x is not equal to 5");
}

Complex Conditional Statements

if (condition) {
  // statements1
} else if (condition2) {
  // statements2
} else if (condition3) {
  // statements3
}
// ...
else {
  // final statements
}

Complex Conditional Statements Example

const temp = 40;

if (temp >= 90) {
  console.log("Phew! It's hot enough to fry an egg on the sidewalk!");
} else if (temp >= 65 && temp < 90) {
  console.log("Ah, it's warm and toasty like a freshly baked croissant!");
} else if (temp >= 50 && temp < 65) {
  console.log("It's a nice day! Perfect weather for a picnic or outdoor concert.");
} else {
  console.log("Brr, a bit chilly today! Just another typical Spring in Boston!");
}

Exercise: ex15.html

• Download ex15.html from GitHub - OIM3690/resources/templates
• Download 4 images of Celtics players from GitHub to images folder.
• Write a JavaScript function that listens for click events on the images:
  • Display a prompt that asks user for the name of their favorite Celtics player.
  • If the user enters the name of one of the 4 Celtics players, swap the clicked image with the image of the corresponding player.
  • If the user enters a name that is not one of the four Celtics players, display an alert with an error message.
• Update sitemap.html and commit/push to GitHub

Questions?