JavaScript pour débutants, par où commencer en 2026

Pour apprendre JavaScript à partir de zéro, commence par la console du navigateur et l'éditeur VS Code, puis avance dans l'ordre à travers les variables, les conditions et les boucles, les fonctions, les tableaux et objets, le DOM, et enfin fetch avec async/await. À raison de 30 à 60 minutes par jour, les bases prennent en général un à trois mois, et tout ce dont tu as besoin est gratuit.

Si tu es encore en train de choisir un langage, lis d'abord par où commencer à apprendre à programmer.

Ce qu'est JavaScript et pourquoi c'est un bon premier langage

JavaScript (JS) est le langage qui donne vie aux pages web. HTML construit la structure d'une page, CSS gère son apparence, et JavaScript ajoute le comportement : réagir à un clic, valider un formulaire, récupérer des données depuis un serveur. C'est un bon choix pour démarrer, car il tourne dans tous les navigateurs, ne coûte rien et montre un résultat à l'écran tout de suite.

Il a été créé en 1995 chez Netscape, et il est aujourd'hui défini par la norme ouverte ECMAScript, qui reçoit une nouvelle édition chaque année. Le même code tourne aussi sur un serveur grâce à Node.js, et dans des applications mobiles et de bureau. Dans l'enquête Stack Overflow Developer Survey 2025, 66 % des répondants utilisaient JavaScript, plus que n'importe quel autre langage, donc les ressources d'apprentissage et les réponses aux problèmes courants ne manquent pas.

Les bases de HTML et CSS aident avant de se lancer, car JS travaille surtout avec les éléments de la page. Connaître les balises, les attributs id et class, et la structure d'un document suffit, et tu peux approfondir CSS en parallèle. S'il te manque ça, commence par le guide HTML et CSS pour débutants.

Un plan d'apprentissage en huit étapes

L'erreur la plus fréquente est de sauter directement vers React ou TypeScript. Les frameworks ressemblent alors à de la magie, et chaque message d'erreur à une énigme. Mieux vaut d'abord passer par le JavaScript pur, dans cet ordre :

En chemin, tu trouveras des exemples à exécuter et des liens vers des leçons gratuites du cours JavaScript de CodeWorlds, si tu préfères traiter le sujet avec des exercices. Les exemples fonctionnent aussi seuls, et un navigateur suffit pour la plupart d'entre eux.

Installation : navigateur, VS Code et Node.js

Un navigateur suffit pour commencer. Ouvre les outils de développement (raccourci Ctrl+Maj+J dans Chrome, Cmd+Option+J sur Mac), va dans l'onglet Console et tape 2 + 2. C'est un environnement JavaScript à part entière et l'endroit le plus rapide pour tester une idée, comme le montre bien la leçon premiers pas dans la console JavaScript.

Pour du code plus long, il te faut un éditeur, par exemple le gratuit Visual Studio Code avec l'extension Live Server, qui recharge la page à chaque enregistrement. Ton premier projet, ce sont deux fichiers dans un seul dossier :

<!-- index.html -->
<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Premier script</title>
    <script src="script.js" defer></script>
  </head>
  <body>
    <h1 id="title">Bonjour !</h1>
  </body>
</html>

// script.js
console.log("Le script fonctionne");
document.querySelector("#title").textContent = "Bonjour depuis JavaScript !";

L'attribut defer ne lance le script qu'une fois tout le HTML chargé, donc le titre qu'il modifie existe déjà. Le troisième élément est Node.js, qui fait tourner JavaScript hors du navigateur. Installe la version LTS, vérifie-la avec node --version, et lance un fichier hello.js avec node hello.js. Des outils comme npm et Vite tournent aussi sur Node.

Les deux premières lignes couvrent les bases. Laisse Bun et Deno pour plus tard, car ils font tourner le même langage et il est facile de basculer.

Variables et types de données

Une variable est une boîte nommée pour une valeur. Utilise const pour une valeur que tu ne vas pas remplacer (le choix par défaut), et let pour une valeur qui va changer. Laisse tranquille l'ancien var, car ses règles de portée dérèglent les débutants.

