Apprendre HTML CSS JavaScript et TypeScript

// Closure basique — compteur privé
function createCounter(initial = 0) {
  let count = initial; // Variable "enfermée"
  
  return {
    increment: () => ++count,
    decrement: () => --count,
    getValue: () => count,
    reset: () => { count = initial; }
  };
}

const counter = createCounter(10);
counter.increment(); // 11
counter.increment(); // 12
counter.getValue();  // 12
// count est inaccessible de l'extérieur ✅

// Factory function — créer des variantes
function createMultiplier(factor) {
  return (number) => number * factor;
}
const double = createMultiplier(2);
const triple = createMultiplier(3);
double(5);  // 10
triple(5);  // 15

// ⚠️ Piège classique avec var dans une boucle
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// Affiche : 3, 3, 3 (pas 0, 1, 2)

// ✅ Solution avec let (block scope)
for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// Affiche : 0, 1, 2

// ─── Lexical Scope (scope chain) ───
const app = 'NovaDash';

function outer() {
  const version = '2.0';
  
  function inner() {
    const module = 'crypto';
    // Accès : module ✅, version ✅, app ✅
    console.log(`${app} v${version} — ${module}`);
  }
  
  inner();
  // Accès : version ✅, app ✅, module ❌
}

// ─── Hoisting — var vs let ───
console.log(a); // undefined (var est remonté)
console.log(b); // ❌ ReferenceError (TDZ)

var a = 1;
let b = 2;

// ─── Hoisting — fonctions ───
// Déclaration → entièrement remontée
greet(); // ✅ "Hello" — fonctionne !
function greet() { console.log('Hello'); }

// Expression → pas remontée
sayBye(); // ❌ TypeError
const sayBye = () => console.log('Bye');

// ─── Block scope ───
if (true) {
  var x = 1;   // Fuit hors du bloc
  let y = 2;   // Reste dans le bloc
  const z = 3; // Reste dans le bloc
}
console.log(x); // 1
console.log(y); // ❌ ReferenceError

// ─── this selon le contexte ───
const user = {
  name: 'Julien',
  greet() {
    console.log(this.name); // 'Julien'
  },
  greetLater() {
    // ❌ this perdu dans setTimeout
    setTimeout(function() {
      console.log(this.name); // undefined
    }, 100);
    
    // ✅ Arrow function → this lexical
    setTimeout(() => {
      console.log(this.name); // 'Julien'
    }, 100);
  }
};

// ─── call / apply / bind ───
function introduce(greeting, emoji) {
  console.log(`${greeting} ${this.name} ${emoji}`);
}

const dev = { name: 'Julien' };

// call — args séparés
introduce.call(dev, 'Salut', '👋');

// apply — args en tableau
introduce.apply(dev, ['Salut', '👋']);

// bind — retourne une nouvelle fonction
const boundIntro = introduce.bind(dev);
boundIntro('Hello', '🚀'); // Hello Julien 🚀

// ─── Cas pratique : emprunt de méthode ───
const logger = {
  prefix: '[LOG]',
  log(msg) { console.log(`${this.prefix} ${msg}`); }
};

const errorLogger = { prefix: '[ERROR]' };
logger.log.call(errorLogger, 'Crash !');
// [ERROR] Crash !

// ─── IIFE — Portée isolée ───
(function() {
  const secret = 'abc123';
  console.log('Initialisé');
  // secret n'existe pas dehors
})();

// Avec paramètres
(function(win, doc) {
  // Alias locaux pour window et document
})(window, document);

// ─── Module Pattern ───
const CryptoWallet = (function() {
  // 🔒 État privé
  let balance = 0;
  const transactions = [];
  
  // Fonction privée
  function log(type, amount) {
    transactions.push({ type, amount, date: new Date() });
  }
  
  // 🔓 API publique
  return {
    deposit(amount) {
      balance += amount;
      log('deposit', amount);
    },
    withdraw(amount) {
      if (amount > balance) throw new Error('Fonds insuffisants');
      balance -= amount;
      log('withdraw', amount);
    },
    getBalance: () => balance,
    getHistory: () => [...transactions] // copie
  };
})();

CryptoWallet.deposit(1000);
CryptoWallet.withdraw(250);
CryptoWallet.getBalance();   // 750
CryptoWallet.getHistory();   // [{...}, {...}]
// CryptoWallet.balance       // undefined 🔒
// CryptoWallet.transactions  // undefined 🔒

// ─── Constructeur + prototype ───
function Crypto(name, symbol) {
  this.name = name;     // Propre à chaque instance
  this.symbol = symbol;
}

// Méthode partagée via prototype
Crypto.prototype.display = function() {
  return `${this.name} (${this.symbol})`;
};

const btc = new Crypto('Bitcoin', 'BTC');
const eth = new Crypto('Ethereum', 'ETH');

btc.display(); // "Bitcoin (BTC)"
eth.display(); // "Ethereum (ETH)"

// Même fonction en mémoire
btc.display === eth.display; // true ✅

// ─── Chaîne de prototypes ───
console.log(
  Object.getPrototypeOf(btc) === Crypto.prototype, // true
  Object.getPrototypeOf(Crypto.prototype) === Object.prototype, // true
  Object.getPrototypeOf(Object.prototype) === null  // true — fin
);

// ─── Vérifications ───
btc instanceof Crypto;           // true
btc.hasOwnProperty('name');      // true (propre)
btc.hasOwnProperty('display');   // false (hérité)
'display' in btc;                // true (remonte la chaîne)

// ─── Object.create — héritage sans new ───
const baseConfig = { theme: 'dark', lang: 'fr' };
const userConfig = Object.create(baseConfig);
userConfig.fontSize = 16;
userConfig.theme;    // 'dark' (hérité)
userConfig.fontSize; // 16 (propre)

class Portfolio {
  // Champ privé (ES2022)
  #holdings = new Map();
  #owner;

  constructor(owner) {
    this.#owner = owner;
  }

  // Méthode publique
  buy(symbol, amount) {
    const current = this.#holdings.get(symbol) || 0;
    this.#holdings.set(symbol, current + amount);
  }

  // Getter
  get totalAssets() {
    return this.#holdings.size;
  }

