Apprendre JavaScript en 2026 : les bases, un plan de 10 semaines et les ressources gratuites

L’essentiel en une minute

Apprendre JavaScript en 2026 demande trois outils gratuits (un navigateur, VS Code et Node.js) et une progression dans le bon ordre : le langage d’abord, la page web ensuite, le code asynchrone en dernier. Ce guide suit cet ordre, avec la sortie exacte de chaque exemple.

Tous les exemples non graphiques ont été exécutés avec Node.js avant publication, et l’exemple de page web a été exécuté dans un navigateur Chromium. Les chiffres viennent de sources lues le 30 octobre 2026, notamment l’enquête Stack Overflow 2026, le site officiel de Node.js et la documentation de MDN. Si vous hésitez encore entre deux langages, notre guide pour apprendre Python suit le même format.

Points clés

• JavaScript est le langage le plus utilisé de l’enquête Stack Overflow 2026, par 62,0 % des répondants à la question, comme dans les éditions précédentes.
• Installez la version LTS de Node.js proposée par nodejs.org : la 26.13.0 au 30 octobre 2026.
• Apprenez dans cet ordre : variables, conditions, boucles, fonctions, tableaux et objets, puis le DOM, puis fetch et async/await, puis les modules.
• Quatre pièges classiques du débutant : == au lieu de ===, var, la valeur de this et l’ordre d’exécution du code asynchrone.
• Passez à TypeScript et à un framework quand vous savez écrire une petite application sans tutoriel, pas avant.

---

Pourquoi apprendre JavaScript en 2026

JavaScript reste le langage que le plus de développeurs utilisent. Dans l’enquête Stack Overflow 2026, 62,0 % des 14 099 personnes qui ont répondu à la question sur les langages disent avoir beaucoup travaillé en JavaScript au cours de l’année. Il arrive en tête (Stack Overflow Developer Survey 2026, consulté le 30 octobre 2026), comme dans les éditions précédentes : l’édition 2023 parlait déjà de sa onzième année consécutive à la première place (Stack Overflow Developer Survey 2023).

TypeScript, une surcouche de JavaScript, est sixième avec 43,8 % : apprendre JavaScript, c’est aussi préparer TypeScript.

L’enquête a été menée du 23 juin au 5 août 2026 et compte 30 903 réponses valides venues de 169 pays (méthodologie de l’enquête). Elle mesure les habitudes des personnes qui la remplissent, pas l’ensemble du marché.

Un autre indicateur donne une image différente. Selon le rapport Octoverse de GitHub, TypeScript est devenu en août 2025 le langage le plus utilisé sur GitHub en nombre de contributeurs mensuels, avec 2 636 006 contributeurs, contre 2,15 millions pour JavaScript (GitHub Octoverse, 28 octobre 2025). Les deux mesures ne comptent pas la même chose : l’enquête recueille un usage déclaré par des développeurs, Octoverse compte les contributeurs actifs sur GitHub, où les projets récents sont souvent écrits en TypeScript.

---

Ce qu’il faut installer

Trois logiciels gratuits suffisent, et le premier est déjà sur votre machine.

Le navigateur. Ouvrez les outils de développement avec F12 (Cmd+Option+J dans Chrome sur macOS), puis l’onglet Console. Tapez 2 + 2 et Entrée : vous venez d’exécuter du JavaScript.

VS Code. La FAQ de l’éditeur indique qu’il est gratuit pour un usage privé ou commercial et qu’il fonctionne sous Windows, macOS et Linux (FAQ de VS Code, consultée le 30 octobre 2026). Pour comparer, voyez notre comparatif des meilleurs IDE et éditeurs de code. Pour bien l’équiper, notre sélection d’extensions VS Code suffit : n’en installez pas vingt le premier jour.

Node.js. La page de téléchargement propose par défaut la version 26.13.0, étiquetée LTS. La branche 26 est passée en LTS le 28 octobre 2026, et le site officiel précise que les applications en production ne devraient utiliser que des versions LTS (versions de Node.js, consulté le 30 octobre 2026).

