Université Ibn Tofail Année Universitaire 2023/2024

Faculté des sciences de Kenitra LUS

Département d’Informatique

Langage JavaScript
Exercice 1

Créer un document HTML qui permet d'entrer un prix hors taxe dans une zone de texte puis calcule et
affiche le prix TTC dans une autre zone de texte par appui sur un bouton d’intitulé « Calculer » pour
un taux de TVA de 10% si le prix hors taxe est inférieur à 200DH et 20% sinon, (appeler la fonction
eval(…) de l’objet Math permettant d’évaluer une chaine en une valeur numérique)

Exercice 2
Créer un document HTML qui permet d'entrer 3 notes de DS et qui calcule et affiche la moyenne,
afficher dans une boite alert() « Validé » si la moyenne est supérieure ou égal à 10 et « Non Validé »
sinon.

1/7
Exercice 3

Refaire l’exercice2 en ajoutant maintenant une mention pour l’étudiant selon la formule suivante
(utiliser l’instruction switch) :

Si (moyenne < 10) alors mention = Ajournée.

Si (10<=moyenne < 12) alors mention = Passable.
Si (12<=moyenne < 14) alors mention = Assez Bien.
Si (14<=moyenne < 16) alors mention = Bien.
Si (16<=moyenne < 18) alors mention = Très Bien.
Si (18<=moyenne < 20) alors mention = Excellent.
Si (moyenne < 0 ou moyenne >20) alors mention = Moyenne non valide.

Afficher dans une boite alert() la plus grande note de DS obtenue.

On vous propose la forme suivante du document HTML résultat :

Exercice 4

1. Créer un document HTML qui permet d'entrer un mot et de le mettre en minuscule par appui
sur un bouton. On utilisera la fonction toLowerCase() de l'objet String (toLowerCase()
appliquée à une chaîne de caractères permet de mettre tous les caractères de cette chaîne en
minuscule).

2/7
 2. Créer maintenant une fonction du nom espace(), permettant d’insérer un espace entre chaque 2
caractères du mot, et l’appeler lors du clic sur le bouton précédent.

Exercice 5

1. En utilisant les fonctions de l’objet Date, créer un document HTML permettant d’afficher la
date et l’heure courante de l’ouverture de ce document sous la forme :

Rappel :

 var maintenant = new Date() ; permet de créer la variable maintenant contenant la

date et l’heure de l’ouverture du document HTML courant sous une forme non lisible.
 Quelques méthodes de l’objet Date :
o Méthode getDate() : elle renvoie le numéro du jour dans le mois, donc un
nombre entier entre 1 et 31.
o Méthode getMonth() : elle renvoie le numéro du mois dans l'année, mais
attention ce numéro est un entier entre 0 (pour janvier) et 11 (pour décembre);
il faudra donc ajouter 1 pour obtenir le numéro usuel.
o Méthode getFullYear() : elle renvoie le numéro de l'année en 4 chiffres.
o Méthode getHours() : elle renvoie le numéro de l'heure.
o Méthode getMinutes() : elle renvoie le numéro des minutes.
o Méthode getSeconds() : elle renvoie le numéro des secondes.

2. Créer une fonction du nom dateFr() permettant de retourner dans une boîte de dialogue la date
d’aujourd’hui en utilisant le nom du jour et du mois exemple : Mardi 20 Octobre 2020.

Exercice 6

Créer un document HTML qui demande un nombre puis affiche les diviseurs de ce nombre dans un
ordre décroissant. La saisie du nombre est faite dans une boîte de dialogue créé par la méthode
prompt de l’objet Window.

Exemple : facteur=prompt("Entrer un nombre entier.","");

3/7
Exercice 7

Construire la table de Pythagore en imbriquant deux boucles for. (chaque case contient le produit de
son numéro de ligne par son numéro de colonne).
On vous propose la forme suivante du document HTML résultat :

Exercice 8 :

