martes, mayo 15, 2012

Tutorial de desarrollo web, Parte XXXII: Sentencia condicional "Switch"

Por mucho que la semana pasada haya dicho que ya sabéis todas las cosas básicas para programar, eso no significa que ya seáis expertos programadores. Lo siento, pero nada más lejos de la realidad, hoy empezamos ya a ver una serie de nuevos elementos que, como podréis comprobar, se podrán "traducir" a lo que ya sabemos hasta ahora, pero usándolo de estas nuevas maneras nos ahorrarán tiempo. Pero, antes de comenzar, los ejercicios de la semana pasada.
Bien, recordaréis que hace dos semanas dimos la sentencia condicional, en la cual podíamos decirle a nuestra aplicación que se ejecutara de una manera u otra dependiendo de si cumplía una determinada condición. De esta manera, podríamos ver uno de estos dos ejemplos:

// Ejemplo 1
if(edad > 18)
{
document.write("Bienvenido a nuestra página.");
}

// Ejemplo 2
if(edad > 18)
{
document.write("Bienvenido a nuestra página.");
}
else
{
document.write("Necesista autorización paterna para acceder.");
}

Antes de continuar, quiero aclarar que esas dos barras ("//") que estoy incluyendo en muchos fragmentos de código son comentarios en JavaScript (como cuando vimos los comentarios de HTML y de CSS). En JavaScript podemos hacer estos comentarios (que duran, como hemos visto hasta ahora, desde el momento en que se introducen hasta el final de la línea) o del mismo modo que en CSS (/* Los comentarios se incluirían aquí en medio */). Como recordaréis, los comentarios eran útiles no sólo para recordar qué estamos haciendo en ese momento, sino también para poder localizar facilmente distintas partes de un documento. Y ahora que estamos programando, le encontraremos mucha más utilidad.
Como podemos ver en esos ejemplos, podemos hacer sentencias condicionales en las que, si se cumple una condición ocurra algo, sin que ocurra nada en caso de no cumplirse la condición (ejemplo 1), o sentencias en las que, dependiendo de si se cumple la condición, ocurra una cosa o la otra (ejemplo 2). Por supuesto, gracias a la segunda manera de la estructura podríamos también  hacer algo así:

if(edad > 18)
{
document.write("Bienvenido a nuestra página.");
}
else if (edad < 2)
{
document.write("Usted es demasiado joven para navegar en internet.");
}
else
{
document.write("Necesita autorización paterna para acceder.");
}

Recordemos que hace dos semanas dijimos que las llaves ("{}") podían ser ignoradas en caso de que sólo se incluyera una sentencia dentro del "if" o del "else". Como una estructura condicional entera se considera una única sentencia (aunque contenga muchas sentencias en su interior, están agrupadas en una sóla) podemos crear lo que llamamos el "else if", en el cual creamos una segunda condición, que sólo se evaluará si la primera condición ha fallado. Veámoslo parte por parte:
  1. Para empezar, nuestra aplicación evalúa si "edad" es mayor que 18. En caso de ser positivo, el programa accederá al contenido del "if" y escribirá "Bienvenido a nuestra página". Siguiendo leyendo, el programa verá que hay un "else", pero como se ha cumplido la condición, decide saltarse el contenido de dicho "else". El contenido de dicho "else" es el segundo "if", así que saltará hasta el final del ejemplo, ignorándolo.
  2. En caso de que "edad" sea menor de 18, la aplicación saltará al "else" y se encontrará en este caso con un segundo "if", donde tendrá que evaluar si "edad" es menor que 2. En caso de ser así, entrará, escribirá "Usted es demasiado joven para navegar en internet." y se saltará el "else" que le corresponde, terminando la ejecución.
  3. Finalmente, si "edad" es mayor que 2, también se saltaría esta segunda condición y pasaría al segundo "else" (que corresponde a este segundo "if"), escribiendo "Necesita autorización paterna para acceder.".
Una práctica habitual entre programadores, que además la mayoría de los editores suelen ayudar a hacer, es mostrar la jerarquía mediante espacios o tabulaciones. Por ejemplo, el código anterior podría quedar así:

if(edad > 18)
{
   document.write("Bienvenido a nuestra página");
}
else if(edad < 2)
     {
         document.write("Usted es demasiado joven para navegar en internet.");
     }
     else
     {
         document.write("Necesita autorización paterna para acceder.");
     }

