{"id":985,"date":"2021-03-15T10:13:56","date_gmt":"2021-03-15T09:13:56","guid":{"rendered":"http:\/\/labodemaths.fr\/WordPress3\/?p=985"},"modified":"2021-03-22T16:00:38","modified_gmt":"2021-03-22T15:00:38","slug":"nsi-js-et-html-tp2","status":"publish","type":"post","link":"https:\/\/labodemaths.fr\/WordPress3\/nsi-js-et-html-tp2\/","title":{"rendered":"NSI : JS et HTML , TP1"},"content":{"rendered":"\n<h3>1. Mise en place<\/h3>\n\n\n\n<ul><li>cr\u00e9er un dossier tp1_js,<\/li><li>ouvrir votre \u00e9diteur de code et copier-coller les codes suivants respectivement dans une page index.html et script.js que vous enregistrerez dans votre dossier :<\/li><\/ul>\n\n\n\n<p>La page index.html :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html lang=\"fr\" >\n\n&lt;head>\n  &lt;meta charset=\"UTF-8\">\n  &lt;title>Dessiner et programmer avec canvas_TP1&lt;\/title>\n&lt;script  src=\"script.js\">&lt;\/script>\n&lt;\/head>\n&lt;body onload=\"draw()\">\n&lt;\/body>\n&lt;\/html><\/code><\/pre>\n\n\n\n<p>La page script.js :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ on appelle la fonction draw lorsque la page est bien charg\u00e9e\nfunction draw() { \n    \/\/ on cr\u00e9e un elt du DOM de type canvas\n    var elt = document.createElement(\"canvas\"); \n    \/\/ on l'ajoute \u00e0 un noeud du DOM\n    document.body.appendChild(elt);\n  \/\/ on d\u00e9clare un \u00e9l\u00e9ment canvas qui est le premier \u00e9l\u00e9ment de type canvas dans le document\n   var canvas = document.getElementsByTagName(\"canvas\")[0]\n   canvas.width=\"200\";\n    canvas.height=\"200\";\n   \/\/ on d\u00e9clare notre espace de dessin en 2d\n   var ctx = canvas.getContext(\"2d\");\n   \n\/\/ on attache un d\u00e9tecteur d'\u00e9v\u00e9nement sur le canvas\n canvas.addEventListener(\"mousedown\",dessiner , false);\n dessiner();\n    \nfunction dessiner(evt){\n    couleur1='rgb(255, 165, 0)';\n    couleur2='rgb(101, 131, 229)';\n     for (var x=0;x&lt;canvas.width;x=x+10){\n         for ( var y=0;y&lt;canvas.height;y=y+10){\n             if (Math.random()>0.5){\n                 ctx.fillStyle =couleur1;\n             }\n             else {\n               ctx.fillStyle =couleur2;  \n             }\n             ctx.fillRect(x,y,10,10);\n         }\n     }     \n }\n}<\/code><\/pre>\n\n\n\n<ul><li>tester la page html dans votre navigateur.<\/li><\/ul>\n\n\n\n<h3>Exercice 1<\/h3>\n\n\n\n<ul><li>Examiner la page html et le js, d\u00e9terminer la fonction qui permet de lancer la fonction draw() du script js,<\/li><li>Examiner la page html : l&rsquo;\u00e9l\u00e9ment canvas qui nous permet de dessiner est-il pr\u00e9sent dans cette page ? Comment est-il cr\u00e9e ?<\/li><li>ce TP est inspir\u00e9 d&rsquo;oeuvres de l&rsquo;artiste fran\u00e7ais Fran\u00e7ois Morellet appel\u00e9e 10 000 carr\u00e9s, modifier le js pour que le canvas soit un carr\u00e9 de 800 pixels de c\u00f4t\u00e9 et qu&rsquo;il soit bien rempli par 10 000 carr\u00e9s,<\/li><li>changer les couleurs des carr\u00e9s \u00e0 votre convenance.<\/li><\/ul>\n\n\n\n<h3>Exercice 2 : un peu de maths et de probabilit\u00e9.<\/h3>\n\n\n\n<ul><li>examiner le js, d\u00e9terminer la probabilit\u00e9 pour qu&rsquo;un carr\u00e9 soit d&rsquo;une certaine couleur,<\/li><li>modifier le js pour qu&rsquo;il compte le nombre de carr\u00e9s de couleur1, afficher cette valeur \u00e0 la fin de l&rsquo;ex\u00e9cution de la fonction draw() par un message alert(),<\/li><li>de quelle valeur doit \u00eatre proche ce nombre de carr\u00e9s ?<\/li><li>modifier le js pour que la probabilit\u00e9 qu&rsquo;un carr\u00e9 soit de couleur1 soit \u00e0 pr\u00e9sent de 30%. Sur 10 000 carr\u00e9s, \u00e0 combien peut-on estimer le nombre de carr\u00e9s de cette couleur ? Cette estimation est-elle v\u00e9rifi\u00e9e dans la pratique ?<\/li><\/ul>\n\n\n\n<h3>Exercice 3 : un peu d&rsquo;interactivit\u00e9<\/h3>\n\n\n\n<p>On consid\u00e8re \u00e0 pr\u00e9sent les modifications suivantes dans le html et le js :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html lang=\"fr\" >\n\n&lt;head>\n  &lt;meta charset=\"UTF-8\">\n  &lt;title>Dessiner et programmer avec canvas_TP2&lt;\/title>\n&lt;\/head>\n&lt;body>\n&lt;form>\n    &lt;div>\n    &lt;label>Veuillez choisir la couleur 1 :&lt;\/label>\n  &lt;input name=\"couleur1\" id=\"couleur1\" type=\"color\" required class=\"form-control\" value='#ff10a9'>\n    &lt;\/div>\n  &lt;div>\n    &lt;input type=\"button\" value=\"changer couleur\" onclick=\"changer_couleur()\">\n  &lt;\/div>\n&lt;\/form>\n&lt;\/body>\n\n&lt;\/html>\n&lt;script  src=\"index.js\">&lt;\/script>\n<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>couleur1=document.getElementsByName(\"couleur1\")[0].value;\ncouleur2='#1f10a9'\nvar elt = document.createElement(\"canvas\"); \ndocument.body.appendChild(elt);\nvar canvas = document.getElementsByTagName(\"canvas\")[0]\ncanvas.width=\"800\";\ncanvas.height=\"800\";\nvar ctx = canvas.getContext(\"2d\");\ncanvas.addEventListener(\"mousedown\",dessiner , false);\ndessiner();\n  \n    \nfunction dessiner(evt){\n    couleur1=document.getElementsByName(\"couleur1\")[0].value;\n     for (var x=0;x&lt;canvas.width;x=x+10){\n         for ( var y=0;y&lt;canvas.height;y=y+10){\n             if (Math.random()>0.5){\n                 ctx.fillStyle =couleur1;\n             }\n             else {\n               ctx.fillStyle =couleur2;  \n             }\n             ctx.fillRect(x,y,10,10);\n         }\n     }     \n }\n\n\nfunction changer_couleur(){\n    couleur1=document.getElementsByName(\"couleur1\")[0].value;\n    dessiner();\n}<\/code><\/pre>\n\n\n\n<ul><li>Analyser le html et le js,<\/li><li>modifier le html et le js pour ajouter un deuxi\u00e8me bouton couleur qui permettra de modifier la seconde couleur des carr\u00e9s.<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>1. Mise en place cr\u00e9er un dossier tp1_js, ouvrir votre \u00e9diteur de code et copier-coller&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/labodemaths.fr\/WordPress3\/nsi-js-et-html-tp2\/\">Read the post<span class=\"screen-reader-text\">NSI : JS et HTML , TP1<\/span><\/a><\/div>\n","protected":false},"author":2,"featured_media":986,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[57],"tags":[],"_links":{"self":[{"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/posts\/985"}],"collection":[{"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/comments?post=985"}],"version-history":[{"count":4,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/posts\/985\/revisions"}],"predecessor-version":[{"id":1521,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/posts\/985\/revisions\/1521"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/media\/986"}],"wp:attachment":[{"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/media?parent=985"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/categories?post=985"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/tags?post=985"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}