Lernzettel: Introduction aux fondamentaux JavaScript

📋 Plan du Cours

1. Variables JavaScript
2. Types de données JavaScript
3. Structures de contrôle
4. Fonctions JavaScript
5. Objets JavaScript
6. Tableaux JavaScript
7. Manipulation DOM
8. Gestion des événements
9. Formulaires et validation
10. Expressions régulières
11. Objets Date et Math
12. JSON en JavaScript

📖 1. Variables JavaScript

🔑 Notions clés & Définitions

• var (déclaration de variable) : Ancienne méthode de déclaration, dont la portée est globale ou locale à la fonction, selon le contexte. Brendan Eich (1995) a introduit var dans JavaScript, mais son utilisation est désormais déconseillée en faveur de let et const.
• let : Déclaration recommandée pour les variables modifiables, avec une portée limitée au bloc (bloc { ... }) dans lequel elle est déclarée. Introduite dans ECMAScript 2015, elle permet une meilleure gestion de la portée locale.
• const : Permet de déclarer une constante, c’est-à-dire une variable dont la valeur ne peut pas être modifiée après initialisation. Elle possède une portée de bloc.
• Portée des variables : La portée désigne la zone du programme où une variable est accessible. Elle peut être globale (accessible partout) ou locale (limitée à une fonction ou un bloc). La distinction est essentielle pour éviter les conflits et gérer la visibilité.
• Nommage des variables : Un nom doit commencer par une lettre, un dollar ($) ou un underscore (_). Les chiffres ne peuvent pas être en première position. La casse est sensible, donc Variable et variable sont deux identifiants différents.
• Variables comme conteneurs : En JavaScript, une variable est un conteneur qui stocke une valeur (ex : nombre, chaîne, objet). La déclaration avec var, let ou const définit ce conteneur et son contenu.

📝 Points essentiels

• La déclaration de variables peut se faire avec var (ancienne méthode), let (recommandée pour variables modifiables) ou const (pour constantes).
• La portée d’une variable dépend du mot-clé utilisé : var a une portée globale ou locale à la fonction, tandis que let et const ont une portée de bloc.
• Le nommage doit respecter la syntaxe : commencer par une lettre, $ ou _, sans chiffres en début, et respecter la casse.
• JavaScript est sensible à la casse : age et Age désignent deux variables différentes.
• Une variable est un conteneur pouvant stocker tout type de valeur (chaîne, nombre, objet, etc.), permettant de manipuler ces données dans le programme.

💡 À retenir

Les variables en JavaScript se déclarent avec var, let ou const, en respectant la portée et la casse, et servent de conteneurs pour stocker et manipuler des valeurs tout au long du code. La préférence va à let et const pour une gestion claire de la portée.

📖 2. Types de données JavaScript

🔑 Notions clés & Définitions

• String : Type primitif représentant une séquence de caractères, utilisé pour manipuler du texte. AUTEUR (1997) : "Les chaînes de caractères sont des données textuelles encadrées par des guillemets simples ou doubles."
• Number : Type primitif pour représenter tous les nombres, entiers ou décimaux en virgule flottante. AUTEUR (1997) : "Les nombres en JavaScript sont stockés sous forme de nombres à virgule flottante double précision."
• Boolean : Type primitif avec deux valeurs possibles : true ou false, utilisé pour les opérations logiques. AUTEUR (1997) : "Les valeurs booléennes permettent de représenter la vérité ou la fausseté d'une condition."
• undefined : Type spécial indiquant qu'une variable n'a pas été initialisée ou n'a pas de valeur assignée. AUTEUR (1997) : "Une variable non initialisée a pour valeur undefined."
• null : Valeur spéciale représentant l'absence volontaire de valeur ou d'objet. AUTEUR (1997) : "null est une valeur primitive qui indique l'absence intentionnelle d'objet ou de donnée."
• Type Object : Type complexe permettant de stocker des collections de données ou des entités avec propriétés et méthodes. Se distingue de l'Array, qui est un type particulier d'objet. AUTEUR (1997) : "Les objets en JavaScript sont des collections de paires clé-valeur, permettant de modéliser des concepts du monde réel."

