{"id":1637,"date":"2022-11-30T18:52:20","date_gmt":"2022-11-30T17:52:20","guid":{"rendered":"https:\/\/www.webodesign.net\/?p=1637"},"modified":"2022-12-12T21:06:53","modified_gmt":"2022-12-12T20:06:53","slug":"nodejs-1-2-acquerir-les-fondamentaux","status":"publish","type":"post","link":"https:\/\/www.webodesign.net\/?p=1637","title":{"rendered":"NodeJS (1\/2): Acqu\u00e9rir les fondamentaux"},"content":{"rendered":"\n<div class=\"wp-block-uagb-container uagb-block-da5e418f alignfull uagb-is-root-container\"><div class=\"uagb-container-inner-blocks-wrap\">\n<div class=\"wp-block-columns is-layout-flex wp-container-14\">\n<div class=\"wp-block-column is-layout-flow\">\n<div class=\"wp-block-group is-layout-flow\">\n<div class=\"wp-block-group has-border-color has-vivid-cyan-blue-border-color has-background is-layout-flow\" style=\"border-style:dotted;border-width:2px;border-radius:8px;background-color:#fffdf8;padding-right:7px;padding-bottom:15px;padding-left:7px\">\n<div class=\"qubely-block-accordion  qubely-block-d34844\" data-item-toggle=\"true\">\n<div class=\"wp-block-qubely-accordion-item qubely-block-d99586\"><div class=\"qubely-accordion-item qubely-type-fill qubely-accordion-active\"><div class=\"qubely-accordion-panel qubely-icon-position-right\"><span class=\"qubely-accordion-panel-handler\" role=\"button\"><span class=\"qubely-accordion-panel-handler-label\">Installation de NodeJS<\/span><span class=\"qubely-accordion-icon fa fa-plus\"><\/span><\/span><\/div><div class=\"qubely-accordion-body\" style=\"display:block\"><div itemprop=\"text\">\n<ul>\n<li>Aller sur le site de Node JS et t\u00e9l\u00e9charger la derni\u00e8re version LTE pour Windows.<\/li>\n\n\n\n<li>Ex\u00e9cuter l&rsquo;installation \u00e0 partir du fichier msi pr\u00e9c\u00e9demment t\u00e9l\u00e9charger. Suivre la proc\u00e9dure en installant les \u00e9l\u00e9ments propos\u00e9s par d\u00e9faut. Ici Node JS sera install\u00e9 dans le r\u00e9pertoire \u00ab\u00a0<a href=\"C:\\Program Files\\nodejs\">C:\\Program Files\\nodejs:\\node<\/a>\u00ab\u00a0. <\/li>\n\n\n\n<li>Cr\u00e9ez le r\u00e9pertoire qui va accueillir les fichiers d&rsquo;exercices d\u00e9velopp\u00e9s pendant la formation. Ici, \u00ab\u00a0c:\\dev\\nodejs-1-2-fondamentaux\u00a0\u00bb<\/li>\n\n\n\n<li>Lancer Visual Studio Code. S\u00e9lectionner le menu \u00ab\u00a0Fichier \/ Ajouter un dossier \u00e0 l&rsquo;espace de travail&#8230;\u00a0\u00bb. Renseigner le dossier cr\u00e9\u00e9 dans l&rsquo;\u00e9tape pr\u00e9c\u00e9dente.<\/li>\n\n\n\n<li>Dans VSCode, afficher la fen\u00eatre \u00ab\u00a0terminal\u00a0\u00bb (touches Ctrl+\u00f9).<\/li>\n\n\n\n<li>Dans la fen\u00eatre du terminal :<\/li>\n\n\n\n<li>Se placer dans le dossier de d\u00e9veloppement : \u00ab\u00a0cd c:\\dev\\nodejs-1-2-fondamentaux\u00a0\u00bb<\/li>\n\n\n\n<li>Entrer la commande \u00ab\u00a0node &#8211;version\u00a0\u00bb pour v\u00e9rifier que l&rsquo;installation c&rsquo;est correctement d\u00e9roul\u00e9e. En r\u00e9ponse de la commande ex\u00e9cut\u00e9e, le num\u00e9ro de version install\u00e9 doit \u00eatre affich\u00e9.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"367\" height=\"108\" src=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/11\/formations-sites-remarquables-01.gif\" alt=\"\" class=\"wp-image-1639\"\/><\/figure>\n\n\n\n<ul>\n<li>Entrer la commande \u00ab\u00a0nmp init -y\u00a0\u00bb pour installer le package npm :<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"420\" height=\"304\" src=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/11\/formations-sites-remarquables-01.jpg\" alt=\"\" class=\"wp-image-1640\" srcset=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/11\/formations-sites-remarquables-01.jpg 420w, https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/11\/formations-sites-remarquables-01-300x217.jpg 300w, https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/11\/formations-sites-remarquables-01-140x100.jpg 140w\" sizes=\"(max-width: 420px) 100vw, 420px\" \/><\/figure>\n\n\n\n<ul>\n<li>Dans la partie gauche de la fen\u00eatre VSCode, s\u00e9lectionner le r\u00e9pertoire de la formation. Le fichier \u00ab\u00a0package.json\u00a0\u00bb comportant les param\u00e8tres de notre projet doit \u00eatre pr\u00e9sent. Le s\u00e9lectionner pour visualiser son contenu.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"508\" height=\"266\" src=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/11\/formations-sites-remarquables-02.jpg\" alt=\"\" class=\"wp-image-1641\" srcset=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/11\/formations-sites-remarquables-02.jpg 508w, https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/11\/formations-sites-remarquables-02-300x157.jpg 300w\" sizes=\"(max-width: 508px) 100vw, 508px\" \/><\/figure>\n\n\n\n<ul>\n<li>Premier exemple : Ajouter un fichier \u00ab\u00a0index.js\u00a0\u00bb \u00e0 l&rsquo;int\u00e9rieur du r\u00e9pertoire projet. Ajouter y le code suivant :<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"\" class=\"\">var a = 1;\nvar b = 2;\nconsole.log(&quot;a + b = &quot;, (a+b));<\/code><\/pre>\n\n\n\n<p>Ex\u00e9cuter le script dans la fen\u00eatre terminal : \u00ab\u00a0node index.js\u00a0\u00bb. le r\u00e9sultat \u00ab\u00a0a + b = 3\u00a0\u00bb doit s&rsquo;afficher.<\/p>\n<\/div><\/div><\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-border-color has-vivid-cyan-blue-border-color has-background is-layout-flow\" style=\"border-style:dotted;border-width:2px;border-radius:8px;background-color:#fffdf8;padding-right:7px;padding-bottom:15px;padding-left:7px\">\n<div class=\"qubely-block-accordion  qubely-block-d34844\" data-item-toggle=\"true\">\n<div class=\"wp-block-qubely-accordion-item qubely-block-1c4f11\"><div class=\"qubely-accordion-item qubely-type-fill qubely-accordion-active\"><div class=\"qubely-accordion-panel qubely-icon-position-right\"><span class=\"qubely-accordion-panel-handler\" role=\"button\"><span class=\"qubely-accordion-panel-handler-label\">Les scopes<\/span><span class=\"qubely-accordion-icon fa fa-plus\"><\/span><\/span><\/div><div class=\"qubely-accordion-body\" style=\"display:block\"><div itemprop=\"text\">\n<p>Un scope est un ensemble o\u00f9 les variables et les fonctions sont accessibles entre elles. Un scope peut \u00eatre local ou global.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"446\" height=\"321\" src=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/11\/formations-sites-remarquables-04.jpg\" alt=\"\" class=\"wp-image-1645\" srcset=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/11\/formations-sites-remarquables-04.jpg 446w, https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/11\/formations-sites-remarquables-04-300x216.jpg 300w, https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/11\/formations-sites-remarquables-04-140x100.jpg 140w\" sizes=\"(max-width: 446px) 100vw, 446px\" \/><\/figure>\n<\/div><\/div><\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-border-color has-vivid-cyan-blue-border-color has-background is-layout-flow\" style=\"border-style:dotted;border-width:2px;border-radius:8px;background-color:#fffdf8;padding-right:7px;padding-bottom:15px;padding-left:7px\">\n<div class=\"qubely-block-accordion  qubely-block-d34844\" data-item-toggle=\"true\">\n<div class=\"wp-block-qubely-accordion-item qubely-block-fe7a24\"><div class=\"qubely-accordion-item qubely-type-fill qubely-accordion-active\"><div class=\"qubely-accordion-panel qubely-icon-position-right\"><span class=\"qubely-accordion-panel-handler\" role=\"button\"><span class=\"qubely-accordion-panel-handler-label\">Les fonctions anonymes<\/span><span class=\"qubely-accordion-icon fa fa-plus\"><\/span><\/span><\/div><div class=\"qubely-accordion-body\" style=\"display:block\"><div itemprop=\"text\">\n<p>Il existe une syntaxe un peu sp\u00e9ciale qui permet d&rsquo;ex\u00e9cuter une fonction anonyme : il faut englober la fonction anonyme dans des parenth\u00e8ses. l&rsquo;ensemble devient donc une fonction que l&rsquo;on peut ex\u00e9cuter en ajoutant une paire de parenth\u00e8ses \u00e0 la fin. (Note: N&rsquo;oubliez pas le point virgule final, son absence provoquant parfois des erreurs).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"735\" height=\"430\" src=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/11\/formations-sites-remarquables-05.jpg\" alt=\"\" class=\"wp-image-1646\" srcset=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/11\/formations-sites-remarquables-05.jpg 735w, https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/11\/formations-sites-remarquables-05-300x176.jpg 300w\" sizes=\"(max-width: 735px) 100vw, 735px\" \/><\/figure>\n\n\n\n<p>Une solution est d&rsquo;affecter la fonction \u00e0 une variable et d&rsquo;utiliser des parenth\u00e8ses. C&rsquo;est les parenth\u00e8ses qui provoquent l&rsquo;appel de la fonction. On dit aussi l&rsquo;invocation de la fonction.<\/p>\n\n\n\n<p>Pourquoi faire ainsi ? On aura besoin de d\u00e9clarer des fonctions de cette mani\u00e8re quand on travaillera avec des gestionnaires d&rsquo;\u00e9v\u00e9nements.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"369\" height=\"319\" src=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/11\/formations-sites-remarquables-06.jpg\" alt=\"\" class=\"wp-image-1647\" srcset=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/11\/formations-sites-remarquables-06.jpg 369w, https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/11\/formations-sites-remarquables-06-300x259.jpg 300w\" sizes=\"(max-width: 369px) 100vw, 369px\" \/><\/figure>\n<\/div><\/div><\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-border-color has-vivid-cyan-blue-border-color has-background is-layout-flow\" style=\"border-style:dotted;border-width:2px;border-radius:8px;background-color:#fffdf8;padding-right:7px;padding-bottom:15px;padding-left:7px\">\n<div class=\"qubely-block-accordion  qubely-block-d34844\" data-item-toggle=\"true\">\n<div class=\"wp-block-qubely-accordion-item qubely-block-85e731\"><div class=\"qubely-accordion-item qubely-type-fill qubely-accordion-active\"><div class=\"qubely-accordion-panel qubely-icon-position-right\"><span class=\"qubely-accordion-panel-handler\" role=\"button\"><span class=\"qubely-accordion-panel-handler-label\">Les closures<\/span><span class=\"qubely-accordion-icon fa fa-plus\"><\/span><\/span><\/div><div class=\"qubely-accordion-body\" style=\"display:block\"><div itemprop=\"text\">\n<p>Le langage JavaScript poss\u00e8de un m\u00e9canisme de gestion des fonctions particulier appel\u00e9 closure. Les closures se basent sur des fonctions dites de premi\u00e8re classe. Ce sont des fonctions qui peuvent \u00eatre stock\u00e9es dans des variables, envoy\u00e9es dans d&rsquo;autres fonctions ou retourn\u00e9es comme r\u00e9sultat d&rsquo;une fonction.<\/p>\n\n\n\n<p>Lorsque vous utilisez le mot-cl\u00e9 function pour cr\u00e9er une fonction dans une fonction, alors vous \u00eates en train de cr\u00e9er une closure. Une closure est la pile de m\u00e9moire associ\u00e9e \u00e0 une fonction. Cette pile m\u00e9morise les variables locales utilis\u00e9es par la fonction au moment de sa destruction. Dans la plupart des langages de programmation, lorsque l&rsquo;ex\u00e9cution d&rsquo;une fonction se termine, les variables locales de la fonction sont d\u00e9truites. Ce n&rsquo;est pas le cas en JavaScript : elles sont sauvegard\u00e9es dans une closure.<\/p>\n\n\n\n<pre class=\"wp-block-code\" style=\"font-size:0.8rem\"><code lang=\"\" class=\"\">function MaFonction(nombre) {\n\tfunction Ajouter(valeur) {\n\t\t\/\/ La variable &quot;nombre&quot; est accessible dans cette fonction, car &quot;nombre&quot;\n\t\t\/\/ a \u00e9t\u00e9 d\u00e9finie en dehors de la fonction Ajouter\n\t\treturn nombre + valeur;\n\t}\n\n\t\/\/ Comme on l&#039;a vu, Ajouter est une variable, j&#039;ai donc le droit de la rendre en\n\t\/\/ tant que r\u00e9sultat de la fonction\n\treturn Ajouter;\n}<\/code><\/pre>\n\n\n\n<p>l faut \u00e9galement savoir que les variables sauvegard\u00e9es ne sont pas copi\u00e9es, ce sont des r\u00e9f\u00e9rences.<\/p>\n\n\n\n<p>Cas d&rsquo;exemple 1:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"711\" height=\"393\" src=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/11\/formations-sites-remarquables-07.jpg\" alt=\"\" class=\"wp-image-1648\" srcset=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/11\/formations-sites-remarquables-07.jpg 711w, https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/11\/formations-sites-remarquables-07-300x166.jpg 300w\" sizes=\"(max-width: 711px) 100vw, 711px\" \/><\/figure>\n\n\n\n<p>Exemple 2 :<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"359\" height=\"224\" src=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/11\/formations-sites-remarquables-08.jpg\" alt=\"\" class=\"wp-image-1650\" srcset=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/11\/formations-sites-remarquables-08.jpg 359w, https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/11\/formations-sites-remarquables-08-300x187.jpg 300w\" sizes=\"(max-width: 359px) 100vw, 359px\" \/><\/figure>\n<\/div><\/div><\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-border-color has-vivid-cyan-blue-border-color has-background is-layout-flow\" style=\"border-style:dotted;border-width:2px;border-radius:8px;background-color:#fffdf8;padding-right:7px;padding-bottom:15px;padding-left:7px\">\n<div class=\"qubely-block-accordion  qubely-block-d34844\" data-item-toggle=\"true\">\n<div class=\"wp-block-qubely-accordion-item qubely-block-d15c5d\"><div class=\"qubely-accordion-item qubely-type-fill qubely-accordion-active\"><div class=\"qubely-accordion-panel qubely-icon-position-right\"><span class=\"qubely-accordion-panel-handler\" role=\"button\"><span class=\"qubely-accordion-panel-handler-label\">Synchrone vs Asynchrone<\/span><span class=\"qubely-accordion-icon fa fa-plus\"><\/span><\/span><\/div><div class=\"qubely-accordion-body\" style=\"display:block\"><div itemprop=\"text\">\n<p>Node.js, contrairement \u00e0 d\u2019autres plateformes, est monothread\u00e9 c\u2019est-\u00e0-dire qu\u2019un seul thread est utilis\u00e9 pour traiter toutes les requ\u00eates et op\u00e9rations. On peut donc penser que ce n\u2019est pas tr\u00e8s efficace, mais Node.js tire sa force de son architecture \u00e9v\u00e9nementielle et asynchrone, on dit aussi que Node.js est non bloquant.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"706\" height=\"263\" src=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/11\/formations-sites-remarquables-10.png\" alt=\"\" class=\"wp-image-1652\" srcset=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/11\/formations-sites-remarquables-10.png 706w, https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/11\/formations-sites-remarquables-10-300x112.png 300w\" sizes=\"(max-width: 706px) 100vw, 706px\" \/><\/figure>\n\n\n\n<p>Imaginons que notre programme ex\u00e9cute des requ\u00eates en base de donn\u00e9es. Dans le mod\u00e8le synchrone, le programme ex\u00e9cute une requ\u00eate et doit attendre que le syst\u00e8me de gestion de base de donn\u00e9es lui retourne le r\u00e9sultat avant de passer \u00e0 la requ\u00eate suivante. Dans le mod\u00e8le asynchrone, cette fois-ci le programme n\u2019a pas besoin d\u2019attendre le r\u00e9sultat d\u2019une requ\u00eate avant d\u2019ex\u00e9cuter la suivante, une fois le r\u00e9sultat de la requ\u00eate retourn\u00e9 au programme, celui-ci effectue les actions qu\u2019on lui avait demand\u00e9es (via des fonctions de callback par exemple) . De mani\u00e8re g\u00e9n\u00e9rale pour toutes interactions ext\u00e9rieures au programme (entr\u00e9es\/sorties), Node.js utilise l\u2019asynchrone. Par exemple :<\/p>\n\n\n\n<ul>\n<li>Requ\u00eate HTTP,<\/li>\n\n\n\n<li>Requ\u00eate en base de donn\u00e9es,<\/li>\n\n\n\n<li>Lecture\/\u00e9criture de fichiers sur le disque dur,<\/li>\n\n\n\n<li>Envoi d\u2019emails<\/li>\n\n\n\n<li>etc.<\/li>\n<\/ul>\n\n\n\n<p>Par contre en JavaScript, chaque ligne de code est ex\u00e9cut\u00e9e de fa\u00e7on synchrone, mais il est possible de demander \u00e0 ex\u00e9cuter du code de mani\u00e8re asynchrone. Et lorsque l&rsquo;on demande \u00e0 ex\u00e9cuter une fonction de fa\u00e7on asynchrone, la fonction en question est plac\u00e9e dans une sorte de file d&rsquo;attente qui va ex\u00e9cuter toutes les fonctions qu&rsquo;elle contient les unes apr\u00e8s les autres. C&rsquo;est ce qu&rsquo;on appelle l&rsquo;event loop.\u00a0Tout le c\u0153ur du langage fonctionne autour de \u00e7a.<\/p>\n\n\n\n<p>Ainsi, le code n&rsquo;est pas r\u00e9ellement ex\u00e9cut\u00e9 en parall\u00e8le car il est mis en file d&rsquo;attente, mais il ne bloque pas l&rsquo;ex\u00e9cution du code depuis lequel il a \u00e9t\u00e9 appel\u00e9.<\/p>\n\n\n\n<p>Exemple du fonctionnement de \u00ab\u00a0l&rsquo;even loop\u00a0\u00bb :<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"496\" height=\"310\" src=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/11\/formations-sites-remarquables-09.jpg\" alt=\"\" class=\"wp-image-1653\" srcset=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/11\/formations-sites-remarquables-09.jpg 496w, https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/11\/formations-sites-remarquables-09-300x188.jpg 300w\" sizes=\"(max-width: 496px) 100vw, 496px\" \/><\/figure>\n\n\n\n<p>On remarque que la fonction \u00ab\u00a0setTimeout\u00a0\u00bb fonctionne nativement en mode asynchrone.<\/p>\n\n\n\n<p>Pour faire fonctionner le comptage de boucle en mode synchrone, on utilise une astuce qu&rsquo;il faut retenir car elle peut \u00eatre appliqu\u00e9e \u00e0 d&rsquo;autre probl\u00e8mes du m\u00eame type :<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"492\" height=\"344\" src=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/11\/formations-sites-remarquables-11.jpg\" alt=\"\" class=\"wp-image-1654\" srcset=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/11\/formations-sites-remarquables-11.jpg 492w, https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/11\/formations-sites-remarquables-11-300x210.jpg 300w\" sizes=\"(max-width: 492px) 100vw, 492px\" \/><\/figure>\n\n\n\n<p>Il faut positionner la fonction asynchrone dans une fonction anonyme auto-appelante.<\/p>\n<\/div><\/div><\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-border-color has-vivid-cyan-blue-border-color has-background is-layout-flow\" style=\"border-style:dotted;border-width:2px;border-radius:8px;background-color:#fffdf8;padding-right:7px;padding-bottom:15px;padding-left:7px\">\n<div class=\"qubely-block-accordion  qubely-block-d34844\" data-item-toggle=\"true\">\n<div class=\"wp-block-qubely-accordion-item qubely-block-5cfd94\"><div class=\"qubely-accordion-item qubely-type-fill qubely-accordion-active\"><div class=\"qubely-accordion-panel qubely-icon-position-right\"><span class=\"qubely-accordion-panel-handler\" role=\"button\"><span class=\"qubely-accordion-panel-handler-label\">Les objets<\/span><span class=\"qubely-accordion-icon fa fa-plus\"><\/span><\/span><\/div><div class=\"qubely-accordion-body\" style=\"display:block\"><div itemprop=\"text\">\n<div class=\"wp-block-uagb-advanced-heading uagb-block-dd79d724\"><h3 class=\"uagb-heading-text\">Les objets natifs<\/h3><\/div>\n\n\n\n<p>En Javascript, les objets natifs sont d\u00e9finis en utilisant les accolades. Un objet peut contenir d&rsquo;autres objets. Les objets poss\u00e8des des attributs (dans notre exemple : cat et dog). Ils peuvent contenir des fonctions.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"688\" height=\"328\" src=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/formations-sites-remarquables-12.jpg\" alt=\"\" class=\"wp-image-1657\" srcset=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/formations-sites-remarquables-12.jpg 688w, https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/formations-sites-remarquables-12-300x143.jpg 300w\" sizes=\"(max-width: 688px) 100vw, 688px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-uagb-advanced-heading uagb-block-1cea7f7a\"><h3 class=\"uagb-heading-text\">Les objets instanci\u00e9s<\/h3><\/div>\n\n\n\n<p>Les objets instanci\u00e9s proviennent d&rsquo;une class. Quand on cr\u00e9\u00e9 la class (new), un objet est instanci\u00e9.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"695\" height=\"720\" src=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/formations-sites-remarquables-13.jpg\" alt=\"\" class=\"wp-image-1658\" srcset=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/formations-sites-remarquables-13.jpg 695w, https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/formations-sites-remarquables-13-290x300.jpg 290w\" sizes=\"(max-width: 695px) 100vw, 695px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"699\" height=\"651\" src=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/formations-sites-remarquables-14.jpg\" alt=\"\" class=\"wp-image-1659\" srcset=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/formations-sites-remarquables-14.jpg 699w, https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/formations-sites-remarquables-14-300x279.jpg 300w\" sizes=\"(max-width: 699px) 100vw, 699px\" \/><\/figure>\n\n\n\n<p>Une autre mani\u00e8re de coder cet exemple sans utiliser la l&rsquo;attribut \u00ab\u00a0class\u00a0\u00bb.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"529\" height=\"591\" src=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/formations-sites-remarquables-15.jpg\" alt=\"\" class=\"wp-image-1660\" srcset=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/formations-sites-remarquables-15.jpg 529w, https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/formations-sites-remarquables-15-269x300.jpg 269w\" sizes=\"(max-width: 529px) 100vw, 529px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-uagb-advanced-heading uagb-block-989d974c\"><h3 class=\"uagb-heading-text\">Enum\u00e9rer les propri\u00e9t\u00e9s<\/h3><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"526\" height=\"251\" src=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/formations-sites-remarquables-16.jpg\" alt=\"\" class=\"wp-image-1661\" srcset=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/formations-sites-remarquables-16.jpg 526w, https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/formations-sites-remarquables-16-300x143.jpg 300w\" sizes=\"(max-width: 526px) 100vw, 526px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-uagb-advanced-heading uagb-block-f0cbf669\"><h3 class=\"uagb-heading-text\">Le contexte et this<\/h3><\/div>\n\n\n\n<p>Le contexte est un objet sp\u00e9cifique \u00e0 Javascript qui peut \u00eatre instanci\u00e9 et qui re\u00e7oit, en d\u00e9but d&rsquo;interpr\u00e9tation du code, une s\u00e9rie de propri\u00e9t\u00e9s utilisables \u00e0 travers l&rsquo;ensemble du code.<\/p>\n\n\n\n<p>A chaque instanciation d&rsquo;objet est cr\u00e9\u00e9e un nouveau contexte.<\/p>\n\n\n\n<p>On peut acc\u00e9der au contexte gr\u00e2ce au mot &lsquo;this&rsquo;.<\/p>\n\n\n\n<p>Avec Javascript, la fonction \u00ab\u00a0bind()\u00a0\u00bb permet d&rsquo;attacher un contexte \u00e0 la fonction appel\u00e9e, mais aussi de param\u00e9trer la fonction appel\u00e9e avec des arguments en dur.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"696\" height=\"767\" src=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/formations-sites-remarquables-17.jpg\" alt=\"\" class=\"wp-image-1662\" srcset=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/formations-sites-remarquables-17.jpg 696w, https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/formations-sites-remarquables-17-272x300.jpg 272w\" sizes=\"(max-width: 696px) 100vw, 696px\" \/><\/figure>\n<\/div><\/div><\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-border-color has-vivid-cyan-blue-border-color has-background is-layout-flow\" style=\"border-style:dotted;border-width:2px;border-radius:8px;background-color:#fffdf8;padding-right:7px;padding-bottom:15px;padding-left:7px\">\n<div class=\"qubely-block-accordion  qubely-block-d34844\" data-item-toggle=\"true\">\n<div class=\"wp-block-qubely-accordion-item qubely-block-fe610f\"><div class=\"qubely-accordion-item qubely-type-fill false\"><div class=\"qubely-accordion-panel qubely-icon-position-right\"><span class=\"qubely-accordion-panel-handler\" role=\"button\"><span class=\"qubely-accordion-panel-handler-label\">Les fonctions Apply et Call<\/span><span class=\"qubely-accordion-icon fa fa-plus\"><\/span><\/span><\/div><div class=\"qubely-accordion-body\"><div itemprop=\"text\">\n<p>Apply et Call sont deux fonctions qui peuvent \u00eatre appel\u00e9es \u00e0 chaque fonction.<\/p>\n\n\n\n<p>Elles permettent d&rsquo;appeler la fonction avec les arguments en argument.<\/p>\n\n\n\n<p>Apply et Call vont appeler une fonction en lui ins\u00e9rant sont propre contexte avec des arguments en suppl\u00e9ment.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"332\" height=\"67\" src=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/formations-sites-remarquables-18.jpg\" alt=\"\" class=\"wp-image-1663\" srcset=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/formations-sites-remarquables-18.jpg 332w, https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/formations-sites-remarquables-18-300x61.jpg 300w\" sizes=\"(max-width: 332px) 100vw, 332px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"522\" height=\"562\" src=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/formations-sites-remarquables-19.jpg\" alt=\"\" class=\"wp-image-1664\" srcset=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/formations-sites-remarquables-19.jpg 522w, https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/formations-sites-remarquables-19-279x300.jpg 279w\" sizes=\"(max-width: 522px) 100vw, 522px\" \/><\/figure>\n<\/div><\/div><\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-border-color has-vivid-cyan-blue-border-color has-background is-layout-flow\" style=\"border-style:dotted;border-width:2px;border-radius:8px;background-color:#fffdf8;padding-right:7px;padding-bottom:15px;padding-left:7px\">\n<div class=\"qubely-block-accordion  qubely-block-d34844\" data-item-toggle=\"true\">\n<div class=\"wp-block-qubely-accordion-item qubely-block-92ae27\"><div class=\"qubely-accordion-item qubely-type-fill qubely-accordion-active\"><div class=\"qubely-accordion-panel qubely-icon-position-right\"><span class=\"qubely-accordion-panel-handler\" role=\"button\"><span class=\"qubely-accordion-panel-handler-label\">Node JS : Programmation par callback<\/span><span class=\"qubely-accordion-icon fa fa-plus\"><\/span><\/span><\/div><div class=\"qubely-accordion-body\" style=\"display:block\"><div itemprop=\"text\">\n<p>Les callbacks sont des fonctions appel\u00e9es \u00e0 la fin d&rsquo;une t\u00e2che. Elle peuvent aussi \u00eatre d\u00e9sign\u00e9es par abus de langage, comme \u00e9tant une fonction anonyme pass\u00e9e en argument.<\/p>\n\n\n\n<p>Une tr\u00e8s grande partie du Code de NodeJS est d\u00e9velopp\u00e9 avec des callbacks.<\/p>\n\n\n\n<p>Cas d&rsquo;exemple : On veur lancer une recherche \u00e0 partir d&rsquo;une fonction avec les arguments :<\/p>\n\n\n\n<ul>\n<li>les donn\u00e9es et le filtre<\/li>\n\n\n\n<li>la callback<\/li>\n<\/ul>\n\n\n\n<p>Dans la fonction, apr\u00e8s avoir termin\u00e9 de traiter les donn\u00e9es, on appelle la fonction callback avec les potentielles erreurs et le r\u00e9sultat. Par convention, le premier argument renvoy\u00e9 est l&rsquo;erreur, le second le r\u00e9sultat.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"749\" height=\"466\" src=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/formations-sites-remarquables-20.jpg\" alt=\"\" class=\"wp-image-1666\" srcset=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/formations-sites-remarquables-20.jpg 749w, https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/formations-sites-remarquables-20-300x187.jpg 300w\" sizes=\"(max-width: 749px) 100vw, 749px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-uagb-advanced-heading uagb-block-d703fdb3\"><h3 class=\"uagb-heading-text\">Les m\u00e9thodes synchrones et asynchrones<\/h3><\/div>\n\n\n\n<p><strong>Mode synchrone :<\/strong> Dans le cas d&rsquo;un gros fichier de plusieurs Moctets, le pointeur d&rsquo;ex\u00e9cution du programme reste \u00ab\u00a0coinc\u00e9\u00a0\u00bb sur la commande readFileSync. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"584\" height=\"287\" src=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/formations-sites-remarquables-21.jpg\" alt=\"\" class=\"wp-image-1670\" srcset=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/formations-sites-remarquables-21.jpg 584w, https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/formations-sites-remarquables-21-300x147.jpg 300w\" sizes=\"(max-width: 584px) 100vw, 584px\" \/><\/figure>\n\n\n\n<p><strong>En mode asynchrone<\/strong>, avec deux fichiers, les relectures sont ex\u00e9cut\u00e9 en m\u00eame temps. On est averti lorsque l&rsquo;un puis l&rsquo;autre des lectures sont termin\u00e9es. Le programme ne reste pas bloqu\u00e9 sur une t\u00e2che lourde.<\/p>\n\n\n\n<p>Dans l&rsquo;exemple ci-dessous, \u00a0on constate que \u00ab\u00a0fini !!!\u00a0\u00bb est affich\u00e9 avant l&rsquo;affichage du fichier.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"596\" height=\"277\" src=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/formations-sites-remarquables-22.jpg\" alt=\"\" class=\"wp-image-1671\" srcset=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/formations-sites-remarquables-22.jpg 596w, https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/formations-sites-remarquables-22-300x139.jpg 300w\" sizes=\"(max-width: 596px) 100vw, 596px\" \/><\/figure>\n<\/div><\/div><\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-border-color has-vivid-cyan-blue-border-color has-background is-layout-flow\" style=\"border-style:dotted;border-width:2px;border-radius:8px;background-color:#fffdf8;padding-right:7px;padding-bottom:15px;padding-left:7px\">\n<div class=\"qubely-block-accordion  qubely-block-d34844\" data-item-toggle=\"true\">\n<div class=\"wp-block-qubely-accordion-item qubely-block-d9dae6\"><div class=\"qubely-accordion-item qubely-type-fill qubely-accordion-active\"><div class=\"qubely-accordion-panel qubely-icon-position-right\"><span class=\"qubely-accordion-panel-handler\" role=\"button\"><span class=\"qubely-accordion-panel-handler-label\">L&rsquo;Event Loop<\/span><span class=\"qubely-accordion-icon fa fa-plus\"><\/span><\/span><\/div><div class=\"qubely-accordion-body\" style=\"display:block\"><div itemprop=\"text\">\n<ul>\n<li>timers : Ex\u00e9cute les callbacks (rappels planifi\u00e9s) des fonctions setTimeout et setInterval;<\/li>\n\n\n\n<li>pending callback (rappels en attente) : Cette phase ex\u00e9cute les callbacks de certaines op\u00e9rations syst\u00e8mes comme les erreurs TCP par exemple.<\/li>\n\n\n\n<li>idle, prepare (inactif, pr\u00e9parer) : utilis\u00e9 uniquement en interne.<\/li>\n\n\n\n<li>poll : r\u00e9cup\u00e9rer de nouveaux \u00e9v\u00e9nements d&rsquo;E\/S ; ex\u00e9cuter des rappels li\u00e9s aux E\/S (presque tous \u00e0 l&rsquo;exception des rappels de fermeture, ceux planifi\u00e9s par les timers, et setImmediate()) ; Si tout les callbacks de cette phase ont \u00e9t\u00e9 ex\u00e9cut\u00e9s et qu\u2019il n\u2019y a pas de t\u00e2ches en attente (callbacks d\u2019autres phases ou timers) plut\u00f4t que de parcourir les diff\u00e9rentes phases inutilement, la boucle d\u2019\u00e9v\u00e9nements reste dans cette phase en attentes de nouveaux \u00e9v\u00e9nements externes;<\/li>\n\n\n\n<li>check : Ex\u00e9cute les callbacks de la fonction\u00a0setImmediate.<\/li>\n\n\n\n<li>callbacks de fermeture : certains callbacks de fermeture, par exemple socket.on(&lsquo;close&rsquo;, \u2026).<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"489\" height=\"424\" src=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/formations-sites-remarquables-23.jpg\" alt=\"\" class=\"wp-image-1674\" srcset=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/formations-sites-remarquables-23.jpg 489w, https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/formations-sites-remarquables-23-300x260.jpg 300w\" sizes=\"(max-width: 489px) 100vw, 489px\" \/><\/figure>\n\n\n\n<p>Exemple 1 :<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"442\" height=\"343\" src=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/formations-sites-remarquables-24.jpg\" alt=\"\" class=\"wp-image-1675\" srcset=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/formations-sites-remarquables-24.jpg 442w, https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/formations-sites-remarquables-24-300x233.jpg 300w\" sizes=\"(max-width: 442px) 100vw, 442px\" \/><\/figure>\n\n\n\n<p>Exemple 2 : Blocage !!!<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"509\" height=\"248\" src=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/formations-sites-remarquables-25.jpg\" alt=\"\" class=\"wp-image-1676\" srcset=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/formations-sites-remarquables-25.jpg 509w, https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/formations-sites-remarquables-25-300x146.jpg 300w\" sizes=\"(max-width: 509px) 100vw, 509px\" \/><\/figure>\n\n\n\n<p>Exemple 3 : L&rsquo;appel \u00e0 la fonction est lanc\u00e9e en mode asynchrone, mais en r\u00e9alit\u00e9 le d\u00e9roulement de l&rsquo;ex\u00e9cution se comporte en s\u00e9quentiel : c&rsquo;est du synchrone !<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"515\" height=\"292\" src=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/formations-sites-remarquables-26.jpg\" alt=\"\" class=\"wp-image-1677\" srcset=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/formations-sites-remarquables-26.jpg 515w, https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/formations-sites-remarquables-26-300x170.jpg 300w\" sizes=\"(max-width: 515px) 100vw, 515px\" \/><\/figure>\n\n\n\n<p>Exemple 4 : On compte 4 tics puis on delete le timer.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"520\" height=\"555\" src=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/formations-sites-remarquables-27.jpg\" alt=\"\" class=\"wp-image-1680\" srcset=\"https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/formations-sites-remarquables-27.jpg 520w, https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/12\/formations-sites-remarquables-27-281x300.jpg 281w\" sizes=\"(max-width: 520px) 100vw, 520px\" \/><\/figure>\n\n\n\n<p>En conclusion : NodeJS est mono-threader et fonctionne en mode synchrone. Seule les fonctions syst\u00e8me d&rsquo;entr\u00e9es-sorties sont asynchrones.<\/p>\n<\/div><\/div><\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group has-border-color has-vivid-cyan-blue-border-color has-background is-layout-flow\" style=\"border-style:dotted;border-width:2px;border-radius:8px;background-color:#fffdf8;padding-right:7px;padding-bottom:15px;padding-left:7px\">\n<div class=\"qubely-block-accordion  qubely-block-d34844\" data-item-toggle=\"true\">\n<div class=\"wp-block-qubely-accordion-item qubely-block-4cff6c\"><div class=\"qubely-accordion-item qubely-type-fill qubely-accordion-active\"><div class=\"qubely-accordion-panel qubely-icon-position-right\"><span class=\"qubely-accordion-panel-handler\" role=\"button\"><span class=\"qubely-accordion-panel-handler-label\">Projet d&rsquo;application : asyncMap<\/span><span class=\"qubely-accordion-icon fa fa-plus\"><\/span><\/span><\/div><div class=\"qubely-accordion-body\" style=\"display:block\"><div itemprop=\"text\">\n<p>Sujet : Programmer une fonction qui va t\u00e9l\u00e9charger 3 images en m\u00eame temps (t\u00e9l\u00e9chargement asynchrone). Une fois que les trois images sont t\u00e9l\u00e9charg\u00e9es, afficher un message avec la taille totale des 3 images.<\/p>\n\n\n\n<p>Algorithme :<\/p>\n\n\n\n<ul>\n<li>On cr\u00e9\u00e9 un array qui contient nos trois images,<\/li>\n\n\n\n<li>on appelle une fonction qui g\u00e8rera les trois t\u00e9l\u00e9chargements,<\/li>\n\n\n\n<li>on lance les trois t\u00e9l\u00e9chargements. Dans leur callback, on compte le nombre de retours et on garde la taille de l&rsquo;image t\u00e9l\u00e9charg\u00e9e,<\/li>\n\n\n\n<li>Une fois qu&rsquo;il y a eu trois callbacks de retour, on appelle la callback pour indiquer que l&rsquo;on a t\u00e9l\u00e9charg\u00e9 nos trois images, et on affiche le r\u00e9sultat.<\/li>\n<\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n<\/div><\/div><\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column uag-hide-tab uag-hide-mob is-layout-flow\" style=\"flex-basis:170px\">\n\n<div class=\"cleanlogin-container\">\t\t\n\n\t<form class=\"cleanlogin-form\" method=\"post\" action=\"https:\/\/www.webodesign.net\/?page_id=2385\" onsubmit=\"submit.disabled = true; return true;\">\n\t\t\t\n\t\t<fieldset>\n\n\t\t\t\t\t\t<div class=\"cleanlogin-field\">\n                <label for=\"log\">Identifiant<\/label>\n\t\t\t\t<input class=\"cleanlogin-field-username\" type=\"text\" name=\"log\" placeholder=\"Identifiant\" aria-label=\"Identifiant\">\n\t\t\t<\/div>\n\t\t\t\n\t\t\t<div class=\"cleanlogin-field\">\n                <label for=\"pwd\">Mot de passe<\/label>\n\t\t\t\t<input class=\"cleanlogin-field-password\" type=\"password\" id=\"pwd\" name=\"pwd\" placeholder=\"Mot de passe\" aria-label=\"Mot de passe\">\n                <i class=\"bi bi-eye-slash\" id=\"togglePassword\"><\/i>\n\t\t\t<\/div>\n\n\t\t\t\t\t\n\t\t\t<input type=\"hidden\" name=\"clean_login_wpnonce\" value=\"e994c14fba\">\n            \n\t\t\t\t\t<\/fieldset>\n\t\t\n\t\t<fieldset>\n\t\t\t<input class=\"cleanlogin-field\" type=\"submit\" value=\"Se connecter\" name=\"submit\">\n\t\t\t<input type=\"hidden\" name=\"action\" value=\"login\">\n\t\t\t\n\t\t\t<div class=\"cleanlogin-field cleanlogin-field-remember\">\n\t\t\t\t<input type=\"checkbox\" id=\"rememberme\" name=\"rememberme\" value=\"forever\">\n\t\t\t\t<label for=\"rememberme\">Se souvenir de moi\u00a0?<\/label>\n\t\t\t<\/div>\n\t\t<\/fieldset>\n\n\t\t\n\t\t<div class=\"cleanlogin-form-bottom\">\n\t\t\t\n            \n\t\t\t\t\t\t\t\t\t\n\t\t<\/div>\n\t\t\n\t<\/form>\n\n<\/div>\n\n<script>\nconst togglePassword = document.querySelector('#togglePassword');\nconst password = document.querySelector('#pwd');\n\ntogglePassword.addEventListener('click', function (e) {\n    const type = password.getAttribute('type') === 'password' ? 'text' : 'password';\n    password.setAttribute('type', type);\n    this.classList.toggle('bi-eye');\n});\n<\/script>\n<\/div>\n<\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Node.Js a compl\u00e8tement r\u00e9volutionn\u00e9 la perception de JavaScript et l\u2019architecture logicielle c\u00f4t\u00e9 serveur.<br \/>\nNodeJS est tr\u00e8s performant, agr\u00e9able \u00e0 l\u2019emploi, dot\u00e9 d\u2019un \u00e9cosyst\u00e8me et d\u2019une communaut\u00e9 riche et r\u00e9active. Tr\u00e8s adapt\u00e9 et adopt\u00e9 pour des applications en production avec une mont\u00e9e en charge importante.<br \/>\nDurant cette formation Alphorm \/ NodeJS, vous allez apprendre \u00e0 d\u00e9velopper des applications r\u00e9actives et performantes avec Node.js. Vous mettrez en \u0153uvre les concepts de programmation \u00e9v\u00e9nementielle et asynchrone, de modularit\u00e9 avec des modules natifs tr\u00e8s puissants.<\/p>\n","protected":false},"author":3,"featured_media":1638,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"qubely_global_settings":"","qubely_interactions":"","_uag_custom_page_level_css":""},"categories":[18,21,16],"tags":[],"qubely_featured_image_url":{"full":["https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/11\/formations-sites-remarquables.jpg",940,490,false],"landscape":["https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/11\/formations-sites-remarquables.jpg",940,490,false],"portraits":["https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/11\/formations-sites-remarquables-540x320.jpg",540,320,true],"thumbnail":["https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/11\/formations-sites-remarquables-150x150.jpg",150,150,true],"medium":["https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/11\/formations-sites-remarquables-300x156.jpg",300,156,true],"medium_large":["https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/11\/formations-sites-remarquables-768x400.jpg",768,400,true],"large":["https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/11\/formations-sites-remarquables.jpg",940,490,false],"1536x1536":["https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/11\/formations-sites-remarquables.jpg",940,490,false],"2048x2048":["https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/11\/formations-sites-remarquables.jpg",940,490,false],"qubely_landscape":["https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/11\/formations-sites-remarquables.jpg",940,490,false],"qubely_portrait":["https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/11\/formations-sites-remarquables-540x320.jpg",540,320,true],"qubely_thumbnail":["https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/11\/formations-sites-remarquables-140x100.jpg",140,100,true]},"qubely_author":{"display_name":"R\u00e9mi","author_link":"https:\/\/www.webodesign.net\/?author=3"},"qubely_comment":0,"qubely_category":"<a href=\"https:\/\/www.webodesign.net\/?cat=18\" rel=\"category\">Formations<\/a> <a href=\"https:\/\/www.webodesign.net\/?cat=21\" rel=\"category\">Formations Linux<\/a> <a href=\"https:\/\/www.webodesign.net\/?cat=16\" rel=\"category\">Tutoriels Linux-Debian<\/a>","qubely_excerpt":"Node.Js a compl\u00e8tement r\u00e9volutionn\u00e9 la perception de JavaScript et l\u2019architecture logicielle c\u00f4t\u00e9 serveur. NodeJS est tr\u00e8s performant, agr\u00e9able \u00e0 l\u2019emploi, dot\u00e9 d\u2019un \u00e9cosyst\u00e8me et d\u2019une communaut\u00e9 riche et r\u00e9active. Tr\u00e8s adapt\u00e9 et adopt\u00e9 pour des applications en production avec une mont\u00e9e en charge importante. Durant cette formation Alphorm \/ NodeJS, vous allez apprendre \u00e0 d\u00e9velopper\u2026","uagb_featured_image_src":{"full":["https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/11\/formations-sites-remarquables.jpg",940,490,false],"thumbnail":["https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/11\/formations-sites-remarquables-150x150.jpg",150,150,true],"medium":["https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/11\/formations-sites-remarquables-300x156.jpg",300,156,true],"medium_large":["https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/11\/formations-sites-remarquables-768x400.jpg",768,400,true],"large":["https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/11\/formations-sites-remarquables.jpg",940,490,false],"1536x1536":["https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/11\/formations-sites-remarquables.jpg",940,490,false],"2048x2048":["https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/11\/formations-sites-remarquables.jpg",940,490,false],"qubely_landscape":["https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/11\/formations-sites-remarquables.jpg",940,490,false],"qubely_portrait":["https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/11\/formations-sites-remarquables-540x320.jpg",540,320,true],"qubely_thumbnail":["https:\/\/www.webodesign.net\/wp-content\/uploads\/2022\/11\/formations-sites-remarquables-140x100.jpg",140,100,true]},"uagb_author_info":{"display_name":"R\u00e9mi","author_link":"https:\/\/www.webodesign.net\/?author=3"},"uagb_comment_info":0,"uagb_excerpt":"Node.Js a compl\u00e8tement r\u00e9volutionn\u00e9 la perception de JavaScript et l\u2019architecture logicielle c\u00f4t\u00e9 serveur. NodeJS est tr\u00e8s performant, agr\u00e9able \u00e0 l\u2019emploi, dot\u00e9 d\u2019un \u00e9cosyst\u00e8me et d\u2019une communaut\u00e9 riche et r\u00e9active. Tr\u00e8s adapt\u00e9 et adopt\u00e9 pour des applications en production avec une mont\u00e9e en charge importante. Durant cette formation Alphorm \/ NodeJS, vous allez apprendre \u00e0 d\u00e9velopper\u2026","_links":{"self":[{"href":"https:\/\/www.webodesign.net\/index.php?rest_route=\/wp\/v2\/posts\/1637"}],"collection":[{"href":"https:\/\/www.webodesign.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webodesign.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webodesign.net\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webodesign.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1637"}],"version-history":[{"count":34,"href":"https:\/\/www.webodesign.net\/index.php?rest_route=\/wp\/v2\/posts\/1637\/revisions"}],"predecessor-version":[{"id":1722,"href":"https:\/\/www.webodesign.net\/index.php?rest_route=\/wp\/v2\/posts\/1637\/revisions\/1722"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webodesign.net\/index.php?rest_route=\/wp\/v2\/media\/1638"}],"wp:attachment":[{"href":"https:\/\/www.webodesign.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1637"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webodesign.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1637"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webodesign.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1637"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}