Les bases de JavaScript

HTML donne sa structure à une page, CSS contrôle son apparence et JavaScript ajoute des comportements. Le moteur JavaScript d’un navigateur exécute les instructions d’un script. Sauf si une décision modifie le chemin suivi, ces instructions s’exécutent de haut en bas.

Place le code dans la page ou dans un fichier séparé

Un script interne contient du JavaScript entre ses balises d’ouverture et de fermeture :

<script>
  console.log("Hello from the page");
</script>

Un script externe conserve le JavaScript dans un fichier .js séparé. Ce HTML le charge :

<script src="js/app.js"></script>

Le fichier externe contient console.log("Hello from the page"); sans balises <script>. Séparer les fichiers garde le HTML lisible, permet à plusieurs pages de partager du code et permet au navigateur de mettre le script en cache. Lorsque src est présent, le code à l’intérieur du même élément est ignoré. Utilise une seule approche par élément et écris toujours la balise de fermeture </script> : un <script ... /> autofermant ne ferme pas l’élément en HTML.

Choisis quand le script s’exécute

Un script classique sans attribut de chargement interrompt l’analyse du HTML pendant que le navigateur le charge et l’exécute. Dans <head>, il s’exécute avant que le contenu ultérieur du corps de page soit construit. Le placer juste avant </body> met le contenu de la page avant lui.

Pour un script classique externe dans <head>, defer est un choix par défaut utile :

<script src="js/app.js" defer></script>

Le navigateur télécharge le script tout en continuant à analyser le HTML. Il exécute le script une fois l’analyse terminée. Plusieurs scripts différés s’exécutent dans leur ordre dans le HTML : un deuxième script peut donc utiliser les valeurs définies par le premier.

Utilise async pour du code indépendant qui ne dépend ni de l’état de préparation de la page ni d’un autre script. Ajouter defer à un script classique interne n’a aucun effet.

Charge un module

<script type="module" src="js/main.js"></script>

L’exécution d’un module est différée par défaut et il s’exécute en mode strict. Il peut partager du code au moyen de import et export. Pour charger des modules dans Chrome ou Firefox, sers le projet avec un serveur de développement local, comme la fonctionnalité de serveur en direct d’un éditeur. Ouvrir la page à une adresse file:// entraîne des restrictions de chargement des modules.

Vérifie la connexion

Supposons que index.html se trouve à côté d’un dossier js contenant greet.js. Place console.log("Page ready"); dans ce script et <script src="js/greet.js" defer></script> dans l’en-tête HTML. Ouvre la page, puis sa console : le message est « Page ready ».

Le chemin relatif part du dossier du fichier HTML. Avec cette organisation, src="greet.js" pointe vers un emplacement incorrect. Un message indiquant que le fichier est introuvable signifie qu’il n’y a aucun script à exécuter à cette adresse. Si tu as copié les balises HTML dans le fichier JavaScript, le moteur signale plutôt une erreur de syntaxe au niveau du balisage.

La console du navigateur affiche les messages, les erreurs et les résultats du code que tu saisis. Ouvre la console de la page que tu testes. Dans Chrome ou Edge, utilise Ctrl+Shift+J sous Windows/Linux ou Cmd+Option+J sur Mac. Dans Firefox, utilise Ctrl+Shift+K ou Cmd+Option+K. F12 ouvre l’ensemble des outils de développement dans Chrome et Edge.

Instructions et expressions

Une expression produit une valeur : 4 + 5 produit 9. Une instruction donne une consigne, par exemple stocker cette valeur ou l’afficher :

let total = 4 + 5;
console.log("Total:", total);

La première ligne s’exécute avant la seconde, qui affiche « Total: 9 ». Un point-virgule termine une instruction. JavaScript peut insérer de nombreux points-virgules omis, mais les sauts de ligne ne fonctionnent pas toujours comme séparateurs. Termine les instructions par des points-virgules pour rendre la structure voulue explicite.

Saisis 2 + 3 dans la console et appuie sur Entrée pour voir 5. Utilise Shift+Enter pour passer à une nouvelle ligne sans exécuter la saisie. Si tu saisis let x = 5;, la console peut afficher undefined comme résultat de cette instruction. Cela ne signifie pas que x contient undefined : saisir ensuite x affiche 5. De même, un appel à console.log() affiche son message et renvoie lui-même undefined.

Noms et commentaires

JavaScript distingue les majuscules des minuscules. console.log("Hi"); fonctionne, mais Console.log("Hi"); désigne un nom différent et déclenche une ReferenceError. console.Log("Hi"); trouve console, mais échoue avec une TypeError, car il n’existe pas de méthode Log appelable.

Les commentaires s’adressent aux lecteurs. Le moteur les ignore :

// Keep the starting value for the next calculation.
let total = 4;
/* A comment can also
   continue on another line. */
console.log(total);

Placer // devant une instruction désactive temporairement cette ligne. Un commentaire utile explique une raison que le code seul ne rend pas claire.

Messages, avertissements et expériences

console.log("Total:", 9); affiche ses arguments séparés par des espaces. console.warn() signale un avertissement ; console.error() signale un message d’erreur. Afficher un message avec console.error() ne déclenche pas en soi d’exception. console.clear() efface l’affichage.

Les saisies dans la console sont des essais, pas des modifications enregistrées. Recharger la page exécute à nouveau les scripts enregistrés de la page. Tu peux inspecter dans la console les variables de niveau supérieur des scripts classiques ; celles d’un module restent dans ce module.

Boîtes de dialogue simples et mode strict

alert("Saved!"); affiche un message. confirm("Continue?") renvoie true pour OK et false pour Annuler. prompt("Quantity?", "1") renvoie la chaîne de caractères saisie, ou null pour Annuler. Saisir 12 donne "12", pas 12. Ces boîtes de dialogue suspendent les interactions tant qu’elles sont ouvertes.

Place "use strict"; au début d’un script classique pour que certaines erreurs soient signalées. Par exemple, totl = 5; sans déclaration déclenche une ReferenceError en mode strict ; dans un script classique sans mode strict, cela peut créer une variable globale accidentelle. Un module utilise déjà le mode strict. Vérifie l’orthographe des noms et déclare-les avant de leur affecter des valeurs.