  // Méthode statique
  static compare(a, b) {
    return a.totalAssets - b.totalAssets;
  }

  // Méthode privée
  #validate(amount) {
    if (amount <= 0) throw new Error('Montant invalide');
  }
}

// ─── Héritage avec extends ───
class PremiumPortfolio extends Portfolio {
  #leverage;

  constructor(owner, leverage = 2) {
    super(owner); // Appel du constructeur parent
    this.#leverage = leverage;
  }

  // Override de méthode
  buy(symbol, amount) {
    super.buy(symbol, amount * this.#leverage);
  }
}

const p = new PremiumPortfolio('Julien', 3);
p.buy('BTC', 1);  // Achète 3 BTC (levier x3)
p.totalAssets;     // 1

// p.#holdings      // ❌ SyntaxError — privé

// ─── Symbol ───
const id = Symbol('userId');
const user = { [id]: 42, name: 'Julien' };
user[id];        // 42
Object.keys(user); // ['name'] — Symbol non listé

// Symbols globaux partagés
const KEY = Symbol.for('app.key');
Symbol.for('app.key') === KEY; // true

// ─── Iterator personnalisé ───
class CryptoList {
  #coins;
  constructor(...coins) { this.#coins = coins; }

  [Symbol.iterator]() {
    let i = 0;
    const coins = this.#coins;
    return {
      next() {
        return i < coins.length
          ? { value: coins[i++], done: false }
          : { done: true };
      }
    };
  }
}

const list = new CryptoList('BTC', 'ETH', 'SOL');
for (const coin of list) console.log(coin);
const arr = [...list]; // ['BTC', 'ETH', 'SOL']

// ─── Generator ───
function* fibonacci() {
  let [a, b] = [0, 1];
  while (true) {
    yield a;
    [a, b] = [b, a + b];
  }
}

const fib = fibonacci();
fib.next().value; // 0
fib.next().value; // 1
fib.next().value; // 1
fib.next().value; // 2

// Generator pour pagination API
async function* fetchPages(url) {
  let page = 1;
  while (true) {
    const res = await fetch(`${url}?page=${page}`);
    const data = await res.json();
    if (data.length === 0) return;
    yield data;
    page++;
  }
}

// ─── Proxy — Validation automatique ───
function createValidated(schema) {
  return new Proxy({}, {
    set(target, prop, value) {
      if (schema[prop]) {
        const { type, min, max } = schema[prop];
        if (typeof value !== type)
          throw new TypeError(`${prop} doit être ${type}`);
        if (min !== undefined && value < min)
          throw new RangeError(`${prop} min: ${min}`);
        if (max !== undefined && value > max)
          throw new RangeError(`${prop} max: ${max}`);
      }
      return Reflect.set(target, prop, value);
    },
    get(target, prop) {
      if (!(prop in target))
        console.warn(`Propriété "${prop}" non définie`);
      return Reflect.get(target, prop);
    }
  });
}

const trade = createValidated({
  amount: { type: 'number', min: 0 },
  symbol: { type: 'string' },
  leverage: { type: 'number', min: 1, max: 100 }
});

trade.symbol = 'BTC';     // ✅
trade.amount = 1000;       // ✅
trade.leverage = 50;       // ✅
// trade.amount = -5;      // ❌ RangeError
// trade.symbol = 123;     // ❌ TypeError

// ─── Proxy — Observable (style Vue.js) ───
function reactive(obj, onChange) {
  return new Proxy(obj, {
    set(target, prop, value) {
      const old = target[prop];
      const result = Reflect.set(target, prop, value);
      if (old !== value) onChange(prop, value, old);
      return result;
    }
  });
}

const state = reactive({ count: 0 }, (prop, val) => {
  console.log(`${prop} changed to ${val}`);
});
state.count = 5; // "count changed to 5"

// ─── Quiz : quel ordre d'affichage ? ───
console.log('1 — Sync');

setTimeout(() => console.log('2 — Timeout'), 0);

Promise.resolve().then(() => console.log('3 — Promise'));

queueMicrotask(() => console.log('4 — Microtask'));

console.log('5 — Sync');

// Résultat :
// 1 — Sync        (call stack)
// 5 — Sync        (call stack)
// 3 — Promise     (microtask)
// 4 — Microtask   (microtask)
// 2 — Timeout     (macrotask)

// ─── Pourquoi c'est important ───
// Les microtasks peuvent bloquer le rendu !
Promise.resolve().then(function loop() {
  // ⚠️ Boucle infinie de microtasks
  // Le navigateur ne peut JAMAIS peindre
  Promise.resolve().then(loop);
});

// ─── requestAnimationFrame ───
function animate(element) {
  let start = null;
  
  function step(timestamp) {
    if (!start) start = timestamp;
    const progress = (timestamp - start) / 1000;
    
    element.style.transform = 
      `translateX(${progress * 200}px)`;
    
    if (progress < 2) {
      requestAnimationFrame(step); // ~60fps
    }
  }
  
  requestAnimationFrame(step);
}

// ─── Promise.all — tout ou rien ───
const [user, trades, prices] = await Promise.all([
  fetch('/api/user').then(r => r.json()),
  fetch('/api/trades').then(r => r.json()),
  fetch('/api/prices').then(r => r.json())
]);
// Si UNE échoue → tout échoue

// ─── Promise.allSettled — résultats partiels ───
const results = await Promise.allSettled([
  fetch('/api/binance'),
  fetch('/api/kraken'),
  fetch('/api/coinbase')
]);

results.forEach(r => {
  if (r.status === 'fulfilled') 
    console.log('OK:', r.value);
  else 
    console.log('Erreur:', r.reason);
});

// ─── Promise.race — timeout pattern ───
function fetchWithTimeout(url, ms = 5000) {
  return Promise.race([
    fetch(url),
    new Promise((_, reject) =>
      setTimeout(() => reject(new Error('Timeout')), ms)
    )
  ]);
}

// ─── Promise.any — premier succès ───
const fastest = await Promise.any([
  fetch('https://api1.example.com/price'),
  fetch('https://api2.example.com/price'),
  fetch('https://api3.example.com/price')
]);
// Retourne la première réponse réussie

// ─── Chaînage avancé ───
const portfolio = await fetch('/api/portfolio')
  .then(r => { if (!r.ok) throw r; return r.json(); })
  .then(data => data.filter(c => c.value > 100))
  .then(filtered => filtered.sort((a, b) => b.value - a.value))
  .catch(err => { console.error(err); return []; })
  .finally(() => console.log('Requête terminée'));

// ─── Main thread (app.js) ───
const worker = new Worker('analyzer.js');

// Envoyer des données au worker
worker.postMessage({
  type: 'ANALYZE',
  prices: [95000, 95200, 94800, 95500, 96000]
});

// Recevoir les résultats
worker.onmessage = (event) => {
  const { sma, rsi, signal } = event.data;
  document.getElementById('signal').textContent = signal;
};

worker.onerror = (err) => console.error('Worker:', err);

// Terminer le worker
// worker.terminate();

// ─── Worker (analyzer.js) ───
self.onmessage = function(event) {
  const { type, prices } = event.data;
  
  if (type === 'ANALYZE') {
    // Calculs lourds sans bloquer l'UI
    const sma = prices.reduce((a, b) => a + b) 
                / prices.length;
    const rsi = calculateRSI(prices);
    const signal = rsi > 70 ? 'SELL' : 
                   rsi < 30 ? 'BUY' : 'HOLD';
    
    // Retourner les résultats
    self.postMessage({ sma, rsi, signal });
  }
};

function calculateRSI(prices) {
  // ... calcul intensif du RSI
  return 65;
}

// ─── Inline Worker (sans fichier séparé) ───
const blob = new Blob([`
  self.onmessage = (e) => {
    const result = e.data * 2;
    self.postMessage(result);
  };
`], { type: 'application/javascript' });

const inlineWorker = new Worker(URL.createObjectURL(blob));

// ─── AbortController — annuler des requêtes ───
let controller = null;

async function searchCrypto(query) {
  // Annuler la requête précédente
  if (controller) controller.abort();
  controller = new AbortController();
  
  try {
    const res = await fetch(`/api/search?q=${query}`, {
      signal: controller.signal
    });
    return await res.json();
  } catch (err) {
    if (err.name === 'AbortError') return; // Ignoré
    throw err;
  }
}

// ─── Debounce ───
function debounce(fn, delay = 300) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), delay);
  };
}

