TP 1 Javascript : Les objets et les fonctions predéfinis
Exercice 1:
1- Dessiner la page HTML.
2- Ecrire le code javascript qui permet d'inverser la chaine.
Exercice 2:
La direction d'un supermarché a décidé d'accorder des réductions à ses clients selon le montant
d'achat
La réduction est calculée selon les règles suivantes:
- 20 % pour un montant d'achat de plus de 5000 dhs.
- 15% pour un montant d'achat entre 3000 dhs et 4999 dhs.
- 10% pour un montant d'achat entre 1000 dhs et 2999 dhs.
- Aucune réduction pour les montants inférieurs à 1000 dhs.
Ecrire la fonction JavaScript qui prend en paramètre le montant et retourne la réduction.
Exercice 3:
Coder en HTML la page ci-dessous
La direction d'une entreprise désire automatiser le calcul de l'indemnité à verser aux cadres en
cas de licenciement.
Après un an d'ancienneté dans l'entreprise, il sera alloué aux cadres licenciés une indemnité
tenant compte de leur ancienneté et s'établissant comme suit:
- La moitié du salaire d'un mois par année d'ancienneté: pour la tranche d'ancienneté entre
1 et 10 ans.
- Au-delà de 10 ans un mois de salaire par année d'ancienneté.
1
- Une indemnité supplémentaire serait allouée aux cadres âgés de plus de 45 ans de:
2 mois si le cadre est âgé de 46 ans à 49 ans.
5 mois si le cadre est âgé de plus de 50 ans.
Ecrire la fonction Javascript qui calcule l'indemnité à partir de la date d'embauche, le dernier
salaire et l'âge.
Exercice 4:
Ecrire un script composé des fonctions suivante :
1. Une fonction qui remplit un tableau par des noms saisis par l'utilisateur via une boite de
dialogue , cette fonction sera appelée au clic sur un bouton nommé "Ajouter_nom".
2. Une fonction qui renvoie au hasard le nom gagnant et qui sera lancée lorsque l'utilisateur
clique sur le bouton "tirage au sort" .
Indication :
Utiliser la fonction [Link]() qui fournit un nombre réel entre 0 et 0,999
et la fonction push() pour insérer un élément dans un tableau.
Exercice 5:
En se basant sur le code html suivant :
<!doctype html>
<html>
<head>
<title>Chronomètre</title>
<meta charset="utf-8">
<style type="text/css">
.chronometre{
margin: auto ;
width: 300px;
text-align: center;
}
.tim{
margin: auto;
width: 300px;
border: 1px solid rgba(0,0,0,0.5);
padding:5px 0;
text-align: center;
font-size: 1.5em;
font-family: digital;
margin-bottom: 10px;
button{
background: #3498db;
color: #fff;
width: 70px;
border-radius: 5px;
2
line-height: 1.5em;
border: none
}
</style>
</head>
<body>
<div class="chronometre">
<div class="tim">
<span >0 h</span> :
<span >0 min</span> :
<span >0 s</span> :
<span >0 ms</span>
</div>
<button id="start" onclick="start()">Start</button>
<button id="stop" onclick="stop()" >Stop</button>
<button id="reset" onclick="reset()" >Reset</button>
</div>
</body>
</html>
Créer un chronomètre composé d'un afficheur et 3 boutons : un bouton "start" pour lancer
le chronomètre , un bouton "stop" pour l’arrêter et un bouton "reset" pour le remettre à zéro.
Chronometre
Indications:
- Créer une fonction "start" qui appelle d'une manière répétitive la fonction
update_chrono via la fonction setInterval avec une cadence de 100 ms.
- Créer une fonction "update_chrono()" qui permet d’incrémenter le nombre de
millisecondes , secondes , minutes , et des heures.
- Créer une fonction "stop" qui arrête le traitement de setInterval.
- Créer une fonction "reset" qui remet les valeurs et l'affichage à 0 .