El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

Tienes el entorno montado y una carpeta nomada-tareas con su index.html, su CSS y un js/app.js que imprime un mensaje. Es hora de convertir eso en tu primer programa de verdad. En esta lección aprenderás a mostrar información con console.log, a incluir JavaScript en una página web de las distintas formas posibles (y a entender qué significan defer y async), a ejecutar un fichero con Node.js, a documentar tu código con comentarios y —muy importante— a leer un mensaje de error sin asustarte. Al final habrás escrito un programa que imprime el resumen de una tarea de Taller Nómada.

Contenido

console.log: tu ventana al interior del programa
Escribir código directamente en la consola
Incluir JavaScript en una página: inline frente a fichero externo
Dónde colocar el <script>: defer y async
Ejecutar JavaScript con Node.js
Tu primer programa: el resumen de una tarea
Comentarios en el código
Cómo leer un mensaje de error
Errores Comunes y Consejos
Ejercicios
Conclusión

`console.log`: tu ventana al interior del programa

Un programa hace cosas por dentro que no ves. console.log es la herramienta que te permite asomarte a lo que está pasando: le pasas un valor y lo escribe en la consola del navegador (o en la terminal, si usas Node.js).

console.log('Hola, Taller Nómada');

Analicemos la línea pieza a pieza, porque cada símbolo cuenta:

Parte	Qué es
`console`	Un objeto que el entorno pone a tu disposición
`.log`	Una función que pertenece a ese objeto
`(` ... `)`	Los paréntesis indican que estás llamando a la función
`'Hola, Taller Nómada'`	El argumento: el valor que le pasas
`;`	Fin de la sentencia

Si escribes console.log sin paréntesis, no llamas a nada: solo mencionas la función. Es como señalar un interruptor en lugar de pulsarlo.

1.1 Imprimir varios valores a la vez

Puedes pasar varios argumentos separados por comas. console.log los imprime todos, separados por un espacio:

console.log('Responsable:', 'Iván', '| Horas estimadas:', 12);
// Responsable: Iván | Horas estimadas: 12

Esto es mucho más cómodo que ir concatenando textos, y tiene una ventaja adicional: cada valor se muestra con su tipo. En la consola del navegador, el texto '12' aparece en un color distinto que el número 12. Esa pista visual te salvará de más de un error.

1.2 Otros métodos de la consola

console tiene más funciones útiles, y conviene conocerlas desde el principio:

Método	Para qué sirve	Aspecto en la consola
`console.log()`	Información general	Texto normal
`console.info()`	Información destacada	Similar a `log`
`console.warn()`	Avisos	Fondo amarillo, con icono
`console.error()`	Errores	Fondo rojo, con icono
`console.table()`	Datos tabulares	Una tabla de verdad

console.warn('La tarea de Marta vence en 2 días');
console.error('No se ha podido guardar la tarea de Lucía');

Usarlos correctamente hace que la consola sea legible cuando hay muchos mensajes. Un aviso amarillo entre cincuenta líneas grises se ve; un console.log más, no.

Escribir código directamente en la consola

La consola no solo muestra: también ejecuta. Abre las DevTools (F12), ve a Console, escribe algo y pulsa Intro:

8 * 3

Responde 24. Es una calculadora de JavaScript siempre a mano, ideal para probar ideas sueltas.

Dos detalles prácticos:

Para escribir varias líneas sin ejecutar, pulsa Mayús + Intro en lugar de Intro.
Con las flechas arriba/abajo recuperas comandos anteriores, como en una terminal.

La consola es perfecta para experimentar, pero lo que escribes ahí se pierde al recargar la página. Los programas de verdad viven en ficheros.

Incluir JavaScript en una página: inline frente a fichero externo

Hay dos formas de meter JavaScript en un HTML.

3.1 Script inline

El código va escrito dentro de la propia etiqueta:

<script>
  console.log('Este código está escrito dentro del HTML');
