El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

Tens l'entorn muntat i una carpeta nomada-tasques amb el seu index.html, el seu CSS i un js/app.js que imprimeix un missatge. És hora de convertir això en el teu primer programa de debò. En aquesta lliçó aprendràs a mostrar informació amb console.log, a incloure JavaScript en una pàgina web de les diferents maneres possibles (i a entendre què signifiquen defer i async), a executar un fitxer amb Node.js, a documentar el teu codi amb comentaris i —molt important— a llegir un missatge d'error sense espantar-te. Al final hauràs escrit un programa que imprimeix el resum d'una tasca de Taller Nómada.

Contingut

console.log: la teva finestra a l'interior del programa
Escriure codi directament a la consola
Incloure JavaScript en una pàgina: inline enfront de fitxer extern
On col·locar l'<script>: defer i async
Executar JavaScript amb Node.js
El teu primer programa: el resum d'una tasca
Comentaris al codi
Com llegir un missatge d'error
Errors Habituals i Consells
Exercicis
Conclusió

`console.log`: la teva finestra a l'interior del programa

Un programa fa coses per dins que no veus. console.log és l'eina que et permet abocar-t'hi i veure què està passant: li passes un valor i l'escriu a la consola del navegador (o al terminal, si fas servir Node.js).

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

Analitzem la línia peça a peça, perquè cada símbol compta:

Part	Què és
`console`	Un objecte que l'entorn posa a la teva disposició
`.log`	Una funció que pertany a aquest objecte
`(` ... `)`	Els parèntesis indiquen que estàs cridant la funció
`'Hola, Taller Nómada'`	L'argument: el valor que li passes
`;`	Final de la sentència

Si escrius console.log sense parèntesis, no crides res: només esmentes la funció. És com assenyalar un interruptor en lloc de prémer-lo.

1.1 Imprimir diversos valors alhora

Pots passar diversos arguments separats per comes. console.log els imprimeix tots, separats per un espai:

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

Això és molt més còmode que anar concatenant textos, i té un avantatge addicional: cada valor es mostra amb el seu tipus. A la consola del navegador, el text '12' apareix d'un color diferent que el nombre 12. Aquesta pista visual et salvarà de més d'un error.

1.2 Altres mètodes de la consola

console té més funcions útils, i convé conèixer-les des del principi:

Mètode	Per a què serveix	Aspecte a la consola
`console.log()`	Informació general	Text normal
`console.info()`	Informació destacada	Similar a `log`
`console.warn()`	Avisos	Fons groc, amb icona
`console.error()`	Errors	Fons vermell, amb icona
`console.table()`	Dades tabulars	Una taula de debò

console.warn('La tasca de la Marta venç en 2 dies');
console.error('No hem pogut desar la tasca de la Lucía');

Fer-los servir correctament fa que la consola sigui llegible quan hi ha molts missatges. Un avís groc entre cinquanta línies grises es veu; un console.log més, no.

Escriure codi directament a la consola

La consola no només mostra: també executa. Obre les DevTools (F12), ves a Console, escriu alguna cosa i prem Retorn:

8 * 3

Respon 24. És una calculadora de JavaScript sempre a mà, ideal per provar idees soltes.

Dos detalls pràctics:

Per escriure diverses línies sense executar, prem Maj + Retorn en lloc de Retorn.
Amb les fletxes amunt/avall recuperes ordres anteriors, com en un terminal.

La consola és perfecta per experimentar, però el que hi escrius es perd en recarregar la pàgina. Els programes de debò viuen en fitxers.

Incloure JavaScript en una pàgina: inline enfront de fitxer extern

Hi ha dues maneres de ficar JavaScript en un HTML.

3.1 Script inline

El codi va escrit dins de la mateixa etiqueta:

<script>
  console.log('Aquest codi està escrit dins del document HTML');
</script>

Funciona, però només és acceptable per a proves rapidíssimes.

3.2 Script extern

El codi viu en el seu propi fitxer .js i l'HTML l'enllaça amb l'atribut src:

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

// js/app.js
console.log('Aquest codi és en un fitxer a part');

Comparem-los:

Aspecte	Inline	Extern (`src`)
Reutilització en diverses pàgines	No	Sí
Memòria cau del navegador	No es guarda a la cau	Es guarda a la cau: càrregues posteriors més ràpides
Separació de responsabilitats	Barreja estructura i comportament	Cada cosa al seu lloc
Eines (linters, proves)	No l'analitzen bé	Funcionen sense problemes
Recomanat	Només per a proves	Sempre

Regla d'or: fes servir sempre fitxer extern. És el que farem a Nómada Tasques.

