Apprendre JavaScript : variables, conditions, fonctions et DOM pour rendre vos pages interactives

Q: Quelle est la différence entre Java et JavaScript ?

Ce sont deux langages distincts malgré leur nom. JavaScript s'exécute principalement dans le navigateur pour rendre les pages interactives, et côté serveur avec Node.js. Java est un langage compilé, fortement typé, utilisé surtout pour les applications d'entreprise et Android. La ressemblance de nom relève d'un choix marketing des années 1990, pas d'une parenté technique.

Thématique: Développement web & mobile
Mis à jour: 26 septembre 2026
Lecture: 12 min
Formation: Cours JavaScript : Maîtriser les bases du développement

L'essentiel en 30 secondes

Pour apprendre JavaScript, un navigateur et un éditeur de code suffisent : la console des outils de développement (F12) exécute votre code instantanément.
Les bases de JavaScript tiennent en six notions : variables, types de données, tableaux, conditions, boucles et fonctions.
On déclare ses variables avec const par défaut et let si la valeur doit changer ; le mot-clé var est à éviter dans le code moderne.
Le DOM est la représentation de la page HTML que JavaScript peut lire et modifier, par exemple avec querySelector et addEventListener.
JavaScript s'apprend après HTML et CSS, et ouvre ensuite la voie à TypeScript, React ou Node.js.

Sommaire de l'article

Qu’est-ce que JavaScript ?
Pourquoi apprendre JavaScript ?
Les outils pour coder en JavaScript
Les bases de JavaScript : les étapes pour écrire vos premiers scripts
Mini-projet : une liste de tâches en JavaScript
Bonnes pratiques pour écrire un JavaScript propre
Les erreurs fréquentes des débutants en JavaScript
JavaScript, TypeScript ou Python : quel langage pour quel usage ?
Comment apprendre JavaScript efficacement ?
En résumé

Apprendre JavaScript, c’est acquérir le langage qui rend les pages web interactives : un menu qui s’ouvre, un formulaire qui se vérifie avant l’envoi, un panier qui se met à jour sans recharger la page. Les bases s’apprennent en quelques semaines, avec pour seuls outils un navigateur et un éditeur de code gratuit.

Ce guide s’adresse aux débutants qui n’ont jamais programmé, ainsi qu’à ceux qui connaissent HTML et CSS et veulent passer à l’étape suivante. Vous y apprendrez à utiliser la console, déclarer des variables, manipuler des tableaux, écrire des conditions, des boucles et des fonctions, puis à agir sur votre page grâce au DOM, avec un mini-projet complet pour tout assembler.

Qu’est-ce que JavaScript ?

JavaScript est un langage de programmation exécuté directement par le navigateur. Là où HTML structure le contenu et CSS gère son apparence, JavaScript ajoute le comportement : il réagit aux actions de l’utilisateur, modifie la page, envoie ou récupère des données. C’est aujourd’hui le seul langage que tous les navigateurs comprennent nativement.

Son nom officiel de norme est ECMAScript. Les versions publiées depuis 2015 (souvent appelées ES6 et suivantes) ont apporté la syntaxe moderne que nous utilisons ici : let, const, fonctions fléchées, gabarits de chaînes.

JavaScript ne se limite plus au navigateur. Avec Node.js, il s’exécute aussi côté serveur, dans des outils en ligne de commande ou des applications de bureau. Mais pour apprendre, le navigateur reste le terrain le plus simple et le plus visuel.

Pourquoi apprendre JavaScript ?

JavaScript est présent sur la très grande majorité des sites web. Le connaître vous permet de :

rendre vos pages interactives : onglets, menus déroulants, fenêtres modales, carrousels ;
vérifier un formulaire avant son envoi et afficher des messages d’aide adaptés ;
afficher des données à jour sans recharger la page, en interrogeant une API ;
utiliser les frameworks modernes comme React, Vue ou Angular, qui sont tous écrits en JavaScript ;
automatiser des tâches : scripts Node.js, Google Apps Script pour les feuilles Google, extensions de navigateur ;
acquérir une logique de programmation réutilisable dans n’importe quel autre langage.

En formation, nous voyons souvent des intégrateurs web ou des profils marketing qui se contentent de copier-coller des scripts trouvés en ligne. Comprendre les bases change tout : on sait adapter un script, le corriger et surtout éviter d’ajouter du code inutile qui ralentit le site.

Les outils pour coder en JavaScript

