EPI DIGITAL SCHOOL
TP5 Javascript & DOM
DUREE: 3H LOGICIEL UTILISE: VS code
EXERCICE 1:
Objectifs:
EXERCICE 2
L’utilisateur doit répondre aux questions présentes puis cliquer sur le bouton « Score » pour connaître
le nombre de points cumulés.
1- Ecrire le code HTML5 permettant de créer le formulaire composé de trois questions et se terminant
par un bouton nommé Score.
2- Déclarer deux tableaux RC et RU de trois éléments telque RC est le tableau des réponses correctes
au formulaire et RU est celui des réponses de l’utilisateur.
1
EPI DIGITAL SCHOOL
Stocker les réponses correctes dans RC.
3- Ecrire la fonction EnregistrerReponse(i,rep) qui permet d’enregistrer dans la ième case de RU la
réponse rep l’utilisateur à chaque fois que ce dernier clique sur un bouton radio.
4- Ecrire la fonction ScoreFinal() qui permet d’afficher, au clic sur le bouton Score, une boite de
dialogue contenant le score final de l’utilisateur comme suit : Votre score est 2/3 !
EXERCICE 3
Reproduisez sous Dreamweaver un fichier qui présente la structure ci-dessous:
2
EPI DIGITAL SCHOOL
Un restaurant vous demande de réaliser un formulaire pour qu’un client puisse
commander son repas à la carte par internet. Vous calculerez à fur et à mesure le tarif qui sera
affiché dans un champ de formulaire et remis à jour lorsqu’un plat sera sélectionné. Si le tarif
dépasse une certaine somme, le client aura droit à un dessert gratuit, un message d’alerte le
préviendra. Lorsque la commande est prête, un clic sur le bouton Commander postera la
commande au restaurant.
Etape 1 : dessin du formulaire
Le formulaire que vous devez créer comporte :
Une adresse de livraison,
Des listes de choix pour sélectionner une entrée, un plat, un dessert (prévoir dans chaque
liste un item « aucun » car il n’est pas obligatoire de prendre une entrée, un plat et un
dessert).
Un champ pour donner le nombre de personnes pour chaque liste de choix (par exemple,
2 personnes peuvent prendre une entrée et un seul dessert)
Un champ désactivé pour afficher le tarif (i.e. l’utilisateur ne peut pas entrer de données
dedans, par contre votre script JavaScript pourra afficher les données dans le champ)
Un clic sur le bouton Commander provoquera l’appel de la fonction VerifierCommande( )
qui retournera true si l’adresse est valide et que le nombre de personnes est correct, false sinon.
Dans le cas d’un retour false le mail ne sera pas envoyé.
Etape 2 : gestion du nombre de personnes
Par défaut le nombre de personnes est à 0 lorsque l’item aucun est sélectionné dans la liste de
choix. S’il y a 0 et qu’un plat est sélectionné il passe à 1, sinon le nombre de personnes reste
inchangé.
Etape 3 : calcul du prix du repas
Calculez le prix du repas au fur et à mesure de la commande. Lorsqu’un plat ou une entrée ou
un dessert est sélectionné affichez le nouveau prix. Vous devez tester le nombre de personnes
pour calculer le prix afin d’éviter de faire des multiplications avec des données non valides.
Etape 4 : vérification des données
Nombre de personnes
Il doit être compris entre 0 et une borne supérieure que vous fixerez.
Adresse
3
EPI DIGITAL SCHOOL
Il faut vérifier si l’adresse est remplie et valide. Pour cela, créez une fonction
AdresseValide(chaine) qui teste si la chaine passée en paramètre est valide. La fonction teste :
Si le nombre de caractères de la chaine est non nul ;
Si la chaine contient un code postal suivi d’une ville
Cette fonction retourne false s’il y a un problème, true sinon. En cas de problème elle affiche
un message d’alerte.
Commande
Il est possible de ne pas prendre de dessert, mais on ne peut passer une commande si on ne
prend ni entrée, ni plat, ni dessert.
Etape 5 : envoyer le mail
Lorsque vous cliquez sur le bouton Commander la commande est envoyée au restaurant, à
condition que les champs soient remplis correctement.
