Tutoriel JavaScript : Les bases pour débutants absolus

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 = 2024;              // 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

Exercice pratique