Exercices simples pour apprendre les bases du JavaScript

Pour la réalisation des exercices, je vous propose de vous rendre sur le site de jsfiddle.net ou js.do aux adresse ci-dessous :

https://jsfiddle.net/
https://js.do/
Vous copiez-collez le code HTML dans la zone HTML et votre JavaScript dans la zone JavaScript.
Vous pouvez aussi ajouter des CSS directement dans votre page html ou bien dans la zone CSS.
Le résultat s’affiche dans la partie nommée Result.
Vous avez même une console en bas à droite pour afficher vos données JS.

Lien Mozilla pour vous aider à trouver les mots-clés

page Aide-mémoire sur JavaScript

Manipulation du DOM avec Javascript

DOM html

Rappel sur le DOM

Un fichier HTML basique :

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Présentation du DOM HTML</title>
  </head>
  <body>
    <section>
      <img src="images/serpent.png" alt="un serpent pour la démo" />
      <p>
        Ici, un paragraphe avec un lien (une ancre) vers la page d'accueil du site web-dev
        <a target="_blank" href="https://cours-webdev-numerosoft.fr">Accueil de Web-Dev</a>
      </p>
    </section>
  </body>
</html>

DOM (structure de ce fichier)

image du DOM de la page ci-dessus

Générer grâce à ce site : https://software.hixie.ch/utilities/js/live-dom-viewer/

Exercices pratiques sur le DOM

Pour tous les exercices sauf les derniers, mettez votre code JavaScript dans la fonction suivante dans votre balise script :

window.onload = function() {

    /* Cette fonction est éxécutée au chargement de la page html */
    /* votre code ici*/
};

Exercice 1

Ajouter un paragraphe avec du texte ceci est un texte de couleur rouge dans un paragraphe à une page HTML et changer sa couleur en rouge dès l’affichage de la page.

<!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>
</head>
<body>
    <script>
         /* votre script ici */
    </script>
</body>
</html>

Exercice 2

Ajouter un titre H1 avec Liste des aliments et une liste non ordonnée contenant 3 éléments (Pomme, poire, banane) à une page HTML et changer la couleur de fond de la liste en gris ou autre selon votre goût.

<!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>
</head>
<body>
    <script>
        /* votre script ici */
    </script>
</body>
</html>

Exercice 3

Ajouter un bouton à une page HTML. Lorsque ce bouton est cliqué, un message Bonjour étudiant.e ! doit s’afficher dans une boîte d’alerte.

<!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>
</head>
<body>
    <button id="btn">Cliquez ici</button>
    <script>
        /* votre script ici */
    </script>
</body>
</html>

Exercice 4

Créer un champ de texte et un bouton. Lorsque l’utilisateur entre du texte dans le champ et clique sur le bouton, un paragraphe contenant ce texte doit être ajouté à la page.

<!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>
</head>
<body>
    <input type="text" id="textInput">
    <button id="btnAdd">Ajouter Paragraphe</button>
    <div id="output"></div>
    <script>
        /* votre script ici */
    </script>
</body>
</html>

Pour vous aider, voici le code JS de base qui permet d’exécuter du code dans une fonction en fonction d’un évenement

// on va créer une fonction qui va exécuter des actions en fonction du changement soit "onChange"
// exemple valable pour  le 5 et les autres. c'est juste l'événement qui change
document.getElementById("selectOptions").onchange = function() {
//on récupère la valeur de l'option sélectionnée par l'utilisateur
    let optionSelectionne = this.value;
 // le reste je vous laisse faire pour afficher la valeur récupérer ou faire autre chose
};

Exercice 5

Créer une liste déroulante contenant trois options. Lorsque l’utilisateur sélectionne une option, un paragraphe avec le texte de l’option sélectionnée doit être ajouté à la page.

<!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>
</head>
<body>
    <select id="selectOptions">
        <option value="Option 1">Option 1</option>
        <option value="Option 2">Option 2</option>
        <option value="Option 3">Option 3</option>
    </select>
    <div id="output"></div>
    <script src="script.js"></script>
</body>
</html>

Exercice 6

Créer une liste à puces vide. Lorsque l’utilisateur clique sur un bouton, un nouvel élément de liste doit être ajouté à la liste.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exercice 6</title>
</head>
<body>
    <button id="btnAdd">Ajouter élément de liste</button>
    <ul id="list"></ul>
    <script src="script.js"></script>
</body>
</html>

Exercice 7

Créer un paragraphe avec du texte. Lorsque l’utilisateur survole ce paragraphe avec la souris, la couleur de fond doit changer en jaune.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exercice 7</title>
    <style>
        #paragraph:hover {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <p id="paragraph">Passez la souris sur ce paragraphe.</p>
    <script src="script.js"></script>
</body>
</html>

Exercice 8

Créer une image. Lorsque l’utilisateur clique sur cette image, elle doit disparaître de la page.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exercice 8</title>
</head>
<body>
    <img id="image" src="image.jpg" alt="Image">
    <script src="script.js"></script>
</body>
</html>

Exercice 9

Créer un paragraphe avec du texte. Lorsque l’utilisateur double-clique sur ce paragraphe, le texte doit être remplacé par “Double-cliqué!”.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exercice 9</title>
</head>
<body>
    <p id="paragraph">Double-cliquez sur ce paragraphe.</p>
    <script src="script.js"></script>
</body>
</html>

Exercice 10

