TP3 JavaScript
Environnement de travail
Télécharger le dossier [Link] 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/
│ └── [Link] │ └── [Link]
├── my_js_code/ ├── my_js_code/
│ ├── [Link] │ ├── [Link]
└── [Link] │ └── [Link]
│ └── [Link]
│ └── [Link]
└── [Link]
Ouvrir l’invite de commande cmd et tapper les deux commandes suivantes:
cd …chemin ver Tp3\my_js_code
[Link] [Link]
Sortie :
Lancement de [Link] 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, [Link])
1. Question : Comment déclarer une variable age contenant le nombre 20 et l'afficher
dans la console ? Ecrire le code dans le fichier [Link]
2. Question : Quelle est la différence entre let, const et var ?
1. Dans un fichier [Link] déclarer les 3 variables variableModifiable,
constante, et ancienneVariable en les associant à leurs modificateurs.
2. Essayez d’affecter une nouvelle valeur à constante.
3. Question ([Link]) : 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 ([Link]) : Calculez le résultat de (3 + 5) * 2 et affichez-le.
5. Question ([Link]) : Que fait l'opérateur % ? Donnez un exemple.
Structures de contrôle (Conditions, boucles)
6. Question ([Link]): Écrivez une condition pour vérifier si temperature est
supérieure à 30 et affichez "Chaud" ou "Froid".
7. Question ([Link]) : Utilisez une boucle for pour afficher les nombres pairs
entre 0 et 10.
8. Question ([Link]) : Comment fonctionne un switch ? Donnez un exemple
avec jour = "Lundi". Lundi : "Début de semaine !" ; Samedi : "fin de semaine !" ;
9. Question ([Link]) : Utilisez une boucle while pour compter à rebours de 5 à 1.
10. Question ([Link]) : Que fait l'opérateur ternaire ? Donnez un exemple avec age >=
18.
Fonctions et structures de données (Array, Objets)
11. Question ([Link]) : Créez une fonction carre(n) qui retourne le carré d’un
nombre.
12. Question ([Link]) : Parcourez le tableau nombres = [10, 20, 30] avec une
boucle for et affichez chaque élément.
13. Question ([Link]): 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 ([Link]) : 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
[Link]('monBouton').addEventListener('click', function() {
[Link]('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 = [Link]('texte');
[Link]('changerCouleur').addEventListener('click', function() {
if ([Link]('rouge')) {
[Link]('rouge');
[Link]('bleu');
} else {
[Link]('bleu');
[Link]('rouge');
}
});
</script>
</body>
</html>