[{"data":1,"prerenderedAt":26297},["ShallowReactive",2],{"blog-posts":3},[4,564,5088,8430,9900,12895,14088,14902,16113,17300,18262,19235,19978,21880,23307,24683,25454],{"id":5,"title":6,"body":7,"coverImage":550,"description":551,"extension":552,"meta":553,"navigation":554,"path":67,"published":554,"publishedAt":555,"readTime":556,"seo":557,"stem":558,"tags":559,"__hash__":563},"blog\u002Fblog\u002Fapprendre-algorithmes.md","Comprendre les algorithmes essentiels : méthode, logique et premiers cas d'usage",{"type":8,"value":9,"toc":520},"minimark",[10,15,20,24,27,30,49,52,56,59,105,108,112,115,135,139,142,145,150,153,170,173,177,180,194,197,200,204,207,211,214,217,228,232,235,237,248,252,255,294,298,301,318,321,325,328,339,343,346,349,360,363,367,370,373,387,390,396,400,403,420,424,428,431,435,438,442,444,458,461,465,468,488,492,495,509,513],[11,12,14],"h1",{"id":13},"comprendre-les-algorithmes-essentiels","Comprendre les algorithmes essentiels",[16,17,19],"h2",{"id":18},"introduction","Introduction",[21,22,23],"p",{},"Quand on débute en programmation, on entend souvent parler d'algorithmes sans toujours savoir ce que cela veut dire.",[21,25,26],{},"Un algorithme est simplement une suite d'étapes précises pour résoudre un problème.",[21,28,29],{},"Par exemple :",[31,32,33,37,40,43,46],"ul",{},[34,35,36],"li",{},"chercher une valeur dans une liste ;",[34,38,39],{},"trier une liste ;",[34,41,42],{},"parcourir des données ;",[34,44,45],{},"trouver le plus grand élément ;",[34,47,48],{},"vérifier si une condition est vraie.",[21,50,51],{},"L'objectif de cette série est de vous aider à comprendre les algorithmes les plus utiles en pratique, sans entrer trop vite dans la théorie lourde.",[16,53,55],{"id":54},"sommaire-de-la-série","Sommaire de la série",[21,57,58],{},"Voici l'ordre de lecture recommandé :",[60,61,62,69,75,81,87,93,99],"ol",{},[34,63,64],{},[65,66,68],"nuxt-link",{"to":67},"\u002Fblog\u002Fapprendre-algorithmes","\nComprendre les algorithmes essentiels\n",[34,70,71],{},[65,72,74],{"to":73},"\u002Fblog\u002Frecherche-lineaire","\nLa recherche linéaire expliquée simplement\n",[34,76,77],{},[65,78,80],{"to":79},"\u002Fblog\u002Frecherche-dichotomique","\nLa recherche dichotomique expliquée simplement\n",[34,82,83],{},[65,84,86],{"to":85},"\u002Fblog\u002Ftri-a-bulles","\nLe tri à bulles expliqué simplement\n",[34,88,89],{},[65,90,92],{"to":91},"\u002Fblog\u002Ftri-par-insertion","\nLe tri par insertion expliqué simplement\n",[34,94,95],{},[65,96,98],{"to":97},"\u002Fblog\u002Ftri-fusion","\nLe tri fusion expliqué simplement\n",[34,100,101],{},[65,102,104],{"to":103},"\u002Fblog\u002Ftri-rapide","\nLe tri rapide expliqué simplement\n",[21,106,107],{},"Chaque article est indépendant, mais l'ordre ci-dessus suit une progression logique : on commence par les bases, puis on avance vers des algorithmes plus efficaces ou plus techniques.",[16,109,111],{"id":110},"ce-que-vous-allez-apprendre","Ce que vous allez apprendre",[21,113,114],{},"À la fin de cette série, vous saurez :",[31,116,117,120,123,126,129,132],{},[34,118,119],{},"reconnaître ce qu'est un algorithme ;",[34,121,122],{},"distinguer les problèmes de recherche et de tri ;",[34,124,125],{},"comprendre pourquoi certains algorithmes sont plus rapides que d'autres ;",[34,127,128],{},"lire un pseudocode simple ;",[34,130,131],{},"traduire une idée en JavaScript ;",[34,133,134],{},"commencer par les algorithmes les plus fréquents.",[16,136,138],{"id":137},"_1-quest-ce-quun-algorithme","1. Qu'est-ce qu'un algorithme ?",[21,140,141],{},"Un algorithme est une méthode.",[21,143,144],{},"Il décrit les étapes à suivre pour arriver à un résultat.",[146,147,149],"h3",{"id":148},"exemple-simple","Exemple simple",[21,151,152],{},"Pour préparer un café, vous pouvez suivre cet algorithme :",[60,154,155,158,161,164,167],{},[34,156,157],{},"remplir la cafetière ;",[34,159,160],{},"mettre le filtre ;",[34,162,163],{},"ajouter le café ;",[34,165,166],{},"lancer la machine ;",[34,168,169],{},"servir.",[21,171,172],{},"En programmation, c'est la même logique : on découpe un problème en étapes claires.",[16,174,176],{"id":175},"_2-pourquoi-les-algorithmes-sont-importants","2. Pourquoi les algorithmes sont importants ?",[21,178,179],{},"Un développeur n'écrit pas seulement du code qui fonctionne. Il cherche aussi du code :",[31,181,182,185,188,191],{},[34,183,184],{},"correct ;",[34,186,187],{},"lisible ;",[34,189,190],{},"rapide ;",[34,192,193],{},"maintenable.",[21,195,196],{},"Les algorithmes permettent de choisir une bonne façon de traiter les données.",[21,198,199],{},"Par exemple, chercher une valeur dans une liste de 10 éléments est très différent de la chercher dans une liste de 1 million d'éléments.",[16,201,203],{"id":202},"_3-les-deux-grandes-familles-à-connaître-dabord","3. Les deux grandes familles à connaître d'abord",[21,205,206],{},"Pour commencer, il est utile de distinguer deux grands types de problèmes.",[146,208,210],{"id":209},"la-recherche","La recherche",[21,212,213],{},"On veut retrouver un élément précis dans une collection.",[21,215,216],{},"Exemples :",[31,218,219,222,225],{},[34,220,221],{},"trouver un nom dans une liste ;",[34,223,224],{},"rechercher un produit ;",[34,226,227],{},"vérifier si un identifiant existe.",[146,229,231],{"id":230},"le-tri","Le tri",[21,233,234],{},"On veut ordonner des données.",[21,236,216],{},[31,238,239,242,245],{},[34,240,241],{},"classer des prix du plus petit au plus grand ;",[34,243,244],{},"trier des noms par ordre alphabétique ;",[34,246,247],{},"organiser des notes par ordre décroissant.",[16,249,251],{"id":250},"_4-les-algorithmes-à-apprendre-en-premier","4. Les algorithmes à apprendre en premier",[21,253,254],{},"Voici un bon ordre de progression :",[60,256,257,264,270,276,282,288],{},[34,258,259,263],{},[260,261,262],"strong",{},"Recherche linéaire"," : comprendre la base de la recherche ;",[34,265,266,269],{},[260,267,268],{},"Recherche dichotomique"," : apprendre à diviser un problème par deux ;",[34,271,272,275],{},[260,273,274],{},"Tri à bulles"," : voir un tri simple et pédagogique ;",[34,277,278,281],{},[260,279,280],{},"Tri par insertion"," : comprendre une logique plus naturelle ;",[34,283,284,287],{},[260,285,286],{},"Tri fusion"," : découvrir un tri plus performant ;",[34,289,290,293],{},[260,291,292],{},"Tri rapide"," : voir un algorithme très connu et plus avancé.",[16,295,297],{"id":296},"_5-comment-penser-un-algorithme","5. Comment penser un algorithme",[21,299,300],{},"Avant d'écrire du code, posez-vous toujours les mêmes questions :",[31,302,303,306,309,312,315],{},[34,304,305],{},"quelle est l'entrée ?",[34,307,308],{},"quel est le résultat attendu ?",[34,310,311],{},"quelles sont les étapes intermédiaires ?",[34,313,314],{},"quelles sont les erreurs possibles ?",[34,316,317],{},"que se passe-t-il si la liste est vide ?",[21,319,320],{},"Cette manière de penser évite beaucoup d'erreurs.",[146,322,324],{"id":323},"exemple","Exemple",[21,326,327],{},"Si je veux savoir si un nombre existe dans une liste, je dois réfléchir :",[31,329,330,333,336],{},[34,331,332],{},"est-ce que la liste est triée ou non ?",[34,334,335],{},"dois-je parcourir toute la liste ?",[34,337,338],{},"puis-je m'arrêter dès que je trouve le nombre ?",[16,340,342],{"id":341},"_6-le-pseudocode","6. Le pseudocode",[21,344,345],{},"Le pseudocode est une façon d'écrire un algorithme en langage simple, sans se bloquer sur la syntaxe d'un langage.",[21,347,348],{},"Exemple :",[350,351,357],"pre",{"className":352,"code":354,"language":355,"meta":356},[353],"language-text","pour chaque élément de la liste\n si l'élément est égal à la valeur cherchée\n retourner vrai\nretourner faux\n","text","",[358,359,354],"code",{"__ignoreMap":356},[21,361,362],{},"Le pseudocode aide à comprendre la logique avant de passer à JavaScript.",[16,364,366],{"id":365},"_7-la-notion-de-complexité-sans-se-compliquer","7. La notion de complexité, sans se compliquer",[21,368,369],{},"La complexité indique comment un algorithme se comporte quand les données grandissent.",[21,371,372],{},"Un algorithme peut être :",[31,374,375,378,381,384],{},[34,376,377],{},"rapide sur une petite liste ;",[34,379,380],{},"lent sur une grande liste ;",[34,382,383],{},"acceptable dans un cas ;",[34,385,386],{},"trop coûteux dans un autre.",[21,388,389],{},"Vous n'avez pas besoin de tout maîtriser d'un coup, mais il faut retenir l'idée suivante :",[391,392,393],"blockquote",{},[21,394,395],{},"le bon algorithme dépend souvent de la taille des données.",[16,397,399],{"id":398},"_8-ce-quil-faut-apprendre-en-priorité","8. Ce qu'il faut apprendre en priorité",[21,401,402],{},"Si vous débutez, commencez par :",[31,404,405,408,411,414,417],{},[34,406,407],{},"comprendre la recherche linéaire ;",[34,409,410],{},"comprendre la recherche dichotomique ;",[34,412,413],{},"comprendre un ou deux tris simples ;",[34,415,416],{},"apprendre à comparer deux solutions ;",[34,418,419],{},"savoir expliquer un algorithme avec vos propres mots.",[16,421,423],{"id":422},"_9-les-erreurs-fréquentes","9. Les erreurs fréquentes",[146,425,427],{"id":426},"vouloir-aller-trop-vite","Vouloir aller trop vite",[21,429,430],{},"Beaucoup de personnes essaient d'apprendre directement les algorithmes avancés sans maîtriser les bases.",[146,432,434],{"id":433},"confondre-logique-et-syntaxe","Confondre logique et syntaxe",[21,436,437],{},"Comprendre l'idée d'un algorithme est différent de savoir l'écrire dans un langage.",[146,439,441],{"id":440},"oublier-les-cas-limites","Oublier les cas limites",[21,443,29],{},[31,445,446,449,452,455],{},[34,447,448],{},"liste vide ;",[34,450,451],{},"un seul élément ;",[34,453,454],{},"élément absent ;",[34,456,457],{},"tableau déjà trié.",[21,459,460],{},"Ces cas sont essentiels.",[16,462,464],{"id":463},"_10-la-suite-de-cette-série","10. La suite de cette série",[21,466,467],{},"Dans les chapitres suivants, nous allons étudier un algorithme à la fois, en gardant une progression simple :",[31,469,470,473,476,479,482,485],{},[34,471,472],{},"la recherche linéaire ;",[34,474,475],{},"la recherche dichotomique ;",[34,477,478],{},"le tri à bulles ;",[34,480,481],{},"le tri par insertion ;",[34,483,484],{},"le tri fusion ;",[34,486,487],{},"le tri rapide.",[16,489,491],{"id":490},"résumé","Résumé",[21,493,494],{},"Pour bien commencer les algorithmes, retenez ceci :",[31,496,497,500,503,506],{},[34,498,499],{},"un algorithme est une suite d'étapes pour résoudre un problème ;",[34,501,502],{},"il existe des problèmes de recherche et des problèmes de tri ;",[34,504,505],{},"certains algorithmes sont plus adaptés que d'autres selon la taille des données ;",[34,507,508],{},"il faut d'abord comprendre la logique, puis seulement écrire le code.",[16,510,512],{"id":511},"prochaine-étape","Prochaine étape",[21,514,515,516,519],{},"La suite logique est de commencer par la ",[260,517,518],{},"recherche linéaire",", car elle pose la base avant d'arriver à la recherche dichotomique.",{"title":356,"searchDepth":521,"depth":521,"links":522},2,[523,524,525,526,530,531,535,536,539,540,541,542,547,548,549],{"id":18,"depth":521,"text":19},{"id":54,"depth":521,"text":55},{"id":110,"depth":521,"text":111},{"id":137,"depth":521,"text":138,"children":527},[528],{"id":148,"depth":529,"text":149},3,{"id":175,"depth":521,"text":176},{"id":202,"depth":521,"text":203,"children":532},[533,534],{"id":209,"depth":529,"text":210},{"id":230,"depth":529,"text":231},{"id":250,"depth":521,"text":251},{"id":296,"depth":521,"text":297,"children":537},[538],{"id":323,"depth":529,"text":324},{"id":341,"depth":521,"text":342},{"id":365,"depth":521,"text":366},{"id":398,"depth":521,"text":399},{"id":422,"depth":521,"text":423,"children":543},[544,545,546],{"id":426,"depth":529,"text":427},{"id":433,"depth":529,"text":434},{"id":440,"depth":529,"text":441},{"id":463,"depth":521,"text":464},{"id":490,"depth":521,"text":491},{"id":511,"depth":521,"text":512},null,"Un article d'introduction pour identifier les algorithmes les plus utiles quand on apprend à coder, comprendre leur rôle et savoir par lequel commencer.","md",{},true,"2026-06-09",12,{"title":6,"description":551},"blog\u002Fapprendre-algorithmes",[560,561,562],"Algorithmes","Débutant","JavaScript","jBfblfadcxbrUzoSAanclemgj2Vxmlb8ds2WmT9_nJ4",{"id":565,"title":566,"body":567,"coverImage":550,"description":5080,"extension":552,"meta":5081,"navigation":554,"path":5082,"published":554,"publishedAt":555,"readTime":3908,"seo":5083,"stem":5084,"tags":5085,"__hash__":5087},"blog\u002Fblog\u002Fapprendre-css-complet.md","Apprendre CSS : guide complet pour mettre en forme une page web",{"type":8,"value":568,"toc":4937},[569,573,575,578,581,584,587,589,592,624,628,631,635,638,642,645,649,652,656,659,682,685,689,692,700,703,743,746,780,783,787,790,793,807,811,817,821,853,857,1054,1136,1140,1143,1146,1159,1163,1166,1171,1175,1180,1240,1244,1249,1274,1277,1281,1287,1313,1316,1320,1323,1334,1336,1378,1382,1385,1391,1395,1398,1400,1428,1432,1435,1444,1448,1452,1479,1482,1486,1513,1516,1543,1546,1550,1581,1583,1610,1613,1617,1654,1657,1661,1691,1697,1701,1704,1708,1734,1738,1764,1768,1809,1813,1855,1858,1862,1865,1869,1872,1876,1904,1907,1916,1944,1947,1959,1963,1994,1997,2001,2032,2037,2041,2044,2047,2061,2065,2138,2142,2145,2148,2151,2155,2158,2161,2164,2169,2172,2200,2203,2207,2210,2214,2241,2245,2274,2278,2302,2306,2333,2337,2364,2368,2396,2400,2403,2407,2411,2439,2443,2510,2514,2546,2550,2579,2583,2586,2592,2595,2601,2604,2610,2613,2619,2622,2625,2629,2632,2636,2687,2691,2710,2714,2764,2768,2771,2785,2789,2792,2794,2857,2861,2880,2884,2941,2944,2948,2954,2957,2963,2966,2972,2975,2981,2984,2987,2990,2994,3001,3030,3033,3039,3068,3071,3078,3106,3112,3139,3142,3146,3150,3184,3187,3191,3320,3323,3327,3330,3334,3337,3341,3435,3439,3603,3607,3624,3628,3631,3634,3953,3956,4410,4413,4417,4421,4424,4428,4456,4459,4463,4475,4479,4482,4486,4489,4493,4516,4520,4523,4546,4549,4553,4557,4560,4564,4567,4571,4574,4578,4581,4585,4588,4592,4596,4643,4647,4712,4716,4760,4764,4821,4825,4929,4931,4934],[11,570,572],{"id":571},"apprendre-css","Apprendre CSS",[16,574,19],{"id":18},[21,576,577],{},"CSS est le langage qui permet de mettre en forme une page web.",[21,579,580],{},"Si HTML décrit la structure et le contenu, CSS s'occupe de l'apparence : couleurs, tailles, espacements, positions, alignements, animations et adaptabilité à différents écrans.",[21,582,583],{},"Sans CSS, une page reste lisible, mais elle est souvent très brute. Avec CSS, elle devient claire, agréable à lire et plus professionnelle.",[21,585,586],{},"Dans ce tutoriel, nous allons apprendre CSS progressivement : d'abord la logique générale, puis les sélecteurs, les propriétés essentielles, le modèle de boîte, Flexbox, Grid, le responsive design et enfin quelques bonnes pratiques utiles en projet réel.",[16,588,111],{"id":110},[21,590,591],{},"À la fin de ce chapitre, vous saurez :",[31,593,594,597,600,603,606,609,612,615,618,621],{},[34,595,596],{},"comprendre le rôle exact de CSS ;",[34,598,599],{},"écrire une feuille de style simple ;",[34,601,602],{},"relier un fichier CSS à une page HTML ;",[34,604,605],{},"utiliser les sélecteurs les plus courants ;",[34,607,608],{},"modifier les couleurs, les polices et les espacements ;",[34,610,611],{},"comprendre le modèle de boîte ;",[34,613,614],{},"utiliser Flexbox et Grid pour organiser une mise en page ;",[34,616,617],{},"adapter un site à différents écrans ;",[34,619,620],{},"éviter les erreurs fréquentes ;",[34,622,623],{},"construire une page propre et cohérente.",[16,625,627],{"id":626},"_1-css-cest-quoi-exactement","1. CSS, c'est quoi exactement ?",[21,629,630],{},"CSS signifie Cascading Style Sheets.",[146,632,634],{"id":633},"cascading","Cascading",[21,636,637],{},"Le mot cascading fait référence à la manière dont les règles CSS sont appliquées et priorisées.",[146,639,641],{"id":640},"style","Style",[21,643,644],{},"CSS définit le style visuel d'une page.",[146,646,648],{"id":647},"sheets","Sheets",[21,650,651],{},"Le code CSS est souvent regroupé dans une feuille de style.",[146,653,655],{"id":654},"ce-que-css-fait-vraiment","Ce que CSS fait vraiment",[21,657,658],{},"CSS permet par exemple de :",[31,660,661,664,667,670,673,676,679],{},[34,662,663],{},"changer la couleur d'un texte ;",[34,665,666],{},"définir la taille d'un titre ;",[34,668,669],{},"ajouter de l'espace entre deux éléments ;",[34,671,672],{},"aligner des blocs ;",[34,674,675],{},"créer une grille ;",[34,677,678],{},"rendre une page responsive ;",[34,680,681],{},"animer un bouton au survol.",[21,683,684],{},"CSS ne sert pas à décrire le contenu. Il sert à présenter ce contenu de manière claire et cohérente.",[16,686,688],{"id":687},"_2-comment-css-fonctionne-avec-html","2. Comment CSS fonctionne avec HTML",[21,690,691],{},"HTML et CSS travaillent ensemble.",[31,693,694,697],{},[34,695,696],{},"HTML structure le document.",[34,698,699],{},"CSS décide de l'apparence.",[21,701,702],{},"Exemple HTML :",[350,704,708],{"className":705,"code":706,"language":707,"meta":356,"style":356},"language-html shiki shiki-themes github-light github-dark","\u003Ch1>Bienvenue\u003C\u002Fh1>\n\u003Cp>Voici ma première page.\u003C\u002Fp>\n","html",[358,709,710,730],{"__ignoreMap":356},[711,712,715,719,722,725,727],"span",{"class":713,"line":714},"line",1,[711,716,718],{"class":717},"sVt8B","\u003C",[711,720,11],{"class":721},"s9eBZ",[711,723,724],{"class":717},">Bienvenue\u003C\u002F",[711,726,11],{"class":721},[711,728,729],{"class":717},">\n",[711,731,732,734,736,739,741],{"class":713,"line":521},[711,733,718],{"class":717},[711,735,21],{"class":721},[711,737,738],{"class":717},">Voici ma première page.\u003C\u002F",[711,740,21],{"class":721},[711,742,729],{"class":717},[21,744,745],{},"Exemple CSS :",[350,747,751],{"className":748,"code":749,"language":750,"meta":356,"style":356},"language-css shiki shiki-themes github-light github-dark","h1 {\n color: blue;\n}\n","css",[358,752,753,760,775],{"__ignoreMap":356},[711,754,755,757],{"class":713,"line":714},[711,756,11],{"class":721},[711,758,759],{"class":717}," {\n",[711,761,762,766,769,772],{"class":713,"line":521},[711,763,765],{"class":764},"sj4cs"," color",[711,767,768],{"class":717},": ",[711,770,771],{"class":764},"blue",[711,773,774],{"class":717},";\n",[711,776,777],{"class":713,"line":529},[711,778,779],{"class":717},"}\n",[21,781,782],{},"Le HTML dit qu'il y a un titre et un paragraphe. Le CSS dit que le titre doit être bleu.",[16,784,786],{"id":785},"préparer-votre-projet-avant-décrire-du-css","Préparer votre projet avant d'écrire du CSS",[21,788,789],{},"Avant de modifier la couleur d'un texte, il faut savoir où écrire le code.",[21,791,792],{},"La méthode la plus simple consiste à créer un petit dossier de projet avec deux fichiers :",[31,794,795,801],{},[34,796,797,800],{},[358,798,799],{},"index.html"," pour le contenu HTML ;",[34,802,803,806],{},[358,804,805],{},"style.css"," pour la mise en forme.",[146,808,810],{"id":809},"structure-de-départ","Structure de départ",[350,812,815],{"className":813,"code":814,"language":355,"meta":356},[353],"mon-projet\u002F\n├── index.html\n└── style.css\n",[358,816,814],{"__ignoreMap":356},[146,818,820],{"id":819},"ce-quil-faut-faire-dans-votre-éditeur","Ce qu'il faut faire dans votre éditeur",[60,822,823,826,832,838,845],{},[34,824,825],{},"Ouvrez le dossier du projet dans votre éditeur.",[34,827,828,829,831],{},"Ouvrez le fichier ",[358,830,799],{},".",[34,833,834,835,837],{},"Créez le fichier ",[358,836,805],{}," s'il n'existe pas encore.",[34,839,840,841,844],{},"Ajoutez la liaison CSS dans le ",[358,842,843],{},"\u003Chead>"," du fichier HTML.",[34,846,847,848,850,851,831],{},"Écrivez le HTML dans ",[358,849,799],{}," et le CSS dans ",[358,852,805],{},[146,854,856],{"id":855},"exemple-minimal-complet","Exemple minimal complet",[350,858,860],{"className":705,"code":859,"language":707,"meta":356,"style":356},"\u003C!DOCTYPE html>\n\u003Chtml lang=\"fr\">\n \u003Chead>\n \u003Cmeta charset=\"UTF-8\">\n \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n \u003Ctitle>Mon projet CSS\u003C\u002Ftitle>\n \u003Clink rel=\"stylesheet\" href=\"style.css\">\n \u003C\u002Fhead>\n \u003Cbody>\n \u003Ch1>Bienvenue\u003C\u002Fh1>\n \u003Cp>Voici ma page HTML.\u003C\u002Fp>\n \u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[358,861,862,876,894,904,923,948,963,989,999,1009,1022,1036,1044],{"__ignoreMap":356},[711,863,864,867,870,874],{"class":713,"line":714},[711,865,866],{"class":717},"\u003C!",[711,868,869],{"class":721},"DOCTYPE",[711,871,873],{"class":872},"sScJk"," html",[711,875,729],{"class":717},[711,877,878,880,882,885,888,892],{"class":713,"line":521},[711,879,718],{"class":717},[711,881,707],{"class":721},[711,883,884],{"class":872}," lang",[711,886,887],{"class":717},"=",[711,889,891],{"class":890},"sZZnC","\"fr\"",[711,893,729],{"class":717},[711,895,896,899,902],{"class":713,"line":529},[711,897,898],{"class":717}," \u003C",[711,900,901],{"class":721},"head",[711,903,729],{"class":717},[711,905,907,910,913,916,918,921],{"class":713,"line":906},4,[711,908,909],{"class":717}," \u003C",[711,911,912],{"class":721},"meta",[711,914,915],{"class":872}," charset",[711,917,887],{"class":717},[711,919,920],{"class":890},"\"UTF-8\"",[711,922,729],{"class":717},[711,924,926,928,930,933,935,938,941,943,946],{"class":713,"line":925},5,[711,927,909],{"class":717},[711,929,912],{"class":721},[711,931,932],{"class":872}," name",[711,934,887],{"class":717},[711,936,937],{"class":890},"\"viewport\"",[711,939,940],{"class":872}," content",[711,942,887],{"class":717},[711,944,945],{"class":890},"\"width=device-width, initial-scale=1.0\"",[711,947,729],{"class":717},[711,949,951,953,956,959,961],{"class":713,"line":950},6,[711,952,909],{"class":717},[711,954,955],{"class":721},"title",[711,957,958],{"class":717},">Mon projet CSS\u003C\u002F",[711,960,955],{"class":721},[711,962,729],{"class":717},[711,964,966,968,971,974,976,979,982,984,987],{"class":713,"line":965},7,[711,967,909],{"class":717},[711,969,970],{"class":721},"link",[711,972,973],{"class":872}," rel",[711,975,887],{"class":717},[711,977,978],{"class":890},"\"stylesheet\"",[711,980,981],{"class":872}," href",[711,983,887],{"class":717},[711,985,986],{"class":890},"\"style.css\"",[711,988,729],{"class":717},[711,990,992,995,997],{"class":713,"line":991},8,[711,993,994],{"class":717}," \u003C\u002F",[711,996,901],{"class":721},[711,998,729],{"class":717},[711,1000,1002,1004,1007],{"class":713,"line":1001},9,[711,1003,898],{"class":717},[711,1005,1006],{"class":721},"body",[711,1008,729],{"class":717},[711,1010,1012,1014,1016,1018,1020],{"class":713,"line":1011},10,[711,1013,909],{"class":717},[711,1015,11],{"class":721},[711,1017,724],{"class":717},[711,1019,11],{"class":721},[711,1021,729],{"class":717},[711,1023,1025,1027,1029,1032,1034],{"class":713,"line":1024},11,[711,1026,909],{"class":717},[711,1028,21],{"class":721},[711,1030,1031],{"class":717},">Voici ma page HTML.\u003C\u002F",[711,1033,21],{"class":721},[711,1035,729],{"class":717},[711,1037,1038,1040,1042],{"class":713,"line":556},[711,1039,994],{"class":717},[711,1041,1006],{"class":721},[711,1043,729],{"class":717},[711,1045,1047,1050,1052],{"class":713,"line":1046},13,[711,1048,1049],{"class":717},"\u003C\u002F",[711,1051,707],{"class":721},[711,1053,729],{"class":717},[350,1055,1057],{"className":748,"code":1056,"language":750,"meta":356,"style":356},"body {\n font-family: Arial, sans-serif;\n background: #f7f7f7;\n color: #222;\n}\n\nh1 {\n color: #1d4ed8;\n}\n",[358,1058,1059,1065,1083,1095,1106,1110,1115,1121,1132],{"__ignoreMap":356},[711,1060,1061,1063],{"class":713,"line":714},[711,1062,1006],{"class":721},[711,1064,759],{"class":717},[711,1066,1067,1070,1072,1075,1078,1081],{"class":713,"line":521},[711,1068,1069],{"class":764}," font-family",[711,1071,768],{"class":717},[711,1073,1074],{"class":764},"Arial",[711,1076,1077],{"class":717},", ",[711,1079,1080],{"class":764},"sans-serif",[711,1082,774],{"class":717},[711,1084,1085,1088,1090,1093],{"class":713,"line":529},[711,1086,1087],{"class":764}," background",[711,1089,768],{"class":717},[711,1091,1092],{"class":764},"#f7f7f7",[711,1094,774],{"class":717},[711,1096,1097,1099,1101,1104],{"class":713,"line":906},[711,1098,765],{"class":764},[711,1100,768],{"class":717},[711,1102,1103],{"class":764},"#222",[711,1105,774],{"class":717},[711,1107,1108],{"class":713,"line":925},[711,1109,779],{"class":717},[711,1111,1112],{"class":713,"line":950},[711,1113,1114],{"emptyLinePlaceholder":554},"\n",[711,1116,1117,1119],{"class":713,"line":965},[711,1118,11],{"class":721},[711,1120,759],{"class":717},[711,1122,1123,1125,1127,1130],{"class":713,"line":991},[711,1124,765],{"class":764},[711,1126,768],{"class":717},[711,1128,1129],{"class":764},"#1d4ed8",[711,1131,774],{"class":717},[711,1133,1134],{"class":713,"line":1001},[711,1135,779],{"class":717},[146,1137,1139],{"id":1138},"pourquoi-cette-étape-est-importante","Pourquoi cette étape est importante",[21,1141,1142],{},"Beaucoup de personnes savent écrire une règle CSS, mais ne savent pas encore dans quel fichier la mettre.",[21,1144,1145],{},"Le bon réflexe est simple :",[31,1147,1148,1151,1154],{},[34,1149,1150],{},"le contenu dans le fichier HTML ;",[34,1152,1153],{},"le style dans le fichier CSS ;",[34,1155,1156,1157,831],{},"la liaison entre les deux dans la balise ",[358,1158,970],{},[16,1160,1162],{"id":1161},"_3-comment-relier-css-à-une-page-html","3. Comment relier CSS à une page HTML",[21,1164,1165],{},"Il existe trois façons principales d'utiliser CSS.",[21,1167,1168,1169,831],{},"Dans un vrai projet, on ouvre d'abord le fichier HTML principal, puis on ajoute la feuille de style CSS avec une balise ",[358,1170,970],{},[146,1172,1174],{"id":1173},"_1-le-css-interne","1. Le CSS interne",[21,1176,1177,1178,844],{},"On écrit les styles dans la balise ",[358,1179,640],{},[350,1181,1183],{"className":705,"code":1182,"language":707,"meta":356,"style":356},"\u003Chead>\n \u003Cstyle>\n h1 {\n color: blue;\n }\n \u003C\u002Fstyle>\n\u003C\u002Fhead>\n",[358,1184,1185,1193,1201,1208,1219,1224,1232],{"__ignoreMap":356},[711,1186,1187,1189,1191],{"class":713,"line":714},[711,1188,718],{"class":717},[711,1190,901],{"class":721},[711,1192,729],{"class":717},[711,1194,1195,1197,1199],{"class":713,"line":521},[711,1196,898],{"class":717},[711,1198,640],{"class":721},[711,1200,729],{"class":717},[711,1202,1203,1206],{"class":713,"line":529},[711,1204,1205],{"class":721}," h1",[711,1207,759],{"class":717},[711,1209,1210,1213,1215,1217],{"class":713,"line":906},[711,1211,1212],{"class":764}," color",[711,1214,768],{"class":717},[711,1216,771],{"class":764},[711,1218,774],{"class":717},[711,1220,1221],{"class":713,"line":925},[711,1222,1223],{"class":717}," }\n",[711,1225,1226,1228,1230],{"class":713,"line":950},[711,1227,994],{"class":717},[711,1229,640],{"class":721},[711,1231,729],{"class":717},[711,1233,1234,1236,1238],{"class":713,"line":965},[711,1235,1049],{"class":717},[711,1237,901],{"class":721},[711,1239,729],{"class":717},[146,1241,1243],{"id":1242},"_2-le-css-externe","2. Le CSS externe",[21,1245,1246,1247,831],{},"On écrit les styles dans un fichier séparé, par exemple ",[358,1248,805],{},[350,1250,1252],{"className":705,"code":1251,"language":707,"meta":356,"style":356},"\u003Clink rel=\"stylesheet\" href=\"style.css\">\n",[358,1253,1254],{"__ignoreMap":356},[711,1255,1256,1258,1260,1262,1264,1266,1268,1270,1272],{"class":713,"line":714},[711,1257,718],{"class":717},[711,1259,970],{"class":721},[711,1261,973],{"class":872},[711,1263,887],{"class":717},[711,1265,978],{"class":890},[711,1267,981],{"class":872},[711,1269,887],{"class":717},[711,1271,986],{"class":890},[711,1273,729],{"class":717},[21,1275,1276],{},"C'est la méthode la plus utilisée dans les vrais projets, car elle garde le code mieux organisé.",[146,1278,1280],{"id":1279},"_3-le-style-en-ligne","3. Le style en ligne",[21,1282,1283,1284,1286],{},"On écrit le style directement dans l'attribut ",[358,1285,640],{}," de la balise.",[350,1288,1290],{"className":705,"code":1289,"language":707,"meta":356,"style":356},"\u003Cp style=\"color: red;\">Texte rouge\u003C\u002Fp>\n",[358,1291,1292],{"__ignoreMap":356},[711,1293,1294,1296,1298,1301,1303,1306,1309,1311],{"class":713,"line":714},[711,1295,718],{"class":717},[711,1297,21],{"class":721},[711,1299,1300],{"class":872}," style",[711,1302,887],{"class":717},[711,1304,1305],{"class":890},"\"color: red;\"",[711,1307,1308],{"class":717},">Texte rouge\u003C\u002F",[711,1310,21],{"class":721},[711,1312,729],{"class":717},[21,1314,1315],{},"Cette méthode existe, mais elle est peu recommandée pour un vrai projet car elle mélange contenu et présentation.",[16,1317,1319],{"id":1318},"_4-la-syntaxe-de-base-de-css","4. La syntaxe de base de CSS",[21,1321,1322],{},"Une règle CSS est composée de trois éléments :",[31,1324,1325,1328,1331],{},[34,1326,1327],{},"un sélecteur ;",[34,1329,1330],{},"des propriétés ;",[34,1332,1333],{},"des valeurs.",[21,1335,348],{},[350,1337,1339],{"className":748,"code":1338,"language":750,"meta":356,"style":356},"p {\n color: #333;\n font-size: 16px;\n}\n",[358,1340,1341,1347,1358,1374],{"__ignoreMap":356},[711,1342,1343,1345],{"class":713,"line":714},[711,1344,21],{"class":721},[711,1346,759],{"class":717},[711,1348,1349,1351,1353,1356],{"class":713,"line":521},[711,1350,765],{"class":764},[711,1352,768],{"class":717},[711,1354,1355],{"class":764},"#333",[711,1357,774],{"class":717},[711,1359,1360,1363,1365,1368,1372],{"class":713,"line":529},[711,1361,1362],{"class":764}," font-size",[711,1364,768],{"class":717},[711,1366,1367],{"class":764},"16",[711,1369,1371],{"class":1370},"szBVR","px",[711,1373,774],{"class":717},[711,1375,1376],{"class":713,"line":906},[711,1377,779],{"class":717},[146,1379,1381],{"id":1380},"le-sélecteur","Le sélecteur",[21,1383,1384],{},"Le sélecteur indique quels éléments HTML sont ciblés.",[21,1386,1387,1388,1390],{},"Ici, ",[358,1389,21],{}," cible tous les paragraphes.",[146,1392,1394],{"id":1393},"la-propriété","La propriété",[21,1396,1397],{},"La propriété indique ce que vous voulez modifier.",[21,1399,216],{},[31,1401,1402,1408,1413,1418,1423],{},[34,1403,1404,1407],{},[358,1405,1406],{},"color"," ;",[34,1409,1410,1407],{},[358,1411,1412],{},"font-size",[34,1414,1415,1407],{},[358,1416,1417],{},"margin",[34,1419,1420,1407],{},[358,1421,1422],{},"padding",[34,1424,1425,831],{},[358,1426,1427],{},"background-color",[146,1429,1431],{"id":1430},"la-valeur","La valeur",[21,1433,1434],{},"La valeur précise le réglage appliqué à la propriété.",[21,1436,1437,1438,1441,1442,831],{},"Par exemple, ",[358,1439,1440],{},"16px"," ou ",[358,1443,1355],{},[16,1445,1447],{"id":1446},"_5-les-sélecteurs-les-plus-utiles","5. Les sélecteurs les plus utiles",[146,1449,1451],{"id":1450},"le-sélecteur-de-balise","Le sélecteur de balise",[350,1453,1455],{"className":748,"code":1454,"language":750,"meta":356,"style":356},"p {\n line-height: 1.6;\n}\n",[358,1456,1457,1463,1475],{"__ignoreMap":356},[711,1458,1459,1461],{"class":713,"line":714},[711,1460,21],{"class":721},[711,1462,759],{"class":717},[711,1464,1465,1468,1470,1473],{"class":713,"line":521},[711,1466,1467],{"class":764}," line-height",[711,1469,768],{"class":717},[711,1471,1472],{"class":764},"1.6",[711,1474,774],{"class":717},[711,1476,1477],{"class":713,"line":529},[711,1478,779],{"class":717},[21,1480,1481],{},"Il cible tous les paragraphes.",[146,1483,1485],{"id":1484},"le-sélecteur-de-classe","Le sélecteur de classe",[350,1487,1489],{"className":748,"code":1488,"language":750,"meta":356,"style":356},".card {\n background: white;\n}\n",[358,1490,1491,1498,1509],{"__ignoreMap":356},[711,1492,1493,1496],{"class":713,"line":714},[711,1494,1495],{"class":872},".card",[711,1497,759],{"class":717},[711,1499,1500,1502,1504,1507],{"class":713,"line":521},[711,1501,1087],{"class":764},[711,1503,768],{"class":717},[711,1505,1506],{"class":764},"white",[711,1508,774],{"class":717},[711,1510,1511],{"class":713,"line":529},[711,1512,779],{"class":717},[21,1514,1515],{},"En HTML :",[350,1517,1519],{"className":705,"code":1518,"language":707,"meta":356,"style":356},"\u003Cdiv class=\"card\">Contenu\u003C\u002Fdiv>\n",[358,1520,1521],{"__ignoreMap":356},[711,1522,1523,1525,1528,1531,1533,1536,1539,1541],{"class":713,"line":714},[711,1524,718],{"class":717},[711,1526,1527],{"class":721},"div",[711,1529,1530],{"class":872}," class",[711,1532,887],{"class":717},[711,1534,1535],{"class":890},"\"card\"",[711,1537,1538],{"class":717},">Contenu\u003C\u002F",[711,1540,1527],{"class":721},[711,1542,729],{"class":717},[21,1544,1545],{},"La classe permet de réutiliser un style sur plusieurs éléments.",[146,1547,1549],{"id":1548},"le-sélecteur-didentifiant","Le sélecteur d'identifiant",[350,1551,1553],{"className":748,"code":1552,"language":750,"meta":356,"style":356},"#contact {\n padding: 2rem;\n}\n",[358,1554,1555,1562,1577],{"__ignoreMap":356},[711,1556,1557,1560],{"class":713,"line":714},[711,1558,1559],{"class":872},"#contact",[711,1561,759],{"class":717},[711,1563,1564,1567,1569,1572,1575],{"class":713,"line":521},[711,1565,1566],{"class":764}," padding",[711,1568,768],{"class":717},[711,1570,1571],{"class":764},"2",[711,1573,1574],{"class":1370},"rem",[711,1576,774],{"class":717},[711,1578,1579],{"class":713,"line":529},[711,1580,779],{"class":717},[21,1582,1515],{},[350,1584,1586],{"className":705,"code":1585,"language":707,"meta":356,"style":356},"\u003Csection id=\"contact\">\u003C\u002Fsection>\n",[358,1587,1588],{"__ignoreMap":356},[711,1589,1590,1592,1595,1598,1600,1603,1606,1608],{"class":713,"line":714},[711,1591,718],{"class":717},[711,1593,1594],{"class":721},"section",[711,1596,1597],{"class":872}," id",[711,1599,887],{"class":717},[711,1601,1602],{"class":890},"\"contact\"",[711,1604,1605],{"class":717},">\u003C\u002F",[711,1607,1594],{"class":721},[711,1609,729],{"class":717},[21,1611,1612],{},"Un identifiant doit rester unique dans la page.",[146,1614,1616],{"id":1615},"le-sélecteur-multiple","Le sélecteur multiple",[350,1618,1620],{"className":748,"code":1619,"language":750,"meta":356,"style":356},"h1, h2, h3 {\n font-family: Arial, sans-serif;\n}\n",[358,1621,1622,1636,1650],{"__ignoreMap":356},[711,1623,1624,1626,1628,1630,1632,1634],{"class":713,"line":714},[711,1625,11],{"class":721},[711,1627,1077],{"class":717},[711,1629,16],{"class":721},[711,1631,1077],{"class":717},[711,1633,146],{"class":721},[711,1635,759],{"class":717},[711,1637,1638,1640,1642,1644,1646,1648],{"class":713,"line":521},[711,1639,1069],{"class":764},[711,1641,768],{"class":717},[711,1643,1074],{"class":764},[711,1645,1077],{"class":717},[711,1647,1080],{"class":764},[711,1649,774],{"class":717},[711,1651,1652],{"class":713,"line":529},[711,1653,779],{"class":717},[21,1655,1656],{},"Il permet de cibler plusieurs éléments à la fois.",[146,1658,1660],{"id":1659},"le-sélecteur-descendant","Le sélecteur descendant",[350,1662,1664],{"className":748,"code":1663,"language":750,"meta":356,"style":356},"article p {\n color: #444;\n}\n",[358,1665,1666,1676,1687],{"__ignoreMap":356},[711,1667,1668,1671,1674],{"class":713,"line":714},[711,1669,1670],{"class":721},"article",[711,1672,1673],{"class":721}," p",[711,1675,759],{"class":717},[711,1677,1678,1680,1682,1685],{"class":713,"line":521},[711,1679,765],{"class":764},[711,1681,768],{"class":717},[711,1683,1684],{"class":764},"#444",[711,1686,774],{"class":717},[711,1688,1689],{"class":713,"line":529},[711,1690,779],{"class":717},[21,1692,1693,1694,1696],{},"Ici, seuls les paragraphes situés dans un ",[358,1695,1670],{}," sont concernés.",[16,1698,1700],{"id":1699},"_6-les-couleurs","6. Les couleurs",[21,1702,1703],{},"Les couleurs font partie des premiers réglages qu'on apprend en CSS.",[146,1705,1707],{"id":1706},"nom-de-couleur","Nom de couleur",[350,1709,1711],{"className":748,"code":1710,"language":750,"meta":356,"style":356},"h1 {\n color: red;\n}\n",[358,1712,1713,1719,1730],{"__ignoreMap":356},[711,1714,1715,1717],{"class":713,"line":714},[711,1716,11],{"class":721},[711,1718,759],{"class":717},[711,1720,1721,1723,1725,1728],{"class":713,"line":521},[711,1722,765],{"class":764},[711,1724,768],{"class":717},[711,1726,1727],{"class":764},"red",[711,1729,774],{"class":717},[711,1731,1732],{"class":713,"line":529},[711,1733,779],{"class":717},[146,1735,1737],{"id":1736},"hexadécimal","Hexadécimal",[350,1739,1741],{"className":748,"code":1740,"language":750,"meta":356,"style":356},"h1 {\n color: #ff0000;\n}\n",[358,1742,1743,1749,1760],{"__ignoreMap":356},[711,1744,1745,1747],{"class":713,"line":714},[711,1746,11],{"class":721},[711,1748,759],{"class":717},[711,1750,1751,1753,1755,1758],{"class":713,"line":521},[711,1752,765],{"class":764},[711,1754,768],{"class":717},[711,1756,1757],{"class":764},"#ff0000",[711,1759,774],{"class":717},[711,1761,1762],{"class":713,"line":529},[711,1763,779],{"class":717},[146,1765,1767],{"id":1766},"rgb","RGB",[350,1769,1771],{"className":748,"code":1770,"language":750,"meta":356,"style":356},"h1 {\n color: rgb(255, 0, 0);\n}\n",[358,1772,1773,1779,1805],{"__ignoreMap":356},[711,1774,1775,1777],{"class":713,"line":714},[711,1776,11],{"class":721},[711,1778,759],{"class":717},[711,1780,1781,1783,1785,1787,1790,1793,1795,1798,1800,1802],{"class":713,"line":521},[711,1782,765],{"class":764},[711,1784,768],{"class":717},[711,1786,1766],{"class":764},[711,1788,1789],{"class":717},"(",[711,1791,1792],{"class":764},"255",[711,1794,1077],{"class":717},[711,1796,1797],{"class":764},"0",[711,1799,1077],{"class":717},[711,1801,1797],{"class":764},[711,1803,1804],{"class":717},");\n",[711,1806,1807],{"class":713,"line":529},[711,1808,779],{"class":717},[146,1810,1812],{"id":1811},"rgba","RGBA",[350,1814,1816],{"className":748,"code":1815,"language":750,"meta":356,"style":356},"h1 {\n color: rgba(255, 0, 0, 0.7);\n}\n",[358,1817,1818,1824,1851],{"__ignoreMap":356},[711,1819,1820,1822],{"class":713,"line":714},[711,1821,11],{"class":721},[711,1823,759],{"class":717},[711,1825,1826,1828,1830,1832,1834,1836,1838,1840,1842,1844,1846,1849],{"class":713,"line":521},[711,1827,765],{"class":764},[711,1829,768],{"class":717},[711,1831,1811],{"class":764},[711,1833,1789],{"class":717},[711,1835,1792],{"class":764},[711,1837,1077],{"class":717},[711,1839,1797],{"class":764},[711,1841,1077],{"class":717},[711,1843,1797],{"class":764},[711,1845,1077],{"class":717},[711,1847,1848],{"class":764},"0.7",[711,1850,1804],{"class":717},[711,1852,1853],{"class":713,"line":529},[711,1854,779],{"class":717},[21,1856,1857],{},"Le dernier paramètre correspond à la transparence.",[146,1859,1861],{"id":1860},"bon-réflexe","Bon réflexe",[21,1863,1864],{},"Privilégiez des couleurs cohérentes et accessibles. Le contraste entre le texte et le fond doit rester suffisant pour une bonne lisibilité.",[16,1866,1868],{"id":1867},"_7-les-unités-de-mesure","7. Les unités de mesure",[21,1870,1871],{},"CSS utilise plusieurs types d'unités.",[146,1873,1875],{"id":1874},"pixels","Pixels",[350,1877,1879],{"className":748,"code":1878,"language":750,"meta":356,"style":356},"h1 {\n font-size: 32px;\n}\n",[358,1880,1881,1887,1900],{"__ignoreMap":356},[711,1882,1883,1885],{"class":713,"line":714},[711,1884,11],{"class":721},[711,1886,759],{"class":717},[711,1888,1889,1891,1893,1896,1898],{"class":713,"line":521},[711,1890,1362],{"class":764},[711,1892,768],{"class":717},[711,1894,1895],{"class":764},"32",[711,1897,1371],{"class":1370},[711,1899,774],{"class":717},[711,1901,1902],{"class":713,"line":529},[711,1903,779],{"class":717},[21,1905,1906],{},"Le pixel est une unité simple à comprendre, mais pas toujours la plus flexible.",[146,1908,1910,1913,1914],{"id":1909},"em-et-rem",[358,1911,1912],{},"em"," et ",[358,1915,1574],{},[350,1917,1919],{"className":748,"code":1918,"language":750,"meta":356,"style":356},"p {\n font-size: 1rem;\n}\n",[358,1920,1921,1927,1940],{"__ignoreMap":356},[711,1922,1923,1925],{"class":713,"line":714},[711,1924,21],{"class":721},[711,1926,759],{"class":717},[711,1928,1929,1931,1933,1936,1938],{"class":713,"line":521},[711,1930,1362],{"class":764},[711,1932,768],{"class":717},[711,1934,1935],{"class":764},"1",[711,1937,1574],{"class":1370},[711,1939,774],{"class":717},[711,1941,1942],{"class":713,"line":529},[711,1943,779],{"class":717},[21,1945,1946],{},"Ces unités sont très utiles pour construire des interfaces plus adaptables.",[31,1948,1949,1954],{},[34,1950,1951,1953],{},[358,1952,1912],{}," dépend souvent de l'élément parent ;",[34,1955,1956,1958],{},[358,1957,1574],{}," dépend de la taille de base du document.",[146,1960,1962],{"id":1961},"pourcentage","Pourcentage",[350,1964,1966],{"className":748,"code":1965,"language":750,"meta":356,"style":356},".container {\n width: 80%;\n}\n",[358,1967,1968,1975,1990],{"__ignoreMap":356},[711,1969,1970,1973],{"class":713,"line":714},[711,1971,1972],{"class":872},".container",[711,1974,759],{"class":717},[711,1976,1977,1980,1982,1985,1988],{"class":713,"line":521},[711,1978,1979],{"class":764}," width",[711,1981,768],{"class":717},[711,1983,1984],{"class":764},"80",[711,1986,1987],{"class":1370},"%",[711,1989,774],{"class":717},[711,1991,1992],{"class":713,"line":529},[711,1993,779],{"class":717},[21,1995,1996],{},"Le pourcentage dépend de la taille de l'élément parent.",[146,1998,2000],{"id":1999},"unités-de-viewport","Unités de viewport",[350,2002,2004],{"className":748,"code":2003,"language":750,"meta":356,"style":356},".hero {\n min-height: 100vh;\n}\n",[358,2005,2006,2013,2028],{"__ignoreMap":356},[711,2007,2008,2011],{"class":713,"line":714},[711,2009,2010],{"class":872},".hero",[711,2012,759],{"class":717},[711,2014,2015,2018,2020,2023,2026],{"class":713,"line":521},[711,2016,2017],{"class":764}," min-height",[711,2019,768],{"class":717},[711,2021,2022],{"class":764},"100",[711,2024,2025],{"class":1370},"vh",[711,2027,774],{"class":717},[711,2029,2030],{"class":713,"line":529},[711,2031,779],{"class":717},[21,2033,2034,2036],{},[358,2035,2025],{}," correspond à la hauteur visible de l'écran.",[16,2038,2040],{"id":2039},"_8-le-modèle-de-boîte","8. Le modèle de boîte",[21,2042,2043],{},"Le modèle de boîte est l'un des concepts les plus importants en CSS.",[21,2045,2046],{},"Chaque élément peut être vu comme une boîte composée de :",[31,2048,2049,2052,2055,2058],{},[34,2050,2051],{},"contenu ;",[34,2053,2054],{},"padding ;",[34,2056,2057],{},"border ;",[34,2059,2060],{},"margin.",[146,2062,2064],{"id":2063},"exemple-visuel","Exemple visuel",[350,2066,2068],{"className":748,"code":2067,"language":750,"meta":356,"style":356},".card {\n width: 300px;\n padding: 20px;\n border: 1px solid #ddd;\n margin: 16px;\n}\n",[358,2069,2070,2076,2089,2102,2121,2134],{"__ignoreMap":356},[711,2071,2072,2074],{"class":713,"line":714},[711,2073,1495],{"class":872},[711,2075,759],{"class":717},[711,2077,2078,2080,2082,2085,2087],{"class":713,"line":521},[711,2079,1979],{"class":764},[711,2081,768],{"class":717},[711,2083,2084],{"class":764},"300",[711,2086,1371],{"class":1370},[711,2088,774],{"class":717},[711,2090,2091,2093,2095,2098,2100],{"class":713,"line":529},[711,2092,1566],{"class":764},[711,2094,768],{"class":717},[711,2096,2097],{"class":764},"20",[711,2099,1371],{"class":1370},[711,2101,774],{"class":717},[711,2103,2104,2107,2109,2111,2113,2116,2119],{"class":713,"line":906},[711,2105,2106],{"class":764}," border",[711,2108,768],{"class":717},[711,2110,1935],{"class":764},[711,2112,1371],{"class":1370},[711,2114,2115],{"class":764}," solid",[711,2117,2118],{"class":764}," #ddd",[711,2120,774],{"class":717},[711,2122,2123,2126,2128,2130,2132],{"class":713,"line":925},[711,2124,2125],{"class":764}," margin",[711,2127,768],{"class":717},[711,2129,1367],{"class":764},[711,2131,1371],{"class":1370},[711,2133,774],{"class":717},[711,2135,2136],{"class":713,"line":950},[711,2137,779],{"class":717},[146,2139,2141],{"id":2140},"contenu","Contenu",[21,2143,2144],{},"C'est la partie principale : texte, image ou autre élément.",[146,2146,2147],{"id":1422},"Padding",[21,2149,2150],{},"L'espace entre le contenu et la bordure.",[146,2152,2154],{"id":2153},"border","Border",[21,2156,2157],{},"La bordure autour de l'élément.",[146,2159,2160],{"id":1417},"Margin",[21,2162,2163],{},"L'espace extérieur entre cet élément et les autres.",[146,2165,2167],{"id":2166},"box-sizing",[358,2168,2166],{},[21,2170,2171],{},"Très souvent, on ajoute cette règle :",[350,2173,2175],{"className":748,"code":2174,"language":750,"meta":356,"style":356},"* {\n box-sizing: border-box;\n}\n",[358,2176,2177,2184,2196],{"__ignoreMap":356},[711,2178,2179,2182],{"class":713,"line":714},[711,2180,2181],{"class":721},"*",[711,2183,759],{"class":717},[711,2185,2186,2189,2191,2194],{"class":713,"line":521},[711,2187,2188],{"class":764}," box-sizing",[711,2190,768],{"class":717},[711,2192,2193],{"class":764},"border-box",[711,2195,774],{"class":717},[711,2197,2198],{"class":713,"line":529},[711,2199,779],{"class":717},[21,2201,2202],{},"Cela rend le calcul de la largeur plus simple et plus prévisible.",[16,2204,2206],{"id":2205},"_9-le-texte-et-la-typographie","9. Le texte et la typographie",[21,2208,2209],{},"La typographie joue un rôle essentiel dans la lisibilité.",[146,2211,2213],{"id":2212},"taille-du-texte","Taille du texte",[350,2215,2217],{"className":748,"code":2216,"language":750,"meta":356,"style":356},"body {\n font-size: 16px;\n}\n",[358,2218,2219,2225,2237],{"__ignoreMap":356},[711,2220,2221,2223],{"class":713,"line":714},[711,2222,1006],{"class":721},[711,2224,759],{"class":717},[711,2226,2227,2229,2231,2233,2235],{"class":713,"line":521},[711,2228,1362],{"class":764},[711,2230,768],{"class":717},[711,2232,1367],{"class":764},[711,2234,1371],{"class":1370},[711,2236,774],{"class":717},[711,2238,2239],{"class":713,"line":529},[711,2240,779],{"class":717},[146,2242,2244],{"id":2243},"police","Police",[350,2246,2248],{"className":748,"code":2247,"language":750,"meta":356,"style":356},"body {\n font-family: Arial, sans-serif;\n}\n",[358,2249,2250,2256,2270],{"__ignoreMap":356},[711,2251,2252,2254],{"class":713,"line":714},[711,2253,1006],{"class":721},[711,2255,759],{"class":717},[711,2257,2258,2260,2262,2264,2266,2268],{"class":713,"line":521},[711,2259,1069],{"class":764},[711,2261,768],{"class":717},[711,2263,1074],{"class":764},[711,2265,1077],{"class":717},[711,2267,1080],{"class":764},[711,2269,774],{"class":717},[711,2271,2272],{"class":713,"line":529},[711,2273,779],{"class":717},[146,2275,2277],{"id":2276},"hauteur-de-ligne","Hauteur de ligne",[350,2279,2280],{"className":748,"code":1454,"language":750,"meta":356,"style":356},[358,2281,2282,2288,2298],{"__ignoreMap":356},[711,2283,2284,2286],{"class":713,"line":714},[711,2285,21],{"class":721},[711,2287,759],{"class":717},[711,2289,2290,2292,2294,2296],{"class":713,"line":521},[711,2291,1467],{"class":764},[711,2293,768],{"class":717},[711,2295,1472],{"class":764},[711,2297,774],{"class":717},[711,2299,2300],{"class":713,"line":529},[711,2301,779],{"class":717},[146,2303,2305],{"id":2304},"poids-du-texte","Poids du texte",[350,2307,2309],{"className":748,"code":2308,"language":750,"meta":356,"style":356},"h1 {\n font-weight: 700;\n}\n",[358,2310,2311,2317,2329],{"__ignoreMap":356},[711,2312,2313,2315],{"class":713,"line":714},[711,2314,11],{"class":721},[711,2316,759],{"class":717},[711,2318,2319,2322,2324,2327],{"class":713,"line":521},[711,2320,2321],{"class":764}," font-weight",[711,2323,768],{"class":717},[711,2325,2326],{"class":764},"700",[711,2328,774],{"class":717},[711,2330,2331],{"class":713,"line":529},[711,2332,779],{"class":717},[146,2334,2336],{"id":2335},"alignement","Alignement",[350,2338,2340],{"className":748,"code":2339,"language":750,"meta":356,"style":356},"h1 {\n text-align: center;\n}\n",[358,2341,2342,2348,2360],{"__ignoreMap":356},[711,2343,2344,2346],{"class":713,"line":714},[711,2345,11],{"class":721},[711,2347,759],{"class":717},[711,2349,2350,2353,2355,2358],{"class":713,"line":521},[711,2351,2352],{"class":764}," text-align",[711,2354,768],{"class":717},[711,2356,2357],{"class":764},"center",[711,2359,774],{"class":717},[711,2361,2362],{"class":713,"line":529},[711,2363,779],{"class":717},[146,2365,2367],{"id":2366},"espacement-des-lettres","Espacement des lettres",[350,2369,2371],{"className":748,"code":2370,"language":750,"meta":356,"style":356},"h1 {\n letter-spacing: 1px;\n}\n",[358,2372,2373,2379,2392],{"__ignoreMap":356},[711,2374,2375,2377],{"class":713,"line":714},[711,2376,11],{"class":721},[711,2378,759],{"class":717},[711,2380,2381,2384,2386,2388,2390],{"class":713,"line":521},[711,2382,2383],{"class":764}," letter-spacing",[711,2385,768],{"class":717},[711,2387,1935],{"class":764},[711,2389,1371],{"class":1370},[711,2391,774],{"class":717},[711,2393,2394],{"class":713,"line":529},[711,2395,779],{"class":717},[146,2397,2399],{"id":2398},"bon-réflexe-typographique","Bon réflexe typographique",[21,2401,2402],{},"Ne multipliez pas les polices et les tailles sans raison. Une hiérarchie simple est souvent plus élégante et plus claire.",[16,2404,2406],{"id":2405},"_10-les-backgrounds-et-les-bordures","10. Les backgrounds et les bordures",[146,2408,2410],{"id":2409},"couleur-de-fond","Couleur de fond",[350,2412,2414],{"className":748,"code":2413,"language":750,"meta":356,"style":356},".section {\n background-color: #f5f5f5;\n}\n",[358,2415,2416,2423,2435],{"__ignoreMap":356},[711,2417,2418,2421],{"class":713,"line":714},[711,2419,2420],{"class":872},".section",[711,2422,759],{"class":717},[711,2424,2425,2428,2430,2433],{"class":713,"line":521},[711,2426,2427],{"class":764}," background-color",[711,2429,768],{"class":717},[711,2431,2432],{"class":764},"#f5f5f5",[711,2434,774],{"class":717},[711,2436,2437],{"class":713,"line":529},[711,2438,779],{"class":717},[146,2440,2442],{"id":2441},"image-de-fond","Image de fond",[350,2444,2446],{"className":748,"code":2445,"language":750,"meta":356,"style":356},".hero {\n background-image: linear-gradient(135deg, #1d4ed8, #60a5fa);\n background-size: cover;\n background-position: center;\n}\n",[358,2447,2448,2454,2483,2495,2506],{"__ignoreMap":356},[711,2449,2450,2452],{"class":713,"line":714},[711,2451,2010],{"class":872},[711,2453,759],{"class":717},[711,2455,2456,2459,2461,2464,2466,2469,2472,2474,2476,2478,2481],{"class":713,"line":521},[711,2457,2458],{"class":764}," background-image",[711,2460,768],{"class":717},[711,2462,2463],{"class":764},"linear-gradient",[711,2465,1789],{"class":717},[711,2467,2468],{"class":764},"135",[711,2470,2471],{"class":1370},"deg",[711,2473,1077],{"class":717},[711,2475,1129],{"class":764},[711,2477,1077],{"class":717},[711,2479,2480],{"class":764},"#60a5fa",[711,2482,1804],{"class":717},[711,2484,2485,2488,2490,2493],{"class":713,"line":529},[711,2486,2487],{"class":764}," background-size",[711,2489,768],{"class":717},[711,2491,2492],{"class":764},"cover",[711,2494,774],{"class":717},[711,2496,2497,2500,2502,2504],{"class":713,"line":906},[711,2498,2499],{"class":764}," background-position",[711,2501,768],{"class":717},[711,2503,2357],{"class":764},[711,2505,774],{"class":717},[711,2507,2508],{"class":713,"line":925},[711,2509,779],{"class":717},[146,2511,2513],{"id":2512},"bordure","Bordure",[350,2515,2517],{"className":748,"code":2516,"language":750,"meta":356,"style":356},".card {\n border: 1px solid #e5e5e5;\n}\n",[358,2518,2519,2525,2542],{"__ignoreMap":356},[711,2520,2521,2523],{"class":713,"line":714},[711,2522,1495],{"class":872},[711,2524,759],{"class":717},[711,2526,2527,2529,2531,2533,2535,2537,2540],{"class":713,"line":521},[711,2528,2106],{"class":764},[711,2530,768],{"class":717},[711,2532,1935],{"class":764},[711,2534,1371],{"class":1370},[711,2536,2115],{"class":764},[711,2538,2539],{"class":764}," #e5e5e5",[711,2541,774],{"class":717},[711,2543,2544],{"class":713,"line":529},[711,2545,779],{"class":717},[146,2547,2549],{"id":2548},"coins-arrondis","Coins arrondis",[350,2551,2553],{"className":748,"code":2552,"language":750,"meta":356,"style":356},".card {\n border-radius: 12px;\n}\n",[358,2554,2555,2561,2575],{"__ignoreMap":356},[711,2556,2557,2559],{"class":713,"line":714},[711,2558,1495],{"class":872},[711,2560,759],{"class":717},[711,2562,2563,2566,2568,2571,2573],{"class":713,"line":521},[711,2564,2565],{"class":764}," border-radius",[711,2567,768],{"class":717},[711,2569,2570],{"class":764},"12",[711,2572,1371],{"class":1370},[711,2574,774],{"class":717},[711,2576,2577],{"class":713,"line":529},[711,2578,779],{"class":717},[16,2580,2582],{"id":2581},"_11-laffichage-et-lorganisation-des-éléments","11. L'affichage et l'organisation des éléments",[21,2584,2585],{},"CSS permet de contrôler la manière dont les éléments se disposent sur la page.",[146,2587,2589],{"id":2588},"display-block",[358,2590,2591],{},"display: block",[21,2593,2594],{},"Un élément bloc prend généralement toute la largeur disponible.",[146,2596,2598],{"id":2597},"display-inline",[358,2599,2600],{},"display: inline",[21,2602,2603],{},"Un élément en ligne se place dans le flux du texte.",[146,2605,2607],{"id":2606},"display-flex",[358,2608,2609],{},"display: flex",[21,2611,2612],{},"Flexbox sert à aligner des éléments sur un axe.",[146,2614,2616],{"id":2615},"display-grid",[358,2617,2618],{},"display: grid",[21,2620,2621],{},"Grid sert à construire des mises en page en deux dimensions.",[21,2623,2624],{},"Nous y reviendrons plus loin.",[16,2626,2628],{"id":2627},"_12-flexbox","12. Flexbox",[21,2630,2631],{},"Flexbox est très utile pour aligner les éléments simplement.",[146,2633,2635],{"id":2634},"exemple-de-base","Exemple de base",[350,2637,2639],{"className":748,"code":2638,"language":750,"meta":356,"style":356},".nav {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n",[358,2640,2641,2648,2660,2672,2683],{"__ignoreMap":356},[711,2642,2643,2646],{"class":713,"line":714},[711,2644,2645],{"class":872},".nav",[711,2647,759],{"class":717},[711,2649,2650,2653,2655,2658],{"class":713,"line":521},[711,2651,2652],{"class":764}," display",[711,2654,768],{"class":717},[711,2656,2657],{"class":764},"flex",[711,2659,774],{"class":717},[711,2661,2662,2665,2667,2670],{"class":713,"line":529},[711,2663,2664],{"class":764}," justify-content",[711,2666,768],{"class":717},[711,2668,2669],{"class":764},"space-between",[711,2671,774],{"class":717},[711,2673,2674,2677,2679,2681],{"class":713,"line":906},[711,2675,2676],{"class":764}," align-items",[711,2678,768],{"class":717},[711,2680,2357],{"class":764},[711,2682,774],{"class":717},[711,2684,2685],{"class":713,"line":925},[711,2686,779],{"class":717},[146,2688,2690],{"id":2689},"ce-que-cela-signifie","Ce que cela signifie",[31,2692,2693,2698,2704],{},[34,2694,2695,2697],{},[358,2696,2609],{}," active le mode flexbox ;",[34,2699,2700,2703],{},[358,2701,2702],{},"justify-content"," gère l'alignement horizontal ;",[34,2705,2706,2709],{},[358,2707,2708],{},"align-items"," gère l'alignement vertical.",[146,2711,2713],{"id":2712},"quelques-propriétés-utiles","Quelques propriétés utiles",[350,2715,2717],{"className":748,"code":2716,"language":750,"meta":356,"style":356},".container {\n display: flex;\n gap: 16px;\n flex-wrap: wrap;\n}\n",[358,2718,2719,2725,2735,2748,2760],{"__ignoreMap":356},[711,2720,2721,2723],{"class":713,"line":714},[711,2722,1972],{"class":872},[711,2724,759],{"class":717},[711,2726,2727,2729,2731,2733],{"class":713,"line":521},[711,2728,2652],{"class":764},[711,2730,768],{"class":717},[711,2732,2657],{"class":764},[711,2734,774],{"class":717},[711,2736,2737,2740,2742,2744,2746],{"class":713,"line":529},[711,2738,2739],{"class":764}," gap",[711,2741,768],{"class":717},[711,2743,1367],{"class":764},[711,2745,1371],{"class":1370},[711,2747,774],{"class":717},[711,2749,2750,2753,2755,2758],{"class":713,"line":906},[711,2751,2752],{"class":764}," flex-wrap",[711,2754,768],{"class":717},[711,2756,2757],{"class":764},"wrap",[711,2759,774],{"class":717},[711,2761,2762],{"class":713,"line":925},[711,2763,779],{"class":717},[146,2765,2767],{"id":2766},"quand-utiliser-flexbox","Quand utiliser Flexbox",[21,2769,2770],{},"Flexbox est particulièrement pratique pour :",[31,2772,2773,2776,2779,2782],{},[34,2774,2775],{},"une barre de navigation ;",[34,2777,2778],{},"des cartes alignées ;",[34,2780,2781],{},"un bouton avec une icône et du texte ;",[34,2783,2784],{},"des éléments alignés sur une ligne ou une colonne.",[16,2786,2788],{"id":2787},"_13-grid","13. Grid",[21,2790,2791],{},"Grid est idéal pour organiser des mises en page plus complexes.",[146,2793,149],{"id":148},[350,2795,2797],{"className":748,"code":2796,"language":750,"meta":356,"style":356},".grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 20px;\n}\n",[358,2798,2799,2806,2817,2841,2853],{"__ignoreMap":356},[711,2800,2801,2804],{"class":713,"line":714},[711,2802,2803],{"class":872},".grid",[711,2805,759],{"class":717},[711,2807,2808,2810,2812,2815],{"class":713,"line":521},[711,2809,2652],{"class":764},[711,2811,768],{"class":717},[711,2813,2814],{"class":764},"grid",[711,2816,774],{"class":717},[711,2818,2819,2822,2824,2827,2829,2832,2834,2836,2839],{"class":713,"line":529},[711,2820,2821],{"class":764}," grid-template-columns",[711,2823,768],{"class":717},[711,2825,2826],{"class":764},"repeat",[711,2828,1789],{"class":717},[711,2830,2831],{"class":764},"3",[711,2833,1077],{"class":717},[711,2835,1935],{"class":764},[711,2837,2838],{"class":1370},"fr",[711,2840,1804],{"class":717},[711,2842,2843,2845,2847,2849,2851],{"class":713,"line":906},[711,2844,2739],{"class":764},[711,2846,768],{"class":717},[711,2848,2097],{"class":764},[711,2850,1371],{"class":1370},[711,2852,774],{"class":717},[711,2854,2855],{"class":713,"line":925},[711,2856,779],{"class":717},[146,2858,2860],{"id":2859},"explication","Explication",[31,2862,2863,2868,2874],{},[34,2864,2865,2867],{},[358,2866,2618],{}," active la grille ;",[34,2869,2870,2873],{},[358,2871,2872],{},"grid-template-columns"," définit les colonnes ;",[34,2875,2876,2879],{},[358,2877,2878],{},"1fr"," signifie une fraction de l'espace disponible.",[146,2881,2883],{"id":2882},"exemple-avec-une-mise-en-page-classique","Exemple avec une mise en page classique",[350,2885,2887],{"className":748,"code":2886,"language":750,"meta":356,"style":356},".layout {\n display: grid;\n grid-template-columns: 250px 1fr;\n gap: 24px;\n}\n",[358,2888,2889,2896,2906,2924,2937],{"__ignoreMap":356},[711,2890,2891,2894],{"class":713,"line":714},[711,2892,2893],{"class":872},".layout",[711,2895,759],{"class":717},[711,2897,2898,2900,2902,2904],{"class":713,"line":521},[711,2899,2652],{"class":764},[711,2901,768],{"class":717},[711,2903,2814],{"class":764},[711,2905,774],{"class":717},[711,2907,2908,2910,2912,2915,2917,2920,2922],{"class":713,"line":529},[711,2909,2821],{"class":764},[711,2911,768],{"class":717},[711,2913,2914],{"class":764},"250",[711,2916,1371],{"class":1370},[711,2918,2919],{"class":764}," 1",[711,2921,2838],{"class":1370},[711,2923,774],{"class":717},[711,2925,2926,2928,2930,2933,2935],{"class":713,"line":906},[711,2927,2739],{"class":764},[711,2929,768],{"class":717},[711,2931,2932],{"class":764},"24",[711,2934,1371],{"class":1370},[711,2936,774],{"class":717},[711,2938,2939],{"class":713,"line":925},[711,2940,779],{"class":717},[21,2942,2943],{},"Cette structure est très utile pour une page avec une barre latérale et un contenu principal.",[16,2945,2947],{"id":2946},"_14-les-positions","14. Les positions",[146,2949,2951],{"id":2950},"position-relative",[358,2952,2953],{},"position: relative",[21,2955,2956],{},"Permet de positionner un élément par rapport à sa place normale.",[146,2958,2960],{"id":2959},"position-absolute",[358,2961,2962],{},"position: absolute",[21,2964,2965],{},"Permet de sortir l'élément du flux et de le positionner relativement à un parent positionné.",[146,2967,2969],{"id":2968},"position-fixed",[358,2970,2971],{},"position: fixed",[21,2973,2974],{},"Permet de garder un élément fixé à l'écran, même quand on fait défiler la page.",[146,2976,2978],{"id":2977},"position-sticky",[358,2979,2980],{},"position: sticky",[21,2982,2983],{},"Permet à un élément de rester collé à un certain point pendant le scroll.",[146,2985,1861],{"id":2986},"bon-réflexe-1",[21,2988,2989],{},"Utilisez les positions avec parcimonie. Beaucoup de mises en page peuvent être faites plus proprement avec Flexbox ou Grid.",[16,2991,2993],{"id":2992},"_15-les-pseudo-classes-et-pseudo-éléments","15. Les pseudo-classes et pseudo-éléments",[146,2995,2997,2998],{"id":2996},"pseudo-classe-hover","Pseudo-classe ",[358,2999,3000],{},":hover",[350,3002,3004],{"className":748,"code":3003,"language":750,"meta":356,"style":356},"button:hover {\n background-color: #111;\n}\n",[358,3005,3006,3015,3026],{"__ignoreMap":356},[711,3007,3008,3011,3013],{"class":713,"line":714},[711,3009,3010],{"class":721},"button",[711,3012,3000],{"class":872},[711,3014,759],{"class":717},[711,3016,3017,3019,3021,3024],{"class":713,"line":521},[711,3018,2427],{"class":764},[711,3020,768],{"class":717},[711,3022,3023],{"class":764},"#111",[711,3025,774],{"class":717},[711,3027,3028],{"class":713,"line":529},[711,3029,779],{"class":717},[21,3031,3032],{},"Le style change quand la souris passe sur l'élément.",[146,3034,2997,3036],{"id":3035},"pseudo-classe-focus",[358,3037,3038],{},":focus",[350,3040,3042],{"className":748,"code":3041,"language":750,"meta":356,"style":356},"input:focus {\n border-color: blue;\n}\n",[358,3043,3044,3053,3064],{"__ignoreMap":356},[711,3045,3046,3049,3051],{"class":713,"line":714},[711,3047,3048],{"class":721},"input",[711,3050,3038],{"class":872},[711,3052,759],{"class":717},[711,3054,3055,3058,3060,3062],{"class":713,"line":521},[711,3056,3057],{"class":764}," border-color",[711,3059,768],{"class":717},[711,3061,771],{"class":764},[711,3063,774],{"class":717},[711,3065,3066],{"class":713,"line":529},[711,3067,779],{"class":717},[21,3069,3070],{},"Très utile pour l'accessibilité.",[146,3072,3074,3075],{"id":3073},"pseudo-élément-before","Pseudo-élément ",[358,3076,3077],{},"::before",[350,3079,3081],{"className":748,"code":3080,"language":750,"meta":356,"style":356},".badge::before {\n content: \"• \";\n}\n",[358,3082,3083,3090,3102],{"__ignoreMap":356},[711,3084,3085,3088],{"class":713,"line":714},[711,3086,3087],{"class":872},".badge::before",[711,3089,759],{"class":717},[711,3091,3092,3095,3097,3100],{"class":713,"line":521},[711,3093,3094],{"class":764}," content",[711,3096,768],{"class":717},[711,3098,3099],{"class":890},"\"• \"",[711,3101,774],{"class":717},[711,3103,3104],{"class":713,"line":529},[711,3105,779],{"class":717},[146,3107,3074,3109],{"id":3108},"pseudo-élément-after",[358,3110,3111],{},"::after",[350,3113,3115],{"className":748,"code":3114,"language":750,"meta":356,"style":356},".link::after {\n content: \" ↗\";\n}\n",[358,3116,3117,3124,3135],{"__ignoreMap":356},[711,3118,3119,3122],{"class":713,"line":714},[711,3120,3121],{"class":872},".link::after",[711,3123,759],{"class":717},[711,3125,3126,3128,3130,3133],{"class":713,"line":521},[711,3127,3094],{"class":764},[711,3129,768],{"class":717},[711,3131,3132],{"class":890},"\" ↗\"",[711,3134,774],{"class":717},[711,3136,3137],{"class":713,"line":529},[711,3138,779],{"class":717},[21,3140,3141],{},"Les pseudo-classes et pseudo-éléments permettent de styliser des états ou des parties précises d'un élément.",[16,3143,3145],{"id":3144},"_16-les-transitions-et-les-animations","16. Les transitions et les animations",[146,3147,3149],{"id":3148},"transition","Transition",[350,3151,3153],{"className":748,"code":3152,"language":750,"meta":356,"style":356},"button {\n transition: background-color 0.3s ease;\n}\n",[358,3154,3155,3161,3180],{"__ignoreMap":356},[711,3156,3157,3159],{"class":713,"line":714},[711,3158,3010],{"class":721},[711,3160,759],{"class":717},[711,3162,3163,3166,3169,3172,3175,3178],{"class":713,"line":521},[711,3164,3165],{"class":764}," transition",[711,3167,3168],{"class":717},": background-color ",[711,3170,3171],{"class":764},"0.3",[711,3173,3174],{"class":1370},"s",[711,3176,3177],{"class":764}," ease",[711,3179,774],{"class":717},[711,3181,3182],{"class":713,"line":529},[711,3183,779],{"class":717},[21,3185,3186],{},"Une transition rend un changement de style plus fluide.",[146,3188,3190],{"id":3189},"animation-simple","Animation simple",[350,3192,3194],{"className":748,"code":3193,"language":750,"meta":356,"style":356},"@keyframes fadeIn {\n from {\n opacity: 0;\n transform: translateY(10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.card {\n animation: fadeIn 0.4s ease;\n}\n",[358,3195,3196,3207,3214,3225,3244,3249,3256,3266,3280,3284,3288,3292,3298,3315],{"__ignoreMap":356},[711,3197,3198,3201,3205],{"class":713,"line":714},[711,3199,3200],{"class":1370},"@keyframes",[711,3202,3204],{"class":3203},"s4XuR"," fadeIn",[711,3206,759],{"class":717},[711,3208,3209,3212],{"class":713,"line":521},[711,3210,3211],{"class":872}," from",[711,3213,759],{"class":717},[711,3215,3216,3219,3221,3223],{"class":713,"line":529},[711,3217,3218],{"class":764}," opacity",[711,3220,768],{"class":717},[711,3222,1797],{"class":764},[711,3224,774],{"class":717},[711,3226,3227,3230,3232,3235,3237,3240,3242],{"class":713,"line":906},[711,3228,3229],{"class":764}," transform",[711,3231,768],{"class":717},[711,3233,3234],{"class":764},"translateY",[711,3236,1789],{"class":717},[711,3238,3239],{"class":764},"10",[711,3241,1371],{"class":1370},[711,3243,1804],{"class":717},[711,3245,3246],{"class":713,"line":925},[711,3247,3248],{"class":717}," }\n",[711,3250,3251,3254],{"class":713,"line":950},[711,3252,3253],{"class":872}," to",[711,3255,759],{"class":717},[711,3257,3258,3260,3262,3264],{"class":713,"line":965},[711,3259,3218],{"class":764},[711,3261,768],{"class":717},[711,3263,1935],{"class":764},[711,3265,774],{"class":717},[711,3267,3268,3270,3272,3274,3276,3278],{"class":713,"line":991},[711,3269,3229],{"class":764},[711,3271,768],{"class":717},[711,3273,3234],{"class":764},[711,3275,1789],{"class":717},[711,3277,1797],{"class":764},[711,3279,1804],{"class":717},[711,3281,3282],{"class":713,"line":1001},[711,3283,3248],{"class":717},[711,3285,3286],{"class":713,"line":1011},[711,3287,779],{"class":717},[711,3289,3290],{"class":713,"line":1024},[711,3291,1114],{"emptyLinePlaceholder":554},[711,3293,3294,3296],{"class":713,"line":556},[711,3295,1495],{"class":872},[711,3297,759],{"class":717},[711,3299,3300,3303,3306,3309,3311,3313],{"class":713,"line":1046},[711,3301,3302],{"class":764}," animation",[711,3304,3305],{"class":717},": fadeIn ",[711,3307,3308],{"class":764},"0.4",[711,3310,3174],{"class":1370},[711,3312,3177],{"class":764},[711,3314,774],{"class":717},[711,3316,3318],{"class":713,"line":3317},14,[711,3319,779],{"class":717},[21,3321,3322],{},"Les animations doivent rester utiles et discrètes. Trop d'effets visuels nuisent souvent à la lisibilité.",[16,3324,3326],{"id":3325},"_17-le-responsive-design","17. Le responsive design",[21,3328,3329],{},"Un site moderne doit s'adapter à toutes les tailles d'écran.",[146,3331,3333],{"id":3332},"le-principe","Le principe",[21,3335,3336],{},"Le responsive design consiste à faire en sorte qu'une page reste lisible sur mobile, tablette et ordinateur.",[146,3338,3340],{"id":3339},"media-queries","Media queries",[350,3342,3344],{"className":748,"code":3343,"language":750,"meta":356,"style":356},".container {\n display: grid;\n grid-template-columns: 1fr;\n}\n\n@media (min-width: 768px) {\n .container {\n grid-template-columns: 1fr 1fr;\n }\n}\n",[358,3345,3346,3352,3362,3374,3378,3382,3403,3410,3427,3431],{"__ignoreMap":356},[711,3347,3348,3350],{"class":713,"line":714},[711,3349,1972],{"class":872},[711,3351,759],{"class":717},[711,3353,3354,3356,3358,3360],{"class":713,"line":521},[711,3355,2652],{"class":764},[711,3357,768],{"class":717},[711,3359,2814],{"class":764},[711,3361,774],{"class":717},[711,3363,3364,3366,3368,3370,3372],{"class":713,"line":529},[711,3365,2821],{"class":764},[711,3367,768],{"class":717},[711,3369,1935],{"class":764},[711,3371,2838],{"class":1370},[711,3373,774],{"class":717},[711,3375,3376],{"class":713,"line":906},[711,3377,779],{"class":717},[711,3379,3380],{"class":713,"line":925},[711,3381,1114],{"emptyLinePlaceholder":554},[711,3383,3384,3387,3390,3393,3395,3398,3400],{"class":713,"line":950},[711,3385,3386],{"class":1370},"@media",[711,3388,3389],{"class":717}," (",[711,3391,3392],{"class":764},"min-width",[711,3394,768],{"class":717},[711,3396,3397],{"class":764},"768",[711,3399,1371],{"class":1370},[711,3401,3402],{"class":717},") {\n",[711,3404,3405,3408],{"class":713,"line":965},[711,3406,3407],{"class":872}," .container",[711,3409,759],{"class":717},[711,3411,3412,3415,3417,3419,3421,3423,3425],{"class":713,"line":991},[711,3413,3414],{"class":764}," grid-template-columns",[711,3416,768],{"class":717},[711,3418,1935],{"class":764},[711,3420,2838],{"class":1370},[711,3422,2919],{"class":764},[711,3424,2838],{"class":1370},[711,3426,774],{"class":717},[711,3428,3429],{"class":713,"line":1001},[711,3430,3248],{"class":717},[711,3432,3433],{"class":713,"line":1011},[711,3434,779],{"class":717},[146,3436,3438],{"id":3437},"exemple-pratique","Exemple pratique",[350,3440,3442],{"className":748,"code":3441,"language":750,"meta":356,"style":356},".card-list {\n display: grid;\n grid-template-columns: 1fr;\n gap: 16px;\n}\n\n@media (min-width: 640px) {\n .card-list {\n grid-template-columns: repeat(2, 1fr);\n }\n}\n\n@media (min-width: 1024px) {\n .card-list {\n grid-template-columns: repeat(3, 1fr);\n }\n}\n",[358,3443,3444,3451,3461,3473,3485,3489,3493,3510,3517,3537,3541,3545,3549,3566,3572,3593,3598],{"__ignoreMap":356},[711,3445,3446,3449],{"class":713,"line":714},[711,3447,3448],{"class":872},".card-list",[711,3450,759],{"class":717},[711,3452,3453,3455,3457,3459],{"class":713,"line":521},[711,3454,2652],{"class":764},[711,3456,768],{"class":717},[711,3458,2814],{"class":764},[711,3460,774],{"class":717},[711,3462,3463,3465,3467,3469,3471],{"class":713,"line":529},[711,3464,2821],{"class":764},[711,3466,768],{"class":717},[711,3468,1935],{"class":764},[711,3470,2838],{"class":1370},[711,3472,774],{"class":717},[711,3474,3475,3477,3479,3481,3483],{"class":713,"line":906},[711,3476,2739],{"class":764},[711,3478,768],{"class":717},[711,3480,1367],{"class":764},[711,3482,1371],{"class":1370},[711,3484,774],{"class":717},[711,3486,3487],{"class":713,"line":925},[711,3488,779],{"class":717},[711,3490,3491],{"class":713,"line":950},[711,3492,1114],{"emptyLinePlaceholder":554},[711,3494,3495,3497,3499,3501,3503,3506,3508],{"class":713,"line":965},[711,3496,3386],{"class":1370},[711,3498,3389],{"class":717},[711,3500,3392],{"class":764},[711,3502,768],{"class":717},[711,3504,3505],{"class":764},"640",[711,3507,1371],{"class":1370},[711,3509,3402],{"class":717},[711,3511,3512,3515],{"class":713,"line":991},[711,3513,3514],{"class":872}," .card-list",[711,3516,759],{"class":717},[711,3518,3519,3521,3523,3525,3527,3529,3531,3533,3535],{"class":713,"line":1001},[711,3520,3414],{"class":764},[711,3522,768],{"class":717},[711,3524,2826],{"class":764},[711,3526,1789],{"class":717},[711,3528,1571],{"class":764},[711,3530,1077],{"class":717},[711,3532,1935],{"class":764},[711,3534,2838],{"class":1370},[711,3536,1804],{"class":717},[711,3538,3539],{"class":713,"line":1011},[711,3540,3248],{"class":717},[711,3542,3543],{"class":713,"line":1024},[711,3544,779],{"class":717},[711,3546,3547],{"class":713,"line":556},[711,3548,1114],{"emptyLinePlaceholder":554},[711,3550,3551,3553,3555,3557,3559,3562,3564],{"class":713,"line":1046},[711,3552,3386],{"class":1370},[711,3554,3389],{"class":717},[711,3556,3392],{"class":764},[711,3558,768],{"class":717},[711,3560,3561],{"class":764},"1024",[711,3563,1371],{"class":1370},[711,3565,3402],{"class":717},[711,3567,3568,3570],{"class":713,"line":3317},[711,3569,3514],{"class":872},[711,3571,759],{"class":717},[711,3573,3575,3577,3579,3581,3583,3585,3587,3589,3591],{"class":713,"line":3574},15,[711,3576,3414],{"class":764},[711,3578,768],{"class":717},[711,3580,2826],{"class":764},[711,3582,1789],{"class":717},[711,3584,2831],{"class":764},[711,3586,1077],{"class":717},[711,3588,1935],{"class":764},[711,3590,2838],{"class":1370},[711,3592,1804],{"class":717},[711,3594,3596],{"class":713,"line":3595},16,[711,3597,3248],{"class":717},[711,3599,3601],{"class":713,"line":3600},17,[711,3602,779],{"class":717},[146,3604,3606],{"id":3605},"bonnes-pratiques-responsive","Bonnes pratiques responsive",[31,3608,3609,3612,3615,3618,3621],{},[34,3610,3611],{},"pensez d'abord mobile ;",[34,3613,3614],{},"utilisez des unités flexibles ;",[34,3616,3617],{},"évitez les largeurs fixes partout ;",[34,3619,3620],{},"testez sur plusieurs tailles d'écran ;",[34,3622,3623],{},"gardez des espacements raisonnables.",[16,3625,3627],{"id":3626},"_18-exemple-complet-de-page-stylée","18. Exemple complet de page stylée",[21,3629,3630],{},"Voici un exemple simple de structure HTML avec son CSS associé.",[146,3632,3633],{"id":707},"HTML",[350,3635,3637],{"className":705,"code":3636,"language":707,"meta":356,"style":356},"\u003Cbody>\n \u003Cheader class=\"header\">\n \u003Ch1 class=\"logo\">Mon portfolio\u003C\u002Fh1>\n \u003Cnav class=\"nav\">\n \u003Ca href=\"#apropos\">À propos\u003C\u002Fa>\n \u003Ca href=\"#projets\">Projets\u003C\u002Fa>\n \u003Ca href=\"#contact\">Contact\u003C\u002Fa>\n \u003C\u002Fnav>\n \u003C\u002Fheader>\n\n \u003Cmain class=\"main\">\n \u003Csection class=\"hero\">\n \u003Ch2>Développeur web\u003C\u002Fh2>\n \u003Cp>Je crée des interfaces modernes, propres et efficaces.\u003C\u002Fp>\n \u003C\u002Fsection>\n\n \u003Csection class=\"cards\">\n \u003Carticle class=\"card\">Projet 1\u003C\u002Farticle>\n \u003Carticle class=\"card\">Projet 2\u003C\u002Farticle>\n \u003Carticle class=\"card\">Projet 3\u003C\u002Farticle>\n \u003C\u002Fsection>\n \u003C\u002Fmain>\n\u003C\u002Fbody>\n",[358,3638,3639,3647,3663,3683,3699,3721,3741,3761,3770,3778,3782,3798,3813,3826,3839,3847,3851,3866,3886,3906,3926,3935,3944],{"__ignoreMap":356},[711,3640,3641,3643,3645],{"class":713,"line":714},[711,3642,718],{"class":717},[711,3644,1006],{"class":721},[711,3646,729],{"class":717},[711,3648,3649,3651,3654,3656,3658,3661],{"class":713,"line":521},[711,3650,898],{"class":717},[711,3652,3653],{"class":721},"header",[711,3655,1530],{"class":872},[711,3657,887],{"class":717},[711,3659,3660],{"class":890},"\"header\"",[711,3662,729],{"class":717},[711,3664,3665,3667,3669,3671,3673,3676,3679,3681],{"class":713,"line":529},[711,3666,909],{"class":717},[711,3668,11],{"class":721},[711,3670,1530],{"class":872},[711,3672,887],{"class":717},[711,3674,3675],{"class":890},"\"logo\"",[711,3677,3678],{"class":717},">Mon portfolio\u003C\u002F",[711,3680,11],{"class":721},[711,3682,729],{"class":717},[711,3684,3685,3687,3690,3692,3694,3697],{"class":713,"line":906},[711,3686,909],{"class":717},[711,3688,3689],{"class":721},"nav",[711,3691,1530],{"class":872},[711,3693,887],{"class":717},[711,3695,3696],{"class":890},"\"nav\"",[711,3698,729],{"class":717},[711,3700,3701,3704,3707,3709,3711,3714,3717,3719],{"class":713,"line":925},[711,3702,3703],{"class":717}," \u003C",[711,3705,3706],{"class":721},"a",[711,3708,981],{"class":872},[711,3710,887],{"class":717},[711,3712,3713],{"class":890},"\"#apropos\"",[711,3715,3716],{"class":717},">À propos\u003C\u002F",[711,3718,3706],{"class":721},[711,3720,729],{"class":717},[711,3722,3723,3725,3727,3729,3731,3734,3737,3739],{"class":713,"line":950},[711,3724,3703],{"class":717},[711,3726,3706],{"class":721},[711,3728,981],{"class":872},[711,3730,887],{"class":717},[711,3732,3733],{"class":890},"\"#projets\"",[711,3735,3736],{"class":717},">Projets\u003C\u002F",[711,3738,3706],{"class":721},[711,3740,729],{"class":717},[711,3742,3743,3745,3747,3749,3751,3754,3757,3759],{"class":713,"line":965},[711,3744,3703],{"class":717},[711,3746,3706],{"class":721},[711,3748,981],{"class":872},[711,3750,887],{"class":717},[711,3752,3753],{"class":890},"\"#contact\"",[711,3755,3756],{"class":717},">Contact\u003C\u002F",[711,3758,3706],{"class":721},[711,3760,729],{"class":717},[711,3762,3763,3766,3768],{"class":713,"line":991},[711,3764,3765],{"class":717}," \u003C\u002F",[711,3767,3689],{"class":721},[711,3769,729],{"class":717},[711,3771,3772,3774,3776],{"class":713,"line":1001},[711,3773,994],{"class":717},[711,3775,3653],{"class":721},[711,3777,729],{"class":717},[711,3779,3780],{"class":713,"line":1011},[711,3781,1114],{"emptyLinePlaceholder":554},[711,3783,3784,3786,3789,3791,3793,3796],{"class":713,"line":1024},[711,3785,898],{"class":717},[711,3787,3788],{"class":721},"main",[711,3790,1530],{"class":872},[711,3792,887],{"class":717},[711,3794,3795],{"class":890},"\"main\"",[711,3797,729],{"class":717},[711,3799,3800,3802,3804,3806,3808,3811],{"class":713,"line":556},[711,3801,909],{"class":717},[711,3803,1594],{"class":721},[711,3805,1530],{"class":872},[711,3807,887],{"class":717},[711,3809,3810],{"class":890},"\"hero\"",[711,3812,729],{"class":717},[711,3814,3815,3817,3819,3822,3824],{"class":713,"line":1046},[711,3816,3703],{"class":717},[711,3818,16],{"class":721},[711,3820,3821],{"class":717},">Développeur web\u003C\u002F",[711,3823,16],{"class":721},[711,3825,729],{"class":717},[711,3827,3828,3830,3832,3835,3837],{"class":713,"line":3317},[711,3829,3703],{"class":717},[711,3831,21],{"class":721},[711,3833,3834],{"class":717},">Je crée des interfaces modernes, propres et efficaces.\u003C\u002F",[711,3836,21],{"class":721},[711,3838,729],{"class":717},[711,3840,3841,3843,3845],{"class":713,"line":3574},[711,3842,3765],{"class":717},[711,3844,1594],{"class":721},[711,3846,729],{"class":717},[711,3848,3849],{"class":713,"line":3595},[711,3850,1114],{"emptyLinePlaceholder":554},[711,3852,3853,3855,3857,3859,3861,3864],{"class":713,"line":3600},[711,3854,909],{"class":717},[711,3856,1594],{"class":721},[711,3858,1530],{"class":872},[711,3860,887],{"class":717},[711,3862,3863],{"class":890},"\"cards\"",[711,3865,729],{"class":717},[711,3867,3869,3871,3873,3875,3877,3879,3882,3884],{"class":713,"line":3868},18,[711,3870,3703],{"class":717},[711,3872,1670],{"class":721},[711,3874,1530],{"class":872},[711,3876,887],{"class":717},[711,3878,1535],{"class":890},[711,3880,3881],{"class":717},">Projet 1\u003C\u002F",[711,3883,1670],{"class":721},[711,3885,729],{"class":717},[711,3887,3889,3891,3893,3895,3897,3899,3902,3904],{"class":713,"line":3888},19,[711,3890,3703],{"class":717},[711,3892,1670],{"class":721},[711,3894,1530],{"class":872},[711,3896,887],{"class":717},[711,3898,1535],{"class":890},[711,3900,3901],{"class":717},">Projet 2\u003C\u002F",[711,3903,1670],{"class":721},[711,3905,729],{"class":717},[711,3907,3909,3911,3913,3915,3917,3919,3922,3924],{"class":713,"line":3908},20,[711,3910,3703],{"class":717},[711,3912,1670],{"class":721},[711,3914,1530],{"class":872},[711,3916,887],{"class":717},[711,3918,1535],{"class":890},[711,3920,3921],{"class":717},">Projet 3\u003C\u002F",[711,3923,1670],{"class":721},[711,3925,729],{"class":717},[711,3927,3929,3931,3933],{"class":713,"line":3928},21,[711,3930,3765],{"class":717},[711,3932,1594],{"class":721},[711,3934,729],{"class":717},[711,3936,3938,3940,3942],{"class":713,"line":3937},22,[711,3939,994],{"class":717},[711,3941,3788],{"class":721},[711,3943,729],{"class":717},[711,3945,3947,3949,3951],{"class":713,"line":3946},23,[711,3948,1049],{"class":717},[711,3950,1006],{"class":721},[711,3952,729],{"class":717},[146,3954,3955],{"id":750},"CSS",[350,3957,3959],{"className":748,"code":3958,"language":750,"meta":356,"style":356},"* {\n box-sizing: border-box;\n}\n\nbody {\n margin: 0;\n font-family: Arial, sans-serif;\n color: #222;\n background: #f7f7f7;\n}\n\n.header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 20px 32px;\n background: white;\n border-bottom: 1px solid #e5e5e5;\n}\n\n.nav {\n display: flex;\n gap: 16px;\n}\n\n.main {\n max-width: 1100px;\n margin: 0 auto;\n padding: 40px 24px;\n}\n\n.hero {\n margin-bottom: 32px;\n}\n\n.cards {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n gap: 16px;\n}\n\n.card {\n background: white;\n padding: 24px;\n border-radius: 12px;\n border: 1px solid #e5e5e5;\n}\n",[358,3960,3961,3967,3977,3981,3985,3991,4001,4015,4025,4035,4039,4043,4050,4060,4070,4080,4097,4107,4124,4128,4132,4138,4148,4160,4165,4170,4178,4193,4207,4226,4231,4236,4243,4257,4262,4267,4275,4286,4321,4334,4339,4344,4351,4362,4375,4388,4405],{"__ignoreMap":356},[711,3962,3963,3965],{"class":713,"line":714},[711,3964,2181],{"class":721},[711,3966,759],{"class":717},[711,3968,3969,3971,3973,3975],{"class":713,"line":521},[711,3970,2188],{"class":764},[711,3972,768],{"class":717},[711,3974,2193],{"class":764},[711,3976,774],{"class":717},[711,3978,3979],{"class":713,"line":529},[711,3980,779],{"class":717},[711,3982,3983],{"class":713,"line":906},[711,3984,1114],{"emptyLinePlaceholder":554},[711,3986,3987,3989],{"class":713,"line":925},[711,3988,1006],{"class":721},[711,3990,759],{"class":717},[711,3992,3993,3995,3997,3999],{"class":713,"line":950},[711,3994,2125],{"class":764},[711,3996,768],{"class":717},[711,3998,1797],{"class":764},[711,4000,774],{"class":717},[711,4002,4003,4005,4007,4009,4011,4013],{"class":713,"line":965},[711,4004,1069],{"class":764},[711,4006,768],{"class":717},[711,4008,1074],{"class":764},[711,4010,1077],{"class":717},[711,4012,1080],{"class":764},[711,4014,774],{"class":717},[711,4016,4017,4019,4021,4023],{"class":713,"line":991},[711,4018,765],{"class":764},[711,4020,768],{"class":717},[711,4022,1103],{"class":764},[711,4024,774],{"class":717},[711,4026,4027,4029,4031,4033],{"class":713,"line":1001},[711,4028,1087],{"class":764},[711,4030,768],{"class":717},[711,4032,1092],{"class":764},[711,4034,774],{"class":717},[711,4036,4037],{"class":713,"line":1011},[711,4038,779],{"class":717},[711,4040,4041],{"class":713,"line":1024},[711,4042,1114],{"emptyLinePlaceholder":554},[711,4044,4045,4048],{"class":713,"line":556},[711,4046,4047],{"class":872},".header",[711,4049,759],{"class":717},[711,4051,4052,4054,4056,4058],{"class":713,"line":1046},[711,4053,2652],{"class":764},[711,4055,768],{"class":717},[711,4057,2657],{"class":764},[711,4059,774],{"class":717},[711,4061,4062,4064,4066,4068],{"class":713,"line":3317},[711,4063,2664],{"class":764},[711,4065,768],{"class":717},[711,4067,2669],{"class":764},[711,4069,774],{"class":717},[711,4071,4072,4074,4076,4078],{"class":713,"line":3574},[711,4073,2676],{"class":764},[711,4075,768],{"class":717},[711,4077,2357],{"class":764},[711,4079,774],{"class":717},[711,4081,4082,4084,4086,4088,4090,4093,4095],{"class":713,"line":3595},[711,4083,1566],{"class":764},[711,4085,768],{"class":717},[711,4087,2097],{"class":764},[711,4089,1371],{"class":1370},[711,4091,4092],{"class":764}," 32",[711,4094,1371],{"class":1370},[711,4096,774],{"class":717},[711,4098,4099,4101,4103,4105],{"class":713,"line":3600},[711,4100,1087],{"class":764},[711,4102,768],{"class":717},[711,4104,1506],{"class":764},[711,4106,774],{"class":717},[711,4108,4109,4112,4114,4116,4118,4120,4122],{"class":713,"line":3868},[711,4110,4111],{"class":764}," border-bottom",[711,4113,768],{"class":717},[711,4115,1935],{"class":764},[711,4117,1371],{"class":1370},[711,4119,2115],{"class":764},[711,4121,2539],{"class":764},[711,4123,774],{"class":717},[711,4125,4126],{"class":713,"line":3888},[711,4127,779],{"class":717},[711,4129,4130],{"class":713,"line":3908},[711,4131,1114],{"emptyLinePlaceholder":554},[711,4133,4134,4136],{"class":713,"line":3928},[711,4135,2645],{"class":872},[711,4137,759],{"class":717},[711,4139,4140,4142,4144,4146],{"class":713,"line":3937},[711,4141,2652],{"class":764},[711,4143,768],{"class":717},[711,4145,2657],{"class":764},[711,4147,774],{"class":717},[711,4149,4150,4152,4154,4156,4158],{"class":713,"line":3946},[711,4151,2739],{"class":764},[711,4153,768],{"class":717},[711,4155,1367],{"class":764},[711,4157,1371],{"class":1370},[711,4159,774],{"class":717},[711,4161,4163],{"class":713,"line":4162},24,[711,4164,779],{"class":717},[711,4166,4168],{"class":713,"line":4167},25,[711,4169,1114],{"emptyLinePlaceholder":554},[711,4171,4173,4176],{"class":713,"line":4172},26,[711,4174,4175],{"class":872},".main",[711,4177,759],{"class":717},[711,4179,4181,4184,4186,4189,4191],{"class":713,"line":4180},27,[711,4182,4183],{"class":764}," max-width",[711,4185,768],{"class":717},[711,4187,4188],{"class":764},"1100",[711,4190,1371],{"class":1370},[711,4192,774],{"class":717},[711,4194,4196,4198,4200,4202,4205],{"class":713,"line":4195},28,[711,4197,2125],{"class":764},[711,4199,768],{"class":717},[711,4201,1797],{"class":764},[711,4203,4204],{"class":764}," auto",[711,4206,774],{"class":717},[711,4208,4210,4212,4214,4217,4219,4222,4224],{"class":713,"line":4209},29,[711,4211,1566],{"class":764},[711,4213,768],{"class":717},[711,4215,4216],{"class":764},"40",[711,4218,1371],{"class":1370},[711,4220,4221],{"class":764}," 24",[711,4223,1371],{"class":1370},[711,4225,774],{"class":717},[711,4227,4229],{"class":713,"line":4228},30,[711,4230,779],{"class":717},[711,4232,4234],{"class":713,"line":4233},31,[711,4235,1114],{"emptyLinePlaceholder":554},[711,4237,4239,4241],{"class":713,"line":4238},32,[711,4240,2010],{"class":872},[711,4242,759],{"class":717},[711,4244,4246,4249,4251,4253,4255],{"class":713,"line":4245},33,[711,4247,4248],{"class":764}," margin-bottom",[711,4250,768],{"class":717},[711,4252,1895],{"class":764},[711,4254,1371],{"class":1370},[711,4256,774],{"class":717},[711,4258,4260],{"class":713,"line":4259},34,[711,4261,779],{"class":717},[711,4263,4265],{"class":713,"line":4264},35,[711,4266,1114],{"emptyLinePlaceholder":554},[711,4268,4270,4273],{"class":713,"line":4269},36,[711,4271,4272],{"class":872},".cards",[711,4274,759],{"class":717},[711,4276,4278,4280,4282,4284],{"class":713,"line":4277},37,[711,4279,2652],{"class":764},[711,4281,768],{"class":717},[711,4283,2814],{"class":764},[711,4285,774],{"class":717},[711,4287,4289,4291,4293,4295,4297,4300,4302,4305,4307,4310,4312,4314,4316,4318],{"class":713,"line":4288},38,[711,4290,2821],{"class":764},[711,4292,768],{"class":717},[711,4294,2826],{"class":764},[711,4296,1789],{"class":717},[711,4298,4299],{"class":764},"auto-fit",[711,4301,1077],{"class":717},[711,4303,4304],{"class":764},"minmax",[711,4306,1789],{"class":717},[711,4308,4309],{"class":764},"220",[711,4311,1371],{"class":1370},[711,4313,1077],{"class":717},[711,4315,1935],{"class":764},[711,4317,2838],{"class":1370},[711,4319,4320],{"class":717},"));\n",[711,4322,4324,4326,4328,4330,4332],{"class":713,"line":4323},39,[711,4325,2739],{"class":764},[711,4327,768],{"class":717},[711,4329,1367],{"class":764},[711,4331,1371],{"class":1370},[711,4333,774],{"class":717},[711,4335,4337],{"class":713,"line":4336},40,[711,4338,779],{"class":717},[711,4340,4342],{"class":713,"line":4341},41,[711,4343,1114],{"emptyLinePlaceholder":554},[711,4345,4347,4349],{"class":713,"line":4346},42,[711,4348,1495],{"class":872},[711,4350,759],{"class":717},[711,4352,4354,4356,4358,4360],{"class":713,"line":4353},43,[711,4355,1087],{"class":764},[711,4357,768],{"class":717},[711,4359,1506],{"class":764},[711,4361,774],{"class":717},[711,4363,4365,4367,4369,4371,4373],{"class":713,"line":4364},44,[711,4366,1566],{"class":764},[711,4368,768],{"class":717},[711,4370,2932],{"class":764},[711,4372,1371],{"class":1370},[711,4374,774],{"class":717},[711,4376,4378,4380,4382,4384,4386],{"class":713,"line":4377},45,[711,4379,2565],{"class":764},[711,4381,768],{"class":717},[711,4383,2570],{"class":764},[711,4385,1371],{"class":1370},[711,4387,774],{"class":717},[711,4389,4391,4393,4395,4397,4399,4401,4403],{"class":713,"line":4390},46,[711,4392,2106],{"class":764},[711,4394,768],{"class":717},[711,4396,1935],{"class":764},[711,4398,1371],{"class":1370},[711,4400,2115],{"class":764},[711,4402,2539],{"class":764},[711,4404,774],{"class":717},[711,4406,4408],{"class":713,"line":4407},47,[711,4409,779],{"class":717},[21,4411,4412],{},"Cet exemple rassemble plusieurs notions vues dans le chapitre : structure, typographie, espace, flexbox et grid.",[16,4414,4416],{"id":4415},"_19-les-erreurs-fréquentes","19. Les erreurs fréquentes",[146,4418,4420],{"id":4419},"oublier-le-point-virgule-nest-pas-toujours-grave-mais-rester-cohérent-est-important","Oublier le point-virgule n'est pas toujours grave, mais rester cohérent est important",[21,4422,4423],{},"La syntaxe CSS est assez souple, mais il faut garder un code propre et régulier.",[146,4425,4427],{"id":4426},"mal-écrire-un-sélecteur","Mal écrire un sélecteur",[350,4429,4431],{"className":748,"code":4430,"language":750,"meta":356,"style":356},".card title {\n color: red;\n}\n",[358,4432,4433,4442,4452],{"__ignoreMap":356},[711,4434,4435,4437,4440],{"class":713,"line":714},[711,4436,1495],{"class":872},[711,4438,4439],{"class":721}," title",[711,4441,759],{"class":717},[711,4443,4444,4446,4448,4450],{"class":713,"line":521},[711,4445,765],{"class":764},[711,4447,768],{"class":717},[711,4449,1727],{"class":764},[711,4451,774],{"class":717},[711,4453,4454],{"class":713,"line":529},[711,4455,779],{"class":717},[21,4457,4458],{},"Ici, le sélecteur ne cible pas ce qu'on veut réellement.",[146,4460,4462],{"id":4461},"confondre-marge-et-padding","Confondre marge et padding",[31,4464,4465,4470],{},[34,4466,4467,4469],{},[358,4468,1417],{}," = espace à l'extérieur ;",[34,4471,4472,4474],{},[358,4473,1422],{}," = espace à l'intérieur.",[146,4476,4478],{"id":4477},"utiliser-trop-de-styles-inline","Utiliser trop de styles inline",[21,4480,4481],{},"Le style en ligne rend le code plus difficile à maintenir.",[146,4483,4485],{"id":4484},"oublier-le-responsive","Oublier le responsive",[21,4487,4488],{},"Un design beau sur ordinateur peut devenir inutilisable sur mobile si on n'y pense pas dès le départ.",[16,4490,4492],{"id":4491},"_20-bonnes-pratiques-à-retenir","20. Bonnes pratiques à retenir",[31,4494,4495,4498,4501,4504,4507,4510,4513],{},[34,4496,4497],{},"garder des sélecteurs simples ;",[34,4499,4500],{},"éviter de surcharger les styles ;",[34,4502,4503],{},"utiliser des noms de classes clairs ;",[34,4505,4506],{},"penser à l'accessibilité ;",[34,4508,4509],{},"réutiliser les valeurs cohérentes ;",[34,4511,4512],{},"travailler mobile-first quand c'est possible ;",[34,4514,4515],{},"tester le rendu sur plusieurs écrans.",[16,4517,4519],{"id":4518},"_21-résumé","21. Résumé",[21,4521,4522],{},"Dans ce tutoriel, nous avons vu :",[31,4524,4525,4528,4531,4534,4537,4540,4543],{},[34,4526,4527],{},"ce qu'est CSS ;",[34,4529,4530],{},"comment CSS fonctionne avec HTML ;",[34,4532,4533],{},"les sélecteurs, les propriétés et les valeurs ;",[34,4535,4536],{},"les couleurs, les unités, la typographie et le modèle de boîte ;",[34,4538,4539],{},"Flexbox et Grid ;",[34,4541,4542],{},"les positions, les pseudo-classes, les animations et le responsive design ;",[34,4544,4545],{},"les bonnes pratiques pour écrire du CSS propre.",[21,4547,4548],{},"CSS est un outil essentiel pour construire des interfaces web modernes. Plus vous maîtrisez ses bases, plus vous pourrez créer des pages lisibles, agréables et adaptables.",[16,4550,4552],{"id":4551},"exercices","Exercices",[146,4554,4556],{"id":4555},"exercice-1","Exercice 1",[21,4558,4559],{},"Créez un style pour un titre principal avec une couleur, une taille et un alignement.",[146,4561,4563],{"id":4562},"exercice-2","Exercice 2",[21,4565,4566],{},"Créez une carte avec une bordure, du padding, une couleur de fond et des coins arrondis.",[146,4568,4570],{"id":4569},"exercice-3","Exercice 3",[21,4572,4573],{},"Créez une barre de navigation avec Flexbox.",[146,4575,4577],{"id":4576},"exercice-4","Exercice 4",[21,4579,4580],{},"Créez une grille de trois colonnes avec Grid.",[146,4582,4584],{"id":4583},"exercice-5","Exercice 5",[21,4586,4587],{},"Ajoutez une media query pour modifier votre grille sur les petits écrans.",[16,4589,4591],{"id":4590},"corrigés","Corrigés",[146,4593,4595],{"id":4594},"correction-exercice-1","Correction exercice 1",[350,4597,4599],{"className":748,"code":4598,"language":750,"meta":356,"style":356},"h1 {\n color: #1d4ed8;\n font-size: 32px;\n text-align: center;\n}\n",[358,4600,4601,4607,4617,4629,4639],{"__ignoreMap":356},[711,4602,4603,4605],{"class":713,"line":714},[711,4604,11],{"class":721},[711,4606,759],{"class":717},[711,4608,4609,4611,4613,4615],{"class":713,"line":521},[711,4610,765],{"class":764},[711,4612,768],{"class":717},[711,4614,1129],{"class":764},[711,4616,774],{"class":717},[711,4618,4619,4621,4623,4625,4627],{"class":713,"line":529},[711,4620,1362],{"class":764},[711,4622,768],{"class":717},[711,4624,1895],{"class":764},[711,4626,1371],{"class":1370},[711,4628,774],{"class":717},[711,4630,4631,4633,4635,4637],{"class":713,"line":906},[711,4632,2352],{"class":764},[711,4634,768],{"class":717},[711,4636,2357],{"class":764},[711,4638,774],{"class":717},[711,4640,4641],{"class":713,"line":925},[711,4642,779],{"class":717},[146,4644,4646],{"id":4645},"correction-exercice-2","Correction exercice 2",[350,4648,4650],{"className":748,"code":4649,"language":750,"meta":356,"style":356},".card {\n background: white;\n padding: 24px;\n border: 1px solid #e5e5e5;\n border-radius: 12px;\n}\n",[358,4651,4652,4658,4668,4680,4696,4708],{"__ignoreMap":356},[711,4653,4654,4656],{"class":713,"line":714},[711,4655,1495],{"class":872},[711,4657,759],{"class":717},[711,4659,4660,4662,4664,4666],{"class":713,"line":521},[711,4661,1087],{"class":764},[711,4663,768],{"class":717},[711,4665,1506],{"class":764},[711,4667,774],{"class":717},[711,4669,4670,4672,4674,4676,4678],{"class":713,"line":529},[711,4671,1566],{"class":764},[711,4673,768],{"class":717},[711,4675,2932],{"class":764},[711,4677,1371],{"class":1370},[711,4679,774],{"class":717},[711,4681,4682,4684,4686,4688,4690,4692,4694],{"class":713,"line":906},[711,4683,2106],{"class":764},[711,4685,768],{"class":717},[711,4687,1935],{"class":764},[711,4689,1371],{"class":1370},[711,4691,2115],{"class":764},[711,4693,2539],{"class":764},[711,4695,774],{"class":717},[711,4697,4698,4700,4702,4704,4706],{"class":713,"line":925},[711,4699,2565],{"class":764},[711,4701,768],{"class":717},[711,4703,2570],{"class":764},[711,4705,1371],{"class":1370},[711,4707,774],{"class":717},[711,4709,4710],{"class":713,"line":950},[711,4711,779],{"class":717},[146,4713,4715],{"id":4714},"correction-exercice-3","Correction exercice 3",[350,4717,4718],{"className":748,"code":2638,"language":750,"meta":356,"style":356},[358,4719,4720,4726,4736,4746,4756],{"__ignoreMap":356},[711,4721,4722,4724],{"class":713,"line":714},[711,4723,2645],{"class":872},[711,4725,759],{"class":717},[711,4727,4728,4730,4732,4734],{"class":713,"line":521},[711,4729,2652],{"class":764},[711,4731,768],{"class":717},[711,4733,2657],{"class":764},[711,4735,774],{"class":717},[711,4737,4738,4740,4742,4744],{"class":713,"line":529},[711,4739,2664],{"class":764},[711,4741,768],{"class":717},[711,4743,2669],{"class":764},[711,4745,774],{"class":717},[711,4747,4748,4750,4752,4754],{"class":713,"line":906},[711,4749,2676],{"class":764},[711,4751,768],{"class":717},[711,4753,2357],{"class":764},[711,4755,774],{"class":717},[711,4757,4758],{"class":713,"line":925},[711,4759,779],{"class":717},[146,4761,4763],{"id":4762},"correction-exercice-4","Correction exercice 4",[350,4765,4767],{"className":748,"code":4766,"language":750,"meta":356,"style":356},".grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 16px;\n}\n",[358,4768,4769,4775,4785,4805,4817],{"__ignoreMap":356},[711,4770,4771,4773],{"class":713,"line":714},[711,4772,2803],{"class":872},[711,4774,759],{"class":717},[711,4776,4777,4779,4781,4783],{"class":713,"line":521},[711,4778,2652],{"class":764},[711,4780,768],{"class":717},[711,4782,2814],{"class":764},[711,4784,774],{"class":717},[711,4786,4787,4789,4791,4793,4795,4797,4799,4801,4803],{"class":713,"line":529},[711,4788,2821],{"class":764},[711,4790,768],{"class":717},[711,4792,2826],{"class":764},[711,4794,1789],{"class":717},[711,4796,2831],{"class":764},[711,4798,1077],{"class":717},[711,4800,1935],{"class":764},[711,4802,2838],{"class":1370},[711,4804,1804],{"class":717},[711,4806,4807,4809,4811,4813,4815],{"class":713,"line":906},[711,4808,2739],{"class":764},[711,4810,768],{"class":717},[711,4812,1367],{"class":764},[711,4814,1371],{"class":1370},[711,4816,774],{"class":717},[711,4818,4819],{"class":713,"line":925},[711,4820,779],{"class":717},[146,4822,4824],{"id":4823},"correction-exercice-5","Correction exercice 5",[350,4826,4828],{"className":748,"code":4827,"language":750,"meta":356,"style":356},".grid {\n display: grid;\n grid-template-columns: 1fr;\n gap: 16px;\n}\n\n@media (min-width: 768px) {\n .grid {\n grid-template-columns: repeat(3, 1fr);\n }\n}\n",[358,4829,4830,4836,4846,4858,4870,4874,4878,4894,4901,4921,4925],{"__ignoreMap":356},[711,4831,4832,4834],{"class":713,"line":714},[711,4833,2803],{"class":872},[711,4835,759],{"class":717},[711,4837,4838,4840,4842,4844],{"class":713,"line":521},[711,4839,2652],{"class":764},[711,4841,768],{"class":717},[711,4843,2814],{"class":764},[711,4845,774],{"class":717},[711,4847,4848,4850,4852,4854,4856],{"class":713,"line":529},[711,4849,2821],{"class":764},[711,4851,768],{"class":717},[711,4853,1935],{"class":764},[711,4855,2838],{"class":1370},[711,4857,774],{"class":717},[711,4859,4860,4862,4864,4866,4868],{"class":713,"line":906},[711,4861,2739],{"class":764},[711,4863,768],{"class":717},[711,4865,1367],{"class":764},[711,4867,1371],{"class":1370},[711,4869,774],{"class":717},[711,4871,4872],{"class":713,"line":925},[711,4873,779],{"class":717},[711,4875,4876],{"class":713,"line":950},[711,4877,1114],{"emptyLinePlaceholder":554},[711,4879,4880,4882,4884,4886,4888,4890,4892],{"class":713,"line":965},[711,4881,3386],{"class":1370},[711,4883,3389],{"class":717},[711,4885,3392],{"class":764},[711,4887,768],{"class":717},[711,4889,3397],{"class":764},[711,4891,1371],{"class":1370},[711,4893,3402],{"class":717},[711,4895,4896,4899],{"class":713,"line":991},[711,4897,4898],{"class":872}," .grid",[711,4900,759],{"class":717},[711,4902,4903,4905,4907,4909,4911,4913,4915,4917,4919],{"class":713,"line":1001},[711,4904,3414],{"class":764},[711,4906,768],{"class":717},[711,4908,2826],{"class":764},[711,4910,1789],{"class":717},[711,4912,2831],{"class":764},[711,4914,1077],{"class":717},[711,4916,1935],{"class":764},[711,4918,2838],{"class":1370},[711,4920,1804],{"class":717},[711,4922,4923],{"class":713,"line":1011},[711,4924,3248],{"class":717},[711,4926,4927],{"class":713,"line":1024},[711,4928,779],{"class":717},[16,4930,512],{"id":511},[21,4932,4933],{},"Une fois CSS bien compris, vous pouvez aller plus loin avec les préprocesseurs, les systèmes de design ou les frameworks CSS. Mais avant cela, le plus important est de bien maîtriser les bases vues dans ce chapitre.",[640,4935,4936],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":356,"searchDepth":521,"depth":521,"links":4938},[4939,4940,4941,4947,4948,4954,4959,4964,4971,4978,4985,4993,5002,5008,5014,5020,5025,5032,5042,5046,5052,5056,5063,5064,5065,5072,5079],{"id":18,"depth":521,"text":19},{"id":110,"depth":521,"text":111},{"id":626,"depth":521,"text":627,"children":4942},[4943,4944,4945,4946],{"id":633,"depth":529,"text":634},{"id":640,"depth":529,"text":641},{"id":647,"depth":529,"text":648},{"id":654,"depth":529,"text":655},{"id":687,"depth":521,"text":688},{"id":785,"depth":521,"text":786,"children":4949},[4950,4951,4952,4953],{"id":809,"depth":529,"text":810},{"id":819,"depth":529,"text":820},{"id":855,"depth":529,"text":856},{"id":1138,"depth":529,"text":1139},{"id":1161,"depth":521,"text":1162,"children":4955},[4956,4957,4958],{"id":1173,"depth":529,"text":1174},{"id":1242,"depth":529,"text":1243},{"id":1279,"depth":529,"text":1280},{"id":1318,"depth":521,"text":1319,"children":4960},[4961,4962,4963],{"id":1380,"depth":529,"text":1381},{"id":1393,"depth":529,"text":1394},{"id":1430,"depth":529,"text":1431},{"id":1446,"depth":521,"text":1447,"children":4965},[4966,4967,4968,4969,4970],{"id":1450,"depth":529,"text":1451},{"id":1484,"depth":529,"text":1485},{"id":1548,"depth":529,"text":1549},{"id":1615,"depth":529,"text":1616},{"id":1659,"depth":529,"text":1660},{"id":1699,"depth":521,"text":1700,"children":4972},[4973,4974,4975,4976,4977],{"id":1706,"depth":529,"text":1707},{"id":1736,"depth":529,"text":1737},{"id":1766,"depth":529,"text":1767},{"id":1811,"depth":529,"text":1812},{"id":1860,"depth":529,"text":1861},{"id":1867,"depth":521,"text":1868,"children":4979},[4980,4981,4983,4984],{"id":1874,"depth":529,"text":1875},{"id":1909,"depth":529,"text":4982},"em et rem",{"id":1961,"depth":529,"text":1962},{"id":1999,"depth":529,"text":2000},{"id":2039,"depth":521,"text":2040,"children":4986},[4987,4988,4989,4990,4991,4992],{"id":2063,"depth":529,"text":2064},{"id":2140,"depth":529,"text":2141},{"id":1422,"depth":529,"text":2147},{"id":2153,"depth":529,"text":2154},{"id":1417,"depth":529,"text":2160},{"id":2166,"depth":529,"text":2166},{"id":2205,"depth":521,"text":2206,"children":4994},[4995,4996,4997,4998,4999,5000,5001],{"id":2212,"depth":529,"text":2213},{"id":2243,"depth":529,"text":2244},{"id":2276,"depth":529,"text":2277},{"id":2304,"depth":529,"text":2305},{"id":2335,"depth":529,"text":2336},{"id":2366,"depth":529,"text":2367},{"id":2398,"depth":529,"text":2399},{"id":2405,"depth":521,"text":2406,"children":5003},[5004,5005,5006,5007],{"id":2409,"depth":529,"text":2410},{"id":2441,"depth":529,"text":2442},{"id":2512,"depth":529,"text":2513},{"id":2548,"depth":529,"text":2549},{"id":2581,"depth":521,"text":2582,"children":5009},[5010,5011,5012,5013],{"id":2588,"depth":529,"text":2591},{"id":2597,"depth":529,"text":2600},{"id":2606,"depth":529,"text":2609},{"id":2615,"depth":529,"text":2618},{"id":2627,"depth":521,"text":2628,"children":5015},[5016,5017,5018,5019],{"id":2634,"depth":529,"text":2635},{"id":2689,"depth":529,"text":2690},{"id":2712,"depth":529,"text":2713},{"id":2766,"depth":529,"text":2767},{"id":2787,"depth":521,"text":2788,"children":5021},[5022,5023,5024],{"id":148,"depth":529,"text":149},{"id":2859,"depth":529,"text":2860},{"id":2882,"depth":529,"text":2883},{"id":2946,"depth":521,"text":2947,"children":5026},[5027,5028,5029,5030,5031],{"id":2950,"depth":529,"text":2953},{"id":2959,"depth":529,"text":2962},{"id":2968,"depth":529,"text":2971},{"id":2977,"depth":529,"text":2980},{"id":2986,"depth":529,"text":1861},{"id":2992,"depth":521,"text":2993,"children":5033},[5034,5036,5038,5040],{"id":2996,"depth":529,"text":5035},"Pseudo-classe :hover",{"id":3035,"depth":529,"text":5037},"Pseudo-classe :focus",{"id":3073,"depth":529,"text":5039},"Pseudo-élément ::before",{"id":3108,"depth":529,"text":5041},"Pseudo-élément ::after",{"id":3144,"depth":521,"text":3145,"children":5043},[5044,5045],{"id":3148,"depth":529,"text":3149},{"id":3189,"depth":529,"text":3190},{"id":3325,"depth":521,"text":3326,"children":5047},[5048,5049,5050,5051],{"id":3332,"depth":529,"text":3333},{"id":3339,"depth":529,"text":3340},{"id":3437,"depth":529,"text":3438},{"id":3605,"depth":529,"text":3606},{"id":3626,"depth":521,"text":3627,"children":5053},[5054,5055],{"id":707,"depth":529,"text":3633},{"id":750,"depth":529,"text":3955},{"id":4415,"depth":521,"text":4416,"children":5057},[5058,5059,5060,5061,5062],{"id":4419,"depth":529,"text":4420},{"id":4426,"depth":529,"text":4427},{"id":4461,"depth":529,"text":4462},{"id":4477,"depth":529,"text":4478},{"id":4484,"depth":529,"text":4485},{"id":4491,"depth":521,"text":4492},{"id":4518,"depth":521,"text":4519},{"id":4551,"depth":521,"text":4552,"children":5066},[5067,5068,5069,5070,5071],{"id":4555,"depth":529,"text":4556},{"id":4562,"depth":529,"text":4563},{"id":4569,"depth":529,"text":4570},{"id":4576,"depth":529,"text":4577},{"id":4583,"depth":529,"text":4584},{"id":4590,"depth":521,"text":4591,"children":5073},[5074,5075,5076,5077,5078],{"id":4594,"depth":529,"text":4595},{"id":4645,"depth":529,"text":4646},{"id":4714,"depth":529,"text":4715},{"id":4762,"depth":529,"text":4763},{"id":4823,"depth":529,"text":4824},{"id":511,"depth":521,"text":512},"Un tutoriel complet pour comprendre CSS, apprendre à styliser une page, maîtriser les sélecteurs, le modèle de boîte, Flexbox, Grid, le responsive et les bonnes pratiques.",{},"\u002Fblog\u002Fapprendre-css-complet",{"title":566,"description":5080},"blog\u002Fapprendre-css-complet",[3955,561,5086],"Frontend","AXk_UD-ngXycSI-QKEFvyill5g1K_McFtB2HKBqPeVw",{"id":5089,"title":5090,"body":5091,"coverImage":550,"description":8423,"extension":552,"meta":8424,"navigation":554,"path":8425,"published":554,"publishedAt":555,"readTime":3868,"seo":8426,"stem":8427,"tags":8428,"__hash__":8429},"blog\u002Fblog\u002Fapprendre-html-complet.md","Apprendre HTML : guide complet pour construire une page web propre et bien structurée",{"type":8,"value":5092,"toc":8326},[5093,5097,5099,5102,5105,5108,5111,5113,5116,5142,5146,5149,5152,5156,5159,5163,5166,5170,5173,5177,5180,5197,5200,5204,5207,5348,5352,5359,5362,5367,5373,5380,5384,5390,5404,5409,5414,5418,5421,5432,5436,5439,5441,5459,5469,5473,5476,5478,5503,5509,5513,5516,5520,5523,5532,5576,5580,5591,5596,5614,5618,5621,5625,5653,5657,5685,5689,5713,5719,5723,5726,5751,5755,5779,5783,5845,5849,5860,5864,5870,5899,5903,5932,5938,5944,5955,5958,5962,5986,5989,5993,6019,6025,6029,6055,6062,6065,6069,6072,6080,6083,6107,6110,6136,6142,6148,6169,6171,6174,6193,6200,6203,6209,6213,6216,6220,6280,6284,6344,6348,6397,6401,6404,6407,6421,6425,6464,6468,6688,6692,6695,6699,6702,6885,6889,6892,6896,6899,7045,7049,7071,7077,7083,7087,7123,7129,7134,7223,7229,7232,7238,7241,7245,7248,7253,7256,7260,7263,7267,7294,7298,7301,7305,7308,7860,7863,7867,7871,7874,7888,7891,7909,7913,7915,7942,7944,7969,7973,7976,7983,7989,7993,8015,8019,8021,8043,8046,8048,8050,8053,8055,8058,8060,8063,8065,8071,8073,8076,8078,8080,8123,8125,8181,8183,8207,8209,8233,8235,8318,8320,8323],[11,5094,5096],{"id":5095},"apprendre-html","Apprendre HTML",[16,5098,19],{"id":18},[21,5100,5101],{},"HTML est la base de presque toutes les pages web.",[21,5103,5104],{},"Si vous souhaitez créer un site propre, lisible et bien structuré, vous devez d'abord comprendre comment fonctionne HTML. C'est lui qui décrit le contenu de la page : titres, paragraphes, images, liens, formulaires, tableaux et bien plus encore.",[21,5106,5107],{},"Contrairement à ce que beaucoup imaginent, HTML n'est pas un langage de programmation. Il ne sert pas à écrire de la logique. Il sert à structurer l'information pour que le navigateur puisse l'afficher correctement.",[21,5109,5110],{},"Dans ce chapitre, nous allons construire une vision claire de HTML, puis avancer pas à pas jusqu'à une page complète et bien organisée.",[16,5112,111],{"id":110},[21,5114,5115],{},"À la fin de ce tutoriel, vous saurez :",[31,5117,5118,5121,5124,5127,5130,5133,5136,5139],{},[34,5119,5120],{},"comprendre le rôle exact de HTML ;",[34,5122,5123],{},"écrire une structure de page correcte ;",[34,5125,5126],{},"utiliser les balises principales ;",[34,5128,5129],{},"organiser du contenu avec des titres, paragraphes, listes, liens, images et tableaux ;",[34,5131,5132],{},"créer un formulaire simple ;",[34,5134,5135],{},"distinguer les balises sémantiques importantes ;",[34,5137,5138],{},"éviter les erreurs les plus fréquentes ;",[34,5140,5141],{},"construire une page HTML propre et lisible.",[16,5143,5145],{"id":5144},"_1-html-cest-quoi-exactement","1. HTML, c'est quoi exactement ?",[21,5147,5148],{},"HTML signifie HyperText Markup Language.",[21,5150,5151],{},"Ce nom peut sembler impressionnant, mais l'idée est simple : HTML permet de baliser le contenu d'un document.",[146,5153,5155],{"id":5154},"hypertext","HyperText",[21,5157,5158],{},"Le mot hypertexte fait référence au fait que les documents peuvent être reliés entre eux par des liens.",[146,5160,5162],{"id":5161},"markup","Markup",[21,5164,5165],{},"Le balisage consiste à entourer le contenu de balises pour lui donner du sens.",[146,5167,5169],{"id":5168},"language","Language",[21,5171,5172],{},"HTML est un langage de description de contenu, pas un langage de calcul.",[146,5174,5176],{"id":5175},"ce-quhtml-fait-vraiment","Ce qu'HTML fait vraiment",[21,5178,5179],{},"HTML dit par exemple :",[31,5181,5182,5185,5188,5191,5194],{},[34,5183,5184],{},"ceci est un titre ;",[34,5186,5187],{},"ceci est un paragraphe ;",[34,5189,5190],{},"ceci est une image ;",[34,5192,5193],{},"ceci est un lien ;",[34,5195,5196],{},"ceci est un formulaire.",[21,5198,5199],{},"Le navigateur lit cette structure et construit la page à afficher.",[16,5201,5203],{"id":5202},"_2-la-structure-de-base-dun-document-html","2. La structure de base d'un document HTML",[21,5205,5206],{},"Tout document HTML sérieux commence par une structure minimale.",[350,5208,5210],{"className":705,"code":5209,"language":707,"meta":356,"style":356},"\u003C!DOCTYPE html>\n\u003Chtml lang=\"fr\">\n \u003Chead>\n \u003Cmeta charset=\"UTF-8\">\n \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n \u003Ctitle>Mon premier site\u003C\u002Ftitle>\n \u003C\u002Fhead>\n \u003Cbody>\n \u003Ch1>Bienvenue\u003C\u002Fh1>\n \u003Cp>Voici ma première page HTML.\u003C\u002Fp>\n \u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[358,5211,5212,5222,5236,5244,5258,5278,5291,5299,5307,5319,5332,5340],{"__ignoreMap":356},[711,5213,5214,5216,5218,5220],{"class":713,"line":714},[711,5215,866],{"class":717},[711,5217,869],{"class":721},[711,5219,873],{"class":872},[711,5221,729],{"class":717},[711,5223,5224,5226,5228,5230,5232,5234],{"class":713,"line":521},[711,5225,718],{"class":717},[711,5227,707],{"class":721},[711,5229,884],{"class":872},[711,5231,887],{"class":717},[711,5233,891],{"class":890},[711,5235,729],{"class":717},[711,5237,5238,5240,5242],{"class":713,"line":529},[711,5239,898],{"class":717},[711,5241,901],{"class":721},[711,5243,729],{"class":717},[711,5245,5246,5248,5250,5252,5254,5256],{"class":713,"line":906},[711,5247,909],{"class":717},[711,5249,912],{"class":721},[711,5251,915],{"class":872},[711,5253,887],{"class":717},[711,5255,920],{"class":890},[711,5257,729],{"class":717},[711,5259,5260,5262,5264,5266,5268,5270,5272,5274,5276],{"class":713,"line":925},[711,5261,909],{"class":717},[711,5263,912],{"class":721},[711,5265,932],{"class":872},[711,5267,887],{"class":717},[711,5269,937],{"class":890},[711,5271,940],{"class":872},[711,5273,887],{"class":717},[711,5275,945],{"class":890},[711,5277,729],{"class":717},[711,5279,5280,5282,5284,5287,5289],{"class":713,"line":950},[711,5281,909],{"class":717},[711,5283,955],{"class":721},[711,5285,5286],{"class":717},">Mon premier site\u003C\u002F",[711,5288,955],{"class":721},[711,5290,729],{"class":717},[711,5292,5293,5295,5297],{"class":713,"line":965},[711,5294,994],{"class":717},[711,5296,901],{"class":721},[711,5298,729],{"class":717},[711,5300,5301,5303,5305],{"class":713,"line":991},[711,5302,898],{"class":717},[711,5304,1006],{"class":721},[711,5306,729],{"class":717},[711,5308,5309,5311,5313,5315,5317],{"class":713,"line":1001},[711,5310,909],{"class":717},[711,5312,11],{"class":721},[711,5314,724],{"class":717},[711,5316,11],{"class":721},[711,5318,729],{"class":717},[711,5320,5321,5323,5325,5328,5330],{"class":713,"line":1011},[711,5322,909],{"class":717},[711,5324,21],{"class":721},[711,5326,5327],{"class":717},">Voici ma première page HTML.\u003C\u002F",[711,5329,21],{"class":721},[711,5331,729],{"class":717},[711,5333,5334,5336,5338],{"class":713,"line":1024},[711,5335,994],{"class":717},[711,5337,1006],{"class":721},[711,5339,729],{"class":717},[711,5341,5342,5344,5346],{"class":713,"line":556},[711,5343,1049],{"class":717},[711,5345,707],{"class":721},[711,5347,729],{"class":717},[146,5349,5351],{"id":5350},"le-rôle-de-chaque-partie","Le rôle de chaque partie",[5353,5354,5356],"h4",{"id":5355},"doctype-html",[358,5357,5358],{},"\u003C!DOCTYPE html>",[21,5360,5361],{},"Cette ligne indique au navigateur que le document utilise le standard HTML5.",[5353,5363,5364],{"id":707},[358,5365,5366],{},"\u003Chtml>",[21,5368,5369,5370,5372],{},"La balise ",[358,5371,707],{}," contient l'ensemble de la page.",[21,5374,5375,5376,5379],{},"L'attribut ",[358,5377,5378],{},"lang=\"fr\""," indique que la langue principale du document est le français.",[5353,5381,5382],{"id":901},[358,5383,843],{},[21,5385,5386,5387,5389],{},"La section ",[358,5388,901],{}," contient les informations techniques de la page :",[31,5391,5392,5395,5398,5401],{},[34,5393,5394],{},"le jeu de caractères ;",[34,5396,5397],{},"le titre de la page ;",[34,5399,5400],{},"les métadonnées ;",[34,5402,5403],{},"les liens vers des fichiers externes.",[5353,5405,5406],{"id":1006},[358,5407,5408],{},"\u003Cbody>",[21,5410,5386,5411,5413],{},[358,5412,1006],{}," contient tout ce que l'utilisateur voit réellement à l'écran.",[16,5415,5417],{"id":5416},"_3-les-balises-les-attributs-et-le-contenu","3. Les balises, les attributs et le contenu",[21,5419,5420],{},"HTML repose sur trois notions simples :",[31,5422,5423,5426,5429],{},[34,5424,5425],{},"les balises ;",[34,5427,5428],{},"les attributs ;",[34,5430,5431],{},"le contenu.",[146,5433,5435],{"id":5434},"les-balises","Les balises",[21,5437,5438],{},"Une balise encadre un élément HTML.",[21,5440,348],{},[350,5442,5444],{"className":705,"code":5443,"language":707,"meta":356,"style":356},"\u003Cp>Un paragraphe\u003C\u002Fp>\n",[358,5445,5446],{"__ignoreMap":356},[711,5447,5448,5450,5452,5455,5457],{"class":713,"line":714},[711,5449,718],{"class":717},[711,5451,21],{"class":721},[711,5453,5454],{"class":717},">Un paragraphe\u003C\u002F",[711,5456,21],{"class":721},[711,5458,729],{"class":717},[21,5460,1387,5461,5464,5465,5468],{},[358,5462,5463],{},"\u003Cp>"," ouvre le paragraphe et ",[358,5466,5467],{},"\u003C\u002Fp>"," le ferme.",[146,5470,5472],{"id":5471},"les-attributs","Les attributs",[21,5474,5475],{},"Les attributs ajoutent des informations à une balise.",[21,5477,348],{},[350,5479,5481],{"className":705,"code":5480,"language":707,"meta":356,"style":356},"\u003Ca href=\"https:\u002F\u002Fexample.com\">Visiter le site\u003C\u002Fa>\n",[358,5482,5483],{"__ignoreMap":356},[711,5484,5485,5487,5489,5491,5493,5496,5499,5501],{"class":713,"line":714},[711,5486,718],{"class":717},[711,5488,3706],{"class":721},[711,5490,981],{"class":872},[711,5492,887],{"class":717},[711,5494,5495],{"class":890},"\"https:\u002F\u002Fexample.com\"",[711,5497,5498],{"class":717},">Visiter le site\u003C\u002F",[711,5500,3706],{"class":721},[711,5502,729],{"class":717},[21,5504,1387,5505,5508],{},[358,5506,5507],{},"href"," indique l'adresse de destination du lien.",[146,5510,5512],{"id":5511},"le-contenu","Le contenu",[21,5514,5515],{},"Le contenu est le texte ou l'élément placé entre la balise ouvrante et la balise fermante.",[16,5517,5519],{"id":5518},"_4-les-titres-et-les-paragraphes","4. Les titres et les paragraphes",[21,5521,5522],{},"Les titres structurent le contenu d'une page.",[21,5524,5525,5526,5528,5529,831],{},"HTML propose six niveaux de titres : ",[358,5527,11],{}," à ",[358,5530,5531],{},"h6",[350,5533,5535],{"className":705,"code":5534,"language":707,"meta":356,"style":356},"\u003Ch1>Titre principal\u003C\u002Fh1>\n\u003Ch2>Sous-titre\u003C\u002Fh2>\n\u003Ch3>Section plus précise\u003C\u002Fh3>\n",[358,5536,5537,5550,5563],{"__ignoreMap":356},[711,5538,5539,5541,5543,5546,5548],{"class":713,"line":714},[711,5540,718],{"class":717},[711,5542,11],{"class":721},[711,5544,5545],{"class":717},">Titre principal\u003C\u002F",[711,5547,11],{"class":721},[711,5549,729],{"class":717},[711,5551,5552,5554,5556,5559,5561],{"class":713,"line":521},[711,5553,718],{"class":717},[711,5555,16],{"class":721},[711,5557,5558],{"class":717},">Sous-titre\u003C\u002F",[711,5560,16],{"class":721},[711,5562,729],{"class":717},[711,5564,5565,5567,5569,5572,5574],{"class":713,"line":529},[711,5566,718],{"class":717},[711,5568,146],{"class":721},[711,5570,5571],{"class":717},">Section plus précise\u003C\u002F",[711,5573,146],{"class":721},[711,5575,729],{"class":717},[146,5577,5579],{"id":5578},"bonne-pratique-importante","Bonne pratique importante",[21,5581,5582,5583,5585,5586,1077,5588,5590],{},"Il est préférable d'avoir un seul ",[358,5584,11],{}," principal par page, puis d'organiser le reste avec ",[358,5587,16],{},[358,5589,146],{},", etc.",[21,5592,5593,5594,831],{},"Les paragraphes, eux, s'écrivent avec la balise ",[358,5595,21],{},[350,5597,5599],{"className":705,"code":5598,"language":707,"meta":356,"style":356},"\u003Cp>HTML permet de structurer le contenu d'une page web.\u003C\u002Fp>\n",[358,5600,5601],{"__ignoreMap":356},[711,5602,5603,5605,5607,5610,5612],{"class":713,"line":714},[711,5604,718],{"class":717},[711,5606,21],{"class":721},[711,5608,5609],{"class":717},">HTML permet de structurer le contenu d'une page web.\u003C\u002F",[711,5611,21],{"class":721},[711,5613,729],{"class":717},[16,5615,5617],{"id":5616},"_5-les-textes-enrichis","5. Les textes enrichis",[21,5619,5620],{},"HTML permet aussi de mettre en valeur certaines parties du texte.",[146,5622,5624],{"id":5623},"mettre-en-évidence","Mettre en évidence",[350,5626,5628],{"className":705,"code":5627,"language":707,"meta":356,"style":356},"\u003Cp>Ce mot est \u003Cstrong>important\u003C\u002Fstrong>.\u003C\u002Fp>\n",[358,5629,5630],{"__ignoreMap":356},[711,5631,5632,5634,5636,5639,5641,5644,5646,5649,5651],{"class":713,"line":714},[711,5633,718],{"class":717},[711,5635,21],{"class":721},[711,5637,5638],{"class":717},">Ce mot est \u003C",[711,5640,260],{"class":721},[711,5642,5643],{"class":717},">important\u003C\u002F",[711,5645,260],{"class":721},[711,5647,5648],{"class":717},">.\u003C\u002F",[711,5650,21],{"class":721},[711,5652,729],{"class":717},[146,5654,5656],{"id":5655},"marquer-une-emphase","Marquer une emphase",[350,5658,5660],{"className":705,"code":5659,"language":707,"meta":356,"style":356},"\u003Cp>Il faut \u003Cem>bien comprendre\u003C\u002Fem> la structure du document.\u003C\u002Fp>\n",[358,5661,5662],{"__ignoreMap":356},[711,5663,5664,5666,5668,5671,5673,5676,5678,5681,5683],{"class":713,"line":714},[711,5665,718],{"class":717},[711,5667,21],{"class":721},[711,5669,5670],{"class":717},">Il faut \u003C",[711,5672,1912],{"class":721},[711,5674,5675],{"class":717},">bien comprendre\u003C\u002F",[711,5677,1912],{"class":721},[711,5679,5680],{"class":717},"> la structure du document.\u003C\u002F",[711,5682,21],{"class":721},[711,5684,729],{"class":717},[146,5686,5688],{"id":5687},"sauter-une-ligne","Sauter une ligne",[350,5690,5692],{"className":705,"code":5691,"language":707,"meta":356,"style":356},"\u003Cp>Première ligne\u003Cbr>Deuxième ligne\u003C\u002Fp>\n",[358,5693,5694],{"__ignoreMap":356},[711,5695,5696,5698,5700,5703,5706,5709,5711],{"class":713,"line":714},[711,5697,718],{"class":717},[711,5699,21],{"class":721},[711,5701,5702],{"class":717},">Première ligne\u003C",[711,5704,5705],{"class":721},"br",[711,5707,5708],{"class":717},">Deuxième ligne\u003C\u002F",[711,5710,21],{"class":721},[711,5712,729],{"class":717},[21,5714,5715,5716,5718],{},"Attention : ",[358,5717,5705],{}," sert à faire une coupure de ligne ponctuelle, pas à construire la mise en page complète.",[16,5720,5722],{"id":5721},"_6-les-liens","6. Les liens",[21,5724,5725],{},"Les liens permettent de naviguer d'une page à une autre.",[350,5727,5729],{"className":705,"code":5728,"language":707,"meta":356,"style":356},"\u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\">Consulter la documentation\u003C\u002Fa>\n",[358,5730,5731],{"__ignoreMap":356},[711,5732,5733,5735,5737,5739,5741,5744,5747,5749],{"class":713,"line":714},[711,5734,718],{"class":717},[711,5736,3706],{"class":721},[711,5738,981],{"class":872},[711,5740,887],{"class":717},[711,5742,5743],{"class":890},"\"https:\u002F\u002Fdeveloper.mozilla.org\"",[711,5745,5746],{"class":717},">Consulter la documentation\u003C\u002F",[711,5748,3706],{"class":721},[711,5750,729],{"class":717},[146,5752,5754],{"id":5753},"lien-vers-une-autre-page-du-site","Lien vers une autre page du site",[350,5756,5758],{"className":705,"code":5757,"language":707,"meta":356,"style":356},"\u003Ca href=\"about.html\">À propos\u003C\u002Fa>\n",[358,5759,5760],{"__ignoreMap":356},[711,5761,5762,5764,5766,5768,5770,5773,5775,5777],{"class":713,"line":714},[711,5763,718],{"class":717},[711,5765,3706],{"class":721},[711,5767,981],{"class":872},[711,5769,887],{"class":717},[711,5771,5772],{"class":890},"\"about.html\"",[711,5774,3716],{"class":717},[711,5776,3706],{"class":721},[711,5778,729],{"class":717},[146,5780,5782],{"id":5781},"lien-interne-sur-la-page","Lien interne sur la page",[350,5784,5786],{"className":705,"code":5785,"language":707,"meta":356,"style":356},"\u003Ca href=\"#contact\">Aller au contact\u003C\u002Fa>\n\n\u003Csection id=\"contact\">\n \u003Ch2>Contact\u003C\u002Fh2>\n\u003C\u002Fsection>\n",[358,5787,5788,5807,5811,5825,5837],{"__ignoreMap":356},[711,5789,5790,5792,5794,5796,5798,5800,5803,5805],{"class":713,"line":714},[711,5791,718],{"class":717},[711,5793,3706],{"class":721},[711,5795,981],{"class":872},[711,5797,887],{"class":717},[711,5799,3753],{"class":890},[711,5801,5802],{"class":717},">Aller au contact\u003C\u002F",[711,5804,3706],{"class":721},[711,5806,729],{"class":717},[711,5808,5809],{"class":713,"line":521},[711,5810,1114],{"emptyLinePlaceholder":554},[711,5812,5813,5815,5817,5819,5821,5823],{"class":713,"line":529},[711,5814,718],{"class":717},[711,5816,1594],{"class":721},[711,5818,1597],{"class":872},[711,5820,887],{"class":717},[711,5822,1602],{"class":890},[711,5824,729],{"class":717},[711,5826,5827,5829,5831,5833,5835],{"class":713,"line":906},[711,5828,898],{"class":717},[711,5830,16],{"class":721},[711,5832,3756],{"class":717},[711,5834,16],{"class":721},[711,5836,729],{"class":717},[711,5838,5839,5841,5843],{"class":713,"line":925},[711,5840,1049],{"class":717},[711,5842,1594],{"class":721},[711,5844,729],{"class":717},[146,5846,5848],{"id":5847},"bonnes-pratiques-pour-les-liens","Bonnes pratiques pour les liens",[31,5850,5851,5854,5857],{},[34,5852,5853],{},"le texte du lien doit être clair ;",[34,5855,5856],{},"évitez les liens vagues comme \"cliquez ici\" ;",[34,5858,5859],{},"indiquez la destination quand c'est utile.",[16,5861,5863],{"id":5862},"_7-les-images","7. Les images",[21,5865,5866,5867,831],{},"Une image s'insère avec la balise ",[358,5868,5869],{},"img",[350,5871,5873],{"className":705,"code":5872,"language":707,"meta":356,"style":356},"\u003Cimg src=\"photo.jpg\" alt=\"Portrait de Corneille\">\n",[358,5874,5875],{"__ignoreMap":356},[711,5876,5877,5879,5881,5884,5886,5889,5892,5894,5897],{"class":713,"line":714},[711,5878,718],{"class":717},[711,5880,5869],{"class":721},[711,5882,5883],{"class":872}," src",[711,5885,887],{"class":717},[711,5887,5888],{"class":890},"\"photo.jpg\"",[711,5890,5891],{"class":872}," alt",[711,5893,887],{"class":717},[711,5895,5896],{"class":890},"\"Portrait de Corneille\"",[711,5898,729],{"class":717},[146,5900,5902],{"id":5901},"les-attributs-les-plus-importants","Les attributs les plus importants",[31,5904,5905,5911,5917,5926],{},[34,5906,5907,5910],{},[358,5908,5909],{},"src"," : le chemin vers le fichier image ;",[34,5912,5913,5916],{},[358,5914,5915],{},"alt"," : le texte alternatif ;",[34,5918,5919,1913,5922,5925],{},[358,5920,5921],{},"width",[358,5923,5924],{},"height"," : les dimensions ;",[34,5927,5928,5931],{},[358,5929,5930],{},"loading=\"lazy\""," : le chargement différé si nécessaire.",[146,5933,5935,5936],{"id":5934},"comprendre-le-chemin-dans-src","Comprendre le chemin dans ",[358,5937,5909],{},[21,5939,5940,5941,5943],{},"Le mot ",[358,5942,5909],{}," signifie source. Il indique au navigateur où trouver le fichier image.",[21,5945,5946,5947,5950,5951,5954],{},"Quand vous écrivez ",[358,5948,5949],{},"src=\"photo.jpg\"",", vous dites au navigateur : \"cherche le fichier ",[358,5952,5953],{},"photo.jpg"," à l'endroit indiqué par ce chemin\".",[21,5956,5957],{},"Il existe plusieurs cas fréquents.",[5353,5959,5961],{"id":5960},"_1-le-fichier-est-dans-le-même-dossier","1. Le fichier est dans le même dossier",[350,5963,5964],{"className":705,"code":5872,"language":707,"meta":356,"style":356},[358,5965,5966],{"__ignoreMap":356},[711,5967,5968,5970,5972,5974,5976,5978,5980,5982,5984],{"class":713,"line":714},[711,5969,718],{"class":717},[711,5971,5869],{"class":721},[711,5973,5883],{"class":872},[711,5975,887],{"class":717},[711,5977,5888],{"class":890},[711,5979,5891],{"class":872},[711,5981,887],{"class":717},[711,5983,5896],{"class":890},[711,5985,729],{"class":717},[21,5987,5988],{},"Ici, l'image se trouve au même niveau que la page HTML.",[5353,5990,5992],{"id":5991},"_2-le-fichier-est-dans-un-dossier","2. Le fichier est dans un dossier",[350,5994,5996],{"className":705,"code":5995,"language":707,"meta":356,"style":356},"\u003Cimg src=\"images\u002Fphoto.jpg\" alt=\"Portrait de Corneille\">\n",[358,5997,5998],{"__ignoreMap":356},[711,5999,6000,6002,6004,6006,6008,6011,6013,6015,6017],{"class":713,"line":714},[711,6001,718],{"class":717},[711,6003,5869],{"class":721},[711,6005,5883],{"class":872},[711,6007,887],{"class":717},[711,6009,6010],{"class":890},"\"images\u002Fphoto.jpg\"",[711,6012,5891],{"class":872},[711,6014,887],{"class":717},[711,6016,5896],{"class":890},[711,6018,729],{"class":717},[21,6020,6021,6022,831],{},"Ici, le navigateur va chercher l'image dans le dossier ",[358,6023,6024],{},"images",[5353,6026,6028],{"id":6027},"_3-le-fichier-est-dans-un-dossier-parent","3. Le fichier est dans un dossier parent",[350,6030,6032],{"className":705,"code":6031,"language":707,"meta":356,"style":356},"\u003Cimg src=\"..\u002Fphoto.jpg\" alt=\"Portrait de Corneille\">\n",[358,6033,6034],{"__ignoreMap":356},[711,6035,6036,6038,6040,6042,6044,6047,6049,6051,6053],{"class":713,"line":714},[711,6037,718],{"class":717},[711,6039,5869],{"class":721},[711,6041,5883],{"class":872},[711,6043,887],{"class":717},[711,6045,6046],{"class":890},"\"..\u002Fphoto.jpg\"",[711,6048,5891],{"class":872},[711,6050,887],{"class":717},[711,6052,5896],{"class":890},[711,6054,729],{"class":717},[21,6056,6057,6058,6061],{},"Le ",[358,6059,6060],{},".."," signifie \"remonter d'un dossier\".",[21,6063,6064],{},"Cette syntaxe est utile quand votre fichier HTML se trouve dans un sous-dossier.",[146,6066,6068],{"id":6067},"chemin-relatif-ou-chemin-absolu","Chemin relatif ou chemin absolu",[21,6070,6071],{},"Le plus souvent, dans un projet web, on utilise des chemins relatifs.",[31,6073,6074,6077],{},[34,6075,6076],{},"Un chemin relatif dépend de l'emplacement du fichier HTML.",[34,6078,6079],{},"Un chemin absolu pointe vers une adresse complète ou vers une racine précise du site.",[21,6081,6082],{},"Exemple de chemin relatif :",[350,6084,6085],{"className":705,"code":5995,"language":707,"meta":356,"style":356},[358,6086,6087],{"__ignoreMap":356},[711,6088,6089,6091,6093,6095,6097,6099,6101,6103,6105],{"class":713,"line":714},[711,6090,718],{"class":717},[711,6092,5869],{"class":721},[711,6094,5883],{"class":872},[711,6096,887],{"class":717},[711,6098,6010],{"class":890},[711,6100,5891],{"class":872},[711,6102,887],{"class":717},[711,6104,5896],{"class":890},[711,6106,729],{"class":717},[21,6108,6109],{},"Exemple de chemin absolu sur un site :",[350,6111,6113],{"className":705,"code":6112,"language":707,"meta":356,"style":356},"\u003Cimg src=\"\u002Fimages\u002Fphoto.jpg\" alt=\"Portrait de Corneille\">\n",[358,6114,6115],{"__ignoreMap":356},[711,6116,6117,6119,6121,6123,6125,6128,6130,6132,6134],{"class":713,"line":714},[711,6118,718],{"class":717},[711,6120,5869],{"class":721},[711,6122,5883],{"class":872},[711,6124,887],{"class":717},[711,6126,6127],{"class":890},"\"\u002Fimages\u002Fphoto.jpg\"",[711,6129,5891],{"class":872},[711,6131,887],{"class":717},[711,6133,5896],{"class":890},[711,6135,729],{"class":717},[21,6137,6057,6138,6141],{},[358,6139,6140],{},"\u002F"," au début indique souvent la racine du site.",[146,6143,6145,6146],{"id":6144},"erreurs-fréquentes-avec-src","Erreurs fréquentes avec ",[358,6147,5909],{},[31,6149,6150,6153,6156,6166],{},[34,6151,6152],{},"oublier le bon dossier ;",[34,6154,6155],{},"se tromper dans le nom du fichier ;",[34,6157,6158,6159,6162,6163,1407],{},"utiliser une mauvaise extension, par exemple ",[358,6160,6161],{},".jpg"," au lieu de ",[358,6164,6165],{},".png",[34,6167,6168],{},"oublier que les majuscules et les minuscules peuvent compter selon l'environnement.",[146,6170,1861],{"id":1860},[21,6172,6173],{},"Si une image ne s'affiche pas, vérifiez dans cet ordre :",[60,6175,6176,6179,6182,6187,6190],{},[34,6177,6178],{},"le nom du fichier ;",[34,6180,6181],{},"l'extension du fichier ;",[34,6183,6184,6185,1407],{},"le dossier indiqué dans ",[358,6186,5909],{},[34,6188,6189],{},"la casse du nom ;",[34,6191,6192],{},"l'emplacement réel du fichier.",[146,6194,6196,6197,6199],{"id":6195},"pourquoi-alt-est-essentiel","Pourquoi ",[358,6198,5915],{}," est essentiel",[21,6201,6202],{},"Le texte alternatif décrit l'image pour les lecteurs d'écran et pour les cas où l'image ne peut pas s'afficher.",[21,6204,6205,6206,6208],{},"Un bon ",[358,6207,5915],{}," améliore à la fois l'accessibilité et la compréhension du contenu.",[16,6210,6212],{"id":6211},"_8-les-listes","8. Les listes",[21,6214,6215],{},"Les listes sont très utiles pour organiser des informations.",[146,6217,6219],{"id":6218},"liste-non-ordonnée","Liste non ordonnée",[350,6221,6223],{"className":705,"code":6222,"language":707,"meta":356,"style":356},"\u003Cul>\n \u003Cli>HTML\u003C\u002Fli>\n \u003Cli>CSS\u003C\u002Fli>\n \u003Cli>JavaScript\u003C\u002Fli>\n\u003C\u002Ful>\n",[358,6224,6225,6233,6246,6259,6272],{"__ignoreMap":356},[711,6226,6227,6229,6231],{"class":713,"line":714},[711,6228,718],{"class":717},[711,6230,31],{"class":721},[711,6232,729],{"class":717},[711,6234,6235,6237,6239,6242,6244],{"class":713,"line":521},[711,6236,898],{"class":717},[711,6238,34],{"class":721},[711,6240,6241],{"class":717},">HTML\u003C\u002F",[711,6243,34],{"class":721},[711,6245,729],{"class":717},[711,6247,6248,6250,6252,6255,6257],{"class":713,"line":529},[711,6249,898],{"class":717},[711,6251,34],{"class":721},[711,6253,6254],{"class":717},">CSS\u003C\u002F",[711,6256,34],{"class":721},[711,6258,729],{"class":717},[711,6260,6261,6263,6265,6268,6270],{"class":713,"line":906},[711,6262,898],{"class":717},[711,6264,34],{"class":721},[711,6266,6267],{"class":717},">JavaScript\u003C\u002F",[711,6269,34],{"class":721},[711,6271,729],{"class":717},[711,6273,6274,6276,6278],{"class":713,"line":925},[711,6275,1049],{"class":717},[711,6277,31],{"class":721},[711,6279,729],{"class":717},[146,6281,6283],{"id":6282},"liste-ordonnée","Liste ordonnée",[350,6285,6287],{"className":705,"code":6286,"language":707,"meta":356,"style":356},"\u003Col>\n \u003Cli>Créer le fichier HTML\u003C\u002Fli>\n \u003Cli>Écrire la structure de base\u003C\u002Fli>\n \u003Cli>Ajouter le contenu\u003C\u002Fli>\n\u003C\u002Fol>\n",[358,6288,6289,6297,6310,6323,6336],{"__ignoreMap":356},[711,6290,6291,6293,6295],{"class":713,"line":714},[711,6292,718],{"class":717},[711,6294,60],{"class":721},[711,6296,729],{"class":717},[711,6298,6299,6301,6303,6306,6308],{"class":713,"line":521},[711,6300,898],{"class":717},[711,6302,34],{"class":721},[711,6304,6305],{"class":717},">Créer le fichier HTML\u003C\u002F",[711,6307,34],{"class":721},[711,6309,729],{"class":717},[711,6311,6312,6314,6316,6319,6321],{"class":713,"line":529},[711,6313,898],{"class":717},[711,6315,34],{"class":721},[711,6317,6318],{"class":717},">Écrire la structure de base\u003C\u002F",[711,6320,34],{"class":721},[711,6322,729],{"class":717},[711,6324,6325,6327,6329,6332,6334],{"class":713,"line":906},[711,6326,898],{"class":717},[711,6328,34],{"class":721},[711,6330,6331],{"class":717},">Ajouter le contenu\u003C\u002F",[711,6333,34],{"class":721},[711,6335,729],{"class":717},[711,6337,6338,6340,6342],{"class":713,"line":925},[711,6339,1049],{"class":717},[711,6341,60],{"class":721},[711,6343,729],{"class":717},[146,6345,6347],{"id":6346},"liste-de-définitions","Liste de définitions",[350,6349,6351],{"className":705,"code":6350,"language":707,"meta":356,"style":356},"\u003Cdl>\n \u003Cdt>HTML\u003C\u002Fdt>\n \u003Cdd>Langage de balisage pour structurer le contenu.\u003C\u002Fdd>\n\u003C\u002Fdl>\n",[358,6352,6353,6362,6375,6389],{"__ignoreMap":356},[711,6354,6355,6357,6360],{"class":713,"line":714},[711,6356,718],{"class":717},[711,6358,6359],{"class":721},"dl",[711,6361,729],{"class":717},[711,6363,6364,6366,6369,6371,6373],{"class":713,"line":521},[711,6365,898],{"class":717},[711,6367,6368],{"class":721},"dt",[711,6370,6241],{"class":717},[711,6372,6368],{"class":721},[711,6374,729],{"class":717},[711,6376,6377,6379,6382,6385,6387],{"class":713,"line":529},[711,6378,898],{"class":717},[711,6380,6381],{"class":721},"dd",[711,6383,6384],{"class":717},">Langage de balisage pour structurer le contenu.\u003C\u002F",[711,6386,6381],{"class":721},[711,6388,729],{"class":717},[711,6390,6391,6393,6395],{"class":713,"line":906},[711,6392,1049],{"class":717},[711,6394,6359],{"class":721},[711,6396,729],{"class":717},[16,6398,6400],{"id":6399},"_9-les-sections-sémantiques","9. Les sections sémantiques",[21,6402,6403],{},"La sémantique consiste à choisir les bonnes balises pour décrire correctement le contenu.",[21,6405,6406],{},"C'est très important pour :",[31,6408,6409,6412,6415,6418],{},[34,6410,6411],{},"la lisibilité du code ;",[34,6413,6414],{},"l'accessibilité ;",[34,6416,6417],{},"le référencement ;",[34,6419,6420],{},"la maintenance du projet.",[146,6422,6424],{"id":6423},"les-balises-sémantiques-principales","Les balises sémantiques principales",[31,6426,6427,6432,6437,6442,6447,6452,6458],{},[34,6428,6429,6431],{},[358,6430,3653],{}," : en-tête de page ou de section ;",[34,6433,6434,6436],{},[358,6435,3689],{}," : navigation ;",[34,6438,6439,6441],{},[358,6440,3788],{}," : contenu principal ;",[34,6443,6444,6446],{},[358,6445,1594],{}," : section thématique ;",[34,6448,6449,6451],{},[358,6450,1670],{}," : contenu autonome ;",[34,6453,6454,6457],{},[358,6455,6456],{},"aside"," : contenu complémentaire ;",[34,6459,6460,6463],{},[358,6461,6462],{},"footer"," : pied de page.",[146,6465,6467],{"id":6466},"exemple-de-structure-sémantique","Exemple de structure sémantique",[350,6469,6471],{"className":705,"code":6470,"language":707,"meta":356,"style":356},"\u003Cbody>\n \u003Cheader>\n \u003Ch1>Mon site\u003C\u002Fh1>\n \u003Cnav>\n \u003Ca href=\"\u002F\">Accueil\u003C\u002Fa>\n \u003Ca href=\"\u002Fblog\">Blog\u003C\u002Fa>\n \u003Ca href=\"\u002Fcontact\">Contact\u003C\u002Fa>\n \u003C\u002Fnav>\n \u003C\u002Fheader>\n\n \u003Cmain>\n \u003Carticle>\n \u003Ch2>Premier article\u003C\u002Fh2>\n \u003Cp>Voici le contenu de l'article.\u003C\u002Fp>\n \u003C\u002Farticle>\n \u003C\u002Fmain>\n\n \u003Cfooter>\n \u003Cp>© 2026 Mon site\u003C\u002Fp>\n \u003C\u002Ffooter>\n\u003C\u002Fbody>\n",[358,6472,6473,6481,6489,6502,6510,6530,6550,6569,6577,6585,6589,6597,6605,6618,6631,6639,6647,6651,6659,6672,6680],{"__ignoreMap":356},[711,6474,6475,6477,6479],{"class":713,"line":714},[711,6476,718],{"class":717},[711,6478,1006],{"class":721},[711,6480,729],{"class":717},[711,6482,6483,6485,6487],{"class":713,"line":521},[711,6484,898],{"class":717},[711,6486,3653],{"class":721},[711,6488,729],{"class":717},[711,6490,6491,6493,6495,6498,6500],{"class":713,"line":529},[711,6492,909],{"class":717},[711,6494,11],{"class":721},[711,6496,6497],{"class":717},">Mon site\u003C\u002F",[711,6499,11],{"class":721},[711,6501,729],{"class":717},[711,6503,6504,6506,6508],{"class":713,"line":906},[711,6505,909],{"class":717},[711,6507,3689],{"class":721},[711,6509,729],{"class":717},[711,6511,6512,6514,6516,6518,6520,6523,6526,6528],{"class":713,"line":925},[711,6513,3703],{"class":717},[711,6515,3706],{"class":721},[711,6517,981],{"class":872},[711,6519,887],{"class":717},[711,6521,6522],{"class":890},"\"\u002F\"",[711,6524,6525],{"class":717},">Accueil\u003C\u002F",[711,6527,3706],{"class":721},[711,6529,729],{"class":717},[711,6531,6532,6534,6536,6538,6540,6543,6546,6548],{"class":713,"line":950},[711,6533,3703],{"class":717},[711,6535,3706],{"class":721},[711,6537,981],{"class":872},[711,6539,887],{"class":717},[711,6541,6542],{"class":890},"\"\u002Fblog\"",[711,6544,6545],{"class":717},">Blog\u003C\u002F",[711,6547,3706],{"class":721},[711,6549,729],{"class":717},[711,6551,6552,6554,6556,6558,6560,6563,6565,6567],{"class":713,"line":965},[711,6553,3703],{"class":717},[711,6555,3706],{"class":721},[711,6557,981],{"class":872},[711,6559,887],{"class":717},[711,6561,6562],{"class":890},"\"\u002Fcontact\"",[711,6564,3756],{"class":717},[711,6566,3706],{"class":721},[711,6568,729],{"class":717},[711,6570,6571,6573,6575],{"class":713,"line":991},[711,6572,3765],{"class":717},[711,6574,3689],{"class":721},[711,6576,729],{"class":717},[711,6578,6579,6581,6583],{"class":713,"line":1001},[711,6580,994],{"class":717},[711,6582,3653],{"class":721},[711,6584,729],{"class":717},[711,6586,6587],{"class":713,"line":1011},[711,6588,1114],{"emptyLinePlaceholder":554},[711,6590,6591,6593,6595],{"class":713,"line":1024},[711,6592,898],{"class":717},[711,6594,3788],{"class":721},[711,6596,729],{"class":717},[711,6598,6599,6601,6603],{"class":713,"line":556},[711,6600,909],{"class":717},[711,6602,1670],{"class":721},[711,6604,729],{"class":717},[711,6606,6607,6609,6611,6614,6616],{"class":713,"line":1046},[711,6608,3703],{"class":717},[711,6610,16],{"class":721},[711,6612,6613],{"class":717},">Premier article\u003C\u002F",[711,6615,16],{"class":721},[711,6617,729],{"class":717},[711,6619,6620,6622,6624,6627,6629],{"class":713,"line":3317},[711,6621,3703],{"class":717},[711,6623,21],{"class":721},[711,6625,6626],{"class":717},">Voici le contenu de l'article.\u003C\u002F",[711,6628,21],{"class":721},[711,6630,729],{"class":717},[711,6632,6633,6635,6637],{"class":713,"line":3574},[711,6634,3765],{"class":717},[711,6636,1670],{"class":721},[711,6638,729],{"class":717},[711,6640,6641,6643,6645],{"class":713,"line":3595},[711,6642,994],{"class":717},[711,6644,3788],{"class":721},[711,6646,729],{"class":717},[711,6648,6649],{"class":713,"line":3600},[711,6650,1114],{"emptyLinePlaceholder":554},[711,6652,6653,6655,6657],{"class":713,"line":3868},[711,6654,898],{"class":717},[711,6656,6462],{"class":721},[711,6658,729],{"class":717},[711,6660,6661,6663,6665,6668,6670],{"class":713,"line":3888},[711,6662,909],{"class":717},[711,6664,21],{"class":721},[711,6666,6667],{"class":717},">© 2026 Mon site\u003C\u002F",[711,6669,21],{"class":721},[711,6671,729],{"class":717},[711,6673,6674,6676,6678],{"class":713,"line":3908},[711,6675,994],{"class":717},[711,6677,6462],{"class":721},[711,6679,729],{"class":717},[711,6681,6682,6684,6686],{"class":713,"line":3928},[711,6683,1049],{"class":717},[711,6685,1006],{"class":721},[711,6687,729],{"class":717},[146,6689,6691],{"id":6690},"pourquoi-cette-structure-est-meilleure","Pourquoi cette structure est meilleure",[21,6693,6694],{},"Un navigateur, un moteur de recherche ou un lecteur d'écran comprend plus facilement la fonction de chaque bloc.",[16,6696,6698],{"id":6697},"_10-les-tableaux","10. Les tableaux",[21,6700,6701],{},"Les tableaux servent à afficher des données organisées en lignes et en colonnes.",[350,6703,6705],{"className":705,"code":6704,"language":707,"meta":356,"style":356},"\u003Ctable>\n \u003Cthead>\n \u003Ctr>\n \u003Cth>Langage\u003C\u002Fth>\n \u003Cth>Usage\u003C\u002Fth>\n \u003C\u002Ftr>\n \u003C\u002Fthead>\n \u003Ctbody>\n \u003Ctr>\n \u003Ctd>HTML\u003C\u002Ftd>\n \u003Ctd>Structure\u003C\u002Ftd>\n \u003C\u002Ftr>\n \u003Ctr>\n \u003Ctd>CSS\u003C\u002Ftd>\n \u003Ctd>Style\u003C\u002Ftd>\n \u003C\u002Ftr>\n \u003C\u002Ftbody>\n\u003C\u002Ftable>\n",[358,6706,6707,6716,6725,6734,6748,6761,6769,6777,6786,6794,6807,6820,6828,6836,6848,6861,6869,6877],{"__ignoreMap":356},[711,6708,6709,6711,6714],{"class":713,"line":714},[711,6710,718],{"class":717},[711,6712,6713],{"class":721},"table",[711,6715,729],{"class":717},[711,6717,6718,6720,6723],{"class":713,"line":521},[711,6719,898],{"class":717},[711,6721,6722],{"class":721},"thead",[711,6724,729],{"class":717},[711,6726,6727,6729,6732],{"class":713,"line":529},[711,6728,909],{"class":717},[711,6730,6731],{"class":721},"tr",[711,6733,729],{"class":717},[711,6735,6736,6738,6741,6744,6746],{"class":713,"line":906},[711,6737,3703],{"class":717},[711,6739,6740],{"class":721},"th",[711,6742,6743],{"class":717},">Langage\u003C\u002F",[711,6745,6740],{"class":721},[711,6747,729],{"class":717},[711,6749,6750,6752,6754,6757,6759],{"class":713,"line":925},[711,6751,3703],{"class":717},[711,6753,6740],{"class":721},[711,6755,6756],{"class":717},">Usage\u003C\u002F",[711,6758,6740],{"class":721},[711,6760,729],{"class":717},[711,6762,6763,6765,6767],{"class":713,"line":950},[711,6764,3765],{"class":717},[711,6766,6731],{"class":721},[711,6768,729],{"class":717},[711,6770,6771,6773,6775],{"class":713,"line":965},[711,6772,994],{"class":717},[711,6774,6722],{"class":721},[711,6776,729],{"class":717},[711,6778,6779,6781,6784],{"class":713,"line":991},[711,6780,898],{"class":717},[711,6782,6783],{"class":721},"tbody",[711,6785,729],{"class":717},[711,6787,6788,6790,6792],{"class":713,"line":1001},[711,6789,909],{"class":717},[711,6791,6731],{"class":721},[711,6793,729],{"class":717},[711,6795,6796,6798,6801,6803,6805],{"class":713,"line":1011},[711,6797,3703],{"class":717},[711,6799,6800],{"class":721},"td",[711,6802,6241],{"class":717},[711,6804,6800],{"class":721},[711,6806,729],{"class":717},[711,6808,6809,6811,6813,6816,6818],{"class":713,"line":1024},[711,6810,3703],{"class":717},[711,6812,6800],{"class":721},[711,6814,6815],{"class":717},">Structure\u003C\u002F",[711,6817,6800],{"class":721},[711,6819,729],{"class":717},[711,6821,6822,6824,6826],{"class":713,"line":556},[711,6823,3765],{"class":717},[711,6825,6731],{"class":721},[711,6827,729],{"class":717},[711,6829,6830,6832,6834],{"class":713,"line":1046},[711,6831,909],{"class":717},[711,6833,6731],{"class":721},[711,6835,729],{"class":717},[711,6837,6838,6840,6842,6844,6846],{"class":713,"line":3317},[711,6839,3703],{"class":717},[711,6841,6800],{"class":721},[711,6843,6254],{"class":717},[711,6845,6800],{"class":721},[711,6847,729],{"class":717},[711,6849,6850,6852,6854,6857,6859],{"class":713,"line":3574},[711,6851,3703],{"class":717},[711,6853,6800],{"class":721},[711,6855,6856],{"class":717},">Style\u003C\u002F",[711,6858,6800],{"class":721},[711,6860,729],{"class":717},[711,6862,6863,6865,6867],{"class":713,"line":3595},[711,6864,3765],{"class":717},[711,6866,6731],{"class":721},[711,6868,729],{"class":717},[711,6870,6871,6873,6875],{"class":713,"line":3600},[711,6872,994],{"class":717},[711,6874,6783],{"class":721},[711,6876,729],{"class":717},[711,6878,6879,6881,6883],{"class":713,"line":3868},[711,6880,1049],{"class":717},[711,6882,6713],{"class":721},[711,6884,729],{"class":717},[146,6886,6888],{"id":6887},"règle-importante","Règle importante",[21,6890,6891],{},"N'utilisez pas un tableau pour faire de la mise en page. Les tableaux servent aux données tabulaires, pas à la disposition visuelle.",[16,6893,6895],{"id":6894},"_11-les-formulaires","11. Les formulaires",[21,6897,6898],{},"Les formulaires permettent de collecter des informations auprès de l'utilisateur.",[350,6900,6902],{"className":705,"code":6901,"language":707,"meta":356,"style":356},"\u003Cform>\n \u003Clabel for=\"name\">Nom\u003C\u002Flabel>\n \u003Cinput type=\"text\" id=\"name\" name=\"name\">\n\n \u003Clabel for=\"email\">Email\u003C\u002Flabel>\n \u003Cinput type=\"email\" id=\"email\" name=\"email\">\n\n \u003Cbutton type=\"submit\">Envoyer\u003C\u002Fbutton>\n\u003C\u002Fform>\n",[358,6903,6904,6913,6935,6963,6967,6987,7013,7017,7037],{"__ignoreMap":356},[711,6905,6906,6908,6911],{"class":713,"line":714},[711,6907,718],{"class":717},[711,6909,6910],{"class":721},"form",[711,6912,729],{"class":717},[711,6914,6915,6917,6920,6923,6925,6928,6931,6933],{"class":713,"line":521},[711,6916,898],{"class":717},[711,6918,6919],{"class":721},"label",[711,6921,6922],{"class":872}," for",[711,6924,887],{"class":717},[711,6926,6927],{"class":890},"\"name\"",[711,6929,6930],{"class":717},">Nom\u003C\u002F",[711,6932,6919],{"class":721},[711,6934,729],{"class":717},[711,6936,6937,6939,6941,6944,6946,6949,6951,6953,6955,6957,6959,6961],{"class":713,"line":529},[711,6938,898],{"class":717},[711,6940,3048],{"class":721},[711,6942,6943],{"class":872}," type",[711,6945,887],{"class":717},[711,6947,6948],{"class":890},"\"text\"",[711,6950,1597],{"class":872},[711,6952,887],{"class":717},[711,6954,6927],{"class":890},[711,6956,932],{"class":872},[711,6958,887],{"class":717},[711,6960,6927],{"class":890},[711,6962,729],{"class":717},[711,6964,6965],{"class":713,"line":906},[711,6966,1114],{"emptyLinePlaceholder":554},[711,6968,6969,6971,6973,6975,6977,6980,6983,6985],{"class":713,"line":925},[711,6970,898],{"class":717},[711,6972,6919],{"class":721},[711,6974,6922],{"class":872},[711,6976,887],{"class":717},[711,6978,6979],{"class":890},"\"email\"",[711,6981,6982],{"class":717},">Email\u003C\u002F",[711,6984,6919],{"class":721},[711,6986,729],{"class":717},[711,6988,6989,6991,6993,6995,6997,6999,7001,7003,7005,7007,7009,7011],{"class":713,"line":950},[711,6990,898],{"class":717},[711,6992,3048],{"class":721},[711,6994,6943],{"class":872},[711,6996,887],{"class":717},[711,6998,6979],{"class":890},[711,7000,1597],{"class":872},[711,7002,887],{"class":717},[711,7004,6979],{"class":890},[711,7006,932],{"class":872},[711,7008,887],{"class":717},[711,7010,6979],{"class":890},[711,7012,729],{"class":717},[711,7014,7015],{"class":713,"line":965},[711,7016,1114],{"emptyLinePlaceholder":554},[711,7018,7019,7021,7023,7025,7027,7030,7033,7035],{"class":713,"line":991},[711,7020,898],{"class":717},[711,7022,3010],{"class":721},[711,7024,6943],{"class":872},[711,7026,887],{"class":717},[711,7028,7029],{"class":890},"\"submit\"",[711,7031,7032],{"class":717},">Envoyer\u003C\u002F",[711,7034,3010],{"class":721},[711,7036,729],{"class":717},[711,7038,7039,7041,7043],{"class":713,"line":1001},[711,7040,1049],{"class":717},[711,7042,6910],{"class":721},[711,7044,729],{"class":717},[146,7046,7048],{"id":7047},"les-éléments-de-base","Les éléments de base",[31,7050,7051,7056,7061,7066],{},[34,7052,7053,7055],{},[358,7054,6910],{}," : le conteneur du formulaire ;",[34,7057,7058,7060],{},[358,7059,6919],{}," : le texte associé à un champ ;",[34,7062,7063,7065],{},[358,7064,3048],{}," : le champ de saisie ;",[34,7067,7068,7070],{},[358,7069,3010],{}," : le bouton d'action.",[146,7072,6196,7074,7076],{"id":7073},"pourquoi-label-est-important",[358,7075,6919],{}," est important",[21,7078,7079,7080,7082],{},"Un ",[358,7081,6919],{}," améliore la lisibilité et l'accessibilité. Il permet d'indiquer clairement à quoi sert chaque champ.",[146,7084,7086],{"id":7085},"quelques-types-de-champs-utiles","Quelques types de champs utiles",[31,7088,7089,7093,7098,7103,7108,7113,7118],{},[34,7090,7091,1407],{},[358,7092,355],{},[34,7094,7095,1407],{},[358,7096,7097],{},"email",[34,7099,7100,1407],{},[358,7101,7102],{},"password",[34,7104,7105,1407],{},[358,7106,7107],{},"number",[34,7109,7110,1407],{},[358,7111,7112],{},"checkbox",[34,7114,7115,1407],{},[358,7116,7117],{},"radio",[34,7119,7120,831],{},[358,7121,7122],{},"date",[16,7124,7126,7127],{"id":7125},"_12-les-métadonnées-utiles-dans-le-head","12. Les métadonnées utiles dans le ",[358,7128,901],{},[21,7130,5386,7131,7133],{},[358,7132,901],{}," n'est pas visible directement, mais elle est très importante.",[350,7135,7137],{"className":705,"code":7136,"language":707,"meta":356,"style":356},"\u003Chead>\n \u003Cmeta charset=\"UTF-8\">\n \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n \u003Ctitle>Mon site\u003C\u002Ftitle>\n \u003Cmeta name=\"description\" content=\"Une page d'exemple en HTML.\">\n\u003C\u002Fhead>\n",[358,7138,7139,7147,7161,7181,7193,7215],{"__ignoreMap":356},[711,7140,7141,7143,7145],{"class":713,"line":714},[711,7142,718],{"class":717},[711,7144,901],{"class":721},[711,7146,729],{"class":717},[711,7148,7149,7151,7153,7155,7157,7159],{"class":713,"line":521},[711,7150,898],{"class":717},[711,7152,912],{"class":721},[711,7154,915],{"class":872},[711,7156,887],{"class":717},[711,7158,920],{"class":890},[711,7160,729],{"class":717},[711,7162,7163,7165,7167,7169,7171,7173,7175,7177,7179],{"class":713,"line":529},[711,7164,898],{"class":717},[711,7166,912],{"class":721},[711,7168,932],{"class":872},[711,7170,887],{"class":717},[711,7172,937],{"class":890},[711,7174,940],{"class":872},[711,7176,887],{"class":717},[711,7178,945],{"class":890},[711,7180,729],{"class":717},[711,7182,7183,7185,7187,7189,7191],{"class":713,"line":906},[711,7184,898],{"class":717},[711,7186,955],{"class":721},[711,7188,6497],{"class":717},[711,7190,955],{"class":721},[711,7192,729],{"class":717},[711,7194,7195,7197,7199,7201,7203,7206,7208,7210,7213],{"class":713,"line":925},[711,7196,898],{"class":717},[711,7198,912],{"class":721},[711,7200,932],{"class":872},[711,7202,887],{"class":717},[711,7204,7205],{"class":890},"\"description\"",[711,7207,940],{"class":872},[711,7209,887],{"class":717},[711,7211,7212],{"class":890},"\"Une page d'exemple en HTML.\"",[711,7214,729],{"class":717},[711,7216,7217,7219,7221],{"class":713,"line":950},[711,7218,1049],{"class":717},[711,7220,901],{"class":721},[711,7222,729],{"class":717},[146,7224,7226],{"id":7225},"meta-charsetutf-8",[358,7227,7228],{},"meta charset=\"UTF-8\"",[21,7230,7231],{},"Cette ligne définit l'encodage des caractères.",[146,7233,7235],{"id":7234},"meta-viewport",[358,7236,7237],{},"meta viewport",[21,7239,7240],{},"Elle aide à rendre la page adaptée aux écrans mobiles.",[146,7242,7243],{"id":955},[358,7244,955],{},[21,7246,7247],{},"Le titre apparaît dans l'onglet du navigateur.",[146,7249,7251],{"id":7250},"description",[358,7252,7250],{},[21,7254,7255],{},"La description aide au référencement et peut être utilisée par les moteurs de recherche.",[16,7257,7259],{"id":7258},"_13-accessibilité-écrire-du-html-pour-tous","13. Accessibilité : écrire du HTML pour tous",[21,7261,7262],{},"Un bon HTML ne doit pas seulement être beau. Il doit être compréhensible pour tous les utilisateurs.",[146,7264,7266],{"id":7265},"quelques-règles-simples","Quelques règles simples",[31,7268,7269,7272,7275,7280,7285,7288],{},[34,7270,7271],{},"utiliser les titres dans le bon ordre ;",[34,7273,7274],{},"écrire des textes de lien clairs ;",[34,7276,7277,7278,1407],{},"remplir les attributs ",[358,7279,5915],{},[34,7281,7282,7283,1407],{},"associer chaque champ de formulaire à un ",[358,7284,6919],{},[34,7286,7287],{},"utiliser des balises sémantiques ;",[34,7289,7290,7291,7293],{},"éviter de tout construire avec des ",[358,7292,1527],{}," inutiles.",[146,7295,7297],{"id":7296},"pourquoi-cest-important","Pourquoi c'est important",[21,7299,7300],{},"L'accessibilité améliore l'expérience pour les lecteurs d'écran, mais aussi pour les moteurs de recherche et pour la maintenance globale du site.",[16,7302,7304],{"id":7303},"_14-construire-une-page-complète","14. Construire une page complète",[21,7306,7307],{},"Voici un exemple de page HTML plus réaliste.",[350,7309,7311],{"className":705,"code":7310,"language":707,"meta":356,"style":356},"\u003C!DOCTYPE html>\n\u003Chtml lang=\"fr\">\n \u003Chead>\n \u003Cmeta charset=\"UTF-8\">\n \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n \u003Ctitle>Mon portfolio\u003C\u002Ftitle>\n \u003Cmeta name=\"description\" content=\"Page de présentation personnelle.\">\n \u003C\u002Fhead>\n \u003Cbody>\n \u003Cheader>\n \u003Ch1>Corneille\u003C\u002Fh1>\n \u003Cnav>\n \u003Ca href=\"#apropos\">À propos\u003C\u002Fa>\n \u003Ca href=\"#projets\">Projets\u003C\u002Fa>\n \u003Ca href=\"#contact\">Contact\u003C\u002Fa>\n \u003C\u002Fnav>\n \u003C\u002Fheader>\n\n \u003Cmain>\n \u003Csection id=\"apropos\">\n \u003Ch2>À propos\u003C\u002Fh2>\n \u003Cp>Je développe des sites web et des applications modernes.\u003C\u002Fp>\n \u003C\u002Fsection>\n\n \u003Csection id=\"projets\">\n \u003Ch2>Projets\u003C\u002Fh2>\n \u003Cul>\n \u003Cli>Portfolio personnel\u003C\u002Fli>\n \u003Cli>Application de gestion\u003C\u002Fli>\n \u003Cli>Blog technique\u003C\u002Fli>\n \u003C\u002Ful>\n \u003C\u002Fsection>\n\n \u003Csection id=\"contact\">\n \u003Ch2>Contact\u003C\u002Fh2>\n \u003Cform>\n \u003Clabel for=\"message\">Message\u003C\u002Flabel>\n \u003Ctextarea id=\"message\" name=\"message\">\u003C\u002Ftextarea>\n \u003Cbutton type=\"submit\">Envoyer\u003C\u002Fbutton>\n \u003C\u002Fform>\n \u003C\u002Fsection>\n \u003C\u002Fmain>\n\n \u003Cfooter>\n \u003Cp>© 2026 Corneille\u003C\u002Fp>\n \u003C\u002Ffooter>\n \u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[358,7312,7313,7323,7337,7345,7359,7379,7391,7412,7420,7428,7436,7449,7457,7476,7494,7512,7521,7529,7533,7541,7556,7568,7581,7589,7593,7608,7620,7628,7642,7655,7668,7677,7685,7689,7703,7715,7723,7743,7768,7786,7794,7802,7810,7814,7822,7835,7843,7851],{"__ignoreMap":356},[711,7314,7315,7317,7319,7321],{"class":713,"line":714},[711,7316,866],{"class":717},[711,7318,869],{"class":721},[711,7320,873],{"class":872},[711,7322,729],{"class":717},[711,7324,7325,7327,7329,7331,7333,7335],{"class":713,"line":521},[711,7326,718],{"class":717},[711,7328,707],{"class":721},[711,7330,884],{"class":872},[711,7332,887],{"class":717},[711,7334,891],{"class":890},[711,7336,729],{"class":717},[711,7338,7339,7341,7343],{"class":713,"line":529},[711,7340,898],{"class":717},[711,7342,901],{"class":721},[711,7344,729],{"class":717},[711,7346,7347,7349,7351,7353,7355,7357],{"class":713,"line":906},[711,7348,909],{"class":717},[711,7350,912],{"class":721},[711,7352,915],{"class":872},[711,7354,887],{"class":717},[711,7356,920],{"class":890},[711,7358,729],{"class":717},[711,7360,7361,7363,7365,7367,7369,7371,7373,7375,7377],{"class":713,"line":925},[711,7362,909],{"class":717},[711,7364,912],{"class":721},[711,7366,932],{"class":872},[711,7368,887],{"class":717},[711,7370,937],{"class":890},[711,7372,940],{"class":872},[711,7374,887],{"class":717},[711,7376,945],{"class":890},[711,7378,729],{"class":717},[711,7380,7381,7383,7385,7387,7389],{"class":713,"line":950},[711,7382,909],{"class":717},[711,7384,955],{"class":721},[711,7386,3678],{"class":717},[711,7388,955],{"class":721},[711,7390,729],{"class":717},[711,7392,7393,7395,7397,7399,7401,7403,7405,7407,7410],{"class":713,"line":965},[711,7394,909],{"class":717},[711,7396,912],{"class":721},[711,7398,932],{"class":872},[711,7400,887],{"class":717},[711,7402,7205],{"class":890},[711,7404,940],{"class":872},[711,7406,887],{"class":717},[711,7408,7409],{"class":890},"\"Page de présentation personnelle.\"",[711,7411,729],{"class":717},[711,7413,7414,7416,7418],{"class":713,"line":991},[711,7415,994],{"class":717},[711,7417,901],{"class":721},[711,7419,729],{"class":717},[711,7421,7422,7424,7426],{"class":713,"line":1001},[711,7423,898],{"class":717},[711,7425,1006],{"class":721},[711,7427,729],{"class":717},[711,7429,7430,7432,7434],{"class":713,"line":1011},[711,7431,909],{"class":717},[711,7433,3653],{"class":721},[711,7435,729],{"class":717},[711,7437,7438,7440,7442,7445,7447],{"class":713,"line":1024},[711,7439,3703],{"class":717},[711,7441,11],{"class":721},[711,7443,7444],{"class":717},">Corneille\u003C\u002F",[711,7446,11],{"class":721},[711,7448,729],{"class":717},[711,7450,7451,7453,7455],{"class":713,"line":556},[711,7452,3703],{"class":717},[711,7454,3689],{"class":721},[711,7456,729],{"class":717},[711,7458,7459,7462,7464,7466,7468,7470,7472,7474],{"class":713,"line":1046},[711,7460,7461],{"class":717}," \u003C",[711,7463,3706],{"class":721},[711,7465,981],{"class":872},[711,7467,887],{"class":717},[711,7469,3713],{"class":890},[711,7471,3716],{"class":717},[711,7473,3706],{"class":721},[711,7475,729],{"class":717},[711,7477,7478,7480,7482,7484,7486,7488,7490,7492],{"class":713,"line":3317},[711,7479,7461],{"class":717},[711,7481,3706],{"class":721},[711,7483,981],{"class":872},[711,7485,887],{"class":717},[711,7487,3733],{"class":890},[711,7489,3736],{"class":717},[711,7491,3706],{"class":721},[711,7493,729],{"class":717},[711,7495,7496,7498,7500,7502,7504,7506,7508,7510],{"class":713,"line":3574},[711,7497,7461],{"class":717},[711,7499,3706],{"class":721},[711,7501,981],{"class":872},[711,7503,887],{"class":717},[711,7505,3753],{"class":890},[711,7507,3756],{"class":717},[711,7509,3706],{"class":721},[711,7511,729],{"class":717},[711,7513,7514,7517,7519],{"class":713,"line":3595},[711,7515,7516],{"class":717}," \u003C\u002F",[711,7518,3689],{"class":721},[711,7520,729],{"class":717},[711,7522,7523,7525,7527],{"class":713,"line":3600},[711,7524,3765],{"class":717},[711,7526,3653],{"class":721},[711,7528,729],{"class":717},[711,7530,7531],{"class":713,"line":3868},[711,7532,1114],{"emptyLinePlaceholder":554},[711,7534,7535,7537,7539],{"class":713,"line":3888},[711,7536,909],{"class":717},[711,7538,3788],{"class":721},[711,7540,729],{"class":717},[711,7542,7543,7545,7547,7549,7551,7554],{"class":713,"line":3908},[711,7544,3703],{"class":717},[711,7546,1594],{"class":721},[711,7548,1597],{"class":872},[711,7550,887],{"class":717},[711,7552,7553],{"class":890},"\"apropos\"",[711,7555,729],{"class":717},[711,7557,7558,7560,7562,7564,7566],{"class":713,"line":3928},[711,7559,7461],{"class":717},[711,7561,16],{"class":721},[711,7563,3716],{"class":717},[711,7565,16],{"class":721},[711,7567,729],{"class":717},[711,7569,7570,7572,7574,7577,7579],{"class":713,"line":3937},[711,7571,7461],{"class":717},[711,7573,21],{"class":721},[711,7575,7576],{"class":717},">Je développe des sites web et des applications modernes.\u003C\u002F",[711,7578,21],{"class":721},[711,7580,729],{"class":717},[711,7582,7583,7585,7587],{"class":713,"line":3946},[711,7584,7516],{"class":717},[711,7586,1594],{"class":721},[711,7588,729],{"class":717},[711,7590,7591],{"class":713,"line":4162},[711,7592,1114],{"emptyLinePlaceholder":554},[711,7594,7595,7597,7599,7601,7603,7606],{"class":713,"line":4167},[711,7596,3703],{"class":717},[711,7598,1594],{"class":721},[711,7600,1597],{"class":872},[711,7602,887],{"class":717},[711,7604,7605],{"class":890},"\"projets\"",[711,7607,729],{"class":717},[711,7609,7610,7612,7614,7616,7618],{"class":713,"line":4172},[711,7611,7461],{"class":717},[711,7613,16],{"class":721},[711,7615,3736],{"class":717},[711,7617,16],{"class":721},[711,7619,729],{"class":717},[711,7621,7622,7624,7626],{"class":713,"line":4180},[711,7623,7461],{"class":717},[711,7625,31],{"class":721},[711,7627,729],{"class":717},[711,7629,7630,7633,7635,7638,7640],{"class":713,"line":4195},[711,7631,7632],{"class":717}," \u003C",[711,7634,34],{"class":721},[711,7636,7637],{"class":717},">Portfolio personnel\u003C\u002F",[711,7639,34],{"class":721},[711,7641,729],{"class":717},[711,7643,7644,7646,7648,7651,7653],{"class":713,"line":4209},[711,7645,7632],{"class":717},[711,7647,34],{"class":721},[711,7649,7650],{"class":717},">Application de gestion\u003C\u002F",[711,7652,34],{"class":721},[711,7654,729],{"class":717},[711,7656,7657,7659,7661,7664,7666],{"class":713,"line":4228},[711,7658,7632],{"class":717},[711,7660,34],{"class":721},[711,7662,7663],{"class":717},">Blog technique\u003C\u002F",[711,7665,34],{"class":721},[711,7667,729],{"class":717},[711,7669,7670,7673,7675],{"class":713,"line":4233},[711,7671,7672],{"class":717}," \u003C\u002F",[711,7674,31],{"class":721},[711,7676,729],{"class":717},[711,7678,7679,7681,7683],{"class":713,"line":4238},[711,7680,7516],{"class":717},[711,7682,1594],{"class":721},[711,7684,729],{"class":717},[711,7686,7687],{"class":713,"line":4245},[711,7688,1114],{"emptyLinePlaceholder":554},[711,7690,7691,7693,7695,7697,7699,7701],{"class":713,"line":4259},[711,7692,3703],{"class":717},[711,7694,1594],{"class":721},[711,7696,1597],{"class":872},[711,7698,887],{"class":717},[711,7700,1602],{"class":890},[711,7702,729],{"class":717},[711,7704,7705,7707,7709,7711,7713],{"class":713,"line":4264},[711,7706,7461],{"class":717},[711,7708,16],{"class":721},[711,7710,3756],{"class":717},[711,7712,16],{"class":721},[711,7714,729],{"class":717},[711,7716,7717,7719,7721],{"class":713,"line":4269},[711,7718,7461],{"class":717},[711,7720,6910],{"class":721},[711,7722,729],{"class":717},[711,7724,7725,7727,7729,7731,7733,7736,7739,7741],{"class":713,"line":4277},[711,7726,7632],{"class":717},[711,7728,6919],{"class":721},[711,7730,6922],{"class":872},[711,7732,887],{"class":717},[711,7734,7735],{"class":890},"\"message\"",[711,7737,7738],{"class":717},">Message\u003C\u002F",[711,7740,6919],{"class":721},[711,7742,729],{"class":717},[711,7744,7745,7747,7750,7752,7754,7756,7758,7760,7762,7764,7766],{"class":713,"line":4288},[711,7746,7632],{"class":717},[711,7748,7749],{"class":721},"textarea",[711,7751,1597],{"class":872},[711,7753,887],{"class":717},[711,7755,7735],{"class":890},[711,7757,932],{"class":872},[711,7759,887],{"class":717},[711,7761,7735],{"class":890},[711,7763,1605],{"class":717},[711,7765,7749],{"class":721},[711,7767,729],{"class":717},[711,7769,7770,7772,7774,7776,7778,7780,7782,7784],{"class":713,"line":4323},[711,7771,7632],{"class":717},[711,7773,3010],{"class":721},[711,7775,6943],{"class":872},[711,7777,887],{"class":717},[711,7779,7029],{"class":890},[711,7781,7032],{"class":717},[711,7783,3010],{"class":721},[711,7785,729],{"class":717},[711,7787,7788,7790,7792],{"class":713,"line":4336},[711,7789,7672],{"class":717},[711,7791,6910],{"class":721},[711,7793,729],{"class":717},[711,7795,7796,7798,7800],{"class":713,"line":4341},[711,7797,7516],{"class":717},[711,7799,1594],{"class":721},[711,7801,729],{"class":717},[711,7803,7804,7806,7808],{"class":713,"line":4346},[711,7805,3765],{"class":717},[711,7807,3788],{"class":721},[711,7809,729],{"class":717},[711,7811,7812],{"class":713,"line":4353},[711,7813,1114],{"emptyLinePlaceholder":554},[711,7815,7816,7818,7820],{"class":713,"line":4364},[711,7817,909],{"class":717},[711,7819,6462],{"class":721},[711,7821,729],{"class":717},[711,7823,7824,7826,7828,7831,7833],{"class":713,"line":4377},[711,7825,3703],{"class":717},[711,7827,21],{"class":721},[711,7829,7830],{"class":717},">© 2026 Corneille\u003C\u002F",[711,7832,21],{"class":721},[711,7834,729],{"class":717},[711,7836,7837,7839,7841],{"class":713,"line":4390},[711,7838,3765],{"class":717},[711,7840,6462],{"class":721},[711,7842,729],{"class":717},[711,7844,7845,7847,7849],{"class":713,"line":4407},[711,7846,994],{"class":717},[711,7848,1006],{"class":721},[711,7850,729],{"class":717},[711,7852,7854,7856,7858],{"class":713,"line":7853},48,[711,7855,1049],{"class":717},[711,7857,707],{"class":721},[711,7859,729],{"class":717},[21,7861,7862],{},"Cette structure montre bien comment organiser une page cohérente : en-tête, contenu principal et pied de page.",[16,7864,7866],{"id":7865},"_15-les-erreurs-fréquentes","15. Les erreurs fréquentes",[146,7868,7870],{"id":7869},"oublier-de-fermer-une-balise","Oublier de fermer une balise",[21,7872,7873],{},"Incorrect :",[350,7875,7877],{"className":705,"code":7876,"language":707,"meta":356,"style":356},"\u003Cp>Un texte\n",[358,7878,7879],{"__ignoreMap":356},[711,7880,7881,7883,7885],{"class":713,"line":714},[711,7882,718],{"class":717},[711,7884,21],{"class":721},[711,7886,7887],{"class":717},">Un texte\n",[21,7889,7890],{},"Correct :",[350,7892,7894],{"className":705,"code":7893,"language":707,"meta":356,"style":356},"\u003Cp>Un texte\u003C\u002Fp>\n",[358,7895,7896],{"__ignoreMap":356},[711,7897,7898,7900,7902,7905,7907],{"class":713,"line":714},[711,7899,718],{"class":717},[711,7901,21],{"class":721},[711,7903,7904],{"class":717},">Un texte\u003C\u002F",[711,7906,21],{"class":721},[711,7908,729],{"class":717},[146,7910,7912],{"id":7911},"mauvais-emboîtement","Mauvais emboîtement",[21,7914,7873],{},[350,7916,7918],{"className":705,"code":7917,"language":707,"meta":356,"style":356},"\u003Cp>\u003Cstrong>Texte\u003C\u002Fp>\u003C\u002Fstrong>\n",[358,7919,7920],{"__ignoreMap":356},[711,7921,7922,7924,7926,7929,7931,7934,7936,7938,7940],{"class":713,"line":714},[711,7923,718],{"class":717},[711,7925,21],{"class":721},[711,7927,7928],{"class":717},">\u003C",[711,7930,260],{"class":721},[711,7932,7933],{"class":717},">Texte\u003C\u002F",[711,7935,21],{"class":721},[711,7937,1605],{"class":717},[711,7939,260],{"class":721},[711,7941,729],{"class":717},[21,7943,7890],{},[350,7945,7947],{"className":705,"code":7946,"language":707,"meta":356,"style":356},"\u003Cp>\u003Cstrong>Texte\u003C\u002Fstrong>\u003C\u002Fp>\n",[358,7948,7949],{"__ignoreMap":356},[711,7950,7951,7953,7955,7957,7959,7961,7963,7965,7967],{"class":713,"line":714},[711,7952,718],{"class":717},[711,7954,21],{"class":721},[711,7956,7928],{"class":717},[711,7958,260],{"class":721},[711,7960,7933],{"class":717},[711,7962,260],{"class":721},[711,7964,1605],{"class":717},[711,7966,21],{"class":721},[711,7968,729],{"class":717},[146,7970,7972],{"id":7971},"utiliser-une-balise-sans-comprendre-son-rôle","Utiliser une balise sans comprendre son rôle",[21,7974,7975],{},"Ne choisissez pas une balise seulement parce qu'elle \"marche\". Choisissez-la parce qu'elle décrit correctement le contenu.",[146,7977,7979,7980,7982],{"id":7978},"oublier-alt-sur-les-images","Oublier ",[358,7981,5915],{}," sur les images",[21,7984,7985,7986,7988],{},"Une image sans ",[358,7987,5915],{}," est souvent une mauvaise pratique, surtout si elle transmet une information utile.",[16,7990,7992],{"id":7991},"_16-bonnes-pratiques-à-retenir","16. Bonnes pratiques à retenir",[31,7994,7995,7998,8000,8006,8009,8012],{},[34,7996,7997],{},"garder une structure simple et logique ;",[34,7999,7271],{},[34,8001,8002,8003,8005],{},"préférer les balises sémantiques aux ",[358,8004,1527],{}," partout ;",[34,8007,8008],{},"écrire des attributs clairs ;",[34,8010,8011],{},"éviter de mélanger contenu, style et comportement ;",[34,8013,8014],{},"valider votre HTML quand c'est possible.",[16,8016,8018],{"id":8017},"_17-résumé","17. Résumé",[21,8020,4522],{},[31,8022,8023,8026,8029,8032,8035,8038,8040],{},[34,8024,8025],{},"ce qu'est HTML ;",[34,8027,8028],{},"la structure de base d'un document ;",[34,8030,8031],{},"les balises essentielles ;",[34,8033,8034],{},"les liens, images, listes, tableaux et formulaires ;",[34,8036,8037],{},"la sémantique ;",[34,8039,6414],{},[34,8041,8042],{},"les bonnes pratiques pour créer une page propre.",[21,8044,8045],{},"HTML est la fondation d'un site web bien construit. Plus votre structure est claire, plus le reste du projet sera facile à maintenir.",[16,8047,4552],{"id":4551},[146,8049,4556],{"id":4555},[21,8051,8052],{},"Créez une page avec un titre principal, un paragraphe d'introduction et un sous-titre.",[146,8054,4563],{"id":4562},[21,8056,8057],{},"Ajoutez une liste de trois éléments présentant vos technologies préférées.",[146,8059,4570],{"id":4569},[21,8061,8062],{},"Créez un lien vers un autre site de votre choix.",[146,8064,4577],{"id":4576},[21,8066,8067,8068,8070],{},"Ajoutez une image avec un attribut ",[358,8069,5915],{}," descriptif.",[146,8072,4584],{"id":4583},[21,8074,8075],{},"Créez un petit formulaire avec un champ nom et un bouton d'envoi.",[16,8077,4591],{"id":4590},[146,8079,4595],{"id":4594},[350,8081,8083],{"className":705,"code":8082,"language":707,"meta":356,"style":356},"\u003Ch1>Bienvenue sur mon site\u003C\u002Fh1>\n\u003Cp>Voici ma première page HTML.\u003C\u002Fp>\n\u003Ch2>Présentation\u003C\u002Fh2>\n",[358,8084,8085,8098,8110],{"__ignoreMap":356},[711,8086,8087,8089,8091,8094,8096],{"class":713,"line":714},[711,8088,718],{"class":717},[711,8090,11],{"class":721},[711,8092,8093],{"class":717},">Bienvenue sur mon site\u003C\u002F",[711,8095,11],{"class":721},[711,8097,729],{"class":717},[711,8099,8100,8102,8104,8106,8108],{"class":713,"line":521},[711,8101,718],{"class":717},[711,8103,21],{"class":721},[711,8105,5327],{"class":717},[711,8107,21],{"class":721},[711,8109,729],{"class":717},[711,8111,8112,8114,8116,8119,8121],{"class":713,"line":529},[711,8113,718],{"class":717},[711,8115,16],{"class":721},[711,8117,8118],{"class":717},">Présentation\u003C\u002F",[711,8120,16],{"class":721},[711,8122,729],{"class":717},[146,8124,4646],{"id":4645},[350,8126,8127],{"className":705,"code":6222,"language":707,"meta":356,"style":356},[358,8128,8129,8137,8149,8161,8173],{"__ignoreMap":356},[711,8130,8131,8133,8135],{"class":713,"line":714},[711,8132,718],{"class":717},[711,8134,31],{"class":721},[711,8136,729],{"class":717},[711,8138,8139,8141,8143,8145,8147],{"class":713,"line":521},[711,8140,898],{"class":717},[711,8142,34],{"class":721},[711,8144,6241],{"class":717},[711,8146,34],{"class":721},[711,8148,729],{"class":717},[711,8150,8151,8153,8155,8157,8159],{"class":713,"line":529},[711,8152,898],{"class":717},[711,8154,34],{"class":721},[711,8156,6254],{"class":717},[711,8158,34],{"class":721},[711,8160,729],{"class":717},[711,8162,8163,8165,8167,8169,8171],{"class":713,"line":906},[711,8164,898],{"class":717},[711,8166,34],{"class":721},[711,8168,6267],{"class":717},[711,8170,34],{"class":721},[711,8172,729],{"class":717},[711,8174,8175,8177,8179],{"class":713,"line":925},[711,8176,1049],{"class":717},[711,8178,31],{"class":721},[711,8180,729],{"class":717},[146,8182,4715],{"id":4714},[350,8184,8186],{"className":705,"code":8185,"language":707,"meta":356,"style":356},"\u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\">Documentation MDN\u003C\u002Fa>\n",[358,8187,8188],{"__ignoreMap":356},[711,8189,8190,8192,8194,8196,8198,8200,8203,8205],{"class":713,"line":714},[711,8191,718],{"class":717},[711,8193,3706],{"class":721},[711,8195,981],{"class":872},[711,8197,887],{"class":717},[711,8199,5743],{"class":890},[711,8201,8202],{"class":717},">Documentation MDN\u003C\u002F",[711,8204,3706],{"class":721},[711,8206,729],{"class":717},[146,8208,4763],{"id":4762},[350,8210,8211],{"className":705,"code":5872,"language":707,"meta":356,"style":356},[358,8212,8213],{"__ignoreMap":356},[711,8214,8215,8217,8219,8221,8223,8225,8227,8229,8231],{"class":713,"line":714},[711,8216,718],{"class":717},[711,8218,5869],{"class":721},[711,8220,5883],{"class":872},[711,8222,887],{"class":717},[711,8224,5888],{"class":890},[711,8226,5891],{"class":872},[711,8228,887],{"class":717},[711,8230,5896],{"class":890},[711,8232,729],{"class":717},[146,8234,4824],{"id":4823},[350,8236,8238],{"className":705,"code":8237,"language":707,"meta":356,"style":356},"\u003Cform>\n \u003Clabel for=\"name\">Nom\u003C\u002Flabel>\n \u003Cinput type=\"text\" id=\"name\" name=\"name\">\n \u003Cbutton type=\"submit\">Envoyer\u003C\u002Fbutton>\n\u003C\u002Fform>\n",[358,8239,8240,8248,8266,8292,8310],{"__ignoreMap":356},[711,8241,8242,8244,8246],{"class":713,"line":714},[711,8243,718],{"class":717},[711,8245,6910],{"class":721},[711,8247,729],{"class":717},[711,8249,8250,8252,8254,8256,8258,8260,8262,8264],{"class":713,"line":521},[711,8251,898],{"class":717},[711,8253,6919],{"class":721},[711,8255,6922],{"class":872},[711,8257,887],{"class":717},[711,8259,6927],{"class":890},[711,8261,6930],{"class":717},[711,8263,6919],{"class":721},[711,8265,729],{"class":717},[711,8267,8268,8270,8272,8274,8276,8278,8280,8282,8284,8286,8288,8290],{"class":713,"line":529},[711,8269,898],{"class":717},[711,8271,3048],{"class":721},[711,8273,6943],{"class":872},[711,8275,887],{"class":717},[711,8277,6948],{"class":890},[711,8279,1597],{"class":872},[711,8281,887],{"class":717},[711,8283,6927],{"class":890},[711,8285,932],{"class":872},[711,8287,887],{"class":717},[711,8289,6927],{"class":890},[711,8291,729],{"class":717},[711,8293,8294,8296,8298,8300,8302,8304,8306,8308],{"class":713,"line":906},[711,8295,898],{"class":717},[711,8297,3010],{"class":721},[711,8299,6943],{"class":872},[711,8301,887],{"class":717},[711,8303,7029],{"class":890},[711,8305,7032],{"class":717},[711,8307,3010],{"class":721},[711,8309,729],{"class":717},[711,8311,8312,8314,8316],{"class":713,"line":925},[711,8313,1049],{"class":717},[711,8315,6910],{"class":721},[711,8317,729],{"class":717},[16,8319,512],{"id":511},[21,8321,8322],{},"Une fois HTML bien compris, la suite logique est d'apprendre CSS pour mettre en forme la page, puis JavaScript pour ajouter de l'interactivité.",[640,8324,8325],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":356,"searchDepth":521,"depth":521,"links":8327},[8328,8329,8330,8336,8339,8344,8347,8352,8357,8368,8373,8378,8381,8387,8394,8398,8399,8406,8407,8408,8415,8422],{"id":18,"depth":521,"text":19},{"id":110,"depth":521,"text":111},{"id":5144,"depth":521,"text":5145,"children":8331},[8332,8333,8334,8335],{"id":5154,"depth":529,"text":5155},{"id":5161,"depth":529,"text":5162},{"id":5168,"depth":529,"text":5169},{"id":5175,"depth":529,"text":5176},{"id":5202,"depth":521,"text":5203,"children":8337},[8338],{"id":5350,"depth":529,"text":5351},{"id":5416,"depth":521,"text":5417,"children":8340},[8341,8342,8343],{"id":5434,"depth":529,"text":5435},{"id":5471,"depth":529,"text":5472},{"id":5511,"depth":529,"text":5512},{"id":5518,"depth":521,"text":5519,"children":8345},[8346],{"id":5578,"depth":529,"text":5579},{"id":5616,"depth":521,"text":5617,"children":8348},[8349,8350,8351],{"id":5623,"depth":529,"text":5624},{"id":5655,"depth":529,"text":5656},{"id":5687,"depth":529,"text":5688},{"id":5721,"depth":521,"text":5722,"children":8353},[8354,8355,8356],{"id":5753,"depth":529,"text":5754},{"id":5781,"depth":529,"text":5782},{"id":5847,"depth":529,"text":5848},{"id":5862,"depth":521,"text":5863,"children":8358},[8359,8360,8362,8363,8365,8366],{"id":5901,"depth":529,"text":5902},{"id":5934,"depth":529,"text":8361},"Comprendre le chemin dans src",{"id":6067,"depth":529,"text":6068},{"id":6144,"depth":529,"text":8364},"Erreurs fréquentes avec src",{"id":1860,"depth":529,"text":1861},{"id":6195,"depth":529,"text":8367},"Pourquoi alt est essentiel",{"id":6211,"depth":521,"text":6212,"children":8369},[8370,8371,8372],{"id":6218,"depth":529,"text":6219},{"id":6282,"depth":529,"text":6283},{"id":6346,"depth":529,"text":6347},{"id":6399,"depth":521,"text":6400,"children":8374},[8375,8376,8377],{"id":6423,"depth":529,"text":6424},{"id":6466,"depth":529,"text":6467},{"id":6690,"depth":529,"text":6691},{"id":6697,"depth":521,"text":6698,"children":8379},[8380],{"id":6887,"depth":529,"text":6888},{"id":6894,"depth":521,"text":6895,"children":8382},[8383,8384,8386],{"id":7047,"depth":529,"text":7048},{"id":7073,"depth":529,"text":8385},"Pourquoi label est important",{"id":7085,"depth":529,"text":7086},{"id":7125,"depth":521,"text":8388,"children":8389},"12. Les métadonnées utiles dans le head",[8390,8391,8392,8393],{"id":7225,"depth":529,"text":7228},{"id":7234,"depth":529,"text":7237},{"id":955,"depth":529,"text":955},{"id":7250,"depth":529,"text":7250},{"id":7258,"depth":521,"text":7259,"children":8395},[8396,8397],{"id":7265,"depth":529,"text":7266},{"id":7296,"depth":529,"text":7297},{"id":7303,"depth":521,"text":7304},{"id":7865,"depth":521,"text":7866,"children":8400},[8401,8402,8403,8404],{"id":7869,"depth":529,"text":7870},{"id":7911,"depth":529,"text":7912},{"id":7971,"depth":529,"text":7972},{"id":7978,"depth":529,"text":8405},"Oublier alt sur les images",{"id":7991,"depth":521,"text":7992},{"id":8017,"depth":521,"text":8018},{"id":4551,"depth":521,"text":4552,"children":8409},[8410,8411,8412,8413,8414],{"id":4555,"depth":529,"text":4556},{"id":4562,"depth":529,"text":4563},{"id":4569,"depth":529,"text":4570},{"id":4576,"depth":529,"text":4577},{"id":4583,"depth":529,"text":4584},{"id":4590,"depth":521,"text":4591,"children":8416},[8417,8418,8419,8420,8421],{"id":4594,"depth":529,"text":4595},{"id":4645,"depth":529,"text":4646},{"id":4714,"depth":529,"text":4715},{"id":4762,"depth":529,"text":4763},{"id":4823,"depth":529,"text":4824},{"id":511,"depth":521,"text":512},"Un tutoriel complet pour comprendre HTML, construire une page web de zéro, utiliser les bonnes balises, organiser le contenu et écrire un document sémantique et accessible.",{},"\u002Fblog\u002Fapprendre-html-complet",{"title":5090,"description":8423},"blog\u002Fapprendre-html-complet",[3633,561,5086],"bnsbJdRAdXGXQE0A1fBnv_9D3MnpfHI0FHyjDcZt6Y4",{"id":8431,"title":8432,"body":8433,"coverImage":550,"description":9890,"extension":552,"meta":9891,"navigation":554,"path":9892,"published":554,"publishedAt":555,"readTime":3595,"seo":9893,"stem":9894,"tags":9895,"__hash__":9899},"blog\u002Fblog\u002Fcomprendre-le-knn.md","Comprendre le KNN : l'algorithme des k plus proches voisins",{"type":8,"value":8434,"toc":9831},[8435,8439,8441,8451,8454,8457,8459,8461,8487,8491,8494,8497,8500,8502,8505,8508,8519,8522,8536,8539,8543,8546,8551,8554,8558,8561,8564,8572,8575,8578,8582,8585,8588,8592,8602,8608,8611,8696,8700,8703,8706,8713,8718,8720,8727,8733,8736,8740,8753,8756,8760,8763,8767,8770,8772,8783,8787,8790,8792,8803,8806,8810,8813,8938,8941,8955,8958,8962,8965,9209,9213,9219,9222,9228,9231,9237,9240,9246,9249,9255,9261,9267,9270,9274,9440,9443,9449,9453,9456,9459,9470,9474,9477,9481,9484,9488,9491,9495,9498,9501,9505,9508,9510,9519,9522,9525,9531,9534,9540,9544,9564,9567,9571,9574,9577,9588,9591,9595,9599,9602,9609,9612,9618,9621,9625,9628,9632,9635,9638,9658,9660,9662,9668,9670,9673,9675,9678,9680,9689,9691,9693,9750,9752,9823,9825,9828],[11,8436,8438],{"id":8437},"comprendre-le-knn","Comprendre le KNN",[16,8440,19],{"id":18},[21,8442,8443,8444,1441,8447,8450],{},"Le KNN, pour ",[260,8445,8446],{},"k-nearest neighbors",[260,8448,8449],{},"k plus proches voisins",", est l'un des algorithmes les plus simples à comprendre en machine learning.",[21,8452,8453],{},"Son idée est très intuitive : pour prédire la classe d'un nouvel élément, on regarde les éléments les plus proches autour de lui, puis on laisse la majorité décider.",[21,8455,8456],{},"Cet algorithme est particulièrement utile pour apprendre les bases du machine learning, car il ne demande pas un modèle compliqué pour commencer.",[16,8458,111],{"id":110},[21,8460,5115],{},[31,8462,8463,8466,8469,8472,8478,8481,8484],{},[34,8464,8465],{},"comprendre le principe du KNN ;",[34,8467,8468],{},"savoir quand utiliser cet algorithme ;",[34,8470,8471],{},"comprendre ce qu'est la distance entre deux points ;",[34,8473,8474,8475,1407],{},"choisir une valeur de ",[358,8476,8477],{},"k",[34,8479,8480],{},"écrire un KNN simple en Python ;",[34,8482,8483],{},"distinguer classification et régression avec KNN ;",[34,8485,8486],{},"éviter les erreurs les plus fréquentes.",[16,8488,8490],{"id":8489},"_1-quest-ce-que-le-knn","1. Qu'est-ce que le KNN ?",[21,8492,8493],{},"Le KNN est un algorithme supervisé.",[21,8495,8496],{},"Cela veut dire qu'on dispose déjà d'exemples connus, avec leurs bonnes réponses.",[21,8498,8499],{},"Ensuite, quand on reçoit un nouvel exemple, on le compare aux exemples déjà connus pour deviner sa classe.",[146,8501,149],{"id":148},[21,8503,8504],{},"Imaginons que vous voulez classer des fruits.",[21,8506,8507],{},"Vous avez déjà des exemples :",[31,8509,8510,8513,8516],{},[34,8511,8512],{},"des pommes ;",[34,8514,8515],{},"des poires ;",[34,8517,8518],{},"des bananes.",[21,8520,8521],{},"Si un nouveau fruit arrive, le KNN regarde les fruits les plus proches de lui selon certains critères :",[31,8523,8524,8527,8530,8533],{},[34,8525,8526],{},"taille ;",[34,8528,8529],{},"poids ;",[34,8531,8532],{},"couleur ;",[34,8534,8535],{},"texture.",[21,8537,8538],{},"Si les voisins les plus proches sont majoritairement des pommes, alors le nouvel objet sera classé comme une pomme.",[16,8540,8542],{"id":8541},"_2-lidée-intuitive","2. L'idée intuitive",[21,8544,8545],{},"Le KNN repose sur une idée très humaine :",[391,8547,8548],{},[21,8549,8550],{},"on compare un nouvel élément aux éléments déjà connus, puis on choisit la catégorie la plus représentée parmi ses voisins les plus proches.",[21,8552,8553],{},"C'est simple, facile à comprendre et très utile pour commencer à apprendre le machine learning.",[16,8555,8557],{"id":8556},"_3-pourquoi-on-parle-de-voisins","3. Pourquoi on parle de \"voisins\" ?",[21,8559,8560],{},"En machine learning, les données peuvent être représentées sous forme de points.",[21,8562,8563],{},"Par exemple, chaque point peut avoir deux caractéristiques :",[31,8565,8566,8569],{},[34,8567,8568],{},"le poids ;",[34,8570,8571],{},"la taille.",[21,8573,8574],{},"Dans ce cas, chaque point devient un élément dans un espace à deux dimensions.",[21,8576,8577],{},"Le KNN cherche les points les plus proches du nouveau point à classer.",[16,8579,8581],{"id":8580},"_4-la-distance-entre-deux-points","4. La distance entre deux points",[21,8583,8584],{},"Pour savoir quels sont les voisins les plus proches, il faut mesurer la distance.",[21,8586,8587],{},"La distance la plus connue est la distance euclidienne.",[146,8589,8591],{"id":8590},"distance-euclidienne","Distance euclidienne",[21,8593,8594,8595,1913,8598,8601],{},"Si on a deux points ",[358,8596,8597],{},"(x1, y1)",[358,8599,8600],{},"(x2, y2)",", la distance euclidienne se calcule ainsi :",[350,8603,8606],{"className":8604,"code":8605,"language":355,"meta":356},[353],"racine((x2 - x1)^2 + (y2 - y1)^2)\n",[358,8607,8605],{"__ignoreMap":356},[21,8609,8610],{},"En Python :",[350,8612,8616],{"className":8613,"code":8614,"language":8615,"meta":356,"style":356},"language-python shiki shiki-themes github-light github-dark","import math\n\ndef euclidean_distance(a, b):\n return math.sqrt((a[0] - b[0]) ** 2 + (a[1] - b[1]) ** 2)\n","python",[358,8617,8618,8626,8630,8641],{"__ignoreMap":356},[711,8619,8620,8623],{"class":713,"line":714},[711,8621,8622],{"class":1370},"import",[711,8624,8625],{"class":717}," math\n",[711,8627,8628],{"class":713,"line":521},[711,8629,1114],{"emptyLinePlaceholder":554},[711,8631,8632,8635,8638],{"class":713,"line":529},[711,8633,8634],{"class":1370},"def",[711,8636,8637],{"class":872}," euclidean_distance",[711,8639,8640],{"class":717},"(a, b):\n",[711,8642,8643,8646,8649,8651,8654,8657,8660,8662,8665,8668,8671,8674,8677,8679,8681,8683,8685,8687,8689,8691,8693],{"class":713,"line":906},[711,8644,8645],{"class":1370}," return",[711,8647,8648],{"class":717}," math.sqrt((a[",[711,8650,1797],{"class":764},[711,8652,8653],{"class":717},"] ",[711,8655,8656],{"class":1370},"-",[711,8658,8659],{"class":717}," b[",[711,8661,1797],{"class":764},[711,8663,8664],{"class":717},"]) ",[711,8666,8667],{"class":1370},"**",[711,8669,8670],{"class":764}," 2",[711,8672,8673],{"class":1370}," +",[711,8675,8676],{"class":717}," (a[",[711,8678,1935],{"class":764},[711,8680,8653],{"class":717},[711,8682,8656],{"class":1370},[711,8684,8659],{"class":717},[711,8686,1935],{"class":764},[711,8688,8664],{"class":717},[711,8690,8667],{"class":1370},[711,8692,8670],{"class":764},[711,8694,8695],{"class":717},")\n",[146,8697,8699],{"id":8698},"pourquoi-la-distance-est-importante","Pourquoi la distance est importante",[21,8701,8702],{},"Sans distance, on ne peut pas dire quels sont les voisins les plus proches.",[21,8704,8705],{},"Le KNN a donc besoin d'une mesure pour comparer les exemples entre eux.",[16,8707,8709,8710,8712],{"id":8708},"_5-que-signifie-k","5. Que signifie ",[358,8711,8477],{}," ?",[21,8714,6057,8715,8717],{},[358,8716,8477],{}," représente le nombre de voisins qu'on prend en compte.",[146,8719,324],{"id":323},[21,8721,8722,8723,8726],{},"Si ",[358,8724,8725],{},"k = 3",", on regarde les 3 points les plus proches.",[21,8728,8722,8729,8732],{},[358,8730,8731],{},"k = 5",", on regarde les 5 points les plus proches.",[21,8734,8735],{},"Ensuite, on choisit la classe qui revient le plus souvent.",[146,8737,8739],{"id":8738},"petit-conseil","Petit conseil",[31,8741,8742,8748],{},[34,8743,8744,8745,8747],{},"un ",[358,8746,8477],{}," trop petit peut rendre l'algorithme sensible au bruit ;",[34,8749,8744,8750,8752],{},[358,8751,8477],{}," trop grand peut diluer l'information locale.",[21,8754,8755],{},"Il faut donc trouver un équilibre.",[16,8757,8759],{"id":8758},"_6-classification-et-régression","6. Classification et régression",[21,8761,8762],{},"Le KNN peut servir à deux choses différentes.",[146,8764,8766],{"id":8765},"knn-pour-la-classification","KNN pour la classification",[21,8768,8769],{},"On prédit une catégorie.",[21,8771,216],{},[31,8773,8774,8777,8780],{},[34,8775,8776],{},"spam ou non spam ;",[34,8778,8779],{},"chien ou chat ;",[34,8781,8782],{},"malade ou sain.",[146,8784,8786],{"id":8785},"knn-pour-la-régression","KNN pour la régression",[21,8788,8789],{},"On prédit une valeur numérique.",[21,8791,216],{},[31,8793,8794,8797,8800],{},[34,8795,8796],{},"le prix d'une maison ;",[34,8798,8799],{},"une note ;",[34,8801,8802],{},"une estimation de température.",[21,8804,8805],{},"Dans ce tutoriel, nous allons surtout nous concentrer sur la classification, car c'est le cas le plus simple pour comprendre le principe.",[16,8807,8809],{"id":8808},"_7-exemple-de-données","7. Exemple de données",[21,8811,8812],{},"Imaginons un petit jeu de données :",[350,8814,8816],{"className":8613,"code":8815,"language":8615,"meta":356,"style":356},"training_data = [\n ((1, 1), \"Rouge\"),\n ((2, 1), \"Rouge\"),\n ((2, 2), \"Rouge\"),\n ((6, 5), \"Bleu\"),\n ((7, 5), \"Bleu\"),\n ((8, 6), \"Bleu\"),\n]\n",[358,8817,8818,8828,8848,8864,8880,8899,8916,8933],{"__ignoreMap":356},[711,8819,8820,8823,8825],{"class":713,"line":714},[711,8821,8822],{"class":717},"training_data ",[711,8824,887],{"class":1370},[711,8826,8827],{"class":717}," [\n",[711,8829,8830,8833,8835,8837,8839,8842,8845],{"class":713,"line":521},[711,8831,8832],{"class":717}," ((",[711,8834,1935],{"class":764},[711,8836,1077],{"class":717},[711,8838,1935],{"class":764},[711,8840,8841],{"class":717},"), ",[711,8843,8844],{"class":890},"\"Rouge\"",[711,8846,8847],{"class":717},"),\n",[711,8849,8850,8852,8854,8856,8858,8860,8862],{"class":713,"line":529},[711,8851,8832],{"class":717},[711,8853,1571],{"class":764},[711,8855,1077],{"class":717},[711,8857,1935],{"class":764},[711,8859,8841],{"class":717},[711,8861,8844],{"class":890},[711,8863,8847],{"class":717},[711,8865,8866,8868,8870,8872,8874,8876,8878],{"class":713,"line":906},[711,8867,8832],{"class":717},[711,8869,1571],{"class":764},[711,8871,1077],{"class":717},[711,8873,1571],{"class":764},[711,8875,8841],{"class":717},[711,8877,8844],{"class":890},[711,8879,8847],{"class":717},[711,8881,8882,8884,8887,8889,8892,8894,8897],{"class":713,"line":925},[711,8883,8832],{"class":717},[711,8885,8886],{"class":764},"6",[711,8888,1077],{"class":717},[711,8890,8891],{"class":764},"5",[711,8893,8841],{"class":717},[711,8895,8896],{"class":890},"\"Bleu\"",[711,8898,8847],{"class":717},[711,8900,8901,8903,8906,8908,8910,8912,8914],{"class":713,"line":950},[711,8902,8832],{"class":717},[711,8904,8905],{"class":764},"7",[711,8907,1077],{"class":717},[711,8909,8891],{"class":764},[711,8911,8841],{"class":717},[711,8913,8896],{"class":890},[711,8915,8847],{"class":717},[711,8917,8918,8920,8923,8925,8927,8929,8931],{"class":713,"line":965},[711,8919,8832],{"class":717},[711,8921,8922],{"class":764},"8",[711,8924,1077],{"class":717},[711,8926,8886],{"class":764},[711,8928,8841],{"class":717},[711,8930,8896],{"class":890},[711,8932,8847],{"class":717},[711,8934,8935],{"class":713,"line":991},[711,8936,8937],{"class":717},"]\n",[21,8939,8940],{},"Chaque point possède :",[31,8942,8943,8946],{},[34,8944,8945],{},"des coordonnées ;",[34,8947,8948,8949,1441,8952,831],{},"une étiquette, ici ",[358,8950,8951],{},"Rouge",[358,8953,8954],{},"Bleu",[21,8956,8957],{},"Si on veut classer un nouveau point, on va comparer sa position aux points déjà connus.",[16,8959,8961],{"id":8960},"_8-implémenter-un-knn-simple-en-python","8. Implémenter un KNN simple en Python",[21,8963,8964],{},"Voici une version complète et facile à lire.",[350,8966,8968],{"className":8613,"code":8967,"language":8615,"meta":356,"style":356},"import math\nfrom collections import Counter\n\n\ndef euclidean_distance(a, b):\n return math.sqrt((a[0] - b[0]) ** 2 + (a[1] - b[1]) ** 2)\n\n\ndef knn_classify(training_data, point, k=3):\n distances = []\n\n for features, label in training_data:\n distance = euclidean_distance(features, point)\n distances.append((distance, label))\n\n distances.sort(key=lambda item: item[0])\n nearest_neighbors = distances[:k]\n\n labels = [label for _, label in nearest_neighbors]\n most_common = Counter(labels).most_common(1)\n\n return most_common[0][0]\n",[358,8969,8970,8976,8989,8993,8997,9005,9049,9053,9057,9074,9084,9088,9102,9112,9117,9121,9140,9150,9154,9175,9189,9193],{"__ignoreMap":356},[711,8971,8972,8974],{"class":713,"line":714},[711,8973,8622],{"class":1370},[711,8975,8625],{"class":717},[711,8977,8978,8981,8984,8986],{"class":713,"line":521},[711,8979,8980],{"class":1370},"from",[711,8982,8983],{"class":717}," collections ",[711,8985,8622],{"class":1370},[711,8987,8988],{"class":717}," Counter\n",[711,8990,8991],{"class":713,"line":529},[711,8992,1114],{"emptyLinePlaceholder":554},[711,8994,8995],{"class":713,"line":906},[711,8996,1114],{"emptyLinePlaceholder":554},[711,8998,8999,9001,9003],{"class":713,"line":925},[711,9000,8634],{"class":1370},[711,9002,8637],{"class":872},[711,9004,8640],{"class":717},[711,9006,9007,9009,9011,9013,9015,9017,9019,9021,9023,9025,9027,9029,9031,9033,9035,9037,9039,9041,9043,9045,9047],{"class":713,"line":950},[711,9008,8645],{"class":1370},[711,9010,8648],{"class":717},[711,9012,1797],{"class":764},[711,9014,8653],{"class":717},[711,9016,8656],{"class":1370},[711,9018,8659],{"class":717},[711,9020,1797],{"class":764},[711,9022,8664],{"class":717},[711,9024,8667],{"class":1370},[711,9026,8670],{"class":764},[711,9028,8673],{"class":1370},[711,9030,8676],{"class":717},[711,9032,1935],{"class":764},[711,9034,8653],{"class":717},[711,9036,8656],{"class":1370},[711,9038,8659],{"class":717},[711,9040,1935],{"class":764},[711,9042,8664],{"class":717},[711,9044,8667],{"class":1370},[711,9046,8670],{"class":764},[711,9048,8695],{"class":717},[711,9050,9051],{"class":713,"line":965},[711,9052,1114],{"emptyLinePlaceholder":554},[711,9054,9055],{"class":713,"line":991},[711,9056,1114],{"emptyLinePlaceholder":554},[711,9058,9059,9061,9064,9067,9069,9071],{"class":713,"line":1001},[711,9060,8634],{"class":1370},[711,9062,9063],{"class":872}," knn_classify",[711,9065,9066],{"class":717},"(training_data, point, k",[711,9068,887],{"class":1370},[711,9070,2831],{"class":764},[711,9072,9073],{"class":717},"):\n",[711,9075,9076,9079,9081],{"class":713,"line":1011},[711,9077,9078],{"class":717}," distances ",[711,9080,887],{"class":1370},[711,9082,9083],{"class":717}," []\n",[711,9085,9086],{"class":713,"line":1024},[711,9087,1114],{"emptyLinePlaceholder":554},[711,9089,9090,9093,9096,9099],{"class":713,"line":556},[711,9091,9092],{"class":1370}," for",[711,9094,9095],{"class":717}," features, label ",[711,9097,9098],{"class":1370},"in",[711,9100,9101],{"class":717}," training_data:\n",[711,9103,9104,9107,9109],{"class":713,"line":1046},[711,9105,9106],{"class":717}," distance ",[711,9108,887],{"class":1370},[711,9110,9111],{"class":717}," euclidean_distance(features, point)\n",[711,9113,9114],{"class":713,"line":3317},[711,9115,9116],{"class":717}," distances.append((distance, label))\n",[711,9118,9119],{"class":713,"line":3574},[711,9120,1114],{"emptyLinePlaceholder":554},[711,9122,9123,9126,9129,9132,9135,9137],{"class":713,"line":3595},[711,9124,9125],{"class":717}," distances.sort(",[711,9127,9128],{"class":3203},"key",[711,9130,9131],{"class":1370},"=lambda",[711,9133,9134],{"class":717}," item: item[",[711,9136,1797],{"class":764},[711,9138,9139],{"class":717},"])\n",[711,9141,9142,9145,9147],{"class":713,"line":3600},[711,9143,9144],{"class":717}," nearest_neighbors ",[711,9146,887],{"class":1370},[711,9148,9149],{"class":717}," distances[:k]\n",[711,9151,9152],{"class":713,"line":3868},[711,9153,1114],{"emptyLinePlaceholder":554},[711,9155,9156,9159,9161,9164,9167,9170,9172],{"class":713,"line":3888},[711,9157,9158],{"class":717}," labels ",[711,9160,887],{"class":1370},[711,9162,9163],{"class":717}," [label ",[711,9165,9166],{"class":1370},"for",[711,9168,9169],{"class":717}," _, label ",[711,9171,9098],{"class":1370},[711,9173,9174],{"class":717}," nearest_neighbors]\n",[711,9176,9177,9180,9182,9185,9187],{"class":713,"line":3908},[711,9178,9179],{"class":717}," most_common ",[711,9181,887],{"class":1370},[711,9183,9184],{"class":717}," Counter(labels).most_common(",[711,9186,1935],{"class":764},[711,9188,8695],{"class":717},[711,9190,9191],{"class":713,"line":3928},[711,9192,1114],{"emptyLinePlaceholder":554},[711,9194,9195,9197,9200,9202,9205,9207],{"class":713,"line":3937},[711,9196,8645],{"class":1370},[711,9198,9199],{"class":717}," most_common[",[711,9201,1797],{"class":764},[711,9203,9204],{"class":717},"][",[711,9206,1797],{"class":764},[711,9208,8937],{"class":717},[146,9210,9212],{"id":9211},"explication-ligne-par-ligne","Explication ligne par ligne",[5353,9214,9216],{"id":9215},"distances",[358,9217,9218],{},"distances = []",[21,9220,9221],{},"On va stocker toutes les distances calculées.",[5353,9223,9225],{"id":9224},"for-features-label-in-training_data",[358,9226,9227],{},"for features, label in training_data",[21,9229,9230],{},"On parcourt chaque exemple connu.",[5353,9232,9234],{"id":9233},"distance-euclidean_distancefeatures-point",[358,9235,9236],{},"distance = euclidean_distance(features, point)",[21,9238,9239],{},"On mesure à quel point l'exemple est proche du nouveau point.",[5353,9241,9243],{"id":9242},"distancessortkeylambda-item-item0",[358,9244,9245],{},"distances.sort(key=lambda item: item[0])",[21,9247,9248],{},"On trie les distances du plus petit au plus grand.",[5353,9250,9252],{"id":9251},"nearest_neighbors-distancesk",[358,9253,9254],{},"nearest_neighbors = distances[:k]",[21,9256,9257,9258,9260],{},"On garde seulement les ",[358,9259,8477],{}," plus proches.",[5353,9262,9264],{"id":9263},"counterlabelsmost_common1",[358,9265,9266],{},"Counter(labels).most_common(1)",[21,9268,9269],{},"On compte quelle classe apparaît le plus souvent.",[16,9271,9273],{"id":9272},"_9-tester-lalgorithme","9. Tester l'algorithme",[350,9275,9277],{"className":8613,"code":9276,"language":8615,"meta":356,"style":356},"training_data = [\n ((1, 1), \"Rouge\"),\n ((2, 1), \"Rouge\"),\n ((2, 2), \"Rouge\"),\n ((6, 5), \"Bleu\"),\n ((7, 5), \"Bleu\"),\n ((8, 6), \"Bleu\"),\n]\n\nprint(knn_classify(training_data, (2, 1.5), k=3))\nprint(knn_classify(training_data, (7, 5.5), k=3))\n",[358,9278,9279,9287,9303,9319,9335,9351,9367,9383,9387,9391,9417],{"__ignoreMap":356},[711,9280,9281,9283,9285],{"class":713,"line":714},[711,9282,8822],{"class":717},[711,9284,887],{"class":1370},[711,9286,8827],{"class":717},[711,9288,9289,9291,9293,9295,9297,9299,9301],{"class":713,"line":521},[711,9290,8832],{"class":717},[711,9292,1935],{"class":764},[711,9294,1077],{"class":717},[711,9296,1935],{"class":764},[711,9298,8841],{"class":717},[711,9300,8844],{"class":890},[711,9302,8847],{"class":717},[711,9304,9305,9307,9309,9311,9313,9315,9317],{"class":713,"line":529},[711,9306,8832],{"class":717},[711,9308,1571],{"class":764},[711,9310,1077],{"class":717},[711,9312,1935],{"class":764},[711,9314,8841],{"class":717},[711,9316,8844],{"class":890},[711,9318,8847],{"class":717},[711,9320,9321,9323,9325,9327,9329,9331,9333],{"class":713,"line":906},[711,9322,8832],{"class":717},[711,9324,1571],{"class":764},[711,9326,1077],{"class":717},[711,9328,1571],{"class":764},[711,9330,8841],{"class":717},[711,9332,8844],{"class":890},[711,9334,8847],{"class":717},[711,9336,9337,9339,9341,9343,9345,9347,9349],{"class":713,"line":925},[711,9338,8832],{"class":717},[711,9340,8886],{"class":764},[711,9342,1077],{"class":717},[711,9344,8891],{"class":764},[711,9346,8841],{"class":717},[711,9348,8896],{"class":890},[711,9350,8847],{"class":717},[711,9352,9353,9355,9357,9359,9361,9363,9365],{"class":713,"line":950},[711,9354,8832],{"class":717},[711,9356,8905],{"class":764},[711,9358,1077],{"class":717},[711,9360,8891],{"class":764},[711,9362,8841],{"class":717},[711,9364,8896],{"class":890},[711,9366,8847],{"class":717},[711,9368,9369,9371,9373,9375,9377,9379,9381],{"class":713,"line":965},[711,9370,8832],{"class":717},[711,9372,8922],{"class":764},[711,9374,1077],{"class":717},[711,9376,8886],{"class":764},[711,9378,8841],{"class":717},[711,9380,8896],{"class":890},[711,9382,8847],{"class":717},[711,9384,9385],{"class":713,"line":991},[711,9386,8937],{"class":717},[711,9388,9389],{"class":713,"line":1001},[711,9390,1114],{"emptyLinePlaceholder":554},[711,9392,9393,9396,9399,9401,9403,9406,9408,9410,9412,9414],{"class":713,"line":1011},[711,9394,9395],{"class":764},"print",[711,9397,9398],{"class":717},"(knn_classify(training_data, (",[711,9400,1571],{"class":764},[711,9402,1077],{"class":717},[711,9404,9405],{"class":764},"1.5",[711,9407,8841],{"class":717},[711,9409,8477],{"class":3203},[711,9411,887],{"class":1370},[711,9413,2831],{"class":764},[711,9415,9416],{"class":717},"))\n",[711,9418,9419,9421,9423,9425,9427,9430,9432,9434,9436,9438],{"class":713,"line":1024},[711,9420,9395],{"class":764},[711,9422,9398],{"class":717},[711,9424,8905],{"class":764},[711,9426,1077],{"class":717},[711,9428,9429],{"class":764},"5.5",[711,9431,8841],{"class":717},[711,9433,8477],{"class":3203},[711,9435,887],{"class":1370},[711,9437,2831],{"class":764},[711,9439,9416],{"class":717},[21,9441,9442],{},"Résultat attendu :",[350,9444,9447],{"className":9445,"code":9446,"language":355,"meta":356},[353],"Rouge\nBleu\n",[358,9448,9446],{"__ignoreMap":356},[16,9450,9452],{"id":9451},"_10-pourquoi-ce-code-est-intéressant","10. Pourquoi ce code est intéressant",[21,9454,9455],{},"Ce code n'est pas optimisé pour de très grandes bases de données, mais il est excellent pour comprendre la logique du KNN.",[21,9457,9458],{},"Il montre clairement :",[31,9460,9461,9464,9467],{},[34,9462,9463],{},"le calcul des distances ;",[34,9465,9466],{},"le tri des voisins ;",[34,9468,9469],{},"le vote majoritaire.",[16,9471,9473],{"id":9472},"_11-les-limites-du-knn","11. Les limites du KNN",[21,9475,9476],{},"Le KNN est simple, mais il a aussi des limites.",[146,9478,9480],{"id":9479},"_1-il-peut-devenir-lent","1. Il peut devenir lent",[21,9482,9483],{},"Pour chaque nouvelle prédiction, il doit comparer le point avec beaucoup d'exemples.",[146,9485,9487],{"id":9486},"_2-il-dépend-des-données","2. Il dépend des données",[21,9489,9490],{},"Si les données d'entraînement sont mal choisies ou bruitées, les prédictions seront moins bonnes.",[146,9492,9494],{"id":9493},"_3-il-dépend-de-léchelle-des-variables","3. Il dépend de l'échelle des variables",[21,9496,9497],{},"Si une variable varie entre 0 et 1 et qu'une autre varie entre 0 et 10 000, la plus grande peut dominer la distance.",[21,9499,9500],{},"C'est pour cela qu'on normalise souvent les données avant d'utiliser KNN.",[16,9502,9504],{"id":9503},"_12-la-normalisation","12. La normalisation",[21,9506,9507],{},"La normalisation consiste à mettre les variables sur une échelle plus comparable.",[21,9509,29],{},[31,9511,9512,9514,9516],{},[34,9513,8529],{},[34,9515,8526],{},[34,9517,9518],{},"âge.",[21,9520,9521],{},"Si l'une des variables a des valeurs très grandes, elle risque d'écraser les autres dans le calcul de distance.",[21,9523,9524],{},"En pratique, c'est une étape très importante.",[16,9526,9528,9529,8712],{"id":9527},"_13-comment-choisir-k","13. Comment choisir ",[358,9530,8477],{},[21,9532,9533],{},"Il n'existe pas une valeur magique.",[21,9535,9536,9537,9539],{},"On choisit souvent ",[358,9538,8477],{}," en testant plusieurs valeurs et en observant les résultats.",[146,9541,9543],{"id":9542},"règles-simples","Règles simples",[31,9545,9546,9552,9558],{},[34,9547,9548,9551],{},[358,9549,9550],{},"k = 1"," est très sensible aux cas isolés ;",[34,9553,9554,9555,9557],{},"un petit ",[358,9556,8477],{}," capture les détails locaux ;",[34,9559,9560,9561,9563],{},"un grand ",[358,9562,8477],{}," lisse davantage les résultats.",[21,9565,9566],{},"En général, on cherche une valeur équilibrée qui fonctionne bien sur les données réelles.",[16,9568,9570],{"id":9569},"_14-variante-avec-dautres-distances","14. Variante avec d'autres distances",[21,9572,9573],{},"La distance euclidienne n'est pas la seule possibilité.",[21,9575,9576],{},"On peut aussi utiliser :",[31,9578,9579,9582,9585],{},[34,9580,9581],{},"la distance de Manhattan ;",[34,9583,9584],{},"la distance de Minkowski ;",[34,9586,9587],{},"d'autres mesures selon le contexte.",[21,9589,9590],{},"Le choix dépend du type de données et du problème à résoudre.",[16,9592,9594],{"id":9593},"_15-erreurs-fréquentes","15. Erreurs fréquentes",[146,9596,9598],{"id":9597},"oublier-de-normaliser-les-données","Oublier de normaliser les données",[21,9600,9601],{},"C'est une erreur très courante avec KNN.",[146,9603,9605,9606,9608],{"id":9604},"choisir-un-k-trop-petit","Choisir un ",[358,9607,8477],{}," trop petit",[21,9610,9611],{},"Le modèle devient trop sensible aux exceptions.",[146,9613,9605,9615,9617],{"id":9614},"choisir-un-k-trop-grand",[358,9616,8477],{}," trop grand",[21,9619,9620],{},"Le modèle perd en précision locale.",[146,9622,9624],{"id":9623},"mélanger-classification-et-régression","Mélanger classification et régression",[21,9626,9627],{},"Le vote majoritaire sert à la classification. Pour la régression, on prend plutôt une moyenne des valeurs voisines.",[16,9629,9631],{"id":9630},"_16-knn-en-résumé","16. KNN en résumé",[21,9633,9634],{},"Le KNN est un algorithme simple, intuitif et très pratique pour apprendre les bases du machine learning.",[21,9636,9637],{},"À retenir :",[31,9639,9640,9643,9646,9652,9655],{},[34,9641,9642],{},"on compare un nouvel élément à ses voisins ;",[34,9644,9645],{},"on utilise une mesure de distance ;",[34,9647,9648,9649,9651],{},"on choisit les ",[358,9650,8477],{}," plus proches ;",[34,9653,9654],{},"on prend la majorité pour classer ;",[34,9656,9657],{},"il faut souvent normaliser les données.",[16,9659,4552],{"id":4551},[146,9661,4556],{"id":4555},[21,9663,9664,9665,831],{},"Implémentez la fonction ",[358,9666,9667],{},"euclidean_distance",[146,9669,4563],{"id":4562},[21,9671,9672],{},"Ajoutez un troisième point à la base d'entraînement et testez une nouvelle prédiction.",[146,9674,4570],{"id":4569},[21,9676,9677],{},"Modifiez le code pour afficher les voisins les plus proches avant de retourner la classe.",[146,9679,4577],{"id":4576},[21,9681,9682,9683,1077,9685,1913,9687,831],{},"Essayez avec ",[358,9684,9550],{},[358,9686,8725],{},[358,9688,8731],{},[16,9690,4591],{"id":4590},[146,9692,4595],{"id":4594},[350,9694,9696],{"className":8613,"code":9695,"language":8615,"meta":356,"style":356},"def euclidean_distance(a, b):\n return math.sqrt((a[0] - b[0]) ** 2 + (a[1] - b[1]) ** 2)\n",[358,9697,9698,9706],{"__ignoreMap":356},[711,9699,9700,9702,9704],{"class":713,"line":714},[711,9701,8634],{"class":1370},[711,9703,8637],{"class":872},[711,9705,8640],{"class":717},[711,9707,9708,9710,9712,9714,9716,9718,9720,9722,9724,9726,9728,9730,9732,9734,9736,9738,9740,9742,9744,9746,9748],{"class":713,"line":521},[711,9709,8645],{"class":1370},[711,9711,8648],{"class":717},[711,9713,1797],{"class":764},[711,9715,8653],{"class":717},[711,9717,8656],{"class":1370},[711,9719,8659],{"class":717},[711,9721,1797],{"class":764},[711,9723,8664],{"class":717},[711,9725,8667],{"class":1370},[711,9727,8670],{"class":764},[711,9729,8673],{"class":1370},[711,9731,8676],{"class":717},[711,9733,1935],{"class":764},[711,9735,8653],{"class":717},[711,9737,8656],{"class":1370},[711,9739,8659],{"class":717},[711,9741,1935],{"class":764},[711,9743,8664],{"class":717},[711,9745,8667],{"class":1370},[711,9747,8670],{"class":764},[711,9749,8695],{"class":717},[146,9751,4763],{"id":4762},[350,9753,9755],{"className":8613,"code":9754,"language":8615,"meta":356,"style":356},"print(knn_classify(training_data, (2, 1.5), k=1))\nprint(knn_classify(training_data, (2, 1.5), k=3))\nprint(knn_classify(training_data, (2, 1.5), k=5))\n",[358,9756,9757,9779,9801],{"__ignoreMap":356},[711,9758,9759,9761,9763,9765,9767,9769,9771,9773,9775,9777],{"class":713,"line":714},[711,9760,9395],{"class":764},[711,9762,9398],{"class":717},[711,9764,1571],{"class":764},[711,9766,1077],{"class":717},[711,9768,9405],{"class":764},[711,9770,8841],{"class":717},[711,9772,8477],{"class":3203},[711,9774,887],{"class":1370},[711,9776,1935],{"class":764},[711,9778,9416],{"class":717},[711,9780,9781,9783,9785,9787,9789,9791,9793,9795,9797,9799],{"class":713,"line":521},[711,9782,9395],{"class":764},[711,9784,9398],{"class":717},[711,9786,1571],{"class":764},[711,9788,1077],{"class":717},[711,9790,9405],{"class":764},[711,9792,8841],{"class":717},[711,9794,8477],{"class":3203},[711,9796,887],{"class":1370},[711,9798,2831],{"class":764},[711,9800,9416],{"class":717},[711,9802,9803,9805,9807,9809,9811,9813,9815,9817,9819,9821],{"class":713,"line":529},[711,9804,9395],{"class":764},[711,9806,9398],{"class":717},[711,9808,1571],{"class":764},[711,9810,1077],{"class":717},[711,9812,9405],{"class":764},[711,9814,8841],{"class":717},[711,9816,8477],{"class":3203},[711,9818,887],{"class":1370},[711,9820,8891],{"class":764},[711,9822,9416],{"class":717},[16,9824,512],{"id":511},[21,9826,9827],{},"Une fois le KNN compris, vous pouvez explorer d'autres algorithmes de machine learning plus avancés, comme les arbres de décision ou la régression logistique.",[640,9829,9830],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":356,"searchDepth":521,"depth":521,"links":9832},[9833,9834,9835,9838,9839,9840,9844,9849,9853,9854,9857,9858,9859,9864,9865,9869,9870,9878,9879,9885,9889],{"id":18,"depth":521,"text":19},{"id":110,"depth":521,"text":111},{"id":8489,"depth":521,"text":8490,"children":9836},[9837],{"id":148,"depth":529,"text":149},{"id":8541,"depth":521,"text":8542},{"id":8556,"depth":521,"text":8557},{"id":8580,"depth":521,"text":8581,"children":9841},[9842,9843],{"id":8590,"depth":529,"text":8591},{"id":8698,"depth":529,"text":8699},{"id":8708,"depth":521,"text":9845,"children":9846},"5. Que signifie k ?",[9847,9848],{"id":323,"depth":529,"text":324},{"id":8738,"depth":529,"text":8739},{"id":8758,"depth":521,"text":8759,"children":9850},[9851,9852],{"id":8765,"depth":529,"text":8766},{"id":8785,"depth":529,"text":8786},{"id":8808,"depth":521,"text":8809},{"id":8960,"depth":521,"text":8961,"children":9855},[9856],{"id":9211,"depth":529,"text":9212},{"id":9272,"depth":521,"text":9273},{"id":9451,"depth":521,"text":9452},{"id":9472,"depth":521,"text":9473,"children":9860},[9861,9862,9863],{"id":9479,"depth":529,"text":9480},{"id":9486,"depth":529,"text":9487},{"id":9493,"depth":529,"text":9494},{"id":9503,"depth":521,"text":9504},{"id":9527,"depth":521,"text":9866,"children":9867},"13. Comment choisir k ?",[9868],{"id":9542,"depth":529,"text":9543},{"id":9569,"depth":521,"text":9570},{"id":9593,"depth":521,"text":9594,"children":9871},[9872,9873,9875,9877],{"id":9597,"depth":529,"text":9598},{"id":9604,"depth":529,"text":9874},"Choisir un k trop petit",{"id":9614,"depth":529,"text":9876},"Choisir un k trop grand",{"id":9623,"depth":529,"text":9624},{"id":9630,"depth":521,"text":9631},{"id":4551,"depth":521,"text":4552,"children":9880},[9881,9882,9883,9884],{"id":4555,"depth":529,"text":4556},{"id":4562,"depth":529,"text":4563},{"id":4569,"depth":529,"text":4570},{"id":4576,"depth":529,"text":4577},{"id":4590,"depth":521,"text":4591,"children":9886},[9887,9888],{"id":4594,"depth":529,"text":4595},{"id":4762,"depth":529,"text":4763},{"id":511,"depth":521,"text":512},"Un tutoriel simple et complet pour comprendre le KNN, savoir comment il fonctionne, comment choisir k et comment l'implémenter en Python.",{},"\u002Fblog\u002Fcomprendre-le-knn",{"title":8432,"description":9890},"blog\u002Fcomprendre-le-knn",[9896,9897,9898,560],"Machine Learning","KNN","Python","vAHUyz3_uYq2wlAqspxv7WlNfZU37pRjOfrD1bOGNbY",{"id":9901,"title":9902,"body":9903,"coverImage":550,"description":12884,"extension":552,"meta":12885,"navigation":554,"path":12886,"published":554,"publishedAt":555,"readTime":3868,"seo":12887,"stem":12888,"tags":12889,"__hash__":12894},"blog\u002Fblog\u002Fcreer-mini-compilateur-ply.md","Créer un mini compilateur avec PLY en Python",{"type":8,"value":9904,"toc":12839},[9905,9908,9910,9913,9920,9934,9937,9956,9958,9960,9983,9987,9990,9993,10004,10011,10015,10018,10044,10047,10051,10054,10058,10064,10068,10071,10089,10092,10103,10106,10123,10127,10144,10148,10151,10154,10187,10191,10197,10200,10204,10210,10213,10219,10222,10254,10258,10261,10727,10729,10762,10766,10769,10771,10791,10795,10798,11417,11421,11426,11432,11437,11440,11445,11448,11453,11456,11461,11464,11468,11473,12602,12606,12609,12614,12616,12622,12626,12632,12635,12641,12645,12648,12650,12656,12662,12669,12673,12676,12680,12686,12690,12697,12699,12705,12708,12714,12717,12721,12724,12749,12753,12755,12780,12782,12784,12787,12789,12792,12794,12800,12802,12805,12807,12809,12816,12818,12824,12826,12831,12833,12836],[11,9906,9902],{"id":9907},"créer-un-mini-compilateur-avec-ply-en-python",[16,9909,19],{"id":18},[21,9911,9912],{},"Créer un compilateur peut sembler réservé aux langages de bas niveau ou aux personnes très avancées. En réalité, on peut déjà comprendre les bases d'un compilateur en construisant un mini projet simple avec Python et PLY.",[21,9914,9915,9916,9919],{},"PLY signifie ",[260,9917,9918],{},"Python Lex-Yacc",". C'est une bibliothèque qui permet de faire deux choses essentielles :",[31,9921,9922,9928],{},[34,9923,9924,9925,1407],{},"découper une chaîne de caractères en tokens avec ",[358,9926,9927],{},"lex",[34,9929,9930,9931,831],{},"analyser la structure grammaticale avec ",[358,9932,9933],{},"yacc",[21,9935,9936],{},"L'idée de ce tutoriel est de construire un petit compilateur pour un langage très simple, capable de comprendre :",[31,9938,9939,9942,9945,9948,9951],{},[34,9940,9941],{},"des nombres ;",[34,9943,9944],{},"des opérations arithmétiques ;",[34,9946,9947],{},"des variables ;",[34,9949,9950],{},"des affectations ;",[34,9952,9953,9954,831],{},"des affichages avec ",[358,9955,9395],{},[16,9957,111],{"id":110},[21,9959,5115],{},[31,9961,9962,9965,9968,9971,9974,9977,9980],{},[34,9963,9964],{},"comprendre le rôle d'un compilateur ;",[34,9966,9967],{},"distinguer l'analyse lexicale et l'analyse syntaxique ;",[34,9969,9970],{},"installer PLY ;",[34,9972,9973],{},"écrire les tokens de base ;",[34,9975,9976],{},"définir une grammaire simple ;",[34,9978,9979],{},"construire un mini interpréteur ;",[34,9981,9982],{},"tester votre mini langage avec plusieurs exemples.",[16,9984,9986],{"id":9985},"_1-quest-ce-quun-compilateur","1. Qu'est-ce qu'un compilateur ?",[21,9988,9989],{},"Un compilateur est un programme qui transforme un code source en une autre forme exploitable.",[21,9991,9992],{},"Selon le contexte, il peut :",[31,9994,9995,9998,10001],{},[34,9996,9997],{},"produire du code machine ;",[34,9999,10000],{},"produire un langage intermédiaire ;",[34,10002,10003],{},"exécuter directement une structure interne comme un arbre syntaxique.",[21,10005,10006,10007,10010],{},"Dans ce tutoriel, nous allons construire un ",[260,10008,10009],{},"mini compilateur de type interpréteur",". Cela veut dire que notre programme va analyser une petite syntaxe, puis calculer directement le résultat.",[16,10012,10014],{"id":10013},"_2-les-grandes-étapes-du-traitement","2. Les grandes étapes du traitement",[21,10016,10017],{},"Un compilateur suit souvent plusieurs étapes :",[60,10019,10020,10026,10032,10038],{},[34,10021,10022,10025],{},[260,10023,10024],{},"Analyse lexicale"," : on découpe le texte en tokens.",[34,10027,10028,10031],{},[260,10029,10030],{},"Analyse syntaxique"," : on vérifie que les tokens forment une structure valide.",[34,10033,10034,10037],{},[260,10035,10036],{},"Construction d'une représentation interne"," : souvent un arbre syntaxique.",[34,10039,10040,10043],{},[260,10041,10042],{},"Exécution ou génération de code"," : on produit un résultat.",[21,10045,10046],{},"PLY aide précisément à gérer les deux premières étapes.",[16,10048,10050],{"id":10049},"_3-préparer-le-projet","3. Préparer le projet",[21,10052,10053],{},"Avant d'écrire le code, il faut préparer le dossier du projet.",[146,10055,10057],{"id":10056},"structure-conseillée","Structure conseillée",[350,10059,10062],{"className":10060,"code":10061,"language":355,"meta":356},[353],"mini-compilateur\u002F\n├── main.py\n└── requirements.txt\n",[358,10063,10061],{"__ignoreMap":356},[146,10065,10067],{"id":10066},"installation-de-ply","Installation de PLY",[21,10069,10070],{},"Dans votre terminal :",[350,10072,10076],{"className":10073,"code":10074,"language":10075,"meta":356,"style":356},"language-bash shiki shiki-themes github-light github-dark","pip install ply\n","bash",[358,10077,10078],{"__ignoreMap":356},[711,10079,10080,10083,10086],{"class":713,"line":714},[711,10081,10082],{"class":872},"pip",[711,10084,10085],{"class":890}," install",[711,10087,10088],{"class":890}," ply\n",[21,10090,10091],{},"Ou, si vous préférez utiliser un fichier de dépendances :",[350,10093,10097],{"className":10094,"code":10095,"language":10096,"meta":356,"style":356},"language-txt shiki shiki-themes github-light github-dark","ply\n","txt",[358,10098,10099],{"__ignoreMap":356},[711,10100,10101],{"class":713,"line":714},[711,10102,10095],{},[21,10104,10105],{},"Puis :",[350,10107,10109],{"className":10073,"code":10108,"language":10075,"meta":356,"style":356},"pip install -r requirements.txt\n",[358,10110,10111],{"__ignoreMap":356},[711,10112,10113,10115,10117,10120],{"class":713,"line":714},[711,10114,10082],{"class":872},[711,10116,10085],{"class":890},[711,10118,10119],{"class":764}," -r",[711,10121,10122],{"class":890}," requirements.txt\n",[146,10124,10126],{"id":10125},"où-mettre-le-code","Où mettre le code ?",[31,10128,10129,10135,10141],{},[34,10130,10131,10132,1407],{},"le code Python principal dans ",[358,10133,10134],{},"main.py",[34,10136,10137,10138,1407],{},"les dépendances dans ",[358,10139,10140],{},"requirements.txt",[34,10142,10143],{},"les exemples d'entrée directement dans le fichier Python pour commencer.",[16,10145,10147],{"id":10146},"_4-définir-le-mini-langage","4. Définir le mini langage",[21,10149,10150],{},"Pour apprendre clairement, nous allons partir d'un langage très simple.",[21,10152,10153],{},"Il supportera :",[31,10155,10156,10159,10171,10174,10177,10182],{},[34,10157,10158],{},"les nombres entiers ;",[34,10160,10161,10162,1077,10165,1077,10167,1077,10169,1407],{},"les opérations ",[358,10163,10164],{},"+",[358,10166,8656],{},[358,10168,2181],{},[358,10170,6140],{},[34,10172,10173],{},"les parenthèses ;",[34,10175,10176],{},"les variables ;",[34,10178,10179,10180,1407],{},"les affectations avec ",[358,10181,887],{},[34,10183,10184,10185,831],{},"l'instruction ",[358,10186,9395],{},[146,10188,10190],{"id":10189},"exemples-valides","Exemples valides",[350,10192,10195],{"className":10193,"code":10194,"language":355,"meta":356},[353],"a = 10\nb = 5\nprint(a + b * 2)\n",[358,10196,10194],{"__ignoreMap":356},[21,10198,10199],{},"Le but est de comprendre comment transformer ce texte en calcul réel.",[16,10201,10203],{"id":10202},"_5-lanalyse-lexicale-avec-ply-lex","5. L'analyse lexicale avec PLY Lex",[21,10205,10206,10207,831],{},"L'analyse lexicale consiste à découper le texte en morceaux compréhensibles appelés ",[260,10208,10209],{},"tokens",[21,10211,10212],{},"Par exemple, cette ligne :",[350,10214,10217],{"className":10215,"code":10216,"language":355,"meta":356},[353],"print(a + 3)\n",[358,10218,10216],{"__ignoreMap":356},[21,10220,10221],{},"peut être découpée en :",[31,10223,10224,10229,10234,10239,10244,10249],{},[34,10225,10226],{},[358,10227,10228],{},"PRINT",[34,10230,10231],{},[358,10232,10233],{},"LPAREN",[34,10235,10236],{},[358,10237,10238],{},"ID",[34,10240,10241],{},[358,10242,10243],{},"PLUS",[34,10245,10246],{},[358,10247,10248],{},"NUMBER",[34,10250,10251],{},[358,10252,10253],{},"RPAREN",[146,10255,10257],{"id":10256},"exemple-de-tokens","Exemple de tokens",[21,10259,10260],{},"Voici une première base pour notre analyse lexicale :",[350,10262,10264],{"className":8613,"code":10263,"language":8615,"meta":356,"style":356},"import ply.lex as lex\n\nreserved = {\n 'print': 'PRINT',\n}\n\ntokens = [\n 'ID',\n 'NUMBER',\n 'PLUS',\n 'MINUS',\n 'TIMES',\n 'DIVIDE',\n 'LPAREN',\n 'RPAREN',\n 'EQUALS',\n] + list(reserved.values())\n\n# Tokens simples\nt_PLUS = r'\\+'\nt_MINUS = r'-'\nt_TIMES = r'\\*'\nt_DIVIDE = r'\u002F'\nt_LPAREN = r'\\('\nt_RPAREN = r'\\)'\nt_EQUALS = r'='\n\nt_ignore = ' \\t'\n\ndef t_NUMBER(t):\n r'\\d+'\n t.value = int(t.value)\n return t\n\ndef t_ID(t):\n r'[a-zA-Z_][a-zA-Z0-9_]*'\n t.type = reserved.get(t.value, 'ID')\n return t\n\ndef t_newline(t):\n r'\\n+'\n t.lexer.lineno += len(t.value)\n\ndef t_error(t):\n print(f\"Caractère illégal : {t.value[0]!r}\")\n t.lexer.skip(1)\n\nlexer = lex.lex()\n",[358,10265,10266,10279,10283,10292,10305,10309,10313,10322,10329,10336,10343,10350,10357,10364,10371,10378,10385,10397,10401,10407,10427,10443,10459,10474,10490,10506,10521,10525,10540,10544,10554,10562,10575,10582,10586,10595,10602,10617,10623,10627,10636,10643,10656,10660,10669,10704,10713,10717],{"__ignoreMap":356},[711,10267,10268,10270,10273,10276],{"class":713,"line":714},[711,10269,8622],{"class":1370},[711,10271,10272],{"class":717}," ply.lex ",[711,10274,10275],{"class":1370},"as",[711,10277,10278],{"class":717}," lex\n",[711,10280,10281],{"class":713,"line":521},[711,10282,1114],{"emptyLinePlaceholder":554},[711,10284,10285,10288,10290],{"class":713,"line":529},[711,10286,10287],{"class":717},"reserved ",[711,10289,887],{"class":1370},[711,10291,759],{"class":717},[711,10293,10294,10297,10299,10302],{"class":713,"line":906},[711,10295,10296],{"class":890}," 'print'",[711,10298,768],{"class":717},[711,10300,10301],{"class":890},"'PRINT'",[711,10303,10304],{"class":717},",\n",[711,10306,10307],{"class":713,"line":925},[711,10308,779],{"class":717},[711,10310,10311],{"class":713,"line":950},[711,10312,1114],{"emptyLinePlaceholder":554},[711,10314,10315,10318,10320],{"class":713,"line":965},[711,10316,10317],{"class":717},"tokens ",[711,10319,887],{"class":1370},[711,10321,8827],{"class":717},[711,10323,10324,10327],{"class":713,"line":991},[711,10325,10326],{"class":890}," 'ID'",[711,10328,10304],{"class":717},[711,10330,10331,10334],{"class":713,"line":1001},[711,10332,10333],{"class":890}," 'NUMBER'",[711,10335,10304],{"class":717},[711,10337,10338,10341],{"class":713,"line":1011},[711,10339,10340],{"class":890}," 'PLUS'",[711,10342,10304],{"class":717},[711,10344,10345,10348],{"class":713,"line":1024},[711,10346,10347],{"class":890}," 'MINUS'",[711,10349,10304],{"class":717},[711,10351,10352,10355],{"class":713,"line":556},[711,10353,10354],{"class":890}," 'TIMES'",[711,10356,10304],{"class":717},[711,10358,10359,10362],{"class":713,"line":1046},[711,10360,10361],{"class":890}," 'DIVIDE'",[711,10363,10304],{"class":717},[711,10365,10366,10369],{"class":713,"line":3317},[711,10367,10368],{"class":890}," 'LPAREN'",[711,10370,10304],{"class":717},[711,10372,10373,10376],{"class":713,"line":3574},[711,10374,10375],{"class":890}," 'RPAREN'",[711,10377,10304],{"class":717},[711,10379,10380,10383],{"class":713,"line":3595},[711,10381,10382],{"class":890}," 'EQUALS'",[711,10384,10304],{"class":717},[711,10386,10387,10389,10391,10394],{"class":713,"line":3600},[711,10388,8653],{"class":717},[711,10390,10164],{"class":1370},[711,10392,10393],{"class":764}," list",[711,10395,10396],{"class":717},"(reserved.values())\n",[711,10398,10399],{"class":713,"line":3868},[711,10400,1114],{"emptyLinePlaceholder":554},[711,10402,10403],{"class":713,"line":3888},[711,10404,10406],{"class":10405},"sJ8bj","# Tokens simples\n",[711,10408,10409,10412,10414,10417,10420,10424],{"class":713,"line":3908},[711,10410,10411],{"class":717},"t_PLUS ",[711,10413,887],{"class":1370},[711,10415,10416],{"class":1370}," r",[711,10418,10419],{"class":890},"'",[711,10421,10423],{"class":10422},"snhLl","\\+",[711,10425,10426],{"class":890},"'\n",[711,10428,10429,10432,10434,10436,10438,10441],{"class":713,"line":3928},[711,10430,10431],{"class":717},"t_MINUS ",[711,10433,887],{"class":1370},[711,10435,10416],{"class":1370},[711,10437,10419],{"class":890},[711,10439,8656],{"class":10440},"sA_wV",[711,10442,10426],{"class":890},[711,10444,10445,10448,10450,10452,10454,10457],{"class":713,"line":3937},[711,10446,10447],{"class":717},"t_TIMES ",[711,10449,887],{"class":1370},[711,10451,10416],{"class":1370},[711,10453,10419],{"class":890},[711,10455,10456],{"class":10422},"\\*",[711,10458,10426],{"class":890},[711,10460,10461,10464,10466,10468,10470,10472],{"class":713,"line":3946},[711,10462,10463],{"class":717},"t_DIVIDE ",[711,10465,887],{"class":1370},[711,10467,10416],{"class":1370},[711,10469,10419],{"class":890},[711,10471,6140],{"class":10440},[711,10473,10426],{"class":890},[711,10475,10476,10479,10481,10483,10485,10488],{"class":713,"line":4162},[711,10477,10478],{"class":717},"t_LPAREN ",[711,10480,887],{"class":1370},[711,10482,10416],{"class":1370},[711,10484,10419],{"class":890},[711,10486,10487],{"class":10422},"\\(",[711,10489,10426],{"class":890},[711,10491,10492,10495,10497,10499,10501,10504],{"class":713,"line":4167},[711,10493,10494],{"class":717},"t_RPAREN ",[711,10496,887],{"class":1370},[711,10498,10416],{"class":1370},[711,10500,10419],{"class":890},[711,10502,10503],{"class":10422},"\\)",[711,10505,10426],{"class":890},[711,10507,10508,10511,10513,10515,10517,10519],{"class":713,"line":4172},[711,10509,10510],{"class":717},"t_EQUALS ",[711,10512,887],{"class":1370},[711,10514,10416],{"class":1370},[711,10516,10419],{"class":890},[711,10518,887],{"class":10440},[711,10520,10426],{"class":890},[711,10522,10523],{"class":713,"line":4180},[711,10524,1114],{"emptyLinePlaceholder":554},[711,10526,10527,10530,10532,10535,10538],{"class":713,"line":4195},[711,10528,10529],{"class":717},"t_ignore ",[711,10531,887],{"class":1370},[711,10533,10534],{"class":890}," ' ",[711,10536,10537],{"class":764},"\\t",[711,10539,10426],{"class":890},[711,10541,10542],{"class":713,"line":4209},[711,10543,1114],{"emptyLinePlaceholder":554},[711,10545,10546,10548,10551],{"class":713,"line":4228},[711,10547,8634],{"class":1370},[711,10549,10550],{"class":872}," t_NUMBER",[711,10552,10553],{"class":717},"(t):\n",[711,10555,10556,10559],{"class":713,"line":4233},[711,10557,10558],{"class":1370}," r",[711,10560,10561],{"class":890},"'\\d+'\n",[711,10563,10564,10567,10569,10572],{"class":713,"line":4238},[711,10565,10566],{"class":717}," t.value ",[711,10568,887],{"class":1370},[711,10570,10571],{"class":764}," int",[711,10573,10574],{"class":717},"(t.value)\n",[711,10576,10577,10579],{"class":713,"line":4245},[711,10578,8645],{"class":1370},[711,10580,10581],{"class":717}," t\n",[711,10583,10584],{"class":713,"line":4259},[711,10585,1114],{"emptyLinePlaceholder":554},[711,10587,10588,10590,10593],{"class":713,"line":4264},[711,10589,8634],{"class":1370},[711,10591,10592],{"class":872}," t_ID",[711,10594,10553],{"class":717},[711,10596,10597,10599],{"class":713,"line":4269},[711,10598,10558],{"class":1370},[711,10600,10601],{"class":890},"'[a-zA-Z_][a-zA-Z0-9_]*'\n",[711,10603,10604,10607,10609,10612,10615],{"class":713,"line":4277},[711,10605,10606],{"class":717}," t.type ",[711,10608,887],{"class":1370},[711,10610,10611],{"class":717}," reserved.get(t.value, ",[711,10613,10614],{"class":890},"'ID'",[711,10616,8695],{"class":717},[711,10618,10619,10621],{"class":713,"line":4288},[711,10620,8645],{"class":1370},[711,10622,10581],{"class":717},[711,10624,10625],{"class":713,"line":4323},[711,10626,1114],{"emptyLinePlaceholder":554},[711,10628,10629,10631,10634],{"class":713,"line":4336},[711,10630,8634],{"class":1370},[711,10632,10633],{"class":872}," t_newline",[711,10635,10553],{"class":717},[711,10637,10638,10640],{"class":713,"line":4341},[711,10639,10558],{"class":1370},[711,10641,10642],{"class":890},"'\\n+'\n",[711,10644,10645,10648,10651,10654],{"class":713,"line":4346},[711,10646,10647],{"class":717}," t.lexer.lineno ",[711,10649,10650],{"class":1370},"+=",[711,10652,10653],{"class":764}," len",[711,10655,10574],{"class":717},[711,10657,10658],{"class":713,"line":4353},[711,10659,1114],{"emptyLinePlaceholder":554},[711,10661,10662,10664,10667],{"class":713,"line":4364},[711,10663,8634],{"class":1370},[711,10665,10666],{"class":872}," t_error",[711,10668,10553],{"class":717},[711,10670,10671,10674,10676,10679,10682,10685,10688,10690,10693,10696,10699,10702],{"class":713,"line":4377},[711,10672,10673],{"class":764}," print",[711,10675,1789],{"class":717},[711,10677,10678],{"class":1370},"f",[711,10680,10681],{"class":890},"\"Caractère illégal : ",[711,10683,10684],{"class":764},"{",[711,10686,10687],{"class":717},"t.value[",[711,10689,1797],{"class":764},[711,10691,10692],{"class":717},"]",[711,10694,10695],{"class":1370},"!r",[711,10697,10698],{"class":764},"}",[711,10700,10701],{"class":890},"\"",[711,10703,8695],{"class":717},[711,10705,10706,10709,10711],{"class":713,"line":4390},[711,10707,10708],{"class":717}," t.lexer.skip(",[711,10710,1935],{"class":764},[711,10712,8695],{"class":717},[711,10714,10715],{"class":713,"line":4407},[711,10716,1114],{"emptyLinePlaceholder":554},[711,10718,10719,10722,10724],{"class":713,"line":7853},[711,10720,10721],{"class":717},"lexer ",[711,10723,887],{"class":1370},[711,10725,10726],{"class":717}," lex.lex()\n",[146,10728,2860],{"id":2859},[31,10730,10731,10736,10742,10748,10756],{},[34,10732,10733,10735],{},[358,10734,10209],{}," contient la liste des types reconnus ;",[34,10737,10738,10741],{},[358,10739,10740],{},"t_NUMBER"," convertit les nombres en entiers ;",[34,10743,10744,10747],{},[358,10745,10746],{},"t_ID"," reconnaît les noms de variables ;",[34,10749,10750,10753,10754,1407],{},[358,10751,10752],{},"reserved"," permet de distinguer les mots-clés comme ",[358,10755,9395],{},[34,10757,10758,10761],{},[358,10759,10760],{},"t_error"," gère les erreurs lexicales.",[16,10763,10765],{"id":10764},"_6-lanalyse-syntaxique-avec-ply-yacc","6. L'analyse syntaxique avec PLY Yacc",[21,10767,10768],{},"L'analyse syntaxique vérifie que les tokens sont assemblés dans le bon ordre.",[21,10770,29],{},[31,10772,10773,10779,10785],{},[34,10774,10775,10778],{},[358,10776,10777],{},"a = 3"," est valide ;",[34,10780,10781,10784],{},[358,10782,10783],{},"= a 3"," ne l'est pas ;",[34,10786,10787,10790],{},[358,10788,10789],{},"print(a + 2)"," suit une structure bien définie.",[146,10792,10794],{"id":10793},"construire-la-grammaire","Construire la grammaire",[21,10796,10797],{},"Nous allons maintenant décrire les règles de notre mini langage.",[350,10799,10801],{"className":8613,"code":10800,"language":8615,"meta":356,"style":356},"import ply.yacc as yacc\n\n# ... tokens et lexer déjà définis ...\n\nprecedence = (\n ('left', 'PLUS', 'MINUS'),\n ('left', 'TIMES', 'DIVIDE'),\n)\n\nnames = {}\n\ndef p_statement_assign(p):\n 'statement : ID EQUALS expression'\n names[p[1]] = p[3]\n p[0] = p[3]\n\n\ndef p_statement_print(p):\n 'statement : PRINT LPAREN expression RPAREN'\n print(p[3])\n p[0] = p[3]\n\n\ndef p_expression_binop(p):\n '''expression : expression PLUS expression\n | expression MINUS expression\n | expression TIMES expression\n | expression DIVIDE expression'''\n if p[2] == '+':\n p[0] = p[1] + p[3]\n elif p[2] == '-':\n p[0] = p[1] - p[3]\n elif p[2] == '*':\n p[0] = p[1] * p[3]\n elif p[2] == '\u002F':\n p[0] = p[1] \u002F p[3]\n\n\ndef p_expression_group(p):\n 'expression : LPAREN expression RPAREN'\n p[0] = p[2]\n\n\ndef p_expression_number(p):\n 'expression : NUMBER'\n p[0] = p[1]\n\n\ndef p_expression_id(p):\n 'expression : ID'\n p[0] = names.get(p[1], 0)\n\n\ndef p_error(p):\n if p:\n print(f\"Erreur de syntaxe près de {p.value!r}\")\n else:\n print(\"Erreur de syntaxe à la fin de l'entrée\")\n\nparser = yacc.yacc()\n",[358,10802,10803,10815,10819,10824,10828,10838,10858,10876,10880,10884,10894,10898,10908,10913,10932,10949,10953,10957,10966,10971,10982,10998,11002,11006,11015,11020,11025,11030,11035,11055,11080,11098,11122,11139,11163,11180,11204,11208,11212,11221,11226,11242,11246,11250,11259,11264,11280,11284,11288,11298,11304,11327,11332,11337,11347,11355,11381,11389,11401,11406],{"__ignoreMap":356},[711,10804,10805,10807,10810,10812],{"class":713,"line":714},[711,10806,8622],{"class":1370},[711,10808,10809],{"class":717}," ply.yacc ",[711,10811,10275],{"class":1370},[711,10813,10814],{"class":717}," yacc\n",[711,10816,10817],{"class":713,"line":521},[711,10818,1114],{"emptyLinePlaceholder":554},[711,10820,10821],{"class":713,"line":529},[711,10822,10823],{"class":10405},"# ... tokens et lexer déjà définis ...\n",[711,10825,10826],{"class":713,"line":906},[711,10827,1114],{"emptyLinePlaceholder":554},[711,10829,10830,10833,10835],{"class":713,"line":925},[711,10831,10832],{"class":717},"precedence ",[711,10834,887],{"class":1370},[711,10836,10837],{"class":717}," (\n",[711,10839,10840,10843,10846,10848,10851,10853,10856],{"class":713,"line":950},[711,10841,10842],{"class":717}," (",[711,10844,10845],{"class":890},"'left'",[711,10847,1077],{"class":717},[711,10849,10850],{"class":890},"'PLUS'",[711,10852,1077],{"class":717},[711,10854,10855],{"class":890},"'MINUS'",[711,10857,8847],{"class":717},[711,10859,10860,10862,10864,10866,10869,10871,10874],{"class":713,"line":965},[711,10861,10842],{"class":717},[711,10863,10845],{"class":890},[711,10865,1077],{"class":717},[711,10867,10868],{"class":890},"'TIMES'",[711,10870,1077],{"class":717},[711,10872,10873],{"class":890},"'DIVIDE'",[711,10875,8847],{"class":717},[711,10877,10878],{"class":713,"line":991},[711,10879,8695],{"class":717},[711,10881,10882],{"class":713,"line":1001},[711,10883,1114],{"emptyLinePlaceholder":554},[711,10885,10886,10889,10891],{"class":713,"line":1011},[711,10887,10888],{"class":717},"names ",[711,10890,887],{"class":1370},[711,10892,10893],{"class":717}," {}\n",[711,10895,10896],{"class":713,"line":1024},[711,10897,1114],{"emptyLinePlaceholder":554},[711,10899,10900,10902,10905],{"class":713,"line":556},[711,10901,8634],{"class":1370},[711,10903,10904],{"class":872}," p_statement_assign",[711,10906,10907],{"class":717},"(p):\n",[711,10909,10910],{"class":713,"line":1046},[711,10911,10912],{"class":890}," 'statement : ID EQUALS expression'\n",[711,10914,10915,10918,10920,10923,10925,10928,10930],{"class":713,"line":3317},[711,10916,10917],{"class":717}," names[p[",[711,10919,1935],{"class":764},[711,10921,10922],{"class":717},"]] ",[711,10924,887],{"class":1370},[711,10926,10927],{"class":717}," p[",[711,10929,2831],{"class":764},[711,10931,8937],{"class":717},[711,10933,10934,10937,10939,10941,10943,10945,10947],{"class":713,"line":3574},[711,10935,10936],{"class":717}," p[",[711,10938,1797],{"class":764},[711,10940,8653],{"class":717},[711,10942,887],{"class":1370},[711,10944,10927],{"class":717},[711,10946,2831],{"class":764},[711,10948,8937],{"class":717},[711,10950,10951],{"class":713,"line":3595},[711,10952,1114],{"emptyLinePlaceholder":554},[711,10954,10955],{"class":713,"line":3600},[711,10956,1114],{"emptyLinePlaceholder":554},[711,10958,10959,10961,10964],{"class":713,"line":3868},[711,10960,8634],{"class":1370},[711,10962,10963],{"class":872}," p_statement_print",[711,10965,10907],{"class":717},[711,10967,10968],{"class":713,"line":3888},[711,10969,10970],{"class":890}," 'statement : PRINT LPAREN expression RPAREN'\n",[711,10972,10973,10975,10978,10980],{"class":713,"line":3908},[711,10974,10673],{"class":764},[711,10976,10977],{"class":717},"(p[",[711,10979,2831],{"class":764},[711,10981,9139],{"class":717},[711,10983,10984,10986,10988,10990,10992,10994,10996],{"class":713,"line":3928},[711,10985,10936],{"class":717},[711,10987,1797],{"class":764},[711,10989,8653],{"class":717},[711,10991,887],{"class":1370},[711,10993,10927],{"class":717},[711,10995,2831],{"class":764},[711,10997,8937],{"class":717},[711,10999,11000],{"class":713,"line":3937},[711,11001,1114],{"emptyLinePlaceholder":554},[711,11003,11004],{"class":713,"line":3946},[711,11005,1114],{"emptyLinePlaceholder":554},[711,11007,11008,11010,11013],{"class":713,"line":4162},[711,11009,8634],{"class":1370},[711,11011,11012],{"class":872}," p_expression_binop",[711,11014,10907],{"class":717},[711,11016,11017],{"class":713,"line":4167},[711,11018,11019],{"class":890}," '''expression : expression PLUS expression\n",[711,11021,11022],{"class":713,"line":4172},[711,11023,11024],{"class":890}," | expression MINUS expression\n",[711,11026,11027],{"class":713,"line":4180},[711,11028,11029],{"class":890}," | expression TIMES expression\n",[711,11031,11032],{"class":713,"line":4195},[711,11033,11034],{"class":890}," | expression DIVIDE expression'''\n",[711,11036,11037,11040,11042,11044,11046,11049,11052],{"class":713,"line":4209},[711,11038,11039],{"class":1370}," if",[711,11041,10927],{"class":717},[711,11043,1571],{"class":764},[711,11045,8653],{"class":717},[711,11047,11048],{"class":1370},"==",[711,11050,11051],{"class":890}," '+'",[711,11053,11054],{"class":717},":\n",[711,11056,11057,11060,11062,11064,11066,11068,11070,11072,11074,11076,11078],{"class":713,"line":4228},[711,11058,11059],{"class":717}," p[",[711,11061,1797],{"class":764},[711,11063,8653],{"class":717},[711,11065,887],{"class":1370},[711,11067,10927],{"class":717},[711,11069,1935],{"class":764},[711,11071,8653],{"class":717},[711,11073,10164],{"class":1370},[711,11075,10927],{"class":717},[711,11077,2831],{"class":764},[711,11079,8937],{"class":717},[711,11081,11082,11085,11087,11089,11091,11093,11096],{"class":713,"line":4233},[711,11083,11084],{"class":1370}," elif",[711,11086,10927],{"class":717},[711,11088,1571],{"class":764},[711,11090,8653],{"class":717},[711,11092,11048],{"class":1370},[711,11094,11095],{"class":890}," '-'",[711,11097,11054],{"class":717},[711,11099,11100,11102,11104,11106,11108,11110,11112,11114,11116,11118,11120],{"class":713,"line":4238},[711,11101,11059],{"class":717},[711,11103,1797],{"class":764},[711,11105,8653],{"class":717},[711,11107,887],{"class":1370},[711,11109,10927],{"class":717},[711,11111,1935],{"class":764},[711,11113,8653],{"class":717},[711,11115,8656],{"class":1370},[711,11117,10927],{"class":717},[711,11119,2831],{"class":764},[711,11121,8937],{"class":717},[711,11123,11124,11126,11128,11130,11132,11134,11137],{"class":713,"line":4245},[711,11125,11084],{"class":1370},[711,11127,10927],{"class":717},[711,11129,1571],{"class":764},[711,11131,8653],{"class":717},[711,11133,11048],{"class":1370},[711,11135,11136],{"class":890}," '*'",[711,11138,11054],{"class":717},[711,11140,11141,11143,11145,11147,11149,11151,11153,11155,11157,11159,11161],{"class":713,"line":4259},[711,11142,11059],{"class":717},[711,11144,1797],{"class":764},[711,11146,8653],{"class":717},[711,11148,887],{"class":1370},[711,11150,10927],{"class":717},[711,11152,1935],{"class":764},[711,11154,8653],{"class":717},[711,11156,2181],{"class":1370},[711,11158,10927],{"class":717},[711,11160,2831],{"class":764},[711,11162,8937],{"class":717},[711,11164,11165,11167,11169,11171,11173,11175,11178],{"class":713,"line":4264},[711,11166,11084],{"class":1370},[711,11168,10927],{"class":717},[711,11170,1571],{"class":764},[711,11172,8653],{"class":717},[711,11174,11048],{"class":1370},[711,11176,11177],{"class":890}," '\u002F'",[711,11179,11054],{"class":717},[711,11181,11182,11184,11186,11188,11190,11192,11194,11196,11198,11200,11202],{"class":713,"line":4269},[711,11183,11059],{"class":717},[711,11185,1797],{"class":764},[711,11187,8653],{"class":717},[711,11189,887],{"class":1370},[711,11191,10927],{"class":717},[711,11193,1935],{"class":764},[711,11195,8653],{"class":717},[711,11197,6140],{"class":1370},[711,11199,10927],{"class":717},[711,11201,2831],{"class":764},[711,11203,8937],{"class":717},[711,11205,11206],{"class":713,"line":4277},[711,11207,1114],{"emptyLinePlaceholder":554},[711,11209,11210],{"class":713,"line":4288},[711,11211,1114],{"emptyLinePlaceholder":554},[711,11213,11214,11216,11219],{"class":713,"line":4323},[711,11215,8634],{"class":1370},[711,11217,11218],{"class":872}," p_expression_group",[711,11220,10907],{"class":717},[711,11222,11223],{"class":713,"line":4336},[711,11224,11225],{"class":890}," 'expression : LPAREN expression RPAREN'\n",[711,11227,11228,11230,11232,11234,11236,11238,11240],{"class":713,"line":4341},[711,11229,10936],{"class":717},[711,11231,1797],{"class":764},[711,11233,8653],{"class":717},[711,11235,887],{"class":1370},[711,11237,10927],{"class":717},[711,11239,1571],{"class":764},[711,11241,8937],{"class":717},[711,11243,11244],{"class":713,"line":4346},[711,11245,1114],{"emptyLinePlaceholder":554},[711,11247,11248],{"class":713,"line":4353},[711,11249,1114],{"emptyLinePlaceholder":554},[711,11251,11252,11254,11257],{"class":713,"line":4364},[711,11253,8634],{"class":1370},[711,11255,11256],{"class":872}," p_expression_number",[711,11258,10907],{"class":717},[711,11260,11261],{"class":713,"line":4377},[711,11262,11263],{"class":890}," 'expression : NUMBER'\n",[711,11265,11266,11268,11270,11272,11274,11276,11278],{"class":713,"line":4390},[711,11267,10936],{"class":717},[711,11269,1797],{"class":764},[711,11271,8653],{"class":717},[711,11273,887],{"class":1370},[711,11275,10927],{"class":717},[711,11277,1935],{"class":764},[711,11279,8937],{"class":717},[711,11281,11282],{"class":713,"line":4407},[711,11283,1114],{"emptyLinePlaceholder":554},[711,11285,11286],{"class":713,"line":7853},[711,11287,1114],{"emptyLinePlaceholder":554},[711,11289,11291,11293,11296],{"class":713,"line":11290},49,[711,11292,8634],{"class":1370},[711,11294,11295],{"class":872}," p_expression_id",[711,11297,10907],{"class":717},[711,11299,11301],{"class":713,"line":11300},50,[711,11302,11303],{"class":890}," 'expression : ID'\n",[711,11305,11307,11309,11311,11313,11315,11318,11320,11323,11325],{"class":713,"line":11306},51,[711,11308,10936],{"class":717},[711,11310,1797],{"class":764},[711,11312,8653],{"class":717},[711,11314,887],{"class":1370},[711,11316,11317],{"class":717}," names.get(p[",[711,11319,1935],{"class":764},[711,11321,11322],{"class":717},"], ",[711,11324,1797],{"class":764},[711,11326,8695],{"class":717},[711,11328,11330],{"class":713,"line":11329},52,[711,11331,1114],{"emptyLinePlaceholder":554},[711,11333,11335],{"class":713,"line":11334},53,[711,11336,1114],{"emptyLinePlaceholder":554},[711,11338,11340,11342,11345],{"class":713,"line":11339},54,[711,11341,8634],{"class":1370},[711,11343,11344],{"class":872}," p_error",[711,11346,10907],{"class":717},[711,11348,11350,11352],{"class":713,"line":11349},55,[711,11351,11039],{"class":1370},[711,11353,11354],{"class":717}," p:\n",[711,11356,11358,11361,11363,11365,11368,11370,11373,11375,11377,11379],{"class":713,"line":11357},56,[711,11359,11360],{"class":764}," print",[711,11362,1789],{"class":717},[711,11364,10678],{"class":1370},[711,11366,11367],{"class":890},"\"Erreur de syntaxe près de ",[711,11369,10684],{"class":764},[711,11371,11372],{"class":717},"p.value",[711,11374,10695],{"class":1370},[711,11376,10698],{"class":764},[711,11378,10701],{"class":890},[711,11380,8695],{"class":717},[711,11382,11384,11387],{"class":713,"line":11383},57,[711,11385,11386],{"class":1370}," else",[711,11388,11054],{"class":717},[711,11390,11392,11394,11396,11399],{"class":713,"line":11391},58,[711,11393,11360],{"class":764},[711,11395,1789],{"class":717},[711,11397,11398],{"class":890},"\"Erreur de syntaxe à la fin de l'entrée\"",[711,11400,8695],{"class":717},[711,11402,11404],{"class":713,"line":11403},59,[711,11405,1114],{"emptyLinePlaceholder":554},[711,11407,11409,11412,11414],{"class":713,"line":11408},60,[711,11410,11411],{"class":717},"parser ",[711,11413,887],{"class":1370},[711,11415,11416],{"class":717}," yacc.yacc()\n",[146,11418,11420],{"id":11419},"ce-que-fait-chaque-règle","Ce que fait chaque règle",[5353,11422,11424],{"id":11423},"p_statement_assign",[358,11425,11423],{},[21,11427,11428,11429,831],{},"Cette règle traite une affectation comme ",[358,11430,11431],{},"a = 10",[5353,11433,11435],{"id":11434},"p_statement_print",[358,11436,11434],{},[21,11438,11439],{},"Cette règle traite l'affichage d'une expression.",[5353,11441,11443],{"id":11442},"p_expression_binop",[358,11444,11442],{},[21,11446,11447],{},"Cette règle gère les opérations arithmétiques.",[5353,11449,11451],{"id":11450},"p_expression_group",[358,11452,11450],{},[21,11454,11455],{},"Elle permet de gérer les parenthèses.",[5353,11457,11459],{"id":11458},"p_expression_id",[358,11460,11458],{},[21,11462,11463],{},"Elle récupère la valeur d'une variable déjà définie.",[16,11465,11467],{"id":11466},"_7-construire-un-fichier-complet","7. Construire un fichier complet",[21,11469,11470,11471,831],{},"Voici une version complète du mini compilateur dans un seul fichier ",[358,11472,10134],{},[350,11474,11476],{"className":8613,"code":11475,"language":8615,"meta":356,"style":356},"import ply.lex as lex\nimport ply.yacc as yacc\n\nreserved = {\n 'print': 'PRINT',\n}\n\ntokens = [\n 'ID',\n 'NUMBER',\n 'PLUS',\n 'MINUS',\n 'TIMES',\n 'DIVIDE',\n 'LPAREN',\n 'RPAREN',\n 'EQUALS',\n] + list(reserved.values())\n\nt_PLUS = r'\\+'\nt_MINUS = r'-'\nt_TIMES = r'\\*'\nt_DIVIDE = r'\u002F'\nt_LPAREN = r'\\('\nt_RPAREN = r'\\)'\nt_EQUALS = r'='\n\nt_ignore = ' \\t'\n\ndef t_NUMBER(t):\n r'\\d+'\n t.value = int(t.value)\n return t\n\ndef t_ID(t):\n r'[a-zA-Z_][a-zA-Z0-9_]*'\n t.type = reserved.get(t.value, 'ID')\n return t\n\ndef t_newline(t):\n r'\\n+'\n t.lexer.lineno += len(t.value)\n\ndef t_error(t):\n print(f\"Caractère illégal : {t.value[0]!r}\")\n t.lexer.skip(1)\n\nlexer = lex.lex()\n\nprecedence = (\n ('left', 'PLUS', 'MINUS'),\n ('left', 'TIMES', 'DIVIDE'),\n)\n\nnames = {}\n\ndef p_program_statement(p):\n 'program : statement'\n p[0] = p[1]\n\n\ndef p_statement_assign(p):\n 'statement : ID EQUALS expression'\n names[p[1]] = p[3]\n p[0] = p[3]\n\n\ndef p_statement_print(p):\n 'statement : PRINT LPAREN expression RPAREN'\n print(p[3])\n p[0] = p[3]\n\n\ndef p_expression_binop(p):\n '''expression : expression PLUS expression\n | expression MINUS expression\n | expression TIMES expression\n | expression DIVIDE expression'''\n if p[2] == '+':\n p[0] = p[1] + p[3]\n elif p[2] == '-':\n p[0] = p[1] - p[3]\n elif p[2] == '*':\n p[0] = p[1] * p[3]\n elif p[2] == '\u002F':\n p[0] = p[1] \u002F p[3]\n\n\ndef p_expression_group(p):\n 'expression : LPAREN expression RPAREN'\n p[0] = p[2]\n\n\ndef p_expression_number(p):\n 'expression : NUMBER'\n p[0] = p[1]\n\n\ndef p_expression_id(p):\n 'expression : ID'\n p[0] = names.get(p[1], 0)\n\n\ndef p_error(p):\n if p:\n print(f\"Erreur de syntaxe près de {p.value!r}\")\n else:\n print(\"Erreur de syntaxe à la fin de l'entrée\")\n\nparser = yacc.yacc()\n\nif __name__ == '__main__':\n while True:\n try:\n text = input('mini> ')\n except EOFError:\n break\n\n if not text:\n continue\n\n parser.parse(text)\n",[358,11477,11478,11488,11498,11502,11510,11520,11524,11528,11536,11542,11548,11554,11560,11566,11572,11578,11584,11590,11600,11604,11618,11632,11646,11660,11674,11688,11702,11706,11718,11722,11730,11736,11746,11752,11756,11764,11770,11782,11788,11792,11800,11806,11816,11820,11828,11854,11862,11866,11874,11878,11886,11902,11918,11922,11926,11934,11938,11947,11952,11968,11972,11977,11986,11991,12008,12025,12030,12035,12044,12049,12060,12077,12082,12087,12096,12101,12106,12111,12116,12133,12158,12175,12200,12217,12242,12259,12284,12289,12294,12303,12308,12325,12330,12335,12344,12349,12366,12371,12376,12385,12390,12411,12416,12421,12430,12437,12460,12467,12478,12483,12492,12497,12514,12525,12533,12551,12562,12568,12573,12585,12591,12596],{"__ignoreMap":356},[711,11479,11480,11482,11484,11486],{"class":713,"line":714},[711,11481,8622],{"class":1370},[711,11483,10272],{"class":717},[711,11485,10275],{"class":1370},[711,11487,10278],{"class":717},[711,11489,11490,11492,11494,11496],{"class":713,"line":521},[711,11491,8622],{"class":1370},[711,11493,10809],{"class":717},[711,11495,10275],{"class":1370},[711,11497,10814],{"class":717},[711,11499,11500],{"class":713,"line":529},[711,11501,1114],{"emptyLinePlaceholder":554},[711,11503,11504,11506,11508],{"class":713,"line":906},[711,11505,10287],{"class":717},[711,11507,887],{"class":1370},[711,11509,759],{"class":717},[711,11511,11512,11514,11516,11518],{"class":713,"line":925},[711,11513,10296],{"class":890},[711,11515,768],{"class":717},[711,11517,10301],{"class":890},[711,11519,10304],{"class":717},[711,11521,11522],{"class":713,"line":950},[711,11523,779],{"class":717},[711,11525,11526],{"class":713,"line":965},[711,11527,1114],{"emptyLinePlaceholder":554},[711,11529,11530,11532,11534],{"class":713,"line":991},[711,11531,10317],{"class":717},[711,11533,887],{"class":1370},[711,11535,8827],{"class":717},[711,11537,11538,11540],{"class":713,"line":1001},[711,11539,10326],{"class":890},[711,11541,10304],{"class":717},[711,11543,11544,11546],{"class":713,"line":1011},[711,11545,10333],{"class":890},[711,11547,10304],{"class":717},[711,11549,11550,11552],{"class":713,"line":1024},[711,11551,10340],{"class":890},[711,11553,10304],{"class":717},[711,11555,11556,11558],{"class":713,"line":556},[711,11557,10347],{"class":890},[711,11559,10304],{"class":717},[711,11561,11562,11564],{"class":713,"line":1046},[711,11563,10354],{"class":890},[711,11565,10304],{"class":717},[711,11567,11568,11570],{"class":713,"line":3317},[711,11569,10361],{"class":890},[711,11571,10304],{"class":717},[711,11573,11574,11576],{"class":713,"line":3574},[711,11575,10368],{"class":890},[711,11577,10304],{"class":717},[711,11579,11580,11582],{"class":713,"line":3595},[711,11581,10375],{"class":890},[711,11583,10304],{"class":717},[711,11585,11586,11588],{"class":713,"line":3600},[711,11587,10382],{"class":890},[711,11589,10304],{"class":717},[711,11591,11592,11594,11596,11598],{"class":713,"line":3868},[711,11593,8653],{"class":717},[711,11595,10164],{"class":1370},[711,11597,10393],{"class":764},[711,11599,10396],{"class":717},[711,11601,11602],{"class":713,"line":3888},[711,11603,1114],{"emptyLinePlaceholder":554},[711,11605,11606,11608,11610,11612,11614,11616],{"class":713,"line":3908},[711,11607,10411],{"class":717},[711,11609,887],{"class":1370},[711,11611,10416],{"class":1370},[711,11613,10419],{"class":890},[711,11615,10423],{"class":10422},[711,11617,10426],{"class":890},[711,11619,11620,11622,11624,11626,11628,11630],{"class":713,"line":3928},[711,11621,10431],{"class":717},[711,11623,887],{"class":1370},[711,11625,10416],{"class":1370},[711,11627,10419],{"class":890},[711,11629,8656],{"class":10440},[711,11631,10426],{"class":890},[711,11633,11634,11636,11638,11640,11642,11644],{"class":713,"line":3937},[711,11635,10447],{"class":717},[711,11637,887],{"class":1370},[711,11639,10416],{"class":1370},[711,11641,10419],{"class":890},[711,11643,10456],{"class":10422},[711,11645,10426],{"class":890},[711,11647,11648,11650,11652,11654,11656,11658],{"class":713,"line":3946},[711,11649,10463],{"class":717},[711,11651,887],{"class":1370},[711,11653,10416],{"class":1370},[711,11655,10419],{"class":890},[711,11657,6140],{"class":10440},[711,11659,10426],{"class":890},[711,11661,11662,11664,11666,11668,11670,11672],{"class":713,"line":4162},[711,11663,10478],{"class":717},[711,11665,887],{"class":1370},[711,11667,10416],{"class":1370},[711,11669,10419],{"class":890},[711,11671,10487],{"class":10422},[711,11673,10426],{"class":890},[711,11675,11676,11678,11680,11682,11684,11686],{"class":713,"line":4167},[711,11677,10494],{"class":717},[711,11679,887],{"class":1370},[711,11681,10416],{"class":1370},[711,11683,10419],{"class":890},[711,11685,10503],{"class":10422},[711,11687,10426],{"class":890},[711,11689,11690,11692,11694,11696,11698,11700],{"class":713,"line":4172},[711,11691,10510],{"class":717},[711,11693,887],{"class":1370},[711,11695,10416],{"class":1370},[711,11697,10419],{"class":890},[711,11699,887],{"class":10440},[711,11701,10426],{"class":890},[711,11703,11704],{"class":713,"line":4180},[711,11705,1114],{"emptyLinePlaceholder":554},[711,11707,11708,11710,11712,11714,11716],{"class":713,"line":4195},[711,11709,10529],{"class":717},[711,11711,887],{"class":1370},[711,11713,10534],{"class":890},[711,11715,10537],{"class":764},[711,11717,10426],{"class":890},[711,11719,11720],{"class":713,"line":4209},[711,11721,1114],{"emptyLinePlaceholder":554},[711,11723,11724,11726,11728],{"class":713,"line":4228},[711,11725,8634],{"class":1370},[711,11727,10550],{"class":872},[711,11729,10553],{"class":717},[711,11731,11732,11734],{"class":713,"line":4233},[711,11733,10558],{"class":1370},[711,11735,10561],{"class":890},[711,11737,11738,11740,11742,11744],{"class":713,"line":4238},[711,11739,10566],{"class":717},[711,11741,887],{"class":1370},[711,11743,10571],{"class":764},[711,11745,10574],{"class":717},[711,11747,11748,11750],{"class":713,"line":4245},[711,11749,8645],{"class":1370},[711,11751,10581],{"class":717},[711,11753,11754],{"class":713,"line":4259},[711,11755,1114],{"emptyLinePlaceholder":554},[711,11757,11758,11760,11762],{"class":713,"line":4264},[711,11759,8634],{"class":1370},[711,11761,10592],{"class":872},[711,11763,10553],{"class":717},[711,11765,11766,11768],{"class":713,"line":4269},[711,11767,10558],{"class":1370},[711,11769,10601],{"class":890},[711,11771,11772,11774,11776,11778,11780],{"class":713,"line":4277},[711,11773,10606],{"class":717},[711,11775,887],{"class":1370},[711,11777,10611],{"class":717},[711,11779,10614],{"class":890},[711,11781,8695],{"class":717},[711,11783,11784,11786],{"class":713,"line":4288},[711,11785,8645],{"class":1370},[711,11787,10581],{"class":717},[711,11789,11790],{"class":713,"line":4323},[711,11791,1114],{"emptyLinePlaceholder":554},[711,11793,11794,11796,11798],{"class":713,"line":4336},[711,11795,8634],{"class":1370},[711,11797,10633],{"class":872},[711,11799,10553],{"class":717},[711,11801,11802,11804],{"class":713,"line":4341},[711,11803,10558],{"class":1370},[711,11805,10642],{"class":890},[711,11807,11808,11810,11812,11814],{"class":713,"line":4346},[711,11809,10647],{"class":717},[711,11811,10650],{"class":1370},[711,11813,10653],{"class":764},[711,11815,10574],{"class":717},[711,11817,11818],{"class":713,"line":4353},[711,11819,1114],{"emptyLinePlaceholder":554},[711,11821,11822,11824,11826],{"class":713,"line":4364},[711,11823,8634],{"class":1370},[711,11825,10666],{"class":872},[711,11827,10553],{"class":717},[711,11829,11830,11832,11834,11836,11838,11840,11842,11844,11846,11848,11850,11852],{"class":713,"line":4377},[711,11831,10673],{"class":764},[711,11833,1789],{"class":717},[711,11835,10678],{"class":1370},[711,11837,10681],{"class":890},[711,11839,10684],{"class":764},[711,11841,10687],{"class":717},[711,11843,1797],{"class":764},[711,11845,10692],{"class":717},[711,11847,10695],{"class":1370},[711,11849,10698],{"class":764},[711,11851,10701],{"class":890},[711,11853,8695],{"class":717},[711,11855,11856,11858,11860],{"class":713,"line":4390},[711,11857,10708],{"class":717},[711,11859,1935],{"class":764},[711,11861,8695],{"class":717},[711,11863,11864],{"class":713,"line":4407},[711,11865,1114],{"emptyLinePlaceholder":554},[711,11867,11868,11870,11872],{"class":713,"line":7853},[711,11869,10721],{"class":717},[711,11871,887],{"class":1370},[711,11873,10726],{"class":717},[711,11875,11876],{"class":713,"line":11290},[711,11877,1114],{"emptyLinePlaceholder":554},[711,11879,11880,11882,11884],{"class":713,"line":11300},[711,11881,10832],{"class":717},[711,11883,887],{"class":1370},[711,11885,10837],{"class":717},[711,11887,11888,11890,11892,11894,11896,11898,11900],{"class":713,"line":11306},[711,11889,10842],{"class":717},[711,11891,10845],{"class":890},[711,11893,1077],{"class":717},[711,11895,10850],{"class":890},[711,11897,1077],{"class":717},[711,11899,10855],{"class":890},[711,11901,8847],{"class":717},[711,11903,11904,11906,11908,11910,11912,11914,11916],{"class":713,"line":11329},[711,11905,10842],{"class":717},[711,11907,10845],{"class":890},[711,11909,1077],{"class":717},[711,11911,10868],{"class":890},[711,11913,1077],{"class":717},[711,11915,10873],{"class":890},[711,11917,8847],{"class":717},[711,11919,11920],{"class":713,"line":11334},[711,11921,8695],{"class":717},[711,11923,11924],{"class":713,"line":11339},[711,11925,1114],{"emptyLinePlaceholder":554},[711,11927,11928,11930,11932],{"class":713,"line":11349},[711,11929,10888],{"class":717},[711,11931,887],{"class":1370},[711,11933,10893],{"class":717},[711,11935,11936],{"class":713,"line":11357},[711,11937,1114],{"emptyLinePlaceholder":554},[711,11939,11940,11942,11945],{"class":713,"line":11383},[711,11941,8634],{"class":1370},[711,11943,11944],{"class":872}," p_program_statement",[711,11946,10907],{"class":717},[711,11948,11949],{"class":713,"line":11391},[711,11950,11951],{"class":890}," 'program : statement'\n",[711,11953,11954,11956,11958,11960,11962,11964,11966],{"class":713,"line":11403},[711,11955,10936],{"class":717},[711,11957,1797],{"class":764},[711,11959,8653],{"class":717},[711,11961,887],{"class":1370},[711,11963,10927],{"class":717},[711,11965,1935],{"class":764},[711,11967,8937],{"class":717},[711,11969,11970],{"class":713,"line":11408},[711,11971,1114],{"emptyLinePlaceholder":554},[711,11973,11975],{"class":713,"line":11974},61,[711,11976,1114],{"emptyLinePlaceholder":554},[711,11978,11980,11982,11984],{"class":713,"line":11979},62,[711,11981,8634],{"class":1370},[711,11983,10904],{"class":872},[711,11985,10907],{"class":717},[711,11987,11989],{"class":713,"line":11988},63,[711,11990,10912],{"class":890},[711,11992,11994,11996,11998,12000,12002,12004,12006],{"class":713,"line":11993},64,[711,11995,10917],{"class":717},[711,11997,1935],{"class":764},[711,11999,10922],{"class":717},[711,12001,887],{"class":1370},[711,12003,10927],{"class":717},[711,12005,2831],{"class":764},[711,12007,8937],{"class":717},[711,12009,12011,12013,12015,12017,12019,12021,12023],{"class":713,"line":12010},65,[711,12012,10936],{"class":717},[711,12014,1797],{"class":764},[711,12016,8653],{"class":717},[711,12018,887],{"class":1370},[711,12020,10927],{"class":717},[711,12022,2831],{"class":764},[711,12024,8937],{"class":717},[711,12026,12028],{"class":713,"line":12027},66,[711,12029,1114],{"emptyLinePlaceholder":554},[711,12031,12033],{"class":713,"line":12032},67,[711,12034,1114],{"emptyLinePlaceholder":554},[711,12036,12038,12040,12042],{"class":713,"line":12037},68,[711,12039,8634],{"class":1370},[711,12041,10963],{"class":872},[711,12043,10907],{"class":717},[711,12045,12047],{"class":713,"line":12046},69,[711,12048,10970],{"class":890},[711,12050,12052,12054,12056,12058],{"class":713,"line":12051},70,[711,12053,10673],{"class":764},[711,12055,10977],{"class":717},[711,12057,2831],{"class":764},[711,12059,9139],{"class":717},[711,12061,12063,12065,12067,12069,12071,12073,12075],{"class":713,"line":12062},71,[711,12064,10936],{"class":717},[711,12066,1797],{"class":764},[711,12068,8653],{"class":717},[711,12070,887],{"class":1370},[711,12072,10927],{"class":717},[711,12074,2831],{"class":764},[711,12076,8937],{"class":717},[711,12078,12080],{"class":713,"line":12079},72,[711,12081,1114],{"emptyLinePlaceholder":554},[711,12083,12085],{"class":713,"line":12084},73,[711,12086,1114],{"emptyLinePlaceholder":554},[711,12088,12090,12092,12094],{"class":713,"line":12089},74,[711,12091,8634],{"class":1370},[711,12093,11012],{"class":872},[711,12095,10907],{"class":717},[711,12097,12099],{"class":713,"line":12098},75,[711,12100,11019],{"class":890},[711,12102,12104],{"class":713,"line":12103},76,[711,12105,11024],{"class":890},[711,12107,12109],{"class":713,"line":12108},77,[711,12110,11029],{"class":890},[711,12112,12114],{"class":713,"line":12113},78,[711,12115,11034],{"class":890},[711,12117,12119,12121,12123,12125,12127,12129,12131],{"class":713,"line":12118},79,[711,12120,11039],{"class":1370},[711,12122,10927],{"class":717},[711,12124,1571],{"class":764},[711,12126,8653],{"class":717},[711,12128,11048],{"class":1370},[711,12130,11051],{"class":890},[711,12132,11054],{"class":717},[711,12134,12136,12138,12140,12142,12144,12146,12148,12150,12152,12154,12156],{"class":713,"line":12135},80,[711,12137,11059],{"class":717},[711,12139,1797],{"class":764},[711,12141,8653],{"class":717},[711,12143,887],{"class":1370},[711,12145,10927],{"class":717},[711,12147,1935],{"class":764},[711,12149,8653],{"class":717},[711,12151,10164],{"class":1370},[711,12153,10927],{"class":717},[711,12155,2831],{"class":764},[711,12157,8937],{"class":717},[711,12159,12161,12163,12165,12167,12169,12171,12173],{"class":713,"line":12160},81,[711,12162,11084],{"class":1370},[711,12164,10927],{"class":717},[711,12166,1571],{"class":764},[711,12168,8653],{"class":717},[711,12170,11048],{"class":1370},[711,12172,11095],{"class":890},[711,12174,11054],{"class":717},[711,12176,12178,12180,12182,12184,12186,12188,12190,12192,12194,12196,12198],{"class":713,"line":12177},82,[711,12179,11059],{"class":717},[711,12181,1797],{"class":764},[711,12183,8653],{"class":717},[711,12185,887],{"class":1370},[711,12187,10927],{"class":717},[711,12189,1935],{"class":764},[711,12191,8653],{"class":717},[711,12193,8656],{"class":1370},[711,12195,10927],{"class":717},[711,12197,2831],{"class":764},[711,12199,8937],{"class":717},[711,12201,12203,12205,12207,12209,12211,12213,12215],{"class":713,"line":12202},83,[711,12204,11084],{"class":1370},[711,12206,10927],{"class":717},[711,12208,1571],{"class":764},[711,12210,8653],{"class":717},[711,12212,11048],{"class":1370},[711,12214,11136],{"class":890},[711,12216,11054],{"class":717},[711,12218,12220,12222,12224,12226,12228,12230,12232,12234,12236,12238,12240],{"class":713,"line":12219},84,[711,12221,11059],{"class":717},[711,12223,1797],{"class":764},[711,12225,8653],{"class":717},[711,12227,887],{"class":1370},[711,12229,10927],{"class":717},[711,12231,1935],{"class":764},[711,12233,8653],{"class":717},[711,12235,2181],{"class":1370},[711,12237,10927],{"class":717},[711,12239,2831],{"class":764},[711,12241,8937],{"class":717},[711,12243,12245,12247,12249,12251,12253,12255,12257],{"class":713,"line":12244},85,[711,12246,11084],{"class":1370},[711,12248,10927],{"class":717},[711,12250,1571],{"class":764},[711,12252,8653],{"class":717},[711,12254,11048],{"class":1370},[711,12256,11177],{"class":890},[711,12258,11054],{"class":717},[711,12260,12262,12264,12266,12268,12270,12272,12274,12276,12278,12280,12282],{"class":713,"line":12261},86,[711,12263,11059],{"class":717},[711,12265,1797],{"class":764},[711,12267,8653],{"class":717},[711,12269,887],{"class":1370},[711,12271,10927],{"class":717},[711,12273,1935],{"class":764},[711,12275,8653],{"class":717},[711,12277,6140],{"class":1370},[711,12279,10927],{"class":717},[711,12281,2831],{"class":764},[711,12283,8937],{"class":717},[711,12285,12287],{"class":713,"line":12286},87,[711,12288,1114],{"emptyLinePlaceholder":554},[711,12290,12292],{"class":713,"line":12291},88,[711,12293,1114],{"emptyLinePlaceholder":554},[711,12295,12297,12299,12301],{"class":713,"line":12296},89,[711,12298,8634],{"class":1370},[711,12300,11218],{"class":872},[711,12302,10907],{"class":717},[711,12304,12306],{"class":713,"line":12305},90,[711,12307,11225],{"class":890},[711,12309,12311,12313,12315,12317,12319,12321,12323],{"class":713,"line":12310},91,[711,12312,10936],{"class":717},[711,12314,1797],{"class":764},[711,12316,8653],{"class":717},[711,12318,887],{"class":1370},[711,12320,10927],{"class":717},[711,12322,1571],{"class":764},[711,12324,8937],{"class":717},[711,12326,12328],{"class":713,"line":12327},92,[711,12329,1114],{"emptyLinePlaceholder":554},[711,12331,12333],{"class":713,"line":12332},93,[711,12334,1114],{"emptyLinePlaceholder":554},[711,12336,12338,12340,12342],{"class":713,"line":12337},94,[711,12339,8634],{"class":1370},[711,12341,11256],{"class":872},[711,12343,10907],{"class":717},[711,12345,12347],{"class":713,"line":12346},95,[711,12348,11263],{"class":890},[711,12350,12352,12354,12356,12358,12360,12362,12364],{"class":713,"line":12351},96,[711,12353,10936],{"class":717},[711,12355,1797],{"class":764},[711,12357,8653],{"class":717},[711,12359,887],{"class":1370},[711,12361,10927],{"class":717},[711,12363,1935],{"class":764},[711,12365,8937],{"class":717},[711,12367,12369],{"class":713,"line":12368},97,[711,12370,1114],{"emptyLinePlaceholder":554},[711,12372,12374],{"class":713,"line":12373},98,[711,12375,1114],{"emptyLinePlaceholder":554},[711,12377,12379,12381,12383],{"class":713,"line":12378},99,[711,12380,8634],{"class":1370},[711,12382,11295],{"class":872},[711,12384,10907],{"class":717},[711,12386,12388],{"class":713,"line":12387},100,[711,12389,11303],{"class":890},[711,12391,12393,12395,12397,12399,12401,12403,12405,12407,12409],{"class":713,"line":12392},101,[711,12394,10936],{"class":717},[711,12396,1797],{"class":764},[711,12398,8653],{"class":717},[711,12400,887],{"class":1370},[711,12402,11317],{"class":717},[711,12404,1935],{"class":764},[711,12406,11322],{"class":717},[711,12408,1797],{"class":764},[711,12410,8695],{"class":717},[711,12412,12414],{"class":713,"line":12413},102,[711,12415,1114],{"emptyLinePlaceholder":554},[711,12417,12419],{"class":713,"line":12418},103,[711,12420,1114],{"emptyLinePlaceholder":554},[711,12422,12424,12426,12428],{"class":713,"line":12423},104,[711,12425,8634],{"class":1370},[711,12427,11344],{"class":872},[711,12429,10907],{"class":717},[711,12431,12433,12435],{"class":713,"line":12432},105,[711,12434,11039],{"class":1370},[711,12436,11354],{"class":717},[711,12438,12440,12442,12444,12446,12448,12450,12452,12454,12456,12458],{"class":713,"line":12439},106,[711,12441,11360],{"class":764},[711,12443,1789],{"class":717},[711,12445,10678],{"class":1370},[711,12447,11367],{"class":890},[711,12449,10684],{"class":764},[711,12451,11372],{"class":717},[711,12453,10695],{"class":1370},[711,12455,10698],{"class":764},[711,12457,10701],{"class":890},[711,12459,8695],{"class":717},[711,12461,12463,12465],{"class":713,"line":12462},107,[711,12464,11386],{"class":1370},[711,12466,11054],{"class":717},[711,12468,12470,12472,12474,12476],{"class":713,"line":12469},108,[711,12471,11360],{"class":764},[711,12473,1789],{"class":717},[711,12475,11398],{"class":890},[711,12477,8695],{"class":717},[711,12479,12481],{"class":713,"line":12480},109,[711,12482,1114],{"emptyLinePlaceholder":554},[711,12484,12486,12488,12490],{"class":713,"line":12485},110,[711,12487,11411],{"class":717},[711,12489,887],{"class":1370},[711,12491,11416],{"class":717},[711,12493,12495],{"class":713,"line":12494},111,[711,12496,1114],{"emptyLinePlaceholder":554},[711,12498,12500,12503,12506,12509,12512],{"class":713,"line":12499},112,[711,12501,12502],{"class":1370},"if",[711,12504,12505],{"class":764}," __name__",[711,12507,12508],{"class":1370}," ==",[711,12510,12511],{"class":890}," '__main__'",[711,12513,11054],{"class":717},[711,12515,12517,12520,12523],{"class":713,"line":12516},113,[711,12518,12519],{"class":1370}," while",[711,12521,12522],{"class":764}," True",[711,12524,11054],{"class":717},[711,12526,12528,12531],{"class":713,"line":12527},114,[711,12529,12530],{"class":1370}," try",[711,12532,11054],{"class":717},[711,12534,12536,12539,12541,12544,12546,12549],{"class":713,"line":12535},115,[711,12537,12538],{"class":717}," text ",[711,12540,887],{"class":1370},[711,12542,12543],{"class":764}," input",[711,12545,1789],{"class":717},[711,12547,12548],{"class":890},"'mini> '",[711,12550,8695],{"class":717},[711,12552,12554,12557,12560],{"class":713,"line":12553},116,[711,12555,12556],{"class":1370}," except",[711,12558,12559],{"class":764}," EOFError",[711,12561,11054],{"class":717},[711,12563,12565],{"class":713,"line":12564},117,[711,12566,12567],{"class":1370}," break\n",[711,12569,12571],{"class":713,"line":12570},118,[711,12572,1114],{"emptyLinePlaceholder":554},[711,12574,12576,12579,12582],{"class":713,"line":12575},119,[711,12577,12578],{"class":1370}," if",[711,12580,12581],{"class":1370}," not",[711,12583,12584],{"class":717}," text:\n",[711,12586,12588],{"class":713,"line":12587},120,[711,12589,12590],{"class":1370}," continue\n",[711,12592,12594],{"class":713,"line":12593},121,[711,12595,1114],{"emptyLinePlaceholder":554},[711,12597,12599],{"class":713,"line":12598},122,[711,12600,12601],{"class":717}," parser.parse(text)\n",[16,12603,12605],{"id":12604},"_8-exemple-dutilisation","8. Exemple d'utilisation",[21,12607,12608],{},"Lancez le programme et testez :",[350,12610,12612],{"className":12611,"code":10194,"language":355,"meta":356},[353],[358,12613,10194],{"__ignoreMap":356},[21,12615,9442],{},[350,12617,12620],{"className":12618,"code":12619,"language":355,"meta":356},[353],"20\n",[358,12621,12619],{"__ignoreMap":356},[146,12623,12625],{"id":12624},"autre-exemple","Autre exemple",[350,12627,12630],{"className":12628,"code":12629,"language":355,"meta":356},[353],"x = 8\nprint((x + 2) * 3)\n",[358,12631,12629],{"__ignoreMap":356},[21,12633,12634],{},"Résultat :",[350,12636,12639],{"className":12637,"code":12638,"language":355,"meta":356},[353],"30\n",[358,12640,12638],{"__ignoreMap":356},[16,12642,12644],{"id":12643},"_9-comprendre-lordre-des-opérations","9. Comprendre l'ordre des opérations",[21,12646,12647],{},"Comme en mathématiques, certaines opérations sont prioritaires.",[21,12649,29],{},[350,12651,12654],{"className":12652,"code":12653,"language":355,"meta":356},[353],"10 + 5 * 2\n",[358,12655,12653],{"__ignoreMap":356},[21,12657,12658,12659,12661],{},"Le résultat est ",[358,12660,2097],{},", car la multiplication est effectuée avant l'addition.",[21,12663,12664,12665,12668],{},"La règle ",[358,12666,12667],{},"precedence"," permet de refléter cet ordre dans la grammaire.",[16,12670,12672],{"id":12671},"_10-gérer-les-erreurs","10. Gérer les erreurs",[21,12674,12675],{},"Un compilateur doit savoir détecter les erreurs.",[146,12677,12679],{"id":12678},"erreur-lexicale","Erreur lexicale",[21,12681,12682,12683,12685],{},"Si un caractère n'est pas reconnu, ",[358,12684,10760],{}," intervient.",[146,12687,12689],{"id":12688},"erreur-syntaxique","Erreur syntaxique",[21,12691,12692,12693,12696],{},"Si la structure est incorrecte, ",[358,12694,12695],{},"p_error"," affiche un message.",[21,12698,348],{},[350,12700,12703],{"className":12701,"code":12702,"language":355,"meta":356},[353],"a =\n",[358,12704,12702],{"__ignoreMap":356},[21,12706,12707],{},"ou",[350,12709,12712],{"className":12710,"code":12711,"language":355,"meta":356},[353],"print(1 + )\n",[358,12713,12711],{"__ignoreMap":356},[21,12715,12716],{},"Ces cas doivent être signalés proprement.",[16,12718,12720],{"id":12719},"_11-améliorations-possibles","11. Améliorations possibles",[21,12722,12723],{},"Une fois la base comprise, vous pouvez aller plus loin :",[31,12725,12726,12729,12732,12735,12738,12743,12746],{},[34,12727,12728],{},"ajouter plusieurs lignes de code ;",[34,12730,12731],{},"gérer les chaînes de caractères ;",[34,12733,12734],{},"créer un vrai arbre syntaxique abstrait ;",[34,12736,12737],{},"ajouter les comparaisons ;",[34,12739,12740,12741,1407],{},"ajouter les conditions ",[358,12742,12502],{},[34,12744,12745],{},"ajouter les boucles ;",[34,12747,12748],{},"générer du code Python à partir de l'arbre.",[16,12750,12752],{"id":12751},"_12-résumé","12. Résumé",[21,12754,4522],{},[31,12756,12757,12760,12763,12766,12769,12772,12777],{},[34,12758,12759],{},"ce qu'est un compilateur ;",[34,12761,12762],{},"le rôle de l'analyse lexicale ;",[34,12764,12765],{},"le rôle de l'analyse syntaxique ;",[34,12767,12768],{},"comment utiliser PLY avec Python ;",[34,12770,12771],{},"comment créer un mini langage arithmétique ;",[34,12773,12774,12775,1407],{},"comment gérer des variables et ",[358,12776,9395],{},[34,12778,12779],{},"comment détecter les erreurs.",[16,12781,4552],{"id":4551},[146,12783,4556],{"id":4555},[21,12785,12786],{},"Ajoutez le support des nombres à virgule.",[146,12788,4563],{"id":4562},[21,12790,12791],{},"Ajoutez plusieurs lignes de code dans votre mini langage.",[146,12793,4570],{"id":4569},[21,12795,12796,12797,12799],{},"Ajoutez une instruction ",[358,12798,9395],{}," pour afficher des variables.",[146,12801,4577],{"id":4576},[21,12803,12804],{},"Essayez de créer un message d'erreur plus lisible.",[16,12806,4591],{"id":4590},[146,12808,4595],{"id":4594},[21,12810,12811,12812,12815],{},"Remplacez ",[358,12813,12814],{},"r'\\d+'"," par une règle qui accepte aussi les nombres décimaux.",[146,12817,4646],{"id":4645},[21,12819,12820,12821,831],{},"Ajoutez une grammaire de type ",[358,12822,12823],{},"program : program statement",[146,12825,4715],{"id":4714},[21,12827,12664,12828,12830],{},[358,12829,11458],{}," permet déjà de lire la valeur d'une variable.",[16,12832,512],{"id":511},[21,12834,12835],{},"Quand vous serez à l'aise avec ce mini compilateur, la suite naturelle est de construire un vrai arbre syntaxique abstrait pour séparer l'analyse et l'exécution.",[640,12837,12838],{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .snhLl, html code.shiki .snhLl{--shiki-default:#22863A;--shiki-default-font-weight:bold;--shiki-dark:#85E89D;--shiki-dark-font-weight:bold}html pre.shiki code .sA_wV, html code.shiki .sA_wV{--shiki-default:#032F62;--shiki-dark:#DBEDFF}",{"title":356,"searchDepth":521,"depth":521,"links":12840},[12841,12842,12843,12844,12845,12850,12853,12857,12861,12862,12865,12866,12870,12871,12872,12878,12883],{"id":18,"depth":521,"text":19},{"id":110,"depth":521,"text":111},{"id":9985,"depth":521,"text":9986},{"id":10013,"depth":521,"text":10014},{"id":10049,"depth":521,"text":10050,"children":12846},[12847,12848,12849],{"id":10056,"depth":529,"text":10057},{"id":10066,"depth":529,"text":10067},{"id":10125,"depth":529,"text":10126},{"id":10146,"depth":521,"text":10147,"children":12851},[12852],{"id":10189,"depth":529,"text":10190},{"id":10202,"depth":521,"text":10203,"children":12854},[12855,12856],{"id":10256,"depth":529,"text":10257},{"id":2859,"depth":529,"text":2860},{"id":10764,"depth":521,"text":10765,"children":12858},[12859,12860],{"id":10793,"depth":529,"text":10794},{"id":11419,"depth":529,"text":11420},{"id":11466,"depth":521,"text":11467},{"id":12604,"depth":521,"text":12605,"children":12863},[12864],{"id":12624,"depth":529,"text":12625},{"id":12643,"depth":521,"text":12644},{"id":12671,"depth":521,"text":12672,"children":12867},[12868,12869],{"id":12678,"depth":529,"text":12679},{"id":12688,"depth":529,"text":12689},{"id":12719,"depth":521,"text":12720},{"id":12751,"depth":521,"text":12752},{"id":4551,"depth":521,"text":4552,"children":12873},[12874,12875,12876,12877],{"id":4555,"depth":529,"text":4556},{"id":4562,"depth":529,"text":4563},{"id":4569,"depth":529,"text":4570},{"id":4576,"depth":529,"text":4577},{"id":4590,"depth":521,"text":4591,"children":12879},[12880,12881,12882],{"id":4594,"depth":529,"text":4595},{"id":4645,"depth":529,"text":4646},{"id":4714,"depth":529,"text":4715},{"id":511,"depth":521,"text":512},"Un tutoriel complet pour comprendre comment construire un mini compilateur avec PLY, en séparant l'analyse lexicale, l'analyse syntaxique et l'exécution du code.",{},"\u002Fblog\u002Fcreer-mini-compilateur-ply",{"title":9902,"description":12884},"blog\u002Fcreer-mini-compilateur-ply",[9898,12890,12891,12892,12893],"PLY","Compilateur","Lex","Yacc","jDcRK3R5uH7CzDnAVgDCJwSuFVFrFXC4YgXLr0k7HBM",{"id":12896,"title":12897,"body":12898,"coverImage":550,"description":14082,"extension":552,"meta":14083,"navigation":554,"path":79,"published":554,"publishedAt":555,"readTime":3317,"seo":14084,"stem":14085,"tags":14086,"__hash__":14087},"blog\u002Fblog\u002Frecherche-dichotomique.md","La recherche dichotomique expliquée simplement",{"type":8,"value":12899,"toc":14036},[12900,12904,12906,12909,12912,12915,12917,12919,12939,12943,12946,13005,13011,13014,13018,13021,13038,13041,13045,13048,13051,13054,13056,13064,13068,13071,13074,13077,13080,13084,13090,13136,13140,13143,13149,13153,13158,13162,13165,13168,13172,13175,13396,13400,13426,13430,13525,13528,13539,13546,13552,13576,13585,13589,13593,13609,13614,13618,13638,13642,13646,13677,13681,13685,13688,13692,13695,13698,13701,13704,13707,13710,13714,13718,13721,13725,13733,13737,13740,13742,13745,13747,13761,13763,13765,13768,13770,13773,13775,13785,13787,13790,13792,13794,13982,13984,14028,14030,14033],[11,12901,12903],{"id":12902},"la-recherche-dichotomique","La recherche dichotomique",[16,12905,19],{"id":18},[21,12907,12908],{},"La recherche dichotomique est l'un des algorithmes les plus utiles à connaître.",[21,12910,12911],{},"Son principe est simple : au lieu de parcourir toute une liste, on coupe l'espace de recherche en deux à chaque étape.",[21,12913,12914],{},"C'est beaucoup plus efficace qu'une recherche classique, mais à une condition importante : la liste doit être triée.",[16,12916,111],{"id":110},[21,12918,5115],{},[31,12920,12921,12924,12927,12930,12933,12936],{},[34,12922,12923],{},"comprendre le principe de la recherche dichotomique ;",[34,12925,12926],{},"savoir quand l'utiliser ;",[34,12928,12929],{},"savoir pourquoi la liste doit être triée ;",[34,12931,12932],{},"écrire l'algorithme en JavaScript ;",[34,12934,12935],{},"gérer les cas limites ;",[34,12937,12938],{},"comparer cette approche à une recherche simple.",[16,12940,12942],{"id":12941},"_1-le-problème-de-départ","1. Le problème de départ",[21,12944,12945],{},"Imaginons une liste de nombres triée :",[350,12947,12951],{"className":12948,"code":12949,"language":12950,"meta":356,"style":356},"language-js shiki shiki-themes github-light github-dark","const numbers = [2, 4, 7, 10, 15, 18, 21, 30];\n","js",[358,12952,12953],{"__ignoreMap":356},[711,12954,12955,12958,12961,12964,12967,12969,12971,12974,12976,12978,12980,12982,12984,12987,12989,12992,12994,12997,12999,13002],{"class":713,"line":714},[711,12956,12957],{"class":1370},"const",[711,12959,12960],{"class":764}," numbers",[711,12962,12963],{"class":1370}," =",[711,12965,12966],{"class":717}," [",[711,12968,1571],{"class":764},[711,12970,1077],{"class":717},[711,12972,12973],{"class":764},"4",[711,12975,1077],{"class":717},[711,12977,8905],{"class":764},[711,12979,1077],{"class":717},[711,12981,3239],{"class":764},[711,12983,1077],{"class":717},[711,12985,12986],{"class":764},"15",[711,12988,1077],{"class":717},[711,12990,12991],{"class":764},"18",[711,12993,1077],{"class":717},[711,12995,12996],{"class":764},"21",[711,12998,1077],{"class":717},[711,13000,13001],{"class":764},"30",[711,13003,13004],{"class":717},"];\n",[21,13006,13007,13008,13010],{},"Si vous cherchez ",[358,13009,12991],{},", vous pourriez commencer au début et vérifier chaque élément un par un.",[21,13012,13013],{},"Mais si la liste est triée, il existe une meilleure méthode.",[16,13015,13017],{"id":13016},"_2-lidée-de-la-recherche-dichotomique","2. L'idée de la recherche dichotomique",[21,13019,13020],{},"La recherche dichotomique fonctionne ainsi :",[60,13022,13023,13026,13029,13032,13035],{},[34,13024,13025],{},"on regarde l'élément au milieu ;",[34,13027,13028],{},"si c'est la valeur cherchée, on s'arrête ;",[34,13030,13031],{},"sinon, on sait dans quelle moitié continuer ;",[34,13033,13034],{},"on recommence sur cette moitié ;",[34,13036,13037],{},"on répète jusqu'à trouver la valeur ou jusqu'à ce qu'il n'y ait plus rien à chercher.",[21,13039,13040],{},"C'est une stratégie de division par deux.",[16,13042,13044],{"id":13043},"_3-pourquoi-cest-plus-rapide","3. Pourquoi c'est plus rapide ?",[21,13046,13047],{},"À chaque étape, on élimine la moitié des éléments restants.",[21,13049,13050],{},"Sur une petite liste, la différence n'est pas toujours visible.",[21,13052,13053],{},"Sur une grande liste, le gain devient important.",[21,13055,29],{},[31,13057,13058,13061],{},[34,13059,13060],{},"une recherche linéaire peut vérifier un élément après l'autre ;",[34,13062,13063],{},"une recherche dichotomique réduit très vite le nombre de comparaisons.",[16,13065,13067],{"id":13066},"_4-la-condition-essentielle","4. La condition essentielle",[21,13069,13070],{},"La recherche dichotomique ne fonctionne correctement que si la liste est triée.",[21,13072,13073],{},"Pourquoi ?",[21,13075,13076],{},"Parce que l'algorithme décide dans quelle moitié continuer en se basant sur l'ordre des valeurs.",[21,13078,13079],{},"Sans tri, cette décision serait fausse.",[16,13081,13083],{"id":13082},"_5-exemple-pas-à-pas","5. Exemple pas à pas",[21,13085,13086,13087,13089],{},"Cherchons ",[358,13088,12991],{}," dans cette liste :",[350,13091,13092],{"className":12948,"code":12949,"language":12950,"meta":356,"style":356},[358,13093,13094],{"__ignoreMap":356},[711,13095,13096,13098,13100,13102,13104,13106,13108,13110,13112,13114,13116,13118,13120,13122,13124,13126,13128,13130,13132,13134],{"class":713,"line":714},[711,13097,12957],{"class":1370},[711,13099,12960],{"class":764},[711,13101,12963],{"class":1370},[711,13103,12966],{"class":717},[711,13105,1571],{"class":764},[711,13107,1077],{"class":717},[711,13109,12973],{"class":764},[711,13111,1077],{"class":717},[711,13113,8905],{"class":764},[711,13115,1077],{"class":717},[711,13117,3239],{"class":764},[711,13119,1077],{"class":717},[711,13121,12986],{"class":764},[711,13123,1077],{"class":717},[711,13125,12991],{"class":764},[711,13127,1077],{"class":717},[711,13129,12996],{"class":764},[711,13131,1077],{"class":717},[711,13133,13001],{"class":764},[711,13135,13004],{"class":717},[146,13137,13139],{"id":13138},"première-étape","Première étape",[21,13141,13142],{},"On regarde le milieu.",[21,13144,13145,13146,13148],{},"La valeur centrale n'est pas ",[358,13147,12991],{},", mais on compare pour savoir de quel côté continuer.",[146,13150,13152],{"id":13151},"deuxième-étape","Deuxième étape",[21,13154,13155,13156,831],{},"On se concentre sur la moitié qui contient potentiellement ",[358,13157,12991],{},[146,13159,13161],{"id":13160},"troisième-étape","Troisième étape",[21,13163,13164],{},"On recommence jusqu'à trouver la valeur.",[21,13166,13167],{},"C'est cette logique qui rend l'algorithme élégant et efficace.",[16,13169,13171],{"id":13170},"_6-version-javascript-simple","6. Version JavaScript simple",[21,13173,13174],{},"Voici une implémentation claire de la recherche dichotomique :",[350,13176,13178],{"className":12948,"code":13177,"language":12950,"meta":356,"style":356},"function binarySearch(array, target) {\n let left = 0;\n let right = array.length - 1;\n\n while (left \u003C= right) {\n const middle = Math.floor((left + right) \u002F 2);\n\n if (array[middle] === target) {\n return middle;\n }\n\n if (array[middle] \u003C target) {\n left = middle + 1;\n } else {\n right = middle - 1;\n }\n }\n\n return -1;\n}\n",[358,13179,13180,13200,13215,13237,13241,13255,13285,13289,13302,13310,13314,13318,13328,13344,13354,13369,13373,13377,13381,13392],{"__ignoreMap":356},[711,13181,13182,13185,13188,13190,13193,13195,13198],{"class":713,"line":714},[711,13183,13184],{"class":1370},"function",[711,13186,13187],{"class":872}," binarySearch",[711,13189,1789],{"class":717},[711,13191,13192],{"class":3203},"array",[711,13194,1077],{"class":717},[711,13196,13197],{"class":3203},"target",[711,13199,3402],{"class":717},[711,13201,13202,13205,13208,13210,13213],{"class":713,"line":521},[711,13203,13204],{"class":1370}," let",[711,13206,13207],{"class":717}," left ",[711,13209,887],{"class":1370},[711,13211,13212],{"class":764}," 0",[711,13214,774],{"class":717},[711,13216,13217,13219,13222,13224,13227,13230,13233,13235],{"class":713,"line":529},[711,13218,13204],{"class":1370},[711,13220,13221],{"class":717}," right ",[711,13223,887],{"class":1370},[711,13225,13226],{"class":717}," array.",[711,13228,13229],{"class":764},"length",[711,13231,13232],{"class":1370}," -",[711,13234,2919],{"class":764},[711,13236,774],{"class":717},[711,13238,13239],{"class":713,"line":906},[711,13240,1114],{"emptyLinePlaceholder":554},[711,13242,13243,13246,13249,13252],{"class":713,"line":925},[711,13244,13245],{"class":1370}," while",[711,13247,13248],{"class":717}," (left ",[711,13250,13251],{"class":1370},"\u003C=",[711,13253,13254],{"class":717}," right) {\n",[711,13256,13257,13260,13263,13265,13268,13271,13274,13276,13279,13281,13283],{"class":713,"line":950},[711,13258,13259],{"class":1370}," const",[711,13261,13262],{"class":764}," middle",[711,13264,12963],{"class":1370},[711,13266,13267],{"class":717}," Math.",[711,13269,13270],{"class":872},"floor",[711,13272,13273],{"class":717},"((left ",[711,13275,10164],{"class":1370},[711,13277,13278],{"class":717}," right) ",[711,13280,6140],{"class":1370},[711,13282,8670],{"class":764},[711,13284,1804],{"class":717},[711,13286,13287],{"class":713,"line":965},[711,13288,1114],{"emptyLinePlaceholder":554},[711,13290,13291,13293,13296,13299],{"class":713,"line":991},[711,13292,11039],{"class":1370},[711,13294,13295],{"class":717}," (array[middle] ",[711,13297,13298],{"class":1370},"===",[711,13300,13301],{"class":717}," target) {\n",[711,13303,13304,13307],{"class":713,"line":1001},[711,13305,13306],{"class":1370}," return",[711,13308,13309],{"class":717}," middle;\n",[711,13311,13312],{"class":713,"line":1011},[711,13313,1223],{"class":717},[711,13315,13316],{"class":713,"line":1024},[711,13317,1114],{"emptyLinePlaceholder":554},[711,13319,13320,13322,13324,13326],{"class":713,"line":556},[711,13321,11039],{"class":1370},[711,13323,13295],{"class":717},[711,13325,718],{"class":1370},[711,13327,13301],{"class":717},[711,13329,13330,13333,13335,13338,13340,13342],{"class":713,"line":1046},[711,13331,13332],{"class":717}," left ",[711,13334,887],{"class":1370},[711,13336,13337],{"class":717}," middle ",[711,13339,10164],{"class":1370},[711,13341,2919],{"class":764},[711,13343,774],{"class":717},[711,13345,13346,13349,13352],{"class":713,"line":3317},[711,13347,13348],{"class":717}," } ",[711,13350,13351],{"class":1370},"else",[711,13353,759],{"class":717},[711,13355,13356,13359,13361,13363,13365,13367],{"class":713,"line":3574},[711,13357,13358],{"class":717}," right ",[711,13360,887],{"class":1370},[711,13362,13337],{"class":717},[711,13364,8656],{"class":1370},[711,13366,2919],{"class":764},[711,13368,774],{"class":717},[711,13370,13371],{"class":713,"line":3595},[711,13372,1223],{"class":717},[711,13374,13375],{"class":713,"line":3600},[711,13376,3248],{"class":717},[711,13378,13379],{"class":713,"line":3868},[711,13380,1114],{"emptyLinePlaceholder":554},[711,13382,13383,13386,13388,13390],{"class":713,"line":3888},[711,13384,13385],{"class":1370}," return",[711,13387,13232],{"class":1370},[711,13389,1935],{"class":764},[711,13391,774],{"class":717},[711,13393,13394],{"class":713,"line":3908},[711,13395,779],{"class":717},[146,13397,13399],{"id":13398},"comment-lire-ce-code","Comment lire ce code ?",[31,13401,13402,13408,13414,13420,13423],{},[34,13403,13404,13407],{},[358,13405,13406],{},"left"," représente le début de la zone de recherche ;",[34,13409,13410,13413],{},[358,13411,13412],{},"right"," représente la fin de la zone de recherche ;",[34,13415,13416,13419],{},[358,13417,13418],{},"middle"," est l'index du milieu ;",[34,13421,13422],{},"si la valeur du milieu est plus petite que la cible, on cherche à droite ;",[34,13424,13425],{},"sinon, on cherche à gauche.",[16,13427,13429],{"id":13428},"_7-exemple-dutilisation","7. Exemple d'utilisation",[350,13431,13433],{"className":12948,"code":13432,"language":12950,"meta":356,"style":356},"const numbers = [2, 4, 7, 10, 15, 18, 21, 30];\n\nconsole.log(binarySearch(numbers, 18)); \u002F\u002F 5\nconsole.log(binarySearch(numbers, 9)); \u002F\u002F -1\n",[358,13434,13435,13477,13481,13505],{"__ignoreMap":356},[711,13436,13437,13439,13441,13443,13445,13447,13449,13451,13453,13455,13457,13459,13461,13463,13465,13467,13469,13471,13473,13475],{"class":713,"line":714},[711,13438,12957],{"class":1370},[711,13440,12960],{"class":764},[711,13442,12963],{"class":1370},[711,13444,12966],{"class":717},[711,13446,1571],{"class":764},[711,13448,1077],{"class":717},[711,13450,12973],{"class":764},[711,13452,1077],{"class":717},[711,13454,8905],{"class":764},[711,13456,1077],{"class":717},[711,13458,3239],{"class":764},[711,13460,1077],{"class":717},[711,13462,12986],{"class":764},[711,13464,1077],{"class":717},[711,13466,12991],{"class":764},[711,13468,1077],{"class":717},[711,13470,12996],{"class":764},[711,13472,1077],{"class":717},[711,13474,13001],{"class":764},[711,13476,13004],{"class":717},[711,13478,13479],{"class":713,"line":521},[711,13480,1114],{"emptyLinePlaceholder":554},[711,13482,13483,13486,13489,13491,13494,13497,13499,13502],{"class":713,"line":529},[711,13484,13485],{"class":717},"console.",[711,13487,13488],{"class":872},"log",[711,13490,1789],{"class":717},[711,13492,13493],{"class":872},"binarySearch",[711,13495,13496],{"class":717},"(numbers, ",[711,13498,12991],{"class":764},[711,13500,13501],{"class":717},")); ",[711,13503,13504],{"class":10405},"\u002F\u002F 5\n",[711,13506,13507,13509,13511,13513,13515,13517,13520,13522],{"class":713,"line":906},[711,13508,13485],{"class":717},[711,13510,13488],{"class":872},[711,13512,1789],{"class":717},[711,13514,13493],{"class":872},[711,13516,13496],{"class":717},[711,13518,13519],{"class":764},"9",[711,13521,13501],{"class":717},[711,13523,13524],{"class":10405},"\u002F\u002F -1\n",[21,13526,13527],{},"La fonction retourne :",[31,13529,13530,13533],{},[34,13531,13532],{},"l'index de l'élément si la valeur est trouvée ;",[34,13534,13535,13538],{},[358,13536,13537],{},"-1"," si elle n'existe pas.",[16,13540,13542,13543],{"id":13541},"_8-le-rôle-de-la-boucle-while","8. Le rôle de la boucle ",[358,13544,13545],{},"while",[21,13547,13548,13549,13551],{},"La boucle ",[358,13550,13545],{}," permet de continuer tant que la zone de recherche est valide.",[350,13553,13555],{"className":12948,"code":13554,"language":12950,"meta":356,"style":356},"while (left \u003C= right) {\n \u002F\u002F continuer à chercher\n}\n",[358,13556,13557,13567,13572],{"__ignoreMap":356},[711,13558,13559,13561,13563,13565],{"class":713,"line":714},[711,13560,13545],{"class":1370},[711,13562,13248],{"class":717},[711,13564,13251],{"class":1370},[711,13566,13254],{"class":717},[711,13568,13569],{"class":713,"line":521},[711,13570,13571],{"class":10405}," \u002F\u002F continuer à chercher\n",[711,13573,13574],{"class":713,"line":529},[711,13575,779],{"class":717},[21,13577,13578,13579,13581,13582,13584],{},"Quand ",[358,13580,13406],{}," devient plus grand que ",[358,13583,13412],{},", cela signifie qu'il n'y a plus d'élément à tester.",[16,13586,13588],{"id":13587},"_9-les-cas-limites-à-vérifier","9. Les cas limites à vérifier",[146,13590,13592],{"id":13591},"liste-vide","Liste vide",[350,13594,13596],{"className":12948,"code":13595,"language":12950,"meta":356,"style":356},"binarySearch([], 10);\n",[358,13597,13598],{"__ignoreMap":356},[711,13599,13600,13602,13605,13607],{"class":713,"line":714},[711,13601,13493],{"class":872},[711,13603,13604],{"class":717},"([], ",[711,13606,3239],{"class":764},[711,13608,1804],{"class":717},[21,13610,13611,13612,831],{},"Le résultat doit être ",[358,13613,13537],{},[146,13615,13617],{"id":13616},"un-seul-élément","Un seul élément",[350,13619,13621],{"className":12948,"code":13620,"language":12950,"meta":356,"style":356},"binarySearch([10], 10);\n",[358,13622,13623],{"__ignoreMap":356},[711,13624,13625,13627,13630,13632,13634,13636],{"class":713,"line":714},[711,13626,13493],{"class":872},[711,13628,13629],{"class":717},"([",[711,13631,3239],{"class":764},[711,13633,11322],{"class":717},[711,13635,3239],{"class":764},[711,13637,1804],{"class":717},[21,13639,13611,13640,831],{},[358,13641,1797],{},[146,13643,13645],{"id":13644},"valeur-absente","Valeur absente",[350,13647,13649],{"className":12948,"code":13648,"language":12950,"meta":356,"style":356},"binarySearch([1, 2, 3, 4], 8);\n",[358,13650,13651],{"__ignoreMap":356},[711,13652,13653,13655,13657,13659,13661,13663,13665,13667,13669,13671,13673,13675],{"class":713,"line":714},[711,13654,13493],{"class":872},[711,13656,13629],{"class":717},[711,13658,1935],{"class":764},[711,13660,1077],{"class":717},[711,13662,1571],{"class":764},[711,13664,1077],{"class":717},[711,13666,2831],{"class":764},[711,13668,1077],{"class":717},[711,13670,12973],{"class":764},[711,13672,11322],{"class":717},[711,13674,8922],{"class":764},[711,13676,1804],{"class":717},[21,13678,13611,13679,831],{},[358,13680,13537],{},[146,13682,13684],{"id":13683},"valeur-répétée","Valeur répétée",[21,13686,13687],{},"Si la valeur apparaît plusieurs fois, cette version renvoie l'un des indices trouvés, pas forcément le premier.",[16,13689,13691],{"id":13690},"_10-recherche-linéaire-ou-dichotomique","10. Recherche linéaire ou dichotomique ?",[146,13693,262],{"id":13694},"recherche-linéaire",[21,13696,13697],{},"Elle passe sur chaque élément un par un.",[21,13699,13700],{},"Elle est plus simple à écrire, mais moins efficace sur de grandes listes.",[146,13702,268],{"id":13703},"recherche-dichotomique",[21,13705,13706],{},"Elle est plus rapide, mais nécessite une liste triée.",[21,13708,13709],{},"Le choix dépend donc du contexte.",[16,13711,13713],{"id":13712},"_11-erreurs-fréquentes","11. Erreurs fréquentes",[146,13715,13717],{"id":13716},"oublier-de-trier-la-liste","Oublier de trier la liste",[21,13719,13720],{},"Si la liste n'est pas triée, la recherche dichotomique donne un résultat incorrect.",[146,13722,13724],{"id":13723},"mal-gérer-les-bornes","Mal gérer les bornes",[21,13726,13727,13728,1441,13730,13732],{},"Une erreur sur ",[358,13729,13406],{},[358,13731,13412],{}," peut casser tout l'algorithme.",[146,13734,13736],{"id":13735},"oublier-le-cas-non-trouvé","Oublier le cas \"non trouvé\"",[21,13738,13739],{},"La fonction doit toujours retourner quelque chose de clair quand la valeur n'existe pas.",[16,13741,12752],{"id":12751},[21,13743,13744],{},"La recherche dichotomique est un algorithme puissant pour retrouver une valeur dans une liste triée.",[21,13746,9637],{},[31,13748,13749,13752,13755,13758],{},[34,13750,13751],{},"la liste doit être triée ;",[34,13753,13754],{},"on coupe l'espace de recherche en deux à chaque étape ;",[34,13756,13757],{},"l'algorithme est rapide et très utilisé ;",[34,13759,13760],{},"il faut bien gérer les bornes et le cas où la valeur n'existe pas.",[16,13762,4552],{"id":4551},[146,13764,4556],{"id":4555},[21,13766,13767],{},"Implémentez la recherche dichotomique sur une liste de nombres triée.",[146,13769,4563],{"id":4562},[21,13771,13772],{},"Testez votre fonction avec une valeur présente et une valeur absente.",[146,13774,4570],{"id":4569},[21,13776,13777,13778,1441,13781,13784],{},"Modifiez la fonction pour qu'elle retourne ",[358,13779,13780],{},"true",[358,13782,13783],{},"false"," au lieu de l'index.",[146,13786,4577],{"id":4576},[21,13788,13789],{},"Essayez avec une liste vide.",[16,13791,4591],{"id":4590},[146,13793,4595],{"id":4594},[350,13795,13796],{"className":12948,"code":13177,"language":12950,"meta":356,"style":356},[358,13797,13798,13814,13826,13844,13848,13858,13882,13886,13896,13902,13906,13910,13920,13934,13942,13956,13960,13964,13968,13978],{"__ignoreMap":356},[711,13799,13800,13802,13804,13806,13808,13810,13812],{"class":713,"line":714},[711,13801,13184],{"class":1370},[711,13803,13187],{"class":872},[711,13805,1789],{"class":717},[711,13807,13192],{"class":3203},[711,13809,1077],{"class":717},[711,13811,13197],{"class":3203},[711,13813,3402],{"class":717},[711,13815,13816,13818,13820,13822,13824],{"class":713,"line":521},[711,13817,13204],{"class":1370},[711,13819,13207],{"class":717},[711,13821,887],{"class":1370},[711,13823,13212],{"class":764},[711,13825,774],{"class":717},[711,13827,13828,13830,13832,13834,13836,13838,13840,13842],{"class":713,"line":529},[711,13829,13204],{"class":1370},[711,13831,13221],{"class":717},[711,13833,887],{"class":1370},[711,13835,13226],{"class":717},[711,13837,13229],{"class":764},[711,13839,13232],{"class":1370},[711,13841,2919],{"class":764},[711,13843,774],{"class":717},[711,13845,13846],{"class":713,"line":906},[711,13847,1114],{"emptyLinePlaceholder":554},[711,13849,13850,13852,13854,13856],{"class":713,"line":925},[711,13851,13245],{"class":1370},[711,13853,13248],{"class":717},[711,13855,13251],{"class":1370},[711,13857,13254],{"class":717},[711,13859,13860,13862,13864,13866,13868,13870,13872,13874,13876,13878,13880],{"class":713,"line":950},[711,13861,13259],{"class":1370},[711,13863,13262],{"class":764},[711,13865,12963],{"class":1370},[711,13867,13267],{"class":717},[711,13869,13270],{"class":872},[711,13871,13273],{"class":717},[711,13873,10164],{"class":1370},[711,13875,13278],{"class":717},[711,13877,6140],{"class":1370},[711,13879,8670],{"class":764},[711,13881,1804],{"class":717},[711,13883,13884],{"class":713,"line":965},[711,13885,1114],{"emptyLinePlaceholder":554},[711,13887,13888,13890,13892,13894],{"class":713,"line":991},[711,13889,11039],{"class":1370},[711,13891,13295],{"class":717},[711,13893,13298],{"class":1370},[711,13895,13301],{"class":717},[711,13897,13898,13900],{"class":713,"line":1001},[711,13899,13306],{"class":1370},[711,13901,13309],{"class":717},[711,13903,13904],{"class":713,"line":1011},[711,13905,1223],{"class":717},[711,13907,13908],{"class":713,"line":1024},[711,13909,1114],{"emptyLinePlaceholder":554},[711,13911,13912,13914,13916,13918],{"class":713,"line":556},[711,13913,11039],{"class":1370},[711,13915,13295],{"class":717},[711,13917,718],{"class":1370},[711,13919,13301],{"class":717},[711,13921,13922,13924,13926,13928,13930,13932],{"class":713,"line":1046},[711,13923,13332],{"class":717},[711,13925,887],{"class":1370},[711,13927,13337],{"class":717},[711,13929,10164],{"class":1370},[711,13931,2919],{"class":764},[711,13933,774],{"class":717},[711,13935,13936,13938,13940],{"class":713,"line":3317},[711,13937,13348],{"class":717},[711,13939,13351],{"class":1370},[711,13941,759],{"class":717},[711,13943,13944,13946,13948,13950,13952,13954],{"class":713,"line":3574},[711,13945,13358],{"class":717},[711,13947,887],{"class":1370},[711,13949,13337],{"class":717},[711,13951,8656],{"class":1370},[711,13953,2919],{"class":764},[711,13955,774],{"class":717},[711,13957,13958],{"class":713,"line":3595},[711,13959,1223],{"class":717},[711,13961,13962],{"class":713,"line":3600},[711,13963,3248],{"class":717},[711,13965,13966],{"class":713,"line":3868},[711,13967,1114],{"emptyLinePlaceholder":554},[711,13969,13970,13972,13974,13976],{"class":713,"line":3888},[711,13971,13385],{"class":1370},[711,13973,13232],{"class":1370},[711,13975,1935],{"class":764},[711,13977,774],{"class":717},[711,13979,13980],{"class":713,"line":3908},[711,13981,779],{"class":717},[146,13983,4715],{"id":4714},[350,13985,13987],{"className":12948,"code":13986,"language":12950,"meta":356,"style":356},"function contains(array, target) {\n return binarySearch(array, target) !== -1;\n}\n",[358,13988,13989,14006,14024],{"__ignoreMap":356},[711,13990,13991,13993,13996,13998,14000,14002,14004],{"class":713,"line":714},[711,13992,13184],{"class":1370},[711,13994,13995],{"class":872}," contains",[711,13997,1789],{"class":717},[711,13999,13192],{"class":3203},[711,14001,1077],{"class":717},[711,14003,13197],{"class":3203},[711,14005,3402],{"class":717},[711,14007,14008,14010,14012,14015,14018,14020,14022],{"class":713,"line":521},[711,14009,13385],{"class":1370},[711,14011,13187],{"class":872},[711,14013,14014],{"class":717},"(array, target) ",[711,14016,14017],{"class":1370},"!==",[711,14019,13232],{"class":1370},[711,14021,1935],{"class":764},[711,14023,774],{"class":717},[711,14025,14026],{"class":713,"line":529},[711,14027,779],{"class":717},[16,14029,512],{"id":511},[21,14031,14032],{},"Une fois la recherche dichotomique comprise, il est naturel d'étudier les algorithmes de tri, car ils utilisent une logique très complémentaire.",[640,14034,14035],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":356,"searchDepth":521,"depth":521,"links":14037},[14038,14039,14040,14041,14042,14043,14044,14049,14052,14053,14055,14061,14065,14070,14071,14077,14081],{"id":18,"depth":521,"text":19},{"id":110,"depth":521,"text":111},{"id":12941,"depth":521,"text":12942},{"id":13016,"depth":521,"text":13017},{"id":13043,"depth":521,"text":13044},{"id":13066,"depth":521,"text":13067},{"id":13082,"depth":521,"text":13083,"children":14045},[14046,14047,14048],{"id":13138,"depth":529,"text":13139},{"id":13151,"depth":529,"text":13152},{"id":13160,"depth":529,"text":13161},{"id":13170,"depth":521,"text":13171,"children":14050},[14051],{"id":13398,"depth":529,"text":13399},{"id":13428,"depth":521,"text":13429},{"id":13541,"depth":521,"text":14054},"8. Le rôle de la boucle while",{"id":13587,"depth":521,"text":13588,"children":14056},[14057,14058,14059,14060],{"id":13591,"depth":529,"text":13592},{"id":13616,"depth":529,"text":13617},{"id":13644,"depth":529,"text":13645},{"id":13683,"depth":529,"text":13684},{"id":13690,"depth":521,"text":13691,"children":14062},[14063,14064],{"id":13694,"depth":529,"text":262},{"id":13703,"depth":529,"text":268},{"id":13712,"depth":521,"text":13713,"children":14066},[14067,14068,14069],{"id":13716,"depth":529,"text":13717},{"id":13723,"depth":529,"text":13724},{"id":13735,"depth":529,"text":13736},{"id":12751,"depth":521,"text":12752},{"id":4551,"depth":521,"text":4552,"children":14072},[14073,14074,14075,14076],{"id":4555,"depth":529,"text":4556},{"id":4562,"depth":529,"text":4563},{"id":4569,"depth":529,"text":4570},{"id":4576,"depth":529,"text":4577},{"id":4590,"depth":521,"text":4591,"children":14078},[14079,14080],{"id":4594,"depth":529,"text":4595},{"id":4714,"depth":529,"text":4715},{"id":511,"depth":521,"text":512},"Un tutoriel complet pour comprendre la recherche dichotomique, savoir quand l'utiliser et l'implémenter pas à pas en JavaScript.",{},{"title":12897,"description":14082},"blog\u002Frecherche-dichotomique",[560,268,562],"QnZ0l85P9Dxs9UWrKaA7A8ux2pajZEypUmSjJTp1990",{"id":14089,"title":14090,"body":14091,"coverImage":550,"description":14895,"extension":552,"meta":14896,"navigation":554,"path":73,"published":554,"publishedAt":555,"readTime":1024,"seo":14897,"stem":14898,"tags":14899,"__hash__":14901},"blog\u002Fblog\u002Frecherche-lineaire.md","La recherche linéaire expliquée simplement",{"type":8,"value":14092,"toc":14851},[14093,14097,14099,14102,14105,14108,14110,14112,14129,14131,14134,14169,14174,14177,14181,14184,14198,14202,14207,14237,14241,14249,14252,14256,14262,14265,14269,14275,14278,14282,14288,14291,14295,14395,14397,14410,14414,14492,14496,14499,14502,14513,14517,14519,14534,14539,14541,14560,14564,14566,14593,14597,14601,14603,14614,14616,14627,14631,14634,14637,14643,14649,14653,14656,14660,14663,14665,14679,14681,14683,14686,14688,14690,14692,14698,14700,14707,14709,14711,14801,14803,14844,14846,14849],[11,14094,14096],{"id":14095},"la-recherche-linéaire","La recherche linéaire",[16,14098,19],{"id":18},[21,14100,14101],{},"La recherche linéaire est l'algorithme le plus simple pour trouver une valeur dans une liste.",[21,14103,14104],{},"Le principe est très direct : on parcourt les éléments un par un jusqu'à trouver la valeur recherchée.",[21,14106,14107],{},"C'est une excellente base pour comprendre la logique de recherche.",[16,14109,111],{"id":110},[21,14111,5115],{},[31,14113,14114,14117,14120,14123,14126],{},[34,14115,14116],{},"comprendre le principe de la recherche linéaire ;",[34,14118,14119],{},"l'implémenter en JavaScript ;",[34,14121,14122],{},"suivre son exécution étape par étape ;",[34,14124,14125],{},"comprendre quand elle est utile ;",[34,14127,14128],{},"comparer cette méthode à la recherche dichotomique.",[16,14130,12942],{"id":12941},[21,14132,14133],{},"Imaginons cette liste :",[350,14135,14137],{"className":12948,"code":14136,"language":12950,"meta":356,"style":356},"const numbers = [8, 3, 12, 5, 20];\n",[358,14138,14139],{"__ignoreMap":356},[711,14140,14141,14143,14145,14147,14149,14151,14153,14155,14157,14159,14161,14163,14165,14167],{"class":713,"line":714},[711,14142,12957],{"class":1370},[711,14144,12960],{"class":764},[711,14146,12963],{"class":1370},[711,14148,12966],{"class":717},[711,14150,8922],{"class":764},[711,14152,1077],{"class":717},[711,14154,2831],{"class":764},[711,14156,1077],{"class":717},[711,14158,2570],{"class":764},[711,14160,1077],{"class":717},[711,14162,8891],{"class":764},[711,14164,1077],{"class":717},[711,14166,2097],{"class":764},[711,14168,13004],{"class":717},[21,14170,13007,14171,14173],{},[358,14172,8891],{},", vous pouvez commencer au début et vérifier chaque élément.",[21,14175,14176],{},"C'est exactement le rôle de la recherche linéaire.",[16,14178,14180],{"id":14179},"_2-lidée-de-la-recherche-linéaire","2. L'idée de la recherche linéaire",[21,14182,14183],{},"La logique est la suivante :",[60,14185,14186,14189,14192,14195],{},[34,14187,14188],{},"regarder le premier élément ;",[34,14190,14191],{},"comparer avec la valeur cherchée ;",[34,14193,14194],{},"si ce n'est pas bon, passer à l'élément suivant ;",[34,14196,14197],{},"recommencer jusqu'à trouver la valeur ou atteindre la fin.",[16,14199,14201],{"id":14200},"_3-exemple-pas-à-pas","3. Exemple pas à pas",[21,14203,13086,14204,14206],{},[358,14205,8891],{}," dans la liste suivante :",[350,14208,14210],{"className":12948,"code":14209,"language":12950,"meta":356,"style":356},"[8, 3, 12, 5, 20]\n",[358,14211,14212],{"__ignoreMap":356},[711,14213,14214,14217,14219,14221,14223,14225,14227,14229,14231,14233,14235],{"class":713,"line":714},[711,14215,14216],{"class":717},"[",[711,14218,8922],{"class":764},[711,14220,1077],{"class":717},[711,14222,2831],{"class":764},[711,14224,1077],{"class":717},[711,14226,2570],{"class":764},[711,14228,1077],{"class":717},[711,14230,8891],{"class":764},[711,14232,1077],{"class":717},[711,14234,2097],{"class":764},[711,14236,8937],{"class":717},[146,14238,14240],{"id":14239},"étape-1","Étape 1",[21,14242,14243,14244,14246,14247,831],{},"Comparer ",[358,14245,8922],{}," avec ",[358,14248,8891],{},[21,14250,14251],{},"Ce n'est pas la bonne valeur.",[146,14253,14255],{"id":14254},"étape-2","Étape 2",[21,14257,14243,14258,14246,14260,831],{},[358,14259,2831],{},[358,14261,8891],{},[21,14263,14264],{},"Ce n'est toujours pas la bonne valeur.",[146,14266,14268],{"id":14267},"étape-3","Étape 3",[21,14270,14243,14271,14246,14273,831],{},[358,14272,2570],{},[358,14274,8891],{},[21,14276,14277],{},"Toujours pas.",[146,14279,14281],{"id":14280},"étape-4","Étape 4",[21,14283,14243,14284,14246,14286,831],{},[358,14285,8891],{},[358,14287,8891],{},[21,14289,14290],{},"On a trouvé la valeur.",[16,14292,14294],{"id":14293},"_4-version-javascript","4. Version JavaScript",[350,14296,14298],{"className":12948,"code":14297,"language":12950,"meta":356,"style":356},"function linearSearch(array, target) {\n for (let i = 0; i \u003C array.length; i++) {\n if (array[i] === target) {\n return i;\n }\n }\n\n return -1;\n}\n",[358,14299,14300,14317,14351,14362,14369,14373,14377,14381,14391],{"__ignoreMap":356},[711,14301,14302,14304,14307,14309,14311,14313,14315],{"class":713,"line":714},[711,14303,13184],{"class":1370},[711,14305,14306],{"class":872}," linearSearch",[711,14308,1789],{"class":717},[711,14310,13192],{"class":3203},[711,14312,1077],{"class":717},[711,14314,13197],{"class":3203},[711,14316,3402],{"class":717},[711,14318,14319,14322,14324,14327,14330,14332,14334,14337,14339,14341,14343,14346,14349],{"class":713,"line":521},[711,14320,14321],{"class":1370}," for",[711,14323,3389],{"class":717},[711,14325,14326],{"class":1370},"let",[711,14328,14329],{"class":717}," i ",[711,14331,887],{"class":1370},[711,14333,13212],{"class":764},[711,14335,14336],{"class":717},"; i ",[711,14338,718],{"class":1370},[711,14340,13226],{"class":717},[711,14342,13229],{"class":764},[711,14344,14345],{"class":717},"; i",[711,14347,14348],{"class":1370},"++",[711,14350,3402],{"class":717},[711,14352,14353,14355,14358,14360],{"class":713,"line":529},[711,14354,11039],{"class":1370},[711,14356,14357],{"class":717}," (array[i] ",[711,14359,13298],{"class":1370},[711,14361,13301],{"class":717},[711,14363,14364,14366],{"class":713,"line":906},[711,14365,13306],{"class":1370},[711,14367,14368],{"class":717}," i;\n",[711,14370,14371],{"class":713,"line":925},[711,14372,1223],{"class":717},[711,14374,14375],{"class":713,"line":950},[711,14376,3248],{"class":717},[711,14378,14379],{"class":713,"line":965},[711,14380,1114],{"emptyLinePlaceholder":554},[711,14382,14383,14385,14387,14389],{"class":713,"line":991},[711,14384,13385],{"class":1370},[711,14386,13232],{"class":1370},[711,14388,1935],{"class":764},[711,14390,774],{"class":717},[711,14392,14393],{"class":713,"line":1001},[711,14394,779],{"class":717},[146,14396,2860],{"id":2859},[31,14398,14399,14402,14405],{},[34,14400,14401],{},"la boucle parcourt toute la liste ;",[34,14403,14404],{},"dès qu'on trouve la valeur, on retourne l'index ;",[34,14406,14407,14408,831],{},"si rien n'est trouvé, on retourne ",[358,14409,13537],{},[16,14411,14413],{"id":14412},"_5-exemple-dutilisation","5. Exemple d'utilisation",[350,14415,14417],{"className":12948,"code":14416,"language":12950,"meta":356,"style":356},"const numbers = [8, 3, 12, 5, 20];\n\nconsole.log(linearSearch(numbers, 5)); \u002F\u002F 3\nconsole.log(linearSearch(numbers, 99)); \u002F\u002F -1\n",[358,14418,14419,14449,14453,14473],{"__ignoreMap":356},[711,14420,14421,14423,14425,14427,14429,14431,14433,14435,14437,14439,14441,14443,14445,14447],{"class":713,"line":714},[711,14422,12957],{"class":1370},[711,14424,12960],{"class":764},[711,14426,12963],{"class":1370},[711,14428,12966],{"class":717},[711,14430,8922],{"class":764},[711,14432,1077],{"class":717},[711,14434,2831],{"class":764},[711,14436,1077],{"class":717},[711,14438,2570],{"class":764},[711,14440,1077],{"class":717},[711,14442,8891],{"class":764},[711,14444,1077],{"class":717},[711,14446,2097],{"class":764},[711,14448,13004],{"class":717},[711,14450,14451],{"class":713,"line":521},[711,14452,1114],{"emptyLinePlaceholder":554},[711,14454,14455,14457,14459,14461,14464,14466,14468,14470],{"class":713,"line":529},[711,14456,13485],{"class":717},[711,14458,13488],{"class":872},[711,14460,1789],{"class":717},[711,14462,14463],{"class":872},"linearSearch",[711,14465,13496],{"class":717},[711,14467,8891],{"class":764},[711,14469,13501],{"class":717},[711,14471,14472],{"class":10405},"\u002F\u002F 3\n",[711,14474,14475,14477,14479,14481,14483,14485,14488,14490],{"class":713,"line":906},[711,14476,13485],{"class":717},[711,14478,13488],{"class":872},[711,14480,1789],{"class":717},[711,14482,14463],{"class":872},[711,14484,13496],{"class":717},[711,14486,14487],{"class":764},"99",[711,14489,13501],{"class":717},[711,14491,13524],{"class":10405},[16,14493,14495],{"id":14494},"_6-pourquoi-cet-algorithme-est-utile","6. Pourquoi cet algorithme est utile",[21,14497,14498],{},"La recherche linéaire est simple et fonctionne sur n'importe quelle liste, triée ou non.",[21,14500,14501],{},"Elle est souvent utilisée quand :",[31,14503,14504,14507,14510],{},[34,14505,14506],{},"la liste est petite ;",[34,14508,14509],{},"les données ne sont pas triées ;",[34,14511,14512],{},"on veut une solution simple et lisible.",[16,14514,14516],{"id":14515},"_7-les-cas-limites","7. Les cas limites",[146,14518,13592],{"id":13591},[350,14520,14522],{"className":12948,"code":14521,"language":12950,"meta":356,"style":356},"linearSearch([], 10);\n",[358,14523,14524],{"__ignoreMap":356},[711,14525,14526,14528,14530,14532],{"class":713,"line":714},[711,14527,14463],{"class":872},[711,14529,13604],{"class":717},[711,14531,3239],{"class":764},[711,14533,1804],{"class":717},[21,14535,14536,14537],{},"Résultat : ",[358,14538,13537],{},[146,14540,13617],{"id":13616},[350,14542,14544],{"className":12948,"code":14543,"language":12950,"meta":356,"style":356},"linearSearch([10], 10);\n",[358,14545,14546],{"__ignoreMap":356},[711,14547,14548,14550,14552,14554,14556,14558],{"class":713,"line":714},[711,14549,14463],{"class":872},[711,14551,13629],{"class":717},[711,14553,3239],{"class":764},[711,14555,11322],{"class":717},[711,14557,3239],{"class":764},[711,14559,1804],{"class":717},[21,14561,14536,14562],{},[358,14563,1797],{},[146,14565,13645],{"id":13644},[350,14567,14569],{"className":12948,"code":14568,"language":12950,"meta":356,"style":356},"linearSearch([1, 2, 3], 8);\n",[358,14570,14571],{"__ignoreMap":356},[711,14572,14573,14575,14577,14579,14581,14583,14585,14587,14589,14591],{"class":713,"line":714},[711,14574,14463],{"class":872},[711,14576,13629],{"class":717},[711,14578,1935],{"class":764},[711,14580,1077],{"class":717},[711,14582,1571],{"class":764},[711,14584,1077],{"class":717},[711,14586,2831],{"class":764},[711,14588,11322],{"class":717},[711,14590,8922],{"class":764},[711,14592,1804],{"class":717},[21,14594,14536,14595],{},[358,14596,13537],{},[16,14598,14600],{"id":14599},"_8-recherche-linéaire-ou-dichotomique","8. Recherche linéaire ou dichotomique ?",[146,14602,262],{"id":13694},[31,14604,14605,14608,14611],{},[34,14606,14607],{},"fonctionne sur n'importe quelle liste ;",[34,14609,14610],{},"simple à écrire ;",[34,14612,14613],{},"parcourt tout élément potentiel.",[146,14615,268],{"id":13703},[31,14617,14618,14621,14624],{},[34,14619,14620],{},"nécessite une liste triée ;",[34,14622,14623],{},"est plus rapide sur de grandes listes ;",[34,14625,14626],{},"coupe la recherche en deux à chaque étape.",[16,14628,14630],{"id":14629},"_9-erreurs-fréquentes","9. Erreurs fréquentes",[146,14632,14633],{"id":13735},"Oublier le cas non trouvé",[21,14635,14636],{},"La fonction doit retourner quelque chose de clair si l'élément n'existe pas.",[146,14638,14640,14641],{"id":14639},"comparer-avec","Comparer avec ",[358,14642,11048],{},[21,14644,14645,14646,14648],{},"Préférez ",[358,14647,13298],{}," pour éviter les conversions implicites inattendues.",[146,14650,14652],{"id":14651},"ne-pas-parcourir-toute-la-liste","Ne pas parcourir toute la liste",[21,14654,14655],{},"Il faut bien vérifier chaque élément jusqu'à trouver la valeur ou atteindre la fin.",[16,14657,14659],{"id":14658},"_10-résumé","10. Résumé",[21,14661,14662],{},"La recherche linéaire est la méthode la plus simple pour trouver une valeur dans une liste.",[21,14664,9637],{},[31,14666,14667,14670,14673,14676],{},[34,14668,14669],{},"elle parcourt les éléments un par un ;",[34,14671,14672],{},"elle fonctionne sur les listes triées ou non ;",[34,14674,14675],{},"elle est simple mais moins efficace sur de grandes données ;",[34,14677,14678],{},"elle constitue une base essentielle avant d'apprendre la recherche dichotomique.",[16,14680,4552],{"id":4551},[146,14682,4556],{"id":4555},[21,14684,14685],{},"Implémentez la recherche linéaire en JavaScript.",[146,14687,4563],{"id":4562},[21,14689,13772],{},[146,14691,4570],{"id":4569},[21,14693,13777,14694,1441,14696,831],{},[358,14695,13780],{},[358,14697,13783],{},[146,14699,4577],{"id":4576},[21,14701,14702,14703,14706],{},"Ajoutez un ",[358,14704,14705],{},"console.log"," à chaque étape pour suivre la progression.",[16,14708,4591],{"id":4590},[146,14710,4595],{"id":4594},[350,14712,14713],{"className":12948,"code":14297,"language":12950,"meta":356,"style":356},[358,14714,14715,14731,14759,14769,14775,14779,14783,14787,14797],{"__ignoreMap":356},[711,14716,14717,14719,14721,14723,14725,14727,14729],{"class":713,"line":714},[711,14718,13184],{"class":1370},[711,14720,14306],{"class":872},[711,14722,1789],{"class":717},[711,14724,13192],{"class":3203},[711,14726,1077],{"class":717},[711,14728,13197],{"class":3203},[711,14730,3402],{"class":717},[711,14732,14733,14735,14737,14739,14741,14743,14745,14747,14749,14751,14753,14755,14757],{"class":713,"line":521},[711,14734,14321],{"class":1370},[711,14736,3389],{"class":717},[711,14738,14326],{"class":1370},[711,14740,14329],{"class":717},[711,14742,887],{"class":1370},[711,14744,13212],{"class":764},[711,14746,14336],{"class":717},[711,14748,718],{"class":1370},[711,14750,13226],{"class":717},[711,14752,13229],{"class":764},[711,14754,14345],{"class":717},[711,14756,14348],{"class":1370},[711,14758,3402],{"class":717},[711,14760,14761,14763,14765,14767],{"class":713,"line":529},[711,14762,11039],{"class":1370},[711,14764,14357],{"class":717},[711,14766,13298],{"class":1370},[711,14768,13301],{"class":717},[711,14770,14771,14773],{"class":713,"line":906},[711,14772,13306],{"class":1370},[711,14774,14368],{"class":717},[711,14776,14777],{"class":713,"line":925},[711,14778,1223],{"class":717},[711,14780,14781],{"class":713,"line":950},[711,14782,3248],{"class":717},[711,14784,14785],{"class":713,"line":965},[711,14786,1114],{"emptyLinePlaceholder":554},[711,14788,14789,14791,14793,14795],{"class":713,"line":991},[711,14790,13385],{"class":1370},[711,14792,13232],{"class":1370},[711,14794,1935],{"class":764},[711,14796,774],{"class":717},[711,14798,14799],{"class":713,"line":1001},[711,14800,779],{"class":717},[146,14802,4715],{"id":4714},[350,14804,14806],{"className":12948,"code":14805,"language":12950,"meta":356,"style":356},"function contains(array, target) {\n return linearSearch(array, target) !== -1;\n}\n",[358,14807,14808,14824,14840],{"__ignoreMap":356},[711,14809,14810,14812,14814,14816,14818,14820,14822],{"class":713,"line":714},[711,14811,13184],{"class":1370},[711,14813,13995],{"class":872},[711,14815,1789],{"class":717},[711,14817,13192],{"class":3203},[711,14819,1077],{"class":717},[711,14821,13197],{"class":3203},[711,14823,3402],{"class":717},[711,14825,14826,14828,14830,14832,14834,14836,14838],{"class":713,"line":521},[711,14827,13385],{"class":1370},[711,14829,14306],{"class":872},[711,14831,14014],{"class":717},[711,14833,14017],{"class":1370},[711,14835,13232],{"class":1370},[711,14837,1935],{"class":764},[711,14839,774],{"class":717},[711,14841,14842],{"class":713,"line":529},[711,14843,779],{"class":717},[16,14845,512],{"id":511},[21,14847,14848],{},"Une fois la recherche linéaire comprise, la recherche dichotomique devient beaucoup plus simple à apprendre.",[640,14850,14035],{},{"title":356,"searchDepth":521,"depth":521,"links":14852},[14853,14854,14855,14856,14857,14863,14866,14867,14868,14873,14877,14883,14884,14890,14894],{"id":18,"depth":521,"text":19},{"id":110,"depth":521,"text":111},{"id":12941,"depth":521,"text":12942},{"id":14179,"depth":521,"text":14180},{"id":14200,"depth":521,"text":14201,"children":14858},[14859,14860,14861,14862],{"id":14239,"depth":529,"text":14240},{"id":14254,"depth":529,"text":14255},{"id":14267,"depth":529,"text":14268},{"id":14280,"depth":529,"text":14281},{"id":14293,"depth":521,"text":14294,"children":14864},[14865],{"id":2859,"depth":529,"text":2860},{"id":14412,"depth":521,"text":14413},{"id":14494,"depth":521,"text":14495},{"id":14515,"depth":521,"text":14516,"children":14869},[14870,14871,14872],{"id":13591,"depth":529,"text":13592},{"id":13616,"depth":529,"text":13617},{"id":13644,"depth":529,"text":13645},{"id":14599,"depth":521,"text":14600,"children":14874},[14875,14876],{"id":13694,"depth":529,"text":262},{"id":13703,"depth":529,"text":268},{"id":14629,"depth":521,"text":14630,"children":14878},[14879,14880,14882],{"id":13735,"depth":529,"text":14633},{"id":14639,"depth":529,"text":14881},"Comparer avec ==",{"id":14651,"depth":529,"text":14652},{"id":14658,"depth":521,"text":14659},{"id":4551,"depth":521,"text":4552,"children":14885},[14886,14887,14888,14889],{"id":4555,"depth":529,"text":4556},{"id":4562,"depth":529,"text":4563},{"id":4569,"depth":529,"text":4570},{"id":4576,"depth":529,"text":4577},{"id":4590,"depth":521,"text":4591,"children":14891},[14892,14893],{"id":4594,"depth":529,"text":4595},{"id":4714,"depth":529,"text":4715},{"id":511,"depth":521,"text":512},"Un tutoriel complet pour comprendre la recherche linéaire, suivre son fonctionnement pas à pas et l'implémenter en JavaScript.",{},{"title":14090,"description":14895},"blog\u002Frecherche-lineaire",[560,14900,562],"Recherche","ZtRCMTMUvbP4_BuSatGhDAwBMbTnjD5VwhPPyQOJYKA",{"id":14903,"title":14904,"body":14905,"coverImage":550,"description":16106,"extension":552,"meta":16107,"navigation":554,"path":85,"published":554,"publishedAt":555,"readTime":1046,"seo":16108,"stem":16109,"tags":16110,"__hash__":16112},"blog\u002Fblog\u002Ftri-a-bulles.md","Le tri à bulles expliqué simplement",{"type":8,"value":14906,"toc":16065},[14907,14911,14913,14916,14919,14922,14924,14926,14942,14944,14947,14986,14989,14993,14996,15004,15007,15011,15014,15016,15019,15044,15048,15059,15061,15086,15090,15100,15102,15127,15131,15140,15143,15168,15170,15369,15373,15387,15389,15447,15449,15452,15466,15469,15471,15473,15485,15490,15492,15508,15513,15517,15544,15549,15553,15557,15560,15564,15570,15574,15577,15581,15584,15819,15822,15824,15827,15829,15843,15845,15847,15850,15852,15857,15859,15862,15864,15870,15872,15874,16050,16052,16058,16060,16063],[11,14908,14910],{"id":14909},"le-tri-à-bulles","Le tri à bulles",[16,14912,19],{"id":18},[21,14914,14915],{},"Le tri à bulles est l'un des algorithmes de tri les plus simples à comprendre.",[21,14917,14918],{},"Il n'est pas le plus rapide, mais il est très pédagogique.",[21,14920,14921],{},"Son principe est de comparer des éléments voisins et de les échanger s'ils ne sont pas dans le bon ordre.",[16,14923,111],{"id":110},[21,14925,5115],{},[31,14927,14928,14931,14934,14936,14939],{},[34,14929,14930],{},"comprendre le principe du tri à bulles ;",[34,14932,14933],{},"suivre les échanges étape par étape ;",[34,14935,12932],{},[34,14937,14938],{},"repérer ses limites ;",[34,14940,14941],{},"comprendre pourquoi il sert surtout à apprendre la logique du tri.",[16,14943,12942],{"id":12941},[21,14945,14946],{},"Imaginons une liste non triée :",[350,14948,14950],{"className":12948,"code":14949,"language":12950,"meta":356,"style":356},"const numbers = [5, 2, 9, 1, 5, 6];\n",[358,14951,14952],{"__ignoreMap":356},[711,14953,14954,14956,14958,14960,14962,14964,14966,14968,14970,14972,14974,14976,14978,14980,14982,14984],{"class":713,"line":714},[711,14955,12957],{"class":1370},[711,14957,12960],{"class":764},[711,14959,12963],{"class":1370},[711,14961,12966],{"class":717},[711,14963,8891],{"class":764},[711,14965,1077],{"class":717},[711,14967,1571],{"class":764},[711,14969,1077],{"class":717},[711,14971,13519],{"class":764},[711,14973,1077],{"class":717},[711,14975,1935],{"class":764},[711,14977,1077],{"class":717},[711,14979,8891],{"class":764},[711,14981,1077],{"class":717},[711,14983,8886],{"class":764},[711,14985,13004],{"class":717},[21,14987,14988],{},"Le but est de la remettre dans l'ordre croissant.",[16,14990,14992],{"id":14991},"_2-le-principe-du-tri-à-bulles","2. Le principe du tri à bulles",[21,14994,14995],{},"Le tri à bulles compare deux éléments voisins :",[31,14997,14998,15001],{},[34,14999,15000],{},"si l'ordre est correct, on ne fait rien ;",[34,15002,15003],{},"si l'ordre est incorrect, on les échange.",[21,15005,15006],{},"On répète cela plusieurs fois jusqu'à ce que la liste soit triée.",[146,15008,15010],{"id":15009},"image-mentale","Image mentale",[21,15012,15013],{},"Les plus grandes valeurs \"remontent\" progressivement vers la fin de la liste, comme des bulles dans l'eau. C'est pour cela que l'algorithme porte ce nom.",[16,15015,14201],{"id":14200},[21,15017,15018],{},"Avec la liste :",[350,15020,15022],{"className":12948,"code":15021,"language":12950,"meta":356,"style":356},"[5, 2, 9, 1]\n",[358,15023,15024],{"__ignoreMap":356},[711,15025,15026,15028,15030,15032,15034,15036,15038,15040,15042],{"class":713,"line":714},[711,15027,14216],{"class":717},[711,15029,8891],{"class":764},[711,15031,1077],{"class":717},[711,15033,1571],{"class":764},[711,15035,1077],{"class":717},[711,15037,13519],{"class":764},[711,15039,1077],{"class":717},[711,15041,1935],{"class":764},[711,15043,8937],{"class":717},[146,15045,15047],{"id":15046},"premier-passage","Premier passage",[31,15049,15050,15053,15056],{},[34,15051,15052],{},"comparer 5 et 2 → échange",[34,15054,15055],{},"comparer 5 et 9 → rien",[34,15057,15058],{},"comparer 9 et 1 → échange",[21,15060,12634],{},[350,15062,15064],{"className":12948,"code":15063,"language":12950,"meta":356,"style":356},"[2, 5, 1, 9]\n",[358,15065,15066],{"__ignoreMap":356},[711,15067,15068,15070,15072,15074,15076,15078,15080,15082,15084],{"class":713,"line":714},[711,15069,14216],{"class":717},[711,15071,1571],{"class":764},[711,15073,1077],{"class":717},[711,15075,8891],{"class":764},[711,15077,1077],{"class":717},[711,15079,1935],{"class":764},[711,15081,1077],{"class":717},[711,15083,13519],{"class":764},[711,15085,8937],{"class":717},[146,15087,15089],{"id":15088},"deuxième-passage","Deuxième passage",[31,15091,15092,15095,15098],{},[34,15093,15094],{},"comparer 2 et 5 → rien",[34,15096,15097],{},"comparer 5 et 1 → échange",[34,15099,15055],{},[21,15101,12634],{},[350,15103,15105],{"className":12948,"code":15104,"language":12950,"meta":356,"style":356},"[2, 1, 5, 9]\n",[358,15106,15107],{"__ignoreMap":356},[711,15108,15109,15111,15113,15115,15117,15119,15121,15123,15125],{"class":713,"line":714},[711,15110,14216],{"class":717},[711,15112,1571],{"class":764},[711,15114,1077],{"class":717},[711,15116,1935],{"class":764},[711,15118,1077],{"class":717},[711,15120,8891],{"class":764},[711,15122,1077],{"class":717},[711,15124,13519],{"class":764},[711,15126,8937],{"class":717},[146,15128,15130],{"id":15129},"troisième-passage","Troisième passage",[31,15132,15133,15136,15138],{},[34,15134,15135],{},"comparer 2 et 1 → échange",[34,15137,15094],{},[34,15139,15055],{},[21,15141,15142],{},"Résultat final :",[350,15144,15146],{"className":12948,"code":15145,"language":12950,"meta":356,"style":356},"[1, 2, 5, 9]\n",[358,15147,15148],{"__ignoreMap":356},[711,15149,15150,15152,15154,15156,15158,15160,15162,15164,15166],{"class":713,"line":714},[711,15151,14216],{"class":717},[711,15153,1935],{"class":764},[711,15155,1077],{"class":717},[711,15157,1571],{"class":764},[711,15159,1077],{"class":717},[711,15161,8891],{"class":764},[711,15163,1077],{"class":717},[711,15165,13519],{"class":764},[711,15167,8937],{"class":717},[16,15169,14294],{"id":14293},[350,15171,15173],{"className":12948,"code":15172,"language":12950,"meta":356,"style":356},"function bubbleSort(array) {\n const result = [...array];\n\n for (let i = 0; i \u003C result.length; i++) {\n for (let j = 0; j \u003C result.length - 1 - i; j++) {\n if (result[j] > result[j + 1]) {\n const temp = result[j];\n result[j] = result[j + 1];\n result[j + 1] = temp;\n }\n }\n }\n\n return result;\n}\n",[358,15174,15175,15188,15206,15210,15239,15276,15297,15310,15325,15341,15346,15350,15354,15358,15365],{"__ignoreMap":356},[711,15176,15177,15179,15182,15184,15186],{"class":713,"line":714},[711,15178,13184],{"class":1370},[711,15180,15181],{"class":872}," bubbleSort",[711,15183,1789],{"class":717},[711,15185,13192],{"class":3203},[711,15187,3402],{"class":717},[711,15189,15190,15193,15196,15198,15200,15203],{"class":713,"line":521},[711,15191,15192],{"class":1370}," const",[711,15194,15195],{"class":764}," result",[711,15197,12963],{"class":1370},[711,15199,12966],{"class":717},[711,15201,15202],{"class":1370},"...",[711,15204,15205],{"class":717},"array];\n",[711,15207,15208],{"class":713,"line":529},[711,15209,1114],{"emptyLinePlaceholder":554},[711,15211,15212,15214,15216,15218,15220,15222,15224,15226,15228,15231,15233,15235,15237],{"class":713,"line":906},[711,15213,14321],{"class":1370},[711,15215,3389],{"class":717},[711,15217,14326],{"class":1370},[711,15219,14329],{"class":717},[711,15221,887],{"class":1370},[711,15223,13212],{"class":764},[711,15225,14336],{"class":717},[711,15227,718],{"class":1370},[711,15229,15230],{"class":717}," result.",[711,15232,13229],{"class":764},[711,15234,14345],{"class":717},[711,15236,14348],{"class":1370},[711,15238,3402],{"class":717},[711,15240,15241,15243,15245,15247,15250,15252,15254,15257,15259,15261,15263,15265,15267,15269,15272,15274],{"class":713,"line":925},[711,15242,9092],{"class":1370},[711,15244,3389],{"class":717},[711,15246,14326],{"class":1370},[711,15248,15249],{"class":717}," j ",[711,15251,887],{"class":1370},[711,15253,13212],{"class":764},[711,15255,15256],{"class":717},"; j ",[711,15258,718],{"class":1370},[711,15260,15230],{"class":717},[711,15262,13229],{"class":764},[711,15264,13232],{"class":1370},[711,15266,2919],{"class":764},[711,15268,13232],{"class":1370},[711,15270,15271],{"class":717}," i; j",[711,15273,14348],{"class":1370},[711,15275,3402],{"class":717},[711,15277,15278,15281,15284,15287,15290,15292,15294],{"class":713,"line":950},[711,15279,15280],{"class":1370}," if",[711,15282,15283],{"class":717}," (result[j] ",[711,15285,15286],{"class":1370},">",[711,15288,15289],{"class":717}," result[j ",[711,15291,10164],{"class":1370},[711,15293,2919],{"class":764},[711,15295,15296],{"class":717},"]) {\n",[711,15298,15299,15302,15305,15307],{"class":713,"line":965},[711,15300,15301],{"class":1370}," const",[711,15303,15304],{"class":764}," temp",[711,15306,12963],{"class":1370},[711,15308,15309],{"class":717}," result[j];\n",[711,15311,15312,15315,15317,15319,15321,15323],{"class":713,"line":991},[711,15313,15314],{"class":717}," result[j] ",[711,15316,887],{"class":1370},[711,15318,15289],{"class":717},[711,15320,10164],{"class":1370},[711,15322,2919],{"class":764},[711,15324,13004],{"class":717},[711,15326,15327,15330,15332,15334,15336,15338],{"class":713,"line":1001},[711,15328,15329],{"class":717}," result[j ",[711,15331,10164],{"class":1370},[711,15333,2919],{"class":764},[711,15335,8653],{"class":717},[711,15337,887],{"class":1370},[711,15339,15340],{"class":717}," temp;\n",[711,15342,15343],{"class":713,"line":1011},[711,15344,15345],{"class":717}," }\n",[711,15347,15348],{"class":713,"line":1024},[711,15349,1223],{"class":717},[711,15351,15352],{"class":713,"line":556},[711,15353,3248],{"class":717},[711,15355,15356],{"class":713,"line":1046},[711,15357,1114],{"emptyLinePlaceholder":554},[711,15359,15360,15362],{"class":713,"line":3317},[711,15361,13385],{"class":1370},[711,15363,15364],{"class":717}," result;\n",[711,15366,15367],{"class":713,"line":3574},[711,15368,779],{"class":717},[146,15370,15372],{"id":15371},"ce-quil-faut-comprendre","Ce qu'il faut comprendre",[31,15374,15375,15378,15381,15384],{},[34,15376,15377],{},"on copie le tableau d'origine pour ne pas le modifier directement ;",[34,15379,15380],{},"la première boucle contrôle le nombre de passages ;",[34,15382,15383],{},"la deuxième boucle compare les éléments voisins ;",[34,15385,15386],{},"une variable temporaire sert à faire l'échange.",[16,15388,14413],{"id":14412},[350,15390,15392],{"className":12948,"code":15391,"language":12950,"meta":356,"style":356},"const numbers = [5, 2, 9, 1, 5, 6];\nconsole.log(bubbleSort(numbers));\n\u002F\u002F [1, 2, 5, 5, 6, 9]\n",[358,15393,15394,15428,15442],{"__ignoreMap":356},[711,15395,15396,15398,15400,15402,15404,15406,15408,15410,15412,15414,15416,15418,15420,15422,15424,15426],{"class":713,"line":714},[711,15397,12957],{"class":1370},[711,15399,12960],{"class":764},[711,15401,12963],{"class":1370},[711,15403,12966],{"class":717},[711,15405,8891],{"class":764},[711,15407,1077],{"class":717},[711,15409,1571],{"class":764},[711,15411,1077],{"class":717},[711,15413,13519],{"class":764},[711,15415,1077],{"class":717},[711,15417,1935],{"class":764},[711,15419,1077],{"class":717},[711,15421,8891],{"class":764},[711,15423,1077],{"class":717},[711,15425,8886],{"class":764},[711,15427,13004],{"class":717},[711,15429,15430,15432,15434,15436,15439],{"class":713,"line":521},[711,15431,13485],{"class":717},[711,15433,13488],{"class":872},[711,15435,1789],{"class":717},[711,15437,15438],{"class":872},"bubbleSort",[711,15440,15441],{"class":717},"(numbers));\n",[711,15443,15444],{"class":713,"line":529},[711,15445,15446],{"class":10405},"\u002F\u002F [1, 2, 5, 5, 6, 9]\n",[16,15448,14495],{"id":14494},[21,15450,15451],{},"Le tri à bulles est surtout intéressant pour apprendre :",[31,15453,15454,15457,15460,15463],{},[34,15455,15456],{},"les boucles imbriquées ;",[34,15458,15459],{},"les échanges de valeurs ;",[34,15461,15462],{},"la logique de tri ;",[34,15464,15465],{},"la lecture pas à pas d'un algorithme.",[21,15467,15468],{},"En revanche, il est rarement utilisé tel quel dans des projets réels, car il n'est pas très performant sur de grandes listes.",[16,15470,14516],{"id":14515},[146,15472,13592],{"id":13591},[350,15474,15476],{"className":12948,"code":15475,"language":12950,"meta":356,"style":356},"bubbleSort([]);\n",[358,15477,15478],{"__ignoreMap":356},[711,15479,15480,15482],{"class":713,"line":714},[711,15481,15438],{"class":872},[711,15483,15484],{"class":717},"([]);\n",[21,15486,14536,15487],{},[358,15488,15489],{},"[]",[146,15491,13617],{"id":13616},[350,15493,15495],{"className":12948,"code":15494,"language":12950,"meta":356,"style":356},"bubbleSort([10]);\n",[358,15496,15497],{"__ignoreMap":356},[711,15498,15499,15501,15503,15505],{"class":713,"line":714},[711,15500,15438],{"class":872},[711,15502,13629],{"class":717},[711,15504,3239],{"class":764},[711,15506,15507],{"class":717},"]);\n",[21,15509,14536,15510],{},[358,15511,15512],{},"[10]",[146,15514,15516],{"id":15515},"liste-déjà-triée","Liste déjà triée",[350,15518,15520],{"className":12948,"code":15519,"language":12950,"meta":356,"style":356},"bubbleSort([1, 2, 3, 4]);\n",[358,15521,15522],{"__ignoreMap":356},[711,15523,15524,15526,15528,15530,15532,15534,15536,15538,15540,15542],{"class":713,"line":714},[711,15525,15438],{"class":872},[711,15527,13629],{"class":717},[711,15529,1935],{"class":764},[711,15531,1077],{"class":717},[711,15533,1571],{"class":764},[711,15535,1077],{"class":717},[711,15537,2831],{"class":764},[711,15539,1077],{"class":717},[711,15541,12973],{"class":764},[711,15543,15507],{"class":717},[21,15545,14536,15546],{},[358,15547,15548],{},"[1, 2, 3, 4]",[16,15550,15552],{"id":15551},"_8-erreurs-fréquentes","8. Erreurs fréquentes",[146,15554,15556],{"id":15555},"oublier-de-copier-le-tableau","Oublier de copier le tableau",[21,15558,15559],{},"Si vous modifiez directement le tableau d'origine, vous pouvez créer des effets de bord inattendus.",[146,15561,15563],{"id":15562},"mal-placer-les-bornes","Mal placer les bornes",[21,15565,15566,15567,831],{},"La condition de la boucle interne doit éviter de comparer un élément avec ",[358,15568,15569],{},"undefined",[146,15571,15573],{"id":15572},"inverser-la-condition-déchange","Inverser la condition d'échange",[21,15575,15576],{},"L'échange doit se faire uniquement si l'élément de gauche est plus grand que celui de droite.",[16,15578,15580],{"id":15579},"_9-amélioration-simple","9. Amélioration simple",[21,15582,15583],{},"On peut arrêter plus tôt si aucun échange n'a eu lieu pendant un passage.",[350,15585,15587],{"className":12948,"code":15586,"language":12950,"meta":356,"style":356},"function bubbleSort(array) {\n const result = [...array];\n\n for (let i = 0; i \u003C result.length; i++) {\n let swapped = false;\n\n for (let j = 0; j \u003C result.length - 1 - i; j++) {\n if (result[j] > result[j + 1]) {\n const temp = result[j];\n result[j] = result[j + 1];\n result[j + 1] = temp;\n swapped = true;\n }\n }\n\n if (!swapped) {\n break;\n }\n }\n\n return result;\n}\n",[358,15588,15589,15601,15615,15619,15647,15662,15666,15700,15716,15726,15740,15754,15766,15770,15774,15778,15790,15797,15801,15805,15809,15815],{"__ignoreMap":356},[711,15590,15591,15593,15595,15597,15599],{"class":713,"line":714},[711,15592,13184],{"class":1370},[711,15594,15181],{"class":872},[711,15596,1789],{"class":717},[711,15598,13192],{"class":3203},[711,15600,3402],{"class":717},[711,15602,15603,15605,15607,15609,15611,15613],{"class":713,"line":521},[711,15604,15192],{"class":1370},[711,15606,15195],{"class":764},[711,15608,12963],{"class":1370},[711,15610,12966],{"class":717},[711,15612,15202],{"class":1370},[711,15614,15205],{"class":717},[711,15616,15617],{"class":713,"line":529},[711,15618,1114],{"emptyLinePlaceholder":554},[711,15620,15621,15623,15625,15627,15629,15631,15633,15635,15637,15639,15641,15643,15645],{"class":713,"line":906},[711,15622,14321],{"class":1370},[711,15624,3389],{"class":717},[711,15626,14326],{"class":1370},[711,15628,14329],{"class":717},[711,15630,887],{"class":1370},[711,15632,13212],{"class":764},[711,15634,14336],{"class":717},[711,15636,718],{"class":1370},[711,15638,15230],{"class":717},[711,15640,13229],{"class":764},[711,15642,14345],{"class":717},[711,15644,14348],{"class":1370},[711,15646,3402],{"class":717},[711,15648,15649,15652,15655,15657,15660],{"class":713,"line":925},[711,15650,15651],{"class":1370}," let",[711,15653,15654],{"class":717}," swapped ",[711,15656,887],{"class":1370},[711,15658,15659],{"class":764}," false",[711,15661,774],{"class":717},[711,15663,15664],{"class":713,"line":950},[711,15665,1114],{"emptyLinePlaceholder":554},[711,15667,15668,15670,15672,15674,15676,15678,15680,15682,15684,15686,15688,15690,15692,15694,15696,15698],{"class":713,"line":965},[711,15669,9092],{"class":1370},[711,15671,3389],{"class":717},[711,15673,14326],{"class":1370},[711,15675,15249],{"class":717},[711,15677,887],{"class":1370},[711,15679,13212],{"class":764},[711,15681,15256],{"class":717},[711,15683,718],{"class":1370},[711,15685,15230],{"class":717},[711,15687,13229],{"class":764},[711,15689,13232],{"class":1370},[711,15691,2919],{"class":764},[711,15693,13232],{"class":1370},[711,15695,15271],{"class":717},[711,15697,14348],{"class":1370},[711,15699,3402],{"class":717},[711,15701,15702,15704,15706,15708,15710,15712,15714],{"class":713,"line":991},[711,15703,15280],{"class":1370},[711,15705,15283],{"class":717},[711,15707,15286],{"class":1370},[711,15709,15289],{"class":717},[711,15711,10164],{"class":1370},[711,15713,2919],{"class":764},[711,15715,15296],{"class":717},[711,15717,15718,15720,15722,15724],{"class":713,"line":1001},[711,15719,15301],{"class":1370},[711,15721,15304],{"class":764},[711,15723,12963],{"class":1370},[711,15725,15309],{"class":717},[711,15727,15728,15730,15732,15734,15736,15738],{"class":713,"line":1011},[711,15729,15314],{"class":717},[711,15731,887],{"class":1370},[711,15733,15289],{"class":717},[711,15735,10164],{"class":1370},[711,15737,2919],{"class":764},[711,15739,13004],{"class":717},[711,15741,15742,15744,15746,15748,15750,15752],{"class":713,"line":1024},[711,15743,15329],{"class":717},[711,15745,10164],{"class":1370},[711,15747,2919],{"class":764},[711,15749,8653],{"class":717},[711,15751,887],{"class":1370},[711,15753,15340],{"class":717},[711,15755,15756,15759,15761,15764],{"class":713,"line":556},[711,15757,15758],{"class":717}," swapped ",[711,15760,887],{"class":1370},[711,15762,15763],{"class":764}," true",[711,15765,774],{"class":717},[711,15767,15768],{"class":713,"line":1046},[711,15769,15345],{"class":717},[711,15771,15772],{"class":713,"line":3317},[711,15773,1223],{"class":717},[711,15775,15776],{"class":713,"line":3574},[711,15777,1114],{"emptyLinePlaceholder":554},[711,15779,15780,15782,15784,15787],{"class":713,"line":3595},[711,15781,11039],{"class":1370},[711,15783,3389],{"class":717},[711,15785,15786],{"class":1370},"!",[711,15788,15789],{"class":717},"swapped) {\n",[711,15791,15792,15795],{"class":713,"line":3600},[711,15793,15794],{"class":1370}," break",[711,15796,774],{"class":717},[711,15798,15799],{"class":713,"line":3868},[711,15800,1223],{"class":717},[711,15802,15803],{"class":713,"line":3888},[711,15804,3248],{"class":717},[711,15806,15807],{"class":713,"line":3908},[711,15808,1114],{"emptyLinePlaceholder":554},[711,15810,15811,15813],{"class":713,"line":3928},[711,15812,13385],{"class":1370},[711,15814,15364],{"class":717},[711,15816,15817],{"class":713,"line":3937},[711,15818,779],{"class":717},[21,15820,15821],{},"Cette version est plus efficace si la liste est déjà presque triée.",[16,15823,14659],{"id":14658},[21,15825,15826],{},"Le tri à bulles est un excellent algorithme pour apprendre les bases du tri.",[21,15828,9637],{},[31,15830,15831,15834,15837,15840],{},[34,15832,15833],{},"il compare des éléments voisins ;",[34,15835,15836],{},"il échange quand l'ordre est mauvais ;",[34,15838,15839],{},"il répète plusieurs passages ;",[34,15841,15842],{},"il est simple à comprendre mais pas idéal pour les gros volumes.",[16,15844,4552],{"id":4551},[146,15846,4556],{"id":4555},[21,15848,15849],{},"Implémentez le tri à bulles sur un tableau de nombres.",[146,15851,4563],{"id":4562},[21,15853,14702,15854,15856],{},[358,15855,14705],{}," à chaque échange pour suivre l'évolution du tableau.",[146,15858,4570],{"id":4569},[21,15860,15861],{},"Modifiez l'algorithme pour trier dans l'ordre décroissant.",[146,15863,4577],{"id":4576},[21,15865,15866,15867,831],{},"Ajoutez l'optimisation avec le drapeau ",[358,15868,15869],{},"swapped",[16,15871,4591],{"id":4590},[146,15873,4595],{"id":4594},[350,15875,15876],{"className":12948,"code":15172,"language":12950,"meta":356,"style":356},[358,15877,15878,15890,15904,15908,15936,15970,15986,15996,16010,16024,16028,16032,16036,16040,16046],{"__ignoreMap":356},[711,15879,15880,15882,15884,15886,15888],{"class":713,"line":714},[711,15881,13184],{"class":1370},[711,15883,15181],{"class":872},[711,15885,1789],{"class":717},[711,15887,13192],{"class":3203},[711,15889,3402],{"class":717},[711,15891,15892,15894,15896,15898,15900,15902],{"class":713,"line":521},[711,15893,15192],{"class":1370},[711,15895,15195],{"class":764},[711,15897,12963],{"class":1370},[711,15899,12966],{"class":717},[711,15901,15202],{"class":1370},[711,15903,15205],{"class":717},[711,15905,15906],{"class":713,"line":529},[711,15907,1114],{"emptyLinePlaceholder":554},[711,15909,15910,15912,15914,15916,15918,15920,15922,15924,15926,15928,15930,15932,15934],{"class":713,"line":906},[711,15911,14321],{"class":1370},[711,15913,3389],{"class":717},[711,15915,14326],{"class":1370},[711,15917,14329],{"class":717},[711,15919,887],{"class":1370},[711,15921,13212],{"class":764},[711,15923,14336],{"class":717},[711,15925,718],{"class":1370},[711,15927,15230],{"class":717},[711,15929,13229],{"class":764},[711,15931,14345],{"class":717},[711,15933,14348],{"class":1370},[711,15935,3402],{"class":717},[711,15937,15938,15940,15942,15944,15946,15948,15950,15952,15954,15956,15958,15960,15962,15964,15966,15968],{"class":713,"line":925},[711,15939,9092],{"class":1370},[711,15941,3389],{"class":717},[711,15943,14326],{"class":1370},[711,15945,15249],{"class":717},[711,15947,887],{"class":1370},[711,15949,13212],{"class":764},[711,15951,15256],{"class":717},[711,15953,718],{"class":1370},[711,15955,15230],{"class":717},[711,15957,13229],{"class":764},[711,15959,13232],{"class":1370},[711,15961,2919],{"class":764},[711,15963,13232],{"class":1370},[711,15965,15271],{"class":717},[711,15967,14348],{"class":1370},[711,15969,3402],{"class":717},[711,15971,15972,15974,15976,15978,15980,15982,15984],{"class":713,"line":950},[711,15973,15280],{"class":1370},[711,15975,15283],{"class":717},[711,15977,15286],{"class":1370},[711,15979,15289],{"class":717},[711,15981,10164],{"class":1370},[711,15983,2919],{"class":764},[711,15985,15296],{"class":717},[711,15987,15988,15990,15992,15994],{"class":713,"line":965},[711,15989,15301],{"class":1370},[711,15991,15304],{"class":764},[711,15993,12963],{"class":1370},[711,15995,15309],{"class":717},[711,15997,15998,16000,16002,16004,16006,16008],{"class":713,"line":991},[711,15999,15314],{"class":717},[711,16001,887],{"class":1370},[711,16003,15289],{"class":717},[711,16005,10164],{"class":1370},[711,16007,2919],{"class":764},[711,16009,13004],{"class":717},[711,16011,16012,16014,16016,16018,16020,16022],{"class":713,"line":1001},[711,16013,15329],{"class":717},[711,16015,10164],{"class":1370},[711,16017,2919],{"class":764},[711,16019,8653],{"class":717},[711,16021,887],{"class":1370},[711,16023,15340],{"class":717},[711,16025,16026],{"class":713,"line":1011},[711,16027,15345],{"class":717},[711,16029,16030],{"class":713,"line":1024},[711,16031,1223],{"class":717},[711,16033,16034],{"class":713,"line":556},[711,16035,3248],{"class":717},[711,16037,16038],{"class":713,"line":1046},[711,16039,1114],{"emptyLinePlaceholder":554},[711,16041,16042,16044],{"class":713,"line":3317},[711,16043,13385],{"class":1370},[711,16045,15364],{"class":717},[711,16047,16048],{"class":713,"line":3574},[711,16049,779],{"class":717},[146,16051,4715],{"id":4714},[350,16053,16056],{"className":16054,"code":16055,"language":355,"meta":356},[353],"Si l'élément de gauche est plus petit que celui de droite, on échange.\n",[358,16057,16055],{"__ignoreMap":356},[16,16059,512],{"id":511},[21,16061,16062],{},"Après le tri à bulles, le tri par insertion est une excellente suite, car il repose sur une logique plus naturelle et plus proche de la manière dont on trie parfois des cartes à la main.",[640,16064,14035],{},{"title":356,"searchDepth":521,"depth":521,"links":16066},[16067,16068,16069,16070,16073,16078,16081,16082,16083,16088,16093,16094,16095,16101,16105],{"id":18,"depth":521,"text":19},{"id":110,"depth":521,"text":111},{"id":12941,"depth":521,"text":12942},{"id":14991,"depth":521,"text":14992,"children":16071},[16072],{"id":15009,"depth":529,"text":15010},{"id":14200,"depth":521,"text":14201,"children":16074},[16075,16076,16077],{"id":15046,"depth":529,"text":15047},{"id":15088,"depth":529,"text":15089},{"id":15129,"depth":529,"text":15130},{"id":14293,"depth":521,"text":14294,"children":16079},[16080],{"id":15371,"depth":529,"text":15372},{"id":14412,"depth":521,"text":14413},{"id":14494,"depth":521,"text":14495},{"id":14515,"depth":521,"text":14516,"children":16084},[16085,16086,16087],{"id":13591,"depth":529,"text":13592},{"id":13616,"depth":529,"text":13617},{"id":15515,"depth":529,"text":15516},{"id":15551,"depth":521,"text":15552,"children":16089},[16090,16091,16092],{"id":15555,"depth":529,"text":15556},{"id":15562,"depth":529,"text":15563},{"id":15572,"depth":529,"text":15573},{"id":15579,"depth":521,"text":15580},{"id":14658,"depth":521,"text":14659},{"id":4551,"depth":521,"text":4552,"children":16096},[16097,16098,16099,16100],{"id":4555,"depth":529,"text":4556},{"id":4562,"depth":529,"text":4563},{"id":4569,"depth":529,"text":4570},{"id":4576,"depth":529,"text":4577},{"id":4590,"depth":521,"text":4591,"children":16102},[16103,16104],{"id":4594,"depth":529,"text":4595},{"id":4714,"depth":529,"text":4715},{"id":511,"depth":521,"text":512},"Un tutoriel complet pour comprendre le tri à bulles, suivre chaque échange pas à pas et voir comment transformer une liste désordonnée en liste triée.",{},{"title":14904,"description":16106},"blog\u002Ftri-a-bulles",[560,16111,562],"Tri","_U7cncuI7Ti3_vEemLfSqg7uF5gWAAaWjmDPMpeLp0s",{"id":16114,"title":16115,"body":16116,"coverImage":550,"description":17294,"extension":552,"meta":17295,"navigation":554,"path":97,"published":554,"publishedAt":555,"readTime":3595,"seo":17296,"stem":17297,"tags":17298,"__hash__":17299},"blog\u002Fblog\u002Ftri-fusion.md","Le tri fusion expliqué simplement",{"type":8,"value":16117,"toc":17253},[16118,16122,16124,16127,16130,16136,16138,16140,16156,16158,16161,16208,16211,16215,16218,16229,16233,16237,16246,16250,16265,16269,16296,16299,16303,16306,16308,16317,16319,16325,16329,16656,16658,16674,16678,16742,16746,16749,16752,16756,16759,16762,16766,16795,16798,16802,16806,16817,16821,16823,16838,16842,16846,16873,16877,16881,16885,16888,16892,16895,16899,16902,16906,16909,16911,16925,16927,16929,16932,16934,16937,16939,16942,16944,16950,16952,16954,17246,17248,17251],[11,16119,16121],{"id":16120},"le-tri-fusion","Le tri fusion",[16,16123,19],{"id":18},[21,16125,16126],{},"Le tri fusion est un algorithme de tri plus avancé que le tri à bulles ou le tri par insertion.",[21,16128,16129],{},"Il repose sur une idée très puissante : diviser une liste en deux parties, trier chaque partie séparément, puis les fusionner.",[21,16131,16132,16133,831],{},"Cette stratégie s'appelle le ",[260,16134,16135],{},"divide and conquer",[16,16137,111],{"id":110},[21,16139,5115],{},[31,16141,16142,16145,16148,16150,16153],{},[34,16143,16144],{},"comprendre le principe du tri fusion ;",[34,16146,16147],{},"voir pourquoi il est plus performant que les tris simples ;",[34,16149,12932],{},[34,16151,16152],{},"comprendre la notion de récursion ;",[34,16154,16155],{},"suivre l'étape de fusion pas à pas.",[16,16157,12942],{"id":12941},[21,16159,16160],{},"Prenons cette liste :",[350,16162,16164],{"className":12948,"code":16163,"language":12950,"meta":356,"style":356},"const numbers = [8, 4, 2, 9, 5, 1, 6, 3];\n",[358,16165,16166],{"__ignoreMap":356},[711,16167,16168,16170,16172,16174,16176,16178,16180,16182,16184,16186,16188,16190,16192,16194,16196,16198,16200,16202,16204,16206],{"class":713,"line":714},[711,16169,12957],{"class":1370},[711,16171,12960],{"class":764},[711,16173,12963],{"class":1370},[711,16175,12966],{"class":717},[711,16177,8922],{"class":764},[711,16179,1077],{"class":717},[711,16181,12973],{"class":764},[711,16183,1077],{"class":717},[711,16185,1571],{"class":764},[711,16187,1077],{"class":717},[711,16189,13519],{"class":764},[711,16191,1077],{"class":717},[711,16193,8891],{"class":764},[711,16195,1077],{"class":717},[711,16197,1935],{"class":764},[711,16199,1077],{"class":717},[711,16201,8886],{"class":764},[711,16203,1077],{"class":717},[711,16205,2831],{"class":764},[711,16207,13004],{"class":717},[21,16209,16210],{},"Le but est de la trier dans l'ordre croissant.",[16,16212,16214],{"id":16213},"_2-lidée-du-tri-fusion","2. L'idée du tri fusion",[21,16216,16217],{},"Le tri fusion fonctionne en trois temps :",[60,16219,16220,16223,16226],{},[34,16221,16222],{},"découper la liste en deux ;",[34,16224,16225],{},"trier récursivement chaque moitié ;",[34,16227,16228],{},"fusionner les deux moitiés triées.",[16,16230,16232],{"id":16231},"_3-exemple-visuel","3. Exemple visuel",[146,16234,16236],{"id":16235},"découpage","Découpage",[21,16238,16239,16240,1913,16243,831],{},"On peut voir la liste comme deux moitiés : ",[358,16241,16242],{},"[8, 4, 2, 9]",[358,16244,16245],{},"[5, 1, 6, 3]",[146,16247,16249],{"id":16248},"nouveau-découpage","Nouveau découpage",[21,16251,16252,16253,1077,16256,1077,16259,1077,16262,831],{},"On découpe encore : ",[358,16254,16255],{},"[8, 4]",[358,16257,16258],{},"[2, 9]",[358,16260,16261],{},"[5, 1]",[358,16263,16264],{},"[6, 3]",[146,16266,16268],{"id":16267},"puis-encore","Puis encore",[21,16270,16271,16272,1077,16275,1077,16278,1077,16281,1077,16284,1077,16287,1077,16290,1077,16293,831],{},"On continue jusqu'à obtenir des listes d'un seul élément : ",[358,16273,16274],{},"[8]",[358,16276,16277],{},"[4]",[358,16279,16280],{},"[2]",[358,16282,16283],{},"[9]",[358,16285,16286],{},"[5]",[358,16288,16289],{},"[1]",[358,16291,16292],{},"[6]",[358,16294,16295],{},"[3]",[21,16297,16298],{},"Chaque petit tableau est déjà trié par définition, car il ne contient qu'un seul élément.",[16,16300,16302],{"id":16301},"_4-la-fusion","4. La fusion",[21,16304,16305],{},"La fusion consiste à prendre deux tableaux triés et à les réunir dans le bon ordre.",[21,16307,348],{},[21,16309,16310,16311,1913,16314,831],{},"Par exemple : ",[358,16312,16313],{},"[2, 8]",[358,16315,16316],{},"[4, 9]",[21,16318,12634],{},[21,16320,16321,16322,831],{},"Le résultat fusionné est : ",[358,16323,16324],{},"[2, 4, 8, 9]",[16,16326,16328],{"id":16327},"_5-version-javascript","5. Version JavaScript",[350,16330,16332],{"className":12948,"code":16331,"language":12950,"meta":356,"style":356},"function merge(left, right) {\n const result = [];\n let i = 0;\n let j = 0;\n\n while (i \u003C left.length && j \u003C right.length) {\n if (left[i] \u003C= right[j]) {\n result.push(left[i]);\n i++;\n } else {\n result.push(right[j]);\n j++;\n }\n }\n\n return result.concat(left.slice(i)).concat(right.slice(j));\n}\n\nfunction mergeSort(array) {\n if (array.length \u003C= 1) {\n return array;\n }\n\n const middle = Math.floor(array.length \u002F 2);\n const left = array.slice(0, middle);\n const right = array.slice(middle);\n\n return merge(mergeSort(left), mergeSort(right));\n}\n",[358,16333,16334,16351,16362,16374,16386,16390,16418,16430,16441,16450,16458,16467,16476,16480,16484,16488,16516,16520,16524,16537,16554,16561,16565,16569,16593,16613,16629,16633,16652],{"__ignoreMap":356},[711,16335,16336,16338,16341,16343,16345,16347,16349],{"class":713,"line":714},[711,16337,13184],{"class":1370},[711,16339,16340],{"class":872}," merge",[711,16342,1789],{"class":717},[711,16344,13406],{"class":3203},[711,16346,1077],{"class":717},[711,16348,13412],{"class":3203},[711,16350,3402],{"class":717},[711,16352,16353,16355,16357,16359],{"class":713,"line":521},[711,16354,15192],{"class":1370},[711,16356,15195],{"class":764},[711,16358,12963],{"class":1370},[711,16360,16361],{"class":717}," [];\n",[711,16363,16364,16366,16368,16370,16372],{"class":713,"line":529},[711,16365,13204],{"class":1370},[711,16367,14329],{"class":717},[711,16369,887],{"class":1370},[711,16371,13212],{"class":764},[711,16373,774],{"class":717},[711,16375,16376,16378,16380,16382,16384],{"class":713,"line":906},[711,16377,13204],{"class":1370},[711,16379,15249],{"class":717},[711,16381,887],{"class":1370},[711,16383,13212],{"class":764},[711,16385,774],{"class":717},[711,16387,16388],{"class":713,"line":925},[711,16389,1114],{"emptyLinePlaceholder":554},[711,16391,16392,16394,16397,16399,16402,16404,16407,16409,16411,16414,16416],{"class":713,"line":950},[711,16393,13245],{"class":1370},[711,16395,16396],{"class":717}," (i ",[711,16398,718],{"class":1370},[711,16400,16401],{"class":717}," left.",[711,16403,13229],{"class":764},[711,16405,16406],{"class":1370}," &&",[711,16408,15249],{"class":717},[711,16410,718],{"class":1370},[711,16412,16413],{"class":717}," right.",[711,16415,13229],{"class":764},[711,16417,3402],{"class":717},[711,16419,16420,16422,16425,16427],{"class":713,"line":965},[711,16421,11039],{"class":1370},[711,16423,16424],{"class":717}," (left[i] ",[711,16426,13251],{"class":1370},[711,16428,16429],{"class":717}," right[j]) {\n",[711,16431,16432,16435,16438],{"class":713,"line":991},[711,16433,16434],{"class":717}," result.",[711,16436,16437],{"class":872},"push",[711,16439,16440],{"class":717},"(left[i]);\n",[711,16442,16443,16446,16448],{"class":713,"line":1001},[711,16444,16445],{"class":717}," i",[711,16447,14348],{"class":1370},[711,16449,774],{"class":717},[711,16451,16452,16454,16456],{"class":713,"line":1011},[711,16453,13348],{"class":717},[711,16455,13351],{"class":1370},[711,16457,759],{"class":717},[711,16459,16460,16462,16464],{"class":713,"line":1024},[711,16461,16434],{"class":717},[711,16463,16437],{"class":872},[711,16465,16466],{"class":717},"(right[j]);\n",[711,16468,16469,16472,16474],{"class":713,"line":556},[711,16470,16471],{"class":717}," j",[711,16473,14348],{"class":1370},[711,16475,774],{"class":717},[711,16477,16478],{"class":713,"line":1046},[711,16479,1223],{"class":717},[711,16481,16482],{"class":713,"line":3317},[711,16483,3248],{"class":717},[711,16485,16486],{"class":713,"line":3574},[711,16487,1114],{"emptyLinePlaceholder":554},[711,16489,16490,16492,16494,16497,16500,16503,16506,16508,16511,16513],{"class":713,"line":3595},[711,16491,13385],{"class":1370},[711,16493,15230],{"class":717},[711,16495,16496],{"class":872},"concat",[711,16498,16499],{"class":717},"(left.",[711,16501,16502],{"class":872},"slice",[711,16504,16505],{"class":717},"(i)).",[711,16507,16496],{"class":872},[711,16509,16510],{"class":717},"(right.",[711,16512,16502],{"class":872},[711,16514,16515],{"class":717},"(j));\n",[711,16517,16518],{"class":713,"line":3600},[711,16519,779],{"class":717},[711,16521,16522],{"class":713,"line":3868},[711,16523,1114],{"emptyLinePlaceholder":554},[711,16525,16526,16528,16531,16533,16535],{"class":713,"line":3888},[711,16527,13184],{"class":1370},[711,16529,16530],{"class":872}," mergeSort",[711,16532,1789],{"class":717},[711,16534,13192],{"class":3203},[711,16536,3402],{"class":717},[711,16538,16539,16542,16545,16547,16550,16552],{"class":713,"line":3908},[711,16540,16541],{"class":1370}," if",[711,16543,16544],{"class":717}," (array.",[711,16546,13229],{"class":764},[711,16548,16549],{"class":1370}," \u003C=",[711,16551,2919],{"class":764},[711,16553,3402],{"class":717},[711,16555,16556,16558],{"class":713,"line":3928},[711,16557,8645],{"class":1370},[711,16559,16560],{"class":717}," array;\n",[711,16562,16563],{"class":713,"line":3937},[711,16564,3248],{"class":717},[711,16566,16567],{"class":713,"line":3946},[711,16568,1114],{"emptyLinePlaceholder":554},[711,16570,16571,16573,16575,16577,16579,16581,16584,16586,16589,16591],{"class":713,"line":4162},[711,16572,15192],{"class":1370},[711,16574,13262],{"class":764},[711,16576,12963],{"class":1370},[711,16578,13267],{"class":717},[711,16580,13270],{"class":872},[711,16582,16583],{"class":717},"(array.",[711,16585,13229],{"class":764},[711,16587,16588],{"class":1370}," \u002F",[711,16590,8670],{"class":764},[711,16592,1804],{"class":717},[711,16594,16595,16597,16600,16602,16604,16606,16608,16610],{"class":713,"line":4167},[711,16596,15192],{"class":1370},[711,16598,16599],{"class":764}," left",[711,16601,12963],{"class":1370},[711,16603,13226],{"class":717},[711,16605,16502],{"class":872},[711,16607,1789],{"class":717},[711,16609,1797],{"class":764},[711,16611,16612],{"class":717},", middle);\n",[711,16614,16615,16617,16620,16622,16624,16626],{"class":713,"line":4172},[711,16616,15192],{"class":1370},[711,16618,16619],{"class":764}," right",[711,16621,12963],{"class":1370},[711,16623,13226],{"class":717},[711,16625,16502],{"class":872},[711,16627,16628],{"class":717},"(middle);\n",[711,16630,16631],{"class":713,"line":4180},[711,16632,1114],{"emptyLinePlaceholder":554},[711,16634,16635,16637,16639,16641,16644,16647,16649],{"class":713,"line":4195},[711,16636,13385],{"class":1370},[711,16638,16340],{"class":872},[711,16640,1789],{"class":717},[711,16642,16643],{"class":872},"mergeSort",[711,16645,16646],{"class":717},"(left), ",[711,16648,16643],{"class":872},[711,16650,16651],{"class":717},"(right));\n",[711,16653,16654],{"class":713,"line":4209},[711,16655,779],{"class":717},[146,16657,2860],{"id":2859},[31,16659,16660,16665,16671],{},[34,16661,16662,16664],{},[358,16663,16643],{}," coupe la liste en deux jusqu'à obtenir des sous-listes d'un élément ;",[34,16666,16667,16670],{},[358,16668,16669],{},"merge"," compare ensuite les deux listes triées ;",[34,16672,16673],{},"le résultat final est une nouvelle liste triée.",[16,16675,16677],{"id":16676},"_6-exemple-dutilisation","6. Exemple d'utilisation",[350,16679,16681],{"className":12948,"code":16680,"language":12950,"meta":356,"style":356},"const numbers = [8, 4, 2, 9, 5, 1, 6, 3];\nconsole.log(mergeSort(numbers));\n\u002F\u002F [1, 2, 3, 4, 5, 6, 8, 9]\n",[358,16682,16683,16725,16737],{"__ignoreMap":356},[711,16684,16685,16687,16689,16691,16693,16695,16697,16699,16701,16703,16705,16707,16709,16711,16713,16715,16717,16719,16721,16723],{"class":713,"line":714},[711,16686,12957],{"class":1370},[711,16688,12960],{"class":764},[711,16690,12963],{"class":1370},[711,16692,12966],{"class":717},[711,16694,8922],{"class":764},[711,16696,1077],{"class":717},[711,16698,12973],{"class":764},[711,16700,1077],{"class":717},[711,16702,1571],{"class":764},[711,16704,1077],{"class":717},[711,16706,13519],{"class":764},[711,16708,1077],{"class":717},[711,16710,8891],{"class":764},[711,16712,1077],{"class":717},[711,16714,1935],{"class":764},[711,16716,1077],{"class":717},[711,16718,8886],{"class":764},[711,16720,1077],{"class":717},[711,16722,2831],{"class":764},[711,16724,13004],{"class":717},[711,16726,16727,16729,16731,16733,16735],{"class":713,"line":521},[711,16728,13485],{"class":717},[711,16730,13488],{"class":872},[711,16732,1789],{"class":717},[711,16734,16643],{"class":872},[711,16736,15441],{"class":717},[711,16738,16739],{"class":713,"line":529},[711,16740,16741],{"class":10405},"\u002F\u002F [1, 2, 3, 4, 5, 6, 8, 9]\n",[16,16743,16745],{"id":16744},"_7-pourquoi-le-tri-fusion-est-intéressant","7. Pourquoi le tri fusion est intéressant",[21,16747,16748],{},"Le tri fusion est plus performant que les tris simples sur de grandes listes.",[21,16750,16751],{},"Il est aussi très régulier : même si les données sont déjà presque triées, il garde une bonne stabilité de fonctionnement.",[16,16753,16755],{"id":16754},"_8-le-rôle-de-la-récursion","8. Le rôle de la récursion",[21,16757,16758],{},"La récursion consiste à appeler une fonction elle-même.",[21,16760,16761],{},"Dans le tri fusion, cela permet de continuer à découper la liste jusqu'au cas le plus simple : une liste d'un seul élément.",[146,16763,16765],{"id":16764},"cas-de-base","Cas de base",[350,16767,16769],{"className":12948,"code":16768,"language":12950,"meta":356,"style":356},"if (array.length \u003C= 1) {\n return array;\n}\n",[358,16770,16771,16785,16791],{"__ignoreMap":356},[711,16772,16773,16775,16777,16779,16781,16783],{"class":713,"line":714},[711,16774,12502],{"class":1370},[711,16776,16544],{"class":717},[711,16778,13229],{"class":764},[711,16780,16549],{"class":1370},[711,16782,2919],{"class":764},[711,16784,3402],{"class":717},[711,16786,16787,16789],{"class":713,"line":521},[711,16788,13385],{"class":1370},[711,16790,16560],{"class":717},[711,16792,16793],{"class":713,"line":529},[711,16794,779],{"class":717},[21,16796,16797],{},"Ce cas de base est indispensable pour éviter une boucle infinie.",[16,16799,16801],{"id":16800},"_9-les-cas-limites","9. Les cas limites",[146,16803,16805],{"id":16804},"tableau-vide","Tableau vide",[350,16807,16809],{"className":12948,"code":16808,"language":12950,"meta":356,"style":356},"mergeSort([]);\n",[358,16810,16811],{"__ignoreMap":356},[711,16812,16813,16815],{"class":713,"line":714},[711,16814,16643],{"class":872},[711,16816,15484],{"class":717},[21,16818,14536,16819],{},[358,16820,15489],{},[146,16822,13617],{"id":13616},[350,16824,16826],{"className":12948,"code":16825,"language":12950,"meta":356,"style":356},"mergeSort([10]);\n",[358,16827,16828],{"__ignoreMap":356},[711,16829,16830,16832,16834,16836],{"class":713,"line":714},[711,16831,16643],{"class":872},[711,16833,13629],{"class":717},[711,16835,3239],{"class":764},[711,16837,15507],{"class":717},[21,16839,14536,16840],{},[358,16841,15512],{},[146,16843,16845],{"id":16844},"tableau-déjà-trié","Tableau déjà trié",[350,16847,16849],{"className":12948,"code":16848,"language":12950,"meta":356,"style":356},"mergeSort([1, 2, 3, 4]);\n",[358,16850,16851],{"__ignoreMap":356},[711,16852,16853,16855,16857,16859,16861,16863,16865,16867,16869,16871],{"class":713,"line":714},[711,16854,16643],{"class":872},[711,16856,13629],{"class":717},[711,16858,1935],{"class":764},[711,16860,1077],{"class":717},[711,16862,1571],{"class":764},[711,16864,1077],{"class":717},[711,16866,2831],{"class":764},[711,16868,1077],{"class":717},[711,16870,12973],{"class":764},[711,16872,15507],{"class":717},[21,16874,14536,16875],{},[358,16876,15548],{},[16,16878,16880],{"id":16879},"_10-erreurs-fréquentes","10. Erreurs fréquentes",[146,16882,16884],{"id":16883},"oublier-le-cas-de-base","Oublier le cas de base",[21,16886,16887],{},"Sans condition d'arrêt, la récursion ne s'arrête jamais.",[146,16889,16891],{"id":16890},"mélanger-fusion-et-découpage","Mélanger fusion et découpage",[21,16893,16894],{},"Le découpage et la fusion sont deux étapes différentes.",[146,16896,16898],{"id":16897},"modifier-le-tableau-dorigine-sans-le-vouloir","Modifier le tableau d'origine sans le vouloir",[21,16900,16901],{},"Il est préférable de retourner une nouvelle liste pour garder la fonction plus propre.",[16,16903,16905],{"id":16904},"_11-résumé","11. Résumé",[21,16907,16908],{},"Le tri fusion est un algorithme puissant et élégant.",[21,16910,9637],{},[31,16912,16913,16916,16919,16922],{},[34,16914,16915],{},"il divise la liste en deux ;",[34,16917,16918],{},"il trie récursivement chaque partie ;",[34,16920,16921],{},"il fusionne les résultats ;",[34,16923,16924],{},"il est plus performant que les tris simples sur les grandes listes.",[16,16926,4552],{"id":4551},[146,16928,4556],{"id":4555},[21,16930,16931],{},"Implémentez le tri fusion en JavaScript.",[146,16933,4563],{"id":4562},[21,16935,16936],{},"Testez la fonction avec une liste vide.",[146,16938,4570],{"id":4569},[21,16940,16941],{},"Testez la fonction avec une liste déjà triée.",[146,16943,4577],{"id":4576},[21,16945,16946,16947,16949],{},"Essayez d'expliquer la fonction ",[358,16948,16669],{}," avec vos propres mots.",[16,16951,4591],{"id":4590},[146,16953,4595],{"id":4594},[350,16955,16956],{"className":12948,"code":16331,"language":12950,"meta":356,"style":356},[358,16957,16958,16974,16984,16996,17008,17012,17036,17046,17054,17062,17070,17078,17086,17090,17094,17098,17120,17124,17128,17140,17154,17160,17164,17168,17190,17208,17222,17226,17242],{"__ignoreMap":356},[711,16959,16960,16962,16964,16966,16968,16970,16972],{"class":713,"line":714},[711,16961,13184],{"class":1370},[711,16963,16340],{"class":872},[711,16965,1789],{"class":717},[711,16967,13406],{"class":3203},[711,16969,1077],{"class":717},[711,16971,13412],{"class":3203},[711,16973,3402],{"class":717},[711,16975,16976,16978,16980,16982],{"class":713,"line":521},[711,16977,15192],{"class":1370},[711,16979,15195],{"class":764},[711,16981,12963],{"class":1370},[711,16983,16361],{"class":717},[711,16985,16986,16988,16990,16992,16994],{"class":713,"line":529},[711,16987,13204],{"class":1370},[711,16989,14329],{"class":717},[711,16991,887],{"class":1370},[711,16993,13212],{"class":764},[711,16995,774],{"class":717},[711,16997,16998,17000,17002,17004,17006],{"class":713,"line":906},[711,16999,13204],{"class":1370},[711,17001,15249],{"class":717},[711,17003,887],{"class":1370},[711,17005,13212],{"class":764},[711,17007,774],{"class":717},[711,17009,17010],{"class":713,"line":925},[711,17011,1114],{"emptyLinePlaceholder":554},[711,17013,17014,17016,17018,17020,17022,17024,17026,17028,17030,17032,17034],{"class":713,"line":950},[711,17015,13245],{"class":1370},[711,17017,16396],{"class":717},[711,17019,718],{"class":1370},[711,17021,16401],{"class":717},[711,17023,13229],{"class":764},[711,17025,16406],{"class":1370},[711,17027,15249],{"class":717},[711,17029,718],{"class":1370},[711,17031,16413],{"class":717},[711,17033,13229],{"class":764},[711,17035,3402],{"class":717},[711,17037,17038,17040,17042,17044],{"class":713,"line":965},[711,17039,11039],{"class":1370},[711,17041,16424],{"class":717},[711,17043,13251],{"class":1370},[711,17045,16429],{"class":717},[711,17047,17048,17050,17052],{"class":713,"line":991},[711,17049,16434],{"class":717},[711,17051,16437],{"class":872},[711,17053,16440],{"class":717},[711,17055,17056,17058,17060],{"class":713,"line":1001},[711,17057,16445],{"class":717},[711,17059,14348],{"class":1370},[711,17061,774],{"class":717},[711,17063,17064,17066,17068],{"class":713,"line":1011},[711,17065,13348],{"class":717},[711,17067,13351],{"class":1370},[711,17069,759],{"class":717},[711,17071,17072,17074,17076],{"class":713,"line":1024},[711,17073,16434],{"class":717},[711,17075,16437],{"class":872},[711,17077,16466],{"class":717},[711,17079,17080,17082,17084],{"class":713,"line":556},[711,17081,16471],{"class":717},[711,17083,14348],{"class":1370},[711,17085,774],{"class":717},[711,17087,17088],{"class":713,"line":1046},[711,17089,1223],{"class":717},[711,17091,17092],{"class":713,"line":3317},[711,17093,3248],{"class":717},[711,17095,17096],{"class":713,"line":3574},[711,17097,1114],{"emptyLinePlaceholder":554},[711,17099,17100,17102,17104,17106,17108,17110,17112,17114,17116,17118],{"class":713,"line":3595},[711,17101,13385],{"class":1370},[711,17103,15230],{"class":717},[711,17105,16496],{"class":872},[711,17107,16499],{"class":717},[711,17109,16502],{"class":872},[711,17111,16505],{"class":717},[711,17113,16496],{"class":872},[711,17115,16510],{"class":717},[711,17117,16502],{"class":872},[711,17119,16515],{"class":717},[711,17121,17122],{"class":713,"line":3600},[711,17123,779],{"class":717},[711,17125,17126],{"class":713,"line":3868},[711,17127,1114],{"emptyLinePlaceholder":554},[711,17129,17130,17132,17134,17136,17138],{"class":713,"line":3888},[711,17131,13184],{"class":1370},[711,17133,16530],{"class":872},[711,17135,1789],{"class":717},[711,17137,13192],{"class":3203},[711,17139,3402],{"class":717},[711,17141,17142,17144,17146,17148,17150,17152],{"class":713,"line":3908},[711,17143,16541],{"class":1370},[711,17145,16544],{"class":717},[711,17147,13229],{"class":764},[711,17149,16549],{"class":1370},[711,17151,2919],{"class":764},[711,17153,3402],{"class":717},[711,17155,17156,17158],{"class":713,"line":3928},[711,17157,8645],{"class":1370},[711,17159,16560],{"class":717},[711,17161,17162],{"class":713,"line":3937},[711,17163,3248],{"class":717},[711,17165,17166],{"class":713,"line":3946},[711,17167,1114],{"emptyLinePlaceholder":554},[711,17169,17170,17172,17174,17176,17178,17180,17182,17184,17186,17188],{"class":713,"line":4162},[711,17171,15192],{"class":1370},[711,17173,13262],{"class":764},[711,17175,12963],{"class":1370},[711,17177,13267],{"class":717},[711,17179,13270],{"class":872},[711,17181,16583],{"class":717},[711,17183,13229],{"class":764},[711,17185,16588],{"class":1370},[711,17187,8670],{"class":764},[711,17189,1804],{"class":717},[711,17191,17192,17194,17196,17198,17200,17202,17204,17206],{"class":713,"line":4167},[711,17193,15192],{"class":1370},[711,17195,16599],{"class":764},[711,17197,12963],{"class":1370},[711,17199,13226],{"class":717},[711,17201,16502],{"class":872},[711,17203,1789],{"class":717},[711,17205,1797],{"class":764},[711,17207,16612],{"class":717},[711,17209,17210,17212,17214,17216,17218,17220],{"class":713,"line":4172},[711,17211,15192],{"class":1370},[711,17213,16619],{"class":764},[711,17215,12963],{"class":1370},[711,17217,13226],{"class":717},[711,17219,16502],{"class":872},[711,17221,16628],{"class":717},[711,17223,17224],{"class":713,"line":4180},[711,17225,1114],{"emptyLinePlaceholder":554},[711,17227,17228,17230,17232,17234,17236,17238,17240],{"class":713,"line":4195},[711,17229,13385],{"class":1370},[711,17231,16340],{"class":872},[711,17233,1789],{"class":717},[711,17235,16643],{"class":872},[711,17237,16646],{"class":717},[711,17239,16643],{"class":872},[711,17241,16651],{"class":717},[711,17243,17244],{"class":713,"line":4209},[711,17245,779],{"class":717},[16,17247,512],{"id":511},[21,17249,17250],{},"Après le tri fusion, le tri rapide est un excellent algorithme à découvrir, car il utilise lui aussi le principe du découpage, mais d'une manière différente.",[640,17252,14035],{},{"title":356,"searchDepth":521,"depth":521,"links":17254},[17255,17256,17257,17258,17259,17264,17265,17268,17269,17270,17273,17278,17283,17284,17290,17293],{"id":18,"depth":521,"text":19},{"id":110,"depth":521,"text":111},{"id":12941,"depth":521,"text":12942},{"id":16213,"depth":521,"text":16214},{"id":16231,"depth":521,"text":16232,"children":17260},[17261,17262,17263],{"id":16235,"depth":529,"text":16236},{"id":16248,"depth":529,"text":16249},{"id":16267,"depth":529,"text":16268},{"id":16301,"depth":521,"text":16302},{"id":16327,"depth":521,"text":16328,"children":17266},[17267],{"id":2859,"depth":529,"text":2860},{"id":16676,"depth":521,"text":16677},{"id":16744,"depth":521,"text":16745},{"id":16754,"depth":521,"text":16755,"children":17271},[17272],{"id":16764,"depth":529,"text":16765},{"id":16800,"depth":521,"text":16801,"children":17274},[17275,17276,17277],{"id":16804,"depth":529,"text":16805},{"id":13616,"depth":529,"text":13617},{"id":16844,"depth":529,"text":16845},{"id":16879,"depth":521,"text":16880,"children":17279},[17280,17281,17282],{"id":16883,"depth":529,"text":16884},{"id":16890,"depth":529,"text":16891},{"id":16897,"depth":529,"text":16898},{"id":16904,"depth":521,"text":16905},{"id":4551,"depth":521,"text":4552,"children":17285},[17286,17287,17288,17289],{"id":4555,"depth":529,"text":4556},{"id":4562,"depth":529,"text":4563},{"id":4569,"depth":529,"text":4570},{"id":4576,"depth":529,"text":4577},{"id":4590,"depth":521,"text":4591,"children":17291},[17292],{"id":4594,"depth":529,"text":4595},{"id":511,"depth":521,"text":512},"Un tutoriel complet pour comprendre le tri fusion, découvrir la logique du divide and conquer et l'implémenter pas à pas en JavaScript.",{},{"title":16115,"description":17294},"blog\u002Ftri-fusion",[560,16111,562],"9pItolCfPj5P5na4_Ck5gan0k82iLCKs0ppLyXBUAxI",{"id":17301,"title":17302,"body":17303,"coverImage":550,"description":18256,"extension":552,"meta":18257,"navigation":554,"path":91,"published":554,"publishedAt":555,"readTime":3317,"seo":18258,"stem":18259,"tags":18260,"__hash__":18261},"blog\u002Fblog\u002Ftri-par-insertion.md","Le tri par insertion expliqué simplement",{"type":8,"value":17304,"toc":18212},[17305,17309,17311,17314,17317,17319,17321,17337,17339,17342,17377,17379,17383,17386,17389,17403,17406,17408,17410,17435,17439,17445,17449,17456,17458,17483,17487,17496,17498,17523,17527,17532,17534,17559,17561,17745,17747,17767,17769,17822,17826,17829,17832,17834,17836,17847,17851,17853,17868,17872,17874,17901,17905,17909,17912,17915,17918,17921,17924,17926,17928,17931,17937,17945,17949,17955,17957,17960,17962,17976,17978,17980,17983,17985,17991,17993,17995,17997,18000,18002,18004,18176,18178,18205,18207,18210],[11,17306,17308],{"id":17307},"le-tri-par-insertion","Le tri par insertion",[16,17310,19],{"id":18},[21,17312,17313],{},"Le tri par insertion est un algorithme très utile pour comprendre une logique de tri plus naturelle.",[21,17315,17316],{},"L'idée est simple : on construit progressivement une partie triée du tableau, en insérant chaque nouvel élément à sa bonne place.",[16,17318,111],{"id":110},[21,17320,5115],{},[31,17322,17323,17326,17329,17331,17334],{},[34,17324,17325],{},"comprendre le principe du tri par insertion ;",[34,17327,17328],{},"suivre l'algorithme pas à pas ;",[34,17330,14119],{},[34,17332,17333],{},"comprendre dans quels cas il est intéressant ;",[34,17335,17336],{},"voir la différence avec le tri à bulles.",[16,17338,12942],{"id":12941},[21,17340,17341],{},"Prenons une liste de nombres :",[350,17343,17345],{"className":12948,"code":17344,"language":12950,"meta":356,"style":356},"const numbers = [7, 4, 5, 2, 9];\n",[358,17346,17347],{"__ignoreMap":356},[711,17348,17349,17351,17353,17355,17357,17359,17361,17363,17365,17367,17369,17371,17373,17375],{"class":713,"line":714},[711,17350,12957],{"class":1370},[711,17352,12960],{"class":764},[711,17354,12963],{"class":1370},[711,17356,12966],{"class":717},[711,17358,8905],{"class":764},[711,17360,1077],{"class":717},[711,17362,12973],{"class":764},[711,17364,1077],{"class":717},[711,17366,8891],{"class":764},[711,17368,1077],{"class":717},[711,17370,1571],{"class":764},[711,17372,1077],{"class":717},[711,17374,13519],{"class":764},[711,17376,13004],{"class":717},[21,17378,16210],{},[16,17380,17382],{"id":17381},"_2-lidée-du-tri-par-insertion","2. L'idée du tri par insertion",[21,17384,17385],{},"On considère que le premier élément est déjà trié.",[21,17387,17388],{},"Ensuite :",[60,17390,17391,17394,17397,17400],{},[34,17392,17393],{},"on prend l'élément suivant ;",[34,17395,17396],{},"on le compare avec les éléments déjà triés ;",[34,17398,17399],{},"on le place à la bonne position ;",[34,17401,17402],{},"on recommence avec l'élément suivant.",[21,17404,17405],{},"C'est une méthode très intuitive.",[16,17407,14201],{"id":14200},[21,17409,15018],{},[350,17411,17413],{"className":12948,"code":17412,"language":12950,"meta":356,"style":356},"[7, 4, 5, 2]\n",[358,17414,17415],{"__ignoreMap":356},[711,17416,17417,17419,17421,17423,17425,17427,17429,17431,17433],{"class":713,"line":714},[711,17418,14216],{"class":717},[711,17420,8905],{"class":764},[711,17422,1077],{"class":717},[711,17424,12973],{"class":764},[711,17426,1077],{"class":717},[711,17428,8891],{"class":764},[711,17430,1077],{"class":717},[711,17432,1571],{"class":764},[711,17434,8937],{"class":717},[146,17436,17438],{"id":17437},"départ","Départ",[21,17440,17441,17442,17444],{},"On considère que ",[358,17443,8905],{}," est déjà trié.",[146,17446,17448],{"id":17447},"insertion-de-4","Insertion de 4",[21,17450,17451,17453,17454,831],{},[358,17452,12973],{}," doit aller avant ",[358,17455,8905],{},[21,17457,12634],{},[350,17459,17461],{"className":12948,"code":17460,"language":12950,"meta":356,"style":356},"[4, 7, 5, 2]\n",[358,17462,17463],{"__ignoreMap":356},[711,17464,17465,17467,17469,17471,17473,17475,17477,17479,17481],{"class":713,"line":714},[711,17466,14216],{"class":717},[711,17468,12973],{"class":764},[711,17470,1077],{"class":717},[711,17472,8905],{"class":764},[711,17474,1077],{"class":717},[711,17476,8891],{"class":764},[711,17478,1077],{"class":717},[711,17480,1571],{"class":764},[711,17482,8937],{"class":717},[146,17484,17486],{"id":17485},"insertion-de-5","Insertion de 5",[21,17488,17489,17491,17492,1913,17494,831],{},[358,17490,8891],{}," doit se placer entre ",[358,17493,12973],{},[358,17495,8905],{},[21,17497,12634],{},[350,17499,17501],{"className":12948,"code":17500,"language":12950,"meta":356,"style":356},"[4, 5, 7, 2]\n",[358,17502,17503],{"__ignoreMap":356},[711,17504,17505,17507,17509,17511,17513,17515,17517,17519,17521],{"class":713,"line":714},[711,17506,14216],{"class":717},[711,17508,12973],{"class":764},[711,17510,1077],{"class":717},[711,17512,8891],{"class":764},[711,17514,1077],{"class":717},[711,17516,8905],{"class":764},[711,17518,1077],{"class":717},[711,17520,1571],{"class":764},[711,17522,8937],{"class":717},[146,17524,17526],{"id":17525},"insertion-de-2","Insertion de 2",[21,17528,17529,17531],{},[358,17530,1571],{}," doit aller au début.",[21,17533,15142],{},[350,17535,17537],{"className":12948,"code":17536,"language":12950,"meta":356,"style":356},"[2, 4, 5, 7]\n",[358,17538,17539],{"__ignoreMap":356},[711,17540,17541,17543,17545,17547,17549,17551,17553,17555,17557],{"class":713,"line":714},[711,17542,14216],{"class":717},[711,17544,1571],{"class":764},[711,17546,1077],{"class":717},[711,17548,12973],{"class":764},[711,17550,1077],{"class":717},[711,17552,8891],{"class":764},[711,17554,1077],{"class":717},[711,17556,8905],{"class":764},[711,17558,8937],{"class":717},[16,17560,14294],{"id":14293},[350,17562,17564],{"className":12948,"code":17563,"language":12950,"meta":356,"style":356},"function insertionSort(array) {\n const result = [...array];\n\n for (let i = 1; i \u003C result.length; i++) {\n const current = result[i];\n let j = i - 1;\n\n while (j >= 0 && result[j] > current) {\n result[j + 1] = result[j];\n j--;\n }\n\n result[j + 1] = current;\n }\n\n return result;\n}\n",[358,17565,17566,17579,17593,17597,17625,17637,17653,17657,17679,17694,17703,17707,17711,17727,17731,17735,17741],{"__ignoreMap":356},[711,17567,17568,17570,17573,17575,17577],{"class":713,"line":714},[711,17569,13184],{"class":1370},[711,17571,17572],{"class":872}," insertionSort",[711,17574,1789],{"class":717},[711,17576,13192],{"class":3203},[711,17578,3402],{"class":717},[711,17580,17581,17583,17585,17587,17589,17591],{"class":713,"line":521},[711,17582,15192],{"class":1370},[711,17584,15195],{"class":764},[711,17586,12963],{"class":1370},[711,17588,12966],{"class":717},[711,17590,15202],{"class":1370},[711,17592,15205],{"class":717},[711,17594,17595],{"class":713,"line":529},[711,17596,1114],{"emptyLinePlaceholder":554},[711,17598,17599,17601,17603,17605,17607,17609,17611,17613,17615,17617,17619,17621,17623],{"class":713,"line":906},[711,17600,14321],{"class":1370},[711,17602,3389],{"class":717},[711,17604,14326],{"class":1370},[711,17606,14329],{"class":717},[711,17608,887],{"class":1370},[711,17610,2919],{"class":764},[711,17612,14336],{"class":717},[711,17614,718],{"class":1370},[711,17616,15230],{"class":717},[711,17618,13229],{"class":764},[711,17620,14345],{"class":717},[711,17622,14348],{"class":1370},[711,17624,3402],{"class":717},[711,17626,17627,17629,17632,17634],{"class":713,"line":925},[711,17628,13259],{"class":1370},[711,17630,17631],{"class":764}," current",[711,17633,12963],{"class":1370},[711,17635,17636],{"class":717}," result[i];\n",[711,17638,17639,17641,17643,17645,17647,17649,17651],{"class":713,"line":950},[711,17640,15651],{"class":1370},[711,17642,15249],{"class":717},[711,17644,887],{"class":1370},[711,17646,14329],{"class":717},[711,17648,8656],{"class":1370},[711,17650,2919],{"class":764},[711,17652,774],{"class":717},[711,17654,17655],{"class":713,"line":965},[711,17656,1114],{"emptyLinePlaceholder":554},[711,17658,17659,17661,17664,17667,17669,17671,17674,17676],{"class":713,"line":991},[711,17660,12519],{"class":1370},[711,17662,17663],{"class":717}," (j ",[711,17665,17666],{"class":1370},">=",[711,17668,13212],{"class":764},[711,17670,16406],{"class":1370},[711,17672,17673],{"class":717}," result[j] ",[711,17675,15286],{"class":1370},[711,17677,17678],{"class":717}," current) {\n",[711,17680,17681,17684,17686,17688,17690,17692],{"class":713,"line":1001},[711,17682,17683],{"class":717}," result[j ",[711,17685,10164],{"class":1370},[711,17687,2919],{"class":764},[711,17689,8653],{"class":717},[711,17691,887],{"class":1370},[711,17693,15309],{"class":717},[711,17695,17696,17698,17701],{"class":713,"line":1011},[711,17697,16471],{"class":717},[711,17699,17700],{"class":1370},"--",[711,17702,774],{"class":717},[711,17704,17705],{"class":713,"line":1024},[711,17706,1223],{"class":717},[711,17708,17709],{"class":713,"line":556},[711,17710,1114],{"emptyLinePlaceholder":554},[711,17712,17713,17716,17718,17720,17722,17724],{"class":713,"line":1046},[711,17714,17715],{"class":717}," result[j ",[711,17717,10164],{"class":1370},[711,17719,2919],{"class":764},[711,17721,8653],{"class":717},[711,17723,887],{"class":1370},[711,17725,17726],{"class":717}," current;\n",[711,17728,17729],{"class":713,"line":3317},[711,17730,3248],{"class":717},[711,17732,17733],{"class":713,"line":3574},[711,17734,1114],{"emptyLinePlaceholder":554},[711,17736,17737,17739],{"class":713,"line":3595},[711,17738,13385],{"class":1370},[711,17740,15364],{"class":717},[711,17742,17743],{"class":713,"line":3600},[711,17744,779],{"class":717},[146,17746,2860],{"id":2859},[31,17748,17749,17755,17761,17764],{},[34,17750,17751,17754],{},[358,17752,17753],{},"current"," contient l'élément à insérer ;",[34,17756,17757,17760],{},[358,17758,17759],{},"j"," permet de remonter dans la partie déjà triée ;",[34,17762,17763],{},"tant que l'élément courant est plus petit, on décale les éléments vers la droite ;",[34,17765,17766],{},"dès que la bonne position est trouvée, on insère l'élément.",[16,17768,14413],{"id":14412},[350,17770,17772],{"className":12948,"code":17771,"language":12950,"meta":356,"style":356},"const numbers = [7, 4, 5, 2, 9];\nconsole.log(insertionSort(numbers));\n\u002F\u002F [2, 4, 5, 7, 9]\n",[358,17773,17774,17804,17817],{"__ignoreMap":356},[711,17775,17776,17778,17780,17782,17784,17786,17788,17790,17792,17794,17796,17798,17800,17802],{"class":713,"line":714},[711,17777,12957],{"class":1370},[711,17779,12960],{"class":764},[711,17781,12963],{"class":1370},[711,17783,12966],{"class":717},[711,17785,8905],{"class":764},[711,17787,1077],{"class":717},[711,17789,12973],{"class":764},[711,17791,1077],{"class":717},[711,17793,8891],{"class":764},[711,17795,1077],{"class":717},[711,17797,1571],{"class":764},[711,17799,1077],{"class":717},[711,17801,13519],{"class":764},[711,17803,13004],{"class":717},[711,17805,17806,17808,17810,17812,17815],{"class":713,"line":521},[711,17807,13485],{"class":717},[711,17809,13488],{"class":872},[711,17811,1789],{"class":717},[711,17813,17814],{"class":872},"insertionSort",[711,17816,15441],{"class":717},[711,17818,17819],{"class":713,"line":529},[711,17820,17821],{"class":10405},"\u002F\u002F [2, 4, 5, 7, 9]\n",[16,17823,17825],{"id":17824},"_6-pourquoi-cet-algorithme-est-intéressant","6. Pourquoi cet algorithme est intéressant",[21,17827,17828],{},"Le tri par insertion est souvent plus efficace que le tri à bulles sur de petites listes ou sur des listes déjà presque triées.",[21,17830,17831],{},"Il est aussi plus proche de la manière dont un humain trie parfois des cartes dans sa main.",[16,17833,14516],{"id":14515},[146,17835,16805],{"id":16804},[350,17837,17839],{"className":12948,"code":17838,"language":12950,"meta":356,"style":356},"insertionSort([]);\n",[358,17840,17841],{"__ignoreMap":356},[711,17842,17843,17845],{"class":713,"line":714},[711,17844,17814],{"class":872},[711,17846,15484],{"class":717},[21,17848,14536,17849],{},[358,17850,15489],{},[146,17852,13617],{"id":13616},[350,17854,17856],{"className":12948,"code":17855,"language":12950,"meta":356,"style":356},"insertionSort([10]);\n",[358,17857,17858],{"__ignoreMap":356},[711,17859,17860,17862,17864,17866],{"class":713,"line":714},[711,17861,17814],{"class":872},[711,17863,13629],{"class":717},[711,17865,3239],{"class":764},[711,17867,15507],{"class":717},[21,17869,14536,17870],{},[358,17871,15512],{},[146,17873,15516],{"id":15515},[350,17875,17877],{"className":12948,"code":17876,"language":12950,"meta":356,"style":356},"insertionSort([1, 2, 3, 4]);\n",[358,17878,17879],{"__ignoreMap":356},[711,17880,17881,17883,17885,17887,17889,17891,17893,17895,17897,17899],{"class":713,"line":714},[711,17882,17814],{"class":872},[711,17884,13629],{"class":717},[711,17886,1935],{"class":764},[711,17888,1077],{"class":717},[711,17890,1571],{"class":764},[711,17892,1077],{"class":717},[711,17894,2831],{"class":764},[711,17896,1077],{"class":717},[711,17898,12973],{"class":764},[711,17900,15507],{"class":717},[21,17902,14536,17903],{},[358,17904,15548],{},[16,17906,17908],{"id":17907},"_8-différence-avec-le-tri-à-bulles","8. Différence avec le tri à bulles",[146,17910,274],{"id":17911},"tri-à-bulles",[21,17913,17914],{},"Il compare des éléments voisins et les échange plusieurs fois.",[146,17916,280],{"id":17917},"tri-par-insertion",[21,17919,17920],{},"Il construit une partie triée et insère chaque nouvel élément au bon endroit.",[21,17922,17923],{},"Le tri par insertion est souvent plus naturel à comprendre.",[16,17925,14630],{"id":14629},[146,17927,15556],{"id":15555},[21,17929,17930],{},"Comme pour les autres algorithmes, évitez de modifier directement la donnée d'origine si vous voulez garder une fonction propre.",[146,17932,17934,17935],{"id":17933},"mal-gérer-j","Mal gérer ",[358,17936,17759],{},[21,17938,6057,17939,17941,17942,17944],{},[358,17940,13545],{}," doit s'arrêter quand ",[358,17943,17759],{}," devient négatif.",[146,17946,17948],{"id":17947},"oublier-la-réinsertion","Oublier la réinsertion",[21,17950,17951,17952,17954],{},"À la fin du décalage, il faut bien replacer ",[358,17953,17753],{}," à la bonne position.",[16,17956,14659],{"id":14658},[21,17958,17959],{},"Le tri par insertion est un algorithme simple, efficace sur les petites listes et très utile pour apprendre la logique du tri.",[21,17961,9637],{},[31,17963,17964,17967,17970,17973],{},[34,17965,17966],{},"on construit progressivement une partie triée ;",[34,17968,17969],{},"on insère chaque élément à sa place ;",[34,17971,17972],{},"il est souvent plus naturel que le tri à bulles ;",[34,17974,17975],{},"il est très utile pour comprendre les bases du tri.",[16,17977,4552],{"id":4551},[146,17979,4556],{"id":4555},[21,17981,17982],{},"Implémentez le tri par insertion en JavaScript.",[146,17984,4563],{"id":4562},[21,17986,17987,17988,17990],{},"Ajoutez des ",[358,17989,14705],{}," pour afficher l'état du tableau à chaque insertion.",[146,17992,4570],{"id":4569},[21,17994,15861],{},[146,17996,4577],{"id":4576},[21,17998,17999],{},"Testez votre fonction avec une liste déjà triée.",[16,18001,4591],{"id":4590},[146,18003,4595],{"id":4594},[350,18005,18006],{"className":12948,"code":17563,"language":12950,"meta":356,"style":356},[358,18007,18008,18020,18034,18038,18066,18076,18092,18096,18114,18128,18136,18140,18144,18158,18162,18166,18172],{"__ignoreMap":356},[711,18009,18010,18012,18014,18016,18018],{"class":713,"line":714},[711,18011,13184],{"class":1370},[711,18013,17572],{"class":872},[711,18015,1789],{"class":717},[711,18017,13192],{"class":3203},[711,18019,3402],{"class":717},[711,18021,18022,18024,18026,18028,18030,18032],{"class":713,"line":521},[711,18023,15192],{"class":1370},[711,18025,15195],{"class":764},[711,18027,12963],{"class":1370},[711,18029,12966],{"class":717},[711,18031,15202],{"class":1370},[711,18033,15205],{"class":717},[711,18035,18036],{"class":713,"line":529},[711,18037,1114],{"emptyLinePlaceholder":554},[711,18039,18040,18042,18044,18046,18048,18050,18052,18054,18056,18058,18060,18062,18064],{"class":713,"line":906},[711,18041,14321],{"class":1370},[711,18043,3389],{"class":717},[711,18045,14326],{"class":1370},[711,18047,14329],{"class":717},[711,18049,887],{"class":1370},[711,18051,2919],{"class":764},[711,18053,14336],{"class":717},[711,18055,718],{"class":1370},[711,18057,15230],{"class":717},[711,18059,13229],{"class":764},[711,18061,14345],{"class":717},[711,18063,14348],{"class":1370},[711,18065,3402],{"class":717},[711,18067,18068,18070,18072,18074],{"class":713,"line":925},[711,18069,13259],{"class":1370},[711,18071,17631],{"class":764},[711,18073,12963],{"class":1370},[711,18075,17636],{"class":717},[711,18077,18078,18080,18082,18084,18086,18088,18090],{"class":713,"line":950},[711,18079,15651],{"class":1370},[711,18081,15249],{"class":717},[711,18083,887],{"class":1370},[711,18085,14329],{"class":717},[711,18087,8656],{"class":1370},[711,18089,2919],{"class":764},[711,18091,774],{"class":717},[711,18093,18094],{"class":713,"line":965},[711,18095,1114],{"emptyLinePlaceholder":554},[711,18097,18098,18100,18102,18104,18106,18108,18110,18112],{"class":713,"line":991},[711,18099,12519],{"class":1370},[711,18101,17663],{"class":717},[711,18103,17666],{"class":1370},[711,18105,13212],{"class":764},[711,18107,16406],{"class":1370},[711,18109,17673],{"class":717},[711,18111,15286],{"class":1370},[711,18113,17678],{"class":717},[711,18115,18116,18118,18120,18122,18124,18126],{"class":713,"line":1001},[711,18117,17683],{"class":717},[711,18119,10164],{"class":1370},[711,18121,2919],{"class":764},[711,18123,8653],{"class":717},[711,18125,887],{"class":1370},[711,18127,15309],{"class":717},[711,18129,18130,18132,18134],{"class":713,"line":1011},[711,18131,16471],{"class":717},[711,18133,17700],{"class":1370},[711,18135,774],{"class":717},[711,18137,18138],{"class":713,"line":1024},[711,18139,1223],{"class":717},[711,18141,18142],{"class":713,"line":556},[711,18143,1114],{"emptyLinePlaceholder":554},[711,18145,18146,18148,18150,18152,18154,18156],{"class":713,"line":1046},[711,18147,17715],{"class":717},[711,18149,10164],{"class":1370},[711,18151,2919],{"class":764},[711,18153,8653],{"class":717},[711,18155,887],{"class":1370},[711,18157,17726],{"class":717},[711,18159,18160],{"class":713,"line":3317},[711,18161,3248],{"class":717},[711,18163,18164],{"class":713,"line":3574},[711,18165,1114],{"emptyLinePlaceholder":554},[711,18167,18168,18170],{"class":713,"line":3595},[711,18169,13385],{"class":1370},[711,18171,15364],{"class":717},[711,18173,18174],{"class":713,"line":3600},[711,18175,779],{"class":717},[146,18177,4715],{"id":4714},[350,18179,18181],{"className":12948,"code":18180,"language":12950,"meta":356,"style":356},"while (j >= 0 && result[j] \u003C current) {\n}\n",[358,18182,18183,18201],{"__ignoreMap":356},[711,18184,18185,18187,18189,18191,18193,18195,18197,18199],{"class":713,"line":714},[711,18186,13545],{"class":1370},[711,18188,17663],{"class":717},[711,18190,17666],{"class":1370},[711,18192,13212],{"class":764},[711,18194,16406],{"class":1370},[711,18196,17673],{"class":717},[711,18198,718],{"class":1370},[711,18200,17678],{"class":717},[711,18202,18203],{"class":713,"line":521},[711,18204,779],{"class":717},[16,18206,512],{"id":511},[21,18208,18209],{},"Une fois le tri par insertion compris, vous avez déjà une bonne base pour comprendre des tris plus avancés comme le tri fusion ou le tri rapide.",[640,18211,14035],{},{"title":356,"searchDepth":521,"depth":521,"links":18213},[18214,18215,18216,18217,18218,18224,18227,18228,18229,18234,18238,18244,18245,18251,18255],{"id":18,"depth":521,"text":19},{"id":110,"depth":521,"text":111},{"id":12941,"depth":521,"text":12942},{"id":17381,"depth":521,"text":17382},{"id":14200,"depth":521,"text":14201,"children":18219},[18220,18221,18222,18223],{"id":17437,"depth":529,"text":17438},{"id":17447,"depth":529,"text":17448},{"id":17485,"depth":529,"text":17486},{"id":17525,"depth":529,"text":17526},{"id":14293,"depth":521,"text":14294,"children":18225},[18226],{"id":2859,"depth":529,"text":2860},{"id":14412,"depth":521,"text":14413},{"id":17824,"depth":521,"text":17825},{"id":14515,"depth":521,"text":14516,"children":18230},[18231,18232,18233],{"id":16804,"depth":529,"text":16805},{"id":13616,"depth":529,"text":13617},{"id":15515,"depth":529,"text":15516},{"id":17907,"depth":521,"text":17908,"children":18235},[18236,18237],{"id":17911,"depth":529,"text":274},{"id":17917,"depth":529,"text":280},{"id":14629,"depth":521,"text":14630,"children":18239},[18240,18241,18243],{"id":15555,"depth":529,"text":15556},{"id":17933,"depth":529,"text":18242},"Mal gérer j",{"id":17947,"depth":529,"text":17948},{"id":14658,"depth":521,"text":14659},{"id":4551,"depth":521,"text":4552,"children":18246},[18247,18248,18249,18250],{"id":4555,"depth":529,"text":4556},{"id":4562,"depth":529,"text":4563},{"id":4569,"depth":529,"text":4570},{"id":4576,"depth":529,"text":4577},{"id":4590,"depth":521,"text":4591,"children":18252},[18253,18254],{"id":4594,"depth":529,"text":4595},{"id":4714,"depth":529,"text":4715},{"id":511,"depth":521,"text":512},"Un tutoriel complet pour comprendre le tri par insertion, suivre son fonctionnement et apprendre pourquoi il est souvent plus naturel que le tri à bulles.",{},{"title":17302,"description":18256},"blog\u002Ftri-par-insertion",[560,16111,562],"Q9obmhBGSMoGY9LZpCsFZUFRSlhqKV-VneNdEQRaxgk",{"id":18263,"title":18264,"body":18265,"coverImage":550,"description":19229,"extension":552,"meta":19230,"navigation":554,"path":103,"published":554,"publishedAt":555,"readTime":3600,"seo":19231,"stem":19232,"tags":19233,"__hash__":19234},"blog\u002Fblog\u002Ftri-rapide.md","Le tri rapide expliqué simplement",{"type":8,"value":18266,"toc":19188},[18267,18271,18273,18276,18279,18282,18284,18286,18306,18308,18310,18357,18359,18363,18366,18380,18384,18390,18402,18405,18409,18412,18638,18640,18671,18673,18737,18739,18742,18745,18749,18752,18755,18758,18762,18765,18768,18770,18798,18800,18802,18813,18817,18819,18834,18838,18840,18867,18871,18875,18878,18889,18892,18903,18906,18908,18910,18913,18917,18920,18924,18927,18929,18932,18934,18948,18950,18952,18955,18957,18960,18962,18964,18966,18969,18971,18973,19181,19183,19186],[11,18268,18270],{"id":18269},"le-tri-rapide","Le tri rapide",[16,18272,19],{"id":18},[21,18274,18275],{},"Le tri rapide est l'un des algorithmes de tri les plus connus.",[21,18277,18278],{},"Il est souvent très performant en pratique, même si son fonctionnement demande un peu plus d'attention au début.",[21,18280,18281],{},"Son idée principale repose sur un pivot : on choisit une valeur, on sépare les éléments plus petits et plus grands, puis on recommence sur chaque partie.",[16,18283,111],{"id":110},[21,18285,5115],{},[31,18287,18288,18291,18294,18297,18300,18303],{},[34,18289,18290],{},"comprendre le principe du tri rapide ;",[34,18292,18293],{},"savoir ce qu'est un pivot ;",[34,18295,18296],{},"comprendre le partitionnement ;",[34,18298,18299],{},"écrire une version simple en JavaScript ;",[34,18301,18302],{},"voir les limites de l'algorithme ;",[34,18304,18305],{},"le comparer au tri fusion.",[16,18307,12942],{"id":12941},[21,18309,16160],{},[350,18311,18313],{"className":12948,"code":18312,"language":12950,"meta":356,"style":356},"const numbers = [7, 2, 1, 6, 8, 5, 3, 4];\n",[358,18314,18315],{"__ignoreMap":356},[711,18316,18317,18319,18321,18323,18325,18327,18329,18331,18333,18335,18337,18339,18341,18343,18345,18347,18349,18351,18353,18355],{"class":713,"line":714},[711,18318,12957],{"class":1370},[711,18320,12960],{"class":764},[711,18322,12963],{"class":1370},[711,18324,12966],{"class":717},[711,18326,8905],{"class":764},[711,18328,1077],{"class":717},[711,18330,1571],{"class":764},[711,18332,1077],{"class":717},[711,18334,1935],{"class":764},[711,18336,1077],{"class":717},[711,18338,8886],{"class":764},[711,18340,1077],{"class":717},[711,18342,8922],{"class":764},[711,18344,1077],{"class":717},[711,18346,8891],{"class":764},[711,18348,1077],{"class":717},[711,18350,2831],{"class":764},[711,18352,1077],{"class":717},[711,18354,12973],{"class":764},[711,18356,13004],{"class":717},[21,18358,16210],{},[16,18360,18362],{"id":18361},"_2-lidée-du-tri-rapide","2. L'idée du tri rapide",[21,18364,18365],{},"Le tri rapide fonctionne ainsi :",[60,18367,18368,18371,18374,18377],{},[34,18369,18370],{},"choisir un pivot ;",[34,18372,18373],{},"placer les nombres plus petits à gauche ;",[34,18375,18376],{},"placer les nombres plus grands à droite ;",[34,18378,18379],{},"recommencer sur chaque sous-liste.",[16,18381,18383],{"id":18382},"_3-exemple-intuitif","3. Exemple intuitif",[21,18385,18386,18387,18389],{},"Si le pivot est ",[358,18388,8891],{},", on peut séparer la liste en deux groupes :",[31,18391,18392,18397],{},[34,18393,18394,18395,1407],{},"à gauche : les nombres plus petits que ",[358,18396,8891],{},[34,18398,18399,18400,831],{},"à droite : les nombres plus grands que ",[358,18401,8891],{},[21,18403,18404],{},"Ensuite, on trie chaque partie de la même manière.",[16,18406,18408],{"id":18407},"_4-version-javascript-simple","4. Version JavaScript simple",[21,18410,18411],{},"Voici une version lisible et pédagogique :",[350,18413,18415],{"className":12948,"code":18414,"language":12950,"meta":356,"style":356},"function quickSort(array) {\n if (array.length \u003C= 1) {\n return array;\n }\n\n const pivot = array[Math.floor(array.length \u002F 2)];\n const left = [];\n const middle = [];\n const right = [];\n\n for (const value of array) {\n if (value \u003C pivot) {\n left.push(value);\n } else if (value > pivot) {\n right.push(value);\n } else {\n middle.push(value);\n }\n }\n\n return [...quickSort(left), ...middle, ...quickSort(right)];\n}\n",[358,18416,18417,18430,18444,18450,18454,18458,18483,18493,18503,18513,18517,18534,18546,18556,18571,18580,18588,18597,18601,18605,18609,18634],{"__ignoreMap":356},[711,18418,18419,18421,18424,18426,18428],{"class":713,"line":714},[711,18420,13184],{"class":1370},[711,18422,18423],{"class":872}," quickSort",[711,18425,1789],{"class":717},[711,18427,13192],{"class":3203},[711,18429,3402],{"class":717},[711,18431,18432,18434,18436,18438,18440,18442],{"class":713,"line":521},[711,18433,16541],{"class":1370},[711,18435,16544],{"class":717},[711,18437,13229],{"class":764},[711,18439,16549],{"class":1370},[711,18441,2919],{"class":764},[711,18443,3402],{"class":717},[711,18445,18446,18448],{"class":713,"line":529},[711,18447,8645],{"class":1370},[711,18449,16560],{"class":717},[711,18451,18452],{"class":713,"line":906},[711,18453,3248],{"class":717},[711,18455,18456],{"class":713,"line":925},[711,18457,1114],{"emptyLinePlaceholder":554},[711,18459,18460,18462,18465,18467,18470,18472,18474,18476,18478,18480],{"class":713,"line":950},[711,18461,15192],{"class":1370},[711,18463,18464],{"class":764}," pivot",[711,18466,12963],{"class":1370},[711,18468,18469],{"class":717}," array[Math.",[711,18471,13270],{"class":872},[711,18473,16583],{"class":717},[711,18475,13229],{"class":764},[711,18477,16588],{"class":1370},[711,18479,8670],{"class":764},[711,18481,18482],{"class":717},")];\n",[711,18484,18485,18487,18489,18491],{"class":713,"line":965},[711,18486,15192],{"class":1370},[711,18488,16599],{"class":764},[711,18490,12963],{"class":1370},[711,18492,16361],{"class":717},[711,18494,18495,18497,18499,18501],{"class":713,"line":991},[711,18496,15192],{"class":1370},[711,18498,13262],{"class":764},[711,18500,12963],{"class":1370},[711,18502,16361],{"class":717},[711,18504,18505,18507,18509,18511],{"class":713,"line":1001},[711,18506,15192],{"class":1370},[711,18508,16619],{"class":764},[711,18510,12963],{"class":1370},[711,18512,16361],{"class":717},[711,18514,18515],{"class":713,"line":1011},[711,18516,1114],{"emptyLinePlaceholder":554},[711,18518,18519,18521,18523,18525,18528,18531],{"class":713,"line":1024},[711,18520,14321],{"class":1370},[711,18522,3389],{"class":717},[711,18524,12957],{"class":1370},[711,18526,18527],{"class":764}," value",[711,18529,18530],{"class":1370}," of",[711,18532,18533],{"class":717}," array) {\n",[711,18535,18536,18538,18541,18543],{"class":713,"line":556},[711,18537,11039],{"class":1370},[711,18539,18540],{"class":717}," (value ",[711,18542,718],{"class":1370},[711,18544,18545],{"class":717}," pivot) {\n",[711,18547,18548,18551,18553],{"class":713,"line":1046},[711,18549,18550],{"class":717}," left.",[711,18552,16437],{"class":872},[711,18554,18555],{"class":717},"(value);\n",[711,18557,18558,18560,18562,18565,18567,18569],{"class":713,"line":3317},[711,18559,13348],{"class":717},[711,18561,13351],{"class":1370},[711,18563,18564],{"class":1370}," if",[711,18566,18540],{"class":717},[711,18568,15286],{"class":1370},[711,18570,18545],{"class":717},[711,18572,18573,18576,18578],{"class":713,"line":3574},[711,18574,18575],{"class":717}," right.",[711,18577,16437],{"class":872},[711,18579,18555],{"class":717},[711,18581,18582,18584,18586],{"class":713,"line":3595},[711,18583,13348],{"class":717},[711,18585,13351],{"class":1370},[711,18587,759],{"class":717},[711,18589,18590,18593,18595],{"class":713,"line":3600},[711,18591,18592],{"class":717}," middle.",[711,18594,16437],{"class":872},[711,18596,18555],{"class":717},[711,18598,18599],{"class":713,"line":3868},[711,18600,1223],{"class":717},[711,18602,18603],{"class":713,"line":3888},[711,18604,3248],{"class":717},[711,18606,18607],{"class":713,"line":3908},[711,18608,1114],{"emptyLinePlaceholder":554},[711,18610,18611,18613,18615,18617,18620,18622,18624,18627,18629,18631],{"class":713,"line":3928},[711,18612,13385],{"class":1370},[711,18614,12966],{"class":717},[711,18616,15202],{"class":1370},[711,18618,18619],{"class":872},"quickSort",[711,18621,16646],{"class":717},[711,18623,15202],{"class":1370},[711,18625,18626],{"class":717},"middle, ",[711,18628,15202],{"class":1370},[711,18630,18619],{"class":872},[711,18632,18633],{"class":717},"(right)];\n",[711,18635,18636],{"class":713,"line":3937},[711,18637,779],{"class":717},[146,18639,2860],{"id":2859},[31,18641,18642,18648,18653,18658,18663],{},[34,18643,18644,18647],{},[358,18645,18646],{},"pivot"," est la valeur de référence ;",[34,18649,18650,18652],{},[358,18651,13406],{}," contient les valeurs plus petites ;",[34,18654,18655,18657],{},[358,18656,13418],{}," contient les valeurs égales au pivot ;",[34,18659,18660,18662],{},[358,18661,13412],{}," contient les valeurs plus grandes ;",[34,18664,18665,18666,1913,18668,18670],{},"on trie ensuite ",[358,18667,13406],{},[358,18669,13412],{}," récursivement.",[16,18672,14413],{"id":14412},[350,18674,18676],{"className":12948,"code":18675,"language":12950,"meta":356,"style":356},"const numbers = [7, 2, 1, 6, 8, 5, 3, 4];\nconsole.log(quickSort(numbers));\n\u002F\u002F [1, 2, 3, 4, 5, 6, 7, 8]\n",[358,18677,18678,18720,18732],{"__ignoreMap":356},[711,18679,18680,18682,18684,18686,18688,18690,18692,18694,18696,18698,18700,18702,18704,18706,18708,18710,18712,18714,18716,18718],{"class":713,"line":714},[711,18681,12957],{"class":1370},[711,18683,12960],{"class":764},[711,18685,12963],{"class":1370},[711,18687,12966],{"class":717},[711,18689,8905],{"class":764},[711,18691,1077],{"class":717},[711,18693,1571],{"class":764},[711,18695,1077],{"class":717},[711,18697,1935],{"class":764},[711,18699,1077],{"class":717},[711,18701,8886],{"class":764},[711,18703,1077],{"class":717},[711,18705,8922],{"class":764},[711,18707,1077],{"class":717},[711,18709,8891],{"class":764},[711,18711,1077],{"class":717},[711,18713,2831],{"class":764},[711,18715,1077],{"class":717},[711,18717,12973],{"class":764},[711,18719,13004],{"class":717},[711,18721,18722,18724,18726,18728,18730],{"class":713,"line":521},[711,18723,13485],{"class":717},[711,18725,13488],{"class":872},[711,18727,1789],{"class":717},[711,18729,18619],{"class":872},[711,18731,15441],{"class":717},[711,18733,18734],{"class":713,"line":529},[711,18735,18736],{"class":10405},"\u002F\u002F [1, 2, 3, 4, 5, 6, 7, 8]\n",[16,18738,17825],{"id":17824},[21,18740,18741],{},"Le tri rapide est souvent très efficace en pratique.",[21,18743,18744],{},"Il est apprécié parce qu'il trie rapidement de grandes listes dans beaucoup de situations réelles.",[16,18746,18748],{"id":18747},"_7-le-rôle-du-pivot","7. Le rôle du pivot",[21,18750,18751],{},"Le pivot est le point central de l'algorithme.",[21,18753,18754],{},"Un bon choix de pivot peut améliorer le comportement du tri.",[21,18756,18757],{},"Si le pivot est mal choisi de manière répétée, l'algorithme peut devenir moins performant.",[16,18759,18761],{"id":18760},"_8-la-récursion","8. La récursion",[21,18763,18764],{},"Comme le tri fusion, le tri rapide utilise la récursion.",[21,18766,18767],{},"On trie une sous-liste, puis une autre, jusqu'à arriver à des listes très petites.",[146,18769,16765],{"id":16764},[350,18771,18772],{"className":12948,"code":16768,"language":12950,"meta":356,"style":356},[358,18773,18774,18788,18794],{"__ignoreMap":356},[711,18775,18776,18778,18780,18782,18784,18786],{"class":713,"line":714},[711,18777,12502],{"class":1370},[711,18779,16544],{"class":717},[711,18781,13229],{"class":764},[711,18783,16549],{"class":1370},[711,18785,2919],{"class":764},[711,18787,3402],{"class":717},[711,18789,18790,18792],{"class":713,"line":521},[711,18791,13385],{"class":1370},[711,18793,16560],{"class":717},[711,18795,18796],{"class":713,"line":529},[711,18797,779],{"class":717},[16,18799,16801],{"id":16800},[146,18801,16805],{"id":16804},[350,18803,18805],{"className":12948,"code":18804,"language":12950,"meta":356,"style":356},"quickSort([]);\n",[358,18806,18807],{"__ignoreMap":356},[711,18808,18809,18811],{"class":713,"line":714},[711,18810,18619],{"class":872},[711,18812,15484],{"class":717},[21,18814,14536,18815],{},[358,18816,15489],{},[146,18818,13617],{"id":13616},[350,18820,18822],{"className":12948,"code":18821,"language":12950,"meta":356,"style":356},"quickSort([10]);\n",[358,18823,18824],{"__ignoreMap":356},[711,18825,18826,18828,18830,18832],{"class":713,"line":714},[711,18827,18619],{"class":872},[711,18829,13629],{"class":717},[711,18831,3239],{"class":764},[711,18833,15507],{"class":717},[21,18835,14536,18836],{},[358,18837,15512],{},[146,18839,15516],{"id":15515},[350,18841,18843],{"className":12948,"code":18842,"language":12950,"meta":356,"style":356},"quickSort([1, 2, 3, 4]);\n",[358,18844,18845],{"__ignoreMap":356},[711,18846,18847,18849,18851,18853,18855,18857,18859,18861,18863,18865],{"class":713,"line":714},[711,18848,18619],{"class":872},[711,18850,13629],{"class":717},[711,18852,1935],{"class":764},[711,18854,1077],{"class":717},[711,18856,1571],{"class":764},[711,18858,1077],{"class":717},[711,18860,2831],{"class":764},[711,18862,1077],{"class":717},[711,18864,12973],{"class":764},[711,18866,15507],{"class":717},[21,18868,14536,18869],{},[358,18870,15548],{},[16,18872,18874],{"id":18873},"_10-tri-rapide-ou-tri-fusion","10. Tri rapide ou tri fusion ?",[146,18876,292],{"id":18877},"tri-rapide",[31,18879,18880,18883,18886],{},[34,18881,18882],{},"souvent très performant en pratique ;",[34,18884,18885],{},"repose sur le pivot et le partitionnement ;",[34,18887,18888],{},"peut être sensible au choix du pivot.",[146,18890,286],{"id":18891},"tri-fusion",[31,18893,18894,18897,18900],{},[34,18895,18896],{},"très régulier ;",[34,18898,18899],{},"repose sur la division en deux parties égales ;",[34,18901,18902],{},"utilise une étape de fusion très claire.",[21,18904,18905],{},"Les deux sont importants à connaître.",[16,18907,13713],{"id":13712},[146,18909,16884],{"id":16883},[21,18911,18912],{},"La récursion doit toujours avoir une condition d'arrêt.",[146,18914,18916],{"id":18915},"mal-gérer-le-pivot","Mal gérer le pivot",[21,18918,18919],{},"Il faut bien séparer les valeurs plus petites, égales et plus grandes.",[146,18921,18923],{"id":18922},"modifier-la-même-liste-partout","Modifier la même liste partout",[21,18925,18926],{},"Pour apprendre plus facilement, il est souvent plus clair de retourner une nouvelle liste.",[16,18928,12752],{"id":12751},[21,18930,18931],{},"Le tri rapide est un algorithme puissant qui repose sur le pivot et le partitionnement.",[21,18933,9637],{},[31,18935,18936,18939,18942,18945],{},[34,18937,18938],{},"on choisit un pivot ;",[34,18940,18941],{},"on sépare les valeurs en plusieurs groupes ;",[34,18943,18944],{},"on trie récursivement les sous-listes ;",[34,18946,18947],{},"il est souvent très efficace en pratique.",[16,18949,4552],{"id":4551},[146,18951,4556],{"id":4555},[21,18953,18954],{},"Implémentez le tri rapide en JavaScript.",[146,18956,4563],{"id":4562},[21,18958,18959],{},"Testez votre fonction avec une liste vide.",[146,18961,4570],{"id":4569},[21,18963,17999],{},[146,18965,4577],{"id":4576},[21,18967,18968],{},"Essayez de modifier le pivot pour prendre le premier élément.",[16,18970,4591],{"id":4590},[146,18972,4595],{"id":4594},[350,18974,18975],{"className":12948,"code":18414,"language":12950,"meta":356,"style":356},[358,18976,18977,18989,19003,19009,19013,19017,19039,19049,19059,19069,19073,19087,19097,19105,19119,19127,19135,19143,19147,19151,19155,19177],{"__ignoreMap":356},[711,18978,18979,18981,18983,18985,18987],{"class":713,"line":714},[711,18980,13184],{"class":1370},[711,18982,18423],{"class":872},[711,18984,1789],{"class":717},[711,18986,13192],{"class":3203},[711,18988,3402],{"class":717},[711,18990,18991,18993,18995,18997,18999,19001],{"class":713,"line":521},[711,18992,16541],{"class":1370},[711,18994,16544],{"class":717},[711,18996,13229],{"class":764},[711,18998,16549],{"class":1370},[711,19000,2919],{"class":764},[711,19002,3402],{"class":717},[711,19004,19005,19007],{"class":713,"line":529},[711,19006,8645],{"class":1370},[711,19008,16560],{"class":717},[711,19010,19011],{"class":713,"line":906},[711,19012,3248],{"class":717},[711,19014,19015],{"class":713,"line":925},[711,19016,1114],{"emptyLinePlaceholder":554},[711,19018,19019,19021,19023,19025,19027,19029,19031,19033,19035,19037],{"class":713,"line":950},[711,19020,15192],{"class":1370},[711,19022,18464],{"class":764},[711,19024,12963],{"class":1370},[711,19026,18469],{"class":717},[711,19028,13270],{"class":872},[711,19030,16583],{"class":717},[711,19032,13229],{"class":764},[711,19034,16588],{"class":1370},[711,19036,8670],{"class":764},[711,19038,18482],{"class":717},[711,19040,19041,19043,19045,19047],{"class":713,"line":965},[711,19042,15192],{"class":1370},[711,19044,16599],{"class":764},[711,19046,12963],{"class":1370},[711,19048,16361],{"class":717},[711,19050,19051,19053,19055,19057],{"class":713,"line":991},[711,19052,15192],{"class":1370},[711,19054,13262],{"class":764},[711,19056,12963],{"class":1370},[711,19058,16361],{"class":717},[711,19060,19061,19063,19065,19067],{"class":713,"line":1001},[711,19062,15192],{"class":1370},[711,19064,16619],{"class":764},[711,19066,12963],{"class":1370},[711,19068,16361],{"class":717},[711,19070,19071],{"class":713,"line":1011},[711,19072,1114],{"emptyLinePlaceholder":554},[711,19074,19075,19077,19079,19081,19083,19085],{"class":713,"line":1024},[711,19076,14321],{"class":1370},[711,19078,3389],{"class":717},[711,19080,12957],{"class":1370},[711,19082,18527],{"class":764},[711,19084,18530],{"class":1370},[711,19086,18533],{"class":717},[711,19088,19089,19091,19093,19095],{"class":713,"line":556},[711,19090,11039],{"class":1370},[711,19092,18540],{"class":717},[711,19094,718],{"class":1370},[711,19096,18545],{"class":717},[711,19098,19099,19101,19103],{"class":713,"line":1046},[711,19100,18550],{"class":717},[711,19102,16437],{"class":872},[711,19104,18555],{"class":717},[711,19106,19107,19109,19111,19113,19115,19117],{"class":713,"line":3317},[711,19108,13348],{"class":717},[711,19110,13351],{"class":1370},[711,19112,18564],{"class":1370},[711,19114,18540],{"class":717},[711,19116,15286],{"class":1370},[711,19118,18545],{"class":717},[711,19120,19121,19123,19125],{"class":713,"line":3574},[711,19122,18575],{"class":717},[711,19124,16437],{"class":872},[711,19126,18555],{"class":717},[711,19128,19129,19131,19133],{"class":713,"line":3595},[711,19130,13348],{"class":717},[711,19132,13351],{"class":1370},[711,19134,759],{"class":717},[711,19136,19137,19139,19141],{"class":713,"line":3600},[711,19138,18592],{"class":717},[711,19140,16437],{"class":872},[711,19142,18555],{"class":717},[711,19144,19145],{"class":713,"line":3868},[711,19146,1223],{"class":717},[711,19148,19149],{"class":713,"line":3888},[711,19150,3248],{"class":717},[711,19152,19153],{"class":713,"line":3908},[711,19154,1114],{"emptyLinePlaceholder":554},[711,19156,19157,19159,19161,19163,19165,19167,19169,19171,19173,19175],{"class":713,"line":3928},[711,19158,13385],{"class":1370},[711,19160,12966],{"class":717},[711,19162,15202],{"class":1370},[711,19164,18619],{"class":872},[711,19166,16646],{"class":717},[711,19168,15202],{"class":1370},[711,19170,18626],{"class":717},[711,19172,15202],{"class":1370},[711,19174,18619],{"class":872},[711,19176,18633],{"class":717},[711,19178,19179],{"class":713,"line":3937},[711,19180,779],{"class":717},[16,19182,512],{"id":511},[21,19184,19185],{},"Une fois le tri rapide compris, vous avez déjà une bonne base pour lire et écrire la plupart des algorithmes de tri classiques.",[640,19187,14035],{},{"title":356,"searchDepth":521,"depth":521,"links":19189},[19190,19191,19192,19193,19194,19195,19198,19199,19200,19201,19204,19209,19213,19218,19219,19225,19228],{"id":18,"depth":521,"text":19},{"id":110,"depth":521,"text":111},{"id":12941,"depth":521,"text":12942},{"id":18361,"depth":521,"text":18362},{"id":18382,"depth":521,"text":18383},{"id":18407,"depth":521,"text":18408,"children":19196},[19197],{"id":2859,"depth":529,"text":2860},{"id":14412,"depth":521,"text":14413},{"id":17824,"depth":521,"text":17825},{"id":18747,"depth":521,"text":18748},{"id":18760,"depth":521,"text":18761,"children":19202},[19203],{"id":16764,"depth":529,"text":16765},{"id":16800,"depth":521,"text":16801,"children":19205},[19206,19207,19208],{"id":16804,"depth":529,"text":16805},{"id":13616,"depth":529,"text":13617},{"id":15515,"depth":529,"text":15516},{"id":18873,"depth":521,"text":18874,"children":19210},[19211,19212],{"id":18877,"depth":529,"text":292},{"id":18891,"depth":529,"text":286},{"id":13712,"depth":521,"text":13713,"children":19214},[19215,19216,19217],{"id":16883,"depth":529,"text":16884},{"id":18915,"depth":529,"text":18916},{"id":18922,"depth":529,"text":18923},{"id":12751,"depth":521,"text":12752},{"id":4551,"depth":521,"text":4552,"children":19220},[19221,19222,19223,19224],{"id":4555,"depth":529,"text":4556},{"id":4562,"depth":529,"text":4563},{"id":4569,"depth":529,"text":4570},{"id":4576,"depth":529,"text":4577},{"id":4590,"depth":521,"text":4591,"children":19226},[19227],{"id":4594,"depth":529,"text":4595},{"id":511,"depth":521,"text":512},"Un tutoriel complet pour comprendre le tri rapide, découvrir le rôle du pivot et voir comment fonctionne le partitionnement en JavaScript.",{},{"title":18264,"description":19229},"blog\u002Ftri-rapide",[560,16111,562],"lBIqoIfPOHmJsqY1ikFiZnMlHRMe76OLDpPK7pTGVDQ",{"id":19236,"title":19237,"body":19238,"coverImage":550,"description":19970,"extension":552,"meta":19971,"navigation":554,"path":19972,"published":554,"publishedAt":19973,"readTime":1011,"seo":19974,"stem":19975,"tags":19976,"__hash__":19977},"blog\u002Fblog\u002Fdecouvrir-javaScript.md","Découvrir JavaScript",{"type":8,"value":19239,"toc":19924},[19240,19243,19245,19248,19259,19261,19263,19286,19290,19293,19297,19300,19330,19333,19337,19340,19364,19367,19371,19374,19391,19395,19398,19415,19419,19423,19426,19430,19433,19437,19441,19444,19462,19466,19469,19473,19476,19490,19494,19497,19517,19521,19524,19542,19545,19550,19555,19560,19565,19570,19573,19577,19580,19585,19589,19633,19635,19641,19643,19647,19649,19663,19665,19681,19685,19687,19696,19698,19714,19718,19720,19738,19740,19756,19758,19761,19783,19785,19787,19790,19792,19795,19797,19800,19802,19805,19811,19813,19815,19833,19835,19852,19854,19896,19898,19916,19918,19921],[11,19241,19237],{"id":19242},"découvrir-javascript",[16,19244,19],{"id":18},[21,19246,19247],{},"JavaScript est l'un des langages les plus utilisés au monde pour créer des sites web interactifs.\nQuand on débute dans le développement web, on rencontre souvent trois technologies ensemble :",[31,19249,19250,19253,19256],{},[34,19251,19252],{},"HTML pour structurer le contenu ;",[34,19254,19255],{},"CSS pour gérer l'apparence ;",[34,19257,19258],{},"JavaScript pour ajouter le comportement.\nDans ce chapitre, nous allons voir le rôle de JavaScript, comprendre où il s'exécute, puis écrire quelques premières instructions simples.",[16,19260,111],{"id":110},[21,19262,591],{},[31,19264,19265,19268,19271,19274,19280,19283],{},[34,19266,19267],{},"expliquer à quoi sert JavaScript ;",[34,19269,19270],{},"faire la différence entre HTML, CSS et JavaScript ;",[34,19272,19273],{},"ouvrir la console du navigateur ;",[34,19275,19276,19277,1407],{},"écrire et lire une instruction simple avec ",[358,19278,19279],{},"console.log()",[34,19281,19282],{},"repérer les erreurs les plus fréquentes ;",[34,19284,19285],{},"créer vos premiers petits programmes.",[16,19287,19289],{"id":19288},"_1-html-css-et-javascript-qui-fait-quoi","1. HTML, CSS et JavaScript : qui fait quoi ?",[21,19291,19292],{},"Pour comprendre JavaScript, imaginons une page web comme une maison.",[146,19294,19296],{"id":19295},"html-la-structure","HTML : la structure",[21,19298,19299],{},"Le HTML correspond à la structure de la maison : les murs, les portes, les fenêtres.\nExemple :",[350,19301,19303],{"className":705,"code":19302,"language":707,"meta":356,"style":356},"\u003Ch1>Bienvenue\u003C\u002Fh1>\n\u003Cp>Mon premier site web.\u003C\u002Fp>\n",[358,19304,19305,19317],{"__ignoreMap":356},[711,19306,19307,19309,19311,19313,19315],{"class":713,"line":714},[711,19308,718],{"class":717},[711,19310,11],{"class":721},[711,19312,724],{"class":717},[711,19314,11],{"class":721},[711,19316,729],{"class":717},[711,19318,19319,19321,19323,19326,19328],{"class":713,"line":521},[711,19320,718],{"class":717},[711,19322,21],{"class":721},[711,19324,19325],{"class":717},">Mon premier site web.\u003C\u002F",[711,19327,21],{"class":721},[711,19329,729],{"class":717},[21,19331,19332],{},"Ici, le navigateur comprend qu'il doit afficher un titre et un paragraphe.",[146,19334,19336],{"id":19335},"css-lapparence","CSS : l'apparence",[21,19338,19339],{},"Le CSS correspond à la décoration : les couleurs, les tailles, les espacements.\nExemple :",[350,19341,19342],{"className":748,"code":749,"language":750,"meta":356,"style":356},[358,19343,19344,19350,19360],{"__ignoreMap":356},[711,19345,19346,19348],{"class":713,"line":714},[711,19347,11],{"class":721},[711,19349,759],{"class":717},[711,19351,19352,19354,19356,19358],{"class":713,"line":521},[711,19353,765],{"class":764},[711,19355,768],{"class":717},[711,19357,771],{"class":764},[711,19359,774],{"class":717},[711,19361,19362],{"class":713,"line":529},[711,19363,779],{"class":717},[21,19365,19366],{},"Le titre devient bleu.",[146,19368,19370],{"id":19369},"javascript-le-comportement","JavaScript : le comportement",[21,19372,19373],{},"JavaScript correspond aux mécanismes qui font vivre la maison.\nIl permet par exemple de :",[31,19375,19376,19379,19382,19385,19388],{},[34,19377,19378],{},"ouvrir un menu ;",[34,19380,19381],{},"afficher un message ;",[34,19383,19384],{},"vérifier un formulaire ;",[34,19386,19387],{},"charger des données ;",[34,19389,19390],{},"modifier le contenu d'une page.\nSans JavaScript, une page reste surtout statique.",[16,19392,19394],{"id":19393},"_2-quest-ce-que-javascript","2. Qu'est-ce que JavaScript ?",[21,19396,19397],{},"JavaScript est un langage de programmation créé à l'origine pour ajouter de l'interactivité dans les navigateurs.\nAujourd'hui, il sert aussi à créer :",[31,19399,19400,19403,19406,19409,19412],{},[34,19401,19402],{},"des applications web ;",[34,19404,19405],{},"des applications mobiles ;",[34,19407,19408],{},"des applications desktop ;",[34,19410,19411],{},"des serveurs ;",[34,19413,19414],{},"des outils de développement.\nC'est un langage très polyvalent.",[16,19416,19418],{"id":19417},"_3-où-javascript-sexécute-t-il","3. Où JavaScript s'exécute-t-il ?",[146,19420,19422],{"id":19421},"dans-le-navigateur","Dans le navigateur",[21,19424,19425],{},"C'est son environnement le plus connu.\nQuand vous cliquez sur un bouton et qu'un menu s'ouvre, JavaScript est souvent en train d'agir.",[146,19427,19429],{"id":19428},"sur-un-serveur","Sur un serveur",[21,19431,19432],{},"Avec Node.js, JavaScript peut aussi s'exécuter côté serveur.\nCela permet par exemple de créer des API ou de traiter des données.",[16,19434,19436],{"id":19435},"_4-pourquoi-apprendre-javascript","4. Pourquoi apprendre JavaScript ?",[146,19438,19440],{"id":19439},"il-est-accessible","Il est accessible",[21,19442,19443],{},"Quelques lignes suffisent pour voir un résultat.",[350,19445,19447],{"className":12948,"code":19446,"language":12950,"meta":356,"style":356},"console.log(\"Bonjour\");\n",[358,19448,19449],{"__ignoreMap":356},[711,19450,19451,19453,19455,19457,19460],{"class":713,"line":714},[711,19452,13485],{"class":717},[711,19454,13488],{"class":872},[711,19456,1789],{"class":717},[711,19458,19459],{"class":890},"\"Bonjour\"",[711,19461,1804],{"class":717},[146,19463,19465],{"id":19464},"il-est-très-demandé","Il est très demandé",[21,19467,19468],{},"JavaScript est utilisé dans énormément de projets web.",[146,19470,19472],{"id":19471},"il-possède-une-grande-communauté","Il possède une grande communauté",[21,19474,19475],{},"Vous trouverez facilement :",[31,19477,19478,19481,19484,19487],{},[34,19479,19480],{},"des tutoriels ;",[34,19482,19483],{},"des bibliothèques ;",[34,19485,19486],{},"des exemples ;",[34,19488,19489],{},"de l'aide en ligne.",[16,19491,19493],{"id":19492},"_5-ouvrir-la-console-du-navigateur","5. Ouvrir la console du navigateur",[21,19495,19496],{},"La console est un outil très pratique pour tester du code.\nPour l'ouvrir :",[31,19498,19499,19502,19505,19508,19511,19514],{},[34,19500,19501],{},"faites un clic droit sur la page ;",[34,19503,19504],{},"cliquez sur Inspecter ;",[34,19506,19507],{},"ouvrez l'onglet Console.\nLa console sert à :",[34,19509,19510],{},"afficher des informations ;",[34,19512,19513],{},"tester une instruction ;",[34,19515,19516],{},"repérer des erreurs.",[16,19518,19520],{"id":19519},"_6-votre-première-instruction-javascript","6. Votre première instruction JavaScript",[21,19522,19523],{},"Écrivons notre premier programme :",[350,19525,19527],{"className":12948,"code":19526,"language":12950,"meta":356,"style":356},"console.log(\"Bonjour tout le monde !\");\n",[358,19528,19529],{"__ignoreMap":356},[711,19530,19531,19533,19535,19537,19540],{"class":713,"line":714},[711,19532,13485],{"class":717},[711,19534,13488],{"class":872},[711,19536,1789],{"class":717},[711,19538,19539],{"class":890},"\"Bonjour tout le monde !\"",[711,19541,1804],{"class":717},[21,19543,19544],{},"Cette ligne demande au navigateur d'afficher un message dans la console.",[146,19546,19548],{"id":19547},"console",[358,19549,19547],{},[21,19551,19552,19554],{},[358,19553,19547],{}," est un objet fourni par le navigateur.",[146,19556,19557],{"id":13488},[358,19558,19559],{},"log()",[21,19561,19562,19564],{},[358,19563,19559],{}," est une méthode qui affiche une valeur.",[146,19566,19568],{"id":19567},"bonjour-tout-le-monde",[358,19569,19539],{},[21,19571,19572],{},"Ceci est une chaîne de caractères, c'est-à-dire du texte.",[16,19574,19576],{"id":19575},"_7-comment-lire-cette-instruction","7. Comment lire cette instruction ?",[21,19578,19579],{},"On peut la lire ainsi :",[391,19581,19582],{},[21,19583,19584],{},"Affiche dans la console le texte \"Bonjour tout le monde !\".",[16,19586,19588],{"id":19587},"_8-quelques-exemples-supplémentaires","8. Quelques exemples supplémentaires",[350,19590,19592],{"className":12948,"code":19591,"language":12950,"meta":356,"style":356},"console.log(\"Je m'appelle Corneille\");\nconsole.log(\"J'apprends JavaScript\");\nconsole.log(\"Je vais progresser étape par étape\");\n",[358,19593,19594,19607,19620],{"__ignoreMap":356},[711,19595,19596,19598,19600,19602,19605],{"class":713,"line":714},[711,19597,13485],{"class":717},[711,19599,13488],{"class":872},[711,19601,1789],{"class":717},[711,19603,19604],{"class":890},"\"Je m'appelle Corneille\"",[711,19606,1804],{"class":717},[711,19608,19609,19611,19613,19615,19618],{"class":713,"line":521},[711,19610,13485],{"class":717},[711,19612,13488],{"class":872},[711,19614,1789],{"class":717},[711,19616,19617],{"class":890},"\"J'apprends JavaScript\"",[711,19619,1804],{"class":717},[711,19621,19622,19624,19626,19628,19631],{"class":713,"line":529},[711,19623,13485],{"class":717},[711,19625,13488],{"class":872},[711,19627,1789],{"class":717},[711,19629,19630],{"class":890},"\"Je vais progresser étape par étape\"",[711,19632,1804],{"class":717},[21,19634,12634],{},[350,19636,19639],{"className":19637,"code":19638,"language":355,"meta":356},[353],"Je m'appelle Corneille\nJ'apprends JavaScript\nJe vais progresser étape par étape\n",[358,19640,19638],{"__ignoreMap":356},[16,19642,14630],{"id":14629},[146,19644,19646],{"id":19645},"oublier-les-guillemets","Oublier les guillemets",[21,19648,7873],{},[350,19650,19652],{"className":12948,"code":19651,"language":12950,"meta":356,"style":356},"console.log(Bonjour);\n",[358,19653,19654],{"__ignoreMap":356},[711,19655,19656,19658,19660],{"class":713,"line":714},[711,19657,13485],{"class":717},[711,19659,13488],{"class":872},[711,19661,19662],{"class":717},"(Bonjour);\n",[21,19664,7890],{},[350,19666,19667],{"className":12948,"code":19446,"language":12950,"meta":356,"style":356},[358,19668,19669],{"__ignoreMap":356},[711,19670,19671,19673,19675,19677,19679],{"class":713,"line":714},[711,19672,13485],{"class":717},[711,19674,13488],{"class":872},[711,19676,1789],{"class":717},[711,19678,19459],{"class":890},[711,19680,1804],{"class":717},[146,19682,19684],{"id":19683},"oublier-une-parenthèse","Oublier une parenthèse",[21,19686,7873],{},[350,19688,19690],{"className":12948,"code":19689,"language":12950,"meta":356,"style":356},"\u002F\u002F console.log(\"Bonjour\";\n",[358,19691,19692],{"__ignoreMap":356},[711,19693,19694],{"class":713,"line":714},[711,19695,19689],{"class":10405},[21,19697,7890],{},[350,19699,19700],{"className":12948,"code":19446,"language":12950,"meta":356,"style":356},[358,19701,19702],{"__ignoreMap":356},[711,19703,19704,19706,19708,19710,19712],{"class":713,"line":714},[711,19705,13485],{"class":717},[711,19707,13488],{"class":872},[711,19709,1789],{"class":717},[711,19711,19459],{"class":890},[711,19713,1804],{"class":717},[146,19715,19717],{"id":19716},"se-tromper-dans-le-nom-de-la-fonction","Se tromper dans le nom de la fonction",[21,19719,7873],{},[350,19721,19723],{"className":12948,"code":19722,"language":12950,"meta":356,"style":356},"Console.log(\"Bonjour\");\n",[358,19724,19725],{"__ignoreMap":356},[711,19726,19727,19730,19732,19734,19736],{"class":713,"line":714},[711,19728,19729],{"class":717},"Console.",[711,19731,13488],{"class":872},[711,19733,1789],{"class":717},[711,19735,19459],{"class":890},[711,19737,1804],{"class":717},[21,19739,7890],{},[350,19741,19742],{"className":12948,"code":19446,"language":12950,"meta":356,"style":356},[358,19743,19744],{"__ignoreMap":356},[711,19745,19746,19748,19750,19752,19754],{"class":713,"line":714},[711,19747,13485],{"class":717},[711,19749,13488],{"class":872},[711,19751,1789],{"class":717},[711,19753,19459],{"class":890},[711,19755,1804],{"class":717},[16,19757,14659],{"id":14658},[21,19759,19760],{},"Dans ce chapitre, nous avons vu :",[31,19762,19763,19766,19769,19772,19775,19780],{},[34,19764,19765],{},"le rôle de JavaScript ;",[34,19767,19768],{},"la différence entre HTML, CSS et JavaScript ;",[34,19770,19771],{},"l'endroit où JavaScript s'exécute ;",[34,19773,19774],{},"l'utilisation de la console ;",[34,19776,19777,19778,1407],{},"la première instruction ",[358,19779,19279],{},[34,19781,19782],{},"les erreurs les plus courantes.",[16,19784,4552],{"id":4551},[146,19786,4556],{"id":4555},[21,19788,19789],{},"Affichez votre prénom dans la console.",[146,19791,4563],{"id":4562},[21,19793,19794],{},"Affichez votre âge dans la console.",[146,19796,4570],{"id":4569},[21,19798,19799],{},"Affichez trois messages différents dans la console.",[146,19801,4577],{"id":4576},[21,19803,19804],{},"Affichez une phrase complète vous présentant.\nExemple :",[350,19806,19809],{"className":19807,"code":19808,"language":355,"meta":356},[353],"Je m'appelle Alice et j'apprends JavaScript.\n",[358,19810,19808],{"__ignoreMap":356},[16,19812,4591],{"id":4590},[146,19814,4595],{"id":4594},[350,19816,19818],{"className":12948,"code":19817,"language":12950,"meta":356,"style":356},"console.log(\"Corneille\");\n",[358,19819,19820],{"__ignoreMap":356},[711,19821,19822,19824,19826,19828,19831],{"class":713,"line":714},[711,19823,13485],{"class":717},[711,19825,13488],{"class":872},[711,19827,1789],{"class":717},[711,19829,19830],{"class":890},"\"Corneille\"",[711,19832,1804],{"class":717},[146,19834,4646],{"id":4645},[350,19836,19838],{"className":12948,"code":19837,"language":12950,"meta":356,"style":356},"console.log(24);\n",[358,19839,19840],{"__ignoreMap":356},[711,19841,19842,19844,19846,19848,19850],{"class":713,"line":714},[711,19843,13485],{"class":717},[711,19845,13488],{"class":872},[711,19847,1789],{"class":717},[711,19849,2932],{"class":764},[711,19851,1804],{"class":717},[146,19853,4715],{"id":4714},[350,19855,19857],{"className":12948,"code":19856,"language":12950,"meta":356,"style":356},"console.log(\"Bonjour\");\nconsole.log(\"Comment allez-vous ?\");\nconsole.log(\"J'apprends JavaScript\");\n",[358,19858,19859,19871,19884],{"__ignoreMap":356},[711,19860,19861,19863,19865,19867,19869],{"class":713,"line":714},[711,19862,13485],{"class":717},[711,19864,13488],{"class":872},[711,19866,1789],{"class":717},[711,19868,19459],{"class":890},[711,19870,1804],{"class":717},[711,19872,19873,19875,19877,19879,19882],{"class":713,"line":521},[711,19874,13485],{"class":717},[711,19876,13488],{"class":872},[711,19878,1789],{"class":717},[711,19880,19881],{"class":890},"\"Comment allez-vous ?\"",[711,19883,1804],{"class":717},[711,19885,19886,19888,19890,19892,19894],{"class":713,"line":529},[711,19887,13485],{"class":717},[711,19889,13488],{"class":872},[711,19891,1789],{"class":717},[711,19893,19617],{"class":890},[711,19895,1804],{"class":717},[146,19897,4763],{"id":4762},[350,19899,19901],{"className":12948,"code":19900,"language":12950,"meta":356,"style":356},"console.log(\"Je m'appelle Corneille et j'apprends JavaScript.\");\n",[358,19902,19903],{"__ignoreMap":356},[711,19904,19905,19907,19909,19911,19914],{"class":713,"line":714},[711,19906,13485],{"class":717},[711,19908,13488],{"class":872},[711,19910,1789],{"class":717},[711,19912,19913],{"class":890},"\"Je m'appelle Corneille et j'apprends JavaScript.\"",[711,19915,1804],{"class":717},[16,19917,512],{"id":511},[21,19919,19920],{},"Dans le prochain chapitre, nous apprendrons à stocker des informations dans des variables.",[640,19922,19923],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":356,"searchDepth":521,"depth":521,"links":19925},[19926,19927,19928,19933,19934,19938,19943,19944,19949,19950,19951,19956,19957,19963,19969],{"id":18,"depth":521,"text":19},{"id":110,"depth":521,"text":111},{"id":19288,"depth":521,"text":19289,"children":19929},[19930,19931,19932],{"id":19295,"depth":529,"text":19296},{"id":19335,"depth":529,"text":19336},{"id":19369,"depth":529,"text":19370},{"id":19393,"depth":521,"text":19394},{"id":19417,"depth":521,"text":19418,"children":19935},[19936,19937],{"id":19421,"depth":529,"text":19422},{"id":19428,"depth":529,"text":19429},{"id":19435,"depth":521,"text":19436,"children":19939},[19940,19941,19942],{"id":19439,"depth":529,"text":19440},{"id":19464,"depth":529,"text":19465},{"id":19471,"depth":529,"text":19472},{"id":19492,"depth":521,"text":19493},{"id":19519,"depth":521,"text":19520,"children":19945},[19946,19947,19948],{"id":19547,"depth":529,"text":19547},{"id":13488,"depth":529,"text":19559},{"id":19567,"depth":529,"text":19539},{"id":19575,"depth":521,"text":19576},{"id":19587,"depth":521,"text":19588},{"id":14629,"depth":521,"text":14630,"children":19952},[19953,19954,19955],{"id":19645,"depth":529,"text":19646},{"id":19683,"depth":529,"text":19684},{"id":19716,"depth":529,"text":19717},{"id":14658,"depth":521,"text":14659},{"id":4551,"depth":521,"text":4552,"children":19958},[19959,19960,19961,19962],{"id":4555,"depth":529,"text":4556},{"id":4562,"depth":529,"text":4563},{"id":4569,"depth":529,"text":4570},{"id":4576,"depth":529,"text":4577},{"id":4590,"depth":521,"text":4591,"children":19964},[19965,19966,19967,19968],{"id":4594,"depth":529,"text":4595},{"id":4645,"depth":529,"text":4646},{"id":4714,"depth":529,"text":4715},{"id":4762,"depth":529,"text":4763},{"id":511,"depth":521,"text":512},"Comprendre ce qu'est JavaScript, à quoi il sert et comment écrire ses premières lignes de code dans un navigateur.",{},"\u002Fblog\u002Fdecouvrir-javascript","2026-06-01",{"title":19237,"description":19970},"blog\u002Fdecouvrir-javaScript",[562,561],"H5uHvyTJ3t8uiuE7ldyWrzE8sGH6CeRZ3ddqrGwaudE",{"id":19979,"title":19980,"body":19981,"coverImage":550,"description":21872,"extension":552,"meta":21873,"navigation":554,"path":21874,"published":554,"publishedAt":19973,"readTime":3868,"seo":21875,"stem":21876,"tags":21877,"__hash__":21879},"blog\u002Fblog\u002Fjavascript-moderne-pour-developpeurs.md","JavaScript moderne pour développeurs : les notions qui font la différence",{"type":8,"value":19982,"toc":21825},[19983,19987,19991,19994,19998,20001,20021,20025,20028,20042,20046,20049,20070,20158,20161,20167,20170,20174,20177,20181,20184,20207,20237,20243,20247,20250,20309,20319,20321,20324,20338,20342,20346,20349,20399,20402,20443,20446,20450,20453,20482,20499,20503,20506,20615,20618,20632,20636,20639,20643,20646,20685,20689,20692,20738,20741,20745,20748,20834,20837,20841,20845,20850,20925,20933,20937,20940,21013,21016,21020,21023,21037,21041,21044,21159,21162,21201,21205,21273,21276,21280,21283,21287,21290,21307,21311,21314,21401,21405,21410,21513,21517,21523,21527,21530,21613,21617,21634,21638,21641,21645,21716,21720,21723,21737,21741,21744,21767,21771,21774,21793,21795,21798,21817,21819,21822],[11,19984,19986],{"id":19985},"javascript-moderne-pour-développeurs","JavaScript moderne pour développeurs",[16,19988,19990],{"id":19989},"à-qui-sadresse-ce-chapitre","À qui s'adresse ce chapitre",[21,19992,19993],{},"Ce chapitre ne vise pas à expliquer les bases du langage. Il s'adresse à une personne qui écrit déjà du code et veut aller plus loin que la simple syntaxe.\nL'objectif est de comprendre les mécanismes qui rendent JavaScript parfois déroutant, mais aussi très puissant : le moteur d'exécution, la portée des variables, les closures, le fonctionnement de l'asynchrone, les modules et quelques bonnes pratiques de production.",[16,19995,19997],{"id":19996},"pourquoi-javascript-mérite-dêtre-compris-en-profondeur","Pourquoi JavaScript mérite d'être compris en profondeur",[21,19999,20000],{},"Beaucoup de développeurs savent écrire du JavaScript, mais peu comprennent vraiment comment le langage exécute le code.\nCette différence se voit vite dans les bugs récurrents :",[31,20002,20003,20006,20009,20012,20018],{},[34,20004,20005],{},"variable accessible au mauvais endroit ;",[34,20007,20008],{},"valeur inattendue après une mutation ;",[34,20010,20011],{},"appel asynchrone mal géré ;",[34,20013,20014,20017],{},[358,20015,20016],{},"this"," mal compris ;",[34,20019,20020],{},"logique métier dispersée dans trop de fonctions.\nComprendre ces sujets ne sert pas seulement à \"mieux connaître JavaScript\". Cela permet d'écrire du code plus prévisible, plus lisible et plus facile à maintenir.",[16,20022,20024],{"id":20023},"_1-comment-javascript-sexécute-réellement","1. Comment JavaScript s'exécute réellement",[21,20026,20027],{},"JavaScript n'est pas juste une suite d'instructions lues une par une. Le langage s'exécute dans un environnement qui gère plusieurs mécanismes :",[31,20029,20030,20033,20036,20039],{},[34,20031,20032],{},"une pile d'appels pour les fonctions synchrones ;",[34,20034,20035],{},"une mémoire pour les variables et les objets ;",[34,20037,20038],{},"une boucle d'événements pour les tâches différées ;",[34,20040,20041],{},"des files de tâches pour les promesses, les timers et les événements.",[146,20043,20045],{"id":20044},"le-modèle-mental-utile","Le modèle mental utile",[21,20047,20048],{},"Quand vous écrivez du JavaScript, le moteur :",[60,20050,20051,20054,20057,20060,20063],{},[34,20052,20053],{},"lit votre code ;",[34,20055,20056],{},"place les appels synchrones dans la pile ;",[34,20058,20059],{},"exécute le code immédiatement disponible ;",[34,20061,20062],{},"délègue certaines opérations à l'environnement ;",[34,20064,20065,20066,20069],{},"reprend l'exécution quand les callbacks ou les promesses sont prêts.\nC'est ce modèle qui explique pourquoi un ",[358,20067,20068],{},"setTimeout",", une requête réseau ou une promesse ne bloquent pas toute l'application.",[350,20071,20073],{"className":12948,"code":20072,"language":12950,"meta":356,"style":356},"console.log('A');\nsetTimeout(() => console.log('B'), 0);\nPromise.resolve().then(() => console.log('C'));\nconsole.log('D');\n",[358,20074,20075,20088,20114,20145],{"__ignoreMap":356},[711,20076,20077,20079,20081,20083,20086],{"class":713,"line":714},[711,20078,13485],{"class":717},[711,20080,13488],{"class":872},[711,20082,1789],{"class":717},[711,20084,20085],{"class":890},"'A'",[711,20087,1804],{"class":717},[711,20089,20090,20092,20095,20098,20101,20103,20105,20108,20110,20112],{"class":713,"line":521},[711,20091,20068],{"class":872},[711,20093,20094],{"class":717},"(() ",[711,20096,20097],{"class":1370},"=>",[711,20099,20100],{"class":717}," console.",[711,20102,13488],{"class":872},[711,20104,1789],{"class":717},[711,20106,20107],{"class":890},"'B'",[711,20109,8841],{"class":717},[711,20111,1797],{"class":764},[711,20113,1804],{"class":717},[711,20115,20116,20119,20121,20124,20127,20130,20132,20134,20136,20138,20140,20143],{"class":713,"line":529},[711,20117,20118],{"class":764},"Promise",[711,20120,831],{"class":717},[711,20122,20123],{"class":872},"resolve",[711,20125,20126],{"class":717},"().",[711,20128,20129],{"class":872},"then",[711,20131,20094],{"class":717},[711,20133,20097],{"class":1370},[711,20135,20100],{"class":717},[711,20137,13488],{"class":872},[711,20139,1789],{"class":717},[711,20141,20142],{"class":890},"'C'",[711,20144,4320],{"class":717},[711,20146,20147,20149,20151,20153,20156],{"class":713,"line":906},[711,20148,13485],{"class":717},[711,20150,13488],{"class":872},[711,20152,1789],{"class":717},[711,20154,20155],{"class":890},"'D'",[711,20157,1804],{"class":717},[21,20159,20160],{},"Dans la plupart des cas, l'ordre affiché sera :",[350,20162,20165],{"className":20163,"code":20164,"language":355,"meta":356},[353],"A\nD\nC\nB\n",[358,20166,20164],{"__ignoreMap":356},[21,20168,20169],{},"Ce résultat surprend souvent les débutants, mais il devient logique dès qu'on comprend la place des microtâches et des macrotâches dans l'event loop.",[16,20171,20173],{"id":20172},"_2-valeurs-primitives-objets-et-mutation","2. Valeurs primitives, objets et mutation",[21,20175,20176],{},"JavaScript distingue deux grands types de valeurs : les primitives et les objets.",[146,20178,20180],{"id":20179},"les-primitives","Les primitives",[21,20182,20183],{},"Les primitives sont immuables :",[31,20185,20186,20189,20192,20195,20198,20201,20204],{},[34,20187,20188],{},"string ;",[34,20190,20191],{},"number ;",[34,20193,20194],{},"boolean ;",[34,20196,20197],{},"null ;",[34,20199,20200],{},"undefined ;",[34,20202,20203],{},"symbol ;",[34,20205,20206],{},"bigint.",[350,20208,20210],{"className":12948,"code":20209,"language":12950,"meta":356,"style":356},"let name = 'Corneille';\nname.toUpperCase();\n",[358,20211,20212,20226],{"__ignoreMap":356},[711,20213,20214,20216,20219,20221,20224],{"class":713,"line":714},[711,20215,14326],{"class":1370},[711,20217,20218],{"class":717}," name ",[711,20220,887],{"class":1370},[711,20222,20223],{"class":890}," 'Corneille'",[711,20225,774],{"class":717},[711,20227,20228,20231,20234],{"class":713,"line":521},[711,20229,20230],{"class":717},"name.",[711,20232,20233],{"class":872},"toUpperCase",[711,20235,20236],{"class":717},"();\n",[21,20238,1387,20239,20242],{},[358,20240,20241],{},"toUpperCase()"," ne modifie pas la chaîne d'origine. Il retourne une nouvelle valeur.",[146,20244,20246],{"id":20245},"les-objets","Les objets",[21,20248,20249],{},"Les objets, tableaux et fonctions sont des références.",[350,20251,20253],{"className":12948,"code":20252,"language":12950,"meta":356,"style":356},"const user = { name: 'Corneille' };\nconst admin = user;\nadmin.name = 'Alice';\nconsole.log(user.name); \u002F\u002F Alice\n",[358,20254,20255,20273,20285,20297],{"__ignoreMap":356},[711,20256,20257,20259,20262,20264,20267,20270],{"class":713,"line":714},[711,20258,12957],{"class":1370},[711,20260,20261],{"class":764}," user",[711,20263,12963],{"class":1370},[711,20265,20266],{"class":717}," { name: ",[711,20268,20269],{"class":890},"'Corneille'",[711,20271,20272],{"class":717}," };\n",[711,20274,20275,20277,20280,20282],{"class":713,"line":521},[711,20276,12957],{"class":1370},[711,20278,20279],{"class":764}," admin",[711,20281,12963],{"class":1370},[711,20283,20284],{"class":717}," user;\n",[711,20286,20287,20290,20292,20295],{"class":713,"line":529},[711,20288,20289],{"class":717},"admin.name ",[711,20291,887],{"class":1370},[711,20293,20294],{"class":890}," 'Alice'",[711,20296,774],{"class":717},[711,20298,20299,20301,20303,20306],{"class":713,"line":906},[711,20300,13485],{"class":717},[711,20302,13488],{"class":872},[711,20304,20305],{"class":717},"(user.name); ",[711,20307,20308],{"class":10405},"\u002F\u002F Alice\n",[21,20310,20311,20312,1913,20315,20318],{},"Dans ce cas, ",[358,20313,20314],{},"user",[358,20316,20317],{},"admin"," pointent vers la même référence. C'est un point essentiel pour comprendre les effets de bord.",[146,20320,7297],{"id":7296},[21,20322,20323],{},"En pratique, cela influence :",[31,20325,20326,20329,20332,20335],{},[34,20327,20328],{},"la copie d'état ;",[34,20330,20331],{},"la gestion des formulaires ;",[34,20333,20334],{},"les mises à jour dans React, Vue ou Nuxt ;",[34,20336,20337],{},"les fonctions utilitaires qui doivent rester pures.\nLe réflexe à adopter est simple : plus une donnée est partagée, plus vous devez savoir si vous la modifiez ou si vous en créez une copie.",[16,20339,20341],{"id":20340},"_3-scope-hoisting-et-fermeture","3. Scope, hoisting et fermeture",[146,20343,20345],{"id":20344},"le-scope","Le scope",[21,20347,20348],{},"Le scope définit où une variable est visible.",[350,20350,20352],{"className":12948,"code":20351,"language":12950,"meta":356,"style":356},"function demo() {\n const message = 'interne';\n console.log(message);\n}\ndemo();\n",[358,20353,20354,20364,20378,20388,20392],{"__ignoreMap":356},[711,20355,20356,20358,20361],{"class":713,"line":714},[711,20357,13184],{"class":1370},[711,20359,20360],{"class":872}," demo",[711,20362,20363],{"class":717},"() {\n",[711,20365,20366,20368,20371,20373,20376],{"class":713,"line":521},[711,20367,15192],{"class":1370},[711,20369,20370],{"class":764}," message",[711,20372,12963],{"class":1370},[711,20374,20375],{"class":890}," 'interne'",[711,20377,774],{"class":717},[711,20379,20380,20383,20385],{"class":713,"line":529},[711,20381,20382],{"class":717}," console.",[711,20384,13488],{"class":872},[711,20386,20387],{"class":717},"(message);\n",[711,20389,20390],{"class":713,"line":906},[711,20391,779],{"class":717},[711,20393,20394,20397],{"class":713,"line":925},[711,20395,20396],{"class":872},"demo",[711,20398,20236],{"class":717},[21,20400,20401],{},"Une variable déclarée à l'intérieur d'une fonction n'est pas accessible à l'extérieur.",[350,20403,20405],{"className":12948,"code":20404,"language":12950,"meta":356,"style":356},"function demo() {\n const message = 'interne';\n}\nconsole.log(message); \u002F\u002F ReferenceError\n",[358,20406,20407,20415,20427,20431],{"__ignoreMap":356},[711,20408,20409,20411,20413],{"class":713,"line":714},[711,20410,13184],{"class":1370},[711,20412,20360],{"class":872},[711,20414,20363],{"class":717},[711,20416,20417,20419,20421,20423,20425],{"class":713,"line":521},[711,20418,15192],{"class":1370},[711,20420,20370],{"class":764},[711,20422,12963],{"class":1370},[711,20424,20375],{"class":890},[711,20426,774],{"class":717},[711,20428,20429],{"class":713,"line":529},[711,20430,779],{"class":717},[711,20432,20433,20435,20437,20440],{"class":713,"line":906},[711,20434,13485],{"class":717},[711,20436,13488],{"class":872},[711,20438,20439],{"class":717},"(message); ",[711,20441,20442],{"class":10405},"\u002F\u002F ReferenceError\n",[21,20444,20445],{},"Comprendre le scope évite beaucoup d'erreurs de logique.",[146,20447,20449],{"id":20448},"hoisting","Hoisting",[21,20451,20452],{},"JavaScript \"remonte\" certaines déclarations pendant la phase d'analyse.",[350,20454,20456],{"className":12948,"code":20455,"language":12950,"meta":356,"style":356},"console.log(title);\nvar title = 'Hello';\n",[358,20457,20458,20467],{"__ignoreMap":356},[711,20459,20460,20462,20464],{"class":713,"line":714},[711,20461,13485],{"class":717},[711,20463,13488],{"class":872},[711,20465,20466],{"class":717},"(title);\n",[711,20468,20469,20472,20475,20477,20480],{"class":713,"line":521},[711,20470,20471],{"class":1370},"var",[711,20473,20474],{"class":717}," title ",[711,20476,887],{"class":1370},[711,20478,20479],{"class":890}," 'Hello'",[711,20481,774],{"class":717},[21,20483,20484,20485,20487,20488,20490,20491,20493,20494,1913,20496,20498],{},"Avec ",[358,20486,20471],{},", cela produit souvent une valeur ",[358,20489,15569],{}," plutôt qu'une erreur claire. C'est une des raisons pour lesquelles ",[358,20492,20471],{}," est désormais à éviter.\nAvec ",[358,20495,14326],{},[358,20497,12957],{},", le comportement est plus strict et plus sain.",[146,20500,20502],{"id":20501},"closures","Closures",[21,20504,20505],{},"Une closure apparaît lorsqu'une fonction garde accès à son scope parent, même après la fin de ce scope.",[350,20507,20509],{"className":12948,"code":20508,"language":12950,"meta":356,"style":356},"function createCounter() {\n let count = 0;\n return function () {\n count += 1;\n return count;\n };\n}\nconst counter = createCounter();\nconsole.log(counter()); \u002F\u002F 1\nconsole.log(counter()); \u002F\u002F 2\n",[358,20510,20511,20520,20533,20543,20554,20561,20566,20570,20583,20600],{"__ignoreMap":356},[711,20512,20513,20515,20518],{"class":713,"line":714},[711,20514,13184],{"class":1370},[711,20516,20517],{"class":872}," createCounter",[711,20519,20363],{"class":717},[711,20521,20522,20524,20527,20529,20531],{"class":713,"line":521},[711,20523,13204],{"class":1370},[711,20525,20526],{"class":717}," count ",[711,20528,887],{"class":1370},[711,20530,13212],{"class":764},[711,20532,774],{"class":717},[711,20534,20535,20537,20540],{"class":713,"line":529},[711,20536,13385],{"class":1370},[711,20538,20539],{"class":1370}," function",[711,20541,20542],{"class":717}," () {\n",[711,20544,20545,20548,20550,20552],{"class":713,"line":906},[711,20546,20547],{"class":717}," count ",[711,20549,10650],{"class":1370},[711,20551,2919],{"class":764},[711,20553,774],{"class":717},[711,20555,20556,20558],{"class":713,"line":925},[711,20557,8645],{"class":1370},[711,20559,20560],{"class":717}," count;\n",[711,20562,20563],{"class":713,"line":950},[711,20564,20565],{"class":717}," };\n",[711,20567,20568],{"class":713,"line":965},[711,20569,779],{"class":717},[711,20571,20572,20574,20577,20579,20581],{"class":713,"line":991},[711,20573,12957],{"class":1370},[711,20575,20576],{"class":764}," counter",[711,20578,12963],{"class":1370},[711,20580,20517],{"class":872},[711,20582,20236],{"class":717},[711,20584,20585,20587,20589,20591,20594,20597],{"class":713,"line":1001},[711,20586,13485],{"class":717},[711,20588,13488],{"class":872},[711,20590,1789],{"class":717},[711,20592,20593],{"class":872},"counter",[711,20595,20596],{"class":717},"()); ",[711,20598,20599],{"class":10405},"\u002F\u002F 1\n",[711,20601,20602,20604,20606,20608,20610,20612],{"class":713,"line":1011},[711,20603,13485],{"class":717},[711,20605,13488],{"class":872},[711,20607,1789],{"class":717},[711,20609,20593],{"class":872},[711,20611,20596],{"class":717},[711,20613,20614],{"class":10405},"\u002F\u002F 2\n",[21,20616,20617],{},"C'est un mécanisme fondamental en JavaScript. On le retrouve partout :",[31,20619,20620,20623,20626,20629],{},[34,20621,20622],{},"dans les factories ;",[34,20624,20625],{},"dans les modules ;",[34,20627,20628],{},"dans les fonctions de rappel ;",[34,20630,20631],{},"dans de nombreuses bibliothèques.",[16,20633,20635],{"id":20634},"_4-fonctions-pures-effets-de-bord-et-composition","4. Fonctions pures, effets de bord et composition",[21,20637,20638],{},"Un bon code JavaScript repose souvent sur des fonctions simples, prévisibles et réutilisables.",[146,20640,20642],{"id":20641},"fonction-pure","Fonction pure",[21,20644,20645],{},"Une fonction pure retourne toujours le même résultat pour les mêmes entrées et ne modifie rien à l'extérieur.",[350,20647,20649],{"className":12948,"code":20648,"language":12950,"meta":356,"style":356},"function add(a, b) {\n return a + b;\n}\n",[358,20650,20651,20669,20681],{"__ignoreMap":356},[711,20652,20653,20655,20658,20660,20662,20664,20667],{"class":713,"line":714},[711,20654,13184],{"class":1370},[711,20656,20657],{"class":872}," add",[711,20659,1789],{"class":717},[711,20661,3706],{"class":3203},[711,20663,1077],{"class":717},[711,20665,20666],{"class":3203},"b",[711,20668,3402],{"class":717},[711,20670,20671,20673,20676,20678],{"class":713,"line":521},[711,20672,13385],{"class":1370},[711,20674,20675],{"class":717}," a ",[711,20677,10164],{"class":1370},[711,20679,20680],{"class":717}," b;\n",[711,20682,20683],{"class":713,"line":529},[711,20684,779],{"class":717},[146,20686,20688],{"id":20687},"effet-de-bord","Effet de bord",[21,20690,20691],{},"Un effet de bord survient quand une fonction modifie un état externe, un objet partagé, le DOM ou le réseau.",[350,20693,20695],{"className":12948,"code":20694,"language":12950,"meta":356,"style":356},"let total = 0;\nfunction addToTotal(value) {\n total += value;\n}\n",[358,20696,20697,20710,20724,20734],{"__ignoreMap":356},[711,20698,20699,20701,20704,20706,20708],{"class":713,"line":714},[711,20700,14326],{"class":1370},[711,20702,20703],{"class":717}," total ",[711,20705,887],{"class":1370},[711,20707,13212],{"class":764},[711,20709,774],{"class":717},[711,20711,20712,20714,20717,20719,20722],{"class":713,"line":521},[711,20713,13184],{"class":1370},[711,20715,20716],{"class":872}," addToTotal",[711,20718,1789],{"class":717},[711,20720,20721],{"class":3203},"value",[711,20723,3402],{"class":717},[711,20725,20726,20729,20731],{"class":713,"line":529},[711,20727,20728],{"class":717}," total ",[711,20730,10650],{"class":1370},[711,20732,20733],{"class":717}," value;\n",[711,20735,20736],{"class":713,"line":906},[711,20737,779],{"class":717},[21,20739,20740],{},"Les effets de bord sont parfois nécessaires, mais il faut les isoler autant que possible.",[146,20742,20744],{"id":20743},"composition","Composition",[21,20746,20747],{},"JavaScript devient très puissant quand on compose de petites fonctions plutôt que d'écrire une logique monolithique.",[350,20749,20751],{"className":12948,"code":20750,"language":12950,"meta":356,"style":356},"const normalize = (value) => value.trim().toLowerCase();\nconst isValid = (value) => value.length > 2;\nconst result = isValid(normalize(' JavaScript '));\n",[358,20752,20753,20784,20812],{"__ignoreMap":356},[711,20754,20755,20757,20760,20762,20764,20766,20769,20771,20774,20777,20779,20782],{"class":713,"line":714},[711,20756,12957],{"class":1370},[711,20758,20759],{"class":872}," normalize",[711,20761,12963],{"class":1370},[711,20763,3389],{"class":717},[711,20765,20721],{"class":3203},[711,20767,20768],{"class":717},") ",[711,20770,20097],{"class":1370},[711,20772,20773],{"class":717}," value.",[711,20775,20776],{"class":872},"trim",[711,20778,20126],{"class":717},[711,20780,20781],{"class":872},"toLowerCase",[711,20783,20236],{"class":717},[711,20785,20786,20788,20791,20793,20795,20797,20799,20801,20803,20805,20808,20810],{"class":713,"line":521},[711,20787,12957],{"class":1370},[711,20789,20790],{"class":872}," isValid",[711,20792,12963],{"class":1370},[711,20794,3389],{"class":717},[711,20796,20721],{"class":3203},[711,20798,20768],{"class":717},[711,20800,20097],{"class":1370},[711,20802,20773],{"class":717},[711,20804,13229],{"class":764},[711,20806,20807],{"class":1370}," >",[711,20809,8670],{"class":764},[711,20811,774],{"class":717},[711,20813,20814,20816,20818,20820,20822,20824,20827,20829,20832],{"class":713,"line":529},[711,20815,12957],{"class":1370},[711,20817,15195],{"class":764},[711,20819,12963],{"class":1370},[711,20821,20790],{"class":872},[711,20823,1789],{"class":717},[711,20825,20826],{"class":872},"normalize",[711,20828,1789],{"class":717},[711,20830,20831],{"class":890},"' JavaScript '",[711,20833,4320],{"class":717},[21,20835,20836],{},"Cette approche améliore la testabilité et réduit la complexité.",[16,20838,20840],{"id":20839},"_5-this-prototypes-et-classes","5. this, prototypes et classes",[146,20842,20843],{"id":20016},[358,20844,20016],{},[21,20846,20847,20849],{},[358,20848,20016],{}," dépend du contexte d'appel. C'est une source classique de confusion.",[350,20851,20853],{"className":12948,"code":20852,"language":12950,"meta":356,"style":356},"const user = {\n name: 'Corneille',\n greet() {\n return `Bonjour ${this.name}`;\n },\n};\nconsole.log(user.greet());\n",[358,20854,20855,20865,20874,20881,20900,20905,20910],{"__ignoreMap":356},[711,20856,20857,20859,20861,20863],{"class":713,"line":714},[711,20858,12957],{"class":1370},[711,20860,20261],{"class":764},[711,20862,12963],{"class":1370},[711,20864,759],{"class":717},[711,20866,20867,20870,20872],{"class":713,"line":521},[711,20868,20869],{"class":717}," name: ",[711,20871,20269],{"class":890},[711,20873,10304],{"class":717},[711,20875,20876,20879],{"class":713,"line":529},[711,20877,20878],{"class":872}," greet",[711,20880,20363],{"class":717},[711,20882,20883,20885,20888,20890,20892,20895,20898],{"class":713,"line":906},[711,20884,8645],{"class":1370},[711,20886,20887],{"class":890}," `Bonjour ${",[711,20889,20016],{"class":764},[711,20891,831],{"class":890},[711,20893,20894],{"class":717},"name",[711,20896,20897],{"class":890},"}`",[711,20899,774],{"class":717},[711,20901,20902],{"class":713,"line":925},[711,20903,20904],{"class":717}," },\n",[711,20906,20907],{"class":713,"line":950},[711,20908,20909],{"class":717},"};\n",[711,20911,20912,20914,20916,20919,20922],{"class":713,"line":965},[711,20913,13485],{"class":717},[711,20915,13488],{"class":872},[711,20917,20918],{"class":717},"(user.",[711,20920,20921],{"class":872},"greet",[711,20923,20924],{"class":717},"());\n",[21,20926,1387,20927,20929,20930,20932],{},[358,20928,20016],{}," pointe vers ",[358,20931,20314],{}," parce que la méthode est appelée depuis l'objet.\nMais ce comportement change selon la façon dont la fonction est appelée.",[146,20934,20936],{"id":20935},"prototype-et-héritage","Prototype et héritage",[21,20938,20939],{},"JavaScript utilise un modèle basé sur les prototypes.\nLes classes modernes ne suppriment pas ce mécanisme, elles offrent simplement une syntaxe plus lisible par-dessus.",[350,20941,20943],{"className":12948,"code":20942,"language":12950,"meta":356,"style":356},"class User {\n constructor(name) {\n this.name = name;\n }\n greet() {\n return `Bonjour ${this.name}`;\n }\n}\n",[358,20944,20945,20955,20966,20979,20983,20989,21005,21009],{"__ignoreMap":356},[711,20946,20947,20950,20953],{"class":713,"line":714},[711,20948,20949],{"class":1370},"class",[711,20951,20952],{"class":872}," User",[711,20954,759],{"class":717},[711,20956,20957,20960,20962,20964],{"class":713,"line":521},[711,20958,20959],{"class":1370}," constructor",[711,20961,1789],{"class":717},[711,20963,20894],{"class":3203},[711,20965,3402],{"class":717},[711,20967,20968,20971,20974,20976],{"class":713,"line":529},[711,20969,20970],{"class":764}," this",[711,20972,20973],{"class":717},".name ",[711,20975,887],{"class":1370},[711,20977,20978],{"class":717}," name;\n",[711,20980,20981],{"class":713,"line":906},[711,20982,3248],{"class":717},[711,20984,20985,20987],{"class":713,"line":925},[711,20986,20878],{"class":872},[711,20988,20363],{"class":717},[711,20990,20991,20993,20995,20997,20999,21001,21003],{"class":713,"line":950},[711,20992,8645],{"class":1370},[711,20994,20887],{"class":890},[711,20996,20016],{"class":764},[711,20998,831],{"class":890},[711,21000,20894],{"class":717},[711,21002,20897],{"class":890},[711,21004,774],{"class":717},[711,21006,21007],{"class":713,"line":965},[711,21008,3248],{"class":717},[711,21010,21011],{"class":713,"line":991},[711,21012,779],{"class":717},[21,21014,21015],{},"Il est utile de savoir que derrière une classe se cache toujours une chaîne de prototypes.",[146,21017,21019],{"id":21018},"pourquoi-ne-pas-surcharger-le-modèle-objet","Pourquoi ne pas surcharger le modèle objet",[21,21021,21022],{},"En JavaScript, il est souvent plus simple d'utiliser :",[31,21024,21025,21028,21031,21034],{},[34,21026,21027],{},"des objets simples ;",[34,21029,21030],{},"des factories ;",[34,21032,21033],{},"des fonctions utilitaires ;",[34,21035,21036],{},"des classes seulement quand le modèle métier le justifie.\nLe but n'est pas de reproduire un style de programmation par classe par réflexe, mais de choisir la forme la plus claire pour le besoin réel.",[16,21038,21040],{"id":21039},"_6-tableaux-itération-et-transformation-des-données","6. Tableaux, itération et transformation des données",[21,21042,21043],{},"Une grande partie du JavaScript moderne consiste à transformer des tableaux.",[350,21045,21047],{"className":12948,"code":21046,"language":12950,"meta":356,"style":356},"const users = [\n { name: 'Alice', active: true },\n { name: 'Bob', active: false },\n { name: 'Chloé', active: true },\n];\nconst activeUsers = users.filter((user) => user.active);\nconst names = activeUsers.map((user) => user.name);\n",[358,21048,21049,21060,21076,21089,21102,21106,21133],{"__ignoreMap":356},[711,21050,21051,21053,21056,21058],{"class":713,"line":714},[711,21052,12957],{"class":1370},[711,21054,21055],{"class":764}," users",[711,21057,12963],{"class":1370},[711,21059,8827],{"class":717},[711,21061,21062,21065,21068,21071,21073],{"class":713,"line":521},[711,21063,21064],{"class":717}," { name: ",[711,21066,21067],{"class":890},"'Alice'",[711,21069,21070],{"class":717},", active: ",[711,21072,13780],{"class":764},[711,21074,21075],{"class":717}," },\n",[711,21077,21078,21080,21083,21085,21087],{"class":713,"line":529},[711,21079,21064],{"class":717},[711,21081,21082],{"class":890},"'Bob'",[711,21084,21070],{"class":717},[711,21086,13783],{"class":764},[711,21088,21075],{"class":717},[711,21090,21091,21093,21096,21098,21100],{"class":713,"line":906},[711,21092,21064],{"class":717},[711,21094,21095],{"class":890},"'Chloé'",[711,21097,21070],{"class":717},[711,21099,13780],{"class":764},[711,21101,21075],{"class":717},[711,21103,21104],{"class":713,"line":925},[711,21105,13004],{"class":717},[711,21107,21108,21110,21113,21115,21118,21121,21124,21126,21128,21130],{"class":713,"line":950},[711,21109,12957],{"class":1370},[711,21111,21112],{"class":764}," activeUsers",[711,21114,12963],{"class":1370},[711,21116,21117],{"class":717}," users.",[711,21119,21120],{"class":872},"filter",[711,21122,21123],{"class":717},"((",[711,21125,20314],{"class":3203},[711,21127,20768],{"class":717},[711,21129,20097],{"class":1370},[711,21131,21132],{"class":717}," user.active);\n",[711,21134,21135,21137,21140,21142,21145,21148,21150,21152,21154,21156],{"class":713,"line":965},[711,21136,12957],{"class":1370},[711,21138,21139],{"class":764}," names",[711,21141,12963],{"class":1370},[711,21143,21144],{"class":717}," activeUsers.",[711,21146,21147],{"class":872},"map",[711,21149,21123],{"class":717},[711,21151,20314],{"class":3203},[711,21153,20768],{"class":717},[711,21155,20097],{"class":1370},[711,21157,21158],{"class":717}," user.name);\n",[21,21160,21161],{},"Les méthodes les plus utiles sont souvent :",[31,21163,21164,21169,21174,21180,21189,21195],{},[34,21165,21166,21168],{},[358,21167,21147],{}," pour transformer ;",[34,21170,21171,21173],{},[358,21172,21120],{}," pour sélectionner ;",[34,21175,21176,21179],{},[358,21177,21178],{},"reduce"," pour agréger ;",[34,21181,21182,1913,21185,21188],{},[358,21183,21184],{},"some",[358,21186,21187],{},"every"," pour tester ;",[34,21190,21191,21194],{},[358,21192,21193],{},"find"," pour récupérer un élément ;",[34,21196,21197,21200],{},[358,21198,21199],{},"sort"," pour ordonner.",[146,21202,21204],{"id":21203},"exemple-avec-reduce","Exemple avec reduce",[350,21206,21208],{"className":12948,"code":21207,"language":12950,"meta":356,"style":356},"const prices = [12, 18, 9];\nconst total = prices.reduce((sum, price) => sum + price, 0);\n",[358,21209,21210,21233],{"__ignoreMap":356},[711,21211,21212,21214,21217,21219,21221,21223,21225,21227,21229,21231],{"class":713,"line":714},[711,21213,12957],{"class":1370},[711,21215,21216],{"class":764}," prices",[711,21218,12963],{"class":1370},[711,21220,12966],{"class":717},[711,21222,2570],{"class":764},[711,21224,1077],{"class":717},[711,21226,12991],{"class":764},[711,21228,1077],{"class":717},[711,21230,13519],{"class":764},[711,21232,13004],{"class":717},[711,21234,21235,21237,21240,21242,21245,21247,21249,21252,21254,21257,21259,21261,21264,21266,21269,21271],{"class":713,"line":521},[711,21236,12957],{"class":1370},[711,21238,21239],{"class":764}," total",[711,21241,12963],{"class":1370},[711,21243,21244],{"class":717}," prices.",[711,21246,21178],{"class":872},[711,21248,21123],{"class":717},[711,21250,21251],{"class":3203},"sum",[711,21253,1077],{"class":717},[711,21255,21256],{"class":3203},"price",[711,21258,20768],{"class":717},[711,21260,20097],{"class":1370},[711,21262,21263],{"class":717}," sum ",[711,21265,10164],{"class":1370},[711,21267,21268],{"class":717}," price, ",[711,21270,1797],{"class":764},[711,21272,1804],{"class":717},[21,21274,21275],{},"Savoir manipuler les tableaux proprement est indispensable dans les applications modernes, en particulier lorsqu'on traite des données d'API.",[16,21277,21279],{"id":21278},"_7-asynchrone-promesses-et-asyncawait","7. Asynchrone, promesses et async\u002Fawait",[21,21281,21282],{},"Le JavaScript moderne repose énormément sur l'asynchrone.",[146,21284,21286],{"id":21285},"pourquoi-lasynchrone-existe","Pourquoi l'asynchrone existe",[21,21288,21289],{},"Le navigateur ne doit pas bloquer l'interface pendant une opération longue :",[31,21291,21292,21295,21298,21301,21304],{},[34,21293,21294],{},"requête HTTP ;",[34,21296,21297],{},"lecture de fichier ;",[34,21299,21300],{},"timer ;",[34,21302,21303],{},"traitement différé ;",[34,21305,21306],{},"interaction utilisateur.",[146,21308,21310],{"id":21309},"les-promesses","Les promesses",[21,21312,21313],{},"Une promesse représente une valeur qui sera disponible plus tard.",[350,21315,21317],{"className":12948,"code":21316,"language":12950,"meta":356,"style":356},"fetch('\u002Fapi\u002Fusers')\n .then((response) => response.json())\n .then((data) => console.log(data))\n .catch((error) => console.error(error));\n",[358,21318,21319,21331,21356,21378],{"__ignoreMap":356},[711,21320,21321,21324,21326,21329],{"class":713,"line":714},[711,21322,21323],{"class":872},"fetch",[711,21325,1789],{"class":717},[711,21327,21328],{"class":890},"'\u002Fapi\u002Fusers'",[711,21330,8695],{"class":717},[711,21332,21333,21336,21338,21340,21343,21345,21347,21350,21353],{"class":713,"line":521},[711,21334,21335],{"class":717}," .",[711,21337,20129],{"class":872},[711,21339,21123],{"class":717},[711,21341,21342],{"class":3203},"response",[711,21344,20768],{"class":717},[711,21346,20097],{"class":1370},[711,21348,21349],{"class":717}," response.",[711,21351,21352],{"class":872},"json",[711,21354,21355],{"class":717},"())\n",[711,21357,21358,21360,21362,21364,21367,21369,21371,21373,21375],{"class":713,"line":529},[711,21359,21335],{"class":717},[711,21361,20129],{"class":872},[711,21363,21123],{"class":717},[711,21365,21366],{"class":3203},"data",[711,21368,20768],{"class":717},[711,21370,20097],{"class":1370},[711,21372,20100],{"class":717},[711,21374,13488],{"class":872},[711,21376,21377],{"class":717},"(data))\n",[711,21379,21380,21382,21385,21387,21390,21392,21394,21396,21398],{"class":713,"line":906},[711,21381,21335],{"class":717},[711,21383,21384],{"class":872},"catch",[711,21386,21123],{"class":717},[711,21388,21389],{"class":3203},"error",[711,21391,20768],{"class":717},[711,21393,20097],{"class":1370},[711,21395,20100],{"class":717},[711,21397,21389],{"class":872},[711,21399,21400],{"class":717},"(error));\n",[146,21402,21404],{"id":21403},"asyncawait","async\u002Fawait",[21,21406,21407,21409],{},[358,21408,21404],{}," rend le code asynchrone plus lisible.",[350,21411,21413],{"className":12948,"code":21412,"language":12950,"meta":356,"style":356},"async function loadUsers() {\n try {\n const response = await fetch('\u002Fapi\u002Fusers');\n const data = await response.json();\n return data;\n } catch (error) {\n console.error(error);\n return [];\n }\n}\n",[358,21414,21415,21427,21434,21455,21472,21479,21489,21499,21505,21509],{"__ignoreMap":356},[711,21416,21417,21420,21422,21425],{"class":713,"line":714},[711,21418,21419],{"class":1370},"async",[711,21421,20539],{"class":1370},[711,21423,21424],{"class":872}," loadUsers",[711,21426,20363],{"class":717},[711,21428,21429,21432],{"class":713,"line":521},[711,21430,21431],{"class":1370}," try",[711,21433,759],{"class":717},[711,21435,21436,21438,21441,21443,21446,21449,21451,21453],{"class":713,"line":529},[711,21437,13259],{"class":1370},[711,21439,21440],{"class":764}," response",[711,21442,12963],{"class":1370},[711,21444,21445],{"class":1370}," await",[711,21447,21448],{"class":872}," fetch",[711,21450,1789],{"class":717},[711,21452,21328],{"class":890},[711,21454,1804],{"class":717},[711,21456,21457,21459,21462,21464,21466,21468,21470],{"class":713,"line":906},[711,21458,13259],{"class":1370},[711,21460,21461],{"class":764}," data",[711,21463,12963],{"class":1370},[711,21465,21445],{"class":1370},[711,21467,21349],{"class":717},[711,21469,21352],{"class":872},[711,21471,20236],{"class":717},[711,21473,21474,21476],{"class":713,"line":925},[711,21475,8645],{"class":1370},[711,21477,21478],{"class":717}," data;\n",[711,21480,21481,21484,21486],{"class":713,"line":950},[711,21482,21483],{"class":717}," } ",[711,21485,21384],{"class":1370},[711,21487,21488],{"class":717}," (error) {\n",[711,21490,21491,21494,21496],{"class":713,"line":965},[711,21492,21493],{"class":717}," console.",[711,21495,21389],{"class":872},[711,21497,21498],{"class":717},"(error);\n",[711,21500,21501,21503],{"class":713,"line":991},[711,21502,8645],{"class":1370},[711,21504,16361],{"class":717},[711,21506,21507],{"class":713,"line":1001},[711,21508,3248],{"class":717},[711,21510,21511],{"class":713,"line":1011},[711,21512,779],{"class":717},[146,21514,21516],{"id":21515},"le-point-clé","Le point clé",[21,21518,21519,21522],{},[358,21520,21521],{},"await"," ne bloque pas tout JavaScript. Il suspend simplement l'exécution de la fonction courante jusqu'à la résolution de la promesse.\nC'est un détail technique important, car il explique pourquoi une interface reste réactive même quand on attend une réponse réseau.",[16,21524,21526],{"id":21525},"_8-modules-et-organisation-du-code","8. Modules et organisation du code",[21,21528,21529],{},"Un projet JavaScript sérieux ne devrait pas être un seul fichier énorme.\nLes modules permettent de découper le code en morceaux cohérents.",[350,21531,21533],{"className":12948,"code":21532,"language":12950,"meta":356,"style":356},"\u002F\u002F math.js\nexport function sum(a, b) {\n return a + b;\n}\n\u002F\u002F app.js\nimport { sum } from '.\u002Fmath.js';\nconsole.log(sum(2, 3));\n",[358,21534,21535,21540,21560,21570,21574,21579,21593],{"__ignoreMap":356},[711,21536,21537],{"class":713,"line":714},[711,21538,21539],{"class":10405},"\u002F\u002F math.js\n",[711,21541,21542,21545,21547,21550,21552,21554,21556,21558],{"class":713,"line":521},[711,21543,21544],{"class":1370},"export",[711,21546,20539],{"class":1370},[711,21548,21549],{"class":872}," sum",[711,21551,1789],{"class":717},[711,21553,3706],{"class":3203},[711,21555,1077],{"class":717},[711,21557,20666],{"class":3203},[711,21559,3402],{"class":717},[711,21561,21562,21564,21566,21568],{"class":713,"line":529},[711,21563,13385],{"class":1370},[711,21565,20675],{"class":717},[711,21567,10164],{"class":1370},[711,21569,20680],{"class":717},[711,21571,21572],{"class":713,"line":906},[711,21573,779],{"class":717},[711,21575,21576],{"class":713,"line":925},[711,21577,21578],{"class":10405},"\u002F\u002F app.js\n",[711,21580,21581,21583,21586,21588,21591],{"class":713,"line":950},[711,21582,8622],{"class":1370},[711,21584,21585],{"class":717}," { sum } ",[711,21587,8980],{"class":1370},[711,21589,21590],{"class":890}," '.\u002Fmath.js'",[711,21592,774],{"class":717},[711,21594,21595,21597,21599,21601,21603,21605,21607,21609,21611],{"class":713,"line":965},[711,21596,13485],{"class":717},[711,21598,13488],{"class":872},[711,21600,1789],{"class":717},[711,21602,21251],{"class":872},[711,21604,1789],{"class":717},[711,21606,1571],{"class":764},[711,21608,1077],{"class":717},[711,21610,2831],{"class":764},[711,21612,4320],{"class":717},[146,21614,21616],{"id":21615},"bonnes-pratiques-utiles","Bonnes pratiques utiles",[31,21618,21619,21622,21625,21628,21631],{},[34,21620,21621],{},"une fonction = une responsabilité claire ;",[34,21623,21624],{},"un fichier = une intention lisible ;",[34,21626,21627],{},"des exports explicites ;",[34,21629,21630],{},"des noms de variables descriptifs ;",[34,21632,21633],{},"peu de logique cachée.\nCette discipline améliore énormément la maintenabilité.",[16,21635,21637],{"id":21636},"_9-gestion-des-erreurs","9. Gestion des erreurs",[21,21639,21640],{},"En JavaScript, une erreur ignorée finit souvent par devenir un bug difficile à comprendre.",[146,21642,21644],{"id":21643},"utiliser-trycatch-quand-cest-pertinent","Utiliser try\u002Fcatch quand c'est pertinent",[350,21646,21648],{"className":12948,"code":21647,"language":12950,"meta":356,"style":356},"try {\n const data = JSON.parse('{ invalid json }');\n console.log(data);\n} catch (error) {\n console.error('Impossible de parser le JSON', error);\n}\n",[358,21649,21650,21657,21680,21689,21698,21712],{"__ignoreMap":356},[711,21651,21652,21655],{"class":713,"line":714},[711,21653,21654],{"class":1370},"try",[711,21656,759],{"class":717},[711,21658,21659,21661,21663,21665,21668,21670,21673,21675,21678],{"class":713,"line":521},[711,21660,15192],{"class":1370},[711,21662,21461],{"class":764},[711,21664,12963],{"class":1370},[711,21666,21667],{"class":764}," JSON",[711,21669,831],{"class":717},[711,21671,21672],{"class":872},"parse",[711,21674,1789],{"class":717},[711,21676,21677],{"class":890},"'{ invalid json }'",[711,21679,1804],{"class":717},[711,21681,21682,21684,21686],{"class":713,"line":529},[711,21683,20382],{"class":717},[711,21685,13488],{"class":872},[711,21687,21688],{"class":717},"(data);\n",[711,21690,21691,21694,21696],{"class":713,"line":906},[711,21692,21693],{"class":717},"} ",[711,21695,21384],{"class":1370},[711,21697,21488],{"class":717},[711,21699,21700,21702,21704,21706,21709],{"class":713,"line":925},[711,21701,20382],{"class":717},[711,21703,21389],{"class":872},[711,21705,1789],{"class":717},[711,21707,21708],{"class":890},"'Impossible de parser le JSON'",[711,21710,21711],{"class":717},", error);\n",[711,21713,21714],{"class":713,"line":950},[711,21715,779],{"class":717},[146,21717,21719],{"id":21718},"lidée-importante","L'idée importante",[21,21721,21722],{},"Ne vous contentez pas d'attraper l'erreur. Il faut aussi décider :",[31,21724,21725,21728,21731,21734],{},[34,21726,21727],{},"faut-il afficher un message lisible ?",[34,21729,21730],{},"faut-il relancer l'erreur ?",[34,21732,21733],{},"faut-il retourner une valeur de secours ?",[34,21735,21736],{},"faut-il journaliser l'incident ?\nDans un contexte professionnel, une gestion d'erreur propre fait partie du contrat de qualité du code.",[16,21738,21740],{"id":21739},"_10-ce-quun-développeur-intermédiaire-doit-surveiller","10. Ce qu'un développeur intermédiaire doit surveiller",[21,21742,21743],{},"Quand on écrit du JavaScript à un niveau plus avancé, les points les plus importants sont souvent les suivants :",[31,21745,21746,21749,21752,21755,21758,21761,21764],{},[34,21747,21748],{},"limiter les mutations non contrôlées ;",[34,21750,21751],{},"éviter les variables globales ;",[34,21753,21754],{},"préférer des fonctions courtes et ciblées ;",[34,21756,21757],{},"comprendre le cycle de vie des promesses ;",[34,21759,21760],{},"maîtriser le scope et les closures ;",[34,21762,21763],{},"savoir quand utiliser un objet simple ou une classe ;",[34,21765,21766],{},"séparer clairement logique métier et logique d'affichage.",[16,21768,21770],{"id":21769},"_11-les-erreurs-fréquentes-même-chez-les-développeurs-confirmés","11. Les erreurs fréquentes, même chez les développeurs confirmés",[21,21772,21773],{},"Même avec de l'expérience, certains pièges reviennent souvent :",[31,21775,21776,21779,21782,21787,21790],{},[34,21777,21778],{},"oublier qu'une fonction asynchrone retourne une promesse ;",[34,21780,21781],{},"confondre mutation et copie ;",[34,21783,21784,21785,1407],{},"mal interpréter ",[358,21786,20016],{},[34,21788,21789],{},"trop complexifier un objet alors qu'une simple structure suffit ;",[34,21791,21792],{},"écrire du code trop couplé au DOM ou à l'API.\nLe bon réflexe est de revenir aux bases : quelle est la responsabilité de cette fonction, quelle donnée elle reçoit, que renvoie-t-elle, et que modifie-t-elle réellement ?",[16,21794,12752],{"id":12751},[21,21796,21797],{},"Si vous deviez retenir l'essentiel, ce serait ceci :",[31,21799,21800,21803,21806,21809,21814],{},[34,21801,21802],{},"JavaScript s'exécute dans un modèle précis qui mélange synchronicité et asynchronisme ;",[34,21804,21805],{},"le scope, les closures et la mutation expliquent une grande partie des comportements surprenants ;",[34,21807,21808],{},"les tableaux, les fonctions pures et les modules structurent un code plus propre ;",[34,21810,21811,21813],{},[358,21812,21404],{}," et les promesses sont centraux dans les applications modernes ;",[34,21815,21816],{},"un bon code JavaScript reste simple, lisible et prévisible.",[16,21818,512],{"id":511},[21,21820,21821],{},"Une fois ces notions bien comprises, vous êtes prêt à écrire du JavaScript plus robuste dans un vrai projet frontend ou backend, avec moins de surprises et de meilleures décisions techniques.",[640,21823,21824],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":356,"searchDepth":521,"depth":521,"links":21826},[21827,21828,21829,21832,21837,21842,21847,21852,21855,21861,21864,21868,21869,21870,21871],{"id":19989,"depth":521,"text":19990},{"id":19996,"depth":521,"text":19997},{"id":20023,"depth":521,"text":20024,"children":21830},[21831],{"id":20044,"depth":529,"text":20045},{"id":20172,"depth":521,"text":20173,"children":21833},[21834,21835,21836],{"id":20179,"depth":529,"text":20180},{"id":20245,"depth":529,"text":20246},{"id":7296,"depth":529,"text":7297},{"id":20340,"depth":521,"text":20341,"children":21838},[21839,21840,21841],{"id":20344,"depth":529,"text":20345},{"id":20448,"depth":529,"text":20449},{"id":20501,"depth":529,"text":20502},{"id":20634,"depth":521,"text":20635,"children":21843},[21844,21845,21846],{"id":20641,"depth":529,"text":20642},{"id":20687,"depth":529,"text":20688},{"id":20743,"depth":529,"text":20744},{"id":20839,"depth":521,"text":20840,"children":21848},[21849,21850,21851],{"id":20016,"depth":529,"text":20016},{"id":20935,"depth":529,"text":20936},{"id":21018,"depth":529,"text":21019},{"id":21039,"depth":521,"text":21040,"children":21853},[21854],{"id":21203,"depth":529,"text":21204},{"id":21278,"depth":521,"text":21279,"children":21856},[21857,21858,21859,21860],{"id":21285,"depth":529,"text":21286},{"id":21309,"depth":529,"text":21310},{"id":21403,"depth":529,"text":21404},{"id":21515,"depth":529,"text":21516},{"id":21525,"depth":521,"text":21526,"children":21862},[21863],{"id":21615,"depth":529,"text":21616},{"id":21636,"depth":521,"text":21637,"children":21865},[21866,21867],{"id":21643,"depth":529,"text":21644},{"id":21718,"depth":529,"text":21719},{"id":21739,"depth":521,"text":21740},{"id":21769,"depth":521,"text":21770},{"id":12751,"depth":521,"text":12752},{"id":511,"depth":521,"text":512},"Un chapitre orienté développeurs pour mieux comprendre le modèle d'exécution de JavaScript, le scope, les closures, l'asynchrone, les modules et les pratiques utiles en production.",{},"\u002Fblog\u002Fjavascript-moderne-pour-developpeurs",{"title":19980,"description":21872},"blog\u002Fjavascript-moderne-pour-developpeurs",[562,21878,5086],"Intermédiaire","MDciU8fsFRQouUIaq6lVN3fG1zVB3fWf4tDGdxsmzi8",{"id":21881,"title":21882,"body":21883,"coverImage":550,"description":23295,"extension":552,"meta":23296,"navigation":554,"path":23297,"published":554,"publishedAt":23298,"readTime":1046,"seo":23299,"stem":23300,"tags":23301,"__hash__":23306},"blog\u002Fblog\u002Fconstruire-une-api-restful-avec-laravel.md","Construire une API RESTful claire et robuste avec Laravel",{"type":8,"value":21884,"toc":23282},[21885,21887,21890,21893,21897,21900,21929,21936,21940,21947,21973,21976,22022,22025,22039,22043,22058,22065,22132,22135,22255,22258,22262,22265,22562,22565,22589,22592,22596,22599,22602,22632,22635,22688,22691,22699,22709,22713,22720,22905,22908,22919,22925,22929,22932,22934,22965,22968,23103,23106,23110,23113,23116,23133,23136,23139,23154,23157,23161,23164,23167,23192,23194,23269,23273,23276,23279],[16,21886,19],{"id":18},[21,21888,21889],{},"Une bonne API ne se résume pas à quelques routes qui renvoient du JSON. Elle doit être compréhensible, cohérente, sécurisée et facile à maintenir dans le temps. Laravel est particulièrement adapté à cet objectif parce qu'il fournit des outils très solides pour gérer les routes, la validation, l'authentification, la pagination et les erreurs.",[21,21891,21892],{},"Dans cet article, nous allons construire une base propre pour une API RESTful de blog. L'idée n'est pas seulement de faire fonctionner le code, mais de comprendre pourquoi chaque brique existe et comment elle s'assemble avec les autres.",[16,21894,21896],{"id":21895},"ce-quune-api-restful-doit-faire","Ce qu'une API RESTful doit faire",[21,21898,21899],{},"Une API RESTful manipule des ressources. Dans un blog, les ressources peuvent être des articles, des utilisateurs ou des commentaires. Chaque ressource est exposée avec des verbes HTTP simples :",[31,21901,21902,21908,21914,21923],{},[34,21903,21904,21907],{},[358,21905,21906],{},"GET"," pour lire",[34,21909,21910,21913],{},[358,21911,21912],{},"POST"," pour créer",[34,21915,21916,1441,21919,21922],{},[358,21917,21918],{},"PUT",[358,21920,21921],{},"PATCH"," pour modifier",[34,21924,21925,21928],{},[358,21926,21927],{},"DELETE"," pour supprimer",[21,21930,21931,21932,21935],{},"Le but est d'avoir une interface prévisible. Quand un développeur voit ",[358,21933,21934],{},"\u002Fapi\u002Fposts",", il doit immédiatement comprendre qu'il travaille avec la collection des articles.",[16,21937,21939],{"id":21938},"mise-en-place-du-projet","Mise en place du projet",[21,21941,21942,21943,21946],{},"Commencez par créer un nouveau projet Laravel puis configurez la base de données dans le fichier ",[358,21944,21945],{},".env",". À ce stade, l'objectif est simplement d'avoir une application prête à recevoir une API.",[350,21948,21950],{"className":10073,"code":21949,"language":10075,"meta":356,"style":356},"composer create-project laravel\u002Flaravel mon-api\ncd mon-api\n",[358,21951,21952,21966],{"__ignoreMap":356},[711,21953,21954,21957,21960,21963],{"class":713,"line":714},[711,21955,21956],{"class":872},"composer",[711,21958,21959],{"class":890}," create-project",[711,21961,21962],{"class":890}," laravel\u002Flaravel",[711,21964,21965],{"class":890}," mon-api\n",[711,21967,21968,21971],{"class":713,"line":521},[711,21969,21970],{"class":764},"cd",[711,21972,21965],{"class":890},[21,21974,21975],{},"Ensuite, créez le modèle, la migration et le contrôleur de ressource. Cela vous donne une structure de départ propre :",[350,21977,21979],{"className":10073,"code":21978,"language":10075,"meta":356,"style":356},"php artisan make:model Post -mcr\nphp artisan make:request StorePostRequest\nphp artisan make:resource PostResource\n",[358,21980,21981,21998,22010],{"__ignoreMap":356},[711,21982,21983,21986,21989,21992,21995],{"class":713,"line":714},[711,21984,21985],{"class":872},"php",[711,21987,21988],{"class":890}," artisan",[711,21990,21991],{"class":890}," make:model",[711,21993,21994],{"class":890}," Post",[711,21996,21997],{"class":764}," -mcr\n",[711,21999,22000,22002,22004,22007],{"class":713,"line":521},[711,22001,21985],{"class":872},[711,22003,21988],{"class":890},[711,22005,22006],{"class":890}," make:request",[711,22008,22009],{"class":890}," StorePostRequest\n",[711,22011,22012,22014,22016,22019],{"class":713,"line":529},[711,22013,21985],{"class":872},[711,22015,21988],{"class":890},[711,22017,22018],{"class":890}," make:resource",[711,22020,22021],{"class":890}," PostResource\n",[21,22023,22024],{},"Ce trio est très utile :",[31,22026,22027,22033,22036],{},[34,22028,22029,22030],{},"le modèle représente la table ",[358,22031,22032],{},"posts",[34,22034,22035],{},"la requête de validation centralise les règles",[34,22037,22038],{},"la ressource contrôle la forme de la réponse JSON",[16,22040,22042],{"id":22041},"structure-des-routes-api","Structure des routes API",[21,22044,22045,22046,22049,22050,22053,22054,22057],{},"Définissez vos routes dans ",[358,22047,22048],{},"routes\u002Fapi.php",". Laravel applique automatiquement le préfixe ",[358,22051,22052],{},"\u002Fapi"," et le middleware ",[358,22055,22056],{},"api"," à ces routes.",[21,22059,22060,22061,22064],{},"Pour une API RESTful, la bonne base est souvent ",[358,22062,22063],{},"apiResource",", car elle crée les routes standard à votre place et garde la convention claire.",[350,22066,22069],{"className":22067,"code":22068,"language":21985,"meta":356,"style":356},"language-php shiki shiki-themes github-light github-dark","use App\\Http\\Controllers\\PostController;\n\nRoute::apiResource('users', UserController::class);\nRoute::apiResource('posts', PostController::class);\n",[358,22070,22071,22081,22085,22110],{"__ignoreMap":356},[711,22072,22073,22076,22079],{"class":713,"line":714},[711,22074,22075],{"class":1370},"use",[711,22077,22078],{"class":764}," App\\Http\\Controllers\\PostController",[711,22080,774],{"class":717},[711,22082,22083],{"class":713,"line":521},[711,22084,1114],{"emptyLinePlaceholder":554},[711,22086,22087,22090,22093,22095,22097,22100,22102,22105,22108],{"class":713,"line":529},[711,22088,22089],{"class":764},"Route",[711,22091,22092],{"class":1370},"::",[711,22094,22063],{"class":872},[711,22096,1789],{"class":717},[711,22098,22099],{"class":890},"'users'",[711,22101,1077],{"class":717},[711,22103,22104],{"class":764},"UserController",[711,22106,22107],{"class":1370},"::class",[711,22109,1804],{"class":717},[711,22111,22112,22114,22116,22118,22120,22123,22125,22128,22130],{"class":713,"line":906},[711,22113,22089],{"class":764},[711,22115,22092],{"class":1370},[711,22117,22063],{"class":872},[711,22119,1789],{"class":717},[711,22121,22122],{"class":890},"'posts'",[711,22124,1077],{"class":717},[711,22126,22127],{"class":764},"PostController",[711,22129,22107],{"class":1370},[711,22131,1804],{"class":717},[21,22133,22134],{},"Si certaines actions doivent être protégées, isolez-les dans un groupe de middleware :",[350,22136,22138],{"className":22067,"code":22137,"language":21985,"meta":356,"style":356},"Route::middleware('auth:sanctum')->group(function () {\n Route::post('posts', [PostController::class, 'store']);\n Route::put('posts\u002F{post}', [PostController::class, 'update']);\n Route::delete('posts\u002F{post}', [PostController::class, 'destroy']);\n});\n",[358,22139,22140,22169,22197,22224,22250],{"__ignoreMap":356},[711,22141,22142,22144,22146,22149,22151,22154,22157,22160,22163,22165,22167],{"class":713,"line":714},[711,22143,22089],{"class":764},[711,22145,22092],{"class":1370},[711,22147,22148],{"class":872},"middleware",[711,22150,1789],{"class":717},[711,22152,22153],{"class":890},"'auth:sanctum'",[711,22155,22156],{"class":717},")",[711,22158,22159],{"class":1370},"->",[711,22161,22162],{"class":872},"group",[711,22164,1789],{"class":717},[711,22166,13184],{"class":1370},[711,22168,20542],{"class":717},[711,22170,22171,22174,22176,22179,22181,22183,22186,22188,22190,22192,22195],{"class":713,"line":521},[711,22172,22173],{"class":764}," Route",[711,22175,22092],{"class":1370},[711,22177,22178],{"class":872},"post",[711,22180,1789],{"class":717},[711,22182,22122],{"class":890},[711,22184,22185],{"class":717},", [",[711,22187,22127],{"class":764},[711,22189,22107],{"class":1370},[711,22191,1077],{"class":717},[711,22193,22194],{"class":890},"'store'",[711,22196,15507],{"class":717},[711,22198,22199,22201,22203,22206,22208,22211,22213,22215,22217,22219,22222],{"class":713,"line":529},[711,22200,22173],{"class":764},[711,22202,22092],{"class":1370},[711,22204,22205],{"class":872},"put",[711,22207,1789],{"class":717},[711,22209,22210],{"class":890},"'posts\u002F{post}'",[711,22212,22185],{"class":717},[711,22214,22127],{"class":764},[711,22216,22107],{"class":1370},[711,22218,1077],{"class":717},[711,22220,22221],{"class":890},"'update'",[711,22223,15507],{"class":717},[711,22225,22226,22228,22230,22233,22235,22237,22239,22241,22243,22245,22248],{"class":713,"line":906},[711,22227,22173],{"class":764},[711,22229,22092],{"class":1370},[711,22231,22232],{"class":872},"delete",[711,22234,1789],{"class":717},[711,22236,22210],{"class":890},[711,22238,22185],{"class":717},[711,22240,22127],{"class":764},[711,22242,22107],{"class":1370},[711,22244,1077],{"class":717},[711,22246,22247],{"class":890},"'destroy'",[711,22249,15507],{"class":717},[711,22251,22252],{"class":713,"line":925},[711,22253,22254],{"class":717},"});\n",[21,22256,22257],{},"Cette approche évite de mélanger les routes publiques et les routes privées.",[16,22259,22261],{"id":22260},"construire-un-contrôleur-simple-et-lisible","Construire un contrôleur simple et lisible",[21,22263,22264],{},"Un contrôleur d'API doit rester léger. Il orchestre les actions, mais il ne doit pas contenir toute la logique métier.",[350,22266,22268],{"className":22067,"code":22267,"language":21985,"meta":356,"style":356},"use App\\Http\\Requests\\StorePostRequest;\nuse App\\Http\\Resources\\PostResource;\nuse App\\Models\\Post;\nuse Illuminate\\Http\\JsonResponse;\n\nclass PostController extends Controller\n{\n public function index(): JsonResponse\n {\n $posts = Post::latest()->paginate(10);\n\n return response()->json(PostResource::collection($posts));\n }\n\n public function store(StorePostRequest $request): JsonResponse\n {\n $post = Post::create($request->validated());\n\n return (new PostResource($post))\n ->response()\n ->setStatusCode(201);\n }\n\n public function show(Post $post): PostResource\n {\n return new PostResource($post);\n }\n}\n",[358,22269,22270,22279,22288,22297,22306,22310,22323,22328,22347,22352,22379,22383,22409,22413,22417,22438,22442,22466,22470,22485,22495,22509,22513,22517,22538,22542,22554,22558],{"__ignoreMap":356},[711,22271,22272,22274,22277],{"class":713,"line":714},[711,22273,22075],{"class":1370},[711,22275,22276],{"class":764}," App\\Http\\Requests\\StorePostRequest",[711,22278,774],{"class":717},[711,22280,22281,22283,22286],{"class":713,"line":521},[711,22282,22075],{"class":1370},[711,22284,22285],{"class":764}," App\\Http\\Resources\\PostResource",[711,22287,774],{"class":717},[711,22289,22290,22292,22295],{"class":713,"line":529},[711,22291,22075],{"class":1370},[711,22293,22294],{"class":764}," App\\Models\\Post",[711,22296,774],{"class":717},[711,22298,22299,22301,22304],{"class":713,"line":906},[711,22300,22075],{"class":1370},[711,22302,22303],{"class":764}," Illuminate\\Http\\JsonResponse",[711,22305,774],{"class":717},[711,22307,22308],{"class":713,"line":925},[711,22309,1114],{"emptyLinePlaceholder":554},[711,22311,22312,22314,22317,22320],{"class":713,"line":950},[711,22313,20949],{"class":1370},[711,22315,22316],{"class":872}," PostController",[711,22318,22319],{"class":1370}," extends",[711,22321,22322],{"class":872}," Controller\n",[711,22324,22325],{"class":713,"line":965},[711,22326,22327],{"class":717},"{\n",[711,22329,22330,22333,22335,22338,22341,22344],{"class":713,"line":991},[711,22331,22332],{"class":1370}," public",[711,22334,20539],{"class":1370},[711,22336,22337],{"class":872}," index",[711,22339,22340],{"class":717},"()",[711,22342,22343],{"class":1370},":",[711,22345,22346],{"class":764}," JsonResponse\n",[711,22348,22349],{"class":713,"line":1001},[711,22350,22351],{"class":717}," {\n",[711,22353,22354,22357,22359,22361,22363,22366,22368,22370,22373,22375,22377],{"class":713,"line":1011},[711,22355,22356],{"class":717}," $posts ",[711,22358,887],{"class":1370},[711,22360,21994],{"class":764},[711,22362,22092],{"class":1370},[711,22364,22365],{"class":872},"latest",[711,22367,22340],{"class":717},[711,22369,22159],{"class":1370},[711,22371,22372],{"class":872},"paginate",[711,22374,1789],{"class":717},[711,22376,3239],{"class":764},[711,22378,1804],{"class":717},[711,22380,22381],{"class":713,"line":1024},[711,22382,1114],{"emptyLinePlaceholder":554},[711,22384,22385,22388,22390,22392,22394,22396,22398,22401,22403,22406],{"class":713,"line":556},[711,22386,22387],{"class":1370}," return",[711,22389,21440],{"class":872},[711,22391,22340],{"class":717},[711,22393,22159],{"class":1370},[711,22395,21352],{"class":872},[711,22397,1789],{"class":717},[711,22399,22400],{"class":764},"PostResource",[711,22402,22092],{"class":1370},[711,22404,22405],{"class":872},"collection",[711,22407,22408],{"class":717},"($posts));\n",[711,22410,22411],{"class":713,"line":1046},[711,22412,1223],{"class":717},[711,22414,22415],{"class":713,"line":3317},[711,22416,1114],{"emptyLinePlaceholder":554},[711,22418,22419,22421,22423,22426,22428,22431,22434,22436],{"class":713,"line":3574},[711,22420,22332],{"class":1370},[711,22422,20539],{"class":1370},[711,22424,22425],{"class":872}," store",[711,22427,1789],{"class":717},[711,22429,22430],{"class":764},"StorePostRequest",[711,22432,22433],{"class":717}," $request)",[711,22435,22343],{"class":1370},[711,22437,22346],{"class":764},[711,22439,22440],{"class":713,"line":3595},[711,22441,22351],{"class":717},[711,22443,22444,22447,22449,22451,22453,22456,22459,22461,22464],{"class":713,"line":3600},[711,22445,22446],{"class":717}," $post ",[711,22448,887],{"class":1370},[711,22450,21994],{"class":764},[711,22452,22092],{"class":1370},[711,22454,22455],{"class":872},"create",[711,22457,22458],{"class":717},"($request",[711,22460,22159],{"class":1370},[711,22462,22463],{"class":872},"validated",[711,22465,20924],{"class":717},[711,22467,22468],{"class":713,"line":3868},[711,22469,1114],{"emptyLinePlaceholder":554},[711,22471,22472,22474,22476,22479,22482],{"class":713,"line":3888},[711,22473,22387],{"class":1370},[711,22475,3389],{"class":717},[711,22477,22478],{"class":1370},"new",[711,22480,22481],{"class":764}," PostResource",[711,22483,22484],{"class":717},"($post))\n",[711,22486,22487,22490,22492],{"class":713,"line":3908},[711,22488,22489],{"class":1370}," ->",[711,22491,21342],{"class":872},[711,22493,22494],{"class":717},"()\n",[711,22496,22497,22499,22502,22504,22507],{"class":713,"line":3928},[711,22498,22489],{"class":1370},[711,22500,22501],{"class":872},"setStatusCode",[711,22503,1789],{"class":717},[711,22505,22506],{"class":764},"201",[711,22508,1804],{"class":717},[711,22510,22511],{"class":713,"line":3937},[711,22512,1223],{"class":717},[711,22514,22515],{"class":713,"line":3946},[711,22516,1114],{"emptyLinePlaceholder":554},[711,22518,22519,22521,22523,22526,22528,22531,22534,22536],{"class":713,"line":4162},[711,22520,22332],{"class":1370},[711,22522,20539],{"class":1370},[711,22524,22525],{"class":872}," show",[711,22527,1789],{"class":717},[711,22529,22530],{"class":764},"Post",[711,22532,22533],{"class":717}," $post)",[711,22535,22343],{"class":1370},[711,22537,22021],{"class":764},[711,22539,22540],{"class":713,"line":4167},[711,22541,22351],{"class":717},[711,22543,22544,22546,22549,22551],{"class":713,"line":4172},[711,22545,22387],{"class":1370},[711,22547,22548],{"class":1370}," new",[711,22550,22481],{"class":764},[711,22552,22553],{"class":717},"($post);\n",[711,22555,22556],{"class":713,"line":4180},[711,22557,1223],{"class":717},[711,22559,22560],{"class":713,"line":4195},[711,22561,779],{"class":717},[21,22563,22564],{},"Quelques points importants ici :",[31,22566,22567,22574,22583],{},[34,22568,22569,22570,22573],{},"la méthode ",[358,22571,22572],{},"index"," renvoie une liste paginée",[34,22575,22569,22576,22579,22580],{},[358,22577,22578],{},"store"," renvoie un statut ",[358,22581,22582],{},"201 Created",[34,22584,22585,22586],{},"le route model binding de Laravel charge automatiquement le bon article pour ",[358,22587,22588],{},"show",[21,22590,22591],{},"Cette simplicité rend le contrôleur facile à relire et à tester.",[16,22593,22595],{"id":22594},"authentification-avec-sanctum","Authentification avec Sanctum",[21,22597,22598],{},"Si votre API doit être utilisée par une application mobile, un front Vue ou une SPA, Laravel Sanctum est souvent le meilleur point de départ. Il permet de gérer l'authentification de manière légère, sans complexité inutile.",[21,22600,22601],{},"Installez Sanctum puis publiez sa configuration :",[350,22603,22605],{"className":10073,"code":22604,"language":10075,"meta":356,"style":356},"composer require laravel\u002Fsanctum\nphp artisan vendor:publish --provider=\"Laravel\\Sanctum\\SanctumServiceProvider\"\n",[358,22606,22607,22617],{"__ignoreMap":356},[711,22608,22609,22611,22614],{"class":713,"line":714},[711,22610,21956],{"class":872},[711,22612,22613],{"class":890}," require",[711,22615,22616],{"class":890}," laravel\u002Fsanctum\n",[711,22618,22619,22621,22623,22626,22629],{"class":713,"line":521},[711,22620,21985],{"class":872},[711,22622,21988],{"class":890},[711,22624,22625],{"class":890}," vendor:publish",[711,22627,22628],{"class":764}," --provider=",[711,22630,22631],{"class":890},"\"Laravel\\Sanctum\\SanctumServiceProvider\"\n",[21,22633,22634],{},"Ensuite, protégez les routes qui nécessitent un utilisateur connecté :",[350,22636,22638],{"className":22067,"code":22637,"language":21985,"meta":356,"style":356},"Route::middleware('auth:sanctum')->group(function () {\n Route::apiResource('posts', PostController::class);\n});\n",[358,22639,22640,22664,22684],{"__ignoreMap":356},[711,22641,22642,22644,22646,22648,22650,22652,22654,22656,22658,22660,22662],{"class":713,"line":714},[711,22643,22089],{"class":764},[711,22645,22092],{"class":1370},[711,22647,22148],{"class":872},[711,22649,1789],{"class":717},[711,22651,22153],{"class":890},[711,22653,22156],{"class":717},[711,22655,22159],{"class":1370},[711,22657,22162],{"class":872},[711,22659,1789],{"class":717},[711,22661,13184],{"class":1370},[711,22663,20542],{"class":717},[711,22665,22666,22668,22670,22672,22674,22676,22678,22680,22682],{"class":713,"line":521},[711,22667,22173],{"class":764},[711,22669,22092],{"class":1370},[711,22671,22063],{"class":872},[711,22673,1789],{"class":717},[711,22675,22122],{"class":890},[711,22677,1077],{"class":717},[711,22679,22127],{"class":764},[711,22681,22107],{"class":1370},[711,22683,1804],{"class":717},[711,22685,22686],{"class":713,"line":529},[711,22687,22254],{"class":717},[21,22689,22690],{},"Le principe est simple :",[31,22692,22693,22696],{},[34,22694,22695],{},"les routes publiques servent à lire les contenus visibles par tous",[34,22697,22698],{},"les routes protégées servent à créer, modifier ou supprimer des données",[21,22700,22701,22702,1441,22705,22708],{},"Pensez aussi à retourner des codes HTTP cohérents. Une authentification refusée doit produire une réponse claire, par exemple ",[358,22703,22704],{},"401 Unauthorized",[358,22706,22707],{},"403 Forbidden"," selon le cas.",[16,22710,22712],{"id":22711},"validation-et-form-requests","Validation et Form Requests",[21,22714,22715,22716,22719],{},"Une erreur fréquente consiste à mettre les règles de validation directement dans le contrôleur. Cela fonctionne, mais le code devient vite difficile à lire. Les ",[358,22717,22718],{},"FormRequest"," permettent de centraliser cette logique et de garder le contrôleur propre.",[350,22721,22723],{"className":22067,"code":22722,"language":21985,"meta":356,"style":356},"namespace App\\Http\\Requests;\n\nuse Illuminate\\Foundation\\Http\\FormRequest;\n\nclass StorePostRequest extends FormRequest\n{\n public function authorize(): bool\n {\n return true;\n }\n\n public function rules(): array\n {\n return [\n 'title' => ['required', 'string', 'max:255'],\n 'content' => ['required', 'string'],\n 'tags' => ['sometimes', 'array'],\n ];\n }\n}\n",[358,22724,22725,22735,22739,22748,22752,22764,22768,22784,22788,22796,22800,22804,22820,22824,22830,22856,22873,22892,22897,22901],{"__ignoreMap":356},[711,22726,22727,22730,22733],{"class":713,"line":714},[711,22728,22729],{"class":1370},"namespace",[711,22731,22732],{"class":872}," App\\Http\\Requests",[711,22734,774],{"class":717},[711,22736,22737],{"class":713,"line":521},[711,22738,1114],{"emptyLinePlaceholder":554},[711,22740,22741,22743,22746],{"class":713,"line":529},[711,22742,22075],{"class":1370},[711,22744,22745],{"class":764}," Illuminate\\Foundation\\Http\\FormRequest",[711,22747,774],{"class":717},[711,22749,22750],{"class":713,"line":906},[711,22751,1114],{"emptyLinePlaceholder":554},[711,22753,22754,22756,22759,22761],{"class":713,"line":925},[711,22755,20949],{"class":1370},[711,22757,22758],{"class":872}," StorePostRequest",[711,22760,22319],{"class":1370},[711,22762,22763],{"class":872}," FormRequest\n",[711,22765,22766],{"class":713,"line":950},[711,22767,22327],{"class":717},[711,22769,22770,22772,22774,22777,22779,22781],{"class":713,"line":965},[711,22771,22332],{"class":1370},[711,22773,20539],{"class":1370},[711,22775,22776],{"class":872}," authorize",[711,22778,22340],{"class":717},[711,22780,22343],{"class":1370},[711,22782,22783],{"class":1370}," bool\n",[711,22785,22786],{"class":713,"line":991},[711,22787,22351],{"class":717},[711,22789,22790,22792,22794],{"class":713,"line":1001},[711,22791,22387],{"class":1370},[711,22793,15763],{"class":764},[711,22795,774],{"class":717},[711,22797,22798],{"class":713,"line":1011},[711,22799,1223],{"class":717},[711,22801,22802],{"class":713,"line":1024},[711,22803,1114],{"emptyLinePlaceholder":554},[711,22805,22806,22808,22810,22813,22815,22817],{"class":713,"line":556},[711,22807,22332],{"class":1370},[711,22809,20539],{"class":1370},[711,22811,22812],{"class":872}," rules",[711,22814,22340],{"class":717},[711,22816,22343],{"class":1370},[711,22818,22819],{"class":1370}," array\n",[711,22821,22822],{"class":713,"line":1046},[711,22823,22351],{"class":717},[711,22825,22826,22828],{"class":713,"line":3317},[711,22827,22387],{"class":1370},[711,22829,8827],{"class":717},[711,22831,22832,22835,22838,22840,22843,22845,22848,22850,22853],{"class":713,"line":3574},[711,22833,22834],{"class":890}," 'title'",[711,22836,22837],{"class":1370}," =>",[711,22839,12966],{"class":717},[711,22841,22842],{"class":890},"'required'",[711,22844,1077],{"class":717},[711,22846,22847],{"class":890},"'string'",[711,22849,1077],{"class":717},[711,22851,22852],{"class":890},"'max:255'",[711,22854,22855],{"class":717},"],\n",[711,22857,22858,22861,22863,22865,22867,22869,22871],{"class":713,"line":3595},[711,22859,22860],{"class":890}," 'content'",[711,22862,22837],{"class":1370},[711,22864,12966],{"class":717},[711,22866,22842],{"class":890},[711,22868,1077],{"class":717},[711,22870,22847],{"class":890},[711,22872,22855],{"class":717},[711,22874,22875,22878,22880,22882,22885,22887,22890],{"class":713,"line":3600},[711,22876,22877],{"class":890}," 'tags'",[711,22879,22837],{"class":1370},[711,22881,12966],{"class":717},[711,22883,22884],{"class":890},"'sometimes'",[711,22886,1077],{"class":717},[711,22888,22889],{"class":890},"'array'",[711,22891,22855],{"class":717},[711,22893,22894],{"class":713,"line":3868},[711,22895,22896],{"class":717}," ];\n",[711,22898,22899],{"class":713,"line":3888},[711,22900,1223],{"class":717},[711,22902,22903],{"class":713,"line":3908},[711,22904,779],{"class":717},[21,22906,22907],{},"Pourquoi c'est mieux ?",[31,22909,22910,22913,22916],{},[34,22911,22912],{},"les règles sont regroupées à un seul endroit",[34,22914,22915],{},"les messages d'erreur sont automatiquement renvoyés en JSON si la requête attend du JSON",[34,22917,22918],{},"vous pouvez réutiliser la même logique dans plusieurs actions si nécessaire",[21,22920,22921,22922,831],{},"Avec cette base, le contrôleur peut simplement faire confiance aux données validées via ",[358,22923,22924],{},"validated()",[16,22926,22928],{"id":22927},"retourner-des-réponses-cohérentes","Retourner des réponses cohérentes",[21,22930,22931],{},"Une API utile ne renvoie pas seulement des données. Elle renvoie aussi une structure prévisible. Essayez de garder la même forme pour les réponses de lecture, de création et d'erreur.",[21,22933,29],{},[31,22935,22936,22942,22947,22953,22959],{},[34,22937,22938,22941],{},[358,22939,22940],{},"200 OK"," pour une lecture réussie",[34,22943,22944,22946],{},[358,22945,22582],{}," pour une création",[34,22948,22949,22952],{},[358,22950,22951],{},"204 No Content"," pour une suppression réussie",[34,22954,22955,22958],{},[358,22956,22957],{},"422 Unprocessable Entity"," pour une validation invalide",[34,22960,22961,22964],{},[358,22962,22963],{},"404 Not Found"," si la ressource n'existe pas",[21,22966,22967],{},"Laravel facilite cette cohérence avec les API Resources :",[350,22969,22971],{"className":22067,"code":22970,"language":21985,"meta":356,"style":356},"use Illuminate\\Http\\Resources\\Json\\JsonResource;\n\nclass PostResource extends JsonResource\n{\n public function toArray($request): array\n {\n return [\n 'id' => $this->id,\n 'title' => $this->title,\n 'content' => $this->content,\n 'created_at' => $this->created_at?->toDateTimeString(),\n ];\n }\n}\n",[358,22972,22973,22982,22986,22997,23001,23017,23021,23027,23042,23055,23068,23091,23095,23099],{"__ignoreMap":356},[711,22974,22975,22977,22980],{"class":713,"line":714},[711,22976,22075],{"class":1370},[711,22978,22979],{"class":764}," Illuminate\\Http\\Resources\\Json\\JsonResource",[711,22981,774],{"class":717},[711,22983,22984],{"class":713,"line":521},[711,22985,1114],{"emptyLinePlaceholder":554},[711,22987,22988,22990,22992,22994],{"class":713,"line":529},[711,22989,20949],{"class":1370},[711,22991,22481],{"class":872},[711,22993,22319],{"class":1370},[711,22995,22996],{"class":872}," JsonResource\n",[711,22998,22999],{"class":713,"line":906},[711,23000,22327],{"class":717},[711,23002,23003,23005,23007,23010,23013,23015],{"class":713,"line":925},[711,23004,22332],{"class":1370},[711,23006,20539],{"class":1370},[711,23008,23009],{"class":872}," toArray",[711,23011,23012],{"class":717},"($request)",[711,23014,22343],{"class":1370},[711,23016,22819],{"class":1370},[711,23018,23019],{"class":713,"line":950},[711,23020,22351],{"class":717},[711,23022,23023,23025],{"class":713,"line":965},[711,23024,22387],{"class":1370},[711,23026,8827],{"class":717},[711,23028,23029,23032,23034,23037,23039],{"class":713,"line":991},[711,23030,23031],{"class":890}," 'id'",[711,23033,22837],{"class":1370},[711,23035,23036],{"class":764}," $this",[711,23038,22159],{"class":1370},[711,23040,23041],{"class":717},"id,\n",[711,23043,23044,23046,23048,23050,23052],{"class":713,"line":1001},[711,23045,22834],{"class":890},[711,23047,22837],{"class":1370},[711,23049,23036],{"class":764},[711,23051,22159],{"class":1370},[711,23053,23054],{"class":717},"title,\n",[711,23056,23057,23059,23061,23063,23065],{"class":713,"line":1011},[711,23058,22860],{"class":890},[711,23060,22837],{"class":1370},[711,23062,23036],{"class":764},[711,23064,22159],{"class":1370},[711,23066,23067],{"class":717},"content,\n",[711,23069,23070,23073,23075,23077,23079,23082,23085,23088],{"class":713,"line":1024},[711,23071,23072],{"class":890}," 'created_at'",[711,23074,22837],{"class":1370},[711,23076,23036],{"class":764},[711,23078,22159],{"class":1370},[711,23080,23081],{"class":717},"created_at",[711,23083,23084],{"class":1370},"?->",[711,23086,23087],{"class":872},"toDateTimeString",[711,23089,23090],{"class":717},"(),\n",[711,23092,23093],{"class":713,"line":556},[711,23094,22896],{"class":717},[711,23096,23097],{"class":713,"line":1046},[711,23098,1223],{"class":717},[711,23100,23101],{"class":713,"line":3317},[711,23102,779],{"class":717},[21,23104,23105],{},"Cela vous évite d'exposer directement toutes les colonnes du modèle.",[16,23107,23109],{"id":23108},"gestion-centralisée-des-erreurs","Gestion centralisée des erreurs",[21,23111,23112],{},"La gestion des erreurs est essentielle, car une API mal gérée devient vite frustrante à consommer. L'objectif est d'afficher un message utile, sans exposer de détails internes inutiles.",[21,23114,23115],{},"Dans Laravel, beaucoup de cas sont déjà bien pris en charge :",[31,23117,23118,23124,23130],{},[34,23119,23120,23121],{},"les erreurs de validation retournent automatiquement un ",[358,23122,23123],{},"422",[34,23125,23126,23127],{},"le route model binding peut renvoyer un ",[358,23128,23129],{},"404",[34,23131,23132],{},"Sanctum gère les réponses d'authentification non valides",[21,23134,23135],{},"Pour vos erreurs métier, créez des exceptions explicites et traduisez-les en réponses JSON propres. Le principe important est de ne jamais mélanger un message technique brut avec un message destiné au client.",[21,23137,23138],{},"Exemple de logique à garder en tête :",[350,23140,23142],{"className":22067,"code":23141,"language":21985,"meta":356,"style":356},"\u002F\u002F Si l'erreur concerne une validation, Laravel renvoie déjà un JSON clair.\n\u002F\u002F Si l'erreur est métier, traduisez-la en message compréhensible pour le client.\n",[358,23143,23144,23149],{"__ignoreMap":356},[711,23145,23146],{"class":713,"line":714},[711,23147,23148],{"class":10405},"\u002F\u002F Si l'erreur concerne une validation, Laravel renvoie déjà un JSON clair.\n",[711,23150,23151],{"class":713,"line":521},[711,23152,23153],{"class":10405},"\u002F\u002F Si l'erreur est métier, traduisez-la en message compréhensible pour le client.\n",[21,23155,23156],{},"Le point clé n'est pas la forme exacte du code, mais la discipline : une erreur doit toujours être lisible et exploitable côté client.",[16,23158,23160],{"id":23159},"pagination-filtres-et-tri","Pagination, filtres et tri",[21,23162,23163],{},"Une API de blog devient vite plus utile si elle permet de paginer et de filtrer les résultats. C'est particulièrement important lorsque la table commence à grandir.",[21,23165,23166],{},"Bonnes pratiques simples :",[31,23168,23169,23176,23189],{},[34,23170,23171,23172,23175],{},"utilisez ",[358,23173,23174],{},"paginate()"," plutôt que de tout charger d'un seul coup",[34,23177,23178,23179,1077,23182,1441,23185,23188],{},"filtrez par ",[358,23180,23181],{},"status",[358,23183,23184],{},"tag",[358,23186,23187],{},"author"," si nécessaire",[34,23190,23191],{},"triez systématiquement les résultats pour éviter les réponses imprévisibles",[21,23193,29],{},[350,23195,23197],{"className":22067,"code":23196,"language":21985,"meta":356,"style":356},"Post::query()\n ->when(request('tag'), fn ($query, $tag) => $query->whereJsonContains('tags', $tag))\n ->latest()\n ->paginate(10);\n",[358,23198,23199,23210,23249,23257],{"__ignoreMap":356},[711,23200,23201,23203,23205,23208],{"class":713,"line":714},[711,23202,22530],{"class":764},[711,23204,22092],{"class":1370},[711,23206,23207],{"class":872},"query",[711,23209,22494],{"class":717},[711,23211,23212,23215,23218,23220,23223,23225,23228,23230,23233,23236,23238,23241,23243,23246],{"class":713,"line":521},[711,23213,23214],{"class":1370}," ->",[711,23216,23217],{"class":872},"when",[711,23219,1789],{"class":717},[711,23221,23222],{"class":872},"request",[711,23224,1789],{"class":717},[711,23226,23227],{"class":890},"'tag'",[711,23229,8841],{"class":717},[711,23231,23232],{"class":1370},"fn",[711,23234,23235],{"class":717}," ($query, $tag) => $query",[711,23237,22159],{"class":1370},[711,23239,23240],{"class":872},"whereJsonContains",[711,23242,1789],{"class":717},[711,23244,23245],{"class":890},"'tags'",[711,23247,23248],{"class":717},", $tag))\n",[711,23250,23251,23253,23255],{"class":713,"line":529},[711,23252,23214],{"class":1370},[711,23254,22365],{"class":872},[711,23256,22494],{"class":717},[711,23258,23259,23261,23263,23265,23267],{"class":713,"line":906},[711,23260,23214],{"class":1370},[711,23262,22372],{"class":872},[711,23264,1789],{"class":717},[711,23266,3239],{"class":764},[711,23268,1804],{"class":717},[16,23270,23272],{"id":23271},"conclusion","Conclusion",[21,23274,23275],{},"Une API Laravel solide repose sur quelques principes simples : des routes explicites, des contrôleurs légers, une validation centralisée, une authentification claire et des réponses JSON cohérentes.",[21,23277,23278],{},"Si vous respectez cette structure dès le départ, votre API restera facile à comprendre, à tester et à faire évoluer. Le vrai gain ne vient pas seulement du fait que le code fonctionne, mais du fait qu'il reste lisible lorsque le projet grandit.",[640,23280,23281],{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":356,"searchDepth":521,"depth":521,"links":23283},[23284,23285,23286,23287,23288,23289,23290,23291,23292,23293,23294],{"id":18,"depth":521,"text":19},{"id":21895,"depth":521,"text":21896},{"id":21938,"depth":521,"text":21939},{"id":22041,"depth":521,"text":22042},{"id":22260,"depth":521,"text":22261},{"id":22594,"depth":521,"text":22595},{"id":22711,"depth":521,"text":22712},{"id":22927,"depth":521,"text":22928},{"id":23108,"depth":521,"text":23109},{"id":23159,"depth":521,"text":23160},{"id":23271,"depth":521,"text":23272},"Un guide pas à pas pour structurer une API Laravel lisible, sécurisée et facile à faire évoluer, avec les routes, la validation, l'authentification et la gestion des erreurs.",{},"\u002Fblog\u002Fconstruire-une-api-restful-avec-laravel","2025-03-15",{"title":21882,"description":23295},"blog\u002Fconstruire-une-api-restful-avec-laravel",[23302,23303,23304,23305],"Laravel","PHP","API","Backend","-YcZel08qaIbp4jORs9a0akyXzQQm9T5CrwO066Ay44",{"id":23308,"title":23309,"body":23310,"coverImage":550,"description":24671,"extension":552,"meta":24672,"navigation":554,"path":24673,"published":554,"publishedAt":24674,"readTime":3595,"seo":24675,"stem":24676,"tags":24677,"__hash__":24682},"blog\u002Fblog\u002Fflutter-architecture-clean.md","Architecture Clean dans Flutter : une structure simple, testable et durable",{"type":8,"value":23311,"toc":24656},[23312,23316,23319,23322,23325,23339,23343,23346,23349,23353,23357,23360,23380,23383,23561,23567,23570,23617,23620,23623,23626,23629,23854,23857,23868,23871,24092,24095,24099,24102,24105,24283,24286,24297,24300,24304,24307,24327,24330,24334,24337,24546,24549,24553,24556,24562,24565,24588,24591,24595,24598,24615,24618,24622,24625,24642,24645,24647,24650,24653],[16,23313,23315],{"id":23314},"pourquoi-la-clean-architecture","Pourquoi la Clean Architecture ?",[21,23317,23318],{},"Quand une application Flutter commence à grandir, le premier problème n'est pas le manque de fonctionnalités. C'est la difficulté à faire évoluer le code sans casser l'existant. Une logique métier dispersée dans les widgets, des appels réseau mélangés à l'affichage et des dépendances directes partout rendent vite le projet fragile.",[21,23320,23321],{},"La Clean Architecture résout ce problème en imposant une règle simple : les dépendances doivent toujours pointer vers le cœur du domaine. Autrement dit, la logique métier ne dépend pas de Flutter, de l'API, de la base de données ou de la façon dont l'écran est construit.",[21,23323,23324],{},"Le résultat est beaucoup plus sain :",[31,23326,23327,23330,23333,23336],{},[34,23328,23329],{},"le code devient plus facile à tester",[34,23331,23332],{},"les changements techniques sont mieux isolés",[34,23334,23335],{},"l'interface reste séparée de la logique métier",[34,23337,23338],{},"le projet est plus simple à comprendre pour une nouvelle personne qui arrive dessus",[16,23340,23342],{"id":23341},"lidée-à-retenir-avant-tout","L'idée à retenir avant tout",[21,23344,23345],{},"La Clean Architecture n'est pas là pour compliquer votre projet. Elle sert à protéger la logique importante.",[21,23347,23348],{},"Si vous changez de backend, de base locale ou même de gestionnaire d'état, vous ne devriez pas avoir à réécrire tout le cœur métier. C'est exactement ce que cette architecture permet.",[16,23350,23352],{"id":23351},"les-trois-couches","Les trois couches",[146,23354,23356],{"id":23355},"domain","Domain",[21,23358,23359],{},"Le domaine est le cœur de l'application. C'est ici que vivent les règles métier, les entités et les cas d'utilisation.",[31,23361,23362,23368,23374],{},[34,23363,23364,23367],{},[260,23365,23366],{},"Entities"," : les objets métier purs",[34,23369,23370,23373],{},[260,23371,23372],{},"Use cases"," : les actions que l'application sait faire",[34,23375,23376,23379],{},[260,23377,23378],{},"Repository interfaces"," : les contrats que la couche data devra respecter",[21,23381,23382],{},"Le domaine ne doit pas connaître Flutter, le réseau, Firebase ou un package de base de données. Il décrit le problème métier, pas la technique.",[350,23384,23388],{"className":23385,"code":23386,"language":23387,"meta":356,"style":356},"language-dart shiki shiki-themes github-light github-dark","class User {\n final String id;\n final String name;\n final String email;\n\n const User({required this.id, required this.name, required this.email});\n}\n\nclass GetUserUseCase {\n final UserRepository repository;\n\n GetUserUseCase(this.repository);\n\n Future\u003CEither\u003CFailure, User>> call(String id) =>\n repository.getUser(id);\n}\n","dart",[358,23389,23390,23398,23409,23417,23426,23430,23462,23466,23470,23479,23489,23493,23505,23509,23546,23557],{"__ignoreMap":356},[711,23391,23392,23394,23396],{"class":713,"line":714},[711,23393,20949],{"class":1370},[711,23395,20952],{"class":764},[711,23397,759],{"class":717},[711,23399,23400,23403,23406],{"class":713,"line":521},[711,23401,23402],{"class":1370}," final",[711,23404,23405],{"class":764}," String",[711,23407,23408],{"class":717}," id;\n",[711,23410,23411,23413,23415],{"class":713,"line":529},[711,23412,23402],{"class":1370},[711,23414,23405],{"class":764},[711,23416,20978],{"class":717},[711,23418,23419,23421,23423],{"class":713,"line":906},[711,23420,23402],{"class":1370},[711,23422,23405],{"class":764},[711,23424,23425],{"class":717}," email;\n",[711,23427,23428],{"class":713,"line":925},[711,23429,1114],{"emptyLinePlaceholder":554},[711,23431,23432,23434,23436,23439,23442,23445,23448,23450,23452,23455,23457,23459],{"class":713,"line":950},[711,23433,15192],{"class":1370},[711,23435,20952],{"class":764},[711,23437,23438],{"class":717},"({",[711,23440,23441],{"class":1370},"required",[711,23443,23444],{"class":764}," this",[711,23446,23447],{"class":717},".id, ",[711,23449,23441],{"class":1370},[711,23451,23444],{"class":764},[711,23453,23454],{"class":717},".name, ",[711,23456,23441],{"class":1370},[711,23458,23444],{"class":764},[711,23460,23461],{"class":717},".email});\n",[711,23463,23464],{"class":713,"line":965},[711,23465,779],{"class":717},[711,23467,23468],{"class":713,"line":991},[711,23469,1114],{"emptyLinePlaceholder":554},[711,23471,23472,23474,23477],{"class":713,"line":1001},[711,23473,20949],{"class":1370},[711,23475,23476],{"class":764}," GetUserUseCase",[711,23478,759],{"class":717},[711,23480,23481,23483,23486],{"class":713,"line":1011},[711,23482,23402],{"class":1370},[711,23484,23485],{"class":764}," UserRepository",[711,23487,23488],{"class":717}," repository;\n",[711,23490,23491],{"class":713,"line":1024},[711,23492,1114],{"emptyLinePlaceholder":554},[711,23494,23495,23498,23500,23502],{"class":713,"line":556},[711,23496,23497],{"class":764}," GetUserUseCase",[711,23499,1789],{"class":717},[711,23501,20016],{"class":764},[711,23503,23504],{"class":717},".repository);\n",[711,23506,23507],{"class":713,"line":1046},[711,23508,1114],{"emptyLinePlaceholder":554},[711,23510,23511,23514,23516,23519,23521,23524,23526,23529,23532,23535,23537,23540,23543],{"class":713,"line":3317},[711,23512,23513],{"class":764}," Future",[711,23515,718],{"class":717},[711,23517,23518],{"class":764},"Either",[711,23520,718],{"class":717},[711,23522,23523],{"class":764},"Failure",[711,23525,1077],{"class":717},[711,23527,23528],{"class":764},"User",[711,23530,23531],{"class":717},">> ",[711,23533,23534],{"class":872},"call",[711,23536,1789],{"class":717},[711,23538,23539],{"class":764},"String",[711,23541,23542],{"class":717}," id) ",[711,23544,23545],{"class":1370},"=>\n",[711,23547,23548,23551,23554],{"class":713,"line":3574},[711,23549,23550],{"class":717}," repository.",[711,23552,23553],{"class":872},"getUser",[711,23555,23556],{"class":717},"(id);\n",[711,23558,23559],{"class":713,"line":3595},[711,23560,779],{"class":717},[21,23562,23563,23564,23566],{},"Dans cet exemple, l'entité ",[358,23565,23528],{}," ne connaît rien au format JSON, et le cas d'utilisation ne connaît rien à l'origine des données. Il demande simplement un utilisateur à un repository.",[21,23568,23569],{},"On peut aussi définir le contrat du repository dans le domaine :",[350,23571,23573],{"className":23385,"code":23572,"language":23387,"meta":356,"style":356},"abstract class UserRepository {\n Future\u003CEither\u003CFailure, User>> getUser(String id);\n}\n",[358,23574,23575,23586,23613],{"__ignoreMap":356},[711,23576,23577,23580,23582,23584],{"class":713,"line":714},[711,23578,23579],{"class":1370},"abstract",[711,23581,1530],{"class":1370},[711,23583,23485],{"class":764},[711,23585,759],{"class":717},[711,23587,23588,23590,23592,23594,23596,23598,23600,23602,23604,23606,23608,23610],{"class":713,"line":521},[711,23589,23513],{"class":764},[711,23591,718],{"class":717},[711,23593,23518],{"class":764},[711,23595,718],{"class":717},[711,23597,23523],{"class":764},[711,23599,1077],{"class":717},[711,23601,23528],{"class":764},[711,23603,23531],{"class":717},[711,23605,23553],{"class":872},[711,23607,1789],{"class":717},[711,23609,23539],{"class":764},[711,23611,23612],{"class":717}," id);\n",[711,23614,23615],{"class":713,"line":529},[711,23616,779],{"class":717},[21,23618,23619],{},"Cela permet au domaine de rester totalement indépendant de l'implémentation réelle.",[146,23621,23622],{"id":21366},"Data",[21,23624,23625],{},"La couche data se charge de récupérer les données concrètes. Elle peut parler à une API, à une base locale ou à un cache.",[21,23627,23628],{},"Son rôle est d'implémenter les contrats définis dans le domaine et de transformer les données techniques en objets compréhensibles par l'application.",[350,23630,23632],{"className":23385,"code":23631,"language":23387,"meta":356,"style":356},"class UserRepositoryImpl implements UserRepository {\n final UserRemoteDataSource remoteDataSource;\n final UserLocalDataSource localDataSource;\n\n UserRepositoryImpl({\n required this.remoteDataSource,\n required this.localDataSource,\n });\n\n @override\n Future\u003CEither\u003CFailure, User>> getUser(String id) async {\n try {\n final user = await remoteDataSource.getUser(id);\n await localDataSource.cacheUser(user);\n return Right(user);\n } on ServerException {\n return Left(ServerFailure());\n } on CacheException {\n return Left(CacheFailure());\n }\n }\n}\n",[358,23633,23634,23648,23658,23668,23672,23680,23690,23699,23704,23708,23713,23743,23750,23769,23783,23792,23804,23818,23829,23842,23846,23850],{"__ignoreMap":356},[711,23635,23636,23638,23641,23644,23646],{"class":713,"line":714},[711,23637,20949],{"class":1370},[711,23639,23640],{"class":764}," UserRepositoryImpl",[711,23642,23643],{"class":1370}," implements",[711,23645,23485],{"class":764},[711,23647,759],{"class":717},[711,23649,23650,23652,23655],{"class":713,"line":521},[711,23651,23402],{"class":1370},[711,23653,23654],{"class":764}," UserRemoteDataSource",[711,23656,23657],{"class":717}," remoteDataSource;\n",[711,23659,23660,23662,23665],{"class":713,"line":529},[711,23661,23402],{"class":1370},[711,23663,23664],{"class":764}," UserLocalDataSource",[711,23666,23667],{"class":717}," localDataSource;\n",[711,23669,23670],{"class":713,"line":906},[711,23671,1114],{"emptyLinePlaceholder":554},[711,23673,23674,23677],{"class":713,"line":925},[711,23675,23676],{"class":764}," UserRepositoryImpl",[711,23678,23679],{"class":717},"({\n",[711,23681,23682,23685,23687],{"class":713,"line":950},[711,23683,23684],{"class":1370}," required",[711,23686,23444],{"class":764},[711,23688,23689],{"class":717},".remoteDataSource,\n",[711,23691,23692,23694,23696],{"class":713,"line":965},[711,23693,23684],{"class":1370},[711,23695,23444],{"class":764},[711,23697,23698],{"class":717},".localDataSource,\n",[711,23700,23701],{"class":713,"line":991},[711,23702,23703],{"class":717}," });\n",[711,23705,23706],{"class":713,"line":1001},[711,23707,1114],{"emptyLinePlaceholder":554},[711,23709,23710],{"class":713,"line":1011},[711,23711,23712],{"class":1370}," @override\n",[711,23714,23715,23717,23719,23721,23723,23725,23727,23729,23731,23733,23735,23737,23739,23741],{"class":713,"line":1024},[711,23716,23513],{"class":764},[711,23718,718],{"class":717},[711,23720,23518],{"class":764},[711,23722,718],{"class":717},[711,23724,23523],{"class":764},[711,23726,1077],{"class":717},[711,23728,23528],{"class":764},[711,23730,23531],{"class":717},[711,23732,23553],{"class":872},[711,23734,1789],{"class":717},[711,23736,23539],{"class":764},[711,23738,23542],{"class":717},[711,23740,21419],{"class":1370},[711,23742,759],{"class":717},[711,23744,23745,23748],{"class":713,"line":556},[711,23746,23747],{"class":1370}," try",[711,23749,759],{"class":717},[711,23751,23752,23755,23758,23760,23762,23765,23767],{"class":713,"line":1046},[711,23753,23754],{"class":1370}," final",[711,23756,23757],{"class":717}," user ",[711,23759,887],{"class":1370},[711,23761,21445],{"class":1370},[711,23763,23764],{"class":717}," remoteDataSource.",[711,23766,23553],{"class":872},[711,23768,23556],{"class":717},[711,23770,23771,23774,23777,23780],{"class":713,"line":3317},[711,23772,23773],{"class":1370}," await",[711,23775,23776],{"class":717}," localDataSource.",[711,23778,23779],{"class":872},"cacheUser",[711,23781,23782],{"class":717},"(user);\n",[711,23784,23785,23787,23790],{"class":713,"line":3574},[711,23786,13306],{"class":1370},[711,23788,23789],{"class":764}," Right",[711,23791,23782],{"class":717},[711,23793,23794,23796,23799,23802],{"class":713,"line":3595},[711,23795,13348],{"class":717},[711,23797,23798],{"class":1370},"on",[711,23800,23801],{"class":764}," ServerException",[711,23803,759],{"class":717},[711,23805,23806,23808,23811,23813,23816],{"class":713,"line":3600},[711,23807,13306],{"class":1370},[711,23809,23810],{"class":764}," Left",[711,23812,1789],{"class":717},[711,23814,23815],{"class":764},"ServerFailure",[711,23817,20924],{"class":717},[711,23819,23820,23822,23824,23827],{"class":713,"line":3868},[711,23821,13348],{"class":717},[711,23823,23798],{"class":1370},[711,23825,23826],{"class":764}," CacheException",[711,23828,759],{"class":717},[711,23830,23831,23833,23835,23837,23840],{"class":713,"line":3888},[711,23832,13306],{"class":1370},[711,23834,23810],{"class":764},[711,23836,1789],{"class":717},[711,23838,23839],{"class":764},"CacheFailure",[711,23841,20924],{"class":717},[711,23843,23844],{"class":713,"line":3908},[711,23845,1223],{"class":717},[711,23847,23848],{"class":713,"line":3928},[711,23849,3248],{"class":717},[711,23851,23852],{"class":713,"line":3937},[711,23853,779],{"class":717},[21,23855,23856],{},"La logique importante ici est la suivante :",[31,23858,23859,23862,23865],{},[34,23860,23861],{},"on essaie d'abord la source distante",[34,23863,23864],{},"si la récupération fonctionne, on peut mettre en cache le résultat",[34,23866,23867],{},"si une erreur technique survient, on la convertit en échec métier lisible",[21,23869,23870],{},"La couche data doit aussi s'occuper du mapping entre modèle technique et entité métier :",[350,23872,23874],{"className":23385,"code":23873,"language":23387,"meta":356,"style":356},"class UserModel {\n final String id;\n final String name;\n final String email;\n\n const UserModel({required this.id, required this.name, required this.email});\n\n factory UserModel.fromJson(Map\u003CString, dynamic> json) {\n return UserModel(\n id: json['id'] as String,\n name: json['name'] as String,\n email: json['email'] as String,\n );\n }\n\n User toEntity() => User(id: id, name: name, email: email);\n}\n",[358,23875,23876,23885,23893,23901,23909,23913,23939,23943,23972,23981,24002,24022,24042,24047,24051,24055,24088],{"__ignoreMap":356},[711,23877,23878,23880,23883],{"class":713,"line":714},[711,23879,20949],{"class":1370},[711,23881,23882],{"class":764}," UserModel",[711,23884,759],{"class":717},[711,23886,23887,23889,23891],{"class":713,"line":521},[711,23888,23402],{"class":1370},[711,23890,23405],{"class":764},[711,23892,23408],{"class":717},[711,23894,23895,23897,23899],{"class":713,"line":529},[711,23896,23402],{"class":1370},[711,23898,23405],{"class":764},[711,23900,20978],{"class":717},[711,23902,23903,23905,23907],{"class":713,"line":906},[711,23904,23402],{"class":1370},[711,23906,23405],{"class":764},[711,23908,23425],{"class":717},[711,23910,23911],{"class":713,"line":925},[711,23912,1114],{"emptyLinePlaceholder":554},[711,23914,23915,23917,23919,23921,23923,23925,23927,23929,23931,23933,23935,23937],{"class":713,"line":950},[711,23916,15192],{"class":1370},[711,23918,23882],{"class":764},[711,23920,23438],{"class":717},[711,23922,23441],{"class":1370},[711,23924,23444],{"class":764},[711,23926,23447],{"class":717},[711,23928,23441],{"class":1370},[711,23930,23444],{"class":764},[711,23932,23454],{"class":717},[711,23934,23441],{"class":1370},[711,23936,23444],{"class":764},[711,23938,23461],{"class":717},[711,23940,23941],{"class":713,"line":965},[711,23942,1114],{"emptyLinePlaceholder":554},[711,23944,23945,23948,23950,23952,23955,23957,23960,23962,23964,23966,23969],{"class":713,"line":991},[711,23946,23947],{"class":1370}," factory",[711,23949,23882],{"class":764},[711,23951,831],{"class":717},[711,23953,23954],{"class":872},"fromJson",[711,23956,1789],{"class":717},[711,23958,23959],{"class":764},"Map",[711,23961,718],{"class":717},[711,23963,23539],{"class":764},[711,23965,1077],{"class":717},[711,23967,23968],{"class":764},"dynamic",[711,23970,23971],{"class":717},"> json) {\n",[711,23973,23974,23976,23978],{"class":713,"line":1001},[711,23975,8645],{"class":1370},[711,23977,23882],{"class":764},[711,23979,23980],{"class":717},"(\n",[711,23982,23983,23986,23988,23991,23994,23996,23998,24000],{"class":713,"line":1011},[711,23984,23985],{"class":717}," id",[711,23987,22343],{"class":1370},[711,23989,23990],{"class":717}," json[",[711,23992,23993],{"class":890},"'id'",[711,23995,8653],{"class":717},[711,23997,10275],{"class":1370},[711,23999,23405],{"class":764},[711,24001,10304],{"class":717},[711,24003,24004,24007,24009,24011,24014,24016,24018,24020],{"class":713,"line":1024},[711,24005,24006],{"class":717}," name",[711,24008,22343],{"class":1370},[711,24010,23990],{"class":717},[711,24012,24013],{"class":890},"'name'",[711,24015,8653],{"class":717},[711,24017,10275],{"class":1370},[711,24019,23405],{"class":764},[711,24021,10304],{"class":717},[711,24023,24024,24027,24029,24031,24034,24036,24038,24040],{"class":713,"line":556},[711,24025,24026],{"class":717}," email",[711,24028,22343],{"class":1370},[711,24030,23990],{"class":717},[711,24032,24033],{"class":890},"'email'",[711,24035,8653],{"class":717},[711,24037,10275],{"class":1370},[711,24039,23405],{"class":764},[711,24041,10304],{"class":717},[711,24043,24044],{"class":713,"line":1046},[711,24045,24046],{"class":717}," );\n",[711,24048,24049],{"class":713,"line":3317},[711,24050,3248],{"class":717},[711,24052,24053],{"class":713,"line":3574},[711,24054,1114],{"emptyLinePlaceholder":554},[711,24056,24057,24060,24063,24066,24068,24070,24073,24075,24078,24080,24083,24085],{"class":713,"line":3595},[711,24058,24059],{"class":764}," User",[711,24061,24062],{"class":872}," toEntity",[711,24064,24065],{"class":717},"() ",[711,24067,20097],{"class":1370},[711,24069,20952],{"class":764},[711,24071,24072],{"class":717},"(id",[711,24074,22343],{"class":1370},[711,24076,24077],{"class":717}," id, name",[711,24079,22343],{"class":1370},[711,24081,24082],{"class":717}," name, email",[711,24084,22343],{"class":1370},[711,24086,24087],{"class":717}," email);\n",[711,24089,24090],{"class":713,"line":3600},[711,24091,779],{"class":717},[21,24093,24094],{},"Ce passage est important : les modèles servent à parler à l'extérieur, les entités servent à parler au métier.",[146,24096,24098],{"id":24097},"presentation","Presentation",[21,24100,24101],{},"La couche presentation affiche les données et gère les interactions utilisateur. Avec BLoC, elle reste réactive sans prendre toute la logique métier sur ses épaules.",[21,24103,24104],{},"Le BLoC reçoit les événements de l'interface, appelle les cas d'utilisation, puis émet de nouveaux états.",[350,24106,24108],{"className":23385,"code":24107,"language":23387,"meta":356,"style":356},"class UserBloc extends Bloc\u003CUserEvent, UserState> {\n final GetUserUseCase getUser;\n\n UserBloc({required this.getUser}) : super(UserInitial()) {\n on\u003CFetchUser>((event, emit) async {\n emit(UserLoading());\n final result = await getUser(event.id);\n result.fold(\n (failure) => emit(UserError(failure.message)),\n (user) => emit(UserLoaded(user)),\n );\n });\n }\n}\n",[358,24109,24110,24135,24144,24148,24175,24192,24204,24221,24230,24248,24265,24270,24275,24279],{"__ignoreMap":356},[711,24111,24112,24114,24117,24119,24122,24124,24127,24129,24132],{"class":713,"line":714},[711,24113,20949],{"class":1370},[711,24115,24116],{"class":764}," UserBloc",[711,24118,22319],{"class":1370},[711,24120,24121],{"class":764}," Bloc",[711,24123,718],{"class":717},[711,24125,24126],{"class":764},"UserEvent",[711,24128,1077],{"class":717},[711,24130,24131],{"class":764},"UserState",[711,24133,24134],{"class":717},"> {\n",[711,24136,24137,24139,24141],{"class":713,"line":521},[711,24138,23402],{"class":1370},[711,24140,23476],{"class":764},[711,24142,24143],{"class":717}," getUser;\n",[711,24145,24146],{"class":713,"line":529},[711,24147,1114],{"emptyLinePlaceholder":554},[711,24149,24150,24153,24155,24157,24159,24162,24164,24167,24169,24172],{"class":713,"line":906},[711,24151,24152],{"class":764}," UserBloc",[711,24154,23438],{"class":717},[711,24156,23441],{"class":1370},[711,24158,23444],{"class":764},[711,24160,24161],{"class":717},".getUser}) ",[711,24163,22343],{"class":1370},[711,24165,24166],{"class":764}," super",[711,24168,1789],{"class":717},[711,24170,24171],{"class":764},"UserInitial",[711,24173,24174],{"class":717},"()) {\n",[711,24176,24177,24180,24183,24185,24188,24190],{"class":713,"line":925},[711,24178,24179],{"class":1370}," on\u003C",[711,24181,24182],{"class":764},"FetchUser",[711,24184,15286],{"class":1370},[711,24186,24187],{"class":717},"((event, emit) ",[711,24189,21419],{"class":1370},[711,24191,759],{"class":717},[711,24193,24194,24197,24199,24202],{"class":713,"line":950},[711,24195,24196],{"class":872}," emit",[711,24198,1789],{"class":717},[711,24200,24201],{"class":764},"UserLoading",[711,24203,20924],{"class":717},[711,24205,24206,24208,24211,24213,24215,24218],{"class":713,"line":965},[711,24207,23754],{"class":1370},[711,24209,24210],{"class":717}," result ",[711,24212,887],{"class":1370},[711,24214,21445],{"class":1370},[711,24216,24217],{"class":872}," getUser",[711,24219,24220],{"class":717},"(event.id);\n",[711,24222,24223,24225,24228],{"class":713,"line":991},[711,24224,16434],{"class":717},[711,24226,24227],{"class":872},"fold",[711,24229,23980],{"class":717},[711,24231,24232,24235,24237,24240,24242,24245],{"class":713,"line":1001},[711,24233,24234],{"class":717}," (failure) ",[711,24236,20097],{"class":1370},[711,24238,24239],{"class":872}," emit",[711,24241,1789],{"class":717},[711,24243,24244],{"class":764},"UserError",[711,24246,24247],{"class":717},"(failure.message)),\n",[711,24249,24250,24253,24255,24257,24259,24262],{"class":713,"line":1011},[711,24251,24252],{"class":717}," (user) ",[711,24254,20097],{"class":1370},[711,24256,24239],{"class":872},[711,24258,1789],{"class":717},[711,24260,24261],{"class":764},"UserLoaded",[711,24263,24264],{"class":717},"(user)),\n",[711,24266,24267],{"class":713,"line":1024},[711,24268,24269],{"class":717}," );\n",[711,24271,24272],{"class":713,"line":556},[711,24273,24274],{"class":717}," });\n",[711,24276,24277],{"class":713,"line":1046},[711,24278,3248],{"class":717},[711,24280,24281],{"class":713,"line":3317},[711,24282,779],{"class":717},[21,24284,24285],{},"Cette structure garde les widgets simples. Un écran Flutter devrait surtout dire :",[31,24287,24288,24291,24294],{},[34,24289,24290],{},"quel événement envoyer",[34,24292,24293],{},"quel état afficher",[34,24295,24296],{},"comment présenter les données",[21,24298,24299],{},"Il ne devrait pas décider comment parler à l'API ou comment construire un repository.",[16,24301,24303],{"id":24302},"le-chemin-complet-dune-donnée","Le chemin complet d'une donnée",[21,24305,24306],{},"Pour bien comprendre, voici le trajet classique d'une information :",[60,24308,24309,24312,24315,24318,24321,24324],{},[34,24310,24311],{},"l'utilisateur appuie sur un bouton",[34,24313,24314],{},"le widget envoie un événement au BLoC",[34,24316,24317],{},"le BLoC appelle un cas d'utilisation",[34,24319,24320],{},"le cas d'utilisation demande la donnée au repository",[34,24322,24323],{},"le repository récupère la donnée via la couche data",[34,24325,24326],{},"la réponse remonte dans l'autre sens jusqu'à l'interface",[21,24328,24329],{},"Ce flux peut sembler plus long qu'une approche directe, mais il devient très robuste dès que le projet grossit.",[16,24331,24333],{"id":24332},"injection-de-dépendances-avec-getit","Injection de dépendances avec GetIt",[21,24335,24336],{},"L'injection de dépendances évite de créer les objets n'importe où dans le code. Elle rend les dépendances explicites et facilite les tests.",[350,24338,24340],{"className":23385,"code":24339,"language":23387,"meta":356,"style":356},"final sl = GetIt.instance;\n\nvoid setupLocator() {\n \u002F\u002F Data sources\n sl.registerLazySingleton\u003CUserRemoteDataSource>(\n () => UserRemoteDataSourceImpl(client: sl()),\n );\n\n \u002F\u002F Repository\n sl.registerLazySingleton\u003CUserRepository>(\n () => UserRepositoryImpl(\n remoteDataSource: sl(),\n localDataSource: sl(),\n ),\n );\n\n \u002F\u002F Use cases\n sl.registerLazySingleton(() => GetUserUseCase(sl()));\n\n \u002F\u002F BLoC\n sl.registerFactory(() => UserBloc(getUser: sl()));\n}\n",[358,24341,24342,24358,24362,24372,24377,24393,24414,24419,24423,24428,24441,24451,24462,24473,24478,24482,24486,24491,24511,24515,24520,24542],{"__ignoreMap":356},[711,24343,24344,24347,24350,24352,24355],{"class":713,"line":714},[711,24345,24346],{"class":1370},"final",[711,24348,24349],{"class":717}," sl ",[711,24351,887],{"class":1370},[711,24353,24354],{"class":764}," GetIt",[711,24356,24357],{"class":717},".instance;\n",[711,24359,24360],{"class":713,"line":521},[711,24361,1114],{"emptyLinePlaceholder":554},[711,24363,24364,24367,24370],{"class":713,"line":529},[711,24365,24366],{"class":1370},"void",[711,24368,24369],{"class":872}," setupLocator",[711,24371,20363],{"class":717},[711,24373,24374],{"class":713,"line":906},[711,24375,24376],{"class":10405}," \u002F\u002F Data sources\n",[711,24378,24379,24382,24385,24387,24390],{"class":713,"line":925},[711,24380,24381],{"class":717}," sl.",[711,24383,24384],{"class":872},"registerLazySingleton",[711,24386,718],{"class":717},[711,24388,24389],{"class":764},"UserRemoteDataSource",[711,24391,24392],{"class":717},">(\n",[711,24394,24395,24398,24400,24403,24406,24408,24411],{"class":713,"line":950},[711,24396,24397],{"class":717}," () ",[711,24399,20097],{"class":1370},[711,24401,24402],{"class":764}," UserRemoteDataSourceImpl",[711,24404,24405],{"class":717},"(client",[711,24407,22343],{"class":1370},[711,24409,24410],{"class":872}," sl",[711,24412,24413],{"class":717},"()),\n",[711,24415,24416],{"class":713,"line":965},[711,24417,24418],{"class":717}," );\n",[711,24420,24421],{"class":713,"line":991},[711,24422,1114],{"emptyLinePlaceholder":554},[711,24424,24425],{"class":713,"line":1001},[711,24426,24427],{"class":10405}," \u002F\u002F Repository\n",[711,24429,24430,24432,24434,24436,24439],{"class":713,"line":1011},[711,24431,24381],{"class":717},[711,24433,24384],{"class":872},[711,24435,718],{"class":717},[711,24437,24438],{"class":764},"UserRepository",[711,24440,24392],{"class":717},[711,24442,24443,24445,24447,24449],{"class":713,"line":1024},[711,24444,24397],{"class":717},[711,24446,20097],{"class":1370},[711,24448,23640],{"class":764},[711,24450,23980],{"class":717},[711,24452,24453,24456,24458,24460],{"class":713,"line":556},[711,24454,24455],{"class":717}," remoteDataSource",[711,24457,22343],{"class":1370},[711,24459,24410],{"class":872},[711,24461,23090],{"class":717},[711,24463,24464,24467,24469,24471],{"class":713,"line":1046},[711,24465,24466],{"class":717}," localDataSource",[711,24468,22343],{"class":1370},[711,24470,24410],{"class":872},[711,24472,23090],{"class":717},[711,24474,24475],{"class":713,"line":3317},[711,24476,24477],{"class":717}," ),\n",[711,24479,24480],{"class":713,"line":3574},[711,24481,24418],{"class":717},[711,24483,24484],{"class":713,"line":3595},[711,24485,1114],{"emptyLinePlaceholder":554},[711,24487,24488],{"class":713,"line":3600},[711,24489,24490],{"class":10405}," \u002F\u002F Use cases\n",[711,24492,24493,24495,24497,24499,24501,24503,24505,24508],{"class":713,"line":3868},[711,24494,24381],{"class":717},[711,24496,24384],{"class":872},[711,24498,20094],{"class":717},[711,24500,20097],{"class":1370},[711,24502,23476],{"class":764},[711,24504,1789],{"class":717},[711,24506,24507],{"class":872},"sl",[711,24509,24510],{"class":717},"()));\n",[711,24512,24513],{"class":713,"line":3888},[711,24514,1114],{"emptyLinePlaceholder":554},[711,24516,24517],{"class":713,"line":3908},[711,24518,24519],{"class":10405}," \u002F\u002F BLoC\n",[711,24521,24522,24524,24527,24529,24531,24533,24536,24538,24540],{"class":713,"line":3928},[711,24523,24381],{"class":717},[711,24525,24526],{"class":872},"registerFactory",[711,24528,20094],{"class":717},[711,24530,20097],{"class":1370},[711,24532,24116],{"class":764},[711,24534,24535],{"class":717},"(getUser",[711,24537,22343],{"class":1370},[711,24539,24410],{"class":872},[711,24541,24510],{"class":717},[711,24543,24544],{"class":713,"line":3937},[711,24545,779],{"class":717},[21,24547,24548],{},"Avec cette approche, chaque couche reçoit exactement ce dont elle a besoin, sans connaître la façon dont les autres objets ont été construits.",[16,24550,24552],{"id":24551},"structure-de-dossiers-recommandée","Structure de dossiers recommandée",[21,24554,24555],{},"Une arborescence claire aide énormément à retrouver les fichiers. Une structure fréquente ressemble à ceci :",[350,24557,24560],{"className":24558,"code":24559,"language":355},[353],"lib\u002F\n core\u002F\n error\u002F\n usecase\u002F\n utils\u002F\n features\u002F\n user\u002F\n data\u002F\n datasources\u002F\n models\u002F\n repositories\u002F\n domain\u002F\n entities\u002F\n repositories\u002F\n usecases\u002F\n presentation\u002F\n bloc\u002F\n pages\u002F\n widgets\u002F\n",[358,24561,24559],{"__ignoreMap":356},[21,24563,24564],{},"Dans cette organisation :",[31,24566,24567,24573,24579],{},[34,24568,24569,24572],{},[358,24570,24571],{},"core"," contient le code partagé à l'échelle de l'application",[34,24574,24575,24578],{},[358,24576,24577],{},"features"," isole chaque domaine fonctionnel",[34,24580,24581,24582,1077,24584,1913,24586],{},"chaque fonctionnalité possède ses propres couches ",[358,24583,21366],{},[358,24585,23355],{},[358,24587,24097],{},[21,24589,24590],{},"Ce découpage évite que tout le projet soit mélangé dans un seul dossier gigantesque.",[16,24592,24594],{"id":24593},"quand-utiliser-la-clean-architecture","Quand utiliser la Clean Architecture",[21,24596,24597],{},"La Clean Architecture est particulièrement pertinente si :",[31,24599,24600,24603,24606,24609,24612],{},[34,24601,24602],{},"l'application doit durer plusieurs mois ou plusieurs années",[34,24604,24605],{},"plusieurs développeurs travaillent dessus",[34,24607,24608],{},"la logique métier est importante",[34,24610,24611],{},"vous avez besoin de tests fiables",[34,24613,24614],{},"la source de données peut changer avec le temps",[21,24616,24617],{},"En revanche, pour un prototype très simple ou une application jetable, une architecture plus légère peut suffire.",[16,24619,24621],{"id":24620},"les-erreurs-fréquentes","Les erreurs fréquentes",[21,24623,24624],{},"Beaucoup de projets disent utiliser la Clean Architecture, mais la cassent sans s'en rendre compte. Voici les pièges les plus courants :",[31,24626,24627,24630,24633,24636,24639],{},[34,24628,24629],{},"mettre des appels HTTP directement dans les widgets",[34,24631,24632],{},"faire dépendre le domaine de classes de la couche data",[34,24634,24635],{},"mélanger transformation JSON et logique métier",[34,24637,24638],{},"créer des fichiers trop génériques qui ne veulent plus rien dire",[34,24640,24641],{},"multiplier les abstractions sans besoin réel",[21,24643,24644],{},"Le bon réflexe est simple : gardez chaque fichier responsable d'une seule chose.",[16,24646,23272],{"id":23271},[21,24648,24649],{},"Adopter la Clean Architecture dans Flutter demande un peu plus de discipline au départ. En échange, vous obtenez une application plus facile à faire évoluer, à tester et à comprendre.",[21,24651,24652],{},"Le vrai bénéfice apparaît surtout quand le projet grandit. Tant que les responsabilités restent séparées, les changements sont plus sûrs et le code reste lisible longtemps.",[640,24654,24655],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":356,"searchDepth":521,"depth":521,"links":24657},[24658,24659,24660,24665,24666,24667,24668,24669,24670],{"id":23314,"depth":521,"text":23315},{"id":23341,"depth":521,"text":23342},{"id":23351,"depth":521,"text":23352,"children":24661},[24662,24663,24664],{"id":23355,"depth":529,"text":23356},{"id":21366,"depth":529,"text":23622},{"id":24097,"depth":529,"text":24098},{"id":24302,"depth":521,"text":24303},{"id":24332,"depth":521,"text":24333},{"id":24551,"depth":521,"text":24552},{"id":24593,"depth":521,"text":24594},{"id":24620,"depth":521,"text":24621},{"id":23271,"depth":521,"text":23272},"Un guide progressif pour organiser une application Flutter avec la Clean Architecture, le BLoC, les repositories et une séparation claire des responsabilités.",{},"\u002Fblog\u002Fflutter-architecture-clean","2025-02-20",{"title":23309,"description":24671},"blog\u002Fflutter-architecture-clean",[24678,24679,24680,24681],"Flutter","Dart","Architecture","Mobile","-DFut9P0xbDrpRv6wwCtsnUZDczGJXQSrXTuGN-ktVE",{"id":24684,"title":24685,"body":24686,"coverImage":550,"description":25443,"extension":552,"meta":25444,"navigation":554,"path":25445,"published":554,"publishedAt":25446,"readTime":556,"seo":25447,"stem":25448,"tags":25449,"__hash__":25453},"blog\u002Fblog\u002Fintegration-paiement-web3.md","Intégrer un portefeuille Web3 dans une application Flutter",{"type":8,"value":24687,"toc":25432},[24688,24692,24695,24698,24701,24705,24708,24731,24734,24738,24741,24744,24747,24764,24866,24869,24880,24884,24887,24894,24897,24900,24986,24993,25111,25114,25118,25123,25126,25321,25324,25328,25331,25349,25352,25356,25359,25385,25388,25392,25395,25398,25415,25418,25420,25426,25429],[16,24689,24691],{"id":24690},"comprendre-le-problème-avant-de-coder","Comprendre le problème avant de coder",[21,24693,24694],{},"Sur mobile, le Web3 ne fonctionne pas exactement comme sur le web. Un portefeuille comme MetaMask ou Rabby n'est pas une simple bibliothèque à brancher dans votre code : c'est un environnement externe qui signe les transactions à la place de l'utilisateur.",[21,24696,24697],{},"Cela change tout. Dans une application Flutter, votre rôle n'est généralement pas de stocker la clé privée d'un utilisateur. Votre rôle est de demander une connexion, récupérer une adresse, proposer une action, puis attendre qu'un portefeuille valide la signature.",[21,24699,24700],{},"Avant de choisir une solution, posez-vous une question simple : voulez-vous seulement lire des données on-chain, ou voulez-vous aussi faire signer des actions par l'utilisateur ? La réponse détermine la meilleure architecture.",[16,24702,24704],{"id":24703},"les-trois-approches-les-plus-courantes","Les trois approches les plus courantes",[21,24706,24707],{},"Il existe trois façons réalistes d'intégrer le Web3 dans Flutter :",[60,24709,24710,24716,24722],{},[34,24711,24712,24715],{},[260,24713,24714],{},"WalletConnect"," pour connecter votre app à un portefeuille externe",[34,24717,24718,24721],{},[260,24719,24720],{},"WebView avec bridge JavaScript"," pour réutiliser une dApp web existante",[34,24723,24724,24730],{},[260,24725,24726,24727],{},"Accès natif avec ",[358,24728,24729],{},"web3dart"," pour des interactions simples côté chaîne",[21,24732,24733],{},"Le bon choix dépend surtout de votre niveau d'exigence sur l'expérience utilisateur, la sécurité et le temps de développement.",[16,24735,24737],{"id":24736},"approche-1-walletconnect","Approche 1 - WalletConnect",[21,24739,24740],{},"WalletConnect est souvent la meilleure solution par défaut. Le principe est simple : votre application demande une connexion, le portefeuille externe affiche la requête, puis l'utilisateur valide manuellement.",[21,24742,24743],{},"L'avantage est énorme : vous ne touchez pas à la clé privée de l'utilisateur, et vous vous appuyez sur un standard largement adopté.",[21,24745,24746],{},"Le flux général ressemble à ceci :",[31,24748,24749,24752,24755,24758,24761],{},[34,24750,24751],{},"l'utilisateur clique sur \"Connecter le portefeuille\"",[34,24753,24754],{},"l'application génère une demande de pairing",[34,24756,24757],{},"le wallet ouvre la session et affiche les comptes disponibles",[34,24759,24760],{},"l'utilisateur approuve ou refuse",[34,24762,24763],{},"votre app récupère l'adresse publique et l'état de connexion",[350,24765,24767],{"className":23385,"code":24766,"language":23387,"meta":356,"style":356},"\u002F\u002F Exemple simplifié : les API exactes dépendent du package WalletConnect choisi.\nfinal metadata = PairingMetadata(\n name: 'Mon App',\n description: 'Application de paiement',\n url: 'https:\u002F\u002Fmonapp.com',\n icons: ['https:\u002F\u002Fmonapp.com\u002Ficon.png'],\n);\n\n\u002F\u002F 1. Créer une session\n\u002F\u002F 2. Ouvrir le wallet via deep link ou QR code\n\u002F\u002F 3. Attendre l'approbation de l'utilisateur\n\u002F\u002F 4. Récupérer l'adresse et la chaîne sélectionnée\n",[358,24768,24769,24774,24788,24800,24812,24824,24838,24842,24846,24851,24856,24861],{"__ignoreMap":356},[711,24770,24771],{"class":713,"line":714},[711,24772,24773],{"class":10405},"\u002F\u002F Exemple simplifié : les API exactes dépendent du package WalletConnect choisi.\n",[711,24775,24776,24778,24781,24783,24786],{"class":713,"line":521},[711,24777,24346],{"class":1370},[711,24779,24780],{"class":717}," metadata ",[711,24782,887],{"class":1370},[711,24784,24785],{"class":764}," PairingMetadata",[711,24787,23980],{"class":717},[711,24789,24790,24793,24795,24798],{"class":713,"line":529},[711,24791,24792],{"class":717}," name",[711,24794,22343],{"class":1370},[711,24796,24797],{"class":890}," 'Mon App'",[711,24799,10304],{"class":717},[711,24801,24802,24805,24807,24810],{"class":713,"line":906},[711,24803,24804],{"class":717}," description",[711,24806,22343],{"class":1370},[711,24808,24809],{"class":890}," 'Application de paiement'",[711,24811,10304],{"class":717},[711,24813,24814,24817,24819,24822],{"class":713,"line":925},[711,24815,24816],{"class":717}," url",[711,24818,22343],{"class":1370},[711,24820,24821],{"class":890}," 'https:\u002F\u002Fmonapp.com'",[711,24823,10304],{"class":717},[711,24825,24826,24829,24831,24833,24836],{"class":713,"line":950},[711,24827,24828],{"class":717}," icons",[711,24830,22343],{"class":1370},[711,24832,12966],{"class":717},[711,24834,24835],{"class":890},"'https:\u002F\u002Fmonapp.com\u002Ficon.png'",[711,24837,22855],{"class":717},[711,24839,24840],{"class":713,"line":965},[711,24841,1804],{"class":717},[711,24843,24844],{"class":713,"line":991},[711,24845,1114],{"emptyLinePlaceholder":554},[711,24847,24848],{"class":713,"line":1001},[711,24849,24850],{"class":10405},"\u002F\u002F 1. Créer une session\n",[711,24852,24853],{"class":713,"line":1011},[711,24854,24855],{"class":10405},"\u002F\u002F 2. Ouvrir le wallet via deep link ou QR code\n",[711,24857,24858],{"class":713,"line":1024},[711,24859,24860],{"class":10405},"\u002F\u002F 3. Attendre l'approbation de l'utilisateur\n",[711,24862,24863],{"class":713,"line":556},[711,24864,24865],{"class":10405},"\u002F\u002F 4. Récupérer l'adresse et la chaîne sélectionnée\n",[21,24867,24868],{},"WalletConnect est particulièrement adapté si vous voulez :",[31,24870,24871,24874,24877],{},[34,24872,24873],{},"une vraie expérience Web3 mobile",[34,24875,24876],{},"une sécurité correcte sans gérer les clés privées",[34,24878,24879],{},"une compatibilité avec plusieurs wallets",[16,24881,24883],{"id":24882},"approche-2-webview-ethersjs","Approche 2 - WebView + ethers.js",[21,24885,24886],{},"Cette approche est intéressante si vous avez déjà une dApp web fonctionnelle et que vous souhaitez la réutiliser dans Flutter sans la réécrire.",[21,24888,24889,24890,24893],{},"Le principe consiste à charger votre application web dans une WebView, puis à injecter un objet ",[358,24891,24892],{},"window.ethereum"," qui relaie les appels vers Flutter.",[21,24895,24896],{},"Le point fort : vous conservez une grande partie du code web existant.",[21,24898,24899],{},"Le point faible : la solution est plus fragile, car vous devez gérer le pont JavaScript, les permissions, les erreurs et les différences entre plateformes.",[350,24901,24903],{"className":23385,"code":24902,"language":23387,"meta":356,"style":356},"late final WebViewController controller;\n\nvoid _injectWeb3Provider() {\n controller.runJavaScript('''\n window.ethereum = {\n request: async ({ method, params }) => {\n return await FlutterEthBridge.callMethod(method, params);\n },\n isMetaMask: true,\n };\n ''');\n}\n",[358,24904,24905,24919,24923,24932,24945,24950,24955,24960,24965,24970,24975,24982],{"__ignoreMap":356},[711,24906,24907,24910,24913,24916],{"class":713,"line":714},[711,24908,24909],{"class":1370},"late",[711,24911,24912],{"class":1370}," final",[711,24914,24915],{"class":764}," WebViewController",[711,24917,24918],{"class":717}," controller;\n",[711,24920,24921],{"class":713,"line":521},[711,24922,1114],{"emptyLinePlaceholder":554},[711,24924,24925,24927,24930],{"class":713,"line":529},[711,24926,24366],{"class":1370},[711,24928,24929],{"class":872}," _injectWeb3Provider",[711,24931,20363],{"class":717},[711,24933,24934,24937,24940,24942],{"class":713,"line":906},[711,24935,24936],{"class":717}," controller.",[711,24938,24939],{"class":872},"runJavaScript",[711,24941,1789],{"class":717},[711,24943,24944],{"class":890},"'''\n",[711,24946,24947],{"class":713,"line":925},[711,24948,24949],{"class":890}," window.ethereum = {\n",[711,24951,24952],{"class":713,"line":950},[711,24953,24954],{"class":890}," request: async ({ method, params }) => {\n",[711,24956,24957],{"class":713,"line":965},[711,24958,24959],{"class":890}," return await FlutterEthBridge.callMethod(method, params);\n",[711,24961,24962],{"class":713,"line":991},[711,24963,24964],{"class":890}," },\n",[711,24966,24967],{"class":713,"line":1001},[711,24968,24969],{"class":890}," isMetaMask: true,\n",[711,24971,24972],{"class":713,"line":1011},[711,24973,24974],{"class":890}," };\n",[711,24976,24977,24980],{"class":713,"line":1024},[711,24978,24979],{"class":890}," '''",[711,24981,1804],{"class":717},[711,24983,24984],{"class":713,"line":556},[711,24985,779],{"class":717},[21,24987,24988,24989,24992],{},"Ensuite, côté Flutter, vous écoutez les messages envoyés par la WebView via un ",[358,24990,24991],{},"JavascriptChannel"," :",[350,24994,24996],{"className":23385,"code":24995,"language":23387,"meta":356,"style":356},"JavascriptChannel(\n name: 'FlutterEthBridge',\n onMessageReceived: (message) async {\n final call = jsonDecode(message.message);\n final result = await _handleEthCall(call['method'], call['params']);\n controller.runJavaScript('resolveEthCall(${jsonEncode(result)})');\n },\n)\n",[358,24997,24998,25004,25015,25029,25045,25072,25103,25107],{"__ignoreMap":356},[711,24999,25000,25002],{"class":713,"line":714},[711,25001,24991],{"class":764},[711,25003,23980],{"class":717},[711,25005,25006,25008,25010,25013],{"class":713,"line":521},[711,25007,24792],{"class":717},[711,25009,22343],{"class":1370},[711,25011,25012],{"class":890}," 'FlutterEthBridge'",[711,25014,10304],{"class":717},[711,25016,25017,25020,25022,25025,25027],{"class":713,"line":529},[711,25018,25019],{"class":717}," onMessageReceived",[711,25021,22343],{"class":1370},[711,25023,25024],{"class":717}," (message) ",[711,25026,21419],{"class":1370},[711,25028,759],{"class":717},[711,25030,25031,25034,25037,25039,25042],{"class":713,"line":906},[711,25032,25033],{"class":1370}," final",[711,25035,25036],{"class":717}," call ",[711,25038,887],{"class":1370},[711,25040,25041],{"class":872}," jsonDecode",[711,25043,25044],{"class":717},"(message.message);\n",[711,25046,25047,25049,25051,25053,25055,25058,25061,25064,25067,25070],{"class":713,"line":925},[711,25048,25033],{"class":1370},[711,25050,24210],{"class":717},[711,25052,887],{"class":1370},[711,25054,21445],{"class":1370},[711,25056,25057],{"class":872}," _handleEthCall",[711,25059,25060],{"class":717},"(call[",[711,25062,25063],{"class":890},"'method'",[711,25065,25066],{"class":717},"], call[",[711,25068,25069],{"class":890},"'params'",[711,25071,15507],{"class":717},[711,25073,25074,25077,25079,25081,25084,25087,25090,25092,25095,25098,25101],{"class":713,"line":950},[711,25075,25076],{"class":717}," controller.",[711,25078,24939],{"class":872},[711,25080,1789],{"class":717},[711,25082,25083],{"class":890},"'resolveEthCall(",[711,25085,25086],{"class":890},"${",[711,25088,25089],{"class":872},"jsonEncode",[711,25091,1789],{"class":890},[711,25093,25094],{"class":764},"result",[711,25096,25097],{"class":890},")}",[711,25099,25100],{"class":890},")'",[711,25102,1804],{"class":717},[711,25104,25105],{"class":713,"line":965},[711,25106,20904],{"class":717},[711,25108,25109],{"class":713,"line":991},[711,25110,8695],{"class":717},[21,25112,25113],{},"Cette approche peut fonctionner correctement, mais elle demande beaucoup de rigueur. Il faut bien valider l'origine des appels, ne jamais exposer d'opérations sensibles sans contrôle, et garder une séparation nette entre le code web et le code natif.",[16,25115,25117],{"id":25116},"approche-3-web3dart-natif","Approche 3 - web3dart (natif)",[21,25119,25120,25122],{},[358,25121,24729],{}," est utile lorsque vous voulez interagir directement avec la blockchain sans interface web. C'est pratique pour lire des données, interroger un contrat ou envoyer une transaction dans un contexte contrôlé.",[21,25124,25125],{},"Cette approche est la plus simple pour des opérations on-chain basiques, mais elle ne remplace pas un vrai wallet utilisateur dans une application grand public.",[350,25127,25129],{"className":23385,"code":25128,"language":23387,"meta":356,"style":356},"final client = Web3Client('https:\u002F\u002Fsepolia.infura.io\u002Fv3\u002FYOUR_KEY', Client());\n\n\u002F\u002F Lire un solde\nfinal balance = await client.getBalance(\n EthereumAddress.fromHex('0x...'),\n);\n\n\u002F\u002F Envoyer une transaction\nfinal credentials = EthPrivateKey.fromHex('0x...');\nfinal txHash = await client.sendTransaction(\n credentials,\n Transaction(\n to: EthereumAddress.fromHex('0x...'),\n value: EtherAmount.fromUnitAndValue(EtherUnit.ether, 1),\n ),\n);\n",[358,25130,25131,25155,25159,25164,25183,25200,25204,25208,25213,25235,25253,25258,25265,25285,25312,25317],{"__ignoreMap":356},[711,25132,25133,25135,25138,25140,25143,25145,25148,25150,25153],{"class":713,"line":714},[711,25134,24346],{"class":1370},[711,25136,25137],{"class":717}," client ",[711,25139,887],{"class":1370},[711,25141,25142],{"class":764}," Web3Client",[711,25144,1789],{"class":717},[711,25146,25147],{"class":890},"'https:\u002F\u002Fsepolia.infura.io\u002Fv3\u002FYOUR_KEY'",[711,25149,1077],{"class":717},[711,25151,25152],{"class":764},"Client",[711,25154,20924],{"class":717},[711,25156,25157],{"class":713,"line":521},[711,25158,1114],{"emptyLinePlaceholder":554},[711,25160,25161],{"class":713,"line":529},[711,25162,25163],{"class":10405},"\u002F\u002F Lire un solde\n",[711,25165,25166,25168,25171,25173,25175,25178,25181],{"class":713,"line":906},[711,25167,24346],{"class":1370},[711,25169,25170],{"class":717}," balance ",[711,25172,887],{"class":1370},[711,25174,21445],{"class":1370},[711,25176,25177],{"class":717}," client.",[711,25179,25180],{"class":872},"getBalance",[711,25182,23980],{"class":717},[711,25184,25185,25188,25190,25193,25195,25198],{"class":713,"line":925},[711,25186,25187],{"class":764}," EthereumAddress",[711,25189,831],{"class":717},[711,25191,25192],{"class":872},"fromHex",[711,25194,1789],{"class":717},[711,25196,25197],{"class":890},"'0x...'",[711,25199,8847],{"class":717},[711,25201,25202],{"class":713,"line":950},[711,25203,1804],{"class":717},[711,25205,25206],{"class":713,"line":965},[711,25207,1114],{"emptyLinePlaceholder":554},[711,25209,25210],{"class":713,"line":991},[711,25211,25212],{"class":10405},"\u002F\u002F Envoyer une transaction\n",[711,25214,25215,25217,25220,25222,25225,25227,25229,25231,25233],{"class":713,"line":1001},[711,25216,24346],{"class":1370},[711,25218,25219],{"class":717}," credentials ",[711,25221,887],{"class":1370},[711,25223,25224],{"class":764}," EthPrivateKey",[711,25226,831],{"class":717},[711,25228,25192],{"class":872},[711,25230,1789],{"class":717},[711,25232,25197],{"class":890},[711,25234,1804],{"class":717},[711,25236,25237,25239,25242,25244,25246,25248,25251],{"class":713,"line":1011},[711,25238,24346],{"class":1370},[711,25240,25241],{"class":717}," txHash ",[711,25243,887],{"class":1370},[711,25245,21445],{"class":1370},[711,25247,25177],{"class":717},[711,25249,25250],{"class":872},"sendTransaction",[711,25252,23980],{"class":717},[711,25254,25255],{"class":713,"line":1024},[711,25256,25257],{"class":717}," credentials,\n",[711,25259,25260,25263],{"class":713,"line":556},[711,25261,25262],{"class":764}," Transaction",[711,25264,23980],{"class":717},[711,25266,25267,25270,25272,25275,25277,25279,25281,25283],{"class":713,"line":1046},[711,25268,25269],{"class":717}," to",[711,25271,22343],{"class":1370},[711,25273,25274],{"class":764}," EthereumAddress",[711,25276,831],{"class":717},[711,25278,25192],{"class":872},[711,25280,1789],{"class":717},[711,25282,25197],{"class":890},[711,25284,8847],{"class":717},[711,25286,25287,25290,25292,25295,25297,25300,25302,25305,25308,25310],{"class":713,"line":3317},[711,25288,25289],{"class":717}," value",[711,25291,22343],{"class":1370},[711,25293,25294],{"class":764}," EtherAmount",[711,25296,831],{"class":717},[711,25298,25299],{"class":872},"fromUnitAndValue",[711,25301,1789],{"class":717},[711,25303,25304],{"class":764},"EtherUnit",[711,25306,25307],{"class":717},".ether, ",[711,25309,1935],{"class":764},[711,25311,8847],{"class":717},[711,25313,25314],{"class":713,"line":3574},[711,25315,25316],{"class":717}," ),\n",[711,25318,25319],{"class":713,"line":3595},[711,25320,1804],{"class":717},[21,25322,25323],{},"Attention : pour une application destinée à des utilisateurs finaux, évitez de faire transiter des clés privées dans votre code mobile. Garder une clé dans l'application n'est acceptable que dans des cas très contrôlés, par exemple pour un wallet administratif ou un environnement interne.",[16,25325,25327],{"id":25326},"comment-choisir-la-bonne-approche","Comment choisir la bonne approche",[21,25329,25330],{},"Si vous hésitez, voici une règle simple :",[31,25332,25333,25338,25344],{},[34,25334,25335,25337],{},[260,25336,24714],{}," si l'utilisateur possède déjà son wallet et doit signer lui-même",[34,25339,25340,25343],{},[260,25341,25342],{},"WebView"," si vous avez déjà une dApp web complète à réutiliser",[34,25345,25346,25348],{},[260,25347,24729],{}," si votre besoin est simple, technique et très contrôlé",[21,25350,25351],{},"Dans la majorité des applications sérieuses, WalletConnect est le meilleur point de départ.",[16,25353,25355],{"id":25354},"sécurité-points-critiques","Sécurité - points critiques",[21,25357,25358],{},"Le Web3 attire souvent des erreurs de sécurité très coûteuses. Quelques règles sont indispensables :",[31,25360,25361,25364,25370,25373,25376,25379,25382],{},[34,25362,25363],{},"ne stockez jamais une clé privée en clair",[34,25365,23171,25366,25369],{},[358,25367,25368],{},"flutter_secure_storage"," si vous devez conserver une donnée sensible côté appareil",[34,25371,25372],{},"vérifiez systématiquement la chaîne ciblée avant une transaction",[34,25374,25375],{},"contrôlez l'origine des messages dans une WebView",[34,25377,25378],{},"utilisez un testnet comme Sepolia ou Polygon Amoy avant le mainnet",[34,25380,25381],{},"limitez les montants et les permissions accordées par l'utilisateur",[34,25383,25384],{},"privilégiez des smart contracts audités",[21,25386,25387],{},"La sécurité ne doit pas être traitée comme une étape finale. Elle doit être intégrée dès la conception.",[16,25389,25391],{"id":25390},"un-bon-parcours-utilisateur-web3","Un bon parcours utilisateur Web3",[21,25393,25394],{},"Une intégration réussie ne se limite pas au code. L'expérience utilisateur compte énormément.",[21,25396,25397],{},"Un parcours clair ressemble souvent à ceci :",[60,25399,25400,25403,25406,25409,25412],{},[34,25401,25402],{},"expliquer pourquoi la connexion du wallet est nécessaire",[34,25404,25405],{},"afficher le wallet demandé et le réseau visé",[34,25407,25408],{},"demander la signature uniquement au bon moment",[34,25410,25411],{},"confirmer le succès avec un message lisible",[34,25413,25414],{},"afficher l'état de la transaction jusqu'à sa confirmation",[21,25416,25417],{},"Plus le parcours est transparent, moins l'utilisateur se sent perdu.",[16,25419,23272],{"id":23271},[21,25421,25422,25423,25425],{},"Il n'existe pas une solution unique pour tous les projets Web3 sous Flutter. WalletConnect reste la solution la plus propre pour connecter un portefeuille externe. La WebView sert surtout à réutiliser une application web existante. ",[358,25424,24729],{}," est utile pour des interactions on-chain simples et très contrôlées.",[21,25427,25428],{},"Le bon choix dépend donc de votre produit, de votre niveau de risque et du parcours utilisateur que vous voulez proposer.",[640,25430,25431],{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}",{"title":356,"searchDepth":521,"depth":521,"links":25433},[25434,25435,25436,25437,25438,25439,25440,25441,25442],{"id":24690,"depth":521,"text":24691},{"id":24703,"depth":521,"text":24704},{"id":24736,"depth":521,"text":24737},{"id":24882,"depth":521,"text":24883},{"id":25116,"depth":521,"text":25117},{"id":25326,"depth":521,"text":25327},{"id":25354,"depth":521,"text":25355},{"id":25390,"depth":521,"text":25391},{"id":23271,"depth":521,"text":23272},"Un guide clair pour comprendre comment connecter un portefeuille Web3 dans Flutter avec WalletConnect, une WebView ou une approche native on-chain.",{},"\u002Fblog\u002Fintegration-paiement-web3","2025-01-10",{"title":24685,"description":25443},"blog\u002Fintegration-paiement-web3",[25450,24678,25451,25452],"Web3","Blockchain","Crypto","6H7CQzaTapR17t4zzDLlQHcF8Dj1VeKGGQQbbhItpG0",{"id":25455,"title":25456,"body":25457,"coverImage":550,"description":26286,"extension":552,"meta":26287,"navigation":554,"path":26288,"published":554,"publishedAt":26289,"readTime":1024,"seo":26290,"stem":26291,"tags":26292,"__hash__":26296},"blog\u002Fblog\u002Fnuxt-performance-optimisation.md","Optimiser les performances d'une application Nuxt sans complexifier le projet",{"type":8,"value":25458,"toc":26272},[25459,25463,25466,25469,25472,25492,25496,25499,25502,25528,25531,25535,25542,25631,25634,25657,25660,25664,25667,25748,25754,25768,25771,25775,25778,25814,25820,25885,25888,25902,25905,25909,25912,26005,26008,26022,26029,26032,26036,26039,26107,26110,26128,26131,26135,26138,26141,26155,26158,26162,26165,26168,26185,26204,26207,26211,26214,26233,26236,26238,26241,26258,26261,26263,26266,26269],[16,25460,25462],{"id":25461},"pourquoi-les-performances-comptent","Pourquoi les performances comptent",[21,25464,25465],{},"Une application lente fait perdre des utilisateurs, mais elle fait aussi perdre en visibilité. Les performances influencent directement l'expérience utilisateur et, dans une certaine mesure, le référencement.",[21,25467,25468],{},"Quand une page met trop de temps à s'afficher, l'utilisateur n'attend pas toujours. Il ferme l'onglet, revient en arrière ou se tourne vers un concurrent. L'objectif de l'optimisation n'est donc pas d'obtenir un score artificiel : c'est de rendre l'application réellement plus agréable et plus fiable.",[21,25470,25471],{},"Les métriques à suivre en priorité sont les Core Web Vitals :",[31,25473,25474,25480,25486],{},[34,25475,25476,25479],{},[260,25477,25478],{},"LCP"," : le contenu principal doit apparaître rapidement",[34,25481,25482,25485],{},[260,25483,25484],{},"INP"," : les interactions doivent rester fluides",[34,25487,25488,25491],{},[260,25489,25490],{},"CLS"," : la page ne doit pas bouger de manière imprévisible",[16,25493,25495],{"id":25494},"avant-doptimiser-choisissez-le-bon-mode-de-rendu","Avant d'optimiser, choisissez le bon mode de rendu",[21,25497,25498],{},"Nuxt permet de choisir le mode de rendu route par route. C'est l'un de ses plus gros avantages, car toutes les pages n'ont pas les mêmes besoins.",[21,25500,25501],{},"Quelques repères simples :",[31,25503,25504,25510,25516,25522],{},[34,25505,25506,25509],{},[260,25507,25508],{},"prerender \u002F SSG"," pour les pages très stables comme l'accueil ou les pages marketing",[34,25511,25512,25515],{},[260,25513,25514],{},"SSR"," pour les pages qui doivent afficher des données fraîches dès le premier chargement",[34,25517,25518,25521],{},[260,25519,25520],{},"ISR"," pour les pages qui peuvent être régénérées périodiquement",[34,25523,25524,25527],{},[260,25525,25526],{},"SPA"," pour certaines zones privées ou très interactives",[21,25529,25530],{},"Le plus important est d'éviter une règle unique pour tout le site.",[16,25532,25534],{"id":25533},"_1-choisir-la-bonne-stratégie-de-rendu","1. Choisir la bonne stratégie de rendu",[21,25536,25537,25538,25541],{},"Nuxt propose plusieurs modes selon la nature de vos pages. Définissez-les précisément avec ",[358,25539,25540],{},"routeRules"," pour ne pas rendre tout votre site plus lourd que nécessaire.",[350,25543,25547],{"className":25544,"code":25545,"language":25546,"meta":356,"style":356},"language-typescript shiki shiki-themes github-light github-dark","\u002F\u002F nuxt.config.ts\nexport default defineNuxtConfig({\n routeRules: {\n '\u002F': { prerender: true },\n '\u002Fblog\u002F**': { isr: 3600 },\n '\u002Fdashboard\u002F**': { ssr: false },\n '\u002Fapi\u002F**': { cache: { maxAge: 60 } },\n },\n})\n","typescript",[358,25548,25549,25554,25566,25571,25583,25596,25608,25622,25626],{"__ignoreMap":356},[711,25550,25551],{"class":713,"line":714},[711,25552,25553],{"class":10405},"\u002F\u002F nuxt.config.ts\n",[711,25555,25556,25558,25561,25564],{"class":713,"line":521},[711,25557,21544],{"class":1370},[711,25559,25560],{"class":1370}," default",[711,25562,25563],{"class":872}," defineNuxtConfig",[711,25565,23679],{"class":717},[711,25567,25568],{"class":713,"line":529},[711,25569,25570],{"class":717}," routeRules: {\n",[711,25572,25573,25576,25579,25581],{"class":713,"line":906},[711,25574,25575],{"class":890}," '\u002F'",[711,25577,25578],{"class":717},": { prerender: ",[711,25580,13780],{"class":764},[711,25582,21075],{"class":717},[711,25584,25585,25588,25591,25594],{"class":713,"line":925},[711,25586,25587],{"class":890}," '\u002Fblog\u002F**'",[711,25589,25590],{"class":717},": { isr: ",[711,25592,25593],{"class":764},"3600",[711,25595,21075],{"class":717},[711,25597,25598,25601,25604,25606],{"class":713,"line":950},[711,25599,25600],{"class":890}," '\u002Fdashboard\u002F**'",[711,25602,25603],{"class":717},": { ssr: ",[711,25605,13783],{"class":764},[711,25607,21075],{"class":717},[711,25609,25610,25613,25616,25619],{"class":713,"line":965},[711,25611,25612],{"class":890}," '\u002Fapi\u002F**'",[711,25614,25615],{"class":717},": { cache: { maxAge: ",[711,25617,25618],{"class":764},"60",[711,25620,25621],{"class":717}," } },\n",[711,25623,25624],{"class":713,"line":991},[711,25625,20904],{"class":717},[711,25627,25628],{"class":713,"line":1001},[711,25629,25630],{"class":717},"})\n",[21,25632,25633],{},"En pratique :",[31,25635,25636,25642,25648,25654],{},[34,25637,25638,25641],{},[358,25639,25640],{},"prerender"," convient très bien aux pages statiques",[34,25643,25644,25647],{},[358,25645,25646],{},"isr"," évite de reconstruire tout le site pour une simple mise à jour",[34,25649,25650,25653],{},[358,25651,25652],{},"ssr: false"," peut être utile pour une zone d'administration riche en interactions",[34,25655,25656],{},"le cache API réduit la charge serveur et accélère les réponses répétées",[21,25658,25659],{},"Cette décision initiale a souvent plus d'impact que beaucoup d'autres micro-optimisations.",[16,25661,25663],{"id":25662},"_2-optimiser-les-images-avec-nuxtimage","2. Optimiser les images avec @nuxt\u002Fimage",[21,25665,25666],{},"Les images sont l'une des premières causes de lenteur. Une image trop lourde peut ruiner un bon travail sur le reste de la page.",[350,25668,25672],{"className":25669,"code":25670,"language":25671,"meta":356,"style":356},"language-ts shiki shiki-themes github-light github-dark","const image = {\n src: '\u002Fphoto.jpeg',\n width: 400,\n height: 400,\n format: 'webp',\n loading: 'lazy',\n sizes: 'sm:100vw md:50vw lg:400px',\n}\n","ts",[358,25673,25674,25685,25695,25705,25714,25724,25734,25744],{"__ignoreMap":356},[711,25675,25676,25678,25681,25683],{"class":713,"line":714},[711,25677,12957],{"class":1370},[711,25679,25680],{"class":764}," image",[711,25682,12963],{"class":1370},[711,25684,759],{"class":717},[711,25686,25687,25690,25693],{"class":713,"line":521},[711,25688,25689],{"class":717}," src: ",[711,25691,25692],{"class":890},"'\u002Fphoto.jpeg'",[711,25694,10304],{"class":717},[711,25696,25697,25700,25703],{"class":713,"line":529},[711,25698,25699],{"class":717}," width: ",[711,25701,25702],{"class":764},"400",[711,25704,10304],{"class":717},[711,25706,25707,25710,25712],{"class":713,"line":906},[711,25708,25709],{"class":717}," height: ",[711,25711,25702],{"class":764},[711,25713,10304],{"class":717},[711,25715,25716,25719,25722],{"class":713,"line":925},[711,25717,25718],{"class":717}," format: ",[711,25720,25721],{"class":890},"'webp'",[711,25723,10304],{"class":717},[711,25725,25726,25729,25732],{"class":713,"line":950},[711,25727,25728],{"class":717}," loading: ",[711,25730,25731],{"class":890},"'lazy'",[711,25733,10304],{"class":717},[711,25735,25736,25739,25742],{"class":713,"line":965},[711,25737,25738],{"class":717}," sizes: ",[711,25740,25741],{"class":890},"'sm:100vw md:50vw lg:400px'",[711,25743,10304],{"class":717},[711,25745,25746],{"class":713,"line":991},[711,25747,779],{"class":717},[21,25749,25750,25753],{},[358,25751,25752],{},"@nuxt\u002Fimage"," apporte plusieurs bénéfices à la fois :",[31,25755,25756,25759,25762,25765],{},[34,25757,25758],{},"génération automatique des tailles adaptées",[34,25760,25761],{},"formats modernes comme WebP ou AVIF selon la configuration",[34,25763,25764],{},"chargement différé des images hors écran",[34,25766,25767],{},"réduction du poids transféré au navigateur",[21,25769,25770],{},"Le bon réflexe est simple : ne servez jamais une image plus grande que nécessaire. Une image de 2500 pixels affichée dans un bloc de 400 pixels gaspille du temps et de la bande passante.",[16,25772,25774],{"id":25773},"_3-code-splitting-et-imports-dynamiques","3. Code splitting et imports dynamiques",[21,25776,25777],{},"Plus une page charge de JavaScript, plus elle met du temps à devenir interactive. Il est donc utile de charger certains composants uniquement quand ils sont réellement nécessaires.",[350,25779,25781],{"className":25544,"code":25780,"language":25546,"meta":356,"style":356},"\u002F\u002F Ne charger un composant que quand il est visible\nconst HeavyChart = defineAsyncComponent(() => import('~\u002Fcomponents\u002FHeavyChart.vue'))\n",[358,25782,25783,25788],{"__ignoreMap":356},[711,25784,25785],{"class":713,"line":714},[711,25786,25787],{"class":10405},"\u002F\u002F Ne charger un composant que quand il est visible\n",[711,25789,25790,25792,25795,25797,25800,25802,25804,25807,25809,25812],{"class":713,"line":521},[711,25791,12957],{"class":1370},[711,25793,25794],{"class":764}," HeavyChart",[711,25796,12963],{"class":1370},[711,25798,25799],{"class":872}," defineAsyncComponent",[711,25801,20094],{"class":717},[711,25803,20097],{"class":1370},[711,25805,25806],{"class":1370}," import",[711,25808,1789],{"class":717},[711,25810,25811],{"class":890},"'~\u002Fcomponents\u002FHeavyChart.vue'",[711,25813,9416],{"class":717},[21,25815,25816,25817,24992],{},"Pour les composants utilisés uniquement côté client, combinez cela avec ",[358,25818,25819],{},"ClientOnly",[350,25821,25823],{"className":25669,"code":25822,"language":25671,"meta":356,"style":356},"const HeavyChart = defineAsyncComponent(() => import('~\u002Fcomponents\u002FHeavyChart.vue'))\n\nconst chartStrategy = {\n ssr: false,\n fallback: 'skeleton h-48',\n}\n",[358,25824,25825,25847,25851,25862,25871,25881],{"__ignoreMap":356},[711,25826,25827,25829,25831,25833,25835,25837,25839,25841,25843,25845],{"class":713,"line":714},[711,25828,12957],{"class":1370},[711,25830,25794],{"class":764},[711,25832,12963],{"class":1370},[711,25834,25799],{"class":872},[711,25836,20094],{"class":717},[711,25838,20097],{"class":1370},[711,25840,25806],{"class":1370},[711,25842,1789],{"class":717},[711,25844,25811],{"class":890},[711,25846,9416],{"class":717},[711,25848,25849],{"class":713,"line":521},[711,25850,1114],{"emptyLinePlaceholder":554},[711,25852,25853,25855,25858,25860],{"class":713,"line":529},[711,25854,12957],{"class":1370},[711,25856,25857],{"class":764}," chartStrategy",[711,25859,12963],{"class":1370},[711,25861,759],{"class":717},[711,25863,25864,25867,25869],{"class":713,"line":906},[711,25865,25866],{"class":717}," ssr: ",[711,25868,13783],{"class":764},[711,25870,10304],{"class":717},[711,25872,25873,25876,25879],{"class":713,"line":925},[711,25874,25875],{"class":717}," fallback: ",[711,25877,25878],{"class":890},"'skeleton h-48'",[711,25880,10304],{"class":717},[711,25882,25883],{"class":713,"line":950},[711,25884,779],{"class":717},[21,25886,25887],{},"Cette stratégie est particulièrement utile pour :",[31,25889,25890,25893,25896,25899],{},[34,25891,25892],{},"les graphiques lourds",[34,25894,25895],{},"les éditeurs de texte riches",[34,25897,25898],{},"les cartes interactives",[34,25900,25901],{},"les composants qui dépendent du navigateur",[21,25903,25904],{},"Le but est de ne pas bloquer l'affichage de la page avec du code qui n'est pas indispensable au premier rendu.",[16,25906,25908],{"id":25907},"_4-caching-des-requêtes-serveur","4. Caching des requêtes serveur",[21,25910,25911],{},"Si votre application appelle souvent les mêmes données, le cache peut faire une énorme différence. Inutile de recalculer ou de refetch les mêmes informations à chaque requête si elles changent rarement.",[350,25913,25915],{"className":25544,"code":25914,"language":25546,"meta":356,"style":356},"\u002F\u002F server\u002Fapi\u002Fportfolio.get.ts\nexport default defineCachedEventHandler(async (event) => {\n return await fetchPortfolioData()\n}, {\n maxAge: 60 * 60,\n swr: true,\n getKey: () => 'portfolio',\n})\n",[358,25916,25917,25922,25946,25957,25962,25977,25986,26001],{"__ignoreMap":356},[711,25918,25919],{"class":713,"line":714},[711,25920,25921],{"class":10405},"\u002F\u002F server\u002Fapi\u002Fportfolio.get.ts\n",[711,25923,25924,25926,25928,25931,25933,25935,25937,25940,25942,25944],{"class":713,"line":521},[711,25925,21544],{"class":1370},[711,25927,25560],{"class":1370},[711,25929,25930],{"class":872}," defineCachedEventHandler",[711,25932,1789],{"class":717},[711,25934,21419],{"class":1370},[711,25936,3389],{"class":717},[711,25938,25939],{"class":3203},"event",[711,25941,20768],{"class":717},[711,25943,20097],{"class":1370},[711,25945,759],{"class":717},[711,25947,25948,25950,25952,25955],{"class":713,"line":529},[711,25949,13385],{"class":1370},[711,25951,21445],{"class":1370},[711,25953,25954],{"class":872}," fetchPortfolioData",[711,25956,22494],{"class":717},[711,25958,25959],{"class":713,"line":906},[711,25960,25961],{"class":717},"}, {\n",[711,25963,25964,25967,25969,25972,25975],{"class":713,"line":925},[711,25965,25966],{"class":717}," maxAge: ",[711,25968,25618],{"class":764},[711,25970,25971],{"class":1370}," *",[711,25973,25974],{"class":764}," 60",[711,25976,10304],{"class":717},[711,25978,25979,25982,25984],{"class":713,"line":950},[711,25980,25981],{"class":717}," swr: ",[711,25983,13780],{"class":764},[711,25985,10304],{"class":717},[711,25987,25988,25991,25994,25996,25999],{"class":713,"line":965},[711,25989,25990],{"class":872}," getKey",[711,25992,25993],{"class":717},": () ",[711,25995,20097],{"class":1370},[711,25997,25998],{"class":890}," 'portfolio'",[711,26000,10304],{"class":717},[711,26002,26003],{"class":713,"line":991},[711,26004,25630],{"class":717},[21,26006,26007],{},"Ce pattern est particulièrement intéressant pour :",[31,26009,26010,26013,26016,26019],{},[34,26011,26012],{},"des pages de portfolio",[34,26014,26015],{},"des listes d'articles",[34,26017,26018],{},"des contenus qui changent peu",[34,26020,26021],{},"des réponses d'API coûteuses à produire",[21,26023,26024,26025,26028],{},"Le mode ",[358,26026,26027],{},"stale-while-revalidate"," est très utile, car il permet de servir une version rapide tout en régénérant les données en arrière-plan.",[21,26030,26031],{},"Vous pouvez également cacher côté client quand cela a du sens, mais la première vraie économie de temps se fait souvent côté serveur.",[16,26033,26035],{"id":26034},"_5-payload-et-compression","5. Payload et compression",[21,26037,26038],{},"Nuxt peut aussi vous aider à réduire le poids global de la page générée. Moins vous envoyez de données inutiles, plus le chargement est rapide.",[350,26040,26042],{"className":25544,"code":26041,"language":25546,"meta":356,"style":356},"\u002F\u002F nuxt.config.ts\nexport default defineNuxtConfig({\n nitro: {\n compressPublicAssets: true,\n minify: true,\n },\n experimental: {\n payloadExtraction: true,\n },\n})\n",[358,26043,26044,26048,26058,26063,26072,26081,26085,26090,26099,26103],{"__ignoreMap":356},[711,26045,26046],{"class":713,"line":714},[711,26047,25553],{"class":10405},[711,26049,26050,26052,26054,26056],{"class":713,"line":521},[711,26051,21544],{"class":1370},[711,26053,25560],{"class":1370},[711,26055,25563],{"class":872},[711,26057,23679],{"class":717},[711,26059,26060],{"class":713,"line":529},[711,26061,26062],{"class":717}," nitro: {\n",[711,26064,26065,26068,26070],{"class":713,"line":906},[711,26066,26067],{"class":717}," compressPublicAssets: ",[711,26069,13780],{"class":764},[711,26071,10304],{"class":717},[711,26073,26074,26077,26079],{"class":713,"line":925},[711,26075,26076],{"class":717}," minify: ",[711,26078,13780],{"class":764},[711,26080,10304],{"class":717},[711,26082,26083],{"class":713,"line":950},[711,26084,20904],{"class":717},[711,26086,26087],{"class":713,"line":965},[711,26088,26089],{"class":717}," experimental: {\n",[711,26091,26092,26095,26097],{"class":713,"line":991},[711,26093,26094],{"class":717}," payloadExtraction: ",[711,26096,13780],{"class":764},[711,26098,10304],{"class":717},[711,26100,26101],{"class":713,"line":1001},[711,26102,20904],{"class":717},[711,26104,26105],{"class":713,"line":1011},[711,26106,25630],{"class":717},[21,26108,26109],{},"Quelques bonnes pratiques utiles :",[31,26111,26112,26115,26122,26125],{},[34,26113,26114],{},"limitez les données envoyées au client au strict nécessaire",[34,26116,26117,26118,26121],{},"évitez de surcharger ",[358,26119,26120],{},"useAsyncData"," avec des objets trop volumineux",[34,26123,26124],{},"préférez des réponses API compactes",[34,26126,26127],{},"supprimez les champs que l'interface n'utilise pas",[21,26129,26130],{},"Si vous envoyez moins de données, vous gagnez à la fois en temps réseau et en temps de traitement JavaScript.",[16,26132,26134],{"id":26133},"_6-réduire-le-travail-du-navigateur","6. Réduire le travail du navigateur",[21,26136,26137],{},"Optimiser Nuxt, ce n'est pas seulement réduire le poids du HTML. C'est aussi faire en sorte que le navigateur ait moins de travail à faire après le chargement.",[21,26139,26140],{},"Quelques leviers simples :",[31,26142,26143,26146,26149,26152],{},[34,26144,26145],{},"évitez de multiplier les états locaux inutiles",[34,26147,26148],{},"ne chargez pas de librairies lourdes pour un usage marginal",[34,26150,26151],{},"préférez des composants simples quand un composant complexe n'apporte rien",[34,26153,26154],{},"gardez les calculs coûteux hors du cycle de rendu si possible",[21,26156,26157],{},"Une page plus simple est souvent une page plus rapide.",[16,26159,26161],{"id":26160},"_7-mesurer-avec-lighthouse","7. Mesurer avec Lighthouse",[21,26163,26164],{},"Avant d'optimiser, mesurez. Sans mesure, vous risquez d'améliorer une chose invisible et de laisser le vrai problème intact.",[21,26166,26167],{},"Les indicateurs à surveiller :",[31,26169,26170,26175,26180],{},[34,26171,26172,26174],{},[260,26173,25478],{}," : le plus grand élément visible doit arriver rapidement",[34,26176,26177,26179],{},[260,26178,25484],{}," : la réactivité doit rester bonne",[34,26181,26182,26184],{},[260,26183,25490],{}," (Cumulative Layout Shift) : \u003C 0,1",[350,26186,26188],{"className":10073,"code":26187,"language":10075,"meta":356,"style":356},"npx unlighthouse --site https:\u002F\u002Fmonsite.com\n",[358,26189,26190],{"__ignoreMap":356},[711,26191,26192,26195,26198,26201],{"class":713,"line":714},[711,26193,26194],{"class":872},"npx",[711,26196,26197],{"class":890}," unlighthouse",[711,26199,26200],{"class":764}," --site",[711,26202,26203],{"class":890}," https:\u002F\u002Fmonsite.com\n",[21,26205,26206],{},"Vous pouvez aussi utiliser Lighthouse, les DevTools du navigateur et les logs serveur pour comprendre où part le temps.",[16,26208,26210],{"id":26209},"une-méthode-simple-pour-prioriser-les-optimisations","Une méthode simple pour prioriser les optimisations",[21,26212,26213],{},"Si vous ne savez pas par où commencer, avancez dans cet ordre :",[60,26215,26216,26221,26224,26227,26230],{},[34,26217,26218,26219],{},"choisir le bon mode de rendu avec ",[358,26220,25540],{},[34,26222,26223],{},"compresser et alléger les images",[34,26225,26226],{},"réduire le JavaScript chargé au premier affichage",[34,26228,26229],{},"mettre en cache les réponses répétées",[34,26231,26232],{},"mesurer à nouveau pour vérifier le gain réel",[21,26234,26235],{},"Cette méthode permet d'obtenir des résultats visibles sans disperser l'effort.",[16,26237,24621],{"id":24620},[21,26239,26240],{},"Voici les pièges les plus courants :",[31,26242,26243,26246,26249,26252,26255],{},[34,26244,26245],{},"tout rendre en SSR sans réfléchir",[34,26247,26248],{},"charger des images trop lourdes",[34,26250,26251],{},"utiliser trop de composants client-only",[34,26253,26254],{},"oublier le cache sur des données statiques",[34,26256,26257],{},"optimiser sans mesurer",[21,26259,26260],{},"La performance n'est pas un geste isolé. C'est une suite de petites décisions cohérentes.",[16,26262,23272],{"id":23271},[21,26264,26265],{},"L'optimisation d'une application Nuxt doit rester pragmatique. Commencez par le mode de rendu, allégez les images, chargez moins de JavaScript et mettez en cache ce qui peut l'être.",[21,26267,26268],{},"Si vous mesurez après chaque changement, vous saurez exactement ce qui améliore vraiment l'expérience utilisateur. C'est cette discipline qui permet d'avoir une application rapide, propre et durable.",[640,26270,26271],{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":356,"searchDepth":521,"depth":521,"links":26273},[26274,26275,26276,26277,26278,26279,26280,26281,26282,26283,26284,26285],{"id":25461,"depth":521,"text":25462},{"id":25494,"depth":521,"text":25495},{"id":25533,"depth":521,"text":25534},{"id":25662,"depth":521,"text":25663},{"id":25773,"depth":521,"text":25774},{"id":25907,"depth":521,"text":25908},{"id":26034,"depth":521,"text":26035},{"id":26133,"depth":521,"text":26134},{"id":26160,"depth":521,"text":26161},{"id":26209,"depth":521,"text":26210},{"id":24620,"depth":521,"text":24621},{"id":23271,"depth":521,"text":23272},"Un guide pratique pour améliorer les Core Web Vitals d'une application Nuxt avec le bon rendu, des images optimisées, du cache et un chargement plus léger.",{},"\u002Fblog\u002Fnuxt-performance-optimisation","2024-12-05",{"title":25456,"description":26286},"blog\u002Fnuxt-performance-optimisation",[26293,26294,26295,5086],"Nuxt","Vue.js","Performance","Uy80pOh8vB8BN8kaBHhD3ImH5zdbzNBr1BCMtAWgm44",1788219650533]