Estructura SWITCH de Javascript

  • Por
La estructura de control switch de Javascript es utilizada para tomar decisiones en función de distintos estados o valores de una variable.

Las estructuras de control son la manera con la que se puede dominar el flujo de los programas, para hacer cosas distintas en función de los estados de las variables. En el Manual de Javascript ya empezamos a ver las estructuras de control y ahora le ha tocado el turno a SWITCH, una estructura un poco más compleja que permite hacer múltiples operaciones dependiendo del estado de una variable.

En este artículo veremos que switch nos sirve para tomar decisiones en función de distintos estados de las variables. Esta expresión se utiliza cuando tenemos múltiples posibilidades como resultado de la evaluación de una sentencia.

La estructura SWITCH se incorporó a partir de la versión 1.2 de Javascript (Netscape 4 e Internet Explorer 4). Su sintaxis es la siguiente.

switch (expresión) { 
   	case valor1: 
      	Sentencias a ejecutar si la expresión tiene como valor a valor1 
      	break 
   	case valor2: 
      	Sentencias a ejecutar si la expresión tiene como valor a valor2 
      	break 
   	case valor3: 
      	Sentencias a ejecutar si la expresión tiene como valor a valor3 
      	break 
   	default: 
      	Sentencias a ejecutar si el valor no es ninguno de los anteriores 
}

La expresión se evalúa, si vale valor1 se ejecutan las sentencias relacionadas con ese caso. Si la expresión vale valor2 se ejecutan las instrucciones relacionadas con ese valor y así sucesivamente, por tantas opciones como deseemos. Finalmente, para todos los casos no contemplados anteriormente se ejecuta el caso por defecto.

La palabra break es opcional, pero si no la ponemos a partir de que se encuentre coincidencia con un valor se ejecutarán todas las sentencias relacionadas con este y todas las siguientes. Es decir, si en nuestro esquema anterior no hubiese ningún break y la expresión valiese valor1, se ejecutarían las sentencias relacionadas con valor1 y también las relacionadas con valor2, valor3 y default.

También es opcional la opción default u opción por defecto.

Veamos un ejemplo de uso de esta estructura. Supongamos que queremos indicar que día de la semana es. Si el día es 1 (lunes) sacar un mensaje indicándolo, si el día es 2 (martes) debemos sacar un mensaje distinto y así sucesivamente para cada día de la semana, menos en el 6 (sábado) y 7 (domingo) que queremos mostrar el mensaje "es fin de semana". Para días mayores que 7 indicaremos que ese día no existe.

switch (dia_de_la_semana) { 
   	case 1: 
      	document.write("Es Lunes") 
      	break 
   	case 2: 
      	document.write("Es Martes") 
      	break 
   	case 3: 
      	document.write("Es Miércoles") 
      	break 
   	case 4: 
      	document.write("Es Jueves") 
      	break 
   	case 5: 
      	document.write("Es viernes") 
      	break 
   	case 6: 
   	case 7: 
      	document.write("Es fin de semana") 
      	break 
   	default: 
      	document.write("Ese día no existe") 
}

El ejemplo es relativamente sencillo, solamente puede tener una pequeña dificultad, consistente en interpretar lo que pasa en el caso 6 y 7, que habíamos dicho que teníamos que mostrar el mismo mensaje. En el caso 6 en realidad no indicamos ninguna instrucción, pero como tampoco colocamos un break se ejecutará la sentencia o sentencias del caso siguiente, que corresponden con la sentencia indicada en el caso 7 que es el mensaje que informa que es fin de semana. Si el caso es 7 simplemente se indica que es fin de semana, tal como se pretendía.

Nota: Además contamos con un videotutorial sobre el SWITCH en Javascript que os puede ser de mucha ayuda para entenderlo todo mucho mejor.

En el siguiente artículo comenzaremos a explorar las estructuras de control para hacer bucles o repeticiones en Javascript, comenzando por el bucle for.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Nicolás

10/5/2006
si no ponemos break, a partir de que se encuentre coincidencia con un valor se ejecutarán todas las sentencias relacionadas con este y todas las siguientes, incluido el default.

En ese caso, el ejemplo que pone no sería correcto, ya que en caso de ser 6, se ejecutaría la 7 "es fin de semana" pero también el default "Ese día no existe"

Me equivoco?

P.D.: Enhorabuena por el manual ;-)

periko

25/4/2009
del 1 al 7¿?
cuando usamos el getDate (para que nos devuelva el dia) nos lo da de 0 a 6, 0=domingo, 1=lunes... y asi sucesibamente, os pongo un ejemplo del switch y los dias de la semana

