Cette application dessine un tableau dont les cases changeront automatiquement de couleur, sans pour autant recharger la page. Dans la pratique, l'application demandera régulièrement à un script PHP de choisir une case et une couleur aléatoirement et la partie JavaScript changera la couleur de la case choisie.

• Le fichier disco.html quasi vide qui contient principale un appel à la méthode dessinerDancefloor() au chargement.
• Le script ping.php répond aux requêtes GET par des données au format JSON.
• Le script js/dancefloor.js contient juste la fonction dessinerDancefloor(). Cette fonction écrit juste une table HTML dans la balise d'identifiant disco.

Exercice

1. Visitez la page disco.html pour vérifier si la table est bien dessinée (par inspection du code depuis le navigateur).
2. Dans js/dancefloor.js, définissez une fonction JavaScript colorier(x, y, c) qui met à c la couleur de l'arrière-plan de la cellule d'identifiant x,y.
3. Testez manuellement cette fonction dans la console JavaScript.
4. Définissez maintenant getCase(). Cette fonction doit effectuer une requête GET sur la page ping.php en indiquant en paramètre la taille de votre tableau. Affichez le résultat de cette requête dans votre console. Testez et corrigez votre code jusqu'à ce que ping.php retourne bien un code 200 et du texte contenant du JSON.
5. Finalisez getCase(): Évaluez le message JSON de la réponse pour récupérer son contenu et le transmettre à colorier. Testez getCase depuis la console JavaScript.
6. Écrivez la méthode go(). Cette méthode doit exécuter getCase() toutes les 100ms. Testez
7. On finalise. Modifiez go() pour exécuter dessinerDancefloor() avant de programmer le timer. Modifiez la page HTML pour que celle-ci appelle la fonction go() au chargement.

Cette application permet de modifier le classement de super-héros. Le classement est modifié en temps réel sur votre navigateur et est sauvegardé simultanément sur le serveur dans votre session.

• Le fichier heroes.php sera exécuté sur le serveur pour afficher le classement courant.
• Le fichier change.php réponds à requêtes POST. C'est ce script qui sauvegardera les changements dans le classement.
• Le script js/top.js sera à compléter.

Exercice

1. Visitez la page heroes.php avec votre navigateur. Regardez le code HTML produit. On remarque que chaque ligne a un identifiant et que les images sont clickables. Dans la pratique, elles appellent une méthode JavaScript change(op, i) qui prend en paramêtre le type de changement et le numéro de la ligne de classement.
2. Regardez le code de index.php et la librairie associée pour comprendre son fonctionnement si besoin.
3. Dans js/top.js codez la méthode swap(x,y). Cette méthode inverse les noms des supers héros qui sont aux lignes x et y.
4. Testez swap dans la console JavaScript.

On peut maintenant changer l'ordre du classement depuis la console mais l'ordre n'est sauvegardé nulle part: à charge chargement de la page, nous retrouvons l'ordre initial. Vous allez donc maintenant notifier le serveur de votre modification du classement avant de modifier de la table.

1. Codez la fonction change(op,i). Cette fonction doit envoyer une requête POST à l'addresse change.php avec comme paramètre:
   • op (dec ou inc) pour indiquer si vous voulez décrémenter ou incrémenter le classement d'un héro
   • pos: un entier indiquant le numéro de classement du héro à déplacer
2. Testez la fonction change. Avoir l'avoir appelé, si vous rechargez la page, le classement retourné par le serveur doit avoir été modifié.
3. Lorsque la communication avec le serveur se passe correctement, finalisez change pour qu'elle modifie votre tableau en conséquence.

More disco

Sur le premier exercice, il serait bien que plusieurs cases changent de couleurs simultanément.

1. Modifiez les scripts PHP du serveur pour générer plusieurs couples de cases.
2. Modifiez le JSON qui est envoyé pour ce celui-ci retourne un tableau de cases
3. Modifiez le javascript pour qu'il itère sur toutes les cases qu'il a reçu.

Ensuite, il serait bien que l'affichage prenne tout l'écran:

• Fouillez sur Internet pour savoir comment connaître la taille de la zone d'affichage dans votre navigateur
• Définissez en fonction de cette taille, la taille des cases à colorier

No one is a hero

Certains sont des héros, d'autres sont des super-héros. Séparons les torchons des serviettes.

1. Côté serveur, ajoutez dans html_heroes() une troisième image clickable permettant de supprimer un héro
2. Côté serveur, faîtes une fonction del(i) permettant de supprimer le héro à la case i.
3. Dans change.php, autorisez une nouvelle opération del (une nouvelle valeur pour le parametre op). Cette opération permettra d'appeler votre fonction del
4. Côté client, ajoutez du JavaScript pour permettre de supprimer une ligne du tableau, puis une fonction envoyant la requête de suppression sur le serveur.

JQuery: simplifions le Javascript

Jquery est une librairie simplifiant la programmation en Javascript. Elle propose notamment des fonctions de haut niveaux pour sélectionner et manipuler des éléments dans du HTML, des fonctions toutes prêtes pour faire des requêtes Ajax.

Pour cet exercice, vous allez pouvoir utiliser JQuery pour simplifier votre code Javascript pour l'exercice disco

1. Téléchargez la librairie et ajoutez la dans votre document HTML
2. Regardez comment les sélecteurs fonctionnent. Modifiez alors la fonction colorier
3. Regardez comment Jquery permet de faire des requêtes Ajax GET. Modifiez alors la fonction getCase.

Maintenant, passez à JQuery pour l'exercice sur le classement des super-héros