Tema 6 · Control de Flujo

Condicionales y Operador Ternario

Aprende a controlar el flujo de tu programa con if, else if, else, valores truthy/falsy y expresiones compactas con el operador ternario.

Cadenas y Template Literals Estructura Switch y Casos Múltiples

Toma de Decisiones con if / else

Las estructuras condicionales permiten ejecutar diferentes bloques de código según se cumpla o no una condición lógica: 

const calificacion = 85;

if (calificacion >= 90) {
  console.log("Sobresaliente");
} else if (calificacion >= 70) {
  console.log("Aprobado");
} else {
  console.log("Debe presentar recuperación");
}

Valores "Truthy" y "Falsy" en JavaScript

En JavaScript, cualquier valor que pongas dentro de un if (condicion) se evalúa como booleano. Solo existen 6 valores que son considerados falsos (Falsy):

  • false
  • 0 (el número cero)
  • "" (cadena de texto vacía)
  • null
  • undefined
  • NaN (Not a Number)

Cualquier otro valor (números distintos de cero, strings con contenido, arrays vacíos [] y objetos {}) se evalúa automáticamente como verdadero (Truthy).

El Operador Ternario ( ? : )

Es una forma compacta de escribir un condicional if / else simple en una sola línea, ideal para asignar valores directos: 

const edad = 20;
// condicion ? si_es_verdadero : si_es_falso
const acceso = (edad >= 18) ? "Permitido" : "Denegado";

⚡ Sistema de Evaluación con Condicionales

Ingresa un puntaje de 0 a 100 para evaluar el estado del alumno mediante if/else y el operador ternario:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Condicionales en JavaScript</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; background: #f8fafc; }
    .card-cond { max-width: 480px; background: white; border: 1px solid #cbd5e1; border-radius: 8px; padding: 22px; }
    input[type="number"] { width: 100%; box-sizing: border-box; padding: 8px 10px; margin: 8px 0 14px 0; border: 1px solid #cbd5e1; border-radius: 6px; }
    .alerta-resultado { padding: 12px; border-radius: 6px; margin-top: 15px; font-weight: 500; }
  </style>
</head>
<body>

  <div class="card-cond">
    <h3 style="margin-top: 0; color: #0f172a;">Evaluación de Desempeño</h3>

    <label for="puntaje">Ingresa la Calificación (0 - 100):</label>
    <input type="number" id="puntaje" min="0" max="100" value="78">

    <button onclick="evaluarPuntaje()" style="background: #0284c7; color: white; border: none; padding: 9px 16px; border-radius: 6px; cursor: pointer; font-weight: bold; width: 100%;">
      Evaluar Condicional
    </button>

    <div id="resultado-evaluacion"></div>

    <script>
      function evaluarPuntaje() {
        const nota = Number(document.getElementById('puntaje').value);
        let mensaje = "";
        let colorFondo = "";

        if (nota >= 90) {
          mensaje = "🏆 Nivel Avanzado: Aprobación con Honores.";
          colorFondo = "#dcfce7";
        } else if (nota >= 70) {
          mensaje = "✅ Nivel Intermedio: Aprobado satisfactoriamente.";
          colorFondo = "#e0f2fe";
        } else {
          mensaje = "⚠️ Nivel Básico: Necesita tutoría con Sócrates AI.";
          colorFondo = "#fee2e2";
        }

        // Operador ternario para decidir si emite certificado
        const tieneCertificado = (nota >= 70) ? "Certificado disponible" : "Sin certificado";

        document.getElementById('resultado-evaluacion').innerHTML = `
          <div class="alerta-resultado" style="background: ${colorFondo};">
            ${mensaje}<br>
            <small>Estado: <strong>${tieneCertificado}</strong></small>
          </div>
        `;
      }

      evaluarPuntaje();
    </script>
  </div>

</body>
</html>
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual Completo de JavaScript ES6+ y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

📖 Cuaderno Full-Stack Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.