Introduction à JavaScript
JavaScript est le langage de programmation du web. Il permet de rendre vos pages web interactives et dynamiques.
🚀 Pourquoi apprendre JavaScript ?
- ✅ Langage incontournable - Utilisé par 98% des sites web
- ✅ Polyvalent - Frontend, Backend (Node.js), Mobile, Desktop
- ✅ Interactivité - Créez des expériences utilisateur riches
- ✅ Écosystème riche - Milliers de bibliothèques et frameworks
- ✅ Opportunités - Forte demande sur le marché du travail
📦 Variables
Les variables permettent de stocker des données. JavaScript offre trois façons de déclarer des variables.
Déclaration de variables
// var - Ancienne méthode (éviter)
var nom = "Jean";
// let - Variable modifiable
let age = 25;
age = 26; // OK
// const - Constante (non modifiable)
const PI = 3.14159;
// PI = 3; // Erreur!
💡 Bonne pratique : Utilisez const par défaut, let si la valeur doit changer, et évitez var.
🔢 Types de données
JavaScript est un langage à typage dynamique avec plusieurs types de données primitifs et complexes.
// Types primitifs
let texte = "Hello"; // String
let nombre = 42; // Number
let decimal = 3.14; // Number
let vrai = true; // Boolean
let vide = null; // Null
let indefini; // Undefined
// Types complexes
let tableau = [1, 2, 3]; // Array
let objet = {nom: "Jean", age: 25}; // Object
➕ Opérateurs
Les opérateurs permettent d'effectuer des opérations sur les variables et valeurs.
Opérateurs arithmétiques
let a = 10, 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.333... - Division
console.log(a % b); // 1 - Modulo (reste)
console.log(a ** b); // 1000 - Puissance
Opérateurs de comparaison
// Égalité (== compare valeur, === compare valeur ET type)
console.log(5 == "5"); // true
console.log(5 === "5"); // false
// Autres comparaisons
console.log(5 != 3); // true - Différent
console.log(5 > 3); // true - Supérieur
console.log(5 >= 5); // true - Supérieur ou égal
🔀 Conditions
Les structures conditionnelles permettent d'exécuter du code selon des conditions.
🔍 Structure if / elseif / else
let age = 18;
if (age < 13) {
console.log("Enfant");
} else if (age < 18) {
console.log("Adolescent");
} else {
console.log("Adulte");
}
Opérateur ternaire
let age = 20;
let statut = age >= 18 ? "Majeur" : "Mineur";
console.log(statut); // "Majeur"
🔁 Boucles
Les boucles permettent de répéter des instructions plusieurs fois.
Boucle for
for (let i = 0; i < 5; i++) {
console.log("Itération " + i);
}
// Affiche: Itération 0, 1, 2, 3, 4
Boucle while
let i = 0;
while (i < 3) {
console.log(i);
i++;
}
⚡ Fonctions
Les fonctions sont des blocs de code réutilisables qui effectuent une tâche spécifique.
Déclaration de fonction
// Fonction classique
function saluer(nom) {
return "Bonjour " + nom;
}
console.log(saluer("Marie")); // "Bonjour Marie"
Arrow function (ES6)
// Syntaxe moderne et concise
const multiplier = (a, b) => a * b;
console.log(multiplier(5, 3)); // 15
📚 Tableaux
Les tableaux permettent de stocker plusieurs valeurs dans une seule variable.
Création et manipulation
let fruits = ["Pomme", "Banane", "Orange"];
// Accès aux éléments
console.log(fruits[0]); // "Pomme"
// Ajouter un élément
fruits.push("Mangue");
// Longueur du tableau
console.log(fruits.length); // 4
Méthodes de tableau
let nombres = [1, 2, 3, 4, 5];
// map - Transformer chaque élément
let doubles = nombres.map(n => n * 2);
// filter - Filtrer les éléments
let pairs = nombres.filter(n => n % 2 === 0);
// reduce - Réduire à une valeur
let somme = nombres.reduce((acc, n) => acc + n, 0);
🎯 Objets
Les objets permettent de regrouper des données et fonctionnalités liées.
let personne = {
nom: "Jean",
age: 30,
saluer: function() {
return "Bonjour, je suis " + this.nom;
}
};
console.log(personne.nom); // "Jean"
console.log(personne.saluer()); // "Bonjour, je suis Jean"
🌐 Manipulation du DOM
Le DOM (Document Object Model) permet d'interagir avec les éléments HTML.
Sélection d'éléments
// Sélectionner par ID
let element = document.getElementById("monId");
// Sélectionner par classe
let elements = document.getElementsByClassName("maClasse");
// Sélecteur CSS (moderne)
let elem = document.querySelector(".maClasse");
let elems = document.querySelectorAll("p");
Modification du contenu
let titre = document.querySelector("h1");
// Modifier le texte
titre.textContent = "Nouveau titre";
// Modifier le HTML
titre.innerHTML = "<span>Titre stylé</span>";
// Modifier les styles
titre.style.color = "blue";
🖱️ Événements
Les événements permettent de réagir aux actions de l'utilisateur.
let bouton = document.querySelector("button");
// Écouter un clic
bouton.addEventListener("click", function() {
alert("Bouton cliqué!");
});
// Avec arrow function
bouton.addEventListener("click", () => {
console.log("Clic détecté");
});
🚀 ES6+ Fonctionnalités modernes
ES6 (ECMAScript 2015) a introduit de nombreuses fonctionnalités modernes.
Destructuring
// Destructuring d'objets
let personne = {nom: "Jean", age: 30};
let {nom, age} = personne;
// Destructuring de tableaux
let [a, b] = [1, 2];
Spread operator
let arr1 = [1, 2];
let arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4]
let obj1 = {a: 1};
let obj2 = {...obj1, b: 2}; // {a: 1, b: 2}
⏱️ Programmation asynchrone
JavaScript permet d'exécuter du code de manière asynchrone pour ne pas bloquer l'exécution.
Promises
let promesse = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Succès!");
}, 1000);
});
promesse.then(resultat => console.log(resultat));
Async/Await
async function chargerDonnees() {
try {
let response = await fetch("api/data");
let data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
}
🎓 Prochaines étapes
Félicitations ! Vous avez maintenant une solide base en JavaScript.
✅ Ce que vous avez appris :
- Variables et types de données
- Opérateurs et expressions
- Structures conditionnelles
- Boucles et itérations
- Fonctions et arrow functions
- Tableaux et méthodes
- Objets et propriétés
- Manipulation du DOM
- Gestion des événements
- Fonctionnalités ES6+
- Programmation asynchrone