JavaScript

Tema 4 · DOM – Interactivitat en pàgines web

Introducció

El DOM (Document Object Model) és la interfície que permet a JavaScript accedir i manipular el contingut, l'estructura i l'estil d'una pàgina web. Amb el DOM podem llegir valors de formularis, actualitzar textos, mostrar resultats de càlculs i respondre a esdeveniments com clics o canvis en camps d'entrada.

Objectius

  • Seleccionar elements amb document.getElementById(), querySelector() i querySelectorAll()
  • Modificar el contingut i els atributs d'elements HTML
  • Escoltar esdeveniments (addEventListener) com click, input, change
  • Crear calculadores interactives per a enginyeria

Selecció i manipulació del DOM

Exemple de lectura d'un formulari i actualització dinàmica:

// HTML associat:
// <input id="tensio" type="number">
// <input id="corrent" type="number">
// <button id="calcular">Calcular</button>
// <p id="resultat"></p>

document.getElementById("calcular").addEventListener("click", function() {
  let V = parseFloat(document.getElementById("tensio").value);
  let I = parseFloat(document.getElementById("corrent").value);
  
  if (isNaN(V) || isNaN(I)) {
    document.getElementById("resultat").textContent = "Introdueix valors vàlids.";
    document.getElementById("resultat").style.color = "red";
    return;
  }
  
  let P = V * I;
  document.getElementById("resultat").textContent = `Potència: ${P.toFixed(2)} W`;
  document.getElementById("resultat").style.color = "green";
});

Esdeveniments i actualització en temps real

Monitorització contínua d'un valor (per exemple, un slider de potència):

// HTML: <input type="range" id="potencia" min="0" max="5000">
//       <span id="valorPotencia"></span>

const slider = document.getElementById("potencia");
const display = document.getElementById("valorPotencia");

slider.addEventListener("input", function() {
  let watts = parseInt(this.value);
  display.textContent = `${watts} W`;
  
  // Canviar color de fons segons el nivell de potència
  if (watts > 3000) {
    display.style.color = "red";
  } else {
    display.style.color = "black";
  }
});

Generació dinàmica de taules

Crear una taula de resultats a partir de dades d'un assaig:

const dades = [
  { temps: 0, temp: 22 },
  { temps: 5, temp: 35 },
  { temps: 10, temp: 48 },
  { temps: 15, temp: 60 }
];

const taula = document.getElementById("taula-resultats");
taula.innerHTML = "<tr><th>Temps (min)</th><th>Temp (°C)</th></tr>";

dades.forEach(punt => {
  const fila = document.createElement("tr");
  fila.innerHTML = `<td>${punt.temps}</td><td>${punt.temp}</td>`;
  taula.appendChild(fila);
});

Exercicis

  1. Crea una pàgina amb dos camps numèrics (tensió i resistència) i un botó que calculi el corrent i el mostri a sota.
  2. Afegeix un slider de temperatura (0–100 °C) i fes que un indicador canviï de color (blau → verd → vermell) segons el valor.
  3. Genera dinàmicament una llista d'elements d'un circuit (resistències, condensadors, etc.) a partir d'un array d'objectes JavaScript.

Mini Projecte – Calculadora de secció de cables interactiva

Construeix una eina web completa amb DOM que calculi la secció d'un cable:

  • Formulari amb camps: tensió (V), potència (W), longitud (m), material (coure/alumini).
  • Botó "Calcular" que llegeixi els valors, calculi el corrent i la secció recomanada.
  • Mostra el resultat en un paràgraf o una targeta destacada, amb colors diferents segons si compleix la normativa.
  • Botó "Netejar" que buidi el formulari i el resultat.
  • Tot ha de funcionar sense recarregar la pàgina.

Pista: utilitza addEventListener per al botó i document.getElementById per accedir als camps.

Tema 3 Índex Tema 5