const debouncedSearch = debounce(searchCrypto, 400);
input.addEventListener('input', e => {
  debouncedSearch(e.target.value);
});

// ─── Throttle ───
function throttle(fn, limit = 100) {
  let waiting = false;
  return (...args) => {
    if (waiting) return;
    fn(...args);
    waiting = true;
    setTimeout(() => { waiting = false; }, limit);
  };
}

// ─── Retry avec exponential backoff ───
async function fetchWithRetry(url, retries = 3) {
  for (let i = 0; i < retries; i++) {
    try {
      const res = await fetch(url);
      if (res.ok) return await res.json();
      throw new Error(`HTTP ${res.status}`);
    } catch (err) {
      if (i === retries - 1) throw err;
      const delay = Math.pow(2, i) * 1000; // 1s, 2s, 4s
      await new Promise(r => setTimeout(r, delay));
    }
  }
}

// ─── Singleton avec classe ───
class ApiClient {
  static #instance = null;
  #baseUrl;
  #token;

  constructor(baseUrl) {
    if (ApiClient.#instance) return ApiClient.#instance;
    this.#baseUrl = baseUrl;
    this.#token = null;
    ApiClient.#instance = this;
  }

  setToken(token) { this.#token = token; }

  async get(path) {
    return fetch(`${this.#baseUrl}${path}`, {
      headers: { Authorization: `Bearer ${this.#token}` }
    }).then(r => r.json());
  }
}

const api1 = new ApiClient('https://api.novadash.fr');
const api2 = new ApiClient('https://other.url');
api1 === api2; // true — même instance

// ─── Singleton avec module ES6 (plus simple) ───
// api-client.js
// export default new ApiClient('https://...');
// → Même instance partout grâce au cache du module

// ─── Factory Pattern ───
class Notification {
  static create(type, message) {
    switch (type) {
      case 'success': return new SuccessNotif(message);
      case 'error':   return new ErrorNotif(message);
      case 'warning': return new WarningNotif(message);
      default: throw new Error(`Type inconnu: ${type}`);
    }
  }
}

class SuccessNotif {
  constructor(msg) { this.msg = msg; this.color = '#0f0'; }
  show() { /* ... */ }
}
class ErrorNotif {
  constructor(msg) { this.msg = msg; this.color = '#f00'; }
  show() { /* ... */ }
}

const n = Notification.create('success', 'Trade exécuté');
n.show();

// ─── Observer Pattern ───
class Observable {
  #observers = new Set();

  subscribe(fn) {
    this.#observers.add(fn);
    return () => this.#observers.delete(fn); // unsubscribe
  }

  notify(data) {
    this.#observers.forEach(fn => fn(data));
  }
}

// Utilisation
const priceStream = new Observable();

const unsub = priceStream.subscribe(price => {
  document.getElementById('btc').textContent = price;
});

priceStream.subscribe(price => {
  if (price > 100000) alert('BTC > 100K !');
});

priceStream.notify(95000); // Tous les observers notifiés
unsub(); // Désabonner le premier observer

// ─── EventEmitter (Pub/Sub) ───
class EventBus {
  #events = new Map();

  on(event, handler) {
    if (!this.#events.has(event))
      this.#events.set(event, new Set());
    this.#events.get(event).add(handler);
    return () => this.#events.get(event).delete(handler);
  }

  emit(event, ...args) {
    this.#events.get(event)?.forEach(fn => fn(...args));
  }

  once(event, handler) {
    const unsub = this.on(event, (...args) => {
      handler(...args);
      unsub();
    });
  }
}

// Bus global de l'app
const bus = new EventBus();

// Module A — émet
bus.emit('trade:executed', { symbol: 'BTC', amount: 0.5 });

// Module B — écoute (ne connaît pas A)
bus.on('trade:executed', (trade) => {
  console.log(`Trade: ${trade.symbol}`);
});

// ─── Strategy — Algorithmes interchangeables ───
const sortStrategies = {
  price:  (a, b) => b.price - a.price,
  name:   (a, b) => a.name.localeCompare(b.name),
  volume: (a, b) => b.volume - a.volume,
  change: (a, b) => b.change24h - a.change24h
};

function sortCryptos(cryptos, strategy = 'price') {
  return [...cryptos].sort(sortStrategies[strategy]);
}

const coins = [
  { name: 'Bitcoin', price: 95000, volume: 50e9, change24h: 2.1 },
  { name: 'Ethereum', price: 3200, volume: 20e9, change24h: -1.3 },
];

sortCryptos(coins, 'price');   // Par prix
sortCryptos(coins, 'name');    // Alphabétique
sortCryptos(coins, 'change');  // Par variation

// ─── Command — Undo/Redo ───
class CommandManager {
  #history = [];
  #position = -1;

  execute(command) {
    // Supprimer le futur si on a fait undo
    this.#history.splice(this.#position + 1);
    command.execute();
    this.#history.push(command);
    this.#position++;
  }

  undo() {
    if (this.#position < 0) return;
    this.#history[this.#position].undo();
    this.#position--;
  }

  redo() {
    if (this.#position >= this.#history.length - 1) return;
    this.#position++;
    this.#history[this.#position].execute();
  }
}

// Commande concrète
const addTrade = (portfolio, trade) => ({
  execute: () => portfolio.push(trade),
  undo: () => portfolio.pop()
});

const mgr = new CommandManager();
const portfolio = [];
mgr.execute(addTrade(portfolio, { symbol: 'BTC' }));
mgr.execute(addTrade(portfolio, { symbol: 'ETH' }));
mgr.undo();  // Retire ETH
mgr.redo();  // Remet ETH

// ─── Memoization ───
function memoize(fn) {
  const cache = new Map();
  return (...args) => {
    const key = JSON.stringify(args);
    if (cache.has(key)) return cache.get(key);
    const result = fn(...args);
    cache.set(key, result);
    return result;
  };
}

const expensiveCalc = memoize((prices) => {
  console.log('Calcul RSI...');
  return prices.reduce((a, b) => a + b) / prices.length;
});

expensiveCalc([95, 96, 94]); // "Calcul RSI..." → 95
expensiveCalc([95, 96, 94]); // Cache hit — pas de recalcul

// ─── Currying ───
const curry = (fn) => {
  const arity = fn.length;
  return function curried(...args) {
    if (args.length >= arity) return fn(...args);
    return (...more) => curried(...args, ...more);
  };
};

const formatPrice = curry((currency, decimals, amount) => 
  `${amount.toFixed(decimals)} ${currency}`
);

// Créer des variantes spécialisées
const formatUSD = formatPrice('$', 2);
const formatBTC = formatPrice('BTC', 8);

formatUSD(95000);     // "95000.00 $"
formatBTC(0.00045);   // "0.00045000 BTC"

// ─── Composition (pipe) ───
const pipe = (...fns) => (x) => 
  fns.reduce((acc, fn) => fn(acc), x);

const processPrice = pipe(
  (p) => p * 1.2,           // Ajouter 20% de marge
  (p) => Math.round(p),     // Arrondir
  (p) => formatUSD(p)       // Formater
);

processPrice(100); // "120.00 $"

// ─── Erreurs personnalisées ───
class AppError extends Error {
  constructor(message, code, details = {}) {
    super(message);
    this.name = 'AppError';
    this.code = code;
    this.details = details;
    this.timestamp = new Date().toISOString();
  }
}

class ValidationError extends AppError {
  constructor(field, message) {
    super(message, 'VALIDATION_ERROR', { field });
    this.name = 'ValidationError';
  }
}

class ApiError extends AppError {
  constructor(status, message) {
    super(message, 'API_ERROR', { status });
    this.name = 'ApiError';
  }
}

// Utilisation
async function createTrade(data) {
  if (!data.symbol) 
    throw new ValidationError('symbol', 'Symbole requis');
  
  const res = await fetch('/api/trade', { method: 'POST' });
  if (!res.ok) 
    throw new ApiError(res.status, 'Trade échoué');
  
  return res.json();
}

try {
  await createTrade({});
} catch (err) {
  if (err instanceof ValidationError) {
    showFieldError(err.details.field, err.message);
  } else if (err instanceof ApiError) {
    showToast(`Erreur serveur (${err.details.status})`);
  } else {
    throw err; // Erreur inattendue → remonter
  }
}

// ─── Pattern Result (sans exceptions) ───
async function safeFetch(url) {
  try {
    const res = await fetch(url);
    const data = await res.json();
    return { ok: true, data };
  } catch (error) {
    return { ok: false, error };
  }
}

const result = await safeFetch('/api/price/BTC');
if (result.ok) console.log(result.data);
else console.error(result.error);

// ─── Gestion globale ───
window.addEventListener('unhandledrejection', (e) => {
  console.error('Promise non gérée:', e.reason);
  // Envoyer au service de monitoring
});

// ─── localStorage ───
// Stocker (toujours en string)
localStorage.setItem('theme', 'dark');
localStorage.setItem('user', JSON.stringify({
  name: 'Julien', plan: 'premium'
}));

// Lire
const theme = localStorage.getItem('theme');
const user = JSON.parse(localStorage.getItem('user'));

// Supprimer
localStorage.removeItem('theme');
localStorage.clear(); // Tout supprimer

// Écouter les changements (entre onglets !)
window.addEventListener('storage', (e) => {
  console.log(`${e.key}: ${e.oldValue} → ${e.newValue}`);
});

// ─── Wrapper typé avec expiration ───
const store = {
  set(key, value, ttlMinutes = null) {
    const item = { value, created: Date.now() };
    if (ttlMinutes) item.expires = Date.now() + ttlMinutes * 60000;
    localStorage.setItem(key, JSON.stringify(item));
  },
  get(key) {
    const raw = localStorage.getItem(key);
    if (!raw) return null;
    const item = JSON.parse(raw);
    if (item.expires && Date.now() > item.expires) {
      localStorage.removeItem(key);
      return null; // Expiré
    }
    return item.value;
  }
};

store.set('prices', { BTC: 95000 }, 5); // Expire dans 5min
store.get('prices'); // { BTC: 95000 } ou null

// ─── IndexedDB (simplifié) ───
async function openDB(name, version = 1) {
  return new Promise((resolve, reject) => {
    const req = indexedDB.open(name, version);
    req.onupgradeneeded = (e) => {
      const db = e.target.result;
      db.createObjectStore('trades', { keyPath: 'id' });
    };
    req.onsuccess = () => resolve(req.result);
    req.onerror = () => reject(req.error);
  });
}

const db = await openDB('NovaDash');
const tx = db.transaction('trades', 'readwrite');
tx.objectStore('trades').add({ id: 1, symbol: 'BTC' });

// ─── WebSocket ───
class CryptoSocket {
  #ws; #url; #reconnectDelay = 1000;

  constructor(url) { this.#url = url; this.connect(); }

  connect() {
    this.#ws = new WebSocket(this.#url);
    
    this.#ws.onopen = () => {
      console.log('Connecté');
      this.#ws.send(JSON.stringify({
        action: 'subscribe',
        channels: ['BTC-USD', 'ETH-USD']
      }));
    };

    this.#ws.onmessage = (event) => {
      const data = JSON.parse(event.data);
      this.updateUI(data);
    };

    this.#ws.onclose = () => {
      console.log('Déconnecté — reconnexion...');
      setTimeout(() => this.connect(), this.#reconnectDelay);
      this.#reconnectDelay = Math.min(
        this.#reconnectDelay * 2, 30000
      );
    };
  }

