Tutoriel JavaScript : Les bases pour débutants absolus

Prérequis

• Niveau : bases HTML (cf. balises HTML essentielles) et un peu de CSS.
• Outils : VS Code, navigateur moderne (les DevTools = votre console JS).
• Temps estimé : 1 h pour parcourir, 2 à 3 h pour pratiquer.

Pourquoi JavaScript ?

HTML structure, CSS habille, JavaScript anime. Sans JS, pas de menu déroulant, pas de validation de formulaire, pas de fetch d’API, pas de single-page app. C’est le seul langage compris nativement par tous les navigateurs — et l’un des plus demandés du marché en 2026 (informations vérifiées en avril 2026, susceptibles d’évoluer).

JavaScript : le langage qui rend les sites vivants

HTML structure la page, CSS la stylise, et JavaScript la rend interactive. C’est JavaScript qui permet les menus déroulants, les formulaires dynamiques, les animations et les applications web complètes.

Où écrire du JavaScript ?

<!-- Méthode 1 : dans un fichier externe (recommandé) -->
<script src="script.js" defer></script>

<!-- Méthode 2 : directement dans le HTML -->
<script>
    console.log("Bonjour !");
</script>

<!-- "defer" charge le script APRÈS le HTML = bonne pratique -->

Variables : stocker des données

// let : variable qui peut changer
let age = 25;
age = 26; // OK

// const : constante (ne change pas)
const nom = "Mamadou";
// nom = "Fatou"; ← ERREUR !

// var : ancienne syntaxe (évitez-la)
// Utilisez toujours let ou const

// Types de données
const prenom = "Fatou";          // String (texte)
const annee = 2026;              // Number (nombre)
const estInscrit = true;         // Boolean (vrai/faux)
const formations = ["HTML", "CSS", "JS"]; // Array (tableau)
const etudiant = {               // Object (objet)
    nom: "Diallo",
    age: 25,
    ville: "Dakar"
};
const rien = null;               // Null (vide volontaire)
let inconnu;                     // Undefined (pas encore défini)

Opérations et concaténation

// Calculs
let prix = 10000;
let tva = prix * 0.18;        // 1800
let total = prix + tva;        // 11800

// Texte : template literals (backticks `)
const message = `Bonjour ${prenom}, vous avez ${age} ans.`;
// Résultat : "Bonjour Fatou, vous avez 25 ans."

// Ancienne méthode (concaténation avec +)
const msg = "Bonjour " + prenom + ", vous avez " + age + " ans.";

Conditions

const note = 14;

if (note >= 16) {
    console.log("Excellent !");
} else if (note >= 12) {
    console.log("Bien !");
} else if (note >= 10) {
    console.log("Passable");
} else {
    console.log("Insuffisant");
}

// Opérateurs de comparaison
// === : égal (strict, recommandé)
// !== : différent
// >  >= : supérieur / supérieur ou égal
// <  <= : inférieur / inférieur ou égal

// ⚠️ == vs === 
"5" == 5;   // true  (compare juste la valeur)
"5" === 5;  // false (compare valeur ET type)
// Utilisez TOUJOURS === pour éviter les bugs

Boucles

// for : quand vous connaissez le nombre de tours
for (let i = 0; i < 5; i++) {
    console.log("Tour " + i);
}

// for...of : parcourir un tableau (le plus simple)
const fruits = ["mangue", "banane", "orange"];
for (const fruit of fruits) {
    console.log(fruit);
}

// forEach : méthode de tableau
fruits.forEach((fruit, index) => {
    console.log(`${index + 1}. ${fruit}`);
});

// while : tant que la condition est vraie
let compteur = 0;
while (compteur < 3) {
    console.log(compteur);
    compteur++;
}

Fonctions

// Fonction classique
function saluer(nom) {
    return "Bonjour " + nom + " !";
}
console.log(saluer("Mamadou"));  // "Bonjour Mamadou !"

// Fonction fléchée (moderne, concise)
const saluer2 = (nom) => "Bonjour " + nom + " !";

// Fonction avec paramètre par défaut
const calculerPrix = (montant, tva = 0.18) => {
    return montant * (1 + tva);
};

console.log(calculerPrix(10000));      // 11800 (TVA 18%)
console.log(calculerPrix(10000, 0.20)); // 12000 (TVA 20%)

Tableaux (Arrays)

const langages = ["HTML", "CSS", "JavaScript"];

// Accéder à un élément (index commence à 0)
console.log(langages[0]);  // "HTML"
console.log(langages[2]);  // "JavaScript"

// Ajouter / Supprimer
langages.push("PHP");      // Ajouter à la fin
langages.unshift("Git");   // Ajouter au début
langages.pop();            // Retirer le dernier
langages.shift();          // Retirer le premier

