TP3- Formulaires, Javascript

Université de Provence
L3 Info
Année 2009-2010
OUTILS WEB
TP3- Formulaires, Javascript
L’énoncé de ce TP disponible sur http://www.lif.univ-mrs.fr/∼belkhir/OW/tp3.pdf
Formulaires
Ecrire une page HTML reproduisant le formulaire qui se trouve à l’adresse
http://www.lif.univ-mrs.fr/ e belkhir/from.html de telle sorte que si on clique sur le bouton Enregistrer
toutes les données saisies s’afficheront dans le cadre droit de la page ( i.e. cadre Vos données.)
Javascript, premiers pas, calculs
1. Construire une page HTML minimale dans l’éditeur de votre choix. Ajouter un bloc d’instructions
JavaScript qui produit un affichage quelconque dans une fenêtre pop up d’alerte en style italique.
Vérifier le résultat.
2. Écrire une page HTML faisant apparaı̂tre la suite des nombres premiers compris entre 1 et 200.
3. Écrire une fonction calculant la factorielle d’un entier passée en paramètre.
2ème version: cette fonction pourra accepter des entiers négatifs.
3ème version: rendre cette fonction récursive.
4. Une conjecture proposée par J. Conway vers 1950, affirme que la suite S définie par récurrence par:
S0 > 0 (1er terme), et
Sn+1 =
Sn \ 2,
si Sn est pair
3 × Sn + 1, sinon
est périodique de période 3 (avec les valeurs 1, 4, 2 ) à partir d’un certain rang. Faire un programme
JavaScript, à enregistrer sous js-conway.html permettant: un choix aléatoire de la valeur initiale S0 ,
le calcul et l’affichage des termes successifs tant que la périodicité (c-à-d la valeur 1) n’est pas atteinte,
conclure en donnant le nombre de termes (y compris S0 ).
Formulaires et JavaScript
On veut modéliser une calculette en utilisant un formulaire HTML/Javascript. Plus précisement, ce formulaire se compose de :
• deux champs de texte (pour les deux opérandes nommées A et B),
• une liste de sélection (pour les opérateurs d’addition, soustraction, multiplication et division),
• un champ de texte (pour le résultat),
• un bouton “Calculer” (qui permet d’effectuer le calcul).
NB. On pourra utiliser des fenêtres d’alerte pour les opèrations invalides.
Gestion des évènements
Voici le jeu de morpion tel que vous allez le développer.
Première étape
1. Récupérer de http://www.lif.univ-mrs.fr/ e belkhir/ les images blank.gif, x.gif et o.gif;
2. écrire le code HTML d’un tableau 3 × 3 et faire apparaı̂tre dans toutes les cases l’image blank.gif.
Appeler les cases pos0 à pos9, et appeler la fonction clic avec comme argument le numéro de la case,
lors d’un évènement de clic dans une case ;
3. créer trois objets JavaScript Image dont les fichiers source seront les fichiers récupères;
4. créer un objet JavaScript Array de taille 9, et l’initialiser à 0. Ce tableau va contenir les valeurs
courantes des cases ( 0 si la case est vide, 1 si elle contient un ”x”, et 3 si elle contient un ”o”).
Deuxieme étape
1. Écrire la fonction clic qui fasse que l’image dans la case de vienne un ”x” lors d’un clic, sauf bien sûr
si cette case contient dejà un ”o” ;
2. dès que l’on clique sur une case, vérifier par une fonction verifier si la machine ou l’humain ont
gagne. Le cas échéant ouvrir une alerte ”Vous avez gagné”. Si la machine a gagné, écrire ”J’ai gagné”.
Si toutes les cases sont pleines et personne n’a gagné, écrire ”Égalité” ;
3. prévoir un bouton d’initialisation et une fonction initialiser() ;
4. initialiser le jeu après chaque alerte ;
5. écrire une fonction machine() de réponse de la machine. Pour commencer, choisir aléatoirement une
case vide pour placer un ”o”.
NB. La fonction Math.random() choisit un nombre au hasard entre 0 et 1; la fonction Math.floor(x)
retourne la valeur entière de x.
Troisième étape (Optionnelle)
intelligent.
La Troisième étape consiste à rendre le jeu de l’ordinateur un peu plus
1. Apprendre la machine à empêcher que l’humain fasse trois ”x” consécutifs. Pour cela écrire une fonction
empecher() qui vérifie tous les motifs ”x-x-blanc”, ”x-blanc-x”, ”blanc-x-x”, horizontaux, verticaux et
diagonaux, et qui met systématiquement un ”o” à la place du ”blanc” ;
2. utiliser le même code pour écrire une fonction gagner() qui vérifie tous les motifs ”o-o-blanc”, ”oblanc-o”, ”blanc-o-o”, horizontaux, verticaux et diagonaux, et qui met systématiquement un ”o” à la
place du ”blanc”. Appliquer gagner() avant empecher() ;