Desenvolupament web dinàmic frontend amb javascript: Com ho fem per...?¶
En aquesta secció exposarem diferents exemples de codi per implementar diferents conceptes, per exemple, com capturar un esdeveniment del ratolí obre un element html botó.
Ho estructurarem en 3 blocs:
Sintaxi javascript¶
Activar el mode estricte
Gestionar elements html¶
Modificar el contingut i estil d'un element HTML
Explicació del codi
Tenim dues funcions que s'executen al controlar l'esdeveniment onclick=""
Seleccionar elements del DOM:
document.getElementById("missatge") selecciona el paràgraf amb id="missatge".
Modificar el contingut de l’element:
innerText s’utilitza per canviar el text del paràgraf.
Modificar l’estil de l’element:
classList.toggle("resaltat") afegeix o elimina la classe resaltat, canviant l’estil del text.
<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Control del DOM</title>
<style>
#missatge {
font-size: 20px;
color: blue;
}
.resaltat {
font-weight: bold;
color: red;
}
</style>
</head>
<body>
<h1 id="titol">Hola, món!</h1>
<p id="missatge">Aquest és un missatge dinàmic.</p>
<button onclick="canviarText()">Canvia el Text</button>
<button onclick="canviarEstil()">Canvia l'Estil</button>
<script>
function canviarText() {
// Seleccionem l'element per ID i canviem el text
document.getElementById("missatge").innerText = "El text ha canviat!";
}
function canviarEstil() {
// Afegim una classe CSS per modificar l'estil
document.getElementById("missatge").classList.toggle("resaltat");
}
</script>
</body>
</html>
Crear i eliminar elements HTML
Ara veurem com afegir i eliminar elements dinàmicament.
Això ens permetrà de manera dinàmica generar nous elements i eliminar-los controladament.
Per fer-ho controlarem l'esdeveniment onclick="" d'un botó html. Farem crida a unes funcions declaratives.
Crea un nou element HTML
document.createElement("li")
Afegeix un element nou a la llista
appendChild(novaLlista)
Elimina el darrer element
removeChild(llista.lastChild)
<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Control del DOM</title>
<style>
#missatge {
font-size: 20px;
color: blue;
}
.resaltat {
font-weight: bold;
color: red;
}
</style>
</head>
<body>
<ul id="llista">
<li>Element 1</li>
<li>Element 2</li>
</ul>
<button onclick="afegirElement()">Afegir Element</button>
<button onclick="eliminarElement()">Eliminar Últim Element</button>
<script>
function afegirElement() {
let novaLlista = document.createElement("li"); // Creem un nou <li>
novaLlista.innerText = "Element nou"; // Assignem el text
document.getElementById("llista").appendChild(novaLlista); // Afegim a la llista
}
function eliminarElement() {
let llista = document.getElementById("llista");
if (llista.children.length > 0) {
llista.removeChild(llista.lastChild); // Elimina l'últim <li>
}
}
</script>
</body>
</html>
Controlar esdeveniments¶
Assegurar que un script s'executa després de carregar tot el DOM
Normalment tenim la necessitat d'executar un script que obtenim un element per modificar-ne alguna propietat o estil, i fins que aquest element no està creat pel motor del navegador, si l'script intenta accedir-hi donarà errada.
Per tant, l'objectiu és executar aquest script o esdeveniment al correcte.
Aquest script el volem executar al moment de carregar la pàgina HTML.
Opció 1: Col·locar script al final del codi
Opció 2: Afegir un esdeveniment DOMContentLoaded de DOM totalment carregat
La opció més òptima doncs serà aquesta última, ens assegurarem que una vegada el motor de creació del navegador hagi generat tots els elements HTML llavors podrà executar les instruccions necessàries de javascript.
Podem col·locar l'script a qualsevol lloc de la pàgina o fins i tot externament
document.addEventListener("DOMContentLoaded", function() {
const missatge = document.getElementById("missatge-visita");
}
document.addEventListener() permet afegir l'esdeveniment DOMContentLoaded i s'executarà quan tot el DOM estigui preparat, per tant podrem accedir amb seguretat que existeix l'element
function() {...} usarem una funció anònima com a cos del que volem executar a l'esdeveniment.
<html>
<head>
<script>
document.addEventListener("DOMContentLoaded", function() {
const missatge = document.getElementById("missatge-visita");
// Obtenir la data de l'última visita del localStorage
const ultimaVisita = localStorage.getItem("ultimaVisita");
if (ultimaVisita) {
missatge.textContent = `La teva última visita va ser el ${ultimaVisita}`;
} else {
missatge.textContent = "Aquesta és la teva primera visita!";
}
// Guardar la nova data de visita
const ara = new Date().toLocaleString();
localStorage.setItem("ultimaVisita", ara);
});
</script>
</head>
<body>
<div id="missatge-visita" style="background: lightblue; padding: 10px; border-radius: 5px;">
Carregant...
</div>
</body>
</html>
Depuració de codi¶
Depurar codi JavaScript - console.log
Depurar codi JavaScript és essencial per identificar i corregir errors.
La consola del navegador ens permetrà fer-ne una gestió i seguiment.
La majoria de navegadors tenen eines de desenvolupament integrades. Per accedir-hi:
- Google Chrome / Edge:
F12oCtrl + Shift + I(Windows/Linux) |Cmd + Option + I(Mac) - Firefox:
F12oCtrl + Shift + K - Safari: Habilita les eines de desenvolupament a les preferències (
Advanced -> Show Develop menu), desprésCmd + Option + C
Un cop obertes, utilitza la pestanya "Console" per veure errors i missatges del teu codi.
console.log(): L’eina més bàsica
console.log() és ideal per inspeccionar valors de variables o el flux d'execució.
Si el missatge no apareix, pot ser que el codi no s’estigui executant.
També pots usar altres tipus de missatges:
Depurar codi JavaScript - console - breakpoint
Usarem la consola, per controlar l'execució del codi línia a línia i poder avaluar-ne la seva lògica i també els valors de les variables i objectes.
debugger;: Pausar l'execució
Afegir debugger; al codi farà que l'execució s'aturi en aquest punt si tens obertes les eines del navegador.
Punts d'interrupció (Breakpoints)
A les eines de desenvolupament del navegador:
- Ves a la pestanya "Fonts".
- Carrega el fitxer JavaScript.
- Fes clic en el número de línia on vols parar l'execució (s'afegirà un punt d'interrupció).
- Executa el codi i es pararà en aquest punt. (sovint ho podem fer amb F5)
- Pots inspeccionar variables i avançar línia a línia (
Step Over,Step Into,Step Out).
function calcula() {
let x = 10;
debugger; // Aquí es pararà l’execució i podràs inspeccionar variables
let resultat = x * 2;
console.log(resultat);
}
calcula();
Revisar errors a la consola**
Si el codi té errors, la consola del navegador ho indicarà amb informació detallada. Per exemple:
Això indica que s’està intentant modificar un element que no existeix.
Controlar execució¶
try...catch
Utilitzar try...catch per capturar errors
Si sospites que una part del codi pot generar errors, encapsula’l en un try...catch.
D'aquesta manera el codi quedarà protegit i generarà controladament l'errada.
Podrem capturar l'objecte de l'errada a dins del catch ()