Control de Flujo – IF (Sí Condicional)

El lenguaje JavaScript al igual que muchos otros lenguajes, soporta la utilización de sentencias u órdenes para el control de flujo del programa, el control de flujo permite realizar la estructura del programa y dar orden a las acciones a realizar, así como también la toma de decisiones.

En JavaScript cualquier expresión también se puede considerar una sentencia.

Sentencia de bloque

La sentencia de bloque es el tipo de sentencia más básico y se utiliza para realizar agrupaciones de sentencias, es decir nos permite delimitar un conjunto de acciones englobando las mismas dentro de un bloque compacto. Para delimitar el bloque de sentencias se han de utilizar las llaves “{ }”, al principio y al final de bloque.

El siguiente ejemplo muestra el agrupamiento de varias sentencias en un bloque.

// Ejemplo de sentencia de bloque.
{
   var paginaWeb = "www.aprendoencasa.com";
   var descripcion = "ejercicios y practicas de programacion";
   var edad = 8;
}
// Ejemplo de sentencia de bloque utilizando orden de control de flujo
   var precio = 0;
   if ( precio == 0 ) {
      console.log("ejercicios y practicas gratis");
      console.log("en tu sitio web www.aprendoencasa.com");
   }

Se ha de tener en cuenta que en versiones anteriores a ECMAScript 6, las variables que se hayan definido dentro de un bloque de sentencia, pertenecen a la función donde esté definido el bloque de sentencia, mientras que a partir de la versión de JavaScript especificada, las variables definidas dentro de un bloque de sentencia, pertenecen a dicho bloque y no a la función completa. Siempre y cuando no se definan de otra forma las variables creadas serán de ámbito de bloque.

Observe el siguiente ejemplo.

// Ejercicios y Prácticas de Programación JavaScript
// Ejemplo de ámbito de bloque
// Declaración de variable
var numero = 10;
var numerodos = 20;
{
   var numero = 20;
   let numerodos = 40;
}
console.log(numero);
console.log(numerodos);

El resultado del ejemplo anterior, muestra un valor 20 para número y un valor 20 para númerodos, como se puede apreciar la variable “númerodos”, no cambia su valor a 40, ya que está definida dentro de una sentencia de bloque y por tanto el ámbito de la misma es solo el bloque en el cual está definida. Mientras que la variable número, aunque se ha vuelto a definir dentro del bloque, al utilizar “var” en lugar de “let”, pertenece a la función completa y por tanto cambia su valor.

Sentencias condicionales

Una sentencia condicional es un conjunto de sentencias que se ejecutan en base a que una condición se cumpla o sea verdadera.

Una de las sentencias condicionales de control de flujo, es la sentencia “if”, a la cual también se le puede denominar “Si Condicional” en castellano. La otra sentencia condicional que utiliza JavaScript es “switch”.

If – Si Condicional

La sentencia if se utiliza para comprobar si la evaluación de una condición es verdadera o falsa y en base a dicha evaluación se ejecutan una serie de sentencias.

Esta sentencia tiene diferentes variantes en su sintaxis. Siendo las siguientes.

// acción simple cuando se cumple la condición
if ( condición ) acción;
// acción simple cuando se cumple la condición y acción simple
// cuando la condición no se cumple
if ( condición ) acción; else acción;
// varias acciones cuando se cumple la condición
if ( condición ) {
    acción;
    acción;
    ...
}
// varias acciones cuando se cumple la condición y varias
// acciones cuando no se cumple la condición
if ( condición ) {
    acción;
    acción;
    ...
} else {
    acción;
    acción;
    ...
}
// acción simple cuando se cumple la condición y varias
// acciones cuando no se cumple la condición
if ( condición ) acción;
else {
    acción;
    acción;
    ...
}
// varias acciones cuando se cumple la condición y
// acción simple cuando no se cumple la condición
if ( condición ) {
   acción;
   acción;
   ...
} else acción;

El funcionamiento de la sentencia es el mismo para todas las variantes de sintaxis, en resumen, se realiza la evaluación de la condición, la expresión de condición se evalúa con un resultado “true” o “false”, verdadero o falso, si el resultado es verdadero se ejecutan las sentencias del bloque pertenecientes al “if”, si el resultado es falso se ejecutan las sentencias pertenecientes al bloque “else”, que se puede traducir por sino o en caso contrario.

