1. Introduction à JavaScript
JavaScript est un langage de programmation qui permet de rendre vos pages web interactives et dynamiques. C'est l'un des trois piliers du web avec HTML et CSS. JavaScript s'exécute dans le navigateur et peut manipuler le contenu, réagir aux actions de l'utilisateur et bien plus encore.
Comment inclure JavaScript
Il existe deux façons d'inclure JavaScript dans une page HTML : en inline avec l'attribut onclick, ou en externe avec la balise <script>.
// Script externe (recommandé) - dans un fichier .js
// <script src="app.js"></script>
// Script interne
<script>
console.log("Bonjour le monde !");
</script>
// Inline (déconseillé)
<button onclick="alert('Bonjour !')">Cliquez</button>console.log()
La fonction console.log() est l'outil de base pour afficher des informations dans la console du navigateur. C'est indispensable pour déboguer votre code.
console.log("Hello World !"); // Affiche le message
console.log(42); // Affiche le nombre
console.log(true); // Affiche true
console.warn("Attention !"); // Avertissement
console.error("Erreur !"); // ErreurLes commentaires
Les commentaires permettent d'expliquer votre code. Ils sont ignorés par le navigateur.
// Ceci est un commentaire sur une ligne
/*
Ceci est un commentaire
sur plusieurs lignes
*/2. Les variables et types
Les variables permettent de stocker des données qui peuvent être utilisées et modifiées tout au long du programme. JavaScript propose trois mots-clés pour déclarer des variables : let, const et var.
let, const, var
let déclare une variable modifiable. const déclare une constante (non réassignable). var est l'ancienne syntaxe, à éviter dans le code moderne.
let age = 25; // Variable modifiable
let nom = "Alice"; // Peut changer de valeur
const PI = 3.14159; // Constante
// PI = 3; // Erreur ! On ne peut pas réassigner
var ancienne = " éviter "; // Ancien mot-clé, portée différenteLes types de données
JavaScript possède plusieurs types de données primitifs et un type objet.
// Strings (chaînes de caractères)
let prenom = "Jean";
let message = 'Bonjour';
// Numbers (nombres)
let prix = 29.99;
let annee = 2026;
// Booleans (booléens)
let estActif = true;
let estFerme = false;
// Null (absence intentionnelle de valeur)
let vide = null;
// Undefined (variable non initialisée)
let inconnu; // Valeur: undefined
// typeof pour vérifier le type
console.log(typeof prenom); // "string"
console.log(typeof prix); // "number"
console.log(typeof estActif); // "boolean"
console.log(typeof vide); // "object" (bug connu !)
console.log(typeof inconnu); // "undefined"3. Les opérateurs
JavaScript propose plusieurs catégories d'opérateurs : arithmétiques, de comparaison, logiques et l'opérateur ternaire.
Opérateurs arithmétiques
let a = 10;
let b = 3;
console.log(a + b); // 13 (addition)
console.log(a - b); // 7 (soustraction)
console.log(a * b); // 30 (multiplication)
console.log(a / b); // 3.33 (division)
console.log(a % b); // 1 (modulo - reste)
console.log(a ** b); // 1000 (exposant)Opérateurs de comparaison
Attention : == compare les valeurs (avec conversion de type), tandis que === compare les valeurs et les types. Préférez toujours ===.
console.log(5 == "5"); // true (conversion de type)
console.log(5 === "5"); // false (types différents)
console.log(5 === 5); // true (même type et valeur)
console.log(5 != "3"); // true (valeurs différentes)
console.log(5 !== "5"); // true (types différents)
console.log(5 > 3); // true
console.log(5 < 3); // false
console.log(5 >= 5); // true
console.log(5 <= 3); // falseOpérateurs logiques
let age = 25;
let permis = true;
// AND (et) - les deux doivent être vrais
console.log(age >= 18 && permis === true); // true
// OR (ou) - au moins un doit être vrai
console.log(age >= 18 || permis === true); // true
// NOT (non) - inverse la valeur
console.log(!permis); // falseL'opérateur ternaire
Une version courte d'un if/else sur une seule ligne.
let age = 20;
let statut = age >= 18 ? "majeur" : "mineur";
console.log(statut); // "majeur"4. Les conditions
Les conditions permettent d'exécuter du code différent selon la valeur d'une expression. JavaScript propose if/else, switch et la notion de truthy/falsy.
if / else
let heure = 14;
if (heure < 12) {
console.log("Bonjour !");
} else if (heure < 18) {
console.log("Bon après-midi !");
} else {
console.log("Bonsoir !");
}
// Affiche : "Bon après-midi !"switch
Utile quand on compare une même variable à plusieurs valeurs. N'oubliez pas le mot-clé break pour éviter la chute.
let jour = "mardi";
switch (jour) {
case "lundi":
console.log("Début de semaine");
break;
case "mardi":
case "mercredi":
case "jeudi":
console.log("Milieu de semaine");
break;
case "vendredi":
console.log("Presque le week-end !");
break;
default:
console.log("Week-end !");
}Truthy et Falsy
En JavaScript, toutes les valeurs sont soit "truthy" (vraies) soit "falsy" (fausses) lorsqu'elles sont évaluées dans un contexte booléen.
// Valeurs FALSY (évaluées à false) :
console.log(!!false); // false
console.log(!!0); // false
console.log(!!""); // false
console.log(!!null); // false
console.log(!!undefined); // false
console.log(!!NaN); // false
// Tout le reste est TRUTHY :
console.log(!!"hello"); // true
console.log(!!42); // true
console.log(!!true); // true
console.log(!![]); // true (tableau vide)
console.log(!!{}); // true (objet vide)5. Les boucles
Les boucles permettent d'exécuter un bloc de code plusieurs fois. JavaScript offre plusieurs types de boucles selon les besoins.
La boucle for
// Boucle for classique
for (let i = 0; i < 5; i++) {
console.log(`Iteration ${i}`);
}
// Affiche : 0, 1, 2, 3, 4La boucle while
// Boucle while
let compteur = 0;
while (compteur < 5) {
console.log(compteur);
compteur++;
}
// Boucle do...while - s'exécute au moins une fois
let n = 0;
do {
console.log(n);
n++;
} while (n < 5);for...of et for...in
for...of itère sur les valeurs d'un tableau ou d'un iterable. for...in itère sur les clés d'un objet.
// for...of - pour les tableaux
let fruits = ["pomme", "banane", "cerise"];
for (let fruit of fruits) {
console.log(fruit);
}
// for...in - pour les objets
let user = { nom: "Alice", age: 25 };
for (let cle in user) {
console.log(`${cle}: ${user[cle]}`);
}
// "nom: Alice", "age: 25"break et continue
// break - sort de la boucle
for (let i = 0; i < 10; i++) {
if (i === 5) break;
console.log(i); // 0, 1, 2, 3, 4
}
// continue - passe à l'itération suivante
for (let i = 0; i < 10; i++) {
if (i % 2 === 0) continue;
console.log(i); // 1, 3, 5, 7, 9
}6. Les fonctions
Les fonctions sont des blocs de code réutilisables qui effectuent une tâche spécifique. JavaScript propose trois façons de créer des fonctions.
Déclaration de fonction
// Déclaration classique (hoistée)
function saluer(nom) {
return `Bonjour ${nom} !`;
}
console.log(saluer("Alice")); // "Bonjour Alice !"
// Paramètres par défaut
function saluer(nom = "inconnu") {
return `Bonjour ${nom} !`;
}
console.log(saluer()); // "Bonjour inconnu !"Expression de fonction
// Stockée dans une variable (non hoistée)
const addition = function(a, b) {
return a + b;
};
console.log(addition(5, 3)); // 8Arrow functions (fonctions fléchées)
Syntaxe concise introduite en ES6, particulièrement utile pour les callbacks.
// Syntaxe complète
const multiply = (a, b) => {
return a * b;
};
// Syntaxe concise (retour implicite)
const multiply = (a, b) => a * b;
// Un seul paramètre (pas de parenthèses nécessaires)
const double = x => x * 2;
console.log(multiply(4, 5)); // 20
console.log(double(7)); // 14Les paramètres rest et spread
// rest - regroupe les arguments en tableau
function somme(...nombres) {
return nombres.reduce((total, n) => total + n, 0);
}
console.log(somme(1, 2, 3, 4)); // 107. Les tableaux
Un tableau est une structure de données qui stocke une collection d'éléments ordonnés. JavaScript offre de nombreuses méthodes puissantes pour manipuler les tableaux.
Création et accès
let fruits = ["pomme", "banane", "cerise"];
console.log(fruits[0]); // "pomme" (index 0)
console.log(fruits.length); // 3
fruits[1] = "mangue"; // Modifier un élémentAjouter et supprimer
let tab = [1, 2, 3];
tab.push(4, 5); // Ajoute à la fin → [1, 2, 3, 4, 5]
tab.pop(); // Supprime le dernier → [1, 2, 3, 4]
tab.unshift(0); // Ajoute au début → [0, 1, 2, 3, 4]
tab.shift(); // Supprime le premier → [1, 2, 3, 4]slice et splice
let tab = ["a", "b", "c", "d", "e"];
// slice - extrait sans modifier l'original
let extrait = tab.slice(1, 3); // ["b", "c"]
// splice - modifie le tableau original
tab.splice(1, 2); // Supprime 2 éléments à partir de l'index 1
tab.splice(1, 0, "x"); // Insère "x" à l'index 1map, filter, reduce, find, forEach
let nombres = [1, 2, 3, 4, 5];
// map - transforme chaque élément
let doubles = nombres.map(n => n * 2);
// [2, 4, 6, 8, 10]
// filter - garde les éléments qui passent le test
let pairs = nombres.filter(n => n % 2 === 0);
// [2, 4]
// reduce - réduit à une seule valeur
let total = nombres.reduce((acc, n) => acc + n, 0);
// 15
// find - trouve le premier élément
let trouve = nombres.find(n => n > 3);
// 4
// forEach - exécute une fonction pour chaque élément
nombres.forEach(n => console.log(n));8. Les objets
Les objets permettent de stocker des données sous forme de paires clé-valeur. Ils sont au cœur de JavaScript et sont utilisés partout.
Les objets littéraux
let utilisateur = {
nom: "Alice",
age: 25,
estAdmin: false,
adresses: ["Paris", "Lyon"],
contact: {
email: "alice@example.com",
tel: "06 12 34 56 78"
}
};
// Accès aux propriétés
console.log(utilisateur.nom); // "Alice"
console.log(utilisateur["contact"].email); // "alice@example.com"
// Ajouter/modifier une propriété
utilisateur.ville = "Marseille";
utilisateur.age = 26;Les méthodes d'objet
let calculatrice = {
resultat: 0,
additionner(n) {
this.resultat += n;
return this; // Permet le chaînage
},
soustraire(n) {
this.resultat -= n;
return this;
},
getResultat() {
return this.resultat;
}
};
calculatrice.additionner(10).soustraire(3);
console.log(calculatrice.getResultat()); // 7La destructuring
let user = { nom: "Bob", age: 30, pays: "France" };
// Destructuring
let { nom, age } = user;
console.log(nom); // "Bob"
console.log(age); // 30
// Renommer les variables
let { nom: nomUtilisateur } = user;
console.log(nomUtilisateur); // "Bob"
// Valeur par défaut
let { pays = "Inconnu", ville = "N/A" } = user;Le spread operator et Object.keys/values/entries
// Spread - copie et fusionne des objets
let base = { a: 1, b: 2 };
let etendu = { ...base, c: 3 };
// { a: 1, b: 2, c: 3 }
// Object.keys - retourne les clés
console.log(Object.keys(user)); // ["nom", "age", "pays"]
// Object.values - retourne les valeurs
console.log(Object.values(user)); // ["Bob", 30, "France"]
// Object.entries - retourne les paires [clé, valeur]
console.log(Object.entries(user));
// [["nom", "Bob"], ["age", 30], ["pays", "France"]]9. Le DOM
Le DOM (Document Object Model) est une représentation en arbre du document HTML. JavaScript peut le manipuler pour modifier dynamiquement le contenu, le style et la structure de la page.
Sélectionner des éléments
// getElementById - sélection par ID (un seul élément)
let titre = document.getElementById("titre");
// querySelector - premier élément correspondant au sélecteur CSS
let premier = document.querySelector(".ma-classe");
// querySelectorAll - tous les éléments correspondants
let tous = document.querySelectorAll("li.item");Modifier le contenu
let element = document.querySelector("#mon-id");
// innerHTML - modifier le HTML (attention aux failles XSS)
element.innerHTML = "<strong>Nouveau contenu</strong>";
// textContent - modifier le texte (plus sûr)
element.textContent = "Nouveau texte";Modifier les classes et le style
let el = document.querySelector(".carte");
// classList - gestion des classes
el.classList.add("active");
el.classList.remove("hidden");
el.classList.toggle("visible");
el.classList.contains("active"); // true
// style - modifier les styles CSS
el.style.backgroundColor = "red";
el.style.fontSize = "20px";Créer et ajouter des éléments
// Créer un élément
let nouveau = document.createElement("div");
nouveau.textContent = "Je suis nouveau !";
nouveau.className = "alerte";
// Ajouter au DOM
document.querySelector(".container").appendChild(nouveau);
// insertBefore - insérer avant un élément
parent.insertBefore(nouveau, reference);
// Supprimer un élément
nouveau.remove();10. Les événements
Les événements permettent de réagir aux actions de l'utilisateur : clics, saisies, soumissions de formulaire, appuis sur des touches, etc.
addEventListener
let bouton = document.querySelector("#monBouton");
// Ajouter un écouteur d'événement
bouton.addEventListener("click", function() {
console.log("Bouton cliqué !");
});
// Avec une arrow function
bouton.addEventListener("click", () => {
console.log("Clic avec arrow function !");
});
// Supprimer un écouteur
function monHandler() { console.log("test"); }
bouton.addEventListener("click", monHandler);
bouton.removeEventListener("click", monHandler);Les événements courants
// click - clic de souris
element.addEventListener("click", handler);
// submit - soumission de formulaire
form.addEventListener("submit", handler);
// keydown - touche enfoncée
input.addEventListener("keydown", handler);
// input - valeur changée dans un champ
input.addEventListener("input", handler);L'objet event et preventDefault
form.addEventListener("submit", (event) => {
// Empêcher le rechargement de la page
event.preventDefault();
// Informations sur l'événement
console.log(event.type); // "submit"
console.log(event.target); // l'élément cible
// Accéder à la valeur du champ
let nom = event.target.nom.value;
console.log(`Nom saisi: ${nom}`);
});
// Raccourci moderne avec les propriétés du formulaire
form.addEventListener("submit", (e) => {
e.preventDefault();
const data = new FormData(form);
console.log(data.get("nom"));
});11. Asynchrone
JavaScript est un langage mono-thread mais gère l'asynchronisme grâce aux callbacks, aux Promises et au async/await. C'est essentiel pour les appels réseau, les timers et les opérations longues.
setTimeout et setInterval
// setTimeout - exécute après un délai
setTimeout(() => {
console.log("Exécuté après 2 secondes");
}, 2000);
// setInterval - exécute à intervalle régulier
let compteur = 0;
const intervalId = setInterval(() => {
compteur++;
console.log(`Compteur: ${compteur}`);
if (compteur >= 5) clearInterval(intervalId);
}, 1000);Les Promises
Une Promise represente une valeur qui n'est peut-être pas encore disponible. Elle peut être pending, fulfilled ou rejected.
const maPromise = new Promise((resolve, reject) => {
const succes = true;
if (succes) {
resolve("Données reçues !");
} else {
reject(new Error("Erreur !"));
}
});
maPromise
.then(data => console.log(data))
.catch(err => console.error(err))
.finally(() => console.log("Terminé"));async / await
Syntaxe moderne (ES2017) pour écrire du code asynchrone de manière plus lisible.
async function chargerDonnees() {
try {
const reponse = await fetch("https://api.example.com/data");
const data = await reponse.json();
console.log(data);
} catch (erreur) {
console.error("Erreur:", erreur);
}
}
chargerDonnees();La Fetch API
// GET
fetch("https://api.example.com/users")
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.error(err));
// POST
fetch("https://api.example.com/users", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ nom: "Alice", age: 25 })
})12. Projet final
Maintenant que vous maîtrisez les bases de JavaScript, il est temps de les mettre en pratique ! Ce projet final consiste à créer une application de listes de tâches (Todo List) interactive avec manipulation du DOM et localStorage.
Fonctionnalités à implémenter
- Ajouter une nouvelle tâche via un formulaire
- Marquer une tâche comme terminée (avec coche)
- Supprimer une tâche
- Sauvegarder les tâches dans le
localStorage - Charger les tâches sauvegardées au démarrage
- Compteur de tâches restantes
Structure HTML
<div class="todo-container">
<h1>Ma Todo List</h1>
<form id="todoForm">
<input type="text" id="todoInput" placeholder="Nouvelle tâche..." required>
<button type="submit">Ajouter</button>
</form>
<ul id="todoList"></ul>
<p id="counter">0 tâche(s) restante(s)</p>
</div>JavaScript de la Todo List
const form = document.getElementById("todoForm");
const input = document.getElementById("todoInput");
const list = document.getElementById("todoList");
const counter = document.getElementById("counter");
// Charger les tâches depuis le localStorage
let todos = JSON.parse(localStorage.getItem("todos")) || [];
// Sauvegarder dans le localStorage
function sauvegarder() {
localStorage.setItem("todos", JSON.stringify(todos));
}
// Afficher les tâches
function afficher() {
list.innerHTML = "";
todos.forEach((todo, index) => {
const li = document.createElement("li");
li.className = todo.done ? "done" : "";
li.innerHTML = `
<span>${todo.text}</span>
<div>
<button class="toggle">${todo.done ? "↩" : "✓"}</button>
<button class="delete">×</button>
</div>
`;
li.querySelector(".toggle").addEventListener("click", () => {
todos[index].done = !todos[index].done;
sauvegarder(); afficher();
});
li.querySelector(".delete").addEventListener("click", () => {
todos.splice(index, 1);
sauvegarder(); afficher();
});
list.appendChild(li);
});
const restantes = todos.filter(t => !t.done).length;
counter.textContent = `${restantes} tâche(s) restante(s)`;
}
// Ajouter une tâche
form.addEventListener("submit", (e) => {
e.preventDefault();
const text = input.value.trim();
if (!text) return;
todos.push({ text, done: false });
input.value = "";
sauvegarder(); afficher();
});
afficher();Conseils pour réussir
- Commencez par la structure HTML avant le JavaScript.
- Testez chaque fonctionnalité individuellement.
- Utilisez la console du navigateur pour déboguer.
- Pensez aux cas limites : champ vide, localStorage vide.
- Ajoutez du CSS pour rendre l'application agréable à l'œil.