Incluir JS y la consola

Antes de escribir lógica compleja necesitas saber dos cosas: cómo conectar tu JavaScript con una página HTML y cómo ver lo que está pasando dentro de tu código. En esta lección aprenderás las formas de incluir scripts, qué significan defer, async y type="module", y a usar la consola como tu mejor herramienta de depuración.

Concepto

El navegador lee tu HTML de arriba hacia abajo. Cuando encuentra una etiqueta <script>, se detiene, descarga (si hace falta) y ejecuta ese JavaScript, y luego sigue leyendo el resto del HTML. Esto es importante porque:

• Si tu script intenta usar un botón que todavía no se ha leído, no lo va a encontrar.
• Si tu script es muy pesado, la página se queda en blanco mientras se descarga.

Imagina que lees un libro de recetas y, a mitad de la página, dice "ve al súper por ingredientes". Te detienes, vas al súper, regresas y sigues leyendo. Así funciona un <script> normal. Los atributos defer y async son como mandar a alguien más al súper mientras tú sigues leyendo.

Formas de incluir JavaScript

1. Script inline (dentro del HTML)

<body>
  <h1>Mi página</h1>

  <script>
    // El código va directamente dentro de la etiqueta
    console.log('Hola desde un script inline');
  </script>
</body>

Útil para pruebas rápidas o fragmentos muy pequeños. Para proyectos reales es mejor separar.

2. Script externo (archivo .js)

<!-- index.html -->
<body>
  <h1>Mi página</h1>
  <script src="js/app.js"></script>
</body>

// js/app.js
console.log('Hola desde un archivo externo');

Ventajas del archivo externo:

• Orden: HTML, CSS y JS separados, más fácil de mantener.
• Caché: el navegador guarda el archivo y no lo vuelve a descargar en cada página.
• Reutilización: el mismo app.js sirve para varias páginas.

Error común

Escribir código dentro de un <script> que también tiene src. Si pones src, todo lo que esté entre las etiquetas se ignora:

<!-- ❌ El console.log NUNCA se ejecuta -->
<script src="app.js">
  console.log('Esto se ignora');
</script>

3. ¿Dónde poner el script? defer y async

Hay tres formas de cargar un script externo:

Forma	¿Bloquea el HTML?	¿Cuándo se ejecuta?	¿Respeta el orden?
<script src> normal	Sí	En cuanto se descarga	Sí
<script defer src>	No	Cuando el HTML terminó de leerse	Sí
<script async src>	No (al descargar)	En cuanto se descarga	No

<head>
  <!-- ✅ Recomendado: se descarga en paralelo y se ejecuta al final -->
  <script defer src="js/app.js"></script>

  <!-- Para scripts independientes como analíticas -->
  <script async src="https://ejemplo.com/analytics.js"></script>
</head>

• defer es la opción ideal para tu código: puedes ponerlo en el <head>, se descarga mientras el navegador lee el HTML y se ejecuta cuando todo el DOM está listo. Si tienes varios scripts con defer, se ejecutan en el orden en que aparecen.
• async es para scripts que no dependen de nada ni de nadie (Google Analytics, píxeles de publicidad). Se ejecutan apenas llegan, en cualquier orden.

La forma "clásica" (antes de defer) era poner el <script> justo antes de cerrar </body>. Sigue funcionando, pero defer en el <head> es más moderno y rápido.

4. type="module"

<script type="module" src="js/main.js"></script>

Los módulos permiten dividir tu código en varios archivos con import y export (lo verás a fondo en Módulos ES). Lo que debes saber ahora:

• Se comportan como defer automáticamente.
• Usan modo estricto siempre (detecta más errores).
• Sus variables no se vuelven globales.
• Necesitan abrirse desde un servidor (por ejemplo, la extensión Live Server de VS Code), no con doble clic en el archivo.

// js/utilidades.js
export function sumar(a, b) {
  return a + b;
}

// js/main.js
import { sumar } from './utilidades.js';
console.log(sumar(2, 3)); // 5

Buena práctica

Para proyectos nuevos usa <script type="module" src="..."> o <script defer src="..."> en el <head>. Así nunca tendrás el problema de "no encuentra el elemento" y la página carga más rápido.

La consola de DevTools

Las herramientas para desarrolladores (DevTools) vienen en todos los navegadores. Ábrelas con:

• F12 o Ctrl + Shift + I (Windows/Linux)
• Cmd + Option + I (Mac)
• Clic derecho → Inspeccionar

En la pestaña Console puedes:

1. Ver los mensajes que tu código imprime.
2. Ver los errores en rojo, con el archivo y la línea exacta donde ocurrieron.
3. Escribir JavaScript y ejecutarlo al instante (ideal para experimentar).

Ejemplo: los métodos de console

// --- Mensajes básicos ---
console.log('Mensaje normal');            // Información general
console.info('Dato informativo');         // Similar a log
console.warn('Cuidado: stock bajo');      // Amarillo, advertencia
console.error('No se pudo guardar');      // Rojo, error