  send(data) {
    if (this.#ws.readyState === WebSocket.OPEN) {
      this.#ws.send(JSON.stringify(data));
    }
  }

  updateUI(data) {
    document.querySelector(`#${data.symbol}`)
      .textContent = data.price;
  }
}

const ws = new CryptoSocket('wss://stream.exchange.com');

// ─── Server-Sent Events ───
const source = new EventSource('/api/stream/prices');

source.onmessage = (event) => {
  const price = JSON.parse(event.data);
  console.log(`${price.symbol}: ${price.value}`);
};

// Événements nommés
source.addEventListener('alert', (e) => {
  const alert = JSON.parse(e.data);
  showNotification(alert.message);
});

source.onerror = () => console.log('SSE reconnexion...');
// source.close(); // Fermer

// ─── IntersectionObserver — Lazy loading ───
const lazyObserver = new IntersectionObserver(
  (entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        img.classList.add('loaded');
        lazyObserver.unobserve(img); // Stop
      }
    });
  },
  { rootMargin: '200px' } // Précharger 200px avant
);

document.querySelectorAll('img[data-src]')
  .forEach(img => lazyObserver.observe(img));

// ─── Animate on scroll ───
const animObserver = new IntersectionObserver(
  (entries) => {
    entries.forEach(entry => {
      entry.target.classList.toggle(
        'visible', entry.isIntersecting
      );
    });
  },
  { threshold: 0.2 } // 20% visible
);

