[{"data":1,"prerenderedAt":11068},["ShallowReactive",2],{"navigation":3,"chapter-cours-nsi-1ere\u002Fpe-ihm-web":585,"chapter-index-nsi-1ere\u002Fpe-ihm-web":8546,"chapter-memo-nsi-1ere\u002Fpe-ihm-web":8658},[4,224,440],{"title":5,"path":6,"stem":7,"children":8},"SNT — Seconde","\u002Fsnt-2nde","0.snt-2nde\u002F0.index",[9,10,14,36,66,92,118,144,162,184,206],{"title":5,"path":6,"stem":7},{"title":11,"path":12,"stem":13},"REVIEW pédagogique — SNT 2nde","\u002Fsnt-2nde\u002Freview","0.snt-2nde\u002FREVIEW",{"title":15,"path":16,"stem":17,"children":18},"Internet","\u002Fsnt-2nde\u002Fsa-internet","0.snt-2nde\u002Fsa-internet\u002F0.index",[19,20,24,28,32],{"title":15,"path":16,"stem":17},{"title":21,"path":22,"stem":23},"Adresses symboliques et DNS","\u002Fsnt-2nde\u002Fsa-internet\u002Fadresses-dns","0.snt-2nde\u002Fsa-internet\u002F1.adresses-dns",{"title":25,"path":26,"stem":27},"Internet et les réseaux physiques","\u002Fsnt-2nde\u002Fsa-internet\u002Freseaux-physiques","0.snt-2nde\u002Fsa-internet\u002F2.reseaux-physiques",{"title":29,"path":30,"stem":31},"Protocoles TCP\u002FIP et routage des paquets","\u002Fsnt-2nde\u002Fsa-internet\u002Ftcp-ip-routage","0.snt-2nde\u002Fsa-internet\u002F3.tcp-ip-routage",{"title":33,"path":34,"stem":35},"Réseaux pair-à-pair","\u002Fsnt-2nde\u002Fsa-internet\u002Fpair-a-pair","0.snt-2nde\u002Fsa-internet\u002F4.pair-a-pair",{"title":37,"path":38,"stem":39,"children":40},"Le Web","\u002Fsnt-2nde\u002Fsb-web","0.snt-2nde\u002Fsb-web\u002F0.index",[41,42,46,50,54,58,62],{"title":37,"path":38,"stem":39},{"title":43,"path":44,"stem":45},"Histoire du Web","\u002Fsnt-2nde\u002Fsb-web\u002Fhistoire-web","0.snt-2nde\u002Fsb-web\u002F1.histoire-web",{"title":47,"path":48,"stem":49},"URL et hypertexte","\u002Fsnt-2nde\u002Fsb-web\u002Furl-hypertexte","0.snt-2nde\u002Fsb-web\u002F2.url-hypertexte",{"title":51,"path":52,"stem":53},"HTML et CSS — le contenu et la présentation","\u002Fsnt-2nde\u002Fsb-web\u002Fhtml-css","0.snt-2nde\u002Fsb-web\u002F3.html-css",{"title":55,"path":56,"stem":57},"Client-serveur et requêtes HTTP","\u002Fsnt-2nde\u002Fsb-web\u002Fclient-serveur-http","0.snt-2nde\u002Fsb-web\u002F4.client-serveur-http",{"title":59,"path":60,"stem":61},"Moteurs de recherche","\u002Fsnt-2nde\u002Fsb-web\u002Fmoteurs-recherche","0.snt-2nde\u002Fsb-web\u002F5.moteurs-recherche",{"title":63,"path":64,"stem":65},"Sécurité du navigateur et notions juridiques","\u002Fsnt-2nde\u002Fsb-web\u002Fsecurite-droits","0.snt-2nde\u002Fsb-web\u002F6.securite-droits",{"title":67,"path":68,"stem":69,"children":70},"Les réseaux sociaux","\u002Fsnt-2nde\u002Fsc-reseaux-sociaux","0.snt-2nde\u002Fsc-reseaux-sociaux\u002F0.index",[71,72,76,80,84,88],{"title":67,"path":68,"stem":69},{"title":73,"path":74,"stem":75},"Panorama des réseaux sociaux","\u002Fsnt-2nde\u002Fsc-reseaux-sociaux\u002Fpanorama-rs","0.snt-2nde\u002Fsc-reseaux-sociaux\u002F1.panorama-rs",{"title":77,"path":78,"stem":79},"Identité numérique et authentification","\u002Fsnt-2nde\u002Fsc-reseaux-sociaux\u002Fidentite-numerique","0.snt-2nde\u002Fsc-reseaux-sociaux\u002F2.identite-numerique",{"title":81,"path":82,"stem":83},"Le modèle économique des réseaux sociaux","\u002Fsnt-2nde\u002Fsc-reseaux-sociaux\u002Fmodele-economique","0.snt-2nde\u002Fsc-reseaux-sociaux\u002F3.modele-economique",{"title":85,"path":86,"stem":87},"Petit monde et graphes","\u002Fsnt-2nde\u002Fsc-reseaux-sociaux\u002Fpetit-monde-graphes","0.snt-2nde\u002Fsc-reseaux-sociaux\u002F4.petit-monde-graphes",{"title":89,"path":90,"stem":91},"La cyberviolence","\u002Fsnt-2nde\u002Fsc-reseaux-sociaux\u002Fcyberviolence","0.snt-2nde\u002Fsc-reseaux-sociaux\u002F5.cyberviolence",{"title":93,"path":94,"stem":95,"children":96},"Les données structurées et leur traitement","\u002Fsnt-2nde\u002Fsd-donnees-structurees","0.snt-2nde\u002Fsd-donnees-structurees\u002F0.index",[97,98,102,106,110,114],{"title":93,"path":94,"stem":95},{"title":99,"path":100,"stem":101},"Données et formats","\u002Fsnt-2nde\u002Fsd-donnees-structurees\u002Fdonnees-formats","0.snt-2nde\u002Fsd-donnees-structurees\u002F1.donnees-formats",{"title":103,"path":104,"stem":105},"Données structurées","\u002Fsnt-2nde\u002Fsd-donnees-structurees\u002Fdonnees-structurees","0.snt-2nde\u002Fsd-donnees-structurees\u002F2.donnees-structurees",{"title":107,"path":108,"stem":109},"Métadonnées","\u002Fsnt-2nde\u002Fsd-donnees-structurees\u002Fmetadonnees","0.snt-2nde\u002Fsd-donnees-structurees\u002F3.metadonnees",{"title":111,"path":112,"stem":113},"Traitement de tables","\u002Fsnt-2nde\u002Fsd-donnees-structurees\u002Ftraitement-tables","0.snt-2nde\u002Fsd-donnees-structurees\u002F4.traitement-tables",{"title":115,"path":116,"stem":117},"Le cloud","\u002Fsnt-2nde\u002Fsd-donnees-structurees\u002Fcloud","0.snt-2nde\u002Fsd-donnees-structurees\u002F5.cloud",{"title":119,"path":120,"stem":121,"children":122},"Localisation, cartographie et mobilité","\u002Fsnt-2nde\u002Fse-localisation-cartographie","0.snt-2nde\u002Fse-localisation-cartographie\u002F0.index",[123,124,128,132,136,140],{"title":119,"path":120,"stem":121},{"title":125,"path":126,"stem":127},"GPS et Galileo — se situer grâce aux satellites","\u002Fsnt-2nde\u002Fse-localisation-cartographie\u002Fgps-galileo","0.snt-2nde\u002Fse-localisation-cartographie\u002F1.gps-galileo",{"title":129,"path":130,"stem":131},"Décoder une trame NMEA","\u002Fsnt-2nde\u002Fse-localisation-cartographie\u002Ftrame-nmea","0.snt-2nde\u002Fse-localisation-cartographie\u002F2.trame-nmea",{"title":133,"path":134,"stem":135},"Cartes numériques — GeoPortail et OpenStreetMap","\u002Fsnt-2nde\u002Fse-localisation-cartographie\u002Fcartes-numeriques","0.snt-2nde\u002Fse-localisation-cartographie\u002F3.cartes-numeriques",{"title":137,"path":138,"stem":139},"Itinéraires et graphes","\u002Fsnt-2nde\u002Fse-localisation-cartographie\u002Fitineraires-graphes","0.snt-2nde\u002Fse-localisation-cartographie\u002F4.itineraires-graphes",{"title":141,"path":142,"stem":143},"Confidentialité de la position","\u002Fsnt-2nde\u002Fse-localisation-cartographie\u002Fconfidentialite-position","0.snt-2nde\u002Fse-localisation-cartographie\u002F5.confidentialite-position",{"title":145,"path":146,"stem":147,"children":148},"Informatique embarquée et objets connectés","\u002Fsnt-2nde\u002Fsf-info-embarquee","0.snt-2nde\u002Fsf-info-embarquee\u002F0.index",[149,150,154,158],{"title":145,"path":146,"stem":147},{"title":151,"path":152,"stem":153},"Systèmes informatiques embarqués","\u002Fsnt-2nde\u002Fsf-info-embarquee\u002Fsystemes-embarques","0.snt-2nde\u002Fsf-info-embarquee\u002F1.systemes-embarques",{"title":155,"path":156,"stem":157},"Capteurs et actionneurs","\u002Fsnt-2nde\u002Fsf-info-embarquee\u002Fcapteurs-actionneurs","0.snt-2nde\u002Fsf-info-embarquee\u002F2.capteurs-actionneurs",{"title":159,"path":160,"stem":161},"IHM et objets connectés","\u002Fsnt-2nde\u002Fsf-info-embarquee\u002Fihm-objet-connecte","0.snt-2nde\u002Fsf-info-embarquee\u002F3.ihm-objet-connecte",{"title":163,"path":164,"stem":165,"children":166},"Photographie numérique","\u002Fsnt-2nde\u002Fsg-photo-numerique","0.snt-2nde\u002Fsg-photo-numerique\u002F0.index",[167,168,172,176,180],{"title":163,"path":164,"stem":165},{"title":169,"path":170,"stem":171},"Photosites, pixels et résolution","\u002Fsnt-2nde\u002Fsg-photo-numerique\u002Fpixels-resolution","0.snt-2nde\u002Fsg-photo-numerique\u002F1.pixels-resolution",{"title":173,"path":174,"stem":175},"Les algorithmes de l'appareil photo","\u002Fsnt-2nde\u002Fsg-photo-numerique\u002Falgorithmes-photo","0.snt-2nde\u002Fsg-photo-numerique\u002F2.algorithmes-photo",{"title":177,"path":178,"stem":179},"Les métadonnées EXIF","\u002Fsnt-2nde\u002Fsg-photo-numerique\u002Fmetadonnees-exif","0.snt-2nde\u002Fsg-photo-numerique\u002F3.metadonnees-exif",{"title":181,"path":182,"stem":183},"Traiter une image en Python","\u002Fsnt-2nde\u002Fsg-photo-numerique\u002Ftraitement-rgb","0.snt-2nde\u002Fsg-photo-numerique\u002F4.traitement-rgb",{"title":185,"path":186,"stem":187,"children":188},"Notions transversales de programmation","\u002Fsnt-2nde\u002Fsh-prog-notions","0.snt-2nde\u002Fsh-prog-notions\u002F0.index",[189,190,194,198,202],{"title":185,"path":186,"stem":187},{"title":191,"path":192,"stem":193},"Séquences d'instructions et variables","\u002Fsnt-2nde\u002Fsh-prog-notions\u002Fsequences-affectations","0.snt-2nde\u002Fsh-prog-notions\u002F1.sequences-affectations",{"title":195,"path":196,"stem":197},"Instructions conditionnelles","\u002Fsnt-2nde\u002Fsh-prog-notions\u002Fconditionnelles","0.snt-2nde\u002Fsh-prog-notions\u002F2.conditionnelles",{"title":199,"path":200,"stem":201},"Boucles bornées et non bornées","\u002Fsnt-2nde\u002Fsh-prog-notions\u002Fboucles","0.snt-2nde\u002Fsh-prog-notions\u002F3.boucles",{"title":203,"path":204,"stem":205},"Définitions et appels de fonctions","\u002Fsnt-2nde\u002Fsh-prog-notions\u002Ffonctions","0.snt-2nde\u002Fsh-prog-notions\u002F4.fonctions",{"title":207,"path":208,"stem":209,"children":210},"Démo des widgets MDC","\u002Fsnt-2nde\u002Fzz-demo-widgets","0.snt-2nde\u002Fzz-demo-widgets\u002F0.index",[211,212,216,220],{"title":207,"path":208,"stem":209},{"title":213,"path":214,"stem":215},"Démo statique — callouts, code, BO, illustration","\u002Fsnt-2nde\u002Fzz-demo-widgets\u002Fstatique","0.snt-2nde\u002Fzz-demo-widgets\u002F1.statique",{"title":217,"path":218,"stem":219},"Démo interactive — self-eval et python-snippet","\u002Fsnt-2nde\u002Fzz-demo-widgets\u002Finteractif","0.snt-2nde\u002Fzz-demo-widgets\u002F2.interactif",{"title":221,"path":222,"stem":223},"Démo · 14 widgets de manipulation NSI","\u002Fsnt-2nde\u002Fzz-demo-widgets\u002Fwidgets-manipulation","0.snt-2nde\u002Fzz-demo-widgets\u002F3.widgets-manipulation",{"title":225,"path":226,"stem":227,"children":228},"NSI — Première","\u002Fnsi-1ere","1.nsi-1ere\u002F0.index",[229,230,234,256,282,304,328,354,380,410],{"title":225,"path":226,"stem":227},{"title":231,"path":232,"stem":233},"Relecture pédagogique — 8 chapitres NSI 1ère (PA → PH)","\u002Fnsi-1ere\u002Freview","1.nsi-1ere\u002FREVIEW",{"title":235,"path":236,"stem":237,"children":238},"Histoire de l'informatique","\u002Fnsi-1ere\u002Fpa-histoire-info","1.nsi-1ere\u002Fpa-histoire-info\u002F0.index",[239,240,244,248,252],{"title":235,"path":236,"stem":237},{"title":241,"path":242,"stem":243},"De la préantiquité aux machines à calculer","\u002Fnsi-1ere\u002Fpa-histoire-info\u002Fpreantiquite-aux-machines","1.nsi-1ere\u002Fpa-histoire-info\u002F1.preantiquite-aux-machines",{"title":245,"path":246,"stem":247},"La machine universelle (1930-1950)","\u002Fnsi-1ere\u002Fpa-histoire-info\u002Fmachine-universelle","1.nsi-1ere\u002Fpa-histoire-info\u002F2.machine-universelle",{"title":249,"path":250,"stem":251},"Les ordinateurs modernes (1947-1990)","\u002Fnsi-1ere\u002Fpa-histoire-info\u002Fordinateurs-modernes","1.nsi-1ere\u002Fpa-histoire-info\u002F3.ordinateurs-modernes",{"title":253,"path":254,"stem":255},"Réseaux, Web et IA (1969 à aujourd'hui)","\u002Fnsi-1ere\u002Fpa-histoire-info\u002Freseaux-et-web","1.nsi-1ere\u002Fpa-histoire-info\u002F4.reseaux-et-web",{"title":257,"path":258,"stem":259,"children":260},"Représentation des données — types et valeurs","\u002Fnsi-1ere\u002Fpb-types-valeurs","1.nsi-1ere\u002Fpb-types-valeurs\u002F0.index",[261,262,266,270,274,278],{"title":257,"path":258,"stem":259},{"title":263,"path":264,"stem":265},"Bases de numération et entiers positifs","\u002Fnsi-1ere\u002Fpb-types-valeurs\u002Fbases-entiers-positifs","1.nsi-1ere\u002Fpb-types-valeurs\u002F1.bases-entiers-positifs",{"title":267,"path":268,"stem":269},"Entiers relatifs et complément à deux","\u002Fnsi-1ere\u002Fpb-types-valeurs\u002Fentiers-relatifs","1.nsi-1ere\u002Fpb-types-valeurs\u002F2.entiers-relatifs",{"title":271,"path":272,"stem":273},"Nombres flottants et virgule flottante","\u002Fnsi-1ere\u002Fpb-types-valeurs\u002Fflottants","1.nsi-1ere\u002Fpb-types-valeurs\u002F3.flottants",{"title":275,"path":276,"stem":277},"Textes et encodages — ASCII, ISO-8859-1, Unicode","\u002Fnsi-1ere\u002Fpb-types-valeurs\u002Ftextes-encodages","1.nsi-1ere\u002Fpb-types-valeurs\u002F4.textes-encodages",{"title":279,"path":280,"stem":281},"Valeurs booléennes et opérateurs logiques","\u002Fnsi-1ere\u002Fpb-types-valeurs\u002Fbooleens","1.nsi-1ere\u002Fpb-types-valeurs\u002F5.booleens",{"title":283,"path":284,"stem":285,"children":286},"Représentation des données : types construits","\u002Fnsi-1ere\u002Fpc-types-construits","1.nsi-1ere\u002Fpc-types-construits\u002F0.index",[287,288,292,296,300],{"title":283,"path":284,"stem":285},{"title":289,"path":290,"stem":291},"Tableaux et listes","\u002Fnsi-1ere\u002Fpc-types-construits\u002Ftableaux-listes","1.nsi-1ere\u002Fpc-types-construits\u002F1.tableaux-listes",{"title":293,"path":294,"stem":295},"Listes en compréhension","\u002Fnsi-1ere\u002Fpc-types-construits\u002Fcomprehension","1.nsi-1ere\u002Fpc-types-construits\u002F2.comprehension",{"title":297,"path":298,"stem":299},"Tuples et p-uplets nommés","\u002Fnsi-1ere\u002Fpc-types-construits\u002Ftuples","1.nsi-1ere\u002Fpc-types-construits\u002F3.tuples",{"title":301,"path":302,"stem":303},"Dictionnaires","\u002Fnsi-1ere\u002Fpc-types-construits\u002Fdictionnaires","1.nsi-1ere\u002Fpc-types-construits\u002F4.dictionnaires",{"title":305,"path":306,"stem":307,"children":308},"Traitement de données en tables","\u002Fnsi-1ere\u002Fpd-tables-donnees","1.nsi-1ere\u002Fpd-tables-donnees\u002F0.index",[309,310,314,318,322],{"title":305,"path":306,"stem":307},{"title":311,"path":312,"stem":313},"Tables et CSV","\u002Fnsi-1ere\u002Fpd-tables-donnees\u002Ftables-csv","1.nsi-1ere\u002Fpd-tables-donnees\u002F1.tables-csv",{"title":315,"path":316,"stem":317},"Recherche et filtrage","\u002Fnsi-1ere\u002Fpd-tables-donnees\u002Frecherche","1.nsi-1ere\u002Fpd-tables-donnees\u002F2.recherche",{"title":319,"path":320,"stem":321},"Trier une table","\u002Fnsi-1ere\u002Fpd-tables-donnees\u002Ftri","1.nsi-1ere\u002Fpd-tables-donnees\u002F3.tri",{"title":323,"path":324,"stem":325,"children":326},"Fusion et indexation","\u002Fnsi-1ere\u002Fpd-tables-donnees\u002Ffusion-indexation","1.nsi-1ere\u002Fpd-tables-donnees\u002F4.fusion-indexation",[327],{"title":323,"path":324,"stem":325},{"title":329,"path":330,"stem":331,"children":332},"IHM sur le Web","\u002Fnsi-1ere\u002Fpe-ihm-web","1.nsi-1ere\u002Fpe-ihm-web\u002F0.index",[333,334,338,342,346,350],{"title":329,"path":330,"stem":331},{"title":335,"path":336,"stem":337},"HTML et CSS — rappel de structure","\u002Fnsi-1ere\u002Fpe-ihm-web\u002Fhtml-css-bases","1.nsi-1ere\u002Fpe-ihm-web\u002F1.html-css-bases",{"title":339,"path":340,"stem":341},"Formulaires HTML","\u002Fnsi-1ere\u002Fpe-ihm-web\u002Fformulaires","1.nsi-1ere\u002Fpe-ihm-web\u002F2.formulaires",{"title":343,"path":344,"stem":345},"Événements JavaScript","\u002Fnsi-1ere\u002Fpe-ihm-web\u002Fevenements-js","1.nsi-1ere\u002Fpe-ihm-web\u002F3.evenements-js",{"title":347,"path":348,"stem":349},"Manipulation du DOM","\u002Fnsi-1ere\u002Fpe-ihm-web\u002Fdom-interaction","1.nsi-1ere\u002Fpe-ihm-web\u002F4.dom-interaction",{"title":351,"path":352,"stem":353},"Client, serveur et HTTP","\u002Fnsi-1ere\u002Fpe-ihm-web\u002Fclient-serveur-http","1.nsi-1ere\u002Fpe-ihm-web\u002F5.client-serveur-http",{"title":355,"path":356,"stem":357,"children":358},"Architectures matérielles et systèmes d'exploitation","\u002Fnsi-1ere\u002Fpf-archi-os","1.nsi-1ere\u002Fpf-archi-os\u002F0.index",[359,360,364,368,372,376],{"title":355,"path":356,"stem":357},{"title":361,"path":362,"stem":363},"Le modèle de von Neumann","\u002Fnsi-1ere\u002Fpf-archi-os\u002Fvon-neumann","1.nsi-1ere\u002Fpf-archi-os\u002F1.von-neumann",{"title":365,"path":366,"stem":367},"Périphériques et interface homme-machine","\u002Fnsi-1ere\u002Fpf-archi-os\u002Fperipheriques-ihm","1.nsi-1ere\u002Fpf-archi-os\u002F2.peripheriques-ihm",{"title":369,"path":370,"stem":371},"Les systèmes d'exploitation","\u002Fnsi-1ere\u002Fpf-archi-os\u002Fsystemes-exploitation","1.nsi-1ere\u002Fpf-archi-os\u002F3.systemes-exploitation",{"title":373,"path":374,"stem":375},"Linux et le shell","\u002Fnsi-1ere\u002Fpf-archi-os\u002Flinux-shell","1.nsi-1ere\u002Fpf-archi-os\u002F4.linux-shell",{"title":377,"path":378,"stem":379},"Réseaux et protocoles","\u002Fnsi-1ere\u002Fpf-archi-os\u002Freseaux","1.nsi-1ere\u002Fpf-archi-os\u002F5.reseaux",{"title":381,"path":382,"stem":383,"children":384},"Langages et programmation","\u002Fnsi-1ere\u002Fpg-langages-prog","1.nsi-1ere\u002Fpg-langages-prog\u002F0.index",[385,386,390,394,398,402,406],{"title":381,"path":382,"stem":383},{"title":387,"path":388,"stem":389},"Diversité et unité des langages de programmation","\u002Fnsi-1ere\u002Fpg-langages-prog\u002Fdiversite-langages","1.nsi-1ere\u002Fpg-langages-prog\u002F1.diversite-langages",{"title":391,"path":392,"stem":393},"Constructions élémentaires","\u002Fnsi-1ere\u002Fpg-langages-prog\u002Fconstructions-elementaires","1.nsi-1ere\u002Fpg-langages-prog\u002F2.constructions-elementaires",{"title":395,"path":396,"stem":397},"Fonctions","\u002Fnsi-1ere\u002Fpg-langages-prog\u002Ffonctions","1.nsi-1ere\u002Fpg-langages-prog\u002F3.fonctions",{"title":399,"path":400,"stem":401},"Spécification d'une fonction","\u002Fnsi-1ere\u002Fpg-langages-prog\u002Fspecification","1.nsi-1ere\u002Fpg-langages-prog\u002F4.specification",{"title":403,"path":404,"stem":405},"Mise au point des programmes","\u002Fnsi-1ere\u002Fpg-langages-prog\u002Fmise-au-point","1.nsi-1ere\u002Fpg-langages-prog\u002F5.mise-au-point",{"title":407,"path":408,"stem":409},"Utilisation de bibliothèques","\u002Fnsi-1ere\u002Fpg-langages-prog\u002Fbibliotheques","1.nsi-1ere\u002Fpg-langages-prog\u002F6.bibliotheques",{"title":411,"path":412,"stem":413,"children":414},"Algorithmique","\u002Fnsi-1ere\u002Fph-algorithmique","1.nsi-1ere\u002Fph-algorithmique\u002F0.index",[415,416,420,424,428,432,436],{"title":411,"path":412,"stem":413},{"title":417,"path":418,"stem":419},"Parcours séquentiel d'un tableau","\u002Fnsi-1ere\u002Fph-algorithmique\u002Fparcours-sequentiel","1.nsi-1ere\u002Fph-algorithmique\u002F1.parcours-sequentiel",{"title":421,"path":422,"stem":423},"Bases de la complexité","\u002Fnsi-1ere\u002Fph-algorithmique\u002Fcomplexite-bases","1.nsi-1ere\u002Fph-algorithmique\u002F2.complexite-bases",{"title":425,"path":426,"stem":427},"Tris par sélection et par insertion","\u002Fnsi-1ere\u002Fph-algorithmique\u002Ftris","1.nsi-1ere\u002Fph-algorithmique\u002F3.tris",{"title":429,"path":430,"stem":431},"Recherche dichotomique","\u002Fnsi-1ere\u002Fph-algorithmique\u002Fdichotomie","1.nsi-1ere\u002Fph-algorithmique\u002F4.dichotomie",{"title":433,"path":434,"stem":435},"Algorithmes gloutons","\u002Fnsi-1ere\u002Fph-algorithmique\u002Fgloutons","1.nsi-1ere\u002Fph-algorithmique\u002F5.gloutons",{"title":437,"path":438,"stem":439},"Les k plus proches voisins (k-NN)","\u002Fnsi-1ere\u002Fph-algorithmique\u002Fknn","1.nsi-1ere\u002Fph-algorithmique\u002F6.knn",{"title":441,"path":442,"stem":443,"children":444},"NSI — Terminale","\u002Fnsi-tale","2.nsi-tale\u002F0.index",[445,446,450,476,498,536,560],{"title":441,"path":442,"stem":443},{"title":447,"path":448,"stem":449},"Review pédagogique — chapitres NSI Terminale (TA, TB, TC, TD, TE)","\u002Fnsi-tale\u002Freview","2.nsi-tale\u002FREVIEW",{"title":451,"path":452,"stem":453,"children":454},"Structures de données","\u002Fnsi-tale\u002Fta-structures-donnees","2.nsi-tale\u002Fta-structures-donnees\u002F0.index",[455,456,460,464,468,472],{"title":451,"path":452,"stem":453},{"title":457,"path":458,"stem":459},"Objet, classe, interface","\u002Fnsi-tale\u002Fta-structures-donnees\u002Finterface-implementation","2.nsi-tale\u002Fta-structures-donnees\u002F1.interface-implementation",{"title":461,"path":462,"stem":463},"Implémenter une structure — l'exemple de la file FIFO","\u002Fnsi-tale\u002Fta-structures-donnees\u002Fimplementer-une-structure","2.nsi-tale\u002Fta-structures-donnees\u002F2.implementer-une-structure",{"title":465,"path":466,"stem":467},"Listes, piles, files, dictionnaires","\u002Fnsi-tale\u002Fta-structures-donnees\u002Flistes-piles-files-dict","2.nsi-tale\u002Fta-structures-donnees\u002F3.listes-piles-files-dict",{"title":469,"path":470,"stem":471},"Arbres binaires","\u002Fnsi-tale\u002Fta-structures-donnees\u002Farbres-binaires","2.nsi-tale\u002Fta-structures-donnees\u002F4.arbres-binaires",{"title":473,"path":474,"stem":475},"Graphes","\u002Fnsi-tale\u002Fta-structures-donnees\u002Fgraphes","2.nsi-tale\u002Fta-structures-donnees\u002F5.graphes",{"title":477,"path":478,"stem":479,"children":480},"Bases de données","\u002Fnsi-tale\u002Ftb-bases-de-donnees","2.nsi-tale\u002Ftb-bases-de-donnees\u002F0.index",[481,482,486,490,494],{"title":477,"path":478,"stem":479},{"title":483,"path":484,"stem":485},"Le modèle relationnel","\u002Fnsi-tale\u002Ftb-bases-de-donnees\u002Fmodele-relationnel","2.nsi-tale\u002Ftb-bases-de-donnees\u002F1.modele-relationnel",{"title":487,"path":488,"stem":489},"Bases de données relationnelles et anomalies de schéma","\u002Fnsi-tale\u002Ftb-bases-de-donnees\u002Fbase-relationnelle","2.nsi-tale\u002Ftb-bases-de-donnees\u002F2.base-relationnelle",{"title":491,"path":492,"stem":493},"Le langage SQL","\u002Fnsi-tale\u002Ftb-bases-de-donnees\u002Fsql","2.nsi-tale\u002Ftb-bases-de-donnees\u002F3.sql",{"title":495,"path":496,"stem":497},"Les systèmes de gestion de bases de données","\u002Fnsi-tale\u002Ftb-bases-de-donnees\u002Fsgbd","2.nsi-tale\u002Ftb-bases-de-donnees\u002F4.sgbd",{"title":499,"path":500,"stem":501,"children":502},"Architectures matérielles, systèmes d'exploitation et réseaux","\u002Fnsi-tale\u002Ftc-archi-os-reseaux","2.nsi-tale\u002Ftc-archi-os-reseaux\u002F0.index",[503,504,508,512,516,520,524,528,532],{"title":499,"path":500,"stem":501},{"title":505,"path":506,"stem":507},"Le système sur puce (SoC)","\u002Fnsi-tale\u002Ftc-archi-os-reseaux\u002Fsysteme-sur-puce","2.nsi-tale\u002Ftc-archi-os-reseaux\u002F1.systeme-sur-puce",{"title":509,"path":510,"stem":511},"Processus et ordonnancement par l'OS","\u002Fnsi-tale\u002Ftc-archi-os-reseaux\u002Fprocessus-os","2.nsi-tale\u002Ftc-archi-os-reseaux\u002F2.processus-os",{"title":513,"path":514,"stem":515},"L'interblocage (deadlock)","\u002Fnsi-tale\u002Ftc-archi-os-reseaux\u002Finterblocage","2.nsi-tale\u002Ftc-archi-os-reseaux\u002F3.interblocage",{"title":517,"path":518,"stem":519},"Principes du routage","\u002Fnsi-tale\u002Ftc-archi-os-reseaux\u002Froutage-principes","2.nsi-tale\u002Ftc-archi-os-reseaux\u002F4.routage-principes",{"title":521,"path":522,"stem":523},"Protocoles de routage RIP et OSPF","\u002Fnsi-tale\u002Ftc-archi-os-reseaux\u002Fprotocoles-rip-ospf","2.nsi-tale\u002Ftc-archi-os-reseaux\u002F5.protocoles-rip-ospf",{"title":525,"path":526,"stem":527},"Chiffrement symétrique","\u002Fnsi-tale\u002Ftc-archi-os-reseaux\u002Fchiffrement-symetrique","2.nsi-tale\u002Ftc-archi-os-reseaux\u002F6.chiffrement-symetrique",{"title":529,"path":530,"stem":531},"Chiffrement asymétrique","\u002Fnsi-tale\u002Ftc-archi-os-reseaux\u002Fchiffrement-asymetrique","2.nsi-tale\u002Ftc-archi-os-reseaux\u002F7.chiffrement-asymetrique",{"title":533,"path":534,"stem":535},"HTTPS — l'échange de clé symétrique","\u002Fnsi-tale\u002Ftc-archi-os-reseaux\u002Fhttps-tls","2.nsi-tale\u002Ftc-archi-os-reseaux\u002F8.https-tls",{"title":381,"path":537,"stem":538,"children":539},"\u002Fnsi-tale\u002Ftd-langages-prog","2.nsi-tale\u002Ftd-langages-prog\u002F0.index",[540,541,544,548,552,556],{"title":381,"path":537,"stem":538},{"title":403,"path":542,"stem":543},"\u002Fnsi-tale\u002Ftd-langages-prog\u002Fmise-au-point","2.nsi-tale\u002Ftd-langages-prog\u002F1.mise-au-point",{"title":545,"path":546,"stem":547},"Modularité","\u002Fnsi-tale\u002Ftd-langages-prog\u002Fmodularite","2.nsi-tale\u002Ftd-langages-prog\u002F2.modularite",{"title":549,"path":550,"stem":551},"Récursivité","\u002Fnsi-tale\u002Ftd-langages-prog\u002Frecursivite","2.nsi-tale\u002Ftd-langages-prog\u002F3.recursivite",{"title":553,"path":554,"stem":555},"Paradigmes de programmation","\u002Fnsi-tale\u002Ftd-langages-prog\u002Fparadigmes","2.nsi-tale\u002Ftd-langages-prog\u002F4.paradigmes",{"title":557,"path":558,"stem":559},"Programme comme donnée — calculabilité et indécidabilité","\u002Fnsi-tale\u002Ftd-langages-prog\u002Fprogramme-comme-donnee","2.nsi-tale\u002Ftd-langages-prog\u002F5.programme-comme-donnee",{"title":411,"path":561,"stem":562,"children":563},"\u002Fnsi-tale\u002Fte-algorithmique","2.nsi-tale\u002Fte-algorithmique\u002F0.index",[564,565,569,573,577,581],{"title":411,"path":561,"stem":562},{"title":566,"path":567,"stem":568},"Algorithmes sur les arbres binaires","\u002Fnsi-tale\u002Fte-algorithmique\u002Farbres-binaires-algos","2.nsi-tale\u002Fte-algorithmique\u002F1.arbres-binaires-algos",{"title":570,"path":571,"stem":572},"Parcours de graphes — DFS, BFS, cycles, chemins","\u002Fnsi-tale\u002Fte-algorithmique\u002Fgraphes-parcours","2.nsi-tale\u002Fte-algorithmique\u002F2.graphes-parcours",{"title":574,"path":575,"stem":576},"Diviser pour régner","\u002Fnsi-tale\u002Fte-algorithmique\u002Fdiviser-pour-regner","2.nsi-tale\u002Fte-algorithmique\u002F3.diviser-pour-regner",{"title":578,"path":579,"stem":580},"Programmation dynamique","\u002Fnsi-tale\u002Fte-algorithmique\u002Fprogrammation-dynamique","2.nsi-tale\u002Fte-algorithmique\u002F4.programmation-dynamique",{"title":582,"path":583,"stem":584},"Recherche textuelle — l'algorithme de Boyer-Moore","\u002Fnsi-tale\u002Fte-algorithmique\u002Frecherche-textuelle","2.nsi-tale\u002Fte-algorithmique\u002F5.recherche-textuelle",[586,1971,3576,5552,7178],{"id":587,"title":335,"bo":588,"body":589,"description":1955,"eval":1956,"extension":1957,"labo":1956,"meta":1958,"navigation":1346,"path":336,"quizzes":1959,"readingTime":663,"seo":1969,"stem":337,"tp":1956,"__hash__":1970},"cours\u002F1.nsi-1ere\u002Fpe-ihm-web\u002F1.html-css-bases.md",[],{"type":590,"value":591,"toc":1944},"minimark",[592,597,610,623,643,647,650,679,698,735,745,768,772,970,973,1082,1116,1120,1143,1254,1258,1280,1390,1396,1475,1499,1503,1506,1616,1619,1623,1626,1655,1710,1797,1815,1819,1873,1900,1904,1941],[593,594,596],"h2",{"id":595},"introduction","Introduction",[598,599,600,601,605,606,609],"p",{},"Avant de rendre une page Web interactive, encore faut-il qu'elle existe sous\nune forme manipulable. Cette forme, c'est le ",[602,603,604],"strong",{},"HTML"," (HyperText Markup\nLanguage) pour la structure, et le ",[602,607,608],{},"CSS"," (Cascading Style Sheets) pour la\nprésentation. Vous avez probablement croisé ces deux langages en classe de\nSeconde ; ce cours en rappelle les fondamentaux et pose des ressources pour\ncombler les éventuels manques, car tout le reste du chapitre — événements,\nDOM, formulaires — s'appuie sur eux.",[611,612,613],"note",{},[598,614,615,618,619,622],{},[602,616,617],{},"Pour réviser HTML et CSS",", voir le cours SNT de Seconde\n",[620,621,51],"a",{"href":52},".\nSi vous n'avez pas fait SNT, ou si certains points vous échappent, ce cours\nen présente toutes les bases sans prérequis.",[598,624,625,626,629,630,634,635,638,639,642],{},"Une page Web est un arbre de ",[602,627,628],{},"balises"," imbriquées : ",[631,632,633],"code",{},"\u003Chtml>"," contient\n",[631,636,637],{},"\u003Chead>"," (métadonnées invisibles) et ",[631,640,641],{},"\u003Cbody>"," (contenu visible). Le navigateur\nlit ce code, construit une représentation interne, puis l'affiche.",[593,644,646],{"id":645},"anatomie-dune-balise-html","Anatomie d'une balise HTML",[598,648,649],{},"Une balise s'écrit entre chevrons et délimite un contenu :",[651,652,657],"pre",{"className":653,"code":654,"language":655,"meta":656,"style":656},"language-html shiki shiki-themes github-light github-light github-dark","\u003Cp>Bonjour, monde.\u003C\u002Fp>\n","html","",[631,658,659],{"__ignoreMap":656},[660,661,664,668,671,674,676],"span",{"class":662,"line":663},"line",1,[660,665,667],{"class":666},"sxrX7","\u003C",[660,669,598],{"class":670},"sovSZ",[660,672,673],{"class":666},">Bonjour, monde.\u003C\u002F",[660,675,598],{"class":670},[660,677,678],{"class":666},">\n",[598,680,681,682,685,686,689,690,693,694,697],{},"Ici, ",[631,683,684],{},"\u003Cp>"," ouvre un paragraphe, ",[631,687,688],{},"\u003C\u002Fp>"," le ferme. Une balise peut porter des\n",[602,691,692],{},"attributs"," sous forme ",[631,695,696],{},"nom=\"valeur\""," :",[651,699,701],{"className":653,"code":700,"language":655,"meta":656,"style":656},"\u003Ca href=\"https:\u002F\u002Fnsi.rocks\" target=\"_blank\">Site du cours\u003C\u002Fa>\n",[631,702,703],{"__ignoreMap":656},[660,704,705,707,709,713,716,720,723,725,728,731,733],{"class":662,"line":663},[660,706,667],{"class":666},[660,708,620],{"class":670},[660,710,712],{"class":711},"snPdu"," href",[660,714,715],{"class":666},"=",[660,717,719],{"class":718},"sIIMD","\"https:\u002F\u002Fnsi.rocks\"",[660,721,722],{"class":711}," target",[660,724,715],{"class":666},[660,726,727],{"class":718},"\"_blank\"",[660,729,730],{"class":666},">Site du cours\u003C\u002F",[660,732,620],{"class":670},[660,734,678],{"class":666},[598,736,737,740,741,744],{},[631,738,739],{},"href"," indique la destination du lien, ",[631,742,743],{},"target=\"_blank\""," demande l'ouverture\ndans un nouvel onglet.",[611,746,747],{},[598,748,749,750,753,754,757,758,757,761,757,764,767],{},"Certaines balises sont ",[602,751,752],{},"auto-fermantes"," car elles n'ont pas de contenu :\n",[631,755,756],{},"\u003Cimg src=\"photo.jpg\" alt=\"Description\">",", ",[631,759,760],{},"\u003Cbr>",[631,762,763],{},"\u003Cinput>",[631,765,766],{},"\u003Chr>",".",[593,769,771],{"id":770},"une-page-minimale-complète","Une page minimale complète",[651,773,775],{"className":653,"code":774,"language":655,"meta":656,"style":656},"\u003C!DOCTYPE html>\n\u003Chtml lang=\"fr\">\n  \u003Chead>\n    \u003Cmeta charset=\"UTF-8\">\n    \u003Ctitle>Ma première page\u003C\u002Ftitle>\n  \u003C\u002Fhead>\n  \u003Cbody>\n    \u003Ch1>Bienvenue\u003C\u002Fh1>\n    \u003Cp>Voici un paragraphe d'introduction.\u003C\u002Fp>\n    \u003Cul>\n      \u003Cli>Premier point\u003C\u002Fli>\n      \u003Cli>Deuxième point\u003C\u002Fli>\n    \u003C\u002Ful>\n  \u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[631,776,777,790,807,818,837,852,862,872,887,901,911,927,941,951,960],{"__ignoreMap":656},[660,778,779,782,785,788],{"class":662,"line":663},[660,780,781],{"class":666},"\u003C!",[660,783,784],{"class":670},"DOCTYPE",[660,786,787],{"class":711}," html",[660,789,678],{"class":666},[660,791,793,795,797,800,802,805],{"class":662,"line":792},2,[660,794,667],{"class":666},[660,796,655],{"class":670},[660,798,799],{"class":711}," lang",[660,801,715],{"class":666},[660,803,804],{"class":718},"\"fr\"",[660,806,678],{"class":666},[660,808,810,813,816],{"class":662,"line":809},3,[660,811,812],{"class":666},"  \u003C",[660,814,815],{"class":670},"head",[660,817,678],{"class":666},[660,819,821,824,827,830,832,835],{"class":662,"line":820},4,[660,822,823],{"class":666},"    \u003C",[660,825,826],{"class":670},"meta",[660,828,829],{"class":711}," charset",[660,831,715],{"class":666},[660,833,834],{"class":718},"\"UTF-8\"",[660,836,678],{"class":666},[660,838,840,842,845,848,850],{"class":662,"line":839},5,[660,841,823],{"class":666},[660,843,844],{"class":670},"title",[660,846,847],{"class":666},">Ma première page\u003C\u002F",[660,849,844],{"class":670},[660,851,678],{"class":666},[660,853,855,858,860],{"class":662,"line":854},6,[660,856,857],{"class":666},"  \u003C\u002F",[660,859,815],{"class":670},[660,861,678],{"class":666},[660,863,865,867,870],{"class":662,"line":864},7,[660,866,812],{"class":666},[660,868,869],{"class":670},"body",[660,871,678],{"class":666},[660,873,875,877,880,883,885],{"class":662,"line":874},8,[660,876,823],{"class":666},[660,878,879],{"class":670},"h1",[660,881,882],{"class":666},">Bienvenue\u003C\u002F",[660,884,879],{"class":670},[660,886,678],{"class":666},[660,888,890,892,894,897,899],{"class":662,"line":889},9,[660,891,823],{"class":666},[660,893,598],{"class":670},[660,895,896],{"class":666},">Voici un paragraphe d'introduction.\u003C\u002F",[660,898,598],{"class":670},[660,900,678],{"class":666},[660,902,904,906,909],{"class":662,"line":903},10,[660,905,823],{"class":666},[660,907,908],{"class":670},"ul",[660,910,678],{"class":666},[660,912,914,917,920,923,925],{"class":662,"line":913},11,[660,915,916],{"class":666},"      \u003C",[660,918,919],{"class":670},"li",[660,921,922],{"class":666},">Premier point\u003C\u002F",[660,924,919],{"class":670},[660,926,678],{"class":666},[660,928,930,932,934,937,939],{"class":662,"line":929},12,[660,931,916],{"class":666},[660,933,919],{"class":670},[660,935,936],{"class":666},">Deuxième point\u003C\u002F",[660,938,919],{"class":670},[660,940,678],{"class":666},[660,942,944,947,949],{"class":662,"line":943},13,[660,945,946],{"class":666},"    \u003C\u002F",[660,948,908],{"class":670},[660,950,678],{"class":666},[660,952,954,956,958],{"class":662,"line":953},14,[660,955,857],{"class":666},[660,957,869],{"class":670},[660,959,678],{"class":666},[660,961,963,966,968],{"class":662,"line":962},15,[660,964,965],{"class":666},"\u003C\u002F",[660,967,655],{"class":670},[660,969,678],{"class":666},[598,971,972],{},"Quelques balises structurantes à connaître :",[974,975,976,989],"table",{},[977,978,979],"thead",{},[980,981,982,986],"tr",{},[983,984,985],"th",{},"Balise",[983,987,988],{},"Rôle",[990,991,992,1007,1016,1032,1042,1052,1062,1072],"tbody",{},[980,993,994,1004],{},[995,996,997,1000,1001],"td",{},[631,998,999],{},"\u003Ch1>"," à ",[631,1002,1003],{},"\u003Ch6>",[995,1005,1006],{},"Titres hiérarchisés",[980,1008,1009,1013],{},[995,1010,1011],{},[631,1012,684],{},[995,1014,1015],{},"Paragraphe de texte",[980,1017,1018,1029],{},[995,1019,1020,757,1023,757,1026],{},[631,1021,1022],{},"\u003Cul>",[631,1024,1025],{},"\u003Col>",[631,1027,1028],{},"\u003Cli>",[995,1030,1031],{},"Listes non ordonnées \u002F ordonnées",[980,1033,1034,1039],{},[995,1035,1036],{},[631,1037,1038],{},"\u003Ca href=\"…\">",[995,1040,1041],{},"Lien hypertexte",[980,1043,1044,1049],{},[995,1045,1046],{},[631,1047,1048],{},"\u003Cimg src=\"…\" alt=\"…\">",[995,1050,1051],{},"Image",[980,1053,1054,1059],{},[995,1055,1056],{},[631,1057,1058],{},"\u003Cdiv>",[995,1060,1061],{},"Conteneur générique (bloc)",[980,1063,1064,1069],{},[995,1065,1066],{},[631,1067,1068],{},"\u003Cspan>",[995,1070,1071],{},"Conteneur générique (inline)",[980,1073,1074,1079],{},[995,1075,1076],{},[631,1077,1078],{},"\u003Cbutton>",[995,1080,1081],{},"Bouton cliquable",[1083,1084,1087,1093],"self-eval-qcm",{"correct":1085,"slug":1086},"1","html-css-bases-c1",[1088,1089,1090],"template",{"v-slot:question":656},[598,1091,1092],{},"Quelle balise sert à créer un lien hypertexte ?",[1088,1094,1095],{"v-slot:choices":656},[908,1096,1097,1102,1107,1112],{},[919,1098,1099],{},[631,1100,1101],{},"\u003Clink>",[919,1103,1104],{},[631,1105,1106],{},"\u003Ca>",[919,1108,1109],{},[631,1110,1111],{},"\u003Chref>",[919,1113,1114],{},[631,1115,1078],{},[593,1117,1119],{"id":1118},"larbre-du-document","L'arbre du document",[598,1121,1122,1123,1126,1127,1129,1130,1133,1134,1136,1137,1139,1140,1142],{},"Une page HTML forme une ",[602,1124,1125],{},"arborescence"," : chaque balise a un parent (sauf\n",[631,1128,633],{},", racine) et peut avoir des enfants. Cette structure est ce que\nJavaScript manipulera plus tard, sous le nom de ",[602,1131,1132],{},"DOM"," (Document Object\nModel). Pour l'instant, retenez que la position d'une balise dans l'arbre est\ncruciale — un ",[631,1135,1028],{}," doit vivre dans un ",[631,1138,1022],{}," ou ",[631,1141,1025],{},", jamais isolé.",[651,1144,1146],{"className":653,"code":1145,"language":655,"meta":656,"style":656},"\u003Cbody>\n  \u003Cheader>\n    \u003Ch1>Titre du site\u003C\u002Fh1>\n  \u003C\u002Fheader>\n  \u003Cmain>\n    \u003Carticle>\n      \u003Ch2>Un article\u003C\u002Fh2>\n      \u003Cp>Son contenu.\u003C\u002Fp>\n    \u003C\u002Farticle>\n  \u003C\u002Fmain>\n\u003C\u002Fbody>\n",[631,1147,1148,1156,1165,1178,1186,1195,1204,1217,1230,1238,1246],{"__ignoreMap":656},[660,1149,1150,1152,1154],{"class":662,"line":663},[660,1151,667],{"class":666},[660,1153,869],{"class":670},[660,1155,678],{"class":666},[660,1157,1158,1160,1163],{"class":662,"line":792},[660,1159,812],{"class":666},[660,1161,1162],{"class":670},"header",[660,1164,678],{"class":666},[660,1166,1167,1169,1171,1174,1176],{"class":662,"line":809},[660,1168,823],{"class":666},[660,1170,879],{"class":670},[660,1172,1173],{"class":666},">Titre du site\u003C\u002F",[660,1175,879],{"class":670},[660,1177,678],{"class":666},[660,1179,1180,1182,1184],{"class":662,"line":820},[660,1181,857],{"class":666},[660,1183,1162],{"class":670},[660,1185,678],{"class":666},[660,1187,1188,1190,1193],{"class":662,"line":839},[660,1189,812],{"class":666},[660,1191,1192],{"class":670},"main",[660,1194,678],{"class":666},[660,1196,1197,1199,1202],{"class":662,"line":854},[660,1198,823],{"class":666},[660,1200,1201],{"class":670},"article",[660,1203,678],{"class":666},[660,1205,1206,1208,1210,1213,1215],{"class":662,"line":864},[660,1207,916],{"class":666},[660,1209,593],{"class":670},[660,1211,1212],{"class":666},">Un article\u003C\u002F",[660,1214,593],{"class":670},[660,1216,678],{"class":666},[660,1218,1219,1221,1223,1226,1228],{"class":662,"line":874},[660,1220,916],{"class":666},[660,1222,598],{"class":670},[660,1224,1225],{"class":666},">Son contenu.\u003C\u002F",[660,1227,598],{"class":670},[660,1229,678],{"class":666},[660,1231,1232,1234,1236],{"class":662,"line":889},[660,1233,946],{"class":666},[660,1235,1201],{"class":670},[660,1237,678],{"class":666},[660,1239,1240,1242,1244],{"class":662,"line":903},[660,1241,857],{"class":666},[660,1243,1192],{"class":670},[660,1245,678],{"class":666},[660,1247,1248,1250,1252],{"class":662,"line":913},[660,1249,965],{"class":666},[660,1251,869],{"class":670},[660,1253,678],{"class":666},[593,1255,1257],{"id":1256},"css-donner-du-style","CSS — donner du style",[598,1259,1260,1261,1264,1265,1268,1269,1272,1273,1276,1277,697],{},"Le HTML décrit ",[602,1262,1263],{},"quoi",", le CSS décrit ",[602,1266,1267],{},"comment c'est affiché",". Le CSS\nfonctionne par ",[602,1270,1271],{},"règles",", chaque règle associant un ",[602,1274,1275],{},"sélecteur"," à des\n",[602,1278,1279],{},"propriétés",[651,1281,1285],{"className":1282,"code":1283,"language":1284,"meta":656,"style":656},"language-css shiki shiki-themes github-light github-light github-dark","p {\n  color: navy;\n  font-size: 18px;\n  line-height: 1.5;\n}\n\nh1 {\n  text-align: center;\n  border-bottom: 2px solid gray;\n}\n","css",[631,1286,1287,1294,1309,1325,1337,1342,1348,1354,1366,1386],{"__ignoreMap":656},[660,1288,1289,1291],{"class":662,"line":663},[660,1290,598],{"class":670},[660,1292,1293],{"class":666}," {\n",[660,1295,1296,1300,1303,1306],{"class":662,"line":792},[660,1297,1299],{"class":1298},"sBjJW","  color",[660,1301,1302],{"class":666},": ",[660,1304,1305],{"class":1298},"navy",[660,1307,1308],{"class":666},";\n",[660,1310,1311,1314,1316,1319,1323],{"class":662,"line":809},[660,1312,1313],{"class":1298},"  font-size",[660,1315,1302],{"class":666},[660,1317,1318],{"class":1298},"18",[660,1320,1322],{"class":1321},"s8jYJ","px",[660,1324,1308],{"class":666},[660,1326,1327,1330,1332,1335],{"class":662,"line":820},[660,1328,1329],{"class":1298},"  line-height",[660,1331,1302],{"class":666},[660,1333,1334],{"class":1298},"1.5",[660,1336,1308],{"class":666},[660,1338,1339],{"class":662,"line":839},[660,1340,1341],{"class":666},"}\n",[660,1343,1344],{"class":662,"line":854},[660,1345,1347],{"emptyLinePlaceholder":1346},true,"\n",[660,1349,1350,1352],{"class":662,"line":864},[660,1351,879],{"class":670},[660,1353,1293],{"class":666},[660,1355,1356,1359,1361,1364],{"class":662,"line":874},[660,1357,1358],{"class":1298},"  text-align",[660,1360,1302],{"class":666},[660,1362,1363],{"class":1298},"center",[660,1365,1308],{"class":666},[660,1367,1368,1371,1373,1376,1378,1381,1384],{"class":662,"line":889},[660,1369,1370],{"class":1298},"  border-bottom",[660,1372,1302],{"class":666},[660,1374,1375],{"class":1298},"2",[660,1377,1322],{"class":1321},[660,1379,1380],{"class":1298}," solid",[660,1382,1383],{"class":1298}," gray",[660,1385,1308],{"class":666},[660,1387,1388],{"class":662,"line":903},[660,1389,1341],{"class":666},[598,1391,1392,1393,697],{},"Les principaux ",[602,1394,1395],{},"sélecteurs",[974,1397,1398,1408],{},[977,1399,1400],{},[980,1401,1402,1405],{},[983,1403,1404],{},"Sélecteur",[983,1406,1407],{},"Cible",[990,1409,1410,1421,1434,1447,1462],{},[980,1411,1412,1416],{},[995,1413,1414],{},[631,1415,598],{},[995,1417,1418,1419],{},"Toutes les balises ",[631,1420,684],{},[980,1422,1423,1428],{},[995,1424,1425],{},[631,1426,1427],{},".intro",[995,1429,1430,1431],{},"Toutes les balises avec ",[631,1432,1433],{},"class=\"intro\"",[980,1435,1436,1441],{},[995,1437,1438],{},[631,1439,1440],{},"#header",[995,1442,1443,1444],{},"La balise unique avec ",[631,1445,1446],{},"id=\"header\"",[980,1448,1449,1454],{},[995,1450,1451],{},[631,1452,1453],{},"ul li",[995,1455,1456,1457,1459,1460],{},"Les ",[631,1458,1028],{}," qui descendent d'un ",[631,1461,1022],{},[980,1463,1464,1469],{},[995,1465,1466],{},[631,1467,1468],{},"button:hover",[995,1470,1471,1472,1474],{},"Un ",[631,1473,1078],{}," au survol de la souris",[1083,1476,1478,1483],{"correct":1375,"slug":1477},"html-css-bases-c2",[1088,1479,1480],{"v-slot:question":656},[598,1481,1482],{},"Comment cibler en CSS la balise avec id='menu' ?",[1088,1484,1485],{"v-slot:choices":656},[908,1486,1487,1490,1493,1496],{},[919,1488,1489],{},"menu",[919,1491,1492],{},".menu",[919,1494,1495],{},"#menu",[919,1497,1498],{},"*menu",[593,1500,1502],{"id":1501},"lier-html-et-css","Lier HTML et CSS",[598,1504,1505],{},"Trois manières de coller du CSS à du HTML :",[651,1507,1509],{"className":653,"code":1508,"language":655,"meta":656,"style":656},"\u003C!-- 1. CSS externe (recommandé) -->\n\u003Clink rel=\"stylesheet\" href=\"style.css\">\n\n\u003C!-- 2. CSS dans la page -->\n\u003Cstyle>\n  p { color: red; }\n\u003C\u002Fstyle>\n\n\u003C!-- 3. CSS inline (à éviter) -->\n\u003Cp style=\"color: red;\">Texte rouge\u003C\u002Fp>\n",[631,1510,1511,1517,1541,1545,1550,1559,1578,1586,1590,1595],{"__ignoreMap":656},[660,1512,1513],{"class":662,"line":663},[660,1514,1516],{"class":1515},"sCsY4","\u003C!-- 1. CSS externe (recommandé) -->\n",[660,1518,1519,1521,1524,1527,1529,1532,1534,1536,1539],{"class":662,"line":792},[660,1520,667],{"class":666},[660,1522,1523],{"class":670},"link",[660,1525,1526],{"class":711}," rel",[660,1528,715],{"class":666},[660,1530,1531],{"class":718},"\"stylesheet\"",[660,1533,712],{"class":711},[660,1535,715],{"class":666},[660,1537,1538],{"class":718},"\"style.css\"",[660,1540,678],{"class":666},[660,1542,1543],{"class":662,"line":809},[660,1544,1347],{"emptyLinePlaceholder":1346},[660,1546,1547],{"class":662,"line":820},[660,1548,1549],{"class":1515},"\u003C!-- 2. CSS dans la page -->\n",[660,1551,1552,1554,1557],{"class":662,"line":839},[660,1553,667],{"class":666},[660,1555,1556],{"class":670},"style",[660,1558,678],{"class":666},[660,1560,1561,1564,1567,1570,1572,1575],{"class":662,"line":854},[660,1562,1563],{"class":670},"  p",[660,1565,1566],{"class":666}," { ",[660,1568,1569],{"class":1298},"color",[660,1571,1302],{"class":666},[660,1573,1574],{"class":1298},"red",[660,1576,1577],{"class":666},"; }\n",[660,1579,1580,1582,1584],{"class":662,"line":864},[660,1581,965],{"class":666},[660,1583,1556],{"class":670},[660,1585,678],{"class":666},[660,1587,1588],{"class":662,"line":874},[660,1589,1347],{"emptyLinePlaceholder":1346},[660,1591,1592],{"class":662,"line":889},[660,1593,1594],{"class":1515},"\u003C!-- 3. CSS inline (à éviter) -->\n",[660,1596,1597,1599,1601,1604,1606,1609,1612,1614],{"class":662,"line":903},[660,1598,667],{"class":666},[660,1600,598],{"class":670},[660,1602,1603],{"class":711}," style",[660,1605,715],{"class":666},[660,1607,1608],{"class":718},"\"color: red;\"",[660,1610,1611],{"class":666},">Texte rouge\u003C\u002F",[660,1613,598],{"class":670},[660,1615,678],{"class":666},[598,1617,1618],{},"La méthode externe est presque toujours la bonne : un seul fichier de styles,\npartagé par toutes les pages d'un site.",[593,1620,1622],{"id":1621},"classes-et-identifiants","Classes et identifiants",[598,1624,1625],{},"Deux attributs HTML omniprésents :",[908,1627,1628,1642],{},[919,1629,1630,1633,1634,1637,1638,1641],{},[631,1631,1632],{},"id=\"…\""," : identifiant ",[602,1635,1636],{},"unique"," dans la page. Un seul ",[631,1639,1640],{},"id=\"footer\""," par\ndocument. Pratique pour cibler depuis JavaScript ou CSS.",[919,1643,1644,1647,1648,1651,1652,767],{},[631,1645,1646],{},"class=\"…\""," : étiquette ",[602,1649,1650],{},"partagée"," entre plusieurs balises. Une même balise\npeut porter plusieurs classes : ",[631,1653,1654],{},"class=\"bouton primaire grand\"",[651,1656,1658],{"className":653,"code":1657,"language":655,"meta":656,"style":656},"\u003Cbutton id=\"envoi\" class=\"bouton primaire\">Envoyer\u003C\u002Fbutton>\n\u003Cbutton class=\"bouton secondaire\">Annuler\u003C\u002Fbutton>\n",[631,1659,1660,1690],{"__ignoreMap":656},[660,1661,1662,1664,1667,1670,1672,1675,1678,1680,1683,1686,1688],{"class":662,"line":663},[660,1663,667],{"class":666},[660,1665,1666],{"class":670},"button",[660,1668,1669],{"class":711}," id",[660,1671,715],{"class":666},[660,1673,1674],{"class":718},"\"envoi\"",[660,1676,1677],{"class":711}," class",[660,1679,715],{"class":666},[660,1681,1682],{"class":718},"\"bouton primaire\"",[660,1684,1685],{"class":666},">Envoyer\u003C\u002F",[660,1687,1666],{"class":670},[660,1689,678],{"class":666},[660,1691,1692,1694,1696,1698,1700,1703,1706,1708],{"class":662,"line":792},[660,1693,667],{"class":666},[660,1695,1666],{"class":670},[660,1697,1677],{"class":711},[660,1699,715],{"class":666},[660,1701,1702],{"class":718},"\"bouton secondaire\"",[660,1704,1705],{"class":666},">Annuler\u003C\u002F",[660,1707,1666],{"class":670},[660,1709,678],{"class":666},[651,1711,1713],{"className":1282,"code":1712,"language":1284,"meta":656,"style":656},".bouton {\n  padding: 8px 16px;\n  border-radius: 4px;\n}\n\n#envoi {\n  background-color: green;\n  color: white;\n}\n",[631,1714,1715,1722,1741,1755,1759,1763,1770,1782,1793],{"__ignoreMap":656},[660,1716,1717,1720],{"class":662,"line":663},[660,1718,1719],{"class":711},".bouton",[660,1721,1293],{"class":666},[660,1723,1724,1727,1729,1732,1734,1737,1739],{"class":662,"line":792},[660,1725,1726],{"class":1298},"  padding",[660,1728,1302],{"class":666},[660,1730,1731],{"class":1298},"8",[660,1733,1322],{"class":1321},[660,1735,1736],{"class":1298}," 16",[660,1738,1322],{"class":1321},[660,1740,1308],{"class":666},[660,1742,1743,1746,1748,1751,1753],{"class":662,"line":809},[660,1744,1745],{"class":1298},"  border-radius",[660,1747,1302],{"class":666},[660,1749,1750],{"class":1298},"4",[660,1752,1322],{"class":1321},[660,1754,1308],{"class":666},[660,1756,1757],{"class":662,"line":820},[660,1758,1341],{"class":666},[660,1760,1761],{"class":662,"line":839},[660,1762,1347],{"emptyLinePlaceholder":1346},[660,1764,1765,1768],{"class":662,"line":854},[660,1766,1767],{"class":711},"#envoi",[660,1769,1293],{"class":666},[660,1771,1772,1775,1777,1780],{"class":662,"line":864},[660,1773,1774],{"class":1298},"  background-color",[660,1776,1302],{"class":666},[660,1778,1779],{"class":1298},"green",[660,1781,1308],{"class":666},[660,1783,1784,1786,1788,1791],{"class":662,"line":874},[660,1785,1299],{"class":1298},[660,1787,1302],{"class":666},[660,1789,1790],{"class":1298},"white",[660,1792,1308],{"class":666},[660,1794,1795],{"class":662,"line":889},[660,1796,1341],{"class":666},[1798,1799,1800],"warning",{},[598,1801,1471,1802,1805,1806,1808,1809,1811,1812,767],{},[631,1803,1804],{},"id"," doit être ",[602,1807,1636],{}," dans la page. Plusieurs balises avec le même ",[631,1810,1804],{},"\nprovoquent des bugs subtils, notamment quand JavaScript essaie de cibler\nl'élément avec ",[631,1813,1814],{},"document.getElementById",[593,1816,1818],{"id":1817},"cas-particuliers-et-pièges","Cas particuliers et pièges",[908,1820,1821,1830,1836,1853],{},[919,1822,1823,1826,1827,1829],{},[602,1824,1825],{},"Balises non fermées"," : oublier ",[631,1828,688],{}," peut casser silencieusement la mise\nen page. Le navigateur essaie de réparer, mais le résultat est imprévisible.",[919,1831,1832,1835],{},[602,1833,1834],{},"Indentation cosmétique"," : l'indentation n'a aucune valeur sémantique en\nHTML. Elle aide la lecture humaine, rien de plus.",[919,1837,1838,1841,1842,1845,1846,1848,1849,1852],{},[602,1839,1840],{},"Sensibilité à la casse"," : ",[631,1843,1844],{},"\u003CDIV>"," et ",[631,1847,1058],{}," sont équivalents en HTML5,\nmais la convention est ",[602,1850,1851],{},"tout en minuscules",". Idem pour les attributs.",[919,1854,1855,1841,1858,1861,1862,1865,1866,1845,1869,1872],{},[602,1856,1857],{},"Espaces dans les attributs",[631,1859,1860],{},"class=\"bouton primaire\""," définit ",[602,1863,1864],{},"deux","\nclasses (",[631,1867,1868],{},"bouton",[631,1870,1871],{},"primaire","), pas une seule.",[1083,1874,1877,1888],{"correct":1875,"slug":1876},"3","html-css-bases-c3",[1088,1878,1879,1882],{"v-slot:question":656},[598,1880,1881],{},"Combien de classes pour ",[598,1883,1887],{"className":1884},[611,1885,1886],"importante","alerte"," ?",[1088,1889,1890],{"v-slot:choices":656},[908,1891,1892,1894,1896,1898],{},[919,1893,1085],{},[919,1895,1375],{},[919,1897,1875],{},[919,1899,1750],{},[593,1901,1903],{"id":1902},"pour-aller-plus-loin","Pour aller plus loin",[598,1905,1906,1907,1910,1911,757,1914,1917,1918,757,1921,757,1924,757,1927,1930,1931,1845,1934,1937,1938,1940],{},"Le HTML moderne propose des balises ",[602,1908,1909],{},"sémantiques"," (",[631,1912,1913],{},"\u003Cheader>",[631,1915,1916],{},"\u003Cnav>",",\n",[631,1919,1920],{},"\u003Cmain>",[631,1922,1923],{},"\u003Carticle>",[631,1925,1926],{},"\u003Csection>",[631,1928,1929],{},"\u003Cfooter>",") qui décrivent le rôle des\nzones d'une page. CSS, lui, a évolué vers des modèles de mise en page\npuissants comme ",[602,1932,1933],{},"Flexbox",[602,1935,1936],{},"Grid",". Vous les approfondirez en pratique\nlors des TP du chapitre — pour l'instant, l'essentiel est de savoir lire un\narbre HTML et de retrouver une balise par son ",[631,1939,1804],{}," ou sa classe.",[1556,1942,1943],{},"html pre.shiki code .sxrX7, html code.shiki .sxrX7{--shiki-light:#24292E;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sovSZ, html code.shiki .sovSZ{--shiki-light:#22863A;--shiki-default:#22863A;--shiki-dark:#85E89D}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 .snPdu, html code.shiki .snPdu{--shiki-light:#6F42C1;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sIIMD, html code.shiki .sIIMD{--shiki-light:#032F62;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sBjJW, html code.shiki .sBjJW{--shiki-light:#005CC5;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s8jYJ, html code.shiki .s8jYJ{--shiki-light:#D73A49;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sCsY4, html code.shiki .sCsY4{--shiki-light:#6A737D;--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":656,"searchDepth":792,"depth":792,"links":1945},[1946,1947,1948,1949,1950,1951,1952,1953,1954],{"id":595,"depth":792,"text":596},{"id":645,"depth":792,"text":646},{"id":770,"depth":792,"text":771},{"id":1118,"depth":792,"text":1119},{"id":1256,"depth":792,"text":1257},{"id":1501,"depth":792,"text":1502},{"id":1621,"depth":792,"text":1622},{"id":1817,"depth":792,"text":1818},{"id":1902,"depth":792,"text":1903},"Les briques de base d'une page Web — balises, attributs, sélecteurs CSS. Socle indispensable avant tout JavaScript.",null,"md",{},[1960,1964,1966],{"slug":1086,"kind":1961,"question":1092,"choices":1962,"correct":1085,"multi":1963,"explanation":656},"qcm",[1101,1106,1111,1078],false,{"slug":1477,"kind":1961,"question":1482,"choices":1965,"correct":1375,"multi":1963,"explanation":656},[1489,1492,1495,1498],{"slug":1876,"kind":1961,"question":1967,"choices":1968,"correct":1875,"multi":1963,"explanation":656},"Combien de classes pour  ?",[1085,1375,1875,1750],{"title":335,"description":1955},"oZ0GnA_yR0409J6i_6ktPkNB_XHvgQB2hsKHMdSnrnk",{"id":1972,"title":339,"bo":1973,"body":1975,"description":3567,"eval":1956,"extension":1957,"labo":1956,"meta":3568,"navigation":1346,"path":340,"quizzes":3569,"readingTime":663,"seo":3574,"stem":341,"tp":1956,"__hash__":3575},"cours\u002F1.nsi-1ere\u002Fpe-ihm-web\u002F2.formulaires.md",[1974],"PE01",{"type":590,"value":1976,"toc":3555},[1977,1979,2001,2007,2011,2033,2216,2221,2260,2265,2342,2354,2360,2368,2631,2636,2678,2681,2770,2790,2794,2815,2911,2920,2928,2933,2961,2965,2976,3068,3071,3124,3128,3152,3162,3166,3249,3268,3290,3294,3301,3439,3465,3479,3481,3536,3538,3552],[593,1978,596],{"id":595},[598,1980,1981,1982,1985,1986,1989,1990,1845,1995,2000],{},"Le ",[602,1983,1984],{},"formulaire"," est la principale interface de saisie d'une page Web. Champ\nde recherche d'un moteur, page de connexion, sondage, panier d'un site\nmarchand : derrière chacun se cache une balise ",[631,1987,1988],{},"\u003Cform>"," qui collecte les\nsaisies de l'utilisateur et les transmet à un serveur. Ce cours étudie sa\nstructure et les deux méthodes de transmission, ",[602,1991,1992],{},[631,1993,1994],{},"GET",[602,1996,1997],{},[631,1998,1999],{},"POST",", dont\nle choix n'est pas anodin.",[598,2002,2003,2004,767],{},"Voir ",[2005,2006],"bo-ref",{"code":1974},[593,2008,2010],{"id":2009},"anatomie-dun-formulaire","Anatomie d'un formulaire",[598,2012,2013,2014,2016,2017,2020,2021,757,2023,757,2026,2029,2030,697],{},"Un formulaire est délimité par la balise ",[631,2015,1988],{},". Il contient des ",[602,2018,2019],{},"champs","\n(",[631,2022,763],{},[631,2024,2025],{},"\u003Ctextarea>",[631,2027,2028],{},"\u003Cselect>",") et un ",[602,2031,2032],{},"bouton de soumission",[651,2034,2036],{"className":653,"code":2035,"language":655,"meta":656,"style":656},"\u003Cform action=\"\u002Finscription\" method=\"post\">\n  \u003Clabel for=\"email\">Adresse e-mail :\u003C\u002Flabel>\n  \u003Cinput type=\"email\" id=\"email\" name=\"email\" required>\n\n  \u003Clabel for=\"age\">Âge :\u003C\u002Flabel>\n  \u003Cinput type=\"number\" id=\"age\" name=\"age\" min=\"0\" max=\"120\">\n\n  \u003Cbutton type=\"submit\">S'inscrire\u003C\u002Fbutton>\n\u003C\u002Fform>\n",[631,2037,2038,2063,2085,2117,2121,2141,2184,2188,2208],{"__ignoreMap":656},[660,2039,2040,2042,2045,2048,2050,2053,2056,2058,2061],{"class":662,"line":663},[660,2041,667],{"class":666},[660,2043,2044],{"class":670},"form",[660,2046,2047],{"class":711}," action",[660,2049,715],{"class":666},[660,2051,2052],{"class":718},"\"\u002Finscription\"",[660,2054,2055],{"class":711}," method",[660,2057,715],{"class":666},[660,2059,2060],{"class":718},"\"post\"",[660,2062,678],{"class":666},[660,2064,2065,2067,2070,2073,2075,2078,2081,2083],{"class":662,"line":792},[660,2066,812],{"class":666},[660,2068,2069],{"class":670},"label",[660,2071,2072],{"class":711}," for",[660,2074,715],{"class":666},[660,2076,2077],{"class":718},"\"email\"",[660,2079,2080],{"class":666},">Adresse e-mail :\u003C\u002F",[660,2082,2069],{"class":670},[660,2084,678],{"class":666},[660,2086,2087,2089,2092,2095,2097,2099,2101,2103,2105,2108,2110,2112,2115],{"class":662,"line":809},[660,2088,812],{"class":666},[660,2090,2091],{"class":670},"input",[660,2093,2094],{"class":711}," type",[660,2096,715],{"class":666},[660,2098,2077],{"class":718},[660,2100,1669],{"class":711},[660,2102,715],{"class":666},[660,2104,2077],{"class":718},[660,2106,2107],{"class":711}," name",[660,2109,715],{"class":666},[660,2111,2077],{"class":718},[660,2113,2114],{"class":711}," required",[660,2116,678],{"class":666},[660,2118,2119],{"class":662,"line":820},[660,2120,1347],{"emptyLinePlaceholder":1346},[660,2122,2123,2125,2127,2129,2131,2134,2137,2139],{"class":662,"line":839},[660,2124,812],{"class":666},[660,2126,2069],{"class":670},[660,2128,2072],{"class":711},[660,2130,715],{"class":666},[660,2132,2133],{"class":718},"\"age\"",[660,2135,2136],{"class":666},">Âge :\u003C\u002F",[660,2138,2069],{"class":670},[660,2140,678],{"class":666},[660,2142,2143,2145,2147,2149,2151,2154,2156,2158,2160,2162,2164,2166,2169,2171,2174,2177,2179,2182],{"class":662,"line":854},[660,2144,812],{"class":666},[660,2146,2091],{"class":670},[660,2148,2094],{"class":711},[660,2150,715],{"class":666},[660,2152,2153],{"class":718},"\"number\"",[660,2155,1669],{"class":711},[660,2157,715],{"class":666},[660,2159,2133],{"class":718},[660,2161,2107],{"class":711},[660,2163,715],{"class":666},[660,2165,2133],{"class":718},[660,2167,2168],{"class":711}," min",[660,2170,715],{"class":666},[660,2172,2173],{"class":718},"\"0\"",[660,2175,2176],{"class":711}," max",[660,2178,715],{"class":666},[660,2180,2181],{"class":718},"\"120\"",[660,2183,678],{"class":666},[660,2185,2186],{"class":662,"line":864},[660,2187,1347],{"emptyLinePlaceholder":1346},[660,2189,2190,2192,2194,2196,2198,2201,2204,2206],{"class":662,"line":874},[660,2191,812],{"class":666},[660,2193,1666],{"class":670},[660,2195,2094],{"class":711},[660,2197,715],{"class":666},[660,2199,2200],{"class":718},"\"submit\"",[660,2202,2203],{"class":666},">S'inscrire\u003C\u002F",[660,2205,1666],{"class":670},[660,2207,678],{"class":666},[660,2209,2210,2212,2214],{"class":662,"line":889},[660,2211,965],{"class":666},[660,2213,2044],{"class":670},[660,2215,678],{"class":666},[598,2217,2218,2219,697],{},"Décortiquons les attributs essentiels de ",[631,2220,1988],{},[974,2222,2223,2232],{},[977,2224,2225],{},[980,2226,2227,2230],{},[983,2228,2229],{},"Attribut",[983,2231,988],{},[990,2233,2234,2244],{},[980,2235,2236,2241],{},[995,2237,2238],{},[631,2239,2240],{},"action",[995,2242,2243],{},"URL où sont envoyées les données du formulaire.",[980,2245,2246,2251],{},[995,2247,2248],{},[631,2249,2250],{},"method",[995,2252,2253,2254,1139,2257,767],{},"Méthode HTTP de transmission : ",[631,2255,2256],{},"get",[631,2258,2259],{},"post",[598,2261,2262,2263,697],{},"Et ceux d'un champ ",[631,2264,763],{},[974,2266,2267,2275],{},[977,2268,2269],{},[980,2270,2271,2273],{},[983,2272,2229],{},[983,2274,988],{},[990,2276,2277,2287,2300,2313,2323],{},[980,2278,2279,2284],{},[995,2280,2281],{},[631,2282,2283],{},"type",[995,2285,2286],{},"Genre de champ (texte, mot de passe, e-mail, nombre, case à cocher…).",[980,2288,2289,2294],{},[995,2290,2291],{},[631,2292,2293],{},"name",[995,2295,2296,2299],{},[602,2297,2298],{},"Clé"," sous laquelle la valeur sera envoyée au serveur.",[980,2301,2302,2306],{},[995,2303,2304],{},[631,2305,1804],{},[995,2307,2308,2309,2312],{},"Identifiant unique, utilisé par ",[631,2310,2311],{},"\u003Clabel for=\"…\">"," et JavaScript.",[980,2314,2315,2320],{},[995,2316,2317],{},[631,2318,2319],{},"value",[995,2321,2322],{},"Valeur par défaut, ou valeur saisie.",[980,2324,2325,2339],{},[995,2326,2327,757,2330,757,2333,757,2336],{},[631,2328,2329],{},"required",[631,2331,2332],{},"min",[631,2334,2335],{},"max",[631,2337,2338],{},"pattern",[995,2340,2341],{},"Contraintes de validation côté navigateur.",[611,2343,2344],{},[598,2345,2346,2347,1845,2350,2353],{},"Le couple ",[631,2348,2349],{},"\u003Clabel for=\"email\">…\u003C\u002Flabel>",[631,2351,2352],{},"\u003Cinput id=\"email\">"," lie le\ntexte d'étiquette au champ. Un clic sur l'étiquette focalise le champ — c'est\nun acquis d'accessibilité majeur.",[593,2355,2357,2358],{"id":2356},"le-bestiaire-des-input","Le bestiaire des ",[631,2359,763],{},[598,2361,1981,2362,2364,2365,2367],{},[631,2363,2283],{}," d'un ",[631,2366,763],{}," détermine la nature du champ. Quelques exemples\ncourants :",[651,2369,2371],{"className":653,"code":2370,"language":655,"meta":656,"style":656},"\u003Cinput type=\"text\"     name=\"pseudo\">\n\u003Cinput type=\"password\" name=\"motdepasse\">\n\u003Cinput type=\"email\"    name=\"email\">\n\u003Cinput type=\"number\"   name=\"age\" min=\"0\" max=\"120\">\n\u003Cinput type=\"date\"     name=\"naissance\">\n\u003Cinput type=\"checkbox\" name=\"newsletter\" value=\"oui\">\n\u003Cinput type=\"radio\"    name=\"genre\" value=\"F\">\n\u003Cinput type=\"radio\"    name=\"genre\" value=\"M\">\n\u003Cinput type=\"file\"     name=\"photo\">\n\u003Cinput type=\"hidden\"   name=\"token\" value=\"abc123\">\n",[631,2372,2373,2396,2418,2439,2472,2494,2524,2553,2580,2602],{"__ignoreMap":656},[660,2374,2375,2377,2379,2381,2383,2386,2389,2391,2394],{"class":662,"line":663},[660,2376,667],{"class":666},[660,2378,2091],{"class":670},[660,2380,2094],{"class":711},[660,2382,715],{"class":666},[660,2384,2385],{"class":718},"\"text\"",[660,2387,2388],{"class":711},"     name",[660,2390,715],{"class":666},[660,2392,2393],{"class":718},"\"pseudo\"",[660,2395,678],{"class":666},[660,2397,2398,2400,2402,2404,2406,2409,2411,2413,2416],{"class":662,"line":792},[660,2399,667],{"class":666},[660,2401,2091],{"class":670},[660,2403,2094],{"class":711},[660,2405,715],{"class":666},[660,2407,2408],{"class":718},"\"password\"",[660,2410,2107],{"class":711},[660,2412,715],{"class":666},[660,2414,2415],{"class":718},"\"motdepasse\"",[660,2417,678],{"class":666},[660,2419,2420,2422,2424,2426,2428,2430,2433,2435,2437],{"class":662,"line":809},[660,2421,667],{"class":666},[660,2423,2091],{"class":670},[660,2425,2094],{"class":711},[660,2427,715],{"class":666},[660,2429,2077],{"class":718},[660,2431,2432],{"class":711},"    name",[660,2434,715],{"class":666},[660,2436,2077],{"class":718},[660,2438,678],{"class":666},[660,2440,2441,2443,2445,2447,2449,2451,2454,2456,2458,2460,2462,2464,2466,2468,2470],{"class":662,"line":820},[660,2442,667],{"class":666},[660,2444,2091],{"class":670},[660,2446,2094],{"class":711},[660,2448,715],{"class":666},[660,2450,2153],{"class":718},[660,2452,2453],{"class":711},"   name",[660,2455,715],{"class":666},[660,2457,2133],{"class":718},[660,2459,2168],{"class":711},[660,2461,715],{"class":666},[660,2463,2173],{"class":718},[660,2465,2176],{"class":711},[660,2467,715],{"class":666},[660,2469,2181],{"class":718},[660,2471,678],{"class":666},[660,2473,2474,2476,2478,2480,2482,2485,2487,2489,2492],{"class":662,"line":839},[660,2475,667],{"class":666},[660,2477,2091],{"class":670},[660,2479,2094],{"class":711},[660,2481,715],{"class":666},[660,2483,2484],{"class":718},"\"date\"",[660,2486,2388],{"class":711},[660,2488,715],{"class":666},[660,2490,2491],{"class":718},"\"naissance\"",[660,2493,678],{"class":666},[660,2495,2496,2498,2500,2502,2504,2507,2509,2511,2514,2517,2519,2522],{"class":662,"line":854},[660,2497,667],{"class":666},[660,2499,2091],{"class":670},[660,2501,2094],{"class":711},[660,2503,715],{"class":666},[660,2505,2506],{"class":718},"\"checkbox\"",[660,2508,2107],{"class":711},[660,2510,715],{"class":666},[660,2512,2513],{"class":718},"\"newsletter\"",[660,2515,2516],{"class":711}," value",[660,2518,715],{"class":666},[660,2520,2521],{"class":718},"\"oui\"",[660,2523,678],{"class":666},[660,2525,2526,2528,2530,2532,2534,2537,2539,2541,2544,2546,2548,2551],{"class":662,"line":864},[660,2527,667],{"class":666},[660,2529,2091],{"class":670},[660,2531,2094],{"class":711},[660,2533,715],{"class":666},[660,2535,2536],{"class":718},"\"radio\"",[660,2538,2432],{"class":711},[660,2540,715],{"class":666},[660,2542,2543],{"class":718},"\"genre\"",[660,2545,2516],{"class":711},[660,2547,715],{"class":666},[660,2549,2550],{"class":718},"\"F\"",[660,2552,678],{"class":666},[660,2554,2555,2557,2559,2561,2563,2565,2567,2569,2571,2573,2575,2578],{"class":662,"line":874},[660,2556,667],{"class":666},[660,2558,2091],{"class":670},[660,2560,2094],{"class":711},[660,2562,715],{"class":666},[660,2564,2536],{"class":718},[660,2566,2432],{"class":711},[660,2568,715],{"class":666},[660,2570,2543],{"class":718},[660,2572,2516],{"class":711},[660,2574,715],{"class":666},[660,2576,2577],{"class":718},"\"M\"",[660,2579,678],{"class":666},[660,2581,2582,2584,2586,2588,2590,2593,2595,2597,2600],{"class":662,"line":889},[660,2583,667],{"class":666},[660,2585,2091],{"class":670},[660,2587,2094],{"class":711},[660,2589,715],{"class":666},[660,2591,2592],{"class":718},"\"file\"",[660,2594,2388],{"class":711},[660,2596,715],{"class":666},[660,2598,2599],{"class":718},"\"photo\"",[660,2601,678],{"class":666},[660,2603,2604,2606,2608,2610,2612,2615,2617,2619,2622,2624,2626,2629],{"class":662,"line":903},[660,2605,667],{"class":666},[660,2607,2091],{"class":670},[660,2609,2094],{"class":711},[660,2611,715],{"class":666},[660,2613,2614],{"class":718},"\"hidden\"",[660,2616,2453],{"class":711},[660,2618,715],{"class":666},[660,2620,2621],{"class":718},"\"token\"",[660,2623,2516],{"class":711},[660,2625,715],{"class":666},[660,2627,2628],{"class":718},"\"abc123\"",[660,2630,678],{"class":666},[598,2632,2633,2634,697],{},"Pour un champ de texte multilignes, on préfère ",[631,2635,2025],{},[651,2637,2639],{"className":653,"code":2638,"language":655,"meta":656,"style":656},"\u003Ctextarea name=\"commentaire\" rows=\"4\" cols=\"50\">\u003C\u002Ftextarea>\n",[631,2640,2641],{"__ignoreMap":656},[660,2642,2643,2645,2648,2650,2652,2655,2658,2660,2663,2666,2668,2671,2674,2676],{"class":662,"line":663},[660,2644,667],{"class":666},[660,2646,2647],{"class":670},"textarea",[660,2649,2107],{"class":711},[660,2651,715],{"class":666},[660,2653,2654],{"class":718},"\"commentaire\"",[660,2656,2657],{"class":711}," rows",[660,2659,715],{"class":666},[660,2661,2662],{"class":718},"\"4\"",[660,2664,2665],{"class":711}," cols",[660,2667,715],{"class":666},[660,2669,2670],{"class":718},"\"50\"",[660,2672,2673],{"class":666},">\u003C\u002F",[660,2675,2647],{"class":670},[660,2677,678],{"class":666},[598,2679,2680],{},"Pour un menu déroulant :",[651,2682,2684],{"className":653,"code":2683,"language":655,"meta":656,"style":656},"\u003Cselect name=\"pays\">\n  \u003Coption value=\"fr\">France\u003C\u002Foption>\n  \u003Coption value=\"be\">Belgique\u003C\u002Foption>\n  \u003Coption value=\"ca\">Canada\u003C\u002Foption>\n\u003C\u002Fselect>\n",[631,2685,2686,2702,2722,2742,2762],{"__ignoreMap":656},[660,2687,2688,2690,2693,2695,2697,2700],{"class":662,"line":663},[660,2689,667],{"class":666},[660,2691,2692],{"class":670},"select",[660,2694,2107],{"class":711},[660,2696,715],{"class":666},[660,2698,2699],{"class":718},"\"pays\"",[660,2701,678],{"class":666},[660,2703,2704,2706,2709,2711,2713,2715,2718,2720],{"class":662,"line":792},[660,2705,812],{"class":666},[660,2707,2708],{"class":670},"option",[660,2710,2516],{"class":711},[660,2712,715],{"class":666},[660,2714,804],{"class":718},[660,2716,2717],{"class":666},">France\u003C\u002F",[660,2719,2708],{"class":670},[660,2721,678],{"class":666},[660,2723,2724,2726,2728,2730,2732,2735,2738,2740],{"class":662,"line":809},[660,2725,812],{"class":666},[660,2727,2708],{"class":670},[660,2729,2516],{"class":711},[660,2731,715],{"class":666},[660,2733,2734],{"class":718},"\"be\"",[660,2736,2737],{"class":666},">Belgique\u003C\u002F",[660,2739,2708],{"class":670},[660,2741,678],{"class":666},[660,2743,2744,2746,2748,2750,2752,2755,2758,2760],{"class":662,"line":820},[660,2745,812],{"class":666},[660,2747,2708],{"class":670},[660,2749,2516],{"class":711},[660,2751,715],{"class":666},[660,2753,2754],{"class":718},"\"ca\"",[660,2756,2757],{"class":666},">Canada\u003C\u002F",[660,2759,2708],{"class":670},[660,2761,678],{"class":666},[660,2763,2764,2766,2768],{"class":662,"line":839},[660,2765,965],{"class":666},[660,2767,2692],{"class":670},[660,2769,678],{"class":666},[1083,2771,2773,2778],{"correct":1375,"slug":2772},"formulaires-c1",[1088,2774,2775],{"v-slot:question":656},[598,2776,2777],{},"Quel attribut détermine la clé sous laquelle la valeur d'un champ est envoyée au serveur ?",[1088,2779,2780],{"v-slot:choices":656},[908,2781,2782,2784,2786,2788],{},[919,2783,1804],{},[919,2785,2283],{},[919,2787,2293],{},[919,2789,2319],{},[593,2791,2793],{"id":2792},"get-paramètres-dans-lurl","GET — paramètres dans l'URL",[598,2795,2796,2797,2799,2800,2803,2806,2807,2810,2811,2814],{},"Lorsque la méthode est ",[631,2798,2256],{},", le navigateur encode les paires ",[631,2801,2802],{},"name=value",[602,2804,2805],{},"dans l'URL",", après un ",[631,2808,2809],{},"?",", séparées par des ",[631,2812,2813],{},"&",". Exemple : un formulaire\nde recherche.",[651,2816,2818],{"className":653,"code":2817,"language":655,"meta":656,"style":656},"\u003Cform action=\"\u002Frecherche\" method=\"get\">\n  \u003Cinput type=\"text\" name=\"q\">\n  \u003Cinput type=\"text\" name=\"page\">\n  \u003Cbutton type=\"submit\">Rechercher\u003C\u002Fbutton>\n\u003C\u002Fform>\n",[631,2819,2820,2842,2863,2884,2903],{"__ignoreMap":656},[660,2821,2822,2824,2826,2828,2830,2833,2835,2837,2840],{"class":662,"line":663},[660,2823,667],{"class":666},[660,2825,2044],{"class":670},[660,2827,2047],{"class":711},[660,2829,715],{"class":666},[660,2831,2832],{"class":718},"\"\u002Frecherche\"",[660,2834,2055],{"class":711},[660,2836,715],{"class":666},[660,2838,2839],{"class":718},"\"get\"",[660,2841,678],{"class":666},[660,2843,2844,2846,2848,2850,2852,2854,2856,2858,2861],{"class":662,"line":792},[660,2845,812],{"class":666},[660,2847,2091],{"class":670},[660,2849,2094],{"class":711},[660,2851,715],{"class":666},[660,2853,2385],{"class":718},[660,2855,2107],{"class":711},[660,2857,715],{"class":666},[660,2859,2860],{"class":718},"\"q\"",[660,2862,678],{"class":666},[660,2864,2865,2867,2869,2871,2873,2875,2877,2879,2882],{"class":662,"line":809},[660,2866,812],{"class":666},[660,2868,2091],{"class":670},[660,2870,2094],{"class":711},[660,2872,715],{"class":666},[660,2874,2385],{"class":718},[660,2876,2107],{"class":711},[660,2878,715],{"class":666},[660,2880,2881],{"class":718},"\"page\"",[660,2883,678],{"class":666},[660,2885,2886,2888,2890,2892,2894,2896,2899,2901],{"class":662,"line":820},[660,2887,812],{"class":666},[660,2889,1666],{"class":670},[660,2891,2094],{"class":711},[660,2893,715],{"class":666},[660,2895,2200],{"class":718},[660,2897,2898],{"class":666},">Rechercher\u003C\u002F",[660,2900,1666],{"class":670},[660,2902,678],{"class":666},[660,2904,2905,2907,2909],{"class":662,"line":839},[660,2906,965],{"class":666},[660,2908,2044],{"class":670},[660,2910,678],{"class":666},[598,2912,2913,2914,1845,2917,2919],{},"Si l'utilisateur tape ",[631,2915,2916],{},"python",[631,2918,1375],{},", le navigateur navigue vers :",[651,2921,2926],{"className":2922,"code":2924,"language":2925},[2923],"language-text","\u002Frecherche?q=python&page=2\n","text",[631,2927,2924],{"__ignoreMap":656},[598,2929,2930,2931,697],{},"Caractéristiques de ",[631,2932,1994],{},[908,2934,2935,2941,2948,2951],{},[919,2936,2937,2938,767],{},"Les paramètres sont ",[602,2939,2940],{},"visibles dans l'URL",[919,2942,2943,2944,2947],{},"L'URL résultante est ",[602,2945,2946],{},"partageable et bookmarkable"," (copier-coller).",[919,2949,2950],{},"Limitation de longueur (en pratique, quelques milliers de caractères).",[919,2952,2953,2954,2957,2958,2960],{},"À réserver aux opérations ",[602,2955,2956],{},"sans effet de bord"," : consultation, recherche,\nfiltrage. Une requête ",[631,2959,1994],{}," peut être rejouée sans risque.",[593,2962,2964],{"id":2963},"post-paramètres-dans-le-corps","POST — paramètres dans le corps",[598,2966,2796,2967,2799,2969,2971,2972,2975],{},[631,2968,2259],{},[631,2970,2802],{},"\ndans le ",[602,2973,2974],{},"corps"," de la requête HTTP, invisibles dans l'URL.",[651,2977,2979],{"className":653,"code":2978,"language":655,"meta":656,"style":656},"\u003Cform action=\"\u002Finscription\" method=\"post\">\n  \u003Cinput type=\"email\"    name=\"email\">\n  \u003Cinput type=\"password\" name=\"motdepasse\">\n  \u003Cbutton type=\"submit\">Créer mon compte\u003C\u002Fbutton>\n\u003C\u002Fform>\n",[631,2980,2981,3001,3021,3041,3060],{"__ignoreMap":656},[660,2982,2983,2985,2987,2989,2991,2993,2995,2997,2999],{"class":662,"line":663},[660,2984,667],{"class":666},[660,2986,2044],{"class":670},[660,2988,2047],{"class":711},[660,2990,715],{"class":666},[660,2992,2052],{"class":718},[660,2994,2055],{"class":711},[660,2996,715],{"class":666},[660,2998,2060],{"class":718},[660,3000,678],{"class":666},[660,3002,3003,3005,3007,3009,3011,3013,3015,3017,3019],{"class":662,"line":792},[660,3004,812],{"class":666},[660,3006,2091],{"class":670},[660,3008,2094],{"class":711},[660,3010,715],{"class":666},[660,3012,2077],{"class":718},[660,3014,2432],{"class":711},[660,3016,715],{"class":666},[660,3018,2077],{"class":718},[660,3020,678],{"class":666},[660,3022,3023,3025,3027,3029,3031,3033,3035,3037,3039],{"class":662,"line":809},[660,3024,812],{"class":666},[660,3026,2091],{"class":670},[660,3028,2094],{"class":711},[660,3030,715],{"class":666},[660,3032,2408],{"class":718},[660,3034,2107],{"class":711},[660,3036,715],{"class":666},[660,3038,2415],{"class":718},[660,3040,678],{"class":666},[660,3042,3043,3045,3047,3049,3051,3053,3056,3058],{"class":662,"line":820},[660,3044,812],{"class":666},[660,3046,1666],{"class":670},[660,3048,2094],{"class":711},[660,3050,715],{"class":666},[660,3052,2200],{"class":718},[660,3054,3055],{"class":666},">Créer mon compte\u003C\u002F",[660,3057,1666],{"class":670},[660,3059,678],{"class":666},[660,3061,3062,3064,3066],{"class":662,"line":839},[660,3063,965],{"class":666},[660,3065,2044],{"class":670},[660,3067,678],{"class":666},[598,3069,3070],{},"Côté réseau, la requête envoyée ressemble à :",[651,3072,3076],{"className":3073,"code":3074,"language":3075,"meta":656,"style":656},"language-http shiki shiki-themes github-light github-light github-dark","POST \u002Finscription HTTP\u002F1.1\nHost: exemple.fr\nContent-Type: application\u002Fx-www-form-urlencoded\n\nemail=alice%40exemple.fr&motdepasse=secret123\n","http",[631,3077,3078,3094,3105,3115,3119],{"__ignoreMap":656},[660,3079,3080,3082,3085,3088,3091],{"class":662,"line":663},[660,3081,1999],{"class":1321},[660,3083,3084],{"class":666}," \u002Finscription ",[660,3086,3087],{"class":1321},"HTTP",[660,3089,3090],{"class":666},"\u002F",[660,3092,3093],{"class":1298},"1.1\n",[660,3095,3096,3099,3102],{"class":662,"line":792},[660,3097,3098],{"class":670},"Host",[660,3100,3101],{"class":1321},":",[660,3103,3104],{"class":718}," exemple.fr\n",[660,3106,3107,3110,3112],{"class":662,"line":809},[660,3108,3109],{"class":670},"Content-Type",[660,3111,3101],{"class":1321},[660,3113,3114],{"class":718}," application\u002Fx-www-form-urlencoded\n",[660,3116,3117],{"class":662,"line":820},[660,3118,1347],{"emptyLinePlaceholder":1346},[660,3120,3121],{"class":662,"line":839},[660,3122,3123],{"class":666},"email=alice%40exemple.fr&motdepasse=secret123\n",[598,3125,2930,3126,697],{},[631,3127,1999],{},[908,3129,3130,3137,3143],{},[919,3131,3132,3133,3136],{},"Les paramètres ne sont ",[602,3134,3135],{},"pas dans l'URL"," — donc ni dans l'historique ni\ndans les logs serveurs basiques.",[919,3138,3139,3142],{},[602,3140,3141],{},"Pas de limite pratique"," sur la taille des données (utile pour les\nfichiers, les longs textes).",[919,3144,2953,3145,3148,3149,3151],{},[602,3146,3147],{},"avec effet de bord"," : création, modification,\nsuppression. Re-soumettre par mégarde un ",[631,3150,1999],{}," peut créer deux comptes,\ndeux commandes…",[1798,3153,3154],{},[598,3155,3156,3161],{},[602,3157,3158,3160],{},[631,3159,1999],{}," n'est pas un blindage de sécurité."," Les données restent en clair sur\nle réseau si la connexion n'est pas en HTTPS. Pour la confidentialité, c'est\nle chiffrement HTTPS qui compte, pas la méthode HTTP.",[593,3163,3165],{"id":3164},"get-vs-post-quand-utiliser-quoi","GET vs POST — quand utiliser quoi ?",[974,3167,3168,3178],{},[977,3169,3170],{},[980,3171,3172,3175],{},[983,3173,3174],{},"Situation",[983,3176,3177],{},"Méthode",[990,3179,3180,3189,3198,3207,3216,3225,3239],{},[980,3181,3182,3185],{},[995,3183,3184],{},"Recherche, filtrage, pagination",[995,3186,3187],{},[631,3188,1994],{},[980,3190,3191,3194],{},[995,3192,3193],{},"Connexion (login + mot de passe)",[995,3195,3196],{},[631,3197,1999],{},[980,3199,3200,3203],{},[995,3201,3202],{},"Inscription, création de compte",[995,3204,3205],{},[631,3206,1999],{},[980,3208,3209,3212],{},[995,3210,3211],{},"Lien partageable vers une page",[995,3213,3214],{},[631,3215,1994],{},[980,3217,3218,3221],{},[995,3219,3220],{},"Envoi d'un fichier",[995,3222,3223],{},[631,3224,1999],{},[980,3226,3227,3230],{},[995,3228,3229],{},"Suppression d'une ressource",[995,3231,3232,3234,3235,3238],{},[631,3233,1999],{}," (ou ",[631,3236,3237],{},"DELETE"," côté API)",[980,3240,3241,3244],{},[995,3242,3243],{},"Données sensibles (mot de passe, n° de carte)",[995,3245,3246,3248],{},[631,3247,1999],{}," + HTTPS",[598,3250,3251,3254,3255,3258,3259,3261,3262,3265,3266,767],{},[602,3252,3253],{},"Règle simple"," : si l'action ",[602,3256,3257],{},"lit"," une information sans rien changer côté\nserveur, choisir ",[631,3260,1994],{},". Si l'action ",[602,3263,3264],{},"modifie"," quelque chose ou transmet une\ninformation sensible, choisir ",[631,3267,1999],{},[1083,3269,3272,3277],{"correct":3270,"slug":3271},"0","formulaires-c2",[1088,3273,3274],{"v-slot:question":656},[598,3275,3276],{},"Vous codez un moteur de recherche partageable par URL. Quelle méthode ?",[1088,3278,3279],{"v-slot:choices":656},[908,3280,3281,3283,3285,3288],{},[919,3282,1994],{},[919,3284,1999],{},[919,3286,3287],{},"PUT",[919,3289,3237],{},[593,3291,3293],{"id":3292},"validation-côté-navigateur","Validation côté navigateur",[598,3295,3296,3297,3300],{},"HTML5 propose des ",[602,3298,3299],{},"contraintes intégrées"," vérifiées avant l'envoi :",[651,3302,3304],{"className":653,"code":3303,"language":655,"meta":656,"style":656},"\u003Cform action=\"\u002Fcontact\" method=\"post\">\n  \u003Cinput type=\"email\" name=\"email\" required>\n  \u003Cinput type=\"number\" name=\"age\" min=\"13\" max=\"120\">\n  \u003Cinput type=\"text\" name=\"code\" pattern=\"[A-Z]{3}\\d{4}\" required>\n  \u003Cbutton type=\"submit\">Envoyer\u003C\u002Fbutton>\n\u003C\u002Fform>\n",[631,3305,3306,3327,3349,3382,3413,3431],{"__ignoreMap":656},[660,3307,3308,3310,3312,3314,3316,3319,3321,3323,3325],{"class":662,"line":663},[660,3309,667],{"class":666},[660,3311,2044],{"class":670},[660,3313,2047],{"class":711},[660,3315,715],{"class":666},[660,3317,3318],{"class":718},"\"\u002Fcontact\"",[660,3320,2055],{"class":711},[660,3322,715],{"class":666},[660,3324,2060],{"class":718},[660,3326,678],{"class":666},[660,3328,3329,3331,3333,3335,3337,3339,3341,3343,3345,3347],{"class":662,"line":792},[660,3330,812],{"class":666},[660,3332,2091],{"class":670},[660,3334,2094],{"class":711},[660,3336,715],{"class":666},[660,3338,2077],{"class":718},[660,3340,2107],{"class":711},[660,3342,715],{"class":666},[660,3344,2077],{"class":718},[660,3346,2114],{"class":711},[660,3348,678],{"class":666},[660,3350,3351,3353,3355,3357,3359,3361,3363,3365,3367,3369,3371,3374,3376,3378,3380],{"class":662,"line":809},[660,3352,812],{"class":666},[660,3354,2091],{"class":670},[660,3356,2094],{"class":711},[660,3358,715],{"class":666},[660,3360,2153],{"class":718},[660,3362,2107],{"class":711},[660,3364,715],{"class":666},[660,3366,2133],{"class":718},[660,3368,2168],{"class":711},[660,3370,715],{"class":666},[660,3372,3373],{"class":718},"\"13\"",[660,3375,2176],{"class":711},[660,3377,715],{"class":666},[660,3379,2181],{"class":718},[660,3381,678],{"class":666},[660,3383,3384,3386,3388,3390,3392,3394,3396,3398,3401,3404,3406,3409,3411],{"class":662,"line":820},[660,3385,812],{"class":666},[660,3387,2091],{"class":670},[660,3389,2094],{"class":711},[660,3391,715],{"class":666},[660,3393,2385],{"class":718},[660,3395,2107],{"class":711},[660,3397,715],{"class":666},[660,3399,3400],{"class":718},"\"code\"",[660,3402,3403],{"class":711}," pattern",[660,3405,715],{"class":666},[660,3407,3408],{"class":718},"\"[A-Z]{3}\\d{4}\"",[660,3410,2114],{"class":711},[660,3412,678],{"class":666},[660,3414,3415,3417,3419,3421,3423,3425,3427,3429],{"class":662,"line":839},[660,3416,812],{"class":666},[660,3418,1666],{"class":670},[660,3420,2094],{"class":711},[660,3422,715],{"class":666},[660,3424,2200],{"class":718},[660,3426,1685],{"class":666},[660,3428,1666],{"class":670},[660,3430,678],{"class":666},[660,3432,3433,3435,3437],{"class":662,"line":854},[660,3434,965],{"class":666},[660,3436,2044],{"class":670},[660,3438,678],{"class":666},[908,3440,3441,3446,3453,3459],{},[919,3442,3443,3445],{},[631,3444,2329],{}," : champ obligatoire.",[919,3447,3448,757,3450,3452],{},[631,3449,2332],{},[631,3451,2335],{}," : bornes numériques.",[919,3454,3455,3458],{},[631,3456,3457],{},"pattern=\"…\""," : expression régulière à respecter.",[919,3460,3461,3464],{},[631,3462,3463],{},"type=\"email\""," : validation basique du format e-mail.",[3466,3467,3468],"caution",{},[598,3469,3470,3471,3474,3475,3478],{},"Cette validation est un ",[602,3472,3473],{},"confort utilisateur",", pas une sécurité. Un client\nmalveillant peut envoyer ce qu'il veut directement au serveur, sans passer par\nle formulaire. ",[602,3476,3477],{},"Le serveur doit toujours revalider"," les données reçues.",[593,3480,1818],{"id":1817},[908,3482,3483,3494,3515,3524],{},[919,3484,3485,3490,3491,3493],{},[602,3486,3487,3488],{},"Oublier ",[631,3489,2293],{}," : un champ sans ",[631,3492,2293],{}," n'est tout simplement pas envoyé.",[919,3495,3496,3501,3502,3504,3505,3507,3508,3511,3512,767],{},[602,3497,3498,3499],{},"Bouton sans ",[631,3500,2283],{}," : par défaut, un ",[631,3503,1078],{}," dans un ",[631,3506,1988],{}," est de\ntype ",[631,3509,3510],{},"submit"," et soumet le formulaire. Pour un bouton « ordinaire » (par\nexemple gérer un événement JS), préciser ",[631,3513,3514],{},"type=\"button\"",[919,3516,3517,3523],{},[602,3518,3519,3520,3522],{},"Plusieurs ",[631,3521,1988],{}," imbriqués"," : interdit. Un formulaire ne peut pas en\ncontenir un autre.",[919,3525,3526,3529,3530,3535],{},[602,3527,3528],{},"Boutons radio"," : tous les radios d'un même groupe doivent partager le\n",[602,3531,3532,3533],{},"même ",[631,3534,2293],{}," pour fonctionner comme un choix unique.",[593,3537,1903],{"id":1902},[598,3539,3540,3541,3544,3545,3547,3548,3551],{},"Avec JavaScript, vous pourrez ",[602,3542,3543],{},"intercepter la soumission"," d'un formulaire\n(événement ",[631,3546,3510],{},"), valider les champs, formater les données, et même\nenvoyer la requête sans recharger la page (",[631,3549,3550],{},"fetch","). C'est le sujet des deux\ncours suivants : événements et manipulation du DOM.",[1556,3553,3554],{},"html pre.shiki code .sxrX7, html code.shiki .sxrX7{--shiki-light:#24292E;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sovSZ, html code.shiki .sovSZ{--shiki-light:#22863A;--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .snPdu, html code.shiki .snPdu{--shiki-light:#6F42C1;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sIIMD, html code.shiki .sIIMD{--shiki-light:#032F62;--shiki-default:#032F62;--shiki-dark:#9ECBFF}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 .s8jYJ, html code.shiki .s8jYJ{--shiki-light:#D73A49;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sBjJW, html code.shiki .sBjJW{--shiki-light:#005CC5;--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":656,"searchDepth":792,"depth":792,"links":3556},[3557,3558,3559,3561,3562,3563,3564,3565,3566],{"id":595,"depth":792,"text":596},{"id":2009,"depth":792,"text":2010},{"id":2356,"depth":792,"text":3560},"Le bestiaire des \u003Cinput>",{"id":2792,"depth":792,"text":2793},{"id":2963,"depth":792,"text":2964},{"id":3164,"depth":792,"text":3165},{"id":3292,"depth":792,"text":3293},{"id":1817,"depth":792,"text":1818},{"id":1902,"depth":792,"text":1903},"Collecter des données dans une page Web — balise `\u003Cform>`, champs `\u003Cinput>`, et choix entre `GET` et `POST` pour les transmettre.",{},[3570,3572],{"slug":2772,"kind":1961,"question":2777,"choices":3571,"correct":1375,"multi":1963,"explanation":656},[1804,2283,2293,2319],{"slug":3271,"kind":1961,"question":3276,"choices":3573,"correct":3270,"multi":1963,"explanation":656},[1994,1999,3287,3237],{"title":339,"description":3567},"-MihY1V34OF0sOVpjHsQTLYAAzQC4-JNrlf690J0BXw",{"id":3577,"title":343,"bo":3578,"body":3581,"description":5543,"eval":1956,"extension":1957,"labo":1956,"meta":5544,"navigation":1346,"path":344,"quizzes":5545,"readingTime":663,"seo":5550,"stem":345,"tp":1956,"__hash__":5551},"cours\u002F1.nsi-1ere\u002Fpe-ihm-web\u002F3.evenements-js.md",[3579,3580],"PE04","PE02",{"type":590,"value":3582,"toc":5530},[3583,3585,3612,3618,3622,3625,3631,3688,3732,3796,3802,3890,3895,3938,3970,3992,3995,3998,4002,4015,4096,4099,4127,4136,4138,4142,4145,4252,4270,4272,4276,4279,4359,4368,4512,4518,4541,4564,4566,4570,4573,4606,4611,4660,4775,4781,4783,4787,4790,4995,5009,5033,5035,5039,5042,5067,5231,5240,5255,5272,5274,5278,5305,5354,5451,5457,5459,5461,5518,5520,5527],[593,3584,596],{"id":595},[598,3586,3587,3588,3591,3592,3595,3596,3599,3600,3603,3604,3607,3608,3611],{},"Une page HTML seule est inerte. Pour qu'elle réagisse à un clic, à une touche\nenfoncée, à un mouvement de souris, il faut un langage de programmation\nexécuté ",[602,3589,3590],{},"dans le navigateur"," : c'est le rôle de ",[602,3593,3594],{},"JavaScript",". Le modèle\nfondamental est dit ",[602,3597,3598],{},"événementiel"," : le navigateur diffuse en permanence\ndes ",[602,3601,3602],{},"événements"," (un clic, un appui clavier, un changement de champ…), et\nvotre code attache des ",[602,3605,3606],{},"fonctions de réaction"," — des ",[602,3609,3610],{},"écouteurs"," — à ceux\nqui l'intéressent.",[598,3613,2003,3614,1845,3616,767],{},[2005,3615],{"code":3579},[2005,3617],{"code":3580},[593,3619,3621],{"id":3620},"javascript-en-30-secondes","JavaScript en 30 secondes",[598,3623,3624],{},"Avant d'écouter le premier événement, posons le strict minimum de syntaxe\nJavaScript dont ce cours aura besoin. Si vous venez de Python, beaucoup de\nréflexes s'y transposent — mais quelques pièges méritent d'être signalés.",[598,3626,3627,3630],{},[602,3628,3629],{},"Déclarer une variable"," : trois mots-clés possibles, deux à retenir.",[651,3632,3636],{"className":3633,"code":3634,"language":3635,"meta":656,"style":656},"language-js shiki shiki-themes github-light github-light github-dark","let   x = 5;     \u002F\u002F variable que l'on pourra réaffecter\nconst y = 10;    \u002F\u002F valeur fixée, interdiction de la réaffecter\nvar   z;         \u002F\u002F ancien mot-clé : à éviter (portée capricieuse)\n","js",[631,3637,3638,3657,3677],{"__ignoreMap":656},[660,3639,3640,3643,3646,3648,3651,3654],{"class":662,"line":663},[660,3641,3642],{"class":1321},"let",[660,3644,3645],{"class":666},"   x ",[660,3647,715],{"class":1321},[660,3649,3650],{"class":1298}," 5",[660,3652,3653],{"class":666},";     ",[660,3655,3656],{"class":1515},"\u002F\u002F variable que l'on pourra réaffecter\n",[660,3658,3659,3662,3665,3668,3671,3674],{"class":662,"line":792},[660,3660,3661],{"class":1321},"const",[660,3663,3664],{"class":1298}," y",[660,3666,3667],{"class":1321}," =",[660,3669,3670],{"class":1298}," 10",[660,3672,3673],{"class":666},";    ",[660,3675,3676],{"class":1515},"\u002F\u002F valeur fixée, interdiction de la réaffecter\n",[660,3678,3679,3682,3685],{"class":662,"line":809},[660,3680,3681],{"class":1321},"var",[660,3683,3684],{"class":666},"   z;         ",[660,3686,3687],{"class":1515},"\u002F\u002F ancien mot-clé : à éviter (portée capricieuse)\n",[598,3689,3690,3693,3694,757,3697,3700,3701,3704,3705,3708,3709,3712,3713,3716,3717,3720,3721,3724,3725,3728,3729,767],{},[602,3691,3692],{},"Types de base"," : nombres, chaînes, booléens, ",[631,3695,3696],{},"null",[631,3698,3699],{},"undefined",", tableaux\n(",[631,3702,3703],{},"[…]",") et objets (",[631,3706,3707],{},"{ clé: valeur }","). Pas de distinction ",[631,3710,3711],{},"int"," \u002F ",[631,3714,3715],{},"float"," —\ntout nombre est un ",[631,3718,3719],{},"number",". Les chaînes peuvent s'écrire avec des\nguillemets simples, doubles, ou des ",[602,3722,3723],{},"template literals"," entre backticks\n(",[631,3726,3727],{},"`…`",") qui acceptent l'interpolation ",[631,3730,3731],{},"${variable}",[651,3733,3735],{"className":3633,"code":3734,"language":3635,"meta":656,"style":656},"const prenom = \"Ada\";\nconst age    = 17;\nconst phrase = `${prenom} a ${age} ans.`;  \u002F\u002F \"Ada a 17 ans.\"\n",[631,3736,3737,3751,3766],{"__ignoreMap":656},[660,3738,3739,3741,3744,3746,3749],{"class":662,"line":663},[660,3740,3661],{"class":1321},[660,3742,3743],{"class":1298}," prenom",[660,3745,3667],{"class":1321},[660,3747,3748],{"class":718}," \"Ada\"",[660,3750,1308],{"class":666},[660,3752,3753,3755,3758,3761,3764],{"class":662,"line":792},[660,3754,3661],{"class":1321},[660,3756,3757],{"class":1298}," age",[660,3759,3760],{"class":1321},"    =",[660,3762,3763],{"class":1298}," 17",[660,3765,1308],{"class":666},[660,3767,3768,3770,3773,3775,3778,3781,3784,3787,3790,3793],{"class":662,"line":809},[660,3769,3661],{"class":1321},[660,3771,3772],{"class":1298}," phrase",[660,3774,3667],{"class":1321},[660,3776,3777],{"class":718}," `${",[660,3779,3780],{"class":666},"prenom",[660,3782,3783],{"class":718},"} a ${",[660,3785,3786],{"class":666},"age",[660,3788,3789],{"class":718},"} ans.`",[660,3791,3792],{"class":666},";  ",[660,3794,3795],{"class":1515},"\u002F\u002F \"Ada a 17 ans.\"\n",[598,3797,3798,3801],{},[602,3799,3800],{},"Petit pont Python ↔ JavaScript"," pour les passages les plus déroutants :",[974,3803,3804,3814],{},[977,3805,3806],{},[980,3807,3808,3811],{},[983,3809,3810],{},"En Python",[983,3812,3813],{},"En JavaScript",[990,3815,3816,3831,3843,3855,3878],{},[980,3817,3818,3823],{},[995,3819,3820],{},[631,3821,3822],{},"x = 5",[995,3824,3825,1139,3828],{},[631,3826,3827],{},"let x = 5;",[631,3829,3830],{},"const x = 5;",[980,3832,3833,3838],{},[995,3834,3835],{},[631,3836,3837],{},"print(x)",[995,3839,3840],{},[631,3841,3842],{},"console.log(x);",[980,3844,3845,3850],{},[995,3846,3847],{},[631,3848,3849],{},"def f(n): return n * n",[995,3851,3852],{},[631,3853,3854],{},"function f(n) { return n * n; }",[980,3856,3857,3868],{},[995,3858,3859,757,3862,757,3865],{},[631,3860,3861],{},"True",[631,3863,3864],{},"False",[631,3866,3867],{},"None",[995,3869,3870,757,3873,757,3876],{},[631,3871,3872],{},"true",[631,3874,3875],{},"false",[631,3877,3696],{},[980,3879,3880,3885],{},[995,3881,3882],{},[631,3883,3884],{},"len(t)",[995,3886,3887],{},[631,3888,3889],{},"t.length",[598,3891,3892,697],{},[602,3893,3894],{},"Égalité — un point très sensible",[651,3896,3898],{"className":3633,"code":3897,"language":3635,"meta":656,"style":656},"3 === 3      \u002F\u002F true   — égalité stricte (type + valeur)\n3 === \"3\"    \u002F\u002F false  — types différents\n3 ==  \"3\"    \u002F\u002F true   — égalité laxiste (à éviter)\n",[631,3899,3900,3913,3925],{"__ignoreMap":656},[660,3901,3902,3904,3907,3910],{"class":662,"line":663},[660,3903,1875],{"class":1298},[660,3905,3906],{"class":1321}," ===",[660,3908,3909],{"class":1298}," 3",[660,3911,3912],{"class":1515},"      \u002F\u002F true   — égalité stricte (type + valeur)\n",[660,3914,3915,3917,3919,3922],{"class":662,"line":792},[660,3916,1875],{"class":1298},[660,3918,3906],{"class":1321},[660,3920,3921],{"class":718}," \"3\"",[660,3923,3924],{"class":1515},"    \u002F\u002F false  — types différents\n",[660,3926,3927,3929,3932,3935],{"class":662,"line":809},[660,3928,1875],{"class":1298},[660,3930,3931],{"class":1321}," ==",[660,3933,3934],{"class":718},"  \"3\"",[660,3936,3937],{"class":1515},"    \u002F\u002F true   — égalité laxiste (à éviter)\n",[1798,3939,3940],{},[598,3941,3942,3943,3949,3950,3953,3954,3957,3958,3961,3962,757,3964,3961,3967,3969],{},"Utilisez ",[602,3944,3945,3946],{},"toujours ",[631,3947,3948],{},"==="," (et ",[631,3951,3952],{},"!==",") en JavaScript. L'égalité laxiste ",[631,3955,3956],{},"==","\napplique des conversions implicites qui produisent des résultats surprenants\n(",[631,3959,3960],{},"0 == \"\""," vaut ",[631,3963,3872],{},[631,3965,3966],{},"null == undefined",[631,3968,3872],{},"…). C'est l'une des\nsources de bugs les plus connues du langage.",[598,3971,3972,1841,3975,3978,3979,3982,3983,3986,3987,3991],{},[602,3973,3974],{},"Afficher dans la console du navigateur",[631,3976,3977],{},"console.log(...)"," est\nl'équivalent direct du ",[631,3980,3981],{},"print(...)"," de Python. Le résultat apparaît dans\nles outils de développement (touche ",[602,3984,3985],{},"F12",", onglet ",[3988,3989,3990],"em",{},"Console",").",[598,3993,3994],{},"Avec ces quelques briques, le code des sections qui suivent devient lisible.",[3996,3997],"hr",{},[593,3999,4001],{"id":4000},"le-modèle-événementiel","Le modèle événementiel",[598,4003,4004,4005,4008,4009,1910,4012,3991],{},"Imaginez le navigateur comme un journaliste qui annonce en direct tout ce qui\nse passe dans la page : « clic sur le bouton Envoyer », « touche Entrée\npressée », « souris au-dessus de l'image »… Votre programme JavaScript lui\nadresse une consigne du type : ",[3988,4006,4007],{},"« quand tu annonces tel événement sur tel\nélément, exécute cette fonction »."," Cette mécanique s'appelle un ",[602,4010,4011],{},"écouteur\nd'événement",[3988,4013,4014],{},"event listener",[651,4016,4018],{"className":3633,"code":4017,"language":3635,"meta":656,"style":656},"\u002F\u002F Cibler un élément\nconst bouton = document.getElementById(\"monBouton\");\n\n\u002F\u002F Lui attacher un écouteur sur l'événement \"click\"\nbouton.addEventListener(\"click\", function() {\n  alert(\"Bouton cliqué !\");\n});\n",[631,4019,4020,4025,4049,4053,4058,4079,4091],{"__ignoreMap":656},[660,4021,4022],{"class":662,"line":663},[660,4023,4024],{"class":1515},"\u002F\u002F Cibler un élément\n",[660,4026,4027,4029,4032,4034,4037,4040,4043,4046],{"class":662,"line":792},[660,4028,3661],{"class":1321},[660,4030,4031],{"class":1298}," bouton",[660,4033,3667],{"class":1321},[660,4035,4036],{"class":666}," document.",[660,4038,4039],{"class":711},"getElementById",[660,4041,4042],{"class":666},"(",[660,4044,4045],{"class":718},"\"monBouton\"",[660,4047,4048],{"class":666},");\n",[660,4050,4051],{"class":662,"line":809},[660,4052,1347],{"emptyLinePlaceholder":1346},[660,4054,4055],{"class":662,"line":820},[660,4056,4057],{"class":1515},"\u002F\u002F Lui attacher un écouteur sur l'événement \"click\"\n",[660,4059,4060,4063,4066,4068,4071,4073,4076],{"class":662,"line":839},[660,4061,4062],{"class":666},"bouton.",[660,4064,4065],{"class":711},"addEventListener",[660,4067,4042],{"class":666},[660,4069,4070],{"class":718},"\"click\"",[660,4072,757],{"class":666},[660,4074,4075],{"class":1321},"function",[660,4077,4078],{"class":666},"() {\n",[660,4080,4081,4084,4086,4089],{"class":662,"line":854},[660,4082,4083],{"class":711},"  alert",[660,4085,4042],{"class":666},[660,4087,4088],{"class":718},"\"Bouton cliqué !\"",[660,4090,4048],{"class":666},[660,4092,4093],{"class":662,"line":864},[660,4094,4095],{"class":666},"});\n",[598,4097,4098],{},"Trois ingrédients à chaque fois :",[4100,4101,4102,4108,4120],"ol",{},[919,4103,1471,4104,4107],{},[602,4105,4106],{},"élément cible"," récupéré dans la page (ici, le bouton).",[919,4109,1471,4110,4113,4114,757,4116,4119],{},[602,4111,4112],{},"nom d'événement"," sous forme de chaîne (",[631,4115,4070],{},[631,4117,4118],{},"\"keydown\"","…).",[919,4121,4122,4123,4126],{},"Une ",[602,4124,4125],{},"fonction"," qui s'exécute lors de l'événement.",[611,4128,4129],{},[598,4130,4131,4132,4135],{},"La méthode ",[631,4133,4134],{},"addEventListener(nom, fonction)"," est le mécanisme standard et\nrecommandé. Plusieurs écouteurs peuvent coexister sur un même élément pour le\nmême événement — ils s'exécutent dans l'ordre où ils ont été attachés.",[3996,4137],{},[593,4139,4141],{"id":4140},"inclure-du-javascript-dans-une-page","Inclure du JavaScript dans une page",[598,4143,4144],{},"Trois manières d'attacher du JS à une page HTML :",[651,4146,4148],{"className":653,"code":4147,"language":655,"meta":656,"style":656},"\u003C!-- 1. Fichier externe (recommandé) -->\n\u003Cscript src=\"script.js\">\u003C\u002Fscript>\n\n\u003C!-- 2. Bloc inline -->\n\u003Cscript>\n  console.log(\"Bonjour depuis la page !\");\n\u003C\u002Fscript>\n\n\u003C!-- 3. Attribut on… (à éviter pour de vrais projets) -->\n\u003Cbutton onclick=\"alert('clic')\">Cliquer\u003C\u002Fbutton>\n",[631,4149,4150,4155,4176,4180,4185,4193,4208,4216,4220,4225],{"__ignoreMap":656},[660,4151,4152],{"class":662,"line":663},[660,4153,4154],{"class":1515},"\u003C!-- 1. Fichier externe (recommandé) -->\n",[660,4156,4157,4159,4162,4165,4167,4170,4172,4174],{"class":662,"line":792},[660,4158,667],{"class":666},[660,4160,4161],{"class":670},"script",[660,4163,4164],{"class":711}," src",[660,4166,715],{"class":666},[660,4168,4169],{"class":718},"\"script.js\"",[660,4171,2673],{"class":666},[660,4173,4161],{"class":670},[660,4175,678],{"class":666},[660,4177,4178],{"class":662,"line":809},[660,4179,1347],{"emptyLinePlaceholder":1346},[660,4181,4182],{"class":662,"line":820},[660,4183,4184],{"class":1515},"\u003C!-- 2. Bloc inline -->\n",[660,4186,4187,4189,4191],{"class":662,"line":839},[660,4188,667],{"class":666},[660,4190,4161],{"class":670},[660,4192,678],{"class":666},[660,4194,4195,4198,4201,4203,4206],{"class":662,"line":854},[660,4196,4197],{"class":666},"  console.",[660,4199,4200],{"class":711},"log",[660,4202,4042],{"class":666},[660,4204,4205],{"class":718},"\"Bonjour depuis la page !\"",[660,4207,4048],{"class":666},[660,4209,4210,4212,4214],{"class":662,"line":864},[660,4211,965],{"class":666},[660,4213,4161],{"class":670},[660,4215,678],{"class":666},[660,4217,4218],{"class":662,"line":874},[660,4219,1347],{"emptyLinePlaceholder":1346},[660,4221,4222],{"class":662,"line":889},[660,4223,4224],{"class":1515},"\u003C!-- 3. Attribut on… (à éviter pour de vrais projets) -->\n",[660,4226,4227,4229,4231,4234,4236,4239,4242,4245,4248,4250],{"class":662,"line":903},[660,4228,667],{"class":666},[660,4230,1666],{"class":670},[660,4232,4233],{"class":711}," onclick",[660,4235,715],{"class":666},[660,4237,4238],{"class":718},"\"",[660,4240,4241],{"class":711},"alert",[660,4243,4244],{"class":718},"('clic')\"",[660,4246,4247],{"class":666},">Cliquer\u003C\u002F",[660,4249,1666],{"class":670},[660,4251,678],{"class":666},[598,4253,4254,4255,4258,4259,4262,4263,4265,4266,4269],{},"La méthode externe est la norme : un fichier ",[631,4256,4257],{},".js"," qui charge ses écouteurs au\ndémarrage. On place souvent ",[631,4260,4261],{},"\u003Cscript src=\"…\" defer>\u003C\u002Fscript>"," dans le ",[631,4264,637],{},",\nl'attribut ",[631,4267,4268],{},"defer"," garantit que le script s'exécute après le chargement du\nHTML.",[3996,4271],{},[593,4273,4275],{"id":4274},"événements-de-souris","Événements de souris",[598,4277,4278],{},"Les principaux événements de la souris :",[974,4280,4281,4291],{},[977,4282,4283],{},[980,4284,4285,4288],{},[983,4286,4287],{},"Nom",[983,4289,4290],{},"Déclenché quand…",[990,4292,4293,4303,4313,4326,4336,4349],{},[980,4294,4295,4300],{},[995,4296,4297],{},[631,4298,4299],{},"click",[995,4301,4302],{},"Un clic complet sur l'élément.",[980,4304,4305,4310],{},[995,4306,4307],{},[631,4308,4309],{},"dblclick",[995,4311,4312],{},"Un double-clic.",[980,4314,4315,4323],{},[995,4316,4317,3712,4320],{},[631,4318,4319],{},"mousedown",[631,4321,4322],{},"mouseup",[995,4324,4325],{},"Bouton enfoncé \u002F relâché.",[980,4327,4328,4333],{},[995,4329,4330],{},[631,4331,4332],{},"mousemove",[995,4334,4335],{},"La souris bouge sur l'élément.",[980,4337,4338,4346],{},[995,4339,4340,3712,4343],{},[631,4341,4342],{},"mouseenter",[631,4344,4345],{},"mouseleave",[995,4347,4348],{},"La souris entre dans \u002F sort de l'élément.",[980,4350,4351,4356],{},[995,4352,4353],{},[631,4354,4355],{},"contextmenu",[995,4357,4358],{},"Clic droit (menu contextuel).",[598,4360,4361,4362,4367],{},"L'objet ",[602,4363,4364],{},[631,4365,4366],{},"event"," transmis à la fonction porte les informations du clic :",[651,4369,4371],{"className":3633,"code":4370,"language":3635,"meta":656,"style":656},"const zone = document.getElementById(\"zone\");\n\nzone.addEventListener(\"mousemove\", function(event) {\n  console.log(`x = ${event.clientX}, y = ${event.clientY}`);\n});\n\nzone.addEventListener(\"click\", function(event) {\n  console.log(`Bouton utilisé : ${event.button}`);\n  \u002F\u002F 0 = gauche, 1 = molette, 2 = droit\n});\n",[631,4372,4373,4393,4397,4421,4454,4458,4462,4482,4503,4508],{"__ignoreMap":656},[660,4374,4375,4377,4380,4382,4384,4386,4388,4391],{"class":662,"line":663},[660,4376,3661],{"class":1321},[660,4378,4379],{"class":1298}," zone",[660,4381,3667],{"class":1321},[660,4383,4036],{"class":666},[660,4385,4039],{"class":711},[660,4387,4042],{"class":666},[660,4389,4390],{"class":718},"\"zone\"",[660,4392,4048],{"class":666},[660,4394,4395],{"class":662,"line":792},[660,4396,1347],{"emptyLinePlaceholder":1346},[660,4398,4399,4402,4404,4406,4409,4411,4413,4415,4418],{"class":662,"line":809},[660,4400,4401],{"class":666},"zone.",[660,4403,4065],{"class":711},[660,4405,4042],{"class":666},[660,4407,4408],{"class":718},"\"mousemove\"",[660,4410,757],{"class":666},[660,4412,4075],{"class":1321},[660,4414,4042],{"class":666},[660,4416,4366],{"class":4417},"sP4rz",[660,4419,4420],{"class":666},") {\n",[660,4422,4423,4425,4427,4429,4432,4434,4436,4439,4442,4444,4446,4449,4452],{"class":662,"line":820},[660,4424,4197],{"class":666},[660,4426,4200],{"class":711},[660,4428,4042],{"class":666},[660,4430,4431],{"class":718},"`x = ${",[660,4433,4366],{"class":666},[660,4435,767],{"class":718},[660,4437,4438],{"class":666},"clientX",[660,4440,4441],{"class":718},"}, y = ${",[660,4443,4366],{"class":666},[660,4445,767],{"class":718},[660,4447,4448],{"class":666},"clientY",[660,4450,4451],{"class":718},"}`",[660,4453,4048],{"class":666},[660,4455,4456],{"class":662,"line":839},[660,4457,4095],{"class":666},[660,4459,4460],{"class":662,"line":854},[660,4461,1347],{"emptyLinePlaceholder":1346},[660,4463,4464,4466,4468,4470,4472,4474,4476,4478,4480],{"class":662,"line":864},[660,4465,4401],{"class":666},[660,4467,4065],{"class":711},[660,4469,4042],{"class":666},[660,4471,4070],{"class":718},[660,4473,757],{"class":666},[660,4475,4075],{"class":1321},[660,4477,4042],{"class":666},[660,4479,4366],{"class":4417},[660,4481,4420],{"class":666},[660,4483,4484,4486,4488,4490,4493,4495,4497,4499,4501],{"class":662,"line":874},[660,4485,4197],{"class":666},[660,4487,4200],{"class":711},[660,4489,4042],{"class":666},[660,4491,4492],{"class":718},"`Bouton utilisé : ${",[660,4494,4366],{"class":666},[660,4496,767],{"class":718},[660,4498,1666],{"class":666},[660,4500,4451],{"class":718},[660,4502,4048],{"class":666},[660,4504,4505],{"class":662,"line":889},[660,4506,4507],{"class":1515},"  \u002F\u002F 0 = gauche, 1 = molette, 2 = droit\n",[660,4509,4510],{"class":662,"line":903},[660,4511,4095],{"class":666},[598,4513,4514,4515,4517],{},"Quelques propriétés utiles de ",[631,4516,4366],{}," pour les événements souris :",[908,4519,4520,4529,4535],{},[919,4521,4522,757,4525,4528],{},[631,4523,4524],{},"event.clientX",[631,4526,4527],{},"event.clientY"," — coordonnées par rapport à la fenêtre.",[919,4530,4531,4534],{},[631,4532,4533],{},"event.target"," — l'élément HTML cliqué.",[919,4536,4537,4540],{},[631,4538,4539],{},"event.button"," — bouton de la souris (0\u002F1\u002F2).",[1083,4542,4544,4549],{"correct":1085,"slug":4543},"evenements-js-c1",[1088,4545,4546],{"v-slot:question":656},[598,4547,4548],{},"Quelle méthode attache une fonction à un événement ?",[1088,4550,4551],{"v-slot:choices":656},[908,4552,4553,4556,4558,4561],{},[919,4554,4555],{},"onEvent",[919,4557,4065],{},[919,4559,4560],{},"listenEvent",[919,4562,4563],{},"attachEvent",[3996,4565],{},[593,4567,4569],{"id":4568},"événements-clavier","Événements clavier",[598,4571,4572],{},"Pour le clavier, deux événements principaux :",[974,4574,4575,4584],{},[977,4576,4577],{},[980,4578,4579,4581],{},[983,4580,4287],{},[983,4582,4583],{},"Quand",[990,4585,4586,4596],{},[980,4587,4588,4593],{},[995,4589,4590],{},[631,4591,4592],{},"keydown",[995,4594,4595],{},"Touche enfoncée (se répète si maintenue).",[980,4597,4598,4603],{},[995,4599,4600],{},[631,4601,4602],{},"keyup",[995,4604,4605],{},"Touche relâchée.",[598,4607,4361,4608,4610],{},[631,4609,4366],{}," du clavier expose :",[908,4612,4613,4631,4645],{},[919,4614,4615,4618,4619,757,4622,757,4625,757,4628,4119],{},[631,4616,4617],{},"event.key"," — la touche, sous forme lisible (",[631,4620,4621],{},"\"a\"",[631,4623,4624],{},"\"A\"",[631,4626,4627],{},"\"Enter\"",[631,4629,4630],{},"\"ArrowUp\"",[919,4632,4633,4636,4637,757,4640,1917,4642,4644],{},[631,4634,4635],{},"event.code"," — l'identifiant physique de la touche (",[631,4638,4639],{},"\"KeyA\"",[631,4641,4627],{},[631,4643,4630],{},"…), indépendant de la disposition.",[919,4646,4647,757,4650,757,4653,757,4656,4659],{},[631,4648,4649],{},"event.ctrlKey",[631,4651,4652],{},"event.shiftKey",[631,4654,4655],{},"event.altKey",[631,4657,4658],{},"event.metaKey"," —\nbooléens indiquant les touches modificatrices.",[651,4661,4663],{"className":3633,"code":4662,"language":3635,"meta":656,"style":656},"document.addEventListener(\"keydown\", function(event) {\n  if (event.key === \"Enter\") {\n    console.log(\"Vous avez appuyé sur Entrée\");\n  }\n  if (event.ctrlKey && event.key === \"s\") {\n    console.log(\"Raccourci Ctrl+S détecté\");\n    event.preventDefault(); \u002F\u002F empêcher la sauvegarde du navigateur\n  }\n});\n",[631,4664,4665,4686,4701,4715,4720,4740,4753,4767,4771],{"__ignoreMap":656},[660,4666,4667,4670,4672,4674,4676,4678,4680,4682,4684],{"class":662,"line":663},[660,4668,4669],{"class":666},"document.",[660,4671,4065],{"class":711},[660,4673,4042],{"class":666},[660,4675,4118],{"class":718},[660,4677,757],{"class":666},[660,4679,4075],{"class":1321},[660,4681,4042],{"class":666},[660,4683,4366],{"class":4417},[660,4685,4420],{"class":666},[660,4687,4688,4691,4694,4696,4699],{"class":662,"line":792},[660,4689,4690],{"class":1321},"  if",[660,4692,4693],{"class":666}," (event.key ",[660,4695,3948],{"class":1321},[660,4697,4698],{"class":718}," \"Enter\"",[660,4700,4420],{"class":666},[660,4702,4703,4706,4708,4710,4713],{"class":662,"line":809},[660,4704,4705],{"class":666},"    console.",[660,4707,4200],{"class":711},[660,4709,4042],{"class":666},[660,4711,4712],{"class":718},"\"Vous avez appuyé sur Entrée\"",[660,4714,4048],{"class":666},[660,4716,4717],{"class":662,"line":820},[660,4718,4719],{"class":666},"  }\n",[660,4721,4722,4724,4727,4730,4733,4735,4738],{"class":662,"line":839},[660,4723,4690],{"class":1321},[660,4725,4726],{"class":666}," (event.ctrlKey ",[660,4728,4729],{"class":1321},"&&",[660,4731,4732],{"class":666}," event.key ",[660,4734,3948],{"class":1321},[660,4736,4737],{"class":718}," \"s\"",[660,4739,4420],{"class":666},[660,4741,4742,4744,4746,4748,4751],{"class":662,"line":854},[660,4743,4705],{"class":666},[660,4745,4200],{"class":711},[660,4747,4042],{"class":666},[660,4749,4750],{"class":718},"\"Raccourci Ctrl+S détecté\"",[660,4752,4048],{"class":666},[660,4754,4755,4758,4761,4764],{"class":662,"line":864},[660,4756,4757],{"class":666},"    event.",[660,4759,4760],{"class":711},"preventDefault",[660,4762,4763],{"class":666},"(); ",[660,4765,4766],{"class":1515},"\u002F\u002F empêcher la sauvegarde du navigateur\n",[660,4768,4769],{"class":662,"line":874},[660,4770,4719],{"class":666},[660,4772,4773],{"class":662,"line":889},[660,4774,4095],{"class":666},[598,4776,4777,4780],{},[631,4778,4779],{},"event.preventDefault()"," bloque l'action par défaut associée à l'événement —\nutile pour empêcher la soumission d'un formulaire, la sauvegarde via Ctrl+S\nou la navigation par flèches.",[3996,4782],{},[593,4784,4786],{"id":4785},"trois-manières-dattacher-une-réaction-à-un-clic","Trois manières d'attacher une réaction à un clic",[598,4788,4789],{},"Toutes les approches suivantes font la même chose : afficher une alerte au clic.",[651,4791,4793],{"className":653,"code":4792,"language":655,"meta":656,"style":656},"\u003C!-- 1. Attribut onclick dans le HTML (déconseillé en projet sérieux) -->\n\u003Cbutton onclick=\"alert('clic')\">Bouton A\u003C\u002Fbutton>\n\n\u003C!-- 2. Propriété .onclick en JS -->\n\u003Cbutton id=\"b\">Bouton B\u003C\u002Fbutton>\n\u003Cscript>\n  document.getElementById(\"b\").onclick = function() {\n    alert(\"clic\");\n  };\n\u003C\u002Fscript>\n\n\u003C!-- 3. addEventListener (recommandé) -->\n\u003Cbutton id=\"c\">Bouton C\u003C\u002Fbutton>\n\u003Cscript>\n  document.getElementById(\"c\").addEventListener(\"click\", function() {\n    alert(\"clic\");\n  });\n\u003C\u002Fscript>\n",[631,4794,4795,4800,4823,4827,4832,4852,4860,4883,4895,4900,4908,4912,4917,4937,4945,4969,4980,4986],{"__ignoreMap":656},[660,4796,4797],{"class":662,"line":663},[660,4798,4799],{"class":1515},"\u003C!-- 1. Attribut onclick dans le HTML (déconseillé en projet sérieux) -->\n",[660,4801,4802,4804,4806,4808,4810,4812,4814,4816,4819,4821],{"class":662,"line":792},[660,4803,667],{"class":666},[660,4805,1666],{"class":670},[660,4807,4233],{"class":711},[660,4809,715],{"class":666},[660,4811,4238],{"class":718},[660,4813,4241],{"class":711},[660,4815,4244],{"class":718},[660,4817,4818],{"class":666},">Bouton A\u003C\u002F",[660,4820,1666],{"class":670},[660,4822,678],{"class":666},[660,4824,4825],{"class":662,"line":809},[660,4826,1347],{"emptyLinePlaceholder":1346},[660,4828,4829],{"class":662,"line":820},[660,4830,4831],{"class":1515},"\u003C!-- 2. Propriété .onclick en JS -->\n",[660,4833,4834,4836,4838,4840,4842,4845,4848,4850],{"class":662,"line":839},[660,4835,667],{"class":666},[660,4837,1666],{"class":670},[660,4839,1669],{"class":711},[660,4841,715],{"class":666},[660,4843,4844],{"class":718},"\"b\"",[660,4846,4847],{"class":666},">Bouton B\u003C\u002F",[660,4849,1666],{"class":670},[660,4851,678],{"class":666},[660,4853,4854,4856,4858],{"class":662,"line":854},[660,4855,667],{"class":666},[660,4857,4161],{"class":670},[660,4859,678],{"class":666},[660,4861,4862,4865,4867,4869,4871,4873,4876,4878,4881],{"class":662,"line":864},[660,4863,4864],{"class":666},"  document.",[660,4866,4039],{"class":711},[660,4868,4042],{"class":666},[660,4870,4844],{"class":718},[660,4872,3991],{"class":666},[660,4874,4875],{"class":711},"onclick",[660,4877,3667],{"class":1321},[660,4879,4880],{"class":1321}," function",[660,4882,4078],{"class":666},[660,4884,4885,4888,4890,4893],{"class":662,"line":874},[660,4886,4887],{"class":711},"    alert",[660,4889,4042],{"class":666},[660,4891,4892],{"class":718},"\"clic\"",[660,4894,4048],{"class":666},[660,4896,4897],{"class":662,"line":889},[660,4898,4899],{"class":666},"  };\n",[660,4901,4902,4904,4906],{"class":662,"line":903},[660,4903,965],{"class":666},[660,4905,4161],{"class":670},[660,4907,678],{"class":666},[660,4909,4910],{"class":662,"line":913},[660,4911,1347],{"emptyLinePlaceholder":1346},[660,4913,4914],{"class":662,"line":929},[660,4915,4916],{"class":1515},"\u003C!-- 3. addEventListener (recommandé) -->\n",[660,4918,4919,4921,4923,4925,4927,4930,4933,4935],{"class":662,"line":943},[660,4920,667],{"class":666},[660,4922,1666],{"class":670},[660,4924,1669],{"class":711},[660,4926,715],{"class":666},[660,4928,4929],{"class":718},"\"c\"",[660,4931,4932],{"class":666},">Bouton C\u003C\u002F",[660,4934,1666],{"class":670},[660,4936,678],{"class":666},[660,4938,4939,4941,4943],{"class":662,"line":953},[660,4940,667],{"class":666},[660,4942,4161],{"class":670},[660,4944,678],{"class":666},[660,4946,4947,4949,4951,4953,4955,4957,4959,4961,4963,4965,4967],{"class":662,"line":962},[660,4948,4864],{"class":666},[660,4950,4039],{"class":711},[660,4952,4042],{"class":666},[660,4954,4929],{"class":718},[660,4956,3991],{"class":666},[660,4958,4065],{"class":711},[660,4960,4042],{"class":666},[660,4962,4070],{"class":718},[660,4964,757],{"class":666},[660,4966,4075],{"class":1321},[660,4968,4078],{"class":666},[660,4970,4972,4974,4976,4978],{"class":662,"line":4971},16,[660,4973,4887],{"class":711},[660,4975,4042],{"class":666},[660,4977,4892],{"class":718},[660,4979,4048],{"class":666},[660,4981,4983],{"class":662,"line":4982},17,[660,4984,4985],{"class":666},"  });\n",[660,4987,4989,4991,4993],{"class":662,"line":4988},18,[660,4990,965],{"class":666},[660,4992,4161],{"class":670},[660,4994,678],{"class":666},[598,4996,4997,4998,5000,5001,5004,5005,5008],{},"Pourquoi préférer ",[631,4999,4065],{}," ? Parce qu'il ",[602,5002,5003],{},"autorise plusieurs\nécouteurs"," sur le même événement, alors que ",[631,5006,5007],{},"onclick = …"," écrase le\nprécédent. Et parce qu'il sépare proprement le HTML (structure) du JS\n(comportement).",[1083,5010,5012,5017],{"correct":1375,"slug":5011},"evenements-js-c2",[1088,5013,5014],{"v-slot:question":656},[598,5015,5016],{},"Combien d'écouteurs peut-on attacher à un même bouton pour 'click' avec addEventListener ?",[1088,5018,5019],{"v-slot:choices":656},[908,5020,5021,5024,5027,5030],{},[919,5022,5023],{},"1 seul",[919,5025,5026],{},"Jusqu’à 2",[919,5028,5029],{},"Autant qu’on veut",[919,5031,5032],{},"Aucun, c’est interdit",[3996,5034],{},[593,5036,5038],{"id":5037},"modifier-la-réaction-dun-bouton-existant","Modifier la réaction d'un bouton existant",[598,5040,5041],{},"Le programme officiel parle de « modifier les méthodes exécutées lors d'un\nclic sur un bouton ». Voici comment :",[651,5043,5045],{"className":653,"code":5044,"language":655,"meta":656,"style":656},"\u003Cbutton id=\"action\">Action\u003C\u002Fbutton>\n",[631,5046,5047],{"__ignoreMap":656},[660,5048,5049,5051,5053,5055,5057,5060,5063,5065],{"class":662,"line":663},[660,5050,667],{"class":666},[660,5052,1666],{"class":670},[660,5054,1669],{"class":711},[660,5056,715],{"class":666},[660,5058,5059],{"class":718},"\"action\"",[660,5061,5062],{"class":666},">Action\u003C\u002F",[660,5064,1666],{"class":670},[660,5066,678],{"class":666},[651,5068,5070],{"className":3633,"code":5069,"language":3635,"meta":656,"style":656},"const btn = document.getElementById(\"action\");\n\n\u002F\u002F État initial : un compteur\nlet compteur = 0;\nfunction incrementer() {\n  compteur += 1;\n  console.log(`Compteur = ${compteur}`);\n}\nbtn.addEventListener(\"click\", incrementer);\n\n\u002F\u002F Plus tard : on retire le compteur et on installe autre chose\nfunction direBonjour() {\n  alert(\"Bonjour !\");\n}\nbtn.removeEventListener(\"click\", incrementer);\nbtn.addEventListener(\"click\", direBonjour);\n",[631,5071,5072,5091,5095,5100,5114,5123,5136,5154,5158,5172,5176,5181,5190,5201,5205,5218],{"__ignoreMap":656},[660,5073,5074,5076,5079,5081,5083,5085,5087,5089],{"class":662,"line":663},[660,5075,3661],{"class":1321},[660,5077,5078],{"class":1298}," btn",[660,5080,3667],{"class":1321},[660,5082,4036],{"class":666},[660,5084,4039],{"class":711},[660,5086,4042],{"class":666},[660,5088,5059],{"class":718},[660,5090,4048],{"class":666},[660,5092,5093],{"class":662,"line":792},[660,5094,1347],{"emptyLinePlaceholder":1346},[660,5096,5097],{"class":662,"line":809},[660,5098,5099],{"class":1515},"\u002F\u002F État initial : un compteur\n",[660,5101,5102,5104,5107,5109,5112],{"class":662,"line":820},[660,5103,3642],{"class":1321},[660,5105,5106],{"class":666}," compteur ",[660,5108,715],{"class":1321},[660,5110,5111],{"class":1298}," 0",[660,5113,1308],{"class":666},[660,5115,5116,5118,5121],{"class":662,"line":839},[660,5117,4075],{"class":1321},[660,5119,5120],{"class":711}," incrementer",[660,5122,4078],{"class":666},[660,5124,5125,5128,5131,5134],{"class":662,"line":854},[660,5126,5127],{"class":666},"  compteur ",[660,5129,5130],{"class":1321},"+=",[660,5132,5133],{"class":1298}," 1",[660,5135,1308],{"class":666},[660,5137,5138,5140,5142,5144,5147,5150,5152],{"class":662,"line":864},[660,5139,4197],{"class":666},[660,5141,4200],{"class":711},[660,5143,4042],{"class":666},[660,5145,5146],{"class":718},"`Compteur = ${",[660,5148,5149],{"class":666},"compteur",[660,5151,4451],{"class":718},[660,5153,4048],{"class":666},[660,5155,5156],{"class":662,"line":874},[660,5157,1341],{"class":666},[660,5159,5160,5163,5165,5167,5169],{"class":662,"line":889},[660,5161,5162],{"class":666},"btn.",[660,5164,4065],{"class":711},[660,5166,4042],{"class":666},[660,5168,4070],{"class":718},[660,5170,5171],{"class":666},", incrementer);\n",[660,5173,5174],{"class":662,"line":903},[660,5175,1347],{"emptyLinePlaceholder":1346},[660,5177,5178],{"class":662,"line":913},[660,5179,5180],{"class":1515},"\u002F\u002F Plus tard : on retire le compteur et on installe autre chose\n",[660,5182,5183,5185,5188],{"class":662,"line":929},[660,5184,4075],{"class":1321},[660,5186,5187],{"class":711}," direBonjour",[660,5189,4078],{"class":666},[660,5191,5192,5194,5196,5199],{"class":662,"line":943},[660,5193,4083],{"class":711},[660,5195,4042],{"class":666},[660,5197,5198],{"class":718},"\"Bonjour !\"",[660,5200,4048],{"class":666},[660,5202,5203],{"class":662,"line":953},[660,5204,1341],{"class":666},[660,5206,5207,5209,5212,5214,5216],{"class":662,"line":962},[660,5208,5162],{"class":666},[660,5210,5211],{"class":711},"removeEventListener",[660,5213,4042],{"class":666},[660,5215,4070],{"class":718},[660,5217,5171],{"class":666},[660,5219,5220,5222,5224,5226,5228],{"class":662,"line":4971},[660,5221,5162],{"class":666},[660,5223,4065],{"class":711},[660,5225,4042],{"class":666},[660,5227,4070],{"class":718},[660,5229,5230],{"class":666},", direBonjour);\n",[598,5232,5233,5234,5237,5238,697],{},"Deux conditions pour ",[602,5235,5236],{},"retirer"," un écouteur avec ",[631,5239,5211],{},[4100,5241,5242,5249],{},[919,5243,5244,5245,5248],{},"Passer ",[602,5246,5247],{},"exactement la même fonction"," que celle attachée (donc avoir gardé\nune référence — pas une fonction anonyme).",[919,5250,5251,5252,767],{},"Passer le ",[602,5253,5254],{},"même nom d'événement",[1798,5256,5257],{},[598,5258,5259,5260,5263,5264,5267,5268,5271],{},"Si vous avez attaché un écouteur via ",[631,5261,5262],{},"addEventListener(\"click\", function() { … })"," (fonction ",[602,5265,5266],{},"anonyme","), vous ne pourrez ",[602,5269,5270],{},"jamais"," le retirer. Pour\npouvoir supprimer, nommer la fonction et garder sa référence.",[3996,5273],{},[593,5275,5277],{"id":5276},"le-bouillonnement-dévénement-notion-sensibilisée","Le bouillonnement d'événement (notion sensibilisée)",[598,5279,5280,5281,5283,5284,5286,5287,5289,5290,5289,5292,5289,5294,5297,5298,1910,5301,5304],{},"Quand vous cliquez sur un ",[631,5282,1068],{}," à l'intérieur d'un ",[631,5285,1078],{},", l'événement\n« remonte » vers les parents : ",[631,5288,660],{}," → ",[631,5291,1666],{},[631,5293,869],{},[631,5295,5296],{},"document",". C'est\nle ",[602,5299,5300],{},"bouillonnement",[3988,5302,5303],{},"bubbling","). Un écouteur attaché à un parent reçoit\ndonc les clics sur ses enfants.",[651,5306,5308],{"className":653,"code":5307,"language":655,"meta":656,"style":656},"\u003Cdiv id=\"parent\">\n  \u003Cbutton id=\"enfant\">Cliquez\u003C\u002Fbutton>\n\u003C\u002Fdiv>\n",[631,5309,5310,5326,5346],{"__ignoreMap":656},[660,5311,5312,5314,5317,5319,5321,5324],{"class":662,"line":663},[660,5313,667],{"class":666},[660,5315,5316],{"class":670},"div",[660,5318,1669],{"class":711},[660,5320,715],{"class":666},[660,5322,5323],{"class":718},"\"parent\"",[660,5325,678],{"class":666},[660,5327,5328,5330,5332,5334,5336,5339,5342,5344],{"class":662,"line":792},[660,5329,812],{"class":666},[660,5331,1666],{"class":670},[660,5333,1669],{"class":711},[660,5335,715],{"class":666},[660,5337,5338],{"class":718},"\"enfant\"",[660,5340,5341],{"class":666},">Cliquez\u003C\u002F",[660,5343,1666],{"class":670},[660,5345,678],{"class":666},[660,5347,5348,5350,5352],{"class":662,"line":809},[660,5349,965],{"class":666},[660,5351,5316],{"class":670},[660,5353,678],{"class":666},[651,5355,5357],{"className":3633,"code":5356,"language":3635,"meta":656,"style":656},"document.getElementById(\"parent\").addEventListener(\"click\", function() {\n  console.log(\"Clic vu par le parent\");\n});\ndocument.getElementById(\"enfant\").addEventListener(\"click\", function() {\n  console.log(\"Clic vu par le bouton\");\n});\n\u002F\u002F Cliquer sur le bouton affiche les deux messages,\n\u002F\u002F le bouton en premier.\n",[631,5358,5359,5383,5396,5400,5424,5437,5441,5446],{"__ignoreMap":656},[660,5360,5361,5363,5365,5367,5369,5371,5373,5375,5377,5379,5381],{"class":662,"line":663},[660,5362,4669],{"class":666},[660,5364,4039],{"class":711},[660,5366,4042],{"class":666},[660,5368,5323],{"class":718},[660,5370,3991],{"class":666},[660,5372,4065],{"class":711},[660,5374,4042],{"class":666},[660,5376,4070],{"class":718},[660,5378,757],{"class":666},[660,5380,4075],{"class":1321},[660,5382,4078],{"class":666},[660,5384,5385,5387,5389,5391,5394],{"class":662,"line":792},[660,5386,4197],{"class":666},[660,5388,4200],{"class":711},[660,5390,4042],{"class":666},[660,5392,5393],{"class":718},"\"Clic vu par le parent\"",[660,5395,4048],{"class":666},[660,5397,5398],{"class":662,"line":809},[660,5399,4095],{"class":666},[660,5401,5402,5404,5406,5408,5410,5412,5414,5416,5418,5420,5422],{"class":662,"line":820},[660,5403,4669],{"class":666},[660,5405,4039],{"class":711},[660,5407,4042],{"class":666},[660,5409,5338],{"class":718},[660,5411,3991],{"class":666},[660,5413,4065],{"class":711},[660,5415,4042],{"class":666},[660,5417,4070],{"class":718},[660,5419,757],{"class":666},[660,5421,4075],{"class":1321},[660,5423,4078],{"class":666},[660,5425,5426,5428,5430,5432,5435],{"class":662,"line":839},[660,5427,4197],{"class":666},[660,5429,4200],{"class":711},[660,5431,4042],{"class":666},[660,5433,5434],{"class":718},"\"Clic vu par le bouton\"",[660,5436,4048],{"class":666},[660,5438,5439],{"class":662,"line":854},[660,5440,4095],{"class":666},[660,5442,5443],{"class":662,"line":864},[660,5444,5445],{"class":1515},"\u002F\u002F Cliquer sur le bouton affiche les deux messages,\n",[660,5447,5448],{"class":662,"line":874},[660,5449,5450],{"class":1515},"\u002F\u002F le bouton en premier.\n",[598,5452,5453,5454,767],{},"Pour stopper la remontée, ",[631,5455,5456],{},"event.stopPropagation()",[3996,5458],{},[593,5460,1818],{"id":1817},[908,5462,5463,5497,5509],{},[919,5464,5465,5468,5469,5472,5473,5475,5476,5478,5479,5481,5482,5484,5485,5487,5488,5490,5491,5493,5494,767],{},[602,5466,5467],{},"Le script chargé trop tôt"," : si le ",[631,5470,5471],{},"\u003Cscript>"," est dans le ",[631,5474,637],{}," sans\n",[631,5477,4268],{},", il s'exécute avant que les éléments HTML existent. ",[631,5480,4039],{},"\nretournera ",[631,5483,3696],{},". Solutions : placer ",[631,5486,5471],{}," en fin de ",[631,5489,641],{},", ou\nutiliser ",[631,5492,4268],{},", ou écouter ",[631,5495,5496],{},"DOMContentLoaded",[919,5498,5499,5504,5505,5508],{},[602,5500,5501,5503],{},[631,5502,4366],{}," non utilisé"," : il faut tout de même le déclarer dans la signature\nde la fonction (",[631,5506,5507],{},"function(event) { … }",") si on veut y accéder.",[919,5510,5511,1841,5514,5517],{},[602,5512,5513],{},"Fonctions fléchées",[631,5515,5516],{},"() => { … }"," fonctionne aussi comme écouteur, et\nest aujourd'hui souvent préférée. Comportement identique pour ce chapitre.",[593,5519,1903],{"id":1902},[598,5521,5522,5523,5526],{},"Vous savez désormais détecter qu'un clic a eu lieu. Le cours suivant\n(manipulation du DOM) vous apprendra à ",[602,5524,5525],{},"transformer la page"," en réaction —\nc'est cette combinaison événement + modification du DOM qui produit\nl'interactivité moderne.",[1556,5528,5529],{},"html pre.shiki code .s8jYJ, html code.shiki .s8jYJ{--shiki-light:#D73A49;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sxrX7, html code.shiki .sxrX7{--shiki-light:#24292E;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sBjJW, html code.shiki .sBjJW{--shiki-light:#005CC5;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sCsY4, html code.shiki .sCsY4{--shiki-light:#6A737D;--shiki-default:#6A737D;--shiki-dark:#6A737D}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 .sIIMD, html code.shiki .sIIMD{--shiki-light:#032F62;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .snPdu, html code.shiki .snPdu{--shiki-light:#6F42C1;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sovSZ, html code.shiki .sovSZ{--shiki-light:#22863A;--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sP4rz, html code.shiki .sP4rz{--shiki-light:#E36209;--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":656,"searchDepth":792,"depth":792,"links":5531},[5532,5533,5534,5535,5536,5537,5538,5539,5540,5541,5542],{"id":595,"depth":792,"text":596},{"id":3620,"depth":792,"text":3621},{"id":4000,"depth":792,"text":4001},{"id":4140,"depth":792,"text":4141},{"id":4274,"depth":792,"text":4275},{"id":4568,"depth":792,"text":4569},{"id":4785,"depth":792,"text":4786},{"id":5037,"depth":792,"text":5038},{"id":5276,"depth":792,"text":5277},{"id":1817,"depth":792,"text":1818},{"id":1902,"depth":792,"text":1903},"Modèle réactif d'une page Web — attacher des écouteurs d'événements souris et clavier en JavaScript pour rendre l'interface vivante.",{},[5546,5548],{"slug":4543,"kind":1961,"question":4548,"choices":5547,"correct":1085,"multi":1963,"explanation":656},[4555,4065,4560,4563],{"slug":5011,"kind":1961,"question":5016,"choices":5549,"correct":1375,"multi":1963,"explanation":656},[5023,5026,5029,5032],{"title":343,"description":5543},"5WTywSWVy2i-FqCRgNWW5-qHY3Rs7NyJyG7YwVI-5mU",{"id":5553,"title":347,"bo":5554,"body":5555,"description":7167,"eval":1956,"extension":1957,"labo":1956,"meta":7168,"navigation":1346,"path":348,"quizzes":7169,"readingTime":663,"seo":7176,"stem":349,"tp":1956,"__hash__":7177},"cours\u002F1.nsi-1ere\u002Fpe-ihm-web\u002F4.dom-interaction.md",[3580],{"type":590,"value":5556,"toc":7154},[5557,5559,5595,5599,5603,5610,5671,5676,5682,5692,5705,5709,5714,5862,5951,5977,5999,6003,6006,6093,6096,6121,6140,6144,6147,6251,6257,6321,6325,6328,6456,6468,6513,6537,6541,6544,6648,6651,6666,6677,6681,6684,6709,6795,6805,6809,6906,7041,7048,7069,7071,7138,7140,7151],[593,5558,596],{"id":595},[598,5560,5561,5562,5565,5566,5569,5570,5572,5573,5576,5577,5580,5581,757,5584,757,5586,5588,5589,757,5592,4119],{},"Une fois capable de ",[602,5563,5564],{},"détecter"," une action de l'utilisateur (cours\nprécédent), il reste à ",[602,5567,5568],{},"modifier la page"," en réponse. C'est ce que permet le\n",[602,5571,1132],{}," — ",[3988,5574,5575],{},"Document Object Model"," — la représentation du document HTML sous\nforme d'un ",[602,5578,5579],{},"arbre d'objets manipulables"," depuis JavaScript. Chaque balise du\nHTML devient un objet JS avec des propriétés (",[631,5582,5583],{},"textContent",[631,5585,1556],{},[631,5587,1804],{},"…)\net des méthodes (",[631,5590,5591],{},"appendChild",[631,5593,5594],{},"setAttribute",[598,5596,2003,5597,767],{},[2005,5598],{"code":3580},[593,5600,5602],{"id":5601},"quest-ce-que-le-dom","Qu'est-ce que le DOM ?",[598,5604,5605,5606,5609],{},"Quand un navigateur charge une page HTML, il construit en mémoire un ",[602,5607,5608],{},"arbre","\nqui reflète la structure imbriquée des balises. Le HTML suivant :",[651,5611,5613],{"className":653,"code":5612,"language":655,"meta":656,"style":656},"\u003Cbody>\n  \u003Ch1 id=\"titre\">Bonjour\u003C\u002Fh1>\n  \u003Cp class=\"intro\">Bienvenue.\u003C\u002Fp>\n\u003C\u002Fbody>\n",[631,5614,5615,5623,5643,5663],{"__ignoreMap":656},[660,5616,5617,5619,5621],{"class":662,"line":663},[660,5618,667],{"class":666},[660,5620,869],{"class":670},[660,5622,678],{"class":666},[660,5624,5625,5627,5629,5631,5633,5636,5639,5641],{"class":662,"line":792},[660,5626,812],{"class":666},[660,5628,879],{"class":670},[660,5630,1669],{"class":711},[660,5632,715],{"class":666},[660,5634,5635],{"class":718},"\"titre\"",[660,5637,5638],{"class":666},">Bonjour\u003C\u002F",[660,5640,879],{"class":670},[660,5642,678],{"class":666},[660,5644,5645,5647,5649,5651,5653,5656,5659,5661],{"class":662,"line":809},[660,5646,812],{"class":666},[660,5648,598],{"class":670},[660,5650,1677],{"class":711},[660,5652,715],{"class":666},[660,5654,5655],{"class":718},"\"intro\"",[660,5657,5658],{"class":666},">Bienvenue.\u003C\u002F",[660,5660,598],{"class":670},[660,5662,678],{"class":666},[660,5664,5665,5667,5669],{"class":662,"line":820},[660,5666,965],{"class":666},[660,5668,869],{"class":670},[660,5670,678],{"class":666},[598,5672,5673,5674,697],{},"donne, en mémoire, un arbre dont la racine est ",[631,5675,5296],{},[651,5677,5680],{"className":5678,"code":5679,"language":2925},[2923],"document\n└── \u003Chtml>\n    ├── \u003Chead>...\u003C\u002Fhead>\n    └── \u003Cbody>\n        ├── \u003Ch1 id=\"titre\">Bonjour\u003C\u002Fh1>\n        └── \u003Cp class=\"intro\">Bienvenue.\u003C\u002Fp>\n",[631,5681,5679],{"__ignoreMap":656},[598,5683,5684,5685,5687,5688,5691],{},"JavaScript dispose d'un objet global ",[631,5686,5296],{}," qui sert de ",[602,5689,5690],{},"point d'entrée","\nà cet arbre. Tout ce qui suit en découle.",[611,5693,5694],{},[598,5695,5696,5697,5700,5701,5704],{},"Le DOM n'est pas le HTML. Le HTML est le ",[602,5698,5699],{},"texte source"," ; le DOM est l'",[602,5702,5703],{},"arbre\nvivant"," construit par le navigateur. Quand JavaScript ajoute un paragraphe,\nle HTML d'origine ne change pas — mais le DOM, oui, et l'écran reflète le DOM.",[593,5706,5708],{"id":5707},"sélectionner-des-éléments","Sélectionner des éléments",[598,5710,5711,5712,697],{},"Cinq méthodes principales sur ",[631,5713,5296],{},[651,5715,5717],{"className":3633,"code":5716,"language":3635,"meta":656,"style":656},"\u002F\u002F Par identifiant (un seul élément, ou null)\nconst titre = document.getElementById(\"titre\");\n\n\u002F\u002F Par classe (collection vivante d'éléments)\nconst intros = document.getElementsByClassName(\"intro\");\n\n\u002F\u002F Par nom de balise (collection vivante)\nconst tousLesP = document.getElementsByTagName(\"p\");\n\n\u002F\u002F Par sélecteur CSS — premier élément trouvé\nconst premier = document.querySelector(\".intro\");\n\n\u002F\u002F Par sélecteur CSS — tous les éléments\nconst tous = document.querySelectorAll(\"p.intro\");\n",[631,5718,5719,5724,5743,5747,5752,5772,5776,5781,5802,5806,5811,5832,5836,5841],{"__ignoreMap":656},[660,5720,5721],{"class":662,"line":663},[660,5722,5723],{"class":1515},"\u002F\u002F Par identifiant (un seul élément, ou null)\n",[660,5725,5726,5728,5731,5733,5735,5737,5739,5741],{"class":662,"line":792},[660,5727,3661],{"class":1321},[660,5729,5730],{"class":1298}," titre",[660,5732,3667],{"class":1321},[660,5734,4036],{"class":666},[660,5736,4039],{"class":711},[660,5738,4042],{"class":666},[660,5740,5635],{"class":718},[660,5742,4048],{"class":666},[660,5744,5745],{"class":662,"line":809},[660,5746,1347],{"emptyLinePlaceholder":1346},[660,5748,5749],{"class":662,"line":820},[660,5750,5751],{"class":1515},"\u002F\u002F Par classe (collection vivante d'éléments)\n",[660,5753,5754,5756,5759,5761,5763,5766,5768,5770],{"class":662,"line":839},[660,5755,3661],{"class":1321},[660,5757,5758],{"class":1298}," intros",[660,5760,3667],{"class":1321},[660,5762,4036],{"class":666},[660,5764,5765],{"class":711},"getElementsByClassName",[660,5767,4042],{"class":666},[660,5769,5655],{"class":718},[660,5771,4048],{"class":666},[660,5773,5774],{"class":662,"line":854},[660,5775,1347],{"emptyLinePlaceholder":1346},[660,5777,5778],{"class":662,"line":864},[660,5779,5780],{"class":1515},"\u002F\u002F Par nom de balise (collection vivante)\n",[660,5782,5783,5785,5788,5790,5792,5795,5797,5800],{"class":662,"line":874},[660,5784,3661],{"class":1321},[660,5786,5787],{"class":1298}," tousLesP",[660,5789,3667],{"class":1321},[660,5791,4036],{"class":666},[660,5793,5794],{"class":711},"getElementsByTagName",[660,5796,4042],{"class":666},[660,5798,5799],{"class":718},"\"p\"",[660,5801,4048],{"class":666},[660,5803,5804],{"class":662,"line":889},[660,5805,1347],{"emptyLinePlaceholder":1346},[660,5807,5808],{"class":662,"line":903},[660,5809,5810],{"class":1515},"\u002F\u002F Par sélecteur CSS — premier élément trouvé\n",[660,5812,5813,5815,5818,5820,5822,5825,5827,5830],{"class":662,"line":913},[660,5814,3661],{"class":1321},[660,5816,5817],{"class":1298}," premier",[660,5819,3667],{"class":1321},[660,5821,4036],{"class":666},[660,5823,5824],{"class":711},"querySelector",[660,5826,4042],{"class":666},[660,5828,5829],{"class":718},"\".intro\"",[660,5831,4048],{"class":666},[660,5833,5834],{"class":662,"line":929},[660,5835,1347],{"emptyLinePlaceholder":1346},[660,5837,5838],{"class":662,"line":943},[660,5839,5840],{"class":1515},"\u002F\u002F Par sélecteur CSS — tous les éléments\n",[660,5842,5843,5845,5848,5850,5852,5855,5857,5860],{"class":662,"line":953},[660,5844,3661],{"class":1321},[660,5846,5847],{"class":1298}," tous",[660,5849,3667],{"class":1321},[660,5851,4036],{"class":666},[660,5853,5854],{"class":711},"querySelectorAll",[660,5856,4042],{"class":666},[660,5858,5859],{"class":718},"\"p.intro\"",[660,5861,4048],{"class":666},[974,5863,5864,5876],{},[977,5865,5866],{},[980,5867,5868,5870,5873],{},[983,5869,3177],{},[983,5871,5872],{},"Renvoie",[983,5874,5875],{},"Quand l'utiliser",[990,5877,5878,5898,5911,5923,5938],{},[980,5879,5880,5885,5893],{},[995,5881,5882],{},[631,5883,5884],{},"getElementById(\"x\")",[995,5886,5887,5888,5890,5891,767],{},"L'élément avec cet ",[631,5889,1804],{},", ou ",[631,5892,3696],{},[995,5894,5895,5896,767],{},"Cible unique connue par ",[631,5897,1804],{},[980,5899,5900,5905,5908],{},[995,5901,5902],{},[631,5903,5904],{},"getElementsByClassName(\"c\")",[995,5906,5907],{},"Collection HTML d'éléments.",[995,5909,5910],{},"Plusieurs éléments par classe.",[980,5912,5913,5918,5920],{},[995,5914,5915],{},[631,5916,5917],{},"getElementsByTagName(\"t\")",[995,5919,5907],{},[995,5921,5922],{},"Tous les éléments d'un type.",[980,5924,5925,5930,5935],{},[995,5926,5927],{},[631,5928,5929],{},"querySelector(\"…\")",[995,5931,5932,5933,767],{},"Le premier élément correspondant, ou ",[631,5934,3696],{},[995,5936,5937],{},"Cible unique via sélecteur CSS.",[980,5939,5940,5945,5948],{},[995,5941,5942],{},[631,5943,5944],{},"querySelectorAll(\"…\")",[995,5946,5947],{},"Liste statique d'éléments.",[995,5949,5950],{},"Plusieurs éléments via sélecteur CSS.",[5952,5953,5954],"tip",{},[598,5955,5956,5957,5963,5964,757,5967,1917,5970,757,5973,5976],{},"En pratique, ",[602,5958,5959,1845,5961],{},[631,5960,5824],{},[631,5962,5854],{}," suffisent à presque\ntout : ils acceptent n'importe quel sélecteur CSS (",[631,5965,5966],{},"#id",[631,5968,5969],{},".classe",[631,5971,5972],{},"tag.classe",[631,5974,5975],{},"ul > li.actif","…). Privilégiez-les pour la cohérence.",[1083,5978,5980,5985],{"correct":1085,"slug":5979},"dom-interaction-c1",[1088,5981,5982],{"v-slot:question":656},[598,5983,5984],{},"Que renvoie document.getElementById('inconnu') si aucun élément n'a cet id ?",[1088,5986,5987],{"v-slot:choices":656},[908,5988,5989,5991,5993,5996],{},[919,5990,3699],{},[919,5992,3696],{},[919,5994,5995],{},"[]",[919,5997,5998],{},"une erreur",[593,6000,6002],{"id":6001},"modifier-le-contenu-dun-élément","Modifier le contenu d'un élément",[598,6004,6005],{},"Une fois un élément sélectionné, on peut lire ou modifier son contenu :",[651,6007,6009],{"className":3633,"code":6008,"language":3635,"meta":656,"style":656},"const titre = document.getElementById(\"titre\");\n\n\u002F\u002F Lire le texte\nconsole.log(titre.textContent); \u002F\u002F \"Bonjour\"\n\n\u002F\u002F Remplacer le texte\ntitre.textContent = \"Bonsoir\";\n\n\u002F\u002F Injecter du HTML (avec balises interprétées)\ntitre.innerHTML = \"Salut \u003Cem>tout le monde\u003C\u002Fem>\";\n",[631,6010,6011,6029,6033,6038,6051,6055,6060,6072,6076,6081],{"__ignoreMap":656},[660,6012,6013,6015,6017,6019,6021,6023,6025,6027],{"class":662,"line":663},[660,6014,3661],{"class":1321},[660,6016,5730],{"class":1298},[660,6018,3667],{"class":1321},[660,6020,4036],{"class":666},[660,6022,4039],{"class":711},[660,6024,4042],{"class":666},[660,6026,5635],{"class":718},[660,6028,4048],{"class":666},[660,6030,6031],{"class":662,"line":792},[660,6032,1347],{"emptyLinePlaceholder":1346},[660,6034,6035],{"class":662,"line":809},[660,6036,6037],{"class":1515},"\u002F\u002F Lire le texte\n",[660,6039,6040,6043,6045,6048],{"class":662,"line":820},[660,6041,6042],{"class":666},"console.",[660,6044,4200],{"class":711},[660,6046,6047],{"class":666},"(titre.textContent); ",[660,6049,6050],{"class":1515},"\u002F\u002F \"Bonjour\"\n",[660,6052,6053],{"class":662,"line":839},[660,6054,1347],{"emptyLinePlaceholder":1346},[660,6056,6057],{"class":662,"line":854},[660,6058,6059],{"class":1515},"\u002F\u002F Remplacer le texte\n",[660,6061,6062,6065,6067,6070],{"class":662,"line":864},[660,6063,6064],{"class":666},"titre.textContent ",[660,6066,715],{"class":1321},[660,6068,6069],{"class":718}," \"Bonsoir\"",[660,6071,1308],{"class":666},[660,6073,6074],{"class":662,"line":874},[660,6075,1347],{"emptyLinePlaceholder":1346},[660,6077,6078],{"class":662,"line":889},[660,6079,6080],{"class":1515},"\u002F\u002F Injecter du HTML (avec balises interprétées)\n",[660,6082,6083,6086,6088,6091],{"class":662,"line":903},[660,6084,6085],{"class":666},"titre.innerHTML ",[660,6087,715],{"class":1321},[660,6089,6090],{"class":718}," \"Salut \u003Cem>tout le monde\u003C\u002Fem>\"",[660,6092,1308],{"class":666},[598,6094,6095],{},"Différence cruciale :",[908,6097,6098,6110],{},[919,6099,6100,6105,6106,6109],{},[602,6101,6102],{},[631,6103,6104],{},".textContent"," traite la valeur comme du ",[602,6107,6108],{},"texte brut",". Sûr et rapide.",[919,6111,6112,6117,6118,6120],{},[602,6113,6114],{},[631,6115,6116],{},".innerHTML"," interprète la valeur comme du ",[602,6119,604],{},". Puissant mais\ndangereux si la valeur vient d'un utilisateur (risque d'injection).",[1798,6122,6123],{},[598,6124,6125,6126,6129,6130,1910,6133,6136,6137,767],{},"Ne jamais faire ",[631,6127,6128],{},"element.innerHTML = saisieUtilisateur"," sans précaution :\nc'est la principale source de failles ",[602,6131,6132],{},"XSS",[3988,6134,6135],{},"cross-site scripting",").\nPréférer ",[631,6138,6139],{},"element.textContent = saisieUtilisateur",[593,6141,6143],{"id":6142},"modifier-des-attributs","Modifier des attributs",[598,6145,6146],{},"Trois opérations standard :",[651,6148,6150],{"className":3633,"code":6149,"language":3635,"meta":656,"style":656},"const img = document.getElementById(\"photo\");\n\n\u002F\u002F Lire un attribut\nconsole.log(img.getAttribute(\"src\"));\n\n\u002F\u002F Définir \u002F changer un attribut\nimg.setAttribute(\"alt\", \"Nouvelle description\");\n\n\u002F\u002F Supprimer un attribut\nimg.removeAttribute(\"title\");\n",[631,6151,6152,6171,6175,6180,6200,6204,6209,6228,6232,6237],{"__ignoreMap":656},[660,6153,6154,6156,6159,6161,6163,6165,6167,6169],{"class":662,"line":663},[660,6155,3661],{"class":1321},[660,6157,6158],{"class":1298}," img",[660,6160,3667],{"class":1321},[660,6162,4036],{"class":666},[660,6164,4039],{"class":711},[660,6166,4042],{"class":666},[660,6168,2599],{"class":718},[660,6170,4048],{"class":666},[660,6172,6173],{"class":662,"line":792},[660,6174,1347],{"emptyLinePlaceholder":1346},[660,6176,6177],{"class":662,"line":809},[660,6178,6179],{"class":1515},"\u002F\u002F Lire un attribut\n",[660,6181,6182,6184,6186,6189,6192,6194,6197],{"class":662,"line":820},[660,6183,6042],{"class":666},[660,6185,4200],{"class":711},[660,6187,6188],{"class":666},"(img.",[660,6190,6191],{"class":711},"getAttribute",[660,6193,4042],{"class":666},[660,6195,6196],{"class":718},"\"src\"",[660,6198,6199],{"class":666},"));\n",[660,6201,6202],{"class":662,"line":839},[660,6203,1347],{"emptyLinePlaceholder":1346},[660,6205,6206],{"class":662,"line":854},[660,6207,6208],{"class":1515},"\u002F\u002F Définir \u002F changer un attribut\n",[660,6210,6211,6214,6216,6218,6221,6223,6226],{"class":662,"line":864},[660,6212,6213],{"class":666},"img.",[660,6215,5594],{"class":711},[660,6217,4042],{"class":666},[660,6219,6220],{"class":718},"\"alt\"",[660,6222,757],{"class":666},[660,6224,6225],{"class":718},"\"Nouvelle description\"",[660,6227,4048],{"class":666},[660,6229,6230],{"class":662,"line":874},[660,6231,1347],{"emptyLinePlaceholder":1346},[660,6233,6234],{"class":662,"line":889},[660,6235,6236],{"class":1515},"\u002F\u002F Supprimer un attribut\n",[660,6238,6239,6241,6244,6246,6249],{"class":662,"line":903},[660,6240,6213],{"class":666},[660,6242,6243],{"class":711},"removeAttribute",[660,6245,4042],{"class":666},[660,6247,6248],{"class":718},"\"title\"",[660,6250,4048],{"class":666},[598,6252,6253,6254,697],{},"Pour certains attributs courants, on peut aussi y accéder en tant que\n",[602,6255,6256],{},"propriété",[651,6258,6260],{"className":3633,"code":6259,"language":3635,"meta":656,"style":656},"img.src = \"nouveau.jpg\";\nimg.alt = \"Description\";\n\nconst lien = document.querySelector(\"a\");\nlien.href = \"https:\u002F\u002Fnsi.rocks\";\n",[631,6261,6262,6274,6286,6290,6309],{"__ignoreMap":656},[660,6263,6264,6267,6269,6272],{"class":662,"line":663},[660,6265,6266],{"class":666},"img.src ",[660,6268,715],{"class":1321},[660,6270,6271],{"class":718}," \"nouveau.jpg\"",[660,6273,1308],{"class":666},[660,6275,6276,6279,6281,6284],{"class":662,"line":792},[660,6277,6278],{"class":666},"img.alt ",[660,6280,715],{"class":1321},[660,6282,6283],{"class":718}," \"Description\"",[660,6285,1308],{"class":666},[660,6287,6288],{"class":662,"line":809},[660,6289,1347],{"emptyLinePlaceholder":1346},[660,6291,6292,6294,6297,6299,6301,6303,6305,6307],{"class":662,"line":820},[660,6293,3661],{"class":1321},[660,6295,6296],{"class":1298}," lien",[660,6298,3667],{"class":1321},[660,6300,4036],{"class":666},[660,6302,5824],{"class":711},[660,6304,4042],{"class":666},[660,6306,4621],{"class":718},[660,6308,4048],{"class":666},[660,6310,6311,6314,6316,6319],{"class":662,"line":839},[660,6312,6313],{"class":666},"lien.href ",[660,6315,715],{"class":1321},[660,6317,6318],{"class":718}," \"https:\u002F\u002Fnsi.rocks\"",[660,6320,1308],{"class":666},[593,6322,6324],{"id":6323},"modifier-le-style","Modifier le style",[598,6326,6327],{},"Deux approches, à choisir selon le contexte :",[651,6329,6331],{"className":3633,"code":6330,"language":3635,"meta":656,"style":656},"const titre = document.getElementById(\"titre\");\n\n\u002F\u002F 1. Propriété par propriété (style inline)\ntitre.style.color = \"navy\";\ntitre.style.fontSize = \"32px\";       \u002F\u002F notez le camelCase\ntitre.style.backgroundColor = \"yellow\";\n\n\u002F\u002F 2. Ajouter \u002F retirer une classe CSS (préféré)\ntitre.classList.add(\"souligne\");\ntitre.classList.remove(\"ancien\");\ntitre.classList.toggle(\"actif\");     \u002F\u002F bascule on\u002Foff\n",[631,6332,6333,6351,6355,6360,6372,6388,6400,6404,6409,6424,6438],{"__ignoreMap":656},[660,6334,6335,6337,6339,6341,6343,6345,6347,6349],{"class":662,"line":663},[660,6336,3661],{"class":1321},[660,6338,5730],{"class":1298},[660,6340,3667],{"class":1321},[660,6342,4036],{"class":666},[660,6344,4039],{"class":711},[660,6346,4042],{"class":666},[660,6348,5635],{"class":718},[660,6350,4048],{"class":666},[660,6352,6353],{"class":662,"line":792},[660,6354,1347],{"emptyLinePlaceholder":1346},[660,6356,6357],{"class":662,"line":809},[660,6358,6359],{"class":1515},"\u002F\u002F 1. Propriété par propriété (style inline)\n",[660,6361,6362,6365,6367,6370],{"class":662,"line":820},[660,6363,6364],{"class":666},"titre.style.color ",[660,6366,715],{"class":1321},[660,6368,6369],{"class":718}," \"navy\"",[660,6371,1308],{"class":666},[660,6373,6374,6377,6379,6382,6385],{"class":662,"line":839},[660,6375,6376],{"class":666},"titre.style.fontSize ",[660,6378,715],{"class":1321},[660,6380,6381],{"class":718}," \"32px\"",[660,6383,6384],{"class":666},";       ",[660,6386,6387],{"class":1515},"\u002F\u002F notez le camelCase\n",[660,6389,6390,6393,6395,6398],{"class":662,"line":854},[660,6391,6392],{"class":666},"titre.style.backgroundColor ",[660,6394,715],{"class":1321},[660,6396,6397],{"class":718}," \"yellow\"",[660,6399,1308],{"class":666},[660,6401,6402],{"class":662,"line":864},[660,6403,1347],{"emptyLinePlaceholder":1346},[660,6405,6406],{"class":662,"line":874},[660,6407,6408],{"class":1515},"\u002F\u002F 2. Ajouter \u002F retirer une classe CSS (préféré)\n",[660,6410,6411,6414,6417,6419,6422],{"class":662,"line":889},[660,6412,6413],{"class":666},"titre.classList.",[660,6415,6416],{"class":711},"add",[660,6418,4042],{"class":666},[660,6420,6421],{"class":718},"\"souligne\"",[660,6423,4048],{"class":666},[660,6425,6426,6428,6431,6433,6436],{"class":662,"line":903},[660,6427,6413],{"class":666},[660,6429,6430],{"class":711},"remove",[660,6432,4042],{"class":666},[660,6434,6435],{"class":718},"\"ancien\"",[660,6437,4048],{"class":666},[660,6439,6440,6442,6445,6447,6450,6453],{"class":662,"line":913},[660,6441,6413],{"class":666},[660,6443,6444],{"class":711},"toggle",[660,6446,4042],{"class":666},[660,6448,6449],{"class":718},"\"actif\"",[660,6451,6452],{"class":666},");     ",[660,6454,6455],{"class":1515},"\u002F\u002F bascule on\u002Foff\n",[5952,6457,6458],{},[598,6459,4131,6460,6463,6464,6467],{},[602,6461,6462],{},"classList"," est presque toujours préférable à la modification\ndirecte de ",[631,6465,6466],{},".style"," : elle laisse le CSS gérer la présentation et le JS\ngérer le comportement (« telle classe est active »). Plus propre, plus\nmaintenable.",[651,6469,6471],{"className":1282,"code":6470,"language":1284,"meta":656,"style":656},"\u002F* dans le CSS *\u002F\n.souligne { text-decoration: underline; }\n.actif    { background-color: yellow; }\n",[631,6472,6473,6478,6495],{"__ignoreMap":656},[660,6474,6475],{"class":662,"line":663},[660,6476,6477],{"class":1515},"\u002F* dans le CSS *\u002F\n",[660,6479,6480,6483,6485,6488,6490,6493],{"class":662,"line":792},[660,6481,6482],{"class":711},".souligne",[660,6484,1566],{"class":666},[660,6486,6487],{"class":1298},"text-decoration",[660,6489,1302],{"class":666},[660,6491,6492],{"class":1298},"underline",[660,6494,1577],{"class":666},[660,6496,6497,6500,6503,6506,6508,6511],{"class":662,"line":809},[660,6498,6499],{"class":711},".actif",[660,6501,6502],{"class":666},"    { ",[660,6504,6505],{"class":1298},"background-color",[660,6507,1302],{"class":666},[660,6509,6510],{"class":1298},"yellow",[660,6512,1577],{"class":666},[1083,6514,6516,6521],{"correct":1375,"slug":6515},"dom-interaction-c2",[1088,6517,6518],{"v-slot:question":656},[598,6519,6520],{},"Quelle méthode bascule une classe CSS on\u002Foff ?",[1088,6522,6523],{"v-slot:choices":656},[908,6524,6525,6528,6531,6534],{},[919,6526,6527],{},"classList.swap",[919,6529,6530],{},"classList.flip",[919,6532,6533],{},"classList.toggle",[919,6535,6536],{},"classList.invert",[593,6538,6540],{"id":6539},"créer-et-insérer-un-élément","Créer et insérer un élément",[598,6542,6543],{},"Pour ajouter un nouvel élément à la page :",[651,6545,6547],{"className":3633,"code":6546,"language":3635,"meta":656,"style":656},"\u002F\u002F 1. Créer\nconst nouveau = document.createElement(\"p\");\n\n\u002F\u002F 2. Le remplir\nnouveau.textContent = \"Paragraphe ajouté par JS.\";\nnouveau.classList.add(\"ajout\");\n\n\u002F\u002F 3. L'insérer dans un parent existant\nconst conteneur = document.getElementById(\"conteneur\");\nconteneur.appendChild(nouveau);\n",[631,6548,6549,6554,6574,6578,6583,6595,6609,6613,6618,6638],{"__ignoreMap":656},[660,6550,6551],{"class":662,"line":663},[660,6552,6553],{"class":1515},"\u002F\u002F 1. Créer\n",[660,6555,6556,6558,6561,6563,6565,6568,6570,6572],{"class":662,"line":792},[660,6557,3661],{"class":1321},[660,6559,6560],{"class":1298}," nouveau",[660,6562,3667],{"class":1321},[660,6564,4036],{"class":666},[660,6566,6567],{"class":711},"createElement",[660,6569,4042],{"class":666},[660,6571,5799],{"class":718},[660,6573,4048],{"class":666},[660,6575,6576],{"class":662,"line":809},[660,6577,1347],{"emptyLinePlaceholder":1346},[660,6579,6580],{"class":662,"line":820},[660,6581,6582],{"class":1515},"\u002F\u002F 2. Le remplir\n",[660,6584,6585,6588,6590,6593],{"class":662,"line":839},[660,6586,6587],{"class":666},"nouveau.textContent ",[660,6589,715],{"class":1321},[660,6591,6592],{"class":718}," \"Paragraphe ajouté par JS.\"",[660,6594,1308],{"class":666},[660,6596,6597,6600,6602,6604,6607],{"class":662,"line":854},[660,6598,6599],{"class":666},"nouveau.classList.",[660,6601,6416],{"class":711},[660,6603,4042],{"class":666},[660,6605,6606],{"class":718},"\"ajout\"",[660,6608,4048],{"class":666},[660,6610,6611],{"class":662,"line":864},[660,6612,1347],{"emptyLinePlaceholder":1346},[660,6614,6615],{"class":662,"line":874},[660,6616,6617],{"class":1515},"\u002F\u002F 3. L'insérer dans un parent existant\n",[660,6619,6620,6622,6625,6627,6629,6631,6633,6636],{"class":662,"line":889},[660,6621,3661],{"class":1321},[660,6623,6624],{"class":1298}," conteneur",[660,6626,3667],{"class":1321},[660,6628,4036],{"class":666},[660,6630,4039],{"class":711},[660,6632,4042],{"class":666},[660,6634,6635],{"class":718},"\"conteneur\"",[660,6637,4048],{"class":666},[660,6639,6640,6643,6645],{"class":662,"line":903},[660,6641,6642],{"class":666},"conteneur.",[660,6644,5591],{"class":711},[660,6646,6647],{"class":666},"(nouveau);\n",[598,6649,6650],{},"Pour supprimer un élément :",[651,6652,6654],{"className":3633,"code":6653,"language":3635,"meta":656,"style":656},"nouveau.remove();\n",[631,6655,6656],{"__ignoreMap":656},[660,6657,6658,6661,6663],{"class":662,"line":663},[660,6659,6660],{"class":666},"nouveau.",[660,6662,6430],{"class":711},[660,6664,6665],{"class":666},"();\n",[598,6667,6668,6669,6672,6673,6676],{},"(Avant 2019 il fallait ",[631,6670,6671],{},"parent.removeChild(enfant)"," ; aujourd'hui ",[631,6674,6675],{},".remove()","\nsur l'élément lui-même suffit.)",[593,6678,6680],{"id":6679},"un-exemple-complet-compteur-cliquable","Un exemple complet — compteur cliquable",[598,6682,6683],{},"Mettons bout à bout ce que vous avez vu : sélection, écouteur, modification.",[651,6685,6687],{"className":653,"code":6686,"language":655,"meta":656,"style":656},"\u003Cbutton id=\"bouton\">J'ai été cliqué 0 fois\u003C\u002Fbutton>\n",[631,6688,6689],{"__ignoreMap":656},[660,6690,6691,6693,6695,6697,6699,6702,6705,6707],{"class":662,"line":663},[660,6692,667],{"class":666},[660,6694,1666],{"class":670},[660,6696,1669],{"class":711},[660,6698,715],{"class":666},[660,6700,6701],{"class":718},"\"bouton\"",[660,6703,6704],{"class":666},">J'ai été cliqué 0 fois\u003C\u002F",[660,6706,1666],{"class":670},[660,6708,678],{"class":666},[651,6710,6712],{"className":3633,"code":6711,"language":3635,"meta":656,"style":656},"const bouton = document.getElementById(\"bouton\");\nlet compteur = 0;\n\nbouton.addEventListener(\"click\", function() {\n  compteur += 1;\n  bouton.textContent = `J'ai été cliqué ${compteur} fois`;\n});\n",[631,6713,6714,6732,6744,6748,6764,6774,6791],{"__ignoreMap":656},[660,6715,6716,6718,6720,6722,6724,6726,6728,6730],{"class":662,"line":663},[660,6717,3661],{"class":1321},[660,6719,4031],{"class":1298},[660,6721,3667],{"class":1321},[660,6723,4036],{"class":666},[660,6725,4039],{"class":711},[660,6727,4042],{"class":666},[660,6729,6701],{"class":718},[660,6731,4048],{"class":666},[660,6733,6734,6736,6738,6740,6742],{"class":662,"line":792},[660,6735,3642],{"class":1321},[660,6737,5106],{"class":666},[660,6739,715],{"class":1321},[660,6741,5111],{"class":1298},[660,6743,1308],{"class":666},[660,6745,6746],{"class":662,"line":809},[660,6747,1347],{"emptyLinePlaceholder":1346},[660,6749,6750,6752,6754,6756,6758,6760,6762],{"class":662,"line":820},[660,6751,4062],{"class":666},[660,6753,4065],{"class":711},[660,6755,4042],{"class":666},[660,6757,4070],{"class":718},[660,6759,757],{"class":666},[660,6761,4075],{"class":1321},[660,6763,4078],{"class":666},[660,6765,6766,6768,6770,6772],{"class":662,"line":839},[660,6767,5127],{"class":666},[660,6769,5130],{"class":1321},[660,6771,5133],{"class":1298},[660,6773,1308],{"class":666},[660,6775,6776,6779,6781,6784,6786,6789],{"class":662,"line":854},[660,6777,6778],{"class":666},"  bouton.textContent ",[660,6780,715],{"class":1321},[660,6782,6783],{"class":718}," `J'ai été cliqué ${",[660,6785,5149],{"class":666},[660,6787,6788],{"class":718},"} fois`",[660,6790,1308],{"class":666},[660,6792,6793],{"class":662,"line":864},[660,6794,4095],{"class":666},[598,6796,6797,6798,6801,6802,767],{},"Au clic, le compteur s'incrémente et le ",[602,6799,6800],{},"texte du bouton"," est réécrit par\nJS dans le DOM. Aucune requête réseau, aucun rechargement. ",[602,6803,6804],{},"C'est le cœur\nde l'interactivité Web moderne",[593,6806,6808],{"id":6807},"un-exemple-plus-riche-formulaire-dynamique","Un exemple plus riche — formulaire dynamique",[651,6810,6812],{"className":653,"code":6811,"language":655,"meta":656,"style":656},"\u003Cform id=\"form\">\n  \u003Cinput type=\"text\" id=\"nom\" placeholder=\"Votre prénom\" required>\n  \u003Cbutton type=\"submit\">Saluer\u003C\u002Fbutton>\n\u003C\u002Fform>\n\u003Cp id=\"message\">\u003C\u002Fp>\n",[631,6813,6814,6829,6860,6879,6887],{"__ignoreMap":656},[660,6815,6816,6818,6820,6822,6824,6827],{"class":662,"line":663},[660,6817,667],{"class":666},[660,6819,2044],{"class":670},[660,6821,1669],{"class":711},[660,6823,715],{"class":666},[660,6825,6826],{"class":718},"\"form\"",[660,6828,678],{"class":666},[660,6830,6831,6833,6835,6837,6839,6841,6843,6845,6848,6851,6853,6856,6858],{"class":662,"line":792},[660,6832,812],{"class":666},[660,6834,2091],{"class":670},[660,6836,2094],{"class":711},[660,6838,715],{"class":666},[660,6840,2385],{"class":718},[660,6842,1669],{"class":711},[660,6844,715],{"class":666},[660,6846,6847],{"class":718},"\"nom\"",[660,6849,6850],{"class":711}," placeholder",[660,6852,715],{"class":666},[660,6854,6855],{"class":718},"\"Votre prénom\"",[660,6857,2114],{"class":711},[660,6859,678],{"class":666},[660,6861,6862,6864,6866,6868,6870,6872,6875,6877],{"class":662,"line":809},[660,6863,812],{"class":666},[660,6865,1666],{"class":670},[660,6867,2094],{"class":711},[660,6869,715],{"class":666},[660,6871,2200],{"class":718},[660,6873,6874],{"class":666},">Saluer\u003C\u002F",[660,6876,1666],{"class":670},[660,6878,678],{"class":666},[660,6880,6881,6883,6885],{"class":662,"line":820},[660,6882,965],{"class":666},[660,6884,2044],{"class":670},[660,6886,678],{"class":666},[660,6888,6889,6891,6893,6895,6897,6900,6902,6904],{"class":662,"line":839},[660,6890,667],{"class":666},[660,6892,598],{"class":670},[660,6894,1669],{"class":711},[660,6896,715],{"class":666},[660,6898,6899],{"class":718},"\"message\"",[660,6901,2673],{"class":666},[660,6903,598],{"class":670},[660,6905,678],{"class":666},[651,6907,6909],{"className":3633,"code":6908,"language":3635,"meta":656,"style":656},"const form = document.getElementById(\"form\");\nconst message = document.getElementById(\"message\");\n\nform.addEventListener(\"submit\", function(event) {\n  event.preventDefault();              \u002F\u002F bloquer la soumission classique\n  const nom = document.getElementById(\"nom\").value;\n  message.textContent = `Bonjour, ${nom} !`;\n  message.style.color = \"navy\";\n});\n",[631,6910,6911,6930,6949,6953,6974,6987,7008,7026,7037],{"__ignoreMap":656},[660,6912,6913,6915,6918,6920,6922,6924,6926,6928],{"class":662,"line":663},[660,6914,3661],{"class":1321},[660,6916,6917],{"class":1298}," form",[660,6919,3667],{"class":1321},[660,6921,4036],{"class":666},[660,6923,4039],{"class":711},[660,6925,4042],{"class":666},[660,6927,6826],{"class":718},[660,6929,4048],{"class":666},[660,6931,6932,6934,6937,6939,6941,6943,6945,6947],{"class":662,"line":792},[660,6933,3661],{"class":1321},[660,6935,6936],{"class":1298}," message",[660,6938,3667],{"class":1321},[660,6940,4036],{"class":666},[660,6942,4039],{"class":711},[660,6944,4042],{"class":666},[660,6946,6899],{"class":718},[660,6948,4048],{"class":666},[660,6950,6951],{"class":662,"line":809},[660,6952,1347],{"emptyLinePlaceholder":1346},[660,6954,6955,6958,6960,6962,6964,6966,6968,6970,6972],{"class":662,"line":820},[660,6956,6957],{"class":666},"form.",[660,6959,4065],{"class":711},[660,6961,4042],{"class":666},[660,6963,2200],{"class":718},[660,6965,757],{"class":666},[660,6967,4075],{"class":1321},[660,6969,4042],{"class":666},[660,6971,4366],{"class":4417},[660,6973,4420],{"class":666},[660,6975,6976,6979,6981,6984],{"class":662,"line":839},[660,6977,6978],{"class":666},"  event.",[660,6980,4760],{"class":711},[660,6982,6983],{"class":666},"();              ",[660,6985,6986],{"class":1515},"\u002F\u002F bloquer la soumission classique\n",[660,6988,6989,6992,6995,6997,6999,7001,7003,7005],{"class":662,"line":854},[660,6990,6991],{"class":1321},"  const",[660,6993,6994],{"class":1298}," nom",[660,6996,3667],{"class":1321},[660,6998,4036],{"class":666},[660,7000,4039],{"class":711},[660,7002,4042],{"class":666},[660,7004,6847],{"class":718},[660,7006,7007],{"class":666},").value;\n",[660,7009,7010,7013,7015,7018,7021,7024],{"class":662,"line":864},[660,7011,7012],{"class":666},"  message.textContent ",[660,7014,715],{"class":1321},[660,7016,7017],{"class":718}," `Bonjour, ${",[660,7019,7020],{"class":666},"nom",[660,7022,7023],{"class":718},"} !`",[660,7025,1308],{"class":666},[660,7027,7028,7031,7033,7035],{"class":662,"line":874},[660,7029,7030],{"class":666},"  message.style.color ",[660,7032,715],{"class":1321},[660,7034,6369],{"class":718},[660,7036,1308],{"class":666},[660,7038,7039],{"class":662,"line":889},[660,7040,4095],{"class":666},[598,7042,681,7043,7047],{},[602,7044,7045],{},[631,7046,4779],{}," empêche le navigateur de soumettre le\nformulaire (et donc de recharger la page), ce qui permet de gérer la saisie\nentièrement en JavaScript.",[1083,7049,7051,7056],{"correct":1375,"slug":7050},"dom-interaction-c3",[1088,7052,7053],{"v-slot:question":656},[598,7054,7055],{},"Quelle propriété d'un input texte permet de lire la valeur saisie en JavaScript ?",[1088,7057,7058],{"v-slot:choices":656},[908,7059,7060,7062,7065,7067],{},[919,7061,2925],{},[919,7063,7064],{},"content",[919,7066,2319],{},[919,7068,2091],{},[593,7070,1818],{"id":1817},[908,7072,7073,7097,7111,7119],{},[919,7074,7075,1841,7080,7083,7084,7086,7087,7089,7090,7092,7093,7096],{},[602,7076,7077,7079],{},[631,7078,3696],{}," non géré",[631,7081,7082],{},"document.getElementById(\"xyz\")"," peut renvoyer ",[631,7085,3696],{},"\nsi l'id n'existe pas. Tenter d'accéder à ",[631,7088,6104],{}," sur ",[631,7091,3696],{}," provoque\nune erreur. Toujours vérifier ou utiliser ",[631,7094,7095],{},"?."," (optional chaining).",[919,7098,7099,7102,7103,7105,7106,7108,7109,767],{},[602,7100,7101],{},"Le script s'exécute trop tôt"," : si le script s'exécute avant que le HTML\nsoit chargé, les éléments n'existent pas encore dans le DOM. Utiliser\n",[631,7104,4268],{}," sur le ",[631,7107,5471],{}," ou écouter ",[631,7110,5496],{},[919,7112,7113,7118],{},[602,7114,7115,7117],{},[631,7116,5765],{}," est vivant"," : la collection se met à jour\ntoute seule quand le DOM change — surprise garantie dans une boucle qui\najoute des éléments.",[919,7120,7121,7127,7128,1841,7131,757,7134,7137],{},[602,7122,7123,7126],{},[631,7124,7125],{},"style.background-color"," ne marche pas"," : en JavaScript, les propriétés\nCSS sont en ",[631,7129,7130],{},"camelCase",[631,7132,7133],{},"style.backgroundColor",[631,7135,7136],{},"style.fontSize","…",[593,7139,1903],{"id":1902},[598,7141,7142,7143,7146,7147,7150],{},"Le pattern ",[602,7144,7145],{},"événement + modification du DOM"," est le moteur de toute page\ninteractive. Les frameworks modernes (Vue, React, Svelte) automatisent ces\nopérations, mais reposent tous, en dessous, sur les mêmes API du DOM. Le cours\nsuivant ouvre l'horizon : comment cette page parle-t-elle au ",[602,7148,7149],{},"serveur"," via\nHTTP ?",[1556,7152,7153],{},"html pre.shiki code .sxrX7, html code.shiki .sxrX7{--shiki-light:#24292E;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sovSZ, html code.shiki .sovSZ{--shiki-light:#22863A;--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .snPdu, html code.shiki .snPdu{--shiki-light:#6F42C1;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sIIMD, html code.shiki .sIIMD{--shiki-light:#032F62;--shiki-default:#032F62;--shiki-dark:#9ECBFF}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 .sCsY4, html code.shiki .sCsY4{--shiki-light:#6A737D;--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s8jYJ, html code.shiki .s8jYJ{--shiki-light:#D73A49;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sBjJW, html code.shiki .sBjJW{--shiki-light:#005CC5;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sP4rz, html code.shiki .sP4rz{--shiki-light:#E36209;--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":656,"searchDepth":792,"depth":792,"links":7155},[7156,7157,7158,7159,7160,7161,7162,7163,7164,7165,7166],{"id":595,"depth":792,"text":596},{"id":5601,"depth":792,"text":5602},{"id":5707,"depth":792,"text":5708},{"id":6001,"depth":792,"text":6002},{"id":6142,"depth":792,"text":6143},{"id":6323,"depth":792,"text":6324},{"id":6539,"depth":792,"text":6540},{"id":6679,"depth":792,"text":6680},{"id":6807,"depth":792,"text":6808},{"id":1817,"depth":792,"text":1818},{"id":1902,"depth":792,"text":1903},"Sélectionner, modifier et créer des éléments d'une page Web depuis JavaScript pour la rendre dynamique sans rechargement.",{},[7170,7172,7174],{"slug":5979,"kind":1961,"question":5984,"choices":7171,"correct":1085,"multi":1963,"explanation":656},[3699,3696,5995,5998],{"slug":6515,"kind":1961,"question":6520,"choices":7173,"correct":1375,"multi":1963,"explanation":656},[6527,6530,6533,6536],{"slug":7050,"kind":1961,"question":7055,"choices":7175,"correct":1375,"multi":1963,"explanation":656},[2925,7064,2319,2091],{"title":347,"description":7167},"OoUupxdNQexQN1om0IvR95ywWDepinphtSEDIDPBAvs",{"id":7179,"title":351,"bo":7180,"body":7182,"description":8535,"eval":1956,"extension":1957,"labo":1956,"meta":8536,"navigation":1346,"path":352,"quizzes":8537,"readingTime":663,"seo":8544,"stem":353,"tp":1956,"__hash__":8545},"cours\u002F1.nsi-1ere\u002Fpe-ihm-web\u002F5.client-serveur-http.md",[7181],"PE03",{"type":590,"value":7183,"toc":8519},[7184,7186,7202,7206,7210,7216,7242,7248,7258,7267,7271,7373,7389,7413,7417,7427,7460,7467,7471,7477,7536,7572,7576,7579,7656,7693,7697,7781,7801,7811,7831,7835,7838,7946,7949,7999,8003,8014,8020,8023,8046,8067,8074,8078,8085,8227,8249,8256,8265,8376,8379,8448,8458,8460,8499,8501,8516],[593,7185,596],{"id":595},[598,7187,7188,7189,7192,7193,7195,7196,757,7198,7201],{},"Vous savez désormais structurer une page (HTML, CSS), réagir aux gestes de\nl'utilisateur (événements), et la transformer en direct (DOM). Reste la pièce\nmanquante : comment cette page ",[602,7190,7191],{},"dialogue-t-elle avec le reste du monde",", et\nnotamment avec le ",[602,7194,7149],{}," qui l'héberge ? La réponse tient en quatre\nlettres : ",[602,7197,3087],{},[3988,7199,7200],{},"HyperText Transfer Protocol",". Ce cours formalise la\ndistinction client \u002F serveur et décrit le cycle requête → réponse qui\nfonde tout le Web.",[598,7203,2003,7204,767],{},[2005,7205],{"code":7181},[593,7207,7209],{"id":7208},"la-frontière-client-serveur","La frontière client \u002F serveur",[598,7211,7212,7213,697],{},"Quand vous visitez ",[631,7214,7215],{},"nsi.rocks",[908,7217,7218,7233],{},[919,7219,7220,7221,7224,7225,7228,7229,7232],{},"Votre ",[602,7222,7223],{},"navigateur"," (Firefox, Chrome…) est le ",[602,7226,7227],{},"client",". Il tourne sur\n",[602,7230,7231],{},"votre machine",". Il exécute le HTML, le CSS et le JavaScript reçus.",[919,7234,1981,7235,7237,7238,7241],{},[602,7236,7149],{}," est une machine ",[602,7239,7240],{},"distante"," qui détient les fichiers du\nsite et les envoie sur demande. Il exécute son propre code (Python, PHP,\nNode, Go… peu importe).",[651,7243,7246],{"className":7244,"code":7245,"language":2925},[2923],"[Votre ordinateur]                  [Quelque part dans le monde]\n+-----------------+                 +-------------------+\n|   Navigateur    |  ←── HTTP ──→  |  Serveur Web      |\n|  (HTML\u002FCSS\u002FJS)  |                 |  (code + données) |\n+-----------------+                 +-------------------+\n       Client                              Serveur\n",[631,7247,7245],{"__ignoreMap":656},[598,7249,7250,7251,7254,7255,767],{},"Cette frontière est fondamentale. Tout ce que vous voyez à l'écran s'exécute\n",[602,7252,7253],{},"chez vous",". Tout ce qui touche aux données partagées (utilisateurs,\narticles, commandes…) s'exécute ",[602,7256,7257],{},"côté serveur",[611,7259,7260],{},[598,7261,7262,7263,7266],{},"Un même langage peut tourner des deux côtés. JavaScript existe côté client\n(dans le navigateur) ",[602,7264,7265],{},"et"," côté serveur (via Node.js). Mais le rôle\nfonctionnel — afficher pour le client, gérer les données pour le serveur —\nreste distinct.",[593,7268,7270],{"id":7269},"qui-fait-quoi","Qui fait quoi ?",[974,7272,7273,7286],{},[977,7274,7275],{},[980,7276,7277,7280,7283],{},[983,7278,7279],{},"Tâche",[983,7281,7282],{},"Où ?",[983,7284,7285],{},"Pourquoi",[990,7287,7288,7299,7309,7319,7333,7343,7353,7363],{},[980,7289,7290,7293,7296],{},[995,7291,7292],{},"Afficher la page",[995,7294,7295],{},"Client",[995,7297,7298],{},"Le rendu visuel se fait chez l'utilisateur.",[980,7300,7301,7304,7306],{},[995,7302,7303],{},"Valider visuellement un formulaire",[995,7305,7295],{},[995,7307,7308],{},"Réactivité immédiate, pas d'attente réseau.",[980,7310,7311,7314,7316],{},[995,7312,7313],{},"Réagir au clic, au clavier",[995,7315,7295],{},[995,7317,7318],{},"Les événements ont lieu chez l'utilisateur.",[980,7320,7321,7327,7330],{},[995,7322,7323,7326],{},[602,7324,7325],{},"Re-valider"," les données reçues",[995,7328,7329],{},"Serveur",[995,7331,7332],{},"Le client peut être hostile, le serveur fait foi.",[980,7334,7335,7338,7340],{},[995,7336,7337],{},"Stocker les utilisateurs, les articles",[995,7339,7329],{},[995,7341,7342],{},"Les données sont partagées entre tous les visiteurs.",[980,7344,7345,7348,7350],{},[995,7346,7347],{},"Vérifier un mot de passe",[995,7349,7329],{},[995,7351,7352],{},"Le client ne doit pas voir les mots de passe stockés.",[980,7354,7355,7358,7360],{},[995,7356,7357],{},"Calculer un prix avec une promotion réelle",[995,7359,7329],{},[995,7361,7362],{},"Sinon n'importe qui modifie le prix dans son navigateur.",[980,7364,7365,7368,7370],{},[995,7366,7367],{},"Envoyer un e-mail",[995,7369,7329],{},[995,7371,7372],{},"Le client n'a pas accès au système d'envoi.",[1798,7374,7375],{},[598,7376,7377,7380,7381,7384,7385,7388],{},[602,7378,7379],{},"Règle d'or"," : tout ce qui vient du client est ",[602,7382,7383],{},"potentiellement\nmalveillant",". Le serveur doit ",[602,7386,7387],{},"toujours"," revalider, re-vérifier les droits\net ne jamais faire confiance aveuglément à un paramètre reçu — même s'il\nprovient d'un formulaire validé en HTML5.",[1083,7390,7392,7397],{"correct":1085,"slug":7391},"client-serveur-http-c1",[1088,7393,7394],{"v-slot:question":656},[598,7395,7396],{},"Où vérifier un mot de passe lors d'une connexion ?",[1088,7398,7399],{"v-slot:choices":656},[908,7400,7401,7404,7407,7410],{},[919,7402,7403],{},"Côté client",[919,7405,7406],{},"Côté serveur",[919,7408,7409],{},"Les deux à part égale",[919,7411,7412],{},"Aucun des deux",[593,7414,7416],{"id":7415},"mémorisé-côté-client-retransmis-au-serveur","Mémorisé côté client, retransmis au serveur",[598,7418,7419,7420,7423,7424,697],{},"Certaines informations sont ",[602,7421,7422],{},"conservées localement"," par le navigateur et\n",[602,7425,7426],{},"rejouées à chaque requête",[908,7428,7429,7442,7454],{},[919,7430,7431,7434,7435,7438,7439,767],{},[602,7432,7433],{},"Cookies"," : petits couples ",[631,7436,7437],{},"nom=valeur"," stockés par le navigateur,\nréenvoyés automatiquement à chaque requête vers le site qui les a posés.\nSert typiquement à garder la ",[602,7440,7441],{},"session de connexion",[919,7443,7444,7449,7450,7453],{},[602,7445,7446],{},[631,7447,7448],{},"localStorage"," : zone de stockage clé-valeur côté client, ",[602,7451,7452],{},"non\nretransmise"," automatiquement. Pour des préférences locales (thème\nclair\u002Fsombre, brouillon de message).",[919,7455,7456,7459],{},[602,7457,7458],{},"Cache HTTP"," : les images, scripts et feuilles de style téléchargés une\nfois peuvent être réutilisés sans nouvelle requête.",[598,7461,7462,7463,7466],{},"Le serveur, lui, ne mémorise rien sur le client en dehors de ce qu'il décide\nde stocker dans ses propres bases. Il ",[602,7464,7465],{},"dépend"," des cookies (ou d'un token\nenvoyé manuellement) pour reconnaître un visiteur d'une requête à l'autre.",[593,7468,7470],{"id":7469},"anatomie-dune-requête-http","Anatomie d'une requête HTTP",[598,7472,4122,7473,7476],{},[602,7474,7475],{},"requête HTTP"," est un message texte envoyé du client vers le serveur.\nElle comporte trois parties :",[651,7478,7480],{"className":3073,"code":7479,"language":3075,"meta":656,"style":656},"POST \u002Finscription HTTP\u002F1.1                 ← ligne de requête\nHost: exemple.fr                           ┐\nUser-Agent: Mozilla\u002F5.0 …                  │  en-têtes\nContent-Type: application\u002Fx-www-form-urlencoded │\nCookie: session=abc123                     ┘\n\nemail=alice%40exemple.fr&motdepasse=secret ← corps (optionnel)\n",[631,7481,7482,7489,7498,7508,7517,7527,7531],{"__ignoreMap":656},[660,7483,7484,7486],{"class":662,"line":663},[660,7485,1999],{"class":1321},[660,7487,7488],{"class":666}," \u002Finscription HTTP\u002F1.1                 ← ligne de requête\n",[660,7490,7491,7493,7495],{"class":662,"line":792},[660,7492,3098],{"class":670},[660,7494,3101],{"class":1321},[660,7496,7497],{"class":718}," exemple.fr                           ┐\n",[660,7499,7500,7503,7505],{"class":662,"line":809},[660,7501,7502],{"class":670},"User-Agent",[660,7504,3101],{"class":1321},[660,7506,7507],{"class":718}," Mozilla\u002F5.0 …                  │  en-têtes\n",[660,7509,7510,7512,7514],{"class":662,"line":820},[660,7511,3109],{"class":670},[660,7513,3101],{"class":1321},[660,7515,7516],{"class":718}," application\u002Fx-www-form-urlencoded │\n",[660,7518,7519,7522,7524],{"class":662,"line":839},[660,7520,7521],{"class":670},"Cookie",[660,7523,3101],{"class":1321},[660,7525,7526],{"class":718}," session=abc123                     ┘\n",[660,7528,7529],{"class":662,"line":854},[660,7530,1347],{"emptyLinePlaceholder":1346},[660,7532,7533],{"class":662,"line":864},[660,7534,7535],{"class":666},"email=alice%40exemple.fr&motdepasse=secret ← corps (optionnel)\n",[4100,7537,7538,7556,7562],{},[919,7539,7540,7543,7544,757,7546,7548,7549,7552,7553,3991],{},[602,7541,7542],{},"Ligne de requête"," : méthode (",[631,7545,1994],{},[631,7547,1999],{},"…), chemin de la ressource\n(",[631,7550,7551],{},"\u002Finscription","), version du protocole (",[631,7554,7555],{},"HTTP\u002F1.1",[919,7557,7558,7561],{},[602,7559,7560],{},"En-têtes"," : informations annexes (hôte, type de contenu, cookies,\nidentité du client…).",[919,7563,7564,7567,7568,1917,7570,3991],{},[602,7565,7566],{},"Corps"," : données envoyées au serveur (présent surtout pour ",[631,7569,1999],{},[631,7571,3287],{},[593,7573,7575],{"id":7574},"anatomie-dune-réponse-http","Anatomie d'une réponse HTTP",[598,7577,7578],{},"Le serveur répond avec un message de même structure :",[651,7580,7582],{"className":3073,"code":7581,"language":3075,"meta":656,"style":656},"HTTP\u002F1.1 200 OK                            ← ligne de statut\nContent-Type: text\u002Fhtml; charset=utf-8     ┐  en-têtes\nSet-Cookie: session=abc123; HttpOnly       │\nContent-Length: 1024                       ┘\n\n\u003C!DOCTYPE html>                            ← corps (le HTML, le JSON…)\n\u003Chtml>…\u003C\u002Fhtml>\n",[631,7583,7584,7599,7608,7618,7628,7632,7643],{"__ignoreMap":656},[660,7585,7586,7588,7590,7593,7596],{"class":662,"line":663},[660,7587,3087],{"class":1321},[660,7589,3090],{"class":666},[660,7591,7592],{"class":1298},"1.1",[660,7594,7595],{"class":1298}," 200",[660,7597,7598],{"class":718}," OK                            ← ligne de statut\n",[660,7600,7601,7603,7605],{"class":662,"line":792},[660,7602,3109],{"class":670},[660,7604,3101],{"class":1321},[660,7606,7607],{"class":718}," text\u002Fhtml; charset=utf-8     ┐  en-têtes\n",[660,7609,7610,7613,7615],{"class":662,"line":809},[660,7611,7612],{"class":670},"Set-Cookie",[660,7614,3101],{"class":1321},[660,7616,7617],{"class":718}," session=abc123; HttpOnly       │\n",[660,7619,7620,7623,7625],{"class":662,"line":820},[660,7621,7622],{"class":670},"Content-Length",[660,7624,3101],{"class":1321},[660,7626,7627],{"class":718}," 1024                       ┘\n",[660,7629,7630],{"class":662,"line":839},[660,7631,1347],{"emptyLinePlaceholder":1346},[660,7633,7634,7636,7638,7640],{"class":662,"line":854},[660,7635,781],{"class":666},[660,7637,784],{"class":1321},[660,7639,787],{"class":1298},[660,7641,7642],{"class":666},">                            ← corps (le HTML, le JSON…)\n",[660,7644,7645,7647,7649,7652,7654],{"class":662,"line":864},[660,7646,667],{"class":666},[660,7648,655],{"class":670},[660,7650,7651],{"class":666},">…\u003C\u002F",[660,7653,655],{"class":670},[660,7655,678],{"class":666},[4100,7657,7658,7683,7688],{},[919,7659,7660,7663,7664,1910,7667,757,7670,1917,7673,7676,7677,757,7680,4119],{},[602,7661,7662],{},"Ligne de statut"," : version HTTP + ",[602,7665,7666],{},"code de statut",[631,7668,7669],{},"200",[631,7671,7672],{},"404",[631,7674,7675],{},"500","…) + message court (",[631,7678,7679],{},"OK",[631,7681,7682],{},"Not Found",[919,7684,7685,7687],{},[602,7686,7560],{}," : type du contenu retourné, cookies à poser, taille…",[919,7689,7690,7692],{},[602,7691,7566],{}," : le HTML, le JSON, l'image, etc.",[593,7694,7696],{"id":7695},"les-méthodes-http-courantes","Les méthodes HTTP courantes",[974,7698,7699,7708],{},[977,7700,7701],{},[980,7702,7703,7705],{},[983,7704,3177],{},[983,7706,7707],{},"Sémantique",[990,7709,7710,7724,7738,7752,7767],{},[980,7711,7712,7718],{},[995,7713,7714],{},[602,7715,7716],{},[631,7717,1994],{},[995,7719,7720,7723],{},[602,7721,7722],{},"Lire"," une ressource. Paramètres dans l'URL. Pas d'effet de bord.",[980,7725,7726,7732],{},[995,7727,7728],{},[602,7729,7730],{},[631,7731,1999],{},[995,7733,7734,7737],{},[602,7735,7736],{},"Créer"," ou soumettre. Paramètres dans le corps. Effet de bord.",[980,7739,7740,7746],{},[995,7741,7742],{},[602,7743,7744],{},[631,7745,3287],{},[995,7747,7748,7751],{},[602,7749,7750],{},"Remplacer"," une ressource complète. Idempotent.",[980,7753,7754,7761],{},[995,7755,7756],{},[602,7757,7758],{},[631,7759,7760],{},"PATCH",[995,7762,7763,7766],{},[602,7764,7765],{},"Modifier"," partiellement une ressource.",[980,7768,7769,7775],{},[995,7770,7771],{},[602,7772,7773],{},[631,7774,3237],{},[995,7776,7777,7780],{},[602,7778,7779],{},"Supprimer"," une ressource.",[598,7782,7783,7784,7787,7788,757,7790,757,7792,7794,7795,7797,7798,7800],{},"Une méthode est dite ",[602,7785,7786],{},"idempotente"," quand l'effet d'une requête est le même\nqu'on la rejoue 1 fois ou 100 fois. ",[631,7789,1994],{},[631,7791,3287],{},[631,7793,3237],{}," sont idempotentes ;\n",[631,7796,1999],{}," ne l'est pas (deux ",[631,7799,1999],{}," créent typiquement deux ressources).",[598,7802,7803,7804,7810],{},"En classe de Première, retenir surtout ",[602,7805,7806,1845,7808],{},[631,7807,1994],{},[631,7809,1999],{},", déjà vus avec\nles formulaires. Les autres sont là pour information.",[1083,7812,7814,7819],{"correct":1375,"slug":7813},"client-serveur-http-c2",[1088,7815,7816],{"v-slot:question":656},[598,7817,7818],{},"Combien de fois peut-on rejouer une requête GET sans changer l'état du serveur (cas idéal) ?",[1088,7820,7821],{"v-slot:choices":656},[908,7822,7823,7825,7827,7829],{},[919,7824,1085],{},[919,7826,1375],{},[919,7828,5029],{},[919,7830,3270],{},[593,7832,7834],{"id":7833},"les-codes-de-statut","Les codes de statut",[598,7836,7837],{},"Trois chiffres qui résument le sort de la requête. La famille (1er chiffre)\ndonne déjà l'indication :",[974,7839,7840,7853],{},[977,7841,7842],{},[980,7843,7844,7847,7850],{},[983,7845,7846],{},"Famille",[983,7848,7849],{},"Sens",[983,7851,7852],{},"Exemples",[990,7854,7855,7876,7897,7924],{},[980,7856,7857,7862,7865],{},[995,7858,7859],{},[602,7860,7861],{},"2xx",[995,7863,7864],{},"Succès",[995,7866,7867,757,7870,757,7873],{},[631,7868,7869],{},"200 OK",[631,7871,7872],{},"201 Created",[631,7874,7875],{},"204 No Content",[980,7877,7878,7883,7886],{},[995,7879,7880],{},[602,7881,7882],{},"3xx",[995,7884,7885],{},"Redirection",[995,7887,7888,757,7891,757,7894],{},[631,7889,7890],{},"301 Moved Permanently",[631,7892,7893],{},"302 Found",[631,7895,7896],{},"304 Not Modified",[980,7898,7899,7904,7910],{},[995,7900,7901],{},[602,7902,7903],{},"4xx",[995,7905,7906,7907],{},"Erreur ",[602,7908,7909],{},"côté client",[995,7911,7912,757,7915,757,7918,757,7921],{},[631,7913,7914],{},"400 Bad Request",[631,7916,7917],{},"401 Unauthorized",[631,7919,7920],{},"403 Forbidden",[631,7922,7923],{},"404 Not Found",[980,7925,7926,7931,7935],{},[995,7927,7928],{},[602,7929,7930],{},"5xx",[995,7932,7906,7933],{},[602,7934,7257],{},[995,7936,7937,757,7940,757,7943],{},[631,7938,7939],{},"500 Internal Server Error",[631,7941,7942],{},"502 Bad Gateway",[631,7944,7945],{},"503 Service Unavailable",[598,7947,7948],{},"À connaître absolument :",[908,7950,7951,7958,7969,7977,7985,7992],{},[919,7952,7953,7957],{},[602,7954,7955],{},[631,7956,7869],{}," : tout va bien.",[919,7959,7960,7968],{},[602,7961,7962,3090,7965],{},[631,7963,7964],{},"301",[631,7966,7967],{},"302"," : la ressource a déménagé.",[919,7970,7971,7976],{},[602,7972,7973],{},[631,7974,7975],{},"401"," : non authentifié (« qui êtes-vous ? »).",[919,7978,7979,7984],{},[602,7980,7981],{},[631,7982,7983],{},"403"," : authentifié mais sans droit (« je sais qui vous êtes, et c'est\nnon »).",[919,7986,7987,7991],{},[602,7988,7989],{},[631,7990,7672],{}," : ressource introuvable.",[919,7993,7994,7998],{},[602,7995,7996],{},[631,7997,7675],{}," : le serveur a planté.",[593,8000,8002],{"id":8001},"http-vs-https-le-chiffrement","HTTP vs HTTPS — le chiffrement",[598,8004,8005,8006,8009,8010,8013],{},"HTTP en clair circule ",[602,8007,8008],{},"lisible"," sur le réseau. N'importe quel intermédiaire\n(routeur, point d'accès Wi-Fi public, FAI) pourrait lire vos requêtes.\n",[602,8011,8012],{},"HTTPS"," chiffre la communication via TLS (Transport Layer Security) :",[651,8015,8018],{"className":8016,"code":8017,"language":2925},[2923],"[Navigateur] ←── TLS chiffré ──→ [Serveur]\n            messages incompréhensibles\n            pour tout intermédiaire\n",[631,8019,8017],{"__ignoreMap":656},[598,8021,8022],{},"Effets concrets :",[908,8024,8025,8031,8037],{},[919,8026,8027,8030],{},[602,8028,8029],{},"Confidentialité"," : le contenu (mots de passe, panier, requête) reste\nprivé entre le client et le serveur.",[919,8032,8033,8036],{},[602,8034,8035],{},"Intégrité"," : un tiers ne peut pas modifier la requête en transit sans\nêtre détecté.",[919,8038,8039,8042,8043,8045],{},[602,8040,8041],{},"Authentification du serveur"," : le certificat TLS prouve que vous parlez\nbien à ",[631,8044,7215],{}," et pas à un imposteur.",[1798,8047,8048],{},[598,8049,8050,8058,8059,8062,8063,8066],{},[602,8051,8052,8053,8055,8056,767],{},"Sans HTTPS, ",[631,8054,1999],{}," n'est pas plus sécurisé que ",[631,8057,1994],{}," Les deux passent en\nclair. C'est ",[602,8060,8061],{},"le chiffrement TLS"," qui rend la communication confidentielle,\npas la méthode HTTP. Tout site sérieux n'utilise plus que HTTPS aujourd'hui\n(",[631,8064,8065],{},"https:\u002F\u002F…"," dans la barre d'adresse, cadenas dans le navigateur).",[598,8068,8069,8070,8073],{},"Quand chiffrer ? ",[602,8071,8072],{},"Toujours",", en pratique. Les navigateurs modernes signalent\nles sites en HTTP simple comme « non sécurisés ». Les API publiques refusent\nsouvent les connexions non chiffrées.",[593,8075,8077],{"id":8076},"le-cycle-complet-exemple-pas-à-pas","Le cycle complet — exemple pas à pas",[598,8079,8080,8081,8084],{},"Vous tapez ",[631,8082,8083],{},"https:\u002F\u002Fnsi.rocks\u002Fcours"," dans le navigateur. Voici le scénario\ntype :",[4100,8086,8087,8096,8102,8153,8159,8207,8217],{},[919,8088,8089,8092,8093,8095],{},[602,8090,8091],{},"Résolution DNS"," — le navigateur traduit ",[631,8094,7215],{}," en adresse IP (vu\nen Seconde).",[919,8097,8098,8101],{},[602,8099,8100],{},"Établissement TLS"," — client et serveur négocient le chiffrement\n(HTTPS).",[919,8103,8104,8107,8108],{},[602,8105,8106],{},"Requête HTTP"," — le navigateur envoie :",[651,8109,8111],{"className":3073,"code":8110,"language":3075,"meta":656,"style":656},"GET \u002Fcours HTTP\u002F1.1\nHost: nsi.rocks\nUser-Agent: Mozilla\u002F5.0 …\nCookie: session=xyz\n",[631,8112,8113,8126,8135,8144],{"__ignoreMap":656},[660,8114,8115,8117,8120,8122,8124],{"class":662,"line":663},[660,8116,1994],{"class":1321},[660,8118,8119],{"class":666}," \u002Fcours ",[660,8121,3087],{"class":1321},[660,8123,3090],{"class":666},[660,8125,3093],{"class":1298},[660,8127,8128,8130,8132],{"class":662,"line":792},[660,8129,3098],{"class":670},[660,8131,3101],{"class":1321},[660,8133,8134],{"class":718}," nsi.rocks\n",[660,8136,8137,8139,8141],{"class":662,"line":809},[660,8138,7502],{"class":670},[660,8140,3101],{"class":1321},[660,8142,8143],{"class":718}," Mozilla\u002F5.0 …\n",[660,8145,8146,8148,8150],{"class":662,"line":820},[660,8147,7521],{"class":670},[660,8149,3101],{"class":1321},[660,8151,8152],{"class":718}," session=xyz\n",[919,8154,8155,8158],{},[602,8156,8157],{},"Traitement serveur"," — le serveur identifie la session via le cookie,\nprépare la page (en BDD, en Markdown, peu importe), construit le HTML.",[919,8160,8161,8164,8165],{},[602,8162,8163],{},"Réponse HTTP"," — il renvoie :",[651,8166,8168],{"className":3073,"code":8167,"language":3075,"meta":656,"style":656},"HTTP\u002F1.1 200 OK\nContent-Type: text\u002Fhtml; charset=utf-8\n\n\u003C!DOCTYPE html>…\n",[631,8169,8170,8183,8192,8196],{"__ignoreMap":656},[660,8171,8172,8174,8176,8178,8180],{"class":662,"line":663},[660,8173,3087],{"class":1321},[660,8175,3090],{"class":666},[660,8177,7592],{"class":1298},[660,8179,7595],{"class":1298},[660,8181,8182],{"class":718}," OK\n",[660,8184,8185,8187,8189],{"class":662,"line":792},[660,8186,3109],{"class":670},[660,8188,3101],{"class":1321},[660,8190,8191],{"class":718}," text\u002Fhtml; charset=utf-8\n",[660,8193,8194],{"class":662,"line":809},[660,8195,1347],{"emptyLinePlaceholder":1346},[660,8197,8198,8200,8202,8204],{"class":662,"line":820},[660,8199,781],{"class":666},[660,8201,784],{"class":1321},[660,8203,787],{"class":1298},[660,8205,8206],{"class":666},">…\n",[919,8208,8209,8212,8213,8216],{},[602,8210,8211],{},"Rendu"," — le navigateur lit le HTML, ",[602,8214,8215],{},"émet d'autres requêtes"," pour\nles CSS, les images, les scripts référencés (chacune avec son propre cycle\nrequête\u002Fréponse), construit le DOM et l'affiche.",[919,8218,8219,8222,8223,8226],{},[602,8220,8221],{},"Interactivité"," — une fois la page rendue, JavaScript peut émettre\nd'autres requêtes HTTP en arrière-plan via ",[631,8224,8225],{},"fetch(…)"," sans recharger la\npage.",[1083,8228,8230,8235],{"correct":1375,"slug":8229},"client-serveur-http-c3",[1088,8231,8232],{"v-slot:question":656},[598,8233,8234],{},"Que signifie un code de statut HTTP qui commence par 4 ?",[1088,8236,8237],{"v-slot:choices":656},[908,8238,8239,8241,8243,8246],{},[919,8240,7864],{},[919,8242,7885],{},[919,8244,8245],{},"Erreur côté client",[919,8247,8248],{},"Erreur côté serveur",[593,8250,8252,8253,8255],{"id":8251},"requêtes-en-javascript-fetch-sensibilisation","Requêtes en JavaScript — ",[631,8254,3550],{}," (sensibilisation)",[598,8257,8258,8259,8262,8263,697],{},"Pour communiquer avec le serveur ",[602,8260,8261],{},"sans recharger la page",", JavaScript\npropose la fonction ",[631,8264,3550],{},[651,8266,8268],{"className":3633,"code":8267,"language":3635,"meta":656,"style":656},"fetch(\"\u002Fapi\u002Farticles\")\n  .then(reponse => reponse.json())\n  .then(donnees => {\n    console.log(\"Articles reçus :\", donnees);\n  })\n  .catch(erreur => {\n    console.error(\"Échec :\", erreur);\n  });\n",[631,8269,8270,8282,8307,8322,8336,8341,8357,8372],{"__ignoreMap":656},[660,8271,8272,8274,8276,8279],{"class":662,"line":663},[660,8273,3550],{"class":711},[660,8275,4042],{"class":666},[660,8277,8278],{"class":718},"\"\u002Fapi\u002Farticles\"",[660,8280,8281],{"class":666},")\n",[660,8283,8284,8287,8290,8292,8295,8298,8301,8304],{"class":662,"line":792},[660,8285,8286],{"class":666},"  .",[660,8288,8289],{"class":711},"then",[660,8291,4042],{"class":666},[660,8293,8294],{"class":4417},"reponse",[660,8296,8297],{"class":1321}," =>",[660,8299,8300],{"class":666}," reponse.",[660,8302,8303],{"class":711},"json",[660,8305,8306],{"class":666},"())\n",[660,8308,8309,8311,8313,8315,8318,8320],{"class":662,"line":809},[660,8310,8286],{"class":666},[660,8312,8289],{"class":711},[660,8314,4042],{"class":666},[660,8316,8317],{"class":4417},"donnees",[660,8319,8297],{"class":1321},[660,8321,1293],{"class":666},[660,8323,8324,8326,8328,8330,8333],{"class":662,"line":820},[660,8325,4705],{"class":666},[660,8327,4200],{"class":711},[660,8329,4042],{"class":666},[660,8331,8332],{"class":718},"\"Articles reçus :\"",[660,8334,8335],{"class":666},", donnees);\n",[660,8337,8338],{"class":662,"line":839},[660,8339,8340],{"class":666},"  })\n",[660,8342,8343,8345,8348,8350,8353,8355],{"class":662,"line":854},[660,8344,8286],{"class":666},[660,8346,8347],{"class":711},"catch",[660,8349,4042],{"class":666},[660,8351,8352],{"class":4417},"erreur",[660,8354,8297],{"class":1321},[660,8356,1293],{"class":666},[660,8358,8359,8361,8364,8366,8369],{"class":662,"line":864},[660,8360,4705],{"class":666},[660,8362,8363],{"class":711},"error",[660,8365,4042],{"class":666},[660,8367,8368],{"class":718},"\"Échec :\"",[660,8370,8371],{"class":666},", erreur);\n",[660,8373,8374],{"class":662,"line":874},[660,8375,4985],{"class":666},[598,8377,8378],{},"Et pour envoyer des données :",[651,8380,8382],{"className":3633,"code":8381,"language":3635,"meta":656,"style":656},"fetch(\"\u002Fapi\u002Finscription\", {\n  method: \"POST\",\n  headers: { \"Content-Type\": \"application\u002Fjson\" },\n  body: JSON.stringify({ email: \"alice@exemple.fr\" })\n});\n",[631,8383,8384,8396,8406,8422,8444],{"__ignoreMap":656},[660,8385,8386,8388,8390,8393],{"class":662,"line":663},[660,8387,3550],{"class":711},[660,8389,4042],{"class":666},[660,8391,8392],{"class":718},"\"\u002Fapi\u002Finscription\"",[660,8394,8395],{"class":666},", {\n",[660,8397,8398,8401,8404],{"class":662,"line":792},[660,8399,8400],{"class":666},"  method: ",[660,8402,8403],{"class":718},"\"POST\"",[660,8405,1917],{"class":666},[660,8407,8408,8411,8414,8416,8419],{"class":662,"line":809},[660,8409,8410],{"class":666},"  headers: { ",[660,8412,8413],{"class":718},"\"Content-Type\"",[660,8415,1302],{"class":666},[660,8417,8418],{"class":718},"\"application\u002Fjson\"",[660,8420,8421],{"class":666}," },\n",[660,8423,8424,8427,8430,8432,8435,8438,8441],{"class":662,"line":820},[660,8425,8426],{"class":666},"  body: ",[660,8428,8429],{"class":1298},"JSON",[660,8431,767],{"class":666},[660,8433,8434],{"class":711},"stringify",[660,8436,8437],{"class":666},"({ email: ",[660,8439,8440],{"class":718},"\"alice@exemple.fr\"",[660,8442,8443],{"class":666}," })\n",[660,8445,8446],{"class":662,"line":839},[660,8447,4095],{"class":666},[598,8449,8450,8451,8453,8454,8457],{},"Vous n'aurez pas à maîtriser ",[631,8452,3550],{}," au programme de Première, mais\ncomprendre qu'",[602,8455,8456],{},"une page peut faire des requêtes HTTP en cours de vie",", sans\nsoumission de formulaire, est essentiel pour saisir le Web moderne.",[593,8459,1818],{"id":1817},[908,8461,8462,8473,8479,8485],{},[919,8463,8464,1841,8470,8472],{},[602,8465,8466,8467,8469],{},"Confondre ",[631,8468,1999],{}," et chiffrement",[631,8471,1999],{}," cache les données de l'URL,\npas du réseau. Seul HTTPS chiffre.",[919,8474,8475,8478],{},[602,8476,8477],{},"Croire que le client est de confiance"," : un utilisateur peut désactiver\nJavaScript, modifier les requêtes envoyées, ignorer les validations HTML.\nLe serveur est seul gardien des règles.",[919,8480,8481,8484],{},[602,8482,8483],{},"Confondre 401 et 403"," : 401 = « pas connecté », 403 = « connecté mais\npas autorisé ».",[919,8486,8487,8490,8491,8494,8495,8498],{},[602,8488,8489],{},"Penser HTTP « sans état »"," : HTTP est ",[3988,8492,8493],{},"stateless"," à la base — chaque\nrequête est indépendante. La continuité (session de connexion, panier)\nest rétablie ",[602,8496,8497],{},"artificiellement"," par les cookies ou les tokens.",[593,8500,1903],{"id":1902},[598,8502,8503,8504,8507,8508,8511,8512,8515],{},"HTTP a évolué : ",[602,8505,8506],{},"HTTP\u002F2"," (2015) puis ",[602,8509,8510],{},"HTTP\u002F3"," (2022) optimisent le\ntransport sans changer la sémantique des méthodes et des codes. Le couple\n",[602,8513,8514],{},"REST"," (architecture qui mappe les méthodes HTTP sur des actions CRUD)\nstructure beaucoup d'API modernes — vous le rencontrerez en NSI Terminale et\nen BTS\u002FCPGE. Le principe reste : un client demande, un serveur répond, sur\nun protocole texte simple.",[1556,8517,8518],{},"html pre.shiki code .s8jYJ, html code.shiki .s8jYJ{--shiki-light:#D73A49;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sxrX7, html code.shiki .sxrX7{--shiki-light:#24292E;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sovSZ, html code.shiki .sovSZ{--shiki-light:#22863A;--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sIIMD, html code.shiki .sIIMD{--shiki-light:#032F62;--shiki-default:#032F62;--shiki-dark:#9ECBFF}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 .sBjJW, html code.shiki .sBjJW{--shiki-light:#005CC5;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .snPdu, html code.shiki .snPdu{--shiki-light:#6F42C1;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sP4rz, html code.shiki .sP4rz{--shiki-light:#E36209;--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":656,"searchDepth":792,"depth":792,"links":8520},[8521,8522,8523,8524,8525,8526,8527,8528,8529,8530,8531,8533,8534],{"id":595,"depth":792,"text":596},{"id":7208,"depth":792,"text":7209},{"id":7269,"depth":792,"text":7270},{"id":7415,"depth":792,"text":7416},{"id":7469,"depth":792,"text":7470},{"id":7574,"depth":792,"text":7575},{"id":7695,"depth":792,"text":7696},{"id":7833,"depth":792,"text":7834},{"id":8001,"depth":792,"text":8002},{"id":8076,"depth":792,"text":8077},{"id":8251,"depth":792,"text":8532},"Requêtes en JavaScript — fetch (sensibilisation)",{"id":1817,"depth":792,"text":1818},{"id":1902,"depth":792,"text":1903},"Comment une page Web dialogue avec un serveur — requêtes HTTP, méthodes, codes de statut, et frontière client\u002Fserveur.",{},[8538,8540,8542],{"slug":7391,"kind":1961,"question":7396,"choices":8539,"correct":1085,"multi":1963,"explanation":656},[7403,7406,7409,7412],{"slug":7813,"kind":1961,"question":7818,"choices":8541,"correct":1375,"multi":1963,"explanation":656},[1085,1375,5029,3270],{"slug":8229,"kind":1961,"question":8234,"choices":8543,"correct":1375,"multi":1963,"explanation":656},[7864,7885,8245,8248],{"title":351,"description":8535},"9SYqWp3jCgPReL2AX_4Y8RB1QN087rYap1VwlWQkGhE",{"id":8547,"title":329,"bo":1956,"body":8548,"description":8652,"eval":1956,"extension":1957,"labo":1956,"meta":8653,"navigation":1346,"path":330,"quizzes":8655,"readingTime":663,"seo":8656,"stem":331,"tp":1956,"__hash__":8657},"cours\u002F1.nsi-1ere\u002Fpe-ihm-web\u002F0.index.md",{"type":590,"value":8549,"toc":8648},[8550,8554,8561,8588,8592,8639],[593,8551,8553],{"id":8552},"au-programme","Au programme",[598,8555,8556,8557,8560],{},"Une page Web n'est pas un simple document figé : c'est une ",[602,8558,8559],{},"interface\nhomme-machine"," capable de réagir au clic, à la frappe, au mouvement de souris,\net de dialoguer avec un serveur situé à l'autre bout du réseau. Ce chapitre\nvous donne les clés de cette interactivité. Vous y verrez comment une page est\nstructurée, comment elle collecte des données, comment elle réagit aux gestes\nde l'utilisateur, comment JavaScript modifie son contenu en direct, et comment\nle navigateur communique avec le serveur via le protocole HTTP.",[598,8562,8563,8564,8567,8568,8571,8572,8574,8575,8577,8578,8580,8581,8583,8584,8587],{},"Vous commencerez par un rappel de ",[602,8565,8566],{},"HTML et CSS"," — la structure et la mise en\nforme d'une page. Vous étudierez ensuite les ",[602,8569,8570],{},"formulaires",", brique\nfondamentale de la transmission de données, en distinguant les méthodes ",[631,8573,1994],{},"\net ",[631,8576,1999],{},". Puis vous découvrirez le modèle ",[602,8579,3598],{}," de JavaScript :\nécouteurs, événements souris et clavier. Vous apprendrez à manipuler le\n",[602,8582,1132],{}," pour modifier dynamiquement la page. Enfin, vous formaliserez\nl'",[602,8585,8586],{},"interaction client-serveur"," : ce qui se passe côté navigateur, ce qui se\npasse côté serveur, et comment HTTP achemine requêtes et réponses.",[593,8589,8591],{"id":8590},"plan-du-chapitre","Plan du chapitre",[4100,8593,8594,8599,8615,8625,8632],{},[919,8595,8596,8598],{},[602,8597,335],{}," — balises, attributs, sélecteurs, socle de toute page Web.",[919,8600,8601,5572,8603,757,8605,8607,8608,1845,8610,8612,8613],{},[602,8602,339],{},[631,8604,1988],{},[631,8606,763],{},", méthodes ",[631,8609,1994],{},[631,8611,1999],{},". ",[2005,8614],{"code":1974},[919,8616,8617,8619,8620,8622,8623],{},[602,8618,343],{}," — clic, touche, écouteurs, modèle réactif. ",[2005,8621],{"code":3579}," ",[2005,8624],{"code":3580},[919,8626,8627,8629,8630],{},[602,8628,347],{}," — sélection, modification de contenu et de style depuis JavaScript. ",[2005,8631],{"code":3580},[919,8633,8634,8636,8637],{},[602,8635,351],{}," — requêtes, méthodes, codes de statut, chiffrement. ",[2005,8638],{"code":7181},[598,8640,8641,8642,8644,8645,8647],{},"À la fin du chapitre, vous saurez lire le code HTML d'un formulaire, expliquer\nce qui distingue ",[631,8643,1994],{}," de ",[631,8646,1999],{},", attacher un écouteur d'événement à un bouton,\nmodifier le DOM en JavaScript, et décrire le cycle complet d'une requête HTTP\nentre un navigateur et un serveur.",{"title":656,"searchDepth":792,"depth":792,"links":8649},[8650,8651],{"id":8552,"depth":792,"text":8553},{"id":8590,"depth":792,"text":8591},"Comment une page Web réagit aux actions de l'utilisateur, dialogue avec un serveur et se transforme dynamiquement.",{"icon":8654},"i-lucide-mouse-pointer-click",[],{"title":329,"description":8652},"cy6TQW5P6xd4hCv8LJpgt-_dMnR6mxDUYKmq456B2vs",[8659,9035,9403,9782,10213,10606],{"id":8660,"title":8661,"bo":8662,"body":8663,"description":9028,"eval":1956,"extension":1957,"labo":1956,"meta":9029,"navigation":1963,"path":9030,"quizzes":9031,"readingTime":663,"seo":9032,"stem":9033,"tp":1956,"__hash__":9034},"coursMemo\u002F1.nsi-1ere\u002Fpe-ihm-web\u002F1.html-css-bases.memo.md","HTML et CSS — l'essentiel",[],{"type":590,"value":8664,"toc":9020},[8665,8669,8677,8681,8745,8749,8831,8835,8907,8911,8934,8938,8967,9017],[593,8666,8668],{"id":8667},"en-une-phrase","En une phrase",[598,8670,8671],{},[602,8672,8673,8674,3991],{},"HTML décrit la structure d'une page (arbre de balises), CSS en décrit la\nprésentation (règles ",[631,8675,8676],{},"sélecteur { propriété: valeur; }",[593,8678,8680],{"id":8679},"à-mémoriser","À mémoriser",[908,8682,8683,8697,8712,8730],{},[919,8684,8685,8686,8689,8690,757,8693,757,8695,767],{},"Une balise : ",[631,8687,8688],{},"\u003Cnom attribut=\"valeur\">contenu\u003C\u002Fnom>",". Balises auto-fermantes\npour ",[631,8691,8692],{},"\u003Cimg>",[631,8694,763],{},[631,8696,760],{},[919,8698,8699,8700,8703,8704,8706,8707,8709,8710,767],{},"Squelette minimal : ",[631,8701,8702],{},"\u003C!DOCTYPE html>"," puis ",[631,8705,633],{}," qui contient ",[631,8708,637],{}," et\n",[631,8711,641],{},[919,8713,8714,8716,8717,8719,8720,8722,8723,8725,8726,8729],{},[631,8715,1632],{}," est ",[602,8718,1636],{}," par page. ",[631,8721,1646],{}," peut être ",[602,8724,1650],{}," et\nmultiple (",[631,8727,8728],{},"class=\"a b c\""," = 3 classes).",[919,8731,8732,8733,8736,8737,8740,8741,8744],{},"CSS lié au HTML via ",[631,8734,8735],{},"\u003Clink rel=\"stylesheet\" href=\"…\">"," (recommandé),\n",[631,8738,8739],{},"\u003Cstyle>…\u003C\u002Fstyle>",", ou attribut ",[631,8742,8743],{},"style=\"…\""," (à éviter).",[593,8746,8748],{"id":8747},"balises-essentielles","Balises essentielles",[974,8750,8751,8759],{},[977,8752,8753],{},[980,8754,8755,8757],{},[983,8756,985],{},[983,8758,988],{},[990,8760,8761,8772,8781,8790,8798,8811,8822],{},[980,8762,8763,8769],{},[995,8764,8765,1000,8767],{},[631,8766,999],{},[631,8768,1003],{},[995,8770,8771],{},"Titres",[980,8773,8774,8778],{},[995,8775,8776],{},[631,8777,684],{},[995,8779,8780],{},"Paragraphe",[980,8782,8783,8787],{},[995,8784,8785],{},[631,8786,1038],{},[995,8788,8789],{},"Lien",[980,8791,8792,8796],{},[995,8793,8794],{},[631,8795,1048],{},[995,8797,1051],{},[980,8799,8800,8808],{},[995,8801,8802,757,8804,757,8806],{},[631,8803,1022],{},[631,8805,1025],{},[631,8807,1028],{},[995,8809,8810],{},"Listes",[980,8812,8813,8819],{},[995,8814,8815,757,8817],{},[631,8816,1058],{},[631,8818,1068],{},[995,8820,8821],{},"Conteneurs génériques (bloc \u002F inline)",[980,8823,8824,8828],{},[995,8825,8826],{},[631,8827,1078],{},[995,8829,8830],{},"Bouton",[593,8832,8834],{"id":8833},"sélecteurs-css","Sélecteurs CSS",[974,8836,8837,8845],{},[977,8838,8839],{},[980,8840,8841,8843],{},[983,8842,1404],{},[983,8844,1407],{},[990,8846,8847,8858,8871,8883,8896],{},[980,8848,8849,8853],{},[995,8850,8851],{},[631,8852,598],{},[995,8854,8855,8856],{},"Toutes les ",[631,8857,684],{},[980,8859,8860,8865],{},[995,8861,8862],{},[631,8863,8864],{},".note",[995,8866,8867,8868],{},"Tout ",[631,8869,8870],{},"class=\"note\"",[980,8872,8873,8877],{},[995,8874,8875],{},[631,8876,1495],{},[995,8878,8879,8880],{},"L'unique ",[631,8881,8882],{},"id=\"menu\"",[980,8884,8885,8889],{},[995,8886,8887],{},[631,8888,1453],{},[995,8890,8891,8893,8894],{},[631,8892,1028],{}," descendant d'",[631,8895,1022],{},[980,8897,8898,8902],{},[995,8899,8900],{},[631,8901,1468],{},[995,8903,8904,8906],{},[631,8905,1078],{}," au survol",[593,8908,8910],{"id":8909},"pièges-courants","Pièges courants",[908,8912,8913,8921,8929],{},[919,8914,3487,8915,1139,8917,8920],{},[631,8916,688],{},[631,8918,8919],{},"\u003C\u002Fdiv>"," : structure ambiguë, bugs CSS\u002FJS.",[919,8922,8923,8924,8926,8927,767],{},"Plusieurs éléments avec le même ",[631,8925,1804],{}," : casse ",[631,8928,4039],{},[919,8930,8931,8933],{},[631,8932,8728],{}," = trois classes séparées par des espaces, pas une seule.",[593,8935,8937],{"id":8936},"syntaxe-htmlcss-de-référence","Syntaxe HTML\u002FCSS de référence",[651,8939,8941],{"className":653,"code":8940,"language":655,"meta":656,"style":656},"\u003Cbutton id=\"envoi\" class=\"bouton primaire\">Envoyer\u003C\u002Fbutton>\n",[631,8942,8943],{"__ignoreMap":656},[660,8944,8945,8947,8949,8951,8953,8955,8957,8959,8961,8963,8965],{"class":662,"line":663},[660,8946,667],{"class":666},[660,8948,1666],{"class":670},[660,8950,1669],{"class":711},[660,8952,715],{"class":666},[660,8954,1674],{"class":718},[660,8956,1677],{"class":711},[660,8958,715],{"class":666},[660,8960,1682],{"class":718},[660,8962,1685],{"class":666},[660,8964,1666],{"class":670},[660,8966,678],{"class":666},[651,8968,8970],{"className":1282,"code":8969,"language":1284,"meta":656,"style":656},".bouton { padding: 8px 16px; }\n#envoi  { background-color: green; color: white; }\n",[631,8971,8972,8993],{"__ignoreMap":656},[660,8973,8974,8976,8978,8981,8983,8985,8987,8989,8991],{"class":662,"line":663},[660,8975,1719],{"class":711},[660,8977,1566],{"class":666},[660,8979,8980],{"class":1298},"padding",[660,8982,1302],{"class":666},[660,8984,1731],{"class":1298},[660,8986,1322],{"class":1321},[660,8988,1736],{"class":1298},[660,8990,1322],{"class":1321},[660,8992,1577],{"class":666},[660,8994,8995,8997,9000,9002,9004,9006,9009,9011,9013,9015],{"class":662,"line":792},[660,8996,1767],{"class":711},[660,8998,8999],{"class":666},"  { ",[660,9001,6505],{"class":1298},[660,9003,1302],{"class":666},[660,9005,1779],{"class":1298},[660,9007,9008],{"class":666},"; ",[660,9010,1569],{"class":1298},[660,9012,1302],{"class":666},[660,9014,1790],{"class":1298},[660,9016,1577],{"class":666},[1556,9018,9019],{},"html pre.shiki code .sxrX7, html code.shiki .sxrX7{--shiki-light:#24292E;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sovSZ, html code.shiki .sovSZ{--shiki-light:#22863A;--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .snPdu, html code.shiki .snPdu{--shiki-light:#6F42C1;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sIIMD, html code.shiki .sIIMD{--shiki-light:#032F62;--shiki-default:#032F62;--shiki-dark:#9ECBFF}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 .sBjJW, html code.shiki .sBjJW{--shiki-light:#005CC5;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s8jYJ, html code.shiki .s8jYJ{--shiki-light:#D73A49;--shiki-default:#D73A49;--shiki-dark:#F97583}",{"title":656,"searchDepth":792,"depth":792,"links":9021},[9022,9023,9024,9025,9026,9027],{"id":8667,"depth":792,"text":8668},{"id":8679,"depth":792,"text":8680},{"id":8747,"depth":792,"text":8748},{"id":8833,"depth":792,"text":8834},{"id":8909,"depth":792,"text":8910},{"id":8936,"depth":792,"text":8937},"Mémo de révision sur les balises HTML et les sélecteurs CSS.",{},"\u002Fnsi-1ere\u002Fpe-ihm-web\u002Fhtml-css-bases.memo",[],{"title":8661,"description":9028},"1.nsi-1ere\u002Fpe-ihm-web\u002F1.html-css-bases.memo","meRE9ZzzBJqV6eLL1l8DpStTjIqiL2Mprv5nWBbvosU",{"id":9036,"title":9037,"bo":9038,"body":9039,"description":9396,"eval":1956,"extension":1957,"labo":1956,"meta":9397,"navigation":1963,"path":9398,"quizzes":9399,"readingTime":663,"seo":9400,"stem":9401,"tp":1956,"__hash__":9402},"coursMemo\u002F1.nsi-1ere\u002Fpe-ihm-web\u002F2.formulaires.memo.md","Formulaires HTML — l'essentiel",[1974],{"type":590,"value":9040,"toc":9388},[9041,9043,9066,9068,9111,9115,9187,9198,9202,9250,9252,9283,9287,9385],[593,9042,8668],{"id":8667},[598,9044,9045],{},[602,9046,1471,9047,9049,9050,9053,9054,9056,9057,9059,9060,9062,9063,9065],{},[631,9048,1988],{}," collecte des valeurs ",[631,9051,9052],{},"name=…"," saisies dans des ",[631,9055,763],{}," et les\ntransmet à ",[631,9058,2240],{}," en ",[631,9061,1994],{}," (URL) ou ",[631,9064,1999],{}," (corps).",[593,9067,8680],{"id":8679},[908,9069,9070,9076,9081,9092,9098],{},[919,9071,9072,9075],{},[631,9073,9074],{},"\u003Cform action=\"URL\" method=\"get|post\">"," — squelette d'un formulaire.",[919,9077,9078,9079,767],{},"Chaque champ envoyé doit avoir un attribut ",[631,9080,2293],{},[919,9082,9083,9085,9086,757,9088,9091],{},[631,9084,1804],{}," sert au CSS et à ",[631,9087,2311],{},[602,9089,9090],{},"pas"," à l'envoi serveur.",[919,9093,9094,9097],{},[631,9095,9096],{},"\u003Cbutton type=\"submit\">"," envoie le formulaire.",[919,9099,9100,9101,757,9103,757,9105,757,9107,757,9109,767],{},"Validation HTML5 : ",[631,9102,2329],{},[631,9104,2332],{},[631,9106,2335],{},[631,9108,2338],{},[631,9110,3463],{},[593,9112,9114],{"id":9113},"get-vs-post","GET vs POST",[974,9116,9117,9128],{},[977,9118,9119],{},[980,9120,9121,9124,9126],{},[983,9122,9123],{},"Critère",[983,9125,1994],{},[983,9127,1999],{},[990,9129,9130,9144,9155,9165,9176],{},[980,9131,9132,9135,9141],{},[995,9133,9134],{},"Paramètres dans l'URL",[995,9136,9137,9138,9140],{},"Oui (après ",[631,9139,2809],{},")",[995,9142,9143],{},"Non (dans le corps)",[980,9145,9146,9149,9152],{},[995,9147,9148],{},"URL partageable \u002F bookmarkable",[995,9150,9151],{},"Oui",[995,9153,9154],{},"Non",[980,9156,9157,9160,9163],{},[995,9158,9159],{},"Limite de taille",[995,9161,9162],{},"Quelques Ko",[995,9164,3141],{},[980,9166,9167,9170,9173],{},[995,9168,9169],{},"Idempotent ?",[995,9171,9172],{},"Oui — rejouable sans risque",[995,9174,9175],{},"Non — peut créer un effet de bord",[980,9177,9178,9181,9184],{},[995,9179,9180],{},"Adapté à",[995,9182,9183],{},"Lecture, recherche, filtrage",[995,9185,9186],{},"Création, modification, données sensibles",[598,9188,9189,9194,9195,9197],{},[602,9190,9191,9193],{},[631,9192,1999],{}," ≠ sécurité."," La confidentialité vient de ",[602,9196,8012],{},", pas de la\nméthode HTTP.",[593,9199,9201],{"id":9200},"à-savoir-reconnaître","À savoir reconnaître",[974,9203,9204,9212],{},[977,9205,9206],{},[980,9207,9208,9210],{},[983,9209,3174],{},[983,9211,3177],{},[990,9213,9214,9223,9232,9241],{},[980,9215,9216,9219],{},[995,9217,9218],{},"Recherche dans un site",[995,9220,9221],{},[631,9222,1994],{},[980,9224,9225,9228],{},[995,9226,9227],{},"Login + mot de passe",[995,9229,9230],{},[631,9231,1999],{},[980,9233,9234,9237],{},[995,9235,9236],{},"Lien à partager",[995,9238,9239],{},[631,9240,1994],{},[980,9242,9243,9246],{},[995,9244,9245],{},"Upload de fichier",[995,9247,9248],{},[631,9249,1999],{},[593,9251,8910],{"id":8909},[908,9253,9254,9260,9268,9277],{},[919,9255,9256,9257,9259],{},"Pas de ",[631,9258,2293],{}," → champ pas envoyé.",[919,9261,9262,9264,9265,9267],{},[631,9263,1078],{}," sans ",[631,9266,2283],{}," → soumet le formulaire par défaut.",[919,9269,9270,9271,9273,9274],{},"Mot de passe en ",[631,9272,1994],{}," → apparaît dans l'URL et dans les logs. ",[602,9275,9276],{},"Jamais.",[919,9278,9279,9280,767],{},"Validation côté navigateur ≠ sécurité : ",[602,9281,9282],{},"revalider côté serveur",[593,9284,9286],{"id":9285},"syntaxe-html-de-référence","Syntaxe HTML de référence",[651,9288,9290],{"className":653,"code":9289,"language":655,"meta":656,"style":656},"\u003Cform action=\"\u002Finscription\" method=\"post\">\n  \u003Clabel for=\"email\">E-mail :\u003C\u002Flabel>\n  \u003Cinput type=\"email\" id=\"email\" name=\"email\" required>\n  \u003Cbutton type=\"submit\">Envoyer\u003C\u002Fbutton>\n\u003C\u002Fform>\n",[631,9291,9292,9312,9331,9359,9377],{"__ignoreMap":656},[660,9293,9294,9296,9298,9300,9302,9304,9306,9308,9310],{"class":662,"line":663},[660,9295,667],{"class":666},[660,9297,2044],{"class":670},[660,9299,2047],{"class":711},[660,9301,715],{"class":666},[660,9303,2052],{"class":718},[660,9305,2055],{"class":711},[660,9307,715],{"class":666},[660,9309,2060],{"class":718},[660,9311,678],{"class":666},[660,9313,9314,9316,9318,9320,9322,9324,9327,9329],{"class":662,"line":792},[660,9315,812],{"class":666},[660,9317,2069],{"class":670},[660,9319,2072],{"class":711},[660,9321,715],{"class":666},[660,9323,2077],{"class":718},[660,9325,9326],{"class":666},">E-mail :\u003C\u002F",[660,9328,2069],{"class":670},[660,9330,678],{"class":666},[660,9332,9333,9335,9337,9339,9341,9343,9345,9347,9349,9351,9353,9355,9357],{"class":662,"line":809},[660,9334,812],{"class":666},[660,9336,2091],{"class":670},[660,9338,2094],{"class":711},[660,9340,715],{"class":666},[660,9342,2077],{"class":718},[660,9344,1669],{"class":711},[660,9346,715],{"class":666},[660,9348,2077],{"class":718},[660,9350,2107],{"class":711},[660,9352,715],{"class":666},[660,9354,2077],{"class":718},[660,9356,2114],{"class":711},[660,9358,678],{"class":666},[660,9360,9361,9363,9365,9367,9369,9371,9373,9375],{"class":662,"line":820},[660,9362,812],{"class":666},[660,9364,1666],{"class":670},[660,9366,2094],{"class":711},[660,9368,715],{"class":666},[660,9370,2200],{"class":718},[660,9372,1685],{"class":666},[660,9374,1666],{"class":670},[660,9376,678],{"class":666},[660,9378,9379,9381,9383],{"class":662,"line":839},[660,9380,965],{"class":666},[660,9382,2044],{"class":670},[660,9384,678],{"class":666},[1556,9386,9387],{},"html pre.shiki code .sxrX7, html code.shiki .sxrX7{--shiki-light:#24292E;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sovSZ, html code.shiki .sovSZ{--shiki-light:#22863A;--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .snPdu, html code.shiki .snPdu{--shiki-light:#6F42C1;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sIIMD, html code.shiki .sIIMD{--shiki-light:#032F62;--shiki-default:#032F62;--shiki-dark:#9ECBFF}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);}",{"title":656,"searchDepth":792,"depth":792,"links":9389},[9390,9391,9392,9393,9394,9395],{"id":8667,"depth":792,"text":8668},{"id":8679,"depth":792,"text":8680},{"id":9113,"depth":792,"text":9114},{"id":9200,"depth":792,"text":9201},{"id":8909,"depth":792,"text":8910},{"id":9285,"depth":792,"text":9286},"Mémo de révision sur `\u003Cform>`, `\u003Cinput>`, et le choix GET \u002F POST.",{},"\u002Fnsi-1ere\u002Fpe-ihm-web\u002Fformulaires.memo",[],{"title":9037,"description":9396},"1.nsi-1ere\u002Fpe-ihm-web\u002F2.formulaires.memo","kTQva6_7JX8F4pkavRazc-BUbtsL7WK-xTPH9Waptt0",{"id":9404,"title":9405,"bo":9406,"body":9407,"description":9775,"eval":1956,"extension":1957,"labo":1956,"meta":9776,"navigation":1963,"path":9777,"quizzes":9778,"readingTime":663,"seo":9779,"stem":9780,"tp":1956,"__hash__":9781},"coursMemo\u002F1.nsi-1ere\u002Fpe-ihm-web\u002F3.evenements-js.memo.md","Événements JavaScript — l'essentiel",[3579,3580],{"type":590,"value":9408,"toc":9762},[9409,9411,9419,9421,9448,9452,9457,9484,9488,9500,9506,9604,9606,9662,9664,9694,9698,9759],[593,9410,8668],{"id":8667},[598,9412,9413],{},[602,9414,9415,9416,9418],{},"Un écouteur d'événement (",[631,9417,4065],{},") attache une fonction à un\nélément HTML pour qu'elle s'exécute lors d'un événement précis (clic, frappe,\nmouvement…).",[593,9420,8680],{"id":8679},[908,9422,9423,9429,9434,9443],{},[919,9424,9425,9426,767],{},"Syntaxe : ",[631,9427,9428],{},"element.addEventListener(\"nomEvenement\", fonction)",[919,9430,4361,9431,9433],{},[631,9432,4366],{}," passé à la fonction porte les détails (touche pressée,\nposition de la souris, élément cible…).",[919,9435,9436,9438,9439,9442],{},[631,9437,5211],{}," exige ",[602,9440,9441],{},"la même fonction nommée"," que celle attachée\n— impossible avec une fonction anonyme.",[919,9444,9445,9447],{},[631,9446,4779],{}," annule l'action par défaut (soumission de\nformulaire, raccourci navigateur…).",[593,9449,9451],{"id":9450},"événements-à-connaître","Événements à connaître",[9453,9454,9456],"h3",{"id":9455},"souris","Souris",[908,9458,9459,9465,9473,9479],{},[919,9460,9461,757,9463],{},[631,9462,4299],{},[631,9464,4309],{},[919,9466,9467,757,9469,757,9471],{},[631,9468,4319],{},[631,9470,4322],{},[631,9472,4332],{},[919,9474,9475,757,9477],{},[631,9476,4342],{},[631,9478,4345],{},[919,9480,9481,9483],{},[631,9482,4355],{}," (clic droit)",[9453,9485,9487],{"id":9486},"clavier","Clavier",[908,9489,9490,9495],{},[919,9491,9492,9494],{},[631,9493,4592],{}," — touche enfoncée",[919,9496,9497,9499],{},[631,9498,4602],{}," — touche relâchée",[593,9501,9503,9504],{"id":9502},"propriétés-utiles-de-event","Propriétés utiles de ",[631,9505,4366],{},[974,9507,9508,9521],{},[977,9509,9510],{},[980,9511,9512,9515,9518],{},[983,9513,9514],{},"Événement",[983,9516,9517],{},"Propriété",[983,9519,9520],{},"Valeur",[990,9522,9523,9536,9547,9562,9575,9592],{},[980,9524,9525,9527,9533],{},[995,9526,9456],{},[995,9528,9529,757,9531],{},[631,9530,4524],{},[631,9532,4527],{},[995,9534,9535],{},"Coordonnées dans la fenêtre",[980,9537,9538,9540,9544],{},[995,9539,9456],{},[995,9541,9542],{},[631,9543,4539],{},[995,9545,9546],{},"0 gauche, 1 milieu, 2 droit",[980,9548,9549,9551,9555],{},[995,9550,9487],{},[995,9552,9553],{},[631,9554,4617],{},[995,9556,9557,9558,757,9560,9140],{},"Touche lisible (",[631,9559,4621],{},[631,9561,4627],{},[980,9563,9564,9566,9570],{},[995,9565,9487],{},[995,9567,9568],{},[631,9569,4635],{},[995,9571,9572,9573,9140],{},"Touche physique (",[631,9574,4639],{},[980,9576,9577,9579,9589],{},[995,9578,9487],{},[995,9580,9581,757,9583,757,9586],{},[631,9582,4649],{},[631,9584,9585],{},".shiftKey",[631,9587,9588],{},".altKey",[995,9590,9591],{},"Booléens modificateurs",[980,9593,9594,9597,9601],{},[995,9595,9596],{},"Tout",[995,9598,9599],{},[631,9600,4533],{},[995,9602,9603],{},"Élément concerné",[593,9605,9201],{"id":9200},[974,9607,9608,9617],{},[977,9609,9610],{},[980,9611,9612,9614],{},[983,9613,3174],{},[983,9615,9616],{},"À utiliser",[990,9618,9619,9629,9643,9652],{},[980,9620,9621,9624],{},[995,9622,9623],{},"Réagir au clic d'un bouton",[995,9625,9626],{},[631,9627,9628],{},"addEventListener(\"click\", …)",[980,9630,9631,9634],{},[995,9632,9633],{},"Détecter la touche Entrée",[995,9635,9636,9639,9640],{},[631,9637,9638],{},"addEventListener(\"keydown\", …)"," + ",[631,9641,9642],{},"event.key === \"Enter\"",[980,9644,9645,9648],{},[995,9646,9647],{},"Bloquer la soumission d'un formulaire",[995,9649,9650],{},[631,9651,4779],{},[980,9653,9654,9657],{},[995,9655,9656],{},"Retirer un écouteur",[995,9658,9659,9661],{},[631,9660,5211],{}," + même fonction nommée",[593,9663,8910],{"id":8909},[908,9665,9666,9682,9685],{},[919,9667,9668,9669,9671,9672,9674,9675,9677,9678,5487,9680,767],{},"Script chargé avant le HTML → ",[631,9670,4039],{}," retourne ",[631,9673,3696],{},". Utiliser\n",[631,9676,4268],{}," ou placer le ",[631,9679,5471],{},[631,9681,641],{},[919,9683,9684],{},"Fonction anonyme → impossible à retirer ensuite.",[919,9686,9687,9264,9689,3504,9691,9693],{},[631,9688,1078],{},[631,9690,3514],{},[631,9692,1988],{}," → soumet le formulaire.",[593,9695,9697],{"id":9696},"syntaxe-js-de-référence","Syntaxe JS de référence",[651,9699,9701],{"className":3633,"code":9700,"language":3635,"meta":656,"style":656},"const btn = document.getElementById(\"monBouton\");\nbtn.addEventListener(\"click\", function(event) {\n  console.log(\"Clic à\", event.clientX, event.clientY);\n});\n",[631,9702,9703,9721,9741,9755],{"__ignoreMap":656},[660,9704,9705,9707,9709,9711,9713,9715,9717,9719],{"class":662,"line":663},[660,9706,3661],{"class":1321},[660,9708,5078],{"class":1298},[660,9710,3667],{"class":1321},[660,9712,4036],{"class":666},[660,9714,4039],{"class":711},[660,9716,4042],{"class":666},[660,9718,4045],{"class":718},[660,9720,4048],{"class":666},[660,9722,9723,9725,9727,9729,9731,9733,9735,9737,9739],{"class":662,"line":792},[660,9724,5162],{"class":666},[660,9726,4065],{"class":711},[660,9728,4042],{"class":666},[660,9730,4070],{"class":718},[660,9732,757],{"class":666},[660,9734,4075],{"class":1321},[660,9736,4042],{"class":666},[660,9738,4366],{"class":4417},[660,9740,4420],{"class":666},[660,9742,9743,9745,9747,9749,9752],{"class":662,"line":809},[660,9744,4197],{"class":666},[660,9746,4200],{"class":711},[660,9748,4042],{"class":666},[660,9750,9751],{"class":718},"\"Clic à\"",[660,9753,9754],{"class":666},", event.clientX, event.clientY);\n",[660,9756,9757],{"class":662,"line":820},[660,9758,4095],{"class":666},[1556,9760,9761],{},"html pre.shiki code .s8jYJ, html code.shiki .s8jYJ{--shiki-light:#D73A49;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sBjJW, html code.shiki .sBjJW{--shiki-light:#005CC5;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sxrX7, html code.shiki .sxrX7{--shiki-light:#24292E;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .snPdu, html code.shiki .snPdu{--shiki-light:#6F42C1;--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sIIMD, html code.shiki .sIIMD{--shiki-light:#032F62;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sP4rz, html code.shiki .sP4rz{--shiki-light:#E36209;--shiki-default:#E36209;--shiki-dark:#FFAB70}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);}",{"title":656,"searchDepth":792,"depth":792,"links":9763},[9764,9765,9766,9770,9772,9773,9774],{"id":8667,"depth":792,"text":8668},{"id":8679,"depth":792,"text":8680},{"id":9450,"depth":792,"text":9451,"children":9767},[9768,9769],{"id":9455,"depth":809,"text":9456},{"id":9486,"depth":809,"text":9487},{"id":9502,"depth":792,"text":9771},"Propriétés utiles de event",{"id":9200,"depth":792,"text":9201},{"id":8909,"depth":792,"text":8910},{"id":9696,"depth":792,"text":9697},"Mémo de révision sur les écouteurs d'événements souris et clavier en JavaScript.",{},"\u002Fnsi-1ere\u002Fpe-ihm-web\u002Fevenements-js.memo",[],{"title":9405,"description":9775},"1.nsi-1ere\u002Fpe-ihm-web\u002F3.evenements-js.memo","WPp-EGw3a028dYR95CPJIE0CPKM-qBYyYvJ5w-p5PPU",{"id":9783,"title":9784,"bo":9785,"body":9786,"description":10206,"eval":1956,"extension":1957,"labo":1956,"meta":10207,"navigation":1963,"path":10208,"quizzes":10209,"readingTime":663,"seo":10210,"stem":10211,"tp":1956,"__hash__":10212},"coursMemo\u002F1.nsi-1ere\u002Fpe-ihm-web\u002F4.dom-interaction.memo.md","Manipulation du DOM — l'essentiel",[3580],{"type":590,"value":9787,"toc":10196},[9788,9790,9799,9801,9840,9844,9906,9909,9992,9996,10051,10055,10079,10081,10122,10124,10193],[593,9789,8668],{"id":8667},[598,9791,9792],{},[602,9793,9794,9795,9798],{},"Le DOM est l'arbre d'objets que JavaScript manipule pour modifier la page :\non sélectionne un élément (",[631,9796,9797],{},"document.querySelector",") puis on modifie son\ncontenu, ses attributs ou son style.",[593,9800,8680],{"id":8679},[908,9802,9803,9808,9815,9824,9830],{},[919,9804,9805,9806,767],{},"Point d'entrée : ",[631,9807,5296],{},[919,9809,9810,9811,9814],{},"HTML ≠ DOM. Le DOM est l'arbre ",[602,9812,9813],{},"vivant"," en mémoire.",[919,9816,9817,9818,9820,9821,9823],{},"Sélection privilégiée : ",[631,9819,5824],{}," (1er) \u002F ",[631,9822,5854],{}," (tous).",[919,9825,9826,9827,767],{},"Modifier le texte : ",[631,9828,9829],{},"element.textContent = \"…\"",[919,9831,9832,9833,9836,9837,767],{},"Modifier le style : ",[631,9834,9835],{},"element.classList.add\u002Fremove\u002Ftoggle(\"…\")"," plutôt que\n",[631,9838,9839],{},".style.…",[593,9841,9843],{"id":9842},"sélection-méthodes-principales","Sélection — méthodes principales",[974,9845,9846,9854],{},[977,9847,9848],{},[980,9849,9850,9852],{},[983,9851,3177],{},[983,9853,5872],{},[990,9855,9856,9867,9876,9884,9896],{},[980,9857,9858,9862],{},[995,9859,9860],{},[631,9861,5884],{},[995,9863,9864,9865],{},"L'élément, ou ",[631,9866,3696],{},[980,9868,9869,9873],{},[995,9870,9871],{},[631,9872,5904],{},[995,9874,9875],{},"Collection vivante",[980,9877,9878,9882],{},[995,9879,9880],{},[631,9881,5917],{},[995,9883,9875],{},[980,9885,9886,9891],{},[995,9887,9888],{},[631,9889,9890],{},"querySelector(\".c\")",[995,9892,9893,9894],{},"Premier élément, ou ",[631,9895,3696],{},[980,9897,9898,9903],{},[995,9899,9900],{},[631,9901,9902],{},"querySelectorAll(\"p\")",[995,9904,9905],{},"Liste statique",[593,9907,7765],{"id":9908},"modifier",[651,9910,9912],{"className":3633,"code":9911,"language":3635,"meta":656,"style":656},"el.textContent = \"Bonjour\";          \u002F\u002F texte brut, sûr\nel.innerHTML   = \"\u003Cem>HTML\u003C\u002Fem>\";    \u002F\u002F HTML, attention XSS\nel.setAttribute(\"src\", \"x.jpg\");\nel.style.color = \"red\";              \u002F\u002F camelCase\nel.classList.add(\"actif\");\n",[631,9913,9914,9930,9945,9963,9979],{"__ignoreMap":656},[660,9915,9916,9919,9921,9924,9927],{"class":662,"line":663},[660,9917,9918],{"class":666},"el.textContent ",[660,9920,715],{"class":1321},[660,9922,9923],{"class":718}," \"Bonjour\"",[660,9925,9926],{"class":666},";          ",[660,9928,9929],{"class":1515},"\u002F\u002F texte brut, sûr\n",[660,9931,9932,9935,9937,9940,9942],{"class":662,"line":792},[660,9933,9934],{"class":666},"el.innerHTML   ",[660,9936,715],{"class":1321},[660,9938,9939],{"class":718}," \"\u003Cem>HTML\u003C\u002Fem>\"",[660,9941,3673],{"class":666},[660,9943,9944],{"class":1515},"\u002F\u002F HTML, attention XSS\n",[660,9946,9947,9950,9952,9954,9956,9958,9961],{"class":662,"line":809},[660,9948,9949],{"class":666},"el.",[660,9951,5594],{"class":711},[660,9953,4042],{"class":666},[660,9955,6196],{"class":718},[660,9957,757],{"class":666},[660,9959,9960],{"class":718},"\"x.jpg\"",[660,9962,4048],{"class":666},[660,9964,9965,9968,9970,9973,9976],{"class":662,"line":820},[660,9966,9967],{"class":666},"el.style.color ",[660,9969,715],{"class":1321},[660,9971,9972],{"class":718}," \"red\"",[660,9974,9975],{"class":666},";              ",[660,9977,9978],{"class":1515},"\u002F\u002F camelCase\n",[660,9980,9981,9984,9986,9988,9990],{"class":662,"line":839},[660,9982,9983],{"class":666},"el.classList.",[660,9985,6416],{"class":711},[660,9987,4042],{"class":666},[660,9989,6449],{"class":718},[660,9991,4048],{"class":666},[593,9993,9995],{"id":9994},"créer-et-insérer","Créer et insérer",[651,9997,9999],{"className":3633,"code":9998,"language":3635,"meta":656,"style":656},"const p = document.createElement(\"p\");\np.textContent = \"Hello\";\nparent.appendChild(p);\np.remove();\n",[631,10000,10001,10020,10032,10042],{"__ignoreMap":656},[660,10002,10003,10005,10008,10010,10012,10014,10016,10018],{"class":662,"line":663},[660,10004,3661],{"class":1321},[660,10006,10007],{"class":1298}," p",[660,10009,3667],{"class":1321},[660,10011,4036],{"class":666},[660,10013,6567],{"class":711},[660,10015,4042],{"class":666},[660,10017,5799],{"class":718},[660,10019,4048],{"class":666},[660,10021,10022,10025,10027,10030],{"class":662,"line":792},[660,10023,10024],{"class":666},"p.textContent ",[660,10026,715],{"class":1321},[660,10028,10029],{"class":718}," \"Hello\"",[660,10031,1308],{"class":666},[660,10033,10034,10037,10039],{"class":662,"line":809},[660,10035,10036],{"class":666},"parent.",[660,10038,5591],{"class":711},[660,10040,10041],{"class":666},"(p);\n",[660,10043,10044,10047,10049],{"class":662,"line":820},[660,10045,10046],{"class":666},"p.",[660,10048,6430],{"class":711},[660,10050,6665],{"class":666},[593,10052,10054],{"id":10053},"lire-la-valeur-dun-champ","Lire la valeur d'un champ",[651,10056,10058],{"className":3633,"code":10057,"language":3635,"meta":656,"style":656},"const valeur = document.getElementById(\"nom\").value;\n",[631,10059,10060],{"__ignoreMap":656},[660,10061,10062,10064,10067,10069,10071,10073,10075,10077],{"class":662,"line":663},[660,10063,3661],{"class":1321},[660,10065,10066],{"class":1298}," valeur",[660,10068,3667],{"class":1321},[660,10070,4036],{"class":666},[660,10072,4039],{"class":711},[660,10074,4042],{"class":666},[660,10076,6847],{"class":718},[660,10078,7007],{"class":666},[593,10080,8910],{"id":8909},[908,10082,10083,10092,10103,10114],{},[919,10084,10085,7083,10087,10091],{},[631,10086,4039],{},[602,10088,10089],{},[631,10090,3696],{}," — vérifier.",[919,10093,10094,10097,10098,10100,10101,767],{},[631,10095,10096],{},"innerHTML"," + saisie utilisateur = faille ",[602,10099,6132],{},". Préférer ",[631,10102,5583],{},[919,10104,10105,10106,1910,10108,10111,10112,3991],{},"Propriétés CSS en JS : ",[602,10107,7130],{},[631,10109,10110],{},"backgroundColor",", pas\n",[631,10113,6505],{},[919,10115,10116,10117,10119,10120,767],{},"Script qui s'exécute avant le HTML : utiliser ",[631,10118,4268],{}," ou\n",[631,10121,5496],{},[593,10123,9697],{"id":9696},[651,10125,10127],{"className":3633,"code":10126,"language":3635,"meta":656,"style":656},"const btn = document.querySelector(\"#bouton\");\nbtn.addEventListener(\"click\", function() {\n  btn.textContent = \"Cliqué !\";\n  btn.classList.add(\"actif\");\n});\n",[631,10128,10129,10148,10164,10176,10189],{"__ignoreMap":656},[660,10130,10131,10133,10135,10137,10139,10141,10143,10146],{"class":662,"line":663},[660,10132,3661],{"class":1321},[660,10134,5078],{"class":1298},[660,10136,3667],{"class":1321},[660,10138,4036],{"class":666},[660,10140,5824],{"class":711},[660,10142,4042],{"class":666},[660,10144,10145],{"class":718},"\"#bouton\"",[660,10147,4048],{"class":666},[660,10149,10150,10152,10154,10156,10158,10160,10162],{"class":662,"line":792},[660,10151,5162],{"class":666},[660,10153,4065],{"class":711},[660,10155,4042],{"class":666},[660,10157,4070],{"class":718},[660,10159,757],{"class":666},[660,10161,4075],{"class":1321},[660,10163,4078],{"class":666},[660,10165,10166,10169,10171,10174],{"class":662,"line":809},[660,10167,10168],{"class":666},"  btn.textContent ",[660,10170,715],{"class":1321},[660,10172,10173],{"class":718}," \"Cliqué !\"",[660,10175,1308],{"class":666},[660,10177,10178,10181,10183,10185,10187],{"class":662,"line":820},[660,10179,10180],{"class":666},"  btn.classList.",[660,10182,6416],{"class":711},[660,10184,4042],{"class":666},[660,10186,6449],{"class":718},[660,10188,4048],{"class":666},[660,10190,10191],{"class":662,"line":839},[660,10192,4095],{"class":666},[1556,10194,10195],{},"html pre.shiki code .sxrX7, html code.shiki .sxrX7{--shiki-light:#24292E;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s8jYJ, html code.shiki .s8jYJ{--shiki-light:#D73A49;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sIIMD, html code.shiki .sIIMD{--shiki-light:#032F62;--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sCsY4, html code.shiki .sCsY4{--shiki-light:#6A737D;--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .snPdu, html code.shiki .snPdu{--shiki-light:#6F42C1;--shiki-default:#6F42C1;--shiki-dark:#B392F0}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 .sBjJW, html code.shiki .sBjJW{--shiki-light:#005CC5;--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":656,"searchDepth":792,"depth":792,"links":10197},[10198,10199,10200,10201,10202,10203,10204,10205],{"id":8667,"depth":792,"text":8668},{"id":8679,"depth":792,"text":8680},{"id":9842,"depth":792,"text":9843},{"id":9908,"depth":792,"text":7765},{"id":9994,"depth":792,"text":9995},{"id":10053,"depth":792,"text":10054},{"id":8909,"depth":792,"text":8910},{"id":9696,"depth":792,"text":9697},"Mémo de révision sur la sélection et la modification d'éléments via le DOM.",{},"\u002Fnsi-1ere\u002Fpe-ihm-web\u002Fdom-interaction.memo",[],{"title":9784,"description":10206},"1.nsi-1ere\u002Fpe-ihm-web\u002F4.dom-interaction.memo","6v33C6_IXdSrdAsLEA1yW6JIsarffiVCmWH0H2a5xNA",{"id":10214,"title":10215,"bo":10216,"body":10217,"description":10599,"eval":1956,"extension":1957,"labo":1956,"meta":10600,"navigation":1963,"path":10601,"quizzes":10602,"readingTime":663,"seo":10603,"stem":10604,"tp":1956,"__hash__":10605},"coursMemo\u002F1.nsi-1ere\u002Fpe-ihm-web\u002F5.client-serveur-http.memo.md","Client, serveur et HTTP — l'essentiel",[7181],{"type":590,"value":10218,"toc":10590},[10219,10221,10226,10228,10267,10269,10320,10325,10329,10397,10401,10473,10476,10493,10495,10512,10516,10549,10587],[593,10220,8668],{"id":8667},[598,10222,10223],{},[602,10224,10225],{},"Le client (navigateur, chez l'utilisateur) envoie des requêtes HTTP au\nserveur (machine distante) ; le serveur répond avec un code de statut et un\ncorps. HTTPS chiffre le tout.",[593,10227,8680],{"id":8679},[908,10229,10230,10235,10240,10250,10260],{},[919,10231,10232,10234],{},[602,10233,7295],{}," = navigateur, chez l'utilisateur. Exécute HTML \u002F CSS \u002F JS.",[919,10236,10237,10239],{},[602,10238,7329],{}," = machine distante. Détient les données partagées, applique\nles règles de sécurité.",[919,10241,10242,10243,757,10246,10249],{},"HTTP est un protocole ",[602,10244,10245],{},"texte",[602,10247,10248],{},"sans état"," (chaque requête est\nindépendante).",[919,10251,10252,10253,1139,10256,10259],{},"Continuité de session = ",[602,10254,10255],{},"cookies",[602,10257,10258],{},"tokens"," retransmis à chaque\nrequête.",[919,10261,10262,10263,10266],{},"HTTPS = HTTP ",[602,10264,10265],{},"chiffré via TLS"," → confidentialité + intégrité +\nauthentification du serveur.",[593,10268,7270],{"id":7269},[974,10270,10271,10279],{},[977,10272,10273],{},[980,10274,10275,10277],{},[983,10276,7403],{},[983,10278,7406],{},[990,10280,10281,10289,10297,10310],{},[980,10282,10283,10286],{},[995,10284,10285],{},"Affichage HTML\u002FCSS",[995,10287,10288],{},"Stockage des données",[980,10290,10291,10294],{},[995,10292,10293],{},"Réactions aux événements",[995,10295,10296],{},"Vérification des droits",[980,10298,10299,10305],{},[995,10300,10301,10302],{},"Validation ",[602,10303,10304],{},"de confort",[995,10306,10301,10307],{},[602,10308,10309],{},"de sécurité",[980,10311,10312,10317],{},[995,10313,10314,10315,9140],{},"Stockage local (cookies, ",[631,10316,7448],{},[995,10318,10319],{},"Base de données",[598,10321,10322,10324],{},[602,10323,7379],{}," : ne jamais faire confiance aux données qui viennent du client.",[593,10326,10328],{"id":10327},"méthodes-http","Méthodes HTTP",[974,10330,10331,10342],{},[977,10332,10333],{},[980,10334,10335,10337,10339],{},[983,10336,3177],{},[983,10338,988],{},[983,10340,10341],{},"Idempotente ?",[990,10343,10344,10354,10365,10375,10387],{},[980,10345,10346,10350,10352],{},[995,10347,10348],{},[631,10349,1994],{},[995,10351,7722],{},[995,10353,9151],{},[980,10355,10356,10360,10363],{},[995,10357,10358],{},[631,10359,1999],{},[995,10361,10362],{},"Créer \u002F soumettre",[995,10364,9154],{},[980,10366,10367,10371,10373],{},[995,10368,10369],{},[631,10370,3287],{},[995,10372,7750],{},[995,10374,9151],{},[980,10376,10377,10381,10384],{},[995,10378,10379],{},[631,10380,7760],{},[995,10382,10383],{},"Modifier partiellement",[995,10385,10386],{},"(cas par cas)",[980,10388,10389,10393,10395],{},[995,10390,10391],{},[631,10392,3237],{},[995,10394,7779],{},[995,10396,9151],{},[593,10398,10400],{"id":10399},"codes-de-statut","Codes de statut",[974,10402,10403,10413],{},[977,10404,10405],{},[980,10406,10407,10409,10411],{},[983,10408,7846],{},[983,10410,7849],{},[983,10412,7852],{},[990,10414,10415,10427,10439,10458],{},[980,10416,10417,10419,10421],{},[995,10418,7861],{},[995,10420,7864],{},[995,10422,10423,757,10425],{},[631,10424,7869],{},[631,10426,7872],{},[980,10428,10429,10431,10433],{},[995,10430,7882],{},[995,10432,7885],{},[995,10434,10435,757,10437],{},[631,10436,7964],{},[631,10438,7967],{},[980,10440,10441,10443,10447],{},[995,10442,7903],{},[995,10444,7906,10445],{},[602,10446,7227],{},[995,10448,10449,757,10452,757,10454,757,10456],{},[631,10450,10451],{},"400",[631,10453,7975],{},[631,10455,7983],{},[631,10457,7672],{},[980,10459,10460,10462,10466],{},[995,10461,7930],{},[995,10463,7906,10464],{},[602,10465,7149],{},[995,10467,10468,757,10470],{},[631,10469,7675],{},[631,10471,10472],{},"503",[598,10474,10475],{},"À distinguer :",[908,10477,10478,10483,10488],{},[919,10479,10480,10482],{},[602,10481,7975],{}," = pas authentifié (« qui êtes-vous ? »).",[919,10484,10485,10487],{},[602,10486,7983],{}," = authentifié mais sans droits.",[919,10489,10490,10492],{},[602,10491,7672],{}," = ressource inexistante.",[593,10494,8910],{"id":8909},[908,10496,10497,10503,10506,10509],{},[919,10498,10499,10500,10502],{},"POST n'est ",[602,10501,9090],{}," chiffré ; HTTPS l'est.",[919,10504,10505],{},"Sans HTTPS, mots de passe et cookies circulent en clair.",[919,10507,10508],{},"Code 4xx → la faute vient du client (URL, droits…).",[919,10510,10511],{},"Code 5xx → le serveur a planté.",[593,10513,10515],{"id":10514},"squelette-déchange","Squelette d'échange",[651,10517,10519],{"className":3073,"code":10518,"language":3075,"meta":656,"style":656},"GET \u002Fcours HTTP\u002F1.1\nHost: nsi.rocks\nCookie: session=xyz\n",[631,10520,10521,10533,10541],{"__ignoreMap":656},[660,10522,10523,10525,10527,10529,10531],{"class":662,"line":663},[660,10524,1994],{"class":1321},[660,10526,8119],{"class":666},[660,10528,3087],{"class":1321},[660,10530,3090],{"class":666},[660,10532,3093],{"class":1298},[660,10534,10535,10537,10539],{"class":662,"line":792},[660,10536,3098],{"class":670},[660,10538,3101],{"class":1321},[660,10540,8134],{"class":718},[660,10542,10543,10545,10547],{"class":662,"line":809},[660,10544,7521],{"class":670},[660,10546,3101],{"class":1321},[660,10548,8152],{"class":718},[651,10550,10551],{"className":3073,"code":8167,"language":3075,"meta":656,"style":656},[631,10552,10553,10565,10573,10577],{"__ignoreMap":656},[660,10554,10555,10557,10559,10561,10563],{"class":662,"line":663},[660,10556,3087],{"class":1321},[660,10558,3090],{"class":666},[660,10560,7592],{"class":1298},[660,10562,7595],{"class":1298},[660,10564,8182],{"class":718},[660,10566,10567,10569,10571],{"class":662,"line":792},[660,10568,3109],{"class":670},[660,10570,3101],{"class":1321},[660,10572,8191],{"class":718},[660,10574,10575],{"class":662,"line":809},[660,10576,1347],{"emptyLinePlaceholder":1346},[660,10578,10579,10581,10583,10585],{"class":662,"line":820},[660,10580,781],{"class":666},[660,10582,784],{"class":1321},[660,10584,787],{"class":1298},[660,10586,8206],{"class":666},[1556,10588,10589],{},"html pre.shiki code .s8jYJ, html code.shiki .s8jYJ{--shiki-light:#D73A49;--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sxrX7, html code.shiki .sxrX7{--shiki-light:#24292E;--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sBjJW, html code.shiki .sBjJW{--shiki-light:#005CC5;--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sovSZ, html code.shiki .sovSZ{--shiki-light:#22863A;--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sIIMD, html code.shiki .sIIMD{--shiki-light:#032F62;--shiki-default:#032F62;--shiki-dark:#9ECBFF}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);}",{"title":656,"searchDepth":792,"depth":792,"links":10591},[10592,10593,10594,10595,10596,10597,10598],{"id":8667,"depth":792,"text":8668},{"id":8679,"depth":792,"text":8680},{"id":7269,"depth":792,"text":7270},{"id":10327,"depth":792,"text":10328},{"id":10399,"depth":792,"text":10400},{"id":8909,"depth":792,"text":8910},{"id":10514,"depth":792,"text":10515},"Mémo de révision sur la frontière client\u002Fserveur et le protocole HTTP.",{},"\u002Fnsi-1ere\u002Fpe-ihm-web\u002Fclient-serveur-http.memo",[],{"title":10215,"description":10599},"1.nsi-1ere\u002Fpe-ihm-web\u002F5.client-serveur-http.memo","QD62QePe7FoQzydhBqHq_aPigrG0qEhE54wew_qiVqg",{"id":10607,"title":10608,"bo":10609,"body":10610,"description":11034,"eval":1956,"extension":1957,"labo":1956,"meta":11035,"navigation":1963,"path":11037,"quizzes":11038,"readingTime":663,"seo":11065,"stem":11066,"tp":1956,"__hash__":11067},"coursMemo\u002F1.nsi-1ere\u002Fpe-ihm-web\u002Fchapitre.memo.md","IHM sur le Web — synthèse de chapitre",[1974,3580,7181,3579],{"type":590,"value":10611,"toc":11029},[10612,10616,10631,10687,10719,10729,10733,10827,10830,10834,10864,10896,10928,10962,10971,10979,10990],[593,10613,10615],{"id":10614},"vue-densemble","Vue d'ensemble",[598,10617,10618,10619,10622,10623,10626,10627,10630],{},"Ce chapitre vous a fait traverser ",[602,10620,10621],{},"toute la chaîne d'interaction"," entre un\nutilisateur et une application Web. Vous êtes parti d'une page ",[602,10624,10625],{},"statique","\ndécrite par HTML et stylée par CSS, et vous l'avez progressivement rendue\n",[602,10628,10629],{},"vivante"," : capable de collecter des données via un formulaire, de réagir à\nun clic ou à une touche grâce à JavaScript, de se transformer en direct par\nmanipulation du DOM, et de dialoguer avec un serveur distant via le protocole\nHTTP.",[598,10632,10633,10634,10636,10637,10639,10640,9639,10642,10644,10645,10647,10648,10650,10651,10654,10655,10658,10659,1910,10661,10663,10664,757,10666,10668,10669,757,10671,10673,10674,10677,10678,10680,10681,10683,10684,10686],{},"La progression a un ordre logique. ",[602,10635,8566],{}," posent la structure et\nl'apparence — l'arbre des balises et les règles de présentation. Les\n",[602,10638,8570],{}," introduisent la collecte des saisies de l'utilisateur, avec\nle couple ",[631,10641,1988],{},[631,10643,763],{}," et le choix critique entre ",[631,10646,1994],{}," (lecture,\nURL partageable) et ",[631,10649,1999],{}," (modification, données dans le corps). Les\n",[602,10652,10653],{},"événements JavaScript"," ouvrent la dimension ",[602,10656,10657],{},"réactive"," : votre code\nattache des ",[602,10660,3610],{},[631,10662,4065],{},") qui se déclenchent à la\ndemande, qu'il s'agisse d'un clic souris (",[631,10665,4299],{},[631,10667,4332],{},"…) ou d'une\nfrappe (",[631,10670,4592],{},[631,10672,4602],{},"). La ",[602,10675,10676],{},"manipulation du DOM"," vous a donné la\ncapacité de modifier la page en réponse : sélectionner un élément\n(",[631,10679,5824],{},"), changer son contenu (",[631,10682,5583],{},"), son style\n(",[631,10685,6462],{},"), créer ou supprimer des nœuds.",[598,10688,10689,10690,10693,10694,10697,10698,10700,10701,10704,10705,10708,10709,10712,10713,10715,10716,10718],{},"Enfin, le cours ",[602,10691,10692],{},"client \u002F serveur"," a formalisé la frontière essentielle :\nce qui s'exécute ",[602,10695,10696],{},"chez l'utilisateur"," (rendu, événements, validation de\nconfort) et ce qui s'exécute ",[602,10699,7257],{}," (stockage, validation\nde sécurité, vérification des droits). Vous avez disséqué une ",[602,10702,10703],{},"requête\nHTTP"," (méthode, en-têtes, corps) et une ",[602,10706,10707],{},"réponse"," (code de statut,\nen-têtes, corps), retenu la grammaire des ",[602,10710,10711],{},"codes de statut"," (2xx succès,\n4xx erreur client, 5xx erreur serveur), et compris que ",[602,10714,8012],{}," chiffre la\ncommunication — ",[631,10717,1999],{}," ne l'a jamais fait.",[598,10720,10721,10722,10725,10726,10728],{},"La compétence centrale du chapitre tient en une phrase : ",[602,10723,10724],{},"savoir lire une\npage Web comme un système"," où chaque clic est un événement, chaque champ\nporte un ",[631,10727,2293],{},", chaque action peut déclencher une requête HTTP, et chaque\nréponse a un code qui dit comment ça s'est passé.",[593,10730,10732],{"id":10731},"carte-des-notions","Carte des notions",[974,10734,10735,10748],{},[977,10736,10737],{},[980,10738,10739,10742,10745],{},[983,10740,10741],{},"Cours",[983,10743,10744],{},"Notions clés",[983,10746,10747],{},"Codes BO",[990,10749,10750,10766,10786,10801,10817],{},[980,10751,10752,10755,10763],{},[995,10753,10754],{},"1. HTML et CSS",[995,10756,10757,10758,757,10760],{},"balises, attributs, sélecteurs, ",[631,10759,1804],{},[631,10761,10762],{},"class",[995,10764,10765],{},"(socle)",[980,10767,10768,10771,10784],{},[995,10769,10770],{},"2. Formulaires",[995,10772,10773,757,10775,757,10777,757,10779,10781,10782],{},[631,10774,1988],{},[631,10776,763],{},[631,10778,2293],{},[631,10780,1994],{}," vs ",[631,10783,1999],{},[995,10785,1974],{},[980,10787,10788,10791,10798],{},[995,10789,10790],{},"3. Événements JS",[995,10792,10793,10795,10796],{},[631,10794,4065],{},", événements souris et clavier, ",[631,10797,4366],{},[995,10799,10800],{},"PE04, PE02",[980,10802,10803,10806,10815],{},[995,10804,10805],{},"4. Manipulation du DOM",[995,10807,10808,757,10810,757,10812,10814],{},[631,10809,5824],{},[631,10811,5583],{},[631,10813,6462],{},", création de nœuds",[995,10816,3580],{},[980,10818,10819,10822,10825],{},[995,10820,10821],{},"5. Client \u002F serveur, HTTP",[995,10823,10824],{},"requête, réponse, méthodes, codes de statut, HTTPS",[995,10826,7181],{},[598,10828,10829],{},"Les cours s'enchaînent. Sans HTML pas de DOM. Sans événements pas\nd'interactivité. Sans HTTP pas de communication réelle avec le monde\nextérieur.",[593,10831,10833],{"id":10832},"auto-évaluation","Auto-évaluation",[1083,10835,10837,10842],{"correct":1085,"slug":10836},"pe-ihm-web-1-q1",[1088,10838,10839],{"v-slot:question":656},[598,10840,10841],{},"Quelle méthode HTTP est adaptée pour envoyer le mot de passe d'un formulaire de connexion ?",[1088,10843,10844],{"v-slot:choices":656},[908,10845,10846,10850,10854,10859],{},[919,10847,10848],{},[631,10849,1994],{},[919,10851,10852],{},[631,10853,1999],{},[919,10855,10856],{},[631,10857,10858],{},"LIST",[919,10860,10861],{},[631,10862,10863],{},"READ",[1083,10865,10867,10872],{"correct":1375,"slug":10866},"pe-ihm-web-1-q2",[1088,10868,10869],{"v-slot:question":656},[598,10870,10871],{},"En JavaScript, comment attache-t-on une fonction au clic sur un bouton (méthode standard recommandée) ?",[1088,10873,10874],{"v-slot:choices":656},[908,10875,10876,10881,10886,10891],{},[919,10877,10878],{},[631,10879,10880],{},"bouton.onClick(fonction)",[919,10882,10883],{},[631,10884,10885],{},"bouton.listen(\"click\", fonction)",[919,10887,10888],{},[631,10889,10890],{},"bouton.addEventListener(\"click\", fonction)",[919,10892,10893],{},[631,10894,10895],{},"bouton.click = fonction",[1083,10897,10899,10908],{"correct":1085,"slug":10898},"pe-ihm-web-1-q3",[1088,10900,10901],{"v-slot:question":656},[598,10902,10903,10904,10907],{},"Que renvoie ",[631,10905,10906],{},"document.getElementById(\"inexistant\")"," si aucun élément ne porte cet identifiant ?",[1088,10909,10910],{"v-slot:choices":656},[908,10911,10912,10916,10920,10925],{},[919,10913,10914],{},[631,10915,3699],{},[919,10917,10918],{},[631,10919,3696],{},[919,10921,10922,10923],{},"Une liste vide ",[631,10924,5995],{},[919,10926,10927],{},"Une exception",[1083,10929,10932,10941],{"correct":10930,"slug":10931},"0,2","pe-ihm-web-1-q4",[1088,10933,10934],{"v-slot:question":656},[598,10935,10936,10937,10940],{},"Lesquelles de ces affirmations sont ",[602,10938,10939],{},"vraies"," ? (plusieurs réponses)",[1088,10942,10943],{"v-slot:choices":656},[908,10944,10945,10951,10956,10959],{},[919,10946,10947,10948,10950],{},"Une requête ",[631,10949,1994],{}," peut être bookmarkée car ses paramètres sont dans l'URL",[919,10952,10953,10955],{},[631,10954,1999],{}," chiffre les données pour qu'aucun intermédiaire ne les lise",[919,10957,10958],{},"HTTPS chiffre la communication entre le navigateur et le serveur",[919,10960,10961],{},"Le serveur peut faire confiance aux données envoyées par le client",[10963,10964,10966],"self-eval-free-text",{"answer":7672,"slug":10965,"tolerance":3270,"type":3719},"pe-ihm-web-1-q5",[1088,10967,10968],{"v-slot:question":656},[598,10969,10970],{},"Quel code de statut HTTP indique que la ressource demandée n'a pas été trouvée par le serveur ?",[10963,10972,10974],{"answer":1132,"slug":10973,"case-sensitive":3875},"pe-ihm-web-1-q6",[1088,10975,10976],{"v-slot:question":656},[598,10977,10978],{},"Quel sigle anglais désigne l'arbre d'objets que JavaScript manipule pour modifier la page (Document …) ?",[10963,10980,10982],{"answer":2293,"slug":10981,"case-sensitive":3875},"pe-ihm-web-1-q7",[1088,10983,10984],{"v-slot:question":656},[598,10985,10986,10987,10989],{},"Quel attribut d'un ",[631,10988,763],{}," détermine la clé sous laquelle sa valeur est envoyée au serveur ?",[10991,10992,10994,11001],"self-eval-ordering",{"slug":10993},"pe-ihm-web-1-q8",[1088,10995,10996],{"v-slot:question":656},[598,10997,10998,10999,697],{},"Ordonnez les étapes d'une navigation vers ",[631,11000,8083],{},[1088,11002,11003],{"v-slot:items":656},[908,11004,11005,11008,11011,11017,11020,11026],{},[919,11006,11007],{},"Résolution DNS du nom de domaine en adresse IP",[919,11009,11010],{},"Établissement de la connexion chiffrée TLS",[919,11012,11013,11014],{},"Envoi de la requête HTTP ",[631,11015,11016],{},"GET \u002Fcours",[919,11018,11019],{},"Traitement de la requête côté serveur",[919,11021,11022,11023,11025],{},"Réception de la réponse HTTP avec le code ",[631,11024,7669],{}," et le HTML",[919,11027,11028],{},"Rendu de la page dans le navigateur",{"title":656,"searchDepth":792,"depth":792,"links":11030},[11031,11032,11033],{"id":10614,"depth":792,"text":10615},{"id":10731,"depth":792,"text":10732},{"id":10832,"depth":792,"text":10833},"Vue d'ensemble du chapitre, points-clés et auto-évaluation finale.",{"self_eval_slug":11036},"nsi-1ere-pe-ihm-web","\u002Fnsi-1ere\u002Fpe-ihm-web\u002Fchapitre.memo",[11039,11041,11043,11047,11052,11055,11057,11059],{"slug":10836,"kind":1961,"question":10841,"choices":11040,"correct":1085,"multi":1963,"explanation":656},[1994,1999,10858,10863],{"slug":10866,"kind":1961,"question":10871,"choices":11042,"correct":1375,"multi":1963,"explanation":656},[10880,10885,10890,10895],{"slug":10898,"kind":1961,"question":11044,"choices":11045,"correct":1085,"multi":1963,"explanation":656},"Que renvoie document.getElementById(\"inexistant\") si aucun élément ne porte cet identifiant ?",[3699,3696,11046,10927],"Une liste vide []",{"slug":10931,"kind":1961,"question":11048,"choices":11049,"correct":10930,"multi":1346,"explanation":656},"Lesquelles de ces affirmations sont vraies ? (plusieurs réponses)",[11050,11051,10958,10961],"Une requête GET peut être bookmarkée car ses paramètres sont dans l'URL","POST chiffre les données pour qu'aucun intermédiaire ne les lise",{"slug":10965,"kind":11053,"question":10970,"answer":7672,"caseSensitive":1963,"tolerance":11054,"inputType":3719,"explanation":656},"free_text",0,{"slug":10973,"kind":11053,"question":10978,"answer":1132,"caseSensitive":1963,"tolerance":11054,"inputType":11056,"explanation":656},"string",{"slug":10981,"kind":11053,"question":11058,"answer":2293,"caseSensitive":1963,"tolerance":11054,"inputType":11056,"explanation":656},"Quel attribut d'un \u003Cinput> détermine la clé sous laquelle sa valeur est envoyée au serveur ?",{"slug":10993,"kind":11060,"question":11061,"items":11062,"explanation":656},"ordering","Ordonnez les étapes d'une navigation vers https:\u002F\u002Fnsi.rocks\u002Fcours :",[11007,11010,11063,11019,11064,11028],"Envoi de la requête HTTP GET \u002Fcours","Réception de la réponse HTTP avec le code 200 et le HTML",{"title":10608,"description":11034},"1.nsi-1ere\u002Fpe-ihm-web\u002Fchapitre.memo","qmmf94ByeT2WIBb64Q3yXQyBOgES5Bfeh1oz8oyMY_Y",1788035581961]