// Puedes imprimir varios valores separados por comas
const usuario = 'Ana';
const edad = 28;
console.log('Usuario:', usuario, 'Edad:', edad);

// --- Tablas: perfectas para arrays de objetos ---
const productos = [
  { nombre: 'Playera', precio: 250, stock: 12 },
  { nombre: 'Gorra', precio: 180, stock: 0 },
  { nombre: 'Sudadera', precio: 650, stock: 5 },
];
console.table(productos);

// --- Agrupar mensajes relacionados ---
console.group('Pedido #1024');
console.log('Cliente: Ana');
console.log('Total: $1,080');
console.groupEnd();

// --- Medir cuánto tarda algo ---
console.time('bucle');
let suma = 0;
for (let i = 0; i < 1000000; i++) {
  suma += i;
}
console.timeEnd('bucle'); // bucle: 3.2 ms (aprox.)

// --- Contar cuántas veces pasa algo ---
console.count('clic'); // clic: 1
console.count('clic'); // clic: 2

// --- Limpiar la consola ---
// console.clear();

Método	Para qué sirve
console.log()	Imprimir cualquier valor
console.warn()	Advertencias (amarillo)
console.error()	Errores (rojo, con traza)
console.table()	Mostrar arrays u objetos como tabla
console.group() / groupEnd()	Agrupar mensajes con sangría
console.time() / timeEnd()	Medir tiempos de ejecución
console.count()	Contar ejecuciones

Buena práctica

Usa un truco para identificar variables rápido: envuélvelas en llaves dentro de console.log. Así la consola muestra el nombre y el valor juntos:

const precio = 250;
const cantidad = 3;
console.log({ precio, cantidad }); // { precio: 250, cantidad: 3 }

alert, prompt y confirm

Son ventanas emergentes del navegador. Bloquean la página hasta que el usuario responde.

// Muestra un mensaje y un botón "Aceptar"
alert('¡Bienvenido a la tienda!');

// Pide un texto. Devuelve un string, o null si el usuario cancela
const nombre = prompt('¿Cómo te llamas?');
console.log('Hola,', nombre);

// Pide confirmación. Devuelve true (Aceptar) o false (Cancelar)
const seguro = confirm('¿Eliminar este producto?');
if (seguro) {
  console.log('Producto eliminado');
}

Error común

prompt siempre devuelve texto (o null). Si pides un número y lo sumas, tendrás sorpresas:

const edad = prompt('¿Tu edad?'); // el usuario escribe 20
console.log(edad + 1);            // "201" 😱 (concatenó textos)
console.log(Number(edad) + 1);    // 21 ✅

Aprenderás más sobre conversiones en Variables y tipos.

alert, prompt y confirm son geniales para aprender y hacer pruebas, pero en sitios reales casi no se usan: se ven feos, no se pueden personalizar y bloquean todo. En proyectos profesionales se reemplazan por modales hechos con HTML, CSS y JS.

Casos de uso reales

• Depurar un formulario: console.log del valor de cada campo para ver qué está llegando.
• Revisar datos de una API: console.table(respuesta) para ver de un vistazo los registros.
• Detectar código lento: console.time alrededor de una función sospechosa.
• Cargar scripts de terceros (chat de soporte, analíticas) con async para que no frenen tu sitio.
• Organizar un proyecto con type="module": un archivo para el carrito, otro para la API, otro para la interfaz.

Antes de publicar

Elimina los console.log de depuración antes de entregar un proyecto a un cliente. Además de verse poco profesional, pueden exponer datos internos. Herramientas como Vite o ESLint te ayudan a detectarlos (Buenas prácticas).

Ejercicios

1. Crea un index.html con un <script defer src="app.js"> en el <head>. En app.js imprime tu nombre con console.log y una advertencia con console.warn.
2. Crea un array de 3 alumnos con nombre y calificacion y muéstralo con console.table.
3. Usa prompt para pedir dos números y muestra su suma real con alert.

Ver solución

1.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Ejercicio 1</title>
  <script defer src="app.js"></script>
</head>
<body>
  <h1>Abre la consola</h1>
</body>
</html>

// app.js
console.log('Me llamo Erick');
console.warn('Esto es una advertencia de prueba');

2.

const alumnos = [
  { nombre: 'Luis', calificacion: 9 },
  { nombre: 'Sofía', calificacion: 10 },
  { nombre: 'Diego', calificacion: 7.5 },
];
console.table(alumnos);

3.

const a = Number(prompt('Primer número:'));
const b = Number(prompt('Segundo número:'));
alert(`La suma es ${a + b}`);

Resumen

• Puedes escribir JS inline o en un archivo externo (recomendado) con src.
• Un <script> normal bloquea la lectura del HTML; defer lo carga en paralelo y lo ejecuta al final en orden.
• async es para scripts independientes; se ejecutan apenas se descargan.
• type="module" habilita import/export, modo estricto y se comporta como defer.
• La consola (F12) muestra mensajes, errores y te deja probar código.
• Domina console.log, table, warn, error, group y time.
• prompt siempre devuelve texto: conviértelo con Number() si necesitas números.

Siguiente: Variables y tipos