</script>

Funciona, pero solo es aceptable para pruebas rapidísimas.

3.2 Script externo

El código vive en su propio fichero .js y el HTML lo enlaza con el atributo src:

<script src="js/app.js"></script>

// js/app.js
console.log('Este código está en un fichero aparte');

Comparemos:

Aspecto	Inline	Externo (`src`)
Reutilización en varias páginas	No	Sí
Caché del navegador	No se cachea	Se cachea: cargas posteriores más rápidas
Separación de responsabilidades	Mezcla estructura y comportamiento	Cada cosa en su sitio
Herramientas (linters, pruebas)	No lo analizan bien	Funcionan sin problemas
Recomendado	Solo para pruebas	Siempre

Regla de oro: usa siempre fichero externo. Es lo que haremos en Nómada Tareas.

3.3 Dos avisos sobre `<script>`

Primero: si usas src, el contenido interno se ignora por completo. Esto no imprime nada:

<!-- ¡Mal! El console.log nunca se ejecuta -->
<script src="js/app.js">
  console.log('Esto no se ejecutará jamás');
</script>

Segundo: la etiqueta debe cerrarse. <script src="js/app.js" /> no es válido en HTML; hay que escribir </script>.

Dónde colocar el `<script>`: `defer` y `async`

El navegador lee el HTML de arriba abajo. Cuando encuentra un <script> sin más atributos, para de construir la página, descarga el fichero, lo ejecuta y solo entonces continúa. Esto tiene una consecuencia crítica.

4.1 El problema del script en el `<head>`

<head>
  <!-- ¡Problema! Aquí el <h1> todavía no existe -->
  <script src="js/app.js"></script>
</head>
<body>
  <h1>Nómada Tareas</h1>
</body>

Si app.js intenta acceder al <h1>, no lo encontrará: cuando el script se ejecuta, esa parte del HTML aún no se ha leído. Es la causa número uno de los misteriosos "me sale null" de los principiantes.

4.2 Las tres soluciones

Opción A — al final del <body> (la que usa el esqueleto de Nómada Tareas):

<body>
  <h1>Nómada Tareas</h1>
  <script src="js/app.js"></script>
</body>

Cuando el navegador llega al script, todo el HTML anterior ya existe. Simple y siempre funciona.

Opción B — defer en el <head> (la recomendada hoy):

<head>
  <script src="js/app.js" defer></script>
</head>

defer significa: descarga el fichero en paralelo mientras sigues construyendo la página, y ejecútalo cuando el HTML esté completo. Ganas velocidad de descarga sin perder la garantía.

Opción C — async (para casos concretos):

<head>
  <script src="js/analitica.js" async></script>
</head>

async descarga en paralelo y ejecuta en cuanto termina la descarga, interrumpiendo la construcción de la página. No garantiza que el HTML esté listo ni respeta el orden entre varios scripts. Solo es adecuado para código totalmente independiente, como una analítica.

4.3 Comparativa

Atributo	¿Bloquea la carga del HTML?	¿Cuándo se ejecuta?	¿Respeta el orden entre scripts?	Uso recomendado
(ninguno) en `<head>`	Sí	Inmediatamente al descargarse	Sí	Evitar
(ninguno) al final del `<body>`	Sí, pero ya no importa	Al llegar a la etiqueta	Sí	Correcto y simple
`defer`	No	Cuando el HTML está completo	Sí	La mejor opción general
`async`	No	En cuanto se descarga	No	Scripts independientes

flowchart TD
    A["El navegador empieza<br/>a leer el HTML"] --> B{"¿Encuentra<br/>un script?"}
    B -->|"sin atributos"| C["Detiene el HTML<br/>Descarga y ejecuta"]
    B -->|"defer"| D["Descarga en paralelo<br/>Ejecuta al final del HTML"]
    B -->|"async"| E["Descarga en paralelo<br/>Ejecuta al terminar la descarga"]
    C --> F["Continúa el HTML"]
    D --> F
    E --> F

