[Base JavaScript | exercice 1] Boucles, procédures et figures géométriques

1. Tester l'instruction document.write en affichant au minimum un nombre, une phrase, le contenu d'une variable, la valeur de π (pi) et, enfin, un entier choisi aléatoirement entre 0 et 100.
2. Moduler l'affichage en fonction d'un test. Par exemple, définir une variable contenant une température, puis comparer cette variable à une valeur seuil, afficher un message si la température est inférieure, un autre message si elle est supérieure.
3. Comparer les boucles while et for pour compter jusqu'à 100.
4. Utiliser des boucles, puis des boucles imbriquées, pour dessiner des figures géométriques, pleine ou creuses : une ligne, un carré, un triangle.
5. Toujours en utilisant les boucles de JavaScript, produire une table de multiplication pour les entiers compris entre 0 et 9.
6. Reprendre les questions précédentes en agrémentant systématiquement le contenu produit de balises HTML (par exemple, les balises de tableau pour profiter des alignements dans les figures).
7. Reprendre les questions précédentes en utilisant systématiquement des procédures.

[Base JavaScript | exercice 2] Conversions

Dans cet exercice, on opère des conversions monétaires entre francs et euros. On utilisera que 1 franc correspond à 0,152449 € et 1 euro à 6,55957 francs.

1. Utiliser JavaScript pour afficher la valeur en euros de 2023 francs.
2. Définir une fonction JavaScript qui pour une valeur donnée en francs fournit la valeur en euros.
3. Utiliser cette fonction pour convertir toutes les sommes comprises entre 0 et mille francs avec un pas de 50 francs, et présenter le résultat dans un tableau.
4. Réaliser le même travail pour la conversion inverse et fournir les résultats pour toutes les sommes comprises entre 1 et 200 euros avec un pas de 10 euros.

[Base JavaScript | exercice 3] Nom d'agent dérivé d'un verbe

1. Définir une variable contenant le verbe chanter.
2. Supprimer les deux dernières lettres de ce mot et les remplacer par les lettres eur.
3. Produire une phrase intégrant ces deux mots et explicitant leur lien sémantique.
4. Généraliser ce code en écrivant une procédure traitant n'importe quel verbe du premier groupe.

[Base JavaScript | exercice 4] Construction de verbes par préfixation en dé-

1. À partir d'un verbe (par exemple coudre), construire et afficher le verbe décrivant le processus inverse (découdre dans le cas de notre exemple).
2. Considérer un verbe qui cette fois commence par une voyelle (par exemple avantager qui donne désavantager). La méthode doit tester la première lettre du verbe et lui ajouter le préfixe adéquat.
3. Programmer le traitement de tous les cas possibles. Pour cela, écrire une fonction qui prend une lettre en entrée et qui renvoie vrai ou faux selon que la lettre est une voyelle ou non.
4. Fournir une procédure qui embarque ce traitement et qui pourra être appeler avec des verbes différents.

[Base JavaScript | exercice 5] Premiers tableaux

1. Définir en JavaScript un tableau contenant des notes d'étudiants comprises entre 0 et 20.
   Implémenter en JavaScript les fonctions qui permettent d'afficher un tel tableau, de savoir combien d'étudiants ont eu 10 plus, de calculer la moyenne des notes, de connaître la note maximale, de rechercher une note particulière, etc.
2. Définir un tableau JavaScript contenant un prénom dans chaque case.
   Écrire une procédure qui parcourt un tel tableau et affiche son contenu sous forme d'une liste HTML.
   Proposer une autre procédure qui cette fois affiche le contenu du tableau en le parcourant de la dernière à la première case.
3. Définir un tableau JavaScript avec dans chaque case un chemin menant à une image.
   Écrire une procédure JavaScript qui prend en entrée un tel tableau et produit l'affichage des images dans un tableau HTML. La procédure utilisera un second paramètre indiquant si l'affichage doit être horizontal ou vertical.

[Base JavaScript | exercice 6] Retour sur les mots

Reprendre les exercices précédents sur les mots (exercices 3 et 4) : les généraliser pour travailler sur plusieurs mots. À chaque fois :

1. définir un tableau JavaScript contenant plusieurs mots (les choisir pertinemment),
2. ajouter au programme JavaScript une boucle sur ce tableau et un appel à la procédure pour chacun des mots.

[Base JavaScript | exercice 7] Conjugaison automatique

1. Définir une variable contenant un verbe, soit du premier groupe, soit du deuxième groupe.
2. Définir un tableau à six cases contenant les pronoms personnels.
3. Définir un tableau contenant les marques de conjugaison au présent de l'indicatif pour les verbes du premier groupe, et un autre pour les terminaisons des verbes du deuxième groupe.
4. Écrire un test qui décide si le verbe défini appartient au premier ou au deuxième groupe.
5. Produire l'affichage des formes conjuguées de ce verbe au présent de l'indicatif, chaque forme étant précédée du ou des pronom(s) personnel(s) adéquat(s).
6. Revenir sur le code déjà écrit et proposer des procédures pertinentes.

