8770447379 | Info@paramclasses.in
Paramclasses Academy - Blog

Blog

Home / Tutorials

Tutorials Details

JavaScript switch Statement Simplified: A Beginner’s Guide with Code Examples

JavaScript switch Statement Simplified: A Beginner’s Guide with Code Examples

December 18, 2024

What is the switch Statement?

The switch statement evaluates an expression and matches it against multiple case values. Once a match is found, the corresponding block of code is executed. If no match is found, the optional default block is executed.

Syntax of switch Statement

switch (expression) {
  case value1:
    // Code to execute if expression === value1
    break;
  case value2:
    // Code to execute if expression === value2
    break;
  default:
    // Code to execute if no case matches
}

Key Points to Remember:

  1. break: Stops further execution inside the switch. Without it, the next case will execute even if it doesn’t match.
  2. default: Runs when no matching case is found. It’s optional but recommended.
  3. Strict Comparison (===): switch uses strict comparison, meaning both value and type must match.

Example Use Cases for switch

  • Day of the week
  • Menu selection
  • User role-based access
  • Grading system

HTML, CSS, and JavaScript Program Example

Let’s create a program where the user selects their favorite fruit, and the program provides a message based on their choice.

HTML(index.html):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Switch Statement Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>Favorite Fruit Selector</h1>
    <label for="fruit">Choose Your Favorite Fruit:</label>
    <select id="fruit">
      <option value="">--Select a Fruit--</option>
      <option value="apple">Apple</option>
      <option value="banana">Banana</option>
      <option value="mango">Mango</option>
      <option value="orange">Orange</option>
    </select>
    <button id="check">Show Message</button>
    <p id="result"></p>
  </div>
  <script src="script.js"></script>
</body>
</html>

CSS (style.css):

body {
  font-family: Arial, sans-serif;
  background-color: #f9f9f9;
  text-align: center;
  padding: 20px;
}

.container {
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  max-width: 400px;
  margin: auto;
}

h1 {
  color: #444;
}

label {
  font-size: 1.2em;
  margin-bottom: 10px;
  display: block;
}

select {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 5px;
}

button {
  background: #28a745;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1em;
}

button:hover {
  background: #218838;
}

p {
  font-size: 1.2em;
  margin-top: 10px;
}
 

JavaScript (script.js):

document.getElementById('check').addEventListener('click', function() {
  const fruit = document.getElementById('fruit').value;
  const result = document.getElementById('result');

  switch (fruit) {
    case "apple":
      result.textContent = "Apples are great for a healthy snack! ????";
      result.style.color = "green";
      break;
    case "banana":
      result.textContent = "Bananas are rich in potassium! ????";
      result.style.color = "yellow";
      break;
    case "mango":
      result.textContent = "Mangoes are the king of fruits! ????";
      result.style.color = "orange";
      break;
    case "orange":
      result.textContent = "Oranges are full of Vitamin C! ????";
      result.style.color = "orangered";
      break;
    default:
      result.textContent = "Please select a fruit to get a message.";
      result.style.color = "red";
  }
});
 

How This Program Works

  1. The user selects a fruit from the dropdown menu.
  2. Clicking the "Show Message" button triggers the JavaScript code.
  3. The selected fruit is evaluated in the switch statement:
    • If the fruit matches a case, a unique message is displayed.
    • If no fruit is selected, the default block shows a prompt to choose a fruit.

Advantages of switch Over if...else

  • Readability: Easier to read when dealing with multiple conditions.
  • Performance: Faster when there are many conditions to check.
  • Scalability: Adding new conditions is straightforward.

Categories

Recent post

How to Use the Ternary Operator in JavaScript: Tutorial with Code Example
December 19, 2024
How to Use the Ternary Operator in JavaScript: Tutorial with Code Example
JavaScript switch Statement Simplified: A Beginner’s Guide with Code Examples
December 18, 2024
JavaScript switch Statement Simplified: A Beginner’s Guide with Code Examples
JavaScript if, if...else, and else Explained with Real-Life Examples
December 18, 2024
JavaScript if, if...else, and else Explained with Real-Life Examples
Exploring JavaScript Data Types: Strings, Numbers, Booleans, and More.
December 17, 2024
Exploring JavaScript Data Types: Strings, Numbers, Booleans, and More.
JavaScript Tutorial for Beginners: Learn Basics
December 5, 2024
JavaScript Tutorial for Beginners: Learn Basics
Build an Interactive FAQ Section Without JavaScript – HTML & CSS Guide
November 7, 2024
Build an Interactive FAQ Section Without JavaScript – HTML & CSS Guide

Get In Touch

Paramwebinfo,Raja talab Pandri, Raipur,Chhattisgarh India

8770447379

Info@paramclasses.in

Quick Links

Home About Course Our Gallery Contact Us Terms & Conditions Privacy Policy

Explore More

Placement Registration Enquiry Login Registration sitemap

Recent post

How to Use the Ternary Operator in JavaScript: Tutorial with Code Example
JavaScript switch Statement Simplified: A Beginner’s Guide with Code Examples
JavaScript if, if...else, and else Explained with Real-Life Examples
Exploring JavaScript Data Types: Strings, Numbers, Booleans, and More.
JavaScript Tutorial for Beginners: Learn Basics
Build an Interactive FAQ Section Without JavaScript – HTML & CSS Guide

Copyright © Paramwebinfo Academy.All Rights Reserved

Designed by PARAMWEBINFO