Esto es una presentación introductoria. La relación entre scripts, carga de página y rendimiento se estudia a fondo en el Módulo 9, y el acceso a los elementos de la página en el Módulo 6.

Ejecutar JavaScript con Node.js

Cuando quieras probar código sin montar una página, Node.js es la vía más rápida. Crea un fichero prueba.js en cualquier carpeta:

// prueba.js
console.log('Ejecutando JavaScript con Node.js');
console.log('2 + 2 =', 2 + 2);

Y ejecútalo desde la terminal, situándote en la carpeta donde esté:

node prueba.js

Salida:

Ejecutando JavaScript con Node.js
2 + 2 = 4

Ten presente una diferencia importante entre los dos entornos:

	Navegador	Node.js
Cómo se ejecuta	Cargando la página	`node fichero.js`
Dónde ves `console.log`	Pestaña Console	Terminal
Acceso a la página web	Sí	No
Acceso a ficheros del disco	No	Sí
Bueno para	La aplicación real	Probar lógica suelta

El lenguaje es el mismo. Un cálculo o una comparación se comportan igual en los dos sitios. Lo que cambia es qué hay alrededor.

Tu primer programa: el resumen de una tarea

Ahora sí. Abre js/app.js de nomada-tareas y sustituye su contenido por esto:

// js/app.js
// Nómada Tareas — Primer programa.
// Imprime por consola el resumen de una tarea de Taller Nómada.

// 1. Guardamos los datos de la tarea en variables con nombre descriptivo
const titulo = 'Rediseñar la sala polivalente';
const responsable = 'Iván';
const prioridad = 'alta';
const horasEstimadas = 12;
const fechaLimite = '2026-09-30';

// 2. Imprimimos una cabecera para separar visualmente la salida
console.log('=== Nómada Tareas · Resumen de tarea ===');

// 3. Imprimimos cada dato con su etiqueta
console.log('Título:      ', titulo);
console.log('Responsable: ', responsable);
console.log('Prioridad:   ', prioridad);
console.log('Horas:       ', horasEstimadas);
console.log('Fecha límite:', fechaLimite);

// 4. Un aviso si la prioridad es alta
console.warn('Atención: esta tarea es de prioridad', prioridad);

Guarda y mira la consola del navegador. Deberías ver:

=== Nómada Tareas · Resumen de tarea ===
Título:       Rediseñar la sala polivalente
Responsable:  Iván
Prioridad:    alta
Horas:        12
Fecha límite: 2026-09-30
⚠ Atención: esta tarea es de prioridad alta

Qué está ocurriendo aquí:

const nombre = valor; crea un contenedor con nombre y guarda un valor dentro. const significa que ese contenedor no se reasignará. Los detalles llegan en la próxima lección.
Los nombres son descriptivos. horasEstimadas te dice qué guarda; h o x, no. Escribir nombres claros no es cosmética: es la diferencia entre poder leer tu propio código dentro de un mes o no.
El texto va entre comillas, los números no. 'alta' es un texto; 12 es un número. Si escribieras '12' con comillas, JavaScript lo trataría como texto y no podrías sumarlo correctamente. Este matiz se explica en Variables y Tipos de Datos.
El programa se ejecuta de arriba abajo, línea por línea, en el orden en que está escrito.

Prueba a ejecutar el mismo fichero con Node.js: node js/app.js desde la carpeta del proyecto. Verás exactamente la misma salida en la terminal. Es el mismo lenguaje.

Comentarios en el código

Un comentario es texto que JavaScript ignora por completo. Sirve para explicar el porqué de las cosas a quien lea el código después (que muy probablemente serás tú).

7.1 Comentario de una línea: `//`

// Esta línea entera es un comentario
const responsable = 'Lucía'; // También puede ir al final de una línea de código