Une variable est un nom qui désigne une valeur. Tu peux d’abord déclarer le nom et lui affecter sa valeur plus tard, ou faire les deux dans une seule instruction. L’opérateur d’affectation = stocke la valeur de droite sous le nom de gauche.

Choisis let ou const

let score;
console.log(score); // undefined
score = 10;
score = score + 2;
console.log(score); // 12

let score; déclare la variable. Tant qu’une affectation ne lui donne pas une autre valeur, elle contient undefined. L’affectation suivante stocke 10. Dans score = score + 2;, JavaScript lit l’ancien score, ajoute 2, puis stocke 12. C’est une instruction de mise à jour : elle n’a donc pas besoin d’avoir un sens en tant qu’équation mathématique. Une réaffectation utilise le nom existant sans répéter let.

Une déclaration const doit inclure sa valeur initiale :

const BOILING_POINT_C = 100;

La déclaration const rate; est une erreur de syntaxe, car il lui manque une valeur initiale. Essayer d’affecter une nouvelle valeur à BOILING_POINT_C plus tard déclenche une TypeError.

Utilise const par défaut. Choisis let pour un total cumulé, un compteur ou un résultat auquel des instructions ultérieures affecteront une valeur. Une valeur calculée à partir d’autres valeurs peut elle aussi utiliser const si le programme ne réaffecte jamais ce nom.

Donne un sens clair au nom

Les noms peuvent contenir des lettres, des chiffres, _ et $ ; ils ne peuvent pas commencer par un chiffre. place1 est valide, mais pas 1stPlace. Les espaces sont interdites et un trait d’union est interprété comme une soustraction : total-price ne désigne donc pas une seule variable. Les mots réservés comme if, return et class ne peuvent pas servir de noms de variables.

Utilise camelCase pour les noms ordinaires : itemCount, firstName ou priceWithTax. Les noms de booléens comme isLoggedIn et hasDiscount décrivent une valeur qui répond à une question par oui ou par non. Indique les unités lorsqu’elles évitent les confusions : distanceKm et durationMin. Les valeurs fixes connues avant l’exécution du programme utilisent souvent UPPER_SNAKE_CASE, comme MAX_LOGIN_ATTEMPTS. La casse compte : total et Total sont des noms distincts.

Étudie un total cumulé

const TAX_RATE = 0.2;
let total = 0;
total = total + 12.5;
total = total + 7.5;
const totalWithTax = total * (1 + TAX_RATE);
console.log(totalWithTax); // 24

Le total commence à 0, passe à 12.5, puis à 20. Le multiplicateur 1 + TAX_RATE vaut 1.2, donc le montant final est 24. Seul total doit recevoir de nouvelles affectations. Le taux de taxe et le montant final calculé utilisent const.

Si tu écris let total = 7.5; une deuxième fois dans la même portée, tu essaies de déclarer une deuxième variable, et non de mettre à jour la première. Utilise total = 7.5; pour remplacer la valeur.

Reconnais les anciennes déclarations

Les anciens codes utilisent souvent var. Il fonctionne toujours, mais ses variables appartiennent à une fonction ou à un script plutôt qu’à un bloc imbriqué ordinaire. Il autorise les déclarations répétées, et les lectures avant la déclaration produisent undefined. Les mots-clés modernes let et const permettent de repérer ces erreurs. Garde leurs règles à l’esprit lorsque tu lis un ancien tutoriel qui utilise var.

Un bloc est le code compris entre des accolades, comme le corps d’un if. La portée d’une variable est la région où son nom désigne cette variable. let et const ont tous deux une portée de bloc, qui comprend les blocs imbriqués à l’intérieur du bloc où ils sont déclarés.

Conserve un résultat là où il est nécessaire

const temperatureC = 31;
let label;
if (temperatureC > 30) {
  label = "hot";
} else {
  label = "mild";
}
console.log(label); // hot

label est déclarée à l’extérieur des branches, donc la dernière ligne peut la lire. Chaque branche affecte une valeur à la variable existante. Si tu déclares plutôt const label = "hot"; dans la première branche, cette variable ne peut pas être lue après le bloc. Si aucune autre variable label n’est dans la portée, la dernière lecture déclenche une ReferenceError.

Une déclaration au niveau supérieur d’un script classique a une portée globale : le code ultérieur de ce script et les autres scripts classiques de la page peuvent l’utiliser. Dans un module, les variables de niveau supérieur appartiennent à ce module. Conserve une variable dans la plus petite portée où elle est nécessaire pour réduire les conflits de noms.

Distingue le masquage de la réaffectation

let x = 1;
{
  let x = 2;
  console.log(x); // 2
}
console.log(x); // 1

La déclaration interne crée une variable distincte. C’est le masquage : dans le bloc interne, x désigne la variable interne. La variable extérieure reste égale à 1. Supprimer le let interne affecterait plutôt 2 à la variable extérieure. Des noms distincts rendent cette différence plus facile à lire.

Lis avant l’initialisation

Une liaison à portée de bloc couvre tout son bloc, mais elle n’est pas accessible avant d’être initialisée par sa déclaration. La région qui précède l’initialisation est la zone morte temporaire :

console.log(price);
let price = 5;

Cela déclenche ReferenceError: Cannot access 'price' before initialization. Le nom existe dans la portée, mais n’est pas prêt. Par comparaison, price is not defined signifie qu’aucune liaison portant ce nom n’y est accessible. Une déclaration interne masque aussi un nom extérieur avant la ligne de déclaration interne ; la valeur extérieure ne peut pas contourner la zone morte temporaire de la variable interne.

Associe chaque erreur à une correction

Les erreurs de syntaxe empêchent le démarrage du script concerné. Une erreur d’exécution interrompt l’exécution en cours lorsqu’elle atteint l’instruction fautive. Pour faciliter les essais, Chrome autorise une nouvelle déclaration let dans une entrée de console distincte ; cela ne rend pas valides les déclarations en double dans un script.

Const fixe la référence

Les valeurs primitives comme les nombres et les chaînes de caractères ne peuvent pas changer sur place. Le contenu d’un objet peut changer même lorsque son nom utilise const :

