Travaux pratiques JavaScript

Sommaire

• Génération de code HTML
• Propriétés du document
• Actions utilisateur et DOM
• Autres exemples

• Tableaux JavaScript
• Formulaires
• Canvas html5

---

 

Génération de code HTML

Boucles, procédures et figures géométriques

1. Tester les instructions d'affichage document.write et document.writeln.
2. Moduler l'affichage en fonction d'un test.
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.
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).
   [ source ][ démo ]
7. Reprendre les questions précédentes en utilisant systématiquement des procédures.
   [ source ][ démo ]

Conversions

1. Utiliser JavaScript pour afficher la valeur en euros de 2001 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.

 

Sommaire

• Génération de code HTML
• Tableaux JavaScript
• Propriétés du document
• Formulaires
• Actions utilisateur et DOM
• Canvas html5
• Autres exemples

Tableaux JavaScript

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 calculer la moyenne des notes, de rechercher une note particulière, etc.
   [ source ][ démo ]
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.

 

Propriétés du document

Visualisation des propriétés

Écrire le squelette d'une page HTML avec la définition du titre dans l'en-tête, et la définition des couleurs dans la balise BODY. Ajouter le code JavaScript permettant de visualiser sous forme de tableau HTML toutes les propriétés du document : ses couleurs, le titre, la date de dernière modification, son adresse et l'adresse de provenance du visiteur (pour tester cette dernière propriété, faire un lien sur cette page depuis une autre de vos pages).

Ancres

Reprendre une page contenant des ancres et utiliser JavaScript pour afficher le tableau des ancres de cette page.

Destination d'un lien

Écrire le code JavaScript qui, lorsque la souris passe sur un lien, fait apparaître la destination de ce lien dans le statut de la fenêtre.

 

Sommaire

• Génération de code HTML
• Tableaux JavaScript
• Propriétés du document
• Formulaires
• Actions utilisateur et DOM
• Canvas html5
• Autres exemples

Formulaires

Champ obligatoire

Reprendre la page HTML contenant un formulaire. Ajouter le code JavaScript permettant d'alerter l'utilisateur lorsqu'un champ obligatoire n'est pas renseigné.

Convertisseur

Nous nous proposons dans cet exercice de réaliser une convertisseur francs-euros.

1. Créer une nouvelle page contenant un formulaire : deux cases de texte destinées à recevoir les sommes d'argent, et un bouton de soumission.
2. Écrire le code JavaScript qui effectue la conversion et place le résultat dans la zone de texte adéquate.

Question/réponse

Construire un formulaire contenant des boutons et des listes, puis associer à chaque question une zone de texte qui prendra la valeur de la réponse choisie.

Modification de réponse

Dans un formulaire, associer aux entrées de type texte un code JavaScript qui signale à l'utilisateur chaque changement dans la réponse.

Réponse vide et focus

Écrire une fonction JavaScript qui vérifie qu'aucune réponse fournie dans un formulaire n'est vide. Si c'est le cas, le signaler à l'utilisateur et replacer le curseur dans la zone à renseigner.

Vérification de réponses

Dans un formulaire HTML, ajouter le code JavaScript qui permet

• de vérifier la syntaxe d'une adresse mail ;
• de limiter la longueur d'un texte saisi ;
• de contrôler qu'un nombre a été fourni.

 

Sommaire

• Génération de code HTML
• Tableaux JavaScript
• Propriétés du document
• Formulaires
• Actions utilisateur et DOM
• Canvas html5
• Autres exemples

Actions utilisateur et DOM

[Actions & DOM | exercice 1] Premiers tests

À un document HTML, ajouter des alertes :

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

Avec des boutons :

6. changer la couleur de fond 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] 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.

[Actions & DOM | exercice 3] Diaporama

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

[Actions & DOM | exercice 4] Image aléatoire

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

[Actions & DOM | exercice 5] 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 6] Disparition d'une image

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.

[Actions & DOM | exercice 7] Texte changeant

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.

 

Sommaire

• Génération de code HTML
• Tableaux JavaScript
• Propriétés du document
• Formulaires
• Actions utilisateur et DOM
• Canvas html5
• Autres exemples

Canvas html5

Premier canvas

On explore le fonctionnement d'un canvas (html5) : comme 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 initialisation() 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. Compléter la fonction initialisation() pour associer un 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.

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.

 

Sommaire

• Génération de code HTML
• Tableaux JavaScript
• Propriétés du document
• Formulaires
• Actions utilisateur et DOM
• Canvas html5
• Autres exemples

Autres exemples

Premiers pas

1. Premiers événements [ démo ][ source HTML ]
2. Bouton et couleurs [ démo ][ source HTML ]

Animation

1. Roll-over [ démo ][ source HTML ]
2. Défilement d'images [ démo ][ source HTML ]

Navigation

1. Retour à la page précédente [ démo ][ source HTML ]
2. Menu par accès rapide [ démo ][ source HTML ]

Pop-up

1. Ouverture de nouvelles fenêtres [ démo ][ source HTML ]
2. Ouverture de fenêtre et ancres [ démo ][ source HTML ]

Vérifications de formulaires

1. un champ obligatoire [ démo ][ source HTML ]
2. deux champs obligatoires [ démo ][ source HTML ]
3. un champ mail obligatoire [ démo ][ source HTML ]
4. une question radio [ démo ][ source HTML ]
5. une question checkbox [ démo ][ source HTML ]
6. plusieurs questions radio et checkbox version 1 [ démo ][ source HTML ]
7. plusieurs questions radio et checkbox version 2 [ démo ][ source HTML ]
8. gestion de autre réponse [ démo ][ source HTML ]
9. aiguillage suivant réponse [ démo ][ source HTML ]

Récupération d'informations

1. Paramètres du document [ démo ][ source HTML ]
2. Informations sur le navigateur [ démo ][ source HTML ]

Calculs

1. Table de conversion francs/euros [ démo ][ source HTML ]
2. Tables de multiplication [ démo ][ source HTML ]

---