Ecole des Hautes Etudes d’Ingénierie 

:
TP : Javascript
Module : Téchnologies WEB
Formateur : MANI Mohammed Adil

Exercice 1
Réalisez une interface qui contient une liste des produits, un champ texte pour la
quantité et autre pour le prix unitaire, puis ajouter un bouton qui affiche au clique le prix HT, la
TVA et le prix TTC.

A savoir que : Pour récupérer la valeur sélectionnée dans la liste déroulante :

var elem = document.getElementById(‘liste’).options[document.getElementById(‘liste’).selectedIndex].value;

A savoir que:
HT = PU * QTE
TVA = HT * 0,2
TTC = HT + TVA

Exercice 2 :
- Réalisez un convertisseur de devis, de DH vers $ et l’inverse.
- Votre code doit être composé de deux zones de texte, une pour la somme en Dirhams et
autre pour la somme en Dollars un bouton pour la conversion, puis un radio faisant le
choix entre
o DH -> Dollars
o Dollars -> DH
- A savoir que : Pour tester si un radio est coché ou non :
if ( document.getElementById(‘id’).checked == true )
{
// Code Javascript
}

Exercice 3 :
- Définir en JavaScript un tableau contenant des notes d'étudiants comprises entre 0 et
20. 
- Implémenter en JavaScript les fonctions qui permettent d'afficher un tel tableau, de
savoir combien d'étudiants ont eu 10 plus, de calculer la moyenne des notes et de
connaître la note maximale de classe.

Exercice 4 :
Ecrire une page HTML affichant :
 Une zone de texte de type number.
 Un bouton Ajouter
 Un bouton Afficher
 Un bouton Somme
 Un bouton Moyenne

Page 1 sur 3
 Ecole des Hautes Etudes d’Ingénierie :
TP : Javascript
Module : Téchnologies WEB
Formateur : MANI Mohammed Adil

 Un bouton Max
 Un bouton Min.
 Un paragraphe pour l’affichage.

o Au clique sur Ajouter : Récupérer le numéro écrit et enregistrer le dans le tableau grâ ce à la
fonction push().
o Au clique sur Afficher : Les éléments doivent être affichés dans le paragraphe d’affichage en
utilisant une liste <ul></ul>.
o Au clique sur somme : Afficher la somme du tableau dans le paragraphe d’affichage.
o Au clique sur Moyenne : Afficher la moyenne du tableau dans le paragraphe d’affichage.
o Au clique sur Max : Afficher la valeur maximale dans le tableau.
o Au clique sur Min : Afficher la valeur minimale dans le tableau.

A savoir que : Pour récupérer la taille du tableau afin de l’utiliser dans vos boucles de parcours,
utilisez :
var taille = tab.length ;
for ( i = 0 ; i < taille ; i++)
{
// Code Javascript
}

Exercice 5 : Maitrisez les chaines de caractères ;

Réaliser un conjugueur automatique qui contient :
 Zone de texte pour saisir le verbe (nous allons nous concentrer sur les verbes du
1er groupe)
 Bouton Conjuguer
 Un paragraphe pour l’affichage.

o Au clique sur Conjuguer: Récupérer le verbe saisie et afficher sa conjugaison au présent.

A savoir que : Pour traiter les chaines de caractères :

- Trouver une chaîne dans une chaîne : var pos = str.indexOf("locate");
- Extraire une partie d'une chaîne et renvoie la partie extraite  :
var res = str.slice(7, 13);
o 7 : Position de départ
o 13 : Position de fin 
- Extraire une partie d'une chaîne et renvoie la partie extraite :
var res = str.substr(7, 6);
o 7 : Position de départ
o 6 : Nombre de caractères. 

Exercice 6 : Exercice facultatif mais sa réalisation est un bonus bien sur 
Page 2 sur 3
Ecole des Hautes Etudes d’Ingénierie :
TP : Javascript
Module : Téchnologies WEB
Formateur : MANI Mohammed Adil

Créer une application web pour la mise à jour (CRUD) d’une liste de produits, un produit est
composé par un libelle et un prix unitaire.
- Créer le formulaire adéquat.
- Créer 1 bouton pour ajouter.
- Afficher les éléments de tableau sous balise <table>
- Ajouter 2 boutons pour la modification et la suppression.

Page 3 sur 3