7.2 Comentario de varias líneas: `/* */`

/*
  Nómada Tareas
  Módulo 1 · Primer programa
  Autor: equipo de Taller Nómada
*/

7.3 Comentar para desactivar código

Un uso muy práctico: desactivar temporalmente una línea sin borrarla, mientras buscas un fallo.

console.log('Esta sí se ejecuta');
// console.log('Esta está desactivada');

En VS Code, Ctrl + / comenta o descomenta la línea (o la selección) al instante.

7.4 Qué comentar y qué no

Comentario	Valoración
`// Suma 1 a i` sobre `i = i + 1`	Inútil: repite lo que el código ya dice
`// Iván solo trabaja media jornada los viernes`	Útil: explica una regla de negocio invisible en el código
`// TODO: validar que la fecha no sea pasada`	Útil: deja constancia de trabajo pendiente
`// arreglado el 12/3, no tocar`	Malo: no explica nada; eso es trabajo de Git

La regla práctica: el código dice el "qué", el comentario dice el "porqué". Si necesitas un comentario para explicar qué hace una línea, probablemente lo que necesitas es un nombre mejor.

Cómo leer un mensaje de error

Los errores no son castigos: son información. Aprender a leerlos es una de las habilidades que más te va a acelerar.

Provoca uno a propósito en app.js:

console.log(responsableDeLaTarea);

En la consola aparecerá algo así:

Uncaught ReferenceError: responsableDeLaTarea is not defined
    at app.js:3:13

Desmontemos el mensaje:

Parte	Significado
`Uncaught`	El error no fue capturado, así que ha detenido la ejecución
`ReferenceError`	El tipo de error: se ha usado un nombre que no existe
`responsableDeLaTarea is not defined`	La descripción: qué nombre falla
`at app.js:3:13`	La ubicación: fichero `app.js`, línea 3, columna 13

Esa última parte es oro. Ve directamente a esa línea. En la consola del navegador, el enlace app.js:3:13 es pulsable y te lleva a la pestaña Sources con el cursor puesto.

Los tipos de error que verás en tus primeras semanas:

Tipo	Qué significa	Causa típica
`SyntaxError`	El código no cumple las reglas del lenguaje	Falta una comilla, un paréntesis o una llave
`ReferenceError`	Se usa un nombre que no existe	Errata en el nombre de una variable
`TypeError`	Se hace algo imposible con un valor	Llamar como función a algo que no lo es
`RangeError`	Un valor está fuera del rango permitido	Un número negativo donde no se admite

Hay una diferencia importante entre el primero y los demás: un SyntaxError impide que se ejecute el fichero entero, porque el motor tiene que entender todo el código antes de empezar. Los demás ocurren durante la ejecución y detienen el programa en ese punto, dejando ejecutado lo anterior.

8.1 Errores del primer día

Síntoma	Causa probable	Cómo confirmarlo
No pasa absolutamente nada	El fichero `.js` no se ha cargado	Pestaña Network: ¿aparece con un `404`?
"No veo mis mensajes"	La consola no está abierta o tiene un filtro activo	Abre Console y comprueba el selector de niveles
Los acentos se ven raros	Falta `<meta charset="UTF-8">`	Revisa el `<head>`
El mensaje aparece y desaparece	La página se recarga (por ejemplo, al enviar un formulario)	Marca Preserve log en la consola
`Uncaught SyntaxError`	Falta cerrar una comilla, un paréntesis o una llave	Ve a la línea que indica el error, y mira también la anterior

Un consejo de método: cuando algo falla, mira la consola antes de hacer nada más. Y corrige el primer error de la lista, no el último: los errores en cascada suelen ser consecuencia del primero.

Errores Comunes y Consejos

Errores comunes

