Interaction Homme-Machine sur le Web

Interaction Homme-Machine sur le Web

Événements et DOM

Le DOM (Document Object Model) représente la page HTML comme un arbre d'objets que JavaScript peut lire et modifier. Une interaction utilisateur déclenche un événement auquel on associe un gestionnaire (callback).

Événements courants : click, submit, input, keydown, mouseover, load.

<input id="champ" placeholder="Tapez ici">
<p id="echo"></p>
<script>
  const c = document.getElementById('champ');
  const e = document.getElementById('echo');
  c.addEventListener('input', () => { e.textContent = c.value; });
</script>

Formulaires

<form id="f" method="post" action="/api/contact">
  <input name="email" type="email" required>
  <textarea name="msg" required></textarea>
  <button type="submit">Envoyer</button>
</form>
<script>
  document.getElementById('f').addEventListener('submit', e => {
    e.preventDefault();
    const data = new FormData(e.target);
    fetch(e.target.action, { method: 'POST', body: data });
  });
</script>

L'attribut method vaut GET (paramètres dans l'URL, visible, idempotent) ou POST (corps de requête, pour modifier des données).

Requêtes asynchrones (AJAX / fetch)

L'API fetch envoie une requête HTTP sans recharger la page :

fetch('/api/notes')
  .then(r => r.json())
  .then(notes => afficher(notes))
  .catch(err => console.error(err));

Le serveur répond souvent en JSON, format léger compatible avec les objets JavaScript.

Modèle client–serveur

Côté client	Côté serveur
HTML, CSS, JS	Python, PHP, Node, Java…
Affichage et interactions	Logique métier, base de données
Données vérifiées de nouveau	Toujours revérifier les entrées

Règle d'or de sécurité : ne jamais faire confiance aux données envoyées par le client ; toute validation côté navigateur doit être refaite côté serveur (contournable via console ou outils de développement).

Accessibilité

L'IHM doit être utilisable par tous : balises sémantiques (<button> plutôt que <div>), attributs alt sur les images, contraste suffisant, navigation au clavier, labels associés aux champs.