Abans d'escriure ni una sola línia de codi convé entendre què estàs a punt d'aprendre i per què val la pena. JavaScript és avui el llenguatge de programació més estès del planeta: és pràcticament a totes les pàgines web que visites, a servidors, a aplicacions mòbils i fins i tot a aplicacions d'escriptori. En aquesta lliçó veuràs quina mena de llenguatge és, on s'executa, d'on ve (cosa que explica moltes de les seves raresses), quina relació té amb HTML i CSS, i quin tipus de coses hi podràs construir. Al final tindràs una idea clara del terreny de joc abans de començar a jugar.

1. Què és JavaScript i per a què serveix
2. Les característiques del llenguatge, explicades sense argot
3. On s'executa JavaScript
4. JavaScript, ECMAScript i les versions del llenguatge
5. Una breu història que explica les seves raresses
6. JavaScript al costat d'HTML i CSS
7. Què es pot construir: el cas de Nómada Tasques
8. Errors Habituals i Consells
9. Exercicis
10. Conclusió

JavaScript és un llenguatge de programació: un conjunt de paraules i regles amb què dones instruccions a un ordinador. La seva especialitat històrica és donar comportament a les pàgines web. Quan prems un botó i alguna cosa es desplega, quan escrius en un cercador i apareixen suggeriments sense recarregar la pàgina, quan arrossegues una targeta d'una columna a una altra en un tauler: això és JavaScript treballant.

Pensa en una diferència ben pràctica:

Però fa temps que JavaScript es va escapar del navegador. Avui també s'utilitza per escriure el servidor que atén aquestes pàgines, per crear aplicacions mòbils, eines de línia d'ordres, automatitzacions i programes d'escriptori. És, a la pràctica, un llenguatge de propòsit general amb un origen web.

Llegiràs aquestes quatre etiquetes mil vegades. Val la pena entendre-les des del principi, encara que sigui a grans trets.

Hi ha llenguatges que exigeixen un pas previ de compilació: escrius el codi, una eina el tradueix a un fitxer executable i després l'executes. JavaScript no funciona així des del teu punt de vista: escrius el codi i s'executa directament. No hi ha cap "botó de compilar" que hagis de prémer.

Per sota, però, els motors moderns fan una cosa més llesta que interpretar línia a línia: fan servir compilació JIT (Just In Time, "just a temps"). El motor comença interpretant, observa quines parts del codi s'executen moltes vegades i les tradueix a codi màquina optimitzat sobre la marxa.

• Per a tu, ara: significa que pots escriure una línia, desar, recarregar el navegador i veure el resultat. El cicle d'aprenentatge és rapidíssim.
• Conseqüència important: molts errors no es detecten fins que la línia s'executa. Si tens una errada en una part del programa on no arribes mai, ningú no t'avisa.

En JavaScript les variables no tenen tipus, els valors sí. Una mateixa variable pot desar avui un nombre i tres línies més avall un text. No declares "això és un nombre enter"; simplement hi deses un valor.

• Avantatge: escrius molt de pressa i amb molt poca cerimònia.
• Risc: res no t'impedeix sumar un text amb un nombre per accident. Aquest és l'origen d'una part enorme dels errors dels principiants, i per això hi ha una lliçó sencera dedicada al tema a Conversió de Tipus i Comparacions.

Un paradigma és un estil d'organitzar el codi. JavaScript no t'obliga a triar-ne cap:

Això és una gran llibertat, però també una responsabilitat: tu decideixes com estructurar. Per això aquest curs insisteix des del principi en convencions i bones pràctiques.

JavaScript executa una sola cosa alhora. No hi ha dues parts del teu codi corrent en paral·lel trepitjant-se les dades. Això simplifica moltíssim la vida... sempre que cap instrucció no es quedi bloquejada, perquè mentre alguna cosa bloqueja, tota la resta espera (inclosa la interfície, que es queda congelada).

Com que això seria insuportable per a tasques lentes (demanar dades a un servidor, esperar un temporitzador), JavaScript resol el problema amb un mecanisme anomenat asincronia: encarrega la tasca lenta, continua amb la seva feina i atén el resultat quan arriba. És una de les idees més potents del llenguatge i s'estudia a fons al Mòdul 5.

