La instrucción switch es una alternativa para remplazar los if/else if.
De todos modos se puede aplicar en ciertas situaciones donde la condición se verifica si es igual a cierto valor. No podemos preguntar por mayor o menor.
Con un ejemplo sencillo veremos cual es su sintaxis. Confeccionar un programa que solicite que ingrese un valor entre 1 y 5. Luego mostrar en castellano el valor ingresado. Mostrar un mensaje de error en caso de haber ingresado un valor que no se encuentre en dicho rango.
<html>
<head>
</head>
<body>
<script type="text/javascript">
var valor;
valor=prompt('Ingrese un valor comprendido entre 1 y 5:','');
//Convertimos a entero
valor=parseInt(valor);
switch (valor) {
case 1: document.write('uno');
break;
case 2: document.write('dos');
break;
case 3: document.write('tres');
break;
case 4: document.write('cuatro');
break;
case 5: document.write('cinco');
break;
default:document.write('debe ingresar un valor comprendido entre 1 y 5.');
}
</script>
</body>
</html>
Debemos tener en cuenta que la variable que analizamos debe ir después de la instrucción switch entre paréntesis. Cada valor que se analiza debe ir luego de la palabra clave 'case' y seguido a los dos puntos, las instrucciones a ejecutar, en caso de verificar dicho valor la variable que analiza el switch.
Es importante disponer la palabra clave 'break' al finalizar cada caso. La instrucciones que hay después de la palabra clave 'default' se ejecutan en caso que la variable no se verifique en algún case. De todos modos el default es opcional en esta instrucción.
Plantearemos un segundo problema para ver que podemos utilizar variables de tipo cadena con la instrucción switch.
Ingresar por teclado el nombre de un color (rojo, verde o azul), luego pintar el fondo de la ventana con dicho color:
<html>
<head>
</head>
<body>
<script type="text/javascript">
var col;
col=prompt('Ingrese el color con que se quiere pintar el fondo de la ventana (rojo, verde, azul)' ,'');
switch (col) {
case 'rojo': document.bgColor='#ff0000';
break;
case 'verde': document.bgColor='#00ff00';
break;
case 'azul': document.bgColor='#0000ff';
break;
}
</script>
</body>
</html>
Cuando verificamos cadenas debemos encerrarlas entre comillas el valor a analizar:
case 'rojo': document.bgColor='#ff0000';
break;
Para cambiar el color de fondo de la ventana debemos asignarle a la propiedad bgColor del objeto document el color a asignar (el color está formado por tres valores hexadecimales que representan la cantidad de rojo, verde y azul), en este caso al valor de rojo le asignamos ff (255 en decimal) es decir el valor máximo posible, luego 00 para verde y azul (podemos utilizar algún software de graficación para que nos genere los tres valores).