document.querySelectorAll('.el-card')
  .forEach(el => animObserver.observe(el));

// ─── ResizeObserver ───
const resizer = new ResizeObserver((entries) => {
  for (const entry of entries) {
    const { width } = entry.contentRect;
    entry.target.classList.toggle('compact', width < 400);
  }
});
resizer.observe(document.querySelector('.dashboard'));

// ─── MutationObserver ───
const mutObserver = new MutationObserver((mutations) => {
  mutations.forEach(m => {
    if (m.type === 'childList') {
      console.log('Nœuds ajoutés:', m.addedNodes.length);
    }
  });
});
mutObserver.observe(document.body, {
  childList: true, subtree: true
});

// ─── Clipboard API ───
// Copier du texte
async function copyToClipboard(text) {
  try {
    await navigator.clipboard.writeText(text);
    showToast('Copié !');
  } catch (err) {
    // Fallback pour HTTP
    const ta = document.createElement('textarea');
    ta.value = text;
    document.body.appendChild(ta);
    ta.select();
    document.execCommand('copy');
    ta.remove();
  }
}

// Bouton "copier l'adresse wallet"
copyBtn.onclick = () => copyToClipboard('0xABC...DEF');

// ─── Notifications API ───
async function sendNotification(title, body) {
  if (Notification.permission === 'default') {
    await Notification.requestPermission();
  }
  if (Notification.permission === 'granted') {
    new Notification(title, {
      body,
      icon: '/img/logo.png',
      badge: '/img/badge.png',
      tag: 'price-alert', // Remplace la précédente
      requireInteraction: true
    });
  }
}

sendNotification('BTC Alert', 'Bitcoin > 100K $ !');

// ─── Fullscreen API ───
const chart = document.getElementById('chart');

function toggleFullscreen(element) {
  if (!document.fullscreenElement) {
    element.requestFullscreen();
  } else {
    document.exitFullscreen();
  }
}

document.addEventListener('fullscreenchange', () => {
  chart.classList.toggle('fullscreen', 
    !!document.fullscreenElement);
});

// ─── Vibration (mobile) ───
navigator.vibrate?.(200); // Vibrer 200ms
navigator.vibrate?.([100, 50, 100]); // Pattern

// ─── Drag & Drop — Liste réordonneable ───

// Rendre les éléments draggables
document.querySelectorAll('.trade-item').forEach(item => {
  item.draggable = true;
  
  item.addEventListener('dragstart', (e) => {
    e.dataTransfer.setData('text/plain', item.id);
    item.classList.add('dragging');
    e.dataTransfer.effectAllowed = 'move';
  });
  
  item.addEventListener('dragend', () => {
    item.classList.remove('dragging');
  });
});

// Zone de dépôt
const dropzone = document.querySelector('.portfolio');

dropzone.addEventListener('dragover', (e) => {
  e.preventDefault(); // OBLIGATOIRE pour autoriser le drop
  e.dataTransfer.dropEffect = 'move';
  
  // Trouver l'élément le plus proche pour insérer
  const afterEl = getDragAfterElement(dropzone, e.clientY);
  const dragging = document.querySelector('.dragging');
  if (afterEl) {
    dropzone.insertBefore(dragging, afterEl);
  } else {
    dropzone.appendChild(dragging);
  }
});

