Uso de expresiones condicionales en JavaScript

Sintaxis básica de la expresión if()

Una estructura condicional permite la ejecución de un bloque de código en función de una condición previa que tiene que evaluarse como verdadera.

La expresión que usamos es la palabra if y continuación entre paréntesis la expresión a evaluar (la prueba lógica). Seguido de los paréntesis el código a ejecutar.

En este caso tenemos un párrafo cuyo contenido será modificado si la edad introducida por el usuario es mayor o igual a 18.

  1. Pedimos el dato al usuario a través de un prompt
  2. lo convertimos en tipo numérico
  3. Comparamos el dato con el valor 18
  4. Si es verdadero modificamos el textContent del párrafo
  5. Indicamos en pantalla que hemos realizado la comprobación

function compruebaEdad(){
    let edad = prompt('dime tu edad');
    edad = parseInt(edad);
    if (edad >= 18) {
        document.getElementById('edad').textContent = 'Eres mayor de edad. Puedes acceder';
    }
    document.getElementById('resultado_edad').textContent = 'Comprobación realizada';
}

No puedes acceder

Uso de expresión else para ejecutar código cuendo no se cumple la condición

Con esta expresión convertimos el if en una disyuntiva, cuando la condición resulte verdadera se cumplirá la primera parte del código, y si no lo es entrará en la segunda parte. Pero siempre pasará por una de las dos.

A la expresión del caso anterior añadimos un else para que muestre un mensaje diciendo que eres menor de edad.

  1. Definimos variable edad con un prompt
  2. Definimos una variable de texto sin contenido inicial
  3. Preparamos un if else para asignar el contenido necesario a la variable de texto
  4. Pasamos la variable de texto como textContent del párrafo de salida

function compruebaElse() {
    let edad = parseInt(prompt('Dime tu edad'));
    let contenido = '';
    if (edad >= 18) {
        contenido = 'Eres mayor. Acceso permitido';
    } else {
        contenido = 'Eres menor. Acceso denegado';
    }
    document.getElementById('resultado_else').textContent = contenido;

}

Resultado

Caso práctico para aplicar if else

Vamos a introducir 2 números en 2 inputs y al pulsar en el botón llamado Comparar nos mostrará en un párrafo cuál es el mayor de los dos números.

La función va recoger los valores de los 2 inputs, los va a comparar y va a mostrar en un párrafo el resultado de la comparación.

  1. Definimos 2 variables con los valores de cada input respectivamente
  2. Defino variable de texto llamada resultado
  3. Compruebo si número A es mayor que número B
  4. Si es cierto el resultado será: número A es mayor
  5. Si no es cierto, el resultado es: número B es mayor
  6. Paso el resultado a la salida del programa

function comparaNumeros() {
    let numA = parseInt(document.getElementById('in_1').value);
    let numB = parseInt(document.getElementById('in_2').value);
    let resultado = '';
    if (numA > numB) {
        resultado = 'El número ' + numA + ' es mayor que el número ' + numB;
    } else {
        resultado = 'El número ' + numB + ' es mayor que el número ' + numA;
    }
    document.getElementById('comparacion').textContent = resultado;
}

Comprobando si en el caso anterior los dos números son iguales

Este supuesto nos obliga a trabajar con elementos if anidados, es decir, dentro de la comprobación de uno, o en su else, añadimos un segundo if para comprobar otra cosa.

Para comprobar realmente cuál es el mayor, primero tendremos que asegurarnos de que no son iguales, y en caso de que no lo sean, entonces comprobar si el primero es mayor que el segundo, o al revés.

  1. Igual que en el caso anterior, pero antes tengo que realizar la comparación de si son iguales
  2. Para eso es necesario usar una estructura de if anidados. Se plantea una condición inicial, y si esta no es cierta se inserta un segundo if dentro de la parte else del primer if.

function comparaIguales() {
    let numA = parseInt(document.getElementById('in_3').value);
    let numB = parseInt(document.getElementById('in_4').value);
    let resultado = '';
    if (numA == numB) {
        resultado = 'Los números son iguales';
    } else {
        if (numA > numB) {
            resultado  = numA + ' es mayor que ' +numB;
        } else {
            resultado  = numB + ' es mayor que ' +numA;
        }
    }
    document.getElementById('iguales').textContent = resultado;
}

Condicionales anidados con la expresión else if()

Esta estructura se usa para comprobar si una condición encaja con alguna de las opciones de una serie de valores. Sirve para buscar una y solo una posibilidad entre el conjunto de opciones.

Un buen ejemplo es el de aplicar una calificación a partir de una nota númerica: dependiendo del valor de la nota la calificación será suspenso, aprobado, notable o sobresaliente, pero solo una de ellas.

  1. Leo el valor de la nota
  2. Si es menor de 5 = suspenso
  3. Si es menor de 6 = aprobado (puesto que ya descartamos que sea menor de 5 previamente)
  4. Y así, menor de 7 = bien y menor de 9 = notable
  5. Y si ninguna de las anteriores se cumple, solo queda que sea sobresaliente

function calificaNota() {
    const NOTA = parseFloat(document.getElementById('in_nota').value);
    let calificacion = '';
    if (NOTA < 5) {
        calificacion = 'Suspenso';
    } else if (NOTA < 6) {
        calificacion = 'Aprobado';
    } else if (NOTA < 7) {
        calificacion = 'Bien';
    } else if (NOTA < 9) {
        calificacion = 'Notable';
    } else {
        calificacion = 'Sobresaliente';
    }
    document.getElementById('calificacion').textContent = calificacion;
}

La calificación es