3.3 Dos avisos sobre `<script>`

Primer: si fas servir src, el contingut intern s'ignora completament. Això no imprimeix res:

<!-- Malament! El console.log no s'executa mai -->
<script src="js/app.js">
  console.log('Això no funcionarà mai');
</script>

Segon: l'etiqueta s'ha de tancar. <script src="js/app.js" /> no és vàlid en HTML; cal escriure </script>.

On col·locar l'`<script>`: `defer` i `async`

El navegador llegeix l'HTML de dalt a baix. Quan troba un <script> sense cap més atribut, atura la construcció de la pàgina, descarrega el fitxer, l'executa i només llavors continua. Això té una conseqüència crítica.

4.1 El problema de l'script al `<head>`

<head>
  <!-- Problema! Aquí l'<h1> encara no existeix -->
  <script src="js/app.js"></script>
</head>
<body>
  <h1>Nómada Tasques</h1>
</body>

Si app.js intenta accedir a l'<h1>, no el trobarà: quan l'script s'executa, aquesta part de l'HTML encara no s'ha llegit. És la causa número u dels misteriosos "em surt null" dels principiants.

4.2 Les tres solucions

Opció A — al final del <body> (la que fa servir l'esquelet de Nómada Tasques):

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

Quan el navegador arriba a l'script, tot l'HTML anterior ja existeix. Simple i sempre funciona.

Opció B — defer al <head> (la recomanada avui):

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

defer significa: descarrega el fitxer en paral·lel mentre continues construint la pàgina, i executa'l quan l'HTML estigui complet. Guanyes velocitat de descàrrega sense perdre la garantia.

Opció C — async (per a casos concrets):

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

async descarrega en paral·lel i executa tan bon punt acaba la descàrrega, interrompent la construcció de la pàgina. No garanteix que l'HTML estigui a punt ni respecta l'ordre entre diversos scripts. Només és adequat per a codi totalment independent, com una analítica.

4.3 Comparativa

Atribut	Bloqueja la càrrega de l'HTML?	Quan s'executa?	Respecta l'ordre entre scripts?	Ús recomanat
(cap) al `<head>`	Sí	Immediatament en descarregar-se	Sí	Evitar
(cap) al final del `<body>`	Sí, però ja no importa	En arribar a l'etiqueta	Sí	Correcte i simple
`defer`	No	Quan l'HTML és complet	Sí	La millor opció general
`async`	No	Tan bon punt es descarrega	No	Scripts independents

flowchart TD
    A["El navegador comença<br/>a llegir l'HTML"] --> B{"Troba<br/>un script?"}
    B -->|"sense atributs"| C["Atura l'HTML<br/>Descarrega i executa"]
    B -->|"defer"| D["Descarrega en paral·lel<br/>Executa al final de l'HTML"]
    B -->|"async"| E["Descarrega en paral·lel<br/>Executa en acabar la descàrrega"]
    C --> F["Continua l'HTML"]
    D --> F
    E --> F

Aquesta és una presentació introductòria. La relació entre scripts, càrrega de pàgina i rendiment s'estudia a fons al Mòdul 9, i l'accés als elements de la pàgina al Mòdul 6.

Executar JavaScript amb Node.js

Quan vulguis provar codi sense muntar una pàgina, Node.js és la via més ràpida. Crea un fitxer prova.js en qualsevol carpeta:

// prova.js
console.log('Executant JavaScript amb Node.js');
console.log('2 + 2 =', 2 + 2);

I executa'l des del terminal, situant-te a la carpeta on sigui:

node prova.js

Sortida:

Executant JavaScript amb Node.js
2 + 2 = 4

Tingues present una diferència important entre els dos entorns:

	Navegador	Node.js
Com s'executa	Carregant la pàgina	`node fitxer.js`
On veus el `console.log`	Pestanya Console	Terminal
Accés a la pàgina web	Sí	No
Accés a fitxers del disc	No	Sí
Bo per a	L'aplicació real	Provar lògica solta

El llenguatge és el mateix. Un càlcul o una comparació es comporten igual als dos llocs. El que canvia és què hi ha al voltant.

El teu primer programa: el resum d'una tasca

Ara sí. Obre js/app.js de nomada-tasques i substitueix-ne el contingut per això:

// js/app.js
// Nómada Tasques — Primer programa.
// Imprimeix per consola el resum d'una tasca de Taller Nómada.

// 1. Desem les dades de la tasca en variables amb nom descriptiu
const titol = 'Redissenyar la sala polivalent';
const responsable = 'Iván';
const prioritat = 'alta';
const horesEstimades = 12;
const dataLimit = '2026-09-30';

// 2. Imprimim una capçalera per separar visualment la sortida
console.log('=== Nómada Tasques · Resum de tasca ===');

// 3. Imprimim cada dada amb la seva etiqueta
console.log('Títol:       ', titol);
console.log('Responsable: ', responsable);
console.log('Prioritat:   ', prioritat);
console.log('Hores:       ', horesEstimades);
console.log('Data límit:  ', dataLimit);

// 4. Un avís si la prioritat és alta
console.warn('Atenció: aquesta tasca és de prioritat', prioritat);

Desa i mira la consola del navegador. Hi hauries de veure:

=== Nómada Tasques · Resum de tasca ===
Títol:        Redissenyar la sala polivalent
Responsable:  Iván
Prioritat:    alta
Hores:        12
Data límit:   2026-09-30
⚠ Atenció: aquesta tasca és de prioritat alta

Què està passant aquí:

const nom = valor; crea un contenidor amb nom i hi desa un valor a dins. const significa que aquest contenidor no es reassignarà. Els detalls arriben a la lliçó vinent.
Els noms són descriptius. horesEstimades et diu què desa; h o x, no. Escriure noms clars no és cosmètica: és la diferència entre poder llegir el teu propi codi d'aquí a un mes o no.
El text va entre cometes, els nombres no. 'alta' és un text; 12 és un nombre. Si escrivissis '12' amb cometes, JavaScript ho tractaria com a text i no el podries sumar correctament. Aquest matís s'explica a Variables i Tipus de Dades.
El programa s'executa de dalt a baix, línia per línia, en l'ordre en què està escrit.

Prova d'executar el mateix fitxer amb Node.js: node js/app.js des de la carpeta del projecte. Veuràs exactament la mateixa sortida al terminal. És el mateix llenguatge.

Comentaris al codi

Un comentari és text que JavaScript ignora completament. Serveix per explicar el perquè de les coses a qui llegeixi el codi després (que molt probablement seràs tu).

7.1 Comentari d'una línia: `//`

// Aquesta línia sencera és un comentari
const responsable = 'Lucía'; // També pot anar al final d'una línia de codi

7.2 Comentari de diverses línies: `/* */`

/*
  Nómada Tasques
  Mòdul 1 · Primer programa
  Autor: equip de Taller Nómada
*/

7.3 Comentar per desactivar codi

Un ús molt pràctic: desactivar temporalment una línia sense esborrar-la, mentre busques una fallada.

console.log('Aquesta línia sí que funciona');
// console.log('Aquesta línia està desactivada');

A VS Code, Ctrl + / comenta o descomenta la línia (o la selecció) a l'instant.

7.4 Què comentar i què no

Comentari	Valoració
`// Suma 1 a i` sobre `i = i + 1`	Inútil: repeteix el que el codi ja diu
`// L'Iván només treballa mitja jornada els divendres`	Útil: explica una regla de negoci invisible al codi
`// TODO: validar que la data no sigui passada`	Útil: deixa constància de feina pendent
`// arreglat el 12/3, no tocar`	Dolent: no explica res; això és feina de Git

La regla pràctica: el codi diu el "què", el comentari diu el "perquè". Si necessites un comentari per explicar què fa una línia, probablement el que necessites és un nom millor.

Com llegir un missatge d'error

Els errors no són càstigs: són informació. Aprendre a llegir-los és una de les habilitats que més t'accelerarà.

Provoca'n un a posta a app.js:

console.log(responsableDeLaTasca);

A la consola apareixerà una cosa així:

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

Desmuntem el missatge:

Part	Significat
`Uncaught`	L'error no s'ha capturat, de manera que ha aturat l'execució
`ReferenceError`	El tipus d'error: s'ha fet servir un nom que no existeix
`responsableDeLaTasca is not defined`	La descripció: quin nom falla
`at app.js:3:13`	La ubicació: fitxer `app.js`, línia 3, columna 13

Aquesta última part és or. Ves directament a aquesta línia. A la consola del navegador, l'enllaç app.js:3:13 es pot prémer i et porta a la pestanya Sources amb el cursor posat.

Els tipus d'error que veuràs les teves primeres setmanes:

Tipus	Què significa	Causa típica
`SyntaxError`	El codi no compleix les regles del llenguatge	Falta una cometa, un parèntesi o una clau
`ReferenceError`	Es fa servir un nom que no existeix	Errada en el nom d'una variable
`TypeError`	Es fa alguna cosa impossible amb un valor	Cridar com a funció una cosa que no ho és
`RangeError`	Un valor és fora del rang permès	Un nombre negatiu on no s'admet

Hi ha una diferència important entre el primer i la resta: un SyntaxError impedeix que s'executi el fitxer sencer, perquè el motor ha d'entendre tot el codi abans de començar. Els altres passen durant l'execució i aturen el programa en aquell punt, deixant executat el que hi havia abans.

8.1 Errors del primer dia

Símptoma	Causa probable	Com confirmar-ho
No passa absolutament res	El fitxer `.js` no s'ha carregat	Pestanya Network: hi apareix amb un `404`?
"No veig els meus missatges"	La consola no és oberta o té un filtre actiu	Obre Console i comprova el selector de nivells
Els accents es veuen estranys	Falta `<meta charset="UTF-8">`	Revisa el `<head>`
El missatge apareix i desapareix	La pàgina es recarrega (per exemple, en enviar un formulari)	Marca Preserve log a la consola
`Uncaught SyntaxError`	Falta tancar una cometa, un parèntesi o una clau	Ves a la línia que indica l'error, i mira també l'anterior

Un consell de mètode: quan alguna cosa falla, mira la consola abans de fer res més. I corregeix el primer error de la llista, no l'últim: els errors en cascada solen ser conseqüència del primer.

Errors Habituals i Consells

Errors habituals

Escriure console.log sense parèntesis. No imprimeix res; simplement esmenta la funció.
Majúscules mal posades. Console.log() dona ReferenceError: Console is not defined. JavaScript distingeix majúscules de minúscules.
Barrejar cometes. 'Nómada" és un SyntaxError. Comença i acaba amb el mateix tipus de cometa.
Posar codi dins d'un <script src="...">. S'ignora completament.
Posar l'script al <head> sense defer. Quan l'script s'executa, l'HTML encara no existeix.
Confondre la consola amb l'editor. El que escrius a la consola es perd en recarregar; el programa viu als fitxers.
Espantar-se davant d'un error vermell. El missatge et diu el tipus, la causa i la línia exacta. És la millor ajuda que tindràs.

Consells

Imprimeix sovint mentre aprens. Un console.log ben col·locat respon a "arriba el programa fins aquí?" i "quant val això ara mateix?".
Etiqueta els teus missatges: console.log('hores:', hores) en comptes de console.log(hores). Amb deu missatges a la pantalla ho agrairàs.
Fes servir defer als projectes nous. És el comportament correcte per defecte.
Desa i recarrega sovint. Canvis petits i comprovacions freqüents localitzen la fallada de seguida.
Tingues un prova.js a mà per experimentar amb node prova.js sense tocar el projecte.

Exercicis

Exercici 1: Fitxa de tasca per consola

Crea un fitxer js/exercici-01.js que imprimeixi la fitxa d'aquesta tasca de Taller Nómada:

Títol: Preparar el taller de serigrafia
Responsable: Marta
Prioritat: mitjana
Hores estimades: 6
Data límit: 2026-10-15

Requisits:

Fes servir una variable per dada, amb nom descriptiu.
Imprimeix una línia de capçalera amb el nom del projecte.
Imprimeix cada dada etiquetada.
Acaba amb un console.info que digui: Fitxa generada correctament.
Inclou un comentari de bloc a l'inici del fitxer amb el nom de l'exercici.
Executa'l de les dues maneres: enllaçat des de l'HTML i amb node js/exercici-01.js.

Exercici 2: Diagnòstic d'errors

Per a cada fragment, indica quin tipus d'error es produeix, quin missatge veuràs aproximadament i com l'arreglaries:

// A
console.log('Tasca assignada a Lucía);

// B
Console.log('Tasca assignada a Marta');

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

// D
console.log 'Tasca assignada a Iván';

Exercici 3: Decideix la càrrega de l'script

Per a cada situació, indica quina opció faries servir (<script> al final del <body>, defer o async) i per què:

js/app.js de Nómada Tasques necessita llegir i modificar la llista de tasques de l'HTML.
Un script d'estadístiques de visites que no toca la pàgina i tant se val quan s'executi.
Dos fitxers, js/dades.js i js/app.js, on el segon depèn que el primer s'hagi executat abans.

Solucions

Exercici 1

/*
  Nómada Tasques — Mòdul 1, Exercici 1
  Fitxa d'una tasca de Taller Nómada per consola.
*/

// Dades de la tasca
const titol = 'Preparar el taller de serigrafia';
const responsable = 'Marta';
const prioritat = 'mitjana';
const horesEstimades = 6;
const dataLimit = '2026-10-15';

// Capçalera
console.log('=== Nómada Tasques · Fitxa de tasca ===');

// Dades etiquetades
console.log('Títol:       ', titol);
console.log('Responsable: ', responsable);
console.log('Prioritat:   ', prioritat);
console.log('Hores:       ', horesEstimades);
console.log('Data límit:  ', dataLimit);

// Confirmació
console.info('Fitxa generada correctament.');

Enllaçat des de l'HTML es veu a la pestanya Console; amb node js/exercici-01.js, al terminal. La sortida és idèntica, perquè el llenguatge és el mateix en tots dos entorns.

Exercici 2

Cas	Tipus d'error	Missatge aproximat	Solució
A	`SyntaxError`	`Invalid or unexpected token`	Tancar la cometa: `console.log('Tasca assignada a Lucía');`
B	`ReferenceError`	`Console is not defined`	Escriure `console` en minúscula
C	`ReferenceError`	`responsble is not defined`	Corregir l'errada: `responsable`
D	`SyntaxError`	`Unexpected string`	Afegir els parèntesis: `console.log('Tasca assignada a Iván');`

Fixa't en el patró: els casos A i D són errors de sintaxi (el motor no entén el codi i no executa res del fitxer); B i C són errors de referència (el codi és vàlid, però en executar-se demana una cosa que no existeix).

Exercici 3

defer o script al final del <body>. Necessita que l'HTML estigui complet abans d'executar-se. defer és preferible: descarrega en paral·lel i executa quan la pàgina és a punt.
async. No depèn de la pàgina ni d'altres scripts, i com abans s'executi, millor. Aquest és exactament el seu cas d'ús.
defer en tots dos, en aquest ordre (dades.js abans que app.js), o tots dos al final del <body> en aquest ordre. El que cal evitar és async: no garanteix l'ordre d'execució, així que app.js es podria executar abans que dades.js i fallar de manera intermitent i impossible de reproduir.

Conclusió

Has escrit i executat el teu primer programa en JavaScript. Saps fer servir console.log i les seves variants (warn, error, info, table) per veure què passa dins del programa; distingeixes entre script inline i extern i saps per què sempre has de fer servir fitxers externs; entens per què la posició de l'<script> importa i què fan exactament defer i async; pots executar qualsevol fitxer amb node fitxer.js; documentes amb comentaris que expliquen el perquè, no el què; i —potser el més valuós— saps llegir un missatge d'error: el seu tipus, la seva descripció i la línia exacta on passa.

I a js/app.js ja tens un programa real que imprimeix el resum d'una tasca de Taller Nómada, amb el seu títol, responsable, prioritat, hores i data límit.

Fins ara has copiat sintaxi sense conèixer-ne del tot les regles. A la lliçó següent, Sintaxi i Conceptes Bàsics de JavaScript, posaràs nom al que has estat fent: què és exactament una sentència, quan cal el punt i coma, com funcionen els blocs {}, quins noms pots donar a les teves variables i què és el strict mode. És la lliçó que converteix el "ho copio i funciona" en "entenc per què funciona".

El Teu Primer Programa en JavaScript

Contingut

console.log: la teva finestra a l'interior del programa

1.1 Imprimir diversos valors alhora

1.2 Altres mètodes de la consola

Escriure codi directament a la consola

Incloure JavaScript en una pàgina: inline enfront de fitxer extern

3.1 Script inline

3.2 Script extern

3.3 Dos avisos sobre <script>

On col·locar l'<script>: defer i async

4.1 El problema de l'script al <head>

4.2 Les tres solucions

4.3 Comparativa

Executar JavaScript amb Node.js

El teu primer programa: el resum d'una tasca

Comentaris al codi

7.1 Comentari d'una línia: //

7.2 Comentari de diverses línies: /* */

7.3 Comentar per desactivar codi

7.4 Què comentar i què no

Com llegir un missatge d'error

8.1 Errors del primer dia

Errors Habituals i Consells

Exercicis

Exercici 1: Fitxa de tasca per consola

Exercici 2: Diagnòstic d'errors

Exercici 3: Decideix la càrrega de l'script

Solucions

Conclusió

Curs de JavaScript: De Principiant a Avançat

Mòdul 1: Introducció a JavaScript

Mòdul 2: Estructures de Control

Mòdul 3: Funcions

Mòdul 4: Objectes i Arrays

Mòdul 5: Objectes i Funcions Avançades

Mòdul 6: El Model d'Objectes del Document (DOM)

Mòdul 7: APIs del Navegador i Temes Avançats

Mòdul 8: Proves i Depuració

Mòdul 9: Rendiment i Optimització