mars 15, 2021 / NSI

NSI : JS et HTML , TP1

1. Mise en place

  • créer un dossier tp1_js,
  • ouvrir votre éditeur de code et copier-coller les codes suivants respectivement dans une page index.html et script.js que vous enregistrerez dans votre dossier :

La page index.html :

<!DOCTYPE html>
<html lang="fr" >

<head>
  <meta charset="UTF-8">
  <title>Dessiner et programmer avec canvas_TP1</title>
<script  src="script.js"></script>
</head>
<body onload="draw()">
</body>
</html>

La page script.js :

// on appelle la fonction draw lorsque la page est bien chargée
function draw() { 
    // on crée un elt du DOM de type canvas
    var elt = document.createElement("canvas"); 
    // on l'ajoute à un noeud du DOM
    document.body.appendChild(elt);
  // on déclare un élément canvas qui est le premier élément de type canvas dans le document
   var canvas = document.getElementsByTagName("canvas")[0]
   canvas.width="200";
    canvas.height="200";
   // on déclare notre espace de dessin en 2d
   var ctx = canvas.getContext("2d");
   
// on attache un détecteur d'événement sur le canvas
 canvas.addEventListener("mousedown",dessiner , false);
 dessiner();
    
function dessiner(evt){
    couleur1='rgb(255, 165, 0)';
    couleur2='rgb(101, 131, 229)';
     for (var x=0;x<canvas.width;x=x+10){
         for ( var y=0;y<canvas.height;y=y+10){
             if (Math.random()>0.5){
                 ctx.fillStyle =couleur1;
             }
             else {
               ctx.fillStyle =couleur2;  
             }
             ctx.fillRect(x,y,10,10);
         }
     }     
 }
}
  • tester la page html dans votre navigateur.

Exercice 1

  • Examiner la page html et le js, déterminer la fonction qui permet de lancer la fonction draw() du script js,
  • Examiner la page html : l’élément canvas qui nous permet de dessiner est-il présent dans cette page ? Comment est-il crée ?
  • ce TP est inspiré d’oeuvres de l’artiste français François Morellet appelée 10 000 carrés, modifier le js pour que le canvas soit un carré de 800 pixels de côté et qu’il soit bien rempli par 10 000 carrés,
  • changer les couleurs des carrés à votre convenance.

Exercice 2 : un peu de maths et de probabilité.

  • examiner le js, déterminer la probabilité pour qu’un carré soit d’une certaine couleur,
  • modifier le js pour qu’il compte le nombre de carrés de couleur1, afficher cette valeur à la fin de l’exécution de la fonction draw() par un message alert(),
  • de quelle valeur doit être proche ce nombre de carrés ?
  • modifier le js pour que la probabilité qu’un carré soit de couleur1 soit à présent de 30%. Sur 10 000 carrés, à combien peut-on estimer le nombre de carrés de cette couleur ? Cette estimation est-elle vérifiée dans la pratique ?

Exercice 3 : un peu d’interactivité

On considère à présent les modifications suivantes dans le html et le js :

<!DOCTYPE html>
<html lang="fr" >

<head>
  <meta charset="UTF-8">
  <title>Dessiner et programmer avec canvas_TP2</title>
</head>
<body>
<form>
    <div>
    <label>Veuillez choisir la couleur 1 :</label>
  <input name="couleur1" id="couleur1" type="color" required class="form-control" value='#ff10a9'>
    </div>
  <div>
    <input type="button" value="changer couleur" onclick="changer_couleur()">
  </div>
</form>
</body>

</html>
<script  src="index.js"></script>

couleur1=document.getElementsByName("couleur1")[0].value;
couleur2='#1f10a9'
var elt = document.createElement("canvas"); 
document.body.appendChild(elt);
var canvas = document.getElementsByTagName("canvas")[0]
canvas.width="800";
canvas.height="800";
var ctx = canvas.getContext("2d");
canvas.addEventListener("mousedown",dessiner , false);
dessiner();
  
    
function dessiner(evt){
    couleur1=document.getElementsByName("couleur1")[0].value;
     for (var x=0;x<canvas.width;x=x+10){
         for ( var y=0;y<canvas.height;y=y+10){
             if (Math.random()>0.5){
                 ctx.fillStyle =couleur1;
             }
             else {
               ctx.fillStyle =couleur2;  
             }
             ctx.fillRect(x,y,10,10);
         }
     }     
 }


function changer_couleur(){
    couleur1=document.getElementsByName("couleur1")[0].value;
    dessiner();
}
  • Analyser le html et le js,
  • modifier le html et le js pour ajouter un deuxième bouton couleur qui permettra de modifier la seconde couleur des carrés.

CatégoriesNSI