martes, mayo 01, 2012

Tutorial de desarrollo web, Parte XXX: La sentencia condicional. Operadores lógicos

¡Trigésima entrada del curso de desarrollo web! Guau, ¿quién lo hubiera dicho cuando hice aquella encuesta a finales de septiembre del año pasado? Bueno, ¡que la máquina no pare! Aunque, antes de empezar, aquí van las resoluciones a los ejercicios de la semana pasada. Aunque, como ocurría en el curso de HTML y CSS, es posible que hayáis visto soluciones alternativas a la mía. Si funcionan correctamente, ¡muy bien hecho!
Hasta ahora, las aplicaciones que hemos ido creando con JavaScript han sido todas muy lineales. Hemos podido alterar de alguna manera los distintos resultados que van apareciendo por pantalla, pero nos hemos reducido a escribir un valor u otro, todo dependiendo de qué valor tengan las variables. Sin embargo, de momento, parece que, salvo por mostrar distintos textos dependiendo del valor que le hayamos dado a las variables, los programas se ejecutan siempre de manera completamente idéntica. Sin embargo, a partir de esta entrega, esto no será así.
Una de las estructuras básicas que cualquier lenguaje de programación de alto nivel posee es la llamada sentencia condicional. Esta sentencia evaluará una condición y, dependiendo de su resultado, ejecutará unas instrucciones u otras. Veámoslo más fácil con un ejemplo. Creemos un documento nuevo y, en el cuerpo, introduzcamos lo siguiente:

<script type="text/javascript">
var edad = prompt("Introduzca su edad:");
if(edad < 18)
{
document.write("Necesita autorización paterna.");
}
else
{
document.write("Bienvenido a nuestra página.");
}
</script>

Al ejecutar este código nos pedirá que introduzcamos una edad. Si introducimos cualquier número menor que 18 se nos escribirá en pantalla "Necesita autorización paterna". Si, por contra, escribimos un número mayor que 18 (o alguna letra o símbolo, por razones que explicaré luego) nos aparecerá el mensaje "Bienvenido a nuestra página". Y así de simple funciona la sentencia condicional "if". Pero ahora toca explicarlo paso a paso:
  • En primer lugar hemos de escribir la palabra reservada if seguida de una condición que irá entre paréntesis. Las condiciones pueden ser muy variadas y hablaremos sobre ellas más tarde.
  • En segundo lugar, encerradas entre llaves ("{" y "}") irán las instrucciones. Las llaves pueden ser prescindibles en casos como este, en los que sólo se va a ejecutar una instrucción si se cumple dicha condición, pero yo recomiendo ponerlas siempre, ya que puede llevar a error.
  • No es obligatorio, pero en caso de que queramos que nuestro programa reaccione de una manera distinta si no se cumple la condición dicha en el "if", deberemos escribir la palabra reservada else y luego también entre llaves poner las instrucciones. Pero habrán ocasiones en que, si no se cumple la condición, no querremos que nuestro programa haga nada en su lugar, por lo que podremos no escribir el "else".
