Showing Page:
1/6
Exercice 1 :
A partir du document HTML exercice2Dom.html, écrire un script dans un fichier exo2.js qui
réalise les taches suivantes :
- Créer un nouvel élément de type paragraphe p
- Ajouter votre nouvel élément dans l’élément ayant pour id = « main »
- Ajouter ce contenu « mon <strong>grand</strong>contenu » à l’élément p que vous
venez de créer
- Ajouter la classe important à l’élément p
- Modifier le style de l’élément p en mettant le texte en vert.
- Mettre le texte contenu dans l’élément strong en italic (style font-style=italic)
Exercice 2 :
Le fichier exercice3.html a pour objectif d’afficher la liste des matières que l’utilisateur a
choisi durant ce trimestre. Il doit remplir cette liste en cliquant sur le bouton « Entrer une
matière ». Chaque fois, l’utilisateur clique sur le bouton, un prompt s’affiche pour que
l’utilisateur puisse saisir la matière. Ensuite le script insère la matière dans la liste. Chaque
matière doit avoir un identifiant. Mais avant de faire l’insertion, le script doit vérifier que la
matière ne contient pas des chiffres et la première lettre doit être en majuscule.
Ecrire une fonction entrerMatiere() dans laquelle la saisie, le test ainsi que l’insertion se
font.
Exercice 3
Ecrire un script qui réalise les taches suivantes :
- Il ajoute des nouveaux desserts dans la liste en cliquant sur le bouton « Ajouter un
dessert ».
- Choisir des desserts en cliquant sur un dessert de la liste. Pour faire
o Un prompt s’affiche pour donner le nombre de parts pour le dessert choisi.
o Puis on ajoute dans un nouvel élément p le nombre des parts avec le dessert
choisi. Par exemple, si l’utilisateur clique sur « tarte aux fraises », le prompt
s’affiche et l’utilisateur tape 2 alors le message « 2 part(s) de tarte aux
fraises » est ajouté dans un élément p qui est un sous élément de div.
o Et l’élément qu’on a cliqué de la liste devient rouge.
- Lorsque la souris passe au-dessus de l’image « tarte.jpg », elle sera remplacée par
l’image « eclair.jpg » et de même lorsque la souris passe au-dessus de l’image
« opera.jpg », elle sera remplacé par « tiramisu.jpg ». Pour ceci, on utilise
l’évènement « mouseover ».
- Lorsque la souris sort de l’image, l’image initiale s’affiche. Ici on utilise l’évènement
« mouseout ».
Showing Page:
2/6
-
Exercice 4
Ecrire un script javascript qui contrôle ce qui suit :
- Tous les champs sont obligatoires sauf le champs « cout total » qui sera calculé.
- Le numéro de colis doit commencer par 2 lettres suivies de 3 chiffres (exemple AB123)
- La distance et le poids sont numériques (uniquement des chiffres)
- Le cout total est calculé selon les formules suivantes :
Si le poids < 10 kg alors cout total = distance * 0.5 $
Si le poids > 10 kg alors cout total = distance * (poids / 10) * 0.3 $
- Pour le mode express, on ajoute un taux de 20% au cout total.
La vérification des champs est réalisée à la fin de chaque saisie (utilisation de l’évènement blur). Mais
le calcul du cout total est fait lors du clic sur le bouton du type submit.
Pour chaque erreur dans un champs de saisie, le background du champs sera en rouge et un message
est affiché sous forme d’une alerte.
Par exemple : si l’utilisateur saisit dans le champs distance une information non numérique, un
message « la distance doit être en numérique » est affiché.
Exercice 5
On reprend le même exercice 4 mais en changeant les énoncés comme suit :
1. Ecrire une fonction en javascript controler qui contrôle ce qui suit :
Tous les champs sont obligatoires sauf le champs "coût total" qui
sera calculé.
Showing Page:
3/6
Le N° de colis doit commencer par de 2 lettres suivies de 3 nombres (exemple
AB133)
La distance et le poids sont des champs numériques.
2. Ecrire la fonction calculer qui permet de calculer le prix total de transfert selon les
formules suivantes :
Si le poids < 10 kg Cout Total = Distance *0,5 $ .
Si le poids > 10 kg Cout Total = Distance *(poids/10)*0,3 $.
Pour le mode express on ajoute un taux de 20% du cout total.
Exercice 6
On considère le document html inscrire.html qui contient un formulaire. Il est
demandé d’ecrire le code JAVASCRIPT permettant de valider le formulaire après
avoir cliqué sur le bouton du type submit en respectant les conditions ci-dessous :
Sexe : Un sexe doit être sélectionné.
Nom : Contient au moins trois caractères non numériques.
Prénom : Contient au moins trois caractères non numériques.
Age : doit être un nombre compris entre 5 et 100
Pseudo : Contient au moins 4 caractères.
Mot de passe : Contient au moins six caractères comportant au moins un
chiffre.
Mot de passe (Confirmation) : doit être identique au premier mot de passe.
Pays : un pays doit être sélectionné.
M’inscrire : permet d’envoyer le formulaire ou bien afficher en rouge les
éléments anormalement remplis.
Réinitialiser le formulaire : permet de réinitialiser le formulaire.
Exercice 7
Le but de cet exercice est de créer un site Web pour l’adhésion à un club sportif « SportZen »
Le site web possède la page ClientSportif.html suivante:
Données du client sportif
Nom
Showing Page:
4/6
Prenom
Poids
Hauteur
Age
Submit
Textarea
Showing Page:
5/6
A1- Ecrire le code HTML de la page ClientSportif.html.
A2- Ecrire le fichier Javascript valider.js qui effectue les taches suivantes :
Attention: Dans tout cet exercice, vous êtes demandés de coder avec javascript. Le code jquery ne sera
pas noté.
Créer le tableau Aide contenant les chaines de caractères suivantes:
" Erreur: Le nom doit commencer par une majuscule et ne doit pas contenir des chiffres",
" Erreur: Le prenom doit commencer par une majuscule et ne doit pas contenir des chiffres",
"Erreur: Le poids doit contenir 3 digits et être plus grande ou égale à 30 et inférieure ou égale
à 150",
"Erreur: La hauteur doit contenir 3 digits et être plus grand ou égal à 60 et inférieur ou égale
à 250".
"Erreur: L’age doit contenir 2 digits et être plus grand ou égal à 5 et inférieur ou égale à 90".
Ecrire dans le fichier valider.js la fonction Verifier () suivante qui:
examine le nom et le prénom qui doivent commencer par une majuscule et ne devraient
pas contenir des chiffres.
examine le poids qui devrait contenir 3 digits et être plus grande ou égale à 30 et
inférieure ou égale à 150.
examine la hauteur qui doit contenir 3 digits et être plus grand ou égal à 60 et inférieur
ou égale à 250.
examine l’âge qui doit contenir 2 digits et être plus grand ou égal à 5 et inférieur ou égale
à 90.
retourne 0 s'il y a une erreur au niveau du nom, 1 s'il y a une erreur au niveau du prénom,
2 s'il y a une erreur au niveau du poids, 3 s'il y a une erreur au niveau de la hauteur, 4 s'il
y a une erreur au niveau de l’âge et 5 en cas de non erreur dans tous les champs saisis.
A3- Intégrer dans le fichier valider.js la fonction messages ().
Cette fonction appelle la fonction Verifier().
Elle affiche l'une des chaines de caractères du tableau Aide dans le textarea en fonction
de l'erreur détectée.
En cas de non erreur, elle affiche "Donnees du client sportif correctes" dans le textarea.
A4-Au clic du bouton Submit, la fonction messages () doit être appelée.
Faites le registration de l'évènement clic dans le fichier clientSportif.html.
Showing Page:
6/6

