Notions Essentielles de JavaScript pour React et Angular

Évolution et Contexte du JavaScript

Nature du langage : Le JavaScript a considérablement évolué et ne se limite plus aux navigateurs web.
Application moderne : Il est devenu un pilier central dans le développement d'applications avec des frameworks et librairies tels que React et Angular.
Objectif pédagogique : L'étude se concentre sur les éléments fréquemment utilisés dans ces environnements modernes, servant à la fois de rappel et d'introduction théorique pour comprendre l'interaction entre JavaScript, le navigateur et React.

Le DOM (Document Object Model)

Définition : Le DOM est l'interface de programmation (API) essentielle permettant de modifier un document web.
Structure : Il est représenté comme un arbre d'éléments appelé « DOM tree ». * Chaque élément de cet arbre est désigné sous le terme de « nœud ». * Nœud racine : Dans une page web, la racine est la balise <html>. * Enfants directs : La racine possède deux enfants directs : <head> et <body>.
Manipulation : * La modification directe du DOM est jugée fastidieuse, surtout lorsqu'il faut synchroniser l'interface avec une source de données complexe. * Les frameworks modernes (React, Angular) offrent une couche d'abstraction pour automatiser cette synchronisation. * ReactDOM : C'est le package spécifique utilisé par React pour gérer ces interactions en coulisse.
Points critiques à retenir : * Le DOM est l'unique moyen d'interagir avec les éléments de la page web (React l'utilise systématiquement pour les mises à jour). * L'utilisation intensive peut être coûteuse en termes de performance. React propose des solutions d'optimisation pour limiter les modifications de l'interface utilisateur.

Définition des Variables en JavaScript

Flexibilité : Il est possible de créer une variable, de la redéfinir plusieurs fois et de changer son type dynamiquement (ex: passer d'un entier à une chaîne de caractères).
Le mot-clé var : * Historiquement l'unique moyen de déclaration (facultatif à l'origine). * Portée : Contexte d'exécution courant (la fonction ou le contexte global). * Risque : Les variables déclarées sans mot-clé deviennent globales, s'attachant à l'objet window, ce qui est considéré comme une très mauvaise pratique.
Le mot-clé const : * Utilisé pour déclarer des constantes. * Empêche toute modification accidentelle de la valeur après son assignation initiale.
Le mot-clé let : * Comportement similaire à var mais avec une portée limitée au bloc courant et à ses sous-blocs. * Recommandation : C'est le mot-clé à privilégier dans la majorité des cas si la valeur n'est pas une constante.

Les Types de Valeurs

Typage faible : JavaScript est un langage faiblement typé.
Types Primitifs : * Exemples : number, string, boolean, undefined, null. * Propriétés : Ils sont immutables et stockés directement en mémoire. * Passage par valeur : Les affectations et copies se font sur la donnée réelle. Si secondPrenom = prenom, les deux variables deviennent indépendantes.
Types Objets (Non-primitifs) : * Tous les autres types, y compris les fonctions, sont considérés comme des objets. * Les fonctions peuvent recevoir des propriétés et des méthodes (le constructeur function dérive du type object). * Passage par référence : Ces variables pointent vers une adresse mémoire. Si deux variables pointent vers le même objet, modifier l'une affecte l'autre. * Comparaison : * L'opérateur === renvoie true si les deux variables pointent vers la même référence. * Il renvoie false si l'on compare deux objets distincts, même s'ils possèdent des propriétés identiques.

Manipulation des Chaînes de Caractères

Propriété length : Permet de connaître le nombre de caractères, espaces inclus.
Indexation : Le premier caractère commence à l'index $0$ .
Accès : Utilisation de la notation par crochets (ex: maChaine[0]).
Méthodes clés : * indexOf(valeur) : Retourne l'index de la première occurrence. Retourne $-1$ si la valeur est absente. * includes(valeur) : Vérifie la présence d'une sous-chaîne (renvoie un booléen). * startsWith(valeur) : Vérifie si la chaîne commence par les caractères spécifiés.

Les Tableaux (Arrays)

Rôle : Structures de données cruciales pour stocker des collections d'éléments de types variés (nombres, chaînes, objets, ou autres tableaux).
Propriétés : Indexés à partir de $0$ avec une propriété length mise à jour automatiquement lors de modifications.
Méthodes courantes : * .push() : Ajoute un élément à la fin. * .pop() : Supprime et renvoie le dernier élément. * .shift() : Supprime et renvoie le premier élément. * .unshift() : Ajoute un élément au début et retourne la nouvelle length. * .forEach(fonction) : Exécute une fonction sur chaque élément. * .map(fonction) : Crée un nouveau tableau en appliquant une fonction à chaque élément.

Les Objets

Structure : Collection de paires clé-valeur. La clé est une chaîne de caractères (nom de propriété) et la valeur peut être de n'importe quel type.
Accès : Soit par notation pointée (objet.propriete), soit par notation crochet (objet["propriete"]).
Évolutivité : On peut ajouter des propriétés par simple assignation.
Méthodes : Les fonctions définies à l'intérieur d'un objet sont appelées méthodes et agissent comme des actions liées à cet objet.

Les Classes (ES6)

Contexte : Introduites dans ECMAScript 2015 (ES6) pour offrir une syntaxe orientée objet plus claire.
Fonctionnement : Il s'agit de « sucre syntaxique » ; le modèle sous-jacent reste fondé sur les prototypes.
Mots-clés : * class : Pour définir la classe. * extends : Pour l'héritage. * static : Pour définir des méthodes rattachées à la classe elle-même et non à une instance. * get / set : Pour un accès contrôlé aux propriétés (getters et setters).

Fonctions Fléchées (Arrow Functions)

Syntaxe : const maFonction = (param) => { ... }. Plus concise que les fonctions traditionnelles.
Retour implicite : Si le corps contient une seule expression, les accolades peuvent être omises et la valeur est retournée automatiquement.
Contexte this : * C'est leur caractéristique majeure : elles n'ont pas leur propre this. * Elles utilisent le this de la portée englobante (lexical scope).
Usage dans React : Idéal pour les fonctions de rappel (callbacks) car cela évite de perdre le contexte du composant, rendant inutile l'utilisation de .bind() dans le constructeur.

L'Asynchronisme

Définition : Permet d'exécuter des opérations non bloquantes (appels réseau, timers, lectures de fichiers) sans arrêter le reste du code.
Méthodes de gestion : 1. Callbacks : Fonctions passées en argument, appelées à la fin de l'opération. Risque de « callback hell » (code enchevêtré). 2. Promesses (Promises) : Objets représentant un résultat futur. Trois états : pending (en attente), fulfilled (réalisée), rejected (rejetée). Utilisation de .then() pour traiter le succès. 3. Async/Await (ES8/2017) : Syntaxe simplifiée utilisant les promesses pour écrire du code asynchrone de manière plus lisible, quasi-synchrone.

Installation et Outils de Développement

NodeJS : Brique de base nécessaire pour faire tourner les outils de build et gérer les paquets via npm (Node Package Manager). * Version recommandée : Minimum version $20$ (LTS conseillée, ex: $24.14$ à la rédaction). * Site : https://nodejs.org.
Éditeur de code : * VSCode : Le plus répandu pour le frontend grâce à ses extensions (https://code.visualstudio.com). * WebStorm : Alternative payante sous forme d'IDE complet.
Navigateur et DevTools : * Chrome est recommandé, mais Firefox et Edge possèdent des outils similaires. * Accès : Touche [F12] ou clic droit « Inspecter ». * Onglets principaux : * Éléments : Structure HTML et styles CSS. * Console : Logs, erreurs et avertissements JavaScript. * Sources : Débogage du code et points d'arrêt. * Réseau : Inspection des requêtes HTTP. * Périphériques : Test de l'application sur différents écrans. * Performance : Analyse de la fluidité et détection des goulots d'étranglement.