Activités, créer un formulaire dynamique (17/02/11)

Objectif

L'objectif consiste à apprendre à utiliser certaines méthodes du DOM afin d'ajouter et supprimer des éléments aux pages web.

Exemple

Supprimer un élément: 

//acces a l'element par son nom
var element = document.getElementsByName("bouton")[0];
//supprimer l'element (s'il existe)
if (element != undefined) element.parentNode.removeChild(element);

Ajouter un élément: 

//creation balise
var balise = document.createElement("legend");
//ajout attribut
balise.setAttribute("name","legendeCode");
//creation texte a ecrire entre les balises
var texte = document.createTextNode("Code :")
//ajout texte entre les balises
balise.appendChild(texte);
//acces balises entre lesquelles on veut inserer la balise cree
var baliseParent = document.getElementsByName("monFormulaire")[0];
//ajout balise
baliseParent.appendChild(balise);

Contexte

Nous souhaitons réaliser un petit formulaire permettant de tracer des chemins à angles droits. Il contient deux boutons radios. En cochant le premier, l'utilisateur a la possibilité de coder son chemin (0, 1, 2 et 3 pour des déplacements vers la droite, en bas, vers la gauche et en haut). En cochant le second, l'utilisateur a la possibilité de choisir deux chemins prédéfinis : l'escalier et l'aléatoire. Un dessin vaut mieux qu'un long discours :

Déroulement

Utilisez le navigateur Firefox. Pensez à consulter la console d'erreur.

Le barème donné entre parenthèses est indicatif.

  1. Récupérez le squelette des fichiers xhtml et javascript
  2. (2) Créez un formulaire appelé 'monFormulaire' contenant les deux boutons radio.
  3. (2) Créez les fonctions afficheInput() et afficheSelect(). Elles doivent envoyer un message d'alerte affichant respectivement 'input' et 'select'.
  4. (2) Appelez les deux fonctions précédentes lors de l'événement 'onchange' (écrire tout en minuscules) associés aux deux boutons radio.
  5. (2) Ajoutez à la fonction afficheInput() le code exemple d'ajout pour affichez la légende 'Code : ' visible sur la capture d'écran du formulaire.
  6. (3) Sur le même modèle, ajoutez aux fonctions afficheInput() et afficheSelect() le code nécessaire à l'affichage du champs texte (appelé 'code') ou de la liste de sélection (appelée 'listeDessins'), ainsi que du bouton de validation (appelé 'bouton').
  7. (3) Les éléments s'accumulent à mesure que l'utilisateur coche et décoche les boutons radio. A partir du code le code exemple de suppression, écrivez les fonctions supprimeInput() et supprimeSelect() appelées respectivement dans afficheSelect() et afficheInput() pour supprimer les éléments qui ne correspondent plus au choix de l'utilisateur.
  8. (2) Appelez la fonction generer_code() quand l'utilisateur clique sur le bouton après avoir choisi un chemin prédéfini. Attention aux valeurs des options.
  9. (4) Ecrivez la fonction verifier_code() appelée quand l'utilisateur clique sur le bouton après avoir coder son propre chemin. Elle doit récupérer le code contenu dans le champs texte (appelé 'code') et vérifier que chaque caractère est égal à '0', '1', '2' ou '3'. Si c'est le cas, elle appelle la fonction de dessin, sinon elle affiche un message d'alerte.

Fin

Faites une archive appelée prenom.nom.zip contenant formulaire.xhtml et fonctions.js, puis envoyez-là à l'addresse suivante: monPrenom.monNom@univ-lyon2.fr