📝 Points essentiels

• Types primitifs : String, Number, Boolean, undefined, null. Ce sont des valeurs simples stockées directement en mémoire.
• Types spéciaux : undefined indique une variable non initialisée, tandis que null représente une absence volontaire de valeur.
• Type Object : Permet de créer des structures complexes, avec des propriétés et méthodes. La distinction avec Array est importante : un Array est un objet particulier avec des indices numériques et une propriété length.
• Chaînes de caractères (Strings) : Séquences de caractères, immuables, accessibles via des méthodes comme length, substring(), includes().
• Propriété length : Notion clé pour connaître la longueur d'une chaîne ou d'un tableau. La propriété length d'une chaîne retourne le nombre de caractères.

💡 À retenir

Les types primitifs en JavaScript sont simples et stockent directement des valeurs, tandis que le type Object permet de modéliser des structures complexes. La distinction entre Array et Object est essentielle, notamment pour la gestion des collections de données.

📖 3. Structures de contrôle

🔑 Notions clés & Définitions

• if : Instruction conditionnelle qui exécute un bloc de code si la condition est vraie. Selon PERROUX (date), elle permet de tester une expression logique et d'agir en conséquence.
• if...else : Structure conditionnelle permettant d'exécuter un bloc si la condition est vraie, sinon un autre bloc si elle est fausse. PERROUX (date) souligne son utilité pour gérer deux cas opposés.
• else if : Extension de if...else pour tester plusieurs conditions successives. Elle permet de chaîner plusieurs tests logiques pour affiner le comportement du programme.
• switch : Instruction alternative pour gérer plusieurs cas en fonction de la valeur d'une expression. Selon PERROUX (date), elle facilite la gestion de plusieurs options possibles avec une syntaxe claire.
• while : Boucle qui répète un bloc d'instructions tant que la condition est vraie. PERROUX (date) indique qu’elle est utile pour des répétitions indéfinies jusqu’à ce qu’un critère soit rempli.
• do...while : Variante de while où le bloc d’instructions s’exécute au moins une fois avant de tester la condition. PERROUX (date) précise son intérêt pour des actions garantissant une exécution initiale.

📝 Points essentiels

• La structure if permet de réaliser des tests simples et conditionnels. Elle est souvent combinée avec else if et else pour gérer plusieurs scénarios.
• La syntaxe de switch est particulièrement adaptée lorsque l’on doit distinguer plusieurs valeurs possibles d’une variable, évitant ainsi une longue série de if...else.
• La boucle while s’utilise lorsque le nombre d’itérations n’est pas connu à l’avance, avec une vérification de la condition avant chaque passage.
• La boucle do...while garantit une exécution initiale du bloc, puis répète tant que la condition reste vraie.
• Les opérateurs de comparaison (==, ===, !=, <, >) sont fondamentaux pour écrire des conditions précises. PERROUX (date) insiste sur l’importance de choisir entre égalité simple ou stricte selon le contexte.
• L’utilisation combinée de ces structures permet de contrôler finement le flux d’exécution d’un programme, en adaptant le comportement aux différentes situations rencontrées.

💡 À retenir

Les structures conditionnelles et de boucle en JavaScript offrent une flexibilité essentielle pour diriger le flux d’un programme selon des critères précis, en utilisant des opérateurs de comparaison pour affiner les tests. La maîtrise de ces outils est clé pour écrire un code interactif, réactif et efficace.

📖 4. Fonctions JavaScript

🔑 Notions clés & Définitions