[Base JavaScript | exercice 8] Pipotron façon radio Londres

1. Définir un tableau de verbes et un tableau de groupes nominaux.
2. Tirer au hasard un groupe nominal, un verbe et un cod.
3. Conjuguer automatiquement le verbe en fonction du groupe nominal choisi (utiliser pour cela le code déjà vu).
4. Combiner les trois éléments pour obtenir une phrase.
5. Finalement, produire aléatoirement cent phrases.

[Actions & DOM | exercice 1] Premiers tests

À un document HTML, ajouter des alertes :

1. au chargement de la page,
2. quand on passe sur une image,
3. quand on clique sur un bouton,
4. quand on appuie sur une touche.

5. Ajouter un bouton qui, quand on clique dessus, fait appel à document.write() pour produire un affichage. Que se passe-t-il ?

Avec des boutons :

6. changer la couleur de fond du document quand on clique sur un bouton,
7. changer aussi l'apparence du bouton,
8. ajouter un bouton qui permette de revenir à la normale.

Sur des images :

9. changer une image par une autre quand la souris passe dessus,
10. remettre l'image d'origine quand la souris quitte l'image.

[Actions & DOM | exercice 2] Effets sur une image

Alternance de deux images

1. Créer une page html5 contenant une image.
2. Programmer en JavaScript une alternance entre cette image et une autre, toutes les deux secondes.
3. Ajouter un bouton et le code JavaScript associé pour arrêter ce défilement.
4. Ajouter un bouton et le code JavaScript associé pour le reprendre.

Disparition d'une image et flash

1. Créer une page html5 faisant apparaître une image quelconque.
2. Ajouter un bouton et le code JavaScript associé qui la fait disparaître (utiliser la propriété CSS de l'image visibility).
3. Ajouter un bouton qui fait revenir l'image.

Variantes :

4. Programmer un effet de fondu pour que l'image apparaisse et disparaisse progressivement (utiliser cette fois la propriété CSS de l'image opacity et les fonctions JavaScript setTimeout ou setInterval).
5. Provoquer cette fois un flash lorsque la souris passe sur une image : fondu au blanc rapide puis réapparition de l'image.

Nota bene : aujourd'hui il est devenu possible d'obtenir un effet de fondu sans JavaScript, uniquement avec html/css, en particulier avec les transitions css.

[Actions & DOM | exercice 3] Variations autour d'images qui défilent

Diaporama

1. Placer des noms d'images dans un tableau JavaScript.
2. Programmer l'affichage une par une de ces images dirigés par deux boutons, un précédent, un suivant.

Image aléatoire

1. Placer des noms d'images dans un tableau JavaScript.
2. Programmer l'affichage aléatoire de l'une de ces images, toutes les deux secondes.

Déplacement d'une image

1. Afficher un ensemble de photos dans une page html5.
2. Ajouter le code JavaScript qui fait circuler l'une des photos parmi les autres en fonction d'actions de l'utilisateur, au clavier ou à la souris.

[Actions & DOM | exercice 4] Retour sur les mots

Revenons sur l'exercice de « construction de verbes par préfixation en dé- » pour y ajouter une interface plus conviviale.

1. Reprendre le code JavaScript déjà écrit pour en faire une fonction et la placer dans un fichier prefixation.js.
2. Débuter un nouveau fichier html5 qui charge ce script et qui définit une liste avec un identifiant.
3. Utiliser la commande prompt pour demander un verbe à l'utilisateur.
4. Appeler la fonction sur ce verbe et récupérer le mot construit.
5. Ajouter une ligne synthétisant le calcul dans la liste prévue à cet effet.

[Actions & DOM | exercice 5] Variations autour de textes changeants

Sommaire automatique

Récupérer les titres de niveau h2 et les faire apparaître comme une liste à puces, à un endroit approprié.

Faire en sorte que chaque item produit soit cliquable et amène à la section associée.

Dictionnaire visuel

On étiquette certains mots du texte, la définition apparaît,

• d'abord dans un popup quand on clique sur le mot,
• puis dans un paragraphe dédié à cet effet quand la souris passe sur le mot.

Saisie et traitement

Permettre la saisie un mot dans un champ de formulaire, écrire son traitement et afficher le résultat (reprendre les exercices sur les mots pour leur ajouter une interface).

Dictionnaire visuel amélioré

On peut faire défiler les mots au clavier (flèches gauche et droite).

Texte selon image

