Yo la team ! Dans la première partie, on a joué les espions. On a vu comment JavaScript pouvait aspirer une tonne d'infos sur un appareil. Flippant, hein ? Mais ce n'était que l'apéritif. Aujourd'hui, on passe à l'action. On va découvrir que JS n'est pas qu'une balance, c'est aussi un bâtisseur, un artiste et un communicant hors pair. Oublie les alertes "Hello World". On va plonger dans les API qui transforment une simple page web en une application complexe et interactive. De la manipulation de la page en temps réel à la création d'expériences hors-ligne, en passant par le dessin et la communication en direct, tu vas voir que la seule limite, c'est ton imagination (et un peu le navigateur, faut pas déconner). Info ! Encore une fois, tout ce qui suit repose sur des API web standardisées. Ce n'est pas de la magie noire, c'est la puissance que les navigateurs modernes mettent entre tes mains. Utilise-la à bon escient. Prêt à découvrir 10 actions surpuissantes que tu peux réaliser avec quelques lignes de JavaScript ? C'est parti pour le plat de résistance. 1. Manipuler le DOM C'est la base, le pain et le beurre du dev front-end. Le DOM (Document Object Model) est la représentation de ta page HTML sous forme d'objets. Avec JavaScript, tu peux créer, modifier, et supprimer n'importe quel élément de la page après son chargement, sans avoir à recharger quoi que ce soit. C'est le secret derrière toutes les interfaces dynamiques. Titre OriginalTransforme la page ! const button = document.getElementById('action-btn');const container = document.getElementById('container');button.addEventListener('click', () => { // Modifier le contenu existant const h1 = container.querySelector('h1'); h1.textContent = 'Titre Transformé par JS !'; h1.style.color = 'red'; // Créer et ajouter un nouvel élément const newParagraph = document.createElement('p'); newParagraph.textContent = 'Cet élément a été créé de toutes pièces.'; container.appendChild(newParagraph); // Supprimer le bouton button.remove();}); 2. Communiquer avec des serveurs (Fetch API / AJAX) Une page web statique, c'est bien, mais une page qui dialogue avec le monde, c'est mieux. L'API fetch permet d'envoyer des requêtes HTTP à des serveurs et de recevoir des données (souvent au format JSON) sans recharger la page. C'est la technologie derrière les fils d'actualité infinis, les dashboards qui se mettent à jour, et globalement toutes les web-apps modernes. Charger des données utilisateur const loadBtn = document.getElementById('load-data-btn');const dataContainer = document.getElementById('user-data');async function fetchUser() { try { dataContainer.textContent = 'Chargement...'; const response = await fetch('https://jsonplaceholder.typicode.com/users/1'); if (!response.ok) throw new Error(`Erreur HTTP: ${response.status}`); const user = await response.json(); dataContainer.innerHTML = ` Nom : ${user.name} Email : ${user.email} Site Web : ${user.website} `; } catch (error) { dataContainer.textContent = `Impossible de charger les données : ${error.message}`; }}loadBtn.addEventListener('click', fetchUser); 3. Dessiner avec l'API Canvas Besoin de créer des graphiques, des animations complexes ou même des jeux ? L'élément est une toile vierge sur laquelle JavaScript peut dessiner ce qu'il veut, pixel par pixel. C'est une porte d'entrée vers des visualisations de données dynamiques et des expériences interactives riches, bien au-delà de ce que le CSS peut faire. const canvas = document.getElementById('my-canvas');const ctx = canvas.getContext('2d'); // On obtient le contexte de dessin 2D// Dessiner un rectangle rougectx.fillStyle = 'red';ctx.fillRect(10, 10, 150, 75);// Dessiner un cercle bleuctx.fillStyle = 'blue';ctx.beginPath();ctx.arc(250, 50, 40, 0, 2 * Math.PI); // x, y, rayon, angle début, angle finctx.fill();// Écrire du textectx.font = '30px Arial';ctx.fillStyle = 'black';ctx.fillText('Hello Canvas!', 10, 150); 4. Activer le mode Hors-Ligne (Service Workers) C'est l'un des super-pouvoirs les plus récents et les plus impressionnants de JavaScript. Un Service Worker est un script qui s'exécute en arrière-plan, séparément de la page web. Il peut intercepter les requêtes réseau et mettre en cache des ressources. Résultat : ton application peut fonctionner même sans connexion Internet ! C'est la pierre angulaire des Progressive Web Apps (PWA). // Dans ton script principal (ex: main.js)if ('serviceWorker' in navigator) { window.addEventListener('load', () => { navigator.serviceWorker.register('/sw.js') .then(reg => console.log('Service Worker enregistré !', reg)) .catch(err => console.log('Erreur Service Worker:', err)); });} // Dans le fichier sw.js (à la racine de ton site)const CACHE_NAME = 'my-site-cache-v1';const urlsToCache = [ '/', '/style.css', '/main.js'];self.addEventListener('install', event => { event.waitUntil( caches.open(CACHE_NAME) .then(cache => { return cache.addAll(urlsToCache); }) );});self.addEventListener('fetch', event => { event.respondWith( caches.match(event.request) .then(response => { return response || fetch(event.request); }) );}); 5. Communication en Temps Réel (WebSockets) Besoin d'une communication instantanée et bidirectionnelle entre le client et le serveur ? Oublie le rechargement constant. Les WebSockets établissent une connexion persistante, permettant au serveur de "pousser" des données vers le navigateur dès qu'elles sont disponibles. C'est la technologie derrière les applications de chat, les jeux multijoueurs en ligne et les dashboards financiers. Envoyer // On utilise un serveur d'écho public pour la démoconst socket = new WebSocket('wss://echo.websocket.events');const messagesDiv = document.getElementById('messages');const sendBtn = document.getElementById('send-btn');const input = document.getElementById('message-input');socket.onopen = () => { messagesDiv.innerHTML += 'Connecté au serveur WebSocket !';};socket.onmessage = event => { messagesDiv.innerHTML += `Reçu : ${event.data}`;};sendBtn.addEventListener('click', () => { const message = input.value; socket.send(message); messagesDiv.innerHTML += `Envoyé : ${message}`; input.value = '';}); 6. Gérer le Glisser-Déposer (Drag and Drop API) Permettre aux utilisateurs de réorganiser des éléments ou de téléverser des fichiers en les glissant simplement sur la page rend une interface incroyablement intuitive. L'API Drag and Drop de HTML5, entièrement contrôlable en JavaScript, te donne les outils pour gérer chaque étape du processus : quand un glissement commence, quand un élément entre dans une zone cible, et quand il est lâché. #draggable { cursor: grab; background: lightblue; padding: 10px; display: inline-block; } #drop-zone { border: 2px dashed grey; padding: 20px; margin-top: 10px; min-height: 50px; } #drop-zone.hover { background: lightgreen; } Glisse-moi !Dépose ici const draggable = document.getElementById('draggable');const dropZone = document.getElementById('drop-zone');draggable.addEventListener('dragstart', e => { e.dataTransfer.setData('text/plain', e.target.id);});dropZone.addEventListener('dragover', e => { e.preventDefault(); // Nécessaire pour autoriser le drop dropZone.classList.add('hover');});dropZone.addEventListener('dragleave', () => { dropZone.classList.remove('hover');});dropZone.addEventListener('drop', e => { e.preventDefault(); dropZone.classList.remove('hover'); const id = e.dataTransfer.getData('text/plain'); const element = document.getElementById(id); dropZone.appendChild(element); dropZone.innerHTML += 'Élément déposé !';}); 7. Lire des fichiers locaux (File API) Avant, pour traiter un fichier, il fallait l'envoyer sur un serveur. Plus maintenant. L'API File permet à JavaScript de lire le contenu de fichiers sélectionnés par l'utilisateur directement dans le navigateur. Tu peux ainsi prévisualiser des images avant de les uploader, parser un fichier CSV, ou analyser des données sans qu'elles ne quittent jamais l'ordinateur du client. const fileInput = document.getElementById('file-input');const fileInfo = document.getElementById('file-info');fileInput.addEventListener('change', e => { const file = e.target.files[0]; if (file) { fileInfo.innerHTML = ` Nom : ${file.name} Taille : ${file.size} bytes Type : ${file.type} `; }}); 8. Envoyer des Notifications Push Même quand l'utilisateur a fermé ton site, tu peux encore communiquer avec lui. Les notifications push (avec l'aide d'un Service Worker) permettent d'afficher des alertes système pour informer d'un nouveau message, d'une promotion ou de toute autre information importante. C'est un outil de ré-engagement extrêmement puissant, mais à utiliser avec parcimonie pour ne pas devenir un spammeur. M'envoyer une notification const notifyBtn = document.getElementById('notify-btn');function askPermissionAndNotify() { Notification.requestPermission().then(perm => { if (perm === 'granted') { new Notification('Salut la team !', { body: 'Ceci est une notification push envoyée par JS.', icon: 'https://i.ibb.co/8gzjKDdt/image.png' // Optionnel }); } else { alert('Permission de notifier refusée.'); } });}notifyBtn.addEventListener('click', askPermissionAndNotify); 9. Faire vibrer un appareil (Vibration API) Une petite API amusante mais efficace pour le retour utilisateur sur mobile. Tu peux déclencher des vibrations de durées variables pour confirmer une action, signaler une erreur, ou enrichir un jeu. Un simple appel à navigator.vibrate() et le téléphone se met à trembler. Attention, ça ne marche évidemment que sur les appareils qui ont un vibreur ! Faire vibrer ! const vibrateBtn = document.getElementById('vibrate-btn');vibrateBtn.addEventListener('click', () => { if (navigator.vibrate) { // Vibre 200ms, pause 100ms, vibre 200ms navigator.vibrate([200, 100, 200]); } else { alert('Ton appareil ne supporte pas la vibration.'); }}); 10. Intégrer du code ultra-performant (WebAssembly) Quand JavaScript atteint ses limites en termes de performance (calculs intensifs, 3D, traitement vidéo...), WebAssembly (Wasm) prend le relais. Ce n'est pas du JS, mais un format binaire qui s'exécute à des vitesses quasi-natives dans le navigateur. Tu peux compiler du code C++, Rust ou Go en Wasm et l'appeler depuis ton JavaScript. C'est comme donner un moteur de Formule 1 à ta page web. Note : Un exemple de code pour WebAssembly est trop complexe pour être concis ici. Cela implique une étape de compilation (par ex. avec Emscripten pour C++). L'idée est de retenir que JS peut servir de "colle" pour orchestrer des modules Wasm ultra-rapides. Conclusion : Le Web est ton terrain de jeu Tu l'as vu, JavaScript est bien plus qu'un simple langage de script. C'est une plateforme d'application complète, un véritable couteau suisse qui te permet de construire des expériences riches, interactives, performantes et même hors-ligne. Chaque API que nous avons explorée est une porte ouverte vers plus de créativité et de puissance. Ton défi ultime ! Combine plusieurs de ces super-pouvoirs ! Crée une petite application de "To-Do List". Utilise la manipulation du DOM pour ajouter/supprimer des tâches, le Web Storage pour qu'elles persistent après rechargement, l'API Drag and Drop pour les réorganiser, et envoie une notification quand une tâche est terminée. Maintenant, arrête de lire. Va coder des trucs de fou. 🔥 Coding Team