Tema 1 · Fundamentos

Introducción a JavaScript y Salida

Aprende qué es JavaScript, cómo los navegadores ejecutan el código y las 4 formas principales de mostrar salidas (console.log, innerHTML, alert, document.write).

Variables: let, const y var

¿Qué es JavaScript?

JavaScript es el lenguaje de programación estándar de la web. Mientras que HTML define la estructura y CSS el diseño visual, JavaScript dota a las páginas de interactividad dinámica, lógica y comportamiento.

  • Lenguaje del lado del cliente: Se ejecuta directamente en el navegador del usuario (Chrome, Firefox, Safari, Edge) a través de motores de compilación Just-In-Time (como V8 o SpiderMonkey).
  • Multiparadigma: Soporta programación orientada a objetos, programación funcional y programación basada en eventos.
  • Tipado dinámico: No necesitas declarar explícitamente el tipo de dato de una variable; JavaScript lo infiere en tiempo de ejecución.

Las 4 Formas de Mostrar Salidas en JavaScript

Método de Salida Sintaxis Uso Recomendado
console.log() console.log("¡Hola Mundo!"); El estándar para desarrollo y depuración. Imprime datos en la consola de herramientas de desarrollo sin alterar la vista del usuario.
innerHTML elemento.innerHTML = "<b>Texto</b>"; Escribe o modifica directamente el contenido HTML interno de un elemento del DOM en la página web.
window.alert() alert("¡Bienvenido a Kilopolis!"); Abre una ventana modal emergente nativa con un mensaje y un botón de aceptar. Útil para avisos críticos inmediatos.
document.write() document.write("Texto directo"); Método histórico de pruebas. No recomendado en aplicaciones reales porque si se ejecuta tras cargar la página, borra todo el documento HTML existente.

¿Cómo enlazar JavaScript con HTML?

Puedes incrustar código JS directamente dentro de una etiqueta <script> o enlazar un archivo externo con extensión .js: 

<!-- Archivo externo recomendado con atributo defer -->
<script src="app.js" defer></script>

⚡ Métodos de Salida en JavaScript

Haz clic en los botones para probar la salida en el DOM (innerHTML), la alerta modal (alert) y la consola del navegador (console.log):

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Salidas en JavaScript</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; line-height: 1.6; background: #f8fafc; }
    .card-js { max-width: 520px; background: white; border: 1px solid #cbd5e1; border-radius: 10px; padding: 24px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
    .pantalla-resultado { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; padding: 16px; margin: 15px 0; font-size: 1.05rem; color: #1e3a8a; }
    .btn { background: #f59e0b; color: #0f172a; border: none; padding: 9px 15px; border-radius: 6px; font-weight: bold; cursor: pointer; margin-right: 8px; }
    .btn:hover { background: #d97706; color: white; }
  </style>
</head>
<body>

  <div class="card-js">
    <h3 style="margin-top: 0; color: #0f172a;">Interactividad con JavaScript</h3>
    
    <div id="caja-salida" class="pantalla-resultado">
      Texto inicial: Esperando que presiones un botón...
    </div>

    <button class="btn" onclick="probarInnerHTML()">
      1. Modificar con innerHTML
    </button>
    <button class="btn" onclick="probarAlert()" style="background: #0284c7; color: white;">
      2. Disparar Alert
    </button>
    <button class="btn" onclick="probarConsola()" style="background: #10b981; color: white;">
      3. Imprimir en Consola
    </button>

    <script>
      function probarInnerHTML() {
        const destino = document.getElementById('caja-salida');
        destino.innerHTML = "⚡ <strong>¡Hola Mundo desde Kilopolis Academia!</strong>";
      }

      function probarAlert() {
        alert("¡Hola Mundo! Este es un mensaje emergente nativo.");
      }

      function probarConsola() {
        console.log("¡Hola Mundo! Mensaje registrado en la consola de depuración.");
        alert("¡Mensaje enviado a la consola! Puedes abrir las herramientas de desarrollador (F12) para verlo.");
      }
    </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.