La condición que se especifica puede ser simple o compuesta y los operadores de comparación que se pueden utilizar son los siguientes.

Operador	Significado
>	Mayor que
<	Menor que
>=	Mayor o igual que
<=	Menor o igual que
==	Igualdad
!=	Desigualdad
===	Estrictamente Igual
!==	Estrictamente Desigual

Para especificar condiciones compuestas se pueden utilizar los operadores lógicos siguientes:

Operador	Uso	Significado
&&	Condición && condición	Operador lógico Y, devuelve “true” si ambas expresiones son verdaderas, “false” en cualquier otro caso.
||	Condición || Condición	Operador lógico O, devuelve “true” si cualquier expresión es verdadero, “false” si todas las expresiones son falsas.
!	!expresión	Operador No, devuelve “false” si el operando no puede ser convertido a “true”, en caso contrario devuelve “false”

Utilizando los operadores anteriores se pueden realizar condiciones compuestas de tipo Y o de tipo O, e incluso mezclar ambos operadores en la misma condición. Observe el siguiente ejemplo.

// Ejemplos de Si Condicional con condiciones compuestas y simples
// Definición de variables
var vehiculo = "Coche";
var edad = 47;
var web = "www.aprendoencasa.com";
// Evaluación de condiciones
if ( vehiculo=="Coche" || vehiculo =="Moto" ) {
 console.log("El vehiculo elegido utiliza energia no renovable.");
}
if ( edad>=18 && edad<=50 ) {
 console.log("Todavia no tiene que renovar su permiso.")
}
if ( web == "www.aprendoencasa.com" ) {
 console.log("Gracias por su visita, espero que vuelva.");
}

Posibles soluciones al ejercicio 1

A continuación planteamos las posibles soluciones a los tres ejercicios solicitados anteriormente, es preferible que si estas empezando en este mundillo, no copies las soluciones e intentes plantear tu mismo las respuesta.

/*
    Creación de las variables a utilizar
*/
var Nombre = "";
var Edad = 0;
var Pais = "";
/*
    Solicitar utilizando el navegador y la orden prompt
    los valores de las tres variables
*/
Nombre = prompt("Teclee Nombre ");
Edad = prompt("Teclee Edad ");
Pais = prompt("Teclee País ");
/*
    Comprobar si es mayor de edad o no, y visualizar un
    mensaje en la CONSOLA
*/

if(Nombre!="") {
    console.log("Hola "+Nombre);
}

if( Edad>=18 ) {
    console.log(" Desde "+Pais+" Eres mayor de edad");
} else {
    console.log(" Desde "+Pais+" Eres menor de edad");
}

Posibles soluciones al ejercicio 2

/*
    Declaracion de variables
*/
var precio_kilometro = 0;
var vehiculo = "";
var kms_recorridos = 0;
var litros_consumidos = 0;
/*
    Solicitar datos por navegador
*/
vehiculo = prompt("Vehiculo ");
kms_recorridos = parseFloat(prompt("Kms. Recorridos "));
litros_consumidos = parseFloat(prompt("Litros Consumidos "));
/*
    Realizar los calculos una vez solicitados los datos
*/
if( vehiculo == "coche" ) {
    precio_kilometro = 0.10;
}
if( vehiculo == "moto" ) {
    precio_kilometro = 0.20;
}
if( vehiculo == "autobus" ) {
    precio_kilometro = 0.50;
}
var totalkms = 0;
var total = 0;
totalkms = kms_recorridos * precio_kilometro;
if( litros_consumidos <=100 ) {
    total = totalkms + 1;
} else {
    total = totalkms + 2;
}
/*
    Visualizar resultados por consola
*/
console.log("Vehiculo -> "+vehiculo);
console.log("Kms x Precio Km. = "+kms_recorridos+" x "+precio_kilometro+" = "+totalkms );
console.log("Total Presupuesto -> "+total);

Posibles soluciones al ejercicio 3

Este es a tu elección!!! la solución la tienes tu.