Apprendre JavaScript : le guide pour débutants (cours gratuit, exemples et plan en 30 jours)

JavaScript est le seul langage de programmation que tous les navigateurs exécutent nativement. Apprendre JavaScript, c’est donc apprendre à rendre une page web vivante : réagir à un clic, valider un formulaire, charger des données sans recharger la page. Ce guide est la porte d’entrée du tutoriel JavaScript de Gekkode : il vous dit par où commencer, dans quel ordre avancer, combien de temps prévoir et comment vérifier que vous progressez.

Il s’adresse aux débutants complets comme aux personnes qui ont déjà copié-collé du JavaScript sans vraiment le comprendre. Aucun prérequis en programmation n’est nécessaire. Le cours est gratuit, en français, et chaque chapitre se termine par un exercice.

Pourquoi apprendre JavaScript aujourd’hui

Trois raisons pratiques, sans discours marketing :

• Il est partout sur le web. Un site vitrine, une boutique en ligne, une application métier : dès qu’une page fait autre chose qu’afficher du texte, il y a du JavaScript derrière. C’est le langage du navigateur, et le navigateur est l’environnement d’exécution le plus répandu au monde.
• Il ne s’arrête pas au navigateur. Avec Node.js, le même langage écrit des serveurs, des outils en ligne de commande et des scripts d’automatisation. Vous n’apprenez pas un langage pour le front et un autre pour le reste.
• La boucle d’apprentissage est immédiate. Vous écrivez trois lignes, vous rechargez la page, vous voyez le résultat. Pas de compilation, pas d’installation compliquée : un fichier texte et un navigateur suffisent pour commencer.

Les assistants de code ont changé une chose : ils écrivent vite du JavaScript passable. Ils n’ont rien changé au fait qu’il faut comprendre ce code pour le corriger, le relire et le faire évoluer. Les bases restent le meilleur investissement.

Ce qu’il faut savoir avant de commencer

Le strict nécessaire, rien de plus :

• Un peu de HTML et de CSS. Savoir ce qu’est une balise, un attribut, une classe. Si ce n’est pas le cas, une journée sur les bases du HTML suffit pour suivre ce cours, vous n’avez pas besoin de maîtriser la mise en page.
• Un éditeur de code. Visual Studio Code est gratuit et coloré le JavaScript sans réglage. N’importe quel éditeur de texte brut fonctionne aussi.
• Un navigateur récent avec sa console de développement (touche F12). La console est votre premier outil : elle affiche les résultats et surtout les erreurs, avec le numéro de la ligne fautive.

Vous n’avez pas besoin d’installer Node.js, npm ou un framework pour les douze chapitres. Ces outils arrivent quand vous savez déjà programmer.

Le cours pas à pas : douze chapitres dans l’ordre

Le programme suit une progression volontaire : chaque chapitre n’utilise que ce que les précédents ont introduit. Comptez vingt à quarante minutes par chapitre, exercice compris.

1. Introduction à JavaScript : où placer un script dans une page HTML, la balise script, un premier « Hello World » et la console.
2. Variables et types de données : let, const, chaînes, nombres, booléens, undefined et null.
3. Opérateurs et expressions : arithmétique, comparaison (=== plutôt que ==), logique, concaténation et gabarits de chaîne.
4. Les conditions : if, else, switch et l’opérateur ternaire.
5. Les boucles : for, while, for…of et forEach sur les tableaux.
6. Les fonctions : déclaration, paramètres, valeur de retour, fonctions fléchées et portée des variables.
7. Les objets : créer, lire, modifier, parcourir et supprimer des propriétés.
8. L’objet Math : arrondis, nombres aléatoires, minimum et maximum.
9. Manipuler la page HTML : sélectionner un élément, changer son texte, ses classes, créer et supprimer des éléments (le DOM).
10. Les événements : réagir à un clic, à une saisie, à l’envoi d’un formulaire avec addEventListener.
11. Les modules ES6 : découper le code en fichiers avec import et export.
12. Projet final : un jeu de devinette : tout ce qui précède, assemblé dans un petit jeu jouable dans le navigateur.

Le sommaire complet, avec votre progression, reste visible dans la colonne de gauche de chaque chapitre.

Votre premier programme JavaScript, commenté

Avant le chapitre 1, voici à quoi ressemble un programme JavaScript complet. Ne cherchez pas à tout comprendre : repérez seulement les cinq idées que le cours va détailler.

// 1. Des données : un tableau d'objets
const panier = [
  { nom: 'Clavier', prix: 49.9, quantite: 1 },
  { nom: 'Souris', prix: 19.5, quantite: 2 },
];

// 2. Une fonction : un calcul réutilisable
function totalHT(articles) {
  let total = 0;
  for (const article of articles) {        // 3. Une boucle
    total += article.prix * article.quantite;
  }
  return total;
}

// 4. Une condition
const ht = totalHT(panier);
const fraisDePort = ht >= 50 ? 0 : 4.9;

// 5. Un affichage
console.log(`Total HT : ${ht.toFixed(2)} €`);
console.log(`Frais de port : ${fraisDePort.toFixed(2)} €`);
console.log(`Total TTC : ${((ht + fraisDePort) * 1.2).toFixed(2)} €`);

