énoncé à imprimer

2ème année de Licence
Université Jean Monnet
Informatique
TD 4 TIB
Javascript, formulaire et cookie
Février 2008
Durée : 2 heures
Objectifs : Vous devriez, au terme de ce TD, être en mesure d’écrire un programme Javascript
qui manipule des objets, notamment les valeurs d’un formulaire et les cookies.
Gestion de formulaire
I - Nous allons créer ici une page web qui contient un formulaire avec une seule commande, un
champ de saisie, dans laquelle l’utilisateur saisit une date au format jjmmaaaa.
Si la date est correcte, une boı̂te de dialogue affiche cette date de manière lisible, par exemple le
(( 5 mai 1821 )).
1. Écrire une fonction sousChaine qui prend en entrée trois paramètres :
– une chaı̂ne de caractères ;
– une valeur de position de début ;
– et une longueur.
Cette fonction renvoie la sous-chaı̂ne extraite à partir de la position de début avec la longueur
précisée. Pa exemple, sousChaine("abcdfg", 2, 3) renvoie la chaı̂ne "cdf".
2. Écrire une fonction enlevePremiersZeros dont l’unique argument est une chaı̂ne de caractères
et qui renvoie la même chaı̂ne dépourvue de tous les zéros initiaux. Par exemple, enlevePremiersZeros("00134AZ01") renvoi "134AZ01".
3. Écrire une fonction validation qui affiche la date après avoir testé la validité de la date saisie.
Envisager toutes les erreurs possibles de l’utilisateur.
II - Nous allons créer ici une page web qui contient un formulaire avec 5 commandes :
– deux champs pour saisir des opérandes ;
– un menu pour sélectionner un opérateur ;
– un bouton de validation ;
– un champs qui contiendra la résultante.
Cette calculatrice peut additionner, soustraire, multiplier ou diviser deux opérandes.
1. Écrire le fomulaire.
2. Écrire une unique fonction effectuerOperation().
III - Nous allons créer ici une page web qui contient le formulaire suivant et qui affiche la fenêtre
suivante :
1. Écrire le code HTML de ce formulaire.
2. Écrire le code Javascript qui permet d’afficher cette fenêtre lorsqu’aucun champ n’est informé.
Les valeurs des champs doivent y être affichées lorsque ceux-ci sont renseignés. À cette intention ;
vous devez écrire une fonction Javascript alert_fenetre() qui définit un ensemble de variables
correspondant à la valeur des champs. Ces variables sont initialisées à "vide", "non coché", "aucun bouton" et leur valeur est modifiée lorsque les champs correspondant ont été informé.
3. Réécrire la fonction Javascript alert_fenetre() afin que les variables ne soient initialisées
qu’une seule fois.
4. Un objet Javascript formulaire comme la variable theform contient un tableau theform.elements[]
dont la taille est theform.length. Chaque élément du tableau a un nom name (e.g. l’attribut name
de la balise <input> correspondante), un type type (e.g. l’attribut type de la balise <input> correspondante) et une valeur value (e.g. l’attribut value de la balise <input> correspondante).
Réécrire la fonction Javascript alert_fenetre() en utilisant ces attributs.
5. Écrire la fonction Javascript alert_fenetre() afin qu’elle fonctionne quelque soit le formulaire.
Cookies
IV - Un cookie est un ensemble de données qui sont associées à un document HTML et qui
sont persistantes. Ces données sont mémorisées par le navigateur (client). En Javascript, la propriétés cookie de l’objet document est une chaı̂ne de caractère du type "nom=valeur ; attribut1=valeur1 ; attribut2=valeur2". Les attributs suivants font légion :
– domain=domaine.tld signifie que ce cookie est visible par toutes les pages de domaine.tld ;
– path=/ signifie que ce cookie est visible par toutes les pages dont le chemin est / ;
– expires=Fri, 02-Jan-1970 00 :00 :00 GMT précis la durée de validité du cookie ;
– secure signifie que ce cookie n’est activé que pour les connexions sécurisées ;
Afin de manipuler cette chaı̂ne de caractère, vous pouvez utiliser les fonctions Javascript :
– chaine.indexOf(souschaine) retourne l’index de début de souschaine contenue dans
chaine ;
– chaine.substring(debut,fin) retourne la sous-chaı̂ne de chaine dont le préfixe est debut
et qui se termine par fin (fin n’est pas inclus dans la sous-chaı̂ne retournée) ;
– chaine.spilt(delimiteur) retourne le tableau des sous-chaı̂nes de chaines délimitées par
delimiteur.
1. La fonction prompt("What is your name :", "") ouvre une fenêtre qui demande à l’utilisateur de donner son nom et qui renvoie la chaı̂ne de caractère correspondante. Écrire une page web
muni d’un script Javascript qui permet à l’utilisateur de donner son nom et sa couleur préférée et
qui l’affiche, dans cette couleur, dans le document. Que se passe-t-il lorsque la page est rechargée ?
2. Nous allons définir un objet Cookie dont les attributs correspondants aux attributs du cookie
du document. À cette intention écrire le constructeur Cookie(document, name, hours, path,
domain, secure) qui permet de définir et d’instancier ses attributs.
3. Écrire la méthode store() de l’objet Cookie qui permet d’enregistrer l’ensemble des données
issues des attributs de cet objet dans le cookie du document.
4. Écrire la méthode load() de l’objet Cookie qui permet de charger l’ensemble des données du
cookie du document dans les attributs de cet objet.
5. Écrire la méthode remove() de l’objet Cookie qui efface l’ensemble des données du cookie du
document.
6. Réécrire, en utilisant un objet Cookie, le script qui permet à l’utilisateur de donner son nom et
sa couleur préférée et qui l’affiche, dans cette couleur, dans le document. Que se passe-t-il lorsque
la page est rechargée ?
7. Ajouter dans la page un compteur du nombre de visite.
8. Ajouter dans la page un bouton pour effacer le cookie.
2