JavaScript no s'executa "sol": necessita un programa que l'entengui. Aquest programa s'anomena motor de JavaScript.

Un detall clau que estalvia confusions: el llenguatge és el mateix, el que canvia és el que hi ha al seu voltant. Al navegador tens accés a la pàgina, a la finestra i a l'emmagatzematge local; al servidor tens accés al sistema de fitxers i a la xarxa. Sumar dos nombres funciona igual als dos llocs; llegir un fitxer del disc dur només té sentit al servidor.

En aquest curs treballaràs sobretot al navegador, que és on JavaScript brilla i on els resultats es veuen immediatament, i faràs servir Node.js com a eina auxiliar per executar scripts solts i, més endavant, les proves automàtiques.

Aquí hi ha una confusió clàssica que convé resoldre avui mateix.

• ECMAScript és l'especificació: el document oficial que defineix com s'ha de comportar el llenguatge. El manté un comitè anomenat TC39.
• JavaScript és la implementació d'aquesta especificació que fan servir els navegadors i Node.js.

Dit en curt: ECMAScript és la llei, JavaScript és el llenguatge que la compleix. En el dia a dia s'utilitzen gairebé com a sinònims.

Les versions importants que sentiràs anomenar:

Des del 2015 el comitè publica una revisió cada any, amb el nom de l'any (ES2016, ES2017... ES2026). Ja no hi ha salts gegants: hi ha un corrent continu de millores petites.

"JavaScript modern" és l'expressió col·loquial per referir-se a escriure codi d'ES2015 en endavant: let i const en lloc de var, funcions fletxa, template literals, mòduls, promeses i async/await. Aquest curs ensenya JavaScript modern des de la primera lliçó, i només esmenta la sintaxi antiga quan cal perquè entenguis codi que et trobaràs per aquí.

El 1995 Netscape necessitava un llenguatge senzill perquè les pàgines web deixessin de ser documents estàtics. L'encàrrec va recaure en Brendan Eich, que —segons la història que s'explica des de llavors— va tenir uns deu dies per produir un prototip funcional.

La seqüència resumida:

1. 1995: neix amb el nom Mocha, passa a LiveScript i acaba anomenant-se JavaScript per una decisió purament comercial (Java estava de moda). JavaScript i Java són llenguatges diferents i sense parentiu, igual que un cotxe i una catifa.
2. 1996-1999: Microsoft crea la seva pròpia versió per a Internet Explorer. Cada navegador es comporta d'una manera diferent i programar per al web es converteix en un infern d'excepcions.
3. 1997: s'estandarditza com a ECMAScript per posar-hi ordre.
4. 2009: ES5 modernitza el llenguatge i apareix Node.js, que el treu del navegador.
5. 2015: ES6 transforma el llenguatge i arrenca el cicle anual de versions.
6. Avui: és el llenguatge més utilitzat del món i l'estàndard de facto del web.

Per què importa aquesta història? Perquè explica dos fets que et xocaran:

• Té raresses heretades. Dissenyat en setmanes i amb una compatibilitat cap enrere sagrada (trencar el web no és una opció), JavaScript arrossega comportaments estranys que mai no s'han pogut eliminar: typeof null retorna 'object', '5' == 5 és cert, existeixen alhora null i undefined. No són errades teves: són cicatrius històriques.
• Gairebé mai no s'elimina res, s'hi afegeix. Quan alguna cosa surt malament, el comitè hi afegeix una alternativa millor i desaconsella l'anterior. Per això conviuen var i let, o == i ===. Aprendre JavaScript modern consisteix, en bona mesura, a saber quina part del llenguatge fer servir i quina evitar.

Una pàgina web es construeix amb tres tecnologies que fan tres feines diferents i complementàries. L'analogia clàssica és la d'una casa:

Fixa't en les fletxes discontínues: JavaScript pot modificar l'HTML i el CSS mentre la pàgina és oberta. Aquí rau el seu poder. Pot afegir una tasca nova a la llista sense recarregar res, o canviar el color d'una fila quan passa la seva data límit. Aquest mecanisme s'anomena DOM i és tot el Mòdul 6.