Créer un bouton et un paragraphe avec du texte. Lorsque l’utilisateur clique sur le bouton, le texte du paragraphe doit être supprimé.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exercice 10</title>
</head>
<body>
    <button id="btnClear">Effacer le texte</button>
    <p id="paragraph">Cliquez sur le bouton pour supprimer ce texte.</p>
    <script src="script.js"></script>
</body>
</html>

Exercice 11 : Modifier le texte d’un élément

Créer un paragraphe dans une page HTML avec un identifiant unique, puis modifier son contenu texte en utilisant JavaScript.

<!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>
   <!-- votre code html et JS ici --->
</body>
</html>

Exercice 12 : Modifier le style d’un élément

Créer un bouton qui change la couleur de fond d’un élément DIV lorsque vous cliquez dessus.

<!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>
   <!-- votre code html et JS ici --->
</body>
</html>

Exercice 13 : Ajouter et supprimer des éléments

créer un bouton qui ajoute un nouveau paragraphe à la page à chaque clic, et un autre bouton qui supprime le dernier paragraphe ajouté.

<!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>
   <!-- votre code html et JS ici --->
</body>
</html>

Exercice 14 : Manipuler les classes CSS

Créer deux boutons qui ajoutent et suppriment une classe CSS nommée couleurYellow à un élément.

<!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 14</title>
    <style>
        .couleurYellow {
            background-color: yellow;
        }
    </style>
</head>
<body>
   <!-- votre code html et JS ici --->
</body>
</html>

Exercice 15 : Manipuler les attributs HTML (à faire sur votre machine)

Créer un bouton qui change la source de l’image lorsque vous cliquez sur le bouton.

<!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 15</title>
</head>
<body>
     <img id="monImage" src="images/0.jpg" alt="Portrait 0">
    <button onclick="changerImage()">Changer le portrait Image</button>

   <!-- votre code JS ici --->
</body>
</html>

Images à télécharger pour cet exercice à faire sur votre machine.

Image à afficher :

portait 0

Image de remplacement :

portait 1

Exercice 16 : Gérer les événements

Créer un bouton qui affiche une fenêtre d’alerte JS lorsque vous survolez un élément.

<!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>
            <!-- votre code JS ici --->
    </body>
</html>

Exercice 17 : Créer une liste déroulante dynamique

Créer une liste déroulante qui change le texte d’un paragraphe lorsqu’une option est sélectionnée.

<!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>

     <!-- votre code JS ici --->
</body>
</html>

Exercice 18 : Valider un formulaire

Créer un formulaire simple avec une zone de texte et un bouton. Lorsque le bouton est cliqué, vérifiez si la zone de texte est vide et affichez un message d’erreur si elle l’est.

<!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>
    <form id="monFormulaire">
        <input type="text" id="nom" placeholder="Entrez votre nom">
        <button type="button" onclick="validerFormulaire()">Valider</button>
    </form>
    <div id="messageErreur"></div>

    <!-- votre code JS ici --->
</body>
</html>

Exercice 19 : Créer une calculatrice simple

Créer une calculatrice simple avec des boutons pour les chiffres et les opérations de base (+, -, *, /).

<!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>
         <!-- votre code JS ici ! c'est facile, vous avez déjà le nom des fonctions dans le html --->
</body>
</html>

Exercice 20 : Devinez un nombre

Créer un jeu où l’utilisateur doit deviner un nombre entre 1 et 100.

Le jeu doit indiquer si la tentative est trop haute, trop basse ou correcte.

Il doit également suivre le nombre de tentatives de l’utilisateur.

<!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;

        /* JS à compléter ici ! c'est facile, vous avez déjà le nom de la fonctions dans le html et la fonction pour générer le nombre à deviner */
    </script>
</body>
</html>

Jeu de devinette un peu plus poussé

Description : Afficher une question et permettre à l’utilisateur de saisir une réponse. Si la réponse est correcte, afficher un message de félicitations sinon un message de mécontentement !

à vous de le construire complètement !

Jeu du Pendu (sans pendu, quoique à vous de voir)

Description : Afficher un mot caché avec des tirets pour chaque lettre non devinée.

L’utilisateur saisit une lettre à deviner.
S’il devine correctement, la lettre est affichée dans le mot.
Sinon, il perd une vie.

Le jeu se termine lorsque toutes les lettres sont devinées ou que l’utilisateur a perdu toutes ses vies !

à vous de le construire complètement !

Jeu de Mémoire appelé couramment “Memory”

Description : Afficher une grille de cartes retournées face cachée.

L’utilisateur clique sur deux cartes pour les retourner.
Si les 2 cartes retournées sont identiques, elles restent découvertes.
Sinon, elles se retournent à nouveau.
Le but est de retourner toutes les paires de cartes.
Vous prenez ce que vous voulez pour les figures sur les cartes

à vous de le construire complètement !

Jeu du Serpent qui dévore et grossit

jeu du serpent

Description : Contrôler un serpent qui se déplace sur un plateau de jeu.

Le serpent doit manger de la nourriture pour grandir.
Si le serpent se heurte à lui-même ou aux bords du plateau, le jeu se termine.
il faut afficher le nombre des aliments qu’il mange.
Il faut afficher la durée depuis que l’internaute à commencé à appuyer sur l’une des touches de direction du clavier.

à vous de le construire complètement !

Corrections

corrections des principaux exercices