# 1. Introducció al Javascript
# ECMAScript (ES)
**ECMAScript (sovint abreujat com ES)** és l'**especificació (o estàndard)** tècnica que defineix com ha de funcionar el llenguatge de programació **JavaScript**.
### Què és ECMAScript?
ECMAScript és un **estàndard formal** de llenguatge de programació desenvolupat i publicat per **ECMA International** (concretament, el comitè tècnic TC39) sota la denominació **ECMA-262**.
- **Estàndard, no llenguatge:** ECMAScript no és un llenguatge per si mateix; és la **normativa** que defineix la sintaxi, la semàntica, les llibreries estàndard, i les API de *com* ha de ser un llenguatge de *scripting* d'ús general.
- **JavaScript és una implementació:** **JavaScript** és la implementació més coneguda i predominant d'aquest estàndard. Altres implementacions inclouen JScript (de Microsoft) o ActionScript (d'Adobe), tot i que estan gairebé obsoletes.
- **Versions:** Les versions es publiquen anualment. La versió més famosa és **ECMAScript 2015 (ES6)**, que va introduir canvis fonamentals com `let`, `const`, classes i funcions de fletxa. Les versions posteriors s'anomenen per l'any (ES2016, ES2017, etc.).
#### Importància d'ECMAScript
La importància d'ECMAScript rau principalment en la **estandardització, la compatibilitat i l'evolució** del llenguatge web més crucial del món: JavaScript.
##### 1. Garantia de Compatibilitat (Estandardització)
L'estàndard assegura que **JavaScript funcioni de la mateixa manera** independentment d'on s'executi:
- En navegadors diferents (Chrome, Firefox, Safari, Edge).
- En entorns de servidor (Node.js).
- En aplicacions mòbils híbrides.
Sense un estàndard, cada navegador implementaria JavaScript a la seva manera, trencant la interoperabilitat i fent impossible el desenvolupament web universal.
##### 2. Evolució i Modernització del Llenguatge
El procés d'ECMAScript és el motor que permet a JavaScript **evolucionar i adoptar noves funcionalitats** (com el mòduls ES, *async/await* o l'operador *spread*).
- Mantenir-se al dia amb ECMAScript permet als desenvolupadors utilitzar **sintaxi més neta, eficient i robusta**, fent que el codi sigui més fàcil de llegir i mantenir.
##### 3. Foment de la Innovació
En proporcionar un procés clar per proposar i aprovar noves característiques (el procés de "stages"), ECMAScript:
- Impulsa la **innovació** a la plataforma web.
- Permet als creadors de navegadors i a la comunitat de desenvolupament consensuar i provar noves funcionalitats abans que esdevinguin un estàndard.
### Característiques Principals d'ECMAScript 2024 (ES15)
Els canvis principals de l'ES2024 són els següents:
#### 1. Agrupació d'Iterables (`.groupBy()`)
S'afegeixen mètodes per agrupar elements d'arrays i altres iterables segons una clau retornada per una funció de *callback*.
- **`Object.groupBy(iterable, callback)`**: Agrupa els elements en un **objecte** on les claus són els resultats de la *callback*.
- **`Map.groupBy(iterable, callback)`**: Agrupa els elements en un **Map**, la qual cosa és útil si les claus no són de tipus `String` (per exemple, si són objectes o Símbols).
**Cas d'Ús:** Simplifica la classificació d'una llista d'objectes sense haver de fer un `reduce` manualment.
```javascript
const productes = [
{ nom: 'Poma', color: 'vermell' },
{ nom: 'Plàtan', color: 'groc' },
{ nom: 'Cirera', color: 'vermell' }
];
const productesPerColor = Object.groupBy(productes, item => item.color);
/*
{
vermell: [ { nom: 'Poma', color: 'vermell' }, { nom: 'Cirera', color: 'vermell' } ],
groc: [ { nom: 'Plàtan', color: 'groc' } ]
}
*/
```
#### 2. Creació Simplificada de Promises (`Promise.withResolvers()`)
Aquest mètode estàtic proporciona una manera més neta de crear una **Promise** i obtenir directament les seves funcions de resolució (`resolve`) i rebuig (`reject`) sense la necessitat d'encapsular-les.
**Abans (més verbós):**
```javascript
let resolve, reject;
const promesa = new Promise((res, rej) => {
resolve = res;
reject = rej;
});
// ...
```
**Ara (més directe):**
```javascript
const { promise, resolve, reject } = Promise.withResolvers();
// ... es pot cridar resolve() o reject() des de qualsevol lloc
```
#### 3. Novetats en Expressions Regulars: Flag `/v`
S'introdueix el nou *flag* **`/v` (Unicode Sets Mode)** per a les expressions regulars, millorant significativament la gestió de caràcters Unicode:
- **Operacions amb conjunts (`--`, `&&`, `\q{...}`):** Permet realitzar operacions de conjunt (unió, intersecció, diferència) dins de les classes de caràcters. *Exemple:* Utilitzar `[A-Z--[AEIOU]]` per trobar només consonants majúscules.
- **Propietats de cadena Unicode:** Millora la forma de coincidir amb *sequences* d'Unicode complexes, com emojis.
#### 4. Mètodes per a Strings "Ben Formades" (`.isWellFormed()`, `.toWellFormed()`)
Aquests mètodes ajuden a tractar problemes amb la codificació **UTF-16** a JavaScript (concretament, amb els "lone surrogates" que poden causar errors).
- **`string.isWellFormed()`**: Retorna `true` si la cadena no conté seqüències de codificació invàlides (és a dir, si està "ben formada").
- **`string.toWellFormed()`**: Retorna una nova cadena on totes les seqüències mal formades són reemplaçades pel **Caràcter de Reemplaçament Unicode** (`U+FFFD`), assegurant la robustesa.
#### 5. Resizing i Transferència d'ArrayBuffers
Es millora la manipulació de `ArrayBuffer` (utilitzats per dades binàries en contexts d'alt rendiment com WebAssembly o Web Workers).
- **`ArrayBuffer.prototype.resize()`**: Permet canviar la mida d'un `ArrayBuffer` al seu lloc.
- **`ArrayBuffer.prototype.transfer()`**: Permet transferir eficientment la propietat de la memòria d'un `ArrayBuffer` a un altre context (per exemple, a un *Web Worker*) evitant una costosa operació de còpia.
### Estatus ES2025 i Més Enllà
El procés d'ECMAScript és continu. Les funcionalitats que s'han finalitzat (Etapa 4) i que seran part d'**ECMAScript 2025 (ES2025)** inclouen:
- **Import Attributes (`import ... with { type: 'json' }`):** Permet importar mòduls que no són JavaScript (com arxius JSON) de forma nadiua.
- **Iterator Helpers:** Afegeix mètodes útils (`map`, `filter`, `take`, `drop`) a tots els iteradors, no només als Arrays, permetent un codi més expressiu i càrregues *lazy* de dades.
- **Set Methods:** Afegeix operacions matemàtiques de conjunts com `union()`, `intersection()`, i `difference()` a l'objecte `Set`.
# Fonaments de JS
# Javascript dins HTML, on?
Afegir codi JavaScript a una pàgina HTML és un pas fonamental per fer que el lloc web sigui dinàmic i interactiu. Hi ha tres maneres principals de fer-ho,
## 1. JavaScript Intern (Inline)
Aquesta forma implica escriure el codi JavaScript **directament dins de les etiquetes HTML** o dins de l'etiqueta `