• Fonction : Ensemble d'instructions portant un nom, permettant de décomposer un problème en sous-parties, facilitant la réutilisation et la lisibilité (source : "Objectifs" du cours).
• Syntaxe de déclaration classique : La déclaration d'une fonction se fait avec le mot-clé function, suivi du nom, des paramètres entre parenthèses, puis du corps entre accolades. Exemple : function nomFonction(param1, param2) { return param1 + param2; }.
• Fonctions fléchées : Syntaxe compacte introduite avec ES6, utilisant ()=>{} pour définir une fonction anonyme ou nommée, avec un meilleur gestion du contexte this. Exemple : const addition = (a, b) => a + b;.
• Paramètres formels et valeurs de retour : Les paramètres formels sont les variables déclarées dans la déclaration de la fonction, utilisées pour recevoir des valeurs lors de l'appel. La valeur de retour est le résultat renvoyé par la fonction via return, permettant de transmettre une donnée à l'appelant (source : "Les fonctions").

📝 Points essentiels

• Les fonctions permettent de structurer le code en sous-unités réutilisables, améliorant la modularité.
• La déclaration classique function nom() {} est simple et compatible avec tous les navigateurs, mais la syntaxe fléchée ()=>{} offre une écriture plus concise et une meilleure gestion du contexte this.
• Lors de l'appel, une fonction peut recevoir des paramètres (paramètres formels) et retourner une valeur grâce à l'instruction return. La valeur retournée peut être stockée dans une variable ou utilisée directement.
• La syntaxe fléchée est recommandée notamment pour les gestionnaires d'événements (addEventListener) car elle facilite la gestion du contexte et la syntaxe.
• La différence entre paramètres et arguments : les paramètres sont déclarés dans la fonction, les arguments sont passés lors de l'appel.

💡 À retenir

Les fonctions en JavaScript, qu'elles soient déclarées de manière classique ou fléchée, sont essentielles pour organiser, réutiliser et simplifier le code, tout en permettant une gestion efficace des paramètres et des valeurs de retour.

📖 5. Objets JavaScript

🔑 Notions clés & Définitions

• Objet (JavaScript) : Entité caractérisée par un ensemble de propriétés (attributs) et de méthodes (fonctions). Chaque objet possède un identifiant unique dans le contexte de programmation. AUTEUR (source) : modélisation de concepts du monde réel en entités informatiques.

• Identifiant (Objet) : Nom ou clé permettant de distinguer un objet dans le code. En JavaScript, c’est le nom de la variable ou la clé dans une structure d’objet. AUTEUR (source) : modélisation d’entités du monde réel en objets.

• Attributs (Objet) : Données ou propriétés qui décrivent un objet, stockées sous forme de paires clé-valeur. Exemple : nom, âge, taille. AUTEUR (source) : modélisation d’entités du monde réel en objets.

• Méthodes (Objet) : Fonctions associées à un objet, permettant de définir son comportement ou ses actions. Exemple : saluer, grandir. AUTEUR (source) : modélisation d’entités du monde réel en objets.

• Modélisation d’entités du monde réel : Approche consistant à représenter un concept ou une chose réelle sous forme d’objet informatique, en lui attribuant des propriétés et des comportements. AUTEUR (source) : modélisation d’entités du monde réel en objets.

📝 Points essentiels

• La programmation orientée objet en JavaScript consiste à modéliser un concept du monde réel en créant des objets avec un identifiant, des attributs et des méthodes (AUTEUR (source)).
• Un objet est défini par une structure de paires clé-valeur, où les clés sont les attributs ou méthodes, et les valeurs sont les données ou fonctions associées.
• La création d’un objet peut se faire via la notation littérale :

  const personne = { nom: "Dupont", age: 30, saluer: function() { alert("Bonjour"); } };
  

• L’accès ou la modification des propriétés se fait par la notation point :

  console.log(personne.nom); // Accès à l’attribut nom  
  personne.age = 31; // Modification de l’attribut age  
  

• L’ajout d’une nouvelle propriété se réalise simplement par l’affectation :

  personne.couleurPreferee = "noir";  
  

• La modélisation d’entités du monde réel en objets permet une organisation claire, réutilisable et intuitive du code (AUTEUR (source)).

💡 À retenir

Les objets en JavaScript modélisent des entités du monde réel en regroupant des attributs et des méthodes, facilitant la structuration, la réutilisation et la compréhension du code orienté objet.

