[{"data":1,"prerenderedAt":4271},["ShallowReactive",2],{"navigation":3,"\u002Fnsi-1ere\u002Fpe-ihm-web\u002Fevenements-js":585,"\u002Fnsi-1ere\u002Fpe-ihm-web\u002Fevenements-js__counterpart":2648,"\u002Fnsi-1ere\u002Fpe-ihm-web\u002Fevenements-js__slides":3041,"annexes-memo:\u002Fnsi-1ere\u002Fpe-ihm-web\u002Fevenements-js":3531,"annexes-slides:\u002Fnsi-1ere\u002Fpe-ihm-web\u002Fevenements-js":3848},[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",{"id":586,"title":343,"bo":587,"body":590,"description":2635,"eval":2636,"extension":2637,"labo":2636,"meta":2638,"navigation":1101,"path":344,"quizzes":2639,"readingTime":664,"seo":2646,"stem":345,"tp":2636,"__hash__":2647},"cours\u002F1.nsi-1ere\u002Fpe-ihm-web\u002F3.evenements-js.md",[588,589],"PE04","PE02",{"type":591,"value":592,"toc":2622},"minimark",[593,598,627,637,641,644,650,720,765,831,837,932,938,982,1015,1038,1041,1044,1048,1062,1150,1153,1183,1193,1195,1199,1202,1320,1339,1341,1345,1348,1428,1437,1581,1587,1611,1637,1639,1643,1646,1679,1684,1734,1849,1855,1857,1861,1864,2075,2089,2114,2116,2120,2123,2148,2313,2322,2337,2354,2356,2360,2390,2440,2537,2543,2545,2549,2607,2611,2618],[594,595,597],"h2",{"id":596},"introduction","Introduction",[599,600,601,602,606,607,610,611,614,615,618,619,622,623,626],"p",{},"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é ",[603,604,605],"strong",{},"dans le navigateur"," : c'est le rôle de ",[603,608,609],{},"JavaScript",". Le modèle\nfondamental est dit ",[603,612,613],{},"événementiel"," : le navigateur diffuse en permanence\ndes ",[603,616,617],{},"événements"," (un clic, un appui clavier, un changement de champ…), et\nvotre code attache des ",[603,620,621],{},"fonctions de réaction"," — des ",[603,624,625],{},"écouteurs"," — à ceux\nqui l'intéressent.",[599,628,629,630,633,634,636],{},"Voir ",[631,632],"bo-ref",{"code":588}," et ",[631,635],{"code":589},".",[594,638,640],{"id":639},"javascript-en-30-secondes","JavaScript en 30 secondes",[599,642,643],{},"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.",[599,645,646,649],{},[603,647,648],{},"Déclarer une variable"," : trois mots-clés possibles, deux à retenir.",[651,652,657],"pre",{"className":653,"code":654,"language":655,"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","",[658,659,660,687,708],"code",{"__ignoreMap":656},[661,662,665,669,673,676,680,683],"span",{"class":663,"line":664},"line",1,[661,666,668],{"class":667},"s8jYJ","let",[661,670,672],{"class":671},"sxrX7","   x ",[661,674,675],{"class":667},"=",[661,677,679],{"class":678},"sBjJW"," 5",[661,681,682],{"class":671},";     ",[661,684,686],{"class":685},"sCsY4","\u002F\u002F variable que l'on pourra réaffecter\n",[661,688,690,693,696,699,702,705],{"class":663,"line":689},2,[661,691,692],{"class":667},"const",[661,694,695],{"class":678}," y",[661,697,698],{"class":667}," =",[661,700,701],{"class":678}," 10",[661,703,704],{"class":671},";    ",[661,706,707],{"class":685},"\u002F\u002F valeur fixée, interdiction de la réaffecter\n",[661,709,711,714,717],{"class":663,"line":710},3,[661,712,713],{"class":667},"var",[661,715,716],{"class":671},"   z;         ",[661,718,719],{"class":685},"\u002F\u002F ancien mot-clé : à éviter (portée capricieuse)\n",[599,721,722,725,726,729,730,733,734,737,738,741,742,745,746,749,750,753,754,757,758,761,762,636],{},[603,723,724],{},"Types de base"," : nombres, chaînes, booléens, ",[658,727,728],{},"null",", ",[658,731,732],{},"undefined",", tableaux\n(",[658,735,736],{},"[…]",") et objets (",[658,739,740],{},"{ clé: valeur }","). Pas de distinction ",[658,743,744],{},"int"," \u002F ",[658,747,748],{},"float"," —\ntout nombre est un ",[658,751,752],{},"number",". Les chaînes peuvent s'écrire avec des\nguillemets simples, doubles, ou des ",[603,755,756],{},"template literals"," entre backticks\n(",[658,759,760],{},"`…`",") qui acceptent l'interpolation ",[658,763,764],{},"${variable}",[651,766,768],{"className":653,"code":767,"language":655,"meta":656,"style":656},"const prenom = \"Ada\";\nconst age    = 17;\nconst phrase = `${prenom} a ${age} ans.`;  \u002F\u002F \"Ada a 17 ans.\"\n",[658,769,770,786,801],{"__ignoreMap":656},[661,771,772,774,777,779,783],{"class":663,"line":664},[661,773,692],{"class":667},[661,775,776],{"class":678}," prenom",[661,778,698],{"class":667},[661,780,782],{"class":781},"sIIMD"," \"Ada\"",[661,784,785],{"class":671},";\n",[661,787,788,790,793,796,799],{"class":663,"line":689},[661,789,692],{"class":667},[661,791,792],{"class":678}," age",[661,794,795],{"class":667},"    =",[661,797,798],{"class":678}," 17",[661,800,785],{"class":671},[661,802,803,805,808,810,813,816,819,822,825,828],{"class":663,"line":710},[661,804,692],{"class":667},[661,806,807],{"class":678}," phrase",[661,809,698],{"class":667},[661,811,812],{"class":781}," `${",[661,814,815],{"class":671},"prenom",[661,817,818],{"class":781},"} a ${",[661,820,821],{"class":671},"age",[661,823,824],{"class":781},"} ans.`",[661,826,827],{"class":671},";  ",[661,829,830],{"class":685},"\u002F\u002F \"Ada a 17 ans.\"\n",[599,832,833,836],{},[603,834,835],{},"Petit pont Python ↔ JavaScript"," pour les passages les plus déroutants :",[838,839,840,853],"table",{},[841,842,843],"thead",{},[844,845,846,850],"tr",{},[847,848,849],"th",{},"En Python",[847,851,852],{},"En JavaScript",[854,855,856,873,885,897,920],"tbody",{},[844,857,858,864],{},[859,860,861],"td",{},[658,862,863],{},"x = 5",[859,865,866,869,870],{},[658,867,868],{},"let x = 5;"," ou ",[658,871,872],{},"const x = 5;",[844,874,875,880],{},[859,876,877],{},[658,878,879],{},"print(x)",[859,881,882],{},[658,883,884],{},"console.log(x);",[844,886,887,892],{},[859,888,889],{},[658,890,891],{},"def f(n): return n * n",[859,893,894],{},[658,895,896],{},"function f(n) { return n * n; }",[844,898,899,910],{},[859,900,901,729,904,729,907],{},[658,902,903],{},"True",[658,905,906],{},"False",[658,908,909],{},"None",[859,911,912,729,915,729,918],{},[658,913,914],{},"true",[658,916,917],{},"false",[658,919,728],{},[844,921,922,927],{},[859,923,924],{},[658,925,926],{},"len(t)",[859,928,929],{},[658,930,931],{},"t.length",[599,933,934,937],{},[603,935,936],{},"Égalité — un point très sensible"," :",[651,939,941],{"className":653,"code":940,"language":655,"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",[658,942,943,957,969],{"__ignoreMap":656},[661,944,945,948,951,954],{"class":663,"line":664},[661,946,947],{"class":678},"3",[661,949,950],{"class":667}," ===",[661,952,953],{"class":678}," 3",[661,955,956],{"class":685},"      \u002F\u002F true   — égalité stricte (type + valeur)\n",[661,958,959,961,963,966],{"class":663,"line":689},[661,960,947],{"class":678},[661,962,950],{"class":667},[661,964,965],{"class":781}," \"3\"",[661,967,968],{"class":685},"    \u002F\u002F false  — types différents\n",[661,970,971,973,976,979],{"class":663,"line":710},[661,972,947],{"class":678},[661,974,975],{"class":667}," ==",[661,977,978],{"class":781},"  \"3\"",[661,980,981],{"class":685},"    \u002F\u002F true   — égalité laxiste (à éviter)\n",[983,984,985],"warning",{},[599,986,987,988,994,995,998,999,1002,1003,1006,1007,729,1009,1006,1012,1014],{},"Utilisez ",[603,989,990,991],{},"toujours ",[658,992,993],{},"==="," (et ",[658,996,997],{},"!==",") en JavaScript. L'égalité laxiste ",[658,1000,1001],{},"==","\napplique des conversions implicites qui produisent des résultats surprenants\n(",[658,1004,1005],{},"0 == \"\""," vaut ",[658,1008,914],{},[658,1010,1011],{},"null == undefined",[658,1013,914],{},"…). C'est l'une des\nsources de bugs les plus connues du langage.",[599,1016,1017,1020,1021,1024,1025,1028,1029,1032,1033,1037],{},[603,1018,1019],{},"Afficher dans la console du navigateur"," : ",[658,1022,1023],{},"console.log(...)"," est\nl'équivalent direct du ",[658,1026,1027],{},"print(...)"," de Python. Le résultat apparaît dans\nles outils de développement (touche ",[603,1030,1031],{},"F12",", onglet ",[1034,1035,1036],"em",{},"Console",").",[599,1039,1040],{},"Avec ces quelques briques, le code des sections qui suivent devient lisible.",[1042,1043],"hr",{},[594,1045,1047],{"id":1046},"le-modèle-événementiel","Le modèle événementiel",[599,1049,1050,1051,1054,1055,1058,1059,1037],{},"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 : ",[1034,1052,1053],{},"« quand tu annonces tel événement sur tel\nélément, exécute cette fonction »."," Cette mécanique s'appelle un ",[603,1056,1057],{},"écouteur\nd'événement"," (",[1034,1060,1061],{},"event listener",[651,1063,1065],{"className":653,"code":1064,"language":655,"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",[658,1066,1067,1072,1097,1103,1109,1131,1144],{"__ignoreMap":656},[661,1068,1069],{"class":663,"line":664},[661,1070,1071],{"class":685},"\u002F\u002F Cibler un élément\n",[661,1073,1074,1076,1079,1081,1084,1088,1091,1094],{"class":663,"line":689},[661,1075,692],{"class":667},[661,1077,1078],{"class":678}," bouton",[661,1080,698],{"class":667},[661,1082,1083],{"class":671}," document.",[661,1085,1087],{"class":1086},"snPdu","getElementById",[661,1089,1090],{"class":671},"(",[661,1092,1093],{"class":781},"\"monBouton\"",[661,1095,1096],{"class":671},");\n",[661,1098,1099],{"class":663,"line":710},[661,1100,1102],{"emptyLinePlaceholder":1101},true,"\n",[661,1104,1106],{"class":663,"line":1105},4,[661,1107,1108],{"class":685},"\u002F\u002F Lui attacher un écouteur sur l'événement \"click\"\n",[661,1110,1112,1115,1118,1120,1123,1125,1128],{"class":663,"line":1111},5,[661,1113,1114],{"class":671},"bouton.",[661,1116,1117],{"class":1086},"addEventListener",[661,1119,1090],{"class":671},[661,1121,1122],{"class":781},"\"click\"",[661,1124,729],{"class":671},[661,1126,1127],{"class":667},"function",[661,1129,1130],{"class":671},"() {\n",[661,1132,1134,1137,1139,1142],{"class":663,"line":1133},6,[661,1135,1136],{"class":1086},"  alert",[661,1138,1090],{"class":671},[661,1140,1141],{"class":781},"\"Bouton cliqué !\"",[661,1143,1096],{"class":671},[661,1145,1147],{"class":663,"line":1146},7,[661,1148,1149],{"class":671},"});\n",[599,1151,1152],{},"Trois ingrédients à chaque fois :",[1154,1155,1156,1164,1176],"ol",{},[1157,1158,1159,1160,1163],"li",{},"Un ",[603,1161,1162],{},"élément cible"," récupéré dans la page (ici, le bouton).",[1157,1165,1159,1166,1169,1170,729,1172,1175],{},[603,1167,1168],{},"nom d'événement"," sous forme de chaîne (",[658,1171,1122],{},[658,1173,1174],{},"\"keydown\"","…).",[1157,1177,1178,1179,1182],{},"Une ",[603,1180,1181],{},"fonction"," qui s'exécute lors de l'événement.",[1184,1185,1186],"note",{},[599,1187,1188,1189,1192],{},"La méthode ",[658,1190,1191],{},"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.",[1042,1194],{},[594,1196,1198],{"id":1197},"inclure-du-javascript-dans-une-page","Inclure du JavaScript dans une page",[599,1200,1201],{},"Trois manières d'attacher du JS à une page HTML :",[651,1203,1207],{"className":1204,"code":1205,"language":1206,"meta":656,"style":656},"language-html shiki shiki-themes github-light github-light github-dark","\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","html",[658,1208,1209,1214,1239,1243,1248,1256,1271,1280,1285,1291],{"__ignoreMap":656},[661,1210,1211],{"class":663,"line":664},[661,1212,1213],{"class":685},"\u003C!-- 1. Fichier externe (recommandé) -->\n",[661,1215,1216,1219,1223,1226,1228,1231,1234,1236],{"class":663,"line":689},[661,1217,1218],{"class":671},"\u003C",[661,1220,1222],{"class":1221},"sovSZ","script",[661,1224,1225],{"class":1086}," src",[661,1227,675],{"class":671},[661,1229,1230],{"class":781},"\"script.js\"",[661,1232,1233],{"class":671},">\u003C\u002F",[661,1235,1222],{"class":1221},[661,1237,1238],{"class":671},">\n",[661,1240,1241],{"class":663,"line":710},[661,1242,1102],{"emptyLinePlaceholder":1101},[661,1244,1245],{"class":663,"line":1105},[661,1246,1247],{"class":685},"\u003C!-- 2. Bloc inline -->\n",[661,1249,1250,1252,1254],{"class":663,"line":1111},[661,1251,1218],{"class":671},[661,1253,1222],{"class":1221},[661,1255,1238],{"class":671},[661,1257,1258,1261,1264,1266,1269],{"class":663,"line":1133},[661,1259,1260],{"class":671},"  console.",[661,1262,1263],{"class":1086},"log",[661,1265,1090],{"class":671},[661,1267,1268],{"class":781},"\"Bonjour depuis la page !\"",[661,1270,1096],{"class":671},[661,1272,1273,1276,1278],{"class":663,"line":1146},[661,1274,1275],{"class":671},"\u003C\u002F",[661,1277,1222],{"class":1221},[661,1279,1238],{"class":671},[661,1281,1283],{"class":663,"line":1282},8,[661,1284,1102],{"emptyLinePlaceholder":1101},[661,1286,1288],{"class":663,"line":1287},9,[661,1289,1290],{"class":685},"\u003C!-- 3. Attribut on… (à éviter pour de vrais projets) -->\n",[661,1292,1294,1296,1299,1302,1304,1307,1310,1313,1316,1318],{"class":663,"line":1293},10,[661,1295,1218],{"class":671},[661,1297,1298],{"class":1221},"button",[661,1300,1301],{"class":1086}," onclick",[661,1303,675],{"class":671},[661,1305,1306],{"class":781},"\"",[661,1308,1309],{"class":1086},"alert",[661,1311,1312],{"class":781},"('clic')\"",[661,1314,1315],{"class":671},">Cliquer\u003C\u002F",[661,1317,1298],{"class":1221},[661,1319,1238],{"class":671},[599,1321,1322,1323,1326,1327,1330,1331,1334,1335,1338],{},"La méthode externe est la norme : un fichier ",[658,1324,1325],{},".js"," qui charge ses écouteurs au\ndémarrage. On place souvent ",[658,1328,1329],{},"\u003Cscript src=\"…\" defer>\u003C\u002Fscript>"," dans le ",[658,1332,1333],{},"\u003Chead>",",\nl'attribut ",[658,1336,1337],{},"defer"," garantit que le script s'exécute après le chargement du\nHTML.",[1042,1340],{},[594,1342,1344],{"id":1343},"événements-de-souris","Événements de souris",[599,1346,1347],{},"Les principaux événements de la souris :",[838,1349,1350,1360],{},[841,1351,1352],{},[844,1353,1354,1357],{},[847,1355,1356],{},"Nom",[847,1358,1359],{},"Déclenché quand…",[854,1361,1362,1372,1382,1395,1405,1418],{},[844,1363,1364,1369],{},[859,1365,1366],{},[658,1367,1368],{},"click",[859,1370,1371],{},"Un clic complet sur l'élément.",[844,1373,1374,1379],{},[859,1375,1376],{},[658,1377,1378],{},"dblclick",[859,1380,1381],{},"Un double-clic.",[844,1383,1384,1392],{},[859,1385,1386,745,1389],{},[658,1387,1388],{},"mousedown",[658,1390,1391],{},"mouseup",[859,1393,1394],{},"Bouton enfoncé \u002F relâché.",[844,1396,1397,1402],{},[859,1398,1399],{},[658,1400,1401],{},"mousemove",[859,1403,1404],{},"La souris bouge sur l'élément.",[844,1406,1407,1415],{},[859,1408,1409,745,1412],{},[658,1410,1411],{},"mouseenter",[658,1413,1414],{},"mouseleave",[859,1416,1417],{},"La souris entre dans \u002F sort de l'élément.",[844,1419,1420,1425],{},[859,1421,1422],{},[658,1423,1424],{},"contextmenu",[859,1426,1427],{},"Clic droit (menu contextuel).",[599,1429,1430,1431,1436],{},"L'objet ",[603,1432,1433],{},[658,1434,1435],{},"event"," transmis à la fonction porte les informations du clic :",[651,1438,1440],{"className":653,"code":1439,"language":655,"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",[658,1441,1442,1462,1466,1490,1523,1527,1531,1551,1572,1577],{"__ignoreMap":656},[661,1443,1444,1446,1449,1451,1453,1455,1457,1460],{"class":663,"line":664},[661,1445,692],{"class":667},[661,1447,1448],{"class":678}," zone",[661,1450,698],{"class":667},[661,1452,1083],{"class":671},[661,1454,1087],{"class":1086},[661,1456,1090],{"class":671},[661,1458,1459],{"class":781},"\"zone\"",[661,1461,1096],{"class":671},[661,1463,1464],{"class":663,"line":689},[661,1465,1102],{"emptyLinePlaceholder":1101},[661,1467,1468,1471,1473,1475,1478,1480,1482,1484,1487],{"class":663,"line":710},[661,1469,1470],{"class":671},"zone.",[661,1472,1117],{"class":1086},[661,1474,1090],{"class":671},[661,1476,1477],{"class":781},"\"mousemove\"",[661,1479,729],{"class":671},[661,1481,1127],{"class":667},[661,1483,1090],{"class":671},[661,1485,1435],{"class":1486},"sP4rz",[661,1488,1489],{"class":671},") {\n",[661,1491,1492,1494,1496,1498,1501,1503,1505,1508,1511,1513,1515,1518,1521],{"class":663,"line":1105},[661,1493,1260],{"class":671},[661,1495,1263],{"class":1086},[661,1497,1090],{"class":671},[661,1499,1500],{"class":781},"`x = ${",[661,1502,1435],{"class":671},[661,1504,636],{"class":781},[661,1506,1507],{"class":671},"clientX",[661,1509,1510],{"class":781},"}, y = ${",[661,1512,1435],{"class":671},[661,1514,636],{"class":781},[661,1516,1517],{"class":671},"clientY",[661,1519,1520],{"class":781},"}`",[661,1522,1096],{"class":671},[661,1524,1525],{"class":663,"line":1111},[661,1526,1149],{"class":671},[661,1528,1529],{"class":663,"line":1133},[661,1530,1102],{"emptyLinePlaceholder":1101},[661,1532,1533,1535,1537,1539,1541,1543,1545,1547,1549],{"class":663,"line":1146},[661,1534,1470],{"class":671},[661,1536,1117],{"class":1086},[661,1538,1090],{"class":671},[661,1540,1122],{"class":781},[661,1542,729],{"class":671},[661,1544,1127],{"class":667},[661,1546,1090],{"class":671},[661,1548,1435],{"class":1486},[661,1550,1489],{"class":671},[661,1552,1553,1555,1557,1559,1562,1564,1566,1568,1570],{"class":663,"line":1282},[661,1554,1260],{"class":671},[661,1556,1263],{"class":1086},[661,1558,1090],{"class":671},[661,1560,1561],{"class":781},"`Bouton utilisé : ${",[661,1563,1435],{"class":671},[661,1565,636],{"class":781},[661,1567,1298],{"class":671},[661,1569,1520],{"class":781},[661,1571,1096],{"class":671},[661,1573,1574],{"class":663,"line":1287},[661,1575,1576],{"class":685},"  \u002F\u002F 0 = gauche, 1 = molette, 2 = droit\n",[661,1578,1579],{"class":663,"line":1293},[661,1580,1149],{"class":671},[599,1582,1583,1584,1586],{},"Quelques propriétés utiles de ",[658,1585,1435],{}," pour les événements souris :",[1588,1589,1590,1599,1605],"ul",{},[1157,1591,1592,729,1595,1598],{},[658,1593,1594],{},"event.clientX",[658,1596,1597],{},"event.clientY"," — coordonnées par rapport à la fenêtre.",[1157,1600,1601,1604],{},[658,1602,1603],{},"event.target"," — l'élément HTML cliqué.",[1157,1606,1607,1610],{},[658,1608,1609],{},"event.button"," — bouton de la souris (0\u002F1\u002F2).",[1612,1613,1616,1622],"self-eval-qcm",{"correct":1614,"slug":1615},"1","evenements-js-c1",[1617,1618,1619],"template",{"v-slot:question":656},[599,1620,1621],{},"Quelle méthode attache une fonction à un événement ?",[1617,1623,1624],{"v-slot:choices":656},[1588,1625,1626,1629,1631,1634],{},[1157,1627,1628],{},"onEvent",[1157,1630,1117],{},[1157,1632,1633],{},"listenEvent",[1157,1635,1636],{},"attachEvent",[1042,1638],{},[594,1640,1642],{"id":1641},"événements-clavier","Événements clavier",[599,1644,1645],{},"Pour le clavier, deux événements principaux :",[838,1647,1648,1657],{},[841,1649,1650],{},[844,1651,1652,1654],{},[847,1653,1356],{},[847,1655,1656],{},"Quand",[854,1658,1659,1669],{},[844,1660,1661,1666],{},[859,1662,1663],{},[658,1664,1665],{},"keydown",[859,1667,1668],{},"Touche enfoncée (se répète si maintenue).",[844,1670,1671,1676],{},[859,1672,1673],{},[658,1674,1675],{},"keyup",[859,1677,1678],{},"Touche relâchée.",[599,1680,1430,1681,1683],{},[658,1682,1435],{}," du clavier expose :",[1588,1685,1686,1704,1719],{},[1157,1687,1688,1691,1692,729,1695,729,1698,729,1701,1175],{},[658,1689,1690],{},"event.key"," — la touche, sous forme lisible (",[658,1693,1694],{},"\"a\"",[658,1696,1697],{},"\"A\"",[658,1699,1700],{},"\"Enter\"",[658,1702,1703],{},"\"ArrowUp\"",[1157,1705,1706,1709,1710,729,1713,1715,1716,1718],{},[658,1707,1708],{},"event.code"," — l'identifiant physique de la touche (",[658,1711,1712],{},"\"KeyA\"",[658,1714,1700],{},",\n",[658,1717,1703],{},"…), indépendant de la disposition.",[1157,1720,1721,729,1724,729,1727,729,1730,1733],{},[658,1722,1723],{},"event.ctrlKey",[658,1725,1726],{},"event.shiftKey",[658,1728,1729],{},"event.altKey",[658,1731,1732],{},"event.metaKey"," —\nbooléens indiquant les touches modificatrices.",[651,1735,1737],{"className":653,"code":1736,"language":655,"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",[658,1738,1739,1760,1775,1789,1794,1814,1827,1841,1845],{"__ignoreMap":656},[661,1740,1741,1744,1746,1748,1750,1752,1754,1756,1758],{"class":663,"line":664},[661,1742,1743],{"class":671},"document.",[661,1745,1117],{"class":1086},[661,1747,1090],{"class":671},[661,1749,1174],{"class":781},[661,1751,729],{"class":671},[661,1753,1127],{"class":667},[661,1755,1090],{"class":671},[661,1757,1435],{"class":1486},[661,1759,1489],{"class":671},[661,1761,1762,1765,1768,1770,1773],{"class":663,"line":689},[661,1763,1764],{"class":667},"  if",[661,1766,1767],{"class":671}," (event.key ",[661,1769,993],{"class":667},[661,1771,1772],{"class":781}," \"Enter\"",[661,1774,1489],{"class":671},[661,1776,1777,1780,1782,1784,1787],{"class":663,"line":710},[661,1778,1779],{"class":671},"    console.",[661,1781,1263],{"class":1086},[661,1783,1090],{"class":671},[661,1785,1786],{"class":781},"\"Vous avez appuyé sur Entrée\"",[661,1788,1096],{"class":671},[661,1790,1791],{"class":663,"line":1105},[661,1792,1793],{"class":671},"  }\n",[661,1795,1796,1798,1801,1804,1807,1809,1812],{"class":663,"line":1111},[661,1797,1764],{"class":667},[661,1799,1800],{"class":671}," (event.ctrlKey ",[661,1802,1803],{"class":667},"&&",[661,1805,1806],{"class":671}," event.key ",[661,1808,993],{"class":667},[661,1810,1811],{"class":781}," \"s\"",[661,1813,1489],{"class":671},[661,1815,1816,1818,1820,1822,1825],{"class":663,"line":1133},[661,1817,1779],{"class":671},[661,1819,1263],{"class":1086},[661,1821,1090],{"class":671},[661,1823,1824],{"class":781},"\"Raccourci Ctrl+S détecté\"",[661,1826,1096],{"class":671},[661,1828,1829,1832,1835,1838],{"class":663,"line":1146},[661,1830,1831],{"class":671},"    event.",[661,1833,1834],{"class":1086},"preventDefault",[661,1836,1837],{"class":671},"(); ",[661,1839,1840],{"class":685},"\u002F\u002F empêcher la sauvegarde du navigateur\n",[661,1842,1843],{"class":663,"line":1282},[661,1844,1793],{"class":671},[661,1846,1847],{"class":663,"line":1287},[661,1848,1149],{"class":671},[599,1850,1851,1854],{},[658,1852,1853],{},"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.",[1042,1856],{},[594,1858,1860],{"id":1859},"trois-manières-dattacher-une-réaction-à-un-clic","Trois manières d'attacher une réaction à un clic",[599,1862,1863],{},"Toutes les approches suivantes font la même chose : afficher une alerte au clic.",[651,1865,1867],{"className":1204,"code":1866,"language":1206,"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",[658,1868,1869,1874,1897,1901,1906,1927,1935,1958,1970,1975,1983,1988,1994,2015,2024,2049,2060,2066],{"__ignoreMap":656},[661,1870,1871],{"class":663,"line":664},[661,1872,1873],{"class":685},"\u003C!-- 1. Attribut onclick dans le HTML (déconseillé en projet sérieux) -->\n",[661,1875,1876,1878,1880,1882,1884,1886,1888,1890,1893,1895],{"class":663,"line":689},[661,1877,1218],{"class":671},[661,1879,1298],{"class":1221},[661,1881,1301],{"class":1086},[661,1883,675],{"class":671},[661,1885,1306],{"class":781},[661,1887,1309],{"class":1086},[661,1889,1312],{"class":781},[661,1891,1892],{"class":671},">Bouton A\u003C\u002F",[661,1894,1298],{"class":1221},[661,1896,1238],{"class":671},[661,1898,1899],{"class":663,"line":710},[661,1900,1102],{"emptyLinePlaceholder":1101},[661,1902,1903],{"class":663,"line":1105},[661,1904,1905],{"class":685},"\u003C!-- 2. Propriété .onclick en JS -->\n",[661,1907,1908,1910,1912,1915,1917,1920,1923,1925],{"class":663,"line":1111},[661,1909,1218],{"class":671},[661,1911,1298],{"class":1221},[661,1913,1914],{"class":1086}," id",[661,1916,675],{"class":671},[661,1918,1919],{"class":781},"\"b\"",[661,1921,1922],{"class":671},">Bouton B\u003C\u002F",[661,1924,1298],{"class":1221},[661,1926,1238],{"class":671},[661,1928,1929,1931,1933],{"class":663,"line":1133},[661,1930,1218],{"class":671},[661,1932,1222],{"class":1221},[661,1934,1238],{"class":671},[661,1936,1937,1940,1942,1944,1946,1948,1951,1953,1956],{"class":663,"line":1146},[661,1938,1939],{"class":671},"  document.",[661,1941,1087],{"class":1086},[661,1943,1090],{"class":671},[661,1945,1919],{"class":781},[661,1947,1037],{"class":671},[661,1949,1950],{"class":1086},"onclick",[661,1952,698],{"class":667},[661,1954,1955],{"class":667}," function",[661,1957,1130],{"class":671},[661,1959,1960,1963,1965,1968],{"class":663,"line":1282},[661,1961,1962],{"class":1086},"    alert",[661,1964,1090],{"class":671},[661,1966,1967],{"class":781},"\"clic\"",[661,1969,1096],{"class":671},[661,1971,1972],{"class":663,"line":1287},[661,1973,1974],{"class":671},"  };\n",[661,1976,1977,1979,1981],{"class":663,"line":1293},[661,1978,1275],{"class":671},[661,1980,1222],{"class":1221},[661,1982,1238],{"class":671},[661,1984,1986],{"class":663,"line":1985},11,[661,1987,1102],{"emptyLinePlaceholder":1101},[661,1989,1991],{"class":663,"line":1990},12,[661,1992,1993],{"class":685},"\u003C!-- 3. addEventListener (recommandé) -->\n",[661,1995,1997,1999,2001,2003,2005,2008,2011,2013],{"class":663,"line":1996},13,[661,1998,1218],{"class":671},[661,2000,1298],{"class":1221},[661,2002,1914],{"class":1086},[661,2004,675],{"class":671},[661,2006,2007],{"class":781},"\"c\"",[661,2009,2010],{"class":671},">Bouton C\u003C\u002F",[661,2012,1298],{"class":1221},[661,2014,1238],{"class":671},[661,2016,2018,2020,2022],{"class":663,"line":2017},14,[661,2019,1218],{"class":671},[661,2021,1222],{"class":1221},[661,2023,1238],{"class":671},[661,2025,2027,2029,2031,2033,2035,2037,2039,2041,2043,2045,2047],{"class":663,"line":2026},15,[661,2028,1939],{"class":671},[661,2030,1087],{"class":1086},[661,2032,1090],{"class":671},[661,2034,2007],{"class":781},[661,2036,1037],{"class":671},[661,2038,1117],{"class":1086},[661,2040,1090],{"class":671},[661,2042,1122],{"class":781},[661,2044,729],{"class":671},[661,2046,1127],{"class":667},[661,2048,1130],{"class":671},[661,2050,2052,2054,2056,2058],{"class":663,"line":2051},16,[661,2053,1962],{"class":1086},[661,2055,1090],{"class":671},[661,2057,1967],{"class":781},[661,2059,1096],{"class":671},[661,2061,2063],{"class":663,"line":2062},17,[661,2064,2065],{"class":671},"  });\n",[661,2067,2069,2071,2073],{"class":663,"line":2068},18,[661,2070,1275],{"class":671},[661,2072,1222],{"class":1221},[661,2074,1238],{"class":671},[599,2076,2077,2078,2080,2081,2084,2085,2088],{},"Pourquoi préférer ",[658,2079,1117],{}," ? Parce qu'il ",[603,2082,2083],{},"autorise plusieurs\nécouteurs"," sur le même événement, alors que ",[658,2086,2087],{},"onclick = …"," écrase le\nprécédent. Et parce qu'il sépare proprement le HTML (structure) du JS\n(comportement).",[1612,2090,2093,2098],{"correct":2091,"slug":2092},"2","evenements-js-c2",[1617,2094,2095],{"v-slot:question":656},[599,2096,2097],{},"Combien d'écouteurs peut-on attacher à un même bouton pour 'click' avec addEventListener ?",[1617,2099,2100],{"v-slot:choices":656},[1588,2101,2102,2105,2108,2111],{},[1157,2103,2104],{},"1 seul",[1157,2106,2107],{},"Jusqu’à 2",[1157,2109,2110],{},"Autant qu’on veut",[1157,2112,2113],{},"Aucun, c’est interdit",[1042,2115],{},[594,2117,2119],{"id":2118},"modifier-la-réaction-dun-bouton-existant","Modifier la réaction d'un bouton existant",[599,2121,2122],{},"Le programme officiel parle de « modifier les méthodes exécutées lors d'un\nclic sur un bouton ». Voici comment :",[651,2124,2126],{"className":1204,"code":2125,"language":1206,"meta":656,"style":656},"\u003Cbutton id=\"action\">Action\u003C\u002Fbutton>\n",[658,2127,2128],{"__ignoreMap":656},[661,2129,2130,2132,2134,2136,2138,2141,2144,2146],{"class":663,"line":664},[661,2131,1218],{"class":671},[661,2133,1298],{"class":1221},[661,2135,1914],{"class":1086},[661,2137,675],{"class":671},[661,2139,2140],{"class":781},"\"action\"",[661,2142,2143],{"class":671},">Action\u003C\u002F",[661,2145,1298],{"class":1221},[661,2147,1238],{"class":671},[651,2149,2151],{"className":653,"code":2150,"language":655,"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",[658,2152,2153,2172,2176,2181,2195,2204,2217,2235,2240,2254,2258,2263,2272,2283,2287,2300],{"__ignoreMap":656},[661,2154,2155,2157,2160,2162,2164,2166,2168,2170],{"class":663,"line":664},[661,2156,692],{"class":667},[661,2158,2159],{"class":678}," btn",[661,2161,698],{"class":667},[661,2163,1083],{"class":671},[661,2165,1087],{"class":1086},[661,2167,1090],{"class":671},[661,2169,2140],{"class":781},[661,2171,1096],{"class":671},[661,2173,2174],{"class":663,"line":689},[661,2175,1102],{"emptyLinePlaceholder":1101},[661,2177,2178],{"class":663,"line":710},[661,2179,2180],{"class":685},"\u002F\u002F État initial : un compteur\n",[661,2182,2183,2185,2188,2190,2193],{"class":663,"line":1105},[661,2184,668],{"class":667},[661,2186,2187],{"class":671}," compteur ",[661,2189,675],{"class":667},[661,2191,2192],{"class":678}," 0",[661,2194,785],{"class":671},[661,2196,2197,2199,2202],{"class":663,"line":1111},[661,2198,1127],{"class":667},[661,2200,2201],{"class":1086}," incrementer",[661,2203,1130],{"class":671},[661,2205,2206,2209,2212,2215],{"class":663,"line":1133},[661,2207,2208],{"class":671},"  compteur ",[661,2210,2211],{"class":667},"+=",[661,2213,2214],{"class":678}," 1",[661,2216,785],{"class":671},[661,2218,2219,2221,2223,2225,2228,2231,2233],{"class":663,"line":1146},[661,2220,1260],{"class":671},[661,2222,1263],{"class":1086},[661,2224,1090],{"class":671},[661,2226,2227],{"class":781},"`Compteur = ${",[661,2229,2230],{"class":671},"compteur",[661,2232,1520],{"class":781},[661,2234,1096],{"class":671},[661,2236,2237],{"class":663,"line":1282},[661,2238,2239],{"class":671},"}\n",[661,2241,2242,2245,2247,2249,2251],{"class":663,"line":1287},[661,2243,2244],{"class":671},"btn.",[661,2246,1117],{"class":1086},[661,2248,1090],{"class":671},[661,2250,1122],{"class":781},[661,2252,2253],{"class":671},", incrementer);\n",[661,2255,2256],{"class":663,"line":1293},[661,2257,1102],{"emptyLinePlaceholder":1101},[661,2259,2260],{"class":663,"line":1985},[661,2261,2262],{"class":685},"\u002F\u002F Plus tard : on retire le compteur et on installe autre chose\n",[661,2264,2265,2267,2270],{"class":663,"line":1990},[661,2266,1127],{"class":667},[661,2268,2269],{"class":1086}," direBonjour",[661,2271,1130],{"class":671},[661,2273,2274,2276,2278,2281],{"class":663,"line":1996},[661,2275,1136],{"class":1086},[661,2277,1090],{"class":671},[661,2279,2280],{"class":781},"\"Bonjour !\"",[661,2282,1096],{"class":671},[661,2284,2285],{"class":663,"line":2017},[661,2286,2239],{"class":671},[661,2288,2289,2291,2294,2296,2298],{"class":663,"line":2026},[661,2290,2244],{"class":671},[661,2292,2293],{"class":1086},"removeEventListener",[661,2295,1090],{"class":671},[661,2297,1122],{"class":781},[661,2299,2253],{"class":671},[661,2301,2302,2304,2306,2308,2310],{"class":663,"line":2051},[661,2303,2244],{"class":671},[661,2305,1117],{"class":1086},[661,2307,1090],{"class":671},[661,2309,1122],{"class":781},[661,2311,2312],{"class":671},", direBonjour);\n",[599,2314,2315,2316,2319,2320,937],{},"Deux conditions pour ",[603,2317,2318],{},"retirer"," un écouteur avec ",[658,2321,2293],{},[1154,2323,2324,2331],{},[1157,2325,2326,2327,2330],{},"Passer ",[603,2328,2329],{},"exactement la même fonction"," que celle attachée (donc avoir gardé\nune référence — pas une fonction anonyme).",[1157,2332,2333,2334,636],{},"Passer le ",[603,2335,2336],{},"même nom d'événement",[983,2338,2339],{},[599,2340,2341,2342,2345,2346,2349,2350,2353],{},"Si vous avez attaché un écouteur via ",[658,2343,2344],{},"addEventListener(\"click\", function() { … })"," (fonction ",[603,2347,2348],{},"anonyme","), vous ne pourrez ",[603,2351,2352],{},"jamais"," le retirer. Pour\npouvoir supprimer, nommer la fonction et garder sa référence.",[1042,2355],{},[594,2357,2359],{"id":2358},"le-bouillonnement-dévénement-notion-sensibilisée","Le bouillonnement d'événement (notion sensibilisée)",[599,2361,2362,2363,2366,2367,2370,2371,2373,2374,2373,2376,2373,2379,2382,2383,1058,2386,2389],{},"Quand vous cliquez sur un ",[658,2364,2365],{},"\u003Cspan>"," à l'intérieur d'un ",[658,2368,2369],{},"\u003Cbutton>",", l'événement\n« remonte » vers les parents : ",[658,2372,661],{}," → ",[658,2375,1298],{},[658,2377,2378],{},"body",[658,2380,2381],{},"document",". C'est\nle ",[603,2384,2385],{},"bouillonnement",[1034,2387,2388],{},"bubbling","). Un écouteur attaché à un parent reçoit\ndonc les clics sur ses enfants.",[651,2391,2393],{"className":1204,"code":2392,"language":1206,"meta":656,"style":656},"\u003Cdiv id=\"parent\">\n  \u003Cbutton id=\"enfant\">Cliquez\u003C\u002Fbutton>\n\u003C\u002Fdiv>\n",[658,2394,2395,2411,2432],{"__ignoreMap":656},[661,2396,2397,2399,2402,2404,2406,2409],{"class":663,"line":664},[661,2398,1218],{"class":671},[661,2400,2401],{"class":1221},"div",[661,2403,1914],{"class":1086},[661,2405,675],{"class":671},[661,2407,2408],{"class":781},"\"parent\"",[661,2410,1238],{"class":671},[661,2412,2413,2416,2418,2420,2422,2425,2428,2430],{"class":663,"line":689},[661,2414,2415],{"class":671},"  \u003C",[661,2417,1298],{"class":1221},[661,2419,1914],{"class":1086},[661,2421,675],{"class":671},[661,2423,2424],{"class":781},"\"enfant\"",[661,2426,2427],{"class":671},">Cliquez\u003C\u002F",[661,2429,1298],{"class":1221},[661,2431,1238],{"class":671},[661,2433,2434,2436,2438],{"class":663,"line":710},[661,2435,1275],{"class":671},[661,2437,2401],{"class":1221},[661,2439,1238],{"class":671},[651,2441,2443],{"className":653,"code":2442,"language":655,"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",[658,2444,2445,2469,2482,2486,2510,2523,2527,2532],{"__ignoreMap":656},[661,2446,2447,2449,2451,2453,2455,2457,2459,2461,2463,2465,2467],{"class":663,"line":664},[661,2448,1743],{"class":671},[661,2450,1087],{"class":1086},[661,2452,1090],{"class":671},[661,2454,2408],{"class":781},[661,2456,1037],{"class":671},[661,2458,1117],{"class":1086},[661,2460,1090],{"class":671},[661,2462,1122],{"class":781},[661,2464,729],{"class":671},[661,2466,1127],{"class":667},[661,2468,1130],{"class":671},[661,2470,2471,2473,2475,2477,2480],{"class":663,"line":689},[661,2472,1260],{"class":671},[661,2474,1263],{"class":1086},[661,2476,1090],{"class":671},[661,2478,2479],{"class":781},"\"Clic vu par le parent\"",[661,2481,1096],{"class":671},[661,2483,2484],{"class":663,"line":710},[661,2485,1149],{"class":671},[661,2487,2488,2490,2492,2494,2496,2498,2500,2502,2504,2506,2508],{"class":663,"line":1105},[661,2489,1743],{"class":671},[661,2491,1087],{"class":1086},[661,2493,1090],{"class":671},[661,2495,2424],{"class":781},[661,2497,1037],{"class":671},[661,2499,1117],{"class":1086},[661,2501,1090],{"class":671},[661,2503,1122],{"class":781},[661,2505,729],{"class":671},[661,2507,1127],{"class":667},[661,2509,1130],{"class":671},[661,2511,2512,2514,2516,2518,2521],{"class":663,"line":1111},[661,2513,1260],{"class":671},[661,2515,1263],{"class":1086},[661,2517,1090],{"class":671},[661,2519,2520],{"class":781},"\"Clic vu par le bouton\"",[661,2522,1096],{"class":671},[661,2524,2525],{"class":663,"line":1133},[661,2526,1149],{"class":671},[661,2528,2529],{"class":663,"line":1146},[661,2530,2531],{"class":685},"\u002F\u002F Cliquer sur le bouton affiche les deux messages,\n",[661,2533,2534],{"class":663,"line":1282},[661,2535,2536],{"class":685},"\u002F\u002F le bouton en premier.\n",[599,2538,2539,2540,636],{},"Pour stopper la remontée, ",[658,2541,2542],{},"event.stopPropagation()",[1042,2544],{},[594,2546,2548],{"id":2547},"cas-particuliers-et-pièges","Cas particuliers et pièges",[1588,2550,2551,2586,2598],{},[1157,2552,2553,2556,2557,2560,2561,2563,2564,2566,2567,2569,2570,2572,2573,2575,2576,2579,2580,2582,2583,636],{},[603,2554,2555],{},"Le script chargé trop tôt"," : si le ",[658,2558,2559],{},"\u003Cscript>"," est dans le ",[658,2562,1333],{}," sans\n",[658,2565,1337],{},", il s'exécute avant que les éléments HTML existent. ",[658,2568,1087],{},"\nretournera ",[658,2571,728],{},". Solutions : placer ",[658,2574,2559],{}," en fin de ",[658,2577,2578],{},"\u003Cbody>",", ou\nutiliser ",[658,2581,1337],{},", ou écouter ",[658,2584,2585],{},"DOMContentLoaded",[1157,2587,2588,2593,2594,2597],{},[603,2589,2590,2592],{},[658,2591,1435],{}," non utilisé"," : il faut tout de même le déclarer dans la signature\nde la fonction (",[658,2595,2596],{},"function(event) { … }",") si on veut y accéder.",[1157,2599,2600,1020,2603,2606],{},[603,2601,2602],{},"Fonctions fléchées",[658,2604,2605],{},"() => { … }"," fonctionne aussi comme écouteur, et\nest aujourd'hui souvent préférée. Comportement identique pour ce chapitre.",[594,2608,2610],{"id":2609},"pour-aller-plus-loin","Pour aller plus loin",[599,2612,2613,2614,2617],{},"Vous savez désormais détecter qu'un clic a eu lieu. Le cours suivant\n(manipulation du DOM) vous apprendra à ",[603,2615,2616],{},"transformer la page"," en réaction —\nc'est cette combinaison événement + modification du DOM qui produit\nl'interactivité moderne.",[2619,2620,2621],"style",{},"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":689,"depth":689,"links":2623},[2624,2625,2626,2627,2628,2629,2630,2631,2632,2633,2634],{"id":596,"depth":689,"text":597},{"id":639,"depth":689,"text":640},{"id":1046,"depth":689,"text":1047},{"id":1197,"depth":689,"text":1198},{"id":1343,"depth":689,"text":1344},{"id":1641,"depth":689,"text":1642},{"id":1859,"depth":689,"text":1860},{"id":2118,"depth":689,"text":2119},{"id":2358,"depth":689,"text":2359},{"id":2547,"depth":689,"text":2548},{"id":2609,"depth":689,"text":2610},"Modèle réactif d'une page Web — attacher des écouteurs d'événements souris et clavier en JavaScript pour rendre l'interface vivante.",null,"md",{},[2640,2644],{"slug":1615,"kind":2641,"question":1621,"choices":2642,"correct":1614,"multi":2643,"explanation":656},"qcm",[1628,1117,1633,1636],false,{"slug":2092,"kind":2641,"question":2097,"choices":2645,"correct":2091,"multi":2643,"explanation":656},[2104,2107,2110,2113],{"title":343,"description":2635},"5WTywSWVy2i-FqCRgNWW5-qHY3Rs7NyJyG7YwVI-5mU",{"id":2649,"title":2650,"bo":2651,"body":2652,"description":3034,"eval":2636,"extension":2637,"labo":2636,"meta":3035,"navigation":2643,"path":3036,"quizzes":3037,"readingTime":664,"seo":3038,"stem":3039,"tp":2636,"__hash__":3040},"coursMemo\u002F1.nsi-1ere\u002Fpe-ihm-web\u002F3.evenements-js.memo.md","Événements JavaScript — l'essentiel",[588,589],{"type":591,"value":2653,"toc":3021},[2654,2658,2666,2670,2697,2701,2706,2733,2737,2749,2755,2854,2858,2915,2919,2953,2957,3018],[594,2655,2657],{"id":2656},"en-une-phrase","En une phrase",[599,2659,2660],{},[603,2661,2662,2663,2665],{},"Un écouteur d'événement (",[658,2664,1117],{},") attache une fonction à un\nélément HTML pour qu'elle s'exécute lors d'un événement précis (clic, frappe,\nmouvement…).",[594,2667,2669],{"id":2668},"à-mémoriser","À mémoriser",[1588,2671,2672,2678,2683,2692],{},[1157,2673,2674,2675,636],{},"Syntaxe : ",[658,2676,2677],{},"element.addEventListener(\"nomEvenement\", fonction)",[1157,2679,1430,2680,2682],{},[658,2681,1435],{}," passé à la fonction porte les détails (touche pressée,\nposition de la souris, élément cible…).",[1157,2684,2685,2687,2688,2691],{},[658,2686,2293],{}," exige ",[603,2689,2690],{},"la même fonction nommée"," que celle attachée\n— impossible avec une fonction anonyme.",[1157,2693,2694,2696],{},[658,2695,1853],{}," annule l'action par défaut (soumission de\nformulaire, raccourci navigateur…).",[594,2698,2700],{"id":2699},"événements-à-connaître","Événements à connaître",[2702,2703,2705],"h3",{"id":2704},"souris","Souris",[1588,2707,2708,2714,2722,2728],{},[1157,2709,2710,729,2712],{},[658,2711,1368],{},[658,2713,1378],{},[1157,2715,2716,729,2718,729,2720],{},[658,2717,1388],{},[658,2719,1391],{},[658,2721,1401],{},[1157,2723,2724,729,2726],{},[658,2725,1411],{},[658,2727,1414],{},[1157,2729,2730,2732],{},[658,2731,1424],{}," (clic droit)",[2702,2734,2736],{"id":2735},"clavier","Clavier",[1588,2738,2739,2744],{},[1157,2740,2741,2743],{},[658,2742,1665],{}," — touche enfoncée",[1157,2745,2746,2748],{},[658,2747,1675],{}," — touche relâchée",[594,2750,2752,2753],{"id":2751},"propriétés-utiles-de-event","Propriétés utiles de ",[658,2754,1435],{},[838,2756,2757,2770],{},[841,2758,2759],{},[844,2760,2761,2764,2767],{},[847,2762,2763],{},"Événement",[847,2765,2766],{},"Propriété",[847,2768,2769],{},"Valeur",[854,2771,2772,2785,2796,2812,2825,2842],{},[844,2773,2774,2776,2782],{},[859,2775,2705],{},[859,2777,2778,729,2780],{},[658,2779,1594],{},[658,2781,1597],{},[859,2783,2784],{},"Coordonnées dans la fenêtre",[844,2786,2787,2789,2793],{},[859,2788,2705],{},[859,2790,2791],{},[658,2792,1609],{},[859,2794,2795],{},"0 gauche, 1 milieu, 2 droit",[844,2797,2798,2800,2804],{},[859,2799,2736],{},[859,2801,2802],{},[658,2803,1690],{},[859,2805,2806,2807,729,2809,2811],{},"Touche lisible (",[658,2808,1694],{},[658,2810,1700],{},")",[844,2813,2814,2816,2820],{},[859,2815,2736],{},[859,2817,2818],{},[658,2819,1708],{},[859,2821,2822,2823,2811],{},"Touche physique (",[658,2824,1712],{},[844,2826,2827,2829,2839],{},[859,2828,2736],{},[859,2830,2831,729,2833,729,2836],{},[658,2832,1723],{},[658,2834,2835],{},".shiftKey",[658,2837,2838],{},".altKey",[859,2840,2841],{},"Booléens modificateurs",[844,2843,2844,2847,2851],{},[859,2845,2846],{},"Tout",[859,2848,2849],{},[658,2850,1603],{},[859,2852,2853],{},"Élément concerné",[594,2855,2857],{"id":2856},"à-savoir-reconnaître","À savoir reconnaître",[838,2859,2860,2870],{},[841,2861,2862],{},[844,2863,2864,2867],{},[847,2865,2866],{},"Situation",[847,2868,2869],{},"À utiliser",[854,2871,2872,2882,2896,2905],{},[844,2873,2874,2877],{},[859,2875,2876],{},"Réagir au clic d'un bouton",[859,2878,2879],{},[658,2880,2881],{},"addEventListener(\"click\", …)",[844,2883,2884,2887],{},[859,2885,2886],{},"Détecter la touche Entrée",[859,2888,2889,2892,2893],{},[658,2890,2891],{},"addEventListener(\"keydown\", …)"," + ",[658,2894,2895],{},"event.key === \"Enter\"",[844,2897,2898,2901],{},[859,2899,2900],{},"Bloquer la soumission d'un formulaire",[859,2902,2903],{},[658,2904,1853],{},[844,2906,2907,2910],{},[859,2908,2909],{},"Retirer un écouteur",[859,2911,2912,2914],{},[658,2913,2293],{}," + même fonction nommée",[594,2916,2918],{"id":2917},"pièges-courants","Pièges courants",[1588,2920,2921,2937,2940],{},[1157,2922,2923,2924,2926,2927,2929,2930,2932,2933,2575,2935,636],{},"Script chargé avant le HTML → ",[658,2925,1087],{}," retourne ",[658,2928,728],{},". Utiliser\n",[658,2931,1337],{}," ou placer le ",[658,2934,2559],{},[658,2936,2578],{},[1157,2938,2939],{},"Fonction anonyme → impossible à retirer ensuite.",[1157,2941,2942,2944,2945,2948,2949,2952],{},[658,2943,2369],{}," sans ",[658,2946,2947],{},"type=\"button\""," dans un ",[658,2950,2951],{},"\u003Cform>"," → soumet le formulaire.",[594,2954,2956],{"id":2955},"syntaxe-js-de-référence","Syntaxe JS de référence",[651,2958,2960],{"className":653,"code":2959,"language":655,"meta":656,"style":656},"const btn = document.getElementById(\"monBouton\");\nbtn.addEventListener(\"click\", function(event) {\n  console.log(\"Clic à\", event.clientX, event.clientY);\n});\n",[658,2961,2962,2980,3000,3014],{"__ignoreMap":656},[661,2963,2964,2966,2968,2970,2972,2974,2976,2978],{"class":663,"line":664},[661,2965,692],{"class":667},[661,2967,2159],{"class":678},[661,2969,698],{"class":667},[661,2971,1083],{"class":671},[661,2973,1087],{"class":1086},[661,2975,1090],{"class":671},[661,2977,1093],{"class":781},[661,2979,1096],{"class":671},[661,2981,2982,2984,2986,2988,2990,2992,2994,2996,2998],{"class":663,"line":689},[661,2983,2244],{"class":671},[661,2985,1117],{"class":1086},[661,2987,1090],{"class":671},[661,2989,1122],{"class":781},[661,2991,729],{"class":671},[661,2993,1127],{"class":667},[661,2995,1090],{"class":671},[661,2997,1435],{"class":1486},[661,2999,1489],{"class":671},[661,3001,3002,3004,3006,3008,3011],{"class":663,"line":710},[661,3003,1260],{"class":671},[661,3005,1263],{"class":1086},[661,3007,1090],{"class":671},[661,3009,3010],{"class":781},"\"Clic à\"",[661,3012,3013],{"class":671},", event.clientX, event.clientY);\n",[661,3015,3016],{"class":663,"line":1105},[661,3017,1149],{"class":671},[2619,3019,3020],{},"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":689,"depth":689,"links":3022},[3023,3024,3025,3029,3031,3032,3033],{"id":2656,"depth":689,"text":2657},{"id":2668,"depth":689,"text":2669},{"id":2699,"depth":689,"text":2700,"children":3026},[3027,3028],{"id":2704,"depth":710,"text":2705},{"id":2735,"depth":710,"text":2736},{"id":2751,"depth":689,"text":3030},"Propriétés utiles de event",{"id":2856,"depth":689,"text":2857},{"id":2917,"depth":689,"text":2918},{"id":2955,"depth":689,"text":2956},"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":2650,"description":3034},"1.nsi-1ere\u002Fpe-ihm-web\u002F3.evenements-js.memo","WPp-EGw3a028dYR95CPJIE0CPKM-qBYyYvJ5w-p5PPU",{"id":3042,"title":3043,"body":3044,"description":3525,"extension":2637,"meta":3526,"navigation":2643,"path":3527,"seo":3528,"stem":3529,"__hash__":3530},"coursSlides\u002F1.nsi-1ere\u002Fpe-ihm-web\u002F3.evenements-js.slides.md","Événements JavaScript — diapositives",{"type":591,"value":3045,"toc":3523},[3046,3050,3053,3055,3059,3068,3088,3090,3094,3117,3119,3123,3146,3201,3203,3207,3235,3237,3243,3281,3298,3300,3302,3312,3370,3372,3376,3425,3430,3432,3436,3484,3491,3493,3496,3503,3506,3508,3512,3520],[3047,3048,343],"h1",{"id":3049},"événements-javascript",[599,3051,3052],{},"Rendre une page Web vivante : réagir aux clics, aux touches, aux mouvements.",[1042,3054],{},[3047,3056,3058],{"id":3057},"modèle-événementiel","Modèle événementiel",[599,3060,3061,3062,3064,3065,3067],{},"Le navigateur diffuse des ",[603,3063,617],{},".\nVotre JS y attache des ",[603,3066,625],{}," (fonctions).",[651,3069,3071],{"className":653,"code":3070,"language":655,"meta":656,"style":656},"element.addEventListener(\"nom\", fonction);\n",[658,3072,3073],{"__ignoreMap":656},[661,3074,3075,3078,3080,3082,3085],{"class":663,"line":664},[661,3076,3077],{"class":671},"element.",[661,3079,1117],{"class":1086},[661,3081,1090],{"class":671},[661,3083,3084],{"class":781},"\"nom\"",[661,3086,3087],{"class":671},", fonction);\n",[1042,3089],{},[3047,3091,3093],{"id":3092},"trois-ingrédients","Trois ingrédients",[1154,3095,3096,3103,3112],{},[1157,3097,1159,3098,1058,3100,2811],{},[603,3099,1162],{},[658,3101,3102],{},"document.getElementById(…)",[1157,3104,1159,3105,1058,3107,729,3109,3111],{},[603,3106,1168],{},[658,3108,1122],{},[658,3110,1174],{},"…)",[1157,3113,1178,3114,3116],{},[603,3115,1181],{}," à exécuter",[1042,3118],{},[3047,3120,3122],{"id":3121},"exemple-minimal","Exemple minimal",[651,3124,3126],{"className":1204,"code":3125,"language":1206,"meta":656,"style":656},"\u003Cbutton id=\"b\">Cliquez\u003C\u002Fbutton>\n",[658,3127,3128],{"__ignoreMap":656},[661,3129,3130,3132,3134,3136,3138,3140,3142,3144],{"class":663,"line":664},[661,3131,1218],{"class":671},[661,3133,1298],{"class":1221},[661,3135,1914],{"class":1086},[661,3137,675],{"class":671},[661,3139,1919],{"class":781},[661,3141,2427],{"class":671},[661,3143,1298],{"class":1221},[661,3145,1238],{"class":671},[651,3147,3149],{"className":653,"code":3148,"language":655,"meta":656,"style":656},"const b = document.getElementById(\"b\");\nb.addEventListener(\"click\", function() {\n  alert(\"Bouton cliqué !\");\n});\n",[658,3150,3151,3170,3187,3197],{"__ignoreMap":656},[661,3152,3153,3155,3158,3160,3162,3164,3166,3168],{"class":663,"line":664},[661,3154,692],{"class":667},[661,3156,3157],{"class":678}," b",[661,3159,698],{"class":667},[661,3161,1083],{"class":671},[661,3163,1087],{"class":1086},[661,3165,1090],{"class":671},[661,3167,1919],{"class":781},[661,3169,1096],{"class":671},[661,3171,3172,3175,3177,3179,3181,3183,3185],{"class":663,"line":689},[661,3173,3174],{"class":671},"b.",[661,3176,1117],{"class":1086},[661,3178,1090],{"class":671},[661,3180,1122],{"class":781},[661,3182,729],{"class":671},[661,3184,1127],{"class":667},[661,3186,1130],{"class":671},[661,3188,3189,3191,3193,3195],{"class":663,"line":710},[661,3190,1136],{"class":1086},[661,3192,1090],{"class":671},[661,3194,1141],{"class":781},[661,3196,1096],{"class":671},[661,3198,3199],{"class":663,"line":1105},[661,3200,1149],{"class":671},[1042,3202],{},[3047,3204,3206],{"id":3205},"événements-souris","Événements souris",[1588,3208,3209,3215,3221,3225,3231],{},[1157,3210,3211,729,3213],{},[658,3212,1368],{},[658,3214,1378],{},[1157,3216,3217,729,3219],{},[658,3218,1388],{},[658,3220,1391],{},[1157,3222,3223],{},[658,3224,1401],{},[1157,3226,3227,729,3229],{},[658,3228,1411],{},[658,3230,1414],{},[1157,3232,3233,2732],{},[658,3234,1424],{},[1042,3236],{},[3047,3238,1430,3240,3242],{"id":3239},"lobjet-event-souris",[658,3241,1435],{}," — souris",[651,3244,3246],{"className":653,"code":3245,"language":655,"meta":656,"style":656},"zone.addEventListener(\"mousemove\", function(event) {\n  console.log(event.clientX, event.clientY);\n});\n",[658,3247,3248,3268,3277],{"__ignoreMap":656},[661,3249,3250,3252,3254,3256,3258,3260,3262,3264,3266],{"class":663,"line":664},[661,3251,1470],{"class":671},[661,3253,1117],{"class":1086},[661,3255,1090],{"class":671},[661,3257,1477],{"class":781},[661,3259,729],{"class":671},[661,3261,1127],{"class":667},[661,3263,1090],{"class":671},[661,3265,1435],{"class":1486},[661,3267,1489],{"class":671},[661,3269,3270,3272,3274],{"class":663,"line":689},[661,3271,1260],{"class":671},[661,3273,1263],{"class":1086},[661,3275,3276],{"class":671},"(event.clientX, event.clientY);\n",[661,3278,3279],{"class":663,"line":710},[661,3280,1149],{"class":671},[1588,3282,3283,3289,3294],{},[1157,3284,3285,729,3287],{},[658,3286,1594],{},[658,3288,1597],{},[1157,3290,3291,3293],{},[658,3292,1609],{}," (0 \u002F 1 \u002F 2)",[1157,3295,3296],{},[658,3297,1603],{},[1042,3299],{},[3047,3301,1642],{"id":1641},[1588,3303,3304,3308],{},[1157,3305,3306,2743],{},[658,3307,1665],{},[1157,3309,3310,2748],{},[658,3311,1675],{},[651,3313,3315],{"className":653,"code":3314,"language":655,"meta":656,"style":656},"document.addEventListener(\"keydown\", function(event) {\n  if (event.key === \"Enter\") {\n    console.log(\"Entrée pressée\");\n  }\n});\n",[658,3316,3317,3337,3349,3362,3366],{"__ignoreMap":656},[661,3318,3319,3321,3323,3325,3327,3329,3331,3333,3335],{"class":663,"line":664},[661,3320,1743],{"class":671},[661,3322,1117],{"class":1086},[661,3324,1090],{"class":671},[661,3326,1174],{"class":781},[661,3328,729],{"class":671},[661,3330,1127],{"class":667},[661,3332,1090],{"class":671},[661,3334,1435],{"class":1486},[661,3336,1489],{"class":671},[661,3338,3339,3341,3343,3345,3347],{"class":663,"line":689},[661,3340,1764],{"class":667},[661,3342,1767],{"class":671},[661,3344,993],{"class":667},[661,3346,1772],{"class":781},[661,3348,1489],{"class":671},[661,3350,3351,3353,3355,3357,3360],{"class":663,"line":710},[661,3352,1779],{"class":671},[661,3354,1263],{"class":1086},[661,3356,1090],{"class":671},[661,3358,3359],{"class":781},"\"Entrée pressée\"",[661,3361,1096],{"class":671},[661,3363,3364],{"class":663,"line":1105},[661,3365,1793],{"class":671},[661,3367,3368],{"class":663,"line":1111},[661,3369,1149],{"class":671},[1042,3371],{},[3047,3373,3375],{"id":3374},"combinaisons-de-touches","Combinaisons de touches",[651,3377,3379],{"className":653,"code":3378,"language":655,"meta":656,"style":656},"if (event.ctrlKey && event.key === \"s\") {\n  event.preventDefault();\n  console.log(\"Ctrl+S intercepté\");\n}\n",[658,3380,3381,3398,3408,3421],{"__ignoreMap":656},[661,3382,3383,3386,3388,3390,3392,3394,3396],{"class":663,"line":664},[661,3384,3385],{"class":667},"if",[661,3387,1800],{"class":671},[661,3389,1803],{"class":667},[661,3391,1806],{"class":671},[661,3393,993],{"class":667},[661,3395,1811],{"class":781},[661,3397,1489],{"class":671},[661,3399,3400,3403,3405],{"class":663,"line":689},[661,3401,3402],{"class":671},"  event.",[661,3404,1834],{"class":1086},[661,3406,3407],{"class":671},"();\n",[661,3409,3410,3412,3414,3416,3419],{"class":663,"line":710},[661,3411,1260],{"class":671},[661,3413,1263],{"class":1086},[661,3415,1090],{"class":671},[661,3417,3418],{"class":781},"\"Ctrl+S intercepté\"",[661,3420,1096],{"class":671},[661,3422,3423],{"class":663,"line":1105},[661,3424,2239],{"class":671},[599,3426,3427,3429],{},[658,3428,1853],{}," bloque l'action par défaut du navigateur.",[1042,3431],{},[3047,3433,3435],{"id":3434},"modifier-la-réaction-dun-bouton","Modifier la réaction d'un bouton",[651,3437,3439],{"className":653,"code":3438,"language":655,"meta":656,"style":656},"btn.addEventListener(\"click\", reactionA);\n\u002F\u002F puis plus tard\nbtn.removeEventListener(\"click\", reactionA);\nbtn.addEventListener(\"click\", reactionB);\n",[658,3440,3441,3454,3459,3471],{"__ignoreMap":656},[661,3442,3443,3445,3447,3449,3451],{"class":663,"line":664},[661,3444,2244],{"class":671},[661,3446,1117],{"class":1086},[661,3448,1090],{"class":671},[661,3450,1122],{"class":781},[661,3452,3453],{"class":671},", reactionA);\n",[661,3455,3456],{"class":663,"line":689},[661,3457,3458],{"class":685},"\u002F\u002F puis plus tard\n",[661,3460,3461,3463,3465,3467,3469],{"class":663,"line":710},[661,3462,2244],{"class":671},[661,3464,2293],{"class":1086},[661,3466,1090],{"class":671},[661,3468,1122],{"class":781},[661,3470,3453],{"class":671},[661,3472,3473,3475,3477,3479,3481],{"class":663,"line":1105},[661,3474,2244],{"class":671},[661,3476,1117],{"class":1086},[661,3478,1090],{"class":671},[661,3480,1122],{"class":781},[661,3482,3483],{"class":671},", reactionB);\n",[599,3485,3486,3487,3490],{},"Fonction ",[603,3488,3489],{},"nommée"," obligatoire pour pouvoir retirer.",[1042,3492],{},[3047,3494,3495],{"id":2385},"Bouillonnement",[3497,3498],"illustration",{"alt":3499,"kind":3500,"src":3501,"svg":3502},"Un span imbriqué dans un button, lui-même dans un div ; le clic sur le span remonte vers button puis div","schema","\u002Fillustrations\u002F1.nsi-1ere\u002Fpe-ihm-web\u002Fbubbling.svg","\u003Csvg class=\"illustration-svg\" xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" viewBox=\"0 0 420 280\" role=\"img\" aria-label=\"Bouillonnement des événements : un span imbriqué dans un button, lui-même dans un div. Le clic sur le span fait remonter l'événement vers le button puis le div.\">\n  \u003Ctitle>Bouillonnement (bubbling) d'un événement\u003C\u002Ftitle>\n  \u003Cstyle>\n    .bb-svg { font-family: Geist, Inter, system-ui, sans-serif; }\n    .bb-div   { fill: var(--diagram-surface-alt); stroke: var(--diagram-border); stroke-width: 1.5; }\n    .bb-btn   { fill: var(--diagram-surface); stroke: var(--diagram-border); stroke-width: 1.5; }\n    .bb-span  { fill: var(--diagram-node-bg); stroke: var(--diagram-node-border); stroke-width: 1.5; }\n    .bb-tag   { fill: var(--diagram-line); font-family: 'JetBrains Mono', monospace; font-size: 12px; }\n    .bb-spantag { fill: var(--diagram-text); font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; }\n    .bb-arrow-line { stroke: var(--diagram-node-border); stroke-width: 2.5; fill: none; }\n    .bb-arrow-head { fill: var(--diagram-node-border); }\n    .bb-step  { fill: var(--diagram-text); font-size: 12px; }\n    .bb-click { fill: var(--diagram-text); font-size: 12px; font-weight: 600; }\n  \u003C\u002Fstyle>\n\n  \u003Cg class=\"bb-svg\">\n    \u003C!-- div (extérieur) -->\n    \u003Crect x=\"30\" y=\"24\" width=\"250\" height=\"232\" rx=\"6\" class=\"bb-div\"\u002F>\n    \u003Ctext x=\"42\" y=\"44\" class=\"bb-tag\"><div>\u003C\u002Ftext>\n\n    \u003C!-- button (milieu) -->\n    \u003Crect x=\"62\" y=\"72\" width=\"186\" height=\"156\" rx=\"5\" class=\"bb-btn\"\u002F>\n    \u003Ctext x=\"74\" y=\"92\" class=\"bb-tag\"><button>\u003C\u002Ftext>\n\n    \u003C!-- span (intérieur, cible du clic) -->\n    \u003Crect x=\"94\" y=\"120\" width=\"122\" height=\"80\" rx=\"4\" class=\"bb-span\"\u002F>\n    \u003Ctext x=\"106\" y=\"140\" class=\"bb-spantag\"><span>\u003C\u002Ftext>\n    \u003Ctext x=\"155\" y=\"176\" text-anchor=\"middle\" class=\"bb-click\">clic\u003C\u002Ftext>\n\n    \u003C!-- flèche de remontée span -> button -> div -->\n    \u003Cpath class=\"bb-arrow-line\" d=\"M 332 196 L 332 60\"\u002F>\n    \u003Cpolygon class=\"bb-arrow-head\" points=\"332,40 325,56 339,56\"\u002F>\n\n    \u003C!-- étapes le long de la flèche -->\n    \u003Ctext x=\"346\" y=\"200\" class=\"bb-step\">span\u003C\u002Ftext>\n    \u003Ctext x=\"346\" y=\"138\" class=\"bb-step\">button\u003C\u002Ftext>\n    \u003Ctext x=\"346\" y=\"76\" class=\"bb-step\">div\u003C\u002Ftext>\n\n    \u003C!-- amorce de la flèche partant du span -->\n    \u003Cpath class=\"bb-arrow-line\" d=\"M 216 192 L 332 192\" stroke-dasharray=\"0\"\u002F>\n  \u003C\u002Fg>\n\u003C\u002Fsvg>\n",[599,3504,3505],{},"L'événement remonte : enfant → parent → document.",[1042,3507],{},[3047,3509,3511],{"id":3510},"à-retenir","À retenir",[599,3513,3514,3516,3517],{},[658,3515,1117],{}," est le mécanisme standard.\n",[603,3518,3519],{},"Cible + nom d'événement + fonction = page réactive.",[2619,3521,3522],{},"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 .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 .sovSZ, html code.shiki .sovSZ{--shiki-light:#22863A;--shiki-default:#22863A;--shiki-dark:#85E89D}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}html pre.shiki code .sCsY4, html code.shiki .sCsY4{--shiki-light:#6A737D;--shiki-default:#6A737D;--shiki-dark:#6A737D}",{"title":656,"searchDepth":689,"depth":689,"links":3524},[],"Deck projetable pour la séance sur les événements JS.",{},"\u002Fnsi-1ere\u002Fpe-ihm-web\u002Fevenements-js.slides",{"title":3043,"description":3525},"1.nsi-1ere\u002Fpe-ihm-web\u002F3.evenements-js.slides","oVp896s6WXI28YozUuzLzdfK-XF3QeP3YXr-PlS0qs8",{"id":2649,"title":2650,"bo":3532,"body":3533,"description":3034,"eval":2636,"extension":2637,"labo":2636,"meta":3845,"navigation":2643,"path":3036,"quizzes":3846,"readingTime":664,"seo":3847,"stem":3039,"tp":2636,"__hash__":3040},[588,589],{"type":591,"value":3534,"toc":3833},[3535,3537,3543,3545,3565,3567,3569,3595,3597,3607,3611,3697,3699,3745,3747,3771,3773,3831],[594,3536,2657],{"id":2656},[599,3538,3539],{},[603,3540,2662,3541,2665],{},[658,3542,1117],{},[594,3544,2669],{"id":2668},[1588,3546,3547,3551,3555,3561],{},[1157,3548,2674,3549,636],{},[658,3550,2677],{},[1157,3552,1430,3553,2682],{},[658,3554,1435],{},[1157,3556,3557,2687,3559,2691],{},[658,3558,2293],{},[603,3560,2690],{},[1157,3562,3563,2696],{},[658,3564,1853],{},[594,3566,2700],{"id":2699},[2702,3568,2705],{"id":2704},[1588,3570,3571,3577,3585,3591],{},[1157,3572,3573,729,3575],{},[658,3574,1368],{},[658,3576,1378],{},[1157,3578,3579,729,3581,729,3583],{},[658,3580,1388],{},[658,3582,1391],{},[658,3584,1401],{},[1157,3586,3587,729,3589],{},[658,3588,1411],{},[658,3590,1414],{},[1157,3592,3593,2732],{},[658,3594,1424],{},[2702,3596,2736],{"id":2735},[1588,3598,3599,3603],{},[1157,3600,3601,2743],{},[658,3602,1665],{},[1157,3604,3605,2748],{},[658,3606,1675],{},[594,3608,2752,3609],{"id":2751},[658,3610,1435],{},[838,3612,3613,3623],{},[841,3614,3615],{},[844,3616,3617,3619,3621],{},[847,3618,2763],{},[847,3620,2766],{},[847,3622,2769],{},[854,3624,3625,3637,3647,3661,3673,3687],{},[844,3626,3627,3629,3635],{},[859,3628,2705],{},[859,3630,3631,729,3633],{},[658,3632,1594],{},[658,3634,1597],{},[859,3636,2784],{},[844,3638,3639,3641,3645],{},[859,3640,2705],{},[859,3642,3643],{},[658,3644,1609],{},[859,3646,2795],{},[844,3648,3649,3651,3655],{},[859,3650,2736],{},[859,3652,3653],{},[658,3654,1690],{},[859,3656,2806,3657,729,3659,2811],{},[658,3658,1694],{},[658,3660,1700],{},[844,3662,3663,3665,3669],{},[859,3664,2736],{},[859,3666,3667],{},[658,3668,1708],{},[859,3670,2822,3671,2811],{},[658,3672,1712],{},[844,3674,3675,3677,3685],{},[859,3676,2736],{},[859,3678,3679,729,3681,729,3683],{},[658,3680,1723],{},[658,3682,2835],{},[658,3684,2838],{},[859,3686,2841],{},[844,3688,3689,3691,3695],{},[859,3690,2846],{},[859,3692,3693],{},[658,3694,1603],{},[859,3696,2853],{},[594,3698,2857],{"id":2856},[838,3700,3701,3709],{},[841,3702,3703],{},[844,3704,3705,3707],{},[847,3706,2866],{},[847,3708,2869],{},[854,3710,3711,3719,3729,3737],{},[844,3712,3713,3715],{},[859,3714,2876],{},[859,3716,3717],{},[658,3718,2881],{},[844,3720,3721,3723],{},[859,3722,2886],{},[859,3724,3725,2892,3727],{},[658,3726,2891],{},[658,3728,2895],{},[844,3730,3731,3733],{},[859,3732,2900],{},[859,3734,3735],{},[658,3736,1853],{},[844,3738,3739,3741],{},[859,3740,2909],{},[859,3742,3743,2914],{},[658,3744,2293],{},[594,3746,2918],{"id":2917},[1588,3748,3749,3761,3763],{},[1157,3750,2923,3751,2926,3753,2929,3755,2932,3757,2575,3759,636],{},[658,3752,1087],{},[658,3754,728],{},[658,3756,1337],{},[658,3758,2559],{},[658,3760,2578],{},[1157,3762,2939],{},[1157,3764,3765,2944,3767,2948,3769,2952],{},[658,3766,2369],{},[658,3768,2947],{},[658,3770,2951],{},[594,3772,2956],{"id":2955},[651,3774,3775],{"className":653,"code":2959,"language":655,"meta":656,"style":656},[658,3776,3777,3795,3815,3827],{"__ignoreMap":656},[661,3778,3779,3781,3783,3785,3787,3789,3791,3793],{"class":663,"line":664},[661,3780,692],{"class":667},[661,3782,2159],{"class":678},[661,3784,698],{"class":667},[661,3786,1083],{"class":671},[661,3788,1087],{"class":1086},[661,3790,1090],{"class":671},[661,3792,1093],{"class":781},[661,3794,1096],{"class":671},[661,3796,3797,3799,3801,3803,3805,3807,3809,3811,3813],{"class":663,"line":689},[661,3798,2244],{"class":671},[661,3800,1117],{"class":1086},[661,3802,1090],{"class":671},[661,3804,1122],{"class":781},[661,3806,729],{"class":671},[661,3808,1127],{"class":667},[661,3810,1090],{"class":671},[661,3812,1435],{"class":1486},[661,3814,1489],{"class":671},[661,3816,3817,3819,3821,3823,3825],{"class":663,"line":710},[661,3818,1260],{"class":671},[661,3820,1263],{"class":1086},[661,3822,1090],{"class":671},[661,3824,3010],{"class":781},[661,3826,3013],{"class":671},[661,3828,3829],{"class":663,"line":1105},[661,3830,1149],{"class":671},[2619,3832,3020],{},{"title":656,"searchDepth":689,"depth":689,"links":3834},[3835,3836,3837,3841,3842,3843,3844],{"id":2656,"depth":689,"text":2657},{"id":2668,"depth":689,"text":2669},{"id":2699,"depth":689,"text":2700,"children":3838},[3839,3840],{"id":2704,"depth":710,"text":2705},{"id":2735,"depth":710,"text":2736},{"id":2751,"depth":689,"text":3030},{"id":2856,"depth":689,"text":2857},{"id":2917,"depth":689,"text":2918},{"id":2955,"depth":689,"text":2956},{},[],{"title":2650,"description":3034},{"id":3042,"title":3043,"body":3849,"description":3525,"extension":2637,"meta":4269,"navigation":2643,"path":3527,"seo":4270,"stem":3529,"__hash__":3530},{"type":591,"value":3850,"toc":4267},[3851,3853,3855,3857,3859,3865,3881,3883,3885,3905,3907,3909,3931,3983,3985,3987,4015,4017,4021,4057,4073,4075,4077,4087,4143,4145,4147,4191,4195,4197,4199,4243,4247,4249,4251,4253,4255,4257,4259,4265],[3047,3852,343],{"id":3049},[599,3854,3052],{},[1042,3856],{},[3047,3858,3058],{"id":3057},[599,3860,3061,3861,3064,3863,3067],{},[603,3862,617],{},[603,3864,625],{},[651,3866,3867],{"className":653,"code":3070,"language":655,"meta":656,"style":656},[658,3868,3869],{"__ignoreMap":656},[661,3870,3871,3873,3875,3877,3879],{"class":663,"line":664},[661,3872,3077],{"class":671},[661,3874,1117],{"class":1086},[661,3876,1090],{"class":671},[661,3878,3084],{"class":781},[661,3880,3087],{"class":671},[1042,3882],{},[3047,3884,3093],{"id":3092},[1154,3886,3887,3893,3901],{},[1157,3888,1159,3889,1058,3891,2811],{},[603,3890,1162],{},[658,3892,3102],{},[1157,3894,1159,3895,1058,3897,729,3899,3111],{},[603,3896,1168],{},[658,3898,1122],{},[658,3900,1174],{},[1157,3902,1178,3903,3116],{},[603,3904,1181],{},[1042,3906],{},[3047,3908,3122],{"id":3121},[651,3910,3911],{"className":1204,"code":3125,"language":1206,"meta":656,"style":656},[658,3912,3913],{"__ignoreMap":656},[661,3914,3915,3917,3919,3921,3923,3925,3927,3929],{"class":663,"line":664},[661,3916,1218],{"class":671},[661,3918,1298],{"class":1221},[661,3920,1914],{"class":1086},[661,3922,675],{"class":671},[661,3924,1919],{"class":781},[661,3926,2427],{"class":671},[661,3928,1298],{"class":1221},[661,3930,1238],{"class":671},[651,3932,3933],{"className":653,"code":3148,"language":655,"meta":656,"style":656},[658,3934,3935,3953,3969,3979],{"__ignoreMap":656},[661,3936,3937,3939,3941,3943,3945,3947,3949,3951],{"class":663,"line":664},[661,3938,692],{"class":667},[661,3940,3157],{"class":678},[661,3942,698],{"class":667},[661,3944,1083],{"class":671},[661,3946,1087],{"class":1086},[661,3948,1090],{"class":671},[661,3950,1919],{"class":781},[661,3952,1096],{"class":671},[661,3954,3955,3957,3959,3961,3963,3965,3967],{"class":663,"line":689},[661,3956,3174],{"class":671},[661,3958,1117],{"class":1086},[661,3960,1090],{"class":671},[661,3962,1122],{"class":781},[661,3964,729],{"class":671},[661,3966,1127],{"class":667},[661,3968,1130],{"class":671},[661,3970,3971,3973,3975,3977],{"class":663,"line":710},[661,3972,1136],{"class":1086},[661,3974,1090],{"class":671},[661,3976,1141],{"class":781},[661,3978,1096],{"class":671},[661,3980,3981],{"class":663,"line":1105},[661,3982,1149],{"class":671},[1042,3984],{},[3047,3986,3206],{"id":3205},[1588,3988,3989,3995,4001,4005,4011],{},[1157,3990,3991,729,3993],{},[658,3992,1368],{},[658,3994,1378],{},[1157,3996,3997,729,3999],{},[658,3998,1388],{},[658,4000,1391],{},[1157,4002,4003],{},[658,4004,1401],{},[1157,4006,4007,729,4009],{},[658,4008,1411],{},[658,4010,1414],{},[1157,4012,4013,2732],{},[658,4014,1424],{},[1042,4016],{},[3047,4018,1430,4019,3242],{"id":3239},[658,4020,1435],{},[651,4022,4023],{"className":653,"code":3245,"language":655,"meta":656,"style":656},[658,4024,4025,4045,4053],{"__ignoreMap":656},[661,4026,4027,4029,4031,4033,4035,4037,4039,4041,4043],{"class":663,"line":664},[661,4028,1470],{"class":671},[661,4030,1117],{"class":1086},[661,4032,1090],{"class":671},[661,4034,1477],{"class":781},[661,4036,729],{"class":671},[661,4038,1127],{"class":667},[661,4040,1090],{"class":671},[661,4042,1435],{"class":1486},[661,4044,1489],{"class":671},[661,4046,4047,4049,4051],{"class":663,"line":689},[661,4048,1260],{"class":671},[661,4050,1263],{"class":1086},[661,4052,3276],{"class":671},[661,4054,4055],{"class":663,"line":710},[661,4056,1149],{"class":671},[1588,4058,4059,4065,4069],{},[1157,4060,4061,729,4063],{},[658,4062,1594],{},[658,4064,1597],{},[1157,4066,4067,3293],{},[658,4068,1609],{},[1157,4070,4071],{},[658,4072,1603],{},[1042,4074],{},[3047,4076,1642],{"id":1641},[1588,4078,4079,4083],{},[1157,4080,4081,2743],{},[658,4082,1665],{},[1157,4084,4085,2748],{},[658,4086,1675],{},[651,4088,4089],{"className":653,"code":3314,"language":655,"meta":656,"style":656},[658,4090,4091,4111,4123,4135,4139],{"__ignoreMap":656},[661,4092,4093,4095,4097,4099,4101,4103,4105,4107,4109],{"class":663,"line":664},[661,4094,1743],{"class":671},[661,4096,1117],{"class":1086},[661,4098,1090],{"class":671},[661,4100,1174],{"class":781},[661,4102,729],{"class":671},[661,4104,1127],{"class":667},[661,4106,1090],{"class":671},[661,4108,1435],{"class":1486},[661,4110,1489],{"class":671},[661,4112,4113,4115,4117,4119,4121],{"class":663,"line":689},[661,4114,1764],{"class":667},[661,4116,1767],{"class":671},[661,4118,993],{"class":667},[661,4120,1772],{"class":781},[661,4122,1489],{"class":671},[661,4124,4125,4127,4129,4131,4133],{"class":663,"line":710},[661,4126,1779],{"class":671},[661,4128,1263],{"class":1086},[661,4130,1090],{"class":671},[661,4132,3359],{"class":781},[661,4134,1096],{"class":671},[661,4136,4137],{"class":663,"line":1105},[661,4138,1793],{"class":671},[661,4140,4141],{"class":663,"line":1111},[661,4142,1149],{"class":671},[1042,4144],{},[3047,4146,3375],{"id":3374},[651,4148,4149],{"className":653,"code":3378,"language":655,"meta":656,"style":656},[658,4150,4151,4167,4175,4187],{"__ignoreMap":656},[661,4152,4153,4155,4157,4159,4161,4163,4165],{"class":663,"line":664},[661,4154,3385],{"class":667},[661,4156,1800],{"class":671},[661,4158,1803],{"class":667},[661,4160,1806],{"class":671},[661,4162,993],{"class":667},[661,4164,1811],{"class":781},[661,4166,1489],{"class":671},[661,4168,4169,4171,4173],{"class":663,"line":689},[661,4170,3402],{"class":671},[661,4172,1834],{"class":1086},[661,4174,3407],{"class":671},[661,4176,4177,4179,4181,4183,4185],{"class":663,"line":710},[661,4178,1260],{"class":671},[661,4180,1263],{"class":1086},[661,4182,1090],{"class":671},[661,4184,3418],{"class":781},[661,4186,1096],{"class":671},[661,4188,4189],{"class":663,"line":1105},[661,4190,2239],{"class":671},[599,4192,4193,3429],{},[658,4194,1853],{},[1042,4196],{},[3047,4198,3435],{"id":3434},[651,4200,4201],{"className":653,"code":3438,"language":655,"meta":656,"style":656},[658,4202,4203,4215,4219,4231],{"__ignoreMap":656},[661,4204,4205,4207,4209,4211,4213],{"class":663,"line":664},[661,4206,2244],{"class":671},[661,4208,1117],{"class":1086},[661,4210,1090],{"class":671},[661,4212,1122],{"class":781},[661,4214,3453],{"class":671},[661,4216,4217],{"class":663,"line":689},[661,4218,3458],{"class":685},[661,4220,4221,4223,4225,4227,4229],{"class":663,"line":710},[661,4222,2244],{"class":671},[661,4224,2293],{"class":1086},[661,4226,1090],{"class":671},[661,4228,1122],{"class":781},[661,4230,3453],{"class":671},[661,4232,4233,4235,4237,4239,4241],{"class":663,"line":1105},[661,4234,2244],{"class":671},[661,4236,1117],{"class":1086},[661,4238,1090],{"class":671},[661,4240,1122],{"class":781},[661,4242,3483],{"class":671},[599,4244,3486,4245,3490],{},[603,4246,3489],{},[1042,4248],{},[3047,4250,3495],{"id":2385},[3497,4252],{"alt":3499,"kind":3500,"src":3501,"svg":3502},[599,4254,3505],{},[1042,4256],{},[3047,4258,3511],{"id":3510},[599,4260,4261,3516,4263],{},[658,4262,1117],{},[603,4264,3519],{},[2619,4266,3522],{},{"title":656,"searchDepth":689,"depth":689,"links":4268},[],{},{"title":3043,"description":3525},1788035581337]