Etablissement : ISET Charguia Département : Technologies de l’Informatique

Matière : Atelier Dév Web et Multimédia 2 Classe : TI 107

Année Universitaire : 2019 - 2020

TP n° 4 : Les objets en Javascript

Objectifs du TP :
- Manipuler les objets du navigateur de javascript
- Manipuler les objets du noyau de javascript : Array, String, Math et Date

N.B : L’ensemble des exercices doivent être placés dans un répertoire nommé « TP4 » placé
sous un répertoire portant votre nom, prénom et classe.

Exercice 1 :

On souhaite écrire une page « EX1.html » qui permet de saisir l’URL, la hauteur, la largeur
d’une nouvelle fenêtre en précisant si elle est redimensionnable ou non. Le bouton « Ouvrir »
ouvre une nouvelle fenêtre lors de la soumission du formulaire avec les caractéristiques
introduites et le bouton « Fermer » ferme la page en cours.

Figure 1: Aperçu de l'interface de l'exercice 4

Figure 2: Nouvelle fenêtre

1. Ecrire un gestionnaire d’événement ouvrir qui ouvre une nouvelle fenêtre ayant les
caractéristiques introduites dans le formulaire
2. Ecrire la page « EX1.html » qui répond au fonctionnement demandé.

Exercice 2 :

On souhaite écrire une page html qui affiche 4 images et qui les modifie de façon circulaire à
chaque fois qu’un clic est opéré sur une des images comme le montre les figures 3 et 4.

Figure 3: Affichage initial des images

TP4 Développement Web et Multimédia 2 A.U 2019-2020 1

 Figure 4: Affichage des images après un clic sur une des images

1. Ecrire en javascript une fonction changer qui permet de modifier l’affichage

2. Ecrire une page html « EX2.html » qui répond on fonctionnement demandé
3. Modifier le code de la page pour que le changement se fasse de façon automatique toutes
les 1 secondes sans faire de clic sur une des images/
Indication : Utiliser la méthode setTimeout

Exercice 3 :

On souhaite écrire une page « EX3.html » qui offre des opérations sur 2 tableaux t1 et t2.

Figure 5: Aperçu de la page "EX4.hml"

Lors du chargement du formulaire, les 2 tableaux sont affichés dans 2 labels comme le montre
la figure 5. L’utilisateur choisit une des 5 opérations offertes et le résultat est affiché dans une
zone de texte en lecture seule.
1. Ecrire un gestionnaire d’événement associée à chaque bouton radio sachant que vous
devez utiliser exclusivement les méthodes prédéfinies de l’objet Array
2. Ecrire la page « EX3.html » qui répond au fonctionnement demandé.

Exercice 4 :

Ecrire le script permettant de saisir 10 entiers et de les ranger au fur et à mesure qu’ils sont
introduits de sorte que les nombres négatifs soient placés à gauche du tableau, les 0 au milieu
et à droite les nombres positifs.
Exemple : Si on saisit dans cet ordre les nombres 89, -2, 0, 15, 0, 23, -75, 5, -3, -25, le résultat
doit être : -25, -3, -75,-2, 0, 0, 89, 15, 23, 5

TP4 Développement Web et Multimédia 2 A.U 2019-2020 2

Exercice 5 :

On souhaite calculer et afficher les moyennes d’une liste de 5 étudiants

Figure 6: Affichage de la liste des étudiants avec leurs notes et moyennes

Les étudiants sont définis dans un tableau NomEleves dont les notes sont présentes dans un
tableau Notes définis comme suit :
NomEleves = new Array("Salma", "Sami", "Ahmed", "Maroua", "Houda");
Notes = new Array([10,12,18,5,9],[13,11,14,7,14]);// tableau à 2 dimensions regroupant les
notes des 5 élèves dans 2 matières.
1. Ecrire une fonction fusionnerTableaux (tabNom, tabNotes) qui renvoie un tableau de
4 colonnes : Nom, Note1, Note2 et Moyenne qui est calculée à partir des 2 notes
2. Ecrire une fonction afficherTableau (tabFinal) qui affiche le tableau de 4 colonnes
sous la forme d'un tableau.
3. Ecrire une fonction meilleurEtudiant (tabFinal) qui affiche le prénom et la moyenne
du meilleur étudiant.

Exercice 6 :

On souhaite développer une page EX6.html permettant de saisir une chaîne de caractères et un
nombre et d’afficher l’une des 2 opérations suivantes (voir figure 7) :
• Affichage du caractère à la position définie
• Affichage de la chaîne après lui avoir supprimé le caractère à la position introduite

Figure 7: Affichage de l'interface "EX9.html"

