Close
Objectif : Apprendre à utiliser console.log pour afficher des messages dans la console du navigateur.
Consigne : Écrivez un script qui affiche le message « Bonjour, monde ! » dans la console du navigateur.
// Affiche un message dans la console
console.log("Bonjour, monde !");
console.log est une méthode utilisée pour afficher des messages dans la console du navigateur. C’est très utile pour déboguer le code, car cela permet de suivre ce qui se passe pendant l’exécution du script. Ici, le message « Bonjour, monde ! » sera affiché dans la console. Objectif : Apprendre à utiliser prompt pour interagir avec l’utilisateur.
Consigne : Demandez à l’utilisateur son nom avec prompt et affichez « Bonjour, [nom] ! » dans la console.
// Demande le nom de l'utilisateur
let nom = prompt("Quel est votre nom ?");
// Affiche un message personnalisé
console.log("Bonjour, " + nom + " !");prompt ouvre une boîte de dialogue pour recueillir des informations auprès de l’utilisateur. Le résultat est stocké dans une variable nom, qui est ensuite utilisé pour personnaliser le message affiché. Objectif : Apprendre à utiliser des conditions avec if et else.
Consigne : Demandez à l’utilisateur son âge. S’il a 18 ans ou plus, affichez « Vous êtes majeur ». Sinon, affichez « Vous êtes mineur ».
// Demande l'âge de l'utilisateur
let age = prompt("Quel âge avez-vous ?");
// Vérifie si l'utilisateur est majeur
if (age >= 18) {
console.log("Vous êtes majeur.");
} else {
console.log("Vous êtes mineur.");
}prompt et stocké dans la variable age.if vérifie si l’âge est supérieur ou égal à 18.age >= 18), un message indiquant que l’utilisateur est majeur est affiché. Objectif : Apprendre à utiliser les boucles for pour répéter des actions.
Consigne : Créez une boucle qui affiche les nombres de 1 à 10 dans la console.
// Boucle de 1 à 10
for (let i = 1; i <= 10; i++) {
console.log(i);
}for répète une action (ici, afficher un nombre) tant que la condition (i <= 10) est vraie.i est incrémentée à chaque itération. Objectif : Apprendre à définir et appeler des fonctions.
Consigne : Créez une fonction nommée saluer qui prend un paramètre nom et affiche « Bonjour, [nom] ! » dans la console. Appelez cette fonction avec votre propre nom.
// Définition de la fonction
function saluer(nom) {
console.log("Bonjour, " + nom + " !");
}
// Appel de la fonction
saluer("Jean");saluer prend un argument nom et l’utilise pour afficher un message personnalisé. Objectif : Apprendre à manipuler le DOM pour modifier le contenu HTML.
Consigne : Créez un bouton qui, lorsqu’il est cliqué, modifie le texte d’un paragraphe avec l’ID « texte » en « Le texte a été modifié ! ».
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exercice 6</title>
</head>
<body>
<h1>Manipuler le DOM</h1>
<p id="texte">Ceci est un paragraphe.</p>
<button onclick="modifierTexte()">Modifier le texte</button>
</body>
</html>
// Fonction pour modifier le texte
function modifierTexte() {
document.getElementById("texte").innerHTML = "Le texte a été modifié !";
}getElementById sélectionne un élément par son ID. innerHTML modifie son contenu. Objectif : Apprendre à créer et manipuler des tableaux.
Consigne : Créez un tableau contenant trois noms. Affichez chaque nom dans la console à l’aide d’une boucle.
// Définition du tableau
let noms = ["Alice", "Bob", "Charlie"];
// Boucle à travers le tableau
for (let i = 0; i < noms.length; i++) {
console.log(noms[i]);
}noms contenant trois chaînes de caractères est défini.for parcourt chaque élément du tableau en utilisant i comme index.noms.length donne la taille du tableau, et noms[i] accède à chaque élément. Objectif : Apprendre à créer et utiliser des objets.
Consigne : Créez un objet représentant une personne avec les propriétés nom, âge, et ville. Affichez chaque propriété dans la console.
// Définition de l'objet
let personne = {
nom: "Marie",
age: 30,
ville: "Paris"
};
// Affichage des propriétés
console.log("Nom : " + personne.nom);
console.log("Âge : " + personne.age);
console.log("Ville : " + personne.ville);personne est défini avec des propriétés nom, age, et ville.personne.nom). Objectif : Apprendre à ajouter et retirer dynamiquement des éléments HTML.
Consigne : Créez un bouton qui ajoute un nouvel élément <li> à une liste non ordonnée chaque fois qu’il est cliqué. Ajoutez un autre bouton pour retirer le dernier élément de la liste.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exercice 9</title>
</head>
<body>
<h1>Manipuler des éléments du DOM</h1>
<ul id="liste">
<li>Élément 1</li>
</ul>
<button onclick="ajouterElement()">Ajouter un élément</button>
<button onclick="retirerElement()">Retirer le dernier élément</button>
</body>
</html>
// Fonction pour ajouter un élément
function ajouterElement() {
let liste = document.getElementById("liste");
let nouvelElement = document.createElement("li");
nouvelElement.textContent = "Nouvel élément";
liste.appendChild(nouvelElement);
}
// Fonction pour retirer le dernier élément
function retirerElement() {
let liste = document.getElementById("liste");
liste.removeChild(liste.lastElementChild);
}ul).ajouterElement crée un nouvel élément de liste (li) et l’ajoute à la liste existante.retirerElement retire le dernier élément de la liste. Objectif : Apprendre à utiliser des événements et à mettre à jour dynamiquement l’interface utilisateur.
Consigne : Créez un compteur avec deux boutons : un pour incrémenter et un pour décrémenter le compteur. Affichez la valeur du compteur dans un élément <span>.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exercice 10</title>
</head>
<body>
<h1>Compteur en JavaScript</h1>
<p>Valeur du compteur : <span id="compteur">0</span></p>
<button onclick="incrementer()">Incrémenter</button>
<button onclick="decrementer()">Décrémenter</button>
</body>
</html>
// Initialisation du compteur
let compteur = 0;
// Fonction pour incrémenter le compteur
function incrementer() {
compteur++;
document.getElementById("compteur").textContent = compteur;
}
// Fonction pour décrémenter le compteur
function decrementer() {
compteur--;
document.getElementById("compteur").textContent = compteur;
}0.incrementer et decrementer augmentent ou diminuent la valeur du compteur.<span> avec id="compteur". 