Résultat dans la console :

Total HT : 88.90 €
Frais de port : 0.00 €
Total TTC : 106.68 €

Des données, une fonction, une boucle, une condition, un affichage : tout programme, même immense, est fait de ces briques. Le chapitre 2 commence par la première, les variables.

Un plan d’apprentissage sur trente jours

Ce plan suppose une heure par jour, cinq jours par semaine. Il n’a rien d’obligatoire : c’est un rythme qui laisse le temps de pratiquer sans oublier ce qu’on a vu la veille.

Deux règles rendent ce plan efficace : refaire l’exercice du chapitre précédent avant d’ouvrir le suivant, et écrire chaque exemple soi-même plutôt que de le copier.

Cinq exercices pour débutants

À faire dans la console du navigateur ou dans un fichier exercices.js. Les solutions utilisent uniquement les chapitres 1 à 7.

1. Convertisseur : écrire une fonction celsiusVersFahrenheit(c) qui renvoie la température convertie (formule : c * 9 / 5 + 32). Vérifier que celsiusVersFahrenheit(100) renvoie 212.
2. Pair ou impair : pour chaque nombre de 1 à 20, afficher « pair » ou « impair » dans la console. Indice : l’opérateur % donne le reste d’une division.
3. Le plus grand : écrire maximum(tableau) qui renvoie la plus grande valeur d’un tableau de nombres, sans utiliser Math.max.
4. Compter les voyelles : écrire compterVoyelles(texte), « JavaScript » doit donner 3.
5. Carnet d’adresses : créer un tableau de trois objets { nom, ville }, puis afficher une phrase par personne avec un gabarit de chaîne.

Corrigé des exercices 1, 3 et 4 :

function celsiusVersFahrenheit(c) {
  return c * 9 / 5 + 32;
}
console.log(celsiusVersFahrenheit(100)); // 212

function maximum(tableau) {
  let max = tableau[0];
  for (const valeur of tableau) {
    if (valeur > max) {
      max = valeur;
    }
  }
  return max;
}
console.log(maximum([3, 17, 8, 42, 5])); // 42

function compterVoyelles(texte) {
  let total = 0;
  for (const lettre of texte.toLowerCase()) {
    if ('aeiouy'.includes(lettre)) {
      total += 1;
    }
  }
  return total;
}
console.log(compterVoyelles('JavaScript')); // 3

Si l’exercice 3 vous a résisté, c’est normal : il demande de garder une valeur en mémoire pendant une boucle. C’est exactement la compétence que le chapitre 5 installe.

Combien de temps pour apprendre JavaScript ?

La question revient à chaque démarrage, et la réponse honnête dépend de ce qu’on appelle « apprendre » :

• Lire et modifier un script existant : une à deux semaines à une heure par jour.
• Écrire seul un petit programme interactif (formulaire, calculette, jeu simple) : trois à quatre semaines, c’est l’objectif de ce cours.
• Être autonome sur un projet réel, avec des données distantes et un framework : plusieurs mois de pratique régulière.

Ce qui fait la différence n’est pas le nombre d’heures mais leur régularité. Trente minutes chaque jour valent mieux que quatre heures le dimanche.

JavaScript, Python ou TypeScript ?

Python est plus simple à lire au tout début et excellent pour les données et les scripts. Mais si votre objectif est le web, JavaScript est incontournable : aucun autre langage ne s’exécute dans le navigateur. Les deux ne s’excluent pas, commencez par celui qui correspond à ce que vous voulez construire.

TypeScript est JavaScript avec des types. Il s’apprend après, pas à la place : tout ce que vous verrez ici reste valable en TypeScript, et les types se comprennent bien mieux une fois que l’on a rencontré les erreurs qu’ils préviennent.

Ressources gratuites pour continuer

• La documentation MDN, en français : la référence à garder ouverte, chaque méthode y est expliquée avec des exemples.
• javascript.info, en anglais : le cours en ligne le plus complet, utile dès que vous voulez approfondir un point.
• Les articles JavaScript de Gekkode pour la suite : les classes, bind, call et apply, convertir une chaîne en nombre, valider un e-mail avec une regex.
• Et quand le langage est acquis, le tutoriel Vue 3 pour découvrir un framework.

Pour une méthode de travail, l’article 5 conseils pour apprendre efficacement complète ce guide.

Questions fréquentes

Faut-il installer quelque chose ? Non. Un éditeur de texte et un navigateur suffisent pour les douze chapitres.

Java et JavaScript, c’est pareil ? Non. Ce sont deux langages sans rapport, le nom est un accident historique de 1995.

Peut-on apprendre JavaScript sans connaître HTML ? Les chapitres 1 à 8 ne demandent presque aucun HTML. À partir du chapitre 9, savoir lire une page HTML devient nécessaire.

Quel navigateur utiliser ? Chrome, Firefox, Edge ou Safari dans une version récente. Tous ont une console de développement et exécutent le JavaScript moderne de ce cours.

Par où commencer ? Par le chapitre 1, Introduction à JavaScript : vingt minutes pour afficher votre premier message dans une page web.