📖 6. Tableaux JavaScript

🔑 Notions clés & Définitions

• Tableau (Array) : Objet permettant de stocker une collection ordonnée de valeurs, accessibles via des indices numériques commençant à zéro. Selon PERROUX (date), le tableau facilite le traitement de plusieurs données connexes en un seul conteneur.

• Traitement de données connexes avec tableaux : Utilisation des méthodes comme push(), pop(), slice(), splice() pour ajouter, supprimer ou manipuler des éléments d’un tableau, permettant une gestion efficace des ensembles de données liées.

• Différence entre Array et Object : Un Array est un objet spécialisé avec des indices numériques et une propriété length, optimisé pour le traitement de listes ordonnées. Un Object est une collection de paires clé-valeur, plus flexible pour modéliser des entités complexes, comme le souligne ECMA (1997) dans la norme ECMA-262.

📝 Points essentiels

• Les tableaux en JavaScript sont des objets dont la propriété length indique leur taille, et dont les éléments sont accessibles via des indices numériques (tableau[index]).

• La méthode push() ajoute un élément à la fin du tableau, tandis que pop() retire le dernier élément, permettant une gestion dynamique des données.

• La différence fondamentale entre Array et Object réside dans leur conception : Array est optimisé pour une liste ordonnée avec indices numériques, alors que Object sert à représenter des entités avec des propriétés nommées, comme le précise ECMA (1997).

• Le traitement de données connexes avec tableaux inclut la manipulation séquentielle, la recherche, le tri, et la modification des éléments pour répondre aux besoins spécifiques du traitement.

💡 À retenir

Les tableaux en JavaScript sont des objets spécialisés conçus pour gérer efficacement des collections ordonnées de données, en utilisant des méthodes adaptées pour leur manipulation, tout en étant distincts des objets qui modélisent des entités plus complexes.

📖 7. Manipulation DOM

🔑 Notions clés & Définitions

• getElementById() : Méthode JavaScript permettant de récupérer un élément HTML spécifique en utilisant son attribut id. Selon MDN (2023), elle retourne l’élément correspondant ou null si aucun n’est trouvé.
• innerHTML : Propriété qui permet de modifier ou d’accéder au contenu HTML interne d’un élément. Selon MDN (2023), elle peut être utilisée pour insérer du code HTML dynamique dans une page.
• Modification des attributs HTML : Action de changer la valeur d’un attribut d’un élément, par exemple src d’une balise <img>, en utilisant la méthode setAttribute() ou la propriété directe (ex : element.src).
• Modification des styles CSS via JavaScript : Changer l’apparence d’un élément en modifiant ses propriétés CSS via la propriété style, par exemple element.style.backgroundColor = "blue". Selon MDN (2023), cela permet de rendre la page interactive et dynamique.

📝 Points essentiels

• La méthode getElementById() est la plus efficace pour cibler un élément unique grâce à son id, facilitant la manipulation précise du DOM.
• Modifier innerHTML permet d’insérer ou de remplacer le contenu HTML d’un élément, mais attention aux risques de sécurité (XSS) si le contenu provient d’une source non fiable.
• La modification des attributs HTML, comme src pour une image ou href pour un lien, se fait via setAttribute() ou directement par propriété (ex : element.src).
• La manipulation des styles CSS en JavaScript se réalise en accédant à la propriété style de l’élément, permettant de changer dynamiquement l’apparence de la page.
• La gestion du DOM inclut aussi la création (createElement()), l’ajout (appendChild()), ou la suppression d’éléments, pour une interactivité avancée.
• La différenciation entre innerHTML (contenu HTML) et textContent (contenu texte brut) est essentielle pour la sécurité et la compatibilité.
• La méthode setAttribute() est utile pour modifier ou ajouter des attributs, tandis que getAttribute() permet de les récupérer.
• Modifier le DOM doit respecter la logique de la page pour éviter les erreurs d’affichage ou de comportement.

💡 À retenir