Un advertiment útil per no frustrar-te: aquest curs és de JavaScript, no pas d'HTML ni de CSS. Faràs servir una mica d'HTML perquè és imprescindible que el JavaScript tingui on viure, però serà HTML senzill i explicat. No necessites saber CSS avançat per seguir-lo.

Amb JavaScript pots construir, entre moltes altres coses:

• Interfícies interactives: formularis que validen a mesura que escrius, filtres instantanis, menús, taulers arrossegables.
• Aplicacions web completes que funcionen com a programes d'escriptori (correu, fulls de càlcul, editors).
• Visualitzacions de dades: gràfics que s'actualitzen sols.
• Servidors i APIs amb Node.js.
• Aplicacions mòbils i d'escriptori amb la mateixa base de codi.
• Automatitzacions: scripts que reanomenen fitxers, processen dades o generen informes.

Al llarg d'aquest curs construiràs una d'aquestes coses, pas a pas: Nómada Tasques.

Taller Nómada és un petit espai de coworking i taller creatiu (una empresa fictícia creada per a aquest curs). El porten tres persones: la Marta, que coordina; l'Iván, dissenyador; i la Lucía, desenvolupadora. Avui gestionen la seva feina amb notes adhesives a la paret i un grup de missatgeria, i el resultat és previsible: tasques que es perden, ningú no sap qui fa què i les dates límit es descobreixen tard.

Nómada Tasques serà l'aplicació web que resolgui aquest problema. La seva unitat bàsica serà la tasca: una dada amb un títol, una persona responsable, una prioritat, un estat, unes etiquetes, unes hores estimades i una data límit. Per exemple, alguna cosa com això (encara no cal que entenguis la sintaxi, només la idea):

El recorregut, en una frase per mòdul: començaràs desant les dades d'una tasca en variables soltes; després aprendràs a decidir i repetir sobre elles; a agrupar la lògica en funcions; a manejar llistes de tasques; a modelar-les com a objectes i classes; a mostrar-les a la pantalla; a desar-les i sincronitzar-les; i finalment a provar, optimitzar i desplegar l'aplicació sencera.

La lliçó El Projecte del Curs: Nómada Tasques presenta el projecte en detall. Fins llavors, queda't amb el nom i amb la idea: tot el que aprenguis tindrà un lloc on aplicar-se.

Errors habituals en començar

• Confondre JavaScript amb Java. Són llenguatges diferents, d'empreses diferents, amb usos diferents. El nom va ser una decisió de màrqueting del 1995. Si busques ajuda a internet, busca sempre "JavaScript", mai "Java".
• Creure que JavaScript només serveix per al navegador. És el seu hàbitat natural, però avui també és un llenguatge de servidor, de mòbil i d'escriptori.
• Pensar que cal aprendre HTML i CSS a fons abans de començar. No és cert. Amb unes nocions bàsiques d'HTML pots començar amb JavaScript perfectament; aquest curs et donarà el que necessitis.
• Obsessionar-se amb la versió d'ECMAScript. No necessites memoritzar què va arribar amb ES2019. Aprèn JavaScript modern i consulta la referència quan dubtis.
• Copiar codi antic d'internet sense adonar-se'n. Hi ha moltíssim material d'abans del 2015 circulant. Si veus var per tot arreu i cap funció fletxa, probablement estàs llegint codi vell.

Consells

• Escriu el codi, no el llegeixis. Programar és una habilitat motriu a més d'intel·lectual. Teclejar els exemples, equivocar-te i corregir és el que fixa l'aprenentatge.
• Acostuma't a la documentació oficial. MDN Web Docs és la referència de facto de JavaScript i de les APIs del navegador. Buscar "MDN" seguit del nom del que sigui és un hàbit excel·lent.
• Accepta les raresses sense barallar-t'hi. Moltes coses de JavaScript són com són per motius històrics. Aprèn la regla pràctica i tira endavant.
• No et saltis els exercicis. Estan dissenyats perquè descobreixis els errors en un entorn segur.

Indica si cada afirmació és vertadera o falsa i justifica la resposta en una frase.

1. JavaScript i Java són versions diferents del mateix llenguatge.
2. Per executar JavaScript cal compilar-lo abans amb una eina externa.
3. ECMAScript és l'especificació que defineix com s'ha de comportar JavaScript.
4. JavaScript només es pot executar dins d'un navegador.
5. JavaScript executa diverses instruccions alhora en paral·lel.
6. let i const formen part del que s'anomena "JavaScript modern".