dropzone.addEventListener('drop', (e) => {
  e.preventDefault();
  const id = e.dataTransfer.getData('text/plain');
  console.log(`Déposé : ${id}`);
});

function getDragAfterElement(container, y) {
  const elements = [...container.querySelectorAll(
    '.trade-item:not(.dragging)')
  ];
  return elements.reduce((closest, child) => {
    const box = child.getBoundingClientRect();
    const offset = y - box.top - box.height / 2;
    if (offset < 0 && offset > closest.offset) {
      return { offset, element: child };
    }
    return closest;
  }, { offset: Number.NEGATIVE_INFINITY }).element;
}

// ─── Performance API ───
performance.mark('start-fetch');
const data = await fetch('/api/data').then(r => r.json());
performance.mark('end-fetch');
performance.measure('API Call', 'start-fetch', 'end-fetch');

const [measure] = performance.getEntriesByName('API Call');
console.log(`API: ${measure.duration.toFixed(2)}ms`);

// ─── Import dynamique (code splitting) ───
button.onclick = async () => {
  const { ChartModule } = await import('./chart.js');
  ChartModule.render(data);
};

// ─── DOM Batching avec DocumentFragment ───
function renderList(items) {
  const fragment = document.createDocumentFragment();
  
  items.forEach(item => {
    const li = document.createElement('li');
    li.textContent = `${item.name}: ${item.price}$`;
    fragment.appendChild(li);
  });
  
  // UN SEUL accès DOM au lieu de N
  document.getElementById('list').appendChild(fragment);
}

// ─── Virtual Scroll (principe) ───
function virtualScroll(container, items, itemHeight) {
  const visibleCount = Math.ceil(
    container.clientHeight / itemHeight
  ) + 2; // Buffer
  
  container.onscroll = () => {
    const scrollTop = container.scrollTop;
    const startIdx = Math.floor(scrollTop / itemHeight);
    const visibleItems = items.slice(
      startIdx, startIdx + visibleCount
    );
    
    renderList(visibleItems);
    // Spacer pour le scroll
    container.style.paddingTop = 
      `${startIdx * itemHeight}px`;
  };
}

// ─── requestIdleCallback ───
requestIdleCallback((deadline) => {
  while (deadline.timeRemaining() > 0) {
    // Tâches non urgentes (analytics, préchargement)
    doBackgroundWork();
  }
});

// ─── XSS — Le problème ───
const userInput = '<img onerror="alert(1)" src=x>';

// ❌ DANGEREUX — exécute le script
element.innerHTML = userInput;

// ✅ SAFE — échappe automatiquement
element.textContent = userInput;

// ─── Sanitization manuelle ───
function sanitizeHTML(str) {
  const div = document.createElement('div');
  div.textContent = str;
  return div.innerHTML;
  // <script> → &lt;script&gt;
}

// ─── Sanitizer API (moderne) ───
// const sanitizer = new Sanitizer();
// element.setHTML(userInput, { sanitizer });

// ─── Échapper pour les URL ───
const query = encodeURIComponent(userInput);
const url = `/search?q=${query}`;
// Empêche l'injection dans l'URL

// ─── Protection CSRF ───
async function secureFetch(url, options = {}) {
  const csrfToken = document.querySelector(
    'meta[name="csrf-token"]'
  )?.content;
  
  return fetch(url, {
    ...options,
    headers: {
      ...options.headers,
      'X-CSRF-Token': csrfToken,
      'Content-Type': 'application/json'
    },
    credentials: 'same-origin' // Cookies same-origin
  });
}

// ─── Validation d'entrée ───
function validateEmail(email) {
  const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!re.test(email)) throw new Error('Email invalide');
  if (email.length > 254) throw new Error('Email trop long');
  return email.toLowerCase().trim();
}

// ─── Stockage sécurisé ───
// ❌ Ne JAMAIS stocker en localStorage :
// - Tokens JWT sensibles
// - Mots de passe
// - Données personnelles en clair
// → Utiliser des cookies HttpOnly + Secure

// ─── WeakMap — métadonnées sans memory leak ───
const metadata = new WeakMap();

function trackElement(element) {
  metadata.set(element, {
    clickCount: 0,
    createdAt: Date.now()
  });
  
  element.addEventListener('click', () => {
    const data = metadata.get(element);
    data.clickCount++;
  });
}

// Si l'élément est supprimé du DOM,
// les métadonnées sont automatiquement GC ✅

// ─── WeakMap — données privées de classe ───
const _private = new WeakMap();

class Wallet {
  constructor(balance) {
    _private.set(this, { balance, pin: null });
  }
  
  get balance() { return _private.get(this).balance; }
  
  setPin(pin) { _private.get(this).pin = pin; }
}

const w = new Wallet(1000);
w.balance;       // 1000
_private.get(w); // { balance: 1000, pin: null }
// Inaccessible sans la référence _private

// ─── WeakRef — Cache intelligent ───
class SmartCache {
  #cache = new Map();

  set(key, value) {
    this.#cache.set(key, new WeakRef(value));
  }

  get(key) {
    const ref = this.#cache.get(key);
    if (!ref) return undefined;
    
    const obj = ref.deref();
    if (!obj) {
      this.#cache.delete(key); // GC a nettoyé
      return undefined;
    }
    return obj;
  }
}

// ─── Éviter les memory leaks ───
// ❌ Event listener jamais supprimé
// element.addEventListener('click', handler);

// ✅ Nettoyer à la destruction
const controller = new AbortController();
element.addEventListener('click', handler, {
  signal: controller.signal
});
// Plus tard : controller.abort(); // Supprime le listener

// ─── structuredClone ───
const original = {
  user: { name: 'Julien' },
  trades: [{ symbol: 'BTC', date: new Date() }],
  meta: new Map([['version', 2]])
};

// Clone profond — indépendant de l'original
const clone = structuredClone(original);
clone.user.name = 'Alice';
original.user.name; // 'Julien' — non affecté ✅
clone.trades[0].date instanceof Date; // true ✅