Pas besoin d’installer un environnement complexe. Trois outils suffisent.

La console du navigateur. Appuyez sur F12 (ou clic droit > Inspecter), puis ouvrez l’onglet Console. Tapez 2 + 3 et validez avec Entrée : le résultat s’affiche. Tapez ensuite alert("Bonjour") : une boîte de dialogue apparaît. La console sert à tester une ligne de code et à afficher des informations de débogage avec console.log().

Un éditeur de code. Visual Studio Code est le plus utilisé : gratuit, il colore la syntaxe, complète le code et signale certaines erreurs pendant la saisie. Ajoutez l’extension Live Server pour recharger automatiquement la page à chaque enregistrement.

Un fichier HTML de test. JavaScript agit sur une page : il vous faut donc un fichier index.html minimal. Si vous n’êtes pas encore à l’aise avec sa structure, commencez par notre guide pour apprendre HTML et publier vos premières pages.

Les bases de JavaScript : les étapes pour écrire vos premiers scripts

Étape 1 — Relier un fichier JavaScript à votre page

Créez un dossier contenant index.html et script.js. Dans le HTML, ajoutez la balise de script dans le <head> avec l’attribut defer :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Mes premiers scripts</title>
  <script src="script.js" defer></script>
</head>
<body>
  <h1>Bonjour</h1>
  <button id="bouton">Cliquez-moi</button>
  <p id="message"></p>
</body>
</html>

L’attribut defer indique au navigateur d’exécuter le script après avoir construit la page. Sans lui, un script placé dans le <head> tenterait de manipuler des éléments qui n’existent pas encore.

Dans script.js, écrivez console.log("Le script est chargé");, ouvrez la page puis la console : le message doit apparaître. Ce premier test vérifie que tout est bien relié.

Étape 2 — Stocker des informations dans des variables

Une variable est une boîte nommée qui garde une valeur en mémoire. En JavaScript moderne, on utilise deux mots-clés :

const prenom = "Léa";        // valeur qui ne sera pas réassignée
let age = 28;                // valeur qui peut changer
age = age + 1;

console.log(prenom, age);    // Léa 29
console.log(`${prenom} a ${age} ans.`);  // gabarit de chaîne

Notre conseil : déclarez tout avec const par défaut, et passez à let seulement si vous devez réassigner la variable. Oubliez var, un ancien mot-clé dont la portée est source d’erreurs.

Les types de données de base à connaître :

Type	Exemple	Remarque
Chaîne (`string`)	`"Bonjour"`, `'Paris'`, `Total : ${n}`	Guillemets doubles, simples ou accents graves
Nombre (`number`)	`42`, `3.14`, `-7`	Entiers et décimaux partagent le même type
Booléen (`boolean`)	`true`, `false`	Résultat des comparaisons
Indéfini (`undefined`)	variable déclarée sans valeur	Valeur par défaut
Nul (`null`)	`null`	Absence de valeur voulue
Tableau et objet	`[1, 2, 3]`, `{ nom: "Léa" }`	Structures pour regrouper des données

Attention aux mélanges de types : "5" + 2 donne la chaîne "52", car le + concatène dès qu’une chaîne est présente. Pour convertir une saisie en nombre, utilisez Number("5"). L’opérateur typeof vous indique le type d’une valeur : typeof 42 renvoie "number".

Étape 3 — Organiser ses données avec les tableaux

Un tableau (array) range plusieurs valeurs dans une seule variable, dans un ordre précis. Les positions commencent à 0.

const fruits = ["pomme", "banane", "kiwi"];

console.log(fruits[0]);       // "pomme"
console.log(fruits.length);   // 3

fruits.push("mangue");        // ajoute à la fin
fruits.pop();                 // retire le dernier élément
console.log(fruits.includes("kiwi"));  // true
console.log(fruits.indexOf("banane")); // 1

Même déclaré avec const, un tableau peut être modifié : c’est la variable qui ne peut pas être réassignée, pas son contenu.

Pour décrire un élément avec plusieurs propriétés, on utilise un objet : const produit = { nom: "Stylo", prix: 2.5 };, puis produit.prix pour lire une propriété. Tableaux d’objets et objets forment la base de presque toutes les données manipulées en JavaScript.

Étape 4 — Prendre des décisions avec les conditions

Les conditions permettent d’exécuter un bloc de code seulement si une situation est vraie.

const temperature = 18;