De este modo sabemos a qué "if" pertenece cada "else". Este caso no es muy habitual que se jerarquice así, ya que el "else if" (o "elseif" en algunos lenguajes) es ya considerada una estructura por sí misma, pero si os ayuda a aclararos, estaría bien colocarlo así.
Bien, de este modo, que con un poco de imaginación podríais haber inventado vosotros, está bien en situaciones en las que hay tres o cuatro situaciones. Pero, ¿os imagináis el coñazo que debe ser ir haciendo "else if" para una aplicación que, por ejemplo, reciba un número, y escriba el mes del año que le equivale? Por suerte, para esto tenemos una sentencia conocida como switch.
El "switch" es una sentencia condicional que evalúa el valor de una variable y, dependiendo de su valor, ejecutará unas instrucciones u otras. Por ejemplo:

var x = 3;


switch(x)
{
case 1:
document.write("Uno");
break;
case 2:
document.write("Dos");
break;
case 3:
document.write("Tres");
break;
default:
document.write("Número muy grande");
break;
}

No creo que les sea muy difícil deducir cómo funciona esta estructura, pero vamos a empezar a explicar. La estructura "switch" coge el valor de una variable (en nuestro caso "x") y lo evalúa. En nuestro ejemplo, la variable "x" vale 3, de modo que el "switch" saltará al caso 3 y ejecutará todas las instrucciones que se encuentren en su interior. En este caso, al entrar en el caso 3, el documento escribirá "Tres" y luego, al encontrarse con la instrucción "break" (la cual obliga a salir de la sentencia en la que se encuentra), se para la ejecución del "switch" y se continuará ejecutando lo que haya después de la llave de cerrado de esta sentencia.
Destacar que el "break" es importante ya que, en caso de no existir, el navegador seguiría ejecutando las instrucciones que encuentre debajo, aunque pertenezcan a otro caso. En nuestro ejemplo, si faltara el "break", el documento escribiría "Número muy grande" después de "Tres", ya que es la siguiente instrucción que se encuentra. En algún caso, esto puede resultarnos interesante, si tal vez queremos que varios casos hagan lo mismo, pero en principio recomiendo no olvidarse nunca del "break".
Finalmente hay que destacar el caso "default" el cual vendría a ser como el "else" del "switch": si se introduce un valor no contemplado por ninguno de los casos, se ejecutará lo que contenga el "default".
Para intentar entender mejor el "switch", voy a escribir la sentencia "if" equivalente al anterior código:

var x = 3;


if(x == 1)
{
document.write("Uno");
}
else if (x == 2)
{
document.write("Dos");
}
else if (x == 3)
{
document.write("Tres");
}
else
{
document.write("Número muy grande");
}

Como veis, usando la sentencia "switch" nos hemos ahorrado mucho lío de código con muchos "if" anidados. Y habrá casos en que esto sea una lista mucho más larga, por lo que será mucho más cómodo usar la sentencia "switch".
¿Cuándo usar "switch" y cuándo usar "if"? Realmente eso será a elección del usuario, pero es evidente que hay momentos en que el "switch" no se podrá usar. Como habéis visto hasta ahora, el "switch" sólo sirve para valores exactos, de modo que si queremos evaluar si un valor es "mayor" o "menor" que otro, la sentencia "switch" será bastante inútil.
También cabe destacar que la sentencia "switch" también admite otros valores distintos a los enteros (que son los que hemos usado hasta ahora). Por ejemplo, haciendo un caso inverso a lo que hicimos antes:


var x = 'Tres';


switch(x)
{
case 'Uno':
document.write(1);
break;
case 'Dos':
document.write(2);
break;
case 'Tres':
document.write(3);
break;
default:
document.write("Número muy grande");
break;
}


Simpático, ¿no?
Bien, pues de momento eso es todo lo que tenemos que saber sobre los "switch". La semana que viene empezaremos a ver alguna forma alternativa de los bucles.

EJERCICIO


Mencioné a lo largo del artículo un posible ejercicio en el que, al introducir un número, el ordenador devolviera el nombre del mes. ¿Os parece muy fácil? Bueno, el ejercicio que les voy a proponer es algo más difícil que esto:
A través de tres ventanas de prompt deberemos pedir al usuario un día del mes, un mes (del 1 al 12) y un año. En caso de que uno de los tres datos esté mal deberá salir un mensaje que diga "Escriba una fecha correcta", pero si está bien, deberá decir "Día DD del MMMM del YYYY" sustituyendo "DD" con el número del día, "MMMM" con el nombre del mes y "YYYY" con el año.
A la hora de comprobar si una fecha es correcta, recordemos que hay meses con 28, 30 y 31 días. Además, podemos aprovechar el ejercicio de la semana pasada para comprobar si el año introducido es bisiesto y, por tanto, febrero tiene 29 días.

Y con esto termina otra semana más de tutorial. La semana que viene, ¡más!

No hay comentarios: