• 10 hours
  • Easy

Free online content available in this course.

course.header.alt.is_certifying

Got it!

Last updated on 6/12/20

Añadiendo condiciones

Log in or subscribe for free to enjoy all this course has to offer!

 

Sentencias

Anteriormente, hemos hecho hincapié en el concepto de expresión. Ya sabes que una expresión es una unidad de código que se resuelve en un valor. Vamos a definir otro concepto básico de programación: las sentencias.

Las sentencias son los elementos básicos en los que se divide el código. Cuando escribimos un programa, escribimos una serie de sentencias o instrucciones, que son órdenes que se ejecutan una a una para realizar una tarea. 

 

Sentencias condicionales

En este capítulo vas a ver las condiciones. Cuando desarrollas un programa es necesario que cuente con la posibilidad de ejecutar cierta parte del código si se cumple una determinada condición.

Las condiciones son comparaciones entre variables y datos como por ejemplo:

  • ¿Es la variable  var1  mayor que la variable  var2?

  • ¿Es la variable  var1  menor o igual que la variable  var2?

  • ¿Es verdadera una determinada variable booleana?

Todas estas comparaciones se evalúan de forma booleana, es decir, con verdadero o falso. Si la condición es verdadera, ejecuta un bloque de código, si es falsa ejecuta otra serie de acciones.

Para explicar esto podemos usar un símil de cocina, por ejemplo, 

Si el horno está a 180ºC
  Introduce la pizza en el horno
Si no lo está
  Sigue esperando

La condición es que el horno esté a una temperatura de 180ºC, y en función de ello se realiza una acción diferente.

La sentencia condicional if

El condicional  if  es uno de las estructuras de flujo más utilizadas de cualquier lenguaje de programación. Veamos como se implementa en JavaScript.

if (condición) { 
  // Bloque de código a ejecutar    
}

El condicional  if  evalúa la condición proporcionada entre paréntesis, si el resultado de la evaluación es verdadera, se ejecuta el bloque de código entre llaves  { } .

Podemos crear expresiones booleanas utilizando los operadores de comparación que puedes ver en la siguiente table.

Operador

Significado

===

Igual a

!==

Diferente a

<

Menor que

<=

Menor o igual que

>

Mayor que

>=

Mayor o igual que

 Veamos un ejemplo real:‌

var edad = Number(prompt("Introduce tu edad"));

if (edad > 20) {
  console.log("Tienes más de 20 años");
}

El condicional  if  evalúa la expresión  edad > 20 y obtiene un valor booleano (verdadero o falso). Si es verdadero, se ejecuta el bloque de código contenido entre las llaves  { } .

 

 

Else y else if

El condicional  else .

Imaginemos el ejemplo anterior. Si queremos mostrar por consola si el usuario es mayor o menor de edad, en función de la variable  edad , podemos utilizar dos if consecutivos que evalúen las expresiones  edad > 20  y  edad <= 20 .

var edad = prompt("Introduce tu edad");

if (edad > 20) {
  console.log("Tienes más de 20 años");
} 

if (edad <= 20) {
  console.log("Tienes 20 años o menos");
}

Sin embargo, existe una solución mucho mas elegante y fácil de leer: con un  else  (si no, en español).

var edad = prompt("Introduce tu edad");

if (edad > 20) {
  console.log("Tienes más de 20 años");
} else {
  console.log("Tienes 20 años o menos");
}

En este caso, se evalúa la expresión  (edad > 20)  del  if , y si el resultado de la expresión es falsa, se ejecuta el bloque que contienen las llaves  { }  del  else .

Si edad es mayor que 20 muestra "Tienes más de 20 años", si no "Tienes 20 años o menos".

El condicional  else if .

Si necesitásemos analizar mas de una condición, podemos hacer uso del  else if .  Puedes poner tantos  else if  como necesites.

var edad = prompt("Introduce tu edad");

if (edad >= 0 && edad < 20) {
  console.log("Tienes menos de 20 años");
} else if (edad >= 20 && edad <= 40) {
  console.log("Tienes entre 20 y 40 años");
} else {
  console.log("Tienes más de 40 años");
}

 En este caso, el flujo programa será el siguiente:

  1. Se evaluará el la primera condición  edad >= 0 && edad < 20  , si dicha condición es verdadera se ejecutará el bloque de código del primer  if  ("Tienes mas de 20 años").

  2. Si la condición del primer  if  es falsa, se evaluará la condición del  else if , e igualmente, si es verdadera se ejecutará el bloque de código del  else if  ("Tienes entre 20 y 40 años").

  3. Finalmente, si la condición del  else if es falsa, se ejecutará el bloque de código perteneciente al  else .

 

Condiciones compuestas 

El operador logico "y" (&&)

Si queremos verificar que en un número está comprendido entre 0 y 100, quiere decir que tiene que ser al mismo tiempo mayor que 0 y menor que 100. Para verificar esto es necesario conjugar dos "subcondiciones": "número mayor o igual que 0" y "número menor o igual que 100". Es necesario que la primera condición Y la segunda sean verdaderas.

La traducción en JavaScript de esta condición es la siguiente:

if ((numero >= 0) && (numero <= 100)) {
    console.log(numero + " está comprendido entre 0 y 100");
}

 El operador  &&  ("y") se aplica a dos valores de tipo booleano. Su resultado es el valor "true" (verdadero) sólo si los dos valores son verdaderos.

console.log(true && true); // Muestra true
console.log(true && false); // Muestra false
console.log(false && true); // Muestra false
console.log(false && false); // Muestra false

 

El operador logico "o" (||)

Si por ejemplo, queremos verificar que un número no esté contenido en el intervalo [0, 100], tenemos que tener un número menor que 0 o mayor que 100 para satisfacer la condición.

La traducción en JavaScript de esta condición es la siguiente:

if ((numero < 0) || (numero > 100)) {
    console.log(numero + " no está incluido en el intervalo [0, 100]");
}

El operador  ||  ("O") se aplica a dos valores de tipo booleano. Su resultado es el valor "true" si al menos uno de los dos valores a los que aplica vale "true".

console.log(true || true); // Muestra true
console.log(true || false); // Muestra true
console.log(false || true); // Muestra true
console.log(false || false); // Muestra false

 

El operador lógico "No" (!) 
if (!(numero > 100)) {
    console.log(numero + " es inferior o igual a 100");
}

Este operador permite invertir el valor de una condición: el operador "no". Se escribe bajo la forma de un signo de exclamación (!).

console.log(!true); // Muestra false
console.log(!false); // Muestra true

 

Practica tú mismo

Comparación de dos números

Escribe un programa que pida dos números al usuario y después los compare, indicando si el primer número es mayor o menor que el segundo, o si son iguales.

El primer número es menos que el segundo
El primer número es menos que el segundo

 

El primer número es mayor que el segundo
El primer número es mayor que el segundo

 

Valores finales

Examina el siguiente programa:

var num1 = Number(prompt("Introduce el primer número:"));
var num2 = Number(prompt("Introduce el segundo número: :"));
var num3 = Number(prompt("Introduce el tercer número:"));

if (num1 > num2) {
    num1 = num3 * 2;
} else {
    num1++;
    if (num2 > num3) {
        num1 = num1 + num3 * 3;
    } else {
        num1 = 0;
        num3 = num3 * 2 + num2;
    }
}

Antes de ejecutar el código, intenta deducir los valores finales de las variables num1, num2 y num3, en función de los valores iniciales. Completa el siguiente cuadro y compara lo que has escrito con el resultado que toman las variables en la consola.

Valores iniciales

Valor final de num1

Valor final de num2

Valor final de num3

num1 = num2 = num3 = 4

 

 

 

num1 = 4, num2 = 3, num3 = 2

 

 

 

num1 = 2, num2 = 4, num3 = 0

 

 

 

 

Segundo siguiente

Escribe un program que pida la hora al usuario, preguntando por las horas, minutos y segundos. Seguidamente mostrará la hora elegida por el usuario un segundo más tarde. Si no se pasa una hora correcta se mostrará un mensaje indicándolo.

Solución de los ejercicios

Intenta primero resolver los ejercicios propuestos por ti mismo. Si ves que te bloqueas, suele venir bien cambiar de actividad y volver a intentarlo más adelante. Si no lo consigues, puedes consultar las soluciones aquí

Example of certificate of achievement
Example of certificate of achievement