Bienvenidos sean a este post, en el post anterior hablamos sobre uno de los condicionales llamado if, con sus respectivos ayudantes else y else if pero como dijimos antes si bien es una herramienta util a la hora de tomar decisiones si tenemos demasiadas opciones puede resultar en algo complejo y posible generador de errores pero como en la mayoria de los lenguajes podemos evitar este inconveniente gracias al comando del titulo.
La funcion switch trabaja tomando una variable y luego comparando los distintos posibles valores de la variable por medio del case y con un valor llamado default que devolvera un resultado si no se cumple ninguna condicion, su sintaxis es:
switch(variable)
{
case n1:
instrucciones
break;
case n2:
instrucciones
break;
case n3:
instrucciones
break;
case nN:
instrucciones
break;
default:
instrucciones
break;
}
Como pueden las condiciones son establecidas con los case, donde evaluara un valor ejecutara el bloque de instrucciones asignados y saldra por medio de break, default no evalua ningun valor sino que simplemente ejecutara las instrucciones contenidas porque no coincidio con ninguna de las anteriores.
Para entender mejor el concepto de switch veamos el siguiente ejemplo:
switch.html
<html>
<script language="javascript">
<!--
function Ejecutar()
{
var texto = document.getElementById("resultado");
var opcion = document.getElementById("opcion").value;
switch(opcion)
{
case "1":
texto.innerHTML="Formateando el disco por favor espere...";
break;
case "2":
texto.innerHTML="Destruyendo todos los archivos XML, espere";
break;
case "3":
texto.innerHTML="CAmbiando su CPU por un RISC";
break;
case "4":
texto.innerHTML="Su navegador es " + navigator.userAgent;
break;
case "5":
texto.innerHTML="Saliendo de este sistema solar...";
break;
default:
texto.innerHTML="Debe ingresar un valor entre 1 y 5";
break;
}
}
//-->
</script>
<body>
Menu de acciones:<br><br>
1 - Formateo<br>
2 - Destruccion<br>
3 - Cambio de CPU<br>
4 - Datos del navegador<br>
5 - Salir.<br><br>
<input type="text" id="opcion" value="">
<button type="button" onClick="Ejecutar()">Ejecutar</button><br><br>
<div id="resultado"></div>
</body>
</html>En este caso crearemos una pagina donde tendremos algunas opciones, cada uno con un numero relacionado a su ejecucion, despues tendremos un cuadro donde ingresar la opcion y el boton donde llamaremos a la funcion encargada de interpretar nuestra accion, veamos la interfaz de nuestra pagina
Como pueden ver la interfaz es muy simple, en nuestro programa dentro del tag SCRIPT tendremos una funcion llamada Ejecutar(), al comienzo de la misma tendremos dos variables una llamada texto donde por medio del metodo getElementById() le diremos que asigne a esta variable el elemento llamado resultado, la siguiente variable llamada opcion utilizara el mismo metodo pero esta vez para obtener el valor contenido por medio de value en el cuadro de texto llamado opcion, con este creado usaremos a switch() donde le enviaremos a opcion para comparar, usaremos un case para cuando ingresamos el valor 1 y escribira un mensaje en texto, es decir en el elemento resultado, de todos los cases utilizados el 4 es uno interesante porque podremos ver la informacion de nuestro navegador en pantalla y el default que nos devolvera un mensaje de error en caso de no informar un numero o informar uno por fuera del menu, si lo probamos se ejecutara de la siguiente manera
Como podemos ver tenemos contempladas todas las opciones de nuestro menu e inclusive si el usuario pretende no seguir los pasos solicitados, ya sea por medio de omision de una opcion o un ingreso incorrecto, si bien nosotros podriamos haber reemplazado a esto por medio de distintos bloques if para cada una de las opciones pero eso nos habria extendido el programa de forma innecesaria y no solamente empeorando a nivel visual el mismo pero esto no hace que switch sustituya a if sino deben aprender a complementar uno con el otro con las posibilidades que ofrece cada condicional.
En resumen, hoy hemos visto otra forma de condicional llamada switch, es util cuando debes lograr varias decisiones por medio de una variable, los case son una opcion mas agradable para encerrar bloques de instrucciones, tambien hemos visto que posee una forma mas practica para cuando no se cumple ninguna de las condiciones de nuestro programa, espero les haya sido util sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.
Tengo un Patreon donde podes acceder de manera exclusiva a material para este blog antes de ser publicado, sigue los pasos del link para saber como.
Tambien podes donar
Es para mantenimiento del sitio, gracias!
$1.50
El blog de Tinchicus 