Introducció

Abans d’escriure codi JavaScript convé entendre on s’executa, quin paper té el navegador i com es relacionen les tecnologies que formen una aplicació web. No existeix una sola tecnologia o plataforma per treballar en l’entorn client, sinó que es treballa amb documents HTML, fulls CSS, codi JavaScript, recursos multimèdia, peticions de xarxa i eines de prova que es combinen dins del navegador.

Aquesta unitat presenta l’arquitectura bàsica client i servidor, des del costat client caldrà reconèixer què fa el navegador, identificar les tecnologies principals, integrar un primer fitxer JavaScript i usar eines de desenvolupament per comprovar que una pàgina funciona correctament.

També veurem límits importants: el codi client s’executa en el dispositiu de l’usuari, no ha de considerar-se secret, no substitueix la seguretat del servidor i està subjecte a restriccions del navegador.

Coneixement previ

• Introducció a HTML
• Ús elemental d’un navegador web.
• Nocions bàsiques de programació.

Referències

• WHATWG HTML Living Standard
• MDN Web Docs - Element script
• MDN Web Docs - Eines de desenvolupament del navegador
• W3C Markup Validation Service

Índex

1. Què significa desenvolupament web en entorn client
2. Client, servidor i cicle de petició-resposta
3. Recursos estàtics i contingut dinàmic
4. Tecnologies base d’una pàgina web
5. El navegador com a plataforma d’execució
   5.1. Motor JavaScript
   5.2. DOM
   5.3. Seqüencial
6. Integrar JavaScript en HTML
7. Eines de treball
8. Seguretat i límits del codi client
9. Compatibilitat i millora progressiva
10. Exercicis

1. Què significa desenvolupament web en entorn client

El desenvolupament web consisteix a crear i mantenir llocs i aplicacions que funcionen a través d’Internet. Per a això hi intervenen diferents tecnologies i professionals encarregats del disseny, la programació, les bases de dades, els servidors i la infraestructura necessària perquè una aplicació web funcioni correctament.

De forma general, el desenvolupament web es divideix en dues grans àrees:

• Desenvolupament en entorn client (Front-end): s’ocupa de la part visible de l’aplicació, és a dir, de tot allò amb què l’usuari interactua des del seu navegador. Utilitza principalment HTML, CSS i JavaScript per construir la interfície, aplicar estils i afegir comportament.
• Desenvolupament en entorn servidor (Back-end): s’encarrega de la lògica de negoci, l’accés a bases de dades, l’autenticació d’usuaris i el processament de la informació abans d’enviar-la al navegador.

A partir d’ara ens centrarem en el desenvolupament en entorn client, és a dir, en el codi que es descarrega i s’executa en el navegador de l’usuari. Aquest codi forma part de l’experiència visible i interactiva d’una pàgina o aplicació web.

Quan visites una web, el navegador rep recursos com documents HTML, fulls CSS, fitxers JavaScript, imatges, fonts i dades. A partir d’aquests recursos construeix la pàgina, aplica estils, executa codi i permet que l’usuari interactuï amb la interfície.

En aquest mòdul ens interessen especialment les tasques del costat client:

• Organitzar la interfície que veurà l’usuari.
• Afegir comportament mitjançant JavaScript.
• Reaccionar a esdeveniments com clics, tecles o enviaments de formularis.
• Validar dades abans d’enviar-les al servidor.
• Modificar parts del document usant el DOM.
• Comunicar-se amb APIs per obtenir o enviar dades.
• Usar llibreries i frameworks quan el projecte ho requereixi.

Encara que client i servidor realitzen funcions diferents, tots dos treballen de forma coordinada. El client proporciona una experiència d’usuari dinàmica i interactiva, mentre que el servidor s’encarrega d’operacions crítiques com l’autenticació, l’aplicació de les regles de negoci, l’accés a bases de dades i la validació definitiva de la informació.

2. Client, servidor i cicle de petició-resposta

Les aplicacions web modernes es basen en un model client-servidor, en el qual diferents components col·laboren per oferir una pàgina o aplicació a l’usuari.

Els tres elements principals són el client, el servidor i la xarxa, que actua com a mitjà de comunicació entre tots dos.

El client és el dispositiu des del qual l’usuari accedeix a una aplicació web. Habitualment és un navegador web, tot i que també pot ser una aplicació mòbil o un programa d’escriptori.

La seva funció consisteix a:

