Aller au contenu

Solutions

Les codes sont à mettre dans votre balise <script></script>

Exercice 1

window.onload = function() {
    let paragraphe = document.createElement("p");
    paragraphe.textContent = "ceci est un texte de couleur rouge dans un paragraphe";
    paragraphe.style.color = "red";
    document.body.appendChild(paragraphe);
};

Exercice 2

window.onload = function() {
    let titreH1 = document.createElement("h1);
    titreH1.textContent = "Liste des aliments";
    let ul = document.createElement("ul");
    let items = ["Pomme", "Poire", "Banane"];
    items.forEach(function(itemText) {
        let li = document.createElement("li");
        li.textContent = itemText;
        ul.appendChild(li);
    });
    ul.style.backgroundColor = "lightgrey";
    document.body.appendChild(titreH1);
    document.body.appendChild(ul);
};

Exercice 3

Attention, ce code peut ne pas fonctionner sur un émulateur en ligne pour l’affichage de la fenêtre alerte.

document.getElementById("btn").onclick = function() {
    alert("Bonjour étudiant.e !");
};

Exercice 4

document.getElementById("btnAdd").onclick = function() {
    var textInput = document.getElementById("textInput").value;
    var paragraph = document.createElement("p");
    paragraph.textContent = textInput;
    document.getElementById("output").appendChild(paragraph);
};

Exercice 5

document.getElementById("selectOptions").onchange = function() {
    var selectedOption = this.value;
    var paragraph = document.createElement("p");
    paragraph.textContent = selectedOption;
    document.getElementById("output").appendChild(paragraph);
};

Exercice 6

document.getElementById("btnAdd").onclick = function() {
    var listItem = document.createElement("li");
    listItem.textContent = "Nouvel élément";
    document.getElementById("list").appendChild(listItem);
};

Exercice 7

// Aucun JavaScript nécessaire pour cet exercice.

Exercice 8

document.getElementById("image").onclick = function() {
    this.style.display = "none";
};

Exercice 9

document.getElementById("paragraph").ondblclick = function() {
    this.textContent = "Double-cliqué!";
};

Exercice 10

document.getElementById("btnClear").onclick = function() {
    document.getElementById("paragraph").textContent = "";
};

Exercice 11

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Manipulation du DOM - Exercice 11</title>
</head>
<body>
    <p id="monParagraphe">Cliquez sur le bouton pour changer le texte.</p>
    <button onclick="changerTexte()">Changer le texte</button>

    <script>
        function changerTexte() {
            document.getElementById("monParagraphe").innerHTML = "Nouveau texte modifié par JS !";
        }
    </script>
</body>
</html>

Exercice 12

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Manipulation du DOM - Exercice 12</title>
</head>
<body>
    <div id="monDiv" style="width: 200px; height: 200px; background-color: blue;"></div>
    <button onclick="changerCouleur()">Changer la couleur</button>

    <script>
        function changerCouleur() {
            let div = document.getElementById("monDiv");
            div.style.backgroundColor = "blue";
        }
    </script>
</body>
</html>

Exercice 13

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Manipulation du DOM - Exercice 13</title>
</head>
<body>
    <div id="conteneur"></div>
    <button onclick="ajouterParagraphe()">Ajouter un paragraphe</button>
    <button onclick="supprimerParagraphe()">Supprimer un paragraphe</button>

    <script>
        function ajouterParagraphe() {
            let conteneur = document.getElementById("conteneur");
            let nouveauParagraphe = document.createElement("p");
            nouveauParagraphe.innerHTML = "Nouveau paragraphe ajouté !";
            conteneur.appendChild(nouveauParagraphe);
        }

        function supprimerParagraphe() {
            let conteneur = document.getElementById("conteneur");
            conteneur.removeChild(conteneur.lastChild);
        }
    </script>
</body>
</html>

Exercice 14

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Manipulation du DOM</title>
    <style>
        .couleurYellow {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="monDiv">Ceci est un texte.</div>
    <button onclick="ajouterClasse()">Ajouter une classe CSS couleurYellow</button>
    <button onclick="supprimerClasse()">Supprimer une classe CSS couleurYellow</button>

    <script>
        function ajouterClasse() {
            document.getElementById("monDiv").classList.add("couleurYellow");
        }

        function supprimerClasse() {
            document.getElementById("monDiv").classList.remove("couleurYellow");
        }
    </script>
</body>
</html>

Exercice 15

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Manipulation du DOM</title>
</head>
<body>
    <img id="monImage" src="images/0.jpg" alt="Portrait 0">
    <button onclick="changerImage()">Changer le portrait Image</button>

    <script>
        function changerImage() {
            let image = document.getElementById("monImage");
            if (image.src.includes("images/0.jpg")) {
                image.src = "images/1.jpg";
            } else {
                image.src = "images/0.jpg";
            }
        }
    </script>
</body>
</html>

Exercice 16

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Manipulation du DOM : Exercice 16</title>
</head>
<body>
    <div>
       <p id="monDiv" onmouseover="afficherAlerte()"> Je suis un paragraphe mais survolez-moi pour afficher une alerte JS !</p>
    </div>
    <script>
        function afficherAlerte() {
            alert("Vous m'avez survolé ! Cool !");
        }
    </script>
</body>
</html>

Exercice 17

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Manipulation du DOM - Exercice 17</title>
</head>
<body>
    <select id="maListe" onchange="changerTexte()">
        <option value="Option 1">J'adore le JS</option>
        <option value="Option 2">Je suis fou de SQL</option>
        <option value="Option 3">J'aime PHP</option>
         <option value="Option 3">Je préfère les MCD</option>
    </select>
    <p id="monParagraphe">Le texte doit changer ici !</p>

    <script>
        function changerTexte() {
            var liste = document.getElementById("maListe");
            var paragraphe = document.getElementById("monParagraphe");
            paragraphe.innerHTML = "Vous avez sélectionné : " + liste.value;
        }
    </script>
</body>
</html>

Exercice 18

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Manipulation du DOM - Exercice 18</title>
</head>
<body>
    <form id="monFormulaire">
        <input type="text" id="nom" placeholder="Entrez votre nom">
        <button type="button" onclick="validerFormulaire()">Valider</button>
    </form>
    <div id="messageErreur"></div>

    <script>
        function validerFormulaire() {
            var nom = document.getElementById("nom").value;
            var messageErreur = document.getElementById("messageErreur");
            if (nom === "") {
                messageErreur.innerHTML = "Veuillez entrer votre nom.";
            } else {
                messageErreur.innerHTML = "";
                alert("Formulaire soumis avec succès !");
            }
        }
    </script>
</body>
</html>

Exercice 19

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculatrice Simple à compléter en JS</title>
</head>
<body>
    <div>
        <input type="text" id="resultat" disabled>
    </div>
    <div>
        <button onclick="ajouterChiffre('1')">1</button>
        <button onclick="ajouterChiffre('2')">2</button>
        <button onclick="ajouterChiffre('3')">3</button>
        <button onclick="ajouterOperation('+')">+</button>
    </div>
    <div>
        <button onclick="ajouterChiffre('4')">4</button>
        <button onclick="ajouterChiffre('5')">5</button>
        <button onclick="ajouterChiffre('6')">6</button>
        <button onclick="ajouterOperation('-')">-</button>
    </div>
    <div>
        <button onclick="ajouterChiffre('7')">7</button>
        <button onclick="ajouterChiffre('8')">8</button>
        <button onclick="ajouterChiffre('9')">9</button>
        <button onclick="ajouterOperation('*')">*</button>
    </div>
    <div>
        <button onclick="ajouterChiffre('0')">0</button>
        <button onclick="effacer()">C</button>
        <button onclick="calculer()">=</button>
        <button onclick="ajouterOperation('/')">/</button>
    </div>

    <script>
        // fonction pour ajouter un chiffre dans la zone résultat
        function ajouterChiffre(chiffre) {
            document.getElementById("resultat").value += chiffre;
        }
        // fonction pour ajouter une opération dans la zone résultat
        function ajouterOperation(operation) {
            document.getElementById("resultat").value += operation;
        }
        // fonction pour effacer la zone résultat
        function effacer() {
            document.getElementById("resultat").value = "";
        }
        // fonction pour effectuer le calcul
        function calculer() {
            let expression = document.getElementById("resultat").value;
            // on vérifie si l'expression est valide
            if (/^[\d\+\-\*\/\(\)\.\s]+$/.test(expression)) {
                let resultat = eval(expression);
                document.getElementById("resultat").value = resultat;
                } else {
                console.log("L'expression fournie n'est pas valide.");
                }  
        }
    </script>
</body>
</html>

Exercice 20

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exercice 20 : Jeu de Devinettes Simple</title>
</head>
<body>
    <h1>Jeu de Devinettes Simple </h1>
    <p>Devinez un nombre entre 1 et 100 :</p>
    <input type="number" id="nombre" min="1" max="100">
    <button onclick="verifierDevine()">Vérifier</button>
    <div id="message"></div>

    <script>
        var nombreADeviner = Math.floor(Math.random() * 100) + 1;
        var tentatives = 0;

        function verifierDevine() {
            var nombre = parseInt(document.getElementById("nombre").value);
            var message = document.getElementById("message");

            if (nombre === nombreADeviner) {
                message.innerHTML = "Félicitations ! Vous avez deviné le nombre en " + ++tentatives + " tentatives.";
            } else if (nombre < nombreADeviner) {
                message.innerHTML = "Le nombre est trop bas. Essayez encore.";
            } else {
                message.innerHTML = "Le nombre est trop haut. Essayez encore.";
            }
            tentatives++;
        }
    </script>
</body>
</html>