const settings = { theme: "dark" };
settings.theme = "light"; // allowed

Le nom désigne toujours le même objet. L’affectation settings = {}; essaie de remplacer cette référence et déclenche une TypeError.

Les valeurs 7, "7" et true ont des types différents. Elles peuvent apparaître à des endroits semblables sur une page, mais JavaScript applique des règles différentes à chacune. Un type décrit la valeur actuellement contenue dans une variable, et non une restriction permanente sur cette variable.

Commence par les trois types principaux

Un number représente les valeurs numériques entières et décimales : 42, -7 et 3.75 ont tous le même type. La notation scientifique est également numérique : 1e3 signifie 1000. Une string contient du texte entre guillemets : "42" est donc du texte, même si ses caractères sont des chiffres. Un boolean est exactement true ou false, sans guillemets. Les comparaisons produisent des booléens qu’un programme peut utiliser pour prendre des décisions.

Utilise typeof pour examiner une valeur. Il renvoie une chaîne qui nomme le type :

console.log(typeof 7);         // number
console.log(typeof "7");       // string
console.log(typeof true);      // boolean
console.log(typeof undefined); // undefined

Les commentaires montrent les mots affichés ; les résultats eux-mêmes sont des chaînes comme "number".

Reconnais les valeurs absentes

let city;
let middleName = null;
console.log(city);       // undefined
console.log(middleName); // null

undefined signifie généralement qu’aucune valeur n’a été fournie à JavaScript, comme avec une variable let non initialisée. null est généralement affecté de façon intentionnelle pour signifier « vide » ou « aucune valeur ». Teste une valeur volontairement vide avec middleName === null.

N’utilise pas typeof value === "object" pour tester null. typeof null donne "object" en raison d’un comportement historique du langage, même si null est une valeur primitive.

Connais la liste complète des types

JavaScript possède sept types primitifs : number, string, boolean, undefined, null, bigint et symbol. Le huitième type est object, utilisé pour les valeurs structurées. Les fonctions sont des objets que l’on peut appeler, même si typeof renvoie "function" pour elles.

Un bigint est un nombre entier écrit avec un n final, comme 9007199254740993n. Il permet de représenter exactement de grands entiers. Ne mélange pas un bigint et un number dans une opération arithmétique : 1n + 2 déclenche une TypeError. Un symbol est un identifiant unique ; typeof Symbol("id") donne "symbol". typeof 42n donne "bigint".

NaN est un autre résultat particulier à reconnaître : malgré son nom, qui signifie « pas un nombre », typeof NaN donne "number". C’est une valeur numérique qui indique un résultat numérique invalide. Son nom ne désigne pas à lui seul un type distinct.

Suis une variable qui change

let data = 42;
console.log(typeof data); // number
data = "forty-two";
console.log(typeof data); // string

C’est le typage dynamique. Une réaffectation peut remplacer un nombre par une chaîne. Cette souplesse rend utile l’affichage de la valeur et de son type lorsqu’un résultat est surprenant :

const input = "7";
console.log(input, typeof input); // 7 string
console.log(input + 1);           // 71
console.log(7 + 1);               // 8

La première addition assemble du texte ; la seconde additionne des nombres. Les valeurs primitives ne peuvent pas changer sur place : une opération crée une nouvelle valeur. Mettre à jour une variable change la valeur qu’elle désigne.

JavaScript utilise un seul type numérique ordinaire pour les valeurs entières et décimales. La division conserve une partie fractionnaire : 10 / 4 donne 2.5. L’opérateur choisi et son ordre d’exécution influent tous deux sur le résultat.

Calcule dans l’ordre voulu

Les puissances sont calculées avant les multiplications, les divisions et les restes, qui sont calculés avant les additions et les soustractions. Les opérateurs de même niveau s’exécutent de gauche à droite, sauf les puissances, qui s’associent de droite à gauche : 2 ** 3 ** 2 équivaut à 2 ** 9, soit 512. Les parenthèses modifient cet ordre : 2 + 3 * 4 donne 14, mais (2 + 3) * 4 donne 20.

Pour calculer la moyenne de 72, 85 et 90, additionne tout le groupe avant de diviser :

const average = (72 + 85 + 90) / 3;
console.log(average); // 82.33333333333333

Sans parenthèses, 72 + 85 + 90 / 3 ne divise que 90 et donne 187.

Sépare les unités entières et les restes

Math.trunc(7 / 2) supprime la partie fractionnaire et donne 3. Pour une longueur positive de 245 cm, Math.floor(245 / 100) donne 2 mètres et 245 % 100 donne 45 centimètres restants. De même, 3 725 secondes donnent 1 heure avec Math.floor(3725 / 3600), 2 minutes avec Math.floor((3725 % 3600) / 60) et 5 secondes avec 3725 % 60. Pour un entier, n % 2 === 0 teste s’il est pair. Un reste prend le signe de l’opérande de gauche : -7 % 3 donne -1.

Mets un nombre à jour

x += 5 signifie x = x + 5. Les opérateurs -=, *=, /=, %= et **= suivent le même principe. En partant de 10, les mises à jour += 5, *= 2, -= 4, puis /= 2 donnent 15, 30, 26, puis 13.

++ augmente de un et -- diminue de un. Avec let a = 5; let b = a++;, a devient 6, mais b reçoit 5 : l’incrémentation postfixée renvoie l’ancienne valeur. Avec let b = ++a;, en repartant de a = 5, les deux deviennent 6. Une mise à jour sur sa propre ligne évite de dépendre du résultat de cette expression.

Arrondis et mets en forme à bon escient

Math.round(13.456 * 100) / 100 donne le nombre 13.46. En revanche, (3.14159).toFixed(2) donne la chaîne "3.14" et (19.999).toFixed(2) donne "20.00". Mets en forme à la fin : ajouter un nombre à une chaîne mise en forme assemble du texte.

Reconnais les limites numériques

Les nombres utilisent la virgule flottante binaire sur 64 bits. La plupart des fractions décimales sont approximatives, donc 0.1 + 0.2 donne 0.30000000000000004. Arrondis pour l’affichage, compare avec une petite tolérance adaptée ou calcule en unités entières comme les centimes ou les millimètres.

