Condicional if
La palabra «if«‘ es el ‘si‘ condicional en inglés. La utilizamos en frases como: «saldría a pasear si no lloviera». Es decir, si se cumpliera la condición «no llover», entonces realizaríamos la acción «salir a pasear». En Javascript ( y en general en los lenguajes de programación) esta instrucción «if» juega el mismo papel.
Cuando elaboramos un algoritmo, es decir, desglosamos en pasos detallados y ordenados una tarea o proceso, a menudo tenemos la necesidad de introducir condiciones para contemplar todas las posibilidades que pueden darse en dicho proceso. Lo más directo es verlo con un ejemplo.
Supongamos que desarrollamos un script para mostrar el precio de una entrada a un concierto que se vende online a través de nuestra Web. La entrada cuesta 50 €, pero si el comprador tiene un código de descuento («Spring7864») y lo introduce en el formulario de compra, se le aplicará un descuento de 15 €. El algoritmo en ese punto sería:
- Procesamos los datos del formulario
- ¿Ha introducido el código de descuento «Spring7864» –> se aplicará un descuento de 15€
- Calcular el precio final: Precio – descuento
que en código Javascript podría ser:
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> var PVP= 50; var descuento = 0; var precioFinal; var codDescuento = prompt("Si tienes un código de descuento, escríbelo aquí: "); //Ahora incluímos un condicional, que se ejecutará solo si se cumple la condición que hemos puesto if (codDescuento == "Spring7864") { descuento = 15; } precioFinal = PVP - descuento; //si no se cumplió (codDescuento == "Spring7864"), el valor de descuento será '0' document.write("Precio= " + precioFinal + " €"); </script> |
Para simplificar, el formulario se ha reducido a solicitar el código descuento a través de una sentencia ‘prompt’.
Nota: prueba este código en el editor online introduciendo diferentes valores. Verás que cualquier pequeña diferencia a la hora de escribir el código (teclear ‘s’ en vez de ‘S’ o por el contrario, todo en mayúsculas), hará que no se aplique el código de descuento. Hay varias formas de evitar ésto si no queremos ser tan estrictos. Consulta el cuadro al final de la página donde te damos pistas y la solución para hacerlo de dos maneras distintas.
Como ves en el ejemplo, tras el if, comprobamos la condición dentro de un paréntesis y si se cumple, se ejecuta la instrucción ‘descuento = 15’. El interprete de Javascript traduce esta sentencia por:
«si el valor de codDescuento es igual (==) a ‘Spring7864′, haz los pasos que están entre las dos llaves {…..}, es decir, asigna el valor ’15’ a la variable descuento y continua luego con el resto de instrucciones del programa (en este caso, el cálculo de precioFinal).
Si no cumple la condición, no tengas en cuenta las instrucciones que hay entre las llaves {…} y sigue con el resto de instrucciones del programa (cálculo del precioFinal).»
Sintaxis de if
De forma general, si incluimos más de una instrucción a ejecutar, la sentencia if tiene la siguiente sintaxis:
1 2 3 4 5 6 |
if (condición) { instruccion_1; instrucción_2; .................... instrucción_n; } |
En la que observamos que:
- La condición se encierra entre paréntesis (), separada por un espacio en blanco de la palabra ‘if’ y sin finalizar con un ‘ ; ‘
- El bloque de instrucciones, que se ejecuta solo si se cumple la condición, lo incluimos entre dos llaves de apertura y cierre ‘ { ‘ y ‘ } ‘ para indicar el inicio y final del bloque. Las llaves en sí no llevarán el ‘ ; ‘ de final de sentencia, pero sí cada instrucción que esté allí contenida.
No hay un estilo único para escribir esta sentencia. Nosotros hemos utilizado un formato muy habitual para que el código quede más claro, sobre todo si la condición es extensa y/o hay varias instrucciones. Hemos dado algo de sangrado (espacios) al bloque de instrucciones, escribiendo cada una en una nueva linea y colocando la llave final en una línea aparte. No es obligatorio y habría funcionado igual escribiendo todo en una sola linea:
if (codDescuento == "Spring7864") {descuento = 15);}Ejercicio
Comprobar validez del código descuento: ¿Has intentado comprobar el código de descuento de forma que aunque el usuario escriba minúsculas o mayúsculas en «Spring7864″ siga cumpliéndose la condición de igualdad?
Si no lo has resuelto, te damos dos pistas, y si tampoco lo consigues con ellas, puedes ver la solución. Solo tienes que pinchar en cualquiera de las dos barras de abajo para que se desplieguen y muestren el contenido:
[restrict paid=true]