Une version déjà installée peut suffire pour débuter. Les branches 22 et 24 sont encore maintenues, jusqu’au 30 avril 2027 et au 30 avril 2028 selon le calendrier officiel ; la 24 est passée en maintenance le 20 octobre 2026. Le cycle change aussi : le projet a annoncé qu’à partir de Node.js 27, il publierait une version majeure par an au lieu de deux, et que chaque version deviendrait LTS (blog de Node.js).

Vérifiez l’installation dans un terminal :

node --version
# -> v26.13.0 si vous avez installé la LTS actuelle

---

Les bases du langage, avec des exemples exécutés

Chaque bloc ci-dessous tient dans un fichier, par exemple essai.js, que vous lancez avec node essai.js. Le commentaire // -> indique la sortie obtenue.

Variables : let et const

Utilisez const par défaut et let quand la valeur doit changer. Le mot-clé var existe encore, mais il est source d’erreurs (voir plus bas).

const prenom = "Inès";
let score = 10;
score = score + 5;
console.log(`${prenom} a ${score} points`); // -> Inès a 15 points

Les accents graves délimitent un gabarit de chaîne : ${...} y insère une valeur.

Les types

JavaScript a des types (nombre, chaîne, booléen, undefined, null, objet), mais il les convertit tout seul, ce qui surprend.

console.log(typeof 42, typeof "42", typeof true); // -> number string boolean
console.log(typeof undefined, typeof null);       // -> undefined object
console.log(typeof 10n, typeof Symbol("id"));   // -> bigint symbol
console.log("5" + 3, "5" - 3, Number("5") + 3);   // -> 53 2 8
console.log(0.1 + 0.2);                           // -> 0.30000000000000004

Les types bigint (grands entiers) et symbol (identifiants uniques) existent aussi, mais un débutant les croise rarement. typeof null qui renvoie object est une bizarrerie historique. Le + colle les chaînes au lieu d’additionner : convertissez avec Number() les valeurs saisies par un utilisateur.

Les conditions

const age = 17;
if (age >= 18) {
  console.log("Accès autorisé");
} else if (age >= 16) {
  console.log("Accès avec autorisation parentale"); // -> s'affiche
} else {
  console.log("Accès refusé");
}
const statut = age >= 18 ? "majeur" : "mineur";
console.log(statut); // -> mineur

La dernière ligne utilise l’opérateur ternaire, utile pour choisir entre deux valeurs.

Les boucles

for (let i = 1; i <= 3; i++) {
  console.log(`Tour ${i}`); // -> Tour 1, Tour 2, Tour 3 (une ligne par valeur)
}
const langages = ["JavaScript", "Python", "Go"];
for (const langage of langages) {
  console.log(langage.toUpperCase()); // -> JAVASCRIPT, PYTHON, GO (une ligne par valeur)
}

for...of parcourt les valeurs d’un tableau. C’est la boucle à préférer pour une liste.

Fonctions et fonctions fléchées

function prixTTC(prixHT, taux = 0.2) {
  return prixHT * (1 + taux);
}
const double = (x) => x * 2;

console.log(prixTTC(100));                  // -> 120
console.log(prixTTC(100, 0.055).toFixed(2)); // -> 105.50
console.log(double(21));                    // -> 42

taux = 0.2 est une valeur par défaut. La fonction fléchée (x) => x * 2 est une écriture courte, très utilisée avec les tableaux. MDN détaille ses différences avec une fonction classique, notamment pour this (fonctions fléchées sur MDN).

Tableaux et objets

const article = { titre: "Apprendre JavaScript", vues: 120, publie: true };
console.log(article.titre, article["vues"]); // -> Apprendre JavaScript 120

const notes = [12, 15, 8, 17];
const reussies = notes.filter((note) => note >= 10);
const bonus = notes.map((note) => note + 1);
const moyenne = notes.reduce((somme, note) => somme + note, 0) / notes.length;
console.log(reussies, bonus, moyenne); // -> [ 12, 15, 17 ] [ 13, 16, 9, 18 ] 13

