Codificación aprenderaprogramar.com: CU01120E
SWITCH EN JAVASCRIPT. EJEMPLOS DE APLICACIÓN.
La instrucción switch es una forma de expresión de un anidamiento múltiple de instrucciones if ... else. Su uso no puede considerarse, por tanto, estrictamente necesario, puesto que siempre podrá ser sustituida por el uso de if. No obstante, a veces resulta útil al introducir eficiencia y mayor claridad en el código.
La sintaxis será (expresión será normalmente una variable cuyo contenido queremos evaluar, pero puede ser una operación matemática, una expresión booleana, etc.):
|
/* Ejemplo switch - aprenderaprogramar.com */ switch (expresión) { case valor1: instrucciones; break;
case valor2: instrucciones; break; . . . default: sentencias; break; } |
|
/* Ejemplo switch - aprenderaprogramar.com */ switch (expresión) { case valor1: case valor2: case valor3: instrucciones; break;
case valor4: instrucciones; break; . . . default: sentencias; break; } |
Esquemáticamente en forma de diagrama de flujo:
La cláusula default es opcional y representa las instrucciones que se ejecutarán en caso de que no se verifique ninguno de los casos evaluados. El último break dentro de un switch (en default si existe esta cláusula, o en el último caso evaluado si no existe default) también es opcional, pero lo incluiremos siempre para ser metódicos.
break es opcional (pero en general recomendable) y provoca que una vez encontrada una coincidencia termine la evaluación de casos. Si no se incluye, se evaluarían el resto de casos (ejecutándose si fueran ciertos). De no incluirse break, podría producirse que se ejecuten dos o más casos.
switch realiza las comparaciones usando el operador === (igual estricto). Se permite evaluar tanto números como cadenas de texto o valores booleanos. Switch solo permite evaluar valores concretos de la expresión: no permite evaluar intervalos (pertenencia de la expresión a un intervalo o rango) ni expresiones compuestas. Código de ejemplo:
|
/* Ejemplo de uso switch JavaScript aprenderaprogramar.com*/ function mostrarMensaje1() { switch (mes) { case 1: alert ("El mes es enero"); break; case 2: alert ("El mes es febrero"); break; case 10: alert ("El mes es octubre"); break; default: alert ("El mes no es enero, febrero ni octubre"); break; } } |
En algunos casos escribimos varias instrucciones en una línea y en otros una sola instrucción por línea. Ambas posibilidades son válidas.
El anterior código usa valores numéricos. También se admiten situaciones como switch (edad+1>18) donde la expresión devuelve un booleano, o case 'armario': alert ("Ha introducido armario"); break; donde se evalúa la igualdad con un texto.
EJEMPLO
Escribe el siguiente código y guárdalo en un archivo de extensión html (puedes cambiar la ruta de la imagen si lo deseas):
| <html> <head> <title>Curso JavaScript aprenderaprogramar.com</title> <meta charset="utf-8"> <script type="text/javascript"> function mostrarMensaje1() { var edad; edad = prompt ('Por favor introduce edad:'); if (edad =="") { alert ('No has introducido edad'); } edad = Number(edad); switch (edad) { case 0: alert ("Acaba de nacer hace poco. No ha cumplido el año"); break; case 18: alert ("Está justo en la mayoría de edad"); break; case 65: alert ("Está en la edad de jubilación"); break; default: alert ("La edad no es crítica"); break; } } </script> </head> <body> <div> <p>Aquí un párrafo de texto situado antes de la imagen, dentro de un div contenedor</p> <img onclick="mostrarMensaje1()" src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un útil editor de texto"> <p onclick ="alert('Alerta JavaScript')" style="color: #D2691E;">Aquí otro párrafo de texto. JavaScript es un lenguaje utilizado para dotar de efectos dinámicos a las páginas web. </p> </div> </body> </html> |
Visualiza el resultado y comprueba que la página web se muestra con normalidad y que JavaScript se ejecuta con normalidad cuando haces click sobre la imagen.
El resultado esperado esque se muestre lo siguiente (compruébalo introduciendo 33 como entrada del usuario):
Por favor introduce edad: 33 (Aceptar)
La edad no es crítica (Aceptar)
EJERCICIO
Considera estás desarrollando un script donde trabajas con tipos de motor (suponemos que se trata del tipo de motor de una bomba para mover fluidos). Crea una función denominada dimeTipoMotor() donde pidas el tipo de motor al usuario (indicando que los valores posibles son 1, 2, 3, 4) y a través de un condicional switch hagas lo siguiente:
a) Si el tipo de motor es 0, mostrar un mensaje indicando “No hay establecido un valor definido para el tipo de bomba”.
b) Si el tipo de motor es 1, mostrar un mensaje indicando “La bomba es una bomba de agua”.
c) Si el tipo de motor es 2, mostrar un mensaje indicando “La bomba es una bomba de gasolina”.
d) Si el tipo de motor es 3, mostrar un mensaje indicando “La bomba es una bomba de hormigón”.
e) Si el tipo de motor es 4,mostrar un mensaje indicando “La bomba es una bomba de pasta alimenticia”.
f) Si no se cumple ninguno de los valores anteriores mostrar el mensaje “No existe un valor válido para tipo de bomba”.
Ejecuta el código y comprueba sus resultados. Para comprobar si es correcta tu solución puedes consultar en los foros aprenderaprogramar.com.
Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link: Ver curso completo.
Para hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.
