En esta entrada iba a ver ciertas cosas que no debes hacer con javascript para que tu código sea más legible, más ligero, y evitar errores de todo tipo. Como unos de los más importantes tenía que ver con las comparaciones, pues aprovecho (ya que las comparaciones son uno de los conceptos fáciles de entender).
Antes de nada, te recomiendo leer las anteriores entradas[1,2] para coger una idea básica y saber cómo probar el código con la consola.
if y else
Son dos palabras simples en inglés y no tienen más dificultad. La sintaxis es algo parecido a esto:
if(/*Condición*/){
//código a ejecutar si la condición se cumple
}
/*a partir de aquí es opcional, no tiene que haber un "else" siempre ni "else if"*/
else if (/*mi segunda condición*/){
//codigo a ejecutar si se cumple otra condición
}
else {
//código a ejecutar si no se cumple ninguna
}
Pero ¿cómo podemos usar condiciones? Para usar condiciones podemos usar comparadores, o al fin y al cabo cualquier cosa que pueda retornar algo que sea falso (false, null, "", undefined
) o verdadero (true
, o cualquier cosa que exista).
Comparadores
A continuación os pongo una lista de los comparadores más usados:
==
y!=
: Comparan igualdad o desigualdad con transformación de tipos No uses == y !=.===
y!==
: Lo mismo, pero estricto, es decir, sin cambiar el tipo de los objetos comparados.>
y<
: Mayor o menor, para comparaciones numéricas, básicamente.>=
y<=
: Mayor o igual y menor o igual.typeof
: Devuelve el tipo del objeto evaluado.typeof "Hola" //devuelve "string"
A parte de esos hay otros, pero para entender los conceptos de hoy nos valen.
Ejemplo simple:
Vamos a ver un ejemplo simple, comprobar si una variable es mayor, igual o menor que 5:
var miVariable = 4;
if ( miVariable === 5 ){
alert("miVariable ("+ miVariable + ") es igual a 5.");
} else if (miVariable > 5){
alert("miVariable ("+ miVariable + ") es mayor que 5.");
// Si no es igual ni mayor, es menor ;)
} else {
alert("miVariable ("+ miVariable + ") es menor que 5.");
}
Vale, con eso deberías saber hacer comparaciones simples, pero vamos a agruparlas con &&
(algo así como «y además») y ||
(podría traducirse como «o»), y a negar con !
.
Por ejemplo, vamos a ver cómo saber si se tiene instalado jQuery, en una web, y otras cosas no muy difíciles.
// Recordáis la primera entrada donde hablé de objetos?
// Pues window es el objeto global desde donde se tienen aceso a todos los métodos.
if( ! window.jQuery ){
alert("No tienes instalado jQuery");
}
// Aquí comprobamos con typeof si nuestro navegador soporta el uso de document.querySelector
if( typeof document.querySelector !== "function" ){
alert("Usas un navegador antiguo, que no dispone de la función document.querySelector");
}
// Vamos a comprobar si el nombre de una persona es "Javier" o "Ana"
var elNombre = "Ana";
// Si elNombre es "Javier", o "Ana", mostramos el nombre.
if( elNombre === "Javier" || elNombre === "Ana"){
alert("Hola, ahora se que te llamas Javier o Ana")
}
Forma abreviada de la comparación:
En JavaScript (y en otros muchos lenguajes) hay otra forma de hacer comparaciónes de una forma más abreviada, usando la interrogación y los dos puntos. La sintaxis es (comparación) ? /*Código si es verdadero*/ : /*Código si es falso*/;
. No tiene mucho más, el uso es el mismo.
Ponerlo en práctica
Vamos a hacer uso de todo esto para mostrar un mensaje dependiendo de la cantidad de dinero que quieras tener (es lo primero que se me ha ocurrido, me acaban de dar la paga ). Nos hará falta un poco de HTML:
<input type="text" id="dinero" placeholder="Introduce aquí el dinero que te gustaría tener en el bolsillo:"></input>
<div id="mensaje"></div>
<!--
No debreríamos de usar "onclick", pero ya veremos por qué.
Si te interesa mucho, mira el código de la página justo debajo del botón para ver cómo lo he hecho
(click derecho, inspeccionar elemento, el script que hay justo debajo ;))
-->
<button onclick="comprobarDinero()">Púlsame</button>
<script type="text/javascript">
var elDinero = document.getElementById("dinero"),
elMensaje = document.getElementById("mensaje");
function comprobarDinero(){
// Value es exclusivo de ciertos elementos como "input[type=text]", "textarea",...
var texto = elDinero.value,
// Con parseInt convertimos una "string" en un número sin decimales (si puede)
dinero = parseInt(texto),
// Éste será el texto que mostraremos
textoMostrar;
// isNaN devuelve false si el número es válido, y true si no.
if( isNaN(dinero) ){
textoMostrar = "Por favor, introduce un número...";
// Menos de 20 euros o más
} else if (dinero <= 20) {
textoMostrar = "Te conformas con poco, no es una cualidad que abunde..."
// entre 20 y 200 €
} else if (dinero <= 200){
textoMostrar = "No es demasiado, pero " + dinero + "€ son una cantidad considerable."
// Entre 200 y 3000
} else if(dinero <= 3000){
textoMostrar = "Con " + dinero + "€ yo me iba de vacaciones ahora mismo."
// 3000 hasta 10000
} else if( dinero <= 10000){
textoMostrar = "Yo también quisiera tener " + dinero + "€ aquí mismo."
// 10000 hasta infinito
} else {
textoMostrar = "Suerte para encontrar pronto " + dinero + "€. Tal y como están las cosas la necesitarás."
}
// Mostramos el texto:
elMensaje.innerHTML = textoMostrar;
}
</script>
- 1No uses los comparadores == y !=, provocan ciertos errores por conversión de tipos que no ocurren usando === y !==. (P.Ej:
1 == "1"
mientras que1 !== "1"
)