JavaScript pour le Front-End

DOM et Manipulations

Accès au DOM et événements modernes

Le DOM (Document Object Model) représente la structure de votre page HTML en tant qu’arbre d’objets, ce qui permet de manipuler et d’interagir avec les éléments HTML via JavaScript.

• Accès aux éléments du DOM : Utilisez des méthodes modernes pour accéder à un élément ou à un groupe d’éléments.

  const element = document.querySelector('#monId'); // Sélectionner un élément par ID
  const elements = document.querySelectorAll('.maClasse'); // Sélectionner tous les éléments par classe
  

• Manipulation des éléments : Vous pouvez modifier les éléments du DOM, par exemple, en changeant leur contenu ou en ajoutant des styles.

  element.textContent = "Nouveau texte"; // Modifier le texte
  element.style.backgroundColor = "blue"; // Modifier le style
  

Événements modernes

Les événements sont des interactions utilisateur ou système qui peuvent être capturées par JavaScript.

• Gestion des événements modernes : La méthode addEventListener() est désormais préférée pour lier un événement à un élément.

  element.addEventListener('click', (event) => {
    alert("Élément cliqué !");
  });
  

• Evénements asynchrones et événement DOMContentLoaded : Attendre que le DOM soit entièrement chargé avant d’exécuter des scripts.

  document.addEventListener('DOMContentLoaded', () => {
    console.log("DOM prêt !");
  });
  

Déléguation d’événements

La déléguation d’événements est une technique permettant de gérer les événements de manière plus efficace en les attachant à un parent commun, plutôt qu’à chaque élément individuel.

• Exemple de déléguation d’événements :

  Imaginons un menu avec plusieurs éléments. Plutôt que d’attacher un gestionnaire d’événements à chaque élément de menu, vous pouvez attacher un seul gestionnaire à leur parent commun (comme la <ul>) et filtrer les événements en fonction de l’élément ciblé.

  const menu = document.querySelector('ul');
    
  menu.addEventListener('click', (event) => {
    if (event.target.tagName === 'LI') {
      alert(`Élément ${event.target.textContent} cliqué !`);
    }
  });
  

API Modernes

Local Storage, Session Storage

Les API Local Storage et Session Storage permettent de stocker des données côté client dans le navigateur, mais elles diffèrent par leur durée de vie.

• Local Storage : Permet de stocker des données de manière persistante (même après la fermeture du navigateur).

  localStorage.setItem('nomUtilisateur', 'John');
  const utilisateur = localStorage.getItem('nomUtilisateur');
  

• Session Storage : Permet de stocker des données qui ne sont disponibles que durant la session du navigateur (jusqu’à la fermeture du navigateur).

  sessionStorage.setItem('sessionId', '12345');
  const sessionId = sessionStorage.getItem('sessionId');
  

Web Workers

Les Web Workers permettent d’exécuter des scripts JavaScript en parallèle, sans bloquer le thread principal, ce qui améliore la performance, surtout pour les opérations intensives.

• Exemple de Web Worker :

  Créez un fichier worker.js :

  // worker.js
  onmessage = function(e) {
    const result = e.data * 2;
    postMessage(result);
  };
  

  Puis, dans le fichier principal :

  const worker = new Worker('worker.js');
    
  worker.postMessage(10); // Envoyer une donnée au worker
    
  worker.onmessage = function(e) {
    console.log("Résultat du Worker : ", e.data); // Affiche 20
  };
  

Intersection Observer API

L’Intersection Observer API permet de surveiller l’intersection d’un élément avec un autre élément ou le viewport, utile pour des effets comme le lazy loading des images ou le suivi du défilement de la page.

• Exemple d’Intersection Observer :

  Cet exemple détecte lorsque l’élément est visible dans le viewport et change sa couleur de fond.

  const element = document.querySelector('.element');
    
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.style.backgroundColor = 'green';
      }
    });
  }, { threshold: 0.5 });
  
  observer.observe(element);
  

Conseil : Utilisez l’Intersection Observer API pour les animations au scroll, le lazy loading des images et le suiX

WebSockets