Unformatted Attachment Preview

Exercice 1 : A partir du document HTML exercice2Dom.html, écrire un script dans un fichier exo2.js qui réalise les taches suivantes : - Créer un nouvel élément de type paragraphe p Ajouter votre nouvel élément dans l’élément ayant pour id = « main » Ajouter ce contenu « mon grandcontenu » à l’élément p que vous venez de créer Ajouter la classe important à l’élément p Modifier le style de l’élément p en mettant le texte en vert. Mettre le texte contenu dans l’élément strong en italic (style font-style=italic) Exercice 2 : Le fichier exercice3.html a pour objectif d’afficher la liste des matières que l’utilisateur a choisi durant ce trimestre. Il doit remplir cette liste en cliquant sur le bouton « Entrer une matière ». Chaque fois, l’utilisateur clique sur le bouton, un prompt s’affiche pour que l’utilisateur puisse saisir la matière. Ensuite le script insère la matière dans la liste. Chaque matière doit avoir un identifiant. Mais avant de faire l’insertion, le script doit vérifier que la matière ne contient pas des chiffres et la première lettre doit être en majuscule. Ecrire une fonction entrerMatiere() dans laquelle la saisie, le test ainsi que l’insertion se font. Exercice 3 Ecrire un script qui réalise les taches suivantes : - Il ajoute des nouveaux desserts dans la liste en cliquant sur le bouton « Ajouter un dessert ». - Choisir des desserts en cliquant sur un dessert de la liste. Pour faire o Un prompt s’affiche pour donner le nombre de parts pour le dessert choisi. o Puis on ajoute dans un nouvel élément p le nombre des parts avec le dessert choisi. Par exemple, si l’utilisateur clique sur « tarte aux fraises », le prompt s’affiche et l’utilisateur tape 2 alors le message « 2 part(s) de tarte aux fraises » est ajouté dans un élément p qui est un sous élément de div. o Et l’élément qu’on a cliqué de la liste devient rouge. - Lorsque la souris passe au-dessus de l’image « tarte.jpg », elle sera remplacée par l’image « eclair.jpg » et de même lorsque la souris passe au-dessus de l’image « opera.jpg », elle sera remplacé par « tiramisu.jpg ». Pour ceci, on utilise l’évènement « mouseover ». - Lorsque la souris sort de l’image, l’image initiale s’affiche. Ici on utilise l’évènement « mouseout ». - Exercice 4 Ecrire un script javascript qui contrôle ce qui suit : - - Tous les champs sont obligatoires sauf le champs « cout total » qui sera calculé. Le numéro de colis doit commencer par 2 lettres suivies de 3 chiffres (exemple AB123) La distance et le poids sont numériques (uniquement des chiffres) Le cout total est calculé selon les formules suivantes : • Si le poids < 10 kg alors cout total = distance * 0.5 $ • Si le poids > 10 kg alors cout total = distance * (poids / 10) * 0.3 $ Pour le mode express, on ajoute un taux de 20% au cout total. La vérification des champs est réalisée à la fin de chaque saisie (utilisation de l’évènement blur). Mais le calcul du cout total est fait lors du clic sur le bouton du type submit. Pour chaque erreur dans un champs de saisie, le background du champs sera en rouge et un message est affiché sous forme d’une alerte. Par exemple : si l’utilisateur saisit dans le champs distance une information non numérique, un message « la distance doit être en numérique » est affiché. Exercice 5 On reprend le même exercice 4 mais en changeant les énoncés comme suit : 1. Ecrire une fonction en javascript controler qui contrôle ce qui suit : • Tous les champs sont obligatoires sauf le champs "coût total" qui sera calculé. • • Le N° de colis doit commencer par de 2 lettres suivies de 3 nombres (exemple AB133) La distance et le poids sont des champs numériques. 2. Ecrire la fonction calculer qui permet de calculer le prix total de transfert selon les formules suivantes : • • • Si le poids < 10 kg Cout Total = Distance *0,5 $ . Si le poids > 10 kg Cout Total = Distance *(poids/10)*0,3 $. Pour le mode express on ajoute un taux de 20% du cout total. Exercice 6 On considère le document html inscrire.html qui contient un formulaire. Il est demandé d’ecrire le code JAVASCRIPT permettant de valider le formulaire après avoir cliqué sur le bouton du type submit en respectant les conditions ci-dessous : • • • Sexe : Un sexe doit être sélectionné. Nom : Contient au moins trois caractères non numériques. Prénom : Contient au moins trois caractères non numériques. • • • Age : doit être un nombre compris entre 5 et 100 Pseudo : Contient au moins 4 caractères. Mot de passe : Contient au moins six caractères comportant au moins un chiffre. Mot de passe (Confirmation) : doit être identique au premier mot de passe. Pays : un pays doit être sélectionné. M’inscrire : permet d’envoyer le formulaire ou bien afficher en rouge les éléments anormalement remplis. Réinitialiser le formulaire : permet de réinitialiser le formulaire. • • • • Exercice 7 Le but de cet exercice est de créer un site Web pour l’adhésion à un club sportif « SportZen » Le site web possède la page ClientSportif.html suivante: Données du client sportif Nom Prenom Poids Hauteur Age Submit Textarea A1- Ecrire le code HTML de la page ClientSportif.html. A2- Ecrire le fichier Javascript valider.js qui effectue les taches suivantes : Attention: Dans tout cet exercice, vous êtes demandés de coder avec javascript. Le code jquery ne sera pas noté. ➢ Créer le tableau Aide contenant les chaines de caractères suivantes: " Erreur: Le nom doit commencer par une majuscule et ne doit pas contenir des chiffres", " Erreur: Le prenom doit commencer par une majuscule et ne doit pas contenir des chiffres", "Erreur: Le poids doit contenir 3 digits et être plus grande ou égale à 30 et inférieure ou égale à 150", "Erreur: La hauteur doit contenir 3 digits et être plus grand ou égal à 60 et inférieur ou égale à 250". "Erreur: L’age doit contenir 2 digits et être plus grand ou égal à 5 et inférieur ou égale à 90". ➢ Ecrire dans le fichier valider.js la fonction Verifier () suivante qui: • examine le nom et le prénom qui doivent commencer par une majuscule et ne devraient pas contenir des chiffres. • examine le poids qui devrait contenir 3 digits et être plus grande ou égale à 30 et inférieure ou égale à 150. • examine la hauteur qui doit contenir 3 digits et être plus grand ou égal à 60 et inférieur ou égale à 250. • examine l’âge qui doit contenir 2 digits et être plus grand ou égal à 5 et inférieur ou égale à 90. • retourne 0 s'il y a une erreur au niveau du nom, 1 s'il y a une erreur au niveau du prénom, 2 s'il y a une erreur au niveau du poids, 3 s'il y a une erreur au niveau de la hauteur, 4 s'il y a une erreur au niveau de l’âge et 5 en cas de non erreur dans tous les champs saisis. A3- Intégrer dans le fichier valider.js la fonction messages (). • • • Cette fonction appelle la fonction Verifier(). Elle affiche l'une des chaines de caractères du tableau Aide dans le textarea en fonction de l'erreur détectée. En cas de non erreur, elle affiche "Donnees du client sportif correctes" dans le textarea. A4-Au clic du bouton Submit, la fonction messages () doit être appelée. Faites le registration de l'évènement clic dans le fichier clientSportif.html. Name: Description: ...
User generated content is uploaded by users for the purposes of learning and should be used following Studypool's honor code & terms of service.
Studypool
4.7
Trustpilot
4.5
Sitejabber
4.4