TP3 JavaScript
Environnement de travail
Télécharger le dossier tp3.zip et décompresser le vers tp3
Structure de Dossiers Et après création des trois fichiers :
tp3/ tp3/
├── node-v22.14.0-win-x86/ ├── node-v22.14.0-win-x86/
│ └── node.exe │ └── node.exe
├── my_js_code/ ├── my_js_code/
│ ├── script.js │ ├── script.js
└── run.bat │ └── exercice1.js
│ └── exercice2.js
│ └── exercice3.js
└── run.bat
Ouvrir l’invite de commande cmd et tapper les deux commandes suivantes:
cd …chemin ver Tp3\my_js_code
run.bat script.js
Sortie :
Lancement de Node.js v22.14.0…
Bonjour! Vous pouvez commencer le TP
Tous les scripts doivent être enregistrées dans le dossier tp3
Bases syntaxiques (Variables, opérations, console.log)
1. Question : Comment déclarer une variable age contenant le nombre 20 et l'afficher
dans la console ? Ecrire le code dans le fichier exercice1.js
2. Question : Quelle est la différence entre let, const et var ?
1. Dans un fichier exercice2.js déclarer les 3 variables variableModifiable,
constante, et ancienneVariable en les associant à leurs modificateurs.
2. Essayez d’affecter une nouvelle valeur à constante.
3. Question (exercice3.js) : Concaténez deux chaînes nom = "votre nom" et prenom =
"votre prenom" pour afficher "Bonjour votrenom votreprenom !". en utilisant
l’opérateur de concaténation « + ». Produire le même résultat avec des littéraux de
gabarit
4. Question (exercice4.js) : Calculez le résultat de (3 + 5) * 2 et affichez-le.
5. Question (exercice5.js) : Que fait l'opérateur % ? Donnez un exemple.
Structures de contrôle (Conditions, boucles)
6. Question (exercice6.js): Écrivez une condition pour vérifier si temperature est
supérieure à 30 et affichez "Chaud" ou "Froid".
7. Question (exercice7.js) : Utilisez une boucle for pour afficher les nombres pairs
entre 0 et 10.
8. Question (exercice8.js) : Comment fonctionne un switch ? Donnez un exemple
avec jour = "Lundi". Lundi : "Début de semaine !" ; Samedi : "fin de semaine !" ;
9. Question (exercice9.js) : Utilisez une boucle while pour compter à rebours de 5 à 1.
10. Question (exercice10.js) : Que fait l'opérateur ternaire ? Donnez un exemple avec age >=
18.
Fonctions et structures de données (Array, Objets)
11. Question (exercice11.js) : Créez une fonction carre(n) qui retourne le carré d’un
nombre.
12. Question (exercice12.js) : Parcourez le tableau nombres = [10, 20, 30] avec une
boucle for et affichez chaque élément.
13. Question (exercice13.js): Accédez à la propriété taille de l'objet etudiant = { nom: "Ali",
annee_naissance : 2006, taille: 170 }. Ajoutez une méthode getAge() à l'objet etudiant qui
affiche l’age de l’etudiant.
14. Question (exercice14.js) : Utilisez map() pour doubler chaque valeur du tableau [1, 2, 3].
Comment copier un tableau sans modifier l'original ?
Exercice 2: Affichage basique
Objectif: Créer une page HTML avec un bouton (<button id="monBouton">Cliquez-moi</button>)
et un paragraphe <p id="message"></p>. Le clic sur le bouton modifie le paragraphe en utilisant le
script :
<script>
// Votre code JavaScript ici
document.getElementById('monBouton').addEventListener('click', function() {
document.getElementById('message').textContent = 'Bienvenu au monde du développement web !';
} );
</script>
Exercice 3: Calcul simple
Objectif: Compléter le code du calculateur suivant qui additionne deux nombres.
<!DOCTYPE html>
<html>
<head>
<title>Exercice 2</title>
</head>
<body>
<input type="number" id="nombre1" placeholder="Premier nombre">
<input type="number" id="nombre2" placeholder="Deuxième nombre">
<button id="calculer">Calculer</button>
<p>Résultat: <span id="resultat"></span></p>
<script>
// Votre code JavaScript ici
</script>
</body>
</html>
Exercice 3: expliquez le code suivant
<!DOCTYPE html>
<html>
<head>
<title>Exercice 3</title>
<style>
.rouge {
color: red;
}
.bleu {
color: blue;
}
</style>
</head>
<body>
<p id="texte">Ce texte changera de couleur</p>
<button id="changerCouleur">Changer couleur</button>
<script>
// Votre code JavaScript ici
const texte = document.getElementById('texte');
document.getElementById('changerCouleur').addEventListener('click', function() {
if (texte.classList.contains('rouge')) {
texte.classList.remove('rouge');
texte.classList.add('bleu');
} else {
texte.classList.remove('bleu');
texte.classList.add('rouge');
}
});
</script>
</body>
</html>
