10 exercices de JavaScript pour progresser (avec corrections)

En JavaScript plus qu’ailleurs, la théorie s’évapore vite si elle ne passe pas par les doigts. Ces 10 exercices de JavaScript sont calibrés pour un débutant qui a lu les bases du JavaScript : les cinq premiers se font dans la console, les cinq suivants sur une vraie page — car le but du langage, c’est le web vivant. Ils s’inscrivent dans le parcours de notre guide complet pour apprendre le JavaScript.

Exercices 1 à 5 : la logique, dans la console

Ouvre les DevTools (F12), onglet Console : ton laboratoire est prêt, aucune installation.

1. Le message de bienvenue. Déclare une constante prenom et une variable heure, puis affiche « Bonjour Sami, il est 18h » avec un template literal. Piste : les backticks `Bonjour ${prenom}` insèrent les valeurs dans le texte — adopte-les tout de suite, tu ne reviendras jamais aux concaténations.
2. Le convertisseur euros-dollars. Écris une fonction convertis(montant, taux) qui renvoie le résultat arrondi à deux décimales. Piste : return montant * taux, puis la méthode toFixed(2) — et découvre au passage qu’elle renvoie une chaîne, première leçon sur les types. Approfondis avec les fonctions en JavaScript.
3. FizzBuzz, version JavaScript. De 1 à 50 : « Fizz » pour les multiples de 3, « Buzz » pour 5, « FizzBuzz » pour les deux. Piste : une boucle for classique, le modulo %, et le cas 15 testé en premier dans tes conditions — avec === partout.
4. Le plus grand de trois nombres. Sans utiliser Math.max d’abord (conditions imbriquées), puis avec Math.max(a, b, c) pour comparer les deux approches. Piste : la version « à la main » t’apprend la logique, la version native t’apprend à chercher dans la documentation — les deux réflexes comptent.
5. Le générateur d’initiales. À partir de « marie dupont », affiche « M.D. ». Piste : split( » « ) découpe en tableau, [0] attrape la première lettre de chaque mot, toUpperCase() met en majuscule.

Exercices 6 à 10 : le DOM, sur une vraie page

Crée une page HTML minimale comme support (un titre, un bouton, un paragraphe, un champ) — si besoin, le pas-à-pas est dans créer son premier site en HTML et CSS.

6. Le compteur de clics. Un bouton, un chiffre qui s’incrémente à chaque clic. Piste : querySelector pour attraper les éléments, addEventListener(« click », …) pour écouter, textContent pour afficher — le trio fondamental du front-end.
7. Afficher / masquer. Un bouton qui fait apparaître et disparaître un paragraphe. Piste : classList.toggle(« cache ») sur l’élément, avec une classe CSS display: none — une ligne de JavaScript, tout le concept d’état.
8. La validation d’email. Un champ texte qui passe en vert si la saisie contient un @ et un point, en rouge sinon, en temps réel. Piste : écoute l’événement « input », teste avec includes(), change la classe selon le résultat.
9. La liste de courses dynamique. Un champ + un bouton « Ajouter » qui insère chaque saisie dans une liste à l’écran. Piste : stocke dans un tableau avec push, puis crée l’élément avec createElement et appendChild — ou régénère la liste entière, les deux se défendent.
10. Le mini quiz. Une question, trois boutons de réponse, un score affiché et un message final. Piste : c’est la synthèse des exercices 6 à 9 — état dans une variable, événements sur chaque bouton, mise à jour du DOM. Réussi sans tutoriel ? Tu es prêt pour les 5 projets d’un week-end.

La méthode pour que ces exercices te fassent progresser

Les règles éprouvées restent les mêmes. Cherche avant de lire : 15 à 20 minutes d’effort réel par exercice avant d’ouvrir la piste — c’est précisément dans cet inconfort que le cerveau câble les réflexes. Tape tout toi-même, y compris ce que tu crois connaître : en JavaScript, la mémoire des doigts vaut celle de la tête, notamment pour la ponctuation. Prolonge chaque réussite : le compteur avec un bouton reset, la liste de courses avec suppression d’éléments, le quiz avec trois questions enchaînées — modifier un programme qui fonctionne est l’exercice caché le plus rentable de cette page. Et console.log est ton ami : affiche tes variables à chaque étape pour voir ce que le code fait vraiment, pas ce que tu crois qu’il fait.

Un exercice par jour suffit — le format parfait pour nourrir ta routine sans saturer. La suite naturelle : la to-do list complète, le rite de passage du développeur web, puis les sites d’exercices gratuits et les défis quotidiens pour un entraînement sans fin. Le web interactif est ton terrain de jeu, et tu viens d’y poser tes premières lignes.

Un dernier mot si tu as déjà fait notre série d’exercices Python : tu as remarqué que FizzBuzz, l’inversion de chaîne ou le compteur reviennent ici sous une autre syntaxe — c’est voulu. Refaire un exercice connu dans un nouveau langage est l’un des meilleurs révélateurs qui soient : tu constates que la logique est déjà acquise (l’algorithme ne change pas) et que seule la syntaxe s’apprend — quelques jours, pas quelques mois. C’est la démonstration concrète d’une promesse qu’on te fait depuis le début : les concepts se transfèrent, et chaque langage supplémentaire coûte dix fois moins cher que le premier. Les cinq exercices DOM, eux, n’existent qu’en JavaScript — c’est précisément sa valeur ajoutée.

Questions fréquentes

Quels exercices JavaScript pour débuter avec le DOM ?

Les trois classiques dans l’ordre : un compteur de clics (sélectionner, écouter, afficher), un bouton afficher/masquer (classList.toggle) et une liste dynamique alimentée par un champ (tableau + createElement). Ils couvrent l’essentiel du trio querySelector, addEventListener et mise à jour du contenu.

Faut-il faire les exercices dans la console ou dans un fichier ?

Les deux, dans cet ordre : la console pour les exercices de logique pure (résultat immédiat, zéro friction), puis un fichier lié à une page HTML dès que le DOM entre en jeu. Ce passage console → page fait partie de l’apprentissage.

Comment savoir si j’ai vraiment réussi un exercice ?

Trois tests : le refaire de mémoire le lendemain, l’expliquer à voix haute simplement, et le prolonger d’une variante (un reset, une suppression, une question de plus). Si les trois passent, la notion est acquise ; sinon, tu sais exactement quoi retravailler.

Que faire après ces 10 exercices JavaScript ?

Passe aux projets courts et visuels : to-do list, générateur de citations, petit quiz complet, puis les projets d’un week-end. Les exercices installent les réflexes ; les projets t’apprennent à les assembler en applications entières, la compétence qui compte vraiment.

Sources

• MDN Web Docs — référence JavaScript et DOM en français
• freeCodeCamp — exercices JavaScript interactifs gratuits

Cet article a une vocation informative et pédagogique. Les plateformes, outils et formations éventuellement cités le sont à titre d’exemple ; compare plusieurs options avant de t’engager ou de payer.