M1202 - TP Séance 2

Durée : 2h00

Objectifs

Manipuler et modifier un code Javascript pour comprendre son fonctionnement
Écrire un programme de dessin en Javascript en utilisant quelques algorithmes de base

Au menu

Cours
Consignes
Compréhension d'un code en Javascript
Dessin d'un échiquier

A. Cours (20 min) ↑

Rappels

Nous avons vu précédemment :

qu'un algorithme est une suite d'instructions pour résoudre un problème : il fournit un résultat en sortie à partir de données en entrée
lorsqu'on a besoin d'un algorithme, on va l'utiliser grâce à un appel d'algorithme : on écrit le nom de l'algorithme, suivi de parenthèses qui contiennent l'ensemble des données en entrée (voir exercice 2 de la feuille de TD : algo2(3,5)). On procède aussi comme cela en Javascript (voir TP1 : nombreAleatoire(1,10))
on renvoie les données en sortie en utilisant renvoyer en pseudo-code et return en Javascript (voir exercice 2 de la feuille de TD).
on utilise des variables pour stocker des valeurs : chaque variable a un nom, un type (l'ensemble de toutes les valeurs qu'elle peut prendre : par exemple nombre ou chaîne de caractères en pseudo-code, qui correspondent à number et string en Javascript), et une valeur, qui peut changer par une affectation notée "<-" en pseudo-code et "=" en Javascript (voir exercice 2 de la feuille de TD). La première affectation dans une variable est appelée initialisation.
quand on veut désigner le contenu d'une chaîne de caractères, c'est-à-dire un bloc de texte, on l'entoure de guillemets droits pour le distinguer d'un nom de variable (voir exercice 4 de la feuille de TD).
pour mettre deux chaînes de caractères l'une à la suite de l'autre, on utilise le symbole "+" (voir TP1 et exercice 4 de la feuille de TD), qu'on appelle concaténation.
pour qu'un algorithme adopte un comportement différent en fonction de différentes situations, on peut utiliser un test, qui fait les instructions blabla si la condition conditionAVerifier est vraie, blibli sinon. On écrit le test de cette manière :
- en pseudo-code :
  Si conditionAVerifier alors :
  blabla
  Sinon :
  blibli
  Fin Si
- en Javascript :
  if(conditionAVerifier){
  blabla;
  }else{
  blibli;
  }
il est possible d'écrire un test qui ne contient pas de alors (c'est-à-dire un if sans else en Javascript)

Nouveautés

Nous allons aujourd'hui utiliser les éléments suivants :

pour pouvoir utiliser une variable en Javascript, avant son initialisation, il faut faire une déclaration de la variable, c'est-à-dire écrire son nom précédé de var. Par exemple : var nombreUtilisateur, texte;
pour créer un algorithme en Javascript, on va aussi déclarer l'algorithme, en écrivant d'abord function, puis le nom de l'algorithme, puis, entre parenthèses, toutes les variables d'entrée. On écrit ensuite les instructions blabla de l'algorithme les unes à la suite des autres dans un seul bloc entre crochets. Par exemple pour l'algorithme algo2 de l'exercice 2 de la feuille de TD :
function algo2(a, b){
blabla;
}
il est possible de répéter un groupe d'instructions blabla en Javascript tant qu'une certaine condition conditionAVerifier est vraie, à l'aide d'une boucle while, de la manière suivante :
while(conditionAVerifier){
blabla;
}
souvent, on souhaite répéter un certain nombre de fois, par exemple 6 fois, le groupe d'instructions blabla. Pour cela, il est possible d'utiliser une variable qui jouera le rôle de compteur, en l'initialisant à 0 et en lui ajoutant 1 à chaque passage dans la boucle en continuant tant que le compteur est inférieur strictement à 6 :
var compteur = 0;
while(compteur < 6){
blabla;
compteur = compteur + 1;
}

Quizz

Pour bien retenir les éléments ci-dessus, allez répondre à ce quizz.

B. Consignes (5 min) ↑

Afin de m'aider à évaluer votre avancement lors de ce TP, vous devrez enregistrer vos réponses aux questions C5, C7, C8, C9, C13 (et si vous avez le temps, D1, D2 et D3) dans un fichier texte (comme indiqué aux questions C2 et C3). Vous enverrez ce fichier par mail à maxime.ferraille<AROBASE>gmail.com et à philippe.gambette<AROBASE>univ-eiffel.fr, à la fin du TP.

Lisez attentivement cet énoncé de TP/TD en suivant les instructions. En cas d'interrogation, faites appel à moi, que ce soit pour en savoir plus sur un des points abordés pendant le TP, ou pour savoir comment effectuer une des tâches demandées (numérotées pour pouvoir y faire référence simplement).

Attention, lors de ce TP il sera particulièrement indispensable d'utiliser un crayon et une feuille de papier pour faire des dessins et visualiser ou calculer des coordonnées.

Surtout ne restez pas bloqué·e sur une des questions. Entre parenthèses, à côté des titres de sous-sections, est indiqué le temps que vous avez dû passer à effectuer les étapes précédentes.

C. Compréhension d'un code en Javascript (50 min) ↑