La manipulation du DOM via getElementById(), innerHTML, la modification des attributs et des styles CSS permet de rendre une page web interactive et dynamique, en modifiant son contenu et son apparence en réponse aux actions de l’utilisateur ou à des événements.

📖 8. Gestion des événements

🔑 Notions clés & Définitions

• Gestion des événements : Ensemble des mécanismes permettant de détecter et de réagir aux changements d’état ou d’interaction de l’utilisateur ou du document, comme un clic ou un survol, pour rendre une page web interactive. AUTEUR (source) : "Le DOM permet de réagir aux événements" (source).
• addEventListener : Méthode JavaScript permettant d’attacher une fonction de gestion à un événement spécifique sur un élément HTML, favorisant la réactivité et la modularité. Elle accepte une fonction fléchée pour simplifier la syntaxe. AUTEUR (source) : "Le DOM permet d’accéder aux éléments HTML et de réagir aux événements" (source).
• Événement : Changement d’état ou d’interaction dans l’environnement web (clic, survol, chargement, etc.) pouvant être intercepté par du code JavaScript pour déclencher une action spécifique. AUTEUR (source) : "Un événement peut être provoqué par l’utilisateur, le document ou le développeur" (source).
• Réactivité aux événements : Capacité du code JavaScript à écouter et répondre immédiatement à une interaction utilisateur ou à un changement dans l’environnement, grâce à des écouteurs d’événements (ex : addEventListener). AUTEUR (source) : "Le DOM permet de réagir aux événements" (source).
• Écouteur d’événement : Fonction ou méthode associée à un événement précis via addEventListener, qui s’exécute lorsque l’événement se produit, permettant d’ajouter de l’interactivité sans modifier directement les attributs HTML. AUTEUR (source) : "Le DOM permet d’accéder aux éléments HTML et de réagir aux événements" (source).

📝 Points essentiels

• La gestion des événements repose principalement sur la méthode addEventListener, qui permet d’attacher une fonction de réaction à un événement spécifique sur un élément HTML. Elle favorise la séparation du code JavaScript et du HTML, et évite la surcharge de l’attribut onclick ou autres attributs inline.
• Les événements courants incluent : click, mouseover, mouseout, focus, blur, change, load, submit. Leur détection permet de déclencher des actions précises, comme afficher une alerte, modifier du contenu ou changer des styles.
• La syntaxe moderne privilégie l’utilisation de fonctions fléchées pour les gestionnaires d’événements, par exemple :

  element.addEventListener("click", () => { /* code */ });
  

• La réactivité aux événements permet d’améliorer l’interactivité d’une page web, en rendant par exemple un bouton capable de déclencher une alerte ou de modifier dynamiquement le contenu HTML.
• Il est aussi possible d’utiliser la méthode onclick directement sur un élément, mais cela limite la modularité et la possibilité d’attacher plusieurs gestionnaires à un même événement.

💡 À retenir

La gestion des événements via addEventListener et les fonctions fléchées permet de créer une interactivité fluide et modulable dans une page web, en séparant clairement la logique de réaction de l’élément HTML concerné.

📖 9. Formulaires et validation

🔑 Notions clés & Définitions

• Création de formulaires de saisie de données : Processus de conception d’un ensemble d’éléments HTML (<form>, <input>, <textarea>, etc.) permettant à l’utilisateur de saisir et d’envoyer des informations. DIOUF (date) souligne l’importance d’une structuration claire pour une collecte efficace.

• Soumission et validation des formulaires : Action d’envoyer les données saisies par l’utilisateur et de vérifier leur conformité avant traitement. La validation peut être effectuée côté client via JavaScript pour améliorer l’expérience utilisateur, comme le recommande DIOUF (date).

• Contrôle de la saisie utilisateur via objets form : Utilisation de l’objet form en JavaScript pour accéder et manipuler les éléments du formulaire, notamment avec form.elements ou form['nom']. Cela facilite la récupération et la vérification des données.