Certaines opérations invalides renvoient une valeur au lieu de déclencher une exception : 5 / 0 donne Infinity, -5 / 0 donne -Infinity, et 0 / 0 ou "abc" * 2 donne NaN. La plupart des opérations arithmétiques avec NaN donnent encore NaN ; NaN ** 0 est une exception et donne 1.

Tous les entiers jusqu’à Number.MAX_SAFE_INTEGER, soit 9007199254740991, sont exacts. Au-delà, seuls certains entiers peuvent être représentés : 9007199254740992 + 1 donne encore 9007199254740992. Les bigints permettent de représenter exactement des entiers plus grands.

Une chaîne stocke du texte entre deux apostrophes, deux guillemets doubles ou deux accents graves correspondants. Pour du texte ordinaire, les trois peuvent représenter la même valeur. Ces signes marquent le début et la fin du texte ; ils ne font pas partie de la valeur.

Guillemets, échappements et assemblage

Utilise l’autre type de délimiteur pour inclure un guillemet ou une apostrophe : "It's late". Un échappement utilise une barre oblique inverse, comme dans 'It\'s late'. \n représente un saut de ligne, \t une tabulation et \\ une barre oblique inverse. La séquence \n occupe une position dans la chaîne, même si elle s’écrit avec deux caractères. "It's".length donne 4 ; "Line 1\nLine 2".length donne 13.

L’opérateur + concatène les chaînes. "Hello" + " " + "world" donne "Hello world" ; aucune espace n’est insérée si l’un des morceaux n’en contient pas. Avec let msg = "Hi"; msg += " there";, la valeur mise à jour est "Hi there".

Les positions commencent à zéro

const language = "JavaScript";
console.log(language.length); // 10
console.log(language[0]);     // J
console.log(language[4]);     // S
console.log(language[9]);     // t
console.log(language.at(-1)); // t
console.log(language[10]);    // undefined

Le dernier indice est length - 1. Un argument négatif passé à at() compte depuis la fin. length est une propriété, pas une méthode : language.length() déclenche une TypeError. Plus précisément, les positions et la propriété length d’une chaîne utilisent les unités de code UTF-16, les unités que JavaScript utilise pour stocker le texte. Ces lettres anglaises ordinaires occupent chacune une unité ; certains symboles et émojis en occupent davantage.

Enregistre la nouvelle chaîne

Les chaînes sont immuables : leur contenu ne peut pas être modifié sur place. Affecter word[0] = "b" lorsque word vaut "cat" ne crée pas "bat" ; en mode strict, cela déclenche une exception. Les méthodes qui transforment du texte renvoient une nouvelle chaîne :

let name = "ana";
name.toUpperCase();
console.log(name); // ana
name = name.toUpperCase();
console.log(name); // ANA

Appeler la méthode ne suffit pas à conserver son résultat. Écrire name.toUpperCase sans parenthèses ne l’appelle pas du tout.

Choisis la bonne opération sur le texte

toLowerCase() et toUpperCase() modifient la casse ; trim() supprime les espaces aux deux extrémités. Le chaînage applique chaque méthode au résultat de la précédente : " Ana@Example.com ".trim().toLowerCase() donne "ana@example.com".

includes(), startsWith() et endsWith() renvoient des booléens. Par exemple, "report.pdf".endsWith(".pdf") donne true. indexOf() donne l’indice de la première occurrence ou -1 : "JavaScript".indexOf("S") donne 4, mais rechercher "s" donne -1. Les recherches distinguent les majuscules des minuscules. "JavaScript".includes("script") donne false ; convertis en minuscules avant cette recherche pour obtenir true.

slice(start, end) renvoie le texte à partir de l’indice de début jusqu’à l’indice de fin exclu. "JavaScript".slice(0, 4) donne "Java" ; .slice(4) et .slice(-6) donnent "Script".

"a-b-c".replace("-", "+") donne "a+b-c" ; replaceAll() avec les mêmes arguments donne "a+b+c". "ab".repeat(3) donne "ababab" et "5".padStart(3, "0") donne "005". Pour const city = "paris";, city[0].toUpperCase() + city.slice(1) produit "Paris" en assemblant une première lettre majuscule et le reste inchangé.

Un littéral de gabarit place du texte entre accents graves. À l’intérieur, ${...} marque un espace réservé dont l’expression sera évaluée et insérée dans le texte. C’est utile lorsqu’un message combine plusieurs valeurs avec de la ponctuation, des espaces ou des calculs.

Lis un espace réservé comme une expression

const name = "Ana";
const greeting = `Hello, ${name}!`;
console.log(greeting); // Hello, Ana!

Le moteur lit name, obtient "Ana" et le place entre la salutation et le point d’exclamation. Les accents graves et les symboles de l’espace réservé décrivent la chaîne ; ils n’apparaissent pas dans le message obtenu.

Avec la concaténation, la même idée s’écrit "Hello, " + name + "!". Un message plus long comme "Hello, " + name + "! You have " + count + " new messages." nécessite plusieurs morceaux entre guillemets séparés. Un gabarit garde toute la phrase ensemble : `Hello, ${name}! You have ${count} new messages.`. Les espaces doivent tout de même être saisies là où tu les veux.

Calcule, puis mets en forme dans l’espace réservé

const name = "Ana";
const tickets = 3;
const price = 4.5;
const receipt = `${name} bought ${tickets} tickets for ${(tickets * price).toFixed(2)} in total.`;
console.log(receipt);

La sortie est « Ana bought 3 tickets for 13.50 in total. » D’abord, tickets * price produit 13.5. Les parenthèses font de tout ce produit le receveur de .toFixed(2), qui produit "13.50". L’espace réservé insère ce texte dans la phrase. Les variables numériques price et tickets restent inchangées.

Sans mise en forme, un espace réservé affiche la forme textuelle ordinaire du nombre. `${0.1 + 0.2}` donne "0.30000000000000004". Une mise en forme à l’intérieur, `${(0.1 + 0.2).toFixed(2)}`, donne "0.30".

Les expressions conviennent, pas les instructions