1. Donner le code HTML permettant de créer le formulaire au-dessus. Utiliser la structure

tableau pour aligner les champs de ce formulaire.

Le contenu des listes est :

Ville de départ et ville d’arrivée : {Fés, Rabat, Casablanca}.
Jour : {Lundi, Mercredi, Samedi}.

4/7
 Le bouton scripté Réserver permet d’appeler une fonction JavaScript Réserver() avec le clic.

2. donner le contenu de la fonction Javascript Réserver() permettant d’afficher le contenu d’une

réservation dans une boite de dialogue Alert(), sous la forme suivante :

Exercice 9 :

 Partie I :

Donner le code HTML permettant de créer la page WEB au-dessus en respectant les choix suivants :
1. Le tableau a une bordure de taille 2 et une largeur de 40% par rapport à la largeur de
l’écran.
2. Le tableau est composé de 2 lignes et 2 colonnes, la 2ème ligne contient une cellule
fusionnée.
3. La 2ème cellule de la 1ère ligne contient une liste déroulante composée des entiers de 1 à 10.
4. La cellule fusionnée de la 2ème ligne contient une zone de texte de 15 lignes et 50 colonnes.
5. La zone de texte lance une fonction JavaScript du nom calculer() une fois elle a le focus.
6. La fonction calculer() se trouve dans un fichier du nom « [Link] » dans le même dossier.

 Partie II :

On désire formater le tableau de la figure au-dessus sous la syntaxe du langage CSS, pour cela :

1. Créer une classe CSS du nom formEnt permettant de définir le style suivant :
 La couleur d’arrière-plan de la 1ère ligne du tableau est en Bleu.
 La couleur du texte de la 1ère ligne du tableau est en jaune.
2. Créer une classe CSS du nom formTable permettant de définir le style suivant :
 La police du texte du tableau est Times.
 L’épaisseur de la bordure du tableau est de 10px.

 Partie III :
Donner le code de la fonction JavaScript calculer(), permettant d’afficher la table de multiplication
du nombre lu de la liste déroulante dans la zone du texte comme indiqué dans la figure au-dessous.

5/7
Exercice 10 :

Partie I :

Donner le code HTML permettant de créer la page WEB au-dessus en respectant les choix suivants :
1. Le texte Inscription est un titre H1 centré,
2. Le tableau est composé de 5 lignes et 2 colonnes, la dernière ligne contient une cellule
fusionnée.
3. Les champs Nom_Prénom et E-Mail sont de type zone de texte de taille 30 caractères,
4. Le champ Niveau est composé de trois radio avec comme choix par défaut Secondaire,
5. Le champ Module de formation est composé de quatre cases à cocher,
6. La dernière ligne contient un bouton scripté Valider,
7. Le bouton Valider lance une fonction JavaScript du nom Verif() lors du clic.
8. La fonction Verif() se trouve dans un fichier du nom « [Link] » dans le même dossier.

 Partie II :

On désire formater le titre H1 et le tableau de la page de la partie I sous la syntaxe du langage CSS,
pour cela :

1. Créer une classe CSS du nom formH1 permettant de définir le style suivant pour le titre
H1 :
 La couleur d’arrière-plan est en Bleu,
 la couleur du texte est en Jaune.
 La largeur du titre est 50%.

6/7
 2. Créer une classe CSS du nom formTable permettant de définir le style suivant pour le
tableau :
 La taille de la police est 14pt,
 L’épaisseur de la bordure est 10pt.

 Partie III :
Donner le code de la fonction JavaScript Verif() de la partie I, permettant de vérifier les conditions
suivantes :
 Le champ Nom et Prénom doit être non nul,
 Le champ E-Mail doit comporter le caractère @,
 Le client doit choisir au moins un Module de formation.

La fonction doit afficher en sortie dans une boîte alerte le message « Inscription correcte ! » si toutes
les conditions sont vérifiées ou un message d’erreur dans les autres cas.

7/7