Capítol 3

Operacions i text

JavaScript pot fer càlculs matemàtics i pot demanar dades a l'usuari. Combinant les dues coses, podràs fer programes que rebin informació numèrica, la processin i mostrin el resultat.

Operacions aritmètiques

JavaScript pot fer les operacions matemàtiques habituals. Les escrius com ho faries en una calculadora:

Hi ha dues operacions menys habituals que també són molt útils:

El residu % retorna el que sobra d'una divisió entera. La potència ** fa l'exponenciació.

Si vols la divisió entera (sense decimals), pots fer servir Math.floor(), que arrodoneix cap avall:

Math és un objecte que conté moltes funcions matemàtiques (Math.sqrt, Math.abs, Math.random…). En veurem més al llarg del curs.

Operacions amb variables

Les operacions es poden fer directament amb variables. Això és el que converteix JavaScript en una eina poderosa — pots guardar dades, operar-hi i mostrar el resultat:

Primer es creen les variables base i altura. Després es calcula base * altura i es guarda el resultat a area. Finalment, es mostra tot amb una template literal.

Operacions amb strings

Podem realitzar operacions amb cadenes de caràcters, encara que els símbols tenen significats diferents que amb nombres:

El + entre strings els concatena (enganxa).

Per repetir un string, els strings tenen un mètode .repeat(n). Fixa't que en JavaScript, a diferència d'altres llenguatges, l'operador * NO repeteix strings — només multiplica nombres.

Atenció a aquesta sorpresa: si combines un string amb un nombre usant +, JavaScript converteix automàticament el nombre a text. Executa l'exemple i fixa-t'hi:

La primera línia funciona com t'esperaries: "Tinc 16 anys".

Però la segona línia mostra "2 + 3 = 23", no "2 + 3 = 5"! L'explicació és que JavaScript llegeix d'esquerra a dreta: primer "2 + 3 = " + 2, que dona el text "2 + 3 = 2", i després afegeix el 3, que dona "2 + 3 = 23". Per evitar aquesta confusió, fes servir template literals, que sempre fan el que tu esperaries:

Dins de les claus ${...} de la template literal, l'operació 2 + 3 es calcula primer, així que el resultat és "2 + 3 = 5", que és el que volies.

Demanar dades: prompt()

Fins ara tots els valors estaven escrits directament al codi. Però un programa de veritat sovint necessita rebre dades de fora. La funció prompt() demana una línia de text a l'usuari. Pots passar-li un missatge perquè l'usuari sàpiga què escriure: prompt("Com et dius?").

Al simulador, l'entrada de l'usuari es prepara abans d'executar (en un panell que apareix a sota de la consola, o ja preparada per a tu en aquests exemples). Prem Executa:

L'usuari ha respost Ada, i el programa l'ha desat dins la variable nom.

Una cosa molt important: prompt() sempre retorna un string, encara que l'usuari escrigui un número. Això és font de molts errors quan no ho tens en compte.

Convertir tipus: Number()

Mira què passa si intentes operar matemàticament amb un valor que prové d'un prompt():

Esperaries que sortís 17, però surt "710"! El motiu és que text és el string "7" (perquè prompt() sempre retorna string), i quan el sumes amb 10 es fa concatenació, no suma.

Per solucionar-ho, has de convertir el text a nombre amb la funció Number():

Podem escriure-ho de forma més compacta, fent la conversió directament:

El patró Number(prompt("text")) el veuràs sovint: mostra un missatge a l'usuari, llegeix la resposta i la converteix a nombre en un sol pas.

Múltiples entrades

Cada crida a prompt() demana una línia nova a l'usuari. Si necessites dos valors, fas dues crides:

Al simulador, les diverses entrades es proporcionen com a línies separades. La primera línia respon al primer prompt(), la segona al segon, etc.

Posant-ho tot junt

Ara ja tens les peces per fer un programa complet: llegir dades, operar-hi i mostrar el resultat. L'exemple següent calcula l'àrea i el perímetre d'un rectangle:

Fixa't en l'estructura: llegir → calcular → mostrar.
Molts programes segueixen aquest patró.

Exercici

Escriu un programa que llegeixi dos nombres (un per línia) i imprimeixi la seva suma, la seva diferència i el seu producte, amb el format exacte que veus a sota.

El programa rebrà com a entrada els nombres 12 i 4. La sortida ha de ser exactament:

Suma: 16
Diferència: 8
Producte: 48

Resum

  • JavaScript fa aritmètica amb +, -, *, /, %, **. Per a divisió entera fas Math.floor(a / b).
  • Amb strings, + concatena. Per repetir, fas .repeat(n).
  • Si barreges + entre string i nombre, JavaScript ho converteix tot a string. Fes servir template literals per evitar sorpreses.
  • prompt("missatge") demana una línia a l'usuari. Sempre retorna un string.
  • Number() converteix un string a nombre.
  • El patró Number(prompt("text")) demana, llegeix i converteix en un sol pas.
  • Estructura típica d'un programa: llegir → calcular → mostrar.