Esto parece muy sencillo, ¿verdad? Pues es que lo es. Sin embargo, tal vez el mayor lío podemos encontrarlo con las condiciones, por lo que tendremos que aprendernos los operadores lógicos que usaremos en JavaScript.
En primer lugar hemos de saber lo que es una operación lógica. Al igual que, con números podemos realizar distintas operaciones, como sumar, restar, dividir o multiplicar, llamadas operaciones aritméticas (de las cuales ya hablaremos en un futuro capítulo), con los valores booleanos ("verdadero" o "falso") podremos realizar una serie de operaciones llamadas "operaciones lógicas" que, tras una serie de "sumas" o "restas" de valores booleanos, nos dará un valor booleano final. Veamos los operadores lógicos más básicos:
  • La igualdad compara dos valores, que pueden ser de cualquier tipo (String, entero, booleano...) y, si ambos tienen el mismo valor, devuelven "verdadero". El valor se representa con dos símbolos iguales ("==") para diferenciarlo de la asignación ("="). Por ejemplo:
  • var igualdad = 4 == 2;
  • En ese caso, la variable "igualdad" valdrá "false" ya que 4 no es igual a 2. Sin embargo, en el siguiente caso:
  • var igualdad = 4 == 4;
  • El valor de "igualdad" sería "true". De este modo, en una sentencia "if" podríamos hacer algo como lo siguiente:
  • if(numero == 4)
  • {
  • document.write("El número introducido es 4");
  • }
  • Y ese texto sólo se mostraría en caso de que la variable "numero" contenga el valor "4", ya que para que se cumpla una condición de una sentencia "if" el valor resultante de la operación lógica debe ser verdadero.
  • La identidad es muy parecida a la igualdad, pero compara que los valores pertenezcan al mismo tipo. Por ejemplo, con la igualdad, si comparamos el entero 4 con el caracter '4', nos daría "verdadero". Sin embargo, con la identidad, no. Para diferenciarla, se representa con tres símbolos iguales ("===") Veamos algunos ejemplos
  • var igualdad = 4 == '4'; // Resultado "true"
  • var identidad = 4 === '4'; // Resultado "false"
  • var igualdad = 4 == 4; // Resultado "true"
  • var identidad = 4 === 4; // Resultado "true"
  • Además, podemos comparar valores para comprobar cómo son en comparación con otro. Los operadores mayor que (">") y menor que ("<") sirven para dicho propósito. Cabe destacar que para que estos operadores devuelvan "verdadero", ambos números deben ser distintos en primer lugar. Pongamos ejemplos para entenderlo:
  • var comparacion = 4 > 2; // Resultado "true"
  • var comparacion = 4 < 2; // Resultado "false"
  • var comparacion = 2 > 4; // Resultado "false"
  • var comparacion = 2 < 4; // Resultado "true"
  • var comparacion = 4 < 4; // Resultado "false"
  • var comparacion = 4 > 4; // Resultado "false"
  • Ya que los anteriores comparadores no aceptaban si un número era igual a otro, existen otro par de operadores que nos podrán ser útiles en alguna ocasión, el mayor o igual a (">=") y el menor o igual a ("<=") que, como sus nombres indican, son iguales a los anteriores dos sólo que también devuelven verdadero en el caso de que ambos valores comparados sean iguales.
  • var comparacion = 4 >= 2; // Resultado "true"
  • var comparacion = 4 <= 2; // Resultado "false"
  • var comparacion = 2 >= 4; // Resultado "false"
  • var comparacion = 2 <= 4; // Resultado "true"
  • var comparacion = 4 <= 4; // Resultado "true"
  • var comparacion = 4 >= 4; // Resultado "true"
  • Además, en contraposición a los operadores igual e idéntico tenemos sus opuestos por completo, el no igual ("!=") y el no idéntico ("!=="). El primero devolverá "verdadero" sólo en el caso de que ambos tengan valores distintos y "falso" en el caso de que ambos sean iguales, sin importar el tipo. En el segundo caso, devolverá "falso" sólo en el caso de que ambos tengan el mismo valor Y sean del mismo tipo. Vamos, exactamente el contrario:
  • var noIgualdad = 4 != 4; // Resultado "false"
  • var noIdentidad = 4 !== 4; // Resultado "false
  • var noIgualdad = 4 != 2; // Resultado "true"
  • var noIdentidad = 4 !== 2; // Resultado "true"
  • var noIgualdad = 4 != '4'; // Resultado "false"
  • var noIdentidad = 4 !== '4'; // Resultado "true"
Estos no son todos los operadores lógicos, pero para los próximos, mejor que nos sentemos a explicar cómo funcionan antes de comenzar. De momento hemos comprobado que con los operadores que tenemos podemos comparar dos variables entre ellas (sean del tipo que sean, aunque aquí hayamos usado sólo números y algún caracter número, podemos comparar incluso Strings con estos operadores), pero, ¿qué ocurre si queremos comparar varias condiciones? En programación existe esta posibilidad usando las llamadas puertas lógicas. Veámosla:
  • La primera de las puertas lógicas es la puerta lógica AND. Quien conozca un poco de álgebra discreta sabrá que esta puerta lógica sólo devuelve "verdadero" en caso de que ambas premisas sean verdaderas. En JavaScript se representa por dos "ampersands" (&&) y aquí van algunos ejemplos:
  • var puertaAnd = 4 == 4 && 3 == 3; // "true" AND "true" = "true"
  • var puertaAnd = 4 == 4 && 3 == 2; // "true" AND "false" = "false"
  • var puertaAnd = 4 == 3 && 3 == 3; // "false" AND "true" = "false"
  • var puertaAnd = 4 == 3 && 3 == 2; // "false" AND "false" = "false"
  • Estas operaciones, evidentemente, también pueden incluirse dentro de la condición de un "if".
  • La segunda de las puertas lógicas es la puerta OR. Esta puerta es casi la contraria que la anterior, ya que sólo devolverá "false" en caso de que ambas premisas sean falsas, devolviendo verdadero en todos los demás casos. En JavaScript se presenta con dos plecas (||).
  • var puertaOr = 4 == 4 || 3 == 3; // "true" OR "true" = "true"
  • var puertaOr = 4 == 4 || 3 == 2; // "true" OR "false" = "true"
  • var puertaOr = 4 == 3 || 3 == 3; // "false" OR "true" = "true"
  • var puertaOr = 4 == 3 || 3 == 2; // "false" OR "false" = "false"
  • Finalmente, la última de las puertas lógicas que nos interesan (ya que las demás no se usan en JavaScript) es la puerta NOT, cuyo uso es bastante distinto del resto. Esta puerta niega cualquier valor al que se anteponga y se representa con una exclamación ("!").
  • var puertaNot = !(4 == 4) // NOT "true = "false"
  • var puertaNot = !(4 == 4) || 3 == 3; // NOT "true" OR "true" = "false" OR "true" = "true"
  • var puertaNot = !(4 == 4 || 3 == 3); // NOT ("true" OR "true") = NOT "true" = "false"
