M1202 - TP Séance 5

Durée : 2h00




Objectifs




Au menu

  1. Consignes
  2. Création de l'accueil du programme
  3. Création de la fonction de saisie
  4. Création du tableau des notes
  5. Affichage du tableau des notes




A. Consignes (5 min) 0%

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).

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.

Au cours de ce TP, nous allons créer un programme qui permet de saisir des notes d'étudiantes et étudiants. Le résultat à la fin de la question C9 pourrait ressembler à ça :
copie d'écran résultat




B. Création de l'accueil du programme (20 min) 4%

Nous allons commencer par créer une base pour ce programme de saisie de note.

B1Créez un dossier dédié à ce TP5 (de la même manière que vous en aviez créé un dédié au TP4).

B2En utilisant le TP1, créez une base de fichier M1202-TP5.html que vous compléterez lors de ce TP. Cette base doit contenir en particulier un algorithme fonctionPrincipale qui sera exécuté au moment du lancement de la page, et comme vous aurez besoin des algorithmes reponseALaQuestion et affiche, je vous conseille de garder au moins des lignes où ces algorithmes sont appelés.

B3Dans l'algorithme fonctionPrincipale, utilisez l'algorithme affiche pour afficher au chargement de la page un message indiquant "Bienvenue dans ce programme de saisie de notes !".

B4Dans l'algorithme fonctionPrincipale, utilisez l'algorithme reponseALaQuestion pour demander à la personne qui utilise le programme, juste après le message de bienvenue, d'indiquer les noms des deux devoirs pour lesquels il y a eu des notes.

Attention : remarquez que l'appel d'algorithme reponseALaQuestion est particulier : on écrit await juste avant car il faudra attendre la réponse à la question posée avant que l'algorithme puisse renvoyer son résultat. Si vous allez voir le code de l'algorithme reponseALaQuestion au bas du fichier, vous voyez qu'il faut le faire précéder par async. Vous utiliserez aussi ces deux principes (async au moment de la création de l'algorithme, juste avant function et await au moment de l'appel de l'algorithme, juste avant d'écrire le nom de l'algorithme) pour tout autre algorithme qui aurait besoin d'attendre des réponses de l'utilisateur ou utilisatrice avant de transmettre son résultat.




C. Création de l'algorithme de saisie (35 min) 20%

Premier objectif : nous allons tout d'abord créer un algorithme saisieEtudiant qui prend en entrée le nom de deux devoirs (par exemple "QCM" et "devoir final", ou bien "TP1" et "TP2"), puis demande le prénom, puis le nom, puis les notes sur 20 de l'étudiante ou étudiant à ces deux devoirs, et renvoie un tableau contenant toutes ces informations.

C1Créez un algorithme saisieEtudiant, initialement vide. Interrogez-vous notamment sur les types des variables d'entrée (pour lesquelles vous choisirez un nom approprié) et le type de sortie, afin de répondre au "Premier objectif" défini ci-dessus. Réfléchissez aussi à l'endroit de votre fichier M1202-TP5.html où vous devez ajouter cet algorithme.

C2Répondez au questionnaire ci-dessous puis cliquez sur "Envoyer".



Nous allons maintenant remplir cet algorithme saisieEtudiant en ajoutant progressivement toutes les instructions qu'elle contient.

C3Écrivez l'instruction permettant de créer la variable qui stockera le résultat de l'algorithme.

C4Écrivez l'instruction permettant de demander à l'utilisateur le prénom de l'étudiant dont il va entrer les informations, et d'enregistrer le résultat.

C5Écrivez l'instruction permettant de demander à l'utilisateur le nom de cet étudiant, et d'enregistrer le résultat.

C6Écrivez l'instruction permettant de demander à l'utilisateur la note de cet étudiant au premier devoir (en affichant de quel devoir il s'agit, information récupérée dans la variable d'entrée) et d'enregistrer le résultat.

C7Écrivez l'instruction permettant de demander à l'utilisateur la note de cet étudiant au second devoir (en affichant de quel devoir il s'agit, information récupérée dans la variable d'entrée) et d'enregistrer le résultat.

C8Écrivez l'instruction permettant de renvoyer ces informations en sortie.

C9Recopiez dans le formulaire ci-dessous l'algorithme saisieEtudiant puis cliquez sur "Envoyer".





D. Création du tableau des notes (45 min) 50%

Deuxième objectif : nous allons maintenant créer un tableau infosEtudiants contenant toutes les informations pour tous les étudiants.

D1Écrivez l'instruction qui permet de créer le tableau infosEtudiants du bon type. Réfléchissez à l'endroit du code où vous devez ajouter cette instruction...

D2Créez l'ensemble d'instructions qui permet de récupérer les informations de tous les étudiants, sachant que les deux types de devoirs dont vous stockerez la note sont : un QCM et un TP. Pour cela, vous utiliserez bien sûr des appels de l'algorithme saisieEtudiant, avec les bons paramètres en entrée. Vous devrez aussi réfléchir à la question suivante : comment pouvez-vous savoir que toutes les informations ont été entrées ?


E. Affichage du tableau des notes (15 min) 87%

E1À la fin de la saisie de toutes les informations, parcourez le tableau infosEtudiants pour afficher toutes les informations stockées, en dédiant une ligne à chaque étudiant. Vous pouvez utiliser des balises HTML pour la mise en forme...