JavaScript

JavaScript sert à rendre les pages web interactives, par exemple des menus qui s'ouvrent, des formulaires qui vérifient la saisie et du contenu qui se met à jour sans recharger la page. JavaScript tourne aussi sur les serveurs grâce à Node.js et fait fonctionner de nombreuses applications mobiles et de bureau. Tous les navigateurs modernes exécutent JavaScript nativement.

JavaScript et Java sont deux langages de programmation distincts qui ne partagent qu'une partie de leur nom. JavaScript s'exécute surtout dans les navigateurs et est typé dynamiquement, alors que Java est typé statiquement et compilé en bytecode pour la machine virtuelle Java. Ce nom proche vient d'une décision marketing des années 1990.

Le DOM, ou Document Object Model, est l'arbre d'objets que le navigateur construit à partir d'une page HTML pour que JavaScript puisse lire et modifier la page. Grâce au DOM, JavaScript peut trouver des éléments, changer du texte, ajouter des classes et créer de nouveaux éléments. Chaque changement visible qu'un script apporte à une page passe par le DOM.

On ajoute du JavaScript à une page HTML avec une balise script, soit en y plaçant directement le code, soit en pointant vers un fichier JavaScript séparé avec l'attribut src. Placer la balise script à la fin du body, ou ajouter l'attribut defer, laisse le HTML se charger d'abord. Les fichiers JavaScript séparés sont plus faciles à mettre en cache et à maintenir.

En JavaScript, let et const ont une portée de bloc, alors que var a une portée de fonction et peut être redéclaré. Une variable const ne peut pas être réaffectée, même si un objet stocké dans une const peut encore changer à l'intérieur. Le JavaScript moderne utilise const par défaut, let quand la valeur doit changer, et évite var.

Les événements en JavaScript sont des signaux que le navigateur envoie quand quelque chose se produit, comme un clic, l'appui sur une touche, l'envoi d'un formulaire ou la fin du chargement d'une page. Un script réagit à un événement en y attachant une fonction d'écoute avec addEventListener. Les écouteurs d'événements permettent à JavaScript de faire réagir la page à l'utilisateur.

La délégation d'événements en JavaScript consiste à attacher un seul écouteur à un élément parent au lieu d'un écouteur sur chaque élément enfant. L'écouteur examine la cible de l'événement pour savoir quel enfant a été cliqué. La délégation utilise moins de mémoire et fonctionne aussi pour les éléments ajoutés plus tard à la page.

En JavaScript, on utilise la fonction fetch pour demander des données à une API, puis on lit le corps avec la méthode json de la réponse. La fonction fetch renvoie une promesse, donc le code attend généralement le résultat avec async et await. Vérifier le statut de la réponse et intercepter les erreurs permet à la page de continuer à fonctionner quand le réseau tombe.

Une promesse (promise) en JavaScript est un objet qui représente une valeur qui sera disponible plus tard, comme le résultat d'une requête réseau. Une promesse est soit en attente, soit tenue, soit rejetée. Le code réagit au résultat avec then et catch, ou avec async et await.

Async et await permettent au code JavaScript d'attendre une promesse d'une façon qui se lit comme un code ordinaire, étape par étape. Une fonction marquée async renvoie toujours une promesse, et await suspend cette fonction jusqu'à ce que la promesse soit réglée. Les erreurs dans les fonctions async se gèrent avec un bloc try et catch classique.

ES6, aussi appelé ECMAScript 2015, est la grande mise à jour de 2015 du standard du langage JavaScript. ES6 a ajouté let et const, les fonctions fléchées, les classes, les template literals, la déstructuration, les modules et les promesses. Tous les navigateurs modernes prennent en charge ES6, et de nouvelles fonctions arrivent dans JavaScript chaque année depuis.

Les fonctions fléchées en JavaScript sont une façon plus courte d'écrire des fonctions avec la syntaxe =>. Une fonction fléchée n'a pas son propre this, donc this garde la valeur du code qui l'entoure. Les fonctions fléchées sont courantes pour les callbacks courts, comme ceux passés à map et filter.

Le JSON, ou JavaScript Object Notation, est un format texte qui stocke et échange des données sous forme de clés et de valeurs. JavaScript transforme un objet en texte JSON avec JSON.stringify et retransforme un texte JSON en objet avec JSON.parse. La plupart des API web envoient et reçoivent leurs données en JSON.