^C1Créez un dossier dédié à ce TP2 (de la même manière que vous en aviez créé un dédié au TP1).

^C2Enregistrez-y ce fichier M1202-TP2.html et ce fichier M1202-TP2reponses.txt. ^C3Renommez le fichier M1202-TP2reponses.txt en "VotreNom".txt. Vous y inscrirez les réponses aux questions dont le numéro est indiqué dans le fichier.

Nous allons nous concentrer sur le code de l'algorithme fonctionPrincipale, situé des lignes 9 à 37, qui dessine des objets en faisant appel aux algorithmes suivants :

dessineRectangle(g, abscisseCoin, ordonneeCoin, largeur, hauteur, couleur) qui dessine dans un composant HTML dont l'identifiant est la chaîne de caractères g un rectangle vide dont le coin en haut à gauche a pour coordonnées (abscisseCoin,ordonneeCoin), qui a pour largeur largeur et pour hauteur hauteur et dont le code CSS de la couleur est couleur.
dessineRectanglePlein(g, abscisseCoin, ordonneeCoin, largeur, hauteur, couleur), qui dessine dans un composant HTML dont l'identifiant est la chaîne de caractères g un rectangle, dont le coin en haut à gauche a pour coordonnées (abscisseCoin,ordonneeCoin), et qui a pour largeur largeur et pour hauteur hauteur et dont le code CSS de la couleur de fond et de bordure est couleur.
dessineLigne(g, abscisse1, ordonnee1, abscisse2, ordonnee2, couleur), qui dessine dans un composant HTML dont l'identifiant est la chaîne de caractères g une ligne commençant au point de coordonnées (abscisse1,ordonnee1), se terminant au point de coordonnées (abscisse2,ordonnee2) et dont le code CSS de la couleur est couleur.

Remarquez aussi qu'à la ligne 10, on utilise les caractères // pour indiquer que ce sont des commentaires qui suivent. Ainsi le navigateur n'essaiera pas d'exécuter la fin de la ligne.

^C4Ouvrez dans le navigateur le fichier M1202-TP2.html. A priori aucun dessin ne s'affiche car il y a un bug dans le code que je vous ai fourni.

^C5En utilisant la console du navigateur (accessible par F12 ou bien en cliquant du droit sur un élément pour l'examiner/inspecter et en cliquant sur l'onglet Console), trouvez la ligne où est situé le problème puis corrigez-la pour qu'une image s'affiche quand vous réactualisez la page dans le navigateur

En vous inspirant de la façon dont la couleur rouge a été créée, ^C6définissez une couleur grise, que vous stockez dans une variable appelée gris. Utilisez-la pour recolorer le toit en gris : ^C7quelle(s) ligne(s) ajoutez-vous ou modifiez-vous dans le programme pour faire cela ? Testez-le pour vérifier que ça fonctionne.

^C8Où se trouve le point de coordonnées (0,0) dans le cadre gris d'affichage des images par le programme ? En haut à gauche, en haut à droite, en bas à gauche, en bas à droite, ou au milieu ? ^C9Comment avez-vous fait pour répondre à cette question ?

Dans les questions qui suivent, il sera utile de reproduire le dessin sur un papier et y indiquer les coordonnées de quelques points de référence : cela vous aidera à ajouter les éléments suivants au dessin.

^C10Modifiez le programme pour que les murs de la maison soient blancs (attention, ils ne doivent pas être transparents, l'intérieur des murs doit être entièrement blanc).

^C11Ajoutez un sol vert au premier plan.

^C12Ajoutez un ciel bleu clair à l'arrière plan.

^C13Copiez le code obtenu pour l'algorithme fonctionPrincipale vers l'intérieur du fichier "VotreNom".txt.

D. Dessin d'un échiquier (45 min) ↑

Dans la suite, si vous avez un nom (ou un prénom) de plus de 10 caractères, utilisez la valeur 10 quand on évoque la longueur de votre nom (ou de votre prénom).

Vous allez maintenant copier/coller votre code à l'intérieur d'un nouveau fichier M1202-TP3.html et y écrire un code permettant d'afficher un échiquier contenant autant de lignes et de colonnes que le nombre de lettres de votre prénom, et dont chaque case (avec une alternance cases noires, cases blanches, comme sur un échiquier) fait autant de pixels de côté qu'il y a de lettres dans votre nom.

Pour cela, ^D1commencez par dessiner une case blanche à côté d'une case noire, aux dimensions voulues. ^D2Utilisez ensuite une boucle et une variable compteur pour dessiner une ligne de cases noires et blanches alternées, avec le nombre voulu de cases dans la ligne.

Astuce plutôt informatique : vous pouvez, pour chaque case, décider de la couleur à lui donner en testant quelle était la couleur de la case précédemment dessinée.
Astuce plutôt mathématique : vous pouvez déterminer la couleur de chaque case en utilisant un test de parité, à programmer à l'aide de l'opération "reste modulo" ("%" en Javascript).

^D3Utilisez une autre boucle (et un autre compteur ? ou bien un nouvel algorithme ?) pour dessiner l'ensemble des lignes de l'échiquier demandé. Attention, l'alternance des couleurs noir/blanc doit aussi être respectée verticalement.