JavaScript : les bases solides pour passer à React

Objectifs pratiques

À la fin de cette séance de 60 minutes, vous aurez un dossier de travail prêt, un dépôt Git nommé js-14-jours avec un premier commit, un script qui s'exécute dans le navigateur via Live Server, et un mini journal de 3 bugs lus et compris. C'est la base de toute la suite : chaque jour se termine par un commit, et ces commits seront votre première preuve de sérieux face à un recruteur junior front-end.

Pourquoi c'est utile pour votre objectif

Votre objectif est de lire et d'écrire le JavaScript d'un composant React simple en 14 jours, puis de viser un poste junior. Avec 60 minutes par jour, vous ne pouvez pas perdre du temps à cause d'un environnement mal réglé ou d'un message d'erreur que vous ne savez pas lire. Savoir lire une erreur, c'est la compétence qui évite de copier-coller aveuglément. Un historique de commits quotidiens montre aussi une régularité observable.

Méthode pas à pas

1. Installer les outils (10 min) : VS Code, Git, un navigateur avec outils de développement (Chrome ou Firefox). Dans VS Code, installez l'extension Live Server. Vérifiez Git dans un terminal avec git --version.
2. Créer le dossier et le dépôt (5 min) : mkdir js-14-jours, cd js-14-jours, git init. Ouvrez le dossier dans VS Code.
3. Créer index.html (5 min) : une page minimale avec un titre, puis avant la fermeture de </body> la ligne <script src="script.js"></script>.
4. Créer script.js (5 min) : écrivez console.log("Bonjour JS, jour 1");.
5. Lancer Live Server (3 min) : clic droit sur index.html, « Open with Live Server ». Ouvrez la console avec F12 (onglet Console) et vérifiez que le message apparaît.
6. Provoquer 3 erreurs, une à la fois (15 min) : corrigez la précédente avant la suivante. Pour chacune, notez le message exact, le type, le fichier et la ligne affichés dans la console, la cause, la correction.