• Sol·licitar recursos al servidor.
• Interpretar documents HTML.
• Aplicar els estils definits en CSS.
• Executar el codi JavaScript.
• Mostrar la interfície i respondre a les accions de l’usuari.

El servidor és l’equip o servei encarregat d’atendre les peticions realitzades pels clients.

Entre les seves funcions principals es troben:

• Processar les sol·licituds rebudes.
• Executar la lògica de negoci de l’aplicació.
• Accedir a bases de dades.
• Validar la informació rebuda.
• Generar i enviar les respostes al client.

El servidor pot estar desenvolupat amb diferents tecnologies, com Java, PHP, C#, Python, Node.js o moltes altres, tot i que totes compleixen el mateix objectiu: processar la informació abans d’enviar-la al navegador.

El client i el servidor no solen trobar-se al mateix equip. La comunicació entre tots dos es realitza a través d’una xarxa, normalment Internet.

Per intercanviar informació utilitzen protocols de comunicació, sent HTTP i la seva versió segura HTTPS els més utilitzats en el desenvolupament web.

Gràcies a aquesta comunicació, el navegador pot sol·licitar recursos i rebre les respostes necessàries per construir la pàgina que veu l’usuari.

L’intercanvi més habitual segueix un cicle de petició-resposta:

1. L’usuari introdueix una URL o prem un enllaç.
2. El navegador envia una petició HTTP al servidor.
3. El servidor processa la sol·licitud i, si és necessari, consulta una base de dades o altres serveis.
4. El servidor retorna una resposta HTTP amb els recursos sol·licitats (normalment HTML).
5. El navegador analitza l’HTML i sol·licita recursos addicionals com CSS, JavaScript o imatges.
6. El navegador construeix la pàgina, aplica estils i executa JavaScript.
7. Si la pàgina necessita més dades, JavaScript pot realitzar noves peticions a una API.

En una web moderna, aquesta comunicació pot repetir-se moltes vegades sense recarregar tota la pàgina. Per exemple, una aplicació pot demanar una llista de productes, mostrar-la i després demanar més dades quan l’usuari filtra o canvia de secció.

3. Recursos estàtics i contingut dinàmic

Un recurs estàtic és un fitxer que el servidor lliura tal com està emmagatzemat. Per exemple, un fitxer index.html, una imatge logo.png, un full styles.css o un script app.js.

Un contingut dinàmic es genera o es modifica en funció d’una situació concreta. Pot dependre de l’usuari, d’una consulta a base de dades, d’una sessió, d’una API o d’una interacció en el navegador.

En desenvolupament web client treballem sobretot amb el dinamisme que ocorre en el navegador: seleccionar elements, respondre a esdeveniments, actualitzar text, mostrar o ocultar missatges, validar formularis o pintar dades rebudes d’una API.

Això no significa que tot hagi de resoldre’s en el client. Una bona arquitectura reparteix responsabilitats: el navegador s’ocupa de la interacció i presentació; el servidor protegeix les dades, aplica regles i respon a peticions.

4. Tecnologies base d’una pàgina web

Una pàgina web es construeix normalment amb tres tecnologies principals:

Exemple:

<!doctype html>
<html lang="ca">
  <head>
    <meta charset="UTF-8">
    <title>Exemple client</title>
    <!-- Enllacem el fitxer CSS extern -->
    <link rel="stylesheet" href="styles.css">
    <!-- Enllacem el fitxer JavaScript extern -->
    <script src="app.js" defer></script>
  </head>
  <body>
    <h1>La meva primera pàgina interactiva</h1>
    <button id="boton">Provar JavaScript</button>
  </body>
</html>

En aquest exemple:

• HTML defineix que hi ha un títol i un botó.
• CSS, si existeix, definirà l’aspecte visual.
• JavaScript, si existeix, podrà afegir comportament al botó.

En aquesta unitat ens centrarem en JavaScript, però és important recordar que HTML i CSS són la base sobre la qual es construeix l’experiència de l’usuari.

5. El navegador com a plataforma d’execució

El navegador no només mostra pàgines. També interpreta HTML, aplica CSS, executa JavaScript, gestiona esdeveniments, controla seguretat, emmagatzema dades locals i permet realitzar peticions de xarxa.

Alguns components importants són:

Cada navegador té la seva pròpia implementació, tot i que tots segueixen estàndards comuns. Per això és important escriure codi basat en documentació actual i provar en navegadors representatius.

5.1. Motor JavaScript