Un espace réservé peut contenir une valeur, un calcul, un appel de méthode ou une expression qui choisit une valeur. Avec birthYear = 1990, `You turn ${2026 - birthYear} this year.` donne « You turn 36 this year. »

L’opérateur conditionnel peut choisir du texte au singulier ou au pluriel :

const count = 1;
console.log(`You have ${count} ${count === 1 ? "item" : "items"}`);
// You have 1 item

La comparaison choisit une chaîne à insérer. Une instruction if ne peut pas remplacer cette expression dans ${...}, car un espace réservé nécessite une expression qui produit une valeur.

Garde la ponctuation exacte

Seuls les accents graves activent les espaces réservés. Avec const n = 5;, "n + 1 = ${n + 1}" est du texte ordinaire et laisse ${n + 1} inchangé. Le gabarit `n + 1 = ${n + 1}` donne « n + 1 = 6 ». Un accent grave est un caractère différent d’une apostrophe.

Les sauts de ligne saisis entre accents graves deviennent des sauts de ligne dans la chaîne obtenue. Les espaces d’indentation en font également partie. Les valeurs absentes sont insérées sous forme de texte : `${undefined}` donne "undefined", tandis que `${null}` donne "null". Si un message contient « undefined » de façon inattendue, examine la variable insérée et l’endroit où une valeur lui a été affectée.

Une conversion explicite signifie que tu écris toi-même la conversion, avec un outil comme Number(), String() ou Boolean(). Elle rend visible le type voulu au moment où une valeur entre dans le calcul.

Choisis une conversion numérique

Number() lit tout le texte comme un nombre, en ignorant les espaces qui l’entourent. Number("1.5") donne 1.5 et Number(" 12 ") donne 12. Number("12px") donne NaN, car toute la chaîne n’est pas numérique. Le code utilise un point décimal : Number("1,5") donne aussi NaN.

parseInt() et parseFloat() lisent le début numérique d’un texte et s’arrêtent lorsque la suite ne convient plus. parseInt("12px", 10) donne 12 ; parseFloat("3.75 kg") donne 3.75. L’analyseur d’entiers s’arrête au point décimal, donc parseInt("0.5", 10) donne 0. parseInt("abc", 10) donne NaN, car le texte ne commence pas par un nombre. Passe une base à parseInt() : parseInt("08", 10) donne 8, tandis que parseInt("ff", 16) lit de l’hexadécimal et donne 255.

Le plus unaire convertit également du texte numérique ordinaire : +"42" donne 42.

Distingue une entrée absente de zéro

Une boîte de dialogue prompt renvoie une chaîne ou null. Annuler renvoie null et valider un champ vide renvoie "". Les deux deviennent zéro avec Number(), tout comme un texte composé uniquement d’espaces. Vérifie l’absence de réponse avant de convertir :

const input = prompt("Enter a quantity:");
if (input === null || input.trim() === "") {
  console.log("No quantity entered.");
} else {
  const quantity = Number(input);
  if (Number.isNaN(quantity)) {
    console.log("Please type a number.");
  } else {
    console.log(quantity + 1);
  }
}

Le || évite l’appel à trim() lorsque input vaut null. Saisir « 12 » mène au calcul numérique et affiche 13. Saisir « 12px » mène au message indiquant que le nombre est invalide. Saisir « 0 » est une réponse valide et affiche 1.

Utilise Number.isNaN(value) pour tester si une valeur est réellement NaN. value === NaN ne réussit jamais. L’ancienne fonction globale isNaN() convertit d’abord son argument : isNaN("hello") donne true, mais Number.isNaN("hello") donne false, car cette valeur est toujours une chaîne.

Convertis en texte ou en booléen

String(42) donne "42", String(true) donne "true" et String(null) donne "null". (42).toString() produit aussi "42", mais appeler .toString() sur null ou undefined déclenche une TypeError. String() prend en charge les deux.

Boolean() renvoie false pour false, 0, -0, 0n, "", null, undefined et NaN ; ce sont des valeurs fausses. Les navigateurs possèdent aussi l’ancien objet document.all, qui est une valeur fausse. Les autres valeurs sont vraies. En particulier, "0", "false" et une chaîne contenant une seule espace sont toutes des valeurs vraies. !!value effectue la même conversion en booléen.

Pour deux réponses à prompt "12" et "30", a + b produit "1230". Convertis d’abord les deux entrées : Number(a) + Number(b) donne 42.

Une conversion implicite est une conversion automatique de type dans une opération. Ses règles dépendent de l’opérateur. Un calcul qui semble fonctionner peut tout de même contenir une valeur textuelle qui provoquera l’échec d’une étape ultérieure.

Suis la règle d’addition

Pour les opérandes ordinaires de type number, string, boolean, null et undefined, + assemble du texte si l’un des opérandes est une chaîne. Sinon, il effectue une conversion numérique et une addition. "5" + 2 donne "52" et 2 + "5" donne "25".

Évalue un enchaînement de gauche à droite :

console.log(1 + 2 + "3"); // 33
console.log("3" + 1 + 2); // 312

Dans la première expression, deux nombres s’additionnent pour donner 3 ; ajouter ensuite "3" assemble les deux formes textuelles en "33". Dans la seconde, la première opération produit déjà "31", donc la dernière ajoute un autre chiffre. Les parenthèses peuvent modifier l’opération effectuée en premier : "3" + (1 + 2) donne "33".

Les autres opérations arithmétiques attendent des nombres

La soustraction, la multiplication, la division, le reste et les puissances convertissent les chaînes numériques en nombres. "5" - 2 donne 3, "5" * "2" donne 10 et "10" / "4" donne 2.5. Une chaîne comme "abc" ne peut pas devenir un nombre valide, donc "abc" * 2 donne NaN. Les bigints suivent des règles arithmétiques distinctes ; mélanger un bigint avec un number déclenche une TypeError.

Cette différence peut masquer une erreur :

const price = "20";
console.log(price * 3); // 60
console.log(price + 5); // 205

La multiplication convertit le prix, mais ne modifie pas la variable. L’addition suivante reçoit toujours une chaîne. Convertis la valeur une fois à son entrée, puis continue à travailler avec le résultat numérique.

Suis de petites conversions automatiques