Sobre todo con esta última puerta hemos podido comprobar que, en las operaciones lógicas, igual que las operaciones aritméticas, el uso de los paréntesis puede cambiar completamente el resultado. Por eso, para terminar el artículo de esta semana, vamos a ver el orden de los operadores y cómo los paréntesis repercuten en ellos.
  1. El operador con mayor prioridad es la puerta lógica NOT y será lo primero que el ordenador aplicará en caso de encontrarlo, así que tendremos que tener muy en cuenta eso.
  2. Luego vienen todas las comparaciones, tanto de igualdad e identidad, como los "mayores que" y "menores que".
  3. Finalmente tenemos las puertas lógicas AND y OR.
Este orden será variado, como les digo, por los paréntesis, ya que, al igual que ocurre en las operaciones aritméticas, se deben resolver los paréntesis desde adentro hacia afuera. De este modo, como vimos hace un momento, no es lo mismo:

!(4 == 4) || 3 == 3

que

!(4 == 4 || 3 == 3)

En el primer caso, lo primero que resolveríamos sería, como siempre, el paréntesis. Como 4 es igual a 4, al resolver esa parte, nos quedaría:

!true || 3 == 3

A continuación y como vimos hace un momento en el orden de los operadores, debemos operar la puerta lógica NOT. Y al negar un valor "verdadero", este se convierte en "falso".

false || 3 == 3

Lo siguiente que tenemos que resolver, según el orden de operadores serán las comparaciones, en este caso la única que nos queda (ya que la otra, al estar dentro de un paréntesis, la resolvimos primero). De este modo, al ser los dos valores iguales, el resultado sería:

false || true

Finalmente tocan el resto de puertas lógicas, en este caso la puerta OR. Como, para que la puerta OR nos dé "verdadero" sólo necesita que uno de los valores a comparar sea verdadero, el resultado de esta operación es:

true

Ahora miremos la otra operación, ya sin explicarla tan detalladamente:

!(4 == 4 || 3 == 3)
!(true || true)
!true
false

Como vemos, el hecho de que el paréntesis se haya extendido hasta el final de la línea, que en principio parece casi idéntica, provoca que el resultado sea completamente distinto.

Y eso de momento es todo, ahora vienen, como siempre, los ejercicios para la próxima semana, cuando veremos otro tipo de sentencia y veremos también los operadores aritméticos. Les prometo que, a partir de la semana que viene, la programación empezará a ser realmente interesante, ya que podremos empezar a hacer cientos de cosas.

EJERCICIOS

Bien, esta semana tengo ganas de ser malo. Sobre todo considerando que puedo mandaros problemas de álgebra discreta. Mi proposición para esta semana es hacer una serie de sentencias "if" que se activen sólo en caso de que:
  • La variable "edad" esté comprendida entre los 18 y 25 años.
  • Dos valores introducidos por el usuario sean idénticos.
  • Los dos valores introducidos por el usuario no pueden tener más de 5 caracteres.
  • La variable "edad" NO puede estar comprendida entre los 18 y los 25 años.
Existen varias maneras de hacer cada uno, la semana que viene intentaré colocar todas las versiones que se me ocurran. Pero, como siempre, si funcionan correctamente, ¡significa que están bien!

No hay comentarios: