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)

Cal dir que Node.js, un runtime JavaScript standalone, és principalment compatible amb l'especificació ES6 (veure node.green), però no amb les APIs del 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.