1. Ecrire une fonction javascript caracterePosition(ch, nb) qui prend une chaîne et un
nombre en paramètre et renvoie le caractère situé à la position nb de la chaîne
2. Ecrire une fonction javascript newChaine(ch, nb) qui prend une chaîne et un nombre et
renvoie la chaîne à laquelle le caractère placé à la position nb a été supprimé
3. Ecrire une fonction javascript afficher() qui est le gestionnaire d’événement associé à
la liste déroulante
4. Ecrire une page « EX6.html » qui répond au fonctionnement demandé

TP4 Développement Web et Multimédia 2 A.U 2019-2020 3

Exercice 7 :

On souhaite développer une application qui permet de saisir une chaîne et de déterminer s’il
s’agit d’un palindrome ou non

Figure 8: Affichage de l'interface à l'état initial Figure 9: Affichage de l'interface lors du test d'une chaîne

L’utilisateur introduit une chaîne dans la zone de texte et clique sur le bouton « Tester » : la
zone de texte devient en lecture seule et un des bouton radio est caché selon que la chaîne est
un palindrome ou non.
Le bouton « Effacer » permet de réinitialiser le formulaire et la zone de texte est à nouveau
accessible en écriture.
1. Ecrire une fonction javascript palindrome(chaine) que renvoie si une chaîne passée en
paramètre est un palindrome ou non : vous devez utiliser exclusivement les méthodes
prédéfinies de l’objet String
2. Ecrire une fonction test qui est le gestionnaire d’événement associé au bouton « Tester »
3. Ecrire une page « EX7.html » qui répond au fonctionnement demandé

Exercice 8 :

On souhaite deviner un nombre mystère généré aléatoirement compris entre 0 et 50 en moins

de 10 tentatives. A chaque tentative, un message s’affiche pour indiquer s’il faut chercher un
nombre plus grand ou plus petit. Si le nombre est trouvé en moins de 10 essais un message de
succès s’affiche autrement, le nombre mystère et le nombre de tentatives s’affichent.
A noter que l’introduction d’une valeur incorrecte (chaîne, espace,…) est comptabilisé dans les
tentatives.
1. Ecrire en javascript une fonction GenererNombre qui génère un nombre aléatoire entre
0 et 50
2. Ecrire une page html qui comprend les scripts nécessaires pour répondre au
fonctionnement demandé

Exercice 9 :
On souhaite écrire une page html permettant d’afficher, lors du chargement de la fenêtre, la
date du jour selon le format suivant :
Nous sommes le Mercredi 18 Mars 2020 8h15
1. Ecrire en javascript une fonction afficherDate qui affiche la date selon le format indiqué
2. Ecrire une page html « EX9.html » qui répond on fonctionnement demandé

Exercice 10 :
On souhaite écrire une page html permettant de saisir la date d’anniversaire et d’afficher dans
une autre zone de texte l’âge correspondant comme le montre la figure 10

TP4 Développement Web et Multimédia 2 A.U 2019-2020 4

 txtDate
txtAge
Figure 10: Affichage de l'âge

1. Ecrire en javascript une fonction calculerAge qui calcule l’âge et l’affiche dans txtAge
2. Ecrire une page html « EX10.html » qui répond on fonctionnement demandé sachant
que l’affichage est mis à jour lorsque txtDate est modifié

Exercice 11 :
On souhaite écrire une page html permettant de facturer un ensemble d’articles.

Figure 11: Page "Facturation.html"

L’utilisateur introduit la quantité et le prix unitaire de chaque article puis le nom, le numéro du
téléphone, l’adresse de livraison, choisit le moyen de payement (Chèque, Espèce, Virement)
ainsi que le moyen de livraison (Express ou non).
• Un clic sur le bouton intitulé « Soumettre la commande » permet de calculer et afficher
le prix de chaque article ainsi que le total.
• Un clic sur le bouton « Effacer » permet de réinitialiser le formulaire
• Un clic sur le bouton image « Facture » permet de :
✓ Afficher dans une boîte de dialogue les informations du client, le mode de payement
ainsi que le montant à payer qui est majoré de 20 dinars si le client opte pour une
livraison express.
✓ Remplacer l’image existante (Facture.jpg) par l’image Fini.jpg (on considère que les
2 images sont placées dans le même répertoire que la page html.
Il est à noter que lorsque le curseur est dans une zone du tableau associée à la quantité, cette
dernière doit changer de couleur (Aqua).
Pour cela :il faudra définir les fonctions javascript suivantes :
1. Définir les fonctions javascript suivantes :
- soumettre qui calcule et affiche le prix de chaque ligne ainsi que le total
- effacer qui réinitialise le formulaire
- facturer qui répond au fonctionnement du bouton image
- colorier qui permet de modifier la couleur de la zone associée à la quantité
2. Ecrire une page html « EX11.html » qui répond on fonctionnement demandé

TP4 Développement Web et Multimédia 2 A.U 2019-2020 5