A la lliçó anterior vas veure què és JavaScript i on s'executa. Ara toca la part pràctica: preparar el lloc de treball. Un bon entorn no et fa millor programador, però un mal entorn sí que et fa perdre hores en problemes que no tenen res a veure amb programar. En aquesta lliçó instal·laràs i configuraràs les quatre eines que faràs servir durant tot el curs —navegador, editor, Node.js i control de versions—, aprendràs a organitzar les carpetes d'un projecte web i deixaràs creat l'esquelet de Nómada Tasques, l'aplicació de Taller Nómada.

1. Què necessites i per què
2. El navegador i les seves eines de desenvolupament
3. L'editor de codi: Visual Studio Code
4. Live Server: veure els canvis a l'instant
5. Node.js i npm
6. L'estructura de carpetes d'un projecte web
7. Crear l'esquelet de Nómada Tasques
8. Git: una nota introductòria sobre control de versions
9. Errors Habituals i Consells
10. Exercicis
11. Conclusió

Aquestes són les peces de l'entorn i el paper de cadascuna:

Bona notícia: tot és gratuït i multiplataforma (Windows, macOS i Linux). No necessites un ordinador potent.

Qualsevol navegador modern serveix. En aquest curs els exemples i les captures de menús es descriuen amb Google Chrome, però Firefox i Edge tenen eines equivalents amb noms gairebé idèntics.

Les DevTools (eines de desenvolupament) són el panell on inspecciones la pàgina i executes JavaScript. Per obrir-les:

Per anar directament a la consola: Ctrl + Maj + J (Windows/Linux) o Cmd + Opció + J (macOS).

Les DevTools tenen moltes pestanyes. Aquestes són les tres que importen ara:

Console és el teu banc de treball. Hi pots escriure JavaScript directament i prémer Retorn per executar-lo:

Un detall que despista al principi: si escrius una expressió, la consola mostra el seu resultat; si escrius console.log(...), mostra allò que li passis. A més, la consola marca amb < o ← el valor retornat, per distingir-lo del que tu imprimeixes.

Sources et serveix per a una comprovació d'or: si el teu js/app.js no apareix a l'arbre de fitxers, és que el navegador no l'ha carregat i per això "no funciona res". Gairebé sempre és una ruta mal escrita.

Network ho confirma des d'un altre angle. Si recarregues la pàgina amb la pestanya oberta i veus el teu fitxer en vermell amb estat 404, la ruta està malament.

Aquestes tres pestanyes es presenten aquí només com a orientació. La depuració seriosa —punts d'interrupció, execució pas a pas, inspecció de variables— s'estudia a Depuració de JavaScript.

El navegador desa còpies dels fitxers per anar més ràpid. De vegades deses un canvi, recarregues i continues veient el codi antic. Solucions:

• Recàrrega forçada: Ctrl + Maj + R (o Cmd + Maj + R a macOS).
• A les DevTools, pestanya Network, marca la casella Disable cache i deixa-la oberta mentre treballes.

Podries escriure JavaScript al Bloc de notes, però seria com cuinar sense foc. Visual Studio Code (VS Code) és gratuït, lleuger i l'estàndard de facto.

1. Descarrega'l de code.visualstudio.com.
2. Instal·la'l amb les opcions per defecte.
3. A Windows, accepta l'opció "Afegir al PATH" per poder obrir-lo des del terminal amb code ..

S'instal·len des de la icona d'extensions de la barra lateral (o Ctrl + Maj + X):

Més endavant hi afegiràs eines d'estil i qualitat de codi com ESLint i Prettier, però això es veu a Qualitat de Codi: ESLint, Prettier i Convencions. Per ara, com més lleuger sigui l'entorn, millor.

Obre els ajustos amb Ctrl + , i busca aquestes opcions:

Un hàbit important: obre la carpeta del projecte, no fitxers solts (Fitxer → Obre la carpeta...). VS Code necessita conèixer la carpeta arrel per resoldre rutes, cercar a tot el projecte i perquè Live Server funcioni bé.

Pots obrir un index.html fent-hi doble clic, però llavors l'adreça serà file:///C:/.... Aquest mode té limitacions reals: els mòduls de JavaScript no carreguen, les peticions a servidors fallen per seguretat i certes APIs del navegador es desactiven.

Live Server ho resol: munta un servidor local i serveix el teu projecte a http://127.0.0.1:5500.

Per fer-lo servir:

1. Obre la carpeta del projecte a VS Code.
2. Clic dret sobre index.html → Open with Live Server.
3. S'obre el navegador. Cada vegada que desis un fitxer, la pàgina es recarregarà sola.

Fes servir sempre Live Server. T'estalviarà errors incomprensibles més endavant.

Node.js és un entorn que permet executar JavaScript fora del navegador, directament al teu ordinador. npm (Node Package Manager) ve inclòs amb ell i serveix per instal·lar eines i llibreries.

Dos usos concrets, i convé no confondre'ls:

