M1202 - TP Séance 2

Durée : 2h00




Objectifs




Au menu

  1. Cours
  2. Consignes
  3. Compréhension d'un code en Javascript
  4. Dessin d'un échiquier




A. Cours (20 min) 0%

Rappels


Nous avons vu précédemment :

Nouveautés


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

Quizz


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


B. Consignes (5 min) 16%

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 m'enverrez ce fichier par mail à philippe.gambette<AROBASE>univ-mlv.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) 20%

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 : 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) 62%

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.