Estructura IF en Javascript

  • Por
Vemos cómo trabajar con la estrutura de control IF en Javascript.

En el Manual de Javascript de DesarrolloWeb.com ya empezamos a explicar lo que son las estructuras de control. En el presente artículo vamos a dedicarnos a mostrar cómo funciona la sentencia if, que es la estructura más habitual de las utilizadas para tomar decisiones en programas informáticos.

IF es una estructura de control utilizada para tomar decisiones. Es un condicional que sirve para realizar unas u otras operaciones en función de una expresión. Funciona de la siguiente manera, primero se evalúa una expresión, si da resultado positivo se realizan las acciones relacionadas con el caso positivo.

La sintaxis de la estructura IF es la siguiente.

Nota: Todas las estructuras de control se escriben en minúsculas en Javascript. Aunque algunas veces para destacar el nombre de la estructura la podamos escribir en el texto del manual con letras mayúsculas, en el código de nuestros scripts siempre tenemos que ponerlo en minúsculas. En caso contrario recibiremos un mensaje de error.

if (expresión) {
   //acciones a realizar en caso positivo
   //...
}


Opcionalmente se pueden indicar acciones a realizar en caso de que la evaluación de la sentencia devuelva resultados negativos.

if (expresión) {
   //acciones a realizar en caso positivo
   //...
} else {
   //acciones a realizar en caso negativo
   //...
}


Fijémonos en varias cosas. Para empezar vemos como con unas llaves engloban las acciones que queremos realizar en caso de que se cumplan o no las expresiones. Estas llaves han de colocarse siempre, excepto en el caso de que sólo haya una instrucción como acciones a realizar, que son opcionales.

Nota: Aunque las llaves para englobar las sentencias a ejecutar tanto en el caso positivo como negativo sean opcionales cuando queremos ejecutar una única sentencia, la recomendación es colocarlas siempre, porque obtendremos así un código fuente más claro. Por ejemplo:

Veamos el código siguiente:

if (llueve)
   alert("Cae agua");

Sería exactamente igual que este código:

if (llueve){
   alert("Cae agua");
}

O incluso, igual a este otro:

if (llueve) alert("Cae agua");

Sin embargo, cuando utilizamos las llaves, el código queda bastante más claro, porque se puede apreciar en un rápido vistazo qué instrucciones están dependiendo del caso positivo del if. Esto es un detalle que ahora quizás no tenga mucha importancia, pero que se agradecerá cuando el programa sea más complejo o cuando varios programadores se encarguen de tocar un mismo código.

Otro detalle que salta a la vista es el sangrado (margen) que hemos colocado en cada uno de los bloques de instrucciones a ejecutar en los casos positivos y negativos. Este sangrado es totalmente opcional, sólo lo hemos hecho así para que la estructura IF se comprenda de una manera más visual. Los saltos de línea tampoco son necesarios y se han colocado también para que se vea mejor la estructura. Perfectamente podríamos colocar toda la instrucción IF en la misma línea de código, pero eso no ayudará a que las cosas estén claras.

Nota: Nosotros, así como lo haría cualquier persona con cierta experiencia en el área de programación, aconsejamos que se utilicen los sangrados y saltos de línea necesarios para que las instrucciones se puedan entender mejor. Quizás el día que realizas un código tengas claro qué has hecho y por qué es así, pero dentro de un mes, cuando tengas que releer ese código, quizás te acuerdes menos de lo que hiciste en tus scripts y agradecerás que tengan un formato amigable para que se puedan leer con facilidad por las personas. Si trabajas en equipo estas recomendaciones serán todavía más importantes, puesto que todavía es más complicado leer código fuente que han realizado otras personas.

Veamos algún ejemplo de condicionales IF.

if (dia == "lunes")
   document.write ("Que tengas un feliz comienzo de semana")


Si es lunes nos deseará una feliz semana. No hará nada en caso contrario. Como en este ejemplo sólo indicamos una instrucción para el caso positivo, no hará falta utilizar las llaves (aunque sí sería recomendable haberlas puesto). Fíjate también en el operador condicional que consta de dos signos igual.

Vamos a ver ahora otro ejemplo, un poco más largo.

if (credito >= precio) {
   document.write("has comprado el artículo " + nuevoArtículo) //enseño compra
   carrito += nuevoArticulo //introduzco el artículo en el carrito de la compra
   credito -= precio //disminuyo el crédito según el precio del artículo
} else {
   document.write("se te ha acabado el crédito") //informo que te falta dinero
   window.location = "carritodelacompra.html" //voy a la página del carrito
}


Este ejemplo es un poco más complejo, y también un poco ficticio. Lo que hago es comprobar si tengo crédito para realizar una supuesta compra. Para ello miro si el crédito es mayor o igual que el precio del artículo, si es así informo de la compra, introduzco el artículo en el carrito y resto el precio al crédito acumulado. Si el precio del artículo es superior al dinero disponible informo de la situación y mando al navegador a la página donde se muestra su carrito de la compra.

Expresiones condicionales