const userName = "Ada";
let score = 0;

score = score + 10;
console.log(`Salut, ${userName} ! Tu as ${score} points.`);

console.log(typeof userName); // "string"
console.log(typeof score); // "number"
console.log(typeof true); // "boolean"

Un texte entre accents graves est un gabarit (template literal), dans lequel ${...} insère des valeurs. Tu rencontreras vite le texte (string), les nombres (number), les valeurs vrai/faux (boolean), ainsi que null et undefined, deux façons de dire qu'il n'y a pas de valeur. La conversion automatique de types cause le plus de problèmes :

console.log("5" == 5); // true, car == convertit les types avant de comparer
console.log("5" === 5); // false, car les types sont différents
console.log("2" + 2); // "22", texte concaténé
console.log("2" * 2); // 4, car la multiplication transforme le texte en nombre

D'où une règle simple : compare toujours avec === et !==. Note aussi que const bloque la réaffectation mais ne gèle pas un objet, donc tu peux toujours changer ses propriétés. Entraîne-toi dans la leçon déclaration de variables avec var, let et const.

Conditions et boucles

Les conditions permettent à un programme de prendre des décisions, et les boucles de répéter du travail sans copier le code.

const temperature = 23;

if (temperature > 25) {
  console.log("Il fait chaud, prends de l'eau");
} else if (temperature > 15) {
  console.log("Parfait pour une promenade");
} else {
  console.log("Prends une veste");
}

const tasks = ["faire les courses", "le sport", "apprendre JavaScript"];

for (const task of tasks) {
  console.log(`À faire : ${task}`);
}

for (let i = 3; i > 0; i--) {
  console.log(`Ça commence dans ${i}...`);
}

for...of parcourt les éléments d'un tableau et se lit le mieux au départ. Un for classique avec un compteur aide quand tu as besoin du numéro de l'étape, et while quand tu ne connais pas à l'avance le nombre de répétitions.

Une condition dans if n'a pas besoin d'être un booléen. Des valeurs comme 0, le texte vide "", null, undefined et NaN comptent comme faux, donc if (userName) vérifie si un nom a bien été donné. La leçon boucles et itérations couvre les boucles pas à pas.

Fonctions

Une fonction est un bout de code nommé que tu appelles plusieurs fois. Elle prend des arguments et renvoie généralement un résultat. Tu verras deux écritures : la déclaration classique avec le mot-clé function, et la fonction fléchée, plus courte, pratique pour les opérations simples.

function greet(name) {
  return `Salut, ${name} !`;
}

const applyDiscount = (price, percent = 10) => price - (price * percent) / 100;

console.log(greet("Ada")); // Salut, Ada !
console.log(applyDiscount(200)); // 180
console.log(applyDiscount(200, 25)); // 150

percent = 10 est une valeur par défaut utilisée quand tu omets le deuxième argument. Les variables créées à l'intérieur d'une fonction n'existent que là, donc elles n'entrent pas en conflit avec le reste du programme.

Une bonne fonction fait une seule chose, et son nom dit laquelle. Si la décrire a besoin du mot « et », tu peux généralement la couper en deux. Découper un problème en petits morceaux compte plus que connaître une syntaxe quelconque. Voir la leçon fonctions pour plus d'exemples.

Tableaux et objets

Un tableau stocke une liste ordonnée de valeurs, et un objet décrit une chose à travers des propriétés nommées. Ils apparaissent le plus souvent ensemble, comme un tableau d'objets représentant par exemple des produits chargés depuis un serveur.

const products = [
  { name: "Clavier", price: 199, inStock: true },
  { name: "Souris", price: 89, inStock: false },
  { name: "Écran", price: 899, inStock: true },
];

const available = products.filter((product) => product.inStock);
const names = available.map((product) => product.name);
const total = available.reduce((sum, product) => sum + product.price, 0);

console.log(names); // ["Clavier", "Écran"]
console.log(total); // 1098

