Search Results

API Fetch és el present i el futur de les peticions web, les Fetch API són el vehicle d'última generació per fer consultes a una API. Abans de res, cal fer un aclariment conceptual molt important: AJAX és un concepte (la idea de comunicar-se en segon pla sense...

Aquest seria l'evolució de l'exemple anterior, aquest codi fa exactament el mateix (enviar un token de seguretat, avaluar els codis 404, 500, 403 i extreure el JSON), però utilitzant la sintaxi de fetch combinada amb async/await. Observarem com el codi es lleg...

És en les peticions POST (on hem d'enviar dades al servidor) on la Fetch API ens ajuda més i demostra com de net pot arribar a ser el codi. En aquest exemple, simularem l'enviament de les dades d'un nou usuari (com si vinguessin d'un formulari de registre) cap...

Tal com hem dit anteriorment XMLHttpRequest (XHR) encara no ha mort i segueix sent insubstituïble en certes situacions, com per exemple crear una barra de progres de la pujada d'arxius. Tot i que Fetch és més modern i net, té un defecte històric important: no ...

Després de treballar manualment amb el DOM i les peticions AJAX, treballa amb un framework com Vue.js suposa un canvi de paradigma molt agraït. Ens permetrà automatitzar les tasques més tedioses de la interfície gràfica. D'on sorgeix Vue.js? Vue (es pronunci...

Com sempre un "Hola món" és la millor manera de començar, amb només un fitxer HTML i unes poques línies de codi, podem tenir Vue.js funcionant i modificant la nostra pàgina de forma dinàmica, utilitzarem la versió, Vue 3. Perquè un projecte bàsic de Vue.js fu...

El poder de Vue.js: la reactivitat associada als esdeveniments. A JavaScript clàssic, si volíem que un botó canviés un text, havíem de capturar l'esdeveniment (onclick), buscar l'element al DOM (document.getElementById) i finalment sobreescriure'n el contingut...

Aquest és una de les tasques més repetitives, amb JavaScript tradicional, mostrar i ocultar elements requereix jugar amb element.style.display = 'none' o afegir i treure classes CSS. Amb Vue, es converteix en un procés purament lògic. Introduirem la directiva ...

Si al carregar algun codi de VueJS veus tots els elements i de cop s'amaguen, com per exemple en el codi "Mostrar/Ocultar", veus el div de color vermell i de cop s'oculta. Això que has vist és un fenomen clàssic en el desenvolupament frontend i té un nom tècni...

Una de les directives més potents, satisfactòries i utilitzades de Vue.js: v-for. Amb JavaScript clàssic, per mostrar una llista d'usuaris per pantalla havíem de fer un bucle for o forEach, anar concatenant strings d'HTML (o fent servir document.createElement)...

Per a aquest exemple, utilitzarem JSONPlaceholder, una API pública i gratuïta pensada precisament per fer proves. Farem una petició per obtenir una llista de 10 usuaris ficticis i els mostrarem per pantalla. A més, introduirem un concepte fonamental de Vue: el...

Les propietats computades ens permeten fer un cercador en temps real, amb JavaScript clàssic implicava capturar l'esdeveniment onkeyup, llegir el valor de l'input, buidar el contenidor de la llista al DOM, filtrar l'Array original i tornar a construir tot l'HT...

Amb aquest exemple, acabem amb el cercle de la comunicació web: no només llegim dades del servidor (GET), sinó que en generem de noves i les hi enviem (POST). A l'era de JavaScript clàssic, enviar un formulari suposava capturar l'esdeveniment onsubmit, fer un ...

1. "El codi funciona al Postman, però al navegador em surt un error vermell de CORS!" Aquest és, de llarg, l'ensurt número u del desenvolupador frontend. El problema: Quan es fa un fetch a una API i la consola del navegador mostra un error que diu algu...

El problema de la interpolació de text Fins ara, hem vist que per mostrar el valor d'una variable fem servir la sintaxi de bigotis {{ variable }}. Però, què passa si aquesta variable conté etiquetes HTML per donar-li format? Per exemple, si rebem un text d'un...

Aquest és un apartat fonamental per a qualsevol desenvolupador frontend. Amb JavaScript clàssic, per canviar l'aparença d'un element havíem d'accedir al DOM i utilitzar element.classList.add(), element.classList.remove() o modificar directament element.style. ...

Obtenir l'índex en un Array: (item, index) Sovint no en tenim prou amb l'objecte; necessitem saber en quina posició de la llista estem (per fer un rànquing, per numerar files d'una taula, o per aplicar classes CSS parells/senars). Per fer-ho, afegim uns parèn...

L'enllaç de dades bidireccional (Two-Way Data Binding) amb v-model és una de les característiques més estimades de Vue. Una regla d'or abans de començar: v-model ignorarà completament els atributs HTML inicials com value, checked o selected. Vue sempre conside...

Començarem amb el desenvolupament d'un component, pero separant tota la interficie del codi VueJS, la diferència entre un principiant i algú que comença a pensar com un desenvolupador professional. Per fer això utilitzant només el navegador (sense eines comple...

Utilitzar Vue.js d'aquesta manera (el que s'anomena "enfocament progressiu") dins de vistes de frameworks de backend com CodeIgniter 4 o Laravel és una pràctica molt estesa a la indústria, ja que t'estalvia haver de muntar una API completa i un projecte separa...