if (temperature >= 25) {
  console.log("Il fait chaud.");
} else if (temperature >= 15) {
  console.log("Il fait doux.");
} else {
  console.log("Il fait frais.");
}

Les opérateurs de comparaison à connaître sont === (strictement égal), !== (différent), <, >, <= et >=. Pour combiner plusieurs conditions : && (et), || (ou) et ! (non).

Utilisez toujours === plutôt que ==. Le double égal convertit les types avant de comparer, si bien que 0 == "" renvoie true, ce qui provoque des bugs difficiles à repérer.

Étape 5 — Répéter des actions avec les boucles

Une boucle répète un bloc tant qu’une condition est vraie. La boucle for classique est idéale quand on connaît le nombre de tours :

for (let i = 1; i <= 5; i++) {
  console.log(`Tour numéro ${i}`);
}

const prix = [12, 8.5, 20];
let total = 0;
for (const p of prix) {
  total += p;
}
console.log(`Total : ${total} €`);  // Total : 40.5 €

let tentatives = 0;
while (tentatives < 3) {
  tentatives++;
  console.log(`Tentative ${tentatives}`);
}

La boucle for...of parcourt directement les valeurs d’un tableau, sans gérer d’indice : c’est souvent la plus lisible. La boucle while convient quand on ne sait pas à l’avance combien de tours seront nécessaires. Vérifiez toujours que sa condition finira par devenir fausse, sinon la page se fige.

Étape 6 — Créer vos propres fonctions

Une fonction regroupe des instructions sous un nom, pour les réutiliser autant de fois que nécessaire. Elle reçoit des paramètres et peut renvoyer un résultat.

function calculerTTC(prixHT, taux = 0.2) {
  return prixHT * (1 + taux);
}

console.log(calculerTTC(100));        // 120
console.log(calculerTTC(100, 0.055)); // 105.5

// Même fonction écrite en fonction fléchée
const calculerTTC2 = (prixHT, taux = 0.2) => prixHT * (1 + taux);

// Arrondir à deux décimales pour l'affichage
console.log(calculerTTC(19.99).toFixed(2)); // "23.99"

Une bonne fonction fait une seule chose et porte un nom qui commence par un verbe : calculerTTC, afficherMessage, verifierEmail. L’objet Math fournit les outils de calcul courants : Math.round(), Math.max(), Math.random().

Les tableaux disposent aussi de méthodes qui prennent une fonction en paramètre et remplacent avantageusement beaucoup de boucles :

const notes = [12, 15, 8, 17];
const doublees = notes.map((n) => n * 2);         // [24, 30, 16, 34]
const reussies = notes.filter((n) => n >= 10);    // [12, 15, 17]
const somme = notes.reduce((acc, n) => acc + n, 0); // 52

Étape 7 — Agir sur la page avec le DOM

Le DOM (Document Object Model) est la représentation de votre page HTML sous forme d’arbre d’objets. JavaScript peut y sélectionner un élément, lire ou modifier son contenu, ses classes et ses attributs, et réagir aux événements.

Reprenons le bouton et le paragraphe de l’étape 1 :

const bouton = document.querySelector("#bouton");
const message = document.querySelector("#message");
let compteur = 0;

bouton.addEventListener("click", () => {
  compteur++;
  message.textContent = `Vous avez cliqué ${compteur} fois.`;

  if (compteur >= 5) {
    bouton.disabled = true;
    message.classList.add("termine");
  }
});

Les méthodes essentielles du DOM tiennent en une courte liste :

document.querySelector() sélectionne le premier élément correspondant à un sélecteur CSS, querySelectorAll() les sélectionne tous ;
textContent lit ou remplace le texte d’un élément ;
classList.add(), remove() et toggle() gèrent les classes CSS, ce qui permet de changer l’apparence sans écrire de style en JavaScript ;
addEventListener() attache une fonction à un événement : click, input, submit, keydown ;
document.createElement() et append() créent et insèrent de nouveaux éléments.

Mini-projet : une liste de tâches en JavaScript

Rien ne vaut un projet qui combine toutes les notions. Voici une liste de tâches minimale, à placer dans votre page :

<form id="formulaire">
  <label for="tache">Nouvelle tâche</label>
  <input id="tache" type="text" required>
  <button type="submit">Ajouter</button>
</form>
<ul id="liste"></ul>
<p id="resume"></p>

Et le script correspondant :

const formulaire = document.querySelector("#formulaire");
const champ = document.querySelector("#tache");
const liste = document.querySelector("#liste");
const resume = document.querySelector("#resume");
const taches = [];