const { titre, vues } = article;
console.log(`${titre} : ${vues} vues`); // -> Apprendre JavaScript : 120 vues

filter, map et reduce remplacent la plupart des boucles sur des listes ; la déstructuration extrait des propriétés en une ligne. Ces trois méthodes reviennent dans presque tout le code moderne : passez du temps dessus.

---

JavaScript dans la page : DOM et événements

Le DOM est la représentation de la page HTML que JavaScript peut lire et modifier. Créez un fichier index.html et ouvrez-le dans le navigateur :

<button id="bouton">Cliquer</button>
<p id="compteur">0 clic</p>
<script>
  const bouton = document.querySelector("#bouton");
  const texte = document.querySelector("#compteur");
  let clics = 0;
  bouton.addEventListener("click", () => {
    clics++;
    texte.textContent = `${clics} clic${clics > 1 ? "s" : ""}`;
  });
</script>

Après trois clics, le paragraphe affiche « 3 clics ». MDN l’explique dans son introduction au DOM et sa page sur addEventListener.

Ce code ne fonctionne pas dans Node.js : document n’existe que dans le navigateur.

---

Le code asynchrone : fetch, async et await

Une requête réseau prend du temps, et JavaScript n’attend pas : il continue d’exécuter la suite. async et await permettent d’écrire ce code dans l’ordre où on le lit. Fichier tache.mjs :

async function chargerTache(id) {
  const reponse = await fetch(`https://jsonplaceholder.typicode.com/todos/${id}`);
  if (!reponse.ok) {
    throw new Error(`Erreur HTTP ${reponse.status}`);
  }
  return reponse.json();
}

try {
  const tache = await chargerTache(1);
  console.log(tache.id, tache.title, tache.completed); // -> 1 delectus aut autem false
} catch (erreur) {
  console.error("Échec :", erreur.message);
}

fetch ne lève pas d’erreur sur une réponse 404 : il faut tester reponse.ok. Le try...catch attrape les pannes réseau. Et await hors d’une fonction n’est accepté que dans un module, d’où l’extension .mjs. Le guide Utiliser l’API Fetch de MDN va plus loin.

Quand vous saurez consommer une API, l’étape suivante est d’en écrire une. Notre tutoriel pour créer une API REST avec Node.js et Express part exactement de ce niveau.

---

Organiser son code en modules

Un module est un fichier qui exporte des fonctions ou des valeurs, et que d’autres fichiers importent. Deux fichiers dans le même dossier :

// calcul.mjs
export function somme(a, b) {
  return a + b;
}
export const TVA = 0.2;

// main.mjs
import { somme, TVA } from "./calcul.mjs";
console.log(somme(2, 3), TVA); // -> 5 0.2

