site de Fabien Torre, université de Lille


Travaux pratiques JavaScript

Des exercices et des exemples illustrant les possibilités du langage JavaScript embarqué dans une page HTML : vérification de formulaires HTML, capture des actions de l'utilisateur, manipulation du DOM, interaction avec un canvas html5, etc.

[1] Génération de code HTML

(a) Boucles, procédures et figures géométriques

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

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

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

(d) Construction de verbes par préfixation en dé-

  1. É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.
  2. Fournir une procédure qui à partir d'un verbe construit le verbe décrivant le processus inverse. La méthode doit tester la première lettre du verbe, lui ajouter le préfixe adéquat et afficher une phrase présentant le résultat.

(e) Négation de la qualité signifiée par la base adjectivale

Cette négation est exprimée par le morphème in-, lequel présente plusieurs allomorphes en distribution complémentaire.

  1. Écrire une fonction JavaScript qui va recevoir comme paramètre un adjectif dérivé en in- et qui va retourner la base adjectivale de cet adjectif.
  2. Écrire une fonction JavaScript qui opère la transformation inverse.

[2] Tableaux JavaScript

(a) 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.
    [ 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.

(b) Retour sur les mots

Reprendre les exercices de la section précédente (exercice 1.c et suivants) : 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.

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

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

[3] 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.

[4] 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.

[5] 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 :

  1. changer la couleur de fond quand on clique sur un bouton,
  2. changer aussi l'apparence du bouton,
  3. ajouter un bouton qui permette de revenir à la normale.

Sur des images :

  1. changer une image par une autre quand la souris passe dessus,
  2. remettre l'image d'origine quand la souris quitte l'image.
[ source ][ démo ]

[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.
[ source ][ démo ]

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 :

  1. 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).
  2. 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 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.
[ source ][ démo ]

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.
[ source ][ démo ]

[Actions & DOM | exercice 4] 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 au clic sur le mot,
  • puis dans un paragraphe dédié au passage de la souris sur 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 :

  1. Créer une page html5 avec un menu contenant plusieurs items.
  2. 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.
[ source ][ démo ]

Étapes suivantes :

  1. N'autoriser que les déplacements valides.
  2. Compter et afficher le nombre de déplacements effectués.
[ source ][ démo ]

Travail restant :

  1. Mélanger aléatoirement les cases au début du jeu.
  2. Détecter la fin de partie.
  3. 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 :

  1. Généraliser votre code pour gérer plus de deux versions de l'image.
  2. Généraliser votre code pour utiliser des découpages autres que 3x3.
  3. Provoquer un effet de fondu lors des changements d'images.
  4. 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.
[ source ][ démo ]
  1. 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.
  2. 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.).
  3. 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.
un écran de jeu un autre écran de jeu

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

carré blanc un vaisseau spatial un missile un alien boum

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

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

[6] Manipulations DOM complexes

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

  1. 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.
  2. À 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.
  3. S'assurer que les deux variables sont bien constituées en changeant les couleurs de fond des parties main et body.
  4. 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.
  5. Enlever toute indication de mise en forme css, qu'elle soit introduite par l'élément style ou par l'élément link.
  6. 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é.
  7. Ajouter des styles css pour les éléments body et main.
  8. 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.
  9. Empêcher la transformation du document au chargement et ajouter bouton pour permettre l'extraction à la demande de l'utilisateur.
  10. Ajouter bouton et code JavaScript pour extraire les liens présents dans le document et les faire apparaître dans une nouvelle section du document.
  11. 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.
    var main = document.getElementsByTagName('main')[0];
    var enfants = main.childNodes;

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

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

Nous cherchons à travailler sur le texte des documents du corpus html5.

  1. Parcourir l'arbre DOM et compter les feuilles textuelles. Proposer une méthode récursive et une méthode itérative.
  2. Extraire toutes les feuilles textuelles et les faire apparaître dans le document, en respectant l'ordre naturel de lecture.
  3. Pour chacune de ces feuilles, indiquer son numéro d'ordre ainsi que la profondeur à laquelle elle a été trouvée.

[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

  1. 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.
  2. 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

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

  1. Permettre la saisie du mot cible dans un champ de saisie prévu à cet effet.
  2. Afficher dans le documents des statistiques sur les résultats de la recherche.
  3. Proposer un moyen pour naviguer au clavier entre ces différentes occurrences.
  4. É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

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

[7] Canvas html5

[Canvas | exercice 1] Petit éditeur de dessins

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 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. Compléter la fonction initialisations() 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.

[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 :

var 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];
var 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 :
    alien
    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.
[ récupérer ]

L'interface

  1. 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.
  2. 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.
[ source ][ démo ]
  1. 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
  2. Ajouter des boutons pour arrêter l'évolution, ou pour la relancer dans différents modes.
[ un jeu de la vie JavaScript et canvas html5 ]

[8] 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 ]
Fabien Torre Valid HTML5! Valid CSS!
Accueil > Enseignement > En pratique > Programmation > JavaScript
(contenu mis à jour )
site de Fabien Torre, université de Lille

Description

Survoler un lien de navigation pour lire sa description ici...


Une photo au hasard

Week-end à Lyon.

Parc de la Tête d'Or.

(le 8 avril 2007)

Deux zèbres.