JavaScript
Apprendre JavaScript : Le Guide Complet pour Débutants (2025)
Mark Toledo
13 janvier 2025
Apprendre JavaScript est la meilleure décision que vous pouvez prendre en 2025 pour votre carrière de développeur. JavaScript est partout : sites web, applications mobiles, serveurs, IoT, et même l'intelligence artificielle.
Ce guide complet vous accompagne de zéro à héros avec des explications claires et des exemples pratiques.
Pourquoi apprendre JavaScript ?
JavaScript est le langage le plus demandé sur le marché de l'emploi :
- 97% des sites web utilisent JavaScript
- +1.5 million d'offres d'emploi dans le monde
- Polyvalent : frontend, backend, mobile, desktop
- Communauté massive : documentation et ressources abondantes
- Évolution constante : nouvelles fonctionnalités chaque année
Par où commencer ?
Prérequis
Pour apprendre JavaScript, vous avez besoin de :
- Un navigateur web (Chrome, Firefox, Edge)
- Un éditeur de code (VS Code recommandé)
- De la motivation !
Premier programme JavaScript
Ouvrez la console de votre navigateur (F12 > Console) et tapez :
console.log("Bonjour, JavaScript !")
Félicitations, vous venez d'écrire votre premier code JavaScript !
Les bases de JavaScript
Variables
Les variables stockent des données. En JavaScript moderne, on utilise let et const.
// const pour les valeurs qui ne changent pas
const nom = "Alice"
const age = 25
const estDeveloppeur = true
// let pour les valeurs qui peuvent changer
let score = 0
score = score + 10 // score vaut maintenant 10
// Afficher les valeurs
console.log(nom) // "Alice"
console.log(age) // 25
console.log(score) // 10
Types de données
JavaScript a plusieurs types de données :
// String (texte)
const prenom = "Marie"
const message = 'Bonjour le monde'
const template = `Mon nom est ${prenom}` // Template literal
// Number (nombre)
const entier = 42
const decimal = 3.14
const negatif = -10
// Boolean (vrai/faux)
const estVrai = true
const estFaux = false
// Array (tableau)
const fruits = ["pomme", "banane", "orange"]
const nombres = [1, 2, 3, 4, 5]
// Object (objet)
const personne = {
nom: "Dupont",
prenom: "Jean",
age: 30
}
// null et undefined
const vide = null
let nonDefini // undefined
Opérateurs
// Arithmétiques
const a = 10 + 5 // 15
const b = 10 - 5 // 5
const c = 10 * 5 // 50
const d = 10 / 5 // 2
const e = 10 % 3 // 1 (reste de la division)
const f = 2 ** 3 // 8 (puissance)
// Comparaison
console.log(5 == "5") // true (égalité simple)
console.log(5 === "5") // false (égalité stricte - recommandé)
console.log(5 !== "5") // true (différent strict)
console.log(5 > 3) // true
console.log(5 <= 5) // true
// Logiques
console.log(true && false) // false (ET)
console.log(true || false) // true (OU)
console.log(!true) // false (NON)
Structures de contrôle
Conditions (if/else)
const age = 18
if (age >= 18) {
console.log("Vous êtes majeur")
} else if (age >= 13) {
console.log("Vous êtes adolescent")
} else {
console.log("Vous êtes enfant")
}
// Opérateur ternaire (raccourci)
const statut = age >= 18 ? "majeur" : "mineur"
Boucles
// Boucle for
for (let i = 0; i < 5; i++) {
console.log(`Itération ${i}`)
}
// Boucle for...of (pour les tableaux)
const fruits = ["pomme", "banane", "orange"]
for (const fruit of fruits) {
console.log(fruit)
}
// Boucle while
let compteur = 0
while (compteur < 3) {
console.log(compteur)
compteur++
}
// forEach (méthode de tableau)
fruits.forEach((fruit, index) => {
console.log(`${index}: ${fruit}`)
})
Fonctions JavaScript
Les fonctions sont des blocs de code réutilisables.
Fonction classique
function saluer(nom) {
return `Bonjour, ${nom} !`
}
console.log(saluer("Alice")) // "Bonjour, Alice !"
Fonction fléchée (arrow function)
// Syntaxe courte pour les fonctions
const saluer = (nom) => `Bonjour, ${nom} !`
// Avec plusieurs paramètres
const additionner = (a, b) => a + b
// Avec plusieurs lignes
const calculer = (a, b) => {
const somme = a + b
const produit = a * b
return { somme, produit }
}
console.log(additionner(5, 3)) // 8
console.log(calculer(4, 2)) // { somme: 6, produit: 8 }
Paramètres par défaut
function saluer(nom = "inconnu", ponctuation = "!") {
return `Bonjour, ${nom}${ponctuation}`
}
console.log(saluer()) // "Bonjour, inconnu!"
console.log(saluer("Marie")) // "Bonjour, Marie!"
console.log(saluer("Jean", "?")) // "Bonjour, Jean?"
Tableaux (Arrays)
Les tableaux stockent des listes de valeurs.
const nombres = [1, 2, 3, 4, 5]
// Accéder aux éléments
console.log(nombres[0]) // 1 (premier élément)
console.log(nombres[4]) // 5 (dernier élément)
// Longueur
console.log(nombres.length) // 5
// Ajouter/supprimer
nombres.push(6) // Ajoute à la fin
nombres.pop() // Supprime le dernier
nombres.unshift(0) // Ajoute au début
nombres.shift() // Supprime le premier
// Méthodes utiles
const fruits = ["pomme", "banane", "orange", "kiwi"]
// map - transformer chaque élément
const majuscules = fruits.map(f => f.toUpperCase())
// ["POMME", "BANANE", "ORANGE", "KIWI"]
// filter - filtrer les éléments
const courtes = fruits.filter(f => f.length <= 5)
// ["pomme", "kiwi"]
// find - trouver un élément
const avecO = fruits.find(f => f.includes("o"))
// "pomme"
// reduce - réduire à une seule valeur
const total = [1, 2, 3, 4].reduce((acc, n) => acc + n, 0)
// 10
Objets JavaScript
Les objets regroupent des données liées.
const utilisateur = {
nom: "Dupont",
prenom: "Marie",
age: 28,
email: "marie@exemple.fr",
adresse: {
ville: "Paris",
codePostal: "75001"
},
// Méthode (fonction dans un objet)
sePresenter() {
return `Je suis ${this.prenom} ${this.nom}`
}
}
// Accéder aux propriétés
console.log(utilisateur.prenom) // "Marie"
console.log(utilisateur["email"]) // "marie@exemple.fr"
console.log(utilisateur.adresse.ville) // "Paris"
console.log(utilisateur.sePresenter()) // "Je suis Marie Dupont"
// Destructuring (extraction)
const { nom, prenom, age } = utilisateur
console.log(prenom) // "Marie"
// Spread operator (copie)
const copie = { ...utilisateur, age: 29 }
Manipulation du DOM
Le DOM (Document Object Model) permet de manipuler les pages web.
<!DOCTYPE html>
<html>
<body>
<h1 id="titre">Mon Titre</h1>
<button id="bouton">Cliquez-moi</button>
<ul id="liste"></ul>
<script>
// Sélectionner des éléments
const titre = document.getElementById("titre")
const bouton = document.querySelector("#bouton")
const liste = document.querySelector("#liste")
// Modifier le contenu
titre.textContent = "Nouveau Titre"
titre.style.color = "blue"
// Ajouter un événement
bouton.addEventListener("click", () => {
alert("Bouton cliqué !")
})
// Créer des éléments
const fruits = ["Pomme", "Banane", "Orange"]
fruits.forEach(fruit => {
const li = document.createElement("li")
li.textContent = fruit
liste.appendChild(li)
})
</script>
</body>
</html>
JavaScript asynchrone
Le JavaScript asynchrone permet d'exécuter du code sans bloquer l'interface.
Promesses
// Créer une promesse
function attendre(ms) {
return new Promise(resolve => {
setTimeout(resolve, ms)
})
}
// Utiliser une promesse
attendre(2000).then(() => {
console.log("2 secondes écoulées !")
})
Async/Await
// Syntaxe plus lisible pour les promesses
async function chargerDonnees() {
try {
const response = await fetch("https://api.exemple.fr/users")
const users = await response.json()
console.log(users)
} catch (error) {
console.error("Erreur:", error)
}
}
chargerDonnees()
Fetch API
// Récupérer des données
async function getUsers() {
const response = await fetch("https://jsonplaceholder.typicode.com/users")
const users = await response.json()
return users
}
// Envoyer des données
async function createUser(user) {
const response = await fetch("https://api.exemple.fr/users", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(user)
})
return response.json()
}
Exercices pratiques
Exercice 1 : Calculatrice simple
function calculer(a, b, operation) {
switch (operation) {
case "+": return a + b
case "-": return a - b
case "*": return a * b
case "/": return b !== 0 ? a / b : "Erreur: division par zéro"
default: return "Opération inconnue"
}
}
console.log(calculer(10, 5, "+")) // 15
console.log(calculer(10, 5, "*")) // 50
Exercice 2 : Liste de tâches
const taches = []
function ajouterTache(texte) {
taches.push({ id: Date.now(), texte, terminee: false })
}
function terminerTache(id) {
const tache = taches.find(t => t.id === id)
if (tache) tache.terminee = true
}
function afficherTaches() {
taches.forEach(t => {
const statut = t.terminee ? "✓" : "○"
console.log(`${statut} ${t.texte}`)
})
}
Ressources pour continuer
Vous avez maintenant les bases pour apprendre JavaScript ! Voici comment continuer :
- Pratiquez : Créez de petits projets (calculatrice, todo list, jeu)
- Approfondissez : Découvrez les frameworks (Vue.js, React)
- Backend : Apprenez Node.js pour le côté serveur
Conclusion
Apprendre JavaScript demande de la pratique régulière. Commencez par les bases, créez des projets personnels, et progressivement vous maîtriserez ce langage incontournable.
Prochaines étapes recommandées :