function afficherTaches() {
  liste.innerHTML = "";
  for (const tache of taches) {
    const li = document.createElement("li");
    li.textContent = tache;
    liste.append(li);
  }
  resume.textContent = taches.length === 0
    ? "Aucune tâche pour le moment."
    : `${taches.length} tâche(s) à faire.`;
}

formulaire.addEventListener("submit", (event) => {
  event.preventDefault();          // empêche le rechargement de la page
  const texte = champ.value.trim();
  if (texte === "") return;
  taches.push(texte);
  champ.value = "";
  afficherTaches();
});

afficherTaches();

Ce petit programme mobilise un tableau, une boucle, une condition, une fonction et quatre méthodes du DOM. Pour aller plus loin, ajoutez un bouton de suppression sur chaque tâche, puis sauvegardez la liste avec localStorage.setItem("taches", JSON.stringify(taches)) pour la retrouver au rechargement.

Remarquez l’usage de textContent plutôt que innerHTML pour insérer la saisie de l’utilisateur : innerHTML interpréterait d’éventuelles balises, ce qui ouvre la porte à des injections de code.

Bonnes pratiques pour écrire un JavaScript propre

Nommez clairement vos variables et fonctions, en camelCase : prixTotal, afficherResultat.
Terminez vos instructions par un point-virgule et indentez votre code. Prettier le fait automatiquement dans VS Code.
Séparez les rôles : le HTML dans le HTML, le style dans le CSS, le comportement dans le fichier JavaScript. Évitez les attributs onclick dans le HTML.
Utilisez console.log() pour comprendre, puis retirez ces lignes une fois le problème résolu.
Lisez les messages d’erreur de la console : ils indiquent le fichier, la ligne et la nature du problème.
Versionnez votre code dès vos premiers projets : apprendre Git et GitHub vous permet de revenir en arrière après une erreur et de publier vos réalisations.
Consultez la documentation de référence plutôt que des extraits isolés : MDN Web Docs décrit chaque méthode avec ses exemples et sa compatibilité.

Les erreurs fréquentes des débutants en JavaScript

En formation, ce sont toujours les mêmes messages d’erreur qui apparaissent dans la console. Les voici, avec leur explication.

Erreur ou symptôme	Cause probable	Solution
`Cannot read properties of null`	Le script s’exécute avant que l’élément n’existe, ou le sélecteur est faux	Ajouter `defer` au script, vérifier l’`id` ou la classe ciblée
`x is not defined`	Faute de frappe ou variable déclarée dans un autre bloc	Vérifier l’orthographe et la portée de la variable
`Assignment to constant variable`	Réassignation d’une variable déclarée avec `const`	Utiliser `let` si la valeur doit changer
`"10" + 5` affiche `105`	La saisie d’un champ est toujours une chaîne	Convertir avec `Number()` avant de calculer
La page se recharge à l’envoi du formulaire	Comportement par défaut de l’événement `submit`	Appeler `event.preventDefault()`
Le navigateur se fige	Boucle `while` dont la condition ne devient jamais fausse	Vérifier que la variable testée évolue à chaque tour
Comparaison inattendue	Utilisation de `==` au lieu de `===`	Toujours utiliser l’égalité stricte
Les modifications ne s’affichent pas	Fichier non enregistré ou cache du navigateur	Enregistrer, puis recharger avec Ctrl+F5

JavaScript, TypeScript ou Python : quel langage pour quel usage ?

Débutants et reconvertis se demandent souvent par quel langage commencer. Le choix dépend avant tout de votre objectif.

Critère	JavaScript	TypeScript	Python
Usage principal	Sites et applications web, front-end et back-end	Grands projets JavaScript, applications web d’équipe	Data, automatisation, IA, scripts
Exécution	Navigateur et Node.js	Compilé en JavaScript avant exécution	Interpréteur Python
Typage	Dynamique	Statique, vérifié à la compilation	Dynamique
Premier résultat visible	Immédiat dans le navigateur	Nécessite une étape de compilation	Dans le terminal ou un notebook
Prérequis conseillé	HTML et CSS	JavaScript	Aucun

Si votre objectif est le développement web, JavaScript est un passage obligé. Une fois les bases acquises, apprendre TypeScript sécurise votre code en ajoutant des types, et React avec Next.js vous permet de construire des interfaces complètes. Si vous visez plutôt l’analyse de données ou l’automatisation, notre guide pour apprendre Python sera un meilleur point de départ.