node main.mjs affiche 5 0.2. Dans un navigateur, la balise doit porter type="module", et la page doit être servie par un serveur local, par exemple l’extension Live Server de VS Code ou npx serve. Le guide des modules de MDN prévient qu’un fichier HTML ouvert directement (adresse file://) provoque des erreurs CORS.

---

Un plan réaliste en 10 semaines

Ce plan suppose environ une heure par jour. Les durées sont une proposition de notre part, pas une mesure : nous n’avons trouvé aucune étude fiable sur le temps nécessaire pour apprendre JavaScript.

Et en 30 jours ? Prenons un défi connu, 30 Days of JavaScript, publié sur GitHub par Asabeneh Yetayeh, en anglais. Ses jours 1 à 20 couvrent les types, les conditions, les boucles, les fonctions, les objets, les classes, JSON et les promesses ; les jours 21 à 23 le DOM et les événements ; les suivants sont des mini-projets. Son auteur prévient lui-même que le défi peut prendre plus de 100 jours et invite à suivre son propre rythme (notre traduction). Ses 23 premiers jours couvrent donc à peu près les semaines 1 à 7 de notre plan.

De A à Z ? Personne ne connaît tout JavaScript. Le bon critère est pratique : savoir construire seul les livrables des semaines 4 à 6 sans copier un tutoriel. Les projets des semaines 9 et 10 alimentent ensuite votre portfolio de développeur.

Pour la méthode générale (exercices, notes, projets), notre guide Python et ses exercices corrigés proposent une démarche qui se transpose telle quelle à JavaScript.

---

Les ressources gratuites en français

Vous pouvez apprendre JavaScript gratuitement et en français : les ressources ci-dessous ont été ouvertes le 30 octobre 2026.

Quelques précisions. La page de MDN suppose que vous connaissez HTML et CSS et indique que la traduction est communautaire. OpenClassrooms a mis à jour son cours le 29 juillet 2025.

Grafikart annonce rendre « un maximum de contenu gratuit et public » et vend un abonnement Premium à 5 € par mois ou 50 € par an, qui donne entre autres accès à des vidéos réservées (page Premium de Grafikart). La page de la formation n’indique pas lesquelles le sont.

En anglais, le cours Learn JavaScript de web.dev, publié par Google, couvre les types, les fonctions, les objets, les collections et les classes. Pour les PDF « JavaScript de A à Z » qui remontent dans les résultats de recherche, vérifiez qu’un auteur et une date sont indiqués avant de vous y fier.

---

Les 4 erreurs classiques du débutant

Ces quatre pièges reviennent souvent chez les débutants. Chaque sortie ci-dessous a été obtenue en exécutant le code.

1. Comparer avec == au lieu de ===

L’opérateur == convertit les types avant de comparer, === non.

console.log(0 == "", 0 == "0", "" == "0");     // -> true true false
console.log(0 === "", null == undefined, null === undefined); // -> false true false

Avec ==, 0 égale "" et "0", mais "" n’égale pas "0" : la relation n’est même pas cohérente. Utilisez toujours === et !== (égalité stricte sur MDN).

2. Utiliser var

var a une portée de fonction, pas de bloc. Dans une boucle, toutes les itérations partagent la même variable :

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log("var :", i), 0); // -> var : 3, var : 3, var : 3 (une ligne par valeur)
}
for (let j = 0; j < 3; j++) {
  setTimeout(() => console.log("let :", j), 0); // -> let : 0, let : 1, let : 2 (une ligne par valeur)
}

Avec let, chaque tour a sa propre variable. Il n’y a plus de raison d’écrire var dans du code neuf (let sur MDN).

3. Perdre la valeur de this

Dans une fonction classique ou une méthode, this dépend de la façon dont la fonction est appelée, pas de l’endroit où elle est écrite. Une fonction fléchée, elle, garde le this de l’endroit où elle est écrite.

"use strict";
const compteur = {
  valeur: 0,
  incrementer() {
    this.valeur++;
    return this.valeur;
  },
};
console.log(compteur.incrementer()); // -> 1
const detachee = compteur.incrementer;
// detachee(); // ligne commentée exprès, elle lève :
// TypeError: Cannot read properties of undefined (reading 'valeur')
const liee = compteur.incrementer.bind(compteur);
console.log(liee()); // -> 2

La méthode copiée dans une variable a perdu son objet ; bind le lui rend. À l’inverse, une fonction fléchée passée à forEach ou à setTimeout à l’intérieur d’une méthode garde le this de cette méthode. Le cas se produit surtout avec les gestionnaires d’événements et les fonctions de rappel (this sur MDN).

4. Mal lire l’ordre du code asynchrone

console.log("A. début du script");
setTimeout(() => console.log("D. minuteur"), 0);
Promise.resolve().then(() => console.log("C. promesse"));
console.log("B. fin du script");

La sortie est A, B, C, D, même avec un délai de 0 ms. Le code synchrone passe d’abord, puis les promesses, puis les minuteurs. Retenez qu’une valeur obtenue avec await n’existe pas avant la ligne qui l’attend.

---

Quand passer à TypeScript et à un framework

Passez à TypeScript quand vos projets dépassent quelques fichiers et que vous perdez du temps sur des erreurs de type. TypeScript ajoute des annotations de type à JavaScript, vérifiées avant l’exécution. Sa documentation en français propose un tutoriel de cinq minutes pour qui connaît déjà JavaScript.