Dans les opérations arithmétiques numériques, true devient 1, false devient 0 et null devient 0. Ainsi, true + true donne 2, tandis que null + 1 donne 1. undefined devient NaN, donc undefined + 1 donne NaN. Le plus et le moins unaires convertissent les chaînes numériques : +"42" donne 42, -"5" donne -5 et +"" donne 0.

++ demande toujours une mise à jour numérique, mais += suit la règle d’addition :

let count = "5";
count++;
console.log(count, typeof count); // 6 number
let label = "5";
label += 1;
console.log(label, typeof label); // 51 string

Les conditions appliquent une autre conversion

Une condition if considère une valeur comme vraie ou fausse. "0" est une chaîne non vide et satisfait la condition ; le nombre 0 est une valeur fausse et le bloc est ignoré. Si zéro est une quantité valide, un test de valeur vraie ou fausse ne suffit pas à distinguer zéro d’une réponse absente. Pour une valeur représentée par un nombre ou null, quantity !== null vérifie explicitement qu’elle n’est pas absente.

L’égalité offre aussi deux comportements : "7" == 7 donne true après conversion implicite, mais "7" === 7 donne false, car l’égalité stricte conserve la distinction entre les types. Utilise l’égalité stricte pour les comparaisons ordinaires.

Lorsqu’un résultat est du texte concaténé ou NaN, affiche chaque entrée à côté de typeof input. Trouve le premier type incorrect et corrige la conversion à cet endroit. Convertir "205" en nombre à la fin donnerait 205, et non la somme attendue 25.

Une comparaison produit un booléen. 7 > 3 donne true, 5 >= 5 inclut l’égalité et donne true, et 4 < 2 donne false. Stocke un résultat comme const isAdult = age >= 18;, ou utilise-le directement dans une condition.

Préfère l’égalité stricte

=== compare sans convertir les types. Deux valeurs primitives ordinaires doivent avoir le même type et la même valeur : 7 === 7 donne true, tandis que "7" === 7 donne false. !== inverse l’égalité stricte, donc "7" !== 7 donne true.

L’égalité faible, ==, peut convertir les opérandes. "7" == 7, 0 == "" et "0" == false donnent tous true. Sa règle particulière pour les valeurs absentes rend null == undefined vrai, mais null == 0 faux. != inverse l’égalité faible. Préfère === et !== ; une utilisation intentionnelle de value == null permet de tester à la fois null et undefined.

Distingue l’ordre du texte de l’ordre numérique

Deux chaînes sont comparées de gauche à droite à partir de leurs valeurs de code UTF-16. Pour des mots anglais ordinaires de même casse, "apple" < "banana" donne true. Un préfixe identique plus court vient en premier : "apple" < "apples" donne true. Parmi les lettres anglaises sans accent, les majuscules viennent avant les minuscules, donc "Zebra" < "apple" donne true. Convertir les deux chaînes avec toLowerCase() supprime cette différence de casse dans les comparaisons simples de lettres anglaises.

Les chaînes de chiffres suivent aussi l’ordre du texte :

console.log("10" < "9"); // true
console.log("10" < 9);   // false

Dans la première comparaison, le caractère « 1 » vient avant « 9 ». Dans la seconde, un opérande est numérique, donc le texte devient le nombre 10. Convertis explicitement les entrées numériques avant de comparer leurs valeurs. "abc" < 5 et "abc" > 5 donnent tous deux false, car la conversion numérique produit NaN.

Traite d’abord les nombres absents et invalides

NaN n’est pas égal à lui-même : NaN === NaN et NaN == NaN donnent tous deux false. Utilise Number.isNaN() pour le reconnaître.

Les comparaisons d’ordre convertissent null en zéro, donc null >= 0 donne true, mais null > 0 donne false. L’égalité suit une autre règle, donc null == 0 reste false. undefined devient NaN dans les comparaisons d’ordre, donc undefined > 0 et undefined < 0 sont faux ; undefined == 0 est également faux. Vérifie si une valeur est absente avant de la traiter comme une mesure.

Compare les nombres décimaux et les intervalles

L’arrondi binaire fait que 0.1 + 0.2 === 0.3 est faux. Pour ces petites valeurs, un test avec une tolérance fonctionne :

const closeEnough = Math.abs((0.1 + 0.2) - 0.3) < 0.000001;
console.log(closeEnough); // true

Math.abs() supprime le signe de la différence. Choisis une tolérance adaptée à la grandeur et à la précision des valeurs, ou calcule en unités entières comme les millimètres.

N’enchaîne pas les tests d’intervalle comme en mathématiques. Avec x = 50, 0 < x < 10 produit d’abord true, puis compare ce booléen sous la forme 1 < 10, ce qui donne true. De même, 3 > 2 > 1 devient true > 1, soit 1 > 1, ce qui est faux. Écris les deux comparaisons en entier : x > 0 && x < 10.

Les opérateurs logiques permettent à une condition d’exprimer plusieurs exigences. Avec des opérandes booléens, && signifie ET, || signifie OU et ! signifie NON. Leur ordre d’évaluation permet aussi de protéger une opération qui échouerait avec une valeur absente.

Exprime chaque exigence

const temperatureC = 25;
const inRange = temperatureC >= 18 && temperatureC <= 30;
const outside = temperatureC < 18 || temperatureC > 30;

inRange est vrai, car les deux conditions de borne sont respectées. outside est faux, car aucun des tests de sortie de l’intervalle n’est satisfait. OU inclut le cas où les deux côtés sont vrais ; il ne signifie pas « l’un mais jamais les deux ».

Écris chaque comparaison en entier. color === "red" || "green" ne teste pas si l’une ou l’autre couleur correspond. Avec color = "blue", la première comparaison est fausse, mais la chaîne non vide "green" est une valeur vraie. Le test voulu est color === "red" || color === "green".

Regroupe la condition voulue

NON est prioritaire sur ET, et ET sur OU. Ainsi, true || false && false est vrai, mais (true || false) && false est faux.

Supposons que l’accès exige une connexion et le rôle d’administrateur ou de propriétaire. Écris loggedIn && (isAdmin || isOwner). Sans parenthèses, loggedIn && isAdmin || isOwner permet à isOwner de rendre toute l’expression vraie même avec loggedIn = false. Les parenthèses maintiennent l’exigence de connexion pour les deux rôles.

