[{"data":1,"prerenderedAt":914},["ShallowReactive",2],{"page-\u002Fjs\u002Fpremiers-pas":3,"pieces-js":870,"autour-\u002Fjs\u002Fpremiers-pas":895,"prerequis-\u002Fjs\u002Fpremiers-pas":900,"plan-js":903},{"id":4,"title":5,"body":6,"description":841,"extension":842,"ligne":81,"meta":843,"motsCles":844,"navigation":268,"niveau":847,"path":848,"prerequis":849,"ressources":851,"seo":863,"sources":864,"stem":868,"__hash__":869},"docs\u002Fjs\u002F01.premiers-pas.md","Premiers pas en JavaScript",{"type":7,"value":8,"toc":830},"minimark",[9,14,42,46,54,61,65,76,108,114,118,121,174,193,200,221,225,232,291,299,358,367,381,385,403,414,418,429,511,606,609,628,632,643,697,713,719,768,774,778,826],[10,11,13],"h2",{"id":12},"ce-que-tu-vas-apprendre","Ce que tu vas apprendre",[15,16,17,21,33],"ul",{},[18,19,20],"li",{},"Où JavaScript s'exécute et comment lancer tes premières lignes.",[18,22,23,24,28,29,32],{},"Déclarer des variables avec ",[25,26,27],"code",{},"let"," et ",[25,30,31],{},"const",".",[18,34,35,36,28,39,32],{},"Reconnaître les types de valeurs : texte, nombre, booléen, ",[25,37,38],{},"null",[25,40,41],{},"undefined",[10,43,45],{"id":44},"où-sexécute-javascript","Où s'exécute JavaScript",[47,48,49,53],"p",{},[50,51,52],"strong",{},"JavaScript"," est un langage de programmation. Dans une page web, il ajoute du comportement au HTML : réagir à un clic, modifier un texte, charger des données.",[47,55,56,57,60],{},"Il s'exécute dans le navigateur, qui contient un moteur capable de le lire. Hors du navigateur, ",[50,58,59],{},"Node.js"," exécute aussi du JavaScript, par exemple sur un serveur.",[10,62,64],{"id":63},"ta-première-ligne-dans-la-console","Ta première ligne dans la console",[47,66,67,68,71,72,75],{},"La ",[50,69,70],{},"console"," est un outil du navigateur où tu tapes du code et lis les messages. Ouvre n'importe quelle page, appuie sur ",[25,73,74],{},"F12",", puis choisis l'onglet « Console ».",[77,78,83],"pre",{"className":79,"code":80,"language":81,"meta":82,"style":82},"language-js shiki shiki-themes github-light-default github-dark-default github-dark-default","console.log('Bonjour, cuisine !')\n","js","",[25,84,85],{"__ignoreMap":82},[86,87,90,94,98,101,105],"span",{"class":88,"line":89},"line",1,[86,91,93],{"class":92},"scfrF","console.",[86,95,97],{"class":96},"syCW7","log",[86,99,100],{"class":92},"(",[86,102,104],{"class":103},"shWOn","'Bonjour, cuisine !'",[86,106,107],{"class":92},")\n",[47,109,110,113],{},[25,111,112],{},"console.log"," affiche ce que tu lui donnes. C'est l'outil de base pour comprendre ce que fait ton code.",[10,115,117],{"id":116},"un-script-dans-une-page","Un script dans une page",[47,119,120],{},"Pour que le code vive avec ta page, relie un fichier JavaScript à ton HTML.",[77,122,127],{"className":123,"code":124,"filename":125,"language":126,"meta":82,"style":82},"language-html shiki shiki-themes github-light-default github-dark-default github-dark-default","\u003Ch1>Mes recettes\u003C\u002Fh1>\n\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>\n","index.html","html",[25,128,129,146],{"__ignoreMap":82},[86,130,131,134,138,141,143],{"class":88,"line":89},[86,132,133],{"class":92},"\u003C",[86,135,137],{"class":136},"s5JFL","h1",[86,139,140],{"class":92},">Mes recettes\u003C\u002F",[86,142,137],{"class":136},[86,144,145],{"class":92},">\n",[86,147,149,151,154,158,161,164,167,170,172],{"class":88,"line":148},2,[86,150,133],{"class":92},[86,152,153],{"class":136},"script",[86,155,157],{"class":156},"s5iOY"," src",[86,159,160],{"class":92},"=",[86,162,163],{"class":103},"\"script.js\"",[86,165,166],{"class":156}," defer",[86,168,169],{"class":92},">\u003C\u002F",[86,171,153],{"class":136},[86,173,145],{"class":92},[77,175,178],{"className":79,"code":176,"filename":177,"language":81,"meta":82,"style":82},"console.log('La page est prête')\n","script.js",[25,179,180],{"__ignoreMap":82},[86,181,182,184,186,188,191],{"class":88,"line":89},[86,183,93],{"class":92},[86,185,97],{"class":96},[86,187,100],{"class":92},[86,189,190],{"class":103},"'La page est prête'",[86,192,107],{"class":92},[47,194,195,196,199],{},"L'attribut ",[25,197,198],{},"defer"," demande au navigateur d'exécuter le script une fois la page lue. Ton code peut alors trouver les éléments HTML qui existent déjà.",[201,202,203],"tip",{},[47,204,205,206,209,210,213,214,216,217,220],{},"Place la balise ",[25,207,208],{},"\u003Cscript>"," dans le ",[25,211,212],{},"\u003Chead>"," avec ",[25,215,198],{},", ou à la fin du ",[25,218,219],{},"\u003Cbody>",". Dans les deux cas, le HTML est lu avant ton code.",[10,222,224],{"id":223},"les-variables-let-et-const","Les variables : let et const",[47,226,227,228,231],{},"Une ",[50,229,230],{},"variable"," est un nom qui retient une valeur. On la déclare avec un mot-clé.",[77,233,235],{"className":79,"code":234,"language":81,"meta":82,"style":82},"const titre = 'Tarte aux pommes'\nlet portions = 4\n\nportions = 6\nconsole.log(titre, portions)\n",[25,236,237,251,263,270,281],{"__ignoreMap":82},[86,238,239,242,245,248],{"class":88,"line":89},[86,240,31],{"class":241},"sOnC1",[86,243,244],{"class":156}," titre",[86,246,247],{"class":241}," =",[86,249,250],{"class":103}," 'Tarte aux pommes'\n",[86,252,253,255,258,260],{"class":88,"line":148},[86,254,27],{"class":241},[86,256,257],{"class":92}," portions ",[86,259,160],{"class":241},[86,261,262],{"class":156}," 4\n",[86,264,266],{"class":88,"line":265},3,[86,267,269],{"emptyLinePlaceholder":268},true,"\n",[86,271,273,276,278],{"class":88,"line":272},4,[86,274,275],{"class":92},"portions ",[86,277,160],{"class":241},[86,279,280],{"class":156}," 6\n",[86,282,284,286,288],{"class":88,"line":283},5,[86,285,93],{"class":92},[86,287,97],{"class":96},[86,289,290],{"class":92},"(titre, portions)\n",[47,292,293,295,296,298],{},[25,294,31],{}," crée une variable qu'on ne peut plus réaffecter. ",[25,297,27],{}," crée une variable qu'on peut modifier plus tard.",[300,301,302,318],"table",{},[303,304,305],"thead",{},[306,307,308,312,315],"tr",{},[309,310,311],"th",{},"Mot-clé",[309,313,314],{},"Réaffectation",[309,316,317],{},"Quand l'utiliser",[319,320,321,334,346],"tbody",{},[306,322,323,328,331],{},[324,325,326],"td",{},[25,327,31],{},[324,329,330],{},"Interdite",[324,332,333],{},"Par défaut.",[306,335,336,340,343],{},[324,337,338],{},[25,339,27],{},[324,341,342],{},"Autorisée",[324,344,345],{},"Quand la valeur doit changer.",[306,347,348,353,355],{},[324,349,350],{},[25,351,352],{},"var",[324,354,342],{},[324,356,357],{},"Ancienne forme, à éviter.",[47,359,360,361,363,364,366],{},"Commence toujours par ",[25,362,31],{},". Passe à ",[25,365,27],{}," seulement si tu en as besoin.",[368,369,370],"note",{},[47,371,372,373,375,376,28,378,380],{},"Tu verras ",[25,374,352],{}," dans de vieux tutoriels. Ses règles de portée surprennent, c'est pourquoi on utilise ",[25,377,27],{},[25,379,31],{}," aujourd'hui.",[10,382,384],{"id":383},"nommer-ses-variables","Nommer ses variables",[47,386,387,388,391,392,395,396,28,399,402],{},"Un nom commence par une lettre, ",[25,389,390],{},"_"," ou ",[25,393,394],{},"$",", sans espace. JavaScript distingue les majuscules des minuscules : ",[25,397,398],{},"titre",[25,400,401],{},"Titre"," sont deux variables différentes.",[47,404,405,406,409,410,413],{},"Par convention, on écrit en ",[50,407,408],{},"camelCase"," : ",[25,411,412],{},"nombreDePortions",". Choisis un nom qui dit ce que contient la variable.",[10,415,417],{"id":416},"les-types-de-valeurs","Les types de valeurs",[47,419,420,421,424,425,428],{},"Chaque valeur a un ",[50,422,423],{},"type",". L'opérateur ",[25,426,427],{},"typeof"," le donne.",[77,430,432],{"className":79,"code":431,"language":81,"meta":82,"style":82},"console.log(typeof 'sel')        \u002F\u002F \"string\"\nconsole.log(typeof 250)          \u002F\u002F \"number\"\nconsole.log(typeof true)         \u002F\u002F \"boolean\"\nconsole.log(typeof undefined)    \u002F\u002F \"undefined\"\n",[25,433,434,454,473,492],{"__ignoreMap":82},[86,435,436,438,440,442,444,447,450],{"class":88,"line":89},[86,437,93],{"class":92},[86,439,97],{"class":96},[86,441,100],{"class":92},[86,443,427],{"class":241},[86,445,446],{"class":103}," 'sel'",[86,448,449],{"class":92},")        ",[86,451,453],{"class":452},"sd6ml","\u002F\u002F \"string\"\n",[86,455,456,458,460,462,464,467,470],{"class":88,"line":148},[86,457,93],{"class":92},[86,459,97],{"class":96},[86,461,100],{"class":92},[86,463,427],{"class":241},[86,465,466],{"class":156}," 250",[86,468,469],{"class":92},")          ",[86,471,472],{"class":452},"\u002F\u002F \"number\"\n",[86,474,475,477,479,481,483,486,489],{"class":88,"line":265},[86,476,93],{"class":92},[86,478,97],{"class":96},[86,480,100],{"class":92},[86,482,427],{"class":241},[86,484,485],{"class":156}," true",[86,487,488],{"class":92},")         ",[86,490,491],{"class":452},"\u002F\u002F \"boolean\"\n",[86,493,494,496,498,500,502,505,508],{"class":88,"line":272},[86,495,93],{"class":92},[86,497,97],{"class":96},[86,499,100],{"class":92},[86,501,427],{"class":241},[86,503,504],{"class":156}," undefined",[86,506,507],{"class":92},")    ",[86,509,510],{"class":452},"\u002F\u002F \"undefined\"\n",[300,512,513,526],{},[303,514,515],{},[306,516,517,520,523],{},[309,518,519],{},"Type",[309,521,522],{},"Exemple",[309,524,525],{},"Rôle",[319,527,528,543,562,580,593],{},[306,529,530,535,540],{},[324,531,532],{},[25,533,534],{},"string",[324,536,537],{},[25,538,539],{},"'sel'",[324,541,542],{},"Du texte.",[306,544,545,550,559],{},[324,546,547],{},[25,548,549],{},"number",[324,551,552,555,556],{},[25,553,554],{},"250",", ",[25,557,558],{},"3.5",[324,560,561],{},"Un nombre, entier ou décimal.",[306,563,564,569,577],{},[324,565,566],{},[25,567,568],{},"boolean",[324,570,571,555,574],{},[25,572,573],{},"true",[25,575,576],{},"false",[324,578,579],{},"Vrai ou faux.",[306,581,582,586,590],{},[324,583,584],{},[25,585,41],{},[324,587,588],{},[25,589,41],{},[324,591,592],{},"Variable déclarée sans valeur.",[306,594,595,599,603],{},[324,596,597],{},[25,598,38],{},[324,600,601],{},[25,602,38],{},[324,604,605],{},"Absence de valeur voulue.",[47,607,608],{},"Les tableaux et les objets, qui regroupent plusieurs valeurs, arrivent dans un cours dédié.",[610,611,612],"caution",{},[47,613,614,617,618,621,622,624,625,32],{},[25,615,616],{},"typeof null"," renvoie ",[25,619,620],{},"\"object\"",". C'est une erreur historique du langage, conservée pour ne pas casser les anciens sites. Pour tester ",[25,623,38],{},", écris ",[25,626,627],{},"valeur === null",[10,629,631],{"id":630},"texte-et-nombres","Texte et nombres",[47,633,634,635,638,639,642],{},"Une chaîne s'écrit entre apostrophes ou guillemets. Avec des ",[50,636,637],{},"accents graves",", tu insères des variables dans le texte avec ",[25,640,641],{},"${}"," :",[77,644,646],{"className":79,"code":645,"language":81,"meta":82,"style":82},"const nom = 'crêpes'\nconst minutes = 20\nconsole.log(`Les ${nom} cuisent en ${minutes} minutes`)\n",[25,647,648,660,672],{"__ignoreMap":82},[86,649,650,652,655,657],{"class":88,"line":89},[86,651,31],{"class":241},[86,653,654],{"class":156}," nom",[86,656,247],{"class":241},[86,658,659],{"class":103}," 'crêpes'\n",[86,661,662,664,667,669],{"class":88,"line":148},[86,663,31],{"class":241},[86,665,666],{"class":156}," minutes",[86,668,247],{"class":241},[86,670,671],{"class":156}," 20\n",[86,673,674,676,678,680,683,686,689,692,695],{"class":88,"line":265},[86,675,93],{"class":92},[86,677,97],{"class":96},[86,679,100],{"class":92},[86,681,682],{"class":103},"`Les ${",[86,684,685],{"class":92},"nom",[86,687,688],{"class":103},"} cuisent en ${",[86,690,691],{"class":92},"minutes",[86,693,694],{"class":103},"} minutes`",[86,696,107],{"class":92},[47,698,699,700,555,703,28,706,709,710,32],{},"Les nombres s'additionnent, se soustraient et se multiplient avec ",[25,701,702],{},"+",[25,704,705],{},"-",[25,707,708],{},"*",". La division s'écrit ",[25,711,712],{},"\u002F",[47,714,715,716,718],{},"Attention, ",[25,717,702],{}," colle aussi les textes :",[77,720,722],{"className":79,"code":721,"language":81,"meta":82,"style":82},"console.log('2' + 3)   \u002F\u002F \"23\"\nconsole.log(2 + 3)     \u002F\u002F 5\n",[25,723,724,747],{"__ignoreMap":82},[86,725,726,728,730,732,735,738,741,744],{"class":88,"line":89},[86,727,93],{"class":92},[86,729,97],{"class":96},[86,731,100],{"class":92},[86,733,734],{"class":103},"'2'",[86,736,737],{"class":241}," +",[86,739,740],{"class":156}," 3",[86,742,743],{"class":92},")   ",[86,745,746],{"class":452},"\u002F\u002F \"23\"\n",[86,748,749,751,753,755,758,760,762,765],{"class":88,"line":148},[86,750,93],{"class":92},[86,752,97],{"class":96},[86,754,100],{"class":92},[86,756,757],{"class":156},"2",[86,759,737],{"class":241},[86,761,740],{"class":156},[86,763,764],{"class":92},")     ",[86,766,767],{"class":452},"\u002F\u002F 5\n",[47,769,770,771,32],{},"Quand tu mélanges texte et nombre, JavaScript convertit sans prévenir. Pour obtenir un nombre depuis un texte, utilise ",[25,772,773],{},"Number('250')",[10,775,777],{"id":776},"à-retenir","À retenir",[15,779,780,783,790,796,807,820],{},[18,781,782],{},"JavaScript s'exécute dans le navigateur, ou avec Node.js hors du navigateur.",[18,784,785,787,788,32],{},[25,786,112],{}," affiche une valeur dans la console, ouverte avec ",[25,789,74],{},[18,791,792,793,32],{},"Un script se relie au HTML avec ",[25,794,795],{},"\u003Cscript src=\"...\" defer>",[18,797,798,799,801,802,804,805,32],{},"Déclare avec ",[25,800,31],{}," par défaut, ",[25,803,27],{}," si la valeur doit changer, et évite ",[25,806,352],{},[18,808,809,810,555,812,555,814,555,816,28,818,32],{},"Les types de base sont ",[25,811,534],{},[25,813,549],{},[25,815,568],{},[25,817,41],{},[25,819,38],{},[18,821,822,823,825],{},"Les accents graves et ",[25,824,641],{}," insèrent des variables dans un texte.",[827,828,829],"style",{},"html pre.shiki code .scfrF, html code.shiki .scfrF{--shiki-light:#1F2328;--shiki-default:#E6EDF3;--shiki-dark:#E6EDF3}html pre.shiki code .syCW7, html code.shiki .syCW7{--shiki-light:#8250DF;--shiki-default:#D2A8FF;--shiki-dark:#D2A8FF}html pre.shiki code .shWOn, html code.shiki .shWOn{--shiki-light:#0A3069;--shiki-default:#A5D6FF;--shiki-dark:#A5D6FF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .s5JFL, html code.shiki .s5JFL{--shiki-light:#116329;--shiki-default:#7EE787;--shiki-dark:#7EE787}html pre.shiki code .s5iOY, html code.shiki .s5iOY{--shiki-light:#0550AE;--shiki-default:#79C0FF;--shiki-dark:#79C0FF}html pre.shiki code .sOnC1, html code.shiki .sOnC1{--shiki-light:#CF222E;--shiki-default:#FF7B72;--shiki-dark:#FF7B72}html pre.shiki code .sd6ml, html code.shiki .sd6ml{--shiki-light:#6E7781;--shiki-default:#8B949E;--shiki-dark:#8B949E}",{"title":82,"searchDepth":148,"depth":265,"links":831},[832,833,834,835,836,837,838,839,840],{"id":12,"depth":148,"text":13},{"id":44,"depth":148,"text":45},{"id":63,"depth":148,"text":64},{"id":116,"depth":148,"text":117},{"id":223,"depth":148,"text":224},{"id":383,"depth":148,"text":384},{"id":416,"depth":148,"text":417},{"id":630,"depth":148,"text":631},{"id":776,"depth":148,"text":777},"Où s'exécute JavaScript, comment utiliser la console, puis déclarer des variables avec let et const et reconnaître les types de valeurs.","md",{},[52,70,27,31,230,845,427,846],"types","template literal","debutant","\u002Fjs\u002Fpremiers-pas",[850],"\u002Fhtml\u002Fune-page-web",[852,856,859],{"nom":853,"url":854,"type":855},"MDN, Qu'est-ce que JavaScript ?","https:\u002F\u002Fdeveloper.mozilla.org\u002Ffr\u002Fdocs\u002FLearn_web_development\u002FCore\u002FScripting\u002FWhat_is_JavaScript","cours",{"nom":857,"url":858,"type":855},"MDN, les variables","https:\u002F\u002Fdeveloper.mozilla.org\u002Ffr\u002Fdocs\u002FLearn_web_development\u002FCore\u002FScripting\u002FVariables",{"nom":860,"url":861,"type":862},"MDN, Grammaire et types (guide JavaScript)","https:\u002F\u002Fdeveloper.mozilla.org\u002Ffr\u002Fdocs\u002FWeb\u002FJavaScript\u002FGuide\u002FGrammar_and_types","doc",{"title":5,"description":841},[865,866],{"nom":853,"url":854},{"nom":867,"url":858},"MDN, Stocker les informations dont vous avez besoin, les variables","js\u002F01.premiers-pas","5h_xZKrUJnyE7JJefZlUIrKhCf9ikapbIlXsibUm-ig",[871,872,876,880,884,888,892],{"path":848,"title":5,"stem":868},{"path":873,"title":874,"stem":875},"\u002Fjs\u002Fconditions-et-boucles","Conditions et boucles","js\u002F02.conditions-et-boucles",{"path":877,"title":878,"stem":879},"\u002Fjs\u002Ffonctions","Les fonctions","js\u002F03.fonctions",{"path":881,"title":882,"stem":883},"\u002Fjs\u002Ftableaux-et-objets","Tableaux et objets","js\u002F04.tableaux-et-objets",{"path":885,"title":886,"stem":887},"\u002Fjs\u002Fdom-et-evenements","Le DOM et les événements","js\u002F05.dom-et-evenements",{"path":889,"title":890,"stem":891},"\u002Fjs\u002Fasynchrone-et-modules","Asynchrone et modules","js\u002F06.asynchrone-et-modules",{"path":893,"title":52,"stem":894},"\u002Fjs","js\u002Findex",[896,898],{"title":52,"path":893,"stem":894,"description":897,"children":-1},"Le mémo de JavaScript : variables, types, conditions, boucles, fonctions, tableaux, objets, DOM, asynchrone et modules.",{"title":874,"path":873,"stem":875,"description":899,"children":-1},"Faire des choix avec if, else et switch, comparer des valeurs, puis répéter des actions avec for, while et for...of.",[901],{"path":850,"title":902,"ligne":126},"Qu'est-ce que HTML ?",[904,905,906,907,909,910,912],{"path":848,"title":5,"niveau":847,"stem":868},{"path":873,"title":874,"niveau":847,"stem":875},{"path":877,"title":878,"niveau":847,"stem":879},{"path":881,"title":882,"niveau":908,"stem":883},"intermediaire",{"path":885,"title":886,"niveau":908,"stem":887},{"path":889,"title":890,"niveau":911,"stem":891},"avance",{"path":893,"title":52,"niveau":913,"stem":894},"memo",1794583436334]