Quan escrivim un programa en JavaScript, el navegador no pot executar directament el codi font que hem escrit. Per a això utilitza un motor JavaScript, que és el component encarregat de llegir, interpretar i executar les instruccions del llenguatge.

Podem imaginar el motor JavaScript com un intèrpret que rep el nostre codi i el converteix en accions que l’ordinador pot realitzar. Gràcies a ell, el navegador pot calcular expressions, executar funcions, crear objectes o respondre als esdeveniments de l’usuari.

Cada navegador incorpora el seu propi motor JavaScript. Tot i que tots executen el mateix llenguatge, cadascun utilitza una implementació diferent.

És important entendre que el motor JavaScript únicament executa el llenguatge JavaScript. Per si sol no sap mostrar una pàgina web, modificar un document HTML o realitzar una petició a Internet.

Per realitzar aquestes tasques, el navegador proporciona al motor una sèrie d’eines denominades APIs del navegador. Aquestes APIs permeten que JavaScript pugui interactuar amb la pàgina web i amb el propi navegador.

Entre les APIs més utilitzades es troben:

• document: permet accedir i modificar el contingut HTML de la pàgina.
• window: representa la finestra del navegador i ofereix nombroses funcionalitats.
• localStorage: permet emmagatzemar informació de forma persistent en el navegador.
• fetch(): permet realitzar peticions HTTP a servidors.

5.2. DOM

El DOM (Document Object Model) és una representació en memòria de l’estructura d’un document HTML. Quan el navegador carrega una pàgina, converteix el codi HTML en un arbre d’objectes. Cada etiqueta HTML, el seu contingut i els seus atributs es transformen en nodes d’aquest arbre.

Gràcies al DOM, JavaScript pot accedir a qualsevol part del document i modificar-la dinàmicament: buscar elements, canviar text, afegir o eliminar nodes, canviar estils o respondre a esdeveniments.

<!DOCTYPE html>
<html lang="ca">
  <head>
    <title>La meva pàgina</title>
  </head>
  <body>
    <h1>Hola Món</h1>
    <p id="saludo">Benvingut</p>
    <ul>
      <li>Element 1</li>
      <li>Element 2</li>
  </body>
</html>

La seva representació en el DOM seria:

En aquesta unitat només necessites entendre la idea general. El DOM es treballarà amb més profunditat en una unitat posterior.

5.3. DevTools

Els navegadors moderns incorporen un conjunt d’eines de desenvolupament (conegudes com a DevTools) que permeten inspeccionar i analitzar el funcionament d’una pàgina web.

Aquestes eines estan dirigides a desenvolupadors i resulten imprescindibles per crear, provar i corregir aplicacions web. Gràcies a elles podem examinar el codi HTML i CSS, executar instruccions JavaScript, analitzar les comunicacions amb el servidor o consultar la informació emmagatzemada pel navegador.

A la majoria de navegadors poden obrir-se prement la tecla F12 o mitjançant la combinació Ctrl + Maj + I (Windows i Linux) o ⌥⌘I (macOS).

Tot i que les eines inclouen nombrosos panells, els més utilitzats són els següents:

Al llarg de les unitats es treballarà directament amb el navegador Google Chrome i les seves DevTools, en el següent contingut s’explica amb més detall aquesta eina.

👉 DevTools de Google Chrome

6. Integrar JavaScript en HTML

El llenguatge JavaScript es combina amb HTML per afegir comportament a les pàgines web. Existeixen diverses formes d’integrar JavaScript en un document HTML:

S’inclou el codi JavaScript directament dins de l’etiqueta <script> en el document HTML. Aquesta forma és útil per a exemples petits, però no és recomanable per a projectes més grans, ja que barreja estructura i comportament.

<!doctype html>
<html lang="ca">
  <head>
    <meta charset="UTF-8">
    <title>Primer script</title>
  </head>
  <body>
    <h1>Provant JavaScript</h1>
    <script>
      console.log('Hola des del script en l\'HTML');
    </script>
  </body>
</html>

El codi JavaScript es col·loca en un fitxer extern amb extensió .js i no dins del propi fitxer HTML.

Aquesta és la forma més recomanable, ja que permet mantenir el codi organitzat i reutilitzable. El fitxer s’enllaça des de l’HTML mitjançant l’etiqueta <script>.

És l’opció més recomanable. Permet mantenir el codi organitzat i reutilitzable. Es crea un fitxer amb extensió .js i s’enllaça des de l’HTML mitjançant l’etiqueta <script src=" " defer>.