JavaScript est facile à aborder pour un débutant, car un navigateur et un éditeur de texte suffisent. Les parties plus difficiles viennent ensuite, comme le code asynchrone, la portée des variables et les nombreux outils autour du langage. La plupart des apprenants créent des pages interactives utiles en quelques semaines de pratique régulière.

Oui, apprendre le JavaScript natif avant React ou Vue rend ces deux frameworks beaucoup plus faciles à comprendre. Ils reposent tous deux sur les fonctions de base de JavaScript comme les fonctions, les tableaux, les objets, les modules et les promesses. Les développeurs qui maîtrisent les bases savent aussi déboguer le code d'un framework au lieu de deviner.

TypeScript est du JavaScript enrichi de types statiques, développé par Microsoft et compilé en JavaScript classique. Les types permettent à l'éditeur de code de repérer de nombreuses erreurs avant l'exécution. TypeScript est populaire dans les grands projets où de nombreux développeurs partagent le même code.

Pour accélérer le chargement des pages en JavaScript, envoyez moins de JavaScript, chargez les scripts avec defer ou async et découpez les gros bundles pour que chaque page ne charge que ce dont elle a besoin. Minifier et compresser les fichiers réduit leur poids. Garder les traitements lourds hors du thread principal maintient la page réactive aux clics et à la saisie.

En JavaScript, === compare à la fois la valeur et le type, alors que == convertit les types avant de comparer. Par exemple, 0 == "0" vaut true, mais 0 === "0" vaut false. Utiliser === évite les résultats surprenants et c'est la règle habituelle dans le JavaScript moderne.

Les modules JavaScript sont des fichiers séparés qui exportent des fonctions ou des valeurs et importent ce dont ils ont besoin depuis d'autres fichiers. Les modules organisent le code, évitent les variables globales et facilitent la maintenance des grands projets. Les navigateurs chargent un module par une balise script dont l'attribut type vaut module.

On débogue du JavaScript dans le navigateur avec les outils de développement, ouverts avec F12 ou par un clic droit sur la page puis Inspecter. La Console affiche les erreurs et les valeurs journalisées, et le panneau Sources permet de poser des points d'arrêt et d'avancer dans le code ligne par ligne. Le panneau Réseau montre chaque requête de la page et la réponse reçue.

La boucle d'événements (event loop) est le mécanisme qui permet à JavaScript, qui n'a qu'un seul thread, de gérer de nombreuses tâches sans se figer. Les travaux lents comme les minuteurs et les requêtes réseau attendent en arrière-plan, et la boucle d'événements exécute chaque callback terminé quand la pile d'appels est vide. Un code qui dure longtemps bloque quand même la boucle, c'est pourquoi les boucles lourdes rendent une page figée.

Oui, JavaScript tourne sur un serveur grâce à des environnements d'exécution comme Node.js, Deno et Bun. Le JavaScript côté serveur permet de créer des API, de lire des fichiers et de se connecter à des bases de données. Utiliser un seul langage dans le navigateur et sur le serveur permet à une équipe de partager code et compétences.

On sécurise son code JavaScript en n'insérant jamais de texte non fiable dans la page avec innerHTML, en revalidant toutes les saisies côté serveur et en gardant les secrets hors du code front-end. Tout ce qui est envoyé au navigateur peut être lu par les utilisateurs, y compris les clés d'API. Une Content Security Policy et des dépendances à jour bloquent de nombreuses attaques courantes.

En JavaScript, localStorage garde les données uniquement dans le navigateur, alors que les cookies sont envoyés au serveur à chaque requête. Le localStorage contient plus de données et convient aux réglages comme le thème choisi. Les cookies marqués HttpOnly et Secure sont l'endroit le plus sûr pour les sessions de connexion, car les scripts ne peuvent pas les lire.

On écrit du JavaScript facile à maintenir avec de petites fonctions, des noms clairs, des modules, une mise en forme cohérente et un linter comme ESLint. Évitez les variables globales et séparez le code qui modifie le DOM de celui qui gère les données. Les tests automatisés sécurisent les modifications ultérieures.