Cours complet et détaillé sur JavaScript
1 Introduction à JavaScript
1️⃣
JavaScript est un langage de programmation créé en 1995 par Brendan Eich pour Netscape
Communications.
Il permet de rendre les pages web interactives. Aujourd’hui, il est utilisé :
🌐 Côté client (dans le navigateur)
Côté serveur avec [Link]
📱 Pour les applications mobiles (React Native)
🎮 Pour les jeux
🤖 Pour l’IA, les scripts, les bots…
C’est l’un des langages les plus utilisés au monde.
2️⃣Fonctionnement de JavaScript dans le Web
Un site web utilise :
HTML → structure
CSS → style
JavaScript → comportement
JavaScript peut :
Modifier le contenu HTML
Modifier le style CSS
Réagir aux actions utilisateur (clic, clavier…)
Communiquer avec un serveur
3️⃣Les bases du langage
🔹 3.1 Les variables
On déclare une variable avec :
let nom = "Jean";
const age = 25;
var ville = "Paris";
Différence :
let → variable modifiable
const → constante (non modifiable)
var → ancienne méthode (éviter)
🔹 3.2 Les types de données
Types primitifs :
let texte = "Bonjour"; // String
let nombre = 10; // Number
let decimal = 10.5;
let actif = true; // Boolean
let vide = null; // Null
let indefini; // Undefined
Type complexe :
let personne = {
nom: "Jean",
age: 25
};
🔹 3.3 Les opérateurs
Mathématiques
+ - * / %
Comparaison
== === != !== > < >= <=
👉 Toujours privilégier === (comparaison stricte).
4️⃣Les structures de contrôle
🔹 4.1 Conditions
if (age >= 18) {
[Link]("Majeur");
} else {
[Link]("Mineur");
}
Switch
switch(jour) {
case "lundi":
[Link]("Début semaine");
break;
}
🔹 4.2 Les boucles
For
for (let i = 0; i < 5; i++) {
[Link](i);
}
While
while (condition) {
// code
}
For...of (tableaux)
for (let valeur of tableau) {
[Link](valeur);
}
5️⃣Les fonctions
🔹 Fonction classique
function direBonjour(nom) {
return "Bonjour " + nom;
}
🔹 Fonction fléchée (ES6)
const direBonjour = (nom) => {
return "Bonjour " + nom;
};
Version courte :
const direBonjour = nom => "Bonjour " + nom;
6️⃣Les tableaux
let fruits = ["Pomme", "Banane", "Orange"];
Méthodes importantes :
[Link]("Fraise"); // Ajouter
[Link](); // Supprimer dernier
[Link](); // Supprimer premier
[Link]("Kiwi"); // Ajouter début
Méthodes modernes :
[Link]()
[Link]()
[Link]()
Exemple :
let nombres = [1,2,3];
let doubles = [Link](n => n * 2);
7️⃣Les objets
let personne = {
nom: "Jean",
age: 25,
saluer() {
[Link]("Bonjour");
}
};
Accès :
[Link]
personne["age"]
8️⃣Le DOM (Document Object Model)
Le DOM représente la page HTML.
Sélection :
[Link]("id");
[Link](".classe");
Modifier :
[Link] = "Nouveau texte";
[Link] = "red";
Événement :
[Link]("click", () => {
alert("Clique !");
});
9️⃣Les événements
Exemples :
click
mouseover
keydown
submit
🔟 JavaScript Asynchrone
🔹 10.1 setTimeout
setTimeout(() => {
[Link]("3 secondes");
}, 3000);
🔹 10.2 Promises
let promesse = new Promise((resolve, reject) => {
resolve("Succès");
});
🔹 10.3 Async / Await
async function charger() {
let reponse = await fetch("url");
let data = await [Link]();
}
1️⃣1️⃣ES6 (Version moderne)
Nouveautés importantes :
let / const
fonctions fléchées
template literals
let nom = "Jean";
[Link](`Bonjour ${nom}`);
destructuring
spread operator
let tab2 = [...tab1];
1️⃣2️⃣Modules
export function addition(a, b) {
return a + b;
}
import { addition } from "./[Link]";
1️⃣3️⃣POO (Programmation Orientée Objet)
Classe
class Personne {
constructor(nom) {
[Link] = nom;
}
saluer() {
[Link]("Bonjour " + [Link]);
}
}
1️⃣4️⃣[Link] (JavaScript côté serveur)
Avec [Link] :
const http = require("http");
[Link]((req, res) => {
[Link]("Hello");
}).listen(3000);
1️⃣5️⃣Frameworks populaires
⚛ React
🅰 Angular
💚 [Link]
🚀 [Link]
🔥 [Link]
1️⃣6️⃣Bonnes pratiques
✅ Toujours utiliser const par défaut
✅ Utiliser === au lieu de ==
✅ Éviter var
✅ Nommer clairement les variables
✅ Séparer le code en modules
1️⃣7️⃣Concepts avancés
Closures
Hoisting
Scope
Event Loop
Prototypes
Callbacks
Middleware
🎯 Conclusion
JavaScript est :
Polyvalent
Moderne
Indispensable au web
Très demandé sur le marché
Si tu veux, je peux aussi te faire :
📅 Un plan d’apprentissage sur 30 jours
🧠 Des exercices corrigés
💼 Un projet complet étape par étape
📊 Une version encore plus avancée (niveau expert)