• SyntaxError : supprimez une parenthèse fermante, par exemple console.log("test".
• ReferenceError : appelez une variable qui n'existe pas, console.log(prix);.
• TypeError : const total = 5000; total(); (appeler un nombre comme une fonction).

1. Commit (5 min) : git add . puis git commit -m "Jour 1 : environnement et journal de bugs". Vérifiez avec git log --oneline.
2. Bilan (10 min) : relisez le journal sans regarder le code et expliquez chaque erreur avec vos mots.

Exemple concret

Vous écrivez console.log(montant) pour afficher le prix d'un article en FCFA, mais vous avez oublié de déclarer montant. La console affiche une ReferenceError avec le nom de la variable et le numéro de ligne. Lecture : le type dit la famille du problème (ici, un nom inconnu), le message dit quoi, et le lien du fichier:ligne dit où. Vous corrigez avec const montant = 2500;, rechargez, et la valeur s'affiche.

Erreurs à éviter

• Ouvrir index.html par double-clic au lieu de Live Server : le rechargement automatique manque et vous croyez que rien ne change.
• Oublier d'enregistrer le fichier (Ctrl+S) avant de regarder la console.
• Provoquer les 3 erreurs en même temps : la console devient illisible. Une seule à la fois.
• Lire seulement la première ligne rouge sans regarder le fichier et le numéro de ligne.
• Faire git commit sans git add, ou oublier de lancer git init dans le bon dossier.
• Ne pas corriger l'erreur après l'avoir notée : le commit final doit contenir un script qui tourne sans erreur.

À faire maintenant

Livrable : le dépôt js-14-jours avec index.html, script.js et un fichier journal-bugs.md contenant un tableau à 3 lignes (type, message exact, ligne, cause, correction). Faites un premier commit. Pont React : en React aussi, vous lirez la console à chaque test, et un composant qui plante affiche ces mêmes types d'erreurs.

Objectifs pratiques

À la fin de cette leçon (environ 60 minutes), vous saurez déclarer des variables avec const ou let, vérifier un type avec typeof, convertir un prix saisi en texte avec Number() et gérer NaN. C'est la première brique du module « Logique et fonctions » : sans elle, vous copiez du code sans savoir pourquoi "5" + 3 donne "53". Elle vous rapproche aussi de React, où const est le choix par défaut.

Pourquoi c'est utile pour votre objectif

Un futur développeur front-end reçoit sans cesse des données sous forme de texte : champs de formulaire, réponses d'API, paramètres d'URL. Si vous ne maîtrisez pas les types, vos totaux sont faux et vos interfaces affichent NaN. Dans un composant React, vous écrirez const total = ... des dizaines de fois. Prendre le bon réflexe dès J1 évite des bugs difficiles à trouver plus tard.

Méthode pas à pas

1. Créez commande.js et lancez-le avec Node, ou collez-le dans la console du navigateur (F12, onglet Console). Utilisez console.log pour tout vérifier.
2. Déclarez avec const par défaut. Utilisez let seulement si la valeur doit changer (ex. un total qui s'accumule). Exemple : const nomBoutique = "Chez Awa"; puis let total = 0;.
3. Identifiez le type avec typeof. typeof "1500" donne "string", typeof 1500 donne "number". Affichez-le avant de calculer.
4. Convertissez avec Number(). const prix = Number("1500"); donne 1500. Ne comptez pas sur la conversion automatique.
5. Vérifiez NaN. Number("abc") donne NaN, et typeof NaN reste "number". Testez avec Number.isNaN(prix) dans un if, et affichez un message clair au lieu de continuer le calcul.
6. Calculez et affichez avec un template literal : ` console.log(Total : ${total} FCFA); `.
7. Commentez chaque bloc : pourquoi const, pourquoi la conversion, ce que donne "5" + 3.

Exemple concret

Boutique de quartier fictive. Les prix arrivent d'un formulaire, donc en texte :

```js const nomBoutique = "Chez Awa"; const prixRiz = "1500"; // texte saisi const prixHuile = "2000"; const quantiteRiz = 2; let total = 0;

// "5" + 3 -> "53" : le + concatène dès qu'un texte est présent console.log("5" + 3); // "53" console.log("5" - 3); // 2 : le - force une conversion numérique

const riz = Number(prixRiz); const huile = Number(prixHuile); if (Number.isNaN(riz) || Number.isNaN(huile)) { console.log("Prix invalide : vérifiez la saisie"); } else { total = riz * quantiteRiz + huile; console.log(${nomBoutique} - Total : ${total} FCFA); // 5000 FCFA } ```

Sans Number(), prixRiz + prixHuile donnerait "15002000", un total absurde. Les barèmes sont fictifs : l'objectif est d'apprendre le mécanisme.

Erreurs à éviter

• Utiliser let partout : cela masque les valeurs qui ne devraient jamais changer. Essayez const d'abord.
• Réaffecter une const : TypeError: Assignment to constant variable. Lisez le message dans la console, il indique la ligne.
• Additionner du texte : "5" + 3 donne "53". Convertissez avant de calculer.
• Tester NaN avec === : NaN === NaN est faux. Utilisez Number.isNaN().
• Croire que typeof NaN signale l'erreur : il renvoie "number". Seule la vérification explicite protège le calcul.
• Une chaîne vide : Number("") donne 0, pas NaN. Testez aussi qu'elle n'est pas vide avant de convertir.

À faire maintenant

Créez commande.js pour une boutique de quartier fictive :

1. Déclarez 5 variables (nom de la boutique, deux prix en texte, une quantité, un total).
2. Convertissez les prix en nombres.
3. Affichez un total en FCFA avec un template literal.
4. Ajoutez un cas NaN (ex. prix "abc") géré par un if.
5. Écrivez en commentaire pourquoi "5" + 3 donne "53".
6. Faites un commit Git en fin de séance. Pont React : const et les valeurs bien typées sont la base de tout composant.

Objectifs pratiques

Dans cette leçon, vous allez écrire un fichier frais.js qui calcule des frais de transfert fictifs sur 3 paliers, puis cumule les frais d'une liste de montants avec une boucle for...of. C'est un pas concret vers votre objectif : le ternaire et && servent directement au rendu conditionnel en React. Les conditions et boucles reviennent aussi dans les tests techniques juniors.

Pourquoi c'est utile pour votre objectif

Un composant React affiche des choses différentes selon les données, par exemple {erreur && <p>...</p>} ou {estVide ? 'Aucune tâche' : 'Liste'}. Ces écritures sont des conditions JavaScript. Une boucle qui cumule prépare aussi reduce (module 2). Avec 60 minutes par jour, il vaut mieux maîtriser ces bases que survoler des notions avancées.

Méthode pas à pas

1. Fixez le barème fictif (en FCFA). Ce barème est inventé pour l'exercice, pas un vrai tarif :

• montant jusqu'à 10 000 : frais de 100 ;
• de 10 001 à 50 000 : frais de 300 ;
• au-delà de 50 000 : frais de 600.

1. Créez frais.js et déclarez la fonction avec const : const calculerFrais = (montant) => { ... }.
2. Validez l'entrée d'abord. Si typeof montant !== 'number' || montant <= 0, renvoyez 0 ou null. Le || signifie « l'un ou l'autre », le && signifie « les deux à la fois ».
3. Écrivez les paliers avec if / else if / else, en comparant du plus petit au plus grand. Utilisez === et !==, jamais ==, car == convertit les types en silence (0 == '' vaut true).
4. Testez avec 6 montants qui touchent les bornes : 0 ou -5, 5 000, 10 000, 10 001, 50 000, 80 000. Affichez le résultat avec console.log.
5. Ajoutez la boucle de cumul : let total = 0; for (const m of montants) { total += calculerFrais(m); }. Affichez le total.
6. Essayez le ternaire sur une ligne : const libelle = total > 1000 ? 'Frais élevés' : 'Frais normaux';.
7. Faites un commit Git à la fin de la séance.

Exemple concret

```js const calculerFrais = (montant) => { if (typeof montant !== 'number' || montant <= 0) return 0; if (montant <= 10000) return 100; else if (montant <= 50000) return 300; else return 600; };

const montants = [5000, 10000, 10001, 50000, 80000, -5]; let total = 0; for (const m of montants) { total += calculerFrais(m); } console.log(total); // 100 + 100 + 300 + 300 + 600 + 0 = 1400 ```

Vérifiez à la main : 10 000 reste dans le premier palier grâce à <=. Si vous aviez écrit <, vous obtiendriez 300 au lieu de 100. C'est l'erreur de borne, la plus fréquente.

Erreurs à éviter

• Utiliser == au lieu de === : cela viole le critère de réussite et cache des bugs de types.
• Oublier les bornes : testez toujours la valeur exacte du seuil et celle juste au-dessus.
• Mal ordonner les paliers : si vous testez montant <= 50000 avant montant <= 10000, le premier palier n'est jamais atteint.
• Oublier d'initialiser total à 0 : le résultat devient NaN ou undefined.
• Confondre = (affectation) et === (comparaison) dans un if.
• Copier-coller sans relire : expliquez chaque ligne à voix haute avant de passer à la suite.

À faire maintenant

Créez frais.js avec la fonction calculerFrais et la boucle de cumul. Livrable : le fichier, avec un tableau de 6 montants testés et le résultat attendu écrit en commentaire à côté de chacun. Lancez-le avec Node ou la console du navigateur, puis faites un commit.

Pont React : montant > 50000 ? 'Élevé' : 'Normal' s'écrit de la même façon dans le JSX d'un composant.

Pourquoi cet exercice\n\nVotre objectif est de pouvoir lire et écrire le JavaScript d'un composant React simple, puis de viser un poste junior. Un recruteur attend que vous sachiez vérifier votre propre code sans relire à l'œil. Cet exercice chronométré mesure votre autonomie : combien d'assertions réussissent du premier coup, et combien de bugs vous corrigez seul. Il alimente aussi votre indicateur « exercices résolus sans aide ».\n\n

Contexte\n\nVous avez écrit frais.js, un barème fictif de frais de transfert d'argent en FCFA pour une boutique de quartier. Ce barème est un choix pédagogique, pas un tarif réel. Exemple de barème à adapter au vôtre : de 1 à 5 000 FCFA, frais fixes de 100 ; de 5 001 à 20 000, frais de 2 % ; au-delà de 20 000, frais de 1,5 % avec un minimum de 400. Si votre fonction applique un autre barème, gardez le vôtre et restez cohérent.\n\n

Étapes (durée estimée : 45 à 60 min, chronomètre en main)\n\n1. (5 min) Ouvrez frais.js. Notez en commentaire la signature, par exemple calculerFrais(montant), et le barème. Ne regardez aucune solution.\n2. (5 min) Définissez le comportement pour les entrées invalides : retourner null, ou lever une erreur. Choisissez-en un et tenez-vous-y.\n3. (20 min) Écrivez exactement 10 appels console.assert(condition, message). Le message doit indiquer l'entrée et le résultat attendu.\n4. (10 min) Ouvrez la console du navigateur ou Node. Lancez le fichier et comptez les assertions qui passent du premier coup. Un échec affiche le message dans la console.\n5. (10 min) Pour chaque échec, déterminez si l'erreur est dans le code ou dans le test. Corrigez, relancez, puis notez-la dans journal-bugs.md.\n6. (5 min) Faites le commit du jour.\n\n

Répartition imposée des 10 assertions\n\n- 3 montants normaux, un par palier.\n- 3 limites de paliers : 5 000, 5 001 et 20 000.\n- 2 cas limites : 0 et un montant négatif.\n- 2 entrées invalides : texte comme \"abc\", et undefined ou NaN.\n\nAttention aux nombres décimaux : comparez avec Math.round pour éviter les écarts d'arrondi.\n\n

Livrables\n\n- frais.js avec la fonction et ses 10 assertions.\n- journal-bugs.md : pour chaque échec, l'entrée, le résultat obtenu, le résultat attendu, la cause et la correction.\n- Un commit du jour, par exemple test: 10 assertions pour frais.js.\n- Une ligne de bilan : « X/10 au premier passage, temps total Y min ».\n\n

Critères de réussite\n\n- Au moins 8 assertions sur 10 passent sans aide.\n- Les cas limites 0 et négatif sont testés.\n- Chaque échec est corrigé et documenté dans le journal de bugs.\n- Aucune solution n'a été consultée.\n\n

Erreurs à éviter\n\n- Écrire console.assert(resultat) sans comparer à une valeur attendue.\n- Tester uniquement les cas faciles.\n- Corriger le test pour qu'il passe au lieu de se demander si le code est faux.\n- Oublier que console.assert n'affiche rien quand le test réussit.\n\n

Pont vers React\n\nEn React, vous écrirez des fonctions pures dont la sortie dépend de leurs entrées. Savoir les tester avec des cas limites est la même compétence.

Objectifs pratiques

À la fin de cette leçon (environ 60 minutes), vous aurez transformé un script frais.js en un fichier utils.js propre, fait de fonctions pures. Vous saurez aussi les réécrire en fonctions fléchées. C'est la compétence qui rapproche le plus de React : un composant n'est qu'une fonction qui reçoit des données et renvoie un résultat, sans rien modifier autour d'elle.

Pourquoi c'est utile pour votre objectif

Pour viser un poste junior front-end, il faut lire et écrire du JavaScript comme celui d'un composant React simple. Un composant fait ce que fait une fonction pure : mêmes entrées, même sortie, aucun effet caché. Des fonctions pures sont aussi faciles à tester dans la console, donc faciles à déboguer. Et dans votre portfolio, un utils.js lisible montre que vous structurez votre code au lieu de copier-coller.

Les trois notions à maîtriser

• Fonction pure : elle dépend uniquement de ses paramètres, renvoie une valeur avec return, et ne modifie aucune variable extérieure (ni console.log utile à la logique, ni écriture dans le DOM, ni changement d'un tableau reçu).
• Paramètre par défaut : function f(montant, taux = 0.02) évite les undefined quand l'appelant omet un argument.
• Fonction fléchée : const f = (montant, taux = 0.02) => montant * taux; Avec une seule expression, le return est implicite. Avec des accolades {}, il faut écrire return.

Méthode pas à pas

1. Repérez les effets de bord dans frais.js. Soulignez toute variable déclarée hors des fonctions et modifiée à l'intérieur (par exemple let total = 0 puis total += frais). Soulignez aussi les console.log qui tiennent lieu de résultat.
2. Isolez trois responsabilités : calculer les frais, formater un montant, calculer le total. Une fonction = une tâche.
3. Écrivez calculerFrais(montant, taux = 0.02). Elle renvoie montant * taux et rien d'autre.
4. Écrivez formaterMontant(montant). Elle renvoie une chaîne avec un template literal, par exemple ` ${montant} FCFA `.
5. Écrivez totalAvecFrais(montant, taux). Elle compose les deux autres : montant + calculerFrais(montant, taux). Vous pouvez passer le résultat à formaterMontant à l'appel.
6. Réécrivez-en trois en fonctions fléchées et comparez les résultats sur les mêmes entrées avec console.log.
7. Exportez avec export si vous êtes déjà en module, sinon laissez les fonctions dans utils.js. Faites ensuite un commit Git : « refactor: frais.js vers utils.js ».

Exemple concret

Avant (impur) :

``js let total = 0; function ajouterFrais(montant) { total = montant + montant * 0.02; console.log(total); } ``

Problème : le résultat vit dans une variable globale, et la fonction ne renvoie rien. Appelée deux fois, elle écrase total.

Après (pur) :

``js function calculerFrais(montant, taux = 0.02) { return montant * taux; } function formaterMontant(montant) { return ${montant} FCFA`; } function totalAvecFrais(montant, taux) { return montant + calculerFrais(montant, taux); }

const calculerFraisFleche = (montant, taux = 0.02) => montant * taux; const formaterMontantFleche = (montant) => ${montant} FCFA; const totalAvecFraisFleche = (montant, taux) => montant + calculerFraisFleche(montant, taux);

console.log(formaterMontant(totalAvecFrais(10000))); ```

Vérification : calculerFrais(10000) donne 200. totalAvecFrais(10000) donne 10200, mais totalAvecFrais(10000, undefined) fonctionne aussi grâce au défaut, à condition de le prévoir dans totalAvecFrais (voir erreurs).

Erreurs à éviter

• Oublier return : la fonction renvoie undefined. Avec une flèche à accolades, c'est l'erreur la plus fréquente.
• Modifier un paramètre objet ou tableau : cela mute l'original. Renvoyez une nouvelle valeur.
• Perdre le défaut dans la composition : si totalAvecFrais(montant, taux) passe undefined à calculerFrais, le défaut de calculerFrais s'applique quand même. Vérifiez-le par un test.
• Mélanger calcul et affichage : formaterMontant formate, elle n'affiche pas. L'affichage se fait ailleurs.
• Une fonction fléchée n'est pas toujours plus courte à lire : gardez la clarté avant tout.

Pont React

Un composant comme function Prix({ montant }) reçoit des props et renvoie du JSX sans modifier l'extérieur. Vous venez de pratiquer exactement ce réflexe.

À faire maintenant

Livrable : un fichier utils.js committé. Il contient les 3 fonctions pures, 3 réécritures en flèche, et une ligne de test par fonction dans la console. Notez en commentaire les résultats attendus (200, 10200, "10200 FCFA").

Objectifs pratiques

Dans cette leçon, vous apprenez à prédire la sortie d'un code JavaScript en lisant la portée (bloc, fonction) et à écrire une closure de mémoire. C'est une étape directe vers votre objectif : lire le JS d'un composant React sans deviner. Les hooks comme useState reposent sur les closures. Les erreurs de portée sont aussi parmi les bugs les plus fréquents du débutant.

Pourquoi c'est utile pour votre objectif

Pour un poste junior front-end, on attend que vous diagnostiquiez un bug au lieu de modifier le code au hasard. Prédire avant d'exécuter vous force à construire un modèle mental. Quand ce modèle est faux, l'écart entre prédiction et résultat vous montre précisément ce que vous n'avez pas compris. Cette lacune est alors corrigée une fois pour toutes.

Les trois idées à maîtriser

• Portée de fonction : une variable déclarée dans une fonction n'existe que dans cette fonction.
• Portée de bloc : let et const n'existent que dans les accolades { } où elles sont déclarées (if, for, etc.).
• Problème de var : var ignore les blocs. Elle est visible dans toute la fonction et remontée en haut (hoisting) avec la valeur undefined. Avec let/const, accéder à la variable avant sa déclaration lève une erreur.
• Closure : une fonction garde l'accès aux variables de l'endroit où elle a été créée, même après la fin de la fonction parente.

Méthode pas à pas

1. Copiez l'extrait sans l'exécuter. Notez dans votre journal de bugs : « Extrait n°X ».
2. Soulignez chaque déclaration (var, let, const, paramètres) et notez sa portée : globale, fonction ou bloc.
3. Déroulez le code ligne par ligne comme un tableau : colonne « ligne », colonne « valeur des variables », colonne « affichage ».
4. Écrivez votre prédiction exacte (y compris undefined ou le nom de l'erreur).
5. Exécutez dans la console du navigateur (F12, onglet Console) et comparez.
6. Expliquez chaque écart en une phrase, par exemple : « var n'a pas de portée de bloc, donc i existe encore après la boucle ».
7. Réécrivez de mémoire un exemple de closure, sans regarder la leçon.

Exemple concret

Prenons un compteur de ventes d'une boutique de quartier :

``js function creerCompteur() { let total = 0; return function (montant) { total += montant; return total; }; } const caisse = creerCompteur(); caisse(500); console.log(caisse(1500)); // 2000 ``

creerCompteur est terminée, mais la fonction retournée se souvient de total. Personne d'autre ne peut modifier total : c'est une closure. Dans React, useState fonctionne avec ce même principe de fonctions qui se souviennent de leur contexte.

Autre cas, la boucle classique :

``js for (var i = 0; i < 3; i++) { setTimeout(() => console.log(i), 0); } ``

Affichage : 3, 3, 3, car un seul i partagé existe pour toute la fonction. Avec let i, chaque tour de boucle crée son propre i : 0, 1, 2.

Erreurs à éviter

• Exécuter le code avant d'avoir écrit la prédiction : vous perdez l'apprentissage.
• Écrire « ça marche pas » sans nommer l'erreur (ReferenceError, undefined...).
• Utiliser var par habitude : préférez const, puis let si la valeur change.
• Confondre closure et variable globale : la closure garde une variable privée, pas globale.
• Corriger un écart sans l'expliquer en une phrase.

À faire maintenant

Dans votre journal de bugs, créez une section « Portée ». Composez ou choisissez 4 extraits : (1) var dans un if lu après le bloc, (2) let dans un bloc lu à l'extérieur, (3) la boucle for avec var et setTimeout, (4) un compteur en closure. Pour chacun : prédiction écrite, résultat en console, explication en une phrase. Terminez par un exemple de closure écrit de mémoire, puis faites un commit Git.