Per a cada requisit de Nómada Tasques, decideix si el resol principalment HTML, CSS o JavaScript:

1. La llista de tasques de Taller Nómada apareix com una llista amb un element per tasca.
2. Les tasques de prioritat alta es mostren amb la vora esquerra en vermell.
3. En escriure "Iván" al cercador, la llista mostra només les tasques de l'Iván.
4. Cada targeta de tasca té un títol i un text amb la data límit.
5. En prémer "Marcar com a feta", la tasca canvia de columna sense recarregar la pàgina.
6. En pantalles petites les targetes s'apilen en una sola columna.

Llegeix aquestes dues afirmacions sobre JavaScript:

• '5' == 5 retorna true.
• typeof null retorna 'object'.

Sense saber encara com funcionen aquests operadors, explica amb les teves paraules per què el llenguatge pot tenir comportaments així i per què no s'han corregit. Escriu entre tres i cinc línies.

Exercici 1

1. Fals. Són llenguatges independents, sense cap relació tècnica. El nom "JavaScript" es va triar el 1995 per raons comercials, perquè Java estava de moda.
2. Fals. No hi ha cap pas de compilació previ a càrrec del programador: el codi s'executa directament. El motor sí que compila internament amb JIT, però això és invisible per a tu.
3. Cert. ECMAScript, mantinguda pel comitè TC39, és l'especificació; JavaScript és la implementació que la compleix.
4. Fals. També s'executa en servidors amb Node.js, en aplicacions mòbils i en aplicacions d'escriptori. El que canvia entre entorns no és el llenguatge, sinó les APIs disponibles al seu voltant.
5. Fals. JavaScript és d'un sol fil: executa una instrucció alhora. Gestiona les tasques lentes mitjançant asincronia, no pas mitjançant paral·lelisme del codi que tu escrius.
6. Cert. Totes dues van arribar amb ES6 (ES2015) i formen part del nucli de l'estil modern, davant de var.

Exercici 2

Observació important: en els casos 3 i 5 JavaScript acaba tocant l'HTML i el CSS. Aquesta és exactament la seva funció: modificar l'estructura i l'estil mentre la pàgina és oberta.

Exercici 3

Resposta orientativa: JavaScript es va dissenyar en molt poc temps, el 1995, amb l'objectiu de ser un llenguatge senzill i tolerant per a no programadors. Diverses decisions preses amb pressa (com ara convertir tipus automàticament en comparar, o una errada en la representació interna de null) es van quedar al llenguatge. Corregir-les ara trencaria milions de pàgines web que depenen d'aquest comportament, i la compatibilitat cap enrere és una regla gairebé sagrada al web. Per això, en lloc d'eliminar allò defectuós, el comitè hi afegeix alternatives millors (=== davant de ==) i recomana utilitzar aquestes últimes.

En aquesta lliçó has situat JavaScript al mapa. Saps que és un llenguatge interpretat amb compilació JIT, dinàmic, multiparadigma i d'un sol fil; que s'executa al navegador gràcies a motors com V8 o SpiderMonkey, però també al servidor amb Node.js i en mòbil i escriptori; que ECMAScript és la seva especificació i que "JavaScript modern" vol dir ES2015 en endavant. Has vist que moltes de les seves raresses s'expliquen pels seus deu dies de disseny el 1995 i pel compromís de no trencar el web. I has entès el seu paper al costat d'HTML i CSS: estructura, presentació i comportament, i és JavaScript qui pot modificar els altres dos en calent.

També coneixes ja la destinació del viatge: Nómada Tasques, l'aplicació de gestió de tasques de Taller Nómada, que aniràs construint mòdul a mòdul amb la Marta, l'Iván i la Lucía com a protagonistes de tots els exemples.

Ara toca preparar les eines. A la lliçó següent, Configuració del teu Entorn de Desenvolupament, muntaràs el teu lloc de treball: navegador i DevTools, editor de codi, Node.js i npm, i l'esquelet de carpetes del projecte. Sense entorn no hi ha pràctica, i sense pràctica no hi ha aprenentatge.