Escribir console.log sin paréntesis. No imprime nada; simplemente menciona la función.
Mayúsculas mal puestas. Console.log() da ReferenceError: Console is not defined. JavaScript distingue mayúsculas de minúsculas.
Mezclar comillas. 'Nómada" es un SyntaxError. Empieza y termina con el mismo tipo de comilla.
Poner código dentro de un <script src="...">. Se ignora por completo.
Poner el script en el <head> sin defer. Cuando el script se ejecuta, el HTML aún no existe.
Confundir la consola con el editor. Lo que escribes en la consola se pierde al recargar; el programa vive en los ficheros.
Asustarse ante un error rojo. El mensaje te dice el tipo, la causa y la línea exacta. Es la mejor ayuda que vas a tener.

Consejos

Imprime a menudo mientras aprendes. Un console.log bien colocado responde a "¿llega el programa hasta aquí?" y "¿qué vale esto ahora mismo?".
Etiqueta tus mensajes: console.log('horas:', horas) en vez de console.log(horas). Con diez mensajes en pantalla lo agradecerás.
Usa defer en los proyectos nuevos. Es el comportamiento correcto por defecto.
Guarda y recarga con frecuencia. Cambios pequeños y comprobaciones frecuentes localizan el fallo enseguida.
Ten un prueba.js a mano para experimentar con node prueba.js sin tocar el proyecto.

Ejercicios

Ejercicio 1: Ficha de tarea por consola

Crea un fichero js/ejercicio-01.js que imprima la ficha de esta tarea de Taller Nómada:

Título: Preparar el taller de serigrafía
Responsable: Marta
Prioridad: media
Horas estimadas: 6
Fecha límite: 2026-10-15

Requisitos:

Usa una variable por dato, con nombre descriptivo.
Imprime una línea de cabecera con el nombre del proyecto.
Imprime cada dato etiquetado.
Termina con un console.info que diga: Ficha generada correctamente.
Incluye un comentario de bloque al inicio del fichero con el nombre del ejercicio.
Ejecútalo de las dos formas: enlazado desde el HTML y con node js/ejercicio-01.js.

Ejercicio 2: Diagnóstico de errores

Para cada fragmento, indica qué tipo de error se produce, qué mensaje verás aproximadamente y cómo lo arreglarías:

