{"id":168,"date":"2025-11-28T11:55:10","date_gmt":"2025-11-28T10:55:10","guid":{"rendered":"https:\/\/yb-isn.fr\/2025\/nsi\/?p=168"},"modified":"2025-12-09T14:58:10","modified_gmt":"2025-12-09T13:58:10","slug":"20-interaction-avec-lutilisateur-dans-une-page-web","status":"publish","type":"post","link":"https:\/\/yb-isn.fr\/2025\/nsi\/2025\/11\/28\/20-interaction-avec-lutilisateur-dans-une-page-web\/","title":{"rendered":"20-Interaction avec l&rsquo;utilisateur dans une page web"},"content":{"rendered":"<p><!--more--><\/p>\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"320\" height=\"236\" src=\"https:\/\/yb-isn.fr\/2025\/nsi\/wp-content\/uploads\/2025\/11\/1308.png\" alt=\"\" class=\"wp-image-205\" srcset=\"https:\/\/yb-isn.fr\/2025\/nsi\/wp-content\/uploads\/2025\/11\/1308.png 320w, https:\/\/yb-isn.fr\/2025\/nsi\/wp-content\/uploads\/2025\/11\/1308-300x221.png 300w\" sizes=\"auto, (max-width: 320px) 100vw, 320px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-esab-accordion esab-yq4ukx99\" data-mode=\"global\"><div class=\"esab__container\">\n<div class=\"wp-block-esab-accordion-child\"><div class=\"esab__head\" role=\"button\" aria-expanded=\"false\"><div class=\"esab__heading_txt\"><p class=\"esab__heading_tag\">Consignes pour le projet<\/p><\/div><div class=\"esab__icon\"><div class=\"esab__collapse\"> <svg version=\"1.2\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\"><path fill-rule=\"evenodd\" d=\"m3.5 20.5c-4.7-4.7-4.7-12.3 0-17 4.7-4.7 12.3-4.7 17 0 4.6 4.7 4.6 12.3 0 17-4.7 4.6-12.3 4.6-17 0zm0.9-0.9c4.2 4.2 11 4.2 15.2 0 4.2-4.2 4.2-11 0-15.2-4.2-4.3-11-4.3-15.2 0-4.3 4.2-4.3 11 0 15.2z\"><\/path><path d=\"m11.4 15.9v-3.3h-3.3c-0.3 0-0.6-0.3-0.6-0.6 0-0.4 0.3-0.6 0.6-0.6h3.3v-3.3c0-0.3 0.3-0.6 0.6-0.6 0.3 0 0.6 0.3 0.6 0.6v3.3h3.3c0.3 0 0.6 0.2 0.6 0.6q0 0.2-0.2 0.4-0.2 0.2-0.4 0.2h-3.3v3.3q0 0.2-0.2 0.4-0.2 0.2-0.4 0.2c-0.4 0-0.6-0.3-0.6-0.6z\"><\/path><\/svg> <\/div><div class=\"esab__expand\"> <svg version=\"1.2\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\"><path fill-rule=\"evenodd\" d=\"m12 24c-6.6 0-12-5.4-12-12 0-6.6 5.4-12 12-12 6.6 0 12 5.4 12 12 0 6.6-5.4 12-12 12zm10.6-12c0-5.9-4.7-10.6-10.6-10.6-5.9 0-10.6 4.7-10.6 10.6 0 5.9 4.7 10.6 10.6 10.6 5.9 0 10.6-4.7 10.6-10.6z\"><\/path><path d=\"m5.6 11.3h12.8v1.4h-12.8z\"><\/path><\/svg> <\/div><\/div><\/div><div class=\"esab__body\">\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/yb-isn.fr\/2025\/nsi\/2025\/11\/28\/20-interaction-avec-lutilisateur-dans-une-page-web\/\">voir blog<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">consignes pour le projet : hauteur du plafond nuageux.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Le travail doit \u00eatre rendu \u00e0 la fin de la s\u00e9ance du jeudi 11 D\u00e9cembre.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Il est recommander de bien comprendre <a href=\"https:\/\/yb-isn.fr\/monnaie\/\">le convertisseur de monnai<\/a>e pour r\u00e9aliser votre projet<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Calculer et afficher en ligne la hauteur du plafond nuageux \u00e0 partir de la temp\u00e9rature et du taux d\u2019humidit\u00e9.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Trois ressources pour vous aider :<br><a href=\"https:\/\/fr.wikipedia.org\/wiki\/Base_d%27un_nuage\">base d\u2019un nuage<\/a><br><a href=\"https:\/\/fr.wikipedia.org\/wiki\/Point_de_ros%C3%A9e\">point de ros\u00e9e<\/a><br><a href=\"https:\/\/www.w3schools.com\/js\/js_math.asp\">math-javascript<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Le travail doit \u00eatre rendu sous la forme d&rsquo;un fichier archive votre_nom.zip<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">il faut donc cr\u00e9er un dossier <strong>votre_nom<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>dans ce dossier 4 fichiers<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>une image<\/strong><\/li>\n\n\n\n<li><strong>un fichier en .js<\/strong><\/li>\n\n\n\n<li><strong>un fichier .html<\/strong><\/li>\n\n\n\n<li><strong>un fichier .css<\/strong><\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>compresser le dossier pour obtenir votre_nom.zip<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>envoyer le fichier unique par mail : <a href=\"mailto:prof.yb.lfm@gmail.com\">prof.yb.lfm@gmail.com<\/a><\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>pour \u00eatre certain que l&rsquo;envoi ne soit pas bloqu\u00e9, modifiez l&rsquo;extension de votre fichier .js en .txt avant de compresser. le dossier<\/strong><\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"has-black-color has-text-color has-background has-link-color wp-elements-bf44c1f1935166465e98e3e81a75f5db wp-block-paragraph\" style=\"background:linear-gradient(135deg,rgb(216,244,179) 0%,rgb(17,184,81) 100%)\"><strong>1)HTML le langage des pages web<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">L&rsquo;activit\u00e9 pr\u00e9c\u00e9dente nous a montr\u00e9 la s\u00e9paration entre le contenu qui est g\u00e9r\u00e9 par le code HTML et le style par le code CSS.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"http:\/\/yb-isn.fr\/diu\/wp-content\/uploads\/2019\/10\/retenir-e1569656528481.jpg\" alt=\"\" class=\"wp-image-78\"\/><\/figure>\n\n\n\n<p class=\"has-very-dark-gray-color has-text-color wp-block-paragraph\"><strong>HTML<\/strong> : <strong>H<\/strong>yper<strong>T<\/strong>ext <strong>M<\/strong>arkup<strong>L<\/strong>angage <\/p>\n\n\n\n<p class=\"has-very-dark-gray-color has-text-color wp-block-paragraph\">Une page web est un type de document. HTML est un langage de description des pages web bas\u00e9 sur des balises destin\u00e9es au navigateur.<\/p>\n\n\n\n<p class=\"has-very-dark-gray-color has-text-color wp-block-paragraph\"><strong>CSS<\/strong> : <strong>C<\/strong>ascading <strong>S<\/strong>tyle <strong>S<\/strong>heet (feuille de style)<\/p>\n\n\n\n<p class=\"has-very-dark-gray-color has-text-color wp-block-paragraph\">Au langage HTML on associe le langage CSS pour la mise en forme.<\/p>\n\n\n\n<p class=\"has-very-dark-gray-color has-text-color wp-block-paragraph\"><strong>DOM<\/strong> : <strong>D<\/strong>ocument <strong>O<\/strong>bject <strong>M<\/strong>odel ou DOM<\/p>\n\n\n\n<p class=\"has-very-dark-gray-color has-text-color wp-block-paragraph\">Le DOM est un arbre cr\u00e9\u00e9 par le navigateur pour repr\u00e9senter la page.La racine de l&rsquo;arbre est &lt;html&gt;<\/p>\n\n\n<hr>\n\n\n<p class=\"has-black-color has-text-color has-background has-link-color wp-elements-d3ae707c4fd0ba3e5124f307f23663a3 wp-block-paragraph\" style=\"background:linear-gradient(135deg,rgb(216,244,179) 0%,rgb(17,184,81) 100%)\"><strong>2)Javascript : un langage de programmation pour les pages web<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/yb-isn.fr\/diu\/wp-content\/uploads\/2019\/10\/activite.png\" alt=\"\" class=\"wp-image-36\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Activit\u00e9 2 :html + javascript&nbsp;Pour ajouter du code javascript dans une page html il suffit d\u2019\u00e9crire le code entre deux balises:&nbsp;<strong>&lt;script&gt;\u2026..&lt;\/script&gt;<\/strong>&nbsp;Par la suite on placera le code javascript dans un fichier s\u00e9par\u00e9.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>Tapez le code ci-dessous dans un \u00e9diteur de texte comme notepad++<\/em><\/li>\n\n\n\n<li><em>Enregistrer le fichier au format html<\/em><\/li>\n\n\n\n<li><em>Examiner le fichier (clic droit) avec un navigateur<\/em><\/li>\n<\/ul>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!DOCTYPE html>\n&lt;html lang=\"fr\">\n  &lt;head>\n    &lt;meta charset=\"UTF-8\">\n    &lt;title>tjs003&lt;\/title>\n  &lt;\/head>\n  &lt;body>\n    &lt;h3 id=\"date\">&lt;\/h3>\n    &lt;h4 id=\"TITRE\">&lt;\/h4>\n    &lt;p id=\"texte\">&lt;\/p>\n\n    &lt;script>\n      \/\/ On cr\u00e9e un objet Date\n      const jour = new Date();\n      \/\/ Affichage dans un format lisible en fran\u00e7ais\n      document.getElementById(\"date\").textContent =\n        jour.toLocaleString(\"fr-FR\");\n\n      document.getElementById(\"TITRE\").textContent = \"BONJOUR !\";\n\n      const paragraphe = document.getElementById(\"texte\");\n      paragraphe.style.color = \"#FF00AF\";\n      paragraphe.textContent = \"Hello World !\";\n    &lt;\/script>\n  &lt;\/body>\n&lt;\/html>\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Si vous souhaitez aller plus loin :<a href=\"https:\/\/www.w3schools.com\/js\/js_htmldom_document.asp\">cliquez ici<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dans cette seconde activit\u00e9 nous avons vu comment manipuler un document hml en javascript gr\u00e2ce \u00e0 des identifiants attribu\u00e9s aux balises.La m\u00e9thode JavaScript getElementById() nous a permis de r\u00e9cup\u00e9rer les informations d&rsquo;une balise identifi\u00e9e par son id pour effectuer des modifications.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"> C&rsquo;est le DOM qui permet au script d&rsquo;examiner et de modifier le contenu affich\u00e9 par le  navigateur web. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Vous avez ci-dessous une repr\u00e9sentation du DOM de la page de l&rsquo;activit\u00e9 2. <\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"http:\/\/yb-isn.fr\/diu\/wp-content\/uploads\/2019\/11\/domjshtml.png\" alt=\"\" class=\"wp-image-446\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"http:\/\/yb-isn.fr\/diu\/wp-content\/uploads\/2019\/10\/retenir-e1569656528481.jpg\" alt=\"\" class=\"wp-image-78\"\/><\/figure>\n\n\n<hr>\n\n<div class=\"wp-block-image is-resized\">\n<figure class=\"alignleft\"><img decoding=\"async\" src=\"http:\/\/yb-isn.fr\/diu\/wp-content\/uploads\/2019\/10\/images.jpg\" alt=\"\" class=\"wp-image-125\"\/><\/figure>\n<\/div>\n\n\n<p class=\"has-very-dark-gray-color has-text-color wp-block-paragraph\">En 1995 Brendan Eich cr\u00e9e le langage javascript. Aujourd&rsquo;hui, presque toutes les pages Web contiennent du code JavaScript. JavaScript  est un langage de programmation  associ\u00e9 au langage HTML.<\/p>\n\n\n\n<p class=\"has-very-dark-gray-color has-text-color wp-block-paragraph\"> Le  d\u00e9veloppeur internet code ses pages HTML en y int\u00e9grant des sources  JavaScript. Le visiteur, par l&rsquo;interm\u00e9diaire de son navigateur, charge  le code des pages. <\/p>\n\n\n\n<p class=\"has-very-dark-gray-color has-text-color wp-block-paragraph\">C&rsquo;est le navigateur (cot\u00e9 client) qui interpr\u00e8te les codes HTML et JavaScript.  <\/p>\n\n\n\n<p class=\"has-very-dark-gray-color has-text-color wp-block-paragraph\">JavaScript est un langage objet et \u00e9v\u00e9nementiel. Le d\u00e9veloppeur  peut cr\u00e9er des objets sur la page, avec des propri\u00e9t\u00e9s et des m\u00e9thodes  et leur associer des actions en fonction d&rsquo;\u00e9v\u00e9nements d\u00e9clench\u00e9s par le  visiteur (passage de souris, clic, saisie clavier, etc&#8230;)  <\/p>\n\n\n<hr>\n\n\n<p class=\"has-black-color has-text-color has-background has-link-color wp-elements-c7be20032e956fed1a998795015cab5c wp-block-paragraph\" style=\"background:linear-gradient(135deg,rgb(216,244,179) 0%,rgb(17,184,81) 100%)\"><strong>3)Exemples d&rsquo;interactions avec l&rsquo;utilisateur<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dans ce qui suit nous allons simplement survoler ce langage. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Pour vous aider dans vos projets  vous pourrez trouver toutes les r\u00e9f\u00e9rences dont vous avez besoin sur w3school : <a href=\"https:\/\/www.w3schools.com\/js\/default.asp\">cliquer ici<\/a>   <\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"has-black-color has-text-color has-background has-link-color wp-elements-97273ffbf21dcf4675777ec4fc986a88 wp-block-paragraph\" style=\"background:linear-gradient(135deg,rgb(216,244,179) 0%,rgb(17,184,81) 100%)\"><strong>3-1)Gestion d&rsquo;un clic de souris<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/yb-isn.fr\/diu\/wp-content\/uploads\/2019\/10\/activite.png\" alt=\"\" class=\"wp-image-36\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Activit\u00e9 3 : Un bouton pour interagir<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!DOCTYPE html>\n&lt;html lang=\"fr\">\n  &lt;head>\n    &lt;meta charset=\"UTF-8\">\n    &lt;title>tjs004&lt;\/title>\n  &lt;\/head>\n  &lt;body>\n    &lt;p>Cliquez sur le bouton pour enregistrer votre pseudo&lt;\/p>\n\n    &lt;button type=\"button\" onclick=\"demanderNom()\">Cliquez&lt;\/button>\n\n    &lt;p id=\"test\">&lt;\/p>\n\n    &lt;script>\n      function demanderNom() {\n        let nom = prompt(\"Entrez votre nom\", \"pseudo\");\n        const zoneTexte = document.getElementById(\"test\");\n\n        if (nom === null || nom.trim() === \"\") {\n          zoneTexte.textContent = \"Vous n'avez pas saisi de pseudo.\";\n        } else {\n          zoneTexte.textContent = \"Bonjour \" + nom + \" !\";\n        }\n      }\n    &lt;\/script>\n  &lt;\/body>\n&lt;\/html>\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">variables :<a href=\"https:\/\/www.w3schools.com\/js\/js_variables.asp\">&nbsp;https:\/\/www.w3schools.com\/js\/js_variables.asp<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">boutons :<a href=\"https:\/\/www.w3schools.com\/tags\/tag_button.asp\">https:\/\/www.w3schools.com\/tags\/tag_button.asp<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">prompt() :&nbsp;<a href=\"https:\/\/www.w3schools.com\/jsref\/met_win_prompt.asp\">https:\/\/www.w3schools.com\/jsref\/met_win_prompt.asp<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp; Comprendre puis modifier le programme en modifiant l\u2019\u00e9v\u00e9nement d\u00e9clencheur de l\u2019interaction avec l\u2019utilisateur. Vous trouverez d\u2019autres \u00e9v\u00e9nements HTML&nbsp;<a href=\"https:\/\/www.w3schools.com\/js\/js_events.asp\" target=\"_blank\" rel=\"noreferrer noopener\">ici<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"http:\/\/yb-isn.fr\/diu\/wp-content\/uploads\/2019\/10\/dom4.png\" alt=\"\" class=\"wp-image-48\"\/><\/figure>\n\n\n\n<video controls=\"\" width=\"320\" height=\"240\">\r\n  <source src=\"http:\/\/yb-isn.fr\/ihm\/boutonevent.mp4\" type=\"video\/mp4\">\r\n<\/video>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"http:\/\/yb-isn.fr\/diu\/wp-content\/uploads\/2019\/10\/retenir-e1569656528481.jpg\" alt=\"\" class=\"wp-image-78\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">L&rsquo;utilisateur d\u00e9clenche un \u00e9v\u00e9nement (en cliquant sur le bouton par exemple). Cet \u00e9v\u00e9nement entra\u00eene l\u2019ex\u00e9cution d&rsquo;un code JavaScript sur la machine de l&rsquo;utilisateur.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Les \u00e9v\u00e9nements sont donc des actions de l&rsquo;utilisateur qui permettent d&rsquo;ajouter de l&rsquo;interactivit\u00e9 \u00e0 une page web.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Tester en ligne  d&rsquo;autres exemples sur la gestion des \u00e9v\u00e9nements :<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/www.w3schools.com\/js\/js_events.asp\">cliquer ici<\/a><\/p>\n\n\n<hr \/>\n\n\n<p class=\"has-very-light-gray-background-color has-background wp-block-paragraph\"><strong>3-2)clic ,entr\u00e9e clavier , tests, calculs&#8230;<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!DOCTYPE html>\n&lt;html lang=\"fr\">\n  &lt;head>\n    &lt;meta charset=\"UTF-8\">\n    &lt;title>Alea&lt;\/title>\n    &lt;link rel=\"icon\" href=\"alea.ico\">\n    &lt;script src=\"alea.js\">&lt;\/script>\n  &lt;\/head>\n  &lt;body>\n    &lt;h2>Tirage al\u00e9atoire&lt;\/h2>\n    &lt;p>Saisir un nombre entre 1 et 10 :&lt;\/p>\n    &lt;input id=\"nombre\" type=\"number\" min=\"1\" max=\"10\">\n\n    &lt;button type=\"button\" onclick=\"myFunction()\">Envoyer&lt;\/button>\n\n    &lt;h3 id=\"reponse\">&lt;\/h3>\n  &lt;\/body>\n&lt;\/html>\n\n<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">function myFunction() {\n  var x, y, text;\n\n  \/\/ R\u00e9cup\u00e9ration et conversion en nombre entier\n  x = parseInt(document.getElementById(\"nombre\").value, 10);\n\n  \/\/ Tirage d'un entier entre 1 et 10 inclus\n  y = getRandomInt(1, 10);\n\n  if (isNaN(x) || x &lt; 1 || x > 10) {\n    text = \"Non autoris\u00e9\";\n  } else {\n    if (x === y) {\n      text = \"gagn\u00e9 bravo !\";\n    } else {\n      text = \"perdu ! la bonne r\u00e9ponse \u00e9tait \" + y;\n    }\n  }\n\n  document.getElementById(\"reponse\").textContent = text;\n}\n\nfunction getRandomInt(min, max) {\n  \/\/ renvoie un entier entre min et max, bornes incluses\n  return Math.floor(Math.random() * (max - min + 1)) + min;\n}\n\n<\/pre>\n\n\n\n<p class=\"has-black-color has-text-color has-background has-link-color wp-elements-a83693d6a3c9bda9a80496220e1ba3db wp-block-paragraph\" style=\"background:linear-gradient(135deg,rgb(216,244,179) 0%,rgb(17,184,81) 100%)\"><strong>4) projets <\/strong><\/p>\n\n\n\n<p class=\"has-very-light-gray-background-color has-background has-medium-font-size wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"has-black-color has-text-color has-background has-link-color wp-elements-4b0b83409094d28a91042f3c709f8bf3 wp-block-paragraph\" style=\"background:linear-gradient(135deg,rgb(216,244,179) 0%,rgb(17,184,81) 100%)\"><strong>4-1)Projet 1<\/strong> : convertisseur de monnaies<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/yb-isn.fr\/monnaie\" target=\"_blank\" rel=\"noreferrer noopener\">Lien vers  convertisseur est en ligne<\/a><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Inspecter la page <\/li>\n\n\n\n<li>cr\u00e9er un dossier monnaie et placer les 4 fichiers dans le dossier .<\/li>\n\n\n\n<li>Tester la page web en local<\/li>\n\n\n\n<li>Tester la page sur un serveur web local (si disponible)<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-esab-accordion esab-91u5o2te\" data-mode=\"global\" data-close=\"true\"><div class=\"esab__container\">\n<div class=\"wp-block-esab-accordion-child\"><div class=\"esab__head\" role=\"button\" aria-expanded=\"false\"><div class=\"esab__heading_txt\"><p class=\"esab__heading_tag\">Explications<\/p><\/div><div class=\"esab__icon\"><div class=\"esab__collapse\"> <svg version=\"1.2\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\"><path fill-rule=\"evenodd\" d=\"m3.5 20.5c-4.7-4.7-4.7-12.3 0-17 4.7-4.7 12.3-4.7 17 0 4.6 4.7 4.6 12.3 0 17-4.7 4.6-12.3 4.6-17 0zm0.9-0.9c4.2 4.2 11 4.2 15.2 0 4.2-4.2 4.2-11 0-15.2-4.2-4.3-11-4.3-15.2 0-4.3 4.2-4.3 11 0 15.2z\"><\/path><path d=\"m11.4 15.9v-3.3h-3.3c-0.3 0-0.6-0.3-0.6-0.6 0-0.4 0.3-0.6 0.6-0.6h3.3v-3.3c0-0.3 0.3-0.6 0.6-0.6 0.3 0 0.6 0.3 0.6 0.6v3.3h3.3c0.3 0 0.6 0.2 0.6 0.6q0 0.2-0.2 0.4-0.2 0.2-0.4 0.2h-3.3v3.3q0 0.2-0.2 0.4-0.2 0.2-0.4 0.2c-0.4 0-0.6-0.3-0.6-0.6z\"><\/path><\/svg> <\/div><div class=\"esab__expand\"> <svg version=\"1.2\" viewBox=\"0 0 24 24\" width=\"24\" height=\"24\"><path fill-rule=\"evenodd\" d=\"m12 24c-6.6 0-12-5.4-12-12 0-6.6 5.4-12 12-12 6.6 0 12 5.4 12 12 0 6.6-5.4 12-12 12zm10.6-12c0-5.9-4.7-10.6-10.6-10.6-5.9 0-10.6 4.7-10.6 10.6 0 5.9 4.7 10.6 10.6 10.6 5.9 0 10.6-4.7 10.6-10.6z\"><\/path><path d=\"m5.6 11.3h12.8v1.4h-12.8z\"><\/path><\/svg> <\/div><\/div><\/div><div class=\"esab__body\">\n<p class=\"wp-block-paragraph\">Explication  <strong>ligne par ligne<\/strong> de chaque fichier : <strong>HTML<\/strong>, <strong>CSS<\/strong>, et <strong>JS<\/strong>.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\">\ud83d\udccc 1. <strong>Explication du fichier HTML (index.html)<\/strong><\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;!DOCTYPE html>\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u27a1 Indique que le document est en HTML5 (la version actuelle du langage).<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;html lang=\"fr\">\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u27a1 Le code HTML commence ici et indique que la langue principale est <strong>le fran\u00e7ais<\/strong>.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;head>\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u27a1 D\u00e9but de la partie <strong>invisible<\/strong> qui contient les informations du site (titre, liens, etc.).<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">    &lt;meta charset=\"UTF-8\">\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u27a1 Indique que les caract\u00e8res utilis\u00e9s sont en UTF-8 (important pour les accents).<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">    &lt;title>Convertisseur de devises&lt;\/title>\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u27a1 Texte affich\u00e9 dans l\u2019onglet du navigateur.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">    &lt;link rel=\"stylesheet\" href=\"styles.css\">\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u27a1 On relie le fichier HTML \u00e0 notre fichier <strong>CSS<\/strong> (styles visuels).<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">    &lt;link rel=\"icon\" type=\"image\/png\" href=\"monnaie.png\">\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u27a1 D\u00e9finit l\u2019ic\u00f4ne affich\u00e9e dans l\u2019onglet (favicon).<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;\/head>\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u27a1 Fin de la section d\u2019informations.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;body>\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u27a1 D\u00e9but de la partie visible de la page.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;h1>Convertisseur&lt;\/h1>\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u27a1 Titre principal.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;img src=\"devise.png\" alt=\"Image devise\" class=\"logo\">\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u27a1 Affiche une image.<br><code>class=\"logo\"<\/code> permet de la styliser via le CSS.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;a href=\"https:\/\/www.boursorama.com\/bourse\/devises\" target=\"_blank\">\n    Cours des devises\n&lt;\/a>\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u27a1 Lien vers un site externe.<br><code>target=\"_blank\"<\/code> \u2192 s\u2019ouvre dans un nouvel onglet.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h5 class=\"wp-block-heading\">\ud83e\uddfe Le formulaire<\/h5>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div class=\"form-container\">\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u27a1 Conteneur (bo\u00eete) pour organiser les champs.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">Chaque zone suit cette forme :<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;label>\n    Devise actuelle :\n    &lt;input type=\"text\" id=\"devise\" placeholder=\"Ex: EUR\">\n&lt;\/label>\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u27a1 <code>label<\/code> : texte descriptif<br>\u27a1 <code>input<\/code> : champ dans lequel l\u2019utilisateur tape quelque chose<br>\u27a1 <code>id=\"devise\"<\/code> : permet de retrouver ce champ facilement dans le <strong>JavaScript<\/strong><br>\u27a1 <code>placeholder<\/code> : exemple affich\u00e9 en gris clair \u00e0 l\u2019int\u00e9rieur<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Les autres champs suivent la m\u00eame logique :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>nouvelle devise<\/li>\n\n\n\n<li>taux de conversion<\/li>\n\n\n\n<li>somme \u00e0 convertir<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;button id=\"convertir\">Convertir&lt;\/button>\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u27a1 Bouton qui d\u00e9clenche la conversion lorsque l\u2019on clique dessus.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;h2 id=\"resultat\">&lt;\/h2>\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u27a1 Zone o\u00f9 le r\u00e9sultat de la conversion va s\u2019afficher.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;script src=\"script.js\">&lt;\/script>\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u27a1 Charge le fichier JavaScript pour que la page devienne interactive.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;\/body>\n&lt;\/html>\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u27a1 Fin de la page HTML.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\">\ud83c\udfa8 2. Explication du fichier CSS (styles.css)<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">body {\n    font-family: Arial, sans-serif;\n    text-align: center;\n    background: white;\n    padding: 20px;\n}\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u27a1 Donne une police agr\u00e9able<br>\u27a1 Centre le contenu<br>\u27a1 Met du padding (marges int\u00e9rieures)<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.logo {\n    width: 200px;\n    margin-bottom: 15px;\n}\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u27a1 Donne une taille \u00e0 l\u2019image<br>\u27a1 Ajoute un espace en bas<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.form-container {\n    margin: 20px auto;\n    width: 280px;\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u27a1 Centrage automatique<br>\u27a1 Largeur fix\u00e9e<br>\u27a1 Organisation verticale (flexbox)<br>\u27a1 Espacement entre les champs<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">label {\n    text-align: left;\n    font-weight: bold;\n}\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u27a1 Les descriptions des champs sont en gras et align\u00e9es \u00e0 gauche.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">input {\n    width: 100%;\n    padding: 6px;\n    margin-top: 4px;\n    border: 1px solid #aaa;\n    border-radius: 5px;\n}\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u27a1 Les zones de texte sont jolies et arrondies<br>\u27a1 Le <code>padding<\/code> agrandit l\u2019int\u00e9rieur<br>\u27a1 Le <code>border-radius<\/code> arrondit les coins<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">button {\n    padding: 10px;\n    font-size: 16px;\n    cursor: pointer;\n    background: #0077ff;\n    color: white;\n    border: none;\n    border-radius: 6px;\n    transition: 0.2s;\n}\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u27a1 Look moderne pour le bouton<br>\u27a1 <code>cursor: pointer<\/code> \u2192 main quand on passe dessus<br>\u27a1 <code>transition<\/code> pour un effet doux<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">button:hover {\n    background: #005fcc;\n}\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u27a1 Change la couleur quand on passe la souris dessus.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">#resultat {\n    margin-top: 20px;\n    color: #0a4;\n    font-weight: bold;\n}\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u27a1 Zone du r\u00e9sultat mise en avant en vert.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\">\u2699\ufe0f 3. Explication du fichier JavaScript (script.js)<\/h4>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">document.getElementById(\"convertir\").addEventListener(\"click\", () => {\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u27a1 On r\u00e9cup\u00e8re le bouton gr\u00e2ce \u00e0 son <code>id=\"convertir\"<\/code><br>\u27a1 On dit : \u201cQuand on clique dessus, ex\u00e9cute ce code\u201d.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h5 class=\"wp-block-heading\">\ud83d\udd0d R\u00e9cup\u00e9ration des valeurs entr\u00e9es :<\/h5>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">const devise = document.getElementById(\"devise\").value.trim();\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u27a1 On lit ce que l\u2019utilisateur a \u00e9crit dans le champ \u00ab\u00a0devise\u00a0\u00bb.<br>\u27a1 <code>.trim()<\/code> enl\u00e8ve les espaces inutiles.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">M\u00eame chose pour les autres champs :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>newDevise<\/code><\/li>\n\n\n\n<li><code>coef<\/code><\/li>\n\n\n\n<li><code>somme<\/code><\/li>\n<\/ul>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">const result = document.getElementById(\"resultat\");\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u27a1 Zone o\u00f9 afficher le r\u00e9sultat.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h5 class=\"wp-block-heading\">\u26a0 V\u00e9rification des saisies<\/h5>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">if (!devise || !newDevise || isNaN(coef) || isNaN(somme)) {\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u27a1 Si un champ est vide ou mal rempli\u2026<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">result.textContent = \"Veuillez remplir toutes les informations correctement.\";\nresult.style.color = \"red\";\nreturn;\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u27a1 On affiche un message d\u2019erreur en rouge<br>\u27a1 <code>return<\/code> arr\u00eate le code ici<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h5 class=\"wp-block-heading\">\ud83e\uddee Calcul de la conversion<\/h5>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">const montantConverti = coef * somme;\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u27a1 Formule : <strong>somme \u00d7 taux de conversion<\/strong><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h5 class=\"wp-block-heading\">\ud83d\udce4 Affichage du r\u00e9sultat<\/h5>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">result.style.color = \"#0a4\";\nresult.textContent = `${somme.toFixed(2)} ${devise} valent ${montantConverti.toFixed(2)} ${newDevise}`;\n<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u27a1 Change la couleur du texte en vert<br>\u27a1 <code>toFixed(2)<\/code> \u2192 arrondi \u00e0 2 d\u00e9cimales<br>\u27a1 Affiche la phrase compl\u00e8te<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\">\ud83c\udf89 R\u00e9sum\u00e9 pour d\u00e9butant<\/h4>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>Fichier<\/th><th>R\u00f4le<\/th><\/tr><\/thead><tbody><tr><td><strong>HTML<\/strong><\/td><td>Structure de la page (titres, images, champs, boutons)<\/td><\/tr><tr><td><strong>CSS<\/strong><\/td><td>Apparence de la page (couleurs, disposition, tailles)<\/td><\/tr><tr><td><strong>JavaScript<\/strong><\/td><td>Logique : r\u00e9cup\u00e8re les valeurs, calcule, affiche<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n<\/div><\/div>\n<\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"has-black-color has-text-color has-background has-link-color wp-elements-8d0afbbb70003c54647314436cd7cffb wp-block-paragraph\" style=\"background:linear-gradient(135deg,rgb(216,244,179) 0%,rgb(17,184,81) 100%)\"><strong>4-2)Projet 2<\/strong><\/p>\n\n\n\n<strong><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-36\" src=\"http:\/\/yb-isn.fr\/diu\/wp-content\/uploads\/2019\/10\/activite.png\" alt=\"\" width=\"42\" height=\"31\">Probl\u00e8me 2 :Plafond nuageux<\/strong>\r\n\r\n<hr>\r\n<video controls=\"\" width=\"640\" height=\"480\">\r\n  <source src=\"http:\/\/yb-isn.fr\/ihm\/nuages.mp4\" type=\"video\/mp4\"><br>\r\n\r\n<\/video><br><br>\n\n\n<hr>\n\n\n<p class=\"wp-block-paragraph\">Calculer et afficher en ligne la hauteur du plafond nuageux \u00e0 partir de la temp\u00e9rature et du taux d&rsquo;humidit\u00e9.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Trois ressources pour vous aider :<br><a href=\"https:\/\/fr.wikipedia.org\/wiki\/Base_d%27un_nuage\">base d&rsquo;un nuage<\/a><br><a href=\"https:\/\/fr.wikipedia.org\/wiki\/Point_de_ros%C3%A9e\">point de ros\u00e9e<\/a><br><a href=\"https:\/\/www.w3schools.com\/js\/js_math.asp\">math-javascript<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_crdt_document":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-168","post","type-post","status-publish","format-standard","hentry","category-non-classe"],"_links":{"self":[{"href":"https:\/\/yb-isn.fr\/2025\/nsi\/wp-json\/wp\/v2\/posts\/168","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yb-isn.fr\/2025\/nsi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/yb-isn.fr\/2025\/nsi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/yb-isn.fr\/2025\/nsi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yb-isn.fr\/2025\/nsi\/wp-json\/wp\/v2\/comments?post=168"}],"version-history":[{"count":24,"href":"https:\/\/yb-isn.fr\/2025\/nsi\/wp-json\/wp\/v2\/posts\/168\/revisions"}],"predecessor-version":[{"id":226,"href":"https:\/\/yb-isn.fr\/2025\/nsi\/wp-json\/wp\/v2\/posts\/168\/revisions\/226"}],"wp:attachment":[{"href":"https:\/\/yb-isn.fr\/2025\/nsi\/wp-json\/wp\/v2\/media?parent=168"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/yb-isn.fr\/2025\/nsi\/wp-json\/wp\/v2\/categories?post=168"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/yb-isn.fr\/2025\/nsi\/wp-json\/wp\/v2\/tags?post=168"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}