Comment apprendre JavaScript efficacement ?

JavaScript s’apprend en codant, pas en lisant. Voici le parcours que nous conseillons à un débutant :

Semaine 1 : console, variables, types de données, conditions. Écrivez de petits scripts qui affichent des résultats dans la console.
Semaine 2 : tableaux, objets, boucles, fonctions, puis les méthodes map, filter et reduce.
Semaine 3 : le DOM et les événements. Réalisez un compteur, puis la liste de tâches ci-dessus.
Semaine 4 : un projet personnel de A à Z (quiz, convertisseur, calculatrice), puis une introduction aux requêtes fetch et à l’asynchrone.

Avant de commencer, assurez-vous d’avoir des bases en HTML et en CSS pour mettre en forme vos pages : c’est sur elles que vos scripts vont agir.

Pour démarrer avec un cadre clair, le cours vidéo pour apprendre les bases de JavaScript d’EspritAcadémique concentre l’essentiel en 2 h 20, sans aucun prérequis et avec une approche entièrement pratique. Vous y apprendrez à :

choisir et configurer votre éditeur, puis tester votre code dans la console web ;
déclarer des variables et distinguer chaînes de caractères et nombres ;
ranger vos données dans des tableaux et effectuer des calculs ;
écrire des conditions if/else et des boucles for et while ;
créer vos propres fonctions réutilisables ;
rendre une page interactive avec un bouton cliquable, puis construire un script complet lors d’un atelier final.

En résumé

Pour apprendre JavaScript, commencez par la console et un fichier relié à votre page avec defer. Maîtrisez ensuite les six fondamentaux (variables, types, tableaux, conditions, boucles, fonctions), puis le DOM et les événements pour agir sur la page. Pratiquez sur de petits projets complets, lisez les messages d’erreur de la console, et visez l’autonomie sur les bases en trois à quatre semaines avant d’aborder TypeScript ou React.

Questions fréquentes

Combien de temps faut-il pour apprendre JavaScript ?

Comptez deux à quatre semaines de pratique régulière, à raison d'une heure par jour, pour maîtriser les bases : variables, conditions, boucles, fonctions et manipulation du DOM. Devenir à l'aise avec l'asynchrone, les API et un framework comme React demande plutôt plusieurs mois. La régularité compte davantage que la durée des séances : mieux vaut coder un peu chaque jour.

JavaScript est-il difficile pour un débutant ?

Les bases de JavaScript sont accessibles : la syntaxe est courte et le résultat s'affiche immédiatement dans le navigateur. Les difficultés arrivent plus tard, avec la conversion automatique des types, la portée des variables et le code asynchrone. En apprenant dans l'ordre et en pratiquant sur de petits projets concrets, un débutant sans expérience de programmation progresse sans blocage majeur.

Quelle est la différence entre Java et JavaScript ?

Ce sont deux langages distincts malgré leur nom. JavaScript s'exécute principalement dans le navigateur pour rendre les pages interactives, et côté serveur avec Node.js. Java est un langage compilé, fortement typé, utilisé surtout pour les applications d'entreprise et Android. La ressemblance de nom relève d'un choix marketing des années 1990, pas d'une parenté technique.

Faut-il connaître HTML et CSS avant d'apprendre JavaScript ?

Oui, c'est fortement conseillé. JavaScript sert surtout à agir sur une page web : sans savoir comment elle est structurée en HTML et mise en forme en CSS, vous ne saurez pas quoi sélectionner ni quoi modifier. Quelques jours sur les bases de HTML et CSS suffisent avant d'attaquer JavaScript.

Peut-on apprendre JavaScript sans rien installer ?

Oui. Tous les navigateurs modernes intègrent un moteur JavaScript et une console accessible avec F12. Vous pouvez y taper du code et voir le résultat immédiatement. Pour écrire de vrais fichiers, un éditeur de code gratuit comme Visual Studio Code devient vite indispensable, mais aucun serveur ni logiciel payant n'est nécessaire pour débuter.

Quel est le meilleur premier projet en JavaScript ?

Un projet court qui combine lecture d'une saisie, logique et modification de la page : un compteur de clics, une liste de tâches, un convertisseur de devises ou un quiz. Ces projets mobilisent variables, conditions, tableaux, fonctions et DOM sans nécessiter de serveur. Terminez-le entièrement avant d'en commencer un autre plus ambitieux.