function Dia_semana(dia){
// dia es un entero que representa la día de la semana
// (0=domingo y 6=sábado)
var aux="";
switch (dia) {
case 0: aux="domingo"; break;
case 1: aux="lunes"; break;
case 2: aux="martes"; break;
case 3: aux="miércoles"; break;
case 4: aux="jueves"; break;
case 5: aux="viernes"; break;
case 6: aux="sábado"; break;
default: aux="Error";
}
return aux;
}

yaret

30/8/2009
Mal escrita la funcion switch
la declaracion switch esta mal escrita y puede confundir para los que tratamos de aprender por aqui tiene S mayuscula y va en Minuscula s

gracias

Aqui les dejo lo que hice dara el los dias de semana de acuerdo al horario de la pc

dia_de_la_semana=new Date();
fecha=dia_de_la_semana.getDay()
switch (fecha){
case 1:
document.write("Es Lunes")
break
case 2:
document.write("Es Martes")
break
case 3:
document.write("Es Miércoles")
break
case 4:
document.write("Es Jueves")
break
case 5:
document.write("Es viernes")
break
case 6:
case 7:
document.write("Es fin de semana")
break
default:
document.write("Ese día no existe")
}

sakura

14/4/2010
porfavor,me podrian decir como hacer este codigo
nesesito usar la setencia switch ,de una paleteria
donde haiga 3 tamaños, y cuando selecione el tamaño que me diga que sabor quiero que dan 3 sabores,y para tamaño pequeño que me diga 1 bolita de que sabor,para el mediano 2 y lso sabores de las bolitas y el ultimo helado grnade y te diga cuantas bollitas elegir el sabor que son 3 bolitas

serverino

09/10/2010
en respuesta a nicolás..
Pues sí te equivocás, ya que al llamar a la 6, se ejecuta la 7 y ésta tiene un break, por lo que no se ejecuta el default.

EMILY

25/6/2011
ayudenme
no entiendo este ejercicio:

Realizar un Programa en C, empleando la sentencia iterativa While, que muestre por pantalla los primeros 30 números naturales, pero a la inversa del 30 al 1.

Vile

27/12/2011
Switch de Javascript en PHP ¡?
Hola, tengo idea de como funciona el switch en javascript y html, pero no sé si puedo implementarlo de esa manera desde php, es decir, tengo la base de datos, hago una consulta ya saben $resultado = consulta de mysql, si encuentra al usuario listo lo imprimo en un echo bienvenido etc, si no está le imprimo que no se encuentra y así sucesivamente con los casos que se pueden dar a la hora de un logeo, ahora lo que me gustaría saber es si con puros echos me resulta más sencillo que con un switch ó visceversa, de ser el caso contrario, cómo puedo implementar ese switch? así de sencillo como enviar un alert?"todo esto lo hago desde php".

Gracias. ^^,

MrBunch

12/7/2012
¿Como puedo hacer?
switch (puntos) {
case "1": alert("piensas que es malo");
break;
case "2": alert("piensas que no es suficiente");
break;
case "3": alert("piensas que es regular");
break;
case "4": alert ("piensas que esta bien");
break;
case "5": alert ("piensas que esta excelente");
break;
default: alert ("Ha introducido datos erroneos");

}

tengo este codigo y quiero saber como puedo hacer que en caso de default despues del aviso vuelva a decirte que pongas un numero del 1 al 5 y lo haga hasta que no entroduzcas el numero correcto.

fernando

31/10/2012
hola buenos dias no se si algien me puede ayudar a resolver este codigo
he intentado con if else if y con switch pero aun no tengo resultados
<script>

var alto = document.multicargo.alto.value;
var largo = document.multicargo.ancho.value;
var ancho = document.multicargo.largo.value;
var result = eval(alto + multi + ancho + multi +largo)/6000;
var pesoreal = document.multicargo.Pesoreal.value;
var origen = document.multicargo.origen.value;
var destino = document.multicargo.destino.value;
function multicargocotiza(multi){
document.multicargo.pesovol.value = result
if(pesoreal ==''){
alert('Para poder cotizar todos los datos del paquete deven estar llenos gracias');
return;}
if(origen ==''){
alert('Para poder cotizar todos los datos del paquete deven estar llenos gracias');
return;}
if(destino ==''){
alert('Para poder cotizar todos los datos del paquete deven estar llenos gracias');
return;}
switch
{
case (origen =='Cancun',destino =='Amsterdam',result>pesoreal);

document.multicargo.resultado.value = (result)*10+200
break
case (origen =='Cancun', destino =='Amsterdam',result<pesoreal);

document.multicargo.resultado.value = (pesoreal)*10+200
break
}
</script>

agradezco su ayuda de antemano