Ejemplo de Switch Case En JavaScript
A diferencia del if else, el switch case nos permite tener varias opciones o simplificar un poco el código. En este artículo veremos como funciona y daremos algunos ejemplos de uso.
Contenido del artículo
¿Qué es el switch case en JavaScript?
La estructura de control switch case en JavaScript es una alternativa a las declaraciones if...else if...else, que permite ejecutar bloques de código según el valor de una expresión. Es especialmente útil cuando se necesita comparar una variable con múltiples valores posibles.
La estructura del switch case
switch (expresion) { case valor1: // Bloque de código a ejecutar si la expresión es igual a valor1 break; case valor2: // Bloque de código a ejecutar si la expresión es igual a valor2 break; //... default: // Bloque de código a ejecutar si la expresión no coincide con ningún valor}
Ejemplos con switch case
Calculadora básica
En este ejemplo, se utiliza un switch case para crear una calculadora simple que realiza operaciones aritméticas (suma, resta, multiplicación y división) según el operador ingresado.
<html><head> <title>Calculadora básica con switch case</title> <script type="text/javascript"> function calcular(num1, num2, operador) { let resultado;switch (operador) { case '+': resultado = num1 + num2; break; case '-': resultado = num1 - num2; break; case '*': resultado = num1 * num2; break; case '/': resultado = num1 / num2; break; default: resultado = "Operador inválido"; }return resultado; }const numero1 = 10; const numero2 = 5; const operador = '+';const resultado = calcular(numero1, numero2, operador); document.write(numero1 + " " + operador + " " + numero2 + " = " + resultado); </script></head><body></body></html>
Traductor de colores
En este ejemplo, se utiliza un switch case para traducir nombres de colores básicos entre inglés y español.
La función traducirColor utiliza un switch case para traducir los nombres de colores entre inglés y español. La función recibe como argumentos el color y el idioma al que se desea traducir, y devuelve la traducción correspondiente.
<html><head> <title>Traductor de colores con switch case</title> <script type="text/javascript"> function traducirColor(color, idioma) { let traduccion;if (idioma === "es") { switch (color.toLowerCase()) { case 'red': traduccion = 'rojo'; break; case 'green': traduccion = 'verde'; break; case 'blue': traduccion = 'azul'; break; default: traduccion = 'Color desconocido'; } } else if (idioma === "en") { switch (color.toLowerCase()) { case 'rojo': traduccion = 'red'; break; case 'verde': traduccion = 'green'; break; case 'azul': traduccion = 'blue'; break; default: traduccion = 'Unknown color'; } } else { traduccion = "Idioma inválido"; }return traduccion; }const color = 'rojo'; const idioma = 'en';const traduccion = traducirColor(color, idioma); document.write("La traducción de " + color + " al " + idioma + " es: " + traduccion); </script></head><body></body></html>
Mensajes personalizados según el día de la semana
En el siguiente ejemplo, mostramos un mensaje personalizado en función del día de la semana. Dependiendo del día, se imprime un texto diferente en la página.
Primero obtenemos la fecha actual usando new Date(), luego extraemos el número del día de la semana con getDay(), que devuelve un valor entre 0 y 6 (donde 0 es domingo, 1 es lunes, y así sucesivamente).
Luego, utilizamos un switch case para mostrar un mensaje específico según el día de la semana. Para los viernes, sábados y domingos, se muestran mensajes relacionados con actividades típicas de esos días, mientras que para el resto de los días se muestra un mensaje genérico sobre el fin de semana.
<html><head> <title>Mensajes personalizados según el día de la semana</title></head><body> <script type="text/javascript"> // Obtenemos la fecha actual var a = new Date();// Obtenemos el número del día de la semana (0-6) var Dia = a.getDay();// Utilizamos un switch case para mostrar un mensaje personalizado según el día de la semana switch (Dia) { case 5: document.write("<b>Viernes social</b>"); break; case 6: document.write("<b>Sábado sexual !!!</b>"); break; case 0: document.write("<b>Domingo familiar</b>"); break; default: document.write("<b>I'm really looking forward to this weekend!</b>"); } </script><p>En este script el Domingo=0, Lunes=1, Martes=2, etc.</p></body></html>
¿Cómo citar? Pichardo, A. & Del Moral, M. (s.f.). Ejemplo de Switch Case En JavaScript.Ejemplo de. Recuperado el 26 de Septiembre de 2023 de https://www.ejemplode.com/24-javascript/523-ejemplo_de_switch_case_en_javascript.html