// Méthodes utiles
langages.length;                          // Nombre d'éléments
langages.includes("CSS");                 // true
langages.indexOf("JavaScript");           // Position (2)
langages.join(", ");                      // "HTML, CSS, JavaScript"

// filter : garder certains éléments
const notes = [8, 14, 16, 9, 12, 18];
const admis = notes.filter(n => n >= 10);
// [14, 16, 12, 18]

// map : transformer chaque élément
const doubles = notes.map(n => n * 2);
// [16, 28, 32, 18, 24, 36]

// find : trouver un élément
const premier14 = notes.find(n => n >= 14);
// 14

Objets

const etudiant = {
    nom: "Diallo",
    prenom: "Mamadou",
    age: 25,
    formation: "Développement Web",
    
    // Méthode (fonction dans un objet)
    sePresenter() {
        return `Je suis ${this.prenom} ${this.nom}, ${this.age} ans.`;
    }
};

// Accéder aux propriétés
console.log(etudiant.nom);       // "Diallo"
console.log(etudiant["prenom"]); // "Mamadou"
console.log(etudiant.sePresenter());

// Modifier
etudiant.age = 26;

// Ajouter une propriété
etudiant.email = "mamadou@email.com";

console.log : votre meilleur ami pour débugger

// Ouvrez la console du navigateur : F12 → Console
console.log("Message simple");
console.log("Valeur :", maVariable);
console.log({ nom, age, formation }); // Affiche un objet
console.table(monTableau);            // Affiche un tableau formaté
console.error("Erreur !");            // Message rouge
console.warn("Attention !");          // Message jaune

Erreurs fréquentes

== au lieu de ===

Cause : == convertit les types avant de comparer ("5" == 5 → true).
Solution : utilisez TOUJOURS === (et !==).

« Cannot read properties of undefined »

Cause : on accède à une propriété d'une variable non initialisée ou d'un retour null.
Solution : utilisez l'opérateur de chaînage optionnel ?. (ex. etudiant?.adresse?.ville).

Réutiliser var

Cause : ancienne syntaxe à scope fonction, source de bugs subtils.
Solution : n'utilisez plus que let et const.

Oublier defer sur les <script>

Cause : le script s'exécute avant que le DOM soit prêt → document.querySelector(...) renvoie null.
Solution : ajoutez defer à la balise <script src="...">, ou placez-la juste avant </body>.

Exercice pratique

JavaScript moderne (ES2020+) : ce qui a changé en 2026

JavaScript a beaucoup évolué depuis les tutoriels d'il y a 5 ans. En 2026, plusieurs fonctionnalités sont devenues standard et remplacent des patterns anciens. Premier changement : let et const remplacent complètement var. let pour les variables qui changent, const pour celles qui ne changent pas. var reste fonctionnel mais sa portée fonctionnelle (vs blocage) cause des bugs subtils — n'utilisez plus var en 2026.

Deuxième changement : arrow functions pour les fonctions courtes. (x) => x * 2 remplace function(x) { return x * 2 }. Plus concis et mieux comporté avec this. Troisième changement : template literals avec backticks et ${} pour interpoler des variables dans des chaînes : `Bonjour ${nom}, vous avez ${count} messages`. Plus lisible que la concaténation classique.

Async/await : le standard pour le code asynchrone

Les callbacks imbriqués (le callback hell tristement célèbre) ont laissé place aux Promises, puis à la syntaxe async/await qui est aujourd'hui le standard. async sur une fonction la transforme en fonction qui retourne une Promise. await attend la résolution d'une Promise comme si c'était synchrone, sans bloquer le thread principal.

async function chargerUtilisateurs() {
  try {
    const response = await fetch('/api/users');
    const users = await response.json();
    return users;
  } catch (erreur) {
    console.error('Erreur de chargement :', erreur);
    return [];
  }
}

Cette syntaxe est lisible comme du code synchrone classique mais reste asynchrone côté navigateur. Le try/catch intercepte les erreurs réseau ou de parsing JSON. C'est le pattern moderne pour toute communication API en 2026.

Modules ES6 : organiser le code en fichiers séparés

Plutôt que de tout écrire dans un seul fichier monolithique, JavaScript moderne permet d'organiser le code en modules. Un module exporte des fonctions/variables avec export, et un autre fichier les importe avec import. Le navigateur supporte nativement les modules depuis 2018 — pas besoin de bundler pour les projets simples.

// utils.js
export function formaterMontant(n) {
  return new Intl.NumberFormat('fr-FR').format(n) + ' FCFA';
}

// app.js
import { formaterMontant } from './utils.js';
console.log(formaterMontant(125000)); // "125 000 FCFA"