• Gestion des erreurs dans les formulaires : Mise en place de mécanismes pour détecter, signaler et gérer les erreurs de saisie (champs vides, formats incorrects). La validation en JavaScript permet d’intercepter la soumission et d’afficher des messages d’erreur pour guider l’utilisateur, conformément à DIOUF (date).

📝 Points essentiels

• La création de formulaires repose sur la balise <form> et ses éléments enfants (<input>, <textarea>, <select>, etc.), permettant la saisie de données structurées. La propriété name est essentielle pour identifier chaque champ lors de la récupération.

• La soumission d’un formulaire peut être déclenchée par un bouton <input type="submit"> ou via JavaScript avec form.submit(). La méthode addEventListener('submit', ...) permet d’intercepter cette action pour effectuer une validation préalable.

• La validation côté client s’appuie sur la propriété value des éléments <input>, <textarea>, etc., et sur des conditions pour vérifier la conformité (ex : champ non vide, format email). En cas d’erreur, on peut utiliser event.preventDefault() pour empêcher l’envoi.

• La gestion des erreurs peut inclure l’affichage de messages d’erreur à l’aide de innerHTML, textContent, ou la modification des styles CSS pour mettre en évidence les champs problématiques.

• La méthode form.checkValidity() et l’attribut required permettent une validation native HTML5, mais JavaScript offre une flexibilité supplémentaire pour des contrôles complexes.

• La validation doit être effectuée à la fois côté client (pour l’expérience utilisateur) et côté serveur (pour la sécurité), même si cette dernière n’est pas abordée ici.

💡 À retenir

La création et la validation de formulaires en JavaScript permettent d’assurer la qualité des données saisies, d’améliorer l’interactivité, et de prévenir les erreurs avant l’envoi, conformément aux recommandations de DIOUF (date). La maîtrise du contrôle de la saisie via objets form est essentielle pour une gestion efficace des données utilisateur.

📖 10. Expressions régulières

🔑 Notions clés & Définitions

• Expressions régulières (regex) : Suites de caractères permettant de définir un modèle de recherche ou de validation dans une chaîne de caractères. Elles sont utilisées pour vérifier si une chaîne correspond à un motif précis. (Source : contenu source)

• Syntaxe et construction : La syntaxe des expressions régulières inclut des caractères spéciaux (ex : . pour un caractère quelconque, * pour zéro ou plusieurs répétitions, + pour une ou plusieurs répétitions, ? pour une option, [] pour un ensemble de caractères, () pour grouper, ^ pour début de chaîne, $ pour fin de chaîne). La construction consiste à combiner ces éléments pour créer un motif précis. (Source : contenu source)

• Utilisation dans la validation de chaînes : Les regex sont employées pour valider la conformité d'une chaîne à un format attendu, par exemple pour vérifier une adresse email, un numéro de téléphone ou un mot de passe. La méthode test() en JavaScript permet de tester si une chaîne correspond à un motif regex. (Source : contenu source)

📝 Points essentiels

• La syntaxe des expressions régulières inclut des métacaractères (., *, +, ?, [], (), ^, $) qui ont des significations spécifiques pour définir des motifs complexes.

• Les expressions régulières peuvent être littérales ou construites dynamiquement via des objets RegExp en JavaScript, notamment pour des validations ou des recherches avancées.

• La méthode test() de l’objet RegExp permet de vérifier si une chaîne correspond à un motif : regex.test(chaine) retourne true ou false.

• En JavaScript, les regex peuvent inclure des drapeaux (g pour global, i pour insensible à la casse, m pour multilignes) pour ajuster leur comportement.

• Applications courantes : validation d’emails, numéros de téléphone, codes postaux, mots de passe, formats spécifiques de chaînes.

• La construction d’une expression régulière doit respecter la syntaxe précise pour éviter les erreurs et assurer la fiabilité de la validation.

💡 À retenir

Les expressions régulières sont des outils puissants pour la validation de chaînes en JavaScript, permettant de définir des motifs précis à l’aide d’une syntaxe spécifique, facilitant ainsi la vérification de formats complexes.

📖 11. Objets Date et Math

🔑 Notions clés & Définitions

