1. Faycel CHAOUA Atelier Web 2
Manuel des TP
ATELIER WEB 2
LMD L1 (Tronc Commun)
Faycel CHAOUA (faycelchaoua@gmail.com)
ISET KELIBIA | ROUTE OUED ELKHATF, CAMPUS UNIVERSITAIRE DE KELIBIA
Ministère de l'Enseignement Supérieur et de la Recherche Scientifique
Direction Générale des Études Technologiques
ISET Kélibia
Département Technologies de l’Informatique
Janvier 2018
2. Faycel CHAOUA Atelier Web 2 i
Ce manuel des TP est mis à disposition selon les termes de la licence « Creative Commons
Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0
International ».
https://creativecommons.org/licenses/by-nc-sa/4.0/deed.fr
Vous êtes autorisé à :
» Partager copier, distribuer et communiquer le matériel par tous moyens et sous tous
formats.
» Adapter remixer, transformer et créer à partir du matériel
Selon les conditions suivantes :
» Attribution Vous devez créditer l'œuvre, intégrer un lien vers la licence et indiquer
si des modifications ont été effectuées à l'œuvre. Vous devez indiquer ces informations
par tous les moyens raisonnables, sans toutefois suggérer que l'offrant vous soutient ou
soutient la façon dont vous avez utilisé son œuvre.
» Pas d’utilisation commerciale Vous n'êtes pas autorisé à faire un usage commercial
de cette œuvre, tout ou partie du matériel la composant.
» Partage dans les mêmes conditions Dans le cas où vous effectuez un remix, que
vous transformez, ou créez à partir du matériel composant l'œuvre originale, vous devez
diffuser l'œuvre modifiée dans les même conditions, c'est à dire avec la même licence
avec laquelle l'œuvre originale a été diffusée.
3. Faycel CHAOUA Atelier Web 2 ii
Les objectifs généraux
A l’issue des travaux pratiques présentés dans ce manuel, l’apprenant sera capable de :
Gérer les événements JavaScript.
Manipuler des variables et des nombres.
Définir des fonctions.
Manipuler des chaînes de caractères.
Gérer des dates.
Contrôler la saisie d’un formulaire.
Écrire un document XML.
Appliquer un modèle de document DTD.
Plan des travaux pratiques
Ce manuel est constitué principalement des TP suivants :
TP 1 : Les événements.
TP 2 : Les variables.
TP 3 : Les fonctions.
TP 4 : Les chaînes de caractères.
TP 5 : Les dates.
TP 6 : Les formulaires.
TP 7 : XML.
TP 8 : DTD.
4. Faycel CHAOUA Atelier Web 2 iii
Tables des matières
TP (Travaux pratiques) ........................................................................................................................ 1
TP N°1 [JavaScript]............................................................................................................................. 2
TP N°2 [JavaScript]............................................................................................................................. 4
TP N°3 [JavaScript]............................................................................................................................. 7
TP N°4 [JavaScript]............................................................................................................................. 9
TP N°5 [JavaScript]........................................................................................................................... 12
TP N°6 [JavaScript]........................................................................................................................... 14
TP N°7 [XML] .................................................................................................................................. 16
TP N°8 [XML] .................................................................................................................................. 18
Correction des TP................................................................................................................................ 21
Correction du TP N°1........................................................................................................................ 22
Correction du TP N°2........................................................................................................................ 26
Correction du TP N°3........................................................................................................................ 33
Correction du TP N°4........................................................................................................................ 39
Correction du TP N°5........................................................................................................................ 48
Correction du TP N°6........................................................................................................................ 51
Correction du TP N°7........................................................................................................................ 55
Correction du TP N°8........................................................................................................................ 60
Références (Bibliographie / Webographie) ....................................................................................... 64
6. Faycel CHAOUA Atelier Web 2 TP1 2
Objectifs spécifiques
Gérer des événements JavaScript.
Utiliser les fenêtres modales.
Accéder à quelques propriétés du navigateur.
Exercice 1
Créer un script, compatible avec tous les navigateurs, qui permet de montrer comment changer
une image par une autre au passage de la souris sur celle-ci.
Mots clefs : Pseudo-url, onmouseover, onmouseout.
Exercice 2
Créer un script, compatible avec tous les navigateurs, qui permet de :
1. Détecter le mouvement de la souris (onmousemove) sur tout le document HTML.
Afficher un message avec l’instruction alert.
2. Détecter la clique sur la souris (onmousedown). Afficher un message avec l’instruction
alert.
3. Détecter la clique sur le clavier (onkeydown). Afficher un message avec l’instruction
alert.
Utiliser des fonctions pour chaque cas.
Mots clefs : function, onmousemove, onmousedown, onkeydown, alert.
Institut Supérieur des Études Technologiques de Kélibia
Département de Technologies de l'Informatique
Matière : Atelier Web 2 [JavaScript+XML]
Niveau : LMD ‒ L1
Enseignant : Faycel CHAOUA
Durée : 6 heures
TP N°1 [JavaScript]
7. Faycel CHAOUA Atelier Web 2 TP1 3
Exercice 3
Créer un script, compatible avec tous les navigateurs, qui permet d’afficher la position de la
souris instantanément dans le document HTML.
Mots clefs : function, var, pageX, pageY, clientX, clientY, getElementById,
onmousemove, innerHTML.
Exercice 4
Créer un script, compatible avec tous les navigateurs, qui permet d’afficher une boîte de
confirmation et détecter ce que l'utilisateur a cliqué (validation ou annulation).
Mots clefs : confirm, write.
Exercice 5
Créer un script, compatible avec tous les navigateurs, qui permet de demander à l’utilisateur de
saisir un message puis lui réafficher ce qu’il a écrit.
Mots clefs : var, prompt, alert.
Exercice 6
Créer un script, compatible avec tous les navigateurs, qui permet de montrer comment faire en
sorte qu'une image suive la souris.
Mots clefs : document, onmousemove, getElementById, navigator, appName, event,
scrollLeft, scrollTop, pageX, pageY, var.
8. Faycel CHAOUA Atelier Web 2 TP2 4
Objectifs spécifiques
Manipuler des variables.
Calculer des opérations arithmétiques.
Utiliser des fonctions mathématiques.
Exercice 1
Quelle est la valeur assignée à la variable x dans chacune de ces expressions ?
x = "2" + "3";
x = 2 <= 3;
x = 2 >= 3;
x = 2 == 3;
x = 2 + 3;
Exercice 2
Si au départ la variable nombre vaut 10, quelle sera sa valeur finale après l'exécution de ce petit
bloc d'instructions :
var nombre = 10;
nombre = nombre + 2;
nombre += 3;
nombre /= 5;
nombre = nombre * 4;
nombre /= 4;
nombre = nombre / 3;
Institut Supérieur des Études Technologiques de Kélibia
Département de Technologies de l'Informatique
Matière : Atelier Web 2 [JavaScript+XML]
Niveau : LMD ‒ L1
Enseignant : Faycel CHAOUA
Durée : 6 heures
TP N°2 [JavaScript]
9. Faycel CHAOUA Atelier Web 2 TP2 5
Exercice 3
Si au départ la variable nombre vaut 10, quelles seront les valeurs des variables resultat et
nombre après chaque instruction de ce petit bloc d'instructions :
resultat = nombre++;
resultat = ++nombre;
resultat = --nombre;
resultat = nombre--;
Exercice 4
Écrire un programme qui saisit une distance en kilomètres, qui convertit cette distance en milles
(1Km=0.6214Mile) et qui affiche le résultat dans la page web sous forme de phrase complète.
NB : parseFloat() permet de convertir la valeur saisie (une chaîne) en un nombre réel.
Exercice 5
Écrire un programme qui saisit 3 nombres réels, qui calcule la moyenne de ces trois nombres et
qui affiche dans la page web la moyenne sous forme de phrase complète. La moyenne ne doit
contenir que 2 décimales.
NB : toFixed(2) permet d'obtenir seulement 2 chiffres décimaux après le point. Par exemple,
si x vaut 3.453431, alert(x.toFixed(2)) affiche 3.45.
Exercice 6
Écrire un programme qui saisit le prénom d'une personne, et la couleur préférée de cette
personne. Après, le programme affiche sous forme de phrase complète les deux données saisies,
la couleur étant encadrée par une paire de guillemets.
Exemple d'affichage : La couleur préférée de Karine est "Rouge".
NB : " (backslash + guillemets) permet de définir un guillemet dans une chaine de texte sans
causer de conflit avec les guillemets qui délimitent la chaine elle-même.
10. Faycel CHAOUA Atelier Web 2 TP2 6
Exercice 7
Écrire un programme qui affiche un message au hasard parmi 4 messages au choix. Utiliser la
fonction JavaScript Math.random().
NB : Math.floor() permet de ne conserver que la partie entière d'un njombre (les décimales
sont tronquées). Par exemple : alert(Math.floor(3.87)) affiche 3.
Exercice 8
Écrire un programme JavaScript qui traduit un nombre entier de secondes en minutes et
secondes. Par exemple, si l'utilisateur entre le nombre 5722, alors le programme doit afficher à
l'écran la chaîne "95 minutes et 22 secondes".
NB : parseInt() permet de convertir une valeur (une chaîne) en un nombre entier.
Exercice 9
Écrire un programme qui saisit un nombre entier, génère un nombre entier entre 1 et le nombre
saisi inclusivement, et affiche sur la page le nombre obtenu sous forme de phrase complète.
11. Faycel CHAOUA Atelier Web 2 TP3 7
Objectifs spécifiques
Définir des fonctions.
Utiliser des fonctions prédéfinies.
Exercice 1
Développer la fonction commentée afficheProverbe() qui reçoit en paramètre le prénom d’une
personne et le proverbe préféré de cette personne. Après, la fonction affiche sous forme de
phrase complète les deux paramètres, le proverbe étant encadré par une paire de guillemets.
Écrire un programme principal simple qui demande à l’utilisateur les deux données et qui
appelle ensuite la fonction.
Exemple d’affichage : Le proverbe préféré de Safouen est "La patience est clé de tous les
soulagements."
Exercice 2
Développer la fonction commentée somme() qui calcule et affiche la somme de 3 nombres
entiers qui lui sont passés en paramètre.
Écrire un programme principal simple qui demande à l’utilisateur les trois données, et fait appel
à la fonction pour afficher le résultat dans la console du navigateur.
Institut Supérieur des Études Technologiques de Kélibia
Département de Technologies de l'Informatique
Matière : Atelier Web 2 [JavaScript+XML]
Niveau : LMD ‒ L1
Enseignant : Faycel CHAOUA
Durée : 6 heures
TP N°3 [JavaScript]
12. Faycel CHAOUA Atelier Web 2 TP3 8
Exercice 3
Développer la fonction commentée moyenne() qui calcule et affiche la moyenne de 3 nombres
entiers qui lui sont passés en paramètre.
Écrire un programme principal simple qui demande à l’utilisateur les trois données, et fait appel
à la fonction pour afficher le résultat dans la console du navigateur.
Exercice 4
Développer la fonction mois() qui reçoit en paramètre un nombre représentant un mois de
l'année (1=janvier, 2=février, etc.) et qui affiche le nom du mois correspondant à ce chiffre.
Écrire un programme principal simple qui demande à l’utilisateur un entier de 1 à 12, et fait
appel à la fonction pour afficher le résultat dans la console du navigateur.
Exercice 5
Développer la fonction commentée tirerMiniLoto() qui génère et affiche un numéro de loto
gagnant composé de 3 chiffres aléatoires compris entre 0 et 9 inclusivement.
Écrire un programme principal simple qui appelle la fonction tirerMiniLoto() pour afficher le
résultat dans la console du navigateur, selon l’exemple suivant : Le numéro gagnant de la mini-
loto aujourd’hui est le 094.
NB : la fonction toString() de JavaScript permet de convertir les entiers en chaînes de
caractères, ce qui permettra d'afficher des nombres pouvant débuter par des zéros.
Exercice 6
Développer la fonction commentée aireCercle() qui calcule et affiche l'aire d'un cercle, à partir
du rayon de ce cercle, fourni en paramètre.
Utiliser la formule suivante : aire = 3.14159 * rayon * rayon
Écrire un programme principal simple qui demande à l’utilisateur le rayon, appelle la fonction
et affiche le résultat dans une fenêtre d’alerte avec une phrase complète.
13. Faycel CHAOUA Atelier Web 2 TP4 9
Objectifs spécifiques
Manipuler des chaînes de caractères.
Appliquer les méthodes de l'objet String.
Exercice 1
Développer une fonction qui reçoit en paramètre une chaîne de caractères, met cette chaîne en
minuscules puis l'affiche dans une fenêtre d'alerte (sous forme d'un message de salutation) avec
seulement la première lettre en majuscule. Pour ce faire, on a besoin d'utiliser certaines
méthodes de la classe String.
Écrire ensuite un programme principal simple qui va saisir le prénom de l'usager et va appeler
la fonction (cette dernière va alors afficher le résultat sous forme de phrase complète).
Exemples :
Si l'usager entre "martin", la fonction affiche "Bonjour Martin!"
Si l'usager entre "YANICK", la fonction affiche "Bonjour Yanick!"
Si l'usager entre "pAuL", la fonction affiche "Bonjour Paul!"
Exercice 2
Développer une fonction qui reçoit en paramètre une chaîne de caractères. La fonction affiche
dans une fenêtre d'alerte le nombre de "e" que contient cette chaîne. Pour ce faire, on a besoin
d'utiliser une méthode de la classe String, dans une boucle qui parcourt chaque caractère de la
chaîne.
Institut Supérieur des Études Technologiques de Kélibia
Département de Technologies de l'Informatique
Matière : Atelier Web 2 [JavaScript+XML]
Niveau : LMD ‒ L1
Enseignant : Faycel CHAOUA
Durée : 6 heures
TP N°4 [JavaScript]
14. Faycel CHAOUA Atelier Web 2 TP4 10
Écrire ensuite un programme principal simple qui va saisir la chaîne en question et va appeler
la fonction (cette dernière va alors afficher le résultat sous forme de phrase complète).
Exemple d'affichage :
Il y a 3 "e" dans la chaîne "Vive le vent!"
Exercice 3
Développer une fonction qui reçoit en paramètre trois chaînes de caractères.
La fonction affiche ces trois chaînes dans la page web, selon les règles suivantes :
Séparées par des tirets et sur une même ligne, selon l'ordre d'entrée.
Chacune entre guillemets, toutes sur une même ligne, séparées par un espace et dans
l'ordre inverse de l'ordre d'entrée.
Une en dessous de l'autre, toutes en majuscules, et selon l'ordre d'entrée.
Écrire ensuite un programme principal simple qui saisit 3 chaînes quelconques et appelle
ensuite la fonction.
Exemple d'affichage :
Si l'usager saisit "Souris", "Clavier" et "Micro", La fonction affiche :
Souris-Clavier-Micro
"Micro" "Clavier" "Souris"
SOURIS
CLAVIER
MICRO
Exercice 4
Développer une fonction qui reçoit en paramètre une chaîne de caractères. La fonction
détermine si la chaîne reçue contient un nombre hexadécimal valide. La fonction doit retourner
true si le nombre hexadécimal est valide et false s'il ne l'est pas. Les chiffres hexadécimaux
15. Faycel CHAOUA Atelier Web 2 TP4 11
sont: 0123456789abcdef. Pour ce faire, on a besoin d'utiliser certaines méthodes de la classe
String.
Écrire ensuite un programme principal simple qui va saisir un nombre hexadécimal et va appeler
la fonction. Le programme utilise la valeur retournée par la fonction (true ou false) pour
afficher le résultat sous forme de phrase complète dans une fenêtre d'alerte. Le nombre
hexadécimal affiché doit être entièrement en majuscules.
Exercice 5
Développer une fonction qui reçoit en paramètre une chaîne et qui affiche cette chaîne inversée.
Par exemple, si on passe la chaîne "salut" en paramètre, la fonction doit produire la chaîne
"tulas".
Écrire ensuite un programme principal simple qui va saisir la chaîne en question et va appeler
la fonction (cette dernière va alors afficher le résultat sous forme de phrase complète).
Exercice 6
Développer une fonction qui reçoit en paramètre une phrase et un seul caractère et qui affiche
dans une fenêtre d'alerte la phrase reçue mais sans le caractère indiqué.
Exemple d'affichage :
supprimer("Le chien est beau","e") affiche : L chin st bau.
Écrire ensuite un programme principal simple qui saisit la phrase et le caractère en question et
appelle la fonction (cette dernière affiche alors le résultat).
Exercice 7
Développer une fonction qui reçoit en paramètre une chaîne et un nombre qui représente l'indice
d'une lettre contenue dans la chaîne. La fonction doit retourner la même chaîne mais sans la
lettre à la position indiquée (elle a "supprimé" cette lettre).
16. Faycel CHAOUA Atelier Web 2 TP5 12
Objectifs spécifiques
Manipuler des dates.
Utiliser les méthodes de l’objet Date.
Exercice 1
Développer une fonction commentée qui retourne le jour de la semaine correspondant à la date
reçue en paramètre. Pour ce faire, on doit utiliser certaine(s) méthode(s) de la classe Date.
Faire 3 saisies pour la date de l'utilisateur (jour, moi et année). Le résultat doit s'afficher dans
une phrase complète : "Le 2 avril 2008 était un mercredi".
Exercice 2
Développer une fonction commentée qui retourne un âge sous forme de nombre entier
correspondant à la date reçue en paramètre. Pour ce faire, on doit utiliser certaine(s) méthode(s)
de la classe Date.
Faire 3 saisies pour la date de naissance de l'utilisateur (jour, moi et année). Le résultat doit
s'afficher dans une phrase complète : "Vous avez 21 ans".
Exercice 3
Développer une fonction commentée qui retourne le nombre de vendredis 13 compris dans une
année reçue en paramètre. Pour ce faire, on doit créer 12 objets Date et utiliser certaine(s)
méthode(s) de la classe Date.
Le résultat doit s'afficher dans une phrase complète : "En 2009, il y aura 3 vendredis 13".
Institut Supérieur des Études Technologiques de Kélibia
Département de Technologies de l'Informatique
Matière : Atelier Web 2 [JavaScript+XML]
Niveau : LMD ‒ L1
Enseignant : Faycel CHAOUA
Durée : 3 heures
TP N°5 [JavaScript]
17. Faycel CHAOUA Atelier Web 2 TP5 13
Exercice 4
Développer une fonction commentée qui retourne true si une année reçue en paramètre est
bissextile et false si elle ne l'est pas. Pour ce faire, on doit créer 2 objets Date et utiliser
certaine(s) méthode(s) de la classe Date.
Le résultat doit s'afficher dans une phrase complète : "L'année 2008 est bissextile".
18. Faycel CHAOUA Atelier Web 2 TP6 14
Objectifs spécifiques
Inspecter un formulaire.
Vérifier si un formulaire est bien rempli.
Remplir une liste dynamiquement.
Exercice 1
Soit le formulaire suivant :
1. Écrire une fonction surligne(champ, erreur) permettant de modifier la couleur
d'arrière-plan des champs mal remplis.
2. Ajouter ensuite les quatre fonctions suivantes :
La fonction verifPseudo(champ) pour vérifier le pseudo (on vérifie la longueur :
entre 2 et 25 caractères). Il faut appeler cette fonction une fois que l'utilisateur a fini
de saisir son pseudo.
Institut Supérieur des Études Technologiques de Kélibia
Département de Technologies de l'Informatique
Matière : Atelier Web 2 [JavaScript+XML]
Niveau : LMD ‒ L1
Enseignant : Faycel CHAOUA
Durée : 3 heures
TP N°6 [JavaScript]
19. Faycel CHAOUA Atelier Web 2 TP6 15
La fonction verifMail(champ) pour vérifier l'adresse e-mail (en utilisant de
préférence une regex). Il faut appeler cette fonction une fois que l'utilisateur a fini
de saisir son adresse e-mail.
La fonction verifAge(champ) pour vérifier l'âge (il doit être compris entre 5 et 111
ans). Il faut appeler cette fonction une fois que l'utilisateur a fini de saisir son âge.
La fonction verifForm(f) (à partir des précédentes) qui vérifie tout.
3. Bloquer l’envoi du formulaire en cas d’erreur.
Exercice 2
Écrire un script qui permet de remplir dynamiquement une seconde liste selon le choix de
l'utilisateur dans la première liste.
La première liste contient un ensemble de pays (Tunisie, France, Canada, etc.)
La seconde liste contient un ensemble de villes qui sont chargées dynamiquement selon
le pays sélectionné dans la première liste.
Par exemple, si l’utilisateur sélectionne "Tunisie" dans la première liste, la seconde liste va
contenir les valeurs suivantes "Tunis", "Ben Arous", "Mannouba", "Ariana", etc.
20. Faycel CHAOUA Atelier Web 2 TP7 16
Objectifs spécifiques
Écrire un document XML bien formé.
Transformer un texte en document XML.
Exercice 1
Étudier les exemples d'adresse suivants et déduire les éléments élémentaires qui les constituent:
Exemple 1 : L'adresse d'un particulier (Johnny Begood 121 rue Plein-Ciel Nancy
54000).
Exemple 2 : Une adresse professionnelle (Lucid-it 14 boulevard du 21ème R.A. "Le
Carré Rive Gauche" Nancy 54000).
Écrire un document XML bien formé contenant les informations précédentes.
Exercice 2
Définir un élément TRUC avec les contraintes suivantes :
L'élément TRUC ne peut avoir que des sous-éléments A, B et C.
Ces sous-éléments doivent apparaître dans cet ordre.
L'élément TRUC doit avoir au moins un de ces sous-éléments.
L'élément TRUC ne peut pas avoir de double. Si il y a un sous-élément A, TRUC ne
peut avoir de second sous-élément A.
Institut Supérieur des Études Technologiques de Kélibia
Département de Technologies de l'Informatique
Matière : Atelier Web 2 [JavaScript+XML]
Niveau : LMD ‒ L1
Enseignant : Faycel CHAOUA
Durée : 4 heures 30 minutes
TP N°7 [XML]
21. Faycel CHAOUA Atelier Web 2 TP7 17
Exercice 3
Le paragraphe suivant contient de l'information "en vrac". Réorganiser-la de manière à mettre
en évidence sa structure logique, à travers une mise en forme XML.
Une bouteille d'eau Cristaline de 150 cl contient par litre 71 mg d'ions positifs calcium, et
5,5 mg d'ions positifs magnésium. On y trouve également des ions négatifs comme des
chlorures à 20 mg par litre et des nitrates avec 1 mg par litre. Elle est recueillie à St-Cyr-en-
Val-la-Source, dans le département du Loiret. Son code-barres est 3274080005003 et son pH
est de 7,45. Comme la bouteille est sale, quelques autres matériaux comme du fer s'y trouvent
en suspension.
Une seconde bouteille d'eau Cristaline a été recueillie à la source d'Aurèle dans les Alpes
Maritimes. La concentration en ions calcium est de 98 mg/l, et en ions magnésium de 4 mg/l.
Il y a 3,6 mg/l d'ions chlorure et 2 mg/l de nitrates, pour un pH de 7,4. Le code-barres de cette
bouteille de 50 cl est 3268840001008.
Une bouteille de même contenance est de marque Volvic, et a été puisée à Volvic dans le
département Puy-de-Dôme, bien connu pour ses sources donnant un pH neutre de 7. Elle
comprend 11,5 mg/l d'ions calcium, 8,0 mg/l d'ions magnésium, 13,5 mg/l d'ions chlorures et
6,3 mg/l d'ions nitrates. Elle contient également des particules de silice. Son code-barres est
3057640117008.
22. Faycel CHAOUA Atelier Web 2 TP8 18
Objectifs spécifiques
Concevoir une DTD.
Valider un document XML avec une DTD.
Exercice 1
Concevoir une DTD validant le fichier XML suivant.
Institut Supérieur des Études Technologiques de Kélibia
Département de Technologies de l'Informatique
Matière : Atelier Web 2 [JavaScript+XML]
Niveau : LMD ‒ L1
Enseignant : Faycel CHAOUA
Durée : 4 heures 30 minutes
TP N°8 [XML]
23. Faycel CHAOUA Atelier Web 2 TP8 19
Exercice 2
Soit le fichier XML suivant.
Concevoir une DTD validant ce fichier XML.
Il faut respecter les contraintes suivantes :
<TRUC></TRUC> : est non valide.
<TRUC><A/><B/><B/></TRUC> : est non valide.
<TRUC><B/><A/><C/></TRUC> : est non valide.
Exercice 3
Soit la DTD suivante qui permet d'écrire des documents répertoires d'adresses :
24. Faycel CHAOUA Atelier Web 2 TP8 20
Soit le document ci-dessous. Il présente des erreurs de syntaxe et des erreurs de validité.
Rechercher les erreurs. Pour chaque erreur indiquer la ligne où elle se trouve, sa nature (syntaxe
ou validité), la correction à apporter pour que le document soit bien formé et valide.
26. Faycel CHAOUA Atelier Web 2 Correction du TP1 22
Exercice 1
Créer un script, compatible avec tous les navigateurs, qui permet de montrer comment changer
une image par une autre au passage de la souris sur celle-ci.
Exercice 2
Créer un script, compatible avec tous les navigateurs, qui permet de :
1. Détecter le mouvement de la souris (onmousemove) sur tout le document HTML.
Afficher un message avec l’instruction alert.
2. Détecter la clique sur la souris (onmousedown). Afficher un message avec l’instruction
alert.
3. Détecter la clique sur le clavier (onkeydown). Afficher un message avec l’instruction
alert.
Utiliser des fonctions pour chaque cas.
Institut Supérieur des Études Technologiques de Kélibia
Département de Technologies de l'Informatique
Matière : Atelier Web 2
Niveau : LMD ‒ L1
Enseignant : Faycel CHAOUA
Durée : 6 heures
Correction du TP N°1
27. Faycel CHAOUA Atelier Web 2 Correction du TP1 23
Exercice 3
Créer un script, compatible avec tous les navigateurs, qui permet d’afficher la position de la
souris instantanément dans le document HTML.
28. Faycel CHAOUA Atelier Web 2 Correction du TP1 24
Exercice 4
Créer un script, compatible avec tous les navigateurs, qui permet d’afficher une boîte de
confirmation et détecter ce que l'utilisateur a cliqué (validation ou annulation).
29. Faycel CHAOUA Atelier Web 2 Correction du TP1 25
Exercice 5
Créer un script, compatible avec tous les navigateurs, qui permet de demander à l’utilisateur de
saisir un message puis lui réafficher ce qu’il a écrit.
Exercice 6
Créer un script, compatible avec tous les navigateurs, qui permet de montrer comment faire en
sorte qu'une image suive la souris.
30. Faycel CHAOUA Atelier Web 2 Correction du TP2 26
Exercice 1
Quelle est la valeur assignée à la variable x dans chacune de ces expressions ?
x = "2" + "3";
x = 2 <= 3;
x = 2 >= 3;
x = 2 == 3;
x = 2 + 3;
Institut Supérieur des Études Technologiques de Kélibia
Département de Technologies de l'Informatique
Matière : Atelier Web 2
Niveau : LMD ‒ L1
Enseignant : Faycel CHAOUA
Durée : 6 heures
Correction du TP N°2
31. Faycel CHAOUA Atelier Web 2 Correction du TP2 27
Exercice 2
Si au départ la variable nombre vaut 10, quelle sera sa valeur finale après l'exécution de ce petit
bloc d'instructions :
var nombre = 10;
nombre = nombre + 2;
nombre += 3;
nombre /= 5;
nombre = nombre * 4;
nombre /= 4;
nombre = nombre / 3;
Exercice 3
Si au départ la variable nombre vaut 10, quelles seront les valeurs des variables resultat et
nombre après chaque instruction de ce petit bloc d'instructions :
resultat = nombre++;
resultat = ++nombre;
resultat = --nombre;
resultat = nombre--;
32. Faycel CHAOUA Atelier Web 2 Correction du TP2 28
Exercice 4
Écrire un programme qui saisit une distance en kilomètres, qui convertit cette distance en milles
(1Km=0.6214Mile) et qui affiche le résultat dans la page web sous forme de phrase complète.
NB : parseFloat() permet de convertir la valeur saisie (une chaîne) en un nombre réel.
33. Faycel CHAOUA Atelier Web 2 Correction du TP2 29
Exercice 5
Écrire un programme qui saisit 3 nombres réels, qui calcule la moyenne de ces trois nombres et
qui affiche dans la page web la moyenne sous forme de phrase complète. La moyenne ne doit
contenir que 2 décimales.
NB : toFixed(2) permet d'obtenir seulement 2 chiffres décimaux après le point. Par exemple,
si x vaut 3.453431, alert(x.toFixed(2)) affiche 3.45.
34. Faycel CHAOUA Atelier Web 2 Correction du TP2 30
Exercice 6
Écrire un programme qui saisit le prénom d'une personne, et la couleur préférée de cette
personne. Après, le programme affiche sous forme de phrase complète les deux données saisies,
la couleur étant encadrée par une paire de guillemets.
Exemple d'affichage : La couleur préférée de Karine est "Rouge".
NB : " (backslash + guillemets) permet de définir un guillemet dans une chaine de texte sans
causer de conflit avec les guillemets qui délimitent la chaine elle-même.
Exercice 7
Écrire un programme qui affiche un message au hasard parmi 4 messages au choix. Utiliser la
fonction JavaScript Math.random().
NB : Math.floor() permet de ne conserver que la partie entière d'un nombre (les décimales
sont tronquées). Par exemple : alert(Math.floor(3.87)) affiche 3.
35. Faycel CHAOUA Atelier Web 2 Correction du TP2 31
Exercice 8
Écrire un programme JavaScript qui traduit un nombre entier de secondes en minutes et
secondes. Par exemple, si l'utilisateur entre le nombre 5722, alors le programme doit afficher à
l'écran la chaîne "95 minutes et 22 secondes".
NB : parseInt() permet de convertir une valeur (une chaîne) en un nombre entier.
36. Faycel CHAOUA Atelier Web 2 Correction du TP2 32
Exercice 9
Écrire un programme qui saisit un nombre entier, génère un nombre entier entre 1 et le nombre
saisi inclusivement, et affiche sur la page le nombre obtenu sous forme de phrase complète.
37. Faycel CHAOUA Atelier Web 2 Correction du TP3 33
Exercice 1
Développer la fonction commentée afficheProverbe() qui reçoit en paramètre le prénom d’une
personne et le proverbe préféré de cette personne. Après, la fonction affiche sous forme de
phrase complète les deux paramètres, le proverbe étant encadré par une paire de guillemets.
Écrire un programme principal simple qui demande à l’utilisateur les deux données et qui
appelle ensuite la fonction.
Exemple d’affichage : Le proverbe préféré de Safouen est "La patience est clé de tous les
soulagements."
Institut Supérieur des Études Technologiques de Kélibia
Département de Technologies de l'Informatique
Matière : Atelier Web 2
Niveau : LMD ‒ L1
Enseignant : Faycel CHAOUA
Durée : 6 heures
Correction du TP N°3
38. Faycel CHAOUA Atelier Web 2 Correction du TP3 34
Exercice 2
Développer la fonction commentée somme() qui calcule et affiche la somme de 3 nombres
entiers qui lui sont passés en paramètre.
Écrire un programme principal simple qui demande à l’utilisateur les trois données, et fait appel
à la fonction pour afficher le résultat dans la console du navigateur.
39. Faycel CHAOUA Atelier Web 2 Correction du TP3 35
Exercice 3
Développer la fonction commentée moyenne() qui calcule et affiche la moyenne de 3 nombres
entiers qui lui sont passés en paramètre.
Écrire un programme principal simple qui demande à l’utilisateur les trois données, et fait appel
à la fonction pour afficher le résultat dans la console du navigateur.
Exercice 4
Développer la fonction mois() qui reçoit en paramètre un nombre représentant un mois de
l'année (1=janvier, 2=février, etc.) et qui affiche le nom du mois correspondant à ce chiffre.
Écrire un programme principal simple qui demande à l’utilisateur un entier de 1 à 12, et fait
appel à la fonction pour afficher le résultat dans la console du navigateur.
41. Faycel CHAOUA Atelier Web 2 Correction du TP3 37
Exercice 5
Développer la fonction commentée tirerMiniLoto() qui génère et affiche un numéro de loto
gagnant composé de 3 chiffres aléatoires compris entre 0 et 9 inclusivement.
Écrire un programme principal simple qui appelle la fonction tirerMiniLoto() pour afficher le
résultat dans la console du navigateur, selon l’exemple suivant : Le numéro gagnant de la mini-
loto aujourd’hui est le 094.
NB : la fonction toString() de JavaScript permet de convertir les entiers en chaînes de
caractères, ce qui permettra d'afficher des nombres pouvant débuter par des zéros.
42. Faycel CHAOUA Atelier Web 2 Correction du TP3 38
Exercice 6
Développer la fonction commentée aireCercle() qui calcule et affiche l'aire d'un cercle, à partir
du rayon de ce cercle, fourni en paramètre.
Utiliser la formule suivante : aire = 3.14159 * rayon * rayon
Écrire un programme principal simple qui demande à l’utilisateur le rayon, appelle la fonction et affiche
le résultat dans une fenêtre d’alerte avec une phrase complète.
43. Faycel CHAOUA Atelier Web 2 Correction du TP4 39
Exercice 1
Développer une fonction qui reçoit en paramètre une chaîne de caractères, met cette chaîne en
minuscules puis l'affiche dans une fenêtre d'alerte (sous forme d'un message de salutation) avec
seulement la première lettre en majuscule. Pour ce faire, on a besoin d'utiliser certaines
méthodes de la classe String.
Écrire ensuite un programme principal simple qui va saisir le prénom de l'usager et va appeler
la fonction (cette dernière va alors afficher le résultat sous forme de phrase complète).
Exemples :
Si l'usager entre "martin", la fonction affiche "Bonjour Martin!"
Si l'usager entre "YANICK", la fonction affiche "Bonjour Yanick!"
Si l'usager entre "pAuL", la fonction affiche "Bonjour Paul!"
Institut Supérieur des Études Technologiques de Kélibia
Département de Technologies de l'Informatique
Matière : Atelier Web 2
Niveau : LMD ‒ L1
Enseignant : Faycel CHAOUA
Durée : 6 heures
Correction du TP N°4
44. Faycel CHAOUA Atelier Web 2 Correction du TP4 40
Exercice 2
Développer une fonction qui reçoit en paramètre une chaîne de caractères. La fonction affiche
dans une fenêtre d'alerte le nombre de "e" que contient cette chaîne. Pour ce faire, on a besoin
d'utiliser une méthode de la classe String, dans une boucle qui parcourt chaque caractère de la
chaîne.
Écrire ensuite un programme principal simple qui va saisir la chaîne en question et va appeler
la fonction (cette dernière va alors afficher le résultat sous forme de phrase complète).
Exemple d'affichage :
Il y a 3 "e" dans la chaîne "Vive le vent!"
45. Faycel CHAOUA Atelier Web 2 Correction du TP4 41
Exercice 3
Développer une fonction qui reçoit en paramètre trois chaînes de caractères.
La fonction affiche ces trois chaînes dans la page web, selon les règles suivantes :
Séparées par des tirets et sur une même ligne, selon l'ordre d'entrée.
Chacune entre guillemets, toutes sur une même ligne, séparées par un espace et dans
l'ordre inverse de l'ordre d'entrée.
Une en dessous de l'autre, toutes en majuscules, et selon l'ordre d'entrée.
Écrire ensuite un programme principal simple qui saisit 3 chaînes quelconques et appelle
ensuite la fonction.
Exemple d'affichage :
Si l'usager saisit "Souris", "Clavier" et "Micro", La fonction affiche :
46. Faycel CHAOUA Atelier Web 2 Correction du TP4 42
Souris-Clavier-Micro
"Micro" "Clavier" "Souris"
SOURIS
CLAVIER
MICRO
47. Faycel CHAOUA Atelier Web 2 Correction du TP4 43
Exercice 4
Développer une fonction qui reçoit en paramètre une chaîne de caractères. La fonction
détermine si la chaîne reçue contient un nombre hexadécimal valide. La fonction doit retourner
true si le nombre hexadécimal est valide et false s'il ne l'est pas. Les chiffres hexadécimaux
sont: 0123456789abcdef. Pour ce faire, on a besoin d'utiliser certaines méthodes de la classe
String.
Écrire ensuite un programme principal simple qui va saisir un nombre hexadécimal et va appeler
la fonction. Le programme utilise la valeur retournée par la fonction (true ou false) pour
afficher le résultat sous forme de phrase complète dans une fenêtre d'alerte. Le nombre
hexadécimal affiché doit être entièrement en majuscules.
48. Faycel CHAOUA Atelier Web 2 Correction du TP4 44
Exercice 5
Développer une fonction qui reçoit en paramètre une chaîne et qui affiche cette chaîne inversée.
Par exemple, si on passe la chaîne "salut" en paramètre, la fonction doit produire la chaîne
"tulas".
Écrire ensuite un programme principal simple qui va saisir la chaîne en question et va appeler
la fonction (cette dernière va alors afficher le résultat sous forme de phrase complète).
49. Faycel CHAOUA Atelier Web 2 Correction du TP4 45
Exercice 6
Développer une fonction qui reçoit en paramètre une phrase et un seul caractère et qui affiche
dans une fenêtre d'alerte la phrase reçue mais sans le caractère indiqué.
Exemple d'affichage :
supprimer("Le chien est beau","e") affiche : L chin st bau.
Écrire ensuite un programme principal simple qui saisit la phrase et le caractère en question et
appelle la fonction (cette dernière affiche alors le résultat).
50. Faycel CHAOUA Atelier Web 2 Correction du TP4 46
Exercice 7
Développer une fonction qui reçoit en paramètre une chaîne et un nombre qui représente l'indice
d'une lettre contenue dans la chaîne. La fonction doit retourner la même chaîne mais sans la
lettre à la position indiquée (elle a "supprimé" cette lettre).
Exemple d'affichage :
supprimer("bonjour",3) va retourner la chaîne "bonour"
Écrire ensuite un programme principal simple qui saisit la chaîne et le nombre, appelle la
fonction et affiche le résultat dans une fenêtre d'alerte.
52. Faycel CHAOUA Atelier Web 2 Correction du TP5 48
Exercice 1
Développer une fonction commentée qui retourne le jour de la semaine correspondant à la date
reçue en paramètre. Pour ce faire, on doit utiliser certaine(s) méthode(s) de la classe Date.
Faire 3 saisies pour la date de l'utilisateur (jour, moi et année). Le résultat doit s'afficher dans
une phrase complète : "Le 2 avril 2008 était un mercredi".
Institut Supérieur des Études Technologiques de Kélibia
Département de Technologies de l'Informatique
Matière : Atelier Web 2
Niveau : LMD ‒ L1
Enseignant : Faycel CHAOUA
Durée : 3 heures
Correction du TP N°5
53. Faycel CHAOUA Atelier Web 2 Correction du TP5 49
Exercice 2
Développer une fonction commentée qui retourne un âge sous forme de nombre entier
correspondant à la date reçue en paramètre. Pour ce faire, on doit utiliser certaine(s) méthode(s)
de la classe Date.
Faire 3 saisies pour la date de naissance de l'utilisateur (jour, moi et année). Le résultat doit
s'afficher dans une phrase complète : "Vous avez 21 ans".
54. Faycel CHAOUA Atelier Web 2 Correction du TP5 50
Exercice 3
Développer une fonction commentée qui retourne le nombre de vendredis 13 compris dans une
année reçue en paramètre. Pour ce faire, on doit créer 12 objets Date et utiliser certaine(s)
méthode(s) de la classe Date.
Le résultat doit s'afficher dans une phrase complète : "En 2009, il y aura 3 vendredis 13".
Exercice 4
Développer une fonction commentée qui retourne true si une année reçue en paramètre est
bissextile et false si elle ne l'est pas. Pour ce faire, on doit créer 2 objets Date et utiliser
certaine(s) méthode(s) de la classe Date.
Le résultat doit s'afficher dans une phrase complète : "L'année 2008 est bissextile".
55. Faycel CHAOUA Atelier Web 2 Correction du TP6 51
Exercice 1
Soit le formulaire suivant :
1. Écrire une fonction surligne(champ, erreur) permettant de modifier la couleur
d'arrière-plan des champs mal remplis.
2. Ajouter ensuite les quatre fonctions suivantes :
La fonction verifPseudo(champ) pour vérifier le pseudo (on vérifie la longueur :
entre 2 et 25 caractères). Il faut appeler cette fonction une fois que l'utilisateur a fini
de saisir son pseudo.
La fonction verifMail(champ) pour vérifier l'adresse e-mail (en utilisant de
préférence une regex). Il faut appeler cette fonction une fois que l'utilisateur a fini
de saisir son adresse e-mail.
La fonction verifAge(champ) pour vérifier l'âge (il doit être compris entre 5 et 111
ans). Il faut appeler cette fonction une fois que l'utilisateur a fini de saisir son âge.
La fonction verifForm(f) (à partir des précédentes) qui vérifie tout.
Institut Supérieur des Études Technologiques de Kélibia
Département de Technologies de l'Informatique
Matière : Atelier Web 2
Niveau : LMD ‒ L1
Enseignant : Faycel CHAOUA
Durée : 3 heures
Correction du TP N°6
56. Faycel CHAOUA Atelier Web 2 Correction du TP6 52
3. Bloquer l’envoi du formulaire en cas d’erreur.
57. Faycel CHAOUA Atelier Web 2 Correction du TP6 53
Exercice 2
Écrire un script qui permet de remplir dynamiquement une seconde liste selon le choix de
l'utilisateur dans la première liste.
La première liste contient un ensemble de pays (Tunisie, France, Canada, etc.)
La seconde liste contient un ensemble de villes qui sont chargées dynamiquement selon
le pays sélectionné dans la première liste.
Par exemple, si l’utilisateur sélectionne "Tunisie" dans la première liste, la seconde liste va
contenir les valeurs suivantes "Tunis", "Ben Arous", "Mannouba", "Ariana", etc.
59. Faycel CHAOUA Atelier Web 2 Correction du TP7 55
Exercice 1
Étudier les exemples d'adresse suivants et déduire les éléments élémentaires qui les constituent:
Exemple 1 : L'adresse d'un particulier (Johnny Begood 121 rue Plein-Ciel Nancy
54000).
Exemple 2 : Une adresse professionnelle (Lucid-it 14 boulevard du 21ème R.A. "Le
Carré Rive Gauche" Nancy 54000).
Écrire un document XML bien formé contenant les informations précédentes.
Institut Supérieur des Études Technologiques de Kélibia
Département de Technologies de l'Informatique
Matière : Atelier Web 2
Niveau : LMD ‒ L1
Enseignant : Faycel CHAOUA
Durée : 4 heures 30 minutes
Correction du TP N°7
60. Faycel CHAOUA Atelier Web 2 Correction du TP7 56
Exercice 2
Définir un élément TRUC avec les contraintes suivantes :
L'élément TRUC ne peut avoir que des sous-éléments A, B et C.
Ces sous-éléments doivent apparaître dans cet ordre.
L'élément TRUC doit avoir au moins un de ces sous-éléments.
L'élément TRUC ne peut pas avoir de double. Si il y a un sous-élément A, TRUC ne
peut avoir de second sous-élément A.
Exercice 3
Le paragraphe suivant contient de l'information "en vrac". Réorganiser-la de manière à mettre
en évidence sa structure logique, à travers une mise en forme XML.
Une bouteille d'eau Cristaline de 150 cl contient par litre 71 mg d'ions positifs calcium, et
5,5 mg d'ions positifs magnésium. On y trouve également des ions négatifs comme des
chlorures à 20 mg par litre et des nitrates avec 1 mg par litre. Elle est recueillie à St-Cyr-en-
61. Faycel CHAOUA Atelier Web 2 Correction du TP7 57
Val-la-Source, dans le département du Loiret. Son code-barres est 3274080005003 et son pH
est de 7,45. Comme la bouteille est sale, quelques autres matériaux comme du fer s'y trouvent
en suspension.
Une seconde bouteille d'eau Cristaline a été recueillie à la source d'Aurèle dans les Alpes
Maritimes. La concentration en ions calcium est de 98 mg/l, et en ions magnésium de 4 mg/l.
Il y a 3,6 mg/l d'ions chlorure et 2 mg/l de nitrates, pour un pH de 7,4. Le code-barres de cette
bouteille de 50 cl est 3268840001008.
Une bouteille de même contenance est de marque Volvic, et a été puisée à Volvic dans le
département Puy-de-Dôme, bien connu pour ses sources donnant un pH neutre de 7. Elle
comprend 11,5 mg/l d'ions calcium, 8,0 mg/l d'ions magnésium, 13,5 mg/l d'ions chlorures et
6,3 mg/l d'ions nitrates. Elle contient également des particules de silice. Son code-barres est
3057640117008.
64. Faycel CHAOUA Atelier Web 2 Correction du TP8 60
Exercice 1
Concevoir une DTD validant le fichier XML suivant.
Institut Supérieur des Études Technologiques de Kélibia
Département de Technologies de l'Informatique
Matière : Atelier Web 2
Niveau : LMD ‒ L1
Enseignant : Faycel CHAOUA
Durée : 4 heures 30 minutes
Correction du TP N°8
65. Faycel CHAOUA Atelier Web 2 Correction du TP8 61
Exercice 2
Soit le fichier XML suivant.
Concevoir une DTD validant ce fichier XML.
Il faut respecter les contraintes suivantes :
<TRUC></TRUC> : est non valide.
<TRUC><A/><B/><B/></TRUC> : est non valide.
<TRUC><B/><A/><C/></TRUC> : est non valide.
66. Faycel CHAOUA Atelier Web 2 Correction du TP8 62
Exercice 3
Soit la DTD suivante qui permet d'écrire des documents répertoires d'adresses :
Soit le document ci-dessous. Il présente des erreurs de syntaxe et des erreurs de validité.
67. Faycel CHAOUA Atelier Web 2 Correction du TP8 63
Rechercher les erreurs. Pour chaque erreur indiquer la ligne où elle se trouve, sa nature (syntaxe
ou validité), la correction à apporter pour que le document soit bien formé et valide.
68. Faycel CHAOUA Atelier Web 2 Références (Bibliographie / Webographie) 64
Références (Bibliographie / Webographie)
[1] C. Wenz, JavaScript : L’essentiel du code et des commandes, 2e
éd. Pearson. 2007.
[2] D. Charnay et P. Chaléat, HTML et Javascript. Eyrolles, 1998.
[3] « Javascript - Scripts et Tutoriels », Support du Web, 2009. [En ligne]. Disponible sur:
http://www.supportduweb.com/scripts_tutoriaux-4-javascript.html. [Consulté le: 31-déc-
2017].
[4] B. Pesquet, « Créez des pages web interactives avec JavaScript », OpenClassrooms. [En
ligne]. Disponible sur: https://openclassrooms.com/courses/creez-des-pages-web-interactives-
avec-javascript. [Consulté le: 31-déc-2017].
[5] O. Carton, « L’essentiel de XML : Cours XML ». 18-déc-2014.
[6] J.-L. Massat, « Présentation des DTD (“Document Type Definition”) ». [En ligne].
Disponible sur: http://jean-luc.massat.perso.luminy.univ-amu.fr/ens/xml/03-dtd.html.
[Consulté le: 31-déc-2017].
[7] « Ingénierie XML : concepts de base », MIAGE de Nantes, 2009-2008. [En ligne].
Disponible sur: http://miage.univ-nantes.fr/miage/D2X1/chapitre_presentation/chapitre.htm.
[Consulté le: 31-déc-2017].