Manuel des TP : Atelier Web 2

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

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.

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.

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
Références (Bibliographie / Webographie) ....................................................................................... 64

Faycel CHAOUA Atelier Web 2 1
TP
(Travaux
pratiques)

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]

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.

 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;
Niveau : LMD ‒ L1
Durée : 6 heures

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.

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.

 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.
Niveau : LMD ‒ L1
Durée : 6 heures

Exercice 3
Développer la fonction commentée moyenne() qui calcule et affiche la moyenne de 3 nombres
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.

 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.
Niveau : LMD ‒ L1
Durée : 6 heures

Écrire ensuite un programme principal simple qui va saisir la chaîne en question et va appeler
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.
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

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".
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é.
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).

 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".
Niveau : LMD ‒ L1
Durée : 3 heures

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".

 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.
Niveau : LMD ‒ L1
Durée : 3 heures

 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.

 É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.
Niveau : LMD ‒ L1
Durée : 4 heures 30 minutes
TP N°7 [XML]

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.

 Concevoir une DTD.
 Valider un document XML avec une DTD.
Exercice 1
Concevoir une DTD validant le fichier XML suivant.
Niveau : LMD ‒ L1
TP N°8 [XML]

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/></TRUC> : est non valide.
 <TRUC><A/><C/></TRUC> : est non valide.
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é.
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.

Faycel CHAOUA Atelier Web  Correction des TPs 21
Correction
des TP

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.
Matière : Atelier Web 2
Niveau : LMD ‒ L1
Durée : 6 heures
Correction du TP N°1

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.

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).

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.

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;
Niveau : LMD ‒ L1
Durée : 6 heures

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--;

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.
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.

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.

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."
Niveau : LMD ‒ L1
Durée : 6 heures

Exercice 2
Développer la fonction commentée somme() qui calcule et affiche la somme de 3 nombres

Exercice 3
Développer la fonction commentée moyenne() qui calcule et affiche la moyenne de 3 nombres
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.

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
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!"
Niveau : LMD ‒ L1
Durée : 6 heures

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.
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.
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
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".

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é.
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).
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.

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".
Niveau : LMD ‒ L1
Durée : 3 heures

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".
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".

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.
Niveau : LMD ‒ L1
Durée : 3 heures

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.

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.
Niveau : LMD ‒ L1

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-

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.

Exercice 1
Concevoir une DTD validant le fichier XML suivant.
Niveau : LMD ‒ L1

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/></TRUC> : est non valide.
 <TRUC><A/><C/></TRUC> : est non valide.

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é.

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.

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].

Manuel des TP : Atelier Web 2

Contenu connexe

Tendances

Similaire à Manuel des TP : Atelier Web 2

Dernier

Manuel des TP : Atelier Web 2