• Objet Date : Objet JavaScript permettant de représenter, manipuler et formater des dates et heures. AUTEUR (source) : "Objets Date pour gestion des dates et heures".
• Méthodes de Date : Fonctions associées à l’objet Date pour obtenir ou modifier des composants de date (ex : getFullYear(), getMonth(), setDate()). AUTEUR (source) : "Utilisation des méthodes associées à Date".
• Objet Math : Objet JavaScript fournissant des propriétés et méthodes pour effectuer des opérations mathématiques avancées (ex : Math.random(), Math.round(), Math.pow()). AUTEUR (source) : "Objet Math pour opérations mathématiques".
• Méthodes de Math : Fonctions pour calculs numériques, telles que l’arrondi, la puissance, la racine carrée, etc. AUTEUR (source) : "Utilisation des méthodes associées à Math".
• Gestion des dates et heures : Utilisation combinée de l’objet Date et de ses méthodes pour réaliser des opérations comme le calcul d’intervalles, la mise en forme ou la comparaison de dates. AUTEUR (source) : "Objets Date pour gestion des dates et heures".

📝 Points essentiels

• L’objet Date en JavaScript permet de créer une date avec new Date(), qui peut prendre en paramètre une chaîne de caractères, un timestamp ou être vide pour la date courante.
• Les méthodes de Date permettent d’accéder ou de modifier ses composants (année, mois, jour, heure, minute, seconde). Par exemple, getFullYear(), getMonth(), setDate().
• La méthode getTime() de Date retourne le timestamp en millisecondes depuis le 1er janvier 1970 (époque Unix). Elle facilite la comparaison ou le calcul d’intervalles entre deux dates.
• L’objet Math ne possède pas de constructeur et fournit uniquement des propriétés et méthodes statiques. Par exemple, Math.PI, Math.random(), Math.floor(), Math.pow().
• La méthode Math.random() génère un nombre pseudo-aléatoire entre 0 (inclus) et 1 (exclus). Elle est souvent combinée avec d’autres opérations pour générer des nombres dans une plage spécifique.
• Pour effectuer des opérations mathématiques complexes ou générer des valeurs aléatoires, on utilise les méthodes de Math en association avec des opérations arithmétiques simples.
• La manipulation des dates permet de réaliser des calculs comme l’ajout ou la soustraction de jours, heures, etc., en utilisant setDate(), setHours(), ou en additionnant des millisecondes au timestamp.

💡 À retenir

Les objets Date et Math en JavaScript offrent des outils puissants pour gérer, manipuler et effectuer des calculs sur les dates, heures et valeurs numériques, indispensables pour le traitement dynamique de données temporelles et numériques dans les applications web.

📖 12. JSON en JavaScript

🔑 Notions clés & Définitions

{
  "JSON": "**AUTEUR** (date) : notation légère pour représenter des données structurées, utilisant une syntaxe inspirée de JavaScript.",
  "Sérialisation": "Processus de conversion d’un objet JavaScript en une chaîne JSON à l’aide de JSON.stringify().",
  "Désérialisation": "Processus de conversion d’une chaîne JSON en un objet JavaScript à l’aide de JSON.parse().",
  "JSON.parse()": "Méthode JavaScript qui analyse une chaîne JSON et construit la valeur JavaScript correspondante.",
  "JSON.stringify()": "Méthode JavaScript qui convertit un objet JavaScript en une chaîne JSON.",
  "Format JSON": "Format texte basé sur la syntaxe des objets JavaScript, utilisant des paires clé/valeur, avec des clés entre guillemets."
}

📝 Points essentiels