Pour un projet plus complexe avec npm packages et bundling, utiliser Vite (recommandé en 2026) ou esbuild. Tous les frameworks modernes (React, Vue, Svelte) reposent sur ce système de modules — c'est la base du JavaScript professionnel actuel.

Erreurs débutants à éviter

Apprendre JavaScript en 2026 : ressources francophones

Pour un développeur débutant ouest-africain, plusieurs ressources gratuites en français permettent de monter en compétence rapidement. MDN Web Docs (developer.mozilla.org) reste la documentation de référence, intégralement traduite en français pour la majorité des sujets. FreeCodeCamp (freecodecamp.org) propose des parcours JavaScript de 300+ heures avec exercices interactifs et certificat. JavaScript.info (en français : fr.javascript.info) couvre le langage en profondeur avec exemples concrets.

Pour la pratique, LeetCode et Codewars offrent des milliers d'exercices de tous niveaux. Pour bâtir un portfolio, contribuer à un projet open source via GitHub est l'investissement le plus payant à moyen terme — recruteurs et clients regardent les contributions GitHub avant le CV.

Adaptation au contexte ouest-africain

Pour un développeur basé à Dakar, Abidjan, Bamako ou Cotonou qui démarre JavaScript en 2026, trois conseils pratiques. Premièrement, télécharger les ressources hors-ligne (cours FreeCodeCamp, vidéos YouTube avec yt-dlp) pour étudier sans dépendre d'une connexion 4G stable. Deuxièmement, rejoindre des communautés Discord ou WhatsApp francophones de devs (DevC Dakar, GDG Abidjan, Bamako Tech Hub) pour s'entraider et trouver des opportunités. Troisièmement, choisir des projets concrets utiles localement — un site marchand avec paiement Wave/Orange Money apprend plus que 100 exercices abstraits. Pour les patterns avancés, voir aussi le guide événements JavaScript.

Outils et IDE recommandés en 2026

Pour démarrer JavaScript, le combo moderne tient en trois outils gratuits. VS Code reste l'éditeur de référence avec extensions ESLint, Prettier et Live Server qui couvrent 95 % des besoins. Cursor ou Zed émergent comme alternatives avec IA intégrée pour la complétion de code — pertinent pour les juniors qui veulent un coach intégré. Chrome DevTools reste le standard de débogage : Console, Network, Sources avec breakpoints, Performance pour profiler les bottlenecks.

Pour les projets sérieux, ajouter Git (gestion de versions) et Node.js (runtime serveur, base du tooling moderne). L'ensemble s'installe en moins de 30 minutes sur un Mac, Windows ou Linux et donne une base professionnelle solide.

Différences entre JavaScript navigateur et Node.js

JavaScript fonctionne dans deux environnements distincts. Côté navigateur (Chrome, Firefox, Safari), JavaScript a accès au DOM, aux APIs Web (fetch, localStorage, geolocation) mais pas au système de fichiers ni au réseau bas niveau. Côté Node.js (serveur), JavaScript a accès au filesystem (fs), aux ports réseau, à l'exécution de processus, mais pas au DOM. Une même syntaxe, deux capacités complémentaires.

Pour un développeur fullstack moderne, maîtriser les deux contextes ouvre les portes de la majorité des postes en 2026. Express.js et Hono côté serveur, React/Vue côté client — c'est la stack la plus demandée sur le marché des recruteurs ouest-africains.

Patterns à connaître : destructuring, spread, rest

Trois patterns ES6 indispensables en 2026. Destructuring permet d'extraire des propriétés d'objets ou éléments de tableaux en une ligne : const {nom, email} = utilisateur. Spread operator (...) clone ou fusionne des objets/tableaux : const merged = {...obj1, ...obj2}. Rest parameters capturent les arguments multiples : function sum(...nombres) { return nombres.reduce((a,b)=>a+b, 0) }. Ces trois patterns tiennent en quelques minutes à apprendre et économisent des dizaines de lignes par fichier.

Tester son code : Vitest et Playwright

Tester JavaScript en 2026 demande deux outils. Vitest (successeur de Jest) pour les tests unitaires : ultra-rapide, syntaxe identique à Jest, intégration native avec Vite. Playwright pour les tests end-to-end : pilote un vrai navigateur Chromium/Firefox/WebKit, valide le comportement réel de l'application. Les deux sont gratuits et open source. Démarrer avec quelques tests basiques (describe, it, expect) suffit pour gagner en confiance lors des refactorisations.

Pour approfondir

• Manipuler le DOM avec JavaScript
• Les événements JavaScript expliqués
• Utiliser les API REST avec fetch
• Référence officielle : MDN — JavaScript
• Livre gratuit : Eloquent JavaScript (3ᵉ édition)