L’atribut src indica el fitxer JavaScript que s’ha de carregar. De forma opcional es pot afegir l’atribut defer per descarregar el script sense bloquejar l’anàlisi de l’HTML i executar-lo quan el document ja estigui preparat.

<!doctype html>
<html lang="ca">
  <head>
    <meta charset="UTF-8">
    <title>Primer script</title>
    <script src="app.js" defer></script>
  </head>
  <body>
    <h1>Provant JavaScript</h1>
  </body>
</html>

Fitxer app.js:

console.log('El fitxer JavaScript s\'ha carregat');

Aquest primer exemple no modifica la pàgina. Només confirma que el navegador ha carregat i executat el fitxer JavaScript.

També convé evitar document.write() com a forma de generar contingut. És una tècnica antiga que pot produir comportaments problemàtics i no representa el mode actual de construir interfícies web.

7. Eines de treball

Per començar a desenvolupar codi client no cal un entorn complex. No existeix un únic editor, navegador o sistema de construcció obligatori. El important és entendre la base i treballar amb eines que permetin escriure, provar i depurar codi de forma senzilla.

Les eines recomanades són:

Un flux bàsic de prova pot ser:

1. Crear una carpeta per a l’exercici.
2. Afegir index.html, styles.css i app.js si són necessaris.
3. Enllaçar correctament CSS i JavaScript des de l’HTML.
4. Obrir la pàgina en el navegador.
5. Revisar la consola per comprovar errors.
6. Usar el panell de xarxa per confirmar que els fitxers es carreguen.
7. Validar l’HTML si apareixen comportaments estranys.

En projectes reals s’usen més eines: gestors de paquets, linters, formatejadors, bundlers, frameworks i sistemes de construcció. En aquesta primera unitat el important és entendre la base abans d’afegir capes de complexitat.

8. Seguretat i límits del codi client

El codi JavaScript del client es descarrega en el navegador de l’usuari. Per tant, l’usuari pot veure’l, modificar-lo localment, bloquejar-lo o executar-lo en condicions diferents de les que esperem.

Per això has de tenir en compte les següents recomanacions de seguretat:

• No guardis informació sensible en JavaScript.
• No confiïs únicament en validacions fetes en el navegador.
• No assumeixis que l’usuari executarà sempre el codi previst.
• No connectis directament el client a una base de dades.
• No exposis claus privades, contrasenyes o tokens sensibles en fitxers públics.

El navegador aplica restriccions per reduir riscos. Una de les més importants és la política del mateix origen, que limita com un document d’un origen pot interactuar amb recursos d’un altre origen.

Un origen es defineix, de forma simplificada, per la combinació de protocol, domini i port. Per exemple, https://example.com i http://example.com no tenen el mateix origen perquè canvia el protocol.

El navegador també executa el codi dins d’un entorn controlat. Això limita l’accés directe a fitxers del sistema, dispositius, xarxa i dades d’altres llocs. Algunes capacitats existeixen, però requereixen permisos explícits o APIs específiques.

9. Compatibilitat i millora progressiva

Els navegadors actuals comparteixen molts estàndards, però no tots implementen les mateixes funcions exactament al mateix temps. Per això convé consultar documentació actual, revisar taules de compatibilitat quan s’usi una API nova i provar en més d’un navegador quan el projecte ho justifiqui.

No és recomanable basar l’aprenentatge en taules antigues de compatibilitat ni en navegadors obsolets. L’enfocament adequat és aprendre estàndards actuals i comprovar la compatibilitat de les funcions concretes que vagis a utilitzar.

La millora progressiva consisteix a construir una experiència bàsica que funcioni de forma robusta i afegir millores per a navegadors o dispositius amb més capacitats.

Exemple senzill:

• El contingut principal ha d’estar en HTML i poder entendre’s.
• CSS millora la presentació, però no ha d’ocultar informació essencial sense alternativa.
• JavaScript afegeix interacció, però no ha de ser l’única forma d’accedir a contingut crític si el context exigeix accessibilitat àmplia.

La pàgina Can I Use és una eina de consulta molt útil que permet comprovar quines tecnologies web són compatibles amb cada navegador. És una de les referències més utilitzades per desenvolupadors per saber si poden utilitzar una característica d’HTML, CSS o JavaScript sense problemes de compatibilitat.

10. Exercicis

const username = 'usuari123';
const apiKey = 'laMevaClauSecreta';
const password = 'laMevaContrasenyaSecreta';