Design Lab
Bibliothèque JavaScript

Bibliothèque JavaScript

Même catalogue côté serveur (classe DesignLabCatalog en PHP) et filtrage équivalent en JS (DesignLabCatalogJS) pour une recherche instantanée.

API JSON : api/search.php?type=js&q=fetch

Recherche instantanée (JS) Live — saisissez dans le champ : la liste ci-dessous se met à jour sans recharger.

Debounce

Performance

Limiter la fréquence d’appel d’une fonction (recherche, resize).

debounce délai recherche input performance

function debounce(fn, wait) {
  let t;
  return function (...args) {
    clearTimeout(t);
    t = setTimeout(() => fn.apply(this, args), wait);
  };
}

fetch JSON

Réseau

Requête GET avec parsing JSON et gestion d’erreur HTTP.

fetch json api async promise

async function getJson(url) {
  const res = await fetch(url, { credentials: 'same-origin' });
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.json();
}

DOM prêt

DOM

Exécuter du code une fois le DOM chargé.

dom ready defer listener

function onReady(fn) {
  if (document.readyState !== 'loading') fn();
  else document.addEventListener('DOMContentLoaded', fn);
}

Copier dans le presse-papiers

Copie texte avec repli sur execCommand.

clipboard copier navigator async

async function copyText(text) {
  if (navigator.clipboard?.writeText) {
    await navigator.clipboard.writeText(text);
    return;
  }
  const ta = document.createElement('textarea');
  ta.value = text;
  document.body.appendChild(ta);
  ta.select();
  document.execCommand('copy');
  ta.remove();
}

Paramètres d’URL

URL

Lire les query string en objet.

url query searchparams get

function getQueryParams() {
  return Object.fromEntries(
    new URLSearchParams(window.location.search)
  );
}

localStorage JSON

Stockage

Sauvegarder / lire une structure JSON.

localstorage json persist cache

function saveJson(key, value) {
  localStorage.setItem(key, JSON.stringify(value));
}
function loadJson(key, fallback = null) {
  const raw = localStorage.getItem(key);
  if (raw == null) return fallback;
  try {
    return JSON.parse(raw);
  } catch {
    return fallback;
  }
}

Délégation d’événements

DOM

Un seul listener sur un parent pour des enfants dynamiques.

delegate click dynamique listener

document.body.addEventListener('click', (e) => {
  const btn = e.target.closest('[data-action]');
  if (!btn) return;
  const action = btn.getAttribute('data-action');
  // …
});

Throttle

Performance

Au plus une exécution par intervalle (scroll, resize).

throttle scroll intervalle performance

function throttle(fn, ms) {
  let last = 0;
  return function (...args) {
    const now = Date.now();
    if (now - last >= ms) {
      last = now;
      fn.apply(this, args);
    }
  };
}

Échapper du HTML

Sécurité

Insérer du texte utilisateur sans XSS (template texte).

escape xss textcontent sécurité

function escapeHtml(s) {
  const div = document.createElement('div');
  div.textContent = s;
  return div.innerHTML;
}

Carte verte — accès questionnaire (sessionStorage)

Projet Carte verte

Clé dédiée, stockage de l’e-mail côté client tant que l’onglet reste ouvert (js/acces.js).

carte verte sessionstorage email acces questionnaire golf

const CLE_ACCES = 'carte_verte_email';

function definirAcces(email) {
  sessionStorage.setItem(CLE_ACCES, email.trim());
}

function aUnAcces() {
  const e = sessionStorage.getItem(CLE_ACCES);
  return e !== null && e.trim().length > 0;
}

function retirerAcces() {
  sessionStorage.removeItem(CLE_ACCES);
}

Carte verte — garde côté page HTML

Projet Carte verte

Redirection vers l’accueil si aucune session client (questionnaire.html).

carte verte redirect location garde questionnaire

function redirigerSiPasAcces() {
  if (!aUnAcces()) {
    window.location.href = 'index.html';
  }
}

// Au chargement du questionnaire :
// redirigerSiPasAcces();

Carte verte — structure questions (data-attributes)

Projet Carte verte

Blocs de questions avec points et numéro, base pour correction ou affichage (questionnaire.html).

carte verte data-question data-points formulaire accessibilité

// HTML : chaque bloc porte les métadonnées de scoring côté présentation.
// Exemple :
// <div data-points="2" data-question="1"> … radios … </div>
// <div data-type="plusieurs-reponses" data-points="2" data-question="4"> … cases à cocher … </div>

Carte verte — gabarit HTML rempli côté PHP

Projet Carte verte

str_replace de marqueurs (__CSRF__, __QUESTIONS__) dans un fichier HTML (questionnaire.php).

carte verte template str_replace csrf html

// Côté PHP (logique équivalente) :
// $html = str_replace(
//   ['__CSRF__', '__QUESTIONS__', '__MAX_POINTS__'],
//   [$csrfHiddenInput, $questionsHtml, (string) $max],
//   $html
// );

Design Lab Bibliothèque JavaScript

Bibliothèque JavaScript

Design Lab
Bibliothèque JavaScript