const { name, price } = products[1];
const discounted = { ...products[1], price: 69 };
console.log(name, price, discounted.price); // Souris 89 69

filter garde les éléments qui passent un test, map transforme chaque élément en un nouveau, et reduce réduit le tableau à une seule valeur, ici le prix total. Aucune de ces méthodes ne modifie le tableau d'origine, ce qui t'évite des bugs difficiles à repérer.

La fin de l'exemple montre la déstructuration, qui extrait des propriétés dans des variables séparées, et l'opérateur de décomposition (...), qui copie un objet en écrasant les champs choisis. Tu verras les deux partout, surtout dans React. Entraîne-toi avec les leçons forEach, map, filter et reduce et propriétés et méthodes des objets.

Le DOM et les événements

Le DOM (Document Object Model) est une représentation en arbre d'une page HTML, accessible à JavaScript. Grâce à lui, tu trouves un élément, tu changes son contenu ou tu réagis à un clic, et tu vois l'effet tout de suite. La documentation du DOM sur MDN a la référence complète.

<!-- index.html -->
<form id="todo-form">
  <input id="todo-input" placeholder="Nouvelle tâche">
  <button type="submit">Ajouter</button>
</form>
<ul id="todo-list"></ul>

// script.js
const form = document.querySelector("#todo-form");
const input = document.querySelector("#todo-input");
const list = document.querySelector("#todo-list");

form.addEventListener("submit", (event) => {
  event.preventDefault();

  const text = input.value.trim();
  if (!text) return;

  const item = document.createElement("li");
  item.textContent = text;
  list.append(item);

  input.value = "";
  input.focus();
});

Le schéma est toujours le même : trouve un élément avec querySelector, attache un gestionnaire d'événement avec addEventListener, et modifie la page à l'intérieur. event.preventDefault() empêche la page de se recharger après l'envoi du formulaire, et trim() rejette les saisies composées uniquement d'espaces.

Remarque textContent. Il insère du texte brut, donc les balises HTML tapées dans le champ s'affichent comme du texte et ne s'exécutent jamais. Le tentant innerHTML interprète le contenu comme du HTML et, avec une saisie utilisateur, ouvre la porte aux attaques XSS. Entraîne-toi aux événements dans la leçon les écouteurs d'événements.

Récupérer des données avec fetch et async/await

Les données venant d'un serveur, comme une prévision météo ou une liste de produits, arrivent avec un délai, et la page ne peut pas se figer pendant ce temps : ces opérations sont donc asynchrones. fetch renvoie une promesse (Promise), un résultat disponible plus tard, et await permet de l'attendre de façon lisible.