• JSON a été standardisé par Douglas Crockford (2006) pour faciliter l’échange de données entre client et serveur, notamment dans les API web.
• La sérialisation permet de stocker ou transmettre des objets JavaScript sous forme de texte, facilement transférable via HTTP ou stocké dans des fichiers.
• La désérialisation est essentielle pour récupérer des données structurées à partir d’un texte JSON reçu d’un serveur ou stocké localement.
• La méthode JSON.stringify() convertit tout objet JavaScript en chaîne JSON, en respectant la syntaxe : clés entre guillemets, valeurs primitives ou autres objets.
• La méthode JSON.parse() analyse une chaîne JSON valide pour reconstruire l’objet JavaScript correspondant.
• La syntaxe JSON ne permet pas d’utiliser des fonctions ou des références circulaires, seules des données sérialisables (nombres, chaînes, booléens, null, objets, tableaux).

💡 À retenir

JSON est une syntaxe standardisée pour sérialiser et désérialiser des données en JavaScript, facilitant la communication et le stockage de structures complexes sous forme de texte. La maîtrise de JSON.parse() et JSON.stringify() est essentielle pour gérer efficacement l’échange de données dans les applications web modernes.

📊 Tableaux de Synthèse

Thème	Concepts clés	Auteur / Référence
Variables JavaScript	var (ancienne déclaration, portée globale/locale), let (bloc, recommandée), const (constante, portée de bloc), portée, nommage, sensibilité à la casse	Brendan Eich (1995), ECMAScript 2015
Types de données	String, Number, Boolean, undefined, null, Object, Array, propriété length	(1997), MDN Web Docs
Structures de contrôle	if, if...else, else if, switch, while, do...while, opérateurs de comparaison	PERROUX (date)
Fonctions JavaScript	Définition, paramètres, valeurs de retour, fonctions anonymes, arrow functions	(source cour)
Objets JavaScript	Création, propriétés, méthodes, objets littéraux, prototypes	(source cour)
Tableaux JavaScript	Création, index, méthodes (push, pop, shift, unshift, splice), itérations	(source cour)
Manipulation DOM	Sélection, modification, ajout, suppression d’éléments	(source cour)
Gestion des événements	addEventListener, événements courants, propagation, délégation	(source cour)
Formulaires et validation	Accès, validation, gestion des événements, expressions régulières	(source cour)
Expressions régulières	Syntaxe, métacaractères, méthodes (test, match, replace)	(source cour)
Objets Date et Math	Création, méthodes (getDate, getFullYear, random, ceil, floor)	(source cour)
JSON en JavaScript	Parsing, stringification, échange de données	(source cour)

⚠️ Pièges & Confusions Fréquentes

1. Confusion entre var, let, et const concernant la portée et la mutabilité.
2. Oublier que null est une valeur primitive volontaire, alors que undefined indique une variable non initialisée.
3. Utiliser == au lieu de ===, entraînant des comparaisons non strictes et des bugs subtils.
4. Mal comprendre la différence entre objets et tableaux, notamment l’utilisation de méthodes spécifiques.
5. Ne pas faire attention à la portée des variables dans les fonctions ou blocs, provoquant des erreurs de référence.
6. Confondre null et undefined dans la validation ou la manipulation de données.
7. Mal utiliser les boucles while et do...while, entraînant des boucles infinies ou des exécutions non souhaitées.

✅ Checklist Examen

• Connaître la définition de Perroux sur la croissance économique.
• Savoir déclarer une variable avec var, let, et const et connaître leur portée respective.
• Maîtriser les types primitifs (String, Number, Boolean, undefined, null) et leur utilisation.
• Savoir utiliser if, else if, else, switch pour le contrôle de flux.
• Comprendre le fonctionnement des boucles while et do...while.
• Savoir définir une fonction, avec ou sans paramètres, et retourner une valeur.
• Connaître la différence entre objets et tableaux, et utiliser leurs méthodes principales.
• Savoir manipuler le DOM : sélectionner, modifier, ajouter ou supprimer des éléments.
• Maîtriser la gestion des événements : addEventListener, propagation, délégation.
• Connaître les expressions régulières : syntaxe, méthodes test, match, replace.
• Savoir utiliser les objets Date et Math pour manipuler des dates et des nombres.
• Maîtriser la conversion JSON : JSON.parse() et JSON.stringify().
• Vérifier la maîtrise du vocabulaire et de la syntaxe JavaScript.