Scribd
Importer
13 vues3 pages

TP3 javascriptEST

Le document présente un TP en JavaScript avec des instructions sur la création d'un environnement de travail et des exercices à réaliser. Il couvre des concepts de base tels que les variables, les structures de contrôle, les fonctions et les manipulations DOM. Chaque exercice demande de coder des solutions spécifiques dans des fichiers JavaScript et HTML, avec des exemples pratiques.

Transféré par

Mehdi Boutmizgida
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
13 vues3 pages

TP3 javascriptEST

Le document présente un TP en JavaScript avec des instructions sur la création d'un environnement de travail et des exercices à réaliser. Il couvre des concepts de base tels que les variables, les structures de contrôle, les fonctions et les manipulations DOM. Chaque exercice demande de coder des solutions spécifiques dans des fichiers JavaScript et HTML, avec des exemples pratiques.

Transféré par

Mehdi Boutmizgida
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 3

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>

Vous aimerez peut-être aussi