TP1 : JavaScript
Différence entre var, let et const en JavaScript :
1) var :
• Ancienne manière de déclarer une variable
• Portée globale ou fonction (ne respecte pas les blocs {})
• Peut-être redéclarée sans erreur
Exemple :
var x = 10;
var x = 20; // autorisé
Peut provoquer des erreurs logiques, donc déconseillée aujourd’hui.
2) let :
• Méthode moderne pour déclarer une variable
• Portée de bloc {}
• Ne peut pas être redéclarée dans le même bloc
Exemple :
let y = 5;
y = 8; // autorisé
let y = 10; // erreur
Recommandée pour les variables dont la valeur peut changer.
3) const :
• Sert à déclarer une constante
• Portée de bloc {}
• La valeur ne peut pas être modifiée
Exemple :
const PI = 3.14;
PI = 3.1416; // erreur
PI = PI+1 ; // erreur
Doit être initialisée lors de la déclaration.
Exercice N°1 :
Écrire un script JavaScript qui permet de :
1. Demander à l’utilisateur son prénom à l’aide de la fonction prompt().
2. Afficher un message de bienvenue sous la forme suivante à l’aide de alert() : Bonjour prénom
Remarque : La valeur retournée par prompt() est de type chaîne de caractères (string).
<script>
……………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………
</script>
Exercice N°2 :
Écrire un script JavaScript qui :
1) Génère un nombre aléatoire entre 1 et 100 et le stocke dans une variable nb1.
2) Demande à l’utilisateur de saisir un nombre via prompt() et stocke la valeur dans nb2.
Compare nb1 et nb2 :
• Si nb2 > nb1 → afficher : Félicitations ! Vous avez gagné.
• Sinon → afficher : Désolé, vous avez perdu. Le nombre était nb1.
1
Bonus : Nombres aléatoires en JavaScript
Pour obtenir un nombre entier entre min et max :
Nbalea = [Link]([Link]() * (max - min + 1)) + min;
<script>
// Générer un nombre aléatoire entre 1 et 100
……………………………………………………………………………………………………………………………………………
// Demander un nombre à l'utilisateur
……………………………………………………………………………………………………………………………………………
// Comparer et afficher le résultat
……………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………
</script>
Exercice N°3 : Boucles et calculs
Objectifs :
• Utiliser une boucle do..while pour valider la saisie de nombres positifs
• Calculer la factorielle d’un nombre avec une boucle for
• Calculer le PGCD (plus grand commun diviseur) de deux nombres avec une boucle while
Énoncé :
1. Demander à l’utilisateur de saisir deux nombres positifs (nombre1 et nombre2) avec
do..while.
o Tant que le nombre saisi est ≤ 0, demander de nouveau.
2. Pour chaque nombre, calculer et afficher sa factorielle avec une boucle for :
o Exemple : 5! = 5×4×3×2×1 = 120
3. Calculer le PGCD des deux nombres avec une boucle while et afficher le résultat.
4.
<script>
//Saisie de deux nombres positifs
do {
nb1 = ……………………………………………………………………………………………………………………………………
} while(…………………………………) ;
do {
nb2 = ……………………………………………………………………………………………………………………………………
} while(…………………………………) ;
// Factorielle avec boucle for
function factorielle(n) {
……………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………
}
2
alert("Factorielle de " + nb1 + " : " + factorielle(nb1));
alert("Factorielle de " + nb2 + " : " + factorielle(nb2));
// PGCD avec boucle while
function factorielle(a,b) {
……………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………
}
alert("Le PGCD de " + nb1 + " et " + nb2 + " est : " + (factorielle(nb1,nb2)));
</script>
Exercice 4 : Gestion des événements
Objectifs
• Utiliser l’événement onload pour initialiser la page
• Utiliser onfocus et onblur sur un input pour afficher/supprimer le placeholder
• Utiliser onclick sur un bouton pour afficher un message personnalisé
Énoncé
1. Créer un input texte avec un placeholder "Entrez votre nom".
o Quand l’utilisateur clique sur l’input (onfocus), le placeholder disparaît.
o Quand l’utilisateur quitte l’input (onblur), le placeholder réapparaît.
2. Créer un bouton "Valider" avec un événement onclick :
o Affiche un message dans un span : Bonjour nom saisi!
3. Utiliser onload pour afficher un message de bienvenue automatique dans un titre h1:
o Exemple : "Bienvenue sur la page !".
<body ……………………………………… = "aff_titre ()">
<h1 id="t1"> </h1>
<form>
<input type="text" id="nom" placeholder="Entrez votre nom"
………………………………………….. ="dis_place()" ………………………………………………. ="reap_place()">
<input type="button" value="Valider" …………………………………... = "aff_nom()">
<span id="msg"></span>
</form>
<script>
// onload : afficher un message de bienvenue au chargement
function aff_titre() {
……………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………
}
// onfocus : effacer le placeholder quand l'utilisateur clique
function dis_place() {
……………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………
}
3
// onblur : restaurer le placeholder quand l'utilisateur quitte l'input
function reap_place() {
……………………………………………………………………………………………………………………………………………
}
// onclick : afficher le nom saisi dans le span
function aff_nom() {
……………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………
……………………………………………………………………………………………………………………………………………
}
</script></body>
Exercice 5 : Jeu du mot aléatoire
Énoncé :
1. Créer un input readonly contenant un mot aléatoire de 5 lettres majuscules généré
automatiquement par le script JavaScript.
2. Créer un second input pour permettre à l’utilisateur de saisir le mot affiché.
3. Ajouter un bouton "Vérifier" qui compare le mot saisi avec le mot aléatoire :
• Si le mot saisi est correct → afficher "Bravo ! Vous avez trouvé le mot." dans un span en vert.
• Si le mot saisi est incorrect → afficher "Désolé ! Essayez encore." dans le span en rouge.
4. La comparaison doit être insensible à la casse (majuscule/minuscule).
5. Utiliser innerHTML pour afficher le message et [Link] pour changer la couleur.
<body ……………………………………… = "mot_alea()">
<h2>Jeu du mot aléatoire</h2>
<form>
<!-- Input readonly avec mot aléatoire -->
……………………………………………………………………………………………………………………………………………
<!-- Input pour utilisateur -->
<input type="text" id="rep" placeholder="Entrez le mot ici">
<!-- Bouton Vérifier -->
<input type="button" value="Vérifier" …………………………………... = "verif()">
<span id="msg"></span>
</form>
<script>
// fonction qui retourne un nombre entier compris entre a et b
function nb_alea(a,b) {
return ………………………………………………………………………………………………………………………… ;
}
//fonction qui affecte le mot aléatoire à l’input du mot aléatoire.
function mot_alea() {
//Déclarer une chaîne contenant les lettres majuscules de A à Z.
lettres ="……………………………………………………………………………………………………………………………" ;
//Déclarer une chaine vide.
mot="" ;
4
//Définir une boucle qui s’exécute 5 fois.
for(………………… ; ………………… ; ………………… ){
//Définir un nombre aléatoire sous forme d’indice dans la chaîne de lettres.
Indice = ………………………………………………………………………………………………………………………………… ;
//Ajouter la lettre aléatoire à la chaîne mot.
mot = ………………………………………………………………………………………………………………………………… ;
}
//affecter le mot aléatoire à l’input du mot aléatoire.
…………………………………………………………………………………………………………………………………………………. ;
}
//fonction qui vérifie que le mot saisi par l’utilisateur correspond au mot aléatoire.
function verif() {
//Récupérer les deux mots.
…………………………………………………………………………………………………………………………………………………. ;
…………………………………………………………………………………………………………………………………………………. ;
//Convertir le mot saisi par l’utilisateur en majuscules.
…………………………………………………………………………………………………………………………………………………. ;
//Comparer les deux mots et afficher un message selon le résultat.
If(……………………………………………………………………………………………………………………) {
//Affiche le texte de succès dans l'élément span
…………………………………………………………………………………………………………………………………………………. ;
//Change la couleur du texte du span en vert pour indiquer que c'est correct
…………………………………………………………………………………………………………………………………………………. ;
}else{
// Affiche le texte d'erreur dans l'élément span
…………………………………………………………………………………………………………………………………………………. ;
// Change la couleur du texte du span en rouge pour indiquer que c'est incorrect
…………………………………………………………………………………………………………………………………………………. ;
}}</script></body>
Exercice N°6 :
✓ Afficher le message entrer votre mot de passe (placeholder) quand on met le curseur dans la
zone de texte (onfocus)
✓ Quand on écrit le mot la première lettre devient en majuscule même si on ne l’écrit pas en
majuscule. (oninput)
✓ Quand on clique sur le Bouton "Affiche" il affiche le cryptage de mot qui est composé par la
Première lettre de mot, sa longueur et ses 2 derniers caractères. (onclick)
5
Exercice N°7 :
Lorsque l'on change la valeur du bouton radio de l'opération (oninput), le texte du bouton doit
changer comme suit : + : Additionner- : Soustraire*: Multiplier/ : Diviser
Une fois l'opération choisie, lorsque l'on clique sur le bouton (onclick), le résultat de l’opération Doit
s'afficher dans le dernier champ.
Exercice N°8 :
Avant d’afficher le résultat de chaque fonction il faut vérifier les champs : A, B : non vide, de type
numérique.
Exercice N°9 :
Afficher un résultat de type booléen :
Exercice N°10 :
Utilisez (prompt) pour saisir un email puis affichez-le dans ce formulaire :
Exercice N°11 :
Ajouter le code JavaScript permettant de déterminer la bonne réponse.
6
Exercice N°12 :
Lorsque l'utilisateur change (oninput) de produit votre script doit afficher le prix unitaire de l'article.
Les articles disponibles sont :
Pantalon : 100 dinars
Veste : 150 dinars
Cravate : 45 dinars
Chemise : 80dinars
Lorsque l'utilisateur clique sur le champ [quantité] (onfocus) cette mention doit disparaître Pour
permettre à l'utilisateur de taper la quantité achetée.
L'appui sur le bouton (onclick) Calculer permet de calculer le Montant Total de la commande.
Exercice N°13 :
Soit la page formulaire "[Link]" suivante :
1) Le clic sur le bouton "Inscription" fait appel à une fonction "verif( )" écrite en javascript et qui
permet de vérifier le remplissage du formulaire d'inscription en respectant les conditions
suivantes :
- Le champ (Nom et prénom) doit être non vide et le premier caractère en Majuscule,
- Le champ (CIN) doit comporter 8 chiffres.
- Une des situations Sociales doit être sélectionné.
- L'internaute doit choisir une fonction.
- L'adresse (E-mail) doit obligatoirement comporter les caractères ("@ " et ".")
2) Si les conditions citées sont satisfaites, un message affiche "formulaire envoyé".
Exercice N°14 :
1. Créer un input de type range pour sélectionner un âge compris
entre 10 et 50 ans.
2. Afficher l’âge sélectionné en temps réel dans un span à côté du
slider.
3. Utiliser l’événement oninput pour que la valeur du slider soit immédiatement affichée dans
le span.
4. La valeur affichée doit se mettre à jour à chaque mouvement du curseur.