Propiedades Basicas Javascript: Funciones Booleanas

TUTORIAL REALIZADO POR PYRITE WOLF DE SOURCECODE

Este tuto te instruirá sobre el uso de las funciones booleanas (que reciben su nombre por este buen tipo, agradézcanle), que son aquellas que evalúan un condicionante. Si la condición se cumple, te dan un resultado, y si no... pues ya veremos qué sucede si no se cumple.


Las if (traducido del inglés como si condicional) son las bases del condicionamiento: son funciones que sólo se ejecutan si algo se cumple. Su sintáxis es la siguiente:

if (aquí tu condición) {
aquí las funciones que se ejecutarán al cumplirse tu condición
}

Pero ahora, ¿cómo demonios establecemos una condición? Pues hay varias formas. Puedes pedir que se cumplan ciertas condiciones en el CSS de un elemento con la función .css (ver Tuto #003). Por ejemplo, la siguiente función detectaría si el fondo del #wrap es #000000, y si se cumple, le añadirá una class particular:

if ($('#wrap').css('background', '#000000')) {
$(this).addClass('es-negro');
}

Otra cosa que podemos hacer es aprovechar algunas de las herramientas aprendidas en el tuto anterior: variables y operadores. Por ejemplo, si la variable a tiene un valor numérico de 100, #wrap recibirá una clase particular:

if (a===100) {
$('#wrap').addClass('a-es-cien');
}

Vale, ya puedes hacer que X suceda si Z se cumple, y si no se cumple no pasará nada. Pero... ¿Y si quieres añadir que suceda algo en el caso de que Z no se cumpla? Tranquilo, solo será cuestión de añadir un else (traducible burdamente como "caso contrario") a tu if. Su sintáxis es tan simple como la de un if a secas:

if (aquí tu condición) {
aquí las funciones que se ejecutarán al cumplirse tu condición
}
else {
aquí las funciones que se ejecutarán si tu condición no se cumple
}

Entonces, si retomamos los ejemplos previos. Supongamos que si a vale 100 (numérico) queremos que #wrap tenga la clase a-es-cien, PEEERO si esto no se cumple queremos que #wrap tenga la clase a-no-es-cien. El código sería:

if (a===100) {
$('#wrap').addClass('a-es-cien');
}
else {
$('#wrap').addClass('a-no-es-cien');
}

¿Ya veis? Sencillito. El tema es que a veces queremos probar varias condiciones, por ejemplo si a===100 que pase Z código, pero si a===50 que pase Y código, y si no es ninguna de las dos que pase Ñ código. Aquí es donde entra el else if ("...caso contrario, si..."). Se emplea de la misma forma que un if:

if (aquí tu condición) {
código a ejecutarse si tu condición se cumple
}
else if (aquí tu segunda condición) {
código a ejecutarse si tu segunda condición se cumple
}

Entonces, de acuerdo a esto, si seguimos el ejemplo dado para el tema (si a===100 que pase Z código, pero si a===50 que pase Y código, si no es ninguna de las dos que pase Ñ código), el código sería:

if (a===100) {
código Z
}
else if (a===50) {
código Y
}
else {
código Ñ
}

Uno puede repetir else ifs hasta la eternidad, pero hay formas más prácticas de cumplir esto...


Ya veis, cuando uno habla de practicidad siempre aparece el switch (cambio, cambiar, tecla, etc; tiene muchas traducciones). El switch usualmente se emplea para evaluar variables, ya que lo que hace es coger algo y compararlo con valores determinados, que sólo pueden ser texto o números. Si no se cumple un "caso" (una comparación), se pasa automáticamente a la siguiente. Veamos la sintáxis básica y un ejemplo:

switch (cosa a comparar) {
case valor 1:
código a ejecutar si se cumple el valor 1
break;
case valor 2:
código a ejecutar si se cumple el valor 2
break;
case valor 3:
código a ejecutar si se cumple el valor 3
break;
default:
valor si no se cumple ningún caso
}

Entonces. Donde dice cosa a comparar colocaremos la variable o el elemento a comparar con los diferentes valores. Donde dice valor 1, valor 2, valor 3 se colocan los valores con los que se comparará el elemento o variable señalado al comienzo. Se pueden añadir tantos casos como se deseen, no hay un límite. Finalmente, al final de los casos aparece default: un código que correrá si no se cumple ningún caso. Si no lo necesitas, puedes prescindir de él.

Tomemos el último ejemplo dado: si a===100 que pase Z código, pero si a===50 que pase Y código, si no es ninguna de las dos que pase Ñ código. Os lo memorizareis (?).

switch (a) {
case 100:
código Z
break;
case 50:
código Y
break;
default:
Código Ñ
}

¿Ya veis? Más que simple, y os ahorra la chance de meter la pata con un if o tal.

Este tuto os abrirá muchas puertas. Combinado con el anterior, permite hacer todo tipo de locuras: slideshows, arrays locos de cosas felices, skins que varían según el grupo de la persona... de todo.
Nos vemos en el próximo tuto cualquier duda, recuerden dejar mensaje aquí mismo.