1. Créer une page html5 affichant plusieurs photos.
2. Définir un tableau JavaScript qui contienne un texte descriptif pour chacune des photos affichées.
3. Ajouter le code JavaScript qui, quand la souris passe sur une image, fait apparaître le texte associé.
4. Ajouter le code JavaScript qui fasse disparaître le texte lorsque la souris quitte l'image.
5. Programmer un effet de déroulement progressif pour l'affichage des textes.

Variante :

6. Créer une page html5 avec un menu contenant plusieurs items.
7. Programmer en JavaScript l'affichage d'un texte explicatif lorsque la souris passe sur l'un des items.

[Actions & DOM | problème 1] Slide Puzzle ou taquin

Premières étapes :

1. Créer l'apparence du jeu : trois cases par trois cases, chaque case étant un bouton HTML.
2. Associer des styles CSS à ces boutons.
3. Écrire le code JavaScript qui, lorsque l'on clique sur un bouton, l'échange avec la case vide.

Étapes suivantes :

4. N'autoriser que les déplacements valides.
5. Compter et afficher le nombre de déplacements effectués.

Travail restant :

6. Mélanger aléatoirement les cases au début du jeu.
7. Détecter la fin de partie.
8. Adapter le jeu à une version avec les morceaux d'une photo, plutôt qu'avec des boutons.

[Actions & DOM | problème 2] « le puzzle de Yann »

1. Choisir deux photos d'un même objet (portraits d'une personne à des âges différents, même paysage à des saisons différentes, etc.). L'une des versions est désignée comme cible, c'est-à-dire que c'est elle qui devra finalement s'afficher.
   Découper chaque photo en 9 morceaux. Choisir les noms des images pour permettre de connaitre aisément l'emplacement d'un morceau et la version dont il provient.
2. Préparer l'apparence en HTML/CSS : neuf images disposées en 3x3, chacune avec un identifiant.
3. Écrire une fonction JavaScript qui, à partir d'un emplacement, choisit aléatoirement et affiche un morceau destiné à cet emplacement.
4. Faire en sorte que la fonction précédente s'exécute 50 fois, une fois chaque quart de seconde, à chaque fois sur un emplacement choisi aléatoirement.
5. Les 50 itérations passées, on continue les tirages aléatoires mais uniquement pour les morceaux qui ne sont pas affichés dans la bonne version.
6. Détecter quand l'image cible est complètement affichée. Signaler que le but est atteint et cesser alors toute modification.

Améliorations possibles :

7. Généraliser votre code pour gérer plus de deux versions de l'image.
8. Généraliser votre code pour utiliser des découpages autres que 3x3.
9. Provoquer un effet de fondu lors des changements d'images.
10. Ajouter des boutons pour stopper ou lancer une nouvelle animation, pour contrôler la cible ou l'effet de fondu, etc.

[Actions & DOM | problème 3] Jeu « memory »

On veut implémenter un jeu de « memory ». Au début du jeu les cartes sont faces cachées, l'interface doit permettre d'en retourner deux. Si les deux cartes sont identiques elles restent visibles, sinon elles disparaissent après un court laps de temps. Le jeu se termine quand toutes les paires ont été découvertes.

1. Récupérer huit images de même taille et coder en HTML/CSS la disposition des seize cartes.
2. Programmer en JavaScript le mélange des cartes, par exemple en répétant une centaine de fois le processus suivant : tirer deux cartes au hasard et les échanger.
   Ce mélange doit avoir lieu au chargement de la page.
3. Utiliser la CSS pour rendre les cartes invisibles.
   Programmer en JavaScript le retournement d'une carte quand on clique sur elle.
   (optionnel) Produire un joli effet visuel quand la carte apparaît.
4. Permettre de cliquer sur deux cartes cachées. Tester si les deux images dévoilées sont les mêmes. Si les images sont différentes, les faire disparaître après une seconde d'affichage.

