Scribd
Importer
17 vues4 pages

Exercices_JavaScript_Fonctions_et_Onclick

Le document présente cinq exercices JavaScript axés sur l'utilisation de fonctions et d'événements onclick. Chaque exercice implique la création d'une fonction pour afficher un message, changer le contenu d'un élément, modifier la couleur de fond, afficher une valeur saisie, et gérer un compteur de clics. Des exemples de code HTML et JavaScript sont fournis pour chaque exercice.

Transféré par

moiselove237
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 DOCX, PDF, TXT ou lisez en ligne sur Scribd
17 vues4 pages

Exercices_JavaScript_Fonctions_et_Onclick

Le document présente cinq exercices JavaScript axés sur l'utilisation de fonctions et d'événements onclick. Chaque exercice implique la création d'une fonction pour afficher un message, changer le contenu d'un élément, modifier la couleur de fond, afficher une valeur saisie, et gérer un compteur de clics. Des exemples de code HTML et JavaScript sont fournis pour chaque exercice.

Transféré par

moiselove237
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 DOCX, PDF, TXT ou lisez en ligne sur Scribd
Vous êtes sur la page 1/ 4

Exercices JavaScript : Fonctions et événement onclick

Exercice 1 : Afficher un message


1. Créez une fonction JavaScript nommée `afficherMessage` qui affiche une alerte avec le
message : "Bonjour, bienvenue !".
2. Ajoutez un bouton dans votre fichier HTML. Lorsque l'utilisateur clique sur ce bouton, la
fonction `afficherMessage` doit être appelée.

Code attendu :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercice 1</title>
<script>
function afficherMessage() {
alert("Bonjour, bienvenue !");
}
</script>
</head>
<body>
<button onclick="afficherMessage()">Cliquez ici</button>
</body>
</html>

Exercice 2 : Changer le contenu d'un élément


1. Créez une fonction nommée `changerTexte` qui modifie le texte d'un paragraphe ayant
l'id `monParagraphe`.
2. Ajoutez un bouton. Lorsque l'utilisateur clique dessus, le texte du paragraphe doit devenir
: "Texte modifié avec JavaScript !".

Code attendu :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercice 2</title>
<script>
function changerTexte() {
document.getElementById("monParagraphe").innerText = "Texte modifié avec
JavaScript !";
}
</script>
</head>
<body>
<p id="monParagraphe">Ceci est un paragraphe.</p>
<button onclick="changerTexte()">Modifier le texte</button>
</body>
</html>

Exercice 3 : Changer la couleur de fond


1. Créez une fonction nommée `changerCouleur` qui change la couleur de fond d'une
division ayant l'id `maDiv` en bleu.
2. Ajoutez un bouton. Lorsque l'utilisateur clique dessus, la couleur de fond doit changer.

Code attendu :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercice 3</title>
<style>
#maDiv {
width: 200px;
height: 100px;
background-color: lightgray;
}
</style>
<script>
function changerCouleur() {
document.getElementById("maDiv").style.backgroundColor = "blue";
}
</script>
</head>
<body>
<div id="maDiv"></div>
<button onclick="changerCouleur()">Changer la couleur</button>
</body>
</html>

Exercice 4 : Afficher une valeur saisie


1. Créez une fonction nommée `afficherValeur` qui récupère la valeur d'un champ de saisie
(input) et l'affiche dans une alerte.
2. Ajoutez un champ de saisie et un bouton. Lorsque l'utilisateur clique sur le bouton, la
valeur saisie doit s'afficher.

Code attendu :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercice 4</title>
<script>
function afficherValeur() {
const valeur = document.getElementById("monInput").value;
alert("Vous avez saisi : " + valeur);
}
</script>
</head>
<body>
<input type="text" id="monInput" placeholder="Entrez quelque chose">
<button onclick="afficherValeur()">Afficher la valeur</button>
</body>
</html>

Exercice 5 : Compteur de clics


1. Créez une fonction nommée `incrementerCompteur` qui incrémente un compteur à
chaque clic sur un bouton.
2. Affichez la valeur actuelle du compteur dans un paragraphe.

Code attendu :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercice 5</title>
<script>
let compteur = 0;
function incrementerCompteur() {
compteur++;
document.getElementById("compteur").innerText = compteur;
}
</script>
</head>
<body>
<p>Compteur : <span id="compteur">0</span></p>
<button onclick="incrementerCompteur()">Cliquer ici</button>
</body>
</html>

Vous aimerez peut-être aussi