Inverser une condition composée change aussi le connecteur. !(a && b) a la même valeur de vérité que !a || !b ; !(a || b) correspond à !a && !b. Pour une température en dehors de l’intervalle bornes comprises, inverser les deux tests intérieurs transforme >= en <, <= en > et ET en OU.

Arrête-toi lorsque le résultat est connu

ET s’arrête au premier opérande qui est une valeur fausse ; OU s’arrête au premier opérande qui est une valeur vraie. C’est l’évaluation en court-circuit. L’opérande ignoré n’est pas évalué :

const input = null;
const hasText = input !== null && input.trim() !== "";
console.log(hasText); // false

Le premier test est faux, donc trim() n’est jamais appelé sur null. Inverser ces deux tests tenterait d’abord l’opération risquée.

Ces opérateurs renvoient un opérande, pas nécessairement un booléen. "" || "Guest" renvoie "Guest" ; "Sam" || "Guest" renvoie "Sam". "Ana" && "ok" renvoie "ok" et null && "x" renvoie null. Un if qui les englobe teste ensuite si la valeur renvoyée est vraie ou fausse.

Préserve les valeurs fausses qui ont un sens

Avec quantity = 0, quantity || 1 donne 1, mais quantity ?? 1 préserve 0. Avec nickname = "", nickname || "Anonymous" donne la valeur de repli, tandis que nickname ?? "Anonymous" préserve la chaîne vide. Utilise ?? lorsque ces valeurs ont un sens.

Ajoute des parenthèses lorsque tu combines ?? avec ET ou OU : a || b ?? c est une erreur de syntaxe, tandis que (a || b) ?? c possède un regroupement explicite. NON convertit d’abord en booléen, puis inverse la valeur : !0 est vrai et !"0" est faux. Un double NON, !!value, donne un booléen.

Une instruction if exécute un bloc lorsque sa condition est une valeur vraie. Un else s’exécute lorsque cette condition est une valeur fausse. Utilise des accolades pour montrer exactement quelles instructions appartiennent à chaque branche.

Ordonne un enchaînement de décisions

Un enchaînement de else if effectue ses vérifications de haut en bas. La première condition satisfaite l’emporte et toutes les branches suivantes sont ignorées :

const score = 85;
let grade;
if (score >= 90) {
  grade = "A";
} else if (score >= 80) {
  grade = "B";
} else if (score >= 70) {
  grade = "C";
} else {
  grade = "F";
}

La première comparaison échoue ; la deuxième est satisfaite, donc grade devient "B". Tester score >= 70 en premier retiendrait même un score de 95 et affecterait "C". Pour des seuils minimaux qui se chevauchent, place le plus élevé en premier. La variable partagée grade est déclarée en dehors des branches pour que le code ultérieur puisse la lire.

Une condition composée peut garder une décision courte lisible. La livraison est gratuite pour une commande d’un montant d’au moins 50 ou pour un membre ; sinon, elle coûte 4,95 :

const orderTotal = 45;
const isMember = false;
let shipping;
if (orderTotal >= 50 || isMember) {
  shipping = 0;
} else {
  shipping = 4.95;
}
console.log(`To pay: ${orderTotal + shipping}`);
// To pay: 49.95

Deux conditions imbriquées sans branche else peuvent souvent être reliées par ET : if (isLoggedIn) { if (isAdmin) { ... } } exécute son code le plus interne dans les mêmes conditions booléennes que if (isLoggedIn && isAdmin) { ... }.

Évite la ponctuation qui modifie le chemin

Sans accolades, seule l’instruction suivante appartient à un if ; l’indentation ne peut pas lui ajouter une autre instruction. Un point-virgule immédiatement après la condition crée une instruction vide : if (x > 5); { ... } laisse le bloc suivant s’exécuter quelle que soit la condition.

if (x = 5) affecte 5, puis teste si la valeur est vraie. L’instruction modifie x et la condition est satisfaite, car 5 est une valeur vraie. Pour comparer, utilise if (x === 5).

Choisis une valeur avec une expression conditionnelle

L’opérateur conditionnel, ou ternaire, renvoie l’une de deux valeurs :

const age = 17;
const status = age >= 18 ? "adult" : "minor";
console.log(status); // minor

La forme est condition ? valueIfTrue : valueIfFalse. Utilise-la pour un choix court dans une affectation ou un littéral de gabarit. Utilise if/else pour des branches d’instructions. Des expressions conditionnelles trop imbriquées rendent les choix difficiles à suivre.

Fais correspondre des choix fixes avec switch

const day = "Sat";
let kind;
switch (day) {
  case "Sat":
  case "Sun":
    kind = "weekend";
    break;
  default:
    kind = "weekday";
}

switch compare strictement la valeur aux libellés de ses cas. Les deux libellés de fin de semaine mènent à la même affectation. break quitte le switch ; default traite une valeur qui ne correspond à aucun cas. switch ("2") ne correspond pas à case 2:, car les types diffèrent.

Après une correspondance, l’exécution se poursuit dans les cas suivants jusqu’à un break ou à la fin. Ce passage au cas suivant peut être intentionnel, comme avec des libellés placés les uns à la suite des autres, ou accidentel. Si le cas 2 ajoute un mot et ne comporte pas de break avant que le cas 3 n’en ajoute un autre, les deux ajouts s’exécutent. Un libellé de cas est un point d’entrée, pas une nouvelle condition testée après chaque instruction.

Un programme peut échouer avant de démarrer, s’arrêter pendant son exécution ou se terminer avec un résultat incorrect. Détermine ce qui s’est produit avant de modifier le code. La console fournit des indices sur les erreurs, tandis que des affichages accompagnés de libellés révèlent les valeurs dans le code qui s’exécute.

Distingue trois types de problèmes

Une erreur de syntaxe dans un script n’annule pas un autre script qui s’est déjà exécuté. Une exception d’exécution non gérée arrête l’exécution en cours à l’instruction fautive.

Lis le message complet