1. Executar fitxers .js solts des del terminal. Quan vulguis provar una idea sense muntar una pàgina web, escrius node prova.js i veus el resultat al terminal. És rapidíssim per practicar.
2. Instal·lar eines de desenvolupament. A partir del Mòdul 8 faràs servir Jest per a proves i Cypress per a proves d'extrem a extrem. Aquestes eines s'instal·len amb npm.

El que no faràs encara és programar un servidor amb Node.js. Aquí només és una eina auxiliar.

1. Ves a nodejs.org i descarrega la versió LTS (Long Term Support), que és l'estable i recomanada.
2. Instal·la-la amb les opcions per defecte.
3. Tanca i torna a obrir el terminal (si no, no trobarà l'ordre).

Obre un terminal (a VS Code: Ctrl + ñ o Terminal → Terminal nou) i executa:

Hauries de veure dos números de versió, alguna cosa com v22.11.0 i 10.9.0. Els números concrets no importen mentre Node sigui versió 18 o superior.

Si et respon "command not found" o "no s'ha reconegut com una ordre", la instal·lació no ha afegit Node al PATH: reinicia el terminal i, si persisteix, reinstal·la marcant l'opció corresponent.

No necessites ser expert en terminal, però quatre ordres et n'hi haurà prou:

I la que faràs servir més:

Avís: node executa el fitxer des de la carpeta on siguis. Si et diu "Cannot find module", gairebé sempre és que ets a la carpeta equivocada. Comprova on ets abans de culpar el codi.

Un projecte web senzill té una estructura molt convencional. Respectar-la t'estalvia problemes i fa el teu codi comprensible per a qualsevol altra persona.

Les regles pràctiques:

• index.html va a l'arrel. És el nom que els servidors busquen per defecte en obrir una carpeta.
• Una carpeta per tipus de recurs: css/, js/, i més endavant img/ per a imatges.
• Noms en minúscules, sense espais, sense accents i sense ce trencada. Fes servir guions per separar paraules: llista-tasques.js, mai Llista Tasques.js ni gestió.js. Els servidors web distingeixen majúscules de minúscules i els caràcters estranys donen problemes a les URL.
• Rutes relatives des d'index.html: js/app.js significa "la carpeta js que hi ha al costat d'aquest HTML".

Deixarem muntat el projecte de Taller Nómada. L'aniràs ampliant durant tot el curs.

Pots fer-ho amb l'explorador d'arxius o des del terminal:

A Windows, amb PowerShell:

Després, obre-la a VS Code (Fitxer → Obre la carpeta..., o code . des del terminal).

Crea index.html a l'arrel amb aquest contingut:

Repassem les línies que importen:

• <!DOCTYPE html> diu al navegador que faci servir l'estàndard modern. Sense això, entra en un mode de compatibilitat antic.
• lang="ca" indica l'idioma del contingut: útil per a cercadors i lectors de pantalla.
• <meta charset="UTF-8"> permet accents i caràcters especials. Si te'l saltes, veuràs "Nómada" en lloc de "Nómada".
• <link rel="stylesheet" href="css/estils.css"> carrega el full d'estils.
• <script src="js/app.js"></script> carrega el teu JavaScript. Fixa't que l'etiqueta es tanca amb </script> encara que estigui buida: és obligatori.

A la lliçó vinent veuràs en detall per què l'<script> va aquí i quines alternatives existeixen.

Uns estils mínims perquè la pàgina no faci llàstima. No és un curs de CSS, així que amb això n'hi ha prou:

I ara la peça que ens interessa:

1. Clic dret sobre index.html → Open with Live Server.
2. Al navegador, obre les DevTools (F12) i ves a la pestanya Console.
3. Hi hauries de llegir: Nómada Tasques: entorn a punt.

Si veus aquest missatge, el teu entorn està muntat: l'editor desa, el servidor serveix, el navegador executa i la consola informa. Si no el veus, comprova a la pestanya Network si app.js apareix amb estat 404 (ruta mal escrita) i revisa que la carpeta es digui exactament js.

Git és un sistema de control de versions: desa fotografies de l'estat del teu projecte perquè puguis consultar l'historial, comparar canvis i tornar enrere quan trenquis alguna cosa. I trencaràs coses: forma part de l'ofici.

Sense Git, la gestió de versions acaba sent app.js, app_v2.js, app_final.js, app_final_BO.js. Amb Git, tens un historial ordenat amb un missatge explicatiu per cada canvi.

Descarrega Git de git-scm.com i instal·la'l. Després, configura't una sola vegada:

El flux mental és senzill:

Hi ha carpetes que mai no s'han de desar a l'historial, sobretot node_modules/ (on npm instal·la les dependències: milers de fitxers que es regeneren sols). Crea un fitxer anomenat .gitignore a l'arrel:

Amb això, Git ignorarà aquests fitxers encara que existeixin a la teva carpeta.

Git dona per a un curs sencer (branques, fusions, repositoris remots, GitHub). Aquí n'hi ha prou amb crear el repositori i fer un commit en acabar cada mòdul. És un hàbit excel·lent i et donarà una xarxa de seguretat des del primer dia.

Errors habituals

• Obrir l'HTML amb doble clic en lloc de fer-ho amb Live Server. L'adreça file:// bloqueja mòduls i peticions. Si alguna cosa "funciona als exemples però no a la teva màquina", això és el primer que cal mirar.
• Rutes mal escrites a src. js/app.js no és el mateix que JS/app.js ni que /js/app.js. En molts servidors les majúscules importen. Comprova-ho sempre a la pestanya Network.
• Oblidar <meta charset="UTF-8">. Els accents i els caràcters especials es mostren com a símbols estranys. És el primer sospitós quan "Nómada" es veu com "Nómada".
• Escriure <script src="..."> sense l'etiqueta de tancament. <script src="js/app.js" /> no funciona en HTML: cal tancar amb </script>.
• Instal·lar Node.js i no reiniciar el terminal. L'ordre no es reconeix fins que obres un terminal nou.
• Posar el projecte en una ruta amb espais o accents. Una carpeta com C:\Els Meus Projectes\Programació\ causa problemes amb algunes eines. Fes servir rutes simples: C:\dev\nomada-tasques.
• Desar node_modules/ a Git. Milers de fitxers inútils a l'historial. Per a això hi ha el .gitignore.

Consells

• Deixa les DevTools obertes mentre programes. Si apareix un error i no estàs mirant la consola, per a tu no ha passat.
• Treballa sempre amb la carpeta del projecte oberta a VS Code, mai amb fitxers solts.
• Fes un commit al final de cada mòdul del curs. Tindràs un historial del teu propi aprenentatge.
• Aprèn quatre dreceres de VS Code i et canviarà la vida: Ctrl + P (obrir fitxer pel nom), Ctrl + Maj + F (cercar a tot el projecte), Alt + ↑/↓ (moure una línia), Ctrl + / (comentar).
• No instal·lis vint extensions el primer dia. Cadascuna hi afegeix soroll i opinions. Comença amb Live Server i afegeix la resta quan sàpigues què et falta.

Fes aquestes comprovacions i anota el resultat de cadascuna:

1. Obre les DevTools del teu navegador i localitza les pestanyes Console, Sources i Network.
2. A la consola, executa 12 * 3 i comprova que respon 36.
3. En un terminal, executa node --version i npm --version.
4. En un terminal, executa git --version.
5. Executa console.log('Hola, Taller Nómada') a la consola del navegador.

Si alguna falla, resol-la abans de continuar: la resta del curs en depèn.

Crea des de zero l'estructura del projecte:

1. Una carpeta nomada-tasques amb les subcarpetes css i js.
2. Un index.html a l'arrel amb l'idioma en català, el joc de caràcters UTF-8, el títol "Nómada Tasques · Taller Nómada", un <h1> i els enllaços a css/estils.css i js/app.js.
3. Un css/estils.css amb almenys una regla.
4. Un js/app.js que imprimeixi per consola el missatge: Nómada Tasques: entorn a punt. Equip: Marta, Iván i Lucía.
5. Obre'l amb Live Server i comprova el missatge a la consola.

Provoca deliberadament aquestes tres fallades, observa què passa i explica com les detectaries:

1. Canvia src="js/app.js" per src="js/aplicacio.js" i recarrega.
2. Elimina la línia <meta charset="UTF-8" /> i recarrega.
3. Escriu a app.js la línia console.log('sense tancar); (falta la cometa final) i recarrega.

Per a cada cas respon: què es veu a la pàgina? què es veu a la consola? en quina pestanya de les DevTools ho confirmaries?

Exercici 1

Els resultats esperats:

L'undefined que apareix sota el missatge desconcerta molta gent. console.log imprimeix un text però no retorna cap valor, i la consola mostra sempre el valor retornat. No és un error.

Exercici 2

Estructura final:

Contingut de js/app.js:

I l'index.html seria el que es mostra a l'apartat 7.2. La comprovació d'èxit és llegir el missatge a la pestanya Console després d'obrir amb Live Server.

Exercici 3

La lliçó important del cas 3: un error de sintaxi impedeix que s'executi el fitxer sencer, no només la línia defectuosa. El navegador ha de llegir tot el fitxer abans d'executar-lo, i si no l'entén, no executa res.

Ja tens un lloc de treball professional. Saps obrir les DevTools i per a què serveixen les pestanyes Console, Sources i Network; tens VS Code amb Live Server i unes quantes extensions útils; has instal·lat Node.js i npm i saps executar un fitxer amb node fitxer.js; coneixes l'estructura de carpetes convencional d'un projecte web (index.html a l'arrel, css/ i js/); i has fet les teves primeres passes amb Git creant un repositori i un primer commit.

I, el més important, tens creat l'esquelet de Nómada Tasques, el projecte de Taller Nómada que creixerà amb tu durant tot el curs. Ara mateix només imprimeix un missatge a la consola, però ja és un projecte real amb el seu HTML, el seu CSS i el seu JavaScript.

A la lliçó següent, El Teu Primer Programa en JavaScript, passaràs de "l'entorn funciona" a "he escrit un programa": veuràs en detall console.log, les diferents maneres d'incloure un script en una pàgina (i què signifiquen defer i async), com executar codi amb Node.js i com llegir un missatge d'error sense espantar-te. El teu primer programa imprimirà el resum d'una tasca de Taller Nómada.