5. Interdire le clic sur une image déjà apparente. Interdire le clic sur une troisième carte pendant que les deux cartes cliquées sont apparentes.
6. Compter le nombre de paires découvertes, compter les nombre de clics utilisés.
   Compléter en produisant des messages en cours de partie (découverte d'une paire, nombre de clics utilisés, message de victoire, etc.).
7. Ajouter deux boutons : l'un qui permet de commencer une nouvelle partie, l'autre qui donne la solution en découvrant toutes les cartes.

[Actions & DOM | problème 4] Space Invaders

Description du jeu

On veut réaliser un jeu de type space invaders :

• un alien se déplace en haut de l'écran, de gauche à droite ;
• un vaisseau se déplace en bas de l'écran, lui aussi de manière horizontale ;
• le vaisseau peut tirer des missiles à la verticale ;
• si un missile rencontre un alien, celui-ci est détruit et un autre alien surgit à gauche de l'écran.

Le jeu est composé d'images, 9 en largeur, 5 en hauteur, chacune de 100 pixels par 100 pixels. Une image blanche est la plus souvent utilisée, puis on peut trouver une image de vaisseau, une image d'alien, une image de missile et une image d'explosion.

Images utiles à récupérer

Réalisations attendues

1. Créer l'apparence du jeu en HTML/CSS.
   Fichier à créer : apparence.html.
2. Reprendre le contenu du fichier apparence.html et permettre à l'aide de JavaScript le déplacement du vaisseau au clavier, flèche gauche (code 37) et flèche droite (code 39).
   Le vaisseau est bloqué dans ses déplacements à gauche et à droite de l'écran.
   Fichier à créer : vaisseau.html.
3. Reprendre le contenu du fichier apparence.html et programmer en JavaScript le lancement d'un missile par la flèche haut (code 38).
   Le missile progresse verticalement d'une case vers le haut chaque demi-seconde.
   Ne pas permettre le lancement d'un autre missile tant que le premier n'a pas atteint le haut de l'écran.
   Fichier à créer : missile.html.
4. Reprendre le contenu du fichier apparence.html et programmer en JavaScript le déplacement de l'alien en haut de l'écran.
   L'alien progresse d'une case vers la droite chaque seconde.
   Arrivé à l'extrémité droite de l'écran, l'alien disparaît et réapparaît à gauche.
   Fichier à créer : alien.html.
5. Assembler le tout, ajouter le code JavaScript nécessaire pour détecter les collisions entre le missile et l'alien, et matérialiser l'explosion.
   Fichier à créer : jeu.html.

Questions bonus

6. Faire que la partie s'arrête à un moment ou à un autre.
7. Programmer l'accélération des aliens au fur et à mesure que l'on en détruits.
8. Faire apparaître des messages et un score qui évoluent au cours de la partie.
9. Permettre l'apparition simultanée d'aliens, les faire descendre progressivement, etc.

[Canvas | exercice 1] Petit éditeur de dessins

On explore le fonctionnement d'un canvas (html5) : comment y dessiner et comment y capturer un clic de souris.

1. Créer le canvas en html en spécifiant ses dimensions.
2. Écrire une fonction initialisations() qui récupère le contexte 2d du canvas et associer cette fonction à l'événement onload du document.
3. Définir une fonction surclic(e) qui lance une alerte affichant les coordonnées du clic contenu dans e. Associer l'événement « clic sur le canvas » à l'appel de la fonction surclic(e).
4. Remplacer le lancement de l'alerte par l'affichage d'un carré à l'endroit du clic. Régler la taille de ce carré.
5. Ajouter des boutons, chaque bouton permettant de choisir une couleur différente.
6. Ajouter deux boutons pour choisir la forme de la prochaine figure, soit un carré soit un disque.
7. Ajouter un bouton qui va lancer la composition aléatoire d'un dessin, par exemple en produisant une figure toutes les demi-secondes, figure dont la forme et la couleur sont choisies au hasard. Le dessin prend fin après 100 figures ou par un clic sur un dernier bouton.

[Canvas | exercice 2] Télécrans

1. Afficher un carré dans un canvas.
2. Permettre son déplacement avec les touches du clavier en veillant à ne pas dépasser les bords du canvas.
3. Ajouter un bouton pour lancer le déplacement aléatoire du carré, un autre bouton pour l'arrêter.
4. Comment faire disparaître la trace pour seulement déplacer un carré ?

[Canvas | exercice 3] Ball-trap

Une cible apparaît à une position aléatoire, le joueur a quelques instants pour cliquer dessus.

1. Définir l'aspect du jeu à l'aide d'un canvas html5.
2. Faire apparaître un carré en guise de cible, à une position aléatoire du canvas.
   La cible doit restée apparente deux secondes, puis disparaître. Une autre cible est alors générée aléatoirement.
   La production de cibles doit débuter dès le chargement de la page.
3. Capturer les clics de l'utilisateur.
   Tester si le clic a touché la cible. Si c'est le cas, effacer la cible et en produire une autre.
4. Lors d'un clic, afficher un message indiquant si la cible est touchée ou non.
   Afficher également le nombre de cibles détruites.
5. (bonus) Ajouter un bouton pour faire une pause dans la partie et un autre pour démarrer une nouvelle partie.
6. (bonus) Faire varier taille, forme et couleur des cibles.

[Canvas | exercice 4] Jeu de points à relier

Nous souhaitons permettre de dessiner en reliant des points prédéfinis et numérotés, cela dans canvas html5. Les coordonnées des points à utiliser sont données ci-dessous dans deux tableaux JavaScript.

let liste_x = [288,477,372,520,404,546,441,555,453,458,414,406,410,
               384,342,312,322,321,278,302,358,388,422,436,470,471,
               456,488,514,516,519,549,546,542,526,494,440,410,364,
               314,296,303,220,218,58,166,44,198,63,204,84,273];

let liste_y = [20,182,192,273,297,370,396,450,471,418,429,411,381,
               394,404,393,424,444,464,500,468,460,472,526,548,572,
               591,597,562,508,470,468,506,562,600,616,608,626,627,
               606,578,550,560,484,492,416,396,303,288,194,180,38];

1. Créer un canvas de 624 par 650 pixels.
2. Positionner les points donnés sur le canvas, avec leur numéro respectif.
3. Proposer un bouton qui lorsqu'il est cliqué affiche la solution, c'est-à-dire trace les traits entre les points.
4. Permettre à l'utilisateur de tracer les traits à la souris par clics successifs sur le canvas.

[Canvas | exercice 5] Jeu du mot qui bouge

Dans ce jeu, il s'agit de trouver un mot dont les lettres ont été éparpillées sur un canvas.

1. Définir en html un canvas, par exemple une carré de 400 pixels de côté. Prévoir également une zone dédiée au dialogue entre le jeu et le joueur.
2. En JavaScript, définir une variable contenant un mot, et une autre variable contenant la définition de ce mot.
3. Placer chaque lettre du mot à une position du canvas choisie aléatoirement. On pourra aussi choisir aléatoirement, pour chaque lettre, sa police, sa taille et sa couleur.
4. Ajouter en html un champ texte qui permet au joueur de saisir une proposition. Y associer une procédure JavaScript qui confronte cette proposition à la solution et affiche un message selon que le joueur a trouvé ou non.
5. Ajouter un bouton « indice » qui, lorsque l'on clique dessus, affiche la définition du mot. Et une autre bouton « solution » qui provoquera l'affichage du mot mystère.
6. Choisir au hasard le mot à trouver dans une liste préalablement définie (pour chaque mot de cette liste on dispose aussi de sa définition). Ajouter un bouton qui permet de commencer une nouvelle partie avec un nouveau mot.
7. Faire varier régulièrement l'affichage des lettres. Ajouter un bouton pour suspendre cette animation, un autre pour la reprendre. Imaginer enfin une animation graphique particulière pour le moment où le mot mystère est découvert.

[Canvas | problème 1] Space Invaders II

Nous reprenons l'exercice du space invaders, en version canvas cette fois.

1. Proposer une procédure qui dessine un alien dans un canvas, vous pouvez par exemple prendre le modèle suivant :
   
   cet alien doit être paramétrable en position et en taille.
2. Faire apparaître ce l'alien en haut du canvas et écrire le code JavaScript qui le fait naviguer automatiquement horizontalement.
3. Ajouter le code nécessaire pour que, quand l'alien disparaît à droite, il réapparaisse à gauche.
4. À suivre...

[Canvas | problème 2] Jeu de la vie

Voir les explications sur le jeu de la vie.

Les calculs

1. Créer un tableau JavaScript monde et un autre tableau voisins définis comme suit : monde[col][lig] contient 1 si la case repérée par la colonne col et la ligne lig contient un individu vivant, 0 sinon ; voisins[col][lig] contient le nombre de voisins vivants de la case repérée par la colonne col et la ligne lig.
2. Écrire la fonction compte_voisins () qui met à jour le tableau voisins selon l'état du monde et la fonction maj_monde () qui calcule la génération suivante du monde selon le décompte des voisins.
3. Implémenter la fonction initialisations () qui au chargement de la page crée le monde en y plaçant aléatoirement des individus, puis qui lance le décompte des voisins.

L'interface

4. Compléter la fonction initialisations() au chargement de la page pour créer le canvas en fonction de la taille du monde et du paramètre zoom.
5. Dans une fonction montre_monde (), tester le tableau monde et faire apparaître les individus en vie dans le canvas. Chaque individu est représenté comme un carré et, à nouveau, le paramètre zoom doit être pris en compte.

6. Distinguer par des couleurs différentes les nouvelles naissances des autres individus. Repérer également ceux qui vont mourir à la prochaine étape.
   Cette question nécessite de modifier le contenu du tableau monde. On pourra adopter la convention suivante selon le contenu d'une case :
   • 0 : mort
   • 1 : naissance
   • 2 : en vie
   • 3 : juste né et mort à la prochaine génération
   • 4 : mort à la prochaine génération
7. Ajouter des boutons pour arrêter l'évolution, ou pour la relancer dans différents modes.

[Canvas ] Pour continuer...

Une autre application html5/canvas/JavaScript est visible sur ce fil Twitter.

[DOM avancé | exercice 1] Extractions html5

Il s'agit dans cet exercice d'extraire dynamiquement, avec JavaScript, des parties du document repérées par le balisage html5.

Le corpus html5 ne doit en aucun cas être modifié, les réponses aux questions ne passent que par augmention du script JavaScript. Chaque modification du script peut être testée sur chaque document du corpus.

0. Installer le corpus html5 repérer la structure html et la présence de balises html5, noter également l'inclusion du code JavaScript et la définition de l'événement onload.
1. À l'aide de JavaScript et de DOM, créer une variable contenant la partie du document repérée par l'élément main, puis une autre variable pour la partie body.
2. S'assurer que les deux variables sont bien constituées en définissant de nouvelles couleurs de fond pour les parties main et body.
3. Modifier le document pour ne conserver que la partie main, directe et unique fille de body. Proposer une solution utilisant innerHTML, puis une autre sans innerHTML.
4. Enlever toute indication de mise en forme css, qu'elle soit introduite par l'élément style ou par l'élément link.
5. Supprimer les éléments html5 nav et aside qui pourraient subsister à l'intérieur de la partie main. Généraliser ces suppressions en proposant une procédure qui fait disparaître de l'arbre DOM tous les nœuds portant un tag donné.
6. Ajouter des styles css pour les éléments body et main.
7. Ajouter une partie <style> dans l'entête du document et y définir des styles css, par exemple pour les titres et les sections du document.
8. Empêcher la transformation du document au chargement et ajouter bouton pour permettre l'extraction à la demande de l'utilisateur.
9. Ajouter bouton et code JavaScript pour extraire les liens (ou les titres des sections) présents dans le document et les faire apparaître dans une nouvelle section du document.
10. Idem pour les principales métadonnées présentes dans l'entête : auteur, titre, mots-clefs et description.

Pour aller plus loin : effectuer ce type d'extractions sur une page quelconque du web, en travaillant directement dans la console du navigateur.

[DOM avancé | exercice 2] Compréhension d'un algorithme DOM

1. Commenter ligne par ligne le code ci-dessous.
2. Discuter l'algorithme sous-jacent : finalité, avantages et inconvénients, alternatives.

let main    = document.getElementsByTagName('main')[0];
let enfants = main.childNodes;

for (let i=0 ; i<enfants.length ; i=i+1) {
   let noeud = enfants[i];
   if ((noeud.nodeType == 1) && (noeud.nodeName == 'P')) {
      main.innerHTML = main.innerHTML + '<p>' + noeud.innerHTML + '</p>';
   }
}

[DOM avancé | exercice 3] À la recherche des feuilles de l'arbre DOM

Nous cherchons dans cet exercice à parcourir l'arbre DOM, en particulier pour accéder au texte des documents du corpus html5.

Pour chaque instruction suivante, programmer un parcours de l'arbre DOM, récursif ou itératif, et associer le traitement à un nouveau bouton.

1. Compter les feuilles textuelles et les éléments du document. Afficher les compteurs dans une alerte ou dans la console.
2. Trouver toutes les feuilles textuelles et concaténer les textes, en respectant l'ordre naturel de lecture. Écraser le document avec le texte ainsi construit.
3. Définir une liste de couleurs. Parcourir tous les éléments du document et changer la couleur de fond de chacun, en utilisant les couleurs de la liste.
4. Trouver les éléments les plus profonds (sans autre élément dans leur descendance) et les encadrer par un bord coloré.
5. Pour chacune des feuilles du document, faire apparaître en son sein son numéro d'ordre ainsi que la profondeur à laquelle elle a été trouvée.
6. Indiquer cette fois, pour chaque feuille, le chemin qui a conduit à elle (chemin codé par les numéros de fils successifs).

[DOM avancé | exercice 4] Moteur de recherche

Après avoir trouvé l'ensemble des feuilles textuelles d'un document, il s'agit cette fois de chercher dans les textes eux-mêmes.

Recherche d'un mot dans les feuilles textuelles

1. Créer une fonction JavaScript qui sera appelée au chargement de la page html et y définir une variable cible contenant le mot à rechercher.
2. Mettre en œuvre l'un des parcours des feuilles vu précédemment.
3. Pour chaque feuille textuelle rencontrée, tester si le mot cible s'y trouve ou non. Si oui, changer la couleur de fond du père de la feuille textuelle.
4. Pour chaque feuille concernée, modifier le code JavaScript pour ne surligner que la première occurrence du mot cible.
5. Modifier à nouveau pour cette fois faire apparaître toutes les occurrences du mot cible.

Recherche d'un motif

6. Modifier le moteur de recherche pour permettre l'utilisation de motifs sous forme d'expressions régulières : à nouveau surligner l'élément parent, trouver la première occurrence, puis toutes les occurrences.
7. Trouver les expressions régulières qui capturent des années, des mots commençant par une majuscule, des mots-composés, des mots possiblement construits par préfixation, etc.

Recherche dans les attributs

8. Augmenter le code JavaScript pour que la recherche se fasse également dans le contenu des attributs et surligner (différemment) les éléments portant les attributs découverts.

Interface utilisateur

9. Permettre la saisie du mot cible dans un champ de saisie prévu à cet effet.
10. Afficher dans le documents des statistiques sur les résultats de la recherche.
11. Proposer un moyen pour naviguer au clavier entre ces différentes occurrences.
12. Écrire le code JavaScript pour nettoyer les résultats de la recherche et permettre ainsi plusieurs recherches successives.

[DOM avancé | exercice 5] Prises en compte des attributs

0. Extraire tous les textes de tous les attributs du document.

Nous nous intéressons maintenant au corpus choisi cette année.

1. Compléter le style css pour faire apparaître les verbes avec un attribut data-lemma, prévoir une autre apparence au passage de la souris.
2. Au clic sur l'un de ces verbes, surligner les autres occurrences de ce verbe dans le document.
3. Surligner également, dans une autre couleur, les verbes de la même famille.
4. Tester la validité html5 du document. Corriger les erreurs en généralisant l'utilisation d'attributs data-* et modifier le code JavaScript en conséquence.
5. Utiliser le local storage de html5 pour que la recherche effectuée soit propagée lorsque l'on charge un nouveau document du corpus.

[DOM avancé | exercice 6] Documents TEI

Nous travaillons sur un corpus de documents XML au format TEI avec l'objectif de rendre dynamiques ces documents.

Les fichiers XML sont figés : nous nous interdisons de les modifier. Idem pour les fichiers HTML qui sont produits automatiquement. Nous pouvons intervenir sur les fichiers xslt, css et js.

Mise en valeur des noms de personnages (persName)

1. Ajouter un bouton qui surligne les personnages :
   1. faire apparaître un bouton dans le document html,
   2. ajouter automatiquement un span et une class à chaque personnage,
   3. implémenter une fonction JavaScript, associée au bouton, qui surligne les personnages.
2. Permettre le clic sur un personnage :
   1. ajouter un attribut onclick à chaque span de class personnage,
   2. associer une procédure JavaScript à cet événement en lui passant le nom du personnage en paramètre,
   3. déclencher une alert lors d'un clic sur un personnage (faire apparaître son nom).
3. Afficher lors du clic la présentation du personnage, avec son image :
   1. ajouter un environnement aside dans le document html,
   2. définir un tableau JavaScript qui à chaque nom de personnage associe sa description.
   3. sur clic d'un personnage, faire apparaître sa description dans le aside,
   4. idem pour les images illustrant les personnages,
   5. travailler en CSS et JavaScript l'apparence du aside (encadrement, marges, transparence, positionnement fixe ou à proximité du clic).
4. Au clic sur un personnage, surligner toutes les occurrences du personnage choisi et seulement les siennes. En particulier, il faut gérer les clics multiples et l'effacement des sélections précédentes.

Mise en place d'un moteur de recherche

5. Réutiliser un code qui cherche une cible dans les feuilles textuelles du document :
   1. isoler ce code dans un fichier .js,
   2. le charger dans les entêtes des fichiers HTML,
   3. lancer la création du bouton de recherche au chargement d'une page.
6. Propager les recherches de fichier en fichier :
   1. enregistrer la recherche dans le localStorage au moment de la saisie du motif par l'utilisateur,
   2. récupérer ce motif au moment du chargement d'une page et lancer la recherche.

Mise en valeur de choice

7. Permettre le choix d'une édition ou d'une autre :
   1. ajouter un bouton par édition,
   2. surligner les « choix » de l'édition choisie,
   3. cacher les choix de l'autre édition.
8. Afficher simultanément les deux versions du document, en double colonne :
   1. ajouter un bouton destiné à lancer le traitement,
   2. supprimer les éléments inutiles (titre, boutons, aside, etc.),
   3. récupérer le contenu de body,
   4. créer deux article, chacun ayant le contenu de body,
   5. remplacer le contenu de body par ces deux articles,
   6. obtenir le double-colonne par travail sur la CSS,
   7. surligner les « choix » propres à chaque édition.

Traitement des autres éléments TEI (en utilisant les attributs html5 data-)

10. Mettre en valeur note.
11. Voir aussi placeName, foreign, time et date, etc.
12. Mettre en forme pb, hi, etc.

[DOM avancé | exercice 7] Gestion d'un tableau de données

Il s'agit de programmer une interface pour manipuler des données relatives au vocabulaire utilisé par un auteur dans ses œuvres.

Les fonctionnalités suivantes doivent être actionnables par des boutons et programmées directement en interaction avec le DOM (vous pourrez plus tard refaire l'exercice en travaillant uniquement sur le tableau JavaScript contenant les données).

1. Charger les données en mémoire et visualiser leur structure avec console.table().
2. Injecter ces données dans le DOM sous la forme d'un tableau html.
3. Surligner les lignes du tableau qui correspondent à la catégorie grammaticale nom.
4. Permettre de sélectionner soit les verbes soit les noms (les lignes qui ne correspondent pas sont supprimées).
5. Sélectionner les lignes dont les compteurs sont supérieurs ou égaux à 80.
6. Pour chaque ligne, ajouter des boutons monter/descendre pour la déplacer (il s'agit de programmer l'échange de deux lignes consécutives).
7. Programmer le tri des lignes par ordre alphabétique des mots, puis le tri des lignes par ordre décroissant des compteurs.
8. Ne garder que les 10 lignes présentant les plus hautes valeurs des compteurs.
9. Afficher les 10 premiers mots et leurs compteurs dans un graphique (en utilisant un canvas).
10. Convertir le tableau visible en une structure JavaScript, laquelle sera ensuite transformée en JSON pour affichage dans la console.

[Ajax | exercice 1] Utilisation d'une API publique fournissant du XML

Nous voulons ici développer un moteur de recherche basé sur l'API IdRef et plus particulièrement sur l'interface /Sru/Solr qui permet d'accéder aux informations sur les notices d'autorités du Système Universitaire de Documentation (Sudoc).

L'url suivante, typique pour interroger cette API, permet de rechercher selon un nom (ici « torre ») : url-requête.

Nous obtiendrons les réponses en XML (le paramètre indent=on nous permet d'avoir un XML joliment indenté, pour le visualiser dans la console par exemple). Pour chaque personne dont le nom correspond, nous avons demandé trois champs : id, ppn_z et affcourt_z.

1. Créer une page html5 qui permette la saisie d'un nom, soit par prompt, soit par un input de type text.
2. Associer la saisie d'un nom au déclenchement d'une procédure, laquelle effectue la requête à l'API à l'aide de XMLHttpRequest.
3. Associer l'achèvement de la requête à une nouvelle procédure, laquelle récupère la réponse en XML, construit un DOM, en extrait par DOM les noms des personnes (champ affcourt_z) et les ajoute à la page.
4. Nettoyer la liste produite avant chaque nouvelle recherche.
5. Transformer le nom de chaque personne en un lien cliquable vers sa notice, par exemple : https://www.idref.fr/137280815 (l'identifiant en fin d'url correspond au champ ppn_z).
6. Reprendre les questions avec cette fois la méthode Fetch en lieu et place de XMLHttpRequest.

Autres variations : il est possible d'obtenir du JSON avec l'ajout du paramètre wt=json lors de la requête à l'API... et ainsi de refaire l'exercice avec XMLHttpRequest+JSON, puis avec Fetch+JSON ! À noter que l'exercice suivant, lui aussi, permet de manipuler du JSON.

[Ajax | exercice 2] Utilisation d'une API publique fournissant du JSON

Le but de cet exercice est de connaître, en temps réel et sur l'une de nos pages, l'état des stations V'lille à proximité du campus de Pont de Bois. Pour nous aider, est notre disposition l'API V'lille fournie par la Métropole Européenne de Lille (MEL).

L'url suivante récupère tous les champs qui décrivent la station numérotée 111, en particulier nom, adresse, etat, etat_connexion, nbvelosdispo et nbplacesdispo, au format JSON : url-requête.

1. Définir un tableau JavaScript la liste des numéros des stations qui nous intéressent : 111, 130, 84, 85, 77, 86, 95, 76 et 112.
2. Créer une procédure qui prend un numéro de station en paramètre et qui utilise Fetch pour récupérer les informations la concernant.
3. Intégrer ces informations à notre page à l'aide de DOM.
4. Programmer une nouvelle procédure qui lance la première sur chaque numéro de station de notre tableau.
5. Lancer cette dernière procédure au chargement de la page et rendre possible également son lancement par un bouton de mise à jour (effacer les informations affichées avant chaque mise à jour).
6. L'ordre des stations varie-t-il d'une exécution à l'autre ? Comment préserver systématiquement l'ordre donné dans la liste ci-dessus ?

Variation possible : plutôt que de travailler station par station, on peut récupérer le fichier global en JSON et le travailler en JavaScript (il faut probablement, dans ce cas, activer le CORS).

Autre variation envisageable : recommencer l'exercice avec XMLHttpRequest à la place de Fetch.

[Ajax | exercice 3] Extraction de données depuis une page web distante

Nous voulons cette fois récupérer des informations disponibles sur le Web, mais fournies par aucune API : les menus d'un restaurant du CROUS, par exemple https://www.crous-lille.fr/restaurant/r-u-flers-lille-iii/ ou https://www.crous-lille.fr/restaurant/r-u-barrois-cite-sicentifique/.

Le service que nous développons n'étant pas prévu par le CROUS, il faut probablement activer le CORS dans nos navigateurs.

1. Récupérer la page complète, au choix avec la méthode XMLHttpRequest ou la méthode Fetch.
2. Transformer en DOM le code html récupéré.
3. Interroger le nouveau DOM pour extraire les informations des menus.
4. Intégrer ces informations au DOM de notre page.