Node.js facilite la transition. Depuis la version 22.18.0, il exécute un fichier .ts sans option, à condition que le code n’utilise que la syntaxe TypeScript effaçable, comme les annotations et les interfaces. Il ne vérifie pas les types : la documentation recommande de lancer npx tsc --noEmit à part (TypeScript dans Node.js, consulté le 30 octobre 2026).

Pour un framework (React, Vue, Svelte), notre critère est simple : vous devez savoir écrire la liste de tâches de la semaine 5 avec le DOM, sans aide. Sinon, les erreurs du framework resteront opaques.

---

Ce que nous n’avons pas pu vérifier

Points incertains ou non testés :

• Les exemples sous Node.js 26. Ils ont été exécutés avec Node.js 22.15.0, la version installée sur notre poste, et non avec la 26.13.0 recommandée. Ils n’utilisent que des fonctions standard présentes dans les deux versions.
• Le statut gratuit de chaque vidéo de Grafikart. La page Premium mentionne des vidéos réservées sans dire lesquelles.
• La durée d’apprentissage. Le plan de 10 semaines est une proposition éditoriale. Nous n’avons trouvé aucune étude fiable sur le temps nécessaire pour apprendre JavaScript.
• La représentativité de l’enquête Stack Overflow. Ses 30 903 réponses viennent de personnes qui fréquentent Stack Overflow ; elles ne décrivent pas tout le marché, ni la France en particulier.
• Le nombre d’années consécutives en tête. La page 2026 de Stack Overflow parle d’une « 12e année consécutive », mot pour mot comme l’édition 2025, alors que l’édition 2023 parlait déjà de la onzième. Nous n’avons pas retenu ce décompte.
• La complétude des traductions françaises de MDN et de javascript.info : certaines pages peuvent être moins à jour que leur version anglaise.

---

Questions fréquentes

Peut-on apprendre JavaScript gratuitement ?

Oui. Le parcours Premiers pas en JavaScript de MDN, le cours d’OpenClassrooms en libre accès et le tutoriel javascript.info sont gratuits et en français. Les outils le sont aussi : VS Code, Node.js et le navigateur.

Combien de temps faut-il pour apprendre JavaScript ?

Aucune étude fiable ne donne de durée. Notre plan propose 10 semaines, à raison d’une heure par jour, jusqu’à une première application complète.

Faut-il apprendre HTML et CSS avant JavaScript ?

Pour le web, oui, au moins les bases : le parcours de MDN les suppose acquises. Pour du JavaScript côté serveur avec Node.js, ce n’est pas nécessaire, et vous pouvez commencer par la console.

Quelle version de Node.js installer en 2026 ?

La version LTS proposée par nodejs.org, soit la 26.13.0 au 30 octobre 2026. Les branches 22 et 24 restent maintenues jusqu’en avril 2027 et avril 2028.

---

À propos de l’auteur

Abdelilah Ourti est ingénieur IA et architecte logiciel. Il conçoit et déploie des applications web et des systèmes d’IA, et publie sur NeurauTech des guides et des comparatifs destinés aux développeurs francophones. Ses autres articles sont réunis sur sa page auteur.

Méthode. Synthèse fondée sur des sources publiques : enquête Stack Overflow 2026, rapport Octoverse de GitHub, site et calendrier officiels de Node.js, documentation de MDN, de VS Code et de TypeScript, pages des cours cités. Les exemples de code ont été exécutés avec Node.js 22.15.0 et l’exemple de page web dans le navigateur Chromium 120 ; les sorties affichées sont celles obtenues. Aucun cours n’a été suivi en entier, aucun lien n’est affilié et aucune relation commerciale ne lie l’auteur aux plateformes mentionnées.

Une erreur ou un lien périmé ? Écrivez à [email protected] : l’article sera corrigé et la date de mise à jour modifiée.

Dernière mise à jour : 30 octobre 2026.

Images : Gabriel Heinzer et Markus Spiske (Unsplash License).