JavaScript i APIs
Per a poder desenvolupar al front-end, cal tenir un coneixement de JavaScript avançat basat en l’estàndard ECMAScript ES6 (2015) i que s’utilitza al front-end i a l’entorn de desenvolupament associat.
Veure la pàgina de JavaScript modern per a entendre les funcionalitats base del llenguatge.
Al marge del llenguatge, tenim una sèrie d’APIs que permeten interactuar amb el navegador anomenades Web API:
- Manipulació DOM (DOM API), que inclou, entre d’altres:
- Accés i control d’elements HTML
- Manipulació de dades de formularis
- Accés a la història del navegador
- Scripts en background (Web Workers API)
- Websockets i Server-sent events
- Obtenció de dades d’un servidor (Fetch API)
- Manipulació de gràfics (Canvas i WebGL) i interacció amb àudio i vídeo
- APIs del dispositiu, per exemple, geolocalització
- Emmagatzematge de dades al dispositiu (Web Storage API)
Node.js, un runtime JavaScript fora del navegador, implementa el llenguatge modern (veure node.green) i també algunes d’aquestes APIs, com fetch, WebSocket o els streams web. Però no té DOM: tot el que depèn d’una pàgina (document, elements, finestra) només existeix al navegador.
Esdeveniments
Podem associar un esdeveniment del DOM a una crida d’una funció amb element.addEventListener(event, fn). Podem esborrar el listener amb element.removeEventListener(event, fn).
La funció listener pot tenir un paràmetre, l’esdeveniment. Aquest objecte té la propietat target, que fa referència a l’objecte que origina l’esdeveniment, i type, el tipus d’esdeveniment, entre d’altres.
Manipulació DOM
Alguns mètodes importants que permeten manipular el DOM:
document.querySelector(selector),document.querySelectorAll(selector). Versions clàssiques:getElementById(id),getElementsByTagName(name)…document.createElement(tag),element.appendChild(child),element.removeChild(child),element.remove().
Fetch API
El mètode fetch(resource, options) és la forma estàndard d’obtenir dades de forma asíncrona. Retorna una promesa.