async function loadTodo(id) {
  try {
    const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${id}`);

    if (!response.ok) {
      throw new Error(`Erreur HTTP : ${response.status}`);
    }

    const todo = await response.json();
    console.log(todo.title);
  } catch (error) {
    console.error("Impossible de récupérer les données :", error.message);
  }
}

loadTodo(1);

await fonctionne à l'intérieur des fonctions async et au premier niveau des modules. Le piège principal : fetch ne lève pas d'erreur sur un code 404 ou 500, seulement en cas de panne réseau, donc tu dois vérifier response.ok toi-même. Le guide de MDN sur l'utilisation de fetch a les détails.

L'adresse de l'exemple pointe vers JSONPlaceholder, une API de test gratuite avec des données fictives. Une fois qu'une requête fonctionne, essaie d'en envoyer plusieurs à la fois avec Promise.all. Les leçons correspondantes sont l'API fetch et la syntaxe async/await.

Les modules, ou comment ranger ses fichiers

Quand le code grossit, un seul fichier ne suffit plus. Tu le découpes alors en modules, des fichiers qui exportent chacun ce qu'ils veulent partager.

// math.js
export function sum(numbers) {
  return numbers.reduce((total, n) => total + n, 0);
}

// main.js
import { sum } from "./math.js";

console.log(sum([4, 8, 15])); // 27

Dans le navigateur, tu charges le fichier principal avec <script type="module" src="main.js"></script>. Les modules ne se chargent pas depuis un fichier ouvert directement depuis le disque (une adresse file://), comme le rappelle le guide de MDN sur les modules, donc il te faut un serveur : Live Server ou un projet Vite suffisent. En Node.js, l'option la plus simple est d'ajouter "type": "module" dans package.json.

Déboguer et lire les erreurs

Les erreurs font partie du quotidien de tout développeur. Les personnes expérimentées lisent simplement le message au lieu d'en avoir peur, et le texte rouge dans la console dit quel est le problème, ce qu'il concerne et à quelle ligne il s'est produit.

const user = { name: "Ada" };

console.log(user.address?.city); // undefined
console.log(user.address.city);
// TypeError: Cannot read properties of undefined (reading 'city')

Le message de Chrome et de Node.js veut dire que tu lis city depuis quelque chose qui vaut undefined, donc le coupable est user.address, pas city. L'opérateur ?. (optional chaining, enchaînement optionnel) sur la première ligne renvoie undefined dans ce cas, au lieu d'arrêter le programme.

console.table([
  { task: "faire les courses", done: true },
  { task: "le sport", done: false },
]);

function calculateAverage(numbers) {
  debugger;
  return numbers.reduce((sum, n) => sum + n, 0) / numbers.length;
}

calculateAverage([4, 8, 15]);

console.table affiche un tableau d'objets sous une forme lisible, et debugger met le code en pause quand les outils de développement sont ouverts. Le panneau Sources montre alors les valeurs des variables et te laisse avancer ligne par ligne. Cliquer sur un numéro de ligne pose la même pause, un breakpoint. La documentation Chrome DevTools l'explique, et la leçon points d'arrêt et exécution pas à pas te fait pratiquer. Si tu restes bloqué, colle le message exact dans un moteur de recherche, car quelqu'un a presque certainement déjà eu ce problème.

Premiers projets

Les connaissances sans projets ne restent pas en tête. Commence petit et laisse chaque projet ajouter une nouveauté :

1. Un compteur de clics. Un bouton, un nombre à l'écran et une réinitialisation : ça couvre les variables, les fonctions et les événements.
2. Une liste de tâches. Ajouter, cocher et supprimer des tâches, puis sauvegarder dans localStorage pour que la liste survive à un rechargement.
3. Un quiz. Des questions dans un tableau d'objets, des points et un score final : ça couvre les tableaux, les conditions et les mises à jour du DOM.
4. Une application météo. Des données venant d'une API publique comme Open-Meteo, qui ne demande pas de clé : ça couvre fetch, async/await et la gestion des erreurs.

Pousse chaque projet sur GitHub, même les petits. Dans quelques mois, tu verras comment ton code a changé, et les dépôts deviennent le début d'un portfolio. On couvre le chemin de l'apprentissage jusqu'au premier emploi dans comment devenir développeur.

Comment s'entraîner efficacement

De courtes séances quotidiennes marchent le mieux : 20 à 30 minutes par jour créent l'habitude mieux qu'un marathon hebdomadaire. Teste chaque nouveau sujet dans du code tout de suite, modifie les exemples, casse-les volontairement et observe ce qui se passe. Tape le code à la main plutôt que de le copier-coller, car ça te fait remarquer les détails. Si tu arrives à expliquer à un ami ou à un canard en plastique ce que fait ta fonction, c'est que tu la comprends. Un plan hebdomadaire et des façons de rester motivé sont dans comment apprendre à coder.

Erreurs fréquentes de débutant

• Confondre = et ===. Un seul = assigne, et === compare. La condition if (score = 10) est toujours vraie et écrase en plus le score.
• Se contenter de regarder des cours. Après chaque leçon, écris quelque chose toi-même, même dix lignes.
• Sauter les bases. Sans un JavaScript solide, React ressemble à de la magie et chaque erreur à une énigme.
• Oublier await. Tu obtiens alors un objet Promise { <pending> } au lieu des données.
• Copier du code d'IA sans le comprendre. Au stade des bases, demande à l'assistant des explications plutôt que des solutions toutes faites.

Et après : TypeScript, React et Node.js

L'étape suivante a du sens une fois que tu écris des fonctions, traites des tableaux d'objets et récupères des données sans antisèche. Tu as alors trois directions naturelles.

React est une bibliothèque pour construire des interfaces à partir de composants, où tu travailles avec les props, le state et les hooks. C'est le choix naturel pour le frontend. Dans CodeWorlds, c'est enseigné dans le monde Mission spatiale, qui suppose que tu connais les bases de JavaScript.

TypeScript ajoute des types vérifiés avant l'exécution du code et attrape une bonne partie des erreurs avant qu'elles n'atteignent le navigateur. Tu peux apprendre les annotations de base juste après JavaScript, même si, quand l'objectif est les interfaces, React vient généralement d'abord, et TypeScript s'ajoute une fois que les composants et le state cessent de te surprendre. Évite juste d'apprendre TypeScript avant le langage lui-même.

La troisième direction est le travail backend sur Node.js : serveurs, API et bases de données, puis plus tard des frameworks qui combinent frontend et backend, comme Next.js.

S'entraîner avec CodeWorlds

Dans CodeWorlds, le JavaScript depuis zéro est enseigné dans le monde Parc Jurassique, un cours niveau débutant avec plus de 600 exercices et environ 60 à 90 heures d'apprentissage. Le programme couvre les variables et les fonctions, les tableaux, les objets, le DOM et le code asynchrone, puis les classes, les modules et les bases de TypeScript. Ses leçons ont un éditeur intégré avec un aperçu en direct, et toutes les leçons liées dans cet article viennent de ce cours.

Tu peux lire les leçons de ce cours gratuitement sur le site, tandis que ses exercices dans l'application demandent le plan premium. Le plan gratuit couvre le cours HTML et CSS dans l'application et te donne 10 unités de carburant par jour, et le carburant est simplement une limite quotidienne d'exercices, qui convient bien au rythme de courtes séances quotidiennes décrit plus haut. Les points d'expérience, les niveaux et les séries de jours d'apprentissage t'aident à rester motivé.

FAQ

JavaScript est-il difficile pour les débutants ?

Pas plus difficile que d'autres langages, et plus facile à démarrer, car un navigateur et un éditeur suffisent. La conversion de types et le code asynchrone causent le plus de problèmes, mais tu maîtriseras les deux en exécutant chaque exemple plutôt qu'en te contentant de le lire.

Combien de temps faut-il pour apprendre JavaScript ?

Les bases, c'est-à-dire les variables, les fonctions, les tableaux, les objets et le DOM, prennent en général un à trois mois de courtes séances quotidiennes. Construire des applications React avec aisance demande le plus souvent six mois à un an.

JavaScript ou Python pour commencer ?

Les deux sont de bons choix. JavaScript gagne si tu veux faire des sites et des applications web, car tu vois les résultats dans le navigateur tout de suite. Python est plus répandu chez les personnes qui apprennent à coder : dans l'enquête Stack Overflow de 2025, 72 % d'entre elles l'utilisaient, contre 63 % pour JavaScript. Choisis selon ce que tu veux construire.

Peut-on apprendre JavaScript gratuitement ?

Oui. Le guide JavaScript de MDN et le tutoriel javascript.info sont gratuits, même s'ils sont en anglais. Sur CodeWorlds, tu peux lire gratuitement les leçons du cours JavaScript en français, car elles sont accessibles publiquement, mais les exercices de ce cours dans l'application demandent le plan premium. Le plan gratuit couvre le cours HTML et CSS dans l'application avec une limite de 10 unités de carburant par jour.

Quel projet construire en premier ?

Quelque chose de petit et utile : un compteur de clics, une liste de tâches ou un quiz simple. Ces projets font pratiquer en même temps les variables, les fonctions et le DOM, et tu les termines en une ou deux soirées. Un petit projet terminé apprend plus qu'un projet ambitieux abandonné.