La expresión a evaluar se coloca siempre entre paréntesis y está compuesta por variables que se combinan entre si mediante operadores condicionales. Recordamos que los operadores condicionales relacionaban dos variables y devolvían siempre un resultado boleano. Por ejemplo un operador condicional es el operador "es igual" (==), que devuelve true en caso de que los dos operandos sean iguales o false en caso de que sean distintos.

if (edad > 18)
   document.write("puedes ver esta página para adultos")


En este ejemplo utilizamos en operador condicional "es mayor" (>). En este caso, devuelve true si la variable edad es mayor que 18, con lo que se ejecutaría la línea siguiente que nos informa de que se puede ver el contenido para adultos.

Las expresiones condicionales se pueden combinar con las expresiones lógicas para crear expresiones más complejas. Recordamos que las expresiones lógicas son las que tienen como operandos a los boleanos y que devuelvan otro valor boleano. Son los operadores negación lógica, Y lógico y O lógico.

if (bateria < 0.5 && redElectrica == 0)
   document.write("tu ordenador portatil se va a apagar en segundos")


Lo que hacemos es comprobar si la batería de nuestro supuesto ordenador es menor que 0.5 (está casi acabada) y también comprobamos si el ordenador no tiene red eléctrica (está desenchufado). Luego, el operador lógico los relaciona con un Y, de modo que si está casi sin batería Y sin red eléctrica, informo que el ordenador se va a apagar.

Nota: La lista de operadores que se pueden utilizar con las estructuras IF se pueden ver en el capítulo de operadores condicionales y operadores lógicos.

La estructura if es de las más utilizadas en lenguajes de programación, para tomar decisiones en función de la evaluación de una sentencia. En el artículo anterior del Manual de Javascript ya comenzamos a explicar la estructura if y ahora vamos a ver algunos usos un poquito más avanzados.

Sentencias IF anidadas

Para hacer estructuras condicionales más complejas podemos anidar sentencias IF, es decir, colocar estructuras IF dentro de otras estructuras IF. Con un solo IF podemos evaluar y realizar una acción u otra según dos posibilidades, pero si tenemos más posibilidades que evaluar debemos anidar IFs para crear el flujo de código necesario para decidir correctamente.

Por ejemplo, si deseo comprobar si un número es mayor menor o igual que otro, tengo que evaluar tres posibilidades distintas. Primero puedo comprobar si los dos números son iguales, si lo son, ya he resuelto el problema, pero si no son iguales todavía tendré que ver cuál de los dos es mayor. Veamos este ejemplo en código Javascript.

var numero1=23
var numero2=63
if (numero1 == numero2){
   document.write("Los dos números son iguales")
}else{
   if (numero1 > numero2) {
      document.write("El primer número es mayor que el segundo")
   }else{
      document.write("El primer número es menor que el segundo")
   }
}


El flujo del programa es como comentábamos antes, primero se evalúa si los dos números son iguales. En caso positivo se muestra un mensaje informando de ello. En caso contrario ya sabemos que son distintos, pero aun debemos averiguar cuál de los dos es mayor. Para eso se hace otra comparación para saber si el primero es mayor que el segundo. Si esta comparación da resultados positivos mostramos un mensaje diciendo que el primero es mayor que el segundo, en caso contrario indicaremos que el primero es menor que el segundo.

Volvemos a remarcar que las llaves son en este caso opcionales, pues sólo se ejecuta una sentencia para cada caso. Además, los saltos de línea y los sangrados también opcionales en todo caso y nos sirven sólo para ver el código de una manera más ordenada. Mantener el código bien estructurado y escrito de una manera comprensible es muy importante, ya que nos hará la vida más agradable a la hora de programar y más adelante cuando tengamos que revisar los programas.
Nota: En este manual utilizaré una notación como la que has podido ver en las líneas anteriores. Además mantendré esa notación en todo momento. Esto sin lugar a dudas hará que los códigos con ejemplos sean comprensibles más rápidamente, si no lo hiciéramos así sería un verdadero incordio leerlos. Esta misma receta es aplicable a los códigos que has de crear tú y el principal beneficiado serás tú mismo y los compañeros que lleguen a leer tu código.

Operador IF

Hay un operador que no hemos visto todavía y es una forma más esquemática de realizar algunos IF sencillos. Proviene del lenguaje C, donde se escriben muy pocas líneas de código y donde cuanto menos escribamos más elegantes seremos. Este operador es un claro ejemplo de ahorro de líneas y caracteres al escribir los scripts. Lo veremos rápidamente, pues la única razón por la que lo incluyo es para que sepas que existe y si lo encuentras en alguna ocasión por ahí sepas identificarlo y cómo funciona.

Un ejemplo de uso del operador IF se puede ver a continuación.

Variable = (condición) ? valor1 : valor2

Este ejemplo no sólo realiza una comparación de valores, además asigna un valor a una variable. Lo que hace es evaluar la condición (colocada entre paréntesis) y si es positiva asigna el valor1 a la variable y en caso contrario le asigna el valor2. Veamos un ejemplo:

