Application « menu »

Licence Informatique 1e année

Alexandre NiveauJean-Marc Lecarpentier

Enseignement des technologies du Web

 

Travail personnel

Objectifs

Notes de cours

Exercice 1 — Gestion de menu à la semaine #

Cet exercice fait partie de ceux qui seront évalués. La page doit être accessible et fonctionnelle à l'URL suivante :

https://dev-NUMETU.users.info.unicaen.fr/TW2/TP08/ex1/menu.html
(en remplaçant NUMETU par le numéro correspondant). Pensez à vérifier la validité W3C de votre page !

D'autre part, l'élément head doit contenir le code suivant :

<meta name="author" content="NUMETUS" />
en remplaçant NUMETUS par les numéros des étudiant·e·s qui ont travaillé sur cette page, séparés par des virgules. (Il faut laisser name="author" tel quel, par contre !) Par exemple, si 21012343 et 20922462 ont travaillé ensemble, ils mettent <meta name="author" content="21012343,20922462" /> dans le head de leur page. Ça permettra à notre script de savoir qui a travaillé avec qui.

Il est conseillé de vérifier que l'exercice a été correctement rendu en utilisant l'application evalweb.

Vous avez jusqu'au début du TP de la semaine suivante pour terminer l'exercice.

Reprendre le code HTML ici pour créer la page du TP.

On veut créer une mini application de gestion de menu pour une semaine.

Ecrire le code pour remplir le menu pour la semaine en utilisant le formulaire fourni dans la page. Attention Lorsqu'un formulaire est soumis (en cliquant sur le bouton submit ou en tapant Entrée), les données sont envoyées au serveur et la page est ici rechargée. Il faut donc « désactiver » l'envoi des données du formulaire. Pour cela, le formulaire doit acpter l'évènement submit et le désactiver avec preventDefault.

Ajouter la possibilité d'échanger 2 repas : on clique sur un premier repas, et le 2e clic sur un repas échange les 2 repas cliqués, comme suit :

Echange de repas

Ajouter un edit in place basique : quand on double clique sur un repas, alors le conteu de la cellul devient un formulaire avec un input, et lorsqu'on fait Entrée alors le repas est changé dans la cellule et le input disparait, comme ci-dessous :

Modification de repas

Exercice 2 — Jeu du saute-grenouille #

Adapté d’un exercice de Frédéric jurie

Le jeu de réussite, se jouant à un seul joueur, consiste à échanger les positions de grenouilles. Au début du jeu trois grenouilles vertes se trouvent à droite (voir illustration) et trois grenouilles jaunes se trouvent à gauche. La partie est gagnée quand les grenouilles vertes ont pris la place des jaunes, et réciproquement. Le jeu comporte 7 cases, une case vide séparant les deux groupes de grenouilles en début de partie.

Pour déplacer une grenouille, le joueur clique dessus. Si la grenouille se trouve à côté d'une case vide, la grenouille saute sur cette case vide. Une grenouille peut sauter par dessus une autre grenouille pour atteindre la case vide (mais pas par dessus plus d'une grenouille !). Les grenouilles peuvent sauter en avant uniquement.

L'archive zip donnée comprend la page HTML, les images des grenouilles à utiliser et un fichier JS à compléter.

On utilisera une variable globale jeu qui est un tableau de 7 caractères pour modéliser les 7 cases.

Pour savoir sur quelle case on a cliqué, on pourra utiliser un attribut data-position contenant le n° de la case. Attention il faudra penser à utiliser parseInt pour en obtenir un entier et non une chaîne de caractère.

  1. Écrire une fonction initJeu() qui initialise la variable jeu, crée les images, place les grenouilles et initialise les évènements à capter pour obtenir le jeu de départ :
    Jeu de départ
    Jeu de départ
  2. Écrire une fonction qui prend en argument 2 indices i et j et permute les éléments i et j du tableau jeu
  3. Écrire la fonction qui fait bouger une grenouille en mettant à jour l'affichage et le tableau jeu. Si le déplacement n'est pas possible ou si l'utilisateur clique sur la case vide, afficher un alert le signalant.
  4. Tester si la partie est gagnée et si oui l'afficher avec un alert
  5. Optionnel : si la partie n'est pas terminée, tester si plus aucun mouvement n'est possible et si c'est le cas afficher un message disant que la partie est perdue.