// ─── JSON avancé ───
// Replacer — filtrer/transformer
const json = JSON.stringify(original, (key, value) => {
  if (key === 'pin') return undefined; // Exclure
  if (value instanceof Date) return value.toISOString();
  return value;
}, 2); // 2 = indentation

// Reviver — transformer à la lecture
const parsed = JSON.parse(json, (key, value) => {
  // Reconvertir les dates ISO en objets Date
  if (typeof value === 'string' && 
      /\d{4}-\d{2}-\d{2}T/.test(value)) {
    return new Date(value);
  }
  return value;
});

// ─── Intl — Formatage localisé ───
// Monnaie
new Intl.NumberFormat('fr-FR', {
  style: 'currency', currency: 'EUR'
}).format(95000); // "95 000,00 €"

new Intl.NumberFormat('en-US', {
  style: 'currency', currency: 'USD',
  notation: 'compact'
}).format(95000); // "$95K"

// Date
new Intl.DateTimeFormat('fr-FR', {
  dateStyle: 'full', timeStyle: 'short'
}).format(new Date()); // "vendredi 28 février 2026 à 14:30"

// Relatif
new Intl.RelativeTimeFormat('fr', { numeric: 'auto' })
  .format(-1, 'day'); // "hier"

// Liste
new Intl.ListFormat('fr', { type: 'conjunction' })
  .format(['BTC', 'ETH', 'SOL']); // "BTC, ETH et SOL"

// Composant fonctionnel avec props
function UserCard({ name, role, avatar }) {
  return (
    <div className="card">
      <img src={avatar} alt={name} />
      <h3>{name}</h3>
      <span className="badge">{role}</span>
    </div>
  );
}

// Utilisation


// Fragment (pas de div wrapper)
function Stats() {
return (
<>
Statistiques
Total : 42

);
}

import { useState } from 'react';

function Counter() {
const [count, setCount] = useState(0);
const [user, setUser] = useState({
name: ‘Julien’, score: 0
});

return (

Compteur : {count}
 setCount(c => c + 1)}>
+1


```
  {/* Mise à jour d'objet (spread) */}
  <button onClick={() => setUser(prev => ({
    ...prev, 
    score: prev.score + 10
  }))}>
    +10 points
  </button>
</div>
```

);
}

import { useState, useEffect } from 'react';

function CryptoPrice({ symbol }) {
const [price, setPrice] = useState(null);
const [loading, setLoading] = useState(true);

// Appel API au montage + quand symbol change
useEffect(() => {
setLoading(true);
fetch(`/api/crypto/${symbol}`)
.then(res => res.json())
.then(data => {
setPrice(data.price);
setLoading(false);
});
}, [symbol]); // ← dépendance

// Timer avec cleanup
useEffect(() => {
const id = setInterval(() => {
console.log(‘refresh…’);
}, 5000);
return () => clearInterval(id); // cleanup
}, []);

if (loading) return 
Chargement…
;
return 
{symbol} : {price} $
;
}

function Dashboard({ user, transactions }) {
  return (
    <div>
      {/* Condition ternaire */}
      {user ? (
        <h2>Bonjour {user.name}</h2>
      ) : (
        <h2>Connectez-vous</h2>
      )}

```
  {/* Affichage conditionnel (&&) */}
  {user?.isAdmin && (
    <button>Panel Admin</button>
  )}

  {/* Liste avec map + key */}
  <ul>
    {transactions.map(tx => (
      <li key={tx.id}>
        {tx.label} — {tx.amount} €
      </li>
    ))}
  </ul>

  {/* Liste vide */}
  {transactions.length === 0 && (
    <p>Aucune transaction</p>
  )}
</div>
```

);
}

import { useRef, useState, useEffect } from 'react';

// useRef — accès DOM
function SearchBar() {
const inputRef = useRef(null);

useEffect(() => {
inputRef.current.focus(); // auto-focus
}, []);

return ;
}

// Custom Hook — logique réutilisable
function useFetch(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

useEffect(() => {
fetch(url)
.then(res => res.json())
.then(setData)
.catch(setError)
.finally(() => setLoading(false));
}, [url]);

return { data, loading, error };
}

// Utilisation du hook
function CryptoList() {
const { data, loading } = useFetch(’/api/cryptos’);
if (loading) return 
Chargement…
;
return data.map(c => 
{c.name}
);
}

// ─── React Router ───
import { BrowserRouter, Routes, Route, Link } 
  from 'react-router-dom';

function App() {
return (



} />
} />
} />
} />


);
}

// ─── Context API ───
import { createContext, useContext, useState } from ‘react’;

const ThemeContext = createContext();

function ThemeProvider({ children }) {
const [dark, setDark] = useState(true);
return (

{children}

);
}

// Dans n’importe quel composant enfant
function Header() {
const { dark, setDark } = useContext(ThemeContext);
return  setDark(!dark)}>
{dark ? ‘☀️’ : ‘🌙’}
;
}

<!-- UserCard.vue -->
<script setup>
// Props typées
const props = defineProps({
  name: { type: String, required: true },
  role: { type: String, default: 'Dev' },
  avatar: String
});
</script>

<script setup>
import { ref, reactive, computed } from 'vue';

// ref — valeurs primitives
const count = ref(0);
const name = ref(‘Julien’);

// reactive — objets
const user = reactive({
name: ‘Julien’,
score: 0,
portfolio: [‘BTC’, ‘ETH’]
});

// computed — valeur calculée (mise en cache)
const doubled = computed(() => count.value * 2);

// Méthodes
function increment() {
count.value++;          // .value dans le script
user.score += 10;       // pas de .value
}

<script setup>
import { ref } from 'vue';

const search = ref(’’);
const cryptos = ref([
{ id: 1, name: ‘Bitcoin’, price: 95000 },
{ id: 2, name: ‘Ethereum’, price: 3200 },
{ id: 3, name: ‘Solana’, price: 180 }
]);
const isLoggedIn = ref(true);

<script setup>
import { ref, watch, watchEffect, 
         onMounted, onUnmounted } from 'vue';

const symbol = ref(‘BTC’);
const price = ref(null);