// A
console.log('Tarea de Lucía);

// B
Console.log('Tarea de Marta');

// C
const responsable = 'Iván';
console.log(responsble);

// D
console.log 'Tarea de Iván';

Ejercicio 3: Decide la carga del script

Para cada situación, indica qué opción usarías (<script> al final del <body>, defer o async) y por qué:

js/app.js de Nómada Tareas necesita leer y modificar la lista de tareas del HTML.
Un script de estadísticas de visitas que no toca la página y da igual cuándo se ejecute.
Dos ficheros, js/datos.js y js/app.js, donde el segundo depende de que el primero se haya ejecutado antes.

Soluciones

Ejercicio 1

/*
  Nómada Tareas — Módulo 1, Ejercicio 1
  Ficha de una tarea de Taller Nómada por consola.
*/

// Datos de la tarea
const titulo = 'Preparar el taller de serigrafía';
const responsable = 'Marta';
const prioridad = 'media';
const horasEstimadas = 6;
const fechaLimite = '2026-10-15';

// Cabecera
console.log('=== Nómada Tareas · Ficha de tarea ===');

// Datos etiquetados
console.log('Título:      ', titulo);
console.log('Responsable: ', responsable);
console.log('Prioridad:   ', prioridad);
console.log('Horas:       ', horasEstimadas);
console.log('Fecha límite:', fechaLimite);

// Confirmación
console.info('Ficha generada correctamente.');

Enlazado desde el HTML se ve en la pestaña Console; con node js/ejercicio-01.js, en la terminal. La salida es idéntica, porque el lenguaje es el mismo en ambos entornos.

Ejercicio 2

Caso	Tipo de error	Mensaje aproximado	Solución
A	`SyntaxError`	`Invalid or unexpected token`	Cerrar la comilla: `console.log('Tarea de Lucía');`
B	`ReferenceError`	`Console is not defined`	Escribir `console` en minúscula
C	`ReferenceError`	`responsble is not defined`	Corregir la errata: `responsable`
D	`SyntaxError`	`Unexpected string`	Añadir los paréntesis: `console.log('Tarea de Iván');`

Observa el patrón: los casos A y D son errores de sintaxis (el motor no entiende el código y no ejecuta nada del fichero); B y C son errores de referencia (el código es válido, pero al ejecutarse pide algo que no existe).

Ejercicio 3

defer o script al final del <body>. Necesita que el HTML esté completo antes de ejecutarse. defer es preferible: descarga en paralelo y ejecuta cuando la página está lista.
async. No depende de la página ni de otros scripts, y cuanto antes se ejecute, mejor. Este es exactamente su caso de uso.
defer en ambos, en ese orden (datos.js antes que app.js), o los dos al final del <body> en ese orden. Lo que hay que evitar es async: no garantiza el orden de ejecución, así que app.js podría ejecutarse antes que datos.js y fallar de forma intermitente e imposible de reproducir.

Conclusión

Has escrito y ejecutado tu primer programa en JavaScript. Sabes usar console.log y sus variantes (warn, error, info, table) para ver lo que ocurre dentro del programa; distingues entre script inline y externo y sabes por qué siempre debes usar ficheros externos; entiendes por qué la posición del <script> importa y qué hacen exactamente defer y async; puedes ejecutar cualquier fichero con node fichero.js; documentas con comentarios que explican el porqué, no el qué; y —quizá lo más valioso— sabes leer un mensaje de error: su tipo, su descripción y la línea exacta donde ocurre.

Y en js/app.js tienes ya un programa real que imprime el resumen de una tarea de Taller Nómada, con su título, responsable, prioridad, horas y fecha límite.

Hasta ahora has copiado sintaxis sin conocer del todo sus reglas. En la siguiente lección, Sintaxis y Conceptos Básicos de JavaScript, pondrás nombre a lo que has estado haciendo: qué es exactamente una sentencia, cuándo hace falta el punto y coma, cómo funcionan los bloques {}, qué nombres puedes dar a tus variables y qué es el strict mode. Es la lección que convierte "copio y funciona" en "entiendo por qué funciona".

Tu Primer Programa en JavaScript

Contenido

console.log: tu ventana al interior del programa

1.1 Imprimir varios valores a la vez

1.2 Otros métodos de la consola

Escribir código directamente en la consola

Incluir JavaScript en una página: inline frente a fichero externo

3.1 Script inline

3.2 Script externo

3.3 Dos avisos sobre <script>

Dónde colocar el <script>: defer y async

4.1 El problema del script en el <head>

4.2 Las tres soluciones

4.3 Comparativa

Ejecutar JavaScript con Node.js

Tu primer programa: el resumen de una tarea

Comentarios en el código

7.1 Comentario de una línea: //

7.2 Comentario de varias líneas: /* */

7.3 Comentar para desactivar código

7.4 Qué comentar y qué no

Cómo leer un mensaje de error

8.1 Errores del primer día

Errores Comunes y Consejos

Ejercicios

Ejercicio 1: Ficha de tarea por consola

Ejercicio 2: Diagnóstico de errores

Ejercicio 3: Decide la carga del script

Soluciones

Conclusión

Curso de JavaScript: De Principiante a Avanzado

Módulo 1: Introducción a JavaScript

Módulo 2: Estructuras de Control

Módulo 3: Funciones

Módulo 4: Objetos y Arrays

Módulo 5: Objetos y Funciones Avanzadas

Módulo 6: El Modelo de Objetos del Documento (DOM)

Módulo 7: APIs del Navegador y Temas Avanzados

Módulo 8: Pruebas y Depuración

Módulo 9: Rendimiento y Optimización