{"id":961,"date":"2019-11-19T10:23:42","date_gmt":"2019-11-19T09:23:42","guid":{"rendered":"http:\/\/labodemaths.fr\/WordPress3\/?p=961"},"modified":"2020-09-09T19:19:47","modified_gmt":"2020-09-09T17:19:47","slug":"nsi-tp-1-sur-html-et-javascript","status":"publish","type":"post","link":"https:\/\/labodemaths.fr\/WordPress3\/nsi-tp-1-sur-html-et-javascript\/","title":{"rendered":"NSI : TP 1 sur HTML et Javascript"},"content":{"rendered":"\n<h3>1. Mise en place<\/h3>\n\n\n\n<ul><li>cr\u00e9er un dossier TP1_JS,<\/li><li>ouvrir un \u00e9diteur de code comme Notepad,<\/li><li>cr\u00e9er un premier fichier, l&rsquo;enregistrer avec le nom <strong>index.html<\/strong> dans votre dossier,<\/li><li>cr\u00e9er un second fichier, l&rsquo;enregister avec le nom <strong>programme.js<\/strong>,<\/li><li>copier le code ci-dessous dans le fichier index.html et enregistre le \u00e0 nouveau<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- on d\u00e9clare le document comme un document de type html5 -->\n&lt;!DOCTYPE html>\n&lt;!-- on pr\u00e9cise la langue utilis\u00e9e -->\n&lt;html lang=\"fr\" >\n&lt;!-- le head pr\u00e9cise diff\u00e9rents \u00e9l\u00e9ments importants de la page -->\n&lt;head>\n&lt;!-- pr\u00e9cise qu'on utilise l'alphabet occidental cod\u00e9 sur 8 octects -->\n  &lt;meta charset=\"UTF-8\">\n  &lt;title>Dessiner et programmer avec canvas_TP1&lt;\/title>\n&lt;!-- On charge le script js en suivant le chemin indiqu\u00e9 par la source src -->\n&lt;script  src=\"programme.js\">&lt;\/script>\n&lt;\/head>\n&lt;!-- le body contient les \u00e9l\u00e9ments de notre page html -->\n&lt;!-- la fonction js draw() est appel\u00e9e au chargement de la page -->\n&lt;body onload=\"draw()\">\n    &lt;header>\n        &lt;h1>Mon premier TP d'interaction d'une page HTML avec du javascript&lt;\/h1>\n    &lt;\/header>\n    &lt;section>\n        &lt;article>\n    &lt;canvas id=\"espace_de_dessin\" width=\"400\" height=\"400\">&lt;\/canvas>\n            &lt;\/article>\n        &lt;article>\n    Cliquer au dessus.\n            &lt;\/article>\n    &lt;\/section>\n    &lt;footer>TP 1 avec l'\u00e9l\u00e9ment canvas et des interactions avec le client gr\u00e2ce au JS.&lt;\/footer>\n&lt;\/body>\n&lt;\/html><\/code><\/pre>\n\n\n\n<ul><li>copier et coller dans le fichier programme.js le code suivant et enregistrer le :<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ permet de mettre des commentaires non ex\u00e9cut\u00e9s par le js\n\/\/ d\u00e9claration d'une fonction en JS\n\/\/ attention aux {} qui d\u00e9limitent celle-ci\n\/\/ chaque commande JS se termine par ;\nfunction draw(){\n    alert(\"Ma fonction est effectu\u00e9e au chargement de la page.\");\n}<\/code><\/pre>\n\n\n\n<ul><li>ouvrir le fichier index.html avec le navigateur de votre choix,<\/li><li>r\u00e9duire les fen\u00eatres de votre navigateur et de votre \u00e9diteur de code de fa\u00e7on \u00e0 les avoir l&rsquo;une \u00e0 c\u00f4t\u00e9 de l&rsquo;autre pour travailler plus facilement.<\/li><\/ul>\n\n\n\n<h3>2. Variables : d\u00e9claration, variable locale et variable globale.<\/h3>\n\n\n\n<p>En javascript, les variables se d\u00e9clarent par l&rsquo;instruction var.<br>Comme en python, elles ne sont pas typ\u00e9es lors de leur d\u00e9claration.<br>Modifier votre script js comme suit, enregistrer le et actualiser votre navigateur pour observer le changement.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function draw(){\n    var a=5; \/\/ variable locale\n    alert(a);\n}<\/code><\/pre>\n\n\n\n<p>puis<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var a=4; \/\/ variable globale\n\nfunction draw(){\n    \n    alert(a); \n}<\/code><\/pre>\n\n\n\n<p>et enfin :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var a=\"premiere valeur\"; \/\/ variable globale\n\nfunction draw(){\n    a=\"autre valeur\"\n    alert(a); \n    autre_appel()\n}\nfunction autre_appel(){\n    alert(a)\n}\nalert(a);<\/code><\/pre>\n\n\n\n<p>et enfin enfin :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var a=\"premiere valeur\"; \/\/ variable globale\n\nfunction draw(){\n    a=\"autre valeur\"\n    alert(a); \n    autre_appel()\n}\nfunction autre_appel(){\n    alert(a)\n}\nalert(a);\nautre_appel();<\/code><\/pre>\n\n\n\n<h3>3. Gestion d&rsquo;\u00e9v\u00e9nements<\/h3>\n\n\n\n<p>En javascript on peut attacher aux \u00e9l\u00e9ments des \u00e9couteurs d&rsquo;\u00e9v\u00e9nement qui pourront d\u00e9clencher des fonctions selon les besoins.<br>On peut pr\u00e9ciser le type d&rsquo;\u00e9v\u00e9nements que l&rsquo;on d\u00e9sire attacher, et m\u00eame en attacher diff\u00e9rents \u00e0 un m\u00eame \u00e9l\u00e9ment.<\/p>\n\n\n\n<h4>A. modification du html<\/h4>\n\n\n\n<p>Modifier le html comme suit :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- le head pr\u00e9cise diff\u00e9rents \u00e9l\u00e9ments importants de la page -->\n&lt;head>\n&lt;!-- pr\u00e9cise qu'on utilise l'alphabet occidental cod\u00e9 sur 8 octects -->\n  &lt;meta charset=\"UTF-8\">\n  &lt;title>Dessiner et programmer avec canvas_TP1&lt;\/title>\n&lt;!-- On charge le script js en suivant le chemin indiqu\u00e9 par la source src -->\n&lt;script  src=\"programme.js\">&lt;\/script>\n&lt;\/head>\n&lt;!-- le body contient les \u00e9l\u00e9ments de notre page html -->\n&lt;body>\n    &lt;header>\n        &lt;h1>Mon premier TP d'interaction d'une page HTML avec du javascript&lt;\/h1>\n    &lt;\/header>\n    &lt;section>\n        &lt;article>\n    &lt;canvas id=\"espace_de_dessin\" width=\"400\" height=\"400\">&lt;\/canvas>\n            &lt;\/article>\n        &lt;article id=\"bouton\">\n    Cliquer au dessus.\n            &lt;\/article>\n    &lt;\/section>\n    &lt;footer>TP 1 avec l'\u00e9l\u00e9ment canvas et des interactions avec le client gr\u00e2ce au JS.&lt;\/footer>\n&lt;\/body>\n&lt;\/html><\/code><\/pre>\n\n\n\n<p>et le js :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>var mon_elt=document.getElementById(\"bouton\");\nmon_elt.addEventListener(\"mousedown\",dessin,false);\n\/\/ attention au param\u00e8tre evt n\u00e9cessaire pour le passage de l'\u00e9v\u00e9nemnt\nfunction dessin(evt){\n    alert(\"vous avez cliqu\u00e9\");\n    \n}<\/code><\/pre>\n\n\n\n<p>enregistrer le html et le js et actualiser votre navigateur, utiliser les outils de d\u00e9veloppement web du navigateur pour d\u00e9terminer la nature de l&rsquo;erreur emp\u00eachant le fonctionnement de votre programme.<\/p>\n\n\n\n<p>Le programme pose un probl\u00e8me de fonctionnement :<\/p>\n\n\n\n<ul><li>il est charg\u00e9 avant le chargement total de votre page html,<\/li><li>donc la variable mon_elt d\u00e9signe un \u00e9l\u00e9ment qui n&rsquo;existe pas encore &#8230;<\/li><\/ul>\n\n\n\n<p>Pour r\u00e9soudre ce probl\u00e8me :<\/p>\n\n\n\n<h4>1ere solution : faire appel au script apr\u00e8s le chargement de la page.<\/h4>\n\n\n\n<p>Pour cela on peut appeler le script \u00e0 la fin de la page html en passant la ligne 11 :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script  src=\"programme.js\">&lt;\/script><\/code><\/pre>\n\n\n\n<p>\u00e0 la fin du document html :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;\/body>\n&lt;\/html>\n&lt;script  src=\"programme.js\">&lt;\/script><\/code><\/pre>\n\n\n\n<h4>2eme solution :<\/h4>\n\n\n\n<p>On la verra plus tard, elle consiste \u00e0 utiliser la propri\u00e9t\u00e9 onload de l&rsquo;\u00e9l\u00e9ment body et \u00e0 d\u00e9clarer une fonction qui sera appel\u00e9e lorsque la page html est totalement charg\u00e9e.<\/p>\n\n\n\n<h4>Exercice 1<\/h4>\n\n\n\n<ul><li>Donner l&rsquo;id \u00ab\u00a0mon_espace_de_dessin\u00a0\u00bb \u00e0 l&rsquo;\u00e9l\u00e9ment canvas,<\/li><li>modifier le js pour que la fonction dessin se d\u00e9clenche lorsque la souris passe au dessus de l&rsquo;\u00e9l\u00e9ment canvas ( on utilisera l&rsquo;\u00e9v\u00e9nement mousemove.<\/li><\/ul>\n\n\n\n<h3>4. Un peu de dessin<\/h3>\n\n\n\n<p>Copier coller les codes html et js suivants :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html lang=\"fr\" >\n&lt;head>\n  &lt;meta charset=\"UTF-8\">\n  &lt;title>Dessiner et programmer avec canvas_TP1&lt;\/title>\n&lt;\/head>\n&lt;body>\n    &lt;header>\n        &lt;h1>Mon premier TP d'interaction d'une page HTML avec du javascript&lt;\/h1>\n    &lt;\/header>\n    &lt;section>\n        &lt;article>\n    &lt;canvas id=\"espace_de_dessin\" width=\"400\" height=\"400\">&lt;\/canvas>\n            &lt;\/article>\n        &lt;article id=\"bouton\">\n    Cliquer au dessus.\n            &lt;\/article>\n    &lt;\/section>\n    &lt;footer>TP 1 avec l'\u00e9l\u00e9ment canvas et des interactions avec le client gr\u00e2ce au JS.&lt;\/footer>\n&lt;\/body>\n&lt;\/html>\n&lt;script  src=\"programme.js\">&lt;\/script><\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>var mon_elt=document.getElementById(\"espace_de_dessin\");\nmon_elt.addEventListener(\"mousemove\",dessin,false);\n\/\/ attention au param\u00e8tre evt n\u00e9cessaire pour le passage de l'\u00e9v\u00e9nement\n\n\/\/ on d\u00e9clare un espace de dessin 2d\nvar ctx = mon_elt.getContext(\"2d\");\n\nfunction dessin(evt){\n\/\/ on r\u00e9cup\u00e8re les coordonn\u00e9es de la souris dans le canvas\nvar mousePos = getMousePos(mon_elt, evt);\n    x=mousePos.x;\n    y=mousePos.y;\n\/\/ on dessine un disque\nctx.beginPath();\nctx.fillStyle=\"rgb(100,19,50)\";\nctx.arc(mousePos.x, mousePos.y, 15, 0, 2*Math.PI);\nctx.fill();\n}\n\n\/\/ fonction qui d\u00e9termine la position de la souris par rapport \u00e0 la page et\n\/\/ par rapport \u00e0 la position du canvas dans la page\n\/\/ x et y sont alors les coordonn\u00e9es de la souris par rapport \u00e0 l'espace du canvas\nfunction getMousePos(canvas, evt) {\n         var rect = canvas.getBoundingClientRect();\n         return {\n           x: evt.clientX - rect.left,\n           y: evt.clientY - rect.top\n         };\n       }<\/code><\/pre>\n\n\n\n<p>Tester ce nouveau programme avec votre navigateur.<\/p>\n\n\n\n<h4>Exercice 2<\/h4>\n\n\n\n<p>Modifier le html pour agrandir votre espace de dessin.<br>Modifier la couleur et la taille du cercle de dessin.<\/p>\n\n\n\n<h3>4. Am\u00e9liorer l&rsquo;interaction en ajoutant des boutons pour l&rsquo;utilisateur.<\/h3>\n\n\n\n<p>Copier coller les codes html et js suivants :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html>\n&lt;html lang=\"fr\" >\n&lt;head>\n  &lt;meta charset=\"UTF-8\">\n  &lt;title>Dessiner et programmer avec canvas_TP1&lt;\/title>\n&lt;\/head>\n&lt;body>\n    &lt;section>\n        &lt;article>\n    &lt;canvas id=\"espace_de_dessin\" width=\"400\" height=\"400\">&lt;\/canvas>\n            &lt;\/article>\n        &lt;article>\n   &lt;input id=\"bouton_rouge\" type=\"button\" value=\"rouge\">\n   &lt;input type=\"button\" value=\"vert\">\n    &lt;input type=\"button\" value=\"bleu\">\n        &lt;\/article>\n    &lt;\/section>\n&lt;\/body>\n&lt;\/html>\n&lt;script  src=\"programme.js\">&lt;\/script><\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>var mon_elt=document.getElementById(\"espace_de_dessin\");\nmon_elt.addEventListener(\"mousemove\",dessin,false);\n\/\/ attention au param\u00e8tre evt n\u00e9cessaire pour le passage de l'\u00e9v\u00e9nemnt\nbouton_r=document.getElementById(\"bouton_rouge\");\nbouton_r.onclick=changer_rouge;\n\/\/ on d\u00e9clare un espace de dessin 2s\nvar ctx = mon_elt.getContext(\"2d\");\n\/\/ on declare une couleur\nvar rouge=5;\nvar vert=19;\nvar bleu=50;\n\n\nfunction dessin(evt){\n\/\/ on r\u00e9cup\u00e8re les coordonn\u00e9es de la souris dans le canvas\nvar mousePos = getMousePos(mon_elt, evt);\n    x=mousePos.x;\n    y=mousePos.y;\n\/\/ on dessine un disque\nctx.beginPath();\nctx.strokeStyle=couleur_rvb(rouge,vert,bleu);\nctx.arc(mousePos.x, mousePos.y, 15, 0, 2*Math.PI);\nctx.stroke();\n}\n\n\nfunction changer_rouge(){\n    rouge+=10;\n    alert(rouge);\n}\n\/\/ fonction qui retourne une chaine de caractere \"rgb(r,v,b)\n\/\/ on convertit un entier n en str avec la methode n.toString()\nfunction couleur_rvb(r,v,b){\n    var couleur=\"rgb(\"+r.toString()+\",\"+v.toString()+\",\"+b.toString()+\")\";\n    return couleur;\n}\n\n\n\nfunction getMousePos(canvas, evt) {\n         var rect = canvas.getBoundingClientRect();\n         return {\n           x: evt.clientX - rect.left,\n           y: evt.clientY - rect.top\n         };\n       }<\/code><\/pre>\n\n\n\n<h4>Exercice 3<\/h4>\n\n\n\n<p>Analyser le code html et le code js.<br>On a ajout\u00e9 une fonction sur le bouton rouge permettant d&rsquo;accentuer ce canal.<br>Apr\u00e8s avoir test\u00e9 ce bouton rouge :<br>&#8211; supprimer le message alert li\u00e9 \u00e0 la fonction,<br>&#8211; ajouter les m\u00eames fonctions aux boutons vert et bleu.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>1. Mise en place cr\u00e9er un dossier TP1_JS, ouvrir un \u00e9diteur de code comme Notepad,&#8230;<\/p>\n<div class=\"more-link-wrapper\"><a class=\"more-link\" href=\"https:\/\/labodemaths.fr\/WordPress3\/nsi-tp-1-sur-html-et-javascript\/\">Read the post<span class=\"screen-reader-text\">NSI : TP 1 sur HTML et Javascript<\/span><\/a><\/div>\n","protected":false},"author":2,"featured_media":968,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/posts\/961"}],"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=961"}],"version-history":[{"count":4,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/posts\/961\/revisions"}],"predecessor-version":[{"id":980,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/posts\/961\/revisions\/980"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/media\/968"}],"wp:attachment":[{"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/media?parent=961"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/categories?post=961"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/labodemaths.fr\/WordPress3\/wp-json\/wp\/v2\/tags?post=961"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}