// watch — observer un changement
watch(symbol, async (newVal, oldVal) => {
console.log(`${oldVal} → ${newVal}`);
const res = await fetch(`/api/price/${newVal}`);
price.value = await res.json();
});

// watchEffect — auto-détection
watchEffect(() => {
document.title = `${symbol.value} : ${price.value}`;
});

// Lifecycle hooks
onMounted(() => {
console.log(‘Composant monté, DOM prêt’);
// Initialiser un timer, chart, WebSocket…
});

let intervalId;
onMounted(() => {
intervalId = setInterval(() => {
// Refresh des prix
}, 5000);
});

onUnmounted(() => {
clearInterval(intervalId); // Nettoyage
});

// ─── Vue Router ───
// router/index.js
import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
history: createWebHistory(),
routes: [
{ path: ‘/’, component: () => import(’./Home.vue’) },
{ path: ‘/crypto/:id’, component: () =>
import(’./CryptoDetail.vue’) },
{ path: ‘/:pathMatch(.*)’, component: NotFound }
]
});

// Dans un composant
import { useRoute, useRouter } from ‘vue-router’;
const route = useRoute();     // route.params.id
const router = useRouter();   // router.push(’/home’)

// ─── Pinia Store ───
// stores/crypto.js
import { defineStore } from ‘pinia’;

export const useCryptoStore = defineStore(‘crypto’, {
state: () => ({
coins: [],
loading: false
}),
getters: {
topCoins: (state) =>
state.coins.slice(0, 10)
},
actions: {
async fetchCoins() {
this.loading = true;
const res = await fetch(’/api/coins’);
this.coins = await res.json();
this.loading = false;
}
}
});

// Utilisation dans un composant
const store = useCryptoStore();
store.fetchCoins();

// user-card.component.ts
import { Component, Input, Output, EventEmitter } 
  from '@angular/core';

@Component({
selector: ‘app-user-card’,
standalone: true,
template: `<div class="card"> <img [src]="avatar" [alt]="name" /> <h3>{{ name }}</h3> <span class="badge">{{ role }}</span> <button (click)="onSelect.emit(name)"> Sélectionner </button> </div>`,
styles: [`.card {  background: rgba(255,255,255,0.05); border-radius: 12px; padding: 16px;  }`]
})
export class UserCardComponent {
@Input() name = ‘’;
@Input() role = ‘Dev’;
@Input() avatar = ‘’;
@Output() onSelect = new EventEmitter();
}

// Utilisation dans un template parent
// 

import { Component, signal, computed, effect } 
  from '@angular/core';

@Component({
selector: ‘app-counter’,
standalone: true,
template: `<p>Compteur : {{ count() }}</p> <p>Double : {{ doubled() }}</p> <button (click)="increment()">+1</button> <button (click)="reset()">Reset</button>`
})
export class CounterComponent {
// Signal — état réactif
count = signal(0);

// Computed — dérivé automatique
doubled = computed(() => this.count() * 2);

// Modification
increment() {
this.count.update(c => c + 1);
}

reset() {
this.count.set(0);
}

constructor() {
// Effect — réaction aux changements
effect(() => {
console.log(`Count changed: ${this.count()}`);
});
}
}

// dashboard.component.ts
@Component({
  selector: 'app-dashboard',
  standalone: true,
  imports: [FormsModule, CurrencyPipe, DatePipe],
  template: `
    <!-- Two-way binding formulaire -->
    <input [(ngModel)]="search" placeholder="Filtrer" />

```
<!-- Nouvelle syntaxe @if (Angular 17+) -->
@if (isLoggedIn()) {
  <h2>Bienvenue {{ userName() }}</h2>
} @else {
  <p>Connectez-vous</p>
}

<!-- @for avec track obligatoire -->
@for (crypto of cryptos(); track crypto.id) {
  <div class="crypto-row">
    <span>{{ crypto.name }}</span>
    <!-- Pipe currency -->
    <span>{{ crypto.price | currency:'USD' }}</span>
    <!-- Property + Event binding -->
    <button 
      [disabled]="crypto.price === 0"
      (click)="selectCrypto(crypto)">
      Détails
    </button>
  </div>
} @empty {
  <p>Aucune crypto trouvée</p>
}

<!-- Pipe date -->
<p>Mis à jour : {{ lastUpdate | date:'short' }}</p>
```

`
})

// services/crypto.service.ts
import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { signal } from '@angular/core';

@Injectable({ providedIn: ‘root’ })
export class CryptoService {
private http = inject(HttpClient);

// État partagé via signals
coins = signal([]);
loading = signal(false);

fetchCoins() {
this.loading.set(true);
this.http.get(’/api/coins’)
.subscribe({
next: (data) => {
this.coins.set(data);
this.loading.set(false);
},
error: (err) => {
console.error(err);
this.loading.set(false);
}
});
}
}

// Utilisation dans un composant
@Component({ … })
export class CryptoListComponent {
// inject() — méthode moderne (Angular 14+)
private cryptoService = inject(CryptoService);

coins = this.cryptoService.coins;
loading = this.cryptoService.loading;

ngOnInit() {
this.cryptoService.fetchCoins();
}
}

// app.routes.ts
import { Routes } from '@angular/router';

export const routes: Routes = [
{ path: ‘’, component: HomeComponent },
{
path: ‘dashboard’,
// Lazy loading — chargé à la demande
loadComponent: () =>
import(’./dashboard/dashboard.component’)
.then(m => m.DashboardComponent),
// Guard — accès authentifié
canActivate: [authGuard]
},
{
path: ‘crypto/:id’,
loadComponent: () =>
import(’./crypto-detail/crypto-detail.component’)
.then(m => m.CryptoDetailComponent)
},
{ path: ‘**’, component: NotFoundComponent }
];

// auth.guard.ts — Guard fonctionnel
import { inject } from ‘@angular/core’;
import { Router } from ‘@angular/router’;

export const authGuard = () => {
const auth = inject(AuthService);
const router = inject(Router);

if (auth.isAuthenticated()) return true;
return router.parseUrl(’/login’);
};

// Dans un template
// 
//   Dashboard
// 
//