momento = (hora_actual < 12) ? "Antes del mediodía" : "Después del mediodía"

Este ejemplo mira si la hora actual es menor que 12. Si es así, es que ahora es antes del mediodía, así que asigna "Antes del mediodía" a la variable momento. Si la hora es mayor o igual a 12 es que ya es después de mediodía, con lo que se asigna el texto "Después del mediodía" a la variable momento. Para ampliar la información recomendamos ver también el Videotutorial de Javascript, en el vídeo donde tratamos la estructura IF.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

superscript

03/5/2005
La expresión
if (bateria == 0 && redElectrica = 0)
no es correcta, seria correcto :
if (bateria == 0 && redElectrica == 0)
pues si utilizamos el signo de igual "=" lo que hacemos es asignar 0 a la variable "redElectrica"

RESPUESTA

Tienes toda la razón. Se nos coló ese típico error en el artículo. Gracias por tus comentarios, está corregido el artículo.

Jorgelig

24/3/2006
Eh encontrado tu tutorial muy bueno, gracias por el aporte que haces a nosotros los nuevos en esto del desarrollo web :D

Pd. Como broma.......[cita]
if (bateria == 0 && redElectrica = 0)
document.write("tu ordenador portatil se va a apagar en segundos") [/cita]

No creo que de tiempo a que salga ese mensaje, porque segun tu condicion no tiene nada de energia XD, porque deberia quedar un poco mas de 0 de bateria :D

Salu2

waltnav

09/1/2007
COMO HAGO UN IF PREGUNTANDO POR EL ESTADO ENABLE DE UN BOTON

javier_claros

13/4/2010
if en una sola linea de codigo
aqui les dejo un ejemplo de la sentecia if en una línea de codigo

<?php
$var = TRUE;
echo $var==TRUE ? 'TRUE' : 'FALSE'; // get TRUE
echo $var==FALSE ? 'TRUE' : 'FALSE'; // get FALSE
?>

midesweb

27/9/2010
sobre el punto y coma que dicen que falta en las estructuras de control
Sobre el comentario anterior, que dice que tengo un error en mi cerebro ¿¿??, pues puede que sí, pero no será justamente por haberme olvidado de los puntos y comas (;).

Si has leído los artículos de introducción a Javascript de este mismo manual, deberías saber que el ; como finalizador de sentencias sólo es opcional en Javascript.

poleto

16/1/2011
como puedo continuar esto
for( var p in command_directory ) {
$.register_command( p, command_directory[p] );
}

$.register_command( 'help', function() {
return 'help'
});





necesito saber como poner if and else en jquery, en el ejemplo como lo hago para poner If, me podeis ayudar, estoy desesperado'??!!!!

zonia

22/1/2012
Codigo Javascript condicion if
Buen dia,

Por favor, necesito un codigo en java script - condicion if para :

de 1 a 250 me arroje un resultado : 3000
de 251 a 500 me arroje un resultado : 6000

agradezco anticipadamente sus comentarios.

zonia

22/1/2012
Codigo Javascript condicion if
Quedo faltanto un valor. Vuelvo a re escribir:

Cuando digiten en la casilla de 1 a 250 me arroje resultado de : 3000
Cuando digiten en la casilla de 251 a 500 me arroje resultado de : 6000
Cuando digiten en la casilla de 501 en adelante internamente multiplique por 12 y que el resultado sea visible de dicha operacion.

Este codigo es paraHTML

Gracias nuevamente por sus comentarios.

gerardo

26/3/2012
Me saca del For
Buenos dias, alguien me puede ayudar, ya que no encuentro mi error, tengo varios arrays de botones de opciones (preg01, preg02, etc.), pero al validar el siguente codigo, me saca del FOR, solo lo hace una vez.

function Comprobar(obj) {
var str = "";
var obj2 = "preg0";
var i;

for(i=1; i<6; i++) {
var obj1 = "";
obj1 = obj2 + i;
alert(obj1);
if (!obj.obj1[0].checked &&
!obj.obj1[1].checked &&
!obj.obj1[2].checked &&
!obj.obj1[3].checked) {
str += "Debe elegir una opcion en la pregunta ";
str += i;
}
}

if(str) {
alert(str);
return false;
} else {
return true;
}
}

Si quito el siguiente codigo, el for si se cumple las 5 veces, pero si lo pongo solo me muestra la primera alerta con el mensaje de "preg01"

if (!obj.obj1[0].checked &&
!obj.obj1[1].checked &&
!obj.obj1[2].checked &&
!obj.obj1[3].checked) {
str += "Debe elegir una opcion en la pregunta ";
str += i;
}

De antemano gracias

Pedro Gomez

10/9/2013
booleana
si la variable redelectrica es una booleana si se puede usar asi.
falto profundizar en los operadores logicos

Cynthia

02/7/2015
MUY BUENO
Muy bueno el manual!!

pdta: JORGELIG donde dice que la bateria es 0?? xD, dice que es 0.5!!