Les WebSockets sont une technologie permettant d’établir une communication bidirectionnelle en temps réel entre un client et un serveur. Contrairement aux requêtes HTTP classiques, qui sont stateless et nécessitent une nouvelle connexion pour chaque échange de données, les WebSockets maintiennent une connexion persistante, ce qui les rend particulièrement adaptés aux applications nécessitant des mises à jour en temps réel (chat, notifications, jeux en ligne, etc.).

Création d’une connexion WebSocket

L’API WebSocket est simple à utiliser en JavaScript. Voici comment établir une connexion à un serveur WebSocket :

const socket = new WebSocket('wss://example.com/socket');

// Événement déclenché lorsque la connexion est ouverte
socket.addEventListener('open', (event) => {
  console.log("Connexion WebSocket établie !");
  socket.send('Hello serveur !'); // Envoi d'un message au serveur
});

// Événement déclenché lorsqu'un message est reçu
socket.addEventListener('message', (event) => {
  console.log('Message reçu du serveur :', event.data);
});

// Événement déclenché lorsque la connexion est fermée
socket.addEventListener('close', (event) => {
  console.log("Connexion WebSocket fermée", event);
});

// Événement déclenché en cas d'erreur
socket.addEventListener('error', (event) => {
  console.error("Erreur WebSocket", event);
});

Utilisation des WebSockets pour un chat en temps réel

Voici un exemple simple d’application de chat utilisant les WebSockets :

const socket = new WebSocket('wss://monchat.com/socket');
const input = document.querySelector('#message');
const button = document.querySelector('#envoyer');
const messages = document.querySelector('#messages');

// Envoi d'un message
button.addEventListener('click', () => {
  if (input.value.trim() !== '') {
    socket.send(input.value);
    input.value = '';
  }
});

// Réception d'un message
socket.addEventListener('message', (event) => {
  const msg = document.createElement('li');
  msg.textContent = event.data;
  messages.appendChild(msg);
});

Avantages des WebSockets

• Communication bidirectionnelle : envoi et réception de données en temps réel.
• Connexion persistante : évite les allers-retours inutiles comme avec HTTP.
• Performance : réduit la latence et la consommation de bande passante.

Les WebSockets sont largement utilisés dans les applications modernes nécessitant une interaction en temps réel, comme les jeux multijoueurs, les tableaux de bord financiers et les systèmes de messagerie instantanée.

Programmation Réactive

Programmation réactive avec RxJS (Introduction)

RxJS (Reactive Extensions for JavaScript) est une bibliothèque pour la programmation réactive qui permet de manipuler des flux de données de manière déclarative et asynchrone.

• Concepts clés : Les Observables, les opérateurs (map, filter, mergeMap, etc.) et la gestion des événements en continu.

• Exemple avec RxJS :

  Cet exemple montre comment capturer les clics d’un bouton et les traiter de manière réactive.

  import { fromEvent } from 'rxjs';
  import { map } from 'rxjs/operators';
  
  const button = document.querySelector('button');
  const clickStream = fromEvent(button, 'click').pipe(
    map(() => 'Clic détecté')
  );
  
  clickStream.subscribe(message => console.log(message));
  

Conseil : RxJS est très puissant pour les applications front-end complexes nécessitant des manipulations asynchrones comme les appels API ou les interactions utilisateur multiples.

Intégration avec React

La programmation réactive s’intègre très bien avec des frameworks comme React, où les états peuvent être gérés de manière réactive via des Observables ou des hooks.

• Exemple avec React et RxJS : Utilisation d’un Observable pour gérer l’état dans un composant React.

  import { useState, useEffect } from 'react';
  import { fromEvent } from 'rxjs';
  
  const App = () => {
    const [clicks, setClicks] = useState(0);
  
    useEffect(() => {
      const clickStream = fromEvent(document, 'click');
      const subscription = clickStream.subscribe(() => setClicks(prev => prev + 1));
  
      return () => subscription.unsubscribe(); // Nettoyage à la suppression du composant
    }, []);
  
    return <div>Nombre de clics : {clicks}</div>;
  };
  
  export default App;
  

Conseil : RxJS peut être utilisé dans React pour gérer des flux d’événements complexes, surtout lorsqu’il s’agit de synchroniser plusieurs actions asynchrones.