Une entrée de console comme Uncaught ReferenceError: totl is not defined indique le type d’erreur et le nom fautif. « Uncaught » signifie que l’exception n’a pas été prise en charge. Un emplacement comme app.js:2 indique le fichier et la ligne ; un clic dessus ouvre ce code.

let total = 0;
total = totl + 5;
console.log(total);

La ligne 1 s’exécute. À la ligne 2, JavaScript ne peut pas lire totl : il ne termine donc pas cette affectation et n’atteint pas le dernier affichage. Corriger la faute en total fait afficher 5 par le script.

Les messages de syntaxe courants mentionnent un ) manquant, un élément inattendu ou un élément invalide. Dans console.log("hi";, la parenthèse fermante est absente. Dans if (x > 3 {, il manque la parenthèse fermante de la condition. La ligne indiquée est celle où le moteur a remarqué le problème ; examine aussi juste au-dessus pour trouver un guillemet ou un délimiteur non fermé.

Utilise le type pour préciser la cause

Une ReferenceError indique un nom inaccessible : faute de frappe, problème de portée ou lecture avant l’initialisation. Une TypeError signifie que l’opération ne convient pas à la valeur, comme dans "abc".length(), null.trim() ou une réaffectation d’une variable const. Une RangeError peut venir d’un argument non pris en charge, comme dans (1.5).toFixed(101).

La formulation des erreurs peut varier selon le navigateur. Le type et la valeur en cause sont plus utiles que la mémorisation de toute la phrase. Corrige la première erreur pertinente et relance le code, car les messages suivants peuvent découler de la même cause.

Suis une erreur de logique

Pour une moyenne incorrecte, affiche séparément la somme et le résultat :

const sum = 72 + 85 + 90;
const average = 72 + 85 + 90 / 3;
console.log("sum:", sum);         // 247
console.log("average:", average); // 187

La somme correcte permet de situer l’erreur à l’étape de division. Remplace le calcul par sum / 3, qui donne 82.33333333333333. Lorsque l’addition assemble des chiffres de façon inattendue, affiche aussi les types : console.log("price:", price, typeof price);. Trouve la première valeur qui diffère de celle que tu attends.

Utilise console.warn() ou console.error() pour faire ressortir tes propres messages de diagnostic. Vérifie les filtres de niveau de la console si un affichage semble absent. Une erreur 404 signifie qu’une ressource est introuvable : vérifie donc le chemin du script ; pour les autres échecs de chargement, lis le message complet. L’absence d’un message de démarrage peut aussi être due à un filtre ou à une erreur de syntaxe.

Reproduis le problème, lis la première erreur, teste une cause probable avec une petite modification ou un affichage, puis relance et vérifie le résultat attendu. Supprime les affichages temporaires lorsque l’erreur est corrigée.

Un débogueur permet de suspendre un script en cours d’exécution et d’inspecter les valeurs à cet instant précis. Utilise le panneau Sources dans Chrome ou Edge, ou le panneau Débogueur dans Firefox. C’est particulièrement utile lorsqu’un résultat incorrect dépend de plusieurs opérations antérieures.

Suspends l’exécution avant une ligne

Ouvre le script dans Sources et clique sur un numéro de ligne pour placer un point d’arrêt. L’exécution est suspendue avant que cette ligne ne s’exécute. Si le code s’exécute pendant le chargement de la page, recharge-la après avoir placé le point d’arrêt. Placer un point d’arrêt ne relance pas à lui seul du code dont l’exécution est déjà terminée.

Tu peux aussi écrire debugger; dans le script. Avec un débogueur actif, cette instruction suspend l’exécution ; sans débogueur, elle n’a aucun effet. Supprime-la avant de publier le code.

Choisis l’action suivante

Certains appels intégrés n’ont pas de source JavaScript dans laquelle entrer pas à pas. Le pas à pas principal est utile lorsque tu veux obtenir le résultat d’un appel sans suivre son fonctionnement interne.

Pendant la pause, survole un nom pour l’inspecter, lis les valeurs locales dans Portée ou ajoute une expression aux Expressions espionnes. Les expressions espionnes comme typeof price et total > 100 sont réévaluées à chaque étape. La console peut aussi évaluer des expressions en utilisant la portée au moment de la pause.

Examine un total trompeur

La livraison gratuite devrait commencer à 50, mais ce code l’accorde pour un sous-total de 45 auquel s’ajoutent 4 de frais de livraison :

const subtotal = "45";
const shipping = 4;
const total = subtotal + shipping;
if (total >= 50) {
  console.log("Free shipping");
}

Place un point d’arrêt sur la ligne du if et recharge la page. L’affectation a déjà eu lieu. Le volet Portée affiche subtotal comme la chaîne "45" et total comme "454". L’expression espionne typeof total donne "string". La comparaison convertit "454" en nombre, donc total >= 50 est satisfaite.

L’erreur se trouve dans l’addition, avant la comparaison. Remplace le calcul dans le fichier enregistré par const total = Number(subtotal) + shipping;. Recharge à nouveau la page. Le total est maintenant le nombre 49 et la condition est fausse. Si tu suspends plutôt l’exécution sur la ligne d’affectation, celle-ci n’a pas encore été exécutée : utilise le pas à pas principal avant d’inspecter total initialisé.

Suspends l’exécution seulement quand c’est utile

Un point d’arrêt conditionnel ne suspend l’exécution que lorsque son expression est vraie, par exemple total > 100. Fais un clic droit sur le numéro de ligne pour en ajouter un. Un point de journalisation affiche un message à chaque exécution de sa ligne, sans suspendre ni modifier le script. Les points d’arrêt sur exception suspendent l’exécution à l’endroit où une exception est déclenchée, afin que tu puisses inspecter les valeurs au moment de l’échec.

Parcourir un enchaînement de else if pas à pas montre quelle branche est atteinte et quelle condition précédente empêche les tests suivants. Utilise des affichages pour quelques valeurs connues et le débogueur lorsque l’ordre ou plusieurs valeurs en cours sont importants. Effectue la correction finale dans le code enregistré du projet : une modification expérimentale dans le navigateur ne modifie pas durablement ton projet. Relance le cas qui échouait au départ et vérifie le résultat corrigé.