[{"data":1,"prerenderedAt":833},["ShallowReactive",2],{"blog-decouvrir-javascript":3},{"id":4,"title":5,"body":6,"coverImage":819,"description":820,"extension":821,"meta":822,"navigation":823,"path":824,"published":823,"publishedAt":825,"readTime":826,"seo":827,"stem":828,"tags":829,"__hash__":832},"blog\u002Fblog\u002Fdecouvrir-javaScript.md","Découvrir JavaScript",{"type":7,"value":8,"toc":773},"minimark",[9,13,18,22,35,39,42,67,71,74,79,82,125,128,132,135,170,173,177,180,197,201,204,221,225,229,232,236,239,243,247,250,276,280,283,287,290,304,308,311,331,335,338,356,359,364,369,374,379,384,387,391,394,400,404,448,451,459,463,467,470,484,487,503,507,509,519,521,537,541,543,561,563,579,583,586,608,612,616,619,623,626,630,633,637,640,646,650,654,672,676,694,698,740,744,762,766,769],[10,11,5],"h1",{"id":12},"découvrir-javascript",[14,15,17],"h2",{"id":16},"introduction","Introduction",[19,20,21],"p",{},"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 :",[23,24,25,29,32],"ul",{},[26,27,28],"li",{},"HTML pour structurer le contenu ;",[26,30,31],{},"CSS pour gérer l'apparence ;",[26,33,34],{},"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.",[14,36,38],{"id":37},"ce-que-vous-allez-apprendre","Ce que vous allez apprendre",[19,40,41],{},"À la fin de ce chapitre, vous saurez :",[23,43,44,47,50,53,61,64],{},[26,45,46],{},"expliquer à quoi sert JavaScript ;",[26,48,49],{},"faire la différence entre HTML, CSS et JavaScript ;",[26,51,52],{},"ouvrir la console du navigateur ;",[26,54,55,56,60],{},"écrire et lire une instruction simple avec ",[57,58,59],"code",{},"console.log()"," ;",[26,62,63],{},"repérer les erreurs les plus fréquentes ;",[26,65,66],{},"créer vos premiers petits programmes.",[14,68,70],{"id":69},"_1-html-css-et-javascript-qui-fait-quoi","1. HTML, CSS et JavaScript : qui fait quoi ?",[19,72,73],{},"Pour comprendre JavaScript, imaginons une page web comme une maison.",[75,76,78],"h3",{"id":77},"html-la-structure","HTML : la structure",[19,80,81],{},"Le HTML correspond à la structure de la maison : les murs, les portes, les fenêtres.\nExemple :",[83,84,89],"pre",{"className":85,"code":86,"language":87,"meta":88,"style":88},"language-html shiki shiki-themes github-light github-dark","\u003Ch1>Bienvenue\u003C\u002Fh1>\n\u003Cp>Mon premier site web.\u003C\u002Fp>\n","html","",[57,90,91,111],{"__ignoreMap":88},[92,93,96,100,103,106,108],"span",{"class":94,"line":95},"line",1,[92,97,99],{"class":98},"sVt8B","\u003C",[92,101,10],{"class":102},"s9eBZ",[92,104,105],{"class":98},">Bienvenue\u003C\u002F",[92,107,10],{"class":102},[92,109,110],{"class":98},">\n",[92,112,114,116,118,121,123],{"class":94,"line":113},2,[92,115,99],{"class":98},[92,117,19],{"class":102},[92,119,120],{"class":98},">Mon premier site web.\u003C\u002F",[92,122,19],{"class":102},[92,124,110],{"class":98},[19,126,127],{},"Ici, le navigateur comprend qu'il doit afficher un titre et un paragraphe.",[75,129,131],{"id":130},"css-lapparence","CSS : l'apparence",[19,133,134],{},"Le CSS correspond à la décoration : les couleurs, les tailles, les espacements.\nExemple :",[83,136,140],{"className":137,"code":138,"language":139,"meta":88,"style":88},"language-css shiki shiki-themes github-light github-dark","h1 {\n  color: blue;\n}\n","css",[57,141,142,149,164],{"__ignoreMap":88},[92,143,144,146],{"class":94,"line":95},[92,145,10],{"class":102},[92,147,148],{"class":98}," {\n",[92,150,151,155,158,161],{"class":94,"line":113},[92,152,154],{"class":153},"sj4cs","  color",[92,156,157],{"class":98},": ",[92,159,160],{"class":153},"blue",[92,162,163],{"class":98},";\n",[92,165,167],{"class":94,"line":166},3,[92,168,169],{"class":98},"}\n",[19,171,172],{},"Le titre devient bleu.",[75,174,176],{"id":175},"javascript-le-comportement","JavaScript : le comportement",[19,178,179],{},"JavaScript correspond aux mécanismes qui font vivre la maison.\nIl permet par exemple de :",[23,181,182,185,188,191,194],{},[26,183,184],{},"ouvrir un menu ;",[26,186,187],{},"afficher un message ;",[26,189,190],{},"vérifier un formulaire ;",[26,192,193],{},"charger des données ;",[26,195,196],{},"modifier le contenu d'une page.\nSans JavaScript, une page reste surtout statique.",[14,198,200],{"id":199},"_2-quest-ce-que-javascript","2. Qu'est-ce que JavaScript ?",[19,202,203],{},"JavaScript est un langage de programmation créé à l'origine pour ajouter de l'interactivité dans les navigateurs.\nAujourd'hui, il sert aussi à créer :",[23,205,206,209,212,215,218],{},[26,207,208],{},"des applications web ;",[26,210,211],{},"des applications mobiles ;",[26,213,214],{},"des applications desktop ;",[26,216,217],{},"des serveurs ;",[26,219,220],{},"des outils de développement.\nC'est un langage très polyvalent.",[14,222,224],{"id":223},"_3-où-javascript-sexécute-t-il","3. Où JavaScript s'exécute-t-il ?",[75,226,228],{"id":227},"dans-le-navigateur","Dans le navigateur",[19,230,231],{},"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.",[75,233,235],{"id":234},"sur-un-serveur","Sur un serveur",[19,237,238],{},"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.",[14,240,242],{"id":241},"_4-pourquoi-apprendre-javascript","4. Pourquoi apprendre JavaScript ?",[75,244,246],{"id":245},"il-est-accessible","Il est accessible",[19,248,249],{},"Quelques lignes suffisent pour voir un résultat.",[83,251,255],{"className":252,"code":253,"language":254,"meta":88,"style":88},"language-js shiki shiki-themes github-light github-dark","console.log(\"Bonjour\");\n","js",[57,256,257],{"__ignoreMap":88},[92,258,259,262,266,269,273],{"class":94,"line":95},[92,260,261],{"class":98},"console.",[92,263,265],{"class":264},"sScJk","log",[92,267,268],{"class":98},"(",[92,270,272],{"class":271},"sZZnC","\"Bonjour\"",[92,274,275],{"class":98},");\n",[75,277,279],{"id":278},"il-est-très-demandé","Il est très demandé",[19,281,282],{},"JavaScript est utilisé dans énormément de projets web.",[75,284,286],{"id":285},"il-possède-une-grande-communauté","Il possède une grande communauté",[19,288,289],{},"Vous trouverez facilement :",[23,291,292,295,298,301],{},[26,293,294],{},"des tutoriels ;",[26,296,297],{},"des bibliothèques ;",[26,299,300],{},"des exemples ;",[26,302,303],{},"de l'aide en ligne.",[14,305,307],{"id":306},"_5-ouvrir-la-console-du-navigateur","5. Ouvrir la console du navigateur",[19,309,310],{},"La console est un outil très pratique pour tester du code.\nPour l'ouvrir :",[23,312,313,316,319,322,325,328],{},[26,314,315],{},"faites un clic droit sur la page ;",[26,317,318],{},"cliquez sur Inspecter ;",[26,320,321],{},"ouvrez l'onglet Console.\nLa console sert à :",[26,323,324],{},"afficher des informations ;",[26,326,327],{},"tester une instruction ;",[26,329,330],{},"repérer des erreurs.",[14,332,334],{"id":333},"_6-votre-première-instruction-javascript","6. Votre première instruction JavaScript",[19,336,337],{},"Écrivons notre premier programme :",[83,339,341],{"className":252,"code":340,"language":254,"meta":88,"style":88},"console.log(\"Bonjour tout le monde !\");\n",[57,342,343],{"__ignoreMap":88},[92,344,345,347,349,351,354],{"class":94,"line":95},[92,346,261],{"class":98},[92,348,265],{"class":264},[92,350,268],{"class":98},[92,352,353],{"class":271},"\"Bonjour tout le monde !\"",[92,355,275],{"class":98},[19,357,358],{},"Cette ligne demande au navigateur d'afficher un message dans la console.",[75,360,362],{"id":361},"console",[57,363,361],{},[19,365,366,368],{},[57,367,361],{}," est un objet fourni par le navigateur.",[75,370,371],{"id":265},[57,372,373],{},"log()",[19,375,376,378],{},[57,377,373],{}," est une méthode qui affiche une valeur.",[75,380,382],{"id":381},"bonjour-tout-le-monde",[57,383,353],{},[19,385,386],{},"Ceci est une chaîne de caractères, c'est-à-dire du texte.",[14,388,390],{"id":389},"_7-comment-lire-cette-instruction","7. Comment lire cette instruction ?",[19,392,393],{},"On peut la lire ainsi :",[395,396,397],"blockquote",{},[19,398,399],{},"Affiche dans la console le texte \"Bonjour tout le monde !\".",[14,401,403],{"id":402},"_8-quelques-exemples-supplémentaires","8. Quelques exemples supplémentaires",[83,405,407],{"className":252,"code":406,"language":254,"meta":88,"style":88},"console.log(\"Je m'appelle Corneille\");\nconsole.log(\"J'apprends JavaScript\");\nconsole.log(\"Je vais progresser étape par étape\");\n",[57,408,409,422,435],{"__ignoreMap":88},[92,410,411,413,415,417,420],{"class":94,"line":95},[92,412,261],{"class":98},[92,414,265],{"class":264},[92,416,268],{"class":98},[92,418,419],{"class":271},"\"Je m'appelle Corneille\"",[92,421,275],{"class":98},[92,423,424,426,428,430,433],{"class":94,"line":113},[92,425,261],{"class":98},[92,427,265],{"class":264},[92,429,268],{"class":98},[92,431,432],{"class":271},"\"J'apprends JavaScript\"",[92,434,275],{"class":98},[92,436,437,439,441,443,446],{"class":94,"line":166},[92,438,261],{"class":98},[92,440,265],{"class":264},[92,442,268],{"class":98},[92,444,445],{"class":271},"\"Je vais progresser étape par étape\"",[92,447,275],{"class":98},[19,449,450],{},"Résultat :",[83,452,457],{"className":453,"code":455,"language":456,"meta":88},[454],"language-text","Je m'appelle Corneille\nJ'apprends JavaScript\nJe vais progresser étape par étape\n","text",[57,458,455],{"__ignoreMap":88},[14,460,462],{"id":461},"_9-erreurs-fréquentes","9. Erreurs fréquentes",[75,464,466],{"id":465},"oublier-les-guillemets","Oublier les guillemets",[19,468,469],{},"Incorrect :",[83,471,473],{"className":252,"code":472,"language":254,"meta":88,"style":88},"console.log(Bonjour);\n",[57,474,475],{"__ignoreMap":88},[92,476,477,479,481],{"class":94,"line":95},[92,478,261],{"class":98},[92,480,265],{"class":264},[92,482,483],{"class":98},"(Bonjour);\n",[19,485,486],{},"Correct :",[83,488,489],{"className":252,"code":253,"language":254,"meta":88,"style":88},[57,490,491],{"__ignoreMap":88},[92,492,493,495,497,499,501],{"class":94,"line":95},[92,494,261],{"class":98},[92,496,265],{"class":264},[92,498,268],{"class":98},[92,500,272],{"class":271},[92,502,275],{"class":98},[75,504,506],{"id":505},"oublier-une-parenthèse","Oublier une parenthèse",[19,508,469],{},[83,510,512],{"className":252,"code":511,"language":254,"meta":88,"style":88},"\u002F\u002F console.log(\"Bonjour\";\n",[57,513,514],{"__ignoreMap":88},[92,515,516],{"class":94,"line":95},[92,517,511],{"class":518},"sJ8bj",[19,520,486],{},[83,522,523],{"className":252,"code":253,"language":254,"meta":88,"style":88},[57,524,525],{"__ignoreMap":88},[92,526,527,529,531,533,535],{"class":94,"line":95},[92,528,261],{"class":98},[92,530,265],{"class":264},[92,532,268],{"class":98},[92,534,272],{"class":271},[92,536,275],{"class":98},[75,538,540],{"id":539},"se-tromper-dans-le-nom-de-la-fonction","Se tromper dans le nom de la fonction",[19,542,469],{},[83,544,546],{"className":252,"code":545,"language":254,"meta":88,"style":88},"Console.log(\"Bonjour\");\n",[57,547,548],{"__ignoreMap":88},[92,549,550,553,555,557,559],{"class":94,"line":95},[92,551,552],{"class":98},"Console.",[92,554,265],{"class":264},[92,556,268],{"class":98},[92,558,272],{"class":271},[92,560,275],{"class":98},[19,562,486],{},[83,564,565],{"className":252,"code":253,"language":254,"meta":88,"style":88},[57,566,567],{"__ignoreMap":88},[92,568,569,571,573,575,577],{"class":94,"line":95},[92,570,261],{"class":98},[92,572,265],{"class":264},[92,574,268],{"class":98},[92,576,272],{"class":271},[92,578,275],{"class":98},[14,580,582],{"id":581},"_10-résumé","10. Résumé",[19,584,585],{},"Dans ce chapitre, nous avons vu :",[23,587,588,591,594,597,600,605],{},[26,589,590],{},"le rôle de JavaScript ;",[26,592,593],{},"la différence entre HTML, CSS et JavaScript ;",[26,595,596],{},"l'endroit où JavaScript s'exécute ;",[26,598,599],{},"l'utilisation de la console ;",[26,601,602,603,60],{},"la première instruction ",[57,604,59],{},[26,606,607],{},"les erreurs les plus courantes.",[14,609,611],{"id":610},"exercices","Exercices",[75,613,615],{"id":614},"exercice-1","Exercice 1",[19,617,618],{},"Affichez votre prénom dans la console.",[75,620,622],{"id":621},"exercice-2","Exercice 2",[19,624,625],{},"Affichez votre âge dans la console.",[75,627,629],{"id":628},"exercice-3","Exercice 3",[19,631,632],{},"Affichez trois messages différents dans la console.",[75,634,636],{"id":635},"exercice-4","Exercice 4",[19,638,639],{},"Affichez une phrase complète vous présentant.\nExemple :",[83,641,644],{"className":642,"code":643,"language":456,"meta":88},[454],"Je m'appelle Alice et j'apprends JavaScript.\n",[57,645,643],{"__ignoreMap":88},[14,647,649],{"id":648},"corrigés","Corrigés",[75,651,653],{"id":652},"correction-exercice-1","Correction exercice 1",[83,655,657],{"className":252,"code":656,"language":254,"meta":88,"style":88},"console.log(\"Corneille\");\n",[57,658,659],{"__ignoreMap":88},[92,660,661,663,665,667,670],{"class":94,"line":95},[92,662,261],{"class":98},[92,664,265],{"class":264},[92,666,268],{"class":98},[92,668,669],{"class":271},"\"Corneille\"",[92,671,275],{"class":98},[75,673,675],{"id":674},"correction-exercice-2","Correction exercice 2",[83,677,679],{"className":252,"code":678,"language":254,"meta":88,"style":88},"console.log(24);\n",[57,680,681],{"__ignoreMap":88},[92,682,683,685,687,689,692],{"class":94,"line":95},[92,684,261],{"class":98},[92,686,265],{"class":264},[92,688,268],{"class":98},[92,690,691],{"class":153},"24",[92,693,275],{"class":98},[75,695,697],{"id":696},"correction-exercice-3","Correction exercice 3",[83,699,701],{"className":252,"code":700,"language":254,"meta":88,"style":88},"console.log(\"Bonjour\");\nconsole.log(\"Comment allez-vous ?\");\nconsole.log(\"J'apprends JavaScript\");\n",[57,702,703,715,728],{"__ignoreMap":88},[92,704,705,707,709,711,713],{"class":94,"line":95},[92,706,261],{"class":98},[92,708,265],{"class":264},[92,710,268],{"class":98},[92,712,272],{"class":271},[92,714,275],{"class":98},[92,716,717,719,721,723,726],{"class":94,"line":113},[92,718,261],{"class":98},[92,720,265],{"class":264},[92,722,268],{"class":98},[92,724,725],{"class":271},"\"Comment allez-vous ?\"",[92,727,275],{"class":98},[92,729,730,732,734,736,738],{"class":94,"line":166},[92,731,261],{"class":98},[92,733,265],{"class":264},[92,735,268],{"class":98},[92,737,432],{"class":271},[92,739,275],{"class":98},[75,741,743],{"id":742},"correction-exercice-4","Correction exercice 4",[83,745,747],{"className":252,"code":746,"language":254,"meta":88,"style":88},"console.log(\"Je m'appelle Corneille et j'apprends JavaScript.\");\n",[57,748,749],{"__ignoreMap":88},[92,750,751,753,755,757,760],{"class":94,"line":95},[92,752,261],{"class":98},[92,754,265],{"class":264},[92,756,268],{"class":98},[92,758,759],{"class":271},"\"Je m'appelle Corneille et j'apprends JavaScript.\"",[92,761,275],{"class":98},[14,763,765],{"id":764},"prochaine-étape","Prochaine étape",[19,767,768],{},"Dans le prochain chapitre, nous apprendrons à stocker des informations dans des variables.",[770,771,772],"style",{},"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":88,"searchDepth":113,"depth":113,"links":774},[775,776,777,782,783,787,792,793,798,799,800,805,806,812,818],{"id":16,"depth":113,"text":17},{"id":37,"depth":113,"text":38},{"id":69,"depth":113,"text":70,"children":778},[779,780,781],{"id":77,"depth":166,"text":78},{"id":130,"depth":166,"text":131},{"id":175,"depth":166,"text":176},{"id":199,"depth":113,"text":200},{"id":223,"depth":113,"text":224,"children":784},[785,786],{"id":227,"depth":166,"text":228},{"id":234,"depth":166,"text":235},{"id":241,"depth":113,"text":242,"children":788},[789,790,791],{"id":245,"depth":166,"text":246},{"id":278,"depth":166,"text":279},{"id":285,"depth":166,"text":286},{"id":306,"depth":113,"text":307},{"id":333,"depth":113,"text":334,"children":794},[795,796,797],{"id":361,"depth":166,"text":361},{"id":265,"depth":166,"text":373},{"id":381,"depth":166,"text":353},{"id":389,"depth":113,"text":390},{"id":402,"depth":113,"text":403},{"id":461,"depth":113,"text":462,"children":801},[802,803,804],{"id":465,"depth":166,"text":466},{"id":505,"depth":166,"text":506},{"id":539,"depth":166,"text":540},{"id":581,"depth":113,"text":582},{"id":610,"depth":113,"text":611,"children":807},[808,809,810,811],{"id":614,"depth":166,"text":615},{"id":621,"depth":166,"text":622},{"id":628,"depth":166,"text":629},{"id":635,"depth":166,"text":636},{"id":648,"depth":113,"text":649,"children":813},[814,815,816,817],{"id":652,"depth":166,"text":653},{"id":674,"depth":166,"text":675},{"id":696,"depth":166,"text":697},{"id":742,"depth":166,"text":743},{"id":764,"depth":113,"text":765},null,"Comprendre ce qu'est JavaScript, à quoi il sert et comment écrire ses premières lignes de code dans un navigateur.","md",{},true,"\u002Fblog\u002Fdecouvrir-javascript","2026-06-01",10,{"title":5,"description":820},"blog\u002Fdecouvrir-javaScript",[830,831],"JavaScript","Débutant","H5uHvyTJ3t8uiuE7ldyWrzE8sGH6CeRZ3ddqrGwaudE",1788219651468]